@furystack/shades-common-components 11.0.0 → 12.0.0

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

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { using } from '@furystack/utils'
+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'
@@ -56,213 +56,145 @@ describe('SuggestionList', () => {
   }
 
   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: <SuggestionList manager={manager} />,
       })
-    })
 
-    await vi.advanceTimersByTimeAsync(50)
+      await flushUpdates()
+      await vi.advanceTimersByTimeAsync(50)
+
+      const suggestionList = document.querySelector('shade-suggest-suggestion-list')
+      expect(suggestionList).not.toBeNull()
 
-    const suggestionList = document.querySelector('shade-suggest-suggestion-list')
-    expect(suggestionList).not.toBeNull()
+      manager[Symbol.dispose]()
+    })
   })
 
   it('should render the suggestions container', 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: <SuggestionList manager={manager} />,
       })
-    })
 
-    await vi.advanceTimersByTimeAsync(50)
+      await flushUpdates()
+      await vi.advanceTimersByTimeAsync(50)
+
+      const container = document.querySelector('.suggestion-items-container')
+      expect(container).not.toBeNull()
 
-    const container = document.querySelector('.suggestion-items-container')
-    expect(container).not.toBeNull()
+      manager[Symbol.dispose]()
+    })
   })
 
   it('should render suggestion items when suggestions are present', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const manager = createManager()
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <SuggestionList manager={manager} />,
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const manager = createManager()
 
-    await vi.advanceTimersByTimeAsync(50)
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
 
-    void manager.getSuggestion({ injector, term: 'test' })
-    await vi.advanceTimersByTimeAsync(250)
-    await vi.advanceTimersByTimeAsync(50)
+      await flushUpdates()
+      await vi.advanceTimersByTimeAsync(50)
 
-    const suggestionItems = document.querySelectorAll('.suggestion-item')
-    expect(suggestionItems.length).toBe(3)
+      void manager.getSuggestion({ injector, term: 'test' })
+      await vi.advanceTimersByTimeAsync(250)
+      await vi.advanceTimersByTimeAsync(50)
 
-    expect(suggestionItems[0].textContent).toContain('alpha')
-    expect(suggestionItems[1].textContent).toContain('beta')
-    expect(suggestionItems[2].textContent).toContain('gamma')
+      const suggestionItems = document.querySelectorAll('.suggestion-item')
+      expect(suggestionItems.length).toBe(3)
 
-    manager[Symbol.dispose]()
-  })
+      expect(suggestionItems[0].textContent).toContain('alpha')
+      expect(suggestionItems[1].textContent).toContain('beta')
+      expect(suggestionItems[2].textContent).toContain('gamma')
 
-  it('should apply selected class to the correct suggestion item', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const manager = createManager()
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <SuggestionList manager={manager} />,
+      manager[Symbol.dispose]()
     })
-
-    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 () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const manager = createManager()
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <SuggestionList manager={manager} />,
-    })
-
-    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)
+  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()
 
-    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)
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
 
-    manager.selectedIndex.setValue(2)
-    await vi.advanceTimersByTimeAsync(50)
+      await flushUpdates()
+      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)
+      void manager.getSuggestion({ injector, term: 'test' })
+      await vi.advanceTimersByTimeAsync(250)
+      await vi.advanceTimersByTimeAsync(50)
 
-    manager[Symbol.dispose]()
-  })
+      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)
 
-  it('should call selectSuggestion when a suggestion item is clicked', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const manager = createManager()
-    const selectSpy = vi.spyOn(manager, 'selectSuggestion')
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <SuggestionList manager={manager} />,
+      manager[Symbol.dispose]()
     })
-
-    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 () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const manager = createManager()
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <SuggestionList manager={manager} />,
-    })
-
-    await vi.advanceTimersByTimeAsync(50)
+  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()
 
-    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)
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <SuggestionList manager={manager} />,
+      })
 
-    const selectSpy = vi.spyOn(manager, 'selectSuggestion')
+      await flushUpdates()
+      await vi.advanceTimersByTimeAsync(50)
 
-    const suggestionItems = document.querySelectorAll('.suggestion-item')
-    ;(suggestionItems[1] as HTMLElement).click()
+      void manager.getSuggestion({ injector, term: 'test' })
+      await vi.advanceTimersByTimeAsync(250)
+      await vi.advanceTimersByTimeAsync(50)
 
-    expect(selectSpy).not.toHaveBeenCalled()
+      manager.selectedIndex.setValue(1)
+      await vi.advanceTimersByTimeAsync(50)
 
-    manager[Symbol.dispose]()
-  })
+      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)
 
-  it('should render empty container when no suggestions', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+      manager.selectedIndex.setValue(2)
+      await vi.advanceTimersByTimeAsync(50)
 
-    const getEntries = vi.fn().mockResolvedValue([])
-    const getSuggestionEntry = vi.fn().mockImplementation(createSuggestionResult)
-    const manager = new SuggestManager<TestEntry>(getEntries, getSuggestionEntry)
+      expect(suggestionItems[0].classList.contains('selected')).toBe(false)
+      expect(suggestionItems[1].classList.contains('selected')).toBe(false)
+      expect(suggestionItems[2].classList.contains('selected')).toBe(true)
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <SuggestionList manager={manager} />,
+      manager[Symbol.dispose]()
     })
