qt-ui-kit 1.0.105 → 1.0.107

package/dist/index.mjs

@@ -16864,30 +16864,67 @@ function Search({
 }
 
 // src/components/organisms/search_bar/search_bar.tsx
-import { useState as useState5, useEffect as useEffect3 } from "react";
+import {
+  memo,
+  useEffect as useEffect3,
+  useMemo,
+  useRef,
+  useState as useState5,
+  useCallback
+} from "react";
 import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+var ResultsList = memo(function ResultsList2({
+  results
+}) {
+  if (!results) return null;
+  const totalCount = useMemo(
+    () => results.reduce((acc, r) => acc + r.count, 0),
+    [results]
+  );
+  return /* @__PURE__ */ jsxs29("div", { className: "text-sm", children: [
+    /* @__PURE__ */ jsxs29("p", { className: "text-gray-700 font-medium", children: [
+      "Search results",
+      totalCount > 0 ? ` (${totalCount})` : "",
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx40("div", { className: "flex flex-wrap gap-2 mt-2", children: results.map((r) => /* @__PURE__ */ jsxs29(
+      "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] = useState5("");
+  const [query, setQuery] = useState5(initialText ?? "");
+  const onUpdateRef = useRef(onUpdate);
   useEffect3(() => {
-    if (!onUpdate) {
-      return;
-    }
-    onUpdate(query);
-  }, [query]);
+    onUpdateRef.current = onUpdate;
+  }, [onUpdate]);
   useEffect3(() => {
-    if (initialText) {
+    if (initialText !== void 0) {
       setQuery(initialText);
     }
-  }, []);
-  const clearQuery = () => {
-    setQuery("");
-  };
-  const totalCount = results?.reduce((acc, r) => acc + r.count, 0) ?? 0;
+  }, [initialText]);
+  useEffect3(() => {
+    if (!onUpdateRef.current) return;
+    const id = window.setTimeout(() => {
+      onUpdateRef.current?.(query);
+    }, Math.max(0, debounceMs));
+    return () => window.clearTimeout(id);
+  }, [query, debounceMs]);
+  const clearQuery = useCallback(() => setQuery(""), []);
   return /* @__PURE__ */ jsxs29("div", { className: "w-full space-y-3", children: [
     /* @__PURE__ */ jsxs29("div", { className: "flex items-center px-4 py-2 rounded-full bg-gray-100 gap-2 text-gray-900", children: [
       loading ? /* @__PURE__ */ jsx40(Loading, {}) : /* @__PURE__ */ jsx40(Search, {}),
@@ -16898,29 +16935,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__ */ jsx40("button", { onClick: clearQuery, children: /* @__PURE__ */ jsx40(CircleX, {}) })
+      query && /* @__PURE__ */ jsx40("button", { onClick: clearQuery, "aria-label": "Clear search", className: "shrink-0", children: /* @__PURE__ */ jsx40(CircleX, {}) })
     ] }),
-    results && /* @__PURE__ */ jsxs29("div", { className: "text-sm", children: [
-      /* @__PURE__ */ jsxs29("p", { className: "text-gray-700 font-medium", children: [
-        "Search results",
-        totalCount > 0 ? ` (${totalCount})` : "",
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx40("div", { className: "flex flex-wrap gap-2 mt-2", children: results.map((r) => /* @__PURE__ */ jsxs29(
-        "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__ */ jsx40(ResultsList, { results })
   ] });
 }