@mui/x-date-pickers-pro/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js

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

"use strict";
'use client';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createMultiInputRangeField = createMultiInputRangeField;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
var _styles = require("@mui/material/styles");
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
var _internals = require("@mui/x-date-pickers/internals");
var _hooks = require("@mui/x-date-pickers/hooks");
var _PickersTextField = require("@mui/x-date-pickers/PickersTextField");
var _useMultiInputRangeField = require("../../../hooks/useMultiInputRangeField");
var _useTextFieldProps = require("./useTextFieldProps");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["slots", "slotProps", "className", "classes"];
function createMultiInputRangeField({
  useManager,
  name,
  getUtilityClass,
  allowTriggerShifting
}) {
  const useUtilityClasses = classes => {
    const slots = {
      root: ['root'],
      separator: ['separator']
    };
    return (0, _composeClasses.default)(slots, getUtilityClass, classes);
  };
  const MultiInputRangeFieldRoot = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, (0, _extends2.default)({
    ref: ref,
    spacing: 2,
    direction: "row",
    alignItems: "baseline"
  }, props))), {
    name,
    slot: 'Root'
  })({});
  if (process.env.NODE_ENV !== "production") MultiInputRangeFieldRoot.displayName = "MultiInputRangeFieldRoot";
  const MultiInputRangeFieldSeparator = (0, _styles.styled)(_Typography.default, {
    name,
    slot: 'Separator'
  })({
    lineHeight: '1.4375em' // 23px
  });
  const MultiInputRangeField = /*#__PURE__*/React.forwardRef(function MultiInputRangeField(props, ref) {
    const themeProps = (0, _styles.useThemeProps)({
      props,
      // eslint-disable-next-line material-ui/mui-name-matches-component-name
      name
    });
    const pickerFieldUIContext = React.useContext(_internals.PickerFieldUIContext);
    const pickerContext = (0, _internals.useNullablePickerContext)();
    const manager = useManager({
      enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
      dateSeparator: props.dateSeparator
    });
    const {
      internalProps: rawInternalProps,
      forwardedProps
    } = (0, _hooks.useSplitFieldProps)(themeProps, manager.valueType);
    const internalProps = pickerContext?.variant === 'mobile' ? (0, _extends2.default)({}, rawInternalProps, {
      readOnly: true
    }) : rawInternalProps;
    const {
        slots,
        slotProps,
        className,
        classes: classesProp
      } = forwardedProps,
      otherForwardedProps = (0, _objectWithoutPropertiesLoose2.default)(forwardedProps, _excluded);
    const classes = useUtilityClasses(classesProp);
    const ownerState = (0, _internals.useFieldOwnerState)(internalProps);
    const handleRef = (0, _useForkRef.default)(ref, pickerContext?.rootRef);
    const Root = slots?.root ?? MultiInputRangeFieldRoot;
    const rootProps = (0, _useSlotProps.default)({
      elementType: Root,
      externalSlotProps: slotProps?.root,
      externalForwardedProps: otherForwardedProps,
      additionalProps: {
        ref: handleRef
      },
      ownerState,
      className: (0, _clsx.default)(className, classes.root)
    });
    const startTextFieldProps = (0, _useTextFieldProps.useTextFieldProps)({
      slotProps,
      ownerState,
      position: 'start',
      allowTriggerShifting
    });
    const endTextFieldProps = (0, _useTextFieldProps.useTextFieldProps)({
      slotProps,
      ownerState,
      position: 'end',
      allowTriggerShifting
    });
    const fieldResponse = (0, _useMultiInputRangeField.useMultiInputRangeField)({
      manager,
      internalProps,
      rootProps,
      startTextFieldProps,
      endTextFieldProps
    });
    const Separator = slots?.separator ?? MultiInputRangeFieldSeparator;
    const separatorProps = (0, _useSlotProps.default)({
      elementType: Separator,
      externalSlotProps: slotProps?.separator,
      additionalProps: {
        children: internalProps.dateSeparator ?? '–'
      },
      ownerState,
      className: classes.separator
    });
    const cleanStartTextFieldResponse = (0, _internals.cleanFieldResponse)(fieldResponse.startTextField);
    const cleanEndTextFieldResponse = (0, _internals.cleanFieldResponse)(fieldResponse.endTextField);
    const TextField = slots?.textField ?? pickerFieldUIContext.slots.textField ?? (fieldResponse.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, fieldResponse.root, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
        fullWidth: true
      }, cleanStartTextFieldResponse.textFieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Separator, (0, _extends2.default)({}, separatorProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
        fullWidth: true
      }, cleanEndTextFieldResponse.textFieldProps))]
    }));
  });
  if (process.env.NODE_ENV !== "production") MultiInputRangeField.displayName = "MultiInputRangeField";
  MultiInputRangeField.fieldType = 'multi-input';
  return MultiInputRangeField;
}