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

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/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:

package/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/internals/hooks/useStaticPicker/useStaticPicker.types.d.ts

@@ -4,9 +4,9 @@ import { BasePickerProps } from '../../models/props/basePickerProps';
 import { UsePickerParams } from '../usePicker';
 import { UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
-export interface UseStaticPickerSlots<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<PickerValue, TView> {
+export interface UseStaticPickerSlots extends ExportedPickersLayoutSlots<PickerValue> {
 }
-export interface UseStaticPickerSlotProps<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<PickerValue, TView> {
+export interface UseStaticPickerSlotProps extends ExportedPickersLayoutSlotProps<PickerValue> {
 }
 export interface StaticOnlyPickerProps {
     /**
@@ -31,12 +31,12 @@ export interface UseStaticPickerProps<TView extends DateOrTimeViewWithMeridiem,
      * Overridable component slots.
      * @default {}
      */
-    slots?: UseStaticPickerSlots<TView>;
+    slots?: UseStaticPickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseStaticPickerSlotProps<TView>;
+    slotProps?: UseStaticPickerSlotProps;
 }
 export interface UseStaticPickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;

package/internals/index.d.ts

@@ -29,8 +29,8 @@ export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValu
 export { useFieldOwnerState } from './hooks/useFieldOwnerState';
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
 export { usePicker } from './hooks/usePicker';
-export type { UsePickerResponse, UsePickerParams, UsePickerProps, UsePickerValueFieldResponse, PickerViewsRendererProps, } from './hooks/usePicker';
-export type { UsePickerValueNonStaticProps, PickerValueManager, PickerSelectionState, } from './hooks/usePicker/usePickerValue.types';
+export type { UsePickerParams, UsePickerProps, UsePickerValueFieldResponse, PickerViewsRendererProps, } from './hooks/usePicker';
+export type { UsePickerValueContextValue, UsePickerValueNonStaticProps, PickerValueManager, PickerSelectionState, } from './hooks/usePicker/usePickerValue.types';
 export type { PickerViewRendererLookup, PickerViewRenderer, UsePickerViewsProps, } from './hooks/usePicker/usePickerViews';
 export type { UsePickerProviderNonStaticProps } from './hooks/usePicker/usePickerProvider';
 export { usePickerPrivateContext } from './hooks/usePickerPrivateContext';
@@ -46,7 +46,7 @@ export type { RangePosition } from './models/pickers';
 export type { BaseSingleInputFieldProps, FieldRangeSection } from './models/fields';
 export type { BasePickerProps, BasePickerInputProps, BaseNonStaticPickerProps, } from './models/props/basePickerProps';
 export type { BaseClockProps, DesktopOnlyTimePickerProps, AmPmProps } from './models/props/time';
-export type { BaseTabsProps, ExportedBaseTabsProps } from './models/props/tabs';
+export type { ExportedBaseTabsProps } from './models/props/tabs';
 export type { BaseToolbarProps, ExportedBaseToolbarProps } from './models/props/toolbar';
 export type { FormProps } from './models/formProps';
 export type { PickerVariant, TimeViewWithMeridiem, DateOrTimeViewWithMeridiem, } from './models/common';
@@ -65,4 +65,4 @@ export type { DayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, Exported
 export type { ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';
 export { useCalendarState } from '../DateCalendar/useCalendarState';
 export { isInternalTimeView, isTimeView } from './utils/time-utils';
-export { DateTimePickerToolbarForceDesktopVariant } from '../DateTimePicker/DateTimePickerToolbar';
+export { DateTimePickerToolbarOverrideContext } from '../DateTimePicker/DateTimePickerToolbar';

package/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/internals/models/props/tabs.d.ts

@@ -1,18 +1,5 @@
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
-import { DateOrTimeViewWithMeridiem } from '../common';
-export interface BaseTabsProps<TView extends DateOrTimeViewWithMeridiem> {
-    /**
-     * Currently visible picker view.
-     */
-    view: TView;
-    /**
-     * Callback called when a tab is clicked.
-     * @template TView
-     * @param {TView} view The view to open
-     */
-    onViewChange: (view: TView) => void;
-}
 export interface ExportedBaseTabsProps {
     className?: string;
     /**