@mui/x-date-pickers 9.0.0-alpha.1 → 9.0.0-alpha.2

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

@@ -0,0 +1,200 @@
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+import { InferError, OnErrorProps, PickerChangeHandlerContext, PickerOwnerState, PickerValidDate, PickerValueType, TimezoneProps } from "../../../models/index.mjs";
+import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerRangeValue, PickerValidValue, PickerValueManager, PickerVariant } from "../../models/index.mjs";
+import { Validator } from "../../../validation/index.mjs";
+import { UseViewsOptions } from "../useViews.mjs";
+import { PickerProviderProps } from "../../components/PickerProvider.mjs";
+import { PickersInputLocaleText } from "../../../locales/index.mjs";
+import { PickerFieldPrivateContextValue } from "../useNullableFieldPrivateContext.mjs";
+import { CreateStepNavigationReturnValue } from "../../utils/createStepNavigation.mjs";
+/**
+ * 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' | 'getStepNavigation'>, TimezoneProps, FormProps {
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: TValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: TValue;
+  /**
+   * Callback fired when the value changes.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TValue} value The new value.
+   * @param {FieldChangeHandlerContext<TError>} context Context about this change:
+   * - `validationError`: validation result of the current value
+   * - `source`: source of the change. One of 'field' | 'view' | 'unknown'
+   * - `shortcut` (optional): the shortcut metadata if the change was triggered by a shortcut selection
+   */
+  onChange?: (value: TValue, context: PickerChangeHandlerContext<TError>) => void;
+  /**
+   * Callback fired when the value is accepted.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context Context about this acceptance:
+   * - `validationError`: validation result of the current value
+   * - `source`: source of the acceptance. One of 'field' | 'view' | 'unknown'
+   * - `shortcut` (optional): the shortcut metadata if the value was accepted via a shortcut selection
+   */
+  onAccept?: (value: TValue, context: PickerChangeHandlerContext<TError>) => void;
+  /**
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps>;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
+  /**
+   * Force rendering in particular orientation.
+   */
+  orientation?: PickerOrientation;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+}
+/**
+ * Props used to handle the value of non-static Pickers.
+ */
+export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextValue, 'fieldRef'> {
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  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://mui.com/x/react-date-pickers/fields/) instead.
+   * @default false
+   */
+  disableOpenPicker?: boolean;
+  /**
+   * The label content.
+   */
+  label?: React.ReactNode;
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name?: string;
+}
+export interface UsePickerProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<TValue, TView, TError, any>> extends UsePickerBaseProps<TValue, TView, TError, TExternalProps>, UsePickerNonStaticProps {
+  referenceDate?: TValue extends PickerRangeValue ? TValue | PickerValidDate : PickerValidDate;
+  className?: string;
+  sx?: SxProps<Theme>;
+}
+export interface UsePickerParameters<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>> {
+  ref: React.ForwardedRef<HTMLDivElement> | undefined;
+  localeText: PickersInputLocaleText | undefined;
+  variant: PickerVariant;
+  valueManager: PickerValueManager<TValue, InferError<TExternalProps>>;
+  valueType: PickerValueType;
+  validator: Validator<TValue, InferError<TExternalProps>, TExternalProps>;
+  autoFocusView: boolean;
+  viewContainerRole: 'dialog' | 'tooltip' | null;
+  /**
+   * A function that intercepts the regular Picker rendering.
+   * Can be used to consume the provided `viewRenderers` and render a custom component wrapping them.
+   * @param {PickerViewRendererLookup<TValue, TView, TExternalProps>} viewRenderers The `viewRenderers` provided to the Picker component.
+   * @param {TView} popperView The current Picker view.
+   * @param {any} rendererProps All the props being passed down to the renderer.
+   * @returns {React.ReactNode} A React node that will be rendered instead of the default renderer.
+   */
+  rendererInterceptor?: React.JSXElementConstructor<PickerRendererInterceptorProps<TValue, TView, TExternalProps>>;
+  props: TExternalProps;
+  getStepNavigation: CreateStepNavigationReturnValue;
+  onPopperExited?: () => void;
+}
+export interface UsePickerReturnValue<TValue extends PickerValidValue> {
+  ownerState: PickerOwnerState;
+  renderCurrentView: () => React.ReactNode;
+  providerProps: Omit<PickerProviderProps<TValue>, 'children'>;
+}
+export type PickerSelectionState = 'partial' | 'shallow' | 'finish';
+export interface UsePickerState<TValue extends PickerValidValue> {
+  /**
+   * Whether the Picker is open.
+   */
+  open: boolean;
+  /**
+   * Last value returned by `useControlledValue`.
+   */
+  lastExternalValue: TValue;
+  /**
+   * Date currently displayed on the views if we are dragging the cursor in the Clock component.
+   */
+  clockShallowValue: TValue | undefined;
+  /**
+   * Last value committed (the last value for which `shouldCommitValue` returned `true`).
+   * If `onAccept` is defined, it's the value that was passed on the last call to this callback.
+   */
+  lastCommittedValue: TValue;
+  /**
+   * If we never modified the value since the mount of the component,
+   * Then we might want to apply some custom logic.
+   *
+   * For example, when the component is not controlled and `defaultValue` is defined.
+   * Then clicking on "Accept", "Today" or "Clear" should fire `onAccept` with `defaultValue`, but clicking on "Cancel" or dismissing the Picker should not.
+   */
+  hasBeenModifiedSinceMount: boolean;
+}
+export interface PickerViewsRendererBaseExternalProps extends Omit<UsePickerProps<any, any, any, any>, 'openTo' | 'viewRenderers' | 'onChange'> {}
+export type PickerViewsRendererProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps> = Omit<TExternalProps, 'className' | 'sx'> & {
+  value: TValue;
+  onChange: (value: TValue, selectionState?: PickerSelectionState) => void;
+  view: TView;
+  views: readonly TView[];
+  focusedView: TView | null;
+  onFocusedViewChange: (viewToFocus: TView, hasFocus: boolean) => void;
+  showViewSwitcher: boolean;
+  timeViewsCount: number;
+};
+export type PickerViewRenderer<TValue extends PickerValidValue, TExternalProps extends PickerViewsRendererBaseExternalProps> = (props: PickerViewsRendererProps<TValue, any, TExternalProps>) => React.ReactNode;
+export type PickerViewRendererLookup<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps> = Record<TView, PickerViewRenderer<TValue, TExternalProps> | null>;
+export interface PickerRendererInterceptorProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, TExternalProps>> {
+  viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps>;
+  popperView: TView;
+  rendererProps: PickerViewsRendererProps<TValue, TView, TExternalProps>;
+}

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

