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

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 = "MTc0MjUxNTIwMDAwMA==";
+  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/esm/managers/useDateRangeManager.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
-import { getDateFieldInternalPropsDefaults, useUtils } from '@mui/x-date-pickers/internals';
+import { useApplyDefaultValuesToDateValidationProps, useUtils } from '@mui/x-date-pickers/internals';
 import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
 import { validateDateRange } from "../validation/index.js";
 import { formatRange } from "../internals/utils/date-utils.js";
@@ -20,15 +20,7 @@ export function useDateRangeManager(parameters = {}) {
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils,
-      defaultDates
-    }) => _extends({}, internalProps, getDateFieldInternalPropsDefaults({
-      defaultDates,
-      utils,
-      internalProps
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateRangeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }
@@ -38,4 +30,11 @@ function useOpenPickerButtonAriaLabel(value) {
   return React.useMemo(() => {
     return translations.openRangePickerDialogue(formatRange(utils, value, 'fullDate'));
   }, [value, translations, utils]);
+}
+function useApplyDefaultValuesToDateRangeFieldInternalProps(internalProps) {
+  const utils = useUtils();
+  const validationProps = useApplyDefaultValuesToDateValidationProps(internalProps);
+  return React.useMemo(() => _extends({}, internalProps, validationProps, {
+    format: internalProps.format ?? utils.formats.keyboardDate
+  }), [internalProps, validationProps, utils]);
 }

package/esm/managers/useDateTimeRangeManager.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
-import { getDateTimeFieldInternalPropsDefaults, useUtils } from '@mui/x-date-pickers/internals';
+import { useApplyDefaultValuesToDateTimeValidationProps, useUtils } from '@mui/x-date-pickers/internals';
 import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
 import { validateDateTimeRange } from "../validation/index.js";
 import { formatRange } from "../internals/utils/date-utils.js";
@@ -20,15 +20,7 @@ export function useDateTimeRangeManager(parameters = {}) {
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils,
-      defaultDates
-    }) => _extends({}, internalProps, getDateTimeFieldInternalPropsDefaults({
-      internalProps,
-      utils,
-      defaultDates
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateTimeRangeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }
@@ -38,4 +30,12 @@ function useOpenPickerButtonAriaLabel(value) {
   return React.useMemo(() => {
     return translations.openRangePickerDialogue(formatRange(utils, value, 'fullDate'));
   }, [value, translations, utils]);
+}
+function useApplyDefaultValuesToDateTimeRangeFieldInternalProps(internalProps) {
+  const utils = useUtils();
+  const validationProps = useApplyDefaultValuesToDateTimeValidationProps(internalProps);
+  const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
+  return React.useMemo(() => _extends({}, internalProps, validationProps, {
+    format: internalProps.format ?? (ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h)
+  }), [internalProps, validationProps, ampm, utils]);
 }

package/esm/managers/useTimeRangeManager.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
-import { getTimeFieldInternalPropsDefaults, useUtils } from '@mui/x-date-pickers/internals';
+import { useApplyDefaultValuesToTimeValidationProps, useUtils } from '@mui/x-date-pickers/internals';
 import { getRangeFieldValueManager, rangeValueManager } from "../internals/utils/valueManagers.js";
 import { validateTimeRange } from "../validation/index.js";
 import { formatRange } from "../internals/utils/date-utils.js";
@@ -21,13 +21,7 @@ export function useTimeRangeManager(parameters = {}) {
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils
-    }) => _extends({}, internalProps, getTimeFieldInternalPropsDefaults({
-      utils,
-      internalProps
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToTimeRangeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: createUseOpenPickerButtonAriaLabel(ampm)
   }), [enableAccessibleFieldDOMStructure, dateSeparator, ampm]);
 }
@@ -40,4 +34,12 @@ function createUseOpenPickerButtonAriaLabel(ampm) {
       return translations.openRangePickerDialogue(formatRange(utils, value, formatKey));
     }, [value, translations, utils]);
   };
+}
+function useApplyDefaultValuesToTimeRangeFieldInternalProps(internalProps) {
+  const utils = useUtils();
+  const validationProps = useApplyDefaultValuesToTimeValidationProps(internalProps);
+  const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
+  return React.useMemo(() => _extends({}, internalProps, validationProps, {
+    format: internalProps.format ?? (ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h)
+  }), [internalProps, validationProps, ampm, utils]);
 }

package/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/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);
+      }
+    }
+  });
+}

package/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTc0MjUxNTIwMDAwMA==";
+  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/managers/useDateRangeManager.js

