@mui/x-date-pickers-pro 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/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/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -5,7 +5,8 @@ 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 +16,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,
@@ -59,10 +60,10 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
     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,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.8.0
+ * @mui/x-date-pickers-pro v7.9.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 = "MTcyMDEyNjgwMDAwMA==";
   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/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -5,7 +5,8 @@ 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 +16,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,
@@ -59,10 +60,10 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
     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,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.8.0
+ * @mui/x-date-pickers-pro v7.9.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 = "MTcyMDEyNjgwMDAwMA==";
   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/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -12,6 +12,7 @@ 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"];
 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); }
@@ -24,7 +25,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,
@@ -68,10 +69,10 @@ const PickersRangeCalendarHeader = exports.PickersRangeCalendarHeader = /*#__PUR
     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,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.8.0
+ * @mui/x-date-pickers-pro v7.9.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 = "MTcyMDEyNjgwMDAwMA==";
   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.9.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.9.0",
+    "@mui/x-license": "7.9.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",