@mui/x-date-pickers 8.0.0-alpha.4 → 8.0.0-alpha.6

package/internals/components/PickersPopper.js

@@ -14,6 +14,7 @@ import { getPickersPopperUtilityClass } from "./pickersPopperClasses.js";
 import { getActiveElement } from "../utils/utils.js";
 import { useDefaultReduceAnimations } from "../hooks/useDefaultReduceAnimations.js";
 import { usePickerPrivateContext } from "../hooks/usePickerPrivateContext.js";
+import { usePickerContext } from "../../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -210,8 +211,6 @@ export function PickersPopper(inProps) {
     containerRef = null,
     shouldRestoreFocus,
     onBlur,
-    onDismiss,
-    open,
     role,
     placement = 'bottom',
     slots,
@@ -219,17 +218,23 @@ export function PickersPopper(inProps) {
     reduceAnimations: inReduceAnimations,
     classes: classesProp
   } = props;
+  const {
+    open
+  } = usePickerContext();
+  const {
+    dismissViews
+  } = usePickerPrivateContext();
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
       if (open && nativeEvent.key === 'Escape') {
-        onDismiss();
+        dismissViews();
       }
     }
     document.addEventListener('keydown', handleKeyDown);
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [onDismiss, open]);
+  }, [dismissViews, open]);
   const lastFocusedElementRef = React.useRef(null);
   React.useEffect(() => {
     if (role === 'tooltip' || shouldRestoreFocus && !shouldRestoreFocus()) {
@@ -247,7 +252,7 @@ export function PickersPopper(inProps) {
       });
     }
   }, [open, role, shouldRestoreFocus]);
-  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur ?? onDismiss);
+  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur ?? dismissViews);
   const paperRef = React.useRef(null);
   const handleRef = useForkRef(paperRef, containerRef);
   const handlePaperRef = useForkRef(handleRef, clickAwayRef);
@@ -264,7 +269,7 @@ export function PickersPopper(inProps) {
     if (event.key === 'Escape') {
       // stop the propagation to avoid closing parent modal
       event.stopPropagation();
-      onDismiss();
+      dismissViews();
     }
   };
   const Transition = slots?.desktopTransition ?? reduceAnimations ? Fade : Grow;

package/internals/components/PickersToolbar.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { BaseToolbarProps } from '../models/props/toolbar';
 import { PickersToolbarClasses } from './pickersToolbarClasses';
