@furystack/shades-common-components 10.0.35 → 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 { ThemeProviderService } from '../../services/theme-provider-service.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'
@@ -25,63 +27,32 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
   SuggestProps<any>
 >({
   shadowDomName: 'shade-suggest',
-  style: {
-    flexGrow: '1',
+  css: {
+    ...searchableInputStyles,
+    '& .suggest-wrapper': {
+      display: 'flex',
+      flexDirection: 'column',
+    },
   },
-  render: ({ props, injector, element, useDisposable }) => {
+  render: ({ props, injector, useDisposable, useRef, useHostProps, useObservable }) => {
     const manager = useDisposable('manager', () => new SuggestManager(props.getEntries, props.getSuggestionEntry))
-    const { theme } = injector.getInstance(ThemeProviderService)
-    manager.element = element
-    manager.isOpened.subscribe((isOpened) => {
-      const inputContainer = element.querySelector('.input-container') as HTMLDivElement
+    const wrapperRef = useRef<HTMLDivElement>('wrapper')
+    const loaderRef = useRef<HTMLSpanElement>('loader')
 
-      const suggestions = element.querySelector('.close-suggestions')
-      const postControls = element.querySelector('.post-controls')
-      if (isOpened) {
-        void promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
-          duration: 500,
-          fill: 'forwards',
-        })
-
-        void promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
-          duration: 100,
-          fill: 'forwards',
-        })
-
-        void promisifyAnimation(
-          inputContainer,
-          [{ background: 'transparent' }, { background: theme.background.default }],
-          {
-            duration: 500,
-            fill: 'forwards',
-            easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
-          },
-        )
-      } else {
-        void promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
-          duration: 500,
-          fill: 'forwards',
-        })
+    // 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
+    })
 
-        void promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
-          duration: 500,
-          fill: 'forwards',
-          delay: 300,
-        })
+    const [isOpened] = useObservable('isOpened', manager.isOpened)
 
