@yamada-ui/autocomplete 2.0.0-next-20240522064225 → 2.0.0-next-20240528154052

Sign up to get free protection for your applications and to get access to all the features.
Files changed (28) hide show
  1. package/dist/autocomplete-create.js.map +1 -1
  2. package/dist/autocomplete-create.mjs +1 -1
  3. package/dist/autocomplete-empty.js.map +1 -1
  4. package/dist/autocomplete-empty.mjs +1 -1
  5. package/dist/autocomplete-icon.js.map +1 -1
  6. package/dist/autocomplete-icon.mjs +1 -1
  7. package/dist/autocomplete-list.js.map +1 -1
  8. package/dist/autocomplete-list.mjs +1 -1
  9. package/dist/autocomplete-option-group.js.map +1 -1
  10. package/dist/autocomplete-option-group.mjs +1 -1
  11. package/dist/autocomplete-option.js.map +1 -1
  12. package/dist/autocomplete-option.mjs +1 -1
  13. package/dist/autocomplete.js +1 -1
  14. package/dist/autocomplete.js.map +1 -1
  15. package/dist/autocomplete.mjs +1 -1
  16. package/dist/{chunk-X2KU3OVN.mjs → chunk-22BJGCRM.mjs} +2 -2
  17. package/dist/chunk-22BJGCRM.mjs.map +1 -0
  18. package/dist/index.js +1 -1
  19. package/dist/index.js.map +1 -1
  20. package/dist/index.mjs +1 -1
  21. package/dist/multi-autocomplete.js +1 -1
  22. package/dist/multi-autocomplete.js.map +1 -1
  23. package/dist/multi-autocomplete.mjs +1 -1
  24. package/dist/use-autocomplete.js +1 -1
  25. package/dist/use-autocomplete.js.map +1 -1
  26. package/dist/use-autocomplete.mjs +1 -1
  27. package/package.json +6 -6
  28. package/dist/chunk-X2KU3OVN.mjs.map +0 -1
