@dbcdk/react-components 0.0.197 → 0.0.198

package/dist/components/table/columnLayout.utils.js

@@ -0,0 +1,141 @@
+import { ROW_ACTIONS_RESERVE_PX, SELECTION_COLUMN_PX } from './table.utils';
+
+const DEFAULT_MIN_COLUMN_PX = 80;
+function toIntegerTrackWidths(tracks, targetWidth) {
+  const floored = tracks.map((track) => ({
+    id: track.id,
+    width: Math.floor(track.width),
+    fraction: track.width - Math.floor(track.width)
+  }));
+  const baseTotal = floored.reduce((sum, track) => sum + track.width, 0);
+  let remainder = Math.max(0, targetWidth - baseTotal);
+  floored.slice().sort((a, b) => b.fraction - a.fraction).forEach((track) => {
+    if (remainder <= 0) return;
+    track.width += 1;
+    remainder -= 1;
+  });
+  return Object.fromEntries(floored.map((track) => [track.id, track.width]));
+}
+function distributeColumnWidths(args) {
+  const {
+    hasSelection,
+    hasContextMenu = false,
+    contextMenuReservePx = ROW_ACTIONS_RESERVE_PX,
+    availableWidth
+  } = args;
+  const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
+  const tracks = args.tracks.map((track) => {
+    const min = Math.max(1, track.min);
+    const max = track.max != null ? Math.max(min, track.max) : void 0;
+    if (track.fixedWidth != null) {
+      return {
+        id: track.id,
+        width: track.fixedWidth,
+        weight: 0,
+        min,
+        max: track.fixedWidth,
+        fixed: true
+      };
+    }
+    return {
+      id: track.id,
+      width: min,
+      weight: Number.isFinite(track.weight) && track.weight > 0 ? track.weight : 1,
+      min,
+      max,
+      fixed: false
+    };
+  });
+  const lastTrack = tracks[tracks.length - 1];
+  if (hasContextMenu && lastTrack && !lastTrack.fixed) {
+    lastTrack.width += contextMenuReservePx;
+    lastTrack.min += contextMenuReservePx;
+    if (lastTrack.max != null) lastTrack.max += contextMenuReservePx;
+  }
+  const fixedWidth = selectionWidth + tracks.reduce((sum, track) => sum + track.width, 0);
+  let remaining = Math.max(0, availableWidth - fixedWidth);
+  let active = tracks.filter(
+    (track) => !track.fixed && (track.max == null || track.width < track.max)
+  );
+  while (remaining > 0.5 && active.length > 0) {
+    const totalWeight = active.reduce((sum, track) => sum + track.weight, 0);
+    if (totalWeight <= 0) break;
+    let consumed = 0;
+    const nextActive = [];
+    for (const track of active) {
+      const share = remaining * track.weight / totalWeight;
+      const maxGrow = track.max == null ? share : Math.max(0, track.max - track.width);
+      const growth = Math.min(share, maxGrow);
+      track.width += growth;
+      consumed += growth;
+      if (track.max == null || track.width < track.max - 0.5) {
+        nextActive.push(track);
+      }
+    }
+    if (consumed <= 0.5) break;
+    remaining -= consumed;
+    active = nextActive;
+  }
+  const flexible = tracks.filter((track) => !track.fixed);
+  if (remaining > 0.5 && flexible.length > 0 && flexible.every((track) => track.max != null)) {
+    const stretchable = flexible.filter((track) => track.max > track.min);
+    const totalWeight = stretchable.reduce((sum, track) => sum + track.weight, 0);
+    if (totalWeight > 0) {
+      for (const track of stretchable) {
+        track.width += remaining * track.weight / totalWeight;
+      }
+    }
+  }
+  if (tracks.length > 0 && flexible.length === 0) {
+    const target = availableWidth - selectionWidth;
+    const minOf = (track) => track.min + (hasContextMenu && track === lastTrack ? contextMenuReservePx : 0);
+    let scalable = tracks;
+    while (scalable.length > 0) {
+      const frozenWidth = tracks.filter((track) => !scalable.includes(track)).reduce((sum, track) => sum + track.width, 0);
+      const scalableWidth = scalable.reduce((sum, track) => sum + track.width, 0);
+      const factor = (target - frozenWidth) / scalableWidth;
+      const belowMin = scalable.filter((track) => track.width * factor < minOf(track));
+      if (belowMin.length === 0) {
+        for (const track of scalable) track.width *= factor;
+        break;
+      }
+      for (const track of belowMin) track.width = minOf(track);
+      scalable = scalable.filter((track) => !belowMin.includes(track));
+    }
+  }
+  const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
+  const targetTrackWidth = Math.min(
+    Math.floor(floatTrackTotal + 1e-6),
+    availableWidth - selectionWidth
+  );
+  const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
+  const totalWidth = selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
+  return {
+    selectionWidth: hasSelection ? SELECTION_COLUMN_PX : void 0,
+    widths,
+    totalWidth,
+    availableWidth,
+    shouldOverflow: totalWidth > availableWidth
+  };
+}
+function usesDistributedWidths(columns) {
+  return columns.some(
+    (column) => column.minWidth != null || column.maxWidth != null || column.weight != null
+  );
+}
+function buildColumnTracks(columns) {
+  return columns.map((column) => {
+    var _a, _b;
+    if (typeof column.width === "number") {
+      return { id: column.id, min: column.width, max: column.width, weight: 1 };
+    }
+    return {
+      id: column.id,
+      min: (_a = column.minWidth) != null ? _a : DEFAULT_MIN_COLUMN_PX,
+      max: column.maxWidth,
+      weight: (_b = column.weight) != null ? _b : 1
+    };
+  });
+}
+
+export { DEFAULT_MIN_COLUMN_PX, buildColumnTracks, distributeColumnWidths, usesDistributedWidths };

