@astryxdesign/core 0.3.0 → 0.4.0-canary.3112e99

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

@@ -4,22 +4,23 @@
 
 /**
  * @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
- * @deprecated Superseded by the tree plugin (useTableTreeData +
- *   useTableTreeState). Kept for back-compat; new tree tables should use the
- *   tree plugin. See the migration guide on useTableRowExpansion.
+ * @input React, StyleX, Icon, Table types, i18n (useTranslator)
+ * @output Exports useTableRowExpansion hook + config type
+ * @position Row-expansion plugin (detail panel); consumed by Table via plugins prop
+ *
+ * Expands a full-width detail panel below a row, rendered by the consumer's
+ * `renderExpanded(item)`. For hierarchical/tree tables (child rows that reuse
+ * the parent columns) use `useTableTreeData` + `useTableTreeState` instead.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Table/index.ts (exports)
+ * - /packages/core/src/Table/useTableRowExpansion.doc.mjs
  */
-import { useCallback, useMemo, useRef } from 'react';
+import { 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 { rtlStyles } from "../../../utils/index.js";
 import { resolveContextActions } from "../../tableContextMenu.js";
 import { useTranslator } from "../../../i18n/index.js";
 
@@ -28,166 +29,13 @@ import { useTranslator } from "../../../i18n/index.js";
 // =============================================================================
 
 /**
- * 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}.
+ * Configuration for useTableRowExpansion (detail-panel mode).
  *
- * 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}.
- *
- * @deprecated Use `useTableTreeState` (with `useTableTreeData`) instead. The
- * tree plugin covers the same affordances (expand-all header control,
- * whole-row click) with a cycle guard and per-row fine-grained re-render. See
- * the migration guide on `useTableRowExpansion` (`astryx component
- * useTableRowExpansion --detail full`) for the before/after and config
- * mapping.
- *
- * @example
- * ```
- * 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}} />;
- * ```
+ * The consumer owns expansion state; the plugin provides the chevron UI, the
+ * full-width detail panel rendered below an expanded row, and a right-click
+ * "Expand/Collapse row" action.
  */
-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();
-    // Ancestor keys on the current walk path — guards against cyclic data.
-    const path = new Set();
-    function walk(items, depth) {
-      for (const item of items) {
-        const key = getRowKey(item);
-        if (path.has(key)) {
-          continue; // cyclic edge — skip
-        }
-        map.set(key, depth);
-        if (expandedKeys.has(key)) {
-          path.add(key);
-          walk(getChildren(item), depth + 1);
-          path.delete(key);
-        }
-      }
-    }
-    walk(baseData, 0);
-    return map;
-  }, [baseData, getChildren, getRowKey, expandedKeys]);
-  const data = useMemo(() => {
-    const result = [];
-    // Ancestor keys on the current walk path — guards against cyclic data.
-    const path = new Set();
-    function walk(items) {
-      for (const item of items) {
-        const key = getRowKey(item);
-        if (path.has(key)) {
-          continue; // cyclic edge — skip
-        }
-        result.push(item);
-        if (expandedKeys.has(key)) {
-          path.add(key);
-          walk(getChildren(item));
-          path.delete(key);
-        }
-      }
-    }
-    walk(baseData);
-    return result;
-  }, [baseData, getChildren, getRowKey, expandedKeys]);
-
-  // Every expandable key across the whole tree (drives expand-all).
-  const allExpandableKeys = useMemo(() => {
-    const keys = [];
-    // Ancestor keys on the current walk path — guards against cyclic data.
-    const path = new Set();
-    function walk(items) {
-      for (const item of items) {
-        const key = getRowKey(item);
-        if (path.has(key)) {
-          continue; // cyclic edge — skip
-        }
-        if (isExpandable(item)) {
-          keys.push(key);
-          path.add(key);
-          walk(getChildren(item));
-          path.delete(key);
-        }
-      }
-    }
-    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
-  };
-}
-
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -196,65 +44,34 @@ 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
+// Chevron Cell
 // =============================================================================
 
 function ExpansionChevron({
   isExpanded,
-  onToggle,
-  ariaLabel
+  onToggle
 }) {
+  const t = useTranslator();
   return /*#__PURE__*/_jsx("button", {
     type: "button",
     ...{
-      className: "x3nfvp2 x6s0dn4 xl56j7k xvy4d1p xxk0z11 xx3sua9 x1ypdohk xv9yike xefglzl xx6bhzk x1717udv x2lah0s x1ilzqfv x1cqbx0l"
-    },
+      0: {
+        className: "x3nfvp2 x6s0dn4 xl56j7k x1mtvzj0 xvpftlf xx3sua9 x1ypdohk xv9yike x12pfavo xx6bhzk x1717udv x1ilzqfv x1cqbx0l"
+      },
+      1: {
+        className: "x3nfvp2 x6s0dn4 xl56j7k x1mtvzj0 xvpftlf xx3sua9 x1ypdohk xv9yike x12pfavo xx6bhzk x1717udv x1ilzqfv x1cqbx0l x1iffjtl"
+      }
+    }[!!isExpanded << 0],
     onClick: e => {
       e.stopPropagation();
       onToggle();
     },
-    "aria-label": ariaLabel,
+    "aria-label": isExpanded ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow'),
     "aria-expanded": isExpanded,
-    children: /*#__PURE__*/_jsx("span", {
-      ...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"
-        })
-      })
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: "chevronRight",
+      size: "xsm"
     })
   });
 }
