@mui/x-date-pickers 9.0.0-alpha.1 → 9.0.0-alpha.2

package/esm/PickersLayout/PickersLayout.js

@@ -1,170 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { styled, useThemeProps } from '@mui/material/styles';
-import composeClasses from '@mui/utils/composeClasses';
-import { pickersLayoutClasses, getPickersLayoutUtilityClass } from "./pickersLayoutClasses.js";
-import usePickerLayout from "./usePickerLayout.js";
-import { usePickerContext } from "../hooks/usePickerContext.js";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = (classes, ownerState) => {
-  const {
-    pickerOrientation
-  } = ownerState;
-  const slots = {
-    root: ['root', pickerOrientation === 'landscape' && 'landscape'],
-    contentWrapper: ['contentWrapper']
-  };
-  return composeClasses(slots, getPickersLayoutUtilityClass, classes);
-};
-export const PickersLayoutRoot = styled('div', {
-  name: 'MuiPickersLayout',
-  slot: 'Root'
-})({
-  display: 'grid',
-  gridAutoColumns: 'max-content auto max-content',
-  gridAutoRows: 'max-content auto max-content',
-  [`& .${pickersLayoutClasses.actionBar}`]: {
-    gridColumn: '1 / 4',
-    gridRow: 3
-  },
-  variants: [{
-    props: {
-      pickerOrientation: 'landscape',
-      hasShortcuts: false
-    },
-    style: {
-      [`& .${pickersLayoutClasses.toolbar}`]: {
-        gridColumn: 1,
-        gridRow: '1 / 3'
-      }
-    }
-  }, {
-    props: {
-      pickerOrientation: 'landscape',
-      hasShortcuts: true
-    },
-    style: {
-      [`& .${pickersLayoutClasses.toolbar}`]: {
-        gridColumn: '2 / 4',
-        gridRow: 1,
-        maxWidth: 'max-content'
-      },
-      [`& .${pickersLayoutClasses.shortcuts}`]: {
-        gridColumn: 1,
-        gridRow: 2
-      }
-    }
-  }, {
-    props: {
-      pickerOrientation: 'portrait'
-    },
-    style: {
-      [`& .${pickersLayoutClasses.toolbar}`]: {
-        gridColumn: '2 / 4',
-        gridRow: 1
-      },
-      [`& .${pickersLayoutClasses.shortcuts}`]: {
-        gridColumn: 1,
-        gridRow: '2 / 3'
-      }
-    }
-  }, {
-    props: {
-      hasShortcuts: true,
-      layoutDirection: 'rtl'
-    },
-    style: {
-      [`& .${pickersLayoutClasses.shortcuts}`]: {
-        gridColumn: 4
-      }
-    }
-  }]
-});
-export const PickersLayoutContentWrapper = styled('div', {
-  name: 'MuiPickersLayout',
-  slot: 'ContentWrapper'
-})({
-  gridColumn: '2 / 4',
-  gridRow: 2,
-  display: 'flex',
-  flexDirection: 'column'
-});
-/**
- * Demos:
- *
- * - [Custom layout](https://mui.com/x/react-date-pickers/custom-layout/)
- *
- * API:
- *
- * - [PickersLayout API](https://mui.com/x/api/date-pickers/pickers-layout/)
- */
-const PickersLayout = /*#__PURE__*/React.forwardRef(function PickersLayout(inProps, ref) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiPickersLayout'
-  });
-  const {
-    toolbar,
-    content,
-    tabs,
-    actionBar,
-    shortcuts,
-    ownerState
-  } = usePickerLayout(props);
-  const {
-    orientation,
-    variant
-  } = usePickerContext();
-  const {
-    sx,
-    className,
-    classes: classesProp
-  } = props;
-  const classes = useUtilityClasses(classesProp, ownerState);
-  return /*#__PURE__*/_jsxs(PickersLayoutRoot, {
-    ref: ref,
-    sx: sx,
-    className: clsx(classes.root, className),
-    ownerState: ownerState,
-    children: [orientation === 'landscape' ? shortcuts : toolbar, orientation === 'landscape' ? toolbar : shortcuts, /*#__PURE__*/_jsx(PickersLayoutContentWrapper, {
-      className: classes.contentWrapper,
-      ownerState: ownerState,
-      children: variant === 'desktop' ? /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [content, tabs]
-      }) : /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [tabs, content]
-      })
-    }), actionBar]
-  });
-});
-if (process.env.NODE_ENV !== "production") PickersLayout.displayName = "PickersLayout";
-process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  className: PropTypes.string,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { PickersLayout };

