@netlify/spark-ui 0.0.26 → 0.0.27

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.26",
+  "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/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}