-        void promisifyAnimation(
-          inputContainer,
-          [{ background: theme.background.default }, { background: 'transparent' }],
-          {
-            duration: 300,
-            fill: 'forwards',
-            easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
-          },
-        )
-      }
+    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,
@@ -97,7 +68,8 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
     useDisposable('onSelectSuggestion', () => manager.subscribe('onSelectSuggestion', props.onSelectSuggestion))
     return (
       <div
-        style={{ display: 'flex', flexDirection: 'column' }}
+        ref={wrapperRef}
+        className="suggest-wrapper"
         onkeyup={(ev) => {
           if (ev.key === 'Enter') {
             ev.preventDefault()
@@ -118,87 +90,21 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
           void manager.getSuggestion({ injector, term: (ev.target as HTMLInputElement).value })
         }}
       >
-        <div
-          className="input-container"
-          style={{
-            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 ${manager.isOpened.getValue() ? 'rgba(128,128,128,0.3)' : 'rgba(128,128,128,0.15)'}`,
-            boxShadow: manager.isOpened.getValue()
-              ? '0 4px 12px rgba(0,0,0,0.15), 0 0 0 3px rgba(128,128,128,0.05)'
-              : '0 2px 4px rgba(0,0,0,0.05)',
-            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-            ...props.style,
-          }}
-        >
-          <div
-            className="term-icon"
-            style={{
-              cursor: 'pointer',
-              color: theme.text.secondary,
-              fontWeight: '600',
-              fontSize: '0.95em',
-              transition: 'color 0.2s ease',
-              padding: '0.5em 0.75em 0.5em 0',
-              userSelect: 'none',
-            }}
-            onmouseenter={(ev) => {
-              ;(ev.target as HTMLElement).style.color = theme.text.primary
-            }}
-            onmouseleave={(ev) => {
-              ;(ev.target as HTMLElement).style.color = theme.text.secondary
-            }}
-            onclick={() => manager.isOpened.setValue(true)}
-          >
+        <div className="input-container" style={props.style}>
+          <div className="term-icon" onclick={() => manager.isOpened.setValue(true)}>
             {props.defaultPrefix}
           </div>
           <SuggestInput manager={manager} />
-          <div
-            className="post-controls"
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              width: manager.isOpened.getValue() ? '50px' : '0px',
-              overflow: 'hidden',
-            }}
-          >
-            <Loader
-              style={{ width: '20px', height: '20px', opacity: manager.isLoading.getValue() ? '1' : '0' }}
-              delay={0}
-              borderWidth={4}
-            />
-            <div
-              className="close-suggestions"
-              onclick={() => manager.isOpened.setValue(false)}
-              onmouseenter={(ev) => {
-                ;(ev.target as HTMLElement).style.background = 'rgba(255,255,255,0.15)'
-                ;(ev.target as HTMLElement).style.transform = 'scale(1.1)'
-              }}
-              onmouseleave={(ev) => {
-                ;(ev.target as HTMLElement).style.background = 'transparent'
-                ;(ev.target as HTMLElement).style.transform = 'scale(1)'
-              }}
-              style={{
-                width: '24px',
-                height: '24px',
-                opacity: manager.isOpened.getValue() ? '1' : '0',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                cursor: 'pointer',
-                borderRadius: '6px',
-                transition: 'all 0.2s ease',
-                fontSize: '14px',
-                color: theme.text.secondary,
-              }}
-            >
-              ✖
+          <div className="post-controls">
+            <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

@@ -0,0 +1,195 @@
+import { Injector } from '@furystack/inject'
+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'
+import type { SuggestionResult } from './suggestion-result.js'
+
+type TestEntry = { id: number; name: string }
+
+const createSuggestionResult = (entry: TestEntry): SuggestionResult => ({
+  element: (<div>{entry.name}</div>) as unknown as JSX.Element,
+  score: entry.id,
+})
+
+describe('SuggestInput', () => {
+  let originalAnimate: typeof Element.prototype.animate
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+    originalAnimate = Element.prototype.animate
+
+    Element.prototype.animate = vi.fn(() => {
+      const mockAnimation = {
+        onfinish: null as ((event: AnimationPlaybackEvent) => void) | null,
+        oncancel: null as ((event: AnimationPlaybackEvent) => void) | null,
+        cancel: vi.fn(),
+        play: vi.fn(),
+        pause: vi.fn(),
+        finish: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      }
+      return mockAnimation as unknown as Animation
+    }) as typeof Element.prototype.animate
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    Element.prototype.animate = originalAnimate
+    vi.restoreAllMocks()
+  })
+
+  const createManager = () => {
+    const getEntries = vi.fn().mockResolvedValue([])
+    const getSuggestionEntry = vi.fn().mockImplementation(createSuggestionResult)
+    return new SuggestManager<TestEntry>(getEntries, getSuggestionEntry)
+  }
+
+  it('should render with shadow DOM', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestInput manager={manager} />,
+      })
+
+      await flushUpdates()
+      await sleepAsync(50)
+
+      const suggestInput = document.querySelector('shades-suggest-input')
+      expect(suggestInput).not.toBeNull()
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should render the inner input element', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestInput manager={manager} />,
+      })
+
+      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)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should focus input when isOpened becomes true', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      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')
+
+      manager.isOpened.setValue(true)
+      await sleepAsync(50)
+
+      expect(focusSpy).toHaveBeenCalled()
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should clear input value when isOpened becomes false', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestInput manager={manager} />,
+      })
+
+      await flushUpdates()
+      await sleepAsync(50)
+
+      const input = document.querySelector('shades-suggest-input input') as HTMLInputElement
+      input.value = 'test query'
+
+      manager.isOpened.setValue(true)
+      await sleepAsync(50)
+
+      manager.isOpened.setValue(false)
+      await sleepAsync(50)
+
+      expect(input.value).toBe('')
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should not clear input when first mounted with isOpened false', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestInput manager={manager} />,
+      })
+
+      await flushUpdates()
+      await sleepAsync(50)
+
+      const input = document.querySelector('shades-suggest-input input') as HTMLInputElement
+
+      input.value = 'initial value'
+      expect(input.value).toBe('initial value')
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should have correct CSS styling applied', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestInput manager={manager} />,
+      })
+
+      await flushUpdates()
+      await sleepAsync(50)
+
+      const suggestInput = document.querySelector('shades-suggest-input') as HTMLElement
+      expect(suggestInput).not.toBeNull()
+
+      const input = suggestInput.querySelector('input') as HTMLInputElement
+      expect(input).not.toBeNull()
+
+      manager[Symbol.dispose]()
+    })
+  })
+})

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

@@ -1,45 +1,39 @@
 import { Shade, createComponent } from '@furystack/shades'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { SuggestManager } from './suggest-manager.js'
 
 export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
   shadowDomName: 'shades-suggest-input',
-  style: {
+  css: {
     width: '100%',
     overflow: 'hidden',
+    '& input': {
+      color: cssVariableTheme.text.primary,
+      outline: 'none',
+      padding: '0.875em 0.5em',
+      background: 'transparent',
+      border: 'none',
+      display: 'inline-flex',
+      width: 'calc(100% - 1em)',
+      fontSize: '0.95em',
+      fontWeight: '400',
+      letterSpacing: '0.01em',
+    },
   },
-  render: ({ element, props, useObservable, injector }) => {
-    const { theme } = injector.getInstance(ThemeProviderService)
-
-    // todo: getLast is eliminated, do we need it?
+  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..."
-        style={{
-          color: theme.text.primary,
-          outline: 'none',
-          padding: '0.875em 0.5em',
-          background: 'transparent',
-          border: 'none',
-          display: 'inline-flex',
-          width: 'calc(100% - 1em)',
-          fontSize: '0.95em',
-          fontWeight: '400',
-          letterSpacing: '0.01em',
-        }}
-      />
-    )
+    return <input ref={inputRef} autofocus placeholder="Type to search..." />
   },
 })