@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/suggest/index.tsx

@@ -1,8 +1,10 @@
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import { promisifyAnimation } from '../../utils/promisify-animation.js'
+import { Icon } from '../icons/icon.js'
+import { close } from '../icons/icon-definitions.js'
 import { Loader } from '../loader.js'
+import { searchableInputStyles } from '../searchable-input-styles.js'
 import { SuggestInput } from './suggest-input.js'
 import { SuggestManager } from './suggest-manager.js'
 import { SuggestionList } from './suggestion-list.js'
@@ -26,103 +28,31 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
 >({
   shadowDomName: 'shade-suggest',
   css: {
-    flexGrow: '1',
+    ...searchableInputStyles,
     '& .suggest-wrapper': {
       display: 'flex',
       flexDirection: 'column',
     },
-    '& .input-container': {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-      padding: '0 1.25em',
-      borderRadius: '12px',
-      position: 'relative',
-      background: 'rgba(128,128,128,0.08)',
-      border: '1px solid rgba(128,128,128,0.15)',
-      boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
-      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-    },
-    '&.opened .input-container': {
-      border: '1px solid rgba(128,128,128,0.3)',
-      boxShadow: '0 4px 12px rgba(0,0,0,0.15), 0 0 0 3px rgba(128,128,128,0.05)',
-    },
-    '& .term-icon': {
-      cursor: 'pointer',
-      color: cssVariableTheme.text.secondary,
-      fontWeight: '600',
-      fontSize: '0.95em',
-      transition: 'color 0.2s ease',
-      padding: '0.5em 0.75em 0.5em 0',
-      userSelect: 'none',
-    },
-    '& .term-icon:hover': {
-      color: cssVariableTheme.text.primary,
-    },
-    '& .post-controls': {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      width: '0px',
-      overflow: 'hidden',
-    },
-    '&.opened .post-controls': {
-      width: '50px',
-    },
-    '& .close-suggestions': {
-      width: '24px',
-      height: '24px',
-      opacity: '0',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      cursor: 'pointer',
-      borderRadius: '6px',
-      transition: 'all 0.2s ease',
-      fontSize: '14px',
-      color: cssVariableTheme.text.secondary,
-      background: 'transparent',
-      transform: 'scale(1)',
-    },
-    '&.opened .close-suggestions': {
-      opacity: '1',
-    },
-    '& .close-suggestions:hover': {
-      background: 'rgba(255,255,255,0.15)',
-      transform: 'scale(1.1)',
-    },
   },
-  render: ({ props, injector, element, useDisposable }) => {
+  render: ({ props, injector, useDisposable, useRef, useHostProps, useObservable }) => {
     const manager = useDisposable('manager', () => new SuggestManager(props.getEntries, props.getSuggestionEntry))
-    manager.element = element
-    manager.isOpened.subscribe((isOpened) => {
-      element.classList.toggle('opened', isOpened)
-      const inputContainer = element.querySelector('.input-container') as HTMLDivElement
+    const wrapperRef = useRef<HTMLDivElement>('wrapper')
+    const loaderRef = useRef<HTMLSpanElement>('loader')
 
-      if (isOpened) {
-        void promisifyAnimation(
-          inputContainer,
-          [{ background: 'transparent' }, { background: cssVariableTheme.background.default }],
-          {
-            duration: 500,
-            fill: 'forwards',
-            easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
-          },
-        )
-      } else {
-        void promisifyAnimation(
-          inputContainer,
-          [{ background: cssVariableTheme.background.default }, { background: 'transparent' }],
-          {
-            duration: 300,
-            fill: 'forwards',
-            easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
-          },
-        )
-      }
+    // Keep manager.element in sync for click-outside detection
+    queueMicrotask(() => {
+      const hostEl = wrapperRef.current?.closest('shade-suggest') as HTMLElement | null
+      if (hostEl) manager.element = hostEl
+    })
+
+    const [isOpened] = useObservable('isOpened', manager.isOpened)
+
+    useHostProps({
+      'data-opened': isOpened ? '' : undefined,
     })
     manager.isLoading.subscribe((isLoading) => {
-      const loader = element.querySelector('shade-loader')
+      const loader = loaderRef.current
+      if (!loader) return
       if (isLoading) {
         void promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
           duration: 100,
@@ -138,6 +68,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
     useDisposable('onSelectSuggestion', () => manager.subscribe('onSelectSuggestion', props.onSelectSuggestion))
     return (
       <div
+        ref={wrapperRef}
         className="suggest-wrapper"
         onkeyup={(ev) => {
           if (ev.key === 'Enter') {
@@ -165,13 +96,15 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
           </div>
           <SuggestInput manager={manager} />
           <div className="post-controls">
-            <Loader
-              style={{ width: '20px', height: '20px', opacity: manager.isLoading.getValue() ? '1' : '0' }}
-              delay={0}
-              borderWidth={4}
-            />
+            <span ref={loaderRef} style={{ display: 'inline-flex' }}>
+              <Loader
+                style={{ width: '20px', height: '20px', opacity: manager.isLoading.getValue() ? '1' : '0' }}
+                delay={0}
+                borderWidth={4}
+              />
+            </span>
             <div className="close-suggestions" onclick={() => manager.isOpened.setValue(false)}>
-              ✖
+              <Icon icon={close} size={14} />
             </div>
           </div>
         </div>

package/src/components/suggest/suggest-input.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync, using } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { SuggestInput } from './suggest-input.js'
 import { SuggestManager } from './suggest-manager.js'
@@ -48,134 +48,148 @@ describe('SuggestInput', () => {
   }
 
   it('should render with shadow DOM', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
 
-    using(createManager(), (manager) => {
       initializeShadeRoot({
         injector,
         rootElement,
         jsxElement: <SuggestInput manager={manager} />,
       })
-    })
 
-    await sleepAsync(50)
+      await flushUpdates()
+      await sleepAsync(50)
+
+      const suggestInput = document.querySelector('shades-suggest-input')
+      expect(suggestInput).not.toBeNull()
 
-    const suggestInput = document.querySelector('shades-suggest-input')
-    expect(suggestInput).not.toBeNull()
+      manager[Symbol.dispose]()
+    })
   })
 
   it('should render the inner input element', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
 
-    using(createManager(), (manager) => {
       initializeShadeRoot({
         injector,
         rootElement,
         jsxElement: <SuggestInput manager={manager} />,
       })
-    })
 
-    await sleepAsync(50)
+      await flushUpdates()
+      await sleepAsync(50)
+
+      const input = document.querySelector('shades-suggest-input input') as HTMLInputElement
+      expect(input).not.toBeNull()
+      expect(input.placeholder).toBe('Type to search...')
+      expect(input.autofocus).toBe(true)
 
-    const input = document.querySelector('shades-suggest-input input') as HTMLInputElement
-    expect(input).not.toBeNull()
-    expect(input.placeholder).toBe('Type to search...')
-    expect(input.autofocus).toBe(true)
+      manager[Symbol.dispose]()
+    })
   })
 
   it('should focus input when isOpened becomes true', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const manager = createManager()
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <SuggestInput manager={manager} />,
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
 
-    await sleepAsync(50)
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestInput manager={manager} />,
+      })
+
+      await flushUpdates()
+      await sleepAsync(50)
 
-    const input = document.querySelector('shades-suggest-input input') as HTMLInputElement
-    const focusSpy = vi.spyOn(input, 'focus')
+      const input = document.querySelector('shades-suggest-input input') as HTMLInputElement
+      const focusSpy = vi.spyOn(input, 'focus')
 
-    manager.isOpened.setValue(true)
-    await sleepAsync(50)
+      manager.isOpened.setValue(true)
+      await sleepAsync(50)
 
-    expect(focusSpy).toHaveBeenCalled()
+      expect(focusSpy).toHaveBeenCalled()
 
-    manager[Symbol.dispose]()
+      manager[Symbol.dispose]()
+    })
   })
 
   it('should clear input value when isOpened becomes false', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const manager = createManager()
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <SuggestInput manager={manager} />,
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestInput manager={manager} />,
+      })
 
-    await sleepAsync(50)
+      await flushUpdates()
+      await sleepAsync(50)
 
-    const input = document.querySelector('shades-suggest-input input') as HTMLInputElement
-    input.value = 'test query'
+      const input = document.querySelector('shades-suggest-input input') as HTMLInputElement
+      input.value = 'test query'
 
-    manager.isOpened.setValue(true)
-    await sleepAsync(50)
+      manager.isOpened.setValue(true)
+      await sleepAsync(50)
 
-    manager.isOpened.setValue(false)
-    await sleepAsync(50)
+      manager.isOpened.setValue(false)
+      await sleepAsync(50)
 
-    expect(input.value).toBe('')
+      expect(input.value).toBe('')
 
-    manager[Symbol.dispose]()
+      manager[Symbol.dispose]()
+    })
   })
 
   it('should not clear input when first mounted with isOpened false', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const manager = createManager()
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <SuggestInput manager={manager} />,
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestInput manager={manager} />,
+      })
 
