@astryxdesign/core 0.1.2 → 0.1.3-canary.1e94ba0

package/dist/Table/plugins/pagination/paginateData.js

@@ -15,7 +15,8 @@
  *
  * @param data - Full data array
  * @param page - Current page number (1-based)
- * @param pageSize - Number of items per page
+ * @param pageSize - Number of items per page; coerced to a positive integer,
+ *   non-finite values fall back to 10
  * @returns Slice of data for the current page
  *
  * @example
@@ -27,6 +28,10 @@
  * ```
  */
 export function paginateData(data, page, pageSize) {
-  const start = (page - 1) * pageSize;
-  return data.slice(start, start + pageSize);
+  // Same coercion as Pagination and useTablePagination: a 0/NaN/negative
+  // pageSize would slice every page empty while the pagination chrome still
+  // renders page buttons.
+  const size = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 10;
+  const start = (page - 1) * size;
+  return data.slice(start, start + size);
 }

package/dist/Table/plugins/pagination/useTablePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTablePagination.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/pagination/useTablePagination.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AA+B7C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,wBAAwB;IAGvC,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IAEb,sEAAsE;IACtE,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAIrC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAIlB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAI3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAE1D;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEnB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAE/C;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAInC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,MAAM,EAAE,wBAAwB,GAC/B,WAAW,CAAC,CAAC,CAAC,CA0FhB"}
+{"version":3,"file":"useTablePagination.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/pagination/useTablePagination.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AA+B7C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,wBAAwB;IAGvC,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IAEb,sEAAsE;IACtE,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAIrC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAIlB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAI3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAE1D;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEnB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAE/C;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAInC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,MAAM,EAAE,wBAAwB,GAC/B,WAAW,CAAC,CAAC,CAAC,CAiGhB"}

package/dist/Table/plugins/pagination/useTablePagination.js

@@ -104,7 +104,7 @@ export function useTablePagination(config) {
     totalItems,
     totalPages: totalPagesProp,
     hasMore,
-    pageSize = 10,
+    pageSize: pageSizeConfig = 10,
     onPageSizeChange,
     pageSizeOptions,
     variant = 'pages',
@@ -113,6 +113,11 @@ export function useTablePagination(config) {
     align = 'center',
     label = 'Table pagination'
   } = config;
+
+  // Same guard as Pagination itself: 0/NaN/negative pageSize would produce an
+  // Infinity/NaN totalPages here, which bypasses Pagination's own coercion
+  // because it is passed down as the explicit totalPages prop.
+  const pageSize = Number.isFinite(pageSizeConfig) ? Math.max(1, Math.floor(pageSizeConfig)) : 10;
   const computedTotalPages = totalPagesProp ?? (totalItems != null ? Math.ceil(totalItems / pageSize) : undefined);
 
   // Build Pagination props

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

@@ -0,0 +1,3 @@
+export { useTableRowExpansion, useTableRowExpansionState, } from './useTableRowExpansion';
+export type { UseTableRowExpansionConfig } from './useTableRowExpansion';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowExpansion/index.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,oBAAoB,EACpB,yBAAyB,GAC1B,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAC,0BAA0B,EAAC,MAAM,wBAAwB,CAAC"}

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

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

package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts

@@ -0,0 +1,90 @@
+import type { TablePlugin } from '../../types';
+/**
+ * Configuration for useTableRowExpansion (inherited-columns mode).
+ *
+ * Child rows use the same columns as their parents, with indentation on the
+ * first content column. The consumer provides a **flat** data array (use
+ * {@link useTableRowExpansionState} to flatten a tree) and a `getDepth`
+ * function so the plugin knows each row's nesting level.
+ */
+export interface UseTableRowExpansionConfig<T extends Record<string, unknown>> {
+    /** Set of currently-expanded row keys. */
+    expandedKeys: Set<string>;
+    /** Called when a row's expansion is toggled. */
+    onToggle: (key: string) => void;
+    /** Derive a stable unique key from a row item. */
+    getRowKey: (item: T) => string;
+    /** Return the children of a row (used to determine expandability). */
+    getChildren: (item: T) => T[];
+    /** Return the depth of a row in the hierarchy (0 = top-level). */
+    getDepth?: (item: T) => number;
+    /** Optionally control which rows are expandable. @default checks getChildren length */
+    getIsItemExpandable?: (item: T) => boolean;
+    /**
+     * When true, clicking anywhere on the row toggles expansion (in addition to
+     * the chevron button). @default false — only the chevron triggers expansion.
+     */
+    hasRowClickExpansion?: boolean;
+    /**
+     * State of the expand-all toggle in the header. `true` = all expanded,
+     * `false` = all collapsed, `'indeterminate'` = mixed. When provided
+     * (together with `onToggleExpandAll`), the header cell shows a toggle button.
+     */
+    isAllExpanded?: boolean | 'indeterminate';
+    /** Called when the expand-all header toggle is clicked. */
+    onToggleExpandAll?: (expand: boolean) => void;
+}
+/**
+ * Configuration for {@link useTableRowExpansionState}.
+ *
+ * Mirrors the shape of {@link useTableSelectionState}: you own the
+ * `expandedKeys` set (via `useState`), and the hook derives everything the
+ * plugin needs — the flattened `data`, per-row depth, expand/collapse
+ * handlers, and the expand-all toggle state.
+ */
+export interface UseTableRowExpansionStateConfig<T extends Record<string, unknown>> {
+    /** The full, un-flattened tree. */
+    baseData: T[];
+    /** Return the children of a row. Leaf rows return an empty array. */
+    getChildren: (item: T) => T[];
+    /** Derive a stable unique key from a row item. */
+    getRowKey: (item: T) => string;
+    /**
+     * Should this row be expandable? Rows that return `false` never show a
+     * chevron and are skipped by expand-all. @default rows with children
+     */
+    getIsItemExpandable?: (item: T) => boolean;
+    /** Controlled set of currently-expanded row keys. */
+    expandedKeys: Set<string>;
+    /** Setter for the controlled expanded keys. */
+    setExpandedKeys: React.Dispatch<React.SetStateAction<Set<string>>>;
+}
+export interface UseTableRowExpansionStateResult<T extends Record<string, unknown>> {
+    /** The flattened, currently-visible rows. Pass to `<Table data>`. */
+    data: T[];
+    /** Ready-to-use config for {@link useTableRowExpansion}. */
+    expansionConfig: UseTableRowExpansionConfig<T>;
+}
+/**
+ * Manages row-expansion state and derives the config for
+ * {@link useTableRowExpansion}. This is the recommended entry point — it
+ * removes the boilerplate of flattening the tree, tracking depth, and
+ * computing the expand-all state.
+ *
+ * @example
+ * ```tsx
+ * const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
+ * const {data, expansionConfig} = useTableRowExpansionState({
+ *   baseData: tree,
+ *   getChildren: item => item.children ?? [],
+ *   getRowKey: item => item.id,
+ *   expandedKeys,
+ *   setExpandedKeys,
+ * });
+ * const expansion = useTableRowExpansion(expansionConfig);
+ * <Table data={data} columns={columns} idKey="id" plugins={{expansion}} />;
+ * ```
+ */
+export declare function useTableRowExpansionState<T extends Record<string, unknown>>({ baseData, getChildren, getRowKey, getIsItemExpandable, expandedKeys, setExpandedKeys, }: UseTableRowExpansionStateConfig<T>): UseTableRowExpansionStateResult<T>;
+export declare function useTableRowExpansion<T extends Record<string, unknown>>(config: UseTableRowExpansionConfig<T>): TablePlugin<T>;
+//# sourceMappingURL=useTableRowExpansion.d.ts.map

package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableRowExpansion.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowExpansion/useTableRowExpansion.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EACV,WAAW,EAKZ,MAAM,aAAa,CAAC;AAMrB;;;;;;;GAOG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3E,0CAA0C;IAC1C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,sEAAsE;IACtE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,uFAAuF;IACvF,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAC1C,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,mCAAmC;IACnC,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,qEAAqE;IACrE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C,qDAAqD;IACrD,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,+CAA+C;IAC/C,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,qEAAqE;IACrE,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,4DAA4D;IAC5D,eAAe,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3E,QAAQ,EACR,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,YAAY,EACZ,eAAe,GAChB,EAAE,+BAA+B,CAAC,CAAC,CAAC,GAAG,+BAA+B,CAAC,CAAC,CAAC,CAyHzE;AAuGD,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpE,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAwOhB"}

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

@@ -0,0 +1,398 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useTableRowExpansion.tsx
+ * @input React, StyleX, Icon, Table types
+ * @output Exports useTableRowExpansion hook + config/state types
+ * @position Row-expansion 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 { useCallback, useMemo, useRef } from 'react';
+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 { resolveContextActions } from "../../tableContextMenu.js";
+
+// =============================================================================
+// Config
+// =============================================================================
+
+/**
+ * Configuration for useTableRowExpansion (inherited-columns mode).
+ *
+ * Child rows use the same columns as their parents, with indentation on the
+ * first content column. The consumer provides a **flat** data array (use
+ * {@link useTableRowExpansionState} to flatten a tree) and a `getDepth`
+ * function so the plugin knows each row's nesting level.
+ */
+
+/**
+ * Configuration for {@link useTableRowExpansionState}.
+ *
+ * Mirrors the shape of {@link useTableSelectionState}: you own the
+ * `expandedKeys` set (via `useState`), and the hook derives everything the
+ * plugin needs — the flattened `data`, per-row depth, expand/collapse
+ * handlers, and the expand-all toggle state.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Manages row-expansion state and derives the config for
+ * {@link useTableRowExpansion}. This is the recommended entry point — it
+ * removes the boilerplate of flattening the tree, tracking depth, and
+ * computing the expand-all state.
+ *
+ * @example
+ * ```tsx
+ * const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
+ * const {data, expansionConfig} = useTableRowExpansionState({
+ *   baseData: tree,
+ *   getChildren: item => item.children ?? [],
+ *   getRowKey: item => item.id,
+ *   expandedKeys,
+ *   setExpandedKeys,
+ * });
+ * const expansion = useTableRowExpansion(expansionConfig);
+ * <Table data={data} columns={columns} idKey="id" plugins={{expansion}} />;
+ * ```
+ */
+export function useTableRowExpansionState({
+  baseData,
+  getChildren,
+  getRowKey,
+  getIsItemExpandable,
+  expandedKeys,
+  setExpandedKeys
+}) {
+  const isExpandable = useCallback(item => getIsItemExpandable ? getIsItemExpandable(item) : getChildren(item).length > 0, [getIsItemExpandable, getChildren]);
+  const depthMap = useMemo(() => {
+    const map = new Map();
+    function walk(items, depth) {
+      for (const item of items) {
+        const key = getRowKey(item);
+        map.set(key, depth);
+        if (expandedKeys.has(key)) {
+          walk(getChildren(item), depth + 1);
+        }
+      }
+    }
+    walk(baseData, 0);
+    return map;
+  }, [baseData, getChildren, getRowKey, expandedKeys]);
+  const data = useMemo(() => {
+    const result = [];
+    function walk(items) {
+      for (const item of items) {
+        result.push(item);
+        const key = getRowKey(item);
+        if (expandedKeys.has(key)) {
+          walk(getChildren(item));
+        }
+      }
+    }
+    walk(baseData);
+    return result;
+  }, [baseData, getChildren, getRowKey, expandedKeys]);
+
+  // Every expandable key across the whole tree (drives expand-all).
+  const allExpandableKeys = useMemo(() => {
+    const keys = [];
+    function walk(items) {
+      for (const item of items) {
+        if (isExpandable(item)) {
+          keys.push(getRowKey(item));
+          walk(getChildren(item));
+        }
+      }
+    }
+    walk(baseData);
+    return keys;
+  }, [baseData, getChildren, getRowKey, isExpandable]);
+  const getDepth = useCallback(item => depthMap.get(getRowKey(item)) ?? 0, [depthMap, getRowKey]);
+  const onToggle = useCallback(key => {
+    setExpandedKeys(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, [setExpandedKeys]);
+  const isAllExpanded = useMemo(() => {
+    if (allExpandableKeys.length === 0) {
+      return false;
+    }
+    const expandedCount = allExpandableKeys.filter(k => expandedKeys.has(k)).length;
+    if (expandedCount === 0) {
+      return false;
+    }
+    if (expandedCount === allExpandableKeys.length) {
+      return true;
+    }
+    return 'indeterminate';
+  }, [allExpandableKeys, expandedKeys]);
+  const onToggleExpandAll = useCallback(expand => {
+    setExpandedKeys(expand ? new Set(allExpandableKeys) : new Set());
+  }, [setExpandedKeys, allExpandableKeys]);
+  const expansionConfig = useMemo(() => ({
+    expandedKeys,
+    onToggle,
+    getRowKey,
+    getChildren,
+    getDepth,
+    getIsItemExpandable,
+    isAllExpanded,
+    onToggleExpandAll
+  }), [expandedKeys, onToggle, getRowKey, getChildren, getDepth, getIsItemExpandable, isAllExpanded, onToggleExpandAll]);
+  return {
+    data,
+    expansionConfig
+  };
+}
+
+// =============================================================================
+// Styles
+// =============================================================================
+
+const EXPANSION_COLUMN_WIDTH = {
+  type: 'pixel',
+  value: 40
+};
+
+/** Indentation applied per depth level, in pixels. */
+const INDENT_PER_DEPTH = 24;
+const _temp = {
+  kZCmMZ: "xnvo3vl",
+  "$$css": true
+};
+const expansionStyles = {
+  indentedCell: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "xzye2dw",
+    $$css: true
+  },
+  indent: px => [_temp, {
+    "--x-paddingInlineStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`${px}px`)
+  }],
+  clickableRow: {
+    kkrTdU: "x1ypdohk",
+    $$css: true
+  }
+};
+
+// =============================================================================
+// Chevron
+// =============================================================================
+
+function ExpansionChevron({
+  isExpanded,
+  onToggle,
+  ariaLabel
+}) {
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    ...{
+      className: "x3nfvp2 x6s0dn4 xl56j7k xvy4d1p xxk0z11 xx3sua9 x1ypdohk xv9yike xefglzl xx6bhzk x1717udv x2lah0s x1ilzqfv x1cqbx0l"
+    },
+    onClick: e => {
+      e.stopPropagation();
+      onToggle();
+    },
+    "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"
+      })
+    })
+  });
+}
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+export function useTableRowExpansion(config) {
+  const {
+    expandedKeys,
+    onToggle,
+    getRowKey,
+    getChildren,
+    getDepth,
+    getIsItemExpandable,
+    hasRowClickExpansion = false,
+    isAllExpanded,
+    onToggleExpandAll
+  } = config;
+
+  // Track the first non-plugin column key for indentation.
+  const firstUserColumnKeyRef = useRef(null);
+  const expansionColumn = useMemo(() => ({
+    key: '__expansion',
+    header: '',
+    width: EXPANSION_COLUMN_WIDTH,
+    resizable: false,
+    renderCell: item => {
+      // Child rows (depth > 0) show their chevron inline in the first user
+      // column instead — don't double up here.
+      const depth = getDepth ? getDepth(item) : 0;
+      if (depth > 0) {
+        return null;
+      }
+      const key = getRowKey(item);
+      const expandable = getIsItemExpandable ? getIsItemExpandable(item) : getChildren(item).length > 0;
+      if (!expandable) {
+        return null;
+      }
+      const isExpanded = expandedKeys.has(key);
+      return /*#__PURE__*/_jsx(ExpansionChevron, {
+        isExpanded: isExpanded,
+        onToggle: () => onToggle(key),
+        ariaLabel: isExpanded ? 'Collapse row' : 'Expand row'
+      });
+    }
+  }), [expandedKeys, onToggle, getRowKey, getChildren, getIsItemExpandable, getDepth]);
+  return useMemo(() => ({
+    transformColumns(columns) {
+      // Track the first user column for indentation.
+      const firstUserCol = columns.find(c => !c.key.startsWith('__'));
+      firstUserColumnKeyRef.current = firstUserCol?.key ?? null;
+
+      // Wrap the first user column's renderCell to add depth indentation +
+      // an inline chevron for child rows. This is the inherited-columns
+      // pattern: child rows use the same columns but indent their first
+      // content cell.
+      const wrappedColumns = columns.map(col => {
+        if (col.key !== firstUserColumnKeyRef.current) {
+          return col;
+        }
+        const originalRenderCell = col.renderCell;
+        return {
+          ...col,
+          renderCell: item => {
+            const depth = getDepth ? getDepth(item) : 0;
+            const originalContent = originalRenderCell ? originalRenderCell(item) : String(item[col.key] ?? '');
+            if (depth === 0) {
+              return originalContent;
+            }
+            const indent = (depth - 1) * INDENT_PER_DEPTH;
+            const key = getRowKey(item);
+            const isExpanded = expandedKeys.has(key);
+            const expandable = getIsItemExpandable ? getIsItemExpandable(item) : getChildren(item).length > 0;
+            const chevron = expandable ? /*#__PURE__*/_jsx(ExpansionChevron, {
+              isExpanded: isExpanded,
+              onToggle: () => onToggle(key),
+              ariaLabel: isExpanded ? 'Collapse row' : 'Expand row'
+            }) : /*#__PURE__*/_jsx("span", {
+              ...{
+                className: "x1rg5ohu xvy4d1p xxk0z11 x2lah0s"
+              }
+            });
+            return /*#__PURE__*/_jsxs("div", {
+              ...stylex.props(expansionStyles.indentedCell, indent > 0 && expansionStyles.indent(indent)),
+              children: [chevron, originalContent]
+            });
+          }
+        };
+      });
+      return [expansionColumn, ...wrappedColumns];
+    },
+    transformHeaderCell(props, column) {
+      if (column.key !== '__expansion') {
+        return props;
+      }
+
+      // Show expand-all toggle when the consumer provides the state + callback.
+      if (isAllExpanded !== undefined && onToggleExpandAll) {
+        const allExpanded = isAllExpanded === true;
+        return {
+          ...props,
+          content: /*#__PURE__*/_jsx("button", {
+            type: "button",
+            ...{
+              className: "x3nfvp2 x6s0dn4 xl56j7k xvy4d1p xxk0z11 xx3sua9 x1ypdohk xv9yike xefglzl xx6bhzk x1717udv x2lah0s x1ilzqfv x1cqbx0l"
+            },
+            onClick: () => onToggleExpandAll(!allExpanded),
+            "aria-label": allExpanded ? 'Collapse all rows' : 'Expand all rows',
+            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"
+              })
+            })
+          })
+        };
+      }
+      return {
+        ...props,
+        content: null
+      };
+    },
+    transformBodyCell(props, column, item) {
+      // Contribute "Expand/Collapse row" context-menu action on every cell
+      // so right-clicking anywhere in the row shows the option.
+      const expandable = getIsItemExpandable ? getIsItemExpandable(item) : getChildren(item).length > 0;
+      if (!expandable) {
+        return props;
+      }
+      const key = getRowKey(item);
+      const isExpanded = expandedKeys.has(key);
+      return {
+        ...props,
+        contextMenuActions: () => [...resolveContextActions(props.contextMenuActions), {
+          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
+          }),
+          onSelect: () => onToggle(key)
+        }]
+      };
+    },
+    transformBodyRow(props, item) {
+      if (!hasRowClickExpansion) {
+        return props;
+      }
+      const expandable = getIsItemExpandable ? getIsItemExpandable(item) : getChildren(item).length > 0;
+      if (!expandable) {
+        return props;
+      }
+      const key = getRowKey(item);
+      return {
+        ...props,
+        htmlProps: {
+          ...props.htmlProps,
+          onClick: () => onToggle(key)
+        },
+        styles: [...props.styles, expansionStyles.clickableRow]
+      };
+    }
+  }), [expandedKeys, getRowKey, onToggle, getChildren, getDepth, getIsItemExpandable, hasRowClickExpansion, isAllExpanded, onToggleExpandAll, expansionColumn]);
+}

package/dist/Table/plugins/sortable/useTableSortable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSortable.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/sortable/useTableSortable.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EACV,WAAW,EAGZ,MAAM,aAAa,CAAC;AAMrB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE5D;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM;IAC9D,2EAA2E;IAC3E,OAAO,EAAE,QAAQ,CAAC;IAClB,0BAA0B;IAC1B,SAAS,EAAE,kBAAkB,CAAC;CAC/B;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM,IACzD,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;AAM7B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,sBAAsB,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM;IACtE,iEAAiE;IACjE,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE/B;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAEvD;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAmND;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM,EAChC,MAAM,EAAE,sBAAsB,CAAC,QAAQ,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAuC1D"}
+{"version":3,"file":"useTableSortable.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/sortable/useTableSortable.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAMrB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE5D;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM;IAC9D,2EAA2E;IAC3E,OAAO,EAAE,QAAQ,CAAC;IAClB,0BAA0B;IAC1B,SAAS,EAAE,kBAAkB,CAAC;CAC/B;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM,IACzD,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;AAM7B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,sBAAsB,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM;IACtE,iEAAiE;IACjE,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE/B;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAEvD;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAmND;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM,EAChC,MAAM,EAAE,sBAAsB,CAAC,QAAQ,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAyF1D"}

package/dist/Table/plugins/sortable/useTableSortable.js

@@ -17,6 +17,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../../../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars } from "../../../theme/tokens.stylex.js";
 import { Icon } from "../../../Icon/index.js";
+import { resolveContextActions } from "../../tableContextMenu.js";
 
 // =============================================================================
 // Sort Types
@@ -243,10 +244,64 @@ export function useTableSortable(config) {
       if (sortKey == null) {
         return props;
       }
-
-      // Find sort entry for this column
       const cfg = configRef.current;
       const entry = cfg.sort.find(e => e.sortKey === sortKey);
+
+      // Context-menu actions are built lazily (only when the menu opens) via
+      // a getter, reading the current sort state at call time — so we don't
+      // build an action array for every header on every render, and the
+      // checked/clear state always reflects the latest sort.
+      const getSortActions = () => {
+        const c = configRef.current;
+        const dir = c.sort.find(e => e.sortKey === sortKey)?.direction ?? null;
+        const actions = [{
+          id: 'sort-asc',
+          group: 'sort',
+          label: 'Sort ascending',
+          icon: /*#__PURE__*/_jsx(Icon, {
+            icon: "arrowUp",
+            size: "xsm",
+            "aria-hidden": true
+          }),
+          checked: dir === 'ascending',
+          onSelect: () => c.onSortChange([{
+            sortKey: sortKey,
+            direction: 'ascending'
+          }])
+        }, {
+          id: 'sort-desc',
+          group: 'sort',
+          label: 'Sort descending',
+          icon: /*#__PURE__*/_jsx(Icon, {
+            icon: "arrowDown",
+            size: "xsm",
+            "aria-hidden": true
+          }),
+          checked: dir === 'descending',
+          onSelect: () => c.onSortChange([{
+            sortKey: sortKey,
+            direction: 'descending'
+          }])
+        }];
+        if (dir != null) {
+          actions.push({
+            id: 'sort-clear',
+            group: 'sort-clear',
+            label: 'Clear sort',
+            icon: /*#__PURE__*/_jsx(Icon, {
+              icon: "close",
+              size: "xsm",
+              "aria-hidden": true
+            }),
+            onSelect: () => c.onSortChange(c.sort.filter(e => e.sortKey !== sortKey))
+          });
+        }
+        return actions;
+      };
+
+      // Merge with any actions a prior plugin contributed (array or getter),
+      // resolving both lazily at open time.
+      const priorActions = props.contextMenuActions;
       return {
         ...props,
         htmlProps: {
@@ -259,7 +314,8 @@ export function useTableSortable(config) {
           column: column,
           configRef: configRef,
           children: props.content
-        })
+        }),
+        contextMenuActions: () => [...resolveContextActions(priorActions), ...getSortActions()]
       };
     }
   }), []);