@mui/x-date-pickers-pro 7.8.0 → 7.10.0

package/CHANGELOG.md

@@ -3,6 +3,146 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.10.0
+
+_Jul 11, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add selectors to support showing child row count in footer in the Data Grid
+- ✨ New APIs for retrieving current item tree and item's children IDs in the Tree View
+- 🌍 Improve Spanish (es-ES) locale on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.10.0`
+
+- [DataGrid] Add selectors to support showing child row count in footer (#13725) @KenanYusuf
+- [DataGrid] Fix incorrect panels position when using a toolbar (#13474) @oukunan
+- [DataGrid] Set default variant to `'standard'` in `GridFilterInputMultipleValue` (#13129) @tarunrajput
+- [DataGrid] Use `readonly` on more array props (#13331) @pcorpet
+- [l10n] Improve Spanish (es-ES) locale (#13772) @joserealdev
+
+#### `@mui/x-data-grid-pro@7.10.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.10.0`, plus:
+
+- [DataGridPro] Keep bottom pinned row at the bottom (#13313) @romgrk
+
+#### `@mui/x-data-grid-premium@7.10.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.10.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.10.0`
+
+- [fields] Prevent infinite recursion when ensuring selection (#13779) @LukasTy
+- [fields] Unify fields behavior regardless of the `readOnly` flag (#13688) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.10.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.10.0`, plus:
+
+- [DateRangePicker] Fix `calendarHeader` slot props propagation (#13780) @LukasTy
+- [DateTimeRangePicker] Resolve `format` from given `views` (#13743) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.10.0`
+
+- [charts] Fix displaying area of a `LineChart` when using the `log` scale (#13791) @alexfauquette
+- [charts] Use correct click handler prop on pie chart `OnSeriesItemClick` documentation (#13761) @tonyhallett
+
+### Tree View
+
+#### `@mui/x-tree-view@7.10.0`
+
+- [TreeView] Add `getItemTree` and `getItemOrderedChildrenIds` methods to the public API (#13804) @flaviendelangle
+- [TreeView] Add utility function to check if an optional plugin is present (#13788) @flaviendelangle
+
+### Docs
+
+- [docs] Add missing default `loading` prop value (#13604) @oliviertassinari
+- [docs] Add the `DateTimeRangePicker` to the "Commonly used components" demo (#13775) @flaviendelangle
+- [docs] Fix Pickers customization playground overflow (#13742) @LukasTy
+- [docs] Move Pickers dialog guidelines to accessibility page (#13778) @arthurbalduini
+
+### Core
+
+- [core] Sort `DATA_GRID_PROPS_DEFAULT_VALUES` alphabetically (#13783) @oliviertassinari
+- [test] Fix split infinitive use in tests @oliviertassinari
+
+## 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/DateRangePicker/DateRangePickerToolbar.js

@@ -7,7 +7,8 @@ import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { PickersToolbar, PickersToolbarButton, useUtils, useLocaleText } from '@mui/x-date-pickers/internals';
+import { PickersToolbar, PickersToolbarButton, useUtils } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import { getDateRangePickerToolbarUtilityClass } from './dateRangePickerToolbarClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -57,13 +58,13 @@ const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangeP
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const localeText = useLocaleText();
-  const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : localeText.start;
-  const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : localeText.end;
+  const translations = usePickersTranslations();
+  const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : translations.start;
+  const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : translations.end;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(DateRangePickerToolbarRoot, _extends({}, other, {
-    toolbarTitle: localeText.dateRangePickerToolbarTitle,
+    toolbarTitle: translations.dateRangePickerToolbarTitle,
     isLandscape: false,
     className: clsx(className, classes.root),
     ownerState: ownerState,

package/DateTimeRangePicker/DateTimeRangePickerTabs.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { DateOrTimeViewWithMeridiem, BaseTabsProps, ExportedBaseTabsProps } from '@mui/x-date-pickers/internals';
 import { DateTimeRangePickerTabsClasses } from './dateTimeRangePickerTabsClasses';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
@@ -26,7 +27,7 @@ export interface ExportedDateTimeRangePickerTabsProps extends ExportedBaseTabsPr
 export interface DateTimeRangePickerTabsProps extends ExportedDateTimeRangePickerTabsProps, BaseTabsProps<DateOrTimeViewWithMeridiem>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
 }
 declare const DateTimeRangePickerTabs: {
-    (inProps: DateTimeRangePickerTabsProps): React.JSX.Element | null;
+    <TDate extends PickerValidDate>(inProps: DateTimeRangePickerTabsProps): React.JSX.Element | null;
     propTypes: any;
 };
 export { DateTimeRangePickerTabs };

package/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -5,7 +5,8 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
-import { useLocaleText, isDatePickerView } from '@mui/x-date-pickers/internals';
+import { isDatePickerView } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
 import { getDateTimeRangePickerTabsUtilityClass } from './dateTimeRangePickerTabsClasses';
@@ -78,7 +79,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     className,
     sx
   } = props;
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const classes = useUtilityClasses(props);
   const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';
@@ -86,17 +87,17 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
   const tabLabel = React.useMemo(() => {
     switch (value) {
       case 'start-date':
-        return localeText.startDate;
+        return translations.startDate;
       case 'start-time':
-        return localeText.startTime;
+        return translations.startTime;
       case 'end-date':
-        return localeText.endDate;
+        return translations.endDate;
       case 'end-time':
-        return localeText.endTime;
+        return translations.endTime;
       default:
         return '';
     }
-  }, [localeText.endDate, localeText.endTime, localeText.startDate, localeText.startTime, value]);
+  }, [translations.endDate, translations.endTime, translations.startDate, translations.startTime, value]);
   const handleRangePositionChange = useEventCallback(newTab => {
     if (newTab.includes('start')) {
       onRangePositionChange('start');
@@ -124,7 +125,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     children: [!isPreviousHidden ? /*#__PURE__*/_jsx(IconButton, {
       onClick: changeToPreviousTab,
       className: classes.navigationButton,
-      title: localeText.openPreviousView,
+      title: translations.openPreviousView,
       children: /*#__PURE__*/_jsx(ArrowLeftIcon, {})
     }) : /*#__PURE__*/_jsx(DateTimeRangePickerTabFiller, {
       className: classes.filler
@@ -136,7 +137,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     }), !isNextHidden ? /*#__PURE__*/_jsx(IconButton, {
       onClick: changeToNextTab,
       className: classes.navigationButton,
-      title: localeText.openNextView,
+      title: translations.openNextView,
       children: /*#__PURE__*/_jsx(ArrowRightIcon, {})
     }) : /*#__PURE__*/_jsx(DateTimeRangePickerTabFiller, {
       className: classes.filler

package/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -6,7 +6,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { useLocaleText, useUtils } from '@mui/x-date-pickers/internals';
+import { useUtils } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
 import { getDateTimeRangePickerToolbarUtilityClass } from './dateTimeRangePickerToolbarClasses';
 import { calculateRangeChange } from '../internals/utils/date-range-manager';
@@ -102,7 +103,7 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     toolbarFormat,
     toolbarPlaceholder
   };
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const handleStartRangeViewChange = React.useCallback(newView => {
@@ -149,7 +150,7 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     children: [/*#__PURE__*/_jsx(DateTimeRangePickerToolbarStart, _extends({
       value: start,
       onViewChange: handleStartRangeViewChange,
-      toolbarTitle: localeText.start,
+      toolbarTitle: translations.start,
       ownerState: ownerState,
       toolbarVariant: "desktop",
       view: rangePosition === 'start' ? view : undefined,
@@ -159,7 +160,7 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     }, commonToolbarProps)), /*#__PURE__*/_jsx(DateTimeRangePickerToolbarEnd, _extends({
       value: end,
       onViewChange: handleEndRangeViewChange,
-      toolbarTitle: localeText.end,
+      toolbarTitle: translations.end,
       ownerState: ownerState,
       toolbarVariant: "desktop",
       view: rangePosition === 'end' ? view : undefined,

package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["openTo", "rangePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { extractValidationProps, isDatePickerView, isInternalTimeView } from '@mui/x-date-pickers/internals';
+import { extractValidationProps, isDatePickerView, isInternalTimeView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
 import { resolveComponentProps } from '@mui/base/utils';
 import { refType } from '@mui/utils';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
@@ -74,6 +74,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
  * - [DesktopDateTimeRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-range-picker/)
  */
 const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimeRangePicker(inProps, ref) {
+  const utils = useUtils();
   // Props with the default values common to all date time range pickers
   const defaultizedProps = useDateTimeRangePickerDefaultizedProps(inProps, 'MuiDesktopDateTimeRangePicker');
   const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
@@ -92,6 +93,7 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   const props = _extends({}, defaultizedProps, {
     views,
     viewRenderers,
+    format: resolveDateTimeFormat(utils, defaultizedProps),
     // force true to correctly handle `renderTimeViewClock` as a renderer
     ampmInClock: true,
     calendars: defaultizedProps.calendars ?? 1,

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -4,7 +4,7 @@ const _excluded = ["view", "openTo", "rangePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
-import { DIALOG_WIDTH, VIEW_HEIGHT, extractValidationProps, isInternalTimeView, isDatePickerView } from '@mui/x-date-pickers/internals';
+import { DIALOG_WIDTH, VIEW_HEIGHT, extractValidationProps, isInternalTimeView, isDatePickerView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
 import { resolveComponentProps } from '@mui/base/utils';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from '@mui/x-date-pickers/MultiSectionDigitalClock';
@@ -82,6 +82,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
  * - [MobileDateTimeRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-range-picker/)
  */
 const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimeRangePicker(inProps, ref) {
+  const utils = useUtils();
   // Props with the default values common to all date time range pickers
   const defaultizedProps = useDateTimeRangePickerDefaultizedProps(inProps, 'MuiMobileDateTimeRangePicker');
   const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
@@ -94,6 +95,7 @@ const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileD
   }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
+    format: resolveDateTimeFormat(utils, defaultizedProps),
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
     // force true to correctly handle `renderTimeViewClock` as a renderer

package/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["calendars", "month", "monthIndex", "labelId"];
+const _excluded = ["calendars", "month", "monthIndex", "labelId"],
+  _excluded2 = ["format", "slots", "slotProps", "currentMonth", "onMonthChange", "disableFuture", "disablePast", "minDate", "maxDate", "timezone", "reduceAnimations", "views", "view"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { PickersArrowSwitcher, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils } from '@mui/x-date-pickers/internals';
+import { PickersArrowSwitcher, useNextMonthDisabled, usePreviousMonthDisabled, useUtils } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersRangeCalendarHeaderContentMultipleCalendars = styled(PickersArrowSwitcher)({
   padding: '12px 16px 4px 16px',
@@ -15,7 +17,7 @@ const PickersRangeCalendarHeaderContentMultipleCalendars = styled(PickersArrowSw
 });
 const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersRangeCalendarHeader(props, ref) {
   const utils = useUtils();
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const {
       calendars,
       month,
@@ -24,17 +26,19 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
-    format,
-    slots,
-    slotProps,
-    currentMonth,
-    onMonthChange,
-    disableFuture,
-    disablePast,
-    minDate,
-    maxDate,
-    timezone
-  } = props;
+      format,
+      slots,
+      slotProps,
+      currentMonth,
+      onMonthChange,
+      disableFuture,
+      disablePast,
+      minDate,
+      maxDate,
+      timezone
+      // omit props that are not used in the PickersArrowSwitcher
+    } = other,
+    otherRangeProps = _objectWithoutPropertiesLoose(other, _excluded2);
   const isNextMonthDisabled = useNextMonthDisabled(currentMonth, {
     disableFuture,
     maxDate,
@@ -53,21 +57,21 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
   }
   const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1), 'left');
   const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1), 'right');
-  return /*#__PURE__*/_jsx(PickersRangeCalendarHeaderContentMultipleCalendars, {
+  return /*#__PURE__*/_jsx(PickersRangeCalendarHeaderContentMultipleCalendars, _extends({}, otherRangeProps, {
     ref: ref,
     onGoToPrevious: selectPreviousMonth,
     onGoToNext: selectNextMonth,
     isPreviousHidden: monthIndex !== 0,
     isPreviousDisabled: isPreviousMonthDisabled,
-    previousLabel: localeText.previousMonth,
+    previousLabel: translations.previousMonth,
     isNextHidden: monthIndex !== calendars - 1,
     isNextDisabled: isNextMonthDisabled,
-    nextLabel: localeText.nextMonth,
+    nextLabel: translations.nextMonth,
     slots: slots,
     slotProps: slotProps,
     labelId: labelId,
     children: utils.formatByString(month, format ?? `${utils.formats.month} ${utils.formats.year}`)
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? PickersRangeCalendarHeader.propTypes = {
   // ----------------------------- Warning --------------------------------

package/index.js

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

package/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -5,7 +5,8 @@ import * as React from 'react';
 import { resolveComponentProps } from '@mui/base/utils';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
-import { onSpaceOrEnter, useLocaleText } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { onSpaceOrEnter } from '@mui/x-date-pickers/internals';
 const useMultiInputFieldSlotProps = ({
   wrapperVariant,
   open,
@@ -27,7 +28,7 @@ const useMultiInputFieldSlotProps = ({
   startFieldRef,
   endFieldRef
 }) => {
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const handleStartFieldRef = useForkRef(fieldProps.unstableStartFieldRef, startFieldRef);
   const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef);
   const previousRangePosition = React.useRef(rangePosition);
@@ -91,7 +92,7 @@ const useMultiInputFieldSlotProps = ({
       let InputProps;
       if (ownerState.position === 'start') {
         textFieldProps = _extends({
-          label: inLocaleText?.start ?? localeText.start,
+          label: inLocaleText?.start ?? translations.start,
           onKeyDown: onSpaceOrEnter(openRangeStartSelection),
           onFocus: handleFocusStart,
           focused: open ? rangePosition === 'start' : undefined
@@ -107,7 +108,7 @@ const useMultiInputFieldSlotProps = ({
         }
       } else {
         textFieldProps = _extends({
-          label: inLocaleText?.end ?? localeText.end,
+          label: inLocaleText?.end ?? translations.end,
           onKeyDown: onSpaceOrEnter(openRangeEndSelection),
           onFocus: handleFocusEnd,
           focused: open ? rangePosition === 'end' : undefined

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -6,7 +6,8 @@ import { useSlotProps } from '@mui/base/utils';
 import { useLicenseVerifier } from '@mui/x-license';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, PickersModalDialog, useLocaleText } from '@mui/x-date-pickers/internals';
+import { usePicker, PickersModalDialog } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import useId from '@mui/utils/useId';
 import { useEnrichedRangePickerFieldProps } from '../useEnrichedRangePickerFieldProps';
 import { getReleaseInfo } from '../../utils/releaseInfo';
@@ -46,7 +47,7 @@ export const useMobileRangePicker = _ref => {
     onRangePositionChange
   } = useRangePosition(props, fieldType === 'single-input' ? startFieldRef : undefined);
   const labelId = useId();
-  const contextLocaleText = useLocaleText();
+  const contextTranslations = usePickersTranslations();
   const {
     open,
     actions,
@@ -115,7 +116,7 @@ export const useMobileRangePicker = _ref => {
     })
   });
   const Layout = slots?.layout ?? PickersLayout;
-  const finalLocaleText = _extends({}, contextLocaleText, localeText);
+  const finalLocaleText = _extends({}, contextTranslations, localeText);
   let labelledById = pickerParams.valueType === 'date-time' ? `${labelId}-start-toolbar ${labelId}-end-toolbar` : labelId;
   if (isToolbarHidden) {
     const labels = [];

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcxOTUyOTIwMDAwMA==";
+  const releaseInfo = "MTcyMDY0ODgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/DateRangePicker/DateRangePickerToolbar.js

@@ -7,7 +7,8 @@ import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { PickersToolbar, PickersToolbarButton, useUtils, useLocaleText } from '@mui/x-date-pickers/internals';
+import { PickersToolbar, PickersToolbarButton, useUtils } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import { getDateRangePickerToolbarUtilityClass } from './dateRangePickerToolbarClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -57,13 +58,13 @@ const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangeP
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const localeText = useLocaleText();
-  const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : localeText.start;
-  const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : localeText.end;
+  const translations = usePickersTranslations();
+  const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : translations.start;
+  const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : translations.end;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(DateRangePickerToolbarRoot, _extends({}, other, {
-    toolbarTitle: localeText.dateRangePickerToolbarTitle,
+    toolbarTitle: translations.dateRangePickerToolbarTitle,
     isLandscape: false,
     className: clsx(className, classes.root),
     ownerState: ownerState,

package/modern/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -5,7 +5,8 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
-import { useLocaleText, isDatePickerView } from '@mui/x-date-pickers/internals';
+import { isDatePickerView } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
 import { getDateTimeRangePickerTabsUtilityClass } from './dateTimeRangePickerTabsClasses';
@@ -78,7 +79,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     className,
     sx
   } = props;
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const classes = useUtilityClasses(props);
   const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';
@@ -86,17 +87,17 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
   const tabLabel = React.useMemo(() => {
     switch (value) {
       case 'start-date':
-        return localeText.startDate;
+        return translations.startDate;
       case 'start-time':
-        return localeText.startTime;
+        return translations.startTime;
       case 'end-date':
-        return localeText.endDate;
+        return translations.endDate;
       case 'end-time':
-        return localeText.endTime;
+        return translations.endTime;
       default:
         return '';
     }
-  }, [localeText.endDate, localeText.endTime, localeText.startDate, localeText.startTime, value]);
+  }, [translations.endDate, translations.endTime, translations.startDate, translations.startTime, value]);
   const handleRangePositionChange = useEventCallback(newTab => {
     if (newTab.includes('start')) {
       onRangePositionChange('start');
@@ -124,7 +125,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     children: [!isPreviousHidden ? /*#__PURE__*/_jsx(IconButton, {
       onClick: changeToPreviousTab,
       className: classes.navigationButton,
-      title: localeText.openPreviousView,
+      title: translations.openPreviousView,
       children: /*#__PURE__*/_jsx(ArrowLeftIcon, {})
     }) : /*#__PURE__*/_jsx(DateTimeRangePickerTabFiller, {
       className: classes.filler
@@ -136,7 +137,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     }), !isNextHidden ? /*#__PURE__*/_jsx(IconButton, {
       onClick: changeToNextTab,
       className: classes.navigationButton,
-      title: localeText.openNextView,
+      title: translations.openNextView,
       children: /*#__PURE__*/_jsx(ArrowRightIcon, {})
     }) : /*#__PURE__*/_jsx(DateTimeRangePickerTabFiller, {
       className: classes.filler

package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -6,7 +6,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { useLocaleText, useUtils } from '@mui/x-date-pickers/internals';
+import { useUtils } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
 import { getDateTimeRangePickerToolbarUtilityClass } from './dateTimeRangePickerToolbarClasses';
 import { calculateRangeChange } from '../internals/utils/date-range-manager';
@@ -102,7 +103,7 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     toolbarFormat,
     toolbarPlaceholder
   };
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const handleStartRangeViewChange = React.useCallback(newView => {
@@ -149,7 +150,7 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     children: [/*#__PURE__*/_jsx(DateTimeRangePickerToolbarStart, _extends({
       value: start,
       onViewChange: handleStartRangeViewChange,
-      toolbarTitle: localeText.start,
+      toolbarTitle: translations.start,
       ownerState: ownerState,
       toolbarVariant: "desktop",
       view: rangePosition === 'start' ? view : undefined,
@@ -159,7 +160,7 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     }, commonToolbarProps)), /*#__PURE__*/_jsx(DateTimeRangePickerToolbarEnd, _extends({
       value: end,
       onViewChange: handleEndRangeViewChange,
-      toolbarTitle: localeText.end,
+      toolbarTitle: translations.end,
       ownerState: ownerState,
       toolbarVariant: "desktop",
       view: rangePosition === 'end' ? view : undefined,

package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["openTo", "rangePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { extractValidationProps, isDatePickerView, isInternalTimeView } from '@mui/x-date-pickers/internals';
+import { extractValidationProps, isDatePickerView, isInternalTimeView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
 import { resolveComponentProps } from '@mui/base/utils';
 import { refType } from '@mui/utils';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
@@ -74,6 +74,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
  * - [DesktopDateTimeRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-range-picker/)
  */
 const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimeRangePicker(inProps, ref) {
+  const utils = useUtils();
   // Props with the default values common to all date time range pickers
   const defaultizedProps = useDateTimeRangePickerDefaultizedProps(inProps, 'MuiDesktopDateTimeRangePicker');
   const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
@@ -92,6 +93,7 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   const props = _extends({}, defaultizedProps, {
     views,
     viewRenderers,
+    format: resolveDateTimeFormat(utils, defaultizedProps),
     // force true to correctly handle `renderTimeViewClock` as a renderer
     ampmInClock: true,
     calendars: defaultizedProps.calendars ?? 1,

package/modern/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -4,7 +4,7 @@ const _excluded = ["view", "openTo", "rangePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
-import { DIALOG_WIDTH, VIEW_HEIGHT, extractValidationProps, isInternalTimeView, isDatePickerView } from '@mui/x-date-pickers/internals';
+import { DIALOG_WIDTH, VIEW_HEIGHT, extractValidationProps, isInternalTimeView, isDatePickerView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
 import { resolveComponentProps } from '@mui/base/utils';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from '@mui/x-date-pickers/MultiSectionDigitalClock';
@@ -82,6 +82,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
  * - [MobileDateTimeRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-range-picker/)
  */
 const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimeRangePicker(inProps, ref) {
+  const utils = useUtils();
   // Props with the default values common to all date time range pickers
   const defaultizedProps = useDateTimeRangePickerDefaultizedProps(inProps, 'MuiMobileDateTimeRangePicker');
   const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
@@ -94,6 +95,7 @@ const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileD
   }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
+    format: resolveDateTimeFormat(utils, defaultizedProps),
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
     // force true to correctly handle `renderTimeViewClock` as a renderer

package/modern/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["calendars", "month", "monthIndex", "labelId"];
+const _excluded = ["calendars", "month", "monthIndex", "labelId"],
+  _excluded2 = ["format", "slots", "slotProps", "currentMonth", "onMonthChange", "disableFuture", "disablePast", "minDate", "maxDate", "timezone", "reduceAnimations", "views", "view"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { PickersArrowSwitcher, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils } from '@mui/x-date-pickers/internals';
+import { PickersArrowSwitcher, useNextMonthDisabled, usePreviousMonthDisabled, useUtils } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersRangeCalendarHeaderContentMultipleCalendars = styled(PickersArrowSwitcher)({
   padding: '12px 16px 4px 16px',
@@ -15,7 +17,7 @@ const PickersRangeCalendarHeaderContentMultipleCalendars = styled(PickersArrowSw
 });
 const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersRangeCalendarHeader(props, ref) {
   const utils = useUtils();
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const {
       calendars,
       month,
@@ -24,17 +26,19 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
-    format,
-    slots,
-    slotProps,
-    currentMonth,
-    onMonthChange,
-    disableFuture,
-    disablePast,
-    minDate,
-    maxDate,
-    timezone
-  } = props;
+      format,
+      slots,
+      slotProps,
+      currentMonth,
+      onMonthChange,
+      disableFuture,
+      disablePast,
+      minDate,
+      maxDate,
+      timezone
+      // omit props that are not used in the PickersArrowSwitcher
+    } = other,
+    otherRangeProps = _objectWithoutPropertiesLoose(other, _excluded2);
   const isNextMonthDisabled = useNextMonthDisabled(currentMonth, {
     disableFuture,
     maxDate,
@@ -53,21 +57,21 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
   }
   const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1), 'left');
   const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1), 'right');
-  return /*#__PURE__*/_jsx(PickersRangeCalendarHeaderContentMultipleCalendars, {
+  return /*#__PURE__*/_jsx(PickersRangeCalendarHeaderContentMultipleCalendars, _extends({}, otherRangeProps, {
     ref: ref,
     onGoToPrevious: selectPreviousMonth,
     onGoToNext: selectNextMonth,
     isPreviousHidden: monthIndex !== 0,
     isPreviousDisabled: isPreviousMonthDisabled,
-    previousLabel: localeText.previousMonth,
+    previousLabel: translations.previousMonth,
     isNextHidden: monthIndex !== calendars - 1,
     isNextDisabled: isNextMonthDisabled,
-    nextLabel: localeText.nextMonth,
+    nextLabel: translations.nextMonth,
     slots: slots,
     slotProps: slotProps,
     labelId: labelId,
     children: utils.formatByString(month, format ?? `${utils.formats.month} ${utils.formats.year}`)
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? PickersRangeCalendarHeader.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/index.js

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

package/modern/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -5,7 +5,8 @@ import * as React from 'react';
 import { resolveComponentProps } from '@mui/base/utils';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
-import { onSpaceOrEnter, useLocaleText } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
+import { onSpaceOrEnter } from '@mui/x-date-pickers/internals';
 const useMultiInputFieldSlotProps = ({
   wrapperVariant,
   open,
@@ -27,7 +28,7 @@ const useMultiInputFieldSlotProps = ({
   startFieldRef,
   endFieldRef
 }) => {
-  const localeText = useLocaleText();
+  const translations = usePickersTranslations();
   const handleStartFieldRef = useForkRef(fieldProps.unstableStartFieldRef, startFieldRef);
   const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef);
   const previousRangePosition = React.useRef(rangePosition);
@@ -91,7 +92,7 @@ const useMultiInputFieldSlotProps = ({
       let InputProps;
       if (ownerState.position === 'start') {
         textFieldProps = _extends({
-          label: inLocaleText?.start ?? localeText.start,
+          label: inLocaleText?.start ?? translations.start,
           onKeyDown: onSpaceOrEnter(openRangeStartSelection),
           onFocus: handleFocusStart,
           focused: open ? rangePosition === 'start' : undefined
@@ -107,7 +108,7 @@ const useMultiInputFieldSlotProps = ({
         }
       } else {
         textFieldProps = _extends({
-          label: inLocaleText?.end ?? localeText.end,
+          label: inLocaleText?.end ?? translations.end,
           onKeyDown: onSpaceOrEnter(openRangeEndSelection),
           onFocus: handleFocusEnd,
           focused: open ? rangePosition === 'end' : undefined

package/modern/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -6,7 +6,8 @@ import { useSlotProps } from '@mui/base/utils';
 import { useLicenseVerifier } from '@mui/x-license';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, PickersModalDialog, useLocaleText } from '@mui/x-date-pickers/internals';
+import { usePicker, PickersModalDialog } from '@mui/x-date-pickers/internals';
+import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
 import useId from '@mui/utils/useId';
 import { useEnrichedRangePickerFieldProps } from '../useEnrichedRangePickerFieldProps';
 import { getReleaseInfo } from '../../utils/releaseInfo';
@@ -46,7 +47,7 @@ export const useMobileRangePicker = _ref => {
     onRangePositionChange
   } = useRangePosition(props, fieldType === 'single-input' ? startFieldRef : undefined);
   const labelId = useId();
-  const contextLocaleText = useLocaleText();
+  const contextTranslations = usePickersTranslations();
   const {
     open,
     actions,
@@ -115,7 +116,7 @@ export const useMobileRangePicker = _ref => {
     })
   });
   const Layout = slots?.layout ?? PickersLayout;
-  const finalLocaleText = _extends({}, contextLocaleText, localeText);
+  const finalLocaleText = _extends({}, contextTranslations, localeText);
   let labelledById = pickerParams.valueType === 'date-time' ? `${labelId}-start-toolbar ${labelId}-end-toolbar` : labelId;
   if (isToolbarHidden) {
     const labels = [];

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcxOTUyOTIwMDAwMA==";
+  const releaseInfo = "MTcyMDY0ODgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/DateRangePicker/DateRangePickerToolbar.js

@@ -14,6 +14,7 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _internals = require("@mui/x-date-pickers/internals");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _dateRangePickerToolbarClasses = require("./dateRangePickerToolbarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "onViewChange", "view", "views"];
@@ -66,13 +67,13 @@ const DateRangePickerToolbar = exports.DateRangePickerToolbar = /*#__PURE__*/Rea
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const localeText = (0, _internals.useLocaleText)();
-  const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : localeText.start;
-  const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : localeText.end;
+  const translations = (0, _hooks.usePickersTranslations)();
+  const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : translations.start;
+  const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : translations.end;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangePickerToolbarRoot, (0, _extends2.default)({}, other, {
-    toolbarTitle: localeText.dateRangePickerToolbarTitle,
+    toolbarTitle: translations.dateRangePickerToolbarTitle,
     isLandscape: false,
     className: (0, _clsx.default)(className, classes.root),
     ownerState: ownerState,

package/node/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -13,6 +13,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _icons = require("@mui/x-date-pickers/icons");
 var _internals = require("@mui/x-date-pickers/internals");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _dateTimeRangePickerTabsClasses = require("./dateTimeRangePickerTabsClasses");
@@ -87,7 +88,7 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
     className,
     sx
   } = props;
-  const localeText = (0, _internals.useLocaleText)();
+  const translations = (0, _hooks.usePickersTranslations)();
   const classes = useUtilityClasses(props);
   const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';
@@ -95,17 +96,17 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
   const tabLabel = React.useMemo(() => {
     switch (value) {
       case 'start-date':
-        return localeText.startDate;
+        return translations.startDate;
       case 'start-time':
-        return localeText.startTime;
+        return translations.startTime;
       case 'end-date':
-        return localeText.endDate;
+        return translations.endDate;
       case 'end-time':
-        return localeText.endTime;
+        return translations.endTime;
       default:
         return '';
     }
-  }, [localeText.endDate, localeText.endTime, localeText.startDate, localeText.startTime, value]);
+  }, [translations.endDate, translations.endTime, translations.startDate, translations.startTime, value]);
   const handleRangePositionChange = (0, _useEventCallback.default)(newTab => {
     if (newTab.includes('start')) {
       onRangePositionChange('start');
@@ -133,7 +134,7 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
     children: [!isPreviousHidden ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
       onClick: changeToPreviousTab,
       className: classes.navigationButton,
-      title: localeText.openPreviousView,
+      title: translations.openPreviousView,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowLeftIcon, {})
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerTabFiller, {
       className: classes.filler
@@ -145,7 +146,7 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
     }), !isNextHidden ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
       onClick: changeToNextTab,
       className: classes.navigationButton,
-      title: localeText.openNextView,
+      title: translations.openNextView,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowRightIcon, {})
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerTabFiller, {
       className: classes.filler

package/node/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -13,6 +13,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _internals = require("@mui/x-date-pickers/internals");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _DateTimePicker = require("@mui/x-date-pickers/DateTimePicker");
 var _dateTimeRangePickerToolbarClasses = require("./dateTimeRangePickerToolbarClasses");
 var _dateRangeManager = require("../internals/utils/date-range-manager");
@@ -111,7 +112,7 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
     toolbarFormat,
     toolbarPlaceholder
   };
-  const localeText = (0, _internals.useLocaleText)();
+  const translations = (0, _hooks.usePickersTranslations)();
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const handleStartRangeViewChange = React.useCallback(newView => {
@@ -158,7 +159,7 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerToolbarStart, (0, _extends2.default)({
       value: start,
       onViewChange: handleStartRangeViewChange,
-      toolbarTitle: localeText.start,
+      toolbarTitle: translations.start,
       ownerState: ownerState,
       toolbarVariant: "desktop",
       view: rangePosition === 'start' ? view : undefined,
@@ -168,7 +169,7 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
     }, commonToolbarProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerToolbarEnd, (0, _extends2.default)({
       value: end,
       onViewChange: handleEndRangeViewChange,
-      toolbarTitle: localeText.end,
+      toolbarTitle: translations.end,
       ownerState: ownerState,
       toolbarVariant: "desktop",
       view: rangePosition === 'end' ? view : undefined,

package/node/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -83,6 +83,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
  * - [DesktopDateTimeRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-range-picker/)
  */
 const DesktopDateTimeRangePicker = exports.DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimeRangePicker(inProps, ref) {
+  const utils = (0, _internals.useUtils)();
   // Props with the default values common to all date time range pickers
   const defaultizedProps = (0, _shared.useDateTimeRangePickerDefaultizedProps)(inProps, 'MuiDesktopDateTimeRangePicker');
   const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? _timeViewRenderers.renderDigitalClockTimeView : _timeViewRenderers.renderMultiSectionDigitalClockTimeView;
@@ -101,6 +102,7 @@ const DesktopDateTimeRangePicker = exports.DesktopDateTimeRangePicker = /*#__PUR
   const props = (0, _extends2.default)({}, defaultizedProps, {
     views,
     viewRenderers,
+    format: (0, _internals.resolveDateTimeFormat)(utils, defaultizedProps),
     // force true to correctly handle `renderTimeViewClock` as a renderer
     ampmInClock: true,
     calendars: defaultizedProps.calendars ?? 1,

package/node/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -91,6 +91,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
  * - [MobileDateTimeRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-range-picker/)
  */
 const MobileDateTimeRangePicker = exports.MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimeRangePicker(inProps, ref) {
+  const utils = (0, _internals.useUtils)();
   // Props with the default values common to all date time range pickers
   const defaultizedProps = (0, _shared.useDateTimeRangePickerDefaultizedProps)(inProps, 'MuiMobileDateTimeRangePicker');
   const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? _timeViewRenderers.renderDigitalClockTimeView : _timeViewRenderers.renderMultiSectionDigitalClockTimeView;
@@ -103,6 +104,7 @@ const MobileDateTimeRangePicker = exports.MobileDateTimeRangePicker = /*#__PURE_
   }, defaultizedProps.viewRenderers);
   const props = (0, _extends2.default)({}, defaultizedProps, {
     viewRenderers,
+    format: (0, _internals.resolveDateTimeFormat)(utils, defaultizedProps),
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
     // force true to correctly handle `renderTimeViewClock` as a renderer

package/node/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -12,8 +12,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _PickersCalendarHeader = require("@mui/x-date-pickers/PickersCalendarHeader");
 var _internals = require("@mui/x-date-pickers/internals");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["calendars", "month", "monthIndex", "labelId"];
+const _excluded = ["calendars", "month", "monthIndex", "labelId"],
+  _excluded2 = ["format", "slots", "slotProps", "currentMonth", "onMonthChange", "disableFuture", "disablePast", "minDate", "maxDate", "timezone", "reduceAnimations", "views", "view"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const PickersRangeCalendarHeaderContentMultipleCalendars = (0, _styles.styled)(_internals.PickersArrowSwitcher)({
@@ -24,7 +26,7 @@ const PickersRangeCalendarHeaderContentMultipleCalendars = (0, _styles.styled)(_
 });
 const PickersRangeCalendarHeader = exports.PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersRangeCalendarHeader(props, ref) {
   const utils = (0, _internals.useUtils)();
-  const localeText = (0, _internals.useLocaleText)();
+  const translations = (0, _hooks.usePickersTranslations)();
   const {
       calendars,
       month,
@@ -33,17 +35,19 @@ const PickersRangeCalendarHeader = exports.PickersRangeCalendarHeader = /*#__PUR
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
-    format,
-    slots,
-    slotProps,
-    currentMonth,
-    onMonthChange,
-    disableFuture,
-    disablePast,
-    minDate,
-    maxDate,
-    timezone
-  } = props;
+      format,
+      slots,
+      slotProps,
+      currentMonth,
+      onMonthChange,
+      disableFuture,
+      disablePast,
+      minDate,
+      maxDate,
+      timezone
+      // omit props that are not used in the PickersArrowSwitcher
+    } = other,
+    otherRangeProps = (0, _objectWithoutPropertiesLoose2.default)(other, _excluded2);
   const isNextMonthDisabled = (0, _internals.useNextMonthDisabled)(currentMonth, {
     disableFuture,
     maxDate,
@@ -62,21 +66,21 @@ const PickersRangeCalendarHeader = exports.PickersRangeCalendarHeader = /*#__PUR
   }
   const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1), 'left');
   const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1), 'right');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersRangeCalendarHeaderContentMultipleCalendars, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersRangeCalendarHeaderContentMultipleCalendars, (0, _extends2.default)({}, otherRangeProps, {
     ref: ref,
     onGoToPrevious: selectPreviousMonth,
     onGoToNext: selectNextMonth,
     isPreviousHidden: monthIndex !== 0,
     isPreviousDisabled: isPreviousMonthDisabled,
-    previousLabel: localeText.previousMonth,
+    previousLabel: translations.previousMonth,
     isNextHidden: monthIndex !== calendars - 1,
     isNextDisabled: isNextMonthDisabled,
-    nextLabel: localeText.nextMonth,
+    nextLabel: translations.nextMonth,
     slots: slots,
     slotProps: slotProps,
     labelId: labelId,
     children: utils.formatByString(month, format ?? `${utils.formats.month} ${utils.formats.year}`)
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? PickersRangeCalendarHeader.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/index.js

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

package/node/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/base/utils");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _internals = require("@mui/x-date-pickers/internals");
 const _excluded = ["clearable", "onClear"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -36,7 +37,7 @@ const useMultiInputFieldSlotProps = ({
   startFieldRef,
   endFieldRef
 }) => {
-  const localeText = (0, _internals.useLocaleText)();
+  const translations = (0, _hooks.usePickersTranslations)();
   const handleStartFieldRef = (0, _useForkRef.default)(fieldProps.unstableStartFieldRef, startFieldRef);
   const handleEndFieldRef = (0, _useForkRef.default)(fieldProps.unstableEndFieldRef, endFieldRef);
   const previousRangePosition = React.useRef(rangePosition);
@@ -100,7 +101,7 @@ const useMultiInputFieldSlotProps = ({
       let InputProps;
       if (ownerState.position === 'start') {
         textFieldProps = (0, _extends2.default)({
-          label: inLocaleText?.start ?? localeText.start,
+          label: inLocaleText?.start ?? translations.start,
           onKeyDown: (0, _internals.onSpaceOrEnter)(openRangeStartSelection),
           onFocus: handleFocusStart,
           focused: open ? rangePosition === 'start' : undefined
@@ -116,7 +117,7 @@ const useMultiInputFieldSlotProps = ({
         }
       } else {
         textFieldProps = (0, _extends2.default)({
-          label: inLocaleText?.end ?? localeText.end,
+          label: inLocaleText?.end ?? translations.end,
           onKeyDown: (0, _internals.onSpaceOrEnter)(openRangeEndSelection),
           onFocus: handleFocusEnd,
           focused: open ? rangePosition === 'end' : undefined

package/node/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -13,6 +13,7 @@ var _xLicense = require("@mui/x-license");
 var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
 var _PickersLayout = require("@mui/x-date-pickers/PickersLayout");
 var _internals = require("@mui/x-date-pickers/internals");
+var _hooks = require("@mui/x-date-pickers/hooks");
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useEnrichedRangePickerFieldProps = require("../useEnrichedRangePickerFieldProps");
 var _releaseInfo = require("../../utils/releaseInfo");
@@ -55,7 +56,7 @@ const useMobileRangePicker = _ref => {
     onRangePositionChange
   } = (0, _useRangePosition.useRangePosition)(props, fieldType === 'single-input' ? startFieldRef : undefined);
   const labelId = (0, _useId.default)();
-  const contextLocaleText = (0, _internals.useLocaleText)();
+  const contextTranslations = (0, _hooks.usePickersTranslations)();
   const {
     open,
     actions,
@@ -124,7 +125,7 @@ const useMobileRangePicker = _ref => {
     })
   });
   const Layout = slots?.layout ?? _PickersLayout.PickersLayout;
-  const finalLocaleText = (0, _extends2.default)({}, contextLocaleText, localeText);
+  const finalLocaleText = (0, _extends2.default)({}, contextTranslations, localeText);
   let labelledById = pickerParams.valueType === 'date-time' ? `${labelId}-start-toolbar ${labelId}-end-toolbar` : labelId;
   if (isToolbarHidden) {
     const labels = [];

package/node/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTcxOTUyOTIwMDAwMA==";
+  const releaseInfo = "MTcyMDY0ODgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "7.8.0",
+  "version": "7.10.0",
   "description": "The Pro plan edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -34,13 +34,13 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.20",
-    "@mui/utils": "^5.15.20",
+    "@mui/system": "^5.16.0",
+    "@mui/utils": "^5.16.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-date-pickers": "7.8.0",
-    "@mui/x-license": "7.8.0"
+    "@mui/x-date-pickers": "7.10.0",
+    "@mui/x-license": "7.10.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",