package/dist/autocomplete-create.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/autocomplete-create.tsx","../src/autocomplete-icon.tsx","../src/use-autocomplete.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx, runIfFunc } from \"@yamada-ui/utils\"\nimport type { FC, ReactElement } from \"react\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport {\n useAutocompleteContext,\n useAutocompleteCreate,\n} from \"./use-autocomplete\"\n\ntype AutocompleteCreateOptions = {\n /**\n * The autocomplete create option icon to use.\n */\n icon?: ReactElement\n /**\n * The label of the autocomplete create option.\n */\n children?: string | ((inputValue: string) => string)\n}\n\nexport type AutocompleteCreateProps = Omit<HTMLUIProps<\"li\">, \"children\"> &\n AutocompleteCreateOptions\n\nexport const AutocompleteCreate = forwardRef<AutocompleteCreateProps, \"li\">(\n ({ className, icon, children, ...rest }, ref) => {\n const { inputValue, styles } = useAutocompleteContext()\n const { getCreateProps } = useAutocompleteCreate()\n\n children ??= inputValue\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <ui.li\n className={cx(\"ui-autocomplete__item--create\", className)}\n __css={css}\n {...getCreateProps(rest, ref)}\n >\n {icon !== null ? (\n <AutocompleteItemIcon>{icon || <PlusIcon />}</AutocompleteItemIcon>\n ) : null}\n {icon ? (\n <ui.span style={{ pointerEvents: \"none\", flex: 1 }} lineClamp={1}>\n {runIfFunc(children, inputValue)}\n </ui.span>\n ) : (\n runIfFunc(children, inputValue)\n )}\n </ui.li>\n )\n },\n)\n\nconst PlusIcon: FC = () => (\n <svg viewBox=\"0 0 45.402 45.402\" width=\"1em\" height=\"1em\">\n <path\n fill=\"currentColor\"\n d=\"M41.267,18.557H26.832V4.134C26.832,1.851,24.99,0,22.707,0c-2.283,0-4.124,1.851-4.124,4.135v14.432H4.141 c-2.283,0-4.139,1.851-4.138,4.135c-0.001,1.141,0.46,2.187,1.207,2.934c0.748,0.749,1.78,1.222,2.92,1.222h14.453V41.27 c0,1.142,0.453,2.176,1.201,2.922c0.748,0.748,1.777,1.211,2.919,1.211c2.282,0,4.129-1.851,4.129-4.133V26.857h14.435 c2.283,0,4.134-1.867,4.133-4.15C45.399,20.425,43.548,18.557,41.267,18.557z\"\n />\n </svg>\n)\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon, CloseIcon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport type { FC, HTMLAttributes } from \"react\"\nimport { cloneElement, useRef } from \"react\"\nimport { useAutocompleteContext } from \"./use-autocomplete\"\n\nexport type AutocompleteIconProps = HTMLUIProps<\"div\">\n\nexport const AutocompleteIcon = forwardRef<AutocompleteIconProps, \"div\">(\n ({ className, children, __css, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n cursor: \"pointer\",\n ...styles.icon,\n ...__css,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n maxWidth: \"1em\",\n maxHeight: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-autocomplete__icon\", className)}\n __css={css}\n {...rest}\n >\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n },\n)\n\nexport type AutocompleteClearIconProps = AutocompleteIconProps & {\n disabled?: boolean\n}\n\nexport const AutocompleteClearIcon: FC<AutocompleteClearIconProps> = ({\n className,\n children,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n const { styles } = useAutocompleteContext()\n\n const isDisabled = props.disabled\n\n const rest = useClickable({\n ref,\n isDisabled,\n ...(props as HTMLAttributes<HTMLElement>),\n })\n\n return (\n <AutocompleteIcon\n aria-label=\"Clear value\"\n className={cx(\"ui-autocomplete__icon--clear\", className)}\n __css={styles.clearIcon}\n {...rest}\n >\n {children ?? <CloseIcon w=\"0.5em\" h=\"0.5em\" />}\n </AutocompleteIcon>\n )\n}\n\nexport type AutocompleteItemIconProps = HTMLUIProps<\"span\">\n\nexport const AutocompleteItemIcon = forwardRef<\n AutocompleteItemIconProps,\n \"span\"\n>(({ className, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.itemIcon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-autocomplete__item-icon\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n","import type { CSSUIObject, HTMLUIProps, UIPropGetter } from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { MotionUIPropGetter } from \"@yamada-ui/motion\"\nimport { popoverProperties, type PopoverProps } from \"@yamada-ui/popover\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport { useOutsideClick } from \"@yamada-ui/use-outside-click\"\nimport type { Dict, Union, DOMAttributes } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n dataAttr,\n funcAll,\n getEventRelatedTarget,\n handlerAll,\n isArray,\n isContains,\n isHTMLElement,\n mergeRefs,\n omitObject,\n pickObject,\n splitObject,\n useUnmountEffect,\n useUpdateEffect,\n getValidChildren,\n isUndefined,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n CSSProperties,\n Dispatch,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport type { AutocompleteOptionProps } from \"./\"\nimport { AutocompleteOption, AutocompleteOptionGroup } from \"./\"\n\ntype AutocompleteBaseItem = Omit<\n AutocompleteOptionProps,\n \"value\" | \"children\"\n> & {\n label?: string\n}\n\ntype AutocompleteItemWithValue = AutocompleteBaseItem & {\n value?: string\n}\n\ntype AutocompleteItemWithItems = AutocompleteBaseItem & {\n items?: AutocompleteItemWithValue[]\n}\n\nexport type AutocompleteItem =\n | AutocompleteItemWithValue\n | AutocompleteItemWithItems\n\nconst kanaMap: Record<string, string> = {\n ｶﾞ: \"ガ\",\n ｷﾞ: \"ギ\",\n ｸﾞ: \"グ\",\n ｹﾞ: \"ゲ\",\n ｺﾞ: \"ゴ\",\n ｻﾞ: \"ザ\",\n ｼﾞ: \"ジ\",\n ｽﾞ: \"ズ\",\n ｾﾞ: \"ゼ\",\n ｿﾞ: \"ゾ\",\n ﾀﾞ: \"ダ\",\n ﾁﾞ: \"ヂ\",\n ﾂﾞ: \"ヅ\",\n ﾃﾞ: \"デ\",\n ﾄﾞ: \"ド\",\n ﾊﾞ: \"バ\",\n ﾋﾞ: \"ビ\",\n ﾌﾞ: \"ブ\",\n ﾍﾞ: \"ベ\",\n ﾎﾞ: \"ボ\",\n ﾊﾟ: \"パ\",\n ﾋﾟ: \"ピ\",\n ﾌﾟ: \"プ\",\n ﾍﾟ: \"ペ\",\n ﾎﾟ: \"ポ\",\n ｳﾞ: \"ヴ\",\n ﾜﾞ: \"ヷ\",\n ｦﾞ: \"ヺ\",\n ｱ: \"ア\",\n ｲ: \"イ\",\n ｳ: \"ウ\",\n ｴ: \"エ\",\n ｵ: \"オ\",\n ｶ: \"カ\",\n ｷ: \"キ\",\n ｸ: \"ク\",\n ｹ: \"ケ\",\n ｺ: \"コ\",\n ｻ: \"サ\",\n ｼ: \"シ\",\n ｽ: \"ス\",\n ｾ: \"セ\",\n ｿ: \"ソ\",\n ﾀ: \"タ\",\n ﾁ: \"チ\",\n ﾂ: \"ツ\",\n ﾃ: \"テ\",\n ﾄ: \"ト\",\n ﾅ: \"ナ\",\n ﾆ: \"ニ\",\n ﾇ: \"ヌ\",\n ﾈ: \"ネ\",\n ﾉ: \"ノ\",\n ﾊ: \"ハ\",\n ﾋ: \"ヒ\",\n ﾌ: \"フ\",\n ﾍ: \"ヘ\",\n ﾎ: \"ホ\",\n ﾏ: \"マ\",\n ﾐ: \"ミ\",\n ﾑ: \"ム\",\n ﾒ: \"メ\",\n ﾓ: \"モ\",\n ﾔ: \"ヤ\",\n ﾕ: \"ユ\",\n ﾖ: \"ヨ\",\n ﾗ: \"ラ\",\n ﾘ: \"リ\",\n ﾙ: \"ル\",\n ﾚ: \"レ\",\n ﾛ: \"ロ\",\n ﾜ: \"ワ\",\n ｦ: \"ヲ\",\n ﾝ: \"ン\",\n ｧ: \"ァ\",\n ｨ: \"ィ\",\n ｩ: \"ゥ\",\n ｪ: \"ェ\",\n ｫ: \"ォ\",\n ｯ: \"ッ\",\n ｬ: \"ャ\",\n ｭ: \"ュ\",\n ｮ: \"ョ\",\n \"｡\": \"。\",\n \"､\": \"、\",\n ｰ: \"ー\",\n \"｢\": \"「\",\n \"｣\": \"」\",\n \"･\": \"・\",\n}\n\nconst defaultFormat = (value: string) => {\n value = value.replace(/[！-～]/g, (v) =>\n String.fromCharCode(v.charCodeAt(0) - 0xfee0),\n )\n\n const reg = new RegExp(\"(\" + Object.keys(kanaMap).join(\"|\") + \")\", \"g\")\n\n value = value\n .replace(reg, (v) => kanaMap[v])\n .replace(/ﾞ/g, \"゛\")\n .replace(/ﾟ/g, \"゜\")\n\n value = value.toUpperCase()\n\n return value\n}\n\nconst flattenItems = (\n items: AutocompleteItem[],\n): AutocompleteItemWithValue[] => {\n const filterItems = (\n items: AutocompleteItem[] | AutocompleteItemWithValue[],\n ): (AutocompleteItemWithValue | AutocompleteItemWithValue[])[] =>\n items\n .map((item) => {\n const { isDisabled, isFocusable } = item\n const trulyDisabled = !!isDisabled && !isFocusable\n\n if (trulyDisabled) return\n\n if (\"items\" in item) {\n return filterItems(item.items ?? [])\n } else {\n return item as AutocompleteItemWithValue\n }\n })\n .filter(Boolean) as (\n | AutocompleteItemWithValue\n | AutocompleteItemWithValue[]\n )[]\n\n return filterItems(items).flat(Infinity) as AutocompleteItemWithValue[]\n}\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"autocomplete-item\")\n\nexport const {\n DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n useDescendantsContext: useAutocompleteDescendantsContext,\n useDescendants: useAutocompleteDescendants,\n useDescendant: useAutocompleteDescendant,\n} = createDescendant<HTMLElement>()\n\ntype AutocompleteContext = Omit<\n UseAutocompleteProps,\n \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n> & {\n value: string | string[]\n label: string | string[] | undefined\n inputValue: string\n isHit: boolean\n isEmpty: boolean\n isAllSelected: boolean\n onChange: (newValue: string) => void\n onChangeLabel: (newValue: string, runOmit?: boolean) => void\n pickOptions: (value: string) => void\n rebirthOptions: (runFocus?: boolean) => void\n inputProps: DOMAttributes\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onCreate: () => void\n onFocusFirst: () => void\n onFocusLast: () => void\n onFocusNext: (index?: number) => void\n onFocusPrev: (index?: number) => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n listRef: RefObject<HTMLUListElement>\n inputRef: RefObject<HTMLInputElement>\n formControlProps: Record<string, any>\n styles: Record<string, CSSUIObject>\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n createContext<AutocompleteContext>({\n name: \"AutocompleteContext\",\n errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n })\n\ntype UseAutocompleteBaseProps<T extends string | string[] = string> = Omit<\n PopoverProps,\n | \"initialFocusRef\"\n | \"closeOnButton\"\n | \"trigger\"\n | \"autoFocus\"\n | \"restoreFocus\"\n | \"openDelay\"\n | \"closeDelay\"\n> &\n FormControlOptions & {\n /**\n * The value of the autocomplete.\n */\n value?: T\n /**\n * The initial value of the autocomplete.\n */\n defaultValue?: T\n /**\n * The callback invoked when value state changes.\n */\n onChange?: (value: T) => void\n /**\n * The callback invoked when search input.\n */\n onSearch?: (ev: ChangeEvent<HTMLInputElement>) => void\n /**\n * The callback invoked when autocomplete option created.\n */\n onCreate?: (newItem: AutocompleteItem, newItems: AutocompleteItem[]) => void\n /**\n * Function to format text when search input.\n */\n format?: (value: string) => string\n /**\n * The position to be inserted when the autocomplete option is created.\n *\n * @default 'first'\n */\n insertPositionItem?: Union<\"first\" | \"last\"> | [string, \"first\" | \"last\"]\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n /**\n * The message displayed when the search yields no hits.\n *\n * @default 'No results found'\n */\n emptyMessage?: string\n /**\n * If `true`, enables the creation of autocomplete option.\n *\n * @default false\n */\n allowCreate?: boolean\n /**\n * If `true`, enables the free input.\n */\n allowFree?: boolean\n /**\n * If `true`, the selected item(s) will be excluded from the list.\n *\n * @default false\n */\n omitSelectedValues?: boolean\n /**\n * The maximum selectable value.\n */\n maxSelectValues?: number\n /**\n * Props for select option element.\n */\n optionProps?: Omit<AutocompleteOptionProps, \"value\" | \"children\">\n /**\n * If provided, generate options based on items.\n */\n items?: AutocompleteItem[]\n }\n\nexport type UseAutocompleteProps<T extends string | string[] = string> = Omit<\n HTMLUIProps<\"input\">,\n | keyof UseAutocompleteBaseProps\n | \"list\"\n | \"disabled\"\n | \"required\"\n | \"readOnly\"\n | \"size\"\n> &\n UseAutocompleteBaseProps<T>\n\nexport const useAutocomplete = <T extends string | string[] = string>({\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n onCreate: onCreateProp,\n onSearch: onSearchProp,\n closeOnSelect = true,\n omitSelectedValues = false,\n maxSelectValues,\n closeOnBlur = true,\n closeOnEsc = true,\n allowCreate = false,\n allowFree = false,\n insertPositionItem = \"first\",\n emptyMessage = \"No results found\",\n format = defaultFormat,\n placement = \"bottom-start\",\n duration = 0.2,\n optionProps,\n placeholder,\n items,\n children,\n isOpen: isOpenProp,\n defaultIsOpen,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n ...rest\n}: UseAutocompleteProps<T>) => {\n rest = useFormControlProps(rest)\n\n const { id } = rest\n\n const { \"aria-readonly\": _ariaReadonly, ...formControlProps } = pickObject(\n rest,\n formControlProperties,\n )\n const [containerProps, inputProps] = splitObject<Dict, string>(\n omitObject(rest, [...popoverProperties, \"onKeyDown\", \"onFocus\"]),\n layoutStyleProperties,\n )\n\n const descendants = useAutocompleteDescendants()\n\n const containerRef = useRef<HTMLDivElement>(null)\n const listRef = useRef<HTMLUListElement>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const isComposition = useRef<boolean>(false)\n const prevValue = useRef<T | undefined>(undefined)\n\n const [resolvedItems, setResolvedItems] = useState<\n AutocompleteItem[] | undefined\n >(items)\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n })\n const [label, setLabel] = useState<T | undefined>(undefined)\n const [inputValue, setInputValue] = useState<string>(\"\")\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isAllSelected, setIsAllSelected] = useState<boolean>(false)\n const [isHit, setIsHit] = useState<boolean>(true)\n const {\n isOpen,\n onOpen: onInternalOpen,\n onClose,\n } = useDisclosure({\n isOpen: isOpenProp,\n defaultIsOpen,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n })\n const isFocused = focusedIndex > -1\n const isCreate = focusedIndex === -2 && allowCreate\n const isMulti = isArray(value)\n const isEmptyValue = !isMulti ? !value : !value.length\n\n const [firstInsertPositionItem, secondInsertPositionItem] = useMemo(() => {\n if (isArray(insertPositionItem)) {\n return insertPositionItem\n } else {\n return [insertPositionItem, \"first\"]\n }\n }, [insertPositionItem])\n\n if (allowCreate && !isUndefined(children)) {\n console.warn(\n `${!isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"}: ${\n !isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"\n } internally prefers 'children'. If 'allowCreate' is true, it will not be reflected correctly. If want to reflect, please set 'items' in props.`,\n )\n }\n\n const selectedValues = descendants.enabledValues(\n ({ node }) => isMulti && value.includes(node.dataset.value ?? \"\"),\n )\n const selectedIndexes = selectedValues.map(({ index }) => index)\n const enabledValues = descendants.enabledValues(\n ({ node, index }) =>\n \"target\" in node.dataset && !selectedIndexes.includes(index),\n )\n\n const validChildren = getValidChildren(children)\n\n const computedChildren = resolvedItems?.map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <AutocompleteOption key={i} value={value} {...props}>\n {label}\n </AutocompleteOption>\n )\n } else if (\"items\" in item) {\n const { label, items = [], ...props } = item\n\n return (\n <AutocompleteOptionGroup\n key={i}\n label={label as string}\n {...(props as HTMLUIProps<\"ul\">)}\n >\n {items.map(({ label, value, ...props }, i) => (\n <AutocompleteOption key={i} value={value} {...props}>\n {label}\n </AutocompleteOption>\n ))}\n </AutocompleteOptionGroup>\n )\n }\n })\n\n const isEmpty = !validChildren.length && !computedChildren?.length\n\n const onOpen = useCallback(() => {\n if (formControlProps.disabled || formControlProps.readOnly) return\n\n if (!allowCreate && (isEmpty || isAllSelected)) return\n\n onInternalOpen()\n\n if (inputRef.current) inputRef.current.focus()\n }, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen])\n\n const onFocusFirst = useCallback(() => {\n const id = setTimeout(() => {\n if (isEmpty || isAllSelected) return\n\n const first = descendants.enabledFirstValue(\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!first) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(first.index)\n } else {\n if (selectedIndexes.includes(first.index)) {\n const enabledFirst = enabledValues[0]\n\n setFocusedIndex(enabledFirst.index)\n } else {\n setFocusedIndex(first.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n }, [\n descendants,\n enabledValues,\n isAllSelected,\n isEmpty,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ])\n\n const onFocusLast = useCallback(() => {\n const id = setTimeout(() => {\n if (isEmpty || isAllSelected) return\n\n const last = descendants.enabledLastValue(\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!last) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(last.index)\n } else {\n if (selectedIndexes.includes(last.index)) {\n const enabledLast = enabledValues.reverse()[0]\n\n setFocusedIndex(enabledLast.index)\n } else {\n setFocusedIndex(last.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n }, [\n descendants,\n enabledValues,\n isAllSelected,\n isEmpty,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ])\n\n const onFocusSelected = useCallback(() => {\n const id = setTimeout(() => {\n const values = descendants.enabledValues()\n\n const selected = values.find(({ node }) =>\n !isMulti\n ? node.dataset.value === value\n : value.includes(node.dataset.value ?? \"\"),\n )\n\n if (selected) setFocusedIndex(selected.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, isMulti, value])\n\n const onFocusNext = useCallback(\n (index: number = focusedIndex) => {\n const id = setTimeout(() => {\n const next = descendants.enabledNextValue(\n index,\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!next) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(next.index)\n } else {\n if (selectedIndexes.includes(next.index)) {\n const enabledNext =\n enabledValues.find(({ index }) => next.index < index) ??\n enabledValues[0]\n\n setFocusedIndex(enabledNext.index)\n } else {\n setFocusedIndex(next.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n },\n [\n descendants,\n enabledValues,\n focusedIndex,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ],\n )\n\n const onFocusPrev = useCallback(\n (index: number = focusedIndex) => {\n const id = setTimeout(() => {\n const prev = descendants.enabledPrevValue(\n index,\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!prev) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(prev.index)\n } else {\n if (selectedIndexes.includes(prev.index)) {\n const enabledPrev =\n enabledValues.reverse().find(({ index }) => index < prev.index) ??\n enabledValues[0]\n\n setFocusedIndex(enabledPrev.index)\n } else {\n setFocusedIndex(prev.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n },\n [\n descendants,\n enabledValues,\n focusedIndex,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ],\n )\n\n const onFocusFirstOrSelected =\n isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected\n const onFocusLastOrSelected =\n isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected\n\n const pickOptions = useCallback(\n (value: string) => {\n const values = descendants.values()\n\n let isHit = false\n let isFocused = false\n\n values.forEach(({ node, index }) => {\n if (format(node.textContent ?? \"\").includes(value)) {\n isHit = true\n\n const isDisabled = \"disabled\" in node.dataset\n\n node.dataset.target = \"\"\n\n if (!isFocused && !isDisabled) {\n isFocused = true\n\n setFocusedIndex(index)\n }\n } else {\n delete node.dataset.target\n }\n })\n\n setIsHit(isHit)\n },\n [descendants, format],\n )\n\n const rebirthOptions = useCallback(\n (runFocus = true) => {\n const values = descendants.values()\n\n values.forEach(({ node }) => {\n node.dataset.target = \"\"\n })\n\n if (runFocus) onFocusFirst()\n\n setIsHit(true)\n },\n [descendants, onFocusFirst],\n )\n\n const getSelectedValues = useCallback(\n (newValues: string | string[]) => {\n const enabledValues = descendants.enabledValues()\n\n const resolvedValues = isArray(newValues) ? newValues : [newValues]\n\n const selectedValues = resolvedValues\n .map((value) => {\n const { node } =\n enabledValues.find(({ node }) => node.dataset.value === value) ?? {}\n\n if (node) {\n const el = Array.from(node.children).find(\n (child) => child.getAttribute(\"data-label\") !== null,\n )\n\n return el?.textContent ?? undefined\n } else {\n return allowFree ? value : undefined\n }\n })\n .filter(Boolean) as string[]\n\n return selectedValues\n },\n [allowFree, descendants],\n )\n\n const onChangeLabel = useCallback(\n (newValue: string, runOmit: boolean = true) => {\n const selectedValues = getSelectedValues(newValue)\n\n setLabel((prev) => {\n if (!isMulti) {\n return selectedValues[0] as T\n } else {\n selectedValues.forEach((selectedValue) => {\n const isSelected =\n isArray(prev) && prev.includes(selectedValue ?? \"\")\n\n if (!isSelected) {\n prev = [...(isArray(prev) ? prev : []), selectedValue] as T\n } else if (runOmit) {\n prev = (\n isArray(prev)\n ? prev.filter((value) => value !== selectedValue)\n : undefined\n ) as T\n }\n })\n\n return prev\n }\n })\n },\n [getSelectedValues, isMulti],\n )\n\n const onChange = useCallback(\n (newValue: string, runRebirth: boolean = true) => {\n setValue((prev) => {\n let next: T\n\n if (!isArray(prev)) {\n next = newValue as T\n } else {\n const isSelected = prev.includes(newValue)\n\n if (!isSelected) {\n next = [...prev, newValue] as T\n } else {\n next = prev.filter((value) => value !== newValue) as T\n }\n }\n\n prevValue.current = next\n return next\n })\n\n const isHit =\n descendants\n .values()\n .filter(({ node }) =>\n format(node.textContent ?? \"\").includes(newValue),\n ).length > 0\n\n onChangeLabel(newValue)\n\n if (allowFree || isHit) setInputValue(\"\")\n\n if (isMulti && runRebirth) rebirthOptions(false)\n },\n [\n allowFree,\n isMulti,\n onChangeLabel,\n rebirthOptions,\n setValue,\n descendants,\n format,\n ],\n )\n\n const onSelect = useCallback(() => {\n let enabledValue = descendants.value(focusedIndex)\n\n if (\"disabled\" in (enabledValue?.node.dataset ?? {}))\n enabledValue = undefined\n\n if (!enabledValue) return\n\n const value = enabledValue.node.dataset.value ?? \"\"\n\n onChange(value)\n\n if (closeOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext()\n }, [\n closeOnSelect,\n descendants,\n focusedIndex,\n omitSelectedValues,\n onChange,\n onClose,\n onFocusNext,\n ])\n\n const onSearch = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!isOpen) onOpen()\n\n onSearchProp?.(ev)\n\n const value = ev.target.value\n const computedValue = format(value)\n\n if (computedValue) {\n pickOptions(computedValue)\n } else {\n rebirthOptions()\n }\n\n setInputValue(value)\n },\n [isOpen, onOpen, format, onSearchProp, pickOptions, rebirthOptions],\n )\n\n const onCompositionStart = useCallback(() => {\n isComposition.current = true\n }, [])\n\n const onCompositionEnd = useCallback(() => {\n isComposition.current = false\n }, [])\n\n const onCreate = useCallback(() => {\n if (!listRef.current) return\n\n const newItem: AutocompleteItem = { label: inputValue, value: inputValue }\n\n let newItems: AutocompleteItem[] = []\n\n if (resolvedItems) newItems = resolvedItems\n\n if (firstInsertPositionItem === \"first\") {\n newItems = [newItem, ...newItems]\n } else if (firstInsertPositionItem === \"last\") {\n newItems = [...newItems, newItem]\n } else {\n const i = newItems.findIndex(\n ({ label }) => label === firstInsertPositionItem,\n )\n\n const targetItem = newItems[i]\n\n if (i !== -1 && \"items\" in targetItem) {\n if (secondInsertPositionItem === \"first\") {\n targetItem.items = [newItem, ...(targetItem.items ?? [])]\n } else {\n targetItem.items = [...(targetItem.items ?? []), newItem]\n }\n\n newItems[i] = targetItem\n } else {\n console.warn(\n `${\n !isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"\n }: '${firstInsertPositionItem}' specified in insertPositionItem does not exist in the option group.`,\n )\n }\n }\n\n setResolvedItems(newItems)\n onChange(inputValue)\n rebirthOptions(false)\n\n const index = flattenItems(newItems).findIndex(\n ({ value }) => value === inputValue,\n )\n\n setFocusedIndex(index)\n\n onCreateProp?.(newItem, newItems)\n }, [\n inputValue,\n resolvedItems,\n firstInsertPositionItem,\n onChange,\n rebirthOptions,\n onCreateProp,\n secondInsertPositionItem,\n isMulti,\n ])\n\n const onClick = useCallback(() => {\n if (isOpen) {\n if (inputRef.current) inputRef.current.focus()\n } else {\n onOpen()\n\n onFocusFirstOrSelected()\n }\n }, [isOpen, onFocusFirstOrSelected, onOpen])\n\n const onFocus = useCallback(() => {\n if (isOpen) return\n\n onOpen()\n\n onFocusFirstOrSelected()\n }, [isOpen, onFocusFirstOrSelected, onOpen])\n\n const onBlur = useCallback(\n (ev: FocusEvent<HTMLDivElement>) => {\n const relatedTarget = getEventRelatedTarget(ev)\n\n if (isContains(containerRef.current, relatedTarget)) return\n\n if (!closeOnBlur && isHit) return\n\n if (allowFree && !!inputValue) onChange(inputValue, false)\n\n setInputValue(\"\")\n\n if (isOpen) onClose()\n },\n [closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange],\n )\n\n const onDelete = useCallback(() => {\n if (!isMulti) {\n onChange(\"\")\n } else {\n onChange(value[value.length - 1])\n }\n\n if (!isOpen) onFocus()\n }, [isMulti, isOpen, onChange, onFocus, value])\n\n const onClear = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n ev.stopPropagation()\n\n prevValue.current = [] as unknown as T\n setValue([] as unknown as T)\n setLabel(undefined)\n setInputValue(\"\")\n rebirthOptions()\n\n if (isOpen && inputRef.current) inputRef.current.focus()\n },\n [isOpen, setLabel, setInputValue, setValue, rebirthOptions],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (ev.key === \" \") ev.key = ev.code\n\n if (formControlProps.disabled || formControlProps.readOnly) return\n if (isComposition.current) return\n\n const enabledDelete = label === inputValue || !inputValue.length\n\n const actions: Record<string, Function | undefined> = {\n ArrowDown: isFocused\n ? () => onFocusNext()\n : !isOpen\n ? funcAll(onOpen, onFocusFirstOrSelected)\n : undefined,\n ArrowUp: isFocused\n ? () => onFocusPrev()\n : !isOpen\n ? funcAll(onOpen, onFocusLastOrSelected)\n : undefined,\n Space: isCreate\n ? onCreate\n : isFocused\n ? onSelect\n : !isOpen\n ? funcAll(onOpen, onFocusFirstOrSelected)\n : undefined,\n Enter: isCreate\n ? onCreate\n : isFocused\n ? onSelect\n : !isOpen\n ? funcAll(onOpen, onFocusFirstOrSelected)\n : allowFree && isMulti\n ? () => {\n if (inputValue) onChange(inputValue)\n\n setFocusedIndex(0)\n }\n : undefined,\n Home: isOpen ? onFocusFirst : undefined,\n End: isOpen ? onFocusLast : undefined,\n Escape: closeOnEsc ? onClose : undefined,\n Backspace: !isEmptyValue && enabledDelete ? onDelete : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n\n action(ev)\n },\n [\n allowFree,\n formControlProps,\n label,\n inputValue,\n onOpen,\n isFocused,\n isMulti,\n onFocusFirstOrSelected,\n onFocusNext,\n onFocusLastOrSelected,\n onFocusPrev,\n isCreate,\n onCreate,\n onSelect,\n isOpen,\n onFocusFirst,\n onFocusLast,\n closeOnEsc,\n onClose,\n isEmptyValue,\n onDelete,\n onChange,\n ],\n )\n\n useEffect(() => {\n if (!isMulti) return\n\n if (!omitSelectedValues && isUndefined(maxSelectValues)) return\n\n const isAll = value.length > 0 && value.length === descendants.count()\n const isMax = value.length === maxSelectValues\n\n if (isAll || isMax) {\n onClose()\n setIsAllSelected(true)\n } else {\n setIsAllSelected(false)\n }\n }, [\n omitSelectedValues,\n value,\n descendants,\n isMulti,\n onClose,\n maxSelectValues,\n ])\n\n useEffect(() => {\n if (isMulti) {\n if (\n JSON.stringify(prevValue.current ?? []) === JSON.stringify(value ?? [])\n )\n return\n\n const label = getSelectedValues(value)\n\n setLabel(label as T)\n } else {\n if (prevValue.current === value) return\n\n onChangeLabel(value, false)\n }\n }, [isMulti, value, onChangeLabel, getSelectedValues])\n\n useUpdateEffect(() => {\n if (isOpen || allowFree) return\n\n setFocusedIndex(-1)\n setInputValue(\"\")\n }, [isOpen])\n\n useUpdateEffect(() => {\n if (!isHit) setFocusedIndex(-2)\n }, [isHit])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n useOutsideClick({\n ref: containerRef,\n handler: onClose,\n enabled: isOpen && (closeOnBlur || !isHit),\n })\n\n const getPopoverProps = useCallback(\n (props?: PopoverProps): PopoverProps => ({\n matchWidth: true,\n ...rest,\n ...props,\n isOpen,\n onOpen,\n onClose,\n placement,\n duration,\n trigger: \"never\",\n closeOnButton: false,\n closeOnBlur,\n }),\n [duration, closeOnBlur, isOpen, onClose, onOpen, placement, rest],\n )\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ref: mergeRefs(containerRef, ref),\n ...containerProps,\n ...props,\n ...formControlProps,\n onClick: handlerAll(props.onClick, rest.onClick, onClick),\n onBlur: handlerAll(props.onBlur, rest.onBlur, onBlur),\n }),\n\n [containerProps, formControlProps, onBlur, onClick, rest],\n )\n\n const getFieldProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ref,\n tabIndex: -1,\n ...props,\n ...formControlProps,\n placeholder,\n \"data-active\": dataAttr(isOpen),\n \"aria-expanded\": dataAttr(isOpen),\n onFocus: handlerAll(props.onFocus, rest.onFocus, onFocus),\n onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onKeyDown),\n }),\n [formControlProps, placeholder, isOpen, rest, onFocus, onKeyDown],\n )\n\n return {\n id,\n descendants,\n value,\n label,\n inputValue,\n isHit,\n isEmpty,\n computedChildren,\n focusedIndex,\n omitSelectedValues,\n closeOnSelect,\n allowCreate,\n allowFree,\n emptyMessage,\n isOpen,\n isAllSelected,\n listRef,\n inputRef,\n optionProps,\n formControlProps,\n setFocusedIndex,\n onChangeLabel,\n onChange,\n onSearch,\n onCreate,\n onClear,\n onCompositionStart,\n onCompositionEnd,\n pickOptions,\n rebirthOptions,\n onOpen,\n onClose,\n onFocusFirst,\n onFocusLast,\n onFocusSelected,\n onFocusNext,\n onFocusPrev,\n getPopoverProps,\n getContainerProps,\n getFieldProps,\n inputProps,\n }\n}\n\nexport type UseAutocompleteReturn = ReturnType<typeof useAutocomplete>\n\nexport const useAutocompleteInput = () => {\n const {\n id,\n inputRef,\n onSearch,\n onCompositionStart,\n onCompositionEnd,\n isAllSelected,\n formControlProps,\n inputProps,\n isOpen,\n } = useAutocompleteContext()\n\n useUpdateEffect(() => {\n if (isAllSelected && inputRef.current) inputRef.current.blur()\n }, [isAllSelected])\n\n const getInputProps: UIPropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ref: mergeRefs(inputRef, ref),\n ...formControlProps,\n role: \"combobox\",\n \"aria-haspopup\": \"listbox\",\n \"aria-autocomplete\": \"list\",\n \"aria-expanded\": isOpen,\n autoCapitalize: \"none\",\n autoComplete: \"off\",\n spellCheck: \"false\",\n ...inputProps,\n ...props,\n id,\n cursor: formControlProps.readOnly ? \"default\" : \"text\",\n pointerEvents:\n formControlProps.disabled || isAllSelected ? \"none\" : \"auto\",\n tabIndex: isAllSelected ? -1 : 0,\n onChange: handlerAll(props.onChange, onSearch),\n onCompositionStart: handlerAll(\n props.onCompositionStart,\n inputProps.onCompositionStart,\n onCompositionStart,\n ),\n onCompositionEnd: handlerAll(\n props.onCompositionEnd,\n inputProps.onCompositionEnd,\n onCompositionEnd,\n ),\n }),\n [\n isOpen,\n inputProps,\n inputRef,\n formControlProps,\n id,\n isAllSelected,\n onSearch,\n onCompositionStart,\n onCompositionEnd,\n ],\n )\n\n return {\n getInputProps,\n }\n}\n\nexport type UseAutocompleteInputReturn = ReturnType<typeof useAutocompleteInput>\n\nexport const useAutocompleteList = () => {\n const { focusedIndex, isOpen, listRef, rebirthOptions } =\n useAutocompleteContext()\n\n const descendants = useAutocompleteDescendantsContext()\n\n const beforeFocusedIndex = useRef<number>(-1)\n const selectedValue = descendants.value(focusedIndex)\n\n const onAnimationComplete = useCallback(() => {\n if (!isOpen) rebirthOptions(false)\n }, [isOpen, rebirthOptions])\n\n useEffect(() => {\n if (!listRef.current || !selectedValue) return\n\n if (beforeFocusedIndex.current === selectedValue.index) return\n\n const parent = listRef.current\n const child = selectedValue.node\n\n const parentHeight = parent.clientHeight\n const viewTop = parent.scrollTop\n const viewBottom = viewTop + parentHeight\n\n const childHeight = child.clientHeight\n const childTop = child.offsetTop\n const childBottom = childTop + childHeight\n\n const isInView = viewTop <= childTop && childBottom <= viewBottom\n\n const isScrollBottom = beforeFocusedIndex.current < selectedValue.index\n\n if (!isInView) {\n if (childBottom <= parentHeight) {\n listRef.current.scrollTo({ top: 0 })\n } else {\n if (!isScrollBottom) {\n listRef.current.scrollTo({ top: childTop + 1 })\n } else {\n listRef.current.scrollTo({ top: childBottom - parentHeight })\n }\n }\n }\n\n beforeFocusedIndex.current = selectedValue.index\n }, [listRef, selectedValue])\n\n useUpdateEffect(() => {\n if (!isOpen) beforeFocusedIndex.current = -1\n }, [isOpen])\n\n const getListProps: MotionUIPropGetter<\"ul\"> = useCallback(\n (props = {}, ref = null) => ({\n as: \"ul\",\n ref: mergeRefs(listRef, ref),\n role: \"select\",\n tabIndex: -1,\n ...props,\n onAnimationComplete: handlerAll(\n props.onAnimationComplete,\n onAnimationComplete,\n ),\n }),\n [listRef, onAnimationComplete],\n )\n\n return {\n getListProps,\n }\n}\n\nexport type UseAutocompleteOptionGroupProps = HTMLUIProps<\"ul\"> & {\n /**\n * The label of the autocomplete option group.\n */\n label: string\n}\n\nexport const useAutocompleteOptionGroup = ({\n label,\n ...rest\n}: UseAutocompleteOptionGroupProps) => {\n const { value, omitSelectedValues } = useAutocompleteContext()\n\n const isMulti = isArray(value)\n\n const descendants = useAutocompleteDescendantsContext()\n\n const values = descendants.values()\n const selectedValues =\n isMulti && omitSelectedValues\n ? descendants.values(({ node }) =>\n value.includes(node.dataset.value ?? \"\"),\n )\n : []\n const selectedIndexes = selectedValues.map(({ index }) => index)\n const childValues = values.filter(\n ({ node, index }) =>\n node.parentElement?.dataset.label === label &&\n !selectedIndexes.includes(index) &&\n \"target\" in node.dataset,\n )\n\n const isEmpty = !childValues.length\n\n const computedRest = splitObject(rest, layoutStyleProperties)\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n ...computedRest[0],\n style: isEmpty ? style : undefined,\n \"data-label\": label,\n role: \"autocomplete-group-container\",\n }\n },\n [computedRest, isEmpty, label],\n )\n\n const getGroupProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ref,\n ...props,\n ...computedRest[1],\n \"data-label\": label,\n role: \"autocomplete-group\",\n }),\n [computedRest, label],\n )\n\n return {\n label,\n getContainerProps,\n getGroupProps,\n }\n}\n\nexport type UseAutocompleteOptionGroupReturn = ReturnType<\n typeof useAutocompleteOptionGroup\n>\n\nexport type UseAutocompleteOptionProps = Omit<\n HTMLUIProps<\"li\">,\n \"value\" | \"children\"\n> & {\n /**\n * The value of the select option.\n */\n value?: string\n /**\n * The label of the select option.\n */\n children?: string\n /**\n * If `true`, the select option will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the select option will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n const {\n value,\n omitSelectedValues,\n onChange,\n onChangeLabel,\n focusedIndex,\n setFocusedIndex,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n optionProps,\n inputRef,\n onFocusNext,\n } = useAutocompleteContext()\n\n let {\n icon: customIcon,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n children,\n value: optionValue,\n ...computedProps\n } = { ...optionProps, ...props }\n\n const trulyDisabled = !!isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n\n const { index, register, descendants } = useAutocompleteDescendant({\n disabled: trulyDisabled,\n })\n\n const values = descendants.values()\n const frontValues = values.slice(0, index)\n\n const isMulti = isArray(value)\n const isDuplicated = !isMulti\n ? frontValues.some(({ node }) => node.dataset.value === (optionValue ?? \"\"))\n : false\n\n const isSelected =\n !isDuplicated &&\n (!isMulti\n ? (optionValue ?? \"\") === value\n : value.includes(optionValue ?? \"\"))\n const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n ev.stopPropagation()\n\n if (isDisabled) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n if (!isTargetOption(ev.currentTarget)) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n setFocusedIndex(index)\n\n onChange(optionValue ?? \"\")\n\n if (inputRef.current) inputRef.current.focus()\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext(index)\n },\n [\n onFocusNext,\n omitSelectedValues,\n isDisabled,\n optionValue,\n setFocusedIndex,\n index,\n onChange,\n customCloseOnSelect,\n generalCloseOnSelect,\n onClose,\n inputRef,\n ],\n )\n\n useUpdateEffect(() => {\n if (isSelected) onChangeLabel(optionValue ?? \"\", false)\n }, [optionValue])\n\n const getOptionProps: UIPropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref: mergeRefs(itemRef, ref, register),\n ...computedProps,\n ...props,\n role: \"autocomplete-item\",\n tabIndex: -1,\n style:\n !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n \"data-target\": dataAttr(true),\n \"data-value\": optionValue ?? \"\",\n \"data-focus\": dataAttr(isFocused),\n \"data-disabled\": dataAttr(isDisabled),\n \"aria-checked\": ariaAttr(isSelected),\n \"aria-disabled\": ariaAttr(isDisabled),\n onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n }\n },\n [\n optionValue,\n computedProps,\n isDisabled,\n isFocused,\n isSelected,\n isTarget,\n omitSelectedValues,\n onClick,\n register,\n ],\n )\n\n return {\n isSelected,\n isFocused,\n customIcon,\n children,\n getOptionProps,\n }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n const { isHit, onCreate } = useAutocompleteContext()\n\n const getCreateProps: UIPropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit ? style : undefined,\n \"data-focus\": dataAttr(!isHit),\n onClick: handlerAll(props.onClick, onCreate),\n }\n },\n [isHit, onCreate],\n )\n\n return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n const { isHit, isEmpty } = useAutocompleteContext()\n\n const getEmptyProps: UIPropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit && !isEmpty ? style : undefined,\n }\n },\n [isHit, isEmpty],\n )\n\n return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","import_react","import_jsx_runtime","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../src/autocomplete-create.tsx","../src/autocomplete-icon.tsx","../src/use-autocomplete.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx, runIfFunc } from \"@yamada-ui/utils\"\nimport type { FC, ReactElement } from \"react\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport {\n useAutocompleteContext,\n useAutocompleteCreate,\n} from \"./use-autocomplete\"\n\ntype AutocompleteCreateOptions = {\n /**\n * The autocomplete create option icon to use.\n */\n icon?: ReactElement\n /**\n * The label of the autocomplete create option.\n */\n children?: string | ((inputValue: string) => string)\n}\n\nexport type AutocompleteCreateProps = Omit<HTMLUIProps<\"li\">, \"children\"> &\n AutocompleteCreateOptions\n\nexport const AutocompleteCreate = forwardRef<AutocompleteCreateProps, \"li\">(\n ({ className, icon, children, ...rest }, ref) => {\n const { inputValue, styles } = useAutocompleteContext()\n const { getCreateProps } = useAutocompleteCreate()\n\n children ??= inputValue\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <ui.li\n className={cx(\"ui-autocomplete__item--create\", className)}\n __css={css}\n {...getCreateProps(rest, ref)}\n >\n {icon !== null ? (\n <AutocompleteItemIcon>{icon || <PlusIcon />}</AutocompleteItemIcon>\n ) : null}\n {icon ? (\n <ui.span style={{ pointerEvents: \"none\", flex: 1 }} lineClamp={1}>\n {runIfFunc(children, inputValue)}\n </ui.span>\n ) : (\n runIfFunc(children, inputValue)\n )}\n </ui.li>\n )\n },\n)\n\nconst PlusIcon: FC = () => (\n <svg viewBox=\"0 0 45.402 45.402\" width=\"1em\" height=\"1em\">\n <path\n fill=\"currentColor\"\n d=\"M41.267,18.557H26.832V4.134C26.832,1.851,24.99,0,22.707,0c-2.283,0-4.124,1.851-4.124,4.135v14.432H4.141 c-2.283,0-4.139,1.851-4.138,4.135c-0.001,1.141,0.46,2.187,1.207,2.934c0.748,0.749,1.78,1.222,2.92,1.222h14.453V41.27 c0,1.142,0.453,2.176,1.201,2.922c0.748,0.748,1.777,1.211,2.919,1.211c2.282,0,4.129-1.851,4.129-4.133V26.857h14.435 c2.283,0,4.134-1.867,4.133-4.15C45.399,20.425,43.548,18.557,41.267,18.557z\"\n />\n </svg>\n)\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon, CloseIcon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport type { FC, HTMLAttributes } from \"react\"\nimport { cloneElement, useRef } from \"react\"\nimport { useAutocompleteContext } from \"./use-autocomplete\"\n\nexport type AutocompleteIconProps = HTMLUIProps<\"div\">\n\nexport const AutocompleteIcon = forwardRef<AutocompleteIconProps, \"div\">(\n ({ className, children, __css, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n cursor: \"pointer\",\n ...styles.icon,\n ...__css,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n maxWidth: \"1em\",\n maxHeight: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-autocomplete__icon\", className)}\n __css={css}\n {...rest}\n >\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n },\n)\n\nexport type AutocompleteClearIconProps = AutocompleteIconProps & {\n disabled?: boolean\n}\n\nexport const AutocompleteClearIcon: FC<AutocompleteClearIconProps> = ({\n className,\n children,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n const { styles } = useAutocompleteContext()\n\n const isDisabled = props.disabled\n\n const rest = useClickable({\n ref,\n isDisabled,\n ...(props as HTMLAttributes<HTMLElement>),\n })\n\n return (\n <AutocompleteIcon\n aria-label=\"Clear value\"\n className={cx(\"ui-autocomplete__icon--clear\", className)}\n __css={styles.clearIcon}\n {...rest}\n >\n {children ?? <CloseIcon w=\"0.5em\" h=\"0.5em\" />}\n </AutocompleteIcon>\n )\n}\n\nexport type AutocompleteItemIconProps = HTMLUIProps<\"span\">\n\nexport const AutocompleteItemIcon = forwardRef<\n AutocompleteItemIconProps,\n \"span\"\n>(({ className, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.itemIcon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-autocomplete__item-icon\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n","import type { CSSUIObject, HTMLUIProps, UIPropGetter } from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { MotionUIPropGetter } from \"@yamada-ui/motion\"\nimport { popoverProperties, type PopoverProps } from \"@yamada-ui/popover\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport { useOutsideClick } from \"@yamada-ui/use-outside-click\"\nimport type { Dict, Union, DOMAttributes } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n dataAttr,\n funcAll,\n getEventRelatedTarget,\n handlerAll,\n isArray,\n isContains,\n isHTMLElement,\n mergeRefs,\n omitObject,\n pickObject,\n splitObject,\n useUnmountEffect,\n useUpdateEffect,\n getValidChildren,\n isUndefined,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n CSSProperties,\n Dispatch,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport type { AutocompleteOptionProps } from \"./\"\nimport { AutocompleteOption, AutocompleteOptionGroup } from \"./\"\n\ntype AutocompleteBaseItem = Omit<\n AutocompleteOptionProps,\n \"value\" | \"children\"\n> & {\n label?: string\n}\n\ntype AutocompleteItemWithValue = AutocompleteBaseItem & {\n value?: string\n}\n\ntype AutocompleteItemWithItems = AutocompleteBaseItem & {\n items?: AutocompleteItemWithValue[]\n}\n\nexport type AutocompleteItem =\n | AutocompleteItemWithValue\n | AutocompleteItemWithItems\n\nconst kanaMap: Record<string, string> = {\n ｶﾞ: \"ガ\",\n ｷﾞ: \"ギ\",\n ｸﾞ: \"グ\",\n ｹﾞ: \"ゲ\",\n ｺﾞ: \"ゴ\",\n ｻﾞ: \"ザ\",\n ｼﾞ: \"ジ\",\n ｽﾞ: \"ズ\",\n ｾﾞ: \"ゼ\",\n ｿﾞ: \"ゾ\",\n ﾀﾞ: \"ダ\",\n ﾁﾞ: \"ヂ\",\n ﾂﾞ: \"ヅ\",\n ﾃﾞ: \"デ\",\n ﾄﾞ: \"ド\",\n ﾊﾞ: \"バ\",\n ﾋﾞ: \"ビ\",\n ﾌﾞ: \"ブ\",\n ﾍﾞ: \"ベ\",\n ﾎﾞ: \"ボ\",\n ﾊﾟ: \"パ\",\n ﾋﾟ: \"ピ\",\n ﾌﾟ: \"プ\",\n ﾍﾟ: \"ペ\",\n ﾎﾟ: \"ポ\",\n ｳﾞ: \"ヴ\",\n ﾜﾞ: \"ヷ\",\n ｦﾞ: \"ヺ\",\n ｱ: \"ア\",\n ｲ: \"イ\",\n ｳ: \"ウ\",\n ｴ: \"エ\",\n ｵ: \"オ\",\n ｶ: \"カ\",\n ｷ: \"キ\",\n ｸ: \"ク\",\n ｹ: \"ケ\",\n ｺ: \"コ\",\n ｻ: \"サ\",\n ｼ: \"シ\",\n ｽ: \"ス\",\n ｾ: \"セ\",\n ｿ: \"ソ\",\n ﾀ: \"タ\",\n ﾁ: \"チ\",\n ﾂ: \"ツ\",\n ﾃ: \"テ\",\n ﾄ: \"ト\",\n ﾅ: \"ナ\",\n ﾆ: \"ニ\",\n ﾇ: \"ヌ\",\n ﾈ: \"ネ\",\n ﾉ: \"ノ\",\n ﾊ: \"ハ\",\n ﾋ: \"ヒ\",\n ﾌ: \"フ\",\n ﾍ: \"ヘ\",\n ﾎ: \"ホ\",\n ﾏ: \"マ\",\n ﾐ: \"ミ\",\n ﾑ: \"ム\",\n ﾒ: \"メ\",\n ﾓ: \"モ\",\n ﾔ: \"ヤ\",\n ﾕ: \"ユ\",\n ﾖ: \"ヨ\",\n ﾗ: \"ラ\",\n ﾘ: \"リ\",\n ﾙ: \"ル\",\n ﾚ: \"レ\",\n ﾛ: \"ロ\",\n ﾜ: \"ワ\",\n ｦ: \"ヲ\",\n ﾝ: \"ン\",\n ｧ: \"ァ\",\n ｨ: \"ィ\",\n ｩ: \"ゥ\",\n ｪ: \"ェ\",\n ｫ: \"ォ\",\n ｯ: \"ッ\",\n ｬ: \"ャ\",\n ｭ: \"ュ\",\n ｮ: \"ョ\",\n \"｡\": \"。\",\n \"､\": \"、\",\n ｰ: \"ー\",\n \"｢\": \"「\",\n \"｣\": \"」\",\n \"･\": \"・\",\n}\n\nconst defaultFormat = (value: string) => {\n value = value.replace(/[！-～]/g, (v) =>\n String.fromCharCode(v.charCodeAt(0) - 0xfee0),\n )\n\n const reg = new RegExp(\"(\" + Object.keys(kanaMap).join(\"|\") + \")\", \"g\")\n\n value = value\n .replace(reg, (v) => kanaMap[v])\n .replace(/ﾞ/g, \"゛\")\n .replace(/ﾟ/g, \"゜\")\n\n value = value.toUpperCase()\n\n return value\n}\n\nconst flattenItems = (\n items: AutocompleteItem[],\n): AutocompleteItemWithValue[] => {\n const filterItems = (\n items: AutocompleteItem[] | AutocompleteItemWithValue[],\n ): (AutocompleteItemWithValue | AutocompleteItemWithValue[])[] =>\n items\n .map((item) => {\n const { isDisabled, isFocusable } = item\n const trulyDisabled = !!isDisabled && !isFocusable\n\n if (trulyDisabled) return\n\n if (\"items\" in item) {\n return filterItems(item.items ?? [])\n } else {\n return item as AutocompleteItemWithValue\n }\n })\n .filter(Boolean) as (\n | AutocompleteItemWithValue\n | AutocompleteItemWithValue[]\n )[]\n\n return filterItems(items).flat(Infinity) as AutocompleteItemWithValue[]\n}\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"autocomplete-item\")\n\nexport const {\n DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n useDescendantsContext: useAutocompleteDescendantsContext,\n useDescendants: useAutocompleteDescendants,\n useDescendant: useAutocompleteDescendant,\n} = createDescendant<HTMLElement>()\n\ntype AutocompleteContext = Omit<\n UseAutocompleteProps,\n \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n> & {\n value: string | string[]\n label: string | string[] | undefined\n inputValue: string\n isHit: boolean\n isEmpty: boolean\n isAllSelected: boolean\n onChange: (newValue: string) => void\n onChangeLabel: (newValue: string, runOmit?: boolean) => void\n pickOptions: (value: string) => void\n rebirthOptions: (runFocus?: boolean) => void\n inputProps: DOMAttributes\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onCreate: () => void\n onFocusFirst: () => void\n onFocusLast: () => void\n onFocusNext: (index?: number) => void\n onFocusPrev: (index?: number) => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n listRef: RefObject<HTMLUListElement>\n inputRef: RefObject<HTMLInputElement>\n formControlProps: Record<string, any>\n styles: Record<string, CSSUIObject>\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n createContext<AutocompleteContext>({\n name: \"AutocompleteContext\",\n errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n })\n\ntype UseAutocompleteBaseProps<T extends string | string[] = string> = Omit<\n PopoverProps,\n | \"initialFocusRef\"\n | \"closeOnButton\"\n | \"trigger\"\n | \"autoFocus\"\n | \"restoreFocus\"\n | \"openDelay\"\n | \"closeDelay\"\n> &\n FormControlOptions & {\n /**\n * The value of the autocomplete.\n */\n value?: T\n /**\n * The initial value of the autocomplete.\n */\n defaultValue?: T\n /**\n * The callback invoked when value state changes.\n */\n onChange?: (value: T) => void\n /**\n * The callback invoked when search input.\n */\n onSearch?: (ev: ChangeEvent<HTMLInputElement>) => void\n /**\n * The callback invoked when autocomplete option created.\n */\n onCreate?: (newItem: AutocompleteItem, newItems: AutocompleteItem[]) => void\n /**\n * Function to format text when search input.\n */\n format?: (value: string) => string\n /**\n * The position to be inserted when the autocomplete option is created.\n *\n * @default 'first'\n */\n insertPositionItem?: Union<\"first\" | \"last\"> | [string, \"first\" | \"last\"]\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n /**\n * The message displayed when the search yields no hits.\n *\n * @default 'No results found'\n */\n emptyMessage?: string\n /**\n * If `true`, enables the creation of autocomplete option.\n *\n * @default false\n */\n allowCreate?: boolean\n /**\n * If `true`, enables the free input.\n */\n allowFree?: boolean\n /**\n * If `true`, the selected item(s) will be excluded from the list.\n *\n * @default false\n */\n omitSelectedValues?: boolean\n /**\n * The maximum selectable value.\n */\n maxSelectValues?: number\n /**\n * Props for select option element.\n */\n optionProps?: Omit<AutocompleteOptionProps, \"value\" | \"children\">\n /**\n * If provided, generate options based on items.\n */\n items?: AutocompleteItem[]\n }\n\nexport type UseAutocompleteProps<T extends string | string[] = string> = Omit<\n HTMLUIProps<\"input\">,\n | keyof UseAutocompleteBaseProps\n | \"list\"\n | \"disabled\"\n | \"required\"\n | \"readOnly\"\n | \"size\"\n> &\n UseAutocompleteBaseProps<T>\n\nexport const useAutocomplete = <T extends string | string[] = string>({\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n onCreate: onCreateProp,\n onSearch: onSearchProp,\n closeOnSelect = true,\n omitSelectedValues = false,\n maxSelectValues,\n closeOnBlur = true,\n closeOnEsc = true,\n allowCreate = false,\n allowFree = false,\n insertPositionItem = \"first\",\n emptyMessage = \"No results found\",\n format = defaultFormat,\n placement = \"bottom-start\",\n duration = 0.2,\n optionProps,\n placeholder,\n items,\n children,\n isOpen: isOpenProp,\n defaultIsOpen,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n ...rest\n}: UseAutocompleteProps<T>) => {\n rest = useFormControlProps(rest)\n\n const { id } = rest\n\n const { \"aria-readonly\": _ariaReadonly, ...formControlProps } = pickObject(\n rest,\n formControlProperties,\n )\n const [containerProps, inputProps] = splitObject<Dict, string>(\n omitObject(rest, [...popoverProperties, \"onKeyDown\", \"onFocus\"]),\n layoutStyleProperties,\n )\n\n const descendants = useAutocompleteDescendants()\n\n const containerRef = useRef<HTMLDivElement>(null)\n const listRef = useRef<HTMLUListElement>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const isComposition = useRef<boolean>(false)\n const prevValue = useRef<T | undefined>(undefined)\n\n const [resolvedItems, setResolvedItems] = useState<\n AutocompleteItem[] | undefined\n >(items ? JSON.parse(JSON.stringify(items)) : undefined)\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n })\n const [label, setLabel] = useState<T | undefined>(undefined)\n const [inputValue, setInputValue] = useState<string>(\"\")\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isAllSelected, setIsAllSelected] = useState<boolean>(false)\n const [isHit, setIsHit] = useState<boolean>(true)\n const {\n isOpen,\n onOpen: onInternalOpen,\n onClose,\n } = useDisclosure({\n isOpen: isOpenProp,\n defaultIsOpen,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n })\n const isFocused = focusedIndex > -1\n const isCreate = focusedIndex === -2 && allowCreate\n const isMulti = isArray(value)\n const isEmptyValue = !isMulti ? !value : !value.length\n\n const [firstInsertPositionItem, secondInsertPositionItem] = useMemo(() => {\n if (isArray(insertPositionItem)) {\n return insertPositionItem\n } else {\n return [insertPositionItem, \"first\"]\n }\n }, [insertPositionItem])\n\n if (allowCreate && !isUndefined(children)) {\n console.warn(\n `${!isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"}: ${\n !isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"\n } internally prefers 'children'. If 'allowCreate' is true, it will not be reflected correctly. If want to reflect, please set 'items' in props.`,\n )\n }\n\n const selectedValues = descendants.enabledValues(\n ({ node }) => isMulti && value.includes(node.dataset.value ?? \"\"),\n )\n const selectedIndexes = selectedValues.map(({ index }) => index)\n const enabledValues = descendants.enabledValues(\n ({ node, index }) =>\n \"target\" in node.dataset && !selectedIndexes.includes(index),\n )\n\n const validChildren = getValidChildren(children)\n\n const computedChildren = resolvedItems?.map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <AutocompleteOption key={i} value={value} {...props}>\n {label}\n </AutocompleteOption>\n )\n } else if (\"items\" in item) {\n const { label, items = [], ...props } = item\n\n return (\n <AutocompleteOptionGroup\n key={i}\n label={label as string}\n {...(props as HTMLUIProps<\"ul\">)}\n >\n {items.map(({ label, value, ...props }, i) => (\n <AutocompleteOption key={i} value={value} {...props}>\n {label}\n </AutocompleteOption>\n ))}\n </AutocompleteOptionGroup>\n )\n }\n })\n\n const isEmpty = !validChildren.length && !computedChildren?.length\n\n const onOpen = useCallback(() => {\n if (formControlProps.disabled || formControlProps.readOnly) return\n\n if (!allowCreate && (isEmpty || isAllSelected)) return\n\n onInternalOpen()\n\n if (inputRef.current) inputRef.current.focus()\n }, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen])\n\n const onFocusFirst = useCallback(() => {\n const id = setTimeout(() => {\n if (isEmpty || isAllSelected) return\n\n const first = descendants.enabledFirstValue(\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!first) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(first.index)\n } else {\n if (selectedIndexes.includes(first.index)) {\n const enabledFirst = enabledValues[0]\n\n setFocusedIndex(enabledFirst.index)\n } else {\n setFocusedIndex(first.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n }, [\n descendants,\n enabledValues,\n isAllSelected,\n isEmpty,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ])\n\n const onFocusLast = useCallback(() => {\n const id = setTimeout(() => {\n if (isEmpty || isAllSelected) return\n\n const last = descendants.enabledLastValue(\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!last) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(last.index)\n } else {\n if (selectedIndexes.includes(last.index)) {\n const enabledLast = enabledValues.reverse()[0]\n\n setFocusedIndex(enabledLast.index)\n } else {\n setFocusedIndex(last.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n }, [\n descendants,\n enabledValues,\n isAllSelected,\n isEmpty,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ])\n\n const onFocusSelected = useCallback(() => {\n const id = setTimeout(() => {\n const values = descendants.enabledValues()\n\n const selected = values.find(({ node }) =>\n !isMulti\n ? node.dataset.value === value\n : value.includes(node.dataset.value ?? \"\"),\n )\n\n if (selected) setFocusedIndex(selected.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, isMulti, value])\n\n const onFocusNext = useCallback(\n (index: number = focusedIndex) => {\n const id = setTimeout(() => {\n const next = descendants.enabledNextValue(\n index,\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!next) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(next.index)\n } else {\n if (selectedIndexes.includes(next.index)) {\n const enabledNext =\n enabledValues.find(({ index }) => next.index < index) ??\n enabledValues[0]\n\n setFocusedIndex(enabledNext.index)\n } else {\n setFocusedIndex(next.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n },\n [\n descendants,\n enabledValues,\n focusedIndex,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ],\n )\n\n const onFocusPrev = useCallback(\n (index: number = focusedIndex) => {\n const id = setTimeout(() => {\n const prev = descendants.enabledPrevValue(\n index,\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!prev) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(prev.index)\n } else {\n if (selectedIndexes.includes(prev.index)) {\n const enabledPrev =\n enabledValues.reverse().find(({ index }) => index < prev.index) ??\n enabledValues[0]\n\n setFocusedIndex(enabledPrev.index)\n } else {\n setFocusedIndex(prev.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n },\n [\n descendants,\n enabledValues,\n focusedIndex,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ],\n )\n\n const onFocusFirstOrSelected =\n isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected\n const onFocusLastOrSelected =\n isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected\n\n const pickOptions = useCallback(\n (value: string) => {\n const values = descendants.values()\n\n let isHit = false\n let isFocused = false\n\n values.forEach(({ node, index }) => {\n if (format(node.textContent ?? \"\").includes(value)) {\n isHit = true\n\n const isDisabled = \"disabled\" in node.dataset\n\n node.dataset.target = \"\"\n\n if (!isFocused && !isDisabled) {\n isFocused = true\n\n setFocusedIndex(index)\n }\n } else {\n delete node.dataset.target\n }\n })\n\n setIsHit(isHit)\n },\n [descendants, format],\n )\n\n const rebirthOptions = useCallback(\n (runFocus = true) => {\n const values = descendants.values()\n\n values.forEach(({ node }) => {\n node.dataset.target = \"\"\n })\n\n if (runFocus) onFocusFirst()\n\n setIsHit(true)\n },\n [descendants, onFocusFirst],\n )\n\n const getSelectedValues = useCallback(\n (newValues: string | string[]) => {\n const enabledValues = descendants.enabledValues()\n\n const resolvedValues = isArray(newValues) ? newValues : [newValues]\n\n const selectedValues = resolvedValues\n .map((value) => {\n const { node } =\n enabledValues.find(({ node }) => node.dataset.value === value) ?? {}\n\n if (node) {\n const el = Array.from(node.children).find(\n (child) => child.getAttribute(\"data-label\") !== null,\n )\n\n return el?.textContent ?? undefined\n } else {\n return allowFree ? value : undefined\n }\n })\n .filter(Boolean) as string[]\n\n return selectedValues\n },\n [allowFree, descendants],\n )\n\n const onChangeLabel = useCallback(\n (newValue: string, runOmit: boolean = true) => {\n const selectedValues = getSelectedValues(newValue)\n\n setLabel((prev) => {\n if (!isMulti) {\n return selectedValues[0] as T\n } else {\n selectedValues.forEach((selectedValue) => {\n const isSelected =\n isArray(prev) && prev.includes(selectedValue ?? \"\")\n\n if (!isSelected) {\n prev = [...(isArray(prev) ? prev : []), selectedValue] as T\n } else if (runOmit) {\n prev = (\n isArray(prev)\n ? prev.filter((value) => value !== selectedValue)\n : undefined\n ) as T\n }\n })\n\n return prev\n }\n })\n },\n [getSelectedValues, isMulti],\n )\n\n const onChange = useCallback(\n (newValue: string, runRebirth: boolean = true) => {\n setValue((prev) => {\n let next: T\n\n if (!isArray(prev)) {\n next = newValue as T\n } else {\n const isSelected = prev.includes(newValue)\n\n if (!isSelected) {\n next = [...prev, newValue] as T\n } else {\n next = prev.filter((value) => value !== newValue) as T\n }\n }\n\n prevValue.current = next\n return next\n })\n\n const isHit =\n descendants\n .values()\n .filter(({ node }) =>\n format(node.textContent ?? \"\").includes(newValue),\n ).length > 0\n\n onChangeLabel(newValue)\n\n if (allowFree || isHit) setInputValue(\"\")\n\n if (isMulti && runRebirth) rebirthOptions(false)\n },\n [\n allowFree,\n isMulti,\n onChangeLabel,\n rebirthOptions,\n setValue,\n descendants,\n format,\n ],\n )\n\n const onSelect = useCallback(() => {\n let enabledValue = descendants.value(focusedIndex)\n\n if (\"disabled\" in (enabledValue?.node.dataset ?? {}))\n enabledValue = undefined\n\n if (!enabledValue) return\n\n const value = enabledValue.node.dataset.value ?? \"\"\n\n onChange(value)\n\n if (closeOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext()\n }, [\n closeOnSelect,\n descendants,\n focusedIndex,\n omitSelectedValues,\n onChange,\n onClose,\n onFocusNext,\n ])\n\n const onSearch = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!isOpen) onOpen()\n\n onSearchProp?.(ev)\n\n const value = ev.target.value\n const computedValue = format(value)\n\n if (computedValue) {\n pickOptions(computedValue)\n } else {\n rebirthOptions()\n }\n\n setInputValue(value)\n },\n [isOpen, onOpen, format, onSearchProp, pickOptions, rebirthOptions],\n )\n\n const onCompositionStart = useCallback(() => {\n isComposition.current = true\n }, [])\n\n const onCompositionEnd = useCallback(() => {\n isComposition.current = false\n }, [])\n\n const onCreate = useCallback(() => {\n if (!listRef.current) return\n\n const newItem: AutocompleteItem = { label: inputValue, value: inputValue }\n\n let newItems: AutocompleteItem[] = []\n\n if (resolvedItems) newItems = resolvedItems\n\n if (firstInsertPositionItem === \"first\") {\n newItems = [newItem, ...newItems]\n } else if (firstInsertPositionItem === \"last\") {\n newItems = [...newItems, newItem]\n } else {\n const i = newItems.findIndex(\n ({ label }) => label === firstInsertPositionItem,\n )\n\n const targetItem = newItems[i]\n\n if (i !== -1 && \"items\" in targetItem) {\n if (secondInsertPositionItem === \"first\") {\n targetItem.items = [newItem, ...(targetItem.items ?? [])]\n } else {\n targetItem.items = [...(targetItem.items ?? []), newItem]\n }\n\n newItems[i] = targetItem\n } else {\n console.warn(\n `${\n !isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"\n }: '${firstInsertPositionItem}' specified in insertPositionItem does not exist in the option group.`,\n )\n }\n }\n\n setResolvedItems(newItems)\n onChange(inputValue)\n rebirthOptions(false)\n\n const index = flattenItems(newItems).findIndex(\n ({ value }) => value === inputValue,\n )\n\n setFocusedIndex(index)\n\n onCreateProp?.(newItem, newItems)\n }, [\n inputValue,\n resolvedItems,\n firstInsertPositionItem,\n onChange,\n rebirthOptions,\n onCreateProp,\n secondInsertPositionItem,\n isMulti,\n ])\n\n const onClick = useCallback(() => {\n if (isOpen) {\n if (inputRef.current) inputRef.current.focus()\n } else {\n onOpen()\n\n onFocusFirstOrSelected()\n }\n }, [isOpen, onFocusFirstOrSelected, onOpen])\n\n const onFocus = useCallback(() => {\n if (isOpen) return\n\n onOpen()\n\n onFocusFirstOrSelected()\n }, [isOpen, onFocusFirstOrSelected, onOpen])\n\n const onBlur = useCallback(\n (ev: FocusEvent<HTMLDivElement>) => {\n const relatedTarget = getEventRelatedTarget(ev)\n\n if (isContains(containerRef.current, relatedTarget)) return\n\n if (!closeOnBlur && isHit) return\n\n if (allowFree && !!inputValue) onChange(inputValue, false)\n\n setInputValue(\"\")\n\n if (isOpen) onClose()\n },\n [closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange],\n )\n\n const onDelete = useCallback(() => {\n if (!isMulti) {\n onChange(\"\")\n } else {\n onChange(value[value.length - 1])\n }\n\n if (!isOpen) onFocus()\n }, [isMulti, isOpen, onChange, onFocus, value])\n\n const onClear = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n ev.stopPropagation()\n\n prevValue.current = [] as unknown as T\n setValue([] as unknown as T)\n setLabel(undefined)\n setInputValue(\"\")\n rebirthOptions()\n\n if (isOpen && inputRef.current) inputRef.current.focus()\n },\n [isOpen, setLabel, setInputValue, setValue, rebirthOptions],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (ev.key === \" \") ev.key = ev.code\n\n if (formControlProps.disabled || formControlProps.readOnly) return\n if (isComposition.current) return\n\n const enabledDelete = label === inputValue || !inputValue.length\n\n const actions: Record<string, Function | undefined> = {\n ArrowDown: isFocused\n ? () => onFocusNext()\n : !isOpen\n ? funcAll(onOpen, onFocusFirstOrSelected)\n : undefined,\n ArrowUp: isFocused\n ? () => onFocusPrev()\n : !isOpen\n ? funcAll(onOpen, onFocusLastOrSelected)\n : undefined,\n Space: isCreate\n ? onCreate\n : isFocused\n ? onSelect\n : !isOpen\n ? funcAll(onOpen, onFocusFirstOrSelected)\n : undefined,\n Enter: isCreate\n ? onCreate\n : isFocused\n ? onSelect\n : !isOpen\n ? funcAll(onOpen, onFocusFirstOrSelected)\n : allowFree && isMulti\n ? () => {\n if (inputValue) onChange(inputValue)\n\n setFocusedIndex(0)\n }\n : undefined,\n Home: isOpen ? onFocusFirst : undefined,\n End: isOpen ? onFocusLast : undefined,\n Escape: closeOnEsc ? onClose : undefined,\n Backspace: !isEmptyValue && enabledDelete ? onDelete : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n\n action(ev)\n },\n [\n allowFree,\n formControlProps,\n label,\n inputValue,\n onOpen,\n isFocused,\n isMulti,\n onFocusFirstOrSelected,\n onFocusNext,\n onFocusLastOrSelected,\n onFocusPrev,\n isCreate,\n onCreate,\n onSelect,\n isOpen,\n onFocusFirst,\n onFocusLast,\n closeOnEsc,\n onClose,\n isEmptyValue,\n onDelete,\n onChange,\n ],\n )\n\n useEffect(() => {\n if (!isMulti) return\n\n if (!omitSelectedValues && isUndefined(maxSelectValues)) return\n\n const isAll = value.length > 0 && value.length === descendants.count()\n const isMax = value.length === maxSelectValues\n\n if (isAll || isMax) {\n onClose()\n setIsAllSelected(true)\n } else {\n setIsAllSelected(false)\n }\n }, [\n omitSelectedValues,\n value,\n descendants,\n isMulti,\n onClose,\n maxSelectValues,\n ])\n\n useEffect(() => {\n if (isMulti) {\n if (\n JSON.stringify(prevValue.current ?? []) === JSON.stringify(value ?? [])\n )\n return\n\n const label = getSelectedValues(value)\n\n setLabel(label as T)\n } else {\n if (prevValue.current === value) return\n\n onChangeLabel(value, false)\n }\n }, [isMulti, value, onChangeLabel, getSelectedValues])\n\n useUpdateEffect(() => {\n if (isOpen || allowFree) return\n\n setFocusedIndex(-1)\n setInputValue(\"\")\n }, [isOpen])\n\n useUpdateEffect(() => {\n if (!isHit) setFocusedIndex(-2)\n }, [isHit])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n useOutsideClick({\n ref: containerRef,\n handler: onClose,\n enabled: isOpen && (closeOnBlur || !isHit),\n })\n\n const getPopoverProps = useCallback(\n (props?: PopoverProps): PopoverProps => ({\n matchWidth: true,\n ...rest,\n ...props,\n isOpen,\n onOpen,\n onClose,\n placement,\n duration,\n trigger: \"never\",\n closeOnButton: false,\n closeOnBlur,\n }),\n [duration, closeOnBlur, isOpen, onClose, onOpen, placement, rest],\n )\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ref: mergeRefs(containerRef, ref),\n ...containerProps,\n ...props,\n ...formControlProps,\n onClick: handlerAll(props.onClick, rest.onClick, onClick),\n onBlur: handlerAll(props.onBlur, rest.onBlur, onBlur),\n }),\n\n [containerProps, formControlProps, onBlur, onClick, rest],\n )\n\n const getFieldProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ref,\n tabIndex: -1,\n ...props,\n ...formControlProps,\n placeholder,\n \"data-active\": dataAttr(isOpen),\n \"aria-expanded\": dataAttr(isOpen),\n onFocus: handlerAll(props.onFocus, rest.onFocus, onFocus),\n onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onKeyDown),\n }),\n [formControlProps, placeholder, isOpen, rest, onFocus, onKeyDown],\n )\n\n return {\n id,\n descendants,\n value,\n label,\n inputValue,\n isHit,\n isEmpty,\n computedChildren,\n focusedIndex,\n omitSelectedValues,\n closeOnSelect,\n allowCreate,\n allowFree,\n emptyMessage,\n isOpen,\n isAllSelected,\n listRef,\n inputRef,\n optionProps,\n formControlProps,\n setFocusedIndex,\n onChangeLabel,\n onChange,\n onSearch,\n onCreate,\n onClear,\n onCompositionStart,\n onCompositionEnd,\n pickOptions,\n rebirthOptions,\n onOpen,\n onClose,\n onFocusFirst,\n onFocusLast,\n onFocusSelected,\n onFocusNext,\n onFocusPrev,\n getPopoverProps,\n getContainerProps,\n getFieldProps,\n inputProps,\n }\n}\n\nexport type UseAutocompleteReturn = ReturnType<typeof useAutocomplete>\n\nexport const useAutocompleteInput = () => {\n const {\n id,\n inputRef,\n onSearch,\n onCompositionStart,\n onCompositionEnd,\n isAllSelected,\n formControlProps,\n inputProps,\n isOpen,\n } = useAutocompleteContext()\n\n useUpdateEffect(() => {\n if (isAllSelected && inputRef.current) inputRef.current.blur()\n }, [isAllSelected])\n\n const getInputProps: UIPropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ref: mergeRefs(inputRef, ref),\n ...formControlProps,\n role: \"combobox\",\n \"aria-haspopup\": \"listbox\",\n \"aria-autocomplete\": \"list\",\n \"aria-expanded\": isOpen,\n autoCapitalize: \"none\",\n autoComplete: \"off\",\n spellCheck: \"false\",\n ...inputProps,\n ...props,\n id,\n cursor: formControlProps.readOnly ? \"default\" : \"text\",\n pointerEvents:\n formControlProps.disabled || isAllSelected ? \"none\" : \"auto\",\n tabIndex: isAllSelected ? -1 : 0,\n onChange: handlerAll(props.onChange, onSearch),\n onCompositionStart: handlerAll(\n props.onCompositionStart,\n inputProps.onCompositionStart,\n onCompositionStart,\n ),\n onCompositionEnd: handlerAll(\n props.onCompositionEnd,\n inputProps.onCompositionEnd,\n onCompositionEnd,\n ),\n }),\n [\n isOpen,\n inputProps,\n inputRef,\n formControlProps,\n id,\n isAllSelected,\n onSearch,\n onCompositionStart,\n onCompositionEnd,\n ],\n )\n\n return {\n getInputProps,\n }\n}\n\nexport type UseAutocompleteInputReturn = ReturnType<typeof useAutocompleteInput>\n\nexport const useAutocompleteList = () => {\n const { focusedIndex, isOpen, listRef, rebirthOptions } =\n useAutocompleteContext()\n\n const descendants = useAutocompleteDescendantsContext()\n\n const beforeFocusedIndex = useRef<number>(-1)\n const selectedValue = descendants.value(focusedIndex)\n\n const onAnimationComplete = useCallback(() => {\n if (!isOpen) rebirthOptions(false)\n }, [isOpen, rebirthOptions])\n\n useEffect(() => {\n if (!listRef.current || !selectedValue) return\n\n if (beforeFocusedIndex.current === selectedValue.index) return\n\n const parent = listRef.current\n const child = selectedValue.node\n\n const parentHeight = parent.clientHeight\n const viewTop = parent.scrollTop\n const viewBottom = viewTop + parentHeight\n\n const childHeight = child.clientHeight\n const childTop = child.offsetTop\n const childBottom = childTop + childHeight\n\n const isInView = viewTop <= childTop && childBottom <= viewBottom\n\n const isScrollBottom = beforeFocusedIndex.current < selectedValue.index\n\n if (!isInView) {\n if (childBottom <= parentHeight) {\n listRef.current.scrollTo({ top: 0 })\n } else {\n if (!isScrollBottom) {\n listRef.current.scrollTo({ top: childTop + 1 })\n } else {\n listRef.current.scrollTo({ top: childBottom - parentHeight })\n }\n }\n }\n\n beforeFocusedIndex.current = selectedValue.index\n }, [listRef, selectedValue])\n\n useUpdateEffect(() => {\n if (!isOpen) beforeFocusedIndex.current = -1\n }, [isOpen])\n\n const getListProps: MotionUIPropGetter<\"ul\"> = useCallback(\n (props = {}, ref = null) => ({\n as: \"ul\",\n ref: mergeRefs(listRef, ref),\n role: \"select\",\n tabIndex: -1,\n ...props,\n onAnimationComplete: handlerAll(\n props.onAnimationComplete,\n onAnimationComplete,\n ),\n }),\n [listRef, onAnimationComplete],\n )\n\n return {\n getListProps,\n }\n}\n\nexport type UseAutocompleteOptionGroupProps = HTMLUIProps<\"ul\"> & {\n /**\n * The label of the autocomplete option group.\n */\n label: string\n}\n\nexport const useAutocompleteOptionGroup = ({\n label,\n ...rest\n}: UseAutocompleteOptionGroupProps) => {\n const { value, omitSelectedValues } = useAutocompleteContext()\n\n const isMulti = isArray(value)\n\n const descendants = useAutocompleteDescendantsContext()\n\n const values = descendants.values()\n const selectedValues =\n isMulti && omitSelectedValues\n ? descendants.values(({ node }) =>\n value.includes(node.dataset.value ?? \"\"),\n )\n : []\n const selectedIndexes = selectedValues.map(({ index }) => index)\n const childValues = values.filter(\n ({ node, index }) =>\n node.parentElement?.dataset.label === label &&\n !selectedIndexes.includes(index) &&\n \"target\" in node.dataset,\n )\n\n const isEmpty = !childValues.length\n\n const computedRest = splitObject(rest, layoutStyleProperties)\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n ...computedRest[0],\n style: isEmpty ? style : undefined,\n \"data-label\": label,\n role: \"autocomplete-group-container\",\n }\n },\n [computedRest, isEmpty, label],\n )\n\n const getGroupProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ref,\n ...props,\n ...computedRest[1],\n \"data-label\": label,\n role: \"autocomplete-group\",\n }),\n [computedRest, label],\n )\n\n return {\n label,\n getContainerProps,\n getGroupProps,\n }\n}\n\nexport type UseAutocompleteOptionGroupReturn = ReturnType<\n typeof useAutocompleteOptionGroup\n>\n\nexport type UseAutocompleteOptionProps = Omit<\n HTMLUIProps<\"li\">,\n \"value\" | \"children\"\n> & {\n /**\n * The value of the select option.\n */\n value?: string\n /**\n * The label of the select option.\n */\n children?: string\n /**\n * If `true`, the select option will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the select option will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n const {\n value,\n omitSelectedValues,\n onChange,\n onChangeLabel,\n focusedIndex,\n setFocusedIndex,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n optionProps,\n inputRef,\n onFocusNext,\n } = useAutocompleteContext()\n\n let {\n icon: customIcon,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n children,\n value: optionValue,\n ...computedProps\n } = { ...optionProps, ...props }\n\n const trulyDisabled = !!isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n\n const { index, register, descendants } = useAutocompleteDescendant({\n disabled: trulyDisabled,\n })\n\n const values = descendants.values()\n const frontValues = values.slice(0, index)\n\n const isMulti = isArray(value)\n const isDuplicated = !isMulti\n ? frontValues.some(({ node }) => node.dataset.value === (optionValue ?? \"\"))\n : false\n\n const isSelected =\n !isDuplicated &&\n (!isMulti\n ? (optionValue ?? \"\") === value\n : value.includes(optionValue ?? \"\"))\n const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n ev.stopPropagation()\n\n if (isDisabled) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n if (!isTargetOption(ev.currentTarget)) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n setFocusedIndex(index)\n\n onChange(optionValue ?? \"\")\n\n if (inputRef.current) inputRef.current.focus()\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext(index)\n },\n [\n onFocusNext,\n omitSelectedValues,\n isDisabled,\n optionValue,\n setFocusedIndex,\n index,\n onChange,\n customCloseOnSelect,\n generalCloseOnSelect,\n onClose,\n inputRef,\n ],\n )\n\n useUpdateEffect(() => {\n if (isSelected) onChangeLabel(optionValue ?? \"\", false)\n }, [optionValue])\n\n const getOptionProps: UIPropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref: mergeRefs(itemRef, ref, register),\n ...computedProps,\n ...props,\n role: \"autocomplete-item\",\n tabIndex: -1,\n style:\n !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n \"data-target\": dataAttr(true),\n \"data-value\": optionValue ?? \"\",\n \"data-focus\": dataAttr(isFocused),\n \"data-disabled\": dataAttr(isDisabled),\n \"aria-checked\": ariaAttr(isSelected),\n \"aria-disabled\": ariaAttr(isDisabled),\n onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n }\n },\n [\n optionValue,\n computedProps,\n isDisabled,\n isFocused,\n isSelected,\n isTarget,\n omitSelectedValues,\n onClick,\n register,\n ],\n )\n\n return {\n isSelected,\n isFocused,\n customIcon,\n children,\n getOptionProps,\n }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n const { isHit, onCreate } = useAutocompleteContext()\n\n const getCreateProps: UIPropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit ? style : undefined,\n \"data-focus\": dataAttr(!isHit),\n onClick: handlerAll(props.onClick, onCreate),\n }\n },\n [isHit, onCreate],\n )\n\n return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n const { isHit, isEmpty } = useAutocompleteContext()\n\n const getEmptyProps: UIPropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit && !isEmpty ? style : undefined,\n }\n },\n [isHit, isEmpty],\n )\n\n return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","import_react","import_jsx_runtime","import_jsx_runtime"]}
package/dist/autocomplete-create.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  AutocompleteCreate
4
- } from "./chunk-X2KU3OVN.mjs";
4
+ } from "./chunk-22BJGCRM.mjs";
5
5
  export {
6
6
  AutocompleteCreate
7
7
  };
