@netlify/spark-ui 0.0.25 → 0.0.27

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

@@ -67,18 +67,17 @@ function K(t) {
 function J(t = { className: "", children: null }) {
   const [s, o] = N(!1);
   v(() => {
+    let f;
     const y = () => {
-      window.pagefind && (o(!0), d && clearInterval(d));
+      window.pagefind && (o(!0), f && clearInterval(f));
     };
-    y();
-    const d = setInterval(y, 100);
-    return () => clearInterval(d);
+    return y(), f = setInterval(y, 100), () => clearInterval(f);
   }, []);
-  const { children: c, className: l, ...e } = t, { state: r, actions: a } = L(), [u, S] = N(!1), f = () => S(!0), m = () => S(!1), i = O(null), g = K(m);
-  return k(s, f), j(s, a.setSearchTerm, f), E(s, u, f, m), P(s, i, u, m), v(() => {
+  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("form", { className: "n-search-bar", children: /* @__PURE__ */ n(I, { setSearchTerm: a.setSearchTerm, initialValue: r.searchTerm }) }),
+    /* @__PURE__ */ n(I, { setSearchTerm: a.setSearchTerm, initialValue: r.searchTerm }),
     /* @__PURE__ */ n(
       b,
       {

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

@@ -4,27 +4,27 @@ import t from "./SearchHeading/SearchHeading.js";
 import a from "./SearchLink/SearchLink.js";
 const h = ({
   searchLoading: i,
-  searchTerm: n,
-  results: r
+  searchTerm: r,
+  results: n
 }) => {
   if (i)
     return /* @__PURE__ */ e(t, { children: [
       "Searching for ",
-      /* @__PURE__ */ e("span", { className: "n-search-term", children: n }),
+      /* @__PURE__ */ e("span", { className: "n-search-term", children: r }),
       " ..."
     ] });
-  if (!r || r.length === 0)
+  if (!n || n.length === 0)
     return /* @__PURE__ */ e(t, { children: [
       "0 results for ",
-      /* @__PURE__ */ e("span", { className: "n-search-term", children: n })
+      /* @__PURE__ */ e("span", { className: "n-search-term", children: r })
     ] });
-  const l = o(() => r.map((s, c) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...s }) }, c)), [r]);
+  const l = o(() => n.map((s, c) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...s }) }, c)), [n]);
   return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: l });
 };
 function N({
   searchLoading: i,
-  searchTerm: n,
-  results: r,
+  searchTerm: r,
+  results: n,
   children: l
 }) {
   return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "search-links", children: [
@@ -33,7 +33,14 @@ function N({
       label: "Ask Netlify AI",
       url: "https://docs.netlify.com/ask-netlify/"
     } }),
-    n ? /* @__PURE__ */ e(h, { searchLoading: i, searchTerm: n, results: r }) : l || null
+    r && r.length > 3 ? /* @__PURE__ */ e(
+      h,
+      {
+        searchLoading: i,
+        searchTerm: r,
+        results: n
+      }
+    ) : l || null
   ] }) });
 }
 export {

package/package.json

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

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css

@@ -131,9 +131,10 @@
 .n-search-modal {
   transition: display .2s allow-discrete, overlay .2s allow-discrete;
   animation: closeSearch .2s forwards;
-  &[open] {
-    animation: openSearch .2s forwards;
-  }
+}
+
+.n-search-modal[open] {
+  animation: openSearch .2s forwards;
 }
 
 @keyframes openSearch {

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

@@ -27,6 +27,8 @@ function SearchModal(props: Props = {className: '', children: null}) {
 
   // Poll for the existence of window.pagefind.
   useEffect(() => {
+    let intervalId:number;
+
     const checkForPagefind = () => {
       if (window.pagefind) {
         setIsPagefindLoaded(true);
@@ -36,7 +38,7 @@ function SearchModal(props: Props = {className: '', children: null}) {
 
     // Check immediately and then start polling every 100ms.
     checkForPagefind();
-    const intervalId = setInterval(checkForPagefind, 100);
+    intervalId = setInterval(checkForPagefind, 100);
 
     // Cleanup the interval when the component unmounts.
     return () => clearInterval(intervalId);
@@ -66,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/components/SearchWindow.tsx

@@ -20,9 +20,9 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
 
   if (!results || results.length === 0) {
     return (
-      <SearchHeading>
-        0 results for <span className="n-search-term">{searchTerm}</span>
-      </SearchHeading>
+        <SearchHeading>
+          0 results for <span className="n-search-term">{searchTerm}</span>
+        </SearchHeading>
     );
   }
 
@@ -58,8 +58,12 @@ export default function SearchWindow({
     <div className="n-search-window">
       <div className="search-links">
         <SearchLink {...askNetlify} />
-        {searchTerm ? (
-          <SearchResults searchLoading={searchLoading} searchTerm={searchTerm} results={results} />
+        {searchTerm && searchTerm.length > 3 ? (
+          <SearchResults
+            searchLoading={searchLoading}
+            searchTerm={searchTerm}
+            results={results}
+          />
         ) : DefaultWindow ? (
           DefaultWindow
         ) : null}