@multiplatform.one/table 7.34.4 → 7.35.0

package/dist/esm/components/DataTable/DataTableRoot.native.js

@@ -4,10 +4,10 @@ import { CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpDownIcon, PlusIcon
 import { Button, Checkbox, Field, useFormField } from "@multiplatform.one/forms";
 import { flexRender } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, sizeTokenBelow, useResolvedKnobs, Surface } from "@multiplatform.one/theme";
 import React, { useEffect, useRef, useMemo, useCallback, useState } from "react";
 import { AsyncBoundary, EmptyState, Tooltip, useDirection } from "@multiplatform.one/components";
-import { Text, View, isWeb, useMedia } from "tamagui";
+import { SizableText, Text, View, isWeb, useMedia } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { useDataTable } from "../../hooks/useDataTable.native.js";
 import { useDragScroll } from "../../hooks/useDragScroll.native.js";
@@ -122,7 +122,6 @@ function DataTableRoot(param) {
     renderFilters: _renderFilters,
     className,
     size,
-    compact = false,
     disabled = false,
     accent,
     error,
@@ -158,7 +157,7 @@ function DataTableRoot(param) {
   } = useResolvedKnobs({
     intent,
     component: "DataTable",
-    compact
+    size
   });
   var chrome = dataTableChrome(String(knobProps.sizeToken));
   var rowHeightPx = chrome.rowPx;
@@ -231,8 +230,9 @@ function DataTableRoot(param) {
       table.toggleAllPageRowsSelected();
     }
   }, [selectAllScope, table]);
-  var resolvedSize = size !== null && size !== void 0 ? size : knobProps.sizeToken === "$3" ? "sm" : knobProps.sizeToken === "$5" ? "lg" : "md";
-  var cellHeight = resolvedSize === "sm" ? "$3" : resolvedSize === "lg" ? "$5" : "$4";
+  var resolvedSize = knobProps.sizeToken;
+  var cellHeight = resolvedSize;
+  var cellSize = sizeTokenBelow(resolvedSize);
   var headerGroups = table.getHeaderGroups();
   var rowModelRows = table.getRowModel().rows;
   var infinite = computed.infinite;
@@ -580,7 +580,6 @@ function DataTableRoot(param) {
       }));
     }
   }, [readOnly, disabled, minRows, data, isFormMode, onDataChange]);
-  var isCompact = resolvedSize === "sm" || compact;
   var renderCellContent = useCallback(function (cell, rowIndex, rowData) {
     var _columnDef_fieldProps;
     var columnDef = cell.column.columnDef;
@@ -630,12 +629,11 @@ function DataTableRoot(param) {
       columnLabel: typeof columnDef.header === "string" ? columnDef.header : void 0,
       rowIndex,
       rowData,
-      size: knobProps.sizeToken,
-      compact: isCompact,
+      size: String(cellSize),
       linkedValue,
       onLinkedChange
     });
-  }, [handleCellChange, readOnly, disabled, knobProps.sizeToken, knobProps.label.fontSize, isCompact]);
+  }, [handleCellChange, readOnly, disabled, cellSize, knobProps.label.fontSize]);
   var extraColumnsBefore = (enableRowSelection ? 1 : 0) + (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
   var extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
   var excelCellNav = enableKeyboardNavigation && !rowPressActive && !disabled;
@@ -734,8 +732,7 @@ function DataTableRoot(param) {
             // differentiated for screen readers (DG-A11Y-06). The
             // aria-label rides the role="checkbox" frame itself.
             "aria-label": deriveSelectRowLabel(row, rowIndex)
-          },
-          compact: isCompact
+          }
         })
       }), showRowNumbers && /* @__PURE__ */_jsx(Table.Cell, {
         ...cellRenderProps,
@@ -879,7 +876,7 @@ function DataTableRoot(param) {
         })
       })]
     });
-  }, [enableRowSelection, showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, disabled, cellHeight, knobProps.sizeToken, cellFlexProps, getColSizeProps, getStickyStyle, renderCellContent, handleDeleteRow, data.length, minRows, isCompact, t, deriveSelectRowLabel, ExpandCaretIcon, expandedCaretRotation, clipBodyCells, excelCellNav, keyboardNav.isNavigating, keyboardNav.focusedRowIndex, focusedColIndex]);
+  }, [enableRowSelection, showRowNumbers, enableRowExpansion, showDeleteRow, readOnly, disabled, cellHeight, knobProps.sizeToken, cellFlexProps, getColSizeProps, getStickyStyle, renderCellContent, handleDeleteRow, data.length, minRows, t, deriveSelectRowLabel, ExpandCaretIcon, expandedCaretRotation, clipBodyCells, excelCellNav, keyboardNav.isNavigating, keyboardNav.focusedRowIndex, focusedColIndex]);
   var [filterEditTarget, setFilterEditTarget] = useState(null);
   var filterUi = useMemo(function () {
     return {
@@ -915,7 +912,6 @@ function DataTableRoot(param) {
         views: state.views,
         activeViewId: state.activeViewId,
         size: knobProps.sizeToken,
-        compact: isCompact,
         isFetching: Boolean(state.isFetching)
       });
     }
@@ -925,7 +921,6 @@ function DataTableRoot(param) {
       onClearFilters: actions.clearFilters,
       customActions: defaultCardToolbar && hasCardSort ? /* @__PURE__ */_jsx(DataTableCardSortControl, {
         table,
-        compact: isCompact,
         disabled,
         contained: true
       }) : void 0,
@@ -938,7 +933,6 @@ function DataTableRoot(param) {
       enableGlobalSearch,
       enableFiltering,
       size: knobProps.sizeToken,
-      compact: isCompact,
       isFetching: Boolean(state.isFetching)
     });
   };
@@ -955,7 +949,7 @@ function DataTableRoot(param) {
       pagination: state.pagination,
       onPaginationChange: actions.setPagination,
       pageSizeOptions: resolvedPageSizeOptions,
-      compact: true
+      size: resolvedSize
     });
   };
   var renderInner = function renderInner2(tableData, effectiveHandleAddRow, effectiveHandleDeleteRow, _effectiveHandleCellChange) {
@@ -996,7 +990,7 @@ function DataTableRoot(param) {
         onRetry: state.error ? onRetry : infinite === null || infinite === void 0 ? void 0 : infinite.retry,
         layout: "table",
         errorTitle: t("Couldn't load table"),
-        compact: true,
+        size: resolvedSize,
         "aria-label": resolvedAriaLabel
       });
     }
