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

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

@@ -33,6 +33,4 @@ export declare const validateSections: <TValue extends PickerValidValue>(section
 export declare const mergeDateIntoReferenceDate: (utils: MuiPickersAdapter, dateToTransferFrom: PickerValidDate, sections: FieldSection[], referenceDate: PickerValidDate, shouldLimitToEditedSections: boolean) => PickerValidDate;
 export declare const isAndroid: () => boolean;
 export declare const getSectionOrder: (sections: FieldSection[], shouldApplyRTL: boolean) => SectionOrdering;
-export declare const parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;
-export declare const getSectionValueText: (section: FieldSection, utils: MuiPickersAdapter) => string | undefined;
-export declare const getSectionValueNow: (section: FieldSection, utils: MuiPickersAdapter) => number | undefined;
+export declare const parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;

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

@@ -493,61 +493,4 @@ export const parseSelectedSections = (selectedSections, sections) => {
     return index === -1 ? null : index;
   }
   return selectedSections;
-};
-export const getSectionValueText = (section, utils) => {
-  if (!section.value) {
-    return undefined;
-  }
-  switch (section.type) {
-    case 'month':
-      {
-        if (section.contentType === 'digit') {
-          return utils.format(utils.setMonth(utils.date(), Number(section.value) - 1), 'month');
-        }
-        const parsedDate = utils.parse(section.value, section.format);
-        return parsedDate ? utils.format(parsedDate, 'month') : undefined;
-      }
-    case 'day':
-      return section.contentType === 'digit' ? utils.format(utils.setDate(utils.startOfYear(utils.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
-    case 'weekDay':
-      // TODO: improve by providing the label of the week day
-      return undefined;
-    default:
-      return undefined;
-  }
-};
-export const getSectionValueNow = (section, utils) => {
-  if (!section.value) {
-    return undefined;
-  }
-  switch (section.type) {
-    case 'weekDay':
-      {
-        if (section.contentType === 'letter') {
-          // TODO: improve by resolving the week day number from a letter week day
-          return undefined;
-        }
-        return Number(section.value);
-      }
-    case 'meridiem':
-      {
-        const parsedDate = utils.parse(`01:00 ${section.value}`, `${utils.formats.hours12h}:${utils.formats.minutes} ${section.format}`);
-        if (parsedDate) {
-          return utils.getHours(parsedDate) >= 12 ? 1 : 0;
-        }
-        return undefined;
-      }
-    case 'day':
-      return section.contentType === 'digit-with-letter' ? parseInt(section.value, 10) : Number(section.value);
-    case 'month':
-      {
-        if (section.contentType === 'digit') {
-          return Number(section.value);
-        }
-        const parsedDate = utils.parse(section.value, section.format);
-        return parsedDate ? utils.getMonth(parsedDate) + 1 : undefined;
-      }
-    default:
-      return section.contentType !== 'letter' ? Number(section.value) : undefined;
-  }
 };

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { PickerManager } from "../../../models/index.js";
+import { UseFieldStateReturnValue } from "./useFieldState.js";
+/**
+ * Generate the props to pass to the hidden input element of the field.
+ * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
+ * It should be used in the MUI accessible DOM structure and the Base UI implementation.
+ * @param {UseFieldHiddenInputPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldHiddenInputPropsReturnValue} The props to forward to the hidden input element of the field.
+ */
+export declare function useFieldHiddenInputProps(parameters: UseFieldHiddenInputPropsParameters): UseFieldHiddenInputPropsReturnValue;
+interface UseFieldHiddenInputPropsParameters {
+  manager: PickerManager<any, any, any, any, any>;
+  stateResponse: UseFieldStateReturnValue<any>;
+}
+interface UseFieldHiddenInputPropsReturnValue {
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+}
+export {};

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+/**
+ * Generate the props to pass to the hidden input element of the field.
+ * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
+ * It should be used in the MUI accessible DOM structure and the Base UI implementation.
+ * @param {UseFieldHiddenInputPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldHiddenInputPropsReturnValue} The props to forward to the hidden input element of the field.
+ */
+export function useFieldHiddenInputProps(parameters) {
+  const {
+    manager: {
+      internal_fieldValueManager: fieldValueManager
+    },
+    stateResponse: {
+      // States and derived states
+      areAllSectionsEmpty,
+      state,
+      // Methods to update the states
+      updateValueFromValueStr
+    }
+  } = parameters;
+  const handleChange = useEventCallback(event => {
+    updateValueFromValueStr(event.target.value);
+  });
+  const valueStr = React.useMemo(() => areAllSectionsEmpty ? '' : fieldValueManager.getV7HiddenInputValueFromSections(state.sections), [areAllSectionsEmpty, state.sections, fieldValueManager]);
+  return {
+    value: valueStr,
+    onChange: handleChange
+  };
+}

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
-import { useLocalizationContext } from "../useUtils.js";
 import { useNullablePickerContext } from "../useNullablePickerContext.js";
 import { useNullableFieldPrivateContext } from "../useNullableFieldPrivateContext.js";
 
@@ -12,11 +11,12 @@ import { useNullableFieldPrivateContext } from "../useNullableFieldPrivateContex
  */
 export function useFieldInternalPropsWithDefaults(parameters) {
   const {
-    manager,
+    manager: {
+      internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToFieldInternalProps
+    },
     internalProps,
     skipContextFieldRefAssignment
   } = parameters;
-  const localizationContext = useLocalizationContext();
   const pickerContext = useNullablePickerContext();
   const fieldPrivateContext = useNullableFieldPrivateContext();
   const handleFieldRef = useForkRef(internalProps.unstableFieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.fieldRef);
@@ -27,12 +27,11 @@ export function useFieldInternalPropsWithDefaults(parameters) {
       shouldClose: false
     });
   }, [setValue]);
-  return React.useMemo(() => {
-    let internalPropsWithDefaultsFromContext = internalProps;
+  const internalPropsWithDefaultsFromContext = React.useMemo(() => {
     // If one of the context is null,
     // Then the field is used as a standalone component and the other context will be null as well.
     if (fieldPrivateContext != null && pickerContext != null) {
-      internalPropsWithDefaultsFromContext = _extends({
+      return _extends({
         value: pickerContext.value,
         onChange: handleChangeFromPicker,
         timezone: pickerContext.timezone,
@@ -48,8 +47,7 @@ export function useFieldInternalPropsWithDefaults(parameters) {
         unstableFieldRef: handleFieldRef
       }, internalProps);
     }
-    return manager.internal_applyDefaultsToFieldInternalProps(_extends({}, localizationContext, {
-      internalProps: internalPropsWithDefaultsFromContext
-    }));
-  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker, handleFieldRef]);
+    return internalProps;
+  }, [pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker, handleFieldRef]);
+  return useApplyDefaultValuesToFieldInternalProps(internalPropsWithDefaultsFromContext);
 }

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

@@ -37,6 +37,7 @@ export function useFieldRootHandleKeyDown(parameters) {
     if (disabled) {
       return;
     }
+
     // eslint-disable-next-line default-case
     switch (true) {
       // Select all

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

@@ -0,0 +1,32 @@
+import { PickerManager } from "../../../models/index.js";
+import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
+import { UseFieldStateReturnValue } from "./useFieldState.js";
+import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
+/**
+ * Generate the props to pass to the root element of the field.
+ * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
+ * It should be used in the MUI accessible DOM structure and the Base UI implementation.
+ * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldRootPropsReturnValue} The props to forward to the root element of the field.
+ */
+export declare function useFieldRootProps(parameters: UseFieldRootPropsParameters): UseFieldRootPropsReturnValue;
+interface UseFieldRootPropsParameters {
+  manager: PickerManager<any, any, any, any, any>;
+  stateResponse: UseFieldStateReturnValue<any>;
+  applyCharacterEditing: UseFieldCharacterEditingReturnValue;
+  internalPropsWithDefaults: UseFieldInternalProps<any, any, any>;
+  domGetters: UseFieldDOMGetters;
+  focused: boolean;
+  setFocused: (focused: boolean) => void;
+}
+interface UseFieldRootPropsReturnValue {
+  onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
+  onBlur: React.FocusEventHandler<HTMLDivElement>;
+  onFocus: React.FocusEventHandler<HTMLDivElement>;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+  onPaste: React.ClipboardEventHandler<HTMLDivElement>;
+  onInput: React.FormEventHandler<HTMLDivElement>;
+  contentEditable: boolean;
+  tabIndex: number;
+}
+export {};

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

@@ -0,0 +1,150 @@
+import useEventCallback from '@mui/utils/useEventCallback';
+import useTimeout from '@mui/utils/useTimeout';
+import { useFieldRootHandleKeyDown } from "./useFieldRootHandleKeyDown.js";
+import { getActiveElement } from "../../utils/utils.js";
+import { syncSelectionToDOM } from "./syncSelectionToDOM.js";
+
+/**
+ * Generate the props to pass to the root element of the field.
+ * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
+ * It should be used in the MUI accessible DOM structure and the Base UI implementation.
+ * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldRootPropsReturnValue} The props to forward to the root element of the field.
+ */
+export function useFieldRootProps(parameters) {
+  const {
+    manager,
+    focused,
+    setFocused,
+    domGetters,
+    stateResponse,
+    applyCharacterEditing,
+    internalPropsWithDefaults,
+    stateResponse: {
+      // States and derived states
+      parsedSelectedSections,
+      sectionOrder,
+      state,
+      // Methods to update the states
+      clearValue,
+      setCharacterQuery,
+      setSelectedSections,
+      updateValueFromValueStr
+    },
+    internalPropsWithDefaults: {
+      readOnly = false
+    }
+  } = parameters;
+
+  // TODO: Inline onContainerKeyDown once the old DOM structure is removed
+  const handleKeyDown = useFieldRootHandleKeyDown({
+    manager,
+    internalPropsWithDefaults,
+    stateResponse
+  });
+  const containerClickTimeout = useTimeout();
+  const handleClick = useEventCallback(event => {
+    if (!domGetters.isReady()) {
+      return;
+    }
+    setFocused(true);
+    if (parsedSelectedSections === 'all') {
+      containerClickTimeout.start(0, () => {
+        const cursorPosition = document.getSelection().getRangeAt(0).startOffset;
+        if (cursorPosition === 0) {
+          setSelectedSections(sectionOrder.startIndex);
+          return;
+        }
+        let sectionIndex = 0;
+        let cursorOnStartOfSection = 0;
+        while (cursorOnStartOfSection < cursorPosition && sectionIndex < state.sections.length) {
+          const section = state.sections[sectionIndex];
+          sectionIndex += 1;
+          cursorOnStartOfSection += `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`.length;
+        }
+        setSelectedSections(sectionIndex - 1);
+      });
+    } else if (!focused) {
+      setFocused(true);
+      setSelectedSections(sectionOrder.startIndex);
+    } else {
+      const hasClickedOnASection = domGetters.getRoot().contains(event.target);
+      if (!hasClickedOnASection) {
+        setSelectedSections(sectionOrder.startIndex);
+      }
+    }
+  });
+  const handleInput = useEventCallback(event => {
+    if (!domGetters.isReady() || parsedSelectedSections !== 'all') {
+      return;
+    }
+    const target = event.target;
+    const keyPressed = target.textContent ?? '';
+    domGetters.getRoot().innerHTML = state.sections.map(section => `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`).join('');
+    syncSelectionToDOM({
+      focused,
+      domGetters,
+      stateResponse
+    });
+    if (keyPressed.length === 0 || keyPressed.charCodeAt(0) === 10) {
+      clearValue();
+      setSelectedSections('all');
+    } else if (keyPressed.length > 1) {
+      updateValueFromValueStr(keyPressed);
+    } else {
+      if (parsedSelectedSections === 'all') {
+        setSelectedSections(0);
+      }
+      applyCharacterEditing({
+        keyPressed,
+        sectionIndex: 0
+      });
+    }
+  });
+  const handlePaste = useEventCallback(event => {
+    if (readOnly || parsedSelectedSections !== 'all') {
+      event.preventDefault();
+      return;
+    }
+    const pastedValue = event.clipboardData.getData('text');
+    event.preventDefault();
+    setCharacterQuery(null);
+    updateValueFromValueStr(pastedValue);
+  });
+  const handleFocus = useEventCallback(() => {
+    if (focused || !domGetters.isReady()) {
+      return;
+    }
+    const activeElement = getActiveElement(document);
+    setFocused(true);
+    const isFocusInsideASection = domGetters.getSectionIndexFromDOMElement(activeElement) != null;
+    if (!isFocusInsideASection) {
+      setSelectedSections(sectionOrder.startIndex);
+    }
+  });
+  const handleBlur = useEventCallback(() => {
+    setTimeout(() => {
+      if (!domGetters.isReady()) {
+        return;
+      }
+      const activeElement = getActiveElement(document);
+      const shouldBlur = !domGetters.getRoot().contains(activeElement);
+      if (shouldBlur) {
+        setFocused(false);
+        setSelectedSections(null);
+      }
+    });
+  });
+  return {
+    // Event handlers
+    onKeyDown: handleKeyDown,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onClick: handleClick,
+    onPaste: handlePaste,
+    onInput: handleInput,
+    // Other
+    contentEditable: parsedSelectedSections === 'all',
+    tabIndex: parsedSelectedSections === 0 ? -1 : 0 // TODO: Try to set to undefined when there is a section selected.
+  };
+}

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { UseFieldStateReturnValue } from "./useFieldState.js";
+/**
+ * Generate the props to pass to the container element of each section of the field.
+ * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
+ * It should be used in the MUI accessible DOM structure and the Base UI implementation.
+ * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldRootPropsReturnValue} The props to forward to the container element of each section of the field.
+ */
+export declare function useFieldSectionContainerProps(parameters: UseFieldSectionContainerPropsParameters): UseFieldSectionContainerPropsReturnValue;
+interface UseFieldSectionContainerPropsParameters {
+  stateResponse: UseFieldStateReturnValue<any>;
+}
+type UseFieldSectionContainerPropsReturnValue = (sectionIndex: number) => React.HTMLAttributes<HTMLSpanElement>;
+export {};

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+/**
+ * Generate the props to pass to the container element of each section of the field.
+ * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
+ * It should be used in the MUI accessible DOM structure and the Base UI implementation.
+ * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldRootPropsReturnValue} The props to forward to the container element of each section of the field.
+ */
+export function useFieldSectionContainerProps(parameters) {
+  const {
+    stateResponse: {
+      // Methods to update the states
+      setSelectedSections
+    }
+  } = parameters;
+  const createHandleClick = useEventCallback(sectionIndex => event => {
+    // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
+    // We avoid this by checking if the call to this function is actually intended, or a side effect.
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    setSelectedSections(sectionIndex);
+  });
+  return React.useCallback(sectionIndex => ({
+    'data-sectionindex': sectionIndex,
+    onClick: createHandleClick(sectionIndex)
+  }), [createHandleClick]);
+}

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { UseFieldStateReturnValue } from "./useFieldState.js";
+import { FieldSection, PickerManager } from "../../../models/index.js";
+import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
+import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
+/**
+ * Generate the props to pass to the content element of each section of the field.
+ * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
+ * It should be used in the MUI accessible DOM structure and the Base UI implementation.
+ * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldRootPropsReturnValue} The props to forward to the content element of each section of the field.
+ */
+export declare function useFieldSectionContentProps(parameters: UseFieldSectionContentPropsParameters): UseFieldSectionContentPropsReturnValue;
+interface UseFieldSectionContentPropsParameters {
+  manager: PickerManager<any, any, any, any, any>;
+  stateResponse: UseFieldStateReturnValue<any>;
+  applyCharacterEditing: UseFieldCharacterEditingReturnValue;
+  internalPropsWithDefaults: UseFieldInternalProps<any, any, any>;
+  domGetters: UseFieldDOMGetters;
+  focused: boolean;
+}
+type UseFieldSectionContentPropsReturnValue = (section: FieldSection, sectionIndex: number) => React.HTMLAttributes<HTMLSpanElement>;
+export {};

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

@@ -0,0 +1,226 @@
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useId from '@mui/utils/useId';
+import { useUtils } from "../useUtils.js";
+import { usePickerTranslations } from "../../../hooks/index.js";
+import { syncSelectionToDOM } from "./syncSelectionToDOM.js";
+/**
+ * Generate the props to pass to the content element of each section of the field.
+ * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
+ * It should be used in the MUI accessible DOM structure and the Base UI implementation.
+ * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldRootPropsReturnValue} The props to forward to the content element of each section of the field.
+ */
+export function useFieldSectionContentProps(parameters) {
+  const utils = useUtils();
+  const translations = usePickerTranslations();
+  const id = useId();
+  const {
+    focused,
+    domGetters,
+    stateResponse,
+    applyCharacterEditing,
+    manager: {
+      internal_fieldValueManager: fieldValueManager
+    },
+    stateResponse: {
+      // States and derived states
+      parsedSelectedSections,
+      sectionsValueBoundaries,
+      state,
+      value,
+      // Methods to update the states
+      clearActiveSection,
+      setCharacterQuery,
+      setSelectedSections,
+      updateSectionValue,
+      updateValueFromValueStr
+    },
+    internalPropsWithDefaults: {
+      disabled = false,
+      readOnly = false
+    }
+  } = parameters;
+  const isContainerEditable = parsedSelectedSections === 'all';
+  const isEditable = !isContainerEditable && !disabled && !readOnly;
+
+  /**
+   * If a section content has been updated with a value we don't want to keep,
+   * Then we need to imperatively revert it (we can't let React do it because the value did not change in his internal representation).
+   */
+  const revertDOMSectionChange = useEventCallback(sectionIndex => {
+    if (!domGetters.isReady()) {
+      return;
+    }
+    const section = state.sections[sectionIndex];
+    domGetters.getSectionContent(sectionIndex).innerHTML = section.value || section.placeholder;
+    syncSelectionToDOM({
+      focused,
+      domGetters,
+      stateResponse
+    });
+  });
+  const handleInput = useEventCallback(event => {
+    if (!domGetters.isReady()) {
+      return;
+    }
+    const target = event.target;
+    const keyPressed = target.textContent ?? '';
+    const sectionIndex = domGetters.getSectionIndexFromDOMElement(target);
+    const section = state.sections[sectionIndex];
+    if (readOnly) {
+      revertDOMSectionChange(sectionIndex);
+      return;
+    }
+    if (keyPressed.length === 0) {
+      if (section.value === '') {
+        revertDOMSectionChange(sectionIndex);
+        return;
+      }
+      const inputType = event.nativeEvent.inputType;
+      if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {
+        revertDOMSectionChange(sectionIndex);
+        return;
+      }
+      revertDOMSectionChange(sectionIndex);
+      clearActiveSection();
+      return;
+    }
+    applyCharacterEditing({
+      keyPressed,
+      sectionIndex
+    });
+
+    // The DOM value needs to remain the one React is expecting.
+    revertDOMSectionChange(sectionIndex);
+  });
+  const handleMouseUp = useEventCallback(event => {
+    // Without this, the browser will remove the selected when clicking inside an already-selected section.
+    event.preventDefault();
+  });
+  const handlePaste = useEventCallback(event => {
+    // prevent default to avoid the input `onInput` handler being called
+    event.preventDefault();
+    if (readOnly || disabled || typeof parsedSelectedSections !== 'number') {
+      return;
+    }
+    const activeSection = state.sections[parsedSelectedSections];
+    const pastedValue = event.clipboardData.getData('text');
+    const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);
+    const digitsOnly = /^[0-9]+$/.test(pastedValue);
+    const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
+    const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
+    if (isValidPastedValue) {
+      setCharacterQuery(null);
+      updateSectionValue({
+        section: activeSection,
+        newSectionValue: pastedValue,
+        shouldGoToNextSection: true
+      });
+    }
+    // If the pasted value corresponds to a single section, but not the expected type, we skip the modification
+    else if (!lettersOnly && !digitsOnly) {
+      setCharacterQuery(null);
+      updateValueFromValueStr(pastedValue);
+    }
+  });
+  const handleDragOver = useEventCallback(event => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'none';
+  });
+  const createFocusHandler = useEventCallback(sectionIndex => () => {
+    setSelectedSections(sectionIndex);
+  });
+  return React.useCallback((section, sectionIndex) => {
+    const sectionBoundaries = sectionsValueBoundaries[section.type]({
+      currentDate: fieldValueManager.getDateFromSection(value, section),
+      contentType: section.contentType,
+      format: section.format
+    });
+    return {
+      // Event handlers
+      onInput: handleInput,
+      onPaste: handlePaste,
+      onMouseUp: handleMouseUp,
+      onDragOver: handleDragOver,
+      onFocus: createFocusHandler(sectionIndex),
+      // Aria attributes
+      'aria-labelledby': `${id}-${section.type}`,
+      'aria-readonly': readOnly,
+      'aria-valuenow': getSectionValueNow(section, utils),
+      'aria-valuemin': sectionBoundaries.minimum,
+      'aria-valuemax': sectionBoundaries.maximum,
+      'aria-valuetext': section.value ? getSectionValueText(section, utils) : translations.empty,
+      'aria-label': translations[section.type],
+      'aria-disabled': disabled,
+      // Other
+      tabIndex: isContainerEditable || sectionIndex > 0 ? -1 : 0,
+      contentEditable: !isContainerEditable && !disabled && !readOnly,
+      role: 'spinbutton',
+      id: `${id}-${section.type}`,
+      spellCheck: isEditable ? false : undefined,
+      autoCapitalize: isEditable ? 'off' : undefined,
+      autoCorrect: isEditable ? 'off' : undefined,
+      [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
+      children: section.value || section.placeholder,
+      inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
+    };
+  }, [sectionsValueBoundaries, id, isContainerEditable, disabled, readOnly, isEditable, translations, utils, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
+}
+function getSectionValueText(section, utils) {
+  if (!section.value) {
+    return undefined;
+  }
+  switch (section.type) {
+    case 'month':
+      {
+        if (section.contentType === 'digit') {
+          return utils.format(utils.setMonth(utils.date(), Number(section.value) - 1), 'month');
+        }
+        const parsedDate = utils.parse(section.value, section.format);
+        return parsedDate ? utils.format(parsedDate, 'month') : undefined;
+      }
+    case 'day':
+      return section.contentType === 'digit' ? utils.format(utils.setDate(utils.startOfYear(utils.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
+    case 'weekDay':
+      // TODO: improve by providing the label of the week day
+      return undefined;
+    default:
+      return undefined;
+  }
+}
+function getSectionValueNow(section, utils) {
+  if (!section.value) {
+    return undefined;
+  }
+  switch (section.type) {
+    case 'weekDay':
+      {
+        if (section.contentType === 'letter') {
+          // TODO: improve by resolving the week day number from a letter week day
+          return undefined;
+        }
+        return Number(section.value);
+      }
+    case 'meridiem':
+      {
+        const parsedDate = utils.parse(`01:00 ${section.value}`, `${utils.formats.hours12h}:${utils.formats.minutes} ${section.format}`);
+        if (parsedDate) {
+          return utils.getHours(parsedDate) >= 12 ? 1 : 0;
+        }
+        return undefined;
+      }
+    case 'day':
+      return section.contentType === 'digit-with-letter' ? parseInt(section.value, 10) : Number(section.value);
+    case 'month':
+      {
+        if (section.contentType === 'digit') {
+          return Number(section.value);
+        }
+        const parsedDate = utils.parse(section.value, section.format);
+        return parsedDate ? utils.getMonth(parsedDate) + 1 : undefined;
+      }
+    default:
+      return section.contentType !== 'letter' ? Number(section.value) : undefined;
+  }
+}