@mui/x-date-pickers 7.8.0 → 7.10.0

package/modern/DigitalClock/DigitalClock.js

@@ -11,7 +11,8 @@ import composeClasses from '@mui/utils/composeClasses';
 import MenuItem from '@mui/material/MenuItem';
 import MenuList from '@mui/material/MenuList';
 import useForkRef from '@mui/utils/useForkRef';
-import { useUtils, useNow, useLocaleText } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
+import { useUtils, useNow } from '../internals/hooks/useUtils';
 import { createIsAfterIgnoreDatePart } from '../internals/utils/time-utils';
 import { PickerViewRoot } from '../internals/components/PickerViewRoot';
 import { getDigitalClockUtilityClass } from './digitalClockClasses';
@@ -147,7 +148,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     onChange,
     valueManager: singleItemValueManager
   });
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const now = useNow(timezone);
   const ownerState = React.useMemo(() => _extends({}, props, {
     alreadyRendered: !!containerRef.current
@@ -240,7 +241,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
   }, other, {
     children: /*#__PURE__*/_jsx(DigitalClockList, {
       role: "listbox",
-      "aria-label": localeText.timePickerToolbarTitle,
+      "aria-label": translations.timePickerToolbarTitle,
       className: classes.list,
       children: timeOptions.map((option, index) => {
         if (skipDisabled && isTimeDisabled(option)) {

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -5,7 +5,8 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { refType } from '@mui/utils';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
-import { useUtils, useLocaleText } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
+import { useUtils } from '../internals/hooks/useUtils';
 import { validateDate } from '../internals/utils/validation/validateDate';
 import { DateField } from '../DateField';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
@@ -23,7 +24,7 @@ import { resolveDateFormat } from '../internals/utils/date-utils';
  * - [MobileDatePicker API](https://mui.com/x/api/date-pickers/mobile-date-picker/)
  */
 const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(inProps, ref) {
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const utils = useUtils();
 
   // Props with the default values common to all date pickers
@@ -56,7 +57,7 @@ const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue,
     validator: validateDate
   });
   return renderPicker();

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -6,7 +6,8 @@ import { refType } from '@mui/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { DateTimeField } from '../DateTimeField';
 import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
+import { useUtils } from '../internals/hooks/useUtils';
 import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
@@ -24,7 +25,7 @@ import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
  * - [MobileDateTimePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-picker/)
  */
 const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const utils = useUtils();
 
   // Props with the default values common to all date time pickers
@@ -66,7 +67,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue,
     validator: validateDateTime
   });
   return renderPicker();

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -6,7 +6,8 @@ import { refType } from '@mui/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { TimeField } from '../TimeField';
 import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
+import { useUtils } from '../internals/hooks/useUtils';
 import { validateTime } from '../internals/utils/validation/validateTime';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
@@ -23,7 +24,7 @@ import { resolveTimeFormat } from '../internals/utils/time-utils';
  * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/)
  */
 const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const utils = useUtils();
 
   // Props with the default values common to all time pickers
@@ -59,7 +60,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: props.localeText?.openTimePickerDialogue ?? localeText.openTimePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openTimePickerDialogue ?? translations.openTimePickerDialogue,
     validator: validateTime
   });
   return renderPicker();

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -8,7 +8,8 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
-import { useUtils, useNow, useLocaleText } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
+import { useUtils, useNow } from '../internals/hooks/useUtils';
 import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from '../internals/utils/time-utils';
 import { useViews } from '../internals/hooks/useViews';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
@@ -101,7 +102,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
     onChange,
     valueManager: singleItemValueManager
   });
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const now = useNow(timezone);
   const timeSteps = React.useMemo(() => _extends({
     hours: 1,
@@ -233,7 +234,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
               utils,
               isDisabled: hours => isTimeDisabled(hours, 'hours'),
               timeStep: timeSteps.hours,
-              resolveAriaLabel: localeText.hoursClockNumberText,
+              resolveAriaLabel: translations.hoursClockNumberText,
               valueOrReferenceDate
             })
           };
@@ -251,7 +252,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
               resolveLabel: minutes => utils.format(utils.setMinutes(now, minutes), 'minutes'),
               timeStep: timeSteps.minutes,
               hasValue: !!value,
-              resolveAriaLabel: localeText.minutesClockNumberText
+              resolveAriaLabel: translations.minutesClockNumberText
             })
           };
         }
