@xcelsior/ui-spreadsheets 1.0.13 → 1.0.15

package/dist/index.js

@@ -40,7 +40,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Spreadsheet.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // ../../../node_modules/.pnpm/react-icons@4.12.0_react@18.3.1/node_modules/react-icons/lib/esm/iconBase.js
 var import_react2 = __toESM(require("react"));
@@ -164,12 +164,6 @@ function HiZoomIn(props) {
 function HiZoomOut(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", "clipRule": "evenodd" } }, { "tag": "path", "attr": { "fillRule": "evenodd", "d": "M5 8a1 1 0 011-1h4a1 1 0 110 2H6a1 1 0 01-1-1z", "clipRule": "evenodd" } }] })(props);
 }
-function HiOutlineClipboardCheck(props) {
-  return GenIcon({ "tag": "svg", "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" } }] })(props);
-}
-function HiOutlineClipboardCopy(props) {
-  return GenIcon({ "tag": "svg", "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" } }] })(props);
-}
 function HiOutlineQuestionMarkCircle(props) {
   return GenIcon({ "tag": "svg", "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" } }] })(props);
 }
@@ -211,6 +205,8 @@ var SpreadsheetCell = ({
   isEditable = false,
   isEditing = false,
   isFocused = false,
+  isInSelection = false,
+  selectionEdge,
   isRowSelected = false,
   isRowHovered = false,
   highlightColor,
@@ -223,15 +219,14 @@ var SpreadsheetCell = ({
   leftOffset = 0,
   rightOffset = 0,
   onClick,
+  onMouseDown,
+  onMouseEnter,
   onChange,
   onConfirm,
   onCancel,
-  onCopyDown,
-  onCopyToSelected,
   onHighlight,
   onAddComment,
   onViewComments,
-  hasSelectedRows = false,
   className
 }) => {
   const [localValue, setLocalValue] = (0, import_react3.useState)(value);
@@ -345,26 +340,51 @@ var SpreadsheetCell = ({
       positionStyles.position = "sticky";
     }
   }
+  const selectionBorderStyles = {};
+  if (isInSelection && selectionEdge) {
+    const borderColor = "rgb(59 130 246)";
+    const borderWidth = "2px";
+    if (selectionEdge.top) {
+      selectionBorderStyles.borderTopColor = borderColor;
+      selectionBorderStyles.borderTopWidth = borderWidth;
+    }
+    if (selectionEdge.right) {
+      selectionBorderStyles.borderRightColor = borderColor;
+      selectionBorderStyles.borderRightWidth = borderWidth;
+    }
+    if (selectionEdge.bottom) {
+      selectionBorderStyles.borderBottomColor = borderColor;
+      selectionBorderStyles.borderBottomWidth = borderWidth;
+    }
+    if (selectionEdge.left) {
+      selectionBorderStyles.borderLeftColor = borderColor;
+      selectionBorderStyles.borderLeftWidth = borderWidth;
+    }
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "td",
     {
       onClick,
+      onMouseDown,
+      onMouseEnter,
       onKeyDown: handleCellKeyDown,
       "data-cell-id": `${rowId}-${column.id}`,
       className: cn(
-        "border border-gray-200 text-xs group cursor-pointer transition-colors",
+        "border border-gray-200 text-xs group cursor-pointer transition-colors select-none",
         cellPadding,
         column.align === "right" && "text-right",
         column.align === "center" && "text-center",
         isCopied && "animate-pulse",
-        isFocused && "ring-2 ring-blue-500 ring-inset",
+        isFocused && !isInSelection && "ring-2 ring-blue-500 ring-inset",
+        isInSelection && "bg-blue-50",
         isPinned ? "z-20" : "z-0",
         className
       ),
       style: {
-        backgroundColor: getBackgroundColor(),
+        backgroundColor: isInSelection ? "rgb(239 246 255)" : getBackgroundColor(),
         minWidth: column.minWidth || column.width,
-        ...positionStyles
+        ...positionStyles,
+        ...selectionBorderStyles
       },
       children: isEditing ? renderEditInput() : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1 relative", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -372,39 +392,13 @@ var SpreadsheetCell = ({
           {
             className: cn(
               "flex-1 truncate",
-              isEditable && "cursor-text hover:bg-gray-50 px-0.5 rounded min-h-[18px] flex items-center bg-yellow-50/50"
+              isEditable && "cursor-text hover:bg-gray-50 px-0.5 rounded min-h-[18px] flex items-center bg-blue-50/50"
             ),
             title: String(value ?? ""),
             children: renderContent()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-0.5 shrink-0", children: [
-          value !== null && value !== void 0 && value !== "" && onCopyDown && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: (e) => {
-                e.stopPropagation();
-                onCopyDown();
-              },
-              className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
-              title: "Copy value down to rows below",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HiOutlineClipboardCopy, { className: "h-2.5 w-2.5 text-gray-500" })
-            }
-          ),
-          hasSelectedRows && value !== null && value !== void 0 && value !== "" && onCopyToSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: (e) => {
-                e.stopPropagation();
-                onCopyToSelected();
-              },
-              className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-green-100 hover:bg-green-200 rounded",
-              title: "Copy to selected rows",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HiOutlineClipboardCheck, { className: "h-2.5 w-2.5 text-green-600" })
-            }
-          ),
+        !isInSelection && !isFocused && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-0.5 shrink-0", children: [
           onHighlight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "button",
             {
@@ -464,6 +458,7 @@ var MemoizedSpreadsheetCell = (0, import_react3.memo)(SpreadsheetCell, (prevProp
   if (prevProps.isEditing !== nextProps.isEditing) return false;
   if (prevProps.isFocused !== nextProps.isFocused) return false;
   if (prevProps.value !== nextProps.value) return false;
+  if (prevProps.isInSelection !== nextProps.isInSelection) return false;
   if (prevProps.isRowSelected !== nextProps.isRowSelected) return false;
   if (prevProps.isRowHovered !== nextProps.isRowHovered) return false;
   if (prevProps.highlightColor !== nextProps.highlightColor) return false;
@@ -473,6 +468,15 @@ var MemoizedSpreadsheetCell = (0, import_react3.memo)(SpreadsheetCell, (prevProp
   if (prevProps.isPinned !== nextProps.isPinned) return false;
   if (prevProps.leftOffset !== nextProps.leftOffset) return false;
   if (prevProps.rightOffset !== nextProps.rightOffset) return false;
+  const prevEdge = prevProps.selectionEdge;
+  const nextEdge = nextProps.selectionEdge;
+  if (prevEdge !== nextEdge) {
+    if (!prevEdge || !nextEdge) return false;
+    if (prevEdge.top !== nextEdge.top) return false;
+    if (prevEdge.right !== nextEdge.right) return false;
+    if (prevEdge.bottom !== nextEdge.bottom) return false;
+    if (prevEdge.left !== nextEdge.left) return false;
+  }
   return true;
 });
 MemoizedSpreadsheetCell.displayName = "MemoizedSpreadsheetCell";
@@ -2744,6 +2748,9 @@ function useSpreadsheetKeyboardShortcuts({
   onEscape,
   onNavigate,
   onEnterEditMode,
+  onTabNavigation,
+  onCopy,
+  onPaste,
   hasFocusedCell = false,
   isEditing = false,
   customShortcuts = [],
@@ -2778,25 +2785,40 @@ function useSpreadsheetKeyboardShortcuts({
         onRedo?.();
         return;
       }
+      if ((event.metaKey || event.ctrlKey) && event.key === "c" && !isEditing && hasFocusedCell) {
+        event.preventDefault();
+        onCopy?.();
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && event.key === "v" && !isEditing && hasFocusedCell) {
+        event.preventDefault();
+        onPaste?.();
+        return;
+      }
+      if (event.key === "Tab" && !isEditing && hasFocusedCell) {
+        event.preventDefault();
+        onTabNavigation?.(event.shiftKey);
+        return;
+      }
       if (hasFocusedCell && !isEditing && !event.metaKey && !event.ctrlKey) {
         if (event.key === "ArrowUp") {
           event.preventDefault();
-          onNavigate?.("up");
+          onNavigate?.("up", event);
           return;
         }
         if (event.key === "ArrowDown") {
           event.preventDefault();
-          onNavigate?.("down");
+          onNavigate?.("down", event);
           return;
         }
         if (event.key === "ArrowLeft") {
           event.preventDefault();
-          onNavigate?.("left");
+          onNavigate?.("left", event);
           return;
         }
         if (event.key === "ArrowRight") {
           event.preventDefault();
-          onNavigate?.("right");
+          onNavigate?.("right", event);
           return;
         }
         if (event.key === "F2") {
@@ -2824,6 +2846,9 @@ function useSpreadsheetKeyboardShortcuts({
     onEscape,
     onNavigate,
     onEnterEditMode,
+    onTabNavigation,
+    onCopy,
+    onPaste,
     hasFocusedCell,
     isEditing,
     customShortcuts
@@ -2841,6 +2866,8 @@ function useSpreadsheetKeyboardShortcuts({
     editing: [
       { label: "Undo", keys: [modifierKey, "Z"] },
       { label: "Redo", keys: [modifierKey, "Shift", "Z"] },
+      { label: "Copy cells", keys: [modifierKey, "C"] },
+      { label: "Paste cells", keys: [modifierKey, "V"] },
       { label: "Confirm cell edit", keys: ["Enter"] },
       { label: "Cancel cell edit", keys: ["Escape"] }
     ],
@@ -2849,6 +2876,12 @@ function useSpreadsheetKeyboardShortcuts({
       { label: "Navigate down", keys: ["\u2193"] },
       { label: "Navigate left", keys: ["\u2190"] },
       { label: "Navigate right", keys: ["\u2192"] },
+      { label: "Extend selection up", keys: ["Shift", "\u2191"] },
+      { label: "Extend selection down", keys: ["Shift", "\u2193"] },
+      { label: "Extend selection left", keys: ["Shift", "\u2190"] },
+      { label: "Extend selection right", keys: ["Shift", "\u2192"] },
+      { label: "Next cell", keys: ["Tab"] },
+      { label: "Previous cell", keys: ["Shift", "Tab"] },
       { label: "Edit cell", keys: ["F2"] }
     ],
     rowActions: [
@@ -2866,6 +2899,434 @@ function useSpreadsheetKeyboardShortcuts({
   };
 }
 
+// src/hooks/useSpreadsheetSelection.ts
+var import_react15 = require("react");
+function useSpreadsheetSelection({
+  data,
+  columns,
+  getRowId,
+  onCellRangeSelectionChange,
+  enableCellEditing = true
+}) {
+  const [focusedCell, setFocusedCell] = (0, import_react15.useState)(null);
+  const [editingCell, setEditingCell] = (0, import_react15.useState)(null);
+  const [selectedCellRange, setSelectedCellRangeState] = (0, import_react15.useState)(null);
+  const [isDragging, setIsDragging] = (0, import_react15.useState)(false);
+  const [clipboardData, setClipboardData] = (0, import_react15.useState)(null);
+  const anchorCell = (0, import_react15.useRef)(null);
+  const rowIndexMap = (0, import_react15.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    data.forEach((row, index) => {
+      map.set(getRowId(row), index);
+    });
+    return map;
+  }, [data, getRowId]);
+  const columnIndexMap = (0, import_react15.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    columns.forEach((col, index) => {
+      map.set(col.id, index);
+    });
+    return map;
+  }, [columns]);
+  const setSelectedCellRange = (0, import_react15.useCallback)(
+    (range) => {
+      setSelectedCellRangeState(range);
+      onCellRangeSelectionChange?.(range);
+    },
+    [onCellRangeSelectionChange]
+  );
+  const getNormalizedRange = (0, import_react15.useCallback)(
+    (range) => {
+      if (!range) return null;
+      const startRowIdx = rowIndexMap.get(range.start.rowId);
+      const endRowIdx = rowIndexMap.get(range.end.rowId);
+      const startColIdx = columnIndexMap.get(range.start.columnId);
+      const endColIdx = columnIndexMap.get(range.end.columnId);
+      if (startRowIdx === void 0 || endRowIdx === void 0 || startColIdx === void 0 || endColIdx === void 0) {
+        return null;
+      }
+      return {
+        startRowIdx: Math.min(startRowIdx, endRowIdx),
+        endRowIdx: Math.max(startRowIdx, endRowIdx),
+        startColIdx: Math.min(startColIdx, endColIdx),
+        endColIdx: Math.max(startColIdx, endColIdx)
+      };
+    },
+    [rowIndexMap, columnIndexMap]
+  );
+  const isCellInSelection = (0, import_react15.useCallback)(
+    (rowId, columnId) => {
+      const normalizedRange = getNormalizedRange(selectedCellRange);
+      if (!normalizedRange) return false;
+      const rowIdx = rowIndexMap.get(rowId);
+      const colIdx = columnIndexMap.get(columnId);
+      if (rowIdx === void 0 || colIdx === void 0) return false;
+      return rowIdx >= normalizedRange.startRowIdx && rowIdx <= normalizedRange.endRowIdx && colIdx >= normalizedRange.startColIdx && colIdx <= normalizedRange.endColIdx;
+    },
+    [selectedCellRange, rowIndexMap, columnIndexMap, getNormalizedRange]
+  );
+  const getCellSelectionEdge = (0, import_react15.useCallback)(
+    (rowId, columnId) => {
+      if (!isCellInSelection(rowId, columnId)) return void 0;
+      const normalizedRange = getNormalizedRange(selectedCellRange);
+      if (!normalizedRange) return void 0;
+      const rowIdx = rowIndexMap.get(rowId);
+      const colIdx = columnIndexMap.get(columnId);
+      if (rowIdx === void 0 || colIdx === void 0) return void 0;
+      return {
+        top: rowIdx === normalizedRange.startRowIdx,
+        bottom: rowIdx === normalizedRange.endRowIdx,
+        left: colIdx === normalizedRange.startColIdx,
+        right: colIdx === normalizedRange.endColIdx
+      };
+    },
+    [isCellInSelection, selectedCellRange, rowIndexMap, columnIndexMap, getNormalizedRange]
+  );
+  const getSelectedCells = (0, import_react15.useCallback)(() => {
+    const normalizedRange = getNormalizedRange(selectedCellRange);
+    if (!normalizedRange) {
+      return focusedCell ? [focusedCell] : [];
+    }
+    const cells = [];
+    for (let rowIdx = normalizedRange.startRowIdx; rowIdx <= normalizedRange.endRowIdx; rowIdx++) {
+      const row = data[rowIdx];
+      if (!row) continue;
+      const rowId = getRowId(row);
+      for (let colIdx = normalizedRange.startColIdx; colIdx <= normalizedRange.endColIdx; colIdx++) {
+        const column = columns[colIdx];
+        if (!column) continue;
+        cells.push({ rowId, columnId: column.id });
+      }
+    }
+    return cells;
+  }, [selectedCellRange, focusedCell, data, columns, getRowId, getNormalizedRange]);
+  const getSelectedCellValues = (0, import_react15.useCallback)(() => {
+    const cells = getSelectedCells();
+    return cells.map((cell) => {
+      const row = data.find((r) => getRowId(r) === cell.rowId);
+      const column = columns.find((c) => c.id === cell.columnId);
+      const value = row && column ? column.getValue ? column.getValue(row) : row[cell.columnId] : void 0;
+      return { position: cell, value };
+    });
+  }, [getSelectedCells, data, columns, getRowId]);
+  const handleCellClick = (0, import_react15.useCallback)(
+    (rowId, columnId, event) => {
+      event.stopPropagation();
+      const newCell = { rowId, columnId };
+      if (event.shiftKey && anchorCell.current) {
+        setSelectedCellRange({
+          start: anchorCell.current,
+          end: newCell
+        });
+        setFocusedCell(newCell);
+      } else {
+        anchorCell.current = newCell;
+        setFocusedCell(newCell);
+        setSelectedCellRange(null);
+        const column = columns.find((c) => c.id === columnId);
+        if (column?.editable && enableCellEditing) {
+          setEditingCell(newCell);
+        }
+      }
+    },
+    [columns, enableCellEditing, setSelectedCellRange]
+  );
+  const handleCellMouseDown = (0, import_react15.useCallback)(
+    (rowId, columnId, event) => {
+      if (event.button !== 0) return;
+      const newCell = { rowId, columnId };
+      if (event.shiftKey && anchorCell.current) {
+        event.preventDefault();
+        setSelectedCellRange({
+          start: anchorCell.current,
+          end: newCell
+        });
+        setFocusedCell(newCell);
+        setEditingCell(null);
+      } else {
+        anchorCell.current = newCell;
+        setFocusedCell(newCell);
+        setSelectedCellRange(null);
+        const column = columns.find((c) => c.id === columnId);
+        if (column?.editable && enableCellEditing) {
+          setEditingCell(newCell);
+        } else {
+          setEditingCell(null);
+        }
+      }
+    },
+    [columns, enableCellEditing, setSelectedCellRange]
+  );
+  const handleCellMouseEnter = (0, import_react15.useCallback)((_rowId, _columnId) => {
+  }, []);
+  const handleMouseUp = (0, import_react15.useCallback)(() => {
+    setIsDragging(false);
+  }, []);
+  const clearSelection = (0, import_react15.useCallback)(() => {
+    setFocusedCell(null);
+    setEditingCell(null);
+    setSelectedCellRange(null);
+    anchorCell.current = null;
+  }, [setSelectedCellRange]);
+  const navigateCell = (0, import_react15.useCallback)(
+    (direction, extendSelection = false) => {
+      const currentCell = focusedCell;
+      if (!currentCell) return;
+      const currentRowIdx = rowIndexMap.get(currentCell.rowId);
+      const currentColIdx = columnIndexMap.get(currentCell.columnId);
+      if (currentRowIdx === void 0 || currentColIdx === void 0) return;
+      let newRowIdx = currentRowIdx;
+      let newColIdx = currentColIdx;
+      switch (direction) {
+        case "up":
+          newRowIdx = Math.max(0, currentRowIdx - 1);
+          break;
+        case "down":
+          newRowIdx = Math.min(data.length - 1, currentRowIdx + 1);
+          break;
+        case "left":
+          newColIdx = Math.max(0, currentColIdx - 1);
+          break;
+        case "right":
+          newColIdx = Math.min(columns.length - 1, currentColIdx + 1);
+          break;
+      }
+      const newRow = data[newRowIdx];
+      const newColumn = columns[newColIdx];
+      if (!newRow || !newColumn) return;
+      const newCell = {
+        rowId: getRowId(newRow),
+        columnId: newColumn.id
+      };
+      setFocusedCell(newCell);
+      setEditingCell(null);
+      if (extendSelection) {
+        if (!anchorCell.current) {
+          anchorCell.current = currentCell;
+        }
+        setSelectedCellRange({
+          start: anchorCell.current,
+          end: newCell
+        });
+      } else {
+        anchorCell.current = newCell;
+        setSelectedCellRange(null);
+      }
+    },
+    [focusedCell, data, columns, getRowId, rowIndexMap, columnIndexMap, setSelectedCellRange]
+  );
+  const handleTabNavigation = (0, import_react15.useCallback)(
+    (shiftKey) => {
+      const currentCell = focusedCell;
+      if (!currentCell) return;
+      const currentRowIdx = rowIndexMap.get(currentCell.rowId);
+      const currentColIdx = columnIndexMap.get(currentCell.columnId);
+      if (currentRowIdx === void 0 || currentColIdx === void 0) return;
+      let newRowIdx = currentRowIdx;
+      let newColIdx = currentColIdx;
+      if (shiftKey) {
+        newColIdx--;
+        if (newColIdx < 0) {
+          newColIdx = columns.length - 1;
+          newRowIdx--;
+        }
+      } else {
+        newColIdx++;
+        if (newColIdx >= columns.length) {
+          newColIdx = 0;
+          newRowIdx++;
+        }
+      }
+      if (newRowIdx < 0) {
+        newRowIdx = data.length - 1;
+      } else if (newRowIdx >= data.length) {
+        newRowIdx = 0;
+      }
+      const newRow = data[newRowIdx];
+      const newColumn = columns[newColIdx];
+      if (!newRow || !newColumn) return;
+      const newCell = {
+        rowId: getRowId(newRow),
+        columnId: newColumn.id
+      };
+      setFocusedCell(newCell);
+      setEditingCell(null);
+      setSelectedCellRange(null);
+      anchorCell.current = newCell;
+    },
+    [focusedCell, data, columns, getRowId, rowIndexMap, columnIndexMap, setSelectedCellRange]
+  );
+  const enterEditMode = (0, import_react15.useCallback)(() => {
+    if (!focusedCell || !enableCellEditing) return;
+    const column = columns.find((c) => c.id === focusedCell.columnId);
+    if (column?.editable) {
+      setEditingCell(focusedCell);
+    }
+  }, [focusedCell, columns, enableCellEditing]);
+  const exitEditMode = (0, import_react15.useCallback)(() => {
+    setEditingCell(null);
+  }, []);
+  const copySelectedCells = (0, import_react15.useCallback)(() => {
+    const normalizedRange = getNormalizedRange(selectedCellRange);
+    if (!normalizedRange && !focusedCell) return;
+    const startRowIdx = normalizedRange?.startRowIdx ?? rowIndexMap.get(focusedCell.rowId) ?? 0;
+    const endRowIdx = normalizedRange?.endRowIdx ?? startRowIdx;
+    const startColIdx = normalizedRange?.startColIdx ?? columnIndexMap.get(focusedCell.columnId) ?? 0;
+    const endColIdx = normalizedRange?.endColIdx ?? startColIdx;
+    const values = [];
+    const textRows = [];
+    for (let rowIdx = startRowIdx; rowIdx <= endRowIdx; rowIdx++) {
+      const row = data[rowIdx];
+      if (!row) continue;
+      const rowValues = [];
+      const textCells = [];
+      for (let colIdx = startColIdx; colIdx <= endColIdx; colIdx++) {
+        const column = columns[colIdx];
+        if (!column) continue;
+        const value = column.getValue ? column.getValue(row) : row[column.id];
+        rowValues.push(value);
+        textCells.push(value != null ? String(value) : "");
+      }
+      values.push(rowValues);
+      textRows.push(textCells.join("	"));
+    }
+    const startRow = data[startRowIdx];
+    const startColumn = columns[startColIdx];
+    if (startRow && startColumn) {
+      setClipboardData({
+        values,
+        startCell: {
+          rowId: getRowId(startRow),
+          columnId: startColumn.id
+        }
+      });
+    }
+    const text = textRows.join("\n");
+    navigator.clipboard.writeText(text).catch(() => {
+      console.warn("Could not copy to system clipboard");
+    });
+  }, [
+    selectedCellRange,
+    focusedCell,
+    data,
+    columns,
+    getRowId,
+    getNormalizedRange,
+    rowIndexMap,
+    columnIndexMap
+  ]);
+  const parseClipboardText = (0, import_react15.useCallback)((text) => {
+    const lines = text.split(/\r?\n/);
+    if (lines.length > 0 && lines[lines.length - 1] === "") {
+      lines.pop();
+    }
+    return lines.map((line) => line.split("	"));
+  }, []);
+  const createEditsFromValues = (0, import_react15.useCallback)(
+    (values) => {
+      if (!focusedCell) return [];
+      const edits = [];
+      const normalizedRange = getNormalizedRange(selectedCellRange);
+      let startRowIdx;
+      let endRowIdx;
+      let startColIdx;
+      let endColIdx;
+      if (normalizedRange) {
+        startRowIdx = normalizedRange.startRowIdx;
+        endRowIdx = normalizedRange.endRowIdx;
+        startColIdx = normalizedRange.startColIdx;
+        endColIdx = normalizedRange.endColIdx;
+      } else {
+        const focusRowIdx = rowIndexMap.get(focusedCell.rowId);
+        const focusColIdx = columnIndexMap.get(focusedCell.columnId);
+        if (focusRowIdx === void 0 || focusColIdx === void 0) return [];
+        startRowIdx = focusRowIdx;
+        endRowIdx = Math.min(focusRowIdx + values.length - 1, data.length - 1);
+        startColIdx = focusColIdx;
+        endColIdx = Math.min(
+          focusColIdx + (values[0]?.length || 1) - 1,
+          columns.length - 1
+        );
+      }
+      for (let rowIdx = startRowIdx; rowIdx <= endRowIdx; rowIdx++) {
+        const row = data[rowIdx];
+        if (!row) continue;
+        const rowId = getRowId(row);
+        const valueRowIdx = (rowIdx - startRowIdx) % values.length;
+        for (let colIdx = startColIdx; colIdx <= endColIdx; colIdx++) {
+          const column = columns[colIdx];
+          if (!column || !column.editable) continue;
+          const valueColIdx = (colIdx - startColIdx) % (values[valueRowIdx]?.length || 1);
+          let cellValue = values[valueRowIdx]?.[valueColIdx];
+          if (column.type === "number" && typeof cellValue === "string") {
+            const parsed = parseFloat(cellValue);
+            cellValue = isNaN(parsed) ? cellValue : parsed;
+          }
+          edits.push({
+            rowId,
+            columnId: column.id,
+            value: cellValue
+          });
+        }
+      }
+      return edits;
+    },
+    [
+      focusedCell,
+      selectedCellRange,
+      data,
+      columns,
+      getRowId,
+      rowIndexMap,
+      columnIndexMap,
+      getNormalizedRange
+    ]
+  );
+  const pasteClipboard = (0, import_react15.useCallback)(() => {
+    if (!clipboardData?.values) return [];
+    return createEditsFromValues(clipboardData.values);
+  }, [clipboardData, createEditsFromValues]);
+  const pasteFromSystemClipboard = (0, import_react15.useCallback)(async () => {
+    if (!focusedCell) return [];
+    try {
+      const text = await navigator.clipboard.readText();
+      if (!text) {
+        return pasteClipboard();
+      }
+      const values = parseClipboardText(text);
+      return createEditsFromValues(values);
+    } catch {
+      return pasteClipboard();
+    }
+  }, [focusedCell, pasteClipboard, parseClipboardText, createEditsFromValues]);
+  return {
+    focusedCell,
+    setFocusedCell,
+    editingCell,
+    setEditingCell,
+    selectedCellRange,
+    setSelectedCellRange,
+    isDragging,
+    handleCellClick,
+    handleCellMouseDown,
+    handleCellMouseEnter,
+    handleMouseUp,
+    isCellInSelection,
+    getCellSelectionEdge,
+    getSelectedCells,
+    getSelectedCellValues,
+    clearSelection,
+    navigateCell,
+    handleTabNavigation,
+    enterEditMode,
+    exitEditMode,
+    clipboardData,
+    copySelectedCells,
+    pasteClipboard,
+    pasteFromSystemClipboard
+  };
+}
+
 // src/components/Spreadsheet.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function Spreadsheet({
@@ -2873,7 +3334,7 @@ function Spreadsheet({
   columns,
   columnGroups,
   getRowId,
-  onCellEdit,
+  onCellsEdit,
   onSelectionChange,
   onSortChange,
   onFilterChange,
@@ -2995,17 +3456,15 @@ function Spreadsheet({
     enabled: enableUndoRedo,
     autoSave
   });
-  const [selectedRows, setSelectedRows] = (0, import_react15.useState)(/* @__PURE__ */ new Set());
-  const [lastSelectedRow, setLastSelectedRow] = (0, import_react15.useState)(null);
-  const [focusedCell, setFocusedCell] = (0, import_react15.useState)(null);
-  const [editingCell, setEditingCell] = (0, import_react15.useState)(null);
-  const [hoveredRow, setHoveredRow] = (0, import_react15.useState)(null);
-  const [internalCurrentPage, setInternalCurrentPage] = (0, import_react15.useState)(1);
-  const [internalPageSize, setInternalPageSize] = (0, import_react15.useState)(defaultPageSize);
-  const [zoom, setZoom] = (0, import_react15.useState)(defaultZoom);
+  const [selectedRows, setSelectedRows] = (0, import_react16.useState)(/* @__PURE__ */ new Set());
+  const [lastSelectedRow, setLastSelectedRow] = (0, import_react16.useState)(null);
+  const [hoveredRow, setHoveredRow] = (0, import_react16.useState)(null);
+  const [internalCurrentPage, setInternalCurrentPage] = (0, import_react16.useState)(1);
+  const [internalPageSize, setInternalPageSize] = (0, import_react16.useState)(defaultPageSize);
+  const [zoom, setZoom] = (0, import_react16.useState)(defaultZoom);
   const currentPage = controlledCurrentPage ?? internalCurrentPage;
   const pageSize = controlledPageSize ?? internalPageSize;
-  const handlePageChange = (0, import_react15.useCallback)(
+  const handlePageChange = (0, import_react16.useCallback)(
     (newPage) => {
       if (controlledCurrentPage === void 0) {
         setInternalCurrentPage(newPage);
@@ -3014,7 +3473,7 @@ function Spreadsheet({
     },
     [controlledCurrentPage, onPageChange, pageSize]
   );
-  const handlePageSizeChange = (0, import_react15.useCallback)(
+  const handlePageSizeChange = (0, import_react16.useCallback)(
     (newPageSize) => {
       if (controlledPageSize === void 0) {
         setInternalPageSize(newPageSize);
@@ -3026,8 +3485,8 @@ function Spreadsheet({
     },
     [controlledPageSize, controlledCurrentPage, onPageChange]
   );
-  const [showSettingsModal, setShowSettingsModal] = (0, import_react15.useState)(false);
-  const [spreadsheetSettings, setSpreadsheetSettings] = (0, import_react15.useState)({
+  const [showSettingsModal, setShowSettingsModal] = (0, import_react16.useState)(false);
+  const [spreadsheetSettings, setSpreadsheetSettings] = (0, import_react16.useState)({
     defaultPinnedColumns: [],
     defaultSort: null,
     defaultPageSize,
@@ -3038,13 +3497,74 @@ function Spreadsheet({
     pinRowIndex: false,
     rowIndexHighlightColor: void 0
   });
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setSpreadsheetSettings((prev) => ({
       ...prev,
       defaultSort: sortConfig
     }));
   }, [sortConfig]);
-  const handleEscapeCallback = (0, import_react15.useCallback)(() => {
+  const applyUndo = (0, import_react16.useCallback)(() => {
+    const entry = popUndoEntry();
+    if (!entry || !onCellsEdit) return;
+    if (entry.type === "cell-edit") {
+      const { edit } = entry;
+      onCellsEdit([
+        { rowId: edit.rowId, columnId: edit.columnId, value: edit.previousValue }
+      ]);
+    } else if (entry.type === "batch-edit") {
+      const edits = entry.edits.map((edit) => ({
+        rowId: edit.rowId,
+        columnId: edit.columnId,
+        value: edit.previousValue
+      }));
+      onCellsEdit(edits);
+    }
+    markAsChanged();
+  }, [popUndoEntry, onCellsEdit, markAsChanged]);
+  const applyRedo = (0, import_react16.useCallback)(() => {
+    const entry = popRedoEntry();
+    if (!entry || !onCellsEdit) return;
+    if (entry.type === "cell-edit") {
+      const { edit } = entry;
+      onCellsEdit([{ rowId: edit.rowId, columnId: edit.columnId, value: edit.nextValue }]);
+    } else if (entry.type === "batch-edit") {
+      const edits = entry.edits.map((edit) => ({
+        rowId: edit.rowId,
+        columnId: edit.columnId,
+        value: edit.nextValue
+      }));
+      onCellsEdit(edits);
+    }
+    markAsChanged();
+  }, [popRedoEntry, onCellsEdit, markAsChanged]);
+  const paginatedData = (0, import_react16.useMemo)(() => {
+    if (serverSide) {
+      return filteredData;
+    }
+    const startIndex = (currentPage - 1) * pageSize;
+    return filteredData.slice(startIndex, startIndex + pageSize);
+  }, [filteredData, currentPage, pageSize, serverSide]);
+  const {
+    focusedCell,
+    setFocusedCell,
+    editingCell,
+    setEditingCell,
+    handleCellMouseDown,
+    isCellInSelection,
+    getCellSelectionEdge,
+    clearSelection,
+    navigateCell,
+    handleTabNavigation,
+    enterEditMode,
+    copySelectedCells,
+    pasteFromSystemClipboard
+  } = useSpreadsheetSelection({
+    data: paginatedData,
+    columns: visibleColumns,
+    getRowId,
+    enableCellEditing
+  });
+  const handleEscapeCallback = (0, import_react16.useCallback)(() => {
     if (commentModalCell !== null) {
       setCommentModalCell(null);
     } else if (viewCommentsCell !== null) {
@@ -3058,8 +3578,7 @@ function Spreadsheet({
     } else {
       setSelectedRows(/* @__PURE__ */ new Set());
       setLastSelectedRow(null);
-      setFocusedCell(null);
-      setEditingCell(null);
+      clearSelection();
     }
   }, [
     commentModalCell,
@@ -3071,105 +3590,88 @@ function Spreadsheet({
     highlightPickerColumn,
     setHighlightPickerColumn,
     highlightPickerCell,
-    setHighlightPickerCell
+    setHighlightPickerCell,
+    clearSelection
   ]);
-  const applyUndo = (0, import_react15.useCallback)(() => {
-    const entry = popUndoEntry();
-    if (!entry || !onCellEdit) return;
-    if (entry.type === "cell-edit") {
-      onCellEdit(entry.rowId, entry.columnId, entry.previousValue);
-      markAsChanged();
-    }
-  }, [popUndoEntry, onCellEdit, markAsChanged]);
-  const applyRedo = (0, import_react15.useCallback)(() => {
-    const entry = popRedoEntry();
-    if (!entry || !onCellEdit) return;
-    if (entry.type === "cell-edit") {
-      onCellEdit(entry.rowId, entry.columnId, entry.nextValue);
-      markAsChanged();
-    }
-  }, [popRedoEntry, onCellEdit, markAsChanged]);
-  const paginatedData = (0, import_react15.useMemo)(() => {
-    if (serverSide) {
-      return filteredData;
-    }
-    const startIndex = (currentPage - 1) * pageSize;
-    return filteredData.slice(startIndex, startIndex + pageSize);
-  }, [filteredData, currentPage, pageSize, serverSide]);
-  const handleNavigate = (0, import_react15.useCallback)(
-    (direction) => {
-      if (!focusedCell) return;
-      const currentRowIndex = paginatedData.findIndex(
-        (r) => getRowId(r) === focusedCell.rowId
-      );
-      const currentColIndex = visibleColumns.findIndex((c) => c.id === focusedCell.columnId);
-      if (currentRowIndex === -1 || currentColIndex === -1) return;
-      let newRowIndex = currentRowIndex;
-      let newColIndex = currentColIndex;
-      switch (direction) {
-        case "up":
-          newRowIndex = Math.max(0, currentRowIndex - 1);
-          break;
-        case "down":
-          newRowIndex = Math.min(paginatedData.length - 1, currentRowIndex + 1);
-          break;
-        case "left":
-          newColIndex = Math.max(0, currentColIndex - 1);
-          break;
-        case "right":
-          newColIndex = Math.min(visibleColumns.length - 1, currentColIndex + 1);
-          break;
+  const handleNavigate = (0, import_react16.useCallback)(
+    (direction, event) => {
+      const extendSelection = event?.shiftKey ?? false;
+      navigateCell(direction, extendSelection);
+      if (focusedCell) {
+        requestAnimationFrame(() => {
+          const cellElement = tableRef.current?.querySelector(
+            `[data-cell-id="${focusedCell.rowId}-${focusedCell.columnId}"]`
+          );
+          if (cellElement) {
+            cellElement.scrollIntoView({
+              behavior: "smooth",
+              block: "nearest",
+              inline: "nearest"
+            });
+          }
+        });
       }
-      const newRowId = getRowId(paginatedData[newRowIndex]);
-      const newColumnId = visibleColumns[newColIndex].id;
-      setFocusedCell({ rowId: newRowId, columnId: newColumnId });
-      setEditingCell(null);
-      requestAnimationFrame(() => {
-        const cellElement = tableRef.current?.querySelector(
-          `[data-cell-id="${newRowId}-${newColumnId}"]`
-        );
-        if (cellElement) {
-          cellElement.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-            inline: "nearest"
-          });
-        }
-      });
     },
-    [focusedCell, paginatedData, visibleColumns, getRowId]
+    [navigateCell, focusedCell]
   );
-  const handleEnterEditMode = (0, import_react15.useCallback)(() => {
-    if (!focusedCell) return;
-    const column = (columns || []).find((c) => c.id === focusedCell.columnId);
-    if (column?.editable && enableCellEditing) {
-      const row = (data || []).find((r) => getRowId(r) === focusedCell.rowId);
-      if (row) {
-        setEditingCell({ rowId: focusedCell.rowId, columnId: focusedCell.columnId });
+  const handleEnterEditMode = (0, import_react16.useCallback)(() => {
+    enterEditMode();
+  }, [enterEditMode]);
+  const handlePaste = (0, import_react16.useCallback)(async () => {
+    const edits = await pasteFromSystemClipboard();
+    if (edits.length > 0 && onCellsEdit) {
+      if (enableUndoRedo) {
+        const undoEdits = edits.map((edit) => {
+          const row = data.find((r) => getRowId(r) === edit.rowId);
+          const previousValue = row ? row[edit.columnId] : void 0;
+          return {
+            rowId: edit.rowId,
+            columnId: edit.columnId,
+            previousValue,
+            nextValue: edit.value
+          };
+        });
+        pushToUndoStack({
+          type: "batch-edit",
+          edits: undoEdits
+        });
       }
+      onCellsEdit(edits);
+      markAsChanged();
     }
-  }, [focusedCell, columns, data, getRowId, enableCellEditing]);
+  }, [
+    pasteFromSystemClipboard,
+    onCellsEdit,
+    data,
+    getRowId,
+    enableUndoRedo,
+    pushToUndoStack,
+    markAsChanged
+  ]);
   const { showKeyboardShortcuts, setShowKeyboardShortcuts, shortcuts } = useSpreadsheetKeyboardShortcuts({
     onUndo: applyUndo,
     onRedo: applyRedo,
     onEscape: handleEscapeCallback,
     onNavigate: handleNavigate,
     onEnterEditMode: handleEnterEditMode,
+    onTabNavigation: handleTabNavigation,
+    onCopy: copySelectedCells,
+    onPaste: handlePaste,
     hasFocusedCell: focusedCell !== null,
     isEditing: editingCell !== null,
     enabled: true
   });
   const effectiveShowRowIndex = spreadsheetSettings.showRowIndex !== false;
   const rowIndexHighlightColor = getColumnHighlight(ROW_INDEX_COLUMN_ID);
-  const tableRef = (0, import_react15.useRef)(null);
+  const tableRef = (0, import_react16.useRef)(null);
   const effectiveTotalItems = serverSide ? totalItems ?? data.length : filteredData.length;
   const totalPages = Math.max(1, Math.ceil(effectiveTotalItems / pageSize));
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!serverSide && currentPage > totalPages) {
       setInternalCurrentPage(1);
     }
   }, [totalPages, currentPage, serverSide]);
-  const handleRowSelect = (0, import_react15.useCallback)(
+  const handleRowSelect = (0, import_react16.useCallback)(
     (rowId, event) => {
       if (!enableRowSelection) return;
       event.stopPropagation();
@@ -3217,21 +3719,14 @@ function Spreadsheet({
       onSelectionChange
     ]
   );
-  const handleCellClick = (0, import_react15.useCallback)(
+  const handleCellClick = (0, import_react16.useCallback)(
     (rowId, columnId, event) => {
       event.stopPropagation();
-      setFocusedCell({ rowId, columnId });
-      const column = (columns || []).find((c) => c.id === columnId);
-      if (column?.editable && enableCellEditing) {
-        const row = (data || []).find((r) => getRowId(r) === rowId);
-        if (row) {
-          setEditingCell({ rowId, columnId });
-        }
-      }
+      handleCellMouseDown(rowId, columnId, event);
     },
-    [columns, data, getRowId, enableCellEditing]
+    [handleCellMouseDown]
   );
-  const handleCellChange = (0, import_react15.useCallback)(
+  const handleCellChange = (0, import_react16.useCallback)(
     (rowId, columnId, newValue) => {
       const row = data.find((r) => getRowId(r) === rowId);
       const previousValue = row ? row[columnId] : void 0;
@@ -3241,42 +3736,44 @@ function Spreadsheet({
       if (row && enableUndoRedo) {
         pushToUndoStack({
           type: "cell-edit",
-          rowId,
-          columnId,
-          previousValue,
-          nextValue: newValue
+          edit: {
+            rowId,
+            columnId,
+            previousValue,
+            nextValue: newValue
+          }
         });
       }
-      onCellEdit?.(rowId, columnId, newValue);
+      onCellsEdit?.([{ rowId, columnId, value: newValue }]);
       markAsChanged();
     },
-    [data, getRowId, enableUndoRedo, onCellEdit, pushToUndoStack, markAsChanged]
+    [data, getRowId, enableUndoRedo, onCellsEdit, pushToUndoStack, markAsChanged]
   );
-  const handleConfirmEdit = (0, import_react15.useCallback)(
+  const handleConfirmEdit = (0, import_react16.useCallback)(
     (finalValue) => {
       if (editingCell && finalValue !== void 0) {
         handleCellChange(editingCell.rowId, editingCell.columnId, finalValue);
         setEditingCell(null);
       }
     },
-    [editingCell, handleCellChange]
+    [editingCell, handleCellChange, setEditingCell]
   );
-  const handleCancelEdit = (0, import_react15.useCallback)(() => {
+  const handleCancelEdit = (0, import_react16.useCallback)(() => {
     setEditingCell(null);
-  }, []);
-  const handleRowClone = (0, import_react15.useCallback)(
+  }, [setEditingCell]);
+  const handleRowClone = (0, import_react16.useCallback)(
     (row, rowId) => {
       onRowClone?.(row, rowId);
     },
     [onRowClone]
   );
-  const handleRowDelete = (0, import_react15.useCallback)(
+  const handleRowDelete = (0, import_react16.useCallback)(
     (row, rowId) => {
       onRowDelete?.(row, rowId);
     },
     [onRowDelete]
   );
-  const handleRowIndexHighlightClick = (0, import_react15.useCallback)(() => {
+  const handleRowIndexHighlightClick = (0, import_react16.useCallback)(() => {
     setHighlightPickerColumn(ROW_INDEX_COLUMN_ID);
   }, [setHighlightPickerColumn]);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex flex-col h-full bg-white", className), children: [
@@ -3318,7 +3815,7 @@ function Spreadsheet({
           transformOrigin: "top left",
           width: `${100 / (zoom / 100)}%`
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { className: "w-full border-separate border-spacing-0 text-xs", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { className: "w-full border-separate border-spacing-0 text-xs select-none", children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("thead", { children: [
             columnGroups && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { children: [
               effectiveShowRowIndex && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -3593,6 +4090,14 @@ function Spreadsheet({
                     const value = column.getValue ? column.getValue(row) : row[column.id];
                     const isEditing = editingCell?.rowId === rowId && editingCell?.columnId === column.id;
                     const isFocused = focusedCell?.rowId === rowId && focusedCell?.columnId === column.id;
+                    const isInSelection = isCellInSelection(
+                      rowId,
+                      column.id
+                    );
+                    const selectionEdge = getCellSelectionEdge(
+                      rowId,
+                      column.id
+                    );
                     const cellOrRowOrColumnHighlight = getCellHighlight(rowId, column.id) || rowHighlight?.color || getColumnHighlight(column.id);
                     const isColPinned = isColumnPinned(column.id);
                     const colPinSide = getColumnPinSide(column.id);
@@ -3607,11 +4112,12 @@ function Spreadsheet({
                         isEditable: column.editable && enableCellEditing,
                         isEditing,
                         isFocused,
+                        isInSelection,
+                        selectionEdge,
                         isRowSelected,
                         isRowHovered,
                         highlightColor: cellOrRowOrColumnHighlight,
                         compactMode,
-                        hasSelectedRows: selectedRows.size > 1,
                         isPinned: isColPinned,
                         pinSide: colPinSide,
                         leftOffset: getColumnLeftOffset(column.id),