@yamada-ui/autocomplete 1.5.4-next-20241005220055 → 1.5.4-next-20241008193728

package/dist/{chunk-OLOU5HFC.mjs → chunk-BGZIX6SN.mjs}

@@ -1,15 +1,15 @@
 "use client"
 import {
   AutocompleteOptionGroup
-} from "./chunk-6F3LT7J6.mjs";
+} from "./chunk-4SBNPEK7.mjs";
 import {
   AutocompleteOption
-} from "./chunk-S2HFYJVI.mjs";
+} from "./chunk-WFLZPB35.mjs";
 import {
   useAutocompleteContext,
   useAutocompleteDescendants,
   useAutocompleteDescendantsContext
-} from "./chunk-JPUKYLBW.mjs";
+} from "./chunk-WDQYM4FP.mjs";
 
 // src/use-autocomplete.tsx
 import { layoutStyleProperties } from "@yamada-ui/core";
@@ -24,78 +24,93 @@ import {
   dataAttr,
   funcAll,
   getEventRelatedTarget,
+  getValidChildren,
   handlerAll,
   isArray,
   isContains,
+  isUndefined,
   mergeRefs,
   pickObject,
   splitObject,
   useUnmountEffect,
-  useUpdateEffect,
-  getValidChildren,
-  isUndefined
+  useUpdateEffect
 } from "@yamada-ui/utils";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var kanaMap = {
-  \uFF76\uFF9E: "\u30AC",
-  \uFF77\uFF9E: "\u30AE",
-  \uFF78\uFF9E: "\u30B0",
-  \uFF79\uFF9E: "\u30B2",
-  \uFF7A\uFF9E: "\u30B4",
-  \uFF7B\uFF9E: "\u30B6",
-  \uFF7C\uFF9E: "\u30B8",
-  \uFF7D\uFF9E: "\u30BA",
-  \uFF7E\uFF9E: "\u30BC",
-  \uFF7F\uFF9E: "\u30BE",
-  \uFF80\uFF9E: "\u30C0",
-  \uFF81\uFF9E: "\u30C2",
-  \uFF82\uFF9E: "\u30C5",
-  \uFF83\uFF9E: "\u30C7",
-  \uFF84\uFF9E: "\u30C9",
-  \uFF8A\uFF9E: "\u30D0",
-  \uFF8B\uFF9E: "\u30D3",
-  \uFF8C\uFF9E: "\u30D6",
-  \uFF8D\uFF9E: "\u30D9",
-  \uFF8E\uFF9E: "\u30DC",
-  \uFF8A\uFF9F: "\u30D1",
-  \uFF8B\uFF9F: "\u30D4",
-  \uFF8C\uFF9F: "\u30D7",
-  \uFF8D\uFF9F: "\u30DA",
-  \uFF8E\uFF9F: "\u30DD",
-  \uFF73\uFF9E: "\u30F4",
-  \uFF9C\uFF9E: "\u30F7",
+  "\uFF61": "\u3002",
+  "\uFF62": "\u300C",
+  "\uFF63": "\u300D",
+  "\uFF64": "\u3001",
+  "\uFF65": "\u30FB",
+  \uFF66: "\u30F2",
   \uFF66\uFF9E: "\u30FA",
+  \uFF67: "\u30A1",
+  \uFF68: "\u30A3",
+  \uFF69: "\u30A5",
+  \uFF6A: "\u30A7",
+  \uFF6B: "\u30A9",
+  \uFF6C: "\u30E3",
+  \uFF6D: "\u30E5",
+  \uFF6E: "\u30E7",
+  \uFF6F: "\u30C3",
+  \uFF70: "\u30FC",
   \uFF71: "\u30A2",
   \uFF72: "\u30A4",
   \uFF73: "\u30A6",
+  \uFF73\uFF9E: "\u30F4",
   \uFF74: "\u30A8",
   \uFF75: "\u30AA",
   \uFF76: "\u30AB",
+  \uFF76\uFF9E: "\u30AC",
   \uFF77: "\u30AD",
+  \uFF77\uFF9E: "\u30AE",
   \uFF78: "\u30AF",
+  \uFF78\uFF9E: "\u30B0",
   \uFF79: "\u30B1",
+  \uFF79\uFF9E: "\u30B2",
   \uFF7A: "\u30B3",
+  \uFF7A\uFF9E: "\u30B4",
   \uFF7B: "\u30B5",
+  \uFF7B\uFF9E: "\u30B6",
   \uFF7C: "\u30B7",
+  \uFF7C\uFF9E: "\u30B8",
   \uFF7D: "\u30B9",
+  \uFF7D\uFF9E: "\u30BA",
   \uFF7E: "\u30BB",
+  \uFF7E\uFF9E: "\u30BC",
   \uFF7F: "\u30BD",
+  \uFF7F\uFF9E: "\u30BE",
   \uFF80: "\u30BF",
+  \uFF80\uFF9E: "\u30C0",
   \uFF81: "\u30C1",
+  \uFF81\uFF9E: "\u30C2",
   \uFF82: "\u30C4",
+  \uFF82\uFF9E: "\u30C5",
   \uFF83: "\u30C6",
+  \uFF83\uFF9E: "\u30C7",
   \uFF84: "\u30C8",
+  \uFF84\uFF9E: "\u30C9",
   \uFF85: "\u30CA",
   \uFF86: "\u30CB",
   \uFF87: "\u30CC",
   \uFF88: "\u30CD",
   \uFF89: "\u30CE",
   \uFF8A: "\u30CF",
+  \uFF8A\uFF9E: "\u30D0",
+  \uFF8A\uFF9F: "\u30D1",
   \uFF8B: "\u30D2",
+  \uFF8B\uFF9E: "\u30D3",
+  \uFF8B\uFF9F: "\u30D4",
   \uFF8C: "\u30D5",
+  \uFF8C\uFF9E: "\u30D6",
+  \uFF8C\uFF9F: "\u30D7",
   \uFF8D: "\u30D8",
+  \uFF8D\uFF9E: "\u30D9",
+  \uFF8D\uFF9F: "\u30DA",
   \uFF8E: "\u30DB",
+  \uFF8E\uFF9E: "\u30DC",
+  \uFF8E\uFF9F: "\u30DD",
   \uFF8F: "\u30DE",
   \uFF90: "\u30DF",
   \uFF91: "\u30E0",
@@ -110,23 +125,8 @@ var kanaMap = {
   \uFF9A: "\u30EC",
   \uFF9B: "\u30ED",
   \uFF9C: "\u30EF",
-  \uFF66: "\u30F2",
-  \uFF9D: "\u30F3",
-  \uFF67: "\u30A1",
-  \uFF68: "\u30A3",
-  \uFF69: "\u30A5",
-  \uFF6A: "\u30A7",
-  \uFF6B: "\u30A9",
-  \uFF6F: "\u30C3",
-  \uFF6C: "\u30E3",
-  \uFF6D: "\u30E5",
-  \uFF6E: "\u30E7",
-  "\uFF61": "\u3002",
-  "\uFF64": "\u3001",
-  \uFF70: "\u30FC",
-  "\uFF62": "\u300C",
-  "\uFF63": "\u300D",
-  "\uFF65": "\u30FB"
+  \uFF9C\uFF9E: "\u30F7",
+  \uFF9D: "\u30F3"
 };
 var defaultFormat = (value) => {
   value = value.replace(
@@ -154,46 +154,46 @@ var flattenItems = (items) => {
 };
 var useAutocomplete = (props) => {
   const {
-    value: valueProp,
-    defaultValue,
-    onChange: onChangeProp,
-    onCreate: onCreateProp,
-    onSearch: onSearchProp,
-    closeOnSelect = true,
-    omitSelectedValues = false,
-    maxSelectValues,
     allowCreate = false,
     allowFree = false,
-    insertPositionItem = "first",
-    emptyMessage = "No results found",
-    format = defaultFormat,
-    optionProps,
-    placeholder,
-    onKeyDown: onKeyDownProp,
-    isOpen: isOpenProp,
-    defaultIsOpen,
-    onOpen: onOpenProp,
-    onClose: onCloseProp,
+    animation,
+    boundary,
+    children,
+    closeDelay,
     closeOnBlur = true,
     closeOnEsc = true,
-    openDelay,
-    closeDelay,
+    closeOnSelect = true,
+    defaultIsOpen,
+    defaultValue,
+    duration = 0.2,
+    emptyMessage = "No results found",
+    eventListeners,
+    flip,
+    format = defaultFormat,
+    gutter,
+    insertPositionItem = "first",
     isLazy,
+    isOpen: isOpenProp,
+    items,
     lazyBehavior,
-    animation,
-    duration = 0.2,
+    matchWidth = true,
+    maxSelectValues,
+    modifiers,
     offset,
-    gutter,
+    omitSelectedValues = false,
+    openDelay,
+    placeholder,
+    placement = "bottom-start",
     preventOverflow,
-    flip,
-    matchWidth = true,
-    boundary,
-    eventListeners,
     strategy,
-    placement = "bottom-start",
-    modifiers,
-    items,
-    children,
+    value: valueProp,
+    optionProps,
+    onChange: onChangeProp,
+    onClose: onCloseProp,
+    onCreate: onCreateProp,
+    onKeyDown: onKeyDownProp,
+    onOpen: onOpenProp,
+    onSearch: onSearchProp,
     ...rest
   } = useFormControlProps(props);
   const {
@@ -212,8 +212,8 @@ var useAutocomplete = (props) => {
   const prevValue = useRef(void 0);
   const [resolvedItems, setResolvedItems] = useState(items ? JSON.parse(JSON.stringify(items)) : void 0);
   const [value, setValue] = useControllableState({
-    value: valueProp,
     defaultValue,
+    value: valueProp,
     onChange: onChangeProp
   });
   const [label, setLabel] = useState(void 0);
@@ -223,13 +223,13 @@ var useAutocomplete = (props) => {
   const [isHit, setIsHit] = useState(true);
   const {
     isOpen,
-    onOpen: onInternalOpen,
-    onClose
+    onClose,
+    onOpen: onInternalOpen
   } = useDisclosure({
-    isOpen: isOpenProp,
     defaultIsOpen,
-    onOpen: onOpenProp,
-    onClose: onCloseProp
+    isOpen: isOpenProp,
+    onClose: onCloseProp,
+    onOpen: onOpenProp
   });
   const isFocused = focusedIndex > -1;
   const isCreate = focusedIndex === -2 && allowCreate;
@@ -255,7 +255,7 @@ var useAutocomplete = (props) => {
   );
   const selectedIndexes = selectedValues.map(({ index }) => index);
   const enabledValues = descendants.enabledValues(
-    ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
+    ({ index, node }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = getValidChildren(children);
   const computedChildren = useMemo(
@@ -264,7 +264,7 @@ var useAutocomplete = (props) => {
         const { label: label2, value: value2, ...props2 } = item;
         return /* @__PURE__ */ jsx(AutocompleteOption, { value: value2, ...props2, children: label2 }, i);
       } else if ("items" in item) {
-        const { label: label2, items: items2 = [], ...props2 } = item;
+        const { items: items2 = [], label: label2, ...props2 } = item;
         return /* @__PURE__ */ jsx(AutocompleteOptionGroup, { label: label2, ...props2, children: items2.map(({ label: label3, value: value2, ...props3 }, i2) => /* @__PURE__ */ jsx(AutocompleteOption, { value: value2, ...props3, children: label3 }, i2)) }, i);
       }
     }),
@@ -279,6 +279,7 @@ var useAutocomplete = (props) => {
   }, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
   const onFocusFirst = useCallback(() => {
     const id2 = setTimeout(() => {
+      var _a;
       if (isEmpty || isAllSelected) return;
       const first = descendants.enabledFirstValue(
         ({ node }) => "target" in node.dataset
@@ -289,7 +290,7 @@ var useAutocomplete = (props) => {
       } else {
         if (selectedIndexes.includes(first.index)) {
           const enabledFirst = enabledValues[0];
-          setFocusedIndex(enabledFirst.index);
+          setFocusedIndex((_a = enabledFirst == null ? void 0 : enabledFirst.index) != null ? _a : -1);
         } else {
           setFocusedIndex(first.index);
         }
@@ -307,6 +308,7 @@ var useAutocomplete = (props) => {
   ]);
   const onFocusLast = useCallback(() => {
     const id2 = setTimeout(() => {
+      var _a;
       if (isEmpty || isAllSelected) return;
       const last = descendants.enabledLastValue(
         ({ node }) => "target" in node.dataset
@@ -317,7 +319,7 @@ var useAutocomplete = (props) => {
       } else {
         if (selectedIndexes.includes(last.index)) {
           const enabledLast = enabledValues.reverse()[0];
-          setFocusedIndex(enabledLast.index);
+          setFocusedIndex((_a = enabledLast == null ? void 0 : enabledLast.index) != null ? _a : -1);
         } else {
           setFocusedIndex(last.index);
         }
@@ -349,7 +351,7 @@ var useAutocomplete = (props) => {
   const onFocusNext = useCallback(
     (index = focusedIndex) => {
       const id2 = setTimeout(() => {
-        var _a;
+        var _a, _b;
         const next = descendants.enabledNextValue(
           index,
           ({ node }) => "target" in node.dataset
@@ -360,7 +362,7 @@ var useAutocomplete = (props) => {
         } else {
           if (selectedIndexes.includes(next.index)) {
             const enabledNext = (_a = enabledValues.find(({ index: index2 }) => next.index < index2)) != null ? _a : enabledValues[0];
-            setFocusedIndex(enabledNext.index);
+            setFocusedIndex((_b = enabledNext == null ? void 0 : enabledNext.index) != null ? _b : -1);
           } else {
             setFocusedIndex(next.index);
           }
@@ -380,7 +382,7 @@ var useAutocomplete = (props) => {
   const onFocusPrev = useCallback(
     (index = focusedIndex) => {
       const id2 = setTimeout(() => {
-        var _a;
+        var _a, _b;
         const prev = descendants.enabledPrevValue(
           index,
           ({ node }) => "target" in node.dataset
@@ -391,7 +393,7 @@ var useAutocomplete = (props) => {
         } else {
           if (selectedIndexes.includes(prev.index)) {
             const enabledPrev = (_a = enabledValues.reverse().find(({ index: index2 }) => index2 < prev.index)) != null ? _a : enabledValues[0];
-            setFocusedIndex(enabledPrev.index);
+            setFocusedIndex((_b = enabledPrev == null ? void 0 : enabledPrev.index) != null ? _b : -1);
           } else {
             setFocusedIndex(prev.index);
           }
@@ -415,7 +417,7 @@ var useAutocomplete = (props) => {
       const values = descendants.values();
       let isHit2 = false;
       let isFocused2 = false;
-      values.forEach(({ node, index }) => {
+      values.forEach(({ index, node }) => {
         var _a;
         if (format((_a = node.textContent) != null ? _a : "").includes(value2)) {
           isHit2 = true;
@@ -473,7 +475,7 @@ var useAutocomplete = (props) => {
           return selectedValues2[0];
         } else {
           selectedValues2.forEach((selectedValue) => {
-            const isSelected = isArray(prev) && prev.includes(selectedValue != null ? selectedValue : "");
+            const isSelected = isArray(prev) && prev.includes(selectedValue);
             if (!isSelected) {
               prev = [...isArray(prev) ? prev : [], selectedValue];
             } else if (runOmit) {
@@ -578,7 +580,7 @@ var useAutocomplete = (props) => {
         ({ label: label2 }) => label2 === firstInsertPositionItem
       );
       const targetItem = newItems[i];
-      if (i !== -1 && "items" in targetItem) {
+      if (i !== -1 && targetItem && "items" in targetItem) {
         if (secondInsertPositionItem === "first") {
           targetItem.items = [newItem, ...(_a = targetItem.items) != null ? _a : []];
         } else {
@@ -662,15 +664,15 @@ var useAutocomplete = (props) => {
       const actions = {
         ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : void 0,
         ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? funcAll(onOpen, onFocusLastOrSelected) : void 0,
-        Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : void 0,
+        Backspace: !isEmptyValue && enabledDelete ? onDelete : void 0,
+        End: isOpen ? onFocusLast : void 0,
         Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : allowFree && isMulti ? () => {
           if (inputValue) onChange(inputValue);
           setFocusedIndex(0);
         } : void 0,
-        Home: isOpen ? onFocusFirst : void 0,
-        End: isOpen ? onFocusLast : void 0,
         Escape: closeOnEsc ? onClose : void 0,
-        Backspace: !isEmptyValue && enabledDelete ? onDelete : void 0
+        Home: isOpen ? onFocusFirst : void 0,
+        Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? funcAll(onOpen, onFocusFirstOrSelected) : void 0
       };
       const action = actions[ev.key];
       if (!action) return;
@@ -725,7 +727,7 @@ var useAutocomplete = (props) => {
   useEffect(() => {
     var _a;
     if (isMulti) {
-      if (JSON.stringify((_a = prevValue.current) != null ? _a : []) === JSON.stringify(value != null ? value : []))
+      if (JSON.stringify((_a = prevValue.current) != null ? _a : []) === JSON.stringify(value))
         return;
       const label2 = getSelectedValues(value);
       setLabel(label2);
@@ -751,34 +753,34 @@ var useAutocomplete = (props) => {
   });
   useOutsideClick({
     ref: containerRef,
-    handler: onClose,
-    enabled: isOpen && (closeOnBlur || !isHit)
+    enabled: isOpen && (closeOnBlur || !isHit),
+    handler: onClose
   });
   const getPopoverProps = useCallback(
     (props2) => ({
-      closeOnBlur,
-      openDelay,
+      animation,
+      boundary,
       closeDelay,
+      closeOnBlur,
+      duration,
+      eventListeners,
+      flip,
+      gutter,
       isLazy,
       lazyBehavior,
-      animation,
-      duration,
+      matchWidth,
+      modifiers,
       offset,
-      gutter,
+      openDelay,
+      placement,
       preventOverflow,
-      flip,
-      matchWidth,
-      boundary,
-      eventListeners,
       strategy,
-      placement,
-      modifiers,
       ...props2,
-      trigger: "never",
       closeOnButton: false,
       isOpen,
-      onOpen,
-      onClose
+      trigger: "never",
+      onClose,
+      onOpen
     }),
     [
       closeOnBlur,
@@ -809,8 +811,8 @@ var useAutocomplete = (props) => {
       ...containerProps,
       ...props2,
       ...formControlProps,
-      onClick: handlerAll(props2.onClick, rest.onClick, onClick),
-      onBlur: handlerAll(props2.onBlur, rest.onBlur, onBlur)
+      onBlur: handlerAll(props2.onBlur, rest.onBlur, onBlur),
+      onClick: handlerAll(props2.onClick, rest.onClick, onClick)
     }),
     [containerProps, formControlProps, onBlur, onClick, rest]
   );
@@ -820,9 +822,9 @@ var useAutocomplete = (props) => {
       tabIndex: -1,
       ...props2,
       ...formControlProps,
-      placeholder,
-      "data-active": dataAttr(isOpen),
       "aria-expanded": dataAttr(isOpen),
+      "data-active": dataAttr(isOpen),
+      placeholder,
       onFocus: handlerAll(props2.onFocus, onFocusProp, onFocus),
       onKeyDown: handlerAll(props2.onKeyDown, onKeyDownProp, onKeyDown)
     }),
@@ -838,61 +840,61 @@ var useAutocomplete = (props) => {
   );
   return {
     id,
-    descendants,
-    value,
-    label,
-    inputValue,
-    isHit,
-    isEmpty,
-    computedChildren,
-    focusedIndex,
-    omitSelectedValues,
-    closeOnSelect,
     allowCreate,
     allowFree,
+    closeOnSelect,
+    computedChildren,
+    descendants,
     emptyMessage,
-    isOpen,
+    focusedIndex,
+    inputRef,
+    inputValue,
     isAllSelected,
+    isEmpty,
+    isHit,
+    isOpen,
+    label,
     listRef,
-    inputRef,
-    optionProps,
-    formControlProps,
+    omitSelectedValues,
+    pickOptions,
+    rebirthOptions,
     setFocusedIndex,
-    onChangeLabel,
+    value,
+    formControlProps,
+    getContainerProps,
+    getFieldProps,
+    getPopoverProps,
+    inputProps,
+    optionProps,
     onChange,
-    onSearch,
-    onCreate,
+    onChangeLabel,
     onClear,
-    onCompositionStart,
-    onCompositionEnd,
-    pickOptions,
-    rebirthOptions,
-    onOpen,
     onClose,
+    onCompositionEnd,
+    onCompositionStart,
+    onCreate,
     onFocusFirst,
     onFocusLast,
-    onFocusSelected,
     onFocusNext,
     onFocusPrev,
-    getPopoverProps,
-    getContainerProps,
-    getFieldProps,
-    inputProps
+    onFocusSelected,
+    onOpen,
+    onSearch
   };
 };
 var useAutocompleteInput = () => {
   const {
     id,
+    focusedIndex,
     inputRef,
-    onSearch,
-    onCompositionStart,
-    onCompositionEnd,
     isAllSelected,
+    isOpen,
+    listRef,
     formControlProps,
     inputProps,
-    isOpen,
-    focusedIndex,
-    listRef
+    onCompositionEnd,
+    onCompositionStart,
+    onSearch
   } = useAutocompleteContext();
   const { value } = useAutocompleteDescendantsContext();
   useUpdateEffect(() => {
@@ -904,14 +906,14 @@ var useAutocompleteInput = () => {
       return {
         ref: mergeRefs(inputRef, ref),
         ...formControlProps,
-        role: "combobox",
-        "aria-haspopup": "listbox",
-        "aria-autocomplete": "list",
-        "aria-expanded": isOpen,
         "aria-activedescendant": (_a = value(focusedIndex)) == null ? void 0 : _a.node.id,
+        "aria-autocomplete": "list",
         "aria-controls": (_b = listRef.current) == null ? void 0 : _b.id,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
         autoCapitalize: "none",
         autoComplete: "off",
+        role: "combobox",
         spellCheck: "false",
         ...inputProps,
         ...props,
@@ -920,15 +922,15 @@ var useAutocompleteInput = () => {
         pointerEvents: formControlProps.disabled || isAllSelected ? "none" : "auto",
         tabIndex: isAllSelected ? -1 : 0,
         onChange: handlerAll(props.onChange, onSearch),
-        onCompositionStart: handlerAll(
-          props.onCompositionStart,
-          inputProps.onCompositionStart,
-          onCompositionStart
-        ),
         onCompositionEnd: handlerAll(
           props.onCompositionEnd,
           inputProps.onCompositionEnd,
           onCompositionEnd
+        ),
+        onCompositionStart: handlerAll(
+          props.onCompositionStart,
+          inputProps.onCompositionStart,
+          onCompositionStart
         )
       };
     },
@@ -956,4 +958,4 @@ export {
   useAutocomplete,
   useAutocompleteInput
 };
-//# sourceMappingURL=chunk-OLOU5HFC.mjs.map
+//# sourceMappingURL=chunk-BGZIX6SN.mjs.map