@mui/x-date-pickers 8.0.0-alpha.5 → 8.0.0-alpha.7

package/internals/hooks/usePicker/usePickerValue.js

@@ -5,106 +5,6 @@ import { useOpenState } from "../useOpenState.js";
 import { useLocalizationContext, useUtils } from "../useUtils.js";
 import { useValidation } from "../../../validation/index.js";
 import { useValueWithTimezone } from "../useValueWithTimezone.js";
-/**
- * Decide if the new value should be published
- * The published value will be passed to `onChange` if defined.
- */
-const shouldPublishValue = params => {
-  const {
-    action,
-    hasChanged,
-    dateState,
-    isControlled
-  } = params;
-  const isCurrentValueTheDefaultValue = !isControlled && !dateState.hasBeenModifiedSinceMount;
-
-  // The field is responsible for only calling `onChange` when needed.
-  if (action.name === 'setValueFromField') {
-    return true;
-  }
-  if (action.name === 'setValueFromAction') {
-    // If the component is not controlled, and the value has not been modified since the mount,
-    // Then we want to publish the default value whenever the user pressed the "Accept", "Today" or "Clear" button.
-    if (isCurrentValueTheDefaultValue && ['accept', 'today', 'clear'].includes(action.pickerAction)) {
-      return true;
-    }
-    return hasChanged(dateState.lastPublishedValue);
-  }
-  if (action.name === 'setValueFromView' && action.selectionState !== 'shallow') {
-    // On the first view,
-    // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onChange`
-    if (isCurrentValueTheDefaultValue) {
-      return true;
-    }
-    return hasChanged(dateState.lastPublishedValue);
-  }
-  if (action.name === 'setValueFromShortcut') {
-    // On the first view,
-    // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onChange`
-    if (isCurrentValueTheDefaultValue) {
-      return true;
-    }
-    return hasChanged(dateState.lastPublishedValue);
-  }
-  return false;
-};
-
-/**
- * Decide if the new value should be committed.
- * The committed value will be passed to `onAccept` if defined.
- * It will also be used as a reset target when calling the `cancel` picker action (when clicking on the "Cancel" button).
- */
-const shouldCommitValue = params => {
-  const {
-    action,
-    hasChanged,
-    dateState,
-    isControlled,
-    closeOnSelect
-  } = params;
-  const isCurrentValueTheDefaultValue = !isControlled && !dateState.hasBeenModifiedSinceMount;
-  if (action.name === 'setValueFromAction') {
-    // If the component is not controlled, and the value has not been modified since the mount,
-    // Then we want to commit the default value whenever the user pressed the "Accept", "Today" or "Clear" button.
-    if (isCurrentValueTheDefaultValue && ['accept', 'today', 'clear'].includes(action.pickerAction)) {
-      return true;
-    }
-    return hasChanged(dateState.lastCommittedValue);
-  }
-  if (action.name === 'setValueFromView' && action.selectionState === 'finish' && closeOnSelect) {
-    // On picker where the 1st view is also the last view,
-    // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onAccept`
-    if (isCurrentValueTheDefaultValue) {
-      return true;
-    }
-    return hasChanged(dateState.lastCommittedValue);
-  }
-  if (action.name === 'setValueFromShortcut') {
-    return action.changeImportance === 'accept' && hasChanged(dateState.lastCommittedValue);
-  }
-  return false;
-};
-
-/**
- * Decide if the picker should be closed after the value is updated.
- */
-const shouldClosePicker = params => {
-  const {
-    action,
-    closeOnSelect
-  } = params;
-  if (action.name === 'setValueFromAction') {
-    return true;
-  }
-  if (action.name === 'setValueFromView') {
-    return action.selectionState === 'finish' && closeOnSelect;
-  }
-  if (action.name === 'setValueFromShortcut') {
-    return action.changeImportance === 'accept';
-  }
-  return false;
-};
-
 /**
  * Manage the value lifecycle of all the pickers.
  */
