@furystack/shades-common-components 13.5.0 → 15.0.0

package/src/components/suggest/index.spec.tsx

@@ -68,7 +68,7 @@ describe('Suggest', () => {
   })
 
   describe('rendering', () => {
-    it('should render with shadow DOM', async () => {
+    it('should render as custom element', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const onSelectSuggestion = vi.fn()
@@ -200,13 +200,11 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'test'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
-        const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true })
+        const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
         Object.defineProperty(arrowDownEvent, 'target', { value: input })
         wrapper?.dispatchEvent(arrowDownEvent)
 
@@ -243,18 +241,16 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'test'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
-        const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true })
+        const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
         Object.defineProperty(arrowDownEvent, 'target', { value: input })
         wrapper?.dispatchEvent(arrowDownEvent)
         wrapper?.dispatchEvent(arrowDownEvent)
 
-        const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true })
+        const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })
         Object.defineProperty(arrowUpEvent, 'target', { value: input })
         wrapper?.dispatchEvent(arrowUpEvent)
 
@@ -290,13 +286,11 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'First'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
-        const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true })
+        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
         Object.defineProperty(enterEvent, 'target', { value: input })
         wrapper?.dispatchEvent(enterEvent)
 
@@ -332,13 +326,11 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'First'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
-        const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true, cancelable: true })
+        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
         Object.defineProperty(enterEvent, 'target', { value: input })
 
         const preventDefaultSpy = vi.spyOn(enterEvent, 'preventDefault')
@@ -348,7 +340,7 @@ describe('Suggest', () => {
       })
     })
 
-    it('should prevent default on ArrowUp key', async () => {
+    it('should prevent default on ArrowUp key when suggestions are open', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const onSelectSuggestion = vi.fn()
@@ -372,8 +364,11 @@ describe('Suggest', () => {
         const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
         const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'First'
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await advanceTimers(300)
 
-        const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true, cancelable: true })
+        const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, cancelable: true })
         Object.defineProperty(arrowUpEvent, 'target', { value: input })
 
         const preventDefaultSpy = vi.spyOn(arrowUpEvent, 'preventDefault')
@@ -383,7 +378,7 @@ describe('Suggest', () => {
       })
     })
 
-    it('should prevent default on ArrowDown key', async () => {
+    it('should prevent default on ArrowDown key when suggestions are open', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const onSelectSuggestion = vi.fn()
@@ -407,8 +402,11 @@ describe('Suggest', () => {
         const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
         const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'First'
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await advanceTimers(300)
 
-        const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true, cancelable: true })
+        const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true })
         Object.defineProperty(arrowDownEvent, 'target', { value: input })
 
         const preventDefaultSpy = vi.spyOn(arrowDownEvent, 'preventDefault')
@@ -418,6 +416,39 @@ describe('Suggest', () => {
       })
     })
 
+    it('should not prevent default on arrow keys when dropdown is closed', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
+
+        await advanceTimers(50)
+
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const input = suggest?.querySelector('input') as HTMLInputElement
+
+        const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true })
+        Object.defineProperty(arrowDownEvent, 'target', { value: input })
+        const preventDefaultSpy = vi.spyOn(arrowDownEvent, 'preventDefault')
+        wrapper?.dispatchEvent(arrowDownEvent)
+
+        expect(preventDefaultSpy).not.toHaveBeenCalled()
+      })
+    })
+
     it('should not move selection below 0', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
@@ -442,9 +473,12 @@ describe('Suggest', () => {
         const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
         const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'test'
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await advanceTimers(300)
 
         for (let i = 0; i < 5; i++) {
-          const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true })
+          const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })
           Object.defineProperty(arrowUpEvent, 'target', { value: input })
           wrapper?.dispatchEvent(arrowUpEvent)
         }
@@ -616,14 +650,11 @@ describe('Suggest', () => {
         await advanceTimers(50)
 
         const suggest = document.querySelector('shade-suggest') as HTMLElement
-        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'First'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
@@ -658,14 +689,11 @@ describe('Suggest', () => {
         await advanceTimers(50)
 
         const suggest = document.querySelector('shade-suggest') as HTMLElement
-        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'test'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
@@ -698,14 +726,11 @@ describe('Suggest', () => {
         await advanceTimers(50)
 
         const suggest = document.querySelector('shade-suggest') as HTMLElement
-        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'test'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
@@ -742,13 +767,11 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'First'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
-        const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true })
+        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
         Object.defineProperty(enterEvent, 'target', { value: input })
         wrapper?.dispatchEvent(enterEvent)
 
@@ -784,15 +807,13 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'First'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
         expect(suggest?.hasAttribute('data-opened')).toBe(true)
 
-        const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true })
+        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
         Object.defineProperty(enterEvent, 'target', { value: input })
         wrapper?.dispatchEvent(enterEvent)
 
@@ -883,6 +904,89 @@ describe('Suggest', () => {
     })
   })
 
