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

package/internals/components/PickersTextField/PickersInput.js

@@ -0,0 +1,264 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _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";
+const SectionsWrapper = styled(Box, {
+  name: 'MuiPickersInput',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme,
+  ownerState
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+  return _extends({
+    cursor: 'text',
+    padding: '16.5px 14px',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: ownerState.fullWidth ? '100%' : '25ch',
+    position: 'relative',
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    [`&:hover .${pickersInputClasses.notchedOutline}`]: {
+      borderColor: (theme.vars || theme).palette.text.primary
+    },
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      [`&:hover .${pickersInputClasses.notchedOutline}`]: {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+      }
+    },
+    [`&.${pickersInputClasses.focused} .${pickersInputClasses.notchedOutline}`]: {
+      borderStyle: 'solid',
+      borderColor: (theme.vars || theme).palette[ownerState.color].main,
+      borderWidth: 2
+    },
+    [`&.${pickersInputClasses.disabled}`]: {
+      [`& .${pickersInputClasses.notchedOutline}`]: {
+        borderColor: (theme.vars || theme).palette.action.disabled
+      },
+      '*': {
+        color: (theme.vars || theme).palette.action.disabled
+      }
+    },
+    [`&.${pickersInputClasses.error} .${pickersInputClasses.notchedOutline}`]: {
+      borderColor: (theme.vars || theme).palette.error.main
+    }
+  }, ownerState.size === 'small' && {
+    padding: '8.5px 14px'
+  });
+});
+const SectionsContainer = styled('div', {
+  name: 'MuiPickersInput',
+  slot: 'Input',
+  overridesResolver: (props, styles) => styles.input
+})(({
+  theme,
+  ownerState
+}) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: 'inherit',
+  lineHeight: '1.4375em',
+  // 23px
+  flexGrow: 1,
+  visibility: ownerState.adornedStart || ownerState.focused ? 'visible' : 'hidden'
+}));
+const SectionContainer = 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 SectionInput = styled('span', {
+  name: 'MuiPickersInput',
+  slot: 'Content',
+  overridesResolver: (props, styles) => styles.content
+})(({
+  theme
+}) => ({
+  fontFamily: theme.typography.fontFamily,
+  lineHeight: '1.4375em',
+  // 23px
+  letterSpacing: 'inherit',
+  width: 'fit-content'
+}));
+const SectionSeparator = styled('span', {
+  name: 'MuiPickersInput',
+  slot: 'Separator',
+  overridesResolver: (props, styles) => styles.separator
+})(() => ({
+  whiteSpace: 'pre'
+}));
+const FakeHiddenInput = styled('input', {
+  name: 'MuiPickersInput',
+  slot: 'HiddenInput',
+  overridesResolver: (props, styles) => styles.hiddenInput
+})(_extends({}, visuallyHidden));
+const NotchedOutlineRoot = styled(Outline, {
+  name: 'MuiPickersInput',
+  slot: 'NotchedOutline',
+  overridesResolver: (props, styles) => styles.notchedOutline
+})(({
+  theme
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+  return {
+    borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+  };
+});
+function InputContent({
+  elements,
+  contentEditable,
+  ownerState
+}) {
+  if (contentEditable) {
+    return elements.map(({
+      content,
+      before,
+      after
+    }) => `${before.children}${content.children}${after.children}`).join('');
+  }
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: elements.map(({
+      container,
+      content,
+      before,
+      after
+    }, elementIndex) => /*#__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
+      })), /*#__PURE__*/_jsx(SectionSeparator, _extends({}, after, {
+        className: clsx(pickersInputClasses.after, after == null ? void 0 : after.className)
+      }))]
+    }), elementIndex))
+  });
+}
+const useUtilityClasses = ownerState => {
+  const {
+    focused,
+    disabled,
+    error,
+    classes,
+    fullWidth,
+    color,
+    size,
+    endAdornment,
+    startAdornment
+  } = ownerState;
+  const slots = {
+    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', `color${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({
+  props,
+  states,
+  muiFormControl
+}) {
+  return states.reduce((acc, state) => {
+    acc[state] = props[state];
+    if (muiFormControl) {
+      if (typeof props[state] === 'undefined') {
+        acc[state] = muiFormControl[state];
+      }
+    }
+    return acc;
+  }, {});
+}
+const PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(props, ref) {
+  const {
+      elements,
+      label,
+      onWrapperClick,
+      valueStr,
+      onValueStrChange,
+      id,
+      ownerState: ownerStateProp,
+      endAdornment,
+      startAdornment
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const inputRef = React.useRef(null);
+  const handleInputRef = useForkRef(ref, inputRef);
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['color', 'disabled', 'error', 'focused', 'size', 'required', 'fullWidth', 'adornedStart']
+  });
+  React.useEffect(() => {
+    if (muiFormControl) {
+      muiFormControl.setAdornedStart(Boolean(startAdornment));
+    }
+  }, [muiFormControl, startAdornment]);
+  const ownerState = _extends({}, props, ownerStateProp, {
+    color: fcs.color || 'primary',
+    disabled: fcs.disabled,
+    error: fcs.error,
+    focused: fcs.focused,
+    fullWidth: fcs.fullWidth,
+    size: fcs.size
+  });
+  const 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/internals/components/PickersTextField/PickersInput.types.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { OutlinedInputProps } from '@mui/material/OutlinedInput';
+import { FieldsTextFieldProps } from '../../models';
+export interface PickersInputElement {
+    container: React.HTMLAttributes<HTMLSpanElement>;
+    content: React.HTMLAttributes<HTMLSpanElement>;
+    before: React.HTMLAttributes<HTMLSpanElement>;
+    after: React.HTMLAttributes<HTMLSpanElement>;
+}
+export interface PickersInputProps extends FieldsTextFieldProps {
+    elements: PickersInputElement[];
+    areAllSectionsEmpty?: boolean;
+    valueStr: string;
+    onValueStrChange: React.ChangeEventHandler<HTMLInputElement>;
+    id?: string;
+    InputProps?: Partial<OutlinedInputProps>;
+    inputProps: any;
+    autoFocus?: boolean;
+    ownerState?: any;
+    onWrapperClick: () => void;
+    defaultValue: string;
+    label?: string;
+    endAdornment?: React.ReactNode;
+    startAdornment?: React.ReactNode;
+    onBlur?: React.FocusEventHandler;
+    onChange?: React.FormEventHandler;
+    onFocus?: React.FocusEventHandler;
+    onKeyDown?: React.KeyboardEventHandler;
+    onKeyUp?: React.KeyboardEventHandler;
+}

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

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