@@ -74,6 +74,13 @@ export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextV
    * @default false
    */
   closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
   /**
    * Control the popup or dialog open state.
    * @default false

package/internals/hooks/usePickerPrivateContext.d.mts

@@ -0,0 +1,4 @@
+/**
+ * Returns the private context passed by the Picker wrapping the current component.
+ */
+export declare const usePickerPrivateContext: () => import("../components/PickerProvider.mjs").PickerPrivateContextValue;

package/internals/hooks/usePickerPrivateContext.mjs

@@ -0,0 +1,9 @@
+'use client';
+
+import * as React from 'react';
+import { PickerPrivateContext } from "../components/PickerProvider.mjs";
+
+/**
+ * Returns the private context passed by the Picker wrapping the current component.
+ */
+export const usePickerPrivateContext = () => React.useContext(PickerPrivateContext);

package/internals/hooks/useStaticPicker/index.d.mts

@@ -0,0 +1,2 @@
+export { useStaticPicker } from "./useStaticPicker.mjs";
+export type { UseStaticPickerSlots, UseStaticPickerSlotProps, StaticOnlyPickerProps } from "./useStaticPicker.types.mjs";

package/internals/hooks/useStaticPicker/index.mjs

@@ -0,0 +1 @@
+export { useStaticPicker } from "./useStaticPicker.mjs";

package/internals/hooks/useStaticPicker/useStaticPicker.d.mts

