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

package/internals/demo/DemoContainer.d.ts

@@ -9,12 +9,16 @@ interface DemoItemProps {
     label?: React.ReactNode;
     component?: string;
     children: React.ReactNode;
+    sx?: SxProps<Theme>;
 }
 /**
  * WARNING: This is an internal component used in documentation to achieve a desired layout.
  * Please do not use it in your application.
  */
 export declare function DemoItem(props: DemoItemProps): React.JSX.Element;
+export declare namespace DemoItem {
+    var displayName: string;
+}
 /**
  * WARNING: This is an internal component used in documentation to achieve a desired layout.
  * Please do not use it in your application.

package/internals/demo/DemoContainer.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import Stack from '@mui/material/Stack';
+import Stack, { stackClasses } from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { textFieldClasses } from '@mui/material/TextField';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -40,20 +40,20 @@ export function DemoItem(props) {
   const {
     label,
     children,
-    component
+    component,
+    sx: sxProp
   } = props;
   let spacing;
-  let sx;
+  let sx = sxProp;
   if (component && getChildTypeFromChildName(component) === 'multi-input-range-field') {
     spacing = 1.5;
-    sx = {
+    sx = _extends({}, sx, {
       [`& .${textFieldClasses.root}`]: {
         flexGrow: 1
       }
-    };
+    });
   } else {
     spacing = 1;
-    sx = undefined;
   }
   return /*#__PURE__*/_jsxs(Stack, {
     direction: "column",
@@ -66,7 +66,14 @@ export function DemoItem(props) {
     }), children]
   });
 }
-
+DemoItem.displayName = 'DemoItem';
+const isDemoItem = child => {
+  if ( /*#__PURE__*/React.isValidElement(child) && typeof child.type !== 'string') {
+    // @ts-ignore
+    return child.type.displayName === 'DemoItem';
+  }
+  return false;
+};
 /**
  * WARNING: This is an internal component used in documentation to achieve a desired layout.
  * Please do not use it in your application.
@@ -91,7 +98,9 @@ export function DemoContainer(props) {
   };
   let direction;
   let spacing;
-  let sx = _extends({
+  let extraSx = {};
+  let demoItemSx = {};
+  const sx = _extends({
     overflow: 'auto',
     // Add padding as overflow can hide the outline text field label.
     pt: 1
@@ -113,38 +122,57 @@ export function DemoContainer(props) {
     // noop
   } else if (childrenTypes.has('single-input-range-field')) {
     if (!childrenSupportedSections.has('date-time')) {
-      sx = _extends({}, sx, {
+      extraSx = {
         [`& > .${textFieldClasses.root}`]: {
           minWidth: 300
         }
-      });
+      };
     } else {
-      sx = _extends({}, sx, {
+      extraSx = {
         [`& > .${textFieldClasses.root}`]: {
           minWidth: {
             xs: 300,
-            md: 400
+            // If demo also contains MultiInputDateTimeRangeField, increase width to avoid cutting off the value.
+            md: childrenTypes.has('multi-input-range-field') ? 460 : 400
           }
         }
-      });
+      };
     }
   } else if (childrenSupportedSections.has('date-time')) {
-    sx = _extends({}, sx, {
+    extraSx = {
       [`& > .${textFieldClasses.root}`]: {
         minWidth: 270
       }
-    });
+    };
+    if (childrenTypes.has('multi-input-range-field')) {
+      // increase width for the multi input date time range fields
+      demoItemSx = {
+        [`& > .${stackClasses.root} > .${textFieldClasses.root}`]: {
+          minWidth: 210
+        }
+      };
+    }
   } else {
-    sx = _extends({}, sx, {
+    extraSx = {
       [`& > .${textFieldClasses.root}`]: {
         minWidth: 200
       }
-    });
+    };
   }
+  const finalSx = _extends({}, sx, extraSx);
   return /*#__PURE__*/_jsx(Stack, {
     direction: direction,
     spacing: spacing,
-    sx: sx,
-    children: children
+    sx: finalSx,
+    children: React.Children.map(children, child => {
+      if ( /*#__PURE__*/React.isValidElement(child) && isDemoItem(child)) {
+        // Inject sx styles to the `DemoItem` if it is a direct child of `DemoContainer`.
+        // @ts-ignore
+        return /*#__PURE__*/React.cloneElement(child, {
+          sx: _extends({}, extraSx, demoItemSx)
+        });
+      }
+      return child;
+    })
   });
 }

