@astryxdesign/core 0.1.6 → 0.1.7-canary.0a6de96

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

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/types.ts

@@ -223,13 +223,13 @@ export interface TableColumn<T extends Record<string, unknown>> {
 /** Props passed through the plugin pipeline for the `<table>` element */
 export interface TableRenderProps {
   htmlProps: HTMLAttributes<HTMLTableElement>;
-  styles: StyleXStyles[];
+  xstyle: StyleXStyles[];
 }
 
 /** Props passed through the plugin pipeline for the header `<tr>` */
 export interface HeaderRowRenderProps {
   htmlProps: HTMLAttributes<HTMLTableRowElement>;
-  styles: StyleXStyles[];
+  xstyle: StyleXStyles[];
   children: ReactNode;
 }
 
@@ -250,7 +250,7 @@ export interface HeaderRowRenderProps {
  */
 export interface HeaderCellRenderProps {
   htmlProps: ThHTMLAttributes<HTMLTableCellElement>;
-  styles: StyleXStyles[];
+  xstyle: StyleXStyles[];
   /** Content rendered before the header label. */
   before?: ReactNode;
   /** The header label content. Initialized from `column.header ?? column.key`. Plugins may wrap or replace. */
@@ -286,7 +286,7 @@ export interface HeaderCellRenderProps {
 /** Props passed through the plugin pipeline for each body `<tr>` */
 export interface BodyRowRenderProps {
   htmlProps: HTMLAttributes<HTMLTableRowElement>;
-  styles: StyleXStyles[];
+  xstyle: StyleXStyles[];
   children: ReactNode;
   /** Ref for the `<tr>` element. Plugins can set this to access the row DOM node. */
   ref?: Ref<HTMLTableRowElement>;
@@ -295,7 +295,7 @@ export interface BodyRowRenderProps {
 /** Props passed through the plugin pipeline for each body `<td>` */
 export interface BodyCellRenderProps {
   htmlProps: TdHTMLAttributes<HTMLTableCellElement>;
-  styles: StyleXStyles[];
+  xstyle: StyleXStyles[];
   /**
    * Right-click context-menu actions for this body cell. Plugins append their
    * actions in `transformBodyCell`; BaseTable concatenates the arrays across
@@ -341,7 +341,7 @@ export interface ScrollWrapperRenderProps {
   htmlProps: HTMLAttributes<HTMLDivElement> & {
     ref?: Ref<HTMLDivElement>;
   };
-  styles: StyleXStyles[];
+  xstyle: StyleXStyles[];
   /** Content rendered before the `<table>`, inside the scroll container. */
   beforeTable?: ReactNode;
   /** Content rendered after the `<table>`, inside the scroll container. */
@@ -389,8 +389,7 @@ export interface TableContextAction {
  * every render.
  */
 export type TableContextActions =
-  | TableContextAction[]
-  | (() => TableContextAction[]);
+  TableContextAction[] | (() => TableContextAction[]);
 
 // =============================================================================
 // Plugin Interface
@@ -543,7 +542,14 @@ export interface BaseTableProps<
 
   /** Children mode — render `<tr>`/`<td>` directly instead of data-driven */
   children?: ReactNode;
-  /** Additional HTML attributes for the `<table>` element */
+  /**
+   * Additional HTML attributes for the `<table>` element.
+   *
+   * @deprecated Pass `className`, `style`, `xstyle`, and other HTML
+   * attributes directly on the component instead — they now reach the root
+   * `<table>` and win over `tableProps` on conflicts. Migrate with
+   * `npx astryx upgrade --codemod migrate-table-tableprops-to-direct-props`.
+   */
   tableProps?: HTMLAttributes<HTMLTableElement>;
   /**
    * Optional wrapper rendered around the `<table>` element, inside the
@@ -551,15 +557,15 @@ export interface BaseTableProps<
    * horizontal scroll container so plugin chrome (pagination, toolbars)
    * stays outside the scrollable area.
    *
-   * Receives `htmlProps` (including an optional `ref`) and `styles` produced
+   * Receives `htmlProps` (including an optional `ref`) and `xstyle` produced
    * by the plugin `transformScrollWrapper` pipeline, plus `beforeTable`/`afterTable`
-   * chrome. The wrapper must spread `htmlProps` (and apply `styles`) onto its
+   * chrome. The wrapper must spread `htmlProps` (and apply `xstyle`) onto its
    * scroll-container element so plugins can attach refs / scroll listeners.
    */
   scrollWrapper?: ComponentType<{
     children: ReactNode;
     htmlProps?: HTMLAttributes<HTMLDivElement> & {ref?: Ref<HTMLDivElement>};
-    styles?: StyleXStyles[];
+    xstyle?: StyleXStyles[];
     beforeTable?: ReactNode;
     afterTable?: ReactNode;
   }>;

package/src/Table/useTableFiltering.doc.mjs

@@ -23,7 +23,7 @@ export const docs = {
     },
     {
       name: 'variant',
-      type: "'popover' | 'inline'",
+      type: "'popover' | 'inline' | 'inline-compact'",
       description: 'Display variant for filter controls.',
       default: "'popover'",
     },
@@ -50,7 +50,7 @@ export const docsZh = {
     },
     {
       name: 'variant',
-      type: "'popover' | 'inline'",
+      type: "'popover' | 'inline' | 'inline-compact'",
       description: '筛选控件的显示变体。',
       default: "'popover'",
     },