@yamada-ui/autocomplete 1.5.4-next-20241005220055 → 1.6.0-dev-20241011151311

package/dist/use-autocomplete.js

@@ -38,9 +38,9 @@ var import_use_descendant = require("@yamada-ui/use-descendant");
 var import_utils = require("@yamada-ui/utils");
 var {
   DescendantsContextProvider: AutocompleteDescendantsContextProvider,
-  useDescendantsContext: useAutocompleteDescendantsContext,
+  useDescendant: useAutocompleteDescendant,
   useDescendants: useAutocompleteDescendants,
-  useDescendant: useAutocompleteDescendant
+  useDescendantsContext: useAutocompleteDescendantsContext
 } = (0, import_use_descendant.createDescendant)();
 var [AutocompleteProvider, useAutocompleteContext] = (0, import_utils.createContext)({
   name: "AutocompleteContext",
@@ -62,27 +62,27 @@ var AutocompleteIcon = (0, import_core.forwardRef)(
   ({ className, children, __css, ...rest }, ref) => {
     const { styles } = useAutocompleteContext();
     const css = {
-      position: "absolute",
-      top: "50%",
-      transform: "translateY(-50%)",
-      display: "inline-flex",
       alignItems: "center",
+      cursor: "pointer",
+      display: "inline-flex",
       justifyContent: "center",
       pointerEvents: "none",
-      cursor: "pointer",
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
       ...styles.icon,
       ...__css
     };
     const validChildren = (0, import_utils2.getValidChildren)(children);
     const cloneChildren = validChildren.map(
       (child) => (0, import_react.cloneElement)(child, {
-        focusable: false,
-        "aria-hidden": true,
         style: {
-          maxWidth: "1em",
+          color: "currentColor",
           maxHeight: "1em",
-          color: "currentColor"
-        }
+          maxWidth: "1em"
+        },
+        "aria-hidden": true,
+        focusable: false
       })
     );
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -115,11 +115,11 @@ var AutocompleteClearIcon = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     AutocompleteIcon,
     {
-      "aria-label": "Clear value",
       className: (0, import_utils2.cx)("ui-autocomplete__icon--clear", className),
+      "aria-label": "Clear value",
       __css: styles.clearIcon,
       ...rest,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { w: "0.5em", h: "0.5em" })
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { h: "0.5em", w: "0.5em" })
     }
   );
 };
