@astryxdesign/core 0.7.5 → 0.7.6-canary.0135af4

package/src/Table/TableHeaderCell.test.tsx

@@ -1,291 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file TableHeaderCell.test.tsx
- * @input Uses vitest, @testing-library/react, StyleX, Table, TableHeaderCell
- * @output Unit tests for TableHeaderCell
- * @position Testing; validates the `<th>` contract, the standalone (no
- *   TableContext) plain render, and the context-driven density/divider styling
- *
- * SYNC: When TableHeaderCell.tsx changes, update tests to match
- */
-
-import {describe, it, expect, vi} from 'vitest';
-import {render, screen} from '@testing-library/react';
-import * as stylex from '@stylexjs/stylex';
-import {Table} from './Table';
-import {TableHeaderCell} from './TableHeaderCell';
-import type {TableColumn} from './types';
-
-// =============================================================================
-// Test Data
-// =============================================================================
-
-interface User extends Record<string, unknown> {
-  name: string;
-  age: number;
-}
-
-const users: User[] = [{name: 'Alice', age: 30}];
-
-const columns: TableColumn<User>[] = [
-  {key: 'name', header: 'Name'},
-  {key: 'age', header: 'Age'},
-];
-
-// =============================================================================
-// Helpers
-// =============================================================================
-
-/**
- * Read back the CSS declarations that actually apply to an element's classes.
- * StyleX runs with `runtimeInjection` under vitest, so the real rules live in
- * `document.styleSheets` — this keeps the assertions on declarations instead
- * of on hashed class names.
- *
- * Conditional rules keep their pseudo-class prefix, e.g.
- * `:last-child border-inline-end-width: 0`.
- */
-function cssDeclarationsOf(el: Element): string[] {
-  const classes = new Set(
-    (el as HTMLElement).className.split(/\s+/).filter(Boolean),
-  );
-  const declarations: string[] = [];
-
-  for (const sheet of Array.from(document.styleSheets)) {
-    for (const rule of Array.from(sheet.cssRules)) {
-      const text = rule.cssText;
-      const brace = text.indexOf('{');
-      if (brace === -1) {
-        continue;
-      }
-      // Strip StyleX's `:not(#\#)` specificity padding from the selector.
-      const selector = text.slice(0, brace).replaceAll(':not(#\\#)', '').trim();
-      const match = /^\.([\w-]+)(.*)$/.exec(selector);
-      if (!match || !classes.has(match[1])) {
-        continue;
-      }
-      const body = text
-        .slice(brace + 1, text.lastIndexOf('}'))
-        .trim()
-        .replace(/;$/, '');
-      const condition = match[2].trim();
-      declarations.push(condition ? `${condition} ${body}` : body);
-    }
-  }
-
-  return declarations;
-}
-
-/** Render a lone header cell with no Table around it. */
-function renderStandalone(cell: React.ReactNode) {
-  return render(
-    <table>
-      <thead>
-        <tr>{cell}</tr>
-      </thead>
-    </table>,
-  );
-}
-
-/** Declarations applying to the first header cell of a rendered Table. */
-function headerCellDeclarations(container: HTMLElement): string[] {
-  const th = container.querySelector('thead th');
-  expect(th).not.toBeNull();
-  return cssDeclarationsOf(th as Element);
-}
-
-// =============================================================================
-// Tests
-// =============================================================================
-
-describe('TableHeaderCell', () => {
-  it('renders a th element around its children', () => {
-    const {container} = renderStandalone(
-      <TableHeaderCell>Name</TableHeaderCell>,
-    );
-    const th = container.querySelector('th');
-    expect(th).not.toBeNull();
-    expect(th).toHaveTextContent('Name');
-    expect(screen.getByRole('columnheader')).toBe(th);
-  });
-
-  it('sets no scope attribute unless one is given', () => {
-    const {container} = renderStandalone(
-      <TableHeaderCell>Name</TableHeaderCell>,
-    );
-    expect(container.querySelector('th')).not.toHaveAttribute('scope');
-  });
-
-  it('reflects the scope prop on the th', () => {
-    const {container} = renderStandalone(
-      <TableHeaderCell scope="rowgroup">Name</TableHeaderCell>,
-    );
-    expect(container.querySelector('th')).toHaveAttribute('scope', 'rowgroup');
-  });
-
-  it('renders unstyled when used outside a Table', () => {
-    const {container} = renderStandalone(
-      <TableHeaderCell>Name</TableHeaderCell>,
-    );
-    const th = container.querySelector('th') as HTMLElement;
-    // No table context — no density, divider or overflow styling at all.
-    expect(cssDeclarationsOf(th)).toEqual([]);
-    expect(th).toHaveClass('astryx-table-header-cell');
-  });
-
-  it('takes the balanced density padding from the table by default', () => {
-    const {container} = render(<Table data={users} columns={columns} />);
-    const declarations = headerCellDeclarations(container);
-    expect(declarations).toContain('padding-block: var(--spacing-2)');
-    expect(declarations).toContain('padding-inline: var(--spacing-3)');
-  });
-
-  it('takes the compact density padding from the table', () => {
-    const {container} = render(
-      <Table data={users} columns={columns} density="compact" />,
-    );
-    const declarations = headerCellDeclarations(container);
-    expect(declarations).toContain('padding-block: var(--spacing-1)');
-    expect(declarations).toContain('padding-inline: var(--spacing-2)');
-  });
-
-  it('takes the spacious density padding from the table', () => {
-    const {container} = render(
-      <Table data={users} columns={columns} density="spacious" />,
-    );
-    const declarations = headerCellDeclarations(container);
-    expect(declarations).toContain('padding-block: var(--spacing-3)');
-    expect(declarations).toContain('padding-inline: var(--spacing-4)');
-  });
-
-  it('applies the header font weight and color inside a table', () => {
-    const {container} = render(<Table data={users} columns={columns} />);
-    const declarations = headerCellDeclarations(container);
-    expect(declarations).toContain('font-weight: var(--font-weight-semibold)');
-    expect(declarations).toContain('color: var(--color-text-secondary)');
-  });
-
-  it('draws the bottom divider even when the table has dividers off', () => {
-    const {container} = render(
-      <Table data={users} columns={columns} dividers="none" />,
-    );
-    const declarations = headerCellDeclarations(container);
-    // The header/body separator is unconditional inside a table.
-    expect(declarations).toContain('border-bottom-width: var(--border-width)');
-    expect(declarations).toContain('border-bottom-style: solid');
-    expect(declarations).toContain('border-bottom-color: var(--color-border)');
-    // …but the column divider is not.
-    expect(declarations.filter(d => d.includes('border-inline-end'))).toEqual(
-      [],
-    );
-  });
-
-  it('draws no column divider when the table divides rows only', () => {
-    const {container} = render(
-      <Table data={users} columns={columns} dividers="rows" />,
-    );
-    expect(
-      headerCellDeclarations(container).filter(d =>
-        d.includes('border-inline-end'),
-      ),
-    ).toEqual([]);
-  });
-
-  // StyleX packs the default and the `:last-child` override into one atomic
-  // class, so this reads the rules the header cells carry rather than
-  // comparing two cells — both carry byte-identical classes. The divider sits
-  // on the logical inline-end edge so it mirrors under RTL.
-  it('draws a column divider that the last header cell zeroes out', () => {
-    const {container} = render(
-      <Table data={users} columns={columns} dividers="columns" />,
-    );
-    const declarations = headerCellDeclarations(container);
-    expect(declarations).toContain(
-      'border-inline-end-width: var(--border-width)',
-    );
-    expect(declarations).toContain('border-inline-end-style: solid');
-    expect(declarations).toContain(
-      'border-inline-end-color: var(--color-border)',
-    );
-    expect(declarations).toContain(':last-child border-inline-end-width: 0');
-  });
-
-  it('draws a column divider when the table divides on a grid', () => {
-    const {container} = render(
-      <Table data={users} columns={columns} dividers="grid" />,
-    );
-    expect(headerCellDeclarations(container)).toContain(
-      'border-inline-end-width: var(--border-width)',
-    );
-  });
-
-  it('lets consumer xstyle win over the context header styling', () => {
-    const custom = stylex.create({trailing: {textAlign: 'end'}});
-    const {container} = render(
-      <Table>
-        <thead>
-          <tr>
-            <TableHeaderCell xstyle={custom.trailing}>Name</TableHeaderCell>
-          </tr>
-        </thead>
-      </Table>,
-    );
-    const declarations = headerCellDeclarations(container);
-    // The context sets `text-align: start`; xstyle merges on top of it.
-    expect(declarations).toContain('text-align: end');
-    expect(declarations).not.toContain('text-align: start');
-    // The rest of the context styling survives the override.
-    expect(declarations).toContain('padding-inline: var(--spacing-3)');
-  });
-
-  it('accepts an array of xstyle values', () => {
-    const custom = stylex.create({
-      caps: {textTransform: 'uppercase'},
-      spaced: {letterSpacing: '2px'},
-    });
-    const {container} = renderStandalone(
-      <TableHeaderCell xstyle={[custom.caps, custom.spaced]}>
-        Name
-      </TableHeaderCell>,
-    );
-    const th = container.querySelector('th') as HTMLElement;
-    expect(cssDeclarationsOf(th).sort()).toEqual([
-      'letter-spacing: 2px',
-      'text-transform: uppercase',
-    ]);
-  });
-
-  it('forwards the ref to the th element', () => {
-    const ref = vi.fn();
-    renderStandalone(<TableHeaderCell ref={ref}>Name</TableHeaderCell>);
-    expect(ref).toHaveBeenCalledWith(expect.any(HTMLTableCellElement));
-  });
-
-  it('spreads html attributes onto the th', () => {
-    const {container} = renderStandalone(
-      <TableHeaderCell
-        id="name-header"
-        aria-sort="ascending"
-        data-column-key="name">
-        Name
-      </TableHeaderCell>,
-    );
-    const th = container.querySelector('th') as HTMLElement;
-    expect(th.id).toBe('name-header');
-    expect(th).toHaveAttribute('aria-sort', 'ascending');
-    expect(th).toHaveAttribute('data-column-key', 'name');
-  });
-
-  it('keeps a consumer className and style alongside the astryx class', () => {
-    const {container} = renderStandalone(
-      <TableHeaderCell className="custom-header" style={{width: '10px'}}>
-        Name
-      </TableHeaderCell>,
-    );
-    const th = container.querySelector('th') as HTMLElement;
-    expect(th).toHaveClass('astryx-table-header-cell');
-    expect(th).toHaveClass('custom-header');
-    expect(th.style.width).toBe('10px');
-  });
-});

package/src/Table/TableSelectionToolbar.test.tsx

@@ -1,109 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file TableSelectionToolbar.test.tsx
- * @input Uses TableSelectionToolbar, Button, React Testing Library, Vitest
- * @output Behavior tests for the product-composed selection toolbar
- * @position Test file; validates state integration and Toolbar delegation
- */
-
-import {describe, expect, it, vi} from 'vitest';
-import {render, screen} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {Button} from '../Button';
-import {TableSelectionToolbar} from './TableSelectionToolbar';
-import type {TableSelectionState} from './plugins/selection/useTableSelectionState';
-
-function createSelectionState(
-  selectedKeys: ReadonlySet<string>,
-  clearSelection = vi.fn(),
-): TableSelectionState {
-  return {
-    selectedKeys,
-    selectedCount: selectedKeys.size,
-    hasSelection: selectedKeys.size > 0,
-    clearSelection,
-  };
-}
-
-describe('TableSelectionToolbar', () => {
-  it('renders nothing without a selection', () => {
-    render(
-      <TableSelectionToolbar
-        selection={createSelectionState(new Set())}
-        startContent={<Button label="Export" />}
-      />,
-    );
-
-    expect(
-      screen.queryByRole('toolbar', {name: 'Bulk actions'}),
-    ).not.toBeInTheDocument();
-  });
-
-  it('renders product actions with synchronized selection status', () => {
-    render(
-      <TableSelectionToolbar
-        selection={createSelectionState(new Set(['1', '2']))}
-        startContent={<Button label="Export" variant="ghost" />}
-      />,
-    );
-
-    const toolbar = screen.getByRole('toolbar', {name: 'Bulk actions'});
-    expect(toolbar).toHaveAttribute('data-size', 'sm');
-    expect(toolbar.closest('.astryx-section')).toHaveAttribute(
-      'data-variant',
-      'muted',
-    );
-    expect(screen.getByRole('button', {name: 'Export'})).toBeInTheDocument();
-    expect(screen.getByText('2 selected')).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {name: 'Unselect All'}),
-    ).toBeInTheDocument();
-  });
-
-  it('allows a custom selection label to render nothing', () => {
-    render(
-      <TableSelectionToolbar
-        selection={createSelectionState(new Set(['1']))}
-        renderSelectionLabel={() => null}
-      />,
-    );
-
-    expect(screen.queryByText('1 selected')).not.toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {name: 'Unselect All'}),
-    ).toBeInTheDocument();
-  });
-
-  it('clears the complete selection through the shared state output', async () => {
-    const user = userEvent.setup();
-    const clearSelection = vi.fn();
-    render(
-      <TableSelectionToolbar
-        selection={createSelectionState(new Set(['1']), clearSelection)}
-      />,
-    );
-
-    await user.click(screen.getByRole('button', {name: 'Unselect All'}));
-    expect(clearSelection).toHaveBeenCalledOnce();
-  });
-
-  it('supports product-specific toolbar, count, and clear labels', () => {
-    render(
-      <TableSelectionToolbar
-        selection={createSelectionState(new Set(['1', '2', '3']))}
-        label="Invoice actions"
-        renderSelectionLabel={count => `${count} invoices selected`}
-        clearLabel="Clear invoices"
-      />,
-    );
-
-    expect(
-      screen.getByRole('toolbar', {name: 'Invoice actions'}),
-    ).toBeInTheDocument();
-    expect(screen.getByText('3 invoices selected')).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {name: 'Clear invoices'}),
-    ).toBeInTheDocument();
-  });
-});

