react-glide-table 2.2.1 → 2.3.0

package/dist/core.cjs

@@ -80,6 +80,7 @@ __export(core_exports, {
   previousSearchIndex: () => previousSearchIndex,
   resolveCellRenderer: () => resolveCellRenderer,
   resolveColumnFreezeSide: () => resolveColumnFreezeSide,
+  resolveColumnLayoutWidths: () => resolveColumnLayoutWidths,
   resolveDataTableLabels: () => resolveDataTableLabels,
   resolveDropEdge: () => resolveDropEdge,
   resolveHeaderFreezeOffset: () => resolveHeaderFreezeOffset,
@@ -133,7 +134,7 @@ var DEFAULT_TREE_QTY_FIELD = "qty";
 // src/core/useGlideTable.ts
 var import_react_table = require("@tanstack/react-table");
 var import_react_virtual = require("@tanstack/react-virtual");
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/ui/table/constants.ts
 var DATA_TABLE_ROW_HEIGHT = 44;
@@ -526,7 +527,7 @@ function withCellUpdate(context, commitValue) {
 }
 
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/components/ui/table/features/cell-selection/cellSelection.ts
 var INITIAL_DRAG_STATE = {
@@ -834,6 +835,219 @@ function hasCellSelectionEdges(style) {
 }
 
 // src/components/ui/table/features/cell-selection/copyData.ts
+var import_react2 = require("react");
+function isReactNodeIterable(node) {
+  return typeof node === "object" && node !== null && !(0, import_react2.isValidElement)(node) && Symbol.iterator in node;
+}
+function getElementTypeName(type) {
+  if (typeof type === "string") return type;
+  if (typeof type === "function") {
+    const fn = type;
+    return fn.displayName || fn.name || "";
+  }
+  if (typeof type === "object" && type !== null) {
+    const component = type;
+    return component.displayName || component.render?.displayName || component.render?.name || "";
+  }
+  return "";
+}
+function isButtonReactElement(node) {
+  const typeName = getElementTypeName(node.type);
+  if (typeName === "button" || /button/i.test(typeName)) return true;
+  const props = node.props;
+  if (props.role === "button") return true;
+  if (typeName === "input" && props.type === "button") return true;
+  return false;
+}
+function isImageReactElement(node) {
+  const typeName = getElementTypeName(node.type);
+  return typeName === "img" || typeName === "image" || /image/i.test(typeName);
+}
+var IMAGE_URL_PROP_KEYS = ["src", "url", "href", "imageUrl", "srcUrl"];
+function isLikelyUrl(value) {
+  const trimmed = value.trim();
+  if (!trimmed) return false;
+  if (/^(https?:|blob:|data:|\/\/)/i.test(trimmed)) return true;
+  if (trimmed.startsWith("/") && trimmed.includes("/")) return true;
+  return false;
+}
+function pickUrlFromUnknown(value) {
+  if (typeof value === "string") {
+    return isLikelyUrl(value) ? value.trim() : "";
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => pickUrlFromUnknown(item)).filter((item) => item.length > 0).join(", ");
+  }
+  if (value && typeof value === "object") {
+    const record = value;
+    for (const key of IMAGE_URL_PROP_KEYS) {
+      const candidate = record[key];
+      if (typeof candidate === "string" && candidate.trim()) {
+        return candidate.trim();
+      }
+    }
+  }
+  return "";
+}
+function imageElementText(node) {
+  const props = node.props;
+  for (const key of IMAGE_URL_PROP_KEYS) {
+    const candidate = props[key];
+    if (typeof candidate === "string" && candidate.trim()) {
+      return candidate.trim();
+    }
+  }
+  return "";
+}
+function reactNodeContainsImage(node) {
+  if ((0, import_react2.isValidElement)(node)) {
+    if (isImageReactElement(node)) return true;
+    return reactNodeContainsImage(node.props.children);
+  }
+  if (isReactNodeIterable(node)) {
+    for (const child of node) {
+      if (reactNodeContainsImage(child)) return true;
+    }
+  }
+  return false;
+}
+function readImgUrl(img) {
+  const attr = img.getAttribute("src")?.trim() ?? "";
+  if (attr) return attr;
+  if (img instanceof HTMLImageElement) {
+    const current = img.currentSrc?.trim() ?? "";
+    if (current && current !== img.baseURI) return current;
+  }
+  return "";
+}
+function readDomImageUrls(rowIndex, colIndex, root) {
+  const scope = root ?? (typeof document === "undefined" ? null : document);
+  if (!scope) return "";
+  const cells = scope.querySelectorAll(
+    `[data-row-index="${rowIndex}"][data-col-index="${colIndex}"]`
+  );
+  for (const cell of cells) {
+    const urls = Array.from(cell.querySelectorAll("img")).flatMap((img) => {
+      const url = readImgUrl(img);
+      return url ? [url] : [];
+    });
+    if (urls.length > 0) return urls.join(", ");
+  }
+  return "";
+}
+function reactNodeToText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") {
+    return String(node);
+  }
+  if (isReactNodeIterable(node)) {
+    let text = "";
+    for (const child of node) {
+      text += reactNodeToText(child);
+    }
+    return text;
+  }
+  if ((0, import_react2.isValidElement)(node)) {
+    if (isButtonReactElement(node)) return "";
+    const props = node.props;
+    const childText = reactNodeToText(props.children);
+    if (childText) return childText;
+    const fromImage = imageElementText(node);
+    if (fromImage) return fromImage;
+    if (isImageReactElement(node)) return "";
+    if (typeof props.alt === "string" && props.alt) return props.alt;
+    if (typeof props.title === "string" && props.title) return props.title;
+    return "";
+  }
+  return "";
+}
+function sanitizeClipboardCell(text) {
+  return text.replace(/\s+/g, " ").trim();
+}
+function createCopyRenderRow(rowData, index) {
+  return {
+    id: getOriginalRowId(rowData) || String(index),
+    index,
+    original: rowData,
+    getIsCellDragSelected: () => false
+  };
+}
+function buildVisibleRowLookup(visibleRows) {
+  const lookup = /* @__PURE__ */ new Map();
+  for (const row of visibleRows) {
+    lookup.set(row.original, row);
+  }
+  return lookup;
+}
+function resolveCopyColumnId(cell) {
+  if (cell.column.id) return cell.column.id;
+  const columnDef = cell.column.columnDef;
+  if (columnDef.id) return columnDef.id;
+  if (columnDef.accessorKey != null && columnDef.accessorKey !== "") {
+    return String(columnDef.accessorKey);
+  }
+  return "";
+}
+function isPrimitiveCopyValue(value) {
+  return value == null || typeof value !== "object";
+}
+function extractRenderedCopyText(node, value, cellPosition, root) {
+  const rendered = sanitizeClipboardCell(reactNodeToText(node));
+  if (reactNodeContainsImage(node)) {
+    const fromDom = cellPosition != null ? sanitizeClipboardCell(
+      readDomImageUrls(cellPosition.rowIndex, cellPosition.colIndex, root)
+    ) : "";
+    if (fromDom) return fromDom;
+    if (rendered && isLikelyUrl(rendered)) return rendered;
+    return sanitizeClipboardCell(pickUrlFromUnknown(value));
+  }
+  return rendered;
+}
+function formatCopyCellText(rowData, columnDef, columnId, visibleRow, fallbackIndex, sourceCell, cellPosition, options) {
+  const meta = columnDef.meta;
+  const value = sourceCell ? sourceCell.getValue() : readRowColumnValue(rowData, columnDef);
+  const cellRender = meta?.cellRender;
+  if (typeof cellRender === "function") {
+    try {
+      const row = visibleRow ?? createCopyRenderRow(rowData, fallbackIndex);
+      const node = cellRender({
+        value,
+        row,
+        index: row.index,
+        columnId,
+        cellProps: meta?.cellProps,
+        update: () => {
+        }
+      });
+      return extractRenderedCopyText(node, value, cellPosition, options?.root);
+    } catch {
+      return formatCellValue(value);
+    }
+  }
+  if (options?.registry && meta?.kind && isPrimitiveCopyValue(value)) {
+    try {
+      const row = visibleRow ?? createCopyRenderRow(rowData, fallbackIndex);
+      const ctx = {
+        value,
+        row,
+        index: row.index,
+        columnId,
+        cellProps: meta.cellProps,
+        update: () => {
+        }
+      };
+      const renderer = resolveCellRenderer(options.registry, meta.kind, ctx);
+      if (renderer) {
+        const node = renderer.render(ctx);
+        const rendered = extractRenderedCopyText(node, value, cellPosition, options.root);
+        if (rendered) return rendered;
+      }
+    } catch {
+      return formatCellValue(value);
+    }
+  }
+  return formatCellValue(value);
+}
 function formatPrimitive(value) {
   if (value === null || value === void 0) return "";
   if (typeof value === "string") return value;
@@ -939,37 +1153,47 @@ function collectCopyRowEntries(visibleRows, bounds, mode = "visible") {
 function collectCopyRows(visibleRows, bounds, mode = "visible") {
   return collectCopyRowEntries(visibleRows, bounds, mode).map((entry) => entry.row);
 }
-function serializeCopyRowsToTSV(copyRows, visibleRows, bounds, depths) {
+function serializeCopyRowsToTSV(copyRows, visibleRows, bounds, depths, options) {
   if (copyRows.length === 0) return "";
   const { startCol, endCol } = bounds;
   const columnCells = visibleRows[0]?.getVisibleCells().slice(startCol, endCol + 1) ?? [];
   if (columnCells.length === 0) return "";
   const resolvedDepths = depths && depths.length === copyRows.length ? depths : copyRows.map((row) => getRowDepth(row));
   const minDepth = Math.min(...resolvedDepths);
+  const visibleRowByOriginal = buildVisibleRowLookup(visibleRows);
   return copyRows.map((rowData, index) => {
     const relativeDepth = Math.max(0, (resolvedDepths[index] ?? 0) - minDepth);
-    const line = columnCells.map(
-      (cell) => formatCellValue(
-        readRowColumnValue(
-          rowData,
-          cell.column.columnDef
-        )
-      )
-    ).join("	");
+    const visibleRow = visibleRowByOriginal.get(rowData);
+    const matchingCells = visibleRow?.getVisibleCells().slice(startCol, endCol + 1);
+    const line = columnCells.map((templateCell, colOffset) => {
+      const sourceCell = matchingCells?.[colOffset];
+      const column = sourceCell?.column ?? templateCell.column;
+      return formatCopyCellText(
+        rowData,
+        column.columnDef,
+        resolveCopyColumnId(sourceCell ?? templateCell),
+        visibleRow,
+        visibleRow?.index ?? index,
+        sourceCell,
+        visibleRow != null ? { rowIndex: visibleRow.index, colIndex: startCol + colOffset } : void 0,
+        options
+      );
+    }).join("	");
     return `${"	".repeat(relativeDepth)}${line}`;
   }).join("\n");
 }
-function serializeSelectionToTSV(visibleRows, bounds, mode = "visible") {
+function serializeSelectionToTSV(visibleRows, bounds, mode = "visible", options) {
   const entries = collectCopyRowEntries(visibleRows, bounds, mode);
   return serializeCopyRowsToTSV(
     entries.map((entry) => entry.row),
     visibleRows,
     bounds,
-    entries.map((entry) => entry.depth)
+    entries.map((entry) => entry.depth),
+    options
   );
 }
-async function writeSelectionToClipboard(visibleRows, bounds, mode = "visible") {
-  const text = serializeSelectionToTSV(visibleRows, bounds, mode);
+async function writeSelectionToClipboard(visibleRows, bounds, mode = "visible", options) {
+  const text = serializeSelectionToTSV(visibleRows, bounds, mode, options);
   if (!text) return false;
   try {
     await navigator.clipboard.writeText(text);
@@ -1130,17 +1354,19 @@ function useCellSelection({
   onDataChange,
   onBatchChange,
   onRowsPaste,
-  onCellNavigate
+  onCellNavigate,
+  cellRendererRegistry,
+  rootRef
 }) {
-  const [dragState, setDragState] = (0, import_react2.useState)(INITIAL_DRAG_STATE);
-  const pendingPasteModeRef = (0, import_react2.useRef)(null);
-  const dragStateRef = (0, import_react2.useRef)(dragState);
-  const onCellNavigateRef = (0, import_react2.useRef)(onCellNavigate);
+  const [dragState, setDragState] = (0, import_react3.useState)(INITIAL_DRAG_STATE);
+  const pendingPasteModeRef = (0, import_react3.useRef)(null);
+  const dragStateRef = (0, import_react3.useRef)(dragState);
+  const onCellNavigateRef = (0, import_react3.useRef)(onCellNavigate);
   dragStateRef.current = dragState;
   onCellNavigateRef.current = onCellNavigate;
   const cellSelectionBounds = getCellSelectionBounds(dragState.start, dragState.end);
   const activeSelectionBounds = enabled ? getActiveSelectionBounds(dragState, cellSelectionBounds) : null;
-  const handleCellMouseDown = (0, import_react2.useCallback)(
+  const handleCellMouseDown = (0, import_react3.useCallback)(
     (rowIndex, colIndex, options) => {
       if (!enabled) return;
       setDragState((prev) => {
@@ -1166,7 +1392,7 @@ function useCellSelection({
     },
     [enabled]
   );
-  const handleCellMouseEnter = (0, import_react2.useCallback)(
+  const handleCellMouseEnter = (0, import_react3.useCallback)(
     (rowIndex, colIndex) => {
       if (!enabled) return;
       setDragState((prev) => {
@@ -1181,7 +1407,7 @@ function useCellSelection({
     },
     [enabled]
   );
-  const handleFillHandleMouseDown = (0, import_react2.useCallback)(
+  const handleFillHandleMouseDown = (0, import_react3.useCallback)(
     (rowIndex, colIndex) => {
       if (!enabled) return;
       setDragState((prev) => {
@@ -1198,12 +1424,12 @@ function useCellSelection({
     },
     [enabled]
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!enabled) {
       setDragState(INITIAL_DRAG_STATE);
     }
   }, [enabled]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
       if (e.ctrlKey || e.metaKey || e.altKey) return;
@@ -1250,19 +1476,32 @@ function useCellSelection({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [columnCount, enabled, rows]);
-  const copySelection = (0, import_react2.useCallback)(
+  const copySelection = (0, import_react3.useCallback)(
     async (options) => {
       if (!enabled || !activeSelectionBounds) return false;
       const mode = options?.includeDescendants && enableSubtreeCopy ? "subtree" : "visible";
-      return writeSelectionToClipboard(rows, activeSelectionBounds, mode);
+      return writeSelectionToClipboard(rows, activeSelectionBounds, mode, {
+        registry: cellRendererRegistry,
+        root: rootRef?.current
+      });
     },
-    [activeSelectionBounds, enableSubtreeCopy, enabled, rows]
+    [
+      activeSelectionBounds,
+      cellRendererRegistry,
+      enableSubtreeCopy,
+      enabled,
+      rootRef,
+      rows
+    ]
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
       if (!activeSelectionBounds) return;
       if (!(e.ctrlKey || e.metaKey)) return;
+      if (isEditablePasteTarget(e.target) || isEditablePasteTarget(document.activeElement)) {
+        return;
+      }
       const isSubtreeShortcut = enableSubtreeCopy && e.shiftKey && e.key.toLowerCase() === "c";
       const isVisibleCopyShortcut = !e.shiftKey && e.key.toLowerCase() === "c";
       if (!isSubtreeShortcut && !isVisibleCopyShortcut) return;
@@ -1272,7 +1511,7 @@ function useCellSelection({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [activeSelectionBounds, copySelection, enableSubtreeCopy, enabled]);
-  const emitRowsPaste = (0, import_react2.useCallback)(
+  const emitRowsPaste = (0, import_react3.useCallback)(
     (text, mode) => {
       if (!onRowsPaste || !activeSelectionBounds) return false;
       const payload = buildRowsPastePayload(
@@ -1289,7 +1528,7 @@ function useCellSelection({
     },
     [activeSelectionBounds, onRowsPaste, rows]
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!enabled || !onRowsPaste) return;
     const pasteHandledRef = { current: false };
     const ignoreNextPasteRef = { current: false };
@@ -1357,7 +1596,7 @@ function useCellSelection({
     enabled,
     onRowsPaste
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!enabled) return;
     const handleMouseUp = () => {
       setDragState((prev) => {
@@ -1800,7 +2039,7 @@ function collectAncestorKeysToExpand(corpusRow, expandedRows) {
 }
 
 // src/components/ui/table/features/inline-search/useInlineSearch.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 var EMPTY_MATCH_KEYS = /* @__PURE__ */ new Set();
 function useInlineSearch({
   enabled = false,
@@ -1817,46 +2056,46 @@ function useInlineSearch({
   onNavigateToResult,
   rootRef
 }) {
-  const searchInputId = (0, import_react3.useId)();
-  const searchInputRef = (0, import_react3.useRef)(null);
-  const [internalShowSearch, setInternalShowSearch] = (0, import_react3.useState)(false);
-  const [internalSearchValue, setInternalSearchValue] = (0, import_react3.useState)("");
-  const [internalResults, setInternalResults] = (0, import_react3.useState)(
+  const searchInputId = (0, import_react4.useId)();
+  const searchInputRef = (0, import_react4.useRef)(null);
+  const [internalShowSearch, setInternalShowSearch] = (0, import_react4.useState)(false);
+  const [internalSearchValue, setInternalSearchValue] = (0, import_react4.useState)("");
+  const [internalResults, setInternalResults] = (0, import_react4.useState)(
     []
   );
-  const [searchStatus, setSearchStatus] = (0, import_react3.useState)();
-  const searchStatusRef = (0, import_react3.useRef)(searchStatus);
+  const [searchStatus, setSearchStatus] = (0, import_react4.useState)();
+  const searchStatusRef = (0, import_react4.useRef)(searchStatus);
   searchStatusRef.current = searchStatus;
-  const abortControllerRef = (0, import_react3.useRef)(null);
-  const searchHandleRef = (0, import_react3.useRef)(void 0);
-  const initialStartRowRef = (0, import_react3.useRef)(initialStartRow);
+  const abortControllerRef = (0, import_react4.useRef)(null);
+  const searchHandleRef = (0, import_react4.useRef)(void 0);
+  const initialStartRowRef = (0, import_react4.useRef)(initialStartRow);
   initialStartRowRef.current = initialStartRow;
-  const getCellValueRef = (0, import_react3.useRef)(getCellValue);
+  const getCellValueRef = (0, import_react4.useRef)(getCellValue);
   getCellValueRef.current = getCellValue;
   const showSearch = controlledShowSearch ?? internalShowSearch;
   const searchValue = controlledSearchValue ?? internalSearchValue;
   const searchResults = controlledSearchResults ?? internalResults;
-  const setSearchValue = (0, import_react3.useCallback)(
+  const setSearchValue = (0, import_react4.useCallback)(
     (value) => {
       setInternalSearchValue(value);
       onSearchValueChange?.(value);
     },
     [onSearchValueChange]
   );
-  const cancelSearch = (0, import_react3.useCallback)(() => {
+  const cancelSearch = (0, import_react4.useCallback)(() => {
     if (searchHandleRef.current !== void 0) {
       window.cancelAnimationFrame(searchHandleRef.current);
       searchHandleRef.current = void 0;
     }
     abortControllerRef.current?.abort();
   }, []);
-  const emitResultsChanged = (0, import_react3.useCallback)(
+  const emitResultsChanged = (0, import_react4.useCallback)(
     (results, navIndex) => {
       onSearchResultsChanged?.(results, navIndex);
     },
     [onSearchResultsChanged]
   );
-  const navigateToIndex = (0, import_react3.useCallback)(
+  const navigateToIndex = (0, import_react4.useCallback)(
     (results, navIndex) => {
       if (onSearchResultsChanged) return;
       if (navIndex < 0 || navIndex >= results.length) return;
@@ -1866,7 +2105,7 @@ function useInlineSearch({
     },
     [onNavigateToResult, onSearchResultsChanged]
   );
-  const beginSearch = (0, import_react3.useCallback)(
+  const beginSearch = (0, import_react4.useCallback)(
     (query) => {
       if (controlledSearchResults !== void 0) return;
       const totalRows = rowCount;
@@ -1938,12 +2177,12 @@ function useInlineSearch({
       rowCount
     ]
   );
-  const openSearch = (0, import_react3.useCallback)(() => {
+  const openSearch = (0, import_react4.useCallback)(() => {
     if (controlledShowSearch === void 0) {
       setInternalShowSearch(true);
     }
   }, [controlledShowSearch]);
-  const closeSearch = (0, import_react3.useCallback)(() => {
+  const closeSearch = (0, import_react4.useCallback)(() => {
     if (controlledShowSearch === void 0) {
       setInternalShowSearch(false);
     }
@@ -1958,7 +2197,7 @@ function useInlineSearch({
     emitResultsChanged,
     onSearchClose
   ]);
-  const goToNext = (0, import_react3.useCallback)(() => {
+  const goToNext = (0, import_react4.useCallback)(() => {
     if (!searchStatus || searchStatus.results === 0) return;
     const newIndex = nextSearchIndex(
       searchStatus.selectedIndex,
@@ -1968,7 +2207,7 @@ function useInlineSearch({
     emitResultsChanged(searchResults, newIndex);
     navigateToIndex(searchResults, newIndex);
   }, [emitResultsChanged, navigateToIndex, searchResults, searchStatus]);
-  const goToPrevious = (0, import_react3.useCallback)(() => {
+  const goToPrevious = (0, import_react4.useCallback)(() => {
     if (!searchStatus || searchStatus.results === 0) return;
     const newIndex = previousSearchIndex(
       searchStatus.selectedIndex,
@@ -1978,7 +2217,7 @@ function useInlineSearch({
     emitResultsChanged(searchResults, newIndex);
     navigateToIndex(searchResults, newIndex);
   }, [emitResultsChanged, navigateToIndex, searchResults, searchStatus]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (controlledSearchResults === void 0) return;
     if (controlledSearchResults.length > 0) {
       setSearchStatus((current) => ({
@@ -1990,7 +2229,7 @@ function useInlineSearch({
       setSearchStatus(void 0);
     }
   }, [controlledSearchResults, rowCount]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!enabled) return;
     setSearchStatus(void 0);
     setInternalResults([]);
@@ -2003,7 +2242,7 @@ function useInlineSearch({
       cancelSearch();
     }
   }, [enabled, showSearch]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!enabled || !showSearch) return;
     if (controlledSearchResults !== void 0) return;
     if (searchValue.trim() === "") {
@@ -2023,7 +2262,7 @@ function useInlineSearch({
     searchValue,
     showSearch
   ]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       if (!(event.ctrlKey || event.metaKey)) return;
@@ -2050,12 +2289,12 @@ function useInlineSearch({
     window.addEventListener("keydown", handleKeyDown, true);
     return () => window.removeEventListener("keydown", handleKeyDown, true);
   }, [controlledShowSearch, enabled, rootRef, showSearch]);
-  (0, import_react3.useEffect)(() => () => cancelSearch(), [cancelSearch]);
-  const searchMatchKeys = (0, import_react3.useMemo)(
+  (0, import_react4.useEffect)(() => () => cancelSearch(), [cancelSearch]);
+  const searchMatchKeys = (0, import_react4.useMemo)(
     () => buildSearchMatchKeys(searchResults),
     [searchResults]
   );
-  const activeMatch = (0, import_react3.useMemo)(() => {
+  const activeMatch = (0, import_react4.useMemo)(() => {
     if (!searchStatus || searchStatus.selectedIndex < 0) return null;
     return searchResults[searchStatus.selectedIndex] ?? null;
   }, [searchResults, searchStatus]);
@@ -2098,7 +2337,7 @@ function useInlineSearch({
 }
 
 // src/components/ui/table/features/row-expand/row-expand.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function getFieldValue(row, key) {
   return row[key];
 }
@@ -2128,12 +2367,12 @@ var useConvertTreeData = ({
   expandedRows,
   onExpandedRowsChange
 }) => {
-  const onExpandedRowsChangeRef = (0, import_react4.useRef)(onExpandedRowsChange);
-  const hasInitializedRef = (0, import_react4.useRef)(false);
-  (0, import_react4.useEffect)(() => {
+  const onExpandedRowsChangeRef = (0, import_react5.useRef)(onExpandedRowsChange);
+  const hasInitializedRef = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
     onExpandedRowsChangeRef.current = onExpandedRowsChange;
   }, [onExpandedRowsChange]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!data || data.length === 0) {
       hasInitializedRef.current = false;
       return;
@@ -2143,7 +2382,7 @@ var useConvertTreeData = ({
     onExpandedRowsChangeRef.current?.(new Set(ids));
     hasInitializedRef.current = true;
   }, [enabled, data, toggleField]);
-  const processedData = (0, import_react4.useMemo)(() => {
+  const processedData = (0, import_react5.useMemo)(() => {
     if (!enabled || !data || data.length === 0) return [];
     const flattenedData = [];
     const flattenItems = (items) => {
@@ -2207,7 +2446,7 @@ var useConvertTreeData = ({
     });
     return rootItems;
   }, [enabled, data, toggleField, childField, flattenField]);
-  const flattenTree = (0, import_react4.useMemo)(() => {
+  const flattenTree = (0, import_react5.useMemo)(() => {
     if (!enabled) return [];
     const flatten = (nodes, result = [], level = 0) => {
       nodes.forEach((node, index) => {
@@ -2257,7 +2496,7 @@ var useConvertTreeData = ({
     preventExpand,
     expandedRows
   ]);
-  const sortedData = (0, import_react4.useMemo)(() => {
+  const sortedData = (0, import_react5.useMemo)(() => {
     if (!enabled) {
       return data ?? [];
     }
@@ -2484,7 +2723,7 @@ function useGlideTable(options) {
     searchResults,
     onSearchResultsChanged
   } = options;
-  const labels = (0, import_react5.useMemo)(() => {
+  const labels = (0, import_react6.useMemo)(() => {
     const resolved = resolveDataTableLabels(labelsProp);
     return {
       ...resolved,
@@ -2495,17 +2734,21 @@ function useGlideTable(options) {
   }, [labelsProp, emptyText, loadingText, selectionLabel]);
   const enableExpand = Boolean(toggleField);
   const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
-  const [internalRowSelection, setInternalRowSelection] = (0, import_react5.useState)({});
-  const [internalColumnSizing, setInternalColumnSizing] = (0, import_react5.useState)({});
-  const [internalColumnOrder, setInternalColumnOrder] = (0, import_react5.useState)([]);
-  const [internalExpandedRows, setInternalExpandedRows] = (0, import_react5.useState)(
+  const [internalRowSelection, setInternalRowSelection] = (0, import_react6.useState)({});
+  const [internalColumnSizing, setInternalColumnSizing] = (0, import_react6.useState)({});
+  const [internalColumnOrder, setInternalColumnOrder] = (0, import_react6.useState)([]);
+  const [internalExpandedRows, setInternalExpandedRows] = (0, import_react6.useState)(
     () => /* @__PURE__ */ new Set()
   );
-  const [hoveredRowIndex, setHoveredRowIndex] = (0, import_react5.useState)(null);
-  const scrollRef = (0, import_react5.useRef)(null);
-  const rootRef = (0, import_react5.useRef)(null);
+  const [hoveredRowIndex, setHoveredRowIndex] = (0, import_react6.useState)(null);
+  const scrollRef = (0, import_react6.useRef)(null);
+  const rootRef = (0, import_react6.useRef)(null);
+  const cellRendererRegistry = (0, import_react6.useMemo)(
+    () => createCellRendererRegistry(cellRenderers),
+    [cellRenderers]
+  );
   const shouldVirtualize = enableVirtualization && !enableRowSpan;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (enableVirtualization && enableRowSpan) {
       console.warn(
         "[useGlideTable] enableRowSpan is on; virtualization is disabled to preserve cell merges."
@@ -2519,11 +2762,11 @@ function useGlideTable(options) {
   );
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   const columnOrder = controlledColumnOrder ?? internalColumnOrder;
-  const tableColumns = (0, import_react5.useMemo)(() => {
+  const tableColumns = (0, import_react6.useMemo)(() => {
     if (!enableColumnReorder) return columns;
     return applyLeafColumnOrder(columns, columnOrder);
   }, [columnOrder, columns, enableColumnReorder]);
-  const setColumnOrder = (0, import_react5.useCallback)(
+  const setColumnOrder = (0, import_react6.useCallback)(
     (next) => {
       if (onColumnOrderChange) {
         onColumnOrderChange(next);
@@ -2534,7 +2777,7 @@ function useGlideTable(options) {
     [onColumnOrderChange]
   );
   const expandedRows = controlledExpandedRows ?? internalExpandedRows;
-  const handleExpandedRowsChange = (0, import_react5.useCallback)(
+  const handleExpandedRowsChange = (0, import_react6.useCallback)(
     (next) => {
       if (onExpandedRowsChange) {
         onExpandedRowsChange(next);
@@ -2595,13 +2838,13 @@ function useGlideTable(options) {
     getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
     getRowId: getRowId ? (originalRow, index) => getRowId(originalRow, index) : (_originalRow, index) => String(index)
   });
-  const rowSpanColumnKeys = (0, import_react5.useMemo)(() => {
+  const rowSpanColumnKeys = (0, import_react6.useMemo)(() => {
     if (!enableRowSpan) return [];
     return collectRowSpanColumns(columns);
   }, [enableRowSpan, columns]);
   const primaryRowSpanKey = rowSpanColumnKeys[0]?.rowSpanKey;
   const primaryRowSpanColumnId = rowSpanColumnKeys[0]?.columnId;
-  const columnRowSpanMap = (0, import_react5.useMemo)(
+  const columnRowSpanMap = (0, import_react6.useMemo)(
     () => buildColumnRowSpanMap(tableData, rowSpanColumnKeys),
     [tableData, rowSpanColumnKeys]
   );
@@ -2610,7 +2853,7 @@ function useGlideTable(options) {
   const rows = table.getRowModel().rows;
   const columnCount = table.getAllLeafColumns().length || 1;
   const visibleLeafColumns = table.getVisibleLeafColumns();
-  const columnFreezeOffsets = (0, import_react5.useMemo)(() => {
+  const columnFreezeOffsets = (0, import_react6.useMemo)(() => {
     if (!enableColumnFreeze) return EMPTY_COLUMN_FREEZE_OFFSETS;
     return buildColumnFreezeOffsets(
       visibleLeafColumns.map((column) => ({
@@ -2630,14 +2873,14 @@ function useGlideTable(options) {
   const totalSize = rowVirtualizer.getTotalSize();
   const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start ?? 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0) : 0;
-  const selectedRowIndices = (0, import_react5.useMemo)(() => {
+  const selectedRowIndices = (0, import_react6.useMemo)(() => {
     const indices = /* @__PURE__ */ new Set();
     for (const selectedRow of selectedRows) {
       indices.add(selectedRow.index);
     }
     return indices;
   }, [selectedRows]);
-  const scrollCellIntoView = (0, import_react5.useCallback)(
+  const scrollCellIntoView = (0, import_react6.useCallback)(
     (rowIndex, colIndex, options2) => {
       const align = options2?.align ?? "nearest";
       const blockAlign = align === "center" ? "center" : "nearest";
@@ -2664,7 +2907,7 @@ function useGlideTable(options) {
     },
     [rowVirtualizer, shouldVirtualize]
   );
-  const handleCellNavigate = (0, import_react5.useCallback)(
+  const handleCellNavigate = (0, import_react6.useCallback)(
     (position) => {
       scrollCellIntoView(position.row, position.col, { align: "nearest" });
     },
@@ -2687,7 +2930,9 @@ function useGlideTable(options) {
     onDataChange,
     onBatchChange,
     onRowsPaste,
-    onCellNavigate: handleCellNavigate
+    onCellNavigate: handleCellNavigate,
+    cellRendererRegistry,
+    rootRef
   });
   const {
     editingCell,
@@ -2697,11 +2942,7 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
-  const cellRendererRegistry = (0, import_react5.useMemo)(
-    () => createCellRendererRegistry(cellRenderers),
-    [cellRenderers]
-  );
-  const commitRenderedCellValue = (0, import_react5.useCallback)(
+  const commitRenderedCellValue = (0, import_react6.useCallback)(
     (rowId, columnId, value) => commitCellValue({
       data: tableData,
       rows,
@@ -2713,11 +2954,11 @@ function useGlideTable(options) {
     }),
     [onCellChange, onDataChange, rows, tableData]
   );
-  const getCellContext = (0, import_react5.useCallback)(
+  const getCellContext = (0, import_react6.useCallback)(
     (cell) => withCellUpdate(cell.getContext(), commitRenderedCellValue),
     [commitRenderedCellValue]
   );
-  const handleCellMouseDownWithCommit = (0, import_react5.useCallback)(
+  const handleCellMouseDownWithCommit = (0, import_react6.useCallback)(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
       if (editingCell && !isSameEditingCell && !commitEdit()) {
@@ -2727,7 +2968,7 @@ function useGlideTable(options) {
     },
     [commitEdit, editingCell, handleCellMouseDown]
   );
-  const navigateToSearchResult = (0, import_react5.useCallback)(
+  const navigateToSearchResult = (0, import_react6.useCallback)(
     (item) => {
       const [colIndex, rowIndex] = item;
       handleCellMouseDownWithCommit(rowIndex, colIndex);
@@ -2735,7 +2976,7 @@ function useGlideTable(options) {
     },
     [handleCellMouseDownWithCommit, scrollCellIntoView]
   );
-  const resolveSearchRowId = (0, import_react5.useCallback)(
+  const resolveSearchRowId = (0, import_react6.useCallback)(
     (row, index) => {
       if (getRowId) return getRowId(row, index);
       if (enableExpand) {
@@ -2759,7 +3000,7 @@ function useGlideTable(options) {
     },
     [enableExpand, getRowId, toggleField]
   );
-  const searchCorpus = (0, import_react5.useMemo)(() => {
+  const searchCorpus = (0, import_react6.useMemo)(() => {
     if (!enableInlineSearch) return [];
     if (enableExpand && toggleField) {
       return buildTreeSearchCorpus(tableData, {
@@ -2775,16 +3016,16 @@ function useGlideTable(options) {
     tableData,
     toggleField
   ]);
-  const searchCorpusRef = (0, import_react5.useRef)(searchCorpus);
+  const searchCorpusRef = (0, import_react6.useRef)(searchCorpus);
   searchCorpusRef.current = searchCorpus;
-  const visibleRowIndexById = (0, import_react5.useMemo)(() => {
+  const visibleRowIndexById = (0, import_react6.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const row of rows) {
       map.set(resolveSearchRowId(row.original, row.index), row.index);
     }
     return map;
   }, [resolveSearchRowId, rows]);
-  const getSearchCellValue = (0, import_react5.useCallback)(
+  const getSearchCellValue = (0, import_react6.useCallback)(
     (rowIndex, colIndex) => {
       const corpusRow = searchCorpusRef.current[rowIndex];
       const column = visibleLeafColumns[colIndex];
@@ -2807,14 +3048,14 @@ function useGlideTable(options) {
     },
     [rows, visibleLeafColumns, visibleRowIndexById]
   );
-  const pendingSearchNavRef = (0, import_react5.useRef)(null);
-  const focusSearchResult = (0, import_react5.useCallback)(
+  const pendingSearchNavRef = (0, import_react6.useRef)(null);
+  const focusSearchResult = (0, import_react6.useCallback)(
     (colIndex, visibleRowIndex) => {
       navigateToSearchResult([colIndex, visibleRowIndex]);
     },
     [navigateToSearchResult]
   );
-  const navigateToCorpusSearchResult = (0, import_react5.useCallback)(
+  const navigateToCorpusSearchResult = (0, import_react6.useCallback)(
     (item) => {
       const [colIndex, corpusRowIndex] = item;
       const corpusRow = searchCorpusRef.current[corpusRowIndex];
@@ -2847,7 +3088,7 @@ function useGlideTable(options) {
       visibleRowIndexById
     ]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const pending = pendingSearchNavRef.current;
     if (!pending) return;
     const visibleRowIndex = visibleRowIndexById.get(pending.rowId);
@@ -2871,7 +3112,7 @@ function useGlideTable(options) {
     onNavigateToResult: navigateToCorpusSearchResult,
     rootRef
   });
-  const visibleSearchMatchKeys = (0, import_react5.useMemo)(() => {
+  const visibleSearchMatchKeys = (0, import_react6.useMemo)(() => {
     if (!enableInlineSearch) return EMPTY_SEARCH_MATCH_KEYS;
     return mapSearchResultsToVisibleKeys(
       inlineSearch.searchResults,
@@ -2884,7 +3125,7 @@ function useGlideTable(options) {
     searchCorpus,
     visibleRowIndexById
   ]);
-  const visibleActiveMatch = (0, import_react5.useMemo)(() => {
+  const visibleActiveMatch = (0, import_react6.useMemo)(() => {
     if (!enableInlineSearch || !inlineSearch.activeMatch) return null;
     return mapSearchResultToVisibleItem(
       inlineSearch.activeMatch,
@@ -2897,13 +3138,13 @@ function useGlideTable(options) {
     searchCorpus,
     visibleRowIndexById
   ]);
-  const clearHover = (0, import_react5.useCallback)(() => {
+  const clearHover = (0, import_react6.useCallback)(() => {
     setHoveredRowIndex(null);
   }, []);
-  const handleRowHover = (0, import_react5.useCallback)((rowIndex, _rowData) => {
+  const handleRowHover = (0, import_react6.useCallback)((rowIndex, _rowData) => {
     setHoveredRowIndex(rowIndex);
   }, []);
-  const handleToggleSelect = (0, import_react5.useCallback)(
+  const handleToggleSelect = (0, import_react6.useCallback)(
     (row) => {
       if (!row.getCanSelect()) return;
       if (preserveRowSelection && row.getIsSelected()) {
@@ -2913,14 +3154,14 @@ function useGlideTable(options) {
     },
     [preserveRowSelection]
   );
-  const handleToggleExpand = (0, import_react5.useCallback)(
+  const handleToggleExpand = (0, import_react6.useCallback)(
     (rowKey) => {
       if (preventExpand) return;
       handleExpandedRowsChange(toggleExpandedRowId(rowKey, expandedRows));
     },
     [preventExpand, handleExpandedRowsChange, expandedRows]
   );
-  const rowContextValue = (0, import_react5.useMemo)(() => {
+  const rowContextValue = (0, import_react6.useMemo)(() => {
     return {
       rowSpan: {
         enableRowSpan,
@@ -3019,12 +3260,12 @@ function useGlideTable(options) {
     visibleSearchMatchKeys,
     visibleActiveMatch
   ]);
-  const copySelectionRef = (0, import_react5.useRef)(copySelection);
-  (0, import_react5.useEffect)(() => {
+  const copySelectionRef = (0, import_react6.useRef)(copySelection);
+  (0, import_react6.useEffect)(() => {
     copySelectionRef.current = copySelection;
   }, [copySelection]);
-  const stableCopySelection = (0, import_react5.useCallback)((options2) => copySelectionRef.current(options2), []);
-  (0, import_react5.useEffect)(() => {
+  const stableCopySelection = (0, import_react6.useCallback)((options2) => copySelectionRef.current(options2), []);
+  (0, import_react6.useEffect)(() => {
     onCopyActionsReady?.({ copySelection: stableCopySelection });
   }, [onCopyActionsReady, stableCopySelection]);
   return {
@@ -3073,16 +3314,18 @@ function useGlideTable(options) {
 }
 
 // src/components/ui/table/features/cell-render/ResolvedTableCell.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/ui/table/DataTableContext.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var DataTableContext = (0, import_react6.createContext)(null);
+var DataTableContext = (0, import_react7.createContext)(null);
 function useDataTableRowContext() {
-  const context = (0, import_react6.use)(DataTableContext);
+  const context = (0, import_react7.use)(DataTableContext);
   if (!context) {
-    throw new Error("useDataTableRowContext must be used within a DataTableContextProvider");
+    throw new Error(
+      "useDataTableRowContext must be used within a DataTableContextProvider"
+    );
   }
   return context;
 }
@@ -3096,7 +3339,7 @@ function ResolvedTableCell({
   const meta = column.columnDef.meta;
   const value = getValue();
   const columnId = column.id;
-  const update = (0, import_react7.useCallback)(
+  const update = (0, import_react8.useCallback)(
     (next) => {
       cellRender.commitValue(row.id, columnId, next);
     },
@@ -3121,8 +3364,105 @@ function ResolvedTableCell({
 }
 
 // src/components/ui/table/features/column-resize/columnResize.ts
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function floorOf(column) {
+  return column.minWidth ?? 0;
+}
+function ceilOf(column) {
+  return column.maxWidth ?? Number.POSITIVE_INFINITY;
+}
+function preferOf(column) {
+  const floor = floorOf(column);
+  const ceil = ceilOf(column);
+  const preferred = column.maxWidth ?? column.minWidth ?? 0;
+  return clamp(preferred, floor, Number.isFinite(ceil) ? ceil : preferred);
+}
+function resolveColumnLayoutWidths(containerWidth, columns) {
+  const widths = /* @__PURE__ */ new Map();
+  const fixed = [];
+  const bounded = [];
+  let flexCount = 0;
+  for (const column of columns) {
+    if (column.width != null) {
+      fixed.push(column);
+    } else if (column.minWidth != null || column.maxWidth != null) {
+      bounded.push(column);
+    } else {
+      flexCount += 1;
+    }
+  }
+  let used = 0;
+  for (const column of fixed) {
+    let size = column.width;
+    if (column.minWidth != null) size = Math.max(size, column.minWidth);
+    if (column.maxWidth != null) size = Math.min(size, column.maxWidth);
+    widths.set(column.id, size);
+    used += size;
+  }
+  if (bounded.length === 0) {
+    return widths;
+  }
+  const boundedSizes = /* @__PURE__ */ new Map();
+  let preferredSum = 0;
+  let floorSum = 0;
+  for (const column of bounded) {
+    const preferred = preferOf(column);
+    boundedSizes.set(column.id, preferred);
+    preferredSum += preferred;
+    floorSum += floorOf(column);
+  }
+  if (containerWidth > 0) {
+    const remaining = Math.max(0, containerWidth - used);
+    if (remaining >= preferredSum) {
+    } else if (remaining >= floorSum) {
+      let deficit = preferredSum - remaining;
+      const open = bounded.map((column) => ({
+        id: column.id,
+        current: boundedSizes.get(column.id),
+        floor: floorOf(column)
+      }));
+      while (deficit >= 1) {
+        const shrinkable = open.filter((entry) => entry.current > entry.floor);
+        if (shrinkable.length === 0) break;
+        const portion = Math.floor(deficit / shrinkable.length);
+        const rem = deficit % shrinkable.length;
+        let consumed = 0;
+        for (let index = 0; index < shrinkable.length; index += 1) {
+          const entry = shrinkable[index];
+          const reduce = Math.min(
+            entry.current - entry.floor,
+            portion + (index < rem ? 1 : 0)
+          );
+          entry.current -= reduce;
+          consumed += reduce;
+        }
+        if (consumed === 0) break;
+        deficit -= consumed;
+      }
+      for (const entry of open) {
+        boundedSizes.set(entry.id, entry.current);
+      }
+    } else {
+      for (const column of bounded) {
+        boundedSizes.set(column.id, floorOf(column));
+      }
+    }
+  }
+  for (const [id, size] of boundedSizes) {
+    widths.set(id, Math.round(size));
+  }
+  return widths;
+}
 function getColumnSizeStyle(size, options) {
-  const { force = false, lockMax = false, minWidth, maxWidth } = options ?? {};
+  const {
+    force = false,
+    lockMax = false,
+    minWidth,
+    maxWidth,
+    layoutWidth
+  } = options ?? {};
   if (lockMax) {
     return {
       width: size,
@@ -3130,14 +3470,27 @@ function getColumnSizeStyle(size, options) {
       maxWidth: size
     };
   }
+  if (layoutWidth != null) {
+    return {
+      width: layoutWidth,
+      minWidth: layoutWidth,
+      maxWidth: layoutWidth
+    };
+  }
+  const resolvedSize = size;
   const hasExplicitSize = force || size !== DATA_TABLE_COLUMN_SIZE;
   if (!hasExplicitSize && minWidth == null && maxWidth == null) {
     return void 0;
   }
   const style = {};
   if (hasExplicitSize) {
-    style.width = size;
-    style.minWidth = minWidth ?? size;
+    const used = minWidth != null || maxWidth != null ? clamp(
+      resolvedSize,
+      minWidth ?? Number.NEGATIVE_INFINITY,
+      maxWidth ?? Number.POSITIVE_INFINITY
+    ) : resolvedSize;
+    style.width = used;
+    style.minWidth = minWidth ?? used;
   } else if (minWidth != null) {
     style.minWidth = minWidth;
   }
@@ -3148,7 +3501,7 @@ function getColumnSizeStyle(size, options) {
 }
 
 // src/components/ui/table/features/column-reorder/useColumnReorder.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 function hitTestReorderHeader(table, clientX, clientY) {
   const headers = Array.from(
     table.querySelectorAll(
@@ -3196,19 +3549,19 @@ function readTargetIds(table, columnId) {
 }
 function useColumnReorder(options) {
   const { enabled, columnOrder, onColumnOrderChange } = options;
-  const sessionRef = (0, import_react8.useRef)(null);
-  const columnOrderRef = (0, import_react8.useRef)(columnOrder);
-  const onColumnOrderChangeRef = (0, import_react8.useRef)(onColumnOrderChange);
-  const [draggingColumnId, setDraggingColumnId] = (0, import_react8.useState)(null);
-  const [dropTarget, setDropTarget] = (0, import_react8.useState)(
+  const sessionRef = (0, import_react9.useRef)(null);
+  const columnOrderRef = (0, import_react9.useRef)(columnOrder);
+  const onColumnOrderChangeRef = (0, import_react9.useRef)(onColumnOrderChange);
+  const [draggingColumnId, setDraggingColumnId] = (0, import_react9.useState)(null);
+  const [dropTarget, setDropTarget] = (0, import_react9.useState)(
     null
   );
-  const dropTargetRef = (0, import_react8.useRef)(dropTarget);
-  const previousUserSelectRef = (0, import_react8.useRef)(null);
+  const dropTargetRef = (0, import_react9.useRef)(dropTarget);
+  const previousUserSelectRef = (0, import_react9.useRef)(null);
   columnOrderRef.current = columnOrder;
   onColumnOrderChangeRef.current = onColumnOrderChange;
   dropTargetRef.current = dropTarget;
-  const resetDrag = (0, import_react8.useCallback)(() => {
+  const resetDrag = (0, import_react9.useCallback)(() => {
     sessionRef.current = null;
     setDraggingColumnId(null);
     setDropTarget(null);
@@ -3224,15 +3577,15 @@ function useColumnReorder(options) {
     }
     document.body.style.removeProperty("user-select");
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!enabled) resetDrag();
   }, [enabled, resetDrag]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     return () => {
       resetDrag();
     };
   }, [resetDrag]);
-  const onHeaderPointerDown = (0, import_react8.useCallback)(
+  const onHeaderPointerDown = (0, import_react9.useCallback)(
     (event, meta) => {
       if (!enabled || !meta.canDrag) return;
       if (event.button !== 0) return;
@@ -3255,7 +3608,7 @@ function useColumnReorder(options) {
     },
     [enabled]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!enabled) return;
     const onPointerMove = (event) => {
       const session = sessionRef.current;
@@ -3416,6 +3769,7 @@ function useColumnReorder(options) {
   previousSearchIndex,
   resolveCellRenderer,
   resolveColumnFreezeSide,
+  resolveColumnLayoutWidths,
   resolveDataTableLabels,
   resolveDropEdge,
   resolveHeaderFreezeOffset,