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

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

@@ -0,0 +1,100 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["children", "classes", "className", "label", "notched"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+var 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%'
+});
+var OutlineLegend = styled('legend')(function (_ref) {
+  var ownerState = _ref.ownerState,
+    theme = _ref.theme;
+  return _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) {
+  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({
+    "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/legacy/internals/components/PickersTextField/PickersInput.js

@@ -0,0 +1,273 @@
+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"];
+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 { 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, {
+  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',
+    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 SectionsContainer = styled('div', {
+  name: 'MuiPickersInput',
+  slot: 'Input',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.input;
+  }
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    ownerState = _ref2.ownerState;
+  return {
+    fontFamily: theme.typography.fontFamily,
+    fontSize: 'inherit',
+    lineHeight: '1.4375em',
+    // 23px
+    flexGrow: 1,
+    visibility: ownerState.adornedStart || ownerState.focused ? 'visible' : 'hidden'
+  };
+});
+var SectionContainer = 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 SectionInput = styled('span', {
+  name: 'MuiPickersInput',
+  slot: 'Content',
+  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 SectionSeparator = styled('span', {
+  name: 'MuiPickersInput',
+  slot: 'Separator',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.separator;
+  }
+})(function () {
+  return {
+    whiteSpace: 'pre'
+  };
+});
+var FakeHiddenInput = styled('input', {
+  name: 'MuiPickersInput',
+  slot: 'HiddenInput',
+  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
+  };
+});
+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,
+    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'],
+    notchedOutline: ['notchedOutline'],
+    before: ['before'],
+    after: ['after'],
+    content: ['content'],
+    input: ['input']
+  };
+  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) {
+  var elements = props.elements,
+    defaultValue = props.defaultValue,
+    label = props.label,
+    onFocus = props.onFocus,
+    onWrapperClick = props.onWrapperClick,
+    onBlur = props.onBlur,
+    valueStr = props.valueStr,
+    onValueStrChange = props.onValueStrChange,
+    id = props.id,
+    InputProps = props.InputProps,
+    inputProps = props.inputProps,
+    autoFocus = props.autoFocus,
+    ownerStateProp = props.ownerState,
+    endAdornment = props.endAdornment,
+    startAdornment = props.startAdornment,
+    other = _objectWithoutProperties(props, _excluded);
+  var inputRef = React.useRef(null);
+  var handleInputRef = useForkRef(ref, inputRef);
+  var muiFormControl = useFormControl();
+  var fcs = formControlState({
+    props: props,
+    muiFormControl: muiFormControl,
+    states: ['color', 'disabled', 'error', 'focused', 'size', 'required', 'fullWidth', 'adornedStart']
+  });
+  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
+  });
+  var classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsxs(SectionsWrapper, _extends({
+    ref: handleInputRef
+  }, other, {
+    className: classes.root,
+    onClick: onWrapperClick,
+    ownerState: ownerState,
+    "aria-invalid": fcs.error,
+    children: [startAdornment, /*#__PURE__*/_jsxs(SectionsContainer, {
+      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
+      })]
+    }), endAdornment, /*#__PURE__*/_jsx(NotchedOutlineRoot, {
+      shrink: fcs.adornedStart || fcs.focused,
+      notched: fcs.adornedStart || fcs.focused,
+      className: classes.notchedOutline,
+      label: label != null && label !== '' && fcs.required ? /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [label, "\u2009", '*']
+      }) : label,
+      ownerState: ownerState
+    })]
+  }));
+});
+export default PickersInput;

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 _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["elements", "className", "color", "disabled", "error", "label", "variant", "fullWidth", "valueStr", "helperText", "valueType", "id", "FormHelperTextProps", "InputLabelProps", "inputProps", "InputProps", "required", "focused", "ownerState"];
+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 elements = props.elements,
+    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,
+    label = props.label,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'outlined' : _props$variant,
+    _props$fullWidth = props.fullWidth,
+    fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
+    valueStr = props.valueStr,
+    helperText = props.helperText,
+    valueType = props.valueType,
+    idOverride = props.id,
+    FormHelperTextProps = props.FormHelperTextProps,
+    InputLabelProps = props.InputLabelProps,
+    inputProps = props.inputProps,
+    InputProps = props.InputProps,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    focusedProp = props.focused,
+    ownerStateProp = props.ownerState,
+    other = _objectWithoutProperties(props, _excluded);
+  var _React$useState = React.useState(focusedProp),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focused = _React$useState2[0],
+    setFocused = _React$useState2[1];
+  var rootRef = React.useRef(null);
+  var handleRootRef = useForkRef(ref, rootRef);
+  var inputRef = React.useRef(null);
+  var handleInputRef = useForkRef(inputRef, InputProps == null ? void 0 : InputProps.ref);
+  var id = useId(idOverride);
+  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,
+    variant: variant
+  });
+  var classes = useUtilityClasses(ownerState);
+
+  // TODO: delete after behavior implementation
+  var onWrapperClick = function onWrapperClick() {
+    if (!focused) {
+      var _inputRef$current;
+      setFocused(true);
+      var container = rootRef.current;
+
+      // Find the first input element within the container
+      var firstInput = container == null ? void 0 : container.querySelector('.content');
+
+      // Check if the input element exists before focusing it
+      if (firstInput) {
+        firstInput.focus();
+      }
+      (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+    }
+  };
+  return /*#__PURE__*/_jsxs(PickersTextFieldRoot, {
+    className: clsx(classes.root, className),
+    ref: handleRootRef,
+    focused: focused,
+    disabled: disabled,
+    variant: variant,
+    error: error,
+    color: color,
+    fullWidth: fullWidth,
+    required: required,
+    ownerState: ownerState,
+    children: [/*#__PURE__*/_jsx(InputLabel, _extends({
+      htmlFor: id,
+      id: inputLabelId
+    }, InputLabelProps, {
+      children: label
+    })), /*#__PURE__*/_jsx(PickersInput, _extends({
+      elements: elements,
+      valueStr: valueStr,
+      valueType: valueType,
+      onWrapperClick: onWrapperClick,
+      inputProps: inputProps,
+      label: label
+    }, other, InputProps, {
+      ref: handleInputRef
+    })), 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', 'content', 'before', 'after', 'adornedStart', 'adornedEnd', 'input']);

package/legacy/internals/hooks/date-helpers-hooks.js

@@ -7,7 +7,7 @@ export function useNextMonthDisabled(month, _ref) {
     timezone = _ref.timezone;
   var utils = useUtils();
   return React.useMemo(function () {
-    var now = utils.dateWithTimezone(undefined, timezone);
+    var now = utils.date(undefined, timezone);
     var lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
     return !utils.isAfter(lastEnabledMonth, month);
   }, [disableFuture, maxDate, month, utils, timezone]);
@@ -18,7 +18,7 @@ export function usePreviousMonthDisabled(month, _ref2) {
     timezone = _ref2.timezone;
   var utils = useUtils();
   return React.useMemo(function () {
-    var now = utils.dateWithTimezone(undefined, timezone);
+    var now = utils.date(undefined, timezone);
     var firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     return !utils.isBefore(firstEnabledMonth, month);
   }, [disablePast, minDate, month, utils, timezone]);

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

@@ -35,7 +35,7 @@ var getDeltaFromKeyCode = function getDeltaFromKeyCode(keyCode) {
 };
 export var getDaysInWeekStr = function getDaysInWeekStr(utils, timezone, format) {
   var elements = [];
-  var now = utils.dateWithTimezone(undefined, timezone);
+  var now = utils.date(undefined, timezone);
   var startDate = utils.startOfWeek(now);
   var endDate = utils.endOfWeek(now);
   var current = startDate;
@@ -51,7 +51,7 @@ export var getLetterEditingOptions = function getLetterEditingOptions(utils, tim
   switch (sectionType) {
     case 'month':
       {
-        return getMonthsInYear(utils, utils.dateWithTimezone(undefined, timezone)).map(function (month) {
+        return getMonthsInYear(utils, utils.date(undefined, timezone)).map(function (month) {
           return utils.formatByString(month, format);
         });
       }
@@ -61,7 +61,7 @@ export var getLetterEditingOptions = function getLetterEditingOptions(utils, tim
       }
     case 'meridiem':
       {
-        var now = utils.dateWithTimezone(undefined, timezone);
+        var now = utils.date(undefined, timezone);
         return [utils.startOfDay(now), utils.endOfDay(now)].map(function (date) {
           return utils.formatByString(date, format);
         });
@@ -121,7 +121,7 @@ export var adjustSectionValue = function adjustSectionValue(utils, timezone, sec
     var newSectionValueNumber = currentSectionValue + delta * step;
     if (shouldSetAbsolute) {
       if (section.type === 'year' && !isEnd && !isStart) {
-        return utils.formatByString(utils.dateWithTimezone(undefined, timezone), section.format);
+        return utils.formatByString(utils.date(undefined, timezone), section.format);
       }
       if (delta > 0 || isStart) {
         newSectionValueNumber = sectionBoundaries.minimum;
@@ -217,49 +217,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.dateWithTimezone(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;
       }
   }
 };
@@ -272,13 +285,13 @@ export var changeSectionValueFormat = function changeSectionValueFormat(utils, v
   return utils.formatByString(utils.parse(valueStr, currentFormat), newFormat);
 };
 var isFourDigitYearFormat = function isFourDigitYearFormat(utils, timezone, format) {
-  return utils.formatByString(utils.dateWithTimezone(undefined, timezone), format).length === 4;
+  return utils.formatByString(utils.date(undefined, timezone), format).length === 4;
 };
 export var doesSectionFormatHaveLeadingZeros = function doesSectionFormatHaveLeadingZeros(utils, timezone, contentType, sectionType, format) {
   if (contentType !== 'digit') {
     return false;
   }
-  var now = utils.dateWithTimezone(undefined, timezone);
+  var now = utils.date(undefined, timezone);
   switch (sectionType) {
     // We can't use `changeSectionValueFormat`, because  `utils.parse('1', 'YYYY')` returns `1971` instead of `1`.
     case 'year':
@@ -493,7 +506,7 @@ export var createDateStrForInputFromSections = function createDateStrForInputFro
   return "\u2066".concat(dateStr, "\u2069");
 };
 export var getSectionsBoundaries = function getSectionsBoundaries(utils, timezone) {
-  var today = utils.dateWithTimezone(undefined, timezone);
+  var today = utils.date(undefined, timezone);
   var endOfYear = utils.endOfYear(today);
   var endOfDay = utils.endOfDay(today);
   var _getMonthsInYear$redu = getMonthsInYear(utils, today).reduce(function (acc, month) {

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

@@ -178,7 +178,7 @@ export var useFieldState = function useFieldState(params) {
     }).length;
     var hasNoOtherNonEmptySections = nonEmptySectionCountBefore === (activeSection.value === '' ? 0 : 1);
     var newSections = setSectionValue(selectedSectionIndexes.startIndex, '');
-    var newActiveDate = hasNoOtherNonEmptySections ? null : utils.date(new Date(''));
+    var newActiveDate = hasNoOtherNonEmptySections ? null : utils.getInvalidDate();
     var newValues = activeDateManager.getNewValuesFromNewActiveDate(newActiveDate);
     if ((newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.date != null && !utils.isValid(activeDateManager.date))) {
       publishValue(_extends({}, newValues, {