@@ -1009,7 +1003,6 @@ function DataTableRoot(param) {
     }
     return /* @__PURE__ */_jsx(DataTableContext.Provider, {
       size: resolvedSize,
-      compact: isCompact,
       children: /* @__PURE__ */_jsx(DataTableStateContext.Provider, {
         value: stateContextValue,
         children: /* @__PURE__ */_jsxs(View, {
@@ -1051,743 +1044,745 @@ function DataTableRoot(param) {
             })
           } : {}),
           ...props,
-          children: [
-          /* Toolbar. The width-100% wrapper is the LC-40 carrier for
-          chrome that has no `disabled` API of its own: under keepLabel
-          the chrome fragment dims the region (interaction is already
-          blocked by the root inert). */
-          hasToolbar && /* @__PURE__ */_jsx(View, {
-            width: "100%",
-            ...(disabled ? disabledState.chromeKnobProps : {}),
-            children: renderToolbarComponent()
-          }),
-          /* Active filter chips — visibility surface for ALL filters,
-          including hidden-column filters (Axiom 6 HONEST STATE) */
-          enableFiltering && /* @__PURE__ */_jsx(View, {
-            width: "100%",
-            ...(disabled ? disabledState.chromeKnobProps : {}),
-            children: /* @__PURE__ */_jsx(DataTableFilterChips, {})
-          }), /* Auto selection toolbar (DG-TBL-02) — placement from house bulkBarPlacement */
-          enableRowSelection && bulkBarPlacement === "top" ? /* @__PURE__ */_jsx(View, {
-            width: "100%",
-            ...(disabled ? disabledState.chromeKnobProps : {}),
-            children: /* @__PURE__ */_jsx(DataTableBulkActions, {
-              actions: resolvedBulkActions,
-              maxVisibleActions: 5,
-              showSelectionCount: true,
-              placement: "top"
-            })
-          }) : null, /* Compound sub-components (children) */
-          children, /* Card List View (layout="cards" or auto below $sm) */
-          showList ? /* @__PURE__ */_jsx(DataTableDocumentList, {
-            tableRows: displayRows,
-            enableRowSelection,
-            disabled,
-            hasActiveFilters: computed.hasActiveFilters,
-            renderCellContent,
-            compact: isCompact,
-            selectRowLabel: deriveSelectRowLabel,
-            queryInFlight,
-            ...(rowPressActive ? {
-              getRowPressProps
-            } : {})
-          }) : showCards ? /* @__PURE__ */_jsxs(_Fragment, {
+          children: [/* @__PURE__ */_jsxs(Surface, {
+            size: resolvedSize,
             children: [
-            /* Header affordances (sort / per-column filter) live in the
-            grid headers; the card list restores them here. */
-            !defaultCardToolbar && /* @__PURE__ */_jsx(DataTableCardControls, {
-              table,
-              enableSorting,
-              enableFiltering,
-              availableColumns: cardFilterColumns,
-              compact: isCompact,
-              disabled
-            }), /* @__PURE__ */_jsx(DataTableMobileCards, {
+            /* Toolbar. The width-100% wrapper is the LC-40 carrier for
+            chrome that has no `disabled` API of its own: under keepLabel
+            the chrome fragment dims the region (interaction is already
+            blocked by the root inert). */
+            hasToolbar && /* @__PURE__ */_jsx(View, {
+              width: "100%",
+              ...(disabled ? disabledState.chromeKnobProps : {}),
+              children: renderToolbarComponent()
+            }),
+            /* Active filter chips — visibility surface for ALL filters,
+            including hidden-column filters (Axiom 6 HONEST STATE) */
+            enableFiltering && /* @__PURE__ */_jsx(View, {
+              width: "100%",
+              ...(disabled ? disabledState.chromeKnobProps : {}),
+              children: /* @__PURE__ */_jsx(DataTableFilterChips, {})
+            }), /* Auto selection toolbar (DG-TBL-02) — placement from house bulkBarPlacement */
+            enableRowSelection && bulkBarPlacement === "top" ? /* @__PURE__ */_jsx(View, {
+              width: "100%",
+              ...(disabled ? disabledState.chromeKnobProps : {}),
+              children: /* @__PURE__ */_jsx(DataTableBulkActions, {
+                actions: resolvedBulkActions,
+                maxVisibleActions: 5,
+                showSelectionCount: true,
+                placement: "top"
+              })
+            }) : null, /* Compound sub-components (children) */
+            children, /* Card List View (layout="cards" or auto below $sm) */
+            showList ? /* @__PURE__ */_jsx(DataTableDocumentList, {
               tableRows: displayRows,
               enableRowSelection,
-              showRowNumbers,
-              showDeleteRow,
-              readOnly,
               disabled,
-              dataLength: tableData.length,
-              minRows,
               hasActiveFilters: computed.hasActiveFilters,
               renderCellContent,
-              onDeleteRow: effectiveHandleDeleteRow,
-              selectAllChecked,
-              selectAllIndeterminate,
-              onToggleSelectAll: toggleSelectAll,
-              compact: isCompact,
               selectRowLabel: deriveSelectRowLabel,
               queryInFlight,
               ...(rowPressActive ? {
                 getRowPressProps
               } : {})
-            })]
-          }) : (/* Table View */
-          /* @__PURE__ */_jsx(View, {
-            ref: function ref(node) {
-              if (enableKeyboardNavigation && !isSSR && keyboardNav.containerRef) {
-                keyboardNav.containerRef.current = node;
-              }
-              if (scrollContainerRef) {
-                scrollContainerRef.current = node;
-              }
-            },
-            flexDirection: "column",
-            width: "100%",
-            // Grow 0 / shrink 1 / basis auto: the grid frame hugs its
-            // rows and only compresses (into internal scroll) when the
-            // parent is shorter. flexGrow 1 stretched the frame to fill
-            // tall parents, painting a dead zone between the last row
-            // and the frame's bottom border on short pages (the frame
-            // claimed data area that held no data — Axiom 6/LC-37).
-            flexGrow: 0,
-            flexShrink: 1,
-            flexBasis: "auto",
-            minHeight: 0,
-            // This View (the drag-scroll ref) is the horizontal scroll
-            // container; the table inside floors at max-content so it
-            // overflows here instead of panning the whole page. With
-            // pinning it is the ONE scrollport sticky cells track.
-            ...(hScroll ? {
-              overflowX: "auto"
-            } : {}),
-            "aria-label": withInterp(t("{{label}} content", {
-              label: resolvedAriaLabel
-            }), {
-              label: resolvedAriaLabel
-            }),
-            tabIndex: enableKeyboardNavigation && !isSSR ? 0 : void 0,
-            ...{
-              "data-table-grid": "true"
-            },
-            onKeyDown: enableKeyboardNavigation && !isSSR ? handleGridKeyDown : void 0,
-            onPress: enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerClick : void 0,
-            onBlur: enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerBlur : void 0,
-            children: /* @__PURE__ */_jsxs(Table, {
-              displayMode,
-              alignCells: {
-                x: "start",
-                y: "center"
-              },
-              alignHeaderCells: {
-                x: "start",
-                y: "center"
+            }) : showCards ? /* @__PURE__ */_jsxs(_Fragment, {
+              children: [
+              /* Header affordances (sort / per-column filter) live in the
+              grid headers; the card list restores them here. */
+              !defaultCardToolbar && /* @__PURE__ */_jsx(DataTableCardControls, {
+                table,
+                enableSorting,
+                enableFiltering,
+                availableColumns: cardFilterColumns,
+                disabled
+              }), /* @__PURE__ */_jsx(DataTableMobileCards, {
+                tableRows: displayRows,
+                enableRowSelection,
+                showRowNumbers,
+                showDeleteRow,
+                readOnly,
+                disabled,
+                dataLength: tableData.length,
+                minRows,
+                hasActiveFilters: computed.hasActiveFilters,
+                renderCellContent,
+                onDeleteRow: effectiveHandleDeleteRow,
+                selectAllChecked,
+                selectAllIndeterminate,
+                onToggleSelectAll: toggleSelectAll,
+                selectRowLabel: deriveSelectRowLabel,
+                queryInFlight,
+                ...(rowPressActive ? {
+                  getRowPressProps
+                } : {})
+              })]
+            }) : (/* Table View */
+            /* @__PURE__ */_jsx(View, {
+              ref: function ref(node) {
+                if (enableKeyboardNavigation && !isSSR && keyboardNav.containerRef) {
+                  keyboardNav.containerRef.current = node;
+                }
+                if (scrollContainerRef) {
+                  scrollContainerRef.current = node;
+                }
               },
-              cellHeight,
-              borderTopLeftRadius: hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius,
-              borderTopRightRadius: hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius,
-              borderBottomLeftRadius: knobProps.borderRadiusOuter.borderRadius,
-              borderBottomRightRadius: knobProps.borderRadiusOuter.borderRadius,
-              marginBottom: 0,
-              "aria-label": resolvedAriaLabel,
-              "aria-rowcount": computed.totalPages * state.pagination.pageSize,
-              "aria-colcount": table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter,
+              flexDirection: "column",
               width: "100%",
+              // Grow 0 / shrink 1 / basis auto: the grid frame hugs its
+              // rows and only compresses (into internal scroll) when the
+              // parent is shorter. flexGrow 1 stretched the frame to fill
+              // tall parents, painting a dead zone between the last row
+              // and the frame's bottom border on short pages (the frame
+              // claimed data area that held no data — Axiom 6/LC-37).
+              flexGrow: 0,
+              flexShrink: 1,
+              flexBasis: "auto",
+              minHeight: 0,
+              // This View (the drag-scroll ref) is the horizontal scroll
+              // container; the table inside floors at max-content so it
+              // overflows here instead of panning the whole page. With
+              // pinning it is the ONE scrollport sticky cells track.
               ...(hScroll ? {
-                style: {
-                  minWidth: "max-content"
-                }
-              } : {}),
-              // Pinning: the Table must NOT be a scroll container (its
-              // overflow:hidden base makes it one) or sticky cells stick
-              // to it instead of the scrolling content View. Content
-              // fits the max-content box, so nothing needs the clip.
-              ...(hScroll && enableColumnPinning ? {
-                overflow: "visible"
-              } : {}),
-              // Roving-focus DOM scope for onRowPress arrow keys (LC-49).
-              ...(rowPressActive ? {
-                "data-row-press-scope": "true"
+                overflowX: "auto"
               } : {}),
-              children: [/* Table Header */
-              /* @__PURE__ */_jsx(Table.Head, {
-                zIndex: "$1",
-                "aria-label": t("Table headers"),
-                children: headerGroups.map(function (headerGroup) {
-                  rowCounter.current++;
-                  return /* @__PURE__ */_jsxs(Table.Row, {
-                    ...{
-                      background: true,
-                      backgroundColor: "$color2",
-                      rowLocation: rowCounter.current === 0 ? "first" : rowCounter.current === allRowsLength - 1 ? "last" : "middle",
-                      borderTopRightRadius: hasToolbar ? "$0" : knobProps.borderRadiusOuter.borderRadius,
-                      borderTopLeftRadius: hasToolbar ? "$0" : knobProps.borderRadiusOuter.borderRadius,
-                      borderBottomLeftRadius: "$0",
-                      borderBottomRightRadius: "$0",
-                      "aria-rowindex": rowCounter.current
-                    },
-                    children: [enableRowSelection && /* @__PURE__ */_jsx(Table.HeaderCell, {
-                      cellWidth: selectionColWidth,
-                      cellHeight,
-                      cellLocation: "first",
-                      justifyContent: "center",
-                      children: /* @__PURE__ */_jsx(Checkbox, {
-                        checked: selectAllIndeterminate ? "indeterminate" : selectAllChecked,
-                        disabled,
-                        onChange: function onChange(checked) {
-                          if (disabled || checked === "indeterminate") return;
-                          var shouldSelect = checked === true;
-                          var isAll = selectAllScope === "filtered" ? table.getIsAllRowsSelected() : table.getIsAllPageRowsSelected();
-                          if (shouldSelect !== isAll) toggleSelectAll();
-                        },
-                        checkboxProps: {
-                          "aria-label": selectAllScope === "filtered" ? t("Select all matching rows") : t("Select all rows on page")
-                        },
-                        compact: isCompact
-                      })
-                    }), showRowNumbers && /* @__PURE__ */_jsx(Table.HeaderCell, {
-                      cellWidth: chrome.rowNumberCol,
-                      cellHeight,
-                      cellLocation: enableRowSelection ? "middle" : "first",
-                      children: /* @__PURE__ */_jsx(Text, {
-                        fontSize: knobProps.sizeToken,
-                        fontWeight: "600",
-                        children: "#"
-                      })
-                    }), enableRowExpansion && /* @__PURE__ */_jsx(Table.HeaderCell, {
-                      cellWidth: chrome.expandCol,
-                      cellHeight,
-                      cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
-                      children: /* @__PURE__ */_jsx(View, {
-                        width: 14
-                      })
-                    }), headerGroup.headers.map(function (header, headerIndex) {
-                      var _header_column_columnDef_minSize, _header_column_columnDef_maxSize;
-                      var _header_column_columnDef_fieldProps;
-                      var isSortableHeader = header.column.getCanSort();
-                      var sortDirection = header.column.getIsSorted();
-                      var canResize = enableColumnResizing && header.column.getCanResize();
-                      var resizeHandler = canResize ? header.getResizeHandler() : void 0;
-                      var colSize = header.getSize();
-                      var colMinSize = (_header_column_columnDef_minSize = header.column.columnDef.minSize) !== null && _header_column_columnDef_minSize !== void 0 ? _header_column_columnDef_minSize : 0;
-                      var colMaxSize = (_header_column_columnDef_maxSize = header.column.columnDef.maxSize) !== null && _header_column_columnDef_maxSize !== void 0 ? _header_column_columnDef_maxSize : Number.MAX_SAFE_INTEGER;
-                      var stickyStyle = getStickyStyle(header.column.id);
-                      var columnDef = header.column.columnDef;
-                      var columnAlign = resolveColumnAlign({
-                        ...columnDef,
-                        id: header.column.id
-                      });
-                      var headerJustify = alignToFlex(columnAlign);
-                      var isRightAligned = columnAlign === "right";
-                      var isFirstHeaderCell = headerIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
-                      var isLastHeaderCell = headerIndex === headerGroup.headers.length - 1 && !(showDeleteRow && !readOnly);
-                      var headerCellLocation = isFirstHeaderCell ? "first" : isLastHeaderCell ? "last" : "middle";
-                      return /* @__PURE__ */_jsxs(Table.HeaderCell, {
-                        id: `${header.column.id}-header`,
-                        onPress: isSortableHeader && !disabled ? header.column.getToggleSortingHandler() : void 0,
-                        // Keyboard operability (WCAG 2.1.1): the sort
-                        // control must not be mouse-only — Tab reaches
-                        // sortable headers, Enter/Space toggles (Shift
-                        // held = multi-sort, same as shift+click).
-                        // Disabled tables drop the handlers (the root
-                        // inert already blocks focus on web).
-                        ...(isSortableHeader && !disabled && isWeb ? {
-                          tabIndex: 0,
-                          onKeyDown: function onKeyDown(e) {
-                            if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
-                              var _header_column_getToggleSortingHandler;
-                              e.preventDefault();
-                              (_header_column_getToggleSortingHandler = header.column.getToggleSortingHandler()) === null || _header_column_getToggleSortingHandler === void 0 ? void 0 : _header_column_getToggleSortingHandler(e);
-                            }
-                          },
-                          focusVisibleStyle: ensureFocusVisibleRing({
-                            outlineOffset: -2
-                          })
-                        } : {}),
-                        cursor: disabled ? "not-allowed" : isSortableHeader ? "pointer" : "default",
-                        position: "relative",
-                        cellLocation: headerCellLocation,
-                        justifyContent: headerJustify,
-                        "data-align": columnAlign,
-                        "aria-sort": isSortableHeader ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0,
-                        ...(dnd && !disabled ? {
-                          draggable: true,
-                          onDragStart: function onDragStart(e) {
-                            return dnd.onDragStart(e, header.column.id);
+              "aria-label": withInterp(t("{{label}} content", {
+                label: resolvedAriaLabel
+              }), {
+                label: resolvedAriaLabel
+              }),
+              tabIndex: enableKeyboardNavigation && !isSSR ? 0 : void 0,
+              ...{
+                "data-table-grid": "true"
+              },
+              onKeyDown: enableKeyboardNavigation && !isSSR ? handleGridKeyDown : void 0,
+              onPress: enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerClick : void 0,
+              onBlur: enableKeyboardNavigation && !isSSR ? keyboardNav.handleContainerBlur : void 0,
+              children: /* @__PURE__ */_jsxs(Table, {
+                size: resolvedSize,
+                cellSize,
+                displayMode,
+                alignCells: {
+                  x: "start",
+                  y: "center"
+                },
+                alignHeaderCells: {
+                  x: "start",
+                  y: "center"
+                },
+                cellHeight,
+                borderTopLeftRadius: hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius,
+                borderTopRightRadius: hasToolbar ? 0 : knobProps.borderRadiusOuter.borderRadius,
+                borderBottomLeftRadius: knobProps.borderRadiusOuter.borderRadius,
+                borderBottomRightRadius: knobProps.borderRadiusOuter.borderRadius,
+                marginBottom: 0,
+                "aria-label": resolvedAriaLabel,
+                "aria-rowcount": computed.totalPages * state.pagination.pageSize,
+                "aria-colcount": table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter,
+                width: "100%",
+                ...(hScroll ? {
+                  style: {
+                    minWidth: "max-content"
+                  }
+                } : {}),
+                // Pinning: the Table must NOT be a scroll container (its
+                // overflow:hidden base makes it one) or sticky cells stick
+                // to it instead of the scrolling content View. Content
+                // fits the max-content box, so nothing needs the clip.
+                ...(hScroll && enableColumnPinning ? {
+                  overflow: "visible"
+                } : {}),
+                // Roving-focus DOM scope for onRowPress arrow keys (LC-49).
+                ...(rowPressActive ? {
+                  "data-row-press-scope": "true"
+                } : {}),
+                children: [/* Table Header */
+                /* @__PURE__ */_jsx(Table.Head, {
+                  zIndex: "$1",
+                  "aria-label": t("Table headers"),
+                  children: headerGroups.map(function (headerGroup) {
+                    rowCounter.current++;
+                    return /* @__PURE__ */_jsxs(Table.Row, {
+                      ...{
+                        background: true,
+                        backgroundColor: "$color2",
+                        rowLocation: rowCounter.current === 0 ? "first" : rowCounter.current === allRowsLength - 1 ? "last" : "middle",
+                        borderTopRightRadius: hasToolbar ? "$0" : knobProps.borderRadiusOuter.borderRadius,
+                        borderTopLeftRadius: hasToolbar ? "$0" : knobProps.borderRadiusOuter.borderRadius,
+                        borderBottomLeftRadius: "$0",
+                        borderBottomRightRadius: "$0",
+                        "aria-rowindex": rowCounter.current
+                      },
+                      children: [enableRowSelection && /* @__PURE__ */_jsx(Table.HeaderCell, {
+                        cellWidth: selectionColWidth,
+                        cellHeight,
+                        cellLocation: "first",
+                        justifyContent: "center",
+                        children: /* @__PURE__ */_jsx(Checkbox, {
+                          checked: selectAllIndeterminate ? "indeterminate" : selectAllChecked,
+                          disabled,
+                          onChange: function onChange(checked) {
+                            if (disabled || checked === "indeterminate") return;
+                            var shouldSelect = checked === true;
+                            var isAll = selectAllScope === "filtered" ? table.getIsAllRowsSelected() : table.getIsAllPageRowsSelected();
+                            if (shouldSelect !== isAll) toggleSelectAll();
                           },
-                          onDragOver: dnd.onDragOver,
-                          onDrop: function onDrop(e) {
-                            return dnd.onDrop(e, header.column.id);
+                          checkboxProps: {
+                            "aria-label": selectAllScope === "filtered" ? t("Select all matching rows") : t("Select all rows on page")
                           }
-                        } : {}),
-                        ...cellFlexProps,
-                        ...getColSizeProps(header.column),
-                        ...(isWeb && stickyStyle ? {
-                          style: {
-                            position: "sticky",
-                            ...("insetInlineStart" in stickyStyle && {
-                              insetInlineStart: stickyStyle.insetInlineStart
-                            }),
-                            ...("insetInlineEnd" in stickyStyle && {
-                              insetInlineEnd: stickyStyle.insetInlineEnd
-                            }),
-                            zIndex: 2,
-                            backgroundColor: "var(--color2)"
-                          }
-                        } : {}),
-                        children: [
-                        /* LC-10 (MPO-336): only the label yields
-                        to a narrow column; the glyphs keep their
-                        size or they paint into the next one. The
-                        filter cluster wraps under the label first,
-                        so the label keeps the column's width. */
-                        /* @__PURE__ */
-                        _jsxs(View, {
-                          flexDirection: "row",
-                          flexWrap: "wrap",
-                          gap: "$2",
-                          alignItems: "center",
-                          justifyContent: isRightAligned ? "flex-end" : "space-between",
-                          flex: 1,
-                          minWidth: 0,
-                          children: [/* @__PURE__ */_jsxs(View, {
+                        })
+                      }), showRowNumbers && /* @__PURE__ */_jsx(Table.HeaderCell, {
+                        cellWidth: chrome.rowNumberCol,
+                        cellHeight,
+                        cellLocation: enableRowSelection ? "middle" : "first",
+                        children: /* @__PURE__ */_jsx(Text, {
+                          fontSize: knobProps.sizeToken,
+                          fontWeight: "600",
+                          children: "#"
+                        })
+                      }), enableRowExpansion && /* @__PURE__ */_jsx(Table.HeaderCell, {
+                        cellWidth: chrome.expandCol,
+                        cellHeight,
+                        cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
+                        children: /* @__PURE__ */_jsx(View, {
+                          width: 14
+                        })
+                      }), headerGroup.headers.map(function (header, headerIndex) {
+                        var _header_column_columnDef_minSize, _header_column_columnDef_maxSize;
+                        var _header_column_columnDef_fieldProps;
+                        var isSortableHeader = header.column.getCanSort();
+                        var sortDirection = header.column.getIsSorted();
+                        var canResize = enableColumnResizing && header.column.getCanResize();
+                        var resizeHandler = canResize ? header.getResizeHandler() : void 0;
+                        var colSize = header.getSize();
+                        var colMinSize = (_header_column_columnDef_minSize = header.column.columnDef.minSize) !== null && _header_column_columnDef_minSize !== void 0 ? _header_column_columnDef_minSize : 0;
+                        var colMaxSize = (_header_column_columnDef_maxSize = header.column.columnDef.maxSize) !== null && _header_column_columnDef_maxSize !== void 0 ? _header_column_columnDef_maxSize : Number.MAX_SAFE_INTEGER;
+                        var stickyStyle = getStickyStyle(header.column.id);
+                        var columnDef = header.column.columnDef;
+                        var columnAlign = resolveColumnAlign({
+                          ...columnDef,
+                          id: header.column.id
+                        });
+                        var headerJustify = alignToFlex(columnAlign);
+                        var isRightAligned = columnAlign === "right";
+                        var isFirstHeaderCell = headerIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
+                        var isLastHeaderCell = headerIndex === headerGroup.headers.length - 1 && !(showDeleteRow && !readOnly);
+                        var headerCellLocation = isFirstHeaderCell ? "first" : isLastHeaderCell ? "last" : "middle";
+                        return /* @__PURE__ */_jsxs(Table.HeaderCell, {
+                          id: `${header.column.id}-header`,
+                          onPress: isSortableHeader && !disabled ? header.column.getToggleSortingHandler() : void 0,
+                          // Keyboard operability (WCAG 2.1.1): the sort
+                          // control must not be mouse-only — Tab reaches
+                          // sortable headers, Enter/Space toggles (Shift
+                          // held = multi-sort, same as shift+click).
+                          // Disabled tables drop the handlers (the root
+                          // inert already blocks focus on web).
+                          ...(isSortableHeader && !disabled && isWeb ? {
+                            tabIndex: 0,
+                            onKeyDown: function onKeyDown(e) {
+                              if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+                                var _header_column_getToggleSortingHandler;
+                                e.preventDefault();
+                                (_header_column_getToggleSortingHandler = header.column.getToggleSortingHandler()) === null || _header_column_getToggleSortingHandler === void 0 ? void 0 : _header_column_getToggleSortingHandler(e);
+                              }
+                            },
+                            focusVisibleStyle: ensureFocusVisibleRing({
+                              outlineOffset: -2
+                            })
+                          } : {}),
+                          cursor: disabled ? "not-allowed" : isSortableHeader ? "pointer" : "default",
+                          position: "relative",
+                          cellLocation: headerCellLocation,
+                          justifyContent: headerJustify,
+                          "data-align": columnAlign,
+                          "aria-sort": isSortableHeader ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0,
+                          ...(dnd && !disabled ? {
+                            draggable: true,
+                            onDragStart: function onDragStart(e) {
+                              return dnd.onDragStart(e, header.column.id);
+                            },
+                            onDragOver: dnd.onDragOver,
+                            onDrop: function onDrop(e) {
+                              return dnd.onDrop(e, header.column.id);
+                            }
+                          } : {}),
+                          ...cellFlexProps,
+                          ...getColSizeProps(header.column),
+                          ...(isWeb && stickyStyle ? {
+                            style: {
+                              position: "sticky",
+                              ...("insetInlineStart" in stickyStyle && {
+                                insetInlineStart: stickyStyle.insetInlineStart
+                              }),
+                              ...("insetInlineEnd" in stickyStyle && {
+                                insetInlineEnd: stickyStyle.insetInlineEnd
+                              }),
+                              zIndex: 2,
+                              backgroundColor: "var(--color2)"
+                            }
+                          } : {}),
+                          children: [
+                          /* LC-10 (MPO-336): only the label yields
+                          to a narrow column; the glyphs keep their
+                          size or they paint into the next one. The
+                          filter cluster wraps under the label first,
+                          so the label keeps the column's width. */
+                          /* @__PURE__ */
+                          _jsxs(View, {
                             flexDirection: "row",
+                            flexWrap: "wrap",
                             gap: "$2",
                             alignItems: "center",
-                            flexGrow: isRightAligned ? 0 : 1,
-                            flexShrink: 1,
-                            flexBasis: "auto",
+                            justifyContent: isRightAligned ? "flex-end" : "space-between",
+                            flex: 1,
                             minWidth: 0,
-                            justifyContent: isRightAligned ? "flex-end" : void 0,
-                            children: [/* @__PURE__ */_jsx(Text, {
-                              fontSize: knobProps.sizeToken,
-                              userSelect: "none",
+                            children: [/* @__PURE__ */_jsxs(View, {
+                              flexDirection: "row",
+                              gap: "$2",
+                              alignItems: "center",
+                              flexGrow: isRightAligned ? 0 : 1,
                               flexShrink: 1,
+                              flexBasis: "auto",
                               minWidth: 0,
-                              textAlign: isRightAligned ? "right" : void 0,
-                              "data-header-label": "",
-                              ...(isWeb ? {
-                                style: {
-                                  overflowWrap: "anywhere"
-                                }
-                              } : {}),
-                              children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
-                            }), isSortableHeader && /* @__PURE__ */_jsx(Tooltip, {
-                              content: sortDirection === "asc" ? t("Sorted ascending (click to sort descending)") : sortDirection === "desc" ? t("Sorted descending (click to clear)") : t("Click to sort (Shift+click for multi-sort)"),
-                              children: /* @__PURE__ */_jsxs(View, {
-                                "aria-hidden": true,
-                                role: "presentation",
-                                flexShrink: 0,
-                                children: [sortDirection === "asc" && /* @__PURE__ */_jsx(CaretDownIcon, {
-                                  size: chrome.iconPx,
-                                  color: "var(--color11)"
-                                }), sortDirection === "desc" && /* @__PURE__ */_jsx(CaretDownIcon, {
-                                  size: chrome.iconPx,
-                                  color: "var(--color11)",
+                              justifyContent: isRightAligned ? "flex-end" : void 0,
+                              children: [/* @__PURE__ */_jsx(Text, {
+                                fontSize: knobProps.sizeToken,
+                                userSelect: "none",
+                                flexShrink: 1,
+                                minWidth: 0,
+                                textAlign: isRightAligned ? "right" : void 0,
+                                "data-header-label": "",
+                                ...(isWeb ? {
                                   style: {
-                                    transform: "rotate(180deg)"
+                                    overflowWrap: "anywhere"
                                   }
-                                }), sortDirection === false && /* @__PURE__ */_jsx(CaretUpDownIcon, {
-                                  size: chrome.iconPx,
-                                  color: "var(--color11)"
-                                })]
-                              })
-                            })]
-                          }), /* @__PURE__ */_jsxs(View, {
-                            flexDirection: "row",
-                            gap: "$1",
-                            alignItems: "center",
-                            flexShrink: 0,
-                            children: [enableFiltering && header.column.getCanFilter() && /* @__PURE__ */_jsx(ColumnHeaderFilter, {
-                              columnId: header.column.id,
-                              columnLabel: typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id,
-                              columnType: mapFieldToFilterType(getColumnField(header.column.columnDef)),
-                              filterValue: header.column.getFilterValue(),
-                              onFilterChange: function onFilterChange(value) {
-                                return header.column.setFilterValue(value);
-                              },
-                              isFiltered: header.column.getIsFiltered(),
-                              options: (_header_column_columnDef_fieldProps = header.column.columnDef.fieldProps) === null || _header_column_columnDef_fieldProps === void 0 ? void 0 : _header_column_columnDef_fieldProps.options
-                            }), pinning && enableColumnPinning &&
-                            /* One compact cycle control per header
-                            (left → right → unpin) — two full
-                            buttons crowded the header (owner). */
-                            /* @__PURE__ */
-                            _jsx(pinning.PinButton, {
-                              columnId: header.column.id
+                                } : {}),
+                                children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+                              }), isSortableHeader && /* @__PURE__ */_jsx(Tooltip, {
+                                content: sortDirection === "asc" ? t("Sorted ascending (click to sort descending)") : sortDirection === "desc" ? t("Sorted descending (click to clear)") : t("Click to sort (Shift+click for multi-sort)"),
+                                children: /* @__PURE__ */_jsxs(View, {
+                                  "aria-hidden": true,
+                                  role: "presentation",
+                                  flexShrink: 0,
+                                  children: [sortDirection === "asc" && /* @__PURE__ */_jsx(CaretDownIcon, {
+                                    size: chrome.iconPx,
+                                    color: "var(--color11)"
+                                  }), sortDirection === "desc" && /* @__PURE__ */_jsx(CaretDownIcon, {
+                                    size: chrome.iconPx,
+                                    color: "var(--color11)",
+                                    style: {
+                                      transform: "rotate(180deg)"
+                                    }
+                                  }), sortDirection === false && /* @__PURE__ */_jsx(CaretUpDownIcon, {
+                                    size: chrome.iconPx,
+                                    color: "var(--color11)"
+                                  })]
+                                })
+                              })]
+                            }), /* @__PURE__ */_jsxs(View, {
+                              flexDirection: "row",
+                              gap: "$1",
+                              alignItems: "center",
+                              flexShrink: 0,
+                              children: [enableFiltering && header.column.getCanFilter() && /* @__PURE__ */_jsx(ColumnHeaderFilter, {
+                                columnId: header.column.id,
+                                columnLabel: typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id,
+                                columnType: mapFieldToFilterType(getColumnField(header.column.columnDef)),
+                                filterValue: header.column.getFilterValue(),
+                                onFilterChange: function onFilterChange(value) {
+                                  return header.column.setFilterValue(value);
+                                },
+                                isFiltered: header.column.getIsFiltered(),
+                                options: (_header_column_columnDef_fieldProps = header.column.columnDef.fieldProps) === null || _header_column_columnDef_fieldProps === void 0 ? void 0 : _header_column_columnDef_fieldProps.options
+                              }), pinning && enableColumnPinning &&
+                              /* One compact cycle control per header
+                              (left → right → unpin) — two full
+                              buttons crowded the header (owner). */
+                              /* @__PURE__ */
+                              _jsx(pinning.PinButton, {
+                                columnId: header.column.id
+                              })]
                             })]
+                          }), canResize && resizeHandler && /* @__PURE__ */_jsx(View, {
+                            position: "absolute",
+                            right: -4,
+                            top: 0,
+                            height: 2e3,
+                            width: 8,
+                            cursor: "col-resize",
+                            onMouseDown: resizeHandler,
+                            onTouchStart: resizeHandler,
+                            role: "separator",
+                            "aria-valuenow": colSize,
+                            "aria-valuemin": colMinSize,
+                            "aria-valuemax": colMaxSize,
+                            "aria-label": withInterp(t("Resize {{column}} column", {
+                              column: header.column.columnDef.header || header.column.id
+                            }), {
+                              column: header.column.columnDef.header || header.column.id
+                            }),
+                            style: {
+                              touchAction: "none"
+                            },
+                            zIndex: 10
                           })]
-                        }), canResize && resizeHandler && /* @__PURE__ */_jsx(View, {
-                          position: "absolute",
-                          right: -4,
-                          top: 0,
-                          height: 2e3,
-                          width: 8,
-                          cursor: "col-resize",
-                          onMouseDown: resizeHandler,
-                          onTouchStart: resizeHandler,
-                          role: "separator",
-                          "aria-valuenow": colSize,
-                          "aria-valuemin": colMinSize,
-                          "aria-valuemax": colMaxSize,
-                          "aria-label": withInterp(t("Resize {{column}} column", {
-                            column: header.column.columnDef.header || header.column.id
-                          }), {
-                            column: header.column.columnDef.header || header.column.id
-                          }),
-                          style: {
-                            touchAction: "none"
-                          },
-                          zIndex: 10
-                        })]
-                      }, header.id);
-                    }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(Table.HeaderCell, {
-                      cellWidth: chrome.deleteCol,
-                      cellHeight,
-                      cellLocation: "last"
-                    })]
-                  }, headerGroup.id);
-                })
-              }), /* Table Body */
-              /* @__PURE__ */_jsxs(Table.Body, {
-                // Virtualized mode hosts a div rowgroup (DataTableVirtualized)
-                // inside a tbody>tr>td bridge; presentation-ing the bridge
-                // keeps the AT grid tree clean: table > rowgroup(thead) +
-                // rowgroup(virtual rows) with no cell-wrapping-rowgroup
-                // noise. aria-label is prohibited on presentation roles.
-                role: isVirtualized ? "presentation" : "rowgroup",
-                "aria-label": isVirtualized ? void 0 : t("Table data"),
-                // Pinning: the flex-variant overflowY:auto computes
-                // overflow-x:auto, making the body its own horizontal
-                // scroller — headers (outside it) then never move with
-                // the columns. Visible keeps the sticky chain clean so
-                // the content View is the one scrollport.
-                ...(hScroll && enableColumnPinning ? {
-                  overflowY: "visible",
-                  overflowX: "visible"
-                } : {}),
-                ref: function ref(node) {
-                  tableBodyRef.current = node !== null && node !== void 0 ? node : null;
-                },
-                children: [displayRows.length === 0 ? /* @__PURE__ */_jsx(Table.Row, {
-                  children: /* @__PURE__ */_jsx(Table.Cell, {
-                    children: isRefetching ? null : /* @__PURE__ */_jsx(EmptyState, {
-                      compact: true,
-                      "aria-live": "polite",
-                      title: computed.hasActiveFilters ? t("No results found") : t("No data available")
-                    })
+                        }, header.id);
+                      }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(Table.HeaderCell, {
+                        cellWidth: chrome.deleteCol,
+                        cellHeight,
+                        cellLocation: "last"
+                      })]
+                    }, headerGroup.id);
                   })
-                }) : isVirtualized ? /* @__PURE__ */_jsx(Table.Row, {
-                  role: "presentation",
-                  children: /* @__PURE__ */_jsx(Table.Cell, {
+                }), /* Table Body */
+                /* @__PURE__ */_jsxs(Table.Body, {
+                  // Virtualized mode hosts a div rowgroup (DataTableVirtualized)
+                  // inside a tbody>tr>td bridge; presentation-ing the bridge
+                  // keeps the AT grid tree clean: table > rowgroup(thead) +
+                  // rowgroup(virtual rows) with no cell-wrapping-rowgroup
+                  // noise. aria-label is prohibited on presentation roles.
+                  role: isVirtualized ? "presentation" : "rowgroup",
+                  "aria-label": isVirtualized ? void 0 : t("Table data"),
+                  // Pinning: the flex-variant overflowY:auto computes
+                  // overflow-x:auto, making the body its own horizontal
+                  // scroller — headers (outside it) then never move with
+                  // the columns. Visible keeps the sticky chain clean so
+                  // the content View is the one scrollport.
+                  ...(hScroll && enableColumnPinning ? {
+                    overflowY: "visible",
+                    overflowX: "visible"
+                  } : {}),
+                  ref: function ref(node) {
+                    tableBodyRef.current = node !== null && node !== void 0 ? node : null;
+                  },
+                  children: [displayRows.length === 0 ? /* @__PURE__ */_jsx(Table.Row, {
+                    children: /* @__PURE__ */_jsx(Table.Cell, {
+                      children: isRefetching ? null : /* @__PURE__ */_jsx(EmptyState, {
+                        size: resolvedSize,
+                        "aria-live": "polite",
+                        title: computed.hasActiveFilters ? t("No results found") : t("No data available")
+                      })
+                    })
+                  }) : isVirtualized ? /* @__PURE__ */_jsx(Table.Row, {
                     role: "presentation",
-                    padding: 0,
-                    // In the default flex displayMode colSpan is inert
-                    // and the context default gives cells a fixed token
-                    // width — the virtualized body must fill the row
-                    // explicitly or it collapses to that token. (In the
-                    // real-<table> displayMode the colSpan attribute
-                    // now genuinely spans.)
-                    cellWidth: "auto",
-                    style: {
-                      display: "block",
-                      overflow: "hidden",
-                      width: "100%",
-                      minWidth: 0
-                    },
-                    ...{
-                      colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
-                    },
-                    children: /* @__PURE__ */_jsx(DataTableVirtualized, {
-                      virtualItems,
-                      totalSize,
-                      bodyScrollRef,
-                      virtualizationHeight,
-                      tableRows: displayRows,
-                      headerGroups,
-                      showRowNumbers,
-                      enableRowExpansion,
-                      showDeleteRow,
-                      readOnly,
-                      enableKeyboardNavigation,
-                      keyboardNav,
-                      getColSizeProps,
-                      renderRowContent,
-                      extraColumnsBefore,
-                      extraColumnsAfter,
-                      table,
-                      hasInfiniteTail,
-                      rowHeightPx,
-                      tableZebraOn,
-                      ...(rowPressActive ? {
-                        getRowPressProps
-                      } : {})
+                    children: /* @__PURE__ */_jsx(Table.Cell, {
+                      role: "presentation",
+                      padding: 0,
+                      // In the default flex displayMode colSpan is inert
+                      // and the context default gives cells a fixed token
+                      // width — the virtualized body must fill the row
+                      // explicitly or it collapses to that token. (In the
+                      // real-<table> displayMode the colSpan attribute
+                      // now genuinely spans.)
+                      cellWidth: "auto",
+                      style: {
+                        display: "block",
+                        overflow: "hidden",
+                        width: "100%",
+                        minWidth: 0
+                      },
+                      ...{
+                        colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
+                      },
+                      children: /* @__PURE__ */_jsx(DataTableVirtualized, {
+                        virtualItems,
+                        totalSize,
+                        bodyScrollRef,
+                        virtualizationHeight,
+                        tableRows: displayRows,
+                        headerGroups,
+                        showRowNumbers,
+                        enableRowExpansion,
+                        showDeleteRow,
+                        readOnly,
+                        enableKeyboardNavigation,
+                        keyboardNav,
+                        getColSizeProps,
+                        renderRowContent,
+                        extraColumnsBefore,
+                        extraColumnsAfter,
+                        table,
+                        hasInfiniteTail,
+                        rowHeightPx,
+                        tableZebraOn,
+                        ...(rowPressActive ? {
+                          getRowPressProps
+                        } : {})
+                      })
                     })
-                  })
-                }) : /* @__PURE__ */_jsxs(_Fragment, {
-                  children: [displayRows.map(function (row, index) {
-                    var _row_getIsGrouped, _row_getIsSelected, _row_subRows;
-                    rowCounter.current++;
-                    var isLastRow = index === displayRows.length - 1;
-                    if (enableGrouping && ((_row_getIsGrouped = row.getIsGrouped) === null || _row_getIsGrouped === void 0 ? void 0 : _row_getIsGrouped.call(row))) {
-                      var _row_depth, _row_groupingValue, _ref;
-                      var _row_subRows1;
-                      var colSpan = table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter;
-                      var indent = ((_row_depth = row.depth) !== null && _row_depth !== void 0 ? _row_depth : 0) * chrome.indent;
-                      return /* @__PURE__ */_jsx(Table.Row, {
-                        backgroundColor: "$color3",
+                  }) : /* @__PURE__ */_jsxs(_Fragment, {
+                    children: [displayRows.map(function (row, index) {
+                      var _row_getIsGrouped, _row_getIsSelected, _row_subRows;
+                      rowCounter.current++;
+                      var isLastRow = index === displayRows.length - 1;
+                      if (enableGrouping && ((_row_getIsGrouped = row.getIsGrouped) === null || _row_getIsGrouped === void 0 ? void 0 : _row_getIsGrouped.call(row))) {
+                        var _row_depth, _row_groupingValue, _ref;
+                        var _row_subRows1;
+                        var colSpan = table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter;
+                        var indent = ((_row_depth = row.depth) !== null && _row_depth !== void 0 ? _row_depth : 0) * chrome.indent;
+                        return /* @__PURE__ */_jsx(Table.Row, {
+                          backgroundColor: "$color3",
+                          flexShrink: 0,
+                          "aria-rowindex": rowCounter.current,
+                          children: /* @__PURE__ */_jsx(Table.Cell, {
+                            ...{
+                              colSpan
+                            },
+                            children: /* @__PURE__ */_jsxs(View, {
+                              flexDirection: "row",
+                              alignItems: "center",
+                              gap: "$2",
+                              paddingInlineStart: indent,
+                              cursor: "pointer",
+                              onPress: function onPress() {
+                                return row.toggleExpanded();
+                              },
+                              // Keyboard/AT contract: expandable group
+                              // header is a toggle button (Enter/Space).
+                              role: "button",
+                              tabIndex: 0,
+                              "aria-expanded": row.getIsExpanded(),
+                              ...{
+                                onKeyDown: function onKeyDown(e) {
+                                  if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    row.toggleExpanded();
+                                  }
+                                }
+                              },
+                              children: [/* @__PURE__ */_jsx(Text, {
+                                fontFamily: "$mono",
+                                fontSize: "$3",
+                                children: row.getIsExpanded() ? "\u25BC" : "\u25B6"
+                              }), /* @__PURE__ */_jsx(SizableText, {
+                                fontFamily: knobProps.heading.fontFamily,
+                                size: "$4",
+                                children: String((_row_groupingValue = row.groupingValue) !== null && _row_groupingValue !== void 0 ? _row_groupingValue : "\u2014")
+                              }), /* @__PURE__ */_jsxs(Text, {
+                                color: "$placeholderColor",
+                                fontSize: "$2",
+                                children: ["(", (_ref = (_row_subRows1 = row.subRows) === null || _row_subRows1 === void 0 ? void 0 : _row_subRows1.length) !== null && _ref !== void 0 ? _ref : 0, ")"]
+                              })]
+                            })
+                          })
+                        }, row.id);
+                      }
+                      var mainRow = /* @__PURE__ */_createElement(Table.Row, {
+                        ...tableRowStateProps({
+                          selected: Boolean(enableRowSelection && ((_row_getIsSelected = row.getIsSelected) === null || _row_getIsSelected === void 0 ? void 0 : _row_getIsSelected.call(row))),
+                          keyboardFocused: false,
+                          zebraOn: tableZebraOn,
+                          index,
+                          pressable: rowPressActive
+                        }),
+                        ...{
+                          animation: "quick"
+                        },
                         flexShrink: 0,
+                        rowLocation: rowCounter.current === 0 ? "first" : rowCounter.current === allRowsLength - 1 ? "last" : "middle",
+                        key: `${row.id}-${index}`,
                         "aria-rowindex": rowCounter.current,
+                        "aria-label": withInterp(t("Row {{row}}", {
+                          row: index + 1
+                        }), {
+                          row: index + 1
+                        }),
+                        tabIndex: -1,
+                        ...{
+                          "data-table-zebra": tableZebraOn ? index % 2 === 0 ? "even" : "odd" : "off"
+                        },
+                        ...getRowPressProps(row, index),
+                        ...rowIntentProps(row.original)
+                      }, renderRowContent(row, index, isLastRow));
+                      var subRow = enableRowExpansion && renderSubComponent && row.getIsExpanded() && !((_row_subRows = row.subRows) === null || _row_subRows === void 0 ? void 0 : _row_subRows.length) ? /* @__PURE__ */_jsx(Table.Row, {
+                        backgroundColor: "$color2",
                         children: /* @__PURE__ */_jsx(Table.Cell, {
                           ...{
-                            colSpan
+                            colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
                           },
-                          children: /* @__PURE__ */_jsxs(View, {
-                            flexDirection: "row",
-                            alignItems: "center",
-                            gap: "$2",
-                            paddingInlineStart: indent,
-                            cursor: "pointer",
-                            onPress: function onPress() {
-                              return row.toggleExpanded();
-                            },
-                            // Keyboard/AT contract: expandable group
-                            // header is a toggle button (Enter/Space).
-                            role: "button",
-                            tabIndex: 0,
-                            "aria-expanded": row.getIsExpanded(),
-                            ...{
-                              onKeyDown: function onKeyDown(e) {
-                                if (e.key === "Enter" || e.key === " ") {
-                                  e.preventDefault();
-                                  row.toggleExpanded();
-                                }
-                              }
-                            },
-                            children: [/* @__PURE__ */_jsx(Text, {
-                              fontFamily: "$mono",
-                              fontSize: "$3",
-                              children: row.getIsExpanded() ? "\u25BC" : "\u25B6"
-                            }), /* @__PURE__ */_jsx(Text, {
-                              fontWeight: "600",
-                              children: String((_row_groupingValue = row.groupingValue) !== null && _row_groupingValue !== void 0 ? _row_groupingValue : "\u2014")
-                            }), /* @__PURE__ */_jsxs(Text, {
-                              color: "$placeholderColor",
-                              fontSize: "$2",
-                              children: ["(", (_ref = (_row_subRows1 = row.subRows) === null || _row_subRows1 === void 0 ? void 0 : _row_subRows1.length) !== null && _ref !== void 0 ? _ref : 0, ")"]
-                            })]
-                          })
+                          children: renderSubComponent(row)
                         })
+                      }, `${row.id}-sub`) : null;
+                      return /* @__PURE__ */_jsxs(React.Fragment, {
+                        children: [mainRow, subRow]
                       }, row.id);
-                    }
-                    var mainRow = /* @__PURE__ */_createElement(Table.Row, {
-                      ...tableRowStateProps({
-                        selected: Boolean(enableRowSelection && ((_row_getIsSelected = row.getIsSelected) === null || _row_getIsSelected === void 0 ? void 0 : _row_getIsSelected.call(row))),
-                        keyboardFocused: false,
-                        zebraOn: tableZebraOn,
-                        index,
-                        pressable: rowPressActive
-                      }),
-                      ...{
-                        animation: "quick"
-                      },
-                      flexShrink: 0,
-                      rowLocation: rowCounter.current === 0 ? "first" : rowCounter.current === allRowsLength - 1 ? "last" : "middle",
-                      key: `${row.id}-${index}`,
-                      "aria-rowindex": rowCounter.current,
-                      "aria-label": withInterp(t("Row {{row}}", {
-                        row: index + 1
-                      }), {
-                        row: index + 1
-                      }),
-                      tabIndex: -1,
-                      ...{
-                        "data-table-zebra": tableZebraOn ? index % 2 === 0 ? "even" : "odd" : "off"
-                      },
-                      ...getRowPressProps(row, index),
-                      ...rowIntentProps(row.original)
-                    }, renderRowContent(row, index, isLastRow));
-                    var subRow = enableRowExpansion && renderSubComponent && row.getIsExpanded() && !((_row_subRows = row.subRows) === null || _row_subRows === void 0 ? void 0 : _row_subRows.length) ? /* @__PURE__ */_jsx(Table.Row, {
-                      backgroundColor: "$color2",
-                      children: /* @__PURE__ */_jsx(Table.Cell, {
-                        ...{
-                          colSpan: table.getVisibleLeafColumns().length + extraColumnsBefore + extraColumnsAfter
-                        },
-                        children: renderSubComponent(row)
-                      })
-                    }, `${row.id}-sub`) : null;
-                    return /* @__PURE__ */_jsxs(React.Fragment, {
-                      children: [mainRow, subRow]
-                    }, row.id);
-                  }), /* Filler row — fills remaining space with background */
-                  isFlexLayout && /* @__PURE__ */_jsxs(Table.Row, {
-                    "aria-hidden": true,
-                    backgroundColor: "$color1",
-                    flex: 1,
-                    flexShrink: 1,
-                    flexGrow: 1,
-                    flexBasis: 0,
-                    minHeight: 0,
-                    children: [enableRowSelection && /* @__PURE__ */_jsx(Table.Cell, {
-                      cellWidth: selectionColWidth,
-                      cellLocation: "first",
-                      padding: 0,
-                      minHeight: 0
-                    }), showRowNumbers && /* @__PURE__ */_jsx(Table.Cell, {
-                      cellWidth: chrome.rowNumberCol,
-                      cellLocation: enableRowSelection ? "middle" : "first",
-                      padding: 0,
-                      minHeight: 0
-                    }), enableRowExpansion && /* @__PURE__ */_jsx(Table.Cell, {
-                      cellWidth: chrome.expandCol,
-                      cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
-                      padding: 0,
-                      minHeight: 0
-                    }), (_headerGroups_ = headerGroups[0]) === null || _headerGroups_ === void 0 ? void 0 : _headerGroups_.headers.map(function (header, headerIndex) {
-                      var isFirstDataCell = headerIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
-                      var isLastDataCell = headerIndex === headerGroups[0].headers.length - 1 && !(showDeleteRow && !readOnly);
-                      var cellLoc = isFirstDataCell ? "first" : isLastDataCell ? "last" : "middle";
-                      return /* @__PURE__ */_jsx(Table.Cell, {
-                        ...cellFlexProps,
-                        ...getColSizeProps(header.column),
-                        cellLocation: cellLoc,
+                    }), /* Filler row — fills remaining space with background */
+                    isFlexLayout && /* @__PURE__ */_jsxs(Table.Row, {
+                      "aria-hidden": true,
+                      backgroundColor: "$color1",
+                      flex: 1,
+                      flexShrink: 1,
+                      flexGrow: 1,
+                      flexBasis: 0,
+                      minHeight: 0,
+                      children: [enableRowSelection && /* @__PURE__ */_jsx(Table.Cell, {
+                        cellWidth: selectionColWidth,
+                        cellLocation: "first",
                         padding: 0,
                         minHeight: 0
-                      }, header.id);
-                    }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(Table.Cell, {
-                      cellWidth: chrome.deleteCol,
-                      cellLocation: "last",
-                      padding: 0,
-                      minHeight: 0
-                    })]
-                  }, "filler-row")]
-                }),
-                /* DF-12 / Axiom 6: clipped-viewport affordance — rows are
-                cut off below the fold, so the frame says so with a
-                bottom fade that clears once the last row is reached.
-                Sticky inside the scroll container; zero layout cost
-                (a zero-height row whose cell paints the fade upward
-                over the last visible row). Rendered as a Table.Row
-                and a <td>: a <div> is not a valid child of the real
-                <tbody> or <tr> (SSR parsers foster-parent it out of
-                the table). Only reachable in the flex displayMode
-                (bodyClipped needs a scrollable body), where the row
-                renders display:flex like the old View. */
-                isWeb && bodyClipped && /* @__PURE__ */_jsx(Table.Row, {
-                  "aria-hidden": true,
-                  role: "presentation",
-                  position: "sticky",
-                  bottom: 0,
-                  height: 0,
-                  flexShrink: 0,
-                  zIndex: 2,
-                  pointerEvents: "none",
-                  ...{
-                    "data-table-clip-affordance": "true"
-                  },
-                  children: /* @__PURE__ */_jsx(View, {
+                      }), showRowNumbers && /* @__PURE__ */_jsx(Table.Cell, {
+                        cellWidth: chrome.rowNumberCol,
+                        cellLocation: enableRowSelection ? "middle" : "first",
+                        padding: 0,
+                        minHeight: 0
+                      }), enableRowExpansion && /* @__PURE__ */_jsx(Table.Cell, {
+                        cellWidth: chrome.expandCol,
+                        cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first",
+                        padding: 0,
+                        minHeight: 0
+                      }), (_headerGroups_ = headerGroups[0]) === null || _headerGroups_ === void 0 ? void 0 : _headerGroups_.headers.map(function (header, headerIndex) {
+                        var isFirstDataCell = headerIndex === 0 && !enableRowSelection && !showRowNumbers && !enableRowExpansion;
+                        var isLastDataCell = headerIndex === headerGroups[0].headers.length - 1 && !(showDeleteRow && !readOnly);
+                        var cellLoc = isFirstDataCell ? "first" : isLastDataCell ? "last" : "middle";
+                        return /* @__PURE__ */_jsx(Table.Cell, {
+                          ...cellFlexProps,
+                          ...getColSizeProps(header.column),
+                          cellLocation: cellLoc,
+                          padding: 0,
+                          minHeight: 0
+                        }, header.id);
+                      }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(Table.Cell, {
+                        cellWidth: chrome.deleteCol,
+                        cellLocation: "last",
+                        padding: 0,
+                        minHeight: 0
+                      })]
+                    }, "filler-row")]
+                  }),
+                  /* DF-12 / Axiom 6: clipped-viewport affordance — rows are
+                  cut off below the fold, so the frame says so with a
+                  bottom fade that clears once the last row is reached.
+                  Sticky inside the scroll container; zero layout cost
+                  (a zero-height row whose cell paints the fade upward
+                  over the last visible row). Rendered as a Table.Row
+                  and a <td>: a <div> is not a valid child of the real
+                  <tbody> or <tr> (SSR parsers foster-parent it out of
+                  the table). Only reachable in the flex displayMode
+                  (bodyClipped needs a scrollable body), where the row
+                  renders display:flex like the old View. */
+                  isWeb && bodyClipped && /* @__PURE__ */_jsx(Table.Row, {
+                    "aria-hidden": true,
+                    role: "presentation",
+                    position: "sticky",
+                    bottom: 0,
+                    height: 0,
+                    flexShrink: 0,
+                    zIndex: 2,
+                    pointerEvents: "none",
                     ...{
-                      render: "td"
+                      "data-table-clip-affordance": "true"
                     },
-                    position: "absolute",
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    height: 28,
-                    style: {
-                      background: "linear-gradient(to bottom, rgba(0,0,0,0), var(--background))"
-                    }
+                    children: /* @__PURE__ */_jsx(View, {
+                      ...{
+                        render: "td"
+                      },
+                      position: "absolute",
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      height: 28,
+                      style: {
+                        background: "linear-gradient(to bottom, rgba(0,0,0,0), var(--background))"
+                      }
+                    })
+                  })]
+                }), /* Table Footer */
+                hasFooter && /* @__PURE__ */_jsx(Table.Foot, {
+                  children: footerGroups.map(function (footerGroup) {
+                    return /* @__PURE__ */_jsxs(Table.Row, {
+                      children: [enableRowSelection && /* @__PURE__ */_jsx(Table.Cell, {
+                        cellWidth: selectionColWidth,
+                        cellHeight,
+                        cellLocation: "first"
+                      }), showRowNumbers && /* @__PURE__ */_jsx(Table.Cell, {
+                        cellWidth: chrome.rowNumberCol,
+                        cellHeight,
+                        cellLocation: enableRowSelection ? "middle" : "first"
+                      }), enableRowExpansion && /* @__PURE__ */_jsx(Table.Cell, {
+                        cellWidth: chrome.expandCol,
+                        cellHeight,
+                        cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first"
+                      }), footerGroup.headers.map(function (header) {
+                        var stickyStyle = getStickyStyle(header.column.id);
+                        var columnAlign = resolveColumnAlign({
+                          ...header.column.columnDef,
+                          id: header.column.id
+                        });
+                        return /* @__PURE__ */_jsx(Table.Cell, {
+                          ...cellFlexProps,
+                          ...getColSizeProps(header.column),
+                          ...(isWeb && stickyStyle ? {
+                            style: {
+                              position: "sticky",
+                              ...("insetInlineStart" in stickyStyle && {
+                                insetInlineStart: stickyStyle.insetInlineStart
+                              }),
+                              ...("insetInlineEnd" in stickyStyle && {
+                                insetInlineEnd: stickyStyle.insetInlineEnd
+                              }),
+                              zIndex: 2,
+                              backgroundColor: "var(--color2)"
+                            }
+                          } : {}),
+                          justifyContent: alignToFlex(columnAlign),
+                          "data-align": columnAlign,
+                          children: header.isPlaceholder ? null : /* @__PURE__ */_jsx(View, {
+                            width: "100%",
+                            minWidth: 0,
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: alignToFlex(columnAlign),
+                            "data-cell-align": columnAlign,
+                            style: isWeb ? {
+                              textAlign: columnAlign
+                            } : void 0,
+                            children: flexRender(header.column.columnDef.footer, header.getContext())
+                          })
+                        }, header.id);
+                      }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(Table.Cell, {
+                        cellWidth: chrome.deleteCol,
+                        cellHeight,
+                        cellLocation: "last"
+                      })]
+                    }, footerGroup.id);
                   })
                 })]
-              }), /* Table Footer */
-              hasFooter && /* @__PURE__ */_jsx(Table.Foot, {
-                children: footerGroups.map(function (footerGroup) {
-                  return /* @__PURE__ */_jsxs(Table.Row, {
-                    children: [enableRowSelection && /* @__PURE__ */_jsx(Table.Cell, {
-                      cellWidth: selectionColWidth,
-                      cellHeight,
-                      cellLocation: "first"
-                    }), showRowNumbers && /* @__PURE__ */_jsx(Table.Cell, {
-                      cellWidth: chrome.rowNumberCol,
-                      cellHeight,
-                      cellLocation: enableRowSelection ? "middle" : "first"
-                    }), enableRowExpansion && /* @__PURE__ */_jsx(Table.Cell, {
-                      cellWidth: chrome.expandCol,
-                      cellHeight,
-                      cellLocation: enableRowSelection || showRowNumbers ? "middle" : "first"
-                    }), footerGroup.headers.map(function (header) {
-                      var stickyStyle = getStickyStyle(header.column.id);
-                      var columnAlign = resolveColumnAlign({
-                        ...header.column.columnDef,
-                        id: header.column.id
-                      });
-                      return /* @__PURE__ */_jsx(Table.Cell, {
-                        ...cellFlexProps,
-                        ...getColSizeProps(header.column),
-                        ...(isWeb && stickyStyle ? {
-                          style: {
-                            position: "sticky",
-                            ...("insetInlineStart" in stickyStyle && {
-                              insetInlineStart: stickyStyle.insetInlineStart
-                            }),
-                            ...("insetInlineEnd" in stickyStyle && {
-                              insetInlineEnd: stickyStyle.insetInlineEnd
-                            }),
-                            zIndex: 2,
-                            backgroundColor: "var(--color2)"
-                          }
-                        } : {}),
-                        justifyContent: alignToFlex(columnAlign),
-                        "data-align": columnAlign,
-                        children: header.isPlaceholder ? null : /* @__PURE__ */_jsx(View, {
-                          width: "100%",
-                          minWidth: 0,
-                          flexDirection: "row",
-                          alignItems: "center",
-                          justifyContent: alignToFlex(columnAlign),
-                          "data-cell-align": columnAlign,
-                          style: isWeb ? {
-                            textAlign: columnAlign
-                          } : void 0,
-                          children: flexRender(header.column.columnDef.footer, header.getContext())
-                        })
-                      }, header.id);
-                    }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(Table.Cell, {
-                      cellWidth: chrome.deleteCol,
-                      cellHeight,
-                      cellLocation: "last"
-                    })]
-                  }, footerGroup.id);
-                })
-              })]
-            })
-          })), infinite ? /* @__PURE__ */_jsx(DataTableInfiniteTail, {
-            infinite,
-            visibleCount: tableRows.length,
-            showAppendSkeleton: !isVirtualized,
-            rowHeightPx,
-            fontSize: knobProps.sizeToken,
-            gapProps: knobProps.gap,
-            sentinel: !isVirtualized && !infinite.exhausted && !infinite.appendError && isWeb ? /* @__PURE__ */_jsx(View, {
-              // @ts-ignore web ref for IntersectionObserver
-              ref: sentinelRef,
-              height: 1,
+              })
+            })), infinite ? /* @__PURE__ */_jsx(DataTableInfiniteTail, {
+              infinite,
+              visibleCount: tableRows.length,
+              showAppendSkeleton: !isVirtualized,
+              rowHeightPx,
+              fontSize: knobProps.sizeToken,
+              gapProps: knobProps.gap,
+              sentinel: !isVirtualized && !infinite.exhausted && !infinite.appendError && isWeb ? /* @__PURE__ */_jsx(View, {
+                // @ts-ignore web ref for IntersectionObserver
+                ref: sentinelRef,
+                height: 1,
+                width: "100%",
+                "aria-hidden": true,
+                ...{
+                  "data-testid": "infinite-sentinel"
+                }
+              }) : null
+            }) : null, enableRowSelection && bulkBarPlacement === "bottom" ? /* @__PURE__ */_jsx(View, {
               width: "100%",
-              "aria-hidden": true,
-              ...{
-                "data-testid": "infinite-sentinel"
-              }
-            }) : null
-          }) : null, enableRowSelection && bulkBarPlacement === "bottom" ? /* @__PURE__ */_jsx(View, {
-            width: "100%",
-            ...(disabled ? disabledState.chromeKnobProps : {}),
-            children: /* @__PURE__ */_jsx(DataTableBulkActions, {
-              actions: resolvedBulkActions,
-              maxVisibleActions: 5,
-              showSelectionCount: true,
-              placement: "bottom"
-            })
-          }) : null, /* Add Row Button */
-          showAddRow && !readOnly && /* @__PURE__ */_jsx(View, {
-            children: /* @__PURE__ */_jsx(Button, {
-              icon: PlusIcon,
-              disabled: disabled || maxRows !== void 0 && tableData.length >= maxRows,
-              onPress: effectiveHandleAddRow,
-              "aria-label": t("Add Row"),
-              children: t("Add Row")
-            })
+              ...(disabled ? disabledState.chromeKnobProps : {}),
+              children: /* @__PURE__ */_jsx(DataTableBulkActions, {
+                actions: resolvedBulkActions,
+                maxVisibleActions: 5,
+                showSelectionCount: true,
+                placement: "bottom"
+              })
+            }) : null, /* Add Row Button */
+            showAddRow && !readOnly && /* @__PURE__ */_jsx(View, {
+              children: /* @__PURE__ */_jsx(Button, {
+                icon: PlusIcon,
+                disabled: disabled || maxRows !== void 0 && tableData.length >= maxRows,
+                onPress: effectiveHandleAddRow,
+                "aria-label": t("Add Row"),
+                children: t("Add Row")
+              })
+            })]
           }), /* Pagination footer (pages mode only; infinite replaces it with the tail status) */
           enablePagination && !infinite && /* @__PURE__ */_jsxs(View, {
             paddingTop: "$3",