@mui/x-date-pickers-pro/esm/internals/utils/createMultiInputRangeField/createMultiInputRangeField.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 = ["slots", "slotProps", "className", "classes"];
import * as React from 'react';
import clsx from 'clsx';
import Stack from '@mui/material/Stack';
import MuiTextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { styled, useThemeProps } from '@mui/material/styles';
import composeClasses from '@mui/utils/composeClasses';
import useSlotProps from '@mui/utils/useSlotProps';
import useForkRef from '@mui/utils/useForkRef';
import { cleanFieldResponse, useFieldOwnerState, PickerFieldUIContext, useNullablePickerContext } from '@mui/x-date-pickers/internals';
import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
import { useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/index.js";
import { useTextFieldProps } from "./useTextFieldProps.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function createMultiInputRangeField({
  useManager,
  name,
  getUtilityClass,
  allowTriggerShifting
}) {
  const useUtilityClasses = classes => {
    const slots = {
      root: ['root'],
      separator: ['separator']
    };
    return composeClasses(slots, getUtilityClass, classes);
  };
  const MultiInputRangeFieldRoot = styled(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
    ref: ref,
    spacing: 2,
    direction: "row",
    alignItems: "baseline"
  }, props))), {
    name,
    slot: 'Root'
  })({});
  if (process.env.NODE_ENV !== "production") MultiInputRangeFieldRoot.displayName = "MultiInputRangeFieldRoot";
  const MultiInputRangeFieldSeparator = styled(Typography, {
    name,
    slot: 'Separator'
  })({
    lineHeight: '1.4375em' // 23px
  });
  const MultiInputRangeField = /*#__PURE__*/React.forwardRef(function MultiInputRangeField(props, ref) {
    const themeProps = useThemeProps({
      props,
      // eslint-disable-next-line material-ui/mui-name-matches-component-name
      name
    });
    const pickerFieldUIContext = React.useContext(PickerFieldUIContext);
    const pickerContext = useNullablePickerContext();
    const manager = useManager({
      enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
      dateSeparator: props.dateSeparator
    });
    const {
      internalProps: rawInternalProps,
      forwardedProps
    } = useSplitFieldProps(themeProps, manager.valueType);
    const internalProps = pickerContext?.variant === 'mobile' ? _extends({}, rawInternalProps, {
      readOnly: true
    }) : rawInternalProps;
    const {
        slots,
        slotProps,
        className,
        classes: classesProp
      } = forwardedProps,
      otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
    const classes = useUtilityClasses(classesProp);
    const ownerState = useFieldOwnerState(internalProps);
    const handleRef = useForkRef(ref, pickerContext?.rootRef);
    const Root = slots?.root ?? MultiInputRangeFieldRoot;
    const rootProps = useSlotProps({
      elementType: Root,
      externalSlotProps: slotProps?.root,
      externalForwardedProps: otherForwardedProps,
      additionalProps: {
        ref: handleRef
      },
      ownerState,
      className: clsx(className, classes.root)
    });
    const startTextFieldProps = useTextFieldProps({
      slotProps,
      ownerState,
      position: 'start',
      allowTriggerShifting
    });
    const endTextFieldProps = useTextFieldProps({
      slotProps,
      ownerState,
      position: 'end',
      allowTriggerShifting
    });
    const fieldResponse = useMultiInputRangeField({
      manager,
      internalProps,
      rootProps,
      startTextFieldProps,
      endTextFieldProps
    });
    const Separator = slots?.separator ?? MultiInputRangeFieldSeparator;
    const separatorProps = useSlotProps({
      elementType: Separator,
      externalSlotProps: slotProps?.separator,
      additionalProps: {
        children: internalProps.dateSeparator ?? '–'
      },
      ownerState,
      className: classes.separator
    });
    const cleanStartTextFieldResponse = cleanFieldResponse(fieldResponse.startTextField);
    const cleanEndTextFieldResponse = cleanFieldResponse(fieldResponse.endTextField);
    const TextField = slots?.textField ?? pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
    return /*#__PURE__*/_jsxs(Root, _extends({}, fieldResponse.root, {
      children: [/*#__PURE__*/_jsx(TextField, _extends({
        fullWidth: true
      }, cleanStartTextFieldResponse.textFieldProps)), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
        fullWidth: true
      }, cleanEndTextFieldResponse.textFieldProps))]
    }));
  });
  if (process.env.NODE_ENV !== "production") MultiInputRangeField.displayName = "MultiInputRangeField";
  MultiInputRangeField.fieldType = 'multi-input';
  return MultiInputRangeField;
}