@netlify/spark-ui 0.0.23 → 0.0.24

package/dist/chunks/{compat.module.BPxt-oTe.js → compat.module.AxtqoZMv.js}

@@ -1,5 +1,5 @@
 import { Component as f, options as a, createElement as d, Fragment as h, toChildArray as v } from "preact";
-import "./hooks.module.ExpuRnbo.js";
+import "./hooks.module.BFfOesdf.js";
 function C(e, t) {
   for (var r in t) e[r] = t[r];
   return e;

package/dist/chunks/{hooks.module.ExpuRnbo.js → hooks.module.BFfOesdf.js}

@@ -126,6 +126,7 @@ function W(_, t) {
 }
 export {
   I as A,
+  z as T,
   S as d,
   G as y
 };

package/dist/components/preact/Modal/Modal.js

@@ -1,5 +1,5 @@
 import { u as l } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { D as d } from "../../../chunks/compat.module.BPxt-oTe.js";
+import { D as d } from "../../../chunks/compat.module.AxtqoZMv.js";
 const u = d(function({ children: o, className: r, ...a }, t) {
   return /* @__PURE__ */ l("dialog", { ref: t, className: r, role: "dialog", "aria-modal": "true", ...a, children: o });
 });

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

@@ -1,5 +1,5 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { d as i, y as s } from "../../../../chunks/hooks.module.ExpuRnbo.js";
+import { d as i, y as s } from "../../../../chunks/hooks.module.BFfOesdf.js";
 import h from "../../Icon/index.js";
 const m = (a) => {
   const [t, l] = i(""), c = (r) => {

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

@@ -1,5 +1,5 @@
 import { u as s } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as h, y as S, d as v } from "../../../../../chunks/hooks.module.ExpuRnbo.js";
+import { A as h, y as S, d as v } from "../../../../../chunks/hooks.module.BFfOesdf.js";
 import N from "../../../Modal/Modal.js";
 import f from "../../../KeyboardKey/KeyboardKey.js";
 import O from "../SearchWindow.js";

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

@@ -1,5 +1,5 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { D as t } from "../../../../../chunks/compat.module.BPxt-oTe.js";
+import { D as t } from "../../../../../chunks/compat.module.AxtqoZMv.js";
 import o from "../../../Icon/index.js";
 import '../../../../../assets/SearchToggle.css';const s = t(function(r, a) {
   return /* @__PURE__ */ e("button", { id: r.id, ref: a, class: "n-search-toggle", disabled: !0, "data-ntl-search-toggle": !0, children: [

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

@@ -1,33 +1,41 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import a from "./SearchHeading/SearchHeading.js";
-import c from "./SearchLink/SearchLink.js";
-const t = ({
-  searchLoading: s,
-  searchTerm: l,
+import { T as o } from "../../../../chunks/hooks.module.BFfOesdf.js";
+import t from "./SearchHeading/SearchHeading.js";
+import a from "./SearchLink/SearchLink.js";
+const h = ({
+  searchLoading: i,
+  searchTerm: n,
   results: r
-}) => s ? /* @__PURE__ */ e(a, { children: [
-  "Searching for ",
-  /* @__PURE__ */ e("span", { className: "n-search-term", children: l }),
-  " ..."
-] }) : !r || r.length === 0 ? /* @__PURE__ */ e(a, { children: [
-  "0 results for ",
-  /* @__PURE__ */ e("span", { className: "n-search-term", children: l })
-] }) : /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: r.slice(0, 15).map((i, n) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(c, { ...i }) }, n)) });
-function m({
-  searchLoading: s,
-  searchTerm: l,
+}) => {
+  if (i)
+    return /* @__PURE__ */ e(t, { children: [
+      "Searching for ",
+      /* @__PURE__ */ e("span", { className: "n-search-term", children: n }),
+      " ..."
+    ] });
+  if (!r || r.length === 0)
+    return /* @__PURE__ */ e(t, { children: [
+      "0 results for ",
+      /* @__PURE__ */ e("span", { className: "n-search-term", children: n })
+    ] });
+  const l = o(() => r.map((s, c) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...s }) }, c)), [r]);
+  return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: l });
+};
+function N({
+  searchLoading: i,
+  searchTerm: n,
   results: r,
-  children: i
+  children: l
 }) {
   return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "search-links", children: [
-    /* @__PURE__ */ e(c, { ...{
+    /* @__PURE__ */ e(a, { ...{
       icon: "askNetlify",
       label: "Ask Netlify AI",
       url: "https://docs.netlify.com/ask-netlify/"
     } }),
-    l ? /* @__PURE__ */ e(t, { searchLoading: s, searchTerm: l, results: r }) : i || null
+    n ? /* @__PURE__ */ e(h, { searchLoading: i, searchTerm: n, results: r }) : l || null
   ] }) });
 }
 export {
-  m as default
+  N as default
 };

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

