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

package/src/TabList/TabMenu.tsx

@@ -122,7 +122,10 @@ const styles = stylex.create({
   },
   indicator: {
     position: 'absolute',
-    bottom: '-1px',
+    // Mirrors Tab's indicator: sits on the bottom edge by default (-1px), or
+    // drops onto the divider rail when an ancestor (TabList `hasDivider` or a
+    // Toolbar with a bottom divider) sets `--_tab-indicator-bottom`.
+    bottom: 'var(--_tab-indicator-bottom, -1px)',
     left: spacingVars['--spacing-3'],
     right: spacingVars['--spacing-3'],
     height: '2px',

package/src/Table/BaseTable.tsx

@@ -45,6 +45,7 @@ import {mergeProps} from '../utils';
 import {EmptyState} from '../EmptyState';
 import {Text} from '../Text';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   table: {
@@ -162,7 +163,7 @@ function TableRowInner<T extends Record<string, unknown>>({
 
     const initialBodyCellRenderProps: BodyCellRenderProps = {
       htmlProps: initialCellHtmlProps,
-      styles: [],
+      xstyle: [],
       columnIndex,
       columns: columns as ReadonlyArray<TableColumn<Record<string, unknown>>>,
     };
@@ -206,7 +207,7 @@ function TableRowInner<T extends Record<string, unknown>>({
         key={col.key}
         {...cellRenderProps.htmlProps}
         contextMenuActions={cellRenderProps.contextMenuActions}
-        xstyle={cellRenderProps.styles}>
+        xstyle={cellRenderProps.xstyle}>
         {content}
       </CellComponent>
     );
@@ -218,7 +219,7 @@ function TableRowInner<T extends Record<string, unknown>>({
     p => p.transformBodyRow,
     {
       htmlProps: {},
-      styles: [],
+      xstyle: [],
       children: <>{cells}</>,
     } satisfies BodyRowRenderProps,
     item,
@@ -230,7 +231,7 @@ function TableRowInner<T extends Record<string, unknown>>({
       key={rowKey}
       ref={rowRenderProps.ref}
       {...rowRenderProps.htmlProps}
-      xstyle={rowRenderProps.styles}>
+      xstyle={rowRenderProps.xstyle}>
       {rowRenderProps.children}
     </RowComponent>
   );
@@ -324,8 +325,13 @@ function BaseTableInner<T extends Record<string, unknown>>({
   textOverflow = 'wrap',
   scrollWrapper: ScrollWrapper,
   emptyState,
+  xstyle,
+  className,
+  style,
   ref,
+  ...rest
 }: BaseTableProps<T> & {ref?: Ref<HTMLTableElement>}): ReactElement {
+  const t = useTranslator();
   // Use stable empty array when no plugins provided
   const plugins = pluginsProp ?? (EMPTY_PLUGINS as TablePlugin<T>[]);
 
@@ -365,7 +371,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
   // --- Plugin pipeline: table ---
   const tableRenderProps = applyPlugins(plugins, p => p.transformTable, {
     htmlProps: {...userTableProps},
-    styles: children ? [styles.table, styles.tableAutoLayout] : [styles.table],
+    xstyle: children ? [styles.table, styles.tableAutoLayout] : [styles.table],
   } satisfies TableRenderProps);
 
   // --- Plugin pipeline: header cells ---
@@ -386,7 +392,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
 
     const initialHeaderRenderProps: HeaderCellRenderProps = {
       htmlProps: initialHeaderHtmlProps,
-      styles: [],
+      xstyle: [],
       content: headerContent,
       columnIndex,
       columns: resolvedColumns as ReadonlyArray<
@@ -447,7 +453,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
         {...mergedHtmlProps}
         {...headerTitleProp}
         contextMenuActions={cellRenderProps.contextMenuActions}
-        xstyle={cellRenderProps.styles}>
+        xstyle={cellRenderProps.xstyle}>
         {headerInner}
       </HeaderCellComponent>
     );
@@ -459,7 +465,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
     p => p.transformHeaderRow,
     {
       htmlProps: {},
-      styles: [],
+      xstyle: [],
       children: <>{headerCells}</>,
     } satisfies HeaderRowRenderProps,
   );
@@ -468,12 +474,15 @@ 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
+  // must win when present; when absent, a consumer minWidth survives).
   const tableStyle: React.CSSProperties = {
     ...tableRenderProps.htmlProps.style,
-    minWidth:
-      resolvedWidths.tableMinWidth > 0
-        ? `${resolvedWidths.tableMinWidth}px`
-        : undefined,
+    ...style,
+    ...(resolvedWidths.tableMinWidth > 0
+      ? {minWidth: `${resolvedWidths.tableMinWidth}px`}
+      : null),
   };
 
   let tableElement: ReactNode = (
@@ -482,10 +491,13 @@ function BaseTableInner<T extends Record<string, unknown>>({
       {...tableRenderProps.htmlProps}
       {...mergeProps(
         themeProps('base-table'),
-        stylex.props(...tableRenderProps.styles),
-        tableRenderProps.htmlProps.className,
+        stylex.props(...tableRenderProps.xstyle, xstyle),
+        [tableRenderProps.htmlProps.className, className]
+          .filter(Boolean)
+          .join(' ') || undefined,
+        tableStyle,
       )}
-      style={tableStyle}>
+      {...rest}>
       {children ? (
         children
       ) : (
@@ -495,7 +507,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
               <RowComponent
                 {...headerRowRenderProps.htmlProps}
                 isHeaderRow
-                xstyle={headerRowRenderProps.styles}>
+                xstyle={headerRowRenderProps.xstyle}>
                 {headerRowRenderProps.children}
               </RowComponent>
             </TableHeader>
@@ -527,7 +539,12 @@ function BaseTableInner<T extends Record<string, unknown>>({
                 emptyState !== false && (
                   <tr>
                     <td colSpan={resolvedColumns.length}>
-                      {emptyState ?? <EmptyState title="No data" isCompact />}
+                      {emptyState ?? (
+                        <EmptyState
+                          title={t('@astryx.table.noData')}
+                          isCompact
+                        />
+                      )}
                     </td>
                   </tr>
                 )}
@@ -551,14 +568,14 @@ function BaseTableInner<T extends Record<string, unknown>>({
       p => p.transformScrollWrapper,
       {
         htmlProps: {},
-        styles: [],
+        xstyle: [],
       } satisfies ScrollWrapperRenderProps,
     );
 
     tableElement = (
       <ScrollWrapper
         htmlProps={scrollWrapperRenderProps.htmlProps}
-        styles={scrollWrapperRenderProps.styles}
+        xstyle={scrollWrapperRenderProps.xstyle}
         beforeTable={scrollWrapperRenderProps.beforeTable}
         afterTable={scrollWrapperRenderProps.afterTable}>
         {tableElement}

package/src/Table/Table.doc.mjs

@@ -111,6 +111,8 @@ export const docs = {
     {name: 'useTableSelection'},
     {name: 'useTableSelectionState'},
     {name: 'useTableSortable'},
+    {name: 'useTableTreeData'},
+    {name: 'useTableTreeState'},
     {name: 'useTablePagination'},
     {name: 'useTableColumnSettings'},
     {name: 'useTableFiltering'},

package/src/Table/Table.test.tsx

@@ -11,6 +11,7 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
+import * as stylex from '@stylexjs/stylex';
 import {BaseTable} from './BaseTable';
 import {Table} from './Table';
 import {TableRow} from './TableRow';
@@ -414,6 +415,136 @@ describe('BaseTable', () => {
     );
   });
 
+  describe('root element styling props (#3679)', () => {
+    it('applies className to the table element', () => {
+      render(<Table data={users} columns={columns} className="custom-table" />);
+      expect(screen.getByRole('table').className).toContain('custom-table');
+    });
+
+    it('applies style to the table element', () => {
+      render(<Table data={users} columns={columns} style={{opacity: 0.9}} />);
+      expect(screen.getByRole('table').style.opacity).toBe('0.9');
+    });
+
+    it('accepts xstyle without error', () => {
+      render(<Table data={users} columns={columns} xstyle={undefined} />);
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('spreads id and aria attributes onto the table element', () => {
+      render(
+        <Table
+          data={users}
+          columns={columns}
+          id="users-table"
+          aria-label="Users"
+          data-analytics="tables"
+        />,
+      );
+      const table = screen.getByRole('table', {name: 'Users'});
+      expect(table.id).toBe('users-table');
+      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(
+        <Table data={users} columns={columns} style={{minWidth: '10px'}} />,
+      );
+      expect(screen.getByRole('table').style.minWidth).toBe(
+        `${tableMinWidth}px`,
+      );
+    });
+
+    it('lets a consumer style.minWidth survive when columns compute none', () => {
+      const plain: TableColumn<User>[] = [{key: 'name'}, {key: 'age'}];
+      render(<Table data={users} columns={plain} style={{minWidth: '10px'}} />);
+      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');
+      expect(table.className).toContain('astryx-base-table');
+      expect(table.className).toContain('astryx-table');
+      expect(table.className).toContain('custom-table');
+    });
+
+    it('passes event handlers through to the table element', async () => {
+      const onClick = vi.fn();
+      render(<Table data={users} columns={columns} onClick={onClick} />);
+      screen
+        .getByRole('table')
+        .dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('applies dynamic xstyle values to the table element', () => {
+      const dynamic = stylex.create({
+        opacity: (value: number) => ({opacity: value}),
+      });
+      render(
+        <Table data={users} columns={columns} xstyle={dynamic.opacity(0.42)} />,
+      );
+      expect(screen.getByRole('table').getAttribute('style')).toContain('0.42');
+    });
+
+    it('honors className in children mode', () => {
+      render(
+        <Table className="custom-table">
+          <tbody>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </tbody>
+        </Table>,
+      );
+      expect(screen.getByRole('table').className).toContain('custom-table');
+    });
+
+    it('honors className on an unwrapped BaseTable (no scrollWrapper)', () => {
+      render(
+        <BaseTable data={users} columns={columns} className="custom-table" />,
+      );
+      expect(screen.getByRole('table').className).toContain('custom-table');
+    });
+  });
+
   describe('plugin pipeline', () => {
     it('applies transformTable plugin', () => {
       const plugin: TablePlugin<User> = {
@@ -826,7 +957,7 @@ describe('Table', () => {
     const userPlugin: TablePlugin<User> = {
       transformTable: props => {
         // XDS plugin should have already added styles
-        expect(props.styles.length).toBeGreaterThan(1);
+        expect(props.xstyle.length).toBeGreaterThan(1);
         return {
           ...props,
           htmlProps: {...props.htmlProps, 'data-testid': 'after-xds'},

package/src/Table/Table.tsx

@@ -31,6 +31,7 @@ import type {
   TableRenderProps,
 } from './types';
 import type {StyleXStyles} from '../theme/types';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Table Types
@@ -135,7 +136,7 @@ const scrollWrapperStyles = stylex.create({
 function TableScrollWrapper({
   children,
   htmlProps,
-  styles: pluginStyles,
+  xstyle: pluginStyles,
   beforeTable,
   afterTable,
 }: {
@@ -143,10 +144,11 @@ function TableScrollWrapper({
   htmlProps?: React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
   };
-  styles?: StyleXStyles[];
+  xstyle?: StyleXStyles[];
   beforeTable?: React.ReactNode;
   afterTable?: React.ReactNode;
 }) {
+  const t = useTranslator();
   const {ref, ...restHtmlProps} = htmlProps ?? {};
   return (
     <div
@@ -158,7 +160,7 @@ function TableScrollWrapper({
       // htmlProps.
       tabIndex={0}
       role="group"
-      aria-label="Table"
+      aria-label={t('@astryx.table.label')}
       {...restHtmlProps}
       {...mergeProps(
         themeProps('table-scroll-wrapper'),
@@ -194,7 +196,7 @@ function buildTableStylePlugin<
             ? `${existingClass} ${tableClass}`
             : tableClass,
         },
-        styles: [...props.styles, tableStyles.base],
+        xstyle: [...props.xstyle, tableStyles.base],
       };
     },
   };

package/src/Table/index.ts

@@ -32,6 +32,7 @@ export {
   useTableRowExpansion,
   useTableRowExpansionState,
 } from './plugins/rowExpansion';
+export {useTableTreeData, useTableTreeState} from './plugins/tree';
 export {resolveContextActions} from './tableContextMenu';
 export {
   useTableFiltering,
@@ -109,6 +110,12 @@ export type {
   UseTableGroupedRowsConfig,
   UseTableGroupedRowsResult,
 } from './plugins/groupedRows';
+export type {
+  TableTreeRowMeta,
+  UseTableTreeDataConfig,
+  UseTableTreeStateConfig,
+  UseTableTreeStateResult,
+} from './plugins/tree';
 export type {
   UseTableFilteringConfig,
   TableFilterState,

package/src/Table/plugins/columnResize/useTableColumnResize.tsx

@@ -857,7 +857,7 @@ export function useTableColumnResize<T extends Record<string, unknown>>(
               {handle}
             </>
           ),
-          styles: [...props.styles, headerCellRelative.base],
+          xstyle: [...props.xstyle, headerCellRelative.base],
         };
       },
     }),

package/src/Table/plugins/filtering/useTableFiltering.tsx

@@ -42,6 +42,7 @@ import type {
   HeaderCellRenderProps,
 } from '../../types';
 import {proportional} from '../../columnUtils';
+import {useTranslator} from '../../../i18n';
 import type {
   PowerSearchConfig,
   PowerSearchField,
@@ -263,10 +264,7 @@ function tableValueToFilterValue(
  * };
  * ```
  */
-export type TableFilterState = Record<
-  string,
-  TableFilterValue | undefined
->;
+export type TableFilterState = Record<string, TableFilterValue | undefined>;
 
 /**
  * Display variant for the filter UI.
@@ -299,10 +297,7 @@ export interface UseTableFilteringConfig {
   /** Current filter state — map from column key to filter value. */
   filters: TableFilterState;
   /** Called when the user changes a filter value. `null` clears the filter. */
-  onFilterChange: (
-    columnKey: string,
-    value: TableFilterValue | null,
-  ) => void;
+  onFilterChange: (columnKey: string, value: TableFilterValue | null) => void;
   /**
    * Display variant for filter controls.
    *
@@ -424,6 +419,7 @@ function TextFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -431,7 +427,7 @@ function TextFilterControl({
 
   return (
     <TextInput
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       value={strValue}
       onChange={(newValue: string) => {
@@ -439,7 +435,7 @@ function TextFilterControl({
           .getConfig()
           .onFilterChange(columnKey, newValue === '' ? null : newValue);
       }}
-      placeholder={`Filter ${header}`}
+      placeholder={t('@astryx.tableFiltering.filterByColumn', {header})}
       size={size}
       hasClear={hasClear}
     />
@@ -459,6 +455,7 @@ function NumberFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -476,11 +473,11 @@ function NumberFilterControl({
   if (hasClear) {
     return (
       <NumberInput
-        label={`Filter ${header}`}
+        label={t('@astryx.tableFiltering.filterByColumn', {header})}
         isLabelHidden
         value={numValue}
         onChange={handleChange}
-        placeholder={`Filter ${header}`}
+        placeholder={t('@astryx.tableFiltering.filterByColumn', {header})}
         min={operatorValue.minValue ?? null}
         max={operatorValue.maxValue ?? null}
         step={step}
@@ -492,11 +489,11 @@ function NumberFilterControl({
 
   return (
     <NumberInput
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       value={numValue}
       onChange={handleChange}
-      placeholder={`Filter ${header}`}
+      placeholder={t('@astryx.tableFiltering.filterByColumn', {header})}
       min={operatorValue.minValue ?? null}
       max={operatorValue.maxValue ?? null}
       step={step}
@@ -518,6 +515,7 @@ function SelectorFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -543,12 +541,12 @@ function SelectorFilterControl({
   if (hasClear) {
     return (
       <Selector
-        label={`Filter ${header}`}
+        label={t('@astryx.tableFiltering.filterByColumn', {header})}
         isLabelHidden
         options={options}
         value={strValue || null}
         onChange={handleChange}
-        placeholder="All"
+        placeholder={t('@astryx.table.filter.allPlaceholder')}
         size={size}
         hasClear
       />
@@ -557,12 +555,12 @@ function SelectorFilterControl({
 
   return (
     <Selector
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       options={options}
       value={strValue}
       onChange={handleChange}
-      placeholder="All"
+      placeholder={t('@astryx.table.filter.allPlaceholder')}
       size={size}
     />
   );
@@ -581,6 +579,7 @@ function MultiSelectorFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -593,7 +592,7 @@ function MultiSelectorFilterControl({
 
   return (
     <MultiSelector
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       options={options}
       value={arrValue}
@@ -602,7 +601,7 @@ function MultiSelectorFilterControl({
           .getConfig()
           .onFilterChange(columnKey, newValue.length === 0 ? null : newValue);
       }}
-      placeholder="All"
+      placeholder={t('@astryx.table.filter.allPlaceholder')}
       size={size}
       hasSelectAll
       hasSearch={false}
@@ -622,12 +621,13 @@ function DateFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const value = store.getConfig().filters[columnKey] as string | undefined;
 
   return (
     <DateInput
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       value={(value as ISODateString | undefined) ?? undefined}
       onChange={newValue => {
@@ -650,12 +650,13 @@ function TimeFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const value = store.getConfig().filters[columnKey] as string | undefined;
 
   return (
     <TimeInput
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       value={(value as ISOTimeString | undefined) ?? undefined}
       onChange={newValue => {
@@ -680,6 +681,7 @@ function StringListFilterControl({
   size: 'sm' | 'md';
   hasClear?: boolean;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const value =
     (store.getConfig().filters[columnKey] as string[] | undefined) ?? [];
@@ -699,7 +701,7 @@ function StringListFilterControl({
 
   return (
     <Tokenizer
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       searchSource={searchSource}
       value={value.map(v => ({id: v, label: v}))}
@@ -821,6 +823,7 @@ function PopoverFilterTrigger({
   header: string;
   operatorValue: OperatorValue;
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -876,7 +879,7 @@ function PopoverFilterTrigger({
     <Popover
       isOpen={isOpen}
       onOpenChange={handleOpen}
-      label={`Filter ${header}`}
+      label={t('@astryx.tableFiltering.filterByColumn', {header})}
       placement="below"
       alignment="start"
       content={
@@ -890,14 +893,14 @@ function PopoverFilterTrigger({
             />
             <div {...stylex.props(filterStyles.popoverActions)}>
               <Button
-                label="Reset"
+                label={t('@astryx.table.filter.reset')}
                 variant="ghost"
                 size="sm"
                 onClick={handleClear}
               />
               <div {...stylex.props(filterStyles.popoverActionsSpacer)} />
               <Button
-                label="Apply"
+                label={t('@astryx.table.filter.apply')}
                 variant="primary"
                 size="sm"
                 onClick={handleApply}
@@ -908,7 +911,7 @@ function PopoverFilterTrigger({
       }>
       <button
         type="button"
-        aria-label={`Filter ${header}`}
+        aria-label={t('@astryx.tableFiltering.filterByColumn', {header})}
         aria-haspopup="dialog"
         {...stylex.props(
           filterStyles.triggerButton,
@@ -928,9 +931,7 @@ function PopoverFilterTrigger({
 // Helper
 // =============================================================================
 
-function getHeaderString(
-  column: TableColumn<Record<string, unknown>>,
-): string {
+function getHeaderString(column: TableColumn<Record<string, unknown>>): string {
   if (typeof column.header === 'string') {
     return column.header;
   }