@mui/x-date-pickers-pro 7.0.0-beta.2 → 7.0.0-beta.4

package/node/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -35,6 +35,9 @@ const useMobileRangePicker = _ref => {
     sx,
     format,
     formatDensity,
+    enableAccessibleFieldDOMStructure,
+    selectedSections,
+    onSelectedSectionsChange,
     timezone,
     label,
     inputRef,
@@ -44,11 +47,13 @@ const useMobileRangePicker = _ref => {
     disableOpenPicker,
     localeText
   } = props;
+  const startFieldRef = React.useRef(null);
+  const endFieldRef = React.useRef(null);
+  const fieldType = slots.field.fieldType ?? 'multi-input';
   const {
     rangePosition,
-    onRangePositionChange,
-    singleInputFieldRef
-  } = (0, _useRangePosition.useRangePosition)(props);
+    onRangePositionChange
+  } = (0, _useRangePosition.useRangePosition)(props, fieldType === 'single-input' ? startFieldRef : undefined);
   const labelId = (0, _useId.default)();
   const contextLocaleText = (0, _internals.useLocaleText)();
   const {
@@ -61,13 +66,13 @@ const useMobileRangePicker = _ref => {
     props,
     wrapperVariant: 'mobile',
     autoFocusView: true,
+    fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange
     }
   }));
   const Field = slots.field;
