@astryxdesign/core 0.1.3 → 0.1.4-canary.02643db

package/src/Switch/Switch.tsx

@@ -228,6 +228,13 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
    * @default false
    */
   isDisabled?: boolean;
+
+  /**
+   * The HTML name attribute for the underlying checkbox input.
+   * Useful for form submissions.
+   */
+  htmlName?: string;
+
   /**
    * Explains why the switch is disabled. When set together with `isDisabled`,
    * the switch shows a tooltip with this text on hover and keyboard focus, and
@@ -334,6 +341,7 @@ export function Switch({
   isLoading = false,
   value,
   isDisabled = false,
+  htmlName,
   disabledMessage,
   isOptional = false,
   isRequired = false,
@@ -395,6 +403,10 @@ export function Switch({
         id={id}
         type="checkbox"
         role="switch"
+        // Withhold the name while disabled: with a disabledMessage the
+        // input stays focusable (not natively disabled), and a disabled
+        // control must not submit.
+        name={isDisabled ? undefined : htmlName}
         checked={isOn}
         // With a disabledMessage the switch keeps focusability via aria-disabled
         // so the reason is focus-discoverable; toggling is still blocked by the

package/src/TabList/TabList.doc.mjs

@@ -92,7 +92,7 @@ export const docs = {
     bestPractices: [
       { guidance: true, description: 'Keep tab labels short and descriptive so users can quickly scan available sections.' },
       { guidance: true, description: 'Use TabMenu to group overflow items when horizontal space is limited rather than scrolling tabs off-screen.' },
-      { guidance: true, description: 'When using hasDivider with action buttons alongside tabs, use a smaller button size (sm) so the actions don\u2019t overpower the tab row.' },
+      { guidance: true, description: 'When using hasDivider with action buttons alongside tabs, use a smaller button size (sm) so the actions don\'t overpower the tab row.' },
       { guidance: false, description: 'Use tabs for sequential steps or workflows; use a stepper or wizard pattern instead.' },
       { guidance: false, description: 'Place more than 6–8 visible tabs before the overflow menu; prioritize the most important categories.' },
       { guidance: false, description: 'Confuse TabList with SegmentedControl or ToggleButton. TabList is for navigation between views. SegmentedControl and ToggleButton are input controls: SegmentedControl always has exactly one selected option, while ToggleButton can be toggled on or off.' },
@@ -113,7 +113,7 @@ export const docsZh = {
     bestPractices: [
       { guidance: true, description: 'Keep tab labels short and descriptive so users can quickly scan available sections.' },
       { guidance: true, description: 'Use TabMenu to group overflow items when horizontal space is limited rather than scrolling tabs off-screen.' },
-      { guidance: true, description: 'When using hasDivider with action buttons alongside tabs, use a smaller button size (sm) so the actions don\u2019t overpower the tab row.' },
+      { guidance: true, description: 'When using hasDivider with action buttons alongside tabs, use a smaller button size (sm) so the actions don\'t overpower the tab row.' },
       { guidance: false, description: 'Use tabs for sequential steps or workflows; use a stepper or wizard pattern instead.' },
       { guidance: false, description: 'Place more than 6–8 visible tabs before the overflow menu; prioritize the most important categories.' },
       { guidance: false, description: 'Confuse TabList with SegmentedControl or ToggleButton. TabList is for navigation between views. SegmentedControl and ToggleButton are input controls: SegmentedControl always has exactly one selected option, while ToggleButton can be toggled on or off.' },
@@ -135,7 +135,7 @@ export const docsDense = {
     bestPractices: [
       { guidance: true, description: 'Keep tab labels short and descriptive so users can quickly scan available sections.' },
       { guidance: true, description: 'Use TabMenu to group overflow items when horizontal space is limited rather than scrolling tabs off-screen.' },
-      { guidance: true, description: 'When using hasDivider with action buttons alongside tabs, use a smaller button size (sm) so the actions don\u2019t overpower the tab row.' },
+      { guidance: true, description: 'When using hasDivider with action buttons alongside tabs, use a smaller button size (sm) so the actions don\'t overpower the tab row.' },
       { guidance: false, description: 'Use tabs for sequential steps or workflows; use a stepper or wizard pattern instead.' },
       { guidance: false, description: 'Place more than 6–8 visible tabs before the overflow menu; prioritize the most important categories.' },
       { guidance: false, description: 'Confuse TabList with SegmentedControl or ToggleButton. TabList is for navigation between views. SegmentedControl and ToggleButton are input controls: SegmentedControl always has exactly one selected option, while ToggleButton can be toggled on or off.' },

package/src/Table/BaseTable.tsx

@@ -225,7 +225,7 @@ function TableRowInner<T extends Record<string, unknown>>({
     rowIndex,
   );
 
-  return (
+  const row = (
     <RowComponent
       key={rowKey}
       ref={rowRenderProps.ref}
@@ -234,6 +234,8 @@ function TableRowInner<T extends Record<string, unknown>>({
       {rowRenderProps.children}
     </RowComponent>
   );
+
+  return row;
 }
 
 /**
@@ -282,6 +284,12 @@ function areRowPropsEqual<T extends Record<string, unknown>>(
   const nextItem = nextProps.item;
   const keys = Object.keys(nextItem);
 
+  // A key deleted from nextItem would never be visited by the loop below,
+  // and the row would keep rendering the removed field's stale value.
+  if (Object.keys(prevItem).length !== keys.length) {
+    return false;
+  }
+
   for (const key of keys) {
     if (prevItem[key] !== nextItem[key]) {
       return false;

package/src/Table/Table.test.tsx

@@ -617,6 +617,29 @@ describe('BaseTable', () => {
 // =============================================================================
 
 describe('Table', () => {
+  it('clears a cell when the field is removed from the row object (#3595)', () => {
+    const cols: TableColumn<Record<string, unknown>>[] = [
+      {key: 'name', header: 'Name'},
+      {key: 'status', header: 'Status'},
+    ];
+    const {rerender} = render(
+      <Table
+        data={[{id: '1', name: 'Alice', status: 'active'}]}
+        columns={cols}
+        idKey="id"
+      />,
+    );
+    expect(screen.getByText('active')).toBeInTheDocument();
+
+    // Clearing a field by omitting it (optimistic update / server response)
+    // must re-render the row — the memo previously only compared the keys of
+    // the NEW item, so the deleted field's stale value kept rendering.
+    rerender(
+      <Table data={[{id: '1', name: 'Alice'}]} columns={cols} idKey="id" />,
+    );
+    expect(screen.queryByText('active')).not.toBeInTheDocument();
+  });
+
   it('renders a table with correct structure', () => {
     render(<Table data={users} columns={columns} />);
     expect(screen.getByRole('table')).toBeInTheDocument();

package/src/Table/TableCell.tsx

@@ -87,6 +87,62 @@ const densityStyles = stylex.create({
   },
 });
 
+// When a cell owns a context menu, its padding moves from the `<td>` onto the
+// right-click trigger wrapper so the *entire* cell (padding included) opens the
+// menu. Without this, right-clicking the padding ring near a cell edge falls
+// through to the browser's native menu. Paired with `contextMenuCellStyles` on
+// the `<td>` (font/box-sizing only — no padding).
+const densityTextStyles = stylex.create({
+  compact: {
+    fontSize: typeScaleVars['--text-body-size'],
+    boxSizing: 'border-box',
+  },
+  balanced: {
+    fontSize: typeScaleVars['--text-body-size'],
+    boxSizing: 'border-box',
+  },
+  spacious: {
+    fontSize: typeScaleVars['--text-body-size'],
+    boxSizing: 'border-box',
+  },
+});
+
+const densityPaddingStyles = stylex.create({
+  compact: {
+    paddingBlock: spacingVars['--spacing-1'],
+    paddingInline: spacingVars['--spacing-2'],
+  },
+  balanced: {
+    paddingBlock: spacingVars['--spacing-2'],
+    paddingInline: spacingVars['--spacing-3'],
+  },
+  spacious: {
+    paddingBlock: spacingVars['--spacing-3'],
+    paddingInline: spacingVars['--spacing-4'],
+  },
+});
+
+// The trigger wrapper fills the whole cell (a `<td>` child with height:100%
+// stretches to the row height) so a right-click anywhere in the cell opens the
+// menu. It carries the density padding relocated off the `<td>`.
+const triggerFillStyles = stylex.create({
+  fill: {
+    display: 'block',
+    boxSizing: 'border-box',
+    blockSize: '100%',
+    inlineSize: '100%',
+  },
+});
+
+// `height:100%` on the `<td>` is the CSS trick that lets a block child resolve
+// its own `height:100%` against the row height — so the trigger fills the cell
+// vertically (top/bottom padding included) and is fully right-clickable.
+const contextMenuCellStyles = stylex.create({
+  cell: {
+    blockSize: '100%',
+  },
+});
+
 const dividerRowStyles = stylex.create({
   cell: {
     borderBottomWidth: {
@@ -151,22 +207,45 @@ export function TableCell({
 }: TableCellProps) {
   const ctx = useTableContext();
 
-  // Standalone (no table context) renders plain, with no density/divider styles.
+  const hasContextMenu =
+    typeof contextMenuActions === 'function' ||
+    (Array.isArray(contextMenuActions) && contextMenuActions.length > 0);
+
+  // When the cell owns a context menu, its density padding is relocated onto
+  // the right-click trigger wrapper (see `content` below) so the entire cell —
+  // padding included — opens the menu. Otherwise padding lives on the `<td>`.
   const cellStyles: StyleXStyles[] = ctx
     ? [
-        densityStyles[ctx.density],
-        ctx.textOverflow === 'truncate'
-          ? overflowStyles.cell
-          : wrapStyles.cell,
+        hasContextMenu
+          ? densityTextStyles[ctx.density]
+          : densityStyles[ctx.density],
+        ctx.textOverflow === 'truncate' ? overflowStyles.cell : wrapStyles.cell,
         containerEdgeStyles[ctx.density],
         verticalAlignStyles[ctx.verticalAlign],
-        ...buildDividerStyles(ctx, dividerRowStyles.cell, dividerColumnStyles.cell),
+        ...buildDividerStyles(
+          ctx,
+          dividerRowStyles.cell,
+          dividerColumnStyles.cell,
+        ),
+        ...(hasContextMenu ? [contextMenuCellStyles.cell] : []),
       ]
     : [];
 
   // The cell owns the context-menu wrapper so it controls how the menu
-  // interacts with its padding / content. No-op when no actions.
-  const content = wrapInTableContextMenu(children, contextMenuActions);
+  // interacts with its padding / content. No-op when no actions. When actions
+  // exist we make the trigger fill the cell and carry the density padding so a
+  // right-click anywhere in the cell (including the padding ring) opens it.
+  const triggerXstyle =
+    hasContextMenu && ctx
+      ? [triggerFillStyles.fill, densityPaddingStyles[ctx.density]]
+      : hasContextMenu
+        ? triggerFillStyles.fill
+        : undefined;
+  const content = wrapInTableContextMenu(
+    children,
+    contextMenuActions,
+    triggerXstyle,
+  );
 
   return (
     <td

package/src/Table/index.ts

@@ -26,6 +26,10 @@ export {useTableColumnSettings} from './plugins/columnSettings';
 export {useTableColumnSettingsState} from './plugins/columnSettings';
 export {useTableColumnResize} from './plugins/columnResize';
 export {useTableStickyColumns} from './plugins/stickyColumns';
+export {
+  useTableRowExpansion,
+  useTableRowExpansionState,
+} from './plugins/rowExpansion';
 export {resolveContextActions} from './tableContextMenu';
 export {
   useTableFiltering,
@@ -97,6 +101,7 @@ export type {
 } from './plugins/columnSettings';
 export type {UseTableColumnResizeConfig} from './plugins/columnResize';
 export type {UseTableStickyColumnsConfig} from './plugins/stickyColumns';
+export type {UseTableRowExpansionConfig} from './plugins/rowExpansion';
 export type {
   UseTableFilteringConfig,
   TableFilterState,

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

@@ -0,0 +1,7 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export {
+  useTableRowExpansion,
+  useTableRowExpansionState,
+} from './useTableRowExpansion';
+export type {UseTableRowExpansionConfig} from './useTableRowExpansion';

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

@@ -0,0 +1,155 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
+import {useState} from 'react';
+import {Table} from '../../Table';
+import type {TableColumn} from '../../types';
+import {
+  useTableRowExpansion,
+  useTableRowExpansionState,
+} from './useTableRowExpansion';
+
+// popover mock for context-menu tests
+beforeEach(() => {
+  HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
+    this.setAttribute('popover-open', '');
+    const event = new Event('toggle', {bubbles: false});
+    Object.defineProperty(event, 'newState', {value: 'open'});
+    this.dispatchEvent(event);
+  });
+  HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
+    this.removeAttribute('popover-open');
+    const event = new Event('toggle', {bubbles: false});
+    Object.defineProperty(event, 'newState', {value: 'closed'});
+    this.dispatchEvent(event);
+  });
+  const originalMatches = HTMLElement.prototype.matches;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (HTMLElement.prototype as any).matches = function (
+    selector: string,
+  ): boolean {
+    if (selector === ':popover-open') {
+      return this.hasAttribute('popover-open');
+    }
+    return originalMatches.call(this, selector);
+  };
+});
+
+interface TreeItem extends Record<string, unknown> {
+  id: string;
+  name: string;
+  children: TreeItem[];
+}
+
+const treeData: TreeItem[] = [
+  {
+    id: 'a',
+    name: 'Folder A',
+    children: [
+      {id: 'a1', name: 'File A1', children: []},
+      {id: 'a2', name: 'File A2', children: []},
+    ],
+  },
+  {
+    id: 'b',
+    name: 'Folder B',
+    children: [{id: 'b1', name: 'File B1', children: []}],
+  },
+  {id: 'c', name: 'Leaf C', children: []},
+];
+
+const columns: TableColumn<TreeItem>[] = [{key: 'name', header: 'Name'}];
+
+const EMPTY_KEYS = new Set<string>();
+
+function Harness({
+  initialExpanded = EMPTY_KEYS,
+}: {
+  initialExpanded?: Set<string>;
+}) {
+  const [expandedKeys, setExpandedKeys] = useState(initialExpanded);
+  const {data, expansionConfig} = useTableRowExpansionState<TreeItem>({
+    baseData: treeData,
+    getChildren: item => item.children,
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return (
+    <Table data={data} columns={columns} idKey="id" plugins={{expansion}} />
+  );
+}
+
+describe('useTableRowExpansion', () => {
+  it('renders a chevron button for expandable rows', () => {
+    render(<Harness />);
+    const buttons = screen.getAllByRole('button', {name: /expand row/i});
+    // Folder A and Folder B are expandable (top-level with children)
+    expect(buttons.length).toBe(2);
+  });
+
+  it('shows child rows when expanded', () => {
+    render(<Harness initialExpanded={new Set(['a'])} />);
+    expect(screen.getByText('File A1')).toBeInTheDocument();
+    expect(screen.getByText('File A2')).toBeInTheDocument();
+  });
+
+  it('hides child rows when collapsed', () => {
+    render(<Harness />);
+    expect(screen.queryByText('File A1')).not.toBeInTheDocument();
+  });
+
+  it('toggles expansion on chevron click', () => {
+    render(<Harness />);
+    expect(screen.queryByText('File A1')).not.toBeInTheDocument();
+    fireEvent.click(screen.getAllByRole('button', {name: /expand row/i})[0]);
+    expect(screen.getByText('File A1')).toBeInTheDocument();
+  });
+
+  it('contributes a context-menu action on expandable rows', () => {
+    render(<Harness />);
+    fireEvent.contextMenu(screen.getByText('Folder A'));
+    const items = screen.getAllByRole('menuitem', {
+      name: /expand row/i,
+      hidden: true,
+    });
+    expect(items.length).toBeGreaterThan(0);
+  });
+
+  it('does not show chevron for leaf nodes', () => {
+    render(<Harness />);
+    // Leaf C has no children
+    expect(screen.getByText('Leaf C')).toBeInTheDocument();
+    // only 2 expand buttons (Folder A, Folder B), not 3
+    expect(
+      screen.getAllByRole('button', {name: /expand row|collapse row/i}).length,
+    ).toBe(2);
+  });
+
+  it('renders an expand-all toggle in the header', () => {
+    render(<Harness />);
+    expect(
+      screen.getByRole('button', {name: /expand all rows/i}),
+    ).toBeInTheDocument();
+  });
+
+  it('expand-all toggle expands every expandable row', () => {
+    render(<Harness />);
+    expect(screen.queryByText('File A1')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', {name: /expand all rows/i}));
+    // Both folders' children become visible.
+    expect(screen.getByText('File A1')).toBeInTheDocument();
+    expect(screen.getByText('File A2')).toBeInTheDocument();
+    expect(screen.getByText('File B1')).toBeInTheDocument();
+  });
+
+  it('collapse-all toggle collapses every row', () => {
+    render(<Harness initialExpanded={new Set(['a', 'b'])} />);
+    expect(screen.getByText('File A1')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', {name: /collapse all rows/i}));
+    expect(screen.queryByText('File A1')).not.toBeInTheDocument();
+    expect(screen.queryByText('File B1')).not.toBeInTheDocument();
+  });
+});