@netlify/spark-ui 1.14.0 → 1.14.1

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

@@ -2,7 +2,8 @@ interface Props {
     setModalState?: (e: {
         current: string;
     }) => void;
-    initialQuery?: string;
+    searchQuery?: string;
+    urlParamQuery?: string;
 }
-export default function AskNetlify({ setModalState, initialQuery }: Props): import("preact").JSX.Element;
+export default function AskNetlify({ setModalState, searchQuery, urlParamQuery }: Props): import("preact").JSX.Element;
 export {};

package/dist/components/preact/AskNetlify/AskNetlify.js

@@ -1,6 +1,6 @@
 import "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import "../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as d } from "../../../chunks/AskNetlify.hLTCaFLd.js";
+import { A as d } from "../../../chunks/AskNetlify.WwftmboN.js";
 import "./components/QuestionList/questions.js";
 import "./components/QuestionList/QuestionList.js";
 import "./components/BackButton.js";

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

@@ -1,83 +1,90 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as g, y as h, d as k } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as w, K as b } from "../../../../../chunks/AskNetlify.hLTCaFLd.js";
-import K from "../../../Modal/Modal.js";
-import d from "../../../KeyboardKey/KeyboardKey.js";
-import L from "../SearchWindow.js";
-import M from "../SearchInput.js";
-import O from "../AskNetlifyLink.js";
+import { A as g, y as f, d } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
+import { A as K, K as L } from "../../../../../chunks/AskNetlify.WwftmboN.js";
+import P from "../../../Modal/Modal.js";
+import h from "../../../KeyboardKey/KeyboardKey.js";
+import M from "../SearchWindow.js";
+import O from "../SearchInput.js";
+import Q from "../AskNetlifyLink.js";
 import { useSearch as C } from "../../hooks/useSearch.js";
 import { useSearchAnalytics as E } from "../../hooks/useSearchAnalytics.js";
-import { useKeyboardNav as Q } from "../../hooks/useKeyboardNav.js";
-import { useSearchHotkeys as P } from "../../hooks/useSearchHotkeys.js";
-import { useSearchParams as R } from "../../hooks/useSearchParams.js";
-import { useSearchToggles as q } from "../../hooks/useSearchToggles.js";
-import { useAskAnalytics as x } from "../../../AskNetlify/hooks/useAskAnalytics.js";
+import { useKeyboardNav as R } from "../../hooks/useKeyboardNav.js";
+import { useSearchHotkeys as q } from "../../hooks/useSearchHotkeys.js";
+import { useSearchParams as x } from "../../hooks/useSearchParams.js";
+import { useSearchToggles as D } from "../../hooks/useSearchToggles.js";
+import { useAskAnalytics as F } from "../../../AskNetlify/hooks/useAskAnalytics.js";
 import { Fragment as N } from "preact";
-import '../../../../../assets/SearchModal.css';function D(t) {
+import '../../../../../assets/SearchModal.css';function G(a) {
   const n = g(null);
-  return h(() => {
-    function o(m) {
-      n.current && !n.current.contains(m.target) && t();
+  return f(() => {
+    function s(m) {
+      n.current && !n.current.contains(m.target) && a();
     }
-    return document.addEventListener("mousedown", o), () => {
-      document.removeEventListener("mousedown", o);
+    return document.addEventListener("mousedown", s), () => {
+      document.removeEventListener("mousedown", s);
     };
-  }, [t]), n;
+  }, [a]), n;
 }
-function re(t = { className: "", children: void 0, debug: !1, kapaIntegrationId: void 0 }) {
-  const { children: n, className: o, debug: m, ...T } = t, [c, s] = k({ current: "search" }), [i, f] = k(!1), l = () => f(!0), u = () => f(!1), a = g(null), v = D(u), { state: r, actions: p } = C();
-  q(l, s), R(l, p.setSearchTerm, s), P(i, l, u), Q(a, i, u), E(r, m);
-  const { handleNewQuery: A, handleAnswer: I } = x();
-  return h(() => {
-    a.current && (i ? a.current.showModal() : a.current.close());
-  }, [i]), h(() => {
-    var y;
-    const S = (y = a.current) == null ? void 0 : y.querySelector("input");
-    S && S.focus();
+function te(a = { className: "", children: void 0, debug: !1, kapaIntegrationId: void 0 }) {
+  const { children: n, className: s, debug: m, ...T } = a, [c, o] = d({ current: "search" }), [i, p] = d(!1), [v, A] = d(""), l = () => p(!0), u = () => p(!1), t = g(null), I = G(u), { state: r, actions: S } = C();
+  D(l, o), x(l, S.setSearchTerm, A, o), q(i, l, u), R(t, i, u), E(r, m);
+  const { handleNewQuery: w, handleAnswer: b } = F();
+  return f(() => {
+    t.current && (i ? t.current.showModal() : t.current.close());
+  }, [i]), f(() => {
+    var k;
+    const y = (k = t.current) == null ? void 0 : k.querySelector("input");
+    y && y.focus();
   }, [c.current]), /* @__PURE__ */ e(
-    b,
+    L,
     {
-      integrationId: t.kapaIntegrationId || "",
+      integrationId: a.kapaIntegrationId || "",
       callbacks: {
         askAI: {
-          onQuerySubmit: A,
-          onAnswerGenerationCompleted: I
+          onQuerySubmit: w,
+          onAnswerGenerationCompleted: b
         }
       },
       children: /* @__PURE__ */ e(
-        K,
+        P,
         {
-          ref: a,
-          className: `n-search-modal ${o || ""}`,
+          ref: t,
+          className: `n-search-modal ${s || ""}`,
           "data-state": c.current,
           ...T,
-          children: /* @__PURE__ */ e("div", { ref: v, className: "n-search-container", children: [
-            c.current === "ask" && /* @__PURE__ */ e(w, { setModalState: s, initialQuery: r.searchTerm }),
+          children: /* @__PURE__ */ e("div", { ref: I, className: "n-search-container", children: [
+            c.current === "ask" && /* @__PURE__ */ e(
+              K,
+              {
+                setModalState: o,
+                searchQuery: r.searchTerm,
+                urlParamQuery: v
+              }
+            ),
             c.current === "search" && /* @__PURE__ */ e(N, { children: [
-              /* @__PURE__ */ e(M, { setSearchTerm: p.setSearchTerm, initialValue: r.searchTerm }),
+              /* @__PURE__ */ e(O, { setSearchTerm: S.setSearchTerm, initialValue: r.searchTerm }),
               /* @__PURE__ */ e(
-                L,
+                M,
                 {
-                  setModalState: s,
+                  setModalState: o,
                   searchLoading: r.isLoading,
                   searchTerm: r.searchTerm,
                   results: r.results,
                   children: /* @__PURE__ */ e(N, { children: [
-                    t.kapaIntegrationId && /* @__PURE__ */ e(O, { searchTerm: r.searchTerm, setModalState: s }),
+                    a.kapaIntegrationId && /* @__PURE__ */ e(Q, { searchTerm: r.searchTerm, setModalState: o }),
                     n
                   ] })
                 }
               ),
               /* @__PURE__ */ e("div", { className: "n-search-footer", children: [
                 /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
-                  /* @__PURE__ */ e(d, { keyNames: ["Esc"] }),
+                  /* @__PURE__ */ e(h, { keyNames: ["Esc"] }),
                   "to close"
                 ] }),
                 /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
-                  /* @__PURE__ */ e(d, { keyNames: ["Tab"] }),
+                  /* @__PURE__ */ e(h, { keyNames: ["Tab"] }),
                   /* @__PURE__ */ e("span", { children: "or" }),
-                  /* @__PURE__ */ e(d, { keyNames: ["↑", "↓"] }),
+                  /* @__PURE__ */ e(h, { keyNames: ["↑", "↓"] }),
                   "to navigate"
                 ] })
               ] })
@@ -89,5 +96,5 @@ function re(t = { className: "", children: void 0, debug: !1, kapaIntegrationId:
   );
 }
 export {
-  re as default
+  te as default
 };

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

@@ -15,6 +15,6 @@
  * @param setSearchTerm - Function to update the search input state.
  * @param setModalState - (Optional) Function to set modal state, useful for distinguishing modal views.
  */
-export declare function useSearchParams(onOpen: () => void, setSearchTerm: (term: string) => void, setModalState?: (e: {
+export declare function useSearchParams(onOpen: () => void, setSearchTerm: (term: string) => void, setUrlParamTerm: (term: string) => void, setModalState?: (e: {
     current: string;
 }) => void): void;

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

@@ -1,23 +1,23 @@
-import { d as u, y as t } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-function l(s, a, r) {
-  const [c, d] = u(!1);
+import { d as h, y as t } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+function l(r, a, c, s) {
+  const [i, d] = h(!1);
   t(() => {
-    let e;
-    const n = () => {
-      window.pagefind && (d(!0), e && clearInterval(e));
+    let n;
+    const e = () => {
+      window.pagefind && (d(!0), n && clearInterval(n));
     };
-    return n(), e = setInterval(n, 100), () => clearInterval(e);
+    return e(), n = setInterval(e, 100), () => clearInterval(n);
   }, []), t(() => {
-    if (typeof location > "u" || c) return;
-    const e = new URLSearchParams(location.search), n = e.has("ask"), i = e.get("msg") || e.get("message"), o = e.get("search"), g = (f) => {
-      f && a(f), r == null || r({ current: "ask" }), s();
+    if (typeof location > "u" || i) return;
+    const n = new URLSearchParams(location.search), e = n.has("ask"), f = n.get("msg") || n.get("message"), o = n.get("search"), u = (g) => {
+      g && c(g), s == null || s({ current: "ask" }), r();
     };
-    if (n || i) {
-      g(i);
+    if (e || f) {
+      u(f);
       return;
     }
-    o && (a(o), s());
-  }, [c]);
+    o && (a(o), r());
+  }, [i, r, s, a, c]);
 }
 export {
   l as useSearchParams

package/dist/components/preact/index.js

@@ -4,7 +4,7 @@ import { default as m } from "./Icon/index.js";
 import { default as s } from "./SearchModal/components/SearchLink/SearchLink.js";
 import { default as u } from "./SearchModal/components/SearchHeading/SearchHeading.js";
 import { default as i } from "./SearchModal/components/SearchToggle/SearchToggle.js";
-import { A as S } from "../../chunks/AskNetlify.hLTCaFLd.js";
+import { A as S } from "../../chunks/AskNetlify.WwftmboN.js";
 import "preact";
 import "../../chunks/hooks.module.DGkdD5n9.js";
 import { default as n } from "./SearchModal/components/SearchModal/SearchModal.js";

package/package.json

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

package/packages/components/preact/AskNetlify/AskNetlify.tsx

@@ -11,10 +11,11 @@ import './AskNetlify.css';
 
 interface Props {
   setModalState?: (e: { current: string }) => void;
-  initialQuery?: string;
+  searchQuery?: string;
+  urlParamQuery?: string;
 }
 
-export default function AskNetlify({ setModalState, initialQuery }: Props) {
+export default function AskNetlify({ setModalState, searchQuery, urlParamQuery }: Props) {
   const [message, setMessage] = useState('');
   const [newMessageReady, setNewMessageReady] = useState(false);
   const chatRef = useRef<HTMLDivElement>(null);
@@ -50,35 +51,34 @@ export default function AskNetlify({ setModalState, initialQuery }: Props) {
     }
   }, [newMessageReady]);
 
+  /**
+   * Populates and handles the input when a query is present.
+   *
+   * - If `urlParamQuery` exists, pre-fills the input and waits for user action.
+   * - If `searchQuery` exists, auto-submits the query.
+   *
+   * Focuses the input and marks the message as ready in both cases.
+   */
   useEffect(() => {
-    if (!initialQuery) return;
-
-    const trimmedQuery = initialQuery.trim();
-
-    /**
-     * When reCAPTCHA is ready, we know this was triggered by a user action
-     * (like clicking a button), so we can safely submit the query right away.
-     * If reCAPTCHA isn't ready, the modal was likely opened from an outside source,
-     * in that case, we populate the input and focus it, requiring manual submission
-     * to ensure a user action triggers reCAPTCHA.
-     */
-    if (window.grecaptcha) {
-      window.grecaptcha.enterprise.ready(() => {
-        submitQuery(trimmedQuery);
-      });
-    } else {
+    const trimmedQuery = (urlParamQuery ?? searchQuery ?? '').trim();
+
+    if (urlParamQuery) {
       setMessage(trimmedQuery);
-      inputRef?.current?.focus();
     }
 
+    if (searchQuery) {
+      submitQuery(trimmedQuery);
+    }
+
+    inputRef?.current?.focus();
     setNewMessageReady(true);
-  }, [initialQuery]);
+  }, [setMessage, setNewMessageReady, submitQuery, setMessage, urlParamQuery, searchQuery]);
 
   return (
     <div className="n-ask-chat-container">
       <BackButton onClick={() => setModalState?.({ current: 'search' })} />
       <div ref={chatRef} className="n-ask-conversation n-search-window">
-        {!conversation.length && !initialQuery && (
+        {!conversation.length && !urlParamQuery && !searchQuery && (
           <QuestionList onClick={handleSubmit} menuRef={menuRef} />
         )}
 

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

@@ -37,6 +37,7 @@ function SearchModal(
 
   const [modalState, setModalState] = useState({ current: 'search' });
   const [searchOpen, setSearchOpen] = useState(false);
+  const [urlParamTerm, setUrlParamTerm] = useState('');
   const openSearch = () => setSearchOpen(true);
   const closeSearch = () => setSearchOpen(false);
 
@@ -45,7 +46,7 @@ function SearchModal(
 
   const { state, actions } = useSearch();
   useSearchToggles(openSearch, setModalState);
-  useSearchParams(openSearch, actions.setSearchTerm, setModalState);
+  useSearchParams(openSearch, actions.setSearchTerm, setUrlParamTerm, setModalState);
   useSearchHotkeys(searchOpen, openSearch, closeSearch);
   useKeyboardNav(modalRef, searchOpen, closeSearch);
   useSearchAnalytics(state, debug);
@@ -79,7 +80,11 @@ function SearchModal(
       >
         <div ref={containerRef} className="n-search-container">
           {modalState.current === 'ask' && (
-            <AskNetlify setModalState={setModalState} initialQuery={state.searchTerm} />
+            <AskNetlify
+              setModalState={setModalState}
+              searchQuery={state.searchTerm}
+              urlParamQuery={urlParamTerm}
+            />
           )}
           {modalState.current === 'search' && (
             <>

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

@@ -21,6 +21,7 @@ import { useEffect, useState } from 'preact/hooks';
 export function useSearchParams(
   onOpen: () => void,
   setSearchTerm: (term: string) => void,
+  setUrlParamTerm: (term: string) => void,
   setModalState?: (e: { current: string }) => void
 ) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
@@ -54,7 +55,7 @@ export function useSearchParams(
     const search = params.get('search');
 
     const openAskModal = (term?: string | null) => {
-      if (term) setSearchTerm(term);
+      if (term) setUrlParamTerm(term);
       setModalState?.({ current: 'ask' });
       onOpen();
     };
@@ -68,5 +69,5 @@ export function useSearchParams(
       setSearchTerm(search);
       onOpen();
     }
-  }, [isPagefindLoaded]);
+  }, [isPagefindLoaded, onOpen, setModalState, setSearchTerm, setUrlParamTerm]);
 }