-  const fieldType = Field.fieldType ?? 'multi-input';
   const fieldProps = (0, _utils.useSlotProps)({
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
@@ -78,11 +83,14 @@ const useMobileRangePicker = _ref => {
       sx,
       format,
       formatDensity,
+      enableAccessibleFieldDOMStructure,
+      selectedSections,
+      onSelectedSectionsChange,
       timezone
-    }, fieldType === 'single-input' && {
+    }, inputRef ? {
       inputRef,
       name
-    }),
+    } : {}),
     ownerState: props
   });
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
@@ -98,10 +106,11 @@ const useMobileRangePicker = _ref => {
     localeText,
     rangePosition,
     onRangePositionChange,
-    singleInputFieldRef,
     pickerSlots: slots,
     pickerSlotProps: innerSlotProps,
-    fieldProps
+    fieldProps,
+    startFieldRef,
+    endFieldRef
   });
   const slotPropsForLayout = (0, _extends2.default)({}, innerSlotProps, {
     tabs: (0, _extends2.default)({}, innerSlotProps?.tabs, {

package/node/internals/hooks/useMultiInputFieldSelectedSections.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMultiInputFieldSelectedSections = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useMultiInputFieldSelectedSections = params => {
+  const unstableEndFieldRef = React.useRef(null);
+  const handleUnstableEndFieldRef = (0, _useForkRef.default)(params.unstableEndFieldRef, unstableEndFieldRef);
+  const [startSelectedSection, setStartSelectedSection] = React.useState(params.selectedSections ?? null);
+  const [endSelectedSection, setEndSelectedSection] = React.useState(null);
+  const getActiveField = () => {
+    if (unstableEndFieldRef.current && unstableEndFieldRef.current.isFieldFocused()) {
+      return 'end';
+    }
+    return 'start';
+  };
+  const handleStartSelectedSectionChange = (0, _useEventCallback.default)(newSelectedSections => {
+    setStartSelectedSection(newSelectedSections);
+    if (getActiveField() === 'start') {
+      params.onSelectedSectionsChange?.(newSelectedSections);
+    }
+  });
+  const handleEndSelectedSectionChange = (0, _useEventCallback.default)(newSelectedSections => {
+    setEndSelectedSection(newSelectedSections);
+    if (getActiveField() === 'end') {
+      params.onSelectedSectionsChange?.(newSelectedSections);
+    }
+  });
+  const activeField = getActiveField();
+  return {
+    start: {
+      unstableFieldRef: params.unstableStartFieldRef,
+      selectedSections: activeField === 'start' && params.selectedSections !== undefined ? params.selectedSections : startSelectedSection,
+      onSelectedSectionsChange: handleStartSelectedSectionChange
+    },
+    end: {
+      unstableFieldRef: handleUnstableEndFieldRef,
+      selectedSections: activeField === 'end' && params.selectedSections !== undefined ? params.selectedSections : endSelectedSection,
+      onSelectedSectionsChange: handleEndSelectedSectionChange
+    }
+  };
+};
+exports.useMultiInputFieldSelectedSections = useMultiInputFieldSelectedSections;

package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -9,10 +9,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _DateField = require("@mui/x-date-pickers/DateField");
 var _internals = require("@mui/x-date-pickers/internals");
-var _useSingleInputDateRangeField = require("../../../SingleInputDateRangeField/useSingleInputDateRangeField");
 var _validateDateRange = require("../../utils/validation/validateDateRange");
 var _valueManagers = require("../../utils/valueManagers");
 var _shared = require("./shared");
+var _useMultiInputFieldSelectedSections = require("../useMultiInputFieldSelectedSections");
 const useMultiInputDateRangeField = ({
   sharedProps: inSharedProps,
   startTextFieldProps,
@@ -20,7 +20,7 @@ const useMultiInputDateRangeField = ({
   endTextFieldProps,
   unstableEndFieldRef
 }) => {
-  const sharedProps = (0, _useSingleInputDateRangeField.useDefaultizedDateRangeFieldProps)(inSharedProps);
+  const sharedProps = (0, _internals.useDefaultizedDateField)(inSharedProps);
   const adapter = (0, _internals.useLocalizationContext)();
   const {
     value: valueProp,
@@ -33,7 +33,9 @@ const useMultiInputDateRangeField = ({
     readOnly,
     selectedSections,
     onSelectedSectionsChange,
-    timezone: timezoneProp
+    timezone: timezoneProp,
+    enableAccessibleFieldDOMStructure,
+    autoFocus
   } = sharedProps;
   const {
     value,
@@ -70,37 +72,40 @@ const useMultiInputDateRangeField = ({
     value,
     timezone
   }), _validateDateRange.validateDateRange, _valueManagers.rangeValueManager.isSameError, _valueManagers.rangeValueManager.defaultErrorState);
+  const selectedSectionsResponse = (0, _useMultiInputFieldSelectedSections.useMultiInputFieldSelectedSections)({
+    selectedSections,
+    onSelectedSectionsChange,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  });
   const startFieldProps = (0, _extends2.default)({
     error: !!validationError[0]
-  }, startTextFieldProps, {
+  }, startTextFieldProps, selectedSectionsResponse.start, {
     disabled,
     readOnly,
     format,
     formatDensity,
     shouldRespectLeadingZeros,
     timezone,
-    unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure,
+    autoFocus // Do not add on end field.
   });
   const endFieldProps = (0, _extends2.default)({
     error: !!validationError[1]
-  }, endTextFieldProps, {
+  }, endTextFieldProps, selectedSectionsResponse.end, {
     format,
     formatDensity,
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
     timezone,
-    unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure
   });
   const startDateResponse = (0, _DateField.unstable_useDateField)(startFieldProps);
   const endDateResponse = (0, _DateField.unstable_useDateField)(endFieldProps);

package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMultiInputDateTimeRangeField = exports.useDefaultizedDateTimeRangeFieldProps = void 0;
+exports.useMultiInputDateTimeRangeField = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _DateTimeField = require("@mui/x-date-pickers/DateTimeField");
@@ -12,23 +12,7 @@ var _internals = require("@mui/x-date-pickers/internals");
 var _validateDateTimeRange = require("../../utils/validation/validateDateTimeRange");
 var _valueManagers = require("../../utils/valueManagers");
 var _shared = require("./shared");
-const useDefaultizedDateTimeRangeFieldProps = props => {
-  const utils = (0, _internals.useUtils)();
-  const defaultDates = (0, _internals.useDefaultDates)();
-  const ampm = props.ampm ?? utils.is12HourCycleInCurrentLocale();
-  const defaultFormat = ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h;
-  return (0, _extends2.default)({}, props, {
-    disablePast: props.disablePast ?? false,
-    disableFuture: props.disableFuture ?? false,
-    format: props.format ?? defaultFormat,
-    minDate: (0, _internals.applyDefaultDate)(utils, props.minDateTime ?? props.minDate, defaultDates.minDate),
-    maxDate: (0, _internals.applyDefaultDate)(utils, props.maxDateTime ?? props.maxDate, defaultDates.maxDate),
-    minTime: props.minDateTime ?? props.minTime,
-    maxTime: props.maxDateTime ?? props.maxTime,
-    disableIgnoringDatePartForTimeValidation: Boolean(props.minDateTime || props.maxDateTime)
-  });
-};
-exports.useDefaultizedDateTimeRangeFieldProps = useDefaultizedDateTimeRangeFieldProps;
+var _useMultiInputFieldSelectedSections = require("../useMultiInputFieldSelectedSections");
 const useMultiInputDateTimeRangeField = ({
   sharedProps: inSharedProps,
   startTextFieldProps,
@@ -36,19 +20,22 @@ const useMultiInputDateTimeRangeField = ({
   endTextFieldProps,
   unstableEndFieldRef
 }) => {
-  const sharedProps = useDefaultizedDateTimeRangeFieldProps(inSharedProps);
+  const sharedProps = (0, _internals.useDefaultizedDateTimeField)(inSharedProps);
   const adapter = (0, _internals.useLocalizationContext)();
   const {
     value: valueProp,
     defaultValue,
     format,
+    formatDensity,
     shouldRespectLeadingZeros,
-    timezone: timezoneProp,
     onChange,
     disabled,
     readOnly,
     selectedSections,
-    onSelectedSectionsChange
+    onSelectedSectionsChange,
+    timezone: timezoneProp,
+    enableAccessibleFieldDOMStructure,
+    autoFocus
   } = sharedProps;
   const {
     value,
@@ -85,35 +72,40 @@ const useMultiInputDateTimeRangeField = ({
     value,
     timezone
   }), _validateDateTimeRange.validateDateTimeRange, _valueManagers.rangeValueManager.isSameError, _valueManagers.rangeValueManager.defaultErrorState);
+  const selectedSectionsResponse = (0, _useMultiInputFieldSelectedSections.useMultiInputFieldSelectedSections)({
+    selectedSections,
+    onSelectedSectionsChange,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  });
   const startFieldProps = (0, _extends2.default)({
     error: !!validationError[0]
-  }, startTextFieldProps, {
-    format,
-    shouldRespectLeadingZeros,
+  }, startTextFieldProps, selectedSectionsResponse.start, {
     disabled,
     readOnly,
+    format,
+    formatDensity,
+    shouldRespectLeadingZeros,
     timezone,
-    unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure,
+    autoFocus // Do not add on end field.
   });
   const endFieldProps = (0, _extends2.default)({
     error: !!validationError[1]
-  }, endTextFieldProps, {
+  }, endTextFieldProps, selectedSectionsResponse.end, {
     format,
+    formatDensity,
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
     timezone,
-    unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure
   });
   const startDateResponse = (0, _DateTimeField.unstable_useDateTimeField)(startFieldProps);
   const endDateResponse = (0, _DateTimeField.unstable_useDateTimeField)(endFieldProps);

package/node/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMultiInputTimeRangeField = exports.useDefaultizedTimeRangeFieldProps = void 0;
+exports.useMultiInputTimeRangeField = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _TimeField = require("@mui/x-date-pickers/TimeField");
@@ -12,17 +12,7 @@ var _internals = require("@mui/x-date-pickers/internals");
 var _validateTimeRange = require("../../utils/validation/validateTimeRange");
 var _valueManagers = require("../../utils/valueManagers");
 var _shared = require("./shared");
-const useDefaultizedTimeRangeFieldProps = props => {
-  const utils = (0, _internals.useUtils)();
-  const ampm = props.ampm ?? utils.is12HourCycleInCurrentLocale();
-  const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h;
-  return (0, _extends2.default)({}, props, {
-    disablePast: props.disablePast ?? false,
-    disableFuture: props.disableFuture ?? false,
-    format: props.format ?? defaultFormat
-  });
-};
-exports.useDefaultizedTimeRangeFieldProps = useDefaultizedTimeRangeFieldProps;
+var _useMultiInputFieldSelectedSections = require("../useMultiInputFieldSelectedSections");
 const useMultiInputTimeRangeField = ({
   sharedProps: inSharedProps,
   startTextFieldProps,
@@ -30,19 +20,22 @@ const useMultiInputTimeRangeField = ({
   endTextFieldProps,
   unstableEndFieldRef
 }) => {
-  const sharedProps = useDefaultizedTimeRangeFieldProps(inSharedProps);
+  const sharedProps = (0, _internals.useDefaultizedTimeField)(inSharedProps);
   const adapter = (0, _internals.useLocalizationContext)();
   const {
     value: valueProp,
     defaultValue,
     format,
+    formatDensity,
     shouldRespectLeadingZeros,
-    timezone: timezoneProp,
     onChange,
     disabled,
     readOnly,
     selectedSections,
-    onSelectedSectionsChange
+    onSelectedSectionsChange,
+    timezone: timezoneProp,
+    enableAccessibleFieldDOMStructure,
+    autoFocus
   } = sharedProps;
   const {
     value,
@@ -79,35 +72,40 @@ const useMultiInputTimeRangeField = ({
     value,
     timezone
   }), _validateTimeRange.validateTimeRange, _valueManagers.rangeValueManager.isSameError, _valueManagers.rangeValueManager.defaultErrorState);
+  const selectedSectionsResponse = (0, _useMultiInputFieldSelectedSections.useMultiInputFieldSelectedSections)({
+    selectedSections,
+    onSelectedSectionsChange,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  });
   const startFieldProps = (0, _extends2.default)({
     error: !!validationError[0]
-  }, startTextFieldProps, {
-    format,
-    shouldRespectLeadingZeros,
+  }, startTextFieldProps, selectedSectionsResponse.start, {
     disabled,
     readOnly,
+    format,
+    formatDensity,
+    shouldRespectLeadingZeros,
     timezone,
-    unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure,
+    autoFocus // Do not add on end field.
   });
   const endFieldProps = (0, _extends2.default)({
     error: !!validationError[1]
-  }, endTextFieldProps, {
+  }, endTextFieldProps, selectedSectionsResponse.end, {
     format,
+    formatDensity,
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
     timezone,
-    unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure
   });
   const startDateResponse = (0, _TimeField.unstable_useTimeField)(startFieldProps);
   const endDateResponse = (0, _TimeField.unstable_useTimeField)(endFieldProps);

package/node/internals/hooks/useRangePosition.js

@@ -5,13 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useRangePosition = void 0;
-var React = _interopRequireWildcard(require("react"));
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useRangePosition = props => {
-  const singleInputFieldRef = React.useRef();
+const useRangePosition = (props, singleInputFieldRef) => {
   const [rangePosition, setRangePosition] = (0, _useControlled.default)({
     name: 'useRangePosition',
     state: 'rangePosition',
@@ -22,7 +18,7 @@ const useRangePosition = props => {
   // When using a single input field,
   // we want to select the 1st section of the edited date when updating the range position.
   const syncRangePositionWithSingleInputField = newRangePosition => {
-    if (singleInputFieldRef.current == null) {
+    if (singleInputFieldRef?.current == null) {
       return;
     }
     const sections = singleInputFieldRef.current.getSections();
@@ -36,8 +32,7 @@ const useRangePosition = props => {
   });
   return {
     rangePosition,
-    onRangePositionChange: handleRangePositionChange,
-    singleInputFieldRef
+    onRangePositionChange: handleRangePositionChange
   };
 };
 exports.useRangePosition = useRangePosition;

package/node/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -55,6 +55,7 @@ const useStaticRangePicker = _ref => {
   } = (0, _internals.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
     autoFocusView: autoFocus ?? false,
+    fieldRef: undefined,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange

package/node/internals/models/index.js

@@ -36,17 +36,6 @@ Object.keys(_timeRange).forEach(function (key) {
     }
   });
 });
-var _fields = require("./fields");
-Object.keys(_fields).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _fields[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _fields[key];
-    }
-  });
-});
 var _rangePickerProps = require("./rangePickerProps");
 Object.keys(_rangePickerProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTcwNzQyOTYwMDAwMA==";
+  const releaseInfo = "MTcwODYyODQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/internals/utils/valueManagers.js

@@ -57,7 +57,7 @@ const rangeFieldValueManager = exports.rangeFieldValueManager = {
     }
     return [prevReferenceValue[1], value[1]];
   },
-  getSectionsFromValue: (utils, [start, end], fallbackSections, localizedDigits, isRTL, getSectionsFromDate) => {
+  getSectionsFromValue: (utils, [start, end], fallbackSections, getSectionsFromDate) => {
     const separatedFallbackSections = fallbackSections == null ? {
       startDate: null,
       endDate: null
@@ -72,7 +72,8 @@ const rangeFieldValueManager = exports.rangeFieldValueManager = {
         if (sectionIndex === sections.length - 1 && position === 'start') {
           return (0, _extends2.default)({}, section, {
             dateName: position,
-            endSeparator: `${section.endSeparator}${isRTL ? '\u2069 – \u2066' : ' – '}`
+            // TODO: Check if RTL still works
+            endSeparator: `${section.endSeparator} – `
           });
         }
         return (0, _extends2.default)({}, section, {
@@ -80,11 +81,15 @@ const rangeFieldValueManager = exports.rangeFieldValueManager = {
         });
       });
     };
-    return (0, _internals.addPositionPropertiesToSections)([...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')], localizedDigits, isRTL);
+    return [...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')];
   },
-  getValueStrFromSections: (sections, localizedDigits, isRTL) => {
+  getV7HiddenInputValueFromSections: sections => {
     const dateRangeSections = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
-    return (0, _internals.createDateStrForInputFromSections)([...dateRangeSections.startDate, ...dateRangeSections.endDate], localizedDigits, isRTL);
+    return (0, _internals.createDateStrForV7HiddenInputFromSections)([...dateRangeSections.startDate, ...dateRangeSections.endDate]);
+  },
+  getV6InputValueFromSections: (sections, localizedDigits, isRTL) => {
+    const dateRangeSections = (0, _dateFieldsUtils.splitDateRangeSections)(sections);
+    return (0, _internals.createDateStrForV6InputFromSections)([...dateRangeSections.startDate, ...dateRangeSections.endDate], localizedDigits, isRTL);
   },
   parseValueStr: (valueStr, referenceValue, parseDate) => {
     // TODO: Improve because it would not work if the date format has `–` as a separator.

package/node/models/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _fields = require("./fields");
+Object.keys(_fields).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _fields[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _fields[key];
+    }
+  });
+});
 var _range = require("./range");
 Object.keys(_range).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.4",
   "description": "The commercial edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -32,10 +32,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@mui/base": "^5.0.0-beta.34",
-    "@mui/system": "^5.15.7",
-    "@mui/utils": "^5.15.7",
-    "@mui/x-date-pickers": "7.0.0-beta.2",
+    "@mui/base": "^5.0.0-beta.36",
+    "@mui/system": "^5.15.9",
+    "@mui/utils": "^5.15.9",
+    "@mui/x-date-pickers": "7.0.0-beta.4",
     "@mui/x-license": "7.0.0-beta.2",
     "clsx": "^2.1.0",
     "prop-types": "^15.8.1",

package/themeAugmentation/props.d.ts

@@ -25,25 +25,25 @@ export interface PickersProComponentsPropsList {
   MuiDateTimeRangePickerToolbar: ExportedDateTimeRangePickerToolbarProps;
 
   // Multi input range fields
-  MuiMultiInputDateRangeField: MultiInputDateRangeFieldProps<PickerValidDate>;
-  MuiMultiInputDateTimeRangeField: MultiInputDateTimeRangeFieldProps<PickerValidDate>;
-  MuiMultiInputTimeRangeField: MultiInputTimeRangeFieldProps<PickerValidDate>;
+  MuiMultiInputDateRangeField: MultiInputDateRangeFieldProps<PickerValidDate, any>;
+  MuiMultiInputDateTimeRangeField: MultiInputDateTimeRangeFieldProps<PickerValidDate, any>;
+  MuiMultiInputTimeRangeField: MultiInputTimeRangeFieldProps<PickerValidDate, any>;
 
   // Single input range fields
-  MuiSingleInputDateRangeField: SingleInputDateRangeFieldProps<PickerValidDate>;
-  MuiSingleInputDateTimeRangeField: SingleInputDateTimeRangeFieldProps<PickerValidDate>;
-  MuiSingleInputTimeRangeField: SingleInputTimeRangeFieldProps<PickerValidDate>;
+  MuiSingleInputDateRangeField: SingleInputDateRangeFieldProps<PickerValidDate, any>;
+  MuiSingleInputDateTimeRangeField: SingleInputDateTimeRangeFieldProps<PickerValidDate, any>;
+  MuiSingleInputTimeRangeField: SingleInputTimeRangeFieldProps<PickerValidDate, any>;
 
   // Date Range Pickers
-  MuiDateRangePicker: DateRangePickerProps<PickerValidDate>;
-  MuiDesktopDateRangePicker: DesktopDateRangePickerProps<PickerValidDate>;
-  MuiMobileDateRangePicker: MobileDateRangePickerProps<PickerValidDate>;
+  MuiDateRangePicker: DateRangePickerProps<PickerValidDate, any>;
+  MuiDesktopDateRangePicker: DesktopDateRangePickerProps<PickerValidDate, any>;
+  MuiMobileDateRangePicker: MobileDateRangePickerProps<PickerValidDate, any>;
   MuiStaticDateRangePicker: StaticDateRangePickerProps<PickerValidDate>;
 
   // Date Time Range Pickers
-  MuiDateTimeRangePicker: DateTimeRangePickerProps<PickerValidDate>;
-  MuiDesktopDateTimeRangePicker: DesktopDateTimeRangePickerProps<PickerValidDate>;
-  MuiMobileDateTimeRangePicker: MobileDateTimeRangePickerProps<PickerValidDate>;
+  MuiDateTimeRangePicker: DateTimeRangePickerProps<PickerValidDate, any>;
+  MuiDesktopDateTimeRangePicker: DesktopDateTimeRangePickerProps<PickerValidDate, any>;
+  MuiMobileDateTimeRangePicker: MobileDateTimeRangePickerProps<PickerValidDate, any>;
 }
 
 declare module '@mui/material/styles' {

package/internals/models/fields.d.ts

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { SlotComponentProps } from '@mui/base/utils';
-import { BaseFieldProps, FieldsTextFieldProps } from '@mui/x-date-pickers/internals';
-import { FieldSection, FieldRef, PickerValidDate } from '@mui/x-date-pickers/models';
-export interface RangeFieldSection extends FieldSection {
-    dateName: 'start' | 'end';
-}
-export type FieldType = 'single-input' | 'multi-input';
-/**
- * Props the `textField` slot of the multi input field can receive when used inside a picker.
- */
-export interface MultiInputFieldSlotTextFieldProps {
-    inputRef?: React.Ref<HTMLInputElement>;
-    disabled?: boolean;
-    readOnly?: boolean;
-    id?: string;
-    label?: React.ReactNode;
-    onKeyDown?: React.KeyboardEventHandler;
-    onFocus?: React.FocusEventHandler;
-    focused?: boolean;
-    InputProps?: Partial<FieldsTextFieldProps['InputProps']>;
-}
-/**
- * Props the `root` slot of the multi input field can receive when used inside a picker.
- */
-export interface MultiInputFieldSlotRootProps {
-    onBlur?: React.FocusEventHandler;
-}
-export interface MultiInputFieldRefs {
-    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
-    unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
-}
-/**
- * Props the multi input field can receive when used inside a picker.
- * Only contains what the MUI component are passing to the field, not what users can pass using the `props.slotProps.field`.
- */
-export interface BaseMultiInputFieldProps<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TError> extends BaseFieldProps<TValue, TDate, TSection, TError>, MultiInputFieldRefs {
-    slots?: {
-        root?: React.ElementType;
-        separator?: React.ElementType;
-        textField?: React.ElementType;
-    };
-    slotProps?: {
-        root?: SlotComponentProps<React.ElementType<MultiInputFieldSlotRootProps>, {}, Record<string, any>>;
-        textField?: SlotComponentProps<React.ElementType<MultiInputFieldSlotTextFieldProps>, {}, {
-            position?: 'start' | 'end';
-        } & Record<string, any>>;
-    };
-}

package/legacy/AdapterDateFns/index.js

@@ -1 +0,0 @@
-export { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';