@astryxdesign/core 0.1.5 → 0.1.6-canary.02f2602

package/dist/Table/plugins/groupedRows/useTableGroupedRows.js

@@ -0,0 +1,257 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useTableGroupedRows.tsx
+ * @input React, StyleX, Icon, Table types + the flat data array
+ * @output Exports useTableGroupedRows hook + config/result types
+ * @position Grouped-rows 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 } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../../../theme/tokens.stylex.js";
+import { spacingVars, colorVars, fontWeightVars } from "../../../theme/tokens.stylex.js";
+import { Icon } from "../../../Icon/index.js";
+import { useTranslator } from "../../../i18n/index.js";
+
+// A synthetic group-header row injected into the flattened data. Real rows
+// never carry this marker.
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const GROUP_HEADER = Symbol('tableGroupHeader');
+function isGroupHeader(item) {
+  return typeof item === 'object' && item !== null && item[GROUP_HEADER] === true;
+}
+
+// Proxy handler: any field access beyond the marker fields resolves to `''`
+// so user cell renderers (`item.name.toUpperCase()`) never throw on a header.
+const HEADER_PROXY_HANDLER = {
+  // eslint-disable-next-line @typescript-eslint/promise-function-async -- Proxy get trap, not a promise-returning fn
+  get(t, prop) {
+    if (prop === GROUP_HEADER || prop === 'groupKey' || prop === 'count') {
+      return t[prop];
+    }
+    return prop in t ? t[prop] : '';
+  }
+};
+
+/**
+ * Build a synthetic header row wrapped in a Proxy so arbitrary field access
+ * from user cell renderers (e.g. `item.name.toUpperCase()`) resolves to `''`
+ * instead of throwing — BaseTable evaluates `col.renderCell(item)` on every
+ * row (including synthetic headers) before `transformBodyRow` can replace the
+ * row's cells. `transformBodyRow` then discards those cells and renders a
+ * single full-width header cell.
+ */
+function makeHeader(groupKey, count) {
+  const target = {
+    [GROUP_HEADER]: true,
+    groupKey,
+    count
+  };
+  return new Proxy(target, HEADER_PROXY_HANDLER);
+}
+
+/** Configuration for {@link useTableGroupedRows}. */
+
+const styles = {
+  headerRow: {
+    kkrTdU: "x1ypdohk",
+    kfSwDN: "x87ps6o",
+    kWkggS: "xwmxj5m",
+    kt9PQ7: "xso031l",
+    kfdmCh: "x1q0q8m5",
+    kL6WhQ: "xw8gpjh",
+    $$css: true
+  }
+};
+
+/**
+ * Groups a flat data array into collapsible section rows. Each distinct
+ * `groupBy` value becomes a full-width section-header row with a chevron
+ * toggle, the group label, and a member count; collapsing hides that group's
+ * data rows while keeping the header visible.
+ *
+ * Mirrors {@link useTableRowExpansionState}: the consumer owns the
+ * `collapsedGroups` set and this hook returns `{data, plugin, idKey}` —
+ * pass all three to `<Table>`.
+ *
+ * @example
+ * ```
+ * const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+ * const grouped = useTableGroupedRows({
+ *   data: rows,
+ *   groupBy: r => r.team,
+ *   collapsedGroups: collapsed,
+ *   onToggleGroup: key =>
+ *     setCollapsed(prev => {
+ *       const next = new Set(prev);
+ *       next.has(key) ? next.delete(key) : next.add(key);
+ *       return next;
+ *     }),
+ *   getRowKey: r => r.id,
+ * });
+ * <Table
+ *   data={grouped.data}
+ *   columns={columns}
+ *   idKey={grouped.idKey}
+ *   plugins={{grouped: grouped.plugin}}
+ * />;
+ * ```
+ */
+export function useTableGroupedRows(config) {
+  const t = useTranslator();
+  const {
+    data,
+    groupBy,
+    collapsedGroups,
+    onToggleGroup,
+    renderGroupHeader,
+    getRowKey: getRowKeyProp,
+    groupOrder
+  } = config;
+  const flattened = useMemo(() => {
+    if (data.length === 0) {
+      return [];
+    }
+
+    // Group preserving first-seen order.
+    const groups = new Map();
+    for (const item of data) {
+      const key = groupBy(item);
+      const bucket = groups.get(key);
+      if (bucket) {
+        bucket.push(item);
+      } else {
+        groups.set(key, [item]);
+      }
+    }
+
+    // Determine iteration order.
+    let keys = [...groups.keys()];
+    if (groupOrder && groupOrder.length > 0) {
+      const ordered = groupOrder.filter(k => groups.has(k));
+      const rest = keys.filter(k => !groupOrder.includes(k));
+      keys = [...ordered, ...rest];
+    }
+    const out = [];
+    for (const key of keys) {
+      const rows = groups.get(key) ?? [];
+      out.push(makeHeader(key, rows.length));
+      if (!collapsedGroups.has(key)) {
+        out.push(...rows);
+      }
+    }
+    return out;
+  }, [data, groupBy, collapsedGroups, groupOrder]);
+
+  // Positional fallback index, built once per flattened array so key lookup
+  // stays O(1) instead of O(n) per row (which would make table keying O(n²)).
+  const positionByItem = useMemo(() => {
+    if (getRowKeyProp) {
+      return null;
+    }
+    const map = new Map();
+    for (let i = 0; i < flattened.length; i++) {
+      map.set(flattened[i], i);
+    }
+    return map;
+  }, [flattened, getRowKeyProp]);
+  const idKey = useCallback(item => {
+    if (isGroupHeader(item)) {
+      return `__group_${item.groupKey}`;
+    }
+    if (getRowKeyProp) {
+      return getRowKeyProp(item);
+    }
+    return String(positionByItem?.get(item) ?? -1);
+  }, [getRowKeyProp, positionByItem]);
+  const plugin = useMemo(() => ({
+    // Replace a header row's pre-rendered cells with one full-width cell.
+    transformBodyRow(props, item) {
+      if (!isGroupHeader(item)) {
+        return props;
+      }
+      const header = item;
+      const collapsed = collapsedGroups.has(header.groupKey);
+      const toggle = () => onToggleGroup(header.groupKey);
+      const content = renderGroupHeader ? renderGroupHeader(header.groupKey, header.count, collapsed) : /*#__PURE__*/_jsxs("span", {
+        ...{
+          className: "x2mo6ok x1tgivj0"
+        },
+        children: [header.groupKey, ' ', /*#__PURE__*/_jsxs("span", {
+          ...{
+            className: "x1sodnla xv1l7n4"
+          },
+          children: ["(", header.count, ")"]
+        })]
+      });
+      return {
+        ...props,
+        htmlProps: {
+          ...props.htmlProps,
+          // Convenience: clicking anywhere on the row toggles it. The chevron
+          // button below is the accessible, keyboard-operable control, so the
+          // row keeps its implicit `row` role (no role override here).
+          onClick: toggle,
+          'aria-expanded': !collapsed
+        },
+        styles: [...props.styles, styles.headerRow],
+        children:
+        /*#__PURE__*/
+        // colSpan larger than the column count is clamped by the browser
+        // to the actual number of columns, so the header always spans the
+        // full width without the plugin knowing the column count.
+        _jsx("td", {
+          colSpan: 999,
+          ...{
+            className: "xce4md1 x1vsv5vr x1t818jl"
+          },
+          children: /*#__PURE__*/_jsxs("span", {
+            ...{
+              className: "x78zum5 x6s0dn4 xzye2dw"
+            },
+            children: [/*#__PURE__*/_jsx("button", {
+              type: "button",
+              ...{
+                className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x1717udv x1ghz6dp x1ypdohk xv9yike x1cqbx0l"
+              },
+              onClick: e => {
+                e.stopPropagation();
+                toggle();
+              },
+              "aria-label": collapsed ? t('@astryx.tableGroupedRows.expandGroup', {
+                groupKey: header.groupKey
+              }) : t('@astryx.tableGroupedRows.collapseGroup', {
+                groupKey: header.groupKey
+              }),
+              "aria-expanded": !collapsed,
+              children: /*#__PURE__*/_jsx("span", {
+                ...{
+                  0: {
+                    className: "x3nfvp2 x11xpdln xx6bhzk"
+                  },
+                  1: {
+                    className: "x3nfvp2 x11xpdln xx6bhzk x1iffjtl"
+                  }
+                }[!!!collapsed << 0],
+                children: /*#__PURE__*/_jsx(Icon, {
+                  icon: "chevronRight",
+                  size: "xsm"
+                })
+              })
+            }), content]
+          })
+        })
+      };
+    }
+  }), [collapsedGroups, onToggleGroup, renderGroupHeader, t]);
+  return {
+    plugin,
+    data: flattened,
+    idKey
+  };
+}

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,CAiGhB"}
+{"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;AAgC7C;;;;;;;;;;;;;;;;;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,CAmGhB"}

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

