@furystack/shades-common-components 10.0.35 → 12.0.0

package/src/components/command-palette/command-palette-suggestion-list.spec.tsx

@@ -0,0 +1,517 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { CommandPaletteManager } from './command-palette-manager.js'
+import { CommandPaletteSuggestionList } from './command-palette-suggestion-list.js'
+import type { CommandPaletteSuggestionResult } from './command-provider.js'
+
+describe('CommandPaletteSuggestionList', () => {
+  let originalAnimate: typeof Element.prototype.animate
+  let animateCalls: Array<{ keyframes: unknown; options: unknown }>
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root" style="width: 500px;"></div>'
+    animateCalls = []
+    originalAnimate = Element.prototype.animate
+
+    Element.prototype.animate = vi.fn(
+      (keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions) => {
+        animateCalls.push({ keyframes, options })
+        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(),
+        }
+
+        setTimeout(() => {
+          mockAnimation.onfinish?.({} as AnimationPlaybackEvent)
+        }, 10)
+
+        return mockAnimation as unknown as Animation
+      },
+    ) as typeof Element.prototype.animate
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    Element.prototype.animate = originalAnimate
+    vi.restoreAllMocks()
+  })
+
+  const createManager = () => {
+    return new CommandPaletteManager([])
+  }
+
+  const createSuggestion = (text: string, score: number): CommandPaletteSuggestionResult => ({
+    element: <span>{text}</span>,
+    score,
+    onSelected: vi.fn(),
+  })
+
+  it('should render with shadow DOM', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      const component = document.querySelector('shade-command-palette-suggestion-list')
+      expect(component).not.toBeNull()
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should render suggestion items container', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const container = component?.querySelector('.suggestion-items-container')
+      expect(container).not.toBeNull()
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should render suggestions from manager', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.currentSuggestions.setValue([createSuggestion('Command 1', 100), createSuggestion('Command 2', 90)])
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const items = component?.querySelectorAll('.suggestion-item')
+      expect(items?.length).toBe(2)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should render suggestion content', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.currentSuggestions.setValue([createSuggestion('Test Command', 100)])
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const item = component?.querySelector('.suggestion-item')
+      expect(item?.textContent).toContain('Test Command')
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should mark first item as selected by default', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.currentSuggestions.setValue([createSuggestion('Command 1', 100), createSuggestion('Command 2', 90)])
+      manager.selectedIndex.setValue(0)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const items = component?.querySelectorAll('.suggestion-item')
+      expect(items?.[0]?.classList.contains('selected')).toBe(true)
+      expect(items?.[1]?.classList.contains('selected')).toBe(false)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should update selected class when selectedIndex changes', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.currentSuggestions.setValue([createSuggestion('Command 1', 100), createSuggestion('Command 2', 90)])
+      manager.selectedIndex.setValue(0)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      manager.selectedIndex.setValue(1)
+      await sleepAsync(50)
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const items = component?.querySelectorAll('.suggestion-item')
+      expect(items?.[0]?.classList.contains('selected')).toBe(false)
+      expect(items?.[1]?.classList.contains('selected')).toBe(true)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should call selectSuggestion when item is clicked while opened', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      const suggestion = createSuggestion('Click Me', 100)
+      manager.currentSuggestions.setValue([suggestion])
+      manager.isOpened.setValue(true)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      const selectSpy = vi.spyOn(manager, 'selectSuggestion')
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const item = component?.querySelector('.suggestion-item') as HTMLElement
+      item?.click()
+
+      expect(selectSpy).toHaveBeenCalledWith(injector, 0)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should not call selectSuggestion when item is clicked while closed', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      const suggestion = createSuggestion('Click Me', 100)
+      manager.currentSuggestions.setValue([suggestion])
+      manager.isOpened.setValue(false)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      const selectSpy = vi.spyOn(manager, 'selectSuggestion')
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const item = component?.querySelector('.suggestion-item') as HTMLElement
+      item?.click()
+
+      expect(selectSpy).not.toHaveBeenCalled()
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should animate slide-in when opening', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.isOpened.setValue(false)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+      animateCalls = []
+
+      manager.isOpened.setValue(true)
+      await sleepAsync(50)
+
+      const slideAnimation = animateCalls.find(
+        (call) =>
+          Array.isArray(call.keyframes) &&
+          call.keyframes.some((kf: Keyframe) => kf.transform === 'translate(0, -50px)') &&
+          call.keyframes.some((kf: Keyframe) => kf.transform === 'translate(0, 0)'),
+      )
+
+      expect(slideAnimation).toBeDefined()
+      expect((slideAnimation?.options as KeyframeAnimationOptions)?.duration).toBe(500)
+      expect((slideAnimation?.options as KeyframeAnimationOptions)?.fill).toBe('forwards')
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should animate slide-out when closing', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.isOpened.setValue(true)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+      animateCalls = []
+
+      manager.isOpened.setValue(false)
+      await sleepAsync(50)
+
+      const slideAnimation = animateCalls.find(
+        (call) =>
+          Array.isArray(call.keyframes) &&
+          call.keyframes.some((kf: Keyframe) => kf.transform === 'translate(0, 0)') &&
+          call.keyframes.some((kf: Keyframe) => kf.transform === 'translate(0, -50px)'),
+      )
+
+      expect(slideAnimation).toBeDefined()
+      expect((slideAnimation?.options as KeyframeAnimationOptions)?.duration).toBe(200)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should set container display to initial when opening', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.isOpened.setValue(false)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      manager.isOpened.setValue(true)
+      await sleepAsync(50)
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const container = component?.querySelector('.suggestion-items-container') as HTMLElement
+      expect(container?.style.display).toBe('initial')
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should set container display to none when closing', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.isOpened.setValue(true)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      manager.isOpened.setValue(false)
+      await sleepAsync(50)
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const container = component?.querySelector('.suggestion-items-container') as HTMLElement
+      expect(container?.style.display).toBe('none')
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should render empty list when no suggestions', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.currentSuggestions.setValue([])
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const items = component?.querySelectorAll('.suggestion-item')
+      expect(items?.length).toBe(0)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should support fullScreenSuggestions prop', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.isOpened.setValue(true)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} fullScreenSuggestions />,
+      })
+
+      await sleepAsync(50)
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const container = component?.querySelector('.suggestion-items-container') as HTMLElement
+      expect(container?.style.left).toBe('0px')
+      expect(container?.style.width).toBe('calc(100% - 42px)')
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should set max height based on window height', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.isOpened.setValue(true)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const container = component?.querySelector('.suggestion-items-container') as HTMLElement
+      const expectedMaxHeight = `${window.innerHeight * 0.8}px`
+      expect(container?.style.maxHeight).toBe(expectedMaxHeight)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should have correct CSS styles for suggestion items container', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const container = component?.querySelector('.suggestion-items-container') as HTMLElement
+      const computedStyle = window.getComputedStyle(container)
+
+      expect(computedStyle.position).toBe('absolute')
+      expect(computedStyle.overflow).toBe('hidden')
+      expect(computedStyle.zIndex).toBe('1')
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should call selectSuggestion with correct index for second item', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.currentSuggestions.setValue([
+        createSuggestion('First', 100),
+        createSuggestion('Second', 90),
+        createSuggestion('Third', 80),
+      ])
+      manager.isOpened.setValue(true)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      const selectSpy = vi.spyOn(manager, 'selectSuggestion')
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const items = component?.querySelectorAll('.suggestion-item')
+      ;(items[1] as HTMLElement)?.click()
+
+      expect(selectSpy).toHaveBeenCalledWith(injector, 1)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should update container z-index when opening and closing', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.isOpened.setValue(false)
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteSuggestionList manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      manager.isOpened.setValue(true)
+      await sleepAsync(50)
+
+      const component = document.querySelector('shade-command-palette-suggestion-list') as HTMLElement
+      const container = component?.querySelector('.suggestion-items-container') as HTMLElement
+      expect(container?.style.zIndex).toBe('1')
+
+      manager.isOpened.setValue(false)
+      await sleepAsync(50)
+
+      expect(container?.style.zIndex).toBe('-1')
+
+      manager[Symbol.dispose]()
+    })
+  })
+})

