@astryxdesign/core 0.1.7 → 0.1.8-canary.08a0957

package/src/Table/plugins/sortable/useTableSortable.test.tsx

@@ -12,11 +12,9 @@ import {render, screen, fireEvent} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {useState} from 'react';
 import {Table} from '../../Table';
+import {InternationalizationProvider} from '../../../i18n';
 import type {TableColumn} from '../../types';
-import {
-  useTableSortable,
-  type TableSortState,
-} from './useTableSortable';
+import {useTableSortable, type TableSortState} from './useTableSortable';
 
 // =============================================================================
 // Test Data
@@ -73,9 +71,7 @@ function SortableTable({
     isMultiSortEnabled,
   });
 
-  return (
-    <Table data={data} columns={columns} plugins={{sort: sortPlugin}} />
-  );
+  return <Table data={data} columns={columns} plugins={{sort: sortPlugin}} />;
 }
 
 // =============================================================================
@@ -672,11 +668,15 @@ describe('useTableSortable — context menu actions', () => {
 
     // Apply ascending → "Clear sort" now appears.
     fireEvent.click(
-      screen.getAllByRole('menuitem', {name: 'Sort ascending', hidden: true})[0],
+      screen.getAllByRole('menuitem', {
+        name: 'Sort ascending',
+        hidden: true,
+      })[0],
     );
     fireEvent.contextMenu(screen.getByText('Name'));
     expect(
-      screen.getAllByRole('menuitem', {name: 'Clear sort', hidden: true}).length,
+      screen.getAllByRole('menuitem', {name: 'Clear sort', hidden: true})
+        .length,
     ).toBeGreaterThan(0);
   });
 
@@ -709,3 +709,89 @@ describe('useTableSortable — context menu actions', () => {
     expect(onSortChange).toHaveBeenLastCalledWith([]);
   });
 });
+
+// =============================================================================
+// i18n (header-button aria-labels route through the catalog)
+// =============================================================================
+
+describe('useTableSortable — i18n', () => {
+  it('localizes the unsorted sort-by aria-label via @astryx.table.sort.sortBy', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {'@astryx.table.sort.sortBy': 'Trier par {label}'},
+        }}>
+        <SortableTable />
+      </InternationalizationProvider>,
+    );
+
+    expect(
+      screen.getByRole('button', {name: 'Trier par Name'}),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {name: 'Trier par Age'}),
+    ).toBeInTheDocument();
+  });
+
+  it('localizes the multi-sort priority aria-label with ICU number args', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {
+            '@astryx.table.sort.sortedByWithPriority':
+              'Trier par {label}, tri {direction}, priorité {rank, number} sur {total, number}',
+            '@astryx.table.sort.direction.ascending': 'croissant',
+            '@astryx.table.sort.direction.descending': 'décroissant',
+          },
+        }}>
+        <SortableTable
+          isMultiSortEnabled
+          initialSort={[
+            {sortKey: 'name', direction: 'ascending'},
+            {sortKey: 'age', direction: 'descending'},
+          ]}
+        />
+      </InternationalizationProvider>,
+    );
+
+    // The overridden direction words deliberately differ from the raw enum
+    // values ('ascending'/'descending'), so an implementation interpolating
+    // the enum without translating it cannot pass — for either direction.
+    expect(
+      screen.getByRole('button', {
+        name: 'Trier par Name, tri croissant, priorité 1 sur 2',
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {
+        name: 'Trier par Age, tri décroissant, priorité 2 sur 2',
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('localizes the sorted aria-label and direction word via their own keys', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {
+            '@astryx.table.sort.sortedBy': 'Trié par {label}, {direction}',
+            '@astryx.table.sort.direction.ascending': 'croissant',
+          },
+        }}>
+        <SortableTable
+          initialSort={[{sortKey: 'name', direction: 'ascending'}]}
+        />
+      </InternationalizationProvider>,
+    );
+
+    // Both the composed template and the direction word resolve through
+    // their own catalog keys; 'croissant' differs from the raw enum value,
+    // so neither a hardcoded English frame nor raw-enum interpolation passes.
+    expect(
+      screen.getByRole('button', {name: 'Trié par Name, croissant'}),
+    ).toBeInTheDocument();
+  });
+});

package/src/Table/plugins/sortable/useTableSortable.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file useTableSortable.tsx
- * @input React, types, Icon, theme tokens
+ * @input React, types, Icon, theme tokens, i18n (useTranslator)
  * @output Exports useTableSortable hook and sort-related types
  * @position Sortable plugin; consumed by Table via plugins prop
  *
