@astryxdesign/core 0.1.8 → 0.1.9-canary.02ef052

package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js

@@ -16,6 +16,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../../../theme/tokens.stylex.js";
 import { spacingVars, colorVars, radiusVars } from "../../../theme/tokens.stylex.js";
 import { Icon } from "../../../Icon/index.js";
+import { rtlStyles } from "../../../utils/index.js";
 import { resolveContextActions } from "../../tableContextMenu.js";
 import { useTranslator } from "../../../i18n/index.js";
 
@@ -231,17 +232,20 @@ function ExpansionChevron({
     "aria-label": ariaLabel,
     "aria-expanded": isExpanded,
     children: /*#__PURE__*/_jsx("span", {
-      ...{
-        0: {
-          className: "x3nfvp2 x11xpdln xx6bhzk"
-        },
-        1: {
-          className: "x3nfvp2 x11xpdln xx6bhzk x1iffjtl"
-        }
-      }[!!isExpanded << 0],
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: "chevronRight",
-        size: "xsm"
+      ...stylex.props(rtlStyles.mirror),
+      children: /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x3nfvp2 x11xpdln xx6bhzk"
+          },
+          1: {
+            className: "x3nfvp2 x11xpdln xx6bhzk x1iffjtl"
+          }
+        }[!!isExpanded << 0],
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronRight",
+          size: "xsm"
+        })
       })
     })
   });
@@ -355,17 +359,20 @@ export function useTableRowExpansion(config) {
             onClick: () => onToggleExpandAll(!allExpanded),
             "aria-label": allExpanded ? t('@astryx.tableRowExpansion.collapseAllRows') : t('@astryx.tableRowExpansion.expandAllRows'),
             children: /*#__PURE__*/_jsx("span", {
-              ...{
-                0: {
-                  className: "x3nfvp2 x11xpdln xx6bhzk"
-                },
-                1: {
-                  className: "x3nfvp2 x11xpdln xx6bhzk x1iffjtl"
-                }
-              }[!!allExpanded << 0],
-              children: /*#__PURE__*/_jsx(Icon, {
-                icon: "chevronRight",
-                size: "xsm"
+              ...stylex.props(rtlStyles.mirror),
+              children: /*#__PURE__*/_jsx("span", {
+                ...{
+                  0: {
+                    className: "x3nfvp2 x11xpdln xx6bhzk"
+                  },
+                  1: {
+                    className: "x3nfvp2 x11xpdln xx6bhzk x1iffjtl"
+                  }
+                }[!!allExpanded << 0],
+                children: /*#__PURE__*/_jsx(Icon, {
+                  icon: "chevronRight",
+                  size: "xsm"
+                })
               })
             })
           })
@@ -391,10 +398,13 @@ export function useTableRowExpansion(config) {
           id: 'row-expansion-toggle',
           group: 'row-expansion',
           label: isExpanded ? 'Collapse row' : 'Expand row',
-          icon: /*#__PURE__*/_jsx(Icon, {
-            icon: isExpanded ? 'chevronDown' : 'chevronRight',
-            size: "xsm",
-            "aria-hidden": true
+          icon: /*#__PURE__*/_jsx("span", {
+            ...stylex.props(rtlStyles.mirror),
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: isExpanded ? 'chevronDown' : 'chevronRight',
+              size: "xsm",
+              "aria-hidden": true
+            })
           }),
           onSelect: () => onToggle(key)
         }]

package/dist/Table/plugins/rowStatus/index.d.ts

@@ -0,0 +1,3 @@
+export { useTableRowStatus } from './useTableRowStatus';
+export type { UseTableRowStatusConfig, TableRowStatus, } from './useTableRowStatus';
+//# sourceMappingURL=index.d.ts.map

package/dist/Table/plugins/rowStatus/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowStatus/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EACV,uBAAuB,EACvB,cAAc,GACf,MAAM,qBAAqB,CAAC"}

package/dist/Table/plugins/rowStatus/index.js

@@ -0,0 +1,3 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export { useTableRowStatus } from "./useTableRowStatus.js";

package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts

@@ -0,0 +1,60 @@
+import { type IconName } from '../../../Icon';
+import type { TablePlugin } from '../../types';
+/**
+ * Semantic status colors, resolved to the design system's icon color tokens.
+ * Prefer these over raw CSS so status colors stay consistent with the theme.
+ */
+export type TableRowStatusColor = 'accent' | 'success' | 'error' | 'warning' | 'red' | 'orange' | 'green' | 'yellow' | 'blue' | 'gray';
+/**
+ * A row's status indicator. `color` accepts a semantic status color
+ * (mapped to a theme token) or any raw CSS color string as an escape hatch.
+ * By default the plugin renders a colored status dot. Provide `icon` to signal
+ * status by shape as well as color, which is more accessible when several
+ * statuses coexist. `label` is required so the status is never conveyed by
+ * color alone — it names the indicator for assistive technology and shows on
+ * hover. Return `null` for rows with no status.
+ */
+export interface TableRowStatus {
+    /** Semantic status color (preferred) or a raw CSS color string. */
+    color: TableRowStatusColor | (string & {});
+    /** Optional icon rendered as the signifier instead of the dot (shape as an a11y differentiator). */
+    icon?: IconName;
+    /**
+     * Accessible name for the status, announced to assistive technology and
+     * shown in a tooltip on hover. Required: a status must never be conveyed by
+     * color alone.
+     */
+    label: string;
+}
+/** Configuration for {@link useTableRowStatus}. */
+export interface UseTableRowStatusConfig<T extends Record<string, unknown>> {
+    /**
+     * Derive the status indicator for a row. Return `null` for no indicator.
+     * Memoize with `useCallback` for a stable plugin identity across renders.
+     *
+     * @example
+     * ```
+     * getStatus: row =>
+     *   row.hasError ? {color: 'error', icon: 'error', label: 'Error'} : null
+     * ```
+     */
+    getStatus: (item: T) => TableRowStatus | null;
+}
+/**
+ * Returns a {@link TablePlugin} that prepends a narrow column signaling per-row
+ * status: a colored status dot by default, or an icon when `icon` is provided
+ * (shape + color is more accessible than color alone).
+ *
+ * @example
+ * ```
+ * const rowStatus = useTableRowStatus<Row>({
+ *   getStatus: row =>
+ *     row.state === 'error'
+ *       ? {color: 'error', icon: 'error', label: 'Error'}
+ *       : null,
+ * });
+ * <Table data={data} columns={columns} idKey="id" plugins={{rowStatus}} />;
+ * ```
+ */
+export declare function useTableRowStatus<T extends Record<string, unknown>>(config: UseTableRowStatusConfig<T>): TablePlugin<T>;
+//# sourceMappingURL=useTableRowStatus.d.ts.map

package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableRowStatus.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowStatus/useTableRowStatus.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,eAAe,CAAC;AAElE,OAAO,KAAK,EAAc,WAAW,EAAC,MAAM,aAAa,CAAC;AAE1D;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,SAAS,GACT,OAAO,GACP,SAAS,GACT,KAAK,GACL,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,MAAM,GACN,MAAM,CAAC;AA6BX;;;;;;;;GAQG;AACH,MAAM,WAAW,cAAc;IAC7B,mEAAmE;IACnE,KAAK,EAAE,mBAAmB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC3C,oGAAoG;IACpG,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,mDAAmD;AACnD,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE;;;;;;;;;OASG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,cAAc,GAAG,IAAI,CAAC;CAC/C;AA2BD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACjC,WAAW,CAAC,CAAC,CAAC,CA6ChB"}

package/dist/Table/plugins/rowStatus/useTableRowStatus.js

@@ -0,0 +1,145 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useTableRowStatus.tsx
+ * @input React, StyleX, Icon, Table types
+ * @output Exports useTableRowStatus hook + config type
+ * @position Row-status plugin; consumed by Table via plugins prop
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Table/index.ts (exports)
+ */
+import { useMemo } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { Icon } from "../../../Icon/index.js";
+import { Tooltip } from "../../../Tooltip/index.js";
+
+/**
+ * Semantic status colors, resolved to the design system's icon color tokens.
+ * Prefer these over raw CSS so status colors stay consistent with the theme.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const SEMANTIC_COLORS = {
+  accent: 'var(--color-icon-accent)',
+  success: 'var(--color-icon-green)',
+  error: 'var(--color-icon-red)',
+  warning: 'var(--color-icon-orange)',
+  red: 'var(--color-icon-red)',
+  orange: 'var(--color-icon-orange)',
+  green: 'var(--color-icon-green)',
+  yellow: 'var(--color-icon-yellow)',
+  blue: 'var(--color-icon-blue)',
+  gray: 'var(--color-icon-gray)'
+};
+
+/** Icon colors that map cleanly from a semantic status color. */
+const ICON_COLOR_BY_STATUS = {
+  accent: 'accent',
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  red: 'red',
+  orange: 'warning',
+  green: 'green',
+  yellow: 'warning',
+  blue: 'blue',
+  gray: 'gray'
+};
+
+/**
+ * A row's status indicator. `color` accepts a semantic status color
+ * (mapped to a theme token) or any raw CSS color string as an escape hatch.
+ * By default the plugin renders a colored status dot. Provide `icon` to signal
+ * status by shape as well as color, which is more accessible when several
+ * statuses coexist. `label` is required so the status is never conveyed by
+ * color alone — it names the indicator for assistive technology and shows on
+ * hover. Return `null` for rows with no status.
+ */
+
+/** Configuration for {@link useTableRowStatus}. */
+
+// The status column holds a small centered dot (or an icon when provided).
+// A fixed narrow width keeps every row's indicator aligned in one gutter.
+const STATUS_COLUMN_WIDTH = {
+  type: 'pixel',
+  value: 28
+};
+
+/** Resolve a semantic color name to a token, or pass a raw CSS color through. */
+function resolveColor(color) {
+  return SEMANTIC_COLORS[color] ?? color;
+}
+const _temp = {
+  kzqmXN: "x1xc55vz",
+  kZKoxP: "xdk7pt",
+  kaIpWk: "x16rqkct",
+  kmuXW: "x2lah0s",
+  "$$css": true
+};
+const styles = {
+  dot: color => [_temp, {
+    kWkggS: color != null ? "xl8spv7" : color,
+    $$css: true
+  }, {
+    "--x-backgroundColor": color != null ? color : undefined
+  }]
+};
+
+/**
+ * Returns a {@link TablePlugin} that prepends a narrow column signaling per-row
+ * status: a colored status dot by default, or an icon when `icon` is provided
+ * (shape + color is more accessible than color alone).
+ *
+ * @example
+ * ```
+ * const rowStatus = useTableRowStatus<Row>({
+ *   getStatus: row =>
+ *     row.state === 'error'
+ *       ? {color: 'error', icon: 'error', label: 'Error'}
+ *       : null,
+ * });
+ * <Table data={data} columns={columns} idKey="id" plugins={{rowStatus}} />;
+ * ```
+ */
+export function useTableRowStatus(config) {
+  const {
+    getStatus
+  } = config;
+  return useMemo(() => ({
+    transformColumns(columns) {
+      const statusColumn = {
+        key: '__rowStatus',
+        header: '',
+        width: STATUS_COLUMN_WIDTH,
+        resizable: false,
+        renderCell: item => {
+          const status = getStatus(item);
+          if (!status) {
+            return null;
+          }
+          const signifier = status.icon ? /*#__PURE__*/_jsx(Icon, {
+            icon: status.icon,
+            size: "xsm",
+            color: ICON_COLOR_BY_STATUS[status.color] ?? 'primary'
+          }) : /*#__PURE__*/_jsx("span", {
+            ...stylex.props(styles.dot(resolveColor(status.color)))
+          });
+          return /*#__PURE__*/_jsx(Tooltip, {
+            content: status.label,
+            children: /*#__PURE__*/_jsx("span", {
+              ...{
+                className: "x78zum5 x6s0dn4 xl56j7k"
+              },
+              role: "img",
+              "aria-label": status.label,
+              children: signifier
+            })
+          });
+        }
+      };
+      return [statusColumn, ...columns];
+    }
+  }), [getStatus]);
+}

