@comitor/ui 1.9.0 → 1.11.0

package/dist/data-grid/use-data-grid.js

@@ -0,0 +1,2692 @@
+"use client";
+import { useDirection } from "@radix-ui/react-direction";
+import {
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import * as React from "react";
+import { msg } from "./messages.js";
+import { toastError, toastSuccess } from "./toast.js";
+import { useAsRef } from "./use-as-ref.js";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+import { useLazyRef } from "./use-lazy-ref.js";
+import {
+  formatDate,
+  getCellKey,
+  getEmptyCellValue,
+  getIsFileCellData,
+  getIsInPopover,
+  getRowHeightValue,
+  getScrollDirection,
+  matchSelectOption,
+  parseCellKey,
+  parseTsv,
+  readClipboardText,
+  scrollCellIntoView,
+  writeClipboardText
+} from "./utils.js";
+const DEFAULT_ROW_HEIGHT = "short";
+const OVERSCAN = 6;
+const VIEWPORT_OFFSET = 1;
+const HORIZONTAL_PAGE_SIZE = 5;
+const SCROLL_SYNC_RETRY_COUNT = 16;
+const MIN_COLUMN_SIZE = 60;
+const MAX_COLUMN_SIZE = 800;
+const SEARCH_SHORTCUT_KEY = "f";
+const NON_NAVIGABLE_COLUMN_IDS = /* @__PURE__ */ new Set(["select", "actions"]);
+const AUTO_SCROLL_EDGE_ZONE = 50;
+const AUTO_SCROLL_SPEED_RAMP_ZONE = AUTO_SCROLL_EDGE_ZONE * 3;
+const AUTO_SCROLL_MIN_SPEED = 8;
+const AUTO_SCROLL_MAX_SPEED = 40;
+const AUTO_SCROLL_SELECTION_THROTTLE_MS = 32;
+const DOMAIN_REGEX = /^[\w.-]+\.[a-z]{2,}(\/\S*)?$/i;
+const ISO_DATE_REGEX = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2}.*)?$/;
+const TRUTHY_BOOLEANS = /* @__PURE__ */ new Set(["true", "1", "yes", "checked"]);
+const VALID_BOOLEANS = /* @__PURE__ */ new Set(["true", "false", "1", "0", "yes", "no", "checked", "unchecked"]);
+function useStore(store, selector) {
+  const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);
+  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+function useDataGrid({
+  data,
+  columns,
+  rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT,
+  overscan = OVERSCAN,
+  dir: dirProp,
+  initialState,
+  ...props
+}) {
+  const dir = useDirection(dirProp);
+  const dataGridRef = React.useRef(null);
+  const tableRef = React.useRef(null);
+  const rowVirtualizerRef = React.useRef(null);
+  const headerRef = React.useRef(null);
+  const rowMapRef = React.useRef(/* @__PURE__ */ new Map());
+  const cellMapRef = React.useRef(/* @__PURE__ */ new Map());
+  const footerRef = React.useRef(null);
+  const focusGuardRef = React.useRef(false);
+  const propsRef = useAsRef({
+    ...props,
+    data,
+    columns,
+    initialState
+  });
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = useLazyRef(() => {
+    return {
+      sorting: initialState?.sorting ?? [],
+      columnFilters: initialState?.columnFilters ?? [],
+      rowHeight: rowHeightProp,
+      rowSelection: initialState?.rowSelection ?? {},
+      selectionState: {
+        selectedCells: /* @__PURE__ */ new Set(),
+        selectionRange: null,
+        isSelecting: false
+      },
+      focusedCell: null,
+      editingCell: null,
+      cutCells: /* @__PURE__ */ new Set(),
+      contextMenu: {
+        open: false,
+        x: 0,
+        y: 0
+      },
+      searchQuery: "",
+      searchMatches: [],
+      matchIndex: -1,
+      searchOpen: false,
+      lastClickedRowId: null,
+      pasteDialog: {
+        open: false,
+        rowsNeeded: 0,
+        clipboardText: ""
+      }
+    };
+  });
+  const store = React.useMemo(() => {
+    let isBatching = false;
+    let pendingNotification = false;
+    return {
+      subscribe: (callback) => {
+        listenersRef.current.add(callback);
+        return () => listenersRef.current.delete(callback);
+      },
+      getState: () => stateRef.current,
+      setState: (key, value) => {
+        if (Object.is(stateRef.current[key], value)) return;
+        stateRef.current[key] = value;
+        if (isBatching) {
+          pendingNotification = true;
+        } else {
+          if (!pendingNotification) {
+            pendingNotification = true;
+            queueMicrotask(() => {
+              pendingNotification = false;
+              store.notify();
+            });
+          }
+        }
+      },
+      notify: () => {
+        for (const listener of listenersRef.current) {
+          listener();
+        }
+      },
+      batch: (fn) => {
+        if (isBatching) {
+          fn();
+          return;
+        }
+        isBatching = true;
+        const wasPending = pendingNotification;
+        pendingNotification = false;
+        try {
+          fn();
+        } finally {
+          isBatching = false;
+          if (pendingNotification || wasPending) {
+            pendingNotification = false;
+            store.notify();
+          }
+        }
+      }
+    };
+  }, [listenersRef, stateRef]);
+  const focusedCell = useStore(store, (state) => state.focusedCell);
+  const editingCell = useStore(store, (state) => state.editingCell);
+  const selectionState = useStore(store, (state) => state.selectionState);
+  const searchQuery = useStore(store, (state) => state.searchQuery);
+  const searchMatches = useStore(store, (state) => state.searchMatches);
+  const matchIndex = useStore(store, (state) => state.matchIndex);
+  const searchOpen = useStore(store, (state) => state.searchOpen);
+  const sorting = useStore(store, (state) => state.sorting);
+  const columnFilters = useStore(store, (state) => state.columnFilters);
+  const rowSelection = useStore(store, (state) => state.rowSelection);
+  const rowHeight = useStore(store, (state) => state.rowHeight);
+  const contextMenu = useStore(store, (state) => state.contextMenu);
+  const pasteDialog = useStore(store, (state) => state.pasteDialog);
+  const rowHeightValue = getRowHeightValue(rowHeight);
+  const controlledSorting = props.state?.sorting;
+  const controlledColumnFilters = props.state?.columnFilters;
+  useIsomorphicLayoutEffect(() => {
+    if (!controlledSorting && !controlledColumnFilters) return;
+    store.batch(() => {
+      if (controlledSorting) store.setState("sorting", controlledSorting);
+      if (controlledColumnFilters) {
+        store.setState("columnFilters", controlledColumnFilters);
+      }
+    });
+  }, [store, controlledSorting, controlledColumnFilters]);
+  const prevCellSelectionMapRef = useLazyRef(() => /* @__PURE__ */ new Map());
+  const cellSelectionMap = React.useMemo(() => {
+    const selectedCells = selectionState.selectedCells;
+    if (selectedCells.size === 0) {
+      prevCellSelectionMapRef.current.clear();
+      return null;
+    }
+    const newRowCells = /* @__PURE__ */ new Map();
+    for (const cellKey of selectedCells) {
+      const { rowIndex } = parseCellKey(cellKey);
+      let rowSet = newRowCells.get(rowIndex);
+      if (!rowSet) {
+        rowSet = /* @__PURE__ */ new Set();
+        newRowCells.set(rowIndex, rowSet);
+      }
+      rowSet.add(cellKey);
+    }
+    const stableMap = /* @__PURE__ */ new Map();
+    for (const [rowIndex, newSet] of newRowCells) {
+      const prevSet = prevCellSelectionMapRef.current.get(rowIndex);
+      if (prevSet && prevSet.size === newSet.size && [...newSet].every((key) => prevSet.has(key))) {
+        stableMap.set(rowIndex, prevSet);
+      } else {
+        stableMap.set(rowIndex, newSet);
+      }
+    }
+    prevCellSelectionMapRef.current = stableMap;
+    return stableMap;
+  }, [selectionState.selectedCells, prevCellSelectionMapRef]);
+  const visualRowIndexCacheRef = React.useRef(null);
+  const getVisualRowIndex = React.useCallback((rowId) => {
+    const rows = tableRef.current?.getRowModel().rows;
+    if (!rows) return void 0;
+    if (visualRowIndexCacheRef.current?.rows !== rows) {
+      const map = /* @__PURE__ */ new Map();
+      for (const [i, row] of rows.entries()) {
+        map.set(row.id, i + 1);
+      }
+      visualRowIndexCacheRef.current = { rows, map };
+    }
+    return visualRowIndexCacheRef.current.map.get(rowId);
+  }, []);
+  const columnIds = React.useMemo(() => {
+    return columns.map((c) => {
+      if (c.id) return c.id;
+      if ("accessorKey" in c) return c.accessorKey;
+      return void 0;
+    }).filter((id) => Boolean(id));
+  }, [columns]);
+  const navigableColumnIds = React.useMemo(() => {
+    return columnIds.filter((c) => !NON_NAVIGABLE_COLUMN_IDS.has(c));
+  }, [columnIds]);
+  const onDataUpdate = React.useCallback(
+    (updates) => {
+      if (propsRef.current.readOnly) return;
+      const updateArray = Array.isArray(updates) ? updates : [updates];
+      if (updateArray.length === 0) return;
+      const currentTable = tableRef.current;
+      const currentData = propsRef.current.data;
+      const rows = currentTable?.getRowModel().rows;
+      const rowUpdatesMap = /* @__PURE__ */ new Map();
+      for (const update of updateArray) {
+        if (!rows || !currentTable) {
+          const existingUpdates = rowUpdatesMap.get(update.rowIndex) ?? [];
+          existingUpdates.push({
+            columnId: update.columnId,
+            value: update.value
+          });
+          rowUpdatesMap.set(update.rowIndex, existingUpdates);
+        } else {
+          const row = rows[update.rowIndex];
+          if (!row) continue;
+          const originalData = row.original;
+          const originalRowIndex = currentData.indexOf(originalData);
+          const targetIndex = originalRowIndex !== -1 ? originalRowIndex : update.rowIndex;
+          const existingUpdates = rowUpdatesMap.get(targetIndex) ?? [];
+          existingUpdates.push({
+            columnId: update.columnId,
+            value: update.value
+          });
+          rowUpdatesMap.set(targetIndex, existingUpdates);
+        }
+      }
+      const maxUpdateIndex = rowUpdatesMap.size > 0 ? Math.max(...Array.from(rowUpdatesMap.keys())) : -1;
+      const dataLength = Math.max(currentData.length, maxUpdateIndex + 1);
+      const newData = new Array(dataLength);
+      for (let i = 0; i < dataLength; i++) {
+        const updates2 = rowUpdatesMap.get(i);
+        const existingRow = currentData[i] ?? rows?.[i]?.original;
+        if (existingRow == null) continue;
+        if (updates2) {
+          const updatedRow = { ...existingRow };
+          for (const { columnId, value } of updates2) {
+            updatedRow[columnId] = value;
+          }
+          newData[i] = updatedRow;
+        } else {
+          newData[i] = existingRow;
+        }
+      }
+      propsRef.current.onDataChange?.(newData);
+    },
+    [propsRef]
+  );
+  const getIsCellSelected = React.useCallback(
+    (rowIndex, columnId) => {
+      const currentSelectionState = store.getState().selectionState;
+      return currentSelectionState.selectedCells.has(getCellKey(rowIndex, columnId));
+    },
+    [store]
+  );
+  const onSelectionClear = React.useCallback(() => {
+    store.batch(() => {
+      store.setState("selectionState", {
+        selectedCells: /* @__PURE__ */ new Set(),
+        selectionRange: null,
+        isSelecting: false
+      });
+      store.setState("rowSelection", {});
+    });
+  }, [store]);
+  const selectAll = React.useCallback(() => {
+    const allCells = /* @__PURE__ */ new Set();
+    const currentTable = tableRef.current;
+    const rows = currentTable?.getRowModel().rows ?? [];
+    const rowCount = rows.length ?? propsRef.current.data.length;
+    for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+      for (const columnId of columnIds) {
+        allCells.add(getCellKey(rowIndex, columnId));
+      }
+    }
+    const firstColumnId = columnIds[0];
+    const lastColumnId = columnIds[columnIds.length - 1];
+    store.setState("selectionState", {
+      selectedCells: allCells,
+      selectionRange: columnIds.length > 0 && rowCount > 0 && firstColumnId && lastColumnId ? {
+        start: { rowIndex: 0, columnId: firstColumnId },
+        end: { rowIndex: rowCount - 1, columnId: lastColumnId }
+      } : null,
+      isSelecting: false
+    });
+  }, [columnIds, propsRef, store]);
+  const selectColumn = React.useCallback(
+    (columnId) => {
+      const currentTable = tableRef.current;
+      const rows = currentTable?.getRowModel().rows ?? [];
+      const rowCount = rows.length ?? propsRef.current.data.length;
+      if (rowCount === 0) return;
+      const selectedCells = /* @__PURE__ */ new Set();
+      for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+        selectedCells.add(getCellKey(rowIndex, columnId));
+      }
+      store.setState("selectionState", {
+        selectedCells,
+        selectionRange: {
+          start: { rowIndex: 0, columnId },
+          end: { rowIndex: rowCount - 1, columnId }
+        },
+        isSelecting: false
+      });
+    },
+    [propsRef, store]
+  );
+  const selectRange = React.useCallback(
+    (start, end, isSelecting = false) => {
+      const startColIndex = columnIds.indexOf(start.columnId);
+      const endColIndex = columnIds.indexOf(end.columnId);
+      const minRow = Math.min(start.rowIndex, end.rowIndex);
+      const maxRow = Math.max(start.rowIndex, end.rowIndex);
+      const minCol = Math.min(startColIndex, endColIndex);
+      const maxCol = Math.max(startColIndex, endColIndex);
+      const selectedCells = /* @__PURE__ */ new Set();
+      for (let rowIndex = minRow; rowIndex <= maxRow; rowIndex++) {
+        for (let colIndex = minCol; colIndex <= maxCol; colIndex++) {
+          const columnId = columnIds[colIndex];
+          if (columnId) {
+            selectedCells.add(getCellKey(rowIndex, columnId));
+          }
+        }
+      }
+      store.setState("selectionState", {
+        selectedCells,
+        selectionRange: { start, end },
+        isSelecting
+      });
+    },
+    [columnIds, store]
+  );
+  const dragDepsRef = useAsRef({
+    selectRange,
+    dir,
+    rowHeightValue,
+    columnIds
+  });
+  const serializeCellsToTsv = React.useCallback(() => {
+    const currentState = store.getState();
+    let selectedCellsArray;
+    if (!currentState.selectionState.selectedCells.size) {
+      if (!currentState.focusedCell) return null;
+      const focusedCellKey = getCellKey(currentState.focusedCell.rowIndex, currentState.focusedCell.columnId);
+      selectedCellsArray = [focusedCellKey];
+    } else {
+      selectedCellsArray = Array.from(currentState.selectionState.selectedCells);
+    }
+    const currentTable = tableRef.current;
+    const rows = currentTable?.getRowModel().rows;
+    if (!rows) return null;
+    const selectedColumnIds = [];
+    const seenColumnIds = /* @__PURE__ */ new Set();
+    const cellData = /* @__PURE__ */ new Map();
+    const rowIndices = /* @__PURE__ */ new Set();
+    const rowCellMaps = /* @__PURE__ */ new Map();
+    const navigableCells = [];
+    for (const cellKey of selectedCellsArray) {
+      const { rowIndex, columnId } = parseCellKey(cellKey);
+      if (columnId && NON_NAVIGABLE_COLUMN_IDS.has(columnId)) {
+        continue;
+      }
+      navigableCells.push(cellKey);
+      if (columnId && !seenColumnIds.has(columnId)) {
+        seenColumnIds.add(columnId);
+        selectedColumnIds.push(columnId);
+      }
+      rowIndices.add(rowIndex);
+      const row = rows[rowIndex];
+      if (row) {
+        let cellMap = rowCellMaps.get(rowIndex);
+        if (!cellMap) {
+          cellMap = new Map(row.getVisibleCells().map((c) => [c.column.id, c]));
+          rowCellMaps.set(rowIndex, cellMap);
+        }
+        const cell = cellMap.get(columnId);
+        if (cell) {
+          const value = cell.getValue();
+          const cellVariant = cell.column.columnDef?.meta?.cell?.variant;
+          let serializedValue = "";
+          if (cellVariant === "file" || cellVariant === "multi-select") {
+            serializedValue = value ? JSON.stringify(value) : "";
+          } else if (value instanceof Date) {
+            serializedValue = value.toISOString();
+          } else {
+            serializedValue = String(value ?? "");
+          }
+          cellData.set(cellKey, serializedValue);
+        }
+      }
+    }
+    const colIndices = /* @__PURE__ */ new Set();
+    for (const cellKey of navigableCells) {
+      const { columnId } = parseCellKey(cellKey);
+      const colIndex = selectedColumnIds.indexOf(columnId);
+      if (colIndex >= 0) {
+        colIndices.add(colIndex);
+      }
+    }
+    const sortedRowIndices = Array.from(rowIndices).sort((a, b) => a - b);
+    const sortedColIndices = Array.from(colIndices).sort((a, b) => a - b);
+    const sortedColumnIds = sortedColIndices.map((i) => selectedColumnIds[i]);
+    const tsvData = sortedRowIndices.map(
+      (rowIndex) => sortedColumnIds.map((columnId) => {
+        const cellKey = `${rowIndex}:${columnId}`;
+        return cellData.get(cellKey) ?? "";
+      }).join("	")
+    ).join("\n");
+    return { tsvData, selectedCellsArray: navigableCells };
+  }, [store]);
+  const onCellsCopy = React.useCallback(async () => {
+    const result = serializeCellsToTsv();
+    if (!result) return;
+    const { tsvData, selectedCellsArray } = result;
+    try {
+      await writeClipboardText(tsvData);
+      const currentState = store.getState();
+      if (currentState.cutCells.size > 0) {
+        store.setState("cutCells", /* @__PURE__ */ new Set());
+      }
+      toastSuccess(msg.toast.cellsCopied(selectedCellsArray.length));
+    } catch {
+      toastError(msg.toast.copyFailed);
+    }
+  }, [store, serializeCellsToTsv]);
+  const onCellsCut = React.useCallback(async () => {
+    if (propsRef.current.readOnly) return;
+    const result = serializeCellsToTsv();
+    if (!result) return;
+    const { tsvData, selectedCellsArray } = result;
+    try {
+      await writeClipboardText(tsvData);
+      store.setState("cutCells", new Set(selectedCellsArray));
+      toastSuccess(msg.toast.cellsCut(selectedCellsArray.length));
+    } catch {
+      toastError(msg.toast.cutFailed);
+    }
+  }, [store, propsRef, serializeCellsToTsv]);
+  const restoreFocus = React.useCallback((element) => {
+    if (element && document.activeElement !== element) {
+      requestAnimationFrame(() => {
+        element.focus();
+      });
+    }
+  }, []);
+  const onCellsPaste = React.useCallback(
+    async (expandRows = false, clipboardTextArg) => {
+      if (propsRef.current.readOnly) return;
+      const currentState = store.getState();
+      if (!currentState.focusedCell) return;
+      const currentTable = tableRef.current;
+      const rows = currentTable?.getRowModel().rows;
+      if (!rows) return;
+      try {
+        let clipboardText = clipboardTextArg ?? currentState.pasteDialog.clipboardText;
+        if (!clipboardText) {
+          clipboardText = await readClipboardText() ?? "";
+        }
+        if (!clipboardText) return;
+        const rawPastedData = parseTsv(clipboardText, navigableColumnIds.length);
+        const selectionCells = currentState.selectionState.selectedCells;
+        const isSingleCellClipboard = rawPastedData.length === 1 && (rawPastedData[0]?.length ?? 0) === 1;
+        let pastedData = rawPastedData;
+        let startRowIndex = currentState.focusedCell.rowIndex;
+        let startColIndex = navigableColumnIds.indexOf(currentState.focusedCell.columnId);
+        if (isSingleCellClipboard && selectionCells.size > 1) {
+          const singleValue = rawPastedData[0]?.[0] ?? "";
+          let minRow = Infinity;
+          let maxRow = -Infinity;
+          let minColIdx = Infinity;
+          let maxColIdx = -Infinity;
+          for (const cellKey of selectionCells) {
+            const { rowIndex, columnId } = parseCellKey(cellKey);
+            const colIdx = navigableColumnIds.indexOf(columnId);
+            if (colIdx === -1) continue;
+            minRow = Math.min(minRow, rowIndex);
+            maxRow = Math.max(maxRow, rowIndex);
+            minColIdx = Math.min(minColIdx, colIdx);
+            maxColIdx = Math.max(maxColIdx, colIdx);
+          }
+          if (minRow !== Infinity) {
+            startRowIndex = minRow;
+            startColIndex = minColIdx;
+            const numRows = maxRow - minRow + 1;
+            const numCols = maxColIdx - minColIdx + 1;
+            pastedData = Array.from({ length: numRows }, () => Array.from({ length: numCols }, () => singleValue));
+          }
+        }
+        if (startColIndex === -1) return;
+        const rowCount = rows.length ?? propsRef.current.data.length;
+        const rowsNeeded = startRowIndex + pastedData.length - rowCount;
+        if (rowsNeeded > 0 && !expandRows && propsRef.current.onRowAdd && !currentState.pasteDialog.clipboardText) {
+          store.setState("pasteDialog", {
+            open: true,
+            rowsNeeded,
+            clipboardText
+          });
+          return;
+        }
+        if (expandRows && rowsNeeded > 0) {
+          const expectedRowCount = rowCount + rowsNeeded;
+          if (propsRef.current.onRowsAdd) {
+            await propsRef.current.onRowsAdd(rowsNeeded);
+          } else if (propsRef.current.onRowAdd) {
+            for (let i = 0; i < rowsNeeded; i++) {
+              await propsRef.current.onRowAdd();
+            }
+          }
+          let attempts = 0;
+          const maxAttempts = 50;
+          let currentTableRowCount = tableRef.current?.getRowModel().rows.length ?? 0;
+          while (currentTableRowCount < expectedRowCount && attempts < maxAttempts) {
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            currentTableRowCount = tableRef.current?.getRowModel().rows.length ?? 0;
+            attempts++;
+          }
+        }
+        const updates = [];
+        const tableColumns = currentTable?.getAllColumns() ?? [];
+        let cellsUpdated = 0;
+        let endRowIndex = startRowIndex;
+        let endColIndex = startColIndex;
+        const updatedTable = tableRef.current;
+        const updatedRows = updatedTable?.getRowModel().rows;
+        const currentRowCount = updatedRows?.length ?? 0;
+        let cellsSkipped = 0;
+        const columnMap = new Map(tableColumns.map((c) => [c.id, c]));
+        for (let pasteRowIdx = 0; pasteRowIdx < pastedData.length; pasteRowIdx++) {
+          const pasteRow = pastedData[pasteRowIdx];
+          if (!pasteRow) continue;
+          const targetRowIndex = startRowIndex + pasteRowIdx;
+          if (targetRowIndex >= currentRowCount) break;
+          for (let pasteColIdx = 0; pasteColIdx < pasteRow.length; pasteColIdx++) {
+            const targetColIndex = startColIndex + pasteColIdx;
+            if (targetColIndex >= navigableColumnIds.length) break;
+            const targetColumnId = navigableColumnIds[targetColIndex];
+            if (!targetColumnId) continue;
+            const pastedValue = pasteRow[pasteColIdx] ?? "";
+            const column = columnMap.get(targetColumnId);
+            const cellOpts = column?.columnDef?.meta?.cell;
+            const cellVariant = cellOpts?.variant;
+            let processedValue = pastedValue;
+            let shouldSkip = false;
+            switch (cellVariant) {
+              case "number": {
+                if (!pastedValue) {
+                  processedValue = null;
+                } else {
+                  const num = Number.parseFloat(pastedValue);
+                  if (Number.isNaN(num)) shouldSkip = true;
+                  else processedValue = num;
+                }
+                break;
+              }
+              case "checkbox": {
+                if (!pastedValue) {
+                  processedValue = false;
+                } else {
+                  const lower = pastedValue.toLowerCase();
+                  if (VALID_BOOLEANS.has(lower)) {
+                    processedValue = TRUTHY_BOOLEANS.has(lower);
+                  } else {
+                    shouldSkip = true;
+                  }
+                }
+                break;
+              }
+              case "date": {
+                if (!pastedValue) {
+                  processedValue = null;
+                } else {
+                  const date = new Date(pastedValue);
+                  if (Number.isNaN(date.getTime())) shouldSkip = true;
+                  else processedValue = date;
+                }
+                break;
+              }
+              case "select": {
+                const options = cellOpts?.options ?? [];
+                if (!pastedValue) {
+                  processedValue = null;
+                } else {
+                  const matched = matchSelectOption(pastedValue, options);
+                  if (matched) processedValue = matched;
+                  else shouldSkip = true;
+                }
+                break;
+              }
+              case "multi-select": {
+                const options = cellOpts?.options ?? [];
+                let values = [];
+                try {
+                  const parsed = JSON.parse(pastedValue);
+                  if (Array.isArray(parsed)) {
+                    values = parsed.filter((v) => typeof v === "string");
+                  }
+                } catch {
+                  values = pastedValue ? pastedValue.split(",").map((v) => v.trim()) : [];
+                }
+                const validated = values.map((v) => matchSelectOption(v, options)).filter(Boolean);
+                if (values.length > 0 && validated.length === 0) {
+                  shouldSkip = true;
+                } else {
+                  processedValue = validated;
+                }
+                break;
+              }
+              case "file": {
+                if (!pastedValue) {
+                  processedValue = [];
+                } else {
+                  try {
+                    const parsed = JSON.parse(pastedValue);
+                    if (!Array.isArray(parsed)) {
+                      shouldSkip = true;
+                    } else {
+                      const validFiles = parsed.filter(getIsFileCellData);
+                      if (parsed.length > 0 && validFiles.length === 0) {
+                        shouldSkip = true;
+                      } else {
+                        processedValue = validFiles;
+                      }
+                    }
+                  } catch {
+                    shouldSkip = true;
+                  }
+                }
+                break;
+              }
+              case "url": {
+                if (!pastedValue) {
+                  processedValue = "";
+                } else {
+                  const firstChar = pastedValue[0];
+                  if (firstChar === "[" || firstChar === "{") {
+                    shouldSkip = true;
+                  } else {
+                    try {
+                      new URL(pastedValue);
+                      processedValue = pastedValue;
+                    } catch {
+                      if (DOMAIN_REGEX.test(pastedValue)) {
+                        processedValue = pastedValue;
+                      } else {
+                        shouldSkip = true;
+                      }
+                    }
+                  }
+                }
+                break;
+              }
+              default: {
+                if (!pastedValue) {
+                  processedValue = "";
+                  break;
+                }
+                if (ISO_DATE_REGEX.test(pastedValue)) {
+                  const date = new Date(pastedValue);
+                  if (!Number.isNaN(date.getTime())) {
+                    processedValue = formatDate(date);
+                    break;
+                  }
+                }
+                const firstChar = pastedValue[0];
+                if (firstChar === "[" || firstChar === "{" || firstChar === "t" || firstChar === "f") {
+                  try {
+                    const parsed = JSON.parse(pastedValue);
+                    if (Array.isArray(parsed)) {
+                      if (parsed.length > 0 && parsed.every(getIsFileCellData)) {
+                        processedValue = parsed.map((f) => f.name).join(", ");
+                      } else if (parsed.every((v) => typeof v === "string")) {
+                        processedValue = parsed.join(", ");
+                      }
+                    } else if (typeof parsed === "boolean") {
+                      processedValue = parsed ? msg.booleanText.checked : msg.booleanText.unchecked;
+                    }
+                  } catch {
+                    const lower = pastedValue.toLowerCase();
+                    if (lower === "true" || lower === "false") {
+                      processedValue = lower === "true" ? msg.booleanText.checked : msg.booleanText.unchecked;
+                    }
+                  }
+                }
+              }
+            }
+            if (shouldSkip) {
+              cellsSkipped++;
+              endRowIndex = Math.max(endRowIndex, targetRowIndex);
+              endColIndex = Math.max(endColIndex, targetColIndex);
+              continue;
+            }
+            updates.push({
+              rowIndex: targetRowIndex,
+              columnId: targetColumnId,
+              value: processedValue
+            });
+            cellsUpdated++;
+            endRowIndex = Math.max(endRowIndex, targetRowIndex);
+            endColIndex = Math.max(endColIndex, targetColIndex);
+          }
+        }
+        if (updates.length > 0) {
+          if (propsRef.current.onPaste) {
+            await propsRef.current.onPaste(updates);
+          }
+          const allUpdates = [...updates];
+          if (currentState.cutCells.size > 0) {
+            const columnById = new Map(tableColumns.map((c) => [c.id, c]));
+            for (const cellKey of currentState.cutCells) {
+              const { rowIndex, columnId } = parseCellKey(cellKey);
+              const column = columnById.get(columnId);
+              const cellVariant = column?.columnDef?.meta?.cell?.variant;
+              const emptyValue = getEmptyCellValue(cellVariant);
+              allUpdates.push({ rowIndex, columnId, value: emptyValue });
+            }
+            store.setState("cutCells", /* @__PURE__ */ new Set());
+          }
+          onDataUpdate(allUpdates);
+          if (cellsSkipped > 0) {
+            toastSuccess(msg.toast.cellsPastedWithSkipped(cellsUpdated, cellsSkipped));
+          } else {
+            toastSuccess(msg.toast.cellsPasted(cellsUpdated));
+          }
+          const endColumnId = navigableColumnIds[endColIndex];
+          if (endColumnId) {
+            selectRange(
+              {
+                rowIndex: startRowIndex,
+                columnId: currentState.focusedCell.columnId
+              },
+              { rowIndex: endRowIndex, columnId: endColumnId }
+            );
+          }
+          restoreFocus(dataGridRef.current);
+        } else if (cellsSkipped > 0) {
+          toastError(msg.toast.pasteSkipped(cellsSkipped));
+        }
+        if (currentState.pasteDialog.open) {
+          store.setState("pasteDialog", {
+            open: false,
+            rowsNeeded: 0,
+            clipboardText: ""
+          });
+        }
+      } catch {
+        toastError(msg.toast.pasteFailed);
+      }
+    },
+    [store, navigableColumnIds, propsRef, onDataUpdate, selectRange, restoreFocus]
+  );
+  const releaseFocusGuard = React.useCallback((immediate = false) => {
+    if (immediate) {
+      focusGuardRef.current = false;
+      return;
+    }
+    setTimeout(() => {
+      focusGuardRef.current = false;
+    }, 300);
+  }, []);
+  const focusCellWrapper = React.useCallback(
+    (rowIndex, columnId) => {
+      focusGuardRef.current = true;
+      requestAnimationFrame(() => {
+        const cellKey = getCellKey(rowIndex, columnId);
+        const cellWrapperElement = cellMapRef.current.get(cellKey);
+        if (!cellWrapperElement) {
+          const container = dataGridRef.current;
+          if (container) {
+            container.focus();
+          }
+          releaseFocusGuard();
+          return;
+        }
+        cellWrapperElement.focus();
+        releaseFocusGuard();
+      });
+    },
+    [releaseFocusGuard]
+  );
+  const focusCell = React.useCallback(
+    (rowIndex, columnId) => {
+      store.batch(() => {
+        store.setState("focusedCell", { rowIndex, columnId });
+        store.setState("editingCell", null);
+      });
+      const currentState = store.getState();
+      if (currentState.searchOpen) return;
+      focusCellWrapper(rowIndex, columnId);
+    },
+    [store, focusCellWrapper]
+  );
+  const onRowsDelete = React.useCallback(
+    async (rowIndices) => {
+      if (propsRef.current.readOnly || !propsRef.current.onRowsDelete || rowIndices.length === 0) return;
+      const currentTable = tableRef.current;
+      const rows = currentTable?.getRowModel().rows;
+      if (!rows || rows.length === 0) return;
+      const currentState = store.getState();
+      const currentFocusedColumn = currentState.focusedCell?.columnId ?? navigableColumnIds[0];
+      const minDeletedRowIndex = Math.min(...rowIndices);
+      const rowsToDelete = [];
+      for (const rowIndex of rowIndices) {
+        const row = rows[rowIndex];
+        if (row) {
+          rowsToDelete.push(row.original);
+        }
+      }
+      await propsRef.current.onRowsDelete(rowsToDelete, rowIndices);
+      store.batch(() => {
+        store.setState("selectionState", {
+          selectedCells: /* @__PURE__ */ new Set(),
+          selectionRange: null,
+          isSelecting: false
+        });
+        store.setState("rowSelection", {});
+        store.setState("editingCell", null);
+      });
+      requestAnimationFrame(() => {
+        const currentTable2 = tableRef.current;
+        const currentRows = currentTable2?.getRowModel().rows ?? [];
+        const newRowCount = currentRows.length ?? propsRef.current.data.length;
+        if (newRowCount > 0 && currentFocusedColumn) {
+          const targetRowIndex = Math.min(minDeletedRowIndex, newRowCount - 1);
+          focusCell(targetRowIndex, currentFocusedColumn);
+        }
+      });
+    },
+    [propsRef, store, navigableColumnIds, focusCell]
+  );
+  const navigateCell = React.useCallback(
+    (direction) => {
+      const currentState = store.getState();
+      if (!currentState.focusedCell) return;
+      const { rowIndex, columnId } = currentState.focusedCell;
+      const currentColIndex = navigableColumnIds.indexOf(columnId);
+      const rowVirtualizer2 = rowVirtualizerRef.current;
+      const currentTable = tableRef.current;
+      const rows = currentTable?.getRowModel().rows ?? [];
+      const rowCount = rows.length ?? propsRef.current.data.length;
+      let newRowIndex = rowIndex;
+      let newColumnId = columnId;
+      const isRtl = dir === "rtl";
+      switch (direction) {
+        case "up":
+          newRowIndex = Math.max(0, rowIndex - 1);
+          break;
+        case "down":
+          newRowIndex = Math.min(rowCount - 1, rowIndex + 1);
+          break;
+        case "left":
+          if (isRtl) {
+            if (currentColIndex < navigableColumnIds.length - 1) {
+              const nextColumnId = navigableColumnIds[currentColIndex + 1];
+              if (nextColumnId) newColumnId = nextColumnId;
+            }
+          } else {
+            if (currentColIndex > 0) {
+              const prevColumnId = navigableColumnIds[currentColIndex - 1];
+              if (prevColumnId) newColumnId = prevColumnId;
+            }
+          }
+          break;
+        case "right":
+          if (isRtl) {
+            if (currentColIndex > 0) {
+              const prevColumnId = navigableColumnIds[currentColIndex - 1];
+              if (prevColumnId) newColumnId = prevColumnId;
+            }
+          } else {
+            if (currentColIndex < navigableColumnIds.length - 1) {
+              const nextColumnId = navigableColumnIds[currentColIndex + 1];
+              if (nextColumnId) newColumnId = nextColumnId;
+            }
+          }
+          break;
+        case "home":
+          if (navigableColumnIds.length > 0) {
+            newColumnId = navigableColumnIds[0] ?? columnId;
+          }
+          break;
+        case "end":
+          if (navigableColumnIds.length > 0) {
+            newColumnId = navigableColumnIds[navigableColumnIds.length - 1] ?? columnId;
+          }
+          break;
+        case "ctrl+home":
+          newRowIndex = 0;
+          if (navigableColumnIds.length > 0) {
+            newColumnId = navigableColumnIds[0] ?? columnId;
+          }
+          break;
+        case "ctrl+end":
+          newRowIndex = Math.max(0, rowCount - 1);
+          if (navigableColumnIds.length > 0) {
+            newColumnId = navigableColumnIds[navigableColumnIds.length - 1] ?? columnId;
+          }
+          break;
+        case "ctrl+up":
+          newRowIndex = 0;
+          break;
+        case "ctrl+down":
+          newRowIndex = Math.max(0, rowCount - 1);
+          break;
+        case "pageup":
+          if (rowVirtualizer2) {
+            const visibleRange = rowVirtualizer2.getVirtualItems();
+            const pageSize = visibleRange.length ?? 10;
+            newRowIndex = Math.max(0, rowIndex - pageSize);
+          } else {
+            newRowIndex = Math.max(0, rowIndex - 10);
+          }
+          break;
+        case "pagedown":
+          if (rowVirtualizer2) {
+            const visibleRange = rowVirtualizer2.getVirtualItems();
+            const pageSize = visibleRange.length ?? 10;
+            newRowIndex = Math.min(rowCount - 1, rowIndex + pageSize);
+          } else {
+            newRowIndex = Math.min(rowCount - 1, rowIndex + 10);
+          }
+          break;
+        case "pageleft":
+          if (currentColIndex > 0) {
+            const targetIndex = Math.max(0, currentColIndex - HORIZONTAL_PAGE_SIZE);
+            const targetColumnId = navigableColumnIds[targetIndex];
+            if (targetColumnId) newColumnId = targetColumnId;
+          }
+          break;
+        case "pageright":
+          if (currentColIndex < navigableColumnIds.length - 1) {
+            const targetIndex = Math.min(navigableColumnIds.length - 1, currentColIndex + HORIZONTAL_PAGE_SIZE);
+            const targetColumnId = navigableColumnIds[targetIndex];
+            if (targetColumnId) newColumnId = targetColumnId;
+          }
+          break;
+      }
+      if (newRowIndex !== rowIndex || newColumnId !== columnId) {
+        focusCell(newRowIndex, newColumnId);
+        const container = dataGridRef.current;
+        if (!container) return;
+        const targetRow = rowMapRef.current.get(newRowIndex);
+        const cellKey = getCellKey(newRowIndex, newColumnId);
+        const targetCell = cellMapRef.current.get(cellKey);
+        if (!targetRow) {
+          if (rowVirtualizer2) {
+            const align = direction === "up" || direction === "pageup" || direction === "ctrl+up" || direction === "ctrl+home" ? "start" : direction === "down" || direction === "pagedown" || direction === "ctrl+down" || direction === "ctrl+end" ? "end" : "center";
+            rowVirtualizer2.scrollToIndex(newRowIndex, { align });
+            if (newColumnId !== columnId) {
+              requestAnimationFrame(() => {
+                const cellKeyRetry = getCellKey(newRowIndex, newColumnId);
+                const targetCellRetry = cellMapRef.current.get(cellKeyRetry);
+                if (targetCellRetry) {
+                  const scrollDirection = getScrollDirection(direction);
+                  scrollCellIntoView({
+                    container,
+                    targetCell: targetCellRetry,
+                    tableRef,
+                    viewportOffset: VIEWPORT_OFFSET,
+                    direction: scrollDirection,
+                    isRtl: dir === "rtl"
+                  });
+                }
+              });
+            }
+          } else {
+            const rowHeightValue2 = getRowHeightValue(rowHeight);
+            const estimatedScrollTop = newRowIndex * rowHeightValue2;
+            container.scrollTop = estimatedScrollTop;
+          }
+          return;
+        }
+        if (newRowIndex !== rowIndex && targetRow) {
+          requestAnimationFrame(() => {
+            const containerRect = container.getBoundingClientRect();
+            const headerHeight = headerRef.current?.getBoundingClientRect().height ?? 0;
+            const footerHeight = footerRef.current?.getBoundingClientRect().height ?? 0;
+            const viewportTop = containerRect.top + headerHeight + VIEWPORT_OFFSET;
+            const viewportBottom = containerRect.bottom - footerHeight - VIEWPORT_OFFSET;
+            const rowRect = targetRow.getBoundingClientRect();
+            const isFullyVisible = rowRect.top >= viewportTop && rowRect.bottom <= viewportBottom;
+            if (!isFullyVisible) {
+              const isVerticalNavigation = direction === "up" || direction === "down" || direction === "pageup" || direction === "pagedown" || direction === "ctrl+up" || direction === "ctrl+down" || direction === "ctrl+home" || direction === "ctrl+end";
+              if (isVerticalNavigation) {
+                if (direction === "down" || direction === "pagedown" || direction === "ctrl+down" || direction === "ctrl+end") {
+                  container.scrollTop += rowRect.bottom - viewportBottom;
+                } else {
+                  container.scrollTop -= viewportTop - rowRect.top;
+                }
+              }
+            }
+          });
+        }
+        if (newColumnId !== columnId && targetCell) {
+          requestAnimationFrame(() => {
+            const scrollDirection = getScrollDirection(direction);
+            scrollCellIntoView({
+              container,
+              targetCell,
+              tableRef,
+              viewportOffset: VIEWPORT_OFFSET,
+              direction: scrollDirection,
+              isRtl: dir === "rtl"
+            });
+          });
+        }
+      }
+    },
+    [dir, store, navigableColumnIds, focusCell, propsRef, rowHeight]
+  );
+  const onCellEditingStart = React.useCallback(
+    (rowIndex, columnId) => {
+      if (propsRef.current.readOnly) return;
+      store.batch(() => {
+        store.setState("focusedCell", { rowIndex, columnId });
+        store.setState("editingCell", { rowIndex, columnId });
+      });
+    },
+    [store, propsRef]
+  );
+  const onCellEditingStop = React.useCallback(
+    (opts) => {
+      const currentState = store.getState();
+      const currentEditing = currentState.editingCell;
+      store.setState("editingCell", null);
+      if (opts?.moveToNextRow && currentEditing) {
+        const { rowIndex, columnId } = currentEditing;
+        const currentTable = tableRef.current;
+        const rows = currentTable?.getRowModel().rows ?? [];
+        const rowCount = rows.length ?? propsRef.current.data.length;
+        const nextRowIndex = rowIndex + 1;
+        if (nextRowIndex < rowCount) {
+          requestAnimationFrame(() => {
+            focusCell(nextRowIndex, columnId);
+          });
+        }
+      } else if (opts?.direction && currentEditing) {
+        const { rowIndex, columnId } = currentEditing;
+        focusCell(rowIndex, columnId);
+        requestAnimationFrame(() => {
+          navigateCell(opts.direction ?? "right");
+        });
+      } else if (currentEditing) {
+        const { rowIndex, columnId } = currentEditing;
+        focusCellWrapper(rowIndex, columnId);
+      }
+    },
+    [store, propsRef, focusCell, navigateCell, focusCellWrapper]
+  );
+  const onSearchOpenChange = React.useCallback(
+    (open) => {
+      if (open) {
+        store.setState("searchOpen", true);
+        return;
+      }
+      const currentState = store.getState();
+      const currentMatch = currentState.matchIndex >= 0 && currentState.searchMatches[currentState.matchIndex];
+      store.batch(() => {
+        store.setState("searchOpen", false);
+        store.setState("searchQuery", "");
+        store.setState("searchMatches", []);
+        store.setState("matchIndex", -1);
+        if (currentMatch) {
+          store.setState("focusedCell", {
+            rowIndex: currentMatch.rowIndex,
+            columnId: currentMatch.columnId
+          });
+        }
+      });
+      if (dataGridRef.current && document.activeElement !== dataGridRef.current) {
+        dataGridRef.current.focus();
+      }
+    },
+    [store]
+  );
+  const onSearch = React.useCallback(
+    (query) => {
+      if (!query.trim()) {
+        store.batch(() => {
+          store.setState("searchMatches", []);
+          store.setState("matchIndex", -1);
+        });
+        return;
+      }
+      const matches = [];
+      const currentTable = tableRef.current;
+      const rows = currentTable?.getRowModel().rows ?? [];
+      const lowerQuery = query.toLowerCase();
+      for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+        const row = rows[rowIndex];
+        if (!row) continue;
+        const cellById = new Map(row.getVisibleCells().map((c) => [c.column.id, c]));
+        for (const columnId of columnIds) {
+          const cell = cellById.get(columnId);
+          if (!cell) continue;
+          const value = cell.getValue();
+          const stringValue = String(value ?? "").toLowerCase();
+          if (stringValue.includes(lowerQuery)) {
+            matches.push({ rowIndex, columnId });
+          }
+        }
+      }
+      store.batch(() => {
+        store.setState("searchMatches", matches);
+        store.setState("matchIndex", matches.length > 0 ? 0 : -1);
+      });
+      if (matches.length > 0 && matches[0]) {
+        const firstMatch = matches[0];
+        rowVirtualizerRef.current?.scrollToIndex(firstMatch.rowIndex, {
+          align: "center"
+        });
+      }
+    },
+    [columnIds, store]
+  );
+  const onSearchQueryChange = React.useCallback((query) => store.setState("searchQuery", query), [store]);
+  const onNavigateToPrevMatch = React.useCallback(() => {
+    const currentState = store.getState();
+    if (currentState.searchMatches.length === 0) return;
+    const prevIndex = currentState.matchIndex - 1 < 0 ? currentState.searchMatches.length - 1 : currentState.matchIndex - 1;
+    const match = currentState.searchMatches[prevIndex];
+    if (match) {
+      rowVirtualizerRef.current?.scrollToIndex(match.rowIndex, {
+        align: "center"
+      });
+      requestAnimationFrame(() => {
+        store.setState("matchIndex", prevIndex);
+        requestAnimationFrame(() => {
+          focusCell(match.rowIndex, match.columnId);
+        });
+      });
+    }
+  }, [store, focusCell]);
+  const onNavigateToNextMatch = React.useCallback(() => {
+    const currentState = store.getState();
+    if (currentState.searchMatches.length === 0) return;
+    const nextIndex = (currentState.matchIndex + 1) % currentState.searchMatches.length;
+    const match = currentState.searchMatches[nextIndex];
+    if (match) {
+      rowVirtualizerRef.current?.scrollToIndex(match.rowIndex, {
+        align: "center"
+      });
+      requestAnimationFrame(() => {
+        store.setState("matchIndex", nextIndex);
+        requestAnimationFrame(() => {
+          focusCell(match.rowIndex, match.columnId);
+        });
+      });
+    }
+  }, [store, focusCell]);
+  const searchMatchSet = React.useMemo(() => {
+    return new Set(searchMatches.map((m) => getCellKey(m.rowIndex, m.columnId)));
+  }, [searchMatches]);
+  const getIsSearchMatch = React.useCallback(
+    (rowIndex, columnId) => {
+      return searchMatchSet.has(getCellKey(rowIndex, columnId));
+    },
+    [searchMatchSet]
+  );
+  const getIsActiveSearchMatch = React.useCallback(
+    (rowIndex, columnId) => {
+      const currentState = store.getState();
+      if (currentState.matchIndex < 0) return false;
+      const currentMatch = currentState.searchMatches[currentState.matchIndex];
+      return currentMatch?.rowIndex === rowIndex && currentMatch?.columnId === columnId;
+    },
+    [store]
+  );
+  const searchMatchesByRow = React.useMemo(() => {
+    if (searchMatches.length === 0) return null;
+    const rowMap = /* @__PURE__ */ new Map();
+    for (const match of searchMatches) {
+      let columnSet = rowMap.get(match.rowIndex);
+      if (!columnSet) {
+        columnSet = /* @__PURE__ */ new Set();
+        rowMap.set(match.rowIndex, columnSet);
+      }
+      columnSet.add(match.columnId);
+    }
+    return rowMap;
+  }, [searchMatches]);
+  const activeSearchMatch = React.useMemo(() => {
+    if (matchIndex < 0 || searchMatches.length === 0) return null;
+    return searchMatches[matchIndex] ?? null;
+  }, [searchMatches, matchIndex]);
+  const blurCell = React.useCallback(() => {
+    const currentState = store.getState();
+    if (currentState.editingCell && document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+    store.batch(() => {
+      store.setState("focusedCell", null);
+      store.setState("editingCell", null);
+    });
+  }, [store]);
+  const scrollToCell = React.useCallback(
+    (rowIndex, columnId) => {
+      requestAnimationFrame(() => {
+        const container = dataGridRef.current;
+        const cellKey = getCellKey(rowIndex, columnId);
+        const targetCell = cellMapRef.current.get(cellKey);
+        if (container && targetCell) {
+          scrollCellIntoView({
+            container,
+            targetCell,
+            tableRef,
+            viewportOffset: VIEWPORT_OFFSET,
+            isRtl: dir === "rtl"
+          });
+        }
+      });
+    },
+    [dir]
+  );
+  const onCellClick = React.useCallback(
+    (rowIndex, columnId, event) => {
+      if (event?.button === 2) return;
+      const currentState = store.getState();
+      const currentFocused = currentState.focusedCell;
+      if (event) {
+        if (event.ctrlKey || event.metaKey) {
+          event.preventDefault();
+          const cellKey = getCellKey(rowIndex, columnId);
+          const newSelectedCells = new Set(currentState.selectionState.selectedCells);
+          if (newSelectedCells.has(cellKey)) {
+            newSelectedCells.delete(cellKey);
+          } else {
+            newSelectedCells.add(cellKey);
+          }
+          store.setState("selectionState", {
+            selectedCells: newSelectedCells,
+            selectionRange: null,
+            isSelecting: false
+          });
+          focusCell(rowIndex, columnId);
+          scrollToCell(rowIndex, columnId);
+          return;
+        }
+        if (event.shiftKey && currentState.focusedCell) {
+          event.preventDefault();
+          selectRange(currentState.focusedCell, { rowIndex, columnId });
+          scrollToCell(rowIndex, columnId);
+          return;
+        }
+      }
+      const hasSelectedCells = currentState.selectionState.selectedCells.size > 0;
+      const hasSelectedRows = Object.keys(currentState.rowSelection).length > 0;
+      if (hasSelectedCells && !currentState.selectionState.isSelecting) {
+        const cellKey = getCellKey(rowIndex, columnId);
+        const isClickingSelectedCell = currentState.selectionState.selectedCells.has(cellKey);
+        if (!isClickingSelectedCell) {
+          onSelectionClear();
+        } else {
+          focusCell(rowIndex, columnId);
+          scrollToCell(rowIndex, columnId);
+          return;
+        }
+      } else if (hasSelectedRows && columnId !== "select") {
+        onSelectionClear();
+      }
+      if (currentFocused?.rowIndex === rowIndex && currentFocused?.columnId === columnId) {
+        onCellEditingStart(rowIndex, columnId);
+      } else {
+        focusCell(rowIndex, columnId);
+        scrollToCell(rowIndex, columnId);
+      }
+    },
+    [store, focusCell, scrollToCell, onCellEditingStart, selectRange, onSelectionClear]
+  );
+  const onCellDoubleClick = React.useCallback(
+    (rowIndex, columnId, event) => {
+      if (event?.defaultPrevented) return;
+      onCellEditingStart(rowIndex, columnId);
+    },
+    [onCellEditingStart]
+  );
+  const onCellMouseDown = React.useCallback(
+    (rowIndex, columnId, event) => {
+      if (event.button === 2) {
+        return;
+      }
+      event.preventDefault();
+      if (!event.ctrlKey && !event.metaKey && !event.shiftKey) {
+        const cellKey = getCellKey(rowIndex, columnId);
+        store.batch(() => {
+          store.setState("selectionState", {
+            selectedCells: propsRef.current.enableSingleCellSelection ? /* @__PURE__ */ new Set([cellKey]) : /* @__PURE__ */ new Set(),
+            selectionRange: {
+              start: { rowIndex, columnId },
+              end: { rowIndex, columnId }
+            },
+            isSelecting: true
+          });
+          store.setState("rowSelection", {});
+        });
+      }
+    },
+    [store, propsRef]
+  );
+  const onCellMouseEnter = React.useCallback(
+    (rowIndex, columnId) => {
+      const currentState = store.getState();
+      if (currentState.selectionState.isSelecting && currentState.selectionState.selectionRange) {
+        const start = currentState.selectionState.selectionRange.start;
+        const end = { rowIndex, columnId };
+        if (currentState.focusedCell?.rowIndex !== start.rowIndex || currentState.focusedCell?.columnId !== start.columnId) {
+          focusCell(start.rowIndex, start.columnId);
+        }
+        selectRange(start, end, true);
+      }
+    },
+    [store, selectRange, focusCell]
+  );
+  const onCellMouseUp = React.useCallback(() => {
+    const currentState = store.getState();
+    store.setState("selectionState", {
+      ...currentState.selectionState,
+      isSelecting: false
+    });
+  }, [store]);
+  const onCellContextMenu = React.useCallback(
+    (rowIndex, columnId, event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const currentState = store.getState();
+      const cellKey = getCellKey(rowIndex, columnId);
+      const isTargetCellSelected = currentState.selectionState.selectedCells.has(cellKey);
+      if (!isTargetCellSelected) {
+        store.batch(() => {
+          store.setState("selectionState", {
+            selectedCells: /* @__PURE__ */ new Set([cellKey]),
+            selectionRange: {
+              start: { rowIndex, columnId },
+              end: { rowIndex, columnId }
+            },
+            isSelecting: false
+          });
+          store.setState("focusedCell", { rowIndex, columnId });
+        });
+      }
+      store.setState("contextMenu", {
+        open: true,
+        x: event.clientX,
+        y: event.clientY
+      });
+    },
+    [store]
+  );
+  const onContextMenuOpenChange = React.useCallback(
+    (open) => {
+      if (!open) {
+        const currentMenu = store.getState().contextMenu;
+        store.setState("contextMenu", {
+          open: false,
+          x: currentMenu.x,
+          y: currentMenu.y
+        });
+      }
+    },
+    [store]
+  );
+  const onSortingChange = React.useCallback(
+    (updater) => {
+      const currentState = store.getState();
+      const newSorting = typeof updater === "function" ? updater(currentState.sorting) : updater;
+      store.setState("sorting", newSorting);
+      propsRef.current.onSortingChange?.(newSorting);
+    },
+    [store, propsRef]
+  );
+  const onColumnFiltersChange = React.useCallback(
+    (updater) => {
+      const currentState = store.getState();
+      const newColumnFilters = typeof updater === "function" ? updater(currentState.columnFilters) : updater;
+      store.setState("columnFilters", newColumnFilters);
+      propsRef.current.onColumnFiltersChange?.(newColumnFilters);
+    },
+    [store, propsRef]
+  );
+  const onRowSelectionChange = React.useCallback(
+    (updater) => {
+      const currentState = store.getState();
+      const newRowSelection = typeof updater === "function" ? updater(currentState.rowSelection) : updater;
+      const selectedRows = Object.keys(newRowSelection).filter((key) => newRowSelection[key]);
+      const selectedCells = /* @__PURE__ */ new Set();
+      const rows = tableRef.current?.getRowModel().rows ?? [];
+      for (const rowId of selectedRows) {
+        const rowIndex = rows.findIndex((r) => r.id === rowId);
+        if (rowIndex === -1) continue;
+        for (const columnId of columnIds) {
+          selectedCells.add(getCellKey(rowIndex, columnId));
+        }
+      }
+      store.batch(() => {
+        store.setState("rowSelection", newRowSelection);
+        store.setState("selectionState", {
+          selectedCells,
+          selectionRange: null,
+          isSelecting: false
+        });
+        store.setState("focusedCell", null);
+        store.setState("editingCell", null);
+      });
+      propsRef.current.onRowSelectionChange?.(updater);
+    },
+    [store, columnIds, propsRef]
+  );
+  const onRowSelect = React.useCallback(
+    (rowId, selected, shiftKey) => {
+      const currentState = store.getState();
+      const rows = tableRef.current?.getRowModel().rows ?? [];
+      const currentRowIndex = rows.findIndex((r) => r.id === rowId);
+      const currentRow = currentRowIndex >= 0 ? rows[currentRowIndex] : null;
+      if (!currentRow) return;
+      if (shiftKey && currentState.lastClickedRowId !== null) {
+        const lastClickedRowIndex = rows.findIndex((r) => r.id === currentState.lastClickedRowId);
+        if (lastClickedRowIndex >= 0) {
+          const startIndex = Math.min(lastClickedRowIndex, currentRowIndex);
+          const endIndex = Math.max(lastClickedRowIndex, currentRowIndex);
+          const newRowSelection = {
+            ...currentState.rowSelection
+          };
+          for (let i = startIndex; i <= endIndex; i++) {
+            const row = rows[i];
+            if (row) {
+              newRowSelection[row.id] = selected;
+            }
+          }
+          onRowSelectionChange(newRowSelection);
+        } else {
+          onRowSelectionChange({
+            ...currentState.rowSelection,
+            [currentRow.id]: selected
+          });
+        }
+      } else {
+        onRowSelectionChange({
+          ...currentState.rowSelection,
+          [currentRow.id]: selected
+        });
+      }
+      store.setState("lastClickedRowId", rowId);
+    },
+    [store, onRowSelectionChange]
+  );
+  const onRowHeightChange = React.useCallback(
+    (updater) => {
+      const currentState = store.getState();
+      const newRowHeight = typeof updater === "function" ? updater(currentState.rowHeight) : updater;
+      store.setState("rowHeight", newRowHeight);
+      propsRef.current.onRowHeightChange?.(newRowHeight);
+    },
+    [store, propsRef]
+  );
+  const onColumnClick = React.useCallback(
+    (columnId) => {
+      if (!propsRef.current.enableColumnSelection) {
+        onSelectionClear();
+        return;
+      }
+      selectColumn(columnId);
+    },
+    [propsRef, selectColumn, onSelectionClear]
+  );
+  const onPasteDialogOpenChange = React.useCallback(
+    (open) => {
+      if (!open) {
+        store.setState("pasteDialog", {
+          open: false,
+          rowsNeeded: 0,
+          clipboardText: ""
+        });
+      }
+    },
+    [store]
+  );
+  const defaultColumn = React.useMemo(
+    () => ({
+      // Cell is rendered directly in DataGridRow to bypass flexRender's
+      // unstable cell.getContext() (https://github.com/TanStack/table/issues/4794)
+      minSize: MIN_COLUMN_SIZE,
+      maxSize: MAX_COLUMN_SIZE
+    }),
+    []
+  );
+  const hasRowAdd = Boolean(props.onRowAdd);
+  const hasRowsDelete = Boolean(props.onRowsDelete);
+  const hasFilesUpload = Boolean(props.onFilesUpload);
+  const hasFilesDelete = Boolean(props.onFilesDelete);
+  const onFilesUpload = React.useCallback(
+    (params) => {
+      const upload = propsRef.current.onFilesUpload;
+      return upload ? upload(params) : Promise.resolve([]);
+    },
+    [propsRef]
+  );
+  const onFilesDelete = React.useCallback(
+    async (params) => {
+      await propsRef.current.onFilesDelete?.(params);
+    },
+    [propsRef]
+  );
+  const tableMeta = React.useMemo(() => {
+    return {
+      ...propsRef.current.meta,
+      dataGridRef,
+      cellMapRef,
+      get focusedCell() {
+        return store.getState().focusedCell;
+      },
+      get editingCell() {
+        return store.getState().editingCell;
+      },
+      get selectionState() {
+        return store.getState().selectionState;
+      },
+      get searchOpen() {
+        return store.getState().searchOpen;
+      },
+      get contextMenu() {
+        return store.getState().contextMenu;
+      },
+      get pasteDialog() {
+        return store.getState().pasteDialog;
+      },
+      get rowHeight() {
+        return store.getState().rowHeight;
+      },
+      get readOnly() {
+        return propsRef.current.readOnly;
+      },
+      getIsCellSelected,
+      getIsSearchMatch,
+      getIsActiveSearchMatch,
+      getVisualRowIndex,
+      scrollToCell: (rowIndex, columnId, align = "auto") => {
+        const container = dataGridRef.current;
+        if (!container) return;
+        rowVirtualizerRef.current?.scrollToIndex(rowIndex, { align });
+        const scrollRowIntoView = (retries = 1) => {
+          requestAnimationFrame(() => {
+            const targetRow = rowMapRef.current.get(rowIndex);
+            if (!targetRow) {
+              if (retries > 0) scrollRowIntoView(retries - 1);
+              return;
+            }
+            const headerBottom = headerRef.current?.getBoundingClientRect().bottom ?? container.getBoundingClientRect().top;
+            const viewportTop = headerBottom + VIEWPORT_OFFSET;
+            const rowRect = targetRow.getBoundingClientRect();
+            if (rowRect.top < viewportTop) {
+              container.scrollTop -= viewportTop - rowRect.top;
+            }
+            const cellKey = getCellKey(rowIndex, columnId);
+            const targetCell = cellMapRef.current.get(cellKey);
+            if (targetCell) {
+              scrollCellIntoView({
+                container,
+                targetCell,
+                tableRef,
+                viewportOffset: VIEWPORT_OFFSET,
+                isRtl: dir === "rtl"
+              });
+            }
+          });
+        };
+        scrollRowIntoView();
+      },
+      onRowHeightChange,
+      onRowSelect,
+      onDataUpdate,
+      onRowsDelete: hasRowsDelete ? onRowsDelete : void 0,
+      onColumnClick,
+      onCellClick,
+      onCellDoubleClick,
+      onCellMouseDown,
+      onCellMouseEnter,
+      onCellMouseUp,
+      onCellContextMenu,
+      onCellEditingStart,
+      onCellEditingStop,
+      onCellsCopy,
+      onCellsCut,
+      onCellsPaste,
+      onSelectionClear,
+      onFilesUpload: hasFilesUpload ? onFilesUpload : void 0,
+      onFilesDelete: hasFilesDelete ? onFilesDelete : void 0,
+      onContextMenuOpenChange,
+      onPasteDialogOpenChange
+    };
+  }, [
+    propsRef,
+    store,
+    dir,
+    getIsCellSelected,
+    getIsSearchMatch,
+    getIsActiveSearchMatch,
+    getVisualRowIndex,
+    onRowHeightChange,
+    onRowSelect,
+    onDataUpdate,
+    onRowsDelete,
+    onColumnClick,
+    onCellClick,
+    onCellDoubleClick,
+    onCellMouseDown,
+    onCellMouseEnter,
+    onCellMouseUp,
+    onCellContextMenu,
+    onCellEditingStart,
+    onCellEditingStop,
+    onCellsCopy,
+    onCellsCut,
+    onCellsPaste,
+    onSelectionClear,
+    onContextMenuOpenChange,
+    onPasteDialogOpenChange,
+    hasRowsDelete,
+    hasFilesUpload,
+    hasFilesDelete,
+    onFilesUpload,
+    onFilesDelete
+  ]);
+  const getMemoizedCoreRowModel = React.useMemo(() => getCoreRowModel(), []);
+  const getMemoizedFilteredRowModel = React.useMemo(() => getFilteredRowModel(), []);
+  const getMemoizedSortedRowModel = React.useMemo(() => getSortedRowModel(), []);
+  const tableState = React.useMemo(
+    () => ({
+      ...propsRef.current.state,
+      sorting,
+      columnFilters,
+      rowSelection
+    }),
+    [propsRef, sorting, columnFilters, rowSelection]
+  );
+  const tableOptions = React.useMemo(() => {
+    return {
+      ...propsRef.current,
+      data,
+      columns,
+      defaultColumn,
+      initialState: propsRef.current.initialState,
+      state: tableState,
+      onRowSelectionChange,
+      onSortingChange,
+      onColumnFiltersChange,
+      columnResizeMode: "onChange",
+      columnResizeDirection: dir,
+      getCoreRowModel: getMemoizedCoreRowModel,
+      getFilteredRowModel: getMemoizedFilteredRowModel,
+      getSortedRowModel: getMemoizedSortedRowModel,
+      meta: tableMeta
+    };
+  }, [
+    propsRef,
+    data,
+    columns,
+    defaultColumn,
+    tableState,
+    dir,
+    onRowSelectionChange,
+    onSortingChange,
+    onColumnFiltersChange,
+    getMemoizedCoreRowModel,
+    getMemoizedFilteredRowModel,
+    getMemoizedSortedRowModel,
+    tableMeta
+  ]);
+  const table = useReactTable(tableOptions);
+  if (!tableRef.current) {
+    tableRef.current = table;
+  }
+  const columnSizeVars = React.useMemo(() => {
+    const headers = table.getFlatHeaders();
+    const colSizes = {};
+    for (const header of headers) {
+      colSizes[`--header-${header.id}-size`] = header.getSize();
+      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+    }
+    return colSizes;
+  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
+  const isFirefox = React.useSyncExternalStore(
+    React.useCallback(() => () => {
+    }, []),
+    React.useCallback(() => {
+      if (typeof window === "undefined" || typeof navigator === "undefined") {
+        return false;
+      }
+      return navigator.userAgent.indexOf("Firefox") !== -1;
+    }, []),
+    React.useCallback(() => false, [])
+  );
+  const adjustLayout = React.useMemo(() => {
+    const columnPinning = table.getState().columnPinning;
+    return isFirefox && ((columnPinning.left?.length ?? 0) > 0 || (columnPinning.right?.length ?? 0) > 0);
+  }, [isFirefox, table.getState().columnPinning]);
+  const rowVirtualizer = useVirtualizer({
+    count: table.getRowModel().rows.length,
+    getScrollElement: () => dataGridRef.current,
+    estimateSize: () => rowHeightValue,
+    overscan,
+    measureElement: !isFirefox ? (element) => element?.getBoundingClientRect().height : void 0,
+    scrollPaddingStart: (headerRef.current?.getBoundingClientRect().bottom ?? 0) - (dataGridRef.current?.getBoundingClientRect().top ?? 0) + VIEWPORT_OFFSET,
+    // Add extra row buffer to absorb virtual position drift after render measurements
+    scrollPaddingEnd: (dataGridRef.current?.getBoundingClientRect().bottom ?? 0) - (footerRef.current?.getBoundingClientRect().top ?? dataGridRef.current?.getBoundingClientRect().bottom ?? 0) + rowHeightValue + VIEWPORT_OFFSET
+  });
+  if (!rowVirtualizerRef.current) {
+    rowVirtualizerRef.current = rowVirtualizer;
+  }
+  const onScrollToRow = React.useCallback(
+    async (opts) => {
+      const rowIndex = opts?.rowIndex ?? 0;
+      const columnId = opts?.columnId;
+      focusGuardRef.current = true;
+      const navigableIds = propsRef.current.columns.map((c) => {
+        if (c.id) return c.id;
+        if ("accessorKey" in c) return c.accessorKey;
+        return void 0;
+      }).filter((id) => Boolean(id)).filter((c) => !NON_NAVIGABLE_COLUMN_IDS.has(c));
+      const targetColumnId = columnId ?? navigableIds[0];
+      if (!targetColumnId) {
+        releaseFocusGuard(true);
+        return;
+      }
+      async function onScrollAndFocus(retryCount) {
+        if (!targetColumnId) return;
+        const currentRowCount = propsRef.current.data.length;
+        if (rowIndex >= currentRowCount && retryCount > 0) {
+          await new Promise((resolve) => setTimeout(resolve, 50));
+          await onScrollAndFocus(retryCount - 1);
+          return;
+        }
+        const safeRowIndex = Math.min(rowIndex, Math.max(0, currentRowCount - 1));
+        const isBottomHalf = safeRowIndex > currentRowCount / 2;
+        rowVirtualizer.scrollToIndex(safeRowIndex, {
+          align: isBottomHalf ? "end" : "start"
+        });
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        const container = dataGridRef.current;
+        const targetRow = rowMapRef.current.get(safeRowIndex);
+        if (container && targetRow) {
+          const containerRect = container.getBoundingClientRect();
+          const headerHeight = headerRef.current?.getBoundingClientRect().height ?? 0;
+          const footerHeight = footerRef.current?.getBoundingClientRect().height ?? 0;
+          const viewportTop = containerRect.top + headerHeight + VIEWPORT_OFFSET;
+          const viewportBottom = containerRect.bottom - footerHeight - VIEWPORT_OFFSET;
+          const rowRect = targetRow.getBoundingClientRect();
+          const isFullyVisible = rowRect.top >= viewportTop && rowRect.bottom <= viewportBottom;
+          if (!isFullyVisible) {
+            if (rowRect.top < viewportTop) {
+              container.scrollTop -= viewportTop - rowRect.top;
+            } else if (rowRect.bottom > viewportBottom) {
+              container.scrollTop += rowRect.bottom - viewportBottom;
+            }
+          }
+        }
+        store.batch(() => {
+          store.setState("focusedCell", {
+            rowIndex: safeRowIndex,
+            columnId: targetColumnId
+          });
+          store.setState("editingCell", null);
+        });
+        const cellKey = getCellKey(safeRowIndex, targetColumnId);
+        const cellElement = cellMapRef.current.get(cellKey);
+        if (cellElement) {
+          cellElement.focus();
+          releaseFocusGuard();
+        } else if (retryCount > 0) {
+          await new Promise((resolve) => requestAnimationFrame(resolve));
+          await onScrollAndFocus(retryCount - 1);
+        } else {
+          dataGridRef.current?.focus();
+          releaseFocusGuard();
+        }
+      }
+      await onScrollAndFocus(SCROLL_SYNC_RETRY_COUNT);
+    },
+    [rowVirtualizer, propsRef, store, releaseFocusGuard]
+  );
+  const onRowAdd = React.useCallback(
+    async (event) => {
+      if (propsRef.current.readOnly || !propsRef.current.onRowAdd) return;
+      const initialRowCount = propsRef.current.data.length;
+      let result;
+      try {
+        result = await propsRef.current.onRowAdd(event);
+      } catch {
+        return;
+      }
+      if (result === null || event?.defaultPrevented) return;
+      onSelectionClear();
+      const targetRowIndex = result.rowIndex ?? initialRowCount;
+      const targetColumnId = result.columnId;
+      onScrollToRow({
+        rowIndex: targetRowIndex,
+        columnId: targetColumnId
+      });
+    },
+    [propsRef, onScrollToRow, onSelectionClear]
+  );
+  const onDataGridKeyDown = React.useCallback(
+    (event) => {
+      const currentState = store.getState();
+      const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+      const isCtrlPressed = ctrlKey || metaKey;
+      if (propsRef.current.enableSearch && isCtrlPressed && !shiftKey && key === SEARCH_SHORTCUT_KEY) {
+        event.preventDefault();
+        onSearchOpenChange(true);
+        return;
+      }
+      if (propsRef.current.enableSearch && currentState.searchOpen && !currentState.editingCell) {
+        if (key === "Enter") {
+          event.preventDefault();
+          if (shiftKey) {
+            onNavigateToPrevMatch();
+          } else {
+            onNavigateToNextMatch();
+          }
+          return;
+        }
+        if (key === "Escape") {
+          event.preventDefault();
+          onSearchOpenChange(false);
+          return;
+        }
+        return;
+      }
+      if (currentState.editingCell) return;
+      if (isCtrlPressed && (key === "Backspace" || key === "Delete") && !propsRef.current.readOnly && propsRef.current.onRowsDelete) {
+        const rowIndices = /* @__PURE__ */ new Set();
+        const selectedRowIds = Object.keys(currentState.rowSelection);
+        if (selectedRowIds.length > 0) {
+          const currentTable = tableRef.current;
+          const rows = currentTable?.getRowModel().rows ?? [];
+          for (const row of rows) {
+            if (currentState.rowSelection[row.id]) {
+              rowIndices.add(row.index);
+            }
+          }
+        } else if (currentState.selectionState.selectedCells.size > 0) {
+          for (const cellKey of currentState.selectionState.selectedCells) {
+            const { rowIndex } = parseCellKey(cellKey);
+            rowIndices.add(rowIndex);
+          }
+        } else if (currentState.focusedCell) {
+          rowIndices.add(currentState.focusedCell.rowIndex);
+        }
+        if (rowIndices.size > 0) {
+          event.preventDefault();
+          onRowsDelete(Array.from(rowIndices));
+        }
+        return;
+      }
+      if (!currentState.focusedCell) return;
+      let direction = null;
+      if (isCtrlPressed && !shiftKey && key === "a") {
+        event.preventDefault();
+        selectAll();
+        return;
+      }
+      if (isCtrlPressed && !shiftKey && key === "c") {
+        event.preventDefault();
+        onCellsCopy();
+        return;
+      }
+      if (isCtrlPressed && !shiftKey && key === "x" && !propsRef.current.readOnly) {
+        event.preventDefault();
+        onCellsCut();
+        return;
+      }
+      if (propsRef.current.enablePaste && isCtrlPressed && !shiftKey && key === "v" && !propsRef.current.readOnly) {
+        return;
+      }
+      if ((key === "Delete" || key === "Backspace") && !isCtrlPressed && !propsRef.current.readOnly) {
+        const cellsToClear = currentState.selectionState.selectedCells.size > 0 ? Array.from(currentState.selectionState.selectedCells) : currentState.focusedCell ? [getCellKey(currentState.focusedCell.rowIndex, currentState.focusedCell.columnId)] : [];
+        if (cellsToClear.length > 0) {
+          event.preventDefault();
+          const updates = [];
+          const currentTable = tableRef.current;
+          const tableColumns = currentTable?.getAllColumns() ?? [];
+          const columnById = new Map(tableColumns.map((c) => [c.id, c]));
+          for (const cellKey of cellsToClear) {
+            const { rowIndex, columnId } = parseCellKey(cellKey);
+            const column = columnById.get(columnId);
+            const cellVariant = column?.columnDef?.meta?.cell?.variant;
+            const emptyValue = getEmptyCellValue(cellVariant);
+            updates.push({ rowIndex, columnId, value: emptyValue });
+          }
+          onDataUpdate(updates);
+          if (currentState.selectionState.selectedCells.size > 0) {
+            onSelectionClear();
+          }
+          if (currentState.cutCells.size > 0) {
+            store.setState("cutCells", /* @__PURE__ */ new Set());
+          }
+        }
+        return;
+      }
+      if (key === "Enter" && shiftKey && !propsRef.current.readOnly && propsRef.current.onRowAdd) {
+        event.preventDefault();
+        const initialRowCount = propsRef.current.data.length;
+        const currentColumnId = currentState.focusedCell.columnId;
+        Promise.resolve(propsRef.current.onRowAdd()).then(async (result) => {
+          if (result === null) return;
+          onSelectionClear();
+          const targetRowIndex = result.rowIndex ?? initialRowCount;
+          const targetColumnId = result.columnId ?? currentColumnId;
+          onScrollToRow({
+            rowIndex: targetRowIndex,
+            columnId: targetColumnId
+          });
+        }).catch(() => {
+        });
+        return;
+      }
+      switch (key) {
+        case "ArrowUp":
+          if (altKey && !isCtrlPressed && !shiftKey) {
+            direction = "pageup";
+          } else if (isCtrlPressed && shiftKey) {
+            const selectionEdge = currentState.selectionState.selectionRange?.end || currentState.focusedCell;
+            const currentColIndex = navigableColumnIds.indexOf(selectionEdge.columnId);
+            const selectionStart = currentState.selectionState.selectionRange?.start || currentState.focusedCell;
+            selectRange(selectionStart, {
+              rowIndex: 0,
+              columnId: navigableColumnIds[currentColIndex] ?? selectionEdge.columnId
+            });
+            const rowVirtualizer2 = rowVirtualizerRef.current;
+            if (rowVirtualizer2) {
+              rowVirtualizer2.scrollToIndex(0, { align: "start" });
+            }
+            restoreFocus(dataGridRef.current);
+            event.preventDefault();
+            return;
+          } else if (isCtrlPressed && !shiftKey) {
+            direction = "ctrl+up";
+          } else {
+            direction = "up";
+          }
+          break;
+        case "ArrowDown":
+          if (altKey && !isCtrlPressed && !shiftKey) {
+            direction = "pagedown";
+          } else if (isCtrlPressed && shiftKey) {
+            const rowCount = tableRef.current?.getRowModel().rows.length || propsRef.current.data.length;
+            const selectionEdge = currentState.selectionState.selectionRange?.end || currentState.focusedCell;
+            const currentColIndex = navigableColumnIds.indexOf(selectionEdge.columnId);
+            const selectionStart = currentState.selectionState.selectionRange?.start || currentState.focusedCell;
+            selectRange(selectionStart, {
+              rowIndex: Math.max(0, rowCount - 1),
+              columnId: navigableColumnIds[currentColIndex] ?? selectionEdge.columnId
+            });
+            const rowVirtualizer2 = rowVirtualizerRef.current;
+            if (rowVirtualizer2) {
+              rowVirtualizer2.scrollToIndex(Math.max(0, rowCount - 1), {
+                align: "end"
+              });
+            }
+            restoreFocus(dataGridRef.current);
+            event.preventDefault();
+            return;
+          } else if (isCtrlPressed && !shiftKey) {
+            direction = "ctrl+down";
+          } else {
+            direction = "down";
+          }
+          break;
+        case "ArrowLeft":
+          if (isCtrlPressed && shiftKey) {
+            const selectionEdge = currentState.selectionState.selectionRange?.end || currentState.focusedCell;
+            const selectionStart = currentState.selectionState.selectionRange?.start || currentState.focusedCell;
+            const targetColumnId = dir === "rtl" ? navigableColumnIds[navigableColumnIds.length - 1] : navigableColumnIds[0];
+            if (targetColumnId) {
+              selectRange(selectionStart, {
+                rowIndex: selectionEdge.rowIndex,
+                columnId: targetColumnId
+              });
+              const container = dataGridRef.current;
+              const cellKey = getCellKey(selectionEdge.rowIndex, targetColumnId);
+              const targetCell = cellMapRef.current.get(cellKey);
+              if (container && targetCell) {
+                scrollCellIntoView({
+                  container,
+                  targetCell,
+                  tableRef,
+                  viewportOffset: VIEWPORT_OFFSET,
+                  direction: "home",
+                  isRtl: dir === "rtl"
+                });
+              }
+              restoreFocus(container);
+            }
+            event.preventDefault();
+            return;
+          } else if (isCtrlPressed && !shiftKey) {
+            direction = "home";
+          } else {
+            direction = "left";
+          }
+          break;
+        case "ArrowRight":
+          if (isCtrlPressed && shiftKey) {
+            const selectionEdge = currentState.selectionState.selectionRange?.end || currentState.focusedCell;
+            const selectionStart = currentState.selectionState.selectionRange?.start || currentState.focusedCell;
+            const targetColumnId = dir === "rtl" ? navigableColumnIds[0] : navigableColumnIds[navigableColumnIds.length - 1];
+            if (targetColumnId) {
+              selectRange(selectionStart, {
+                rowIndex: selectionEdge.rowIndex,
+                columnId: targetColumnId
+              });
+              const container = dataGridRef.current;
+              const cellKey = getCellKey(selectionEdge.rowIndex, targetColumnId);
+              const targetCell = cellMapRef.current.get(cellKey);
+              if (container && targetCell) {
+                scrollCellIntoView({
+                  container,
+                  targetCell,
+                  tableRef,
+                  viewportOffset: VIEWPORT_OFFSET,
+                  direction: "end",
+                  isRtl: dir === "rtl"
+                });
+              }
+              restoreFocus(container);
+            }
+            event.preventDefault();
+            return;
+          } else if (isCtrlPressed && !shiftKey) {
+            direction = "end";
+          } else {
+            direction = "right";
+          }
+          break;
+        case "Home":
+          direction = isCtrlPressed ? "ctrl+home" : "home";
+          break;
+        case "End":
+          direction = isCtrlPressed ? "ctrl+end" : "end";
+          break;
+        case "PageUp":
+          direction = altKey ? "pageleft" : "pageup";
+          break;
+        case "PageDown":
+          direction = altKey ? "pageright" : "pagedown";
+          break;
+        case "Escape":
+          event.preventDefault();
+          if (currentState.selectionState.selectedCells.size > 0 || Object.keys(currentState.rowSelection).length > 0) {
+            onSelectionClear();
+          } else {
+            blurCell();
+          }
+          return;
+        case "Tab":
+          event.preventDefault();
+          if (dir === "rtl") {
+            direction = event.shiftKey ? "right" : "left";
+          } else {
+            direction = event.shiftKey ? "left" : "right";
+          }
+          break;
+      }
+      if (direction) {
+        event.preventDefault();
+        if (shiftKey && key !== "Tab" && currentState.focusedCell) {
+          const selectionEdge = currentState.selectionState.selectionRange?.end || currentState.focusedCell;
+          const currentColIndex = navigableColumnIds.indexOf(selectionEdge.columnId);
+          let newRowIndex = selectionEdge.rowIndex;
+          let newColumnId = selectionEdge.columnId;
+          const isRtl = dir === "rtl";
+          const rowCount = tableRef.current?.getRowModel().rows.length || propsRef.current.data.length;
+          switch (direction) {
+            case "up":
+              newRowIndex = Math.max(0, selectionEdge.rowIndex - 1);
+              break;
+            case "down":
+              newRowIndex = Math.min(rowCount - 1, selectionEdge.rowIndex + 1);
+              break;
+            case "left":
+              if (isRtl) {
+                if (currentColIndex < navigableColumnIds.length - 1) {
+                  const nextColumnId = navigableColumnIds[currentColIndex + 1];
+                  if (nextColumnId) newColumnId = nextColumnId;
+                }
+              } else {
+                if (currentColIndex > 0) {
+                  const prevColumnId = navigableColumnIds[currentColIndex - 1];
+                  if (prevColumnId) newColumnId = prevColumnId;
+                }
+              }
+              break;
+            case "right":
+              if (isRtl) {
+                if (currentColIndex > 0) {
+                  const prevColumnId = navigableColumnIds[currentColIndex - 1];
+                  if (prevColumnId) newColumnId = prevColumnId;
+                }
+              } else {
+                if (currentColIndex < navigableColumnIds.length - 1) {
+                  const nextColumnId = navigableColumnIds[currentColIndex + 1];
+                  if (nextColumnId) newColumnId = nextColumnId;
+                }
+              }
+              break;
+            case "home":
+              if (navigableColumnIds.length > 0) {
+                newColumnId = navigableColumnIds[0] ?? newColumnId;
+              }
+              break;
+            case "end":
+              if (navigableColumnIds.length > 0) {
+                newColumnId = navigableColumnIds[navigableColumnIds.length - 1] ?? newColumnId;
+              }
+              break;
+          }
+          const selectionStart = currentState.selectionState.selectionRange?.start || currentState.focusedCell;
+          selectRange(selectionStart, {
+            rowIndex: newRowIndex,
+            columnId: newColumnId
+          });
+          const container = dataGridRef.current;
+          const targetRow = rowMapRef.current.get(newRowIndex);
+          const cellKey = getCellKey(newRowIndex, newColumnId);
+          const targetCell = cellMapRef.current.get(cellKey);
+          if (newRowIndex !== selectionEdge.rowIndex && (direction === "up" || direction === "down")) {
+            if (container && targetRow) {
+              const containerRect = container.getBoundingClientRect();
+              const headerHeight = headerRef.current?.getBoundingClientRect().height ?? 0;
+              const footerHeight = footerRef.current?.getBoundingClientRect().height ?? 0;
+              const viewportTop = containerRect.top + headerHeight + VIEWPORT_OFFSET;
+              const viewportBottom = containerRect.bottom - footerHeight - VIEWPORT_OFFSET;
+              const rowRect = targetRow.getBoundingClientRect();
+              const isFullyVisible = rowRect.top >= viewportTop && rowRect.bottom <= viewportBottom;
+              if (!isFullyVisible) {
+                const scrollNeeded = direction === "down" ? rowRect.bottom - viewportBottom : viewportTop - rowRect.top;
+                if (direction === "down") {
+                  container.scrollTop += scrollNeeded;
+                } else {
+                  container.scrollTop -= scrollNeeded;
+                }
+                restoreFocus(container);
+              }
+            } else {
+              const rowVirtualizer2 = rowVirtualizerRef.current;
+              if (rowVirtualizer2) {
+                const align = direction === "up" ? "start" : "end";
+                rowVirtualizer2.scrollToIndex(newRowIndex, { align });
+                restoreFocus(container);
+              }
+            }
+          }
+          if (newColumnId !== selectionEdge.columnId && (direction === "left" || direction === "right" || direction === "home" || direction === "end")) {
+            if (container && targetCell) {
+              scrollCellIntoView({
+                container,
+                targetCell,
+                tableRef,
+                viewportOffset: VIEWPORT_OFFSET,
+                direction,
+                isRtl
+              });
+            }
+          }
+        } else {
+          if (currentState.selectionState.selectedCells.size > 0) {
+            onSelectionClear();
+          }
+          navigateCell(direction);
+        }
+      }
+    },
+    [
+      dir,
+      store,
+      propsRef,
+      blurCell,
+      navigateCell,
+      selectAll,
+      onCellsCopy,
+      onCellsCut,
+      onDataUpdate,
+      onSelectionClear,
+      navigableColumnIds,
+      selectRange,
+      onSearchOpenChange,
+      onNavigateToNextMatch,
+      onNavigateToPrevMatch,
+      onRowsDelete,
+      restoreFocus,
+      onScrollToRow
+    ]
+  );
+  const searchState = React.useMemo(() => {
+    if (!propsRef.current.enableSearch) return void 0;
+    return {
+      searchMatches,
+      matchIndex,
+      searchOpen,
+      onSearchOpenChange,
+      searchQuery,
+      onSearchQueryChange,
+      onSearch,
+      onNavigateToNextMatch,
+      onNavigateToPrevMatch
+    };
+  }, [
+    propsRef,
+    searchMatches,
+    matchIndex,
+    searchOpen,
+    onSearchOpenChange,
+    searchQuery,
+    onSearchQueryChange,
+    onSearch,
+    onNavigateToNextMatch,
+    onNavigateToPrevMatch
+  ]);
+  React.useEffect(() => {
+    const dataGridElement = dataGridRef.current;
+    if (!dataGridElement) return;
+    dataGridElement.addEventListener("keydown", onDataGridKeyDown);
+    return () => {
+      dataGridElement.removeEventListener("keydown", onDataGridKeyDown);
+    };
+  }, [onDataGridKeyDown]);
+  React.useEffect(() => {
+    const dataGridElement = dataGridRef.current;
+    if (!dataGridElement) return;
+    function onPaste(event) {
+      if (!propsRef.current.enablePaste || propsRef.current.readOnly) return;
+      const currentState = store.getState();
+      if (currentState.editingCell || !currentState.focusedCell) return;
+      const clipboardText = event.clipboardData?.getData("text/plain") ?? "";
+      if (!clipboardText) return;
+      event.preventDefault();
+      onCellsPaste(false, clipboardText);
+    }
+    dataGridElement.addEventListener("paste", onPaste);
+    return () => {
+      dataGridElement.removeEventListener("paste", onPaste);
+    };
+  }, [propsRef, store, onCellsPaste]);
+  React.useEffect(() => {
+    function onGlobalKeyDown(event) {
+      const dataGridElement = dataGridRef.current;
+      if (!dataGridElement) return;
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      const { key, ctrlKey, metaKey, shiftKey } = event;
+      const isCommandPressed = ctrlKey || metaKey;
+      if (propsRef.current.enableSearch && isCommandPressed && !shiftKey && key === SEARCH_SHORTCUT_KEY) {
+        const isInInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA";
+        const isInDataGrid2 = dataGridElement.contains(target);
+        const isInSearchInput = target.closest('[role="search"]') !== null;
+        if (isInDataGrid2 || isInSearchInput || !isInInput) {
+          event.preventDefault();
+          event.stopPropagation();
+          const nextSearchOpen = !store.getState().searchOpen;
+          onSearchOpenChange(nextSearchOpen);
+          if (nextSearchOpen && !isInDataGrid2 && !isInSearchInput) {
+            requestAnimationFrame(() => {
+              dataGridElement.focus();
+            });
+          }
+          return;
+        }
+      }
+      const isInDataGrid = dataGridElement.contains(target);
+      if (!isInDataGrid) return;
+      if (key === "Escape") {
+        const currentState = store.getState();
+        const hasSelections = currentState.selectionState.selectedCells.size > 0 || Object.keys(currentState.rowSelection).length > 0;
+        if (hasSelections) {
+          event.preventDefault();
+          event.stopPropagation();
+          onSelectionClear();
+        }
+      }
+    }
+    window.addEventListener("keydown", onGlobalKeyDown, true);
+    return () => {
+      window.removeEventListener("keydown", onGlobalKeyDown, true);
+    };
+  }, [propsRef, onSearchOpenChange, store, onSelectionClear]);
+  React.useEffect(() => {
+    const currentState = store.getState();
+    const autoFocus = propsRef.current.autoFocus;
+    if (autoFocus && data.length > 0 && columns.length > 0 && !currentState.focusedCell) {
+      if (navigableColumnIds.length > 0) {
+        const rafId = requestAnimationFrame(() => {
+          if (typeof autoFocus === "object") {
+            const { rowIndex, columnId } = autoFocus;
+            if (columnId) {
+              focusCell(rowIndex ?? 0, columnId);
+            }
+            return;
+          }
+          const firstColumnId = navigableColumnIds[0];
+          if (firstColumnId) {
+            focusCell(0, firstColumnId);
+          }
+        });
+        return () => cancelAnimationFrame(rafId);
+      }
+    }
+  }, [store, propsRef, data, columns, navigableColumnIds, focusCell]);
+  React.useEffect(() => {
+    const container = dataGridRef.current;
+    if (!container) return;
+    function onFocusOut(event) {
+      if (focusGuardRef.current) return;
+      const currentContainer = dataGridRef.current;
+      if (!currentContainer) return;
+      const currentState = store.getState();
+      if (!currentState.focusedCell || currentState.editingCell) return;
+      const relatedTarget = event.relatedTarget;
+      const isFocusMovingOutsideGrid = !relatedTarget || !currentContainer.contains(relatedTarget);
+      const isFocusMovingToPopover = getIsInPopover(relatedTarget);
+      if (isFocusMovingOutsideGrid && !isFocusMovingToPopover) {
+        const { rowIndex, columnId } = currentState.focusedCell;
+        const cellKey = getCellKey(rowIndex, columnId);
+        const cellElement = cellMapRef.current.get(cellKey);
+        requestAnimationFrame(() => {
+          if (focusGuardRef.current) return;
+          if (cellElement && document.body.contains(cellElement)) {
+            cellElement.focus();
+          } else {
+            currentContainer.focus();
+          }
+        });
+      }
+    }
+    container.addEventListener("focusout", onFocusOut);
+    return () => {
+      container.removeEventListener("focusout", onFocusOut);
+    };
+  }, [store]);
+  React.useEffect(() => {
+    function onOutsideClick(event) {
+      if (event.button === 2) {
+        return;
+      }
+      if (dataGridRef.current && !dataGridRef.current.contains(event.target)) {
+        const elements = document.elementsFromPoint(event.clientX, event.clientY);
+        const isInsidePopover = elements.some((element) => getIsInPopover(element));
+        if (!isInsidePopover) {
+          blurCell();
+          const currentState = store.getState();
+          if (currentState.selectionState.selectedCells.size > 0 || Object.keys(currentState.rowSelection).length > 0) {
+            onSelectionClear();
+          }
+        }
+      }
+    }
+    document.addEventListener("mousedown", onOutsideClick);
+    return () => {
+      document.removeEventListener("mousedown", onOutsideClick);
+    };
+  }, [store, blurCell, onSelectionClear]);
+  React.useEffect(() => {
+    function onSelectStart(event) {
+      event.preventDefault();
+    }
+    function onContextMenu(event) {
+      event.preventDefault();
+    }
+    function onCleanup() {
+      document.removeEventListener("selectstart", onSelectStart);
+      document.removeEventListener("contextmenu", onContextMenu);
+      document.body.style.userSelect = "";
+    }
+    const onUnsubscribe = store.subscribe(() => {
+      const currentState = store.getState();
+      if (currentState.selectionState.isSelecting) {
+        document.addEventListener("selectstart", onSelectStart);
+        document.addEventListener("contextmenu", onContextMenu);
+        document.body.style.userSelect = "none";
+      } else {
+        onCleanup();
+      }
+    });
+    return () => {
+      onCleanup();
+      onUnsubscribe();
+    };
+  }, [store]);
+  React.useEffect(() => {
+    let rafId = null;
+    let mouseX = 0;
+    let mouseY = 0;
+    let mouseReady = false;
+    let active = false;
+    let lastSelectionTime = 0;
+    let resizeObserver = null;
+    let cachedRect = null;
+    let cachedHdrH = 0;
+    let cachedFtrH = 0;
+    let cachedLpw = 0;
+    let cachedRpw = 0;
+    function getAutoScrollSpeed(dist) {
+      const t = Math.min(dist / AUTO_SCROLL_SPEED_RAMP_ZONE, 1);
+      return Math.round(AUTO_SCROLL_MIN_SPEED + (AUTO_SCROLL_MAX_SPEED - AUTO_SCROLL_MIN_SPEED) * t);
+    }
+    function cacheLayout(container) {
+      cachedRect = container.getBoundingClientRect();
+      cachedHdrH = headerRef.current?.getBoundingClientRect().height ?? 0;
+      cachedFtrH = footerRef.current?.getBoundingClientRect().height ?? 0;
+      const tbl = tableRef.current;
+      if (tbl) {
+        cachedLpw = tbl.getLeftVisibleLeafColumns().reduce((s, c) => s + c.getSize(), 0);
+        cachedRpw = tbl.getRightVisibleLeafColumns().reduce((s, c) => s + c.getSize(), 0);
+      }
+    }
+    function tick() {
+      if (!active) return;
+      const container = dataGridRef.current;
+      const tbl = tableRef.current;
+      if (!container || !tbl) {
+        onAutoScrollStop();
+        return;
+      }
+      if (!mouseReady || !cachedRect) {
+        rafId = requestAnimationFrame(tick);
+        return;
+      }
+      const rect = cachedRect;
+      const { dir: dir2 } = dragDepsRef.current;
+      const hasNegativeScroll = container.scrollLeft < 0;
+      const isActuallyRtl = dir2 === "rtl" || hasNegativeScroll;
+      const dataTop = rect.top + cachedHdrH;
+      const dataBottom = rect.bottom - cachedFtrH;
+      const scrollAreaLeft = isActuallyRtl ? rect.left + cachedRpw : rect.left + cachedLpw;
+      const scrollAreaRight = isActuallyRtl ? rect.right - cachedLpw : rect.right - cachedRpw;
+      let dy = 0;
+      let dx = 0;
+      if (mouseY < dataTop) dy = -getAutoScrollSpeed(dataTop - mouseY);
+      else if (mouseY > dataBottom) dy = getAutoScrollSpeed(mouseY - dataBottom);
+      if (mouseX < scrollAreaLeft) dx = -getAutoScrollSpeed(scrollAreaLeft - mouseX);
+      else if (mouseX > scrollAreaRight) dx = getAutoScrollSpeed(mouseX - scrollAreaRight);
+      if (dx === 0 && dy === 0) {
+        rafId = requestAnimationFrame(tick);
+        return;
+      }
+      container.scrollTop += dy;
+      container.scrollLeft += dx;
+      const now = performance.now();
+      if (now - lastSelectionTime < AUTO_SCROLL_SELECTION_THROTTLE_MS) {
+        rafId = requestAnimationFrame(tick);
+        return;
+      }
+      const { rowHeightValue: rh, columnIds: columnIds2 } = dragDepsRef.current;
+      if (columnIds2.length === 0) {
+        rafId = requestAnimationFrame(tick);
+        return;
+      }
+      const totalRows = tbl.getRowModel().rows.length;
+      const clampedY = Math.max(dataTop, Math.min(mouseY, dataBottom));
+      const absY = container.scrollTop + (clampedY - dataTop);
+      const rowIndex = Math.max(0, Math.min(Math.floor(absY / rh), totalRows - 1));
+      const st = store.getState();
+      const range = st.selectionState.selectionRange;
+      let columnId;
+      if (dx !== 0) {
+        const clampedX = Math.max(rect.left, Math.min(mouseX, rect.right));
+        const relX = clampedX - rect.left;
+        const leftZoneWidth = isActuallyRtl ? cachedRpw : cachedLpw;
+        const rightZoneWidth = isActuallyRtl ? cachedLpw : cachedRpw;
+        if (relX < leftZoneWidth) {
+          const columns2 = isActuallyRtl ? tbl.getRightVisibleLeafColumns() : tbl.getLeftVisibleLeafColumns();
+          columnId = columns2[0]?.id ?? columnIds2[0] ?? "";
+          let cx = 0;
+          for (const col of columns2) {
+            if (relX < cx + col.getSize()) {
+              columnId = col.id;
+              break;
+            }
+            cx += col.getSize();
+          }
+        } else if (relX > rect.width - rightZoneWidth) {
+          const columns2 = isActuallyRtl ? tbl.getLeftVisibleLeafColumns() : tbl.getRightVisibleLeafColumns();
+          columnId = columns2[0]?.id ?? columnIds2[columnIds2.length - 1] ?? "";
+          let cx = rect.width - rightZoneWidth;
+          for (const col of columns2) {
+            if (relX < cx + col.getSize()) {
+              columnId = col.id;
+              break;
+            }
+            cx += col.getSize();
+          }
+        } else {
+          const center = tbl.getCenterVisibleLeafColumns();
+          const centerZoneWidth = rect.width - leftZoneWidth - rightZoneWidth;
+          const distFromVisualLeft = relX - leftZoneWidth;
+          let absX;
+          if (isActuallyRtl) {
+            const scrollFromRight = hasNegativeScroll ? -container.scrollLeft : container.scrollWidth - container.clientWidth - container.scrollLeft;
+            absX = scrollFromRight + (centerZoneWidth - distFromVisualLeft);
+          } else {
+            absX = container.scrollLeft + distFromVisualLeft;
+          }
+          columnId = center[center.length - 1]?.id ?? columnIds2[columnIds2.length - 1] ?? "";
+          let cw = 0;
+          for (const col of center) {
+            cw += col.getSize();
+            if (absX < cw) {
+              columnId = col.id;
+              break;
+            }
+          }
+        }
+      }
+      if (!columnId) {
+        columnId = range?.end.columnId ?? columnIds2[0] ?? "";
+      }
+      if (range && (rowIndex !== range.end.rowIndex || columnId !== range.end.columnId)) {
+        dragDepsRef.current.selectRange(range.start, { rowIndex, columnId }, true);
+        lastSelectionTime = now;
+      }
+      rafId = requestAnimationFrame(tick);
+    }
+    function onMove(event) {
+      mouseX = event.clientX;
+      mouseY = event.clientY;
+      mouseReady = true;
+    }
+    function onUp() {
+      onAutoScrollStop();
+      const st = store.getState();
+      if (st.selectionState.isSelecting) {
+        store.setState("selectionState", {
+          ...st.selectionState,
+          isSelecting: false
+        });
+      }
+    }
+    function onAutoScrollStart() {
+      if (active) return;
+      const container = dataGridRef.current;
+      if (!container) return;
+      active = true;
+      mouseReady = false;
+      cachedRect = null;
+      lastSelectionTime = 0;
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+      resizeObserver = new ResizeObserver(() => {
+        const currentContainer = dataGridRef.current;
+        if (currentContainer) cacheLayout(currentContainer);
+      });
+      resizeObserver.observe(container);
+      rafId = requestAnimationFrame(() => {
+        const currentContainer = dataGridRef.current;
+        if (currentContainer) cacheLayout(currentContainer);
+        rafId = requestAnimationFrame(tick);
+      });
+    }
+    function onAutoScrollStop() {
+      if (!active) return;
+      active = false;
+      cachedRect = null;
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+    }
+    if (store.getState().selectionState.isSelecting) onAutoScrollStart();
+    const onUnsubscribe = store.subscribe(() => {
+      const st = store.getState();
+      if (st.selectionState.isSelecting && !active) onAutoScrollStart();
+      else if (!st.selectionState.isSelecting && active) onAutoScrollStop();
+    });
+    return () => {
+      onAutoScrollStop();
+      onUnsubscribe();
+    };
+  }, [store, dragDepsRef]);
+  useIsomorphicLayoutEffect(() => {
+    const rafId = requestAnimationFrame(() => {
+      rowVirtualizer.measure();
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [
+    rowHeight,
+    table.getState().columnFilters,
+    table.getState().columnOrder,
+    table.getState().columnPinning,
+    table.getState().columnSizing,
+    table.getState().columnVisibility,
+    table.getState().expanded,
+    table.getState().globalFilter,
+    table.getState().grouping,
+    table.getState().rowSelection,
+    table.getState().sorting
+  ]);
+  const virtualTotalSize = rowVirtualizer.getTotalSize();
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  const measureElement = rowVirtualizer.measureElement;
+  return React.useMemo(
+    () => ({
+      dataGridRef,
+      headerRef,
+      rowMapRef,
+      footerRef,
+      dir,
+      table,
+      tableMeta,
+      virtualTotalSize,
+      virtualItems,
+      measureElement,
+      columns,
+      columnSizeVars,
+      searchState,
+      searchMatchesByRow,
+      activeSearchMatch,
+      cellSelectionMap,
+      focusedCell,
+      editingCell,
+      rowHeight,
+      contextMenu,
+      pasteDialog,
+      onRowAdd: hasRowAdd ? onRowAdd : void 0,
+      adjustLayout
+    }),
+    [
+      hasRowAdd,
+      dir,
+      table,
+      tableMeta,
+      virtualTotalSize,
+      virtualItems,
+      measureElement,
+      columns,
+      columnSizeVars,
+      searchState,
+      searchMatchesByRow,
+      activeSearchMatch,
+      cellSelectionMap,
+      focusedCell,
+      editingCell,
+      rowHeight,
+      contextMenu,
+      pasteDialog,
+      onRowAdd,
+      adjustLayout
+    ]
+  );
+}
+export {
+  useDataGrid
+};
+//# sourceMappingURL=use-data-grid.js.map