@dbcdk/react-components 0.0.197 → 0.0.199

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/useClientPagination.cjs

@@ -0,0 +1,66 @@
+'use client';
+'use strict';
+
+var reactTable = require('@tanstack/react-table');
+var react = require('react');
+
+const DEFAULT_CLIENT_PAGE_SIZE = 20;
+function useClientPagination({
+  enabled,
+  rowCount,
+  take,
+  skip,
+  totalItemsCount,
+  onPageChange
+}) {
+  const [uiSkip, setUiSkip] = react.useState(skip != null ? skip : 0);
+  const [prevSkip, setPrevSkip] = react.useState(skip);
+  const [uiTake, setUiTake] = react.useState(take != null ? take : DEFAULT_CLIENT_PAGE_SIZE);
+  const [prevTake, setPrevTake] = react.useState(take);
+  if (skip !== prevSkip) {
+    setPrevSkip(skip);
+    if (skip != null) setUiSkip(skip);
+  }
+  if (take !== prevTake) {
+    setPrevTake(take);
+    setUiTake(take != null ? take : DEFAULT_CLIENT_PAGE_SIZE);
+  }
+  const pageSize = Math.max(1, uiTake);
+  const lastPageIndex = Math.max(0, Math.ceil(rowCount / pageSize) - 1);
+  const pageIndex = Math.min(Math.floor(uiSkip / pageSize), lastPageIndex);
+  const handlePageChange = react.useCallback(
+    (e) => {
+      if (enabled) {
+        setUiSkip(e.skip);
+        setUiTake(e.take);
+      }
+      onPageChange == null ? void 0 : onPageChange(e);
+    },
+    [enabled, onPageChange]
+  );
+  const resetPage = react.useCallback(() => {
+    if (!enabled || uiSkip === 0) return;
+    setUiSkip(0);
+    onPageChange == null ? void 0 : onPageChange({
+      page: 1,
+      take: pageSize,
+      skip: 0,
+      totalPages: Math.max(1, Math.ceil(rowCount / pageSize))
+    });
+  }, [enabled, uiSkip, pageSize, rowCount, onPageChange]);
+  const paginationState = enabled ? { pageIndex, pageSize } : void 0;
+  const tableOptions = enabled ? {
+    getPaginationRowModel: reactTable.getPaginationRowModel(),
+    // Page changes go through handlePageChange; a new `data` reference must not reset the page.
+    autoResetPageIndex: false
+  } : {};
+  const tableProps = {
+    take: enabled ? pageSize : take,
+    skip: enabled ? pageIndex * pageSize : skip,
+    totalItemsCount: enabled ? rowCount : totalItemsCount,
+    onPageChange: enabled || onPageChange ? handlePageChange : void 0
+  };
+  return { paginationState, tableOptions, tableProps, resetPage };
+}
+
+exports.useClientPagination = useClientPagination;

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

@@ -0,0 +1,32 @@
+import { type PaginationState } from '@tanstack/react-table';
+import type { PageChangeEvent } from '../../pagination/Pagination';
+type Args = {
+    enabled: boolean;
+    rowCount: number;
+    take?: number;
+    skip?: number;
+    totalItemsCount?: number;
+    onPageChange?: (e: PageChangeEvent) => void;
+};
+/**
+ * Page state for TanstackTable. When disabled, the pagination props pass
+ * through untouched, for data that is already one page from a server.
+ */
+export declare function useClientPagination({ enabled, rowCount, take, skip, totalItemsCount, onPageChange, }: Args): {
+    paginationState: PaginationState | undefined;
+    tableOptions: {
+        getPaginationRowModel: (table: import("@tanstack/table-core").Table<unknown>) => () => import("@tanstack/table-core").RowModel<unknown>;
+        autoResetPageIndex: boolean;
+    } | {
+        getPaginationRowModel?: undefined;
+        autoResetPageIndex?: undefined;
+    };
+    tableProps: {
+        take: number | undefined;
+        skip: number | undefined;
+        totalItemsCount: number | undefined;
+        onPageChange: ((e: PageChangeEvent) => void) | undefined;
+    };
+    resetPage: () => void;
+};
+export {};

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

