@netlify/spark-ui 1.5.0-alpha.14 → 1.5.0-alpha.3

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

@@ -14,6 +14,7 @@ import {
   useSearchToggles,
   useSearchLogger,
 } from '../../hooks';
+import { useTimeout } from '@utils/useTimeout';
 
 import AskNetlify from '../../../../preact/AskNetlify/AskNetlify';
 
@@ -28,6 +29,7 @@ interface Props {
 function SearchModal(props: Props = { className: '', children: null, debug: false }) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
   const [modalState, setModalState] = useState({ current: 'search' });
+  const [askNetlifyQuery, setAskNetlifyQuery] = useState('');
 
   // Poll for the existence of window.pagefind.
   useEffect(() => {
@@ -59,7 +61,7 @@ function SearchModal(props: Props = { className: '', children: null, debug: fals
   const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
 
   useSearchLogger(state, debug);
-  useSearchToggles(isPagefindLoaded, openSearch, setModalState);
+  useSearchToggles(isPagefindLoaded, openSearch);
   useSearchParams(isPagefindLoaded, actions.setSearchTerm, openSearch);
   useSearchHotkeys(isPagefindLoaded, searchOpen, openSearch, closeSearch);
   useKeyboardNav(isPagefindLoaded, modalRef, searchOpen, closeSearch);
@@ -93,10 +95,16 @@ function SearchModal(props: Props = { className: '', children: null, debug: fals
       {...rest}
     >
       <div ref={containerRef} className="n-search-container">
-        {modalState.current === 'ask' && <AskNetlify setModalState={setModalState} />}
+        {modalState.current === 'ask' && (
+          <AskNetlify query={askNetlifyQuery} setModalState={setModalState} />
+        )}
         {modalState.current === 'search' && (
           <>
-            <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
+            <SearchInput
+              setSearchTerm={actions.setSearchTerm}
+              setAskNetlifyQuery={setAskNetlifyQuery}
+              initialValue={state.searchTerm}
+            />
 
             <SearchWindow
               setModalState={setModalState}

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

@@ -75,10 +75,8 @@ export default function SearchWindow({
               icon="lightbulb"
               label="Toggle theme"
               onClick={() => {
-                const isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                const currentTheme = document.documentElement.getAttribute('data-theme');
-                const theme = isDarkTheme ? 'dark' : currentTheme ? currentTheme : 'light';
-                theme && handleThemeChange(ThemeMap[theme as Theme]);
+                const theme = document.documentElement.getAttribute('data-theme') as Theme;
+                theme && handleThemeChange(ThemeMap[theme]);
               }}
             />
           </>

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

@@ -12,24 +12,16 @@ import { useEffect } from 'preact/hooks';
  * @param onOpen - A function to be called when a toggle element is clicked.
  */
 
-export function useSearchToggles(
-  isPagefindLoaded: boolean,
-  onOpen: () => void,
-  setState: (state: { current: string }) => void
-) {
+export function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void) {
   useEffect(() => {
-    if (!isPagefindLoaded) return;
+    if (!isPagefindLoaded) return
     const toggles = document.querySelectorAll('[data-ntl-search-toggle]');
 
     if (!toggles.length) return;
 
     toggles.forEach(t => {
-      const current = t.dataset.ntlSearchToggle ? t.dataset.ntlSearchToggle : 'search';
       t.removeAttribute('disabled');
-      t.addEventListener('click', () => {
-        onOpen();
-        setState({ current });
-      });
+      t.addEventListener('click', onOpen);
     });
 
     return () => {

package/packages/styles/tokens.css

@@ -160,10 +160,8 @@
   --search-back-btn-bg-color: var(--neutral-100);
   --search-bg-color: var(--neutral-000);
   --search-highlight-color: var(--teal-000);
-  --search-input-bg-color: var(--neutral-100);
-  --search-loading-color: var(--teal-700);
-  --search-submit-btn-bg-color: var(--teal-200);
-  --search-user-message-color: var(--teal-000);
+  --search-loading-color: var(--blue-700);
+  --search-user-message-color: var(--blue-100);
   --shadow-deep: 0 16px 24px 0 color(srgb 0 0 0 / 0.07), 0 6px 30px 0 color(srgb 0 0 0 / 0.06), 0 8px 10px 0 color(srgb 0 0 0 / 0.1);
   --shadow-heavy: -10px 10px 80px 0 color(srgb 0 0 0 / 0.1);
   --shadow-hover: 0 4px 12px 0 color(srgb 0 0 0 / 0.25);
@@ -258,9 +256,7 @@
     --search-back-btn-bg-color: var(--neutral-500);
     --search-bg-color: var(--neutral-700);
     --search-highlight-color: var(--teal-800);
-    --search-input-bg-color: var(--neutral-600);
     --search-loading-color: var(--teal-200);
-    --search-submit-btn-bg-color: var(--teal-200);
     --search-user-message-color: var(--teal-800);
     --switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
     --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
@@ -332,9 +328,7 @@
   --search-back-btn-bg-color: var(--neutral-500);
   --search-bg-color: var(--neutral-700);
   --search-highlight-color: var(--teal-800);
-  --search-input-bg-color: var(--neutral-600);
   --search-loading-color: var(--teal-200);
-  --search-submit-btn-bg-color: var(--teal-200);
   --search-user-message-color: var(--teal-800);
   --switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
   --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
@@ -405,10 +399,8 @@
   --search-back-btn-bg-color: var(--neutral-100);
   --search-bg-color: var(--neutral-000);
   --search-highlight-color: var(--teal-000);
-  --search-input-bg-color: var(--neutral-100);
-  --search-loading-color: var(--teal-700);
-  --search-submit-btn-bg-color: var(--teal-200);
-  --search-user-message-color: var(--teal-000);
+  --search-loading-color: var(--blue-700);
+  --search-user-message-color: var(--blue-100);
   --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
   --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
 }

package/packages/utils/theme.ts

@@ -6,10 +6,6 @@ export const ThemeMap: Record<Theme, Theme> = {
 };
 
 export const handleThemeChange = (value: Theme) => {
-  const themeSelect = document.getElementById('site-theme-select') as HTMLSelectElement;
-  if (themeSelect) {
-    themeSelect.value = value;
-  }
   const element = document.documentElement;
   element.setAttribute('data-theme', value);
   localStorage.setItem('theme', value);