@mui/x-date-pickers 8.0.0-alpha.1 → 8.0.0-alpha.11

package/{modern/internals/components/PickersPopper.js → internals/components/PickerPopper/PickerPopper.js}

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["PaperComponent", "popperPlacement", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
+const _excluded = ["PaperComponent", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import Grow from '@mui/material/Grow';
@@ -10,22 +10,20 @@ import MuiPopper from '@mui/material/Popper';
 import BaseFocusTrap from '@mui/material/Unstable_TrapFocus';
 import { unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, unstable_ownerDocument as ownerDocument, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { getPickersPopperUtilityClass } from "./pickersPopperClasses.js";
-import { getActiveElement } from "../utils/utils.js";
-import { useDefaultReduceAnimations } from "../hooks/useDefaultReduceAnimations.js";
+import { getPickerPopperUtilityClass } from "./pickerPopperClasses.js";
+import { getActiveElement } from "../../utils/utils.js";
+import { usePickerPrivateContext } from "../../hooks/usePickerPrivateContext.js";
+import { usePickerContext } from "../../../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     paper: ['paper']
   };
-  return composeClasses(slots, getPickersPopperUtilityClass, classes);
+  return composeClasses(slots, getPickerPopperUtilityClass, classes);
 };
-const PickersPopperRoot = styled(MuiPopper, {
-  name: 'MuiPickersPopper',
+const PickerPopperRoot = styled(MuiPopper, {
+  name: 'MuiPickerPopper',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
 })(({
@@ -33,8 +31,8 @@ const PickersPopperRoot = styled(MuiPopper, {
 }) => ({
   zIndex: theme.zIndex.modal
 }));
-const PickersPopperPaper = styled(MuiPaper, {
-  name: 'MuiPickersPopper',
+const PickerPopperPaper = styled(MuiPaper, {
+  name: 'MuiPickerPopper',
   slot: 'Paper',
   overridesResolver: (_, styles) => styles.paper
 })({
@@ -42,8 +40,8 @@ const PickersPopperPaper = styled(MuiPaper, {
   transformOrigin: 'top center',
   variants: [{
     props: ({
-      placement
-    }) => ['top', 'top-start', 'top-end'].includes(placement),
+      popperPlacement
+    }) => ['top', 'top-start', 'top-end'].includes(popperPlacement),
     style: {
       transformOrigin: 'bottom center'
     }
@@ -164,11 +162,10 @@ function useClickAwayListener(active, onClickAway) {
   }, [active, handleClickAway]);
   return [nodeRef, handleSynthetic, handleSynthetic];
 }
-const PickersPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
+const PickerPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       PaperComponent,
-      popperPlacement,
-      ownerState: inOwnerState,
+      ownerState,
       children,
       paperSlotProps,
       paperClasses,
@@ -178,9 +175,6 @@ const PickersPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) =>
       // https://mui.com/material-ui/transitions/#child-requirement
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, inOwnerState, {
-    placement: popperPlacement
-  });
   const paperProps = useSlotProps({
     elementType: PaperComponent,
     externalSlotProps: paperSlotProps,
@@ -205,39 +199,44 @@ const PickersPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) =>
     children: children
   }));
 });
-export function PickersPopper(inProps) {
+export function PickerPopper(inProps) {
   const props = useThemeProps({
     props: inProps,
-    name: 'MuiPickersPopper'
+    name: 'MuiPickerPopper'
   });
   const {
-    anchorEl,
     children,
     containerRef = null,
-    shouldRestoreFocus,
     onBlur,
-    onDismiss,
-    open,
     role,
-    placement,
+    placement = 'bottom-start',
     slots,
     slotProps,
-    reduceAnimations: inReduceAnimations
+    classes: classesProp
   } = props;
+  const {
+    open,
+    triggerRef,
+    reduceAnimations
+  } = usePickerContext();
+  const {
+    dismissViews,
+    doesTheCurrentViewHasAnUI
+  } = 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()) {
+    if (role === 'tooltip' || !doesTheCurrentViewHasAnUI()) {
       return;
     }
     if (open) {
@@ -251,26 +250,29 @@ export function PickersPopper(inProps) {
         }
       });
     }
-  }, [open, role, shouldRestoreFocus]);
-  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur ?? onDismiss);
+  }, [open, role, doesTheCurrentViewHasAnUI]);
+  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur ?? dismissViews);
   const paperRef = React.useRef(null);
   const handleRef = useForkRef(paperRef, containerRef);
   const handlePaperRef = useForkRef(handleRef, clickAwayRef);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
