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

package/esm/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["props"],
+  _excluded2 = ["ownerState"];
+import * as React from 'react';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { PickerPopper } from "../../components/PickerPopper/PickerPopper.js";
+import { usePicker } from "../usePicker/index.js";
+import { PickersLayout } from "../../../PickersLayout/index.js";
+import { PickerProvider } from "../../components/PickerProvider.js";
+import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
+
+/**
+ * Hook managing all the single-date desktop pickers:
+ * - DesktopDatePicker
+ * - DesktopDateTimePicker
+ * - DesktopTimePicker
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const useDesktopPicker = _ref => {
+  let {
+      props
+    } = _ref,
+    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    slots,
+    slotProps: innerSlotProps,
+    label,
+    inputRef,
+    localeText
+  } = props;
+  const {
+    providerProps,
+    renderCurrentView,
+    ownerState
+  } = usePicker(_extends({}, pickerParams, {
+    props,
+    localeText,
+    autoFocusView: true,
+    viewContainerRole: 'dialog',
+    variant: 'desktop'
+  }));
+  const labelId = providerProps.privateContextValue.labelId;
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
+  const Field = slots.field;
+  const _useSlotProps = useSlotProps({
+      elementType: Field,
+      externalSlotProps: innerSlotProps?.field,
+      additionalProps: _extends({}, isToolbarHidden && {
+        id: labelId
+      }),
+      ownerState
+    }),
+    fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+  const Layout = slots.layout ?? PickersLayout;
+  let labelledById = labelId;
+  if (isToolbarHidden) {
+    if (label) {
+      labelledById = `${labelId}-label`;
+    } else {
+      labelledById = undefined;
+    }
+  }
+  const slotProps = _extends({}, innerSlotProps, {
+    toolbar: _extends({}, innerSlotProps?.toolbar, {
+      titleId: labelId
+    }),
+    popper: _extends({
+      'aria-labelledby': labelledById
+    }, innerSlotProps?.popper)
+  });
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+    children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
+      slots: slots,
+      slotProps: slotProps,
+      inputRef: inputRef,
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickerPopper, {
+        slots: slots,
+        slotProps: slotProps,
+        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+          slots: slots,
+          slotProps: slotProps,
+          children: renderCurrentView()
+        }))
+      })]
+    })
+  }));
+  return {
+    renderPicker
+  };
+};

package/esm/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { BasePickerProps } from "../../models/props/basePickerProps.js";
+import { PickerPopperSlots, PickerPopperSlotProps } from "../../components/PickerPopper/PickerPopper.js";
+import { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.js";
+import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js";
+import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
+import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
+import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
+export interface UseDesktopPickerSlots extends Pick<PickerPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
+  /**
+   * Component used to enter the date with the keyboard.
+   */
+  field: React.ElementType;
+}
+export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
+}
+export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
+export interface DesktopOnlyPickerProps extends UsePickerNonStaticProps {
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+}
+export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, any, TError, TExternalProps>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: UseDesktopPickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}
+export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
+  props: TExternalProps;
+}

package/esm/internals/hooks/useDesktopPicker/useDesktopPicker.types.js

@@ -0,0 +1 @@
+export {};

package/esm/internals/hooks/useField/buildSectionsFromFormat.d.ts

@@ -0,0 +1,15 @@
+import { FieldSection, MuiPickersAdapter, PickerValidDate } from "../../../models/index.js";
+import { PickersLocaleText } from "../../../locales/index.js";
+interface BuildSectionsFromFormatParams {
+  utils: MuiPickersAdapter;
+  format: string;
+  formatDensity: 'dense' | 'spacious';
+  isRtl: boolean;
+  shouldRespectLeadingZeros: boolean;
+  localeText: PickersLocaleText;
+  localizedDigits: string[];
+  date: PickerValidDate | null;
+  enableAccessibleFieldDOMStructure: boolean;
+}
+export declare const buildSectionsFromFormat: (params: BuildSectionsFromFormatParams) => FieldSection[];
+export {};

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

@@ -0,0 +1,254 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { applyLocalizedDigits, cleanLeadingZeros, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, removeLocalizedDigits } from "./useField.utils.js";
+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 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 = getDateSectionConfigFromFormatToken(utils, token);
+  const hasLeadingZerosInFormat = 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 = applyLocalizedDigits(cleanLeadingZeros(removeLocalizedDigits(sectionValue, localizedDigits), maxLength), localizedDigits);
+      }
+    }
+  }
+  return _extends({}, 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(_extends({}, 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;
+  });
+};
+export const buildSectionsFromFormat = params => {
+  let expandedFormat = expandFormat(params);
+  if (params.isRtl && params.enableAccessibleFieldDOMStructure) {
+    expandedFormat = expandedFormat.split(' ').reverse().join(' ');
+  }
+  const escapedParts = getEscapedPartsFromFormat(_extends({}, params, {
+    expandedFormat
+  }));
+  const sections = buildSections(_extends({}, params, {
+    expandedFormat,
+    escapedParts
+  }));
+  return postProcessSections(_extends({}, params, {
+    sections
+  }));
+};

