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

package/internals/hooks/useMobilePicker/useMobilePicker.d.ts

@@ -9,6 +9,7 @@ import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
  */
 export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
   props,
+  steps,
   ...pickerParams
 }: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
   renderPicker: () => React.JSX.Element;

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -15,8 +15,9 @@ var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
 var _PickerProvider = require("../../components/PickerProvider");
 var _PickerFieldUI = require("../../components/PickerFieldUI");
+var _createNonRangePickerStepNavigation = require("../../utils/createNonRangePickerStepNavigation");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["props"],
+const _excluded = ["props", "steps"],
   _excluded2 = ["ownerState"];
 /**
  * Hook managing all the single-date mobile pickers:
@@ -26,7 +27,8 @@ const _excluded = ["props"],
  */
 const useMobilePicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
@@ -36,6 +38,9 @@ const useMobilePicker = _ref => {
     inputRef,
     localeText
   } = props;
+  const getStepNavigation = (0, _createNonRangePickerStepNavigation.createNonRangePickerStepNavigation)({
+    steps
+  });
   const {
     providerProps,
     renderCurrentView,
@@ -45,7 +50,8 @@ const useMobilePicker = _ref => {
     localeText,
     autoFocusView: true,
     viewContainerRole: 'dialog',
-    variant: 'mobile'
+    variant: 'mobile',
+    getStepNavigation
   }));
   const labelId = providerProps.privateContextValue.labelId;
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;

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

@@ -7,6 +7,7 @@ import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
 import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
 import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
+import { PickerStep } from "../../utils/createNonRangePickerStepNavigation.js";
 export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
   /**
    * Component used to enter the date with the keyboard.
@@ -32,4 +33,10 @@ export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem,
 }
 export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
   props: TExternalProps;
+  /**
+   * Steps available for the picker.
+   * This will be used to define the behavior of navigation actions.
+   * If null, the picker will not have any step navigation.
+   */
+  steps: PickerStep[] | null;
 }

package/internals/hooks/usePicker/hooks/useValueAndOpenStates.js

@@ -101,8 +101,8 @@ function useValueAndOpenStates(parameters) {
     if (newOpen && onOpen) {
       onOpen();
     }
-    if (!newOpen && onClose) {
-      onClose();
+    if (!newOpen) {
+      onClose?.();
     }
   });
   const setValue = (0, _useEventCallback.default)((newValue, options) => {
@@ -168,6 +168,7 @@ function useValueAndOpenStates(parameters) {
         clockShallowValue: newValue,
         hasBeenModifiedSinceMount: true
       }));
+      return;
     }
     setValue(newValue, {
       changeImportance: selectionState === 'finish' && closeOnSelect ? 'accept' : 'set'

package/internals/hooks/usePicker/usePicker.d.ts

@@ -7,8 +7,10 @@ export declare const usePicker: <TValue extends PickerValidValue, TView extends
   valueType,
   variant,
   validator,
+  onPopperExited,
   autoFocusView,
   rendererInterceptor: RendererInterceptor,
   localeText,
-  viewContainerRole
+  viewContainerRole,
+  getStepNavigation
 }: UsePickerParameters<TValue, TView, TExternalProps>) => UsePickerReturnValue<TValue>;

package/internals/hooks/usePicker/usePicker.js

