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

package/internals/hooks/useField/useFieldV7TextField.js

@@ -11,28 +11,24 @@ var React = _interopRequireWildcard(require("react"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useField = require("./useField.utils");
 var _utils = require("../../utils/utils");
 var _hooks = require("../../../hooks");
-var _usePickerTranslations = require("../../../hooks/usePickerTranslations");
-var _useUtils = require("../useUtils");
 var _useFieldCharacterEditing = require("./useFieldCharacterEditing");
-var _useFieldRootHandleKeyDown = require("./useFieldRootHandleKeyDown");
 var _useFieldState = require("./useFieldState");
 var _useFieldInternalPropsWithDefaults = require("./useFieldInternalPropsWithDefaults");
+var _syncSelectionToDOM = require("./syncSelectionToDOM");
+var _useFieldRootProps = require("./useFieldRootProps");
+var _useFieldHiddenInputProps = require("./useFieldHiddenInputProps");
+var _useFieldSectionContainerProps = require("./useFieldSectionContainerProps");
+var _useFieldSectionContentProps = require("./useFieldSectionContentProps");
 const useFieldV7TextField = parameters => {
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
-  const utils = (0, _useUtils.useUtils)();
-  const id = (0, _useId.default)();
   const {
     props,
     manager,
     skipContextFieldRefAssignment,
     manager: {
       valueType,
-      internal_fieldValueManager: fieldValueManager,
       internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
     }
   } = parameters;
@@ -65,6 +61,13 @@ const useFieldV7TextField = parameters => {
   } = internalPropsWithDefaults;
   const sectionListRef = React.useRef(null);
   const handleSectionListRef = (0, _useForkRef.default)(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 = (0, _useFieldState.useFieldState)({
     manager,
     internalPropsWithDefaults,
@@ -76,62 +79,17 @@ const useFieldV7TextField = parameters => {
     error,
     parsedSelectedSections,
     sectionOrder,
-    sectionsValueBoundaries,
     state,
     value,
     // Methods to update the states
     clearValue,
-    clearActiveSection,
-    setCharacterQuery,
-    setSelectedSections,
-    updateSectionValue,
-    updateValueFromValueStr
+    setSelectedSections
   } = stateResponse;
   const applyCharacterEditing = (0, _useFieldCharacterEditing.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((0, _utils.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
@@ -142,193 +100,53 @@ 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 = (0, _useEventCallback.default)(sectionIndex => {
-    if (!sectionListRef.current) {
-      return;
-    }
-    const section = state.sections[sectionIndex];
-    sectionListRef.current.getSectionContent(sectionIndex).innerHTML = section.value || section.placeholder;
-    syncSelectionToDOM();
+  const rootProps = (0, _useFieldRootProps.useFieldRootProps)({
+    manager,
+    internalPropsWithDefaults,
+    stateResponse,
+    applyCharacterEditing,
+    focused,
+    setFocused,
+    domGetters
   });
-  const containerClickTimeout = (0, _useTimeout.default)();
-  const handleContainerClick = (0, _useEventCallback.default)((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 = (0, _useFieldHiddenInputProps.useFieldHiddenInputProps)({
+    manager,
+    stateResponse
   });
-  const handleContainerInput = (0, _useEventCallback.default)(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 = (0, _useFieldSectionContainerProps.useFieldSectionContainerProps)({
+    stateResponse
   });
-  const handleContainerPaste = (0, _useEventCallback.default)(event => {
-    onPaste?.(event);
-    if (readOnly || parsedSelectedSections !== 'all') {
-      event.preventDefault();
-      return;
-    }
-    const pastedValue = event.clipboardData.getData('text');
-    event.preventDefault();
-    setCharacterQuery(null);
-    updateValueFromValueStr(pastedValue);
+  const createSectionContentProps = (0, _useFieldSectionContentProps.useFieldSectionContentProps)({
+    manager,
+    stateResponse,
+    applyCharacterEditing,
+    internalPropsWithDefaults,
+    domGetters,
+    focused
   });
-  const handleContainerFocus = (0, _useEventCallback.default)(event => {
-    onFocus?.(event);
-    if (focused || !sectionListRef.current) {
-      return;
-    }
-    const activeElement = (0, _utils.getActiveElement)(document);
-    setFocused(true);
-    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(activeElement) != null;
-    if (!isFocusInsideASection) {
-      setSelectedSections(sectionOrder.startIndex);
-    }
+  const handleRootKeyDown = (0, _useEventCallback.default)(event => {
+    onKeyDown?.(event);
+    rootProps.onKeyDown(event);
   });
-  const handleContainerBlur = (0, _useEventCallback.default)(event => {
+  const handleRootBlur = (0, _useEventCallback.default)(event => {
     onBlur?.(event);
-    setTimeout(() => {
-      if (!sectionListRef.current) {
-        return;
-      }
-      const activeElement = (0, _utils.getActiveElement)(document);
-      const shouldBlur = !sectionListRef.current.getRoot().contains(activeElement);
-      if (shouldBlur) {
-        setFocused(false);
-        setSelectedSections(null);
-      }
-    });
+    rootProps.onBlur(event);
   });
-  const getInputContainerClickHandler = (0, _useEventCallback.default)(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 = (0, _useEventCallback.default)(event => {
-    // Without this, the browser will remove the selected when clicking inside an already-selected section.
-    event.preventDefault();
+  const handleRootFocus = (0, _useEventCallback.default)(event => {
+    onFocus?.(event);
+    rootProps.onFocus(event);
   });
-  const getInputContentFocusHandler = (0, _useEventCallback.default)(sectionIndex => () => {
-    setSelectedSections(sectionIndex);
+  const handleRootClick = (0, _useEventCallback.default)(event => {
+    onClick?.(event);
+    rootProps.onClick(event);
   });
-  const handleInputContentPaste = (0, _useEventCallback.default)(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 = (0, _useEventCallback.default)(event => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'none';
+  const handleRootPaste = (0, _useEventCallback.default)(event => {
+    onPaste?.(event);
+    rootProps.onPaste(event);
   });
-  const handleInputContentInput = (0, _useEventCallback.default)(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 = (0, _useEventCallback.default)(event => {
+    onInput?.(event);
+    rootProps.onInput(event);
   });
   const handleClear = (0, _useEventCallback.default)((event, ...args) => {
     event.preventDefault();
@@ -341,67 +159,18 @@ const useFieldV7TextField = parameters => {
       setSelectedSections(sectionOrder.startIndex);
     }
   });
-  const handleContainerKeyDown = (0, _useFieldRootHandleKeyDown.useFieldRootHandleKeyDown)({
-    manager,
-    internalPropsWithDefaults,
-    stateResponse
-  });
-  const wrappedHandleContainerKeyDown = (0, _useEventCallback.default)(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': (0, _useField.getSectionValueNow)(section, utils),
-          'aria-valuemin': sectionBoundaries.minimum,
-          'aria-valuemax': sectionBoundaries.maximum,
-          'aria-valuetext': section.value ? (0, _useField.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 = (0, _useEventCallback.default)(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'));
@@ -425,7 +194,11 @@ const useFieldV7TextField = parameters => {
     }
   }, [parsedSelectedSections, focused]);
   (0, _useEnhancedEffect.default)(() => {
-    syncSelectionToDOM();
+    (0, _syncSelectionToDOM.syncSelectionToDOM)({
+      focused,
+      domGetters,
+      stateResponse
+    });
   });
   React.useImperativeHandle(unstableFieldRef, () => ({
     getSections: () => state.sections,
@@ -442,26 +215,22 @@ const useFieldV7TextField = parameters => {
     focusField,
     isFieldFocused: () => isFieldFocused(sectionListRef)
   }));
-  return (0, _extends2.default)({}, forwardedProps, {
+  return (0, _extends2.default)({}, 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/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/internals/index.js

@@ -159,18 +159,6 @@ Object.defineProperty(exports, "getActiveElement", {
     return _utils.getActiveElement;
   }
 });
-Object.defineProperty(exports, "getDateFieldInternalPropsDefaults", {
-  enumerable: true,
-  get: function () {
-    return _useDateManager.getDateFieldInternalPropsDefaults;
-  }
-});
-Object.defineProperty(exports, "getDateTimeFieldInternalPropsDefaults", {
-  enumerable: true,
-  get: function () {
-    return _useDateTimeManager.getDateTimeFieldInternalPropsDefaults;
-  }
-});
 Object.defineProperty(exports, "getDefaultReferenceDate", {
   enumerable: true,
   get: function () {
@@ -183,12 +171,6 @@ Object.defineProperty(exports, "getMeridiem", {
     return _timeUtils.getMeridiem;
   }
 });
-Object.defineProperty(exports, "getTimeFieldInternalPropsDefaults", {
-  enumerable: true,
-  get: function () {
-    return _useTimeManager.getTimeFieldInternalPropsDefaults;
-  }
-});
 Object.defineProperty(exports, "getTodayDate", {
   enumerable: true,
   get: function () {
@@ -285,6 +267,24 @@ Object.defineProperty(exports, "resolveTimeViewsResponse", {
     return _dateTimeUtils.resolveTimeViewsResponse;
   }
 });
+Object.defineProperty(exports, "useApplyDefaultValuesToDateTimeValidationProps", {
+  enumerable: true,
+  get: function () {
+    return _useDateTimeManager.useApplyDefaultValuesToDateTimeValidationProps;
+  }
+});
+Object.defineProperty(exports, "useApplyDefaultValuesToDateValidationProps", {
+  enumerable: true,
+  get: function () {
+    return _useDateManager.useApplyDefaultValuesToDateValidationProps;
+  }
+});
+Object.defineProperty(exports, "useApplyDefaultValuesToTimeValidationProps", {
+  enumerable: true,
+  get: function () {
+    return _useTimeManager.useApplyDefaultValuesToTimeValidationProps;
+  }
+});
 Object.defineProperty(exports, "useCalendarState", {
   enumerable: true,
   get: function () {

package/locales/deDE.js

@@ -37,8 +37,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}`,
@@ -54,7 +53,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/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/managers/useDateManager.js

@@ -6,7 +6,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDateFieldInternalPropsDefaults = getDateFieldInternalPropsDefaults;
+exports.useApplyDefaultValuesToDateValidationProps = useApplyDefaultValuesToDateValidationProps;
 exports.useDateManager = useDateManager;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
@@ -25,15 +25,7 @@ function useDateManager(parameters = {}) {
     internal_valueManager: _valueManagers.singleItemValueManager,
     internal_fieldValueManager: _valueManagers.singleItemFieldValueManager,
     internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
-    internal_applyDefaultsToFieldInternalProps: ({
-      internalProps,
-      utils,
-      defaultDates
-    }) => (0, _extends2.default)({}, internalProps, getDateFieldInternalPropsDefaults({
-      defaultDates,
-      utils,
-      internalProps
-    })),
+    internal_useApplyDefaultValuesToFieldInternalProps: useApplyDefaultValuesToDateFieldInternalProps,
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure]);
 }
@@ -45,22 +37,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.
- */
-function getDateFieldInternalPropsDefaults(parameters) {
-  const {
-    defaultDates,
-    utils,
-    internalProps
-  } = parameters;
-  return {
-    format: internalProps.format ?? utils.formats.keyboardDate,
-    disablePast: internalProps.disablePast ?? false,
-    disableFuture: internalProps.disableFuture ?? false,
-    minDate: (0, _dateUtils.applyDefaultDate)(utils, internalProps.minDate, defaultDates.minDate),
-    maxDate: (0, _dateUtils.applyDefaultDate)(utils, internalProps.maxDate, defaultDates.maxDate)
-  };
+function useApplyDefaultValuesToDateFieldInternalProps(internalProps) {
+  const utils = (0, _useUtils.useUtils)();
+  const validationProps = useApplyDefaultValuesToDateValidationProps(internalProps);
+  return React.useMemo(() => (0, _extends2.default)({}, internalProps, validationProps, {
+    format: internalProps.format ?? utils.formats.keyboardDate
+  }), [internalProps, validationProps, utils]);
+}
+function useApplyDefaultValuesToDateValidationProps(props) {
+  const utils = (0, _useUtils.useUtils)();
+  const defaultDates = (0, _useUtils.useDefaultDates)();
+  return React.useMemo(() => ({
+    disablePast: props.disablePast ?? false,
+    disableFuture: props.disableFuture ?? false,
+    minDate: (0, _dateUtils.applyDefaultDate)(utils, props.minDate, defaultDates.minDate),
+    maxDate: (0, _dateUtils.applyDefaultDate)(utils, props.maxDate, defaultDates.maxDate)
+  }), [props.minDate, props.maxDate, props.disableFuture, props.disablePast, utils, defaultDates]);
 }