package/esm/PickersLayout/PickersLayout.types.d.ts

@@ -1,105 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-import { SlotComponentProps } from '@mui/utils/types';
-import { PickersActionBar, PickersActionBarProps } from "../PickersActionBar/index.js";
-import { BaseToolbarProps, ExportedBaseToolbarProps } from "../internals/models/props/toolbar.js";
-import { ExportedBaseTabsProps } from "../internals/models/props/tabs.js";
-import { PickersLayoutClasses } from "./pickersLayoutClasses.js";
-import { PickersShortcutsProps } from "../PickersShortcuts/index.js";
-import { ExportedPickersShortcutProps, PickersShortcuts } from "../PickersShortcuts/PickersShortcuts.js";
-import { PickerOwnerState } from "../models/index.js";
-import { PickerValidValue } from "../internals/models/index.js";
-export interface ExportedPickersLayoutSlots<TValue extends PickerValidValue> {
-  /**
-   * Custom component for the action bar, it is placed below the Picker views.
-   * @default PickersActionBar
-   */
-  actionBar?: React.ElementType<PickersActionBarProps>;
-  /**
-   * Custom component for the shortcuts.
-   * @default PickersShortcuts
-   */
-  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<TValue>>;
-  /**
-   * Custom component for wrapping the layout.
-   * It wraps the toolbar, views, action bar, and shortcuts.
-   */
-  layout?: React.JSXElementConstructor<PickersLayoutProps<TValue> & React.RefAttributes<HTMLDivElement>>;
-}
-export interface PickerLayoutOwnerState extends PickerOwnerState {
-  /**
-   * The direction of the layout.
-   * Is equal to "ltr" when the layout is in left-to-right direction.
-   * Is equal to "rtl" when the layout is in right-to-left direction.
-   */
-  layoutDirection: 'ltr' | 'rtl';
-  /**
-   * Whether the layout should display the shortcuts panel or not.
-   * This flag is used to adjust the layout accordingly.
-   */
-  hasShortcuts: boolean;
-}
-export interface ExportedPickersLayoutSlotProps<TValue extends PickerValidValue> {
-  /**
-   * Props passed down to the action bar component.
-   */
-  actionBar?: SlotComponentProps<typeof PickersActionBar, {}, PickerLayoutOwnerState>;
-  /**
-   * Props passed down to the shortcuts component.
-   */
-  shortcuts?: SlotComponentProps<typeof PickersShortcuts, {}, PickerLayoutOwnerState>;
-  /**
-   * Props passed down to the layoutRoot component.
-   */
-  layout?: Partial<PickersLayoutProps<TValue>>;
-}
-export interface PickersLayoutSlots<TValue extends PickerValidValue> extends ExportedPickersLayoutSlots<TValue> {
-  /**
-   * Tabs enabling toggling between views.
-   */
-  tabs?: React.ElementType<{}>;
-  /**
-   * Custom component for the toolbar.
-   * It is placed above the Picker views.
-   */
-  toolbar?: React.JSXElementConstructor<BaseToolbarProps>;
-}
-export interface PickersLayoutSlotProps<TValue extends PickerValidValue> extends ExportedPickersLayoutSlotProps<TValue> {
-  /**
-   * Props passed down to the tabs component.
-   */
-  tabs?: ExportedBaseTabsProps;
-  /**
-   * Props passed down to the toolbar component.
-   */
-  toolbar?: ExportedBaseToolbarProps;
-}
-export interface PickersLayoutProps<TValue extends PickerValidValue> {
-  className?: string;
-  children?: React.ReactNode;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme>;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<PickersLayoutClasses>;
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots?: PickersLayoutSlots<TValue>;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps?: PickersLayoutSlotProps<TValue>;
-}
-export interface SubComponents<TValue extends PickerValidValue> {
-  toolbar: React.ReactElement<ExportedBaseToolbarProps> | null;
-  content: React.ReactNode;
-  tabs: React.ReactElement<ExportedBaseTabsProps> | null;
-  actionBar: React.ReactElement<PickersActionBarProps>;
-  shortcuts: React.ReactElement<ExportedPickersShortcutProps<TValue>> | null;
-}

