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

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

@@ -0,0 +1,276 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickersInput = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _FormControl = require("@mui/material/FormControl");
+var _styles = require("@mui/material/styles");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
+var _visuallyHidden = _interopRequireDefault(require("@mui/utils/visuallyHidden"));
+var _pickersTextFieldClasses = require("./pickersTextFieldClasses");
+var _Outline = _interopRequireDefault(require("./Outline"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "contentEditable", "tabIndex", "fullWidth", "inputProps", "inputRef", "sectionsContainerRef"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const PickersInputRoot = (0, _styles.styled)(_Box.default, {
+  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 (0, _extends2.default)({
+    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 .${_pickersTextFieldClasses.pickersInputClasses.notchedOutline}`]: {
+      borderColor: (theme.vars || theme).palette.text.primary
+    },
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      [`&:hover .${_pickersTextFieldClasses.pickersInputClasses.notchedOutline}`]: {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+      }
+    },
+    [`&.${_pickersTextFieldClasses.pickersInputClasses.focused} .${_pickersTextFieldClasses.pickersInputClasses.notchedOutline}`]: {
+      borderStyle: 'solid',
+      borderColor: (theme.vars || theme).palette[ownerState.color].main,
+      borderWidth: 2
+    },
+    [`&.${_pickersTextFieldClasses.pickersInputClasses.disabled}`]: {
+      [`& .${_pickersTextFieldClasses.pickersInputClasses.notchedOutline}`]: {
+        borderColor: (theme.vars || theme).palette.action.disabled
+      },
+      '*': {
+        color: (theme.vars || theme).palette.action.disabled
+      }
+    },
+    [`&.${_pickersTextFieldClasses.pickersInputClasses.error} .${_pickersTextFieldClasses.pickersInputClasses.notchedOutline}`]: {
+      borderColor: (theme.vars || theme).palette.error.main
+    }
+  }, ownerState.size === 'small' && {
+    padding: '8.5px 14px'
+  });
+});
+const PickersInputSectionsContainer = (0, _styles.styled)('div', {
+  name: 'MuiPickersInput',
+  slot: 'SectionsContainer',
+  overridesResolver: (props, styles) => styles.sectionsContainer
+})(({
+  theme,
+  ownerState
+}) => (0, _extends2.default)({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: 'inherit',
+  lineHeight: '1.4375em',
+  // 23px
+  flexGrow: 1,
+  outline: 'none'
+}, !(ownerState.adornedStart || ownerState.focused || ownerState.filled) && (0, _extends2.default)({
+  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 = (0, _styles.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 = (0, _styles.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 = (0, _styles.styled)('span', {
+  name: 'MuiPickersInput',
+  slot: 'Separator',
+  overridesResolver: (props, styles) => styles.separator
+})(() => ({
+  whiteSpace: 'pre'
+}));
+const PickersInputInput = (0, _styles.styled)('input', {
+  name: 'MuiPickersInput',
+  slot: 'Input',
+  overridesResolver: (props, styles) => styles.hiddenInput
+})((0, _extends2.default)({}, _visuallyHidden.default));
+const NotchedOutlineRoot = (0, _styles.styled)(_Outline.default, {
+  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${(0, _capitalize.default)(color)}`, size === 'small' && 'inputSizeSmall', Boolean(startAdornment) && 'adornedStart', Boolean(endAdornment) && 'adornedEnd'],
+    notchedOutline: ['notchedOutline'],
+    input: ['input'],
+    sectionsContainer: ['sectionsContainer'],
+    sectionContent: ['sectionContent'],
+    sectionBefore: ['sectionBefore'],
+    sectionAfter: ['sectionAfter']
+  };
+  return (0, _composeClasses.default)(slots, _pickersTextFieldClasses.getPickersInputUtilityClass, classes);
+};
+const PickersInput = exports.PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(props, ref) {
+  const {
+      elements,
+      areAllSectionsEmpty,
+      label,
+      value,
+      onChange,
+      id,
+      endAdornment,
+      startAdornment,
+      contentEditable,
+      tabIndex,
+      inputProps,
+      inputRef,
+      sectionsContainerRef
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootRef = React.useRef(null);
+  const handleRootRef = (0, _useForkRef.default)(ref, rootRef);
+  const handleInputRef = (0, _useForkRef.default)(inputProps?.ref, inputRef);
+  const muiFormControl = (0, _FormControl.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 = (0, _extends2.default)({}, props, muiFormControl);
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersInputRoot, (0, _extends2.default)({}, other, {
+    className: classes.root,
+    ownerState: ownerState,
+    "aria-invalid": muiFormControl.error,
+    ref: handleRootRef,
+    children: [startAdornment, /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+        children: elements.map(({
+          container,
+          content,
+          before,
+          after
+        }, elementIndex) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersInputSection, (0, _extends2.default)({}, container, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputSeparator, (0, _extends2.default)({}, before, {
+            className: (0, _clsx.default)(_pickersTextFieldClasses.pickersInputClasses.sectionBefore, before?.className)
+          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputContent, (0, _extends2.default)({}, content, {
+            suppressContentEditableWarning: true,
+            className: (0, _clsx.default)(_pickersTextFieldClasses.pickersInputClasses.sectionContent, content?.className),
+            ownerState
+          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputSeparator, (0, _extends2.default)({}, after, {
+            className: (0, _clsx.default)(_pickersTextFieldClasses.pickersInputClasses.sectionAfter, after?.className)
+          }))]
+        }), elementIndex))
+      })
+    }), endAdornment, /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [label, "\u2009", '*']
+      }) : label,
+      ownerState: ownerState
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputInput, (0, _extends2.default)({
+      className: classes.input,
+      value: value,
+      onChange: onChange,
+      id: id,
+      "aria-hidden": "true",
+      tabIndex: -1
+    }, inputProps, {
+      ref: handleInputRef
+    }))]
+  }));
+});
+PickersInput.muiName = 'Input';

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/internals/components/PickersTextField/PickersTextField.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickersTextField = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _utils = require("@mui/utils");
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _pickersTextFieldClasses = require("./pickersTextFieldClasses");
+var _PickersInput = require("./PickersInput");
+var _jsxRuntime = require("react/jsx-runtime");
+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"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const PickersTextFieldRoot = (0, _styles.styled)(_FormControl.default, {
+  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 (0, _utils.unstable_composeClasses)(slots, _pickersTextFieldClasses.getPickersTextFieldUtilityClass, classes);
+};
+const PickersTextField = exports.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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootRef = React.useRef(null);
+  const handleRootRef = (0, _useForkRef.default)(ref, rootRef);
+  const id = (0, _utils.unstable_useId)(idProp);
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const inputLabelId = label && id ? `${id}-label` : undefined;
+  const ownerState = (0, _extends2.default)({}, props, {
+    color,
+    disabled,
+    error,
+    focused,
+    required,
+    variant
+  });
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersTextFieldRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(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__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
+      htmlFor: id,
+      id: inputLabelId
+    }, InputLabelProps, {
+      children: label
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersInput.PickersInput, (0, _extends2.default)({
+      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__*/(0, _jsxRuntime.jsx)(_FormHelperText.default, (0, _extends2.default)({
+      id: helperTextId
+    }, FormHelperTextProps, {
+      children: helperText
+    }))]
+  }));
+});

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PickersTextField", {
+  enumerable: true,
+  get: function () {
+    return _PickersTextField.PickersTextField;
+  }
+});
+var _PickersTextField = require("./PickersTextField");

