@furystack/shades-common-components 10.0.35 → 11.0.0

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

@@ -0,0 +1,939 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { ObservableValue, sleepAsync } 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'
+
+type TestEntry = { id: number; name: string }
+
+describe('DataGrid', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const createTestService = () => {
+    const service = new CollectionService<TestEntry>()
+    service.data.setValue({
+      count: 3,
+      entries: [
+        { id: 1, name: 'First' },
+        { id: 2, name: 'Second' },
+        { id: 3, name: 'Third' },
+      ],
+    })
+    return service
+  }
+
+  describe('rendering', () => {
+    it('should render with columns', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const grid = document.querySelector('shade-data-grid')
+      expect(grid).not.toBeNull()
+
+      const headers = grid?.querySelectorAll('th')
+      expect(headers?.length).toBe(2)
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should render table structure', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const grid = document.querySelector('shade-data-grid')
+      const table = grid?.querySelector('table')
+      const thead = grid?.querySelector('thead')
+      const tbody = grid?.querySelector('tbody')
+
+      expect(table).not.toBeNull()
+      expect(thead).not.toBeNull()
+      expect(tbody).not.toBeNull()
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should render custom header components when provided', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{
+              id: () => <span data-testid="custom-header-id">Custom ID Header</span>,
+            }}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const grid = document.querySelector('shade-data-grid')
+      const customHeader = grid?.querySelector('[data-testid="custom-header-id"]')
+      expect(customHeader).not.toBeNull()
+      expect(customHeader?.textContent).toBe('Custom ID Header')
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should render default header components from headerComponents.default', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{
+              default: (name) => <span data-testid={`default-header-${name}`}>Default: {name}</span>,
+            }}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const grid = document.querySelector('shade-data-grid')
+      const defaultHeaderId = grid?.querySelector('[data-testid="default-header-id"]')
+      const defaultHeaderName = grid?.querySelector('[data-testid="default-header-name"]')
+
+      expect(defaultHeaderId?.textContent).toBe('Default: id')
+      expect(defaultHeaderName?.textContent).toBe('Default: name')
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should render DataGridHeader when no custom header is provided', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const grid = document.querySelector('shade-data-grid')
+      const defaultHeaders = grid?.querySelectorAll('data-grid-header')
+      expect(defaultHeaders?.length).toBe(2)
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+  })
+
+  describe('focus management', () => {
+    it('should set focus on click', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      expect(service.hasFocus.getValue()).toBe(false)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      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[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should lose focus on click outside', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <>
+            <div data-testid="outside">Outside</div>
+            <DataGrid<TestEntry, 'id' | 'name'>
+              columns={['id', 'name']}
+              collectionService={service}
+              findOptions={findOptions}
+              styles={{}}
+              headerComponents={{}}
+              rowComponents={{}}
+            />
+          </>
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const grid = document.querySelector('shade-data-grid')
+      const wrapper = grid?.querySelector('.shade-grid-wrapper') as HTMLElement
+      wrapper?.click()
+
+      expect(service.hasFocus.getValue()).toBe(true)
+
+      const outside = document.querySelector('[data-testid="outside"]') as HTMLElement
+      outside?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+      expect(service.hasFocus.getValue()).toBe(false)
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+  })
+
+  describe('keyboard navigation', () => {
+    it('should handle ArrowDown to move focus to next entry', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      service.hasFocus.setValue(true)
+      service.focusedEntry.setValue(service.data.getValue().entries[0])
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
+      window.dispatchEvent(keydownEvent)
+
+      expect(service.focusedEntry.getValue()).toEqual({ id: 2, name: 'Second' })
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should handle ArrowUp to move focus to previous entry', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      service.hasFocus.setValue(true)
+      service.focusedEntry.setValue(service.data.getValue().entries[1])
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })
+      window.dispatchEvent(keydownEvent)
+
+      expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' })
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should handle Home to move focus to first entry', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      service.hasFocus.setValue(true)
+      service.focusedEntry.setValue(service.data.getValue().entries[2])
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const keydownEvent = new KeyboardEvent('keydown', { key: 'Home', bubbles: true })
+      window.dispatchEvent(keydownEvent)
+
+      expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' })
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should handle End to move focus to last entry', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      service.hasFocus.setValue(true)
+      service.focusedEntry.setValue(service.data.getValue().entries[0])
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const keydownEvent = new KeyboardEvent('keydown', { key: 'End', bubbles: true })
+      window.dispatchEvent(keydownEvent)
+
+      expect(service.focusedEntry.getValue()).toEqual({ id: 3, name: 'Third' })
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should handle Tab to toggle focus', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      service.hasFocus.setValue(true)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const keydownEvent = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true })
+      window.dispatchEvent(keydownEvent)
+
+      expect(service.hasFocus.getValue()).toBe(false)
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should handle Escape to clear selection and search', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      const { entries } = service.data.getValue()
+      service.hasFocus.setValue(true)
+      service.selection.setValue([entries[0], entries[1]])
+      service.searchTerm.setValue('test')
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const keydownEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
+      window.dispatchEvent(keydownEvent)
+
+      expect(service.selection.getValue()).toEqual([])
+      expect(service.searchTerm.getValue()).toBe('')
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should handle Space to toggle selection of focused entry', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      const { entries } = service.data.getValue()
+      service.hasFocus.setValue(true)
+      service.focusedEntry.setValue(entries[0])
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const keydownEvent = new KeyboardEvent('keydown', { key: ' ', bubbles: true })
+      window.dispatchEvent(keydownEvent)
+
+      expect(service.selection.getValue()).toContain(entries[0])
+
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }))
+      expect(service.selection.getValue()).not.toContain(entries[0])
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should handle + to select all entries', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      service.hasFocus.setValue(true)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const keydownEvent = new KeyboardEvent('keydown', { key: '+', bubbles: true })
+      window.dispatchEvent(keydownEvent)
+
+      expect(service.selection.getValue().length).toBe(3)
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should handle - to deselect all entries', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      const { entries } = service.data.getValue()
+      service.hasFocus.setValue(true)
+      service.selection.setValue([...entries])
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const keydownEvent = new KeyboardEvent('keydown', { key: '-', bubbles: true })
+      window.dispatchEvent(keydownEvent)
+
+      expect(service.selection.getValue().length).toBe(0)
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should handle * to invert selection', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      const { entries } = service.data.getValue()
+      service.hasFocus.setValue(true)
+      service.selection.setValue([entries[0]])
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const keydownEvent = new KeyboardEvent('keydown', { key: '*', bubbles: true })
+      window.dispatchEvent(keydownEvent)
+
+      const selection = service.selection.getValue()
+      expect(selection).not.toContain(entries[0])
+      expect(selection).toContain(entries[1])
+      expect(selection).toContain(entries[2])
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should not handle keyboard when not focused', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      service.hasFocus.setValue(false)
+      service.focusedEntry.setValue(service.data.getValue().entries[0])
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
+      window.dispatchEvent(keydownEvent)
+
+      expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' })
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should handle Insert to toggle selection and move to next', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      const { entries } = service.data.getValue()
+      service.hasFocus.setValue(true)
+      service.focusedEntry.setValue(entries[0])
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const keydownEvent = new KeyboardEvent('keydown', { key: 'Insert', bubbles: true })
+      window.dispatchEvent(keydownEvent)
+
+      expect(service.selection.getValue()).toContain(entries[0])
+      expect(service.focusedEntry.getValue()).toEqual(entries[1])
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+  })
+
+  describe('styles', () => {
+    it('should apply wrapper styles when provided', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{
+              wrapper: { backgroundColor: 'red' },
+            }}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const grid = document.querySelector('shade-data-grid') as HTMLElement
+      expect(grid?.style.backgroundColor).toBe('red')
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should apply header styles when provided', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{
+              header: { color: 'blue' },
+            }}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const grid = document.querySelector('shade-data-grid')
+      const headers = grid?.querySelectorAll('th') as NodeListOf<HTMLElement>
+      expect(headers?.[0]?.style.color).toBe('blue')
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+  })
+
+  describe('empty and loading states', () => {
+    it('should show empty component when no data', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = new CollectionService<TestEntry>()
+      const findOptions = new ObservableValue<any>({})
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+            emptyComponent={<div data-testid="empty-state">No data available</div>}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const grid = document.querySelector('shade-data-grid')
+      const emptyState = grid?.querySelector('[data-testid="empty-state"]')
+      expect(emptyState).not.toBeNull()
+      expect(emptyState?.textContent).toBe('No data available')
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+  })
+
+  describe('row interactions', () => {
+    it('should pass row click to collectionService', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const onRowClick = vi.fn()
+      const service = new CollectionService<TestEntry>({ onRowClick })
+      const findOptions = new ObservableValue<any>({})
+
+      service.data.setValue({
+        count: 1,
+        entries: [{ id: 1, name: 'Test' }],
+      })
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const grid = document.querySelector('shade-data-grid')
+      const cell = grid?.querySelector('td') as HTMLTableCellElement
+      cell?.click()
+
+      expect(onRowClick).toHaveBeenCalledWith({ id: 1, name: 'Test' })
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+
+    it('should pass row double click to collectionService', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const onRowDoubleClick = vi.fn()
+      const service = new CollectionService<TestEntry>({ onRowDoubleClick })
+      const findOptions = new ObservableValue<any>({})
+
+      service.data.setValue({
+        count: 1,
+        entries: [{ id: 1, name: 'Test' }],
+      })
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const grid = document.querySelector('shade-data-grid')
+      const cell = grid?.querySelector('td') as HTMLTableCellElement
+      const dblClickEvent = new MouseEvent('dblclick', { bubbles: true })
+      cell?.dispatchEvent(dblClickEvent)
+
+      expect(onRowDoubleClick).toHaveBeenCalledWith({ id: 1, name: 'Test' })
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+  })
+
+  describe('keyboard listener cleanup', () => {
+    it('should remove keyboard listener when component is disconnected', async () => {
+      const injector = new Injector()
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createTestService()
+      const findOptions = new ObservableValue<any>({})
+
+      service.hasFocus.setValue(true)
+      service.focusedEntry.setValue(service.data.getValue().entries[0])
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <DataGrid<TestEntry, 'id' | 'name'>
+            columns={['id', 'name']}
+            collectionService={service}
+            findOptions={findOptions}
+            styles={{}}
+            headerComponents={{}}
+            rowComponents={{}}
+          />
+        ),
+      })
+
+      await sleepAsync(50)
+
+      const grid = document.querySelector('shade-data-grid') as HTMLElement
+      grid.remove()
+
+      await sleepAsync(10)
+
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+      expect(service.focusedEntry.getValue()).toEqual({ id: 1, name: 'First' })
+
+      service[Symbol.dispose]()
+      findOptions[Symbol.dispose]()
+    })
+  })
+})