@furystack/shades-common-components 13.5.0 → 15.0.0

package/esm/components/data-grid/data-grid.spec.js

@@ -1,6 +1,6 @@
 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';
@@ -26,20 +26,20 @@ describe('DataGrid', () => {
     const withTestGrid = async (fn, opts) => {
         await usingAsync(new Injector(), async (injector) => {
             await usingAsync(opts?.createService?.() ?? createTestService(), async (service) => {
-                await usingAsync(new ObservableValue({}), async (findOptions) => {
-                    await fn({ injector, service, findOptions });
-                });
+                const findOptions = {};
+                const onFindOptionsChange = vi.fn();
+                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');
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const grid = document.querySelector('shade-data-grid');
@@ -49,12 +49,12 @@ 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');
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const grid = document.querySelector('shade-data-grid');
@@ -67,12 +67,12 @@ 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');
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {
                             id: () => createComponent("span", { "data-testid": "custom-header-id" }, "Custom ID Header"),
                         }, rowComponents: {} })),
                 });
@@ -84,12 +84,12 @@ 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');
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {
                             default: (name) => createComponent("span", { "data-testid": `default-header-${name}` },
                                 "Default: ",
                                 name),
@@ -104,12 +104,12 @@ 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');
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const grid = document.querySelector('shade-data-grid');
@@ -118,12 +118,12 @@ 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');
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, columnFilters: { name: { type: 'string' } } })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, columnFilters: { name: { type: 'string' } } })),
                 });
                 await flushUpdates();
                 const grid = document.querySelector('shade-data-grid');
@@ -132,12 +132,12 @@ 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');
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {} })),
                 });
                 await flushUpdates();
                 const grid = document.querySelector('shade-data-grid');
@@ -146,12 +146,12 @@ 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');
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {} })),
                 });
                 await flushUpdates();
                 const grid = document.querySelector('shade-data-grid');
@@ -160,55 +160,102 @@ describe('DataGrid', () => {
                 expect(headers?.length).toBe(2);
             });
         });
+        it('should render with auto-generated data-nav-section attribute', async () => {
+            await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange })),
+                });
+                await flushUpdates();
+                const wrapper = document.querySelector('.shade-grid-wrapper');
+                const navSection = wrapper?.getAttribute('data-nav-section');
+                expect(navSection).toBeTruthy();
+                expect(navSection).toMatch(/^data-grid-/);
+            });
+        });
+        it('should render with custom navSection', async () => {
+            await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { 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');
+            });
+        });
     });
     describe('focus management', () => {
-        it('should set focus on click', async () => {
-            await withTestGrid(async ({ injector, service, findOptions }) => {
+        it('should clear hasFocus on focusout when focus leaves the grid', async () => {
+            await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
                 const rootElement = document.getElementById('root');
+                const outsideBtn = document.createElement('button');
+                document.body.appendChild(outsideBtn);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange })),
+                });
+                await flushUpdates();
+                await new Promise((r) => setTimeout(r, 0));
+                service.hasFocus.setValue(true);
+                const wrapper = document.querySelector('.shade-grid-wrapper');
+                wrapper?.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: outsideBtn }));
                 expect(service.hasFocus.getValue()).toBe(false);
+                outsideBtn.remove();
+            });
+        });
+        it('should clear hasFocus on focusout when focus moves outside', async () => {
+            await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
+                const rootElement = document.getElementById('root');
+                const outsideEl = document.createElement('button');
+                outsideEl.textContent = 'Outside';
+                document.body.appendChild(outsideEl);
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange })),
                 });
                 await flushUpdates();
-                const grid = document.querySelector('shade-data-grid');
-                const wrapper = grid?.querySelector('.shade-grid-wrapper');
-                wrapper?.click();
-                expect(service.hasFocus.getValue()).toBe(true);
+                await new Promise((r) => setTimeout(r, 0));
+                service.hasFocus.setValue(true);
+                const wrapper = document.querySelector('.shade-grid-wrapper');
+                wrapper?.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: outsideEl }));
+                expect(service.hasFocus.getValue()).toBe(false);
+                outsideEl.remove();
             });
         });
