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

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

@@ -0,0 +1,277 @@
+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", "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";
+var PickersInputRoot = styled(Box, {
+  name: 'MuiPickersInput',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.root;
+  }
+})(function (_ref) {
+  var theme = _ref.theme,
+    ownerState = _ref.ownerState;
+  var borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+  return _extends(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    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 .".concat(pickersInputClasses.notchedOutline), {
+    borderColor: (theme.vars || theme).palette.text.primary
+  }), '@media (hover: none)', _defineProperty({}, "&:hover .".concat(pickersInputClasses.notchedOutline), {
+    borderColor: theme.vars ? "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : borderColor
+  })), "&.".concat(pickersInputClasses.focused, " .").concat(pickersInputClasses.notchedOutline), {
+    borderStyle: 'solid',
+    borderColor: (theme.vars || theme).palette[ownerState.color].main,
+    borderWidth: 2
+  }), "&.".concat(pickersInputClasses.disabled), _defineProperty(_defineProperty({}, "& .".concat(pickersInputClasses.notchedOutline), {
+    borderColor: (theme.vars || theme).palette.action.disabled
+  }), '*', {
+    color: (theme.vars || theme).palette.action.disabled
+  })), "&.".concat(pickersInputClasses.error, " .").concat(pickersInputClasses.notchedOutline), {
+    borderColor: (theme.vars || theme).palette.error.main
+  }), ownerState.size === 'small' && {
+    padding: '8.5px 14px'
+  });
+});
+var PickersInputSectionsContainer = styled('div', {
+  name: 'MuiPickersInput',
+  slot: 'SectionsContainer',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.sectionsContainer;
+  }
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    ownerState = _ref2.ownerState;
+  return _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
+  }));
+});
+var PickersInputSection = styled('span', {
+  name: 'MuiPickersInput',
+  slot: 'Section',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.section;
+  }
+})(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    fontFamily: theme.typography.fontFamily,
+    fontSize: 'inherit',
+    lineHeight: '1.4375em',
+    // 23px
+    flexGrow: 1
+  };
+});
+var PickersInputContent = styled('span', {
+  name: 'MuiPickersInput',
+  slot: 'SectionContent',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.content;
+  }
+})(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    fontFamily: theme.typography.fontFamily,
+    lineHeight: '1.4375em',
+    // 23px
+    letterSpacing: 'inherit',
+    width: 'fit-content'
+  };
+});
+var PickersInputSeparator = styled('span', {
+  name: 'MuiPickersInput',
+  slot: 'Separator',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.separator;
+  }
+})(function () {
+  return {
+    whiteSpace: 'pre'
+  };
+});
+var PickersInputInput = styled('input', {
+  name: 'MuiPickersInput',
+  slot: 'Input',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.hiddenInput;
+  }
+})(_extends({}, visuallyHidden));
+var NotchedOutlineRoot = styled(Outline, {
+  name: 'MuiPickersInput',
+  slot: 'NotchedOutline',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.notchedOutline;
+  }
+})(function (_ref5) {
+  var theme = _ref5.theme;
+  var borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+  return {
+    borderColor: theme.vars ? "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : borderColor
+  };
+});
+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', readOnly && 'readOnly', error && 'error', fullWidth && 'fullWidth', "color".concat(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 var PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(props, ref) {
+  var elements = props.elements,
+    areAllSectionsEmpty = props.areAllSectionsEmpty,
+    defaultValue = props.defaultValue,
+    label = props.label,
+    value = props.value,
+    onChange = props.onChange,
+    id = props.id,
+    autoFocus = props.autoFocus,
+    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 rootRef = React.useRef(null);
+  var handleRootRef = useForkRef(ref, rootRef);
+  var handleInputRef = useForkRef(inputProps == null ? void 0 : inputProps.ref, inputRef);
+  var muiFormControl = useFormControl();
+  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]);
+  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(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(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: 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/legacy/internals/components/PickersTextField/PickersInput.types.js

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

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

@@ -0,0 +1,129 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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";
+var PickersTextFieldRoot = styled(FormControl, {
+  name: 'MuiPickersTextField',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.root;
+  }
+})({});
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var focused = ownerState.focused,
+    disabled = ownerState.disabled,
+    classes = ownerState.classes,
+    required = ownerState.required;
+  var slots = {
+    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', required && 'required']
+  };
+  return composeClasses(slots, getPickersTextFieldUtilityClass, classes);
+};
+export var PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(props, ref) {
+  var onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    className = props.className,
+    _props$color = props.color,
+    color = _props$color === void 0 ? 'primary' : _props$color,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$error = props.error,
+    error = _props$error === void 0 ? false : _props$error,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'outlined' : _props$variant,
+    InputProps = props.InputProps,
+    inputProps = props.inputProps,
+    inputRef = props.inputRef,
+    sectionsContainerRef = props.sectionsContainerRef,
+    elements = props.elements,
+    areAllSectionsEmpty = props.areAllSectionsEmpty,
+    onClick = props.onClick,
+    onKeyDown = props.onKeyDown,
+    onKeyUp = props.onKeyUp,
+    onPaste = props.onPaste,
+    onInput = props.onInput,
+    endAdornment = props.endAdornment,
+    startAdornment = props.startAdornment,
+    tabIndex = props.tabIndex,
+    contentEditable = props.contentEditable,
+    focused = props.focused,
+    value = props.value,
+    onChange = props.onChange,
+    fullWidth = props.fullWidth,
+    idProp = props.id,
+    helperText = props.helperText,
+    FormHelperTextProps = props.FormHelperTextProps,
+    label = props.label,
+    InputLabelProps = props.InputLabelProps,
+    other = _objectWithoutProperties(props, _excluded);
+  var rootRef = React.useRef(null);
+  var handleRootRef = useForkRef(ref, rootRef);
+  var id = useId(idProp);
+  var helperTextId = helperText && id ? "".concat(id, "-helper-text") : undefined;
+  var inputLabelId = label && id ? "".concat(id, "-label") : undefined;
+  var ownerState = _extends({}, props, {
+    color: color,
+    disabled: disabled,
+    error: error,
+    focused: focused,
+    required: required,
+    variant: variant
+  });
+  var 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/legacy/internals/components/PickersTextField/PickersTextField.types.js

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

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

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

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

@@ -0,0 +1,9 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getPickersTextFieldUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersTextField', slot);
+}
+export var pickersTextFieldClasses = generateUtilityClasses('MuiPickersTextField', ['root', 'focused', 'disabled', 'error', 'required']);
+export function getPickersInputUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersInput', slot);
+}
+export var pickersInputClasses = generateUtilityClasses('MuiPickersInput', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'adornedStart', 'adornedEnd', 'input', 'sectionsContainer', 'sectionContent', 'sectionBefore', 'sectionAfter']);

