@mui/x-date-pickers 7.16.0 → 7.18.0

package/node/MobileDatePicker/MobileDatePicker.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -15,12 +16,12 @@ var _useMobilePicker = require("../internals/hooks/useMobilePicker");
 var _shared = require("../DatePicker/shared");
 var _usePickersTranslations = require("../hooks/usePickersTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
-var _validateDate = require("../internals/utils/validation/validateDate");
+var _validation = require("../validation");
 var _DateField = require("../DateField");
-var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _dateViewRenderers = require("../dateViewRenderers");
 var _dateUtils = require("../internals/utils/date-utils");
+var _getPickersLocalization = require("../locales/utils/getPickersLocalization");
 /**
  * Demos:
  *
@@ -51,7 +52,7 @@ const MobileDatePicker = exports.MobileDatePicker = /*#__PURE__*/React.forwardRe
       field: _DateField.DateField
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
-      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _extractValidationProps.extractValidationProps)(defaultizedProps), {
+      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps), {
         ref
       }),
       toolbar: (0, _extends2.default)({
@@ -65,8 +66,13 @@ const MobileDatePicker = exports.MobileDatePicker = /*#__PURE__*/React.forwardRe
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue,
-    validator: _validateDate.validateDate
+    getOpenDialogAriaText: (0, _getPickersLocalization.buildGetOpenDialogAriaText)({
+      utils,
+      formatKey: 'fullDate',
+      contextTranslation: translations.openDatePickerDialogue,
+      propsTranslation: props.localeText?.openDatePickerDialogue
+    }),
+    validator: _validation.validateDate
   });
   return renderPicker();
 });
@@ -370,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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -16,12 +17,12 @@ var _DateTimeField = require("../DateTimeField");
 var _shared = require("../DateTimePicker/shared");
 var _usePickersTranslations = require("../hooks/usePickersTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
-var _validateDateTime = require("../internals/utils/validation/validateDateTime");
+var _validation = require("../validation");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
-var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _dateViewRenderers = require("../dateViewRenderers");
 var _timeViewRenderers = require("../timeViewRenderers");
 var _dateTimeUtils = require("../internals/utils/date-time-utils");
+var _getPickersLocalization = require("../locales/utils/getPickersLocalization");
 /**
  * Demos:
  *
@@ -57,7 +58,7 @@ const MobileDateTimePicker = exports.MobileDateTimePicker = /*#__PURE__*/React.f
       field: _DateTimeField.DateTimeField
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
-      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _extractValidationProps.extractValidationProps)(defaultizedProps), {
+      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps), {
         ref
       }),
       toolbar: (0, _extends2.default)({
@@ -75,8 +76,13 @@ const MobileDateTimePicker = exports.MobileDateTimePicker = /*#__PURE__*/React.f
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue,
-    validator: _validateDateTime.validateDateTime
+    getOpenDialogAriaText: (0, _getPickersLocalization.buildGetOpenDialogAriaText)({
+      utils,
+      formatKey: 'fullDate',
+      contextTranslation: translations.openDatePickerDialogue,
+      propsTranslation: props.localeText?.openDatePickerDialogue
+    }),
+    validator: _validation.validateDateTime
   });
   return renderPicker();
 });
@@ -429,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/MobileTimePicker/MobileTimePicker.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -16,11 +17,11 @@ var _TimeField = require("../TimeField");
 var _shared = require("../TimePicker/shared");
 var _usePickersTranslations = require("../hooks/usePickersTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
-var _validateTime = require("../internals/utils/validation/validateTime");
+var _validation = require("../validation");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
-var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _timeViewRenderers = require("../timeViewRenderers");
 var _timeUtils = require("../internals/utils/time-utils");
+var _getPickersLocalization = require("../locales/utils/getPickersLocalization");
 /**
  * Demos:
  *
@@ -53,7 +54,7 @@ const MobileTimePicker = exports.MobileTimePicker = /*#__PURE__*/React.forwardRe
       field: _TimeField.TimeField
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
-      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _extractValidationProps.extractValidationProps)(defaultizedProps), {
+      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps), {
         ref
       }),
       toolbar: (0, _extends2.default)({
@@ -68,8 +69,13 @@ const MobileTimePicker = exports.MobileTimePicker = /*#__PURE__*/React.forwardRe
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: props.localeText?.openTimePickerDialogue ?? translations.openTimePickerDialogue,
-    validator: _validateTime.validateTime
+    getOpenDialogAriaText: (0, _getPickersLocalization.buildGetOpenDialogAriaText)({
+      utils,
+      formatKey: 'fullTime',
+      contextTranslation: translations.openTimePickerDialogue,
+      propsTranslation: props.localeText?.openTimePickerDialogue
+    }),
+    validator: _validation.validateTime
   });
   return renderPicker();
 });