package/src/components/command-palette/command-palette-suggestion-list.tsx

@@ -1,40 +1,66 @@
 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 { CommandPaletteManager } from './command-palette-manager.js'
 
 export const CommandPaletteSuggestionList = Shade<{ manager: CommandPaletteManager; fullScreenSuggestions?: boolean }>({
   shadowDomName: 'shade-command-palette-suggestion-list',
-  render: ({ element, injector, props, useObservable }) => {
+  css: {
+    '& .suggestion-items-container': {
+      borderTop: 'none',
+      position: 'absolute',
+      borderRadius: `0px 0px ${cssVariableTheme.shape.borderRadius.lg} ${cssVariableTheme.shape.borderRadius.lg}`,
+      marginLeft: '14px',
+      marginTop: '4px',
+      overflow: 'hidden',
+      overflowY: 'auto',
+      zIndex: '1',
+      left: 'auto',
+      backgroundColor: cssVariableTheme.background.paper,
+      boxShadow: cssVariableTheme.shadows.lg,
+      backdropFilter: 'blur(20px)',
+      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: ({ injector, props, useObservable, useRef }) => {
     const { manager } = props
-    const { theme } = injector.getInstance(ThemeProviderService)
+    const containerRef = useRef<HTMLDivElement>('container')
 
     const [suggestions] = useObservable('suggestions', props.manager.currentSuggestions)
-    const [selectedIndex] = useObservable('selectedIndex', props.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', props.manager.selectedIndex)
 
     const [isOpenedAtRender] = useObservable('isOpenedAtRender', props.manager.isOpened, {
       onChange: (isOpened) => {
-        const container = element.firstElementChild as HTMLDivElement
+        const container = containerRef.current
+        if (!container) return
+        const hostParentWidth =
+          container.closest('shade-command-palette-suggestion-list')?.parentElement?.getBoundingClientRect().width ||
+          200
         if (isOpened) {
           container.style.display = 'initial'
           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,
             [
@@ -58,57 +84,29 @@ export const CommandPaletteSuggestionList = Shade<{ manager: CommandPaletteManag
       },
     })
 
+    const hostParentWidth =
+      containerRef.current?.closest('shade-command-palette-suggestion-list')?.parentElement?.getBoundingClientRect()
+        .width || 200
+
     return (
       <div
+        ref={containerRef}
         className="suggestion-items-container"
         style={{
-          borderTop: 'none',
-          position: 'absolute',
           opacity: manager.isOpened.getValue() ? '1' : '0',
-          borderRadius: '0px 0px 12px 12px',
-          marginLeft: '14px',
-          marginTop: '4px',
-          overflow: 'hidden',
-          overflowY: 'auto',
           maxHeight: `${window.innerHeight * 0.8}px`,
-          zIndex: '1',
-          left: 'auto',
-          backgroundColor: theme.background.paper,
-          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)`,
           ...(props.fullScreenSuggestions ? { left: '0', width: 'calc(100% - 42px)' } : {}),
         }}
       >
         {suggestions.map((s, i) => (
           <div
-            className="suggestion-item"
+            className={`suggestion-item${i === selectedIndex ? ' selected' : ''}`}
             onclick={() => {
               if (isOpenedAtRender) {
                 manager.selectSuggestion(injector, 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.element}
           </div>