qt-ui-kit 1.0.106 → 1.0.107

package/dist/index.d.mts

@@ -162,8 +162,10 @@ type Props$2 = {
     results?: SearchResult[];
     initialText?: string;
     onUpdate?: (query: string) => void;
+    /** Optional debounce for onUpdate calls (ms). Defaults to 250ms. */
+    debounceMs?: number;
 };
-declare function SearchBar({ loading, results, initialText, onUpdate, }: Props$2): react_jsx_runtime.JSX.Element;
+declare function SearchBar({ loading, results, initialText, onUpdate, debounceMs, }: Props$2): react_jsx_runtime.JSX.Element;
 
 type FilterButtonKey = "fires" | "unread" | "done" | "more" | IntegrationService;
 type NavButtonConfig = {

package/dist/index.d.ts

@@ -162,8 +162,10 @@ type Props$2 = {
     results?: SearchResult[];
     initialText?: string;
     onUpdate?: (query: string) => void;
+    /** Optional debounce for onUpdate calls (ms). Defaults to 250ms. */
+    debounceMs?: number;
 };
-declare function SearchBar({ loading, results, initialText, onUpdate, }: Props$2): react_jsx_runtime.JSX.Element;
+declare function SearchBar({ loading, results, initialText, onUpdate, debounceMs, }: Props$2): react_jsx_runtime.JSX.Element;
 
 type FilterButtonKey = "fires" | "unread" | "done" | "more" | IntegrationService;
 type NavButtonConfig = {

package/dist/index.js

@@ -16894,28 +16894,58 @@ function Search({
 // src/components/organisms/search_bar/search_bar.tsx
 var import_react5 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
+var ResultsList = (0, import_react5.memo)(function ResultsList2({
+  results
+}) {
+  if (!results) return null;
+  const totalCount = (0, import_react5.useMemo)(
+    () => results.reduce((acc, r) => acc + r.count, 0),
+    [results]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "text-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "text-gray-700 font-medium", children: [
+      "Search results",
+      totalCount > 0 ? ` (${totalCount})` : "",
+      ":"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-wrap gap-2 mt-2", children: results.map((r) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      "span",
+      {
+        className: "px-3 py-1 rounded-full bg-gray-100 text-gray-700",
+        children: [
+          r.label,
+          r.count > 0 ? ` (${r.count})` : ""
+        ]
+      },
+      r.label
+    )) })
+  ] });
+});
 function SearchBar({
   loading,
   results,
   initialText,
-  onUpdate
+  onUpdate,
+  debounceMs = 250
 }) {
-  const [query, setQuery] = (0, import_react5.useState)("");
+  const [query, setQuery] = (0, import_react5.useState)(initialText ?? "");
+  const onUpdateRef = (0, import_react5.useRef)(onUpdate);
   (0, import_react5.useEffect)(() => {
-    if (!onUpdate) {
-      return;
-    }
-    onUpdate(query);
-  }, [query]);
+    onUpdateRef.current = onUpdate;
+  }, [onUpdate]);
   (0, import_react5.useEffect)(() => {
-    if (initialText) {
+    if (initialText !== void 0) {
       setQuery(initialText);
     }
   }, [initialText]);
-  const clearQuery = () => {
-    setQuery("");
-  };
-  const totalCount = results?.reduce((acc, r) => acc + r.count, 0) ?? 0;
+  (0, import_react5.useEffect)(() => {
+    if (!onUpdateRef.current) return;
+    const id = window.setTimeout(() => {
+      onUpdateRef.current?.(query);
+    }, Math.max(0, debounceMs));
+    return () => window.clearTimeout(id);
+  }, [query, debounceMs]);
+  const clearQuery = (0, import_react5.useCallback)(() => setQuery(""), []);
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "w-full space-y-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center px-4 py-2 rounded-full bg-gray-100 gap-2 text-gray-900", children: [
       loading ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Loading, {}) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Search, {}),
@@ -16926,29 +16956,13 @@ function SearchBar({
           className: "flex-1 bg-transparent outline-none placeholder:text-gray-400",
           placeholder: "Search your filtered queue",
           value: query,
-          onChange: (e) => setQuery(e.target.value)
+          onChange: (e) => setQuery(e.currentTarget.value),
+          "aria-label": "Search"
         }
       ),
-      query && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { onClick: clearQuery, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CircleX, {}) })
+      query && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { onClick: clearQuery, "aria-label": "Clear search", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CircleX, {}) })
     ] }),
-    results && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "text-gray-700 font-medium", children: [
-        "Search results",
-        totalCount > 0 ? ` (${totalCount})` : "",
-        ":"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-wrap gap-2 mt-2", children: results.map((r) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-        "span",
-        {
-          className: "px-3 py-1 rounded-full bg-gray-100 text-gray-700",
-          children: [
-            r.label,
-            r.count > 0 ? ` (${r.count})` : ""
-          ]
-        },
-        r.label
-      )) })
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ResultsList, { results })
   ] });
 }