@furystack/shades-common-components 10.0.35 → 12.0.0

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

@@ -0,0 +1,407 @@
+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')!
+
+    // Create shade-data-grid element manually to simulate production structure
+    // shade-data-grid is the scrollable container in production
+    const shadeDataGrid = document.createElement('shade-data-grid')
+    shadeDataGrid.style.overflow = 'auto'
+    shadeDataGrid.style.height = '200px'
+    shadeDataGrid.style.display = 'block'
+    root.appendChild(shadeDataGrid)
+
+    initializeShadeRoot({
+      injector,
+      rootElement: shadeDataGrid,
+      jsxElement: (
+        <div className="shade-grid-wrapper">
+          <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'),
+      getScrollContainer: () => shadeDataGrid,
+      [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
+    }
+  }
+
+  describe('rendering', () => {
+    it('should render as a table row element', async () => {
+      await usingAsync(new CollectionService<TestEntry>(), async (service) => {
+        const entry = { id: 1, name: 'Test' }
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          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' }
+        await usingAsync(await renderRow({ entry, service, columns: ['id', 'name'] }), async ({ getCells }) => {
+          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' }
+        await usingAsync(await renderRow({ entry, service }), async ({ getCells }) => {
+          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' }
+        await usingAsync(
+          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>,
+            },
+          }),
+          async ({ getCells }) => {
+            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' }
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-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])
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-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' }
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-selected')).toBe(false)
+
+          service.selection.setValue([entry])
+          await sleepAsync(50)
+          expect(row?.hasAttribute('data-selected')).toBe(true)
+
+          service.selection.setValue([])
+          await sleepAsync(50)
+          expect(row?.hasAttribute('data-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' }
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          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])
+        await usingAsync(
+          await renderRow({
+            entry,
+            service,
+            selectedRowStyle: { backgroundColor: 'rgb(255, 0, 0)' },
+          }),
+          async ({ getRow }) => {
+            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' }
+        await usingAsync(
+          await renderRow({
+            entry,
+            service,
+            unselectedRowStyle: { backgroundColor: 'rgb(0, 255, 0)' },
+          }),
+          async ({ getRow }) => {
+            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' }
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-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)
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-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' }
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-focused')).toBe(false)
+
+          service.focusedEntry.setValue(entry)
+          await sleepAsync(50)
+          expect(row?.hasAttribute('data-focused')).toBe(true)
+
+          service.focusedEntry.setValue(undefined)
+          await sleepAsync(50)
+          expect(row?.hasAttribute('data-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)
+        await usingAsync(
+          await renderRow({
+            entry,
+            service,
+            focusedRowStyle: { fontWeight: 'bold' },
+          }),
+          async ({ getRow }) => {
+            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' }
+        await usingAsync(
+          await renderRow({
+            entry,
+            service,
+            unfocusedRowStyle: { opacity: '0.8' },
+          }),
+          async ({ getRow }) => {
+            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)
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-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()
+        await usingAsync(await renderRow({ entry, service, onRowClick }), async ({ getCells }) => {
+          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()
+        await usingAsync(await renderRow({ entry, service, onRowDoubleClick }), async ({ getCells }) => {
+          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' }
+        await usingAsync(await renderRow({ entry, service }), async ({ getCells }) => {
+          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' }
+        await usingAsync(await renderRow({ entry, service }), async ({ getCells }) => {
+          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)
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-selected')).toBe(true)
+          expect(row?.hasAttribute('data-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)
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-selected')).toBe(true)
+          expect(row?.hasAttribute('data-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)
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-selected')).toBe(false)
+          expect(row?.hasAttribute('data-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 { createComponent, Shade } from '@furystack/shades'
 import type { CollectionService } from '../../services/collection-service.js'
+import { buildTransition, cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { DataRowCells } from './data-grid.js'
 
 export interface DataGridRowProps<T, Column extends string> {
@@ -21,122 +22,106 @@ export const DataGridRow: <T, Column extends string>(
   children: ChildrenList,
 ) => JSX.Element<any> = Shade({
   shadowDomName: 'shades-data-grid-row',
-
-  render: ({ props, element, useObservable }) => {
+  css: {
+    display: 'table-row',
+    cursor: 'default',
+    userSelect: 'none',
+    transition: buildTransition(
+      ['background-color', cssVariableTheme.transitions.duration.fast, 'ease'],
+      ['box-shadow', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.easeInOut],
+      ['transform', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.easeInOut],
+    ),
+    borderLeft: '3px solid transparent',
+    '&:not([data-selected]):hover': {
+      backgroundColor: cssVariableTheme.action.hoverBackground,
+    },
+    '&[data-selected]': {
+      backgroundColor: cssVariableTheme.action.selectedBackground,
+      borderLeft: `3px solid ${cssVariableTheme.palette.primary.main}`,
+    },
+    '&[data-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 ${cssVariableTheme.action.subtleBorder}`,
+      verticalAlign: 'middle',
+      fontSize: '0.875rem',
+      lineHeight: '1.5',
+    },
+  },
+  render: ({ props, useObservable, useHostProps, useRef }) => {
     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 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)',
-          },
-        })
-
-        element.classList.add('focused')
+    const [selection] = useObservable('isSelected', service.selection)
+    const [focus] = useObservable('focus', service.focusedEntry)
 
-        const headerHeight = element.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42
+    const isSelected = selection.includes(entry)
+    const isFocused = focus === entry
 
-        const parent = element.closest('.shade-grid-wrapper') as HTMLElement
-        const maxTop = element.offsetTop - headerHeight
-        const currentTop = parent.scrollTop
-        if (maxTop < currentTop) {
-          parent.scrollTo({ top: maxTop, behavior: 'smooth' })
-        }
-
-        const footerHeight =
-          element.closest('shade-data-grid')?.querySelector('shade-data-grid-footer')?.getBoundingClientRect().height ||
-          42
-        const visibleMaxTop = parent.clientHeight - footerHeight
-        const desiredMaxTop = element.offsetTop + element.clientHeight
-        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)',
-          },
-        })
-      }
+    const rowStyle: Record<string, string> = {}
+    if (props.selectedRowStyle && isSelected) {
+      Object.assign(rowStyle, props.selectedRowStyle)
+    } else if (props.unselectedRowStyle && !isSelected) {
+      Object.assign(rowStyle, props.unselectedRowStyle)
+    }
+    if (isFocused && props.focusedRowStyle) {
+      Object.assign(rowStyle, props.focusedRowStyle)
+    } else if (!isFocused && props.unfocusedRowStyle) {
+      Object.assign(rowStyle, props.unfocusedRowStyle)
     }
 
-    const [selection] = useObservable('isSelected', service.selection, {
-      onChange: attachSelectedStyles,
+    useHostProps({
+      'aria-selected': isSelected.toString(),
+      ...(isSelected ? { 'data-selected': '' } : {}),
+      ...(isFocused ? { 'data-focused': '' } : {}),
+      ...(Object.keys(rowStyle).length > 0 ? { style: rowStyle } : {}),
     })
-    attachSelectedStyles(selection)
 
-    const [focus] = useObservable('focus', service.focusedEntry, {
-      onChange: attachFocusedStyle,
-    })
-    attachFocusedStyle(focus)
+    const wrapperRef = useRef<HTMLElement>('wrapper')
 
-    element.style.display = 'table-row'
-    element.style.cursor = 'default'
-    element.style.userSelect = 'none'
-    element.style.transition = 'background-color 0.15s ease'
+    if (isFocused) {
+      queueMicrotask(() => {
+        const el = wrapperRef.current
+        if (!el) return
+        const hostEl = el.closest('shades-data-grid-row') as HTMLElement
+        if (!hostEl) return
+        const scrollContainer = hostEl.closest('shade-data-grid') as HTMLElement
+        if (!scrollContainer) return
 
-    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'
-      }
+        const headerHeight = hostEl.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42
+        const footerHeight =
+          scrollContainer.querySelector('shade-data-grid-footer')?.getBoundingClientRect().height || 42
+
+        const containerRect = scrollContainer.getBoundingClientRect()
+        const rowRect = hostEl.getBoundingClientRect()
+
+        const rowTopInContainer = rowRect.top - containerRect.top
+        const rowBottomInContainer = rowRect.bottom - containerRect.top
+
+        if (rowTopInContainer < headerHeight) {
+          const scrollAdjustment = rowTopInContainer - headerHeight
+          scrollContainer.scrollTo({
+            top: scrollContainer.scrollTop + scrollAdjustment,
+            behavior: 'smooth',
+          })
+        } else if (rowBottomInContainer > scrollContainer.clientHeight - footerHeight) {
+          const scrollAdjustment = rowBottomInContainer - (scrollContainer.clientHeight - footerHeight)
+          scrollContainer.scrollTo({
+            top: scrollContainer.scrollTop + scrollAdjustment,
+            behavior: 'smooth',
+          })
+        }
+      })
     }
 
     return (
       <>
-        {columns.map((column) => (
+        {columns.map((column, colIdx) => (
           <td
-            style={{
-              padding: '0.75em 1.2em',
-              borderBottom: '1px solid rgba(128, 128, 128, 0.1)',
-              verticalAlign: 'middle',
-              fontSize: '0.875rem',
-              lineHeight: '1.5',
-            }}
+            {...(colIdx === 0 ? { ref: wrapperRef } : {})}
             onclick={(ev) => props.onRowClick?.(entry, ev)}
             ondblclick={(ev) => props.onRowDoubleClick?.(entry, ev)}
           >