package/src/Table/__tests__/Table.a11y.chromium.spec.ts

@@ -1,129 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y scope ^(internal/a11y-spec/src/patterns/table\.|packages/core/src/Table/|apps/storybook/stories/TableA11y)
-
-/** Real-browser and accessibility-tree binding evidence for Table. */
-
-import {
-  expect,
-  test,
-  type CDPSession,
-  type Locator,
-  type Page,
-} from '@playwright/test';
-import {
-  blockingResults,
-  checkAccessibilitySpec,
-  formatFailures,
-  neverExercised,
-  summarize,
-  type BindingResult,
-} from '@astryxdesign/a11y-spec';
-import {
-  createChromiumHarness,
-  holdMotionStill,
-} from '@astryxdesign/a11y-spec/chromium';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-import {TABLE_A11Y_STATES, type TableA11yRow} from './Table.a11y.states';
-import {tableContractFor} from './Table.a11y.contracts';
-
-const SUBJECT_SELECTOR = '[data-a11y-table]';
-const ROWS = `${SUBJECT_SELECTOR} > thead > tr, ${SUBJECT_SELECTOR} > tbody > tr`;
-const COLUMN_HEADERS = `${SUBJECT_SELECTOR} > thead > tr > th`;
-const ROW_HEADERS = `${SUBJECT_SELECTOR} > tbody > tr > th`;
-const FIRST_ROW_CELLS = `${SUBJECT_SELECTOR} > tbody > tr:first-child > td`;
-let storybook: StaticServer;
-
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-
-test.afterAll(async () => storybook?.close());
-
-function storyUrl(id: string): string {
-  return `${storybook.origin}/iframe.html?id=${id}&viewMode=story`;
-}
-
-function relatedFor(page: Page, state: TableA11yRow): Record<string, Locator> {
-  const related: Record<string, Locator> = {};
-  const designate = (selector: string, prefix: string, count: number) => {
-    const elements = page.locator(selector);
-    for (let index = 0; index < count; index += 1) {
-      related[`${prefix}-${index}`] = elements.nth(index);
-    }
-  };
-  designate(ROWS, 'row', state.facts.rows);
-  designate(COLUMN_HEADERS, 'column-header', state.facts.columnHeaders.length);
-  designate(ROW_HEADERS, 'row-header', state.facts.rowHeaders.length);
-  designate(FIRST_ROW_CELLS, 'cell', state.facts.cells);
-  return related;
-}
-
-async function runState(
-  page: Page,
-  cdp: CDPSession,
-  state: TableA11yRow,
-): Promise<BindingResult> {
-  return checkAccessibilitySpec({
-    spec: tableContractFor(state),
-    binding: 'Table',
-    state: state.id,
-    facts: state.facts,
-    mount: async () => {
-      await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
-      await holdMotionStill(page);
-      const subject = page.locator(SUBJECT_SELECTOR);
-      await subject.waitFor({state: 'attached'});
-      await expect(subject).toHaveCount(1);
-      await expect(page.locator(ROWS)).toHaveCount(state.facts.rows);
-      await expect(page.locator(COLUMN_HEADERS)).toHaveCount(
-        state.facts.columnHeaders.length,
-      );
-      await expect(page.locator(ROW_HEADERS)).toHaveCount(
-        state.facts.rowHeaders.length,
-      );
-      await expect(page.locator(FIRST_ROW_CELLS)).toHaveCount(
-        state.facts.cells,
-      );
-      return createChromiumHarness({
-        page,
-        cdp,
-        subject,
-        related: relatedFor(page, state),
-      });
-    },
-  });
-}
-
-test('every Table expectation is exercised by at least one Table state', async ({
-  page,
-}) => {
-  const cdp = await page.context().newCDPSession(page);
-  const results: BindingResult[] = [];
-  for (const state of TABLE_A11Y_STATES) {
-    results.push(await runState(page, cdp, state));
-  }
-  expect(neverExercised(results)).toEqual([]);
-});
-
-for (const state of TABLE_A11Y_STATES) {
-  test(`Table [${state.id}] — ${state.summary}`, async ({page}) => {
-    const cdp = await page.context().newCDPSession(page);
-    const result = await runState(page, cdp, state);
-    const report = summarize(tableContractFor(state), [result]);
-    expect(formatFailures(blockingResults([result]))).toBe('');
-    expect(
-      result.results
-        .filter(row => row.status === 'fail')
-        .map(row => `${row.expectation}: ${row.detail ?? ''}`),
-      'this binding expects no failures',
-    ).toEqual([]);
-    expect(report.unrunLayers).toEqual([]);
-    expect(report.counts.unexpectedPass).toBe(0);
-  });
-}

package/src/Table/__tests__/Table.a11y.contracts.ts

@@ -1,35 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * The contract each Table binding state checks: the base table contract, plus
- * a module's contract for the states rendered with that module.
- */
-
-import {
-  TABLE_PATTERN,
-  type PatternContract,
-  type TableStateFacts,
-} from '@astryxdesign/a11y-spec';
-import {
-  TABLE_SORTABLE_PATTERN,
-  type TableSortFacts,
-} from '../plugins/sortable/__tests__/useTableSortable.a11y';
-import type {TableA11yState} from './Table.a11y.states';
-
-/** Whether a state renders with useTableSortable. */
-export function tableUsesSort(state: TableA11yState): boolean {
-  return state.modules.includes('sort');
-}
-
-export function tableContractFor(
-  state: TableA11yState,
-): PatternContract<TableStateFacts> {
-  return (
-    tableUsesSort(state) ? TABLE_SORTABLE_PATTERN : TABLE_PATTERN
-  ) as PatternContract<TableStateFacts>;
-}
-
-/** The sort a state declares, or none when it renders without the sort module. */
-export function tableSortFor(state: TableA11yState): TableSortFacts['sort'] {
-  return 'sort' in state.facts ? state.facts.sort : [];
-}

package/src/Table/__tests__/Table.a11y.renders.tsx