package/internals/hooks/useClockReferenceDate.js

@@ -21,6 +21,5 @@ export const useClockReferenceDate = ({
   // We only want to compute the reference date on mount.
   [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   return value != null ? value : referenceDate;
 };

package/internals/hooks/useField/useField.utils.js

@@ -125,7 +125,6 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
       if (delta < 0 || isStart) {
         newSectionValueNumber += step - (step + newSectionValueNumber) % step; // for JS -3 % 5 = -3 (should be 2)
       }
-
       if (delta > 0 || isEnd) {
         newSectionValueNumber -= newSectionValueNumber % step;
       }
@@ -400,7 +399,6 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
   const isTokenStartRegExp = new RegExp(`^(${Object.keys(utils.formatTokenMap).sort((a, b) => b.length - a.length) // Sort to put longest word first
   .join('|')})`, 'g') // used to get access to lastIndex state
   ;
-
   let currentTokenValue = '';
   for (let i = 0; i < expandedFormat.length; i += 1) {
     const escapedPartOfCurrentChar = escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);

package/internals/hooks/useViews.js

@@ -61,7 +61,6 @@ export function useViews({
       setFocusedView(prevFocusedView => viewToFocus === prevFocusedView ? null : prevFocusedView // If false the blur is due to view switching
       );
     }
-
     onFocusedViewChange == null || onFocusedViewChange(viewToFocus, hasFocus);
   });
   const handleChangeView = useEventCallback(newView => {

package/legacy/AdapterLuxon/AdapterLuxon.js

@@ -238,7 +238,6 @@ export var AdapterLuxon = /*#__PURE__*/_createClass(function AdapterLuxon() {
     if (typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {
       return true; // Luxon defaults to en-US if Intl not found
     }
-
     return Boolean((_Intl$DateTimeFormat = new Intl.DateTimeFormat(_this.locale, {
       hour: 'numeric'
     })) == null || (_Intl$DateTimeFormat = _Intl$DateTimeFormat.resolvedOptions()) == null ? void 0 : _Intl$DateTimeFormat.hour12);

package/legacy/DateCalendar/useCalendarState.js

@@ -63,7 +63,6 @@ export var useCalendarState = function useCalendarState(params) {
     });
   }, [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   var _React$useReducer = React.useReducer(reducerFn, {
       isMonthSwitchingAnimating: false,
       focusedDay: referenceDate,

package/legacy/MonthCalendar/MonthCalendar.js

@@ -113,7 +113,6 @@ export var MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(
     });
   }, [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   var ownerState = props;
   var classes = useUtilityClasses(ownerState);
   var todayMonth = React.useMemo(function () {

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -36,7 +36,12 @@ var 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)': {
@@ -162,7 +167,8 @@ export var MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(funct
         "aria-disabled": readOnly,
         "aria-label": option.ariaLabel,
         "aria-selected": isSelected,
-        tabIndex: tabIndex
+        tabIndex: tabIndex,
+        className: classes.item
       }, slotProps == null ? void 0 : slotProps.digitalClockSectionItem, {
         children: option.label
       }), option.label);

package/legacy/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 var multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClock', ['root', 'item']);
+export var multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClockSection', ['root', 'item']);

package/legacy/PickersCalendarHeader/PickersCalendarHeader.js

@@ -39,13 +39,13 @@ var 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
 });
 var PickersCalendarHeaderLabelContainer = styled('div', {
   name: 'MuiPickersCalendarHeader',

package/legacy/TimeClock/Clock.js

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

package/legacy/TimeClock/ClockPointer.js

@@ -88,7 +88,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(".concat(angle, "deg)")

package/legacy/YearCalendar/YearCalendar.js

@@ -117,7 +117,6 @@ export var YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(in
     });
   }, [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-
   var ownerState = props;
   var classes = useUtilityClasses(ownerState);
   var todayYear = React.useMemo(function () {

package/legacy/index.js

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

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

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["children", "classes", "className", "label", "notched"];
+var _excluded = ["children", "className", "label"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -69,14 +69,11 @@ var OutlineLegend = styled('legend')(function (_ref) {
 });
 export default function Outline(props) {
   var children = props.children,
-    classes = props.classes,
     className = props.className,
     label = props.label,
-    notched = props.notched,
     other = _objectWithoutProperties(props, _excluded);
   var withLabel = label != null && label !== '';
   var ownerState = _extends({}, props, {
-    notched: notched,
     withLabel: withLabel
   });
   return /*#__PURE__*/_jsx(OutlineRoot, _extends({

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

@@ -1,19 +1,21 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["elements", "defaultValue", "label", "onFocus", "onWrapperClick", "onBlur", "valueStr", "onValueStrChange", "id", "InputProps", "inputProps", "autoFocus", "ownerState", "endAdornment", "startAdornment"];
+var _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 { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, visuallyHidden } from '@mui/utils';
+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";
-var SectionsWrapper = styled(Box, {
+var PickersInputRoot = styled(Box, {
   name: 'MuiPickersInput',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
@@ -31,6 +33,7 @@ var SectionsWrapper = styled(Box, {
     alignItems: 'center',
     width: ownerState.fullWidth ? '100%' : '25ch',
     position: 'relative',
+    outline: 'none',
     borderRadius: (theme.vars || theme).shape.borderRadius
   }, "&:hover .".concat(pickersInputClasses.notchedOutline), {
     borderColor: (theme.vars || theme).palette.text.primary
@@ -50,25 +53,33 @@ var SectionsWrapper = styled(Box, {
     padding: '8.5px 14px'
   });
 });
-var SectionsContainer = styled('div', {
+var PickersInputSectionsContainer = styled('div', {
   name: 'MuiPickersInput',
-  slot: 'Input',
+  slot: 'SectionsContainer',
   overridesResolver: function overridesResolver(props, styles) {
-    return styles.input;
+    return styles.sectionsContainer;
   }
 })(function (_ref2) {
   var theme = _ref2.theme,
     ownerState = _ref2.ownerState;
-  return {
+  return _extends({
     fontFamily: theme.typography.fontFamily,
     fontSize: 'inherit',
     lineHeight: '1.4375em',
     // 23px
     flexGrow: 1,
-    visibility: ownerState.adornedStart || ownerState.focused ? 'visible' : 'hidden'
-  };
+    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
+  }));
 });
-var SectionContainer = styled('span', {
+var PickersInputSection = styled('span', {
   name: 'MuiPickersInput',
   slot: 'Section',
   overridesResolver: function overridesResolver(props, styles) {
@@ -84,9 +95,9 @@ var SectionContainer = styled('span', {
     flexGrow: 1
   };
 });
-var SectionInput = styled('span', {
+var PickersInputContent = styled('span', {
   name: 'MuiPickersInput',
-  slot: 'Content',
+  slot: 'SectionContent',
   overridesResolver: function overridesResolver(props, styles) {
     return styles.content;
   }
@@ -100,7 +111,7 @@ var SectionInput = styled('span', {
     width: 'fit-content'
   };
 });
-var SectionSeparator = styled('span', {
+var PickersInputSeparator = styled('span', {
   name: 'MuiPickersInput',
   slot: 'Separator',
   overridesResolver: function overridesResolver(props, styles) {
@@ -111,9 +122,9 @@ var SectionSeparator = styled('span', {
     whiteSpace: 'pre'
   };
 });
-var FakeHiddenInput = styled('input', {
+var PickersInputInput = styled('input', {
   name: 'MuiPickersInput',
-  slot: 'HiddenInput',
+  slot: 'Input',
   overridesResolver: function overridesResolver(props, styles) {
     return styles.hiddenInput;
   }
@@ -131,143 +142,136 @@ var NotchedOutlineRoot = styled(Outline, {
     borderColor: theme.vars ? "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : borderColor
   };
 });
-function InputContent(_ref6) {
-  var elements = _ref6.elements,
-    contentEditable = _ref6.contentEditable,
-    ownerState = _ref6.ownerState;
-  if (contentEditable) {
-    return elements.map(function (_ref7) {
-      var content = _ref7.content,
-        before = _ref7.before,
-        after = _ref7.after;
-      return "".concat(before.children).concat(content.children).concat(after.children);
-    }).join('');
-  }
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: elements.map(function (_ref8, elementIndex) {
-      var container = _ref8.container,
-        content = _ref8.content,
-        before = _ref8.before,
-        after = _ref8.after;
-      return /*#__PURE__*/_jsxs(SectionContainer, _extends({}, container, {
-        children: [/*#__PURE__*/_jsx(SectionSeparator, _extends({}, before, {
-          className: clsx(pickersInputClasses.before, before == null ? void 0 : before.className)
-        })), /*#__PURE__*/_jsx(SectionInput, _extends({}, content, {
-          className: clsx(pickersInputClasses.content, content == null ? void 0 : content.className),
-          ownerState: ownerState
-        })), /*#__PURE__*/_jsx(SectionSeparator, _extends({}, after, {
-          className: clsx(pickersInputClasses.after, after == null ? void 0 : after.className)
-        }))]
-      }), elementIndex);
-    })
-  });
-}
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var focused = ownerState.focused,
     disabled = ownerState.disabled,
     error = ownerState.error,
     classes = ownerState.classes,
     fullWidth = ownerState.fullWidth,
+    readOnly = ownerState.readOnly,
     color = ownerState.color,
     size = ownerState.size,
     endAdornment = ownerState.endAdornment,
     startAdornment = ownerState.startAdornment;
   var slots = {
-    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', "color".concat(capitalize(color)), size === 'small' && 'inputSizeSmall', Boolean(startAdornment) && 'adornedStart', Boolean(endAdornment) && 'adornedEnd'],
+    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', readOnly && 'readOnly', error && 'error', fullWidth && 'fullWidth', "color".concat(capitalize(color)), size === 'small' && 'inputSizeSmall', Boolean(startAdornment) && 'adornedStart', Boolean(endAdornment) && 'adornedEnd'],
     notchedOutline: ['notchedOutline'],
-    before: ['before'],
-    after: ['after'],
-    content: ['content'],
-    input: ['input']
+    input: ['input'],
+    sectionsContainer: ['sectionsContainer'],
+    sectionContent: ['sectionContent'],
+    sectionBefore: ['sectionBefore'],
+    sectionAfter: ['sectionAfter']
   };
   return composeClasses(slots, getPickersInputUtilityClass, classes);
 };
-
-// TODO: move to utils
-// Separates the state props from the form control
-function formControlState(_ref9) {
-  var props = _ref9.props,
-    states = _ref9.states,
-    muiFormControl = _ref9.muiFormControl;
-  return states.reduce(function (acc, state) {
-    acc[state] = props[state];
-    if (muiFormControl) {
-      if (typeof props[state] === 'undefined') {
-        acc[state] = muiFormControl[state];
-      }
-    }
-    return acc;
-  }, {});
-}
-var PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(props, ref) {
+export var PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(props, ref) {
   var elements = props.elements,
+    areAllSectionsEmpty = props.areAllSectionsEmpty,
     defaultValue = props.defaultValue,
     label = props.label,
-    onFocus = props.onFocus,
-    onWrapperClick = props.onWrapperClick,
-    onBlur = props.onBlur,
-    valueStr = props.valueStr,
-    onValueStrChange = props.onValueStrChange,
+    value = props.value,
+    onChange = props.onChange,
     id = props.id,
-    InputProps = props.InputProps,
-    inputProps = props.inputProps,
     autoFocus = props.autoFocus,
-    ownerStateProp = props.ownerState,
     endAdornment = props.endAdornment,
     startAdornment = props.startAdornment,
+    contentEditable = props.contentEditable,
+    tabIndex = props.tabIndex,
+    fullWidth = props.fullWidth,
+    inputProps = props.inputProps,
+    inputRef = props.inputRef,
+    sectionsContainerRef = props.sectionsContainerRef,
     other = _objectWithoutProperties(props, _excluded);
-  var inputRef = React.useRef(null);
-  var handleInputRef = useForkRef(ref, inputRef);
+  var rootRef = React.useRef(null);
+  var handleRootRef = useForkRef(ref, rootRef);
+  var handleInputRef = useForkRef(inputProps == null ? void 0 : inputProps.ref, inputRef);
   var muiFormControl = useFormControl();
-  var fcs = formControlState({
-    props: props,
-    muiFormControl: muiFormControl,
-    states: ['color', 'disabled', 'error', 'focused', 'size', 'required', 'fullWidth', 'adornedStart']
-  });
+  if (!muiFormControl) {
+    throw new Error('MUI: PickersInput should always be used inside a PickersTextField component');
+  }
+  var handleInputFocus = function handleInputFocus(event) {
+    var _muiFormControl$onFoc;
+    // Fix a bug with IE11 where the focus/blur events are triggered
+    // while the component is disabled.
+    if (muiFormControl.disabled) {
+      event.stopPropagation();
+      return;
+    }
+    (_muiFormControl$onFoc = muiFormControl.onFocus) == null || _muiFormControl$onFoc.call(muiFormControl, event);
+  };
   React.useEffect(function () {
     if (muiFormControl) {
       muiFormControl.setAdornedStart(Boolean(startAdornment));
     }
   }, [muiFormControl, startAdornment]);
-  var ownerState = _extends({}, props, ownerStateProp, {
-    color: fcs.color || 'primary',
-    disabled: fcs.disabled,
-    error: fcs.error,
-    focused: fcs.focused,
-    fullWidth: fcs.fullWidth,
-    size: fcs.size
-  });
+  React.useEffect(function () {
+    if (!muiFormControl) {
+      return;
+    }
+    if (areAllSectionsEmpty) {
+      muiFormControl.onEmpty();
+    } else {
+      muiFormControl.onFilled();
+    }
+  }, [muiFormControl, areAllSectionsEmpty]);
+  var ownerState = _extends({}, props, muiFormControl);
   var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(SectionsWrapper, _extends({
-    ref: handleInputRef
-  }, other, {
+  return /*#__PURE__*/_jsxs(PickersInputRoot, _extends({}, other, {
     className: classes.root,
-    onClick: onWrapperClick,
     ownerState: ownerState,
-    "aria-invalid": fcs.error,
-    children: [startAdornment, /*#__PURE__*/_jsxs(SectionsContainer, {
+    "aria-invalid": muiFormControl.error,
+    ref: handleRootRef,
+    children: [startAdornment, /*#__PURE__*/_jsx(PickersInputSectionsContainer, {
       ownerState: ownerState,
-      className: classes.input,
-      children: [/*#__PURE__*/_jsx(InputContent, {
-        elements: elements,
-        contentEditable: other.contentEditable,
-        ownerState: ownerState
-      }), /*#__PURE__*/_jsx(FakeHiddenInput, {
-        value: valueStr,
-        onChange: onValueStrChange,
-        id: id,
-        "aria-hidden": "true",
-        tabIndex: -1
-      })]
+      className: classes.sectionsContainer,
+      contentEditable: contentEditable,
+      suppressContentEditableWarning: true,
+      onFocus: handleInputFocus,
+      onBlur: muiFormControl.onBlur,
+      tabIndex: tabIndex,
+      ref: sectionsContainerRef,
+      children: contentEditable ? elements.map(function (_ref6) {
+        var content = _ref6.content,
+          before = _ref6.before,
+          after = _ref6.after;
+        return "".concat(before.children).concat(content.children).concat(after.children);
+      }).join('') : /*#__PURE__*/_jsx(React.Fragment, {
+        children: elements.map(function (_ref7, elementIndex) {
+          var container = _ref7.container,
+            content = _ref7.content,
+            before = _ref7.before,
+            after = _ref7.after;
+          return /*#__PURE__*/_jsxs(PickersInputSection, _extends({}, container, {
+            children: [/*#__PURE__*/_jsx(PickersInputSeparator, _extends({}, before, {
+              className: clsx(pickersInputClasses.sectionBefore, before == null ? void 0 : before.className)
+            })), /*#__PURE__*/_jsx(PickersInputContent, _extends({}, content, {
+              suppressContentEditableWarning: true,
+              className: clsx(pickersInputClasses.sectionContent, content == null ? void 0 : content.className),
+              ownerState: ownerState
+            })), /*#__PURE__*/_jsx(PickersInputSeparator, _extends({}, after, {
+              className: clsx(pickersInputClasses.sectionAfter, after == null ? void 0 : after.className)
+            }))]
+          }), elementIndex);
+        })
+      })
     }), endAdornment, /*#__PURE__*/_jsx(NotchedOutlineRoot, {
-      shrink: fcs.adornedStart || fcs.focused,
-      notched: fcs.adornedStart || fcs.focused,
+      shrink: muiFormControl.adornedStart || muiFormControl.focused || muiFormControl.filled,
+      notched: muiFormControl.adornedStart || muiFormControl.focused || muiFormControl.filled,
       className: classes.notchedOutline,
-      label: label != null && label !== '' && fcs.required ? /*#__PURE__*/_jsxs(React.Fragment, {
+      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
+    }))]
   }));
 });
-export default PickersInput;
+PickersInput.muiName = 'Input';