basalt-ui 1.27.0 → 1.29.0

package/dist/data/data-table.js

@@ -1,5 +1,15 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Box, Group, Pagination, Select, Skeleton, Table, Text, TextInput } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Box,
+  Checkbox,
+  Group,
+  Pagination,
+  Select,
+  Skeleton,
+  Table,
+  Text,
+  TextInput
+} from "@mantine/core";
 import {
   flexRender,
   getCoreRowModel,
@@ -8,13 +18,21 @@ import {
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { cx } from "../common/props.js";
+import { BASALT_PREFIX } from "../common/errors.js";
+import { assertRequiredProps, useValidateProps } from "../common/validate.js";
 import { FilterSet } from "../controls/index.js";
+import { ActionGroup, BarActionSlot } from "../controls/actions.js";
 import { EnumFilter } from "../controls/enum-filter.js";
 import { MultiSelectFilter } from "../controls/multi-select-filter.js";
 import { CtlSlot } from "../theme/index.js";
 import { alpha, VX } from "../tokens/index.js";
-import { WidgetHeader } from "../widget-header/index.js";
+import { WidgetHeader } from "../dashboard/index.js";
+import { ErrorState } from "../dashboard/query-state.js";
+import { dataQueryBranch } from "./query-branch.js";
+import { isDev } from "../common/is-dev.js";
+import classes from "./data-table.module.css";
 const ALIGNMENTS = /* @__PURE__ */ new Set(["left", "center", "right"]);
 function resolveAlign(column) {
   const align = column.columnDef.meta?.align;
@@ -72,6 +90,54 @@ function facetMultiHandle(column, facet) {
     isDefault: (value) => value.length === 0
   };
 }
+function resolveFacetColumn(table, facet) {
+  const column = table.getColumn(facet.columnId);
+  if (column) return column;
+  if (isDev()) {
+    const knownIds = table.getAllColumns().map((known) => known.id).join(", ");
+    throw new Error(
+      `BasaltDataTable: facet columnId "${facet.columnId}" matches no column \u2014 known column ids: ${knownIds}.`
+    );
+  }
+  return void 0;
+}
+const SELECT_COLUMN_ID = "__basalt_select__";
+function selectionColumn() {
+  return {
+    id: SELECT_COLUMN_ID,
+    enableSorting: false,
+    header: ({ table }) => /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        size: "xs",
+        "aria-label": "Select all rows",
+        checked: table.getIsAllPageRowsSelected(),
+        indeterminate: table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(),
+        onChange: table.getToggleAllPageRowsSelectedHandler()
+      }
+    ),
+    cell: ({ row }) => /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        size: "xs",
+        "aria-label": `Select row ${row.index + 1}`,
+        checked: row.getIsSelected(),
+        disabled: !row.getCanSelect(),
+        onChange: row.getToggleSelectedHandler(),
+        onClick: (event) => event.stopPropagation()
+      }
+    )
+  };
+}
+function BulkActionBar({ count, actions }) {
+  return /* @__PURE__ */ jsxs(Group, { className: classes.bulkBar, gap: "xs", align: "center", wrap: "wrap", mb: "xs", children: [
+    /* @__PURE__ */ jsxs(Text, { className: classes.bulkCount, children: [
+      count,
+      " selected"
+    ] }),
+    /* @__PURE__ */ jsx(CtlSlot, { children: /* @__PURE__ */ jsx(ActionGroup, { secondary: actions }) })
+  ] });
+}
 function SortIndicator({ direction }) {
   if (!direction) return null;
   return /* @__PURE__ */ jsx(Box, { component: "span", ml: 4, "aria-hidden": true, children: direction === "asc" ? "\u2191" : "\u2193" });
@@ -91,8 +157,13 @@ const RANGE_LABEL_STYLE = {
 };
 const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
 const TABLE_HEADER_LEAD_STYLE = { flex: "1 1 auto", minWidth: 0 };
-const TABLE_TOOLBAR_STYLE = { flex: "0 0 auto" };
+const TABLE_TOOLBAR_STYLE = { flex: "0 1 auto", minWidth: 0 };
 const SEARCH_WIDTH = 220;
+const TABLE_SEARCH_STYLE = {
+  flex: `0 1 ${SEARCH_WIDTH}px`,
+  minWidth: "12ch",
+  maxWidth: "100%"
+};
 const PAGE_SIZE_WIDTH = 116;
 function getOrderedHeaderGroups(table) {
   const left = table.getLeftHeaderGroups();
@@ -130,9 +201,6 @@ function getPinnedCellStyle(table, column) {
     boxShadow: isEdge ? `-4px 0 6px -4px ${alpha(VX.ink, 0.18)}` : void 0
   };
 }
-function isDev() {
-  return process.env["NODE_ENV"] !== "production";
-}
 const BREACH_REMEDY = {
   inert: "`enablePagination` is not set, so `manualPagination` never reaches the table and the server page renders as if it were the whole set, with no bar to say otherwise. Pass `enablePagination`, or drop `manualPagination`.",
   total: 'neither `rowCount` nor `pageCount` was given, so "of N" counts only the rows on this page and the pager collapses to one page nobody can leave. Pass `rowCount={total}`.',
@@ -162,48 +230,94 @@ function enforceManualPaginationContract(breaches) {
   reportedBreaches.add(message);
   console.error(message);
 }
-function BasaltDataTable({
-  title,
-  icon,
-  subtitle,
-  data,
-  columns,
-  enableSorting = true,
-  manualSorting = false,
-  striped,
-  highlightOnHover,
-  emptyState,
-  isLoading = false,
-  skeletonRows = 5,
-  initialSorting,
-  onSortingChange,
-  enableGlobalFilter = false,
-  globalFilterPlaceholder = "Search\u2026",
-  searchIcon,
-  initialGlobalFilter,
-  onGlobalFilterChange,
-  facets,
-  onColumnFiltersChange,
-  manualFiltering = false,
-  actions,
-  enablePagination = false,
-  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
-  initialPagination,
-  onPaginationChange,
-  manualPagination = false,
-  rowCount,
-  pageCount,
-  enablePinning = false,
-  initialColumnPinning,
-  maxHeight,
-  minWidth,
-  stickyHeader,
-  stickyHeaderOffset,
-  verticalSpacing,
-  horizontalSpacing,
-  withRowBorders,
-  withTableBorder = false
-}) {
+function useMeasuredContainment(active) {
+  const wrapperRef = useRef(null);
+  const [contained, setContained] = useState(false);
+  useLayoutEffect(() => {
+    if (!active) return;
+    const wrapper = wrapperRef.current;
+    if (wrapper === null) return;
+    const checkFit = () => {
+      const table2 = wrapper.querySelector("table");
+      if (table2 === null) return "unknown";
+      if (wrapper.clientWidth === 0 || table2.offsetWidth === 0) return "unknown";
+      return table2.offsetWidth <= wrapper.clientWidth ? "fits" : "contained";
+    };
+    const apply = () => {
+      const result = checkFit();
+      if (result === "unknown") return;
+      const next = result === "contained";
+      setContained((current) => current === next ? current : next);
+    };
+    if (typeof ResizeObserver === "undefined") {
+      apply();
+      return;
+    }
+    const observer = new ResizeObserver(apply);
+    observer.observe(wrapper);
+    const table = wrapper.querySelector("table");
+    if (table !== null) observer.observe(table);
+    apply();
+    return () => {
+      observer.disconnect();
+    };
+  }, [active]);
+  return { wrapperRef, contained: active && contained };
+}
+function BasaltDataTable(props) {
+  assertRequiredProps("BasaltDataTable", props, ["data", "columns"]);
+  const {
+    title,
+    icon,
+    subtitle,
+    data,
+    columns,
+    enableSorting = true,
+    manualSorting = false,
+    striped,
+    highlightOnHover,
+    emptyState,
+    isLoading = false,
+    query,
+    skeletonRows = 5,
+    initialSorting,
+    onSortingChange,
+    enableGlobalFilter = false,
+    globalFilterPlaceholder = "Search\u2026",
+    searchIcon,
+    initialGlobalFilter,
+    onGlobalFilterChange,
+    facets,
+    onColumnFiltersChange,
+    manualFiltering = false,
+    actions,
+    onRowActivate,
+    enableRowSelection = false,
+    rowSelection,
+    onRowSelectionChange,
+    getRowId,
+    bulkActions,
+    enablePagination = false,
+    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+    initialPagination,
+    onPaginationChange,
+    manualPagination = false,
+    rowCount,
+    pageCount,
+    enablePinning = false,
+    initialColumnPinning,
+    maxHeight,
+    minWidth,
+    stickyHeader,
+    stickyHeaderOffset,
+    verticalSpacing,
+    horizontalSpacing,
+    withRowBorders,
+    withTableBorder = false,
+    className,
+    style,
+    classNames
+  } = props;
   const [sorting, setSorting] = useState(initialSorting ?? []);
   const [globalFilter, setGlobalFilter] = useState(initialGlobalFilter ?? "");
   const [columnFilters, setColumnFilters] = useState([]);
@@ -211,6 +325,24 @@ function BasaltDataTable({
     initialPagination ?? { pageIndex: 0, pageSize: pageSizeOptions[0] ?? 10 }
   );
   const [columnPinning, setColumnPinning] = useState(initialColumnPinning ?? {});
+  const [internalRowSelection, setInternalRowSelection] = useState({});
+  const rowSelectionState = rowSelection ?? internalRowSelection;
+  useValidateProps(
+    "BasaltDataTable",
+    () => [
+      stickyHeaderOffset === void 0 || maxHeight === void 0 && minWidth === void 0 ? null : `${BASALT_PREFIX} BasaltDataTable: prop "stickyHeaderOffset" is ignored beside "maxHeight"/"minWidth" \u2014 those render a scroll container, and the sticky \`<thead>\` then anchors to that box's own top edge rather than to the window. Drop the offset, or drop the cap and let the page scroll.`,
+      query === void 0 || props.isLoading === void 0 ? null : `${BASALT_PREFIX} BasaltDataTable: props "query" and "isLoading" are both set \u2014 "query" wins and "isLoading" is ignored. \`query\` already resolves the pending branch, plus the error and empty ones the boolean cannot express. Drop "isLoading".`,
+      stickyHeader !== true || maxHeight !== void 0 || minWidth !== void 0 ? null : `${BASALT_PREFIX} BasaltDataTable: prop "stickyHeader" with neither "maxHeight" nor "minWidth" sticks only while the table FITS its container. basalt measures it: a table wider than the space it has flips its wrapper to \`overflow-x: auto\` so the columns stay reachable and the page never scrolls sideways, and a sticky header cannot stick inside that box \u2014 it has no scroll range. Pair it with "maxHeight" for a table that must both scroll and stick.`
+    ],
+    [
+      stickyHeaderOffset,
+      maxHeight,
+      minWidth,
+      stickyHeader,
+      query === void 0,
+      props.isLoading === void 0
+    ]
+  );
   const handleSortingChange = useCallback(
     (updater) => {
       setSorting((prev) => {
@@ -251,7 +383,21 @@ function BasaltDataTable({
     },
     [onPaginationChange]
   );
-  const tableColumns = useMemo(() => {
+  const handleRowSelectionChange = useCallback(
+    (updater) => {
+      if (rowSelection !== void 0) {
+        onRowSelectionChange?.(typeof updater === "function" ? updater(rowSelection) : updater);
+        return;
+      }
+      setInternalRowSelection((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        onRowSelectionChange?.(next);
+        return next;
+      });
+    },
+    [rowSelection, onRowSelectionChange]
+  );
+  const facetColumns = useMemo(() => {
     if (!facets || facets.length === 0) return columns;
     const facetById = new Map(facets.map((facet) => [facet.columnId, facet]));
     return columns.map((column) => {
@@ -263,6 +409,10 @@ function BasaltDataTable({
       return { ...column, filterFn };
     });
   }, [columns, facets]);
+  const tableColumns = useMemo(
+    () => enableRowSelection ? [selectionColumn(), ...facetColumns] : facetColumns,
+    [facetColumns, enableRowSelection]
+  );
   const hasFacets = Boolean(facets && facets.length > 0);
   const breaches = manualPaginationBreaches({
     columns,
@@ -288,13 +438,19 @@ function BasaltDataTable({
       globalFilter,
       columnFilters,
       columnPinning,
-      ...enablePagination && { pagination }
+      ...enablePagination && { pagination },
+      ...enableRowSelection && { rowSelection: rowSelectionState }
     },
     onSortingChange: handleSortingChange,
     onGlobalFilterChange: handleGlobalFilterChange,
     onColumnFiltersChange: handleColumnFiltersChange,
     onColumnPinningChange: setColumnPinning,
     ...enablePagination && { onPaginationChange: handlePaginationChange },
+    ...enableRowSelection && {
+      enableRowSelection: true,
+      onRowSelectionChange: handleRowSelectionChange
+    },
+    ...getRowId !== void 0 && { getRowId },
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
@@ -317,15 +473,35 @@ function BasaltDataTable({
   const showSearch = enableGlobalFilter && filteringEnabled;
   const showFacets = hasFacets && filteringEnabled;
   const showToolbar = showSearch || showFacets || Boolean(actions);
+  const branch = query === void 0 ? void 0 : dataQueryBranch("BasaltDataTable", query);
+  const showSkeleton = branch === void 0 ? isLoading : branch === "pending";
+  const queryError = branch === "error" && query !== void 0 ? query : void 0;
+  const columnCount = columns.length + (enableRowSelection ? 1 : 0);
+  const selectedModelRows = enableRowSelection ? table.getSelectedRowModel().rows : void 0;
+  const selectedRows = useMemo(
+    () => selectedModelRows?.map((row) => row.original) ?? [],
+    [selectedModelRows]
+  );
+  const bulkBarActions = useMemo(
+    () => bulkActions === void 0 || selectedRows.length === 0 ? void 0 : bulkActions(selectedRows),
+    [bulkActions, selectedRows]
+  );
   const headerGroups = enablePinning ? getOrderedHeaderGroups(table) : table.getHeaderGroups();
   const rows = table.getRowModel().rows;
+  const scrolls = maxHeight !== void 0 || minWidth !== void 0;
+  const pageStickyHeader = !scrolls && stickyHeader === true;
+  const containment = useMeasuredContainment(pageStickyHeader);
+  const resolvedStickyHeaderOffset = scrolls ? void 0 : stickyHeaderOffset;
   const tableNode = /* @__PURE__ */ jsxs(
     Table,
     {
+      className: cx(classNames?.table),
       ...striped !== void 0 && { striped },
       ...highlightOnHover !== void 0 && { highlightOnHover },
       ...stickyHeader !== void 0 && { stickyHeader },
-      ...stickyHeaderOffset !== void 0 && { stickyHeaderOffset },
+      ...resolvedStickyHeaderOffset !== void 0 && {
+        stickyHeaderOffset: resolvedStickyHeaderOffset
+      },
       ...verticalSpacing !== void 0 && { verticalSpacing },
       ...horizontalSpacing !== void 0 && { horizontalSpacing },
       ...withRowBorders !== void 0 && { withRowBorders },
@@ -361,39 +537,74 @@ function BasaltDataTable({
             header.id
           );
         }) }, headerGroup.id)) }),
-        /* @__PURE__ */ jsx(Table.Tbody, { children: isLoading ? Array.from({ length: skeletonRows }, (_, rowIndex) => /* @__PURE__ */ jsx(Table.Tr, { children: columns.map((_2, colIndex) => /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Skeleton, { height: 16, radius: "sm" }) }, `skeleton-${rowIndex}-${colIndex}`)) }, `skeleton-${rowIndex}`)) : rows.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: columns.length, children: emptyState ?? /* @__PURE__ */ jsx(Text, { c: "dimmed", ta: "center", size: "sm", py: "sm", children: "No data to display." }) }) }) : rows.map((row) => {
+        /* @__PURE__ */ jsx(Table.Tbody, { children: queryError !== void 0 ? (
+          // The branch the table did not have (components audit #3). It spans every rendered
+          // column and carries the query's OWN `refetch` behind Retry, so the failure is reported
+          // where the rows would have been — not as an empty table saying nothing failed.
+          /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: columnCount, children: /* @__PURE__ */ jsx(
+            ErrorState,
+            {
+              error: queryError.error,
+              title: "Could not load",
+              tier: "section",
+              retrying: queryError.fetchStatus === "fetching",
+              onRetry: () => void queryError.refetch()
+            }
+          ) }) })
+        ) : showSkeleton ? Array.from({ length: skeletonRows }, (_, rowIndex) => /* @__PURE__ */ jsx(Table.Tr, { children: Array.from({ length: columnCount }, (__, colIndex) => /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Skeleton, { height: 16, radius: "sm" }) }, `skeleton-${rowIndex}-${colIndex}`)) }, `skeleton-${rowIndex}`)) : rows.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: columnCount, children: emptyState ?? /* @__PURE__ */ jsx(Text, { c: "dimmed", ta: "center", size: "sm", py: "sm", children: "No data to display." }) }) }) : rows.map((row) => {
           const cells = enablePinning ? [
             ...row.getLeftVisibleCells(),
             ...row.getCenterVisibleCells(),
             ...row.getRightVisibleCells()
           ] : row.getVisibleCells();
-          return /* @__PURE__ */ jsx(Table.Tr, { children: cells.map((cell) => {
-            const pinnedStyle = enablePinning ? getPinnedCellStyle(table, cell.column) : void 0;
-            const align = resolveAlign(cell.column);
-            return /* @__PURE__ */ jsx(
-              Table.Td,
-              {
-                style: {
-                  ...typeof cell.getValue() === "number" && cell.column.columnDef.meta?.numeral !== false ? NUMERIC_CELL_STYLE : void 0,
-                  ...align !== void 0 && { textAlign: align },
-                  ...pinnedStyle
-                },
-                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+          return /* @__PURE__ */ jsx(
+            Table.Tr,
+            {
+              ...enableRowSelection && row.getIsSelected() && { "data-selected": true },
+              ...onRowActivate !== void 0 && {
+                className: classes.activatable,
+                "data-activatable": true,
+                tabIndex: 0,
+                onClick: () => onRowActivate(row.original),
+                // Enter only. Space is the browser's own page-scroll on a focused non-button, and
+                // stealing it from a keyboard reader moving down a long table costs more than the
+                // second activation key buys.
+                onKeyDown: (event) => {
+                  if (event.key !== "Enter") return;
+                  if (event.target !== event.currentTarget) return;
+                  event.preventDefault();
+                  onRowActivate(row.original);
+                }
               },
-              cell.id
-            );
-          }) }, row.id);
+              children: cells.map((cell) => {
+                const pinnedStyle = enablePinning ? getPinnedCellStyle(table, cell.column) : void 0;
+                const align = resolveAlign(cell.column);
+                return /* @__PURE__ */ jsx(
+                  Table.Td,
+                  {
+                    style: {
+                      ...typeof cell.getValue() === "number" && cell.column.columnDef.meta?.numeral !== false ? NUMERIC_CELL_STYLE : void 0,
+                      ...align !== void 0 && { textAlign: align },
+                      ...pinnedStyle
+                    },
+                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                  },
+                  cell.id
+                );
+              })
+            },
+            row.id
+          );
         }) })
       ]
     }
   );