package/dist/components/table/components/TableHeader.cjs

@@ -21,7 +21,8 @@ function TableHeader({
   onSortChange,
   headerExtras,
   stickyTop,
-  headerActions
+  headerActions,
+  compactHeaderActionReserve = false
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "thead",
@@ -45,6 +46,7 @@ function TableHeader({
             column,
             index,
             reserveInlineEnd: (hasRowContextMenu || headerActions != null) && index === columns.length - 1,
+            compactHeaderActionReserve,
             endAction: index === columns.length - 1 ? headerActions : void 0,
             sortById,
             sortDirection,

package/dist/components/table/components/TableHeader.d.ts

@@ -13,6 +13,7 @@ type Props<T> = {
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     stickyTop?: string;
     headerActions?: ReactNode;
+    compactHeaderActionReserve?: boolean;
 };
-export declare function TableHeader<T>({ columns, hasSelection, selectionMode, hasRowContextMenu, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, headerActions, }: Props<T>): React.ReactNode;
+export declare function TableHeader<T>({ columns, hasSelection, selectionMode, hasRowContextMenu, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, headerActions, compactHeaderActionReserve, }: Props<T>): React.ReactNode;
 export {};

package/dist/components/table/components/TableHeader.js

@@ -15,7 +15,8 @@ function TableHeader({
   onSortChange,
   headerExtras,
   stickyTop,
-  headerActions
+  headerActions,
+  compactHeaderActionReserve = false
 }) {
   return /* @__PURE__ */ jsx(
     "thead",
@@ -39,6 +40,7 @@ function TableHeader({
             column,
             index,
             reserveInlineEnd: (hasRowContextMenu || headerActions != null) && index === columns.length - 1,
+            compactHeaderActionReserve,
             endAction: index === columns.length - 1 ? headerActions : void 0,
             sortById,
             sortDirection,

package/dist/components/table/components/TableHeaderCell.cjs

@@ -14,6 +14,7 @@ function TableHeaderCell({
   column,
   index,
   reserveInlineEnd = false,
+  compactHeaderActionReserve = false,
   sortById,
   sortDirection,
   onSortChange,
@@ -39,27 +40,36 @@ function TableHeaderCell({
       "data-divider": column.divider,
       "data-column-index": index,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: table_classes.cx(alignClasses.main, reserveInlineEnd && styles__default.default.thMainWithActionsReserve), children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            type: "button",
-            className: alignClasses.button,
-            onClick: handleToggleSort,
-            onKeyDown: (e) => {
-              if (!table_utils.shouldToggleOnKey(e.key)) return;
-              e.preventDefault();
-              handleToggleSort();
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: alignClasses.label, children: table_utils.getHeaderLabel(column.header) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.sortIndicator, "aria-hidden": "true", children: [
-                active && sortDirection === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: styles__default.default.activeSort }),
-                active && sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.activeSort }),
-                !active && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.inActiveSort })
-              ] })
-            ]
+            className: table_classes.cx(
+              alignClasses.main,
+              reserveInlineEnd && (compactHeaderActionReserve ? styles__default.default.thMainWithHeaderActionsReserve : styles__default.default.thMainWithActionsReserve)
+            ),
+            children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                className: alignClasses.button,
+                onClick: handleToggleSort,
+                onKeyDown: (e) => {
+                  if (!table_utils.shouldToggleOnKey(e.key)) return;
+                  e.preventDefault();
+                  handleToggleSort();
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: alignClasses.label, children: table_utils.getHeaderLabel(column.header) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.sortIndicator, "aria-hidden": "true", children: [
+                    active && sortDirection === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: styles__default.default.activeSort }),
+                    active && sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.activeSort }),
+                    !active && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.inActiveSort })
+                  ] })
+                ]
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: alignClasses.label, children: table_utils.getHeaderLabel(column.header) })
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: alignClasses.label, children: table_utils.getHeaderLabel(column.header) }) }) }),
+        ) }),
         extraContent != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thOverlayExtras, children: extraContent }) : null,
         endAction != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thEndAction, children: endAction }) : null
       ]