@@ -264,147 +81,72 @@ function ExpansionChevron({
 // =============================================================================
 
 /**
- * Returns a TablePlugin implementing expandable rows with inherited columns.
+ * Returns a TablePlugin that expands a full-width detail panel below a row.
+ *
+ * The consumer owns the `expandedKeys` set (via `useState`); the plugin adds
+ * a leading chevron column, a right-click expand/collapse action, and renders
+ * `renderExpanded(item)` in a full-width panel below each expanded row.
  *
- * @deprecated Use `useTableTreeData` (with `useTableTreeState`) instead. The
- * tree plugin covers the same affordances (expand-all header control,
- * whole-row click) with a cycle guard and per-row fine-grained re-render. See
- * the migration guide on this hook's docs (`astryx component
- * useTableRowExpansion --detail full`) for the before/after and config
- * mapping.
+ * For hierarchical data (child rows sharing the parent columns) use
+ * `useTableTreeData` + `useTableTreeState` instead.
+ *
+ * @example
+ * ```
+ * const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
+ * const expansion = useTableRowExpansion({
+ *   expandedKeys,
+ *   onToggle: key =>
+ *     setExpandedKeys(prev => {
+ *       const next = new Set(prev);
+ *       next.has(key) ? next.delete(key) : next.add(key);
+ *       return next;
+ *     }),
+ *   getRowKey: item => item.id,
+ *   renderExpanded: item => <OrderDetails order={item} />,
+ * });
+ * <Table data={data} columns={columns} idKey="id" plugins={{expansion}} />;
+ * ```
  */
 export function useTableRowExpansion(config) {
-  const t = useTranslator();
   const {
     expandedKeys,
     onToggle,
     getRowKey,
-    getChildren,
-    getDepth,
-    getIsItemExpandable,
-    hasRowClickExpansion = false,
-    isAllExpanded,
-    onToggleExpandAll
+    renderExpanded,
+    getIsItemExpandable
   } = config;
+  const t = useTranslator();
 
-  // Track the first non-plugin column key for indentation.
-  const firstUserColumnKeyRef = useRef(null);
+  // Final rendered column count, captured in transformColumns (pipeline step
+  // 1) and read in transformBodyRow for the detail panel's colSpan.
+  const columnCountRef = useRef(1);
   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;
+      const expandable = getIsItemExpandable ? getIsItemExpandable(item) : true;
       if (!expandable) {
         return null;
       }
-      const isExpanded = expandedKeys.has(key);
+      const key = getRowKey(item);
       return /*#__PURE__*/_jsx(ExpansionChevron, {
-        isExpanded: isExpanded,
-        onToggle: () => onToggle(key),
-        ariaLabel: isExpanded ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow')
+        isExpanded: expandedKeys.has(key),
+        onToggle: () => onToggle(key)
       });
     }
-  }), [expandedKeys, onToggle, getRowKey, getChildren, getIsItemExpandable, getDepth, t]);
+  }), [expandedKeys, onToggle, getRowKey, getIsItemExpandable]);
   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 ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow')
-            }) : /*#__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 ? t('@astryx.tableRowExpansion.collapseAllRows') : t('@astryx.tableRowExpansion.expandAllRows'),
-            children: /*#__PURE__*/_jsx("span", {
-              ...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"
-                })
-              })
-            })
-          })
-        };
-      }
-      return {
-        ...props,
-        content: null
-      };
+      const withExpansion = [expansionColumn, ...columns];
+      columnCountRef.current = withExpansion.length;
+      return withExpansion;
     },
