@gntik-ai/blocks 0.0.0-stage → 0.5.0

package/src/shell/GlobalSearch/fixtures.ts

@@ -0,0 +1,64 @@
+import {
+  BarChart3,
+  CreditCard,
+  FileText,
+  FolderKanban,
+  FolderPlus,
+  Home,
+  Rocket,
+  Settings,
+  UserPlus,
+  Users,
+} from '@gntik-ai/icons';
+import type { CommandItem } from '@gntik-ai/ui';
+
+export const globalSearchPages: CommandItem[] = [
+  { id: 'page-overview', label: 'Overview', icon: Home, shortcut: ['G', 'O'] },
+  { id: 'page-projects', label: 'Projects', icon: FolderKanban, shortcut: ['G', 'P'] },
+  { id: 'page-deployments', label: 'Deployments', icon: Rocket },
+  { id: 'page-analytics', label: 'Analytics', icon: BarChart3 },
+  { id: 'page-members', label: 'Members', icon: Users, keywords: ['team', 'people'] },
+  { id: 'page-billing', label: 'Billing', icon: CreditCard, keywords: ['invoices', 'plan'] },
+  { id: 'page-settings', label: 'Settings', icon: Settings, shortcut: ['⌘', ','] },
+];
+
+export const globalSearchRecords: CommandItem[] = [
+  {
+    id: 'record-web-frontend',
+    label: 'web-frontend',
+    icon: FolderKanban,
+    mono: true,
+    description: 'Project · eu-west',
+  },
+  { id: 'record-billing-api', label: 'billing-api', icon: FolderKanban, mono: true, description: 'Project · us-east' },
+  {
+    id: 'record-inv-2041',
+    label: 'INV-2041',
+    icon: FileText,
+    mono: true,
+    description: 'Invoice · Orbit Freight · overdue',
+  },
+  {
+    id: 'record-dana',
+    label: 'Dana Whitfield',
+    icon: Users,
+    description: 'Member · Owner',
+    keywords: ['dana@example.com'],
+  },
+];
+
+export const globalSearchActions: CommandItem[] = [
+  { id: 'action-new-project', label: 'Create project', icon: FolderPlus, shortcut: ['⌘', 'N'], keywords: ['new'] },
+  {
+    id: 'action-deploy',
+    label: 'Deploy to production',
+    icon: Rocket,
+    description: 'Promote the latest build of the current project',
+  },
+  { id: 'action-invite', label: 'Invite member', icon: UserPlus, keywords: ['team', 'people'] },
+];
+
+export const globalSearchRecent: CommandItem[] = [
+  { id: 'recent-web-frontend', label: 'web-frontend', icon: FolderKanban, mono: true, description: 'Project' },
+  { id: 'recent-billing', label: 'Billing', icon: CreditCard, description: 'Page' },
+];

package/src/shell/index.ts

@@ -0,0 +1,11 @@
+export * from './AppSidebar/AppSidebar';
+export * from './AppSidebar/fixtures';
+export { meta as appSidebarMeta } from './AppSidebar/block.meta';
+export * from './AppTopbar/AppTopbar';
+export * from './AppTopbar/fixtures';
+export { meta as appTopbarMeta } from './AppTopbar/block.meta';
+export * from './EnvironmentBadge/EnvironmentBadge';
+export { meta as environmentBadgeMeta } from './EnvironmentBadge/block.meta';
+export * from './GlobalSearch/GlobalSearch';
+export * from './GlobalSearch/fixtures';
+export { meta as globalSearchMeta } from './GlobalSearch/block.meta';

package/src/styles.css

@@ -0,0 +1,2 @@
+/* @gntik-ai/blocks — lets Tailwind v4 see this package's classes. Import after "@gntik-ai/ui/styles.css". */
+@source "../dist";

package/src/tables/DataTable/DataTable.edit-views.test.tsx