package/internals/components/PickersTextField/PickersTextField.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PickersTextFieldProps } from './PickersTextField.types';
+export declare const PickersTextField: React.ForwardRefExoticComponent<Omit<PickersTextFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/internals/components/PickersTextField/PickersTextField.js

@@ -0,0 +1,120 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _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";
+const PickersTextFieldRoot = styled(FormControl, {
+  name: 'MuiPickersTextField',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
+const useUtilityClasses = ownerState => {
+  const {
+    focused,
+    disabled,
+    classes,
+    required
+  } = ownerState;
+  const slots = {
+    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', required && 'required']
+  };
+  return composeClasses(slots, getPickersTextFieldUtilityClass, classes);
+};
+export const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(props, ref) {
+  const {
+      elements,
+      className,
+      color = 'primary',
+      disabled = false,
+      error = false,
+      label,
+      variant = 'outlined',
+      fullWidth = false,
+      valueStr,
+      helperText,
+      valueType,
+      id: idOverride,
+      FormHelperTextProps,
+      InputLabelProps,
+      inputProps,
+      InputProps,
+      required = false,
+      focused: focusedProp
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const [focused, setFocused] = React.useState(focusedProp);
+  const rootRef = React.useRef(null);
+  const handleRootRef = useForkRef(ref, rootRef);
+  const inputRef = React.useRef(null);
+  const handleInputRef = useForkRef(inputRef, InputProps == null ? void 0 : InputProps.ref);
+  const id = useId(idOverride);
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const inputLabelId = label && id ? `${id}-label` : undefined;
+  const ownerState = _extends({}, props, {
+    color,
+    disabled,
+    error,
+    focused,
+    variant
+  });
+  const classes = useUtilityClasses(ownerState);
+
+  // TODO: delete after behavior implementation
+  const onWrapperClick = () => {
+    if (!focused) {
+      var _inputRef$current;
+      setFocused(true);
+      const container = rootRef.current;
+
+      // Find the first input element within the container
+      const 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,
+      valueStr,
+      valueType,
+      onWrapperClick,
+      inputProps,
+      label
+    }, other, InputProps, {
+      ref: handleInputRef
+    })), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
+      id: helperTextId
+    }, FormHelperTextProps, {
+      children: helperText
+    }))]
+  });
+});

package/internals/components/PickersTextField/PickersTextField.types.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { TextFieldClasses } from '@mui/material/TextField';
+import { PickersInputProps } from './PickersInput.types';
+export interface PickersTextFieldProps extends PickersInputProps {
+    classes?: Partial<TextFieldClasses>;
+    className?: string;
+    color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+    disabled?: boolean;
+    error?: boolean;
+    fullWidth?: boolean;
+    helperText?: React.ReactNode;
+    size?: 'small' | 'medium';
+    variant?: 'filled' | 'outlined' | 'standard';
+    valueStr: string;
+    InputProps: any;
+    valueType: 'value' | 'placeholder';
+    required?: boolean;
+}

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

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

package/internals/components/PickersTextField/index.d.ts

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

package/internals/components/PickersTextField/index.js

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

package/internals/components/PickersTextField/pickersTextFieldClasses.d.ts

