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

package/node/PickersLayout/PickersLayout.js

@@ -158,16 +158,8 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   isValid: _propTypes.default.func.isRequired,
-  onAccept: _propTypes.default.func.isRequired,
-  onCancel: _propTypes.default.func.isRequired,
   onChange: _propTypes.default.func.isRequired,
-  onClear: _propTypes.default.func.isRequired,
-  onClose: _propTypes.default.func.isRequired,
-  onDismiss: _propTypes.default.func.isRequired,
-  onOpen: _propTypes.default.func.isRequired,
   onSelectShortcut: _propTypes.default.func.isRequired,
-  onSetToday: _propTypes.default.func.isRequired,
-  onViewChange: _propTypes.default.func.isRequired,
   /**
    * The props used for each component slot.
    * @default {}
@@ -182,7 +174,5 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
-  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
+  value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object])
 } : void 0;

package/node/PickersLayout/usePickerLayout.js

@@ -42,17 +42,11 @@ const usePickerLayout = props => {
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const {
     variant,
-    orientation
+    orientation,
+    view
   } = (0, _hooks.usePickerContext)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const {
-    onAccept,
-    onClear,
-    onCancel,
-    onSetToday,
-    view,
-    views,
-    onViewChange,
     value,
     onChange,
     onSelectShortcut,
@@ -77,10 +71,6 @@ const usePickerLayout = props => {
     elementType: ActionBar,
     externalSlotProps: slotProps?.actionBar,
     additionalProps: {
-      onAccept,
-      onClear,
-      onCancel,
-      onSetToday,
       actions: variant === 'desktop' ? [] : ['cancel', 'accept']
     },
     className: classes.actionBar,
@@ -97,10 +87,7 @@ const usePickerLayout = props => {
       isLandscape: orientation === 'landscape',
       // Will be removed in a follow up PR?
       onChange,
-      value,
-      view,
-      onViewChange,
-      views
+      value
     },
     className: classes.toolbar,
     ownerState
@@ -113,8 +100,6 @@ const usePickerLayout = props => {
   // Tabs
   const Tabs = slots?.tabs;
   const tabs = view && Tabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs, (0, _extends2.default)({
-    view: view,
-    onViewChange: onViewChange,
     className: classes.tabs
   }, slotProps?.tabs)) : null;
 

package/node/TimePicker/TimePickerToolbar.js

@@ -26,7 +26,7 @@ var _dateUtils = require("../internals/utils/date-utils");
 var _hooks = require("../hooks");
 var _useToolbarOwnerState = require("../internals/hooks/useToolbarOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "className", "classes"];
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "className", "classes"];
 const useUtilityClasses = (classes, ownerState) => {
   const {
     pickerOrientation,
@@ -132,9 +132,6 @@ function TimePickerToolbar(inProps) {
       value,
       isLandscape,
       onChange,
-      view,
-      onViewChange,
-      views,
       className,
       classes: classesProp
     } = props,
@@ -145,7 +142,10 @@ function TimePickerToolbar(inProps) {
   const classes = useUtilityClasses(classesProp, ownerState);
   const {
     disabled,
-    readOnly
+    readOnly,
+    view,
+    onViewChange,
+    views
   } = (0, _hooks.usePickerContext)();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
@@ -230,12 +230,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   hidden: _propTypes.default.bool,
   isLandscape: _propTypes.default.bool.isRequired,
   onChange: _propTypes.default.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: _propTypes.default.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -250,13 +244,5 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: _propTypes.default.node,
-  value: _propTypes.default.object,
-  /**
-   * Currently visible picker view.
-   */
-  view: _propTypes.default.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired,
-  /**
-   * Available views.
-   */
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired).isRequired
+  value: _propTypes.default.object
 } : void 0;

package/node/hooks/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "useParsedFormat", {
     return _useParsedFormat.useParsedFormat;
   }
 });
+Object.defineProperty(exports, "usePickerActionsContext", {
+  enumerable: true,
+  get: function () {
+    return _usePickerActionsContext.usePickerActionsContext;
+  }
+});
 Object.defineProperty(exports, "usePickerContext", {
   enumerable: true,
   get: function () {
@@ -37,4 +43,5 @@ var _useClearableField = require("./useClearableField");
 var _usePickerTranslations = require("./usePickerTranslations");
 var _useSplitFieldProps = require("./useSplitFieldProps");
 var _useParsedFormat = require("./useParsedFormat");
-var _usePickerContext = require("./usePickerContext");
+var _usePickerContext = require("./usePickerContext");
+var _usePickerActionsContext = require("./usePickerActionsContext");

package/node/hooks/usePickerActionsContext.js

@@ -0,0 +1,22 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePickerActionsContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _PickerProvider = require("../internals/components/PickerProvider");
+/**
+ * Returns a subset of the context passed by the picker wrapping the current component.
+ * It only contains the actions and never causes a re-render of the component using it.
+ */
+const usePickerActionsContext = () => {
+  const value = React.useContext(_PickerProvider.PickerActionsContext);
+  if (value == null) {
+    throw new Error(['MUI X: The `usePickerActionsContext` can only be called in fields that are used as a slot of a picker component'].join('\n'));
+  }
+  return value;
+};
+exports.usePickerActionsContext = usePickerActionsContext;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-alpha.5
+ * @mui/x-date-pickers v8.0.0-alpha.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/components/PickerProvider.js

@@ -4,12 +4,13 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PickerPrivateContext = exports.PickerContext = void 0;
+exports.PickerPrivateContext = exports.PickerContext = exports.PickerActionsContext = void 0;
 exports.PickerProvider = PickerProvider;
 var React = _interopRequireWildcard(require("react"));
 var _LocalizationProvider = require("../../LocalizationProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const PickerContext = exports.PickerContext = /*#__PURE__*/React.createContext(null);
+const PickerActionsContext = exports.PickerActionsContext = /*#__PURE__*/React.createContext(null);
 const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.createContext({
   ownerState: {
     isPickerDisabled: false,
@@ -18,7 +19,8 @@ const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.c
     isPickerOpen: false,
     pickerVariant: 'desktop',
     pickerOrientation: 'portrait'
-  }
+  },
+  dismissViews: () => {}
 });
 
 /**
@@ -31,17 +33,21 @@ const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.c
 function PickerProvider(props) {
   const {
     contextValue,
+    actionsContextValue,
     privateContextValue,
     localeText,
     children
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerPrivateContext.Provider, {
-      value: privateContextValue,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
-        localeText: localeText,
-        children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerActionsContext.Provider, {
+      value: actionsContextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerPrivateContext.Provider, {
+        value: privateContextValue,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
+          localeText: localeText,
+          children: children
+        })
       })
     })
   });

package/node/internals/components/PickersModalDialog.js

@@ -13,6 +13,8 @@ var _Fade = _interopRequireDefault(require("@mui/material/Fade"));
 var _Dialog = _interopRequireWildcard(require("@mui/material/Dialog"));
 var _styles = require("@mui/material/styles");
 var _dimensions = require("../constants/dimensions");
+var _hooks = require("../../hooks");
+var _usePickerPrivateContext = require("../hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const PickersModalDialogRoot = (0, _styles.styled)(_Dialog.default)({
   [`& .${_Dialog.dialogClasses.container}`]: {
@@ -31,16 +33,20 @@ const PickersModalDialogContent = (0, _styles.styled)(_DialogContent.default)({
 function PickersModalDialog(props) {
   const {
     children,
-    onDismiss,
-    open,
     slots,
     slotProps
   } = props;
+  const {
+    open
+  } = (0, _hooks.usePickerContext)();
+  const {
+    dismissViews
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const Dialog = slots?.dialog ?? PickersModalDialogRoot;
   const Transition = slots?.mobileTransition ?? _Fade.default;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog, (0, _extends2.default)({
     open: open,
-    onClose: onDismiss
+    onClose: dismissViews
   }, slotProps?.dialog, {
     TransitionComponent: Transition,
     TransitionProps: slotProps?.mobileTransition,

package/node/internals/components/PickersPopper.js

@@ -21,6 +21,7 @@ var _pickersPopperClasses = require("./pickersPopperClasses");
 var _utils2 = require("../utils/utils");
 var _useDefaultReduceAnimations = require("../hooks/useDefaultReduceAnimations");
 var _usePickerPrivateContext = require("../hooks/usePickerPrivateContext");
+var _hooks = require("../../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["PaperComponent", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
 const useUtilityClasses = classes => {
@@ -218,8 +219,6 @@ function PickersPopper(inProps) {
     containerRef = null,
     shouldRestoreFocus,
     onBlur,
-    onDismiss,
-    open,
     role,
     placement = 'bottom',
     slots,
@@ -227,17 +226,23 @@ function PickersPopper(inProps) {
     reduceAnimations: inReduceAnimations,
     classes: classesProp
   } = props;
+  const {
+    open
+  } = (0, _hooks.usePickerContext)();
+  const {
+    dismissViews
+  } = (0, _usePickerPrivateContext.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()) {
@@ -255,7 +260,7 @@ 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 = (0, _utils.unstable_useForkRef)(paperRef, containerRef);
   const handlePaperRef = (0, _utils.unstable_useForkRef)(handleRef, clickAwayRef);
@@ -272,7 +277,7 @@ 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.default : _Grow.default;

package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -59,8 +59,6 @@ const useDesktopPicker = _ref => {
   const labelId = (0, _useId.default)();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    open,
-    actions,
     hasUIView,
     layoutProps,
     providerProps,
@@ -92,7 +90,11 @@ 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
       },
@@ -128,7 +130,7 @@ const useDesktopPicker = _ref => {
       sx,
       label,
       name,
-      focused: open ? true : undefined
+      focused: providerProps.contextValue.open ? true : undefined
     }, isToolbarHidden && {
       id: labelId
     }, !!inputRef && {
@@ -177,12 +179,10 @@ const useDesktopPicker = _ref => {
       slots: slotsForField,
       slotProps: slotProps,
       unstableFieldRef: handleFieldRef
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersPopper.PickersPopper, (0, _extends2.default)({
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersPopper.PickersPopper, {
       role: "dialog",
       placement: "bottom-start",
-      anchorEl: containerRef.current
-    }, actions, {
-      open: open,
+      anchorEl: containerRef.current,
       slots: slots,
       slotProps: slotProps,
       shouldRestoreFocus: shouldRestoreFocus,
@@ -192,7 +192,7 @@ const useDesktopPicker = _ref => {
         slotProps: slotProps,
         children: renderCurrentView()
       }))
-    }))]
+    })]
   }));
   return {
     renderPicker

package/node/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -53,8 +53,6 @@ const useMobilePicker = _ref => {
   const labelId = (0, _useId.default)();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    open,
-    actions,
     layoutProps,
     providerProps,
     renderCurrentView,
@@ -93,8 +91,12 @@ const useMobilePicker = _ref => {
     }, isToolbarHidden && {
       id: labelId
     }, !(disabled || readOnly) && {
-      onClick: actions.onOpen,
-      onKeyDown: (0, _utils.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: (0, _utils.onSpaceOrEnter)(() => providerProps.contextValue.setOpen(true))
     }, !!inputRef && {
       inputRef
     }),
@@ -131,8 +133,7 @@ const useMobilePicker = _ref => {
       slots: slotsForField,
       slotProps: slotProps,
       unstableFieldRef: handleFieldRef
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, (0, _extends2.default)({}, actions, {
-      open: open,
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, {
       slots: slots,
       slotProps: slotProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, layoutProps, slotProps?.layout, {
@@ -140,7 +141,7 @@ const useMobilePicker = _ref => {
         slotProps: slotProps,
         children: renderCurrentView()
       }))
-    }))]
+    })]
   }));
   return {
     renderPicker

package/node/internals/hooks/usePicker/usePicker.js

@@ -52,15 +52,13 @@ 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: (0, _extends2.default)({}, pickerViewsResponse.layoutProps, pickerValueResponse.layoutProps),
+    layoutProps: (0, _extends2.default)({}, pickerValueResponse.layoutProps),
     // Picker provider
     providerProps,
     // Picker owner state

package/node/internals/hooks/usePicker/usePickerProvider.js

@@ -63,18 +63,19 @@ function usePickerProvider(parameters) {
     pickerOrientation: orientation,
     pickerVariant: variant
   }), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
-  const contextValue = React.useMemo(() => (0, _extends2.default)({}, paramsFromUsePickerValue.contextValue, {
+  const contextValue = React.useMemo(() => (0, _extends2.default)({}, 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(() => (0, _extends2.default)({}, paramsFromUsePickerValue.privateContextValue, {
     ownerState
-  }), [ownerState]);
+  }), [paramsFromUsePickerValue, ownerState]);
   return {
     localeText,
     contextValue,
+    actionsContextValue: paramsFromUsePickerValue.actionsContextValue,
     privateContextValue
   };
 }

package/node/internals/hooks/usePicker/usePickerValue.js

@@ -259,49 +259,6 @@ const usePickerValue = ({
       hasBeenModifiedSinceMount: true
     }));
   }
-  const handleClear = (0, _useEventCallback.default)(() => {
-    updateDate({
-      value: valueManager.emptyValue,
-      name: 'setValueFromAction',
-      pickerAction: 'clear'
-    });
-  });
-  const handleAccept = (0, _useEventCallback.default)(() => {
-    updateDate({
-      value: dateState.lastPublishedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'accept'
-    });
-  });
-  const handleDismiss = (0, _useEventCallback.default)(() => {
-    updateDate({
-      value: dateState.lastPublishedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'dismiss'
-    });
-  });
-  const handleCancel = (0, _useEventCallback.default)(() => {
-    updateDate({
-      value: dateState.lastCommittedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'cancel'
-    });
-  });
-  const handleSetToday = (0, _useEventCallback.default)(() => {
-    updateDate({
-      value: valueManager.getTodayValue(utils, timezone, valueType),
-      name: 'setValueFromAction',
-      pickerAction: 'today'
-    });
-  });
-  const handleOpen = (0, _useEventCallback.default)(event => {
-    event.preventDefault();
-    setOpen(true);
-  });
-  const handleClose = (0, _useEventCallback.default)(event => {
-    event?.preventDefault();
-    setOpen(false);
-  });
   const handleChange = (0, _useEventCallback.default)((newValue, selectionState = 'partial') => updateDate({
     name: 'setValueFromView',
     value: newValue,
@@ -318,15 +275,6 @@ 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
@@ -335,8 +283,8 @@ const usePickerValue = ({
   const viewResponse = {
     value: valueWithoutError,
     onChange: handleChange,
-    onClose: handleClose,
-    open
+    open,
+    setOpen
   };
   const isValid = testedValue => {
     const error = validator({
@@ -347,28 +295,62 @@ const usePickerValue = ({
     });
     return !valueManager.hasError(error);
   };
-  const layoutResponse = (0, _extends2.default)({}, actions, {
+  const layoutResponse = {
     value: valueWithoutError,
     onChange: handleChange,
     onSelectShortcut: handleSelectShortcut,
     isValid
+  };
+  const clearValue = (0, _useEventCallback.default)(() => updateDate({
+    value: valueManager.emptyValue,
+    name: 'setValueFromAction',
+    pickerAction: 'clear'
+  }));
+  const setValueToToday = (0, _useEventCallback.default)(() => updateDate({
+    value: valueManager.getTodayValue(utils, timezone, valueType),
+    name: 'setValueFromAction',
+    pickerAction: 'today'
+  }));
+  const acceptValueChanges = (0, _useEventCallback.default)(() => updateDate({
+    value: dateState.lastPublishedValue,
+    name: 'setValueFromAction',
+    pickerAction: 'accept'
+  }));
+  const cancelValueChanges = (0, _useEventCallback.default)(() => updateDate({
+    value: dateState.lastCommittedValue,
+    name: 'setValueFromAction',
+    pickerAction: 'cancel'
+  }));
+  const dismissViews = (0, _useEventCallback.default)(() => {
+    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(() => (0, _extends2.default)({}, 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/node/internals/hooks/usePicker/usePickerViews.js

@@ -38,8 +38,9 @@ const usePickerViews = ({
 }) => {
   const {
     onChange,
+    value,
     open,
-    onClose
+    setOpen
   } = propsFromPickerValue;
   const {
     view: inView,
@@ -99,7 +100,7 @@ const usePickerViews = ({
   (0, _useEnhancedEffect.default)(() => {
     // Handle case of `DateTimePicker` without time renderers
     if (currentViewMode === 'field' && open) {
-      onClose();
+      setOpen(false);
       setTimeout(() => {
         fieldRef?.current?.setSelectedSections(view);
         // focusing the input before the range selection is done
@@ -130,18 +131,18 @@ const usePickerViews = ({
     setFocusedView(newView, true);
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const layoutProps = {
+  const contextValue = React.useMemo(() => ({
     views,
     view: popperView,
     onViewChange: setView
-  };
+  }), [views, popperView, setView]);
   const providerParams = {
     hasUIView,
-    views
+    views,
+    contextValue
   };
   return {
     shouldRestoreFocus,
-    layoutProps,
     provider: providerParams,
     renderCurrentView: () => {
       if (popperView == null) {
@@ -151,9 +152,10 @@ const usePickerViews = ({
       if (renderer == null) {
         return null;
       }
-      const rendererProps = (0, _extends2.default)({}, propsToForwardToView, additionalViewProps, propsFromPickerValue, {
+      const rendererProps = (0, _extends2.default)({}, propsToForwardToView, additionalViewProps, {
         views,
         timezone,
+        value,
         onChange: setValueAndGoToNextView,
         view: popperView,
         onViewChange: setView,