-import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../models';
-export interface PickersToolbarProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends Pick<BaseToolbarProps<TValue, TView>, 'isLandscape' | 'hidden' | 'titleId'> {
+import { PickerValidValue } from '../models';
+export interface PickersToolbarProps<TValue extends PickerValidValue> extends Pick<BaseToolbarProps<TValue>, 'isLandscape' | 'hidden' | 'titleId'> {
     className?: string;
     landscapeDirection?: 'row' | 'column';
     toolbarTitle: React.ReactNode;
     classes?: Partial<PickersToolbarClasses>;
 }
-type PickersToolbarComponent = (<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem>(props: React.PropsWithChildren<PickersToolbarProps<TValue, TView>> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type PickersToolbarComponent = (<TValue extends PickerValidValue>(props: React.PropsWithChildren<PickersToolbarProps<TValue>> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 export declare const PickersToolbar: PickersToolbarComponent;

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -52,8 +52,6 @@ export const useDesktopPicker = _ref => {
   const labelId = useId();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    open,
-    actions,
     hasUIView,
     layoutProps,
     providerProps,
@@ -85,7 +83,11 @@ export const useDesktopPicker = _ref => {
       externalSlotProps: innerSlotProps?.openPickerButton,
       additionalProps: {
         disabled: disabled || readOnly,
-        onClick: open ? actions.onClose : actions.onOpen,
+        // This direct access to `providerProps` will go away in https://github.com/mui/mui-x/pull/15671
+        onClick: event => {
+          event.preventDefault();
+          providerProps.contextValue.setOpen(prevOpen => !prevOpen);
+        },
         'aria-label': getOpenDialogAriaText(pickerFieldProps.value),
         edge: inputAdornmentProps.position
       },
@@ -121,7 +123,7 @@ export const useDesktopPicker = _ref => {
       sx,
       label,
       name,
-      focused: open ? true : undefined
+      focused: providerProps.contextValue.open ? true : undefined
     }, isToolbarHidden && {
       id: labelId
     }, !!inputRef && {
@@ -170,12 +172,10 @@ export const useDesktopPicker = _ref => {
       slots: slotsForField,
       slotProps: slotProps,
       unstableFieldRef: handleFieldRef
-    })), /*#__PURE__*/_jsx(PickersPopper, _extends({
+    })), /*#__PURE__*/_jsx(PickersPopper, {
       role: "dialog",
       placement: "bottom-start",
-      anchorEl: containerRef.current
-    }, actions, {
-      open: open,
+      anchorEl: containerRef.current,
       slots: slots,
       slotProps: slotProps,
       shouldRestoreFocus: shouldRestoreFocus,
@@ -185,7 +185,7 @@ export const useDesktopPicker = _ref => {
         slotProps: slotProps,
         children: renderCurrentView()
       }))
-    }))]
+    })]
   }));
   return {
     renderPicker

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

@@ -14,7 +14,7 @@ import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
 import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../../../hooks/useClearableField';
 import { PickersTextFieldProps } from '../../../PickersTextField';
 import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider';
-export interface UseDesktopPickerSlots<TView extends DateOrTimeViewWithMeridiem> extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue, TView>, UseClearableFieldSlots {
+export interface UseDesktopPickerSlots extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, UseClearableFieldSlots {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -39,9 +39,9 @@ export interface UseDesktopPickerSlots<TView extends DateOrTimeViewWithMeridiem>
      */
     openPickerIcon: React.ElementType;
 }
-export interface UseDesktopPickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue, TView>, 'toolbar'> {
+export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {
 }
-export interface ExportedUseDesktopPickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue, TView>, UseClearableFieldSlotProps {
+export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, UseClearableFieldSlotProps {
     field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
     textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
     inputAdornment?: SlotComponentPropsFromProps<InputAdornmentProps, {}, PickerOwnerState>;
@@ -60,12 +60,12 @@ export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem,
      * Overridable component slots.
      * @default {}
      */
-    slots: UseDesktopPickerSlots<TView>;
+    slots: UseDesktopPickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseDesktopPickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
 export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
     props: TExternalProps;

package/internals/hooks/useFieldOwnerState.d.ts

@@ -2,5 +2,6 @@ import { FieldOwnerState } from '../../models';
 import { FormProps } from '../models';
 export declare function useFieldOwnerState(parameters: UseFieldOwnerStateParameters): FieldOwnerState;
 interface UseFieldOwnerStateParameters extends FormProps {
+    required?: boolean;
 }
 export {};

package/internals/hooks/useFieldOwnerState.js

@@ -1,12 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useRtl } from '@mui/system/RtlProvider';
 import { usePickerPrivateContext } from "./usePickerPrivateContext.js";
 export function useFieldOwnerState(parameters) {
   const {
     ownerState: pickerOwnerState
   } = usePickerPrivateContext();
+  const isRtl = useRtl();
   return React.useMemo(() => _extends({}, pickerOwnerState, {
     isFieldDisabled: parameters.disabled ?? false,
-    isFieldReadOnly: parameters.readOnly ?? false
-  }), [pickerOwnerState, parameters.disabled, parameters.readOnly]);
+    isFieldReadOnly: parameters.readOnly ?? false,
+    isFieldRequired: parameters.required ?? false,
+    fieldDirection: isRtl ? 'rtl' : 'ltr'
+  }), [pickerOwnerState, parameters.disabled, parameters.readOnly, parameters.required, isRtl]);
 }

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -46,8 +46,6 @@ export const useMobilePicker = _ref => {
   const labelId = useId();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    open,
-    actions,
     layoutProps,
     providerProps,
     renderCurrentView,
@@ -86,8 +84,12 @@ export const useMobilePicker = _ref => {
     }, isToolbarHidden && {
       id: labelId
     }, !(disabled || readOnly) && {
-      onClick: actions.onOpen,
-      onKeyDown: onSpaceOrEnter(actions.onOpen)
+      // These direct access to `providerProps` will go away in https://github.com/mui/mui-x/pull/15671
+      onClick: event => {
+        event.preventDefault();
+        providerProps.contextValue.setOpen(true);
+      },
+      onKeyDown: onSpaceOrEnter(() => providerProps.contextValue.setOpen(true))
     }, !!inputRef && {
       inputRef
     }),
@@ -124,8 +126,7 @@ export const useMobilePicker = _ref => {
       slots: slotsForField,
       slotProps: slotProps,
       unstableFieldRef: handleFieldRef
-    })), /*#__PURE__*/_jsx(PickersModalDialog, _extends({}, actions, {
-      open: open,
+    })), /*#__PURE__*/_jsx(PickersModalDialog, {
       slots: slots,
       slotProps: slotProps,
       children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
@@ -133,7 +134,7 @@ export const useMobilePicker = _ref => {
         slotProps: slotProps,
         children: renderCurrentView()
       }))
