@mui/x-date-pickers 8.0.0-beta.0 → 8.0.0-beta.2

package/modern/PickersSectionList/PickersSectionList.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PickersSectionListProps } from "./PickersSectionList.types.js";
+import type { PickersSectionListProps } from './PickersSectionList.types';
 export declare const PickersSectionListRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const PickersSectionListSection: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
 export declare const PickersSectionListSectionSeparator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;

package/modern/PickersSectionList/PickersSectionList.types.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import { PickersSectionListClasses } from "./pickersSectionListClasses.js";
 import { PickerOwnerState } from "../models/index.js";
+import type { UseFieldDOMGetters } from '../internals/hooks/useField/useField.types';
 export interface PickersSectionListSlots {
   root: React.ElementType;
   section: React.ElementType;
@@ -28,12 +29,7 @@ export interface PickersSectionElement {
   before: React.HTMLAttributes<HTMLSpanElement>;
   after: React.HTMLAttributes<HTMLSpanElement>;
 }
-export interface PickersSectionListRef {
-  getRoot: () => HTMLElement;
-  getSectionContainer: (sectionIndex: number) => HTMLElement;
-  getSectionContent: (sectionIndex: number) => HTMLElement;
-  getSectionIndexFromDOMElement: (element: Element | null | undefined) => number | null;
-}
+export interface PickersSectionListRef extends Omit<UseFieldDOMGetters, 'isReady'> {}
 export interface ExportedPickersSectionListProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {
   /**
    * The elements to render.

package/modern/TimeField/useTimeField.d.ts

@@ -1,2 +1,2 @@
 import { UseTimeFieldProps } from "./TimeField.types.js";
-export declare const useTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | keyof import("../internals").BaseTimeValidationProps | keyof import("../internals").TimeValidationProps | "ampm" | "referenceDate" | "formatDensity" | "timezone" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;
+export declare const useTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TProps) => import("../internals").UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;

package/modern/TimeField/useTimeField.js

@@ -1,25 +1,11 @@
 'use client';
 
-import { useField, useFieldInternalPropsWithDefaults } from "../internals/hooks/useField/index.js";
-import { useSplitFieldProps } from "../hooks/index.js";
+import { useField } from "../internals/hooks/useField/index.js";
 import { useTimeManager } from "../managers/index.js";
 export const useTimeField = props => {
   const manager = useTimeManager(props);
-  const {
-    forwardedProps,
-    internalProps
-  } = useSplitFieldProps(props, 'time');
-  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
-    manager,
-    internalProps
-  });
   return useField({
-    forwardedProps,
-    internalProps: internalPropsWithDefaults,
-    valueManager: manager.internal_valueManager,
-    fieldValueManager: manager.internal_fieldValueManager,
-    validator: manager.validator,
-    valueType: manager.valueType,
-    getOpenPickerButtonAriaLabel: manager.internal_useOpenPickerButtonAriaLabel()
+    manager,
+    props
   });
 };

package/modern/TimePicker/TimePicker.js

@@ -102,6 +102,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

package/modern/TimePicker/shared.js

@@ -4,12 +4,14 @@ import { useThemeProps } from '@mui/material/styles';
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { TimePickerToolbar } from "./TimePickerToolbar.js";
 import { applyDefaultViewProps } from "../internals/utils/views.js";
+import { useApplyDefaultValuesToTimeValidationProps } from "../managers/useTimeManager.js";
 export function useTimePickerDefaultizedProps(props, name) {
   const utils = useUtils();
   const themeProps = useThemeProps({
     props,
     name
   });
+  const validationProps = useApplyDefaultValuesToTimeValidationProps(themeProps);
   const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
@@ -19,7 +21,7 @@ export function useTimePickerDefaultizedProps(props, name) {
       timePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  return _extends({}, themeProps, {
+  return _extends({}, themeProps, validationProps, {
     ampm,
     localeText
   }, applyDefaultViewProps({
@@ -28,8 +30,6 @@ export function useTimePickerDefaultizedProps(props, name) {
     defaultViews: ['hours', 'minutes'],
     defaultOpenTo: 'hours'
   }), {
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
     slots: _extends({
       toolbar: TimePickerToolbar
     }, themeProps.slots),

package/modern/YearCalendar/YearCalendar.js

@@ -11,14 +11,14 @@ import { shouldForwardProp } from '@mui/system/createStyled';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_useControlled as useControlled, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { YearCalendarButton } from "./YearCalendarButton.js";
-import { useUtils, useNow, useDefaultDates } from "../internals/hooks/useUtils.js";
+import { useUtils, useNow } from "../internals/hooks/useUtils.js";
 import { getYearCalendarUtilityClass } from "./yearCalendarClasses.js";
-import { applyDefaultDate } from "../internals/utils/date-utils.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
 import { useControlledValue } from "../internals/hooks/useControlledValue.js";
 import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from "../internals/constants/dimensions.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { useApplyDefaultValuesToDateValidationProps } from "../managers/useDateManager.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -27,20 +27,14 @@ const useUtilityClasses = classes => {
   return composeClasses(slots, getYearCalendarUtilityClass, classes);
 };
 function useYearCalendarDefaultizedProps(props, name) {
-  const utils = useUtils();
-  const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
-  return _extends({
-    disablePast: false,
-    disableFuture: false
-  }, themeProps, {
+  const validationProps = useApplyDefaultValuesToDateValidationProps(themeProps);
+  return _extends({}, themeProps, validationProps, {
     yearsPerRow: themeProps.yearsPerRow ?? 3,
-    yearsOrder: themeProps.yearsOrder ?? 'asc',
-    minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
+    yearsOrder: themeProps.yearsOrder ?? 'asc'
   });
 }
 const YearCalendarRoot = styled('div', {

package/modern/hooks/useSplitFieldProps.d.ts

@@ -1,7 +1,7 @@
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.js";
 import { PickerValueType } from "../models/common.js";
 declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "unstableStartFieldRef", "unstableEndFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator", "autoFocus", "focused"];
-type InternalPropNames<TValueType extends PickerValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
+export type InternalPropNames<TValueType extends PickerValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
 /**
  * Split the props received by the field component into:
  * - `internalProps` which are used by the various hooks called by the field component.

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-beta.0
+ * @mui/x-date-pickers v8.0.0-beta.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/PickerFieldUI.d.ts

@@ -6,9 +6,9 @@ import { SvgIconProps } from '@mui/material/SvgIcon';
 import { MakeOptional, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { FieldOwnerState } from "../../models/index.js";
 import { UseFieldOwnerStateParameters } from "../hooks/useFieldOwnerState.js";
-import type { UseFieldResponse } from '../hooks/useField';
+import type { UseFieldReturnValue, UseFieldProps } from '../hooks/useField';
 import { PickersTextFieldProps } from "../../PickersTextField/index.js";
-export declare const cleanFieldResponse: <TFieldResponse extends MakeOptional<UseFieldResponse<any, ExportedPickerFieldUIProps & {
+export declare const cleanFieldResponse: <TFieldResponse extends MakeOptional<UseFieldReturnValue<any, ExportedPickerFieldUIProps & {
   [key: string]: any;
 }>, "onClear" | "clearable">>({
   enableAccessibleFieldDOMStructure,
@@ -22,7 +22,7 @@ export declare const PickerFieldUIContext: React.Context<PickerFieldUIContextVal
  * Adds the button to open the Picker and the button to clear the value of the field.
  * @ignore - internal component.
  */
-export declare function PickerFieldUI(props: PickerFieldUIProps): React.JSX.Element;
+export declare function PickerFieldUI<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>>(props: PickerFieldUIProps<TEnableAccessibleFieldDOMStructure, TProps>): React.JSX.Element;
 export interface ExportedPickerFieldUIProps {
   /**
    * If `true`, a clear button will be shown in the field allowing value clearing.
@@ -46,7 +46,7 @@ export interface ExportedPickerFieldUIProps {
    */
   openPickerButtonPosition?: 'start' | 'end';
 }
-export interface PickerFieldUIProps {
+export interface PickerFieldUIProps<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>> {
   /**
    * Overridable component slots.
    * @default {}
@@ -60,7 +60,7 @@ export interface PickerFieldUIProps {
   /**
    * Object returned by the `useField` hook or one of its wrapper (for example `useDateField`).
    */
-  fieldResponse: UseFieldResponse<any, any>;
+  fieldResponse: UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;
   /**
    * The component to use to render the Picker opening icon if none is provided in the Picker's slots.
    */

package/modern/internals/hooks/useField/buildSectionsFromFormat.d.ts

@@ -1,6 +1,6 @@
 import { FieldSection, MuiPickersAdapter, PickerValidDate } from "../../../models/index.js";
 import { PickersLocaleText } from "../../../locales/index.js";
-interface BuildSectionsFromFormatParams {
+interface BuildSectionsFromFormatParameters {
   utils: MuiPickersAdapter;
   format: string;
   formatDensity: 'dense' | 'spacious';
@@ -11,5 +11,5 @@ interface BuildSectionsFromFormatParams {
   date: PickerValidDate | null;
   enableAccessibleFieldDOMStructure: boolean;
 }
-export declare const buildSectionsFromFormat: (params: BuildSectionsFromFormatParams) => FieldSection[];
+export declare const buildSectionsFromFormat: (parameters: BuildSectionsFromFormatParameters) => FieldSection[];
 export {};

package/modern/internals/hooks/useField/buildSectionsFromFormat.js

@@ -141,12 +141,12 @@ const createSection = ({
     modified: false
   });
 };
-const buildSections = params => {
+const buildSections = parameters => {
   const {
     utils,
     expandedFormat,
     escapedParts
-  } = params;
+  } = parameters;
   const now = utils.date(undefined);
   const sections = [];
   let startSeparator = '';
@@ -171,7 +171,7 @@ const buildSections = params => {
       while (word.length > 0) {
         const firstWord = regExpFirstTokenInWord.exec(word)[1];
         word = word.slice(firstWord.length);
-        sections.push(createSection(_extends({}, params, {
+        sections.push(createSection(_extends({}, parameters, {
           now,
           token: firstWord,
           startSeparator
@@ -236,19 +236,19 @@ const postProcessSections = ({
     return section;
   });
 };
-export const buildSectionsFromFormat = params => {
-  let expandedFormat = expandFormat(params);
-  if (params.isRtl && params.enableAccessibleFieldDOMStructure) {
+export const buildSectionsFromFormat = parameters => {
+  let expandedFormat = expandFormat(parameters);
+  if (parameters.isRtl && parameters.enableAccessibleFieldDOMStructure) {
     expandedFormat = expandedFormat.split(' ').reverse().join(' ');
   }
-  const escapedParts = getEscapedPartsFromFormat(_extends({}, params, {
+  const escapedParts = getEscapedPartsFromFormat(_extends({}, parameters, {
     expandedFormat
   }));
-  const sections = buildSections(_extends({}, params, {
+  const sections = buildSections(_extends({}, parameters, {
     expandedFormat,
     escapedParts
   }));
-  return postProcessSections(_extends({}, params, {
+  return postProcessSections(_extends({}, parameters, {
     sections
   }));
 };

package/modern/internals/hooks/useField/index.d.ts

@@ -1,4 +1,4 @@
 export { useField } from "./useField.js";
-export type { FieldValueManager, UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldChangeHandler, FieldChangeHandlerContext } from './useField.types';
+export type { UseFieldInternalProps, UseFieldParameters, UseFieldReturnValue, UseFieldProps, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext } from './useField.types';
 export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
 export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";

package/modern/internals/hooks/useField/syncSelectionToDOM.d.ts

@@ -0,0 +1,9 @@
+import { PickerValidValue } from "../../models/index.js";
+import { UseFieldDOMGetters } from "./useField.types.js";
+import { UseFieldStateReturnValue } from "./useFieldState.js";
+export declare function syncSelectionToDOM<TValue extends PickerValidValue>(parameters: SyncSelectionToDOMParameters<TValue>): void;
+export interface SyncSelectionToDOMParameters<TValue extends PickerValidValue> {
+  domGetters: UseFieldDOMGetters;
+  stateResponse: UseFieldStateReturnValue<TValue>;
+  focused: boolean;
+}

package/modern/internals/hooks/useField/syncSelectionToDOM.js

@@ -0,0 +1,50 @@
+import { getActiveElement } from "../../utils/utils.js";
+export function syncSelectionToDOM(parameters) {
+  const {
+    focused,
+    domGetters,
+    stateResponse: {
+      // States and derived states
+      parsedSelectedSections,
+      state
+    }
+  } = parameters;
+  if (!domGetters.isReady()) {
+    return;
+  }
+  const selection = document.getSelection();
+  if (!selection) {
+    return;
+  }
+  if (parsedSelectedSections == null) {
+    // If the selection contains an element inside the field, we reset it.
+    if (selection.rangeCount > 0 && domGetters.getRoot().contains(selection.getRangeAt(0).startContainer)) {
+      selection.removeAllRanges();
+    }
+    if (focused) {
+      domGetters.getRoot().blur();
+    }
+    return;
+  }
+
+  // On multi input range pickers we want to update selection range only for the active input
+  if (!domGetters.getRoot().contains(getActiveElement(document))) {
+    return;
+  }
+  const range = new window.Range();
+  let target;
+  if (parsedSelectedSections === 'all') {
+    target = domGetters.getRoot();
+  } else {
+    const section = state.sections[parsedSelectedSections];
+    if (section.type === 'empty') {
+      target = domGetters.getSectionContainer(parsedSelectedSections);
+    } else {
+      target = domGetters.getSectionContent(parsedSelectedSections);
+    }
+  }
+  range.selectNodeContents(target);
+  target.focus();
+  selection.removeAllRanges();
+  selection.addRange(range);
+}

package/modern/internals/hooks/useField/useField.d.ts

@@ -1,5 +1,3 @@
-import { UseFieldParams, UseFieldResponse, UseFieldCommonForwardedProps, UseFieldInternalProps, UseFieldForwardedProps } from "./useField.types.js";
+import { UseFieldParameters, UseFieldReturnValue, UseFieldProps } from "./useField.types.js";
 import { PickerValidValue } from "../../models/index.js";
-export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any> & {
-  minutesStep?: number;
-}>(params: UseFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;
+export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>>(parameters: UseFieldParameters<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, TProps>) => UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;

package/modern/internals/hooks/useField/useField.js

@@ -1,233 +1,9 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import useEventCallback from '@mui/utils/useEventCallback';
-import { useRtl } from '@mui/system/RtlProvider';
-import { useValidation } from "../../../validation/index.js";
-import { useUtils } from "../useUtils.js";
-import { adjustSectionValue, getSectionOrder } from "./useField.utils.js";
-import { useFieldState } from "./useFieldState.js";
-import { useFieldCharacterEditing } from "./useFieldCharacterEditing.js";
 import { useFieldV7TextField } from "./useFieldV7TextField.js";
 import { useFieldV6TextField } from "./useFieldV6TextField.js";
-export const useField = params => {
-  const utils = useUtils();
-  const {
-    internalProps,
-    internalProps: {
-      unstableFieldRef,
-      minutesStep,
-      enableAccessibleFieldDOMStructure = true,
-      disabled = false,
-      readOnly = false,
-      autoFocus = false
-    },
-    forwardedProps: {
-      onKeyDown,
-      error,
-      clearable,
-      onClear
-    },
-    fieldValueManager,
-    validator,
-    getOpenPickerButtonAriaLabel: getOpenDialogAriaText
-  } = params;
-  const isRtl = useRtl();
-  const stateResponse = useFieldState(params);
-  const {
-    state,
-    value,
-    activeSectionIndex,
-    parsedSelectedSections,
-    setSelectedSections,
-    clearValue,
-    clearActiveSection,
-    updateSectionValue,
-    setTempAndroidValueStr,
-    sectionsValueBoundaries,
-    localizedDigits,
-    timezone
-  } = stateResponse;
-  const characterEditingResponse = useFieldCharacterEditing({
-    sections: state.sections,
-    updateSectionValue,
-    sectionsValueBoundaries,
-    localizedDigits,
-    setTempAndroidValueStr,
-    timezone
-  });
-  const {
-    resetCharacterQuery
-  } = characterEditingResponse;
-  const areAllSectionsEmpty = React.useMemo(() => state.sections.every(section => section.value === ''), [state.sections]);
+import { useNullableFieldPrivateContext } from "../useNullableFieldPrivateContext.js";
+export const useField = parameters => {
+  const fieldPrivateContext = useNullableFieldPrivateContext();
+  const enableAccessibleFieldDOMStructure = parameters.props.enableAccessibleFieldDOMStructure ?? fieldPrivateContext?.enableAccessibleFieldDOMStructure ?? true;
   const useFieldTextField = enableAccessibleFieldDOMStructure ? useFieldV7TextField : useFieldV6TextField;
-  const sectionOrder = React.useMemo(() => getSectionOrder(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
-  const {
-    returnedValue,
-    interactions
-  } = useFieldTextField(_extends({}, params, stateResponse, characterEditingResponse, {
-    areAllSectionsEmpty,
-    sectionOrder
-  }));
-  const handleContainerKeyDown = useEventCallback(event => {
-    onKeyDown?.(event);
-    if (disabled) {
-      return;
-    }
-    // eslint-disable-next-line default-case
-    switch (true) {
-      // Select all
-      case (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'A' && !event.shiftKey && !event.altKey:
-        {
-          // prevent default to make sure that the next line "select all" while updating
-          // the internal state at the same time.
-          event.preventDefault();
-          setSelectedSections('all');
-          break;
-        }
-
-      // Move selection to next section
-      case event.key === 'ArrowRight':
-        {
-          event.preventDefault();
-          if (parsedSelectedSections == null) {
-            setSelectedSections(sectionOrder.startIndex);
-          } else if (parsedSelectedSections === 'all') {
-            setSelectedSections(sectionOrder.endIndex);
-          } else {
-            const nextSectionIndex = sectionOrder.neighbors[parsedSelectedSections].rightIndex;
-            if (nextSectionIndex !== null) {
-              setSelectedSections(nextSectionIndex);
-            }
-          }
-          break;
-        }
-
-      // Move selection to previous section
-      case event.key === 'ArrowLeft':
-        {
-          event.preventDefault();
-          if (parsedSelectedSections == null) {
-            setSelectedSections(sectionOrder.endIndex);
-          } else if (parsedSelectedSections === 'all') {
-            setSelectedSections(sectionOrder.startIndex);
-          } else {
-            const nextSectionIndex = sectionOrder.neighbors[parsedSelectedSections].leftIndex;
-            if (nextSectionIndex !== null) {
-              setSelectedSections(nextSectionIndex);
-            }
-          }
-          break;
-        }
-
-      // Reset the value of the selected section
-      case event.key === 'Delete':
-        {
-          event.preventDefault();
-          if (readOnly) {
-            break;
-          }
-          if (parsedSelectedSections == null || parsedSelectedSections === 'all') {
-            clearValue();
-          } else {
-            clearActiveSection();
-          }
-          resetCharacterQuery();
-          break;
-        }
-
-      // Increment / decrement the selected section value
-      case ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key):
-        {
-          event.preventDefault();
-          if (readOnly || activeSectionIndex == null) {
-            break;
-          }
-
-          // if all sections are selected, mark the currently editing one as selected
-          if (parsedSelectedSections === 'all') {
-            setSelectedSections(activeSectionIndex);
-          }
-          const activeSection = state.sections[activeSectionIndex];
-          const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, fieldValueManager.getDateFromSection(value, activeSection), {
-            minutesStep
-          });
-          updateSectionValue({
-            section: activeSection,
-            newSectionValue,
-            shouldGoToNextSection: false
-          });
-          break;
-        }
-    }
-  });
-  useEnhancedEffect(() => {
-    interactions.syncSelectionToDOM();
-  });
-  const {
-    hasValidationError
-  } = useValidation({
-    props: internalProps,
-    validator,
-    timezone,
-    value,
-    onError: internalProps.onError
-  });
-  const inputError = React.useMemo(() => {
-    // only override when `error` is undefined.
-    // in case of multi input fields, the `error` value is provided externally and will always be defined.
-    if (error !== undefined) {
-      return error;
-    }
-    return hasValidationError;
-  }, [hasValidationError, error]);
-  React.useEffect(() => {
-    if (!inputError && activeSectionIndex == null) {
-      resetCharacterQuery();
-    }
-  }, [state.referenceValue, activeSectionIndex, inputError]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // If `tempValueStrAndroid` is still defined for some section when running `useEffect`,
-  // Then `onChange` has only been called once, which means the user pressed `Backspace` to reset the section.
-  // This causes a small flickering on Android,
-  // But we can't use `useEnhancedEffect` which is always called before the second `onChange` call and then would cause false positives.
-  React.useEffect(() => {
-    if (state.tempValueStrAndroid != null && activeSectionIndex != null) {
-      resetCharacterQuery();
-      clearActiveSection();
-    }
-  }, [state.sections]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  React.useImperativeHandle(unstableFieldRef, () => ({
-    getSections: () => state.sections,
-    getActiveSectionIndex: interactions.getActiveSectionIndexFromDOM,
-    setSelectedSections: interactions.setSelectedSections,
-    focusField: interactions.focusField,
-    isFieldFocused: interactions.isFieldFocused
-  }));
-  const handleClearValue = useEventCallback((event, ...args) => {
-    event.preventDefault();
-    onClear?.(event, ...args);
-    clearValue();
-    if (!interactions.isFieldFocused()) {
-      // setSelectedSections is called internally
-      interactions.focusField(0);
-    } else {
-      setSelectedSections(sectionOrder.startIndex);
-    }
-  });
-  const commonForwardedProps = {
-    onKeyDown: handleContainerKeyDown,
-    onClear: handleClearValue,
-    error: inputError,
-    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
-  };
-  const openPickerAriaLabel = React.useMemo(() => getOpenDialogAriaText(value), [getOpenDialogAriaText, value]);
-  const commonAdditionalProps = {
-    disabled,
-    readOnly,
-    autoFocus,
-    openPickerAriaLabel
-  };
-  return _extends({}, params.forwardedProps, commonForwardedProps, commonAdditionalProps, returnedValue);
+  return useFieldTextField(parameters);
 };