@@ -27,15 +27,7 @@ function useDateRangeManager(parameters = {}) {
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils,
-      defaultDates
-    }) => (0, _extends2.default)({}, internalProps, (0, _internals.getDateFieldInternalPropsDefaults)({
-      defaultDates,
-      utils,
-      internalProps
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateRangeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }
@@ -45,4 +37,11 @@ function useOpenPickerButtonAriaLabel(value) {
   return React.useMemo(() => {
     return translations.openRangePickerDialogue((0, _dateUtils.formatRange)(utils, value, 'fullDate'));
   }, [value, translations, utils]);
+}
+function useApplyDefaultValuesToDateRangeFieldInternalProps(internalProps) {
+  const utils = (0, _internals.useUtils)();
+  const validationProps = (0, _internals.useApplyDefaultValuesToDateValidationProps)(internalProps);
+  return React.useMemo(() => (0, _extends2.default)({}, internalProps, validationProps, {
+    format: internalProps.format ?? utils.formats.keyboardDate
+  }), [internalProps, validationProps, utils]);
 }

package/managers/useDateTimeRangeManager.js

@@ -27,15 +27,7 @@ function useDateTimeRangeManager(parameters = {}) {
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils,
-      defaultDates
-    }) => (0, _extends2.default)({}, internalProps, (0, _internals.getDateTimeFieldInternalPropsDefaults)({
-      internalProps,
-      utils,
-      defaultDates
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateTimeRangeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }
@@ -45,4 +37,12 @@ function useOpenPickerButtonAriaLabel(value) {
   return React.useMemo(() => {
     return translations.openRangePickerDialogue((0, _dateUtils.formatRange)(utils, value, 'fullDate'));
   }, [value, translations, utils]);
+}
+function useApplyDefaultValuesToDateTimeRangeFieldInternalProps(internalProps) {
+  const utils = (0, _internals.useUtils)();
+  const validationProps = (0, _internals.useApplyDefaultValuesToDateTimeValidationProps)(internalProps);
+  const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
+  return React.useMemo(() => (0, _extends2.default)({}, internalProps, validationProps, {
+    format: internalProps.format ?? (ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h)
+  }), [internalProps, validationProps, ampm, utils]);
 }

package/managers/useTimeRangeManager.js

@@ -28,13 +28,7 @@ function useTimeRangeManager(parameters = {}) {
       dateSeparator
     }),
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils
-    }) => (0, _extends2.default)({}, internalProps, (0, _internals.getTimeFieldInternalPropsDefaults)({
-      utils,
-      internalProps
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToTimeRangeFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: createUseOpenPickerButtonAriaLabel(ampm)
   }), [enableAccessibleFieldDOMStructure, dateSeparator, ampm]);
 }
@@ -47,4 +41,12 @@ function createUseOpenPickerButtonAriaLabel(ampm) {
       return translations.openRangePickerDialogue((0, _dateUtils.formatRange)(utils, value, formatKey));
     }, [value, translations, utils]);
   };
+}
+function useApplyDefaultValuesToTimeRangeFieldInternalProps(internalProps) {
+  const utils = (0, _internals.useUtils)();
+  const validationProps = (0, _internals.useApplyDefaultValuesToTimeValidationProps)(internalProps);
+  const ampm = React.useMemo(() => internalProps.ampm ?? utils.is12HourCycleInCurrentLocale(), [internalProps.ampm, utils]);
+  return React.useMemo(() => (0, _extends2.default)({}, internalProps, validationProps, {
+    format: internalProps.format ?? (ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h)
+  }), [internalProps, validationProps, ampm, utils]);
 }

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -15,7 +15,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import { Watermark } from '@mui/x-license';
-import { applyDefaultDate, DayCalendar, useReduceAnimations, useCalendarState, useDefaultDates, useUtils, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValue, useViews, usePickerPrivateContext, areDatesEqual } from '@mui/x-date-pickers/internals';
+import { DayCalendar, useReduceAnimations, useCalendarState, useUtils, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValue, useViews, usePickerPrivateContext, areDatesEqual, useApplyDefaultValuesToDateValidationProps } from '@mui/x-date-pickers/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from "./dateRangeCalendarClasses.js";
@@ -74,25 +74,20 @@ const InnerDayCalendarForRange = styled(DayCalendar)(({
 }));
 const DayCalendarForRange = InnerDayCalendarForRange;
 function useDateRangeCalendarDefaultizedProps(props, name) {
-  const utils = useUtils();
-  const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
   const reduceAnimations = useReduceAnimations(themeProps.reduceAnimations);
-  return _extends({}, themeProps, {
+  const validationProps = useApplyDefaultValuesToDateValidationProps(themeProps);
+  return _extends({}, themeProps, validationProps, {
     renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/_jsx("span", {
       children: "..."
     })),
     reduceAnimations,
     loading: props.loading ?? false,
-    disablePast: props.disablePast ?? false,
-    disableFuture: props.disableFuture ?? false,
     openTo: themeProps.openTo ?? 'day',
     views: themeProps.views ?? ['day'],
-    minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
     calendars: themeProps.calendars ?? 2,
     disableDragEditing: themeProps.disableDragEditing ?? false,
     availableRangePositions: themeProps.availableRangePositions ?? ['start', 'end']