@astryxdesign/core 0.1.6 → 0.1.7-canary.04cd8f7

package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx

@@ -21,6 +21,7 @@ import {
 } from '../../../theme/tokens.stylex';
 import {Icon} from '../../../Icon';
 import type {TablePlugin} from '../../types';
+import {useTranslator} from '../../../i18n';
 
 // A synthetic group-header row injected into the flattened data. Real rows
 // never carry this marker.
@@ -180,7 +181,7 @@ const styles = stylex.create({
  * pass all three to `<Table>`.
  *
  * @example
- * ```tsx
+ * ```
  * const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
  * const grouped = useTableGroupedRows({
  *   data: rows,
@@ -205,6 +206,7 @@ const styles = stylex.create({
 export function useTableGroupedRows<T extends Record<string, unknown>>(
   config: UseTableGroupedRowsConfig<T>,
 ): UseTableGroupedRowsResult<T> {
+  const t = useTranslator();
   const {
     data,
     groupBy,
@@ -305,7 +307,7 @@ export function useTableGroupedRows<T extends Record<string, unknown>>(
             onClick: toggle,
             'aria-expanded': !collapsed,
           },
-          styles: [...props.styles, styles.headerRow],
+          xstyle: [...props.xstyle, styles.headerRow],
           children: (
             // colSpan larger than the column count is clamped by the browser
             // to the actual number of columns, so the header always spans the
@@ -323,8 +325,8 @@ export function useTableGroupedRows<T extends Record<string, unknown>>(
                   }}
                   aria-label={
                     collapsed
-                      ? `Expand group ${header.groupKey}`
-                      : `Collapse group ${header.groupKey}`
+                      ? t('@astryx.tableGroupedRows.expandGroup', {groupKey: header.groupKey})
+                      : t('@astryx.tableGroupedRows.collapseGroup', {groupKey: header.groupKey})
                   }
                   aria-expanded={!collapsed}>
                   <span
@@ -342,7 +344,7 @@ export function useTableGroupedRows<T extends Record<string, unknown>>(
         };
       },
     }),
-    [collapsedGroups, onToggleGroup, renderGroupHeader],
+    [collapsedGroups, onToggleGroup, renderGroupHeader, t],
   );
 
   return {plugin, data: flattened, idKey};

package/src/Table/plugins/pagination/useTablePagination.tsx

@@ -22,6 +22,7 @@ import {spacingVars} from '../../../theme/tokens.stylex';
 import {Pagination} from '../../../Pagination';
 import type {PaginationProps} from '../../../Pagination';
 import type {TablePlugin} from '../../types';
+import {useTranslator} from '../../../i18n';
 
 // =============================================================================
 // Styles
@@ -193,6 +194,7 @@ export interface UseTablePaginationConfig {
 export function useTablePagination<T extends Record<string, unknown>>(
   config: UseTablePaginationConfig,
 ): TablePlugin<T> {
+  const t = useTranslator();
   const {
     page,
     onPageChange,
@@ -206,8 +208,9 @@ export function useTablePagination<T extends Record<string, unknown>>(
     size = 'md',
     position = 'below',
     align = 'center',
-    label = 'Table pagination',
+    label: labelFromProps,
   } = config;
+  const label = labelFromProps ?? t('@astryx.table.pagination.label');
 
   // Same guard as Pagination itself: 0/NaN/negative pageSize would produce an
   // Infinity/NaN totalPages here, which bypasses Pagination's own coercion

package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx

@@ -17,6 +17,7 @@ import * as stylex from '@stylexjs/stylex';
 import {spacingVars, colorVars, radiusVars} from '../../../theme/tokens.stylex';
 import {Icon} from '../../../Icon';
 import {resolveContextActions} from '../../tableContextMenu';
+import {useTranslator} from '../../../i18n';
 import type {
   TablePlugin,
   TableColumn,
@@ -356,6 +357,7 @@ function ExpansionChevron({
 export function useTableRowExpansion<T extends Record<string, unknown>>(
   config: UseTableRowExpansionConfig<T>,
 ): TablePlugin<T> {
+  const t = useTranslator();
   const {
     expandedKeys,
     onToggle,
@@ -397,7 +399,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
           <ExpansionChevron
             isExpanded={isExpanded}
             onToggle={() => onToggle(key)}
-            ariaLabel={isExpanded ? 'Collapse row' : 'Expand row'}
+            ariaLabel={isExpanded ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow')}
           />
         );
       },
@@ -409,6 +411,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
       getChildren,
       getIsItemExpandable,
       getDepth,
+      t,
     ],
   );
 
@@ -436,10 +439,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
                 ? originalRenderCell(item)
                 : String(
                     ((item as Record<string, unknown>)[col.key] as
-                      | string
-                      | number
-                      | null
-                      | undefined) ?? '',
+                      string | number | null | undefined) ?? '',
                   );
 
               if (depth === 0) {
@@ -457,7 +457,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
                 <ExpansionChevron
                   isExpanded={isExpanded}
                   onToggle={() => onToggle(key)}
-                  ariaLabel={isExpanded ? 'Collapse row' : 'Expand row'}
+                  ariaLabel={isExpanded ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow')}
                 />
               ) : (
                 <span {...stylex.props(expansionStyles.placeholder)} />
@@ -499,7 +499,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
                 {...stylex.props(expansionStyles.chevronButton)}
                 onClick={() => onToggleExpandAll(!allExpanded)}
                 aria-label={
-                  allExpanded ? 'Collapse all rows' : 'Expand all rows'
+                  allExpanded ? t('@astryx.tableRowExpansion.collapseAllRows') : t('@astryx.tableRowExpansion.expandAllRows')
                 }>
                 <span
                   {...stylex.props(
@@ -570,7 +570,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
             ...props.htmlProps,
             onClick: () => onToggle(key),
           },
-          styles: [...props.styles, expansionStyles.clickableRow],
+          xstyle: [...props.xstyle, expansionStyles.clickableRow],
         };
       },
     }),
@@ -585,6 +585,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
       isAllExpanded,
       onToggleExpandAll,
       expansionColumn,
+      t,
     ],
   );
 }

package/src/Table/plugins/rowIndex/useTableRowIndex.tsx

@@ -62,7 +62,7 @@ const styles = stylex.create({
  * so it reflects the current sort / filter / pagination view.
  *
  * @example
- * ```tsx
+ * ```
  * const rowIndex = useTableRowIndex({data});
  * <Table data={data} columns={columns} idKey="id" plugins={{rowIndex}} />;
  * ```

package/src/Table/plugins/selection/useTableSelection.tsx

@@ -45,12 +45,9 @@ import * as stylex from '@stylexjs/stylex';
 import {colorVars} from '../../../theme/tokens.stylex';
 import {CheckboxInput} from '../../../CheckboxInput';
 import {mergeRefs} from '../../../utils';
-import type {
-  TablePlugin,
-  TableColumn,
-  BodyRowRenderProps,
-} from '../../types';
+import type {TablePlugin, TableColumn, BodyRowRenderProps} from '../../types';
 import {pixel} from '../../columnUtils';
+import {useTranslator} from '../../../i18n';
 
 // =============================================================================
 // Config Type
@@ -181,6 +178,7 @@ function SelectAllCheckboxInner<T extends Record<string, unknown>>({
 }: {
   store: SelectionStore<T>;
 }) {
+  const t = useTranslator();
   const getSnapshot = useCallback(() => {
     const config = store.getConfig();
     const allSelected = config.getIsAllSelected();
@@ -197,7 +195,7 @@ function SelectAllCheckboxInner<T extends Record<string, unknown>>({
 
   return (
     <CheckboxInput
-      label="Select all rows"
+      label={t('@astryx.table.selection.selectAllRows')}
       isLabelHidden
       value={allSelected ? true : indeterminate ? 'indeterminate' : false}
       onChange={() =>
@@ -232,6 +230,7 @@ function SelectionCellContentInner<T extends Record<string, unknown>>({
   store: SelectionStore<T>;
   item: T;
 }) {
+  const t = useTranslator();
   const config = store.getConfig();
   const isSelected = useIsItemSelected(store, item);
   const selectable = config.getIsItemSelectable?.(item) ?? true;
@@ -243,7 +242,7 @@ function SelectionCellContentInner<T extends Record<string, unknown>>({
 
   return (
     <CheckboxInput
-      label="Select row"
+      label={t('@astryx.table.selection.selectRow')}
       isLabelHidden
       value={isSelected}
       onChange={() =>

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

@@ -18,6 +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 type {
   TablePlugin,
   HeaderCellRenderProps,
@@ -344,6 +345,7 @@ export function useTableSortable<
   T extends Record<string, unknown>,
   TSortKey extends string = string,
 >(config: UseTableSortableConfig<TSortKey>): TablePlugin<T> {
+  const t = useTranslator();
   const configRef = useRef(config);
   configRef.current = config;
 
@@ -367,12 +369,13 @@ export function useTableSortable<
         // checked/clear state always reflects the latest sort.
         const getSortActions = (): TableContextAction[] => {
           const c = configRef.current;
-          const dir = c.sort.find(e => e.sortKey === sortKey)?.direction ?? null;
+          const dir =
+            c.sort.find(e => e.sortKey === sortKey)?.direction ?? null;
           const actions: TableContextAction[] = [
             {
               id: 'sort-asc',
               group: 'sort',
-              label: 'Sort ascending',
+              label: t('@astryx.table.sort.ascending'),
               icon: <Icon icon="arrowUp" size="xsm" aria-hidden />,
               checked: dir === 'ascending',
               onSelect: () =>
@@ -383,7 +386,7 @@ export function useTableSortable<
             {
               id: 'sort-desc',
               group: 'sort',
-              label: 'Sort descending',
+              label: t('@astryx.table.sort.descending'),
               icon: <Icon icon="arrowDown" size="xsm" aria-hidden />,
               checked: dir === 'descending',
               onSelect: () =>
@@ -396,7 +399,7 @@ export function useTableSortable<
             actions.push({
               id: 'sort-clear',
               group: 'sort-clear',
-              label: 'Clear sort',
+              label: t('@astryx.table.sort.clear'),
               icon: <Icon icon="close" size="xsm" aria-hidden />,
               onSelect: () =>
                 c.onSortChange(c.sort.filter(e => e.sortKey !== sortKey)),
@@ -430,6 +433,6 @@ export function useTableSortable<
         };
       },
     }),
-    [],
+    [t],
   );
 }

package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx

@@ -337,8 +337,8 @@ export function useTableStickyColumns<T extends Record<string, unknown>>(
             ...props.htmlProps,
             style: {...props.htmlProps.style, ...offsetStyle},
           },
-          styles: [
-            ...props.styles,
+          xstyle: [
+            ...props.xstyle,
             stickyStyles.cell,
             stickyStyles.headerCell,
             side.edge === 'start' ? shadowStyles.start : shadowStyles.end,
@@ -365,8 +365,8 @@ export function useTableStickyColumns<T extends Record<string, unknown>>(
             ...props.htmlProps,
             style: {...props.htmlProps.style, ...offsetStyle},
           },
-          styles: [
-            ...props.styles,
+          xstyle: [
+            ...props.xstyle,
             stickyStyles.cell,
             stickyStyles.bodyCell,
             side.edge === 'start' ? shadowStyles.start : shadowStyles.end,

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);
+  });
+});