@cboxdk/cbox-ui 0.10.1 → 0.10.2

package/dist/index.js

@@ -2011,6 +2011,7 @@ function CommandPalette({ onClose }) {
   const [input, setInput] = useState("");
   const [query2, setQuery] = useState("");
   const [groups, setGroups] = useState({});
+  const [groupsFor, setGroupsFor] = useState("");
   const [expanded, setExpanded] = useState(null);
   const [activeKey, setActiveKey] = useState(null);
   const field = useRef(null);
@@ -2037,14 +2038,15 @@ function CommandPalette({ onClose }) {
     const q2 = query2.trim();
     const controller = new AbortController();
     const run = (key, load) => {
-      setGroups((current) => ({ ...current, [key]: { status: "loading", items: current[key]?.items ?? [] } }));
+      setGroups((current2) => ({ ...current2, [key]: { status: "loading", items: current2[key]?.items ?? [] } }));
       load().then((items) => {
-        if (!controller.signal.aborted) setGroups((current) => ({ ...current, [key]: { status: "ready", items } }));
+        if (!controller.signal.aborted) setGroups((current2) => ({ ...current2, [key]: { status: "ready", items } }));
       }).catch(() => {
-        if (!controller.signal.aborted) setGroups((current) => ({ ...current, [key]: { status: "error", items: [] } }));
+        if (!controller.signal.aborted) setGroups((current2) => ({ ...current2, [key]: { status: "error", items: [] } }));
       });
     };
     const signal = controller.signal;
+    setGroupsFor(q2);
     if (q2 === "") {
       setGroups({});
       return () => controller.abort();
@@ -2181,8 +2183,14 @@ function CommandPalette({ onClose }) {
     return { ...section, start, count: items.length + (more ? 1 : 0) };
   });
   const keyOf = (option) => option.kind === "item" ? `${option.group}:${option.item.id}` : `all:${option.group}`;
-  const found = activeKey === null ? -1 : options.findIndex((option) => keyOf(option) === activeKey);
-  const active = found >= 0 ? found : 0;
+  const debounced = q === query2.trim() && groupsFor === q;
+  const current = (group) => group === "pages" || group === "actions" || debounced && sections.find((section) => section.key === group)?.state.status === "ready";
+  const busy = !debounced || sections.some((section) => section.state.status === "loading");
+  const firstResult = options.find((option) => option.group !== "ask" && current(option.group));
+  const autoKey = firstResult !== void 0 ? keyOf(firstResult) : !busy && options[0] !== void 0 ? keyOf(options[0]) : null;
+  const indexOf = (key) => key === null ? -1 : options.findIndex((option) => keyOf(option) === key);
+  const found = indexOf(activeKey);
+  const active = found >= 0 ? found : indexOf(autoKey);
   const setActive = (next) => {
     const index = typeof next === "function" ? next(active) : next;
     const option = options[index];
@@ -2191,10 +2199,9 @@ function CommandPalette({ onClose }) {
   useEffect(() => {
     setActiveKey(null);
   }, [q]);
-  const firstKey = options[0] === void 0 ? null : keyOf(options[0]);
   useEffect(() => {
-    if (activeKey === null && firstKey !== null) setActiveKey(firstKey);
-  }, [activeKey, firstKey]);
+    if (activeKey === null && autoKey !== null) setActiveKey(autoKey);
+  }, [activeKey, autoKey]);
   useEffect(() => {
     revealInList(`${id}-${active}`);
   }, [active, id]);