+  describe('spatial navigation attributes', () => {
+    it('should have data-spatial-nav-target on the host element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
+
+        await advanceTimers(50)
+
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        expect(suggest.hasAttribute('data-spatial-nav-target')).toBe(true)
+      })
+    })
+
+    it('should have tabIndex of -1 on the host element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
+
+        await advanceTimers(50)
+
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        expect(suggest.tabIndex).toBe(-1)
+      })
+    })
+
+    it('should delegate focus to the inner input when the host is focused', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
+
+        await advanceTimers(50)
+
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const input = suggest.querySelector('input') as HTMLInputElement
+
+        suggest.dispatchEvent(new FocusEvent('focus', { bubbles: false }))
+
+        await advanceTimers(10)
+
+        expect(document.activeElement).toBe(input)
+      })
+    })
+  })
+
   describe('synchronous suggestions mode', () => {
     it('should render with string[] suggestions', async () => {
       await usingAsync(new Injector(), async (injector) => {
@@ -956,7 +1060,7 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
 
         input.value = 'ap'
-        input.dispatchEvent(new KeyboardEvent('keyup', { key: 'p', bubbles: true }))
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 

package/src/components/suggest/index.tsx

@@ -41,7 +41,7 @@ const isSyncProps = (props: SuggestProps<unknown>): props is SuggestSyncProps =>
 export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX.Element<any> = Shade<
   SuggestProps<any>
 >({
-  shadowDomName: 'shade-suggest',
+  customElementName: 'shade-suggest',
   css: {
     ...searchableInputStyles,
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -82,6 +82,15 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
 
     useHostProps({
       'data-opened': isOpened ? '' : undefined,
+      tabIndex: -1,
+      'data-spatial-nav-target': '',
+      onfocus: (ev: FocusEvent) => {
+        const host = ev.currentTarget as HTMLElement
+        const input = host.querySelector('input')
+        if (input) {
+          input.focus()
+        }
+      },
     })
     useDisposable('isLoadingSubscription', () =>
       manager.isLoading.subscribe((isLoading) => {
@@ -107,7 +116,10 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
       <div
         ref={wrapperRef}
         className="suggest-wrapper"
-        onkeyup={(ev) => {
+        onkeydown={(ev) => {
+          const hasSuggestions = manager.isOpened.getValue() && manager.currentSuggestions.getValue().length > 0
+          if (!hasSuggestions) return
+
           if (ev.key === 'Enter') {
             ev.preventDefault()
             manager.selectSuggestion()
@@ -123,7 +135,8 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
               Math.min(manager.selectedIndex.getValue() + 1, manager.currentSuggestions.getValue().length - 1),
             )
           }
-
+        }}
+        oninput={(ev) => {
           void manager.getSuggestion({ injector, term: (ev.target as HTMLInputElement).value })
         }}
       >

package/src/components/suggest/suggest-input.spec.tsx

@@ -47,7 +47,7 @@ describe('SuggestInput', () => {
     return new SuggestManager<TestEntry>(getEntries, getSuggestionEntry)
   }
 
-  it('should render with shadow DOM', async () => {
+  it('should render as custom element', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const manager = createManager()

package/src/components/suggest/suggest-input.tsx

@@ -3,7 +3,7 @@ import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { SuggestManager } from './suggest-manager.js'
 
 export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
-  shadowDomName: 'shades-suggest-input',
+  customElementName: 'shades-suggest-input',
   css: {
     width: '100%',
     fontFamily: cssVariableTheme.typography.fontFamily,

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

@@ -55,7 +55,7 @@ describe('SuggestionList', () => {
     return new SuggestManager<TestEntry>(getEntries, getSuggestionEntry)
   }
 
-  it('should render with shadow DOM', async () => {
+  it('should render as custom element', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const manager = createManager()

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

@@ -6,7 +6,7 @@ import type { SuggestManager } from './suggest-manager.js'
 
 export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children: ChildrenList) => JSX.Element<any> =
   Shade<{ manager: SuggestManager<any> }>({
-    shadowDomName: 'shade-suggest-suggestion-list',
+    customElementName: 'shade-suggest-suggestion-list',
     css: {
       fontFamily: cssVariableTheme.typography.fontFamily,
       '& .suggestion-items-container': {

package/src/components/tabs.tsx

@@ -13,7 +13,7 @@ export type Tab = {
 }
 
 const TabHeader = Shade<{ hash: string }>({
-  shadowDomName: 'shade-tab-header',
+  customElementName: 'shade-tab-header',
   css: {
     padding: `${cssVariableTheme.spacing.md} 40px`,
     cursor: 'pointer',
@@ -74,7 +74,7 @@ export const Tabs = Shade<{
   onAdd?: () => void
   viewTransition?: boolean | ViewTransitionConfig
 }>({
-  shadowDomName: 'shade-tabs',
+  customElementName: 'shade-tabs',
   css: {
     fontFamily: cssVariableTheme.typography.fontFamily,
     width: '100%',
@@ -115,6 +115,10 @@ export const Tabs = Shade<{
       color: cssVariableTheme.text.primary,
       boxShadow: `inset 0 -2px 0 ${cssVariableTheme.palette.primary.main}`,
     },
+    '& .shade-tab-btn:focus-visible': {
+      outline: cssVariableTheme.action.focusOutline,
+      outlineOffset: '-2px',
+    },
 
     // Close button (span with role="button" via event delegation)
     '& .shade-tab-close': {

package/src/components/timeline.tsx

@@ -21,7 +21,7 @@ export type TimelineItemProps = PartialElement<HTMLElement> & {
  * Renders a dot, a connector tail, and the item's content (children).
  */
 export const TimelineItem = Shade<TimelineItemProps>({
-  shadowDomName: 'shade-timeline-item',
+  customElementName: 'shade-timeline-item',
   css: {
     display: 'flex',
     position: 'relative',
@@ -157,7 +157,7 @@ export type TimelineProps = PartialElement<HTMLElement> & {
  * Supports left, right, and alternate layout modes with optional pending state.
  */
 export const Timeline = Shade<TimelineProps>({
-  shadowDomName: 'shade-timeline',
+  customElementName: 'shade-timeline',
   css: {
     display: 'flex',
     flexDirection: 'column',

package/src/components/tooltip.tsx

@@ -23,7 +23,7 @@ export type TooltipProps = {
 }
 
 export const Tooltip = Shade<TooltipProps>({
-  shadowDomName: 'shade-tooltip',
+  customElementName: 'shade-tooltip',
   css: {
     position: 'relative',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/tree/tree-item.tsx

@@ -20,7 +20,7 @@ const INDENT_PX = 20
 const EXPAND_ICON_WIDTH = 20
 
 export const TreeItem: <T>(props: TreeItemProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
-  shadowDomName: 'shade-tree-item',
+  customElementName: 'shade-tree-item',
   css: {
     display: 'flex',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -69,10 +69,20 @@ export const TreeItem: <T>(props: TreeItemProps<T>, children: ChildrenList) => J
     const isSelected = selection.includes(item)
 
     useHostProps({
+      tabIndex: isFocused ? 0 : -1,
+      'data-spatial-nav-target': '',
       role: 'treeitem',
       'aria-level': (level + 1).toString(),
       'aria-selected': isSelected.toString(),
       ...(hasChildren ? { 'aria-expanded': isExpanded.toString() } : {}),
+      onfocus: () => {
+        if (treeService.focusedItem.getValue() !== item) {
+          treeService.focusedItem.setValue(item)
+        }
+        if (!treeService.hasFocus.getValue()) {
+          treeService.hasFocus.setValue(true)
+        }
+      },
       onclick: (ev: MouseEvent) => {
         treeService.handleItemClick(item, ev)
       },
@@ -93,10 +103,15 @@ export const TreeItem: <T>(props: TreeItemProps<T>, children: ChildrenList) => J
       queueMicrotask(() => {
         const el = wrapperRef.current
         if (!el) return
+        const hostEl = el.closest('shade-tree-item') as HTMLElement
+        if (!hostEl) return
+
+        if (document.activeElement !== hostEl) {
+          hostEl.focus({ preventScroll: true })
+        }
+
         const scrollContainer = el.closest('shade-tree') as HTMLElement
         if (scrollContainer) {
-          const hostEl = el.closest('shade-tree-item') as HTMLElement
-          if (!hostEl) return
           const containerRect = scrollContainer.getBoundingClientRect()
           const itemRect = hostEl.getBoundingClientRect()
           const itemTopInContainer = itemRect.top - containerRect.top
@@ -105,12 +120,12 @@ export const TreeItem: <T>(props: TreeItemProps<T>, children: ChildrenList) => J
           if (itemTopInContainer < 0) {
             scrollContainer.scrollTo({
               top: scrollContainer.scrollTop + itemTopInContainer,
-              behavior: 'smooth',
+              behavior: 'instant',
             })
           } else if (itemBottomInContainer > scrollContainer.clientHeight) {
             scrollContainer.scrollTo({
               top: scrollContainer.scrollTop + (itemBottomInContainer - scrollContainer.clientHeight),
-              behavior: 'smooth',
+              behavior: 'instant',
             })
           }
         }