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

package/esm/DateRangePicker/shared.js

@@ -1,15 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { useDefaultDates, useUtils, applyDefaultDate } from '@mui/x-date-pickers/internals';
+import { useApplyDefaultValuesToDateValidationProps } from '@mui/x-date-pickers/internals';
 import { DateRangePickerToolbar } from "./DateRangePickerToolbar.js";
 export function useDateRangePickerDefaultizedProps(props, name) {
-  const utils = useUtils();
-  const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
+  const validationProps = useApplyDefaultValuesToDateValidationProps(themeProps);
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;
@@ -18,12 +17,8 @@ export function useDateRangePickerDefaultizedProps(props, name) {
       dateRangePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  return _extends({}, themeProps, {
+  return _extends({}, themeProps, validationProps, {
     localeText,
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
-    minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
     slots: _extends({
       toolbar: DateRangePickerToolbar
     }, themeProps.slots)

package/esm/DateRangePickerDay/DateRangePickerDay.js

@@ -89,7 +89,7 @@ const DateRangePickerDayRoot = styled('div', {
   }, {
     props: {
       isDayFillerCell: false,
-      isHighlighting: true
+      isDaySelected: true
     },
     style: {
       borderRadius: 0,

package/esm/DateTimeRangePicker/shared.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useThemeProps } from '@mui/material/styles';
-import { useDefaultDates, useUtils, applyDefaultDate, applyDefaultViewProps, resolveTimeViewsResponse } from '@mui/x-date-pickers/internals';
+import { useUtils, applyDefaultViewProps, resolveTimeViewsResponse, useApplyDefaultValuesToDateTimeValidationProps } from '@mui/x-date-pickers/internals';
 import { DateTimeRangePickerToolbar } from "./DateTimeRangePickerToolbar.js";
 import { DateTimeRangePickerTabs } from "./DateTimeRangePickerTabs.js";
 export function useDateTimeRangePickerDefaultizedProps(props, name) {
   const utils = useUtils();
-  const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
+  const validationProps = useApplyDefaultValuesToDateTimeValidationProps(themeProps);
   const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
   const {
     openTo,
@@ -31,22 +31,13 @@ export function useDateTimeRangePickerDefaultizedProps(props, name) {
     timeSteps: themeProps.timeSteps,
     views: defaultViews
   });
-  return _extends({}, themeProps, {
+  return _extends({}, themeProps, validationProps, {
     timeSteps,
     openTo,
     shouldRenderTimeInASingleColumn,
     thresholdToRenderTimeInASingleColumn,
     views,
     ampm,
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
-    minDate: applyDefaultDate(utils, themeProps.minDateTime ?? themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, themeProps.maxDateTime ?? themeProps.maxDate, defaultDates.maxDate),
-    minTime: themeProps.minDateTime ?? themeProps.minTime,
-    maxTime: themeProps.maxDateTime ?? themeProps.maxTime,
-    disableIgnoringDatePartForTimeValidation: themeProps.disableIgnoringDatePartForTimeValidation ?? Boolean(themeProps.minDateTime || themeProps.maxDateTime ||
-    // allow digital clocks to correctly check time validity: https://github.com/mui/mui-x/issues/12048
-    themeProps.disablePast || themeProps.disableFuture),
     slots: _extends({
       tabs: DateTimeRangePickerTabs,
       toolbar: DateTimeRangePickerToolbar

package/esm/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -60,7 +60,8 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
     props,
     valueManager: rangeValueManager,
     valueType: 'date',
-    validator: validateDateRange
+    validator: validateDateRange,
+    steps: null
   });
   return renderPicker();
 });

package/esm/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -24,6 +24,13 @@ import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeR
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const STEPS = [{
+  views: null,
+  rangePosition: 'start'
+}, {
+  views: null,
+  rangePosition: 'end'
+}];
 const rendererInterceptor = function RendererInterceptor(props) {
   const {
     viewRenderers,
@@ -128,7 +135,8 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
     valueManager: rangeValueManager,
     valueType: 'date-time',
     validator: validateDateTimeRange,
-    rendererInterceptor
+    rendererInterceptor,
+    steps: STEPS
   });
   return renderPicker();
 });

package/esm/DesktopTimeRangePicker/DesktopTimeRangePicker.js

@@ -20,6 +20,13 @@ import { validateTimeRange } from "../validation/validateTimeRange.js";
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { TimeRangePickerTimeWrapper } from "../TimeRangePicker/TimeRangePickerTimeWrapper.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const STEPS = [{
+  views: null,
+  rangePosition: 'start'
+}, {
+  views: null,
+  rangePosition: 'end'
+}];
 const rendererInterceptor = function RendererInterceptor(props) {
   const {
     viewRenderers,
@@ -101,7 +108,8 @@ const DesktopTimeRangePicker = /*#__PURE__*/React.forwardRef(function DesktopTim
     valueManager: rangeValueManager,
     valueType: 'time',
     validator: validateTimeRange,
-    rendererInterceptor
+    rendererInterceptor,
+    steps: STEPS
   });
   return renderPicker();
 });

package/esm/MobileDateRangePicker/MobileDateRangePicker.js

@@ -57,7 +57,8 @@ const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateR
     props,
     valueManager: rangeValueManager,
     valueType: 'date',
-    validator: validateDateRange
+    validator: validateDateRange,
+    steps: null
   });
   return renderPicker();
 });

package/esm/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -6,7 +6,7 @@ const _excluded = ["view", "openTo"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
-import { DIALOG_WIDTH, VIEW_HEIGHT, isInternalTimeView, isDatePickerView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
+import { DIALOG_WIDTH, VIEW_HEIGHT, isInternalTimeView, isDatePickerView, resolveDateTimeFormat, useUtils, TIME_VIEWS } from '@mui/x-date-pickers/internals';
 import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
@@ -22,6 +22,19 @@ import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeR
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const STEPS = [{
+  views: ['day'],
+  rangePosition: 'start'
+}, {
+  views: TIME_VIEWS,
+  rangePosition: 'start'
+}, {
+  views: ['day'],
+  rangePosition: 'end'
+}, {
+  views: TIME_VIEWS,
+  rangePosition: 'end'
+}];
 const rendererInterceptor = function RendererInterceptor(props) {
   const {
     viewRenderers,
@@ -133,7 +146,8 @@ const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileD
     valueManager: rangeValueManager,
     valueType: 'date-time',
     validator: validateDateTimeRange,
-    rendererInterceptor
+    rendererInterceptor,
+    steps: STEPS
   });
   return renderPicker();
 });

package/esm/MobileTimeRangePicker/MobileTimeRangePicker.js

@@ -18,6 +18,13 @@ import { validateTimeRange } from "../validation/validateTimeRange.js";
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { TimeRangePickerTimeWrapper } from "../TimeRangePicker/TimeRangePickerTimeWrapper.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const STEPS = [{
+  views: null,
+  rangePosition: 'start'
+}, {
+  views: null,
+  rangePosition: 'end'
+}];
 const rendererInterceptor = function rendererInterceptor(props) {
   const {
     viewRenderers,
@@ -91,7 +98,8 @@ const MobileTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileTimeR
     valueManager: rangeValueManager,
     valueType: 'time',
     validator: validateTimeRange,
-    rendererInterceptor
+    rendererInterceptor,
+    steps: STEPS
   });
   return renderPicker();
 });

