@mlw-packages/react-components 1.10.27 → 1.10.28

package/dist/index.js

@@ -22487,9 +22487,14 @@ 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 [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);
@@ -22499,10 +22504,7 @@ function useCommandPalette({
     });
   }, []);
   const clearSelection = React32.useCallback(() => setSelectedItemIds(/* @__PURE__ */ new Set()), []);
-  const baseGroups = React32.useMemo(
-    () => normaliseGroups(items, groups),
-    [items, groups]
-  );
+  const baseGroups = React32.useMemo(() => normaliseGroups(items, groups), [items, groups]);
   React32.useEffect(() => {
     if (open) {
       setQuery("");
@@ -22518,29 +22520,11 @@ function useCommandPalette({
   }, [query, multiSearch]);
   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(() => {
@@ -22562,115 +22546,72 @@ 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]);
+    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);
   }, [onSelectMultiple, selectedItems, onOpenChange]);
-  const handleSelect = React32.useCallback(
-    (item, event) => {
-      if (!item) return;
-      if (multiSelect) {
-        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 finalItems = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
-          onSelectMultiple?.(finalItems);
-          onOpenChange?.(false);
-          return;
-        }
+  const handleSelect = React32.useCallback((item, event) => {
+    if (!item) return;
+    if (multiSelect) {
+      const isCmdKey = event && ("ctrlKey" in event || "metaKey" in event || "shiftKey" in event) && (event.ctrlKey || event.metaKey || event.shiftKey);
+      if (isCmdKey) {
+        toggleSelection(item.id);
+        return;
       }
-      item.onSelect();
-      onOpenChange?.(false);
-      if (onRecentItemsChange) {
-        const next = [
-          item,
-          ...recentItems.filter((r) => r.id !== item.id)
-        ].slice(0, maxRecentItems);
-        onRecentItemsChange(next);
+      if (selectedItems.length > 0) {
+        const finalItems = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
+        onSelectMultiple?.(finalItems);
+        onOpenChange?.(false);
+        return;
       }
-    },
-    [
-      multiSelect,
-      selectedItems,
-      selectedItemIds,
-      onSelectMultiple,
-      onOpenChange,
-      onRecentItemsChange,
-      recentItems,
-      maxRecentItems,
-      toggleSelection
-    ]
-  );
+    }
+    item.onSelect();
+    onOpenChange?.(false);
+    if (onRecentItemsChange) {
+      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 && query.includes(",")) {
+        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,
-    query,
-    multiSearch,
-    multiSelect,
-    executeBulkAction,
-    handleSelect
-  ]);
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, page, totalPages, multiSearch, multiSelect, handleSelect, executeBulkAction]);
   return {
     query,
     setQuery,

package/dist/index.mjs

@@ -22445,9 +22445,14 @@ 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 [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);
@@ -22457,10 +22462,7 @@ function useCommandPalette({
     });
   }, []);
   const clearSelection = useCallback(() => setSelectedItemIds(/* @__PURE__ */ new Set()), []);
-  const baseGroups = useMemo(
-    () => normaliseGroups(items, groups),
-    [items, groups]
-  );
+  const baseGroups = useMemo(() => normaliseGroups(items, groups), [items, groups]);
   useEffect(() => {
     if (open) {
       setQuery("");
@@ -22476,29 +22478,11 @@ function useCommandPalette({
   }, [query, multiSearch]);
   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(() => {
@@ -22520,115 +22504,72 @@ 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]);
+    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);
   }, [onSelectMultiple, selectedItems, onOpenChange]);
-  const handleSelect = useCallback(
-    (item, event) => {
-      if (!item) return;
-      if (multiSelect) {
-        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 finalItems = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
-          onSelectMultiple?.(finalItems);
-          onOpenChange?.(false);
-          return;
-        }
+  const handleSelect = useCallback((item, event) => {
+    if (!item) return;
+    if (multiSelect) {
+      const isCmdKey = event && ("ctrlKey" in event || "metaKey" in event || "shiftKey" in event) && (event.ctrlKey || event.metaKey || event.shiftKey);
+      if (isCmdKey) {
+        toggleSelection(item.id);
+        return;
       }
-      item.onSelect();
-      onOpenChange?.(false);
-      if (onRecentItemsChange) {
-        const next = [
-          item,
-          ...recentItems.filter((r) => r.id !== item.id)
-        ].slice(0, maxRecentItems);
-        onRecentItemsChange(next);
+      if (selectedItems.length > 0) {
+        const finalItems = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
+        onSelectMultiple?.(finalItems);
+        onOpenChange?.(false);
+        return;
       }
-    },
-    [
-      multiSelect,
-      selectedItems,
-      selectedItemIds,
-      onSelectMultiple,
-      onOpenChange,
-      onRecentItemsChange,
-      recentItems,
-      maxRecentItems,
-      toggleSelection
-    ]
-  );
+    }
+    item.onSelect();
+    onOpenChange?.(false);
+    if (onRecentItemsChange) {
+      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 && query.includes(",")) {
+        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,
-    query,
-    multiSearch,
-    multiSelect,
-    executeBulkAction,
-    handleSelect
-  ]);
+    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.27",
+  "version": "1.10.28",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",