@dashforge/tw 0.8.0-beta → 0.9.0-beta

package/src/components/DataGrid/DataGrid.test.tsx

@@ -667,11 +667,11 @@ describe('DataGrid — column visibility', () => {
     expect(screen.queryByRole('button', { name: 'Columns' })).toBeNull();
   });
 
-  it('opens dialog with one checkbox per hideable column', () => {
+  it('opens a popover menu with one checkbox per hideable column', () => {
     const cols: TableColumn<User>[] = [
       { field: 'name', header: 'Name' },
       { field: 'email', header: 'Email' },
-      // hideable: false → not shown in the dialog (structurally required)
+      // hideable: false → not shown in the menu (structurally required)
       { field: 'age', header: 'Age', hideable: false },
     ];
     render(
@@ -684,16 +684,13 @@ describe('DataGrid — column visibility', () => {
       />,
     );
     fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
+    // Radix Popover content has role="dialog" too.
     expect(screen.queryByRole('dialog')).not.toBeNull();
-    // The dialog should expose checkboxes for Name + Email (not Age).
-    const labels = screen.getAllByText(/Name|Email|Age/);
-    // Name + Email appear in BOTH the table header and the dialog; Age
-    // appears only in the header (hideable=false → excluded from dialog).
-    const dialog = screen.getByRole('dialog');
-    expect(dialog.textContent).toContain('Name');
-    expect(dialog.textContent).toContain('Email');
-    expect(dialog.textContent).not.toContain('Age');
-    void labels;
+    // The menu should expose checkboxes for Name + Email (not Age).
+    const menu = screen.getByRole('dialog');
+    expect(menu.textContent).toContain('Name');
+    expect(menu.textContent).toContain('Email');
+    expect(menu.textContent).not.toContain('Age');
   });
 
   it('respects col.defaultHidden on first render', () => {
@@ -716,7 +713,7 @@ describe('DataGrid — column visibility', () => {
     expect(screen.queryByText('Name')).not.toBeNull();
   });
 
-  it('toggling a column hides it from the table after Done', () => {
+  it('toggling a column auto-commits via onHiddenColumnsChange (no Done button)', () => {
     const onHiddenColumnsChange = vi.fn();
     render(
       <DataGrid
@@ -729,18 +726,17 @@ describe('DataGrid — column visibility', () => {
       />,
     );
     fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
-    // Uncheck "Email" inside the dialog
-    const dialog = screen.getByRole('dialog');
+    // Uncheck "Email" inside the popover menu
+    const menu = screen.getByRole('dialog');
     const emailCheckbox = Array.from(
-      dialog.querySelectorAll('input[type="checkbox"]'),
+      menu.querySelectorAll('input[type="checkbox"]'),
     ).find((el) => {
       const li = el.closest('label');
       return li?.textContent?.includes('Email');
     }) as HTMLInputElement | undefined;
     expect(emailCheckbox).toBeDefined();
     fireEvent.click(emailCheckbox!);
-    // Commit via Done
-    fireEvent.click(screen.getByRole('button', { name: 'Done' }));
+    // Auto-commit on toggle — no Done button anymore
     expect(onHiddenColumnsChange).toHaveBeenCalledWith(['email']);
   });
 
@@ -758,6 +754,80 @@ describe('DataGrid — column visibility', () => {
     expect(screen.queryByText('Email')).toBeNull();
     expect(screen.queryByText('Name')).not.toBeNull();
   });
+
+  // ───── Sprint 6 P5 — tri-state master checkbox ─────
+
+  it('renders a master toggle-all checkbox in the visibility menu', () => {
+    render(
+      <DataGrid
+        rows={generateUsers(5)}
+        cols={baseCols}
+        getRowId={getRowId}
+        rowHeight={48}
+        height="400px"
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
+    expect(
+      screen.queryByLabelText('Toggle all columns'),
+    ).not.toBeNull();
+  });
+
+  it('master checkbox is checked when every column is visible', () => {
+    render(
+      <DataGrid
+        rows={generateUsers(5)}
+        cols={baseCols}
+        getRowId={getRowId}
+        rowHeight={48}
+        height="400px"
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
+    const master = screen.getByLabelText('Toggle all columns') as HTMLInputElement;
+    expect(master.checked).toBe(true);
+  });
+
+  it('clicking the master when all visible hides every hideable column', () => {
+    const onHiddenColumnsChange = vi.fn();
+    render(
+      <DataGrid
+        rows={generateUsers(5)}
+        cols={baseCols}
+        getRowId={getRowId}
+        rowHeight={48}
+        height="400px"
+        onHiddenColumnsChange={onHiddenColumnsChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
+    fireEvent.click(screen.getByLabelText('Toggle all columns'));
+    // baseCols = name / email / age / meta.city — all hideable.
+    expect(onHiddenColumnsChange).toHaveBeenCalledWith([
+      'name',
+      'email',
+      'age',
+      'meta.city',
+    ]);
+  });
+
+  it('clicking the master when some are hidden shows all', () => {
+    const onHiddenColumnsChange = vi.fn();
+    render(
+      <DataGrid
+        rows={generateUsers(5)}
+        cols={baseCols}
+        getRowId={getRowId}
+        rowHeight={48}
+        height="400px"
+        hiddenColumns={['email']}
+        onHiddenColumnsChange={onHiddenColumnsChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
+    fireEvent.click(screen.getByLabelText('Toggle all columns'));
+    expect(onHiddenColumnsChange).toHaveBeenCalledWith([]);
+  });
 });
 
 describe('DataGrid — column resize', () => {
@@ -915,3 +985,169 @@ describe('DataGrid — column reorder', () => {
     expect(draggableThs[0]?.textContent).toContain('Email');
   });
 });
+
+describe('DataGrid — Sprint 6 P2 refinements', () => {
+  // ───── D1: aria-rowcount / aria-rowindex ─────
+
+  it('sets aria-rowcount on the table reflecting the full dataset + header', () => {
+    const { container } = render(
+      <DataGrid
+        rows={generateUsers(500)}
+        cols={baseCols}
+        getRowId={getRowId}
+        rowHeight={48}
+        height="400px"
+      />,
+    );
+    const table = container.querySelector('table');
+    // 500 data rows + 1 header row
+    expect(table?.getAttribute('aria-rowcount')).toBe('501');
+  });
+
+  it('header row has aria-rowindex=1', () => {
+    const { container } = render(
+      <DataGrid
+        rows={generateUsers(20)}
+        cols={baseCols}
+        getRowId={getRowId}
+        rowHeight={48}
+        height="400px"
+      />,
+    );
+    expect(
+      container.querySelector('thead tr')?.getAttribute('aria-rowindex'),
+    ).toBe('1');
+  });
+
+  it('data rows carry a 1-based aria-rowindex offset past the header', () => {
+    const { container } = render(
+      <DataGrid
+        rows={generateUsers(20)}
+        cols={baseCols}
+        getRowId={getRowId}
+        rowHeight={48}
+        height="400px"
+      />,
+    );
+    // absolute index 0 → aria-rowindex 2 (header occupies index 1)
+    const firstDataRow = container.querySelector('tbody tr[data-selected]');
+    expect(firstDataRow?.getAttribute('aria-rowindex')).toBe('2');
+  });
+
+  // ───── D6: resize handle is not draggable + keyboard-focusable ─────
+
+  it('resize handle is keyboard-focusable and explicitly not draggable', () => {
+    render(
+      <DataGrid
+        rows={generateUsers(5)}
+        cols={baseCols}
+        getRowId={getRowId}
+        rowHeight={48}
+        height="400px"
+      />,
+    );
+    const handle = screen.getAllByRole('separator')[0] as HTMLElement;
+    expect(handle.getAttribute('tabindex')).toBe('0');
+    expect(handle.getAttribute('draggable')).toBe('false');
+  });
+
+  // ───── D3: keyboard column resize ─────
+
+  it('ArrowRight on the resize handle widens the column by 16px', () => {
+    const onColumnWidthsChange = vi.fn();
+    const cols: TableColumn<User>[] = [
+      { field: 'name', header: 'Name', width: 120 },
+    ];
+    render(
+      <DataGrid
+        rows={generateUsers(5)}
+        cols={cols}
+        getRowId={getRowId}
+        rowHeight={48}
+        height="400px"
+        columnWidths={{ name: 120 }}
+        onColumnWidthsChange={onColumnWidthsChange}
+      />,
+    );
+    const handle = screen.getByRole('separator');
+    fireEvent.keyDown(handle, { key: 'ArrowRight' });
+    expect(onColumnWidthsChange).toHaveBeenCalledWith({ name: 136 });
+  });
+
+  it('Shift+ArrowLeft on the resize handle narrows the column by 64px', () => {
+    const onColumnWidthsChange = vi.fn();
+    const cols: TableColumn<User>[] = [
+      { field: 'name', header: 'Name', width: 200 },
+    ];
+    render(
+      <DataGrid
+        rows={generateUsers(5)}
+        cols={cols}
+        getRowId={getRowId}
+        rowHeight={48}
+        height="400px"
+        columnWidths={{ name: 200 }}
+        onColumnWidthsChange={onColumnWidthsChange}
+      />,
+    );
+    const handle = screen.getByRole('separator');
+    fireEvent.keyDown(handle, { key: 'ArrowLeft', shiftKey: true });
+    expect(onColumnWidthsChange).toHaveBeenCalledWith({ name: 136 });
+  });
+
+  // ───── D7: no-results vs no-data empty state ─────
+
+  it('shows the noData message when the dataset is genuinely empty', () => {
+    render(
+      <DataGrid
+        rows={[]}
+        cols={baseCols}
+        getRowId={getRowId}
+        rowHeight={48}
+        height="400px"
+      />,
+    );
+    expect(screen.queryByText('No data')).not.toBeNull();
+  });
+
+  it('shows the noResults message when a filter excludes every row', () => {
+    render(
+      <DataGrid
+        rows={generateUsers(10)}
+        cols={baseCols}
+        getRowId={getRowId}
+        rowHeight={48}
+        height="400px"
+        filterModel={[{ field: 'name', op: 'contains', value: 'zzz-no-match' }]}
+      />,
+    );
+    expect(screen.queryByText('No matching results')).not.toBeNull();
+    expect(screen.queryByText('No data')).toBeNull();
+  });
+
+  // ───── D4: Enter applies the filter ─────
+
+  it('pressing Enter in the filter text input applies the filter', () => {
+    const onFilterChange = vi.fn();
+    const cols: TableColumn<User>[] = [
+      { field: 'name', header: 'Name', filterable: true },
+    ];
+    render(
+      <DataGrid
+        rows={generateUsers(5)}
+        cols={cols}
+        getRowId={getRowId}
+        rowHeight={48}
+        height="400px"
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    const input = screen.getByPlaceholderText('…') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'User 3' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'name', op: 'contains', value: 'User 3' },
+    ]);
+  });
+});

package/src/components/DataGrid/DataGrid.tsx

@@ -1,5 +1,7 @@
 import {
   useMemo,
+  useState,
+  useEffect,
   type ReactNode,
   type MouseEvent,
   type PointerEvent as RPointerEvent,
@@ -33,7 +35,7 @@ import type {
 } from '../Table/table.types.js';
 import type { DataGridProps } from './dataGrid.types.js';
 import { ColumnFilterTrigger } from './filters/ColumnFilters.js';
-import { ColumnVisibilityTrigger } from './visibility/ColumnVisibilityDialog.js';
+import { ColumnVisibilityTrigger } from './visibility/ColumnVisibilityMenu.js';
 import { useColumnResize } from './resize/useColumnResize.js';
 import {
   useColumnReorder,
@@ -43,6 +45,7 @@ import {
 const DEFAULT_LABELS: Required<TableLabels> = {
   searchPlaceholder: 'Search...',
   noData: 'No data',
+  noResults: 'No matching results',
   loading: 'Loading…',
   ariaSortNone: 'Not sorted. Click to sort ascending.',
   ariaSortAscending: 'Sorted ascending. Click to sort descending.',
@@ -68,12 +71,8 @@ const DEFAULT_LABELS: Required<TableLabels> = {
   densityComfortable: 'Comfortable',
   densitySpacious: 'Spacious',
   columnsButton: 'Columns',
-  columnsTitle: 'Manage columns',
-  columnsDescription:
-    'Show or hide columns. Required columns cannot be toggled.',
-  columnsShowAll: 'Show all',
-  columnsHideAll: 'Hide all',
-  columnsDone: 'Done',
+  columnsTitle: 'Toggle columns',
+  columnsToggleAll: 'Toggle all columns',
 };
 
 /**
@@ -238,7 +237,7 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
     defaultValue: defaultColumnWidths,
     onChange: onColumnWidthsChange,
   });
-  const { startResize } = useColumnResize({
+  const { startResize, nudge: nudgeColumnWidth } = useColumnResize({
     widths: columnWidths,
     onChange: setColumnWidths,
   });
@@ -258,6 +257,23 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
     onChange: setColumnOrder,
   });
 
+  // Column reorder rides on native HTML5 drag-and-drop, whose
+  // `dragstart` / `drop` events DO NOT fire for touch input. On a
+  // coarse-pointer device the drag would be a dead affordance — so
+  // we detect the primary pointer and gate reorder off there. Mouse
+  // / trackpad / pen (fine pointer) keep the feature. A pointer-event
+  // based reorder that also covers touch is tracked as a follow-up
+  // in REFINEMENT-NOTES.md.
+  const [coarsePointer, setCoarsePointer] = useState(false);
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mq = window.matchMedia('(pointer: coarse)');
+    setCoarsePointer(mq.matches);
+    const onChange = (e: MediaQueryListEvent) => setCoarsePointer(e.matches);
+    mq.addEventListener('change', onChange);
+    return () => mq.removeEventListener('change', onChange);
+  }, []);
+
   // Apply the active order to the columns list. Cols not in the
   // order array (e.g. newly-added columns at runtime) are appended
   // in their original position from `cols`.
@@ -414,7 +430,7 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
             <ColumnVisibilityTrigger
               cols={cols.filter(
                 (c) =>
-                  // RBAC-hidden columns are never offered in the dialog.
+                  // RBAC-hidden columns are never offered in the menu.
                   !c.access || c.access.onUnauthorized !== 'hide',
               )}
               hiddenColumns={hiddenColumns}
@@ -423,10 +439,7 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
               labels={{
                 columnsButton: labels.columnsButton,
                 columnsTitle: labels.columnsTitle,
-                columnsDescription: labels.columnsDescription,
-                columnsShowAll: labels.columnsShowAll,
-                columnsHideAll: labels.columnsHideAll,
-                columnsDone: labels.columnsDone,
+                columnsToggleAll: labels.columnsToggleAll,
               }}
             />
           )}
@@ -439,7 +452,19 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
         className={cn(v.scroll(), slotProps?.scroll?.className)}
         style={height ? { height, maxHeight: height } : undefined}
       >
-        <table className={cn(v.table(), slotProps?.table?.className)}>
+        {/*
+          `aria-rowcount` announces the TRUE total to assistive tech —
+          the virtualized DOM only holds the ~visible window, so without
+          it a screen reader reports "row N of <window size>" instead of
+          "row N of <dataset size>". `+ 1` accounts for the header row.
+          Each `<tr>` carries a 1-based `aria-rowindex` (header = 1,
+          data rows = absoluteIndex + 2). `-1` when the effective count
+          is unknown/zero keeps it a valid (ignored) value.
+        */}
+        <table
+          className={cn(v.table(), slotProps?.table?.className)}
+          aria-rowcount={effectiveTotalCount > 0 ? effectiveTotalCount + 1 : -1}
+        >
           {caption != null && (
             <caption className={cn(!showCaption && 'sr-only', 'py-2 text-sm text-neutral-500')}>
               {caption}
@@ -452,7 +477,10 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
               slotProps?.thead?.className,
             )}
           >
-            <tr className={cn(v.headerRow(), slotProps?.headerRow?.className)}>
+            <tr
+              aria-rowindex={1}
+              className={cn(v.headerRow(), slotProps?.headerRow?.className)}
+            >
               {showSelectionColumn && (
                 <th
                   scope="col"
@@ -497,8 +525,11 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
                     enableColumnResize && col.resizable !== false
                   }
                   startResize={startResize}
+                  nudgeColumnWidth={nudgeColumnWidth}
                   reorderable={
-                    enableColumnReorder && col.reorderable !== false
+                    enableColumnReorder &&
+                    col.reorderable !== false &&
+                    !coarsePointer
                   }
                   reorderHandlers={reorderHandlers}
                   labels={labels}
@@ -542,7 +573,16 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
                 ? renderEmptyState({
                     totalColumnCount,
                     emptyState,
-                    fallback: labels.noData,
+                    // Distinguish a genuinely empty dataset from one
+                    // emptied by an active search / filter (works for
+                    // server-side mode too — a query that returns 0
+                    // rows still reads as "no matching results").
+                    fallback:
+                      rows.length > 0 &&
+                      (debouncedSearchQuery.trim().length > 0 ||
+                        filterModel.length > 0)
+                        ? labels.noResults
+                        : labels.noData,
                     cellClass: cn(
                       v.cell(),
                       v.emptyState(),
@@ -653,6 +693,13 @@ function HeaderCell<T extends object>(props: {
     clampMin: number,
     clampMax: number,
   ) => (e: RPointerEvent<HTMLElement>) => void;
+  nudgeColumnWidth: (
+    field: string,
+    currentWidth: number,
+    delta: number,
+    clampMin: number,
+    clampMax: number,
+  ) => void;
   reorderable: boolean;
   reorderHandlers: ColumnReorderHandlers;
   labels: Required<TableLabels>;
@@ -670,6 +717,7 @@ function HeaderCell<T extends object>(props: {
     effectiveWidth,
     resizable,
     startResize,
+    nudgeColumnWidth,
     reorderable,
     reorderHandlers,
     labels,
@@ -725,24 +773,55 @@ function HeaderCell<T extends object>(props: {
       }
     : {};
 
+  // Resize bounds — shared by the pointer-drag and keyboard paths.
+  const resizeMin = col.minWidth ?? 40;
+  const resizeMax = col.maxWidth ?? 1200;
+  // Keyboard nudge step: 16px, or 64px with Shift held (coarse).
+  const measureWidth = (handle: HTMLElement): number =>
+    effectiveWidth ??
+    (handle.parentElement as HTMLElement | null)?.getBoundingClientRect()
+      .width ??
+    120;
+
   const resizeHandle = resizable ? (
     <span
       role="separator"
       aria-orientation="vertical"
       aria-label={`Resize ${typeof col.header === 'string' ? col.header : col.field}`}
+      // Width bounds announced to assistive tech on the separator.
+      aria-valuemin={resizeMin}
+      aria-valuemax={resizeMax}
+      aria-valuenow={effectiveWidth ?? undefined}
+      // Keyboard-operable: focusable + ArrowLeft/Right resize. WCAG 2.1
+      // keyboard operability — the drag is no longer the only path.
+      tabIndex={disabled ? -1 : 0}
+      // D6 guard: the parent `<th>` is `draggable` when reorderable;
+      // marking the handle non-draggable means grabbing the handle
+      // starts a RESIZE, never a column-reorder drag.
+      draggable={false}
       onPointerDown={(e) => {
-        const handle = e.currentTarget;
-        const th = handle.parentElement as HTMLElement | null;
-        const startWidth =
-          effectiveWidth ?? th?.getBoundingClientRect().width ?? 120;
-        const min = col.minWidth ?? 40;
-        const max = col.maxWidth ?? 1200;
-        startResize(col.field as string, startWidth, min, max)(e);
+        const startWidth = measureWidth(e.currentTarget);
+        startResize(col.field as string, startWidth, resizeMin, resizeMax)(e);
+      }}
+      onKeyDown={(e) => {
+        if (disabled) return;
+        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+        e.preventDefault();
+        const step = (e.shiftKey ? 64 : 16) * (e.key === 'ArrowLeft' ? -1 : 1);
+        const current = measureWidth(e.currentTarget);
+        nudgeColumnWidth(
+          col.field as string,
+          current,
+          step,
+          resizeMin,
+          resizeMax,
+        );
       }}
       className={cn(
         'absolute top-0 bottom-0 right-0 w-1.5',
         'cursor-col-resize select-none touch-none',
         'hover:bg-primary-300 active:bg-primary-400',
+        'focus:outline-none focus-visible:bg-primary-400',
         'transition-colors motion-reduce:transition-none',
       )}
     />
@@ -957,6 +1036,10 @@ function renderVirtualizedBody<T extends object>(args: {
         return (
           <tr
             key={rowId}
+            // 1-based row index in the FULL dataset (header row is 1,
+            // so data rows start at 2). Lets a screen reader announce
+            // the true position despite virtualization windowing.
+            aria-rowindex={absoluteIdx + 2}
             data-selected={isSelected ? 'true' : 'false'}
             aria-selected={rowSelection !== 'none' ? isSelected : undefined}
             className={classes.row}