@yamada-ui/autocomplete 1.6.5-next-20241119123334 → 1.6.5

package/dist/index.js

@@ -460,9 +460,9 @@ var import_utils7 = require("@yamada-ui/utils");
 var import_utils6 = require("@yamada-ui/utils");
 var import_react3 = require("react");
 var useAutocompleteList = () => {
-  const { focusedIndex, isOpen, listRef, rebirthOptions, value } = useAutocompleteContext();
+  const { focusedIndex, isOpen, rebirthOptions, value } = useAutocompleteContext();
   const descendants = useAutocompleteDescendantsContext();
-  const uuid = (0, import_react3.useId)();
+  const listRef = (0, import_react3.useRef)(null);
   const beforeFocusedIndex = (0, import_react3.useRef)(-1);
   const selectedValue = descendants.value(focusedIndex);
   const isMulti = (0, import_utils6.isArray)(value);
@@ -498,21 +498,31 @@ var useAutocompleteList = () => {
   (0, import_utils6.useUpdateEffect)(() => {
     if (!isOpen) beforeFocusedIndex.current = -1;
   }, [isOpen]);
+  const getContainerProps = (0, import_react3.useCallback)(
+    (props = {}, ref = null) => ({
+      ref,
+      "aria-multiselectable": (0, import_utils6.ariaAttr)(isMulti),
+      role: "listbox",
+      ...props,
+      onAnimationComplete: (0, import_utils6.handlerAll)(
+        props.onAnimationComplete,
+        onAnimationComplete
+      )
+    }),
+    [isMulti, onAnimationComplete]
+  );
   const getListProps = (0, import_react3.useCallback)(
-    ({ id, ...props } = {}, ref = null) => ({
-      id: id != null ? id : uuid,
+    (props = {}, ref = null) => ({
       ref: (0, import_utils6.mergeRefs)(listRef, ref),
-      "aria-multiselectable": (0, import_utils6.ariaAttr)(isMulti),
       position: "relative",
-      role: "listbox",
       tabIndex: -1,
       ...props
     }),
-    [listRef, uuid, isMulti]
+    [listRef]
   );
   return {
-    getListProps,
-    onAnimationComplete
+    getContainerProps,
+    getListProps
   };
 };
 
@@ -535,7 +545,7 @@ var AutocompleteList = (0, import_core4.forwardRef)(
   }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const { styles } = useAutocompleteContext();
-    const { getListProps, onAnimationComplete } = useAutocompleteList();
+    const { getContainerProps, getListProps } = useAutocompleteList();
     width != null ? width : width = w;
     width != null ? width : width = (_c = (_a = styles.list) == null ? void 0 : _a.width) != null ? _c : (_b = styles.list) == null ? void 0 : _b.w;
     minWidth != null ? minWidth : minWidth = minW;
@@ -545,16 +555,13 @@ var AutocompleteList = (0, import_core4.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       import_popover.PopoverContent,
       {
+        as: "div",
         className: "ui-autocomplete__popover",
         maxWidth,
         minWidth,
         width,
         __css: { ...styles.content, maxWidth, minWidth, width },
-        ...contentProps,
-        onAnimationComplete: (0, import_utils7.handlerAll)(
-          contentProps == null ? void 0 : contentProps.onAnimationComplete,
-          onAnimationComplete
-        ),
+        ...getContainerProps(contentProps),
         children: [
           header ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             import_core4.ui.header,
@@ -906,6 +913,7 @@ var flattenItems = (items) => {
   return filterItems(items).flat(Infinity);
 };
 var useAutocomplete = (props) => {
+  var _a;
   const {
     allowCreate = false,
     allowFree = false,
@@ -949,16 +957,8 @@ var useAutocomplete = (props) => {
     onSearch: onSearchProp,
     ...rest
   } = (0, import_form_control.useFormControlProps)(props);
-  const {
-    "aria-readonly": _ariaReadonly,
-    onFocus: onFocusProp,
-    ...formControlProps
-  } = (0, import_utils11.pickObject)(rest, import_form_control.formControlProperties);
-  const [containerProps, inputProps] = (0, import_utils11.splitObject)(rest, import_core8.layoutStyleProperties);
-  const { id } = rest;
   const descendants = useAutocompleteDescendants();
   const containerRef = (0, import_react5.useRef)(null);
-  const listRef = (0, import_react5.useRef)(null);
   const inputRef = (0, import_react5.useRef)(null);
   const timeoutIds = (0, import_react5.useRef)(/* @__PURE__ */ new Set([]));
   const isComposition = (0, import_react5.useRef)(false);
@@ -984,6 +984,12 @@ var useAutocomplete = (props) => {
     onClose: onCloseProp,
     onOpen: onOpenProp
   });
+  const {
+    "aria-readonly": _ariaReadonly,
+    onFocus: onFocusProp,
+    ...formControlProps
+  } = (0, import_utils11.pickObject)(rest, import_form_control.formControlProperties);
+  const [containerProps, inputProps] = (0, import_utils11.splitObject)(rest, import_core8.layoutStyleProperties);
   const isFocused = focusedIndex > -1;
   const isCreate = focusedIndex === -2 && allowCreate;
   const isMulti = (0, import_utils11.isArray)(value);
@@ -1002,14 +1008,15 @@ var useAutocomplete = (props) => {
   }
   const selectedValues = descendants.enabledValues(
     ({ node }) => {
-      var _a;
-      return isMulti && value.includes((_a = node.dataset.value) != null ? _a : "");
+      var _a2;
+      return isMulti && value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
     }
   );
   const selectedIndexes = selectedValues.map(({ index }) => index);
   const enabledValues = descendants.enabledValues(
     ({ index, node }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
+  const activedescendantId = (_a = descendants.value(focusedIndex)) == null ? void 0 : _a.node.id;
   const validChildren = (0, import_utils11.getValidChildren)(children);
   const computedChildren = (0, import_react5.useMemo)(
     () => resolvedItems == null ? void 0 : resolvedItems.map((item, index) => {
@@ -1039,8 +1046,8 @@ var useAutocomplete = (props) => {
     if (inputRef.current) inputRef.current.focus();
   }, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
   const onFocusFirst = (0, import_react5.useCallback)(() => {
-    const id2 = setTimeout(() => {
-      var _a;
+    const id = setTimeout(() => {
+      var _a2;
       if (isEmpty || isAllSelected) return;
       const first = descendants.enabledFirstValue(
         ({ node }) => "target" in node.dataset
@@ -1051,13 +1058,13 @@ var useAutocomplete = (props) => {
       } else {
         if (selectedIndexes.includes(first.index)) {
           const enabledFirst = enabledValues[0];
-          setFocusedIndex((_a = enabledFirst == null ? void 0 : enabledFirst.index) != null ? _a : -1);
+          setFocusedIndex((_a2 = enabledFirst == null ? void 0 : enabledFirst.index) != null ? _a2 : -1);
         } else {
           setFocusedIndex(first.index);
         }
       }
     });
-    timeoutIds.current.add(id2);
+    timeoutIds.current.add(id);
   }, [
     descendants,
     enabledValues,
@@ -1068,8 +1075,8 @@ var useAutocomplete = (props) => {
     selectedIndexes
   ]);
   const onFocusLast = (0, import_react5.useCallback)(() => {
-    const id2 = setTimeout(() => {
-      var _a;
+    const id = setTimeout(() => {
+      var _a2;
       if (isEmpty || isAllSelected) return;
       const last = descendants.enabledLastValue(
         ({ node }) => "target" in node.dataset
@@ -1080,13 +1087,13 @@ var useAutocomplete = (props) => {
       } else {
         if (selectedIndexes.includes(last.index)) {
           const enabledLast = enabledValues.reverse()[0];
-          setFocusedIndex((_a = enabledLast == null ? void 0 : enabledLast.index) != null ? _a : -1);
+          setFocusedIndex((_a2 = enabledLast == null ? void 0 : enabledLast.index) != null ? _a2 : -1);
         } else {
           setFocusedIndex(last.index);
         }
       }
     });
-    timeoutIds.current.add(id2);
+    timeoutIds.current.add(id);
   }, [
     descendants,
     enabledValues,
@@ -1097,22 +1104,22 @@ var useAutocomplete = (props) => {
     selectedIndexes
   ]);
   const onFocusSelected = (0, import_react5.useCallback)(() => {
-    const id2 = setTimeout(() => {
+    const id = setTimeout(() => {
       const values = descendants.enabledValues();
       const selected = values.find(
         ({ node }) => {
-          var _a;
-          return !isMulti ? node.dataset.value === value : value.includes((_a = node.dataset.value) != null ? _a : "");
+          var _a2;
+          return !isMulti ? node.dataset.value === value : value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
         }
       );
       if (selected) setFocusedIndex(selected.index);
     });
-    timeoutIds.current.add(id2);
+    timeoutIds.current.add(id);
   }, [descendants, isMulti, value]);
   const onFocusNext = (0, import_react5.useCallback)(
     (index = focusedIndex) => {
-      const id2 = setTimeout(() => {
-        var _a, _b;
+      const id = setTimeout(() => {
+        var _a2, _b;
         const next = descendants.enabledNextValue(
           index,
           ({ node }) => "target" in node.dataset
@@ -1122,14 +1129,14 @@ var useAutocomplete = (props) => {
           setFocusedIndex(next.index);
         } else {
           if (selectedIndexes.includes(next.index)) {
-            const enabledNext = (_a = enabledValues.find(({ index: index2 }) => next.index < index2)) != null ? _a : enabledValues[0];
+            const enabledNext = (_a2 = enabledValues.find(({ index: index2 }) => next.index < index2)) != null ? _a2 : enabledValues[0];
             setFocusedIndex((_b = enabledNext == null ? void 0 : enabledNext.index) != null ? _b : -1);
           } else {
             setFocusedIndex(next.index);
           }
         }
       });
-      timeoutIds.current.add(id2);
+      timeoutIds.current.add(id);
     },
     [
       descendants,
@@ -1142,8 +1149,8 @@ var useAutocomplete = (props) => {
   );
   const onFocusPrev = (0, import_react5.useCallback)(
     (index = focusedIndex) => {
-      const id2 = setTimeout(() => {
-        var _a, _b;
+      const id = setTimeout(() => {
+        var _a2, _b;
         const prev = descendants.enabledPrevValue(
           index,
           ({ node }) => "target" in node.dataset
@@ -1153,14 +1160,14 @@ var useAutocomplete = (props) => {
           setFocusedIndex(prev.index);
         } else {
           if (selectedIndexes.includes(prev.index)) {
-            const enabledPrev = (_a = enabledValues.reverse().find(({ index: index2 }) => index2 < prev.index)) != null ? _a : enabledValues[0];
+            const enabledPrev = (_a2 = enabledValues.reverse().find(({ index: index2 }) => index2 < prev.index)) != null ? _a2 : enabledValues[0];
             setFocusedIndex((_b = enabledPrev == null ? void 0 : enabledPrev.index) != null ? _b : -1);
           } else {
             setFocusedIndex(prev.index);
           }
         }
       });
-      timeoutIds.current.add(id2);
+      timeoutIds.current.add(id);
     },
     [
       descendants,
@@ -1179,8 +1186,8 @@ var useAutocomplete = (props) => {
       let isHit2 = false;
       let isFocused2 = false;
       values.forEach(({ index, node }) => {
-        var _a;
-        if (format((_a = node.textContent) != null ? _a : "").includes(value2)) {
+        var _a2;
+        if (format((_a2 = node.textContent) != null ? _a2 : "").includes(value2)) {
           isHit2 = true;
           const isDisabled = "disabled" in node.dataset;
           node.dataset.target = "";
@@ -1213,8 +1220,8 @@ var useAutocomplete = (props) => {
       if (!values.length) return;
       const resolvedValues = (0, import_utils11.isArray)(newValue) ? newValue : [newValue];
       const selectedLabel = resolvedValues.map((value2) => {
-        var _a, _b;
-        const { node } = (_a = values.find(({ node: node2 }) => node2.dataset.value === value2)) != null ? _a : {};
+        var _a2, _b;
+        const { node } = (_a2 = values.find(({ node: node2 }) => node2.dataset.value === value2)) != null ? _a2 : {};
         if (node) {
           const { textContent } = (_b = Array.from(node.children).find(
             (child) => child.getAttribute("data-label") !== null
@@ -1251,9 +1258,9 @@ var useAutocomplete = (props) => {
     [isMulti, rebirthOptions, setValue]
   );
   const onSelect = (0, import_react5.useCallback)(() => {
-    var _a, _b;
+    var _a2, _b;
     let enabledValue = descendants.value(focusedIndex);
-    if ("disabled" in ((_a = enabledValue == null ? void 0 : enabledValue.node.dataset) != null ? _a : {}))
+    if ("disabled" in ((_a2 = enabledValue == null ? void 0 : enabledValue.node.dataset) != null ? _a2 : {}))
       enabledValue = void 0;
     if (!enabledValue) return;
     const value2 = (_b = enabledValue.node.dataset.value) != null ? _b : "";
@@ -1291,8 +1298,7 @@ var useAutocomplete = (props) => {
     isComposition.current = false;
   }, []);
   const onCreate = (0, import_react5.useCallback)(() => {
-    var _a, _b;
-    if (!listRef.current) return;
+    var _a2, _b;
     const newItem = { label: inputValue, value: inputValue };
     let newItems = [];
     if (resolvedItems) newItems = [...resolvedItems];
@@ -1307,7 +1313,7 @@ var useAutocomplete = (props) => {
       const targetItem = newItems[i];
       if (i !== -1 && targetItem && "items" in targetItem) {
         if (secondInsertPositionItem === "first") {
-          targetItem.items = [newItem, ...(_a = targetItem.items) != null ? _a : []];
+          targetItem.items = [newItem, ...(_a2 = targetItem.items) != null ? _a2 : []];
         } else {
           targetItem.items = [...(_b = targetItem.items) != null ? _b : [], newItem];
         }
@@ -1464,7 +1470,7 @@ var useAutocomplete = (props) => {
     setResolvedItems(items ? JSON.parse(JSON.stringify(items)) : void 0);
   }, [items]);
   (0, import_utils11.useUnmountEffect)(() => {
-    timeoutIds.current.forEach((id2) => clearTimeout(id2));
+    timeoutIds.current.forEach((id) => clearTimeout(id));
     timeoutIds.current.clear();
   });
   (0, import_use_outside_click.useOutsideClick)({
@@ -1535,6 +1541,10 @@ var useAutocomplete = (props) => {
   const getFieldProps = (0, import_react5.useCallback)(
     (props2 = {}, ref = null) => ({
       ref,
+      "aria-activedescendant": activedescendantId,
+      "aria-autocomplete": "list",
+      "aria-haspopup": "listbox",
+      role: "combobox",
       tabIndex: -1,
       ...props2,
       ...formControlProps,
@@ -1544,6 +1554,7 @@ var useAutocomplete = (props) => {
       onKeyDown: (0, import_utils11.handlerAll)(props2.onKeyDown, onKeyDownProp, onKeyDown)
     }),
     [
+      activedescendantId,
       formControlProps,
       placeholder,
       isOpen,
@@ -1554,7 +1565,6 @@ var useAutocomplete = (props) => {
     ]
   );
   return {
-    id,
     allowCreate,
     allowFree,
     children: children != null ? children : computedChildren,
@@ -1569,7 +1579,6 @@ var useAutocomplete = (props) => {
     isHit,
     isOpen,
     label,
-    listRef,
     omitSelectedValues,
     pickOptions,
     rebirthOptions,
@@ -1597,23 +1606,15 @@ var useAutocomplete = (props) => {
   };
 };
 var useAutocompleteInput = () => {
-  var _a, _b;
   const {
-    id,
-    focusedIndex,
     inputRef,
     isAllSelected,
-    isOpen,
-    listRef,
     formControlProps,
     inputProps,
     onCompositionEnd,
     onCompositionStart,
     onSearch
   } = useAutocompleteContext();
-  const descendants = useAutocompleteDescendantsContext();
-  const activedescendantId = (_a = descendants.value(focusedIndex)) == null ? void 0 : _a.node.id;
-  const listId = (_b = listRef.current) == null ? void 0 : _b.id;
   (0, import_utils11.useUpdateEffect)(() => {
     if (isAllSelected && inputRef.current) inputRef.current.blur();
   }, [isAllSelected]);
@@ -1622,19 +1623,12 @@ var useAutocompleteInput = () => {
       return {
         ref: (0, import_utils11.mergeRefs)(inputRef, ref),
         ...formControlProps,
-        "aria-activedescendant": activedescendantId,
-        "aria-autocomplete": "list",
-        "aria-controls": listId,
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
         autoCapitalize: "none",
         autoComplete: "off",
-        role: "combobox",
         spellCheck: "false",
         tabIndex: isAllSelected ? -1 : 0,
         ...inputProps,
         ...props,
-        id,
         cursor: formControlProps.readOnly ? "default" : "text",
         pointerEvents: formControlProps.disabled || isAllSelected ? "none" : "auto",
         onChange: (0, import_utils11.handlerAll)(props.onChange, onSearch),
@@ -1651,13 +1645,9 @@ var useAutocompleteInput = () => {
       };
     },
     [
-      listId,
-      activedescendantId,
-      isOpen,
       inputProps,
       inputRef,
       formControlProps,
-      id,
       isAllSelected,
       onSearch,
       onCompositionStart,