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

package/esm/MobileDateTimePicker/MobileDateTimePicker.js

@@ -18,6 +18,13 @@ import { DIALOG_WIDTH, VIEW_HEIGHT } from "../internals/constants/dimensions.js"
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from "../MultiSectionDigitalClock/index.js";
 import { mergeSx } from "../internals/utils/utils.js";
 import { digitalClockClasses } from "../DigitalClock/index.js";
+import { EXPORTED_TIME_VIEWS } from "../internals/utils/time-utils.js";
+import { DATE_VIEWS } from "../internals/utils/date-utils.js";
+const STEPS = [{
+  views: DATE_VIEWS
+}, {
+  views: EXPORTED_TIME_VIEWS
+}];
 /**
  * Demos:
  *
@@ -98,7 +105,8 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    validator: validateDateTime
+    validator: validateDateTime,
+    steps: STEPS
   });
   return renderPicker();
 });

package/esm/MobileTimePicker/MobileTimePicker.js

@@ -58,7 +58,8 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    validator: validateTime
+    validator: validateTime,
+    steps: null
   });
   return renderPicker();
 });

package/esm/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -33,6 +33,7 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   width: 56,
   padding: 0,
   overflow: 'hidden',
+  scrollbarWidth: 'thin',
   '@media (prefers-reduced-motion: no-preference)': {
     scrollBehavior: 'auto'
   },

package/esm/PickersActionBar/PickersActionBar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DialogActionsProps } from '@mui/material/DialogActions';
-export type PickersActionBarAction = 'clear' | 'cancel' | 'accept' | 'today';
+export type PickersActionBarAction = 'clear' | 'cancel' | 'accept' | 'today' | 'next' | 'nextOrAccept';
 export interface PickersActionBarProps extends DialogActionsProps {
   /**
    * Ordered array of actions to display.

package/esm/PickersActionBar/PickersActionBar.js

@@ -9,7 +9,7 @@ import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
-import { usePickerActionsContext } from "../hooks/index.js";
+import { usePickerContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersActionBarRoot = styled(DialogActions, {
   name: 'MuiPickersLayout',
@@ -37,8 +37,10 @@ function PickersActionBarComponent(props) {
     clearValue,
     setValueToToday,
     acceptValueChanges,
-    cancelValueChanges
-  } = usePickerActionsContext();
+    cancelValueChanges,
+    goToNextStep,
+    hasNextStep
+  } = usePickerContext();
   if (actions == null || actions.length === 0) {
     return null;
   }
@@ -64,6 +66,22 @@ function PickersActionBarComponent(props) {
           onClick: setValueToToday,
           children: translations.todayButtonLabel
         }, actionType);
+      case 'next':
+        return /*#__PURE__*/_jsx(Button, {
+          onClick: goToNextStep,
+          children: translations.nextStepButtonLabel
+        }, actionType);
+      case 'nextOrAccept':
+        if (hasNextStep) {
+          return /*#__PURE__*/_jsx(Button, {
+            onClick: goToNextStep,
+            children: translations.nextStepButtonLabel
+          }, actionType);
+        }
+        return /*#__PURE__*/_jsx(Button, {
+          onClick: acceptValueChanges,
+          children: translations.okButtonLabel
+        }, actionType);
       default:
         return null;
     }
@@ -84,7 +102,7 @@ process.env.NODE_ENV !== "production" ? PickersActionBarComponent.propTypes = {
    * - `[]` for Desktop Date Picker and Desktop Date Range Picker
    * - `['cancel', 'accept']` for all other Pickers
    */
-  actions: PropTypes.arrayOf(PropTypes.oneOf(['accept', 'cancel', 'clear', 'today']).isRequired),
+  actions: PropTypes.arrayOf(PropTypes.oneOf(['accept', 'cancel', 'clear', 'next', 'nextOrAccept', 'today']).isRequired),
   /**
    * If `true`, the actions do not have additional margin.
    * @default false

package/esm/StaticDatePicker/StaticDatePicker.js

@@ -45,7 +45,8 @@ const StaticDatePicker = /*#__PURE__*/React.forwardRef(function StaticDatePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    validator: validateDate
+    validator: validateDate,
+    steps: null
   });
   return renderPicker();
 });