-
-    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 () => {
-      const injector = new Injector()
+  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,
@@ -270,20 +202,27 @@ describe('SuggestionList', () => {
         jsxElement: <SuggestionList manager={manager} />,
       })
 
+      await flushUpdates()
       await vi.advanceTimersByTimeAsync(50)
 
-      const container = document.querySelector('.suggestion-items-container') as HTMLDivElement
+      void manager.getSuggestion({ injector, term: 'test' })
+      await vi.advanceTimersByTimeAsync(250)
+      await vi.advanceTimersByTimeAsync(50)
 
       manager.isOpened.setValue(true)
       await vi.advanceTimersByTimeAsync(50)
 
-      expect(container.style.zIndex).toBe('1')
+      const suggestionItems = document.querySelectorAll('.suggestion-item')
+      ;(suggestionItems[1] as HTMLElement).click()
+
+      expect(selectSpy).toHaveBeenCalledWith(1)
 
       manager[Symbol.dispose]()
     })
+  })
 
-    it('should animate container when isOpened changes to false', async () => {
-      const injector = new Injector()
+  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()
 
@@ -293,29 +232,33 @@ describe('SuggestionList', () => {
         jsxElement: <SuggestionList manager={manager} />,
       })
 
+      await flushUpdates()
       await vi.advanceTimersByTimeAsync(50)
 
-      manager.isOpened.setValue(true)
+      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 container = document.querySelector('.suggestion-items-container') as HTMLDivElement
+      const selectSpy = vi.spyOn(manager, 'selectSuggestion')
 
-      manager.isOpened.setValue(false)
-      await vi.advanceTimersByTimeAsync(50)
+      const suggestionItems = document.querySelectorAll('.suggestion-item')
+      ;(suggestionItems[1] as HTMLElement).click()
 
-      expect(container.style.zIndex).toBe('-1')
+      expect(selectSpy).not.toHaveBeenCalled()
 
       manager[Symbol.dispose]()
     })
   })
 
-  describe('container width', () => {
-    it('should set container width based on parent element', async () => {
-      const injector = new Injector()
+  it('should render empty container when no suggestions', async () => {
+    await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
-      rootElement.style.width = '400px'
 
-      const manager = createManager()
+      const getEntries = vi.fn().mockResolvedValue([])
+      const getSuggestionEntry = vi.fn().mockImplementation(createSuggestionResult)
+      const manager = new SuggestManager<TestEntry>(getEntries, getSuggestionEntry)
 
       initializeShadeRoot({
         injector,
@@ -323,12 +266,90 @@ describe('SuggestionList', () => {
         jsxElement: <SuggestionList manager={manager} />,
       })
 
+      await flushUpdates()
       await vi.advanceTimersByTimeAsync(50)
 
-      const container = document.querySelector('.suggestion-items-container') as HTMLDivElement
-      expect(container.style.width).toBeDefined()
+      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

@@ -11,17 +11,17 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
       '& .suggestion-items-container': {
         borderTop: 'none',
         position: 'absolute',
-        borderRadius: '0px 0px 12px 12px',
+        borderRadius: `0px 0px ${cssVariableTheme.shape.borderRadius.lg} ${cssVariableTheme.shape.borderRadius.lg}`,
         marginLeft: '14px',
-        marginTop: '4px',
+        marginTop: cssVariableTheme.spacing.xs,
         overflow: 'hidden',
         zIndex: '1',
         left: 'auto',
         backgroundColor: cssVariableTheme.background.paper,
         color: cssVariableTheme.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)',
+        boxShadow: cssVariableTheme.shadows.lg,
+        backdropFilter: `blur(${cssVariableTheme.effects.blurXl})`,
+        border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
       },
       '& .suggestion-item': {
         padding: '0.875em 1.25em',
@@ -29,43 +29,39 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
         background: 'transparent',
         fontWeight: '400',
         borderLeft: '3px solid transparent',
-        transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        transition: `all ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.default}`,
         fontSize: '0.95em',
         letterSpacing: '0.01em',
       },
       '& .suggestion-item:hover': {
-        background: 'rgba(128,128,128,0.1)',
+        background: cssVariableTheme.action.hoverBackground,
       },
       '& .suggestion-item.selected': {
-        background: 'rgba(128,128,128,0.2)',
+        background: cssVariableTheme.action.activeBackground,
         fontWeight: '500',
         borderLeft: `3px solid ${cssVariableTheme.text.primary}`,
       },
       '& .suggestion-item.selected:hover': {
-        background: 'rgba(128,128,128,0.2)',
+        background: cssVariableTheme.action.activeBackground,
       },
     },
-    render: ({ element, props, useObservable }) => {
+    render: ({ props, useObservable, useRef }) => {
       const { manager } = props
+      const containerRef = useRef<HTMLDivElement>('container')
 
       const [suggestions] = useObservable('suggestions', manager.currentSuggestions)
 
-      const [selectedIndex] = useObservable('selectedIndex', manager.selectedIndex, {
-        onChange: (idx) => {
-          ;([...element.querySelectorAll('.suggestion-item')] as HTMLDivElement[]).forEach((s, i) => {
-            s.classList.toggle('selected', i === idx)
-          })
-        },
-      })
+      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,
               [
@@ -88,11 +84,16 @@ 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={{
-            width: `calc(${Math.round(element.parentElement?.getBoundingClientRect().width || 200)}px - 3em)`,
+            width: `calc(${Math.round(hostParentWidth)}px - 3em)`,
           }}
         >
           {suggestions.map((s, i) => (