-  const scrolls = maxHeight !== void 0 || minWidth !== void 0;
   const paginationState = table.getState().pagination;
   const pageSizeRows = [.../* @__PURE__ */ new Set([...pageSizeOptions, paginationState.pageSize])].sort((a, b) => a - b).map((size) => ({ value: String(size), label: `${size} / page` }));
   const total = table.getRowCount();
   const rangeStart = total === 0 ? 0 : paginationState.pageIndex * paginationState.pageSize + 1;
   const rangeEnd = Math.min((paginationState.pageIndex + 1) * paginationState.pageSize, total);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx(classNames?.root, className), ...style !== void 0 && { style }, children: [
     (title !== void 0 || showToolbar) && /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", wrap: "wrap", gap: "xs", mb: "xs", children: [
       title !== void 0 ? /* @__PURE__ */ jsx(Box, { style: TABLE_HEADER_LEAD_STYLE, children: /* @__PURE__ */ jsx(
         WidgetHeader,
@@ -405,41 +616,65 @@ function BasaltDataTable({
           count: table.getRowCount()
         }
       ) }) : null,
-      showToolbar && /* @__PURE__ */ jsx(CtlSlot, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", style: TABLE_TOOLBAR_STYLE, children: [
-        showSearch && /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            radius: "md",
-            w: SEARCH_WIDTH,
-            placeholder: globalFilterPlaceholder,
-            leftSection: searchIcon,
-            value: globalFilter,
-            onChange: (event) => handleGlobalFilterChange(event.currentTarget.value)
-          }
-        ),
-        showFacets && /* @__PURE__ */ jsx(FilterSet, { children: facets?.map((facet) => {
-          const column = table.getColumn(facet.columnId);
-          if (!column) return null;
-          return facet.multiple ? /* @__PURE__ */ jsx(
-            MultiSelectFilter,
-            {
-              field: facetMultiHandle(column, facet),
-              label: facet.label
-            },
-            facet.columnId
-          ) : /* @__PURE__ */ jsx(
-            EnumFilter,
-            {
-              field: facetEnumHandle(column, facet),
-              label: facet.label
-            },
-            facet.columnId
-          );
-        }) }),
-        actions
-      ] }) })
+      showToolbar && /* @__PURE__ */ jsx(CtlSlot, { children: /* @__PURE__ */ jsxs(
+        Group,
+        {
+          className: cx(classNames?.toolbar),
+          gap: "xs",
+          wrap: "wrap",
+          align: "center",
+          style: TABLE_TOOLBAR_STYLE,
+          children: [
+            showSearch && /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                radius: "md",
+                style: TABLE_SEARCH_STYLE,
+                placeholder: globalFilterPlaceholder,
+                leftSection: searchIcon,
+                value: globalFilter,
+                onChange: (event) => handleGlobalFilterChange(event.currentTarget.value)
+              }
+            ),
+            showFacets && /* @__PURE__ */ jsx(FilterSet, { children: facets?.map((facet) => {
+              const column = resolveFacetColumn(table, facet);
+              if (!column) return null;
+              return facet.multiple ? /* @__PURE__ */ jsx(
+                MultiSelectFilter,
+                {
+                  field: facetMultiHandle(column, facet),
+                  label: facet.label
+                },
+                facet.columnId
+              ) : /* @__PURE__ */ jsx(
+                EnumFilter,
+                {
+                  field: facetEnumHandle(column, facet),
+                  label: facet.label
+                },
+                facet.columnId
+              );
+            }) }),
+            actions !== void 0 && /* @__PURE__ */ jsx(BarActionSlot, { actions })
+          ]
+        }
+      ) })
     ] }),
