@mui/x-date-pickers-pro/esm/hooks/useMultiInputRangeField/useTextFieldProps.js

The Pro plan edition of the MUI X Date and Time Picker components.

'use client';

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["clearable", "onClear", "openPickerAriaLabel"];
import * as React from 'react';
import useEventCallback from '@mui/utils/useEventCallback';
import { useDateManager, useDateTimeManager, useTimeManager } from '@mui/x-date-pickers/managers';
import { useField, useNullableFieldPrivateContext, useNullablePickerContext, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
import { useNullablePickerRangePositionContext } from "../../internals/hooks/useNullablePickerRangePositionContext.js";
/**
 * @ignore - internal hook.
 */
export function useTextFieldProps(parameters) {
  const pickerContext = useNullablePickerContext();
  const fieldPrivateContext = useNullableFieldPrivateContext();
  const pickerPrivateContext = usePickerPrivateContext();
  const rangePositionContext = useNullablePickerRangePositionContext();
  const rangePosition = rangePositionContext?.rangePosition ?? 'start';
  const setRangePosition = rangePositionContext?.setRangePosition;
  const previousRangePosition = React.useRef(rangePosition);
  const {
    forwardedProps,
    sharedInternalProps,
    selectedSectionProps,
    valueType,
    position,
    value,
    onChange,
    autoFocus,
    validation
  } = parameters;
  let useManager;
  switch (valueType) {
    case 'date':
      {
        useManager = useDateManager;
        break;
      }
    case 'time':
      {
        useManager = useTimeManager;
        break;
      }
    case 'date-time':
      {
        useManager = useDateTimeManager;
        break;
      }
    default:
      {
        throw new Error(`Unknown valueType: ${valueType}`);
      }
  }
  const manager = useManager({
    enableAccessibleFieldDOMStructure: sharedInternalProps.enableAccessibleFieldDOMStructure
  });
  const openPickerIfPossible = event => {
    if (!pickerContext) {
      return;
    }
    setRangePosition?.(position);
    if (pickerContext.triggerStatus === 'enabled') {
      event.preventDefault();
      pickerContext.setOpen(true);
    }
  };
  const handleKeyDown = useEventCallback(event => {
    if (event.key === 'Enter' || event.key === ' ') {
      openPickerIfPossible(event);
    }
  });

  // Registering `onClick` listener on the root element as well to correctly handle cases where user is clicking on `label`
  // which has `pointer-events: none` and due to DOM structure the `input` does not catch the click event
  const handleClick = useEventCallback(event => {
    openPickerIfPossible(event);
  });
  const handleFocus = useEventCallback(event => {
    forwardedProps.onFocus?.(event);
    if (pickerContext?.open) {
      setRangePosition?.(position);
      if (previousRangePosition.current !== position && pickerContext.initialView) {
        pickerContext.setView?.(pickerContext.initialView);
      }
    }
  });
  const handleChange = useEventCallback((newSingleValue, rawContext) => {
    const newRange = position === 'start' ? [newSingleValue, value[1]] : [value[0], newSingleValue];
    const context = _extends({}, rawContext, {
      validationError: validation.getValidationErrorForNewValue(newRange)
    });
    onChange(newRange, context);
  });
  const allProps = _extends({
    value: position === 'start' ? value[0] : value[1],
    error: position === 'start' ? !!validation.validationError[0] : !!validation.validationError[1],
    id: `${pickerPrivateContext.labelId}-${position}`,
    autoFocus: position === 'start' ? autoFocus : undefined
  }, forwardedProps, sharedInternalProps, selectedSectionProps, {
    onClick: handleClick,
    onFocus: handleFocus,
    onKeyDown: handleKeyDown,
    onChange: handleChange
  });
  const _ref = useField({
      manager,
      props: allProps,
      skipContextFieldRefAssignment: rangePosition !== position
    }),
    fieldResponse = _objectWithoutPropertiesLoose(_ref, _excluded);
  React.useEffect(() => {
    if (!pickerContext?.open || pickerContext?.variant === 'mobile') {
      return;
    }
    fieldPrivateContext?.fieldRef.current?.focusField();
    if (!fieldPrivateContext?.fieldRef.current || pickerContext.view === pickerContext.initialView) {
      // could happen when the user is switching between the inputs
      previousRangePosition.current = rangePosition;
      return;
    }

    // bring back focus to the field
    // currentView is present on DateTimeRangePicker
    fieldPrivateContext?.fieldRef.current.setSelectedSections(
    // use the current view or `0` when the range position has just been swapped
    previousRangePosition.current === rangePosition ? pickerContext.view : 0);
    previousRangePosition.current = rangePosition;
  }, [rangePosition, pickerContext?.open, pickerContext?.variant, pickerContext?.initialView, pickerContext?.view, fieldPrivateContext?.fieldRef]);
  return fieldResponse;
}