package/legacy/internals/constants/dimensions.js

@@ -2,6 +2,6 @@ export var DAY_SIZE = 36;
 export var DAY_MARGIN = 2;
 export var DIALOG_WIDTH = 320;
 export var MAX_CALENDAR_HEIGHT = 280;
-export var VIEW_HEIGHT = 334;
+export var VIEW_HEIGHT = 336;
 export var DIGITAL_CLOCK_VIEW_HEIGHT = 232;
 export var MULTI_SECTION_CLOCK_SECTION_WIDTH = 48;

package/legacy/internals/demo/DemoContainer.js

@@ -1,7 +1,7 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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,17 +40,17 @@ var getSupportedSectionFromChildName = function getSupportedSectionFromChildName
 export function DemoItem(props) {
   var label = props.label,
     children = props.children,
-    component = props.component;
+    component = props.component,
+    sxProp = props.sx;
   var spacing;
-  var sx;
+  var sx = sxProp;
   if (component && getChildTypeFromChildName(component) === 'multi-input-range-field') {
     spacing = 1.5;
-    sx = _defineProperty({}, "& .".concat(textFieldClasses.root), {
+    sx = _extends({}, sx, _defineProperty({}, "& .".concat(textFieldClasses.root), {
       flexGrow: 1
-    });
+    }));
   } else {
     spacing = 1;
-    sx = undefined;
   }
   return /*#__PURE__*/_jsxs(Stack, {
     direction: "column",
@@ -63,7 +63,14 @@ export function DemoItem(props) {
     }), children]
   });
 }
-
+DemoItem.displayName = 'DemoItem';
+var isDemoItem = function 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.
@@ -86,6 +93,8 @@ export function DemoContainer(props) {
   };
   var direction;
   var spacing;