@@ -28,10 +28,12 @@ const usePicker = ({
   valueType,
   variant,
   validator,
+  onPopperExited,
   autoFocusView,
   rendererInterceptor: RendererInterceptor,
   localeText,
-  viewContainerRole
+  viewContainerRole,
+  getStepNavigation
 }) => {
   const {
     // View props
@@ -43,6 +45,7 @@ const usePicker = ({
     reduceAnimations: reduceAnimationsProp,
     orientation: orientationProp,
     disableOpenPicker,
+    closeOnSelect,
     // Form props
     disabled,
     readOnly,
@@ -102,14 +105,18 @@ const usePicker = ({
     defaultView,
     focusedView,
     setFocusedView,
-    setValueAndGoToNextView
+    setValueAndGoToNextView,
+    goToNextStep,
+    hasNextStep,
+    hasSeveralSteps
   } = (0, _useViews.useViews)({
     view: viewProp,
     views,
     openTo,
     onChange: setValueFromView,
     onViewChange,
-    autoFocus: autoFocusView
+    autoFocus: autoFocusView,
+    getStepNavigation
   });
   const clearValue = (0, _useEventCallback.default)(() => setValue(valueManager.emptyValue));
   const setValueToToday = (0, _useEventCallback.default)(() => setValue(valueManager.getTodayValue(utils, timezone, valueType)));
@@ -198,6 +205,13 @@ const usePicker = ({
     }
     return 'enabled';
   }, [disableOpenPicker, hasUIView, disabled, readOnly]);
+  const wrappedGoToNextStep = (0, _useEventCallback.default)(goToNextStep);
+  const defaultActionBarActions = React.useMemo(() => {
+    if (closeOnSelect && !hasSeveralSteps) {
+      return [];
+    }
+    return ['cancel', 'nextOrAccept'];
+  }, [closeOnSelect, hasSeveralSteps]);
   const actionsContextValue = React.useMemo(() => ({
     setValue,
     setOpen,
@@ -205,8 +219,9 @@ const usePicker = ({
     setValueToToday,
     acceptValueChanges,
     cancelValueChanges,
-    setView
-  }), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges, setView]);
+    setView,
+    goToNextStep: wrappedGoToNextStep
+  }), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges, setView, wrappedGoToNextStep]);
   const contextValue = React.useMemo(() => (0, _extends2.default)({}, actionsContextValue, {
     value,
     timezone,
@@ -223,13 +238,14 @@ const usePicker = ({
     reduceAnimations,
     triggerRef,
     triggerStatus,
+    hasNextStep,
     fieldFormat: format ?? '',
     name,
     label,
     rootSx: sx,
     rootRef,
     rootClassName: className
-  }), [actionsContextValue, value, rootRef, variant, orientation, reduceAnimations, disabled, readOnly, format, className, name, label, sx, triggerStatus, timezone, state.open, popperView, views, initialView, autoFocus]);
+  }), [actionsContextValue, value, rootRef, variant, orientation, reduceAnimations, disabled, readOnly, format, className, name, label, sx, triggerStatus, hasNextStep, timezone, state.open, popperView, views, initialView, autoFocus]);
   const privateContextValue = React.useMemo(() => ({
     dismissViews,
     ownerState,
@@ -238,8 +254,10 @@ const usePicker = ({
     rootRefObject,
     labelId,
     triggerElement,
-    viewContainerRole
-  }), [dismissViews, ownerState, hasUIView, getCurrentViewMode, labelId, triggerElement, viewContainerRole]);
+    viewContainerRole,
+    defaultActionBarActions,
+    onPopperExited
+  }), [dismissViews, ownerState, hasUIView, getCurrentViewMode, labelId, triggerElement, viewContainerRole, defaultActionBarActions, onPopperExited]);
   const fieldPrivateContextValue = React.useMemo(() => ({
     formatDensity,
     enableAccessibleFieldDOMStructure,

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

@@ -7,11 +7,12 @@ import { UseViewsOptions } from "../useViews.js";
 import { PickerProviderProps } from "../../components/PickerProvider.js";
 import { PickersInputLocaleText } from "../../../locales/index.js";
 import { PickerFieldPrivateContextValue } from "../useNullableFieldPrivateContext.js";
+import { CreateStepNavigationReturnValue } from "../../utils/createStepNavigation.js";
 /**
  * Props common to all Picker headless implementations.
  * Those props are exposed on all the Pickers.
  */
-export interface UsePickerBaseProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<TValue, TView, TError, any>> extends OnErrorProps<TValue, TError>, Omit<UseViewsOptions<any, TView>, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps, FormProps {
+export interface UsePickerBaseProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<TValue, TView, TError, any>> extends OnErrorProps<TValue, TError>, Omit<UseViewsOptions<any, TView>, 'onChange' | 'onFocusedViewChange' | 'focusedView' | 'getStepNavigation'>, TimezoneProps, FormProps {
   /**
    * The selected value.
    * Used when the component is controlled.
@@ -89,7 +90,7 @@ export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextV
   format?: string;
   /**
    * 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?: boolean;
@@ -130,6 +131,8 @@ export interface UsePickerParameters<TValue extends PickerValidValue, TView exte
    */
   rendererInterceptor?: React.JSXElementConstructor<PickerRendererInterceptorProps<TValue, TView, TExternalProps>>;
   props: TExternalProps;
+  getStepNavigation: CreateStepNavigationReturnValue;
+  onPopperExited?: () => void;
 }
 export interface UsePickerReturnValue<TValue extends PickerValidValue> {
   ownerState: PickerOwnerState;

package/internals/hooks/useStaticPicker/useStaticPicker.d.ts

@@ -9,6 +9,7 @@ import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
  */
 export declare const useStaticPicker: <TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TView, any, TExternalProps>>({
   props,
+  steps,
   ...pickerParams
 }: UseStaticPickerParams<TView, TExternalProps>) => {
   renderPicker: () => React.JSX.Element;

package/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -16,8 +16,9 @@ var _PickerProvider = require("../../components/PickerProvider");
 var _PickersLayout = require("../../../PickersLayout");
 var _dimensions = require("../../constants/dimensions");
 var _utils = require("../../utils/utils");
+var _createNonRangePickerStepNavigation = require("../../utils/createNonRangePickerStepNavigation");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["props"];
+const _excluded = ["props", "steps"];
 const PickerStaticLayout = (0, _styles.styled)(_PickersLayout.PickersLayout)(({
   theme
 }) => ({
@@ -34,7 +35,8 @@ const PickerStaticLayout = (0, _styles.styled)(_PickersLayout.PickersLayout)(({
  */
 const useStaticPicker = _ref => {
   let {
-      props
+      props,
+      steps
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
@@ -44,6 +46,9 @@ const useStaticPicker = _ref => {
     displayStaticWrapperAs,
     autoFocus
   } = props;
+  const getStepNavigation = (0, _createNonRangePickerStepNavigation.createNonRangePickerStepNavigation)({
+    steps
+  });
   const {
     providerProps,
     renderCurrentView
@@ -52,7 +57,8 @@ const useStaticPicker = _ref => {
     variant: displayStaticWrapperAs,
     autoFocusView: autoFocus ?? false,
     viewContainerRole: null,
-    localeText
+    localeText,
+    getStepNavigation
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {

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

@@ -2,6 +2,7 @@ import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from "../.
 import { BasePickerProps } from "../../models/props/basePickerProps.js";
 import { UsePickerParameters, UsePickerProps } from "../usePicker/index.js";
 import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
+import { PickerStep } from "../../utils/createNonRangePickerStepNavigation.js";
 export interface UseStaticPickerSlots extends ExportedPickersLayoutSlots<PickerValue> {}
 export interface UseStaticPickerSlotProps extends ExportedPickersLayoutSlotProps<PickerValue> {}
 export interface StaticOnlyPickerProps {
@@ -36,4 +37,10 @@ export interface UseStaticPickerProps<TView extends DateOrTimeViewWithMeridiem,
 }
 export interface UseStaticPickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
   props: TExternalProps;
+  /**
+   * Steps available for the picker.
+   * This will be used to define the behavior of navigation actions.
+   * If null, the picker will not have any step navigation.
+   */
+  steps: PickerStep[] | null;
 }

package/internals/hooks/useViews.d.ts

@@ -2,6 +2,7 @@ import { MakeOptional } from '@mui/x-internals/types';
 import type { PickerSelectionState } from './usePicker';
 import { DateOrTimeViewWithMeridiem, PickerValidValue } from "../models/index.js";
 import { PickerValidDate } from "../../models/index.js";
+import { CreateStepNavigationReturnValue } from "../utils/createStepNavigation.js";
 export type PickerOnChangeFn = (date: PickerValidDate | null, selectionState?: PickerSelectionState) => void;
 export interface UseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
   /**
@@ -53,8 +54,9 @@ export interface UseViewsOptions<TValue extends PickerValidValue, TView extends
    * @param {boolean} hasFocus `true` if the view should be focused.
    */
   onFocusedViewChange?: (view: TView, hasFocus: boolean) => void;
+  getStepNavigation?: CreateStepNavigationReturnValue;
 }
-export interface ExportedUseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends MakeOptional<UseViewsOptions<TValue, TView>, 'onChange' | 'openTo' | 'views'> {}
+export interface ExportedUseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends Omit<MakeOptional<UseViewsOptions<TValue, TView>, 'onChange' | 'openTo' | 'views'>, 'getStepNavigation'> {}
 interface UseViewsResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
   view: TView;
   setView: (view: TView) => void;
@@ -65,6 +67,9 @@ interface UseViewsResponse<TValue extends PickerValidValue, TView extends DateOr
   defaultView: TView;
   goToNextView: () => void;
   setValueAndGoToNextView: (value: TValue, currentViewSelectionState?: PickerSelectionState, selectedView?: TView) => void;
+  hasNextStep: boolean;
+  hasSeveralSteps: boolean;
+  goToNextStep: () => void;
 }
 export declare function useViews<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem>({
   onChange,
@@ -74,6 +79,7 @@ export declare function useViews<TValue extends PickerValidValue, TView extends
   views,
   autoFocus,
   focusedView: inFocusedView,
-  onFocusedViewChange
+  onFocusedViewChange,
+  getStepNavigation
 }: UseViewsOptions<TValue, TView>): UseViewsResponse<TValue, TView>;
 export {};

package/internals/hooks/useViews.js

@@ -1,14 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useViews = useViews;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
+var _createStepNavigation = require("../utils/createStepNavigation");
 let warnedOnceNotValidView = false;
 function useViews({
   onChange,
@@ -18,7 +20,8 @@ function useViews({
   views,
   autoFocus,
   focusedView: inFocusedView,
-  onFocusedViewChange
+  onFocusedViewChange,
+  getStepNavigation
 }) {
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnceNotValidView) {
@@ -48,6 +51,12 @@ function useViews({
     controlled: inFocusedView,
     default: defaultFocusedView.current
   });
+  const stepNavigation = getStepNavigation ? getStepNavigation({
+    setView,
+    view,
+    defaultView: defaultView.current,
+    views
+  }) : _createStepNavigation.DEFAULT_STEP_NAVIGATION;
   React.useEffect(() => {
     // Update the current view when `openTo` or `views` props change
     if (previousOpenTo.current && previousOpenTo.current !== openTo || previousViews.current && previousViews.current.some(previousView => !views.includes(previousView))) {
@@ -94,19 +103,25 @@ function useViews({
     views.indexOf(selectedView) < views.length - 1 : Boolean(nextView);
     const globalSelectionState = isSelectionFinishedOnCurrentView && hasMoreViews ? 'partial' : currentViewSelectionState;
     onChange(value, globalSelectionState, selectedView);
-    // Detects if the selected view is not the active one.
-    // Can happen if multiple views are displayed, like in `DesktopDateTimePicker` or `MultiSectionDigitalClock`.
-    if (selectedView && selectedView !== view) {
-      const nextViewAfterSelected = views[views.indexOf(selectedView) + 1];
-      if (nextViewAfterSelected) {
-        // move to next view after the selected one
-        handleChangeView(nextViewAfterSelected);
-      }
+
+    // The selected view can be different from the active view,
+    // This can happen if multiple views are displayed, like in `DesktopDateTimePicker` or `MultiSectionDigitalClock`.
+    let currentView = null;
+    if (selectedView != null && selectedView !== view) {
+      currentView = selectedView;
     } else if (isSelectionFinishedOnCurrentView) {
-      goToNextView();
+      currentView = view;
     }
+    if (currentView == null) {
+      return;
+    }
+    const viewToNavigateTo = views[views.indexOf(currentView) + 1];
+    if (viewToNavigateTo == null || !stepNavigation.areViewsInSameStep(currentView, viewToNavigateTo)) {
+      return;
+    }
+    handleChangeView(viewToNavigateTo);
   });
-  return {
+  return (0, _extends2.default)({}, stepNavigation, {
     view,
     setView: handleChangeView,
     focusedView,
@@ -117,5 +132,5 @@ function useViews({
     defaultView: views.includes(openTo) ? openTo : views[0],
     goToNextView,
     setValueAndGoToNextView
-  };
+  });
 }

package/internals/index.d.ts

@@ -53,9 +53,10 @@ export type { FormProps } from './models/formProps';
 export type { PickerVariant, TimeViewWithMeridiem, DateOrTimeViewWithMeridiem } from './models/common';
 export type { BaseDateValidationProps, BaseTimeValidationProps, TimeValidationProps, MonthValidationProps, YearValidationProps, DayValidationProps, DateTimeValidationProps } from './models/validation';
 export type { PickerValue, PickerRangeValue, PickerNonNullableRangeValue, InferNonNullablePickerValue, PickerValidValue } from './models/value';
-export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem } from "./utils/date-utils.js";
+export { createStepNavigation } from "./utils/createStepNavigation.js";
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem, DATE_VIEWS } from "./utils/date-utils.js";
 export { getDefaultReferenceDate } from "./utils/getDefaultReferenceDate.js";
-export { isTimeView, isInternalTimeView, resolveTimeFormat, getMeridiem } from "./utils/time-utils.js";
+export { isTimeView, isInternalTimeView, resolveTimeFormat, getMeridiem, TIME_VIEWS } from "./utils/time-utils.js";
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-time-utils.js";
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.js";
 export { useReduceAnimations } from "./hooks/useReduceAnimations.js";

package/internals/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DATE_VIEWS", {
+  enumerable: true,
+  get: function () {
+    return _dateUtils.DATE_VIEWS;
+  }
+});
 Object.defineProperty(exports, "DAY_MARGIN", {
   enumerable: true,
   get: function () {
@@ -99,6 +105,12 @@ Object.defineProperty(exports, "PickersToolbarText", {
     return _PickersToolbarText.PickersToolbarText;
   }
 });
+Object.defineProperty(exports, "TIME_VIEWS", {
+  enumerable: true,
+  get: function () {
+    return _timeUtils.TIME_VIEWS;
+  }
+});
 Object.defineProperty(exports, "VIEW_HEIGHT", {
   enumerable: true,
   get: function () {
@@ -141,6 +153,12 @@ Object.defineProperty(exports, "createDateStrForV7HiddenInputFromSections", {
     return _useField.createDateStrForV7HiddenInputFromSections;
   }
 });
+Object.defineProperty(exports, "createStepNavigation", {
+  enumerable: true,
+  get: function () {
+    return _createStepNavigation.createStepNavigation;
+  }
+});
 Object.defineProperty(exports, "executeInTheNextEventLoopTick", {
   enumerable: true,
   get: function () {
@@ -436,6 +454,7 @@ var _useToolbarOwnerState = require("./hooks/useToolbarOwnerState");
 var _useUtils = require("./hooks/useUtils");
 var _useViews = require("./hooks/useViews");
 var _dateHelpersHooks = require("./hooks/date-helpers-hooks");
+var _createStepNavigation = require("./utils/createStepNavigation");
 var _dateUtils = require("./utils/date-utils");
 var _getDefaultReferenceDate = require("./utils/getDefaultReferenceDate");
 var _timeUtils = require("./utils/time-utils");

package/internals/utils/createNonRangePickerStepNavigation.d.ts

@@ -0,0 +1,13 @@
+import { DateOrTimeViewWithMeridiem } from "../models/common.js";
+export declare function createNonRangePickerStepNavigation(parameters: CreateNonRangePickerStepNavigationParameters): import("./createStepNavigation").CreateStepNavigationReturnValue;
+export interface PickerStep {
+  /**
+   * The views that are handled inside this step.
+   * If null, all views are handled by this step.
+   */
+  views: readonly DateOrTimeViewWithMeridiem[] | null;
+}
+interface CreateNonRangePickerStepNavigationParameters {
+  steps: PickerStep[] | null;
+}
+export {};

package/internals/utils/createNonRangePickerStepNavigation.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createNonRangePickerStepNavigation = createNonRangePickerStepNavigation;
+var _createStepNavigation = require("./createStepNavigation");
+function createNonRangePickerStepNavigation(parameters) {
+  const {
+    steps
+  } = parameters;
+  return (0, _createStepNavigation.createStepNavigation)({
+    steps,
+    isViewMatchingStep: (view, step) => {
+      return step.views == null || step.views.includes(view);
+    },
+    onStepChange: ({
+      step,
+      defaultView,
+      setView,
+      view,
+      views
+    }) => {
+      const targetView = step.views == null ? defaultView : step.views.find(viewBis => views.includes(viewBis));
+      if (targetView !== view) {
+        setView(targetView);
+      }
+    }
+  });
+}

package/internals/utils/createStepNavigation.d.ts

@@ -0,0 +1,49 @@
+import { DateOrTimeViewWithMeridiem } from "../models/index.js";
+export declare const DEFAULT_STEP_NAVIGATION: {
+  hasNextStep: boolean;
+  hasSeveralSteps: boolean;
+  goToNextStep: () => void;
+  areViewsInSameStep: () => boolean;
+};
+/**
+ * Create an object that determines whether there is a next step and allows to go to the next step.
+ * @param {CreateStepNavigationParameters<TStep>} parameters The parameters of the createStepNavigation function
+ * @returns {CreateStepNavigationReturnValue} The return value of the createStepNavigation function
+ */
+export declare function createStepNavigation<TStep extends {}>(parameters: CreateStepNavigationParameters<TStep>): CreateStepNavigationReturnValue;
+interface CreateStepNavigationParameters<TStep extends {}> {
+  steps: TStep[] | null;
+  isViewMatchingStep: (view: DateOrTimeViewWithMeridiem, step: TStep) => boolean;
+  onStepChange: (parameters: UseRangePickerStepNavigationOnStepChangeParameters<TStep>) => void;
+}
+export type CreateStepNavigationReturnValue = (parameters: CreateStepNavigationReturnValueParameters) => {
+  /**
+   * Whether there is a next step.
+   */
+  hasNextStep: boolean;
+  /**
+   * Whether there are several steps.
+   */
+  hasSeveralSteps: boolean;
+  /**
+   * Go to the next step if any.
+   */
+  goToNextStep: () => void;
+  /**
+   * Whether the two views are in the same step.
+   * @param {DateOrTimeViewWithMeridiem} viewA The first view to compare.
+   * @param {DateOrTimeViewWithMeridiem} viewB The second view to compare.
+   * @returns {boolean} Whether the two views are in the same step.
+   */
+  areViewsInSameStep: (viewA: DateOrTimeViewWithMeridiem, viewB: DateOrTimeViewWithMeridiem) => boolean;
+};
+export interface CreateStepNavigationReturnValueParameters {
+  defaultView: DateOrTimeViewWithMeridiem;
+  view: DateOrTimeViewWithMeridiem;
+  views: readonly DateOrTimeViewWithMeridiem[];
+  setView: (view: any) => void;
+}
+interface UseRangePickerStepNavigationOnStepChangeParameters<TStep extends {}> extends CreateStepNavigationReturnValueParameters {
+  step: TStep;
+}
+export {};

package/internals/utils/createStepNavigation.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_STEP_NAVIGATION = void 0;
+exports.createStepNavigation = createStepNavigation;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const DEFAULT_STEP_NAVIGATION = exports.DEFAULT_STEP_NAVIGATION = {
+  hasNextStep: false,
+  hasSeveralSteps: false,
+  goToNextStep: () => {},
+  areViewsInSameStep: () => true
+};
+
+/**
+ * Create an object that determines whether there is a next step and allows to go to the next step.
+ * @param {CreateStepNavigationParameters<TStep>} parameters The parameters of the createStepNavigation function
+ * @returns {CreateStepNavigationReturnValue} The return value of the createStepNavigation function
+ */
+function createStepNavigation(parameters) {
+  const {
+    steps,
+    isViewMatchingStep,
+    onStepChange
+  } = parameters;
+  return parametersBis => {
+    if (steps == null) {
+      return DEFAULT_STEP_NAVIGATION;
+    }
+    const currentStepIndex = steps.findIndex(step => isViewMatchingStep(parametersBis.view, step));
+    const nextStep = currentStepIndex === -1 || currentStepIndex === steps.length - 1 ? null : steps[currentStepIndex + 1];
+    return {
+      hasNextStep: nextStep != null,
+      hasSeveralSteps: steps.length > 1,
+      goToNextStep: () => {
+        if (nextStep == null) {
+          return;
+        }
+        onStepChange((0, _extends2.default)({}, parametersBis, {
+          step: nextStep
+        }));
+      },
+      areViewsInSameStep: (viewA, viewB) => {
+        const stepA = steps.find(step => isViewMatchingStep(viewA, step));
+        const stepB = steps.find(step => isViewMatchingStep(viewB, step));
+        return stepA === stepB;
+      }
+    };
+  };
+}

package/internals/utils/date-utils.d.ts

@@ -27,6 +27,7 @@ export declare const areDatesEqual: (utils: MuiPickersAdapter, a: PickerValidDat
 export declare const getMonthsInYear: (utils: MuiPickersAdapter, year: PickerValidDate) => PickerValidDate[];
 export declare const getTodayDate: (utils: MuiPickersAdapter, timezone: PickersTimezone, valueType?: PickerValueType) => PickerValidDate;
 export declare const formatMeridiem: (utils: MuiPickersAdapter, meridiem: "am" | "pm") => string;
+export declare const DATE_VIEWS: readonly ["year", "month", "day"];
 export declare const isDatePickerView: (view: DateOrTimeViewWithMeridiem) => view is DateView;
 export declare const resolveDateFormat: (utils: MuiPickersAdapter, {
   format,