@datatechsolutions/tympan 0.3.0 → 0.3.1

package/src/components/data-table/DataTable.css

@@ -0,0 +1,362 @@
+/* DataTable (spec: wave-1/data-table.md; design direction §2.2, §2.3, §2.6, §2.9). */
+@layer tympan.components {
+  .ty-table-wrap {
+    /* Densities (§2.9): row height, cell padding (block x inline), text size / line height. */
+    --ty-table-row-comfortable: 52px;
+    --ty-table-pad-block-comfortable: 14px;
+    --ty-table-pad-inline-comfortable: 16px;
+    --ty-table-font-comfortable: 14px;
+    --ty-table-leading-comfortable: 22px;
+
+    --ty-table-row-standard: 44px;
+    --ty-table-pad-block-standard: 10px;
+    --ty-table-pad-inline-standard: 14px;
+    --ty-table-font-standard: 14px;
+    --ty-table-leading-standard: 20px;
+
+    --ty-table-row-compact: 36px;
+    --ty-table-pad-block-compact: 6px;
+    --ty-table-pad-inline-compact: 12px;
+    --ty-table-font-compact: 13px;
+    --ty-table-leading-compact: 18px;
+
+    --ty-table-row: var(--ty-table-row-standard);
+    --ty-table-pad-block: var(--ty-table-pad-block-standard);
+    --ty-table-pad-inline: var(--ty-table-pad-inline-standard);
+    --ty-table-font: var(--ty-table-font-standard);
+    --ty-table-leading: var(--ty-table-leading-standard);
+    --ty-table-select-width: var(--ty-control-target);
+
+    position: relative;
+    inline-size: 100%;
+  }
+  .ty-table-wrap[data-density='comfortable'] {
+    --ty-table-row: var(--ty-table-row-comfortable);
+    --ty-table-pad-block: var(--ty-table-pad-block-comfortable);
+    --ty-table-pad-inline: var(--ty-table-pad-inline-comfortable);
+    --ty-table-font: var(--ty-table-font-comfortable);
+    --ty-table-leading: var(--ty-table-leading-comfortable);
+  }
+  .ty-table-wrap[data-density='compact'] {
+    --ty-table-row: var(--ty-table-row-compact);
+    --ty-table-pad-block: var(--ty-table-pad-block-compact);
+    --ty-table-pad-inline: var(--ty-table-pad-inline-compact);
+    --ty-table-font: var(--ty-table-font-compact);
+    --ty-table-leading: var(--ty-table-leading-compact);
+  }
+
+  .ty-table__caption {
+    margin-block-end: var(--ty-space-3);
+    color: var(--ty-ink);
+    font-size: var(--ty-font-size-label);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+
+  .ty-table-scroll {
+    overflow: auto;
+    inline-size: 100%;
+  }
+
+  .ty-table {
+    inline-size: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    color: var(--ty-ink-2);
+    font-size: var(--ty-table-font);
+    line-height: var(--ty-table-leading);
+    outline: none;
+  }
+
+  /* Header: label style, sunken fill, fixed while scrolling (§2.9). */
+  .ty-table__column {
+    position: sticky;
+    z-index: 2;
+    inset-block-start: 0;
+    block-size: var(--ty-table-row);
+    padding: var(--ty-table-pad-block) var(--ty-table-pad-inline);
+    border-block-end: 1px solid var(--ty-line-strong);
+    background: var(--ty-surface-sunken);
+    color: var(--ty-ink);
+    font-size: var(--ty-font-size-label);
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-label);
+    text-align: start;
+    white-space: nowrap;
+    outline: none;
+  }
+  .ty-table__column[data-align='end'],
+  .ty-table__cell[data-align='end'] {
+    text-align: end;
+  }
+  .ty-table__column[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: -2px;
+  }
+
+  .ty-table__sort {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ty-space-1);
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  button.ty-table__sort::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    /* physical: centring with translate(-50%) is the same in both directions */
+    left: 50%;
+    inline-size: max(100%, var(--ty-control-target));
+    block-size: max(100%, var(--ty-control-target));
+    transform: translate(-50%, -50%);
+  }
+  button.ty-table__sort:focus-visible {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+  .ty-table__column[data-allows-sorting] {
+    cursor: pointer;
+  }
+  .ty-table__sort-icon {
+    inline-size: 14px;
+    block-size: 14px;
+    color: var(--ty-ink-3);
+  }
+  .ty-table__column[data-sort-direction] .ty-table__sort-icon,
+  .ty-table__column[aria-sort='ascending'] .ty-table__sort-icon,
+  .ty-table__column[aria-sort='descending'] .ty-table__sort-icon {
+    color: var(--ty-accent);
+  }
+
+  /* Rows: dividers, never zebra stripes (§2.9). */
+  .ty-table__row {
+    outline: none;
+  }
+  .ty-table__cell {
+    box-sizing: border-box;
+    block-size: var(--ty-table-row);
+    padding: var(--ty-table-pad-block) var(--ty-table-pad-inline);
+    border-block-end: 1px solid var(--ty-line);
+    background: var(--ty-surface-solid);
+    font-weight: var(--ty-font-weight-regular);
+    text-align: start;
+    vertical-align: middle;
+  }
+  .ty-table__cell--row-header {
+    color: var(--ty-ink);
+  }
+  .ty-table__cell[data-numeric] {
+    font-variant-numeric: tabular-nums;
+  }
+  .ty-table-wrap[data-column-lines] .ty-table__cell + .ty-table__cell,
+  .ty-table-wrap[data-column-lines] .ty-table__column + .ty-table__column {
+    border-inline-start: 1px solid var(--ty-line);
+  }
+
+  /* A cell never wraps beyond two lines; the full value stays available. */
+  .ty-table__clamp {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    text-wrap: balance;
+  }
+
+  .ty-table__row[data-actionable] {
+    cursor: pointer;
+  }
+  .ty-table__row[data-hovered] .ty-table__cell {
+    background: color-mix(in srgb, var(--ty-surface-sunken) 60%, var(--ty-surface-solid));
+  }
+  .ty-table__row[data-selected] .ty-table__cell {
+    background: color-mix(in srgb, var(--ty-accent) 10%, var(--ty-surface-solid));
+  }
+  .ty-table__row[data-pressed] .ty-table__cell {
+    background: var(--ty-surface-sunken);
+  }
+  /* Focused rows use an inset ring (§2.6). */
+  .ty-table__row[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: -2px;
+  }
+  .ty-table__cell[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: -2px;
+  }
+
+  /* Sticky first column while scrolling horizontally. */
+  .ty-table-wrap[data-sticky-first] .ty-table__row > :first-child {
+    position: sticky;
+    z-index: 1;
+    inset-inline-start: 0;
+  }
+  .ty-table-wrap[data-sticky-first] .ty-table__head .ty-table__row > :first-child,
+  .ty-table-wrap[data-sticky-first] thead tr > :first-child {
+    z-index: 3;
+  }
+  .ty-table-wrap[data-sticky-first][data-selectable] .ty-table__row > :nth-child(2),
+  .ty-table-wrap[data-sticky-first][data-selectable] thead tr > :nth-child(2) {
+    position: sticky;
+    z-index: 1;
+    inset-inline-start: var(--ty-table-select-width);
+  }
+  .ty-table-wrap[data-sticky-first][data-selectable] thead tr > :nth-child(2) {
+    z-index: 3;
+  }
+
+  /* Selection column and checkboxes (44 px hit area). */
+  .ty-table__column--select,
+  .ty-table__cell--select {
+    inline-size: var(--ty-table-select-width);
+    min-inline-size: var(--ty-table-select-width);
+    padding-block: 0;
+    padding-inline: var(--ty-space-3);
+  }
+  .ty-table__checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+  .ty-table__checkbox::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    /* physical: centring with translate(-50%) is the same in both directions */
+    left: 50%;
+    inline-size: var(--ty-control-target);
+    block-size: var(--ty-control-target);
+    transform: translate(-50%, -50%);
+  }
+  .ty-table__checkbox-box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    inline-size: 18px;
+    block-size: 18px;
+    border: 1.5px solid var(--ty-input);
+    border-radius: 5px;
+    background: var(--ty-surface-solid);
+    color: var(--ty-accent-ink);
+  }
+  .ty-table__checkbox-box > svg {
+    inline-size: 14px;
+    block-size: 14px;
+  }
+  .ty-table__checkbox[data-selected] .ty-table__checkbox-box,
+  .ty-table__checkbox[data-indeterminate] .ty-table__checkbox-box {
+    border-color: var(--ty-accent);
+    background: var(--ty-accent);
+  }
+  .ty-table__checkbox[data-focus-visible] .ty-table__checkbox-box {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+  .ty-table__checkbox[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  /* <ty-data-table>: the element renders a native checkbox inside the
+     .ty-table__checkbox shell (the React renderers carry spans only). The
+     input fills the shell invisibly; its state drives the box and picks the
+     visible mark (the ty-checkbox pattern), so the right glyph shows even
+     before the host re-renders. The React renderers' single unclassed mark
+     is untouched. */
+  .ty-table__checkbox > input[type='checkbox'] {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+  .ty-table__checkbox > input[type='checkbox']:disabled {
+    cursor: not-allowed;
+  }
+  .ty-table__checkbox > input[type='checkbox']:focus-visible + .ty-table__checkbox-box {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+  .ty-table__checkbox > input[type='checkbox']:checked + .ty-table__checkbox-box,
+  .ty-table__checkbox > input[type='checkbox']:indeterminate + .ty-table__checkbox-box {
+    border-color: var(--ty-accent);
+    background: var(--ty-accent);
+  }
+  .ty-table__checkbox .ty-table__check,
+  .ty-table__checkbox .ty-table__minus {
+    display: none;
+  }
+  .ty-table__checkbox > input:checked + .ty-table__checkbox-box > .ty-table__check {
+    display: block;
+  }
+  .ty-table__checkbox > input:indeterminate + .ty-table__checkbox-box > .ty-table__check {
+    display: none;
+  }
+  .ty-table__checkbox > input:indeterminate + .ty-table__checkbox-box > .ty-table__minus {
+    display: block;
+  }
+
+  /* <ty-data-table>: a row's link wraps the first cell's content; the row
+     forwards presses and Enter to it. */
+  .ty-table__row-link {
+    color: inherit;
+    text-decoration: inherit;
+  }
+  .ty-table__row-link:focus-visible {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .ty-table__row[data-loading] .ty-table__cell {
+    background: var(--ty-surface-solid);
+  }
+  .ty-table__empty,
+  .ty-table__cell--empty {
+    padding: var(--ty-space-4);
+  }
+
+  /* Touch layouts: compact density keeps 44 px targets through the hit areas above. */
+  @media (max-width: 1023.98px) {
+    .ty-table-wrap[data-density='compact'] {
+      --ty-table-row: var(--ty-table-row-standard);
+      --ty-table-pad-block: var(--ty-table-pad-block-standard);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-table__row,
+    .ty-table__cell {
+      transition: none;
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-table__column,
+    .ty-table__cell {
+      border-color: CanvasText;
+    }
+    .ty-table__row[data-selected] .ty-table__cell {
+      background: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .ty-table__row[data-focus-visible],
+    .ty-table__cell[data-focus-visible],
+    .ty-table__column[data-focus-visible] {
+      outline-color: Highlight;
+    }
+    .ty-table__checkbox-box {
+      border-color: CanvasText;
+    }
+  }
+}

package/src/components/data-table/DataTable.test.tsx

@@ -0,0 +1,214 @@
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { renderWithProvider } from '../../../test/render'
+import { DataTable, type DataTableColumn, type DataTableRow, type SortDirection } from './DataTable'
+
+import * as rtlDom from '@testing-library/react'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+const columns: DataTableColumn[] = [
+  { id: 'name', header: 'Name', sortable: true },
+  { id: 'country', header: 'Country' },
+  { id: 'date', header: 'Date', sortable: true, numeric: true },
+]
+const rows: DataTableRow[] = [
+  { id: 'r1', cells: { name: 'Centro', country: 'Downtown', date: '2024' } },
+  { id: 'r2', cells: { name: 'Harbour', country: 'Port district', date: '2019' } },
+  { id: 'r3', cells: { name: 'Riverside', country: 'Park', date: '2020' } },
+]
+
+describe('DataTable', () => {
+  it('is a table named by the caption with three column headers', () => {
+    render(<DataTable caption="Cases" columns={columns} rows={rows} />)
+    const table = screen.getByRole('table', { name: 'Cases' })
+    expect(within(table).getAllByRole('columnheader')).toHaveLength(3)
+    expect(within(table).getAllByRole('rowheader')).toHaveLength(3)
+  })
+
+  it('cycles sort through ascending, descending and none', async () => {
+    const onSortChange = vi.fn()
+    function Host() {
+      const [sort, setSort] = useState<{ column?: string; direction: SortDirection }>({ direction: null })
+      return (
+        <DataTable
+          caption="Cases"
+          columns={columns}
+          rows={rows}
+          sortColumn={sort.column}
+          sortDirection={sort.direction}
+          onSortChange={(column, direction) => {
+            onSortChange(column, direction)
+            setSort({ column, direction })
+          }}
+        />
+      )
+    }
+    render(<Host />)
+    const button = screen.getByRole('button', { name: /Name/ })
+    await userEvent.click(button)
+    await userEvent.click(button)
+    await userEvent.click(button)
+    expect(onSortChange.mock.calls).toEqual([
+      ['name', 'ascending'],
+      ['name', 'descending'],
+      ['name', null],
+    ])
+  })
+
+  it('cycles sort in the interactive (grid) mode as well', async () => {
+    const onSortChange = vi.fn()
+    function Host() {
+      const [sort, setSort] = useState<{ column?: string; direction: SortDirection }>({ direction: null })
+      return (
+        <DataTable
+          caption="Cases"
+          columns={columns}
+          rows={rows}
+          selectionMode="multiple"
+          sortColumn={sort.column}
+          sortDirection={sort.direction}
+          onSortChange={(column, direction) => {
+            onSortChange(column, direction)
+            setSort({ column, direction })
+          }}
+        />
+      )
+    }
+    render(<Host />)
+    const header = screen.getByRole('columnheader', { name: /Name/ })
+    await userEvent.click(header)
+    await userEvent.click(header)
+    await userEvent.click(header)
+    expect(onSortChange.mock.calls.map((c) => c[1])).toEqual(['ascending', 'descending', null])
+  })
+
+  it.each([false, true])('exposes aria-sort only on the sorted column (interactive %s)', (interactive) => {
+    render(
+      <DataTable
+        caption="Cases"
+        columns={columns}
+        rows={rows}
+        sortColumn="date"
+        sortDirection="descending"
+        selectionMode={interactive ? 'multiple' : 'none'}
+      />,
+    )
+    const headers = screen.getAllByRole('columnheader')
+    const date = headers.find((h) => h.textContent?.includes('Date'))!
+    expect(date).toHaveAttribute('aria-sort', 'descending')
+    for (const h of headers) {
+      if (h === date) continue
+      const v = h.getAttribute('aria-sort')
+      expect(v === null || v === 'none').toBe(true)
+    }
+  })
+
+  it('renders skeleton rows while loading, aria-busy, with no data rows', () => {
+    const { container } = render(
+      <DataTable caption="Cases" columns={columns} rows={rows} loading loadingRowCount={4} density="compact" />,
+    )
+    expect(screen.getByRole('table')).toHaveAttribute('aria-busy', 'true')
+    expect(container.querySelectorAll('[data-loading="true"]')).toHaveLength(4)
+    expect(screen.queryByText('Centro')).toBeNull()
+    expect(screen.getByRole('status')).toHaveTextContent('Loading the list')
+    expect(container.querySelector('.ty-table-wrap')).toHaveAttribute('data-density', 'compact')
+  })
+
+  it('loading in grid mode is aria-busy too', () => {
+    render(<DataTable caption="Cases" columns={columns} rows={rows} loading selectionMode="multiple" />)
+    expect(screen.getByRole('grid')).toHaveAttribute('aria-busy', 'true')
+  })
+
+  it.each([false, true])('shows the empty state in one cell spanning all columns (interactive %s)', (interactive) => {
+    render(
+      <DataTable caption="Cases" columns={columns} rows={[]} selectionMode={interactive ? 'multiple' : 'none'} emptyState={<p>No cases yet</p>} />,
+    )
+    const cell = screen.getByText('No cases yet').closest('td')!
+    expect(Number(cell.getAttribute('colspan') ?? cell.getAttribute('aria-colspan'))).toBe(interactive ? 4 : 3)
+  })
+
+  it('selects all from the header checkbox; deselecting one makes it indeterminate', async () => {
+    function Host() {
+      const [keys, setKeys] = useState(new Set<string>())
+      return <DataTable caption="Cases" columns={columns} rows={rows} selectionMode="multiple" selectedKeys={keys} onSelectionChange={setKeys} />
+    }
+    render(<Host />)
+    await userEvent.click(screen.getAllByRole('checkbox')[0]!)
+    for (const cb of screen.getAllByRole('checkbox').slice(1)) expect(cb).toBeChecked()
+    await userEvent.click(screen.getAllByRole('checkbox')[1]!)
+    const header = screen.getAllByRole('checkbox')[0] as HTMLInputElement
+    expect(header.indeterminate).toBe(true)
+  })
+
+  it('navigates to a row href on Enter', async () => {
+    const navigate = vi.fn()
+    renderWithProvider(
+      <DataTable
+        caption="Cases"
+        columns={columns}
+        rows={rows.map((r) => ({ ...r, href: `/cases/${r.id}`, label: String(r.cells.name) }))}
+      />,
+      { navigate },
+    )
+    await userEvent.tab()
+    await userEvent.keyboard('{ArrowDown}')
+    await userEvent.keyboard('{Enter}')
+    expect(navigate).toHaveBeenCalledWith(expect.stringMatching(/^\/cases\/r\d$/), undefined)
+  })
+
+  it('calls onRowAction when a row without href is activated', async () => {
+    const onRowAction = vi.fn()
+    render(<DataTable caption="Cases" columns={columns} rows={rows} onRowAction={onRowAction} />)
+    await userEvent.click(screen.getByText('Harbour'))
+    expect(onRowAction).toHaveBeenCalledWith('r2')
+  })
+
+  it('declares density row heights: compact 36 px, standard 44 px, comfortable 52 px', () => {
+    const css = cssOf('components/data-table/DataTable.css')
+    expect(css).toMatch(/--ty-table-row-compact:\s*36px/)
+    expect(css).toMatch(/--ty-table-row-standard:\s*44px/)
+    expect(css).toMatch(/--ty-table-row-comfortable:\s*52px/)
+    expect(css).toMatch(/\[data-density='compact'\]\s*\{[^}]*--ty-table-row:\s*var\(--ty-table-row-compact\)/)
+    expect(css).toMatch(/\[data-density='comfortable'\]\s*\{[^}]*--ty-table-row:\s*var\(--ty-table-row-comfortable\)/)
+    expect(css).toMatch(/\.ty-table__cell\s*\{[^}]*block-size:\s*var\(--ty-table-row\)/)
+  })
+
+  it('keeps the first column visible while scrolling horizontally', () => {
+    const { container } = render(<DataTable caption="Cases" columns={columns} rows={rows} />)
+    expect(container.querySelector('.ty-table-wrap')).toHaveAttribute('data-sticky-first', 'true')
+    expect(cssOf('components/data-table/DataTable.css')).toMatch(
+      /\[data-sticky-first\] \.ty-table__row > :first-child\s*\{[^}]*position:\s*sticky[^}]*inset-inline-start:\s*0/,
+    )
+  })
+
+  it('keeps boundaries visible in forced colours and stops motion when reduced', () => {
+    const css = cssOf('components/data-table/DataTable.css')
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/Highlight/)
+    expect(mediaBlock(css, /\(prefers-reduced-motion:\s*reduce\)/)).toMatch(/animation:\s*none/)
+  })
+
+  it('has no axe violations in static and interactive modes', async () => {
+    const { container } = render(
+      <>
+        <DataTable caption="Static" columns={columns} rows={rows} sortColumn="name" sortDirection="ascending" />
+        <DataTable caption="Selectable" columns={columns} rows={rows} selectionMode="multiple" />
+        <DataTable caption="Empty" columns={columns} rows={[]} />
+      </>,
+    )
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('DataTable in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(<DataTable caption="الحالات" columns={[{ id: 'name', header: 'الحالة' }, { id: 'stage', header: 'المرحلة', numeric: true }]} rows={[{ id: 'a', cells: { name: 'تم', stage: '4' }, label: 'تم' }]} />)
+    expect(rtlDom.screen.getByRole('table', { name: 'الحالات' })).toBeInTheDocument()
+    expect(container.querySelector('[data-align="end"]')).not.toBeNull()
+    await axeRtl(container)
+  })
+})