@furystack/shades-common-components 10.0.35 → 11.0.0

package/src/components/command-palette/command-palette-input.spec.tsx

@@ -0,0 +1,320 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { CommandPaletteInput } from './command-palette-input.js'
+import { CommandPaletteManager } from './command-palette-manager.js'
+
+describe('CommandPaletteInput', () => {
+  let originalAnimate: typeof Element.prototype.animate
+  let animateCalls: Array<{ keyframes: unknown; options: unknown }>
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></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([])
+  }
+
+  it('should render with shadow DOM', async () => {
+    const injector = new Injector()
+    const manager = createManager()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <CommandPaletteInput manager={manager} />,
+    })
+
+    await sleepAsync(50)
+
+    const input = document.querySelector('shades-command-palette-input')
+    expect(input).not.toBeNull()
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should render an input element with placeholder', async () => {
+    const injector = new Injector()
+    const manager = createManager()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <CommandPaletteInput manager={manager} />,
+    })
+
+    await sleepAsync(50)
+
+    const component = document.querySelector('shades-command-palette-input') as HTMLElement
+    const inputElement = component?.querySelector('input')
+    expect(inputElement).not.toBeNull()
+    expect(inputElement?.placeholder).toBe('Type to search commands...')
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should start with width 0% when closed', async () => {
+    const injector = new Injector()
+    const manager = createManager()
+    manager.isOpened.setValue(false)
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <CommandPaletteInput manager={manager} />,
+    })
+
+    await sleepAsync(50)
+
+    const component = document.querySelector('shades-command-palette-input') as HTMLElement
+    expect(component.style.width).toBe('0%')
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should have width 100% when opened', async () => {
+    const injector = new Injector()
+    const manager = createManager()
+    manager.isOpened.setValue(true)
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <CommandPaletteInput manager={manager} />,
+    })
+
+    await sleepAsync(50)
+
+    const component = document.querySelector('shades-command-palette-input') as HTMLElement
+    expect(component.style.width).toBe('100%')
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should animate width when opening', async () => {
+    const injector = new Injector()
+    const manager = createManager()
+    manager.isOpened.setValue(false)
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <CommandPaletteInput manager={manager} />,
+    })
+
+    await sleepAsync(50)
+    animateCalls = []
+
+    manager.isOpened.setValue(true)
+    await sleepAsync(50)
+
+    const widthAnimation = animateCalls.find(
+      (call) =>
+        Array.isArray(call.keyframes) &&
+        call.keyframes.some((kf: Keyframe) => kf.width === '0%') &&
+        call.keyframes.some((kf: Keyframe) => kf.width === '100%'),
+    )
+
+    expect(widthAnimation).toBeDefined()
+    expect((widthAnimation?.options as KeyframeAnimationOptions)?.duration).toBe(300)
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should animate width when closing', async () => {
+    const injector = new Injector()
+    const manager = createManager()
+    manager.isOpened.setValue(true)
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <CommandPaletteInput manager={manager} />,
+    })
+
+    await sleepAsync(50)
+    animateCalls = []
+
+    manager.isOpened.setValue(false)
+    await sleepAsync(50)
+
+    const widthAnimation = animateCalls.find(
+      (call) =>
+        Array.isArray(call.keyframes) &&
+        call.keyframes.some((kf: Keyframe) => kf.width === '100%') &&
+        call.keyframes.some((kf: Keyframe) => kf.width === '0%'),
+    )
+
+    expect(widthAnimation).toBeDefined()
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should clear input value when opening', async () => {
+    const injector = new Injector()
+    const manager = createManager()
+    manager.isOpened.setValue(false)
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <CommandPaletteInput manager={manager} />,
+    })
+
+    await sleepAsync(50)
+
+    const component = document.querySelector('shades-command-palette-input') as HTMLElement
+    const inputElement = component?.querySelector('input') as HTMLInputElement
+    inputElement.value = 'some text'
+
+    manager.isOpened.setValue(true)
+    await sleepAsync(50)
+
+    expect(inputElement.value).toBe('')
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should clear input value when closing', async () => {
+    const injector = new Injector()
+    const manager = createManager()
+    manager.isOpened.setValue(true)
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <CommandPaletteInput manager={manager} />,
+    })
+
+    await sleepAsync(50)
+
+    const component = document.querySelector('shades-command-palette-input') as HTMLElement
+    const inputElement = component?.querySelector('input') as HTMLInputElement
+    inputElement.value = 'search term'
+
+    manager.isOpened.setValue(false)
+    await sleepAsync(50)
+
+    expect(inputElement.value).toBe('')
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should have overflow hidden style', async () => {
+    const injector = new Injector()
+    const manager = createManager()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <CommandPaletteInput manager={manager} />,
+    })
+
+    await sleepAsync(50)
+
+    const component = document.querySelector('shades-command-palette-input') as HTMLElement
+    const computedStyle = window.getComputedStyle(component)
+    expect(computedStyle.overflow).toBe('hidden')
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should use cubic-bezier easing for animations', async () => {
+    const injector = new Injector()
+    const manager = createManager()
+    manager.isOpened.setValue(false)
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <CommandPaletteInput manager={manager} />,
+    })
+
+    await sleepAsync(50)
+    animateCalls = []
+
+    manager.isOpened.setValue(true)
+    await sleepAsync(50)
+
+    const widthAnimation = animateCalls.find(
+      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
+    )
+
+    expect(widthAnimation).toBeDefined()
+    expect((widthAnimation?.options as KeyframeAnimationOptions)?.easing).toBe(
+      'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
+    )
+
+    manager[Symbol.dispose]()
+  })
+
+  it('should fill animation forwards', async () => {
+    const injector = new Injector()
+    const manager = createManager()
+    manager.isOpened.setValue(false)
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <CommandPaletteInput manager={manager} />,
+    })
+
+    await sleepAsync(50)
+    animateCalls = []
+
+    manager.isOpened.setValue(true)
+    await sleepAsync(50)
+
+    const widthAnimation = animateCalls.find(
+      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
+    )
+
+    expect(widthAnimation).toBeDefined()
+    expect((widthAnimation?.options as KeyframeAnimationOptions)?.fill).toBe('forwards')
+
+    manager[Symbol.dispose]()
+  })
+})

package/src/components/command-palette/command-palette-input.tsx

@@ -1,5 +1,5 @@
 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'
 
@@ -27,32 +27,29 @@ const updateComponent = async (element: HTMLElement, isOpened: boolean) => {
 
 export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
   shadowDomName: 'shades-command-palette-input',
-  render: ({ element, props, injector, useObservable }) => {
-    const { theme } = injector.getInstance(ThemeProviderService)
+  css: {
+    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 }) => {
     const { manager } = props
 
     const [isCurrentlyOpened] = useObservable('isOpened', manager.isOpened, {
       onChange: (newValue) => void updateComponent(element, newValue),
     })
     element.style.width = isCurrentlyOpened ? '100%' : '0%'
-    element.style.overflow = 'hidden'
-    return (
-      <input
-        autofocus
-        placeholder="Type to search commands..."
-        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 commands..." />
   },
 })