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

package/modern/DatePicker/DatePicker.js

@@ -98,7 +98,8 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   disableHighlightToday: 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).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

package/modern/DatePicker/DatePicker.types.d.ts

@@ -0,0 +1,38 @@
+import { DesktopDatePickerProps, DesktopDatePickerSlots, DesktopDatePickerSlotProps } from "../DesktopDatePicker/index.js";
+import { BaseSingleInputFieldProps } from "../internals/models/index.js";
+import { MobileDatePickerProps, MobileDatePickerSlots, MobileDatePickerSlotProps } from "../MobileDatePicker/index.js";
+import { ValidateDateProps } from "../validation/validateDate.js";
+export interface DatePickerSlots extends DesktopDatePickerSlots, MobileDatePickerSlots {}
+export interface DatePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDatePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDatePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
+export interface DatePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDatePickerProps<TEnableAccessibleFieldDOMStructure>, MobileDatePickerProps<TEnableAccessibleFieldDOMStructure> {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DatePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DatePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+  /**
+   * Years rendered per row.
+   * @default 4 on desktop, 3 on mobile
+   */
+  yearsPerRow?: 3 | 4;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   */
+  closeOnSelect?: boolean;
+}
+/**
+ * Props the field can receive when used inside a Date Picker (<DatePicker />, <DesktopDatePicker /> or <MobileDatePicker /> component).
+ */
+export type DatePickerFieldProps = ValidateDateProps & BaseSingleInputFieldProps;