package/esm/PickersLayout/index.d.ts

@@ -1,5 +0,0 @@
-export { PickersLayout, PickersLayoutRoot, PickersLayoutContentWrapper } from "./PickersLayout.js";
-export type { PickersLayoutProps, PickersLayoutSlots, PickersLayoutSlotProps, ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickerLayoutOwnerState } from "./PickersLayout.types.js";
-export { default as usePickerLayout } from "./usePickerLayout.js";
-export { pickersLayoutClasses } from "./pickersLayoutClasses.js";
-export type { PickersLayoutClassKey } from "./pickersLayoutClasses.js";

package/esm/PickersLayout/index.js

@@ -1,3 +0,0 @@
-export { PickersLayout, PickersLayoutRoot, PickersLayoutContentWrapper } from "./PickersLayout.js";
-export { default as usePickerLayout } from "./usePickerLayout.js";
-export { pickersLayoutClasses } from "./pickersLayoutClasses.js";

package/esm/PickersLayout/usePickerLayout.d.ts

@@ -1,7 +0,0 @@
-import { PickerLayoutOwnerState, PickersLayoutProps, SubComponents } from "./PickersLayout.types.js";
-import { PickerValidValue } from "../internals/models/index.js";
-interface UsePickerLayoutResponse<TValue extends PickerValidValue> extends SubComponents<TValue> {
-  ownerState: PickerLayoutOwnerState;
-}
-declare const usePickerLayout: <TValue extends PickerValidValue>(props: PickersLayoutProps<TValue>) => UsePickerLayoutResponse<TValue>;
-export default usePickerLayout;

package/esm/PickersLayout/usePickerLayout.js