-  const defaultReduceAnimations = useDefaultReduceAnimations();
-  const reduceAnimations = inReduceAnimations ?? defaultReduceAnimations;
+  const classes = useUtilityClasses(classesProp);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    popperPlacement: placement
+  });
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
       // stop the propagation to avoid closing parent modal
       event.stopPropagation();
-      onDismiss();
+      dismissViews();
     }
   };
   const Transition = slots?.desktopTransition ?? reduceAnimations ? Fade : Grow;
   const FocusTrap = slots?.desktopTrapFocus ?? BaseFocusTrap;
-  const Paper = slots?.desktopPaper ?? PickersPopperPaper;
-  const Popper = slots?.popper ?? PickersPopperRoot;
+  const Paper = slots?.desktopPaper ?? PickerPopperPaper;
+  const Popper = slots?.popper ?? PickerPopperRoot;
   const popperProps = useSlotProps({
     elementType: Popper,
     externalSlotProps: slotProps?.popper,
@@ -278,17 +280,16 @@ export function PickersPopper(inProps) {
       transition: true,
       role,
       open,
-      anchorEl,
       placement,
+      anchorEl: triggerRef.current,
       onKeyDown: handleKeyDown
     },
     className: classes.root,
-    ownerState: props
+    ownerState
   });
   return /*#__PURE__*/_jsx(Popper, _extends({}, popperProps, {
     children: ({
-      TransitionProps,
-      placement: popperPlacement
+      TransitionProps
     }) => /*#__PURE__*/_jsx(FocusTrap, _extends({
       open: open,
       disableAutoFocus: true
@@ -301,10 +302,9 @@ export function PickersPopper(inProps) {
       isEnabled: () => true
     }, slotProps?.desktopTrapFocus, {
       children: /*#__PURE__*/_jsx(Transition, _extends({}, TransitionProps, slotProps?.desktopTransition, {
-        children: /*#__PURE__*/_jsx(PickersPopperPaperWrapper, {
+        children: /*#__PURE__*/_jsx(PickerPopperPaperWrapper, {
           PaperComponent: Paper,
           ownerState: ownerState,
-          popperPlacement: popperPlacement,
           ref: handlePaperRef,
           onPaperClick: onPaperClick,
           onPaperTouchStart: onPaperTouchStart,

package/internals/components/PickerPopper/index.d.ts

@@ -0,0 +1,4 @@
+export { PickerPopper } from './PickerPopper';
+export type { ExportedPickerPopperProps } from './PickerPopper';
+export { pickerPopperClasses, getPickerPopperUtilityClass } from './pickerPopperClasses';
+export type { PickerPopperClassKey, PickerPopperClasses } from './pickerPopperClasses';

package/internals/components/PickerPopper/index.js

@@ -0,0 +1,2 @@
+export { PickerPopper } from "./PickerPopper.js";
+export { pickerPopperClasses, getPickerPopperUtilityClass } from "./pickerPopperClasses.js";

package/internals/components/PickerPopper/pickerPopperClasses.d.ts

@@ -0,0 +1,9 @@
+export interface PickerPopperClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the paper element. */
+    paper: string;
+}
+export type PickerPopperClassKey = keyof PickerPopperClasses;
+export declare function getPickerPopperUtilityClass(slot: string): string;
+export declare const pickerPopperClasses: Record<"root" | "paper", string>;

package/internals/components/PickerPopper/pickerPopperClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getPickerPopperUtilityClass(slot) {
+  return generateUtilityClass('MuiPickerPopper', slot);
+}
+export const pickerPopperClasses = generateUtilityClasses('MuiPickerPopper', ['root', 'paper']);

package/internals/components/PickerProvider.d.ts

@@ -1,8 +1,13 @@
 import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 import { PickerOwnerState } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
-import { PickerOrientation, PickerVariant } from '../models';
-export declare const PickerContext: React.Context<PickerContextValue | null>;
+import { DateOrTimeViewWithMeridiem, PickerOrientation, PickerValidValue, PickerVariant } from '../models';
+import type { UsePickerValueActionsContextValue, UsePickerValueContextValue, UsePickerValuePrivateContextValue } from '../hooks/usePicker/usePickerValue.types';
+import { UsePickerViewsActionsContextValue, UsePickerViewsContextValue, UsePickerViewsPrivateContextValue } from '../hooks/usePicker/usePickerViews';
+import { PickerFieldPrivateContextValue } from '../hooks/useField/useFieldInternalPropsWithDefaults';
+export declare const PickerActionsContext: React.Context<PickerActionsContextValue<any, any, any> | null>;
 export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
 /**
  * Provides the context for the various parts of a picker component:
@@ -11,55 +16,104 @@ export declare const PickerPrivateContext: React.Context<PickerPrivateContextVal
  *
  * @ignore - do not document.
  */
-export declare function PickerProvider(props: PickerProviderProps): React.JSX.Element;
-export interface PickerProviderProps {
-    contextValue: PickerContextValue;
+export declare function PickerProvider<TValue extends PickerValidValue>(props: PickerProviderProps<TValue>): React.JSX.Element;
+export interface PickerProviderProps<TValue extends PickerValidValue> {
+    contextValue: PickerContextValue<any, any, any>;
+    actionsContextValue: PickerActionsContextValue<any, any, any>;
     privateContextValue: PickerPrivateContextValue;
+    fieldPrivateContextValue: PickerFieldPrivateContextValue;
+    isValidContextValue: (value: TValue) => boolean;
     localeText: PickersInputLocaleText | undefined;
     children: React.ReactNode;
 }
-export interface PickerContextValue {
+export interface PickerContextValue<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends UsePickerValueContextValue<TValue, TError>, UsePickerViewsContextValue<TView> {
     /**
-     * Open the picker.
-     * @param {React.UIEvent} event The DOM event that triggered the change.
-     */
-    onOpen: (event: React.UIEvent) => void;
-    /**
-     * Close the picker.
-     * @param {React.UIEvent} event The DOM event that triggered the change.
-     */
-    onClose: (event: React.UIEvent) => void;
-    /**
-     * `true` if the picker is open, `false` otherwise.
-     */
-    open: boolean;
-    /**
-     * `true` if the picker is disabled, `false` otherwise.
+     * Whether the picker is disabled.
      */
     disabled: boolean;
     /**
-     * `true` if the picker is read-only, `false` otherwise.
+     * Whether the picker is read-only.
      */
     readOnly: boolean;
     /**
      * The responsive variant of the picker.
-     * Is equal to "desktop" when using a desktop picker (like <DesktopDatePicker />).
-     * Is equal to "mobile" when using a mobile picker (like <MobileDatePicker />).
-     * Is equal to "mobile" or "desktop" when using a responsive picker (like <DatePicker />) depending on the `desktopModeMediaQuery` prop.
-     * Is equal to "mobile" or "desktop" when using a static picker (like <StaticDatePicker />) depending on the `displayStaticWrapperAs` prop.
-     * Is always equal to "desktop" if the component you are accessing the ownerState from is not wrapped by a picker.
+     * It is equal to "desktop" when using a desktop picker (like <DesktopDatePicker />).
+     * It is equal to "mobile" when using a mobile picker (like <MobileDatePicker />).
+     * It is equal to "mobile" or "desktop" when using a responsive picker (like <DatePicker />) depending on the `desktopModeMediaQuery` prop.
+     * It is equal to "mobile" or "desktop" when using a static picker (like <StaticDatePicker />) depending on the `displayStaticWrapperAs` prop.
+     * It is always equal to "desktop" if the component you are accessing the context from is not wrapped by a picker.
      */
     variant: PickerVariant;
     /**
      * The orientation of the picker.
-     * Is equal to "landscape" when the picker is in landscape orientation.
-     * Is equal to "portrait" when the picker is in portrait orientation.
-     * You can use the "orientation" on any picker component to force the orientation.
-     * Is always equal to "portrait" if the component you are accessing the ownerState from is not wrapped by a picker.
+     * On Time Pickers and Date Time Pickers, it is always equal to "portrait".
+     * On Date Pickers, it is equal to the picker `orientation` prop if defined, otherwise it is based on the current orientation of the user's screen.
+     * It is always equal to "portrait" if the component you are accessing the context from is not wrapped by a picker.
      */
     orientation: PickerOrientation;
+    /**
+     * Whether the heavy animations should be disabled.
+     * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+     */
+    reduceAnimations?: boolean;
+    /**
+     * The ref to attach to the element that triggers the Picker opening.
+     * When using a built-in field component, this property is automatically attached to the right element.
+     */
+    triggerRef: React.RefObject<any>;
+    /**
+     * The status of the element that triggers the Picker opening.
+     * If it is "hidden", the field should not render the UI to open the Picker.
+     * If it is "disabled", the field should render a disabled UI to open the Picker.
+     * If it is "enabled", the field should render an interactive UI to open the Picker.
+     */
+    triggerStatus: 'hidden' | 'disabled' | 'enabled';
+    /**
+     * The format to use when rendering the value in the field.
+     * It is equal to the picker `format` prop if defined.
+     * It is generated based on the available views if not defined.
+     * It is always equal to an empty string if the picker does not have a field (static pickers).
+     * It is always equal to an empty string if the component you are accessing the context from is not wrapped by a picker.
+     */
+    fieldFormat: string;
+    /**
+     * The name to apply to the <input /> element if the picker contains one.
+     * If the picker has a field, it should probably be applied to its input element.
+     * It is equal to the picker `name` prop if defined (the prop does not exist on static pickers).
+     * It is always equal to undefined if the component you are accessing the context from is not wrapped by a picker.
+     */
+    name: string | undefined;
+    /**
+     * The label to render by the field if the picker contains one.
+     * It is equal to the picker `label` prop if defined (the prop does not exist on static pickers).
+     * It is always equal to undefined if the component you are accessing the context from is not wrapped by a picker.
+     */
+    label: React.ReactNode | undefined;
+    /**
+     * The class name to apply to the root element.
+     * If the picker has a field, it should be applied to field root element, otherwise to the layout root element.
+     * It is equal to the picker `className` prop if defined.
+     * It is always equal to undefined if the component you are accessing the context from is not wrapped by a picker.
+     */
+    rootClassName: string | undefined;
+    /**
+     * The MUI style prop to apply to the root element.
+     * If the picker has a field, it should be applied to field root element, otherwise to the layout root element.
+     * It is equal to the picker `sx` prop if defined.
+     * It is always equal to undefined if the component you are accessing the context from is not wrapped by a picker.
+     */
+    rootSx: SxProps<Theme> | undefined;
+    /**
+     * The ref to attach to the root element.
+     * If the picker has a field, it should be attached to field root element, otherwise to the layout root element.
+     * It is equal to the ref passed to the picker component if defined.
+     * It is always equal to undefined if the component you are accessing the context from is not wrapped by a picker.
+     */
+    rootRef: React.ForwardedRef<HTMLDivElement> | undefined;
+}
+export interface PickerActionsContextValue<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError = string | null> extends UsePickerValueActionsContextValue<TValue, TError>, UsePickerViewsActionsContextValue<TView> {
 }
-export interface PickerPrivateContextValue {
+export interface PickerPrivateContextValue extends UsePickerValuePrivateContextValue, UsePickerViewsPrivateContextValue {
     /**
      * The ownerState of the picker.
      */

package/internals/components/PickerProvider.js

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { LocalizationProvider } from "../../LocalizationProvider/index.js";
+import { IsValidValueContext } from "../../hooks/useIsValidValue.js";
+import { PickerFieldPrivateContext } from "../hooks/useField/useFieldInternalPropsWithDefaults.js";
+import { PickerContext } from "../../hooks/usePickerContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const PickerContext = /*#__PURE__*/React.createContext(null);
+export const PickerActionsContext = /*#__PURE__*/React.createContext(null);
 export const PickerPrivateContext = /*#__PURE__*/React.createContext({
   ownerState: {
     isPickerDisabled: false,
@@ -10,7 +13,10 @@ export const PickerPrivateContext = /*#__PURE__*/React.createContext({
     isPickerOpen: false,
     pickerVariant: 'desktop',
     pickerOrientation: 'portrait'
-  }
+  },
+  dismissViews: () => {},
+  hasUIView: true,
+  doesTheCurrentViewHasAnUI: () => true
 });
 
 /**
@@ -23,17 +29,29 @@ export const PickerPrivateContext = /*#__PURE__*/React.createContext({
 export function PickerProvider(props) {
   const {
     contextValue,
+    actionsContextValue,
     privateContextValue,
+    fieldPrivateContextValue,
+    isValidContextValue,
     localeText,
     children
   } = props;
   return /*#__PURE__*/_jsx(PickerContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(PickerPrivateContext.Provider, {
-      value: privateContextValue,
-      children: /*#__PURE__*/_jsx(LocalizationProvider, {
-        localeText: localeText,
-        children: children
+    children: /*#__PURE__*/_jsx(PickerActionsContext.Provider, {
+      value: actionsContextValue,
+      children: /*#__PURE__*/_jsx(PickerPrivateContext.Provider, {
+        value: privateContextValue,
+        children: /*#__PURE__*/_jsx(PickerFieldPrivateContext.Provider, {
+          value: fieldPrivateContextValue,
+          children: /*#__PURE__*/_jsx(IsValidValueContext.Provider, {
+            value: isValidContextValue,
+            children: /*#__PURE__*/_jsx(LocalizationProvider, {
+              localeText: localeText,
+              children: children
+            })
+          })
+        })
       })
     })
   });

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId"],
+const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId", "classes"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"];
 import * as React from 'react';
@@ -13,6 +13,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import IconButton from '@mui/material/IconButton';
 import { ArrowLeftIcon, ArrowRightIcon } from "../../../icons/index.js";
 import { getPickersArrowSwitcherUtilityClass } from "./pickersArrowSwitcherClasses.js";
+import { usePickerPrivateContext } from "../../hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PickersArrowSwitcherRoot = styled('div', {
   name: 'MuiPickersArrowSwitcher',
@@ -37,17 +38,14 @@ const PickersArrowSwitcherButton = styled(IconButton, {
 })({
   variants: [{
     props: {
-      hidden: true
+      isButtonHidden: true
     },
     style: {
       visibility: 'hidden'
     }
   }]
 });
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     spacer: ['spacer'],
@@ -78,11 +76,14 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       isPreviousHidden,
       onGoToPrevious,
       previousLabel,
-      labelId
+      labelId,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
   const nextProps = {
     isDisabled: isNextDisabled,
     isHidden: isNextHidden,
@@ -108,7 +109,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       onClick: previousProps.goTo
     },
     ownerState: _extends({}, ownerState, {
-      hidden: previousProps.isHidden
+      isButtonHidden: previousProps.isHidden ?? false
     }),
     className: clsx(classes.button, classes.previousIconButton)
   });
@@ -125,7 +126,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       onClick: nextProps.goTo
     },
     ownerState: _extends({}, ownerState, {
-      hidden: nextProps.isHidden
+      isButtonHidden: nextProps.isHidden ?? false
     }),
     className: clsx(classes.button, classes.nextIconButton)
   });

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.d.ts

@@ -3,6 +3,7 @@ import { SlotComponentProps } from '@mui/utils';
 import IconButton from '@mui/material/IconButton';
 import SvgIcon from '@mui/material/SvgIcon';
 import { PickersArrowSwitcherClasses } from './pickersArrowSwitcherClasses';
+import { PickerOwnerState } from '../../../models';
 export interface ExportedPickersArrowSwitcherProps {
     /**
      * Overridable component slots.
@@ -36,7 +37,12 @@ export interface PickersArrowSwitcherProps extends ExportedPickersArrowSwitcherP
     nextLabel: string;
     labelId?: string;
 }
-export type PickersArrowSwitcherOwnerState = PickersArrowSwitcherProps;
+export interface PickersArrowSwitcherOwnerState extends PickerOwnerState {
+    /**
+     * If `true`, this button should be hidden.
+     */
+    isButtonHidden: boolean;
+}
 export interface PickersArrowSwitcherSlotPropsOverrides {
 }
 export interface PickersArrowSwitcherSlots {
@@ -61,12 +67,9 @@ export interface PickersArrowSwitcherSlots {
      */
     rightArrowIcon?: React.ElementType;
 }
-export interface PickersArrowSwitcherButtonSlotOwnerState extends PickersArrowSwitcherOwnerState {
-    hidden?: boolean;
-}
 export interface PickersArrowSwitcherSlotProps {
-    previousIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
-    nextIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
-    leftArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
-    rightArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
+    previousIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherOwnerState>;
+    nextIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherOwnerState>;
+    leftArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, PickerOwnerState>;
+    rightArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, PickerOwnerState>;
 }

package/internals/components/PickersModalDialog.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
 import { PaperProps as MuiPaperProps } from '@mui/material/Paper';
 import { TransitionProps as MuiTransitionProps } from '@mui/material/transitions';
-import { UsePickerValueActions } from '../hooks/usePicker/usePickerValue.types';
 export interface PickersModalDialogSlots {
     /**
      * Custom component for the dialog inside which the views are rendered on mobile.
@@ -34,7 +33,7 @@ export interface PickersModalDialogSlotProps {
      */
     mobileTransition?: Partial<MuiTransitionProps>;
 }
-export interface PickersModalDialogProps extends UsePickerValueActions {
+export interface PickersModalDialogProps {
     /**
      * Overridable component slots.
      * @default {}
@@ -45,6 +44,5 @@ export interface PickersModalDialogProps extends UsePickerValueActions {
      * @default {}
      */
     slotProps?: PickersModalDialogSlotProps;
-    open: boolean;
 }
 export declare function PickersModalDialog(props: React.PropsWithChildren<PickersModalDialogProps>): React.JSX.Element;

package/internals/components/PickersModalDialog.js

@@ -5,6 +5,8 @@ import Fade from '@mui/material/Fade';
 import MuiDialog, { dialogClasses } from '@mui/material/Dialog';
 import { styled } from '@mui/material/styles';
 import { DIALOG_WIDTH } from "../constants/dimensions.js";
+import { usePickerContext } from "../../hooks/index.js";
+import { usePickerPrivateContext } from "../hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersModalDialogRoot = styled(MuiDialog)({
   [`& .${dialogClasses.container}`]: {
@@ -23,16 +25,20 @@ const PickersModalDialogContent = styled(DialogContent)({
 export function PickersModalDialog(props) {
   const {
     children,
-    onDismiss,
-    open,
     slots,
     slotProps
   } = props;
+  const {
+    open
+  } = usePickerContext();
+  const {
+    dismissViews
+  } = usePickerPrivateContext();
   const Dialog = slots?.dialog ?? PickersModalDialogRoot;
   const Transition = slots?.mobileTransition ?? Fade;
   return /*#__PURE__*/_jsx(Dialog, _extends({
     open: open,
-    onClose: onDismiss
+    onClose: dismissViews
   }, slotProps?.dialog, {
     TransitionComponent: Transition,
     TransitionProps: slotProps?.mobileTransition,

package/internals/components/PickersToolbar.d.ts

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