@@ -128,11 +128,11 @@ AutocompleteClearIcon.__ui__ = "AutocompleteClearIcon";
 var AutocompleteItemIcon = (0, import_core.forwardRef)(({ className, ...rest }, ref) => {
   const { styles } = useAutocompleteContext();
   const css = {
-    flexShrink: 0,
-    display: "inline-flex",
-    justifyContent: "center",
     alignItems: "center",
+    display: "inline-flex",
+    flexShrink: 0,
     fontSize: "0.85em",
+    justifyContent: "center",
     ...styles.itemIcon
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -153,41 +153,50 @@ var import_utils3 = require("@yamada-ui/utils");
 var import_react2 = require("react");
 var isTargetOption = (target) => {
   var _a;
-  return (0, import_utils3.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("option"));
+  return (0, import_utils3.isHTMLElement)(target) && !!((_a = target.getAttribute("role")) == null ? void 0 : _a.startsWith("option"));
 };
 var useAutocompleteOption = (props) => {
   var _a, _b;
   const {
-    value,
+    closeOnSelect: generalCloseOnSelect,
+    focusedIndex,
+    inputRef,
     omitSelectedValues,
+    setFocusedIndex,
+    value,
+    optionProps,
     onChange,
     onChangeLabel,
-    focusedIndex,
-    setFocusedIndex,
     onClose,
-    closeOnSelect: generalCloseOnSelect,
-    optionProps,
-    inputRef,
     onFocusNext
   } = useAutocompleteContext();
   const id = (0, import_react2.useId)();
   let {
+    children,
+    closeOnSelect: customCloseOnSelect,
     icon: customIcon,
     isDisabled,
     isFocusable,
-    closeOnSelect: customCloseOnSelect,
-    children,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
   const trulyDisabled = !!isDisabled && !isFocusable;
   const itemRef = (0, import_react2.useRef)(null);
-  const { index, register, descendants } = useAutocompleteDescendant({
+  const { descendants, index, register } = useAutocompleteDescendant({
     disabled: trulyDisabled
   });
   const values = descendants.values();
   const frontValues = values.slice(0, index);
   const isMulti = (0, import_utils3.isArray)(value);
+  if ((0, import_utils3.isUndefined)(optionValue)) {
+    if ((0, import_utils3.isString)(children) || (0, import_utils3.isNumber)(children)) {
+      optionValue = children.toString();
+    } else {
+      console.warn(
+        `${!isMulti ? "Autocomplete" : "MultiAutocomplete"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+      );
+    }
+  }
   const isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
   const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
   const isTarget = "target" in ((_b = (_a = itemRef.current) == null ? void 0 : _a.dataset) != null ? _b : {});
@@ -232,27 +241,27 @@ var useAutocompleteOption = (props) => {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
         height: "1px",
-        width: "1px",
         margin: "-1px",
-        padding: "0px",
         overflow: "hidden",
+        padding: "0px",
+        position: "absolute",
         whiteSpace: "nowrap",
-        position: "absolute"
+        width: "1px"
       };
       return {
-        ref: (0, import_utils3.mergeRefs)(itemRef, ref, register),
         id,
+        ref: (0, import_utils3.mergeRefs)(itemRef, ref, register),
         role: "option",
         ...computedProps,
         ...props2,
-        tabIndex: -1,
         style: !isTarget || omitSelectedValues && isSelected ? style : void 0,
-        "data-target": (0, import_utils3.dataAttr)(true),
-        "data-value": optionValue != null ? optionValue : "",
-        "data-focus": (0, import_utils3.dataAttr)(isFocused),
-        "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
         "aria-checked": isSelected,
         "aria-disabled": (0, import_utils3.ariaAttr)(isDisabled),
+        "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
+        "data-focus": (0, import_utils3.dataAttr)(isFocused),
+        "data-target": (0, import_utils3.dataAttr)(true),
+        "data-value": optionValue != null ? optionValue : "",
+        tabIndex: -1,
         onClick: (0, import_utils3.handlerAll)(computedProps.onClick, props2.onClick, onClick)
       };
     },
@@ -270,10 +279,10 @@ var useAutocompleteOption = (props) => {
     ]
   );
   return {
-    isSelected,
-    isFocused,
-    customIcon,
     children,
+    customIcon,
+    isFocused,
+    isSelected,
     getOptionProps
   };
 };
@@ -283,19 +292,19 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var AutocompleteOption = (0, import_core2.forwardRef)(
   ({ className, icon, ...rest }, ref) => {
     const { styles } = useAutocompleteContext();
-    const { isSelected, customIcon, children, getOptionProps } = useAutocompleteOption(rest);
+    const { children, customIcon, isSelected, getOptionProps } = useAutocompleteOption(rest);
     icon != null ? icon : icon = customIcon;
     const css = {
-      textDecoration: "none",
+      alignItems: "center",
       color: "inherit",
-      userSelect: "none",
       display: "flex",
-      width: "100%",
-      alignItems: "center",
-      textAlign: "start",
       flex: "0 0 auto",
-      outline: 0,
       gap: "0.75rem",
+      outline: 0,
+      textAlign: "start",
+      textDecoration: "none",
+      userSelect: "none",
+      width: "100%",
       ...styles.item
     };
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -314,7 +323,7 @@ var AutocompleteOption = (0, import_core2.forwardRef)(
 );
 AutocompleteOption.displayName = "AutocompleteOption";
 AutocompleteOption.__ui__ = "AutocompleteOption";
-var AutocompleteCheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var AutocompleteCheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { height: "1em", viewBox: "0 0 14 14", width: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
   "polygon",
   {
     fill: "currentColor",
@@ -336,7 +345,7 @@ var useAutocompleteOptionGroup = ({
   label,
   ...rest
 }) => {
-  const { value, omitSelectedValues } = useAutocompleteContext();
+  const { omitSelectedValues, value } = useAutocompleteContext();
   const isMulti = (0, import_utils5.isArray)(value);
   const descendants = useAutocompleteDescendantsContext();
   const values = descendants.values();
@@ -348,7 +357,7 @@ var useAutocompleteOptionGroup = ({
   ) : [];
   const selectedIndexes = selectedValues.map(({ index }) => index);
   const childValues = values.filter(
-    ({ node, index }) => {
+    ({ index, node }) => {
       var _a;
       return ((_a = node.parentElement) == null ? void 0 : _a.dataset.label) === label && !selectedIndexes.includes(index) && "target" in node.dataset;
     }
@@ -361,12 +370,12 @@ var useAutocompleteOptionGroup = ({
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
         height: "1px",
-        width: "1px",
         margin: "-1px",
-        padding: "0px",
         overflow: "hidden",
+        padding: "0px",
+        position: "absolute",
         whiteSpace: "nowrap",
-        position: "absolute"
+        width: "1px"
       };
       return {
         ref,
@@ -401,12 +410,12 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var AutocompleteOptionGroup = (0, import_core4.forwardRef)(
   ({
     className,
+    children,
     color,
     h,
     height,
     minH,
     minHeight,
-    children,
     labelProps,
     ...rest
   }, ref) => {
@@ -422,15 +431,15 @@ var AutocompleteOptionGroup = (0, import_core4.forwardRef)(
           "ui-autocomplete__item--group",
           className
         ),
-        __css: { w: "100%", h: "fit-content", color },
+        __css: { color, h: "fit-content", w: "100%" },
         ...getContainerProps(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_core4.ui.span,
             {
               className: "ui-autocomplete__item__group-label",
-              __css: styles.groupLabel,
               lineClamp: 1,
+              __css: styles.groupLabel,
               ...labelProps,
               children: label
             }
@@ -455,64 +464,79 @@ AutocompleteOptionGroup.__ui__ = "AutocompleteOptionGroup";
 // src/use-autocomplete.tsx
 var import_jsx_runtime4 = require("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",
@@ -527,23 +551,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(
@@ -571,46 +580,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
   } = (0, import_form_control.useFormControlProps)(props);
   const {
@@ -629,8 +638,8 @@ var useAutocomplete = (props) => {
   const prevValue = (0, import_react4.useRef)(void 0);
   const [resolvedItems, setResolvedItems] = (0, import_react4.useState)(items ? JSON.parse(JSON.stringify(items)) : void 0);
   const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-    value: valueProp,
     defaultValue,
+    value: valueProp,
     onChange: onChangeProp
   });
   const [label, setLabel] = (0, import_react4.useState)(void 0);
@@ -640,13 +649,13 @@ var useAutocomplete = (props) => {
   const [isHit, setIsHit] = (0, import_react4.useState)(true);
   const {
     isOpen,
-    onOpen: onInternalOpen,
-    onClose
+    onClose,
+    onOpen: onInternalOpen
   } = (0, import_use_disclosure.useDisclosure)({
-    isOpen: isOpenProp,
     defaultIsOpen,
-    onOpen: onOpenProp,
-    onClose: onCloseProp
+    isOpen: isOpenProp,
+    onClose: onCloseProp,
+    onOpen: onOpenProp
   });
   const isFocused = focusedIndex > -1;
   const isCreate = focusedIndex === -2 && allowCreate;
@@ -672,7 +681,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 = (0, import_utils7.getValidChildren)(children);
   const computedChildren = (0, import_react4.useMemo)(
@@ -681,7 +690,7 @@ var useAutocomplete = (props) => {
         const { label: label2, value: value2, ...props2 } = item;
         return /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(AutocompleteOptionGroup, { label: label2, ...props2, children: items2.map(({ label: label3, value: value2, ...props3 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AutocompleteOption, { value: value2, ...props3, children: label3 }, i2)) }, i);
       }
     }),
@@ -696,6 +705,7 @@ var useAutocomplete = (props) => {
   }, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
   const onFocusFirst = (0, import_react4.useCallback)(() => {
     const id2 = setTimeout(() => {
+      var _a;
       if (isEmpty || isAllSelected) return;
       const first = descendants.enabledFirstValue(
         ({ node }) => "target" in node.dataset
@@ -706,7 +716,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);
         }
@@ -724,6 +734,7 @@ var useAutocomplete = (props) => {
   ]);
   const onFocusLast = (0, import_react4.useCallback)(() => {
     const id2 = setTimeout(() => {
+      var _a;
       if (isEmpty || isAllSelected) return;
       const last = descendants.enabledLastValue(
         ({ node }) => "target" in node.dataset
@@ -734,7 +745,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);
         }
@@ -766,7 +777,7 @@ var useAutocomplete = (props) => {
   const onFocusNext = (0, import_react4.useCallback)(
     (index = focusedIndex) => {
       const id2 = setTimeout(() => {
-        var _a;
+        var _a, _b;
         const next = descendants.enabledNextValue(
           index,
           ({ node }) => "target" in node.dataset
@@ -777,7 +788,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);
           }
@@ -797,7 +808,7 @@ var useAutocomplete = (props) => {
   const onFocusPrev = (0, import_react4.useCallback)(
     (index = focusedIndex) => {
       const id2 = setTimeout(() => {
-        var _a;
+        var _a, _b;
         const prev = descendants.enabledPrevValue(
           index,
           ({ node }) => "target" in node.dataset
@@ -808,7 +819,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);
           }
@@ -832,7 +843,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;
@@ -890,7 +901,7 @@ var useAutocomplete = (props) => {
           return selectedValues2[0];
         } else {
           selectedValues2.forEach((selectedValue) => {
-            const isSelected = (0, import_utils7.isArray)(prev) && prev.includes(selectedValue != null ? selectedValue : "");
+            const isSelected = (0, import_utils7.isArray)(prev) && prev.includes(selectedValue);
             if (!isSelected) {
               prev = [...(0, import_utils7.isArray)(prev) ? prev : [], selectedValue];
             } else if (runOmit) {
@@ -995,7 +1006,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 {
@@ -1079,15 +1090,15 @@ var useAutocomplete = (props) => {
       const actions = {
         ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils7.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
         ArrowUp: isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils7.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
-        Space: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils7.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        Backspace: !isEmptyValue && enabledDelete ? onDelete : void 0,
+        End: isOpen ? onFocusLast : void 0,
         Enter: isCreate ? onCreate : isFocused ? onSelect : !isOpen ? (0, import_utils7.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 ? (0, import_utils7.funcAll)(onOpen, onFocusFirstOrSelected) : void 0
       };
       const action = actions[ev.key];
       if (!action) return;
@@ -1142,7 +1153,7 @@ var useAutocomplete = (props) => {
   (0, import_react4.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);
@@ -1168,34 +1179,34 @@ var useAutocomplete = (props) => {
   });
   (0, import_use_outside_click.useOutsideClick)({
     ref: containerRef,
-    handler: onClose,
-    enabled: isOpen && (closeOnBlur || !isHit)
+    enabled: isOpen && (closeOnBlur || !isHit),
+    handler: onClose
   });
   const getPopoverProps = (0, import_react4.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,
@@ -1226,8 +1237,8 @@ var useAutocomplete = (props) => {
       ...containerProps,
       ...props2,
       ...formControlProps,
-      onClick: (0, import_utils7.handlerAll)(props2.onClick, rest.onClick, onClick),
-      onBlur: (0, import_utils7.handlerAll)(props2.onBlur, rest.onBlur, onBlur)
+      onBlur: (0, import_utils7.handlerAll)(props2.onBlur, rest.onBlur, onBlur),
+      onClick: (0, import_utils7.handlerAll)(props2.onClick, rest.onClick, onClick)
     }),
     [containerProps, formControlProps, onBlur, onClick, rest]
   );
@@ -1237,9 +1248,9 @@ var useAutocomplete = (props) => {
       tabIndex: -1,
       ...props2,
       ...formControlProps,
-      placeholder,
-      "data-active": (0, import_utils7.dataAttr)(isOpen),
       "aria-expanded": (0, import_utils7.dataAttr)(isOpen),
+      "data-active": (0, import_utils7.dataAttr)(isOpen),
+      placeholder,
       onFocus: (0, import_utils7.handlerAll)(props2.onFocus, onFocusProp, onFocus),
       onKeyDown: (0, import_utils7.handlerAll)(props2.onKeyDown, onKeyDownProp, onKeyDown)
     }),
@@ -1255,61 +1266,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();
   (0, import_utils7.useUpdateEffect)(() => {
@@ -1321,14 +1332,14 @@ var useAutocompleteInput = () => {
       return {
         ref: (0, import_utils7.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,
@@ -1337,15 +1348,15 @@ var useAutocompleteInput = () => {
         pointerEvents: formControlProps.disabled || isAllSelected ? "none" : "auto",
         tabIndex: isAllSelected ? -1 : 0,
         onChange: (0, import_utils7.handlerAll)(props.onChange, onSearch),
-        onCompositionStart: (0, import_utils7.handlerAll)(
-          props.onCompositionStart,
-          inputProps.onCompositionStart,
-          onCompositionStart
-        ),
         onCompositionEnd: (0, import_utils7.handlerAll)(
           props.onCompositionEnd,
           inputProps.onCompositionEnd,
           onCompositionEnd
+        ),
+        onCompositionStart: (0, import_utils7.handlerAll)(
+          props.onCompositionStart,
+          inputProps.onCompositionStart,
+          onCompositionStart
         )
       };
     },