@@ -1,109 +0,0 @@
-'use client';
-
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["ownerState"];
-import * as React from 'react';
-import useSlotProps from '@mui/utils/useSlotProps';
-import composeClasses from '@mui/utils/composeClasses';
-import { useRtl } from '@mui/system/RtlProvider';
-import { PickersActionBar } from "../PickersActionBar/index.js";
-import { getPickersLayoutUtilityClass } from "./pickersLayoutClasses.js";
-import { PickersShortcuts } from "../PickersShortcuts/index.js";
-import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
-import { usePickerContext } from "../hooks/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function toolbarHasView(toolbarProps) {
-  return toolbarProps.view !== null;
-}
-const useUtilityClasses = (classes, ownerState) => {
-  const {
-    pickerOrientation
-  } = ownerState;
-  const slots = {
-    root: ['root', pickerOrientation === 'landscape' && 'landscape'],
-    contentWrapper: ['contentWrapper'],
-    toolbar: ['toolbar'],
-    actionBar: ['actionBar'],
-    tabs: ['tabs'],
-    landscape: ['landscape'],
-    shortcuts: ['shortcuts']
-  };
-  return composeClasses(slots, getPickersLayoutUtilityClass, classes);
-};
-const usePickerLayout = props => {
-  const {
-    ownerState: pickerOwnerState,
-    defaultActionBarActions
-  } = usePickerPrivateContext();
-  const {
-    view
-  } = usePickerContext();
-  const isRtl = useRtl();
-  const {
-    children,
-    slots,
-    slotProps,
-    classes: classesProp
-  } = props;
-  const ownerState = React.useMemo(() => _extends({}, pickerOwnerState, {
-    layoutDirection: isRtl ? 'rtl' : 'ltr',
-    hasShortcuts: false
-  }), [pickerOwnerState, isRtl]);
-  const classes = useUtilityClasses(classesProp, ownerState);
-
-  // Action bar
-  const ActionBar = slots?.actionBar ?? PickersActionBar;
-  const _useSlotProps = useSlotProps({
-      elementType: ActionBar,
-      externalSlotProps: slotProps?.actionBar,
-      additionalProps: {
-        actions: defaultActionBarActions
-      },
-      className: classes.actionBar,
-      ownerState
-    }),
-    actionBarProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
-  const actionBar = /*#__PURE__*/_jsx(ActionBar, _extends({}, actionBarProps));
-
-  // Toolbar
-  const Toolbar = slots?.toolbar;
-  const toolbarProps = useSlotProps({
-    elementType: Toolbar,
-    externalSlotProps: slotProps?.toolbar,
-    className: classes.toolbar,
-    ownerState
-  });
-  const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, toolbarProps)) : null;
-
-  // Content
-  const content = children;
-
-  // Tabs
-  const Tabs = slots?.tabs;
-  const tabs = view && Tabs ? /*#__PURE__*/_jsx(Tabs, _extends({
-    className: classes.tabs
-  }, slotProps?.tabs)) : null;
-
-  // Shortcuts
-  const Shortcuts = slots?.shortcuts ?? PickersShortcuts;
-  const shortcutsProps = useSlotProps({
-    elementType: Shortcuts,
-    externalSlotProps: slotProps?.shortcuts,
-    className: classes.shortcuts,
-    ownerState
-  });
-  const hasShortcuts = Array.isArray(shortcutsProps?.items) && shortcutsProps.items.length > 0;
-  const shortcuts = view && !!Shortcuts ? /*#__PURE__*/_jsx(Shortcuts, _extends({}, shortcutsProps)) : null;
-  return {
-    toolbar,
-    content,
-    tabs,
-    actionBar,
-    shortcuts,
-    ownerState: _extends({}, ownerState, {
-      hasShortcuts
-    })
-  };
-};
-export default usePickerLayout;

package/esm/PickersSectionList/PickersSectionList.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import type { PickersSectionListProps } from "./PickersSectionList.types.js";
-export declare const PickersSectionListRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement>>, {}>;
-export declare const PickersSectionListSection: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").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/material/styles").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/material/styles").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;
-};
-/**
- * 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/)
- */
-declare const PickersSectionList: PickersSectionListComponent;
-export { PickersSectionList };

package/esm/PickersSectionList/PickersSectionList.js

