@mui/x-date-pickers 7.8.0 → 7.9.0

package/CHANGELOG.md

@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.9.0
+
+_Jul 5, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔄 Add loading overlay variants, including a skeleton loader option to the Data Grid component. See [Loading overlay docs](https://mui.com/x/react-data-grid/overlays/#loading-overlay) for more details.
+- 🌳 Add `selectItem` and `getItemDOMElement` methods to the TreeView component public API
+- ⛏️ Make the `usePickersTranslations` hook public in the pickers component
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.9.0`
+
+- [DataGrid] Add skeleton loading overlay support (#13293) @KenanYusuf
+- [DataGrid] Fix pagination when `pagination={undefined}` (#13349) @sai6855
+
+#### `@mui/x-data-grid-pro@7.9.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.9.0`.
+
+#### `@mui/x-data-grid-premium@7.9.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.9.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.9.0`
+
+- [pickers] Make the `usePickersTranslations` hook public (#13657) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.9.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.9.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.9.0`
+
+- [charts] Add Heatmap (unreleased) (#13209) @alexfauquette
+- [charts] Add initial `Zoom&Pan` to the Pro charts (unreleased) (#13405) @JCQuintas
+- [charts] Fix Axis Highlight on horizontal bar charts regression (#13717) @JCQuintas
+- [charts] Improve charts interaction for mobile users (#13692) @JCQuintas
+- [charts] Add documentation on how to disable the tooltip on charts (#13724) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.9.0`
+
+- [TreeView] Add `selectItem` and `getItemDOMElement` methods to the public API (#13485) @flaviendelangle
+
+### Docs
+
+- [docs] Fix custom "no results overlay" demo in dark mode (#13715) @KenanYusuf
+
+### Core
+
+- [core] Add `react_next` workflow in CircleCI (#13360) @cherniavskii
+- [core] Create a new package to share utils across X packages (#13528) @flaviendelangle
+- [core] Fix dependency setup (#13684) @LukasTy
+- [core] Remove `jscodeshift-add-imports` package (#13720) @LukasTy
+- [code-infra] Cleanup monorepo and `@mui/docs` usage (#13713) @LukasTy
+
 ## 7.8.0
 
 _Jun 28, 2024_

package/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/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/DateTimePicker/DateTimePickerTabs.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { DateTimePickerTabsClasses } from './dateTimePickerTabsClasses';
 import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
+import { PickerValidDate } from '../models';
 export interface ExportedDateTimePickerTabsProps extends ExportedBaseTabsProps {
     /**
      * Toggles visibility of the tabs allowing view switching.
@@ -36,7 +37,7 @@ export interface DateTimePickerTabsProps extends ExportedDateTimePickerTabsProps
  * - [DateTimePickerTabs API](https://mui.com/x/api/date-pickers/date-time-picker-tabs/)
  */
 declare const DateTimePickerTabs: {
-    (inProps: DateTimePickerTabsProps): React.JSX.Element | null;
+    <TDate extends PickerValidDate>(inProps: DateTimePickerTabsProps): React.JSX.Element | null;
     propTypes: any;
 };
 export { DateTimePickerTabs };

package/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/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/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/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/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();

package/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/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/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/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/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/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/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/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,