@furystack/shades-common-components 13.5.0 → 15.0.0

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

@@ -1,7 +1,7 @@
 import type { FindOptions } from '@furystack/core'
 import { Injector } from '@furystack/inject'
 import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
-import { ObservableValue, usingAsync } from '@furystack/utils'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { CollectionService } from '../../services/collection-service.js'
 import { DataGrid } from './data-grid.js'
@@ -34,25 +34,23 @@ describe('DataGrid', () => {
     fn: (ctx: {
       injector: Injector
       service: CollectionService<TestEntry>
-      findOptions: ObservableValue<FindOptions<TestEntry, Array<keyof TestEntry>>>
+      findOptions: FindOptions<TestEntry, Array<keyof TestEntry>>
+      onFindOptionsChange: (options: FindOptions<TestEntry, Array<keyof TestEntry>>) => void
     }) => Promise<void>,
     opts?: { createService?: () => CollectionService<TestEntry> },
   ) => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(opts?.createService?.() ?? createTestService(), async (service) => {
-        await usingAsync(
-          new ObservableValue<FindOptions<TestEntry, Array<keyof TestEntry>>>({}),
-          async (findOptions) => {
-            await fn({ injector, service, findOptions })
-          },
-        )
+        const findOptions: FindOptions<TestEntry, Array<keyof TestEntry>> = {}
+        const onFindOptionsChange = vi.fn<(options: FindOptions<TestEntry, Array<keyof TestEntry>>) => void>()
+        await fn({ injector, service, findOptions, onFindOptionsChange })
       })
     })
   }
 
   describe('rendering', () => {
     it('should render with columns', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
@@ -63,6 +61,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -81,7 +80,7 @@ describe('DataGrid', () => {
     })
 
     it('should render table structure', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
@@ -92,6 +91,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -113,7 +113,7 @@ describe('DataGrid', () => {
     })
 
     it('should render custom header components when provided', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
@@ -124,6 +124,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{
                 id: () => <span data-testid="custom-header-id">Custom ID Header</span>,
@@ -143,7 +144,7 @@ describe('DataGrid', () => {
     })
 
     it('should render default header components from headerComponents.default', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
@@ -154,6 +155,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{
                 default: (name) => <span data-testid={`default-header-${name}`}>Default: {name}</span>,
@@ -175,7 +177,7 @@ describe('DataGrid', () => {
     })
 
     it('should render DataGridHeader when no custom header is provided', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
@@ -186,6 +188,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -202,7 +205,7 @@ describe('DataGrid', () => {
     })
 
     it('should render filter buttons when columnFilters are provided', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
@@ -213,6 +216,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               columnFilters={{ name: { type: 'string' } }}
             />
@@ -228,7 +232,7 @@ describe('DataGrid', () => {
     })
 
     it('should not render filter buttons when columnFilters is not provided', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
@@ -239,6 +243,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
             />
           ),
@@ -253,7 +258,7 @@ describe('DataGrid', () => {
     })
 
     it('should render without headerComponents and rowComponents', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
@@ -264,6 +269,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
             />
           ),
@@ -278,15 +284,11 @@ describe('DataGrid', () => {
         expect(headers?.length).toBe(2)
       })
     })
-  })
 
-  describe('focus management', () => {
-    it('should set focus on click', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+    it('should render with auto-generated data-nav-section attribute', async () => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
-        expect(service.hasFocus.getValue()).toBe(false)
-
         initializeShadeRoot({
           injector,
           rootElement,
@@ -295,69 +297,116 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
-              styles={{}}
-              headerComponents={{}}
-              rowComponents={{}}
+              onFindOptionsChange={onFindOptionsChange}
             />
           ),
         })
 
         await flushUpdates()
 
-        const grid = document.querySelector('shade-data-grid')
-        const wrapper = grid?.querySelector('.shade-grid-wrapper') as HTMLElement
+        const wrapper = document.querySelector('.shade-grid-wrapper')
+        const navSection = wrapper?.getAttribute('data-nav-section')
+        expect(navSection).toBeTruthy()
+        expect(navSection).toMatch(/^data-grid-/)
+      })
+    })
 
-        wrapper?.click()
+    it('should render with custom navSection', async () => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
-        expect(service.hasFocus.getValue()).toBe(true)
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <DataGrid<TestEntry, 'id' | 'name'>
+              columns={['id', 'name']}
+              collectionService={service}
+              findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
+              navSection="my-grid"
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const wrapper = document.querySelector('.shade-grid-wrapper')
+        expect(wrapper?.getAttribute('data-nav-section')).toBe('my-grid')
       })
     })
+  })
 
