@mui/x-date-pickers 8.0.0-alpha.11 → 8.0.0-alpha.12

package/modern/internals/hooks/useFieldOwnerState.d.ts

@@ -0,0 +1,6 @@
+import { FieldOwnerState } from "../../models/index.js";
+import { FormProps } from "../models/index.js";
+export declare function useFieldOwnerState(parameters: UseFieldOwnerStateParameters): FieldOwnerState;
+export interface UseFieldOwnerStateParameters extends FormProps {
+  required?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { useMobilePicker } from "./useMobilePicker.js";
+export type { UseMobilePickerSlots, UseMobilePickerSlotProps, ExportedUseMobilePickerSlotProps, MobileOnlyPickerProps } from './useMobilePicker.types';

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { UseMobilePickerParams, UseMobilePickerProps } from "./useMobilePicker.types.js";
+import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
+/**
+ * Hook managing all the single-date mobile pickers:
+ * - MobileDatePicker
+ * - MobileDateTimePicker
+ * - MobileTimePicker
+ */
+export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
+  props,
+  ...pickerParams
+}: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+  renderPicker: () => React.JSX.Element;
+};

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { BasePickerProps } from "../../models/props/basePickerProps.js";
+import { PickersModalDialogSlots, PickersModalDialogSlotProps } from "../../components/PickersModalDialog.js";
+import { UsePickerParams } from "../usePicker/index.js";
+import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js";
+import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
+import { UsePickerValueNonStaticProps } from "../usePicker/usePickerValue.types.js";
+import { UsePickerViewsProps } from "../usePicker/usePickerViews.js";
+import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
+import { UsePickerProviderNonStaticProps } from "../usePicker/usePickerProvider.js";
+import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
+export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
+  /**
+   * Component used to enter the date with the keyboard.
+   */
+  field: React.ElementType;
+}
+export interface ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
+}
+export interface UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
+export interface MobileOnlyPickerProps extends UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {}
+export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, MakeRequired<MobileOnlyPickerProps, 'format'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: UseMobilePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}
+export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
+  props: TExternalProps;
+}

package/modern/internals/hooks/useNullablePickerContext.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ * If the context is not found, returns `null`.
+ */
+export declare const useNullablePickerContext: () => import("..").PickerContextValue<any, any, any> | null;

package/modern/internals/hooks/useOpenState.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface OpenStateProps {
+  open?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+}
+export declare const useOpenState: ({
+  open,
+  onOpen,
+  onClose
+}: OpenStateProps) => {
+  open: boolean;
+  setOpen: (action: React.SetStateAction<boolean>) => void;
+};

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

@@ -0,0 +1,4 @@
+export { usePicker } from "./usePicker.js";
+export type { UsePickerProps, UsePickerBaseProps, UsePickerParams } from './usePicker.types';
+export type { PickerValueManager, PickerSelectionState, UsePickerValueFieldResponse } from './usePickerValue.types';
+export type { PickerViewsRendererProps } from './usePickerViews';

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

@@ -0,0 +1,14 @@
+import { UsePickerParams, UsePickerProps, UsePickerReturnValue } from "./usePicker.types.js";
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from "../../models/index.js";
+export declare const usePicker: <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>>({
+  ref,
+  props,
+  valueManager,
+  valueType,
+  variant,
+  validator,
+  autoFocusView,
+  rendererInterceptor,
+  fieldRef,
+  localeText
+}: UsePickerParams<TValue, TView, TExternalProps>) => UsePickerReturnValue<TValue>;

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

