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

package/legacy/DateField/DateField.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["slots", "slotProps", "InputProps", "inputProps"],
-  _excluded2 = ["inputRef"],
-  _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly", "clearable", "onClear"];
+var _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
@@ -11,6 +9,7 @@ import { useSlotProps } from '@mui/base/utils';
 import { refType } from '@mui/utils';
 import { useDateField } from './useDateField';
 import { useClearableField } from '../hooks';
+import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -22,7 +21,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * - [DateField API](https://mui.com/x/api/date-pickers/date-field/)
  */
-var DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref) {
+var DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, inRef) {
   var _slots$textField;
   var themeProps = useThemeProps({
     props: inProps,
@@ -35,53 +34,26 @@ var DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref) {
     other = _objectWithoutProperties(themeProps, _excluded);
   var ownerState = themeProps;
   var TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : MuiTextField;
-  var _useSlotProps = useSlotProps({
-      elementType: TextField,
-      externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
-      externalForwardedProps: other,
-      ownerState: ownerState
-    }),
-    externalInputRef = _useSlotProps.inputRef,
-    textFieldProps = _objectWithoutProperties(_useSlotProps, _excluded2);
+  var textFieldProps = useSlotProps({
+    elementType: TextField,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalForwardedProps: other,
+    additionalProps: {
+      ref: inRef
+    },
+    ownerState: ownerState
+  });
 
   // TODO: Remove when mui/material-ui#35088 will be merged
   textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
   textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
-  var _useDateField = useDateField({
-      props: textFieldProps,
-      inputRef: externalInputRef
-    }),
-    inputRef = _useDateField.ref,
-    onPaste = _useDateField.onPaste,
-    onKeyDown = _useDateField.onKeyDown,
-    inputMode = _useDateField.inputMode,
-    readOnly = _useDateField.readOnly,
-    clearable = _useDateField.clearable,
-    onClear = _useDateField.onClear,
-    fieldProps = _objectWithoutProperties(_useDateField, _excluded3);
-  var _useClearableField = useClearableField({
-      onClear: onClear,
-      clearable: clearable,
-      fieldProps: fieldProps,
-      InputProps: fieldProps.InputProps,
-      slots: slots,
-      slotProps: slotProps
-    }),
-    ProcessedInputProps = _useClearableField.InputProps,
-    processedFieldProps = _useClearableField.fieldProps;
-  return /*#__PURE__*/_jsx(TextField, _extends({
-    ref: ref
-  }, processedFieldProps, {
-    InputProps: _extends({}, ProcessedInputProps, {
-      readOnly: readOnly
-    }),
-    inputProps: _extends({}, fieldProps.inputProps, {
-      inputMode: inputMode,
-      onPaste: onPaste,
-      onKeyDown: onKeyDown,
-      ref: inputRef
-    })
+  var fieldResponse = useDateField(textFieldProps);
+  var convertedFieldResponse = convertFieldResponseIntoMuiTextFieldProps(fieldResponse);
+  var processedFieldProps = useClearableField(_extends({}, convertedFieldResponse, {
+    slots: slots,
+    slotProps: slotProps
   }));
+  return /*#__PURE__*/_jsx(TextField, _extends({}, processedFieldProps));
 });
 process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -259,7 +231,7 @@ process.env.NODE_ENV !== "production" ? DateField.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/legacy/DateField/useDateField.js

@@ -17,15 +17,12 @@ var useDefaultizedDateField = function useDefaultizedDateField(props) {
     maxDate: applyDefaultDate(utils, props.maxDate, defaultDates.maxDate)
   });
 };
-export var useDateField = function useDateField(_ref) {
-  var inProps = _ref.props,
-    inputRef = _ref.inputRef;
+export var useDateField = function useDateField(inProps) {
   var props = useDefaultizedDateField(inProps);
   var _splitFieldInternalAn = splitFieldInternalAndForwardedProps(props, 'date'),
     forwardedProps = _splitFieldInternalAn.forwardedProps,
     internalProps = _splitFieldInternalAn.internalProps;
   return useField({
-    inputRef: inputRef,
     forwardedProps: forwardedProps,
     internalProps: internalProps,
     valueManager: singleItemValueManager,

package/legacy/DatePicker/DatePicker.js

@@ -159,6 +159,10 @@ process.env.NODE_ENV !== "production" ? DatePicker.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.
@@ -257,7 +261,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.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/legacy/DateTimeField/DateTimeField.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["slots", "slotProps", "InputProps", "inputProps"],
-  _excluded2 = ["inputRef"],
-  _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly", "clearable", "onClear"];
+var _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
@@ -11,6 +9,7 @@ import { useSlotProps } from '@mui/base/utils';
 import { refType } from '@mui/utils';
 import { useDateTimeField } from './useDateTimeField';
 import { useClearableField } from '../hooks';
+import { convertFieldResponseIntoMuiTextFieldProps } from '../internals/utils/convertFieldResponseIntoMuiTextFieldProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -22,7 +21,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * - [DateTimeField API](https://mui.com/x/api/date-pickers/date-time-field/)
  */
-var DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps, ref) {
+var DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps, inRef) {
   var _slots$textField;
   var themeProps = useThemeProps({
     props: inProps,
@@ -35,53 +34,26 @@ var DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps
     other = _objectWithoutProperties(themeProps, _excluded);
   var ownerState = themeProps;
   var TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : MuiTextField;
-  var _useSlotProps = useSlotProps({
-      elementType: TextField,
-      externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
-      externalForwardedProps: other,
-      ownerState: ownerState
-    }),
-    externalInputRef = _useSlotProps.inputRef,
-    textFieldProps = _objectWithoutProperties(_useSlotProps, _excluded2);
+  var textFieldProps = useSlotProps({
+    elementType: TextField,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalForwardedProps: other,
+    ownerState: ownerState,
+    additionalProps: {
+      ref: inRef
+    }
+  });
 
   // TODO: Remove when mui/material-ui#35088 will be merged
   textFieldProps.inputProps = _extends({}, inputProps, textFieldProps.inputProps);
   textFieldProps.InputProps = _extends({}, InputProps, textFieldProps.InputProps);
-  var _useDateTimeField = useDateTimeField({
-      props: textFieldProps,
-      inputRef: externalInputRef
-    }),
-    inputRef = _useDateTimeField.ref,
-    onPaste = _useDateTimeField.onPaste,
-    onKeyDown = _useDateTimeField.onKeyDown,
-    inputMode = _useDateTimeField.inputMode,
-    readOnly = _useDateTimeField.readOnly,
-    clearable = _useDateTimeField.clearable,
-    onClear = _useDateTimeField.onClear,
-    fieldProps = _objectWithoutProperties(_useDateTimeField, _excluded3);
-  var _useClearableField = useClearableField({
-      onClear: onClear,
-      clearable: clearable,
-      fieldProps: fieldProps,
-      InputProps: fieldProps.InputProps,
-      slots: slots,
-      slotProps: slotProps
-    }),
-    ProcessedInputProps = _useClearableField.InputProps,
-    processedFieldProps = _useClearableField.fieldProps;
-  return /*#__PURE__*/_jsx(TextField, _extends({
-    ref: ref
-  }, processedFieldProps, {
-    InputProps: _extends({}, ProcessedInputProps, {
-      readOnly: readOnly
-    }),
-    inputProps: _extends({}, fieldProps.inputProps, {
-      inputMode: inputMode,
-      onPaste: onPaste,
-      onKeyDown: onKeyDown,
-      ref: inputRef
-    })
+  var fieldResponse = useDateTimeField(textFieldProps);
+  var convertedFieldResponse = convertFieldResponseIntoMuiTextFieldProps(fieldResponse);
+  var processedFieldProps = useClearableField(_extends({}, convertedFieldResponse, {
+    slots: slots,
+    slotProps: slotProps
   }));
+  return /*#__PURE__*/_jsx(TextField, _extends({}, processedFieldProps));
 });
 process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -292,7 +264,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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/legacy/DateTimeField/useDateTimeField.js

@@ -22,15 +22,12 @@ var useDefaultizedDateTimeField = function useDefaultizedDateTimeField(props) {
     maxTime: (_props$maxDateTime2 = props.maxDateTime) != null ? _props$maxDateTime2 : props.maxTime
   });
 };
-export var useDateTimeField = function useDateTimeField(_ref) {
-  var inProps = _ref.props,
-    inputRef = _ref.inputRef;
+export var useDateTimeField = function useDateTimeField(inProps) {
   var props = useDefaultizedDateTimeField(inProps);
   var _splitFieldInternalAn = splitFieldInternalAndForwardedProps(props, 'date-time'),
     forwardedProps = _splitFieldInternalAn.forwardedProps,
     internalProps = _splitFieldInternalAn.internalProps;
   return useField({
-    inputRef: inputRef,
     forwardedProps: forwardedProps,
     internalProps: internalProps,
     valueManager: singleItemValueManager,

package/legacy/DateTimePicker/DateTimePicker.js

@@ -197,6 +197,10 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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.
@@ -295,7 +299,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -5,7 +5,8 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { refType } from '@mui/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
-import { useLocaleText, useUtils, validateDate } from '../internals';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { validateDate } from '../internals/utils/validation/validateDate';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { CalendarIcon } from '../icons';
 import { DateField } from '../DateField';
@@ -177,6 +178,10 @@ DesktopDatePicker.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.
@@ -275,7 +280,7 @@ DesktopDatePicker.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/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -253,6 +253,10 @@ DesktopDateTimePicker.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.
@@ -351,7 +355,7 @@ DesktopDateTimePicker.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/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -189,6 +189,10 @@ DesktopTimePicker.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.
@@ -269,7 +273,7 @@ DesktopTimePicker.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/legacy/MobileDatePicker/MobileDatePicker.js

@@ -5,7 +5,8 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { refType } from '@mui/utils';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
-import { useLocaleText, useUtils, validateDate } from '../internals';
+import { useUtils, useLocaleText } from '../internals/hooks/useUtils';
+import { validateDate } from '../internals/utils/validation/validateDate';
 import { DateField } from '../DateField';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
@@ -174,6 +175,10 @@ MobileDatePicker.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.
@@ -272,7 +277,7 @@ MobileDatePicker.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/legacy/MobileDateTimePicker/MobileDateTimePicker.js

@@ -223,6 +223,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.
@@ -321,7 +325,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/legacy/MobileTimePicker/MobileTimePicker.js

@@ -167,6 +167,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.
@@ -247,7 +251,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/legacy/PickersSectionList/PickersSectionList.js

@@ -0,0 +1,230 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _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 var PickersSectionListRoot = styled('div', {
+  name: 'MuiPickersSectionList',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.root;
+  }
+})({
+  direction: 'ltr /*! @noflip */',
+  outline: 'none'
+});
+export var PickersSectionListSection = styled('span', {
+  name: 'MuiPickersSectionList',
+  slot: 'Section',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.section;
+  }
+})({});
+export var PickersSectionListSectionSeparator = styled('span', {
+  name: 'MuiPickersSectionList',
+  slot: 'SectionSeparator',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.sectionSeparator;
+  }
+})({
+  whiteSpace: 'pre'
+});
+export var PickersSectionListSectionContent = styled('span', {
+  name: 'MuiPickersSectionList',
+  slot: 'SectionContent',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.sectionContent;
+  }
+})({
+  outline: 'none'
+});
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var 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;
+  var slots = props.slots,
+    slotProps = props.slotProps,
+    element = props.element,
+    classes = props.classes;
+  var Section = (_slots$section = slots == null ? void 0 : slots.section) != null ? _slots$section : PickersSectionListSection;
+  var sectionProps = useSlotProps({
+    elementType: Section,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.section,
+    externalForwardedProps: element.container,
+    className: classes.section,
+    ownerState: {}
+  });
+  var SectionContent = (_slots$sectionContent = slots == null ? void 0 : slots.sectionContent) != null ? _slots$sectionContent : PickersSectionListSectionContent;
+  var sectionContentProps = useSlotProps({
+    elementType: SectionContent,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.sectionContent,
+    externalForwardedProps: element.content,
+    additionalProps: {
+      suppressContentEditableWarning: true
+    },
+    className: classes.sectionContent,
+    ownerState: {}
+  });
+  var SectionSeparator = (_slots$sectionSeparat = slots == null ? void 0 : slots.sectionSeparator) != null ? _slots$sectionSeparat : PickersSectionListSectionSeparator;
+  var sectionSeparatorBeforeProps = useSlotProps({
+    elementType: SectionSeparator,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.sectionSeparator,
+    externalForwardedProps: element.before,
+    ownerState: {
+      position: 'before'
+    }
+  });
+  var 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))]
+  }));
+}
+var PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSectionList(props, ref) {
+  var _slots$root;
+  var slots = props.slots,
+    slotProps = props.slotProps,
+    elements = props.elements,
+    sectionListRef = props.sectionListRef,
+    other = _objectWithoutProperties(props, _excluded);
+  var classes = useUtilityClasses(props);
+  var rootRef = React.useRef(null);
+  var handleRootRef = useForkRef(ref, rootRef);
+  var _getRoot = function getRoot(methodName) {
+    if (!rootRef.current) {
+      throw new Error("MUI: Cannot call sectionListRef.".concat(methodName, " before the mount of the component"));
+    }
+    return rootRef.current;
+  };
+  React.useImperativeHandle(sectionListRef, function () {
+    return {
+      getRoot: function getRoot() {
+        return _getRoot('getRoot');
+      },
+      getSectionContainer: function getSectionContainer(index) {
+        var root = _getRoot('getSectionContainer');
+        return root.querySelector(".".concat(pickersSectionListClasses.section, "[data-sectionindex=\"").concat(index, "\"]"));
+      },
+      getSectionContent: function getSectionContent(index) {
+        var root = _getRoot('getSectionContent');
+        return root.querySelector(".".concat(pickersSectionListClasses.section, "[data-sectionindex=\"").concat(index, "\"] .").concat(pickersSectionListClasses.sectionContent));
+      },
+      getSectionIndexFromDOMElement: function getSectionIndexFromDOMElement(element) {
+        var root = _getRoot('getSectionIndexFromDOMElement');
+        if (element == null || !root.contains(element)) {
+          return null;
+        }
+        var 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);
+      }
+    };
+  });
+  var Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : PickersSectionListRoot;
+  var 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(function (_ref) {
+      var content = _ref.content,
+        before = _ref.before,
+        after = _ref.after;
+      return "".concat(before.children).concat(content.children).concat(after.children);
+    }).join('') : /*#__PURE__*/_jsx(React.Fragment, {
+      children: elements.map(function (element, elementIndex) {
+        return /*#__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 };