@@ -1,112 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/** Stable Table renders shared by jsdom, Storybook, and Chromium. */
-
-import {useState, type ReactElement} from 'react';
-import {useTableSortable, type TableSortState} from '../plugins/sortable';
-import {Table} from '../Table';
-import {TableBody} from '../TableBody';
-import {TableCell} from '../TableCell';
-import {TableHeader} from '../TableHeader';
-import {TableHeaderCell} from '../TableHeaderCell';
-import {TableRow} from '../TableRow';
-import type {TableColumn} from '../types';
-import type {TableA11yRow} from './Table.a11y.states';
-
-type Member = {name: string; role: string; location: string};
-
-const MEMBERS: Member[] = [
-  {name: 'Ada', role: 'Engineer', location: 'London'},
-  {name: 'Grace', role: 'Admiral', location: 'Arlington'},
-];
-
-const COLUMNS: TableColumn<Member>[] = [
-  {key: 'name', header: 'Name'},
-  {key: 'role', header: 'Role'},
-  {key: 'location', header: 'Location'},
-];
-
-const SORTABLE_COLUMNS: TableColumn<Member>[] = COLUMNS.map(column => ({
-  ...column,
-  sortable: true,
-}));
-
-// useTableSortable only exposes the sort state; the caller orders the data.
-// Rows follow the state so the exposed aria-sort always matches the rows.
-function sortMembers(members: Member[], sort: TableSortState): Member[] {
-  const [primary] = sort;
-  if (primary == null) {
-    return members;
-  }
-  const key = primary.sortKey as keyof Member;
-  const sign = primary.direction === 'descending' ? -1 : 1;
-  return [...members].sort(
-    (a, b) => sign * (a[key] < b[key] ? -1 : a[key] > b[key] ? 1 : 0),
-  );
-}
-
-function SortedTable(): ReactElement {
-  const [sort, setSort] = useState<TableSortState>([
-    {sortKey: 'name', direction: 'descending'},
-  ]);
-  const sortPlugin = useTableSortable<Member>({sort, onSortChange: setSort});
-  return (
-    <Table<Member>
-      data-a11y-table
-      aria-label="Team members"
-      columns={SORTABLE_COLUMNS}
-      data={sortMembers(MEMBERS, sort)}
-      plugins={{sort: sortPlugin}}
-    />
-  );
-}
-
-export const TABLE_A11Y_RENDERS: Readonly<
-  Record<TableA11yRow['id'], () => ReactElement>
-> = {
-  'data-columns': () => (
-    <Table<Member>
-      data-a11y-table
-      aria-label="Team members"
-      columns={COLUMNS}
-      data={MEMBERS}
-    />
-  ),
-  'sorted-descending': () => <SortedTable />,
-  'children-row-headers-rtl': () => (
-    <div dir="rtl">
-      <h2 id="a11y-table-quarterly-heading">Quarterly totals</h2>
-      <Table data-a11y-table aria-labelledby="a11y-table-quarterly-heading">
-        <TableHeader>
-          <TableRow>
-            <TableHeaderCell>Region</TableHeaderCell>
-            <TableHeaderCell>Q1</TableHeaderCell>
-            <TableHeaderCell>Q2</TableHeaderCell>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableHeaderCell scope="row">North</TableHeaderCell>
-            <TableCell>120</TableCell>
-            <TableCell>135</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableHeaderCell scope="row">South</TableHeaderCell>
-            <TableCell>98</TableCell>
-            <TableCell>104</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    </div>
-  ),
-  'empty-data': () => (
-    <Table<Member>
-      data-a11y-table
-      aria-label="Team members"
-      columns={COLUMNS}
-      data={[]}
-    />
-  ),
-};