@furystack/shades-common-components 13.5.0 → 15.0.0

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

@@ -23,7 +23,7 @@ export interface CommandPaletteProps {
 }
 
 export const CommandPalette = Shade<CommandPaletteProps>({
-  shadowDomName: 'shade-command-palette',
+  customElementName: 'shade-command-palette',
   css: {
     ...searchableInputStyles,
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -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/context-menu/context-menu-item.tsx

@@ -11,7 +11,7 @@ export type ContextMenuItemProps<T> = {
 
 export const ContextMenuItemComponent: <T>(props: ContextMenuItemProps<T>, children: ChildrenList) => JSX.Element<any> =
   Shade<ContextMenuItemProps<any>>({
-    shadowDomName: 'shade-context-menu-item',
+    customElementName: 'shade-context-menu-item',
     css: {
       display: 'flex',
       fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/context-menu/context-menu.tsx

@@ -12,7 +12,7 @@ export type ContextMenuProps<T> = {
 export const ContextMenu: <T>(props: ContextMenuProps<T>, children: ChildrenList) => JSX.Element<any> = Shade<
   ContextMenuProps<any>
 >({
-  shadowDomName: 'shade-context-menu',
+  customElementName: 'shade-context-menu',
   css: {
     fontFamily: cssVariableTheme.typography.fontFamily,
     '& .context-menu-backdrop': {

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

@@ -24,7 +24,7 @@ export const DataGridBody: <T, Column extends string>(
   props: DataGridBodyProps<T, Column>,
   children: ChildrenList,
 ) => JSX.Element<any> = Shade({
-  shadowDomName: 'shade-data-grid-body',
+  customElementName: 'shade-data-grid-body',
   elementBase: HTMLTableSectionElement,
   elementBaseName: 'tbody',
   css: {

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

@@ -21,7 +21,7 @@ export const DataGridRow: <T, Column extends string>(
   props: DataGridRowProps<T, Column>,
   children: ChildrenList,
 ) => JSX.Element<any> = Shade({
-  shadowDomName: 'shades-data-grid-row',
+  customElementName: 'shades-data-grid-row',
   css: {
     display: 'table-row',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -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',
           })
         }
       })