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

package/MobileTimePicker/MobileTimePicker.js

@@ -8,13 +8,11 @@ import { refType } from '@mui/utils';
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { TimeField } from "../TimeField/index.js";
 import { useTimePickerDefaultizedProps } from "../TimePicker/shared.js";
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { extractValidationProps, validateTime } from "../validation/index.js";
 import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
 import { renderTimeViewClock } from "../timeViewRenderers/index.js";
 import { resolveTimeFormat } from "../internals/utils/time-utils.js";
-import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 /**
  * Demos:
  *
@@ -26,7 +24,6 @@ import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalizat
  * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/)
  */
 const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
-  const translations = usePickerTranslations();
   const utils = useUtils();
 
   // Props with the default values common to all time pickers
@@ -47,9 +44,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
       field: TimeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps)),
       toolbar: _extends({
         hidden: false,
         ampmInClock
@@ -59,15 +54,10 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
   const {
     renderPicker
   } = useMobilePicker({
+    ref,
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: buildGetOpenDialogAriaText({
-      utils,
-      formatKey: 'fullTime',
-      contextTranslation: translations.openTimePickerDialogue,
-      propsTranslation: props.localeText?.openTimePickerDialogue
-    }),
     validator: validateTime
   });
   return renderPicker();
@@ -96,8 +86,8 @@ MobileTimePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/MobileTimePicker/MobileTimePicker.types.d.ts

@@ -3,19 +3,19 @@ import { UseMobilePickerSlots, ExportedUseMobilePickerSlotProps, MobileOnlyPicke
 import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } from '../TimePicker/shared';
 import { TimeView } from '../models';
 import { TimeViewWithMeridiem } from '../internals/models';
-export interface MobileTimePickerSlots<TView extends TimeViewWithMeridiem> extends BaseTimePickerSlots, MakeOptional<UseMobilePickerSlots<TView>, 'field'> {
+export interface MobileTimePickerSlots extends BaseTimePickerSlots, MakeOptional<UseMobilePickerSlots, 'field'> {
 }
-export interface MobileTimePickerSlotProps<TView extends TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseTimePickerSlotProps, ExportedUseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure> {
+export interface MobileTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseTimePickerSlotProps, ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure> {
 }
 export interface MobileTimePickerProps<TView extends TimeViewWithMeridiem = TimeView, TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseTimePickerProps<TView>, MobileOnlyPickerProps {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: MobileTimePickerSlots<TView>;
+    slots?: MobileTimePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MobileTimePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: MobileTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }

package/MonthCalendar/MonthCalendar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { MonthCalendarProps } from './MonthCalendar.types';
-export declare function useMonthCalendarDefaultizedProps(props: MonthCalendarProps, name: string): DefaultizedProps<MonthCalendarProps, 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast'>;
+export declare function useMonthCalendarDefaultizedProps(props: MonthCalendarProps, name: string): DefaultizedProps<MonthCalendarProps, 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast' | 'monthsPerRow'>;
 type MonthCalendarComponent = ((props: MonthCalendarProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };

package/MonthCalendar/MonthCalendar.js

@@ -2,14 +2,15 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+const _excluded = ["autoFocus", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useRtl } from '@mui/system/RtlProvider';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useControlled as useControlled, unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import { PickersMonth } from "./PickersMonth.js";
+import { MonthCalendarButton } from "./MonthCalendarButton.js";
 import { useUtils, useNow, useDefaultDates } from "../internals/hooks/useUtils.js";
 import { getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";
 import { applyDefaultDate, getMonthsInYear } from "../internals/utils/date-utils.js";
@@ -36,6 +37,7 @@ export function useMonthCalendarDefaultizedProps(props, name) {
     disableFuture: false,
     disablePast: false
   }, themeProps, {
+    monthsPerRow: themeProps.monthsPerRow ?? 3,
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
   });
@@ -43,15 +45,32 @@ export function useMonthCalendarDefaultizedProps(props, name) {
 const MonthCalendarRoot = styled('div', {
   name: 'MuiMonthCalendar',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'monthsPerRow'
 })({
   display: 'flex',
   flexWrap: 'wrap',
-  alignContent: 'stretch',
-  padding: '0 4px',
+  justifyContent: 'space-evenly',
+  rowGap: 16,
+  padding: '8px 0',
   width: DIALOG_WIDTH,
   // avoid padding increasing width over defined
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  variants: [{
+    props: {
+      monthsPerRow: 3
+    },
+    style: {
+      columnGap: 24
+    }
+  }, {
+    props: {
+      monthsPerRow: 4
+    },
+    style: {
+      columnGap: 0
+    }
+  }]
 });
 /**
  * Demos:
@@ -65,6 +84,7 @@ const MonthCalendarRoot = styled('div', {
 export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inProps, ref) {
   const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar');
   const {
+      autoFocus,
       className,
       classes: classesProp,
       value: valueProp,
@@ -78,11 +98,10 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       onChange,
       shouldDisableMonth,
       readOnly,
-      autoFocus = false,
       onMonthFocus,
       hasFocus,
       onFocusedViewChange,
-      monthsPerRow = 3,
+      monthsPerRow,
       timezone: timezoneProp,
       gridLabelId,
       slots,
@@ -98,6 +117,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });
@@ -208,7 +228,8 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     className: clsx(classes.root, className),
     ownerState: ownerState,
     role: "radiogroup",
-    "aria-labelledby": gridLabelId
+    "aria-labelledby": gridLabelId,
+    monthsPerRow: monthsPerRow
   }, other, {
     children: getMonthsInYear(utils, value ?? referenceDate).map(month => {
       const monthNumber = utils.getMonth(month);
@@ -216,7 +237,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       const monthLabel = utils.format(month, 'month');
       const isSelected = monthNumber === selectedMonth;
       const isDisabled = disabled || isMonthDisabled(month);
-      return /*#__PURE__*/_jsx(PickersMonth, {
+      return /*#__PURE__*/_jsx(MonthCalendarButton, {
         selected: isSelected,
         value: monthNumber,
         onClick: handleMonthSelection,
@@ -228,9 +249,9 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
         onBlur: handleMonthBlur,
         "aria-current": todayMonth === monthNumber ? 'date' : undefined,
         "aria-label": monthLabel,
-        monthsPerRow: monthsPerRow,
         slots: slots,
         slotProps: slotProps,
+        classes: classesProp,
         children: monthText
       }, monthText);
     })

package/MonthCalendar/MonthCalendar.types.d.ts

@@ -6,7 +6,7 @@ import { MonthCalendarClasses } from './monthCalendarClasses';
 import { BaseDateValidationProps, MonthValidationProps } from '../internals/models/validation';
 import { PickerOwnerState, PickerValidDate, TimezoneProps } from '../models';
 import { FormProps } from '../internals/models/formProps';
-export interface PickerMonthOwnerState extends PickerOwnerState {
+export interface MonthButtonOwnerState extends PickerOwnerState {
     isMonthSelected: boolean;
     isMonthDisabled: boolean;
 }
@@ -20,7 +20,7 @@ export interface MonthCalendarSlots {
 export interface MonthCalendarSlotProps {
     monthButton?: SlotComponentPropsFromProps<React.HTMLAttributes<HTMLButtonElement> & {
         sx: SxProps;
-    }, {}, PickerMonthOwnerState>;
+    }, {}, MonthButtonOwnerState>;
 }
 export interface ExportedMonthCalendarProps {
     /**

package/MonthCalendar/MonthCalendarButton.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { MonthCalendarSlotProps, MonthCalendarSlots } from './MonthCalendar.types';
+import { MonthCalendarClasses } from './monthCalendarClasses';
+export interface MonthCalendarButtonProps {
+    value: number;
+    tabIndex: number;
+    selected: boolean;
+    disabled: boolean;
+    autoFocus: boolean;
+    classes: Partial<MonthCalendarClasses> | undefined;
+    slots: MonthCalendarSlots | undefined;
+    slotProps: MonthCalendarSlotProps | undefined;
+    'aria-current': React.AriaAttributes['aria-current'];
+    'aria-label': React.AriaAttributes['aria-label'];
+    children: React.ReactNode;
+    onClick: (event: React.MouseEvent, month: number) => void;
+    onKeyDown: (event: React.KeyboardEvent, month: number) => void;
+    onFocus: (event: React.FocusEvent, month: number) => void;
+    onBlur: (event: React.FocusEvent, month: number) => void;
+}
+/**
+ * @ignore - do not document.
+ */
+export declare const MonthCalendarButton: React.NamedExoticComponent<MonthCalendarButtonProps>;

package/{modern/MonthCalendar/PickersMonth.js → MonthCalendar/MonthCalendarButton.js}

@@ -1,47 +1,27 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "classes", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow", "slots", "slotProps"];
+const _excluded = ["autoFocus", "classes", "disabled", "selected", "value", "onClick", "onKeyDown", "onFocus", "onBlur", "slots", "slotProps"];
 import * as React from 'react';
-import clsx from 'clsx';
-import { styled, alpha, useThemeProps } from '@mui/material/styles';
+import { styled, alpha } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { getPickersMonthUtilityClass, pickersMonthClasses } from "./pickersMonthClasses.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { getMonthCalendarUtilityClass, monthCalendarClasses } from "./monthCalendarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = (classes, ownerState) => {
   const slots = {
-    root: ['root'],
-    monthButton: ['monthButton', ownerState.isMonthDisabled && 'disabled', ownerState.isMonthSelected && 'selected']
+    button: ['button', ownerState.isMonthDisabled && 'disabled', ownerState.isMonthSelected && 'selected']
   };
-  return composeClasses(slots, getPickersMonthUtilityClass, classes);
+  return composeClasses(slots, getMonthCalendarUtilityClass, classes);
 };
-const PickersMonthRoot = styled('div', {
-  name: 'MuiPickersMonth',
-  slot: 'Root',
-  overridesResolver: (_, styles) => [styles.root]
-})({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexBasis: '33.3%',
-  variants: [{
-    props: {
-      monthsPerRow: 4
-    },
-    style: {
-      flexBasis: '25%'
-    }
-  }]
-});
-const MonthCalendarButton = styled('button', {
-  name: 'MuiPickersMonth',
-  slot: 'MonthButton',
-  overridesResolver: (_, styles) => [styles.monthButton, {
-    [`&.${pickersMonthClasses.disabled}`]: styles.disabled
+const DefaultMonthButton = styled('button', {
+  name: 'MuiMonthCalendar',
+  slot: 'Button',
+  overridesResolver: (_, styles) => [styles.button, {
+    [`&.${monthCalendarClasses.disabled}`]: styles.disabled
   }, {
-    [`&.${pickersMonthClasses.selected}`]: styles.selected
+    [`&.${monthCalendarClasses.selected}`]: styles.selected
   }]
 })(({
   theme
@@ -51,7 +31,6 @@ const MonthCalendarButton = styled('button', {
   border: 0,
   outline: 0
 }, theme.typography.subtitle1, {
-  margin: '8px 0',
   height: 36,
   width: 72,
   borderRadius: 18,
@@ -66,10 +45,10 @@ const MonthCalendarButton = styled('button', {
     cursor: 'auto',
     pointerEvents: 'none'
   },
-  [`&.${pickersMonthClasses.disabled}`]: {
+  [`&.${monthCalendarClasses.disabled}`]: {
     color: (theme.vars || theme).palette.text.secondary
   },
-  [`&.${pickersMonthClasses.selected}`]: {
+  [`&.${monthCalendarClasses.selected}`]: {
     color: (theme.vars || theme).palette.primary.contrastText,
     backgroundColor: (theme.vars || theme).palette.primary.main,
     '&:focus, &:hover': {
@@ -81,29 +60,17 @@ const MonthCalendarButton = styled('button', {
 /**
  * @ignore - do not document.
  */
-export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProps) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiPickersMonth'
-  });
+export const MonthCalendarButton = /*#__PURE__*/React.memo(function MonthCalendarButton(props) {
   const {
       autoFocus,
-      className,
       classes: classesProp,
-      children,
-      disabled = false,
-      selected = false,
+      disabled,
+      selected,
       value,
-      tabIndex,
       onClick,
       onKeyDown,
       onFocus,
       onBlur,
-      'aria-current': ariaCurrent,
-      'aria-label': ariaLabel
-      // We don't want to forward this prop to the root element
-      ,
-
       slots,
       slotProps
     } = props,
@@ -125,32 +92,24 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
       ref.current?.focus();
     }
   }, [autoFocus]);
-  const MonthButton = slots?.monthButton ?? MonthCalendarButton;
+  const MonthButton = slots?.monthButton ?? DefaultMonthButton;
   const monthButtonProps = useSlotProps({
     elementType: MonthButton,
     externalSlotProps: slotProps?.monthButton,
+    externalForwardedProps: other,
     additionalProps: {
-      children,
       disabled,
-      tabIndex,
       ref,
       type: 'button',
       role: 'radio',
-      'aria-current': ariaCurrent,
       'aria-checked': selected,
-      'aria-label': ariaLabel,
       onClick: event => onClick(event, value),
       onKeyDown: event => onKeyDown(event, value),
       onFocus: event => onFocus(event, value),
       onBlur: event => onBlur(event, value)
     },
     ownerState,
-    className: classes.monthButton
+    className: classes.button
   });
-  return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({
-    className: clsx(classes.root, className),
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/_jsx(MonthButton, _extends({}, monthButtonProps))
-  }));
+  return /*#__PURE__*/_jsx(MonthButton, _extends({}, monthButtonProps));
 });

package/MonthCalendar/index.d.ts

@@ -2,6 +2,3 @@ export { MonthCalendar } from './MonthCalendar';
 export type { MonthCalendarProps, MonthCalendarSlots, MonthCalendarSlotProps, } from './MonthCalendar.types';
 export { monthCalendarClasses, getMonthCalendarUtilityClass } from './monthCalendarClasses';
 export type { MonthCalendarClasses, MonthCalendarClassKey } from './monthCalendarClasses';
-export { pickersMonthClasses } from './pickersMonthClasses';
-export type { PickersMonthClassKey, PickersMonthClasses } from './pickersMonthClasses';
-export type { ExportedPickersMonthProps } from './PickersMonth';

package/MonthCalendar/index.js

@@ -1,3 +1,2 @@
 export { MonthCalendar } from "./MonthCalendar.js";
-export { monthCalendarClasses, getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";
-export { pickersMonthClasses } from "./pickersMonthClasses.js";
+export { monthCalendarClasses, getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";

package/MonthCalendar/monthCalendarClasses.d.ts

@@ -2,6 +2,12 @@ export declare function getMonthCalendarUtilityClass(slot: string): string;
 export interface MonthCalendarClasses {
     /** Styles applied to the root element. */
     root: string;
+    /** Styles applied to the button element that represents a single month */
+    button: string;
+    /** Styles applied to a disabled button element. */
+    disabled: string;
+    /** Styles applied to a selected button element. */
+    selected: string;
 }
 export type MonthCalendarClassKey = keyof MonthCalendarClasses;
-export declare const monthCalendarClasses: Record<"root", string>;
+export declare const monthCalendarClasses: Record<keyof MonthCalendarClasses, string>;

package/MonthCalendar/monthCalendarClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generat
 export function getMonthCalendarUtilityClass(slot) {
   return generateUtilityClass('MuiMonthCalendar', slot);
 }
-export const monthCalendarClasses = generateUtilityClasses('MuiMonthCalendar', ['root']);
+export const monthCalendarClasses = generateUtilityClasses('MuiMonthCalendar', ['root', 'button', 'disabled', 'selected']);

package/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "timeSteps", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "skipDisabled", "timezone"];
+const _excluded = ["ampm", "timeSteps", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "classes", "disabled", "readOnly", "skipDisabled", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -23,11 +23,9 @@ import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithT
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useClockReferenceDate } from "../internals/hooks/useClockReferenceDate.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -86,6 +84,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       focusedView: inFocusedView,
       onFocusedViewChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       skipDisabled = false,
@@ -101,6 +100,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });
@@ -189,6 +189,9 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         {
           const valueWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
           const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
+          if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
+            return true;
+          }
           const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
           const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
           return !containsValidTime({
@@ -318,8 +321,10 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       });
     }, {});
   }, [views, buildViewProps]);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(MultiSectionDigitalClockRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),

package/MultiSectionDigitalClock/MultiSectionDigitalClock.types.d.ts

@@ -5,17 +5,17 @@ import { MultiSectionDigitalClockClasses } from './multiSectionDigitalClockClass
 import { BaseClockProps, ExportedBaseClockProps, MultiSectionDigitalClockOnlyProps } from '../internals/models/props/time';
 import { MultiSectionDigitalClockSectionProps } from './MultiSectionDigitalClockSection';
 import { TimeViewWithMeridiem } from '../internals/models';
-export interface MultiSectionDigitalClockOption<TValue> {
-    isDisabled?: (value: TValue) => boolean;
-    isSelected: (value: TValue) => boolean;
-    isFocused: (value: TValue) => boolean;
+export interface MultiSectionDigitalClockOption<TSectionValue extends number | string> {
+    isDisabled?: (value: TSectionValue) => boolean;
+    isSelected: (value: TSectionValue) => boolean;
+    isFocused: (value: TSectionValue) => boolean;
     label: string;
-    value: TValue;
+    value: TSectionValue;
     ariaLabel: string;
 }
 export interface ExportedMultiSectionDigitalClockProps extends ExportedBaseClockProps, MultiSectionDigitalClockOnlyProps {
 }
-export interface MultiSectionDigitalClockViewProps<TValue> extends Pick<MultiSectionDigitalClockSectionProps<TValue>, 'onChange' | 'items'> {
+export interface MultiSectionDigitalClockViewProps<TSectionValue extends number | string> extends Pick<MultiSectionDigitalClockSectionProps<TSectionValue>, 'onChange' | 'items'> {
 }
 export interface MultiSectionDigitalClockSlots {
     /**

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.d.ts

@@ -8,15 +8,15 @@ export interface ExportedMultiSectionDigitalClockSectionProps {
     slots?: MultiSectionDigitalClockSlots;
     slotProps?: MultiSectionDigitalClockSlotProps;
 }
-export interface MultiSectionDigitalClockSectionProps<TValue> extends FormProps, ExportedMultiSectionDigitalClockSectionProps {
+export interface MultiSectionDigitalClockSectionProps<TSectionValue extends number | string> extends FormProps, ExportedMultiSectionDigitalClockSectionProps {
     autoFocus?: boolean;
-    items: MultiSectionDigitalClockOption<TValue>[];
-    onChange: (value: TValue) => void;
+    items: MultiSectionDigitalClockOption<TSectionValue>[];
+    onChange: (value: TSectionValue) => void;
     active?: boolean;
     skipDisabled?: boolean;
     role?: string;
 }
-type MultiSectionDigitalClockSectionComponent = <TValue>(props: MultiSectionDigitalClockSectionProps<TValue> & React.RefAttributes<HTMLUListElement>) => React.JSX.Element & {
+type MultiSectionDigitalClockSectionComponent = <TSectionValue extends number | string>(props: MultiSectionDigitalClockSectionProps<TSectionValue> & React.RefAttributes<HTMLUListElement>) => React.JSX.Element & {
     propTypes?: any;
 };
 /**

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -1,6 +1,8 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoFocus", "onChange", "className", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
+const _excluded = ["autoFocus", "onChange", "className", "classes", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
@@ -11,11 +13,9 @@ import useForkRef from '@mui/utils/useForkRef';
 import { getMultiSectionDigitalClockSectionUtilityClass } from "./multiSectionDigitalClockSectionClasses.js";
 import { DIGITAL_CLOCK_VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from "../internals/constants/dimensions.js";
 import { getFocusedListItemIndex } from "../internals/utils/utils.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     item: ['item']
@@ -55,7 +55,7 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   },
   variants: [{
     props: {
-      alreadyRendered: true
+      hasDigitalClockAlreadyBeenRendered: true
     },
     style: {
       '@media (prefers-reduced-motion: no-preference)': {
@@ -107,6 +107,7 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
       autoFocus,
       onChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       items,
@@ -116,10 +117,13 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
       skipDisabled
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = React.useMemo(() => _extends({}, props, {
-    alreadyRendered: !!containerRef.current
-  }), [props]);
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    hasDigitalClockAlreadyBeenRendered: !!containerRef.current
+  });
+  const classes = useUtilityClasses(classesProp);
   const DigitalClockSectionItem = slots?.digitalClockSectionItem ?? MultiSectionDigitalClockSectionItem;
   React.useEffect(() => {
     if (containerRef.current === null) {

package/PickersActionBar/PickersActionBar.d.ts

@@ -5,13 +5,11 @@ export interface PickersActionBarProps extends DialogActionsProps {
     /**
      * Ordered array of actions to display.
      * If empty, does not display that action bar.
-     * @default `['cancel', 'accept']` for mobile and `[]` for desktop
+     * @default
+     * - `[]` for Desktop Date Picker and Desktop Date Range Picker
+     * - `['cancel', 'accept']` for all other Pickers
      */
     actions?: PickersActionBarAction[];
-    onAccept: () => void;
-    onClear: () => void;
-    onCancel: () => void;
-    onSetToday: () => void;
 }
 /**
  * Demos:
@@ -23,8 +21,9 @@ export interface PickersActionBarProps extends DialogActionsProps {
  *
  * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/)
  */
-declare function PickersActionBar(props: PickersActionBarProps): React.JSX.Element | null;
-declare namespace PickersActionBar {
+declare function PickersActionBarComponent(props: PickersActionBarProps): React.JSX.Element | null;
+declare namespace PickersActionBarComponent {
     var propTypes: any;
 }
+declare const PickersActionBar: React.MemoExoticComponent<typeof PickersActionBarComponent>;
 export { PickersActionBar };