package/dist/Table/plugins/selection/useTableSelection.d.ts

@@ -19,6 +19,19 @@ export interface UseTableSelectionConfig<T extends Record<string, unknown>> {
     getIsItemSelectable?: (item: T) => boolean;
     /** Is this row's checkbox interactive? Disabled rows show disabled checkbox. @default () => true */
     getIsItemEnabled?: (item: T) => boolean;
+    /**
+     * Derive a human-readable identity for a row, used in the row checkbox's
+     * hidden label as `Select ${getRowLabel(item)}`. Without it, every row
+     * checkbox announces an undifferentiated "Select row" to screen readers.
+     * With `getRowLabel: item => item.name`, checkbox accessible names become
+     * "Select Alice", "Select Bob", and so on.
+     *
+     * @example
+     * ```
+     * getRowLabel: item => item.name
+     * ```
+     */
+    getRowLabel?: (item: T) => string;
 }
 export declare function useTableSelection<T extends Record<string, unknown>>(config: UseTableSelectionConfig<T>): TablePlugin<T>;
 //# sourceMappingURL=useTableSelection.d.ts.map

package/dist/Table/plugins/selection/useTableSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSelection.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/selection/useTableSelection.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAC,WAAW,EAAkC,MAAM,aAAa,CAAC;AAQ9E,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE,uCAAuC;IACvC,iBAAiB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,YAAY,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,CAAC,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAC9D,kDAAkD;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE;QAAC,aAAa,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IACvD,mDAAmD;IACnD,gBAAgB,EAAE,MAAM,OAAO,CAAC;IAChC,iFAAiF;IACjF,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAC;IACnC,+FAA+F;IAC/F,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C,oGAAoG;IACpG,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;CACzC;AAkND,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACjC,WAAW,CAAC,CAAC,CAAC,CAmFhB"}
+{"version":3,"file":"useTableSelection.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/selection/useTableSelection.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAC,WAAW,EAAkC,MAAM,aAAa,CAAC;AAQ9E,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE,uCAAuC;IACvC,iBAAiB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,YAAY,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,CAAC,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAC9D,kDAAkD;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE;QAAC,aAAa,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IACvD,mDAAmD;IACnD,gBAAgB,EAAE,MAAM,OAAO,CAAC;IAChC,iFAAiF;IACjF,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAC;IACnC,+FAA+F;IAC/F,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C,oGAAoG;IACpG,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC;;;;;;;;;;;OAWG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CACnC;AAuND,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACjC,WAAW,CAAC,CAAC,CAAC,CAsFhB"}

package/dist/Table/plugins/selection/useTableSelection.js