@@ -112,7 +12,6 @@ export const usePickerValue = ({
   props,
   valueManager,
   valueType,
-  variant,
   validator
 }) => {
   const {
@@ -120,7 +19,7 @@ export const usePickerValue = ({
     onChange,
     value: inValueWithoutRenderTimezone,
     defaultValue: inDefaultValue,
-    closeOnSelect = variant === 'desktop',
+    closeOnSelect = false,
     timezone: timezoneProp,
     referenceDate
   } = props;
@@ -200,43 +99,49 @@ export const usePickerValue = ({
     value: dateState.draft,
     onError: props.onError
   });
-  const updateDate = useEventCallback(action => {
-    const updaterParams = {
-      action,
-      dateState,
-      hasChanged: comparison => !valueManager.areValuesEqual(utils, action.value, comparison),
-      isControlled,
-      closeOnSelect
-    };
-    const shouldPublish = shouldPublishValue(updaterParams);
-    const shouldCommit = shouldCommitValue(updaterParams);
-    const shouldClose = shouldClosePicker(updaterParams);
+  const setValue = useEventCallback((newValue, options) => {
+    const {
+      changeImportance = 'accept',
+      skipPublicationIfPristine = false,
+      validationError,
+      shortcut
+    } = options ?? {};
+    let shouldPublish;
+    let shouldCommit;
+    if (!skipPublicationIfPristine && !isControlled && !dateState.hasBeenModifiedSinceMount) {
+      // If the value is not controlled and the value has never been modified before,
+      // Then clicking on any value (including the one equal to `defaultValue`) should call `onChange` and `onAccept`
+      shouldPublish = true;
+      shouldCommit = changeImportance === 'accept';
+    } else {
+      shouldPublish = !valueManager.areValuesEqual(utils, newValue, dateState.lastPublishedValue);
+      shouldCommit = changeImportance === 'accept' && !valueManager.areValuesEqual(utils, newValue, dateState.lastCommittedValue);
+    }
     setDateState(prev => _extends({}, prev, {
-      draft: action.value,
-      lastPublishedValue: shouldPublish ? action.value : prev.lastPublishedValue,
-      lastCommittedValue: shouldCommit ? action.value : prev.lastCommittedValue,
+      draft: newValue,
+      lastPublishedValue: shouldPublish ? newValue : prev.lastPublishedValue,
+      lastCommittedValue: shouldCommit ? newValue : prev.lastCommittedValue,
       hasBeenModifiedSinceMount: true
     }));
     let cachedContext = null;
     const getContext = () => {
       if (!cachedContext) {
-        const validationError = action.name === 'setValueFromField' ? action.context.validationError : getValidationErrorForNewValue(action.value);
         cachedContext = {
-          validationError
+          validationError: validationError == null ? getValidationErrorForNewValue(newValue) : validationError
         };
-        if (action.name === 'setValueFromShortcut') {
-          cachedContext.shortcut = action.shortcut;
+        if (shortcut) {
+          cachedContext.shortcut = shortcut;
         }
       }
       return cachedContext;
     };
     if (shouldPublish) {
-      handleValueChange(action.value, getContext());
+      handleValueChange(newValue, getContext());
     }
     if (shouldCommit && onAccept) {
-      onAccept(action.value, getContext());
+      onAccept(newValue, getContext());
     }
-    if (shouldClose) {
+    if (changeImportance === 'accept') {
       setOpen(false);
     }
   });
@@ -251,85 +156,6 @@ export const usePickerValue = ({
       hasBeenModifiedSinceMount: true
     }));
   }
-  const handleClear = useEventCallback(() => {
-    updateDate({
-      value: valueManager.emptyValue,
-      name: 'setValueFromAction',
-      pickerAction: 'clear'
-    });
-  });
-  const handleAccept = useEventCallback(() => {
-    updateDate({
-      value: dateState.lastPublishedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'accept'
-    });
-  });
-  const handleDismiss = useEventCallback(() => {
-    updateDate({
-      value: dateState.lastPublishedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'dismiss'
-    });
-  });
-  const handleCancel = useEventCallback(() => {
-    updateDate({
-      value: dateState.lastCommittedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'cancel'
-    });
-  });
-  const handleSetToday = useEventCallback(() => {
-    updateDate({
-      value: valueManager.getTodayValue(utils, timezone, valueType),
-      name: 'setValueFromAction',
-      pickerAction: 'today'
-    });
-  });
-  const handleOpen = useEventCallback(event => {
-    event.preventDefault();
-    setOpen(true);
-  });
-  const handleClose = useEventCallback(event => {
-    event?.preventDefault();
-    setOpen(false);
-  });
-  const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
-    name: 'setValueFromView',
-    value: newValue,
-    selectionState
-  }));
-  const handleSelectShortcut = useEventCallback((newValue, changeImportance, shortcut) => updateDate({
-    name: 'setValueFromShortcut',
-    value: newValue,
-    changeImportance,
-    shortcut
-  }));
-  const handleChangeFromField = useEventCallback((newValue, context) => updateDate({
-    name: 'setValueFromField',
-    value: newValue,
-    context
-  }));
-  const actions = {
-    onClear: handleClear,
-    onAccept: handleAccept,
-    onDismiss: handleDismiss,
-    onCancel: handleCancel,
-    onSetToday: handleSetToday,
-    onOpen: handleOpen,
-    onClose: handleClose
-  };
-  const fieldResponse = {
-    value: dateState.draft,
-    onChange: handleChangeFromField
-  };
-  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
-  const viewResponse = {
-    value: valueWithoutError,
-    onChange: handleChange,
-    onClose: handleClose,
-    open
-  };
   const isValid = testedValue => {
     const error = validator({
       adapter,
@@ -339,28 +165,67 @@ export const usePickerValue = ({
     });
     return !valueManager.hasError(error);
   };
-  const layoutResponse = _extends({}, actions, {
-    value: valueWithoutError,
-    onChange: handleChange,
-    onSelectShortcut: handleSelectShortcut,
-    isValid
+  const clearValue = useEventCallback(() => setValue(valueManager.emptyValue));
+  const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(utils, timezone, valueType)));
+  const acceptValueChanges = useEventCallback(() => setValue(dateState.lastPublishedValue));
+  const cancelValueChanges = useEventCallback(() => setValue(dateState.lastCommittedValue, {
+    skipPublicationIfPristine: true
+  }));
+  const dismissViews = useEventCallback(() => {
+    setValue(dateState.lastPublishedValue, {
+      skipPublicationIfPristine: true
+    });
   });
-  const contextValue = React.useMemo(() => {
-    return {
-      open,
-      setOpen
-    };
-  }, [open, setOpen]);
+  const fieldResponse = {
+    value: dateState.draft,
+    onChange: (newValue, context) => setValue(newValue, {
+      validationError: context.validationError
+    })
+  };
+  const setValueFromView = useEventCallback((newValue, selectionState = 'partial') => {
+    // TODO: Expose a new method (private?) like `setView` that only updates the draft value.
+    if (selectionState === 'shallow') {
+      setDateState(prev => _extends({}, prev, {
+        draft: newValue,
+        hasBeenModifiedSinceMount: true
+      }));
+    }
+    setValue(newValue, {
+      changeImportance: selectionState === 'finish' && closeOnSelect ? 'accept' : 'set'
+    });
+  });
+  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
+  const viewResponse = {
+    value: valueWithoutError,
+    onChange: setValueFromView,
+    open,
+    setOpen
+  };
+  const actionsContextValue = React.useMemo(() => ({
+    setValue,
+    setOpen,
+    clearValue,
+    setValueToToday,
+    acceptValueChanges,
+    cancelValueChanges
+  }), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges]);
+  const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
+    open,
+    value: dateState.draft
+  }), [actionsContextValue, open, dateState.draft]);
+  const privateContextValue = React.useMemo(() => ({
+    dismissViews
+  }), [dismissViews]);
   const providerParams = {
     value: valueWithoutError,
-    contextValue
+    contextValue,
+    actionsContextValue,
+    privateContextValue,
+    isValidContextValue: isValid
   };
   return {
-    open,
     fieldProps: fieldResponse,
     viewProps: viewResponse,
-    layoutProps: layoutResponse,
-    actions,
     provider: providerParams
   };
 };

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
+import { UseFieldInternalProps } from '../useField';
 import { Validator } from '../../../validation';