package/dist/components/table/components/TableHeaderCell.d.ts

@@ -4,6 +4,7 @@ type Props<T> = {
     column: ColumnItem<T>;
     index: number;
     reserveInlineEnd?: boolean;
+    compactHeaderActionReserve?: boolean;
     sortById?: string;
     sortDirection?: SortDirection;
     onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
@@ -11,5 +12,5 @@ type Props<T> = {
     /** Rendered at the cell's inline end, in the space kept free by `reserveInlineEnd`. */
     endAction?: ReactNode;
 };
-export declare function TableHeaderCell<T>({ column, index, reserveInlineEnd, sortById, sortDirection, onSortChange, extraContent, endAction, }: Props<T>): ReactNode;
+export declare function TableHeaderCell<T>({ column, index, reserveInlineEnd, compactHeaderActionReserve, sortById, sortDirection, onSortChange, extraContent, endAction, }: Props<T>): ReactNode;
 export {};

package/dist/components/table/components/TableHeaderCell.js

@@ -8,6 +8,7 @@ function TableHeaderCell({
   column,
   index,
   reserveInlineEnd = false,
+  compactHeaderActionReserve = false,
   sortById,
   sortDirection,
   onSortChange,
@@ -33,27 +34,36 @@ function TableHeaderCell({
       "data-divider": column.divider,
       "data-column-index": index,
       children: [
-        /* @__PURE__ */ jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsx("div", { className: cx(alignClasses.main, reserveInlineEnd && styles.thMainWithActionsReserve), children: column.sortable ? /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsx(
+          "div",
           {
-            type: "button",
-            className: alignClasses.button,
-            onClick: handleToggleSort,
-            onKeyDown: (e) => {
-              if (!shouldToggleOnKey(e.key)) return;
-              e.preventDefault();
-              handleToggleSort();
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) }),
-              /* @__PURE__ */ jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [
-                active && sortDirection === "asc" && /* @__PURE__ */ jsx(ArrowUp, { className: styles.activeSort }),
-                active && sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: styles.activeSort }),
-                !active && /* @__PURE__ */ jsx(ArrowDown, { className: styles.inActiveSort })
-              ] })
-            ]
+            className: cx(
+              alignClasses.main,
+              reserveInlineEnd && (compactHeaderActionReserve ? styles.thMainWithHeaderActionsReserve : styles.thMainWithActionsReserve)
+            ),
+            children: column.sortable ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: alignClasses.button,
+                onClick: handleToggleSort,
+                onKeyDown: (e) => {
+                  if (!shouldToggleOnKey(e.key)) return;
+                  e.preventDefault();
+                  handleToggleSort();
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) }),
+                  /* @__PURE__ */ jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [
+                    active && sortDirection === "asc" && /* @__PURE__ */ jsx(ArrowUp, { className: styles.activeSort }),
+                    active && sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: styles.activeSort }),
+                    !active && /* @__PURE__ */ jsx(ArrowDown, { className: styles.inActiveSort })
+                  ] })
+                ]
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) })
           }
