@mui/x-date-pickers 6.0.1 → 6.0.3

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.1
+ * @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/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -103,7 +103,7 @@ export var PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Pickers
     elementType: PreviousIconButton,
     externalSlotProps: (_slotProps$previousIc = slotProps == null ? void 0 : slotProps.previousIconButton) != null ? _slotProps$previousIc : componentsProps == null ? void 0 : componentsProps.previousIconButton,
     additionalProps: {
-      size: 'small',
+      size: 'medium',
       title: leftProps.label,
       'aria-label': leftProps.label,
       disabled: leftProps.isDisabled,
@@ -120,7 +120,7 @@ export var PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Pickers
     elementType: NextIconButton,
     externalSlotProps: (_slotProps$nextIconBu = slotProps == null ? void 0 : slotProps.nextIconButton) != null ? _slotProps$nextIconBu : componentsProps == null ? void 0 : componentsProps.nextIconButton,
     additionalProps: {
-      size: 'small',
+      size: 'medium',
       title: rightProps.label,
       'aria-label': rightProps.label,
       disabled: rightProps.isDisabled,
@@ -137,6 +137,9 @@ export var PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Pickers
   var _useSlotProps = useSlotProps({
       elementType: LeftArrowIcon,
       externalSlotProps: (_slotProps$leftArrowI = slotProps == null ? void 0 : slotProps.leftArrowIcon) != null ? _slotProps$leftArrowI : componentsProps == null ? void 0 : componentsProps.leftArrowIcon,
+      additionalProps: {
+        fontSize: 'inherit'
+      },
       ownerState: undefined
     }),
     leftArrowIconOwnerState = _useSlotProps.ownerState,
@@ -146,6 +149,9 @@ export var PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Pickers
   var _useSlotProps2 = useSlotProps({
       elementType: RightArrowIcon,
       externalSlotProps: (_slotProps$rightArrow = slotProps == null ? void 0 : slotProps.rightArrowIcon) != null ? _slotProps$rightArrow : componentsProps == null ? void 0 : componentsProps.rightArrowIcon,
+      additionalProps: {
+        fontSize: 'inherit'
+      },
       ownerState: undefined
     }),
     rightArrowIconOwnerState = _useSlotProps2.ownerState,

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,26 +6,24 @@ 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';
 export var useField = function useField(params) {
   var utils = useUtils();
-  if (!utils.formatTokenMap) {
-    throw new Error('This adapter is not compatible with the field components');
-  }
   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,
@@ -37,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,
@@ -54,15 +54,23 @@ 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);
+      return;
+    }
     var browserStartIndex = (_selectionStart = inputRef.current.selectionStart) != null ? _selectionStart : 0;
     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;
     });
     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++) {
@@ -90,13 +98,13 @@ export var useField = function useField(params) {
       if (!input || input !== inputRef.current) {
         return;
       }
-      if (selectedSectionIndexes != null) {
+      if (selectedSectionIndexes != null || readOnly) {
         return;
       }
       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();
       }
@@ -107,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);
@@ -148,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;
@@ -189,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;
         }
 
@@ -198,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;
@@ -215,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;
@@ -264,6 +277,12 @@ export var useField = function useField(params) {
   });
   useEnhancedEffect(function () {
     if (selectedSectionIndexes == null) {
+      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;
     }
     var firstSelectedSection = state.sections[selectedSectionIndexes.startIndex];
@@ -275,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, {
@@ -292,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);
@@ -323,8 +346,31 @@ export var useField = function useField(params) {
     }
     return 'tel';
   }, [selectedSectionIndexes, state.sections]);
-  var inputHasFocus = inputRef.current && inputRef.current === document.activeElement;
-  var shouldShowPlaceholder = !inputHasFocus && (!state.value || valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue));
+  var inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
+  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'