@mui/x-date-pickers 8.28.7 → 8.29.0

package/internals/hooks/usePicker/usePicker.mjs

@@ -0,0 +1,323 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "sx"];
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useForkRef from '@mui/utils/useForkRef';
+import useId from '@mui/utils/useId';
+import { usePickerAdapter } from "../../../hooks/usePickerAdapter.mjs";
+import { useReduceAnimations } from "../useReduceAnimations.mjs";
+import { isTimeView } from "../../utils/time-utils.mjs";
+import { useViews } from "../useViews.mjs";
+import { useOrientation } from "./hooks/useOrientation.mjs";
+import { useValueAndOpenStates } from "./hooks/useValueAndOpenStates.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const usePicker = ({
+  ref,
+  props,
+  valueManager,
+  valueType,
+  variant,
+  validator,
+  onPopperExited,
+  autoFocusView,
+  rendererInterceptor: RendererInterceptor,
+  localeText,
+  viewContainerRole,
+  getStepNavigation
+}) => {
+  const {
+    // View props
+    views,
+    view: viewProp,
+    openTo,
+    onViewChange,
+    viewRenderers,
+    reduceAnimations: reduceAnimationsProp,
+    orientation: orientationProp,
+    disableOpenPicker,
+    closeOnSelect,
+    // Form props
+    disabled,
+    readOnly,
+    // Field props
+    formatDensity,
+    enableAccessibleFieldDOMStructure,
+    selectedSections,
+    onSelectedSectionsChange,
+    format,
+    label,
+    // Other props
+    autoFocus,
+    name
+  } = props;
+  const {
+      className,
+      sx
+    } = props,
+    propsToForwardToView = _objectWithoutPropertiesLoose(props, _excluded);
+
+  /**
+   * TODO: Improve how we generate the aria-label and aria-labelledby attributes.
+   */
+  const labelId = useId();
+  const adapter = usePickerAdapter();
+  const reduceAnimations = useReduceAnimations(reduceAnimationsProp);
+  const orientation = useOrientation(views, orientationProp);
+  const {
+    current: initialView
+  } = React.useRef(openTo ?? null);
+
+  /**
+   * Refs
+   */
+  const [triggerElement, triggerRef] = React.useState(null);
+  const popupRef = React.useRef(null);
+  const fieldRef = React.useRef(null);
+  const rootRefObject = React.useRef(null);
+  const rootRef = useForkRef(ref, rootRefObject);
+  const {
+    timezone,
+    state,
+    setOpen,
+    setValue,
+    setValueFromView,
+    value,
+    viewValue
+  } = useValueAndOpenStates({
+    props,
+    valueManager,
+    validator
+  });
+  const {
+    view,
+    setView,
+    defaultView,
+    focusedView,
+    setFocusedView,
+    setValueAndGoToNextView,
+    goToNextStep,
+    hasNextStep,
+    hasSeveralSteps
+  } = useViews({
+    view: viewProp,
+    views,
+    openTo,
+    onChange: setValueFromView,
+    onViewChange,
+    autoFocus: autoFocusView,
+    getStepNavigation
+  });
+  const clearValue = useEventCallback(() => setValue(valueManager.emptyValue, {
+    source: 'view'
+  }));
+  const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(adapter, timezone, valueType), {
+    source: 'view'
+  }));
+  const acceptValueChanges = useEventCallback(() => setValue(value, {
+    source: 'view'
+  }));
+  const cancelValueChanges = useEventCallback(() => setValue(state.lastCommittedValue, {
+    skipPublicationIfPristine: true,
+    source: 'view'
+  }));
+  const dismissViews = useEventCallback(() => {
+    setValue(value, {
+      skipPublicationIfPristine: true,
+      source: 'view'
+    });
+  });
+  const {
+    hasUIView,
+    viewModeLookup,
+    timeViewsCount
+  } = React.useMemo(() => views.reduce((acc, viewForReduce) => {
+    const viewMode = viewRenderers[viewForReduce] == null ? 'field' : 'UI';
+    acc.viewModeLookup[viewForReduce] = viewMode;
+    if (viewMode === 'UI') {
+      acc.hasUIView = true;
+      if (isTimeView(viewForReduce)) {
+        acc.timeViewsCount += 1;
+      }
+    }
+    return acc;
+  }, {
+    hasUIView: false,
+    viewModeLookup: {},
+    timeViewsCount: 0
+  }), [viewRenderers, views]);
+  const currentViewMode = viewModeLookup[view];
+  const getCurrentViewMode = useEventCallback(() => currentViewMode);
+  const [popperView, setPopperView] = React.useState(currentViewMode === 'UI' ? view : null);
+  if (popperView !== view && viewModeLookup[view] === 'UI') {
+    setPopperView(view);
+  }
+  useEnhancedEffect(() => {
+    // Handle case of Date Time Picker without time renderers
+    if (currentViewMode === 'field' && state.open) {
+      setOpen(false);
+      setTimeout(() => {
+        fieldRef?.current?.setSelectedSections(view);
+        // focusing the input before the range selection is done
+        // calling it outside of timeout results in an inconsistent behavior between Safari And Chrome
+        fieldRef?.current?.focusField(view);
+      });
+    }
+  }, [view]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEnhancedEffect(() => {
+    if (!state.open) {
+      return;
+    }
+    let newView = view;
+
+    // If the current view is a field view, go to the last popper view
+    if (currentViewMode === 'field' && popperView != null) {
+      newView = popperView;
+    }
+
+    // If the current view is not the default view and both are UI views
+    if (newView !== defaultView && viewModeLookup[newView] === 'UI' && viewModeLookup[defaultView] === 'UI') {
+      newView = defaultView;
+    }
+    if (newView !== view) {
+      setView(newView);
+    }
+    setFocusedView(newView, true);
+  }, [state.open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const ownerState = React.useMemo(() => ({
+    isPickerValueEmpty: valueManager.areValuesEqual(adapter, value, valueManager.emptyValue),
+    isPickerOpen: state.open,
+    isPickerDisabled: props.disabled ?? false,
+    isPickerReadOnly: props.readOnly ?? false,
+    pickerOrientation: orientation,
+    pickerVariant: variant
+  }), [adapter, valueManager, value, state.open, orientation, variant, props.disabled, props.readOnly]);
+  const triggerStatus = React.useMemo(() => {
+    if (disableOpenPicker || !hasUIView) {
+      return 'hidden';
+    }
+    if (disabled || readOnly) {
+      return 'disabled';
+    }
+    return 'enabled';
+  }, [disableOpenPicker, hasUIView, disabled, readOnly]);
+  const wrappedGoToNextStep = useEventCallback(goToNextStep);
+  const defaultActionBarActions = React.useMemo(() => {
+    if (closeOnSelect && !hasSeveralSteps) {
+      return [];
+    }
+    return ['cancel', 'nextOrAccept'];
+  }, [closeOnSelect, hasSeveralSteps]);
+  const actionsContextValue = React.useMemo(() => ({
+    setValue,
+    setOpen,
+    clearValue,
+    setValueToToday,
+    acceptValueChanges,
+    cancelValueChanges,
+    setView,
+    goToNextStep: wrappedGoToNextStep
+  }), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges, setView, wrappedGoToNextStep]);
+  const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
+    value,
+    timezone,
+    open: state.open,
+    views,
+    view: popperView,
+    initialView,
+    disabled: disabled ?? false,
+    readOnly: readOnly ?? false,
+    autoFocus: autoFocus ?? false,
+    variant,
+    orientation,
+    popupRef,
+    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, hasNextStep, timezone, state.open, popperView, views, initialView, autoFocus]);
+  const privateContextValue = React.useMemo(() => ({
+    dismissViews,
+    ownerState,
+    hasUIView,
+    getCurrentViewMode,
+    rootRefObject,
+    labelId,
+    triggerElement,
+    viewContainerRole,
+    defaultActionBarActions,
+    onPopperExited
+  }), [dismissViews, ownerState, hasUIView, getCurrentViewMode, labelId, triggerElement, viewContainerRole, defaultActionBarActions, onPopperExited]);
+  const fieldPrivateContextValue = React.useMemo(() => ({
+    formatDensity,
+    enableAccessibleFieldDOMStructure,
+    selectedSections,
+    onSelectedSectionsChange,
+    fieldRef
+  }), [formatDensity, enableAccessibleFieldDOMStructure, selectedSections, onSelectedSectionsChange, fieldRef]);
+  const isValidContextValue = testedValue => {
+    const error = validator({
+      adapter,
+      value: testedValue,
+      timezone,
+      props
+    });
+    return !valueManager.hasError(error);
+  };
+  const renderCurrentView = () => {
+    if (popperView == null) {
+      return null;
+    }
+    const renderer = viewRenderers[popperView];
+    if (renderer == null) {
+      return null;
+    }
+    const rendererProps = _extends({}, propsToForwardToView, {
+      views,
+      timezone,
+      value: viewValue,
+      onChange: setValueAndGoToNextView,
+      view: popperView,
+      onViewChange: setView,
+      showViewSwitcher: timeViewsCount > 1,
+      timeViewsCount
+    }, viewContainerRole === 'tooltip' ? {
+      focusedView: null,
+      onFocusedViewChange: () => {}
+    } : {
+      focusedView,
+      onFocusedViewChange: setFocusedView
+    });
+    if (RendererInterceptor) {
+      return /*#__PURE__*/_jsx(RendererInterceptor, {
+        viewRenderers: viewRenderers,
+        popperView: popperView,
+        rendererProps: rendererProps
+      });
+    }
+    return renderer(rendererProps);
+  };
+  return {
+    providerProps: {
+      localeText,
+      contextValue,
+      privateContextValue,
+      actionsContextValue,
+      fieldPrivateContextValue,
+      isValidContextValue
+    },
+    renderCurrentView,
+    ownerState
+  };
+};

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

@@ -0,0 +1,193 @@
+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;
+  /**
+   * 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/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';
+}