@astryxdesign/core 0.1.3 → 0.1.4-canary.01e5b29

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 { jsxDEV as _jsxDEV } from "react/jsx-dev-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__*/_jsxDEV("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__*/_jsxDEV("span", {
+      ...{
+        0: {
+          className: "x3nfvp2 x11xpdln xx6bhzk"
+        },
+        1: {
+          className: "x3nfvp2 x11xpdln xx6bhzk x1iffjtl"
+        }
+      }[!!isExpanded << 0],
+      children: /*#__PURE__*/_jsxDEV(Icon, {
+        icon: "chevronRight",
+        size: "xsm"
+      }, void 0, false)
+    }, void 0, false)
+  }, void 0, false);
+}
+
+// =============================================================================
+// 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__*/_jsxDEV(ExpansionChevron, {
+        isExpanded: isExpanded,
+        onToggle: () => onToggle(key),
+        ariaLabel: isExpanded ? 'Collapse row' : 'Expand row'
+      }, void 0, false);
+    }
+  }), [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__*/_jsxDEV(ExpansionChevron, {
+              isExpanded: isExpanded,
+              onToggle: () => onToggle(key),
+              ariaLabel: isExpanded ? 'Collapse row' : 'Expand row'
+            }, void 0, false) : /*#__PURE__*/_jsxDEV("span", {
+              ...{
+                className: "x1rg5ohu xvy4d1p xxk0z11 x2lah0s"
+              }
+            }, void 0, false);
+            return /*#__PURE__*/_jsxDEV("div", {
+              ...stylex.props(expansionStyles.indentedCell, indent > 0 && expansionStyles.indent(indent)),
+              children: [chevron, originalContent]
+            }, void 0, true);
+          }
+        };
+      });
+      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__*/_jsxDEV("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", {
+              ...{
+                0: {
+                  className: "x3nfvp2 x11xpdln xx6bhzk"
+                },
+                1: {
+                  className: "x3nfvp2 x11xpdln xx6bhzk x1iffjtl"
+                }
+              }[!!allExpanded << 0],
+              children: /*#__PURE__*/_jsxDEV(Icon, {
+                icon: "chevronRight",
+                size: "xsm"
+              }, void 0, false)
+            }, void 0, false)
+          }, void 0, false)
+        };
+      }
+      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__*/_jsxDEV(Icon, {
+            icon: isExpanded ? 'chevronDown' : 'chevronRight',
+            size: "xsm",
+            "aria-hidden": true
+          }, void 0, false),
+          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/selection/useTableSelection.js

