@mui/x-date-pickers 7.0.0-alpha.4 → 7.0.0-alpha.6

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -224,6 +224,10 @@ MobileDateTimePicker.propTypes = {
    * @default 3
    */
   monthsPerRow: PropTypes.oneOf([3, 4]),
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -322,7 +326,7 @@ MobileDateTimePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

package/MobileDateTimePicker/MobileDateTimePicker.types.d.ts

@@ -1,21 +1,21 @@
-import { UseMobilePickerSlotsComponent, ExportedUseMobilePickerSlotsComponentsProps, MobileOnlyPickerProps } from '../internals/hooks/useMobilePicker';
-import { BaseDateTimePickerProps, BaseDateTimePickerSlotsComponent, BaseDateTimePickerSlotsComponentsProps } from '../DateTimePicker/shared';
+import { UseMobilePickerSlots, ExportedUseMobilePickerSlotProps, MobileOnlyPickerProps } from '../internals/hooks/useMobilePicker';
+import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from '../DateTimePicker/shared';
 import { MakeOptional } from '../internals/models/helpers';
 import { DateOrTimeView } from '../models';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
-export interface MobileDateTimePickerSlotsComponent<TDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView> extends BaseDateTimePickerSlotsComponent<TDate>, MakeOptional<UseMobilePickerSlotsComponent<TDate, TView>, 'field'> {
+export interface MobileDateTimePickerSlots<TDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView> extends BaseDateTimePickerSlots<TDate>, MakeOptional<UseMobilePickerSlots<TDate, TView>, 'field'> {
 }
-export interface MobileDateTimePickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView> extends BaseDateTimePickerSlotsComponentsProps<TDate>, ExportedUseMobilePickerSlotsComponentsProps<TDate, TView> {
+export interface MobileDateTimePickerSlotProps<TDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView> extends BaseDateTimePickerSlotProps<TDate>, ExportedUseMobilePickerSlotProps<TDate, TView> {
 }
 export interface MobileDateTimePickerProps<TDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView> extends BaseDateTimePickerProps<TDate, TView>, MobileOnlyPickerProps<TDate> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: MobileDateTimePickerSlotsComponent<TDate, TView>;
+    slots?: MobileDateTimePickerSlots<TDate, TView>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MobileDateTimePickerSlotsComponentsProps<TDate, TView>;
+    slotProps?: MobileDateTimePickerSlotProps<TDate, TView>;
 }

package/MobileDateTimePicker/index.d.ts

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

package/MobileTimePicker/MobileTimePicker.js

@@ -168,6 +168,10 @@ MobileTimePicker.propTypes = {
    * @default 1
    */
   minutesStep: PropTypes.number,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -248,7 +252,7 @@ MobileTimePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

package/MobileTimePicker/MobileTimePicker.types.d.ts

@@ -1,21 +1,21 @@
-import { UseMobilePickerSlotsComponent, ExportedUseMobilePickerSlotsComponentsProps, MobileOnlyPickerProps } from '../internals/hooks/useMobilePicker';
-import { BaseTimePickerProps, BaseTimePickerSlotsComponent, BaseTimePickerSlotsComponentsProps } from '../TimePicker/shared';
+import { UseMobilePickerSlots, ExportedUseMobilePickerSlotProps, MobileOnlyPickerProps } from '../internals/hooks/useMobilePicker';
+import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } from '../TimePicker/shared';
 import { MakeOptional } from '../internals/models/helpers';
 import { TimeView } from '../models';
 import { TimeViewWithMeridiem } from '../internals/models';
-export interface MobileTimePickerSlotsComponent<TDate, TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerSlotsComponent<TDate>, MakeOptional<UseMobilePickerSlotsComponent<TDate, TView>, 'field'> {
+export interface MobileTimePickerSlots<TDate, TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerSlots<TDate>, MakeOptional<UseMobilePickerSlots<TDate, TView>, 'field'> {
 }
-export interface MobileTimePickerSlotsComponentsProps<TDate, TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerSlotsComponentsProps, ExportedUseMobilePickerSlotsComponentsProps<TDate, TView> {
+export interface MobileTimePickerSlotProps<TDate, TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerSlotProps, ExportedUseMobilePickerSlotProps<TDate, TView> {
 }
 export interface MobileTimePickerProps<TDate, TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerProps<TDate, TView>, MobileOnlyPickerProps<TDate> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: MobileTimePickerSlotsComponent<TDate, TView>;
+    slots?: MobileTimePickerSlots<TDate, TView>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MobileTimePickerSlotsComponentsProps<TDate, TView>;
+    slotProps?: MobileTimePickerSlotProps<TDate, TView>;
 }

package/MobileTimePicker/index.d.ts

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

package/MultiSectionDigitalClock/MultiSectionDigitalClock.types.d.ts

@@ -17,14 +17,14 @@ export interface ExportedMultiSectionDigitalClockProps<TDate> extends ExportedBa
 }
 export interface MultiSectionDigitalClockViewProps<TValue> extends Pick<MultiSectionDigitalClockSectionProps<TValue>, 'onChange' | 'items'> {
 }
-export interface MultiSectionDigitalClockSlotsComponent {
+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 MultiSectionDigitalClockSlotsComponentsProps {
+export interface MultiSectionDigitalClockSlotProps {
     digitalClockSectionItem?: SlotComponentProps<typeof MenuItem, {}, Record<string, any>>;
 }
 export interface MultiSectionDigitalClockProps<TDate> extends ExportedMultiSectionDigitalClockProps<TDate>, BaseClockProps<TDate, TimeViewWithMeridiem> {
@@ -36,10 +36,10 @@ export interface MultiSectionDigitalClockProps<TDate> extends ExportedMultiSecti
      * Overrideable component slots.
      * @default {}
      */
-    slots?: MultiSectionDigitalClockSlotsComponent;
+    slots?: MultiSectionDigitalClockSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MultiSectionDigitalClockSlotsComponentsProps;
+    slotProps?: MultiSectionDigitalClockSlotProps;
 }

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { MultiSectionDigitalClockSectionClasses } from './multiSectionDigitalClockSectionClasses';
-import type { MultiSectionDigitalClockOption, MultiSectionDigitalClockSlotsComponent, MultiSectionDigitalClockSlotsComponentsProps } from './MultiSectionDigitalClock.types';
+import type { MultiSectionDigitalClockOption, MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from './MultiSectionDigitalClock.types';
 export interface ExportedMultiSectionDigitalClockSectionProps {
     className?: string;
     classes?: Partial<MultiSectionDigitalClockSectionClasses>;
-    slots?: MultiSectionDigitalClockSlotsComponent;
-    slotProps?: MultiSectionDigitalClockSlotsComponentsProps;
+    slots?: MultiSectionDigitalClockSlots;
+    slotProps?: MultiSectionDigitalClockSlotProps;
 }
 export interface MultiSectionDigitalClockSectionProps<TValue> extends ExportedMultiSectionDigitalClockSectionProps {
     autoFocus?: boolean;

package/MultiSectionDigitalClock/index.d.ts

@@ -1,5 +1,5 @@
 export { MultiSectionDigitalClock } from './MultiSectionDigitalClock';
-export type { MultiSectionDigitalClockProps, MultiSectionDigitalClockSlotsComponent, MultiSectionDigitalClockSlotsComponentsProps, } from './MultiSectionDigitalClock.types';
+export type { MultiSectionDigitalClockProps, MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps, } from './MultiSectionDigitalClock.types';
 export { multiSectionDigitalClockSectionClasses } from './multiSectionDigitalClockSectionClasses';
 export type { MultiSectionDigitalClockSectionClasses, MultiSectionDigitalClockSectionClassKey, } from './multiSectionDigitalClockSectionClasses';
 export type { ExportedMultiSectionDigitalClockSectionProps } from './MultiSectionDigitalClockSection';

package/PickersCalendarHeader/PickersCalendarHeader.types.d.ts

@@ -3,12 +3,12 @@ import { SlotComponentProps } from '@mui/base/utils';
 import IconButton from '@mui/material/IconButton';
 import SvgIcon from '@mui/material/SvgIcon';
 import { SxProps, Theme } from '@mui/material/styles';
-import { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps } from '../internals/components/PickersArrowSwitcher';
+import { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from '../internals/components/PickersArrowSwitcher';
 import { MonthValidationOptions } from '../internals/hooks/date-helpers-hooks';
 import { DateView } from '../models/views';
 import { SlideDirection } from '../DateCalendar/PickersSlideTransition';
 import { PickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
-export interface PickersCalendarHeaderSlotsComponent extends PickersArrowSwitcherSlotsComponent {
+export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots {
     /**
      * Button displayed to switch between different calendar views.
      * @default IconButton
@@ -20,24 +20,24 @@ export interface PickersCalendarHeaderSlotsComponent extends PickersArrowSwitche
      */
     switchViewIcon?: React.ElementType;
 }
-export interface PickersCalendarHeaderComponentsPropsOverrides {
+export interface PickersCalendarHeaderSlotPropsOverrides {
 }
 export type PickersCalendarHeaderOwnerState<TDate> = PickersCalendarHeaderProps<TDate>;
-export interface PickersCalendarHeaderSlotsComponentsProps<TDate> extends PickersArrowSwitcherSlotsComponentsProps {
-    switchViewButton?: SlotComponentProps<typeof IconButton, PickersCalendarHeaderComponentsPropsOverrides, PickersCalendarHeaderOwnerState<TDate>>;
-    switchViewIcon?: SlotComponentProps<typeof SvgIcon, PickersCalendarHeaderComponentsPropsOverrides, undefined>;
+export interface PickersCalendarHeaderSlotProps<TDate> extends PickersArrowSwitcherSlotProps {
+    switchViewButton?: SlotComponentProps<typeof IconButton, PickersCalendarHeaderSlotPropsOverrides, PickersCalendarHeaderOwnerState<TDate>>;
+    switchViewIcon?: SlotComponentProps<typeof SvgIcon, PickersCalendarHeaderSlotPropsOverrides, undefined>;
 }
 export interface PickersCalendarHeaderProps<TDate> extends ExportedPickersArrowSwitcherProps, MonthValidationOptions<TDate> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: PickersCalendarHeaderSlotsComponent;
+    slots?: PickersCalendarHeaderSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: PickersCalendarHeaderSlotsComponentsProps<TDate>;
+    slotProps?: PickersCalendarHeaderSlotProps<TDate>;
     currentMonth: TDate;
     disabled?: boolean;
     views: readonly DateView[];

package/PickersCalendarHeader/index.d.ts

@@ -1,4 +1,4 @@
 export { pickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
 export type { PickersCalendarHeaderClassKey, PickersCalendarHeaderClasses, } from './pickersCalendarHeaderClasses';
 export { PickersCalendarHeader } from './PickersCalendarHeader';
-export type { PickersCalendarHeaderProps, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, ExportedPickersCalendarHeaderProps, } from './PickersCalendarHeader.types';
+export type { PickersCalendarHeaderProps, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps, ExportedPickersCalendarHeaderProps, } from './PickersCalendarHeader.types';

package/PickersLayout/PickersLayout.types.d.ts

@@ -8,7 +8,7 @@ import { UsePickerLayoutPropsResponseLayoutProps } from '../internals/hooks/useP
 import { PickersLayoutClasses } from './pickersLayoutClasses';
 import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models/common';
 import { PickersShortcutsProps } from '../PickersShortcuts';
-export interface ExportedPickersLayoutSlotsComponent<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> {
+export interface ExportedPickersLayoutSlots<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> {
     /**
      * Custom component for the action bar, it is placed below the picker views.
      * @default PickersActionBar
@@ -31,7 +31,7 @@ interface PickersLayoutActionBarOwnerState<TValue, TDate, TView extends DateOrTi
 interface PickersShortcutsOwnerState<TValue> extends PickersShortcutsProps<TValue> {
     wrapperVariant: WrapperVariant;
 }
-export interface ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> {
+export interface ExportedPickersLayoutSlotProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> {
     /**
      * Props passed down to the action bar component.
      */
@@ -45,7 +45,7 @@ export interface ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView
      */
     layout?: Partial<PickersLayoutProps<TValue, TDate, TView>>;
 }
-export interface PickersLayoutSlotsComponent<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotsComponent<TValue, TDate, TView> {
+export interface PickersLayoutSlots<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<TValue, TDate, TView> {
     /**
      * Tabs enabling toggling between views.
      */
@@ -56,7 +56,7 @@ export interface PickersLayoutSlotsComponent<TValue, TDate, TView extends DateOr
      */
     toolbar?: React.JSXElementConstructor<BaseToolbarProps<TValue, TView>>;
 }
-export interface PickersLayoutSlotsComponentsProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView> {
+export interface PickersLayoutSlotProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<TValue, TDate, TView> {
     /**
      * Props passed down to the tabs component.
      */
@@ -80,12 +80,12 @@ export interface PickersLayoutProps<TValue, TDate, TView extends DateOrTimeViewW
      * Overridable component slots.
      * @default {}
      */
-    slots?: PickersLayoutSlotsComponent<TValue, TDate, TView>;
+    slots?: PickersLayoutSlots<TValue, TDate, TView>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: PickersLayoutSlotsComponentsProps<TValue, TDate, TView>;
+    slotProps?: PickersLayoutSlotProps<TValue, TDate, TView>;
 }
 export interface SubComponents {
     toolbar: React.ReactNode;

package/PickersLayout/index.d.ts

@@ -1,5 +1,5 @@
 export { PickersLayout, PickersLayoutRoot, PickersLayoutContentWrapper } from './PickersLayout';
-export type { PickersLayoutProps, PickersLayoutSlotsComponent, PickersLayoutSlotsComponentsProps, ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps, } from './PickersLayout.types';
+export type { PickersLayoutProps, PickersLayoutSlots, PickersLayoutSlotProps, ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, } from './PickersLayout.types';
 export { default as usePickerLayout } from './usePickerLayout';
 export { pickersLayoutClasses } from './pickersLayoutClasses';
 export type { PickersLayoutClassKey } from './pickersLayoutClasses';

package/PickersSectionList/PickersSectionList.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { PickersSectionListProps } from './PickersSectionList.types';
+export declare const PickersSectionListRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PickersSectionListSection: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const PickersSectionListSectionSeparator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const PickersSectionListSectionContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
+type PickersSectionListComponent = ((props: PickersSectionListProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+    propTypes?: any;
+};
+declare const PickersSectionList: PickersSectionListComponent;
+export { PickersSectionList };

package/PickersSectionList/PickersSectionList.js

@@ -0,0 +1,223 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["slots", "slotProps", "elements", "sectionListRef"];
+import * as React from 'react';
+import styled from '@mui/system/styled';
+import PropTypes from 'prop-types';
+import { useSlotProps } from '@mui/base/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useForkRef from '@mui/utils/useForkRef';
+import { getPickersSectionListUtilityClass, pickersSectionListClasses } from './pickersSectionListClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const PickersSectionListRoot = styled('div', {
+  name: 'MuiPickersSectionList',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({
+  direction: 'ltr /*! @noflip */',
+  outline: 'none'
+});
+export const PickersSectionListSection = styled('span', {
+  name: 'MuiPickersSectionList',
+  slot: 'Section',
+  overridesResolver: (props, styles) => styles.section
+})({});
+export const PickersSectionListSectionSeparator = styled('span', {
+  name: 'MuiPickersSectionList',
+  slot: 'SectionSeparator',
+  overridesResolver: (props, styles) => styles.sectionSeparator
+})({
+  whiteSpace: 'pre'
+});
+export const PickersSectionListSectionContent = styled('span', {
+  name: 'MuiPickersSectionList',
+  slot: 'SectionContent',
+  overridesResolver: (props, styles) => styles.sectionContent
+})({
+  outline: 'none'
+});
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    section: ['section'],
+    sectionContent: ['sectionContent']
+  };
+  return composeClasses(slots, getPickersSectionListUtilityClass, classes);
+};
+/**
+ * Demos:
+ *
+ * - [Custom field](https://mui.com/x/react-date-pickers/custom-field/)
+ *
+ * API:
+ *
+ * - [PickersSectionList API](https://mui.com/x/api/date-pickers/pickers-section-list/)
+ */
+function PickersSection(props) {
+  var _slots$section, _slots$sectionContent, _slots$sectionSeparat;
+  const {
+    slots,
+    slotProps,
+    element,
+    classes
+  } = props;
+  const Section = (_slots$section = slots == null ? void 0 : slots.section) != null ? _slots$section : PickersSectionListSection;
+  const sectionProps = useSlotProps({
+    elementType: Section,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.section,
+    externalForwardedProps: element.container,
+    className: classes.section,
+    ownerState: {}
+  });
+  const SectionContent = (_slots$sectionContent = slots == null ? void 0 : slots.sectionContent) != null ? _slots$sectionContent : PickersSectionListSectionContent;
+  const sectionContentProps = useSlotProps({
+    elementType: SectionContent,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.sectionContent,
+    externalForwardedProps: element.content,
+    additionalProps: {
+      suppressContentEditableWarning: true
+    },
+    className: classes.sectionContent,
+    ownerState: {}
+  });
+  const SectionSeparator = (_slots$sectionSeparat = slots == null ? void 0 : slots.sectionSeparator) != null ? _slots$sectionSeparat : PickersSectionListSectionSeparator;
+  const sectionSeparatorBeforeProps = useSlotProps({
+    elementType: SectionSeparator,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.sectionSeparator,
+    externalForwardedProps: element.before,
+    ownerState: {
+      position: 'before'
+    }
+  });
+  const sectionSeparatorAfterProps = useSlotProps({
+    elementType: SectionSeparator,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.sectionSeparator,
+    externalForwardedProps: element.after,
+    ownerState: {
+      position: 'after'
+    }
+  });
+  return /*#__PURE__*/_jsxs(Section, _extends({}, sectionProps, {
+    children: [/*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorBeforeProps)), /*#__PURE__*/_jsx(SectionContent, _extends({}, sectionContentProps)), /*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorAfterProps))]
+  }));
+}
+const PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSectionList(props, ref) {
+  var _slots$root;
+  const {
+      slots,
+      slotProps,
+      elements,
+      sectionListRef
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const classes = useUtilityClasses(props);
+  const rootRef = React.useRef(null);
+  const handleRootRef = useForkRef(ref, rootRef);
+  const getRoot = methodName => {
+    if (!rootRef.current) {
+      throw new Error(`MUI: Cannot call sectionListRef.${methodName} before the mount of the component`);
+    }
+    return rootRef.current;
+  };
+  React.useImperativeHandle(sectionListRef, () => ({
+    getRoot() {
+      return getRoot('getRoot');
+    },
+    getSectionContainer(index) {
+      const root = getRoot('getSectionContainer');
+      return root.querySelector(`.${pickersSectionListClasses.section}[data-sectionindex="${index}"]`);
+    },
+    getSectionContent(index) {
+      const root = getRoot('getSectionContent');
+      return root.querySelector(`.${pickersSectionListClasses.section}[data-sectionindex="${index}"] .${pickersSectionListClasses.sectionContent}`);
+    },
+    getSectionIndexFromDOMElement(element) {
+      const root = getRoot('getSectionIndexFromDOMElement');
+      if (element == null || !root.contains(element)) {
+        return null;
+      }
+      let sectionContainer = null;
+      if (element.classList.contains(pickersSectionListClasses.section)) {
+        sectionContainer = element;
+      } else if (element.classList.contains(pickersSectionListClasses.sectionContent)) {
+        sectionContainer = element.parentElement;
+      }
+      if (sectionContainer == null) {
+        return null;
+      }
+      return Number(sectionContainer.dataset.sectionindex);
+    }
+  }));
+  const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : PickersSectionListRoot;
+  const rootProps = useSlotProps({
+    elementType: Root,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.root,
+    externalForwardedProps: other,
+    additionalProps: {
+      ref: handleRootRef,
+      suppressContentEditableWarning: true
+    },
+    className: classes.root,
+    ownerState: {}
+  });
+  return /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
+    children: rootProps.contentEditable ? elements.map(({
+      content,
+      before,
+      after
+    }) => `${before.children}${content.children}${after.children}`).join('') : /*#__PURE__*/_jsx(React.Fragment, {
+      children: elements.map((element, elementIndex) => /*#__PURE__*/_jsx(PickersSection, {
+        slots: slots,
+        slotProps: slotProps,
+        element: element,
+        classes: classes
+      }, elementIndex))
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? PickersSectionList.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: PropTypes.bool.isRequired,
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: PropTypes.arrayOf(PropTypes.shape({
+    after: PropTypes.object.isRequired,
+    before: PropTypes.object.isRequired,
+    container: PropTypes.object.isRequired,
+    content: PropTypes.object.isRequired
+  })).isRequired,
+  sectionListRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      getRoot: PropTypes.func.isRequired,
+      getSectionContainer: PropTypes.func.isRequired,
+      getSectionContent: PropTypes.func.isRequired,
+      getSectionIndexFromDOMElement: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * The props used for each component slot.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   */
+  slots: PropTypes.object
+} : void 0;
+export { PickersSectionList };

package/PickersSectionList/PickersSectionList.types.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/base/utils';
+import { PickersSectionListClasses } from './pickersSectionListClasses';
+export interface PickersSectionListSlots {
+    root: React.ElementType;
+    section: React.ElementType;
+    sectionSeparator: React.ElementType;
+    sectionContent: React.ElementType;
+}
+export interface PickersSectionListSlotProps {
+    root?: SlotComponentProps<'div', {}, {}>;
+    section?: SlotComponentProps<'span', {}, {}>;
+    sectionSeparator?: SlotComponentProps<'span', {}, {
+        position: 'before' | 'after';
+    }>;
+    sectionContent?: SlotComponentProps<'span', {}, {}>;
+}
+export interface PickersSectionElement {
+    container: React.HTMLAttributes<HTMLSpanElement>;
+    content: React.HTMLAttributes<HTMLSpanElement>;
+    before: React.HTMLAttributes<HTMLSpanElement>;
+    after: React.HTMLAttributes<HTMLSpanElement>;
+}
+export interface PickersSectionListRef {
+    getRoot: () => HTMLElement;
+    getSectionContainer: (sectionIndex: number) => HTMLElement;
+    getSectionContent: (sectionIndex: number) => HTMLElement;
+    getSectionIndexFromDOMElement: (element: Element | null | undefined) => number | null;
+}
+export interface ExportedPickersSectionListProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {
+    /**
+     * The elements to render.
+     * Each element contains the prop to edit a section of the value.
+     */
+    elements: PickersSectionElement[];
+    sectionListRef: React.Ref<PickersSectionListRef>;
+    /**
+     * If true, the whole element is editable.
+     * Useful when all the sections are selected.
+     */
+    contentEditable: boolean;
+}
+export interface PickersSectionListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'contentEditable'>, ExportedPickersSectionListProps {
+    /**
+     * Overridable component slots.
+     */
+    slots?: PickersSectionListSlots;
+    /**
+     * The props used for each component slot.
+     */
+    slotProps?: PickersSectionListSlotProps;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<PickersSectionListClasses>;
+}

package/PickersSectionList/index.d.ts

@@ -0,0 +1,4 @@
+export { PickersSectionList as Unstable_PickersSectionList, PickersSectionListRoot as Unstable_PickersSectionListRoot, PickersSectionListSection as Unstable_PickersSectionListSection, PickersSectionListSectionSeparator as Unstable_PickersSectionListSectionSeparator, PickersSectionListSectionContent as Unstable_PickersSectionListSectionContent, } from './PickersSectionList';
+export type { PickersSectionListProps, PickersSectionElement, PickersSectionListRef, PickersSectionListSlots, PickersSectionListSlotProps, ExportedPickersSectionListProps, } from './PickersSectionList.types';
+export { getPickersSectionListUtilityClass, pickersSectionListClasses, } from './pickersSectionListClasses';
+export type { PickersSectionListClasses, PickersSectionListClassKey, } from './pickersSectionListClasses';

package/PickersSectionList/index.js

@@ -0,0 +1,2 @@
+export { PickersSectionList as Unstable_PickersSectionList, PickersSectionListRoot as Unstable_PickersSectionListRoot, PickersSectionListSection as Unstable_PickersSectionListSection, PickersSectionListSectionSeparator as Unstable_PickersSectionListSectionSeparator, PickersSectionListSectionContent as Unstable_PickersSectionListSectionContent } from './PickersSectionList';
+export { getPickersSectionListUtilityClass, pickersSectionListClasses } from './pickersSectionListClasses';

package/PickersSectionList/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/PickersSectionList/index.js",
+  "types": "./index.d.ts"
+}

package/PickersSectionList/pickersSectionListClasses.d.ts

@@ -0,0 +1,11 @@
+export interface PickersSectionListClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the container of a section. */
+    section: string;
+    /** Styles applied to the content of a section. */
+    sectionContent: string;
+}
+export type PickersSectionListClassKey = keyof PickersSectionListClasses;
+export declare function getPickersSectionListUtilityClass(slot: string): string;
+export declare const pickersSectionListClasses: Record<keyof PickersSectionListClasses, string>;

package/PickersSectionList/pickersSectionListClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getPickersSectionListUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersSectionList', slot);
+}
+export const pickersSectionListClasses = generateUtilityClasses('MuiPickersSectionList', ['root', 'section', 'sectionContent']);

package/StaticDatePicker/StaticDatePicker.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { useStaticPicker } from '../internals/hooks/useStaticPicker';
-import { validateDate } from '../internals';
+import { validateDate } from '../internals/utils/validation/validateDate';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 /**
  * Demos: