@furystack/shades-common-components 10.0.35 → 11.0.0

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

@@ -0,0 +1,382 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { CollectionService } from '../../services/collection-service.js'
+import { DataGridRow } from './data-grid-row.js'
+
+type TestEntry = { id: number; name: string }
+
+describe('DataGridRow', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+    // Mock scrollTo for jsdom
+    Element.prototype.scrollTo = vi.fn()
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const renderRow = async (props: {
+    entry: TestEntry
+    service: CollectionService<TestEntry>
+    columns?: Array<'id' | 'name'>
+    onRowClick?: (row: TestEntry, event: MouseEvent) => void
+    onRowDoubleClick?: (row: TestEntry, event: MouseEvent) => void
+    focusedRowStyle?: Partial<CSSStyleDeclaration>
+    selectedRowStyle?: Partial<CSSStyleDeclaration>
+    unfocusedRowStyle?: Partial<CSSStyleDeclaration>
+    unselectedRowStyle?: Partial<CSSStyleDeclaration>
+    rowComponents?: Record<string, (entry: TestEntry) => JSX.Element>
+  }) => {
+    const injector = new Injector()
+    const root = document.getElementById('root')!
+
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: (
+        <div className="shade-grid-wrapper" style={{ overflow: 'auto', height: '200px' }}>
+          <table>
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>Name</th>
+              </tr>
+            </thead>
+            <tbody>
+              <DataGridRow<TestEntry, 'id' | 'name'>
+                entry={props.entry}
+                service={props.service}
+                columns={props.columns ?? ['id', 'name']}
+                onRowClick={props.onRowClick}
+                onRowDoubleClick={props.onRowDoubleClick}
+                focusedRowStyle={props.focusedRowStyle}
+                selectedRowStyle={props.selectedRowStyle}
+                unfocusedRowStyle={props.unfocusedRowStyle}
+                unselectedRowStyle={props.unselectedRowStyle}
+                rowComponents={props.rowComponents}
+              />
+            </tbody>
+          </table>
+        </div>
+      ),
+    })
+    await sleepAsync(50)
+
+    return {
+      injector,
+      getRow: () => root.querySelector('shades-data-grid-row'),
+      getCells: () => root.querySelectorAll('td'),
+    }
+  }
+
+  describe('rendering', () => {
+    it('should render as a table row element', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const { getRow } = await renderRow({ entry, service })
+
+        const row = getRow()
+        expect(row).toBeTruthy()
+        expect(row?.tagName.toLowerCase()).toBe('shades-data-grid-row')
+      })
+    })
+
+    it('should render a cell for each column', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const { getCells } = await renderRow({ entry, service, columns: ['id', 'name'] })
+
+        expect(getCells().length).toBe(2)
+      })
+    })
+
+    it('should render entry property values in cells', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 42, name: 'Test Entry' }
+        const { getCells } = await renderRow({ entry, service })
+
+        const cells = getCells()
+        expect(cells[0]?.textContent).toBe('42')
+        expect(cells[1]?.textContent).toBe('Test Entry')
+      })
+    })
+
+    it('should use custom row components when provided', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Custom' }
+        const { getCells } = await renderRow({
+          entry,
+          service,
+          rowComponents: {
+            id: (e: TestEntry) => <span data-testid="custom-id">ID: {e.id}</span>,
+            name: (e: TestEntry) => <strong data-testid="custom-name">{e.name}</strong>,
+          },
+        })
+
+        const cells = getCells()
+        expect(cells[0]?.querySelector('[data-testid="custom-id"]')?.textContent).toContain('ID: 1')
+        expect(cells[1]?.querySelector('[data-testid="custom-name"]')?.textContent).toBe('Custom')
+      })
+    })
+  })
+
+  describe('selection state', () => {
+    it('should not have selected class when entry is not selected', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const { getRow } = await renderRow({ entry, service })
+
+        const row = getRow()
+        expect(row?.classList.contains('selected')).toBe(false)
+      })
+    })
+
+    it('should have selected class when entry is in selection', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        service.selection.setValue([entry])
+        const { getRow } = await renderRow({ entry, service })
+
+        const row = getRow()
+        expect(row?.classList.contains('selected')).toBe(true)
+      })
+    })
+
+    it('should update selected class when selection changes', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const { getRow } = await renderRow({ entry, service })
+
+        const row = getRow()
+        expect(row?.classList.contains('selected')).toBe(false)
+
+        service.selection.setValue([entry])
+        await sleepAsync(50)
+        expect(row?.classList.contains('selected')).toBe(true)
+
+        service.selection.setValue([])
+        await sleepAsync(50)
+        expect(row?.classList.contains('selected')).toBe(false)
+      })
+    })
+
+    it('should set aria-selected attribute based on selection', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const { getRow } = await renderRow({ entry, service })
+
+        const row = getRow()
+        expect(row?.getAttribute('aria-selected')).toBe('false')
+
+        service.selection.setValue([entry])
+        await sleepAsync(50)
+        expect(row?.getAttribute('aria-selected')).toBe('true')
+      })
+    })
+
+    it('should apply selectedRowStyle when entry is selected', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        service.selection.setValue([entry])
+        const { getRow } = await renderRow({
+          entry,
+          service,
+          selectedRowStyle: { backgroundColor: 'rgb(255, 0, 0)' },
+        })
+
+        const row = getRow() as HTMLElement | null
+        expect(row?.style.backgroundColor).toBe('rgb(255, 0, 0)')
+      })
+    })
+
+    it('should apply unselectedRowStyle when entry is not selected', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const { getRow } = await renderRow({
+          entry,
+          service,
+          unselectedRowStyle: { backgroundColor: 'rgb(0, 255, 0)' },
+        })
+
+        const row = getRow() as HTMLElement | null
+        expect(row?.style.backgroundColor).toBe('rgb(0, 255, 0)')
+      })
+    })
+  })
+
+  describe('focus state', () => {
+    it('should not have focused class when entry is not focused', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const { getRow } = await renderRow({ entry, service })
+
+        const row = getRow()
+        expect(row?.classList.contains('focused')).toBe(false)
+      })
+    })
+
+    it('should have focused class when entry is focused', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        service.focusedEntry.setValue(entry)
+        const { getRow } = await renderRow({ entry, service })
+
+        const row = getRow()
+        expect(row?.classList.contains('focused')).toBe(true)
+      })
+    })
+
+    it('should update focused class when focus changes', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const { getRow } = await renderRow({ entry, service })
+
+        const row = getRow()
+        expect(row?.classList.contains('focused')).toBe(false)
+
+        service.focusedEntry.setValue(entry)
+        await sleepAsync(50)
+        expect(row?.classList.contains('focused')).toBe(true)
+
+        service.focusedEntry.setValue(undefined)
+        await sleepAsync(50)
+        expect(row?.classList.contains('focused')).toBe(false)
+      })
+    })
+
+    it('should apply focusedRowStyle when entry is focused', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        service.focusedEntry.setValue(entry)
+        const { getRow } = await renderRow({
+          entry,
+          service,
+          focusedRowStyle: { fontWeight: 'bold' },
+        })
+
+        const row = getRow() as HTMLElement | null
+        expect(row?.style.fontWeight).toBe('bold')
+      })
+    })
+
+    it('should apply unfocusedRowStyle when entry is not focused', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const { getRow } = await renderRow({
+          entry,
+          service,
+          unfocusedRowStyle: { opacity: '0.8' },
+        })
+
+        const row = getRow() as HTMLElement | null
+        expect(row?.style.opacity).toBe('0.8')
+      })
+    })
+
+    it('should not have focused class when different entry is focused', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const otherEntry = { id: 2, name: 'Other' }
+        service.focusedEntry.setValue(otherEntry)
+        const { getRow } = await renderRow({ entry, service })
+
+        const row = getRow()
+        expect(row?.classList.contains('focused')).toBe(false)
+      })
+    })
+  })
+
+  describe('click handlers', () => {
+    it('should call onRowClick when cell is clicked', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const onRowClick = vi.fn()
+        const { getCells } = await renderRow({ entry, service, onRowClick })
+
+        const cell = getCells()[0]
+        cell.click()
+
+        expect(onRowClick).toHaveBeenCalledWith(entry, expect.any(MouseEvent))
+      })
+    })
+
+    it('should call onRowDoubleClick when cell is double-clicked', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const onRowDoubleClick = vi.fn()
+        const { getCells } = await renderRow({ entry, service, onRowDoubleClick })
+
+        const cell = getCells()[0]
+        const dblClickEvent = new MouseEvent('dblclick', { bubbles: true })
+        cell.dispatchEvent(dblClickEvent)
+
+        expect(onRowDoubleClick).toHaveBeenCalledWith(entry, expect.any(MouseEvent))
+      })
+    })
+
+    it('should not throw when onRowClick is not provided', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const { getCells } = await renderRow({ entry, service })
+
+        const cell = getCells()[0]
+        expect(() => cell.click()).not.toThrow()
+      })
+    })
+
+    it('should not throw when onRowDoubleClick is not provided', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const { getCells } = await renderRow({ entry, service })
+
+        const cell = getCells()[0]
+        const dblClickEvent = new MouseEvent('dblclick', { bubbles: true })
+        expect(() => cell.dispatchEvent(dblClickEvent)).not.toThrow()
+      })
+    })
+  })
+
+  describe('combined selection and focus states', () => {
+    it('should have both selected and focused classes when applicable', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        service.selection.setValue([entry])
+        service.focusedEntry.setValue(entry)
+        const { getRow } = await renderRow({ entry, service })
+
+        const row = getRow()
+        expect(row?.classList.contains('selected')).toBe(true)
+        expect(row?.classList.contains('focused')).toBe(true)
+      })
+    })
+
+    it('should be selected but not focused', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        const otherEntry = { id: 2, name: 'Other' }
+        service.selection.setValue([entry])
+        service.focusedEntry.setValue(otherEntry)
+        const { getRow } = await renderRow({ entry, service })
+
+        const row = getRow()
+        expect(row?.classList.contains('selected')).toBe(true)
+        expect(row?.classList.contains('focused')).toBe(false)
+      })
+    })
+
+    it('should be focused but not selected', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        service.focusedEntry.setValue(entry)
+        const { getRow } = await renderRow({ entry, service })
+
+        const row = getRow()
+        expect(row?.classList.contains('selected')).toBe(false)
+        expect(row?.classList.contains('focused')).toBe(true)
+      })
+    })
+  })
+})

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

@@ -1,6 +1,7 @@
 import type { ChildrenList } from '@furystack/shades'
 import { attachStyles, createComponent, Shade } from '@furystack/shades'
 import type { CollectionService } from '../../services/collection-service.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { DataRowCells } from './data-grid.js'
 
 export interface DataGridRowProps<T, Column extends string> {
@@ -21,44 +22,55 @@ export const DataGridRow: <T, Column extends string>(
   children: ChildrenList,
 ) => JSX.Element<any> = Shade({
   shadowDomName: 'shades-data-grid-row',
-
+  css: {
+    display: 'table-row',
+    cursor: 'default',
+    userSelect: 'none',
+    transition: 'background-color 0.15s ease, box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out',
+    borderLeft: '3px solid transparent',
+    '&:not(.selected):hover': {
+      backgroundColor: 'rgba(128, 128, 128, 0.08)',
+    },
+    '&.selected': {
+      backgroundColor: 'rgba(128, 128, 128, 0.15)',
+      borderLeft: `3px solid ${cssVariableTheme.palette.primary.main}`,
+    },
+    '&.focused': {
+      boxShadow: `0 0 0 2px ${cssVariableTheme.palette.primary.main} inset, 0 2px 8px 0px rgba(0,0,0,0.15)`,
+      fontWeight: '500',
+      transform: 'scale(1.002)',
+    },
+    '& td': {
+      padding: '0.75em 1.2em',
+      borderBottom: '1px solid rgba(128, 128, 128, 0.1)',
+      verticalAlign: 'middle',
+      fontSize: '0.875rem',
+      lineHeight: '1.5',
+    },
+  },
   render: ({ props, element, useObservable }) => {
     const { entry, rowComponents, columns, service } = props
 
-    const attachSelectedStyles = (selection: any[]) => {
-      if (selection.includes(entry)) {
-        element.classList.add('selected')
-        attachStyles(element, {
-          style: props.selectedRowStyle || {
-            backgroundColor: 'rgba(128, 128, 128, 0.15)',
-            borderLeft: `3px solid var(--shades-theme-palette-primary-main)`,
-          },
-        })
-        element.setAttribute('aria-selected', 'true')
-      } else {
-        element.classList.remove('selected')
-        attachStyles(element, {
-          style: props.unselectedRowStyle || {
-            backgroundColor: 'transparent',
-            borderLeft: '3px solid transparent',
-          },
-        })
-        element.setAttribute('aria-selected', 'false')
+    const updateSelectionState = (selection: unknown[]) => {
+      const isSelected = selection.includes(entry)
+      element.classList.toggle('selected', isSelected)
+      element.setAttribute('aria-selected', isSelected.toString())
+
+      if (props.selectedRowStyle && isSelected) {
+        attachStyles(element, { style: props.selectedRowStyle })
+      } else if (props.unselectedRowStyle && !isSelected) {
+        attachStyles(element, { style: props.unselectedRowStyle })
       }
     }
 
-    const attachFocusedStyle = (newEntry?: any) => {
-      if (newEntry === props.entry) {
-        attachStyles(element, {
-          style: props.focusedRowStyle || {
-            boxShadow: `0 0 0 2px var(--shades-theme-palette-primary-main) inset, 0 2px 8px 0px rgba(0,0,0,0.15)`,
-            transition: 'box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out',
-            fontWeight: '500',
-            transform: 'scale(1.002)',
-          },
-        })
+    const updateFocusState = (focusedEntry?: unknown) => {
+      const isFocused = focusedEntry === entry
+      element.classList.toggle('focused', isFocused)
 
-        element.classList.add('focused')
+      if (isFocused) {
+        if (props.focusedRowStyle) {
+          attachStyles(element, { style: props.focusedRowStyle })
+        }
 
         const headerHeight = element.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42
 
@@ -77,69 +89,25 @@ export const DataGridRow: <T, Column extends string>(
         if (desiredMaxTop > visibleMaxTop) {
           parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' })
         }
-      } else {
-        element.classList.remove('focused')
-        attachStyles(element, {
-          style: props.unfocusedRowStyle || {
-            boxShadow: 'none',
-            fontWeight: 'inherit',
-            transform: 'scale(1)',
-          },
-        })
+      } else if (props.unfocusedRowStyle) {
+        attachStyles(element, { style: props.unfocusedRowStyle })
       }
     }
 
     const [selection] = useObservable('isSelected', service.selection, {
-      onChange: attachSelectedStyles,
+      onChange: updateSelectionState,
     })
-    attachSelectedStyles(selection)
+    updateSelectionState(selection)
 
     const [focus] = useObservable('focus', service.focusedEntry, {
-      onChange: attachFocusedStyle,
+      onChange: updateFocusState,
     })
-    attachFocusedStyle(focus)
-
-    element.style.display = 'table-row'
-    element.style.cursor = 'default'
-    element.style.userSelect = 'none'
-    element.style.transition = 'background-color 0.15s ease'
-
-    if (selection?.includes(entry)) {
-      element.setAttribute('aria-selected', 'true')
-      element.classList.add('selected')
-    }
-
-    if (focus === entry) {
-      element.classList.add('focused')
-    }
-    element.setAttribute('aria-selected', selection?.includes(entry).toString() || 'false')
-
-    // Add hover effect
-    element.onmouseenter = () => {
-      if (!selection?.includes(entry)) {
-        element.style.backgroundColor = 'rgba(128, 128, 128, 0.08)'
-      }
-    }
-    element.onmouseleave = () => {
-      if (!selection?.includes(entry)) {
-        element.style.backgroundColor = 'transparent'
-      }
-    }
+    updateFocusState(focus)
 
     return (
       <>
         {columns.map((column) => (
-          <td
-            style={{
-              padding: '0.75em 1.2em',
-              borderBottom: '1px solid rgba(128, 128, 128, 0.1)',
-              verticalAlign: 'middle',
-              fontSize: '0.875rem',
-              lineHeight: '1.5',
-            }}
-            onclick={(ev) => props.onRowClick?.(entry, ev)}
-            ondblclick={(ev) => props.onRowDoubleClick?.(entry, ev)}
-          >
+          <td onclick={(ev) => props.onRowClick?.(entry, ev)} ondblclick={(ev) => props.onRowDoubleClick?.(entry, ev)}>
             {rowComponents?.[column]?.(entry, { selection, focus }) ||
               rowComponents?.default?.(entry, { selection, focus }) || (
                 <span>