-import { PickerVariant } from '../../models/common';
-import { TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, PickerValidDate, OnErrorProps, InferError, PickerValueType } from '../../../models';
+import { TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, PickerValidDate, OnErrorProps, InferError, PickerValueType, PickerChangeImportance } from '../../../models';
 import { GetDefaultReferenceDateProps } from '../../utils/getDefaultReferenceDate';
-import { PickerShortcutChangeImportance, PickersShortcutsItemContext } from '../../../PickersShortcuts';
+import type { PickersShortcutsItemContext } from '../../../PickersShortcuts';
 import { InferNonNullablePickerValue, PickerValidValue } from '../../models';
 export interface PickerValueManager<TValue extends PickerValidValue, TError> {
     /**
@@ -137,37 +136,6 @@ export interface UsePickerValueState<TValue extends PickerValidValue> {
      */
     hasBeenModifiedSinceMount: boolean;
 }
-export interface PickerValueUpdaterParams<TValue extends PickerValidValue, TError> {
-    action: PickerValueUpdateAction<TValue, TError>;
-    dateState: UsePickerValueState<TValue>;
-    /**
-     * Check if the new draft value has changed compared to some given 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 {TValue} comparisonValue The value to compare the new draft value with.
-     * @returns {boolean} `true` if the new draft value is equal to the comparison value.
-     */
-    hasChanged: (comparisonValue: TValue) => boolean;
-    isControlled: boolean;
-    closeOnSelect: boolean;
-}
-export type PickerValueUpdateAction<TValue extends PickerValidValue, TError> = {
-    name: 'setValueFromView';
-    value: TValue;
-    selectionState: PickerSelectionState;
-} | {
-    name: 'setValueFromField';
-    value: TValue;
-    context: FieldChangeHandlerContext<TError>;
-} | {
-    name: 'setValueFromAction';
-    value: TValue;
-    pickerAction: 'accept' | 'today' | 'cancel' | 'dismiss' | 'clear';
-} | {
-    name: 'setValueFromShortcut';
-    value: TValue;
-    changeImportance: PickerShortcutChangeImportance;
-    shortcut: PickersShortcutsItemContext;
-};
 /**
  * Props used to handle the value that are common to all pickers.
  */