package/modern/DatePicker/DatePickerToolbar.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { BaseToolbarProps, ExportedBaseToolbarProps } from "../internals/models/props/toolbar.js";
+import { DatePickerToolbarClasses } from "./datePickerToolbarClasses.js";
+export interface DatePickerToolbarProps extends BaseToolbarProps, ExportedDatePickerToolbarProps {}
+export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DatePickerToolbarClasses>;
+}
+type DatePickerToolbarComponent = ((props: DatePickerToolbarProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+ * - [Custom components](https://mui.com/x/react-date-pickers/custom-components/)
+ *
+ * API:
+ *
+ * - [DatePickerToolbar API](https://mui.com/x/api/date-pickers/date-picker-toolbar/)
+ */
+export declare const DatePickerToolbar: DatePickerToolbarComponent;
+export {};

package/modern/DatePicker/datePickerToolbarClasses.d.ts

@@ -0,0 +1,9 @@
+export interface DatePickerToolbarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the title element. */
+  title: string;
+}
+export type DatePickerToolbarClassKey = keyof DatePickerToolbarClasses;
+export declare function getDatePickerToolbarUtilityClass(slot: string): string;
+export declare const datePickerToolbarClasses: DatePickerToolbarClasses;

package/modern/DatePicker/index.d.ts

@@ -0,0 +1,6 @@
+export { DatePicker } from "./DatePicker.js";
+export type { DatePickerProps, DatePickerSlots, DatePickerSlotProps, DatePickerFieldProps } from './DatePicker.types';
+export { DatePickerToolbar } from "./DatePickerToolbar.js";
+export type { DatePickerToolbarProps } from './DatePickerToolbar';
+export { datePickerToolbarClasses } from "./datePickerToolbarClasses.js";
+export type { DatePickerToolbarClassKey, DatePickerToolbarClasses } from './datePickerToolbarClasses';

package/modern/DatePicker/shared.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { DateCalendarSlots, DateCalendarSlotProps, ExportedDateCalendarProps } from "../DateCalendar/DateCalendar.types.js";
+import { DateValidationError, DateView } from "../models/index.js";
+import { BasePickerInputProps } from "../internals/models/props/basePickerProps.js";
+import { LocalizedComponent } from "../locales/utils/pickersLocaleTextApi.js";
+import { DatePickerToolbarProps, ExportedDatePickerToolbarProps } from "./DatePickerToolbar.js";
+import { PickerViewRendererLookup } from "../internals/hooks/usePicker/index.js";
+import { DateViewRendererProps } from "../dateViewRenderers/index.js";
+import { PickerValue } from "../internals/models/index.js";
+import { ValidateDatePropsToDefault } from "../validation/validateDate.js";
+export interface BaseDatePickerSlots extends DateCalendarSlots {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DatePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DatePickerToolbarProps>;
+}
+export interface BaseDatePickerSlotProps extends DateCalendarSlotProps {
+  toolbar?: ExportedDatePickerToolbarProps;
+}
+export type DatePickerViewRenderers<TView extends DateView> = PickerViewRendererLookup<PickerValue, TView, DateViewRendererProps<TView>>;
+export interface BaseDatePickerProps extends BasePickerInputProps<PickerValue, DateView, DateValidationError>, ExportedDateCalendarProps {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BaseDatePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BaseDatePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DatePickerViewRenderers<DateView>>;
+}
+type UseDatePickerDefaultizedProps<Props extends BaseDatePickerProps> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | ValidateDatePropsToDefault>>;
+export declare function useDatePickerDefaultizedProps<Props extends BaseDatePickerProps>(props: Props, name: string): UseDatePickerDefaultizedProps<Props>;
+export {};

package/modern/DateTimeField/DateTimeField.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DateTimeFieldProps } from "./DateTimeField.types.js";
+type DateTimeFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DateTimeFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DateTimeField](http://mui.com/x/react-date-pickers/date-time-field/)
+ * - [Fields](https://mui.com/x/react-date-pickers/fields/)
+ *
+ * API:
+ *
+ * - [DateTimeField API](https://mui.com/x/api/date-pickers/date-time-field/)
+ */
+declare const DateTimeField: DateTimeFieldComponent;
+export { DateTimeField };

package/modern/DateTimeField/DateTimeField.js

@@ -122,7 +122,8 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
-   * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   * Props applied to the [`FormHelperText`](https://mui.com/material-ui/api/form-helper-text/) element.
+   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FormHelperTextProps: PropTypes.object,
   /**
@@ -147,19 +148,22 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   id: PropTypes.string,
   /**
-   * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
+   * Props applied to the [`InputLabel`](https://mui.com/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps: PropTypes.object,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: PropTypes.object,
   /**
    * Props applied to the Input element.
-   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
-   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * It will be a [`FilledInput`](https://mui.com/material-ui/api/filled-input/),
+   * [`OutlinedInput`](https://mui.com/material-ui/api/outlined-input/) or [`Input`](https://mui.com/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: PropTypes.object,
   /**
@@ -243,7 +247,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
   onSelectedSectionsChange: PropTypes.func,
   /**
    * The position at which the opening button is placed.
-   * If there is no picker to open, the button is not rendered
+   * If there is no Picker to open, the button is not rendered
    * @default 'end'
    */
   openPickerButtonPosition: PropTypes.oneOf(['end', 'start']),
@@ -319,6 +323,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
   shouldRespectLeadingZeros: PropTypes.bool,
   /**
    * The size of the component.
+   * @default 'medium'
    */
   size: PropTypes.oneOf(['medium', 'small']),
   /**

package/modern/DateTimeField/DateTimeField.types.d.ts

@@ -0,0 +1,22 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { DateTimeValidationError, BuiltInFieldTextFieldProps } from "../models/index.js";
+import { UseFieldInternalProps } from "../internals/hooks/useField/index.js";
+import { ExportedValidateDateTimeProps } from "../validation/validateDateTime.js";
+import { AmPmProps } from "../internals/models/props/time.js";
+import { PickerValue } from "../internals/models/index.js";
+import { ExportedPickerFieldUIProps, PickerFieldUISlotProps, PickerFieldUISlots } from "../internals/components/PickerFieldUI.js";
+export interface UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, ExportedValidateDateTimeProps, ExportedPickerFieldUIProps, AmPmProps {}
+export type DateTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>> & {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateTimeFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateTimeFieldSlotProps;
+};
+export interface DateTimeFieldSlots extends PickerFieldUISlots {}
+export interface DateTimeFieldSlotProps extends PickerFieldUISlotProps {}

package/modern/DateTimeField/index.d.ts

@@ -0,0 +1,3 @@
+export { DateTimeField } from "./DateTimeField.js";
+export { useDateTimeField as unstable_useDateTimeField } from "./useDateTimeField.js";
+export type { UseDateTimeFieldProps, DateTimeFieldProps } from './DateTimeField.types';

package/modern/DateTimeField/useDateTimeField.d.ts

@@ -0,0 +1,2 @@
+import { UseDateTimeFieldProps } from "./DateTimeField.types.js";
+export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TProps) => import("../internals").UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;

package/modern/DateTimeField/useDateTimeField.js

@@ -1,25 +1,11 @@
 'use client';
 
-import { useField, useFieldInternalPropsWithDefaults } from "../internals/hooks/useField/index.js";
-import { useSplitFieldProps } from "../hooks/index.js";
+import { useField } from "../internals/hooks/useField/index.js";
 import { useDateTimeManager } from "../managers/index.js";
 export const useDateTimeField = props => {
   const manager = useDateTimeManager(props);
-  const {
-    forwardedProps,
-    internalProps
-  } = useSplitFieldProps(props, 'date-time');
-  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
-    manager,
-    internalProps
-  });
   return useField({
-    forwardedProps,
-    internalProps: internalPropsWithDefaults,
-    valueManager: manager.internal_valueManager,
-    fieldValueManager: manager.internal_fieldValueManager,
-    validator: manager.validator,
-    valueType: manager.valueType,
-    getOpenPickerButtonAriaLabel: manager.internal_getOpenPickerButtonAriaLabel
+    manager,
+    props
   });
 };

package/modern/DateTimePicker/DateTimePicker.d.ts

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

package/modern/DateTimePicker/DateTimePicker.js

@@ -113,7 +113,8 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

package/modern/DateTimePicker/DateTimePicker.types.d.ts

@@ -0,0 +1,34 @@
+import { DesktopDateTimePickerProps, DesktopDateTimePickerSlots, DesktopDateTimePickerSlotProps } from "../DesktopDateTimePicker/index.js";
+import { BaseSingleInputFieldProps } from "../internals/models/index.js";
+import { MobileDateTimePickerProps, MobileDateTimePickerSlots, MobileDateTimePickerSlotProps } from "../MobileDateTimePicker/index.js";
+import { ValidateDateTimeProps } from "../validation/index.js";
+import { ExportedYearCalendarProps } from "../YearCalendar/YearCalendar.types.js";
+export interface DateTimePickerSlots extends DesktopDateTimePickerSlots, MobileDateTimePickerSlots {}
+export interface DateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileDateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
+export interface DateTimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopDateTimePickerProps<TEnableAccessibleFieldDOMStructure>, ExportedYearCalendarProps, Omit<MobileDateTimePickerProps<TEnableAccessibleFieldDOMStructure>, 'views'> {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+  /**
+   * Years rendered per row.
+   * @default 4 on desktop, 3 on mobile
+   */
+  yearsPerRow?: 3 | 4;
+}
+/**
+ * Props the field can receive when used inside a Date Time Picker (<DateTimePicker />, <DesktopDateTimePicker /> or <MobileDateTimePicker /> component).
+ */
+export type DateTimePickerFieldProps = ValidateDateTimeProps & BaseSingleInputFieldProps;

package/modern/DateTimePicker/DateTimePickerTabs.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { DateTimePickerTabsClasses } from "./dateTimePickerTabsClasses.js";
+import { ExportedBaseTabsProps } from "../internals/models/props/tabs.js";
+export interface DateTimePickerTabsProps extends ExportedBaseTabsProps {
+  /**
+   * Toggles visibility of the tabs allowing view switching.
+   * @default `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`
+   */
+  hidden?: boolean;
+  /**
+   * Date tab icon.
+   * @default DateRange
+   */
+  dateIcon?: React.ReactNode;
+  /**
+   * Time tab icon.
+   * @default Time
+   */
+  timeIcon?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DateTimePickerTabsClasses>;
+}
+/**
+ * Demos:
+ *
+ * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+ * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+ *
+ * API:
+ *
+ * - [DateTimePickerTabs API](https://mui.com/x/api/date-pickers/date-time-picker-tabs/)
+ */
+declare const DateTimePickerTabs: {
+  (inProps: DateTimePickerTabsProps): React.JSX.Element | null;
+  propTypes: any;
+};
+export { DateTimePickerTabs };

package/modern/DateTimePicker/DateTimePickerToolbar.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { BaseToolbarProps, ExportedBaseToolbarProps } from "../internals/models/props/toolbar.js";
+import { DateTimePickerToolbarClasses } from "./dateTimePickerToolbarClasses.js";
+import { DateOrTimeViewWithMeridiem, PickerValue } from "../internals/models/index.js";
+import { DateTimeValidationError } from "../models/index.js";
+import { SetValueActionOptions } from "../internals/components/PickerProvider.js";
+export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DateTimePickerToolbarClasses>;
+}
+export interface DateTimePickerToolbarProps extends ExportedDateTimePickerToolbarProps, BaseToolbarProps {
+  /**
+   * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
+   */
+  toolbarTitle?: React.ReactNode;
+  ampm?: boolean;
+  ampmInClock?: boolean;
+}
+/**
+ * If `forceDesktopVariant` is set to `true`, the toolbar will always be rendered in the desktop mode.
+ * If `onViewChange` is defined, the toolbar will call it instead of calling the default handler from `usePickerContext`.
+ * This is used by the Date Time Range Picker Toolbar.
+ */
+export declare const DateTimePickerToolbarOverrideContext: React.Context<{
+  value: PickerValue;
+  setValue: (value: PickerValue, options?: SetValueActionOptions<DateTimeValidationError>) => void;
+  forceDesktopVariant: boolean;
+  setView: (view: DateOrTimeViewWithMeridiem) => void;
+  view: DateOrTimeViewWithMeridiem | null;
+} | null>;
+/**
+ * Demos:
+ *
+ * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+ * - [Custom components](https://mui.com/x/react-date-pickers/custom-components/)
+ *
+ * API:
+ *
+ * - [DateTimePickerToolbar API](https://mui.com/x/api/date-pickers/date-time-picker-toolbar/)
+ */
+declare function DateTimePickerToolbar(inProps: DateTimePickerToolbarProps): React.JSX.Element;
+declare namespace DateTimePickerToolbar {
+  var propTypes: any;
+}
+export { DateTimePickerToolbar };

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -57,7 +57,7 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
     },
     style: {
       borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-      [`& .${pickersToolbarClasses.content} .${pickersToolbarTextClasses.selected}`]: {
+      [`& .${pickersToolbarClasses.content} .${pickersToolbarTextClasses.root}[data-selected]`]: {
         color: (theme.vars || theme).palette.primary.main,
         fontWeight: theme.typography.fontWeightBold
       }

package/modern/DateTimePicker/dateTimePickerTabsClasses.d.ts

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

package/modern/DateTimePicker/dateTimePickerToolbarClasses.d.ts

@@ -0,0 +1,23 @@
+export interface DateTimePickerToolbarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the date container element. */
+  dateContainer: string;
+  /** Styles applied to the time container element. */
+  timeContainer: string;
+  /** Styles applied to the time (except am/pm) container element. */
+  timeDigitsContainer: string;
+  /** Styles applied to the time container if rtl. */
+  timeLabelReverse: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+  /** Styles applied to the am/pm section. */
+  ampmSelection: string;
+  /** Styles applied to am/pm section in landscape mode. */
+  ampmLandscape: string;
+  /** Styles applied to am/pm labels. */
+  ampmLabel: string;
+}
+export type DateTimePickerToolbarClassKey = keyof DateTimePickerToolbarClasses;
+export declare function getDateTimePickerToolbarUtilityClass(slot: string): string;
+export declare const dateTimePickerToolbarClasses: DateTimePickerToolbarClasses;

package/modern/DateTimePicker/index.d.ts

@@ -0,0 +1,10 @@
+export { DateTimePicker } from "./DateTimePicker.js";
+export type { DateTimePickerProps, DateTimePickerSlots, DateTimePickerSlotProps, DateTimePickerFieldProps } from './DateTimePicker.types';
+export { DateTimePickerTabs } from "./DateTimePickerTabs.js";
+export type { DateTimePickerTabsProps } from './DateTimePickerTabs';
+export { dateTimePickerTabsClasses } from "./dateTimePickerTabsClasses.js";
+export type { DateTimePickerTabsClassKey, DateTimePickerTabsClasses } from './dateTimePickerTabsClasses';
+export { DateTimePickerToolbar } from "./DateTimePickerToolbar.js";
+export type { DateTimePickerToolbarProps } from './DateTimePickerToolbar';
+export { dateTimePickerToolbarClasses } from "./dateTimePickerToolbarClasses.js";
+export type { DateTimePickerToolbarClassKey, DateTimePickerToolbarClasses } from './dateTimePickerToolbarClasses';

package/modern/DateTimePicker/shared.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { DateOrTimeView, DateTimeValidationError } from "../models/index.js";
+import { DateCalendarSlots, DateCalendarSlotProps, ExportedDateCalendarProps } from "../DateCalendar/DateCalendar.types.js";
+import { BasePickerInputProps } from "../internals/models/props/basePickerProps.js";
+import { DateTimePickerTabsProps } from "./DateTimePickerTabs.js";
+import { LocalizedComponent } from "../locales/utils/pickersLocaleTextApi.js";
+import { DateTimePickerToolbarProps, ExportedDateTimePickerToolbarProps } from "./DateTimePickerToolbar.js";
+import { PickerViewRendererLookup } from "../internals/hooks/usePicker/index.js";
+import { DateViewRendererProps } from "../dateViewRenderers/index.js";
+import { TimeViewRendererProps } from "../timeViewRenderers/index.js";
+import { BaseClockProps, DigitalTimePickerProps } from "../internals/models/props/time.js";
+import { DateOrTimeViewWithMeridiem, PickerValue, TimeViewWithMeridiem } from "../internals/models/index.js";
+import { ExportedValidateDateTimeProps, ValidateDateTimePropsToDefault } from "../validation/validateDateTime.js";
+import { DigitalClockSlotProps, DigitalClockSlots } from "../DigitalClock/index.js";
+import { MultiSectionDigitalClockSlotProps, MultiSectionDigitalClockSlots } from "../MultiSectionDigitalClock/index.js";
+export interface BaseDateTimePickerSlots extends DateCalendarSlots, DigitalClockSlots, MultiSectionDigitalClockSlots {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimePickerTabs
+   */
+  tabs?: React.ElementType<DateTimePickerTabsProps>;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimePickerToolbarProps>;
+}
+export interface BaseDateTimePickerSlotProps extends DateCalendarSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
+  /**
+   * Props passed down to the tabs component.
+   */
+  tabs?: DateTimePickerTabsProps;
+  /**
+   * Props passed down to the toolbar component.
+   */
+  toolbar?: ExportedDateTimePickerToolbarProps;
+}
+export type DateTimePickerViewRenderers<TView extends DateOrTimeViewWithMeridiem> = PickerViewRendererLookup<PickerValue, TView, Omit<DateViewRendererProps<TView>, 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>>, 'slots' | 'slotProps'>>;
+export interface BaseDateTimePickerProps extends Omit<BasePickerInputProps<PickerValue, DateOrTimeViewWithMeridiem, DateTimeValidationError>, 'views'>, Omit<ExportedDateCalendarProps, 'onViewChange' | 'views'>, DigitalTimePickerProps, ExportedValidateDateTimeProps {
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true on desktop, false on mobile
+   */
+  ampmInClock?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BaseDateTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BaseDateTimePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>;
+  /**
+   * Available views.
+   */
+  views?: readonly DateOrTimeView[];
+}
+type UseDateTimePickerDefaultizedProps<Props extends BaseDateTimePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'orientation' | 'ampm' | ValidateDateTimePropsToDefault>, 'views'>> & {
+  shouldRenderTimeInASingleColumn: boolean;
+  views: readonly DateOrTimeViewWithMeridiem[];
+};
+export declare function useDateTimePickerDefaultizedProps<Props extends BaseDateTimePickerProps>(props: Props, name: string): UseDateTimePickerDefaultizedProps<Props>;
+export {};

package/modern/DateTimePicker/shared.js

@@ -6,6 +6,7 @@ import { applyDefaultDate } from "../internals/utils/date-utils.js";
 import { DateTimePickerTabs } from "./DateTimePickerTabs.js";
 import { DateTimePickerToolbar } from "./DateTimePickerToolbar.js";
 import { applyDefaultViewProps } from "../internals/utils/views.js";
+import { resolveTimeViewsResponse } from "../internals/utils/date-time-utils.js";
 export function useDateTimePickerDefaultizedProps(props, name) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
@@ -22,12 +23,32 @@ export function useDateTimePickerDefaultizedProps(props, name) {
       dateTimePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  return _extends({}, themeProps, applyDefaultViewProps({
+  const {
+    openTo,
+    views: defaultViews
+  } = applyDefaultViewProps({
     views: themeProps.views,
     openTo: themeProps.openTo,
     defaultViews: ['year', 'day', 'hours', 'minutes'],
     defaultOpenTo: 'day'
-  }), {
+  });
+  const {
+    shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn,
+    views,
+    timeSteps
+  } = resolveTimeViewsResponse({
+    thresholdToRenderTimeInASingleColumn: themeProps.thresholdToRenderTimeInASingleColumn,
+    ampm,
+    timeSteps: themeProps.timeSteps,
+    views: defaultViews
+  });
+  return _extends({}, themeProps, {
+    timeSteps,
+    openTo,
+    shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn,
+    views,
     ampm,
     localeText,
     orientation: themeProps.orientation ?? 'portrait',

package/modern/DayCalendarSkeleton/DayCalendarSkeleton.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+import { DayCalendarSkeletonClasses } from "./dayCalendarSkeletonClasses.js";
+type HTMLDivProps = React.JSX.IntrinsicElements['div'];
+export interface DayCalendarSkeletonProps extends HTMLDivProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DayCalendarSkeletonClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Demos:
+ *
+ * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
+ *
+ * API:
+ *
+ * - [CalendarPickerSkeleton API](https://mui.com/x/api/date-pickers/calendar-picker-skeleton/)
+ */
+declare function DayCalendarSkeleton(inProps: DayCalendarSkeletonProps): React.JSX.Element;
+declare namespace DayCalendarSkeleton {
+  var propTypes: any;
+}
+export { DayCalendarSkeleton };

package/modern/DayCalendarSkeleton/dayCalendarSkeletonClasses.d.ts

@@ -0,0 +1,11 @@
+export interface DayCalendarSkeletonClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the week element. */
+  week: string;
+  /** Styles applied to the day element. */
+  daySkeleton: string;
+}
+export type DayCalendarSkeletonClassKey = keyof DayCalendarSkeletonClasses;
+export declare const getDayCalendarSkeletonUtilityClass: (slot: string) => string;
+export declare const dayCalendarSkeletonClasses: DayCalendarSkeletonClasses;