-    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;
+    transformBodyCell(props, _column, item) {
+      // Contribute the expand/collapse action on every cell; BaseTable
+      // aggregates them into one menu per row. Skip non-expandable rows.
+      const expandable = getIsItemExpandable ? getIsItemExpandable(item) : true;
       if (!expandable) {
         return props;
       }
@@ -416,35 +158,42 @@ export function useTableRowExpansion(config) {
           id: 'row-expansion-toggle',
           group: 'row-expansion',
           label: isExpanded ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow'),
-          icon: /*#__PURE__*/_jsx("span", {
-            ...stylex.props(rtlStyles.mirror),
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: isExpanded ? 'chevronDown' : 'chevronRight',
-              size: "xsm",
-              "aria-hidden": true
-            })
+          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;
+      const expandable = getIsItemExpandable ? getIsItemExpandable(item) : true;
       if (!expandable) {
         return props;
       }
       const key = getRowKey(item);
+      if (!expandedKeys.has(key)) {
+        return props;
+      }
+      const panel = /*#__PURE__*/_jsx("tr", {
+        ...{
+          className: "xwmxj5m"
+        },
+        children: /*#__PURE__*/_jsx("td", {
+          colSpan: columnCountRef.current,
+          ...{
+            className: "x1na6nto xzz68wx"
+          },
+          children: renderExpanded(item)
+        })
+      }, `${key}-expanded`);
       return {
         ...props,
-        htmlProps: {
-          ...props.htmlProps,
-          onClick: () => onToggle(key)
-        },
-        xstyle: [...props.xstyle, expansionStyles.clickableRow]
+        afterRow: props.afterRow ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [props.afterRow, panel]
+        }) : panel
       };
     }
-  }), [expandedKeys, getRowKey, onToggle, getChildren, getDepth, getIsItemExpandable, hasRowClickExpansion, isAllExpanded, onToggleExpandAll, expansionColumn, t]);
+  }), [expandedKeys, getRowKey, renderExpanded, getIsItemExpandable, onToggle, t, 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":"AAqBA,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;AAmOD;;;;;;;;;;;;;;;;;;;;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,CA2F1D"}
+{"version":3,"file":"useTableSortable.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/sortable/useTableSortable.tsx"],"names":[],"mappings":"AAsBA,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;AA8ND;;;;;;;;;;;;;;;;;;;;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,CA2F1D"}

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

@@ -16,6 +16,7 @@ import { useRef, useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../../../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars } from "../../../theme/tokens.stylex.js";
+import { focusOutlineProps } from "../../../utils/focusOutline.stylex.js";
 import { Icon } from "../../../Icon/index.js";
 import { resolveContextActions } from "../../tableContextMenu.js";
 import { useTranslator } from "../../../i18n/index.js";
@@ -67,9 +68,29 @@ import { useTranslator } from "../../../i18n/index.js";
  * <Table plugins={{ sort: sortPlugin }} columns={columns} data={data} />
  * ```
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; // =============================================================================
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
 // Styles
 // =============================================================================
+
+const sortStyles = {
+  button: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "xzye2dw",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kkrTdU: "x1ypdohk",
+    kVVagm: "xln7xf2",
+    kMwMTN: "x1heor9g",
+    kzqmXN: "xh8yej3",
+    kZKoxP: "x5yr21d",
+    k9WMMc: "x16tdsg8",
+    kaIpWk: "xx3sua9",
+    $$css: true
+  }
+};
+
 // =============================================================================
 // Helpers
 // =============================================================================
@@ -191,9 +212,7 @@ function SortHeaderButton({
   };
   return /*#__PURE__*/_jsxs("button", {
     type: "button",
-    ...{
-      className: "x78zum5 x6s0dn4 xzye2dw x1717udv x1ghz6dp x1ypdohk xln7xf2 x1heor9g xh8yej3 x5yr21d x16tdsg8 x1a2a7pz x17nn4n9 x1hl8ikr xx3sua9"
-    },
+    ...focusOutlineProps.focusVisible(sortStyles.button),
     "aria-label": ariaLabel,
     onClick: handleClick,
     children: [/*#__PURE__*/_jsx("span", {

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,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;IACvB;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAmUD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,WAAW,CAAC,CAAC,CAAC,CA0OhB"}
+{"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;IACvB;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAsVD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,WAAW,CAAC,CAAC,CAAC,CA0OhB"}