@@ -204,8 +172,8 @@ export interface UsePickerValueBaseProps<TValue extends PickerValidValue, TError
  */
 export interface UsePickerValueNonStaticProps {
     /**
-     * If `true`, the popover or modal will close after submitting the full date.
-     * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+     * If `true`, the Picker will close after submitting the full date.
+     * @default false
      */
     closeOnSelect?: boolean;
     /**
@@ -234,18 +202,8 @@ export interface UsePickerValueParams<TValue extends PickerValidValue, TExternal
     props: TExternalProps;
     valueManager: PickerValueManager<TValue, InferError<TExternalProps>>;
     valueType: PickerValueType;
-    variant: PickerVariant;
     validator: Validator<TValue, InferError<TExternalProps>, TExternalProps>;
 }
-export interface UsePickerValueActions {
-    onAccept: () => void;
-    onClear: () => void;
-    onDismiss: () => void;
-    onCancel: () => void;
-    onSetToday: () => void;
-    onOpen: (event: React.UIEvent) => void;
-    onClose: (event?: React.UIEvent) => void;
-}
 export type UsePickerValueFieldResponse<TValue extends PickerValidValue, TError> = Required<Pick<UseFieldInternalProps<TValue, any, TError>, 'value' | 'onChange'>>;
 /**
  * Props passed to `usePickerViews`.
@@ -254,35 +212,42 @@ export interface UsePickerValueViewsResponse<TValue extends PickerValidValue> {
     value: TValue;
     onChange: (value: TValue, selectionState?: PickerSelectionState) => void;
     open: boolean;
-    onClose: (event?: React.MouseEvent) => void;
-}
-/**
- * Props passed to `usePickerLayoutProps`.
- */
-export interface UsePickerValueLayoutResponse<TValue extends PickerValidValue> extends UsePickerValueActions {
-    value: TValue;
-    onChange: (newValue: TValue) => void;
-    onSelectShortcut: (newValue: TValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext) => void;
-    isValid: (value: TValue) => boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 /**
  * Params passed to `usePickerProvider`.
  */
-export interface UsePickerValueProviderParams<TValue extends PickerValidValue> {
+export interface UsePickerValueProviderParams<TValue extends PickerValidValue, TError> {
     value: TValue;
-    contextValue: UsePickerValueContextValue;
+    contextValue: UsePickerValueContextValue<TValue, TError>;
+    actionsContextValue: UsePickerValueActionsContextValue<TValue, TError>;
+    privateContextValue: UsePickerValuePrivateContextValue;
+    isValidContextValue: (value: TValue) => boolean;
 }
 export interface UsePickerValueResponse<TValue extends PickerValidValue, TError> {
-    open: boolean;
-    actions: UsePickerValueActions;
     viewProps: UsePickerValueViewsResponse<TValue>;
     fieldProps: UsePickerValueFieldResponse<TValue, TError>;
-    layoutProps: UsePickerValueLayoutResponse<TValue>;
-    provider: UsePickerValueProviderParams<TValue>;
+    provider: UsePickerValueProviderParams<TValue, TError>;
+}
+export interface UsePickerValueContextValue<TValue extends PickerValidValue, TError> extends UsePickerValueActionsContextValue<TValue, TError> {
+    /**
+     * The current value of the picker.
+     */
+    value: TValue;
+    /**
+     * `true` if the picker is open, `false` otherwise.
+     */
+    open: boolean;
 }
-export interface UsePickerValueContextValue {
+export interface UsePickerValueActionsContextValue<TValue extends PickerValidValue, TError> {
     /**
-     * Sets the current open state of the Picker.
+     * 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.
@@ -293,7 +258,57 @@ export interface UsePickerValueContextValue {
      */
     setOpen: React.Dispatch<React.SetStateAction<boolean>>;
     /**
-     * `true` if the picker is open, `false` otherwise.
+     * Set the current value of the picker to be empty.
+     * The value will be `null` on single pickers and `[null, null]` on range pickers.
      */
-    open: boolean;
+    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 {
+    /**
+     * Closes the picker and accepts the current value if it is not equal to the last accepted value.
+     */
+    dismissViews: () => void;
+}
+export interface SetValueActionOptions<TError = string> {
+    /**
+     * 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 re-applied by the picker.
+     */
+    validationError?: TError;
+    /**
+     * The shortcut that triggered this change.
+     * Should not be defined if the change does not come from a shortcut.
+     */
+    shortcut?: PickersShortcutsItemContext;
+    /**
+     * Decide if 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;
 }

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

@@ -5,9 +5,9 @@ import { UseViewsOptions } from '../useViews';
 import type { UsePickerValueViewsResponse } from './usePickerValue.types';
 import { DateOrTimeViewWithMeridiem, PickerRangeValue, PickerValidValue, PickerValue } from '../../models';
 import { FieldRef, PickerValidDate, TimezoneProps } from '../../../models';
-interface PickerViewsRendererBaseExternalProps<TView extends DateOrTimeViewWithMeridiem> extends Omit<UsePickerViewsProps<any, TView, any, any>, 'openTo' | 'viewRenderers'> {
+export interface PickerViewsRendererBaseExternalProps extends Omit<UsePickerViewsProps<any, any, any>, 'openTo' | 'viewRenderers'> {
 }
-export type PickerViewsRendererProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = Omit<TExternalProps, 'className' | 'sx'> & TAdditionalProps & UsePickerValueViewsResponse<TValue> & {
+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;
@@ -15,19 +15,17 @@ export type PickerViewsRendererProps<TValue extends PickerValidValue, TView exte
     showViewSwitcher: boolean;
     timeViewsCount: number;
 };
-export type PickerViewRenderer<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<TView>, TAdditionalProps extends {}> = (props: PickerViewsRendererProps<TValue, TView, TExternalProps, TAdditionalProps>) => React.ReactNode;
-export type PickerViewRendererLookup<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends PickerViewsRendererBaseExternalProps<any>, TAdditionalProps extends {}> = {
-    [K in TView]: PickerViewRenderer<TValue, K, TExternalProps, TAdditionalProps> | null;
-};
+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, any>, TAdditionalProps extends {}> extends Omit<UseViewsOptions<any, TView>, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps {
+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, TAdditionalProps>;
+    viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps>;
     /**
      * If `true`, disable heavy animations.
      * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
@@ -42,40 +40,58 @@ export interface UsePickerViewsBaseProps<TValue extends PickerValidValue, TView
 /**
  * Props used to handle the value of the pickers.
  */
-export interface UsePickerViewsProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerViewsBaseProps<TValue, TView, TExternalProps, TAdditionalProps> {
+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, TAdditionalProps>, TAdditionalProps extends {}> {
+export interface UsePickerViewParams<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerViewsProps<TValue, TView, TExternalProps>> {
     props: TExternalProps;
     propsFromPickerValue: UsePickerValueViewsResponse<TValue>;
-    additionalViewProps: TAdditionalProps;
     autoFocusView: boolean;
-    fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue>> | undefined;
+    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, TAdditionalProps>} viewRenderers The `viewRenderers` that were provided to the picker component.
+     * @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?: (viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps, TAdditionalProps>, popperView: TView, rendererProps: PickerViewsRendererProps<TValue, TView, TExternalProps, TAdditionalProps>) => React.ReactNode;
+    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;
     shouldRestoreFocus: () => boolean;
-    layoutProps: UsePickerViewsLayoutResponse<TView>;
     provider: UsePickerViewsProviderParams<TView>;
 }
-export interface UsePickerViewsLayoutResponse<TView extends DateOrTimeViewWithMeridiem> {
-    view: TView | null;
-    onViewChange: (view: TView) => void;
+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> {
+    /**
+     * Available views.
+     */
     views: readonly TView[];
+    /**
+     * View currently rendered.
+     */
+    view: TView | null;
 }
 export interface UsePickerViewsProviderParams<TView extends DateOrTimeViewWithMeridiem> {
     hasUIView: boolean;
     views: readonly TView[];
+    contextValue: UsePickerViewsContextValue<TView>;
+    actionsContextValue: UsePickerViewsActionsContextValue<TView>;
 }
 /**
  * Manage the views of all the pickers:
@@ -83,5 +99,4 @@ export interface UsePickerViewsProviderParams<TView extends DateOrTimeViewWithMe
  * - 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, any>, TAdditionalProps extends {}>({ props, propsFromPickerValue, additionalViewProps, autoFocusView, rendererInterceptor, fieldRef, }: UsePickerViewParams<TValue, TView, TExternalProps, TAdditionalProps>) => UsePickerViewsResponse<TView>;
-export {};
+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>;