@@ -268,7 +269,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
               resolveLabel: seconds => utils.format(utils.setSeconds(now, seconds), 'seconds'),
               timeStep: timeSteps.seconds,
               hasValue: !!value,
-              resolveAriaLabel: localeText.secondsClockNumberText
+              resolveAriaLabel: translations.secondsClockNumberText
             })
           };
         }
@@ -296,7 +297,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       default:
         throw new Error(`Unknown view: ${viewToBuild} found.`);
     }
-  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, handleMeridiemChange]);
+  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, translations.hoursClockNumberText, translations.minutesClockNumberText, translations.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, handleMeridiemChange]);
   const viewsToRender = React.useMemo(() => {
     if (!isRtl) {
       return views;
@@ -333,7 +334,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       slots: slots,
       slotProps: slotProps,
       skipDisabled: skipDisabled,
-      "aria-label": localeText.selectViewText(timeView)
+      "aria-label": translations.selectViewText(timeView)
     }, timeView))
   }));
 });

package/modern/PickersActionBar/PickersActionBar.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
-import { useLocaleText } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -26,7 +26,7 @@ function PickersActionBar(props) {
       actions
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   if (actions == null || actions.length === 0) {
     return null;
   }
@@ -35,22 +35,22 @@ function PickersActionBar(props) {
       case 'clear':
         return /*#__PURE__*/_jsx(Button, {
           onClick: onClear,
-          children: localeText.clearButtonLabel
+          children: translations.clearButtonLabel
         }, actionType);
       case 'cancel':
         return /*#__PURE__*/_jsx(Button, {
           onClick: onCancel,
-          children: localeText.cancelButtonLabel
+          children: translations.cancelButtonLabel
         }, actionType);
       case 'accept':
         return /*#__PURE__*/_jsx(Button, {
           onClick: onAccept,
-          children: localeText.okButtonLabel
+          children: translations.okButtonLabel
         }, actionType);
       case 'today':
         return /*#__PURE__*/_jsx(Button, {
           onClick: onSetToday,
-          children: localeText.todayButtonLabel
+          children: translations.todayButtonLabel
         }, actionType);
       default:
         return null;

package/modern/PickersCalendarHeader/PickersCalendarHeader.js

@@ -10,7 +10,8 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import IconButton from '@mui/material/IconButton';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
+import { useUtils } from '../internals/hooks/useUtils';
 import { PickersFadeTransitionGroup } from '../DateCalendar/PickersFadeTransitionGroup';
 import { ArrowDropDownIcon } from '../icons';
 import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
@@ -107,7 +108,7 @@ const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
  * - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/)
  */
 const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalendarHeader(inProps, ref) {
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const utils = useUtils();
   const props = useThemeProps({
     props: inProps,
@@ -141,7 +142,7 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
     externalSlotProps: slotProps?.switchViewButton,
     additionalProps: {
       size: 'small',
-      'aria-label': localeText.calendarViewSwitchingButtonAriaLabel(view)
+      'aria-label': translations.calendarViewSwitchingButtonAriaLabel(view)
     },
     ownerState,
     className: classes.switchViewButton
@@ -216,10 +217,10 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
         slotProps: slotProps,
         onGoToPrevious: selectPreviousMonth,
         isPreviousDisabled: isPreviousMonthDisabled,
-        previousLabel: localeText.previousMonth,
+        previousLabel: translations.previousMonth,
         onGoToNext: selectNextMonth,
         isNextDisabled: isNextMonthDisabled,
-        nextLabel: localeText.nextMonth
+        nextLabel: translations.nextMonth
       })
     })]
   }));

package/modern/TimeClock/Clock.js

@@ -5,7 +5,8 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { ClockPointer } from './ClockPointer';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
+import { useUtils } from '../internals/hooks/useUtils';
 import { CLOCK_HOUR_WIDTH, getHours, getMinutes } from './shared';
 import { getClockUtilityClass } from './clockClasses';
 import { formatMeridiem } from '../internals/utils/date-utils';
@@ -196,7 +197,7 @@ export function Clock(inProps) {
   } = props;
   const ownerState = props;
   const utils = useUtils();
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const isMoving = React.useRef(false);
   const classes = useUtilityClasses(ownerState);
   const isSelectedTimeDisabled = isTimeDisabled(viewValue, type);