+  var extraSx = {};
+  var demoItemSx = {};
   var sx = _extends({
     overflow: 'auto',
     // Add padding as overflow can hide the outline text field label.
@@ -108,30 +117,47 @@ export function DemoContainer(props) {
     // noop
   } else if (childrenTypes.has('single-input-range-field')) {
     if (!childrenSupportedSections.has('date-time')) {
-      sx = _extends({}, sx, _defineProperty({}, "& > .".concat(textFieldClasses.root), {
+      extraSx = _defineProperty({}, "& > .".concat(textFieldClasses.root), {
         minWidth: 300
-      }));
+      });
     } else {
-      sx = _extends({}, sx, _defineProperty({}, "& > .".concat(textFieldClasses.root), {
+      extraSx = _defineProperty({}, "& > .".concat(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, _defineProperty({}, "& > .".concat(textFieldClasses.root), {
+    extraSx = _defineProperty({}, "& > .".concat(textFieldClasses.root), {
       minWidth: 270
-    }));
+    });
+    if (childrenTypes.has('multi-input-range-field')) {
+      // increase width for the multi input date time range fields
+      demoItemSx = _defineProperty({}, "& > .".concat(stackClasses.root, " > .").concat(textFieldClasses.root), {
+        minWidth: 210
+      });
+    }
   } else {
-    sx = _extends({}, sx, _defineProperty({}, "& > .".concat(textFieldClasses.root), {
+    extraSx = _defineProperty({}, "& > .".concat(textFieldClasses.root), {
       minWidth: 200
-    }));
+    });
   }
+  var finalSx = _extends({}, sx, extraSx);
   return /*#__PURE__*/_jsx(Stack, {
     direction: direction,
     spacing: spacing,
-    sx: sx,
-    children: children
+    sx: finalSx,
+    children: React.Children.map(children, function (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/legacy/internals/hooks/useClockReferenceDate.js

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

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

@@ -133,7 +133,6 @@ export var adjustSectionValue = function adjustSectionValue(utils, timezone, sec
       if (delta < 0 || isStart) {
         newSectionValueNumber += step - (step + newSectionValueNumber) % step; // for JS -3 % 5 = -3 (should be 2)
       }
-
       if (delta > 0 || isEnd) {
         newSectionValueNumber -= newSectionValueNumber % step;
       }
@@ -217,49 +216,62 @@ export var addPositionPropertiesToSections = function addPositionPropertiesToSec
   }
   return newSections;
 };
-var getSectionPlaceholder = function getSectionPlaceholder(utils, timezone, localeText, sectionConfig, currentTokenValue) {
+var getSectionPlaceholder = function getSectionPlaceholder(utils, timezone, localeText, sectionConfig, sectionFormat) {
   switch (sectionConfig.type) {
     case 'year':
       {
         return localeText.fieldYearPlaceholder({
-          digitAmount: utils.formatByString(utils.date(undefined, timezone), currentTokenValue).length
+          digitAmount: utils.formatByString(utils.date(undefined, timezone), sectionFormat).length,
+          format: sectionFormat
         });
       }
     case 'month':
       {
         return localeText.fieldMonthPlaceholder({
-          contentType: sectionConfig.contentType
+          contentType: sectionConfig.contentType,
+          format: sectionFormat
         });
       }
     case 'day':
       {
-        return localeText.fieldDayPlaceholder();
+        return localeText.fieldDayPlaceholder({
+          format: sectionFormat
+        });
       }
     case 'weekDay':
       {
         return localeText.fieldWeekDayPlaceholder({
-          contentType: sectionConfig.contentType
+          contentType: sectionConfig.contentType,
+          format: sectionFormat
         });
       }
     case 'hours':
       {
-        return localeText.fieldHoursPlaceholder();
+        return localeText.fieldHoursPlaceholder({
+          format: sectionFormat
+        });
       }
     case 'minutes':
       {
-        return localeText.fieldMinutesPlaceholder();
+        return localeText.fieldMinutesPlaceholder({
+          format: sectionFormat
+        });
       }
     case 'seconds':
       {
-        return localeText.fieldSecondsPlaceholder();
+        return localeText.fieldSecondsPlaceholder({
+          format: sectionFormat
+        });
       }
     case 'meridiem':
       {
-        return localeText.fieldMeridiemPlaceholder();
+        return localeText.fieldMeridiemPlaceholder({
+          format: sectionFormat
+        });
       }
     default:
       {
-        return currentTokenValue;
+        return sectionFormat;
       }
   }
 };
@@ -400,7 +412,6 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, tim
   }) // Sort to put longest word first
   .join('|'), ")"), 'g') // used to get access to lastIndex state
   ;
-
   var currentTokenValue = '';
   var _loop = function _loop(_i) {
     var escapedPartOfCurrentChar = escapedParts.find(function (escapeIndex) {

package/legacy/internals/hooks/usePicker/usePickerValue.js

@@ -220,9 +220,7 @@ export var usePickerValue = function usePickerValue(_ref) {
       var context = {
         validationError: validationError
       };
-
-      // TODO v7: Remove 2nd condition
-      if (action.name === 'setValueFromShortcut' && action.shortcut != null) {
+      if (action.name === 'setValueFromShortcut') {
         context.shortcut = action.shortcut;
       }
       handleValueChange(action.value, context);
@@ -296,13 +294,11 @@ export var usePickerValue = function usePickerValue(_ref) {
       selectionState: selectionState
     });
   });
-
-  // TODO v7: Make changeImportance and label mandatory.
   var handleSelectShortcut = useEventCallback(function (newValue, changeImportance, shortcut) {
     return updateDate({
       name: 'setValueFromShortcut',
       value: newValue,
-      changeImportance: changeImportance != null ? changeImportance : 'accept',
+      changeImportance: changeImportance,
       shortcut: shortcut
     });
   });