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

package/dist/index.js

@@ -178,13 +178,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
   });
@@ -210,7 +214,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;
       }
@@ -224,7 +228,7 @@ var useAutocompleteOption = (props) => {
       isDuplicated,
       onFocusNext,
       omitSelectedValues,
-      isDisabled,
+      disabled,
       optionValue,
       setFocusedIndex,
       index,
@@ -256,10 +260,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),
@@ -273,7 +277,7 @@ var useAutocompleteOption = (props) => {
       isDuplicated,
       optionValue,
       computedProps,
-      isDisabled,
+      disabled,
       isFocused,
       isSelected,
       isTarget,
@@ -456,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);
@@ -494,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
   };
 };
 
@@ -531,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;
@@ -541,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,
@@ -890,8 +901,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 : []);
@@ -902,6 +913,7 @@ var flattenItems = (items) => {
   return filterItems(items).flat(Infinity);
 };
 var useAutocomplete = (props) => {
+  var _a;
   const {
     allowCreate = false,
     allowFree = false,
@@ -945,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);
@@ -980,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);
@@ -998,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) => {
@@ -1035,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
@@ -1047,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,
@@ -1064,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
@@ -1076,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,
@@ -1093,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
@@ -1118,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,
@@ -1138,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
@@ -1149,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,
@@ -1175,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 = "";
@@ -1209,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
@@ -1247,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 : "";
@@ -1287,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];
@@ -1303,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];
         }
@@ -1460,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)({
@@ -1531,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,
@@ -1540,6 +1554,7 @@ var useAutocomplete = (props) => {
       onKeyDown: (0, import_utils11.handlerAll)(props2.onKeyDown, onKeyDownProp, onKeyDown)
     }),
     [
+      activedescendantId,
       formControlProps,
       placeholder,
       isOpen,
@@ -1550,7 +1565,6 @@ var useAutocomplete = (props) => {
     ]
   );
   return {
-    id,
     allowCreate,
     allowFree,
     children: children != null ? children : computedChildren,
@@ -1565,7 +1579,6 @@ var useAutocomplete = (props) => {
     isHit,
     isOpen,
     label,
-    listRef,
     omitSelectedValues,
     pickOptions,
     rebirthOptions,
@@ -1593,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]);
@@ -1618,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),
@@ -1647,13 +1645,9 @@ var useAutocompleteInput = () => {
       };
     },
     [
-      listId,
-      activedescendantId,
-      isOpen,
       inputProps,
       inputRef,
       formControlProps,
-      id,
       isAllSelected,
       onSearch,
       onCompositionStart,
@@ -1828,6 +1822,7 @@ var MultiAutocomplete = (0, import_core10.forwardRef)(
     );
     let {
       className,
+      clearable,
       closeOnSelect = false,
       color,
       component,
@@ -1874,6 +1869,7 @@ var MultiAutocomplete = (0, import_core10.forwardRef)(
     });
     h != null ? h : h = height;
     minH != null ? minH : minH = minHeight;
+    clearable != null ? clearable : clearable = isClearable;
     const css = {
       color,
       h: "fit-content",
@@ -1918,7 +1914,7 @@ var MultiAutocomplete = (0, import_core10.forwardRef)(
                         ...getFieldProps(fieldProps, ref)
                       }
                     ),
-                    isClearable && value.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    clearable && value.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       AutocompleteClearIcon,
                       {
                         ...clearIconProps,