@furystack/shades-common-components 11.0.0 → 12.0.0

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

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
 import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync } from '@furystack/utils'
+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'
@@ -47,274 +47,285 @@ describe('CommandPaletteInput', () => {
     return new CommandPaletteManager([])
   }
 
-  it('should render with shadow DOM', async () => {
-    const injector = new Injector()
-    const manager = createManager()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+  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} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteInput manager={manager} />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const input = document.querySelector('shades-command-palette-input')
-    expect(input).not.toBeNull()
+      const input = document.querySelector('shades-command-palette-input')
+      expect(input).not.toBeNull()
 
-    manager[Symbol.dispose]()
+      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 usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    await sleepAsync(50)
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteInput manager={manager} />,
+      })
 
-    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...')
+      await sleepAsync(50)
 
-    manager[Symbol.dispose]()
+      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 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)
+      await sleepAsync(50)
 
-    const component = document.querySelector('shades-command-palette-input') as HTMLElement
-    expect(component.style.width).toBe('0%')
+      const component = document.querySelector('shades-command-palette-input') as HTMLElement
+      expect(component.hasAttribute('data-opened')).toBe(false)
 
-    manager[Symbol.dispose]()
+      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 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)
+      await sleepAsync(50)
 
-    const component = document.querySelector('shades-command-palette-input') as HTMLElement
-    expect(component.style.width).toBe('100%')
+      const component = document.querySelector('shades-command-palette-input') as HTMLElement
+      expect(component.hasAttribute('data-opened')).toBe(true)
 
-    manager[Symbol.dispose]()
+      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 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]()
     })
-
-    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 usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.isOpened.setValue(true)
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    await sleepAsync(50)
-    animateCalls = []
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteInput manager={manager} />,
+      })
 
-    manager.isOpened.setValue(false)
-    await sleepAsync(50)
+      await sleepAsync(50)
+      animateCalls = []
 
-    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%'),
-    )
+      manager.isOpened.setValue(false)
+      await sleepAsync(50)
 
-    expect(widthAnimation).toBeDefined()
+      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%'),
+      )
 
-    manager[Symbol.dispose]()
+      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 usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.isOpened.setValue(false)
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    await sleepAsync(50)
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteInput manager={manager} />,
+      })
 
-    const component = document.querySelector('shades-command-palette-input') as HTMLElement
-    const inputElement = component?.querySelector('input') as HTMLInputElement
-    inputElement.value = 'some text'
+      await sleepAsync(50)
 
-    manager.isOpened.setValue(true)
-    await sleepAsync(50)
+      const component = document.querySelector('shades-command-palette-input') as HTMLElement
+      const inputElement = component?.querySelector('input') as HTMLInputElement
+      inputElement.value = 'some text'
 
-    expect(inputElement.value).toBe('')
+      manager.isOpened.setValue(true)
+      await sleepAsync(50)
 
-    manager[Symbol.dispose]()
+      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 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)
+      await sleepAsync(50)
 
-    const component = document.querySelector('shades-command-palette-input') as HTMLElement
-    const inputElement = component?.querySelector('input') as HTMLInputElement
-    inputElement.value = 'search term'
+      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)
+      manager.isOpened.setValue(false)
+      await sleepAsync(50)
 
-    expect(inputElement.value).toBe('')
+      expect(inputElement.value).toBe('')
 
-    manager[Symbol.dispose]()
+      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 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)
+      await sleepAsync(50)
 
-    const component = document.querySelector('shades-command-palette-input') as HTMLElement
-    const computedStyle = window.getComputedStyle(component)
-    expect(computedStyle.overflow).toBe('hidden')
+      const component = document.querySelector('shades-command-palette-input') as HTMLElement
+      const computedStyle = window.getComputedStyle(component)
+      expect(computedStyle.overflow).toBe('hidden')
 
-    manager[Symbol.dispose]()
+      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 usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.isOpened.setValue(false)
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    await sleepAsync(50)
-    animateCalls = []
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteInput manager={manager} />,
+      })
 
-    manager.isOpened.setValue(true)
-    await sleepAsync(50)
+      await sleepAsync(50)
+      animateCalls = []
 
-    const widthAnimation = animateCalls.find(
-      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
-    )
+      manager.isOpened.setValue(true)
+      await sleepAsync(50)
 
-    expect(widthAnimation).toBeDefined()
-    expect((widthAnimation?.options as KeyframeAnimationOptions)?.easing).toBe(
-      'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
-    )
+      const widthAnimation = animateCalls.find(
+        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
+      )
 
-    manager[Symbol.dispose]()
+      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 usingAsync(new Injector(), async (injector) => {
+      const manager = createManager()
+      manager.isOpened.setValue(false)
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    await sleepAsync(50)
-    animateCalls = []
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CommandPaletteInput manager={manager} />,
+      })
 
-    manager.isOpened.setValue(true)
-    await sleepAsync(50)
+      await sleepAsync(50)
+      animateCalls = []
 
-    const widthAnimation = animateCalls.find(
-      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
-    )
+      manager.isOpened.setValue(true)
+      await sleepAsync(50)
 
-    expect(widthAnimation).toBeDefined()
-    expect((widthAnimation?.options as KeyframeAnimationOptions)?.fill).toBe('forwards')
+      const widthAnimation = animateCalls.find(
+        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
+      )
 
-    manager[Symbol.dispose]()
+      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 { 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)',
@@ -28,7 +34,11 @@ const updateComponent = async (element: HTMLElement, isOpened: boolean) => {
 export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
   shadowDomName: 'shades-command-palette-input',
   css: {
+    width: '0%',
     overflow: 'hidden',
+    '&[data-opened]': {
+      width: '100%',
+    },
     '& input': {
       color: cssVariableTheme.text.primary,
       outline: 'none',
@@ -42,14 +52,20 @@ export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
       letterSpacing: '0.01em',
     },
   },
-  render: ({ element, props, useObservable }) => {
+  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%'
+    useHostProps({ ...(isCurrentlyOpened ? { 'data-opened': '' } : {}) })
 
-    return <input autofocus placeholder="Type to search commands..." />
+    return (
+      <div ref={wrapperRef} style={{ width: isCurrentlyOpened ? '100%' : '0%', overflow: 'hidden' }}>
+        <input ref={inputRef} autofocus placeholder="Type to search commands..." />
+      </div>
+    )
   },
 })