@mui/x-date-pickers 8.0.0-beta.2 → 8.0.0-beta.3

package/esm/locales/roRO.d.ts

@@ -23,6 +23,7 @@ export declare const roRO: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/roRO.js

@@ -26,6 +26,7 @@ const roROPickers = {
   clearButtonLabel: 'Ștergere',
   okButtonLabel: 'OK',
   todayButtonLabel: 'Astăzi',
+  nextStepButtonLabel: 'Următoare',
   // Toolbar titles
   datePickerToolbarTitle: 'Selectați data',
   dateTimePickerToolbarTitle: 'Selectați data și ora',

package/esm/locales/ruRU.d.ts

@@ -23,6 +23,7 @@ export declare const ruRU: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/ruRU.js

@@ -26,6 +26,7 @@ const ruRUPickers = {
   clearButtonLabel: 'Очистить',
   okButtonLabel: 'Ок',
   todayButtonLabel: 'Сегодня',
+  nextStepButtonLabel: 'Следующий',
   // Toolbar titles
   datePickerToolbarTitle: 'Выбрать дату',
   dateTimePickerToolbarTitle: 'Выбрать дату и время',

package/esm/locales/skSK.d.ts

@@ -23,6 +23,7 @@ export declare const skSK: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/skSK.js

@@ -27,6 +27,7 @@ const skSKPickers = {
   clearButtonLabel: 'Vymazať',
   okButtonLabel: 'Potvrdiť',
   todayButtonLabel: 'Dnes',
+  nextStepButtonLabel: 'Predchádzajúci',
   // Toolbar titles
   datePickerToolbarTitle: 'Vyberte dátum',
   dateTimePickerToolbarTitle: 'Vyberte dátum a čas',

package/esm/locales/svSE.d.ts

@@ -23,6 +23,7 @@ export declare const svSE: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/svSE.js

@@ -25,6 +25,7 @@ const svSEPickers = {
   clearButtonLabel: 'Rensa',
   okButtonLabel: 'OK',
   todayButtonLabel: 'Idag',
+  nextStepButtonLabel: 'Nästa',
   // Toolbar titles
   datePickerToolbarTitle: 'Välj datum',
   dateTimePickerToolbarTitle: 'Välj datum & tid',

package/esm/locales/trTR.d.ts

@@ -23,6 +23,7 @@ export declare const trTR: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/trTR.js

@@ -26,6 +26,7 @@ const trTRPickers = {
   clearButtonLabel: 'Temizle',
   okButtonLabel: 'Tamam',
   todayButtonLabel: 'Bugün',
+  nextStepButtonLabel: 'Sonraki',
   // Toolbar titles
   datePickerToolbarTitle: 'Tarih Seç',
   dateTimePickerToolbarTitle: 'Tarih & Saat seç',

package/esm/locales/ukUA.d.ts

@@ -23,6 +23,7 @@ export declare const ukUA: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/ukUA.js

@@ -25,6 +25,7 @@ const ukUAPickers = {
   clearButtonLabel: 'Очистити',
   okButtonLabel: 'OK',
   todayButtonLabel: 'Сьогодні',
+  nextStepButtonLabel: 'Наступний',
   // Toolbar titles
   datePickerToolbarTitle: 'Вибрати дату',
   dateTimePickerToolbarTitle: 'Вибрати дату і час',

package/esm/locales/urPK.d.ts

@@ -23,6 +23,7 @@ export declare const urPK: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/urPK.js

@@ -26,6 +26,7 @@ const urPKPickers = {
   clearButtonLabel: 'کلئیر',
   okButtonLabel: 'اوکے',
   todayButtonLabel: 'آج',
+  nextStepButtonLabel: 'مہینہ',
   // Toolbar titles
   datePickerToolbarTitle: 'تاریخ منتخب کریں',
   dateTimePickerToolbarTitle: 'تاریخ اور وقت منتخب کریں',

package/esm/locales/utils/getPickersLocalization.d.ts

@@ -23,6 +23,7 @@ export declare const getPickersLocalization: (pickersTranslations: Partial<Picke
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/utils/pickersLocaleTextApi.d.ts

@@ -47,6 +47,7 @@ export interface PickersComponentAgnosticLocaleText {
   clearButtonLabel: string;
   okButtonLabel: string;
   todayButtonLabel: string;
+  nextStepButtonLabel: string;
   clockLabelText: (view: TimeView, formattedTime: string | null) => string;
   hoursClockNumberText: (hours: string) => string;
   minutesClockNumberText: (minutes: string) => string;

package/esm/locales/viVN.d.ts

@@ -23,6 +23,7 @@ export declare const viVN: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/viVN.js

@@ -25,6 +25,7 @@ const viVNPickers = {
   clearButtonLabel: 'Xóa',
   okButtonLabel: 'OK',
   todayButtonLabel: 'Hôm nay',
+  nextStepButtonLabel: 'Sau',
   // Toolbar titles
   datePickerToolbarTitle: 'Chọn ngày',
   dateTimePickerToolbarTitle: 'Chọn ngày và giờ',

package/esm/locales/zhCN.d.ts

@@ -23,6 +23,7 @@ export declare const zhCN: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/zhCN.js

@@ -25,6 +25,7 @@ const zhCNPickers = {
   clearButtonLabel: '清除',
   okButtonLabel: '确认',
   todayButtonLabel: '今天',
+  nextStepButtonLabel: '下个',
   // Toolbar titles
   datePickerToolbarTitle: '选择日期',
   dateTimePickerToolbarTitle: '选择日期和时间',

package/esm/locales/zhHK.d.ts

@@ -23,6 +23,7 @@ export declare const zhHK: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/zhHK.js

@@ -25,6 +25,7 @@ const zhHKPickers = {
   clearButtonLabel: '清除',
   okButtonLabel: '確認',
   todayButtonLabel: '今日',
+  nextStepButtonLabel: '下個',
   // Toolbar titles
   datePickerToolbarTitle: '選擇日期',
   dateTimePickerToolbarTitle: '選擇日期和時間',

package/esm/locales/zhTW.d.ts

@@ -23,6 +23,7 @@ export declare const zhTW: {
           clearButtonLabel?: string | undefined;
           okButtonLabel?: string | undefined;
           todayButtonLabel?: string | undefined;
+          nextStepButtonLabel?: string | undefined;
           clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
           hoursClockNumberText?: ((hours: string) => string) | undefined;
           minutesClockNumberText?: ((minutes: string) => string) | undefined;

package/esm/locales/zhTW.js

@@ -25,6 +25,7 @@ const zhTWPickers = {
   clearButtonLabel: '清除',
   okButtonLabel: '確認',
   todayButtonLabel: '今天',
+  nextStepButtonLabel: '下個',
   // Toolbar titles
   datePickerToolbarTitle: '選擇日期',
   dateTimePickerToolbarTitle: '選擇日期和時間',

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-beta.2
+ * @mui/x-date-pickers v8.0.0-beta.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickerProvider.d.ts

@@ -109,6 +109,10 @@ export interface PickerContextValue<TValue extends PickerValidValue, TView exten
    * If it is "enabled", the field should render an interactive UI to open the Picker.
    */
   triggerStatus: 'hidden' | 'disabled' | 'enabled';
+  /**
+   * Whether the Picker has any value picking steps left.
+   */
+  hasNextStep: boolean;
   /**
    * The ref to attach to the popup's outermost element that contains the view, if any.
    * When using a built-in popup component, this property is automatically attached to the appropriate element.
@@ -203,6 +207,11 @@ export interface PickerActionsContextValue<TValue extends PickerValidValue, TVie
    * The value will be reset to the last accepted value.
    */
   cancelValueChanges: () => void;
+  /**
+   * Go to the next step in the value picking process.
+   * For example, on the Mobile Date Time Picker, if the user is editing the date, it will switch to editing the time.
+   */
+  goToNextStep: () => void;
 }
 export interface SetValueActionOptions<TError = string | null> {
   /**

package/internals/hooks/useDesktopPicker/useDesktopPicker.d.ts

@@ -9,6 +9,7 @@ import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
  */
 export declare const useDesktopPicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
   props,
+  steps,
   ...pickerParams
 }: UseDesktopPickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
   renderPicker: () => React.JSX.Element;

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -15,8 +15,9 @@ var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
 var _PickerProvider = require("../../components/PickerProvider");
 var _PickerFieldUI = require("../../components/PickerFieldUI");
+var _createNonRangePickerStepNavigation = require("../../utils/createNonRangePickerStepNavigation");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["props"],
+const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
 /**
  * Hook managing all the single-date desktop pickers:
@@ -26,7 +27,8 @@ const _excluded = ["props"],
  */
 const useDesktopPicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
@@ -36,6 +38,9 @@ const useDesktopPicker = _ref => {
     inputRef,
     localeText
   } = props;
+  const getStepNavigation = (0, _createNonRangePickerStepNavigation.createNonRangePickerStepNavigation)({
+    steps
+  });
   const {
     providerProps,
     renderCurrentView,
@@ -45,7 +50,8 @@ const useDesktopPicker = _ref => {
     localeText,
     autoFocusView: true,
     viewContainerRole: 'dialog',
-    variant: 'desktop'
+    variant: 'desktop',
+    getStepNavigation
   }));
   const labelId = providerProps.privateContextValue.labelId;
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;

package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts

@@ -7,6 +7,7 @@ import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
 import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
 import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
+import { PickerStep } from "../../utils/createNonRangePickerStepNavigation.js";
 export interface UseDesktopPickerSlots extends Pick<PickerPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
   /**
    * Component used to enter the date with the keyboard.
@@ -38,4 +39,10 @@ export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem,
 }
 export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
   props: TExternalProps;
+  /**
+   * Steps available for the picker.
+   * This will be used to define the behavior of navigation actions.
+   * If null, the picker will not have any step navigation.
+   */
+  steps: PickerStep[] | null;
 }

package/internals/hooks/useField/buildSectionsFromFormat.js

@@ -128,7 +128,7 @@ const createSection = ({
       maxLength = sectionValue === '' ? utils.formatByString(now, token).length : sectionValue.length;
     } else {
       if (sectionConfig.maxLength == null) {
-        throw new Error(`MUI X: The token ${token} should have a 'maxDigitNumber' property on it's adapter`);
+        throw new Error(`MUI X: The token ${token} should have a 'maxLength' property on it's adapter`);
       }
       maxLength = sectionConfig.maxLength;
       if (isValidDate) {

package/internals/hooks/useMobilePicker/useMobilePicker.d.ts

@@ -9,6 +9,7 @@ import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
  */
 export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
   props,
+  steps,
   ...pickerParams
 }: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
   renderPicker: () => React.JSX.Element;

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -15,8 +15,9 @@ var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
 var _PickerProvider = require("../../components/PickerProvider");
 var _PickerFieldUI = require("../../components/PickerFieldUI");
+var _createNonRangePickerStepNavigation = require("../../utils/createNonRangePickerStepNavigation");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["props"],
+const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
 /**
  * Hook managing all the single-date mobile pickers:
@@ -26,7 +27,8 @@ const _excluded = ["props"],
  */
 const useMobilePicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
@@ -36,6 +38,9 @@ const useMobilePicker = _ref => {
     inputRef,
     localeText
   } = props;
+  const getStepNavigation = (0, _createNonRangePickerStepNavigation.createNonRangePickerStepNavigation)({
+    steps
+  });
   const {
     providerProps,
     renderCurrentView,
@@ -45,7 +50,8 @@ const useMobilePicker = _ref => {
     localeText,
     autoFocusView: true,
     viewContainerRole: 'dialog',
-    variant: 'mobile'
+    variant: 'mobile',
+    getStepNavigation
   }));
   const labelId = providerProps.privateContextValue.labelId;
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;

package/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts

@@ -7,6 +7,7 @@ import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
 import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
 import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
+import { PickerStep } from "../../utils/createNonRangePickerStepNavigation.js";
 export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
   /**
    * Component used to enter the date with the keyboard.
@@ -32,4 +33,10 @@ export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem,
 }
 export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
   props: TExternalProps;
+  /**
+   * Steps available for the picker.
+   * This will be used to define the behavior of navigation actions.
+   * If null, the picker will not have any step navigation.
+   */
+  steps: PickerStep[] | null;
 }

package/internals/hooks/usePicker/usePicker.d.ts

@@ -10,5 +10,6 @@ export declare const usePicker: <TValue extends PickerValidValue, TView extends
   autoFocusView,
   rendererInterceptor: RendererInterceptor,
   localeText,
-  viewContainerRole
+  viewContainerRole,
+  getStepNavigation
 }: UsePickerParameters<TValue, TView, TExternalProps>) => UsePickerReturnValue<TValue>;

package/internals/hooks/usePicker/usePicker.js

@@ -31,7 +31,8 @@ const usePicker = ({
   autoFocusView,
   rendererInterceptor: RendererInterceptor,
   localeText,
-  viewContainerRole
+  viewContainerRole,
+  getStepNavigation
 }) => {
   const {
     // View props
@@ -198,6 +199,13 @@ const usePicker = ({
     }
     return 'enabled';
   }, [disableOpenPicker, hasUIView, disabled, readOnly]);
+  const stepNavigation = getStepNavigation({
+    setView,
+    view,
+    initialView: initialView ?? views[0],
+    views
+  });
+  const wrappedGoToNextStep = (0, _useEventCallback.default)(stepNavigation.goToNextStep);
   const actionsContextValue = React.useMemo(() => ({
     setValue,
     setOpen,
@@ -205,8 +213,9 @@ const usePicker = ({
     setValueToToday,
     acceptValueChanges,
     cancelValueChanges,
-    setView
-  }), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges, setView]);
+    setView,
+    goToNextStep: wrappedGoToNextStep
+  }), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges, setView, wrappedGoToNextStep]);
   const contextValue = React.useMemo(() => (0, _extends2.default)({}, actionsContextValue, {
     value,
     timezone,
@@ -223,13 +232,14 @@ const usePicker = ({
     reduceAnimations,
     triggerRef,
     triggerStatus,
+    hasNextStep: stepNavigation.hasNextStep,
     fieldFormat: format ?? '',
     name,
     label,
     rootSx: sx,
     rootRef,
     rootClassName: className
-  }), [actionsContextValue, value, rootRef, variant, orientation, reduceAnimations, disabled, readOnly, format, className, name, label, sx, triggerStatus, timezone, state.open, popperView, views, initialView, autoFocus]);
+  }), [actionsContextValue, value, rootRef, variant, orientation, reduceAnimations, disabled, readOnly, format, className, name, label, sx, triggerStatus, stepNavigation.hasNextStep, timezone, state.open, popperView, views, initialView, autoFocus]);
   const privateContextValue = React.useMemo(() => ({
     dismissViews,
     ownerState,

package/internals/hooks/usePicker/usePicker.types.d.ts

@@ -7,6 +7,7 @@ import { UseViewsOptions } from "../useViews.js";
 import { PickerProviderProps } from "../../components/PickerProvider.js";
 import { PickersInputLocaleText } from "../../../locales/index.js";
 import { PickerFieldPrivateContextValue } from "../useNullableFieldPrivateContext.js";
+import { CreateStepNavigationReturnValue } from "../../utils/createStepNavigation.js";
 /**
  * Props common to all Picker headless implementations.
  * Those props are exposed on all the Pickers.
@@ -130,6 +131,7 @@ export interface UsePickerParameters<TValue extends PickerValidValue, TView exte
    */
   rendererInterceptor?: React.JSXElementConstructor<PickerRendererInterceptorProps<TValue, TView, TExternalProps>>;
   props: TExternalProps;
+  getStepNavigation: CreateStepNavigationReturnValue;
 }
 export interface UsePickerReturnValue<TValue extends PickerValidValue> {
   ownerState: PickerOwnerState;

package/internals/hooks/useStaticPicker/useStaticPicker.d.ts

@@ -9,6 +9,7 @@ import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
  */
 export declare const useStaticPicker: <TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TView, any, TExternalProps>>({
   props,
+  steps,
   ...pickerParams
 }: UseStaticPickerParams<TView, TExternalProps>) => {
   renderPicker: () => React.JSX.Element;

package/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -16,8 +16,9 @@ var _PickerProvider = require("../../components/PickerProvider");
 var _PickersLayout = require("../../../PickersLayout");
 var _dimensions = require("../../constants/dimensions");
 var _utils = require("../../utils/utils");
+var _createNonRangePickerStepNavigation = require("../../utils/createNonRangePickerStepNavigation");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["props"];
+const _excluded = ["props", "steps"];
 const PickerStaticLayout = (0, _styles.styled)(_PickersLayout.PickersLayout)(({
   theme
 }) => ({
@@ -34,7 +35,8 @@ const PickerStaticLayout = (0, _styles.styled)(_PickersLayout.PickersLayout)(({
  */
 const useStaticPicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
@@ -44,6 +46,9 @@ const useStaticPicker = _ref => {
     displayStaticWrapperAs,
     autoFocus
   } = props;
+  const getStepNavigation = (0, _createNonRangePickerStepNavigation.createNonRangePickerStepNavigation)({
+    steps
+  });
   const {
     providerProps,
     renderCurrentView
@@ -52,7 +57,8 @@ const useStaticPicker = _ref => {
     variant: displayStaticWrapperAs,
     autoFocusView: autoFocus ?? false,
     viewContainerRole: null,
-    localeText
+    localeText,
+    getStepNavigation
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {

package/internals/hooks/useStaticPicker/useStaticPicker.types.d.ts

@@ -2,6 +2,7 @@ import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from "../.
 import { BasePickerProps } from "../../models/props/basePickerProps.js";
 import { UsePickerParameters, UsePickerProps } from "../usePicker/index.js";
 import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
+import { PickerStep } from "../../utils/createNonRangePickerStepNavigation.js";
 export interface UseStaticPickerSlots extends ExportedPickersLayoutSlots<PickerValue> {}
 export interface UseStaticPickerSlotProps extends ExportedPickersLayoutSlotProps<PickerValue> {}
 export interface StaticOnlyPickerProps {
@@ -36,4 +37,10 @@ export interface UseStaticPickerProps<TView extends DateOrTimeViewWithMeridiem,
 }
 export interface UseStaticPickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
   props: TExternalProps;
+  /**
+   * Steps available for the picker.
+   * This will be used to define the behavior of navigation actions.
+   * If null, the picker will not have any step navigation.
+   */
+  steps: PickerStep[] | null;
 }

package/internals/index.d.ts

@@ -53,9 +53,10 @@ export type { FormProps } from './models/formProps';
 export type { PickerVariant, TimeViewWithMeridiem, DateOrTimeViewWithMeridiem } from './models/common';
 export type { BaseDateValidationProps, BaseTimeValidationProps, TimeValidationProps, MonthValidationProps, YearValidationProps, DayValidationProps, DateTimeValidationProps } from './models/validation';
 export type { PickerValue, PickerRangeValue, PickerNonNullableRangeValue, InferNonNullablePickerValue, PickerValidValue } from './models/value';
-export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem } from "./utils/date-utils.js";
+export { createStepNavigation } from "./utils/createStepNavigation.js";
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem, DATE_VIEWS } from "./utils/date-utils.js";
 export { getDefaultReferenceDate } from "./utils/getDefaultReferenceDate.js";
-export { isTimeView, isInternalTimeView, resolveTimeFormat, getMeridiem } from "./utils/time-utils.js";
+export { isTimeView, isInternalTimeView, resolveTimeFormat, getMeridiem, TIME_VIEWS } from "./utils/time-utils.js";
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-time-utils.js";
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.js";
 export { useReduceAnimations } from "./hooks/useReduceAnimations.js";

package/internals/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DATE_VIEWS", {
+  enumerable: true,
+  get: function () {
+    return _dateUtils.DATE_VIEWS;
+  }
+});
 Object.defineProperty(exports, "DAY_MARGIN", {
   enumerable: true,
   get: function () {
@@ -99,6 +105,12 @@ Object.defineProperty(exports, "PickersToolbarText", {
     return _PickersToolbarText.PickersToolbarText;
   }
 });
+Object.defineProperty(exports, "TIME_VIEWS", {
+  enumerable: true,
+  get: function () {
+    return _timeUtils.TIME_VIEWS;
+  }
+});
 Object.defineProperty(exports, "VIEW_HEIGHT", {
   enumerable: true,
   get: function () {
@@ -141,6 +153,12 @@ Object.defineProperty(exports, "createDateStrForV7HiddenInputFromSections", {
     return _useField.createDateStrForV7HiddenInputFromSections;
   }
 });
+Object.defineProperty(exports, "createStepNavigation", {
+  enumerable: true,
+  get: function () {
+    return _createStepNavigation.createStepNavigation;
+  }
+});
 Object.defineProperty(exports, "executeInTheNextEventLoopTick", {
   enumerable: true,
   get: function () {
@@ -436,6 +454,7 @@ var _useToolbarOwnerState = require("./hooks/useToolbarOwnerState");
 var _useUtils = require("./hooks/useUtils");
 var _useViews = require("./hooks/useViews");
 var _dateHelpersHooks = require("./hooks/date-helpers-hooks");
+var _createStepNavigation = require("./utils/createStepNavigation");
 var _dateUtils = require("./utils/date-utils");
 var _getDefaultReferenceDate = require("./utils/getDefaultReferenceDate");
 var _timeUtils = require("./utils/time-utils");

package/internals/utils/createNonRangePickerStepNavigation.d.ts

@@ -0,0 +1,13 @@
+import { DateOrTimeViewWithMeridiem } from "../models/common.js";
+export declare function createNonRangePickerStepNavigation(parameters: CreateNonRangePickerStepNavigationParameters): import("./createStepNavigation").CreateStepNavigationReturnValue;
+export interface PickerStep {
+  /**
+   * The views that are handled inside this step.
+   * If null, all views are handled by this step.
+   */
+  views: readonly DateOrTimeViewWithMeridiem[] | null;
+}
+interface CreateNonRangePickerStepNavigationParameters {
+  steps: PickerStep[] | null;
+}
+export {};