package/esm/StaticDateTimePicker/StaticDateTimePicker.js

@@ -13,6 +13,13 @@ import { mergeSx } from "../internals/utils/utils.js";
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from "../MultiSectionDigitalClock/index.js";
 import { DIALOG_WIDTH, VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { digitalClockClasses } from "../DigitalClock/index.js";
+import { DATE_VIEWS } from "../internals/utils/date-utils.js";
+import { EXPORTED_TIME_VIEWS } from "../internals/utils/time-utils.js";
+const STEPS = [{
+  views: DATE_VIEWS
+}, {
+  views: EXPORTED_TIME_VIEWS
+}];
 /**
  * Demos:
  *
@@ -87,7 +94,8 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    validator: validateDateTime
+    validator: validateDateTime,
+    steps: STEPS
   });
   return renderPicker();
 });

package/esm/StaticTimePicker/StaticTimePicker.js

@@ -47,7 +47,8 @@ const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    validator: validateTime
+    validator: validateTime,
+    steps: null
   });
   return renderPicker();
 });

package/esm/TimeField/TimeField.js

@@ -123,7 +123,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Props applied to the [`FormHelperText`](https://mui.com/material-ui/api/form-helper-text/) element.
-   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FormHelperTextProps: PropTypes.object,
   /**
@@ -150,12 +150,12 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   /**
    * Props applied to the [`InputLabel`](https://mui.com/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
-   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps: PropTypes.object,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
-   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: PropTypes.object,
   /**
@@ -163,7 +163,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * It will be a [`FilledInput`](https://mui.com/material-ui/api/filled-input/),
    * [`OutlinedInput`](https://mui.com/material-ui/api/outlined-input/) or [`Input`](https://mui.com/material-ui/api/input/)
    * component depending on the `variant` prop value.
-   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: PropTypes.object,
   /**

package/esm/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/esm/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/esm/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/esm/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props"],
+const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -9,6 +9,7 @@ import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { PickerProvider } from "../../components/PickerProvider.js";
 import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
+import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.js";
 
 /**
  * Hook managing all the single-date desktop pickers:
@@ -19,7 +20,8 @@ import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js"
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useDesktopPicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
@@ -29,6 +31,9 @@ export const useDesktopPicker = _ref => {
     inputRef,
     localeText
   } = props;
+  const getStepNavigation = createNonRangePickerStepNavigation({
+    steps
+  });
   const {
     providerProps,
     renderCurrentView,
@@ -38,7 +43,8 @@ export 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/esm/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/esm/internals/hooks/useField/buildSectionsFromFormat.js

@@ -121,7 +121,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/esm/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/esm/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props"],
+const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -9,6 +9,7 @@ import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { PickerProvider } from "../../components/PickerProvider.js";
 import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
+import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.js";
 
 /**
  * Hook managing all the single-date mobile pickers:
@@ -19,7 +20,8 @@ import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js"
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useMobilePicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
@@ -29,6 +31,9 @@ export const useMobilePicker = _ref => {
     inputRef,
     localeText
   } = props;
+  const getStepNavigation = createNonRangePickerStepNavigation({
+    steps
+  });
   const {
     providerProps,
     renderCurrentView,
@@ -38,7 +43,8 @@ export 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/esm/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/esm/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/esm/internals/hooks/usePicker/usePicker.js

@@ -23,7 +23,8 @@ export const usePicker = ({
   autoFocusView,
   rendererInterceptor: RendererInterceptor,
   localeText,
-  viewContainerRole
+  viewContainerRole,
+  getStepNavigation
 }) => {
   const {
     // View props
@@ -190,6 +191,13 @@ export const usePicker = ({
     }
     return 'enabled';
   }, [disableOpenPicker, hasUIView, disabled, readOnly]);
+  const stepNavigation = getStepNavigation({
+    setView,
+    view,
+    initialView: initialView ?? views[0],
+    views
+  });
+  const wrappedGoToNextStep = useEventCallback(stepNavigation.goToNextStep);
   const actionsContextValue = React.useMemo(() => ({
     setValue,
     setOpen,
@@ -197,8 +205,9 @@ export 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(() => _extends({}, actionsContextValue, {
     value,
     timezone,
@@ -215,13 +224,14 @@ export 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/esm/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/esm/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/esm/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props"];
+const _excluded = ["props", "steps"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
@@ -9,6 +9,7 @@ import { PickerProvider } from "../../components/PickerProvider.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { DIALOG_WIDTH } from "../../constants/dimensions.js";
 import { mergeSx } from "../../utils/utils.js";
+import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickerStaticLayout = styled(PickersLayout)(({
   theme
@@ -26,7 +27,8 @@ const PickerStaticLayout = styled(PickersLayout)(({
  */
 export const useStaticPicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
@@ -36,6 +38,9 @@ export const useStaticPicker = _ref => {
     displayStaticWrapperAs,
     autoFocus
   } = props;
+  const getStepNavigation = createNonRangePickerStepNavigation({
+    steps
+  });
   const {
     providerProps,
     renderCurrentView
@@ -44,7 +49,8 @@ export const useStaticPicker = _ref => {
     variant: displayStaticWrapperAs,
     autoFocusView: autoFocus ?? false,
     viewContainerRole: null,
-    localeText
+    localeText,
+    getStepNavigation
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {

package/esm/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/esm/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/esm/internals/index.js

@@ -23,9 +23,10 @@ export { useToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
 export { useLocalizationContext, useDefaultDates, useUtils, useNow } from "./hooks/useUtils.js";
 export { useViews } from "./hooks/useViews.js";
 export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";
-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/esm/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 {};

package/esm/internals/utils/createNonRangePickerStepNavigation.js

@@ -0,0 +1,24 @@
+import { createStepNavigation } from "./createStepNavigation.js";
+export function createNonRangePickerStepNavigation(parameters) {
+  const {
+    steps
+  } = parameters;
+  return createStepNavigation({
+    steps,
+    isCurrentViewMatchingStep: (view, step) => {
+      return step.views == null || step.views.includes(view);
+    },
+    onStepChange: ({
+      step,
+      initialView,
+      setView,
+      view,
+      views
+    }) => {
+      const targetView = step.views == null ? initialView : step.views.find(viewBis => views.includes(viewBis));
+      if (targetView !== view) {
+        setView(targetView);
+      }
+    }
+  });
+}

package/esm/internals/utils/createStepNavigation.d.ts

@@ -0,0 +1,32 @@
+import { DateOrTimeViewWithMeridiem } from "../models/index.js";
+/**
+ * Create an object that determines whether there is a next step and allows to go to the next step.
+ * @param {CreateStepNavigationParameters<TStep>} parameters The parameters of the createStepNavigation function
+ * @returns {CreateStepNavigationReturnValue} The return value of the createStepNavigation function
+ */
+export declare function createStepNavigation<TStep extends {}>(parameters: CreateStepNavigationParameters<TStep>): CreateStepNavigationReturnValue;
+interface CreateStepNavigationParameters<TStep extends {}> {
+  steps: TStep[] | null;
+  isCurrentViewMatchingStep: (view: DateOrTimeViewWithMeridiem, step: TStep) => boolean;
+  onStepChange: (parameters: UseRangePickerStepNavigationOnStepChangeParameters<TStep>) => void;
+}
+export type CreateStepNavigationReturnValue = (parameters: CreateStepNavigationReturnValueParameters) => {
+  /**
+   * Whether there is a next step.
+   */
+  hasNextStep: boolean;
+  /**
+   * Go to the next step if any.
+   */
+  goToNextStep: () => void;
+};
+export interface CreateStepNavigationReturnValueParameters {
+  initialView: DateOrTimeViewWithMeridiem;
+  view: DateOrTimeViewWithMeridiem;
+  views: readonly DateOrTimeViewWithMeridiem[];
+  setView: (view: any) => void;
+}
+interface UseRangePickerStepNavigationOnStepChangeParameters<TStep extends {}> extends CreateStepNavigationReturnValueParameters {
+  step: TStep;
+}
+export {};