-        ) : /* @__PURE__ */ jsx("span", { className: alignClasses.label, children: getHeaderLabel(column.header) }) }) }),
+        ) }),
         extraContent != null ? /* @__PURE__ */ jsx("div", { className: styles.thOverlayExtras, children: extraContent }) : null,
         endAction != null ? /* @__PURE__ */ jsx("div", { className: styles.thEndAction, children: endAction }) : null
       ]

package/dist/components/table/hooks/useElementWidth.cjs

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+function measureContentWidth(el) {
+  const style = getComputedStyle(el);
+  const width = parseFloat(style.width);
+  if (!Number.isFinite(width)) return el.clientWidth;
+  const px = (value) => parseFloat(value) || 0;
+  const borders = px(style.borderLeftWidth) + px(style.borderRightWidth);
+  const padding = px(style.paddingLeft) + px(style.paddingRight);
+  const scrollbar = Math.max(0, el.offsetWidth - el.clientWidth - borders);
+  const borderBox = style.boxSizing === "border-box" ? width : width + padding + borders;
+  const widthExcludesScrollbar = el.offsetWidth - borderBox > scrollbar / 2;
+  const contentWidth = (style.boxSizing === "border-box" ? width - borders - padding : width) - (widthExcludesScrollbar ? 0 : scrollbar);
+  return Math.floor(contentWidth);
+}
+function useElementWidth(ref, enabled = true) {
+  const [width, setWidth] = react.useState(void 0);
+  react.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!enabled || !el) return;
+    const updateWidth = () => {
+      const next = measureContentWidth(el);
+      setWidth(next > 0 ? next : void 0);
+    };
+    updateWidth();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", updateWidth);
+      return () => window.removeEventListener("resize", updateWidth);
+    }
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref, enabled]);
+  return enabled ? width : void 0;
+}
+
+exports.useElementWidth = useElementWidth;

package/dist/components/table/hooks/useElementWidth.d.ts

@@ -0,0 +1,7 @@
+import type { RefObject } from 'react';
+/**
+ * Tracks the content width of `ref`'s element. Stays `undefined` until the
+ * first client measurement (and while `enabled` is false), so callers can hide
+ * layout that depends on it instead of rendering a wrong first frame.
+ */
+export declare function useElementWidth(ref: RefObject<HTMLElement | null>, enabled?: boolean): number | undefined;

package/dist/components/table/hooks/useElementWidth.js

@@ -0,0 +1,38 @@
+'use client';
+import { useState, useLayoutEffect } from 'react';
+
+function measureContentWidth(el) {
+  const style = getComputedStyle(el);
+  const width = parseFloat(style.width);
+  if (!Number.isFinite(width)) return el.clientWidth;
+  const px = (value) => parseFloat(value) || 0;
+  const borders = px(style.borderLeftWidth) + px(style.borderRightWidth);
+  const padding = px(style.paddingLeft) + px(style.paddingRight);
+  const scrollbar = Math.max(0, el.offsetWidth - el.clientWidth - borders);
+  const borderBox = style.boxSizing === "border-box" ? width : width + padding + borders;
+  const widthExcludesScrollbar = el.offsetWidth - borderBox > scrollbar / 2;
+  const contentWidth = (style.boxSizing === "border-box" ? width - borders - padding : width) - (widthExcludesScrollbar ? 0 : scrollbar);
+  return Math.floor(contentWidth);
+}
+function useElementWidth(ref, enabled = true) {
+  const [width, setWidth] = useState(void 0);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!enabled || !el) return;
+    const updateWidth = () => {
+      const next = measureContentWidth(el);
+      setWidth(next > 0 ? next : void 0);
+    };
+    updateWidth();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", updateWidth);
+      return () => window.removeEventListener("resize", updateWidth);
+    }
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref, enabled]);
+  return enabled ? width : void 0;
+}
+
+export { useElementWidth };