@@ -0,0 +1,64 @@
+'use client';
+import { getPaginationRowModel } from '@tanstack/react-table';
+import { useState, useCallback } from 'react';
+
+const DEFAULT_CLIENT_PAGE_SIZE = 20;
+function useClientPagination({
+  enabled,
+  rowCount,
+  take,
+  skip,
+  totalItemsCount,
+  onPageChange
+}) {
+  const [uiSkip, setUiSkip] = useState(skip != null ? skip : 0);
+  const [prevSkip, setPrevSkip] = useState(skip);
+  const [uiTake, setUiTake] = useState(take != null ? take : DEFAULT_CLIENT_PAGE_SIZE);
+  const [prevTake, setPrevTake] = useState(take);
+  if (skip !== prevSkip) {
+    setPrevSkip(skip);
+    if (skip != null) setUiSkip(skip);
+  }
+  if (take !== prevTake) {
+    setPrevTake(take);
+    setUiTake(take != null ? take : DEFAULT_CLIENT_PAGE_SIZE);
+  }
+  const pageSize = Math.max(1, uiTake);
+  const lastPageIndex = Math.max(0, Math.ceil(rowCount / pageSize) - 1);
+  const pageIndex = Math.min(Math.floor(uiSkip / pageSize), lastPageIndex);
+  const handlePageChange = useCallback(
+    (e) => {
+      if (enabled) {
+        setUiSkip(e.skip);
+        setUiTake(e.take);
+      }
+      onPageChange == null ? void 0 : onPageChange(e);
+    },
+    [enabled, onPageChange]
+  );
+  const resetPage = useCallback(() => {
+    if (!enabled || uiSkip === 0) return;
+    setUiSkip(0);
+    onPageChange == null ? void 0 : onPageChange({
+      page: 1,
+      take: pageSize,
+      skip: 0,
+      totalPages: Math.max(1, Math.ceil(rowCount / pageSize))
+    });
+  }, [enabled, uiSkip, pageSize, rowCount, onPageChange]);
+  const paginationState = enabled ? { pageIndex, pageSize } : void 0;
+  const tableOptions = enabled ? {
+    getPaginationRowModel: getPaginationRowModel(),
+    // Page changes go through handlePageChange; a new `data` reference must not reset the page.
+    autoResetPageIndex: false
+  } : {};
+  const tableProps = {
+    take: enabled ? pageSize : take,
+    skip: enabled ? pageIndex * pageSize : skip,
+    totalItemsCount: enabled ? rowCount : totalItemsCount,
+    onPageChange: enabled || onPageChange ? handlePageChange : void 0
+  };
+  return { paginationState, tableOptions, tableProps, resetPage };
+}
+
+export { useClientPagination };

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

@@ -0,0 +1,44 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var tanstackTable_utils = require('../tanstackTable.utils');
+
+function useDistributedLayout({
+  table,
+  columns,
+  columnVisibility,
+  columnSizing,
+  availableWidth,
+  hasSelection,
+  actionReservePx
+}) {
+  const distributedLayout = react.useMemo(() => {
+    if (availableWidth == null) return null;
+    return tanstackTable_utils.buildDistributedColumnWidths({
+      table,
+      hasSelection,
+      hasContextMenu: actionReservePx > 0,
+      contextMenuReservePx: actionReservePx,
+      defaultMinPx: 80,
+      columnSizing,
+      availableWidth
+    });
+  }, [table, hasSelection, actionReservePx, columnSizing, availableWidth]);
+  const resolvedLayout = react.useMemo(() => {
+    const next = {};
+    table.getVisibleLeafColumns().forEach((column) => {
+      next[column.id] = {
+        width: distributedLayout == null ? void 0 : distributedLayout.widths[column.id]
+      };
+    });
+    return next;
+  }, [table, distributedLayout]);
+  const columnItems = react.useMemo(
+    () => tanstackTable_utils.mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
+    [columns, columnVisibility, resolvedLayout]
+  );
+  return { distributedLayout, columnItems };
+}
+
+exports.useDistributedLayout = useDistributedLayout;

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

@@ -0,0 +1,16 @@
+import type { ColumnDef, ColumnSizingState, Table, VisibilityState } from '@tanstack/react-table';
+type Args<T> = {
+    table: Table<T>;
+    columns: ReadonlyArray<ColumnDef<T, any>>;
+    columnVisibility: VisibilityState;
+    columnSizing: ColumnSizingState;
+    availableWidth: number | undefined;
+    hasSelection: boolean;
+    actionReservePx: number;
+};
+/** Column widths that fill the measured container, mapped to Table column items. */
+export declare function useDistributedLayout<T extends Record<string, any>>({ table, columns, columnVisibility, columnSizing, availableWidth, hasSelection, actionReservePx, }: Args<T>): {
+    distributedLayout: import("../columnLayout.utils").DistributedColumnWidths | null;
+    columnItems: import("../Table.types").ColumnItem<T>[];
+};
+export {};

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

