@mui/x-date-pickers 7.8.0 → 7.10.0

package/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/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/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/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useClearableField } from './useClearableField';
 export type { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, UseClearableFieldResponse, } from './useClearableField';
+export { usePickersTranslations } from './usePickersTranslations';

package/hooks/index.js

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

package/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/hooks/usePickersTranslations.d.ts

@@ -0,0 +1,2 @@
+import { PickerValidDate } from '../models';
+export declare const usePickersTranslations: <TDate extends PickerValidDate>() => import("..").PickersLocaleText<TDate>;

package/hooks/usePickersTranslations.js

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

package/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/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/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/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/internals/hooks/useUtils.d.ts

@@ -9,5 +9,4 @@ export declare const useDefaultDates: <TDate extends PickerValidDate>() => {
     minDate: TDate;
     maxDate: TDate;
 };
-export declare const useLocaleText: <TDate extends PickerValidDate>() => PickersLocaleText<TDate>;
 export declare const useNow: <TDate extends PickerValidDate>(timezone: PickersTimezone) => TDate;

package/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/internals/index.d.ts

@@ -32,7 +32,7 @@ export type { UsePickerValueNonStaticProps, PickerValueManager, PickerSelectionS
 export type { UsePickerViewsNonStaticProps, PickerViewRendererLookup, PickerViewRenderer, UsePickerViewsProps, } from './hooks/usePicker/usePickerViews';
 export { useStaticPicker } from './hooks/useStaticPicker';
 export type { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps, } from './hooks/useStaticPicker';
-export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow, } from './hooks/useUtils';
+export { useLocalizationContext, useDefaultDates, useUtils, useNow } from './hooks/useUtils';
 export type { ExportedUseViewsOptions, UseViewsOptions } from './hooks/useViews';
 export { useViews } from './hooks/useViews';
 export { useValidation } from './hooks/useValidation';
@@ -48,7 +48,7 @@ export type { WrapperVariant, TimeViewWithMeridiem, DateOrTimeViewWithMeridiem,
 export type { BaseDateValidationProps, BaseTimeValidationProps, TimeValidationProps, MonthValidationProps, YearValidationProps, DayValidationProps, DateTimeValidationProps, } from './models/validation';
 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';

package/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';

package/internals/utils/date-time-utils.d.ts

@@ -4,7 +4,7 @@ import { DesktopOnlyTimePickerProps } from '../models/props/clock';
 import { DefaultizedProps } from '../models/helpers';
 export declare const resolveDateTimeFormat: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, { views, format, ...other }: {
     format?: string;
-    views: readonly DateOrTimeView[];
+    views: readonly DateOrTimeViewWithMeridiem[];
     ampm: boolean;
 }) => string;
 interface DefaultizedTimeViewsProps<TDate extends PickerValidDate, TView = DateOrTimeView> extends DefaultizedProps<DesktopOnlyTimePickerProps<TDate>, 'ampm'> {

package/internals/utils/validation/extractValidationProps.d.ts

@@ -8,4 +8,4 @@ export declare const DATE_TIME_VALIDATION_PROP_NAMES: (keyof DateTimeValidationP
  */
 export declare const extractValidationProps: <Props extends {
     [key: string]: any;
-}>(props: Props) => Pick<Props, "ampm" | "disableFuture" | "disablePast" | "maxDate" | "minDate" | "minutesStep" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "minTime" | "maxTime" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "minDateTime" | "maxDateTime">;
+}>(props: Props) => Pick<Props, "minDate" | "maxDate" | "ampm" | "disableFuture" | "disablePast" | "minutesStep" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "minTime" | "maxTime" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "minDateTime" | "maxDateTime">;

package/modern/DateCalendar/DayCalendar.js

@@ -11,7 +11,8 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_useControlled as useControlled } from '@mui/utils';
 import clsx from 'clsx';
 import { PickersDay } from '../PickersDay/PickersDay';
-import { useUtils, useNow, useLocaleText } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
+import { useUtils, useNow } from '../internals/hooks/useUtils';
 import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
 import { PickersSlideTransition } from './PickersSlideTransition';
 import { useIsDateDisabled } from './useIsDateDisabled';