package/dist/components/table/table.utils.cjs

@@ -1,9 +1,27 @@
 'use strict';
 
 const SELECTION_COLUMN_PX = 32;
-const ACTIONS_COLUMN_PX = 0;
+const HEADER_ACTIONS_RESERVE_PX = 20;
 const ROW_ACTIONS_RESERVE_PX = 32;
 const DEFAULT_COLUMN_PX = 150;
+const DEFAULT_VIEW_MODE = "wrapped";
+function showsExpandToggle(expandableRows, viewMode) {
+  return Boolean(expandableRows) && viewMode !== "wrapped";
+}
+function reservesRowActionsSpace(args) {
+  return args.hasRowActions || args.showHeader && args.hasHeaderActions;
+}
+function getActionsReserve(args) {
+  const { hasRowActions, hasSettings, hasOtherHeaderActions, showHeader } = args;
+  const reserves = reservesRowActionsSpace({
+    hasRowActions,
+    hasHeaderActions: hasSettings || hasOtherHeaderActions,
+    showHeader
+  });
+  if (!reserves) return { px: 0, compactHeader: false };
+  const compactHeader = showHeader && hasSettings && !hasOtherHeaderActions && !hasRowActions;
+  return { px: compactHeader ? HEADER_ACTIONS_RESERVE_PX : ROW_ACTIONS_RESERVE_PX, compactHeader };
+}
 function getVisibleColumns(columns) {
   return columns.filter((column) => !column.hidden);
 }
@@ -46,10 +64,12 @@ function getCellDisplayValue(row, column) {
   return empty;
 }
 
-exports.ACTIONS_COLUMN_PX = ACTIONS_COLUMN_PX;
 exports.DEFAULT_COLUMN_PX = DEFAULT_COLUMN_PX;
+exports.DEFAULT_VIEW_MODE = DEFAULT_VIEW_MODE;
+exports.HEADER_ACTIONS_RESERVE_PX = HEADER_ACTIONS_RESERVE_PX;
 exports.ROW_ACTIONS_RESERVE_PX = ROW_ACTIONS_RESERVE_PX;
 exports.SELECTION_COLUMN_PX = SELECTION_COLUMN_PX;
+exports.getActionsReserve = getActionsReserve;
 exports.getAriaSort = getAriaSort;
 exports.getCellDisplayValue = getCellDisplayValue;
 exports.getHeaderLabel = getHeaderLabel;
@@ -57,5 +77,7 @@ exports.getNextSortDirection = getNextSortDirection;
 exports.getVisibleColumns = getVisibleColumns;
 exports.isActiveSort = isActiveSort;
 exports.isModifierClick = isModifierClick;
+exports.reservesRowActionsSpace = reservesRowActionsSpace;
 exports.shouldAllowWrap = shouldAllowWrap;
 exports.shouldToggleOnKey = shouldToggleOnKey;
+exports.showsExpandToggle = showsExpandToggle;

package/dist/components/table/table.utils.d.ts

@@ -1,7 +1,13 @@
 import type { ReactNode } from 'react';
-import type { ColumnItem } from './Table.types';
+import type { ColumnItem, ViewMode } from './Table.types';
 export declare const SELECTION_COLUMN_PX: 32;
-export declare const ACTIONS_COLUMN_PX: 0;
+/**
+ * Smaller reserve used when the only action is the header's settings button:
+ * the button overlaps the header cell's own padding. Must match
+ * `.thMainWithHeaderActionsReserve` in Table.module.css
+ * (component-size-sm 30px - spacing-sm 12px + spacing-2xs 2px).
+ */
+export declare const HEADER_ACTIONS_RESERVE_PX: 20;
 /**
  * Space kept free at the inline end of the last column for the row actions
  * button and header actions. Must match `--table-row-actions-reserve-inline`
@@ -9,7 +15,39 @@ export declare const ACTIONS_COLUMN_PX: 0;
  */
 export declare const ROW_ACTIONS_RESERVE_PX: 32;
 export declare const DEFAULT_COLUMN_PX: 150;
