@netlify/spark-ui 0.0.24 → 0.0.26

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

@@ -1,98 +1,106 @@
-import { u as s } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.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";
-import T from "../SearchInput.js";
-import { useSearch as b } from "../../hooks/useSearch.js";
-import { useKeyboardNav as w } from "../../hooks/useKeyboardNav.js";
+import { u as n } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import { A as O, y as v, d as N } from "../../../../../chunks/hooks.module.BFfOesdf.js";
+import T from "../../../Modal/Modal.js";
+import p from "../../../KeyboardKey/KeyboardKey.js";
+import b from "../SearchWindow.js";
+import I from "../SearchInput.js";
+import { useSearch as L } from "../../hooks/useSearch.js";
+import { useKeyboardNav as P } from "../../hooks/useKeyboardNav.js";
 import { useSearchHotkeys as E } from "../../hooks/useSearchHotkeys.js";
-import { useSearchParams as g } from "../../hooks/useSearchParams.js";
-import { useSearchToggles as j } from "../../hooks/useSearchToggles.js";
+import { useSearchParams as j } from "../../hooks/useSearchParams.js";
+import { useSearchToggles as k } from "../../hooks/useSearchToggles.js";
 import '../../../../../assets/SearchModal.css';function x(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var p = { exports: {} };
+var h = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-var d;
+var w;
 function C() {
-  return d || (d = 1, function(t) {
+  return w || (w = 1, function(t) {
     (function() {
-      var a = {}.hasOwnProperty;
-      function n() {
+      var s = {}.hasOwnProperty;
+      function o() {
         for (var e = "", r = 0; r < arguments.length; r++) {
-          var o = arguments[r];
-          o && (e = c(e, i(o)));
+          var a = arguments[r];
+          a && (e = l(e, c(a)));
         }
         return e;
       }
-      function i(e) {
+      function c(e) {
         if (typeof e == "string" || typeof e == "number")
           return e;
         if (typeof e != "object")
           return "";
         if (Array.isArray(e))
-          return n.apply(null, e);
+          return o.apply(null, e);
         if (e.toString !== Object.prototype.toString && !e.toString.toString().includes("[native code]"))
           return e.toString();
         var r = "";
-        for (var o in e)
-          a.call(e, o) && e[o] && (r = c(r, o));
+        for (var a in e)
+          s.call(e, a) && e[a] && (r = l(r, a));
         return r;
       }
-      function c(e, r) {
+      function l(e, r) {
         return r ? e ? e + " " + r : e + r : e;
       }
-      t.exports ? (n.default = n, t.exports = n) : window.classNames = n;
+      t.exports ? (o.default = o, t.exports = o) : window.classNames = o;
     })();
-  }(p)), p.exports;
+  }(h)), h.exports;
 }
-var L = C();
-const M = /* @__PURE__ */ x(L);
-function k(t) {
-  const a = h(null);
-  return S(() => {
-    function n(i) {
-      a.current && !a.current.contains(i.target) && t();
+var M = C();
+const A = /* @__PURE__ */ x(M);
+function K(t) {
+  const s = O(null);
+  return v(() => {
+    function o(c) {
+      s.current && !s.current.contains(c.target) && t();
     }
-    return document.addEventListener("mousedown", n), () => {
-      document.removeEventListener("mousedown", n);
+    return document.addEventListener("mousedown", o), () => {
+      document.removeEventListener("mousedown", o);
     };
-  }, [t]), a;
+  }, [t]), s;
 }
-function W(t = { className: "", children: null }) {
-  const { children: a, className: n, ...i } = t, { state: c, actions: e } = b(), [r, o] = v(!1), l = () => o(!0), m = () => o(!1), u = h(null), y = k(m);
-  return j(l), g(e.setSearchTerm, l), E(r, l, m), w(u, r, m), S(() => {
-    u.current && (r ? u.current.showModal() : u.current.close());
-  }, [r]), /* @__PURE__ */ s(N, { ref: u, className: M(n, "n-search-modal"), ...i, children: /* @__PURE__ */ s("div", { ref: y, className: "n-search-container", children: [
-    /* @__PURE__ */ s("form", { className: "n-search-bar", children: /* @__PURE__ */ s(T, { setSearchTerm: e.setSearchTerm, initialValue: c.searchTerm }) }),
-    /* @__PURE__ */ s(
-      O,
+function J(t = { className: "", children: null }) {
+  const [s, o] = N(!1);
+  v(() => {
+    let f;
+    const y = () => {
+      window.pagefind && (o(!0), f && clearInterval(f));
+    };
+    return y(), f = setInterval(y, 100), () => clearInterval(f);
+  }, []);
+  const { children: c, className: l, ...e } = t, { state: r, actions: a } = L(), [u, S] = N(!1), m = () => S(!0), d = () => S(!1), i = O(null), g = K(d);
+  return k(s, m), j(s, a.setSearchTerm, m), E(s, u, m, d), P(s, i, u, d), v(() => {
+    i.current && (u ? i.current.showModal() : i.current.close());
+  }, [u]), /* @__PURE__ */ n(T, { ref: i, className: A(l, "n-search-modal"), ...e, children: /* @__PURE__ */ n("div", { ref: g, className: "n-search-container", children: [
+    /* @__PURE__ */ n(I, { setSearchTerm: a.setSearchTerm, initialValue: r.searchTerm }),
+    /* @__PURE__ */ n(
+      b,
       {
-        searchLoading: c.isLoading,
-        searchTerm: c.searchTerm,
-        results: c.results,
-        children: a
+        searchLoading: r.isLoading,
+        searchTerm: r.searchTerm,
+        results: r.results,
+        children: c
       }
     ),
-    /* @__PURE__ */ s("div", { className: "n-search-footer", children: [
-      /* @__PURE__ */ s("p", { className: "n-search-footer-tip", children: [
-        /* @__PURE__ */ s(f, { keyNames: ["Esc"] }),
+    /* @__PURE__ */ n("div", { className: "n-search-footer", children: [
+      /* @__PURE__ */ n("p", { className: "n-search-footer-tip", children: [
+        /* @__PURE__ */ n(p, { keyNames: ["Esc"] }),
         "to close"
       ] }),
-      /* @__PURE__ */ s("p", { className: "n-search-footer-tip", children: [
-        /* @__PURE__ */ s(f, { keyNames: ["Tab"] }),
-        /* @__PURE__ */ s("span", { children: "or" }),
-        /* @__PURE__ */ s(f, { keyNames: ["↑", "↓"] }),
+      /* @__PURE__ */ n("p", { className: "n-search-footer-tip", children: [
+        /* @__PURE__ */ n(p, { keyNames: ["Tab"] }),
+        /* @__PURE__ */ n("span", { children: "or" }),
+        /* @__PURE__ */ n(p, { keyNames: ["↑", "↓"] }),
         "to navigate"
       ] })
     ] })
   ] }) });
 }
 export {
-  W as default
+  J as default
 };

package/dist/components/preact/SearchModal/hooks/useKeyboardNav.d.ts

@@ -11,4 +11,4 @@ import { RefObject } from 'preact';
  * @param isOpen - Boolean indicating whether the navigation context is active
  * @param onClose - Callback to close the navigation UI when `Escape` is pressed
  */
-export declare function useKeyboardNav(containerRef: RefObject<HTMLElement>, isOpen: boolean, onClose: () => void): void;
+export declare function useKeyboardNav(isPagefindLoaded: boolean, containerRef: RefObject<HTMLElement>, isOpen: boolean, onClose: () => void): void;

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

@@ -1,24 +1,25 @@
-import { y as a } from "../../../../chunks/hooks.module.BFfOesdf.js";
-function l(r, t, o) {
-  a(() => {
-    const c = (e) => {
-      if (t) {
+import { y as l } from "../../../../chunks/hooks.module.BFfOesdf.js";
+function s(r, t, o, c) {
+  l(() => {
+    if (!r) return;
+    const u = (e) => {
+      if (o) {
         if (e.key === "Escape") {
-          o();
+          c();
           return;
         }
         if (e.key === "ArrowUp" || e.key === "ArrowDown") {
           e.preventDefault();
-          const d = r.current;
+          const d = t.current;
           if (!d) return;
-          const n = Array.from(d.querySelectorAll("a")), u = n.findIndex((i) => i === document.activeElement), y = e.key === "ArrowDown" ? (u + 1) % n.length : (u - 1 + n.length) % n.length;
-          n[y].focus();
+          const n = Array.from(d.querySelectorAll("a")), y = n.findIndex((i) => i === document.activeElement), f = e.key === "ArrowDown" ? (y + 1) % n.length : (y - 1 + n.length) % n.length;
+          n[f].focus();
         }
       }
     };
-    return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
-  }, [r, t, o]);
+    return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
+  }, [r, t, o, c]);
 }
 export {
-  l as useKeyboardNav
+  s as useKeyboardNav
 };

package/dist/components/preact/SearchModal/hooks/useSearchHotkeys.d.ts

@@ -10,4 +10,4 @@
  * @param onOpen - Callback to open the search interface.
  * @param onClose - Callback to close the search interface.
  */
-export declare function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: () => void): void;
+export declare function useSearchHotkeys(isPagefindLoaded: boolean, isOpen: boolean, onOpen: () => void, onClose: () => void): void;

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

@@ -1,12 +1,13 @@
-import { y as d } from "../../../../chunks/hooks.module.BFfOesdf.js";
-function m(t, n, o) {
-  d(() => {
-    const r = (e) => {
-      e.metaKey && e.key === "k" && (e.preventDefault(), e.stopImmediatePropagation(), t ? o() : n());
+import { y as u } from "../../../../chunks/hooks.module.BFfOesdf.js";
+function a(t, r, n, o) {
+  u(() => {
+    if (!t) return;
+    const m = (e) => {
+      e.metaKey && e.key === "k" && (e.preventDefault(), e.stopImmediatePropagation(), r ? o() : n());
     };
-    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
-  }, [t, n, o]);
+    return document.addEventListener("keydown", m), () => document.removeEventListener("keydown", m);
+  }, [t, r, n, o]);
 }
 export {
-  m as useSearchHotkeys
+  a as useSearchHotkeys
 };

package/dist/components/preact/SearchModal/hooks/useSearchParams.d.ts

@@ -8,4 +8,4 @@
  * @param setSearchTerm - Function to update the search input state.
  * @param onOpen - Function to trigger opening of the search interface (e.g., modal or drawer).
  */
-export declare function useSearchParams(setSearchTerm: (term: string) => void, onOpen: () => void): void;
+export declare function useSearchParams(isPagefindLoaded: boolean, setSearchTerm: (term: string) => void, onOpen: () => void): void;

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

@@ -1,11 +1,11 @@
-import { y as e } from "../../../../chunks/hooks.module.BFfOesdf.js";
-function t(a, o) {
-  e(() => {
-    if (typeof location > "u") return;
-    const r = (location == null ? void 0 : location.search) && new URLSearchParams(location.search).get("search");
-    r && (a(r), o());
-  }, [a, o]);
+import { y as c } from "../../../../chunks/hooks.module.BFfOesdf.js";
+function n(r, o, a) {
+  c(() => {
+    if (typeof location > "u" || r) return;
+    const e = (location == null ? void 0 : location.search) && new URLSearchParams(location.search).get("search");
+    e && (o(e), a());
+  }, [r]);
 }
 export {
-  t as useSearchParams
+  n as useSearchParams
 };

package/dist/components/preact/SearchModal/hooks/useSearchToggles.d.ts

@@ -9,4 +9,4 @@
  *
  * @param onOpen - A function to be called when a toggle element is clicked.
  */
-export declare function useSearchToggles(onOpen: () => void): void;
+export declare function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void): void;

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

@@ -1,15 +1,16 @@
-import { y as c } from "../../../../chunks/hooks.module.BFfOesdf.js";
-function l(t) {
-  c(() => {
-    const r = document.querySelectorAll("[data-ntl-search-toggle]");
-    if (r.length)
-      return r.forEach((e) => {
-        e.removeAttribute("disabled"), e.addEventListener("click", t);
+import { y as l } from "../../../../chunks/hooks.module.BFfOesdf.js";
+function i(c, r) {
+  l(() => {
+    if (!c) return;
+    const t = document.querySelectorAll("[data-ntl-search-toggle]");
+    if (t.length)
+      return t.forEach((e) => {
+        e.removeAttribute("disabled"), e.addEventListener("click", r);
       }), () => {
-        r.forEach((e) => e.removeEventListener("click", t));
+        t.forEach((e) => e.removeEventListener("click", r));
       };
-  }, [t]);
+  }, [c, r]);
 }
 export {
-  l as useSearchToggles
+  i as useSearchToggles
 };

package/package.json

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

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

@@ -2,11 +2,11 @@ import { type ComponentChildren } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 import cn from "classnames"
 
-import Modal from '@components/preact/Modal/Modal';
-import KeyboardKey from '@components/preact/KeyboardKey/KeyboardKey';
+import Modal from '../../../../preact/Modal/Modal';
+import KeyboardKey from '../../../../preact/KeyboardKey/KeyboardKey';
 import SearchWindow from '../../components/SearchWindow';
 import SearchInput from '../../components/SearchInput';
-import { useClickOutside } from '@utils/useClickOutside';
+import { useClickOutside } from '../../../../../utils/useClickOutside';
 import {
   useSearch,
   useKeyboardNav,
@@ -23,6 +23,28 @@ interface Props {
 }
 
 function SearchModal(props: Props = {className: '', children: null}) {
+  const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
+
+  // Poll for the existence of window.pagefind.
+  useEffect(() => {
+    let intervalId:number;
+
+    const checkForPagefind = () => {
+      if (window.pagefind) {
+        setIsPagefindLoaded(true);
+        if (intervalId) clearInterval(intervalId);
+      }
+    };
+
+    // Check immediately and then start polling every 100ms.
+    checkForPagefind();
+    intervalId = setInterval(checkForPagefind, 100);
+
+    // Cleanup the interval when the component unmounts.
+    return () => clearInterval(intervalId);
+  }, []);
+
+
   const { children, className, ...rest } = props;
   const { state, actions } = useSearch();
   const [searchOpen, setSearchOpen] = useState(false);
@@ -33,10 +55,10 @@ function SearchModal(props: Props = {className: '', children: null}) {
   const modalRef = useRef<HTMLDialogElement>(null);
   const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
 
-  useSearchToggles(openSearch);
-  useSearchParams(actions.setSearchTerm, openSearch);
-  useSearchHotkeys(searchOpen, openSearch, closeSearch);
-  useKeyboardNav(modalRef, searchOpen, closeSearch);
+  useSearchToggles(isPagefindLoaded, openSearch);
+  useSearchParams(isPagefindLoaded, actions.setSearchTerm, openSearch);
+  useSearchHotkeys(isPagefindLoaded, searchOpen, openSearch, closeSearch);
+  useKeyboardNav(isPagefindLoaded, modalRef, searchOpen, closeSearch);
 
   useEffect(() => {
     if (!modalRef.current) return;
@@ -46,9 +68,7 @@ function SearchModal(props: Props = {className: '', children: null}) {
   return (
     <Modal ref={modalRef} className={cn(className, 'n-search-modal')} {...rest}>
       <div ref={containerRef} className="n-search-container">
-        <form className="n-search-bar">
           <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
-        </form>
 
         <SearchWindow
           searchLoading={state.isLoading}

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

@@ -15,11 +15,13 @@ import { useEffect } from 'preact/hooks';
  */
 
 export function useKeyboardNav(
+  isPagefindLoaded: boolean,
   containerRef: RefObject<HTMLElement>,
   isOpen: boolean,
   onClose: () => void
 ) {
   useEffect(() => {
+    if (!isPagefindLoaded) return 
     const handleKeydown = (e: KeyboardEvent) => {
       if (!isOpen) return;
 
@@ -46,5 +48,5 @@ export function useKeyboardNav(
 
     document.addEventListener('keydown', handleKeydown);
     return () => document.removeEventListener('keydown', handleKeydown);
-  }, [containerRef, isOpen, onClose]);
+  }, [isPagefindLoaded, containerRef, isOpen, onClose]);
 }

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

@@ -30,7 +30,6 @@ export function useSearch() {
   const submitSearch = async (query: string) => {
     if (!window?.pagefind) return;
 
-
     setSearchState(prev => ({ ...prev, isLoading: true }));
     
     if (cacheRef.current.has(query)) {

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

@@ -13,8 +13,10 @@ import { useEffect } from 'preact/hooks';
  * @param onClose - Callback to close the search interface.
  */
 
-export function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: () => void) {
+export function useSearchHotkeys(isPagefindLoaded: boolean, isOpen: boolean, onOpen: () => void, onClose: () => void) {
   useEffect(() => {
+    if (!isPagefindLoaded) return;
+    
     const handleKeydown = (e: KeyboardEvent) => {
       if (e.metaKey && e.key === 'k') {
         e.preventDefault();
@@ -25,5 +27,5 @@ export function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: (
 
     document.addEventListener('keydown', handleKeydown);
     return () => document.removeEventListener('keydown', handleKeydown);
-  }, [isOpen, onOpen, onClose]);
+  }, [isPagefindLoaded, isOpen, onOpen, onClose]);
 }

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

@@ -11,13 +11,13 @@ import { useEffect } from 'preact/hooks';
  * @param onOpen - Function to trigger opening of the search interface (e.g., modal or drawer).
  */
 
-export function useSearchParams(setSearchTerm: (term: string) => void, onOpen: () => void) {
+export function useSearchParams(isPagefindLoaded: boolean, setSearchTerm: (term: string) => void, onOpen: () => void) {
   useEffect(() => {
-    if (typeof location === 'undefined') return;
+    if (typeof location === 'undefined' || isPagefindLoaded) return;
     const query = location?.search && new URLSearchParams(location.search).get('search');
     if (query) {
       setSearchTerm(query);
       onOpen();
     }
-  }, [setSearchTerm, onOpen]);
+  }, [isPagefindLoaded]);
 }

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

@@ -12,8 +12,9 @@ import { useEffect } from 'preact/hooks';
  * @param onOpen - A function to be called when a toggle element is clicked.
  */
 
-export function useSearchToggles(onOpen: () => void) {
+export function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void) {
   useEffect(() => {
+    if (!isPagefindLoaded) return
     const toggles = document.querySelectorAll('[data-ntl-search-toggle]');
 
     if (!toggles.length) return;
@@ -26,5 +27,5 @@ export function useSearchToggles(onOpen: () => void) {
     return () => {
       toggles.forEach(t => t.removeEventListener('click', onOpen));
     };
-  }, [onOpen]);
+  }, [isPagefindLoaded, onOpen]);
 }