@@ -261,7 +262,7 @@ export function DayCalendar(inProps) {
     disableFuture,
     timezone
   });
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const [internalHasFocus, setInternalHasFocus] = useControlled({
     name: 'DayCalendar',
     state: 'hasFocus',
@@ -403,9 +404,9 @@ export function DayCalendar(inProps) {
       children: [displayWeekNumber && /*#__PURE__*/_jsx(PickersCalendarWeekNumberLabel, {
         variant: "caption",
         role: "columnheader",
-        "aria-label": localeText.calendarWeekNumberHeaderLabel,
+        "aria-label": translations.calendarWeekNumberHeaderLabel,
         className: classes.weekNumberLabel,
-        children: localeText.calendarWeekNumberHeaderText
+        children: translations.calendarWeekNumberHeaderText
       }), getWeekdays(utils, now).map((weekday, i) => /*#__PURE__*/_jsx(PickersCalendarWeekDayLabel, {
         variant: "caption",
         role: "columnheader",
@@ -438,8 +439,8 @@ export function DayCalendar(inProps) {
           children: [displayWeekNumber && /*#__PURE__*/_jsx(PickersCalendarWeekNumber, {
             className: classes.weekNumber,
             role: "rowheader",
-            "aria-label": localeText.calendarWeekNumberAriaLabelText(utils.getWeekNumber(week[0])),
-            children: localeText.calendarWeekNumberText(utils.getWeekNumber(week[0]))
+            "aria-label": translations.calendarWeekNumberAriaLabelText(utils.getWeekNumber(week[0])),
+            children: translations.calendarWeekNumberText(utils.getWeekNumber(week[0]))
           }), week.map((day, dayIndex) => /*#__PURE__*/_jsx(WrappedDay, {
             parentProps: props,
             day: day,

package/modern/DatePicker/DatePickerToolbar.js

@@ -8,7 +8,8 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
+import { useUtils } from '../internals/hooks/useUtils';
 import { getDatePickerToolbarUtilityClass } from './datePickerToolbarClasses';
 import { resolveDateFormat } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -66,7 +67,7 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const classes = useUtilityClasses(props);
   const dateText = React.useMemo(() => {
     if (!value) {
@@ -81,7 +82,7 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
   const ownerState = props;
   return /*#__PURE__*/_jsx(DatePickerToolbarRoot, _extends({
     ref: ref,
-    toolbarTitle: localeText.datePickerToolbarTitle,
+    toolbarTitle: translations.datePickerToolbarTitle,
     isLandscape: isLandscape,
     className: clsx(classes.root, className)
   }, other, {

package/modern/DateTimePicker/DateTimePickerTabs.js

@@ -6,7 +6,7 @@ import Tabs, { tabsClasses } from '@mui/material/Tabs';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { TimeIcon, DateRangeIcon } from '../icons';
-import { useLocaleText } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
 import { getDateTimePickerTabsUtilityClass } from './dateTimePickerTabsClasses';
 import { isDatePickerView } from '../internals/utils/date-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -72,7 +72,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     className,
     sx
   } = props;
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const classes = useUtilityClasses(props);
   const handleChange = (event, value) => {
     onViewChange(tabToView(value));
@@ -89,13 +89,13 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     sx: sx,
     children: [/*#__PURE__*/_jsx(Tab, {
       value: "date",
-      "aria-label": localeText.dateTableLabel,
+      "aria-label": translations.dateTableLabel,
       icon: /*#__PURE__*/_jsx(React.Fragment, {
         children: dateIcon
       })
     }), /*#__PURE__*/_jsx(Tab, {
       value: "time",
-      "aria-label": localeText.timeTableLabel,
+      "aria-label": translations.timeTableLabel,
       icon: /*#__PURE__*/_jsx(React.Fragment, {
         children: timeIcon
       })

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -10,7 +10,8 @@ import clsx from 'clsx';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
-import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { usePickersTranslations } from '../hooks/usePickersTranslations';
+import { useUtils } from '../internals/hooks/useUtils';
 import { dateTimePickerToolbarClasses, getDateTimePickerToolbarUtilityClass } from './dateTimePickerToolbarClasses';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
@@ -241,9 +242,9 @@ function DateTimePickerToolbar(inProps) {
   } = useMeridiemMode(value, ampm, onChange);
   const showAmPmControl = Boolean(ampm && !ampmInClock);
   const isDesktop = toolbarVariant === 'desktop';
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const classes = useUtilityClasses(ownerState);
-  const toolbarTitle = inToolbarTitle ?? localeText.dateTimePickerToolbarTitle;
+  const toolbarTitle = inToolbarTitle ?? translations.dateTimePickerToolbarTitle;
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
   const dateText = React.useMemo(() => {
     if (!value) {

package/modern/DesktopDatePicker/DesktopDatePicker.js

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

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -10,7 +10,8 @@ import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { DateTimeField } from '../DateTimeField';
 import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
 import { renderDateViewCalendar } from '../dateViewRenderers/dateViewRenderers';
-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 { CalendarIcon } from '../icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
@@ -80,7 +81,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
  * - [DesktopDateTimePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-picker/)
  */
 const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const utils = useUtils();
 
   // Props with the default values common to all date time pickers
@@ -145,7 +146,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue,
     validator: validateDateTime,
     rendererInterceptor
   });

package/modern/DesktopTimePicker/DesktopTimePicker.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 { ClockIcon } from '../icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
@@ -25,7 +26,7 @@ import { resolveTimeViewsResponse } from '../internals/utils/date-time-utils';
  * - [DesktopTimePicker API](https://mui.com/x/api/date-pickers/desktop-time-picker/)
  */
 const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const utils = useUtils();
 
   // Props with the default values common to all time pickers
@@ -80,7 +81,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: props.localeText?.openTimePickerDialogue ?? localeText.openTimePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openTimePickerDialogue ?? translations.openTimePickerDialogue,
     validator: validateTime
   });
   return renderPicker();