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

package/esm/internals/hooks/useField/useFieldV7TextField.js

@@ -3,28 +3,24 @@ import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import useTimeout from '@mui/utils/useTimeout';
-import useId from '@mui/utils/useId';
-import { getSectionValueNow, getSectionValueText, parseSelectedSections } from "./useField.utils.js";
+import { parseSelectedSections } from "./useField.utils.js";
 import { getActiveElement } from "../../utils/utils.js";
 import { useSplitFieldProps } from "../../../hooks/index.js";
-import { usePickerTranslations } from "../../../hooks/usePickerTranslations.js";
-import { useUtils } from "../useUtils.js";
 import { useFieldCharacterEditing } from "./useFieldCharacterEditing.js";
-import { useFieldRootHandleKeyDown } from "./useFieldRootHandleKeyDown.js";
 import { useFieldState } from "./useFieldState.js";
 import { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";
+import { syncSelectionToDOM } from "./syncSelectionToDOM.js";
+import { useFieldRootProps } from "./useFieldRootProps.js";
+import { useFieldHiddenInputProps } from "./useFieldHiddenInputProps.js";
+import { useFieldSectionContainerProps } from "./useFieldSectionContainerProps.js";
+import { useFieldSectionContentProps } from "./useFieldSectionContentProps.js";
 export const useFieldV7TextField = parameters => {
-  const translations = usePickerTranslations();
-  const utils = useUtils();
-  const id = useId();
   const {
     props,
     manager,
     skipContextFieldRefAssignment,
     manager: {
       valueType,
-      internal_fieldValueManager: fieldValueManager,
       internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
     }
   } = parameters;
@@ -57,6 +53,13 @@ export const useFieldV7TextField = parameters => {
   } = internalPropsWithDefaults;
   const sectionListRef = React.useRef(null);
   const handleSectionListRef = useForkRef(sectionListRefProp, sectionListRef);
+  const domGetters = React.useMemo(() => ({
+    isReady: () => sectionListRef.current != null,
+    getRoot: () => sectionListRef.current.getRoot(),
+    getSectionContainer: sectionIndex => sectionListRef.current.getSectionContainer(sectionIndex),
+    getSectionContent: sectionIndex => sectionListRef.current.getSectionContent(sectionIndex),
+    getSectionIndexFromDOMElement: element => sectionListRef.current.getSectionIndexFromDOMElement(element)
+  }), [sectionListRef]);
   const stateResponse = useFieldState({
     manager,
     internalPropsWithDefaults,
@@ -68,62 +71,17 @@ export const useFieldV7TextField = parameters => {
     error,
     parsedSelectedSections,
     sectionOrder,
-    sectionsValueBoundaries,
     state,
     value,
     // Methods to update the states
     clearValue,
-    clearActiveSection,
-    setCharacterQuery,
-    setSelectedSections,
-    updateSectionValue,
-    updateValueFromValueStr
+    setSelectedSections
   } = stateResponse;
   const applyCharacterEditing = useFieldCharacterEditing({
     stateResponse
   });
   const openPickerAriaLabel = useOpenPickerButtonAriaLabel(value);
   const [focused, setFocused] = React.useState(false);
-  function syncSelectionToDOM() {
-    if (!sectionListRef.current) {
-      return;
-    }
-    const selection = document.getSelection();
-    if (!selection) {
-      return;
-    }
-    if (parsedSelectedSections == null) {
-      // If the selection contains an element inside the field, we reset it.
-      if (selection.rangeCount > 0 && sectionListRef.current.getRoot().contains(selection.getRangeAt(0).startContainer)) {
-        selection.removeAllRanges();
-      }
-      if (focused) {
-        sectionListRef.current.getRoot().blur();
-      }
-      return;
-    }
-
-    // On multi input range pickers we want to update selection range only for the active input
-    if (!sectionListRef.current.getRoot().contains(getActiveElement(document))) {
-      return;
-    }
-    const range = new window.Range();
-    let target;
-    if (parsedSelectedSections === 'all') {
-      target = sectionListRef.current.getRoot();
-    } else {
-      const section = state.sections[parsedSelectedSections];
-      if (section.type === 'empty') {
-        target = sectionListRef.current.getSectionContainer(parsedSelectedSections);
-      } else {
-        target = sectionListRef.current.getSectionContent(parsedSelectedSections);
-      }
-    }
-    range.selectNodeContents(target);
-    target.focus();
-    selection.removeAllRanges();
-    selection.addRange(range);
-  }
   function focusField(newSelectedSections = 0) {
     if (!sectionListRef.current ||
     // if the field is already focused, we don't need to focus it again
@@ -134,193 +92,53 @@ export const useFieldV7TextField = parameters => {
     setFocused(true);
     sectionListRef.current.getSectionContent(newParsedSelectedSections).focus();
   }
-
-  /**
-   * If a section content has been updated with a value we don't want to keep,
-   * Then we need to imperatively revert it (we can't let React do it because the value did not change in his internal representation).
-   */
-  const revertDOMSectionChange = useEventCallback(sectionIndex => {
-    if (!sectionListRef.current) {
-      return;
-    }
-    const section = state.sections[sectionIndex];
-    sectionListRef.current.getSectionContent(sectionIndex).innerHTML = section.value || section.placeholder;
-    syncSelectionToDOM();
+  const rootProps = useFieldRootProps({
+    manager,
+    internalPropsWithDefaults,
+    stateResponse,
+    applyCharacterEditing,
+    focused,
+    setFocused,
+    domGetters
   });
-  const containerClickTimeout = useTimeout();
-  const handleContainerClick = useEventCallback((event, ...args) => {
-    // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
-    // We avoid this by checking if the call of `handleContainerClick` is actually intended, or a side effect.
-    if (event.isDefaultPrevented() || !sectionListRef.current) {
-      return;
-    }
-    setFocused(true);
-    onClick?.(event, ...args);
-    if (parsedSelectedSections === 'all') {
-      containerClickTimeout.start(0, () => {
-        const cursorPosition = document.getSelection().getRangeAt(0).startOffset;
-        if (cursorPosition === 0) {
-          setSelectedSections(sectionOrder.startIndex);
-          return;
-        }
-        let sectionIndex = 0;
-        let cursorOnStartOfSection = 0;
-        while (cursorOnStartOfSection < cursorPosition && sectionIndex < state.sections.length) {
-          const section = state.sections[sectionIndex];
-          sectionIndex += 1;
-          cursorOnStartOfSection += `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`.length;
-        }
-        setSelectedSections(sectionIndex - 1);
-      });
-    } else if (!focused) {
-      setFocused(true);
-      setSelectedSections(sectionOrder.startIndex);
-    } else {
-      const hasClickedOnASection = sectionListRef.current.getRoot().contains(event.target);
-      if (!hasClickedOnASection) {
-        setSelectedSections(sectionOrder.startIndex);
-      }
-    }
+  const hiddenInputProps = useFieldHiddenInputProps({
+    manager,
+    stateResponse
   });
-  const handleContainerInput = useEventCallback(event => {
-    onInput?.(event);
-    if (!sectionListRef.current || parsedSelectedSections !== 'all') {
-      return;
-    }
-    const target = event.target;
-    const keyPressed = target.textContent ?? '';
-    sectionListRef.current.getRoot().innerHTML = state.sections.map(section => `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`).join('');
-    syncSelectionToDOM();
-    if (keyPressed.length === 0 || keyPressed.charCodeAt(0) === 10) {
-      clearValue();
-      setSelectedSections('all');
-    } else if (keyPressed.length > 1) {
-      updateValueFromValueStr(keyPressed);
-    } else {
-      if (parsedSelectedSections === 'all') {
-        setSelectedSections(0);
-      }
-      applyCharacterEditing({
-        keyPressed,
-        sectionIndex: 0
-      });
-    }
+  const createSectionContainerProps = useFieldSectionContainerProps({
+    stateResponse
   });
-  const handleContainerPaste = useEventCallback(event => {
-    onPaste?.(event);
-    if (readOnly || parsedSelectedSections !== 'all') {
-      event.preventDefault();
-      return;
-    }
-    const pastedValue = event.clipboardData.getData('text');
-    event.preventDefault();
-    setCharacterQuery(null);
-    updateValueFromValueStr(pastedValue);
+  const createSectionContentProps = useFieldSectionContentProps({
+    manager,
+    stateResponse,
+    applyCharacterEditing,
+    internalPropsWithDefaults,
+    domGetters,
+    focused
   });
-  const handleContainerFocus = useEventCallback(event => {
-    onFocus?.(event);
-    if (focused || !sectionListRef.current) {
-      return;
-    }
-    const activeElement = getActiveElement(document);
-    setFocused(true);
-    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(activeElement) != null;
-    if (!isFocusInsideASection) {
-      setSelectedSections(sectionOrder.startIndex);
-    }
+  const handleRootKeyDown = useEventCallback(event => {
+    onKeyDown?.(event);
+    rootProps.onKeyDown(event);
   });
-  const handleContainerBlur = useEventCallback(event => {
+  const handleRootBlur = useEventCallback(event => {
     onBlur?.(event);
-    setTimeout(() => {
-      if (!sectionListRef.current) {
-        return;
-      }
-      const activeElement = getActiveElement(document);
-      const shouldBlur = !sectionListRef.current.getRoot().contains(activeElement);
-      if (shouldBlur) {
-        setFocused(false);
-        setSelectedSections(null);
-      }
-    });
+    rootProps.onBlur(event);
   });
-  const getInputContainerClickHandler = useEventCallback(sectionIndex => event => {
-    // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
-    // We avoid this by checking if the call to this function is actually intended, or a side effect.
-    if (event.isDefaultPrevented()) {
-      return;
-    }
-    setSelectedSections(sectionIndex);
-  });
-  const handleInputContentMouseUp = useEventCallback(event => {
-    // Without this, the browser will remove the selected when clicking inside an already-selected section.
-    event.preventDefault();
+  const handleRootFocus = useEventCallback(event => {
+    onFocus?.(event);
+    rootProps.onFocus(event);
   });
-  const getInputContentFocusHandler = useEventCallback(sectionIndex => () => {
-    setSelectedSections(sectionIndex);
+  const handleRootClick = useEventCallback(event => {
+    onClick?.(event);
+    rootProps.onClick(event);
   });
-  const handleInputContentPaste = useEventCallback(event => {
-    // prevent default to avoid the input `onInput` handler being called
-    event.preventDefault();
-    if (readOnly || disabled || typeof parsedSelectedSections !== 'number') {
-      return;
-    }
-    const activeSection = state.sections[parsedSelectedSections];
-    const pastedValue = event.clipboardData.getData('text');
-    const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);
-    const digitsOnly = /^[0-9]+$/.test(pastedValue);
-    const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
-    const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
-    if (isValidPastedValue) {
-      setCharacterQuery(null);
-      updateSectionValue({
-        section: activeSection,
-        newSectionValue: pastedValue,
-        shouldGoToNextSection: true
-      });
-    }
-    // If the pasted value corresponds to a single section, but not the expected type, we skip the modification
-    else if (!lettersOnly && !digitsOnly) {
-      setCharacterQuery(null);
-      updateValueFromValueStr(pastedValue);
-    }
-  });
-  const handleInputContentDragOver = useEventCallback(event => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'none';
+  const handleRootPaste = useEventCallback(event => {
+    onPaste?.(event);
+    rootProps.onPaste(event);
   });
-  const handleInputContentInput = useEventCallback(event => {
-    if (!sectionListRef.current) {
-      return;
-    }
-    const target = event.target;
-    const keyPressed = target.textContent ?? '';
-    const sectionIndex = sectionListRef.current.getSectionIndexFromDOMElement(target);
-    const section = state.sections[sectionIndex];
-    if (readOnly || !sectionListRef.current) {
-      revertDOMSectionChange(sectionIndex);
-      return;
-    }
-    if (keyPressed.length === 0) {
-      if (section.value === '') {
-        revertDOMSectionChange(sectionIndex);
-        return;
-      }
-      const inputType = event.nativeEvent.inputType;
-      if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {
-        revertDOMSectionChange(sectionIndex);
-        return;
-      }
-      revertDOMSectionChange(sectionIndex);
-      clearActiveSection();
-      return;
-    }
-    applyCharacterEditing({
-      keyPressed,
-      sectionIndex
-    });
-
-    // The DOM value needs to remain the one React is expecting.
-    revertDOMSectionChange(sectionIndex);
+  const handleRootInput = useEventCallback(event => {
+    onInput?.(event);
+    rootProps.onInput(event);
   });
   const handleClear = useEventCallback((event, ...args) => {
     event.preventDefault();
@@ -333,67 +151,18 @@ export const useFieldV7TextField = parameters => {
       setSelectedSections(sectionOrder.startIndex);
     }
   });
-  const handleContainerKeyDown = useFieldRootHandleKeyDown({
-    manager,
-    internalPropsWithDefaults,
-    stateResponse
-  });
-  const wrappedHandleContainerKeyDown = useEventCallback(event => {
-    onKeyDown?.(event);
-    handleContainerKeyDown(event);
-  });
-  const isContainerEditable = parsedSelectedSections === 'all';
   const elements = React.useMemo(() => {
-    return state.sections.map((section, index) => {
-      const isEditable = !isContainerEditable && !disabled && !readOnly;
-      const sectionBoundaries = sectionsValueBoundaries[section.type]({
-        currentDate: fieldValueManager.getDateFromSection(value, section),
-        contentType: section.contentType,
-        format: section.format
-      });
-      return {
-        container: {
-          'data-sectionindex': index,
-          onClick: getInputContainerClickHandler(index)
-        },
-        content: {
-          tabIndex: isContainerEditable || index > 0 ? -1 : 0,
-          contentEditable: !isContainerEditable && !disabled && !readOnly,
-          role: 'spinbutton',
-          id: `${id}-${section.type}`,
-          'aria-labelledby': `${id}-${section.type}`,
-          'aria-readonly': readOnly,
-          'aria-valuenow': getSectionValueNow(section, utils),
-          'aria-valuemin': sectionBoundaries.minimum,
-          'aria-valuemax': sectionBoundaries.maximum,
-          'aria-valuetext': section.value ? getSectionValueText(section, utils) : translations.empty,
-          'aria-label': translations[section.type],
-          'aria-disabled': disabled,
-          spellCheck: isEditable ? false : undefined,
-          autoCapitalize: isEditable ? 'off' : undefined,
-          autoCorrect: isEditable ? 'off' : undefined,
-          [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
-          children: section.value || section.placeholder,
-          onInput: handleInputContentInput,
-          onPaste: handleInputContentPaste,
-          onFocus: getInputContentFocusHandler(index),
-          onDragOver: handleInputContentDragOver,
-          onMouseUp: handleInputContentMouseUp,
-          inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
-        },
-        before: {
-          children: section.startSeparator
-        },
-        after: {
-          children: section.endSeparator
-        }
-      };
-    });
-  }, [disabled, fieldValueManager, getInputContainerClickHandler, getInputContentFocusHandler, handleInputContentDragOver, handleInputContentInput, handleInputContentMouseUp, handleInputContentPaste, id, isContainerEditable, readOnly, sectionsValueBoundaries, state.sections, translations, utils, value]);
-  const handleValueStrChange = useEventCallback(event => {
-    updateValueFromValueStr(event.target.value);
-  });
-  const valueStr = React.useMemo(() => areAllSectionsEmpty ? '' : fieldValueManager.getV7HiddenInputValueFromSections(state.sections), [areAllSectionsEmpty, state.sections, fieldValueManager]);
+    return state.sections.map((section, sectionIndex) => ({
+      container: createSectionContainerProps(sectionIndex),
+      content: createSectionContentProps(section, sectionIndex),
+      before: {
+        children: section.startSeparator
+      },
+      after: {
+        children: section.endSeparator
+      }
+    }));
+  }, [state.sections, createSectionContainerProps, createSectionContentProps]);
   React.useEffect(() => {
     if (sectionListRef.current == null) {
       throw new Error(['MUI X: The `sectionListRef` prop has not been initialized by `PickersSectionList`', 'You probably tried to pass a component to the `textField` slot that contains an `<input />` element instead of a `PickersSectionList`.', '', 'If you want to keep using an `<input />` HTML element for the editing, please remove the `enableAccessibleFieldDOMStructure` prop from your Picker or Field component:', '', '<DatePicker slots={{ textField: MyCustomTextField }} />', '', 'Learn more about the field accessible DOM structure on the MUI documentation: https://mui.com/x/react-date-pickers/fields/#fields-to-edit-a-single-element'].join('\n'));
@@ -417,7 +186,11 @@ export const useFieldV7TextField = parameters => {
     }
   }, [parsedSelectedSections, focused]);
   useEnhancedEffect(() => {
-    syncSelectionToDOM();
+    syncSelectionToDOM({
+      focused,
+      domGetters,
+      stateResponse
+    });
   });
   React.useImperativeHandle(unstableFieldRef, () => ({
     getSections: () => state.sections,
@@ -434,26 +207,22 @@ export const useFieldV7TextField = parameters => {
     focusField,
     isFieldFocused: () => isFieldFocused(sectionListRef)
   }));
-  return _extends({}, forwardedProps, {
+  return _extends({}, forwardedProps, rootProps, {
+    onBlur: handleRootBlur,
+    onClick: handleRootClick,
+    onFocus: handleRootFocus,
+    onInput: handleRootInput,
+    onPaste: handleRootPaste,
+    onKeyDown: handleRootKeyDown,
+    onClear: handleClear
+  }, hiddenInputProps, {
     error,
     clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled),
     focused: focusedProp ?? focused,
     sectionListRef: handleSectionListRef,
-    onBlur: handleContainerBlur,
-    onClick: handleContainerClick,
-    onFocus: handleContainerFocus,
-    onInput: handleContainerInput,
-    onPaste: handleContainerPaste,
-    onKeyDown: wrappedHandleContainerKeyDown,
-    onClear: handleClear,
     // Additional
     enableAccessibleFieldDOMStructure: true,
     elements,
-    // TODO v7: Try to set to undefined when there is a section selected.
-    tabIndex: parsedSelectedSections === 0 ? -1 : 0,
-    contentEditable: isContainerEditable,
-    value: valueStr,
-    onChange: handleValueStrChange,
     areAllSectionsEmpty,
     disabled,
     readOnly,

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, {