basalt-ui 1.30.2 → 1.31.0

package/dist/data/data-table.js

@@ -18,9 +18,11 @@ import {
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../common/props.js";
 import { BASALT_PREFIX } from "../common/errors.js";
+import { HIT_COARSE } from "../common/hit-floor.js";
+import { useMeasuredWidths } from "../common/use-measured-widths.js";
 import { assertRequiredProps, useValidateProps } from "../common/validate.js";
 import { FilterSet } from "../controls/index.js";
 import { ActionGroup, BarActionSlot } from "../controls/actions.js";
@@ -106,26 +108,31 @@ 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()
-      }
+    header: ({ table }) => (
+      // oxlint-disable-next-line jsx-a11y/label-has-associated-control -- wraps <Checkbox>, which oxlint cannot see is an input
+      /* @__PURE__ */ jsx("label", { className: classes.selectHit, children: /* @__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()
-      }
+    cell: ({ row }) => (
+      // oxlint-disable-next-line jsx-a11y/label-has-associated-control -- wraps <Checkbox>, which oxlint cannot see is an input
+      /* @__PURE__ */ jsx("label", { className: classes.selectHit, children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          size: "xs",
+          "aria-label": `Select row ${row.index + 1}`,
+          checked: row.getIsSelected(),
+          disabled: !row.getCanSelect(),
+          onChange: row.getToggleSelectedHandler()
+        }
+      ) })
     )
   };
 }
@@ -201,6 +208,118 @@ function getPinnedCellStyle(table, column) {
     boxShadow: isEdge ? `-4px 0 6px -4px ${alpha(VX.ink, 0.18)}` : void 0
   };
 }
