@yamada-ui/autocomplete 1.6.0-dev-20241011151311 → 1.6.0-dev-20241011162311

package/dist/index.mjs

@@ -1,29 +1,29 @@
 "use client"
 import {
   MultiAutocomplete
-} from "./chunk-7LZUXESV.mjs";
+} from "./chunk-HUY7Q3WA.mjs";
 import {
   Autocomplete
-} from "./chunk-Q33EMTO2.mjs";
-import "./chunk-WERCEZNJ.mjs";
+} from "./chunk-OY5JVCQQ.mjs";
+import "./chunk-352YZTOO.mjs";
 import {
   AutocompleteCreate
-} from "./chunk-K5HCHHCJ.mjs";
+} from "./chunk-J6UKIKNL.mjs";
 import {
   AutocompleteEmpty
-} from "./chunk-2HJUFFCU.mjs";
-import "./chunk-VTBUO5SK.mjs";
-import "./chunk-TR4X4EEG.mjs";
+} from "./chunk-PKRO525W.mjs";
+import "./chunk-WJ4P4B2E.mjs";
+import "./chunk-X2PFHBZY.mjs";
 import {
   AutocompleteOptionGroup
-} from "./chunk-4SBNPEK7.mjs";
-import "./chunk-67X7JKWL.mjs";
+} from "./chunk-WNN655FX.mjs";
+import "./chunk-7QON6ZHO.mjs";
 import {
   AutocompleteOption
-} from "./chunk-AIBJWPRA.mjs";
-import "./chunk-6OLHNK7O.mjs";
-import "./chunk-V6YCG642.mjs";
-import "./chunk-WDQYM4FP.mjs";
+} from "./chunk-KWIJUSLC.mjs";
+import "./chunk-ZXALWDKQ.mjs";
+import "./chunk-6OTUOEYS.mjs";
+import "./chunk-ZNO5RUVT.mjs";
 export {
   Autocomplete,
   AutocompleteCreate,

package/dist/multi-autocomplete.d.mts

@@ -9,7 +9,6 @@ import { AutocompleteIconProps } from './autocomplete-icon.mjs';
 import { AutocompleteListProps } from './autocomplete-list.mjs';
 import { UseAutocompleteProps } from './use-autocomplete.mjs';
 import '@yamada-ui/use-descendant';
-import 'react/jsx-runtime';
 import '@yamada-ui/form-control';
 import '@yamada-ui/popover';
 import '@yamada-ui/utils';

package/dist/multi-autocomplete.d.ts

@@ -9,7 +9,6 @@ import { AutocompleteIconProps } from './autocomplete-icon.js';
 import { AutocompleteListProps } from './autocomplete-list.js';
 import { UseAutocompleteProps } from './use-autocomplete.js';
 import '@yamada-ui/use-descendant';
-import 'react/jsx-runtime';
 import '@yamada-ui/form-control';
 import '@yamada-ui/popover';
 import '@yamada-ui/utils';

package/dist/multi-autocomplete.js

@@ -155,7 +155,7 @@ var isTargetOption = (target) => {
 var useAutocompleteOption = (props) => {
   var _a, _b;
   const {
-    closeOnSelect: generalCloseOnSelect,
+    closeOnSelect,
     focusedIndex,
     inputRef,
     omitSelectedValues,
@@ -163,7 +163,6 @@ var useAutocompleteOption = (props) => {
     value,
     optionProps,
     onChange,
-    onChangeLabel,
     onClose,
     onFocusNext
   } = useAutocompleteContext();
@@ -194,28 +193,27 @@ var useAutocompleteOption = (props) => {
       );
     }
   }
-  const isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
+  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;
   const onClick = (0, import_react2.useCallback)(
     (ev) => {
       ev.stopPropagation();
-      if (isDisabled) {
-        if (inputRef.current) inputRef.current.focus();
-        return;
-      }
-      if (!isTargetOption(ev.currentTarget)) {
+      if (isDisabled || !isTargetOption(ev.currentTarget)) {
         if (inputRef.current) inputRef.current.focus();
         return;
       }
-      setFocusedIndex(index);
+      if (!isDuplicated) setFocusedIndex(index);
       onChange(optionValue != null ? optionValue : "");
       if (inputRef.current) inputRef.current.focus();
-      if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect) onClose();
+      if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
       if (omitSelectedValues) onFocusNext(index);
     },
     [
+      isDuplicated,
       onFocusNext,
       omitSelectedValues,
       isDisabled,
@@ -224,14 +222,11 @@ var useAutocompleteOption = (props) => {
       index,
       onChange,
       customCloseOnSelect,
-      generalCloseOnSelect,
+      closeOnSelect,
       onClose,
       inputRef
     ]
   );
-  (0, import_utils3.useUpdateEffect)(() => {
-    if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", { runOmit: false });
-  }, [optionValue]);
   const getOptionProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => {
       const style = {
@@ -255,6 +250,7 @@ var useAutocompleteOption = (props) => {
         "aria-checked": isSelected,
         "aria-disabled": (0, import_utils3.ariaAttr)(isDisabled),
         "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
+        "data-duplicated": (0, import_utils3.dataAttr)(isDuplicated),
         "data-focus": (0, import_utils3.dataAttr)(isFocused),
         "data-target": (0, import_utils3.dataAttr)(true),
         "data-value": optionValue != null ? optionValue : "",
@@ -264,6 +260,7 @@ var useAutocompleteOption = (props) => {
     },
     [
       id,
+      isDuplicated,
       optionValue,
       computedProps,
       isDisabled,
@@ -983,15 +980,23 @@ var useAutocomplete = (props) => {
   );
   const validChildren = (0, import_utils11.getValidChildren)(children);
   const computedChildren = (0, import_react5.useMemo)(
-    () => resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
+    () => resolvedItems == null ? void 0 : resolvedItems.map((item, index) => {
       if ("value" in item) {
         const { label: label2, value: value2, ...props2 } = item;
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOption, { value: value2, ...props2, children: label2 }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOption, { value: value2, ...props2, children: label2 }, index);
       } else if ("items" in item) {
         const { items: items2 = [], label: label2, ...props2 } = item;
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOptionGroup, { label: label2, ...props2, children: items2.map(({ label: label3, value: value2, ...props3 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOption, { value: value2, ...props3, children: label3 }, i2)) }, i);
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          AutocompleteOptionGroup,
+          {
+            label: label2,
+            ...props2,
+            children: items2.map(({ label: label3, value: value2, ...props3 }, index2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOption, { value: value2, ...props3, children: label3 }, index2))
+          },
+          index
+        );
       }
-    }),
+    }).filter(Boolean),
     [resolvedItems]
   );
   const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
@@ -1170,50 +1175,29 @@ var useAutocomplete = (props) => {
     },
     [descendants, onFocusFirst]
   );
-  const getSelectedValues = (0, import_react5.useCallback)(
-    (newValues) => {
-      const enabledValues2 = descendants.enabledValues();
-      const resolvedValues = (0, import_utils11.isArray)(newValues) ? newValues : [newValues];
-      const selectedValues2 = resolvedValues.map((value2) => {
+  const onChangeLabel = (0, import_react5.useCallback)(
+    (newValue) => {
+      const values = descendants.values();
+      if (!values.length) return;
+      const resolvedValues = (0, import_utils11.isArray)(newValue) ? newValue : [newValue];
+      const selectedLabel = resolvedValues.map((value2) => {
         var _a, _b;
-        const { node } = (_a = enabledValues2.find(({ node: node2 }) => node2.dataset.value === value2)) != null ? _a : {};
+        const { node } = (_a = values.find(({ node: node2 }) => node2.dataset.value === value2)) != null ? _a : {};
         if (node) {
-          const el = Array.from(node.children).find(
+          const { textContent } = (_b = Array.from(node.children).find(
             (child) => child.getAttribute("data-label") !== null
-          );
-          return (_b = el == null ? void 0 : el.textContent) != null ? _b : void 0;
+          )) != null ? _b : {};
+          return textContent;
         } else {
           return allowFree ? value2 : void 0;
         }
-      }).filter(Boolean);
-      return selectedValues2;
-    },
-    [allowFree, descendants]
-  );
-  const onChangeLabel = (0, import_react5.useCallback)(
-    (newValue, { forceUpdate, runOmit = true } = {}) => {
-      const selectedValues2 = getSelectedValues(newValue);
-      if (!forceUpdate && !selectedValues2.length) return;
-      setLabel((prev) => {
-        if (!isMulti) {
-          return selectedValues2[0];
-        } else {
-          selectedValues2.forEach((selectedValue) => {
-            const isSelected = (0, import_utils11.isArray)(prev) && prev.includes(selectedValue);
-            if (!isSelected) {
-              prev = [...(0, import_utils11.isArray)(prev) ? prev : [], selectedValue];
-            } else if (runOmit) {
-              prev = (0, import_utils11.isArray)(prev) ? prev.filter((value2) => value2 !== selectedValue) : void 0;
-            }
-          });
-          return prev;
-        }
-      });
+      }).filter((label2) => !(0, import_utils11.isUndefined)(label2));
+      setLabel(!isMulti ? selectedLabel[0] : selectedLabel);
     },
-    [getSelectedValues, isMulti]
+    [allowFree, descendants, isMulti]
   );
   const onChange = (0, import_react5.useCallback)(
-    (newValue, { forceUpdate, runRebirth = true } = {}) => {
+    (newValue, runRebirth = true) => {
       setValue((prev) => {
         let next;
         if (!(0, import_utils11.isArray)(prev)) {
@@ -1235,14 +1219,13 @@ var useAutocomplete = (props) => {
           return format((_a = node.textContent) != null ? _a : "").includes(newValue);
         }
       ).length > 0;
-      onChangeLabel(newValue, { forceUpdate });
-      if (allowFree || isHit2) setInputValue("");
+      if (allowCreate || allowFree || isHit2) setInputValue("");
       if (isMulti && runRebirth) rebirthOptions(false);
     },
     [
       allowFree,
+      allowCreate,
       isMulti,
-      onChangeLabel,
       rebirthOptions,
       setValue,
       descendants,
@@ -1353,7 +1336,7 @@ var useAutocomplete = (props) => {
       const relatedTarget = (0, import_utils11.getEventRelatedTarget)(ev);
       if ((0, import_utils11.isContains)(containerRef.current, relatedTarget)) return;
       if (!closeOnBlur && isHit) return;
-      if (allowFree && !!inputValue) onChange(inputValue, { runRebirth: false });
+      if (allowFree && !!inputValue) onChange(inputValue, false);
       setInputValue("");
       if (isOpen) onClose();
     },
@@ -1361,7 +1344,7 @@ var useAutocomplete = (props) => {
   );
   const onDelete = (0, import_react5.useCallback)(() => {
     if (!isMulti) {
-      onChange("", { forceUpdate: true });
+      onChange("");
     } else {
       onChange(value[value.length - 1]);
     }
@@ -1448,18 +1431,9 @@ var useAutocomplete = (props) => {
     onClose,
     maxSelectValues
   ]);
-  (0, import_react5.useEffect)(() => {
-    var _a;
-    if (isMulti) {
-      if (JSON.stringify((_a = prevValue.current) != null ? _a : []) === JSON.stringify(value))
-        return;
-      const label2 = getSelectedValues(value);
-      setLabel(label2);
-    } else {
-      if (prevValue.current === value) return;
-      onChangeLabel(value, { runOmit: false });
-    }
-  }, [isMulti, value, onChangeLabel, getSelectedValues]);
+  (0, import_utils11.useSafeLayoutEffect)(() => {
+    onChangeLabel(value);
+  }, [value]);
   (0, import_utils11.useUpdateEffect)(() => {
     if (isOpen || allowFree) return;
     setFocusedIndex(-1);
@@ -1566,8 +1540,8 @@ var useAutocomplete = (props) => {
     id,
     allowCreate,
     allowFree,
+    children: children != null ? children : computedChildren,
     closeOnSelect,
-    computedChildren,
     descendants,
     emptyMessage,
     focusedIndex,
@@ -1591,7 +1565,6 @@ var useAutocomplete = (props) => {
     inputProps,
     optionProps,
     onChange,
-    onChangeLabel,
     onClear,
     onClose,
     onCompositionEnd,
@@ -1688,7 +1661,6 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
     );
     let {
       className,
-      children,
       closeOnSelect = false,
       color,
       component,
@@ -1716,7 +1688,7 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
     } = (0, import_core9.omitThemeProps)(mergedProps);
     const {
       allowCreate,
-      computedChildren,
+      children,
       descendants,
       inputValue,
       isEmpty,
@@ -1730,7 +1702,6 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
       ...rest
     } = useAutocomplete({
       ...computedProps,
-      children,
       closeOnSelect,
       defaultValue
     });
@@ -1791,26 +1762,17 @@ var MultiAutocomplete = (0, import_core9.forwardRef)(
                   ]
                 }
               ),
-              !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 AutocompleteList,
                 {
                   footer: (0, import_utils12.runIfFunc)(footer, { value, onClose }),
                   header: (0, import_utils12.runIfFunc)(header, { value, onClose }),
                   contentProps,
                   ...listProps,
-                  children: [
+                  children: !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
                     allowCreate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, { ...emptyProps }),
-                    children != null ? children : computedChildren
-                  ]
-                }
-              ) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                AutocompleteList,
-                {
-                  footer: (0, import_utils12.runIfFunc)(footer, { value, onClose }),
-                  header: (0, import_utils12.runIfFunc)(header, { value, onClose }),
-                  contentProps,
-                  ...listProps,
-                  children: allowCreate && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, { ...emptyProps })
+                    children
+                  ] }) : allowCreate && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, { ...emptyProps })
                 }
               ) })
             ]
@@ -1880,11 +1842,11 @@ var MultiAutocompleteField = (0, import_core9.forwardRef)(
       ...styles.field,
       cursor: "text"
     };
+    if ((label == null ? void 0 : label.length) && component) css.py = "0.125rem";
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover2.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       import_core9.ui.div,
       {
         className: (0, import_utils12.cx)("ui-multi-autocomplete__field", className),
-        py: (label == null ? void 0 : label.length) && component ? "0.125rem" : void 0,
         __css: css,
         ...rest,
         children: [