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

package/esm/index.js

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

package/esm/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.d.ts

@@ -3,6 +3,7 @@ import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { UseDesktopRangePickerParams, UseDesktopRangePickerProps } from "./useDesktopRangePicker.types.js";
 export declare const useDesktopRangePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
   props,
+  steps,
   ...pickerParams
 }: UseDesktopRangePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
   renderPicker: () => React.JSX.Element;

package/esm/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.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';
@@ -11,11 +11,13 @@ import { getReleaseInfo } from "../../utils/releaseInfo.js";
 import { useRangePosition } from "../useRangePosition.js";
 import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
 import { getRangeFieldType } from "../../utils/date-fields-utils.js";
+import { createRangePickerStepNavigation } from "../../utils/createRangePickerStepNavigation.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 export const useDesktopRangePicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
@@ -28,6 +30,10 @@ export const useDesktopRangePicker = _ref => {
   const fieldType = getRangeFieldType(slots.field);
   const viewContainerRole = fieldType === 'single-input' ? 'dialog' : 'tooltip';
   const rangePositionResponse = useRangePosition(props);
+  const getStepNavigation = createRangePickerStepNavigation({
+    steps,
+    rangePositionResponse
+  });
   const {
     providerProps,
     renderCurrentView,
@@ -37,7 +43,8 @@ export const useDesktopRangePicker = _ref => {
     variant: 'desktop',
     autoFocusView: viewContainerRole === 'dialog',
     viewContainerRole,
-    localeText
+    localeText,
+    getStepNavigation
   }));
   const Field = slots.field;
   const _useSlotProps = useSlotProps({

package/esm/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts

@@ -2,7 +2,7 @@ import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { PickerFieldSlotProps, PickerOwnerState } from '@mui/x-date-pickers/models';
 import { PickerPopperSlots, PickerPopperSlotProps, UsePickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '@mui/x-date-pickers/internals';
 import { ExportedPickersLayoutSlotProps, ExportedPickersLayoutSlots } from '@mui/x-date-pickers/PickersLayout';
-import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps } from "../models/useRangePicker.js";
+import { NonStaticRangePickerProps, NonStaticRangePickerHookParameters, UseRangePickerProps } from "../../models/index.js";
 export interface UseDesktopRangePickerSlots extends PickerPopperSlots, ExportedPickersLayoutSlots<PickerRangeValue>, PickerFieldUISlotsFromContext {
   /**
    * Component used to enter the date with the keyboard.
@@ -14,7 +14,7 @@ export interface UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructu
     dateSeparator?: string;
   }, {}, PickerOwnerState>;
 }
-export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps {
+export interface DesktopRangeOnlyPickerProps extends NonStaticRangePickerProps {
   /**
    * If `true`, the start `input` element is focused during the first mount.
    */
@@ -32,4 +32,4 @@ export interface UseDesktopRangePickerProps<TView extends DateOrTimeViewWithMeri
    */
   slotProps?: UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseDesktopRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps> {}
+export interface UseDesktopRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends NonStaticRangePickerHookParameters<TView, TExternalProps> {}

package/esm/internals/hooks/useMobileRangePicker/useMobileRangePicker.d.ts

@@ -3,6 +3,7 @@ import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { UseMobileRangePickerParams, UseMobileRangePickerProps } from "./useMobileRangePicker.types.js";
 export declare const useMobileRangePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
   props,
+  steps,
   ...pickerParams
 }: UseMobileRangePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
   renderPicker: () => React.JSX.Element;

package/esm/internals/hooks/useMobileRangePicker/useMobileRangePicker.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';
@@ -13,11 +13,13 @@ import { getReleaseInfo } from "../../utils/releaseInfo.js";
 import { useRangePosition } from "../useRangePosition.js";
 import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
 import { getRangeFieldType } from "../../utils/date-fields-utils.js";
+import { createRangePickerStepNavigation } from "../../utils/createRangePickerStepNavigation.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 export const useMobileRangePicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
@@ -31,6 +33,10 @@ export const useMobileRangePicker = _ref => {
   const fieldType = getRangeFieldType(slots.field);
   const rangePositionResponse = useRangePosition(props);
   const contextTranslations = usePickerTranslations();
+  const getStepNavigation = createRangePickerStepNavigation({
+    steps,
+    rangePositionResponse
+  });
   const {
     providerProps,
     renderCurrentView,
@@ -40,7 +46,8 @@ export const useMobileRangePicker = _ref => {
     variant: 'mobile',
     autoFocusView: true,
     viewContainerRole: 'dialog',
-    localeText
+    localeText,
+    getStepNavigation
   }));
   const labelId = providerProps.privateContextValue.labelId;
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;

package/esm/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts

@@ -2,7 +2,7 @@ import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { PickerFieldSlotProps, PickerOwnerState } from '@mui/x-date-pickers/models';
 import { PickersModalDialogSlots, PickersModalDialogSlotProps, UsePickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '@mui/x-date-pickers/internals';
 import { ExportedPickersLayoutSlotProps, ExportedPickersLayoutSlots, PickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
-import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps } from "../models/useRangePicker.js";
+import { NonStaticRangePickerProps, NonStaticRangePickerHookParameters, UseRangePickerProps } from "../../models/index.js";
 export interface UseMobileRangePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerRangeValue>, PickerFieldUISlotsFromContext {
   /**
    * Component used to enter the date with the keyboard.
@@ -15,7 +15,7 @@ export interface ExportedUseMobileRangePickerSlotProps<TEnableAccessibleFieldDOM
   }, {}, PickerOwnerState>;
 }
 export interface UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerRangeValue>, 'toolbar'> {}
-export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {}
+export interface MobileRangeOnlyPickerProps extends NonStaticRangePickerProps {}
 export interface UseMobileRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerRangeValue, TView, TError, any>> extends UseRangePickerProps<TView, TError, TExternalProps> {
   /**
    * Overridable component slots.
@@ -28,4 +28,4 @@ export interface UseMobileRangePickerProps<TView extends DateOrTimeViewWithMerid
    */
   slotProps?: UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseMobileRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps> {}
+export interface UseMobileRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends NonStaticRangePickerHookParameters<TView, TExternalProps> {}

package/esm/internals/hooks/useStaticRangePicker/useStaticRangePicker.d.ts

@@ -7,6 +7,7 @@ import { UseStaticRangePickerParams, UseStaticRangePickerProps } from "./useStat
  */
 export declare const useStaticRangePicker: <TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>>({
   props,
+  steps,
   ...pickerParams
 }: UseStaticRangePickerParams<TView, TExternalProps>) => {
   renderPicker: () => React.JSX.Element;

package/esm/internals/hooks/useStaticRangePicker/useStaticRangePicker.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';
@@ -8,6 +8,7 @@ import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
 import { usePicker, DIALOG_WIDTH, PickerProvider, mergeSx } from '@mui/x-date-pickers/internals';
 import { useRangePosition } from "../useRangePosition.js";
 import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
+import { createRangePickerStepNavigation } from "../../utils/createRangePickerStepNavigation.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickerStaticLayout = styled(PickersLayout)(({
   theme
@@ -23,7 +24,8 @@ const PickerStaticLayout = styled(PickersLayout)(({
  */
 export const useStaticRangePicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
@@ -34,6 +36,10 @@ export const useStaticRangePicker = _ref => {
     autoFocus
   } = props;
   const rangePositionResponse = useRangePosition(props);
+  const getStepNavigation = createRangePickerStepNavigation({
+    steps,
+    rangePositionResponse
+  });
   const {
     providerProps,
     renderCurrentView
@@ -42,7 +48,8 @@ export const useStaticRangePicker = _ref => {
     variant: displayStaticWrapperAs,
     autoFocusView: autoFocus ?? false,
     viewContainerRole: null,
-    localeText
+    localeText,
+    getStepNavigation
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/_jsx(PickerRangePositionContext.Provider, {

package/esm/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.d.ts

@@ -1,6 +1,7 @@
 import { BasePickerProps, UsePickerParameters, ExportedBaseToolbarProps, StaticOnlyPickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
 import { UseRangePositionProps } from "../useRangePosition.js";
+import { PickerRangeStep } from "../../utils/createRangePickerStepNavigation.js";
 export interface UseStaticRangePickerSlots extends ExportedPickersLayoutSlots<PickerRangeValue> {}
 export interface UseStaticRangePickerSlotProps extends ExportedPickersLayoutSlotProps<PickerRangeValue> {
   toolbar?: ExportedBaseToolbarProps;
@@ -20,4 +21,10 @@ export interface UseStaticRangePickerProps<TView extends DateOrTimeViewWithMerid
 }
 export interface UseStaticRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParameters<PickerRangeValue, 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: PickerRangeStep[] | null;
 }

package/esm/internals/models/rangePickerProps.d.ts

@@ -1,4 +1,7 @@
+import { BasePickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue, UsePickerNonStaticProps, UsePickerParameters, UsePickerProps } from '@mui/x-date-pickers/internals';
 import * as React from 'react';
+import { UseRangePositionProps } from "../hooks/useRangePosition.js";
+import { PickerRangeStep } from "../utils/createRangePickerStepNavigation.js";
 /**
  * Props common to all range non-static pickers.
  * These props are handled by the headless wrappers.
@@ -19,4 +22,15 @@ export interface BaseRangeNonStaticPickerProps {
    * Ignored if the field has several inputs.
    */
   name?: string;
+}
+export interface NonStaticRangePickerProps extends UsePickerNonStaticProps, BaseRangeNonStaticPickerProps, UseRangePositionProps {}
+export interface UseRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<PickerRangeValue, TView, TError, any>> extends NonStaticRangePickerProps, BasePickerProps<PickerRangeValue, TView, TError, TExternalProps> {}
+export interface NonStaticRangePickerHookParameters<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParameters<PickerRangeValue, 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: PickerRangeStep[] | null;
 }

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

@@ -0,0 +1,16 @@
+import { DateOrTimeViewWithMeridiem, RangePosition } from '@mui/x-date-pickers/internals';
+import { UseRangePositionResponse } from "../hooks/useRangePosition.js";
+export declare function createRangePickerStepNavigation(parameters: CreateRangePickerStepNavigationParameters): import("@mui/x-date-pickers/internals/utils/createStepNavigation").CreateStepNavigationReturnValue;
+export interface PickerRangeStep {
+  /**
+   * The views that are handled inside this step.
+   * If null, all views are handled by this step.
+   */
+  views: readonly DateOrTimeViewWithMeridiem[] | null;
+  rangePosition: RangePosition;
+}
+interface CreateRangePickerStepNavigationParameters {
+  steps: PickerRangeStep[] | null;
+  rangePositionResponse: UseRangePositionResponse;
+}
+export {};

package/esm/internals/utils/createRangePickerStepNavigation.js

@@ -0,0 +1,31 @@
+import { createStepNavigation } from '@mui/x-date-pickers/internals';
+export function createRangePickerStepNavigation(parameters) {
+  const {
+    steps,
+    rangePositionResponse
+  } = parameters;
+  return createStepNavigation({
+    steps,
+    isCurrentViewMatchingStep: (view, step) => {
+      if (step.rangePosition !== rangePositionResponse.rangePosition) {
+        return false;
+      }
+      return step.views == null || step.views.includes(view);
+    },
+    onStepChange: ({
+      step,
+      initialView,
+      setView,
+      view,
+      views
+    }) => {
+      if (step.rangePosition !== rangePositionResponse.rangePosition) {
+        rangePositionResponse.setRangePosition(step.rangePosition);
+      }
+      const targetView = step.views == null ? initialView : step.views.find(viewBis => views.includes(viewBis));
+      if (targetView !== view) {
+        setView(targetView);
+      }
+    }
+  });
+}

package/esm/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTc0MzExMjgwMDAwMA==";
+  const releaseInfo = "MTc0MzYzMTIwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/index.js

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

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.d.ts

@@ -3,6 +3,7 @@ import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { UseDesktopRangePickerParams, UseDesktopRangePickerProps } from "./useDesktopRangePicker.types.js";
 export declare const useDesktopRangePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
   props,
+  steps,
   ...pickerParams
 }: UseDesktopRangePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
   renderPicker: () => React.JSX.Element;

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -17,13 +17,15 @@ var _releaseInfo = require("../../utils/releaseInfo");
 var _useRangePosition = require("../useRangePosition");
 var _usePickerRangePositionContext = require("../../../hooks/usePickerRangePositionContext");
 var _dateFieldsUtils = require("../../utils/date-fields-utils");
+var _createRangePickerStepNavigation = require("../../utils/createRangePickerStepNavigation");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["props"],
+const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
 const useDesktopRangePicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', releaseInfo);
@@ -36,6 +38,10 @@ const useDesktopRangePicker = _ref => {
   const fieldType = (0, _dateFieldsUtils.getRangeFieldType)(slots.field);
   const viewContainerRole = fieldType === 'single-input' ? 'dialog' : 'tooltip';
   const rangePositionResponse = (0, _useRangePosition.useRangePosition)(props);
+  const getStepNavigation = (0, _createRangePickerStepNavigation.createRangePickerStepNavigation)({
+    steps,
+    rangePositionResponse
+  });
   const {
     providerProps,
     renderCurrentView,
@@ -45,7 +51,8 @@ const useDesktopRangePicker = _ref => {
     variant: 'desktop',
     autoFocusView: viewContainerRole === 'dialog',
     viewContainerRole,
-    localeText
+    localeText,
+    getStepNavigation
   }));
   const Field = slots.field;
   const _useSlotProps = (0, _useSlotProps2.default)({

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

@@ -2,7 +2,7 @@ import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { PickerFieldSlotProps, PickerOwnerState } from '@mui/x-date-pickers/models';
 import { PickerPopperSlots, PickerPopperSlotProps, UsePickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '@mui/x-date-pickers/internals';
 import { ExportedPickersLayoutSlotProps, ExportedPickersLayoutSlots } from '@mui/x-date-pickers/PickersLayout';
-import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps } from "../models/useRangePicker.js";
+import { NonStaticRangePickerProps, NonStaticRangePickerHookParameters, UseRangePickerProps } from "../../models/index.js";
 export interface UseDesktopRangePickerSlots extends PickerPopperSlots, ExportedPickersLayoutSlots<PickerRangeValue>, PickerFieldUISlotsFromContext {
   /**
    * Component used to enter the date with the keyboard.
@@ -14,7 +14,7 @@ export interface UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructu
     dateSeparator?: string;
   }, {}, PickerOwnerState>;
 }
-export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps {
+export interface DesktopRangeOnlyPickerProps extends NonStaticRangePickerProps {
   /**
    * If `true`, the start `input` element is focused during the first mount.
    */
@@ -32,4 +32,4 @@ export interface UseDesktopRangePickerProps<TView extends DateOrTimeViewWithMeri
    */
   slotProps?: UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseDesktopRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps> {}
+export interface UseDesktopRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends NonStaticRangePickerHookParameters<TView, TExternalProps> {}

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.d.ts

@@ -3,6 +3,7 @@ import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { UseMobileRangePickerParams, UseMobileRangePickerProps } from "./useMobileRangePicker.types.js";
 export declare const useMobileRangePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
   props,
+  steps,
   ...pickerParams
 }: UseMobileRangePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
   renderPicker: () => React.JSX.Element;

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -19,13 +19,15 @@ var _releaseInfo = require("../../utils/releaseInfo");
 var _useRangePosition = require("../useRangePosition");
 var _usePickerRangePositionContext = require("../../../hooks/usePickerRangePositionContext");
 var _dateFieldsUtils = require("../../utils/date-fields-utils");
+var _createRangePickerStepNavigation = require("../../utils/createRangePickerStepNavigation");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["props"],
+const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
 const useMobileRangePicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', releaseInfo);
@@ -39,6 +41,10 @@ const useMobileRangePicker = _ref => {
   const fieldType = (0, _dateFieldsUtils.getRangeFieldType)(slots.field);
   const rangePositionResponse = (0, _useRangePosition.useRangePosition)(props);
   const contextTranslations = (0, _hooks.usePickerTranslations)();
+  const getStepNavigation = (0, _createRangePickerStepNavigation.createRangePickerStepNavigation)({
+    steps,
+    rangePositionResponse
+  });
   const {
     providerProps,
     renderCurrentView,
@@ -48,7 +54,8 @@ const useMobileRangePicker = _ref => {
     variant: 'mobile',
     autoFocusView: true,
     viewContainerRole: 'dialog',
-    localeText
+    localeText,
+    getStepNavigation
   }));
   const labelId = providerProps.privateContextValue.labelId;
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;

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

@@ -2,7 +2,7 @@ import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { PickerFieldSlotProps, PickerOwnerState } from '@mui/x-date-pickers/models';
 import { PickersModalDialogSlots, PickersModalDialogSlotProps, UsePickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '@mui/x-date-pickers/internals';
 import { ExportedPickersLayoutSlotProps, ExportedPickersLayoutSlots, PickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
-import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps } from "../models/useRangePicker.js";
+import { NonStaticRangePickerProps, NonStaticRangePickerHookParameters, UseRangePickerProps } from "../../models/index.js";
 export interface UseMobileRangePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerRangeValue>, PickerFieldUISlotsFromContext {
   /**
    * Component used to enter the date with the keyboard.
@@ -15,7 +15,7 @@ export interface ExportedUseMobileRangePickerSlotProps<TEnableAccessibleFieldDOM
   }, {}, PickerOwnerState>;
 }
 export interface UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerRangeValue>, 'toolbar'> {}
-export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {}
+export interface MobileRangeOnlyPickerProps extends NonStaticRangePickerProps {}
 export interface UseMobileRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerRangeValue, TView, TError, any>> extends UseRangePickerProps<TView, TError, TExternalProps> {
   /**
    * Overridable component slots.
@@ -28,4 +28,4 @@ export interface UseMobileRangePickerProps<TView extends DateOrTimeViewWithMerid
    */
   slotProps?: UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseMobileRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps> {}
+export interface UseMobileRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends NonStaticRangePickerHookParameters<TView, TExternalProps> {}

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.d.ts

@@ -7,6 +7,7 @@ import { UseStaticRangePickerParams, UseStaticRangePickerProps } from "./useStat
  */
 export declare const useStaticRangePicker: <TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>>({
   props,
+  steps,
   ...pickerParams
 }: UseStaticRangePickerParams<TView, TExternalProps>) => {
   renderPicker: () => React.JSX.Element;

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -15,8 +15,9 @@ var _PickersLayout = require("@mui/x-date-pickers/PickersLayout");
 var _internals = require("@mui/x-date-pickers/internals");
 var _useRangePosition = require("../useRangePosition");
 var _usePickerRangePositionContext = require("../../../hooks/usePickerRangePositionContext");
+var _createRangePickerStepNavigation = require("../../utils/createRangePickerStepNavigation");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["props"];
+const _excluded = ["props", "steps"];
 const PickerStaticLayout = (0, _styles.styled)(_PickersLayout.PickersLayout)(({
   theme
 }) => ({
@@ -31,7 +32,8 @@ const PickerStaticLayout = (0, _styles.styled)(_PickersLayout.PickersLayout)(({
  */
 const useStaticRangePicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
@@ -42,6 +44,10 @@ const useStaticRangePicker = _ref => {
     autoFocus
   } = props;
   const rangePositionResponse = (0, _useRangePosition.useRangePosition)(props);
+  const getStepNavigation = (0, _createRangePickerStepNavigation.createRangePickerStepNavigation)({
+    steps,
+    rangePositionResponse
+  });
   const {
     providerProps,
     renderCurrentView
@@ -50,7 +56,8 @@ const useStaticRangePicker = _ref => {
     variant: displayStaticWrapperAs,
     autoFocusView: autoFocus ?? false,
     viewContainerRole: null,
-    localeText
+    localeText,
+    getStepNavigation
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_usePickerRangePositionContext.PickerRangePositionContext.Provider, {

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

@@ -1,6 +1,7 @@
 import { BasePickerProps, UsePickerParameters, ExportedBaseToolbarProps, StaticOnlyPickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
 import { UseRangePositionProps } from "../useRangePosition.js";
+import { PickerRangeStep } from "../../utils/createRangePickerStepNavigation.js";
 export interface UseStaticRangePickerSlots extends ExportedPickersLayoutSlots<PickerRangeValue> {}
 export interface UseStaticRangePickerSlotProps extends ExportedPickersLayoutSlotProps<PickerRangeValue> {
   toolbar?: ExportedBaseToolbarProps;
@@ -20,4 +21,10 @@ export interface UseStaticRangePickerProps<TView extends DateOrTimeViewWithMerid
 }
 export interface UseStaticRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParameters<PickerRangeValue, 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: PickerRangeStep[] | null;
 }

package/internals/models/rangePickerProps.d.ts

@@ -1,4 +1,7 @@
+import { BasePickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue, UsePickerNonStaticProps, UsePickerParameters, UsePickerProps } from '@mui/x-date-pickers/internals';
 import * as React from 'react';
+import { UseRangePositionProps } from "../hooks/useRangePosition.js";
+import { PickerRangeStep } from "../utils/createRangePickerStepNavigation.js";
 /**
  * Props common to all range non-static pickers.
  * These props are handled by the headless wrappers.
@@ -19,4 +22,15 @@ export interface BaseRangeNonStaticPickerProps {
    * Ignored if the field has several inputs.
    */
   name?: string;
+}
+export interface NonStaticRangePickerProps extends UsePickerNonStaticProps, BaseRangeNonStaticPickerProps, UseRangePositionProps {}
+export interface UseRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<PickerRangeValue, TView, TError, any>> extends NonStaticRangePickerProps, BasePickerProps<PickerRangeValue, TView, TError, TExternalProps> {}
+export interface NonStaticRangePickerHookParameters<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParameters<PickerRangeValue, 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: PickerRangeStep[] | null;
 }

package/internals/utils/createRangePickerStepNavigation.d.ts

@@ -0,0 +1,16 @@
+import { DateOrTimeViewWithMeridiem, RangePosition } from '@mui/x-date-pickers/internals';
+import { UseRangePositionResponse } from "../hooks/useRangePosition.js";
+export declare function createRangePickerStepNavigation(parameters: CreateRangePickerStepNavigationParameters): import("@mui/x-date-pickers/internals/utils/createStepNavigation").CreateStepNavigationReturnValue;
+export interface PickerRangeStep {
+  /**
+   * The views that are handled inside this step.
+   * If null, all views are handled by this step.
+   */
+  views: readonly DateOrTimeViewWithMeridiem[] | null;
+  rangePosition: RangePosition;
+}
+interface CreateRangePickerStepNavigationParameters {
+  steps: PickerRangeStep[] | null;
+  rangePositionResponse: UseRangePositionResponse;
+}
+export {};

package/internals/utils/createRangePickerStepNavigation.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createRangePickerStepNavigation = createRangePickerStepNavigation;
+var _internals = require("@mui/x-date-pickers/internals");
+function createRangePickerStepNavigation(parameters) {
+  const {
+    steps,
+    rangePositionResponse
+  } = parameters;
+  return (0, _internals.createStepNavigation)({
+    steps,
+    isCurrentViewMatchingStep: (view, step) => {
+      if (step.rangePosition !== rangePositionResponse.rangePosition) {
+        return false;
+      }
+      return step.views == null || step.views.includes(view);
+    },
+    onStepChange: ({
+      step,
+      initialView,
+      setView,
+      view,
+      views
+    }) => {
+      if (step.rangePosition !== rangePositionResponse.rangePosition) {
+        rangePositionResponse.setRangePosition(step.rangePosition);
+      }
+      const targetView = step.views == null ? initialView : step.views.find(viewBis => views.includes(viewBis));
+      if (targetView !== view) {
+        setView(targetView);
+      }
+    }
+  });
+}