@@ -50,7 +50,7 @@ import { pixel } from "../../columnUtils.js";
  * changes independently. Row styling is handled by per-row ref callbacks
  * that subscribe to this store — the store itself holds no DOM references.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 function createSelectionStore(configRef) {
   const listeners = new Set();
   return {
@@ -108,9 +108,9 @@ function SelectAllCheckbox() {
   if (!store) {
     return null;
   }
-  return /*#__PURE__*/_jsx(SelectAllCheckboxInner, {
+  return /*#__PURE__*/_jsxDEV(SelectAllCheckboxInner, {
     store: store
-  });
+  }, void 0, false);
 }
 
 /**
@@ -142,7 +142,7 @@ function SelectAllCheckboxInner({
   const state = useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
   const allSelected = state === SELECT_ALL;
   const indeterminate = state === SELECT_INDETERMINATE;
-  return /*#__PURE__*/_jsx(CheckboxInput, {
+  return /*#__PURE__*/_jsxDEV(CheckboxInput, {
     label: "Select all rows",
     isLabelHidden: true,
     value: allSelected ? true : indeterminate ? 'indeterminate' : false,
@@ -150,7 +150,7 @@ function SelectAllCheckboxInner({
       isAllSelected: !allSelected
     }),
     size: "sm"
-  });
+  }, void 0, false);
 }
 
 /**
@@ -164,10 +164,10 @@ function SelectionCellContent({
   if (!store) {
     return null;
   }
-  return /*#__PURE__*/_jsx(SelectionCellContentInner, {
+  return /*#__PURE__*/_jsxDEV(SelectionCellContentInner, {
     store: store,
     item: item
-  });
+  }, void 0, false);
 }
 function SelectionCellContentInner({
   store,
@@ -180,7 +180,7 @@ function SelectionCellContentInner({
   if (!selectable) {
     return null;
   }
-  return /*#__PURE__*/_jsx(CheckboxInput, {
+  return /*#__PURE__*/_jsxDEV(CheckboxInput, {
     label: "Select row",
     isLabelHidden: true,
     value: isSelected,
@@ -190,7 +190,7 @@ function SelectionCellContentInner({
     }),
     isDisabled: !enabled,
     size: "sm"
-  });
+  }, void 0, false);
 }
 
 // =============================================================================
@@ -228,29 +228,29 @@ export function useTableSelection(config) {
   // component so each row's checkbox re-renders independently.
   const selectionColumn = useMemo(() => ({
     key: SELECTION_COLUMN_KEY,
-    header: /*#__PURE__*/_jsx("div", {
+    header: /*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "x78zum5 x6s0dn4 xl56j7k"
       },
-      children: /*#__PURE__*/_jsx(SelectAllCheckbox, {})
-    }),
+      children: /*#__PURE__*/_jsxDEV(SelectAllCheckbox, {}, void 0, false)
+    }, void 0, false),
     width: SELECTION_COLUMN_WIDTH,
     resizable: false,
-    renderCell: item => /*#__PURE__*/_jsx("div", {
+    renderCell: item => /*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "x78zum5 x6s0dn4 xl56j7k"
       },
-      children: /*#__PURE__*/_jsx(SelectionCellContent, {
+      children: /*#__PURE__*/_jsxDEV(SelectionCellContent, {
         item: item
-      })
-    })
+      }, void 0, false)
+    }, void 0, false)
   }), []);
   return useMemo(() => ({
     transformTableContext(children) {
-      return /*#__PURE__*/_jsx(SelectionStoreContext, {
+      return /*#__PURE__*/_jsxDEV(SelectionStoreContext, {
         value: store,
         children: children
-      });
+      }, void 0, false);
     },
     transformColumns(columns) {
       return [selectionColumn, ...columns];

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

@@ -1 +1 @@
-{"version":3,"file":"useTableSelectionState.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/selection/useTableSelectionState.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,qBAAqB,CAAC;AAMjE,MAAM,WAAW,4BAA4B,CAC3C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;OAGG;IACH,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;IAClD;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC;;;OAGG;IACH,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B;;OAEG;IACH,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,4BAA4B,CAC3C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,iDAAiD;IACjD,eAAe,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAC;CAC7C;AAQD,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACtE,MAAM,EAAE,4BAA4B,CAAC,CAAC,CAAC,GACtC,4BAA4B,CAAC,CAAC,CAAC,CA4HjC"}
+{"version":3,"file":"useTableSelectionState.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/selection/useTableSelectionState.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,qBAAqB,CAAC;AAMjE,MAAM,WAAW,4BAA4B,CAC3C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;OAGG;IACH,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;IAClD;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC;;;OAGG;IACH,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B;;OAEG;IACH,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,4BAA4B,CAC3C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,iDAAiD;IACjD,eAAe,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAC;CAC7C;AAQD,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACtE,MAAM,EAAE,4BAA4B,CAAC,CAAC,CAAC,GACtC,4BAA4B,CAAC,CAAC,CAAC,CAiIjC"}

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

@@ -60,7 +60,17 @@ export function useTableSelectionState(config) {
   // All IDs that *would* be selected if select-all is checked
   // (all actionable items + any frozen selected items)
   const allSelectableIDs = useMemo(() => new Set([...selectedKeys, ...selectableIDs]), [selectedKeys, selectableIDs]);
-  const getAllSelected = useCallback(() => allSelectableIDs.size === selectedKeys.size && allSelectableIDs.size !== 0, [allSelectableIDs, selectedKeys]);
+  const getAllSelected = useCallback(() => {
+    // Require at least one actionable row: with zero visible selectable
+    // rows (e.g. a filter with no matches while a selection exists), the
+    // union-based size comparison would read any non-empty selection as
+    // "all selected" — a checked header checkbox over an empty table that
+    // deselect-all can't clear, since the invisible keys count as frozen.
+    if (selectableIDs.size === 0) {
+      return false;
+    }
+    return allSelectableIDs.size === selectedKeys.size;
+  }, [allSelectableIDs, selectableIDs, selectedKeys]);
 
   // Use refs to keep onSelectAll stable
   const frozenSelectedIDsRef = useRef(frozenSelectedIDs);

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

@@ -66,7 +66,7 @@ import { resolveContextActions } from "../../tableContextMenu.js";
  * <Table plugins={{ sort: sortPlugin }} columns={columns} data={data} />
  * ```
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; // =============================================================================
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime"; // =============================================================================
 // Styles
 // =============================================================================
 // =============================================================================
@@ -177,16 +177,16 @@ function SortHeaderButton({
       }
     }
   };
-  return /*#__PURE__*/_jsxs("button", {
+  return /*#__PURE__*/_jsxDEV("button", {
     type: "button",
     ...{
       className: "x78zum5 x6s0dn4 xzye2dw x1717udv x1ghz6dp x1ypdohk xln7xf2 x1heor9g xh8yej3 x5yr21d x16tdsg8 x1a2a7pz x17nn4n9 x1hl8ikr xx3sua9"
     },
     "aria-label": ariaLabel,
     onClick: handleClick,
-    children: [/*#__PURE__*/_jsx("span", {
+    children: [/*#__PURE__*/_jsxDEV("span", {
       children: children
-    }), /*#__PURE__*/_jsx("span", {
+    }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
       ...{
         0: {
           className: "x3nfvp2 x3onkmb xof6bs x25t5g8"
@@ -195,19 +195,19 @@ function SortHeaderButton({
           className: "x3nfvp2"
         }
       }[!!(direction != null) << 0],
-      children: /*#__PURE__*/_jsx(Icon, {
+      children: /*#__PURE__*/_jsxDEV(Icon, {
         icon: iconName,
         size: "xsm",
         color: direction != null ? 'accent' : 'secondary'
-      })
-    }), rank != null && /*#__PURE__*/_jsx("span", {
+      }, void 0, false)
+    }, void 0, false), rank != null && /*#__PURE__*/_jsxDEV("span", {
       ...{
         className: "x1k6wstc xo5v014 xqwr325"
       },
       "aria-hidden": "true",
       children: rank
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }
 
 // =============================================================================
@@ -258,11 +258,11 @@ export function useTableSortable(config) {
           id: 'sort-asc',
           group: 'sort',
           label: 'Sort ascending',
-          icon: /*#__PURE__*/_jsx(Icon, {
+          icon: /*#__PURE__*/_jsxDEV(Icon, {
             icon: "arrowUp",
             size: "xsm",
             "aria-hidden": true
-          }),
+          }, void 0, false),
           checked: dir === 'ascending',
           onSelect: () => c.onSortChange([{
             sortKey: sortKey,
@@ -272,11 +272,11 @@ export function useTableSortable(config) {
           id: 'sort-desc',
           group: 'sort',
           label: 'Sort descending',
-          icon: /*#__PURE__*/_jsx(Icon, {
+          icon: /*#__PURE__*/_jsxDEV(Icon, {
             icon: "arrowDown",
             size: "xsm",
             "aria-hidden": true
-          }),
+          }, void 0, false),
           checked: dir === 'descending',
           onSelect: () => c.onSortChange([{
             sortKey: sortKey,
@@ -288,11 +288,11 @@ export function useTableSortable(config) {
             id: 'sort-clear',
             group: 'sort-clear',
             label: 'Clear sort',
-            icon: /*#__PURE__*/_jsx(Icon, {
+            icon: /*#__PURE__*/_jsxDEV(Icon, {
               icon: "close",
               size: "xsm",
               "aria-hidden": true
-            }),
+            }, void 0, false),
             onSelect: () => c.onSortChange(c.sort.filter(e => e.sortKey !== sortKey))
           });
         }
@@ -310,11 +310,11 @@ export function useTableSortable(config) {
             'aria-sort': entry.direction
           } : {})
         },
-        content: /*#__PURE__*/_jsx(SortHeaderButton, {
+        content: /*#__PURE__*/_jsxDEV(SortHeaderButton, {
           column: column,
           configRef: configRef,
           children: props.content
-        }),
+        }, void 0, false),
         contextMenuActions: () => [...resolveContextActions(priorActions), ...getSortActions()]
       };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"useTableSortableState.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/sortable/useTableSortableState.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,cAAc,EACd,sBAAsB,EACvB,MAAM,oBAAoB,CAAC;AAM5B;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;AAqB5D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,2BAA2B,CAC1C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM;IAEhC;;;OAGG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IAEV;;;;OAIG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAEvC;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAEhC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAExD;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhE;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAMD,MAAM,WAAW,2BAA2B,CAC1C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM;IAEhC,8FAA8F;IAC9F,UAAU,EAAE,CAAC,EAAE,CAAC;IAEhB,0BAA0B;IAC1B,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE/B,gDAAgD;IAChD,UAAU,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAC;IAE7C;;;OAGG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;CAC/B;AA0ED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,qBAAqB,CACnC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM,EAEhC,MAAM,EAAE,2BAA2B,CAAC,CAAC,EAAE,QAAQ,CAAC,GAC/C,2BAA2B,CAAC,CAAC,EAAE,QAAQ,CAAC,CAsD1C"}
+{"version":3,"file":"useTableSortableState.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/sortable/useTableSortableState.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,cAAc,EACd,sBAAsB,EACvB,MAAM,oBAAoB,CAAC;AAM5B;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;AAqB5D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,2BAA2B,CAC1C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM;IAEhC;;;OAGG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IAEV;;;;OAIG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAEvC;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAEhC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAExD;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhE;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAMD,MAAM,WAAW,2BAA2B,CAC1C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM;IAEhC,8FAA8F;IAC9F,UAAU,EAAE,CAAC,EAAE,CAAC;IAEhB,0BAA0B;IAC1B,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE/B,gDAAgD;IAChD,UAAU,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAC;IAE7C;;;OAGG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;CAC/B;AA8ED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,qBAAqB,CACnC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM,EAEhC,MAAM,EAAE,2BAA2B,CAAC,CAAC,EAAE,QAAQ,CAAC,GAC/C,2BAA2B,CAAC,CAAC,EAAE,QAAQ,CAAC,CAsD1C"}

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

@@ -72,14 +72,18 @@ function defaultCompare(a, b, sortKey) {
   const aVal = a[sortKey];
   const bVal = b[sortKey];
 
-  // null/undefined sort to the end
-  if (aVal == null && bVal == null) {
+  // null/undefined/NaN sort to the end. NaN must not reach the numeric fast
+  // path: a NaN comparator result reads as "equal" to Array.sort, which makes
+  // the comparator inconsistent and corrupts the order of the other rows.
+  const aMissing = aVal == null || typeof aVal === 'number' && Number.isNaN(aVal);
+  const bMissing = bVal == null || typeof bVal === 'number' && Number.isNaN(bVal);
+  if (aMissing && bMissing) {
     return 0;
   }
-  if (aVal == null) {
+  if (aMissing) {
     return 1;
   }
-  if (bVal == null) {
+  if (bMissing) {
     return -1;
   }