-    await sleepAsync(50)
+      await flushUpdates()
+      await sleepAsync(50)
 
-    const input = document.querySelector('shades-suggest-input input') as HTMLInputElement
+      const input = document.querySelector('shades-suggest-input input') as HTMLInputElement
 
-    input.value = 'initial value'
-    expect(input.value).toBe('initial value')
+      input.value = 'initial value'
+      expect(input.value).toBe('initial value')
 
-    manager[Symbol.dispose]()
+      manager[Symbol.dispose]()
+    })
   })
 
   it('should have correct CSS styling applied', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const manager = createManager()
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <SuggestInput manager={manager} />,
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
 
-    await sleepAsync(50)
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestInput manager={manager} />,
+      })
 
-    const suggestInput = document.querySelector('shades-suggest-input') as HTMLElement
-    expect(suggestInput).not.toBeNull()
+      await flushUpdates()
+      await sleepAsync(50)
 
-    const input = suggestInput.querySelector('input') as HTMLInputElement
-    expect(input).not.toBeNull()
+      const suggestInput = document.querySelector('shades-suggest-input') as HTMLElement
+      expect(suggestInput).not.toBeNull()
 
-    manager[Symbol.dispose]()
+      const input = suggestInput.querySelector('input') as HTMLInputElement
+      expect(input).not.toBeNull()
+
+      manager[Symbol.dispose]()
+    })
   })
 })

package/src/components/suggest/suggest-input.tsx

@@ -20,18 +20,20 @@ export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
       letterSpacing: '0.01em',
     },
   },
-  render: ({ element, props, useObservable }) => {
+  render: ({ props, useObservable, useRef }) => {
+    const inputRef = useRef<HTMLInputElement>('input')
     useObservable('isOpened', props.manager.isOpened, {
       onChange: (isOpened) => {
-        const input = element.firstChild as HTMLInputElement
-        if (isOpened) {
-          input.focus()
-        } else {
-          input.value = ''
+        if (inputRef.current) {
+          if (isOpened) {
+            inputRef.current.focus()
+          } else {
+            inputRef.current.value = ''
+          }
         }
       },
     })
 
-    return <input autofocus placeholder="Type to search..." />
+    return <input ref={inputRef} autofocus placeholder="Type to search..." />
   },
 })