-        it('should lose focus on click outside', async () => {
-            await withTestGrid(async ({ injector, service, findOptions }) => {
+        it('should clear hasFocus on focusout when relatedTarget is null', async () => {
+            await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
                 const rootElement = document.getElementById('root');
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(createComponent, null,
-                        createComponent("div", { "data-testid": "outside" }, "Outside"),
-                        createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} }))),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange })),
                 });
                 await flushUpdates();
-                const grid = document.querySelector('shade-data-grid');
-                const wrapper = grid?.querySelector('.shade-grid-wrapper');
-                wrapper?.click();
-                expect(service.hasFocus.getValue()).toBe(true);
-                const outside = document.querySelector('[data-testid="outside"]');
-                outside?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+                await new Promise((r) => setTimeout(r, 0));
+                service.hasFocus.setValue(true);
+                const wrapper = document.querySelector('.shade-grid-wrapper');
+                wrapper?.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: null }));
                 expect(service.hasFocus.getValue()).toBe(false);
             });
         });
     });
     describe('keyboard navigation', () => {
-        it('should handle ArrowDown to move focus to next entry', async () => {
-            await withTestGrid(async ({ injector, service, findOptions }) => {
+        it('should move focus to next entry on ArrowDown', async () => {
+            await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
                 const rootElement = document.getElementById('root');
                 service.hasFocus.setValue(true);
                 service.focusedEntry.setValue(service.data.getValue().entries[0]);
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true });
@@ -216,15 +263,15 @@ describe('DataGrid', () => {
                 expect(service.focusedEntry.getValue()).toEqual({ id: 2, name: 'Second' });
             });
         });
-        it('should handle ArrowUp to move focus to previous 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');
                 service.hasFocus.setValue(true);
                 service.focusedEntry.setValue(service.data.getValue().entries[1]);
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true });
@@ -233,14 +280,14 @@ describe('DataGrid', () => {
             });
         });
         it('should handle Home to move focus to first entry', async () => {
-            await withTestGrid(async ({ injector, service, findOptions }) => {
+            await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
                 const rootElement = document.getElementById('root');
                 service.hasFocus.setValue(true);
                 service.focusedEntry.setValue(service.data.getValue().entries[2]);
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const keydownEvent = new KeyboardEvent('keydown', { key: 'Home', bubbles: true });
@@ -249,14 +296,14 @@ describe('DataGrid', () => {
             });
         });
         it('should handle End to move focus to last entry', async () => {
-            await withTestGrid(async ({ injector, service, findOptions }) => {
+            await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
                 const rootElement = document.getElementById('root');
                 service.hasFocus.setValue(true);
                 service.focusedEntry.setValue(service.data.getValue().entries[0]);
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const keydownEvent = new KeyboardEvent('keydown', { key: 'End', bubbles: true });
@@ -264,23 +311,8 @@ describe('DataGrid', () => {
                 expect(service.focusedEntry.getValue()).toEqual({ id: 3, name: 'Third' });
             });
         });
-        it('should handle Tab to toggle focus', async () => {
-            await withTestGrid(async ({ injector, service, findOptions }) => {
-                const rootElement = document.getElementById('root');
-                service.hasFocus.setValue(true);
-                initializeShadeRoot({
-                    injector,
-                    rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
-                });
-                await flushUpdates();
-                const keydownEvent = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true });
-                window.dispatchEvent(keydownEvent);
-                expect(service.hasFocus.getValue()).toBe(false);
-            });
-        });
         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');
                 const { entries } = service.data.getValue();
                 service.hasFocus.setValue(true);
@@ -289,7 +321,7 @@ describe('DataGrid', () => {
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const keydownEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
@@ -299,7 +331,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');
                 const { entries } = service.data.getValue();
                 service.hasFocus.setValue(true);
@@ -307,7 +339,7 @@ describe('DataGrid', () => {
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const keydownEvent = new KeyboardEvent('keydown', { key: ' ', bubbles: true });
@@ -318,13 +350,13 @@ 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');
                 service.hasFocus.setValue(true);
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const keydownEvent = new KeyboardEvent('keydown', { key: '+', bubbles: true });
@@ -333,7 +365,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');
                 const { entries } = service.data.getValue();
                 service.hasFocus.setValue(true);
@@ -341,7 +373,7 @@ describe('DataGrid', () => {
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const keydownEvent = new KeyboardEvent('keydown', { key: '-', bubbles: true });
@@ -350,7 +382,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');
                 const { entries } = service.data.getValue();
                 service.hasFocus.setValue(true);
@@ -358,7 +390,7 @@ describe('DataGrid', () => {
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const keydownEvent = new KeyboardEvent('keydown', { key: '*', bubbles: true });
@@ -370,23 +402,23 @@ 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');
-                service.hasFocus.setValue(false);
                 service.focusedEntry.setValue(service.data.getValue().entries[0]);
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
+                service.hasFocus.setValue(false);
                 const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true });
                 window.dispatchEvent(keydownEvent);
                 expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' });
             });
         });
         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');
                 const { entries } = service.data.getValue();
                 service.hasFocus.setValue(true);
@@ -394,7 +426,7 @@ describe('DataGrid', () => {
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const keydownEvent = new KeyboardEvent('keydown', { key: 'Insert', bubbles: true });
@@ -406,12 +438,12 @@ 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');
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {
                             wrapper: { backgroundColor: 'red' },
                         }, headerComponents: {}, rowComponents: {} })),
                 });
@@ -421,12 +453,12 @@ 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');
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {
                             header: { color: 'blue' },
                         }, headerComponents: {}, rowComponents: {} })),
                 });
@@ -439,12 +471,12 @@ describe('DataGrid', () => {
     });
     describe('empty and loading states', () => {
         it('should show empty component when no data', async () => {
-            await withTestGrid(async ({ injector, service, findOptions }) => {
+            await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
                 const rootElement = document.getElementById('root');
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {}, emptyComponent: createComponent("div", { "data-testid": "empty-state" }, "No data available") })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {}, emptyComponent: createComponent("div", { "data-testid": "empty-state" }, "No data available") })),
                 });
                 await flushUpdates();
                 const grid = document.querySelector('shade-data-grid');
@@ -457,7 +489,7 @@ describe('DataGrid', () => {
     describe('row interactions', () => {
         it('should pass row click to collectionService', async () => {
             const onRowClick = vi.fn();
-            await withTestGrid(async ({ injector, service, findOptions }) => {
+            await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
                 const rootElement = document.getElementById('root');
                 service.data.setValue({
                     count: 1,
@@ -466,7 +498,7 @@ describe('DataGrid', () => {
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const grid = document.querySelector('shade-data-grid');
@@ -477,7 +509,7 @@ describe('DataGrid', () => {
         });
         it('should pass row double click to collectionService', async () => {
             const onRowDoubleClick = vi.fn();
-            await withTestGrid(async ({ injector, service, findOptions }) => {
+            await withTestGrid(async ({ injector, service, findOptions, onFindOptionsChange }) => {
                 const rootElement = document.getElementById('root');
                 service.data.setValue({
                     count: 1,
@@ -486,7 +518,7 @@ describe('DataGrid', () => {
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const grid = document.querySelector('shade-data-grid');
@@ -497,16 +529,64 @@ describe('DataGrid', () => {
             }, { createService: () => new CollectionService({ onRowDoubleClick }) });
         });
     });
+    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');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { 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');
+                service.focusedEntry.setValue(service.data.getValue().entries[1]);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange })),
+                });
+                await flushUpdates();
+                const rows = document.querySelectorAll('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');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(DataGrid, { 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');
                 service.hasFocus.setValue(true);
                 service.focusedEntry.setValue(service.data.getValue().entries[0]);
                 initializeShadeRoot({
                     injector,
                     rootElement,
-                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, styles: {}, headerComponents: {}, rowComponents: {} })),
+                    jsxElement: (createComponent(DataGrid, { columns: ['id', 'name'], collectionService: service, findOptions: findOptions, onFindOptionsChange: onFindOptionsChange, styles: {}, headerComponents: {}, rowComponents: {} })),
                 });
                 await flushUpdates();
                 const grid = document.querySelector('shade-data-grid');