package/node/MonthCalendar/MonthCalendar.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/PickersActionBar/PickersActionBar.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/PickersCalendarHeader/PickersCalendarHeader.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/PickersDay/PickersDay.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/PickersLayout/PickersLayout.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/PickersLayout/usePickerLayout.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/node/PickersSectionList/PickersSectionList.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/PickersShortcuts/PickersShortcuts.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/PickersTextField/PickersTextField.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/StaticDatePicker/StaticDatePicker.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -12,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _shared = require("../DatePicker/shared");
 var _dateViewRenderers = require("../dateViewRenderers");
 var _useStaticPicker = require("../internals/hooks/useStaticPicker");
-var _validateDate = require("../internals/utils/validation/validateDate");
+var _validation = require("../validation");
 var _valueManagers = require("../internals/utils/valueManagers");
 /**
  * Demos:
@@ -50,7 +51,7 @@ const StaticDatePicker = exports.StaticDatePicker = /*#__PURE__*/React.forwardRe
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date',
-    validator: _validateDate.validateDate,
+    validator: _validation.validateDate,
     ref
   });
   return renderPicker();
@@ -299,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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -14,7 +15,7 @@ var _timeViewRenderers = require("../timeViewRenderers");
 var _dateViewRenderers = require("../dateViewRenderers");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useStaticPicker = require("../internals/hooks/useStaticPicker");
-var _validateDateTime = require("../internals/utils/validation/validateDateTime");
+var _validation = require("../validation");
 /**
  * Demos:
  *
@@ -60,7 +61,7 @@ const StaticDateTimePicker = exports.StaticDateTimePicker = /*#__PURE__*/React.f
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date-time',
-    validator: _validateDateTime.validateDateTime,
+    validator: _validation.validateDateTime,
     ref
   });
   return renderPicker();
@@ -358,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/StaticTimePicker/StaticTimePicker.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -13,7 +14,7 @@ var _shared = require("../TimePicker/shared");
 var _timeViewRenderers = require("../timeViewRenderers");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useStaticPicker = require("../internals/hooks/useStaticPicker");
-var _validateTime = require("../internals/utils/validation/validateTime");
+var _validation = require("../validation");
 /**
  * Demos:
  *
@@ -52,7 +53,7 @@ const StaticTimePicker = exports.StaticTimePicker = /*#__PURE__*/React.forwardRe
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'time',
-    validator: _validateTime.validateTime,
+    validator: _validation.validateTime,
     ref
   });
   return renderPicker();

package/node/TimeClock/Clock.js

@@ -316,7 +316,7 @@ function Clock(inProps) {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockWrapper, {
         "aria-activedescendant": selectedId,
-        "aria-label": translations.clockLabelText(type, value, utils),
+        "aria-label": translations.clockLabelText(type, value, utils, value == null ? null : utils.format(value, 'fullTime')),
         ref: listboxRef,
         role: "listbox",
         onKeyDown: handleKeyDown,

package/node/TimeClock/TimeClock.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/TimeField/TimeField.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/TimeField/useTimeField.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -6,21 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTimeField = void 0;
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useField = require("../internals/hooks/useField");
-var _validateTime = require("../internals/utils/validation/validateTime");
-var _fields = require("../internals/utils/fields");
+var _validation = require("../validation");
+var _hooks = require("../hooks");
 var _defaultizedFieldProps = require("../internals/hooks/defaultizedFieldProps");
 const useTimeField = inProps => {
   const props = (0, _defaultizedFieldProps.useDefaultizedTimeField)(inProps);
   const {
     forwardedProps,
     internalProps
-  } = (0, _fields.splitFieldInternalAndForwardedProps)(props, 'time');
+  } = (0, _hooks.useSplitFieldProps)(props, 'time');
   return (0, _useField.useField)({
     forwardedProps,
     internalProps,
     valueManager: _valueManagers.singleItemValueManager,
     fieldValueManager: _valueManagers.singleItemFieldValueManager,
-    validator: _validateTime.validateTime,
+    validator: _validation.validateTime,
     valueType: 'time'
   });
 };

package/node/TimePicker/TimePicker.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/TimePicker/TimePickerToolbar.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/YearCalendar/YearCalendar.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -23,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
@@ -94,6 +95,7 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
       onYearFocus,
       hasFocus,
       onFocusedViewChange,
+      yearsOrder = 'asc',
       yearsPerRow,
       timezone: timezoneProp,
       gridLabelId,
@@ -183,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:
@@ -236,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),
@@ -243,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);
@@ -364,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/hooks/index.js

@@ -15,5 +15,12 @@ Object.defineProperty(exports, "usePickersTranslations", {
     return _usePickersTranslations.usePickersTranslations;
   }
 });
+Object.defineProperty(exports, "useSplitFieldProps", {
+  enumerable: true,
+  get: function () {
+    return _useSplitFieldProps.useSplitFieldProps;
+  }
+});
 var _useClearableField = require("./useClearableField");
-var _usePickersTranslations = require("./usePickersTranslations");
+var _usePickersTranslations = require("./usePickersTranslations");
+var _useSplitFieldProps = require("./useSplitFieldProps");

package/node/hooks/useClearableField.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/hooks/usePickersTranslations.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/node/hooks/useSplitFieldProps.js

@@ -0,0 +1,51 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSplitFieldProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _extractValidationProps = require("../validation/extractValidationProps");
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator'];
+/**
+ * Split the props received by the field component into:
+ * - `internalProps` which are used by the various hooks called by the field component.
+ * - `forwardedProps` which are passed to the underlying component.
+ * Note that some forwarded props might be used by the hooks as well.
+ * For instance, hooks like `useDateField` need props like `autoFocus` to know how to behave.
+ * @template TProps, TValueType
+ * @param {TProps} props The props received by the field component.
+ * @param {TValueType} valueType The type of the field value ('date', 'time', or 'date-time').
+ */
+const useSplitFieldProps = (props, valueType) => {
+  return React.useMemo(() => {
+    const forwardedProps = (0, _extends2.default)({}, props);
+    const internalProps = {};
+    const extractProp = propName => {
+      if (forwardedProps.hasOwnProperty(propName)) {
+        // @ts-ignore
+        internalProps[propName] = forwardedProps[propName];
+        delete forwardedProps[propName];
+      }
+    };
+    SHARED_FIELD_INTERNAL_PROP_NAMES.forEach(extractProp);
+    if (valueType === 'date') {
+      _extractValidationProps.DATE_VALIDATION_PROP_NAMES.forEach(extractProp);
+    } else if (valueType === 'time') {
+      _extractValidationProps.TIME_VALIDATION_PROP_NAMES.forEach(extractProp);
+    } else if (valueType === 'date-time') {
+      _extractValidationProps.DATE_VALIDATION_PROP_NAMES.forEach(extractProp);
+      _extractValidationProps.TIME_VALIDATION_PROP_NAMES.forEach(extractProp);
+      _extractValidationProps.DATE_TIME_VALIDATION_PROP_NAMES.forEach(extractProp);
+    }
+    return {
+      forwardedProps,
+      internalProps
+    };
+  }, [props, valueType]);
+};
+exports.useSplitFieldProps = useSplitFieldProps;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.16.0
+ * @mui/x-date-pickers v7.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -451,4 +451,16 @@ Object.keys(_hooks).forEach(function (key) {
       return _hooks[key];
     }
   });
+});
+var _validation = require("./validation");
+Object.keys(_validation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _validation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _validation[key];
+    }
+  });
 });

package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -15,7 +15,6 @@ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _PickersPopper = require("../../components/PickersPopper");
-var _useUtils = require("../useUtils");
 var _usePicker = require("../usePicker");
 var _LocalizationProvider = require("../../../LocalizationProvider");
 var _PickersLayout = require("../../../PickersLayout");
@@ -55,7 +54,6 @@ const useDesktopPicker = _ref => {
     localeText,
     reduceAnimations
   } = props;
-  const utils = (0, _useUtils.useUtils)();
   const containerRef = React.useRef(null);
   const fieldRef = React.useRef(null);
   const labelId = (0, _useId.default)();
@@ -97,7 +95,7 @@ const useDesktopPicker = _ref => {
       additionalProps: {
         disabled: disabled || readOnly,
         onClick: open ? actions.onClose : actions.onOpen,
-        'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils),
+        'aria-label': getOpenDialogAriaText(pickerFieldProps.value),
         edge: inputAdornmentProps.position
       },
       ownerState: props