@mui/material 9.0.0-alpha.0 → 9.0.0-alpha.2

package/esm/useAutocomplete/useAutocomplete.js

@@ -1,1087 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import setRef from '@mui/utils/setRef';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useControlled from '@mui/utils/useControlled';
-import useId from '@mui/utils/useId';
-import usePreviousProps from '@mui/utils/usePreviousProps';
-function areArraysSame({
-  array1,
-  array2,
-  parser = value => value
-}) {
-  return array1 && array2 && array1.length === array2.length && array1.every((prevOption, index) => parser(prevOption) === parser(array2[index]));
-}
-
-// https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
-function stripDiacritics(string) {
-  return string.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-}
-export function createFilterOptions(config = {}) {
-  const {
-    ignoreAccents = true,
-    ignoreCase = true,
-    limit,
-    matchFrom = 'any',
-    stringify,
-    trim = false
-  } = config;
-  return (options, {
-    inputValue,
-    getOptionLabel
-  }) => {
-    let input = trim ? inputValue.trim() : inputValue;
-    if (ignoreCase) {
-      input = input.toLowerCase();
-    }
-    if (ignoreAccents) {
-      input = stripDiacritics(input);
-    }
-    const filteredOptions = !input ? options : options.filter(option => {
-      let candidate = (stringify || getOptionLabel)(option);
-      if (ignoreCase) {
-        candidate = candidate.toLowerCase();
-      }
-      if (ignoreAccents) {
-        candidate = stripDiacritics(candidate);
-      }
-      return matchFrom === 'start' ? candidate.startsWith(input) : candidate.includes(input);
-    });
-    return typeof limit === 'number' ? filteredOptions.slice(0, limit) : filteredOptions;
-  };
-}
-const defaultFilterOptions = createFilterOptions();
-
-// Number of options to jump in list box when `Page Up` and `Page Down` keys are used.
-const pageSize = 5;
-const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
-const MULTIPLE_DEFAULT_VALUE = [];
-function getInputValue(value, multiple, getOptionLabel, renderValue) {
-  if (multiple || value == null || renderValue) {
-    return '';
-  }
-  const optionLabel = getOptionLabel(value);
-  return typeof optionLabel === 'string' ? optionLabel : '';
-}
-function useAutocomplete(props) {
-  const {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_isActiveElementInListbox = defaultIsActiveElementInListbox,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_classNamePrefix = 'Mui',
-    autoComplete = false,
-    autoHighlight = false,
-    autoSelect = false,
-    blurOnSelect = false,
-    clearOnBlur = !props.freeSolo,
-    clearOnEscape = false,
-    componentName = 'useAutocomplete',
-    defaultValue = props.multiple ? MULTIPLE_DEFAULT_VALUE : null,
-    disableClearable = false,
-    disableCloseOnSelect = false,
-    disabled: disabledProp,
-    disabledItemsFocusable = false,
-    disableListWrap = false,
-    filterOptions = defaultFilterOptions,
-    filterSelectedOptions = false,
-    freeSolo = false,
-    getOptionDisabled,
-    getOptionKey,
-    getOptionLabel: getOptionLabelProp = option => option.label ?? option,
-    groupBy,
-    handleHomeEndKeys = !props.freeSolo,
-    id: idProp,
-    includeInputInList = false,
-    inputValue: inputValueProp,
-    isOptionEqualToValue = (option, value) => option === value,
-    multiple = false,
-    onChange,
-    onClose,
-    onHighlightChange,
-    onInputChange,
-    onOpen,
-    open: openProp,
-    openOnFocus = false,
-    options,
-    readOnly = false,
-    renderValue,
-    selectOnFocus = !props.freeSolo,
-    value: valueProp
-  } = props;
-  const id = useId(idProp);
-  let getOptionLabel = getOptionLabelProp;
-  getOptionLabel = option => {
-    const optionLabel = getOptionLabelProp(option);
-    if (typeof optionLabel !== 'string') {
-      if (process.env.NODE_ENV !== 'production') {
-        const erroneousReturn = optionLabel === undefined ? 'undefined' : `${typeof optionLabel} (${optionLabel})`;
-        console.error(`MUI: The \`getOptionLabel\` method of ${componentName} returned ${erroneousReturn} instead of a string for ${JSON.stringify(option)}.`);
-      }
-      return String(optionLabel);
-    }
-    return optionLabel;
-  };
-  const ignoreFocus = React.useRef(false);
-  const firstFocus = React.useRef(true);
-  const inputRef = React.useRef(null);
-  const listboxRef = React.useRef(null);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [focusedItem, setFocusedItem] = React.useState(-1);
-  const defaultHighlighted = autoHighlight ? 0 : -1;
-  const highlightedIndexRef = React.useRef(defaultHighlighted);
-
-  // Calculate the initial inputValue on mount only.
-  // useRef ensures it doesn't update dynamically with defaultValue or value props.
-  const initialInputValue = React.useRef(getInputValue(defaultValue ?? valueProp, multiple, getOptionLabel)).current;
-  const [value, setValueState] = useControlled({
-    controlled: valueProp,
-    default: defaultValue,
-    name: componentName
-  });
-  const [inputValue, setInputValueState] = useControlled({
-    controlled: inputValueProp,
-    default: initialInputValue,
-    name: componentName,
-    state: 'inputValue'
-  });
-  const [focused, setFocused] = React.useState(false);
-  const resetInputValue = React.useCallback((event, newValue, reason) => {
-    // retain current `inputValue` if new option isn't selected and `clearOnBlur` is false
-    // When `multiple` is enabled, `newValue` is an array of all selected items including the newly selected item
-    const isOptionSelected = multiple ? value.length < newValue.length : newValue !== null;
-    if (!isOptionSelected && !clearOnBlur) {
-      return;
-    }
-    const newInputValue = getInputValue(newValue, multiple, getOptionLabel, renderValue);
-    if (inputValue === newInputValue) {
-      return;
-    }
-    setInputValueState(newInputValue);
-    if (onInputChange) {
-      onInputChange(event, newInputValue, reason);
-    }
-  }, [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState, clearOnBlur, value, renderValue]);
-  const [open, setOpenState] = useControlled({
-    controlled: openProp,
-    default: false,
-    name: componentName,
-    state: 'open'
-  });
-  const [inputPristine, setInputPristine] = React.useState(true);
-  const inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);
-  const popupOpen = open && !readOnly;
-  const filteredOptions = popupOpen ? filterOptions(options.filter(option => {
-    if (filterSelectedOptions && (multiple ? value : [value]).some(value2 => value2 !== null && isOptionEqualToValue(option, value2))) {
-      return false;
-    }
-    return true;
-  }),
-  // we use the empty string to manipulate `filterOptions` to not filter any options
-  // i.e. the filter predicate always returns true
-  {
-    inputValue: inputValueIsSelectedValue && inputPristine ? '' : inputValue,
-    getOptionLabel
-  }) : [];
-  const previousProps = usePreviousProps({
-    filteredOptions,
-    value,
-    inputValue
-  });
-  React.useEffect(() => {
-    const valueChange = value !== previousProps.value;
-    if (focused && !valueChange) {
-      return;
-    }
-
-    // Only reset the input's value when freeSolo if the component's value changes.
-    if (freeSolo && !valueChange) {
-      return;
-    }
-    resetInputValue(null, value, 'reset');
-  }, [value, resetInputValue, focused, previousProps.value, freeSolo]);
-  const listboxAvailable = open && filteredOptions.length > 0 && !readOnly;
-  const focusItem = useEventCallback(itemToFocus => {
-    if (itemToFocus === -1) {
-      inputRef.current.focus();
-    } else {
-      // Using `data-tag-index` for deprecated `renderTags`. Remove when `renderTags` is gone.
-      const indexType = renderValue ? 'data-item-index' : 'data-tag-index';
-      anchorEl.querySelector(`[${indexType}="${itemToFocus}"]`).focus();
-    }
-  });
-
-  // Ensure the focusedItem is never inconsistent
-  React.useEffect(() => {
-    if (multiple && focusedItem > value.length - 1) {
-      setFocusedItem(-1);
-      focusItem(-1);
-    }
-  }, [value, multiple, focusedItem, focusItem]);
-  function validOptionIndex(index, direction) {
-    if (!listboxRef.current || index < 0 || index >= filteredOptions.length) {
-      return -1;
-    }
-    let nextFocus = index;
-    while (true) {
-      const option = listboxRef.current.querySelector(`[data-option-index="${nextFocus}"]`);
-
-      // Same logic as MenuList.js
-      const nextFocusDisabled = disabledItemsFocusable ? false : !option || option.disabled || option.getAttribute('aria-disabled') === 'true';
-      if (option && option.hasAttribute('tabindex') && !nextFocusDisabled) {
-        // The next option is available
-        return nextFocus;
-      }
-
-      // The next option is disabled, move to the next element.
-      // with looped index
-      if (direction === 'next') {
-        nextFocus = (nextFocus + 1) % filteredOptions.length;
-      } else {
-        nextFocus = (nextFocus - 1 + filteredOptions.length) % filteredOptions.length;
-      }
-
-      // We end up with initial index, that means we don't have available options.
-      // All of them are disabled
-      if (nextFocus === index) {
-        return -1;
-      }
-    }
-  }
-  const setHighlightedIndex = useEventCallback(({
-    event,
-    index,
-    reason
-  }) => {
-    highlightedIndexRef.current = index;
-
-    // does the index exist?
-    if (index === -1) {
-      inputRef.current.removeAttribute('aria-activedescendant');
-    } else {
-      inputRef.current.setAttribute('aria-activedescendant', `${id}-option-${index}`);
-    }
-    if (onHighlightChange && ['mouse', 'keyboard', 'touch'].includes(reason)) {
-      onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);
-    }
-    if (!listboxRef.current) {
-      return;
-    }
-    const prev = listboxRef.current.querySelector(`[role="option"].${unstable_classNamePrefix}-focused`);
-    if (prev) {
-      prev.classList.remove(`${unstable_classNamePrefix}-focused`);
-      prev.classList.remove(`${unstable_classNamePrefix}-focusVisible`);
-    }
-    let listboxNode = listboxRef.current;
-    if (listboxRef.current.getAttribute('role') !== 'listbox') {
-      listboxNode = listboxRef.current.parentElement.querySelector('[role="listbox"]');
-    }
-
-    // "No results"
-    if (!listboxNode) {
-      return;
-    }
-    if (index === -1) {
-      listboxNode.scrollTop = 0;
-      return;
-    }
-    const option = listboxRef.current.querySelector(`[data-option-index="${index}"]`);
-    if (!option) {
-      return;
-    }
-    option.classList.add(`${unstable_classNamePrefix}-focused`);
-    if (reason === 'keyboard') {
-      option.classList.add(`${unstable_classNamePrefix}-focusVisible`);
-    }
-
-    // Scroll active descendant into view.
-    // Logic copied from https://www.w3.org/WAI/content-assets/wai-aria-practices/patterns/combobox/examples/js/select-only.js
-    // In case of mouse clicks and touch (in mobile devices) we avoid scrolling the element and keep both behaviors same.
-    // Consider this API instead once it has a better browser support:
-    // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });
-    if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse' && reason !== 'touch') {
-      const element = option;
-      const scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;
-      const elementBottom = element.offsetTop + element.offsetHeight;
-      if (elementBottom > scrollBottom) {
-        listboxNode.scrollTop = elementBottom - listboxNode.clientHeight;
-      } else if (element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0) < listboxNode.scrollTop) {
-        listboxNode.scrollTop = element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0);
-      }
-    }
-  });
-  const changeHighlightedIndex = useEventCallback(({
-    event,
-    diff,
-    direction = 'next',
-    reason
-  }) => {
-    if (!popupOpen) {
-      return;
-    }
-    const getNextIndex = () => {
-      const maxIndex = filteredOptions.length - 1;
-      if (diff === 'reset') {
-        return defaultHighlighted;
-      }
-      if (diff === 'start') {
-        return 0;
-      }
-      if (diff === 'end') {
-        return maxIndex;
-      }
-      const newIndex = highlightedIndexRef.current + diff;
-      if (newIndex < 0) {
-        if (newIndex === -1 && includeInputInList) {
-          return -1;
-        }
-        if (disableListWrap && highlightedIndexRef.current !== -1 || Math.abs(diff) > 1) {
-          return 0;
-        }
-        return maxIndex;
-      }
-      if (newIndex > maxIndex) {
-        if (newIndex === maxIndex + 1 && includeInputInList) {
-          return -1;
-        }
-        if (disableListWrap || Math.abs(diff) > 1) {
-          return maxIndex;
-        }
-        return 0;
-      }
-      return newIndex;
-    };
-    const nextIndex = validOptionIndex(getNextIndex(), direction);
-    setHighlightedIndex({
-      index: nextIndex,
-      reason,
-      event
-    });
-
-    // Sync the content of the input with the highlighted option.
-    if (autoComplete && diff !== 'reset') {
-      if (nextIndex === -1) {
-        inputRef.current.value = inputValue;
-      } else {
-        const option = getOptionLabel(filteredOptions[nextIndex]);
-        inputRef.current.value = option;
-
-        // The portion of the selected suggestion that has not been typed by the user,
-        // a completion string, appears inline after the input cursor in the textbox.
-        const index = option.toLowerCase().indexOf(inputValue.toLowerCase());
-        if (index === 0 && inputValue.length > 0) {
-          inputRef.current.setSelectionRange(inputValue.length, option.length);
-        }
-      }
-    }
-  });
-  const filteredOptionsChanged = !areArraysSame({
-    array1: previousProps.filteredOptions,
-    array2: filteredOptions,
-    parser: getOptionLabel
-  });
-  const getPreviousHighlightedOptionIndex = () => {
-    const isSameValue = (value1, value2) => {
-      const label1 = value1 ? getOptionLabel(value1) : '';
-      const label2 = value2 ? getOptionLabel(value2) : '';
-      return label1 === label2;
-    };
-    if (highlightedIndexRef.current !== -1 && !areArraysSame({
-      array1: previousProps.filteredOptions,
-      array2: filteredOptions,
-      parser: getOptionLabel
-    }) && previousProps.inputValue === inputValue && (multiple ? value.length === previousProps.value.length && previousProps.value.every((val, i) => getOptionLabel(value[i]) === getOptionLabel(val)) : isSameValue(previousProps.value, value))) {
-      const previousHighlightedOption = previousProps.filteredOptions[highlightedIndexRef.current];
-      if (previousHighlightedOption) {
-        return filteredOptions.findIndex(option => {
-          return getOptionLabel(option) === getOptionLabel(previousHighlightedOption);
-        });
-      }
-    }
-    return -1;
-  };
-  const syncHighlightedIndex = React.useCallback(() => {
-    if (!popupOpen) {
-      return;
-    }
-
-    // Check if the previously highlighted option still exists in the updated filtered options list and if the value and inputValue haven't changed
-    // If it exists and the value and the inputValue haven't changed, just update its index, otherwise continue execution
-    const previousHighlightedOptionIndex = getPreviousHighlightedOptionIndex();
-    if (previousHighlightedOptionIndex !== -1) {
-      highlightedIndexRef.current = previousHighlightedOptionIndex;
-      return;
-    }
-    const valueItem = multiple ? value[0] : value;
-
-    // The popup is empty, reset
-    if (filteredOptions.length === 0 || valueItem == null) {
-      changeHighlightedIndex({
-        diff: 'reset'
-      });
-      return;
-    }
-    if (!listboxRef.current) {
-      return;
-    }
-
-    // Synchronize the value with the highlighted index
-    if (valueItem != null) {
-      const currentOption = filteredOptions[highlightedIndexRef.current];
-
-      // Keep the current highlighted index if possible
-      if (multiple && currentOption && value.findIndex(val => isOptionEqualToValue(currentOption, val)) !== -1) {
-        return;
-      }
-      const itemIndex = filteredOptions.findIndex(optionItem => isOptionEqualToValue(optionItem, valueItem));
-      if (itemIndex === -1) {
-        changeHighlightedIndex({
-          diff: 'reset'
-        });
-      } else {
-        setHighlightedIndex({
-          index: itemIndex
-        });
-      }
-      return;
-    }
-
-    // Prevent the highlighted index to leak outside the boundaries.
-    if (highlightedIndexRef.current >= filteredOptions.length - 1) {
-      setHighlightedIndex({
-        index: filteredOptions.length - 1
-      });
-      return;
-    }
-
-    // Restore the focus to the previous index.
-    setHighlightedIndex({
-      index: highlightedIndexRef.current
-    });
-    // Ignore filteredOptions (and options, isOptionEqualToValue, getOptionLabel) not to break the scroll position
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-  // Only sync the highlighted index when the option switch between empty and not
-  filteredOptions.length,
-  // Don't sync the highlighted index with the value when multiple
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  multiple ? false : value, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);
-  const handleListboxRef = useEventCallback(node => {
-    setRef(listboxRef, node);
-    if (!node) {
-      return;
-    }
-    syncHighlightedIndex();
-  });
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
-      if (!inputRef.current || inputRef.current.nodeName !== 'INPUT') {
-        if (inputRef.current && inputRef.current.nodeName === 'TEXTAREA') {
-          console.warn([`A textarea element was provided to ${componentName} where input was expected.`, `This is not a supported scenario but it may work under certain conditions.`, `A textarea keyboard navigation may conflict with Autocomplete controls (for example enter and arrow keys).`, `Make sure to test keyboard navigation and add custom event handlers if necessary.`].join('\n'));
-        } else {
-          console.error([`MUI: Unable to find the input element. It was resolved to ${inputRef.current} while an HTMLInputElement was expected.`, `Instead, ${componentName} expects an input element.`, '', componentName === 'useAutocomplete' ? 'Make sure you have bound getInputProps correctly and that the normal ref/effect resolutions order is guaranteed.' : 'Make sure you have customized the input component correctly.'].join('\n'));
-        }
-      }
-    }, [componentName]);
-  }
-  React.useEffect(() => {
-    if (filteredOptionsChanged || popupOpen && !disableCloseOnSelect) {
-      syncHighlightedIndex();
-    }
-  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen, disableCloseOnSelect]);
-  const handleOpen = event => {
-    if (open) {
-      return;
-    }
-    setOpenState(true);
-    setInputPristine(true);
-    if (onOpen) {
-      onOpen(event);
-    }
-  };
-  const handleClose = (event, reason) => {
-    if (!open) {
-      return;
-    }
-    setOpenState(false);
-    if (onClose) {
-      onClose(event, reason);
-    }
-  };
-  const handleValue = (event, newValue, reason, details) => {
-    if (multiple) {
-      if (value.length === newValue.length && value.every((val, i) => val === newValue[i])) {
-        return;
-      }
-    } else if (value === newValue) {
-      return;
-    }
-    if (onChange) {
-      onChange(event, newValue, reason, details);
-    }
-    setValueState(newValue);
-  };
-  const isTouch = React.useRef(false);
-  const selectNewValue = (event, option, reasonProp = 'selectOption', origin = 'options') => {
-    let reason = reasonProp;
-    let newValue = option;
-    if (multiple) {
-      newValue = Array.isArray(value) ? value.slice() : [];
-      if (process.env.NODE_ENV !== 'production') {
-        const matches = newValue.filter(val => isOptionEqualToValue(option, val));
-        if (matches.length > 1) {
-          console.error([`MUI: The \`isOptionEqualToValue\` method of ${componentName} does not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${matches.length} matches.`].join('\n'));
-        }
-      }
-      const itemIndex = newValue.findIndex(valueItem => isOptionEqualToValue(option, valueItem));
-      if (itemIndex === -1) {
-        newValue.push(option);
-      } else if (origin !== 'freeSolo') {
-        newValue.splice(itemIndex, 1);
-        reason = 'removeOption';
-      }
-    }
-    resetInputValue(event, newValue, reason);
-    handleValue(event, newValue, reason, {
-      option
-    });
-    if (!disableCloseOnSelect && (!event || !event.ctrlKey && !event.metaKey)) {
-      handleClose(event, reason);
-    }
-    if (blurOnSelect === true || blurOnSelect === 'touch' && isTouch.current || blurOnSelect === 'mouse' && !isTouch.current) {
-      inputRef.current.blur();
-    }
-  };
-  function validItemIndex(index, direction) {
-    if (index === -1) {
-      return -1;
-    }
-    let nextFocus = index;
-    while (true) {
-      // Out of range
-      if (direction === 'next' && nextFocus === value.length || direction === 'previous' && nextFocus === -1) {
-        return -1;
-      }
-
-      // Using `data-tag-index` for deprecated `renderTags`. Remove when `renderTags` is removed.
-      const indexType = renderValue ? 'data-item-index' : 'data-tag-index';
-      const option = anchorEl.querySelector(`[${indexType}="${nextFocus}"]`);
-
-      // Same logic as MenuList.js
-      if (!option || !option.hasAttribute('tabindex') || option.disabled || option.getAttribute('aria-disabled') === 'true') {
-        nextFocus += direction === 'next' ? 1 : -1;
-      } else {
-        return nextFocus;
-      }
-    }
-  }
-  const handleFocusItem = (event, direction) => {
-    if (!multiple) {
-      return;
-    }
-    if (inputValue === '') {
-      handleClose(event, 'toggleInput');
-    }
-    let nextItem = focusedItem;
-
-    // When moving focus from the input to tags with ArrowLeft,
-    // always jump to the last tag (if any) from the input.
-    if (focusedItem === -1 && direction === 'previous') {
-      nextItem = value.length - 1;
-      // In freeSolo, clear any draft text so it doesn't "come back" later.
-      if (freeSolo && inputValue !== '') {
-        setInputValueState('');
-        if (onInputChange) {
-          onInputChange(event, '', 'reset');
-        }
-      }
-    } else {
-      nextItem += direction === 'next' ? 1 : -1;
-      if (nextItem < 0) {
-        nextItem = 0;
-      }
-      if (nextItem === value.length) {
-        nextItem = -1;
-      }
-    }
-    nextItem = validItemIndex(nextItem, direction);
-    setFocusedItem(nextItem);
-    focusItem(nextItem);
-  };
-  const handleClear = event => {
-    ignoreFocus.current = true;
-    setInputValueState('');
-    if (onInputChange) {
-      onInputChange(event, '', 'clear');
-    }
-    handleValue(event, multiple ? [] : null, 'clear');
-  };
-  const handleKeyDown = other => event => {
-    if (other.onKeyDown) {
-      other.onKeyDown(event);
-    }
-    if (event.defaultMuiPrevented) {
-      return;
-    }
-    if (focusedItem !== -1 && !['ArrowLeft', 'ArrowRight'].includes(event.key)) {
-      setFocusedItem(-1);
-      focusItem(-1);
-    }
-
-    // Wait until IME is settled.
-    if (event.which !== 229) {
-      switch (event.key) {
-        case 'Home':
-          if (popupOpen && handleHomeEndKeys) {
-            // Prevent scroll of the page
-            event.preventDefault();
-            changeHighlightedIndex({
-              diff: 'start',
-              direction: 'next',
-              reason: 'keyboard',
-              event
-            });
-          }
-          break;
-        case 'End':
-          if (popupOpen && handleHomeEndKeys) {
-            // Prevent scroll of the page
-            event.preventDefault();
-            changeHighlightedIndex({
-              diff: 'end',
-              direction: 'previous',
-              reason: 'keyboard',
-              event
-            });
-          }
-          break;
-        case 'PageUp':
-          // Prevent scroll of the page
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: -pageSize,
-            direction: 'previous',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-        case 'PageDown':
-          // Prevent scroll of the page
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: pageSize,
-            direction: 'next',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-        case 'ArrowDown':
-          // Prevent cursor move
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: 1,
-            direction: 'next',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-        case 'ArrowUp':
-          // Prevent cursor move
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: -1,
-            direction: 'previous',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-        case 'ArrowLeft':
-          {
-            const input = inputRef.current;
-            // Only handle ArrowLeft when the caret is at the start of the input.
-            // Otherwise let the browser move the caret normally.
-            const caretAtStart = input && input.selectionStart === 0 && input.selectionEnd === 0;
-            if (!caretAtStart) {
-              // Let the browser handle normal cursor movement
-              return;
-            }
-
-            // Single-value rendering: move focus from input to the single tag.
-            if (!multiple && renderValue && value != null) {
-              // Moving from input to single tag; clear freeSolo draft text,
-              // so it doesn't reappear when we move back.
-              if (freeSolo && inputValue !== '') {
-                setInputValueState('');
-                if (onInputChange) {
-                  onInputChange(event, '', 'reset');
-                }
-              }
-              setFocusedItem(0);
-              focusItem(0);
-            } else {
-              // Multi-value: delegate to tag navigation helper.
-              handleFocusItem(event, 'previous');
-            }
-            break;
-          }
-        case 'ArrowRight':
-          if (!multiple && renderValue) {
-            setFocusedItem(-1);
-            focusItem(-1);
-          } else {
-            handleFocusItem(event, 'next');
-          }
-          break;
-        case 'Enter':
-          if (highlightedIndexRef.current !== -1 && popupOpen) {
-            const option = filteredOptions[highlightedIndexRef.current];
-            const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
-
-            // Avoid early form validation, let the end-users continue filling the form.
-            event.preventDefault();
-            if (disabled) {
-              return;
-            }
-            selectNewValue(event, option, 'selectOption');
-
-            // Move the selection to the end.
-            if (autoComplete) {
-              inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
-            }
-          } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {
-            if (multiple) {
-              // Allow people to add new values before they submit the form.
-              event.preventDefault();
-            }
-            selectNewValue(event, inputValue, 'createOption', 'freeSolo');
-          }
-          break;
-        case 'Escape':
-          if (popupOpen) {
-            // Avoid Opera to exit fullscreen mode.
-            event.preventDefault();
-            // Avoid the Modal to handle the event.
-            event.stopPropagation();
-            handleClose(event, 'escape');
-          } else if (clearOnEscape && (inputValue !== '' || multiple && value.length > 0 || renderValue)) {
-            // Avoid Opera to exit fullscreen mode.
-            event.preventDefault();
-            // Avoid the Modal to handle the event.
-            event.stopPropagation();
-            handleClear(event);
-          }
-          break;
-        case 'Backspace':
-          // Remove the value on the left of the "cursor"
-          if (multiple && !readOnly && inputValue === '' && value.length > 0) {
-            const index = focusedItem === -1 ? value.length - 1 : focusedItem;
-            const newValue = value.slice();
-            newValue.splice(index, 1);
-            handleValue(event, newValue, 'removeOption', {
-              option: value[index]
-            });
-          }
-          if (!multiple && renderValue && !readOnly && inputValue === '') {
-            handleValue(event, null, 'removeOption', {
-              option: value
-            });
-          }
-          break;
-        case 'Delete':
-          // Remove the value on the right of the "cursor"
-          if (multiple && !readOnly && inputValue === '' && value.length > 0 && focusedItem !== -1) {
-            const index = focusedItem;
-            const newValue = value.slice();
-            newValue.splice(index, 1);
-            handleValue(event, newValue, 'removeOption', {
-              option: value[index]
-            });
-          }
-          if (!multiple && renderValue && !readOnly && inputValue === '') {
-            // Single-value rendering: Delete on empty input removes
-            // the single rendered option, same "removeOption" reason as multiple.
-            handleValue(event, null, 'removeOption', {
-              option: value
-            });
-          }
-          break;
-        default:
-      }
-    }
-  };
-  const handleFocus = event => {
-    setFocused(true);
-
-    // When focusing the input, ensure any previously focused item (chip)
-    // is cleared so the input receives the visible caret and the
-    // input-focused styling is applied.
-    if (focusedItem !== -1) {
-      setFocusedItem(-1);
-      // Ensure DOM focus lands on the input
-      focusItem(-1);
-    }
-    if (openOnFocus && !ignoreFocus.current) {
-      handleOpen(event);
-    }
-  };
-  const handleBlur = event => {
-    // Ignore the event when using the scrollbar with IE11
-    if (unstable_isActiveElementInListbox(listboxRef)) {
-      inputRef.current.focus();
-      return;
-    }
-    setFocused(false);
-    firstFocus.current = true;
-    ignoreFocus.current = false;
-    if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen) {
-      selectNewValue(event, filteredOptions[highlightedIndexRef.current], 'blur');
-    } else if (autoSelect && freeSolo && inputValue !== '') {
-      selectNewValue(event, inputValue, 'blur', 'freeSolo');
-    } else if (clearOnBlur) {
-      resetInputValue(event, value, 'blur');
-    }
-    handleClose(event, 'blur');
-  };
-  const handleInputChange = event => {
-    const newValue = event.target.value;
-    if (inputValue !== newValue) {
-      setInputValueState(newValue);
-      setInputPristine(false);
-      if (onInputChange) {
-        onInputChange(event, newValue, 'input');
-      }
-    }
-    if (newValue === '') {
-      // For normal single-select, clearing the input clears the value.
-      // For renderValue (chip-style single), only Backspace/Delete clear the value.
-      if (!disableClearable && !multiple && !renderValue) {
-        handleValue(event, null, 'clear');
-      }
-    } else {
-      handleOpen(event);
-    }
-  };
-  const handleOptionMouseMove = event => {
-    const index = Number(event.currentTarget.getAttribute('data-option-index'));
-    if (highlightedIndexRef.current !== index) {
-      setHighlightedIndex({
-        event,
-        index,
-        reason: 'mouse'
-      });
-    }
-  };
-  const handleOptionTouchStart = event => {
-    setHighlightedIndex({
-      event,
-      index: Number(event.currentTarget.getAttribute('data-option-index')),
-      reason: 'touch'
-    });
-    isTouch.current = true;
-  };
-  const handleOptionClick = event => {
-    const index = Number(event.currentTarget.getAttribute('data-option-index'));
-    selectNewValue(event, filteredOptions[index], 'selectOption');
-    isTouch.current = false;
-  };
-  const handleItemDelete = index => event => {
-    const newValue = value.slice();
-    newValue.splice(index, 1);
-    handleValue(event, newValue, 'removeOption', {
-      option: value[index]
-    });
-  };
-  const handleSingleItemDelete = event => {
-    handleValue(event, null, 'removeOption', {
-      option: value
-    });
-  };
-  const handlePopupIndicator = event => {
-    if (open) {
-      handleClose(event, 'toggleInput');
-    } else {
-      handleOpen(event);
-    }
-  };
-
-  // Prevent input blur when interacting with the combobox
-  const handleMouseDown = event => {
-    // Prevent focusing the input if click is anywhere outside the Autocomplete
-    if (!event.currentTarget.contains(event.target)) {
-      return;
-    }
-    if (event.target.getAttribute('id') !== id) {
-      event.preventDefault();
-    }
-  };
-
-  // Focus the input when interacting with the combobox
-  const handleClick = event => {
-    // Prevent focusing the input if click is anywhere outside the Autocomplete
-    if (!event.currentTarget.contains(event.target)) {
-      return;
-    }
-    inputRef.current.focus();
-    if (selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {
-      inputRef.current.select();
-    }
-    firstFocus.current = false;
-  };
-  const handleInputMouseDown = event => {
-    if (!disabledProp && (inputValue === '' || !open)) {
-      handlePopupIndicator(event);
-    }
-  };
-  let dirty = freeSolo && inputValue.length > 0;
-  dirty = dirty || (multiple ? value.length > 0 : value !== null);
-  let groupedOptions = filteredOptions;
-  if (groupBy) {
-    // used to keep track of key and indexes in the result array
-    const indexBy = new Map();
-    let warn = false;
-    groupedOptions = filteredOptions.reduce((acc, option, index) => {
-      const group = groupBy(option);
-      if (acc.length > 0 && acc[acc.length - 1].group === group) {
-        acc[acc.length - 1].options.push(option);
-      } else {
-        if (process.env.NODE_ENV !== 'production') {
-          if (indexBy.get(group) && !warn) {
-            console.warn(`MUI: The options provided combined with the \`groupBy\` method of ${componentName} returns duplicated headers.`, 'You can solve the issue by sorting the options with the output of `groupBy`.');
-            warn = true;
-          }
-          indexBy.set(group, true);
-        }
-        acc.push({
-          key: index,
-          index,
-          group,
-          options: [option]
-        });
-      }
-      return acc;
-    }, []);
-  }
-  if (disabledProp && focused) {
-    handleBlur();
-  }
-  return {
-    getRootProps: (other = {}) => ({
-      ...other,
-      onKeyDown: handleKeyDown(other),
-      onMouseDown: handleMouseDown,
-      onClick: handleClick
-    }),
-    getInputLabelProps: () => ({
-      id: `${id}-label`,
-      htmlFor: id
-    }),
-    getInputProps: () => ({
-      id,
-      value: inputValue,
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onChange: handleInputChange,
-      onMouseDown: handleInputMouseDown,
-      // if open then this is handled imperatively so don't let react override
-      // only have an opinion about this when closed
-      'aria-activedescendant': popupOpen ? '' : null,
-      'aria-autocomplete': autoComplete ? 'both' : 'list',
-      'aria-controls': listboxAvailable ? `${id}-listbox` : undefined,
-      'aria-expanded': listboxAvailable,
-      // Disable browser's suggestion that might overlap with the popup.
-      // Handle autocomplete but not autofill.
-      autoComplete: 'off',
-      ref: inputRef,
-      autoCapitalize: 'none',
-      spellCheck: 'false',
-      role: 'combobox',
-      disabled: disabledProp
-    }),
-    getClearProps: () => ({
-      tabIndex: -1,
-      type: 'button',
-      onClick: handleClear
-    }),
-    getItemProps: ({
-      index = 0
-    } = {}) => ({
-      ...(multiple && {
-        key: index
-      }),
-      ...(renderValue ? {
-        'data-item-index': index
-      } : {
-        'data-tag-index': index
-      }),
-      tabIndex: -1,
-      ...(!readOnly && {
-        onDelete: multiple ? handleItemDelete(index) : handleSingleItemDelete
-      })
-    }),
-    getPopupIndicatorProps: () => ({
-      tabIndex: -1,
-      type: 'button',
-      onClick: handlePopupIndicator
-    }),
-    // deprecated
-    getTagProps: ({
-      index
-    }) => ({
-      key: index,
-      'data-tag-index': index,
-      tabIndex: -1,
-      ...(!readOnly && {
-        onDelete: handleItemDelete(index)
-      })
-    }),
-    getListboxProps: () => ({
-      role: 'listbox',
-      id: `${id}-listbox`,
-      'aria-labelledby': `${id}-label`,
-      'aria-multiselectable': multiple || undefined,
-      ref: handleListboxRef,
-      onMouseDown: event => {
-        // Prevent blur
-        event.preventDefault();
-      }
-    }),
-    getOptionProps: ({
-      index,
-      option
-    }) => {
-      const selected = (multiple ? value : [value]).some(value2 => value2 != null && isOptionEqualToValue(option, value2));
-      const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
-      return {
-        key: getOptionKey?.(option) ?? getOptionLabel(option),
-        tabIndex: -1,
-        role: 'option',
-        id: `${id}-option-${index}`,
-        onMouseMove: handleOptionMouseMove,
-        onClick: handleOptionClick,
-        onTouchStart: handleOptionTouchStart,
-        'data-option-index': index,
-        'aria-disabled': disabled,
-        'aria-selected': selected
-      };
-    },
-    id,
-    inputValue,
-    value,
-    dirty,
-    expanded: popupOpen && anchorEl,
-    popupOpen,
-    focused: focused || focusedItem !== -1,
-    anchorEl,
-    setAnchorEl,
-    focusedItem,
-    // deprecated
-    focusedTag: focusedItem,
-    groupedOptions
-  };
-}
-export default useAutocomplete;