@mui/x-date-pickers 7.17.0 → 7.18.0

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/node/AdapterDateFns/AdapterDateFns.js

@@ -87,7 +87,7 @@ class AdapterDateFns extends _AdapterDateFnsBase.AdapterDateFnsBase {
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production') {
       if (typeof _addDays.default !== '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/node/AdapterDateFnsV3/AdapterDateFnsV3.js

@@ -90,7 +90,7 @@ class AdapterDateFns extends _AdapterDateFnsBase.AdapterDateFnsBase {
     /* istanbul ignore next */
     if (process.env.NODE_ENV !== 'production') {
       if (typeof _addDays.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 (!_format.longFormatters) {
         throw new Error('MUI: The minimum supported `date-fns` package version compatible with this adapter is `3.2.x`.');

package/node/DateCalendar/DateCalendar.js

@@ -31,7 +31,7 @@ var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _dimensions = require("../internals/constants/dimensions");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -127,6 +127,7 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
       loading,
       renderLoading,
       displayWeekNumber,
+      yearsOrder,
       yearsPerRow,
       monthsPerRow,
       timezone: timezoneProp
@@ -318,6 +319,7 @@ const DateCalendar = exports.DateCalendar = /*#__PURE__*/React.forwardRef(functi
           shouldDisableYear: shouldDisableYear,
           hasFocus: hasFocus,
           onFocusedViewChange: isViewFocused => setFocusedView('year', isViewFocused),
+          yearsOrder: yearsOrder,
           yearsPerRow: yearsPerRow,
           referenceDate: referenceDate
         })), view === 'month' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MonthCalendar.MonthCalendar, (0, _extends2.default)({}, baseDateValidationProps, commonViewProps, {
@@ -567,6 +569,12 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    * Available views.
    */
   views: _propTypes.default.arrayOf(_propTypes.default.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.default.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 3

package/node/DatePicker/DatePicker.js

@@ -358,6 +358,12 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * Available views.
    */
   views: _propTypes.default.arrayOf(_propTypes.default.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.default.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 4 on desktop, 3 on mobile

package/node/DateTimePicker/DateTimePicker.js

@@ -429,6 +429,12 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * Available views.
    */
   views: _propTypes.default.arrayOf(_propTypes.default.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.default.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 4 on desktop, 3 on mobile

package/node/DesktopDatePicker/DesktopDatePicker.js

@@ -379,6 +379,12 @@ DesktopDatePicker.propTypes = {
    * Available views.
    */
   views: _propTypes.default.arrayOf(_propTypes.default.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.default.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 4

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -537,6 +537,12 @@ DesktopDateTimePicker.propTypes = {
    * Available views.
    */
   views: _propTypes.default.arrayOf(_propTypes.default.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.default.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 4

package/node/MobileDatePicker/MobileDatePicker.js

@@ -376,6 +376,12 @@ MobileDatePicker.propTypes = {
    * Available views.
    */
   views: _propTypes.default.arrayOf(_propTypes.default.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.default.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 3

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -435,6 +435,12 @@ MobileDateTimePicker.propTypes = {
    * Available views.
    */
   views: _propTypes.default.arrayOf(_propTypes.default.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.default.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 3

package/node/StaticDatePicker/StaticDatePicker.js

@@ -300,9 +300,15 @@ StaticDatePicker.propTypes = {
    * Available views.
    */
   views: _propTypes.default.arrayOf(_propTypes.default.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.default.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
-   * @default 3
+   * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.
    */
   yearsPerRow: _propTypes.default.oneOf([3, 4])
 };

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -359,9 +359,15 @@ StaticDateTimePicker.propTypes = {
    * Available views.
    */
   views: _propTypes.default.arrayOf(_propTypes.default.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.default.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
-   * @default 3
+   * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.
    */
   yearsPerRow: _propTypes.default.oneOf([3, 4])
 };

package/node/YearCalendar/YearCalendar.js

@@ -24,7 +24,7 @@ var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDa
 var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _dimensions = require("../internals/constants/dimensions");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -95,6 +95,7 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
       onYearFocus,
       hasFocus,
       onFocusedViewChange,
+      yearsOrder = 'asc',
       yearsPerRow,
       timezone: timezoneProp,
       gridLabelId,
@@ -184,22 +185,24 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
   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 = (0, _utils.unstable_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:
@@ -237,6 +240,10 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
     }
     scrollerRef.current.scrollTop = elementBottom - clientHeight / 2 - offsetHeight / 2;
   }, [autoFocus]);
+  const yearRange = utils.getYearRange([minDate, maxDate]);
+  if (yearsOrder === 'desc') {
+    yearRange.reverse();
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(YearCalendarRoot, (0, _extends2.default)({
     ref: handleRef,
     className: (0, _clsx.default)(classes.root, className),
@@ -244,7 +251,7 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
     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);
@@ -365,6 +372,12 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * Used when the component is controlled.
    */
   value: _propTypes.default.object,
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: _propTypes.default.oneOf(['asc', 'desc']),
   /**
    * Years rendered per row.
    * @default 3

package/node/dateViewRenderers/dateViewRenderers.js

@@ -32,6 +32,7 @@ const renderDateViewCalendar = ({
   onMonthChange,
   monthsPerRow,
   onYearChange,
+  yearsOrder,
   yearsPerRow,
   slots,
   slotProps,
@@ -70,6 +71,7 @@ const renderDateViewCalendar = ({
   onMonthChange: onMonthChange,
   monthsPerRow: monthsPerRow,
   onYearChange: onYearChange,
+  yearsOrder: yearsOrder,
   yearsPerRow: yearsPerRow,
   slots: slots,
   slotProps: slotProps,

package/node/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "7.17.0",
+  "version": "7.18.0",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -31,7 +31,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/mui-x.git",
+    "url": "git+https://github.com/mui/mui-x.git",
     "directory": "packages/x-date-pickers"
   },
   "dependencies": {
@@ -41,14 +41,14 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "7.17.0"
+    "@mui/x-internals": "7.18.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14 || ^6.0.0",
     "@mui/system": "^5.15.14 || ^6.0.0",
-    "date-fns": "^2.25.0 || ^3.2.0",
+    "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
     "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0",
     "dayjs": "^1.10.7",
     "luxon": "^3.0.2",