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

package/internals/hooks/useField/useFieldV6TextField.js

@@ -1,18 +1,33 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useRtl } from '@mui/system/RtlProvider';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useForkRef from '@mui/utils/useForkRef';
-import { getActiveElement } from "../../utils/utils.js";
-import { getSectionVisibleValue, isAndroid } from "./useField.utils.js";
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFieldV6TextField = exports.addPositionPropertiesToSections = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _hooks = require("../../../hooks");
+var _utils = require("../../utils/utils");
+var _useField = require("./useField.utils");
+var _useFieldCharacterEditing = require("./useFieldCharacterEditing");
+var _useFieldRootHandleKeyDown = require("./useFieldRootHandleKeyDown");
+var _useFieldState = require("./useFieldState");
+var _useFieldInternalPropsWithDefaults = require("./useFieldInternalPropsWithDefaults");
 const cleanString = dirtyString => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
-export const addPositionPropertiesToSections = (sections, localizedDigits, isRtl) => {
+const addPositionPropertiesToSections = (sections, localizedDigits, isRtl) => {
   let position = 0;
   let positionInInput = isRtl ? 1 : 0;
   const newSections = [];
   for (let i = 0; i < sections.length; i += 1) {
     const section = sections[i];
-    const renderedValue = getSectionVisibleValue(section, isRtl ? 'input-rtl' : 'input-ltr', localizedDigits);
+    const renderedValue = (0, _useField.getSectionVisibleValue)(section, isRtl ? 'input-rtl' : 'input-ltr', localizedDigits);
     const sectionStr = `${section.startSeparator}${renderedValue}${section.endSeparator}`;
     const sectionLength = cleanString(sectionStr).length;
     const sectionLengthInInput = sectionStr.length;
@@ -21,7 +36,7 @@ export const addPositionPropertiesToSections = (sections, localizedDigits, isRtl
     const cleanedValue = cleanString(renderedValue);
     const startInInput = positionInInput + (cleanedValue === '' ? 0 : renderedValue.indexOf(cleanedValue[0])) + section.startSeparator.length;
     const endInInput = startInInput + cleanedValue.length;
-    newSections.push(_extends({}, section, {
+    newSections.push((0, _extends2.default)({}, section, {
       start: position,
       end: position + sectionLength,
       startInInput,
@@ -33,112 +48,83 @@ export const addPositionPropertiesToSections = (sections, localizedDigits, isRtl
   }
   return newSections;
 };
-export const useFieldV6TextField = params => {
-  const isRtl = useRtl();
-  const focusTimeoutRef = React.useRef(undefined);
-  const selectionSyncTimeoutRef = React.useRef(undefined);
+exports.addPositionPropertiesToSections = addPositionPropertiesToSections;
+const useFieldV6TextField = parameters => {
+  const isRtl = (0, _RtlProvider.useRtl)();
+  const focusTimeout = (0, _useTimeout.default)();
+  const selectionSyncTimeout = (0, _useTimeout.default)();
   const {
-    forwardedProps: {
-      onFocus,
-      onClick,
-      onPaste,
-      onBlur,
-      inputRef: inputRefProp,
-      placeholder: inPlaceholder
-    },
-    internalProps: {
-      readOnly = false,
-      disabled = false
-    },
-    parsedSelectedSections,
+    props,
+    manager,
+    skipContextFieldRefAssignment,
+    manager: {
+      valueType,
+      internal_valueManager: valueManager,
+      internal_fieldValueManager: fieldValueManager,
+      internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
+    }
+  } = parameters;
+  const {
+    internalProps,
+    forwardedProps
+  } = (0, _hooks.useSplitFieldProps)(props, valueType);
+  const internalPropsWithDefaults = (0, _useFieldInternalPropsWithDefaults.useFieldInternalPropsWithDefaults)({
+    manager,
+    internalProps,
+    skipContextFieldRefAssignment
+  });
+  const {
+    onFocus,
+    onClick,
+    onPaste,
+    onBlur,
+    onKeyDown,
+    onClear,
+    clearable,
+    inputRef: inputRefProp,
+    placeholder: inPlaceholder
+  } = forwardedProps;
+  const {
+    readOnly = false,
+    disabled = false,
+    autoFocus = false,
+    focused,
+    unstableFieldRef
+  } = internalPropsWithDefaults;
+  const inputRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(inputRefProp, inputRef);
+  const stateResponse = (0, _useFieldState.useFieldState)({
+    manager,
+    internalPropsWithDefaults,
+    forwardedProps
+  });
+  const {
+    // States and derived states
     activeSectionIndex,
+    areAllSectionsEmpty,
+    error,
+    localizedDigits,
+    parsedSelectedSections,
+    sectionOrder,
     state,
-    fieldValueManager,
-    valueManager,
-    applyCharacterEditing,
-    resetCharacterQuery,
-    updateSectionValue,
-    updateValueFromValueStr,
-    clearActiveSection,
+    value,
+    // Methods to update the states
     clearValue,
-    setTempAndroidValueStr,
+    clearActiveSection,
+    setCharacterQuery,
     setSelectedSections,
-    getSectionsFromValue,
-    areAllSectionsEmpty,
-    localizedDigits
-  } = params;
-  const inputRef = React.useRef(null);
-  const handleRef = useForkRef(inputRefProp, inputRef);
+    setTempAndroidValueStr,
+    updateSectionValue,
+    updateValueFromValueStr,
+    // Utilities methods
+    getSectionsFromValue
+  } = stateResponse;
+  const applyCharacterEditing = (0, _useFieldCharacterEditing.useFieldCharacterEditing)({
+    stateResponse
+  });
+  const openPickerAriaLabel = useOpenPickerButtonAriaLabel(value);
   const sections = React.useMemo(() => addPositionPropertiesToSections(state.sections, localizedDigits, isRtl), [state.sections, localizedDigits, isRtl]);
-  const interactions = React.useMemo(() => ({
-    syncSelectionToDOM: () => {
-      if (!inputRef.current) {
-        return;
-      }
-      if (parsedSelectedSections == null) {
-        if (inputRef.current.scrollLeft) {
-          // Ensure that input content is not marked as selected.
-          // setting selection range to 0 causes issues in Safari.
-          // https://bugs.webkit.org/show_bug.cgi?id=224425
-          inputRef.current.scrollLeft = 0;
-        }
-        return;
-      }
-
-      // On multi input range pickers we want to update selection range only for the active input
-      // This helps to avoid the focus jumping on Safari https://github.com/mui/mui-x/issues/9003
-      // because WebKit implements the `setSelectionRange` based on the spec: https://bugs.webkit.org/show_bug.cgi?id=224425
-      if (inputRef.current !== getActiveElement(document)) {
-        return;
-      }
-
-      // Fix scroll jumping on iOS browser: https://github.com/mui/mui-x/issues/8321
-      const currentScrollTop = inputRef.current.scrollTop;
-      if (parsedSelectedSections === 'all') {
-        inputRef.current.select();
-      } else {
-        const selectedSection = sections[parsedSelectedSections];
-        const selectionStart = selectedSection.type === 'empty' ? selectedSection.startInInput - selectedSection.startSeparator.length : selectedSection.startInInput;
-        const selectionEnd = selectedSection.type === 'empty' ? selectedSection.endInInput + selectedSection.endSeparator.length : selectedSection.endInInput;
-        if (selectionStart !== inputRef.current.selectionStart || selectionEnd !== inputRef.current.selectionEnd) {
-          if (inputRef.current === getActiveElement(document)) {
-            inputRef.current.setSelectionRange(selectionStart, selectionEnd);
-          }
-        }
-        clearTimeout(selectionSyncTimeoutRef.current);
-        selectionSyncTimeoutRef.current = setTimeout(() => {
-          // handle case when the selection is not updated correctly
-          // could happen on Android
-          if (inputRef.current && inputRef.current === getActiveElement(document) &&
-          // The section might loose all selection, where `selectionStart === selectionEnd`
-          // https://github.com/mui/mui-x/pull/13652
-          inputRef.current.selectionStart === inputRef.current.selectionEnd && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
-            interactions.syncSelectionToDOM();
-          }
-        });
-      }
-
-      // Even reading this variable seems to do the trick, but also setting it just to make use of it
-      inputRef.current.scrollTop = currentScrollTop;
-    },
-    getActiveSectionIndexFromDOM: () => {
-      const browserStartIndex = inputRef.current.selectionStart ?? 0;
-      const browserEndIndex = inputRef.current.selectionEnd ?? 0;
-      if (browserStartIndex === 0 && browserEndIndex === 0) {
-        return null;
-      }
-      const nextSectionIndex = browserStartIndex <= sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
-      : sections.findIndex(section => section.startInInput - section.startSeparator.length > browserStartIndex);
-      return nextSectionIndex === -1 ? sections.length - 1 : nextSectionIndex - 1;
-    },
-    focusField: (newSelectedSection = 0) => {
-      inputRef.current?.focus();
-      setSelectedSections(newSelectedSection);
-    },
-    setSelectedSections: newSelectedSections => setSelectedSections(newSelectedSections),
-    isFieldFocused: () => inputRef.current === getActiveElement(document)
-  }), [inputRef, parsedSelectedSections, sections, setSelectedSections]);
-  const syncSelectionFromDOM = () => {
+  function syncSelectionFromDOM() {
     const browserStartIndex = inputRef.current.selectionStart ?? 0;
     let nextSectionIndex;
     if (browserStartIndex <= sections[0].startInInput) {
@@ -152,13 +138,19 @@ export const useFieldV6TextField = params => {
     }
     const sectionIndex = nextSectionIndex === -1 ? sections.length - 1 : nextSectionIndex - 1;
     setSelectedSections(sectionIndex);
-  };
-  const handleInputFocus = useEventCallback((...args) => {
-    onFocus?.(...args);
+  }
+  function focusField(newSelectedSection = 0) {
+    if ((0, _utils.getActiveElement)(document) === inputRef.current) {
+      return;
+    }
+    inputRef.current?.focus();
+    setSelectedSections(newSelectedSection);
+  }
+  const handleInputFocus = (0, _useEventCallback.default)(event => {
+    onFocus?.(event);
     // The ref is guaranteed to be resolved at this point.
     const input = inputRef.current;
-    clearTimeout(focusTimeoutRef.current);
-    focusTimeoutRef.current = setTimeout(() => {
+    focusTimeout.start(0, () => {
       // The ref changed, the component got remounted, the focus event is no longer relevant.
       if (!input || input !== inputRef.current) {
         return;
@@ -175,7 +167,7 @@ export const useFieldV6TextField = params => {
       }
     });
   });
-  const handleInputClick = useEventCallback((event, ...args) => {
+  const handleInputClick = (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 `handleInputClick` is actually intended, or a side effect.
     if (event.isDefaultPrevented()) {
@@ -184,7 +176,7 @@ export const useFieldV6TextField = params => {
     onClick?.(event, ...args);
     syncSelectionFromDOM();
   });
-  const handleInputPaste = useEventCallback(event => {
+  const handleInputPaste = (0, _useEventCallback.default)(event => {
     onPaste?.(event);
 
     // prevent default to avoid the input `onChange` handler being called
@@ -200,9 +192,9 @@ export const useFieldV6TextField = params => {
       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) {
-        resetCharacterQuery();
+        setCharacterQuery(null);
         updateSectionValue({
-          activeSection,
+          section: activeSection,
           newSectionValue: pastedValue,
           shouldGoToNextSection: true
         });
@@ -214,20 +206,19 @@ export const useFieldV6TextField = params => {
         return;
       }
     }
-    resetCharacterQuery();
+    setCharacterQuery(null);
     updateValueFromValueStr(pastedValue);
   });
-  const handleContainerBlur = useEventCallback((...args) => {
-    onBlur?.(...args);
+  const handleContainerBlur = (0, _useEventCallback.default)(event => {
+    onBlur?.(event);
     setSelectedSections(null);
   });
-  const handleInputChange = useEventCallback(event => {
+  const handleInputChange = (0, _useEventCallback.default)(event => {
     if (readOnly) {
       return;
     }
     const targetValue = event.target.value;
     if (targetValue === '') {
-      resetCharacterQuery();
       clearValue();
       return;
     }
@@ -274,10 +265,9 @@ export const useFieldV6TextField = params => {
       keyPressed = cleanValueStr.slice(activeSection.start + cleanString(activeSection.startSeparator || '').length, activeSectionEndRelativeToNewValue);
     }
     if (keyPressed.length === 0) {
-      if (isAndroid()) {
+      if ((0, _useField.isAndroid)()) {
         setTempAndroidValueStr(valueStr);
       }
-      resetCharacterQuery();
       clearActiveSection();
       return;
     }
@@ -286,6 +276,26 @@ export const useFieldV6TextField = params => {
       sectionIndex: activeSectionIndex
     });
   });
+  const handleClear = (0, _useEventCallback.default)((event, ...args) => {
+    event.preventDefault();
+    onClear?.(event, ...args);
+    clearValue();
+    if (!isFieldFocused(inputRef)) {
+      // setSelectedSections is called internally
+      focusField(0);
+    } else {
+      setSelectedSections(sectionOrder.startIndex);
+    }
+  });
+  const handleContainerKeyDown = (0, _useFieldRootHandleKeyDown.useFieldRootHandleKeyDown)({
+    manager,
+    internalPropsWithDefaults,
+    stateResponse
+  });
+  const wrappedHandleContainerKeyDown = (0, _useEventCallback.default)(event => {
+    onKeyDown?.(event);
+    handleContainerKeyDown(event);
+  });
   const placeholder = React.useMemo(() => {
     if (inPlaceholder !== undefined) {
       return inPlaceholder;
@@ -295,15 +305,63 @@ export const useFieldV6TextField = params => {
   const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getV6InputValueFromSections(state.sections, localizedDigits, isRtl), [state.sections, fieldValueManager, state.tempValueStrAndroid, localizedDigits, isRtl]);
   React.useEffect(() => {
     // Select all the sections when focused on mount (`autoFocus = true` on the input)
-    if (inputRef.current && inputRef.current === getActiveElement(document)) {
+    if (inputRef.current && inputRef.current === (0, _utils.getActiveElement)(document)) {
       setSelectedSections('all');
     }
-    return () => {
-      clearTimeout(focusTimeoutRef.current);
-      clearTimeout(selectionSyncTimeoutRef.current);
-    };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  (0, _useEnhancedEffect.default)(() => {
+    function syncSelectionToDOM() {
+      if (!inputRef.current) {
+        return;
+      }
+      if (parsedSelectedSections == null) {
+        if (inputRef.current.scrollLeft) {
+          // Ensure that input content is not marked as selected.
+          // setting selection range to 0 causes issues in Safari.
+          // https://bugs.webkit.org/show_bug.cgi?id=224425
+          inputRef.current.scrollLeft = 0;
+        }
+        return;
+      }
+
+      // On multi input range pickers we want to update selection range only for the active input
+      // This helps to avoid the focus jumping on Safari https://github.com/mui/mui-x/issues/9003
+      // because WebKit implements the `setSelectionRange` based on the spec: https://bugs.webkit.org/show_bug.cgi?id=224425
+      if (inputRef.current !== (0, _utils.getActiveElement)(document)) {
+        return;
+      }
+
+      // Fix scroll jumping on iOS browser: https://github.com/mui/mui-x/issues/8321
+      const currentScrollTop = inputRef.current.scrollTop;
+      if (parsedSelectedSections === 'all') {
+        inputRef.current.select();
+      } else {
+        const selectedSection = sections[parsedSelectedSections];
+        const selectionStart = selectedSection.type === 'empty' ? selectedSection.startInInput - selectedSection.startSeparator.length : selectedSection.startInInput;
+        const selectionEnd = selectedSection.type === 'empty' ? selectedSection.endInInput + selectedSection.endSeparator.length : selectedSection.endInInput;
+        if (selectionStart !== inputRef.current.selectionStart || selectionEnd !== inputRef.current.selectionEnd) {
+          if (inputRef.current === (0, _utils.getActiveElement)(document)) {
+            inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+          }
+        }
+        selectionSyncTimeout.start(0, () => {
+          // handle case when the selection is not updated correctly
+          // could happen on Android
+          if (inputRef.current && inputRef.current === (0, _utils.getActiveElement)(document) &&
+          // The section might loose all selection, where `selectionStart === selectionEnd`
+          // https://github.com/mui/mui-x/pull/13652
+          inputRef.current.selectionStart === inputRef.current.selectionEnd && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
+            syncSelectionToDOM();
+          }
+        });
+      }
+
+      // Even reading this variable seems to do the trick, but also setting it just to make use of it
+      inputRef.current.scrollTop = currentScrollTop;
+    }
+    syncSelectionToDOM();
+  });
   const inputMode = React.useMemo(() => {
     if (activeSectionIndex == null) {
       return 'text';
@@ -313,25 +371,49 @@ export const useFieldV6TextField = params => {
     }
     return 'numeric';
   }, [activeSectionIndex, state.sections]);
-  const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
+  const inputHasFocus = inputRef.current && inputRef.current === (0, _utils.getActiveElement)(document);
   const shouldShowPlaceholder = !inputHasFocus && areAllSectionsEmpty;
-  return {
-    interactions,
-    returnedValue: {
-      // Forwarded
-      readOnly,
-      onBlur: handleContainerBlur,
-      onClick: handleInputClick,
-      onFocus: handleInputFocus,
-      onPaste: handleInputPaste,
-      inputRef: handleRef,
-      // Additional
-      enableAccessibleFieldDOMStructure: false,
-      placeholder,
-      inputMode,
-      autoComplete: 'off',
-      value: shouldShowPlaceholder ? '' : valueStr,
-      onChange: handleInputChange
-    }
-  };
-};
+  React.useImperativeHandle(unstableFieldRef, () => ({
+    getSections: () => state.sections,
+    getActiveSectionIndex: () => {
+      const browserStartIndex = inputRef.current.selectionStart ?? 0;
+      const browserEndIndex = inputRef.current.selectionEnd ?? 0;
+      if (browserStartIndex === 0 && browserEndIndex === 0) {
+        return null;
+      }
+      const nextSectionIndex = browserStartIndex <= sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
+      : sections.findIndex(section => section.startInInput - section.startSeparator.length > browserStartIndex);
+      return nextSectionIndex === -1 ? sections.length - 1 : nextSectionIndex - 1;
+    },
+    setSelectedSections: newSelectedSections => setSelectedSections(newSelectedSections),
+    focusField,
+    isFieldFocused: () => isFieldFocused(inputRef)
+  }));
+  return (0, _extends2.default)({}, forwardedProps, {
+    error,
+    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled),
+    onBlur: handleContainerBlur,
+    onClick: handleInputClick,
+    onFocus: handleInputFocus,
+    onPaste: handleInputPaste,
+    onKeyDown: wrappedHandleContainerKeyDown,
+    onClear: handleClear,
+    inputRef: handleRef,
+    // Additional
+    enableAccessibleFieldDOMStructure: false,
+    placeholder,
+    inputMode,
+    autoComplete: 'off',
+    value: shouldShowPlaceholder ? '' : valueStr,
+    onChange: handleInputChange,
+    focused,
+    disabled,
+    readOnly,
+    autoFocus,
+    openPickerAriaLabel
+  });
+};
+exports.useFieldV6TextField = useFieldV6TextField;
+function isFieldFocused(inputRef) {
+  return inputRef.current === (0, _utils.getActiveElement)(document);
+}

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

@@ -1,2 +1,3 @@
-import { UseFieldTextField } from './useField.types';
-export declare const useFieldV7TextField: UseFieldTextField<true>;
+import { UseFieldParameters, UseFieldProps, UseFieldReturnValue } from "./useField.types.js";
+import { PickerValidValue } from "../../models/index.js";
+export declare const useFieldV7TextField: <TValue extends PickerValidValue, TError, TValidationProps extends {}, TProps extends UseFieldProps<true>>(parameters: UseFieldParameters<TValue, true, TError, TValidationProps, TProps>) => UseFieldReturnValue<true, TProps>;