@@ -0,0 +1,15 @@
+import { UseStaticPickerParams, UseStaticPickerProps } from "./useStaticPicker.types.mjs";
+import { DateOrTimeViewWithMeridiem } from "../../models/index.mjs";
+/**
+ * Hook managing all the single-date static pickers:
+ * - StaticDatePicker
+ * - StaticDateTimePicker
+ * - StaticTimePicker
+ */
+export declare const useStaticPicker: <TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TView, any, TExternalProps>>({
+  props,
+  steps,
+  ...pickerParams
+}: UseStaticPickerParams<TView, TExternalProps>) => {
+  renderPicker: () => import("react/jsx-runtime").JSX.Element;
+};

package/internals/hooks/useStaticPicker/useStaticPicker.mjs

@@ -0,0 +1,73 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["props", "steps"];
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { usePicker } from "../usePicker/index.mjs";
+import { PickerProvider } from "../../components/PickerProvider.mjs";
+import { PickersLayout } from "../../../PickersLayout/index.mjs";
+import { DIALOG_WIDTH } from "../../constants/dimensions.mjs";
+import { mergeSx } from "../../utils/utils.mjs";
+import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const PickerStaticLayout = styled(PickersLayout, {
+  slot: 'internal'
+})(({
+  theme
+}) => ({
+  overflow: 'hidden',
+  minWidth: DIALOG_WIDTH,
+  backgroundColor: (theme.vars || theme).palette.background.paper
+}));
+
+/**
+ * Hook managing all the single-date static pickers:
+ * - StaticDatePicker
+ * - StaticDateTimePicker
+ * - StaticTimePicker
+ */
+export const useStaticPicker = _ref => {
+  let {
+      props,
+      steps
+    } = _ref,
+    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    localeText,
+    slots,
+    slotProps,
+    displayStaticWrapperAs,
+    autoFocus
+  } = props;
+  const getStepNavigation = createNonRangePickerStepNavigation({
+    steps
+  });
+  const {
+    providerProps,
+    renderCurrentView
+  } = usePicker(_extends({}, pickerParams, {
+    props,
+    variant: displayStaticWrapperAs,
+    autoFocusView: autoFocus ?? false,
+    viewContainerRole: null,
+    localeText,
+    getStepNavigation
+  }));
+  const Layout = slots?.layout ?? PickerStaticLayout;
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+    children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+      slots: slots,
+      slotProps: slotProps,
+      sx: mergeSx(providerProps.contextValue.rootSx, slotProps?.layout?.sx),
+      className: clsx(providerProps.contextValue.rootClassName, slotProps?.layout?.className),
+      ref: providerProps.contextValue.rootRef,
+      children: renderCurrentView()
+    }))
+  }));
+  if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
+  return {
+    renderPicker
+  };
+};

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

@@ -0,0 +1,46 @@
+import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.mjs";
+import { BasePickerProps } from "../../models/props/basePickerProps.mjs";
+import { UsePickerParameters, UsePickerProps } from "../usePicker/index.mjs";
+import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.mjs";
+import { PickerStep } from "../../utils/createNonRangePickerStepNavigation.mjs";
+export interface UseStaticPickerSlots extends ExportedPickersLayoutSlots<PickerValue> {}
+export interface UseStaticPickerSlotProps extends ExportedPickersLayoutSlotProps<PickerValue> {}
+export interface StaticOnlyPickerProps {
+  /**
+   * Force static wrapper inner components to be rendered in mobile or desktop mode.
+   * @default "mobile"
+   */
+  displayStaticWrapperAs: 'desktop' | 'mobile';
+  /**
+   * If `true`, the view is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Callback fired when component requests to be closed.
+   * Can be fired when selecting (by default on `desktop` mode) or clearing a value.
+   * @deprecated Please avoid using as it will be removed in next major version.
+   */
+  onClose?: () => void;
+}
+export interface UseStaticPickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, StaticOnlyPickerProps {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: UseStaticPickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: UseStaticPickerSlotProps;
+}
+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/useToolbarOwnerState.d.mts