@@ -1,267 +0,0 @@
-'use client';
-
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "elements", "sectionListRef", "classes"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import useSlotProps from '@mui/utils/useSlotProps';
-import composeClasses from '@mui/utils/composeClasses';
-import useForkRef from '@mui/utils/useForkRef';
-import { styled, useThemeProps } from '@mui/material/styles';
-import { getPickersSectionListUtilityClass, pickersSectionListClasses } from "./pickersSectionListClasses.js";
-import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PickersSectionListRoot = styled('div', {
-  name: 'MuiPickersSectionList',
-  slot: 'Root'
-})({
-  direction: 'ltr /*! @noflip */',
-  outline: 'none'
-});
-export const PickersSectionListSection = styled('span', {
-  name: 'MuiPickersSectionList',
-  slot: 'Section'
-})({});
-export const PickersSectionListSectionSeparator = styled('span', {
-  name: 'MuiPickersSectionList',
-  slot: 'SectionSeparator'
-})({
-  whiteSpace: 'pre'
-});
-export const PickersSectionListSectionContent = styled('span', {
-  name: 'MuiPickersSectionList',
-  slot: 'SectionContent'
-})({
-  outline: 'none'
-});
-const useUtilityClasses = classes => {
-  const slots = {
-    root: ['root'],
-    section: ['section'],
-    sectionContent: ['sectionContent']
-  };
-  return composeClasses(slots, getPickersSectionListUtilityClass, classes);
-};
-function PickersSection(props) {
-  const {
-    slots,
-    slotProps,
-    element,
-    classes
-  } = props;
-  const {
-    ownerState
-  } = usePickerPrivateContext();
-  const Section = slots?.section ?? PickersSectionListSection;
-  const sectionProps = useSlotProps({
-    elementType: Section,
-    externalSlotProps: slotProps?.section,
-    externalForwardedProps: element.container,
-    className: classes.section,
-    ownerState
-  });
-  const SectionContent = slots?.sectionContent ?? PickersSectionListSectionContent;
-  const sectionContentProps = useSlotProps({
-    elementType: SectionContent,
-    externalSlotProps: slotProps?.sectionContent,
-    externalForwardedProps: element.content,
-    additionalProps: {
-      suppressContentEditableWarning: true
-    },
-    className: classes.sectionContent,
-    ownerState
-  });
-  const SectionSeparator = slots?.sectionSeparator ?? PickersSectionListSectionSeparator;
-  const sectionSeparatorBeforeProps = useSlotProps({
-    elementType: SectionSeparator,
-    externalSlotProps: slotProps?.sectionSeparator,
-    externalForwardedProps: element.before,
-    ownerState: _extends({}, ownerState, {
-      separatorPosition: 'before'
-    })
-  });
-  const sectionSeparatorAfterProps = useSlotProps({
-    elementType: SectionSeparator,
-    externalSlotProps: slotProps?.sectionSeparator,
-    externalForwardedProps: element.after,
-    ownerState: _extends({}, ownerState, {
-      separatorPosition: 'after'
-    })
-  });
-
-  // Only propagate blur when focus leaves the SectionContent entirely.
-  const sectionContentRef = React.useRef(null);
-  const handleSectionContentRef = useForkRef(sectionContentProps.ref, sectionContentRef);
-  const handleContentBlur = event => {
-    const next = event.relatedTarget;
-    // If the next focused element stays within the whole field (root),
-    // do not propagate blur. We only want blur when leaving the field entirely.
-    const root = event.currentTarget.closest(`.${pickersSectionListClasses.root}`);
-    if (root && next instanceof Node && root.contains(next)) {
-      event.stopPropagation();
-      return;
-    }
-    // Otherwise, focus left the whole field; allow propagation.
-  };
-  return /*#__PURE__*/_jsxs(Section, _extends({}, sectionProps, {
-    children: [/*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorBeforeProps)), /*#__PURE__*/_jsx(SectionContent, _extends({}, sectionContentProps, {
-      ref: handleSectionContentRef,
-      onBlur: handleContentBlur
-    })), /*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorAfterProps))]
-  }));
-}
-process.env.NODE_ENV !== "production" ? PickersSection.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  classes: PropTypes.object.isRequired,
-  element: PropTypes.shape({
-    after: PropTypes.object.isRequired,
-    before: PropTypes.object.isRequired,
-    container: PropTypes.object.isRequired,
-    content: PropTypes.object.isRequired
-  }).isRequired,
-  /**
-   * The props used for each component slot.
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   */
-  slots: PropTypes.object
-} : void 0;
-/**
- * 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/)
- */
-const PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSectionList(inProps, ref) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiPickersSectionList'
-  });
-  const {
-      slots,
-      slotProps,
-      elements,
-      sectionListRef,
-      classes: classesProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(classesProp);
-  const {
-    ownerState
-  } = usePickerPrivateContext();
-  const rootRef = React.useRef(null);
-  const handleRootRef = useForkRef(ref, rootRef);
-  const getRoot = methodName => {
-    if (!rootRef.current) {
-      throw new Error(`MUI X: 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 ?? PickersSectionListRoot;
-  const rootProps = useSlotProps({
-    elementType: Root,
-    externalSlotProps: 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))
-    })
-  }));
-});
-if (process.env.NODE_ENV !== "production") PickersSectionList.displayName = "PickersSectionList";
-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 "pnpm 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 };