@k3-tech/react-kit 0.0.57 → 0.0.58

package/dist/index.js

@@ -19603,6 +19603,7 @@ function Autocomplete({
   initialSelectedOptions,
   loadSelected
 }, ref) {
+  var _a2;
   const isMultiple = !!multiple;
   const isControlled = controlledValue !== void 0;
   const [internalValue, setInternalValue] = useState(() => {
@@ -19719,67 +19720,68 @@ function Autocomplete({
       }
     });
   }, [currentValue, options, storeOption]);
-  const hasLoadedInitial = useRef(false);
-  const [, setLabelsLoadedCounter] = useState(0);
-  useEffect(() => {
-    if (!loadSelected || hasLoadedInitial.current) return;
-    if (!currentValue) return;
-    const values = Array.isArray(currentValue) ? currentValue : [currentValue];
-    if (values.length === 0) return;
-    const missing = values.filter((v) => !labelMapRef.current.has(v));
-    if (missing.length === 0) {
-      hasLoadedInitial.current = true;
-      return;
-    }
-    hasLoadedInitial.current = true;
-    let cancelled = false;
-    loadSelected(missing).then((opts) => {
-      if (!cancelled && opts.length > 0) {
-        opts.forEach(storeOption);
-        setLabelsLoadedCounter((c2) => c2 + 1);
-      }
-    }).catch(() => {
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [loadSelected, storeOption, currentValue]);
+  const [loadingSelectedValues, setLoadingSelectedValues] = useState(() => /* @__PURE__ */ new Set());
+  const inFlightSelectedRef = useRef(/* @__PURE__ */ new Set());
   useEffect(() => {
-    if (!loadSelected || !isOpen) return;
+    if (!loadSelected) return;
     const values = Array.isArray(currentValue) ? currentValue : currentValue ? [currentValue] : [];
-    const missing = values.filter((v) => !labelMapRef.current.has(v));
+    if (values.length === 0) return;
+    const missing = values.filter(
+      (v) => !labelMapRef.current.has(v) && !inFlightSelectedRef.current.has(v)
+    );
     if (missing.length === 0) return;
-    let cancelled = false;
+    missing.forEach((v) => {
+      inFlightSelectedRef.current.add(v);
+    });
+    setLoadingSelectedValues((prev) => {
+      const next = new Set(prev);
+      missing.forEach((v) => {
+        next.add(v);
+      });
+      return next;
+    });
     loadSelected(missing).then((opts) => {
-      if (!cancelled) opts.forEach(storeOption);
+      opts.forEach((opt) => {
+        storeOption(opt);
+        const requested = missing.find(
+          (m2) => String(m2) === String(opt.value)
+        );
+        if (requested !== void 0 && requested !== opt.value) {
+          storeOption({ ...opt, value: requested });
+        }
+      });
     }).catch(() => {
+    }).finally(() => {
+      missing.forEach((v) => {
+        inFlightSelectedRef.current.delete(v);
+      });
+      setLoadingSelectedValues((prev) => {
+        const next = new Set(prev);
+        missing.forEach((v) => {
+          next.delete(v);
+        });
+        return next;
+      });
     });
-    return () => {
-      cancelled = true;
-    };
-  }, [currentValue, loadSelected, isOpen, storeOption]);
+  }, [currentValue, loadSelected, storeOption]);
   const getLabel2 = useCallback((v) => {
     return labelMapRef.current.get(v) ?? String(v);
   }, []);
   const selectedItems = useMemo(() => {
+    const toItem = (v) => ({
+      value: v,
+      label: getLabel2(v),
+      raw: rawMapRef.current.get(v),
+      loading: loadingSelectedValues.has(v)
+    });
     if (!isMultiple) {
       if (currentValue === null || currentValue === void 0 || Array.isArray(currentValue))
         return [];
-      return [
-        {
-          value: currentValue,
-          label: getLabel2(currentValue),
-          raw: rawMapRef.current.get(currentValue)
-        }
-      ];
+      return [toItem(currentValue)];
     }
     const values = Array.isArray(currentValue) ? currentValue : [];
-    return values.map((v) => ({
-      value: v,
-      label: getLabel2(v),
-      raw: rawMapRef.current.get(v)
-    }));
-  }, [currentValue, isMultiple, getLabel2]);
+    return values.map(toItem);
+  }, [currentValue, isMultiple, getLabel2, loadingSelectedValues]);
   const handleSelect = useCallback(
     (item) => {
       if (!item) return;
@@ -19868,10 +19870,11 @@ function Autocomplete({
       return searchInput;
     }
     if (selectedItems.length > 0) {
-      return selectedItems[0].label;
+      return selectedItems[0].loading ? "" : selectedItems[0].label;
     }
     return "";
   }, [isMultiple, isOpen, searchInput, selectedItems]);
+  const isSingleSelectionLoading = !isMultiple && !!((_a2 = selectedItems[0]) == null ? void 0 : _a2.loading);
   const { getInputProps, getItemProps, getMenuProps, highlightedIndex } = useCombobox({
     items,
     itemToString: (item) => (item == null ? void 0 : item.label) ?? "",
@@ -19937,7 +19940,7 @@ function Autocomplete({
               variant: chipVariant,
               className: cn$1("gap-1", chipClassName),
               children: [
-                /* @__PURE__ */ jsx("span", { className: "max-w-[100px] truncate", children: item.label }),
+                /* @__PURE__ */ jsx("span", { className: "max-w-[100px] truncate", children: item.loading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "h-3 w-3 animate-spin" }) : item.label }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -19978,7 +19981,8 @@ function Autocomplete({
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
-            showClearButton && /* @__PURE__ */ jsx(
+            isSingleSelectionLoading && /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 animate-spin opacity-50" }),
+            showClearButton && !isSingleSelectionLoading && /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",

package/dist/kit/components/autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/kit/components/autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/kit/components/autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k3-tech/react-kit",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/kit/components/autocomplete/Autocomplete.tsx

@@ -249,65 +249,91 @@ export function Autocomplete<T = unknown>({
     });
   }, [currentValue, options, storeOption]);
 
-  // Load selected labels on mount for initial values
-  const hasLoadedInitial = useRef(false);
-  const [, setLabelsLoadedCounter] = useState(0);
-
+  // Tracks selected values currently being resolved via loadSelected. Doubles
+  // as the loading indicator and the recompute trigger: removing a value on
+  // settle re-renders, and by then its label is already stored in labelMapRef.
+  const [loadingSelectedValues, setLoadingSelectedValues] = useState<
+    Set<string | number>
+  >(() => new Set());
+
+  // Values with a loadSelected fetch currently in flight. Prevents duplicate
+  // concurrent requests when the parent re-renders with a fresh currentValue
+  // reference (common in multiple mode) before the first fetch resolves.
+  const inFlightSelectedRef = useRef<Set<string | number>>(new Set());
+
+  // Load selected labels via loadSelected whenever currentValue changes.
+  // Covers mount, programmatic value changes (even while the dropdown is
+  // closed), and dropdown opens — anything not already cached or resolvable
+  // from the local options array.
   useEffect(() => {
-    // Only run once on mount
-    if (!loadSelected || hasLoadedInitial.current) return;
-    if (!currentValue) return;
-
-    const values = Array.isArray(currentValue) ? currentValue : [currentValue];
-    if (values.length === 0) return;
-
-    // Check if any values are missing labels
-    const missing = values.filter((v) => !labelMapRef.current.has(v));
-    if (missing.length === 0) {
-      hasLoadedInitial.current = true;
-      return;
-    }
+    if (!loadSelected) return;
 
-    hasLoadedInitial.current = true;
-    let cancelled = false;
-    loadSelected(missing)
-      .then((opts) => {
-        if (!cancelled && opts.length > 0) {
-          opts.forEach(storeOption);
-          // Only trigger re-render if we actually stored something
-          setLabelsLoadedCounter((c) => c + 1);
-        }
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-      })
-      .catch(() => { });
-    return () => {
-      cancelled = true;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loadSelected, storeOption, currentValue]); // Only run once on mount - uses closure values
-
-  // Load selected labels if missing when dropdown opens
-  useEffect(() => {
-    if (!loadSelected || !isOpen) return;
     const values = Array.isArray(currentValue)
       ? currentValue
       : currentValue
         ? [currentValue]
         : [];
-    const missing = values.filter((v) => !labelMapRef.current.has(v));
+    if (values.length === 0) return;
+
+    // Only fetch values whose labels we don't already have and aren't already
+    // being fetched.
+    const missing = values.filter(
+      (v) => !labelMapRef.current.has(v) && !inFlightSelectedRef.current.has(v),
+    );
     if (missing.length === 0) return;
 
-    let cancelled = false;
+    missing.forEach((v) => {
+      inFlightSelectedRef.current.add(v);
+    });
+
+    // Mark missing values as loading so the UI shows a spinner instead of
+    // flashing the raw value while the fetch is in flight.
+    setLoadingSelectedValues((prev) => {
+      const next = new Set(prev);
+      missing.forEach((v) => {
+        next.add(v);
+      });
+      return next;
+    });
+
     loadSelected(missing)
       .then((opts) => {
-        if (!cancelled) opts.forEach(storeOption);
+        // Store unconditionally — these are ref writes, safe even if this
+        // effect run was superseded. (Guarding on a "cancelled" flag here
+        // dropped labels in multiple mode, where currentValue is a fresh
+        // array reference each render and re-runs/cancels the effect.)
+        opts.forEach((opt) => {
+          storeOption(opt);
+          // Align the returned option back to the originally-requested value
+          // so getLabel finds it even when loadSelected returns a different
+          // value type (e.g. a GraphQL ID serialized as a string while
+          // currentValue holds a number). Match loosely by string, then store
+          // under the exact requested value.
+          const requested = missing.find(
+            (m) => String(m) === String(opt.value),
+          );
+          if (requested !== undefined && requested !== opt.value) {
+            storeOption({ ...opt, value: requested });
+          }
+        });
         // eslint-disable-next-line @typescript-eslint/no-empty-function
       })
-      .catch(() => { });
-    return () => {
-      cancelled = true;
-    };
-  }, [currentValue, loadSelected, isOpen, storeOption]);
+      .catch(() => { })
+      .finally(() => {
+        missing.forEach((v) => {
+          inFlightSelectedRef.current.delete(v);
+        });
+        // Clear the loading flags regardless of outcome; the resulting state
+        // change re-renders and recomputes selectedItems from labelMapRef.
+        setLoadingSelectedValues((prev) => {
+          const next = new Set(prev);
+          missing.forEach((v) => {
+            next.delete(v);
+          });
+          return next;
+        });
+      });
+  }, [currentValue, loadSelected, storeOption]);
 
   // Get label helper
   const getLabel = useCallback((v: string | number) => {
@@ -316,6 +342,12 @@ export function Autocomplete<T = unknown>({
 
   // Selected items for display
   const selectedItems = useMemo(() => {
+    const toItem = (v: string | number) => ({
+      value: v,
+      label: getLabel(v),
+      raw: rawMapRef.current.get(v),
+      loading: loadingSelectedValues.has(v),
+    });
     if (!isMultiple) {
       if (
         currentValue === null ||
@@ -323,22 +355,14 @@ export function Autocomplete<T = unknown>({
         Array.isArray(currentValue)
       )
         return [];
-      return [
-        {
-          value: currentValue,
-          label: getLabel(currentValue),
-          raw: rawMapRef.current.get(currentValue),
-        },
-      ];
+      return [toItem(currentValue)];
     }
     const values = Array.isArray(currentValue) ? currentValue : [];
-    return values.map((v) => ({
-      value: v,
-      label: getLabel(v),
-      raw: rawMapRef.current.get(v),
-    }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentValue, isMultiple, getLabel]); // labelsLoadedCounter triggers re-compute when loadSelected completes
+    return values.map(toItem);
+    // loadingSelectedValues also drives the recompute when loadSelected
+    // settles: clearing a value's flag re-renders, and its label is in
+    // labelMapRef (a ref React can't track) by then.
+  }, [currentValue, isMultiple, getLabel, loadingSelectedValues]);
 
   // Handle selection
   const handleSelect = useCallback(
@@ -450,13 +474,18 @@ export function Autocomplete<T = unknown>({
     if (isMultiple || isOpen) {
       return searchInput;
     }
-    // In single mode when closed, show selected item label
+    // In single mode when closed, show selected item label. While its label
+    // is still resolving, show nothing (a spinner renders in the trailing
+    // icons) so we don't flash the raw value.
     if (selectedItems.length > 0) {
-      return selectedItems[0].label;
+      return selectedItems[0].loading ? '' : selectedItems[0].label;
     }
     return '';
   }, [isMultiple, isOpen, searchInput, selectedItems]);
 
+  // Whether the single-mode selection is still resolving its label
+  const isSingleSelectionLoading = !isMultiple && !!selectedItems[0]?.loading;
+
   // Downshift
   const { getInputProps, getItemProps, getMenuProps, highlightedIndex } =
     useCombobox({
@@ -542,7 +571,13 @@ export function Autocomplete<T = unknown>({
                   variant={chipVariant}
                   className={cn('gap-1', chipClassName)}
                 >
-                  <span className="max-w-[100px] truncate">{item.label}</span>
+                  <span className="max-w-[100px] truncate">
+                    {item.loading ? (
+                      <Loader2 className="h-3 w-3 animate-spin" />
+                    ) : (
+                      item.label
+                    )}
+                  </span>
                   <button
                     type="button"
                     onClick={(e) => {
@@ -583,7 +618,10 @@ export function Autocomplete<T = unknown>({
             )}
           />
           <div className="flex items-center gap-2 shrink-0">
-            {showClearButton && (
+            {isSingleSelectionLoading && (
+              <Loader2 className="h-4 w-4 animate-spin opacity-50" />
+            )}
+            {showClearButton && !isSingleSelectionLoading && (
               <button
                 type="button"
                 onClick={(e) => {