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

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/internals/hooks/usePicker/usePickerViews.js

@@ -31,8 +31,9 @@ export const usePickerViews = ({
 }) => {
   const {
     onChange,
+    value,
     open,
-    onClose
+    setOpen
   } = propsFromPickerValue;
   const {
     view: inView,
@@ -92,7 +93,7 @@ export const usePickerViews = ({
   useEnhancedEffect(() => {
     // 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
@@ -123,18 +124,18 @@ export 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) {
@@ -144,9 +145,10 @@ export const usePickerViews = ({
       if (renderer == null) {
         return null;
       }
-      const rendererProps = _extends({}, propsToForwardToView, additionalViewProps, propsFromPickerValue, {
+      const rendererProps = _extends({}, propsToForwardToView, additionalViewProps, {
         views,
         timezone,
+        value,
         onChange: setValueAndGoToNextView,
         view: popperView,
         onViewChange: setView,

package/modern/internals/index.js

@@ -31,4 +31,4 @@ export { applyDefaultViewProps } from "./utils/views.js";
 export { DayCalendar } from "../DateCalendar/DayCalendar.js";
 export { useCalendarState } from "../DateCalendar/useCalendarState.js";
 export { isInternalTimeView, isTimeView } from "./utils/time-utils.js";
-export { DateTimePickerToolbarForceDesktopVariant } from "../DateTimePicker/DateTimePickerToolbar.js";
+export { DateTimePickerToolbarOverrideContext } from "../DateTimePicker/DateTimePickerToolbar.js";

package/node/DatePicker/DatePickerToolbar.js

@@ -21,8 +21,9 @@ var _useUtils = require("../internals/hooks/useUtils");
 var _datePickerToolbarClasses = require("./datePickerToolbarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
 var _useToolbarOwnerState = require("../internals/hooks/useToolbarOwnerState");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className", "classes", "onViewChange", "view"];
+const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "className", "classes"];
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
@@ -69,12 +70,14 @@ const DatePickerToolbar = exports.DatePickerToolbar = /*#__PURE__*/React.forward
       isLandscape,
       toolbarFormat,
       toolbarPlaceholder = '––',
-      views,
       className,
       classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
+  const {
+    views
+  } = (0, _hooks.usePickerContext)();
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
   const classes = useUtilityClasses(classesProp);
@@ -120,12 +123,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.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.
    */
@@ -140,13 +137,5 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: _propTypes.default.node,
-  value: _propTypes.default.object,
-  /**
-   * Currently visible picker view.
-   */
-  view: _propTypes.default.oneOf(['day', 'month', 'year']).isRequired,
-  /**
-   * Available views.
-   */
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'month', 'year']).isRequired).isRequired
+  value: _propTypes.default.object
 } : void 0;

package/node/DateTimePicker/DateTimePickerTabs.js

@@ -19,6 +19,7 @@ var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _dateTimePickerTabsClasses = require("./dateTimePickerTabsClasses");
 var _dateUtils = require("../internals/utils/date-utils");
 var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const viewToTab = view => {
   if ((0, _dateUtils.isDatePickerView)(view)) {
@@ -72,9 +73,7 @@ const DateTimePickerTabs = exports.DateTimePickerTabs = function DateTimePickerT
   });
   const {
     dateIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DateRangeIcon, {}),
-    onViewChange,
     timeIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.TimeIcon, {}),
-    view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     className,
     classes: classesProp,
@@ -84,6 +83,10 @@ const DateTimePickerTabs = exports.DateTimePickerTabs = function DateTimePickerT
   const {
     ownerState
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const {
+    view,
+    onViewChange
+  } = (0, _hooks.usePickerContext)();
   const classes = useUtilityClasses(classesProp);
   const handleChange = (event, value) => {
     onViewChange(tabToView(value));
@@ -133,12 +136,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * @default `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`
    */
   hidden: _propTypes.default.bool,
-  /**
-   * Callback called when a tab 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.
    */
@@ -147,9 +144,5 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * Time tab icon.
    * @default Time
    */
-  timeIcon: _propTypes.default.node,
-  /**
-   * Currently visible picker view.
-   */
-  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired
+  timeIcon: _propTypes.default.node
 } : void 0;

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DateTimePickerToolbar = DateTimePickerToolbar;
-exports.DateTimePickerToolbarForceDesktopVariant = void 0;
+exports.DateTimePickerToolbarOverrideContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -30,7 +30,7 @@ var _pickersToolbarClasses = require("../internals/components/pickersToolbarClas
 var _usePickerContext = require("../hooks/usePickerContext");
 var _useToolbarOwnerState = require("../internals/hooks/useToolbarOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "toolbarTitle", "className", "classes"];
+const _excluded = ["ampm", "ampmInClock", "value", "onChange", "isLandscape", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "className", "classes"];
 const useUtilityClasses = (classes, ownerState) => {
   const {
     pickerOrientation,
@@ -214,10 +214,11 @@ const DateTimePickerToolbarAmPmSelection = (0, _styles.styled)('div', {
 });
 
 /**
- * If this context value is set to true, the toolbar will always be rendered in the desktop mode.
+ * If `forceDesktopVariant` is set to `true`, the toolbar will always be rendered in the desktop mode.
+ * If `onViewChange` is defined, the toolbar will call it instead of calling the default handler from `usePickerContext`.
  * This is used by the Date Time Range Picker Toolbar.
  */
-const DateTimePickerToolbarForceDesktopVariant = exports.DateTimePickerToolbarForceDesktopVariant = /*#__PURE__*/React.createContext(false);
+const DateTimePickerToolbarOverrideContext = exports.DateTimePickerToolbarOverrideContext = /*#__PURE__*/React.createContext(null);
 
 /**
  * Demos:
@@ -239,12 +240,9 @@ function DateTimePickerToolbar(inProps) {
       ampmInClock,
       value,
       onChange,
-      view,
       isLandscape,
-      onViewChange,
       toolbarFormat,
       toolbarPlaceholder = '––',
-      views,
       toolbarTitle: inToolbarTitle,
       className,
       classes: classesProp
@@ -253,7 +251,10 @@ function DateTimePickerToolbar(inProps) {
   const {
     disabled,
     readOnly,
-    variant
+    variant,
+    view: viewCtx,
+    onViewChange: onViewChangeCtx,
+    views
   } = (0, _usePickerContext.usePickerContext)();
   const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
   const classes = useUtilityClasses(classesProp, ownerState);
@@ -263,11 +264,13 @@ function DateTimePickerToolbar(inProps) {
     handleMeridiemChange
   } = (0, _dateHelpersHooks.useMeridiemMode)(value, ampm, onChange);
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
-  const forceDesktopVariant = React.useContext(DateTimePickerToolbarForceDesktopVariant);
-  const toolbarVariant = forceDesktopVariant ? 'desktop' : variant;
+  const overrides = React.useContext(DateTimePickerToolbarOverrideContext);
+  const toolbarVariant = overrides?.forceDesktopVariant ? 'desktop' : variant;
   const isDesktop = toolbarVariant === 'desktop';
   const showAmPmControl = Boolean(ampm && !ampmInClock);
   const toolbarTitle = inToolbarTitle ?? translations.dateTimePickerToolbarTitle;
+  const view = overrides ? overrides.view : viewCtx;
+  const onViewChange = overrides ? overrides.onViewChange : onViewChangeCtx;
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
   const dateText = React.useMemo(() => {
     if (!value) {
@@ -392,12 +395,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.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.
    */
@@ -416,13 +413,5 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
    */
   toolbarTitle: _propTypes.default.node,
-  value: _propTypes.default.object,
-  /**
-   * Currently visible picker view.
-   */
-  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  /**
-   * Available views.
-   */
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
+  value: _propTypes.default.object
 } : void 0;

package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -74,16 +74,8 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.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 {}
@@ -98,7 +90,5 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.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/PickersActionBar/PickersActionBar.js

@@ -15,8 +15,9 @@ var _styles = require("@mui/material/styles");
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 var _usePickerTranslations = require("../hooks/usePickerTranslations");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["onAccept", "onClear", "onCancel", "onSetToday", "actions"];
+const _excluded = ["actions"];
 const PickersActionBarRoot = (0, _styles.styled)(_DialogActions.default, {
   name: 'MuiPickersLayout',
   slot: 'ActionBar',
@@ -35,14 +36,16 @@ const PickersActionBarRoot = (0, _styles.styled)(_DialogActions.default, {
  */
 function PickersActionBar(props) {
   const {
-      onAccept,
-      onClear,
-      onCancel,
-      onSetToday,
       actions
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
+  const {
+    clearValue,
+    setValueToToday,
+    acceptValueChanges,
+    cancelValueChanges
+  } = (0, _hooks.usePickerActionsContext)();
   if (actions == null || actions.length === 0) {
     return null;
   }
@@ -50,22 +53,22 @@ function PickersActionBar(props) {
     switch (actionType) {
       case 'clear':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          onClick: onClear,
+          onClick: clearValue,
           children: translations.clearButtonLabel
         }, actionType);
       case 'cancel':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          onClick: onCancel,
+          onClick: cancelValueChanges,
           children: translations.cancelButtonLabel
         }, actionType);
       case 'accept':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          onClick: onAccept,
+          onClick: acceptValueChanges,
           children: translations.okButtonLabel
         }, actionType);
       case 'today':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          onClick: onSetToday,
+          onClick: setValueToToday,
           children: translations.todayButtonLabel
         }, actionType);
       default:
@@ -92,10 +95,6 @@ process.env.NODE_ENV !== "production" ? PickersActionBar.propTypes = {
    * @default false
    */
   disableSpacing: _propTypes.default.bool,
-  onAccept: _propTypes.default.func.isRequired,
-  onCancel: _propTypes.default.func.isRequired,
-  onClear: _propTypes.default.func.isRequired,
-  onSetToday: _propTypes.default.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */