@netlify/spark-ui 0.0.42-alpha.1 → 0.0.42-alpha.3

package/dist/chunks/useTimeout.DOkYFG64.js

@@ -0,0 +1,17 @@
+import { A as t, y as o } from "./hooks.module.CNV9mxng.js";
+function f(u, n) {
+  const e = t(null), r = t("");
+  return o(() => () => {
+    e.current && clearTimeout(e.current);
+  }, []), { reset: () => {
+    e.current && clearTimeout(e.current);
+  }, run: (c) => {
+    r.current = c, e.current = setTimeout(
+      () => u(r.current),
+      n
+    );
+  } };
+}
+export {
+  f as u
+};

package/dist/components/preact/SearchModal/components/SearchInput.js

@@ -1,30 +1,33 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { d as i, y as s } from "../../../../chunks/hooks.module.CNV9mxng.js";
-import h from "../../Icon/index.js";
-const m = (a) => {
-  const [t, l] = i(""), c = (r) => {
-    const n = r.target;
-    l(n.value), a.setSearchTerm(n.value);
+import { d as h, y as u } from "../../../../chunks/hooks.module.CNV9mxng.js";
+import { u as o } from "../../../../chunks/useTimeout.DOkYFG64.js";
+import d from "../../Icon/index.js";
+const I = (a) => {
+  const [n, l] = h(""), { reset: r, run: c } = o((t) => {
+    l(t), a.setSearchTerm(t);
+  }, 300), i = (t) => {
+    const s = t.target;
+    r(), c(s.value);
   };
-  return s(() => {
+  return u(() => {
     a.initialValue && l(a.initialValue);
   }, [a.initialValue, l]), /* @__PURE__ */ e("div", { class: "n-search-input-wrapper", children: [
     /* @__PURE__ */ e("label", { class: "n-search-label", htmlFor: "search", children: [
       /* @__PURE__ */ e("span", { class: "visually-hidden", children: "Search" }),
-      /* @__PURE__ */ e("div", { class: "n-search-icon", children: /* @__PURE__ */ e(h, { name: "search" }) })
+      /* @__PURE__ */ e("div", { class: "n-search-icon", children: /* @__PURE__ */ e(d, { name: "search" }) })
     ] }),
     /* @__PURE__ */ e(
       "input",
       {
         class: "n-search-input",
         type: "text",
-        value: t,
+        value: n,
         placeholder: a.placeholder || "Search...",
-        onInput: c
+        onInput: i
       }
     )
   ] });
 };
 export {
-  m as default
+  I as default
 };

package/dist/components/preact/SearchModal/hooks/useSearch.js

@@ -1,61 +1,49 @@
-import { A as i, y as S, d as T } from "../../../../chunks/hooks.module.CNV9mxng.js";
-function L(o, n) {
-  const e = i(null), s = i("");
-  return S(() => () => {
-    e.current && clearTimeout(e.current);
-  }, []), { reset: () => {
-    e.current && clearTimeout(e.current);
-  }, run: (h) => {
-    s.current = h, e.current = setTimeout(
-      () => o(s.current),
-      n
-    );
-  } };
-}
+import { d as g, A as w } from "../../../../chunks/hooks.module.CNV9mxng.js";
+import { u as S } from "../../../../chunks/useTimeout.DOkYFG64.js";
 function x() {
-  const [o, n] = T({
+  const [l, r] = g({
     searchTerm: "",
     results: [],
     isLoading: !1
-  }), e = i(/* @__PURE__ */ new Map()), { reset: s, run: l } = L((t) => {
-    u(t);
-  }, 150), u = async (t) => {
-    var m;
+  }), n = w(/* @__PURE__ */ new Map()), { reset: d, run: h } = S((e) => {
+    c(e);
+  }, 150), c = async (e) => {
+    var i;
     if (!(window != null && window.pagefind)) return;
-    if (n((r) => ({ ...r, isLoading: !0 })), e.current.has(t)) {
-      n((r) => ({
-        ...r,
-        results: e.current.get(t),
+    if (r((a) => ({ ...a, isLoading: !0 })), n.current.has(e)) {
+      r((a) => ({
+        ...a,
+        results: n.current.get(e),
         isLoading: !1
       }));
       return;
     }
-    const a = await window.pagefind.debouncedSearch(t), g = await Promise.all(
-      (m = a == null ? void 0 : a.results) == null ? void 0 : m.slice(0, 15).map(async (r) => {
-        var d, f;
-        const c = await r.data(), p = (w) => w.replace("#", "");
+    const t = await window.pagefind.debouncedSearch(e), m = (t == null ? void 0 : t.results) && await Promise.all(
+      (i = t == null ? void 0 : t.results) == null ? void 0 : i.slice(0, 15).map(async (a) => {
+        var o, u;
+        const s = await a.data(), f = (p) => p.replace("#", "");
         return {
           icon: "pageWithLines",
-          resource: (d = c.meta) == null ? void 0 : d.resource,
-          label: (f = c.meta) == null ? void 0 : f.title,
-          url: c.url,
-          excerpt: p(c.excerpt)
+          resource: (o = s.meta) == null ? void 0 : o.resource,
+          label: (u = s.meta) == null ? void 0 : u.title,
+          url: s.url,
+          excerpt: f(s.excerpt)
         };
       })
     );
-    n((r) => ({
-      ...r,
-      results: g,
+    r((a) => ({
+      ...a,
+      results: m,
       isLoading: !1
     }));
   };
   return {
-    state: o,
+    state: l,
     actions: {
-      setSearchTerm: (t) => {
-        n((a) => ({ ...a, searchTerm: t })), s(), l(t);
+      setSearchTerm: (e) => {
+        r((t) => ({ ...t, searchTerm: e })), d(), h(e);
       },
-      submitSearch: u
+      submitSearch: c
     }
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "0.0.42-alpha.1",
+  "version": "0.0.42-alpha.3",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/components/preact/SearchModal/components/SearchInput.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'preact/hooks';
+import { useTimeout } from '../../../../utils/useTimeout';
 import Icon from '../../Icon';
 
 interface Props {
@@ -10,10 +11,15 @@ interface Props {
 const SearchInput = (props: Props) => {
   const [value, setValue] = useState<string>('');
 
+    const { reset, run } = useTimeout((query: string) => {
+      setValue(query);
+      props.setSearchTerm(query);
+    }, 300);
+
   const handleInput = (e: InputEvent) => {
     const target = e.target as HTMLInputElement;
-    setValue(target.value);
-    props.setSearchTerm(target.value);
+    reset()
+    run(target.value)
   };
 
   useEffect(() => {

package/packages/components/preact/SearchModal/hooks/useSearch.ts

@@ -38,7 +38,7 @@ export function useSearch() {
       return;
     }
     const search = await window.pagefind.debouncedSearch(query);
-    const results = await Promise.all(
+    const results = search?.results && await Promise.all(
       search?.results?.slice(0, 15).map(async (result: any) => {
         const data = await result.data();
         const removeAnchorLink = (text: string) => text.replace("#", '')