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

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;

package/internals/components/PickersToolbar.js

@@ -1,17 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "toolbarTitle", "hidden", "titleId", "isLandscape", "classes", "landscapeDirection"];
+const _excluded = ["children", "className", "classes", "toolbarTitle", "hidden", "titleId", "classes", "landscapeDirection"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
+import { useToolbarOwnerState } from "../hooks/useToolbarOwnerState.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     content: ['content']
@@ -32,7 +31,7 @@ const PickersToolbarRoot = styled('div', {
   padding: theme.spacing(2, 3),
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       height: 'auto',
@@ -46,7 +45,8 @@ const PickersToolbarRoot = styled('div', {
 const PickersToolbarContent = styled('div', {
   name: 'MuiPickersToolbar',
   slot: 'Content',
-  overridesResolver: (props, styles) => styles.content
+  overridesResolver: (props, styles) => styles.content,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'landscapeDirection'
 })({
   display: 'flex',
   flexWrap: 'wrap',
@@ -57,7 +57,7 @@ const PickersToolbarContent = styled('div', {
   flexDirection: 'row',
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       justifyContent: 'flex-start',
@@ -66,7 +66,7 @@ const PickersToolbarContent = styled('div', {
     }
   }, {
     props: {
-      isLandscape: true,
+      pickerOrientation: 'landscape',
       landscapeDirection: 'row'
     },
     style: {
@@ -82,13 +82,15 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
   const {
       children,
       className,
+      classes: classesProp,
       toolbarTitle,
       hidden,
-      titleId
+      titleId,
+      landscapeDirection
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useToolbarOwnerState();
+  const classes = useUtilityClasses(classesProp);
   if (hidden) {
     return null;
   }
@@ -105,6 +107,7 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
     }), /*#__PURE__*/_jsx(PickersToolbarContent, {
       className: classes.content,
       ownerState: ownerState,
+      landscapeDirection: landscapeDirection,
       children: children
     })]
   }));

package/internals/components/PickersToolbarButton.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant", "width"];
+const _excluded = ["align", "className", "classes", "selected", "typographyClassName", "value", "variant", "width"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Button from '@mui/material/Button';
@@ -9,10 +9,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { PickersToolbarText } from "./PickersToolbarText.js";
 import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -35,6 +32,7 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
   const {
       align,
       className,
+      classes: classesProp,
       selected,
       typographyClassName,
       value,
@@ -42,7 +40,7 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
       width
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(PickersToolbarButtonRoot, _extends({
     variant: "text",
     ref: ref,

package/internals/components/PickersToolbarText.js

@@ -1,35 +1,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "selected", "value"];
+const _excluded = ["className", "classes", "selected", "value"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { getPickersToolbarTextUtilityClass, pickersToolbarTextClasses } from "./pickersToolbarTextClasses.js";
+import { getPickersToolbarTextUtilityClass } from "./pickersToolbarTextClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    selected
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
-    root: ['root', selected && 'selected']
+    root: ['root']
   };
   return composeClasses(slots, getPickersToolbarTextUtilityClass, classes);
 };
 const PickersToolbarTextRoot = styled(Typography, {
   name: 'MuiPickersToolbarText',
   slot: 'Root',
-  overridesResolver: (_, styles) => [styles.root, {
-    [`&.${pickersToolbarTextClasses.selected}`]: styles.selected
-  }]
+  overridesResolver: (_, styles) => [styles.root]
 })(({
   theme
 }) => ({
   transition: theme.transitions.create('color'),
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${pickersToolbarTextClasses.selected}`]: {
+  [`&[data-selected]`]: {
     color: (theme.vars || theme).palette.text.primary
   }
 }));
@@ -40,14 +34,18 @@ export const PickersToolbarText = /*#__PURE__*/React.forwardRef(function Pickers
   });
   const {
       className,
+      classes: classesProp,
+      selected,
       value
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(PickersToolbarTextRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
     component: "span"
+  }, selected && {
+    'data-selected': true
   }, other, {
     children: value
   }));

package/internals/hooks/date-helpers-hooks.js

@@ -27,11 +27,12 @@ export function usePreviousMonthDisabled(month, {
 }
 export function useMeridiemMode(date, ampm, onChange, selectionState) {
   const utils = useUtils();
-  const meridiemMode = getMeridiem(date, utils);
+  const cleanDate = React.useMemo(() => !utils.isValid(date) ? null : date, [utils, date]);
+  const meridiemMode = getMeridiem(cleanDate, utils);
   const handleMeridiemChange = React.useCallback(mode => {
-    const timeWithMeridiem = date == null ? null : convertToMeridiem(date, mode, Boolean(ampm), utils);
+    const timeWithMeridiem = cleanDate == null ? null : convertToMeridiem(cleanDate, mode, Boolean(ampm), utils);
     onChange(timeWithMeridiem, selectionState ?? 'partial');
-  }, [ampm, date, onChange, selectionState, utils]);
+  }, [ampm, cleanDate, onChange, selectionState, utils]);
   return {
     meridiemMode,
     handleMeridiemChange

package/internals/hooks/useClockReferenceDate.d.ts

@@ -1,6 +1,7 @@
 import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../../models';
+import { PickerValue } from '../models';
 export declare const useClockReferenceDate: <TProps extends {}>({ value, referenceDate: referenceDateProp, utils, props, timezone, }: {
-    value: PickerValidDate;
+    value: PickerValue;
     referenceDate: PickerValidDate | undefined;
     utils: MuiPickersAdapter;
     props: TProps;

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

@@ -7,6 +7,6 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - DesktopDateTimePicker
  * - DesktopTimePicker
  */
-export declare const useDesktopPicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+export declare const useDesktopPicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, ...pickerParams }: UseDesktopPickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };