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

package/modern/MonthCalendar/MonthCalendar.js

@@ -110,7 +110,6 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     granularity: SECTION_TYPE_GRANULARITY.month
   }), [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const todayMonth = React.useMemo(() => utils.getMonth(now), [utils, now]);

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -249,6 +249,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
             },
             items: getTimeSectionOptions({
               value: utils.getMinutes(valueOrReferenceDate),
+              utils,
               isDisabled: minutes => disabled || isTimeDisabled(minutes, 'minutes'),
               resolveLabel: minutes => utils.format(utils.setMinutes(now, minutes), 'minutes'),
               timeStep: timeSteps.minutes,
@@ -265,6 +266,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
             },
             items: getTimeSectionOptions({
               value: utils.getSeconds(valueOrReferenceDate),
+              utils,
               isDisabled: seconds => disabled || isTimeDisabled(seconds, 'seconds'),
               resolveLabel: seconds => utils.format(utils.setSeconds(now, seconds), 'seconds'),
               timeStep: timeSteps.seconds,

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js

@@ -44,6 +44,7 @@ export const getHourSectionOptions = ({
 };
 export const getTimeSectionOptions = ({
   value,
+  utils,
   isDisabled,
   timeStep,
   resolveLabel,
@@ -65,7 +66,7 @@ export const getTimeSectionOptions = ({
     const timeValue = timeStep * index;
     return {
       value: timeValue,
-      label: resolveLabel(timeValue),
+      label: utils.formatNumber(resolveLabel(timeValue)),
       isDisabled,
       isSelected,
       isFocused,

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -36,7 +36,12 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   '@media (prefers-reduced-motion: no-preference)': {
     scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
   },
-  '&:hover': {
+  '@media (pointer: fine)': {
+    '&:hover': {
+      overflowY: 'auto'
+    }
+  },
+  '@media (pointer: none), (pointer: coarse)': {
     overflowY: 'auto'
   },
   '&:not(:first-of-type)': {
@@ -152,7 +157,8 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
         "aria-disabled": readOnly,
         "aria-label": option.ariaLabel,
         "aria-selected": isSelected,
-        tabIndex: tabIndex
+        tabIndex: tabIndex,
+        className: classes.item
       }, slotProps?.digitalClockSectionItem, {
         children: option.label
       }), option.label);

package/modern/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js

@@ -1,6 +1,6 @@
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getMultiSectionDigitalClockSectionUtilityClass(slot) {
-  return generateUtilityClass('MuiMultiSectionDigitalClock', slot);
+  return generateUtilityClass('MuiMultiSectionDigitalClockSection', slot);
 }
-export const multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClock', ['root', 'item']);
+export const multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClockSection', ['root', 'item']);

package/modern/PickersCalendarHeader/PickersCalendarHeader.js

@@ -38,13 +38,13 @@ const PickersCalendarHeaderRoot = styled('div', {
 })({
   display: 'flex',
   alignItems: 'center',
-  marginTop: 16,
-  marginBottom: 8,
+  marginTop: 12,
+  marginBottom: 4,
   paddingLeft: 24,
   paddingRight: 12,
   // prevent jumping in safari
-  maxHeight: 30,
-  minHeight: 30
+  maxHeight: 40,
+  minHeight: 40
 });
 const PickersCalendarHeaderLabelContainer = styled('div', {
   name: 'MuiPickersCalendarHeader',

package/modern/PickersShortcuts/PickersShortcuts.js

@@ -21,7 +21,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function PickersShortcuts(props) {
   const {
       items,
-      changeImportance,
+      changeImportance = 'accept',
       onChange,
       isValid
     } = props,

package/modern/StaticDatePicker/StaticDatePicker.js

@@ -105,8 +105,8 @@ StaticDatePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * Calendar will show more weeks in order to match this value.
-   * Put it to 6 for having fix number of week in Gregorian calendars
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,

package/modern/StaticDateTimePicker/StaticDateTimePicker.js

@@ -130,8 +130,8 @@ StaticDateTimePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * Calendar will show more weeks in order to match this value.
-   * Put it to 6 for having fix number of week in Gregorian calendars
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,

package/modern/TimeClock/Clock.js

@@ -276,7 +276,6 @@ export function Clock(inProps) {
       // do nothing
     }
   };
-
   return /*#__PURE__*/_jsxs(ClockRoot, {
     className: clsx(className, classes.root),
     children: [/*#__PURE__*/_jsxs(ClockClock, {

package/modern/TimeClock/ClockPointer.js

@@ -85,7 +85,6 @@ export function ClockPointer(inProps) {
     if (type === 'hours' && viewValue > 12) {
       angle -= 360; // round up angle to max 360 degrees
     }
-
     return {
       height: Math.round((isInner ? 0.26 : 0.4) * CLOCK_WIDTH),
       transform: `rotateZ(${angle}deg)`

package/modern/YearCalendar/YearCalendar.js

@@ -115,7 +115,6 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     granularity: SECTION_TYPE_GRANULARITY.year
   }), [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-alpha.2
+ * @mui/x-date-pickers v7.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/PickersTextField/Outline.js

@@ -0,0 +1,97 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["children", "className", "label"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const OutlineRoot = styled('fieldset')({
+  textAlign: 'left',
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  top: -5,
+  left: 0,
+  margin: 0,
+  padding: '0 8px',
+  pointerEvents: 'none',
+  borderRadius: 'inherit',
+  borderStyle: 'solid',
+  borderWidth: 1,
+  overflow: 'hidden',
+  minWidth: '0%'
+});
+const OutlineLegend = styled('legend')(({
+  ownerState,
+  theme
+}) => _extends({
+  float: 'unset',
+  // Fix conflict with bootstrap
+  width: 'auto',
+  // Fix conflict with bootstrap
+  overflow: 'hidden'
+}, !ownerState.withLabel && {
+  padding: 0,
+  lineHeight: '11px',
+  // sync with `height` in `legend` styles
+  transition: theme.transitions.create('width', {
+    duration: 150,
+    easing: theme.transitions.easing.easeOut
+  })
+}, ownerState.withLabel && _extends({
+  display: 'block',
+  // Fix conflict with normalize.css and sanitize.css
+  padding: 0,
+  height: 11,
+  // sync with `lineHeight` in `legend` styles
+  fontSize: '0.75em',
+  visibility: 'hidden',
+  maxWidth: 0.01,
+  transition: theme.transitions.create('max-width', {
+    duration: 50,
+    easing: theme.transitions.easing.easeOut
+  }),
+  whiteSpace: 'nowrap',
+  '& > span': {
+    paddingLeft: 5,
+    paddingRight: 5,
+    display: 'inline-block',
+    opacity: 0,
+    visibility: 'visible'
+  }
+}, ownerState.notched && {
+  maxWidth: '100%',
+  transition: theme.transitions.create('max-width', {
+    duration: 100,
+    easing: theme.transitions.easing.easeOut,
+    delay: 50
+  })
+})));
+export default function Outline(props) {
+  const {
+      className,
+      label
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const withLabel = label != null && label !== '';
+  const ownerState = _extends({}, props, {
+    withLabel
+  });
+  return /*#__PURE__*/_jsx(OutlineRoot, _extends({
+    "aria-hidden": true,
+    className: className,
+    ownerState: ownerState
+  }, other, {
+    children: /*#__PURE__*/_jsx(OutlineLegend, {
+      ownerState: ownerState,
+      children: withLabel ? /*#__PURE__*/_jsx("span", {
+        children: label
+      }) :
+      /*#__PURE__*/
+      // notranslate needed while Google Translate will not fix zero-width space issue
+      _jsx("span", {
+        className: "notranslate",
+        children: "\u200B"
+      })
+    })
+  }));
+}

package/modern/internals/components/PickersTextField/PickersInput.js

@@ -0,0 +1,268 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "contentEditable", "tabIndex", "fullWidth", "inputProps", "inputRef", "sectionsContainerRef"];
+import * as React from 'react';
+import clsx from 'clsx';
+import Box from '@mui/material/Box';
+import { useFormControl } from '@mui/material/FormControl';
+import { styled } from '@mui/material/styles';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
+import capitalize from '@mui/utils/capitalize';
+import visuallyHidden from '@mui/utils/visuallyHidden';
+import { pickersInputClasses, getPickersInputUtilityClass } from './pickersTextFieldClasses';
+import Outline from './Outline';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PickersInputRoot = styled(Box, {
+  name: 'MuiPickersInput',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme,
+  ownerState
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+  return _extends({
+    cursor: 'text',
+    padding: '16.5px 14px',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: ownerState.fullWidth ? '100%' : '25ch',
+    position: 'relative',
+    outline: 'none',
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    [`&:hover .${pickersInputClasses.notchedOutline}`]: {
+      borderColor: (theme.vars || theme).palette.text.primary
+    },
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      [`&:hover .${pickersInputClasses.notchedOutline}`]: {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+      }
+    },
+    [`&.${pickersInputClasses.focused} .${pickersInputClasses.notchedOutline}`]: {
+      borderStyle: 'solid',
+      borderColor: (theme.vars || theme).palette[ownerState.color].main,
+      borderWidth: 2
+    },
+    [`&.${pickersInputClasses.disabled}`]: {
+      [`& .${pickersInputClasses.notchedOutline}`]: {
+        borderColor: (theme.vars || theme).palette.action.disabled
+      },
+      '*': {
+        color: (theme.vars || theme).palette.action.disabled
+      }
+    },
+    [`&.${pickersInputClasses.error} .${pickersInputClasses.notchedOutline}`]: {
+      borderColor: (theme.vars || theme).palette.error.main
+    }
+  }, ownerState.size === 'small' && {
+    padding: '8.5px 14px'
+  });
+});
+const PickersInputSectionsContainer = styled('div', {
+  name: 'MuiPickersInput',
+  slot: 'SectionsContainer',
+  overridesResolver: (props, styles) => styles.sectionsContainer
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: 'inherit',
+  lineHeight: '1.4375em',
+  // 23px
+  flexGrow: 1,
+  outline: 'none'
+}, !(ownerState.adornedStart || ownerState.focused || ownerState.filled) && _extends({
+  color: 'currentColor'
+}, ownerState.label == null && (theme.vars ? {
+  opacity: theme.vars.opacity.inputPlaceholder
+} : {
+  opacity: theme.palette.mode === 'light' ? 0.42 : 0.5
+}), ownerState.label != null && {
+  opacity: 0
+})));
+const PickersInputSection = styled('span', {
+  name: 'MuiPickersInput',
+  slot: 'Section',
+  overridesResolver: (props, styles) => styles.section
+})(({
+  theme
+}) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: 'inherit',
+  lineHeight: '1.4375em',
+  // 23px
+  flexGrow: 1
+}));
+const PickersInputContent = styled('span', {
+  name: 'MuiPickersInput',
+  slot: 'SectionContent',
+  overridesResolver: (props, styles) => styles.content
+})(({
+  theme
+}) => ({
+  fontFamily: theme.typography.fontFamily,
+  lineHeight: '1.4375em',
+  // 23px
+  letterSpacing: 'inherit',
+  width: 'fit-content'
+}));
+const PickersInputSeparator = styled('span', {
+  name: 'MuiPickersInput',
+  slot: 'Separator',
+  overridesResolver: (props, styles) => styles.separator
+})(() => ({
+  whiteSpace: 'pre'
+}));
+const PickersInputInput = styled('input', {
+  name: 'MuiPickersInput',
+  slot: 'Input',
+  overridesResolver: (props, styles) => styles.hiddenInput
+})(_extends({}, visuallyHidden));
+const NotchedOutlineRoot = styled(Outline, {
+  name: 'MuiPickersInput',
+  slot: 'NotchedOutline',
+  overridesResolver: (props, styles) => styles.notchedOutline
+})(({
+  theme
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+  return {
+    borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+  };
+});
+const useUtilityClasses = ownerState => {
+  const {
+    focused,
+    disabled,
+    error,
+    classes,
+    fullWidth,
+    readOnly,
+    color,
+    size,
+    endAdornment,
+    startAdornment
+  } = ownerState;
+  const slots = {
+    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', readOnly && 'readOnly', error && 'error', fullWidth && 'fullWidth', `color${capitalize(color)}`, size === 'small' && 'inputSizeSmall', Boolean(startAdornment) && 'adornedStart', Boolean(endAdornment) && 'adornedEnd'],
+    notchedOutline: ['notchedOutline'],
+    input: ['input'],
+    sectionsContainer: ['sectionsContainer'],
+    sectionContent: ['sectionContent'],
+    sectionBefore: ['sectionBefore'],
+    sectionAfter: ['sectionAfter']
+  };
+  return composeClasses(slots, getPickersInputUtilityClass, classes);
+};
+export const PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(props, ref) {
+  const {
+      elements,
+      areAllSectionsEmpty,
+      label,
+      value,
+      onChange,
+      id,
+      endAdornment,
+      startAdornment,
+      contentEditable,
+      tabIndex,
+      inputProps,
+      inputRef,
+      sectionsContainerRef
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootRef = React.useRef(null);
+  const handleRootRef = useForkRef(ref, rootRef);
+  const handleInputRef = useForkRef(inputProps?.ref, inputRef);
+  const muiFormControl = useFormControl();
+  if (!muiFormControl) {
+    throw new Error('MUI: PickersInput should always be used inside a PickersTextField component');
+  }
+  const handleInputFocus = event => {
+    // Fix a bug with IE11 where the focus/blur events are triggered
+    // while the component is disabled.
+    if (muiFormControl.disabled) {
+      event.stopPropagation();
+      return;
+    }
+    muiFormControl.onFocus?.(event);
+  };
+  React.useEffect(() => {
+    if (muiFormControl) {
+      muiFormControl.setAdornedStart(Boolean(startAdornment));
+    }
+  }, [muiFormControl, startAdornment]);
+  React.useEffect(() => {
+    if (!muiFormControl) {
+      return;
+    }
+    if (areAllSectionsEmpty) {
+      muiFormControl.onEmpty();
+    } else {
+      muiFormControl.onFilled();
+    }
+  }, [muiFormControl, areAllSectionsEmpty]);
+  const ownerState = _extends({}, props, muiFormControl);
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsxs(PickersInputRoot, _extends({}, other, {
+    className: classes.root,
+    ownerState: ownerState,
+    "aria-invalid": muiFormControl.error,
+    ref: handleRootRef,
+    children: [startAdornment, /*#__PURE__*/_jsx(PickersInputSectionsContainer, {
+      ownerState: ownerState,
+      className: classes.sectionsContainer,
+      contentEditable: contentEditable,
+      suppressContentEditableWarning: true,
+      onFocus: handleInputFocus,
+      onBlur: muiFormControl.onBlur,
+      tabIndex: tabIndex,
+      ref: sectionsContainerRef,
+      children: contentEditable ? elements.map(({
+        content,
+        before,
+        after
+      }) => `${before.children}${content.children}${after.children}`).join('') : /*#__PURE__*/_jsx(React.Fragment, {
+        children: elements.map(({
+          container,
+          content,
+          before,
+          after
+        }, elementIndex) => /*#__PURE__*/_jsxs(PickersInputSection, _extends({}, container, {
+          children: [/*#__PURE__*/_jsx(PickersInputSeparator, _extends({}, before, {
+            className: clsx(pickersInputClasses.sectionBefore, before?.className)
+          })), /*#__PURE__*/_jsx(PickersInputContent, _extends({}, content, {
+            suppressContentEditableWarning: true,
+            className: clsx(pickersInputClasses.sectionContent, content?.className),
+            ownerState
+          })), /*#__PURE__*/_jsx(PickersInputSeparator, _extends({}, after, {
+            className: clsx(pickersInputClasses.sectionAfter, after?.className)
+          }))]
+        }), elementIndex))
+      })
+    }), endAdornment, /*#__PURE__*/_jsx(NotchedOutlineRoot, {
+      shrink: muiFormControl.adornedStart || muiFormControl.focused || muiFormControl.filled,
+      notched: muiFormControl.adornedStart || muiFormControl.focused || muiFormControl.filled,
+      className: classes.notchedOutline,
+      label: label != null && label !== '' && muiFormControl.required ? /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [label, "\u2009", '*']
+      }) : label,
+      ownerState: ownerState
+    }), /*#__PURE__*/_jsx(PickersInputInput, _extends({
+      className: classes.input,
+      value: value,
+      onChange: onChange,
+      id: id,
+      "aria-hidden": "true",
+      tabIndex: -1
+    }, inputProps, {
+      ref: handleInputRef
+    }))]
+  }));
+});
+PickersInput.muiName = 'Input';

package/modern/internals/components/PickersTextField/PickersInput.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/components/PickersTextField/PickersTextField.js

@@ -0,0 +1,129 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "required", "variant", "InputProps", "inputProps", "inputRef", "sectionsContainerRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import useForkRef from '@mui/utils/useForkRef';
+import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
+import InputLabel from '@mui/material/InputLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import FormControl from '@mui/material/FormControl';
+import { getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
+import { PickersInput } from './PickersInput';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PickersTextFieldRoot = styled(FormControl, {
+  name: 'MuiPickersTextField',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
+const useUtilityClasses = ownerState => {
+  const {
+    focused,
+    disabled,
+    classes,
+    required
+  } = ownerState;
+  const slots = {
+    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', required && 'required']
+  };
+  return composeClasses(slots, getPickersTextFieldUtilityClass, classes);
+};
+export const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(props, ref) {
+  const {
+      // Props used by FormControl
+      onFocus,
+      onBlur,
+      className,
+      color = 'primary',
+      disabled = false,
+      error = false,
+      required = false,
+      variant = 'outlined',
+      // Props used by PickersInput
+      InputProps,
+      inputProps,
+      inputRef,
+      sectionsContainerRef,
+      elements,
+      areAllSectionsEmpty,
+      onClick,
+      onKeyDown,
+      onPaste,
+      onInput,
+      endAdornment,
+      startAdornment,
+      tabIndex,
+      contentEditable,
+      focused,
+      value,
+      onChange,
+      fullWidth,
+      id: idProp,
+      // Props used by FormHelperText
+      helperText,
+      FormHelperTextProps,
+      // Props used by InputLabel
+      label,
+      InputLabelProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootRef = React.useRef(null);
+  const handleRootRef = useForkRef(ref, rootRef);
+  const id = useId(idProp);
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const inputLabelId = label && id ? `${id}-label` : undefined;
+  const ownerState = _extends({}, props, {
+    color,
+    disabled,
+    error,
+    focused,
+    required,
+    variant
+  });
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
+    className: clsx(classes.root, className),
+    ref: handleRootRef,
+    focused: focused,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled,
+    variant: variant,
+    error: error,
+    color: color,
+    required: required,
+    ownerState: ownerState
+  }, other, {
+    children: [/*#__PURE__*/_jsx(InputLabel, _extends({
+      htmlFor: id,
+      id: inputLabelId
+    }, InputLabelProps, {
+      children: label
+    })), /*#__PURE__*/_jsx(PickersInput, _extends({
+      elements: elements,
+      areAllSectionsEmpty: areAllSectionsEmpty,
+      onClick: onClick,
+      onKeyDown: onKeyDown,
+      onInput: onInput,
+      onPaste: onPaste,
+      endAdornment: endAdornment,
+      startAdornment: startAdornment,
+      tabIndex: tabIndex,
+      contentEditable: contentEditable,
+      value: value,
+      onChange: onChange,
+      id: id,
+      fullWidth: fullWidth,
+      inputProps: inputProps,
+      inputRef: inputRef,
+      sectionsContainerRef: sectionsContainerRef,
+      label: label
+    }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
+      id: helperTextId
+    }, FormHelperTextProps, {
+      children: helperText
+    }))]
+  }));
+});

package/modern/internals/components/PickersTextField/PickersTextField.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/components/PickersTextField/index.js

@@ -0,0 +1 @@
+export { PickersTextField } from './PickersTextField';