@@ -180,11 +180,14 @@ function SelectionCellContentInner({
   const isSelected = useIsItemSelected(store, item);
   const selectable = config.getIsItemSelectable?.(item) ?? true;
   const enabled = config.getIsItemEnabled?.(item) ?? true;
+  const rowLabel = config.getRowLabel?.(item);
   if (!selectable) {
     return null;
   }
   return /*#__PURE__*/_jsx(CheckboxInput, {
-    label: t('@astryx.table.selection.selectRow'),
+    label: rowLabel != null ? t('@astryx.table.selection.selectRowNamed', {
+      label: rowLabel
+    }) : t('@astryx.table.selection.selectRow'),
     isLabelHidden: true,
     value: isSelected,
     onChange: () => store.getConfig().onSelectItem({
@@ -276,6 +279,9 @@ export function useTableSelection(config) {
           }
           applyRowSelectionStyle(el, store.getConfig().getIsItemSelected(item));
         });
+        return () => {
+          unsub();
+        };
       };
       return {
         ...props,

package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js

@@ -169,7 +169,7 @@ const stickyStyles = {
   }
 };
 
-// Soft drop shadow over the scrolling region (matches the EPS sticky treatment).
+// Soft drop shadow over the scrolling region (a standard sticky-column shadow treatment).
 // border-collapse tables don't paint box-shadow on cells in Chromium, so it's a
 // ::after gradient strip just past the pinned edge (visible thanks to the cell's
 // overflow: visible). Opacity is gated by the scroll-state variable above.

package/dist/Table/plugins/tree/useTableTreeData.d.ts

@@ -26,6 +26,22 @@ export interface UseTableTreeDataConfig<T extends Record<string, unknown>> {
      * identically to a Table without the plugin.
      */
     hasExpandableRows: boolean;
+    /**
+     * Aggregate expansion state across every expandable row. When provided
+     * together with `onExpandAll`/`onCollapseAll`, the tree column header shows
+     * an expand-all toggle. `useTableTreeState` supplies all three.
+     */
+    isAllExpanded?: boolean | 'indeterminate';
+    /** Expand every expandable row. Wired to the header expand-all control. */
+    onExpandAll?: () => void;
+    /** Collapse every row. Wired to the header expand-all control. */
+    onCollapseAll?: () => void;
+    /**
+     * Show the expand-all/collapse-all toggle in the tree column header. Needs
+     * `isAllExpanded` and `onExpandAll`/`onCollapseAll` to be present.
+     * @default false
+     */
+    hasExpandAllControl?: boolean;
     /**
      * Indent step per level, as spacing tokens.
      * @default 'md'

package/dist/Table/plugins/tree/useTableTreeData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableTreeData.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/tree/useTableTreeData.tsx"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EAAC,WAAW,EAAkC,MAAM,aAAa,CAAC;AAO9E,8DAA8D;AAC9D,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACvE,qEAAqE;IACrE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,gBAAgB,GAAG,SAAS,CAAC;IACtD,gCAAgC;IAChC,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,iBAAiB,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAqQD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,WAAW,CAAC,CAAC,CAAC,CAgJhB"}
+{"version":3,"file":"useTableTreeData.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/tree/useTableTreeData.tsx"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EACV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAOrB,8DAA8D;AAC9D,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACvE,qEAAqE;IACrE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,gBAAgB,GAAG,SAAS,CAAC;IACtD,gCAAgC;IAChC,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,iBAAiB,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAC1C,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+TD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,WAAW,CAAC,CAAC,CAAC,CAoMhB"}

package/dist/Table/plugins/tree/useTableTreeData.js

@@ -33,7 +33,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../../../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars } from "../../../theme/tokens.stylex.js";
 import { Icon } from "../../../Icon/index.js";
-import { mergeRefs } from "../../../utils/index.js";
+import { mergeRefs, rtlStyles } from "../../../utils/index.js";
 import { useTranslator } from "../../../i18n/index.js";
 
 // =============================================================================
@@ -164,17 +164,69 @@ function TreeExpander({
     "aria-label": isExpanded ? t('@astryx.tableTree.collapseRow') : t('@astryx.tableTree.expandRow'),
     "aria-expanded": isExpanded,
     children: /*#__PURE__*/_jsx("span", {
-      ...{
-        0: {
-          className: "x3nfvp2 x11xpdln xx6bhzk x7p49u4"
-        },
-        1: {
-          className: "x3nfvp2 x11xpdln xx6bhzk x1iffjtl"
-        }
-      }[!!isExpanded << 0],
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: "chevronRight",
-        size: "xsm"
+      ...stylex.props(rtlStyles.mirror),
+      children: /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x3nfvp2 x11xpdln xx6bhzk x7p49u4"
+          },
+          1: {
+            className: "x3nfvp2 x11xpdln xx6bhzk x1iffjtl"
+          }
+        }[!!isExpanded << 0],
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronRight",
+          size: "xsm"
+        })
+      })
+    })
+  });
+}
+
+/**
+ * Header expand-all/collapse-all toggle. Rendered in the tree column header
+ * when `hasExpandAllControl` is set and the state hook supplies the aggregate
+ * `isAllExpanded` plus `onExpandAll`/`onCollapseAll`. Shares the chevron
+ * affordance with the per-row expander; the chevron points down (expanded)
+ * only when every expandable row is expanded, matching the row expander.
+ */
+function TreeExpandAllToggle({
+  isAllExpanded,
+  onExpandAll,
+  onCollapseAll
+}) {
+  const t = useTranslator();
+  const allExpanded = isAllExpanded === true;
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    ...{
+      className: "x3nfvp2 x6s0dn4 xl56j7k xvy4d1p xxk0z11 xx3sua9 x1ypdohk xv9yike x1gbuem2 xx6bhzk x1717udv x2lah0s x1ilzqfv x1cqbx0l"
+    },
+    onClick: e => {
+      e.stopPropagation();
+      if (allExpanded) {
+        onCollapseAll();
+      } else {
+        onExpandAll();
+      }
+    },
+    "aria-label": allExpanded ? t('@astryx.tableTree.collapseAllRows') : t('@astryx.tableTree.expandAllRows'),
+    "aria-expanded": allExpanded,
+    children: /*#__PURE__*/_jsx("span", {
+      ...stylex.props(rtlStyles.mirror),
+      children: /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x3nfvp2 x11xpdln xx6bhzk x7p49u4"
+          },
+          1: {
+            className: "x3nfvp2 x11xpdln xx6bhzk x1iffjtl"
+          }
+        }[!!allExpanded << 0],
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronRight",
+          size: "xsm"
+        })
       })
     })
   });