@@ -18,7 +18,7 @@ import * as stylex from '@stylexjs/stylex';
 import {colorVars, spacingVars, radiusVars} from '../../../theme/tokens.stylex';
 import {Icon} from '../../../Icon';
 import {resolveContextActions} from '../../tableContextMenu';
-import {useTranslator} from '../../../i18n';
+import {useTranslator, type TranslatorFn} from '../../../i18n';
 import type {
   TablePlugin,
   HeaderCellRenderProps,
@@ -184,6 +184,7 @@ function getHeaderLabel<T extends Record<string, unknown>>(
 }
 
 function buildAriaLabel<T extends Record<string, unknown>>(
+  t: TranslatorFn,
   column: TableColumn<T>,
   direction: TableSortDirection | null,
   rank: number | null,
@@ -191,13 +192,21 @@ function buildAriaLabel<T extends Record<string, unknown>>(
 ): string {
   const label = getHeaderLabel(column);
   if (direction == null) {
-    return `Sort by ${label}`;
+    return t('@astryx.table.sort.sortBy', {label});
   }
-  let ariaLabel = `Sort by ${label}, sorted ${direction}`;
+  const directionLabel =
+    direction === 'ascending'
+      ? t('@astryx.table.sort.direction.ascending')
+      : t('@astryx.table.sort.direction.descending');
   if (rank != null && total > 1) {
-    ariaLabel += `, priority ${rank} of ${total}`;
+    return t('@astryx.table.sort.sortedByWithPriority', {
+      label,
+      direction: directionLabel,
+      rank,
+      total,
+    });
   }
-  return ariaLabel;
+  return t('@astryx.table.sort.sortedBy', {label, direction: directionLabel});
 }
 
 function getNextDirection(
@@ -227,6 +236,7 @@ function SortHeaderButton<T extends Record<string, unknown>>({
   children: ReactNode;
   configRef: React.RefObject<UseTableSortableConfig>;
 }) {
+  const t = useTranslator();
   const config = configRef.current;
   const sortKey = resolveSortKey(column) ?? '';
   const entryIndex = config.sort.findIndex(e => e.sortKey === sortKey);
@@ -244,7 +254,13 @@ function SortHeaderButton<T extends Record<string, unknown>>({
         ? 'arrowDown'
         : 'arrowsUpDown';
 
-  const ariaLabel = buildAriaLabel(column, direction, rank, config.sort.length);
+  const ariaLabel = buildAriaLabel(
+    t,
+    column,
+    direction,
+    rank,
+    config.sort.length,
+  );
 
   const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
     const cfg = configRef.current;

package/src/Table/plugins/tree/index.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export {useTableTreeData} from './useTableTreeData';
+export type {
+  TableTreeRowMeta,
+  UseTableTreeDataConfig,
+} from './useTableTreeData';
+export {useTableTreeState} from './useTableTreeState';
+export type {
+  UseTableTreeStateConfig,
+  UseTableTreeStateResult,
+} from './useTableTreeState';

package/src/Table/plugins/tree/useTableTreeData-perf.test.tsx

@@ -0,0 +1,163 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useTableTreeData-perf.test.tsx
+ * @input Table, useTableTreeData, useTableTreeState, React testing utilities
+ * @output Performance tests for tree plugin render behavior
+ * @position Test file; validates toggle render efficiency and DOM cost
+ *
+ * The tree plugin uses an external store so a toggle re-renders only the
+ * affected cells — not the whole table body. Note: expanding inserts rows,
+ * which shifts the rowIndex of every row *after* the insertion point (the
+ * row memo comparator includes rowIndex by design), so the guarantee is
+ * scoped to rows before the toggled row.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {render, screen, act} from '@testing-library/react';
+import {useMemo} from 'react';
+import userEvent from '@testing-library/user-event';
+import {Table} from '../../Table';
+import type {TableColumn} from '../../types';
+import {useTableTreeData} from './useTableTreeData';
+import {useTableTreeState} from './useTableTreeState';
+
+interface TreeRow extends Record<string, unknown> {
+  id: string;
+  name: string;
+  children?: TreeRow[];
+}
+
+/** 5 roots; the last root has 2 children. */
+const roots: TreeRow[] = [
+  ...Array.from({length: 4}, (_, i) => ({
+    id: `root-${i}`,
+    name: `Root ${i}`,
+  })),
+  {
+    id: 'root-4',
+    name: 'Root 4',
+    children: [
+      {id: 'child-0', name: 'Child 0'},
+      {id: 'child-1', name: 'Child 1'},
+    ],
+  },
+];
+
+function TreeRenderCountTable({
+  renderCounts,
+}: {
+  renderCounts: Record<string, number>;
+}) {
+  const columns = useMemo<TableColumn<TreeRow>[]>(
+    () => [
+      {
+        key: 'name',
+        header: 'Name',
+        renderCell: (item: TreeRow) => {
+          renderCounts[item.id] = (renderCounts[item.id] ?? 0) + 1;
+          return item.name;
+        },
+      },
+    ],
+    [renderCounts],
+  );
+
+  const {visibleData, treeConfig} = useTableTreeState<TreeRow>({
+    data: roots,
+    idKey: 'id',
+  });
+  const tree = useTableTreeData(treeConfig);
+
+  return (
+    <Table data={visibleData} columns={columns} idKey="id" plugins={{tree}} />
+  );
+}
+
+describe('Tree plugin render performance', () => {
+  it('expanding the last root does not re-render preceding rows', async () => {
+    const user = userEvent.setup();
+    const renderCounts: Record<string, number> = {};
+
+    render(<TreeRenderCountTable renderCounts={renderCounts} />);
+
+    const initialCounts = {...renderCounts};
+    expect(Object.keys(initialCounts)).toHaveLength(5);
+
+    await act(async () => {
+      await user.click(screen.getByRole('button', {name: 'Expand row'}));
+    });
+
+    for (let i = 0; i < 4; i++) {
+      expect(renderCounts[`root-${i}`]).toBe(initialCounts[`root-${i}`]);
+    }
+    // The children mounted exactly once.
+    expect(renderCounts['child-0']).toBe(1);
+    expect(renderCounts['child-1']).toBe(1);
+  });
+
+  it('collapsing unmounts the subtree rows entirely', async () => {
+    const user = userEvent.setup();
+    const renderCounts: Record<string, number> = {};
+
+    render(<TreeRenderCountTable renderCounts={renderCounts} />);
+
+    await act(async () => {
+      await user.click(screen.getByRole('button', {name: 'Expand row'}));
+    });
+    expect(screen.getAllByRole('row')).toHaveLength(8); // header + 5 roots + 2 children
+
+    await act(async () => {
+      await user.click(screen.getByRole('button', {name: 'Collapse row'}));
+    });
+    expect(screen.getAllByRole('row')).toHaveLength(6); // header + 5 roots
+  });
+
+  it('adds at most one wrapper, one expander/spacer to the tree column and zero DOM to other columns', () => {
+    const {container} = render(
+      <Table
+        data={
+          [{id: 'a', name: 'a', children: [{id: 'b', name: 'b'}]}] as TreeRow[]
+        }
+        columns={[
+          {key: 'name', header: 'Name'},
+          {key: 'id', header: 'Id'},
+        ]}
+        idKey="id"
+        plugins={{}}
+      />,
+    );
+    const plainSecondCellHTML =
+      container.querySelectorAll('tbody td')[1].innerHTML;
+
+    function DomBudgetTable() {
+      const {visibleData, treeConfig} = useTableTreeState<TreeRow>({
+        data: [{id: 'a', name: 'a', children: [{id: 'b', name: 'b'}]}],
+        idKey: 'id',
+      });
+      const tree = useTableTreeData(treeConfig);
+      return (
+        <Table
+          data={visibleData}
+          columns={[
+            {key: 'name', header: 'Name'},
+            {key: 'id', header: 'Id'},
+          ]}
+          idKey="id"
+          plugins={{tree}}
+        />
+      );
+    }
+    const {container: treeContainer} = render(<DomBudgetTable />);
+    const cells = treeContainer.querySelectorAll('tbody td');
+
+    // Tree column: one flex wrapper containing one expander button + text.
+    const wrapper = cells[0].firstElementChild as HTMLElement;
+    expect(wrapper.tagName).toBe('DIV');
+    expect(wrapper.children).toHaveLength(1);
+    expect(wrapper.querySelector('button')).not.toBeNull();
+
+    // Other columns: byte-identical to the plugin-free render.
+    expect(cells[1].innerHTML).toBe(plainSecondCellHTML);
+  });
+});