@furystack/shades-common-components 14.0.0 → 15.0.0

package/src/components/accordion/accordion.tsx

@@ -1,12 +1,21 @@
 import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
 
+let nextAccordionId = 0
+
 /**
  * Props for the Accordion container component.
  */
 export type AccordionProps = {
   /** Visual variant of the accordion container */
   variant?: 'outlined' | 'elevation'
+  /**
+   * Section name for spatial navigation scoping.
+   * Sets `data-nav-section` on the accordion so that SpatialNavigationService
+   * constrains arrow-key navigation within the accordion group.
+   * Auto-generated per instance when not provided.
+   */
+  navSection?: string
 }
 
 /**
@@ -41,9 +50,12 @@ export const Accordion = Shade<AccordionProps>({
       background: cssVariableTheme.background.paper,
     },
   },
-  render: ({ props, useHostProps, children }) => {
+  render: ({ props, useHostProps, children, useState }) => {
+    const [navSectionId] = useState('navSectionId', String(nextAccordionId++))
+
     useHostProps({
       'data-variant': props.variant || undefined,
+      'data-nav-section': props.navSection ?? `accordion-${navSectionId}`,
     })
 
     return <>{children}</>

package/src/components/carousel.tsx

@@ -200,7 +200,7 @@ export const Carousel = Shade<CarouselProps>({
       'data-vertical': vertical ? '' : undefined,
       role: 'region',
       'aria-roledescription': 'carousel',
-      tabindex: '0',
+      tabIndex: 0,
       ...(style ? { style: style as Record<string, string> } : {}),
     })
 

package/src/components/chip.spec.tsx

@@ -140,6 +140,70 @@ describe('Chip', () => {
     expect(chip.hasAttribute('data-clickable')).toBe(true)
   })
 
+  it('should be focusable when clickable', async () => {
+    const el = (
+      <div>
+        <Chip clickable>Clickable</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.getAttribute('tabindex')).toBe('0')
+  })
+
+  it('should be focusable when onclick handler is provided', async () => {
+    const el = (
+      <div>
+        <Chip onclick={() => {}}>Click Handler</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.getAttribute('tabindex')).toBe('0')
+  })
+
+  it('should not be focusable when clickable but disabled', async () => {
+    const el = (
+      <div>
+        <Chip clickable disabled>
+          Disabled Clickable
+        </Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.hasAttribute('tabindex')).toBe(false)
+  })
+
+  it('should not be focusable when not clickable', async () => {
+    const el = (
+      <div>
+        <Chip>Not Clickable</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.hasAttribute('tabindex')).toBe(false)
+  })
+
+  it('should have a focusable delete button', async () => {
+    const onDelete = vi.fn()
+    const el = (
+      <div>
+        <Chip onDelete={onDelete}>Deletable</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    const deleteBtn = chip.querySelector('.chip-delete') as HTMLElement
+    expect(deleteBtn.getAttribute('tabindex')).toBe('0')
+  })
+
   it('should set CSS custom properties for palette color', async () => {
     const el = (
       <div>

package/src/components/chip.tsx

@@ -152,11 +152,13 @@ export const Chip = Shade<ChipProps>({
     const { variant, color, size, disabled, clickable, onDelete, style, ...rest } = props
 
     const colors = color ? paletteFullColors[color] : defaultColors
+    const isClickable = clickable || rest.onclick
     useHostProps({
       'data-variant': variant || undefined,
       'data-size': size === 'small' ? 'small' : undefined,
       'data-disabled': disabled ? '' : undefined,
-      'data-clickable': clickable || rest.onclick ? '' : undefined,
+      'data-clickable': isClickable ? '' : undefined,
+      tabIndex: isClickable && !disabled ? 0 : undefined,
       style: {
         '--chip-color-main': colors.main,
         '--chip-color-main-contrast': colors.mainContrast,
@@ -174,6 +176,7 @@ export const Chip = Shade<ChipProps>({
           <span
             className="chip-delete"
             role="button"
+            tabIndex={0}
             onclick={(ev: MouseEvent) => {
               ev.stopPropagation()
               onDelete(ev)

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

@@ -121,12 +121,16 @@ describe('CommandPalette', () => {
   })
 
   describe('keyboard navigation', () => {
-    const triggerKeyup = (input: HTMLInputElement, key: string) => {
-      const event = new KeyboardEvent('keyup', { key, bubbles: true })
+    const triggerKeydown = (input: HTMLInputElement, key: string) => {
+      const event = new KeyboardEvent('keydown', { key, bubbles: true })
       Object.defineProperty(event, 'target', { value: input, writable: false })
       input.dispatchEvent(event)
     }
 
+    const triggerInput = (input: HTMLInputElement) => {
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+
     const getSuggestionItems = (commandPalette: HTMLElement) => {
       const suggestionList = commandPalette.querySelector('shade-command-palette-suggestion-list') as HTMLElement
       return suggestionList?.querySelectorAll('.suggestion-item') || []
@@ -155,13 +159,13 @@ describe('CommandPalette', () => {
 
         // Open and trigger suggestions
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
 
         // Press ArrowDown
-        triggerKeyup(input, 'ArrowDown')
+        triggerKeydown(input, 'ArrowDown')
         await flushUpdates()
 
         const suggestionItems = getSuggestionItems(commandPalette)
@@ -192,15 +196,15 @@ describe('CommandPalette', () => {
 
         // Open and trigger suggestions
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
 
         // Navigate down then up
-        triggerKeyup(input, 'ArrowDown')
+        triggerKeydown(input, 'ArrowDown')
         await flushUpdates()
-        triggerKeyup(input, 'ArrowUp')
+        triggerKeydown(input, 'ArrowUp')
         await flushUpdates()
 
         const suggestionItems = getSuggestionItems(commandPalette)
@@ -226,15 +230,15 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
 
         // Press ArrowDown multiple times
-        triggerKeyup(input, 'ArrowDown')
-        triggerKeyup(input, 'ArrowDown')
-        triggerKeyup(input, 'ArrowDown')
+        triggerKeydown(input, 'ArrowDown')
+        triggerKeydown(input, 'ArrowDown')
+        triggerKeydown(input, 'ArrowDown')
         await flushUpdates()
 
         const suggestionItems = getSuggestionItems(commandPalette)
@@ -260,13 +264,13 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
 
         // Press ArrowUp when already at first item
-        triggerKeyup(input, 'ArrowUp')
+        triggerKeydown(input, 'ArrowUp')
         await flushUpdates()
 
         const suggestionItems = getSuggestionItems(commandPalette)
@@ -293,13 +297,13 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
 
         // Press Enter
-        triggerKeyup(input, 'Enter')
+        triggerKeydown(input, 'Enter')
         await flushUpdates()
 
         expect(onSelected).toHaveBeenCalledTimes(1)
@@ -309,12 +313,16 @@ describe('CommandPalette', () => {
   })
 
   describe('selection', () => {
-    const triggerKeyup = (input: HTMLInputElement, key: string) => {
-      const event = new KeyboardEvent('keyup', { key, bubbles: true })
+    const triggerKeydown = (input: HTMLInputElement, key: string) => {
+      const event = new KeyboardEvent('keydown', { key, bubbles: true })
       Object.defineProperty(event, 'target', { value: input, writable: false })
       input.dispatchEvent(event)
     }
 
+    const triggerInput = (input: HTMLInputElement) => {
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+
     const getSuggestionItems = (commandPalette: HTMLElement) => {
       const suggestionList = commandPalette.querySelector('shade-command-palette-suggestion-list') as HTMLElement
       return suggestionList?.querySelectorAll('.suggestion-item') || []
@@ -345,7 +353,7 @@ describe('CommandPalette', () => {
 
         const input = commandPalette.querySelector('input') as HTMLInputElement
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
@@ -386,12 +394,13 @@ describe('CommandPalette', () => {
 
         const input = commandPalette.querySelector('input') as HTMLInputElement
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
+        await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
 
         // Select via Enter
-        triggerKeyup(input, 'Enter')
+        triggerKeydown(input, 'Enter')
         await flushUpdates()
 
         expect(commandPalette.hasAttribute('data-opened')).toBe(false)
@@ -400,10 +409,8 @@ describe('CommandPalette', () => {
   })
 
   describe('command providers', () => {
-    const triggerKeyup = (input: HTMLInputElement, key: string) => {
-      const event = new KeyboardEvent('keyup', { key, bubbles: true })
-      Object.defineProperty(event, 'target', { value: input, writable: false })
-      input.dispatchEvent(event)
+    const triggerInput = (input: HTMLInputElement) => {
+      input.dispatchEvent(new Event('input', { bubbles: true }))
     }
 
     const getSuggestionItems = (commandPalette: HTMLElement) => {
@@ -430,7 +437,7 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'search'
-        triggerKeyup(input, 'h')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
@@ -459,7 +466,7 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'search'
-        triggerKeyup(input, 'h')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
@@ -493,7 +500,7 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'search'
-        triggerKeyup(input, 'h')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
@@ -585,9 +592,7 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'test'
-        const event = new KeyboardEvent('keyup', { key: 't', bubbles: true })
-        Object.defineProperty(event, 'target', { value: input, writable: false })
-        input.dispatchEvent(event)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await vi.advanceTimersByTimeAsync(260)
         await flushUpdates()
@@ -602,6 +607,65 @@ describe('CommandPalette', () => {
     })
   })
 
+  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
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPalette commandProviders={[]} defaultPrefix=">" />,
+        })
+
+        await flushUpdates()
+
+        const commandPalette = document.querySelector('shade-command-palette') as HTMLElement
+        expect(commandPalette.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
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPalette commandProviders={[]} defaultPrefix=">" />,
+        })
+
+        await flushUpdates()
+
+        const commandPalette = document.querySelector('shade-command-palette') as HTMLElement
+        expect(commandPalette.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
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPalette commandProviders={[]} defaultPrefix=">" />,
+        })
+
+        await flushUpdates()
+
+        const commandPalette = document.querySelector('shade-command-palette') as HTMLElement
+        const input = commandPalette.querySelector('input') as HTMLInputElement
+
+        commandPalette.dispatchEvent(new FocusEvent('focus', { bubbles: false }))
+
+        await flushUpdates()
+
+        expect(document.activeElement).toBe(input)
+      })
+    })
+  })
+
   describe('click away', () => {
     it('should close when clicking outside the component', async () => {
       await usingAsync(new Injector(), async (injector) => {
@@ -681,9 +745,7 @@ describe('CommandPalette', () => {
 
         const input = commandPalette.querySelector('input') as HTMLInputElement
         input.value = 'test'
-        const event = new KeyboardEvent('keyup', { key: 't', bubbles: true })
-        Object.defineProperty(event, 'target', { value: input, writable: false })
-        input.dispatchEvent(event)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await flushUpdates()
 

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

@@ -62,13 +62,25 @@ export const CommandPalette = Shade<CommandPaletteProps>({
     useHostProps({
       ...(isLoading ? { 'data-loading': '' } : {}),
       ...(isOpenedAtRender ? { 'data-opened': '' } : {}),
+      tabIndex: -1,
+      'data-spatial-nav-target': '',
+      onfocus: (ev: FocusEvent) => {
+        const host = ev.currentTarget as HTMLElement
+        const input = host.querySelector('input')
+        if (input) {
+          input.focus()
+        }
+      },
     })
 
     return (
       <div
         ref={wrapperRef}
         className="command-palette-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(injector)
@@ -84,11 +96,11 @@ export const CommandPalette = Shade<CommandPaletteProps>({
               Math.min(manager.selectedIndex.getValue() + 1, manager.currentSuggestions.getValue().length - 1),
             )
           }
-
+        }}
+        oninput={(ev) => {
           if (!manager.isOpened.getValue()) {
             manager.isOpened.setValue(true)
           }
-
           void manager.getSuggestion({ injector, term: (ev.target as HTMLInputElement).value })
         }}
       >

package/src/components/data-grid/data-grid-row.tsx

@@ -75,7 +75,20 @@ export const DataGridRow: <T, Column extends string>(
     }
 
     useHostProps({
+      tabIndex: isFocused ? 0 : -1,
+      'data-spatial-nav-target': '',
       'aria-selected': isSelected.toString(),
+      onpointerdown: () => {
+        service.setFocusAnchor()
+      },
+      onfocus: () => {
+        if (service.focusedEntry.getValue() !== entry) {
+          service.focusedEntry.setValue(entry)
+        }
+        if (!service.hasFocus.getValue()) {
+          service.hasFocus.setValue(true)
+        }
+      },
       ...(isSelected ? { 'data-selected': '' } : {}),
       ...(isFocused ? { 'data-focused': '' } : {}),
       ...(Object.keys(rowStyle).length > 0 ? { style: rowStyle } : {}),
@@ -89,6 +102,11 @@ export const DataGridRow: <T, Column extends string>(
         if (!el) return
         const hostEl = el.closest('shades-data-grid-row') as HTMLElement
         if (!hostEl) return
+
+        if (document.activeElement !== hostEl) {
+          hostEl.focus({ preventScroll: true })
+        }
+
         const scrollContainer = hostEl.closest('shade-data-grid') as HTMLElement
         if (!scrollContainer) return
 
@@ -106,13 +124,13 @@ export const DataGridRow: <T, Column extends string>(
           const scrollAdjustment = rowTopInContainer - headerHeight
           scrollContainer.scrollTo({
             top: scrollContainer.scrollTop + scrollAdjustment,
-            behavior: 'smooth',
+            behavior: 'instant',
           })
         } else if (rowBottomInContainer > scrollContainer.clientHeight - footerHeight) {
           const scrollAdjustment = rowBottomInContainer - (scrollContainer.clientHeight - footerHeight)
           scrollContainer.scrollTo({
             top: scrollContainer.scrollTop + scrollAdjustment,
-            behavior: 'smooth',
+            behavior: 'instant',
           })
         }
       })