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

package/CHANGELOG.md

@@ -3,6 +3,187 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.8.0
+
+_Jun 28, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛰 Introduce server-side data source for improved server integration in the Data Grid.
+
+  Supports server-side pagination, sorting and filtering on plain and tree data, and automatic caching.
+
+  To enable, provide a `getRows` function to the `unstable_dataSource` prop on the Data Grid component.
+
+  ```tsx
+  const dataSource = {
+    getRows: async (params: GridServerGetRowsParams) => {
+      const data = await fetch(
+        `https://api.example.com/data?${new URLSearchParams({
+          page: params.page,
+          pageSize: params.pageSize,
+          sortModel: JSON.stringify(params.sortModel),
+          filterModel: JSON.stringify(params.filterModel),
+        }).toString()}`,
+      );
+      return {
+        rows: data.rows,
+        totalRows: data.totalRows,
+      };
+    },
+  }
+  <DataGridPro
+    unstable_dataSource={dataSource}
+    {...otherProps}
+  />
+  ```
+
+  See [server-side data documentation](https://mui.com/x/react-data-grid/server-side-data/) for more details.
+
+- 📈 Support Date data on the BarChart component
+- ↕️ Support custom column sort icons on the Data Grid
+- 🖱️ Support modifying the expansion trigger on the Tree View components
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.8.0`
+
+- [DataGrid] Add `columnHeaderSortIcon` slot (#13563) @arminmeh
+- [DataGrid] Fix dimensions lag issue after autosize (#13587) @MBilalShafi
+- [DataGrid] Fix print export failure when `hideFooter` option is set (#13034) @tarunrajput
+
+#### `@mui/x-data-grid-pro@7.8.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.8.0`, plus:
+
+- [DataGridPro] Fix multi-sorting indicator being cut off (#13625) @KenanYusuf
+- [DataGridPro] Server-side tree data support (#12317) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@7.8.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.8.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.8.0`
+
+- [fields] Fix section clearing behavior on Android (#13652) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.8.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.8.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.8.0`
+
+- [charts] Fix line chart props not passing correct event handlers (#13609) @JCQuintas
+- [charts] Support BarChart with `Date` data (#13471) @alexfauquette
+- [charts] Support RTL for y-axis (#13614) @alexfauquette
+- [charts] Use default values instead of non-null assertion to prevent error being thrown (#13637) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.8.0`
+
+- [TreeView] Add `expansionTrigger` prop (#13533) @noraleonte
+- [TreeView] Support experimental features from plugin's dependencies (#13632) @flaviendelangle
+
+### Docs
+
+- [docs] Add callout for `Luxon` `throwOnInvalid` support (#13621) @LukasTy
+- [docs] Add "Overlays" section to the Data Grid documentation (#13624) @KenanYusuf
+
+### Core
+
+- [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas
+- [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
+- [license] Allow usage of charts and tree view pro package for old premium licenses (#13619) @flaviendelangle
+
+## 7.7.1
+
+_Jun 21, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Portuguese (pt-PT) locale on the Data Grid
+- 🌍 Improve Danish (da-DK) locale on the Date and Time Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.7.1`
+
+- [DataGrid][docs] Clarify enabling pagination (#13350) @oliviertassinari
+- [DataGrid] Fix CSV export escaping for non-string values (#13560) @joeycumines-scw
+- [l10n] Improve Portuguese (pt-PT) locale (#13348) @joaosreis
+
+#### `@mui/x-data-grid-pro@7.7.1` [![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.7.1`, plus:
+
+- [DataGrid] Warn about `getTreeDataPath` reference (#13519) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.7.1` [![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.7.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.7.1`
+
+- [fields] Prevent digit editing on the `Space` key down (#13510) @flaviendelangle
+- [l10n] Improve Danish (da-DK) locale (#13375) @jacrowland1
+- [pickers] Add context to `onAccept` callback (#13511) @flaviendelangle
+- [pickers] Always use the same timezone in the field, the view and the layout components (#13481) @flaviendelangle
+- [pickers] Fix `AdapterDateFnsV3` generated method types (#13464) @alexey-kozlenkov
+- [pickers] Fix controlled `view` behavior (#13552) @LukasTy
+- [TimePicker] Improves RTL verification for the time pickers default views (#13447) @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.7.1` [![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.7.1`, plus:
+
+- [DateRangePicker] Add accessible name to calendar grid (#13538) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.7.1`
+
+- [charts] Divide `CartesianProvider` to use logic in Pro package (#13531) @JCQuintas
+- [charts] Do not publish the pro package (#13539) @alexfauquette
+- [charts] Export `Pro` versions of regular charts (#13547) @JCQuintas
+- [charts] Prepare `ChartContainerPro` for future Zoom changes (#13532) @JCQuintas
+- [charts] Remove unnecessary proptypes from internal component (#13518) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.7.1`
+
+- [TreeView] Improve typing to support optional dependencies in plugins and in the item (#13523) @flaviendelangle
+- [TreeView] Move `useTreeViewId` to the core plugins (#13566) @flaviendelangle
+- [TreeView] Remove unused state from `useTreeViewId` (#13579) @flaviendelangle
+- [TreeView] Support `itemId` with escaping characters when using `SimpleTreeView` (#13487) @oukunan
+
+### Docs
+
+- [docs] Add section about the new uncovered product watermark (#13568) @michelengelen
+- [docs] Document the `PickerValidDate` type override (#13476) @flaviendelangle
+- [docs] Fix typo (#13507) @anshtiwatne
+- [docs] Remove "-" in heat-map and tree-map urls (#13569) @alexfauquette
+- [docs] Use dedicated tab for weather dataset (#13513) @alexfauquette
+- [x-license] license update proposal (#13459) @michelengelen
+
+### Core
+
+- [core] Fix failing CI test (#13574) @alexfauquette
+- [infra] Remove explicit `@testing-library/react` dependency (#13478) @LukasTy
+
 ## 7.7.0
 
 _Jun 13, 2024_

package/DateRangeCalendar/DateRangeCalendar.js

@@ -9,7 +9,8 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useId from '@mui/utils/useId';
 import { Watermark } from '@mui/x-license';
 import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, buildWarning, useControlledValueWithTimezone, useViews } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
@@ -184,6 +185,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   });
   const utils = useUtils();
   const now = useNow(timezone);
+  const id = useId();
   const {
     rangePosition,
     onRangePositionChange
@@ -437,11 +439,13 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       releaseInfo: releaseInfo
     }), calendarMonths.map(monthIndex => {
       const month = visibleMonths[monthIndex];
+      const labelId = `${id}-grid-${monthIndex}-label`;
       return /*#__PURE__*/_jsxs(DateRangeCalendarMonthContainer, {
         className: classes.monthContainer,
         children: [/*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps, {
           month: month,
-          monthIndex: monthIndex
+          monthIndex: monthIndex,
+          labelId: labelId
         })), /*#__PURE__*/_jsx(DayCalendarForRange, _extends({
           className: classes.dayCalendar
         }, calendarState, baseDateValidationProps, commonViewProps, {
@@ -462,7 +466,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
           autoFocus: month === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
           displayWeekNumber: displayWeekNumber,
-          timezone: timezone
+          timezone: timezone,
+          gridLabelId: labelId
         }))]
       }, monthIndex);
     })]

package/DateRangeCalendar/useDragRange.d.ts

@@ -28,5 +28,5 @@ interface UseDragRangeResponse<TDate extends PickerValidDate> extends UseDragRan
     rangeDragDay: TDate | null;
     draggingDatePosition: RangePosition | null;
 }
-export declare const useDragRange: <TDate extends PickerValidDate>({ disableDragEditing, utils, onDatePositionChange, onDrop, dateRange, timezone, }: Omit<UseDragRangeParams<TDate>, 'setRangeDragDay' | 'setIsDragging' | 'isDragging'>) => UseDragRangeResponse<TDate>;
+export declare const useDragRange: <TDate extends PickerValidDate>({ disableDragEditing, utils, onDatePositionChange, onDrop, dateRange, timezone, }: Omit<UseDragRangeParams<TDate>, "setRangeDragDay" | "setIsDragging" | "isDragging">) => UseDragRangeResponse<TDate>;
 export {};

package/DateRangePicker/DateRangePicker.js

@@ -190,7 +190,9 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/DateTimeRangePicker/DateTimeRangePicker.js

@@ -223,7 +223,9 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -195,7 +195,9 @@ DesktopDateRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -301,7 +301,9 @@ DesktopDateTimeRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -191,7 +191,9 @@ MobileDateRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -295,7 +295,9 @@ MobileDateTimeRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["calendars", "month", "monthIndex"];
+const _excluded = ["calendars", "month", "monthIndex", "labelId"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -19,7 +19,8 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
   const {
       calendars,
       month,
-      monthIndex
+      monthIndex,
+      labelId
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -46,6 +47,7 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
   });
   if (calendars === 1) {
     return /*#__PURE__*/_jsx(PickersCalendarHeader, _extends({}, other, {
+      labelId: labelId,
       ref: ref
     }));
   }
@@ -63,6 +65,7 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
     nextLabel: localeText.nextMonth,
     slots: slots,
     slotProps: slotProps,
+    labelId: labelId,
     children: utils.formatByString(month, format ?? `${utils.formats.month} ${utils.formats.year}`)
   });
 });
@@ -89,6 +92,10 @@ process.env.NODE_ENV !== "production" ? PickersRangeCalendarHeader.propTypes = {
    * @default `${adapter.formats.month} ${adapter.formats.year}`
    */
   format: PropTypes.string,
+  /**
+   * Id of the calendar text element.
+   * It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
+   */
   labelId: PropTypes.string,
   maxDate: PropTypes.object.isRequired,
   minDate: PropTypes.object.isRequired,

package/StaticDateRangePicker/StaticDateRangePicker.js

@@ -154,7 +154,9 @@ StaticDateRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/dateRangeViewRenderers/dateRangeViewRenderers.d.ts

@@ -9,4 +9,4 @@ export interface DateRangeViewRendererProps<TDate extends PickerValidDate, TView
  * We don't pass all the props down to `DateRangeCalendar`,
  * because otherwise some unwanted props would be passed to the HTML element.
  */
-export declare const renderDateRangeViewCalendar: <TDate extends PickerValidDate>({ value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, reduceAnimations, onMonthChange, rangePosition, defaultRangePosition, onRangePositionChange, calendars, currentMonthCalendarPosition, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, disableAutoMonthSwitching, sx, autoFocus, fixedWeekNumber, disableDragEditing, displayWeekNumber, timezone, availableRangePositions, views, view, onViewChange, }: DateRangeViewRendererProps<TDate, 'day'>) => React.JSX.Element;
+export declare const renderDateRangeViewCalendar: <TDate extends PickerValidDate>({ value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, reduceAnimations, onMonthChange, rangePosition, defaultRangePosition, onRangePositionChange, calendars, currentMonthCalendarPosition, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, disableAutoMonthSwitching, sx, autoFocus, fixedWeekNumber, disableDragEditing, displayWeekNumber, timezone, availableRangePositions, views, view, onViewChange, }: DateRangeViewRendererProps<TDate, "day">) => React.JSX.Element;

package/index.js

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

package/internals/hooks/useMultiInputFieldSelectedSections.d.ts

@@ -13,7 +13,7 @@ export declare const useMultiInputFieldSelectedSections: (params: UseMultiInputF
         onSelectedSectionsChange: (newSelectedSections: FieldSelectedSections) => void;
     };
     end: {
-        unstableFieldRef: ((instance: FieldRef<RangeFieldSection> | null) => void) | null;
+        unstableFieldRef: ((instance: FieldRef<RangeFieldSection> | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
         selectedSections: FieldSelectedSections;
         onSelectedSectionsChange: (newSelectedSections: FieldSelectedSections) => void;
     };

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcxODIyNjAwMDAwMA==";
+  const releaseInfo = "MTcxOTUyOTIwMDAwMA==";
   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/DateRangeCalendar/DateRangeCalendar.js

@@ -9,7 +9,8 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useId from '@mui/utils/useId';
 import { Watermark } from '@mui/x-license';
 import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, buildWarning, useControlledValueWithTimezone, useViews } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
@@ -184,6 +185,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   });
   const utils = useUtils();
   const now = useNow(timezone);
+  const id = useId();
   const {
     rangePosition,
     onRangePositionChange
@@ -437,11 +439,13 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       releaseInfo: releaseInfo
     }), calendarMonths.map(monthIndex => {
       const month = visibleMonths[monthIndex];
+      const labelId = `${id}-grid-${monthIndex}-label`;
       return /*#__PURE__*/_jsxs(DateRangeCalendarMonthContainer, {
         className: classes.monthContainer,
         children: [/*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps, {
           month: month,
-          monthIndex: monthIndex
+          monthIndex: monthIndex,
+          labelId: labelId
         })), /*#__PURE__*/_jsx(DayCalendarForRange, _extends({
           className: classes.dayCalendar
         }, calendarState, baseDateValidationProps, commonViewProps, {
@@ -462,7 +466,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
           autoFocus: month === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
           displayWeekNumber: displayWeekNumber,
-          timezone: timezone
+          timezone: timezone,
+          gridLabelId: labelId
         }))]
       }, monthIndex);
     })]

package/modern/DateRangePicker/DateRangePicker.js

@@ -190,7 +190,9 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/modern/DateTimeRangePicker/DateTimeRangePicker.js

@@ -223,7 +223,9 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -195,7 +195,9 @@ DesktopDateRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -301,7 +301,9 @@ DesktopDateTimeRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -191,7 +191,9 @@ MobileDateRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/modern/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -295,7 +295,9 @@ MobileDateTimeRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/modern/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["calendars", "month", "monthIndex"];
+const _excluded = ["calendars", "month", "monthIndex", "labelId"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -19,7 +19,8 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
   const {
       calendars,
       month,
-      monthIndex
+      monthIndex,
+      labelId
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -46,6 +47,7 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
   });
   if (calendars === 1) {
     return /*#__PURE__*/_jsx(PickersCalendarHeader, _extends({}, other, {
+      labelId: labelId,
       ref: ref
     }));
   }
@@ -63,6 +65,7 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
     nextLabel: localeText.nextMonth,
     slots: slots,
     slotProps: slotProps,
+    labelId: labelId,
     children: utils.formatByString(month, format ?? `${utils.formats.month} ${utils.formats.year}`)
   });
 });
@@ -89,6 +92,10 @@ process.env.NODE_ENV !== "production" ? PickersRangeCalendarHeader.propTypes = {
    * @default `${adapter.formats.month} ${adapter.formats.year}`
    */
   format: PropTypes.string,
+  /**
+   * Id of the calendar text element.
+   * It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
+   */
   labelId: PropTypes.string,
   maxDate: PropTypes.object.isRequired,
   minDate: PropTypes.object.isRequired,

package/modern/StaticDateRangePicker/StaticDateRangePicker.js

@@ -154,7 +154,9 @@ StaticDateRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: PropTypes.func,
   /**

package/modern/index.js

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

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcxODIyNjAwMDAwMA==";
+  const releaseInfo = "MTcxOTUyOTIwMDAwMA==";
   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/DateRangeCalendar/DateRangeCalendar.js

@@ -14,7 +14,8 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _utils = require("@mui/base/utils");
 var _styles = require("@mui/material/styles");
-var _utils2 = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _xLicense = require("@mui/x-license");
 var _internals = require("@mui/x-date-pickers/internals");
 var _releaseInfo = require("../internals/utils/releaseInfo");
@@ -111,7 +112,7 @@ const useUtilityClasses = ownerState => {
     monthContainer: ['monthContainer'],
     dayCalendar: [isDragging && 'dayDragging']
   };
-  return (0, _utils2.unstable_composeClasses)(slots, _dateRangeCalendarClasses.getDateRangeCalendarUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _dateRangeCalendarClasses.getDateRangeCalendarUtilityClass, classes);
 };
 /**
  * Demos:
@@ -193,6 +194,7 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
   });
   const utils = (0, _internals.useUtils)();
   const now = (0, _internals.useNow)(timezone);
+  const id = (0, _useId.default)();
   const {
     rangePosition,
     onRangePositionChange
@@ -446,11 +448,13 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       releaseInfo: releaseInfo
     }), calendarMonths.map(monthIndex => {
       const month = visibleMonths[monthIndex];
+      const labelId = `${id}-grid-${monthIndex}-label`;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateRangeCalendarMonthContainer, {
         className: classes.monthContainer,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, (0, _extends2.default)({}, calendarHeaderProps, {
           month: month,
-          monthIndex: monthIndex
+          monthIndex: monthIndex,
+          labelId: labelId
         })), /*#__PURE__*/(0, _jsxRuntime.jsx)(DayCalendarForRange, (0, _extends2.default)({
           className: classes.dayCalendar
         }, calendarState, baseDateValidationProps, commonViewProps, {
@@ -471,7 +475,8 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
           autoFocus: month === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
           displayWeekNumber: displayWeekNumber,
-          timezone: timezone
+          timezone: timezone,
+          gridLabelId: labelId
         }))]
       }, monthIndex);
     })]

package/node/DateRangePicker/DateRangePicker.js

@@ -199,7 +199,9 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/DateTimeRangePicker/DateTimeRangePicker.js

@@ -232,7 +232,9 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -204,7 +204,9 @@ DesktopDateRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -310,7 +310,9 @@ DesktopDateTimeRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/MobileDateRangePicker/MobileDateRangePicker.js

@@ -200,7 +200,9 @@ MobileDateRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -304,7 +304,9 @@ MobileDateTimeRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -13,7 +13,7 @@ var _styles = require("@mui/material/styles");
 var _PickersCalendarHeader = require("@mui/x-date-pickers/PickersCalendarHeader");
 var _internals = require("@mui/x-date-pickers/internals");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["calendars", "month", "monthIndex"];
+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); }
 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)({
@@ -28,7 +28,8 @@ const PickersRangeCalendarHeader = exports.PickersRangeCalendarHeader = /*#__PUR
   const {
       calendars,
       month,
-      monthIndex
+      monthIndex,
+      labelId
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -55,6 +56,7 @@ const PickersRangeCalendarHeader = exports.PickersRangeCalendarHeader = /*#__PUR
   });
   if (calendars === 1) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersCalendarHeader.PickersCalendarHeader, (0, _extends2.default)({}, other, {
+      labelId: labelId,
       ref: ref
     }));
   }
@@ -72,6 +74,7 @@ const PickersRangeCalendarHeader = exports.PickersRangeCalendarHeader = /*#__PUR
     nextLabel: localeText.nextMonth,
     slots: slots,
     slotProps: slotProps,
+    labelId: labelId,
     children: utils.formatByString(month, format ?? `${utils.formats.month} ${utils.formats.year}`)
   });
 });
@@ -98,6 +101,10 @@ process.env.NODE_ENV !== "production" ? PickersRangeCalendarHeader.propTypes = {
    * @default `${adapter.formats.month} ${adapter.formats.year}`
    */
   format: _propTypes.default.string,
+  /**
+   * Id of the calendar text element.
+   * It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
+   */
   labelId: _propTypes.default.string,
   maxDate: _propTypes.default.object.isRequired,
   minDate: _propTypes.default.object.isRequired,

package/node/StaticDateRangePicker/StaticDateRangePicker.js

@@ -163,7 +163,9 @@ StaticDateRangePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/index.js

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

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 = "MTcxODIyNjAwMDAwMA==";
+  const releaseInfo = "MTcxOTUyOTIwMDAwMA==";
   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.7.0",
+  "version": "7.8.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.15",
-    "@mui/utils": "^5.15.14",
+    "@mui/system": "^5.15.20",
+    "@mui/utils": "^5.15.20",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-date-pickers": "7.7.0",
-    "@mui/x-license": "7.7.0"
+    "@mui/x-date-pickers": "7.8.0",
+    "@mui/x-license": "7.8.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",