@netlify/spark-ui 0.0.46-alpha.2 → 0.0.46-alpha.3

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

@@ -2,6 +2,7 @@ import { ComponentChildren } from 'preact';
 interface Props {
     children: ComponentChildren;
     className?: string;
+    debug?: boolean;
 }
 declare function SearchModal(props?: Props): import("preact").JSX.Element;
 export default SearchModal;

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

@@ -1,42 +1,42 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as v, y as u, d as g } from "../../../../../chunks/hooks.module.CNV9mxng.js";
-import T from "../../../Modal/Modal.js";
+import { A as v, y as u, d as S } from "../../../../../chunks/hooks.module.CNV9mxng.js";
+import L from "../../../Modal/Modal.js";
 import d from "../../../KeyboardKey/KeyboardKey.js";
-import L from "../SearchWindow.js";
-import k from "../SearchInput.js";
-import { useSearch as w } from "../../hooks/useSearch.js";
-import { useSearchLogger as I } from "../../hooks/useSearchLogger.js";
+import k from "../SearchWindow.js";
+import w from "../SearchInput.js";
+import { useSearch as I } from "../../hooks/useSearch.js";
+import { useSearchLogger as b } from "../../hooks/useSearchLogger.js";
 import { useKeyboardNav as O } from "../../hooks/useKeyboardNav.js";
 import { useSearchHotkeys as P } from "../../hooks/useSearchHotkeys.js";
 import { useSearchParams as E } from "../../hooks/useSearchParams.js";
 import { useSearchToggles as K } from "../../hooks/useSearchToggles.js";
-import '../../../../../assets/SearchModal.css';function M(s) {
+import '../../../../../assets/SearchModal.css';function M(o) {
   const r = v(null);
   return u(() => {
     function t(i) {
-      r.current && !r.current.contains(i.target) && s();
+      r.current && !r.current.contains(i.target) && o();
     }
     return document.addEventListener("mousedown", t), () => {
       document.removeEventListener("mousedown", t);
     };
-  }, [s]), r;
+  }, [o]), r;
 }
