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

package/node/internals/hooks/useField/buildSectionsFromFormat.js

@@ -1,262 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.buildSectionsFromFormat = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _useField = require("./useField.utils");
-const expandFormat = ({
-  utils,
-  format
-}) => {
-  // Expand the provided format
-  let formatExpansionOverflow = 10;
-  let prevFormat = format;
-  let nextFormat = utils.expandFormat(format);
-  while (nextFormat !== prevFormat) {
-    prevFormat = nextFormat;
-    nextFormat = utils.expandFormat(prevFormat);
-    formatExpansionOverflow -= 1;
-    if (formatExpansionOverflow < 0) {
-      throw new Error('MUI X: The format expansion seems to be in an infinite loop. Please open an issue with the format passed to the picker component.');
-    }
-  }
-  return nextFormat;
-};
-const getEscapedPartsFromFormat = ({
-  utils,
-  expandedFormat
-}) => {
-  const escapedParts = [];
-  const {
-    start: startChar,
-    end: endChar
-  } = utils.escapedCharacters;
-  const regExp = new RegExp(`(\\${startChar}[^\\${endChar}]*\\${endChar})+`, 'g');
-  let match = null;
-  // eslint-disable-next-line no-cond-assign
-  while (match = regExp.exec(expandedFormat)) {
-    escapedParts.push({
-      start: match.index,
-      end: regExp.lastIndex - 1
-    });
-  }
-  return escapedParts;
-};
-const getSectionPlaceholder = (utils, localeText, sectionConfig, sectionFormat) => {
-  switch (sectionConfig.type) {
-    case 'year':
-      {
-        return localeText.fieldYearPlaceholder({
-          digitAmount: utils.formatByString(utils.date(undefined, 'default'), sectionFormat).length,
-          format: sectionFormat
-        });
-      }
-    case 'month':
-      {
-        return localeText.fieldMonthPlaceholder({
-          contentType: sectionConfig.contentType,
-          format: sectionFormat
-        });
-      }
-    case 'day':
-      {
-        return localeText.fieldDayPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'weekDay':
-      {
-        return localeText.fieldWeekDayPlaceholder({
-          contentType: sectionConfig.contentType,
-          format: sectionFormat
-        });
-      }
-    case 'hours':
-      {
-        return localeText.fieldHoursPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'minutes':
-      {
-        return localeText.fieldMinutesPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'seconds':
-      {
-        return localeText.fieldSecondsPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'meridiem':
-      {
-        return localeText.fieldMeridiemPlaceholder({
-          format: sectionFormat
-        });
-      }
-    default:
-      {
-        return sectionFormat;
-      }
-  }
-};
-const createSection = ({
-  utils,
-  date,
-  shouldRespectLeadingZeros,
-  localeText,
-  localizedDigits,
-  now,
-  token,
-  startSeparator
-}) => {
-  if (token === '') {
-    throw new Error('MUI X: Should not call `commitToken` with an empty token');
-  }
-  const sectionConfig = (0, _useField.getDateSectionConfigFromFormatToken)(utils, token);
-  const hasLeadingZerosInFormat = (0, _useField.doesSectionFormatHaveLeadingZeros)(utils, sectionConfig.contentType, sectionConfig.type, token);
-  const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
-  const isValidDate = utils.isValid(date);
-  let sectionValue = isValidDate ? utils.formatByString(date, token) : '';
-  let maxLength = null;
-  if (hasLeadingZerosInInput) {
-    if (hasLeadingZerosInFormat) {
-      maxLength = sectionValue === '' ? utils.formatByString(now, token).length : sectionValue.length;
-    } else {
-      if (sectionConfig.maxLength == null) {
-        throw new Error(`MUI X: The token ${token} should have a 'maxDigitNumber' property on it's adapter`);
-      }
-      maxLength = sectionConfig.maxLength;
-      if (isValidDate) {
-        sectionValue = (0, _useField.applyLocalizedDigits)((0, _useField.cleanLeadingZeros)((0, _useField.removeLocalizedDigits)(sectionValue, localizedDigits), maxLength), localizedDigits);
-      }
-    }
-  }
-  return (0, _extends2.default)({}, sectionConfig, {
-    format: token,
-    maxLength,
-    value: sectionValue,
-    placeholder: getSectionPlaceholder(utils, localeText, sectionConfig, token),
-    hasLeadingZerosInFormat,
-    hasLeadingZerosInInput,
-    startSeparator,
-    endSeparator: '',
-    modified: false
-  });
-};
-const buildSections = params => {
-  const {
-    utils,
-    expandedFormat,
-    escapedParts
-  } = params;
-  const now = utils.date(undefined);
-  const sections = [];
-  let startSeparator = '';
-
-  // This RegExp tests if the beginning of a string corresponds to a supported token
-  const validTokens = Object.keys(utils.formatTokenMap).sort((a, b) => b.length - a.length); // Sort to put longest word first
-
-  const regExpFirstWordInFormat = /^([a-zA-Z]+)/;
-  const regExpWordOnlyComposedOfTokens = new RegExp(`^(${validTokens.join('|')})*$`);
-  const regExpFirstTokenInWord = new RegExp(`^(${validTokens.join('|')})`);
-  const getEscapedPartOfCurrentChar = i => escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
-  let i = 0;
-  while (i < expandedFormat.length) {
-    const escapedPartOfCurrentChar = getEscapedPartOfCurrentChar(i);
-    const isEscapedChar = escapedPartOfCurrentChar != null;
-    const firstWordInFormat = regExpFirstWordInFormat.exec(expandedFormat.slice(i))?.[1];
-
-    // The first word in the format is only composed of tokens.
-    // We extract those tokens to create a new sections.
-    if (!isEscapedChar && firstWordInFormat != null && regExpWordOnlyComposedOfTokens.test(firstWordInFormat)) {
-      let word = firstWordInFormat;
-      while (word.length > 0) {
-        const firstWord = regExpFirstTokenInWord.exec(word)[1];
-        word = word.slice(firstWord.length);
-        sections.push(createSection((0, _extends2.default)({}, params, {
-          now,
-          token: firstWord,
-          startSeparator
-        })));
-        startSeparator = '';
-      }
-      i += firstWordInFormat.length;
-    }
-    // The remaining format does not start with a token,
-    // We take the first character and add it to the current section's end separator.
-    else {
-      const char = expandedFormat[i];
-
-      // If we are on the opening or closing character of an escaped part of the format,
-      // Then we ignore this character.
-      const isEscapeBoundary = isEscapedChar && escapedPartOfCurrentChar?.start === i || escapedPartOfCurrentChar?.end === i;
-      if (!isEscapeBoundary) {
-        if (sections.length === 0) {
-          startSeparator += char;
-        } else {
-          sections[sections.length - 1].endSeparator += char;
-        }
-      }
-      i += 1;
-    }
-  }
-  if (sections.length === 0 && startSeparator.length > 0) {
-    sections.push({
-      type: 'empty',
-      contentType: 'letter',
-      maxLength: null,
-      format: '',
-      value: '',
-      placeholder: '',
-      hasLeadingZerosInFormat: false,
-      hasLeadingZerosInInput: false,
-      startSeparator,
-      endSeparator: '',
-      modified: false
-    });
-  }
-  return sections;
-};
-const postProcessSections = ({
-  isRtl,
-  formatDensity,
-  sections
-}) => {
-  return sections.map(section => {
-    const cleanSeparator = separator => {
-      let cleanedSeparator = separator;
-      if (isRtl && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
-        cleanedSeparator = `\u2069${cleanedSeparator}\u2066`;
-      }
-      if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {
-        cleanedSeparator = ` ${cleanedSeparator} `;
-      }
-      return cleanedSeparator;
-    };
-    section.startSeparator = cleanSeparator(section.startSeparator);
-    section.endSeparator = cleanSeparator(section.endSeparator);
-    return section;
-  });
-};
-const buildSectionsFromFormat = params => {
-  let expandedFormat = expandFormat(params);
-  if (params.isRtl && params.enableAccessibleFieldDOMStructure) {
-    expandedFormat = expandedFormat.split(' ').reverse().join(' ');
-  }
-  const escapedParts = getEscapedPartsFromFormat((0, _extends2.default)({}, params, {
-    expandedFormat
-  }));
-  const sections = buildSections((0, _extends2.default)({}, params, {
-    expandedFormat,
-    escapedParts
-  }));
-  return postProcessSections((0, _extends2.default)({}, params, {
-    sections
-  }));
-};
-exports.buildSectionsFromFormat = buildSectionsFromFormat;

package/node/internals/hooks/useField/index.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "createDateStrForV6InputFromSections", {
-  enumerable: true,
-  get: function () {
-    return _useField2.createDateStrForV6InputFromSections;
-  }
-});
-Object.defineProperty(exports, "createDateStrForV7HiddenInputFromSections", {
-  enumerable: true,
-  get: function () {
-    return _useField2.createDateStrForV7HiddenInputFromSections;
-  }
-});
-Object.defineProperty(exports, "useField", {
-  enumerable: true,
-  get: function () {
-    return _useField.useField;
-  }
-});
-Object.defineProperty(exports, "useFieldInternalPropsWithDefaults", {
-  enumerable: true,
-  get: function () {
-    return _useFieldInternalPropsWithDefaults.useFieldInternalPropsWithDefaults;
-  }
-});
-var _useField = require("./useField");
-var _useField2 = require("./useField.utils");
-var _useFieldInternalPropsWithDefaults = require("./useFieldInternalPropsWithDefaults");

package/node/internals/hooks/useField/useField.js

@@ -1,246 +0,0 @@
-"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.useField = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _RtlProvider = require("@mui/system/RtlProvider");
-var _validation = require("../../../validation");
-var _useUtils = require("../useUtils");
-var _useField = require("./useField.utils");
-var _useFieldState = require("./useFieldState");
-var _useFieldCharacterEditing = require("./useFieldCharacterEditing");
-var _useFieldV7TextField = require("./useFieldV7TextField");
-var _useFieldV6TextField = require("./useFieldV6TextField");
-const useField = params => {
-  const utils = (0, _useUtils.useUtils)();
-  const {
-    internalProps,
-    internalProps: {
-      unstableFieldRef,
-      minutesStep,
-      enableAccessibleFieldDOMStructure = true,
-      disabled = false,
-      readOnly = false,
-      autoFocus = false
-    },
-    forwardedProps: {
-      onKeyDown,
-      error,
-      clearable,
-      onClear
-    },
-    fieldValueManager,
-    valueManager,
-    validator,
-    getOpenPickerButtonAriaLabel: getOpenDialogAriaText
-  } = params;
-  const isRtl = (0, _RtlProvider.useRtl)();
-  const stateResponse = (0, _useFieldState.useFieldState)(params);
-  const {
-    state,
-    activeSectionIndex,
-    parsedSelectedSections,
-    setSelectedSections,
-    clearValue,
-    clearActiveSection,
-    updateSectionValue,
-    setTempAndroidValueStr,
-    sectionsValueBoundaries,
-    localizedDigits,
-    timezone
-  } = stateResponse;
-  const characterEditingResponse = (0, _useFieldCharacterEditing.useFieldCharacterEditing)({
-    sections: state.sections,
-    updateSectionValue,
-    sectionsValueBoundaries,
-    localizedDigits,
-    setTempAndroidValueStr,
-    timezone
-  });
-  const {
-    resetCharacterQuery
-  } = characterEditingResponse;
-  const areAllSectionsEmpty = valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
-  const useFieldTextField = enableAccessibleFieldDOMStructure ? _useFieldV7TextField.useFieldV7TextField : _useFieldV6TextField.useFieldV6TextField;
-  const sectionOrder = React.useMemo(() => (0, _useField.getSectionOrder)(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
-  const {
-    returnedValue,
-    interactions
-  } = useFieldTextField((0, _extends2.default)({}, params, stateResponse, characterEditingResponse, {
-    areAllSectionsEmpty,
-    sectionOrder
-  }));
-  const handleContainerKeyDown = (0, _useEventCallback.default)(event => {
-    onKeyDown?.(event);
-    if (disabled) {
-      return;
-    }
-    // eslint-disable-next-line default-case
-    switch (true) {
-      // Select all
-      case (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'A' && !event.shiftKey && !event.altKey:
-        {
-          // prevent default to make sure that the next line "select all" while updating
-          // the internal state at the same time.
-          event.preventDefault();
-          setSelectedSections('all');
-          break;
-        }
-
-      // Move selection to next section
-      case event.key === 'ArrowRight':
-        {
-          event.preventDefault();
-          if (parsedSelectedSections == null) {
-            setSelectedSections(sectionOrder.startIndex);
-          } else if (parsedSelectedSections === 'all') {
-            setSelectedSections(sectionOrder.endIndex);
-          } else {
-            const nextSectionIndex = sectionOrder.neighbors[parsedSelectedSections].rightIndex;
-            if (nextSectionIndex !== null) {
-              setSelectedSections(nextSectionIndex);
-            }
-          }
-          break;
-        }
-
-      // Move selection to previous section
-      case event.key === 'ArrowLeft':
-        {
-          event.preventDefault();
-          if (parsedSelectedSections == null) {
-            setSelectedSections(sectionOrder.endIndex);
-          } else if (parsedSelectedSections === 'all') {
-            setSelectedSections(sectionOrder.startIndex);
-          } else {
-            const nextSectionIndex = sectionOrder.neighbors[parsedSelectedSections].leftIndex;
-            if (nextSectionIndex !== null) {
-              setSelectedSections(nextSectionIndex);
-            }
-          }
-          break;
-        }
-
-      // Reset the value of the selected section
-      case event.key === 'Delete':
-        {
-          event.preventDefault();
-          if (readOnly) {
-            break;
-          }
-          if (parsedSelectedSections == null || parsedSelectedSections === 'all') {
-            clearValue();
-          } else {
-            clearActiveSection();
-          }
-          resetCharacterQuery();
-          break;
-        }
-
-      // Increment / decrement the selected section value
-      case ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key):
-        {
-          event.preventDefault();
-          if (readOnly || activeSectionIndex == null) {
-            break;
-          }
-
-          // if all sections are selected, mark the currently editing one as selected
-          if (parsedSelectedSections === 'all') {
-            setSelectedSections(activeSectionIndex);
-          }
-          const activeSection = state.sections[activeSectionIndex];
-          const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          const newSectionValue = (0, _useField.adjustSectionValue)(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, activeDateManager.date, {
-            minutesStep
-          });
-          updateSectionValue({
-            activeSection,
-            newSectionValue,
-            shouldGoToNextSection: false
-          });
-          break;
-        }
-    }
-  });
-  (0, _useEnhancedEffect.default)(() => {
-    interactions.syncSelectionToDOM();
-  });
-  const {
-    hasValidationError
-  } = (0, _validation.useValidation)({
-    props: internalProps,
-    validator,
-    timezone,
-    value: state.value,
-    onError: internalProps.onError
-  });
-  const inputError = React.useMemo(() => {
-    // only override when `error` is undefined.
-    // in case of multi input fields, the `error` value is provided externally and will always be defined.
-    if (error !== undefined) {
-      return error;
-    }
-    return hasValidationError;
-  }, [hasValidationError, error]);
-  React.useEffect(() => {
-    if (!inputError && activeSectionIndex == null) {
-      resetCharacterQuery();
-    }
-  }, [state.referenceValue, activeSectionIndex, inputError]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // If `tempValueStrAndroid` is still defined for some section when running `useEffect`,
-  // Then `onChange` has only been called once, which means the user pressed `Backspace` to reset the section.
-  // This causes a small flickering on Android,
-  // But we can't use `useEnhancedEffect` which is always called before the second `onChange` call and then would cause false positives.
-  React.useEffect(() => {
-    if (state.tempValueStrAndroid != null && activeSectionIndex != null) {
-      resetCharacterQuery();
-      clearActiveSection();
-    }
-  }, [state.sections]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  React.useImperativeHandle(unstableFieldRef, () => ({
-    getSections: () => state.sections,
-    getActiveSectionIndex: interactions.getActiveSectionIndexFromDOM,
-    setSelectedSections: interactions.setSelectedSections,
-    focusField: interactions.focusField,
-    isFieldFocused: interactions.isFieldFocused
-  }));
-  const handleClearValue = (0, _useEventCallback.default)((event, ...args) => {
-    event.preventDefault();
-    onClear?.(event, ...args);
-    clearValue();
-    if (!interactions.isFieldFocused()) {
-      // setSelectedSections is called internally
-      interactions.focusField(0);
-    } else {
-      setSelectedSections(sectionOrder.startIndex);
-    }
-  });
-  const commonForwardedProps = {
-    onKeyDown: handleContainerKeyDown,
-    onClear: handleClearValue,
-    error: inputError,
-    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
-  };
-  const localizationContext = (0, _useUtils.useLocalizationContext)();
-  const openPickerAriaLabel = React.useMemo(() => getOpenDialogAriaText((0, _extends2.default)({}, localizationContext, {
-    value: state.value
-  })), [getOpenDialogAriaText, state.value, localizationContext]);
-  const commonAdditionalProps = {
-    disabled,
-    readOnly,
-    autoFocus,
-    openPickerAriaLabel
-  };
-  return (0, _extends2.default)({}, params.forwardedProps, commonForwardedProps, commonAdditionalProps, returnedValue);
-};
-exports.useField = useField;

package/node/internals/hooks/useField/useField.types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});