@@ -0,0 +1,42 @@
+export interface PickersTextFieldClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if focused. */
+    focused: string;
+    /** State class applied to the root element if `disabled=true`. */
+    disabled: string;
+    /** State class applied to the root element if `error=true`. */
+    error: string;
+    /** State class applied to the root element id `required=true` */
+    required: string;
+}
+export type PickersTextFieldClassKey = keyof PickersTextFieldClasses;
+export declare function getPickersTextFieldUtilityClass(slot: string): string;
+export declare const pickersTextFieldClasses: Record<keyof PickersTextFieldClasses, string>;
+export interface PickersInputClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if focused. */
+    focused: string;
+    /** State class applied to the root element if `disabled=true`. */
+    disabled: string;
+    /** State class applied to the root element if `error=true`. */
+    error: string;
+    /** Styles applied to the NotchedOutline element. */
+    notchedOutline: string;
+    /** Styles applied to the fake input element. */
+    input: string;
+    /** Styles applied to the section of the picker. */
+    content: string;
+    /** Styles applied to the startSeparator */
+    before: string;
+    /** Styles applied to the endSeparator */
+    after: string;
+    /** Styles applied to the root if there is a startAdornment present */
+    adornedStart: string;
+    /** Styles applied to the root if there is an endAdornment present */
+    adornedEnd: string;
+}
+export type PickersInputClassKey = keyof PickersInputClasses;
+export declare function getPickersInputUtilityClass(slot: string): string;
+export declare const pickersInputClasses: Record<keyof PickersInputClasses, string>;

package/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 const pickersTextFieldClasses = generateUtilityClasses('MuiPickersTextField', ['root', 'focused', 'disabled', 'error', 'required']);
+export function getPickersInputUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersInput', slot);
+}
+export const pickersInputClasses = generateUtilityClasses('MuiPickersInput', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'content', 'before', 'after', 'adornedStart', 'adornedEnd', 'input']);

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

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

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

@@ -34,7 +34,7 @@ const getDeltaFromKeyCode = keyCode => {
 };
 export const getDaysInWeekStr = (utils, timezone, format) => {
   const elements = [];
-  const now = utils.dateWithTimezone(undefined, timezone);
+  const now = utils.date(undefined, timezone);
   const startDate = utils.startOfWeek(now);
   const endDate = utils.endOfWeek(now);
   let current = startDate;
@@ -48,7 +48,7 @@ export const getLetterEditingOptions = (utils, timezone, sectionType, format) =>
   switch (sectionType) {
     case 'month':
       {
-        return getMonthsInYear(utils, utils.dateWithTimezone(undefined, timezone)).map(month => utils.formatByString(month, format));
+        return getMonthsInYear(utils, utils.date(undefined, timezone)).map(month => utils.formatByString(month, format));
       }
     case 'weekDay':
       {
@@ -56,7 +56,7 @@ export const getLetterEditingOptions = (utils, timezone, sectionType, format) =>
       }
     case 'meridiem':
       {
-        const now = utils.dateWithTimezone(undefined, timezone);
+        const now = utils.date(undefined, timezone);
         return [utils.startOfDay(now), utils.endOfDay(now)].map(date => utils.formatByString(date, format));
       }
     default:
@@ -113,7 +113,7 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
     let 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;
@@ -207,49 +207,62 @@ export const addPositionPropertiesToSections = (sections, isRTL) => {
   }
   return newSections;
 };
-const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, currentTokenValue) => {
+const 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;
       }
   }
 };
@@ -261,12 +274,12 @@ export const changeSectionValueFormat = (utils, valueStr, currentFormat, newForm
   }
   return utils.formatByString(utils.parse(valueStr, currentFormat), newFormat);
 };
-const isFourDigitYearFormat = (utils, timezone, format) => utils.formatByString(utils.dateWithTimezone(undefined, timezone), format).length === 4;
+const isFourDigitYearFormat = (utils, timezone, format) => utils.formatByString(utils.date(undefined, timezone), format).length === 4;
 export const doesSectionFormatHaveLeadingZeros = (utils, timezone, contentType, sectionType, format) => {
   if (contentType !== 'digit') {
     return false;
   }
-  const now = utils.dateWithTimezone(undefined, timezone);
+  const now = utils.date(undefined, timezone);
   switch (sectionType) {
     // We can't use `changeSectionValueFormat`, because  `utils.parse('1', 'YYYY')` returns `1971` instead of `1`.
     case 'year':
@@ -472,7 +485,7 @@ export const createDateStrForInputFromSections = (sections, isRTL) => {
   return `\u2066${dateStr}\u2069`;
 };
 export const getSectionsBoundaries = (utils, timezone) => {
-  const today = utils.dateWithTimezone(undefined, timezone);
+  const today = utils.date(undefined, timezone);
   const endOfYear = utils.endOfYear(today);
   const endOfDay = utils.endOfDay(today);
   const {

package/internals/hooks/useField/useFieldState.js

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