-function z(s = { className: "", children: null }) {
-  const [r, t] = g(!1);
+function B(o = { className: "", children: null, debug: !1 }) {
+  const [r, t] = S(!1);
   u(() => {
     let c;
-    const S = () => {
+    const g = () => {
       window.pagefind && (t(!0), c && clearInterval(c));
     };
-    return S(), c = setInterval(S, 100), () => clearInterval(c);
+    return g(), c = setInterval(g, 100), () => clearInterval(c);
   }, []);
-  const { children: i, className: f, ...N } = s, { state: a, actions: h } = w(), [n, p] = g(!1), m = () => p(!0), l = () => p(!1), o = v(null), y = M(l);
-  return I(a), K(r, m), E(r, h.setSearchTerm, m), P(r, n, m, l), O(r, o, n, l), u(() => {
-    o.current && (n ? o.current.showModal() : o.current.close());
-  }, [n]), /* @__PURE__ */ e(T, { ref: o, className: `n-search-modal ${f || ""}`, ...N, children: /* @__PURE__ */ e("div", { ref: y, className: "n-search-container", children: [
-    /* @__PURE__ */ e(k, { setSearchTerm: h.setSearchTerm, initialValue: a.searchTerm }),
+  const { children: i, className: f, debug: N, ...y } = o, { state: a, actions: h } = I(), [n, p] = S(!1), m = () => p(!0), l = () => p(!1), s = v(null), T = M(l);
+  return b(a, N), K(r, m), E(r, h.setSearchTerm, m), P(r, n, m, l), O(r, s, n, l), u(() => {
+    s.current && (n ? s.current.showModal() : s.current.close());
+  }, [n]), /* @__PURE__ */ e(L, { ref: s, className: `n-search-modal ${f || ""}`, ...y, children: /* @__PURE__ */ e("div", { ref: T, className: "n-search-container", children: [
+    /* @__PURE__ */ e(w, { setSearchTerm: h.setSearchTerm, initialValue: a.searchTerm }),
     /* @__PURE__ */ e(
-      L,
+      k,
       {
         searchLoading: a.isLoading,
         searchTerm: a.searchTerm,
@@ -59,5 +59,5 @@ function z(s = { className: "", children: null }) {
   ] }) });
 }
 export {
-  z as default
+  B as default
 };

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

@@ -12,6 +12,7 @@ import { SearchState } from '../types/search.types';
  * @param {SearchState} [state] - The search state, which includes the current search term and the results of the search.
  *   - `state.searchTerm`: The current search query string.
  *   - `state.results`: The search results array. If it's empty, the hook will log a no-results event.
+ * @param {boolean} [debug=false] - Flag to enable debug mode. If true, additional debug information will be sent with the event payloads.
  *
  * @returns {Object} - An object with the following function:
  *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `spark_search:result_clicked` events with the clicked result's title and URL.
@@ -22,6 +23,6 @@ import { SearchState } from '../types/search.types';
  * // In your component, attach handleClick to the search result links
  * <a href="result-url" onClick={handleClick}>Search Result</a>
  */
-export declare function useSearchLogger(state?: SearchState): {
+export declare function useSearchLogger(state?: SearchState, debug?: boolean): {
     handleClick: (e: Event) => void;
 };

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

@@ -1,33 +1,37 @@
-import { A as k, y as u, q as f } from "../../../../chunks/hooks.module.CNV9mxng.js";
-class g {
+import { A as k, y as h, q as m } from "../../../../chunks/hooks.module.CNV9mxng.js";
+class y {
   /**
    * Pushes an event payload into the dataLayer.
    * @param eventName e.g. 'www:search_query_changed'
    * @param payload   additional key/value data
    */
-  track(n, c = {}) {
-    gtag("event", n, { ...c });
+  track(l, u = {}) {
+    gtag("event", l, { ...u });
   }
 }
-function T(r) {
-  const c = k(new g()).current;
-  return u(() => {
-    r != null && r.searchTerm && c.track("spark_search:query_changed", { query: r == null ? void 0 : r.searchTerm });
-  }, [r == null ? void 0 : r.searchTerm]), u(() => {
-    r != null && r.results && r != null && r.searchTerm && r.results.length === 0 && c.track("spark_search:no_results", { query: r == null ? void 0 : r.searchTerm });
+function p(r, l) {
+  const n = k(new y()).current;
+  return h(() => {
+    if (!(r != null && r.searchTerm)) return;
+    const c = { query: r == null ? void 0 : r.searchTerm };
+    l && (c.debug_mode = !0), n.track("spark_search:query_changed", c);
+  }, [r == null ? void 0 : r.searchTerm]), h(() => {
+    if (!(r != null && r.results)) return;
+    const c = { query: r == null ? void 0 : r.searchTerm };
+    l && (c.debug_mode = !0), r != null && r.searchTerm && r.results.length === 0 && n.track("spark_search:no_results", c);
   }, [r == null ? void 0 : r.results]), {
-    handleClick: f((h) => {
-      var e;
-      const l = h.target.closest("a");
-      if (!l) return;
-      const i = (e = l.querySelector(".n-search-link-label")) == null ? void 0 : e.innerHTML, o = l.getAttribute("href");
-      c.track("spark_search:result_clicked", {
-        resultTitle: i,
-        resultUrl: o
-      });
+    handleClick: m((c) => {
+      var i;
+      const e = c.target.closest("a");
+      if (!e) return;
+      const d = (i = e.querySelector(".n-search-link-label")) == null ? void 0 : i.innerHTML, f = e.getAttribute("href"), o = {
+        resultTitle: d,
+        resultUrl: f
+      };
+      l && (o.debug_mode = !0), n.track("spark_search:result_clicked", o);
     }, [])
   };
 }
 export {
-  T as useSearchLogger
+  p as useSearchLogger
 };

package/package.json

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

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

@@ -20,9 +20,10 @@ import './SearchModal.css';
 interface Props {
   children: ComponentChildren;
   className?: string;
+  debug?: boolean
 }
 
-function SearchModal(props: Props = {className: '', children: null}) {
+function SearchModal(props: Props = {className: '', children: null, debug: false }) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
 
   // Poll for the existence of window.pagefind.
@@ -45,7 +46,7 @@ function SearchModal(props: Props = {className: '', children: null}) {
   }, []);
 
 
-  const { children, className, ...rest } = props;
+  const { children, className, debug, ...rest } = props;
   const { state, actions } = useSearch();
   const [searchOpen, setSearchOpen] = useState(false);
 
@@ -55,7 +56,7 @@ function SearchModal(props: Props = {className: '', children: null}) {
   const modalRef = useRef<HTMLDialogElement>(null);
   const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
 
-  useSearchLogger(state)
+  useSearchLogger(state, debug)
   useSearchToggles(isPagefindLoaded,  openSearch);
   useSearchParams(isPagefindLoaded, actions.setSearchTerm, openSearch);
   useSearchHotkeys(isPagefindLoaded, searchOpen, openSearch, closeSearch);

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

@@ -15,52 +15,69 @@ import Analytics from '../../../../analytics/analytics';
  * @param {SearchState} [state] - The search state, which includes the current search term and the results of the search.
  *   - `state.searchTerm`: The current search query string.
  *   - `state.results`: The search results array. If it's empty, the hook will log a no-results event.
- *
+ * @param {boolean} [debug=false] - Flag to enable debug mode. If true, additional debug information will be sent with the event payloads.
+ * 
  * @returns {Object} - An object with the following function:
  *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `spark_search:result_clicked` events with the clicked result's title and URL.
  *
  * @example
  * const { handleClick } = useSearchLogger(searchState);
- * 
+ *
  * // In your component, attach handleClick to the search result links
  * <a href="result-url" onClick={handleClick}>Search Result</a>
  */
 
-export function useSearchLogger(state?: SearchState) {
+export function useSearchLogger(state?: SearchState, debug?: boolean) {
   const ref = useRef<Analytics>(new Analytics());
   const analytics = ref.current;
 
   // Log search query
   useEffect(() => {
-    if (!state?.searchTerm) return 
-    analytics.track('spark_search:query_changed', { query: state?.searchTerm });
+    if (!state?.searchTerm) return;
+    const payload = { query: state?.searchTerm };
+
+    if (debug) {
+      payload.debug_mode = true;
+    }
+
+    analytics.track('spark_search:query_changed', payload);
   }, [state?.searchTerm]);
 
   // Log zero‑hit searches
   useEffect(() => {
-    if (!state?.results) return 
+    if (!state?.results) return;
+
+    const payload = { query: state?.searchTerm };
+
+    if (debug) {
+      payload.debug_mode = true;
+    }
 
     if (state?.searchTerm && state.results.length === 0) {
-      analytics.track('spark_search:no_results', { query: state?.searchTerm });
+      analytics.track('spark_search:no_results', payload);
     }
   }, [state?.results]);
 
   const handleResultClick = useCallback((e: Event) => {
     const anchor = (e.target as HTMLElement).closest('a');
-    
-    if (!anchor) return
 
-    const label = anchor.querySelector('.n-search-link-label')?.innerHTML
-    const url = anchor.getAttribute('href')
+    if (!anchor) return;
 
-    analytics.track('spark_search:result_clicked', {
+    const label = anchor.querySelector('.n-search-link-label')?.innerHTML;
+    const url = anchor.getAttribute('href');
+    const payload = {
       resultTitle: label,
       resultUrl: url,
-    });
-  }, []);
+    };
 
+    if (debug) {
+      payload.debug_mode = true;
+    }
+
+    analytics.track('spark_search:result_clicked', payload);
+  }, []);
 
   return {
-    handleClick: handleResultClick
+    handleClick: handleResultClick,
   };
 }