@mui/x-date-pickers 6.0.2 → 6.0.3

package/legacy/AdapterMoment/index.js

@@ -78,6 +78,10 @@ export var AdapterMoment = /*#__PURE__*/function (_BaseAdapterMoment) {
       start: '[',
       end: ']'
     };
+    /**
+     * The current getFormatHelperText method uses an outdated format parsing logic.
+     * We should use this one in the future to support all localized formats.
+     */
     _this.expandFormat = function (format) {
       // @see https://github.com/moment/moment/blob/develop/src/lib/format/format.js#L6
       var localFormattingTokens = /(\[[^[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})|./g;
@@ -92,6 +96,7 @@ export var AdapterMoment = /*#__PURE__*/function (_BaseAdapterMoment) {
     _this.getCurrentLocaleCode = function () {
       return _this.locale || defaultMoment.locale();
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
     };

package/legacy/AdapterMomentHijri/index.js

@@ -62,6 +62,10 @@ export var AdapterMomentHijri = /*#__PURE__*/function (_BaseAdapterMomentHij) {
       start: '[',
       end: ']'
     };
+    /**
+     * The current getFormatHelperText method uses an outdated format parsing logic.
+     * We should use this one in the future to support all localized formats.
+     */
     _this.expandFormat = function (format) {
       // @see https://github.com/moment/moment/blob/develop/src/lib/format/format.js#L6
       var localFormattingTokens = /(\[[^[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})|./g;
@@ -73,6 +77,7 @@ export var AdapterMomentHijri = /*#__PURE__*/function (_BaseAdapterMomentHij) {
         return token;
       }).join('').replace('dd', 'iDD'); // Fix for https://github.com/dmtrKovalenko/date-io/pull/632
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/a/gi, '(a|p)m').replace('iY', 'Y').replace('iM', 'M').replace('iD', 'D').toLocaleLowerCase();
     };

package/legacy/AdapterMomentJalaali/index.js

@@ -59,6 +59,10 @@ export var AdapterMomentJalaali = /*#__PURE__*/function (_BaseAdapterMomentJal)
       start: '[',
       end: ']'
     };
+    /**
+     * The current getFormatHelperText method uses an outdated format parsing logic.
+     * We should use this one in the future to support all localized formats.
+     */
     _this.expandFormat = function (format) {
       // @see https://github.com/moment/moment/blob/develop/src/lib/format/format.js#L6
       var localFormattingTokens = /(\[[^[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})|./g;
@@ -70,6 +74,7 @@ export var AdapterMomentJalaali = /*#__PURE__*/function (_BaseAdapterMomentJal)
         return token;
       }).join('').replace('dd', 'jDD'); // Fix for https://github.com/dmtrKovalenko/date-io/pull/632;
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/a/gi, '(a|p)m').replace('jY', 'Y').replace('jM', 'M').replace('jD', 'D').toLocaleLowerCase();
     };

package/legacy/DateField/DateField.js

@@ -263,6 +263,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/legacy/DateField/useDateField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"];
+var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateDate } from '../internals/hooks/validation/useDateValidation';
@@ -37,6 +37,7 @@ export var useDateField = function useDateField(_ref) {
     disablePast = _useDefaultizedDateFi.disablePast,
     selectedSections = _useDefaultizedDateFi.selectedSections,
     onSelectedSectionsChange = _useDefaultizedDateFi.onSelectedSectionsChange,
+    unstableFieldRef = _useDefaultizedDateFi.unstableFieldRef,
     other = _objectWithoutProperties(_useDefaultizedDateFi, _excluded);
   return useField({
     inputRef: inputRef,
@@ -56,7 +57,8 @@ export var useDateField = function useDateField(_ref) {
       disableFuture: disableFuture,
       disablePast: disablePast,
       selectedSections: selectedSections,
-      onSelectedSectionsChange: onSelectedSectionsChange
+      onSelectedSectionsChange: onSelectedSectionsChange,
+      unstableFieldRef: unstableFieldRef
     },
     valueManager: singleItemValueManager,
     fieldValueManager: singleItemFieldValueManager,

package/legacy/DateTimeField/DateTimeField.js

@@ -311,6 +311,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/legacy/DateTimeField/useDateTimeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm"];
+var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateDateTime } from '../internals/hooks/validation/useDateTimeValidation';
@@ -51,6 +51,7 @@ export var useDateTimeField = function useDateTimeField(_ref) {
     selectedSections = _useDefaultizedDateTi.selectedSections,
     onSelectedSectionsChange = _useDefaultizedDateTi.onSelectedSectionsChange,
     ampm = _useDefaultizedDateTi.ampm,
+    unstableFieldRef = _useDefaultizedDateTi.unstableFieldRef,
     other = _objectWithoutProperties(_useDefaultizedDateTi, _excluded);
   return useField({
     inputRef: inputRef,
@@ -77,7 +78,8 @@ export var useDateTimeField = function useDateTimeField(_ref) {
       disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
       selectedSections: selectedSections,
       onSelectedSectionsChange: onSelectedSectionsChange,
-      ampm: ampm
+      ampm: ampm,
+      unstableFieldRef: unstableFieldRef
     },
     valueManager: singleItemValueManager,
     fieldValueManager: singleItemFieldValueManager,

package/legacy/PickersDay/PickersDay.js

@@ -36,16 +36,16 @@ var styleArg = function styleArg(_ref) {
     height: DAY_SIZE,
     borderRadius: '50%',
     padding: 0,
-    // background required here to prevent collides with the other days when animating with transition group
-    backgroundColor: (theme.vars || theme).palette.background.paper,
+    // explicitly setting to `transparent` to avoid potentially getting impacted by change from the overridden component
+    backgroundColor: 'transparent',
     color: (theme.vars || theme).palette.text.primary,
     '@media (pointer: fine)': {
       '&:hover': {
-        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.activeChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
       }
     },
     '&:focus': _defineProperty({
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.activeChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.focusOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
     }, "&.".concat(pickersDayClasses.selected), {
       willChange: 'background-color',
       backgroundColor: (theme.vars || theme).palette.primary.dark

package/legacy/TimeField/TimeField.js

@@ -274,6 +274,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/legacy/TimeField/useTimeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm"];
+var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateTime } from '../internals/hooks/validation/useTimeValidation';
@@ -37,6 +37,7 @@ export var useTimeField = function useTimeField(_ref) {
     selectedSections = _useDefaultizedTimeFi.selectedSections,
     onSelectedSectionsChange = _useDefaultizedTimeFi.onSelectedSectionsChange,
     ampm = _useDefaultizedTimeFi.ampm,
+    unstableFieldRef = _useDefaultizedTimeFi.unstableFieldRef,
     other = _objectWithoutProperties(_useDefaultizedTimeFi, _excluded);
   return useField({
     inputRef: inputRef,
@@ -58,7 +59,8 @@ export var useTimeField = function useTimeField(_ref) {
       disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
       selectedSections: selectedSections,
       onSelectedSectionsChange: onSelectedSectionsChange,
-      ampm: ampm
+      ampm: ampm,
+      unstableFieldRef: unstableFieldRef
     },
     valueManager: singleItemValueManager,
     fieldValueManager: singleItemFieldValueManager,

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.0.2
+ * @mui/x-date-pickers v6.0.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -14,6 +14,7 @@ export * from './locales';
 export * from './DateField';
 export * from './TimeField';
 export * from './DateTimeField';
+
 // Calendars
 export * from './DateCalendar';
 export * from './MonthCalendar';
@@ -42,4 +43,5 @@ export * from './timeViewRenderers';
 export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
-export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
+export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
+export * from './models';

package/legacy/internals/hooks/useField/index.js

@@ -1,2 +1,2 @@
 export { useField } from './useField';
-export { splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, getSectionOrder } from './useField.utils';
+export { splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections } from './useField.utils';

package/legacy/internals/hooks/useField/useField.js

@@ -6,9 +6,10 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
+import { useTheme } from '@mui/material/styles';
 import { useValidation } from '../validation/useValidation';
 import { useUtils } from '../useUtils';
-import { adjustSectionValue, isAndroid, cleanString } from './useField.utils';
+import { adjustSectionValue, isAndroid, cleanString, getSectionOrder } from './useField.utils';
 import { useFieldState } from './useFieldState';
 import { useFieldCharacterEditing } from './useFieldCharacterEditing';
 import { getActiveElement } from '../../utils/utils';
@@ -17,13 +18,12 @@ export var useField = function useField(params) {
   var _useFieldState = useFieldState(params),
     state = _useFieldState.state,
     selectedSectionIndexes = _useFieldState.selectedSectionIndexes,
-    setSelectedSections = _useFieldState.setSelectedSections,
+    _setSelectedSections = _useFieldState.setSelectedSections,
     clearValue = _useFieldState.clearValue,
     clearActiveSection = _useFieldState.clearActiveSection,
     updateSectionValue = _useFieldState.updateSectionValue,
     updateValueFromValueStr = _useFieldState.updateValueFromValueStr,
     setTempAndroidValueStr = _useFieldState.setTempAndroidValueStr,
-    sectionOrder = _useFieldState.sectionOrder,
     sectionsValueBoundaries = _useFieldState.sectionsValueBoundaries;
   var _useFieldCharacterEdi = useFieldCharacterEditing({
       sections: state.sections,
@@ -35,8 +35,10 @@ export var useField = function useField(params) {
     resetCharacterQuery = _useFieldCharacterEdi.resetCharacterQuery;
   var inputRefProp = params.inputRef,
     internalProps = params.internalProps,
-    _params$internalProps = params.internalProps.readOnly,
-    readOnly = _params$internalProps === void 0 ? false : _params$internalProps,
+    _params$internalProps = params.internalProps,
+    _params$internalProps2 = _params$internalProps.readOnly,
+    readOnly = _params$internalProps2 === void 0 ? false : _params$internalProps2,
+    unstableFieldRef = _params$internalProps.unstableFieldRef,
     _params$forwardedProp = params.forwardedProps,
     onClick = _params$forwardedProp.onClick,
     onKeyDown = _params$forwardedProp.onKeyDown,
@@ -52,10 +54,14 @@ export var useField = function useField(params) {
   var inputRef = React.useRef(null);
   var handleRef = useForkRef(inputRefProp, inputRef);
   var focusTimeoutRef = React.useRef(undefined);
+  var theme = useTheme();
+  var sectionOrder = React.useMemo(function () {
+    return getSectionOrder(state.sections, theme.direction === 'rtl');
+  }, [theme.direction, state.sections]);
   var syncSelectionFromDOM = function syncSelectionFromDOM() {
     var _selectionStart;
     if (readOnly) {
-      setSelectedSections(null);
+      _setSelectedSections(null);
       return;
     }
     var browserStartIndex = (_selectionStart = inputRef.current.selectionStart) != null ? _selectionStart : 0;
@@ -64,7 +70,7 @@ export var useField = function useField(params) {
       return section.startInInput - section.startSeparator.length > browserStartIndex;
     });
     var sectionIndex = nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
-    setSelectedSections(sectionIndex);
+    _setSelectedSections(sectionIndex);
   };
   var handleInputClick = useEventCallback(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -98,7 +104,7 @@ export var useField = function useField(params) {
       if (
       // avoid selecting all sections when focusing empty field without value
       input.value.length && Number(input.selectionEnd) - Number(input.selectionStart) === input.value.length) {
-        setSelectedSections('all');
+        _setSelectedSections('all');
       } else {
         syncSelectionFromDOM();
       }
@@ -109,7 +115,7 @@ export var useField = function useField(params) {
       args[_key3] = arguments[_key3];
     }
     onBlur == null ? void 0 : onBlur.apply(void 0, _toConsumableArray(args));
-    setSelectedSections(null);
+    _setSelectedSections(null);
   });
   var handleInputPaste = useEventCallback(function (event) {
     onPaste == null ? void 0 : onPaste(event);
@@ -150,27 +156,32 @@ export var useField = function useField(params) {
       updateValueFromValueStr(cleanValueStr);
       return;
     }
-    var prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections));
-    var startOfDiffIndex = -1;
-    var endOfDiffIndex = -1;
-    for (var i = 0; i < prevValueStr.length; i += 1) {
-      if (startOfDiffIndex === -1 && prevValueStr[i] !== cleanValueStr[i]) {
-        startOfDiffIndex = i;
+    var keyPressed;
+    if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1) {
+      keyPressed = cleanValueStr;
+    } else {
+      var prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections));
+      var startOfDiffIndex = -1;
+      var endOfDiffIndex = -1;
+      for (var i = 0; i < prevValueStr.length; i += 1) {
+        if (startOfDiffIndex === -1 && prevValueStr[i] !== cleanValueStr[i]) {
+          startOfDiffIndex = i;
+        }
+        if (endOfDiffIndex === -1 && prevValueStr[prevValueStr.length - i - 1] !== cleanValueStr[cleanValueStr.length - i - 1]) {
+          endOfDiffIndex = i;
+        }
       }
-      if (endOfDiffIndex === -1 && prevValueStr[prevValueStr.length - i - 1] !== cleanValueStr[cleanValueStr.length - i - 1]) {
-        endOfDiffIndex = i;
+      var activeSection = state.sections[selectedSectionIndexes.startIndex];
+      var hasDiffOutsideOfActiveSection = startOfDiffIndex < activeSection.start || prevValueStr.length - endOfDiffIndex - 1 > activeSection.end;
+      if (hasDiffOutsideOfActiveSection) {
+        // TODO: Support if the new date is valid
+        return;
       }
-    }
-    var activeSection = state.sections[selectedSectionIndexes.startIndex];
-    var hasDiffOutsideOfActiveSection = startOfDiffIndex < activeSection.start || prevValueStr.length - endOfDiffIndex - 1 > activeSection.end;
-    if (hasDiffOutsideOfActiveSection) {
-      // TODO: Support if the new date is valid
-      return;
-    }
 
-    // The active section being selected, the browser has replaced its value with the key pressed by the user.
-    var activeSectionEndRelativeToNewValue = cleanValueStr.length - prevValueStr.length + activeSection.end - cleanString(activeSection.endSeparator || '').length;
-    var keyPressed = cleanValueStr.slice(activeSection.start, activeSectionEndRelativeToNewValue);
+      // The active section being selected, the browser has replaced its value with the key pressed by the user.
+      var activeSectionEndRelativeToNewValue = cleanValueStr.length - prevValueStr.length + activeSection.end - cleanString(activeSection.endSeparator || '').length;
+      keyPressed = cleanValueStr.slice(activeSection.start, activeSectionEndRelativeToNewValue);
+    }
     if (isAndroid() && keyPressed.length === 0) {
       setTempAndroidValueStr(valueStr);
       return;
@@ -191,7 +202,7 @@ export var useField = function useField(params) {
           // prevent default to make sure that the next line "select all" while updating
           // the internal state at the same time.
           event.preventDefault();
-          setSelectedSections('all');
+          _setSelectedSections('all');
           break;
         }
 
@@ -200,13 +211,13 @@ export var useField = function useField(params) {
         {
           event.preventDefault();
           if (selectedSectionIndexes == null) {
-            setSelectedSections(sectionOrder.startIndex);
+            _setSelectedSections(sectionOrder.startIndex);
           } else if (selectedSectionIndexes.startIndex !== selectedSectionIndexes.endIndex) {
-            setSelectedSections(selectedSectionIndexes.endIndex);
+            _setSelectedSections(selectedSectionIndexes.endIndex);
           } else {
             var nextSectionIndex = sectionOrder.neighbors[selectedSectionIndexes.startIndex].rightIndex;
             if (nextSectionIndex !== null) {
-              setSelectedSections(nextSectionIndex);
+              _setSelectedSections(nextSectionIndex);
             }
           }
           break;
@@ -217,13 +228,13 @@ export var useField = function useField(params) {
         {
           event.preventDefault();
           if (selectedSectionIndexes == null) {
-            setSelectedSections(sectionOrder.endIndex);
+            _setSelectedSections(sectionOrder.endIndex);
           } else if (selectedSectionIndexes.startIndex !== selectedSectionIndexes.endIndex) {
-            setSelectedSections(selectedSectionIndexes.startIndex);
+            _setSelectedSections(selectedSectionIndexes.startIndex);
           } else {
             var _nextSectionIndex = sectionOrder.neighbors[selectedSectionIndexes.startIndex].leftIndex;
             if (_nextSectionIndex !== null) {
-              setSelectedSections(_nextSectionIndex);
+              _setSelectedSections(_nextSectionIndex);
             }
           }
           break;
@@ -266,9 +277,11 @@ export var useField = function useField(params) {
   });
   useEnhancedEffect(function () {
     if (selectedSectionIndexes == null) {
-      if (inputRef.current.selectionStart !== 0 || inputRef.current.selectionEnd !== 0) {
-        // Ensure input selection range is in sync with component selection indexes
-        inputRef.current.setSelectionRange(0, 0);
+      if (inputRef.current.scrollLeft) {
+        // Ensure that input content is not marked as selected.
+        // setting selection range to 0 causes issues in Safari.
+        // https://bugs.webkit.org/show_bug.cgi?id=224425
+        inputRef.current.scrollLeft = 0;
       }
       return;
     }
@@ -281,7 +294,11 @@ export var useField = function useField(params) {
       selectionEnd += lastSelectedSection.endSeparator.length;
     }
     if (selectionStart !== inputRef.current.selectionStart || selectionEnd !== inputRef.current.selectionEnd) {
+      // Fix scroll jumping on iOS browser: https://github.com/mui/mui-x/issues/8321
+      var currentScrollTop = inputRef.current.scrollTop;
       inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      // Even reading this variable seems to do the trick, but also setting it just to make use of it
+      inputRef.current.scrollTop = currentScrollTop;
     }
   });
   var validationError = useValidation(_extends({}, internalProps, {
@@ -298,7 +315,7 @@ export var useField = function useField(params) {
   React.useEffect(function () {
     // Select the right section when focused on mount (`autoFocus = true` on the input)
     if (inputRef.current && inputRef.current === document.activeElement) {
-      setSelectedSections('all');
+      _setSelectedSections('all');
     }
     return function () {
       return window.clearTimeout(focusTimeoutRef.current);
@@ -330,7 +347,30 @@ export var useField = function useField(params) {
     return 'tel';
   }, [selectedSectionIndexes, state.sections]);
   var inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
-  var shouldShowPlaceholder = !inputHasFocus && (!state.value || valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue));
+  var shouldShowPlaceholder = !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
+  React.useImperativeHandle(unstableFieldRef, function () {
+    return {
+      getSections: function getSections() {
+        return state.sections;
+      },
+      getActiveSectionIndex: function getActiveSectionIndex() {
+        var _selectionStart2, _selectionEnd;
+        var browserStartIndex = (_selectionStart2 = inputRef.current.selectionStart) != null ? _selectionStart2 : 0;
+        var browserEndIndex = (_selectionEnd = inputRef.current.selectionEnd) != null ? _selectionEnd : 0;
+        if (browserStartIndex === 0 && browserEndIndex === 0) {
+          return null;
+        }
+        var nextSectionIndex = browserStartIndex <= state.sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
+        : state.sections.findIndex(function (section) {
+          return section.startInInput - section.startSeparator.length > browserStartIndex;
+        });
+        return nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
+      },
+      setSelectedSections: function setSelectedSections(activeSectionIndex) {
+        return _setSelectedSections(activeSectionIndex);
+      }
+    };
+  });
   return _extends({
     placeholder: state.placeholder,
     autoComplete: 'off'

package/legacy/internals/hooks/useField/useFieldState.js

@@ -2,7 +2,6 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
 import useControlled from '@mui/utils/useControlled';
 import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
 import { addPositionPropertiesToSections, splitFormatIntoSections, clampDaySection, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
@@ -11,8 +10,6 @@ export var useFieldState = function useFieldState(params) {
   var utils = useUtils();
   var localeText = useLocaleText();
   var adapter = useLocalizationContext();
-  var theme = useTheme();
-  var isRTL = theme.direction === 'rtl';
   var valueManager = params.valueManager,
     fieldValueManager = params.fieldValueManager,
     valueType = params.valueType,
@@ -30,9 +27,6 @@ export var useFieldState = function useFieldState(params) {
   var sectionsValueBoundaries = React.useMemo(function () {
     return getSectionsBoundaries(utils);
   }, [utils]);
-  var sectionOrder = React.useMemo(function () {
-    return fieldValueManager.getSectionOrder(utils, localeText, format, isRTL);
-  }, [fieldValueManager, format, isRTL, localeText, utils]);
   var placeholder = React.useMemo(function () {
     return fieldValueManager.getValueStrFromSections(fieldValueManager.getSectionsFromValue(utils, localeText, null, valueManager.emptyValue, format));
   }, [fieldValueManager, format, localeText, utils, valueManager.emptyValue]);
@@ -246,7 +240,7 @@ export var useFieldState = function useFieldState(params) {
   };
   React.useEffect(function () {
     if (!valueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) {
-      var sections = fieldValueManager.getSectionsFromValue(utils, localeText, state.sections, valueFromTheOutside, format);
+      var sections = fieldValueManager.getSectionsFromValue(utils, localeText, null, valueFromTheOutside, format);
       setState(function (prevState) {
         return _extends({}, prevState, {
           value: valueFromTheOutside,
@@ -277,7 +271,6 @@ export var useFieldState = function useFieldState(params) {
     updateSectionValue: updateSectionValue,
     updateValueFromValueStr: updateValueFromValueStr,
     setTempAndroidValueStr: setTempAndroidValueStr,
-    sectionOrder: sectionOrder,
     sectionsValueBoundaries: sectionsValueBoundaries
   };
 };

package/legacy/internals/hooks/usePicker/usePickerValue.js

@@ -31,11 +31,8 @@ export var usePickerValue = function usePickerValue(_ref) {
       state: 'value'
     }),
     _useControlled2 = _slicedToArray(_useControlled, 2),
-    rawValue = _useControlled2[0],
+    value = _useControlled2[0],
     setValue = _useControlled2[1];
-  var value = React.useMemo(function () {
-    return valueManager.cleanValue(utils, rawValue);
-  }, [valueManager, utils, rawValue]);
   var _useControlled3 = useControlled({
       controlled: selectedSectionsProp,
       default: null,
@@ -92,7 +89,7 @@ export var usePickerValue = function usePickerValue(_ref) {
           }
       }
     });
-    if (params.forceOnChangeCall || !params.skipOnChangeCall && !valueManager.areValuesEqual(utils, dateState.committed, params.value)) {
+    if (!params.skipOnChangeCall && !valueManager.areValuesEqual(utils, dateState.committed, params.value)) {
       setValue(params.value);
       if (onChange) {
         var _context = {
@@ -137,18 +134,14 @@ export var usePickerValue = function usePickerValue(_ref) {
     // Reset all date in state to the empty value and close picker.
     setDate({
       value: valueManager.emptyValue,
-      action: 'acceptAndClose',
-      // force `onChange` in cases like input (value) === `Invalid date`
-      forceOnChangeCall: !valueManager.areValuesEqual(utils, value, valueManager.emptyValue)
+      action: 'acceptAndClose'
     });
   });
   var handleAccept = useEventCallback(function () {
     // Set all date in state to equal the current draft value and close picker.
     setDate({
       value: dateState.draft,
-      action: 'acceptAndClose',
-      // force `onChange` in cases like input (value) === `Invalid date`
-      forceOnChangeCall: !valueManager.areValuesEqual(utils, dateState.committed, dateState.draft)
+      action: 'acceptAndClose'
     });
   });
   var handleDismiss = useEventCallback(function () {
@@ -248,8 +241,11 @@ export var usePickerValue = function usePickerValue(_ref) {
     selectedSections: selectedSections,
     onSelectedSectionsChange: handleFieldSelectedSectionsChange
   };
+  var viewValue = React.useMemo(function () {
+    return valueManager.cleanValue(utils, dateState.draft);
+  }, [utils, valueManager, dateState.draft]);
   var viewResponse = {
-    value: dateState.draft,
+    value: viewValue,
     onChange: handleChange,
     onClose: handleClose,
     open: isOpen,
@@ -268,7 +264,7 @@ export var usePickerValue = function usePickerValue(_ref) {
     }) : validationResponse === null;
   };
   var layoutResponse = _extends({}, actions, {
-    value: dateState.draft,
+    value: viewValue,
     onChange: handleChangeAndCommit,
     isValid: isValid
   });

package/legacy/internals/index.js

@@ -9,7 +9,7 @@ export { pickersArrowSwitcherClasses } from './components/PickersArrowSwitcher/p
 export { pickersPopperClasses } from './components/pickersPopperClasses';
 export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { DAY_MARGIN, DIALOG_WIDTH } from './constants/dimensions';
-export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, splitFormatIntoSections, getSectionOrder } from './hooks/useField';
+export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, splitFormatIntoSections } from './hooks/useField';
 export { usePicker } from './hooks/usePicker';
 export { useStaticPicker } from './hooks/useStaticPicker';
 export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';
@@ -18,7 +18,7 @@ export { validateDate } from './hooks/validation/useDateValidation';
 export { validateTime } from './hooks/validation/useTimeValidation';
 export { validateDateTime } from './hooks/validation/useDateTimeValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
-export { applyDefaultDate, replaceInvalidDateByNull } from './utils/date-utils';
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual } from './utils/date-utils';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';
 export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
 export { extractValidationProps } from './utils/validation';

package/legacy/internals/utils/date-utils.js

@@ -64,4 +64,10 @@ export var applyDefaultDate = function applyDefaultDate(utils, value, defaultVal
     return defaultValue;
   }
   return value;
+};
+export var areDatesEqual = function areDatesEqual(utils, a, b) {
+  if (!utils.isValid(a) && a != null && !utils.isValid(b) && b != null) {
+    return true;
+  }
+  return utils.isEqual(a, b);
 };

package/legacy/internals/utils/valueManagers.js

@@ -1,14 +1,12 @@
-import { replaceInvalidDateByNull } from './date-utils';
-import { addPositionPropertiesToSections, createDateStrForInputFromSections, splitFormatIntoSections, getSectionOrder as _getSectionOrder } from '../hooks/useField/useField.utils';
+import { areDatesEqual, replaceInvalidDateByNull } from './date-utils';
+import { addPositionPropertiesToSections, createDateStrForInputFromSections, splitFormatIntoSections } from '../hooks/useField/useField.utils';
 export var singleItemValueManager = {
   emptyValue: null,
   getTodayValue: function getTodayValue(utils) {
     return utils.date();
   },
   cleanValue: replaceInvalidDateByNull,
-  areValuesEqual: function areValuesEqual(utils, a, b) {
-    return utils.isEqual(a, b);
-  },
+  areValuesEqual: areDatesEqual,
   isSameError: function isSameError(a, b) {
     return a === b;
   },
@@ -48,8 +46,5 @@ export var singleItemFieldValueManager = {
   },
   hasError: function hasError(error) {
     return error != null;
-  },
-  getSectionOrder: function getSectionOrder(utils, localeText, format, isRTL) {
-    return _getSectionOrder(splitFormatIntoSections(utils, localeText, format, null), isRTL);
   }
 };