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

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

@@ -1,150 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,226 +0,0 @@
-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;
-  }
-}

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

@@ -1,44 +0,0 @@
-import { UseFieldInternalProps, UseFieldState, FieldParsedSelectedSections, FieldSectionsValueBoundaries, SectionOrdering, UseFieldForwardedProps, CharacterEditingQuery } from "./useField.types.js";
-import { FieldSelectedSections, PickersTimezone, InferFieldSection, PickerManager } from "../../../models/index.js";
-import { PickerValidValue } from "../../models/index.js";
-export declare const useFieldState: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>>(parameters: UseFieldStateParameters<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, TForwardedProps>) => UseFieldStateReturnValue<TValue>;
-interface UseFieldStateParameters<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>> {
-  manager: PickerManager<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, any>;
-  internalPropsWithDefaults: UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, TError> & TValidationProps;
-  forwardedProps: TForwardedProps;
-}
-export interface UpdateSectionValueParameters<TValue extends PickerValidValue> {
-  /**
-   * The section on which we want to apply the new value.
-   */
-  section: InferFieldSection<TValue>;
-  /**
-   * Value to apply to the active section.
-   */
-  newSectionValue: string;
-  /**
-   * If `true`, the focus will move to the next section.
-   */
-  shouldGoToNextSection: boolean;
-}
-export interface UseFieldStateReturnValue<TValue extends PickerValidValue> {
-  activeSectionIndex: number | null;
-  areAllSectionsEmpty: boolean;
-  error: boolean;
-  localizedDigits: string[];
-  parsedSelectedSections: FieldParsedSelectedSections;
-  sectionOrder: SectionOrdering;
-  sectionsValueBoundaries: FieldSectionsValueBoundaries;
-  state: UseFieldState<TValue>;
-  timezone: PickersTimezone;
-  value: TValue;
-  clearValue: () => void;
-  clearActiveSection: () => void;
-  setCharacterQuery: (characterQuery: CharacterEditingQuery | null) => void;
-  setSelectedSections: (sections: FieldSelectedSections) => void;
-  setTempAndroidValueStr: (tempAndroidValueStr: string | null) => void;
-  updateSectionValue: (parameters: UpdateSectionValueParameters<TValue>) => void;
-  updateValueFromValueStr: (valueStr: string) => void;
-  getSectionsFromValue: (value: TValue, fallbackSections?: InferFieldSection<TValue>[] | null) => InferFieldSection<TValue>[];
-}
-export {};