-    it('should lose focus on click outside', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+  describe('focus management', () => {
+    it('should clear hasFocus on focusout when focus leaves the grid', async () => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
+        const outsideBtn = document.createElement('button')
+        document.body.appendChild(outsideBtn)
 
         initializeShadeRoot({
           injector,
           rootElement,
           jsxElement: (
-            <>
-              <div data-testid="outside">Outside</div>
-              <DataGrid<TestEntry, 'id' | 'name'>
-                columns={['id', 'name']}
-                collectionService={service}
-                findOptions={findOptions}
-                styles={{}}
-                headerComponents={{}}
-                rowComponents={{}}
-              />
-            </>
+            <DataGrid<TestEntry, 'id' | 'name'>
+              columns={['id', 'name']}
+              collectionService={service}
+              findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
+            />
           ),
         })
 
         await flushUpdates()
+        await new Promise((r) => setTimeout(r, 0))
 
-        const grid = document.querySelector('shade-data-grid')
-        const wrapper = grid?.querySelector('.shade-grid-wrapper') as HTMLElement
-        wrapper?.click()
-
-        expect(service.hasFocus.getValue()).toBe(true)
+        service.hasFocus.setValue(true)
 
-        const outside = document.querySelector('[data-testid="outside"]') as HTMLElement
-        outside?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+        const wrapper = document.querySelector('.shade-grid-wrapper') as HTMLElement
+        wrapper?.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: outsideBtn }))
 
         expect(service.hasFocus.getValue()).toBe(false)
+        outsideBtn.remove()
       })
     })
-  })
 
-  describe('keyboard navigation', () => {
-    it('should handle ArrowDown to move focus to next entry', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+    it('should clear hasFocus on focusout when focus moves outside', async () => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
+        const outsideEl = document.createElement('button')
+        outsideEl.textContent = 'Outside'
+        document.body.appendChild(outsideEl)
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <DataGrid<TestEntry, 'id' | 'name'>
+              columns={['id', 'name']}
+              collectionService={service}
+              findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
+            />
+          ),
+        })
+
+        await flushUpdates()
+        await new Promise((r) => setTimeout(r, 0))
 
         service.hasFocus.setValue(true)
-        service.focusedEntry.setValue(service.data.getValue().entries[0])
+
+        const wrapper = document.querySelector('.shade-grid-wrapper') as HTMLElement
+        wrapper?.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: outsideEl }))
+
+        expect(service.hasFocus.getValue()).toBe(false)
+
+        outsideEl.remove()
+      })
+    })
+
+    it('should clear hasFocus on focusout when relatedTarget is null', async () => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
           injector,
@@ -367,28 +416,31 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
-              styles={{}}
-              headerComponents={{}}
-              rowComponents={{}}
+              onFindOptionsChange={onFindOptionsChange}
             />
           ),
         })
 
         await flushUpdates()
+        await new Promise((r) => setTimeout(r, 0))
 
-        const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
-        window.dispatchEvent(keydownEvent)
+        service.hasFocus.setValue(true)
 
-        expect(service.focusedEntry.getValue()).toEqual({ id: 2, name: 'Second' })
+        const wrapper = document.querySelector('.shade-grid-wrapper') as HTMLElement
+        wrapper?.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: null }))
+
+        expect(service.hasFocus.getValue()).toBe(false)
       })
     })
+  })
 
-    it('should handle ArrowUp to move focus to previous entry', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+  describe('keyboard navigation', () => {
+    it('should move focus to next entry on ArrowDown', async () => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         service.hasFocus.setValue(true)
-        service.focusedEntry.setValue(service.data.getValue().entries[1])
+        service.focusedEntry.setValue(service.data.getValue().entries[0])
 
         initializeShadeRoot({
           injector,
@@ -398,6 +450,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -407,19 +460,19 @@ describe('DataGrid', () => {
 
         await flushUpdates()
 
-        const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })
+        const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
         window.dispatchEvent(keydownEvent)
 
-        expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' })
+        expect(service.focusedEntry.getValue()).toEqual({ id: 2, name: 'Second' })
       })
     })
 
-    it('should handle Home to move focus to first entry', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+    it('should move focus to previous entry on ArrowUp', async () => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         service.hasFocus.setValue(true)
-        service.focusedEntry.setValue(service.data.getValue().entries[2])
+        service.focusedEntry.setValue(service.data.getValue().entries[1])
 
         initializeShadeRoot({
           injector,
@@ -429,6 +482,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -438,19 +492,19 @@ describe('DataGrid', () => {
 
         await flushUpdates()
 
-        const keydownEvent = new KeyboardEvent('keydown', { key: 'Home', bubbles: true })
+        const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })
         window.dispatchEvent(keydownEvent)
 
         expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' })
       })
     })
 
-    it('should handle End to move focus to last entry', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+    it('should handle Home to move focus to first entry', async () => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         service.hasFocus.setValue(true)
-        service.focusedEntry.setValue(service.data.getValue().entries[0])
+        service.focusedEntry.setValue(service.data.getValue().entries[2])
 
         initializeShadeRoot({
           injector,
@@ -460,6 +514,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -469,18 +524,19 @@ describe('DataGrid', () => {
 
         await flushUpdates()
 
-        const keydownEvent = new KeyboardEvent('keydown', { key: 'End', bubbles: true })
+        const keydownEvent = new KeyboardEvent('keydown', { key: 'Home', bubbles: true })
         window.dispatchEvent(keydownEvent)
 
-        expect(service.focusedEntry.getValue()).toEqual({ id: 3, name: 'Third' })
+        expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' })
       })
     })
 
-    it('should handle Tab to toggle focus', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+    it('should handle End to move focus to last entry', async () => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         service.hasFocus.setValue(true)
+        service.focusedEntry.setValue(service.data.getValue().entries[0])
 
         initializeShadeRoot({
           injector,
@@ -490,6 +546,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -499,15 +556,15 @@ describe('DataGrid', () => {
 
         await flushUpdates()
 
-        const keydownEvent = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true })
+        const keydownEvent = new KeyboardEvent('keydown', { key: 'End', bubbles: true })
         window.dispatchEvent(keydownEvent)
 
-        expect(service.hasFocus.getValue()).toBe(false)
+        expect(service.focusedEntry.getValue()).toEqual({ id: 3, name: 'Third' })
       })
     })
 
     it('should handle Escape to clear selection and search', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const { entries } = service.data.getValue()
@@ -523,6 +580,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -541,7 +599,7 @@ describe('DataGrid', () => {
     })
 
     it('should handle Space to toggle selection of focused entry', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const { entries } = service.data.getValue()
@@ -556,6 +614,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -576,7 +635,7 @@ describe('DataGrid', () => {
     })
 
     it('should handle + to select all entries', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         service.hasFocus.setValue(true)
@@ -589,6 +648,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -606,7 +666,7 @@ describe('DataGrid', () => {
     })
 
     it('should handle - to deselect all entries', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const { entries } = service.data.getValue()
@@ -621,6 +681,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -638,7 +699,7 @@ describe('DataGrid', () => {
     })
 
     it('should handle * to invert selection', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const { entries } = service.data.getValue()
@@ -653,6 +714,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -673,10 +735,9 @@ describe('DataGrid', () => {
     })
 
     it('should not handle keyboard when not focused', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
-        service.hasFocus.setValue(false)
         service.focusedEntry.setValue(service.data.getValue().entries[0])
 
         initializeShadeRoot({
@@ -687,6 +748,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -696,6 +758,8 @@ describe('DataGrid', () => {
 
         await flushUpdates()
 
+        service.hasFocus.setValue(false)
+
         const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
         window.dispatchEvent(keydownEvent)
 
@@ -704,7 +768,7 @@ describe('DataGrid', () => {
     })
 
     it('should handle Insert to toggle selection and move to next', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const { entries } = service.data.getValue()
@@ -719,6 +783,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}
@@ -739,7 +804,7 @@ describe('DataGrid', () => {
 
   describe('styles', () => {
     it('should apply wrapper styles when provided', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
@@ -750,6 +815,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{
                 wrapper: { backgroundColor: 'red' },
               }}
@@ -767,7 +833,7 @@ describe('DataGrid', () => {
     })
 
     it('should apply header styles when provided', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
@@ -778,6 +844,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{
                 header: { color: 'blue' },
               }}
@@ -799,7 +866,7 @@ describe('DataGrid', () => {
   describe('empty and loading states', () => {
     it('should show empty component when no data', async () => {
       await withTestGrid(
-        async ({ injector, service, findOptions }) => {
+        async ({ injector, service, findOptions, onFindOptionsChange }) => {
           const rootElement = document.getElementById('root') as HTMLDivElement
 
           initializeShadeRoot({
@@ -810,6 +877,7 @@ describe('DataGrid', () => {
                 columns={['id', 'name']}
                 collectionService={service}
                 findOptions={findOptions}
+                onFindOptionsChange={onFindOptionsChange}
                 styles={{}}
                 headerComponents={{}}
                 rowComponents={{}}
@@ -834,7 +902,7 @@ describe('DataGrid', () => {
     it('should pass row click to collectionService', async () => {
       const onRowClick = vi.fn()
       await withTestGrid(
-        async ({ injector, service, findOptions }) => {
+        async ({ injector, service, findOptions, onFindOptionsChange }) => {
           const rootElement = document.getElementById('root') as HTMLDivElement
 
           service.data.setValue({
@@ -850,6 +918,7 @@ describe('DataGrid', () => {
                 columns={['id', 'name']}
                 collectionService={service}
                 findOptions={findOptions}
+                onFindOptionsChange={onFindOptionsChange}
                 styles={{}}
                 headerComponents={{}}
                 rowComponents={{}}
@@ -872,7 +941,7 @@ describe('DataGrid', () => {
     it('should pass row double click to collectionService', async () => {
       const onRowDoubleClick = vi.fn()
       await withTestGrid(
-        async ({ injector, service, findOptions }) => {
+        async ({ injector, service, findOptions, onFindOptionsChange }) => {
           const rootElement = document.getElementById('root') as HTMLDivElement
 
           service.data.setValue({
@@ -888,6 +957,7 @@ describe('DataGrid', () => {
                 columns={['id', 'name']}
                 collectionService={service}
                 findOptions={findOptions}
+                onFindOptionsChange={onFindOptionsChange}
                 styles={{}}
                 headerComponents={{}}
                 rowComponents={{}}
@@ -909,9 +979,92 @@ describe('DataGrid', () => {
     })
   })
 
+  describe('row spatial navigation attributes', () => {
+    it('should set data-spatial-nav-target on rows', async () => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <DataGrid<TestEntry, 'id' | 'name'>
+              columns={['id', 'name']}
+              collectionService={service}
+              findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const rows = document.querySelectorAll('shades-data-grid-row')
+        for (const row of rows) {
+          expect(row.hasAttribute('data-spatial-nav-target')).toBe(true)
+        }
+      })
+    })
+
+    it('should set tabIndex 0 on focused row and -1 on others', async () => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        service.focusedEntry.setValue(service.data.getValue().entries[1])
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <DataGrid<TestEntry, 'id' | 'name'>
+              columns={['id', 'name']}
+              collectionService={service}
+              findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const rows = document.querySelectorAll<HTMLTableRowElement>('shades-data-grid-row')
+        expect(rows[0]?.tabIndex).toBe(-1)
+        expect(rows[1]?.tabIndex).toBe(0)
+        expect(rows[2]?.tabIndex).toBe(-1)
+      })
+    })
+
+    it('should sync focusedEntry on row onfocus', async () => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <DataGrid<TestEntry, 'id' | 'name'>
+              columns={['id', 'name']}
+              collectionService={service}
+              findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const rows = document.querySelectorAll('shades-data-grid-row')
+        rows[2]?.dispatchEvent(new FocusEvent('focus'))
+
+        expect(service.focusedEntry.getValue()).toEqual({ id: 3, name: 'Third' })
+        expect(service.hasFocus.getValue()).toBe(true)
+      })
+    })
+  })
+
   describe('keyboard listener cleanup', () => {
     it('should remove keyboard listener when component is disconnected', async () => {
-      await withTestGrid(async ({ injector, service, findOptions }) => {
+      await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         service.hasFocus.setValue(true)
@@ -925,6 +1078,7 @@ describe('DataGrid', () => {
               columns={['id', 'name']}
               collectionService={service}
               findOptions={findOptions}
+              onFindOptionsChange={onFindOptionsChange}
               styles={{}}
               headerComponents={{}}
               rowComponents={{}}