package/esm/internals/hooks/useField/index.d.ts

@@ -0,0 +1,4 @@
+export { useField } from "./useField.js";
+export type { FieldValueManager, UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldChangeHandler, FieldChangeHandlerContext } from './useField.types';
+export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
+export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";

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

@@ -0,0 +1,3 @@
+export { useField } from "./useField.js";
+export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
+export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";

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

@@ -0,0 +1,5 @@
+import { UseFieldParams, UseFieldResponse, UseFieldCommonForwardedProps, UseFieldInternalProps, UseFieldForwardedProps } from "./useField.types.js";
+import { PickerValidValue } from "../../models/index.js";
+export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any> & {
+  minutesStep?: number;
+}>(params: UseFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;

package/esm/internals/hooks/useField/useField.js

@@ -0,0 +1,233 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useRtl } from '@mui/system/RtlProvider';
+import { useValidation } from "../../../validation/index.js";
+import { useUtils } from "../useUtils.js";
+import { adjustSectionValue, getSectionOrder } from "./useField.utils.js";
+import { useFieldState } from "./useFieldState.js";
+import { useFieldCharacterEditing } from "./useFieldCharacterEditing.js";
+import { useFieldV7TextField } from "./useFieldV7TextField.js";
+import { useFieldV6TextField } from "./useFieldV6TextField.js";
+export const useField = params => {
+  const utils = useUtils();
+  const {
+    internalProps,
+    internalProps: {
+      unstableFieldRef,
+      minutesStep,
+      enableAccessibleFieldDOMStructure = true,
+      disabled = false,
+      readOnly = false,
+      autoFocus = false
+    },
+    forwardedProps: {
+      onKeyDown,
+      error,
+      clearable,
+      onClear
+    },
+    fieldValueManager,
+    validator,
+    getOpenPickerButtonAriaLabel: getOpenDialogAriaText
+  } = params;
+  const isRtl = useRtl();
+  const stateResponse = useFieldState(params);
+  const {
+    state,
+    value,
+    activeSectionIndex,
+    parsedSelectedSections,
+    setSelectedSections,
+    clearValue,
+    clearActiveSection,
+    updateSectionValue,
+    setTempAndroidValueStr,
+    sectionsValueBoundaries,
+    localizedDigits,
+    timezone
+  } = stateResponse;
+  const characterEditingResponse = useFieldCharacterEditing({
+    sections: state.sections,
+    updateSectionValue,
+    sectionsValueBoundaries,
+    localizedDigits,
+    setTempAndroidValueStr,
+    timezone
+  });
+  const {
+    resetCharacterQuery
+  } = characterEditingResponse;
+  const areAllSectionsEmpty = React.useMemo(() => state.sections.every(section => section.value === ''), [state.sections]);
+  const useFieldTextField = enableAccessibleFieldDOMStructure ? useFieldV7TextField : useFieldV6TextField;
+  const sectionOrder = React.useMemo(() => getSectionOrder(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
+  const {
+    returnedValue,
+    interactions
+  } = useFieldTextField(_extends({}, params, stateResponse, characterEditingResponse, {
+    areAllSectionsEmpty,
+    sectionOrder
+  }));
+  const handleContainerKeyDown = useEventCallback(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 newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, fieldValueManager.getDateFromSection(value, activeSection), {
+            minutesStep
+          });
+          updateSectionValue({
+            section: activeSection,
+            newSectionValue,
+            shouldGoToNextSection: false
+          });
+          break;
+        }
+    }
+  });
+  useEnhancedEffect(() => {
+    interactions.syncSelectionToDOM();
+  });
+  const {
+    hasValidationError
+  } = useValidation({
+    props: internalProps,
+    validator,
+    timezone,
+    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 = useEventCallback((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 openPickerAriaLabel = React.useMemo(() => getOpenDialogAriaText(value), [getOpenDialogAriaText, value]);
+  const commonAdditionalProps = {
+    disabled,
+    readOnly,
+    autoFocus,
+    openPickerAriaLabel
+  };
+  return _extends({}, params.forwardedProps, commonForwardedProps, commonAdditionalProps, returnedValue);
+};