@yamada-ui/autocomplete 1.6.5-next-20241123050941 → 1.6.6-dev-20241123052407

package/dist/use-autocomplete.js

@@ -175,13 +175,17 @@ var useAutocompleteOption = (props) => {
     id,
     children,
     closeOnSelect: customCloseOnSelect,
+    disabled,
+    focusable,
     icon: customIcon,
     isDisabled,
     isFocusable,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
-  const trulyDisabled = !!isDisabled && !isFocusable;
+  disabled != null ? disabled : disabled = isDisabled;
+  focusable != null ? focusable : focusable = isFocusable;
+  const trulyDisabled = !!disabled && !focusable;
   const { descendants, index, register } = useAutocompleteDescendant({
     disabled: trulyDisabled
   });
@@ -207,7 +211,7 @@ var useAutocompleteOption = (props) => {
   const onClick = (0, import_react2.useCallback)(
     (ev) => {
       ev.stopPropagation();
-      if (isDisabled || !isTargetOption(ev.currentTarget)) {
+      if (disabled || !isTargetOption(ev.currentTarget)) {
         if (inputRef.current) inputRef.current.focus();
         return;
       }
@@ -221,7 +225,7 @@ var useAutocompleteOption = (props) => {
       isDuplicated,
       onFocusNext,
       omitSelectedValues,
-      isDisabled,
+      disabled,
       optionValue,
       setFocusedIndex,
       index,
@@ -253,10 +257,10 @@ var useAutocompleteOption = (props) => {
         ...props2,
         id,
         style: isHidden ? style : void 0,
-        "aria-disabled": (0, import_utils3.ariaAttr)(isDisabled),
+        "aria-disabled": (0, import_utils3.ariaAttr)(disabled),
         "aria-hidden": (0, import_utils3.ariaAttr)(isHidden),
         "aria-selected": isSelected,
-        "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
+        "data-disabled": (0, import_utils3.dataAttr)(disabled),
         "data-duplicated": (0, import_utils3.dataAttr)(isDuplicated),
         "data-focus": (0, import_utils3.dataAttr)(isFocused),
         "data-target": (0, import_utils3.dataAttr)(true),
@@ -270,7 +274,7 @@ var useAutocompleteOption = (props) => {
       isDuplicated,
       optionValue,
       computedProps,
-      isDisabled,
+      disabled,
       isFocused,
       isSelected,
       isTarget,
@@ -584,8 +588,8 @@ var defaultFormat = (value) => {
 var flattenItems = (items) => {
   const filterItems = (items2) => items2.map((item) => {
     var _a;
-    const { isDisabled, isFocusable } = item;
-    const trulyDisabled = !!isDisabled && !isFocusable;
+    const { disabled, focusable } = item;
+    const trulyDisabled = !!disabled && !focusable;
     if (trulyDisabled) return;
     if ("items" in item) {
       return filterItems((_a = item.items) != null ? _a : []);
@@ -596,6 +600,7 @@ var flattenItems = (items) => {
   return filterItems(items).flat(Infinity);
 };
 var useAutocomplete = (props) => {
+  var _a;
   const {
     allowCreate = false,
     allowFree = false,
@@ -639,16 +644,8 @@ var useAutocomplete = (props) => {
     onSearch: onSearchProp,
     ...rest
   } = (0, import_form_control.useFormControlProps)(props);
-  const {
-    "aria-readonly": _ariaReadonly,
-    onFocus: onFocusProp,
-    ...formControlProps
-  } = (0, import_utils7.pickObject)(rest, import_form_control.formControlProperties);
-  const [containerProps, inputProps] = (0, import_utils7.splitObject)(rest, import_core5.layoutStyleProperties);
-  const { id } = rest;
   const descendants = useAutocompleteDescendants();
   const containerRef = (0, import_react4.useRef)(null);
-  const listRef = (0, import_react4.useRef)(null);
   const inputRef = (0, import_react4.useRef)(null);
   const timeoutIds = (0, import_react4.useRef)(/* @__PURE__ */ new Set([]));
   const isComposition = (0, import_react4.useRef)(false);
@@ -674,6 +671,12 @@ var useAutocomplete = (props) => {
     onClose: onCloseProp,
     onOpen: onOpenProp
   });
+  const {
+    "aria-readonly": _ariaReadonly,
+    onFocus: onFocusProp,
+    ...formControlProps
+  } = (0, import_utils7.pickObject)(rest, import_form_control.formControlProperties);
+  const [containerProps, inputProps] = (0, import_utils7.splitObject)(rest, import_core5.layoutStyleProperties);
   const isFocused = focusedIndex > -1;
   const isCreate = focusedIndex === -2 && allowCreate;
   const isMulti = (0, import_utils7.isArray)(value);
@@ -692,14 +695,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_utils7.getValidChildren)(children);
   const computedChildren = (0, import_react4.useMemo)(
     () => resolvedItems == null ? void 0 : resolvedItems.map((item, index) => {
@@ -729,8 +733,8 @@ var useAutocomplete = (props) => {
     if (inputRef.current) inputRef.current.focus();
   }, [allowCreate, formControlProps, isAllSelected, isEmpty, onInternalOpen]);
   const onFocusFirst = (0, import_react4.useCallback)(() => {
-    const id2 = setTimeout(() => {
-      var _a;
+    const id = setTimeout(() => {
+      var _a2;
       if (isEmpty || isAllSelected) return;
       const first = descendants.enabledFirstValue(
         ({ node }) => "target" in node.dataset
@@ -741,13 +745,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,
@@ -758,8 +762,8 @@ var useAutocomplete = (props) => {
     selectedIndexes
   ]);
   const onFocusLast = (0, import_react4.useCallback)(() => {
-    const id2 = setTimeout(() => {
-      var _a;
+    const id = setTimeout(() => {
+      var _a2;
       if (isEmpty || isAllSelected) return;
       const last = descendants.enabledLastValue(
         ({ node }) => "target" in node.dataset
@@ -770,13 +774,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,
@@ -787,22 +791,22 @@ var useAutocomplete = (props) => {
     selectedIndexes
   ]);
   const onFocusSelected = (0, import_react4.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_react4.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
@@ -812,14 +816,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,
@@ -832,8 +836,8 @@ var useAutocomplete = (props) => {
   );
   const onFocusPrev = (0, import_react4.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
@@ -843,14 +847,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,
@@ -869,8 +873,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 = "";
@@ -903,8 +907,8 @@ var useAutocomplete = (props) => {
       if (!values.length) return;
       const resolvedValues = (0, import_utils7.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
@@ -941,9 +945,9 @@ var useAutocomplete = (props) => {
     [isMulti, rebirthOptions, setValue]
   );
   const onSelect = (0, import_react4.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 : "";
@@ -981,8 +985,7 @@ var useAutocomplete = (props) => {
     isComposition.current = false;
   }, []);
   const onCreate = (0, import_react4.useCallback)(() => {
-    var _a, _b;
-    if (!listRef.current) return;
+    var _a2, _b;
     const newItem = { label: inputValue, value: inputValue };
     let newItems = [];
     if (resolvedItems) newItems = [...resolvedItems];
@@ -997,7 +1000,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];
         }
@@ -1154,7 +1157,7 @@ var useAutocomplete = (props) => {
     setResolvedItems(items ? JSON.parse(JSON.stringify(items)) : void 0);
   }, [items]);
   (0, import_utils7.useUnmountEffect)(() => {
-    timeoutIds.current.forEach((id2) => clearTimeout(id2));
+    timeoutIds.current.forEach((id) => clearTimeout(id));
     timeoutIds.current.clear();
   });
   (0, import_use_outside_click.useOutsideClick)({
@@ -1225,6 +1228,10 @@ var useAutocomplete = (props) => {
   const getFieldProps = (0, import_react4.useCallback)(
     (props2 = {}, ref = null) => ({
       ref,
+      "aria-activedescendant": activedescendantId,
+      "aria-autocomplete": "list",
+      "aria-haspopup": "listbox",
+      role: "combobox",
       tabIndex: -1,
       ...props2,
       ...formControlProps,
@@ -1234,6 +1241,7 @@ var useAutocomplete = (props) => {
       onKeyDown: (0, import_utils7.handlerAll)(props2.onKeyDown, onKeyDownProp, onKeyDown)
     }),
     [
+      activedescendantId,
       formControlProps,
       placeholder,
       isOpen,
@@ -1244,7 +1252,6 @@ var useAutocomplete = (props) => {
     ]
   );
   return {
-    id,
     allowCreate,
     allowFree,
     children: children != null ? children : computedChildren,
@@ -1259,7 +1266,6 @@ var useAutocomplete = (props) => {
     isHit,
     isOpen,
     label,
-    listRef,
     omitSelectedValues,
     pickOptions,
     rebirthOptions,
@@ -1287,23 +1293,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_utils7.useUpdateEffect)(() => {
     if (isAllSelected && inputRef.current) inputRef.current.blur();
   }, [isAllSelected]);
@@ -1312,19 +1310,12 @@ var useAutocompleteInput = () => {
       return {
         ref: (0, import_utils7.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_utils7.handlerAll)(props.onChange, onSearch),
@@ -1341,13 +1332,9 @@ var useAutocompleteInput = () => {
       };
     },
     [
-      listId,
-      activedescendantId,
-      isOpen,
       inputProps,
       inputRef,
       formControlProps,
-      id,
       isAllSelected,
       onSearch,
       onCompositionStart,