package/node/internals/components/PickersTextField/pickersTextFieldClasses.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPickersInputUtilityClass = getPickersInputUtilityClass;
+exports.getPickersTextFieldUtilityClass = getPickersTextFieldUtilityClass;
+exports.pickersTextFieldClasses = exports.pickersInputClasses = void 0;
+var _utils = require("@mui/utils");
+function getPickersTextFieldUtilityClass(slot) {
+  return (0, _utils.unstable_generateUtilityClass)('MuiPickersTextField', slot);
+}
+const pickersTextFieldClasses = exports.pickersTextFieldClasses = (0, _utils.unstable_generateUtilityClasses)('MuiPickersTextField', ['root', 'focused', 'disabled', 'error', 'required']);
+function getPickersInputUtilityClass(slot) {
+  return (0, _utils.unstable_generateUtilityClass)('MuiPickersInput', slot);
+}
+const pickersInputClasses = exports.pickersInputClasses = (0, _utils.unstable_generateUtilityClasses)('MuiPickersInput', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'adornedStart', 'adornedEnd', 'input', 'sectionsContainer', 'sectionContent', 'sectionBefore', 'sectionAfter']);

package/node/internals/constants/dimensions.js

@@ -8,6 +8,6 @@ const DAY_SIZE = exports.DAY_SIZE = 36;
 const DAY_MARGIN = exports.DAY_MARGIN = 2;
 const DIALOG_WIDTH = exports.DIALOG_WIDTH = 320;
 const MAX_CALENDAR_HEIGHT = exports.MAX_CALENDAR_HEIGHT = 280;