package/dist/autocomplete-empty.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/autocomplete-empty.tsx","../src/autocomplete-icon.tsx","../src/use-autocomplete.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { FC, ReactElement } from \"react\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport {\n useAutocompleteContext,\n useAutocompleteEmpty,\n} from \"./use-autocomplete\"\n\ntype AutocompleteEmptyOptions = {\n /**\n * The autocomplete empty option icon to use.\n */\n icon?: ReactElement\n /**\n * The label of the autocomplete empty option.\n */\n children?: string\n}\n\nexport type AutocompleteEmptyProps = Omit<HTMLUIProps<\"li\">, \"children\"> &\n AutocompleteEmptyOptions\n\nexport const AutocompleteEmpty = forwardRef<AutocompleteEmptyProps, \"li\">(\n ({ className, icon, children, ...rest }, ref) => {\n const { emptyMessage, styles } = useAutocompleteContext()\n const { getEmptyProps } = useAutocompleteEmpty()\n\n children ??= emptyMessage\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n pointerEvents: \"none\",\n ...styles.item,\n }\n\n return (\n <ui.li\n className={cx(\"ui-autocomplete__item--empty\", className)}\n __css={css}\n {...getEmptyProps(rest, ref)}\n >\n {icon !== null ? (\n <AutocompleteItemIcon>{icon || <MinusIcon />}</AutocompleteItemIcon>\n ) : null}\n {icon ? (\n <ui.span style={{ pointerEvents: \"none\", flex: 1 }} lineClamp={1}>\n {children}\n </ui.span>\n ) : (\n children\n )}\n </ui.li>\n )\n },\n)\n\nconst MinusIcon: FC = () => (\n <svg viewBox=\"0 0 448 512\" width=\"1em\" height=\"1em\">\n <path\n fill=\"currentColor\"\n d=\"M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z\"\n />\n </svg>\n)\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon, CloseIcon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport type { FC, HTMLAttributes } from \"react\"\nimport { cloneElement, useRef } from \"react\"\nimport { useAutocompleteContext } from \"./use-autocomplete\"\n\nexport type AutocompleteIconProps = HTMLUIProps<\"div\">\n\nexport const AutocompleteIcon = forwardRef<AutocompleteIconProps, \"div\">(\n ({ className, children, __css, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n cursor: \"pointer\",\n ...styles.icon,\n ...__css,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n maxWidth: \"1em\",\n maxHeight: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-autocomplete__icon\", className)}\n __css={css}\n {...rest}\n >\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n },\n)\n\nexport type AutocompleteClearIconProps = AutocompleteIconProps & {\n disabled?: boolean\n}\n\nexport const AutocompleteClearIcon: FC<AutocompleteClearIconProps> = ({\n className,\n children,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n const { styles } = useAutocompleteContext()\n\n const isDisabled = props.disabled\n\n const rest = useClickable({\n ref,\n isDisabled,\n ...(props as HTMLAttributes<HTMLElement>),\n })\n\n return (\n <AutocompleteIcon\n aria-label=\"Clear value\"\n className={cx(\"ui-autocomplete__icon--clear\", className)}\n __css={styles.clearIcon}\n {...rest}\n >\n {children ?? <CloseIcon w=\"0.5em\" h=\"0.5em\" />}\n </AutocompleteIcon>\n )\n}\n\nexport type AutocompleteItemIconProps = HTMLUIProps<\"span\">\n\nexport const AutocompleteItemIcon = forwardRef<\n AutocompleteItemIconProps,\n \"span\"\n>(({ className, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.itemIcon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-autocomplete__item-icon\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n","import type { CSSUIObject, HTMLUIProps, UIPropGetter } from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { MotionUIPropGetter } from \"@yamada-ui/motion\"\nimport { popoverProperties, type PopoverProps } from \"@yamada-ui/popover\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport { useOutsideClick } from \"@yamada-ui/use-outside-click\"\nimport type { Dict, Union, DOMAttributes } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n dataAttr,\n funcAll,\n getEventRelatedTarget,\n handlerAll,\n isArray,\n isContains,\n isHTMLElement,\n mergeRefs,\n omitObject,\n pickObject,\n splitObject,\n useUnmountEffect,\n useUpdateEffect,\n getValidChildren,\n isUndefined,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n CSSProperties,\n Dispatch,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport type { AutocompleteOptionProps } from \"./\"\nimport { AutocompleteOption, AutocompleteOptionGroup } from \"./\"\n\ntype AutocompleteBaseItem = Omit<\n AutocompleteOptionProps,\n \"value\" | \"children\"\n> & {\n label?: string\n}\n\ntype AutocompleteItemWithValue = AutocompleteBaseItem & {\n value?: string\n}\n\ntype AutocompleteItemWithItems = AutocompleteBaseItem & {\n items?: AutocompleteItemWithValue[]\n}\n\nexport type AutocompleteItem =\n | AutocompleteItemWithValue\n | AutocompleteItemWithItems\n\nconst kanaMap: Record<string, string> = {\n ｶﾞ: \"ガ\",\n ｷﾞ: \"ギ\",\n ｸﾞ: \"グ\",\n ｹﾞ: \"ゲ\",\n ｺﾞ: \"ゴ\",\n ｻﾞ: \"ザ\",\n ｼﾞ: \"ジ\",\n ｽﾞ: \"ズ\",\n ｾﾞ: \"ゼ\",\n ｿﾞ: \"ゾ\",\n ﾀﾞ: \"ダ\",\n ﾁﾞ: \"ヂ\",\n ﾂﾞ: \"ヅ\",\n ﾃﾞ: \"デ\",\n ﾄﾞ: \"ド\",\n ﾊﾞ: \"バ\",\n ﾋﾞ: \"ビ\",\n ﾌﾞ: \"ブ\",\n ﾍﾞ: \"ベ\",\n ﾎﾞ: \"ボ\",\n ﾊﾟ: \"パ\",\n ﾋﾟ: \"ピ\",\n ﾌﾟ: \"プ\",\n ﾍﾟ: \"ペ\",\n ﾎﾟ: \"ポ\",\n ｳﾞ: \"ヴ\",\n ﾜﾞ: \"ヷ\",\n ｦﾞ: \"ヺ\",\n ｱ: \"ア\",\n ｲ: \"イ\",\n ｳ: \"ウ\",\n ｴ: \"エ\",\n ｵ: \"オ\",\n ｶ: \"カ\",\n ｷ: \"キ\",\n ｸ: \"ク\",\n ｹ: \"ケ\",\n ｺ: \"コ\",\n ｻ: \"サ\",\n ｼ: \"シ\",\n ｽ: \"ス\",\n ｾ: \"セ\",\n ｿ: \"ソ\",\n ﾀ: \"タ\",\n ﾁ: \"チ\",\n ﾂ: \"ツ\",\n ﾃ: \"テ\",\n ﾄ: \"ト\",\n ﾅ: \"ナ\",\n ﾆ: \"ニ\",\n ﾇ: \"ヌ\",\n ﾈ: \"ネ\",\n ﾉ: \"ノ\",\n ﾊ: \"ハ\",\n ﾋ: \"ヒ\",\n ﾌ: \"フ\",\n ﾍ: \"ヘ\",\n ﾎ: \"ホ\",\n ﾏ: \"マ\",\n ﾐ: \"ミ\",\n ﾑ: \"ム\",\n ﾒ: \"メ\",\n ﾓ: \"モ\",\n ﾔ: \"ヤ\",\n ﾕ: \"ユ\",\n ﾖ: \"ヨ\",\n ﾗ: \"ラ\",\n ﾘ: \"リ\",\n ﾙ: \"ル\",\n ﾚ: \"レ\",\n ﾛ: \"ロ\",\n ﾜ: \"ワ\",\n ｦ: \"ヲ\",\n ﾝ: \"ン\",\n ｧ: \"ァ\",\n ｨ: \"ィ\",\n ｩ: \"ゥ\",\n ｪ: \"ェ\",\n ｫ: \"ォ\",\n ｯ: \"ッ\",\n ｬ: \"ャ\",\n ｭ: \"ュ\",\n ｮ: \"ョ\",\n \"｡\": \"。\",\n \"､\": \"、\",\n ｰ: \"ー\",\n \"｢\": \"「\",\n \"｣\": \"」\",\n \"･\": \"・\",\n}\n\nconst defaultFormat = (value: string) => {\n value = value.replace(/[！-～]/g, (v) =>\n String.fromCharCode(v.charCodeAt(0) - 0xfee0),\n )\n\n const reg = new RegExp(\"(\" + Object.keys(kanaMap).join(\"|\") + \")\", \"g\")\n\n value = value\n .replace(reg, (v) => kanaMap[v])\n .replace(/ﾞ/g, \"゛\")\n .replace(/ﾟ/g, \"゜\")\n\n value = value.toUpperCase()\n\n return value\n}\n\nconst flattenItems = (\n items: AutocompleteItem[],\n): AutocompleteItemWithValue[] => {\n const filterItems = (\n items: AutocompleteItem[] | AutocompleteItemWithValue[],\n ): (AutocompleteItemWithValue | AutocompleteItemWithValue[])[] =>\n items\n .map((item) => {\n const { isDisabled, isFocusable } = item\n const trulyDisabled = !!isDisabled && !isFocusable\n\n if (trulyDisabled) return\n\n if (\"items\" in item) {\n return filterItems(item.items ?? [])\n } else {\n return item as AutocompleteItemWithValue\n }\n })\n .filter(Boolean) as (\n | AutocompleteItemWithValue\n | AutocompleteItemWithValue[]\n )[]\n\n return filterItems(items).flat(Infinity) as AutocompleteItemWithValue[]\n}\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"autocomplete-item\")\n\nexport const {\n DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n useDescendantsContext: useAutocompleteDescendantsContext,\n useDescendants: useAutocompleteDescendants,\n useDescendant: useAutocompleteDescendant,\n} = createDescendant<HTMLElement>()\n\ntype AutocompleteContext = Omit<\n UseAutocompleteProps,\n \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n> & {\n value: string | string[]\n label: string | string[] | undefined\n inputValue: string\n isHit: boolean\n isEmpty: boolean\n isAllSelected: boolean\n onChange: (newValue: string) => void\n onChangeLabel: (newValue: string, runOmit?: boolean) => void\n pickOptions: (value: string) => void\n rebirthOptions: (runFocus?: boolean) => void\n inputProps: DOMAttributes\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onCreate: () => void\n onFocusFirst: () => void\n onFocusLast: () => void\n onFocusNext: (index?: number) => void\n onFocusPrev: (index?: number) => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n listRef: RefObject<HTMLUListElement>\n inputRef: RefObject<HTMLInputElement>\n formControlProps: Record<string, any>\n styles: Record<string, CSSUIObject>\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n createContext<AutocompleteContext>({\n name: \"AutocompleteContext\",\n errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n })\n\ntype UseAutocompleteBaseProps<T extends string | string[] = string> = Omit<\n PopoverProps,\n | \"initialFocusRef\"\n | \"closeOnButton\"\n | \"trigger\"\n | \"autoFocus\"\n | \"restoreFocus\"\n | \"openDelay\"\n | \"closeDelay\"\n> &\n FormControlOptions & {\n /**\n * The value of the autocomplete.\n */\n value?: T\n /**\n * The initial value of the autocomplete.\n */\n defaultValue?: T\n /**\n * The callback invoked when value state changes.\n */\n onChange?: (value: T) => void\n /**\n * The callback invoked when search input.\n */\n onSearch?: (ev: ChangeEvent<HTMLInputElement>) => void\n /**\n * The callback invoked when autocomplete option created.\n */\n onCreate?: (newItem: AutocompleteItem, newItems: AutocompleteItem[]) => void\n /**\n * Function to format text when search input.\n */\n format?: (value: string) => string\n /**\n * The position to be inserted when the autocomplete option is created.\n *\n * @default 'first'\n */\n insertPositionItem?: Union<\"first\" | \"last\"> | [string, \"first\" | \"last\"]\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n /**\n * The message displayed when the search yields no hits.\n *\n * @default 'No results found'\n */\n emptyMessage?: string\n /**\n * If `true`, enables the creation of autocomplete option.\n *\n * @default false\n */\n allowCreate?: boolean\n /**\n * If `true`, enables the free input.\n */\n allowFree?: boolean\n /**\n * If `true`, the selected item(s) will be excluded from the list.\n *\n * @default false\n */\n omitSelectedValues?: boolean\n /**\n * The maximum selectable value.\n */\n maxSelectValues?: number\n /**\n * Props for select option element.\n */\n optionProps?: Omit<AutocompleteOptionProps, \"value\" | \"children\">\n /**\n * If provided, generate options based on items.\n */\n items?: AutocompleteItem[]\n }\n\nexport type UseAutocompleteProps<T extends string | string[] = string> = Omit<\n HTMLUIProps<\"input\">,\n | keyof UseAutocompleteBaseProps\n | \"list\"\n | \"disabled\"\n | \"required\"\n | \"readOnly\"\n | \"size\"\n> &\n UseAutocompleteBaseProps<T>\n\nexport const useAutocomplete = <T extends string | string[] = string>({\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n onCreate: onCreateProp,\n onSearch: onSearchProp,\n closeOnSelect = true,\n omitSelectedValues = false,\n maxSelectValues,\n closeOnBlur = true,\n closeOnEsc = true,\n allowCreate = false,\n allowFree = false,\n insertPositionItem = \"first\",\n emptyMessage = \"No results found\",\n format = defaultFormat,\n placement = \"bottom-start\",\n duration = 0.2,\n optionProps,\n placeholder,\n items,\n children,\n isOpen: isOpenProp,\n defaultIsOpen,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n ...rest\n}: UseAutocompleteProps<T>) => {\n rest = useFormControlProps(rest)\n\n const { id } = rest\n\n const { \"aria-readonly\": _ariaReadonly, ...formControlProps } = pickObject(\n rest,\n formControlProperties,\n )\n const [containerProps, inputProps] = splitObject<Dict, string>(\n omitObject(rest, [...popoverProperties, \"onKeyDown\", \"onFocus\"]),\n layoutStyleProperties,\n )\n\n const descendants = useAutocompleteDescendants()\n\n const containerRef = useRef<HTMLDivElement>(null)\n const listRef = useRef<HTMLUListElement>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const isComposition = useRef<boolean>(false)\n const prevValue = useRef<T | undefined>(undefined)\n\n const [resolvedItems, setResolvedItems] = useState<\n AutocompleteItem[] | undefined\n >(items)\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n })\n const [label, setLabel] = useState<T | undefined>(undefined)\n const [inputValue, setInputValue] = useState<string>(\"\")\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isAllSelected, setIsAllSelected] = useState<boolean>(false)\n const [isHit, setIsHit] = useState<boolean>(true)\n const {\n isOpen,\n onOpen: onInternalOpen,\n onClose,\n } = useDisclosure({\n isOpen: isOpenProp,\n defaultIsOpen,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n })\n const isFocused = focusedIndex > -1\n const isCreate = focusedIndex === -2 && allowCreate\n const isMulti = isArray(value)\n const isEmptyValue = !isMulti ? !value : !value.length\n\n const [firstInsertPositionItem, secondInsertPositionItem] = useMemo(() => {\n if (isArray(insertPositionItem)) {\n return insertPositionItem\n } else {\n return [insertPositionItem, \"first\"]\n }\n }, [insertPositionItem])\n\n if (allowCreate && !isUndefined(children)) {\n console.warn(\n `${!isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"}: ${\n !isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"\n } internally prefers 'children'. If 'allowCreate' is true, it will not be reflected correctly. If want to reflect, please set 'items' in props.`,\n )\n }\n\n const selectedValues = descendants.enabledValues(\n ({ node }) => isMulti && value.includes(node.dataset.value ?? \"\"),\n )\n const selectedIndexes = selectedValues.map(({ index }) => index)\n const enabledValues = descendants.enabledValues(\n ({ node, index }) =>\n \"target\" in node.dataset && !selectedIndexes.includes(index),\n )\n\n const validChildren = getValidChildren(children)\n\n const computedChildren = resolvedItems?.map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <AutocompleteOption key={i} value={value} {...props}>\n {label}\n </AutocompleteOption>\n )\n } else if (\"items\" in item) {\n const { label, items = [], ...props } = item\n\n return (\n <AutocompleteOptionGroup\n key={i}\n label={label as string}\n {...(props as HTMLUIProps<\"ul\">)}\n >\n {items.map(({ label, value, ...props }, i) => (\n <AutocompleteOption key={i} value={value} {...props}>\n {label}\n </AutocompleteOption>\n ))}\n </AutocompleteOptionGroup>\n )\n }\n })\n\n const isEmpty = !validChildren.length && !computedChildren?.length\n\n const onOpen = useCallback(() => {\n if (formControlProps.disabled || formControlProps.readOnly) return\n\n if (!allowCreate && (isEmpty || isAllSelected)) return\n\n onInternalOpen()\n\n if (inputRef.current) inputRef.current.focus()\n }, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen])\n\n const onFocusFirst = useCallback(() => {\n const id = setTimeout(() => {\n if (isEmpty || isAllSelected) return\n\n const first = descendants.enabledFirstValue(\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!first) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(first.index)\n } else {\n if (selectedIndexes.includes(first.index)) {\n const enabledFirst = enabledValues[0]\n\n setFocusedIndex(enabledFirst.index)\n } else {\n setFocusedIndex(first.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n }, [\n descendants,\n enabledValues,\n isAllSelected,\n isEmpty,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ])\n\n const onFocusLast = useCallback(() => {\n const id = setTimeout(() => {\n if (isEmpty || isAllSelected) return\n\n const last = descendants.enabledLastValue(\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!last) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(last.index)\n } else {\n if (selectedIndexes.includes(last.index)) {\n const enabledLast = enabledValues.reverse()[0]\n\n setFocusedIndex(enabledLast.index)\n } else {\n setFocusedIndex(last.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n }, [\n descendants,\n enabledValues,\n isAllSelected,\n isEmpty,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ])\n\n const onFocusSelected = useCallback(() => {\n const id = setTimeout(() => {\n const values = descendants.enabledValues()\n\n const selected = values.find(({ node }) =>\n !isMulti\n ? node.dataset.value === value\n : value.includes(node.dataset.value ?? \"\"),\n )\n\n if (selected) setFocusedIndex(selected.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, isMulti, value])\n\n const onFocusNext = useCallback(\n (index: number = focusedIndex) => {\n const id = setTimeout(() => {\n const next = descendants.enabledNextValue(\n index,\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!next) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(next.index)\n } else {\n if (selectedIndexes.includes(next.index)) {\n const enabledNext =\n enabledValues.find(({ index }) => next.index < index) ??\n enabledValues[0]\n\n setFocusedIndex(enabledNext.index)\n } else {\n setFocusedIndex(next.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n },\n [\n descendants,\n enabledValues,\n focusedIndex,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ],\n )\n\n const onFocusPrev = useCallback(\n (index: number = focusedIndex) => {\n const id = setTimeout(() => {\n const prev = descendants.enabledPrevValue(\n index,\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!prev) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(prev.index)\n } else {\n if (selectedIndexes.includes(prev.index)) {\n const enabledPrev =\n enabledValues.reverse().find(({ index }) => index < prev.index) ??\n enabledValues[0]\n\n setFocusedIndex(enabledPrev.index)\n } else {\n setFocusedIndex(prev.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n },\n [\n descendants,\n enabledValues,\n focusedIndex,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ],\n )\n\n const onFocusFirstOrSelected =\n isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected\n const onFocusLastOrSelected =\n isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected\n\n const pickOptions = useCallback(\n (value: string) => {\n const values = descendants.values()\n\n let isHit = false\n let isFocused = false\n\n values.forEach(({ node, index }) => {\n if (format(node.textContent ?? \"\").includes(value)) {\n isHit = true\n\n const isDisabled = \"disabled\" in node.dataset\n\n node.dataset.target = \"\"\n\n if (!isFocused && !isDisabled) {\n isFocused = true\n\n setFocusedIndex(index)\n }\n } else {\n delete node.dataset.target\n }\n })\n\n setIsHit(isHit)\n },\n [descendants, format],\n )\n\n const rebirthOptions = useCallback(\n (runFocus = true) => {\n const values = descendants.values()\n\n values.forEach(({ node }) => {\n node.dataset.target = \"\"\n })\n\n if (runFocus) onFocusFirst()\n\n setIsHit(true)\n },\n [descendants, onFocusFirst],\n )\n\n const getSelectedValues = useCallback(\n (newValues: string | string[]) => {\n const enabledValues = descendants.enabledValues()\n\n const resolvedValues = isArray(newValues) ? newValues : [newValues]\n\n const selectedValues = resolvedValues\n .map((value) => {\n const { node } =\n enabledValues.find(({ node }) => node.dataset.value === value) ?? {}\n\n if (node) {\n const el = Array.from(node.children).find(\n (child) => child.getAttribute(\"data-label\") !== null,\n )\n\n return el?.textContent ?? undefined\n } else {\n return allowFree ? value : undefined\n }\n })\n .filter(Boolean) as string[]\n\n return selectedValues\n },\n [allowFree, descendants],\n )\n\n const onChangeLabel = useCallback(\n (newValue: string, runOmit: boolean = true) => {\n const selectedValues = getSelectedValues(newValue)\n\n setLabel((prev) => {\n if (!isMulti) {\n return selectedValues[0] as T\n } else {\n selectedValues.forEach((selectedValue) => {\n const isSelected =\n isArray(prev) && prev.includes(selectedValue ?? \"\")\n\n if (!isSelected) {\n prev = [...(isArray(prev) ? prev : []), selectedValue] as T\n } else if (runOmit) {\n prev = (\n isArray(prev)\n ? prev.filter((value) => value !== selectedValue)\n : undefined\n ) as T\n }\n })\n\n return prev\n }\n })\n },\n [getSelectedValues, isMulti],\n )\n\n const onChange = useCallback(\n (newValue: string, runRebirth: boolean = true) => {\n setValue((prev) => {\n let next: T\n\n if (!isArray(prev)) {\n next = newValue as T\n } else {\n const isSelected = prev.includes(newValue)\n\n if (!isSelected) {\n next = [...prev, newValue] as T\n } else {\n next = prev.filter((value) => value !== newValue) as T\n }\n }\n\n prevValue.current = next\n return next\n })\n\n const isHit =\n descendants\n .values()\n .filter(({ node }) =>\n format(node.textContent ?? \"\").includes(newValue),\n ).length > 0\n\n onChangeLabel(newValue)\n\n if (allowFree || isHit) setInputValue(\"\")\n\n if (isMulti && runRebirth) rebirthOptions(false)\n },\n [\n allowFree,\n isMulti,\n onChangeLabel,\n rebirthOptions,\n setValue,\n descendants,\n format,\n ],\n )\n\n const onSelect = useCallback(() => {\n let enabledValue = descendants.value(focusedIndex)\n\n if (\"disabled\" in (enabledValue?.node.dataset ?? {}))\n enabledValue = undefined\n\n if (!enabledValue) return\n\n const value = enabledValue.node.dataset.value ?? \"\"\n\n onChange(value)\n\n if (closeOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext()\n }, [\n closeOnSelect,\n descendants,\n focusedIndex,\n omitSelectedValues,\n onChange,\n onClose,\n onFocusNext,\n ])\n\n const onSearch = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!isOpen) onOpen()\n\n onSearchProp?.(ev)\n\n const value = ev.target.value\n const computedValue = format(value)\n\n if (computedValue) {\n pickOptions(computedValue)\n } else {\n rebirthOptions()\n }\n\n setInputValue(value)\n },\n [isOpen, onOpen, format, onSearchProp, pickOptions, rebirthOptions],\n )\n\n const onCompositionStart = useCallback(() => {\n isComposition.current = true\n }, [])\n\n const onCompositionEnd = useCallback(() => {\n isComposition.current = false\n }, [])\n\n const onCreate = useCallback(() => {\n if (!listRef.current) return\n\n const newItem: AutocompleteItem = { label: inputValue, value: inputValue }\n\n let newItems: AutocompleteItem[] = []\n\n if (resolvedItems) newItems = resolvedItems\n\n if (firstInsertPositionItem === \"first\") {\n newItems = [newItem, ...newItems]\n } else if (firstInsertPositionItem === \"last\") {\n newItems = [...newItems, newItem]\n } else {\n const i = newItems.findIndex(\n ({ label }) => label === firstInsertPositionItem,\n )\n\n const targetItem = newItems[i]\n\n if (i !== -1 && \"items\" in targetItem) {\n if (secondInsertPositionItem === \"first\") {\n targetItem.items = [newItem, ...(targetItem.items ?? [])]\n } else {\n targetItem.items = [...(targetItem.items ?? []), newItem]\n }\n\n newItems[i] = targetItem\n } else {\n console.warn(\n `${\n !isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"\n }: '${firstInsertPositionItem}' specified in insertPositionItem does not exist in the option group.`,\n )\n }\n }\n\n setResolvedItems(newItems)\n onChange(inputValue)\n rebirthOptions(false)\n\n const index = flattenItems(newItems).findIndex(\n ({ value }) => value === inputValue,\n )\n\n setFocusedIndex(index)\n\n onCreateProp?.(newItem, newItems)\n }, [\n inputValue,\n resolvedItems,\n firstInsertPositionItem,\n onChange,\n rebirthOptions,\n onCreateProp,\n secondInsertPositionItem,\n isMulti,\n ])\n\n const onClick = useCallback(() => {\n if (isOpen) {\n if (inputRef.current) inputRef.current.focus()\n } else {\n onOpen()\n\n onFocusFirstOrSelected()\n }\n }, [isOpen, onFocusFirstOrSelected, onOpen])\n\n const onFocus = useCallback(() => {\n if (isOpen) return\n\n onOpen()\n\n onFocusFirstOrSelected()\n }, [isOpen, onFocusFirstOrSelected, onOpen])\n\n const onBlur = useCallback(\n (ev: FocusEvent<HTMLDivElement>) => {\n const relatedTarget = getEventRelatedTarget(ev)\n\n if (isContains(containerRef.current, relatedTarget)) return\n\n if (!closeOnBlur && isHit) return\n\n if (allowFree && !!inputValue) onChange(inputValue, false)\n\n setInputValue(\"\")\n\n if (isOpen) onClose()\n },\n [closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange],\n )\n\n const onDelete = useCallback(() => {\n if (!isMulti) {\n onChange(\"\")\n } else {\n onChange(value[value.length - 1])\n }\n\n if (!isOpen) onFocus()\n }, [isMulti, isOpen, onChange, onFocus, value])\n\n const onClear = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n ev.stopPropagation()\n\n prevValue.current = [] as unknown as T\n setValue([] as unknown as T)\n setLabel(undefined)\n setInputValue(\"\")\n rebirthOptions()\n\n if (isOpen && inputRef.current) inputRef.current.focus()\n },\n [isOpen, setLabel, setInputValue, setValue, rebirthOptions],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (ev.key === \" \") ev.key = ev.code\n\n if (formControlProps.disabled || formControlProps.readOnly) return\n if (isComposition.current) return\n\n const enabledDelete = label === inputValue || !inputValue.length\n\n const actions: Record<string, Function | undefined> = {\n ArrowDown: isFocused\n ? () => onFocusNext()\n : !isOpen\n ? funcAll(onOpen, onFocusFirstOrSelected)\n : undefined,\n ArrowUp: isFocused\n ? () => onFocusPrev()\n : !isOpen\n ? funcAll(onOpen, onFocusLastOrSelected)\n : undefined,\n Space: isCreate\n ? onCreate\n : isFocused\n ? onSelect\n : !isOpen\n ? funcAll(onOpen, onFocusFirstOrSelected)\n : undefined,\n Enter: isCreate\n ? onCreate\n : isFocused\n ? onSelect\n : !isOpen\n ? funcAll(onOpen, onFocusFirstOrSelected)\n : allowFree && isMulti\n ? () => {\n if (inputValue) onChange(inputValue)\n\n setFocusedIndex(0)\n }\n : undefined,\n Home: isOpen ? onFocusFirst : undefined,\n End: isOpen ? onFocusLast : undefined,\n Escape: closeOnEsc ? onClose : undefined,\n Backspace: !isEmptyValue && enabledDelete ? onDelete : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n\n action(ev)\n },\n [\n allowFree,\n formControlProps,\n label,\n inputValue,\n onOpen,\n isFocused,\n isMulti,\n onFocusFirstOrSelected,\n onFocusNext,\n onFocusLastOrSelected,\n onFocusPrev,\n isCreate,\n onCreate,\n onSelect,\n isOpen,\n onFocusFirst,\n onFocusLast,\n closeOnEsc,\n onClose,\n isEmptyValue,\n onDelete,\n onChange,\n ],\n )\n\n useEffect(() => {\n if (!isMulti) return\n\n if (!omitSelectedValues && isUndefined(maxSelectValues)) return\n\n const isAll = value.length > 0 && value.length === descendants.count()\n const isMax = value.length === maxSelectValues\n\n if (isAll || isMax) {\n onClose()\n setIsAllSelected(true)\n } else {\n setIsAllSelected(false)\n }\n }, [\n omitSelectedValues,\n value,\n descendants,\n isMulti,\n onClose,\n maxSelectValues,\n ])\n\n useEffect(() => {\n if (isMulti) {\n if (\n JSON.stringify(prevValue.current ?? []) === JSON.stringify(value ?? [])\n )\n return\n\n const label = getSelectedValues(value)\n\n setLabel(label as T)\n } else {\n if (prevValue.current === value) return\n\n onChangeLabel(value, false)\n }\n }, [isMulti, value, onChangeLabel, getSelectedValues])\n\n useUpdateEffect(() => {\n if (isOpen || allowFree) return\n\n setFocusedIndex(-1)\n setInputValue(\"\")\n }, [isOpen])\n\n useUpdateEffect(() => {\n if (!isHit) setFocusedIndex(-2)\n }, [isHit])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n useOutsideClick({\n ref: containerRef,\n handler: onClose,\n enabled: isOpen && (closeOnBlur || !isHit),\n })\n\n const getPopoverProps = useCallback(\n (props?: PopoverProps): PopoverProps => ({\n matchWidth: true,\n ...rest,\n ...props,\n isOpen,\n onOpen,\n onClose,\n placement,\n duration,\n trigger: \"never\",\n closeOnButton: false,\n closeOnBlur,\n }),\n [duration, closeOnBlur, isOpen, onClose, onOpen, placement, rest],\n )\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ref: mergeRefs(containerRef, ref),\n ...containerProps,\n ...props,\n ...formControlProps,\n onClick: handlerAll(props.onClick, rest.onClick, onClick),\n onBlur: handlerAll(props.onBlur, rest.onBlur, onBlur),\n }),\n\n [containerProps, formControlProps, onBlur, onClick, rest],\n )\n\n const getFieldProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ref,\n tabIndex: -1,\n ...props,\n ...formControlProps,\n placeholder,\n \"data-active\": dataAttr(isOpen),\n \"aria-expanded\": dataAttr(isOpen),\n onFocus: handlerAll(props.onFocus, rest.onFocus, onFocus),\n onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onKeyDown),\n }),\n [formControlProps, placeholder, isOpen, rest, onFocus, onKeyDown],\n )\n\n return {\n id,\n descendants,\n value,\n label,\n inputValue,\n isHit,\n isEmpty,\n computedChildren,\n focusedIndex,\n omitSelectedValues,\n closeOnSelect,\n allowCreate,\n allowFree,\n emptyMessage,\n isOpen,\n isAllSelected,\n listRef,\n inputRef,\n optionProps,\n formControlProps,\n setFocusedIndex,\n onChangeLabel,\n onChange,\n onSearch,\n onCreate,\n onClear,\n onCompositionStart,\n onCompositionEnd,\n pickOptions,\n rebirthOptions,\n onOpen,\n onClose,\n onFocusFirst,\n onFocusLast,\n onFocusSelected,\n onFocusNext,\n onFocusPrev,\n getPopoverProps,\n getContainerProps,\n getFieldProps,\n inputProps,\n }\n}\n\nexport type UseAutocompleteReturn = ReturnType<typeof useAutocomplete>\n\nexport const useAutocompleteInput = () => {\n const {\n id,\n inputRef,\n onSearch,\n onCompositionStart,\n onCompositionEnd,\n isAllSelected,\n formControlProps,\n inputProps,\n isOpen,\n } = useAutocompleteContext()\n\n useUpdateEffect(() => {\n if (isAllSelected && inputRef.current) inputRef.current.blur()\n }, [isAllSelected])\n\n const getInputProps: UIPropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ref: mergeRefs(inputRef, ref),\n ...formControlProps,\n role: \"combobox\",\n \"aria-haspopup\": \"listbox\",\n \"aria-autocomplete\": \"list\",\n \"aria-expanded\": isOpen,\n autoCapitalize: \"none\",\n autoComplete: \"off\",\n spellCheck: \"false\",\n ...inputProps,\n ...props,\n id,\n cursor: formControlProps.readOnly ? \"default\" : \"text\",\n pointerEvents:\n formControlProps.disabled || isAllSelected ? \"none\" : \"auto\",\n tabIndex: isAllSelected ? -1 : 0,\n onChange: handlerAll(props.onChange, onSearch),\n onCompositionStart: handlerAll(\n props.onCompositionStart,\n inputProps.onCompositionStart,\n onCompositionStart,\n ),\n onCompositionEnd: handlerAll(\n props.onCompositionEnd,\n inputProps.onCompositionEnd,\n onCompositionEnd,\n ),\n }),\n [\n isOpen,\n inputProps,\n inputRef,\n formControlProps,\n id,\n isAllSelected,\n onSearch,\n onCompositionStart,\n onCompositionEnd,\n ],\n )\n\n return {\n getInputProps,\n }\n}\n\nexport type UseAutocompleteInputReturn = ReturnType<typeof useAutocompleteInput>\n\nexport const useAutocompleteList = () => {\n const { focusedIndex, isOpen, listRef, rebirthOptions } =\n useAutocompleteContext()\n\n const descendants = useAutocompleteDescendantsContext()\n\n const beforeFocusedIndex = useRef<number>(-1)\n const selectedValue = descendants.value(focusedIndex)\n\n const onAnimationComplete = useCallback(() => {\n if (!isOpen) rebirthOptions(false)\n }, [isOpen, rebirthOptions])\n\n useEffect(() => {\n if (!listRef.current || !selectedValue) return\n\n if (beforeFocusedIndex.current === selectedValue.index) return\n\n const parent = listRef.current\n const child = selectedValue.node\n\n const parentHeight = parent.clientHeight\n const viewTop = parent.scrollTop\n const viewBottom = viewTop + parentHeight\n\n const childHeight = child.clientHeight\n const childTop = child.offsetTop\n const childBottom = childTop + childHeight\n\n const isInView = viewTop <= childTop && childBottom <= viewBottom\n\n const isScrollBottom = beforeFocusedIndex.current < selectedValue.index\n\n if (!isInView) {\n if (childBottom <= parentHeight) {\n listRef.current.scrollTo({ top: 0 })\n } else {\n if (!isScrollBottom) {\n listRef.current.scrollTo({ top: childTop + 1 })\n } else {\n listRef.current.scrollTo({ top: childBottom - parentHeight })\n }\n }\n }\n\n beforeFocusedIndex.current = selectedValue.index\n }, [listRef, selectedValue])\n\n useUpdateEffect(() => {\n if (!isOpen) beforeFocusedIndex.current = -1\n }, [isOpen])\n\n const getListProps: MotionUIPropGetter<\"ul\"> = useCallback(\n (props = {}, ref = null) => ({\n as: \"ul\",\n ref: mergeRefs(listRef, ref),\n role: \"select\",\n tabIndex: -1,\n ...props,\n onAnimationComplete: handlerAll(\n props.onAnimationComplete,\n onAnimationComplete,\n ),\n }),\n [listRef, onAnimationComplete],\n )\n\n return {\n getListProps,\n }\n}\n\nexport type UseAutocompleteOptionGroupProps = HTMLUIProps<\"ul\"> & {\n /**\n * The label of the autocomplete option group.\n */\n label: string\n}\n\nexport const useAutocompleteOptionGroup = ({\n label,\n ...rest\n}: UseAutocompleteOptionGroupProps) => {\n const { value, omitSelectedValues } = useAutocompleteContext()\n\n const isMulti = isArray(value)\n\n const descendants = useAutocompleteDescendantsContext()\n\n const values = descendants.values()\n const selectedValues =\n isMulti && omitSelectedValues\n ? descendants.values(({ node }) =>\n value.includes(node.dataset.value ?? \"\"),\n )\n : []\n const selectedIndexes = selectedValues.map(({ index }) => index)\n const childValues = values.filter(\n ({ node, index }) =>\n node.parentElement?.dataset.label === label &&\n !selectedIndexes.includes(index) &&\n \"target\" in node.dataset,\n )\n\n const isEmpty = !childValues.length\n\n const computedRest = splitObject(rest, layoutStyleProperties)\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n ...computedRest[0],\n style: isEmpty ? style : undefined,\n \"data-label\": label,\n role: \"autocomplete-group-container\",\n }\n },\n [computedRest, isEmpty, label],\n )\n\n const getGroupProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ref,\n ...props,\n ...computedRest[1],\n \"data-label\": label,\n role: \"autocomplete-group\",\n }),\n [computedRest, label],\n )\n\n return {\n label,\n getContainerProps,\n getGroupProps,\n }\n}\n\nexport type UseAutocompleteOptionGroupReturn = ReturnType<\n typeof useAutocompleteOptionGroup\n>\n\nexport type UseAutocompleteOptionProps = Omit<\n HTMLUIProps<\"li\">,\n \"value\" | \"children\"\n> & {\n /**\n * The value of the select option.\n */\n value?: string\n /**\n * The label of the select option.\n */\n children?: string\n /**\n * If `true`, the select option will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the select option will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n const {\n value,\n omitSelectedValues,\n onChange,\n onChangeLabel,\n focusedIndex,\n setFocusedIndex,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n optionProps,\n inputRef,\n onFocusNext,\n } = useAutocompleteContext()\n\n let {\n icon: customIcon,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n children,\n value: optionValue,\n ...computedProps\n } = { ...optionProps, ...props }\n\n const trulyDisabled = !!isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n\n const { index, register, descendants } = useAutocompleteDescendant({\n disabled: trulyDisabled,\n })\n\n const values = descendants.values()\n const frontValues = values.slice(0, index)\n\n const isMulti = isArray(value)\n const isDuplicated = !isMulti\n ? frontValues.some(({ node }) => node.dataset.value === (optionValue ?? \"\"))\n : false\n\n const isSelected =\n !isDuplicated &&\n (!isMulti\n ? (optionValue ?? \"\") === value\n : value.includes(optionValue ?? \"\"))\n const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n ev.stopPropagation()\n\n if (isDisabled) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n if (!isTargetOption(ev.currentTarget)) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n setFocusedIndex(index)\n\n onChange(optionValue ?? \"\")\n\n if (inputRef.current) inputRef.current.focus()\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext(index)\n },\n [\n onFocusNext,\n omitSelectedValues,\n isDisabled,\n optionValue,\n setFocusedIndex,\n index,\n onChange,\n customCloseOnSelect,\n generalCloseOnSelect,\n onClose,\n inputRef,\n ],\n )\n\n useUpdateEffect(() => {\n if (isSelected) onChangeLabel(optionValue ?? \"\", false)\n }, [optionValue])\n\n const getOptionProps: UIPropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref: mergeRefs(itemRef, ref, register),\n ...computedProps,\n ...props,\n role: \"autocomplete-item\",\n tabIndex: -1,\n style:\n !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n \"data-target\": dataAttr(true),\n \"data-value\": optionValue ?? \"\",\n \"data-focus\": dataAttr(isFocused),\n \"data-disabled\": dataAttr(isDisabled),\n \"aria-checked\": ariaAttr(isSelected),\n \"aria-disabled\": ariaAttr(isDisabled),\n onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n }\n },\n [\n optionValue,\n computedProps,\n isDisabled,\n isFocused,\n isSelected,\n isTarget,\n omitSelectedValues,\n onClick,\n register,\n ],\n )\n\n return {\n isSelected,\n isFocused,\n customIcon,\n children,\n getOptionProps,\n }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n const { isHit, onCreate } = useAutocompleteContext()\n\n const getCreateProps: UIPropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit ? style : undefined,\n \"data-focus\": dataAttr(!isHit),\n onClick: handlerAll(props.onClick, onCreate),\n }\n },\n [isHit, onCreate],\n )\n\n return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n const { isHit, isEmpty } = useAutocompleteContext()\n\n const getEmptyProps: UIPropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit && !isEmpty ? style : undefined,\n }\n },\n [isHit, isEmpty],\n )\n\n return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","import_react","import_jsx_runtime","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../src/autocomplete-empty.tsx","../src/autocomplete-icon.tsx","../src/use-autocomplete.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { FC, ReactElement } from \"react\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport {\n useAutocompleteContext,\n useAutocompleteEmpty,\n} from \"./use-autocomplete\"\n\ntype AutocompleteEmptyOptions = {\n /**\n * The autocomplete empty option icon to use.\n */\n icon?: ReactElement\n /**\n * The label of the autocomplete empty option.\n */\n children?: string\n}\n\nexport type AutocompleteEmptyProps = Omit<HTMLUIProps<\"li\">, \"children\"> &\n AutocompleteEmptyOptions\n\nexport const AutocompleteEmpty = forwardRef<AutocompleteEmptyProps, \"li\">(\n ({ className, icon, children, ...rest }, ref) => {\n const { emptyMessage, styles } = useAutocompleteContext()\n const { getEmptyProps } = useAutocompleteEmpty()\n\n children ??= emptyMessage\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n pointerEvents: \"none\",\n ...styles.item,\n }\n\n return (\n <ui.li\n className={cx(\"ui-autocomplete__item--empty\", className)}\n __css={css}\n {...getEmptyProps(rest, ref)}\n >\n {icon !== null ? (\n <AutocompleteItemIcon>{icon || <MinusIcon />}</AutocompleteItemIcon>\n ) : null}\n {icon ? (\n <ui.span style={{ pointerEvents: \"none\", flex: 1 }} lineClamp={1}>\n {children}\n </ui.span>\n ) : (\n children\n )}\n </ui.li>\n )\n },\n)\n\nconst MinusIcon: FC = () => (\n <svg viewBox=\"0 0 448 512\" width=\"1em\" height=\"1em\">\n <path\n fill=\"currentColor\"\n d=\"M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z\"\n />\n </svg>\n)\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon, CloseIcon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport type { FC, HTMLAttributes } from \"react\"\nimport { cloneElement, useRef } from \"react\"\nimport { useAutocompleteContext } from \"./use-autocomplete\"\n\nexport type AutocompleteIconProps = HTMLUIProps<\"div\">\n\nexport const AutocompleteIcon = forwardRef<AutocompleteIconProps, \"div\">(\n ({ className, children, __css, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n cursor: \"pointer\",\n ...styles.icon,\n ...__css,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n maxWidth: \"1em\",\n maxHeight: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-autocomplete__icon\", className)}\n __css={css}\n {...rest}\n >\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n },\n)\n\nexport type AutocompleteClearIconProps = AutocompleteIconProps & {\n disabled?: boolean\n}\n\nexport const AutocompleteClearIcon: FC<AutocompleteClearIconProps> = ({\n className,\n children,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n const { styles } = useAutocompleteContext()\n\n const isDisabled = props.disabled\n\n const rest = useClickable({\n ref,\n isDisabled,\n ...(props as HTMLAttributes<HTMLElement>),\n })\n\n return (\n <AutocompleteIcon\n aria-label=\"Clear value\"\n className={cx(\"ui-autocomplete__icon--clear\", className)}\n __css={styles.clearIcon}\n {...rest}\n >\n {children ?? <CloseIcon w=\"0.5em\" h=\"0.5em\" />}\n </AutocompleteIcon>\n )\n}\n\nexport type AutocompleteItemIconProps = HTMLUIProps<\"span\">\n\nexport const AutocompleteItemIcon = forwardRef<\n AutocompleteItemIconProps,\n \"span\"\n>(({ className, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.itemIcon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-autocomplete__item-icon\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n","import type { CSSUIObject, HTMLUIProps, UIPropGetter } from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { MotionUIPropGetter } from \"@yamada-ui/motion\"\nimport { popoverProperties, type PopoverProps } from \"@yamada-ui/popover\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport { useOutsideClick } from \"@yamada-ui/use-outside-click\"\nimport type { Dict, Union, DOMAttributes } from \"@yamada-ui/utils\"\nimport {\n ariaAttr,\n createContext,\n dataAttr,\n funcAll,\n getEventRelatedTarget,\n handlerAll,\n isArray,\n isContains,\n isHTMLElement,\n mergeRefs,\n omitObject,\n pickObject,\n splitObject,\n useUnmountEffect,\n useUpdateEffect,\n getValidChildren,\n isUndefined,\n} from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n CSSProperties,\n Dispatch,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport type { AutocompleteOptionProps } from \"./\"\nimport { AutocompleteOption, AutocompleteOptionGroup } from \"./\"\n\ntype AutocompleteBaseItem = Omit<\n AutocompleteOptionProps,\n \"value\" | \"children\"\n> & {\n label?: string\n}\n\ntype AutocompleteItemWithValue = AutocompleteBaseItem & {\n value?: string\n}\n\ntype AutocompleteItemWithItems = AutocompleteBaseItem & {\n items?: AutocompleteItemWithValue[]\n}\n\nexport type AutocompleteItem =\n | AutocompleteItemWithValue\n | AutocompleteItemWithItems\n\nconst kanaMap: Record<string, string> = {\n ｶﾞ: \"ガ\",\n ｷﾞ: \"ギ\",\n ｸﾞ: \"グ\",\n ｹﾞ: \"ゲ\",\n ｺﾞ: \"ゴ\",\n ｻﾞ: \"ザ\",\n ｼﾞ: \"ジ\",\n ｽﾞ: \"ズ\",\n ｾﾞ: \"ゼ\",\n ｿﾞ: \"ゾ\",\n ﾀﾞ: \"ダ\",\n ﾁﾞ: \"ヂ\",\n ﾂﾞ: \"ヅ\",\n ﾃﾞ: \"デ\",\n ﾄﾞ: \"ド\",\n ﾊﾞ: \"バ\",\n ﾋﾞ: \"ビ\",\n ﾌﾞ: \"ブ\",\n ﾍﾞ: \"ベ\",\n ﾎﾞ: \"ボ\",\n ﾊﾟ: \"パ\",\n ﾋﾟ: \"ピ\",\n ﾌﾟ: \"プ\",\n ﾍﾟ: \"ペ\",\n ﾎﾟ: \"ポ\",\n ｳﾞ: \"ヴ\",\n ﾜﾞ: \"ヷ\",\n ｦﾞ: \"ヺ\",\n ｱ: \"ア\",\n ｲ: \"イ\",\n ｳ: \"ウ\",\n ｴ: \"エ\",\n ｵ: \"オ\",\n ｶ: \"カ\",\n ｷ: \"キ\",\n ｸ: \"ク\",\n ｹ: \"ケ\",\n ｺ: \"コ\",\n ｻ: \"サ\",\n ｼ: \"シ\",\n ｽ: \"ス\",\n ｾ: \"セ\",\n ｿ: \"ソ\",\n ﾀ: \"タ\",\n ﾁ: \"チ\",\n ﾂ: \"ツ\",\n ﾃ: \"テ\",\n ﾄ: \"ト\",\n ﾅ: \"ナ\",\n ﾆ: \"ニ\",\n ﾇ: \"ヌ\",\n ﾈ: \"ネ\",\n ﾉ: \"ノ\",\n ﾊ: \"ハ\",\n ﾋ: \"ヒ\",\n ﾌ: \"フ\",\n ﾍ: \"ヘ\",\n ﾎ: \"ホ\",\n ﾏ: \"マ\",\n ﾐ: \"ミ\",\n ﾑ: \"ム\",\n ﾒ: \"メ\",\n ﾓ: \"モ\",\n ﾔ: \"ヤ\",\n ﾕ: \"ユ\",\n ﾖ: \"ヨ\",\n ﾗ: \"ラ\",\n ﾘ: \"リ\",\n ﾙ: \"ル\",\n ﾚ: \"レ\",\n ﾛ: \"ロ\",\n ﾜ: \"ワ\",\n ｦ: \"ヲ\",\n ﾝ: \"ン\",\n ｧ: \"ァ\",\n ｨ: \"ィ\",\n ｩ: \"ゥ\",\n ｪ: \"ェ\",\n ｫ: \"ォ\",\n ｯ: \"ッ\",\n ｬ: \"ャ\",\n ｭ: \"ュ\",\n ｮ: \"ョ\",\n \"｡\": \"。\",\n \"､\": \"、\",\n ｰ: \"ー\",\n \"｢\": \"「\",\n \"｣\": \"」\",\n \"･\": \"・\",\n}\n\nconst defaultFormat = (value: string) => {\n value = value.replace(/[！-～]/g, (v) =>\n String.fromCharCode(v.charCodeAt(0) - 0xfee0),\n )\n\n const reg = new RegExp(\"(\" + Object.keys(kanaMap).join(\"|\") + \")\", \"g\")\n\n value = value\n .replace(reg, (v) => kanaMap[v])\n .replace(/ﾞ/g, \"゛\")\n .replace(/ﾟ/g, \"゜\")\n\n value = value.toUpperCase()\n\n return value\n}\n\nconst flattenItems = (\n items: AutocompleteItem[],\n): AutocompleteItemWithValue[] => {\n const filterItems = (\n items: AutocompleteItem[] | AutocompleteItemWithValue[],\n ): (AutocompleteItemWithValue | AutocompleteItemWithValue[])[] =>\n items\n .map((item) => {\n const { isDisabled, isFocusable } = item\n const trulyDisabled = !!isDisabled && !isFocusable\n\n if (trulyDisabled) return\n\n if (\"items\" in item) {\n return filterItems(item.items ?? [])\n } else {\n return item as AutocompleteItemWithValue\n }\n })\n .filter(Boolean) as (\n | AutocompleteItemWithValue\n | AutocompleteItemWithValue[]\n )[]\n\n return filterItems(items).flat(Infinity) as AutocompleteItemWithValue[]\n}\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"autocomplete-item\")\n\nexport const {\n DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n useDescendantsContext: useAutocompleteDescendantsContext,\n useDescendants: useAutocompleteDescendants,\n useDescendant: useAutocompleteDescendant,\n} = createDescendant<HTMLElement>()\n\ntype AutocompleteContext = Omit<\n UseAutocompleteProps,\n \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n> & {\n value: string | string[]\n label: string | string[] | undefined\n inputValue: string\n isHit: boolean\n isEmpty: boolean\n isAllSelected: boolean\n onChange: (newValue: string) => void\n onChangeLabel: (newValue: string, runOmit?: boolean) => void\n pickOptions: (value: string) => void\n rebirthOptions: (runFocus?: boolean) => void\n inputProps: DOMAttributes\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onCreate: () => void\n onFocusFirst: () => void\n onFocusLast: () => void\n onFocusNext: (index?: number) => void\n onFocusPrev: (index?: number) => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n listRef: RefObject<HTMLUListElement>\n inputRef: RefObject<HTMLInputElement>\n formControlProps: Record<string, any>\n styles: Record<string, CSSUIObject>\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n createContext<AutocompleteContext>({\n name: \"AutocompleteContext\",\n errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n })\n\ntype UseAutocompleteBaseProps<T extends string | string[] = string> = Omit<\n PopoverProps,\n | \"initialFocusRef\"\n | \"closeOnButton\"\n | \"trigger\"\n | \"autoFocus\"\n | \"restoreFocus\"\n | \"openDelay\"\n | \"closeDelay\"\n> &\n FormControlOptions & {\n /**\n * The value of the autocomplete.\n */\n value?: T\n /**\n * The initial value of the autocomplete.\n */\n defaultValue?: T\n /**\n * The callback invoked when value state changes.\n */\n onChange?: (value: T) => void\n /**\n * The callback invoked when search input.\n */\n onSearch?: (ev: ChangeEvent<HTMLInputElement>) => void\n /**\n * The callback invoked when autocomplete option created.\n */\n onCreate?: (newItem: AutocompleteItem, newItems: AutocompleteItem[]) => void\n /**\n * Function to format text when search input.\n */\n format?: (value: string) => string\n /**\n * The position to be inserted when the autocomplete option is created.\n *\n * @default 'first'\n */\n insertPositionItem?: Union<\"first\" | \"last\"> | [string, \"first\" | \"last\"]\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n /**\n * The message displayed when the search yields no hits.\n *\n * @default 'No results found'\n */\n emptyMessage?: string\n /**\n * If `true`, enables the creation of autocomplete option.\n *\n * @default false\n */\n allowCreate?: boolean\n /**\n * If `true`, enables the free input.\n */\n allowFree?: boolean\n /**\n * If `true`, the selected item(s) will be excluded from the list.\n *\n * @default false\n */\n omitSelectedValues?: boolean\n /**\n * The maximum selectable value.\n */\n maxSelectValues?: number\n /**\n * Props for select option element.\n */\n optionProps?: Omit<AutocompleteOptionProps, \"value\" | \"children\">\n /**\n * If provided, generate options based on items.\n */\n items?: AutocompleteItem[]\n }\n\nexport type UseAutocompleteProps<T extends string | string[] = string> = Omit<\n HTMLUIProps<\"input\">,\n | keyof UseAutocompleteBaseProps\n | \"list\"\n | \"disabled\"\n | \"required\"\n | \"readOnly\"\n | \"size\"\n> &\n UseAutocompleteBaseProps<T>\n\nexport const useAutocomplete = <T extends string | string[] = string>({\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n onCreate: onCreateProp,\n onSearch: onSearchProp,\n closeOnSelect = true,\n omitSelectedValues = false,\n maxSelectValues,\n closeOnBlur = true,\n closeOnEsc = true,\n allowCreate = false,\n allowFree = false,\n insertPositionItem = \"first\",\n emptyMessage = \"No results found\",\n format = defaultFormat,\n placement = \"bottom-start\",\n duration = 0.2,\n optionProps,\n placeholder,\n items,\n children,\n isOpen: isOpenProp,\n defaultIsOpen,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n ...rest\n}: UseAutocompleteProps<T>) => {\n rest = useFormControlProps(rest)\n\n const { id } = rest\n\n const { \"aria-readonly\": _ariaReadonly, ...formControlProps } = pickObject(\n rest,\n formControlProperties,\n )\n const [containerProps, inputProps] = splitObject<Dict, string>(\n omitObject(rest, [...popoverProperties, \"onKeyDown\", \"onFocus\"]),\n layoutStyleProperties,\n )\n\n const descendants = useAutocompleteDescendants()\n\n const containerRef = useRef<HTMLDivElement>(null)\n const listRef = useRef<HTMLUListElement>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const isComposition = useRef<boolean>(false)\n const prevValue = useRef<T | undefined>(undefined)\n\n const [resolvedItems, setResolvedItems] = useState<\n AutocompleteItem[] | undefined\n >(items ? JSON.parse(JSON.stringify(items)) : undefined)\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n })\n const [label, setLabel] = useState<T | undefined>(undefined)\n const [inputValue, setInputValue] = useState<string>(\"\")\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [isAllSelected, setIsAllSelected] = useState<boolean>(false)\n const [isHit, setIsHit] = useState<boolean>(true)\n const {\n isOpen,\n onOpen: onInternalOpen,\n onClose,\n } = useDisclosure({\n isOpen: isOpenProp,\n defaultIsOpen,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n })\n const isFocused = focusedIndex > -1\n const isCreate = focusedIndex === -2 && allowCreate\n const isMulti = isArray(value)\n const isEmptyValue = !isMulti ? !value : !value.length\n\n const [firstInsertPositionItem, secondInsertPositionItem] = useMemo(() => {\n if (isArray(insertPositionItem)) {\n return insertPositionItem\n } else {\n return [insertPositionItem, \"first\"]\n }\n }, [insertPositionItem])\n\n if (allowCreate && !isUndefined(children)) {\n console.warn(\n `${!isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"}: ${\n !isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"\n } internally prefers 'children'. If 'allowCreate' is true, it will not be reflected correctly. If want to reflect, please set 'items' in props.`,\n )\n }\n\n const selectedValues = descendants.enabledValues(\n ({ node }) => isMulti && value.includes(node.dataset.value ?? \"\"),\n )\n const selectedIndexes = selectedValues.map(({ index }) => index)\n const enabledValues = descendants.enabledValues(\n ({ node, index }) =>\n \"target\" in node.dataset && !selectedIndexes.includes(index),\n )\n\n const validChildren = getValidChildren(children)\n\n const computedChildren = resolvedItems?.map((item, i) => {\n if (\"value\" in item) {\n const { label, value, ...props } = item\n\n return (\n <AutocompleteOption key={i} value={value} {...props}>\n {label}\n </AutocompleteOption>\n )\n } else if (\"items\" in item) {\n const { label, items = [], ...props } = item\n\n return (\n <AutocompleteOptionGroup\n key={i}\n label={label as string}\n {...(props as HTMLUIProps<\"ul\">)}\n >\n {items.map(({ label, value, ...props }, i) => (\n <AutocompleteOption key={i} value={value} {...props}>\n {label}\n </AutocompleteOption>\n ))}\n </AutocompleteOptionGroup>\n )\n }\n })\n\n const isEmpty = !validChildren.length && !computedChildren?.length\n\n const onOpen = useCallback(() => {\n if (formControlProps.disabled || formControlProps.readOnly) return\n\n if (!allowCreate && (isEmpty || isAllSelected)) return\n\n onInternalOpen()\n\n if (inputRef.current) inputRef.current.focus()\n }, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen])\n\n const onFocusFirst = useCallback(() => {\n const id = setTimeout(() => {\n if (isEmpty || isAllSelected) return\n\n const first = descendants.enabledFirstValue(\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!first) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(first.index)\n } else {\n if (selectedIndexes.includes(first.index)) {\n const enabledFirst = enabledValues[0]\n\n setFocusedIndex(enabledFirst.index)\n } else {\n setFocusedIndex(first.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n }, [\n descendants,\n enabledValues,\n isAllSelected,\n isEmpty,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ])\n\n const onFocusLast = useCallback(() => {\n const id = setTimeout(() => {\n if (isEmpty || isAllSelected) return\n\n const last = descendants.enabledLastValue(\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!last) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(last.index)\n } else {\n if (selectedIndexes.includes(last.index)) {\n const enabledLast = enabledValues.reverse()[0]\n\n setFocusedIndex(enabledLast.index)\n } else {\n setFocusedIndex(last.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n }, [\n descendants,\n enabledValues,\n isAllSelected,\n isEmpty,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ])\n\n const onFocusSelected = useCallback(() => {\n const id = setTimeout(() => {\n const values = descendants.enabledValues()\n\n const selected = values.find(({ node }) =>\n !isMulti\n ? node.dataset.value === value\n : value.includes(node.dataset.value ?? \"\"),\n )\n\n if (selected) setFocusedIndex(selected.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, isMulti, value])\n\n const onFocusNext = useCallback(\n (index: number = focusedIndex) => {\n const id = setTimeout(() => {\n const next = descendants.enabledNextValue(\n index,\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!next) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(next.index)\n } else {\n if (selectedIndexes.includes(next.index)) {\n const enabledNext =\n enabledValues.find(({ index }) => next.index < index) ??\n enabledValues[0]\n\n setFocusedIndex(enabledNext.index)\n } else {\n setFocusedIndex(next.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n },\n [\n descendants,\n enabledValues,\n focusedIndex,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ],\n )\n\n const onFocusPrev = useCallback(\n (index: number = focusedIndex) => {\n const id = setTimeout(() => {\n const prev = descendants.enabledPrevValue(\n index,\n ({ node }) => \"target\" in node.dataset,\n )\n\n if (!prev) return\n\n if (!isMulti || !omitSelectedValues) {\n setFocusedIndex(prev.index)\n } else {\n if (selectedIndexes.includes(prev.index)) {\n const enabledPrev =\n enabledValues.reverse().find(({ index }) => index < prev.index) ??\n enabledValues[0]\n\n setFocusedIndex(enabledPrev.index)\n } else {\n setFocusedIndex(prev.index)\n }\n }\n })\n\n timeoutIds.current.add(id)\n },\n [\n descendants,\n enabledValues,\n focusedIndex,\n isMulti,\n omitSelectedValues,\n selectedIndexes,\n ],\n )\n\n const onFocusFirstOrSelected =\n isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected\n const onFocusLastOrSelected =\n isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected\n\n const pickOptions = useCallback(\n (value: string) => {\n const values = descendants.values()\n\n let isHit = false\n let isFocused = false\n\n values.forEach(({ node, index }) => {\n if (format(node.textContent ?? \"\").includes(value)) {\n isHit = true\n\n const isDisabled = \"disabled\" in node.dataset\n\n node.dataset.target = \"\"\n\n if (!isFocused && !isDisabled) {\n isFocused = true\n\n setFocusedIndex(index)\n }\n } else {\n delete node.dataset.target\n }\n })\n\n setIsHit(isHit)\n },\n [descendants, format],\n )\n\n const rebirthOptions = useCallback(\n (runFocus = true) => {\n const values = descendants.values()\n\n values.forEach(({ node }) => {\n node.dataset.target = \"\"\n })\n\n if (runFocus) onFocusFirst()\n\n setIsHit(true)\n },\n [descendants, onFocusFirst],\n )\n\n const getSelectedValues = useCallback(\n (newValues: string | string[]) => {\n const enabledValues = descendants.enabledValues()\n\n const resolvedValues = isArray(newValues) ? newValues : [newValues]\n\n const selectedValues = resolvedValues\n .map((value) => {\n const { node } =\n enabledValues.find(({ node }) => node.dataset.value === value) ?? {}\n\n if (node) {\n const el = Array.from(node.children).find(\n (child) => child.getAttribute(\"data-label\") !== null,\n )\n\n return el?.textContent ?? undefined\n } else {\n return allowFree ? value : undefined\n }\n })\n .filter(Boolean) as string[]\n\n return selectedValues\n },\n [allowFree, descendants],\n )\n\n const onChangeLabel = useCallback(\n (newValue: string, runOmit: boolean = true) => {\n const selectedValues = getSelectedValues(newValue)\n\n setLabel((prev) => {\n if (!isMulti) {\n return selectedValues[0] as T\n } else {\n selectedValues.forEach((selectedValue) => {\n const isSelected =\n isArray(prev) && prev.includes(selectedValue ?? \"\")\n\n if (!isSelected) {\n prev = [...(isArray(prev) ? prev : []), selectedValue] as T\n } else if (runOmit) {\n prev = (\n isArray(prev)\n ? prev.filter((value) => value !== selectedValue)\n : undefined\n ) as T\n }\n })\n\n return prev\n }\n })\n },\n [getSelectedValues, isMulti],\n )\n\n const onChange = useCallback(\n (newValue: string, runRebirth: boolean = true) => {\n setValue((prev) => {\n let next: T\n\n if (!isArray(prev)) {\n next = newValue as T\n } else {\n const isSelected = prev.includes(newValue)\n\n if (!isSelected) {\n next = [...prev, newValue] as T\n } else {\n next = prev.filter((value) => value !== newValue) as T\n }\n }\n\n prevValue.current = next\n return next\n })\n\n const isHit =\n descendants\n .values()\n .filter(({ node }) =>\n format(node.textContent ?? \"\").includes(newValue),\n ).length > 0\n\n onChangeLabel(newValue)\n\n if (allowFree || isHit) setInputValue(\"\")\n\n if (isMulti && runRebirth) rebirthOptions(false)\n },\n [\n allowFree,\n isMulti,\n onChangeLabel,\n rebirthOptions,\n setValue,\n descendants,\n format,\n ],\n )\n\n const onSelect = useCallback(() => {\n let enabledValue = descendants.value(focusedIndex)\n\n if (\"disabled\" in (enabledValue?.node.dataset ?? {}))\n enabledValue = undefined\n\n if (!enabledValue) return\n\n const value = enabledValue.node.dataset.value ?? \"\"\n\n onChange(value)\n\n if (closeOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext()\n }, [\n closeOnSelect,\n descendants,\n focusedIndex,\n omitSelectedValues,\n onChange,\n onClose,\n onFocusNext,\n ])\n\n const onSearch = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!isOpen) onOpen()\n\n onSearchProp?.(ev)\n\n const value = ev.target.value\n const computedValue = format(value)\n\n if (computedValue) {\n pickOptions(computedValue)\n } else {\n rebirthOptions()\n }\n\n setInputValue(value)\n },\n [isOpen, onOpen, format, onSearchProp, pickOptions, rebirthOptions],\n )\n\n const onCompositionStart = useCallback(() => {\n isComposition.current = true\n }, [])\n\n const onCompositionEnd = useCallback(() => {\n isComposition.current = false\n }, [])\n\n const onCreate = useCallback(() => {\n if (!listRef.current) return\n\n const newItem: AutocompleteItem = { label: inputValue, value: inputValue }\n\n let newItems: AutocompleteItem[] = []\n\n if (resolvedItems) newItems = resolvedItems\n\n if (firstInsertPositionItem === \"first\") {\n newItems = [newItem, ...newItems]\n } else if (firstInsertPositionItem === \"last\") {\n newItems = [...newItems, newItem]\n } else {\n const i = newItems.findIndex(\n ({ label }) => label === firstInsertPositionItem,\n )\n\n const targetItem = newItems[i]\n\n if (i !== -1 && \"items\" in targetItem) {\n if (secondInsertPositionItem === \"first\") {\n targetItem.items = [newItem, ...(targetItem.items ?? [])]\n } else {\n targetItem.items = [...(targetItem.items ?? []), newItem]\n }\n\n newItems[i] = targetItem\n } else {\n console.warn(\n `${\n !isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"\n }: '${firstInsertPositionItem}' specified in insertPositionItem does not exist in the option group.`,\n )\n }\n }\n\n setResolvedItems(newItems)\n onChange(inputValue)\n rebirthOptions(false)\n\n const index = flattenItems(newItems).findIndex(\n ({ value }) => value === inputValue,\n )\n\n setFocusedIndex(index)\n\n onCreateProp?.(newItem, newItems)\n }, [\n inputValue,\n resolvedItems,\n firstInsertPositionItem,\n onChange,\n rebirthOptions,\n onCreateProp,\n secondInsertPositionItem,\n isMulti,\n ])\n\n const onClick = useCallback(() => {\n if (isOpen) {\n if (inputRef.current) inputRef.current.focus()\n } else {\n onOpen()\n\n onFocusFirstOrSelected()\n }\n }, [isOpen, onFocusFirstOrSelected, onOpen])\n\n const onFocus = useCallback(() => {\n if (isOpen) return\n\n onOpen()\n\n onFocusFirstOrSelected()\n }, [isOpen, onFocusFirstOrSelected, onOpen])\n\n const onBlur = useCallback(\n (ev: FocusEvent<HTMLDivElement>) => {\n const relatedTarget = getEventRelatedTarget(ev)\n\n if (isContains(containerRef.current, relatedTarget)) return\n\n if (!closeOnBlur && isHit) return\n\n if (allowFree && !!inputValue) onChange(inputValue, false)\n\n setInputValue(\"\")\n\n if (isOpen) onClose()\n },\n [closeOnBlur, isHit, isOpen, inputValue, allowFree, onClose, onChange],\n )\n\n const onDelete = useCallback(() => {\n if (!isMulti) {\n onChange(\"\")\n } else {\n onChange(value[value.length - 1])\n }\n\n if (!isOpen) onFocus()\n }, [isMulti, isOpen, onChange, onFocus, value])\n\n const onClear = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n ev.stopPropagation()\n\n prevValue.current = [] as unknown as T\n setValue([] as unknown as T)\n setLabel(undefined)\n setInputValue(\"\")\n rebirthOptions()\n\n if (isOpen && inputRef.current) inputRef.current.focus()\n },\n [isOpen, setLabel, setInputValue, setValue, rebirthOptions],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (ev.key === \" \") ev.key = ev.code\n\n if (formControlProps.disabled || formControlProps.readOnly) return\n if (isComposition.current) return\n\n const enabledDelete = label === inputValue || !inputValue.length\n\n const actions: Record<string, Function | undefined> = {\n ArrowDown: isFocused\n ? () => onFocusNext()\n : !isOpen\n ? funcAll(onOpen, onFocusFirstOrSelected)\n : undefined,\n ArrowUp: isFocused\n ? () => onFocusPrev()\n : !isOpen\n ? funcAll(onOpen, onFocusLastOrSelected)\n : undefined,\n Space: isCreate\n ? onCreate\n : isFocused\n ? onSelect\n : !isOpen\n ? funcAll(onOpen, onFocusFirstOrSelected)\n : undefined,\n Enter: isCreate\n ? onCreate\n : isFocused\n ? onSelect\n : !isOpen\n ? funcAll(onOpen, onFocusFirstOrSelected)\n : allowFree && isMulti\n ? () => {\n if (inputValue) onChange(inputValue)\n\n setFocusedIndex(0)\n }\n : undefined,\n Home: isOpen ? onFocusFirst : undefined,\n End: isOpen ? onFocusLast : undefined,\n Escape: closeOnEsc ? onClose : undefined,\n Backspace: !isEmptyValue && enabledDelete ? onDelete : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n\n action(ev)\n },\n [\n allowFree,\n formControlProps,\n label,\n inputValue,\n onOpen,\n isFocused,\n isMulti,\n onFocusFirstOrSelected,\n onFocusNext,\n onFocusLastOrSelected,\n onFocusPrev,\n isCreate,\n onCreate,\n onSelect,\n isOpen,\n onFocusFirst,\n onFocusLast,\n closeOnEsc,\n onClose,\n isEmptyValue,\n onDelete,\n onChange,\n ],\n )\n\n useEffect(() => {\n if (!isMulti) return\n\n if (!omitSelectedValues && isUndefined(maxSelectValues)) return\n\n const isAll = value.length > 0 && value.length === descendants.count()\n const isMax = value.length === maxSelectValues\n\n if (isAll || isMax) {\n onClose()\n setIsAllSelected(true)\n } else {\n setIsAllSelected(false)\n }\n }, [\n omitSelectedValues,\n value,\n descendants,\n isMulti,\n onClose,\n maxSelectValues,\n ])\n\n useEffect(() => {\n if (isMulti) {\n if (\n JSON.stringify(prevValue.current ?? []) === JSON.stringify(value ?? [])\n )\n return\n\n const label = getSelectedValues(value)\n\n setLabel(label as T)\n } else {\n if (prevValue.current === value) return\n\n onChangeLabel(value, false)\n }\n }, [isMulti, value, onChangeLabel, getSelectedValues])\n\n useUpdateEffect(() => {\n if (isOpen || allowFree) return\n\n setFocusedIndex(-1)\n setInputValue(\"\")\n }, [isOpen])\n\n useUpdateEffect(() => {\n if (!isHit) setFocusedIndex(-2)\n }, [isHit])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n useOutsideClick({\n ref: containerRef,\n handler: onClose,\n enabled: isOpen && (closeOnBlur || !isHit),\n })\n\n const getPopoverProps = useCallback(\n (props?: PopoverProps): PopoverProps => ({\n matchWidth: true,\n ...rest,\n ...props,\n isOpen,\n onOpen,\n onClose,\n placement,\n duration,\n trigger: \"never\",\n closeOnButton: false,\n closeOnBlur,\n }),\n [duration, closeOnBlur, isOpen, onClose, onOpen, placement, rest],\n )\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ref: mergeRefs(containerRef, ref),\n ...containerProps,\n ...props,\n ...formControlProps,\n onClick: handlerAll(props.onClick, rest.onClick, onClick),\n onBlur: handlerAll(props.onBlur, rest.onBlur, onBlur),\n }),\n\n [containerProps, formControlProps, onBlur, onClick, rest],\n )\n\n const getFieldProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ref,\n tabIndex: -1,\n ...props,\n ...formControlProps,\n placeholder,\n \"data-active\": dataAttr(isOpen),\n \"aria-expanded\": dataAttr(isOpen),\n onFocus: handlerAll(props.onFocus, rest.onFocus, onFocus),\n onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onKeyDown),\n }),\n [formControlProps, placeholder, isOpen, rest, onFocus, onKeyDown],\n )\n\n return {\n id,\n descendants,\n value,\n label,\n inputValue,\n isHit,\n isEmpty,\n computedChildren,\n focusedIndex,\n omitSelectedValues,\n closeOnSelect,\n allowCreate,\n allowFree,\n emptyMessage,\n isOpen,\n isAllSelected,\n listRef,\n inputRef,\n optionProps,\n formControlProps,\n setFocusedIndex,\n onChangeLabel,\n onChange,\n onSearch,\n onCreate,\n onClear,\n onCompositionStart,\n onCompositionEnd,\n pickOptions,\n rebirthOptions,\n onOpen,\n onClose,\n onFocusFirst,\n onFocusLast,\n onFocusSelected,\n onFocusNext,\n onFocusPrev,\n getPopoverProps,\n getContainerProps,\n getFieldProps,\n inputProps,\n }\n}\n\nexport type UseAutocompleteReturn = ReturnType<typeof useAutocomplete>\n\nexport const useAutocompleteInput = () => {\n const {\n id,\n inputRef,\n onSearch,\n onCompositionStart,\n onCompositionEnd,\n isAllSelected,\n formControlProps,\n inputProps,\n isOpen,\n } = useAutocompleteContext()\n\n useUpdateEffect(() => {\n if (isAllSelected && inputRef.current) inputRef.current.blur()\n }, [isAllSelected])\n\n const getInputProps: UIPropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ref: mergeRefs(inputRef, ref),\n ...formControlProps,\n role: \"combobox\",\n \"aria-haspopup\": \"listbox\",\n \"aria-autocomplete\": \"list\",\n \"aria-expanded\": isOpen,\n autoCapitalize: \"none\",\n autoComplete: \"off\",\n spellCheck: \"false\",\n ...inputProps,\n ...props,\n id,\n cursor: formControlProps.readOnly ? \"default\" : \"text\",\n pointerEvents:\n formControlProps.disabled || isAllSelected ? \"none\" : \"auto\",\n tabIndex: isAllSelected ? -1 : 0,\n onChange: handlerAll(props.onChange, onSearch),\n onCompositionStart: handlerAll(\n props.onCompositionStart,\n inputProps.onCompositionStart,\n onCompositionStart,\n ),\n onCompositionEnd: handlerAll(\n props.onCompositionEnd,\n inputProps.onCompositionEnd,\n onCompositionEnd,\n ),\n }),\n [\n isOpen,\n inputProps,\n inputRef,\n formControlProps,\n id,\n isAllSelected,\n onSearch,\n onCompositionStart,\n onCompositionEnd,\n ],\n )\n\n return {\n getInputProps,\n }\n}\n\nexport type UseAutocompleteInputReturn = ReturnType<typeof useAutocompleteInput>\n\nexport const useAutocompleteList = () => {\n const { focusedIndex, isOpen, listRef, rebirthOptions } =\n useAutocompleteContext()\n\n const descendants = useAutocompleteDescendantsContext()\n\n const beforeFocusedIndex = useRef<number>(-1)\n const selectedValue = descendants.value(focusedIndex)\n\n const onAnimationComplete = useCallback(() => {\n if (!isOpen) rebirthOptions(false)\n }, [isOpen, rebirthOptions])\n\n useEffect(() => {\n if (!listRef.current || !selectedValue) return\n\n if (beforeFocusedIndex.current === selectedValue.index) return\n\n const parent = listRef.current\n const child = selectedValue.node\n\n const parentHeight = parent.clientHeight\n const viewTop = parent.scrollTop\n const viewBottom = viewTop + parentHeight\n\n const childHeight = child.clientHeight\n const childTop = child.offsetTop\n const childBottom = childTop + childHeight\n\n const isInView = viewTop <= childTop && childBottom <= viewBottom\n\n const isScrollBottom = beforeFocusedIndex.current < selectedValue.index\n\n if (!isInView) {\n if (childBottom <= parentHeight) {\n listRef.current.scrollTo({ top: 0 })\n } else {\n if (!isScrollBottom) {\n listRef.current.scrollTo({ top: childTop + 1 })\n } else {\n listRef.current.scrollTo({ top: childBottom - parentHeight })\n }\n }\n }\n\n beforeFocusedIndex.current = selectedValue.index\n }, [listRef, selectedValue])\n\n useUpdateEffect(() => {\n if (!isOpen) beforeFocusedIndex.current = -1\n }, [isOpen])\n\n const getListProps: MotionUIPropGetter<\"ul\"> = useCallback(\n (props = {}, ref = null) => ({\n as: \"ul\",\n ref: mergeRefs(listRef, ref),\n role: \"select\",\n tabIndex: -1,\n ...props,\n onAnimationComplete: handlerAll(\n props.onAnimationComplete,\n onAnimationComplete,\n ),\n }),\n [listRef, onAnimationComplete],\n )\n\n return {\n getListProps,\n }\n}\n\nexport type UseAutocompleteOptionGroupProps = HTMLUIProps<\"ul\"> & {\n /**\n * The label of the autocomplete option group.\n */\n label: string\n}\n\nexport const useAutocompleteOptionGroup = ({\n label,\n ...rest\n}: UseAutocompleteOptionGroupProps) => {\n const { value, omitSelectedValues } = useAutocompleteContext()\n\n const isMulti = isArray(value)\n\n const descendants = useAutocompleteDescendantsContext()\n\n const values = descendants.values()\n const selectedValues =\n isMulti && omitSelectedValues\n ? descendants.values(({ node }) =>\n value.includes(node.dataset.value ?? \"\"),\n )\n : []\n const selectedIndexes = selectedValues.map(({ index }) => index)\n const childValues = values.filter(\n ({ node, index }) =>\n node.parentElement?.dataset.label === label &&\n !selectedIndexes.includes(index) &&\n \"target\" in node.dataset,\n )\n\n const isEmpty = !childValues.length\n\n const computedRest = splitObject(rest, layoutStyleProperties)\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n ...computedRest[0],\n style: isEmpty ? style : undefined,\n \"data-label\": label,\n role: \"autocomplete-group-container\",\n }\n },\n [computedRest, isEmpty, label],\n )\n\n const getGroupProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ref,\n ...props,\n ...computedRest[1],\n \"data-label\": label,\n role: \"autocomplete-group\",\n }),\n [computedRest, label],\n )\n\n return {\n label,\n getContainerProps,\n getGroupProps,\n }\n}\n\nexport type UseAutocompleteOptionGroupReturn = ReturnType<\n typeof useAutocompleteOptionGroup\n>\n\nexport type UseAutocompleteOptionProps = Omit<\n HTMLUIProps<\"li\">,\n \"value\" | \"children\"\n> & {\n /**\n * The value of the select option.\n */\n value?: string\n /**\n * The label of the select option.\n */\n children?: string\n /**\n * If `true`, the select option will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the select option will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n const {\n value,\n omitSelectedValues,\n onChange,\n onChangeLabel,\n focusedIndex,\n setFocusedIndex,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n optionProps,\n inputRef,\n onFocusNext,\n } = useAutocompleteContext()\n\n let {\n icon: customIcon,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n children,\n value: optionValue,\n ...computedProps\n } = { ...optionProps, ...props }\n\n const trulyDisabled = !!isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n\n const { index, register, descendants } = useAutocompleteDescendant({\n disabled: trulyDisabled,\n })\n\n const values = descendants.values()\n const frontValues = values.slice(0, index)\n\n const isMulti = isArray(value)\n const isDuplicated = !isMulti\n ? frontValues.some(({ node }) => node.dataset.value === (optionValue ?? \"\"))\n : false\n\n const isSelected =\n !isDuplicated &&\n (!isMulti\n ? (optionValue ?? \"\") === value\n : value.includes(optionValue ?? \"\"))\n const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n ev.stopPropagation()\n\n if (isDisabled) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n if (!isTargetOption(ev.currentTarget)) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n setFocusedIndex(index)\n\n onChange(optionValue ?? \"\")\n\n if (inputRef.current) inputRef.current.focus()\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext(index)\n },\n [\n onFocusNext,\n omitSelectedValues,\n isDisabled,\n optionValue,\n setFocusedIndex,\n index,\n onChange,\n customCloseOnSelect,\n generalCloseOnSelect,\n onClose,\n inputRef,\n ],\n )\n\n useUpdateEffect(() => {\n if (isSelected) onChangeLabel(optionValue ?? \"\", false)\n }, [optionValue])\n\n const getOptionProps: UIPropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref: mergeRefs(itemRef, ref, register),\n ...computedProps,\n ...props,\n role: \"autocomplete-item\",\n tabIndex: -1,\n style:\n !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n \"data-target\": dataAttr(true),\n \"data-value\": optionValue ?? \"\",\n \"data-focus\": dataAttr(isFocused),\n \"data-disabled\": dataAttr(isDisabled),\n \"aria-checked\": ariaAttr(isSelected),\n \"aria-disabled\": ariaAttr(isDisabled),\n onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n }\n },\n [\n optionValue,\n computedProps,\n isDisabled,\n isFocused,\n isSelected,\n isTarget,\n omitSelectedValues,\n onClick,\n register,\n ],\n )\n\n return {\n isSelected,\n isFocused,\n customIcon,\n children,\n getOptionProps,\n }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n const { isHit, onCreate } = useAutocompleteContext()\n\n const getCreateProps: UIPropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit ? style : undefined,\n \"data-focus\": dataAttr(!isHit),\n onClick: handlerAll(props.onClick, onCreate),\n }\n },\n [isHit, onCreate],\n )\n\n return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n const { isHit, isEmpty } = useAutocompleteContext()\n\n const getEmptyProps: UIPropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit && !isEmpty ? style : undefined,\n }\n },\n [isHit, isEmpty],\n )\n\n return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","import_react","import_jsx_runtime","import_jsx_runtime"]}
package/dist/autocomplete-empty.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  AutocompleteEmpty
4
- } from "./chunk-X2KU3OVN.mjs";
4
+ } from "./chunk-22BJGCRM.mjs";
5
5
  export {
6
6
  AutocompleteEmpty
7
7
  };