@furystack/shades-common-components 10.0.35 → 12.0.0

package/src/components/suggest/suggestion-list.spec.tsx

@@ -0,0 +1,355 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { SuggestManager } from './suggest-manager.js'
+import { SuggestionList } from './suggestion-list.js'
+import type { SuggestionResult } from './suggestion-result.js'
+
+type TestEntry = { id: number; name: string }
+
+const createTestEntries = (): TestEntry[] => [
+  { id: 1, name: 'alpha' },
+  { id: 2, name: 'beta' },
+  { id: 3, name: 'gamma' },
+]
+
+const createSuggestionResult = (entry: TestEntry): SuggestionResult => ({
+  element: (<span>{entry.name}</span>) as unknown as JSX.Element,
+  score: entry.id,
+})
+
+describe('SuggestionList', () => {
+  let originalAnimate: typeof Element.prototype.animate
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+    vi.useFakeTimers()
+    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.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  const createManager = () => {
+    const getEntries = vi.fn().mockResolvedValue(createTestEntries())
+    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: <SuggestionList manager={manager} />,
+      })
+
+      await flushUpdates()
+      await vi.advanceTimersByTimeAsync(50)
+
+      const suggestionList = document.querySelector('shade-suggest-suggestion-list')
+      expect(suggestionList).not.toBeNull()
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should render the suggestions container', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
+
+      await flushUpdates()
+      await vi.advanceTimersByTimeAsync(50)
+
+      const container = document.querySelector('.suggestion-items-container')
+      expect(container).not.toBeNull()
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should render suggestion items when suggestions are present', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
+
+      await flushUpdates()
+      await vi.advanceTimersByTimeAsync(50)
+
+      void manager.getSuggestion({ injector, term: 'test' })
+      await vi.advanceTimersByTimeAsync(250)
+      await vi.advanceTimersByTimeAsync(50)
+
+      const suggestionItems = document.querySelectorAll('.suggestion-item')
+      expect(suggestionItems.length).toBe(3)
+
+      expect(suggestionItems[0].textContent).toContain('alpha')
+      expect(suggestionItems[1].textContent).toContain('beta')
+      expect(suggestionItems[2].textContent).toContain('gamma')
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should apply selected class to the correct suggestion item', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
+
+      await flushUpdates()
+      await vi.advanceTimersByTimeAsync(50)
+
+      void manager.getSuggestion({ injector, term: 'test' })
+      await vi.advanceTimersByTimeAsync(250)
+      await vi.advanceTimersByTimeAsync(50)
+
+      const suggestionItems = document.querySelectorAll('.suggestion-item')
+      expect(suggestionItems[0].classList.contains('selected')).toBe(true)
+      expect(suggestionItems[1].classList.contains('selected')).toBe(false)
+      expect(suggestionItems[2].classList.contains('selected')).toBe(false)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should update selected class when selectedIndex changes', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
+
+      await flushUpdates()
+      await vi.advanceTimersByTimeAsync(50)
+
+      void manager.getSuggestion({ injector, term: 'test' })
+      await vi.advanceTimersByTimeAsync(250)
+      await vi.advanceTimersByTimeAsync(50)
+
+      manager.selectedIndex.setValue(1)
+      await vi.advanceTimersByTimeAsync(50)
+
+      const suggestionItems = document.querySelectorAll('.suggestion-item')
+      expect(suggestionItems[0].classList.contains('selected')).toBe(false)
+      expect(suggestionItems[1].classList.contains('selected')).toBe(true)
+      expect(suggestionItems[2].classList.contains('selected')).toBe(false)
+
+      manager.selectedIndex.setValue(2)
+      await vi.advanceTimersByTimeAsync(50)
+
+      expect(suggestionItems[0].classList.contains('selected')).toBe(false)
+      expect(suggestionItems[1].classList.contains('selected')).toBe(false)
+      expect(suggestionItems[2].classList.contains('selected')).toBe(true)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should call selectSuggestion when a suggestion item is clicked', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+      const selectSpy = vi.spyOn(manager, 'selectSuggestion')
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
+
+      await flushUpdates()
+      await vi.advanceTimersByTimeAsync(50)
+
+      void manager.getSuggestion({ injector, term: 'test' })
+      await vi.advanceTimersByTimeAsync(250)
+      await vi.advanceTimersByTimeAsync(50)
+
+      manager.isOpened.setValue(true)
+      await vi.advanceTimersByTimeAsync(50)
+
+      const suggestionItems = document.querySelectorAll('.suggestion-item')
+      ;(suggestionItems[1] as HTMLElement).click()
+
+      expect(selectSpy).toHaveBeenCalledWith(1)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should not call selectSuggestion when list is not opened', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
+
+      await flushUpdates()
+      await vi.advanceTimersByTimeAsync(50)
+
+      manager.currentSuggestions.setValue([
+        { entry: { id: 1, name: 'alpha' }, suggestion: createSuggestionResult({ id: 1, name: 'alpha' }) },
+        { entry: { id: 2, name: 'beta' }, suggestion: createSuggestionResult({ id: 2, name: 'beta' }) },
+      ])
+      await vi.advanceTimersByTimeAsync(50)
+
+      const selectSpy = vi.spyOn(manager, 'selectSuggestion')
+
+      const suggestionItems = document.querySelectorAll('.suggestion-item')
+      ;(suggestionItems[1] as HTMLElement).click()
+
+      expect(selectSpy).not.toHaveBeenCalled()
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should render empty container when no suggestions', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      const getEntries = vi.fn().mockResolvedValue([])
+      const getSuggestionEntry = vi.fn().mockImplementation(createSuggestionResult)
+      const manager = new SuggestManager<TestEntry>(getEntries, getSuggestionEntry)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
+
+      await flushUpdates()
+      await vi.advanceTimersByTimeAsync(50)
+
+      const suggestionItems = document.querySelectorAll('.suggestion-item')
+      expect(suggestionItems.length).toBe(0)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  describe('animations', () => {
+    it('should animate container when isOpened changes to true', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const manager = createManager()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <SuggestionList manager={manager} />,
+        })
+
+        await vi.advanceTimersByTimeAsync(50)
+
+        const container = document.querySelector('.suggestion-items-container') as HTMLDivElement
+
+        manager.isOpened.setValue(true)
+        await vi.advanceTimersByTimeAsync(50)
+
+        expect(container.style.zIndex).toBe('1')
+
+        manager[Symbol.dispose]()
+      })
+    })
+
+    it('should animate container when isOpened changes to false', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const manager = createManager()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <SuggestionList manager={manager} />,
+        })
+
+        await vi.advanceTimersByTimeAsync(50)
+
+        manager.isOpened.setValue(true)
+        await vi.advanceTimersByTimeAsync(50)
+
+        const container = document.querySelector('.suggestion-items-container') as HTMLDivElement
+
+        manager.isOpened.setValue(false)
+        await vi.advanceTimersByTimeAsync(50)
+
+        expect(container.style.zIndex).toBe('-1')
+
+        manager[Symbol.dispose]()
+      })
+    })
+  })
+
+  describe('container width', () => {
+    it('should set container width based on parent element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        rootElement.style.width = '400px'
+
+        const manager = createManager()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <SuggestionList manager={manager} />,
+        })
+
+        await vi.advanceTimersByTimeAsync(50)
+
+        const container = document.querySelector('.suggestion-items-container') as HTMLDivElement
+        expect(container.style.width).toBeDefined()
+
+        manager[Symbol.dispose]()
+      })
+    })
+  })
+})

package/src/components/suggest/suggestion-list.tsx

@@ -1,43 +1,67 @@
 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 type { SuggestManager } from './suggest-manager.js'
 
 export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children: ChildrenList) => JSX.Element<any> =
   Shade<{ manager: SuggestManager<any> }>({
     shadowDomName: 'shade-suggest-suggestion-list',
-    render: ({ element, props, injector, useObservable }) => {
+    css: {
+      '& .suggestion-items-container': {
+        borderTop: 'none',
+        position: 'absolute',
+        borderRadius: `0px 0px ${cssVariableTheme.shape.borderRadius.lg} ${cssVariableTheme.shape.borderRadius.lg}`,
+        marginLeft: '14px',
+        marginTop: cssVariableTheme.spacing.xs,
+        overflow: 'hidden',
+        zIndex: '1',
+        left: 'auto',
+        backgroundColor: cssVariableTheme.background.paper,
+        color: cssVariableTheme.text.secondary,
+        boxShadow: cssVariableTheme.shadows.lg,
+        backdropFilter: `blur(${cssVariableTheme.effects.blurXl})`,
+        border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+      },
+      '& .suggestion-item': {
+        padding: '0.875em 1.25em',
+        cursor: 'pointer',
+        background: 'transparent',
+        fontWeight: '400',
+        borderLeft: '3px solid transparent',
+        transition: `all ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.default}`,
+        fontSize: '0.95em',
+        letterSpacing: '0.01em',
+      },
+      '& .suggestion-item:hover': {
+        background: cssVariableTheme.action.hoverBackground,
+      },
+      '& .suggestion-item.selected': {
+        background: cssVariableTheme.action.activeBackground,
+        fontWeight: '500',
+        borderLeft: `3px solid ${cssVariableTheme.text.primary}`,
+      },
+      '& .suggestion-item.selected:hover': {
+        background: cssVariableTheme.action.activeBackground,
+      },
+    },
+    render: ({ props, useObservable, useRef }) => {
       const { manager } = props
-      const { theme } = injector.getInstance(ThemeProviderService)
+      const containerRef = useRef<HTMLDivElement>('container')
 
       const [suggestions] = useObservable('suggestions', manager.currentSuggestions)
 
-      // todo: GetLast is eliminated, do we need it?
-      const [selectedIndex] = useObservable('selectedIndex', manager.selectedIndex, {
-        onChange: (idx) => {
-          ;([...element.querySelectorAll('.suggestion-item')] as HTMLDivElement[]).map((s, i) => {
-            if (i === idx) {
-              s.style.background = 'rgba(128,128,128,0.2)'
-              s.style.fontWeight = '500'
-              s.style.borderLeft = `3px solid ${theme.text.primary}`
-            } else {
-              s.style.background = 'transparent'
-              s.style.fontWeight = '400'
-              s.style.borderLeft = '3px solid transparent'
-            }
-          })
-        },
-      })
+      const [selectedIndex] = useObservable('selectedIndex', manager.selectedIndex)
 
       const [isListOpened] = useObservable('isOpened', manager.isOpened, {
         onChange: (isOpened) => {
-          const container = element.firstElementChild as HTMLDivElement
+          const container = containerRef.current
+          if (!container) return
+          const hostParentWidth =
+            container.closest('shade-suggest-suggestion-list')?.parentElement?.getBoundingClientRect().width || 200
           if (isOpened) {
             container.style.zIndex = '1'
-            container.style.width = `calc(${Math.round(
-              element.parentElement?.getBoundingClientRect().width || 200,
-            )}px - 3em)`
+            container.style.width = `calc(${Math.round(hostParentWidth)}px - 3em)`
             void promisifyAnimation(
               container,
               [
@@ -60,54 +84,26 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
         },
       })
 
+      const hostParentWidth =
+        containerRef.current?.closest('shade-suggest-suggestion-list')?.parentElement?.getBoundingClientRect().width ||
+        200
+
       return (
         <div
+          ref={containerRef}
           className="suggestion-items-container"
           style={{
-            borderTop: 'none',
-            position: 'absolute',
-            borderRadius: '0px 0px 12px 12px',
-            marginLeft: '14px',
-            marginTop: '4px',
-            overflow: 'hidden',
-            zIndex: '1',
-            left: 'auto',
-            backgroundColor: theme.background.paper,
-            color: theme.text.secondary,
-            boxShadow: '0 8px 24px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12)',
-            backdropFilter: 'blur(20px)',
-            border: '1px solid rgba(128,128,128,0.2)',
-            width: `calc(${Math.round(element.parentElement?.getBoundingClientRect().width || 200)}px - 3em)`,
+            width: `calc(${Math.round(hostParentWidth)}px - 3em)`,
           }}
         >
           {suggestions.map((s, i) => (
             <div
-              className="suggestion-item"
+              className={`suggestion-item${i === selectedIndex ? ' selected' : ''}`}
               onclick={() => {
                 if (isListOpened) {
                   manager.selectSuggestion(i)
                 }
               }}
-              onmouseenter={(ev) => {
-                if (i !== selectedIndex) {
-                  ;(ev.target as HTMLElement).style.background = 'rgba(128,128,128,0.1)'
-                }
-              }}
-              onmouseleave={(ev) => {
-                if (i !== selectedIndex) {
-                  ;(ev.target as HTMLElement).style.background = 'transparent'
-                }
-              }}
-              style={{
-                padding: '0.875em 1.25em',
-                cursor: 'pointer',
-                background: i === selectedIndex ? 'rgba(128,128,128,0.2)' : 'transparent',
-                fontWeight: i === selectedIndex ? '500' : '400',
-                borderLeft: i === selectedIndex ? `3px solid ${theme.text.primary}` : '3px solid transparent',
-                transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
-                fontSize: '0.95em',
-                letterSpacing: '0.01em',
-              }}
             >
               {s.suggestion.element}
             </div>