@@ -1,4 +1,4 @@
-import { y as a } from "../../../../chunks/hooks.module.ExpuRnbo.js";
+import { y as a } from "../../../../chunks/hooks.module.BFfOesdf.js";
 function l(r, t, o) {
   a(() => {
     const c = (e) => {

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

@@ -1,36 +1,43 @@
-import { A as h, y as p, d as g } from "../../../../chunks/hooks.module.ExpuRnbo.js";
+import { A as u, y as p, d as w } from "../../../../chunks/hooks.module.BFfOesdf.js";
 import { getSiteIcon as S } from "../utils/index.js";
-function w(s, r) {
-  const t = h(null), c = h("");
+function T(s, r) {
+  const t = u(null), c = u("");
   return p(() => () => {
     t.current && clearTimeout(t.current);
   }, []), { reset: () => {
     t.current && clearTimeout(t.current);
-  }, run: (e) => {
-    c.current = e, t.current = setTimeout(
+  }, run: (h) => {
+    c.current = h, t.current = setTimeout(
       () => s(c.current),
       r
     );
   } };
 }
-function y() {
-  const [s, r] = g({
+function R() {
+  const [s, r] = w({
     searchTerm: "",
     results: [],
     isLoading: !1
-  }), { reset: t, run: c } = w((e) => {
+  }), t = u(/* @__PURE__ */ new Map()), { reset: c, run: l } = T((e) => {
     (e.length > 2 || e.length === 0) && o(e);
   }, 150), o = async (e) => {
     if (!(window != null && window.pagefind)) return;
-    r((n) => ({ ...n, isLoading: !0 }));
-    const i = await window.pagefind.search(e), d = await Promise.all(
-      i.results.map(async (n) => {
-        var u, l, m;
+    if (r((n) => ({ ...n, isLoading: !0 })), t.current.has(e)) {
+      r((n) => ({
+        ...n,
+        results: t.current.get(e),
+        isLoading: !1
+      }));
+      return;
+    }
+    const i = await window.pagefind.search(e), g = await Promise.all(
+      i.results.slice(0, 15).map(async (n) => {
+        var m, f, d;
         const a = await n.data();
         return {
-          icon: S((u = a.meta) == null ? void 0 : u.content_type),
-          content_type: (l = a.meta) == null ? void 0 : l.content_type,
-          label: (m = a.meta) == null ? void 0 : m.title,
+          icon: S((m = a.meta) == null ? void 0 : m.content_type),
+          content_type: (f = a.meta) == null ? void 0 : f.content_type,
+          label: (d = a.meta) == null ? void 0 : d.title,
           url: a.url,
           excerpt: a.excerpt
         };
@@ -38,7 +45,7 @@ function y() {
     );
     r((n) => ({
       ...n,
-      results: d,
+      results: g,
       isLoading: !1
     }));
   };
@@ -46,12 +53,12 @@ function y() {
     state: s,
     actions: {
       setSearchTerm: (e) => {
-        r((i) => ({ ...i, searchTerm: e })), t(), c(e);
+        r((i) => ({ ...i, searchTerm: e })), c(), l(e);
       },
       submitSearch: o
     }
   };
 }
 export {
-  y as useSearch
+  R as useSearch
 };

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

@@ -1,4 +1,4 @@
-import { y as d } from "../../../../chunks/hooks.module.ExpuRnbo.js";
+import { y as d } from "../../../../chunks/hooks.module.BFfOesdf.js";
 function m(t, n, o) {
   d(() => {
     const r = (e) => {

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

@@ -1,4 +1,4 @@
-import { y as e } from "../../../../chunks/hooks.module.ExpuRnbo.js";
+import { y as e } from "../../../../chunks/hooks.module.BFfOesdf.js";
 function t(a, o) {
   e(() => {
     if (typeof location > "u") return;

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

@@ -1,4 +1,4 @@
-import { y as c } from "../../../../chunks/hooks.module.ExpuRnbo.js";
+import { y as c } from "../../../../chunks/hooks.module.BFfOesdf.js";
 function l(t) {
   c(() => {
     const r = document.querySelectorAll("[data-ntl-search-toggle]");

package/dist/components/preact/index.js

@@ -5,7 +5,7 @@ import { default as s } from "./SearchModal/components/SearchLink/SearchLink.js"
 import { default as x } from "./SearchModal/components/SearchHeading/SearchHeading.js";
 import { default as h } from "./SearchModal/components/SearchToggle/SearchToggle.js";
 import "preact";
-import "../../chunks/hooks.module.ExpuRnbo.js";
+import "../../chunks/hooks.module.BFfOesdf.js";
 import { default as S } from "./SearchModal/components/SearchModal/SearchModal.js";
 export {
   m as Icon,

package/package.json

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

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

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from 'preact';
 import type { SearchLinkProps, SearchResultsProps, SearchWindowProps } from '../types/search.types';
+import { useMemo } from 'preact/hooks';
 import SearchHeading from './SearchHeading/SearchHeading';
 import SearchLink from './SearchLink/SearchLink';
 
@@ -25,13 +26,17 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
     );
   }
 
+  const renderedResults = useMemo(() => {
+    return results.map((result, i) => (
+      <li key={i} className="n-results-list-item">
+        <SearchLink {...result} />
+      </li>
+    ));
+  }, [results]);
+
   return (
     <ul className="n-results-list" role="list">
-      {results.slice(0, 15).map((result, idx) => (
-        <li key={idx} className="n-results-list-item">
-          <SearchLink {...result} />
-        </li>
-      ))}
+      {renderedResults}
     </ul>
   );
 };

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

@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useState, useRef } from 'preact/hooks';
 import type { SearchState } from '../types/search.types';
 import { useTimeout } from '../../../../utils/useTimeout';
 import { getSiteIcon } from '../utils';
@@ -19,6 +19,7 @@ export function useSearch() {
     results: [],
     isLoading: false,
   });
+  const cacheRef = useRef(new Map());
 
   const { reset, run } = useTimeout((query: string) => {
     if (query.length > 2 || query.length === 0) {
@@ -29,11 +30,20 @@ export function useSearch() {
   const submitSearch = async (query: string) => {
     if (!window?.pagefind) return;
 
-    setSearchState(prev => ({ ...prev, isLoading: true }));
 
+    setSearchState(prev => ({ ...prev, isLoading: true }));
+    
+    if (cacheRef.current.has(query)) {
+      setSearchState(prev => ({
+        ...prev,
+        results: cacheRef.current.get(query),
+        isLoading: false,
+      }));
+      return;
+    }
     const search = await window.pagefind.search(query);
     const results = await Promise.all(
-      search.results.map(async (result: any) => {
+      search.results.slice(0, 15).map(async (result: any) => {
         const data = await result.data();
         return {
           icon: getSiteIcon(data.meta?.content_type),