[pickers] Simplify the usePicker file structure (#16680)

Signed-off-by: Flavien DELANGLE <[email protected]>
Co-authored-by: Michel Engelen <[email protected]>

Author: flaviendelangle

packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts

@@ -1,33 +1,31 @@
 import {
-  UsePickerParams,
+  UsePickerParameters,
   BasePickerProps,
-  UsePickerViewsProps,
-  UsePickerValueNonStaticProps,
-  UsePickerProviderNonStaticProps,
+  UsePickerProps,
+  UsePickerNonStaticProps,
   DateOrTimeViewWithMeridiem,
   PickerRangeValue,
 } from '@mui/x-date-pickers/internals';
 import { BaseRangeNonStaticPickerProps } from '../../models';
 import { UseRangePositionProps } from '../useRangePosition';
 
 export interface RangeOnlyPickerProps
-  extends UsePickerValueNonStaticProps,
-    UsePickerProviderNonStaticProps,
+  extends UsePickerNonStaticProps,
     BaseRangeNonStaticPickerProps,
     UseRangePositionProps {}
 
 export interface UseRangePickerProps<
   TView extends DateOrTimeViewWithMeridiem,
   TError,
-  TExternalProps extends UsePickerViewsProps<any, TView, any>,
+  TExternalProps extends UsePickerProps<PickerRangeValue, TView, TError, any>,
 > extends RangeOnlyPickerProps,
     BasePickerProps<PickerRangeValue, TView, TError, TExternalProps> {}
 
 export interface UseRangePickerParams<
   TView extends DateOrTimeViewWithMeridiem,
   TExternalProps extends UseRangePickerProps<TView, any, TExternalProps>,
 > extends Pick<
-    UsePickerParams<PickerRangeValue, TView, TExternalProps>,
+    UsePickerParameters<PickerRangeValue, TView, TExternalProps>,
     'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'
   > {
   props: TExternalProps;

packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts

@@ -3,7 +3,7 @@ import { PickerFieldSlotProps, PickerOwnerState } from '@mui/x-date-pickers/mode
 import {
   PickerPopperSlots,
   PickerPopperSlotProps,
-  UsePickerViewsProps,
+  UsePickerProps,
   DateOrTimeViewWithMeridiem,
   PickerRangeValue,
   PickerFieldUISlotsFromContext,
@@ -53,7 +53,7 @@ export interface UseDesktopRangePickerProps<
   TView extends DateOrTimeViewWithMeridiem,
   TEnableAccessibleFieldDOMStructure extends boolean,
   TError,
-  TExternalProps extends UsePickerViewsProps<any, TView, any>,
+  TExternalProps extends UsePickerProps<PickerRangeValue, TView, TError, any>,
 > extends UseRangePickerProps<TView, TError, TExternalProps> {
   /**
    * Overridable component slots.

packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts

@@ -3,7 +3,7 @@ import { PickerFieldSlotProps, PickerOwnerState } from '@mui/x-date-pickers/mode
 import {
   PickersModalDialogSlots,
   PickersModalDialogSlotProps,
-  UsePickerViewsProps,
+  UsePickerProps,
   DateOrTimeViewWithMeridiem,
   PickerRangeValue,
   PickerFieldUISlotsFromContext,
@@ -54,7 +54,7 @@ export interface UseMobileRangePickerProps<
   TView extends DateOrTimeViewWithMeridiem,
   TEnableAccessibleFieldDOMStructure extends boolean,
   TError,
-  TExternalProps extends UsePickerViewsProps<any, TView, any>,
+  TExternalProps extends UsePickerProps<PickerRangeValue, TView, TError, any>,
 > extends UseRangePickerProps<TView, TError, TExternalProps> {
   /**
    * Overridable component slots.

packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.ts

@@ -1,6 +1,6 @@
 import {
   BasePickerProps,
-  UsePickerParams,
+  UsePickerParameters,
   ExportedBaseToolbarProps,
   StaticOnlyPickerProps,
   DateOrTimeViewWithMeridiem,
@@ -43,7 +43,7 @@ export interface UseStaticRangePickerParams<
   TView extends DateOrTimeViewWithMeridiem,
   TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>,
 > extends Pick<
-    UsePickerParams<PickerRangeValue, TView, TExternalProps>,
+    UsePickerParameters<PickerRangeValue, TView, TExternalProps>,
     'valueManager' | 'valueType' | 'validator' | 'ref'
   > {
   props: TExternalProps;

packages/x-date-pickers/src/DatePicker/shared.tsx

@@ -17,7 +17,7 @@ import {
   DatePickerToolbarProps,
   ExportedDatePickerToolbarProps,
 } from './DatePickerToolbar';
-import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
+import { PickerViewRendererLookup } from '../internals/hooks/usePicker';
 import { DateViewRendererProps } from '../dateViewRenderers';
 import { PickerValue } from '../internals/models';
 import { ValidateDatePropsToDefault } from '../validation/validateDate';

packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -28,7 +28,7 @@ import {
   PickerToolbarOwnerState,
   useToolbarOwnerState,
 } from '../internals/hooks/useToolbarOwnerState';
-import { SetValueActionOptions } from '../internals/hooks/usePicker/usePickerValue.types';
+import { SetValueActionOptions } from '../internals/components/PickerProvider';
 
 export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps {
   /**

packages/x-date-pickers/src/DateTimePicker/shared.tsx

@@ -18,7 +18,7 @@ import {
   DateTimePickerToolbarProps,
   ExportedDateTimePickerToolbarProps,
 } from './DateTimePickerToolbar';
-import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
+import { PickerViewRendererLookup } from '../internals/hooks/usePicker';
 import { DateViewRendererProps } from '../dateViewRenderers';
 import { TimeViewRendererProps } from '../timeViewRenderers';
 import { applyDefaultViewProps } from '../internals/utils/views';

packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx

@@ -33,7 +33,7 @@ import { VIEW_HEIGHT } from '../internals/constants/dimensions';
 import {
   PickerRendererInterceptorProps,
   PickerViewRendererLookup,
-} from '../internals/hooks/usePicker/usePickerViews';
+} from '../internals/hooks/usePicker';
 import { isInternalTimeView } from '../internals/utils/time-utils';
 import { isDatePickerView } from '../internals/utils/date-utils';
 

packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx

@@ -14,7 +14,7 @@ import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { renderTimeViewClock } from '../timeViewRenderers';
 import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
-import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
+import { PickerViewRendererLookup } from '../internals/hooks/usePicker';
 import { PickerValue } from '../internals/models';
 
 type MobileDateTimePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(

packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx

@@ -9,7 +9,7 @@ import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useStaticPicker } from '../internals/hooks/useStaticPicker';
 import { DateOrTimeView } from '../models';
 import { validateDateTime } from '../validation';
-import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
+import { PickerViewRendererLookup } from '../internals/hooks/usePicker';
 import { PickerValue } from '../internals/models';
 
 type StaticDateTimePickerComponent = ((

packages/x-date-pickers/src/TimePicker/shared.tsx

@@ -11,7 +11,7 @@ import {
   TimePickerToolbar,
 } from './TimePickerToolbar';
 import { TimeValidationError } from '../models';
-import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
+import { PickerViewRendererLookup } from '../internals/hooks/usePicker';
 import { TimeViewRendererProps } from '../timeViewRenderers';
 import { applyDefaultViewProps } from '../internals/utils/views';
 import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/time';

packages/x-date-pickers/src/internals/components/PickerPopper/PickerPopper.tsx

@@ -332,7 +332,7 @@ export function PickerPopper(inProps: PickerPopperProps) {
   const { children, placement = 'bottom-start', slots, slotProps, classes: classesProp } = props;
 
   const { open, triggerRef, popupRef, reduceAnimations } = usePickerContext();
-  const { dismissViews, doesTheCurrentViewHasAnUI, viewContainerRole } = usePickerPrivateContext();
+  const { dismissViews, getCurrentViewMode, viewContainerRole } = usePickerPrivateContext();
 
   React.useEffect(() => {
     function handleKeyDown(nativeEvent: KeyboardEvent) {
@@ -350,7 +350,7 @@ export function PickerPopper(inProps: PickerPopperProps) {
 
   const lastFocusedElementRef = React.useRef<Element | null>(null);
   React.useEffect(() => {
-    if (viewContainerRole === 'tooltip' || !doesTheCurrentViewHasAnUI()) {
+    if (viewContainerRole === 'tooltip' || getCurrentViewMode() === 'field') {
       return;
     }
 
@@ -368,7 +368,7 @@ export function PickerPopper(inProps: PickerPopperProps) {
         }
       });
     }
-  }, [open, viewContainerRole, doesTheCurrentViewHasAnUI]);
+  }, [open, viewContainerRole, getCurrentViewMode]);
 
   const classes = useUtilityClasses(classesProp);
   const { ownerState: pickerOwnerState, rootRefObject } = usePickerPrivateContext();

packages/x-date-pickers/src/internals/components/PickerProvider.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 
-import { PickerOwnerState } from '../../models';
+import { PickerChangeImportance, PickerOwnerState, PickersTimezone } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
 import { LocalizationProvider } from '../../LocalizationProvider';
 import {
@@ -11,22 +11,13 @@ import {
   PickerValidValue,
   PickerVariant,
 } from '../models';
-import type {
-  UsePickerValueActionsContextValue,
-  UsePickerValueContextValue,
-  UsePickerValuePrivateContextValue,
-} from '../hooks/usePicker/usePickerValue.types';
-import {
-  UsePickerViewsActionsContextValue,
-  UsePickerViewsContextValue,
-  UsePickerViewsPrivateContextValue,
-} from '../hooks/usePicker/usePickerViews';
 import { IsValidValueContext } from '../../hooks/useIsValidValue';
 import {
   PickerFieldPrivateContext,
   PickerFieldPrivateContextValue,
 } from '../hooks/useNullableFieldPrivateContext';
 import { PickerContext } from '../../hooks/usePickerContext';
+import type { PickersShortcutsItemContext } from '../../PickersShortcuts';
 
 export const PickerActionsContext = React.createContext<PickerActionsContextValue<
   any,
@@ -45,7 +36,7 @@ export const PickerPrivateContext = React.createContext<PickerPrivateContextValu
   },
   dismissViews: () => {},
   hasUIView: true,
-  doesTheCurrentViewHasAnUI: () => true,
+  getCurrentViewMode: () => 'UI',
   rootRefObject: { current: null },
   viewContainerRole: null,
   labelId: undefined,
@@ -100,8 +91,24 @@ export interface PickerContextValue<
   TValue extends PickerValidValue,
   TView extends DateOrTimeViewWithMeridiem,
   TError,
-> extends UsePickerValueContextValue<TValue, TError>,
-    UsePickerViewsContextValue<TView> {
+> extends PickerActionsContextValue<TValue, TView, 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;
   /**
    * Whether the picker is disabled.
    */
@@ -116,6 +123,25 @@ export interface PickerContextValue<
    * If the picker does not have a field (if it is a static picker) or is not open, the view should be focused.
    */
   autoFocus: boolean;
+  /**
+   * The views that the picker has to 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 currently rendered view.
+   */
+  view: TView | null;
+  /**
+   * The view showed when first opening the picker.
+   */
+  initialView: TView | null;
   /**
    * The responsive variant of the picker.
    * It is equal to "desktop" when using a desktop picker (like <DesktopDatePicker />).
@@ -202,12 +228,87 @@ export interface PickerActionsContextValue<
   TValue extends PickerValidValue,
   TView extends DateOrTimeViewWithMeridiem,
   TError = string | null,
-> extends UsePickerValueActionsContextValue<TValue, TError>,
-    UsePickerViewsActionsContextValue<TView> {}
+> {
+  /**
+   * 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.
+   * It can be a function that will receive the current open state as parameter.
+   * ```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.
+   */
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  /**
+   * Set the current view.
+   * @template TView
+   * @param {TView} view The view to render
+   */
+  setView: (view: TView) => void;
+  /**
+   * 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 PickerPrivateContextValue
-  extends UsePickerValuePrivateContextValue,
-    UsePickerViewsPrivateContextValue {
+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;
+}
+
+export interface PickerPrivateContextValue {
   /**
    * The ownerState of the picker.
    */
@@ -221,4 +322,26 @@ export interface PickerPrivateContextValue
    * The id of the label element.
    */
   labelId: string | undefined;
+  /*
+   * Close the picker and accepts the current value if it is not equal to the last accepted value.
+   */
+  dismissViews: () => void;
+  /**
+   * Whether at least one view has an UI (it has a view renderer associated).
+   */
+  hasUIView: boolean;
+  /**
+   * Return the mode of the current view.
+   * @returns {boolean} The mode of the current view.
+   */
+  getCurrentViewMode: () => 'UI' | 'field';
+  /**
+   * The aria role associated with the view container.
+   * It is equal to "dialog" when the view is rendered inside a `@mui/material/Dialog`.
+   * It is equal to "dialog" when the view is rendered inside a `@mui/material/Popper` and the focus is trapped inside the view.
+   * It is equal to "tooltip" when the view is rendered inside a `@mui/material/Popper` and the focus remains inside the field.
+   * It is always equal to null if the picker does not have a field (static pickers).
+   * It is always equal to null if the component you are accessing the context from is not wrapped by a picker.
+   */
+  viewContainerRole: 'dialog' | 'tooltip' | null;
 }