@@ -0,0 +1,249 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { DataTable } from './DataTable';
+import type { DataTableColumn } from './data-table-utils';
+import EditableDataTable from './examples/editable';
+import SavedViewsDataTable from './examples/saved-views';
+import { DEPLOYMENT_ROWS, type DeploymentRow } from './fixtures';
+import { newViewId, sameViewState, type DataTableView } from './views';
+
+const first = DEPLOYMENT_ROWS[0]!;
+const second = DEPLOYMENT_ROWS[1]!;
+const editColumns: Array<DataTableColumn<DeploymentRow>> = [
+  { id: 'name', header: 'Deployment', accessor: (r) => r.name, editable: true },
+  { id: 'region', header: 'Region', accessor: (r) => r.region },
+  {
+    id: 'cost',
+    header: 'Cost',
+    accessor: (r) => r.cost,
+    editable: (r) => r.status !== 'failed',
+    editor: { type: 'number', min: 0, max: 1000 },
+  },
+];
+const rows = DEPLOYMENT_ROWS.slice(0, 3);
+const cell = (text: string) => screen.getByRole('button', { name: text });
+
+describe('DataTable inline editing', () => {
+  it('edits with Enter, commits with Enter and returns focus', async () => {
+    const user = userEvent.setup();
+    const onCellEdit = vi.fn();
+    render(<DataTable rows={rows} columns={editColumns} paginated={false} onCellEdit={onCellEdit} />);
+    const trigger = cell(first.name);
+    expect(trigger).toHaveAccessibleDescription('Press Enter or F2 to edit.');
+    trigger.focus();
+    await user.keyboard('{Enter}');
+    const input = screen.getByRole('textbox', { name: `Deployment for ${first.name}` });
+    expect(input).toHaveFocus();
+    await user.clear(input);
+    await user.type(input, 'renamed{Enter}');
+    expect(onCellEdit).toHaveBeenCalledWith({
+      row: first,
+      rowId: first.id,
+      columnId: 'name',
+      value: 'renamed',
+      previous: first.name,
+    });
+    await waitFor(() => expect(cell(first.name)).toHaveFocus());
+  });
+
+  it('starts with F2 and cancels with Escape', async () => {
+    const user = userEvent.setup();
+    const onCellEdit = vi.fn();
+    render(<DataTable rows={rows} columns={editColumns} paginated={false} onCellEdit={onCellEdit} />);
+    cell(first.name).focus();
+    await user.keyboard('{F2}');
+    await user.keyboard('xyz{Escape}');
+    expect(onCellEdit).not.toHaveBeenCalled();
+    expect(screen.queryByRole('textbox')).toBeNull();
+    expect(cell(first.name)).toHaveFocus();
+  });
+
+  it('commits with Tab and moves to the next editable cell', async () => {
+    const user = userEvent.setup();
+    const onCellEdit = vi.fn();
+    render(<DataTable rows={rows} columns={editColumns} paginated={false} onCellEdit={onCellEdit} />);
+    cell(first.name).focus();
+    await user.keyboard('{Enter}{End}-v2{Tab}');
+    expect(onCellEdit).toHaveBeenLastCalledWith(
+      expect.objectContaining({ columnId: 'name', value: `${first.name}-v2` }),
+    );
+    await waitFor(() => expect(cell(String(first.cost))).toHaveFocus());
+  });
+
+  it('shows a rejection inline and keeps editing', async () => {
+    const user = userEvent.setup();
+    const onCellEdit = vi.fn(async () => 'That name is taken.');
+    const { container } = render(
+      <DataTable rows={rows} columns={editColumns} paginated={false} onCellEdit={onCellEdit} />,
+    );
+    cell(first.name).focus();
+    await user.keyboard(`{Enter}{Control>}a{/Control}${second.name}{Enter}`);
+    const alert = await screen.findByRole('alert');
+    expect(alert).toHaveTextContent('That name is taken.');
+    const input = screen.getByRole('textbox', { name: `Deployment for ${first.name}` });
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(input).toHaveAccessibleDescription('That name is taken.');
+    expect(input).toHaveFocus();
+    await expectNoAxeViolations(container);
+  });
+
+  it('reports thrown errors and validates numbers before calling onCellEdit', async () => {
+    const user = userEvent.setup();
+    const onCellEdit = vi.fn(() => {
+      throw new Error('Server unavailable');
+    });
+    render(<DataTable rows={rows} columns={editColumns} paginated={false} onCellEdit={onCellEdit} />);
+    cell(String(first.cost)).focus();
+    await user.keyboard('{Enter}');
+    const input = screen.getByRole('spinbutton', { name: `Cost for ${first.name}` });
+    await user.clear(input);
+    await user.type(input, '5000{Enter}');
+    expect(screen.getByRole('alert')).toHaveTextContent('Enter 1000 or less.');
+    expect(onCellEdit).not.toHaveBeenCalled();
+    await user.clear(input);
+    await user.type(input, '12{Enter}');
+    expect(onCellEdit).toHaveBeenLastCalledWith(expect.objectContaining({ value: 12 }));
+    expect(await screen.findByRole('alert')).toHaveTextContent('Server unavailable');
+  });
+
+  it('edits with the select editor of the example and shows server rejections', async () => {
+    const user = userEvent.setup();
+    render(<EditableDataTable />);
+    const statusTrigger = within(screen.getAllByRole('row')[1]!).getAllByRole('button')[1]!;
+    statusTrigger.focus();
+    await user.keyboard('{Enter}');
+    const select = screen.getByRole('combobox', { name: `Status for ${first.name}` });
+    await user.selectOptions(select, 'paused');
+    await user.keyboard('{Enter}');
+    await waitFor(() => expect(within(screen.getAllByRole('row')[1]!).getByText('Paused')).toBeInTheDocument());
+    // Example: budgets above $1,000 are rejected by the simulated server.
+    const budget = within(screen.getAllByRole('row')[1]!).getAllByRole('button')[2]!;
+    budget.focus();
+    await user.keyboard('{Enter}{Control>}a{/Control}1500{Enter}');
+    expect(await screen.findByRole('alert')).toHaveTextContent('Budgets above $1,000 need approval.');
+  });
+
+  it('per-row editable functions leave other cells read-only', () => {
+    const failing = { ...first, id: 'x', status: 'failed' as const, cost: 77 };
+    render(<DataTable rows={[failing]} columns={editColumns} paginated={false} onCellEdit={() => undefined} />);
+    expect(screen.queryByRole('button', { name: '77' })).toBeNull();
+    expect(screen.getByText('77').closest('td')).toBeInTheDocument();
+  });
+});
+
+describe('DataTable saved views', () => {
+  const views: DataTableView[] = [
+    {
+      id: 'expensive',
+      name: 'Most expensive',
+      state: { sort: { columnId: 'cost', direction: 'descending' }, hiddenColumns: ['region', 'updated'] },
+    },
+    {
+      id: 'grouped',
+      name: 'By region',
+      state: { groupBy: 'region', pinnedColumns: { left: ['name'] }, filters: { q: 'api' } },
+    },
+  ];
+
+  it('switches views from the menu', async () => {
+    const user = userEvent.setup();
+    const onActiveViewChange = vi.fn();
+    const onFiltersChange = vi.fn();
+    const onGroupByChange = vi.fn();
+    const { container } = render(
+      <DataTable
+        defaultViews={views}
+        onActiveViewChange={onActiveViewChange}
+        onFiltersChange={onFiltersChange}
+        onGroupByChange={onGroupByChange}
+        paginated={false}
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: 'Default view' }));
+    await user.click(await screen.findByRole('menuitemradio', { name: 'Most expensive' }));
+    expect(onActiveViewChange).toHaveBeenLastCalledWith('expensive');
+    expect(screen.getByRole('columnheader', { name: /Cost/ })).toHaveAttribute('aria-sort', 'descending');
+    expect(screen.queryByRole('columnheader', { name: /Region/ })).toBeNull();
+    await user.click(screen.getByRole('button', { name: 'Most expensive' }));
+    await user.click(await screen.findByRole('menuitemradio', { name: 'By region' }));
+    expect(onFiltersChange).toHaveBeenLastCalledWith({ q: 'api' });
+    expect(onGroupByChange).toHaveBeenLastCalledWith('region');
+    expect(screen.getAllByRole('rowheader')[0]).toHaveAttribute('scope', 'rowgroup');
+    expect(screen.getByRole('columnheader', { name: /Region/ })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /Deployment/ })).toHaveClass('sticky');
+    await expectNoAxeViolations(container);
+  });
+
+  it('marks changes, resets and saves them to the active view', async () => {
+    const user = userEvent.setup();
+    const onViewsChange = vi.fn();
+    render(<DataTable defaultViews={views} defaultActiveViewId="expensive" onViewsChange={onViewsChange} />);
+    // Seeded from the active view.
+    expect(screen.getByRole('columnheader', { name: /Cost/ })).toHaveAttribute('aria-sort', 'descending');
+    await user.click(screen.getByRole('button', { name: /Status/ }));
+    const trigger = screen.getByRole('button', { name: 'Most expensive (modified)' });
+    await user.click(trigger);
+    await user.click(await screen.findByRole('menuitem', { name: 'Reset changes' }));
+    expect(screen.getByRole('columnheader', { name: /Cost/ })).toHaveAttribute('aria-sort', 'descending');
+    expect(screen.getByRole('button', { name: 'Most expensive' })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /Status/ }));
+    await user.click(screen.getByRole('button', { name: 'Most expensive (modified)' }));
+    await user.click(await screen.findByRole('menuitem', { name: 'Save changes' }));
+    expect(onViewsChange.mock.lastCall?.[0][0].state.sort).toEqual({ columnId: 'status', direction: 'ascending' });
+    expect(screen.getByRole('button', { name: 'Most expensive' })).toBeInTheDocument();
+  });
+
+  it('saves as a new view, renames and deletes it', async () => {
+    const user = userEvent.setup();
+    const onViewsChange = vi.fn();
+    render(<DataTable defaultViews={views} onViewsChange={onViewsChange} resizable />);
+    screen.getByRole('separator', { name: 'Resize Region column' }).focus();
+    await user.keyboard('{ArrowRight}');
+    await user.click(screen.getByRole('button', { name: 'Default view (modified)' }));
+    await user.click(await screen.findByRole('menuitem', { name: 'Save as new view…' }));
+    const dialog = await screen.findByRole('dialog', { name: 'Save view' });
+    await user.type(within(dialog).getByRole('textbox', { name: 'View name' }), 'Wide region{Enter}');
+    const saved = onViewsChange.mock.lastCall?.[0] as DataTableView[];
+    expect(saved).toHaveLength(3);
+    expect(saved[2]).toMatchObject({
+      id: 'wide-region',
+      name: 'Wide region',
+      state: { columnWidths: { region: 170 } },
+    });
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    await user.click(screen.getByRole('button', { name: 'Wide region' }));
+    await user.click(await screen.findByRole('menuitem', { name: 'Rename view…' }));
+    const rename = await screen.findByRole('dialog', { name: 'Rename view' });
+    const field = within(rename).getByRole('textbox', { name: 'View name' });
+    expect(field).toHaveValue('Wide region');
+    await user.clear(field);
+    await user.type(field, 'Regions{Enter}');
+    expect((onViewsChange.mock.lastCall?.[0] as DataTableView[])[2]?.name).toBe('Regions');
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    await user.click(screen.getByRole('button', { name: 'Regions' }));
+    await user.click(await screen.findByRole('menuitem', { name: 'Delete view' }));
+    expect(onViewsChange.mock.lastCall?.[0]).toHaveLength(2);
+    expect(screen.getByRole('button', { name: /^Default view/ })).toBeInTheDocument();
+  });
+
+  it('the example restores filters with a view', async () => {
+    const user = userEvent.setup();
+    render(<SavedViewsDataTable />);
+    await user.click(screen.getByRole('button', { name: 'Default view' }));
+    await user.click(await screen.findByRole('menuitemradio', { name: 'Needs attention' }));
+    const failedCount = DEPLOYMENT_ROWS.filter((r) => r.status === 'failed').length;
+    await waitFor(() =>
+      expect(within(screen.getAllByRole('rowgroup')[1]!).getAllByRole('row')).toHaveLength(failedCount),
+    );
+    await user.click(screen.getByRole('button', { name: 'Needs attention' }));
+    await user.click(await screen.findByRole('menuitemradio', { name: 'Default view' }));
+    await waitFor(() => expect(within(screen.getAllByRole('rowgroup')[1]!).getAllByRole('row')).toHaveLength(10));
+  });
+
+  it('view helpers', () => {
+    expect(sameViewState({ hiddenColumns: ['b', 'a'] }, { hiddenColumns: ['a', 'b'], sort: null })).toBe(true);
+    expect(sameViewState({ columnWidths: { a: 1 } }, {})).toBe(false);
+    expect(newViewId('My view!', [{ id: 'my-view', name: 'x', state: {} }])).toBe('my-view-2');
+  });
+});

package/src/tables/DataTable/DataTable.layout.test.tsx

@@ -0,0 +1,188 @@
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { DataTable } from './DataTable';
+import { orderColumns, setColumnPin, tableLayout } from './column-sizing';
+import ResizablePinnedDataTable from './examples/resizable-pinned';
+import VirtualizedDataTable from './examples/virtualized';
+import { DEPLOYMENT_COLUMNS, generateDeployments } from './fixtures';
+import { windowFor } from './use-virtual-rows';
+
+const head = (name: RegExp) => screen.getByRole('columnheader', { name });
+
+describe('DataTable column resize', () => {
+  it('exposes a focusable separator per column and resizes from the keyboard', async () => {
+    const user = userEvent.setup();
+    const onColumnWidthsChange = vi.fn();
+    const { container } = render(<DataTable resizable onColumnWidthsChange={onColumnWidthsChange} />);
+    const handle = screen.getByRole('separator', { name: 'Resize Region column' });
+    expect(handle).toHaveAttribute('aria-valuenow', '160');
+    expect(handle).toHaveAttribute('aria-valuemin', '60');
+    expect(handle).toHaveAttribute('aria-valuemax', '640');
+    expect(handle).toHaveAttribute('aria-orientation', 'vertical');
+    handle.focus();
+    await user.keyboard('{ArrowRight}');
+    expect(handle).toHaveAttribute('aria-valuenow', '170');
+    await user.keyboard('{Shift>}{ArrowLeft}{/Shift}');
+    expect(handle).toHaveAttribute('aria-valuenow', '120');
+    await user.keyboard('{Home}');
+    expect(handle).toHaveAttribute('aria-valuenow', '60');
+    await user.keyboard('{End}');
+    expect(onColumnWidthsChange).toHaveBeenLastCalledWith({ region: 640 });
+    expect(head(/Region/)).toHaveStyle({ width: '640px' });
+    expect(screen.getByRole('table')).toHaveClass('table-fixed');
+    // The sort button and the handle are siblings, never nested.
+    expect(within(head(/Cost/)).getByRole('button', { name: /Cost/ })).not.toContainElement(
+      screen.getByRole('separator', { name: 'Resize Cost column' }),
+    );
+    await expectNoAxeViolations(container);
+  });
+
+  it('resizes with a pointer drag and respects column limits', () => {
+    const columns = DEPLOYMENT_COLUMNS.map((c) => (c.id === 'name' ? { ...c, width: 200, maxWidth: 260 } : c));
+    render(<DataTable resizable columns={columns} />);
+    const handle = screen.getByRole('separator', { name: 'Resize Deployment column' });
+    expect(handle).toHaveAttribute('aria-valuenow', '200');
+    fireEvent.pointerDown(handle, { clientX: 100, pointerId: 1 });
+    fireEvent.pointerMove(handle, { clientX: 140, pointerId: 1 });
+    expect(handle).toHaveAttribute('aria-valuenow', '240');
+    fireEvent.pointerMove(handle, { clientX: 400, pointerId: 1 });
+    fireEvent.pointerUp(handle, { clientX: 400, pointerId: 1 });
+    expect(handle).toHaveAttribute('aria-valuenow', '260');
+  });
+
+  it('follows controlled widths and keeps sortable headers working', async () => {
+    const user = userEvent.setup();
+    const onSortChange = vi.fn();
+    render(<DataTable resizable columnWidths={{ cost: 120 }} onSortChange={onSortChange} />);
+    const handle = screen.getByRole('separator', { name: 'Resize Cost column' });
+    expect(handle).toHaveAttribute('aria-valuenow', '120');
+    handle.focus();
+    await user.keyboard('{ArrowRight}');
+    expect(handle).toHaveAttribute('aria-valuenow', '120');
+    await user.click(screen.getByRole('button', { name: /Cost/ }));
+    expect(head(/Cost/)).toHaveAttribute('aria-sort', 'ascending');
+    expect(onSortChange).toHaveBeenLastCalledWith({ columnId: 'cost', direction: 'ascending' });
+  });
+});
+
+describe('DataTable column pinning', () => {
+  it('pins columns to both edges with sticky offsets and an edge rule', async () => {
+    const { container } = render(<ResizablePinnedDataTable />);
+    const headers = screen.getAllByRole('columnheader');
+    // Selection, pinned name, the rest, pinned cost, actions.
+    expect(headers[1]).toHaveTextContent('Deployment');
+    expect(headers[headers.length - 2]).toHaveTextContent('Cost');
+    const name = head(/Deployment/);
+    expect(name).toHaveClass('sticky', 'border-e');
+    expect(name.style.width).toBe('220px');
+    const cost = head(/Cost/);
+    expect(cost).toHaveClass('sticky', 'border-s');
+    // The selection and actions columns stick with them.
+    expect(headers[0]).toHaveClass('sticky');
+    expect(headers[headers.length - 1]).toHaveClass('sticky');
+    const firstRow = within(screen.getAllByRole('rowgroup')[1]!).getAllByRole('row')[0]!;
+    expect(within(firstRow).getAllByRole('cell')[1]).toHaveClass('sticky', 'bg-card');
+    await expectNoAxeViolations(container);
+  });
+
+  it('pins and unpins from the column menu', async () => {
+    // The submenu opens from the keyboard (ArrowRight on its trigger).
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+    const onPinnedColumnsChange = vi.fn();
+    render(<DataTable onPinnedColumnsChange={onPinnedColumnsChange} />);
+    await user.click(screen.getByRole('button', { name: 'Columns' }));
+    const sub = await screen.findByRole('menuitem', { name: /^Region/ });
+    act(() => sub.focus());
+    await user.keyboard('{ArrowRight}');
+    await user.click(await screen.findByRole('menuitemradio', { name: 'Pin left' }));
+    expect(onPinnedColumnsChange).toHaveBeenLastCalledWith({ left: ['region'], right: [] });
+    expect(screen.getAllByRole('columnheader')[1]).toHaveTextContent('Region');
+    expect(head(/Region/)).toHaveClass('sticky');
+  });
+
+  it('computes layout helpers', () => {
+    expect(setColumnPin({ left: ['a'] }, 'a', 'right')).toEqual({ left: [], right: ['a'] });
+    const cols = [
+      { id: 'a', header: 'A' },
+      { id: 'b', header: 'B', width: 100 },
+      { id: 'c', header: 'C' },
+    ];
+    expect(orderColumns(cols, { left: ['c'], right: ['a'] }).map((c) => c.id)).toEqual(['c', 'b', 'a']);
+    const auto = tableLayout({ columns: cols, widths: {}, pinned: {}, sized: false, lead: true, trail: false });
+    expect(auto.tableClassName).toBeUndefined();
+    const l = tableLayout({
+      columns: cols,
+      widths: { a: 90 },
+      pinned: { left: ['b', 'c'] },
+      sized: false,
+      lead: true,
+      trail: true,
+    });
+    expect(l.columns.get('b')?.style).toMatchObject({ width: 100, insetInlineStart: 40 });
+    expect(l.columns.get('c')?.style).toMatchObject({ insetInlineStart: 140 });
+    expect(l.columns.get('c')?.className).toContain('border-e');
+    expect(l.tableStyle).toEqual({ width: 90 + 100 + 160 + 40 + 48, minWidth: '100%' });
+  });
+});
+
+describe('DataTable virtualization', () => {
+  it('renders a window of rows with aria-rowcount and aria-rowindex', async () => {
+    const { container } = render(<VirtualizedDataTable />);
+    const table = screen.getByRole('table');
+    expect(table).toHaveAttribute('data-virtualized', 'true');
+    expect(table).toHaveAttribute('aria-rowcount', '5001');
+    const rendered = container.querySelectorAll('tbody:not([data-virtual-spacer]) tr');
+    expect(rendered.length).toBeGreaterThan(5);
+    expect(rendered.length).toBeLessThan(60);
+    expect(rendered[0]).toHaveAttribute('aria-rowindex', '2');
+    expect(screen.getAllByRole('row')[0]).toHaveAttribute('aria-rowindex', '1');
+    expect(container.querySelector('[data-virtual-spacer] td')).toHaveStyle({
+      height: `${(5000 - rendered.length) * 44}px`,
+    });
+    await expectNoAxeViolations(container);
+  });
+
+  it('moves the window on scroll', async () => {
+    const { container } = render(<DataTable rows={generateDeployments(1000)} paginated={false} />);
+    const scroller = screen.getByRole('table').parentElement!;
+    act(() => {
+      scroller.scrollTop = 44 * 500;
+      fireEvent.scroll(scroller);
+    });
+    await waitFor(() =>
+      expect(container.querySelector('tbody:not([data-virtual-spacer]) tr')?.getAttribute('aria-rowindex')).toBe(
+        String(500 - 8 + 2),
+      ),
+    );
+  });
+
+  it('select-all covers every row, not only the rendered ones', async () => {
+    const user = userEvent.setup();
+    const onSelectionChange = vi.fn();
+    render(<DataTable rows={generateDeployments(400)} paginated={false} onSelectionChange={onSelectionChange} />);
+    await user.click(screen.getByRole('checkbox', { name: 'Select all rows on this page' }));
+    expect(onSelectionChange.mock.lastCall?.[0]).toHaveLength(400);
+  });
+
+  it('virtualizes grouped rows, keeping a rowgroup per group', () => {
+    render(<DataTable rows={generateDeployments(600)} groupBy="region" paginated={false} virtualize />);
+    const groups = screen.getAllByRole('rowgroup').filter((g) => g.hasAttribute('data-group'));
+    expect(groups.length).toBeGreaterThan(0);
+    const header = screen.getAllByRole('rowheader')[0]!;
+    expect(header).toHaveAttribute('scope', 'rowgroup');
+    expect(header.closest('tr')).toHaveAttribute('aria-rowindex', '2');
+  });
+
+  it('stays off below the threshold and when disabled', () => {
+    const { rerender } = render(<DataTable rows={generateDeployments(50)} paginated={false} />);
+    expect(screen.getByRole('table')).not.toHaveAttribute('aria-rowcount');
+    rerender(<DataTable rows={generateDeployments(500)} paginated={false} virtualize={false} />);
+    expect(within(screen.getAllByRole('rowgroup')[1]!).getAllByRole('row')).toHaveLength(500);
+  });
+
+  it('windowFor clamps to the item count', () => {
+    expect(windowFor(100, 0, 440, 44, 5)).toEqual({ start: 0, end: 16, rowHeight: 44 });
+    expect(windowFor(100, 44 * 98, 440, 44, 5)).toEqual({ start: 93, end: 100, rowHeight: 44 });
+  });
+});