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

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

@@ -3,28 +3,24 @@ import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import useTimeout from '@mui/utils/useTimeout';
-import useId from '@mui/utils/useId';
-import { getSectionValueNow, getSectionValueText, parseSelectedSections } from "./useField.utils.js";
+import { parseSelectedSections } from "./useField.utils.js";
 import { getActiveElement } from "../../utils/utils.js";
 import { useSplitFieldProps } from "../../../hooks/index.js";
-import { usePickerTranslations } from "../../../hooks/usePickerTranslations.js";
-import { useUtils } from "../useUtils.js";
 import { useFieldCharacterEditing } from "./useFieldCharacterEditing.js";
-import { useFieldRootHandleKeyDown } from "./useFieldRootHandleKeyDown.js";
 import { useFieldState } from "./useFieldState.js";
 import { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";
+import { syncSelectionToDOM } from "./syncSelectionToDOM.js";
+import { useFieldRootProps } from "./useFieldRootProps.js";
+import { useFieldHiddenInputProps } from "./useFieldHiddenInputProps.js";
+import { useFieldSectionContainerProps } from "./useFieldSectionContainerProps.js";
+import { useFieldSectionContentProps } from "./useFieldSectionContentProps.js";
 export const useFieldV7TextField = parameters => {
-  const translations = usePickerTranslations();
-  const utils = useUtils();
-  const id = useId();
   const {
     props,
     manager,
     skipContextFieldRefAssignment,
     manager: {
       valueType,
-      internal_fieldValueManager: fieldValueManager,
       internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
     }
   } = parameters;
@@ -57,6 +53,13 @@ export const useFieldV7TextField = parameters => {
   } = internalPropsWithDefaults;
   const sectionListRef = React.useRef(null);
   const handleSectionListRef = useForkRef(sectionListRefProp, sectionListRef);
+  const domGetters = React.useMemo(() => ({
+    isReady: () => sectionListRef.current != null,
+    getRoot: () => sectionListRef.current.getRoot(),
+    getSectionContainer: sectionIndex => sectionListRef.current.getSectionContainer(sectionIndex),
+    getSectionContent: sectionIndex => sectionListRef.current.getSectionContent(sectionIndex),
+    getSectionIndexFromDOMElement: element => sectionListRef.current.getSectionIndexFromDOMElement(element)
+  }), [sectionListRef]);
   const stateResponse = useFieldState({
     manager,
     internalPropsWithDefaults,
@@ -68,62 +71,17 @@ export const useFieldV7TextField = parameters => {
     error,
     parsedSelectedSections,
     sectionOrder,
-    sectionsValueBoundaries,
     state,
     value,
     // Methods to update the states
     clearValue,
-    clearActiveSection,
-    setCharacterQuery,
-    setSelectedSections,
-    updateSectionValue,
-    updateValueFromValueStr
+    setSelectedSections
   } = stateResponse;
   const applyCharacterEditing = useFieldCharacterEditing({
     stateResponse
   });
   const openPickerAriaLabel = useOpenPickerButtonAriaLabel(value);
   const [focused, setFocused] = React.useState(false);
-  function syncSelectionToDOM() {
-    if (!sectionListRef.current) {
-      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 && sectionListRef.current.getRoot().contains(selection.getRangeAt(0).startContainer)) {
-        selection.removeAllRanges();
-      }
-      if (focused) {
-        sectionListRef.current.getRoot().blur();
-      }
-      return;
-    }
-
-    // On multi input range pickers we want to update selection range only for the active input
-    if (!sectionListRef.current.getRoot().contains(getActiveElement(document))) {
-      return;
-    }
-    const range = new window.Range();
-    let target;
-    if (parsedSelectedSections === 'all') {
-      target = sectionListRef.current.getRoot();
-    } else {
-      const section = state.sections[parsedSelectedSections];
-      if (section.type === 'empty') {
-        target = sectionListRef.current.getSectionContainer(parsedSelectedSections);
-      } else {
-        target = sectionListRef.current.getSectionContent(parsedSelectedSections);
-      }
-    }
-    range.selectNodeContents(target);
-    target.focus();
-    selection.removeAllRanges();
-    selection.addRange(range);
-  }
   function focusField(newSelectedSections = 0) {
     if (!sectionListRef.current ||
     // if the field is already focused, we don't need to focus it again
@@ -134,193 +92,53 @@ export const useFieldV7TextField = parameters => {
     setFocused(true);
     sectionListRef.current.getSectionContent(newParsedSelectedSections).focus();
   }
-
-  /**
-   * 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 (!sectionListRef.current) {
-      return;
-    }
-    const section = state.sections[sectionIndex];
-    sectionListRef.current.getSectionContent(sectionIndex).innerHTML = section.value || section.placeholder;
-    syncSelectionToDOM();
+  const rootProps = useFieldRootProps({
+    manager,
+    internalPropsWithDefaults,
+    stateResponse,
+    applyCharacterEditing,
+    focused,
+    setFocused,
+    domGetters
   });
-  const containerClickTimeout = useTimeout();
-  const handleContainerClick = useEventCallback((event, ...args) => {
-    // 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 of `handleContainerClick` is actually intended, or a side effect.
-    if (event.isDefaultPrevented() || !sectionListRef.current) {
-      return;
-    }
-    setFocused(true);
-    onClick?.(event, ...args);
-    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 = sectionListRef.current.getRoot().contains(event.target);
-      if (!hasClickedOnASection) {
-        setSelectedSections(sectionOrder.startIndex);
-      }
-    }
+  const hiddenInputProps = useFieldHiddenInputProps({
+    manager,
+    stateResponse
   });
-  const handleContainerInput = useEventCallback(event => {
-    onInput?.(event);
-    if (!sectionListRef.current || parsedSelectedSections !== 'all') {
-      return;
-    }
-    const target = event.target;
-    const keyPressed = target.textContent ?? '';
-    sectionListRef.current.getRoot().innerHTML = state.sections.map(section => `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`).join('');
-    syncSelectionToDOM();
-    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 createSectionContainerProps = useFieldSectionContainerProps({
+    stateResponse
   });
-  const handleContainerPaste = useEventCallback(event => {
-    onPaste?.(event);
-    if (readOnly || parsedSelectedSections !== 'all') {
-      event.preventDefault();
-      return;
-    }
-    const pastedValue = event.clipboardData.getData('text');
-    event.preventDefault();
-    setCharacterQuery(null);
-    updateValueFromValueStr(pastedValue);
+  const createSectionContentProps = useFieldSectionContentProps({
+    manager,
+    stateResponse,
+    applyCharacterEditing,
+    internalPropsWithDefaults,
+    domGetters,
+    focused
   });
-  const handleContainerFocus = useEventCallback(event => {
-    onFocus?.(event);
-    if (focused || !sectionListRef.current) {
-      return;
-    }
-    const activeElement = getActiveElement(document);
-    setFocused(true);
-    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(activeElement) != null;
-    if (!isFocusInsideASection) {
-      setSelectedSections(sectionOrder.startIndex);
-    }
+  const handleRootKeyDown = useEventCallback(event => {
+    onKeyDown?.(event);
+    rootProps.onKeyDown(event);
   });
-  const handleContainerBlur = useEventCallback(event => {
+  const handleRootBlur = useEventCallback(event => {
     onBlur?.(event);
-    setTimeout(() => {
-      if (!sectionListRef.current) {
-        return;
-      }
-      const activeElement = getActiveElement(document);
-      const shouldBlur = !sectionListRef.current.getRoot().contains(activeElement);
-      if (shouldBlur) {
-        setFocused(false);
-        setSelectedSections(null);
-      }
-    });
+    rootProps.onBlur(event);
   });
-  const getInputContainerClickHandler = 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);
-  });
-  const handleInputContentMouseUp = useEventCallback(event => {
-    // Without this, the browser will remove the selected when clicking inside an already-selected section.
-    event.preventDefault();
+  const handleRootFocus = useEventCallback(event => {
+    onFocus?.(event);
+    rootProps.onFocus(event);
   });
-  const getInputContentFocusHandler = useEventCallback(sectionIndex => () => {
-    setSelectedSections(sectionIndex);
+  const handleRootClick = useEventCallback(event => {
+    onClick?.(event);
+    rootProps.onClick(event);
   });
-  const handleInputContentPaste = 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 handleInputContentDragOver = useEventCallback(event => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'none';
+  const handleRootPaste = useEventCallback(event => {
+    onPaste?.(event);
+    rootProps.onPaste(event);
   });
-  const handleInputContentInput = useEventCallback(event => {
-    if (!sectionListRef.current) {
-      return;
-    }
-    const target = event.target;
-    const keyPressed = target.textContent ?? '';
-    const sectionIndex = sectionListRef.current.getSectionIndexFromDOMElement(target);
-    const section = state.sections[sectionIndex];
-    if (readOnly || !sectionListRef.current) {
-      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 handleRootInput = useEventCallback(event => {
+    onInput?.(event);
+    rootProps.onInput(event);
   });
   const handleClear = useEventCallback((event, ...args) => {
     event.preventDefault();
@@ -333,67 +151,18 @@ export const useFieldV7TextField = parameters => {
       setSelectedSections(sectionOrder.startIndex);
     }
   });
-  const handleContainerKeyDown = useFieldRootHandleKeyDown({
-    manager,
-    internalPropsWithDefaults,
-    stateResponse
-  });
-  const wrappedHandleContainerKeyDown = useEventCallback(event => {
-    onKeyDown?.(event);
-    handleContainerKeyDown(event);
-  });
-  const isContainerEditable = parsedSelectedSections === 'all';
   const elements = React.useMemo(() => {
-    return state.sections.map((section, index) => {
-      const isEditable = !isContainerEditable && !disabled && !readOnly;
-      const sectionBoundaries = sectionsValueBoundaries[section.type]({
-        currentDate: fieldValueManager.getDateFromSection(value, section),
-        contentType: section.contentType,
-        format: section.format
-      });
-      return {
-        container: {
-          'data-sectionindex': index,
-          onClick: getInputContainerClickHandler(index)
-        },
-        content: {
-          tabIndex: isContainerEditable || index > 0 ? -1 : 0,
-          contentEditable: !isContainerEditable && !disabled && !readOnly,
-          role: 'spinbutton',
-          id: `${id}-${section.type}`,
-          '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,
-          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,
-          onInput: handleInputContentInput,
-          onPaste: handleInputContentPaste,
-          onFocus: getInputContentFocusHandler(index),
-          onDragOver: handleInputContentDragOver,
-          onMouseUp: handleInputContentMouseUp,
-          inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
-        },
-        before: {
-          children: section.startSeparator
-        },
-        after: {
-          children: section.endSeparator
-        }
-      };
-    });
-  }, [disabled, fieldValueManager, getInputContainerClickHandler, getInputContentFocusHandler, handleInputContentDragOver, handleInputContentInput, handleInputContentMouseUp, handleInputContentPaste, id, isContainerEditable, readOnly, sectionsValueBoundaries, state.sections, translations, utils, value]);
-  const handleValueStrChange = useEventCallback(event => {
-    updateValueFromValueStr(event.target.value);
-  });
-  const valueStr = React.useMemo(() => areAllSectionsEmpty ? '' : fieldValueManager.getV7HiddenInputValueFromSections(state.sections), [areAllSectionsEmpty, state.sections, fieldValueManager]);
+    return state.sections.map((section, sectionIndex) => ({
+      container: createSectionContainerProps(sectionIndex),
+      content: createSectionContentProps(section, sectionIndex),
+      before: {
+        children: section.startSeparator
+      },
+      after: {
+        children: section.endSeparator
+      }
+    }));
+  }, [state.sections, createSectionContainerProps, createSectionContentProps]);
   React.useEffect(() => {
     if (sectionListRef.current == null) {
       throw new Error(['MUI X: The `sectionListRef` prop has not been initialized by `PickersSectionList`', 'You probably tried to pass a component to the `textField` slot that contains an `<input />` element instead of a `PickersSectionList`.', '', 'If you want to keep using an `<input />` HTML element for the editing, please remove the `enableAccessibleFieldDOMStructure` prop from your Picker or Field component:', '', '<DatePicker slots={{ textField: MyCustomTextField }} />', '', 'Learn more about the field accessible DOM structure on the MUI documentation: https://mui.com/x/react-date-pickers/fields/#fields-to-edit-a-single-element'].join('\n'));
@@ -417,7 +186,11 @@ export const useFieldV7TextField = parameters => {
     }
   }, [parsedSelectedSections, focused]);
   useEnhancedEffect(() => {
-    syncSelectionToDOM();
+    syncSelectionToDOM({
+      focused,
+      domGetters,
+      stateResponse
+    });
   });
   React.useImperativeHandle(unstableFieldRef, () => ({
     getSections: () => state.sections,
@@ -434,26 +207,22 @@ export const useFieldV7TextField = parameters => {
     focusField,
     isFieldFocused: () => isFieldFocused(sectionListRef)
   }));
-  return _extends({}, forwardedProps, {
+  return _extends({}, forwardedProps, rootProps, {
+    onBlur: handleRootBlur,
+    onClick: handleRootClick,
+    onFocus: handleRootFocus,
+    onInput: handleRootInput,
+    onPaste: handleRootPaste,
+    onKeyDown: handleRootKeyDown,
+    onClear: handleClear
+  }, hiddenInputProps, {
     error,
     clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled),
     focused: focusedProp ?? focused,
     sectionListRef: handleSectionListRef,
-    onBlur: handleContainerBlur,
-    onClick: handleContainerClick,
-    onFocus: handleContainerFocus,
-    onInput: handleContainerInput,
-    onPaste: handleContainerPaste,
-    onKeyDown: wrappedHandleContainerKeyDown,
-    onClear: handleClear,
     // Additional
     enableAccessibleFieldDOMStructure: true,
     elements,
-    // TODO v7: Try to set to undefined when there is a section selected.
-    tabIndex: parsedSelectedSections === 0 ? -1 : 0,
-    contentEditable: isContainerEditable,
-    value: valueStr,
-    onChange: handleValueStrChange,
     areAllSectionsEmpty,
     disabled,
     readOnly,

package/modern/internals/index.d.ts

@@ -42,7 +42,7 @@ export { useLocalizationContext, useDefaultDates, useUtils, useNow } from "./hoo
 export type { ExportedUseViewsOptions, UseViewsOptions } from './hooks/useViews';
 export { useViews } from "./hooks/useViews.js";
 export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";
-export type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerError, PickerValueManager } from './models/manager';
+export type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults, PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerError, PickerValueManager } from './models/manager';
 export type { RangePosition } from './models/pickers';
 export type { BaseSingleInputFieldProps, FieldRangeSection } from './models/fields';
 export type { BasePickerProps, BasePickerInputProps } from './models/props/basePickerProps';
@@ -66,6 +66,6 @@ export type { ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.typ
 export { useCalendarState } from "../DateCalendar/useCalendarState.js";
 export { DateTimePickerToolbarOverrideContext } from "../DateTimePicker/DateTimePickerToolbar.js";
 export { usePickerDayOwnerState } from "../PickersDay/usePickerDayOwnerState.js";
-export { getDateFieldInternalPropsDefaults } from "../managers/useDateManager.js";
-export { getTimeFieldInternalPropsDefaults } from "../managers/useTimeManager.js";
-export { getDateTimeFieldInternalPropsDefaults } from "../managers/useDateTimeManager.js";
+export { useApplyDefaultValuesToDateValidationProps } from "../managers/useDateManager.js";
+export { useApplyDefaultValuesToTimeValidationProps } from "../managers/useTimeManager.js";
+export { useApplyDefaultValuesToDateTimeValidationProps } from "../managers/useDateTimeManager.js";

package/modern/internals/index.js

@@ -34,6 +34,6 @@ export { DayCalendar } from "../DateCalendar/DayCalendar.js";
 export { useCalendarState } from "../DateCalendar/useCalendarState.js";
 export { DateTimePickerToolbarOverrideContext } from "../DateTimePicker/DateTimePickerToolbar.js";
 export { usePickerDayOwnerState } from "../PickersDay/usePickerDayOwnerState.js";
-export { getDateFieldInternalPropsDefaults } from "../managers/useDateManager.js";
-export { getTimeFieldInternalPropsDefaults } from "../managers/useTimeManager.js";
-export { getDateTimeFieldInternalPropsDefaults } from "../managers/useDateTimeManager.js";
+export { useApplyDefaultValuesToDateValidationProps } from "../managers/useDateManager.js";
+export { useApplyDefaultValuesToTimeValidationProps } from "../managers/useTimeManager.js";
+export { useApplyDefaultValuesToDateTimeValidationProps } from "../managers/useDateTimeManager.js";

package/modern/locales/deDE.js

@@ -31,8 +31,7 @@ const deDEPickers = {
   dateTimePickerToolbarTitle: 'Datum & Uhrzeit auswählen',
   timePickerToolbarTitle: 'Uhrzeit auswählen',
   dateRangePickerToolbarTitle: 'Datumsbereich auswählen',
-  // timeRangePickerToolbarTitle: 'Select time range',
-
+  timeRangePickerToolbarTitle: 'Zeitspanne auswählen',
   // Clock labels
   clockLabelText: (view, formattedTime) => `${timeViews[view] ?? view} auswählen. ${!formattedTime ? 'Keine Uhrzeit ausgewählt' : `Gewählte Uhrzeit ist ${formattedTime}`}`,
   hoursClockNumberText: hours => `${hours} ${timeViews.hours}`,
@@ -48,7 +47,7 @@ const deDEPickers = {
   // Open Picker labels
   openDatePickerDialogue: formattedDate => formattedDate ? `Datum auswählen, gewähltes Datum ist ${formattedDate}` : 'Datum auswählen',
   openTimePickerDialogue: formattedTime => formattedTime ? `Uhrzeit auswählen, gewählte Uhrzeit ist ${formattedTime}` : 'Uhrzeit auswählen',
-  // openRangePickerDialogue: formattedRange => formattedRange ? `Choose range, selected range is ${formattedRange}` : 'Choose range',
+  openRangePickerDialogue: formattedRange => formattedRange ? `Zeitspanne auswählen, die aktuell ausgewählte Zeitspanne ist ${formattedRange}` : 'Zeitspanne auswählen',
   fieldClearLabel: 'Wert leeren',
   // Table labels
   timeTableLabel: 'Uhrzeit auswählen',

package/modern/managers/useDateManager.d.ts

@@ -1,23 +1,14 @@
 import type { MakeOptional } from '@mui/x-internals/types';
 import { PickerManager, DateValidationError } from "../models/index.js";
 import { UseFieldInternalProps } from "../internals/hooks/useField/index.js";
-import { MuiPickersAdapterContextValue } from "../LocalizationProvider/LocalizationProvider.js";
-import { ExportedValidateDateProps, ValidateDatePropsToDefault, ValidateDateProps } from "../validation/validateDate.js";
-import { PickerManagerFieldInternalPropsWithDefaults, PickerValue } from "../internals/models/index.js";
+import { ExportedValidateDateProps, ValidateDateProps } from "../validation/validateDate.js";
+import { PickerValue } from "../internals/models/index.js";
 export declare function useDateManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseDateManagerParameters<TEnableAccessibleFieldDOMStructure>): UseDateManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
-/**
- * Private utility function to get the default internal props for the fields with date editing.
- * Is used by the `useDateManager` and `useDateRangeManager` hooks.
- */
-export declare function getDateFieldInternalPropsDefaults(parameters: GetDateFieldInternalPropsDefaultsParameters): GetDateFieldInternalPropsDefaultsReturnValue;
+type SharedDateAndDateRangeValidationProps = 'disablePast' | 'disableFuture' | 'minDate' | 'maxDate';
+export declare function useApplyDefaultValuesToDateValidationProps(props: Pick<ExportedValidateDateProps, SharedDateAndDateRangeValidationProps>): Pick<ValidateDateProps, SharedDateAndDateRangeValidationProps>;
 export interface UseDateManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> {
   enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
 }
 export type UseDateManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError, ValidateDateProps, DateManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
 export interface DateManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, ExportedValidateDateProps {}
-type DateManagerFieldPropsToDefault = 'format' | ValidateDatePropsToDefault;
-interface GetDateFieldInternalPropsDefaultsParameters extends Pick<MuiPickersAdapterContextValue, 'defaultDates' | 'utils'> {
-  internalProps: Pick<DateManagerFieldInternalProps<true>, DateManagerFieldPropsToDefault>;
-}
-interface GetDateFieldInternalPropsDefaultsReturnValue extends Pick<PickerManagerFieldInternalPropsWithDefaults<UseDateManagerReturnValue<true>>, DateManagerFieldPropsToDefault> {}
 export {};

package/modern/managers/useDateManager.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { applyDefaultDate } from "../internals/utils/date-utils.js";
 import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { validateDate } from "../validation/index.js";
-import { useUtils } from "../internals/hooks/useUtils.js";
+import { useDefaultDates, useUtils } from "../internals/hooks/useUtils.js";
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 export function useDateManager(parameters = {}) {
   const {
@@ -17,15 +17,7 @@ export function useDateManager(parameters = {}) {
     internal_valueManager: singleItemValueManager,
     internal_fieldValueManager: singleItemFieldValueManager,
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils,
-      defaultDates
-    }) => _extends({}, internalProps, getDateFieldInternalPropsDefaults({
-      defaultDates,
-      utils,
-      internalProps
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure]);
 }
@@ -37,22 +29,20 @@ function useOpenPickerButtonAriaLabel(value) {
     return translations.openDatePickerDialogue(formattedValue);
   }, [value, translations, utils]);
 }
-
-/**
- * Private utility function to get the default internal props for the fields with date editing.
- * Is used by the `useDateManager` and `useDateRangeManager` hooks.
- */
-export function getDateFieldInternalPropsDefaults(parameters) {
-  const {
-    defaultDates,
-    utils,
-    internalProps
-  } = parameters;
-  return {
-    format: internalProps.format ?? utils.formats.keyboardDate,
-    disablePast: internalProps.disablePast ?? false,
-    disableFuture: internalProps.disableFuture ?? false,
-    minDate: applyDefaultDate(utils, internalProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, internalProps.maxDate, defaultDates.maxDate)
-  };
+function useApplyDefaultValuesToDateFieldInternalProps(internalProps) {
+  const utils = useUtils();
+  const validationProps = useApplyDefaultValuesToDateValidationProps(internalProps);
+  return React.useMemo(() => _extends({}, internalProps, validationProps, {
+    format: internalProps.format ?? utils.formats.keyboardDate
+  }), [internalProps, validationProps, utils]);
+}
+export function useApplyDefaultValuesToDateValidationProps(props) {
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  return React.useMemo(() => ({
+    disablePast: props.disablePast ?? false,
+    disableFuture: props.disableFuture ?? false,
+    minDate: applyDefaultDate(utils, props.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(utils, props.maxDate, defaultDates.maxDate)
+  }), [props.minDate, props.maxDate, props.disableFuture, props.disablePast, utils, defaultDates]);
 }

package/modern/managers/useDateTimeManager.d.ts

@@ -1,24 +1,15 @@
 import type { MakeOptional } from '@mui/x-internals/types';
 import { PickerManager, DateTimeValidationError } from "../models/index.js";
 import { UseFieldInternalProps } from "../internals/hooks/useField/index.js";
-import { MuiPickersAdapterContextValue } from "../LocalizationProvider/LocalizationProvider.js";
 import { AmPmProps } from "../internals/models/props/time.js";
-import { ExportedValidateDateTimeProps, ValidateDateTimeProps, ValidateDateTimePropsToDefault } from "../validation/validateDateTime.js";
-import { PickerManagerFieldInternalPropsWithDefaults, PickerValue } from "../internals/models/index.js";
+import { ExportedValidateDateTimeProps, ValidateDateTimeProps } from "../validation/validateDateTime.js";
+import { PickerValue } from "../internals/models/index.js";
 export declare function useDateTimeManager<TEnableAccessibleFieldDOMStructure extends boolean = true>(parameters?: UseDateTimeManagerParameters<TEnableAccessibleFieldDOMStructure>): UseDateTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure>;
-/**
- * Private utility function to get the default internal props for the field with date time editing.
- * Is used by the `useDateTimeManager` and `useDateTimeRangeManager` hooks.
- */
-export declare function getDateTimeFieldInternalPropsDefaults(parameters: GetDateTimeFieldInternalPropsDefaultsParameters): GetDateTimeFieldInternalPropsDefaultsReturnValue;
+type SharedDateTimeAndDateTimeRangeValidationProps = 'disablePast' | 'disableFuture' | 'minTime' | 'maxTime' | 'minDate' | 'maxDate';
+export declare function useApplyDefaultValuesToDateTimeValidationProps(props: Pick<ExportedValidateDateTimeProps, SharedDateTimeAndDateTimeRangeValidationProps | 'minDateTime' | 'maxDateTime'>): Pick<ValidateDateTimeProps, SharedDateTimeAndDateTimeRangeValidationProps>;
 export interface UseDateTimeManagerParameters<TEnableAccessibleFieldDOMStructure extends boolean> {
   enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
 }
 export type UseDateTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerValue, TEnableAccessibleFieldDOMStructure, DateTimeValidationError, ValidateDateTimeProps, DateTimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>>;
 export interface DateTimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, ExportedValidateDateTimeProps, AmPmProps {}
-type DateTimeManagerFieldPropsToDefault = 'format' | 'minTime' | 'maxTime' | ValidateDateTimePropsToDefault;
-interface GetDateTimeFieldInternalPropsDefaultsParameters extends Pick<MuiPickersAdapterContextValue, 'defaultDates' | 'utils'> {
-  internalProps: Pick<DateTimeManagerFieldInternalProps<true>, DateTimeManagerFieldPropsToDefault | 'minDateTime' | 'maxDateTime' | 'ampm'>;
-}
-interface GetDateTimeFieldInternalPropsDefaultsReturnValue extends Pick<PickerManagerFieldInternalPropsWithDefaults<UseDateTimeManagerReturnValue<true>>, DateTimeManagerFieldPropsToDefault | 'disableIgnoringDatePartForTimeValidation'> {}
 export {};