@mmb-digital/ds-lilly 1.0.36 → 1.0.38

package/src/components/Form/Autocomplete/Autocomplete.tsx

@@ -1,816 +0,0 @@
-import debounce from 'lodash.debounce'
-import React, { ChangeEvent, FocusEvent, Fragment, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
-
-import { Select2Context } from '../../../contexts'
-import { FormField2PropsType, Theme } from '../../../types'
-import { cx, KEYS, noop, stripDiacritics } from '../../../utils'
-import { Avatar, Dropdown, DropdownItem, DropdownMenu } from '../../Components'
-import { FormGroup2 } from '../FormGroup2'
-import { CategorisedItemType, ItemType, Select2Options } from '../Select'
-import { Select2CategorisedOptions, SelectedOption } from '../Select/_elements_'
-
-export const AutocompleteDropdownContentContainer = (props: { children: React.ReactNode }) => (
-  <Fragment>{props.children}</Fragment>
-)
-AutocompleteDropdownContentContainer.displayName = 'AutocompleteDropdownContentContainer'
-
-export interface Autocomplete2PropsType extends FormField2PropsType {
-  /** A delay before async loadItems is called after user stops typing */
-  asyncDelayMilliseconds?: number
-  /** A flag whether option to create new item should be rendered always (true) or only on empty result (false, default) */
-  canAlwaysCreateNewItem?: boolean
-  /** Displays additional information for selected option. (perex, amount) */
-  displayDetails?: boolean
-  /** Custom theme for dropdown items. */
-  dropdownTheme?: Theme
-  /** label of empty value */
-  emptyValueLabel?: string
-  /** Minimum filter length to enable filtering */
-  filterMinimumLength?: number
-  /** Sets if list of options has same width as select element. */
-  hasFullWidthOptions?: boolean
-  /** List of options to select. */
-  items?: ItemType[] | CategorisedItemType[]
-  /** A flag whether items are lazy loaded (on focus) */
-  isLazyLoaded?: boolean
-  /** Set loading state to dropdown trigger. */
-  isLoading?: boolean
-  /** Async callback to load items */
-  loadItems?: (query?: string) => Promise<ItemType[] | CategorisedItemType[]>
-  /** Async callback to load more items */
-  loadMoreItems?: (query?: string) => Promise<ItemType[] | CategorisedItemType[]>
-  /** Messages for inner texts */
-  messages: {
-    /** Loading items */
-    loadingItems?: ReactNode
-    /** Loading more items (next page) */
-    loadingMoreItems?: ReactNode
-    /** Nothing found */
-    nothingFound?: ReactNode
-    /** Type min. chars to start searching */
-    typeToFilter?: ReactNode
-    /** Create item prefix */
-    createItem?: ReactNode
-  }
-  /** Minimum length of new item */
-  newItemMinimumLength?: number
-  /** A callback to create new item */
-  onCreateNewItem?: (value?: string) => void
-  /** A callback called on highlight dropdown item */
-  onItemFocus?: (item: ItemType | CategorisedItemType) => void
-  /** A callback called on input change */
-  onInputChange?: (value?: string) => void
-  /** Flag whether hide trigger icon */
-  withoutTrigger?: boolean
-  /** Input max length */
-  maxLength?: number
-  /** Custom button (trigger) to create new item */
-  createNewItemCustomTrigger?: ReactNode
-}
-
-type ItemIndexType = {
-  category: number
-  item: number
-}
-
-export const Autocomplete = ({
-  asyncDelayMilliseconds = 200,
-  canAlwaysCreateNewItem = false,
-  createNewItemCustomTrigger,
-  disabledTooltip,
-  displayDetails = false,
-  dropdownTheme,
-  emptyValueLabel,
-  error,
-  filterMinimumLength = 2,
-  hasError,
-  hasFullWidthOptions = true,
-  hasWarning,
-  help,
-  isDisabled,
-  isLazyLoaded,
-  isLoading,
-  items: inputItems = [],
-  label,
-  labelTooltip,
-  loadItems,
-  loadMoreItems,
-  maxLength,
-  messages,
-  name,
-  newItemMinimumLength = 2,
-  onBlur,
-  onChange,
-  onCreateNewItem,
-  onFocus,
-  onInputChange,
-  onItemFocus,
-  placeholder,
-  testId,
-  theme,
-  value,
-  warning,
-  withoutTrigger
-}: Autocomplete2PropsType): JSX.Element => {
-  const [isDropdownVisible, setIsDropdownVisible] = useState(false)
-  const [buttonValue, setButtonValue] = useState<ItemType | null>(null)
-  const [typingMode, setTypingMode] = useState(false)
-  const [fulltextValue, setFulltextValue] = useState('')
-  const [currentItemPosition, setCurrentItemPosition] = useState(-1)
-  const [items, setItems] = useState<ItemType[] | CategorisedItemType[]>([])
-  const [searchState, setSearchState] = useState({
-    loading: false,
-    found: -1
-  })
-  const [pagingState, setPagingState] = useState({
-    loading: false,
-    found: -1
-  })
-
-  const getSearchString = useCallback((str: string) => stripDiacritics(str).toLowerCase(), [])
-  const emptyValueLabelPattern = useMemo(() => getSearchString(emptyValueLabel || ''), [emptyValueLabel])
-
-  const isCategorised = useCallback(
-    (itemList: ItemType[] | CategorisedItemType[]) => !!(itemList && (itemList as CategorisedItemType[])[0]?.items),
-    []
-  )
-
-  const loadAsyncItems = async (query?: string) => {
-    if (!loadItems) return
-    setSearchState({ loading: true, found: -1 })
-    setItems([])
-    const newItems = await loadItems(query)
-    const categorised = isCategorised(newItems)
-    const found = categorised
-      ? (newItems as CategorisedItemType[]).reduce((acc, curr) => acc + curr.items.length, 0)
-      : newItems.length
-    setSearchState({ loading: false, found })
-    setItems(newItems)
-  }
-
-  const fulltextMatchesEmptyValue = useMemo(() => emptyValueLabelPattern.includes(fulltextValue), [fulltextValue])
-
-  const [debouncedCallApi] = useState(() => (loadItems ? debounce(loadAsyncItems, asyncDelayMilliseconds) : noop))
-
-  const itemsIndex = useMemo((): ItemIndexType[] => {
-    let map
-    if (isCategorised(items)) {
-      map = (items as CategorisedItemType[]).reduce(
-        (acc: unknown[], category: CategorisedItemType, categoryIndex) =>
-          acc.concat(
-            category.items
-              .map((item: ItemType, index) => (!item.isDisabled ? { category: categoryIndex, item: index } : undefined))
-              .filter(Boolean)
-          ),
-        []
-      ) as ItemIndexType[]
-    } else {
-      map = (items as ItemType[])
-        .map((item, index) => (!item.isDisabled ? { category: -1, item: index } : undefined))
-        .filter(Boolean) as ItemIndexType[]
-    }
-
-    if (emptyValueLabel && (!fulltextValue || fulltextValue === buttonValue?.label || fulltextMatchesEmptyValue)) {
-      return [{ item: -1, category: -1 }, ...map]
-    }
-
-    return map
-  }, [items, fulltextValue, value, buttonValue])
-
-  const showCreatable =
-    !!onCreateNewItem &&
-    (itemsIndex.length === 0 || canAlwaysCreateNewItem) &&
-    typingMode &&
-    fulltextValue.length >= newItemMinimumLength &&
-    (!loadItems || (!!loadItems && searchState.found === 0) || (!!loadItems && canAlwaysCreateNewItem))
-
-  const getItemIndexByValue = (val?: string, sourceItems = items): ItemIndexType => {
-    if (val === undefined) {
-      return { item: -1, category: -1 }
-    }
-
-    if (isCategorised(sourceItems)) {
-      const index = (sourceItems as CategorisedItemType[])
-        .map((category, categoryIndex) => {
-          const item = category.items.findIndex((item: ItemType) => item.value === val && !item.isDisabled)
-          return { item, category: categoryIndex }
-        })
-        .find(({ item }) => item !== -1)
-
-      return index || { item: -1, category: -1 }
-    }
-
-    const item = (sourceItems as ItemType[]).findIndex((item: ItemType) => item.value === val && !item.isDisabled)
-    return { item, category: -1 }
-  }
-
-  const getItemIndexPosition = (index: ItemIndexType): number =>
-    itemsIndex.findIndex(({ category, item }) => index.item === item && index.category === category)
-
-  const getFilteredItems = (filter: string | number) => {
-    const newFilter = getSearchString(typeof filter === 'string' ? filter : filter.toString()).trim()
-
-    if (isCategorised(inputItems)) {
-      const filteredCategories = [] as CategorisedItemType[]
-      const unfilteredItems = inputItems as CategorisedItemType[]
-      unfilteredItems.map((category) => {
-        const filteredCategory = category.items.filter(({ amount, label, perex }: ItemType) => {
-          const text = getSearchString(`${label} ${perex || ''} ${amount || ''}`)
-          return text.includes(newFilter)
-        })
-        if (filteredCategory.length > 0) {
-          filteredCategories.push({ label: category.label, items: filteredCategory })
-        }
-      })
-      return filteredCategories
-    } else {
-      const filteredOptions = (inputItems as ItemType[]).filter(({ amount, label, perex }: ItemType) => {
-        const text = getSearchString(`${label} ${perex || ''} ${amount || ''}`)
-        return text.includes(newFilter)
-      })
-      return filteredOptions
-    }
-  }
-
-  useEffect(() => {
-    if (inputItems.length) {
-      setItems(inputItems)
-      const { category, item } = getItemIndexByValue(value, inputItems)
-      if (item > -1) {
-        const selectedItem = isCategorised(inputItems)
-          ? (inputItems as CategorisedItemType[])[category].items[item]
-          : (inputItems as ItemType[])[item]
-
-        if (selectedItem) {
-          setButtonValue(selectedItem)
-        }
-      } else {
-        setButtonValue(null)
-      }
-    }
-  }, [value, inputItems])
-
-  useEffect(() => {
-    if (isDropdownVisible) {
-      const itemIndex = getItemIndexByValue(value)
-      const itemIndexPosition = getItemIndexPosition(itemIndex)
-      setCurrentItemPosition(itemIndexPosition)
-    }
-  }, [isDropdownVisible])
-
-  useEffect(() => {
-    if (pagingState.loading) {
-      setTimeout(() => document.getElementById('autocomplete_loading-more-items')?.scrollIntoView())
-    }
-  }, [pagingState.loading])
-
-  const scrollToItem = (item: number, category = -1, center = false) => {
-    const itemElementId = isCategorised(items) ? `${name}_option-${category}-${item}` : `${name}_option-${item}`
-    if (center) {
-      const dropdownHalfHeight = (document.getElementById('autocomplete_dropdown')?.clientHeight || 0) / 2
-      const itemHalfHeight = (document.getElementById(itemElementId)?.clientHeight || 0) / 2
-      const itemOffset = document.getElementById(itemElementId)?.offsetTop || 0
-
-      if (itemOffset > dropdownHalfHeight) {
-        document
-          .getElementById('autocomplete_dropdown')
-          ?.scrollTo(0, (document.getElementById(itemElementId)?.offsetTop || 0) - dropdownHalfHeight + itemHalfHeight)
-      }
-    } else {
-      document.getElementById(itemElementId)?.scrollIntoView({ block: 'nearest' })
-    }
-  }
-
-  const focusCreatable = () => {
-    document.getElementById(`${name}_option-createNew`)?.scrollIntoView({ block: 'nearest' })
-    document.getElementById(`${name}_list-createNew`)?.focus()
-  }
-
-  const focusFulltextInput = () => {
-    setTimeout(() => {
-      try {
-        const inputElement = document.getElementById(`${name}_input`) as HTMLInputElement
-        inputElement?.select()
-      } catch (err) {
-        // set focus as failback
-        document.getElementById(`${name}_input`)?.focus()
-      }
-    })
-  }
-
-  const resetFulltext = (clearFulltext = true) => {
-    if (clearFulltext) {
-      setFulltextValue(buttonValue?.label || '')
-    }
-    setSearchState({ loading: false, found: -1 })
-    if (loadItems) {
-      setItems([])
-    } else {
-      setItems(inputItems)
-    }
-  }
-
-  useEffect(() => {
-    onInputChange && onInputChange(fulltextValue)
-    if (typingMode && fulltextValue && !isDropdownVisible) {
-      setIsDropdownVisible(true)
-    }
-    if (loadItems) {
-      if (fulltextValue.length >= filterMinimumLength) {
-        debouncedCallApi(fulltextValue)
-      } else {
-        resetFulltext(false)
-      }
-    } else if (buttonValue?.label !== fulltextValue) {
-      setItems(getFilteredItems(fulltextValue))
-    }
-  }, [fulltextValue])
-
-  const handleComboBoxClick = () => {
-    if (isDisabled || isLoading) return
-
-    if (!isDropdownVisible) {
-      // dropdown is going to be opened
-      setFulltextValue(buttonValue?.label || '')
-      focusFulltextInput()
-      if (isLazyLoaded && searchState.found === -1) {
-        loadAsyncItems()
-      }
-
-      const selectedItem = itemsIndex[currentItemPosition]
-      if (selectedItem && selectedItem.item !== -1) {
-        setTimeout(() => scrollToItem(selectedItem.item, selectedItem.category, true), 100)
-      }
-    }
-
-    setIsDropdownVisible((prev) => !prev)
-    setTypingMode((prev) => !prev)
-  }
-
-  const toggleDropdown = () => {
-    setTypingMode((prev) => !prev)
-    setIsDropdownVisible((prev) => !prev)
-  }
-
-  const handleFocus = (event: FocusEvent<HTMLElement>) => {
-    handleComboBoxClick()
-    onFocus && onFocus(event)
-  }
-
-  const propagateChange = (item?: ItemType) => {
-    if (item) {
-      setButtonValue(item)
-    } else {
-      setButtonValue(null)
-    }
-
-    // nechat tak, byl tam trabl s nulou
-    onChange && onChange(item?.value !== undefined ? item?.value : '')
-  }
-
-  const handleOptionClick = (item: ItemType): void => {
-    propagateChange(item)
-    setIsDropdownVisible(false)
-    setTypingMode(false)
-  }
-
-  const handleEmptyOptionClick = (): void => {
-    propagateChange()
-    setIsDropdownVisible(false)
-    setTypingMode(false)
-  }
-
-  const selectFocusedItem = (): ItemType | undefined => {
-    const itemIndex = itemsIndex[currentItemPosition]
-    if (!itemIndex) return
-    const { category, item } = itemIndex
-
-    if (item === -1) {
-      propagateChange()
-      return undefined
-    }
-
-    const selectedItem = isCategorised(items)
-      ? (items as CategorisedItemType[])[category].items[item]
-      : (items as ItemType[])[item]
-
-    if (selectedItem) {
-      propagateChange(selectedItem)
-    } else if (emptyValueLabel) {
-      propagateChange()
-    }
-
-    return selectedItem
-  }
-
-  const handleFocusedItem = (item: number, category = -1) => {
-    const position = getItemIndexPosition({ item, category })
-    setCurrentItemPosition(position)
-    scrollToItem(item, category)
-
-    if (onItemFocus && position !== currentItemPosition) {
-      const focusedItem = isCategorised(items)
-        ? (items as CategorisedItemType[])[category].items[item]
-        : (items as ItemType[])[item]
-      onItemFocus(focusedItem)
-    }
-  }
-
-  const handleCreateNewOption = () => {
-    setButtonValue({ label: fulltextValue, value: fulltextValue })
-    onCreateNewItem && onCreateNewItem(fulltextValue)
-  }
-
-  const handleBlur = (item?: ItemType | null) => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    // nechat tak, byl tam trabl s nulou
-    onBlur && onBlur(item?.value !== undefined ? item?.value : '')
-  }
-
-  const handleOptionKeyPress = (event: React.KeyboardEvent<HTMLUListElement>) => {
-    const { ctrlKey, key, metaKey, shiftKey, target } = event
-    switch (key) {
-      case KEYS.Enter:
-      case KEYS.Tab:
-        if (shiftKey) {
-          handleComboBoxClick()
-          return
-        }
-        if ((target as HTMLElement).id === `${name}_list-createNew`) {
-          handleCreateNewOption()
-        } else {
-          selectFocusedItem()
-        }
-
-        handleComboBoxClick()
-        if (key === KEYS.Enter) {
-          event.preventDefault()
-        }
-        break
-      case KEYS.ArrowDown:
-        {
-          const itemIndex = itemsIndex[currentItemPosition + 1]
-          if (itemIndex) {
-            handleFocusedItem(itemIndex.item, itemIndex.category)
-          } else if (showCreatable) {
-            if (currentItemPosition + 1 === itemsIndex.length) {
-              setCurrentItemPosition(itemsIndex.length)
-              focusCreatable()
-            } else {
-              setCurrentItemPosition(-1)
-              focusFulltextInput()
-            }
-          } else if (!pagingState.loading && !isLazyLoaded) {
-            setCurrentItemPosition(-1)
-            focusFulltextInput()
-          }
-          event.preventDefault()
-        }
-        break
-      case KEYS.ArrowUp:
-        {
-          const itemIndex = itemsIndex[currentItemPosition - 1]
-          if (itemIndex) {
-            handleFocusedItem(itemIndex.item, itemIndex.category)
-          } else {
-            setCurrentItemPosition(-1)
-            focusFulltextInput()
-          }
-          event.preventDefault()
-        }
-        break
-      case KEYS.Escape:
-        setIsDropdownVisible(false)
-        focusFulltextInput()
-        event.preventDefault()
-        break
-      case KEYS.Home:
-        {
-          const itemIndex = itemsIndex[0]
-          if (itemIndex) {
-            handleFocusedItem(itemIndex.item, itemIndex.category)
-          }
-          event.preventDefault()
-        }
-        break
-      case KEYS.End:
-        {
-          const itemIndex = itemsIndex[itemsIndex.length - 1]
-          if (itemIndex) {
-            handleFocusedItem(itemIndex.item, itemIndex.category)
-          }
-          event.preventDefault()
-        }
-        break
-      case KEYS.Space:
-        selectFocusedItem()
-        event.preventDefault()
-        break
-      default:
-        if (!(ctrlKey || metaKey) && key !== KEYS.Shift) {
-          setFulltextValue((prev) => `${prev}${key}`)
-        }
-        break
-    }
-  }
-
-  const handleFulltextKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const { key } = event
-    if (key === KEYS.ArrowDown) {
-      event.preventDefault()
-      setIsDropdownVisible(true)
-      const selectedItem = itemsIndex[currentItemPosition > -1 ? currentItemPosition : 0]
-      if (selectedItem) {
-        const { category, item } = selectedItem
-        handleFocusedItem(item, category)
-        setTimeout(() => {
-          scrollToItem(item, category)
-          const listElementId = isCategorised(items) ? `${name}_list-${category}` : `${name}_list`
-          document.getElementById(listElementId)?.focus()
-        })
-      } else if (showCreatable) {
-        setCurrentItemPosition(itemsIndex.length)
-        setTimeout(() => {
-          focusCreatable()
-        })
-      }
-      return
-    }
-
-    if (key === KEYS.Tab || key === KEYS.Enter) {
-      if (key === KEYS.Enter) {
-        event.preventDefault()
-      }
-
-      if (!isDropdownVisible) {
-        handleBlur(buttonValue)
-      } else {
-        if (showCreatable && itemsIndex.length === 0) {
-          handleCreateNewOption()
-        } else if (fulltextValue && fulltextValue !== buttonValue?.label && itemsIndex.length > 0) {
-          const { category, item } = itemsIndex[0]
-          const selectedItem = isCategorised(items)
-            ? (items as CategorisedItemType[])[category].items[item]
-            : (items as ItemType[])[item]
-          setButtonValue(selectedItem)
-          propagateChange(selectedItem)
-          handleBlur(selectedItem)
-        } else if (fulltextValue) {
-          handleBlur(buttonValue)
-        } else {
-          setCurrentItemPosition(-1)
-          resetFulltext(false)
-          propagateChange()
-          handleBlur()
-        }
-      }
-      setTimeout(() => {
-        setIsDropdownVisible(false)
-        setTypingMode(false)
-      })
-    }
-  }
-
-  const handleFulltextChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
-    setFulltextValue(target.value)
-  }
-
-  const addOrMergeItems = (existingData: CategorisedItemType[], newCategories: CategorisedItemType[]) => {
-    return newCategories.reduce((updatedData, newCategory) => {
-      const existingCategory = updatedData.find((category) => category.label === newCategory.label)
-
-      if (existingCategory) {
-        const updatedItems = existingCategory.items.concat(newCategory.items)
-        return updatedData.map((category) =>
-          category.label === newCategory.label ? { ...category, items: updatedItems } : category
-        )
-      } else {
-        return updatedData.concat(newCategory)
-      }
-    }, existingData)
-  }
-
-  const handleScrollToEnd = async () => {
-    if (!loadMoreItems || pagingState.loading || pagingState.found === 0) return
-    setPagingState({ loading: true, found: -1 })
-
-    const newItems = await loadMoreItems(fulltextValue)
-    const isCategorised = !!(newItems && (newItems as CategorisedItemType[])[0]?.items)
-    const found = isCategorised
-      ? (newItems as CategorisedItemType[]).reduce((acc, curr) => acc + curr.items.length, 0)
-      : newItems.length
-    setPagingState({ loading: false, found })
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    setItems((prev) => {
-      if (isCategorised) {
-        return addOrMergeItems(prev as CategorisedItemType[], newItems as CategorisedItemType[])
-      } else {
-        return prev.concat(newItems)
-      }
-    })
-  }
-
-  const handleDropdownVisibilityChange = (isVisible: boolean) => {
-    if (!isVisible) {
-      const trimmedFulltextValue = fulltextValue.trim()
-      setIsDropdownVisible(isVisible)
-      setTypingMode(isVisible)
-
-      if (!trimmedFulltextValue) {
-        propagateChange()
-      }
-
-      resetFulltext()
-      handleBlur(trimmedFulltextValue ? buttonValue : undefined)
-    }
-  }
-
-  const renderDropdownContent = () => {
-    if (
-      !showCreatable &&
-      items.length === 0 &&
-      !searchState.loading &&
-      searchState.found === -1 &&
-      messages.typeToFilter
-    ) {
-      return (
-        <AutocompleteDropdownContentContainer>
-          <div className="f-autocomplete__message">{messages.typeToFilter}</div>
-        </AutocompleteDropdownContentContainer>
-      )
-    }
-
-    if (!showCreatable && searchState.loading && messages.loadingItems) {
-      return (
-        <AutocompleteDropdownContentContainer>
-          <div className="f-autocomplete__message">
-            <Avatar iconName="loading" size="large" />
-            {messages.loadingItems}
-          </div>
-        </AutocompleteDropdownContentContainer>
-      )
-    }
-
-    return (
-      <AutocompleteDropdownContentContainer>
-        {isCategorised(items) ? <Select2CategorisedOptions /> : <Select2Options />}
-        {pagingState.loading && messages.loadingItems && (
-          <div className="f-autocomplete__message" id="autocomplete_loading-more-items">
-            <Avatar iconName="loading" size="large" />
-            {messages.loadingMoreItems}
-          </div>
-        )}
-        {(searchState.found === 0 || items.length === 0) && messages.nothingFound && (
-          <div className="f-autocomplete__message">{messages.nothingFound}</div>
-        )}
-        {showCreatable && (
-          <DropdownMenu
-            activeDescendant={`${name}_option-createNew`}
-            id={`${name}_list-createNew`}
-            role="listbox"
-            tabIndex={-1}
-            onKeyDown={handleOptionKeyPress}
-          >
-            <DropdownItem
-              id={`${name}_option-createNew`}
-              isFocused={currentItemPosition === itemsIndex.length}
-              role="option"
-              theme="c-dropdown__footer"
-              onClick={handleCreateNewOption}
-              onMouseOver={() => {
-                setCurrentItemPosition(itemsIndex.length)
-              }}
-            >
-              {createNewItemCustomTrigger || (
-                <button className="c-dropdown__btn" id={`${name}_createButton`} type="button">
-                  <Avatar isLeft backgroundColor="bgNeutralDefault" iconName="plus" />
-                  {messages.createItem}
-                  {` "${fulltextValue}"`}
-                </button>
-              )}
-            </DropdownItem>
-          </DropdownMenu>
-        )}
-      </AutocompleteDropdownContentContainer>
-    )
-  }
-
-  const focusedItem = itemsIndex[currentItemPosition]
-  const focusedCategoryIndex = focusedItem ? focusedItem.category : -1
-  const focusedItemIndex = focusedItem ? focusedItem.item : -1
-
-  const select2context = {
-    emptyValueLabel:
-      !fulltextValue || fulltextValue === buttonValue?.label || fulltextMatchesEmptyValue ? emptyValueLabel : undefined,
-    focusedCategoryIndex,
-    focusedItemIndex,
-    items,
-    name,
-    optionClick: handleOptionClick,
-    emptyOptionClick: handleEmptyOptionClick,
-    optionKeyPress: handleOptionKeyPress,
-    setFocusedItemIndex: handleFocusedItem,
-    value
-  }
-
-  const fromGroupProps = {
-    disabledTooltip,
-    error,
-    hasError: !!error || hasError,
-    hasWarning: !!warning || hasWarning,
-    help,
-    isDisabled,
-    label,
-    labelFor: `${name}_button`,
-    labelTooltip,
-    name,
-    warning
-  }
-  return (
-    <FormGroup2 theme={cx({ 'f-group2--open': isDropdownVisible }, theme)} {...fromGroupProps}>
-      <Select2Context.Provider value={select2context}>
-        <Dropdown
-          dropdownId="autocomplete_dropdown"
-          forceVisibility={isDropdownVisible}
-          hasSameWidthAsTrigger={hasFullWidthOptions}
-          placement="bottom-start"
-          theme={dropdownTheme}
-          trigger={null}
-          triggerComponent={
-            <div className="f-controlWrap f-autocomplete" data-testid={testId} role="combobox">
-              <div className={cx('f-control2 f-control2--select', { 'f-control2--large': displayDetails })}>
-                <button
-                  aria-expanded={isDropdownVisible}
-                  aria-haspopup="listbox"
-                  aria-invalid={!!error}
-                  aria-labelledby={`${name}_label`}
-                  className={cx('f-control2 f-control2--select f-autocomplete__trigger', {
-                    'f-control2--large': displayDetails,
-                    'f-autocomplete__trigger--loading': isLoading,
-                    'u-hide': typingMode
-                  })}
-                  data-value={value}
-                  disabled={isDisabled}
-                  id={`${name}_button`}
-                  name={name}
-                  tabIndex={isDropdownVisible ? -1 : 0}
-                  type="button"
-                  onClick={handleComboBoxClick}
-                  onFocus={handleFocus}
-                >
-                  {isLoading && <Avatar iconName="loading" />}
-                  <span className={cx(`f-control2__${buttonValue ? 'value' : 'placeholder'}`)}>
-                    {buttonValue ? <SelectedOption displayDetails={displayDetails} {...buttonValue} /> : placeholder}
-                  </span>
-                  {!withoutTrigger && <Avatar iconName="arrowDown" size="small" theme="f-control2__selectIcon" />}
-                </button>
-                <input
-                  aria-activedescendant={
-                    isDropdownVisible && (itemsIndex.length > 0 || showCreatable)
-                      ? isCategorised(items)
-                        ? `${name}_option-${focusedCategoryIndex}-${focusedItemIndex}`
-                        : `${name}_option-${focusedItemIndex}`
-                      : undefined
-                  }
-                  aria-autocomplete="list"
-                  aria-controls={`${name}_list`}
-                  aria-labelledby={`${name}_label`}
-                  autoComplete="off"
-                  className={cx('f-autocomplete__input', { 'u-hide': !isDropdownVisible })}
-                  disabled={isDisabled}
-                  id={`${name}_input`}
-                  maxLength={maxLength}
-                  name={name}
-                  placeholder={placeholder}
-                  tabIndex={isDropdownVisible ? 0 : -1}
-                  type="text"
-                  value={fulltextValue}
-                  onChange={handleFulltextChange}
-                  onKeyDown={handleFulltextKeyPress}
-                />
-                <button
-                  aria-invalid={!!error}
-                  className={cx('f-autocomplete__button')}
-                  disabled={isDisabled}
-                  id={`${name}_toggle_button`}
-                  name={name}
-                  tabIndex={-1}
-                  type="button"
-                  onClick={toggleDropdown}
-                >
-                  {!withoutTrigger && <Avatar iconName="arrowDown" size="small" theme="f-control2__selectIcon" />}
-                </button>
-              </div>
-            </div>
-          }
-          onScrollToEnd={handleScrollToEnd}
-          onVisibleChange={handleDropdownVisibilityChange}
-        >
-          {renderDropdownContent()}
-        </Dropdown>
-      </Select2Context.Provider>
-    </FormGroup2>
-  )
-}