@dbcdk/react-components 0.0.196 → 0.0.198

package/dist/components/table/Table.module.css

@@ -379,6 +379,10 @@
   padding-inline-end: var(--table-row-actions-reserve-inline);
 }
 
+.thMainWithHeaderActionsReserve {
+  padding-inline-end: calc(var(--component-size-sm) - var(--spacing-sm) + var(--spacing-2xs));
+}
+
 .thMainRight {
   justify-content: flex-end;
 }

package/dist/components/table/Table.types.d.ts

@@ -6,7 +6,22 @@ export interface ColumnItem<T> {
     id: string;
     header: string | (() => ReactNode);
     accessor?: keyof T;
+    /**
+     * Column width. When any column sets `minWidth`, `maxWidth` or `weight`,
+     * a numeric width pins the column to exactly that many pixels.
+     */
     width?: number | string;
+    /**
+     * Smallest width in pixels. Setting `minWidth`, `maxWidth` or `weight` on any
+     * column makes the table measure its container and distribute the width:
+     * each column starts at its minimum (default 80) and grows by `weight`
+     * towards `maxWidth`. Columns whose minimums don't fit scroll horizontally.
+     */
+    minWidth?: number;
+    /** Largest width in pixels. See `minWidth`. */
+    maxWidth?: number;
+    /** Relative share of the leftover width (default 1). See `minWidth`. */
+    weight?: number;
     sortable?: boolean;
     sortFunction?: (a: T, b: T) => -1 | 0 | 1;
     render?: (item: T) => ReactNode;
@@ -85,6 +100,12 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     emptyConfig?: any;
     variant?: TableVariant;
     size?: 'sm' | 'md';
+    /**
+     * `'wrapped'` (default) wraps cell text so all content is visible.
+     * `'compact'` keeps each row on one line with truncated text, for even row
+     * heights; rows can then be expanded with `expandableRows`.
+     * Overrides the view mode from `settings`.
+     */
     viewMode?: ViewMode;
     striped?: boolean;
     fillViewport?: boolean;
@@ -106,6 +127,12 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
      * actions column. Falls back to the toolbar when `showHeader` is false.
      */
     headerActions?: ReactNode;
+    /**
+     * Columns listed in the settings menu. Defaults to `columns`; pass the
+     * original definitions when `columns` is derived from them with `hidden`
+     * already applied (as TanstackTable does).
+     */
+    settingsColumns?: ReadonlyArray<ColumnItem<T> | TableSettingsColumn>;
     /**
      * Shows a settings menu (stripes, text wrapping, column visibility) in the
      * header and applies its state to the table. Pass the result of

package/dist/components/table/TanstackTable.cjs

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactTable = require('@tanstack/react-table');
 var React = require('react');
 var ColumnResizer = require('./components/column-resizer/ColumnResizer');
-var TableHeaderSettings = require('./components/table-settings/TableHeaderSettings');
+var useElementWidth = require('./hooks/useElementWidth');
 var Table = require('./Table');
 var table_utils = require('./table.utils');
 var tanstackTable_utils = require('./tanstackTable.utils');
@@ -34,6 +34,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ColumnResizer__default = /*#__PURE__*/_interopDefault(ColumnResizer);
 
 function TanstackTable(props) {
+  var _a, _b;
   const {
     data,
     dataKey,
@@ -65,8 +66,9 @@ function TanstackTable(props) {
     [columns, visibleColumnIds]
   );
   const [columnSizing, setColumnSizing] = React__namespace.useState({});
+  const neighborResizeRef = React__namespace.useRef(null);
   const containerRef = React__namespace.useRef(null);
-  const [availableWidth, setAvailableWidth] = React__namespace.useState(void 0);
+  const availableWidth = useElementWidth.useElementWidth(containerRef);
   const table = reactTable.useReactTable({
     data,
     columns,
@@ -80,7 +82,13 @@ function TanstackTable(props) {
       if (optimisticSortingUi) setUiSorting(next);
       onSortingChange == null ? void 0 : onSortingChange(next);
     },
-    onColumnSizingChange: setColumnSizing,
+    onColumnSizingChange: (updater) => {
+      setColumnSizing((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        const resize = neighborResizeRef.current;
+        return resize && table.getState().columnSizingInfo.isResizingColumn === resize.columnId ? tanstackTable_utils.applyNeighborResize(next, resize) : next;
+      });
+    },
     getCoreRowModel: reactTable.getCoreRowModel(),
     getSortedRowModel: reactTable.getSortedRowModel(),
     manualSorting: manualSorting != null ? manualSorting : false,
@@ -92,58 +100,25 @@ function TanstackTable(props) {
       size: table_utils.DEFAULT_COLUMN_PX
     }
   });
-  React__namespace.useLayoutEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const updateWidth = () => {
-      const next = el.clientWidth;
-      setAvailableWidth(next > 0 ? next : void 0);
-    };
-    updateWidth();
-    if (typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", updateWidth);
-      return () => window.removeEventListener("resize", updateWidth);
-    }
-    const observer = new ResizeObserver((entries) => {
-      var _a, _b, _c;
-      const entry = entries[0];
-      if (!entry) {
-        updateWidth();
-        return;
-      }
-      const contentWidth = (_c = (_b = (_a = entry.contentBoxSize) == null ? void 0 : _a[0]) == null ? void 0 : _b.inlineSize) != null ? _c : entry.contentRect.width;
-      const next = Math.floor(contentWidth);
-      setAvailableWidth(next > 0 ? next : void 0);
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
+  const resolvedViewMode = (_a = viewMode != null ? viewMode : settings == null ? void 0 : settings.viewMode) != null ? _a : table_utils.DEFAULT_VIEW_MODE;
+  const { px: actionReservePx } = table_utils.getActionsReserve({
+    hasRowActions: Boolean(tableProps.getContextMenuItems) || table_utils.showsExpandToggle(tableProps.expandableRows, resolvedViewMode),
+    hasSettings: Boolean(settings),
+    hasOtherHeaderActions: headerActionsProp != null,
+    showHeader: (_b = tableProps.showHeader) != null ? _b : true
+  });
   const distributedLayout = React__namespace.useMemo(() => {
     if (availableWidth == null) return null;
     return tanstackTable_utils.buildDistributedColumnWidths({
       table,
       hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
-      // Row actions (context menu, expand toggle) and header actions (e.g. the
-      // settings menu) all reserve space at the end of the last column.
-      hasContextMenu: Boolean(
-        tableProps.getContextMenuItems || tableProps.expandableRows || settings || headerActionsProp != null
-      ),
+      hasContextMenu: actionReservePx > 0,
+      contextMenuReservePx: actionReservePx,
       defaultMinPx: 80,
       columnSizing,
       availableWidth
     });
-  }, [
-    table,
-    selectedRows,
-    onRowSelect,
-    dataKey,
-    tableProps.getContextMenuItems,
-    tableProps.expandableRows,
-    settings,
-    headerActionsProp,
-    columnSizing,
-    availableWidth
-  ]);
+  }, [table, selectedRows, onRowSelect, dataKey, actionReservePx, columnSizing, availableWidth]);
   const initialLayoutReady = availableWidth != null;
   const resolvedLayout = React__namespace.useMemo(() => {
     const next = {};
@@ -170,36 +145,61 @@ function TanstackTable(props) {
   );
   const headerExtras = React__namespace.useCallback(
     ({ index }) => {
-      var _a, _b, _c, _d;
+      var _a2, _b2, _c, _d;
       const headerGroups = table.getHeaderGroups();
       const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
       const header = leafHeaders[index];
-      if (!header) return null;
-      const canResize = (_c = (_b = (_a = header.column).getCanResize) == null ? void 0 : _b.call(_a)) != null ? _c : false;
+      const neighbor = leafHeaders[index + 1];
+      if (!header || !neighbor) return null;
+      const canResize = (_c = (_b2 = (_a2 = header.column).getCanResize) == null ? void 0 : _b2.call(_a2)) != null ? _c : false;
       const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
       if (!canResize || !handler) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer__default.default, { id: header.column.id, handler });
+      const handleResizeStart = (event) => {
+        var _a3, _b3, _c2, _d2, _e;
+        const startWidth = distributedLayout == null ? void 0 : distributedLayout.widths[header.column.id];
+        const neighborStartWidth = distributedLayout == null ? void 0 : distributedLayout.widths[neighbor.column.id];
+        if (startWidth == null || neighborStartWidth == null) return;
+        const neighborReserve = index + 1 === leafHeaders.length - 1 ? actionReservePx : 0;
+        const { columnDef } = header.column;
+        const neighborDef = neighbor.column.columnDef;
+        neighborResizeRef.current = {
+          columnId: header.column.id,
+          neighborId: neighbor.column.id,
+          // TanStack drags from its own size (columnDef.size), not the width on
+          // screen; applyNeighborResize only uses its offset from this.
+          tanstackStartWidth: header.getSize(),
+          startWidth,
+          neighborStartWidth,
+          min: (_a3 = columnDef.minSize) != null ? _a3 : 0,
+          max: (_b3 = columnDef.maxSize) != null ? _b3 : Infinity,
+          neighborMin: ((_c2 = neighborDef.minSize) != null ? _c2 : 0) + neighborReserve,
+          neighborMax: ((_d2 = neighborDef.maxSize) != null ? _d2 : Infinity) + neighborReserve
+        };
+        const displayedWidths = (_e = distributedLayout == null ? void 0 : distributedLayout.widths) != null ? _e : {};
+        setColumnSizing(
+          (prev) => Object.fromEntries(
+            Object.entries(prev).map(([id, width]) => {
+              var _a4;
+              return [id, (_a4 = displayedWidths[id]) != null ? _a4 : width];
+            })
+          )
+        );
+        handler(event);
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer__default.default, { id: header.column.id, handler: handleResizeStart });
     },
-    [table]
+    [table, distributedLayout, actionReservePx]
   );
-  const headerActions = headerActionsProp != null || settings ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    headerActionsProp,
-    settings ? /* @__PURE__ */ jsxRuntime.jsx(
-      TableHeaderSettings.TableHeaderSettings,
-      {
-        settings,
-        options: settingsOptions,
-        columns
-      }
-    ) : null
-  ] }) : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Table.Table,
     {
       ...tableProps,
-      viewMode: viewMode != null ? viewMode : settings == null ? void 0 : settings.viewMode,
+      viewMode: resolvedViewMode,
       striped: striped != null ? striped : settings == null ? void 0 : settings.striped,
-      headerActions,
+      headerActions: headerActionsProp,
+      settings,
+      settingsOptions,
+      settingsColumns: columns,
       tableRootRef: containerRef,
       onSortChange: handleSortChange,
       dataKey,

package/dist/components/table/TanstackTable.js

@@ -1,14 +1,15 @@
 'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 import * as React from 'react';
 import ColumnResizer from './components/column-resizer/ColumnResizer';
-import { TableHeaderSettings } from './components/table-settings/TableHeaderSettings';
+import { useElementWidth } from './hooks/useElementWidth';
 import { Table } from './Table';
-import { DEFAULT_COLUMN_PX } from './table.utils';
-import { sortingEqual, buildColumnVisibilityFromVisibleIds, buildDistributedColumnWidths, mapDefsToColumnItems, getSortPropsFromSorting } from './tanstackTable.utils';
+import { DEFAULT_COLUMN_PX, DEFAULT_VIEW_MODE, getActionsReserve, showsExpandToggle } from './table.utils';
+import { sortingEqual, buildColumnVisibilityFromVisibleIds, applyNeighborResize, buildDistributedColumnWidths, mapDefsToColumnItems, getSortPropsFromSorting } from './tanstackTable.utils';
 
 function TanstackTable(props) {
+  var _a, _b;
   const {
     data,
     dataKey,
@@ -40,8 +41,9 @@ function TanstackTable(props) {
     [columns, visibleColumnIds]
   );
   const [columnSizing, setColumnSizing] = React.useState({});
+  const neighborResizeRef = React.useRef(null);
   const containerRef = React.useRef(null);
-  const [availableWidth, setAvailableWidth] = React.useState(void 0);
+  const availableWidth = useElementWidth(containerRef);
   const table = useReactTable({
     data,
     columns,
@@ -55,7 +57,13 @@ function TanstackTable(props) {
       if (optimisticSortingUi) setUiSorting(next);
       onSortingChange == null ? void 0 : onSortingChange(next);
     },
-    onColumnSizingChange: setColumnSizing,
+    onColumnSizingChange: (updater) => {
+      setColumnSizing((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        const resize = neighborResizeRef.current;
+        return resize && table.getState().columnSizingInfo.isResizingColumn === resize.columnId ? applyNeighborResize(next, resize) : next;
+      });
+    },
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     manualSorting: manualSorting != null ? manualSorting : false,
@@ -67,58 +75,25 @@ function TanstackTable(props) {
       size: DEFAULT_COLUMN_PX
     }
   });
-  React.useLayoutEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const updateWidth = () => {
-      const next = el.clientWidth;
-      setAvailableWidth(next > 0 ? next : void 0);
-    };
-    updateWidth();
-    if (typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", updateWidth);
-      return () => window.removeEventListener("resize", updateWidth);
-    }
-    const observer = new ResizeObserver((entries) => {
-      var _a, _b, _c;
-      const entry = entries[0];
-      if (!entry) {
-        updateWidth();
-        return;
-      }
-      const contentWidth = (_c = (_b = (_a = entry.contentBoxSize) == null ? void 0 : _a[0]) == null ? void 0 : _b.inlineSize) != null ? _c : entry.contentRect.width;
-      const next = Math.floor(contentWidth);
-      setAvailableWidth(next > 0 ? next : void 0);
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
+  const resolvedViewMode = (_a = viewMode != null ? viewMode : settings == null ? void 0 : settings.viewMode) != null ? _a : DEFAULT_VIEW_MODE;
+  const { px: actionReservePx } = getActionsReserve({
+    hasRowActions: Boolean(tableProps.getContextMenuItems) || showsExpandToggle(tableProps.expandableRows, resolvedViewMode),
+    hasSettings: Boolean(settings),
+    hasOtherHeaderActions: headerActionsProp != null,
+    showHeader: (_b = tableProps.showHeader) != null ? _b : true
+  });
   const distributedLayout = React.useMemo(() => {
     if (availableWidth == null) return null;
     return buildDistributedColumnWidths({
       table,
       hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
-      // Row actions (context menu, expand toggle) and header actions (e.g. the
-      // settings menu) all reserve space at the end of the last column.
-      hasContextMenu: Boolean(
-        tableProps.getContextMenuItems || tableProps.expandableRows || settings || headerActionsProp != null
-      ),
+      hasContextMenu: actionReservePx > 0,
+      contextMenuReservePx: actionReservePx,
       defaultMinPx: 80,
       columnSizing,
       availableWidth
     });
-  }, [
-    table,
-    selectedRows,
-    onRowSelect,
-    dataKey,
-    tableProps.getContextMenuItems,
-    tableProps.expandableRows,
-    settings,
-    headerActionsProp,
-    columnSizing,
-    availableWidth
-  ]);
+  }, [table, selectedRows, onRowSelect, dataKey, actionReservePx, columnSizing, availableWidth]);
   const initialLayoutReady = availableWidth != null;
   const resolvedLayout = React.useMemo(() => {
     const next = {};
@@ -145,36 +120,61 @@ function TanstackTable(props) {
   );
   const headerExtras = React.useCallback(
     ({ index }) => {
-      var _a, _b, _c, _d;
+      var _a2, _b2, _c, _d;
       const headerGroups = table.getHeaderGroups();
       const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
       const header = leafHeaders[index];
-      if (!header) return null;
-      const canResize = (_c = (_b = (_a = header.column).getCanResize) == null ? void 0 : _b.call(_a)) != null ? _c : false;
+      const neighbor = leafHeaders[index + 1];
+      if (!header || !neighbor) return null;
+      const canResize = (_c = (_b2 = (_a2 = header.column).getCanResize) == null ? void 0 : _b2.call(_a2)) != null ? _c : false;
       const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
       if (!canResize || !handler) return null;
-      return /* @__PURE__ */ jsx(ColumnResizer, { id: header.column.id, handler });
+      const handleResizeStart = (event) => {
+        var _a3, _b3, _c2, _d2, _e;
+        const startWidth = distributedLayout == null ? void 0 : distributedLayout.widths[header.column.id];
+        const neighborStartWidth = distributedLayout == null ? void 0 : distributedLayout.widths[neighbor.column.id];
+        if (startWidth == null || neighborStartWidth == null) return;
+        const neighborReserve = index + 1 === leafHeaders.length - 1 ? actionReservePx : 0;
+        const { columnDef } = header.column;
+        const neighborDef = neighbor.column.columnDef;
+        neighborResizeRef.current = {
+          columnId: header.column.id,
+          neighborId: neighbor.column.id,
+          // TanStack drags from its own size (columnDef.size), not the width on
+          // screen; applyNeighborResize only uses its offset from this.
+          tanstackStartWidth: header.getSize(),
+          startWidth,
+          neighborStartWidth,
+          min: (_a3 = columnDef.minSize) != null ? _a3 : 0,
+          max: (_b3 = columnDef.maxSize) != null ? _b3 : Infinity,
+          neighborMin: ((_c2 = neighborDef.minSize) != null ? _c2 : 0) + neighborReserve,
+          neighborMax: ((_d2 = neighborDef.maxSize) != null ? _d2 : Infinity) + neighborReserve
+        };
+        const displayedWidths = (_e = distributedLayout == null ? void 0 : distributedLayout.widths) != null ? _e : {};
+        setColumnSizing(
+          (prev) => Object.fromEntries(
+            Object.entries(prev).map(([id, width]) => {
+              var _a4;
+              return [id, (_a4 = displayedWidths[id]) != null ? _a4 : width];
+            })
+          )
+        );
+        handler(event);
+      };
+      return /* @__PURE__ */ jsx(ColumnResizer, { id: header.column.id, handler: handleResizeStart });
     },
-    [table]
+    [table, distributedLayout, actionReservePx]
   );
-  const headerActions = headerActionsProp != null || settings ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    headerActionsProp,
-    settings ? /* @__PURE__ */ jsx(
-      TableHeaderSettings,
-      {
-        settings,
-        options: settingsOptions,
-        columns
-      }
-    ) : null
-  ] }) : void 0;
   return /* @__PURE__ */ jsx(
     Table,
     {
       ...tableProps,
-      viewMode: viewMode != null ? viewMode : settings == null ? void 0 : settings.viewMode,
+      viewMode: resolvedViewMode,
       striped: striped != null ? striped : settings == null ? void 0 : settings.striped,
-      headerActions,
+      headerActions: headerActionsProp,
+      settings,
+      settingsOptions,
+      settingsColumns: columns,
       tableRootRef: containerRef,
       onSortChange: handleSortChange,
       dataKey,

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

@@ -0,0 +1,146 @@
+'use strict';
+
+var table_utils = require('./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 = table_utils.ROW_ACTIONS_RESERVE_PX,
+    availableWidth
+  } = args;
+  const selectionWidth = hasSelection ? table_utils.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 ? table_utils.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
+    };
+  });
+}
+
+exports.DEFAULT_MIN_COLUMN_PX = DEFAULT_MIN_COLUMN_PX;
+exports.buildColumnTracks = buildColumnTracks;
+exports.distributeColumnWidths = distributeColumnWidths;
+exports.usesDistributedWidths = usesDistributedWidths;

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

@@ -0,0 +1,44 @@
+import type { ColumnItem } from './Table.types';
+/** Minimum width of a flexible column that doesn't set `minWidth`. */
+export declare const DEFAULT_MIN_COLUMN_PX: 80;
+/**
+ * Sizing constraints for one column, as input to `distributeColumnWidths`.
+ * A track grows from `min` towards `max` by its share of `weight`; a track
+ * with `fixedWidth` (e.g. resized by the user) keeps exactly that width.
+ */
+export type ColumnTrack = {
+    id: string;
+    min: number;
+    max?: number;
+    weight: number;
+    fixedWidth?: number;
+};
+export type DistributedColumnWidths = {
+    selectionWidth?: number;
+    widths: Record<string, number>;
+    totalWidth: number;
+    availableWidth: number;
+    shouldOverflow: boolean;
+};
+/**
+ * Spreads `availableWidth` over the tracks: every track starts at its `min`,
+ * then the remaining space is shared by `weight` until each track hits its
+ * `max`. Fixed tracks keep their width. If the minimums don't fit, the result
+ * is wider than `availableWidth` and the table scrolls horizontally.
+ */
+export declare function distributeColumnWidths(args: {
+    tracks: ReadonlyArray<ColumnTrack>;
+    hasSelection: boolean;
+    hasContextMenu?: boolean;
+    contextMenuReservePx?: number;
+    availableWidth: number;
+}): DistributedColumnWidths;
+/** True when any column opts into distributed sizing via `minWidth`, `maxWidth` or `weight`. */
+export declare function usesDistributedWidths<T>(columns: ReadonlyArray<ColumnItem<T>>): boolean;
+/**
+ * Maps Table columns to tracks. A numeric `width` pins the column
+ * (min = max = width); other columns flex between `minWidth` (default
+ * `DEFAULT_MIN_COLUMN_PX`) and `maxWidth`, sharing leftover space by
+ * `weight` (default 1).
+ */
+export declare function buildColumnTracks<T>(columns: ReadonlyArray<ColumnItem<T>>): ColumnTrack[];