@@ -20,11 +20,12 @@ import * as stylex from '@stylexjs/stylex';
 import "../../../theme/tokens.stylex.js";
 import { spacingVars } from "../../../theme/tokens.stylex.js";
 import { Pagination } from "../../../Pagination/index.js";
-import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
+import { useTranslator } from "../../../i18n/index.js";
+
 // =============================================================================
 // Styles
 // =============================================================================
-
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   wrapper: {
     k1xSpc: "x78zum5",
@@ -98,6 +99,7 @@ const styles = {
  * ```
  */
 export function useTablePagination(config) {
+  const t = useTranslator();
   const {
     page,
     onPageChange,
@@ -111,8 +113,9 @@ export function useTablePagination(config) {
     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
@@ -166,15 +169,15 @@ export function useTablePagination(config) {
       if (isSinglePage) {
         return children;
       }
-      const makeWrapper = side => /*#__PURE__*/_jsxDEV("div", {
+      const makeWrapper = side => /*#__PURE__*/_jsx("div", {
         ...stylex.props(styles.wrapper, side === 'below' && styles.marginTop, side === 'above' && styles.marginBottom, a === 'center' && styles.alignCenter, a === 'end' && styles.alignEnd, a === 'start' && styles.alignStart),
-        children: /*#__PURE__*/_jsxDEV(Pagination, {
+        children: /*#__PURE__*/_jsx(Pagination, {
           ...props
-        }, void 0, false)
-      }, void 0, false);
-      return /*#__PURE__*/_jsxDEV(_Fragment, {
+        })
+      });
+      return /*#__PURE__*/_jsxs(_Fragment, {
         children: [(pos === 'above' || pos === 'both') && makeWrapper('above'), children, (pos === 'below' || pos === 'both') && makeWrapper('below')]
-      }, void 0, true);
+      });
     }
   }), []);
 }

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

@@ -72,7 +72,7 @@ export interface UseTableRowExpansionStateResult<T extends Record<string, unknow
  * computing the expand-all state.
  *
  * @example
- * ```tsx
+ * ```
  * const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
  * const {data, expansionConfig} = useTableRowExpansionState({
  *   baseData: tree,

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

@@ -1 +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"}
+{"version":3,"file":"useTableRowExpansion.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowExpansion/useTableRowExpansion.tsx"],"names":[],"mappings":"AAoBA,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,CA2OhB"}

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

@@ -17,6 +17,7 @@ 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";
+import { useTranslator } from "../../../i18n/index.js";
 
 // =============================================================================
 // Config
@@ -39,7 +40,7 @@ import { resolveContextActions } from "../../tableContextMenu.js";
  * plugin needs — the flattened `data`, per-row depth, expand/collapse
  * handlers, and the expand-all toggle state.
  */
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+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
@@ -47,7 +48,7 @@ import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
  * computing the expand-all state.
  *
  * @example
- * ```tsx
+ * ```
  * const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
  * const {data, expansionConfig} = useTableRowExpansionState({
  *   baseData: tree,
@@ -196,7 +197,7 @@ function ExpansionChevron({
   onToggle,
   ariaLabel
 }) {
-  return /*#__PURE__*/_jsxDEV("button", {
+  return /*#__PURE__*/_jsx("button", {
     type: "button",
     ...{
       className: "x3nfvp2 x6s0dn4 xl56j7k xvy4d1p xxk0z11 xx3sua9 x1ypdohk xv9yike xefglzl xx6bhzk x1717udv x2lah0s x1ilzqfv x1cqbx0l"
@@ -207,7 +208,7 @@ function ExpansionChevron({
     },
     "aria-label": ariaLabel,
     "aria-expanded": isExpanded,
-    children: /*#__PURE__*/_jsxDEV("span", {
+    children: /*#__PURE__*/_jsx("span", {
       ...{
         0: {
           className: "x3nfvp2 x11xpdln xx6bhzk"
@@ -216,12 +217,12 @@ function ExpansionChevron({
           className: "x3nfvp2 x11xpdln xx6bhzk x1iffjtl"
         }
       }[!!isExpanded << 0],
-      children: /*#__PURE__*/_jsxDEV(Icon, {
+      children: /*#__PURE__*/_jsx(Icon, {
         icon: "chevronRight",
         size: "xsm"
-      }, void 0, false)
-    }, void 0, false)
-  }, void 0, false);
+      })
+    })
+  });
 }
 
 // =============================================================================
@@ -229,6 +230,7 @@ function ExpansionChevron({
 // =============================================================================
 
 export function useTableRowExpansion(config) {
+  const t = useTranslator();
   const {
     expandedKeys,
     onToggle,
@@ -261,13 +263,13 @@ export function useTableRowExpansion(config) {
         return null;
       }
       const isExpanded = expandedKeys.has(key);
-      return /*#__PURE__*/_jsxDEV(ExpansionChevron, {
+      return /*#__PURE__*/_jsx(ExpansionChevron, {
         isExpanded: isExpanded,
         onToggle: () => onToggle(key),
-        ariaLabel: isExpanded ? 'Collapse row' : 'Expand row'
-      }, void 0, false);
+        ariaLabel: isExpanded ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow')
+      });
     }
-  }), [expandedKeys, onToggle, getRowKey, getChildren, getIsItemExpandable, getDepth]);
+  }), [expandedKeys, onToggle, getRowKey, getChildren, getIsItemExpandable, getDepth, t]);
   return useMemo(() => ({
     transformColumns(columns) {
       // Track the first user column for indentation.
@@ -295,19 +297,19 @@ export function useTableRowExpansion(config) {
             const key = getRowKey(item);
             const isExpanded = expandedKeys.has(key);
             const expandable = getIsItemExpandable ? getIsItemExpandable(item) : getChildren(item).length > 0;
-            const chevron = expandable ? /*#__PURE__*/_jsxDEV(ExpansionChevron, {
+            const chevron = expandable ? /*#__PURE__*/_jsx(ExpansionChevron, {
               isExpanded: isExpanded,
               onToggle: () => onToggle(key),
-              ariaLabel: isExpanded ? 'Collapse row' : 'Expand row'
-            }, void 0, false) : /*#__PURE__*/_jsxDEV("span", {
+              ariaLabel: isExpanded ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow')
+            }) : /*#__PURE__*/_jsx("span", {
               ...{
                 className: "x1rg5ohu xvy4d1p xxk0z11 x2lah0s"
               }
-            }, void 0, false);
-            return /*#__PURE__*/_jsxDEV("div", {
+            });
+            return /*#__PURE__*/_jsxs("div", {
               ...stylex.props(expansionStyles.indentedCell, indent > 0 && expansionStyles.indent(indent)),
               children: [chevron, originalContent]
-            }, void 0, true);
+            });
           }
         };
       });
@@ -323,14 +325,14 @@ export function useTableRowExpansion(config) {
         const allExpanded = isAllExpanded === true;
         return {
           ...props,
-          content: /*#__PURE__*/_jsxDEV("button", {
+          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__*/_jsxDEV("span", {
+            "aria-label": allExpanded ? t('@astryx.tableRowExpansion.collapseAllRows') : t('@astryx.tableRowExpansion.expandAllRows'),
+            children: /*#__PURE__*/_jsx("span", {
               ...{
                 0: {
                   className: "x3nfvp2 x11xpdln xx6bhzk"
@@ -339,12 +341,12 @@ export function useTableRowExpansion(config) {
                   className: "x3nfvp2 x11xpdln xx6bhzk x1iffjtl"
                 }
               }[!!allExpanded << 0],
-              children: /*#__PURE__*/_jsxDEV(Icon, {
+              children: /*#__PURE__*/_jsx(Icon, {
                 icon: "chevronRight",
                 size: "xsm"
-              }, void 0, false)
-            }, void 0, false)
-          }, void 0, false)
+              })
+            })
+          })
         };
       }
       return {
@@ -367,11 +369,11 @@ export function useTableRowExpansion(config) {
           id: 'row-expansion-toggle',
           group: 'row-expansion',
           label: isExpanded ? 'Collapse row' : 'Expand row',
-          icon: /*#__PURE__*/_jsxDEV(Icon, {
+          icon: /*#__PURE__*/_jsx(Icon, {
             icon: isExpanded ? 'chevronDown' : 'chevronRight',
             size: "xsm",
             "aria-hidden": true
-          }, void 0, false),
+          }),
           onSelect: () => onToggle(key)
         }]
       };
@@ -394,5 +396,5 @@ export function useTableRowExpansion(config) {
         styles: [...props.styles, expansionStyles.clickableRow]
       };
     }
-  }), [expandedKeys, getRowKey, onToggle, getChildren, getDepth, getIsItemExpandable, hasRowClickExpansion, isAllExpanded, onToggleExpandAll, expansionColumn]);
+  }), [expandedKeys, getRowKey, onToggle, getChildren, getDepth, getIsItemExpandable, hasRowClickExpansion, isAllExpanded, onToggleExpandAll, expansionColumn, t]);
 }

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowIndex/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EAAC,sBAAsB,EAAC,MAAM,oBAAoB,CAAC"}

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

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

package/dist/Table/plugins/rowIndex/useTableRowIndex.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @file useTableRowIndex.tsx
+ * @input React, StyleX, Table types + the rendered data array
+ * @output Exports useTableRowIndex hook + config type
+ * @position Row-index 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 { type ReactNode } from 'react';
+import type { TablePlugin } from '../../types';
+/**
+ * Configuration for {@link useTableRowIndex}.
+ *
+ * Astryx's `renderCell` receives only the row item (not its position), so the
+ * plugin needs the rendered `data` array — the same array passed to
+ * `<Table data>` — to derive each row's 1-based ordinal. Pass `getRowKey` when
+ * items don't have a stable identity by reference (e.g. new objects each
+ * render); it must return a **unique** string per row (duplicate keys collapse
+ * to a single ordinal).
+ */
+export interface UseTableRowIndexConfig<T extends Record<string, unknown>> {
+    /** The data array currently rendered by the table (post sort/filter/page). */
+    data: T[];
+    /**
+     * Optional key extractor returning a **unique** string per row. When
+     * provided, index lookup is keyed by the returned string (stable across new
+     * object identities); otherwise items are matched by reference identity.
+     * For a stable plugin identity across renders, memoize this with
+     * `useCallback`.
+     */
+    getRowKey?: (item: T) => string;
+    /** Header label for the index column. @default '#' */
+    label?: ReactNode;
+    /** First index value. @default 1 */
+    startFrom?: number;
+}
+/**
+ * Returns a {@link TablePlugin} that prepends a right-aligned, monospaced
+ * row-number column. Numbering follows the order of the rendered `data` array,
+ * so it reflects the current sort / filter / pagination view.
+ *
+ * @example
+ * ```
+ * const rowIndex = useTableRowIndex({data});
+ * <Table data={data} columns={columns} idKey="id" plugins={{rowIndex}} />;
+ * ```
+ */
+export declare function useTableRowIndex<T extends Record<string, unknown>>(config: UseTableRowIndexConfig<T>): TablePlugin<T>;
+//# sourceMappingURL=useTableRowIndex.d.ts.map

package/dist/Table/plugins/rowIndex/useTableRowIndex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableRowIndex.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowIndex/useTableRowIndex.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAc,WAAW,EAAC,MAAM,aAAa,CAAC;AAE1D;;;;;;;;;GASG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACvE,8EAA8E;IAC9E,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,sDAAsD;IACtD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,WAAW,CAAC,CAAC,CAAC,CA0ChB"}

package/dist/Table/plugins/rowIndex/useTableRowIndex.js

@@ -0,0 +1,91 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useTableRowIndex.tsx
+ * @input React, StyleX, Table types + the rendered data array
+ * @output Exports useTableRowIndex hook + config type
+ * @position Row-index 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 "../../../theme/tokens.stylex.js";
+import { colorVars, typeScaleVars } from "../../../theme/tokens.stylex.js";
+
+/**
+ * Configuration for {@link useTableRowIndex}.
+ *
+ * Astryx's `renderCell` receives only the row item (not its position), so the
+ * plugin needs the rendered `data` array — the same array passed to
+ * `<Table data>` — to derive each row's 1-based ordinal. Pass `getRowKey` when
+ * items don't have a stable identity by reference (e.g. new objects each
+ * render); it must return a **unique** string per row (duplicate keys collapse
+ * to a single ordinal).
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const INDEX_COLUMN_WIDTH = {
+  type: 'pixel',
+  value: 48
+};
+/**
+ * Returns a {@link TablePlugin} that prepends a right-aligned, monospaced
+ * row-number column. Numbering follows the order of the rendered `data` array,
+ * so it reflects the current sort / filter / pagination view.
+ *
+ * @example
+ * ```
+ * const rowIndex = useTableRowIndex({data});
+ * <Table data={data} columns={columns} idKey="id" plugins={{rowIndex}} />;
+ * ```
+ */
+export function useTableRowIndex(config) {
+  const {
+    data,
+    getRowKey,
+    label = '#',
+    startFrom = 1
+  } = config;
+
+  // Single item → ordinal lookup, built in one pass and rebuilt only when the
+  // data array or key extractor changes. Keyed by getRowKey when provided
+  // (stable across new object identities), otherwise by object reference.
+  const lookup = useMemo(() => {
+    const map = new Map();
+    for (let i = 0; i < data.length; i++) {
+      const item = data[i];
+      map.set(getRowKey ? getRowKey(item) : item, i);
+    }
+    return item => map.get(getRowKey ? getRowKey(item) : item);
+  }, [data, getRowKey]);
+
+  // The plugin object depends only on the stable lookup and the presentational
+  // props — not on data directly — so it stays as stable as its inputs allow.
+  return useMemo(() => ({
+    transformColumns(columns) {
+      const indexColumn = {
+        key: '__rowIndex',
+        header: label,
+        width: INDEX_COLUMN_WIDTH,
+        align: 'end',
+        resizable: false,
+        renderCell: item => {
+          const idx = lookup(item);
+          if (idx == null) {
+            return null;
+          }
+          return /*#__PURE__*/_jsx("span", {
+            ...{
+              className: "x9m5x89 x141an7d xss6m8b xv1l7n4"
+            },
+            children: idx + startFrom
+          });
+        }
+      };
+      return [indexColumn, ...columns];
+    }
+  }), [label, startFrom, lookup]);
+}