@astryxdesign/core 0.2.0 → 0.3.0-canary.0b5a38e

package/src/TabList/TabMenu.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'TabMenu',

package/src/TabList/TabMenu.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/TabList/TabList.doc.mjs
  * - /packages/core/src/TabList/index.ts
  * - /packages/core/src/TabList/TabList.test.tsx
- * - /packages/cli/templates/blocks/components/TabList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TabList/ (showcase blocks)
  */
 
 import React, {useCallback, useId, useRef, type ReactNode} from 'react';
@@ -31,6 +31,7 @@ import {
   typeScaleVars,
 } from '../theme/tokens.stylex';
 import {usePopover} from '../Popover/usePopover';
+import {MENU_ITEM_SELECTOR} from '../DropdownMenu/menuItemRoles';
 import {useListFocus} from '../hooks/useListFocus';
 import {useTabListContext} from './TabListContext';
 import type {TabListSize} from './TabListContext';
@@ -291,6 +292,9 @@ export function TabMenu({
     focusFirst,
   } = useListFocus<HTMLDivElement>({
     hasRovingTabIndex: true,
+    // Options render as menuitemradio (single-select menu), which the
+    // default '[role="menuitem"]' selector would not match.
+    itemSelector: MENU_ITEM_SELECTOR,
     onEscape: () => popover.hide(),
   });
 
@@ -409,9 +413,13 @@ export function TabMenu({
             return (
               <div
                 key={option.value}
-                role="menuitem"
+                // The menu is single-select: exactly one option can be the
+                // active tab, so options are radio menu items with
+                // aria-checked (APG menu-button), not plain menuitems with
+                // aria-current.
+                role="menuitemradio"
                 tabIndex={-1}
-                aria-current={isSelected ? 'true' : undefined}
+                aria-checked={isSelected}
                 onClick={() => handleSelect(option.value)}
                 onKeyDown={e => {
                   if (e.key === 'Enter' || e.key === ' ') {

package/src/Table/BaseTable.tsx

@@ -11,7 +11,7 @@
  * - /packages/core/src/Table/Table.doc.mjs (component description, props)
  * - /packages/core/src/Table/Table.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Table/index.ts (exports if types change)
- * - /packages/cli/templates/blocks/components/Table/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
 import {memo, useRef, type ReactElement, type ReactNode, type Ref} from 'react';
@@ -331,7 +331,6 @@ function BaseTableInner<T extends Record<string, unknown>>({
   idKey,
   plugins: pluginsProp,
   children,
-  tableProps: userTableProps,
   textOverflow = 'wrap',
   scrollWrapper: ScrollWrapper,
   emptyState,
@@ -394,7 +393,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
 
   // --- Plugin pipeline: table ---
   const tableRenderProps = applyPlugins(plugins, p => p.transformTable, {
-    htmlProps: {...userTableProps},
+    htmlProps: {},
     xstyle: children ? [styles.table, styles.tableAutoLayout] : [styles.table],
   } satisfies TableRenderProps);
 
@@ -498,8 +497,8 @@ function BaseTableInner<T extends Record<string, unknown>>({
   const hasData = data != null && data.length > 0;
   const hasColumns = resolvedColumns.length > 0;
 
-  // Style precedence: deprecated tableProps.style < consumer style < the
-  // computed column min-width (structural — derived from column defs, so it
+  // Style precedence: consumer style < the computed column min-width
+  // (structural — derived from column defs, so it
   // must win when present; when absent, a consumer minWidth survives).
   const tableStyle: React.CSSProperties = {
     ...tableRenderProps.htmlProps.style,

package/src/Table/Table.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Table',
@@ -31,8 +31,8 @@ export const docs = {
       {className: 'astryx-table-body'},
       {className: 'astryx-table-footer'},
       {className: 'astryx-table-row'},
-      {className: 'astryx-table-cell'},
-      {className: 'astryx-table-header-cell'},
+      {className: 'astryx-table-cell', visualProps: ['density']},
+      {className: 'astryx-table-header-cell', visualProps: ['density']},
     ],
   },
   description: 'Styled, data-driven table with density, dividers, hover highlight, striped rows, and named plugin support. T must extend Record<string, unknown>.',
@@ -152,7 +152,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -174,7 +174,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Data-driven table w/ rich cell content via renderCell. Compose cells w/ Badge, StatusDot, Text, Avatar, layout primitives. BaseTable provides unstyled structural core w/ composable plugin pipeline.',
   usage: {

package/src/Table/Table.test.tsx

@@ -401,20 +401,6 @@ describe('BaseTable', () => {
     expect(ref).toHaveBeenCalledWith(expect.any(HTMLTableElement));
   });
 
-  it('passes tableProps to the table element', () => {
-    render(
-      <BaseTable
-        data={users}
-        columns={columns}
-        tableProps={{'aria-label': 'Users table'}}
-      />,
-    );
-    expect(screen.getByRole('table')).toHaveAttribute(
-      'aria-label',
-      'Users table',
-    );
-  });
-
   describe('root element styling props (#3679)', () => {
     it('applies className to the table element', () => {
       render(<Table data={users} columns={columns} className="custom-table" />);
@@ -446,27 +432,6 @@ describe('BaseTable', () => {
       expect(table).toHaveAttribute('data-analytics', 'tables');
     });
 
-    it('composes with deprecated tableProps, direct props winning conflicts', () => {
-      render(
-        <Table
-          data={users}
-          columns={columns}
-          className="direct"
-          style={{opacity: 1}}
-          tableProps={{
-            className: 'legacy',
-            style: {color: 'red', opacity: 0.5},
-          }}
-        />,
-      );
-      const table = screen.getByRole('table');
-      expect(table.className).toContain('legacy');
-      expect(table.className).toContain('direct');
-      // Direct style wins the conflicting key; non-conflicting legacy survives.
-      expect(table.style.opacity).toBe('1');
-      expect(table.style.color).toBe('red');
-    });
-
     it('keeps the computed column min-width over a consumer style.minWidth', () => {
       const {tableMinWidth} = resolveColumnWidths(columns);
       render(
@@ -483,20 +448,6 @@ describe('BaseTable', () => {
       expect(screen.getByRole('table').style.minWidth).toBe('10px');
     });
 
-    it('direct id and aria attributes beat the same keys in tableProps', () => {
-      render(
-        <Table
-          data={users}
-          columns={columns}
-          id="direct-id"
-          aria-label="Direct"
-          tableProps={{id: 'legacy-id', 'aria-label': 'Legacy'}}
-        />,
-      );
-      const table = screen.getByRole('table', {name: 'Direct'});
-      expect(table.id).toBe('direct-id');
-    });
-
     it('keeps the astryx theme classes alongside a consumer className', () => {
       render(<Table data={users} columns={columns} className="custom-table" />);
       const table = screen.getByRole('table');
@@ -886,6 +837,33 @@ describe('Table', () => {
       render(<Table data={users} columns={columns} density="spacious" />);
       expect(screen.getAllByRole('row')).toHaveLength(4);
     });
+
+    it('reflects density as data-density on cells and header cells (theme hook)', () => {
+      // The density lives in internal StyleX classes, so cells expose it as a
+      // data-density attribute on the stable astryx-table-cell /
+      // astryx-table-header-cell targets. This lets a theme override padding
+      // per density (e.g. hold the inline inset while varying the block) via
+      // `defineTheme` — the padding split is otherwise unreachable.
+      const {rerender} = render(
+        <Table data={users} columns={columns} density="spacious" />,
+      );
+      const cell = screen.getAllByRole('cell')[0];
+      const header = screen.getAllByRole('columnheader')[0];
+      expect(cell.className).toContain('astryx-table-cell');
+      expect(cell).toHaveAttribute('data-density', 'spacious');
+      expect(header.className).toContain('astryx-table-header-cell');
+      expect(header).toHaveAttribute('data-density', 'spacious');
+
+      rerender(<Table data={users} columns={columns} density="compact" />);
+      expect(screen.getAllByRole('cell')[0]).toHaveAttribute(
+        'data-density',
+        'compact',
+      );
+      expect(screen.getAllByRole('columnheader')[0]).toHaveAttribute(
+        'data-density',
+        'compact',
+      );
+    });
   });
 
   describe('dividers', () => {

package/src/Table/Table.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/Table/Table.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Table/index.ts (exports if types change)
  * - /apps/storybook/stories/Table.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Table/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
 import {useMemo, type ReactElement, type Ref} from 'react';

package/src/Table/TableCell.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'TableCell',

package/src/Table/TableCell.tsx

@@ -11,7 +11,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Table/Table.doc.mjs
  * - /packages/core/src/Table/index.ts
- * - /packages/cli/templates/blocks/components/Table/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';
@@ -252,7 +252,7 @@ export function TableCell({
       ref={ref}
       {...props}
       {...mergeProps(
-        themeProps('table-cell'),
+        themeProps('table-cell', {density: ctx?.density}),
         stylex.props(...mergeXStyle(cellStyles, xstyle)),
         incomingClassName,
         incomingStyle,

package/src/Table/TableHeaderCell.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'TableHeaderCell',

package/src/Table/TableHeaderCell.tsx

@@ -11,7 +11,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Table/Table.doc.mjs
  * - /packages/core/src/Table/index.ts
- * - /packages/cli/templates/blocks/components/Table/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';
@@ -157,7 +157,7 @@ export function TableHeaderCell({
       ref={ref}
       {...props}
       {...mergeProps(
-        themeProps('table-header-cell'),
+        themeProps('table-header-cell', {density: ctx?.density}),
         stylex.props(...mergeXStyle(cellStyles, xstyle)),
         incomingClassName,
         incomingStyle,

package/src/Table/TableRow.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'TableRow',

package/src/Table/TableRow.tsx

@@ -11,7 +11,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Table/Table.doc.mjs
  * - /packages/core/src/Table/index.ts
- * - /packages/cli/templates/blocks/components/Table/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
 import {use, type ReactNode} from 'react';

package/src/Table/index.ts

@@ -28,11 +28,11 @@ export {useTableColumnResize} from './plugins/columnResize';
 export {useTableStickyColumns} from './plugins/stickyColumns';
 export {useTableGroupedRows} from './plugins/groupedRows';
 export {useTableRowIndex} from './plugins/rowIndex';
-export {useTableRowStatus} from './plugins/rowStatus';
 export {
   useTableRowExpansion,
   useTableRowExpansionState,
 } from './plugins/rowExpansion';
+export {useTableRowStatus} from './plugins/rowStatus';
 export {useTableTreeData, useTableTreeState} from './plugins/tree';
 export {resolveContextActions} from './tableContextMenu';
 export {

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

@@ -177,7 +177,7 @@ const styles = stylex.create({
  * toggle, the group label, and a member count; collapsing hides that group's
  * data rows while keeping the header visible.
  *
- * Mirrors {@link useTableRowExpansionState}: the consumer owns the
+ * Mirrors other controlled Table state helpers: the consumer owns the
  * `collapsedGroups` set and this hook returns `{data, plugin, idKey}` —
  * pass all three to `<Table>`.
  *

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

@@ -9,6 +9,7 @@ import {
   useTableRowExpansion,
   useTableRowExpansionState,
 } from './useTableRowExpansion';
+import {InternationalizationProvider} from '../../../i18n';
 
 // popover mock for context-menu tests
 beforeEach(() => {
@@ -118,6 +119,24 @@ describe('useTableRowExpansion', () => {
     expect(items.length).toBeGreaterThan(0);
   });
 
+  it('localizes the context-menu action label through the i18n catalog', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {'@astryx.tableRowExpansion.expandRow': 'Développer la ligne'},
+        }}>
+        <Harness />
+      </InternationalizationProvider>,
+    );
+    fireEvent.contextMenu(screen.getByText('Folder A'));
+    const items = screen.getAllByRole('menuitem', {
+      name: /Développer la ligne/,
+      hidden: true,
+    });
+    expect(items.length).toBeGreaterThan(0);
+  });
+
   it('does not show chevron for leaf nodes', () => {
     render(<Harness />);
     // Leaf C has no children

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

@@ -7,6 +7,9 @@
  * @input React, StyleX, Icon, Table types
  * @output Exports useTableRowExpansion hook + config/state types
  * @position Row-expansion plugin; consumed by Table via plugins prop
+ * @deprecated Superseded by the tree plugin (useTableTreeData +
+ *   useTableTreeState). Kept for back-compat; new tree tables should use the
+ *   tree plugin. See the migration guide on useTableRowExpansion.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Table/index.ts (exports)
@@ -106,9 +109,14 @@ export interface UseTableRowExpansionStateResult<
 
 /**
  * Manages row-expansion state and derives the config for
- * {@link useTableRowExpansion}. This is the recommended entry point — it
- * removes the boilerplate of flattening the tree, tracking depth, and
- * computing the expand-all state.
+ * {@link useTableRowExpansion}.
+ *
+ * @deprecated Use `useTableTreeState` (with `useTableTreeData`) instead. The
+ * tree plugin covers the same affordances (expand-all header control,
+ * whole-row click) with a cycle guard and per-row fine-grained re-render. See
+ * the migration guide on `useTableRowExpansion` (`astryx component
+ * useTableRowExpansion --detail full`) for the before/after and config
+ * mapping.
  *
  * @example
  * ```
@@ -379,6 +387,16 @@ function ExpansionChevron({
 // Hook
 // =============================================================================
 
+/**
+ * Returns a TablePlugin implementing expandable rows with inherited columns.
+ *
+ * @deprecated Use `useTableTreeData` (with `useTableTreeState`) instead. The
+ * tree plugin covers the same affordances (expand-all header control,
+ * whole-row click) with a cycle guard and per-row fine-grained re-render. See
+ * the migration guide on this hook's docs (`astryx component
+ * useTableRowExpansion --detail full`) for the before/after and config
+ * mapping.
+ */
 export function useTableRowExpansion<T extends Record<string, unknown>>(
   config: UseTableRowExpansionConfig<T>,
 ): TablePlugin<T> {
@@ -576,15 +594,16 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
             {
               id: 'row-expansion-toggle',
               group: 'row-expansion',
-              label: isExpanded ? 'Collapse row' : 'Expand row',
+              label: isExpanded
+                ? t('@astryx.tableRowExpansion.collapseRow')
+                : t('@astryx.tableRowExpansion.expandRow'),
               icon: (
-                <span {...stylex.props(rtlStyles.mirror)}>
-                  <Icon
-                    icon={isExpanded ? 'chevronDown' : 'chevronRight'}
-                    size="xsm"
-                    aria-hidden
-                  />
-                </span>
+                <Icon
+                  icon={isExpanded ? 'chevronDown' : 'chevronRight'}
+                  size="xsm"
+                  aria-hidden
+                  xstyle={rtlStyles.mirror}
+                />
               ),
               onSelect: () => onToggle(key),
             },

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

@@ -58,15 +58,20 @@ function TreeTable(
   props: Partial<UseTableTreeStateConfig<FileRow>> & {
     data?: FileRow[];
     hasExpandAllControl?: boolean;
+    hasRowClickExpansion?: boolean;
   },
 ) {
-  const {hasExpandAllControl, ...stateProps} = props;
+  const {hasExpandAllControl, hasRowClickExpansion, ...stateProps} = props;
   const {visibleData, treeConfig} = useTableTreeState<FileRow>({
     data: props.data ?? fileTree,
     idKey: 'id',
     ...stateProps,
   });
-  const tree = useTableTreeData({...treeConfig, hasExpandAllControl});
+  const tree = useTableTreeData({
+    ...treeConfig,
+    hasExpandAllControl,
+    hasRowClickExpansion,
+  });
 
   return (
     <Table data={visibleData} columns={columns} idKey="id" plugins={{tree}} />
@@ -153,6 +158,160 @@ describe('useTableTreeData — expander', () => {
   });
 });
 
+// =============================================================================
+// Whole-row-click expansion
+// =============================================================================
+
+describe('useTableTreeData — row-click expansion', () => {
+  it('does not toggle on row click when hasRowClickExpansion is unset', async () => {
+    const user = userEvent.setup();
+    render(<TreeTable />);
+
+    await user.click(within(getRowByText('src')).getByText('src'));
+
+    // Row body click is inert by default: subtree stays collapsed.
+    expect(screen.queryByText('components')).toBeNull();
+    expect(
+      within(getRowByText('src')).getByRole('button', {name: 'Expand row'}),
+    ).toBeInTheDocument();
+  });
+
+  it('expands an expandable row when its body is clicked', async () => {
+    const user = userEvent.setup();
+    render(<TreeTable hasRowClickExpansion />);
+
+    await user.click(within(getRowByText('src')).getByText('src'));
+
+    expect(screen.getByText('components')).toBeInTheDocument();
+    expect(screen.getByText('utils.ts')).toBeInTheDocument();
+    expect(
+      within(getRowByText('src')).getByRole('button', {name: 'Collapse row'}),
+    ).toBeInTheDocument();
+  });
+
+  it('collapses an expanded row when its body is clicked', async () => {
+    const user = userEvent.setup();
+    render(<TreeTable hasRowClickExpansion defaultExpandedIds={['src']} />);
+
+    expect(screen.getByText('components')).toBeInTheDocument();
+
+    await user.click(within(getRowByText('src')).getByText('src'));
+
+    expect(screen.queryByText('components')).toBeNull();
+    expect(
+      within(getRowByText('src')).getByRole('button', {name: 'Expand row'}),
+    ).toBeInTheDocument();
+  });
+
+  it('does not toggle when a leaf row body is clicked', async () => {
+    const user = userEvent.setup();
+    render(<TreeTable hasRowClickExpansion />);
+
+    const before = screen.getAllByRole('row').length;
+    await user.click(within(getRowByText('README.md')).getByText('README.md'));
+
+    // Leaf has no expansion: row count is unchanged.
+    expect(screen.getAllByRole('row')).toHaveLength(before);
+  });
+
+  it('toggles once when the chevron is clicked (no double-toggle via row click)', async () => {
+    const user = userEvent.setup();
+    const onToggle = vi.fn();
+
+    function SpyTree() {
+      const {visibleData, treeConfig} = useTableTreeState<FileRow>({
+        data: fileTree,
+        idKey: 'id',
+      });
+      const tree = useTableTreeData({
+        ...treeConfig,
+        hasRowClickExpansion: true,
+        onToggleItem: item => {
+          onToggle(item);
+          treeConfig.onToggleItem(item);
+        },
+      });
+      return (
+        <Table
+          data={visibleData}
+          columns={columns}
+          idKey="id"
+          plugins={{tree}}
+        />
+      );
+    }
+
+    render(<SpyTree />);
+
+    await user.click(
+      within(getRowByText('src')).getByRole('button', {name: 'Expand row'}),
+    );
+
+    // The chevron stops propagation, so a chevron click toggles exactly once.
+    expect(onToggle).toHaveBeenCalledTimes(1);
+    expect(screen.getByText('components')).toBeInTheDocument();
+  });
+
+  it('does not toggle when an interactive control inside the row is clicked', async () => {
+    const user = userEvent.setup();
+    // Compose with selection: each row carries a checkbox in its own column.
+    function TreeWithSelection() {
+      const [selectedKeys, setSelectedKeys] = useState<Set<string>>(
+        () => new Set(),
+      );
+      const {visibleData, treeConfig} = useTableTreeState<FileRow>({
+        data: fileTree,
+        idKey: 'id',
+      });
+      const {selectionConfig} = useTableSelectionState<FileRow>({
+        data: visibleData,
+        idKey: 'id',
+        selectedKeys,
+        setSelectedKeys,
+      });
+      const selection = useTableSelection<FileRow>(selectionConfig);
+      const tree = useTableTreeData({
+        ...treeConfig,
+        hasRowClickExpansion: true,
+      });
+      return (
+        <Table
+          data={visibleData}
+          columns={columns}
+          idKey="id"
+          plugins={{tree, selection}}
+        />
+      );
+    }
+
+    render(<TreeWithSelection />);
+
+    const srcRow = getRowByText('src');
+    const cells = within(srcRow).getAllByRole('cell');
+    await user.click(within(cells[0]).getByRole('checkbox'));
+
+    // Clicking the checkbox selects the row but must NOT expand it.
+    expect(screen.queryByText('components')).toBeNull();
+    expect(
+      within(getRowByText('src')).getByRole('button', {name: 'Expand row'}),
+    ).toBeInTheDocument();
+  });
+
+  it('is a no-op on flat data even when hasRowClickExpansion is set', async () => {
+    const user = userEvent.setup();
+    const flat: FileRow[] = [
+      {id: 'a', name: 'a.txt', size: 1},
+      {id: 'b', name: 'b.txt', size: 2},
+    ];
+    render(<TreeTable data={flat} hasRowClickExpansion />);
+
+    const before = screen.getAllByRole('row').length;
+    await user.click(within(getRowByText('a.txt')).getByText('a.txt'));
+
+    expect(screen.getAllByRole('row')).toHaveLength(before);
+  });
+});
+
 // =============================================================================
 // Row ARIA
 // =============================================================================