react-glide-table 2.3.0 → 2.3.1

package/dist/core.cjs

@@ -526,6 +526,90 @@ function withCellUpdate(context, commitValue) {
   };
 }
 
+// src/components/ui/table/features/cell-selection/pasteData.ts
+function countLeadingEmptyCells(cells) {
+  let depth = 0;
+  while (depth < cells.length && cells[depth] === "") {
+    depth += 1;
+  }
+  return depth;
+}
+function looksLikeSubtreeIndentation(leadingEmptyCounts) {
+  if (leadingEmptyCounts.length === 0) return false;
+  const firstDepth = leadingEmptyCounts[0] ?? 0;
+  if (firstDepth !== 0) return false;
+  return leadingEmptyCounts.some((depth) => depth > 0);
+}
+function parseClipboardTSV(text) {
+  return parseClipboardTSVWithDepths(text).values;
+}
+function parseClipboardTSVWithDepths(text) {
+  if (!text) return { values: [], depths: [] };
+  const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+  const withoutTrailing = normalized.replace(/\n+$/, "");
+  if (!withoutTrailing) return { values: [], depths: [] };
+  const rows = withoutTrailing.split("\n").map((line) => line.split("	"));
+  const leadingEmptyCounts = rows.map(countLeadingEmptyCells);
+  const treatAsDepth = looksLikeSubtreeIndentation(leadingEmptyCounts);
+  const values = [];
+  const depths = [];
+  for (let index = 0; index < rows.length; index += 1) {
+    const cells = rows[index] ?? [];
+    const depth = leadingEmptyCounts[index] ?? 0;
+    if (treatAsDepth) {
+      values.push(cells.slice(depth));
+      depths.push(depth);
+    } else {
+      values.push(cells);
+      depths.push(0);
+    }
+  }
+  return { values, depths };
+}
+function resolvePasteColumnIds(rows, startCol, width) {
+  if (width <= 0) return [];
+  const cells = rows[0]?.getVisibleCells() ?? [];
+  const columnIds = [];
+  for (let offset = 0; offset < width; offset += 1) {
+    const cell = cells[startCol + offset];
+    if (!cell) break;
+    columnIds.push(cell.column.id);
+  }
+  return columnIds;
+}
+function buildRowsPastePayload(rows, startRow, startCol, text, mode, endRow = startRow) {
+  const { values, depths } = parseClipboardTSVWithDepths(text);
+  if (values.length === 0) return null;
+  const width = Math.max(...values.map((row) => row.length), 0);
+  if (width === 0) return null;
+  const columnIds = resolvePasteColumnIds(rows, startCol, width);
+  if (columnIds.length === 0) return null;
+  const rowIds = [];
+  for (let offset = 0; offset < values.length; offset += 1) {
+    const row = rows[startRow + offset];
+    if (!row) break;
+    rowIds.push(row.id);
+  }
+  const anchorRow = rows[endRow] ?? rows[startRow];
+  return {
+    mode,
+    startRow,
+    startCol,
+    endRow,
+    rowIds,
+    anchorRowId: anchorRow?.id ?? "",
+    columnIds,
+    values,
+    depths
+  };
+}
+function isEditablePasteTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  return Boolean(target.isContentEditable);
+}
+
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 var import_react3 = require("react");
 
@@ -1259,90 +1343,6 @@ function hasFillExtension(sourceBounds, fillBounds) {
   return fillBounds.startRow < sourceBounds.startRow || fillBounds.endRow > sourceBounds.endRow || fillBounds.startCol < sourceBounds.startCol || fillBounds.endCol > sourceBounds.endCol;
 }
 
-// src/components/ui/table/features/cell-selection/pasteData.ts
-function countLeadingEmptyCells(cells) {
-  let depth = 0;
-  while (depth < cells.length && cells[depth] === "") {
-    depth += 1;
-  }
-  return depth;
-}
-function looksLikeSubtreeIndentation(leadingEmptyCounts) {
-  if (leadingEmptyCounts.length === 0) return false;
-  const firstDepth = leadingEmptyCounts[0] ?? 0;
-  if (firstDepth !== 0) return false;
-  return leadingEmptyCounts.some((depth) => depth > 0);
-}
-function parseClipboardTSV(text) {
-  return parseClipboardTSVWithDepths(text).values;
-}
-function parseClipboardTSVWithDepths(text) {
-  if (!text) return { values: [], depths: [] };
-  const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
-  const withoutTrailing = normalized.replace(/\n+$/, "");
-  if (!withoutTrailing) return { values: [], depths: [] };
-  const rows = withoutTrailing.split("\n").map((line) => line.split("	"));
-  const leadingEmptyCounts = rows.map(countLeadingEmptyCells);
-  const treatAsDepth = looksLikeSubtreeIndentation(leadingEmptyCounts);
-  const values = [];
-  const depths = [];
-  for (let index = 0; index < rows.length; index += 1) {
-    const cells = rows[index] ?? [];
-    const depth = leadingEmptyCounts[index] ?? 0;
-    if (treatAsDepth) {
-      values.push(cells.slice(depth));
-      depths.push(depth);
-    } else {
-      values.push(cells);
-      depths.push(0);
-    }
-  }
-  return { values, depths };
-}
-function resolvePasteColumnIds(rows, startCol, width) {
-  if (width <= 0) return [];
-  const cells = rows[0]?.getVisibleCells() ?? [];
-  const columnIds = [];
-  for (let offset = 0; offset < width; offset += 1) {
-    const cell = cells[startCol + offset];
-    if (!cell) break;
-    columnIds.push(cell.column.id);
-  }
-  return columnIds;
-}
-function buildRowsPastePayload(rows, startRow, startCol, text, mode, endRow = startRow) {
-  const { values, depths } = parseClipboardTSVWithDepths(text);
-  if (values.length === 0) return null;
-  const width = Math.max(...values.map((row) => row.length), 0);
-  if (width === 0) return null;
-  const columnIds = resolvePasteColumnIds(rows, startCol, width);
-  if (columnIds.length === 0) return null;
-  const rowIds = [];
-  for (let offset = 0; offset < values.length; offset += 1) {
-    const row = rows[startRow + offset];
-    if (!row) break;
-    rowIds.push(row.id);
-  }
-  const anchorRow = rows[endRow] ?? rows[startRow];
-  return {
-    mode,
-    startRow,
-    startCol,
-    endRow,
-    rowIds,
-    anchorRowId: anchorRow?.id ?? "",
-    columnIds,
-    values,
-    depths
-  };
-}
-function isEditablePasteTarget(target) {
-  if (!(target instanceof HTMLElement)) return false;
-  const tag = target.tagName;
-  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
-  return Boolean(target.isContentEditable);
-}
-
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 function useCellSelection({
   data,
@@ -1424,11 +1424,19 @@ function useCellSelection({
     },
     [enabled]
   );
+  const clearSelection = (0, import_react3.useCallback)(() => {
+    const prev = dragStateRef.current;
+    if (prev.start === null && prev.end === null && !prev.isSelecting && !prev.isFillDragging) {
+      return;
+    }
+    dragStateRef.current = INITIAL_DRAG_STATE;
+    setDragState(INITIAL_DRAG_STATE);
+  }, []);
   (0, import_react3.useEffect)(() => {
     if (!enabled) {
-      setDragState(INITIAL_DRAG_STATE);
+      clearSelection();
     }
-  }, [enabled]);
+  }, [clearSelection, enabled]);
   (0, import_react3.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
@@ -1642,6 +1650,7 @@ function useCellSelection({
     handleCellMouseDown,
     handleCellMouseEnter,
     handleFillHandleMouseDown,
+    clearSelection,
     copySelection
   };
 }
@@ -2919,6 +2928,7 @@ function useGlideTable(options) {
     handleCellMouseDown,
     handleCellMouseEnter,
     handleFillHandleMouseDown,
+    clearSelection: clearCellSelection,
     copySelection
   } = useCellSelection({
     data: tableData,
@@ -2934,6 +2944,42 @@ function useGlideTable(options) {
     cellRendererRegistry,
     rootRef
   });
+  const clearRowSelection = (0, import_react6.useCallback)(() => {
+    if (rowSelectionMode === "none") return;
+    const hasSelection = Object.values(rowSelection).some(Boolean);
+    if (!hasSelection) return;
+    if (onRowSelectionChange) {
+      onRowSelectionChange(() => ({}));
+      return;
+    }
+    setInternalRowSelection({});
+  }, [onRowSelectionChange, rowSelection, rowSelectionMode]);
+  (0, import_react6.useEffect)(() => {
+    const clearAllSelections = () => {
+      clearCellSelection();
+      clearRowSelection();
+    };
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      if (event.defaultPrevented) return;
+      if (isEditablePasteTarget(event.target) || isEditablePasteTarget(document.activeElement)) {
+        return;
+      }
+      clearAllSelections();
+    };
+    const handleMouseDown = (event) => {
+      const root = rootRef.current;
+      if (!root) return;
+      if (event.target instanceof Node && root.contains(event.target)) return;
+      clearAllSelections();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [clearCellSelection, clearRowSelection]);
   const {
     editingCell,
     draftValue,

package/dist/core.d.cts

@@ -463,6 +463,7 @@ declare function useCellSelection<T extends Record<string, unknown>>({ data, row
     handleCellMouseDown: (rowIndex: number, colIndex: number, options?: CellMouseDownOptions) => void;
     handleCellMouseEnter: (rowIndex: number, colIndex: number) => void;
     handleFillHandleMouseDown: (rowIndex: number, colIndex: number) => void;
+    clearSelection: () => void;
     copySelection: (options?: CopySelectionOptions) => Promise<boolean>;
 };
 

package/dist/core.d.ts

@@ -463,6 +463,7 @@ declare function useCellSelection<T extends Record<string, unknown>>({ data, row
     handleCellMouseDown: (rowIndex: number, colIndex: number, options?: CellMouseDownOptions) => void;
     handleCellMouseEnter: (rowIndex: number, colIndex: number) => void;
     handleFillHandleMouseDown: (rowIndex: number, colIndex: number) => void;
+    clearSelection: () => void;
     copySelection: (options?: CopySelectionOptions) => Promise<boolean>;
 };
 

package/dist/core.js

@@ -432,6 +432,90 @@ function withCellUpdate(context, commitValue) {
   };
 }
 
+// src/components/ui/table/features/cell-selection/pasteData.ts
+function countLeadingEmptyCells(cells) {
+  let depth = 0;
+  while (depth < cells.length && cells[depth] === "") {
+    depth += 1;
+  }
+  return depth;
+}
+function looksLikeSubtreeIndentation(leadingEmptyCounts) {
+  if (leadingEmptyCounts.length === 0) return false;
+  const firstDepth = leadingEmptyCounts[0] ?? 0;
+  if (firstDepth !== 0) return false;
+  return leadingEmptyCounts.some((depth) => depth > 0);
+}
+function parseClipboardTSV(text) {
+  return parseClipboardTSVWithDepths(text).values;
+}
+function parseClipboardTSVWithDepths(text) {
+  if (!text) return { values: [], depths: [] };
+  const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+  const withoutTrailing = normalized.replace(/\n+$/, "");
+  if (!withoutTrailing) return { values: [], depths: [] };
+  const rows = withoutTrailing.split("\n").map((line) => line.split("	"));
+  const leadingEmptyCounts = rows.map(countLeadingEmptyCells);
+  const treatAsDepth = looksLikeSubtreeIndentation(leadingEmptyCounts);
+  const values = [];
+  const depths = [];
+  for (let index = 0; index < rows.length; index += 1) {
+    const cells = rows[index] ?? [];
+    const depth = leadingEmptyCounts[index] ?? 0;
+    if (treatAsDepth) {
+      values.push(cells.slice(depth));
+      depths.push(depth);
+    } else {
+      values.push(cells);
+      depths.push(0);
+    }
+  }
+  return { values, depths };
+}
+function resolvePasteColumnIds(rows, startCol, width) {
+  if (width <= 0) return [];
+  const cells = rows[0]?.getVisibleCells() ?? [];
+  const columnIds = [];
+  for (let offset = 0; offset < width; offset += 1) {
+    const cell = cells[startCol + offset];
+    if (!cell) break;
+    columnIds.push(cell.column.id);
+  }
+  return columnIds;
+}
+function buildRowsPastePayload(rows, startRow, startCol, text, mode, endRow = startRow) {
+  const { values, depths } = parseClipboardTSVWithDepths(text);
+  if (values.length === 0) return null;
+  const width = Math.max(...values.map((row) => row.length), 0);
+  if (width === 0) return null;
+  const columnIds = resolvePasteColumnIds(rows, startCol, width);
+  if (columnIds.length === 0) return null;
+  const rowIds = [];
+  for (let offset = 0; offset < values.length; offset += 1) {
+    const row = rows[startRow + offset];
+    if (!row) break;
+    rowIds.push(row.id);
+  }
+  const anchorRow = rows[endRow] ?? rows[startRow];
+  return {
+    mode,
+    startRow,
+    startCol,
+    endRow,
+    rowIds,
+    anchorRowId: anchorRow?.id ?? "",
+    columnIds,
+    values,
+    depths
+  };
+}
+function isEditablePasteTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  return Boolean(target.isContentEditable);
+}
+
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 
@@ -1165,90 +1249,6 @@ function hasFillExtension(sourceBounds, fillBounds) {
   return fillBounds.startRow < sourceBounds.startRow || fillBounds.endRow > sourceBounds.endRow || fillBounds.startCol < sourceBounds.startCol || fillBounds.endCol > sourceBounds.endCol;
 }
 
-// src/components/ui/table/features/cell-selection/pasteData.ts
-function countLeadingEmptyCells(cells) {
-  let depth = 0;
-  while (depth < cells.length && cells[depth] === "") {
-    depth += 1;
-  }
-  return depth;
-}
-function looksLikeSubtreeIndentation(leadingEmptyCounts) {
-  if (leadingEmptyCounts.length === 0) return false;
-  const firstDepth = leadingEmptyCounts[0] ?? 0;
-  if (firstDepth !== 0) return false;
-  return leadingEmptyCounts.some((depth) => depth > 0);
-}
-function parseClipboardTSV(text) {
-  return parseClipboardTSVWithDepths(text).values;
-}
-function parseClipboardTSVWithDepths(text) {
-  if (!text) return { values: [], depths: [] };
-  const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
-  const withoutTrailing = normalized.replace(/\n+$/, "");
-  if (!withoutTrailing) return { values: [], depths: [] };
-  const rows = withoutTrailing.split("\n").map((line) => line.split("	"));
-  const leadingEmptyCounts = rows.map(countLeadingEmptyCells);
-  const treatAsDepth = looksLikeSubtreeIndentation(leadingEmptyCounts);
-  const values = [];
-  const depths = [];
-  for (let index = 0; index < rows.length; index += 1) {
-    const cells = rows[index] ?? [];
-    const depth = leadingEmptyCounts[index] ?? 0;
-    if (treatAsDepth) {
-      values.push(cells.slice(depth));
-      depths.push(depth);
-    } else {
-      values.push(cells);
-      depths.push(0);
-    }
-  }
-  return { values, depths };
-}
-function resolvePasteColumnIds(rows, startCol, width) {
-  if (width <= 0) return [];
-  const cells = rows[0]?.getVisibleCells() ?? [];
-  const columnIds = [];
-  for (let offset = 0; offset < width; offset += 1) {
-    const cell = cells[startCol + offset];
-    if (!cell) break;
-    columnIds.push(cell.column.id);
-  }
-  return columnIds;
-}
-function buildRowsPastePayload(rows, startRow, startCol, text, mode, endRow = startRow) {
-  const { values, depths } = parseClipboardTSVWithDepths(text);
-  if (values.length === 0) return null;
-  const width = Math.max(...values.map((row) => row.length), 0);
-  if (width === 0) return null;
-  const columnIds = resolvePasteColumnIds(rows, startCol, width);
-  if (columnIds.length === 0) return null;
-  const rowIds = [];
-  for (let offset = 0; offset < values.length; offset += 1) {
-    const row = rows[startRow + offset];
-    if (!row) break;
-    rowIds.push(row.id);
-  }
-  const anchorRow = rows[endRow] ?? rows[startRow];
-  return {
-    mode,
-    startRow,
-    startCol,
-    endRow,
-    rowIds,
-    anchorRowId: anchorRow?.id ?? "",
-    columnIds,
-    values,
-    depths
-  };
-}
-function isEditablePasteTarget(target) {
-  if (!(target instanceof HTMLElement)) return false;
-  const tag = target.tagName;
-  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
-  return Boolean(target.isContentEditable);
-}
-
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 function useCellSelection({
   data,
@@ -1330,11 +1330,19 @@ function useCellSelection({
     },
     [enabled]
   );
+  const clearSelection = useCallback2(() => {
+    const prev = dragStateRef.current;
+    if (prev.start === null && prev.end === null && !prev.isSelecting && !prev.isFillDragging) {
+      return;
+    }
+    dragStateRef.current = INITIAL_DRAG_STATE;
+    setDragState(INITIAL_DRAG_STATE);
+  }, []);
   useEffect2(() => {
     if (!enabled) {
-      setDragState(INITIAL_DRAG_STATE);
+      clearSelection();
     }
-  }, [enabled]);
+  }, [clearSelection, enabled]);
   useEffect2(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
@@ -1548,6 +1556,7 @@ function useCellSelection({
     handleCellMouseDown,
     handleCellMouseEnter,
     handleFillHandleMouseDown,
+    clearSelection,
     copySelection
   };
 }
@@ -2832,6 +2841,7 @@ function useGlideTable(options) {
     handleCellMouseDown,
     handleCellMouseEnter,
     handleFillHandleMouseDown,
+    clearSelection: clearCellSelection,
     copySelection
   } = useCellSelection({
     data: tableData,
@@ -2847,6 +2857,42 @@ function useGlideTable(options) {
     cellRendererRegistry,
     rootRef
   });
+  const clearRowSelection = useCallback4(() => {
+    if (rowSelectionMode === "none") return;
+    const hasSelection = Object.values(rowSelection).some(Boolean);
+    if (!hasSelection) return;
+    if (onRowSelectionChange) {
+      onRowSelectionChange(() => ({}));
+      return;
+    }
+    setInternalRowSelection({});
+  }, [onRowSelectionChange, rowSelection, rowSelectionMode]);
+  useEffect5(() => {
+    const clearAllSelections = () => {
+      clearCellSelection();
+      clearRowSelection();
+    };
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      if (event.defaultPrevented) return;
+      if (isEditablePasteTarget(event.target) || isEditablePasteTarget(document.activeElement)) {
+        return;
+      }
+      clearAllSelections();
+    };
+    const handleMouseDown = (event) => {
+      const root = rootRef.current;
+      if (!root) return;
+      if (event.target instanceof Node && root.contains(event.target)) return;
+      clearAllSelections();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [clearCellSelection, clearRowSelection]);
   const {
     editingCell,
     draftValue,