@@ -0,0 +1,42 @@
+'use client';
+import { useMemo } from 'react';
+import { buildDistributedColumnWidths, mapDefsToColumnItems } from '../tanstackTable.utils';
+
+function useDistributedLayout({
+  table,
+  columns,
+  columnVisibility,
+  columnSizing,
+  availableWidth,
+  hasSelection,
+  actionReservePx
+}) {
+  const distributedLayout = useMemo(() => {
+    if (availableWidth == null) return null;
+    return buildDistributedColumnWidths({
+      table,
+      hasSelection,
+      hasContextMenu: actionReservePx > 0,
+      contextMenuReservePx: actionReservePx,
+      defaultMinPx: 80,
+      columnSizing,
+      availableWidth
+    });
+  }, [table, hasSelection, actionReservePx, columnSizing, availableWidth]);
+  const resolvedLayout = useMemo(() => {
+    const next = {};
+    table.getVisibleLeafColumns().forEach((column) => {
+      next[column.id] = {
+        width: distributedLayout == null ? void 0 : distributedLayout.widths[column.id]
+      };
+    });
+    return next;
+  }, [table, distributedLayout]);
+  const columnItems = useMemo(
+    () => mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
+    [columns, columnVisibility, resolvedLayout]
+  );
+  return { distributedLayout, columnItems };
+}
+
+export { useDistributedLayout };

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/hooks/useResizeHeaderExtras.cjs

@@ -0,0 +1,87 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ColumnResizer = require('../components/column-resizer/ColumnResizer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ColumnResizer__default = /*#__PURE__*/_interopDefault(ColumnResizer);
+
+function useResizeHeaderExtras({
+  table,
+  widths,
+  actionReservePx,
+  neighborResizeRef,
+  setColumnSizing
+}) {
+  return React__namespace.useCallback(
+    ({ index }) => {
+      var _a, _b, _c, _d;
+      const headerGroups = table.getHeaderGroups();
+      const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
+      const header = leafHeaders[index];
+      const neighbor = leafHeaders[index + 1];
+      if (!header || !neighbor) return null;
+      const canResize = (_c = (_b = (_a = header.column).getCanResize) == null ? void 0 : _b.call(_a)) != null ? _c : false;
+      const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
+      if (!canResize || !handler) return null;
+      const handleResizeStart = (event) => {
+        var _a2, _b2, _c2, _d2;
+        const startWidth = widths == null ? void 0 : widths[header.column.id];
+        const neighborStartWidth = widths == null ? void 0 : 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: (_a2 = columnDef.minSize) != null ? _a2 : 0,
+          max: (_b2 = columnDef.maxSize) != null ? _b2 : Infinity,
+          neighborMin: ((_c2 = neighborDef.minSize) != null ? _c2 : 0) + neighborReserve,
+          neighborMax: ((_d2 = neighborDef.maxSize) != null ? _d2 : Infinity) + neighborReserve
+        };
+        const displayedWidths = widths != null ? widths : {};
+        setColumnSizing(
+          (prev) => Object.fromEntries(
+            Object.entries(prev).map(([id, width]) => {
+              var _a3;
+              return [id, (_a3 = displayedWidths[id]) != null ? _a3 : width];
+            })
+          )
+        );
+        handler(event);
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer__default.default, { id: header.column.id, handler: handleResizeStart });
+    },
+    [table, widths, actionReservePx, neighborResizeRef, setColumnSizing]
+  );
+}
+
+exports.useResizeHeaderExtras = useResizeHeaderExtras;

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

@@ -0,0 +1,17 @@
+import type { ColumnSizingState, Table } from '@tanstack/react-table';
+import * as React from 'react';
+import type { DistributedColumnWidths } from '../columnLayout.utils';
+import type { NeighborResize } from '../tanstackTable.utils';
+type Args<T> = {
+    table: Table<T>;
+    widths: DistributedColumnWidths['widths'] | undefined;
+    actionReservePx: number;
+    neighborResizeRef: React.MutableRefObject<NeighborResize | null>;
+    setColumnSizing: React.Dispatch<React.SetStateAction<ColumnSizingState>>;
+};
+/** Renders a resize handle between each column and its right neighbour. */
+export declare function useResizeHeaderExtras<T>({ table, widths, actionReservePx, neighborResizeRef, setColumnSizing, }: Args<T>): ({ index }: {
+    column: any;
+    index: number;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export {};