+function columnDefId(column) {
+  if (column.id !== void 0) return column.id;
+  return "accessorKey" in column && typeof column.accessorKey === "string" ? column.accessorKey : void 0;
+}
+function foldOrder(columns) {
+  return columns.map((column, index) => ({
+    id: columnDefId(column),
+    priority: column.meta?.priority ?? index,
+    index
+  })).filter(
+    (candidate) => Boolean(candidate.id)
+  ).toSorted((a, b) => b.priority - a.priority || b.index - a.index).map((candidate) => candidate.id);
+}
+const FOLD_ID_ATTR = "data-basalt-fold-id";
+const EMPTY_FOLD_SET = /* @__PURE__ */ new Set();
+function planColumnFold(input) {
+  const { room, toggleWidth, overhead, order, widths } = input;
+  const known = order.filter((id) => widths.has(id));
+  let unfolded = overhead + known.reduce((sum, id) => sum + (widths.get(id) ?? 0), 0);
+  const folded = /* @__PURE__ */ new Set();
+  for (const id of known) {
+    if (folded.size >= known.length - 1) break;
+    const withToggle = unfolded + (folded.size > 0 ? toggleWidth : 0);
+    if (withToggle <= room) break;
+    folded.add(id);
+    unfolded -= widths.get(id) ?? 0;
+  }
+  return folded;
+}
+function useColumnFold(input) {
+  const { active, order, fixedIds } = input;
+  const wrapperRef = useRef(null);
+  const [folded, setFolded] = useState(EMPTY_FOLD_SET);
+  const orderRef = useRef(order);
+  orderRef.current = order;
+  const fixedIdsRef = useRef(fixedIds);
+  fixedIdsRef.current = fixedIds;
+  useLayoutEffect(() => {
+    if (!active || order.length === 0) {
+      setFolded((current) => current.size === 0 ? current : EMPTY_FOLD_SET);
+    }
+  }, [active, order.length]);
+  useMeasuredWidths({
+    resolveRoot: () => wrapperRef.current,
+    signature: `${order.join("|")}::${fixedIds.join("|")}`,
+    enabled: active && order.length > 0,
+    // The table too, not only the wrapper: a re-measured column set moves its min-content width
+    // while the wrapper's own box never changes.
+    extra: (root) => [root.querySelector("table")],
+    onMeasure: (root, boxes) => {
+      for (const cell of root.querySelectorAll(`[${FOLD_ID_ATTR}]`)) {
+        const id = cell.getAttribute(FOLD_ID_ATTR);
+        if (id !== null && cell.offsetWidth > 0) {
+          boxes.current.set(id, { width: cell.offsetWidth, height: cell.offsetHeight });
+        }
+      }
+      const room = root.clientWidth;
+      if (room === 0) return;
+      const widths = new Map([...boxes.current].map(([id, box]) => [id, box.width]));
+      const overhead = fixedIdsRef.current.reduce((sum, id) => sum + (widths.get(id) ?? 0), 0);
+      const next = planColumnFold({
+        room,
+        // The disclosure toggle is a fixed icon-button cell matched to the coarse hit floor, so it
+        // reads as one more `--vx-hit` control rather than a narrower afterthought.
+        toggleWidth: HIT_COARSE,
+        overhead,
+        order: orderRef.current,
+        widths
+      });
+      setFolded(
+        (current) => current.size === next.size && [...current].every((id) => next.has(id)) ? current : next
+      );
+    }
+  });
+  return { wrapperRef, folded: active ? folded : EMPTY_FOLD_SET };
+}
+function columnLabel(column) {
+  const header = column.columnDef.header;
+  return typeof header === "string" ? header : column.id;
+}
+function RowDisclosure({
+  row,
+  folded
+}) {
+  const cells = row.getAllCells().filter((cell) => folded.has(cell.column.id));
+  return /* @__PURE__ */ jsx("div", { className: classes.foldDisclosure, children: cells.map((cell) => /* @__PURE__ */ jsxs("div", { className: classes.foldDisclosureRow, children: [
+    /* @__PURE__ */ jsx(Text, { className: classes.foldDisclosureLabel, children: columnLabel(cell.column) }),
+    /* @__PURE__ */ jsx("div", { className: classes.foldDisclosureValue, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
+  ] }, cell.id)) });
+}
+function FoldToggle({
+  expanded,
+  controlsId,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes.foldToggle,
+      "data-basalt-hit": true,
+      "aria-expanded": expanded,
+      "aria-controls": controlsId,
+      "aria-label": expanded ? "Hide row details" : "Show row details",
+      onClick: (event) => {
+        event.stopPropagation();
+        onToggle();
+      },
+      children: /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": true, children: expanded ? "\u25BE" : "\u25B8" })
+    }
+  );
+}
 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}`.',
@@ -233,35 +352,21 @@ function enforceManualPaginationContract(breaches) {
 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";
+  useMeasuredWidths({
+    resolveRoot: () => wrapperRef.current,
+    signature: String(active),
+    enabled: active,
+    // The TABLE too, not only the wrapper: a column set that re-measures (a facet filter changing
+    // the widest cell, a font settling) moves the table's min-content width while the wrapper's
+    // box never changes at all.
+    extra: (root) => [root.querySelector("table")],
+    onMeasure: (root) => {
+      const table = root.querySelector("table");
+      if (table === null || root.clientWidth === 0 || table.offsetWidth === 0) return;
+      const next = table.offsetWidth > root.clientWidth;
       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) {
@@ -401,7 +506,7 @@ function BasaltDataTable(props) {
     if (!facets || facets.length === 0) return columns;
     const facetById = new Map(facets.map((facet) => [facet.columnId, facet]));
     return columns.map((column) => {
-      const id = column.id ?? column.accessorKey;
+      const id = columnDefId(column);
       const facet = id === void 0 ? void 0 : facetById.get(id);
       if (!facet) return column;
       const filterFn = facet.multiple ? (row, columnId, filterValue) => !Array.isArray(filterValue) || filterValue.length === 0 ? true : filterValue.includes(String(row.getValue(columnId))) : (row, columnId, filterValue) => filterValue === null || filterValue === void 0 || filterValue === "" ? true : String(row.getValue(columnId)) === filterValue;
@@ -430,6 +535,62 @@ function BasaltDataTable(props) {
   const sortingEnabled = enableSorting && !breaches.includes("sorting");
   const filteringEnabled = !breaches.includes("filtering");
   const totalIsAuthoritative = !breaches.includes("total");
+  const scrolls = maxHeight !== void 0 || minWidth !== void 0;
+  const foldEligible = minWidth === void 0;
+  const { columnFoldOrder, columnFoldFixedIds } = useMemo(() => {
+    const pinnedIds = /* @__PURE__ */ new Set([...columnPinning.left ?? [], ...columnPinning.right ?? []]);
+    const excluded = new Set(
+      columns.flatMap((column) => {
+        const id = columnDefId(column);
+        if (id === void 0) return [];
+        return column.enableHiding === false || pinnedIds.has(id) ? [id] : [];
+      })
+    );
+    return {
+      columnFoldOrder: foldOrder(columns).filter((id) => !excluded.has(id)),
+      columnFoldFixedIds: [...excluded]
+    };
+  }, [columns, columnPinning]);
+  const columnFold = useColumnFold({
+    active: foldEligible,
+    order: columnFoldOrder,
+    fixedIds: columnFoldFixedIds
+  });
+  const columnVisibility = useMemo(
+    () => Object.fromEntries([...columnFold.folded].map((id) => [id, false])),
+    [columnFold.folded]
+  );
+  const hasFolded = columnFold.folded.size > 0;
+  const [expandedFoldRows, setExpandedFoldRows] = useState(EMPTY_FOLD_SET);
+  const toggleFoldRow = useCallback((rowId) => {
+    setExpandedFoldRows((current) => {
+      const next = new Set(current);
+      if (next.has(rowId)) next.delete(rowId);
+      else next.add(rowId);
+      return next;
+    });
+  }, []);
+  const prevDataRef = useRef(data);
+  useEffect(() => {
+    const prevData = prevDataRef.current;
+    prevDataRef.current = data;
+    setExpandedFoldRows((current) => {
+      if (current.size === 0) return current;
+      let next;
+      if (getRowId === void 0) {
+        next = new Set(
+          [...current].filter((id) => {
+            const index = Number(id);
+            return data[index] !== void 0 && data[index] === prevData[index];
+          })
+        );
+      } else {
+        const liveIds = new Set(data.map((row, index) => getRowId(row, index)));
+        next = new Set([...current].filter((id) => liveIds.has(id)));
+      }
+      return next.size === current.size ? current : next;
+    });
+  }, [data, getRowId]);
   const table = useReactTable({
     data,
     columns: tableColumns,
@@ -438,6 +599,7 @@ function BasaltDataTable(props) {
       globalFilter,
       columnFilters,
       columnPinning,
+      columnVisibility,
       ...enablePagination && { pagination },
       ...enableRowSelection && { rowSelection: rowSelectionState }
     },
@@ -476,7 +638,7 @@ function BasaltDataTable(props) {
   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 columnCount = columns.length + (enableRowSelection ? 1 : 0) + (hasFolded ? 1 : 0) - columnFold.folded.size;
   const selectedModelRows = enableRowSelection ? table.getSelectedRowModel().rows : void 0;
   const selectedRows = useMemo(
     () => selectedModelRows?.map((row) => row.original) ?? [],
@@ -488,7 +650,6 @@ function BasaltDataTable(props) {
   );
   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;
@@ -507,36 +668,42 @@ function BasaltDataTable(props) {
       ...withRowBorders !== void 0 && { withRowBorders },
       withTableBorder,
       children: [
-        /* @__PURE__ */ jsx(Table.Thead, { children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(Table.Tr, { children: headerGroup.headers.map((header) => {
-          const canSort = sortingEnabled && header.column.getCanSort();
-          const sorted = header.column.getIsSorted();
-          const toggleSorting = header.column.getToggleSortingHandler();
-          const pinnedStyle = enablePinning ? getPinnedCellStyle(table, header.column) : void 0;
-          const align = resolveAlign(header.column);
-          return /* @__PURE__ */ jsxs(
-            Table.Th,
-            {
-              onClick: canSort ? toggleSorting : void 0,
-              onKeyDown: canSort ? (event) => {
-                if (event.key !== "Enter" && event.key !== " ") return;
-                event.preventDefault();
-                toggleSorting?.(event);
-              } : void 0,
-              tabIndex: canSort ? 0 : void 0,
-              "aria-sort": canSort ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0,
-              style: {
-                ...canSort ? { cursor: "pointer", userSelect: "none" } : void 0,
-                ...align !== void 0 && { textAlign: align },
-                ...pinnedStyle
+        /* @__PURE__ */ jsx(Table.Thead, { children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          hasFolded && /* @__PURE__ */ jsx(Table.Th, { className: classes.foldToggleCell, "aria-hidden": true }),
+          headerGroup.headers.map((header) => {
+            const canSort = sortingEnabled && header.column.getCanSort();
+            const sorted = header.column.getIsSorted();
+            const toggleSorting = header.column.getToggleSortingHandler();
+            const pinnedStyle = enablePinning ? getPinnedCellStyle(table, header.column) : void 0;
+            const align = resolveAlign(header.column);
+            const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
+            return /* @__PURE__ */ jsxs(
+              Table.Th,
+              {
+                ...isSelectColumn && { className: classes.selectCell },
+                ...!isSelectColumn && { [FOLD_ID_ATTR]: header.column.id },
+                onClick: canSort ? toggleSorting : void 0,
+                onKeyDown: canSort ? (event) => {
+                  if (event.key !== "Enter" && event.key !== " ") return;
+                  event.preventDefault();
+                  toggleSorting?.(event);
+                } : void 0,
+                tabIndex: canSort ? 0 : void 0,
+                "aria-sort": canSort ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0,
+                style: {
+                  ...canSort ? { cursor: "pointer", userSelect: "none" } : void 0,
+                  ...align !== void 0 && { textAlign: align },
+                  ...pinnedStyle
+                },
+                children: [
+                  header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                  canSort && /* @__PURE__ */ jsx(SortIndicator, { direction: sorted })
+                ]
               },
-              children: [
-                header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
-                canSort && /* @__PURE__ */ jsx(SortIndicator, { direction: sorted })
-              ]
-            },
-            header.id
-          );
-        }) }, headerGroup.id)) }),
+              header.id
+            );
+          })
+        ] }, headerGroup.id)) }),
         /* @__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
@@ -557,44 +724,65 @@ function BasaltDataTable(props) {
             ...row.getCenterVisibleCells(),
             ...row.getRightVisibleCells()
           ] : row.getVisibleCells();
-          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);
-                }
-              },
-              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 rowExpanded = hasFolded && expandedFoldRows.has(row.id);
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              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);
+                  }
+                },
+                children: [
+                  hasFolded && /* @__PURE__ */ jsx(Table.Td, { className: classes.foldToggleCell, children: /* @__PURE__ */ jsx(
+                    FoldToggle,
+                    {
+                      expanded: rowExpanded,
+                      controlsId: `${row.id}-fold`,
+                      onToggle: () => toggleFoldRow(row.id)
+                    }
+                  ) }),
+                  cells.map((cell) => {
+                    const pinnedStyle = enablePinning ? getPinnedCellStyle(table, cell.column) : void 0;
+                    const align = resolveAlign(cell.column);
+                    return /* @__PURE__ */ jsx(
+                      Table.Td,
+                      {
+                        ...cell.column.id === SELECT_COLUMN_ID && {
+                          className: classes.selectCell,
+                          // The label's ::after fills the cell, so a tap on it bubbles to the row —
+                          // stop it only where a tick is possible; a disabled row's tap is a row tap.
+                          ...cell.row.getCanSelect() && {
+                            onClick: (event) => event.stopPropagation()
+                          }
+                        },
+                        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
+                    );
+                  })
+                ]
+              }
+            ),
+            rowExpanded && /* @__PURE__ */ jsx(Table.Tr, { id: `${row.id}-fold`, className: classes.foldDisclosureRowTr, children: /* @__PURE__ */ jsx(Table.Td, { colSpan: columnCount, className: classes.foldDisclosureCell, children: /* @__PURE__ */ jsx(RowDisclosure, { row, folded: columnFold.folded }) }) })
+          ] }, row.id);
         }) })
       ]
     }
@@ -661,27 +849,36 @@ function BasaltDataTable(props) {
       ) })
     ] }),
     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",
-        minWidth: minWidth ?? 0,
-        ...maxHeight !== void 0 && { maxHeight },
-        children: tableNode
-      }
+    !foldEligible ? (
+      // An explicit `minWidth` is the one genuinely DECLARED horizontal floor — the column fold
+      // never engages here (see `foldEligible`, above), so this shape keeps its exact
+      // pre-existing DOM: no extra measuring wrapper for a table nothing folds.
+      /* @__PURE__ */ jsx(Table.ScrollContainer, { type: "native", minWidth: minWidth ?? 0, maxHeight, children: tableNode })
+    ) : (
+      // The column fold's own measuring box (`useColumnFold`) — wraps every remaining shape,
+      // `maxHeight`-only included: a vertical cap is orthogonal to column width, so a
+      // `stickyHeader` + `maxHeight` table (the pairing this package's own docs recommend) still
+      // folds instead of silently regressing to horizontal scroll. A plain block box, so it
+      // constrains nothing on its own; `columnFold.wrapperRef` only reads it.
+      /* @__PURE__ */ jsx("div", { ref: columnFold.wrapperRef, className: classes.foldWrapper, children: 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
+          }
+        )
+      ) : maxHeight !== void 0 ? (
+        // `pageStickyHeader` is already false whenever `maxHeight` is set (`scrolls` above), so
+        // this is the ONE remaining case: a vertical cap with no sticky header to measure —
+        // still wants its own `ScrollArea` scrollport, just with no `minWidth` floor.
+        /* @__PURE__ */ jsx(Table.ScrollContainer, { type: "native", minWidth: 0, maxHeight, children: tableNode })
+      ) : /* @__PURE__ */ jsx(Table.ScrollContainer, { type: "native", minWidth: 0, children: tableNode }) })
     ),
     enablePagination && /* @__PURE__ */ jsxs(
       Group,
@@ -713,7 +910,7 @@ function BasaltDataTable(props) {
                 allowDeselect: false
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(CtlSlot, { children: /* @__PURE__ */ jsx(
               Pagination,
               {
                 size: "sm",
@@ -722,7 +919,7 @@ function BasaltDataTable(props) {
                 value: paginationState.pageIndex + 1,
                 onChange: (page) => table.setPageIndex(page - 1)
               }
-            )
+            ) })
           ] })
         ]
       }
@@ -730,5 +927,6 @@ function BasaltDataTable(props) {
   ] });
 }
 export {
-  BasaltDataTable
+  BasaltDataTable,
+  planColumnFold
 };