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

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();
 });
@@ -157,7 +165,7 @@ DesktopTimeRangePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
-   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

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();
 });
@@ -130,7 +131,7 @@ MobileDateRangePicker.propTypes = {
   disableHighlightToday: PropTypes.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
-   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

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,
@@ -37,7 +50,6 @@ const rendererInterceptor = function RendererInterceptor(props) {
     } = rendererProps,
     otherRendererProps = _objectWithoutPropertiesLoose(rendererProps, _excluded);
   const finalProps = _extends({}, otherRendererProps, {
-    focusedView: null,
     sx: [{
       width: DIALOG_WIDTH,
       [`.${multiSectionDigitalClockSectionClasses.root}`]: {
@@ -133,7 +145,8 @@ const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileD
     valueManager: rangeValueManager,
     valueType: 'date-time',
     validator: validateDateTimeRange,
-    rendererInterceptor
+    rendererInterceptor,
+    steps: STEPS
   });
   return renderPicker();
 });
@@ -216,7 +229,7 @@ MobileDateTimeRangePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
-   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

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();
 });
@@ -147,7 +155,7 @@ MobileTimeRangePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
-   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

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/TimeRangePicker.js

@@ -103,7 +103,7 @@ process.env.NODE_ENV !== "production" ? TimeRangePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
-   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

package/esm/TimeRangePicker/TimeRangePickerTimeWrapper.js

@@ -20,8 +20,7 @@ function TimeRangePickerTimeWrapper(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
-    rangePosition,
-    setRangePosition
+    rangePosition
   } = usePickerRangePositionContext();
   if (!viewRenderer) {
     return null;
@@ -41,10 +40,6 @@ function TimeRangePickerTimeWrapper(props) {
       rangePosition
     });
     const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
-    if (selectionState === 'finish') {
-      setRangePosition(rangePosition === 'start' ? 'end' : 'start');
-      onViewChange?.(views[0]);
-    }
     onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
   };
   return viewRenderer(_extends({}, other, {

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
  *
  * @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,24 +1,25 @@
 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';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { useLicenseVerifier } from '@mui/x-license';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
 import { usePicker, PickerPopper, PickerProvider, PickerFieldUIContextProvider } from '@mui/x-date-pickers/internals';
-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);
+  useLicenseVerifier('x-date-pickers-pro', "MTc0NDg0MDgwMDAwMA==");
   const {
     slots,
     slotProps,
@@ -28,6 +29,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,13 +42,18 @@ export const useDesktopRangePicker = _ref => {
     variant: 'desktop',
     autoFocusView: viewContainerRole === 'dialog',
     viewContainerRole,
-    localeText
+    localeText,
+    getStepNavigation,
+    onPopperExited: useEventCallback(() => rangePositionResponse.setRangePosition('start'))
   }));
   const Field = slots.field;
   const _useSlotProps = useSlotProps({
       elementType: Field,
       externalSlotProps: slotProps?.field,
-      ownerState
+      ownerState,
+      additionalProps: {
+        'data-active-range-position': providerProps.contextValue.open ? rangePositionResponse.rangePosition : undefined
+      }
     }),
     fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const Layout = slots?.layout ?? PickersLayout;

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,26 +1,27 @@
 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';
+import useEventCallback from '@mui/utils/useEventCallback';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { useLicenseVerifier } from '@mui/x-license';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
 import { usePicker, PickersModalDialog, PickerProvider, PickerFieldUIContextProvider } from '@mui/x-date-pickers/internals';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
-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);
+  useLicenseVerifier('x-date-pickers-pro', "MTc0NDg0MDgwMDAwMA==");
   const {
     slots,
     slotProps: innerSlotProps,
@@ -31,6 +32,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 +45,9 @@ export const useMobileRangePicker = _ref => {
     variant: 'mobile',
     autoFocusView: true,
     viewContainerRole: 'dialog',
-    localeText
+    localeText,
+    getStepNavigation,
+    onPopperExited: useEventCallback(() => rangePositionResponse.setRangePosition('start'))
   }));
   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/createMultiInputRangeField/useTextFieldProps.js

@@ -39,5 +39,6 @@ export function useTextFieldProps({
       textFieldProps.InputProps.ref = pickerContext.triggerRef;
     }
   }
+  textFieldProps.InputProps['data-multi-input'] = position;
   return textFieldProps;
 }

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 {};