@easyv/biz-components 2.1.5 → 2.1.6

package/dist/lib/components/easyv-reactgrid-plus/easyv-react-grid-plus.es.js

@@ -0,0 +1,1063 @@
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { useRef, useState, useCallback, useMemo, useEffect } from "react";
+import { useReactTable, flexRender } from "../../node_modules/.pnpm/@tanstack_react-table@8.21.3_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/@tanstack/react-table/build/lib/index.es.js";
+import { useVirtualizer } from "../../node_modules/.pnpm/@tanstack_react-virtual@3.13.23_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/@tanstack/react-virtual/dist/esm/index.es.js";
+import classNames from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.es.js";
+import { produce } from "../../node_modules/.pnpm/immer@10.1.1/node_modules/immer/dist/immer.es.js";
+import { EasyvReactGridPlusContextMenu } from "./easyv-react-grid-plus-context-menu.es.js";
+import { EasyvReactGridPlusEditableCell } from "./easyv-react-grid-plus-editable-cell.es.js";
+import { useGridSelectionAutoScroll } from "./easyv-react-grid-plus-selection.hook.es.js";
+import styles from "./easyv-react-grid.module.less.es.js";
+import { getColumnLabel, calculateFillPreviewRange, parseClipboardText } from "./utils.es.js";
+import { getCoreRowModel } from "../../node_modules/.pnpm/@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.es.js";
+const EasyvReactGridPlus = (props) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    wrapClassName = "",
+    wrapStyle,
+    data = [],
+    onDataChange,
+    expandMinGrid = true,
+    minRows = 50,
+    minCols = 26,
+    stickyTopRow = true,
+    stickyLeftColumn = true,
+    defaultRowHeight = 32
+  } = props;
+  const parentRef = useRef(null);
+  const skipSelectionClickRef = useRef(false);
+  const [columnWidths, setColumnWidths] = useState({});
+  const [rowHeights, setRowHeights] = useState({});
+  const [editingCellKey, setEditingCellKey] = useState(null);
+  const [selectedCellKeys, setSelectedCellKeys] = useState(/* @__PURE__ */ new Set());
+  const [selectedRowIndexes, setSelectedRowIndexes] = useState(/* @__PURE__ */ new Set());
+  const [selectedColIndexes, setSelectedColIndexes] = useState(/* @__PURE__ */ new Set());
+  const [isSelectingRange, setIsSelectingRange] = useState(false);
+  const [selectionStart, setSelectionStart] = useState(null);
+  const [isFillDragging, setIsFillDragging] = useState(false);
+  const [fillSourceRange, setFillSourceRange] = useState(null);
+  const [fillPreviewRange, setFillPreviewRange] = useState(null);
+  const [resizingColumn, setResizingColumn] = useState(null);
+  const [resizingRow, setResizingRow] = useState(null);
+  const [contextMenuState, setContextMenuState] = useState({
+    visible: false,
+    x: 0,
+    y: 0,
+    target: null
+  });
+  const [clipboardCache, setClipboardCache] = useState("");
+  const [insertRowCount, setInsertRowCount] = useState(1);
+  const [insertColCount, setInsertColCount] = useState(1);
+  const [isGridActive, setIsGridActive] = useState(false);
+  const [editingInputSeed, setEditingInputSeed] = useState(
+    null
+  );
+  const handleCopyRef = useRef(() => {
+  });
+  const handlePasteRef = useRef(() => {
+  });
+  const colsCount = ((_a = data[0]) == null ? void 0 : _a.length) || 0;
+  const rowsCount = data.length;
+  const displayRowsCount = expandMinGrid ? Math.max(rowsCount, minRows) : rowsCount;
+  const displayColsCount = expandMinGrid ? Math.max(colsCount, minCols) : colsCount;
+  const getCellKey = useCallback((row, col) => `${row}:${col}`, []);
+  const selectSingleCell = (row, col) => {
+    setSelectedCellKeys(/* @__PURE__ */ new Set([getCellKey(row, col)]));
+    setSelectedRowIndexes(/* @__PURE__ */ new Set());
+    setSelectedColIndexes(/* @__PURE__ */ new Set());
+  };
+  const selectRangeCells = useCallback(
+    (startRow, startCol, endRow, endCol) => {
+      const rowMin = Math.min(startRow, endRow);
+      const rowMax = Math.max(startRow, endRow);
+      const colMin = Math.min(startCol, endCol);
+      const colMax = Math.max(startCol, endCol);
+      const next = /* @__PURE__ */ new Set();
+      for (let r = rowMin; r <= rowMax; r++) {
+        for (let c = colMin; c <= colMax; c++) {
+          next.add(getCellKey(r, c));
+        }
+      }
+      setSelectedCellKeys(next);
+      setSelectedRowIndexes(/* @__PURE__ */ new Set());
+      setSelectedColIndexes(/* @__PURE__ */ new Set());
+    },
+    [getCellKey]
+  );
+  const setSelectionByRange = useCallback(
+    (range) => {
+      const next = /* @__PURE__ */ new Set();
+      for (let r = range.minRow; r <= range.maxRow; r++) {
+        for (let c = range.minCol; c <= range.maxCol; c++) {
+          next.add(getCellKey(r, c));
+        }
+      }
+      setSelectedCellKeys(next);
+      setSelectedRowIndexes(/* @__PURE__ */ new Set());
+      setSelectedColIndexes(/* @__PURE__ */ new Set());
+    },
+    [getCellKey]
+  );
+  const { setSelectionPointer } = useGridSelectionAutoScroll({
+    parentRef,
+    isSelectingRange,
+    selectionStart,
+    selectRangeCells,
+    stopSelectingRange: () => {
+      setIsSelectingRange(false);
+      setSelectionStart(null);
+    }
+  });
+  const selectRow = (rowIndex) => {
+    setSelectedRowIndexes(/* @__PURE__ */ new Set([rowIndex]));
+    setSelectedColIndexes(/* @__PURE__ */ new Set());
+    setSelectedCellKeys(/* @__PURE__ */ new Set());
+  };
+  const selectColumn = (colIndex) => {
+    setSelectedColIndexes(/* @__PURE__ */ new Set([colIndex]));
+    setSelectedRowIndexes(/* @__PURE__ */ new Set());
+    setSelectedCellKeys(/* @__PURE__ */ new Set());
+  };
+  const closeContextMenu = () => {
+    setContextMenuState((prev) => ({ ...prev, visible: false }));
+  };
+  const openContextMenu = (event, target) => {
+    const menuWidth = 180;
+    const menuHeight = 260;
+    const adjustedX = event.clientX + menuWidth > window.innerWidth ? window.innerWidth - menuWidth - 8 : event.clientX;
+    const adjustedY = event.clientY + menuHeight > window.innerHeight ? window.innerHeight - menuHeight - 8 : event.clientY;
+    setContextMenuState({
+      visible: true,
+      x: Math.max(8, adjustedX),
+      y: Math.max(8, adjustedY),
+      target
+    });
+    setInsertRowCount(1);
+    setInsertColCount(1);
+  };
+  const tableData = useMemo(() => {
+    return Array.from({ length: displayRowsCount }).map((_, rowIndex) => {
+      const row = data[rowIndex] || [];
+      const rowData = { id: rowIndex };
+      for (let colIndex = 0; colIndex < displayColsCount; colIndex++) {
+        rowData[String(colIndex)] = row[colIndex] ?? "";
+      }
+      return rowData;
+    });
+  }, [data, displayColsCount, displayRowsCount]);
+  const columns = useMemo(() => {
+    const cols = [
+      {
+        id: "header-col",
+        header: "",
+        accessorKey: "id",
+        cell: (info) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "biz-text-[#c9cbd3] biz-w-full biz-h-full biz-flex biz-items-center biz-justify-center", children: Number(info.getValue()) + 1 }),
+        size: columnWidths["header-col"] ?? 75
+      }
+    ];
+    for (let i = 0; i < displayColsCount; i++) {
+      cols.push({
+        id: String(i),
+        header: getColumnLabel(i),
+        accessorKey: String(i),
+        cell: (info) => {
+          const cellKey = `${info.row.id}:${String(i)}`;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            EasyvReactGridPlusEditableCell,
+            {
+              value: editingCellKey === cellKey && (editingInputSeed == null ? void 0 : editingInputSeed.key) === cellKey ? editingInputSeed.value : info.getValue(),
+              row: info.row.index,
+              column: i,
+              isEditing: editingCellKey === cellKey,
+              onRequestEdit: () => {
+                setEditingInputSeed(null);
+                setEditingCellKey(cellKey);
+              },
+              onFinishEdit: () => {
+                setEditingInputSeed(null);
+                setEditingCellKey((prev) => prev === cellKey ? null : prev);
+              },
+              updateData: (row, col, value) => {
+                if (!onDataChange) return;
+                const newData = produce(data, (draft) => {
+                  while (draft.length <= row) {
+                    draft.push(new Array(displayColsCount).fill(""));
+                  }
+                  while (draft[row].length <= col) {
+                    draft[row].push("");
+                  }
+                  draft[row][col] = value;
+                });
+                onDataChange(newData);
+              }
+            }
+          );
+        },
+        size: columnWidths[String(i)] ?? 100
+      });
+    }
+    return cols;
+  }, [columnWidths, data, displayColsCount, editingCellKey, editingInputSeed, onDataChange]);
+  const table = useReactTable({
+    data: tableData,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  });
+  const { rows } = table.getRowModel();
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: (index) => {
+      var _a2;
+      return rowHeights[((_a2 = rows[index]) == null ? void 0 : _a2.id) ?? ""] ?? defaultRowHeight;
+    },
+    overscan: 10,
+    getItemKey: (index) => {
+      var _a2;
+      return ((_a2 = rows[index]) == null ? void 0 : _a2.id) ?? index;
+    },
+    measureElement: (element) => element.getBoundingClientRect().height
+  });
+  useEffect(() => {
+    rowVirtualizer.measure();
+  }, [rowHeights, rowVirtualizer]);
+  useEffect(() => {
+    if (!resizingColumn) return;
+    const onMouseMove = (event) => {
+      const delta = event.clientX - resizingColumn.startX;
+      const nextWidth = Math.max(60, resizingColumn.startWidth + delta);
+      setColumnWidths((prev) => ({
+        ...prev,
+        [resizingColumn.columnId]: nextWidth
+      }));
+    };
+    const onMouseUp = () => {
+      setResizingColumn(null);
+    };
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [resizingColumn]);
+  useEffect(() => {
+    if (!resizingRow) return;
+    const onMouseMove = (event) => {
+      const delta = event.clientY - resizingRow.startY;
+      const nextHeight = Math.max(24, resizingRow.startHeight + delta);
+      setRowHeights((prev) => ({
+        ...prev,
+        [resizingRow.rowId]: nextHeight
+      }));
+    };
+    const onMouseUp = () => {
+      setResizingRow(null);
+    };
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [resizingRow]);
+  useEffect(() => {
+    if (!contextMenuState.visible) return;
+    const onPointerDown = () => {
+      closeContextMenu();
+    };
+    window.addEventListener("mousedown", onPointerDown);
+    window.addEventListener("scroll", onPointerDown, true);
+    return () => {
+      window.removeEventListener("mousedown", onPointerDown);
+      window.removeEventListener("scroll", onPointerDown, true);
+    };
+  }, [contextMenuState.visible]);
+  useEffect(() => {
+    const onPointerDown = (event) => {
+      if (!parentRef.current) return;
+      setIsGridActive(parentRef.current.contains(event.target));
+    };
+    window.addEventListener("mousedown", onPointerDown);
+    return () => {
+      window.removeEventListener("mousedown", onPointerDown);
+    };
+  }, []);
+  useEffect(() => {
+    if (!isFillDragging || !fillSourceRange || !fillPreviewRange) return;
+    const onMouseUp = () => {
+      if (onDataChange) {
+        const sourceHeight = fillSourceRange.maxRow - fillSourceRange.minRow + 1;
+        const sourceWidth = fillSourceRange.maxCol - fillSourceRange.minCol + 1;
+        const newData = produce(data, (draft) => {
+          var _a2;
+          for (let r = fillPreviewRange.minRow; r <= fillPreviewRange.maxRow; r++) {
+            for (let c = fillPreviewRange.minCol; c <= fillPreviewRange.maxCol; c++) {
+              const isInSource = r >= fillSourceRange.minRow && r <= fillSourceRange.maxRow && c >= fillSourceRange.minCol && c <= fillSourceRange.maxCol;
+              if (isInSource) continue;
+              const sourceRow = fillSourceRange.minRow + ((r - fillSourceRange.minRow) % sourceHeight + sourceHeight) % sourceHeight;
+              const sourceCol = fillSourceRange.minCol + ((c - fillSourceRange.minCol) % sourceWidth + sourceWidth) % sourceWidth;
+              while (draft.length <= r) {
+                draft.push(new Array(displayColsCount).fill(""));
+              }
+              while (draft[r].length <= c) {
+                draft[r].push("");
+              }
+              draft[r][c] = ((_a2 = draft[sourceRow]) == null ? void 0 : _a2[sourceCol]) ?? "";
+            }
+          }
+        });
+        onDataChange(newData);
+      }
+      setSelectionByRange(fillPreviewRange);
+      setIsFillDragging(false);
+      setFillSourceRange(null);
+      setFillPreviewRange(null);
+    };
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [
+    data,
+    displayColsCount,
+    fillPreviewRange,
+    fillSourceRange,
+    isFillDragging,
+    onDataChange,
+    setSelectionByRange
+  ]);
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  const tableWidth = useMemo(() => {
+    let width = columnWidths["header-col"] ?? 75;
+    for (let i = 0; i < displayColsCount; i++) {
+      width += columnWidths[String(i)] ?? 100;
+    }
+    return width;
+  }, [columnWidths, displayColsCount]);
+  const paddingTop = virtualRows.length > 0 ? ((_b = virtualRows[0]) == null ? void 0 : _b.start) || 0 : 0;
+  const paddingBottom = virtualRows.length > 0 ? totalSize - (((_c = virtualRows[virtualRows.length - 1]) == null ? void 0 : _c.end) || 0) : 0;
+  const selectedCellRange = useMemo(() => {
+    if (selectedCellKeys.size <= 1) return null;
+    let minRow = Number.POSITIVE_INFINITY;
+    let maxRow = Number.NEGATIVE_INFINITY;
+    let minCol = Number.POSITIVE_INFINITY;
+    let maxCol = Number.NEGATIVE_INFINITY;
+    selectedCellKeys.forEach((key) => {
+      const [rowText, colText] = key.split(":");
+      const row = Number(rowText);
+      const col = Number(colText);
+      if (Number.isNaN(row) || Number.isNaN(col)) return;
+      minRow = Math.min(minRow, row);
+      maxRow = Math.max(maxRow, row);
+      minCol = Math.min(minCol, col);
+      maxCol = Math.max(maxCol, col);
+    });
+    if (minRow === Number.POSITIVE_INFINITY || maxRow === Number.NEGATIVE_INFINITY || minCol === Number.POSITIVE_INFINITY || maxCol === Number.NEGATIVE_INFINITY) {
+      return null;
+    }
+    return { minRow, maxRow, minCol, maxCol };
+  }, [selectedCellKeys]);
+  const singleSelectedCellRange = useMemo(() => {
+    if (selectedCellKeys.size !== 1) return null;
+    const [firstKey] = Array.from(selectedCellKeys);
+    if (!firstKey) return null;
+    const [rowText, colText] = firstKey.split(":");
+    const row = Number(rowText);
+    const col = Number(colText);
+    if (Number.isNaN(row) || Number.isNaN(col)) return null;
+    return {
+      minRow: row,
+      maxRow: row,
+      minCol: col,
+      maxCol: col
+    };
+  }, [selectedCellKeys]);
+  const selectedRowRange = useMemo(() => {
+    if (selectedRowIndexes.size === 0) return null;
+    const rowsArray = Array.from(selectedRowIndexes);
+    return {
+      minRow: Math.min(...rowsArray),
+      maxRow: Math.max(...rowsArray),
+      minCol: 0,
+      maxCol: Math.max(displayColsCount - 1, 0)
+    };
+  }, [displayColsCount, selectedRowIndexes]);
+  const selectedColRange = useMemo(() => {
+    if (selectedColIndexes.size === 0) return null;
+    const colsArray = Array.from(selectedColIndexes);
+    return {
+      minRow: 0,
+      maxRow: Math.max(displayRowsCount - 1, 0),
+      minCol: Math.min(...colsArray),
+      maxCol: Math.max(...colsArray)
+    };
+  }, [displayRowsCount, selectedColIndexes]);
+  const fillSourceCandidateRange = selectedCellRange || singleSelectedCellRange;
+  const selectionRange = selectedCellRange || singleSelectedCellRange || selectedRowRange || selectedColRange;
+  const calculateOverlayStyle = useCallback(
+    (range) => {
+      if (!range) return null;
+      let left = columnWidths["header-col"] ?? 75;
+      for (let col = 0; col < range.minCol; col++) {
+        left += columnWidths[String(col)] ?? 100;
+      }
+      let top = rowHeights["header-row"] ?? defaultRowHeight;
+      for (let row = 0; row < range.minRow; row++) {
+        top += rowHeights[String(row)] ?? defaultRowHeight;
+      }
+      let width = 0;
+      for (let col = range.minCol; col <= range.maxCol; col++) {
+        width += columnWidths[String(col)] ?? 100;
+      }
+      let height = 0;
+      for (let row = range.minRow; row <= range.maxRow; row++) {
+        height += rowHeights[String(row)] ?? defaultRowHeight;
+      }
+      return { left, top, width, height };
+    },
+    [columnWidths, defaultRowHeight, rowHeights]
+  );
+  const getOverlayStyleFromDom = useCallback((range) => {
+    if (!range || !parentRef.current) return null;
+    const startCell = parentRef.current.querySelector(
+      `[data-grid-row="${range.minRow}"][data-grid-col="${range.minCol}"]`
+    );
+    const endCell = parentRef.current.querySelector(
+      `[data-grid-row="${range.maxRow}"][data-grid-col="${range.maxCol}"]`
+    );
+    if (!startCell || !endCell) return null;
+    const containerRect = parentRef.current.getBoundingClientRect();
+    const startRect = startCell.getBoundingClientRect();
+    const endRect = endCell.getBoundingClientRect();
+    const left = startRect.left - containerRect.left + parentRef.current.scrollLeft;
+    const top = startRect.top - containerRect.top + parentRef.current.scrollTop;
+    const width = endRect.right - startRect.left;
+    const height = endRect.bottom - startRect.top;
+    return { left, top, width, height };
+  }, []);
+  const selectionOverlayStyle = useMemo(() => {
+    return getOverlayStyleFromDom(selectionRange) || calculateOverlayStyle(selectionRange);
+  }, [selectionRange, calculateOverlayStyle, getOverlayStyleFromDom]);
+  const fillPreviewOverlayStyle = useMemo(() => {
+    if (!isFillDragging) return null;
+    return getOverlayStyleFromDom(fillPreviewRange) || calculateOverlayStyle(fillPreviewRange);
+  }, [fillPreviewRange, isFillDragging, calculateOverlayStyle, getOverlayStyleFromDom]);
+  const selectedRows = useMemo(
+    () => Array.from(selectedRowIndexes).sort((a, b) => a - b),
+    [selectedRowIndexes]
+  );
+  const selectedCols = useMemo(
+    () => Array.from(selectedColIndexes).sort((a, b) => a - b),
+    [selectedColIndexes]
+  );
+  const getClipboardRange = () => {
+    if (selectionRange) return selectionRange;
+    if (!contextMenuState.target) return null;
+    if (contextMenuState.target.kind === "cell") {
+      return {
+        minRow: contextMenuState.target.rowIndex,
+        maxRow: contextMenuState.target.rowIndex,
+        minCol: contextMenuState.target.colIndex,
+        maxCol: contextMenuState.target.colIndex
+      };
+    }
+    if (contextMenuState.target.kind === "rowHeader") {
+      return {
+        minRow: contextMenuState.target.rowIndex,
+        maxRow: contextMenuState.target.rowIndex,
+        minCol: 0,
+        maxCol: Math.max(displayColsCount - 1, 0)
+      };
+    }
+    return {
+      minRow: 0,
+      maxRow: Math.max(displayRowsCount - 1, 0),
+      minCol: contextMenuState.target.colIndex,
+      maxCol: contextMenuState.target.colIndex
+    };
+  };
+  const toClipboardText = (range) => {
+    var _a2;
+    const lines = [];
+    for (let r = range.minRow; r <= range.maxRow; r++) {
+      const cells = [];
+      for (let c = range.minCol; c <= range.maxCol; c++) {
+        cells.push(String(((_a2 = data[r]) == null ? void 0 : _a2[c]) ?? ""));
+      }
+      lines.push(cells.join("	"));
+    }
+    return lines.join("\n");
+  };
+  const ensureSize = (draft, targetRow, targetCol) => {
+    var _a2;
+    const widthBase = Math.max(targetCol + 1, ((_a2 = draft[0]) == null ? void 0 : _a2.length) || displayColsCount || 1);
+    while (draft.length <= targetRow) {
+      draft.push(new Array(widthBase).fill(""));
+    }
+    while (draft[targetRow].length <= targetCol) {
+      draft[targetRow].push("");
+    }
+  };
+  const handleCopy = async (isCut) => {
+    var _a2;
+    const range = getClipboardRange();
+    if (!range) return;
+    const text = toClipboardText(range);
+    setClipboardCache(text);
+    if ((_a2 = navigator.clipboard) == null ? void 0 : _a2.writeText) {
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+        setClipboardCache(text);
+      }
+    }
+    if (isCut && onDataChange) {
+      const next = produce(data, (draft) => {
+        var _a3;
+        for (let r = range.minRow; r <= range.maxRow; r++) {
+          for (let c = range.minCol; c <= range.maxCol; c++) {
+            if (((_a3 = draft[r]) == null ? void 0 : _a3[c]) !== void 0) {
+              draft[r][c] = "";
+            }
+          }
+        }
+      });
+      onDataChange(next);
+    }
+  };
+  const handlePaste = async () => {
+    var _a2, _b2, _c2;
+    let text = clipboardCache;
+    if ((_a2 = navigator.clipboard) == null ? void 0 : _a2.readText) {
+      try {
+        const fromClipboard = await navigator.clipboard.readText();
+        if (fromClipboard) text = fromClipboard;
+      } catch {
+        text = clipboardCache;
+      }
+    }
+    if (!text || !onDataChange) return;
+    const matrix = parseClipboardText(text);
+    if (matrix.length === 0) return;
+    const range = getClipboardRange();
+    const anchorRow = (range == null ? void 0 : range.minRow) ?? ((_b2 = contextMenuState.target) == null ? void 0 : _b2.rowIndex) ?? 0;
+    const anchorCol = (range == null ? void 0 : range.minCol) ?? ((_c2 = contextMenuState.target) == null ? void 0 : _c2.colIndex) ?? 0;
+    const next = produce(data, (draft) => {
+      for (let r = 0; r < matrix.length; r++) {
+        for (let c = 0; c < matrix[r].length; c++) {
+          const targetRow = anchorRow + r;
+          const targetCol = anchorCol + c;
+          ensureSize(draft, targetRow, targetCol);
+          draft[targetRow][targetCol] = matrix[r][c];
+        }
+      }
+    });
+    onDataChange(next);
+    const endRow = anchorRow + matrix.length - 1;
+    const endCol = anchorCol + matrix[0].length - 1;
+    setSelectionByRange({
+      minRow: anchorRow,
+      maxRow: endRow,
+      minCol: anchorCol,
+      maxCol: endCol
+    });
+  };
+  const handleInsertRows = (position, countInput) => {
+    var _a2, _b2;
+    if (!onDataChange) return;
+    const count = Math.max(1, Math.floor(countInput || 1));
+    const fallback = ((_a2 = contextMenuState.target) == null ? void 0 : _a2.rowIndex) ?? 0;
+    const rangeBasedRows = selectionRange && selectedRows.length === 0 && selectedCols.length === 0 ? [selectionRange.minRow, selectionRange.maxRow] : null;
+    const baseIndex = selectedRows.length > 0 ? position === "above" ? selectedRows[0] : selectedRows[selectedRows.length - 1] : rangeBasedRows ? position === "above" ? rangeBasedRows[0] : rangeBasedRows[1] : fallback;
+    const insertAt = position === "above" ? baseIndex : baseIndex + 1;
+    const width = Math.max(displayColsCount, ((_b2 = data[0]) == null ? void 0 : _b2.length) || 0, 1);
+    const next = produce(data, (draft) => {
+      for (let i = 0; i < count; i++) {
+        draft.splice(insertAt + i, 0, new Array(width).fill(""));
+      }
+    });
+    onDataChange(next);
+  };
+  const handleInsertCols = (position, countInput) => {
+    var _a2;
+    if (!onDataChange) return;
+    const count = Math.max(1, Math.floor(countInput || 1));
+    const fallback = ((_a2 = contextMenuState.target) == null ? void 0 : _a2.colIndex) ?? 0;
+    const rangeBasedCols = selectionRange && selectedRows.length === 0 && selectedCols.length === 0 ? [selectionRange.minCol, selectionRange.maxCol] : null;
+    const baseIndex = selectedCols.length > 0 ? position === "left" ? selectedCols[0] : selectedCols[selectedCols.length - 1] : rangeBasedCols ? position === "left" ? rangeBasedCols[0] : rangeBasedCols[1] : fallback;
+    const insertAt = position === "left" ? baseIndex : baseIndex + 1;
+    const next = produce(data, (draft) => {
+      const rowCount = Math.max(draft.length, displayRowsCount);
+      while (draft.length < rowCount) {
+        draft.push(new Array(Math.max(displayColsCount, 1)).fill(""));
+      }
+      for (let r = 0; r < draft.length; r++) {
+        for (let i = 0; i < count; i++) {
+          draft[r].splice(insertAt + i, 0, "");
+        }
+      }
+    });
+    onDataChange(next);
+  };
+  const handleDeleteRows = () => {
+    if (!onDataChange) return;
+    const rangeRows = selectionRange && selectedRows.length === 0 && selectedCols.length === 0 ? Array.from(
+      { length: selectionRange.maxRow - selectionRange.minRow + 1 },
+      (_, i) => selectionRange.minRow + i
+    ) : [];
+    const rowsToDelete = selectedRows.length > 0 ? selectedRows : rangeRows.length > 0 ? rangeRows : contextMenuState.target ? [contextMenuState.target.rowIndex] : [];
+    if (rowsToDelete.length === 0) return;
+    const next = produce(data, (draft) => {
+      [...rowsToDelete].sort((a, b) => b - a).forEach((rowIndex) => {
+        if (rowIndex >= 0 && rowIndex < draft.length) {
+          draft.splice(rowIndex, 1);
+        }
+      });
+    });
+    onDataChange(next);
+  };
+  const handleDeleteCols = () => {
+    if (!onDataChange) return;
+    const rangeCols = selectionRange && selectedRows.length === 0 && selectedCols.length === 0 ? Array.from(
+      { length: selectionRange.maxCol - selectionRange.minCol + 1 },
+      (_, i) => selectionRange.minCol + i
+    ) : [];
+    const colsToDelete = selectedCols.length > 0 ? selectedCols : rangeCols.length > 0 ? rangeCols : contextMenuState.target ? [contextMenuState.target.colIndex] : [];
+    if (colsToDelete.length === 0) return;
+    const next = produce(data, (draft) => {
+      [...colsToDelete].sort((a, b) => b - a).forEach((colIndex) => {
+        draft.forEach((row) => {
+          if (colIndex >= 0 && colIndex < row.length) {
+            row.splice(colIndex, 1);
+          }
+        });
+      });
+    });
+    onDataChange(next);
+  };
+  const runMenuAction = async (action) => {
+    if (action === "copy") await handleCopy(false);
+    if (action === "cut") await handleCopy(true);
+    if (action === "paste") await handlePaste();
+    if (action === "insertRowAbove") handleInsertRows("above", insertRowCount);
+    if (action === "insertRowBelow") handleInsertRows("below", insertRowCount);
+    if (action === "insertColLeft") handleInsertCols("left", insertColCount);
+    if (action === "insertColRight") handleInsertCols("right", insertColCount);
+    if (action === "deleteRows") handleDeleteRows();
+    if (action === "deleteCols") handleDeleteCols();
+    closeContextMenu();
+  };
+  const isRowHeaderMenu = ((_d = contextMenuState.target) == null ? void 0 : _d.kind) === "rowHeader";
+  const isColHeaderMenu = ((_e = contextMenuState.target) == null ? void 0 : _e.kind) === "colHeader";
+  handleCopyRef.current = handleCopy;
+  handlePasteRef.current = handlePaste;
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      var _a2;
+      if (!isGridActive) return;
+      const target = event.target;
+      const tagName = (_a2 = target == null ? void 0 : target.tagName) == null ? void 0 : _a2.toLowerCase();
+      if (tagName === "input" || tagName === "textarea" || (target == null ? void 0 : target.isContentEditable)) {
+        return;
+      }
+      const hasCommandKey = event.metaKey || event.ctrlKey;
+      const key = event.key.toLowerCase();
+      if (hasCommandKey) {
+        if (key === "c") {
+          event.preventDefault();
+          void handleCopyRef.current(false);
+        }
+        if (key === "x") {
+          event.preventDefault();
+          void handleCopyRef.current(true);
+        }
+        if (key === "v") {
+          event.preventDefault();
+          void handlePasteRef.current();
+        }
+        return;
+      }
+      if (event.altKey) return;
+      if (selectedCellKeys.size !== 1) return;
+      const [cellKey] = Array.from(selectedCellKeys);
+      if (!cellKey) return;
+      const nativeEvent = event;
+      if (nativeEvent.isComposing || nativeEvent.keyCode === 229 || key === "process") {
+        event.preventDefault();
+        setEditingInputSeed(null);
+        setEditingCellKey(cellKey);
+        return;
+      }
+      if (event.key.length === 1) {
+        event.preventDefault();
+        setEditingInputSeed({ key: cellKey, value: event.key });
+        setEditingCellKey(cellKey);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isGridActive, selectedCellKeys]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      ref: parentRef,
+      className: classNames(
+        styles["easyv-react-grid"],
+        "easyv-react-grid-plus",
+        "biz-w-full biz-h-full biz-overflow-auto",
+        wrapClassName
+      ),
+      style: {
+        ...wrapStyle,
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "table",
+          {
+            className: "biz-w-full biz-table-fixed",
+            style: {
+              width: tableWidth,
+              borderCollapse: "separate",
+              borderSpacing: 0,
+              border: "1px solid #2f3338"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: headerGroup.headers.map((header) => {
+                const isFirstCol = header.column.id === "header-col";
+                const isStickyLeft = isFirstCol && stickyLeftColumn;
+                const headerColIndex = Number(header.column.id);
+                const isColSelected = !isFirstCol && selectedColIndexes.has(headerColIndex);
+                const headerHeight = rowHeights["header-row"] ?? defaultRowHeight;
+                return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "th",
+                  {
+                    onContextMenu: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      if (isFirstCol || Number.isNaN(headerColIndex)) return;
+                      selectColumn(headerColIndex);
+                      openContextMenu(event, {
+                        kind: "colHeader",
+                        rowIndex: 0,
+                        colIndex: headerColIndex
+                      });
+                    },
+                    onClick: () => {
+                      if (skipSelectionClickRef.current) {
+                        skipSelectionClickRef.current = false;
+                        return;
+                      }
+                      if (!isFirstCol && !Number.isNaN(headerColIndex)) {
+                        selectColumn(headerColIndex);
+                      }
+                    },
+                    className: classNames("biz-bg-[#252830] biz-relative biz-text-center"),
+                    style: {
+                      width: header.getSize(),
+                      height: headerHeight,
+                      position: stickyTopRow || isStickyLeft ? "sticky" : "relative",
+                      top: stickyTopRow ? 0 : void 0,
+                      left: isStickyLeft ? 0 : void 0,
+                      zIndex: stickyTopRow && isStickyLeft ? 40 : stickyTopRow ? 30 : isStickyLeft ? 20 : 1,
+                      border: "1px solid #2f3338",
+                      borderRightColor: isFirstCol ? "#50535e" : "#2f3338",
+                      borderTopLeftRadius: isFirstCol ? 8 : void 0,
+                      color: "#b4b7c1",
+                      fontSize: 12,
+                      fontWeight: 400,
+                      backgroundColor: isColSelected ? "#353843" : "#252830"
+                    },
+                    children: [
+                      header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "div",
+                        {
+                          onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                          },
+                          onMouseDown: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            skipSelectionClickRef.current = true;
+                            setResizingColumn({
+                              columnId: String(header.column.id),
+                              startX: event.clientX,
+                              startWidth: header.getSize()
+                            });
+                          },
+                          className: classNames(
+                            "biz-absolute biz-right-[-2px] biz-top-0 biz-h-full biz-w-[6px] biz-cursor-col-resize hover:biz-bg-[#337efe] biz-z-20",
+                            (resizingColumn == null ? void 0 : resizingColumn.columnId) === String(header.column.id) && "biz-bg-[#337efe]"
+                          )
+                        }
+                      ),
+                      isFirstCol && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "div",
+                        {
+                          onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                          },
+                          onMouseDown: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            skipSelectionClickRef.current = true;
+                            setResizingRow({
+                              rowId: "header-row",
+                              startY: event.clientY,
+                              startHeight: headerHeight
+                            });
+                          },
+                          className: "biz-absolute biz-left-0 biz-bottom-0 biz-h-[6px] biz-w-full biz-cursor-row-resize hover:biz-bg-[#337efe] biz-z-20"
+                        }
+                      )
+                    ]
+                  },
+                  header.id
+                );
+              }) }, headerGroup.id)) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("tbody", { children: [
+                paddingTop > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "td",
+                  {
+                    colSpan: table.getAllLeafColumns().length,
+                    style: { height: `${paddingTop}px` }
+                  }
+                ) }),
+                virtualRows.map((virtualRow) => {
+                  const row = rows[virtualRow.index];
+                  const rowHeight = rowHeights[row.id] ?? defaultRowHeight;
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "tr",
+                    {
+                      "data-index": virtualRow.index,
+                      ref: rowVirtualizer.measureElement,
+                      style: { height: rowHeight },
+                      children: row.getVisibleCells().map((cell) => {
+                        const isFirstCol = cell.column.id === "header-col";
+                        const isStickyLeft = isFirstCol && stickyLeftColumn;
+                        const rowIndex = row.index;
+                        const colIndex = Number(cell.column.id);
+                        const isDataCell = !isFirstCol && !Number.isNaN(colIndex);
+                        const isSelectedByCell = isDataCell && selectedCellKeys.has(getCellKey(rowIndex, colIndex));
+                        const isSingleCellSelected = isSelectedByCell && selectedCellKeys.size <= 1;
+                        const isRowHeaderSelected = isFirstCol && selectedRowIndexes.has(rowIndex);
+                        const shouldHighlightCellByDefault = isRowHeaderSelected || isSingleCellSelected;
+                        const baseBorderColor = "#2f3338";
+                        const selectedBorderColor = "#337efe";
+                        const borderTopColor = shouldHighlightCellByDefault ? selectedBorderColor : baseBorderColor;
+                        const borderBottomColor = shouldHighlightCellByDefault ? selectedBorderColor : baseBorderColor;
+                        const borderLeftColor = shouldHighlightCellByDefault ? selectedBorderColor : baseBorderColor;
+                        const borderRightColor = isFirstCol ? "#50535e" : shouldHighlightCellByDefault ? selectedBorderColor : baseBorderColor;
+                        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                          "td",
+                          {
+                            "data-grid-row": isDataCell ? rowIndex : void 0,
+                            "data-grid-col": isDataCell ? colIndex : void 0,
+                            onContextMenu: (event) => {
+                              event.preventDefault();
+                              event.stopPropagation();
+                              if (isFirstCol) {
+                                selectRow(rowIndex);
+                                openContextMenu(event, {
+                                  kind: "rowHeader",
+                                  rowIndex,
+                                  colIndex: 0
+                                });
+                                return;
+                              }
+                              if (isDataCell) {
+                                if (!selectedCellKeys.has(getCellKey(rowIndex, colIndex))) {
+                                  selectSingleCell(rowIndex, colIndex);
+                                }
+                                openContextMenu(event, {
+                                  kind: "cell",
+                                  rowIndex,
+                                  colIndex
+                                });
+                              }
+                            },
+                            onMouseDown: (event) => {
+                              if (event.button !== 0) return;
+                              if (isDataCell) {
+                                setSelectionPointer(event.clientX, event.clientY);
+                                setIsSelectingRange(true);
+                                setSelectionStart({ row: rowIndex, col: colIndex });
+                                selectSingleCell(rowIndex, colIndex);
+                              }
+                            },
+                            onMouseEnter: (event) => {
+                              setSelectionPointer(event.clientX, event.clientY);
+                              if (isDataCell && isFillDragging && fillSourceRange) {
+                                setFillPreviewRange(
+                                  calculateFillPreviewRange(fillSourceRange, rowIndex, colIndex)
+                                );
+                                return;
+                              }
+                              if (isDataCell && isSelectingRange && selectionStart) {
+                                selectRangeCells(
+                                  selectionStart.row,
+                                  selectionStart.col,
+                                  rowIndex,
+                                  colIndex
+                                );
+                              }
+                            },
+                            onClick: () => {
+                              if (skipSelectionClickRef.current) {
+                                skipSelectionClickRef.current = false;
+                                return;
+                              }
+                              if (isFirstCol) {
+                                selectRow(rowIndex);
+                              } else if (isDataCell) {
+                                selectSingleCell(rowIndex, colIndex);
+                              }
+                            },
+                            onDoubleClick: () => {
+                              if (!isFirstCol) {
+                                setEditingCellKey(`${row.id}:${String(cell.column.id)}`);
+                              }
+                            },
+                            style: {
+                              width: cell.column.getSize(),
+                              position: isStickyLeft ? "sticky" : "relative",
+                              left: isStickyLeft ? 0 : void 0,
+                              zIndex: isStickyLeft ? 20 : 1,
+                              border: "1px solid #2f3338",
+                              borderTopColor,
+                              borderBottomColor,
+                              borderLeftColor,
+                              borderRightColor,
+                              fontSize: 12,
+                              color: "white",
+                              textAlign: "center",
+                              backgroundColor: shouldHighlightCellByDefault ? isFirstCol ? "#353843" : "#1c2338" : isFirstCol ? "#252830" : "#13171d",
+                              userSelect: "none"
+                            },
+                            children: [
+                              flexRender(cell.column.columnDef.cell, cell.getContext()),
+                              isFirstCol && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                                "div",
+                                {
+                                  onClick: (event) => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                  },
+                                  onMouseDown: (event) => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    skipSelectionClickRef.current = true;
+                                    setResizingRow({
+                                      rowId: row.id,
+                                      startY: event.clientY,
+                                      startHeight: rowHeight
+                                    });
+                                  },
+                                  className: "biz-absolute biz-left-0 biz-bottom-0 biz-h-[6px] biz-w-full biz-cursor-row-resize hover:biz-bg-[#337efe] biz-z-20"
+                                }
+                              )
+                            ]
+                          },
+                          cell.id
+                        );
+                      })
+                    },
+                    row.id
+                  );
+                }),
+                paddingBottom > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "td",
+                  {
+                    colSpan: table.getAllLeafColumns().length,
+                    style: { height: `${paddingBottom}px` }
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ),
+        selectionOverlayStyle && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              pointerEvents: "none",
+              left: selectionOverlayStyle.left,
+              top: selectionOverlayStyle.top,
+              width: selectionOverlayStyle.width,
+              height: selectionOverlayStyle.height,
+              backgroundColor: "rgba(58, 137, 254, 0.18)",
+              border: "1px solid #337efe",
+              zIndex: 15
+            }
+          }
+        ),
+        fillPreviewOverlayStyle && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              pointerEvents: "none",
+              left: fillPreviewOverlayStyle.left,
+              top: fillPreviewOverlayStyle.top,
+              width: fillPreviewOverlayStyle.width,
+              height: fillPreviewOverlayStyle.height,
+              border: "1px dashed #337efe",
+              zIndex: 16
+            }
+          }
+        ),
+        selectionOverlayStyle && fillSourceCandidateRange && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            onMouseDown: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              setEditingCellKey(null);
+              setIsFillDragging(true);
+              setFillSourceRange(fillSourceCandidateRange);
+              setFillPreviewRange(fillSourceCandidateRange);
+            },
+            style: {
+              position: "absolute",
+              left: selectionOverlayStyle.left + selectionOverlayStyle.width - 4,
+              top: selectionOverlayStyle.top + selectionOverlayStyle.height - 4,
+              width: 8,
+              height: 8,
+              backgroundColor: "#337efe",
+              border: "1px solid #ffffff",
+              cursor: "crosshair",
+              zIndex: 17
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          EasyvReactGridPlusContextMenu,
+          {
+            visible: contextMenuState.visible,
+            x: contextMenuState.x,
+            y: contextMenuState.y,
+            isRowHeaderMenu,
+            isColHeaderMenu,
+            insertRowCount,
+            insertColCount,
+            setInsertRowCount,
+            setInsertColCount,
+            runMenuAction
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  EasyvReactGridPlus
+};
+//# sourceMappingURL=easyv-react-grid-plus.es.js.map