@mui/x-date-pickers 7.16.0 → 7.18.0

package/DesktopDatePicker/DesktopDatePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -7,13 +9,13 @@ import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useDatePickerDefaultizedProps } from "../DatePicker/shared.js";
 import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
-import { validateDate } from "../internals/utils/validation/validateDate.js";
+import { validateDate, extractValidationProps } from "../validation/index.js";
 import { useDesktopPicker } from "../internals/hooks/useDesktopPicker/index.js";
 import { CalendarIcon } from "../icons/index.js";
 import { DateField } from "../DateField/index.js";
-import { extractValidationProps } from "../internals/utils/validation/extractValidationProps.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { resolveDateFormat } from "../internals/utils/date-utils.js";
+import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 /**
  * Demos:
  *
@@ -60,7 +62,12 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue,
+    getOpenDialogAriaText: buildGetOpenDialogAriaText({
+      utils,
+      formatKey: 'fullDate',
+      contextTranslation: translations.openDatePickerDialogue,
+      propsTranslation: props.localeText?.openDatePickerDialogue
+    }),
     validator: validateDate
   });
   return renderPicker();
@@ -365,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

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["openTo", "focusedView", "timeViewsCount"];
@@ -12,10 +14,9 @@ import { useDateTimePickerDefaultizedProps } from "../DateTimePicker/shared.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/dateViewRenderers.js";
 import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
-import { validateDateTime } from "../internals/utils/validation/validateDateTime.js";
+import { validateDateTime, extractValidationProps } from "../validation/index.js";
 import { CalendarIcon } from "../icons/index.js";
 import { useDesktopPicker } from "../internals/hooks/useDesktopPicker/index.js";
-import { extractValidationProps } from "../internals/utils/validation/extractValidationProps.js";
 import { resolveDateTimeFormat, resolveTimeViewsResponse } from "../internals/utils/date-time-utils.js";
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from "../MultiSectionDigitalClock/index.js";
@@ -24,6 +25,7 @@ import { DesktopDateTimePickerLayout } from "./DesktopDateTimePickerLayout.js";
 import { VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { isInternalTimeView } from "../internals/utils/time-utils.js";
 import { isDatePickerView } from "../internals/utils/date-utils.js";
+import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
   const {
@@ -146,7 +148,12 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue,
+    getOpenDialogAriaText: buildGetOpenDialogAriaText({
+      utils,
+      formatKey: 'fullDate',
+      contextTranslation: translations.openDatePickerDialogue,
+      propsTranslation: props.localeText?.openDatePickerDialogue
+    }),
     validator: validateDateTime,
     rendererInterceptor
   });
@@ -523,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/DesktopTimePicker/DesktopTimePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -8,13 +10,13 @@ import { TimeField } from "../TimeField/index.js";
 import { useTimePickerDefaultizedProps } from "../TimePicker/shared.js";
 import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
-import { validateTime } from "../internals/utils/validation/validateTime.js";
+import { extractValidationProps, validateTime } from "../validation/index.js";
 import { ClockIcon } from "../icons/index.js";
 import { useDesktopPicker } from "../internals/hooks/useDesktopPicker/index.js";
-import { extractValidationProps } from "../internals/utils/validation/extractValidationProps.js";
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
 import { resolveTimeFormat } from "../internals/utils/time-utils.js";
 import { resolveTimeViewsResponse } from "../internals/utils/date-time-utils.js";
+import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 /**
  * Demos:
  *
@@ -81,7 +83,12 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: props.localeText?.openTimePickerDialogue ?? translations.openTimePickerDialogue,
+    getOpenDialogAriaText: buildGetOpenDialogAriaText({
+      utils,
+      formatKey: 'fullTime',
+      contextTranslation: translations.openTimePickerDialogue,
+      propsTranslation: props.localeText?.openTimePickerDialogue
+    }),
     validator: validateTime
   });
   return renderPicker();

package/DigitalClock/DigitalClock.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["ampm", "timeStep", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "views", "skipDisabled", "timezone"];

package/LocalizationProvider/LocalizationProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["localeText"];

package/MobileDatePicker/MobileDatePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -7,12 +9,12 @@ import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
 import { useDatePickerDefaultizedProps } from "../DatePicker/shared.js";
 import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
-import { validateDate } from "../internals/utils/validation/validateDate.js";
+import { extractValidationProps, validateDate } from "../validation/index.js";
 import { DateField } from "../DateField/index.js";
-import { extractValidationProps } from "../internals/utils/validation/extractValidationProps.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { resolveDateFormat } from "../internals/utils/date-utils.js";
+import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 /**
  * Demos:
  *
@@ -57,7 +59,12 @@ const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue,
+    getOpenDialogAriaText: buildGetOpenDialogAriaText({
+      utils,
+      formatKey: 'fullDate',
+      contextTranslation: translations.openDatePickerDialogue,
+      propsTranslation: props.localeText?.openDatePickerDialogue
+    }),
     validator: validateDate
   });
   return renderPicker();
@@ -362,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

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -8,12 +10,12 @@ import { DateTimeField } from "../DateTimeField/index.js";
 import { useDateTimePickerDefaultizedProps } from "../DateTimePicker/shared.js";
 import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
-import { validateDateTime } from "../internals/utils/validation/validateDateTime.js";
+import { extractValidationProps, validateDateTime } from "../validation/index.js";
 import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
-import { extractValidationProps } from "../internals/utils/validation/extractValidationProps.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { renderTimeViewClock } from "../timeViewRenderers/index.js";
 import { resolveDateTimeFormat } from "../internals/utils/date-time-utils.js";
+import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 /**
  * Demos:
  *
@@ -67,7 +69,12 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? translations.openDatePickerDialogue,
+    getOpenDialogAriaText: buildGetOpenDialogAriaText({
+      utils,
+      formatKey: 'fullDate',
+      contextTranslation: translations.openDatePickerDialogue,
+      propsTranslation: props.localeText?.openDatePickerDialogue
+    }),
     validator: validateDateTime
   });
   return renderPicker();
@@ -421,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/MobileTimePicker/MobileTimePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -8,11 +10,11 @@ import { TimeField } from "../TimeField/index.js";
 import { useTimePickerDefaultizedProps } from "../TimePicker/shared.js";
 import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
-import { validateTime } from "../internals/utils/validation/validateTime.js";
+import { extractValidationProps, validateTime } from "../validation/index.js";
 import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
-import { extractValidationProps } from "../internals/utils/validation/extractValidationProps.js";
 import { renderTimeViewClock } from "../timeViewRenderers/index.js";
 import { resolveTimeFormat } from "../internals/utils/time-utils.js";
+import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 /**
  * Demos:
  *
@@ -60,7 +62,12 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: props.localeText?.openTimePickerDialogue ?? translations.openTimePickerDialogue,
+    getOpenDialogAriaText: buildGetOpenDialogAriaText({
+      utils,
+      formatKey: 'fullTime',
+      contextTranslation: translations.openTimePickerDialogue,
+      propsTranslation: props.localeText?.openTimePickerDialogue
+    }),
     validator: validateTime
   });
   return renderPicker();

package/MonthCalendar/MonthCalendar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];

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/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["ampm", "timeSteps", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "skipDisabled", "timezone"];

package/PickersActionBar/PickersActionBar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["onAccept", "onClear", "onCancel", "onSetToday", "actions"];

package/PickersCalendarHeader/PickersCalendarHeader.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone", "format"],

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/PickersDay/PickersDay.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["autoFocus", "className", "day", "disabled", "disableHighlightToday", "disableMargin", "hidden", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "outsideCurrentMonth", "selected", "showDaysOutsideCurrentMonth", "children", "today", "isFirstVisibleCell", "isLastVisibleCell"];

package/PickersLayout/PickersLayout.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

package/PickersLayout/usePickerLayout.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';

package/PickersSectionList/PickersSectionList.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "elements", "sectionListRef"];

package/PickersShortcuts/PickersShortcuts.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],

package/PickersTextField/PickersTextField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];

package/StaticDatePicker/StaticDatePicker.js

@@ -1,10 +1,12 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDatePickerDefaultizedProps } from "../DatePicker/shared.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { useStaticPicker } from "../internals/hooks/useStaticPicker/index.js";
-import { validateDate } from "../internals/utils/validation/validateDate.js";
+import { validateDate } from "../validation/index.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 /**
  * Demos:
@@ -291,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

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -6,7 +8,7 @@ import { renderTimeViewClock } from "../timeViewRenderers/index.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useStaticPicker } from "../internals/hooks/useStaticPicker/index.js";
-import { validateDateTime } from "../internals/utils/validation/validateDateTime.js";
+import { validateDateTime } from "../validation/index.js";
 /**
  * Demos:
  *
@@ -350,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/StaticTimePicker/StaticTimePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -5,7 +7,7 @@ import { useTimePickerDefaultizedProps } from "../TimePicker/shared.js";
 import { renderTimeViewClock } from "../timeViewRenderers/index.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useStaticPicker } from "../internals/hooks/useStaticPicker/index.js";
-import { validateTime } from "../internals/utils/validation/validateTime.js";
+import { validateTime } from "../validation/index.js";
 /**
  * Demos:
  *

package/TimeClock/Clock.js

@@ -308,7 +308,7 @@ export function Clock(inProps) {
         })]
       }), /*#__PURE__*/_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/TimeClock/TimeClock.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];

