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

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -12,8 +12,12 @@ import { useUtils } from "../internals/hooks/useUtils.js";
 import { extractValidationProps, validateDateTime } from "../validation/index.js";
 import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
-import { renderTimeViewClock } from "../timeViewRenderers/index.js";
+import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "../timeViewRenderers/index.js";
 import { resolveDateTimeFormat } from "../internals/utils/date-time-utils.js";
+import { DIALOG_WIDTH, VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from "../MultiSectionDigitalClock/index.js";
+import { mergeSx } from "../internals/utils/utils.js";
+import { digitalClockClasses } from "../DigitalClock/index.js";
 /**
  * Demos:
  *
@@ -29,40 +33,68 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiMobileDateTimePicker');
+  const renderTimeView = defaultizedProps.shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
   const viewRenderers = _extends({
     day: renderDateViewCalendar,
     month: renderDateViewCalendar,
     year: renderDateViewCalendar,
-    hours: renderTimeViewClock,
-    minutes: renderTimeViewClock,
-    seconds: renderTimeViewClock
+    hours: renderTimeView,
+    minutes: renderTimeView,
+    seconds: renderTimeView,
+    meridiem: renderTimeView
   }, defaultizedProps.viewRenderers);
   const ampmInClock = defaultizedProps.ampmInClock ?? false;
+  // Need to avoid adding the `meridiem` view when unexpected renderer is specified
+  const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
+  const views = !shouldHoursRendererContainMeridiemView ? defaultizedProps.views.filter(view => view !== 'meridiem') : defaultizedProps.views;
 
   // Props with the default values specific to the mobile variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
     format: resolveDateTimeFormat(utils, defaultizedProps),
+    views,
     ampmInClock,
     slots: _extends({
       field: DateTimeField
     }, 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
       }, defaultizedProps.slotProps?.toolbar),
       tabs: _extends({
         hidden: false
-      }, defaultizedProps.slotProps?.tabs)
+      }, defaultizedProps.slotProps?.tabs),
+      layout: _extends({}, defaultizedProps.slotProps?.layout, {
+        sx: mergeSx([{
+          [`& .${multiSectionDigitalClockClasses.root}`]: {
+            width: DIALOG_WIDTH
+          },
+          [`& .${multiSectionDigitalClockSectionClasses.root}`]: {
+            flex: 1,
+            // account for the border on `MultiSectionDigitalClock`
+            maxHeight: VIEW_HEIGHT - 1,
+            [`.${multiSectionDigitalClockSectionClasses.item}`]: {
+              width: 'auto'
+            }
+          },
+          [`& .${digitalClockClasses.root}`]: {
+            width: DIALOG_WIDTH,
+            maxHeight: VIEW_HEIGHT,
+            flex: 1,
+            [`.${digitalClockClasses.item}`]: {
+              justifyContent: 'center'
+            }
+          }
+        }], defaultizedProps.slotProps?.layout?.sx)
+      })
     })
   });
   const {
     renderPicker
   } = useMobilePicker({
+    ref,
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
@@ -132,7 +164,7 @@ MobileDateTimePicker.propTypes = {
    */
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
-   * If `true`, the open picker button will not be rendered (renders only the field).
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
    * @default false
    */
   disableOpenPicker: PropTypes.bool,
@@ -293,7 +325,7 @@ MobileDateTimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  openTo: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Force rendering in particular orientation.
    */
@@ -369,6 +401,11 @@ MobileDateTimePicker.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -383,6 +420,22 @@ MobileDateTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn: PropTypes.number,
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps: PropTypes.shape({
+    hours: PropTypes.number,
+    minutes: PropTypes.number,
+    seconds: PropTypes.number
+  }),
   /**
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
@@ -401,7 +454,7 @@ MobileDateTimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -410,6 +463,7 @@ MobileDateTimePicker.propTypes = {
   viewRenderers: PropTypes.shape({
     day: PropTypes.func,
     hours: PropTypes.func,
+    meridiem: PropTypes.func,
     minutes: PropTypes.func,
     month: PropTypes.func,
     seconds: PropTypes.func,

package/modern/MobileDateTimePicker/MobileDateTimePicker.types.d.ts

@@ -0,0 +1,17 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { UseMobilePickerSlots, ExportedUseMobilePickerSlotProps, MobileOnlyPickerProps } from "../internals/hooks/useMobilePicker/index.js";
+import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from "../DateTimePicker/shared.js";
+export interface MobileDateTimePickerSlots extends BaseDateTimePickerSlots, MakeOptional<UseMobilePickerSlots, 'field'> {}
+export interface MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps, ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
+export interface MobileDateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimePickerProps, MobileOnlyPickerProps {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MobileDateTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}

package/modern/MobileDateTimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { MobileDateTimePicker } from "./MobileDateTimePicker.js";
+export type { MobileDateTimePickerProps, MobileDateTimePickerSlots, MobileDateTimePickerSlotProps } from './MobileDateTimePicker.types';

package/modern/MobileTimePicker/MobileTimePicker.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { MobileTimePickerProps } from "./MobileTimePicker.types.js";
+import { TimeView } from "../models/index.js";
+type MobileTimePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: MobileTimePickerProps<TimeView, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/)
+ */
+declare const MobileTimePicker: MobileTimePickerComponent;
+export { MobileTimePicker };

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -44,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
@@ -56,6 +54,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
   const {
     renderPicker
   } = useMobilePicker({
+    ref,
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
@@ -113,7 +112,7 @@ MobileTimePicker.propTypes = {
    */
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
-   * If `true`, the open picker button will not be rendered (renders only the field).
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

package/modern/MobileTimePicker/MobileTimePicker.types.d.ts

@@ -0,0 +1,19 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { UseMobilePickerSlots, ExportedUseMobilePickerSlotProps, MobileOnlyPickerProps } from "../internals/hooks/useMobilePicker/index.js";
+import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } from "../TimePicker/shared.js";
+import { TimeView } from "../models/index.js";
+import { TimeViewWithMeridiem } from "../internals/models/index.js";
+export interface MobileTimePickerSlots extends BaseTimePickerSlots, MakeOptional<UseMobilePickerSlots, 'field'> {}
+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;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MobileTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}

package/modern/MobileTimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { MobileTimePicker } from "./MobileTimePicker.js";
+export type { MobileTimePickerProps, MobileTimePickerSlots, MobileTimePickerSlotProps } from './MobileTimePicker.types';

package/modern/MonthCalendar/MonthCalendar.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { MonthCalendarProps } from "./MonthCalendar.types.js";
+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;
+};
+/**
+ * Demos:
+ *
+ * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
+ *
+ * API:
+ *
+ * - [MonthCalendar API](https://mui.com/x/api/date-pickers/month-calendar/)
+ */
+export declare const MonthCalendar: MonthCalendarComponent;
+export {};

package/modern/MonthCalendar/MonthCalendar.js

@@ -16,7 +16,7 @@ import { getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";
 import { applyDefaultDate, getMonthsInYear } from "../internals/utils/date-utils.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
-import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
+import { useControlledValue } from "../internals/hooks/useControlledValue.js";
 import { DIALOG_WIDTH } from "../internals/constants/dimensions.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -112,7 +112,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     value,
     handleValueChange,
     timezone
-  } = useControlledValueWithTimezone({
+  } = useControlledValue({
     name: 'MonthCalendar',
     timezone: timezoneProp,
     value: valueProp,

package/modern/MonthCalendar/MonthCalendar.types.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { MonthCalendarClasses } from "./monthCalendarClasses.js";
+import { BaseDateValidationProps, MonthValidationProps } from "../internals/models/validation.js";
+import { PickerOwnerState, PickerValidDate, TimezoneProps } from "../models/index.js";
+import { FormProps } from "../internals/models/formProps.js";
+export interface MonthButtonOwnerState extends PickerOwnerState {
+  isMonthSelected: boolean;
+  isMonthDisabled: boolean;
+}
+export interface MonthCalendarSlots {
+  /**
+   * Button displayed to render a single month in the `month` view.
+   * @default MonthCalendarButton
+   */
+  monthButton?: React.ElementType;
+}
+export interface MonthCalendarSlotProps {
+  monthButton?: SlotComponentPropsFromProps<React.HTMLAttributes<HTMLButtonElement> & {
+    sx: SxProps;
+  }, {}, MonthButtonOwnerState>;
+}
+export interface ExportedMonthCalendarProps {
+  /**
+   * Months rendered per row.
+   * @default 3
+   */
+  monthsPerRow?: 3 | 4;
+}
+export interface MonthCalendarProps extends ExportedMonthCalendarProps, MonthValidationProps, BaseDateValidationProps, TimezoneProps, FormProps {
+  autoFocus?: boolean;
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<MonthCalendarClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MonthCalendarSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MonthCalendarSlotProps;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerValidDate | null;
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerValidDate | null;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid month using the validation props, except callbacks such as `shouldDisableMonth`.
+   */
+  referenceDate?: PickerValidDate;
+  /**
+   * Callback fired when the value changes.
+   * @param {PickerValidDate} value The new value.
+   */
+  onChange?: (value: PickerValidDate) => void;
+  /**
+   * If `true`, today's date is rendering without highlighting with circle.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  onMonthFocus?: (month: number) => void;
+  hasFocus?: boolean;
+  onFocusedViewChange?: (hasFocus: boolean) => void;
+  gridLabelId?: string;
+}

package/modern/MonthCalendar/MonthCalendarButton.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { MonthCalendarSlotProps, MonthCalendarSlots } from "./MonthCalendar.types.js";
+import { MonthCalendarClasses } from "./monthCalendarClasses.js";
+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/index.d.ts

@@ -0,0 +1,4 @@
+export { MonthCalendar } from "./MonthCalendar.js";
+export type { MonthCalendarProps, MonthCalendarSlots, MonthCalendarSlotProps } from './MonthCalendar.types';
+export { monthCalendarClasses, getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";
+export type { MonthCalendarClasses, MonthCalendarClassKey } from './monthCalendarClasses';

package/modern/MonthCalendar/monthCalendarClasses.d.ts

@@ -0,0 +1,13 @@
+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<keyof MonthCalendarClasses, string>;

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { MultiSectionDigitalClockProps } from "./MultiSectionDigitalClock.types.js";
+type MultiSectionDigitalClockComponent = ((props: MultiSectionDigitalClockProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+ * - [DigitalClock](https://mui.com/x/react-date-pickers/digital-clock/)
+ *
+ * API:
+ *
+ * - [MultiSectionDigitalClock API](https://mui.com/x/api/date-pickers/multi-section-digital-clock/)
+ */
+export declare const MultiSectionDigitalClock: MultiSectionDigitalClockComponent;
+export {};

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -19,7 +19,7 @@ import { PickerViewRoot } from "../internals/components/PickerViewRoot/index.js"
 import { getMultiSectionDigitalClockUtilityClass } from "./multiSectionDigitalClockClasses.js";
 import { MultiSectionDigitalClockSection } from "./MultiSectionDigitalClockSection.js";
 import { getHourSectionOptions, getTimeSectionOptions } from "./MultiSectionDigitalClock.utils.js";
-import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
+import { useControlledValue } from "../internals/hooks/useControlledValue.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useClockReferenceDate } from "../internals/hooks/useClockReferenceDate.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
@@ -38,7 +38,6 @@ const MultiSectionDigitalClockRoot = styled(PickerViewRoot, {
 })(({
   theme
 }) => ({
-  display: 'flex',
   flexDirection: 'row',
   width: '100%',
   borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
@@ -95,7 +94,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
     value,
     handleValueChange: handleRawValueChange,
     timezone
-  } = useControlledValueWithTimezone({
+  } = useControlledValue({
     name: 'MultiSectionDigitalClock',
     timezone: timezoneProp,
     value: valueProp,

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.types.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/utils';
+import MenuItem from '@mui/material/MenuItem';
+import { MultiSectionDigitalClockClasses } from "./multiSectionDigitalClockClasses.js";
+import { BaseClockProps, ExportedBaseClockProps, MultiSectionDigitalClockOnlyProps } from "../internals/models/props/time.js";
+import { MultiSectionDigitalClockSectionProps } from "./MultiSectionDigitalClockSection.js";
+import { TimeViewWithMeridiem } from "../internals/models/index.js";
+export interface MultiSectionDigitalClockOption<TSectionValue extends number | string> {
+  isDisabled?: (value: TSectionValue) => boolean;
+  isSelected: (value: TSectionValue) => boolean;
+  isFocused: (value: TSectionValue) => boolean;
+  label: string;
+  value: TSectionValue;
+  ariaLabel: string;
+}
+export interface ExportedMultiSectionDigitalClockProps extends ExportedBaseClockProps, MultiSectionDigitalClockOnlyProps {}
+export interface MultiSectionDigitalClockViewProps<TSectionValue extends number | string> extends Pick<MultiSectionDigitalClockSectionProps<TSectionValue>, 'onChange' | 'items'> {}
+export interface MultiSectionDigitalClockSlots {
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+}
+export interface MultiSectionDigitalClockSlotProps {
+  digitalClockSectionItem?: SlotComponentProps<typeof MenuItem, {}, Record<string, any>>;
+}
+export interface MultiSectionDigitalClockProps extends ExportedMultiSectionDigitalClockProps, BaseClockProps<TimeViewWithMeridiem> {
+  /**
+   * Available views.
+   * @default ['hours', 'minutes']
+   */
+  views?: readonly TimeViewWithMeridiem[];
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<MultiSectionDigitalClockClasses>;
+  /**
+   * Overrideable component slots.
+   * @default {}
+   */
+  slots?: MultiSectionDigitalClockSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MultiSectionDigitalClockSlotProps;
+}

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.d.ts

@@ -0,0 +1,41 @@
+import { MuiPickersAdapter, PickerValidDate } from "../models/index.js";
+import { MultiSectionDigitalClockOption } from "./MultiSectionDigitalClock.types.js";
+interface GetHoursSectionOptionsParameters {
+  now: PickerValidDate;
+  value: PickerValidDate | null;
+  utils: MuiPickersAdapter;
+  ampm: boolean;
+  isDisabled: (value: number) => boolean;
+  timeStep: number;
+  resolveAriaLabel: (value: string) => string;
+  valueOrReferenceDate: PickerValidDate;
+}
+export declare const getHourSectionOptions: ({
+  now,
+  value,
+  utils,
+  ampm,
+  isDisabled,
+  resolveAriaLabel,
+  timeStep,
+  valueOrReferenceDate
+}: GetHoursSectionOptionsParameters) => MultiSectionDigitalClockOption<number>[];
+interface GetTimeSectionOptionsParameters {
+  value: number | null;
+  utils: MuiPickersAdapter;
+  isDisabled: (value: number) => boolean;
+  timeStep: number;
+  resolveLabel: (value: number) => string;
+  hasValue?: boolean;
+  resolveAriaLabel: (value: string) => string;
+}
+export declare const getTimeSectionOptions: ({
+  value,
+  utils,
+  isDisabled,
+  timeStep,
+  resolveLabel,
+  resolveAriaLabel,
+  hasValue
+}: GetTimeSectionOptionsParameters) => MultiSectionDigitalClockOption<number>[];
+export {};

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { MultiSectionDigitalClockSectionClasses } from "./multiSectionDigitalClockSectionClasses.js";
+import type { MultiSectionDigitalClockOption, MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from './MultiSectionDigitalClock.types';
+import { FormProps } from "../internals/models/formProps.js";
+export interface ExportedMultiSectionDigitalClockSectionProps {
+  className?: string;
+  classes?: Partial<MultiSectionDigitalClockSectionClasses>;
+  slots?: MultiSectionDigitalClockSlots;
+  slotProps?: MultiSectionDigitalClockSlotProps;
+}
+export interface MultiSectionDigitalClockSectionProps<TSectionValue extends number | string> extends FormProps, ExportedMultiSectionDigitalClockSectionProps {
+  autoFocus?: boolean;
+  items: MultiSectionDigitalClockOption<TSectionValue>[];
+  onChange: (value: TSectionValue) => void;
+  active?: boolean;
+  skipDisabled?: boolean;
+  role?: string;
+}
+type MultiSectionDigitalClockSectionComponent = <TSectionValue extends number | string>(props: MultiSectionDigitalClockSectionProps<TSectionValue> & React.RefAttributes<HTMLUListElement>) => React.JSX.Element & {
+  propTypes?: any;
+};
+/**
+ * @ignore - internal component.
+ */
+export declare const MultiSectionDigitalClockSection: MultiSectionDigitalClockSectionComponent;
+export {};

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["autoFocus", "onChange", "className", "classes", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];

package/modern/MultiSectionDigitalClock/index.d.ts

@@ -0,0 +1,7 @@
+export { MultiSectionDigitalClock } from "./MultiSectionDigitalClock.js";
+export type { MultiSectionDigitalClockProps, MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from './MultiSectionDigitalClock.types';
+export { multiSectionDigitalClockSectionClasses } from "./multiSectionDigitalClockSectionClasses.js";
+export type { MultiSectionDigitalClockSectionClasses, MultiSectionDigitalClockSectionClassKey } from './multiSectionDigitalClockSectionClasses';
+export type { ExportedMultiSectionDigitalClockSectionProps } from './MultiSectionDigitalClockSection';
+export { multiSectionDigitalClockClasses, getMultiSectionDigitalClockUtilityClass } from "./multiSectionDigitalClockClasses.js";
+export type { MultiSectionDigitalClockClasses, MultiSectionDigitalClockClassKey } from './multiSectionDigitalClockClasses';

package/modern/MultiSectionDigitalClock/multiSectionDigitalClockClasses.d.ts

@@ -0,0 +1,7 @@
+export interface MultiSectionDigitalClockClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type MultiSectionDigitalClockClassKey = keyof MultiSectionDigitalClockClasses;
+export declare function getMultiSectionDigitalClockUtilityClass(slot: string): string;
+export declare const multiSectionDigitalClockClasses: MultiSectionDigitalClockClasses;

package/modern/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.d.ts

@@ -0,0 +1,9 @@
+export interface MultiSectionDigitalClockSectionClasses {
+  /** Styles applied to the root (list) element. */
+  root: string;
+  /** Styles applied to the list item (by default: MenuItem) element. */
+  item: string;
+}
+export type MultiSectionDigitalClockSectionClassKey = keyof MultiSectionDigitalClockSectionClasses;
+export declare function getMultiSectionDigitalClockSectionUtilityClass(slot: string): string;
+export declare const multiSectionDigitalClockSectionClasses: MultiSectionDigitalClockSectionClasses;

package/modern/PickersActionBar/PickersActionBar.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { DialogActionsProps } from '@mui/material/DialogActions';
+export type PickersActionBarAction = 'clear' | 'cancel' | 'accept' | 'today';
+export interface PickersActionBarProps extends DialogActionsProps {
+  /**
+   * Ordered array of actions to display.
+   * If empty, does not display that action bar.
+   * @default
+   * - `[]` for Desktop Date Picker and Desktop Date Range Picker
+   * - `['cancel', 'accept']` for all other Pickers
+   */
+  actions?: PickersActionBarAction[];
+}
+/**
+ * Demos:
+ *
+ * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+ * - [Custom layout](https://mui.com/x/react-date-pickers/custom-layout/)
+ *
+ * API:
+ *
+ * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/)
+ */
+declare function PickersActionBarComponent(props: PickersActionBarProps): React.JSX.Element | null;
+declare namespace PickersActionBarComponent {
+  var propTypes: any;
+}
+declare const PickersActionBar: React.MemoExoticComponent<typeof PickersActionBarComponent>;
+export { PickersActionBar };

package/modern/PickersActionBar/index.d.ts

@@ -0,0 +1,2 @@
+export { PickersActionBar } from "./PickersActionBar.js";
+export type { PickersActionBarProps, PickersActionBarAction } from './PickersActionBar';