react-glide-table 2.2.0 → 2.3.0

package/dist/core.js

@@ -741,6 +741,219 @@ function hasCellSelectionEdges(style) {
 }
 
 // src/components/ui/table/features/cell-selection/copyData.ts
+import { isValidElement } from "react";
+function isReactNodeIterable(node) {
+  return typeof node === "object" && node !== null && !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 (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 (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;
@@ -846,37 +1059,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);
@@ -1037,7 +1260,9 @@ function useCellSelection({
   onDataChange,
   onBatchChange,
   onRowsPaste,
-  onCellNavigate
+  onCellNavigate,
+  cellRendererRegistry,
+  rootRef
 }) {
   const [dragState, setDragState] = useState2(INITIAL_DRAG_STATE);
   const pendingPasteModeRef = useRef2(null);
@@ -1161,15 +1386,28 @@ function useCellSelection({
     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
+    ]
   );
   useEffect2(() => {
     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;
@@ -2418,6 +2656,10 @@ function useGlideTable(options) {
   const [hoveredRowIndex, setHoveredRowIndex] = useState4(null);
   const scrollRef = useRef5(null);
   const rootRef = useRef5(null);
+  const cellRendererRegistry = useMemo3(
+    () => createCellRendererRegistry(cellRenderers),
+    [cellRenderers]
+  );
   const shouldVirtualize = enableVirtualization && !enableRowSpan;
   useEffect5(() => {
     if (enableVirtualization && enableRowSpan) {
@@ -2601,7 +2843,9 @@ function useGlideTable(options) {
     onDataChange,
     onBatchChange,
     onRowsPaste,
-    onCellNavigate: handleCellNavigate
+    onCellNavigate: handleCellNavigate,
+    cellRendererRegistry,
+    rootRef
   });
   const {
     editingCell,
@@ -2611,10 +2855,6 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
-  const cellRendererRegistry = useMemo3(
-    () => createCellRendererRegistry(cellRenderers),
-    [cellRenderers]
-  );
   const commitRenderedCellValue = useCallback4(
     (rowId, columnId, value) => commitCellValue({
       data: tableData,
@@ -2996,7 +3236,9 @@ var DataTableContext = createContext(null);
 function useDataTableRowContext() {
   const context = 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;
 }
@@ -3035,16 +3277,140 @@ 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 } = options ?? {};
-  if (!force && size === DATA_TABLE_COLUMN_SIZE) {
+  const {
+    force = false,
+    lockMax = false,
+    minWidth,
+    maxWidth,
+    layoutWidth
+  } = options ?? {};
+  if (lockMax) {
+    return {
+      width: size,
+      minWidth: size,
+      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;
   }
-  return {
-    width: size,
-    minWidth: size,
-    ...lockMax ? { maxWidth: size } : {}
-  };
+  const style = {};
+  if (hasExplicitSize) {
+    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;
+  }
+  if (maxWidth != null) {
+    style.maxWidth = maxWidth;
+  }
+  return style;
 }
 
 // src/components/ui/table/features/column-reorder/useColumnReorder.ts
@@ -3320,6 +3686,7 @@ export {
   previousSearchIndex,
   resolveCellRenderer,
   resolveColumnFreezeSide,
+  resolveColumnLayoutWidths,
   resolveDataTableLabels,
   resolveDropEdge,
   resolveHeaderFreezeOffset,