package/esm/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -119,7 +119,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.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,
   /**
@@ -146,12 +146,12 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.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,
   /**
@@ -159,7 +159,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.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/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -129,7 +129,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.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,
   /**
@@ -156,12 +156,12 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.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,
   /**
@@ -169,7 +169,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.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/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -129,7 +129,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.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,
   /**
@@ -156,12 +156,12 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.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,
   /**
@@ -169,7 +169,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.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/StaticDateRangePicker/StaticDateRangePicker.js

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

package/esm/TimeRangePicker/shared.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { useUtils, applyDefaultViewProps, resolveTimeViewsResponse } from '@mui/x-date-pickers/internals';
+import { useUtils, applyDefaultViewProps, resolveTimeViewsResponse, useApplyDefaultValuesToTimeValidationProps } from '@mui/x-date-pickers/internals';
 import { TimeRangePickerToolbar } from "./TimeRangePickerToolbar.js";
 import { TimeRangePickerTabs } from "./TimeRangePickerTabs.js";
 export function useTimeRangePickerDefaultizedProps(props, name) {
@@ -10,6 +10,7 @@ export function useTimeRangePickerDefaultizedProps(props, name) {
     props,
     name
   });
+  const validationProps = useApplyDefaultValuesToTimeValidationProps(themeProps);
   const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
   const {
     openTo,
@@ -39,7 +40,7 @@ export function useTimeRangePickerDefaultizedProps(props, name) {
     timeSteps: themeProps.timeSteps,
     views: defaultViews
   });
-  return _extends({}, themeProps, {
+  return _extends({}, themeProps, validationProps, {
     localeText,
     timeSteps,
     openTo,
@@ -47,8 +48,6 @@ export function useTimeRangePickerDefaultizedProps(props, name) {
     thresholdToRenderTimeInASingleColumn,
     views,
     ampm,
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
     slots: _extends({
       tabs: TimeRangePickerTabs,
       toolbar: TimeRangePickerToolbar

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-beta.1
+ * @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;
 }