-    scrolls ? /* @__PURE__ */ jsx(
+    bulkBarActions !== void 0 && /* @__PURE__ */ jsx(BulkActionBar, { count: selectedRows.length, actions: bulkBarActions }),
+    pageStickyHeader ? (
+      // Pinning takes this wrapper too — a pinned column's offsets are `position: sticky` on the
+      // cells and need no overflow box of their own, so the `overflow-x: auto` Box that used to
+      // sit here was the exact inert-sticky defect this shape exists to avoid.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containment.wrapperRef,
+          className: classes.containment,
+          "data-contained": containment.contained ? "true" : "false",
+          children: tableNode
+        }
+      )
+    ) : /* @__PURE__ */ jsx(
       Table.ScrollContainer,
       {
         type: "native",
@@ -447,40 +682,51 @@ function BasaltDataTable({
         ...maxHeight !== void 0 && { maxHeight },
         children: tableNode
       }
-    ) : enablePinning ? /* @__PURE__ */ jsx(Box, { style: { overflowX: "auto" }, children: tableNode }) : tableNode,
-    enablePagination && /* @__PURE__ */ jsxs(Group, { justify: "space-between", mt: "xs", wrap: "wrap", gap: "xs", align: "center", children: [
-      /* @__PURE__ */ jsxs(Text, { style: RANGE_LABEL_STYLE, children: [
-        "Showing ",
-        rangeStart,
-        "\u2013",
-        rangeEnd,
-        totalIsAuthoritative ? ` of ${total}` : ""
-      ] }),
-      /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", children: [
-        /* @__PURE__ */ jsx(
-          Select,
-          {
-            size: "ctl",
-            radius: "md",
-            w: PAGE_SIZE_WIDTH,
-            data: pageSizeRows,
-            value: String(paginationState.pageSize),
-            onChange: (value) => value && table.setPageSize(Number(value)),
-            allowDeselect: false
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Pagination,
-          {
-            size: "sm",
-            radius: "md",
-            total: Math.max(table.getPageCount(), 1),
-            value: paginationState.pageIndex + 1,
-            onChange: (page) => table.setPageIndex(page - 1)
-          }
-        )
-      ] })
-    ] })
+    ),
+    enablePagination && /* @__PURE__ */ jsxs(
+      Group,
+      {
+        className: cx(classNames?.footer),
+        justify: "space-between",
+        mt: "xs",
+        wrap: "wrap",
+        gap: "xs",
+        align: "center",
+        children: [
+          /* @__PURE__ */ jsxs(Text, { style: RANGE_LABEL_STYLE, children: [
+            "Showing ",
+            rangeStart,
+            "\u2013",
+            rangeEnd,
+            totalIsAuthoritative ? ` of ${total}` : ""
+          ] }),
+          /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", children: [
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                size: "ctl",
+                radius: "md",
+                w: PAGE_SIZE_WIDTH,
+                data: pageSizeRows,
+                value: String(paginationState.pageSize),
+                onChange: (value) => value && table.setPageSize(Number(value)),
+                allowDeselect: false
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Pagination,
+              {
+                size: "sm",
+                radius: "md",
+                total: Math.max(table.getPageCount(), 1),
+                value: paginationState.pageIndex + 1,
+                onChange: (page) => table.setPageIndex(page - 1)
+              }
+            )
+          ] })
+        ]
+      }
+    )
   ] });
 }
 export {