@@ -312,7 +313,7 @@ export function Clock(inProps) {
         })]
       }), /*#__PURE__*/_jsx(ClockWrapper, {
         "aria-activedescendant": selectedId,
-        "aria-label": localeText.clockLabelText(type, value, utils),
+        "aria-label": translations.clockLabelText(type, value, utils),
         ref: listboxRef,
         role: "listbox",
         onKeyDown: handleKeyDown,

package/modern/TimeClock/TimeClock.js

@@ -6,7 +6,8 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import { useUtils, useNow, useLocaleText } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
+import { useUtils, useNow } from '../internals/hooks/useUtils';
 import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
 import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from '../internals/utils/time-utils';
 import { useViews } from '../internals/hooks/useViews';
@@ -114,7 +115,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     props,
     timezone
   });
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const now = useNow(timezone);
   const {
     view,
@@ -227,7 +228,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
               utils,
               ampm,
               onChange: handleHoursChange,
-              getClockNumberText: localeText.hoursClockNumberText,
+              getClockNumberText: translations.hoursClockNumberText,
               isDisabled: hourValue => disabled || isTimeDisabled(hourValue, 'hours'),
               selectedId
             })
@@ -246,7 +247,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
               utils,
               value: minutesValue,
               onChange: handleMinutesChange,
-              getClockNumberText: localeText.minutesClockNumberText,
+              getClockNumberText: translations.minutesClockNumberText,
               isDisabled: minuteValue => disabled || isTimeDisabled(minuteValue, 'minutes'),
               selectedId
             })
@@ -265,7 +266,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
               utils,
               value: secondsValue,
               onChange: handleSecondsChange,
-              getClockNumberText: localeText.secondsClockNumberText,
+              getClockNumberText: translations.secondsClockNumberText,
               isDisabled: secondValue => disabled || isTimeDisabled(secondValue, 'seconds'),
               selectedId
             })
@@ -274,7 +275,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       default:
         throw new Error('You must provide the type for ClockView');
     }
-  }, [view, utils, value, ampm, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, selectedId, disabled]);
+  }, [view, utils, value, ampm, translations.hoursClockNumberText, translations.minutesClockNumberText, translations.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, selectedId, disabled]);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(TimeClockRoot, _extends({
@@ -301,10 +302,10 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       slotProps: slotProps,
       onGoToPrevious: () => setView(previousView),
       isPreviousDisabled: !previousView,
-      previousLabel: localeText.openPreviousView,
+      previousLabel: translations.openPreviousView,
       onGoToNext: () => setView(nextView),
       isNextDisabled: !nextView,
-      nextLabel: localeText.openNextView,
+      nextLabel: translations.openNextView,
       ownerState: ownerState
     })]
   }));

package/modern/TimePicker/TimePickerToolbar.js

@@ -11,7 +11,8 @@ import { PickersToolbarText } from '../internals/components/PickersToolbarText';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
 import { arrayIncludes } from '../internals/utils/utils';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
+import { useUtils } from '../internals/hooks/useUtils';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from './timePickerToolbarClasses';
 import { formatMeridiem } from '../internals/utils/date-utils';
