@mlw-packages/react-components 1.10.26 → 1.10.28

package/dist/index.js

@@ -22487,10 +22487,15 @@ function useCommandPalette({
   const [query, setQuery] = React32__namespace.useState("");
   const [activeIndex, setActiveIndex] = React32__namespace.useState(0);
   const [page, setPage] = React32__namespace.useState(0);
-  const [selectedItemIds, setSelectedItemIds] = React32__namespace.useState(
-    /* @__PURE__ */ new Set()
-  );
-  const toggleSelection = React32__namespace.useCallback((id) => {
+  const [selectedItemIds, setSelectedItemIds] = React32__namespace.useState(/* @__PURE__ */ new Set());
+  const stateRef = React32.useRef({
+    activeIndex,
+    page,
+    flatItems: [],
+    query,
+    selectedItems: []
+  });
+  const toggleSelection = React32.useCallback((id) => {
     setSelectedItemIds((prev) => {
       const next = new Set(prev);
       if (next.has(id)) next.delete(id);
@@ -22498,14 +22503,8 @@ function useCommandPalette({
       return next;
     });
   }, []);
-  const clearSelection = React32__namespace.useCallback(
-    () => setSelectedItemIds(/* @__PURE__ */ new Set()),
-    []
-  );
-  const baseGroups = React32__namespace.useMemo(
-    () => normaliseGroups(items, groups),
-    [items, groups]
-  );
+  const clearSelection = React32.useCallback(() => setSelectedItemIds(/* @__PURE__ */ new Set()), []);
+  const baseGroups = React32.useMemo(() => normaliseGroups(items, groups), [items, groups]);
   React32.useEffect(() => {
     if (open) {
       setQuery("");
@@ -22514,36 +22513,18 @@ function useCommandPalette({
       clearSelection();
     }
   }, [open, clearSelection]);
-  const searchTerms = React32__namespace.useMemo(() => {
+  const searchTerms = React32.useMemo(() => {
     const parts = query.split(",");
     if (parts.length <= 1 && !multiSearch) return [];
     return parts.map((t) => t.trim().toLowerCase()).filter(Boolean);
   }, [query, multiSearch]);
-  const allMatchedGroups = React32__namespace.useMemo(() => {
+  const allMatchedGroups = React32.useMemo(() => {
     if (!query.trim()) {
-      if (recentItems.length > 0) {
-        return [
-          {
-            id: "__recent__",
-            label: "Recent",
-            icon: React32__namespace.createElement(react.ClockCounterClockwiseIcon),
-            items: recentItems,
-            priority: 999
-          },
-          ...baseGroups
-        ];
-      }
-      return baseGroups;
-    }
-    if (searchTerms.length > 1 || multiSearch && searchTerms.length > 0) {
-      return unionGroups(baseGroups, searchTerms);
+      return recentItems.length > 0 ? [{ id: "__recent__", label: "Recent", icon: React32__namespace.createElement(react.ClockCounterClockwiseIcon), items: recentItems, priority: 999 }, ...baseGroups] : baseGroups;
     }
-    return filterAndScore(baseGroups, query);
+    return searchTerms.length > 1 || multiSearch && searchTerms.length > 0 ? unionGroups(baseGroups, searchTerms) : filterAndScore(baseGroups, query);
   }, [query, baseGroups, recentItems, multiSearch, searchTerms]);
-  const allFlatItems = React32.useMemo(
-    () => allMatchedGroups.flatMap((g) => g.items),
-    [allMatchedGroups]
-  );
+  const allFlatItems = React32.useMemo(() => allMatchedGroups.flatMap((g) => g.items), [allMatchedGroups]);
   const totalItems = allFlatItems.length;
   const totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE));
   React32.useEffect(() => {
@@ -22565,42 +22546,32 @@ function useCommandPalette({
         count++;
         if (count >= end) break;
       }
-      if (slicedItems.length > 0) {
-        result.push({ ...group, items: slicedItems });
-      }
+      if (slicedItems.length > 0) result.push({ ...group, items: slicedItems });
       if (count >= end) break;
     }
     return result;
   }, [allMatchedGroups, page]);
-  const flatItems = React32.useMemo(
-    () => displayedGroups.flatMap((g) => g.items),
-    [displayedGroups]
-  );
-  const selectedItems = React32.useMemo(
-    () => allFlatItems.filter((i) => selectedItemIds.has(i.id)),
-    [allFlatItems, selectedItemIds]
-  );
-  const pageItemCount = flatItems.length;
+  const flatItems = React32.useMemo(() => displayedGroups.flatMap((g) => g.items), [displayedGroups]);
+  const selectedItems = React32.useMemo(() => allFlatItems.filter((i) => selectedItemIds.has(i.id)), [allFlatItems, selectedItemIds]);
   React32.useEffect(() => {
-    setActiveIndex((i) => Math.min(i, Math.max(pageItemCount - 1, 0)));
-  }, [pageItemCount]);
-  function executeBulkAction() {
+    stateRef.current = { activeIndex, page, flatItems, query, selectedItems };
+  }, [activeIndex, page, flatItems, query, selectedItems]);
+  const executeBulkAction = React32.useCallback(() => {
     if (!onSelectMultiple || selectedItems.length === 0) return;
     onSelectMultiple(selectedItems);
     onOpenChange?.(false);
-  }
-  function handleSelect(item, event) {
+  }, [onSelectMultiple, selectedItems, onOpenChange]);
+  const handleSelect = React32.useCallback((item, event) => {
     if (!item) return;
     if (multiSelect) {
-      if (event && ("ctrlKey" in event || "metaKey" in event || "shiftKey" in event) && (event.ctrlKey || event.metaKey || event.shiftKey)) {
+      const isCmdKey = event && ("ctrlKey" in event || "metaKey" in event || "shiftKey" in event) && (event.ctrlKey || event.metaKey || event.shiftKey);
+      if (isCmdKey) {
         toggleSelection(item.id);
         return;
       }
       if (selectedItems.length > 0) {
-        const itemsToSubmit = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
-        if (onSelectMultiple) {
-          onSelectMultiple(itemsToSubmit);
-        }
+        const finalItems = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
+        onSelectMultiple?.(finalItems);
         onOpenChange?.(false);
         return;
       }
@@ -22608,55 +22579,39 @@ function useCommandPalette({
     item.onSelect();
     onOpenChange?.(false);
     if (onRecentItemsChange) {
-      const next = [item, ...recentItems.filter((r) => r.id !== item.id)].slice(
-        0,
-        maxRecentItems
-      );
+      const next = [item, ...recentItems.filter((r) => r.id !== item.id)].slice(0, maxRecentItems);
       onRecentItemsChange(next);
     }
-  }
+  }, [multiSelect, selectedItems, selectedItemIds, onSelectMultiple, onOpenChange, onRecentItemsChange, recentItems, maxRecentItems, toggleSelection]);
   React32.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
+      const { activeIndex: curIdx, flatItems: curItems, query: curQuery, selectedItems: curSelected } = stateRef.current;
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        if (activeIndex === pageItemCount - 1 && page < totalPages - 1) {
-          setPage((p) => p + 1);
-        } else {
-          setActiveIndex((i) => (i + 1) % Math.max(pageItemCount, 1));
-        }
+        if (curIdx === curItems.length - 1 && page < totalPages - 1) setPage((p) => p + 1);
+        else setActiveIndex((i) => (i + 1) % Math.max(curItems.length, 1));
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        if (activeIndex === 0 && page > 0) {
+        if (curIdx === 0 && page > 0) {
           setPage((p) => p - 1);
           setActiveIndex(PAGE_SIZE - 1);
-        } else {
-          setActiveIndex(
-            (i) => (i - 1 + Math.max(pageItemCount, 1)) % Math.max(pageItemCount, 1)
-          );
-        }
+        } else setActiveIndex((i) => (i - 1 + Math.max(curItems.length, 1)) % Math.max(curItems.length, 1));
       } else if (e.key === "Enter") {
         e.preventDefault();
+        if (multiSearch && curQuery.includes(",") && curSelected.length === 0) {
+          return;
+        }
         if (multiSelect && (e.ctrlKey || e.metaKey)) {
           executeBulkAction();
           return;
         }
-        handleSelect(flatItems[activeIndex], e);
+        handleSelect(curItems[curIdx], e);
       }
     };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [
-    open,
-    flatItems,
-    activeIndex,
-    pageItemCount,
-    page,
-    totalPages,
-    executeBulkAction,
-    handleSelect,
-    multiSelect
-  ]);
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, page, totalPages, multiSearch, multiSelect, handleSelect, executeBulkAction]);
   return {
     query,
     setQuery,

package/dist/index.mjs

@@ -22445,10 +22445,15 @@ function useCommandPalette({
   const [query, setQuery] = React32.useState("");
   const [activeIndex, setActiveIndex] = React32.useState(0);
   const [page, setPage] = React32.useState(0);
-  const [selectedItemIds, setSelectedItemIds] = React32.useState(
-    /* @__PURE__ */ new Set()
-  );
-  const toggleSelection = React32.useCallback((id) => {
+  const [selectedItemIds, setSelectedItemIds] = React32.useState(/* @__PURE__ */ new Set());
+  const stateRef = useRef({
+    activeIndex,
+    page,
+    flatItems: [],
+    query,
+    selectedItems: []
+  });
+  const toggleSelection = useCallback((id) => {
     setSelectedItemIds((prev) => {
       const next = new Set(prev);
       if (next.has(id)) next.delete(id);
@@ -22456,14 +22461,8 @@ function useCommandPalette({
       return next;
     });
   }, []);
-  const clearSelection = React32.useCallback(
-    () => setSelectedItemIds(/* @__PURE__ */ new Set()),
-    []
-  );
-  const baseGroups = React32.useMemo(
-    () => normaliseGroups(items, groups),
-    [items, groups]
-  );
+  const clearSelection = useCallback(() => setSelectedItemIds(/* @__PURE__ */ new Set()), []);
+  const baseGroups = useMemo(() => normaliseGroups(items, groups), [items, groups]);
   useEffect(() => {
     if (open) {
       setQuery("");
@@ -22472,36 +22471,18 @@ function useCommandPalette({
       clearSelection();
     }
   }, [open, clearSelection]);
-  const searchTerms = React32.useMemo(() => {
+  const searchTerms = useMemo(() => {
     const parts = query.split(",");
     if (parts.length <= 1 && !multiSearch) return [];
     return parts.map((t) => t.trim().toLowerCase()).filter(Boolean);
   }, [query, multiSearch]);
-  const allMatchedGroups = React32.useMemo(() => {
+  const allMatchedGroups = useMemo(() => {
     if (!query.trim()) {
-      if (recentItems.length > 0) {
-        return [
-          {
-            id: "__recent__",
-            label: "Recent",
-            icon: React32.createElement(ClockCounterClockwiseIcon),
-            items: recentItems,
-            priority: 999
-          },
-          ...baseGroups
-        ];
-      }
-      return baseGroups;
-    }
-    if (searchTerms.length > 1 || multiSearch && searchTerms.length > 0) {
-      return unionGroups(baseGroups, searchTerms);
+      return recentItems.length > 0 ? [{ id: "__recent__", label: "Recent", icon: React32.createElement(ClockCounterClockwiseIcon), items: recentItems, priority: 999 }, ...baseGroups] : baseGroups;
     }
-    return filterAndScore(baseGroups, query);
+    return searchTerms.length > 1 || multiSearch && searchTerms.length > 0 ? unionGroups(baseGroups, searchTerms) : filterAndScore(baseGroups, query);
   }, [query, baseGroups, recentItems, multiSearch, searchTerms]);
-  const allFlatItems = useMemo(
-    () => allMatchedGroups.flatMap((g) => g.items),
-    [allMatchedGroups]
-  );
+  const allFlatItems = useMemo(() => allMatchedGroups.flatMap((g) => g.items), [allMatchedGroups]);
   const totalItems = allFlatItems.length;
   const totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE));
   useEffect(() => {
@@ -22523,42 +22504,32 @@ function useCommandPalette({
         count++;
         if (count >= end) break;
       }
-      if (slicedItems.length > 0) {
-        result.push({ ...group, items: slicedItems });
-      }
+      if (slicedItems.length > 0) result.push({ ...group, items: slicedItems });
       if (count >= end) break;
     }
     return result;
   }, [allMatchedGroups, page]);
-  const flatItems = useMemo(
-    () => displayedGroups.flatMap((g) => g.items),
-    [displayedGroups]
-  );
-  const selectedItems = useMemo(
-    () => allFlatItems.filter((i) => selectedItemIds.has(i.id)),
-    [allFlatItems, selectedItemIds]
-  );
-  const pageItemCount = flatItems.length;
+  const flatItems = useMemo(() => displayedGroups.flatMap((g) => g.items), [displayedGroups]);
+  const selectedItems = useMemo(() => allFlatItems.filter((i) => selectedItemIds.has(i.id)), [allFlatItems, selectedItemIds]);
   useEffect(() => {
-    setActiveIndex((i) => Math.min(i, Math.max(pageItemCount - 1, 0)));
-  }, [pageItemCount]);
-  function executeBulkAction() {
+    stateRef.current = { activeIndex, page, flatItems, query, selectedItems };
+  }, [activeIndex, page, flatItems, query, selectedItems]);
+  const executeBulkAction = useCallback(() => {
     if (!onSelectMultiple || selectedItems.length === 0) return;
     onSelectMultiple(selectedItems);
     onOpenChange?.(false);
-  }
-  function handleSelect(item, event) {
+  }, [onSelectMultiple, selectedItems, onOpenChange]);
+  const handleSelect = useCallback((item, event) => {
     if (!item) return;
     if (multiSelect) {
-      if (event && ("ctrlKey" in event || "metaKey" in event || "shiftKey" in event) && (event.ctrlKey || event.metaKey || event.shiftKey)) {
+      const isCmdKey = event && ("ctrlKey" in event || "metaKey" in event || "shiftKey" in event) && (event.ctrlKey || event.metaKey || event.shiftKey);
+      if (isCmdKey) {
         toggleSelection(item.id);
         return;
       }
       if (selectedItems.length > 0) {
-        const itemsToSubmit = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
-        if (onSelectMultiple) {
-          onSelectMultiple(itemsToSubmit);
-        }
+        const finalItems = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
+        onSelectMultiple?.(finalItems);
         onOpenChange?.(false);
         return;
       }
@@ -22566,55 +22537,39 @@ function useCommandPalette({
     item.onSelect();
     onOpenChange?.(false);
     if (onRecentItemsChange) {
-      const next = [item, ...recentItems.filter((r) => r.id !== item.id)].slice(
-        0,
-        maxRecentItems
-      );
+      const next = [item, ...recentItems.filter((r) => r.id !== item.id)].slice(0, maxRecentItems);
       onRecentItemsChange(next);
     }
-  }
+  }, [multiSelect, selectedItems, selectedItemIds, onSelectMultiple, onOpenChange, onRecentItemsChange, recentItems, maxRecentItems, toggleSelection]);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
+      const { activeIndex: curIdx, flatItems: curItems, query: curQuery, selectedItems: curSelected } = stateRef.current;
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        if (activeIndex === pageItemCount - 1 && page < totalPages - 1) {
-          setPage((p) => p + 1);
-        } else {
-          setActiveIndex((i) => (i + 1) % Math.max(pageItemCount, 1));
-        }
+        if (curIdx === curItems.length - 1 && page < totalPages - 1) setPage((p) => p + 1);
+        else setActiveIndex((i) => (i + 1) % Math.max(curItems.length, 1));
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        if (activeIndex === 0 && page > 0) {
+        if (curIdx === 0 && page > 0) {
           setPage((p) => p - 1);
           setActiveIndex(PAGE_SIZE - 1);
-        } else {
-          setActiveIndex(
-            (i) => (i - 1 + Math.max(pageItemCount, 1)) % Math.max(pageItemCount, 1)
-          );
-        }
+        } else setActiveIndex((i) => (i - 1 + Math.max(curItems.length, 1)) % Math.max(curItems.length, 1));
       } else if (e.key === "Enter") {
         e.preventDefault();
+        if (multiSearch && curQuery.includes(",") && curSelected.length === 0) {
+          return;
+        }
         if (multiSelect && (e.ctrlKey || e.metaKey)) {
           executeBulkAction();
           return;
         }
-        handleSelect(flatItems[activeIndex], e);
+        handleSelect(curItems[curIdx], e);
       }
     };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [
-    open,
-    flatItems,
-    activeIndex,
-    pageItemCount,
-    page,
-    totalPages,
-    executeBulkAction,
-    handleSelect,
-    multiSelect
-  ]);
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, page, totalPages, multiSearch, multiSelect, handleSelect, executeBulkAction]);
   return {
     query,
     setQuery,

package/package.json

@@ -5,7 +5,7 @@
     "access": "public",
     "type": "module"
   },
-  "version": "1.10.26",
+  "version": "1.10.28",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",