package/TimeField/TimeField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];

package/TimeField/TimeField.types.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import TextField from '@mui/material/TextField';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { MakeOptional } from '../internals/models/helpers';
+import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
 import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation';
-import { FieldSection, PickerValidDate, TimeValidationError, BuiltInFieldTextFieldProps } from '../models';
+import { FieldSection, PickerValidDate, TimeValidationError, BuiltInFieldTextFieldProps, BaseSingleInputFieldProps } from '../models';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
 export interface UseTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps, ExportedUseClearableFieldProps {
     /**
@@ -13,6 +13,11 @@ export interface UseTimeFieldProps<TDate extends PickerValidDate, TEnableAccessi
      */
     ampm?: boolean;
 }
+/**
+ * Props the field can receive when used inside a time picker.
+ * (`TimePicker`, `DesktopTimePicker` or `MobileTimePicker` component).
+ */
+export type TimeFieldInPickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> = DefaultizedProps<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | 'ampm' | keyof BaseTimeValidationProps> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, TimeValidationError>;
 export type UseTimeFieldComponentProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}> = Omit<TChildProps, keyof UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> & UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
 export type TimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = UseTimeFieldComponentProps<TDate, TEnableAccessibleFieldDOMStructure, BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**

package/TimeField/index.d.ts

@@ -1,3 +1,3 @@
 export { TimeField } from './TimeField';
 export { useTimeField as unstable_useTimeField } from './useTimeField';
-export type { UseTimeFieldProps, UseTimeFieldComponentProps, TimeFieldProps, } from './TimeField.types';
+export type { UseTimeFieldProps, UseTimeFieldComponentProps, TimeFieldProps, TimeFieldInPickerProps, } from './TimeField.types';

package/TimeField/useTimeField.d.ts

@@ -1,3 +1,3 @@
 import { UseTimeFieldProps } from './TimeField.types';
 import { PickerValidDate } from '../models';
-export declare const useTimeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals/hooks/useField").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, keyof UseTimeFieldProps<any, TEnableAccessibleFieldDOMStructure>>>;
+export declare const useTimeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals/hooks/useField").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "ampm" | "timezone" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "enableAccessibleFieldDOMStructure" | keyof import("../internals").BaseTimeValidationProps | keyof import("../internals").TimeValidationProps<any> | "dateSeparator">>;