+/** View mode when neither the `viewMode` prop nor table settings set one. */
+export declare const DEFAULT_VIEW_MODE: ViewMode;
+/**
+ * Whether rows show the expand toggle: only in compact mode, since wrapped
+ * rows already show their full content.
+ */
+export declare function showsExpandToggle(expandableRows: boolean | undefined, viewMode: ViewMode): boolean;
 export type SortDirection = 'asc' | 'desc' | null;
+/**
+ * Whether the last column reserves `ROW_ACTIONS_RESERVE_PX` at its inline end:
+ * row actions (context menu, expand toggle) always do, header actions (e.g.
+ * the settings menu) only while the header row that holds them is shown.
+ */
+export declare function reservesRowActionsSpace(args: {
+    hasRowActions: boolean;
+    hasHeaderActions: boolean;
+    showHeader: boolean;
+}): boolean;
+/**
+ * How much space the last column reserves for actions: none, the smaller
+ * `HEADER_ACTIONS_RESERVE_PX` when the header's settings button is the only
+ * action, or the full `ROW_ACTIONS_RESERVE_PX`. Shared by Table and
+ * TanstackTable so the computed widths match the header's padding.
+ */
+export declare function getActionsReserve(args: {
+    hasRowActions: boolean;
+    hasSettings: boolean;
+    hasOtherHeaderActions: boolean;
+    showHeader: boolean;
+}): {
+    px: number;
+    compactHeader: boolean;
+};
 export declare function getVisibleColumns<T>(columns: Array<ColumnItem<T>>): Array<ColumnItem<T>>;
 export declare function getHeaderLabel(header: string | (() => ReactNode)): ReactNode;
 export declare function isActiveSort(sortById: string | undefined, columnId: string): boolean;

package/dist/components/table/table.utils.js

@@ -1,7 +1,25 @@
 const SELECTION_COLUMN_PX = 32;
-const ACTIONS_COLUMN_PX = 0;
+const HEADER_ACTIONS_RESERVE_PX = 20;
 const ROW_ACTIONS_RESERVE_PX = 32;
 const DEFAULT_COLUMN_PX = 150;
+const DEFAULT_VIEW_MODE = "wrapped";
+function showsExpandToggle(expandableRows, viewMode) {
+  return Boolean(expandableRows) && viewMode !== "wrapped";
+}
+function reservesRowActionsSpace(args) {
+  return args.hasRowActions || args.showHeader && args.hasHeaderActions;
+}
+function getActionsReserve(args) {
+  const { hasRowActions, hasSettings, hasOtherHeaderActions, showHeader } = args;
+  const reserves = reservesRowActionsSpace({
+    hasRowActions,
+    hasHeaderActions: hasSettings || hasOtherHeaderActions,
+    showHeader
+  });
+  if (!reserves) return { px: 0, compactHeader: false };
+  const compactHeader = showHeader && hasSettings && !hasOtherHeaderActions && !hasRowActions;
+  return { px: compactHeader ? HEADER_ACTIONS_RESERVE_PX : ROW_ACTIONS_RESERVE_PX, compactHeader };
+}
 function getVisibleColumns(columns) {
   return columns.filter((column) => !column.hidden);
 }
@@ -44,4 +62,4 @@ function getCellDisplayValue(row, column) {
   return empty;
 }
 
-export { ACTIONS_COLUMN_PX, DEFAULT_COLUMN_PX, ROW_ACTIONS_RESERVE_PX, SELECTION_COLUMN_PX, getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isActiveSort, isModifierClick, shouldAllowWrap, shouldToggleOnKey };
+export { DEFAULT_COLUMN_PX, DEFAULT_VIEW_MODE, HEADER_ACTIONS_RESERVE_PX, ROW_ACTIONS_RESERVE_PX, SELECTION_COLUMN_PX, getActionsReserve, getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isActiveSort, isModifierClick, reservesRowActionsSpace, shouldAllowWrap, shouldToggleOnKey, showsExpandToggle };