@mui/x-date-pickers 7.17.0 → 7.18.0

package/AdapterDateFns/AdapterDateFns.js

@@ -78,7 +78,7 @@ export class AdapterDateFns extends AdapterDateFnsBase {
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production') {
       if (typeof addDays !== 'function') {
-        throw new Error(['MUI: The `date-fns` package v3.x is not compatible with this adapter.', 'Please, install v2.x of the package or use the `AdapterDateFnsV3` instead.'].join('\n'));
+        throw new Error(['MUI: This adapter is only compatible with `date-fns` v2.x package versions.', 'Please, install v2.x of the package or use the `AdapterDateFnsV3` instead.'].join('\n'));
       }
     }
     super({

package/AdapterDateFnsV3/AdapterDateFnsV3.js

@@ -82,7 +82,7 @@ export class AdapterDateFns extends AdapterDateFnsBase {
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production') {
       if (typeof addDays !== 'function') {
-        throw new Error([`MUI: The \`date-fns\` package v2.x is not compatible with this adapter.`, 'Please, install v3.x of the package or use the `AdapterDateFns` instead.'].join('\n'));
+        throw new Error([`MUI: The \`date-fns\` package v2.x is not compatible with this adapter.`, 'Please, install v3.x or v4.x of the package or use the `AdapterDateFns` instead.'].join('\n'));
       }
       if (!longFormatters) {
         throw new Error('MUI: The minimum supported `date-fns` package version compatible with this adapter is `3.2.x`.');

package/CHANGELOG.md

@@ -3,6 +3,99 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.18.0
+
+_Sep 20, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Support [Row spanning](https://mui.com/x/react-data-grid/row-spanning/) on the Data Grid that automatically merges the consecutive cells in a column based on the cell value
+
+  <img width="600" src="https://github.com/user-attachments/assets/d32ec936-d238-4c92-9e1a-af6788d74cdf" alt="data grid row spanning" />
+
+- ⏰ Support `date-fns` v4 (#14673) @LukasTy
+- 🎉 Add option for Pickers to change the order of displayed years (#11780) @thomasmoon
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.18.0`
+
+- [DataGrid] Add default reset value in row edit mode (#14050) @michelengelen
+- [DataGrid] Add `columnGroupHeaderHeight` prop for sizing column group headers (#14637) @KenanYusuf
+- [DataGrid] Fix `document` reference when the grid is rendered in a popup window (#14649) @arminmeh
+- [DataGrid] Remove `minFirstColumn` from `GetHeadersParams` interface (#14450) @k-rajat19
+- [DataGrid] Row spanning (#14124) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.18.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.18.0`, plus:
+
+- [DataGridPro] Fix `onRowsScrollEnd` being triggered instantly when bottom pinned row is present (#14602) @arminmeh
+- [DataGridPro] Fix header filters rendering issue for `isEmpty` and `isNotEmpty` filter operators (#14493) @k-rajat19
+- [DataGridPro] Fix pinned columns in RTL mode (#14586) @KenanYusuf
+
+#### `@mui/x-data-grid-premium@7.18.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.18.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.18.0`
+
+- [pickers] Add option to change the order of displayed years (#11780) @thomasmoon
+- [pickers] Support `date-fns` v4 (#14673) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.18.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.18.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.18.0`
+
+- [charts] Add a `PolarProvider` to manage polar axes (#14642) @alexfauquette
+- [charts] Fix `LineChart` animation being stuck with initial drawing area value (#14553) @JCQuintas
+- [charts] Fix legend slot typing (#14657) @alexfauquette
+- [charts] Pass the axis index to extremum getter (#14641) @alexfauquette
+- [charts] Provide hooks to create custom tooltip (#14377) @alexfauquette
+
+#### `@mui/x-charts-pro@7.0.0-beta.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-charts@7.18.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.18.0`
+
+- [TreeView] Add `"use client"` directive to every public component and hook (#14579) @flaviendelangle
+
+### Docs
+
+- [docs] Add `groupingValueGetter` callout in column definition docs (#14599) @michelengelen
+- [docs] Clean v6 => v7 migration guide (#14652) @flaviendelangle
+- [docs] Copy `vale-action.yml` from main repo @oliviertassinari
+- [docs] Edit the Pickers Getting started doc (#14555) @samuelsycamore
+- [docs] Fix TypeScript capitalization @oliviertassinari
+- [docs] Fix Vale error @oliviertassinari
+- [docs] Make the migration guide diff a bit easier to read @oliviertassinari
+- [docs] Report Vale at warning level (#14660) @oliviertassinari
+- [docs] Warn about the `valueGetter` and `valueFormatter` signature change (#14613) @cherniavskii
+- [docs] Polish code formatting (#14603) @oliviertassinari
+- [test] Spy on `observe` method to avoid flaky wait for a callback (#14640) @arminmeh
+
+### Core
+
+- [core] Fix 301 link to Next.js and git diff @oliviertassinari
+- [core] Fix failing CI on `master` (#14644) @cherniavskii
+- [core] Fix `package.json` repository rule @oliviertassinari
+- [core] MUI X repository moved to a new location @oliviertassinari
+- [docs-infra] Strengthen CSP (#14581) @oliviertassinari
+- [license] Finish renaming of LicensingModel (#14615) @oliviertassinari
+
 ## 7.17.0
 
 _Sep 13, 2024_
@@ -75,7 +168,7 @@ Same changes as in `@mui/x-charts@7.17.0`.
 ### Docs
 
 - [docs] Add missing callout on "Imperative API" tree view sections (#14503) @flaviendelangle
-- [docs] Fix broken redirection to MUI X v5 @oliviertassinari
+- [docs] Fix broken redirection to MUI X v5 @oliviertassinari
 - [docs] Fix multiple `console.error` messages on `charts` docs (#14554) @JCQuintas
 - [docs] Fixed typo in Row Grouping recipes (#14549) @Miodini
 - [docs] Match title with blog posts @oliviertassinari
@@ -195,7 +288,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 
 - 💫 Support Material UI v6 (`@mui/material@6`) peer dependency (#14142) @cherniavskii
 
-You can now use MUI X components with either v5 or v6 of `@mui/material` package 🎉
+You can now use MUI X components with either v5 or v6 of `@mui/material` package 🎉
 
 - 🐞 Bugfixes
 
@@ -240,7 +333,7 @@ Same changes as in `@mui/x-charts@7.15.0`, plus:
 
 - [docs] Fix sentence case `h2` @oliviertassinari
 - [docs] Clarify contribution guide references @oliviertassinari
-- [docs] Fix Stack Overflow issue canned response @oliviertassinari
+- [docs] Fix Stack Overflow issue canned response @oliviertassinari
 - [docs] Fix outdated link to support page @oliviertassinari
 - [docs] Fix use of Material UI @oliviertassinari
 - [docs] Update deprecated props in docs (#14295) @JCQuintas
@@ -498,7 +591,7 @@ The [Pro plan](https://mui.com/x/introduction/licensing/#pro-plan) is receiving
 
 As always, every feature released as part of the MIT plan will remain free and MIT licensed forever.
 
-This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the [Upcoming changes to MUI X pricing in 2024](https://mui.com/blog/mui-x-sep-2024-price-update/) blog post.
+This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the [Upcoming changes to MUI X pricing in 2024](https://mui.com/blog/mui-x-sep-2024-price-update/) blog post.
 
 ### Highlights
 
@@ -563,7 +656,7 @@ Same changes as in `@mui/x-date-pickers@7.12.0`.
 #### `@mui/x-charts@7.12.0`
 
 - [charts] Fix incorrect `axisId` prop being allowed in xAxis/yAxis config. Use `id` instead. (#13986) @JCQuintas
-- [charts] Use vendor to have Common JS bundle working out of the box (#13608) @alexfauquette
+- [charts] Use vendor to have CommonJS bundle working out of the box (#13608) @alexfauquette
 - [charts] Divide the `SeriesProvider` to use in filtering (#14026) @JCQuintas
 
 ### Tree View

package/DateCalendar/DateCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsPerRow", "monthsPerRow", "timezone"];
+const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsOrder", "yearsPerRow", "monthsPerRow", "timezone"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -120,6 +120,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       loading,
       renderLoading,
       displayWeekNumber,
+      yearsOrder,
       yearsPerRow,
       monthsPerRow,
       timezone: timezoneProp
@@ -311,6 +312,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           shouldDisableYear: shouldDisableYear,
           hasFocus: hasFocus,
           onFocusedViewChange: isViewFocused => setFocusedView('year', isViewFocused),
+          yearsOrder: yearsOrder,
           yearsPerRow: yearsPerRow,
           referenceDate: referenceDate
         })), view === 'month' && /*#__PURE__*/_jsx(MonthCalendar, _extends({}, baseDateValidationProps, commonViewProps, {
@@ -560,6 +562,12 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    * Available views.
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired),
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: PropTypes.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 3

package/DatePicker/DatePicker.js

@@ -351,6 +351,12 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * Available views.
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired),
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: PropTypes.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 4 on desktop, 3 on mobile

package/DatePicker/DatePicker.types.d.ts

@@ -12,11 +12,6 @@ export interface DatePickerProps<TDate extends PickerValidDate, TEnableAccessibl
      * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
      */
     desktopModeMediaQuery?: string;
-    /**
-     * Years rendered per row.
-     * @default 4 on desktop, 3 on mobile
-     */
-    yearsPerRow?: 3 | 4;
     /**
      * Overridable component slots.
      * @default {}
@@ -27,4 +22,9 @@ export interface DatePickerProps<TDate extends PickerValidDate, TEnableAccessibl
      * @default {}
      */
     slotProps?: DatePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    /**
+     * Years rendered per row.
+     * @default 4 on desktop, 3 on mobile
+     */
+    yearsPerRow?: 3 | 4;
 }

package/DateTimePicker/DateTimePicker.js

@@ -422,6 +422,12 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * Available views.
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired),
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: PropTypes.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 4 on desktop, 3 on mobile

package/DateTimePicker/DateTimePicker.types.d.ts

@@ -2,22 +2,18 @@ import { DesktopDateTimePickerProps, DesktopDateTimePickerSlots, DesktopDateTime
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { MobileDateTimePickerProps, MobileDateTimePickerSlots, MobileDateTimePickerSlotProps } from '../MobileDateTimePicker';
 import { PickerValidDate } from '../models';
+import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
 export interface DateTimePickerSlots<TDate extends PickerValidDate> extends DesktopDateTimePickerSlots<TDate>, MobileDateTimePickerSlots<TDate, DateOrTimeViewWithMeridiem> {
 }
 export interface DateTimePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileDateTimePickerSlotProps<TDate, DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {
 }
-export interface DateTimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends DesktopDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>, Omit<MobileDateTimePickerProps<TDate, DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
+export interface DateTimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends DesktopDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>, ExportedYearCalendarProps, Omit<MobileDateTimePickerProps<TDate, DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
     /**
      * CSS media query when `Mobile` mode will be changed to `Desktop`.
      * @default '@media (pointer: fine)'
      * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
      */
     desktopModeMediaQuery?: string;
-    /**
-     * Years rendered per row.
-     * @default 4 on desktop, 3 on mobile
-     */
-    yearsPerRow?: 3 | 4;
     /**
      * Overridable component slots.
      * @default {}
@@ -28,4 +24,9 @@ export interface DateTimePickerProps<TDate extends PickerValidDate, TEnableAcces
      * @default {}
      */
     slotProps?: DateTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    /**
+     * Years rendered per row.
+     * @default 4 on desktop, 3 on mobile
+     */
+    yearsPerRow?: 3 | 4;
 }

package/DesktopDatePicker/DesktopDatePicker.js

@@ -372,6 +372,12 @@ DesktopDatePicker.propTypes = {
    * Available views.
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired),
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: PropTypes.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 4

package/DesktopDatePicker/DesktopDatePicker.types.d.ts

@@ -2,16 +2,12 @@ import { UseDesktopPickerSlots, ExportedUseDesktopPickerSlotProps, DesktopOnlyPi
 import { BaseDatePickerProps, BaseDatePickerSlots, BaseDatePickerSlotProps } from '../DatePicker/shared';
 import { MakeOptional } from '../internals/models/helpers';
 import { DateView, PickerValidDate } from '../models';
+import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
 export interface DesktopDatePickerSlots<TDate extends PickerValidDate> extends BaseDatePickerSlots<TDate>, MakeOptional<UseDesktopPickerSlots<TDate, DateView>, 'field' | 'openPickerIcon'> {
 }
 export interface DesktopDatePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDatePickerSlotProps<TDate>, ExportedUseDesktopPickerSlotProps<TDate, DateView, TEnableAccessibleFieldDOMStructure> {
 }
-export interface DesktopDatePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseDatePickerProps<TDate>, DesktopOnlyPickerProps {
-    /**
-     * Years rendered per row.
-     * @default 4
-     */
-    yearsPerRow?: 3 | 4;
+export interface DesktopDatePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseDatePickerProps<TDate>, DesktopOnlyPickerProps, ExportedYearCalendarProps {
     /**
      * Overridable component slots.
      * @default {}
@@ -22,4 +18,9 @@ export interface DesktopDatePickerProps<TDate extends PickerValidDate, TEnableAc
      * @default {}
      */
     slotProps?: DesktopDatePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    /**
+     * Years rendered per row.
+     * @default 4
+     */
+    yearsPerRow?: 3 | 4;
 }

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -530,6 +530,12 @@ DesktopDateTimePicker.propTypes = {
    * Available views.
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired),
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: PropTypes.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 4

package/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts

@@ -6,20 +6,12 @@ import { DesktopOnlyTimePickerProps } from '../internals/models/props/clock';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from '../MultiSectionDigitalClock';
 import { DigitalClockSlots, DigitalClockSlotProps } from '../DigitalClock';
+import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
 export interface DesktopDateTimePickerSlots<TDate extends PickerValidDate> extends BaseDateTimePickerSlots<TDate>, MakeOptional<UseDesktopPickerSlots<TDate, DateOrTimeViewWithMeridiem>, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {
 }
 export interface DesktopDateTimePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps<TDate>, ExportedUseDesktopPickerSlotProps<TDate, DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
 }
-export interface DesktopDateTimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseDateTimePickerProps<TDate, DateOrTimeViewWithMeridiem>, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps<TDate> {
-    /**
-     * Available views.
-     */
-    views?: readonly DateOrTimeView[];
-    /**
-     * Years rendered per row.
-     * @default 4
-     */
-    yearsPerRow?: 3 | 4;
+export interface DesktopDateTimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseDateTimePickerProps<TDate, DateOrTimeViewWithMeridiem>, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps<TDate>, ExportedYearCalendarProps {
     /**
      * Overridable component slots.
      * @default {}
@@ -30,4 +22,13 @@ export interface DesktopDateTimePickerProps<TDate extends PickerValidDate, TEnab
      * @default {}
      */
     slotProps?: DesktopDateTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    /**
+     * Available views.
+     */
+    views?: readonly DateOrTimeView[];
+    /**
+     * Years rendered per row.
+     * @default 4
+     */
+    yearsPerRow?: 3 | 4;
 }

package/MobileDatePicker/MobileDatePicker.js

@@ -369,6 +369,12 @@ MobileDatePicker.propTypes = {
    * Available views.
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired),
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: PropTypes.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 3

package/MobileDatePicker/MobileDatePicker.types.d.ts

@@ -17,4 +17,9 @@ export interface MobileDatePickerProps<TDate extends PickerValidDate, TEnableAcc
      * @default {}
      */
     slotProps?: MobileDatePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+    /**
+     * Years rendered per row.
+     * @default 3
+     */
+    yearsPerRow?: 3 | 4;
 }

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -428,6 +428,12 @@ MobileDateTimePicker.propTypes = {
    * Available views.
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired),
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: PropTypes.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 3

package/MonthCalendar/MonthCalendar.types.d.ts

@@ -8,7 +8,7 @@ import type { PickersMonthProps } from './PickersMonth';
 import { SlotComponentPropsFromProps } from '../internals/models/helpers';
 export interface MonthCalendarSlots {
     /**
-     * Button displayed to render a single month in the "month" view.
+     * Button displayed to render a single month in the `month` view.
      * @default MonthCalendarButton
      */
     monthButton?: React.ElementType;

package/PickersCalendarHeader/PickersCalendarHeader.types.d.ts

@@ -15,7 +15,7 @@ export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots {
      */
     switchViewButton?: React.ElementType;
     /**
-     * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".
+     * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
      * @default ArrowDropDown
      */
     switchViewIcon?: React.ElementType;

package/StaticDatePicker/StaticDatePicker.js

@@ -293,9 +293,15 @@ StaticDatePicker.propTypes = {
    * Available views.
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired),
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: PropTypes.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
-   * @default 3
+   * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.
    */
   yearsPerRow: PropTypes.oneOf([3, 4])
 };

package/StaticDatePicker/StaticDatePicker.types.d.ts

@@ -17,4 +17,9 @@ export interface StaticDatePickerProps<TDate extends PickerValidDate> extends Ba
      * @default {}
      */
     slotProps?: StaticDatePickerSlotProps<TDate>;
+    /**
+     * Years rendered per row.
+     * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.
+     */
+    yearsPerRow?: 3 | 4;
 }

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -352,9 +352,15 @@ StaticDateTimePicker.propTypes = {
    * Available views.
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired),
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: PropTypes.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
-   * @default 3
+   * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.
    */
   yearsPerRow: PropTypes.oneOf([3, 4])
 };

package/StaticDateTimePicker/StaticDateTimePicker.types.d.ts

@@ -17,4 +17,9 @@ export interface StaticDateTimePickerProps<TDate extends PickerValidDate> extend
      * @default {}
      */
     slotProps?: StaticDateTimePickerSlotProps<TDate>;
+    /**
+     * Years rendered per row.
+     * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.
+     */
+    yearsPerRow?: 3 | 4;
 }

package/YearCalendar/YearCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsOrder", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -88,6 +88,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       onYearFocus,
       hasFocus,
       onFocusedViewChange,
+      yearsOrder = 'asc',
       yearsPerRow,
       timezone: timezoneProp,
       gridLabelId,
@@ -177,22 +178,24 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
   React.useEffect(() => {
     setFocusedYear(prevFocusedYear => selectedYear !== null && prevFocusedYear !== selectedYear ? selectedYear : prevFocusedYear);
   }, [selectedYear]);
+  const verticalDirection = yearsOrder !== 'desc' ? yearsPerRow * 1 : yearsPerRow * -1;
+  const horizontalDirection = isRtl || yearsOrder === 'desc' ? -1 : 1;
   const handleKeyDown = useEventCallback((event, year) => {
     switch (event.key) {
       case 'ArrowUp':
-        focusYear(year - yearsPerRow);
+        focusYear(year - verticalDirection);
         event.preventDefault();
         break;
       case 'ArrowDown':
-        focusYear(year + yearsPerRow);
+        focusYear(year + verticalDirection);
         event.preventDefault();
         break;
       case 'ArrowLeft':
-        focusYear(year + (isRtl ? 1 : -1));
+        focusYear(year - horizontalDirection);
         event.preventDefault();
         break;
       case 'ArrowRight':
-        focusYear(year + (isRtl ? -1 : 1));
+        focusYear(year + horizontalDirection);
         event.preventDefault();
         break;
       default:
@@ -230,6 +233,10 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     }
     scrollerRef.current.scrollTop = elementBottom - clientHeight / 2 - offsetHeight / 2;
   }, [autoFocus]);
+  const yearRange = utils.getYearRange([minDate, maxDate]);
+  if (yearsOrder === 'desc') {
+    yearRange.reverse();
+  }
   return /*#__PURE__*/_jsx(YearCalendarRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
@@ -237,7 +244,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     role: "radiogroup",
     "aria-labelledby": gridLabelId
   }, other, {
-    children: utils.getYearRange([minDate, maxDate]).map(year => {
+    children: yearRange.map(year => {
       const yearNumber = utils.getYear(year);
       const isSelected = yearNumber === selectedYear;
       const isDisabled = disabled || isYearDisabled(year);
@@ -358,6 +365,12 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * Used when the component is controlled.
    */
   value: PropTypes.object,
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: PropTypes.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 3

package/YearCalendar/YearCalendar.types.d.ts

@@ -8,7 +8,7 @@ import type { PickersYearProps } from './PickersYear';
 import { SlotComponentPropsFromProps } from '../internals/models/helpers';
 export interface YearCalendarSlots {
     /**
-     * Button displayed to render a single year in the "year" view.
+     * Button displayed to render a single year in the `year` view.
      * @default YearCalendarButton
      */
     yearButton?: React.ElementType;
@@ -19,6 +19,12 @@ export interface YearCalendarSlotProps {
     }, {}, PickersYearProps>;
 }
 export interface ExportedYearCalendarProps {
+    /**
+     * Years are displayed in ascending (chronological) order by default.
+     * If `desc`, years are displayed in descending order.
+     * @default 'asc'
+     */
+    yearsOrder?: 'asc' | 'desc';
     /**
      * Years rendered per row.
      * @default 3

package/dateViewRenderers/dateViewRenderers.d.ts

@@ -8,4 +8,4 @@ export interface DateViewRendererProps<TDate extends PickerValidDate, TView exte
     views: readonly TView[];
     focusedView: TView | null;
 }
-export declare const renderDateViewCalendar: <TDate extends PickerValidDate>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;
+export declare const renderDateViewCalendar: <TDate extends PickerValidDate>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsOrder, yearsPerRow, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;

package/dateViewRenderers/dateViewRenderers.js

@@ -25,6 +25,7 @@ export const renderDateViewCalendar = ({
   onMonthChange,
   monthsPerRow,
   onYearChange,
+  yearsOrder,
   yearsPerRow,
   slots,
   slotProps,
@@ -63,6 +64,7 @@ export const renderDateViewCalendar = ({
   onMonthChange: onMonthChange,
   monthsPerRow: monthsPerRow,
   onYearChange: onYearChange,
+  yearsOrder: yearsOrder,
   yearsPerRow: yearsPerRow,
   slots: slots,
   slotProps: slotProps,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.17.0
+ * @mui/x-date-pickers v7.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/AdapterDateFns/AdapterDateFns.js

@@ -78,7 +78,7 @@ export class AdapterDateFns extends AdapterDateFnsBase {
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production') {
       if (typeof addDays !== 'function') {
-        throw new Error(['MUI: The `date-fns` package v3.x is not compatible with this adapter.', 'Please, install v2.x of the package or use the `AdapterDateFnsV3` instead.'].join('\n'));
+        throw new Error(['MUI: This adapter is only compatible with `date-fns` v2.x package versions.', 'Please, install v2.x of the package or use the `AdapterDateFnsV3` instead.'].join('\n'));
       }
     }
     super({