@@ -255,6 +307,11 @@ export function useTableTreeData(config) {
   // react-compiler lint.
   const columnsCacheRef = useRef(null);
 
+  // The resolved tree column key, written by transformColumns (pipeline step 1)
+  // and read by transformHeaderCell (step 4) to place the expand-all toggle on
+  // the same column that carries the row expanders.
+  const treeKeyRef = useRef(undefined);
+
   // The plugin object is created once per store and never changes shape:
   // every transform reads the live config through the store, and
   // internally no-ops when hasExpandableRows is false. Swapping between
@@ -297,6 +354,7 @@ export function useTableTreeData(config) {
         // been hidden by columnSettings — the expander must not vanish).
         const configuredExists = treeColumnKey != null && columns.some(c => c.key === treeColumnKey);
         const treeKey = configuredExists ? treeColumnKey : columns.find(c => !c.key.startsWith('__'))?.key ?? columns[0]?.key;
+        treeKeyRef.current = treeKey;
 
         // Migration guarantee: flat data renders identically to a Table
         // without the plugin.
@@ -326,6 +384,41 @@ export function useTableTreeData(config) {
         };
         return output;
       },
+      transformHeaderCell(props, column) {
+        const {
+          hasExpandableRows,
+          hasExpandAllControl,
+          isAllExpanded,
+          onExpandAll,
+          onCollapseAll
+        } = store.getConfig();
+
+        // Only the tree column carries the toggle, and only when the control
+        // is enabled, the data is actually hierarchical, and the state hook
+        // supplied the aggregate state plus both handlers. Otherwise this is a
+        // pass-through (flat data stays a no-op).
+        if (!hasExpandAllControl || !hasExpandableRows || column.key !== treeKeyRef.current || isAllExpanded === undefined || !onExpandAll || !onCollapseAll) {
+          return props;
+        }
+
+        // Wrap the header label + the toggle in one inline-flex row so the
+        // chevron sits to the LEFT of the title on the same line. BaseTable
+        // only applies its own flex row for the `after` slot, so a bare
+        // `before` would stack above the label in the block-level <th>.
+        return {
+          ...props,
+          content: /*#__PURE__*/_jsxs("span", {
+            ...{
+              className: "x3nfvp2 x6s0dn4 xzye2dw xeuugli"
+            },
+            children: [/*#__PURE__*/_jsx(TreeExpandAllToggle, {
+              isAllExpanded: isAllExpanded,
+              onExpandAll: onExpandAll,
+              onCollapseAll: onCollapseAll
+            }), props.content]
+          })
+        };
+      },
       transformBodyRow(props, item) {
         // Attach a ref that subscribes to the store for imperative row
         // ARIA. The ref returns a cleanup so React unsubscribes on

package/dist/Table/plugins/tree/useTableTreeState.d.ts

@@ -42,6 +42,12 @@ export interface UseTableTreeStateResult<T extends Record<string, unknown>> {
     treeConfig: UseTableTreeDataConfig<T>;
     /** The current expanded row ids. */
     expandedIds: ReadonlySet<string>;
+    /**
+     * Aggregate expansion state across every expandable row: `true` when all are
+     * expanded, `false` when none are, `'indeterminate'` when some but not all
+     * are. Drives the header expand-all control. Reports `false` for flat data.
+     */
+    isAllExpanded: boolean | 'indeterminate';
     /** Expand every expandable row in the tree. */
     expandAll: () => void;
     /** Collapse every row. */

package/dist/Table/plugins/tree/useTableTreeState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableTreeState.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/tree/useTableTreeState.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAEV,sBAAsB,EACvB,MAAM,oBAAoB,CAAC;AAM5B,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE,kEAAkE;IAClE,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,2EAA2E;IAC3E,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC,CAAC;IAC3D;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8FAA8F;IAC9F,kBAAkB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,oEAAoE;IACpE,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACzD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE,qEAAqE;IACrE,WAAW,EAAE,CAAC,EAAE,CAAC;IACjB,gDAAgD;IAChD,UAAU,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC;IACtC,oCAAoC;IACpC,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,+CAA+C;IAC/C,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,0BAA0B;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAMD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACjC,uBAAuB,CAAC,CAAC,CAAC,CAoK5B"}
+{"version":3,"file":"useTableTreeState.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/tree/useTableTreeState.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAEV,sBAAsB,EACvB,MAAM,oBAAoB,CAAC;AAM5B,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE,kEAAkE;IAClE,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,2EAA2E;IAC3E,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC,CAAC;IAC3D;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8FAA8F;IAC9F,kBAAkB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,oEAAoE;IACpE,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACzD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE,qEAAqE;IACrE,WAAW,EAAE,CAAC,EAAE,CAAC;IACjB,gDAAgD;IAChD,UAAU,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC;IACtC,oCAAoC;IACpC,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC;;;;OAIG;IACH,aAAa,EAAE,OAAO,GAAG,eAAe,CAAC;IACzC,+CAA+C;IAC/C,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,0BAA0B;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAMD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACjC,uBAAuB,CAAC,CAAC,CAAC,CA0M5B"}

package/dist/Table/plugins/tree/useTableTreeState.js

@@ -141,6 +141,23 @@ export function useTableTreeState(config) {
     return idsAcc;
   }, [data, getId, getChildren, getIsExpandable]);
   const hasExpandableRows = allExpandableIds.length > 0;
+
+  // Aggregate state for the header expand-all control. Only expandable ids
+  // count toward the total, so expanded ids that match a leaf or no row at
+  // all never skew the tally.
+  const isAllExpanded = useMemo(() => {
+    if (!hasExpandableRows) {
+      return false;
+    }
+    const expandedCount = allExpandableIds.filter(id => expandedIds.has(id)).length;
+    if (expandedCount === 0) {
+      return false;
+    }
+    if (expandedCount === allExpandableIds.length) {
+      return true;
+    }
+    return 'indeterminate';
+  }, [hasExpandableRows, allExpandableIds, expandedIds]);
   const onToggleItem = useCallback(item => {
     const id = getId(item);
     const next = new Set(expandedIdsRef.current);
@@ -162,13 +179,17 @@ export function useTableTreeState(config) {
     getRowMeta,
     onToggleItem,
     hasExpandableRows,
+    isAllExpanded,
+    onExpandAll: expandAll,
+    onCollapseAll: collapseAll,
     indent,
     treeColumnKey
-  }), [getRowMeta, onToggleItem, hasExpandableRows, indent, treeColumnKey]);
+  }), [getRowMeta, onToggleItem, hasExpandableRows, isAllExpanded, expandAll, collapseAll, indent, treeColumnKey]);
   return {
     visibleData,
     treeConfig,
     expandedIds,
+    isAllExpanded,
     expandAll,
     collapseAll
   };