@furystack/shades-common-components 10.0.35 → 12.0.0

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

@@ -0,0 +1,331 @@
+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 { 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 as custom element', async () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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.hasAttribute('data-opened')).toBe(false)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should have width 100% when opened', 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: <CommandPaletteInput manager={manager} />,
+      })
+
+      await sleepAsync(50)
+
+      const component = document.querySelector('shades-command-palette-input') as HTMLElement
+      expect(component.hasAttribute('data-opened')).toBe(true)
+
+      manager[Symbol.dispose]()
+    })
+  })
+
+  it('should animate width 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: <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 () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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 () => {
+    await usingAsync(new Injector(), async (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,21 +1,27 @@
+import type { RefObject } 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 { CommandPaletteManager } from './command-palette-manager.js'
 
-const updateComponent = async (element: HTMLElement, isOpened: boolean) => {
-  const input = element.firstChild as HTMLInputElement | null
-  if (input) {
+const animateOpenState = async (
+  wrapperRef: RefObject<HTMLDivElement>,
+  inputRef: RefObject<HTMLInputElement>,
+  isOpened: boolean,
+) => {
+  const wrapper = wrapperRef.current
+  const input = inputRef.current
+  if (wrapper && input) {
     if (isOpened) {
       input.value = ''
-      await promisifyAnimation(element, [{ width: '0%' }, { width: '100%' }], {
+      await promisifyAnimation(wrapper, [{ width: '0%' }, { width: '100%' }], {
         duration: 300,
         fill: 'forwards',
         easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
       })
       input.focus()
     } else {
-      await promisifyAnimation(element, [{ width: '100%' }, { width: '0%' }], {
+      await promisifyAnimation(wrapper, [{ width: '100%' }, { width: '0%' }], {
         duration: 300,
         fill: 'forwards',
         easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
@@ -27,32 +33,39 @@ 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: {
+    width: '0%',
+    overflow: 'hidden',
+    '&[data-opened]': {
+      width: '100%',
+    },
+    '& 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: ({ props, useObservable, useRef, useHostProps }) => {
     const { manager } = props
+    const wrapperRef = useRef<HTMLDivElement>('wrapper')
+    const inputRef = useRef<HTMLInputElement>('input')
 
     const [isCurrentlyOpened] = useObservable('isOpened', manager.isOpened, {
-      onChange: (newValue) => void updateComponent(element, newValue),
+      onChange: (newValue) => void animateOpenState(wrapperRef, inputRef, newValue),
     })
-    element.style.width = isCurrentlyOpened ? '100%' : '0%'
-    element.style.overflow = 'hidden'
+    useHostProps({ ...(isCurrentlyOpened ? { 'data-opened': '' } : {}) })
+
     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',
-        }}
-      />
+      <div ref={wrapperRef} style={{ width: isCurrentlyOpened ? '100%' : '0%', overflow: 'hidden' }}>
+        <input ref={inputRef} autofocus placeholder="Type to search commands..." />
+      </div>
     )
   },
 })