@@ -131,7 +132,7 @@ function TimePickerToolbar(inProps) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const isRtl = useRtl();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
@@ -152,7 +153,7 @@ function TimePickerToolbar(inProps) {
   });
   return /*#__PURE__*/_jsxs(TimePickerToolbarRoot, _extends({
     landscapeDirection: "row",
-    toolbarTitle: localeText.timePickerToolbarTitle,
+    toolbarTitle: translations.timePickerToolbarTitle,
     isLandscape: isLandscape,
     ownerState: ownerState,
     className: clsx(classes.root, className)

package/modern/hooks/index.js

@@ -1 +1,2 @@
-export { useClearableField } from './useClearableField';
+export { useClearableField } from './useClearableField';
+export { usePickersTranslations } from './usePickersTranslations';

package/modern/hooks/useClearableField.js

@@ -7,10 +7,10 @@ import { useSlotProps } from '@mui/base/utils';
 import MuiIconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import { ClearIcon } from '../icons';
-import { useLocaleText } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from './usePickersTranslations';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useClearableField = props => {
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const {
       clearable,
       onClear,
@@ -28,7 +28,7 @@ export const useClearableField = props => {
       ownerState: {},
       className: 'clearButton',
       additionalProps: {
-        title: localeText.fieldClearLabel
+        title: translations.fieldClearLabel
       }
     }),
     iconButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);

package/modern/hooks/usePickersTranslations.js

@@ -0,0 +1,2 @@
+import { useLocalizationContext } from '../internals/hooks/useUtils';
+export const usePickersTranslations = () => useLocalizationContext().localeText;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.8.0
+ * @mui/x-date-pickers v7.10.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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

@@ -2,14 +2,15 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import { useRtl } from '@mui/system/RtlProvider';
-import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
+import { usePickersTranslations } from '../../../hooks/usePickersTranslations';
+import { useUtils, useLocalizationContext } from '../useUtils';
 import { mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, parseSelectedSections, getLocalizedDigits } from './useField.utils';
 import { buildSectionsFromFormat } from './buildSectionsFromFormat';
 import { useValueWithTimezone } from '../useValueWithTimezone';
 import { getSectionTypeGranularity } from '../../utils/getDefaultReferenceDate';
 export const useFieldState = params => {
   const utils = useUtils();
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const adapter = useLocalizationContext();
   const isRtl = useRtl();
   const {
@@ -48,7 +49,7 @@ export const useFieldState = params => {
   const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, date => buildSectionsFromFormat({
     utils,
     timezone,
-    localeText,
+    localeText: translations,
     localizedDigits,
     format,
     date,
@@ -56,7 +57,7 @@ export const useFieldState = params => {
     shouldRespectLeadingZeros,
     enableAccessibleFieldDOMStructure,
     isRtl
-  })), [fieldValueManager, format, localeText, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, timezone, enableAccessibleFieldDOMStructure]);
+  })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, timezone, enableAccessibleFieldDOMStructure]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
     validateSections(sections, valueType);
@@ -156,7 +157,7 @@ export const useFieldState = params => {
       const sections = buildSectionsFromFormat({
         utils,
         timezone,
-        localeText,
+        localeText: translations,
         localizedDigits,
         format,
         date,

package/modern/internals/hooks/useField/useFieldV6TextField.js

@@ -36,6 +36,7 @@ export const addPositionPropertiesToSections = (sections, localizedDigits, isRtl
 export const useFieldV6TextField = params => {
   const isRtl = useRtl();
   const focusTimeoutRef = React.useRef();
+  const selectionSyncTimeoutRef = React.useRef();
   const {
     forwardedProps: {
       onFocus,
@@ -103,10 +104,14 @@ export const useFieldV6TextField = params => {
             inputRef.current.setSelectionRange(selectionStart, selectionEnd);
           }
         }
-        setTimeout(() => {
+        clearTimeout(selectionSyncTimeoutRef.current);
+        selectionSyncTimeoutRef.current = setTimeout(() => {
           // handle case when the selection is not updated correctly
           // could happen on Android
-          if (inputRef.current && inputRef.current === getActiveElement(document) && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
+          if (inputRef.current && inputRef.current === getActiveElement(document) &&
+          // The section might loose all selection, where `selectionStart === selectionEnd`
+          // https://github.com/mui/mui-x/pull/13652
+          inputRef.current.selectionStart === inputRef.current.selectionEnd && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
             interactions.syncSelectionToDOM();
           }
         });
@@ -118,8 +123,7 @@ export const useFieldV6TextField = params => {
     getActiveSectionIndexFromDOM: () => {
       const browserStartIndex = inputRef.current.selectionStart ?? 0;
       const browserEndIndex = inputRef.current.selectionEnd ?? 0;
-      const isInputReadOnly = !!inputRef.current?.readOnly;
-      if (browserStartIndex === 0 && browserEndIndex === 0 || isInputReadOnly) {
+      if (browserStartIndex === 0 && browserEndIndex === 0) {
         return null;
       }
       const nextSectionIndex = browserStartIndex <= sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
@@ -134,10 +138,6 @@ export const useFieldV6TextField = params => {
     isFieldFocused: () => inputRef.current === getActiveElement(document)
   }), [inputRef, parsedSelectedSections, sections, setSelectedSections]);
   const syncSelectionFromDOM = () => {
-    if (readOnly) {
-      setSelectedSections(null);
-      return;
-    }
     const browserStartIndex = inputRef.current.selectionStart ?? 0;
     let nextSectionIndex;
     if (browserStartIndex <= sections[0].startInInput) {
@@ -162,7 +162,7 @@ export const useFieldV6TextField = params => {
       if (!input || input !== inputRef.current) {
         return;
       }
-      if (activeSectionIndex != null || readOnly) {
+      if (activeSectionIndex != null) {
         return;
       }
       if (
@@ -296,6 +296,7 @@ export const useFieldV6TextField = params => {
     }
     return () => {
       clearTimeout(focusTimeoutRef.current);
+      clearTimeout(selectionSyncTimeoutRef.current);
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

package/modern/internals/hooks/useField/useFieldV7TextField.js

@@ -5,7 +5,8 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useId from '@mui/utils/useId';
 import { getSectionValueNow, getSectionValueText, parseSelectedSections } from './useField.utils';
 import { getActiveElement } from '../../utils/utils';
-import { useLocaleText, useUtils } from '../useUtils';
+import { usePickersTranslations } from '../../../hooks/usePickersTranslations';
+import { useUtils } from '../useUtils';
 export const useFieldV7TextField = params => {
   const {
     internalProps: {
@@ -38,7 +39,7 @@ export const useFieldV7TextField = params => {
   } = params;
   const sectionListRef = React.useRef(null);
   const handleSectionListRef = useForkRef(inSectionListRef, sectionListRef);
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const utils = useUtils();
   const id = useId();
   const [focused, setFocused] = React.useState(false);
@@ -220,7 +221,7 @@ export const useFieldV7TextField = params => {
   const getInputContainerClickHandler = useEventCallback(sectionIndex => event => {
     // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
     // We avoid this by checking if the call to this function is actually intended, or a side effect.
-    if (event.isDefaultPrevented() || readOnly) {
+    if (event.isDefaultPrevented()) {
       return;
     }
     setSelectedSections(sectionIndex);
@@ -230,9 +231,6 @@ export const useFieldV7TextField = params => {
     event.preventDefault();
   });
   const getInputContentFocusHandler = useEventCallback(sectionIndex => () => {
-    if (readOnly) {
-      return;
-    }
     setSelectedSections(sectionIndex);
   });
   const handleInputContentPaste = useEventCallback(event => {
@@ -341,8 +339,8 @@ export const useFieldV7TextField = params => {
           'aria-valuenow': getSectionValueNow(section, utils),
           'aria-valuemin': sectionBoundaries[section.type].minimum,
           'aria-valuemax': sectionBoundaries[section.type].maximum,
-          'aria-valuetext': section.value ? getSectionValueText(section, utils) : localeText.empty,
-          'aria-label': localeText[section.type],
+          'aria-valuetext': section.value ? getSectionValueText(section, utils) : translations.empty,
+          'aria-label': translations[section.type],
           'aria-disabled': disabled,
           spellCheck: isEditable ? false : undefined,
           autoCapitalize: isEditable ? 'off' : undefined,
@@ -364,7 +362,7 @@ export const useFieldV7TextField = params => {
         }
       };
     });
-  }, [state.sections, getInputContentFocusHandler, handleInputContentPaste, handleInputContentDragOver, handleInputContentInput, getInputContainerClickHandler, handleInputContentMouseUp, disabled, readOnly, isContainerEditable, localeText, utils, sectionBoundaries, id]);
+  }, [state.sections, getInputContentFocusHandler, handleInputContentPaste, handleInputContentDragOver, handleInputContentInput, getInputContainerClickHandler, handleInputContentMouseUp, disabled, readOnly, isContainerEditable, translations, utils, sectionBoundaries, id]);
   const handleValueStrChange = useEventCallback(event => {
     updateValueFromValueStr(event.target.value);
   });

package/modern/internals/hooks/useUtils.js

@@ -17,7 +17,6 @@ export const useLocalizationContext = () => {
 };
 export const useUtils = () => useLocalizationContext().utils;
 export const useDefaultDates = () => useLocalizationContext().defaultDates;
-export const useLocaleText = () => useLocalizationContext().localeText;
 export const useNow = timezone => {
   const utils = useUtils();
   const now = React.useRef();

package/modern/internals/index.js

@@ -13,13 +13,13 @@ export { useControlledValueWithTimezone } from './hooks/useValueWithTimezone';
 export { useField, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from './hooks/useField';
 export { usePicker } from './hooks/usePicker';
 export { useStaticPicker } from './hooks/useStaticPicker';
-export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';
+export { useLocalizationContext, useDefaultDates, useUtils, useNow } from './hooks/useUtils';
 export { useViews } from './hooks/useViews';
 export { useValidation } from './hooks/useValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
 export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps';
 export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem } from './utils/date-utils';
-export { resolveTimeViewsResponse } from './utils/date-time-utils';
+export { resolveTimeViewsResponse, resolveDateTimeFormat } from './utils/date-time-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';