@@ -0,0 +1,18 @@
+import { UsePickerValueParams, UsePickerValueProps, UsePickerValueBaseProps } from "./usePickerValue.types.js";
+import { UsePickerViewsProps, UsePickerViewParams, UsePickerViewsBaseProps } from "./usePickerViews.js";
+import { InferError, PickerOwnerState } from "../../../models/index.js";
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from "../../models/index.js";
+import { UsePickerProviderParameters, UsePickerProviderProps, UsePickerProviderReturnValue } from "./usePickerProvider.js";
+/**
+ * Props common to all picker headless implementations.
+ */
+export interface UsePickerBaseProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any>> extends UsePickerValueBaseProps<TValue, TError>, UsePickerViewsBaseProps<TValue, TView, TExternalProps>, UsePickerProviderProps {}
+export interface UsePickerProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any>> extends UsePickerValueProps<TValue, TError>, UsePickerViewsProps<TValue, TView, TExternalProps>, UsePickerProviderProps {}
+export interface UsePickerParams<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TExternalProps>, 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'>, Pick<UsePickerProviderParameters<TValue, TView, InferError<TExternalProps>>, 'localeText' | 'variant' | 'ref'> {
+  props: TExternalProps;
+}
+export interface UsePickerReturnValue<TValue extends PickerValidValue> {
+  ownerState: PickerOwnerState;
+  renderCurrentView: () => React.ReactNode;
+  providerProps: UsePickerProviderReturnValue<TValue>;
+}

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { PickerValueManager, UsePickerValueProviderParams } from "./usePickerValue.types.js";
+import { PickerProviderProps } from "../../components/PickerProvider.js";
+import type { UsePickerProps } from './usePicker.types';
+import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerVariant } from "../../models/index.js";
+import { UsePickerViewsProviderParams } from "./usePickerViews.js";
+import { PickerFieldPrivateContextValue } from "../useField/useFieldInternalPropsWithDefaults.js";
+export declare const usePickerOrientation: (views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined) => PickerOrientation;
+export declare function usePickerProvider<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError>(parameters: UsePickerProviderParameters<TValue, TView, TError>): UsePickerProviderReturnValue<TValue>;
+export interface UsePickerProviderParameters<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Pick<PickerProviderProps<TValue>, 'localeText'> {
+  ref: React.ForwardedRef<HTMLDivElement> | undefined;
+  props: UsePickerProps<TValue, any, any, any> & UsePickerProviderNonStaticProps;
+  valueManager: PickerValueManager<TValue, any>;
+  variant: PickerVariant;
+  paramsFromUsePickerValue: UsePickerValueProviderParams<TValue, TError>;
+  paramsFromUsePickerViews: UsePickerViewsProviderParams<TView>;
+}
+export interface UsePickerProviderReturnValue<TValue extends PickerValidValue> extends Omit<PickerProviderProps<TValue>, 'children'> {}
+/**
+ * Props used to create the picker's contexts.
+ * Those props are exposed on all the pickers.
+ */
+export interface UsePickerProviderProps extends FormProps {
+  /**
+   * 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 create the picker's contexts and that are not available on static pickers.
+ */
+export interface UsePickerProviderNonStaticProps extends PickerFieldPrivateContextValue {
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the open picker button will not be rendered (renders only the field).
+   * @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;
+}

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

@@ -0,0 +1,12 @@
+import { InferError } from "../../../models/index.js";
+import { UsePickerValueProps, UsePickerValueParams, UsePickerValueResponse } from "./usePickerValue.types.js";
+import { PickerValidValue } from "../../models/index.js";
+/**
+ * Manage the value lifecycle of all the pickers.
+ */
+export declare const usePickerValue: <TValue extends PickerValidValue, TExternalProps extends UsePickerValueProps<TValue, any>>({
+  props,
+  valueManager,
+  valueType,
+  validator
+}: UsePickerValueParams<TValue, TExternalProps>) => UsePickerValueResponse<TValue, InferError<TExternalProps>>;

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

@@ -0,0 +1,327 @@
+import * as React from 'react';
+import { UseFieldInternalProps } from "../useField/index.js";
+import { Validator } from "../../../validation/index.js";
+import { TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, PickerValidDate, OnErrorProps, InferError, PickerValueType, PickerChangeImportance } from "../../../models/index.js";
+import { GetDefaultReferenceDateProps } from "../../utils/getDefaultReferenceDate.js";
+import type { PickersShortcutsItemContext } from '../../../PickersShortcuts';
+import { InferNonNullablePickerValue, PickerValidValue } from "../../models/index.js";
+export interface PickerValueManager<TValue extends PickerValidValue, TError> {
+  /**
+   * Determines if two values are equal.
+   * @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.
+   * @param {MuiPickersAdapter} utils The adapter.
+   * @param {TValue} valueLeft The first value to compare.
+   * @param {TValue} valueRight The second value to compare.
+   * @returns {boolean} A boolean indicating if the two values are equal.
+   */
+  areValuesEqual: (utils: MuiPickersAdapter, valueLeft: TValue, valueRight: TValue) => boolean;
+  /**
+   * Value to set when clicking the "Clear" button.
+   */
+  emptyValue: TValue;
+  /**
+   * Method returning the value to set when clicking the "Today" button
+   * @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.
+   * @param {MuiPickersAdapter} utils The adapter.
+   * @param {PickersTimezone} timezone The current timezone.
+   * @param {PickerValueType} valueType The type of the value being edited.
+   * @returns {TValue} The value to set when clicking the "Today" button.
+   */
+  getTodayValue: (utils: MuiPickersAdapter, timezone: PickersTimezone, valueType: PickerValueType) => TValue;
+  /**
+   * @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.
+   * Method returning the reference value to use when mounting the component.
+   * @param {object} params The params of the method.
+   * @param {PickerValidDate | undefined} params.referenceDate The referenceDate provided by the user.
+   * @param {TValue} params.value The value provided by the user.
+   * @param {GetDefaultReferenceDateProps} params.props The validation props needed to compute the reference value.
+   * @param {MuiPickersAdapter} params.utils The adapter.
+   * @param {number} params.granularity The granularity of the selection possible on this component.
+   * @param {PickersTimezone} params.timezone The current timezone.
+   * @param {() => PickerValidDate} params.getTodayDate The reference date to use if no reference date is passed to the component.
+   * @returns {TValue} The reference value to use for non-provided dates.
+   */
+  getInitialReferenceValue: (params: {
+    referenceDate: PickerValidDate | undefined;
+    value: TValue;
+    props: GetDefaultReferenceDateProps;
+    utils: MuiPickersAdapter;
+    granularity: number;
+    timezone: PickersTimezone;
+    getTodayDate?: () => PickerValidDate;
+  }) => InferNonNullablePickerValue<TValue>;
+  /**
+   * Method parsing the input value to replace all invalid dates by `null`.
+   * @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.
+   * @param {MuiPickersAdapter} utils The adapter.
+   * @param {TValue} value The value to parse.
+   * @returns {TValue} The value without invalid date.
+   */
+  cleanValue: (utils: MuiPickersAdapter, value: TValue) => TValue;
+  /**
+   * Generates the new value, given the previous value and the new proposed value.
+   * @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.
+   * @param {MuiPickersAdapter} utils The adapter.
+   * @param {TValue} lastValidDateValue The last valid value.
+   * @param {TValue} value The proposed value.
+   * @returns {TValue} The new value.
+   */
+  valueReducer?: (utils: MuiPickersAdapter, lastValidDateValue: TValue, value: TValue) => TValue;
+  /**
+   * Compare two errors to know if they are equal.
+   * @template TError
+   * @param {TError} error The new error
+   * @param {TError | null} prevError The previous error
+   * @returns {boolean} `true` if the new error is different from the previous one.
+   */
+  isSameError: (error: TError, prevError: TError | null) => boolean;
+  /**
+   * Checks if the current error is empty or not.
+   * @template TError
+   * @param {TError} error The current error.
+   * @returns {boolean} `true` if the current error is not empty.
+   */
+  hasError: (error: TError) => boolean;
+  /**
+   * The value identifying no error, used to initialise the error state.
+   */
+  defaultErrorState: TError;
+  /**
+   * Return the timezone of the date inside a value.
+   * Throw an error on range picker if both values don't have the same timezone.
+   * @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.
+   @param {MuiPickersAdapter} utils The utils to manipulate the date.
+   @param {TValue} value The current value.
+   @returns {string | null} The timezone of the current value.
+   */
+  getTimezone: (utils: MuiPickersAdapter, value: TValue) => string | null;
+  /**
+   * Change the timezone of the dates inside a value.
+   * @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.
+   @param {MuiPickersAdapter} utils The utils to manipulate the date.
+   @param {PickersTimezone} timezone The current timezone.
+   @param {TValue} value The value to convert.
+   @returns {TValue} The value with the new dates in the new timezone.
+   */
+  setTimezone: (utils: MuiPickersAdapter, timezone: PickersTimezone, value: TValue) => TValue;
+}
+export type PickerSelectionState = 'partial' | 'shallow' | 'finish';
+export interface UsePickerValueState<TValue extends PickerValidValue> {
+  /**
+   * Date displayed on the views and the field.
+   * It is updated whenever the user modifies something.
+   */
+  draft: TValue;
+  /**
+   * Last value published (the last value for which `shouldPublishValue` returned `true`).
+   * If `onChange` is defined, it's the value that was passed on the last call to this callback.
+   */
+  lastPublishedValue: TValue;
+  /**
+   * 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;
+  /**
+   * Last value passed to `props.value`.
+   * Used to update the `draft` value whenever the `value` prop changes.
+   */
+  lastControlledValue: TValue | undefined;
+  /**
+   * 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;
+}
+/**
+ * Props used to handle the value that are common to all pickers.
+ */
+export interface UsePickerValueBaseProps<TValue extends PickerValidValue, TError> extends OnErrorProps<TValue, TError> {
+  /**
+   * 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 The context containing the validation result of the current value.
+   */
+  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 The context containing the validation result of the current value.
+   */
+  onAccept?: (value: TValue, context: PickerChangeHandlerContext<TError>) => void;
+}
+/**
+ * Props used to handle the value of non-static pickers.
+ */
+export interface UsePickerValueNonStaticProps {
+  /**
+   * 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;
+}
+/**
+ * Props used to handle the value of the pickers.
+ */
+export interface UsePickerValueProps<TValue extends PickerValidValue, TError> extends UsePickerValueBaseProps<TValue, TError>, UsePickerValueNonStaticProps, TimezoneProps {
+  referenceDate?: PickerValidDate;
+}
+export interface UsePickerValueParams<TValue extends PickerValidValue, TExternalProps extends UsePickerValueProps<TValue, any>> {
+  props: TExternalProps;
+  valueManager: PickerValueManager<TValue, InferError<TExternalProps>>;
+  valueType: PickerValueType;
+  validator: Validator<TValue, InferError<TExternalProps>, TExternalProps>;
+}
+export type UsePickerValueFieldResponse<TValue extends PickerValidValue, TError> = Required<Pick<UseFieldInternalProps<TValue, any, TError>, 'value' | 'onChange'>>;
+/**
+ * Props passed to `usePickerViews`.
+ */
+export interface UsePickerValueViewsResponse<TValue extends PickerValidValue> {
+  value: TValue;
+  onChange: (value: TValue, selectionState?: PickerSelectionState) => void;
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+/**
+ * Params passed to `usePickerProvider`.
+ */
+export interface UsePickerValueProviderParams<TValue extends PickerValidValue, TError> {
+  value: TValue;
+  contextValue: UsePickerValueContextValue<TValue, TError>;
+  actionsContextValue: UsePickerValueActionsContextValue<TValue, TError>;
+  privateContextValue: UsePickerValuePrivateContextValue;
+  isValidContextValue: (value: TValue) => boolean;
+}
+export interface UsePickerValueResponse<TValue extends PickerValidValue, TError> {
+  viewProps: UsePickerValueViewsResponse<TValue>;
+  provider: UsePickerValueProviderParams<TValue, TError>;
+}
+export interface UsePickerValueContextValue<TValue extends PickerValidValue, TError> extends UsePickerValueActionsContextValue<TValue, TError> {
+  /**
+   * The current value of the picker.
+   */
+  value: TValue;
+  /**
+   * The timezone to use when rendering the dates.
+   * If a `timezone` prop is provided, it will be used.
+   * If the `value` prop contains a valid date, its timezone will be used.
+   * If no `value` prop is provided, but the `defaultValue` contains a valid date, its timezone will be used.
+   * If no `value` or `defaultValue` is provided, but the `referenceDate` is provided, its timezone will be used.
+   * Otherwise, the timezone will be the default one of your date library.
+   */
+  timezone: PickersTimezone;
+  /**
+   * Whether the picker is open.
+   */
+  open: boolean;
+}
+export interface UsePickerValueActionsContextValue<TValue extends PickerValidValue, TError> {
+  /**
+   * Set the current value of the picker.
+   * @param {TValue} value The new value of the picker.
+   * @param {SetValueActionOptions<TError>} options The options to customize the behavior of this update.
+   */
+  setValue: (value: TValue, options?: SetValueActionOptions<TError>) => void;
+  /**
+   * Set the current open state of the Picker.
+   * ```ts
+   * setOpen(true); // Opens the picker.
+   * setOpen(false); // Closes the picker.
+   * setOpen((prevOpen) => !prevOpen); // Toggles the open state.
+   * ```
+   * @param {React.SetStateAction<boolean>} action The new open state of the Picker.
+   * It can be a function that will receive the current open state.
+   */
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  /**
+   * Set the current value of the picker to be empty.
+   * The value will be `null` on single pickers and `[null, null]` on range pickers.
+   */
+  clearValue: () => void;
+  /**
+   * Set the current value of the picker to be the current date.
+   * The value will be `today` on single pickers and `[today, today]` on range pickers.
+   * With `today` being the current date, with its time set to `00:00:00` on Date Pickers and its time set to the current time on Time and Date Pickers.
+   */
+  setValueToToday: () => void;
+  /**
+   * Accept the current value of the picker.
+   * Will call `onAccept` if defined.
+   * If the picker is re-opened, this value will be the one used to initialize the views.
+   */
+  acceptValueChanges: () => void;
+  /**
+   * Cancel the changes made to the current value of the picker.
+   * The value will be reset to the last accepted value.
+   */
+  cancelValueChanges: () => void;
+}
+export interface UsePickerValuePrivateContextValue {
+  /**
+   * Close the picker and accepts the current value if it is not equal to the last accepted value.
+   */
+  dismissViews: () => void;
+}
+export interface SetValueActionOptions<TError = string | null> {
+  /**
+   * The importance of the change when picking a value:
+   * - "accept": fires `onChange`, fires `onAccept` and closes the picker.
+   * - "set": fires `onChange` but do not fire `onAccept` and does not close the picker.
+   * @default "accept"
+   */
+  changeImportance?: PickerChangeImportance;
+  /**
+   * The validation error associated to the current value.
+   * If not defined, the validation will be computed by the picker.
+   */
+  validationError?: TError;
+  /**
+   * The shortcut that triggered this change.
+   * It should not be defined if the change does not come from a shortcut.
+   */
+  shortcut?: PickersShortcutsItemContext;
+  /**
+   * Whether the value should call `onChange` and `onAccept` when the value is not controlled and has never been modified.
+   * If `true`, the `onChange` and `onAccept` callback will only be fired if the value has been modified (and is not equal to the last published value).
+   * If `false`, the `onChange` and `onAccept` callback will be fired when the value has never been modified (`onAccept` only if `changeImportance` is set to "accept").
+   * @default false
+   */
+  skipPublicationIfPristine?: boolean;
+  /**
+   * Whether the picker should close.
+   * @default changeImportance === "accept"
+   */
+  shouldClose?: boolean;
+}

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

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+import { UseViewsOptions } from "../useViews.js";
+import type { UsePickerValueViewsResponse } from './usePickerValue.types';
+import { DateOrTimeViewWithMeridiem, PickerRangeValue, PickerValidValue, PickerValue } from "../../models/index.js";
+import { FieldRef, PickerValidDate, TimezoneProps } from "../../../models/index.js";
+export interface PickerViewsRendererBaseExternalProps extends Omit<UsePickerViewsProps<any, any, any>, 'openTo' | 'viewRenderers'> {}
+export type PickerViewsRendererProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps> = Omit<TExternalProps, 'className' | 'sx'> & Pick<UsePickerValueViewsResponse<TValue>, 'value' | 'onChange'> & {
+  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>;
+/**
+ * Props used to handle the views that are common to all pickers.
+ */
+export interface UsePickerViewsBaseProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any>> extends Omit<UseViewsOptions<any, TView>, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps {
+  /**
+   * 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?: PickerValidDate;
+}
+/**
+ * Props used to handle the value of the pickers.
+ */
+export interface UsePickerViewsProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any>> extends UsePickerViewsBaseProps<TValue, TView, TExternalProps> {
+  className?: string;
+  sx?: SxProps<Theme>;
+}
+export interface UsePickerViewParams<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, TExternalProps>> {
+  props: TExternalProps;
+  propsFromPickerValue: UsePickerValueViewsResponse<TValue>;
+  autoFocusView: boolean;
+  fieldRef?: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | 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` that were provided to the picker component.
+   * @param {TView} popperView The current picker view.
+   * @param {any} rendererProps All the props that are 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>>;
+}
+export interface PickerRendererInterceptorProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, TExternalProps>> {
+  viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps>;
+  popperView: TView;
+  rendererProps: PickerViewsRendererProps<TValue, TView, TExternalProps>;
+}
+export interface UsePickerViewsResponse<TView extends DateOrTimeViewWithMeridiem> {
+  renderCurrentView: () => React.ReactNode;
+  provider: UsePickerViewsProviderParams<TView>;
+}
+export interface UsePickerViewsActionsContextValue<TView extends DateOrTimeViewWithMeridiem> {
+  /**
+   * Set the current view.
+   * @template TView
+   * @param {TView} view The view to render
+   */
+  setView: (view: TView) => void;
+}
+export interface UsePickerViewsContextValue<TView extends DateOrTimeViewWithMeridiem> extends UsePickerViewsActionsContextValue<TView> {
+  /**
+   * The views that the picker must render.
+   * It is equal to the picker `views` prop if defined.
+   * Otherwise, a default set of views is provided based on the component you are using:
+   * - Date Pickers: ['year', 'day']
+   * - Time Pickers: ['hours', 'minutes']
+   * - Date Time Pickers: ['year', 'day', 'hours', 'minutes']
+   * - Date Range Pickers: ['day']
+   * - Date Time Range Pickers: ['day', 'hours', 'minutes']
+   */
+  views: readonly TView[];
+  /**
+   * The view currently rendered.
+   */
+  view: TView | null;
+}
+export interface UsePickerViewsPrivateContextValue {
+  /**
+   * Whether one of the view has an UI (it has a view renderer associated).
+   */
+  hasUIView: boolean;
+  /**
+   * Check whether the current view has an UI.
+   * @returns {boolean} Whether the current view has an UI.
+   */
+  doesTheCurrentViewHasAnUI: () => boolean;
+}
+export interface UsePickerViewsProviderParams<TView extends DateOrTimeViewWithMeridiem> {
+  hasUIView: boolean;
+  views: readonly TView[];
+  contextValue: UsePickerViewsContextValue<TView>;
+  actionsContextValue: UsePickerViewsActionsContextValue<TView>;
+  privateContextValue: UsePickerViewsPrivateContextValue;
+}
+/**
+ * Manage the views of all the pickers:
+ * - Handles the view switch
+ * - Handles the switch between UI views and field views
+ * - Handles the focus management when switching views
+ */
+export declare const usePickerViews: <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any>>({
+  props,
+  propsFromPickerValue,
+  autoFocusView,
+  rendererInterceptor: RendererInterceptor,
+  fieldRef
+}: UsePickerViewParams<TValue, TView, TExternalProps>) => UsePickerViewsResponse<TView>;

package/modern/internals/hooks/usePickerPrivateContext.d.ts

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