@yamada-ui/autocomplete 2.0.0-next-20240703154117 → 2.0.0-next-20240705212157

package/dist/multi-autocomplete.js

@@ -446,23 +446,26 @@ var useAutocomplete = ({
     ({ node, index }) => "target" in node.dataset && !selectedIndexes.includes(index)
   );
   const validChildren = (0, import_utils6.getValidChildren)(children);
-  const computedChildren = resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
-    if ("value" in item) {
-      const { label: label2, value: value2, ...props } = item;
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children: label2 }, i);
-    } else if ("items" in item) {
-      const { label: label2, items: items2 = [], ...props } = item;
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        AutocompleteOptionGroup,
-        {
-          label: label2,
-          ...props,
-          children: items2.map(({ label: label3, value: value2, ...props2 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props2, children: label3 }, i2))
-        },
-        i
-      );
-    }
-  });
+  const computedChildren = (0, import_react.useMemo)(
+    () => resolvedItems == null ? void 0 : resolvedItems.map((item, i) => {
+      if ("value" in item) {
+        const { label: label2, value: value2, ...props } = item;
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props, children: label2 }, i);
+      } else if ("items" in item) {
+        const { label: label2, items: items2 = [], ...props } = item;
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          AutocompleteOptionGroup,
+          {
+            label: label2,
+            ...props,
+            children: items2.map(({ label: label3, value: value2, ...props2 }, i2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AutocompleteOption, { value: value2, ...props2, children: label3 }, i2))
+          },
+          i
+        );
+      }
+    }),
+    [resolvedItems]
+  );
   const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
   const onOpen = (0, import_react.useCallback)(() => {
     if (formControlProps.disabled || formControlProps.readOnly) return;
@@ -658,8 +661,9 @@ var useAutocomplete = ({
     [allowFree, descendants]
   );
   const onChangeLabel = (0, import_react.useCallback)(
-    (newValue, runOmit = true) => {
+    (newValue, { forceUpdate, runOmit = true } = {}) => {
       const selectedValues2 = getSelectedValues(newValue);
+      if (!forceUpdate && !selectedValues2.length) return;
       setLabel((prev) => {
         if (!isMulti) {
           return selectedValues2[0];
@@ -679,7 +683,7 @@ var useAutocomplete = ({
     [getSelectedValues, isMulti]
   );
   const onChange = (0, import_react.useCallback)(
-    (newValue, runRebirth = true) => {
+    (newValue, { forceUpdate, runRebirth = true } = {}) => {
       setValue((prev) => {
         let next;
         if (!(0, import_utils6.isArray)(prev)) {
@@ -701,7 +705,7 @@ var useAutocomplete = ({
           return format((_a = node.textContent) != null ? _a : "").includes(newValue);
         }
       ).length > 0;
-      onChangeLabel(newValue);
+      onChangeLabel(newValue, { forceUpdate });
       if (allowFree || isHit2) setInputValue("");
       if (isMulti && runRebirth) rebirthOptions(false);
     },
@@ -760,7 +764,7 @@ var useAutocomplete = ({
     if (!listRef.current) return;
     const newItem = { label: inputValue, value: inputValue };
     let newItems = [];
-    if (resolvedItems) newItems = resolvedItems;
+    if (resolvedItems) newItems = [...resolvedItems];
     if (firstInsertPositionItem === "first") {
       newItems = [newItem, ...newItems];
     } else if (firstInsertPositionItem === "last") {
@@ -819,7 +823,7 @@ var useAutocomplete = ({
       const relatedTarget = (0, import_utils6.getEventRelatedTarget)(ev);
       if ((0, import_utils6.isContains)(containerRef.current, relatedTarget)) return;
       if (!closeOnBlur && isHit) return;
-      if (allowFree && !!inputValue) onChange(inputValue, false);
+      if (allowFree && !!inputValue) onChange(inputValue, { runRebirth: false });
       setInputValue("");
       if (isOpen) onClose();
     },
@@ -827,7 +831,7 @@ var useAutocomplete = ({
   );
   const onDelete = (0, import_react.useCallback)(() => {
     if (!isMulti) {
-      onChange("");
+      onChange("", { forceUpdate: true });
     } else {
       onChange(value[value.length - 1]);
     }
@@ -923,7 +927,7 @@ var useAutocomplete = ({
       setLabel(label2);
     } else {
       if (prevValue.current === value) return;
-      onChangeLabel(value, false);
+      onChangeLabel(value, { runOmit: false });
     }
   }, [isMulti, value, onChangeLabel, getSelectedValues]);
   (0, import_utils6.useUpdateEffect)(() => {
@@ -934,6 +938,9 @@ var useAutocomplete = ({
   (0, import_utils6.useUpdateEffect)(() => {
     if (!isHit) setFocusedIndex(-2);
   }, [isHit]);
+  (0, import_utils6.useUpdateEffect)(() => {
+    setResolvedItems(items ? JSON.parse(JSON.stringify(items)) : void 0);
+  }, [items]);
   (0, import_utils6.useUnmountEffect)(() => {
     timeoutIds.current.forEach((id2) => clearTimeout(id2));
     timeoutIds.current.clear();
@@ -1274,7 +1281,7 @@ var useAutocompleteOption = (props) => {
     ]
   );
   (0, import_utils6.useUpdateEffect)(() => {
-    if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", false);
+    if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", { runOmit: false });
   }, [optionValue]);
   const getOptionProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => {