@furystack/shades-common-components 10.0.35 → 11.0.0

package/src/components/suggest/index.tsx

@@ -1,6 +1,6 @@
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import { Loader } from '../loader.js'
 import { SuggestInput } from './suggest-input.js'
@@ -25,32 +25,84 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
   SuggestProps<any>
 >({
   shadowDomName: 'shade-suggest',
-  style: {
+  css: {
     flexGrow: '1',
+    '& .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 }) => {
     const manager = useDisposable('manager', () => new SuggestManager(props.getEntries, props.getSuggestionEntry))
-    const { theme } = injector.getInstance(ThemeProviderService)
     manager.element = element
     manager.isOpened.subscribe((isOpened) => {
+      element.classList.toggle('opened', isOpened)
       const inputContainer = element.querySelector('.input-container') as HTMLDivElement
 
-      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 }],
+          [{ background: 'transparent' }, { background: cssVariableTheme.background.default }],
           {
             duration: 500,
             fill: 'forwards',
@@ -58,20 +110,9 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
           },
         )
       } else {
-        void promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
-          duration: 500,
-          fill: 'forwards',
-        })
-
-        void promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
-          duration: 500,
-          fill: 'forwards',
-          delay: 300,
-        })
-
         void promisifyAnimation(
           inputContainer,
-          [{ background: theme.background.default }, { background: 'transparent' }],
+          [{ background: cssVariableTheme.background.default }, { background: 'transparent' }],
           {
             duration: 300,
             fill: 'forwards',
@@ -97,7 +138,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
     useDisposable('onSelectSuggestion', () => manager.subscribe('onSelectSuggestion', props.onSelectSuggestion))
     return (
       <div
-        style={{ display: 'flex', flexDirection: 'column' }}
+        className="suggest-wrapper"
         onkeyup={(ev) => {
           if (ev.key === 'Enter') {
             ev.preventDefault()
@@ -118,86 +159,18 @@ 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',
-            }}
-          >
+          <div className="post-controls">
             <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="close-suggestions" onclick={() => manager.isOpened.setValue(false)}>
               ✖
             </div>
           </div>

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

@@ -0,0 +1,181 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync, using } 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 () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    using(createManager(), (manager) => {
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestInput manager={manager} />,
+      })
+    })
+
+    await sleepAsync(50)
+
+    const suggestInput = document.querySelector('shades-suggest-input')
+    expect(suggestInput).not.toBeNull()
+  })
+
+  it('should render the inner input element', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    using(createManager(), (manager) => {
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestInput manager={manager} />,
+      })
+    })
+
+    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)
+  })
+
+  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 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 () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const manager = createManager()
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <SuggestInput manager={manager} />,
+    })
+
+    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 () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const manager = createManager()
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <SuggestInput manager={manager} />,
+    })
+
+    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 () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    const manager = createManager()
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <SuggestInput manager={manager} />,
+    })
+
+    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,17 +1,26 @@
 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: ({ element, props, useObservable }) => {
     useObservable('isOpened', props.manager.isOpened, {
       onChange: (isOpened) => {
         const input = element.firstChild as HTMLInputElement
@@ -23,23 +32,6 @@ export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
       },
     })
 
-    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 autofocus placeholder="Type to search..." />
   },
 })