@yamada-ui/autocomplete 1.6.9-dev-20241213204523 → 1.6.9-dev-20241213210300

package/dist/autocomplete.js

@@ -159,7 +159,7 @@ var useAutocompleteOption = (props) => {
     inputRef,
     omitSelectedValues,
     setFocusedIndex,
-    value,
+    value: selectedValue,
     optionProps,
     onChange,
     onClose,
@@ -167,43 +167,44 @@ var useAutocompleteOption = (props) => {
   } = useAutocompleteContext();
   const uuid = (0, import_react2.useId)();
   const itemRef = (0, import_react2.useRef)(null);
-  let {
-    id,
+  const {
+    id = uuid,
     children,
     closeOnSelect: customCloseOnSelect,
-    disabled,
-    focusable,
-    icon: customIcon,
     isDisabled,
+    disabled = isDisabled,
     isFocusable,
+    focusable = isFocusable,
+    icon: customIcon,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
-  disabled != null ? disabled : disabled = isDisabled;
-  focusable != null ? focusable : focusable = isFocusable;
   const trulyDisabled = !!disabled && !focusable;
   const { descendants, index, register } = useAutocompleteDescendant({
     disabled: trulyDisabled
   });
   const values = descendants.values();
   const frontValues = values.slice(0, index);
-  const isMulti = (0, import_utils3.isArray)(value);
-  const isDuplicated = frontValues.some(
-    ({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")
-  );
-  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 : {});
-  const isFocused = index === focusedIndex;
-  id != null ? id : id = uuid;
-  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 multi = (0, import_utils3.isArray)(selectedValue);
+  const target = "target" in ((_b = (_a = itemRef.current) == null ? void 0 : _a.dataset) != null ? _b : {});
+  const focused = index === focusedIndex;
+  const value = (0, import_react2.useMemo)(() => {
+    let value2 = optionValue;
+    if ((0, import_utils3.isUndefined)(optionValue)) {
+      if ((0, import_utils3.isString)(children) || (0, import_utils3.isNumber)(children)) {
+        value2 = children.toString();
+      } else {
+        console.warn(
+          `${!multi ? "Autocomplete" : "MultiAutocomplete"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        );
+      }
     }
-  }
+    return value2 != null ? value2 : "";
+  }, [children, multi, optionValue]);
+  const duplicated = frontValues.some(
+    ({ node }) => node.dataset.value === value
+  );
+  const selected = !duplicated && (!multi ? value === selectedValue : selectedValue.includes(value));
   const onClick = (0, import_react2.useCallback)(
     (ev) => {
       ev.stopPropagation();
@@ -211,18 +212,18 @@ var useAutocompleteOption = (props) => {
         if (inputRef.current) inputRef.current.focus();
         return;
       }
-      if (!isDuplicated) setFocusedIndex(index);
-      onChange(optionValue != null ? optionValue : "");
+      if (!duplicated) setFocusedIndex(index);
+      onChange(value);
       if (inputRef.current) inputRef.current.focus();
       if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
       if (omitSelectedValues) onFocusNext(index);
     },
     [
-      isDuplicated,
+      duplicated,
       onFocusNext,
       omitSelectedValues,
       disabled,
-      optionValue,
+      value,
       setFocusedIndex,
       index,
       onChange,
@@ -234,7 +235,7 @@ var useAutocompleteOption = (props) => {
   );
   const getOptionProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => {
-      const isHidden = !isTarget || omitSelectedValues && isSelected;
+      const isHidden = !target || omitSelectedValues && selected;
       const style = {
         border: "0px",
         clip: "rect(0px, 0px, 0px, 0px)",
@@ -255,37 +256,37 @@ var useAutocompleteOption = (props) => {
         style: isHidden ? style : void 0,
         "aria-disabled": (0, import_utils3.ariaAttr)(disabled),
         "aria-hidden": (0, import_utils3.ariaAttr)(isHidden),
-        "aria-selected": isSelected,
+        "aria-selected": selected,
         "data-disabled": (0, import_utils3.dataAttr)(disabled),
-        "data-duplicated": (0, import_utils3.dataAttr)(isDuplicated),
-        "data-focus": (0, import_utils3.dataAttr)(isFocused),
+        "data-duplicated": (0, import_utils3.dataAttr)(duplicated),
+        "data-focus": (0, import_utils3.dataAttr)(focused),
         "data-target": (0, import_utils3.dataAttr)(true),
-        "data-value": optionValue != null ? optionValue : "",
+        "data-value": value,
         tabIndex: -1,
         onClick: (0, import_utils3.handlerAll)(computedProps.onClick, props2.onClick, onClick)
       };
     },
     [
       id,
-      isDuplicated,
-      optionValue,
+      duplicated,
+      value,
       computedProps,
       disabled,
-      isFocused,
-      isSelected,
-      isTarget,
+      focused,
+      selected,
+      target,
       omitSelectedValues,
       onClick,
       register
     ]
   );
   return {
+    target,
     children,
     customIcon,
-    isFocused,
-    isSelected,
-    isTarget,
+    focused,
     omitSelectedValues,
+    selected,
     getOptionProps
   };
 };
@@ -605,7 +606,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var AutocompleteOption = (0, import_core5.forwardRef)(
   ({ className, icon, ...rest }, ref) => {
     const { styles } = useAutocompleteContext();
-    const { children, customIcon, isSelected, getOptionProps } = useAutocompleteOption(rest);
+    const { children, customIcon, selected, getOptionProps } = useAutocompleteOption(rest);
     icon != null ? icon : icon = customIcon;
     const css = {
       alignItems: "center",
@@ -627,7 +628,7 @@ var AutocompleteOption = (0, import_core5.forwardRef)(
         __css: css,
         ...getOptionProps({}, ref),
         children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AutocompleteCheckIcon, {}) }) : null,
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AutocompleteItemIcon, { opacity: selected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AutocompleteCheckIcon, {}) }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.span, { style: { flex: 1 }, "data-label": true, children })
         ]
       }