-const VIEW_HEIGHT = exports.VIEW_HEIGHT = 334;
+const VIEW_HEIGHT = exports.VIEW_HEIGHT = 336;
 const DIGITAL_CLOCK_VIEW_HEIGHT = exports.DIGITAL_CLOCK_VIEW_HEIGHT = 232;
 const MULTI_SECTION_CLOCK_SECTION_WIDTH = exports.MULTI_SECTION_CLOCK_SECTION_WIDTH = 48;

package/node/internals/demo/DemoContainer.js

@@ -8,7 +8,7 @@ exports.DemoContainer = DemoContainer;
 exports.DemoItem = DemoItem;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _Stack = _interopRequireWildcard(require("@mui/material/Stack"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _TextField = require("@mui/material/TextField");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -49,20 +49,20 @@ 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 = (0, _extends2.default)({}, sx, {
       [`& .${_TextField.textFieldClasses.root}`]: {
         flexGrow: 1
       }
-    };
+    });
   } else {
     spacing = 1;
-    sx = undefined;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.default, {
     direction: "column",
@@ -75,7 +75,14 @@ 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.
@@ -100,7 +107,9 @@ function DemoContainer(props) {
   };
   let direction;
   let spacing;
-  let sx = (0, _extends2.default)({
+  let extraSx = {};
+  let demoItemSx = {};
+  const sx = (0, _extends2.default)({
     overflow: 'auto',
     // Add padding as overflow can hide the outline text field label.
     pt: 1
@@ -122,38 +131,57 @@ function DemoContainer(props) {
     // noop
   } else if (childrenTypes.has('single-input-range-field')) {
     if (!childrenSupportedSections.has('date-time')) {
-      sx = (0, _extends2.default)({}, sx, {
+      extraSx = {
         [`& > .${_TextField.textFieldClasses.root}`]: {
           minWidth: 300
         }
-      });
+      };
     } else {
-      sx = (0, _extends2.default)({}, sx, {
+      extraSx = {
         [`& > .${_TextField.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 = (0, _extends2.default)({}, sx, {
+    extraSx = {
       [`& > .${_TextField.textFieldClasses.root}`]: {
         minWidth: 270
       }
-    });
+    };
+    if (childrenTypes.has('multi-input-range-field')) {
+      // increase width for the multi input date time range fields
+      demoItemSx = {
+        [`& > .${_Stack.stackClasses.root} > .${_TextField.textFieldClasses.root}`]: {
+          minWidth: 210
+        }
+      };
+    }
   } else {
-    sx = (0, _extends2.default)({}, sx, {
+    extraSx = {
       [`& > .${_TextField.textFieldClasses.root}`]: {
         minWidth: 200
       }
-    });
+    };
   }
+  const finalSx = (0, _extends2.default)({}, sx, extraSx);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, {
     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: (0, _extends2.default)({}, extraSx, demoItemSx)
+        });
+      }
+      return child;
+    })
   });
 }

package/node/internals/hooks/useClockReferenceDate.js

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