-    }))]
+    })]
   }));
   return {
     renderPicker

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

@@ -11,7 +11,7 @@ import { UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
 import { PickersTextFieldProps } from '../../../PickersTextField';
 import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider';
-export interface UseMobilePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue, TView> {
+export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue> {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -22,11 +22,11 @@ export interface UseMobilePickerSlots<TView extends DateOrTimeViewWithMeridiem>
      */
     textField?: React.ElementType;
 }
-export interface ExportedUseMobilePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue, TView> {
+export interface ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue> {
     field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
     textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
 }
-export interface UseMobilePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue, TView>, 'toolbar'> {
+export interface UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {
 }
 export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {
 }
@@ -35,12 +35,12 @@ export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem,
      * Overridable component slots.
      * @default {}
      */
-    slots: UseMobilePickerSlots<TView>;
+    slots: UseMobilePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+    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'> {
     props: TExternalProps;

package/internals/hooks/usePicker/usePicker.js

@@ -45,15 +45,13 @@ export const usePicker = ({
   });
   return {
     // Picker value
-    open: pickerValueResponse.open,
-    actions: pickerValueResponse.actions,
     fieldProps: pickerValueResponse.fieldProps,
     // Picker views
     renderCurrentView: pickerViewsResponse.renderCurrentView,
     hasUIView: pickerViewsResponse.provider.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker layout
-    layoutProps: _extends({}, pickerViewsResponse.layoutProps, pickerValueResponse.layoutProps),
+    layoutProps: _extends({}, pickerValueResponse.layoutProps),
     // Picker provider
     providerProps,
     // Picker owner state

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

@@ -13,9 +13,9 @@ export interface UsePickerProps<TValue extends PickerValidValue, TView extends D
 export interface UsePickerParams<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'variant' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'>, Pick<UsePickerProviderParameters<TValue, TView>, 'localeText'> {
     props: TExternalProps;
 }
-export interface UsePickerResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Pick<UsePickerValueResponse<TValue, TError>, 'open' | 'actions' | 'fieldProps'>, Pick<UsePickerViewsResponse<TView>, 'shouldRestoreFocus' | 'renderCurrentView'> {
+export interface UsePickerResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Pick<UsePickerValueResponse<TValue, TError>, 'fieldProps'>, Pick<UsePickerViewsResponse<TView>, 'shouldRestoreFocus' | 'renderCurrentView'> {
     ownerState: PickerOwnerState;
     providerProps: UsePickerProviderReturnValue;
-    layoutProps: UsePickerValueResponse<TValue, TError>['layoutProps'] & UsePickerViewsResponse<TView>['layoutProps'];
+    layoutProps: UsePickerValueResponse<TValue, TError>['layoutProps'];
     hasUIView: boolean;
 }

package/internals/hooks/usePicker/usePickerProvider.js

@@ -53,18 +53,19 @@ export function usePickerProvider(parameters) {
     pickerOrientation: orientation,
     pickerVariant: variant
   }), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
-  const contextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.contextValue, {
+  const contextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, {
     disabled: props.disabled ?? false,
     readOnly: props.readOnly ?? false,
     variant,
     orientation
-  }), [paramsFromUsePickerValue.contextValue, variant, orientation, props.disabled, props.readOnly]);
-  const privateContextValue = React.useMemo(() => ({
+  }), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, variant, orientation, props.disabled, props.readOnly]);
+  const privateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.privateContextValue, {
     ownerState
-  }), [ownerState]);
+  }), [paramsFromUsePickerValue, ownerState]);
   return {
     localeText,
     contextValue,
+    actionsContextValue: paramsFromUsePickerValue.actionsContextValue,
     privateContextValue
   };
 }