@@ -0,0 +1,10 @@
+import { PickerOwnerState } from "../../models/index.mjs";
+export declare function useToolbarOwnerState(): PickerToolbarOwnerState;
+export interface PickerToolbarOwnerState extends PickerOwnerState {
+  /**
+   * The direction of the toolbar.
+   * Is equal to "ltr" when the toolbar is in left-to-right direction.
+   * Is equal to "rtl" when the toolbar is in right-to-left direction.
+   */
+  toolbarDirection: 'ltr' | 'rtl';
+}

package/internals/hooks/useToolbarOwnerState.mjs

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useRtl } from '@mui/system/RtlProvider';
+import { usePickerPrivateContext } from "./usePickerPrivateContext.mjs";
+export function useToolbarOwnerState() {
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const isRtl = useRtl();
+  return React.useMemo(() => _extends({}, pickerOwnerState, {
+    toolbarDirection: isRtl ? 'rtl' : 'ltr'
+  }), [pickerOwnerState, isRtl]);
+}

package/internals/hooks/useUtils.d.mts

@@ -0,0 +1,6 @@
+import { PickersTimezone, PickerValidDate } from "../../models/index.mjs";
+export declare const useDefaultDates: () => {
+  minDate: PickerValidDate;
+  maxDate: PickerValidDate;
+};
+export declare const useNow: (timezone: PickersTimezone) => PickerValidDate;

package/internals/hooks/useUtils.mjs

@@ -0,0 +1,13 @@
+'use client';
+
+import * as React from 'react';
+import { useLocalizationContext, usePickerAdapter } from "../../hooks/usePickerAdapter.mjs";
+export const useDefaultDates = () => useLocalizationContext().defaultDates;
+export const useNow = timezone => {
+  const adapter = usePickerAdapter();
+  const now = React.useRef(undefined);
+  if (now.current === undefined) {
+    now.current = adapter.date(undefined, timezone);
+  }
+  return now.current;
+};

package/internals/hooks/useViews.d.mts

@@ -0,0 +1,85 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import type { PickerSelectionState } from "./usePicker/index.mjs";
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from "../models/index.mjs";
+import { PickerValidDate } from "../../models/index.mjs";
+import { CreateStepNavigationReturnValue } from "../utils/createStepNavigation.mjs";
+export type PickerOnChangeFn = (date: PickerValidDate | null, selectionState?: PickerSelectionState) => void;
+export interface UseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
+  /**
+   * Callback fired when the value changes.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
+   * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
+   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
+   */
+  onChange: (value: TValue, selectionState?: PickerSelectionState, selectedView?: TView) => void;
+  /**
+   * Callback fired on view change.
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
+   * @param {TView} view The new view.
+   */
+  onViewChange?: (view: TView) => void;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: TView;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: TView;
+  /**
+   * Available views.
+   */
+  views: readonly TView[];
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  /**
+   * Controlled focused view.
+   */
+  focusedView?: TView | null;
+  /**
+   * Callback fired on focused view change.
+   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
+   * @param {TView} view The new view to focus or not.
+   * @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 Omit<MakeOptional<UseViewsOptions<TValue, TView>, 'onChange' | 'openTo' | 'views'>, 'getStepNavigation'> {}
+interface UseViewsResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
+  view: TView;
+  setView: (view: TView) => void;
+  focusedView: TView | null;
+  setFocusedView: (view: TView, hasFocus: boolean) => void;
+  nextView: TView | null;
+  previousView: TView | null;
+  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,
+  onViewChange,
+  openTo,
+  view: inView,
+  views,
+  autoFocus,
+  focusedView: inFocusedView,
+  onFocusedViewChange,
+  getStepNavigation
+}: UseViewsOptions<TValue, TView>): UseViewsResponse<TValue, TView>;
+export {};

package/internals/hooks/useViews.mjs

@@ -0,0 +1,130 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useControlled from '@mui/utils/useControlled';
+import { DEFAULT_STEP_NAVIGATION } from "../utils/createStepNavigation.mjs";
+let warnedOnceNotValidView = false;
+export function useViews({
+  onChange,
+  onViewChange,
+  openTo,
+  view: inView,
+  views,
+  autoFocus,
+  focusedView: inFocusedView,
+  onFocusedViewChange,
+  getStepNavigation
+}) {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedOnceNotValidView) {
+      if (inView != null && !views.includes(inView)) {
+        console.warn(`MUI X: \`view="${inView}"\` is not a valid prop.`, `It must be an element of \`views=["${views.join('", "')}"]\`.`);
+        warnedOnceNotValidView = true;
+      }
+      if (inView == null && openTo != null && !views.includes(openTo)) {
+        console.warn(`MUI X: \`openTo="${openTo}"\` is not a valid prop.`, `It must be an element of \`views=["${views.join('", "')}"]\`.`);
+        warnedOnceNotValidView = true;
+      }
+    }
+  }
+  const previousOpenTo = React.useRef(openTo);
+  const previousViews = React.useRef(views);
+  const defaultView = React.useRef(views.includes(openTo) ? openTo : views[0]);
+  const [view, setView] = useControlled({
+    name: 'useViews',
+    state: 'view',
+    controlled: inView,
+    default: defaultView.current
+  });
+  const defaultFocusedView = React.useRef(autoFocus ? view : null);
+  const [focusedView, setFocusedView] = useControlled({
+    name: 'useViews',
+    state: 'focusedView',
+    controlled: inFocusedView,
+    default: defaultFocusedView.current
+  });
+  const stepNavigation = getStepNavigation ? getStepNavigation({
+    setView,
+    view,
+    defaultView: defaultView.current,
+    views
+  }) : 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))) {
+      setView(views.includes(openTo) ? openTo : views[0]);
+      previousViews.current = views;
+      previousOpenTo.current = openTo;
+    }
+  }, [openTo, setView, view, views]);
+  const viewIndex = views.indexOf(view);
+  const previousView = views[viewIndex - 1] ?? null;
+  const nextView = views[viewIndex + 1] ?? null;
+  const handleFocusedViewChange = useEventCallback((viewToFocus, hasFocus) => {
+    if (hasFocus) {
+      // Focus event
+      setFocusedView(viewToFocus);
+    } else {
+      // Blur event
+      setFocusedView(prevFocusedView => viewToFocus === prevFocusedView ? null : prevFocusedView // If false the blur is due to view switching
+      );
+    }
+    onFocusedViewChange?.(viewToFocus, hasFocus);
+  });
+  const handleChangeView = useEventCallback(newView => {
+    // always keep the focused view in sync
+    handleFocusedViewChange(newView, true);
+    if (newView === view) {
+      return;
+    }
+    setView(newView);
+    if (onViewChange) {
+      onViewChange(newView);
+    }
+  });
+  const goToNextView = useEventCallback(() => {
+    if (nextView) {
+      handleChangeView(nextView);
+    }
+  });
+  const setValueAndGoToNextView = useEventCallback((value, currentViewSelectionState, selectedView) => {
+    const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
+    const hasMoreViews = selectedView ?
+    // handles case like `DateTimePicker`, where a view might return a `finish` selection state
+    // but when it's not the final view given all `views` -> overall selection state should be `partial`.
+    views.indexOf(selectedView) < views.length - 1 : Boolean(nextView);
+    const globalSelectionState = isSelectionFinishedOnCurrentView && hasMoreViews ? 'partial' : currentViewSelectionState;
+    onChange(value, globalSelectionState, selectedView);
+
+    // 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) {
+      currentView = view;
+    }
+    if (currentView == null) {
+      return;
+    }
+    const viewToNavigateTo = views[views.indexOf(currentView) + 1];
+    if (viewToNavigateTo == null || !stepNavigation.areViewsInSameStep(currentView, viewToNavigateTo)) {
+      return;
+    }
+    handleChangeView(viewToNavigateTo);
+  });
+  return _extends({}, stepNavigation, {
+    view,
+    setView: handleChangeView,
+    focusedView,
+    setFocusedView: handleFocusedViewChange,
+    nextView,
+    previousView,
+    // Always return up-to-date default view instead of the initial one (i.e. defaultView.current)
+    defaultView: views.includes(openTo) ? openTo : views[0],
+    goToNextView,
+    setValueAndGoToNextView
+  });
+}