package/internals/hooks/usePicker/usePickerValue.js

@@ -251,49 +251,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,
@@ -310,15 +267,6 @@ export const usePickerValue = ({
     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
@@ -327,8 +275,8 @@ export const usePickerValue = ({
   const viewResponse = {
     value: valueWithoutError,
     onChange: handleChange,
-    onClose: handleClose,
-    open
+    open,
+    setOpen
   };
   const isValid = testedValue => {
     const error = validator({
@@ -339,28 +287,62 @@ export const usePickerValue = ({
     });
     return !valueManager.hasError(error);
   };
-  const layoutResponse = _extends({}, actions, {
+  const layoutResponse = {
     value: valueWithoutError,
     onChange: handleChange,
     onSelectShortcut: handleSelectShortcut,
     isValid
+  };
+  const clearValue = useEventCallback(() => updateDate({
+    value: valueManager.emptyValue,
+    name: 'setValueFromAction',
+    pickerAction: 'clear'
+  }));
+  const setValueToToday = useEventCallback(() => updateDate({
+    value: valueManager.getTodayValue(utils, timezone, valueType),
+    name: 'setValueFromAction',
+    pickerAction: 'today'
+  }));
+  const acceptValueChanges = useEventCallback(() => updateDate({
+    value: dateState.lastPublishedValue,
+    name: 'setValueFromAction',
+    pickerAction: 'accept'
+  }));
+  const cancelValueChanges = useEventCallback(() => updateDate({
+    value: dateState.lastCommittedValue,
+    name: 'setValueFromAction',
+    pickerAction: 'cancel'
+  }));
+  const dismissViews = useEventCallback(() => {
+    updateDate({
+      value: dateState.lastPublishedValue,
+      name: 'setValueFromAction',
+      pickerAction: 'dismiss'
+    });
   });
-  const contextValue = React.useMemo(() => {
-    return {
-      open,
-      setOpen
-    };
-  }, [open, setOpen]);
+  const actionsContextValue = React.useMemo(() => ({
+    setOpen,
+    clearValue,
+    setValueToToday,
+    acceptValueChanges,
+    cancelValueChanges
+  }), [setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges]);
+  const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
+    open
+  }), [actionsContextValue, open]);
+  const privateContextValue = React.useMemo(() => ({
+    dismissViews
+  }), [dismissViews]);
   const providerParams = {
     value: valueWithoutError,
-    contextValue
+    contextValue,
+    actionsContextValue,
+    privateContextValue
   };
   return {
-    open,
     fieldProps: fieldResponse,
     viewProps: viewResponse,
     layoutProps: layoutResponse,
-    actions,
     provider: providerParams
   };
 };

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

@@ -237,15 +237,6 @@ export interface UsePickerValueParams<TValue extends PickerValidValue, TExternal
     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,12 +245,12 @@ export interface UsePickerValueViewsResponse<TValue extends PickerValidValue> {
     value: TValue;
     onChange: (value: TValue, selectionState?: PickerSelectionState) => void;
     open: boolean;
-    onClose: (event?: React.MouseEvent) => void;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 /**
  * Props passed to `usePickerLayoutProps`.
  */
-export interface UsePickerValueLayoutResponse<TValue extends PickerValidValue> extends UsePickerValueActions {
+export interface UsePickerValueLayoutResponse<TValue extends PickerValidValue> {
     value: TValue;
     onChange: (newValue: TValue) => void;
     onSelectShortcut: (newValue: TValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext) => void;
@@ -271,18 +262,24 @@ export interface UsePickerValueLayoutResponse<TValue extends PickerValidValue> e
 export interface UsePickerValueProviderParams<TValue extends PickerValidValue> {
     value: TValue;
     contextValue: UsePickerValueContextValue;
+    actionsContextValue: UsePickerValueActionsContextValue;
+    privateContextValue: UsePickerValuePrivateContextValue;
 }
 export interface UsePickerValueResponse<TValue extends PickerValidValue, TError> {
-    open: boolean;
-    actions: UsePickerValueActions;
     viewProps: UsePickerValueViewsResponse<TValue>;
     fieldProps: UsePickerValueFieldResponse<TValue, TError>;
     layoutProps: UsePickerValueLayoutResponse<TValue>;
     provider: UsePickerValueProviderParams<TValue>;
 }
-export interface UsePickerValueContextValue {
+export interface UsePickerValueContextValue extends UsePickerValueActionsContextValue {
+    /**
+     * `true` if the picker is open, `false` otherwise.
+     */
+    open: boolean;
+}
+export interface UsePickerValueActionsContextValue {
     /**
-     * Sets the current open state of the Picker.
+     * Set the current open state of the Picker.
      * ```ts
      * setOpen(true); // Opens the picker.
      * setOpen(false); // Closes the picker.
@@ -293,7 +290,31 @@ 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;
 }

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

@@ -7,7 +7,7 @@ import { DateOrTimeViewWithMeridiem, PickerRangeValue, PickerValidValue, PickerV
 import { FieldRef, PickerValidDate, TimezoneProps } from '../../../models';
 interface PickerViewsRendererBaseExternalProps<TView extends DateOrTimeViewWithMeridiem> extends Omit<UsePickerViewsProps<any, TView, 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<TView>, TAdditionalProps extends {}> = Omit<TExternalProps, 'className' | 'sx'> & TAdditionalProps & Pick<UsePickerValueViewsResponse<TValue>, 'value' | 'onChange'> & {
     view: TView;
     views: readonly TView[];
     focusedView: TView | null;
@@ -65,17 +65,28 @@ export interface UsePickerViewParams<TValue extends PickerValidValue, TView exte
 export interface UsePickerViewsResponse<TView extends DateOrTimeViewWithMeridiem> {
     renderCurrentView: () => React.ReactNode;
     shouldRestoreFocus: () => boolean;
-    layoutProps: UsePickerViewsLayoutResponse<TView>;
     provider: UsePickerViewsProviderParams<TView>;
 }
-export interface UsePickerViewsLayoutResponse<TView extends DateOrTimeViewWithMeridiem> {
+export interface UsePickerViewsContextValue<TView extends DateOrTimeViewWithMeridiem> {
+    /**
+     * Available views.
+     */
+    views: readonly TView[];
+    /**
+     * View currently rendered.
+     */
     view: TView | null;
+    /**
+     * Callback called when the view to render changes
+     * @template TView
+     * @param {TView} view The view to render
+     */
     onViewChange: (view: TView) => void;
-    views: readonly TView[];
 }
 export interface UsePickerViewsProviderParams<TView extends DateOrTimeViewWithMeridiem> {
     hasUIView: boolean;
     views: readonly TView[];
+    contextValue: UsePickerViewsContextValue<TView>;
 }
 /**
  * Manage the views of all the pickers: