diff --git a/public/r/data-grid.json b/public/r/data-grid.json index 9910fd16..05dbf499 100644 --- a/public/r/data-grid.json +++ b/public/r/data-grid.json @@ -98,7 +98,7 @@ }, { "path": "src/hooks/use-data-grid.ts", - "content": "import { useDirection } from \"@radix-ui/react-direction\";\nimport {\n type ColumnDef,\n type ColumnFiltersState,\n getCoreRowModel,\n getFilteredRowModel,\n getSortedRowModel,\n type Row,\n type RowSelectionState,\n type SortingState,\n type TableMeta,\n type TableOptions,\n type TableState,\n type Updater,\n useReactTable,\n} from \"@tanstack/react-table\";\nimport { useVirtualizer, type Virtualizer } from \"@tanstack/react-virtual\";\nimport * as React from \"react\";\nimport { toast } from \"sonner\";\n\nimport { useAsRef } from \"@/hooks/use-as-ref\";\nimport { useIsomorphicLayoutEffect } from \"@/hooks/use-isomorphic-layout-effect\";\nimport { useLazyRef } from \"@/hooks/use-lazy-ref\";\nimport {\n getCellKey,\n getEmptyCellValue,\n getIsFileCellData,\n getIsInPopover,\n getRowHeightValue,\n getScrollDirection,\n matchSelectOption,\n parseCellKey,\n parseTsv,\n scrollCellIntoView,\n} from \"@/lib/data-grid\";\nimport type {\n CellPosition,\n CellUpdate,\n ContextMenuState,\n Direction,\n FileCellData,\n NavigationDirection,\n PasteDialogState,\n RowHeightValue,\n SearchState,\n SelectionState,\n} from \"@/types/data-grid\";\n\nconst DEFAULT_ROW_HEIGHT = \"short\";\nconst OVERSCAN = 6;\nconst VIEWPORT_OFFSET = 1;\nconst HORIZONTAL_PAGE_SIZE = 5;\nconst SCROLL_SYNC_RETRY_COUNT = 16;\nconst MIN_COLUMN_SIZE = 60;\nconst MAX_COLUMN_SIZE = 800;\nconst SEARCH_SHORTCUT_KEY = \"f\";\nconst NON_NAVIGABLE_COLUMN_IDS = new Set([\"select\", \"actions\"]);\n\nconst DOMAIN_REGEX = /^[\\w.-]+\\.[a-z]{2,}(\\/\\S*)?$/i;\nconst ISO_DATE_REGEX = /^\\d{4}-\\d{2}-\\d{2}(T\\d{2}:\\d{2}:\\d{2}.*)?$/;\nconst TRUTHY_BOOLEANS = new Set([\"true\", \"1\", \"yes\", \"checked\"]);\nconst VALID_BOOLEANS = new Set([\n \"true\",\n \"false\",\n \"1\",\n \"0\",\n \"yes\",\n \"no\",\n \"checked\",\n \"unchecked\",\n]);\n\ninterface DataGridState {\n sorting: SortingState;\n columnFilters: ColumnFiltersState;\n rowHeight: RowHeightValue;\n rowSelection: RowSelectionState;\n selectionState: SelectionState;\n focusedCell: CellPosition | null;\n editingCell: CellPosition | null;\n cutCells: Set;\n contextMenu: ContextMenuState;\n searchQuery: string;\n searchMatches: CellPosition[];\n matchIndex: number;\n searchOpen: boolean;\n lastClickedRowId: string | null;\n pasteDialog: PasteDialogState;\n}\n\ninterface DataGridStore {\n subscribe: (callback: () => void) => () => void;\n getState: () => DataGridState;\n setState: (\n key: K,\n value: DataGridState[K],\n ) => void;\n notify: () => void;\n batch: (fn: () => void) => void;\n}\n\nfunction useStore(\n store: DataGridStore,\n selector: (state: DataGridState) => T,\n): T {\n const getSnapshot = React.useCallback(\n () => selector(store.getState()),\n [store, selector],\n );\n\n return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);\n}\n\ninterface UseDataGridProps\n extends Omit, \"pageCount\" | \"getCoreRowModel\"> {\n onDataChange?: (data: TData[]) => void;\n onRowAdd?: (\n event?: React.MouseEvent,\n ) => Partial | Promise | null> | null;\n onRowsAdd?: (count: number) => void | Promise;\n onRowsDelete?: (rows: TData[], rowIndices: number[]) => void | Promise;\n onPaste?: (updates: Array) => void | Promise;\n onFilesUpload?: (params: {\n files: File[];\n rowIndex: number;\n columnId: string;\n }) => Promise;\n onFilesDelete?: (params: {\n fileIds: string[];\n rowIndex: number;\n columnId: string;\n }) => void | Promise;\n rowHeight?: RowHeightValue;\n onRowHeightChange?: (rowHeight: RowHeightValue) => void;\n overscan?: number;\n dir?: Direction;\n autoFocus?: boolean | Partial;\n enableSingleCellSelection?: boolean;\n enableColumnSelection?: boolean;\n enableSearch?: boolean;\n enablePaste?: boolean;\n readOnly?: boolean;\n}\n\nfunction useDataGrid({\n data,\n columns,\n rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT,\n overscan = OVERSCAN,\n dir: dirProp,\n initialState,\n ...props\n}: UseDataGridProps) {\n const dir = useDirection(dirProp);\n const dataGridRef = React.useRef(null);\n const tableRef = React.useRef>>(null);\n const rowVirtualizerRef =\n React.useRef>(null);\n const headerRef = React.useRef(null);\n const rowMapRef = React.useRef>(new Map());\n const cellMapRef = React.useRef>(new Map());\n const footerRef = React.useRef(null);\n const focusGuardRef = React.useRef(false);\n\n const propsRef = useAsRef({\n ...props,\n data,\n columns,\n initialState,\n });\n\n const listenersRef = useLazyRef(() => new Set<() => void>());\n\n const stateRef = useLazyRef(() => {\n return {\n sorting: initialState?.sorting ?? [],\n columnFilters: initialState?.columnFilters ?? [],\n rowHeight: rowHeightProp,\n rowSelection: initialState?.rowSelection ?? {},\n selectionState: {\n selectedCells: new Set(),\n selectionRange: null,\n isSelecting: false,\n },\n focusedCell: null,\n editingCell: null,\n cutCells: new Set(),\n contextMenu: {\n open: false,\n x: 0,\n y: 0,\n },\n searchQuery: \"\",\n searchMatches: [],\n matchIndex: -1,\n searchOpen: false,\n lastClickedRowId: null,\n pasteDialog: {\n open: false,\n rowsNeeded: 0,\n clipboardText: \"\",\n },\n };\n });\n\n const store = React.useMemo(() => {\n let isBatching = false;\n let pendingNotification = false;\n\n return {\n subscribe: (callback) => {\n listenersRef.current.add(callback);\n return () => listenersRef.current.delete(callback);\n },\n getState: () => stateRef.current,\n setState: (key, value) => {\n if (Object.is(stateRef.current[key], value)) return;\n stateRef.current[key] = value;\n\n if (isBatching) {\n pendingNotification = true;\n } else {\n if (!pendingNotification) {\n pendingNotification = true;\n queueMicrotask(() => {\n pendingNotification = false;\n store.notify();\n });\n }\n }\n },\n notify: () => {\n for (const listener of listenersRef.current) {\n listener();\n }\n },\n batch: (fn) => {\n if (isBatching) {\n fn();\n return;\n }\n\n isBatching = true;\n const wasPending = pendingNotification;\n pendingNotification = false;\n\n try {\n fn();\n } finally {\n isBatching = false;\n if (pendingNotification || wasPending) {\n pendingNotification = false;\n store.notify();\n }\n }\n },\n };\n }, [listenersRef, stateRef]);\n\n const focusedCell = useStore(store, (state) => state.focusedCell);\n const editingCell = useStore(store, (state) => state.editingCell);\n const selectionState = useStore(store, (state) => state.selectionState);\n const searchQuery = useStore(store, (state) => state.searchQuery);\n const searchMatches = useStore(store, (state) => state.searchMatches);\n const matchIndex = useStore(store, (state) => state.matchIndex);\n const searchOpen = useStore(store, (state) => state.searchOpen);\n const sorting = useStore(store, (state) => state.sorting);\n const columnFilters = useStore(store, (state) => state.columnFilters);\n const rowSelection = useStore(store, (state) => state.rowSelection);\n const rowHeight = useStore(store, (state) => state.rowHeight);\n const contextMenu = useStore(store, (state) => state.contextMenu);\n const pasteDialog = useStore(store, (state) => state.pasteDialog);\n\n const rowHeightValue = getRowHeightValue(rowHeight);\n\n const prevCellSelectionMapRef = useLazyRef(\n () => new Map>(),\n );\n\n // Memoize per-row selection sets to prevent unnecessary row re-renders\n // Each row gets a stable Set reference that only changes when its cells' selection changes\n const cellSelectionMap = React.useMemo(() => {\n const selectedCells = selectionState.selectedCells;\n\n if (selectedCells.size === 0) {\n prevCellSelectionMapRef.current.clear();\n return null;\n }\n\n const newRowCells = new Map>();\n for (const cellKey of selectedCells) {\n const { rowIndex } = parseCellKey(cellKey);\n let rowSet = newRowCells.get(rowIndex);\n if (!rowSet) {\n rowSet = new Set();\n newRowCells.set(rowIndex, rowSet);\n }\n rowSet.add(cellKey);\n }\n\n const stableMap = new Map>();\n for (const [rowIndex, newSet] of newRowCells) {\n const prevSet = prevCellSelectionMapRef.current.get(rowIndex);\n if (\n prevSet &&\n prevSet.size === newSet.size &&\n [...newSet].every((key) => prevSet.has(key))\n ) {\n stableMap.set(rowIndex, prevSet);\n } else {\n stableMap.set(rowIndex, newSet);\n }\n }\n\n prevCellSelectionMapRef.current = stableMap;\n return stableMap;\n }, [selectionState.selectedCells, prevCellSelectionMapRef]);\n\n const visualRowIndexCacheRef = React.useRef<{\n rows: Row[] | null;\n map: Map;\n } | null>(null);\n\n // Pre-compute visual row index map for O(1) lookups (used by select column)\n // Cache is invalidated when row model identity changes (sorting/filtering)\n const getVisualRowIndex = React.useCallback(\n (rowId: string): number | undefined => {\n const rows = tableRef.current?.getRowModel().rows;\n if (!rows) return undefined;\n\n if (visualRowIndexCacheRef.current?.rows !== rows) {\n const map = new Map();\n for (const [i, row] of rows.entries()) {\n map.set(row.id, i + 1);\n }\n visualRowIndexCacheRef.current = { rows, map };\n }\n\n return visualRowIndexCacheRef.current.map.get(rowId);\n },\n [],\n );\n\n const columnIds = React.useMemo(() => {\n return columns\n .map((c) => {\n if (c.id) return c.id;\n if (\"accessorKey\" in c) return c.accessorKey as string;\n return undefined;\n })\n .filter((id): id is string => Boolean(id));\n }, [columns]);\n\n const navigableColumnIds = React.useMemo(() => {\n return columnIds.filter((c) => !NON_NAVIGABLE_COLUMN_IDS.has(c));\n }, [columnIds]);\n\n const onDataUpdate = React.useCallback(\n (updates: CellUpdate | Array) => {\n if (propsRef.current.readOnly) return;\n\n const updateArray = Array.isArray(updates) ? updates : [updates];\n\n if (updateArray.length === 0) return;\n\n const currentTable = tableRef.current;\n const currentData = propsRef.current.data;\n const rows = currentTable?.getRowModel().rows;\n\n const rowUpdatesMap = new Map<\n number,\n Array>\n >();\n\n for (const update of updateArray) {\n if (!rows || !currentTable) {\n const existingUpdates = rowUpdatesMap.get(update.rowIndex) ?? [];\n existingUpdates.push({\n columnId: update.columnId,\n value: update.value,\n });\n rowUpdatesMap.set(update.rowIndex, existingUpdates);\n } else {\n const row = rows[update.rowIndex];\n if (!row) continue;\n\n const originalData = row.original;\n const originalRowIndex = currentData.indexOf(originalData);\n\n const targetIndex =\n originalRowIndex !== -1 ? originalRowIndex : update.rowIndex;\n\n const existingUpdates = rowUpdatesMap.get(targetIndex) ?? [];\n existingUpdates.push({\n columnId: update.columnId,\n value: update.value,\n });\n rowUpdatesMap.set(targetIndex, existingUpdates);\n }\n }\n\n const newData: TData[] = new Array(currentData.length);\n\n for (let i = 0; i < currentData.length; i++) {\n const updates = rowUpdatesMap.get(i);\n const existingRow = currentData[i];\n\n if (!existingRow) {\n newData[i] = existingRow as TData;\n continue;\n }\n\n if (updates) {\n const updatedRow = { ...existingRow } as Record;\n for (const { columnId, value } of updates) {\n updatedRow[columnId] = value;\n }\n newData[i] = updatedRow as TData;\n } else {\n newData[i] = existingRow;\n }\n }\n\n propsRef.current.onDataChange?.(newData);\n },\n [propsRef],\n );\n\n const getIsCellSelected = React.useCallback(\n (rowIndex: number, columnId: string) => {\n const currentSelectionState = store.getState().selectionState;\n return currentSelectionState.selectedCells.has(\n getCellKey(rowIndex, columnId),\n );\n },\n [store],\n );\n\n const onSelectionClear = React.useCallback(() => {\n store.batch(() => {\n store.setState(\"selectionState\", {\n selectedCells: new Set(),\n selectionRange: null,\n isSelecting: false,\n });\n store.setState(\"rowSelection\", {});\n });\n }, [store]);\n\n const selectAll = React.useCallback(() => {\n const allCells = new Set();\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows ?? [];\n const rowCount = rows.length ?? propsRef.current.data.length;\n\n for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {\n for (const columnId of columnIds) {\n allCells.add(getCellKey(rowIndex, columnId));\n }\n }\n\n const firstColumnId = columnIds[0];\n const lastColumnId = columnIds[columnIds.length - 1];\n\n store.setState(\"selectionState\", {\n selectedCells: allCells,\n selectionRange:\n columnIds.length > 0 && rowCount > 0 && firstColumnId && lastColumnId\n ? {\n start: { rowIndex: 0, columnId: firstColumnId },\n end: { rowIndex: rowCount - 1, columnId: lastColumnId },\n }\n : null,\n isSelecting: false,\n });\n }, [columnIds, propsRef, store]);\n\n const selectColumn = React.useCallback(\n (columnId: string) => {\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows ?? [];\n const rowCount = rows.length ?? propsRef.current.data.length;\n\n if (rowCount === 0) return;\n\n const selectedCells = new Set();\n\n for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {\n selectedCells.add(getCellKey(rowIndex, columnId));\n }\n\n store.setState(\"selectionState\", {\n selectedCells,\n selectionRange: {\n start: { rowIndex: 0, columnId },\n end: { rowIndex: rowCount - 1, columnId },\n },\n isSelecting: false,\n });\n },\n [propsRef, store],\n );\n\n const selectRange = React.useCallback(\n (start: CellPosition, end: CellPosition, isSelecting = false) => {\n const startColIndex = columnIds.indexOf(start.columnId);\n const endColIndex = columnIds.indexOf(end.columnId);\n\n const minRow = Math.min(start.rowIndex, end.rowIndex);\n const maxRow = Math.max(start.rowIndex, end.rowIndex);\n const minCol = Math.min(startColIndex, endColIndex);\n const maxCol = Math.max(startColIndex, endColIndex);\n\n const selectedCells = new Set();\n\n for (let rowIndex = minRow; rowIndex <= maxRow; rowIndex++) {\n for (let colIndex = minCol; colIndex <= maxCol; colIndex++) {\n const columnId = columnIds[colIndex];\n if (columnId) {\n selectedCells.add(getCellKey(rowIndex, columnId));\n }\n }\n }\n\n store.setState(\"selectionState\", {\n selectedCells,\n selectionRange: { start, end },\n isSelecting,\n });\n },\n [columnIds, store],\n );\n\n const serializeCellsToTsv = React.useCallback(() => {\n const currentState = store.getState();\n\n let selectedCellsArray: string[];\n if (!currentState.selectionState.selectedCells.size) {\n if (!currentState.focusedCell) return null;\n const focusedCellKey = getCellKey(\n currentState.focusedCell.rowIndex,\n currentState.focusedCell.columnId,\n );\n selectedCellsArray = [focusedCellKey];\n } else {\n selectedCellsArray = Array.from(\n currentState.selectionState.selectedCells,\n );\n }\n\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows;\n if (!rows) return null;\n\n const selectedColumnIds: string[] = [];\n const seenColumnIds = new Set();\n const cellData = new Map();\n const rowIndices = new Set();\n const rowCellMaps = new Map<\n number,\n Map[\"getVisibleCells\"]>[number]>\n >();\n const navigableCells: string[] = [];\n\n for (const cellKey of selectedCellsArray) {\n const { rowIndex, columnId } = parseCellKey(cellKey);\n\n if (columnId && NON_NAVIGABLE_COLUMN_IDS.has(columnId)) {\n continue;\n }\n\n navigableCells.push(cellKey);\n\n if (columnId && !seenColumnIds.has(columnId)) {\n seenColumnIds.add(columnId);\n selectedColumnIds.push(columnId);\n }\n\n rowIndices.add(rowIndex);\n\n const row = rows[rowIndex];\n if (row) {\n let cellMap = rowCellMaps.get(rowIndex);\n if (!cellMap) {\n cellMap = new Map(row.getVisibleCells().map((c) => [c.column.id, c]));\n rowCellMaps.set(rowIndex, cellMap);\n }\n const cell = cellMap.get(columnId);\n if (cell) {\n const value = cell.getValue();\n const cellVariant = cell.column.columnDef?.meta?.cell?.variant;\n\n let serializedValue = \"\";\n if (cellVariant === \"file\" || cellVariant === \"multi-select\") {\n serializedValue = value ? JSON.stringify(value) : \"\";\n } else if (value instanceof Date) {\n serializedValue = value.toISOString();\n } else {\n serializedValue = String(value ?? \"\");\n }\n\n cellData.set(cellKey, serializedValue);\n }\n }\n }\n\n const colIndices = new Set();\n for (const cellKey of navigableCells) {\n const { columnId } = parseCellKey(cellKey);\n const colIndex = selectedColumnIds.indexOf(columnId);\n if (colIndex >= 0) {\n colIndices.add(colIndex);\n }\n }\n\n const sortedRowIndices = Array.from(rowIndices).sort((a, b) => a - b);\n const sortedColIndices = Array.from(colIndices).sort((a, b) => a - b);\n const sortedColumnIds = sortedColIndices.map((i) => selectedColumnIds[i]);\n\n const tsvData = sortedRowIndices\n .map((rowIndex) =>\n sortedColumnIds\n .map((columnId) => {\n const cellKey = `${rowIndex}:${columnId}`;\n return cellData.get(cellKey) ?? \"\";\n })\n .join(\"\\t\"),\n )\n .join(\"\\n\");\n\n return { tsvData, selectedCellsArray: navigableCells };\n }, [store]);\n\n const onCellsCopy = React.useCallback(async () => {\n const result = serializeCellsToTsv();\n if (!result) return;\n\n const { tsvData, selectedCellsArray } = result;\n\n try {\n await navigator.clipboard.writeText(tsvData);\n\n const currentState = store.getState();\n if (currentState.cutCells.size > 0) {\n store.setState(\"cutCells\", new Set());\n }\n\n toast.success(\n `${selectedCellsArray.length} cell${\n selectedCellsArray.length !== 1 ? \"s\" : \"\"\n } copied`,\n );\n } catch (error) {\n toast.error(\n error instanceof Error ? error.message : \"Failed to copy to clipboard\",\n );\n }\n }, [store, serializeCellsToTsv]);\n\n const onCellsCut = React.useCallback(async () => {\n if (propsRef.current.readOnly) return;\n\n const result = serializeCellsToTsv();\n if (!result) return;\n\n const { tsvData, selectedCellsArray } = result;\n\n try {\n await navigator.clipboard.writeText(tsvData);\n\n store.setState(\"cutCells\", new Set(selectedCellsArray));\n\n toast.success(\n `${selectedCellsArray.length} cell${\n selectedCellsArray.length !== 1 ? \"s\" : \"\"\n } cut`,\n );\n } catch (error) {\n toast.error(\n error instanceof Error ? error.message : \"Failed to cut to clipboard\",\n );\n }\n }, [store, propsRef, serializeCellsToTsv]);\n\n const restoreFocus = React.useCallback((element: HTMLDivElement | null) => {\n if (element && document.activeElement !== element) {\n requestAnimationFrame(() => {\n element.focus();\n });\n }\n }, []);\n\n const onCellsPaste = React.useCallback(\n async (expandRows = false) => {\n if (propsRef.current.readOnly) return;\n\n const currentState = store.getState();\n if (!currentState.focusedCell) return;\n\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows;\n if (!rows) return;\n\n try {\n let clipboardText = currentState.pasteDialog.clipboardText;\n\n if (!clipboardText) {\n clipboardText = await navigator.clipboard.readText();\n if (!clipboardText) return;\n }\n\n const pastedData = parseTsv(clipboardText, navigableColumnIds.length);\n\n const startRowIndex = currentState.focusedCell.rowIndex;\n const startColIndex = navigableColumnIds.indexOf(\n currentState.focusedCell.columnId,\n );\n\n if (startColIndex === -1) return;\n\n const rowCount = rows.length ?? propsRef.current.data.length;\n const rowsNeeded = startRowIndex + pastedData.length - rowCount;\n\n if (\n rowsNeeded > 0 &&\n !expandRows &&\n propsRef.current.onRowAdd &&\n !currentState.pasteDialog.clipboardText\n ) {\n store.setState(\"pasteDialog\", {\n open: true,\n rowsNeeded,\n clipboardText,\n });\n return;\n }\n\n if (expandRows && rowsNeeded > 0) {\n const expectedRowCount = rowCount + rowsNeeded;\n\n if (propsRef.current.onRowsAdd) {\n await propsRef.current.onRowsAdd(rowsNeeded);\n } else if (propsRef.current.onRowAdd) {\n for (let i = 0; i < rowsNeeded; i++) {\n await propsRef.current.onRowAdd();\n }\n }\n\n let attempts = 0;\n const maxAttempts = 50;\n let currentTableRowCount =\n tableRef.current?.getRowModel().rows.length ?? 0;\n\n while (\n currentTableRowCount < expectedRowCount &&\n attempts < maxAttempts\n ) {\n await new Promise((resolve) => setTimeout(resolve, 100));\n currentTableRowCount =\n tableRef.current?.getRowModel().rows.length ?? 0;\n attempts++;\n }\n }\n\n const updates: Array = [];\n const tableColumns = currentTable?.getAllColumns() ?? [];\n let cellsUpdated = 0;\n let endRowIndex = startRowIndex;\n let endColIndex = startColIndex;\n\n const updatedTable = tableRef.current;\n const updatedRows = updatedTable?.getRowModel().rows;\n const currentRowCount = updatedRows?.length ?? 0;\n\n let cellsSkipped = 0;\n\n const columnMap = new Map(tableColumns.map((c) => [c.id, c]));\n\n for (\n let pasteRowIdx = 0;\n pasteRowIdx < pastedData.length;\n pasteRowIdx++\n ) {\n const pasteRow = pastedData[pasteRowIdx];\n if (!pasteRow) continue;\n\n const targetRowIndex = startRowIndex + pasteRowIdx;\n if (targetRowIndex >= currentRowCount) break;\n\n for (\n let pasteColIdx = 0;\n pasteColIdx < pasteRow.length;\n pasteColIdx++\n ) {\n const targetColIndex = startColIndex + pasteColIdx;\n if (targetColIndex >= navigableColumnIds.length) break;\n\n const targetColumnId = navigableColumnIds[targetColIndex];\n if (!targetColumnId) continue;\n\n const pastedValue = pasteRow[pasteColIdx] ?? \"\";\n const column = columnMap.get(targetColumnId);\n const cellOpts = column?.columnDef?.meta?.cell;\n const cellVariant = cellOpts?.variant;\n\n let processedValue: unknown = pastedValue;\n let shouldSkip = false;\n\n switch (cellVariant) {\n case \"number\": {\n if (!pastedValue) {\n processedValue = null;\n } else {\n const num = Number.parseFloat(pastedValue);\n if (Number.isNaN(num)) shouldSkip = true;\n else processedValue = num;\n }\n break;\n }\n\n case \"checkbox\": {\n if (!pastedValue) {\n processedValue = false;\n } else {\n const lower = pastedValue.toLowerCase();\n if (VALID_BOOLEANS.has(lower)) {\n processedValue = TRUTHY_BOOLEANS.has(lower);\n } else {\n shouldSkip = true;\n }\n }\n break;\n }\n\n case \"date\": {\n if (!pastedValue) {\n processedValue = null;\n } else {\n const date = new Date(pastedValue);\n if (Number.isNaN(date.getTime())) shouldSkip = true;\n else processedValue = date;\n }\n break;\n }\n\n case \"select\": {\n const options = cellOpts?.options ?? [];\n if (!pastedValue) {\n processedValue = \"\";\n } else {\n const matched = matchSelectOption(pastedValue, options);\n if (matched) processedValue = matched;\n else shouldSkip = true;\n }\n break;\n }\n\n case \"multi-select\": {\n const options = cellOpts?.options ?? [];\n let values: string[] = [];\n try {\n const parsed = JSON.parse(pastedValue);\n if (Array.isArray(parsed)) {\n values = parsed.filter(\n (v): v is string => typeof v === \"string\",\n );\n }\n } catch {\n values = pastedValue\n ? pastedValue.split(\",\").map((v) => v.trim())\n : [];\n }\n\n const validated = values\n .map((v) => matchSelectOption(v, options))\n .filter(Boolean) as string[];\n\n if (values.length > 0 && validated.length === 0) {\n shouldSkip = true;\n } else {\n processedValue = validated;\n }\n break;\n }\n\n case \"file\": {\n if (!pastedValue) {\n processedValue = [];\n } else {\n try {\n const parsed = JSON.parse(pastedValue);\n if (!Array.isArray(parsed)) {\n shouldSkip = true;\n } else {\n const validFiles = parsed.filter(getIsFileCellData);\n if (parsed.length > 0 && validFiles.length === 0) {\n shouldSkip = true;\n } else {\n processedValue = validFiles;\n }\n }\n } catch {\n shouldSkip = true;\n }\n }\n break;\n }\n\n case \"url\": {\n if (!pastedValue) {\n processedValue = \"\";\n } else {\n const firstChar = pastedValue[0];\n if (firstChar === \"[\" || firstChar === \"{\") {\n shouldSkip = true;\n } else {\n try {\n new URL(pastedValue);\n processedValue = pastedValue;\n } catch {\n if (DOMAIN_REGEX.test(pastedValue)) {\n processedValue = pastedValue;\n } else {\n shouldSkip = true;\n }\n }\n }\n }\n break;\n }\n\n default: {\n if (!pastedValue) {\n processedValue = \"\";\n break;\n }\n\n if (ISO_DATE_REGEX.test(pastedValue)) {\n const date = new Date(pastedValue);\n if (!Number.isNaN(date.getTime())) {\n processedValue = date.toLocaleDateString();\n break;\n }\n }\n\n const firstChar = pastedValue[0];\n if (\n firstChar === \"[\" ||\n firstChar === \"{\" ||\n firstChar === \"t\" ||\n firstChar === \"f\"\n ) {\n try {\n const parsed = JSON.parse(pastedValue);\n\n if (Array.isArray(parsed)) {\n if (\n parsed.length > 0 &&\n parsed.every(getIsFileCellData)\n ) {\n processedValue = parsed.map((f) => f.name).join(\", \");\n } else if (parsed.every((v) => typeof v === \"string\")) {\n processedValue = (parsed as string[]).join(\", \");\n }\n } else if (typeof parsed === \"boolean\") {\n processedValue = parsed ? \"Checked\" : \"Unchecked\";\n }\n } catch {\n const lower = pastedValue.toLowerCase();\n if (lower === \"true\" || lower === \"false\") {\n processedValue =\n lower === \"true\" ? \"Checked\" : \"Unchecked\";\n }\n }\n }\n }\n }\n\n if (shouldSkip) {\n cellsSkipped++;\n endRowIndex = Math.max(endRowIndex, targetRowIndex);\n endColIndex = Math.max(endColIndex, targetColIndex);\n continue;\n }\n\n updates.push({\n rowIndex: targetRowIndex,\n columnId: targetColumnId,\n value: processedValue,\n });\n cellsUpdated++;\n\n endRowIndex = Math.max(endRowIndex, targetRowIndex);\n endColIndex = Math.max(endColIndex, targetColIndex);\n }\n }\n\n if (updates.length > 0) {\n if (propsRef.current.onPaste) {\n await propsRef.current.onPaste(updates);\n }\n\n const allUpdates = [...updates];\n\n if (currentState.cutCells.size > 0) {\n const columnById = new Map(tableColumns.map((c) => [c.id, c]));\n\n for (const cellKey of currentState.cutCells) {\n const { rowIndex, columnId } = parseCellKey(cellKey);\n const column = columnById.get(columnId);\n const cellVariant = column?.columnDef?.meta?.cell?.variant;\n const emptyValue = getEmptyCellValue(cellVariant);\n allUpdates.push({ rowIndex, columnId, value: emptyValue });\n }\n\n store.setState(\"cutCells\", new Set());\n }\n\n onDataUpdate(allUpdates);\n\n if (cellsSkipped > 0) {\n toast.success(\n `${cellsUpdated} cell${\n cellsUpdated !== 1 ? \"s\" : \"\"\n } pasted, ${cellsSkipped} skipped`,\n );\n } else {\n toast.success(\n `${cellsUpdated} cell${cellsUpdated !== 1 ? \"s\" : \"\"} pasted`,\n );\n }\n\n const endColumnId = navigableColumnIds[endColIndex];\n if (endColumnId) {\n selectRange(\n {\n rowIndex: startRowIndex,\n columnId: currentState.focusedCell.columnId,\n },\n { rowIndex: endRowIndex, columnId: endColumnId },\n );\n }\n\n restoreFocus(dataGridRef.current);\n } else if (cellsSkipped > 0) {\n toast.error(\n `${cellsSkipped} cell${\n cellsSkipped !== 1 ? \"s\" : \"\"\n } skipped pasting for invalid data`,\n );\n }\n\n if (currentState.pasteDialog.open) {\n store.setState(\"pasteDialog\", {\n open: false,\n rowsNeeded: 0,\n clipboardText: \"\",\n });\n }\n } catch (error) {\n toast.error(\n error instanceof Error\n ? error.message\n : \"Failed to paste. Please try again.\",\n );\n }\n },\n [\n store,\n navigableColumnIds,\n propsRef,\n onDataUpdate,\n selectRange,\n restoreFocus,\n ],\n );\n\n // Release focus guard after delay to allow async data re-renders to settle.\n // 300ms accounts for db sync and virtualized cell mounting.\n const releaseFocusGuard = React.useCallback((immediate = false) => {\n if (immediate) {\n focusGuardRef.current = false;\n return;\n }\n\n setTimeout(() => {\n focusGuardRef.current = false;\n }, 300);\n }, []);\n\n const focusCellWrapper = React.useCallback(\n (rowIndex: number, columnId: string) => {\n focusGuardRef.current = true;\n\n requestAnimationFrame(() => {\n const cellKey = getCellKey(rowIndex, columnId);\n const cellWrapperElement = cellMapRef.current.get(cellKey);\n\n if (!cellWrapperElement) {\n const container = dataGridRef.current;\n if (container) {\n container.focus();\n }\n releaseFocusGuard();\n return;\n }\n\n cellWrapperElement.focus();\n releaseFocusGuard();\n });\n },\n [releaseFocusGuard],\n );\n\n const focusCell = React.useCallback(\n (rowIndex: number, columnId: string) => {\n store.batch(() => {\n store.setState(\"focusedCell\", { rowIndex, columnId });\n store.setState(\"editingCell\", null);\n });\n\n const currentState = store.getState();\n\n if (currentState.searchOpen) return;\n\n focusCellWrapper(rowIndex, columnId);\n },\n [store, focusCellWrapper],\n );\n\n const onRowsDelete = React.useCallback(\n async (rowIndices: number[]) => {\n if (\n propsRef.current.readOnly ||\n !propsRef.current.onRowsDelete ||\n rowIndices.length === 0\n )\n return;\n\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows;\n\n if (!rows || rows.length === 0) return;\n\n const currentState = store.getState();\n const currentFocusedColumn =\n currentState.focusedCell?.columnId ?? navigableColumnIds[0];\n\n const minDeletedRowIndex = Math.min(...rowIndices);\n\n const rowsToDelete: TData[] = [];\n for (const rowIndex of rowIndices) {\n const row = rows[rowIndex];\n if (row) {\n rowsToDelete.push(row.original);\n }\n }\n\n await propsRef.current.onRowsDelete(rowsToDelete, rowIndices);\n\n store.batch(() => {\n store.setState(\"selectionState\", {\n selectedCells: new Set(),\n selectionRange: null,\n isSelecting: false,\n });\n store.setState(\"rowSelection\", {});\n store.setState(\"editingCell\", null);\n });\n\n requestAnimationFrame(() => {\n const currentTable = tableRef.current;\n const currentRows = currentTable?.getRowModel().rows ?? [];\n const newRowCount = currentRows.length ?? propsRef.current.data.length;\n\n if (newRowCount > 0 && currentFocusedColumn) {\n const targetRowIndex = Math.min(minDeletedRowIndex, newRowCount - 1);\n focusCell(targetRowIndex, currentFocusedColumn);\n }\n });\n },\n [propsRef, store, navigableColumnIds, focusCell],\n );\n\n const navigateCell = React.useCallback(\n (direction: NavigationDirection) => {\n const currentState = store.getState();\n if (!currentState.focusedCell) return;\n\n const { rowIndex, columnId } = currentState.focusedCell;\n const currentColIndex = navigableColumnIds.indexOf(columnId);\n const rowVirtualizer = rowVirtualizerRef.current;\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows ?? [];\n const rowCount = rows.length ?? propsRef.current.data.length;\n\n let newRowIndex = rowIndex;\n let newColumnId = columnId;\n\n const isRtl = dir === \"rtl\";\n\n switch (direction) {\n case \"up\":\n newRowIndex = Math.max(0, rowIndex - 1);\n break;\n case \"down\":\n newRowIndex = Math.min(rowCount - 1, rowIndex + 1);\n break;\n case \"left\":\n if (isRtl) {\n if (currentColIndex < navigableColumnIds.length - 1) {\n const nextColumnId = navigableColumnIds[currentColIndex + 1];\n if (nextColumnId) newColumnId = nextColumnId;\n }\n } else {\n if (currentColIndex > 0) {\n const prevColumnId = navigableColumnIds[currentColIndex - 1];\n if (prevColumnId) newColumnId = prevColumnId;\n }\n }\n break;\n case \"right\":\n if (isRtl) {\n if (currentColIndex > 0) {\n const prevColumnId = navigableColumnIds[currentColIndex - 1];\n if (prevColumnId) newColumnId = prevColumnId;\n }\n } else {\n if (currentColIndex < navigableColumnIds.length - 1) {\n const nextColumnId = navigableColumnIds[currentColIndex + 1];\n if (nextColumnId) newColumnId = nextColumnId;\n }\n }\n break;\n case \"home\":\n if (navigableColumnIds.length > 0) {\n newColumnId = navigableColumnIds[0] ?? columnId;\n }\n break;\n case \"end\":\n if (navigableColumnIds.length > 0) {\n newColumnId =\n navigableColumnIds[navigableColumnIds.length - 1] ?? columnId;\n }\n break;\n case \"ctrl+home\":\n newRowIndex = 0;\n if (navigableColumnIds.length > 0) {\n newColumnId = navigableColumnIds[0] ?? columnId;\n }\n break;\n case \"ctrl+end\":\n newRowIndex = Math.max(0, rowCount - 1);\n if (navigableColumnIds.length > 0) {\n newColumnId =\n navigableColumnIds[navigableColumnIds.length - 1] ?? columnId;\n }\n break;\n case \"ctrl+up\":\n newRowIndex = 0;\n break;\n case \"ctrl+down\":\n newRowIndex = Math.max(0, rowCount - 1);\n break;\n case \"pageup\":\n if (rowVirtualizer) {\n const visibleRange = rowVirtualizer.getVirtualItems();\n const pageSize = visibleRange.length ?? 10;\n newRowIndex = Math.max(0, rowIndex - pageSize);\n } else {\n newRowIndex = Math.max(0, rowIndex - 10);\n }\n break;\n case \"pagedown\":\n if (rowVirtualizer) {\n const visibleRange = rowVirtualizer.getVirtualItems();\n const pageSize = visibleRange.length ?? 10;\n newRowIndex = Math.min(rowCount - 1, rowIndex + pageSize);\n } else {\n newRowIndex = Math.min(rowCount - 1, rowIndex + 10);\n }\n break;\n case \"pageleft\":\n if (currentColIndex > 0) {\n const targetIndex = Math.max(\n 0,\n currentColIndex - HORIZONTAL_PAGE_SIZE,\n );\n const targetColumnId = navigableColumnIds[targetIndex];\n if (targetColumnId) newColumnId = targetColumnId;\n }\n break;\n case \"pageright\":\n if (currentColIndex < navigableColumnIds.length - 1) {\n const targetIndex = Math.min(\n navigableColumnIds.length - 1,\n currentColIndex + HORIZONTAL_PAGE_SIZE,\n );\n const targetColumnId = navigableColumnIds[targetIndex];\n if (targetColumnId) newColumnId = targetColumnId;\n }\n break;\n }\n\n if (newRowIndex !== rowIndex || newColumnId !== columnId) {\n focusCell(newRowIndex, newColumnId);\n\n // Calculate and apply scrolls synchronously to avoid flashing\n const container = dataGridRef.current;\n if (!container) return;\n\n const targetRow = rowMapRef.current.get(newRowIndex);\n const cellKey = getCellKey(newRowIndex, newColumnId);\n const targetCell = cellMapRef.current.get(cellKey);\n\n // If target row is not rendered, scroll it into view first\n if (!targetRow) {\n if (rowVirtualizer) {\n const align =\n direction === \"up\" ||\n direction === \"pageup\" ||\n direction === \"ctrl+up\" ||\n direction === \"ctrl+home\"\n ? \"start\"\n : direction === \"down\" ||\n direction === \"pagedown\" ||\n direction === \"ctrl+down\" ||\n direction === \"ctrl+end\"\n ? \"end\"\n : \"center\";\n\n rowVirtualizer.scrollToIndex(newRowIndex, { align });\n\n // Wait for row to render before horizontal scroll\n if (newColumnId !== columnId) {\n requestAnimationFrame(() => {\n const cellKeyRetry = getCellKey(newRowIndex, newColumnId);\n const targetCellRetry = cellMapRef.current.get(cellKeyRetry);\n\n if (targetCellRetry) {\n const scrollDirection = getScrollDirection(direction);\n\n scrollCellIntoView({\n container,\n targetCell: targetCellRetry,\n tableRef,\n viewportOffset: VIEWPORT_OFFSET,\n direction: scrollDirection,\n isRtl: dir === \"rtl\",\n });\n }\n });\n }\n } else {\n // Fallback: use direct scroll calculation when virtualizer is not available\n const rowHeightValue = getRowHeightValue(rowHeight);\n const estimatedScrollTop = newRowIndex * rowHeightValue;\n container.scrollTop = estimatedScrollTop;\n }\n\n return;\n }\n\n // Vertical scrolling for rendered rows that changed\n if (newRowIndex !== rowIndex && targetRow) {\n requestAnimationFrame(() => {\n const containerRect = container.getBoundingClientRect();\n const headerHeight =\n headerRef.current?.getBoundingClientRect().height ?? 0;\n const footerHeight =\n footerRef.current?.getBoundingClientRect().height ?? 0;\n const viewportTop =\n containerRect.top + headerHeight + VIEWPORT_OFFSET;\n const viewportBottom =\n containerRect.bottom - footerHeight - VIEWPORT_OFFSET;\n\n const rowRect = targetRow.getBoundingClientRect();\n const isFullyVisible =\n rowRect.top >= viewportTop && rowRect.bottom <= viewportBottom;\n\n if (!isFullyVisible) {\n // Only apply vertical scroll for vertical navigation\n const isVerticalNavigation =\n direction === \"up\" ||\n direction === \"down\" ||\n direction === \"pageup\" ||\n direction === \"pagedown\" ||\n direction === \"ctrl+up\" ||\n direction === \"ctrl+down\" ||\n direction === \"ctrl+home\" ||\n direction === \"ctrl+end\";\n\n if (isVerticalNavigation) {\n if (\n direction === \"down\" ||\n direction === \"pagedown\" ||\n direction === \"ctrl+down\" ||\n direction === \"ctrl+end\"\n ) {\n container.scrollTop += rowRect.bottom - viewportBottom;\n } else {\n container.scrollTop -= viewportTop - rowRect.top;\n }\n }\n }\n });\n }\n\n // Horizontal scrolling for rendered cells\n if (newColumnId !== columnId && targetCell) {\n requestAnimationFrame(() => {\n const scrollDirection = getScrollDirection(direction);\n\n scrollCellIntoView({\n container,\n targetCell,\n tableRef,\n viewportOffset: VIEWPORT_OFFSET,\n direction: scrollDirection,\n isRtl: dir === \"rtl\",\n });\n });\n }\n }\n },\n [dir, store, navigableColumnIds, focusCell, propsRef, rowHeight],\n );\n\n const onCellEditingStart = React.useCallback(\n (rowIndex: number, columnId: string) => {\n if (propsRef.current.readOnly) return;\n\n store.batch(() => {\n store.setState(\"focusedCell\", { rowIndex, columnId });\n store.setState(\"editingCell\", { rowIndex, columnId });\n });\n },\n [store, propsRef],\n );\n\n const onCellEditingStop = React.useCallback(\n (opts?: { moveToNextRow?: boolean; direction?: NavigationDirection }) => {\n const currentState = store.getState();\n const currentEditing = currentState.editingCell;\n\n store.setState(\"editingCell\", null);\n\n if (opts?.moveToNextRow && currentEditing) {\n const { rowIndex, columnId } = currentEditing;\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows ?? [];\n const rowCount = rows.length ?? propsRef.current.data.length;\n\n const nextRowIndex = rowIndex + 1;\n if (nextRowIndex < rowCount) {\n requestAnimationFrame(() => {\n focusCell(nextRowIndex, columnId);\n });\n }\n } else if (opts?.direction && currentEditing) {\n const { rowIndex, columnId } = currentEditing;\n focusCell(rowIndex, columnId);\n requestAnimationFrame(() => {\n navigateCell(opts.direction ?? \"right\");\n });\n } else if (currentEditing) {\n const { rowIndex, columnId } = currentEditing;\n focusCellWrapper(rowIndex, columnId);\n }\n },\n [store, propsRef, focusCell, navigateCell, focusCellWrapper],\n );\n\n const onSearchOpenChange = React.useCallback(\n (open: boolean) => {\n if (open) {\n store.setState(\"searchOpen\", true);\n return;\n }\n\n const currentState = store.getState();\n const currentMatch =\n currentState.matchIndex >= 0 &&\n currentState.searchMatches[currentState.matchIndex];\n\n store.batch(() => {\n store.setState(\"searchOpen\", false);\n store.setState(\"searchQuery\", \"\");\n store.setState(\"searchMatches\", []);\n store.setState(\"matchIndex\", -1);\n\n if (currentMatch) {\n store.setState(\"focusedCell\", {\n rowIndex: currentMatch.rowIndex,\n columnId: currentMatch.columnId,\n });\n }\n });\n\n if (\n dataGridRef.current &&\n document.activeElement !== dataGridRef.current\n ) {\n dataGridRef.current.focus();\n }\n },\n [store],\n );\n\n const onSearch = React.useCallback(\n (query: string) => {\n if (!query.trim()) {\n store.batch(() => {\n store.setState(\"searchMatches\", []);\n store.setState(\"matchIndex\", -1);\n });\n return;\n }\n\n const matches: CellPosition[] = [];\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows ?? [];\n\n const lowerQuery = query.toLowerCase();\n\n for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {\n const row = rows[rowIndex];\n if (!row) continue;\n\n const cellById = new Map(\n row.getVisibleCells().map((c) => [c.column.id, c]),\n );\n\n for (const columnId of columnIds) {\n const cell = cellById.get(columnId);\n if (!cell) continue;\n\n const value = cell.getValue();\n const stringValue = String(value ?? \"\").toLowerCase();\n\n if (stringValue.includes(lowerQuery)) {\n matches.push({ rowIndex, columnId });\n }\n }\n }\n\n store.batch(() => {\n store.setState(\"searchMatches\", matches);\n store.setState(\"matchIndex\", matches.length > 0 ? 0 : -1);\n });\n\n if (matches.length > 0 && matches[0]) {\n const firstMatch = matches[0];\n rowVirtualizerRef.current?.scrollToIndex(firstMatch.rowIndex, {\n align: \"center\",\n });\n }\n },\n [columnIds, store],\n );\n\n const onSearchQueryChange = React.useCallback(\n (query: string) => store.setState(\"searchQuery\", query),\n [store],\n );\n\n const onNavigateToPrevMatch = React.useCallback(() => {\n const currentState = store.getState();\n if (currentState.searchMatches.length === 0) return;\n\n const prevIndex =\n currentState.matchIndex - 1 < 0\n ? currentState.searchMatches.length - 1\n : currentState.matchIndex - 1;\n const match = currentState.searchMatches[prevIndex];\n\n if (match) {\n rowVirtualizerRef.current?.scrollToIndex(match.rowIndex, {\n align: \"center\",\n });\n\n requestAnimationFrame(() => {\n store.setState(\"matchIndex\", prevIndex);\n requestAnimationFrame(() => {\n focusCell(match.rowIndex, match.columnId);\n });\n });\n }\n }, [store, focusCell]);\n\n const onNavigateToNextMatch = React.useCallback(() => {\n const currentState = store.getState();\n if (currentState.searchMatches.length === 0) return;\n\n const nextIndex =\n (currentState.matchIndex + 1) % currentState.searchMatches.length;\n const match = currentState.searchMatches[nextIndex];\n\n if (match) {\n rowVirtualizerRef.current?.scrollToIndex(match.rowIndex, {\n align: \"center\",\n });\n\n requestAnimationFrame(() => {\n store.setState(\"matchIndex\", nextIndex);\n requestAnimationFrame(() => {\n focusCell(match.rowIndex, match.columnId);\n });\n });\n }\n }, [store, focusCell]);\n\n const searchMatchSet = React.useMemo(() => {\n return new Set(\n searchMatches.map((m) => getCellKey(m.rowIndex, m.columnId)),\n );\n }, [searchMatches]);\n\n const getIsSearchMatch = React.useCallback(\n (rowIndex: number, columnId: string) => {\n return searchMatchSet.has(getCellKey(rowIndex, columnId));\n },\n [searchMatchSet],\n );\n\n const getIsActiveSearchMatch = React.useCallback(\n (rowIndex: number, columnId: string) => {\n const currentState = store.getState();\n if (currentState.matchIndex < 0) return false;\n const currentMatch = currentState.searchMatches[currentState.matchIndex];\n return (\n currentMatch?.rowIndex === rowIndex &&\n currentMatch?.columnId === columnId\n );\n },\n [store],\n );\n\n // Compute search match data for targeted row re-renders\n // Maps rowIndex -> Set of columnIds that have matches in that row\n const searchMatchesByRow = React.useMemo(() => {\n if (searchMatches.length === 0) return null;\n const rowMap = new Map>();\n for (const match of searchMatches) {\n let columnSet = rowMap.get(match.rowIndex);\n if (!columnSet) {\n columnSet = new Set();\n rowMap.set(match.rowIndex, columnSet);\n }\n columnSet.add(match.columnId);\n }\n return rowMap;\n }, [searchMatches]);\n\n const activeSearchMatch = React.useMemo(() => {\n if (matchIndex < 0 || searchMatches.length === 0) return null;\n return searchMatches[matchIndex] ?? null;\n }, [searchMatches, matchIndex]);\n\n const blurCell = React.useCallback(() => {\n const currentState = store.getState();\n if (\n currentState.editingCell &&\n document.activeElement instanceof HTMLElement\n ) {\n document.activeElement.blur();\n }\n\n store.batch(() => {\n store.setState(\"focusedCell\", null);\n store.setState(\"editingCell\", null);\n });\n }, [store]);\n\n const onCellClick = React.useCallback(\n (rowIndex: number, columnId: string, event?: React.MouseEvent) => {\n if (event?.button === 2) {\n return;\n }\n\n const currentState = store.getState();\n const currentFocused = currentState.focusedCell;\n\n function scrollToCell() {\n requestAnimationFrame(() => {\n const container = dataGridRef.current;\n const cellKey = getCellKey(rowIndex, columnId);\n const targetCell = cellMapRef.current.get(cellKey);\n\n if (container && targetCell) {\n scrollCellIntoView({\n container,\n targetCell,\n tableRef,\n viewportOffset: VIEWPORT_OFFSET,\n isRtl: dir === \"rtl\",\n });\n }\n });\n }\n\n if (event) {\n if (event.ctrlKey || event.metaKey) {\n event.preventDefault();\n const cellKey = getCellKey(rowIndex, columnId);\n const newSelectedCells = new Set(\n currentState.selectionState.selectedCells,\n );\n\n if (newSelectedCells.has(cellKey)) {\n newSelectedCells.delete(cellKey);\n } else {\n newSelectedCells.add(cellKey);\n }\n\n store.setState(\"selectionState\", {\n selectedCells: newSelectedCells,\n selectionRange: null,\n isSelecting: false,\n });\n focusCell(rowIndex, columnId);\n scrollToCell();\n return;\n }\n\n if (event.shiftKey && currentState.focusedCell) {\n event.preventDefault();\n selectRange(currentState.focusedCell, { rowIndex, columnId });\n scrollToCell();\n return;\n }\n }\n\n const hasSelectedCells =\n currentState.selectionState.selectedCells.size > 0;\n const hasSelectedRows = Object.keys(currentState.rowSelection).length > 0;\n\n if (hasSelectedCells && !currentState.selectionState.isSelecting) {\n const cellKey = getCellKey(rowIndex, columnId);\n const isClickingSelectedCell =\n currentState.selectionState.selectedCells.has(cellKey);\n\n if (!isClickingSelectedCell) {\n onSelectionClear();\n } else {\n focusCell(rowIndex, columnId);\n scrollToCell();\n return;\n }\n } else if (hasSelectedRows && columnId !== \"select\") {\n onSelectionClear();\n }\n\n if (\n currentFocused?.rowIndex === rowIndex &&\n currentFocused?.columnId === columnId\n ) {\n onCellEditingStart(rowIndex, columnId);\n } else {\n focusCell(rowIndex, columnId);\n scrollToCell();\n }\n },\n [store, focusCell, onCellEditingStart, selectRange, onSelectionClear, dir],\n );\n\n const onCellDoubleClick = React.useCallback(\n (rowIndex: number, columnId: string, event?: React.MouseEvent) => {\n if (event?.defaultPrevented) return;\n\n onCellEditingStart(rowIndex, columnId);\n },\n [onCellEditingStart],\n );\n\n const onCellMouseDown = React.useCallback(\n (rowIndex: number, columnId: string, event: React.MouseEvent) => {\n if (event.button === 2) {\n return;\n }\n\n event.preventDefault();\n\n if (!event.ctrlKey && !event.metaKey && !event.shiftKey) {\n const cellKey = getCellKey(rowIndex, columnId);\n store.batch(() => {\n store.setState(\"selectionState\", {\n selectedCells: propsRef.current.enableSingleCellSelection\n ? new Set([cellKey])\n : new Set(),\n selectionRange: {\n start: { rowIndex, columnId },\n end: { rowIndex, columnId },\n },\n isSelecting: true,\n });\n store.setState(\"rowSelection\", {});\n });\n }\n },\n [store, propsRef],\n );\n\n const onCellMouseEnter = React.useCallback(\n (rowIndex: number, columnId: string) => {\n const currentState = store.getState();\n if (\n currentState.selectionState.isSelecting &&\n currentState.selectionState.selectionRange\n ) {\n const start = currentState.selectionState.selectionRange.start;\n const end = { rowIndex, columnId };\n\n if (\n currentState.focusedCell?.rowIndex !== start.rowIndex ||\n currentState.focusedCell?.columnId !== start.columnId\n ) {\n focusCell(start.rowIndex, start.columnId);\n }\n\n selectRange(start, end, true);\n }\n },\n [store, selectRange, focusCell],\n );\n\n const onCellMouseUp = React.useCallback(() => {\n const currentState = store.getState();\n store.setState(\"selectionState\", {\n ...currentState.selectionState,\n isSelecting: false,\n });\n }, [store]);\n\n const onCellContextMenu = React.useCallback(\n (rowIndex: number, columnId: string, event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const currentState = store.getState();\n const cellKey = getCellKey(rowIndex, columnId);\n const isTargetCellSelected =\n currentState.selectionState.selectedCells.has(cellKey);\n\n if (!isTargetCellSelected) {\n store.batch(() => {\n store.setState(\"selectionState\", {\n selectedCells: new Set([cellKey]),\n selectionRange: {\n start: { rowIndex, columnId },\n end: { rowIndex, columnId },\n },\n isSelecting: false,\n });\n store.setState(\"focusedCell\", { rowIndex, columnId });\n });\n }\n\n store.setState(\"contextMenu\", {\n open: true,\n x: event.clientX,\n y: event.clientY,\n });\n },\n [store],\n );\n\n const onContextMenuOpenChange = React.useCallback(\n (open: boolean) => {\n if (!open) {\n const currentMenu = store.getState().contextMenu;\n store.setState(\"contextMenu\", {\n open: false,\n x: currentMenu.x,\n y: currentMenu.y,\n });\n }\n },\n [store],\n );\n\n const onSortingChange = React.useCallback(\n (updater: Updater) => {\n const currentState = store.getState();\n const newSorting =\n typeof updater === \"function\" ? updater(currentState.sorting) : updater;\n store.setState(\"sorting\", newSorting);\n\n propsRef.current.onSortingChange?.(newSorting);\n },\n [store, propsRef],\n );\n\n const onColumnFiltersChange = React.useCallback(\n (updater: Updater) => {\n const currentState = store.getState();\n const newColumnFilters =\n typeof updater === \"function\"\n ? updater(currentState.columnFilters)\n : updater;\n store.setState(\"columnFilters\", newColumnFilters);\n\n propsRef.current.onColumnFiltersChange?.(newColumnFilters);\n },\n [store, propsRef],\n );\n\n const onRowSelectionChange = React.useCallback(\n (updater: Updater) => {\n const currentState = store.getState();\n const newRowSelection =\n typeof updater === \"function\"\n ? updater(currentState.rowSelection)\n : updater;\n\n const selectedRows = Object.keys(newRowSelection).filter(\n (key) => newRowSelection[key],\n );\n\n const selectedCells = new Set();\n const rows = tableRef.current?.getRowModel().rows ?? [];\n\n for (const rowId of selectedRows) {\n const rowIndex = rows.findIndex((r) => r.id === rowId);\n if (rowIndex === -1) continue;\n\n for (const columnId of columnIds) {\n selectedCells.add(getCellKey(rowIndex, columnId));\n }\n }\n\n store.batch(() => {\n store.setState(\"rowSelection\", newRowSelection);\n store.setState(\"selectionState\", {\n selectedCells,\n selectionRange: null,\n isSelecting: false,\n });\n store.setState(\"focusedCell\", null);\n store.setState(\"editingCell\", null);\n });\n\n propsRef.current.onRowSelectionChange?.(updater);\n },\n [store, columnIds, propsRef],\n );\n\n const onRowSelect = React.useCallback(\n (rowId: string, selected: boolean, shiftKey: boolean) => {\n const currentState = store.getState();\n const rows = tableRef.current?.getRowModel().rows ?? [];\n const currentRowIndex = rows.findIndex((r) => r.id === rowId);\n if (currentRowIndex === -1) return;\n\n if (shiftKey && currentState.lastClickedRowId !== null) {\n const lastClickedRowIndex = rows.findIndex(\n (r) => r.id === currentState.lastClickedRowId,\n );\n if (lastClickedRowIndex === -1) {\n onRowSelectionChange({\n ...currentState.rowSelection,\n [rowId]: selected,\n });\n } else {\n const startIndex = Math.min(lastClickedRowIndex, currentRowIndex);\n const endIndex = Math.max(lastClickedRowIndex, currentRowIndex);\n\n const newRowSelection: RowSelectionState = {\n ...currentState.rowSelection,\n };\n\n for (let i = startIndex; i <= endIndex; i++) {\n const row = rows[i];\n if (row) {\n newRowSelection[row.id] = selected;\n }\n }\n\n onRowSelectionChange(newRowSelection);\n }\n } else {\n onRowSelectionChange({\n ...currentState.rowSelection,\n [rowId]: selected,\n });\n }\n\n store.setState(\"lastClickedRowId\", rowId);\n },\n [store, onRowSelectionChange],\n );\n\n const onRowHeightChange = React.useCallback(\n (updater: Updater) => {\n const currentState = store.getState();\n const newRowHeight =\n typeof updater === \"function\"\n ? updater(currentState.rowHeight)\n : updater;\n store.setState(\"rowHeight\", newRowHeight);\n propsRef.current.onRowHeightChange?.(newRowHeight);\n },\n [store, propsRef],\n );\n\n const onColumnClick = React.useCallback(\n (columnId: string) => {\n if (!propsRef.current.enableColumnSelection) {\n onSelectionClear();\n return;\n }\n\n selectColumn(columnId);\n },\n [propsRef, selectColumn, onSelectionClear],\n );\n\n const onPasteDialogOpenChange = React.useCallback(\n (open: boolean) => {\n if (!open) {\n store.setState(\"pasteDialog\", {\n open: false,\n rowsNeeded: 0,\n clipboardText: \"\",\n });\n }\n },\n [store],\n );\n\n const defaultColumn: Partial> = React.useMemo(\n () => ({\n // Note: cell is rendered directly in DataGridRow to bypass flexRender's\n // unstable cell.getContext() (see TanStack Table issue #4794)\n minSize: MIN_COLUMN_SIZE,\n maxSize: MAX_COLUMN_SIZE,\n }),\n [],\n );\n\n const tableMeta = React.useMemo>(() => {\n return {\n ...propsRef.current.meta,\n dataGridRef,\n cellMapRef,\n get focusedCell() {\n return store.getState().focusedCell;\n },\n get editingCell() {\n return store.getState().editingCell;\n },\n get selectionState() {\n return store.getState().selectionState;\n },\n get searchOpen() {\n return store.getState().searchOpen;\n },\n get contextMenu() {\n return store.getState().contextMenu;\n },\n get pasteDialog() {\n return store.getState().pasteDialog;\n },\n get rowHeight() {\n return store.getState().rowHeight;\n },\n get readOnly() {\n return propsRef.current.readOnly;\n },\n getIsCellSelected,\n getIsSearchMatch,\n getIsActiveSearchMatch,\n getVisualRowIndex,\n onRowHeightChange,\n onRowSelect,\n onDataUpdate,\n onRowsDelete: propsRef.current.onRowsDelete ? onRowsDelete : undefined,\n onColumnClick,\n onCellClick,\n onCellDoubleClick,\n onCellMouseDown,\n onCellMouseEnter,\n onCellMouseUp,\n onCellContextMenu,\n onCellEditingStart,\n onCellEditingStop,\n onCellsCopy,\n onCellsCut,\n onCellsPaste,\n onSelectionClear,\n onFilesUpload: propsRef.current.onFilesUpload\n ? propsRef.current.onFilesUpload\n : undefined,\n onFilesDelete: propsRef.current.onFilesDelete\n ? propsRef.current.onFilesDelete\n : undefined,\n onContextMenuOpenChange,\n onPasteDialogOpenChange,\n };\n }, [\n propsRef,\n store,\n getIsCellSelected,\n getIsSearchMatch,\n getIsActiveSearchMatch,\n getVisualRowIndex,\n onRowHeightChange,\n onRowSelect,\n onDataUpdate,\n onRowsDelete,\n onColumnClick,\n onCellClick,\n onCellDoubleClick,\n onCellMouseDown,\n onCellMouseEnter,\n onCellMouseUp,\n onCellContextMenu,\n onCellEditingStart,\n onCellEditingStop,\n onCellsCopy,\n onCellsCut,\n onCellsPaste,\n onSelectionClear,\n onContextMenuOpenChange,\n onPasteDialogOpenChange,\n ]);\n\n const getMemoizedCoreRowModel = React.useMemo(() => getCoreRowModel(), []);\n const getMemoizedFilteredRowModel = React.useMemo(\n () => getFilteredRowModel(),\n [],\n );\n const getMemoizedSortedRowModel = React.useMemo(\n () => getSortedRowModel(),\n [],\n );\n\n // Memoize state object to reduce shallow equality checks\n const tableState = React.useMemo>(\n () => ({\n ...propsRef.current.state,\n sorting,\n columnFilters,\n rowSelection,\n }),\n [propsRef, sorting, columnFilters, rowSelection],\n );\n\n const tableOptions = React.useMemo>(() => {\n return {\n ...propsRef.current,\n data,\n columns,\n defaultColumn,\n initialState: propsRef.current.initialState,\n state: tableState,\n onRowSelectionChange,\n onSortingChange,\n onColumnFiltersChange,\n columnResizeMode: \"onChange\",\n columnResizeDirection: dir,\n getCoreRowModel: getMemoizedCoreRowModel,\n getFilteredRowModel: getMemoizedFilteredRowModel,\n getSortedRowModel: getMemoizedSortedRowModel,\n meta: tableMeta,\n };\n }, [\n propsRef,\n data,\n columns,\n defaultColumn,\n tableState,\n dir,\n onRowSelectionChange,\n onSortingChange,\n onColumnFiltersChange,\n getMemoizedCoreRowModel,\n getMemoizedFilteredRowModel,\n getMemoizedSortedRowModel,\n tableMeta,\n ]);\n\n const table = useReactTable(tableOptions);\n\n if (!tableRef.current) {\n tableRef.current = table;\n }\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: columnSizingInfo and columnSizing are used for calculating the column size vars\n const columnSizeVars = React.useMemo(() => {\n const headers = table.getFlatHeaders();\n const colSizes: { [key: string]: number } = {};\n for (const header of headers) {\n colSizes[`--header-${header.id}-size`] = header.getSize();\n colSizes[`--col-${header.column.id}-size`] = header.column.getSize();\n }\n return colSizes;\n }, [table.getState().columnSizingInfo, table.getState().columnSizing]);\n\n const isFirefox = React.useSyncExternalStore(\n React.useCallback(() => () => {}, []),\n React.useCallback(() => {\n if (typeof window === \"undefined\" || typeof navigator === \"undefined\") {\n return false;\n }\n return navigator.userAgent.indexOf(\"Firefox\") !== -1;\n }, []),\n React.useCallback(() => false, []),\n );\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: columnPinning is used for calculating the adjustLayout\n const adjustLayout = React.useMemo(() => {\n const columnPinning = table.getState().columnPinning;\n return (\n isFirefox &&\n ((columnPinning.left?.length ?? 0) > 0 ||\n (columnPinning.right?.length ?? 0) > 0)\n );\n }, [isFirefox, table.getState().columnPinning]);\n\n const rowVirtualizer = useVirtualizer({\n count: table.getRowModel().rows.length,\n getScrollElement: () => dataGridRef.current,\n estimateSize: () => rowHeightValue,\n overscan,\n measureElement: !isFirefox\n ? (element) => element?.getBoundingClientRect().height\n : undefined,\n });\n\n if (!rowVirtualizerRef.current) {\n rowVirtualizerRef.current = rowVirtualizer;\n }\n\n const onScrollToRow = React.useCallback(\n async (opts: Partial) => {\n const rowIndex = opts?.rowIndex ?? 0;\n const columnId = opts?.columnId;\n\n focusGuardRef.current = true;\n\n const navigableIds = propsRef.current.columns\n .map((c) => {\n if (c.id) return c.id;\n if (\"accessorKey\" in c) return c.accessorKey as string;\n return undefined;\n })\n .filter((id): id is string => Boolean(id))\n .filter((c) => !NON_NAVIGABLE_COLUMN_IDS.has(c));\n\n const targetColumnId = columnId ?? navigableIds[0];\n\n if (!targetColumnId) {\n releaseFocusGuard(true);\n return;\n }\n\n async function onScrollAndFocus(retryCount: number) {\n if (!targetColumnId) return;\n const currentRowCount = propsRef.current.data.length;\n\n // If the requested row doesn't exist yet, wait for data to update\n if (rowIndex >= currentRowCount && retryCount > 0) {\n await new Promise((resolve) => setTimeout(resolve, 50));\n await onScrollAndFocus(retryCount - 1);\n return;\n }\n\n const safeRowIndex = Math.min(\n rowIndex,\n Math.max(0, currentRowCount - 1),\n );\n\n const isBottomHalf = safeRowIndex > currentRowCount / 2;\n rowVirtualizer.scrollToIndex(safeRowIndex, {\n align: isBottomHalf ? \"end\" : \"start\",\n });\n\n await new Promise((resolve) => requestAnimationFrame(resolve));\n\n // Adjust scroll position to account for sticky header/footer\n const container = dataGridRef.current;\n const targetRow = rowMapRef.current.get(safeRowIndex);\n\n if (container && targetRow) {\n const containerRect = container.getBoundingClientRect();\n const headerHeight =\n headerRef.current?.getBoundingClientRect().height ?? 0;\n const footerHeight =\n footerRef.current?.getBoundingClientRect().height ?? 0;\n\n const viewportTop =\n containerRect.top + headerHeight + VIEWPORT_OFFSET;\n const viewportBottom =\n containerRect.bottom - footerHeight - VIEWPORT_OFFSET;\n\n const rowRect = targetRow.getBoundingClientRect();\n const isFullyVisible =\n rowRect.top >= viewportTop && rowRect.bottom <= viewportBottom;\n\n if (!isFullyVisible) {\n if (rowRect.top < viewportTop) {\n // Row is partially hidden by header - scroll up\n container.scrollTop -= viewportTop - rowRect.top;\n } else if (rowRect.bottom > viewportBottom) {\n // Row is partially hidden by footer - scroll down\n container.scrollTop += rowRect.bottom - viewportBottom;\n }\n }\n }\n\n store.batch(() => {\n store.setState(\"focusedCell\", {\n rowIndex: safeRowIndex,\n columnId: targetColumnId,\n });\n store.setState(\"editingCell\", null);\n });\n\n const cellKey = getCellKey(safeRowIndex, targetColumnId);\n const cellElement = cellMapRef.current.get(cellKey);\n\n if (cellElement) {\n cellElement.focus();\n releaseFocusGuard();\n } else if (retryCount > 0) {\n await new Promise((resolve) => requestAnimationFrame(resolve));\n await onScrollAndFocus(retryCount - 1);\n } else {\n dataGridRef.current?.focus();\n releaseFocusGuard();\n }\n }\n\n await onScrollAndFocus(SCROLL_SYNC_RETRY_COUNT);\n },\n [rowVirtualizer, propsRef, store, releaseFocusGuard],\n );\n\n const onRowAdd = React.useCallback(\n async (event?: React.MouseEvent) => {\n if (propsRef.current.readOnly || !propsRef.current.onRowAdd) return;\n\n const initialRowCount = propsRef.current.data.length;\n\n let result: Partial | null;\n try {\n result = await propsRef.current.onRowAdd(event);\n } catch {\n // Callback threw an error, don't proceed with scroll/focus\n return;\n }\n\n if (result === null || event?.defaultPrevented) return;\n\n onSelectionClear();\n\n // Trust the returned rowIndex from the callback\n // onScrollToRow will handle retries if the row isn't rendered yet\n const targetRowIndex = result.rowIndex ?? initialRowCount;\n const targetColumnId = result.columnId;\n\n onScrollToRow({\n rowIndex: targetRowIndex,\n columnId: targetColumnId,\n });\n },\n [propsRef, onScrollToRow, onSelectionClear],\n );\n\n const onDataGridKeyDown = React.useCallback(\n (event: KeyboardEvent) => {\n const currentState = store.getState();\n const { key, ctrlKey, metaKey, shiftKey, altKey } = event;\n const isCtrlPressed = ctrlKey || metaKey;\n\n if (\n propsRef.current.enableSearch &&\n isCtrlPressed &&\n !shiftKey &&\n key === SEARCH_SHORTCUT_KEY\n ) {\n event.preventDefault();\n onSearchOpenChange(true);\n return;\n }\n\n if (\n propsRef.current.enableSearch &&\n currentState.searchOpen &&\n !currentState.editingCell\n ) {\n if (key === \"Enter\") {\n event.preventDefault();\n if (shiftKey) {\n onNavigateToPrevMatch();\n } else {\n onNavigateToNextMatch();\n }\n return;\n }\n if (key === \"Escape\") {\n event.preventDefault();\n onSearchOpenChange(false);\n return;\n }\n return;\n }\n\n // Cell editing keyboard events (Enter, Tab, Escape) are handled by the cell variants\n // to ensure proper value commitment before navigation\n if (currentState.editingCell) return;\n\n if (\n isCtrlPressed &&\n (key === \"Backspace\" || key === \"Delete\") &&\n !propsRef.current.readOnly &&\n propsRef.current.onRowsDelete\n ) {\n const rowIndices = new Set();\n\n const selectedRowIds = Object.keys(currentState.rowSelection);\n if (selectedRowIds.length > 0) {\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows ?? [];\n for (const row of rows) {\n if (currentState.rowSelection[row.id]) {\n rowIndices.add(row.index);\n }\n }\n } else if (currentState.selectionState.selectedCells.size > 0) {\n for (const cellKey of currentState.selectionState.selectedCells) {\n const { rowIndex } = parseCellKey(cellKey);\n rowIndices.add(rowIndex);\n }\n } else if (currentState.focusedCell) {\n rowIndices.add(currentState.focusedCell.rowIndex);\n }\n\n if (rowIndices.size > 0) {\n event.preventDefault();\n onRowsDelete(Array.from(rowIndices));\n }\n return;\n }\n\n if (!currentState.focusedCell) return;\n\n let direction: NavigationDirection | null = null;\n\n if (isCtrlPressed && !shiftKey && key === \"a\") {\n event.preventDefault();\n selectAll();\n return;\n }\n\n if (isCtrlPressed && !shiftKey && key === \"c\") {\n event.preventDefault();\n onCellsCopy();\n return;\n }\n\n if (\n isCtrlPressed &&\n !shiftKey &&\n key === \"x\" &&\n !propsRef.current.readOnly\n ) {\n event.preventDefault();\n onCellsCut();\n return;\n }\n\n if (\n propsRef.current.enablePaste &&\n isCtrlPressed &&\n !shiftKey &&\n key === \"v\" &&\n !propsRef.current.readOnly\n ) {\n event.preventDefault();\n onCellsPaste();\n return;\n }\n\n if (\n (key === \"Delete\" || key === \"Backspace\") &&\n !isCtrlPressed &&\n !propsRef.current.readOnly\n ) {\n const cellsToClear =\n currentState.selectionState.selectedCells.size > 0\n ? Array.from(currentState.selectionState.selectedCells)\n : currentState.focusedCell\n ? [\n getCellKey(\n currentState.focusedCell.rowIndex,\n currentState.focusedCell.columnId,\n ),\n ]\n : [];\n\n if (cellsToClear.length > 0) {\n event.preventDefault();\n\n const updates: Array<{\n rowIndex: number;\n columnId: string;\n value: unknown;\n }> = [];\n\n const currentTable = tableRef.current;\n const tableColumns = currentTable?.getAllColumns() ?? [];\n const columnById = new Map(tableColumns.map((c) => [c.id, c]));\n\n for (const cellKey of cellsToClear) {\n const { rowIndex, columnId } = parseCellKey(cellKey);\n const column = columnById.get(columnId);\n const cellVariant = column?.columnDef?.meta?.cell?.variant;\n const emptyValue = getEmptyCellValue(cellVariant);\n updates.push({ rowIndex, columnId, value: emptyValue });\n }\n\n onDataUpdate(updates);\n\n if (currentState.selectionState.selectedCells.size > 0) {\n onSelectionClear();\n }\n\n if (currentState.cutCells.size > 0) {\n store.setState(\"cutCells\", new Set());\n }\n }\n return;\n }\n\n if (\n key === \"Enter\" &&\n shiftKey &&\n !propsRef.current.readOnly &&\n propsRef.current.onRowAdd\n ) {\n event.preventDefault();\n const initialRowCount = propsRef.current.data.length;\n const currentColumnId = currentState.focusedCell.columnId;\n\n Promise.resolve(propsRef.current.onRowAdd())\n .then(async (result) => {\n if (result === null) return;\n\n onSelectionClear();\n\n const targetRowIndex = result.rowIndex ?? initialRowCount;\n const targetColumnId = result.columnId ?? currentColumnId;\n\n onScrollToRow({\n rowIndex: targetRowIndex,\n columnId: targetColumnId,\n });\n })\n .catch(() => {\n // Callback threw an error, don't proceed with scroll/focus\n });\n return;\n }\n\n switch (key) {\n case \"ArrowUp\":\n if (altKey && !isCtrlPressed && !shiftKey) {\n direction = \"pageup\";\n } else if (isCtrlPressed && shiftKey) {\n const selectionEdge =\n currentState.selectionState.selectionRange?.end ||\n currentState.focusedCell;\n const currentColIndex = navigableColumnIds.indexOf(\n selectionEdge.columnId,\n );\n const selectionStart =\n currentState.selectionState.selectionRange?.start ||\n currentState.focusedCell;\n\n selectRange(selectionStart, {\n rowIndex: 0,\n columnId:\n navigableColumnIds[currentColIndex] ?? selectionEdge.columnId,\n });\n\n const rowVirtualizer = rowVirtualizerRef.current;\n if (rowVirtualizer) {\n rowVirtualizer.scrollToIndex(0, { align: \"start\" });\n }\n\n restoreFocus(dataGridRef.current);\n\n event.preventDefault();\n return;\n } else if (isCtrlPressed && !shiftKey) {\n direction = \"ctrl+up\";\n } else {\n direction = \"up\";\n }\n break;\n case \"ArrowDown\":\n if (altKey && !isCtrlPressed && !shiftKey) {\n direction = \"pagedown\";\n } else if (isCtrlPressed && shiftKey) {\n const rowCount =\n tableRef.current?.getRowModel().rows.length ||\n propsRef.current.data.length;\n const selectionEdge =\n currentState.selectionState.selectionRange?.end ||\n currentState.focusedCell;\n const currentColIndex = navigableColumnIds.indexOf(\n selectionEdge.columnId,\n );\n const selectionStart =\n currentState.selectionState.selectionRange?.start ||\n currentState.focusedCell;\n\n selectRange(selectionStart, {\n rowIndex: Math.max(0, rowCount - 1),\n columnId:\n navigableColumnIds[currentColIndex] ?? selectionEdge.columnId,\n });\n\n const rowVirtualizer = rowVirtualizerRef.current;\n if (rowVirtualizer) {\n rowVirtualizer.scrollToIndex(Math.max(0, rowCount - 1), {\n align: \"end\",\n });\n }\n\n restoreFocus(dataGridRef.current);\n\n event.preventDefault();\n return;\n } else if (isCtrlPressed && !shiftKey) {\n direction = \"ctrl+down\";\n } else {\n direction = \"down\";\n }\n break;\n case \"ArrowLeft\":\n if (isCtrlPressed && shiftKey) {\n const selectionEdge =\n currentState.selectionState.selectionRange?.end ||\n currentState.focusedCell;\n const selectionStart =\n currentState.selectionState.selectionRange?.start ||\n currentState.focusedCell;\n const targetColumnId =\n dir === \"rtl\"\n ? navigableColumnIds[navigableColumnIds.length - 1]\n : navigableColumnIds[0];\n\n if (targetColumnId) {\n selectRange(selectionStart, {\n rowIndex: selectionEdge.rowIndex,\n columnId: targetColumnId,\n });\n\n const container = dataGridRef.current;\n const cellKey = getCellKey(\n selectionEdge.rowIndex,\n targetColumnId,\n );\n const targetCell = cellMapRef.current.get(cellKey);\n if (container && targetCell) {\n scrollCellIntoView({\n container,\n targetCell,\n tableRef,\n viewportOffset: VIEWPORT_OFFSET,\n direction: \"home\",\n isRtl: dir === \"rtl\",\n });\n }\n\n restoreFocus(container);\n }\n event.preventDefault();\n return;\n } else if (isCtrlPressed && !shiftKey) {\n direction = \"home\";\n } else {\n direction = \"left\";\n }\n break;\n case \"ArrowRight\":\n if (isCtrlPressed && shiftKey) {\n const selectionEdge =\n currentState.selectionState.selectionRange?.end ||\n currentState.focusedCell;\n const selectionStart =\n currentState.selectionState.selectionRange?.start ||\n currentState.focusedCell;\n const targetColumnId =\n dir === \"rtl\"\n ? navigableColumnIds[0]\n : navigableColumnIds[navigableColumnIds.length - 1];\n\n if (targetColumnId) {\n selectRange(selectionStart, {\n rowIndex: selectionEdge.rowIndex,\n columnId: targetColumnId,\n });\n\n const container = dataGridRef.current;\n const cellKey = getCellKey(\n selectionEdge.rowIndex,\n targetColumnId,\n );\n const targetCell = cellMapRef.current.get(cellKey);\n if (container && targetCell) {\n scrollCellIntoView({\n container,\n targetCell,\n tableRef,\n viewportOffset: VIEWPORT_OFFSET,\n direction: \"end\",\n isRtl: dir === \"rtl\",\n });\n }\n\n restoreFocus(container);\n }\n event.preventDefault();\n return;\n } else if (isCtrlPressed && !shiftKey) {\n direction = \"end\";\n } else {\n direction = \"right\";\n }\n break;\n case \"Home\":\n direction = isCtrlPressed ? \"ctrl+home\" : \"home\";\n break;\n case \"End\":\n direction = isCtrlPressed ? \"ctrl+end\" : \"end\";\n break;\n case \"PageUp\":\n direction = altKey ? \"pageleft\" : \"pageup\";\n break;\n case \"PageDown\":\n direction = altKey ? \"pageright\" : \"pagedown\";\n break;\n case \"Escape\":\n event.preventDefault();\n if (\n currentState.selectionState.selectedCells.size > 0 ||\n Object.keys(currentState.rowSelection).length > 0\n ) {\n onSelectionClear();\n } else {\n blurCell();\n }\n return;\n case \"Tab\":\n event.preventDefault();\n if (dir === \"rtl\") {\n direction = event.shiftKey ? \"right\" : \"left\";\n } else {\n direction = event.shiftKey ? \"left\" : \"right\";\n }\n break;\n }\n\n if (direction) {\n event.preventDefault();\n\n if (shiftKey && key !== \"Tab\" && currentState.focusedCell) {\n const selectionEdge =\n currentState.selectionState.selectionRange?.end ||\n currentState.focusedCell;\n\n const currentColIndex = navigableColumnIds.indexOf(\n selectionEdge.columnId,\n );\n let newRowIndex = selectionEdge.rowIndex;\n let newColumnId = selectionEdge.columnId;\n\n const isRtl = dir === \"rtl\";\n\n const rowCount =\n tableRef.current?.getRowModel().rows.length ||\n propsRef.current.data.length;\n\n switch (direction) {\n case \"up\":\n newRowIndex = Math.max(0, selectionEdge.rowIndex - 1);\n break;\n case \"down\":\n newRowIndex = Math.min(rowCount - 1, selectionEdge.rowIndex + 1);\n break;\n case \"left\":\n if (isRtl) {\n if (currentColIndex < navigableColumnIds.length - 1) {\n const nextColumnId = navigableColumnIds[currentColIndex + 1];\n if (nextColumnId) newColumnId = nextColumnId;\n }\n } else {\n if (currentColIndex > 0) {\n const prevColumnId = navigableColumnIds[currentColIndex - 1];\n if (prevColumnId) newColumnId = prevColumnId;\n }\n }\n break;\n case \"right\":\n if (isRtl) {\n if (currentColIndex > 0) {\n const prevColumnId = navigableColumnIds[currentColIndex - 1];\n if (prevColumnId) newColumnId = prevColumnId;\n }\n } else {\n if (currentColIndex < navigableColumnIds.length - 1) {\n const nextColumnId = navigableColumnIds[currentColIndex + 1];\n if (nextColumnId) newColumnId = nextColumnId;\n }\n }\n break;\n case \"home\":\n if (navigableColumnIds.length > 0) {\n newColumnId = navigableColumnIds[0] ?? newColumnId;\n }\n break;\n case \"end\":\n if (navigableColumnIds.length > 0) {\n newColumnId =\n navigableColumnIds[navigableColumnIds.length - 1] ??\n newColumnId;\n }\n break;\n }\n\n const selectionStart =\n currentState.selectionState.selectionRange?.start ||\n currentState.focusedCell;\n\n selectRange(selectionStart, {\n rowIndex: newRowIndex,\n columnId: newColumnId,\n });\n\n const container = dataGridRef.current;\n const targetRow = rowMapRef.current.get(newRowIndex);\n const cellKey = getCellKey(newRowIndex, newColumnId);\n const targetCell = cellMapRef.current.get(cellKey);\n\n if (\n newRowIndex !== selectionEdge.rowIndex &&\n (direction === \"up\" || direction === \"down\")\n ) {\n if (container && targetRow) {\n const containerRect = container.getBoundingClientRect();\n const headerHeight =\n headerRef.current?.getBoundingClientRect().height ?? 0;\n const footerHeight =\n footerRef.current?.getBoundingClientRect().height ?? 0;\n\n const viewportTop =\n containerRect.top + headerHeight + VIEWPORT_OFFSET;\n const viewportBottom =\n containerRect.bottom - footerHeight - VIEWPORT_OFFSET;\n\n const rowRect = targetRow.getBoundingClientRect();\n const isFullyVisible =\n rowRect.top >= viewportTop && rowRect.bottom <= viewportBottom;\n\n if (!isFullyVisible) {\n const scrollNeeded =\n direction === \"down\"\n ? rowRect.bottom - viewportBottom\n : viewportTop - rowRect.top;\n\n if (direction === \"down\") {\n container.scrollTop += scrollNeeded;\n } else {\n container.scrollTop -= scrollNeeded;\n }\n\n restoreFocus(container);\n }\n } else {\n const rowVirtualizer = rowVirtualizerRef.current;\n if (rowVirtualizer) {\n const align = direction === \"up\" ? \"start\" : \"end\";\n rowVirtualizer.scrollToIndex(newRowIndex, { align });\n\n restoreFocus(container);\n }\n }\n }\n\n if (\n newColumnId !== selectionEdge.columnId &&\n (direction === \"left\" ||\n direction === \"right\" ||\n direction === \"home\" ||\n direction === \"end\")\n ) {\n if (container && targetCell) {\n scrollCellIntoView({\n container,\n targetCell,\n tableRef,\n viewportOffset: VIEWPORT_OFFSET,\n direction,\n isRtl,\n });\n }\n }\n } else {\n if (currentState.selectionState.selectedCells.size > 0) {\n onSelectionClear();\n }\n navigateCell(direction);\n }\n }\n },\n [\n dir,\n store,\n propsRef,\n blurCell,\n navigateCell,\n selectAll,\n onCellsCopy,\n onCellsCut,\n onCellsPaste,\n onDataUpdate,\n onSelectionClear,\n navigableColumnIds,\n selectRange,\n onSearchOpenChange,\n onNavigateToNextMatch,\n onNavigateToPrevMatch,\n onRowsDelete,\n restoreFocus,\n onScrollToRow,\n ],\n );\n\n const searchState = React.useMemo(() => {\n if (!propsRef.current.enableSearch) return undefined;\n\n return {\n searchMatches,\n matchIndex,\n searchOpen,\n onSearchOpenChange,\n searchQuery,\n onSearchQueryChange,\n onSearch,\n onNavigateToNextMatch,\n onNavigateToPrevMatch,\n };\n }, [\n propsRef,\n searchMatches,\n matchIndex,\n searchOpen,\n onSearchOpenChange,\n searchQuery,\n onSearchQueryChange,\n onSearch,\n onNavigateToNextMatch,\n onNavigateToPrevMatch,\n ]);\n\n React.useEffect(() => {\n const dataGridElement = dataGridRef.current;\n if (!dataGridElement) return;\n\n dataGridElement.addEventListener(\"keydown\", onDataGridKeyDown);\n return () => {\n dataGridElement.removeEventListener(\"keydown\", onDataGridKeyDown);\n };\n }, [onDataGridKeyDown]);\n\n React.useEffect(() => {\n function onGlobalKeyDown(event: KeyboardEvent) {\n const dataGridElement = dataGridRef.current;\n if (!dataGridElement) return;\n\n const target = event.target;\n if (!(target instanceof HTMLElement)) return;\n\n const { key, ctrlKey, metaKey, shiftKey } = event;\n const isCommandPressed = ctrlKey || metaKey;\n\n if (\n propsRef.current.enableSearch &&\n isCommandPressed &&\n !shiftKey &&\n key === SEARCH_SHORTCUT_KEY\n ) {\n const isInInput =\n target.tagName === \"INPUT\" || target.tagName === \"TEXTAREA\";\n const isInDataGrid = dataGridElement.contains(target);\n const isInSearchInput = target.closest('[role=\"search\"]') !== null;\n\n if (isInDataGrid || isInSearchInput || !isInInput) {\n event.preventDefault();\n event.stopPropagation();\n\n const nextSearchOpen = !store.getState().searchOpen;\n onSearchOpenChange(nextSearchOpen);\n\n if (nextSearchOpen && !isInDataGrid && !isInSearchInput) {\n requestAnimationFrame(() => {\n dataGridElement.focus();\n });\n }\n return;\n }\n }\n\n const isInDataGrid = dataGridElement.contains(target);\n if (!isInDataGrid) return;\n\n if (key === \"Escape\") {\n const currentState = store.getState();\n const hasSelections =\n currentState.selectionState.selectedCells.size > 0 ||\n Object.keys(currentState.rowSelection).length > 0;\n\n if (hasSelections) {\n event.preventDefault();\n event.stopPropagation();\n onSelectionClear();\n }\n }\n }\n\n window.addEventListener(\"keydown\", onGlobalKeyDown, true);\n return () => {\n window.removeEventListener(\"keydown\", onGlobalKeyDown, true);\n };\n }, [propsRef, onSearchOpenChange, store, onSelectionClear]);\n\n React.useEffect(() => {\n const currentState = store.getState();\n const autoFocus = propsRef.current.autoFocus;\n\n if (\n autoFocus &&\n data.length > 0 &&\n columns.length > 0 &&\n !currentState.focusedCell\n ) {\n if (navigableColumnIds.length > 0) {\n const rafId = requestAnimationFrame(() => {\n if (typeof autoFocus === \"object\") {\n const { rowIndex, columnId } = autoFocus;\n if (columnId) {\n focusCell(rowIndex ?? 0, columnId);\n }\n return;\n }\n\n const firstColumnId = navigableColumnIds[0];\n if (firstColumnId) {\n focusCell(0, firstColumnId);\n }\n });\n return () => cancelAnimationFrame(rafId);\n }\n }\n }, [store, propsRef, data, columns, navigableColumnIds, focusCell]);\n\n // Restore focus to container when virtualized cells are unmounted\n React.useEffect(() => {\n const container = dataGridRef.current;\n if (!container) return;\n\n function onFocusOut(event: FocusEvent) {\n if (focusGuardRef.current) return;\n\n const currentContainer = dataGridRef.current;\n if (!currentContainer) return;\n\n const currentState = store.getState();\n\n if (!currentState.focusedCell || currentState.editingCell) return;\n\n const relatedTarget = event.relatedTarget;\n\n const isFocusMovingOutsideGrid =\n !relatedTarget || !currentContainer.contains(relatedTarget as Node);\n\n const isFocusMovingToPopover = getIsInPopover(relatedTarget);\n\n if (isFocusMovingOutsideGrid && !isFocusMovingToPopover) {\n const { rowIndex, columnId } = currentState.focusedCell;\n const cellKey = getCellKey(rowIndex, columnId);\n const cellElement = cellMapRef.current.get(cellKey);\n\n requestAnimationFrame(() => {\n if (focusGuardRef.current) return;\n\n if (cellElement && document.body.contains(cellElement)) {\n cellElement.focus();\n } else {\n currentContainer.focus();\n }\n });\n }\n }\n\n container.addEventListener(\"focusout\", onFocusOut);\n\n return () => {\n container.removeEventListener(\"focusout\", onFocusOut);\n };\n }, [store]);\n\n React.useEffect(() => {\n function onOutsideClick(event: MouseEvent) {\n if (event.button === 2) {\n return;\n }\n\n if (\n dataGridRef.current &&\n !dataGridRef.current.contains(event.target as Node)\n ) {\n const elements = document.elementsFromPoint(\n event.clientX,\n event.clientY,\n );\n\n // Compensate for event.target bubbling up\n const isInsidePopover = elements.some((element) =>\n getIsInPopover(element),\n );\n\n if (!isInsidePopover) {\n blurCell();\n const currentState = store.getState();\n if (\n currentState.selectionState.selectedCells.size > 0 ||\n Object.keys(currentState.rowSelection).length > 0\n ) {\n onSelectionClear();\n }\n }\n }\n }\n\n document.addEventListener(\"mousedown\", onOutsideClick);\n return () => {\n document.removeEventListener(\"mousedown\", onOutsideClick);\n };\n }, [store, blurCell, onSelectionClear]);\n\n React.useEffect(() => {\n function onSelectStart(event: Event) {\n event.preventDefault();\n }\n\n function onContextMenu(event: Event) {\n event.preventDefault();\n }\n\n function onCleanup() {\n document.removeEventListener(\"selectstart\", onSelectStart);\n document.removeEventListener(\"contextmenu\", onContextMenu);\n document.body.style.userSelect = \"\";\n }\n\n const onUnsubscribe = store.subscribe(() => {\n const currentState = store.getState();\n if (currentState.selectionState.isSelecting) {\n document.addEventListener(\"selectstart\", onSelectStart);\n document.addEventListener(\"contextmenu\", onContextMenu);\n document.body.style.userSelect = \"none\";\n } else {\n onCleanup();\n }\n });\n\n return () => {\n onCleanup();\n onUnsubscribe();\n };\n }, [store]);\n\n useIsomorphicLayoutEffect(() => {\n const rafId = requestAnimationFrame(() => {\n rowVirtualizer.measure();\n });\n return () => cancelAnimationFrame(rafId);\n }, [\n rowHeight,\n table.getState().columnFilters,\n table.getState().columnOrder,\n table.getState().columnPinning,\n table.getState().columnSizing,\n table.getState().columnVisibility,\n table.getState().expanded,\n table.getState().globalFilter,\n table.getState().grouping,\n table.getState().rowSelection,\n table.getState().sorting,\n ]);\n\n // Calculate virtual values outside of child render to avoid flushSync issues\n const virtualTotalSize = rowVirtualizer.getTotalSize();\n const virtualItems = rowVirtualizer.getVirtualItems();\n const measureElement = rowVirtualizer.measureElement;\n\n return React.useMemo(\n () => ({\n dataGridRef,\n headerRef,\n rowMapRef,\n footerRef,\n dir,\n table,\n tableMeta,\n virtualTotalSize,\n virtualItems,\n measureElement,\n columns,\n columnSizeVars,\n searchState,\n searchMatchesByRow,\n activeSearchMatch,\n cellSelectionMap,\n focusedCell,\n editingCell,\n rowHeight,\n contextMenu,\n pasteDialog,\n onRowAdd: propsRef.current.onRowAdd ? onRowAdd : undefined,\n adjustLayout,\n }),\n [\n propsRef,\n dir,\n table,\n tableMeta,\n virtualTotalSize,\n virtualItems,\n measureElement,\n columns,\n columnSizeVars,\n searchState,\n searchMatchesByRow,\n activeSearchMatch,\n cellSelectionMap,\n focusedCell,\n editingCell,\n rowHeight,\n contextMenu,\n pasteDialog,\n onRowAdd,\n adjustLayout,\n ],\n );\n}\n\nexport {\n useDataGrid,\n //\n type UseDataGridProps,\n};\n", + "content": "import { useDirection } from \"@radix-ui/react-direction\";\nimport {\n type ColumnDef,\n type ColumnFiltersState,\n getCoreRowModel,\n getFilteredRowModel,\n getSortedRowModel,\n type Row,\n type RowSelectionState,\n type SortingState,\n type TableMeta,\n type TableOptions,\n type TableState,\n type Updater,\n useReactTable,\n} from \"@tanstack/react-table\";\nimport { useVirtualizer, type Virtualizer } from \"@tanstack/react-virtual\";\nimport * as React from \"react\";\nimport { toast } from \"sonner\";\n\nimport { useAsRef } from \"@/hooks/use-as-ref\";\nimport { useIsomorphicLayoutEffect } from \"@/hooks/use-isomorphic-layout-effect\";\nimport { useLazyRef } from \"@/hooks/use-lazy-ref\";\nimport {\n getCellKey,\n getEmptyCellValue,\n getIsFileCellData,\n getIsInPopover,\n getRowHeightValue,\n getScrollDirection,\n matchSelectOption,\n parseCellKey,\n parseTsv,\n scrollCellIntoView,\n} from \"@/lib/data-grid\";\nimport type {\n CellPosition,\n CellUpdate,\n ContextMenuState,\n Direction,\n FileCellData,\n NavigationDirection,\n PasteDialogState,\n RowHeightValue,\n SearchState,\n SelectionState,\n} from \"@/types/data-grid\";\n\nconst DEFAULT_ROW_HEIGHT = \"short\";\nconst OVERSCAN = 6;\nconst VIEWPORT_OFFSET = 1;\nconst HORIZONTAL_PAGE_SIZE = 5;\nconst SCROLL_SYNC_RETRY_COUNT = 16;\nconst MIN_COLUMN_SIZE = 60;\nconst MAX_COLUMN_SIZE = 800;\nconst SEARCH_SHORTCUT_KEY = \"f\";\nconst NON_NAVIGABLE_COLUMN_IDS = new Set([\"select\", \"actions\"]);\nconst AUTO_SCROLL_EDGE_ZONE = 50;\nconst AUTO_SCROLL_MIN_SPEED = 8;\nconst AUTO_SCROLL_MAX_SPEED = 40;\nconst AUTO_SCROLL_SELECTION_THROTTLE_MS = 32;\n\nconst DOMAIN_REGEX = /^[\\w.-]+\\.[a-z]{2,}(\\/\\S*)?$/i;\nconst ISO_DATE_REGEX = /^\\d{4}-\\d{2}-\\d{2}(T\\d{2}:\\d{2}:\\d{2}.*)?$/;\nconst TRUTHY_BOOLEANS = new Set([\"true\", \"1\", \"yes\", \"checked\"]);\nconst VALID_BOOLEANS = new Set([\n \"true\",\n \"false\",\n \"1\",\n \"0\",\n \"yes\",\n \"no\",\n \"checked\",\n \"unchecked\",\n]);\n\ninterface DataGridState {\n sorting: SortingState;\n columnFilters: ColumnFiltersState;\n rowHeight: RowHeightValue;\n rowSelection: RowSelectionState;\n selectionState: SelectionState;\n focusedCell: CellPosition | null;\n editingCell: CellPosition | null;\n cutCells: Set;\n contextMenu: ContextMenuState;\n searchQuery: string;\n searchMatches: CellPosition[];\n matchIndex: number;\n searchOpen: boolean;\n lastClickedRowId: string | null;\n pasteDialog: PasteDialogState;\n}\n\ninterface DataGridStore {\n subscribe: (callback: () => void) => () => void;\n getState: () => DataGridState;\n setState: (\n key: K,\n value: DataGridState[K],\n ) => void;\n notify: () => void;\n batch: (fn: () => void) => void;\n}\n\nfunction useStore(\n store: DataGridStore,\n selector: (state: DataGridState) => T,\n): T {\n const getSnapshot = React.useCallback(\n () => selector(store.getState()),\n [store, selector],\n );\n\n return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);\n}\n\ninterface UseDataGridProps\n extends Omit, \"pageCount\" | \"getCoreRowModel\"> {\n onDataChange?: (data: TData[]) => void;\n onRowAdd?: (\n event?: React.MouseEvent,\n ) => Partial | Promise | null> | null;\n onRowsAdd?: (count: number) => void | Promise;\n onRowsDelete?: (rows: TData[], rowIndices: number[]) => void | Promise;\n onPaste?: (updates: Array) => void | Promise;\n onFilesUpload?: (params: {\n files: File[];\n rowIndex: number;\n columnId: string;\n }) => Promise;\n onFilesDelete?: (params: {\n fileIds: string[];\n rowIndex: number;\n columnId: string;\n }) => void | Promise;\n rowHeight?: RowHeightValue;\n onRowHeightChange?: (rowHeight: RowHeightValue) => void;\n overscan?: number;\n dir?: Direction;\n autoFocus?: boolean | Partial;\n enableSingleCellSelection?: boolean;\n enableColumnSelection?: boolean;\n enableSearch?: boolean;\n enablePaste?: boolean;\n readOnly?: boolean;\n}\n\nfunction useDataGrid({\n data,\n columns,\n rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT,\n overscan = OVERSCAN,\n dir: dirProp,\n initialState,\n ...props\n}: UseDataGridProps) {\n const dir = useDirection(dirProp);\n const dataGridRef = React.useRef(null);\n const tableRef = React.useRef>>(null);\n const rowVirtualizerRef =\n React.useRef>(null);\n const headerRef = React.useRef(null);\n const rowMapRef = React.useRef>(new Map());\n const cellMapRef = React.useRef>(new Map());\n const footerRef = React.useRef(null);\n const focusGuardRef = React.useRef(false);\n\n const propsRef = useAsRef({\n ...props,\n data,\n columns,\n initialState,\n });\n\n const listenersRef = useLazyRef(() => new Set<() => void>());\n\n const stateRef = useLazyRef(() => {\n return {\n sorting: initialState?.sorting ?? [],\n columnFilters: initialState?.columnFilters ?? [],\n rowHeight: rowHeightProp,\n rowSelection: initialState?.rowSelection ?? {},\n selectionState: {\n selectedCells: new Set(),\n selectionRange: null,\n isSelecting: false,\n },\n focusedCell: null,\n editingCell: null,\n cutCells: new Set(),\n contextMenu: {\n open: false,\n x: 0,\n y: 0,\n },\n searchQuery: \"\",\n searchMatches: [],\n matchIndex: -1,\n searchOpen: false,\n lastClickedRowId: null,\n pasteDialog: {\n open: false,\n rowsNeeded: 0,\n clipboardText: \"\",\n },\n };\n });\n\n const store = React.useMemo(() => {\n let isBatching = false;\n let pendingNotification = false;\n\n return {\n subscribe: (callback) => {\n listenersRef.current.add(callback);\n return () => listenersRef.current.delete(callback);\n },\n getState: () => stateRef.current,\n setState: (key, value) => {\n if (Object.is(stateRef.current[key], value)) return;\n stateRef.current[key] = value;\n\n if (isBatching) {\n pendingNotification = true;\n } else {\n if (!pendingNotification) {\n pendingNotification = true;\n queueMicrotask(() => {\n pendingNotification = false;\n store.notify();\n });\n }\n }\n },\n notify: () => {\n for (const listener of listenersRef.current) {\n listener();\n }\n },\n batch: (fn) => {\n if (isBatching) {\n fn();\n return;\n }\n\n isBatching = true;\n const wasPending = pendingNotification;\n pendingNotification = false;\n\n try {\n fn();\n } finally {\n isBatching = false;\n if (pendingNotification || wasPending) {\n pendingNotification = false;\n store.notify();\n }\n }\n },\n };\n }, [listenersRef, stateRef]);\n\n const focusedCell = useStore(store, (state) => state.focusedCell);\n const editingCell = useStore(store, (state) => state.editingCell);\n const selectionState = useStore(store, (state) => state.selectionState);\n const searchQuery = useStore(store, (state) => state.searchQuery);\n const searchMatches = useStore(store, (state) => state.searchMatches);\n const matchIndex = useStore(store, (state) => state.matchIndex);\n const searchOpen = useStore(store, (state) => state.searchOpen);\n const sorting = useStore(store, (state) => state.sorting);\n const columnFilters = useStore(store, (state) => state.columnFilters);\n const rowSelection = useStore(store, (state) => state.rowSelection);\n const rowHeight = useStore(store, (state) => state.rowHeight);\n const contextMenu = useStore(store, (state) => state.contextMenu);\n const pasteDialog = useStore(store, (state) => state.pasteDialog);\n\n const rowHeightValue = getRowHeightValue(rowHeight);\n\n const prevCellSelectionMapRef = useLazyRef(\n () => new Map>(),\n );\n\n // Memoize per-row selection sets to prevent unnecessary row re-renders\n // Each row gets a stable Set reference that only changes when its cells' selection changes\n const cellSelectionMap = React.useMemo(() => {\n const selectedCells = selectionState.selectedCells;\n\n if (selectedCells.size === 0) {\n prevCellSelectionMapRef.current.clear();\n return null;\n }\n\n const newRowCells = new Map>();\n for (const cellKey of selectedCells) {\n const { rowIndex } = parseCellKey(cellKey);\n let rowSet = newRowCells.get(rowIndex);\n if (!rowSet) {\n rowSet = new Set();\n newRowCells.set(rowIndex, rowSet);\n }\n rowSet.add(cellKey);\n }\n\n const stableMap = new Map>();\n for (const [rowIndex, newSet] of newRowCells) {\n const prevSet = prevCellSelectionMapRef.current.get(rowIndex);\n if (\n prevSet &&\n prevSet.size === newSet.size &&\n [...newSet].every((key) => prevSet.has(key))\n ) {\n stableMap.set(rowIndex, prevSet);\n } else {\n stableMap.set(rowIndex, newSet);\n }\n }\n\n prevCellSelectionMapRef.current = stableMap;\n return stableMap;\n }, [selectionState.selectedCells, prevCellSelectionMapRef]);\n\n const visualRowIndexCacheRef = React.useRef<{\n rows: Row[] | null;\n map: Map;\n } | null>(null);\n\n // Pre-compute visual row index map for O(1) lookups (used by select column)\n // Cache is invalidated when row model identity changes (sorting/filtering)\n const getVisualRowIndex = React.useCallback(\n (rowId: string): number | undefined => {\n const rows = tableRef.current?.getRowModel().rows;\n if (!rows) return undefined;\n\n if (visualRowIndexCacheRef.current?.rows !== rows) {\n const map = new Map();\n for (const [i, row] of rows.entries()) {\n map.set(row.id, i + 1);\n }\n visualRowIndexCacheRef.current = { rows, map };\n }\n\n return visualRowIndexCacheRef.current.map.get(rowId);\n },\n [],\n );\n\n const columnIds = React.useMemo(() => {\n return columns\n .map((c) => {\n if (c.id) return c.id;\n if (\"accessorKey\" in c) return c.accessorKey as string;\n return undefined;\n })\n .filter((id): id is string => Boolean(id));\n }, [columns]);\n\n const navigableColumnIds = React.useMemo(() => {\n return columnIds.filter((c) => !NON_NAVIGABLE_COLUMN_IDS.has(c));\n }, [columnIds]);\n\n const onDataUpdate = React.useCallback(\n (updates: CellUpdate | Array) => {\n if (propsRef.current.readOnly) return;\n\n const updateArray = Array.isArray(updates) ? updates : [updates];\n\n if (updateArray.length === 0) return;\n\n const currentTable = tableRef.current;\n const currentData = propsRef.current.data;\n const rows = currentTable?.getRowModel().rows;\n\n const rowUpdatesMap = new Map<\n number,\n Array>\n >();\n\n for (const update of updateArray) {\n if (!rows || !currentTable) {\n const existingUpdates = rowUpdatesMap.get(update.rowIndex) ?? [];\n existingUpdates.push({\n columnId: update.columnId,\n value: update.value,\n });\n rowUpdatesMap.set(update.rowIndex, existingUpdates);\n } else {\n const row = rows[update.rowIndex];\n if (!row) continue;\n\n const originalData = row.original;\n const originalRowIndex = currentData.indexOf(originalData);\n\n const targetIndex =\n originalRowIndex !== -1 ? originalRowIndex : update.rowIndex;\n\n const existingUpdates = rowUpdatesMap.get(targetIndex) ?? [];\n existingUpdates.push({\n columnId: update.columnId,\n value: update.value,\n });\n rowUpdatesMap.set(targetIndex, existingUpdates);\n }\n }\n\n const newData: TData[] = new Array(currentData.length);\n\n for (let i = 0; i < currentData.length; i++) {\n const updates = rowUpdatesMap.get(i);\n const existingRow = currentData[i];\n\n if (!existingRow) {\n newData[i] = {} as TData;\n continue;\n }\n\n if (updates) {\n const updatedRow = { ...existingRow } as Record;\n for (const { columnId, value } of updates) {\n updatedRow[columnId] = value;\n }\n newData[i] = updatedRow as TData;\n } else {\n newData[i] = existingRow;\n }\n }\n\n propsRef.current.onDataChange?.(newData);\n },\n [propsRef],\n );\n\n const getIsCellSelected = React.useCallback(\n (rowIndex: number, columnId: string) => {\n const currentSelectionState = store.getState().selectionState;\n return currentSelectionState.selectedCells.has(\n getCellKey(rowIndex, columnId),\n );\n },\n [store],\n );\n\n const onSelectionClear = React.useCallback(() => {\n store.batch(() => {\n store.setState(\"selectionState\", {\n selectedCells: new Set(),\n selectionRange: null,\n isSelecting: false,\n });\n store.setState(\"rowSelection\", {});\n });\n }, [store]);\n\n const selectAll = React.useCallback(() => {\n const allCells = new Set();\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows ?? [];\n const rowCount = rows.length ?? propsRef.current.data.length;\n\n for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {\n for (const columnId of columnIds) {\n allCells.add(getCellKey(rowIndex, columnId));\n }\n }\n\n const firstColumnId = columnIds[0];\n const lastColumnId = columnIds[columnIds.length - 1];\n\n store.setState(\"selectionState\", {\n selectedCells: allCells,\n selectionRange:\n columnIds.length > 0 && rowCount > 0 && firstColumnId && lastColumnId\n ? {\n start: { rowIndex: 0, columnId: firstColumnId },\n end: { rowIndex: rowCount - 1, columnId: lastColumnId },\n }\n : null,\n isSelecting: false,\n });\n }, [columnIds, propsRef, store]);\n\n const selectColumn = React.useCallback(\n (columnId: string) => {\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows ?? [];\n const rowCount = rows.length ?? propsRef.current.data.length;\n\n if (rowCount === 0) return;\n\n const selectedCells = new Set();\n\n for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {\n selectedCells.add(getCellKey(rowIndex, columnId));\n }\n\n store.setState(\"selectionState\", {\n selectedCells,\n selectionRange: {\n start: { rowIndex: 0, columnId },\n end: { rowIndex: rowCount - 1, columnId },\n },\n isSelecting: false,\n });\n },\n [propsRef, store],\n );\n\n const selectRange = React.useCallback(\n (start: CellPosition, end: CellPosition, isSelecting = false) => {\n const startColIndex = columnIds.indexOf(start.columnId);\n const endColIndex = columnIds.indexOf(end.columnId);\n\n const minRow = Math.min(start.rowIndex, end.rowIndex);\n const maxRow = Math.max(start.rowIndex, end.rowIndex);\n const minCol = Math.min(startColIndex, endColIndex);\n const maxCol = Math.max(startColIndex, endColIndex);\n\n const selectedCells = new Set();\n\n for (let rowIndex = minRow; rowIndex <= maxRow; rowIndex++) {\n for (let colIndex = minCol; colIndex <= maxCol; colIndex++) {\n const columnId = columnIds[colIndex];\n if (columnId) {\n selectedCells.add(getCellKey(rowIndex, columnId));\n }\n }\n }\n\n store.setState(\"selectionState\", {\n selectedCells,\n selectionRange: { start, end },\n isSelecting,\n });\n },\n [columnIds, store],\n );\n\n const dragDepsRef = useAsRef({\n selectRange,\n dir,\n rowHeightValue,\n columnIds,\n });\n\n const serializeCellsToTsv = React.useCallback(() => {\n const currentState = store.getState();\n\n let selectedCellsArray: string[];\n if (!currentState.selectionState.selectedCells.size) {\n if (!currentState.focusedCell) return null;\n const focusedCellKey = getCellKey(\n currentState.focusedCell.rowIndex,\n currentState.focusedCell.columnId,\n );\n selectedCellsArray = [focusedCellKey];\n } else {\n selectedCellsArray = Array.from(\n currentState.selectionState.selectedCells,\n );\n }\n\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows;\n if (!rows) return null;\n\n const selectedColumnIds: string[] = [];\n const seenColumnIds = new Set();\n const cellData = new Map();\n const rowIndices = new Set();\n const rowCellMaps = new Map<\n number,\n Map[\"getVisibleCells\"]>[number]>\n >();\n const navigableCells: string[] = [];\n\n for (const cellKey of selectedCellsArray) {\n const { rowIndex, columnId } = parseCellKey(cellKey);\n\n if (columnId && NON_NAVIGABLE_COLUMN_IDS.has(columnId)) {\n continue;\n }\n\n navigableCells.push(cellKey);\n\n if (columnId && !seenColumnIds.has(columnId)) {\n seenColumnIds.add(columnId);\n selectedColumnIds.push(columnId);\n }\n\n rowIndices.add(rowIndex);\n\n const row = rows[rowIndex];\n if (row) {\n let cellMap = rowCellMaps.get(rowIndex);\n if (!cellMap) {\n cellMap = new Map(row.getVisibleCells().map((c) => [c.column.id, c]));\n rowCellMaps.set(rowIndex, cellMap);\n }\n const cell = cellMap.get(columnId);\n if (cell) {\n const value = cell.getValue();\n const cellVariant = cell.column.columnDef?.meta?.cell?.variant;\n\n let serializedValue = \"\";\n if (cellVariant === \"file\" || cellVariant === \"multi-select\") {\n serializedValue = value ? JSON.stringify(value) : \"\";\n } else if (value instanceof Date) {\n serializedValue = value.toISOString();\n } else {\n serializedValue = String(value ?? \"\");\n }\n\n cellData.set(cellKey, serializedValue);\n }\n }\n }\n\n const colIndices = new Set();\n for (const cellKey of navigableCells) {\n const { columnId } = parseCellKey(cellKey);\n const colIndex = selectedColumnIds.indexOf(columnId);\n if (colIndex >= 0) {\n colIndices.add(colIndex);\n }\n }\n\n const sortedRowIndices = Array.from(rowIndices).sort((a, b) => a - b);\n const sortedColIndices = Array.from(colIndices).sort((a, b) => a - b);\n const sortedColumnIds = sortedColIndices.map((i) => selectedColumnIds[i]);\n\n const tsvData = sortedRowIndices\n .map((rowIndex) =>\n sortedColumnIds\n .map((columnId) => {\n const cellKey = `${rowIndex}:${columnId}`;\n return cellData.get(cellKey) ?? \"\";\n })\n .join(\"\\t\"),\n )\n .join(\"\\n\");\n\n return { tsvData, selectedCellsArray: navigableCells };\n }, [store]);\n\n const onCellsCopy = React.useCallback(async () => {\n const result = serializeCellsToTsv();\n if (!result) return;\n\n const { tsvData, selectedCellsArray } = result;\n\n try {\n await navigator.clipboard.writeText(tsvData);\n\n const currentState = store.getState();\n if (currentState.cutCells.size > 0) {\n store.setState(\"cutCells\", new Set());\n }\n\n toast.success(\n `${selectedCellsArray.length} cell${\n selectedCellsArray.length !== 1 ? \"s\" : \"\"\n } copied`,\n );\n } catch (error) {\n toast.error(\n error instanceof Error ? error.message : \"Failed to copy to clipboard\",\n );\n }\n }, [store, serializeCellsToTsv]);\n\n const onCellsCut = React.useCallback(async () => {\n if (propsRef.current.readOnly) return;\n\n const result = serializeCellsToTsv();\n if (!result) return;\n\n const { tsvData, selectedCellsArray } = result;\n\n try {\n await navigator.clipboard.writeText(tsvData);\n\n store.setState(\"cutCells\", new Set(selectedCellsArray));\n\n toast.success(\n `${selectedCellsArray.length} cell${\n selectedCellsArray.length !== 1 ? \"s\" : \"\"\n } cut`,\n );\n } catch (error) {\n toast.error(\n error instanceof Error ? error.message : \"Failed to cut to clipboard\",\n );\n }\n }, [store, propsRef, serializeCellsToTsv]);\n\n const restoreFocus = React.useCallback((element: HTMLDivElement | null) => {\n if (element && document.activeElement !== element) {\n requestAnimationFrame(() => {\n element.focus();\n });\n }\n }, []);\n\n const onCellsPaste = React.useCallback(\n async (expandRows = false) => {\n if (propsRef.current.readOnly) return;\n\n const currentState = store.getState();\n if (!currentState.focusedCell) return;\n\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows;\n if (!rows) return;\n\n try {\n let clipboardText = currentState.pasteDialog.clipboardText;\n\n if (!clipboardText) {\n clipboardText = await navigator.clipboard.readText();\n if (!clipboardText) return;\n }\n\n const pastedData = parseTsv(clipboardText, navigableColumnIds.length);\n\n const startRowIndex = currentState.focusedCell.rowIndex;\n const startColIndex = navigableColumnIds.indexOf(\n currentState.focusedCell.columnId,\n );\n\n if (startColIndex === -1) return;\n\n const rowCount = rows.length ?? propsRef.current.data.length;\n const rowsNeeded = startRowIndex + pastedData.length - rowCount;\n\n if (\n rowsNeeded > 0 &&\n !expandRows &&\n propsRef.current.onRowAdd &&\n !currentState.pasteDialog.clipboardText\n ) {\n store.setState(\"pasteDialog\", {\n open: true,\n rowsNeeded,\n clipboardText,\n });\n return;\n }\n\n if (expandRows && rowsNeeded > 0) {\n const expectedRowCount = rowCount + rowsNeeded;\n\n if (propsRef.current.onRowsAdd) {\n await propsRef.current.onRowsAdd(rowsNeeded);\n } else if (propsRef.current.onRowAdd) {\n for (let i = 0; i < rowsNeeded; i++) {\n await propsRef.current.onRowAdd();\n }\n }\n\n let attempts = 0;\n const maxAttempts = 50;\n let currentTableRowCount =\n tableRef.current?.getRowModel().rows.length ?? 0;\n\n while (\n currentTableRowCount < expectedRowCount &&\n attempts < maxAttempts\n ) {\n await new Promise((resolve) => setTimeout(resolve, 100));\n currentTableRowCount =\n tableRef.current?.getRowModel().rows.length ?? 0;\n attempts++;\n }\n }\n\n const updates: Array = [];\n const tableColumns = currentTable?.getAllColumns() ?? [];\n let cellsUpdated = 0;\n let endRowIndex = startRowIndex;\n let endColIndex = startColIndex;\n\n const updatedTable = tableRef.current;\n const updatedRows = updatedTable?.getRowModel().rows;\n const currentRowCount = updatedRows?.length ?? 0;\n\n let cellsSkipped = 0;\n\n const columnMap = new Map(tableColumns.map((c) => [c.id, c]));\n\n for (\n let pasteRowIdx = 0;\n pasteRowIdx < pastedData.length;\n pasteRowIdx++\n ) {\n const pasteRow = pastedData[pasteRowIdx];\n if (!pasteRow) continue;\n\n const targetRowIndex = startRowIndex + pasteRowIdx;\n if (targetRowIndex >= currentRowCount) break;\n\n for (\n let pasteColIdx = 0;\n pasteColIdx < pasteRow.length;\n pasteColIdx++\n ) {\n const targetColIndex = startColIndex + pasteColIdx;\n if (targetColIndex >= navigableColumnIds.length) break;\n\n const targetColumnId = navigableColumnIds[targetColIndex];\n if (!targetColumnId) continue;\n\n const pastedValue = pasteRow[pasteColIdx] ?? \"\";\n const column = columnMap.get(targetColumnId);\n const cellOpts = column?.columnDef?.meta?.cell;\n const cellVariant = cellOpts?.variant;\n\n let processedValue: unknown = pastedValue;\n let shouldSkip = false;\n\n switch (cellVariant) {\n case \"number\": {\n if (!pastedValue) {\n processedValue = null;\n } else {\n const num = Number.parseFloat(pastedValue);\n if (Number.isNaN(num)) shouldSkip = true;\n else processedValue = num;\n }\n break;\n }\n\n case \"checkbox\": {\n if (!pastedValue) {\n processedValue = false;\n } else {\n const lower = pastedValue.toLowerCase();\n if (VALID_BOOLEANS.has(lower)) {\n processedValue = TRUTHY_BOOLEANS.has(lower);\n } else {\n shouldSkip = true;\n }\n }\n break;\n }\n\n case \"date\": {\n if (!pastedValue) {\n processedValue = null;\n } else {\n const date = new Date(pastedValue);\n if (Number.isNaN(date.getTime())) shouldSkip = true;\n else processedValue = date;\n }\n break;\n }\n\n case \"select\": {\n const options = cellOpts?.options ?? [];\n if (!pastedValue) {\n processedValue = \"\";\n } else {\n const matched = matchSelectOption(pastedValue, options);\n if (matched) processedValue = matched;\n else shouldSkip = true;\n }\n break;\n }\n\n case \"multi-select\": {\n const options = cellOpts?.options ?? [];\n let values: string[] = [];\n try {\n const parsed = JSON.parse(pastedValue);\n if (Array.isArray(parsed)) {\n values = parsed.filter(\n (v): v is string => typeof v === \"string\",\n );\n }\n } catch {\n values = pastedValue\n ? pastedValue.split(\",\").map((v) => v.trim())\n : [];\n }\n\n const validated = values\n .map((v) => matchSelectOption(v, options))\n .filter(Boolean) as string[];\n\n if (values.length > 0 && validated.length === 0) {\n shouldSkip = true;\n } else {\n processedValue = validated;\n }\n break;\n }\n\n case \"file\": {\n if (!pastedValue) {\n processedValue = [];\n } else {\n try {\n const parsed = JSON.parse(pastedValue);\n if (!Array.isArray(parsed)) {\n shouldSkip = true;\n } else {\n const validFiles = parsed.filter(getIsFileCellData);\n if (parsed.length > 0 && validFiles.length === 0) {\n shouldSkip = true;\n } else {\n processedValue = validFiles;\n }\n }\n } catch {\n shouldSkip = true;\n }\n }\n break;\n }\n\n case \"url\": {\n if (!pastedValue) {\n processedValue = \"\";\n } else {\n const firstChar = pastedValue[0];\n if (firstChar === \"[\" || firstChar === \"{\") {\n shouldSkip = true;\n } else {\n try {\n new URL(pastedValue);\n processedValue = pastedValue;\n } catch {\n if (DOMAIN_REGEX.test(pastedValue)) {\n processedValue = pastedValue;\n } else {\n shouldSkip = true;\n }\n }\n }\n }\n break;\n }\n\n default: {\n if (!pastedValue) {\n processedValue = \"\";\n break;\n }\n\n if (ISO_DATE_REGEX.test(pastedValue)) {\n const date = new Date(pastedValue);\n if (!Number.isNaN(date.getTime())) {\n processedValue = date.toLocaleDateString();\n break;\n }\n }\n\n const firstChar = pastedValue[0];\n if (\n firstChar === \"[\" ||\n firstChar === \"{\" ||\n firstChar === \"t\" ||\n firstChar === \"f\"\n ) {\n try {\n const parsed = JSON.parse(pastedValue);\n\n if (Array.isArray(parsed)) {\n if (\n parsed.length > 0 &&\n parsed.every(getIsFileCellData)\n ) {\n processedValue = parsed.map((f) => f.name).join(\", \");\n } else if (parsed.every((v) => typeof v === \"string\")) {\n processedValue = (parsed as string[]).join(\", \");\n }\n } else if (typeof parsed === \"boolean\") {\n processedValue = parsed ? \"Checked\" : \"Unchecked\";\n }\n } catch {\n const lower = pastedValue.toLowerCase();\n if (lower === \"true\" || lower === \"false\") {\n processedValue =\n lower === \"true\" ? \"Checked\" : \"Unchecked\";\n }\n }\n }\n }\n }\n\n if (shouldSkip) {\n cellsSkipped++;\n endRowIndex = Math.max(endRowIndex, targetRowIndex);\n endColIndex = Math.max(endColIndex, targetColIndex);\n continue;\n }\n\n updates.push({\n rowIndex: targetRowIndex,\n columnId: targetColumnId,\n value: processedValue,\n });\n cellsUpdated++;\n\n endRowIndex = Math.max(endRowIndex, targetRowIndex);\n endColIndex = Math.max(endColIndex, targetColIndex);\n }\n }\n\n if (updates.length > 0) {\n if (propsRef.current.onPaste) {\n await propsRef.current.onPaste(updates);\n }\n\n const allUpdates = [...updates];\n\n if (currentState.cutCells.size > 0) {\n const columnById = new Map(tableColumns.map((c) => [c.id, c]));\n\n for (const cellKey of currentState.cutCells) {\n const { rowIndex, columnId } = parseCellKey(cellKey);\n const column = columnById.get(columnId);\n const cellVariant = column?.columnDef?.meta?.cell?.variant;\n const emptyValue = getEmptyCellValue(cellVariant);\n allUpdates.push({ rowIndex, columnId, value: emptyValue });\n }\n\n store.setState(\"cutCells\", new Set());\n }\n\n onDataUpdate(allUpdates);\n\n if (cellsSkipped > 0) {\n toast.success(\n `${cellsUpdated} cell${\n cellsUpdated !== 1 ? \"s\" : \"\"\n } pasted, ${cellsSkipped} skipped`,\n );\n } else {\n toast.success(\n `${cellsUpdated} cell${cellsUpdated !== 1 ? \"s\" : \"\"} pasted`,\n );\n }\n\n const endColumnId = navigableColumnIds[endColIndex];\n if (endColumnId) {\n selectRange(\n {\n rowIndex: startRowIndex,\n columnId: currentState.focusedCell.columnId,\n },\n { rowIndex: endRowIndex, columnId: endColumnId },\n );\n }\n\n restoreFocus(dataGridRef.current);\n } else if (cellsSkipped > 0) {\n toast.error(\n `${cellsSkipped} cell${\n cellsSkipped !== 1 ? \"s\" : \"\"\n } skipped pasting for invalid data`,\n );\n }\n\n if (currentState.pasteDialog.open) {\n store.setState(\"pasteDialog\", {\n open: false,\n rowsNeeded: 0,\n clipboardText: \"\",\n });\n }\n } catch (error) {\n toast.error(\n error instanceof Error\n ? error.message\n : \"Failed to paste. Please try again.\",\n );\n }\n },\n [\n store,\n navigableColumnIds,\n propsRef,\n onDataUpdate,\n selectRange,\n restoreFocus,\n ],\n );\n\n // Release focus guard after delay to allow async data re-renders to settle.\n // 300ms accounts for db sync and virtualized cell mounting.\n const releaseFocusGuard = React.useCallback((immediate = false) => {\n if (immediate) {\n focusGuardRef.current = false;\n return;\n }\n\n setTimeout(() => {\n focusGuardRef.current = false;\n }, 300);\n }, []);\n\n const focusCellWrapper = React.useCallback(\n (rowIndex: number, columnId: string) => {\n focusGuardRef.current = true;\n\n requestAnimationFrame(() => {\n const cellKey = getCellKey(rowIndex, columnId);\n const cellWrapperElement = cellMapRef.current.get(cellKey);\n\n if (!cellWrapperElement) {\n const container = dataGridRef.current;\n if (container) {\n container.focus();\n }\n releaseFocusGuard();\n return;\n }\n\n cellWrapperElement.focus();\n releaseFocusGuard();\n });\n },\n [releaseFocusGuard],\n );\n\n const focusCell = React.useCallback(\n (rowIndex: number, columnId: string) => {\n store.batch(() => {\n store.setState(\"focusedCell\", { rowIndex, columnId });\n store.setState(\"editingCell\", null);\n });\n\n const currentState = store.getState();\n\n if (currentState.searchOpen) return;\n\n focusCellWrapper(rowIndex, columnId);\n },\n [store, focusCellWrapper],\n );\n\n const onRowsDelete = React.useCallback(\n async (rowIndices: number[]) => {\n if (\n propsRef.current.readOnly ||\n !propsRef.current.onRowsDelete ||\n rowIndices.length === 0\n )\n return;\n\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows;\n\n if (!rows || rows.length === 0) return;\n\n const currentState = store.getState();\n const currentFocusedColumn =\n currentState.focusedCell?.columnId ?? navigableColumnIds[0];\n\n const minDeletedRowIndex = Math.min(...rowIndices);\n\n const rowsToDelete: TData[] = [];\n for (const rowIndex of rowIndices) {\n const row = rows[rowIndex];\n if (row) {\n rowsToDelete.push(row.original);\n }\n }\n\n await propsRef.current.onRowsDelete(rowsToDelete, rowIndices);\n\n store.batch(() => {\n store.setState(\"selectionState\", {\n selectedCells: new Set(),\n selectionRange: null,\n isSelecting: false,\n });\n store.setState(\"rowSelection\", {});\n store.setState(\"editingCell\", null);\n });\n\n requestAnimationFrame(() => {\n const currentTable = tableRef.current;\n const currentRows = currentTable?.getRowModel().rows ?? [];\n const newRowCount = currentRows.length ?? propsRef.current.data.length;\n\n if (newRowCount > 0 && currentFocusedColumn) {\n const targetRowIndex = Math.min(minDeletedRowIndex, newRowCount - 1);\n focusCell(targetRowIndex, currentFocusedColumn);\n }\n });\n },\n [propsRef, store, navigableColumnIds, focusCell],\n );\n\n const navigateCell = React.useCallback(\n (direction: NavigationDirection) => {\n const currentState = store.getState();\n if (!currentState.focusedCell) return;\n\n const { rowIndex, columnId } = currentState.focusedCell;\n const currentColIndex = navigableColumnIds.indexOf(columnId);\n const rowVirtualizer = rowVirtualizerRef.current;\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows ?? [];\n const rowCount = rows.length ?? propsRef.current.data.length;\n\n let newRowIndex = rowIndex;\n let newColumnId = columnId;\n\n const isRtl = dir === \"rtl\";\n\n switch (direction) {\n case \"up\":\n newRowIndex = Math.max(0, rowIndex - 1);\n break;\n case \"down\":\n newRowIndex = Math.min(rowCount - 1, rowIndex + 1);\n break;\n case \"left\":\n if (isRtl) {\n if (currentColIndex < navigableColumnIds.length - 1) {\n const nextColumnId = navigableColumnIds[currentColIndex + 1];\n if (nextColumnId) newColumnId = nextColumnId;\n }\n } else {\n if (currentColIndex > 0) {\n const prevColumnId = navigableColumnIds[currentColIndex - 1];\n if (prevColumnId) newColumnId = prevColumnId;\n }\n }\n break;\n case \"right\":\n if (isRtl) {\n if (currentColIndex > 0) {\n const prevColumnId = navigableColumnIds[currentColIndex - 1];\n if (prevColumnId) newColumnId = prevColumnId;\n }\n } else {\n if (currentColIndex < navigableColumnIds.length - 1) {\n const nextColumnId = navigableColumnIds[currentColIndex + 1];\n if (nextColumnId) newColumnId = nextColumnId;\n }\n }\n break;\n case \"home\":\n if (navigableColumnIds.length > 0) {\n newColumnId = navigableColumnIds[0] ?? columnId;\n }\n break;\n case \"end\":\n if (navigableColumnIds.length > 0) {\n newColumnId =\n navigableColumnIds[navigableColumnIds.length - 1] ?? columnId;\n }\n break;\n case \"ctrl+home\":\n newRowIndex = 0;\n if (navigableColumnIds.length > 0) {\n newColumnId = navigableColumnIds[0] ?? columnId;\n }\n break;\n case \"ctrl+end\":\n newRowIndex = Math.max(0, rowCount - 1);\n if (navigableColumnIds.length > 0) {\n newColumnId =\n navigableColumnIds[navigableColumnIds.length - 1] ?? columnId;\n }\n break;\n case \"ctrl+up\":\n newRowIndex = 0;\n break;\n case \"ctrl+down\":\n newRowIndex = Math.max(0, rowCount - 1);\n break;\n case \"pageup\":\n if (rowVirtualizer) {\n const visibleRange = rowVirtualizer.getVirtualItems();\n const pageSize = visibleRange.length ?? 10;\n newRowIndex = Math.max(0, rowIndex - pageSize);\n } else {\n newRowIndex = Math.max(0, rowIndex - 10);\n }\n break;\n case \"pagedown\":\n if (rowVirtualizer) {\n const visibleRange = rowVirtualizer.getVirtualItems();\n const pageSize = visibleRange.length ?? 10;\n newRowIndex = Math.min(rowCount - 1, rowIndex + pageSize);\n } else {\n newRowIndex = Math.min(rowCount - 1, rowIndex + 10);\n }\n break;\n case \"pageleft\":\n if (currentColIndex > 0) {\n const targetIndex = Math.max(\n 0,\n currentColIndex - HORIZONTAL_PAGE_SIZE,\n );\n const targetColumnId = navigableColumnIds[targetIndex];\n if (targetColumnId) newColumnId = targetColumnId;\n }\n break;\n case \"pageright\":\n if (currentColIndex < navigableColumnIds.length - 1) {\n const targetIndex = Math.min(\n navigableColumnIds.length - 1,\n currentColIndex + HORIZONTAL_PAGE_SIZE,\n );\n const targetColumnId = navigableColumnIds[targetIndex];\n if (targetColumnId) newColumnId = targetColumnId;\n }\n break;\n }\n\n if (newRowIndex !== rowIndex || newColumnId !== columnId) {\n focusCell(newRowIndex, newColumnId);\n\n // Calculate and apply scrolls synchronously to avoid flashing\n const container = dataGridRef.current;\n if (!container) return;\n\n const targetRow = rowMapRef.current.get(newRowIndex);\n const cellKey = getCellKey(newRowIndex, newColumnId);\n const targetCell = cellMapRef.current.get(cellKey);\n\n // If target row is not rendered, scroll it into view first\n if (!targetRow) {\n if (rowVirtualizer) {\n const align =\n direction === \"up\" ||\n direction === \"pageup\" ||\n direction === \"ctrl+up\" ||\n direction === \"ctrl+home\"\n ? \"start\"\n : direction === \"down\" ||\n direction === \"pagedown\" ||\n direction === \"ctrl+down\" ||\n direction === \"ctrl+end\"\n ? \"end\"\n : \"center\";\n\n rowVirtualizer.scrollToIndex(newRowIndex, { align });\n\n // Wait for row to render before horizontal scroll\n if (newColumnId !== columnId) {\n requestAnimationFrame(() => {\n const cellKeyRetry = getCellKey(newRowIndex, newColumnId);\n const targetCellRetry = cellMapRef.current.get(cellKeyRetry);\n\n if (targetCellRetry) {\n const scrollDirection = getScrollDirection(direction);\n\n scrollCellIntoView({\n container,\n targetCell: targetCellRetry,\n tableRef,\n viewportOffset: VIEWPORT_OFFSET,\n direction: scrollDirection,\n isRtl: dir === \"rtl\",\n });\n }\n });\n }\n } else {\n // Fallback: use direct scroll calculation when virtualizer is not available\n const rowHeightValue = getRowHeightValue(rowHeight);\n const estimatedScrollTop = newRowIndex * rowHeightValue;\n container.scrollTop = estimatedScrollTop;\n }\n\n return;\n }\n\n // Vertical scrolling for rendered rows that changed\n if (newRowIndex !== rowIndex && targetRow) {\n requestAnimationFrame(() => {\n const containerRect = container.getBoundingClientRect();\n const headerHeight =\n headerRef.current?.getBoundingClientRect().height ?? 0;\n const footerHeight =\n footerRef.current?.getBoundingClientRect().height ?? 0;\n const viewportTop =\n containerRect.top + headerHeight + VIEWPORT_OFFSET;\n const viewportBottom =\n containerRect.bottom - footerHeight - VIEWPORT_OFFSET;\n\n const rowRect = targetRow.getBoundingClientRect();\n const isFullyVisible =\n rowRect.top >= viewportTop && rowRect.bottom <= viewportBottom;\n\n if (!isFullyVisible) {\n // Only apply vertical scroll for vertical navigation\n const isVerticalNavigation =\n direction === \"up\" ||\n direction === \"down\" ||\n direction === \"pageup\" ||\n direction === \"pagedown\" ||\n direction === \"ctrl+up\" ||\n direction === \"ctrl+down\" ||\n direction === \"ctrl+home\" ||\n direction === \"ctrl+end\";\n\n if (isVerticalNavigation) {\n if (\n direction === \"down\" ||\n direction === \"pagedown\" ||\n direction === \"ctrl+down\" ||\n direction === \"ctrl+end\"\n ) {\n container.scrollTop += rowRect.bottom - viewportBottom;\n } else {\n container.scrollTop -= viewportTop - rowRect.top;\n }\n }\n }\n });\n }\n\n // Horizontal scrolling for rendered cells\n if (newColumnId !== columnId && targetCell) {\n requestAnimationFrame(() => {\n const scrollDirection = getScrollDirection(direction);\n\n scrollCellIntoView({\n container,\n targetCell,\n tableRef,\n viewportOffset: VIEWPORT_OFFSET,\n direction: scrollDirection,\n isRtl: dir === \"rtl\",\n });\n });\n }\n }\n },\n [dir, store, navigableColumnIds, focusCell, propsRef, rowHeight],\n );\n\n const onCellEditingStart = React.useCallback(\n (rowIndex: number, columnId: string) => {\n if (propsRef.current.readOnly) return;\n\n store.batch(() => {\n store.setState(\"focusedCell\", { rowIndex, columnId });\n store.setState(\"editingCell\", { rowIndex, columnId });\n });\n },\n [store, propsRef],\n );\n\n const onCellEditingStop = React.useCallback(\n (opts?: { moveToNextRow?: boolean; direction?: NavigationDirection }) => {\n const currentState = store.getState();\n const currentEditing = currentState.editingCell;\n\n store.setState(\"editingCell\", null);\n\n if (opts?.moveToNextRow && currentEditing) {\n const { rowIndex, columnId } = currentEditing;\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows ?? [];\n const rowCount = rows.length ?? propsRef.current.data.length;\n\n const nextRowIndex = rowIndex + 1;\n if (nextRowIndex < rowCount) {\n requestAnimationFrame(() => {\n focusCell(nextRowIndex, columnId);\n });\n }\n } else if (opts?.direction && currentEditing) {\n const { rowIndex, columnId } = currentEditing;\n focusCell(rowIndex, columnId);\n requestAnimationFrame(() => {\n navigateCell(opts.direction ?? \"right\");\n });\n } else if (currentEditing) {\n const { rowIndex, columnId } = currentEditing;\n focusCellWrapper(rowIndex, columnId);\n }\n },\n [store, propsRef, focusCell, navigateCell, focusCellWrapper],\n );\n\n const onSearchOpenChange = React.useCallback(\n (open: boolean) => {\n if (open) {\n store.setState(\"searchOpen\", true);\n return;\n }\n\n const currentState = store.getState();\n const currentMatch =\n currentState.matchIndex >= 0 &&\n currentState.searchMatches[currentState.matchIndex];\n\n store.batch(() => {\n store.setState(\"searchOpen\", false);\n store.setState(\"searchQuery\", \"\");\n store.setState(\"searchMatches\", []);\n store.setState(\"matchIndex\", -1);\n\n if (currentMatch) {\n store.setState(\"focusedCell\", {\n rowIndex: currentMatch.rowIndex,\n columnId: currentMatch.columnId,\n });\n }\n });\n\n if (\n dataGridRef.current &&\n document.activeElement !== dataGridRef.current\n ) {\n dataGridRef.current.focus();\n }\n },\n [store],\n );\n\n const onSearch = React.useCallback(\n (query: string) => {\n if (!query.trim()) {\n store.batch(() => {\n store.setState(\"searchMatches\", []);\n store.setState(\"matchIndex\", -1);\n });\n return;\n }\n\n const matches: CellPosition[] = [];\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows ?? [];\n\n const lowerQuery = query.toLowerCase();\n\n for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {\n const row = rows[rowIndex];\n if (!row) continue;\n\n const cellById = new Map(\n row.getVisibleCells().map((c) => [c.column.id, c]),\n );\n\n for (const columnId of columnIds) {\n const cell = cellById.get(columnId);\n if (!cell) continue;\n\n const value = cell.getValue();\n const stringValue = String(value ?? \"\").toLowerCase();\n\n if (stringValue.includes(lowerQuery)) {\n matches.push({ rowIndex, columnId });\n }\n }\n }\n\n store.batch(() => {\n store.setState(\"searchMatches\", matches);\n store.setState(\"matchIndex\", matches.length > 0 ? 0 : -1);\n });\n\n if (matches.length > 0 && matches[0]) {\n const firstMatch = matches[0];\n rowVirtualizerRef.current?.scrollToIndex(firstMatch.rowIndex, {\n align: \"center\",\n });\n }\n },\n [columnIds, store],\n );\n\n const onSearchQueryChange = React.useCallback(\n (query: string) => store.setState(\"searchQuery\", query),\n [store],\n );\n\n const onNavigateToPrevMatch = React.useCallback(() => {\n const currentState = store.getState();\n if (currentState.searchMatches.length === 0) return;\n\n const prevIndex =\n currentState.matchIndex - 1 < 0\n ? currentState.searchMatches.length - 1\n : currentState.matchIndex - 1;\n const match = currentState.searchMatches[prevIndex];\n\n if (match) {\n rowVirtualizerRef.current?.scrollToIndex(match.rowIndex, {\n align: \"center\",\n });\n\n requestAnimationFrame(() => {\n store.setState(\"matchIndex\", prevIndex);\n requestAnimationFrame(() => {\n focusCell(match.rowIndex, match.columnId);\n });\n });\n }\n }, [store, focusCell]);\n\n const onNavigateToNextMatch = React.useCallback(() => {\n const currentState = store.getState();\n if (currentState.searchMatches.length === 0) return;\n\n const nextIndex =\n (currentState.matchIndex + 1) % currentState.searchMatches.length;\n const match = currentState.searchMatches[nextIndex];\n\n if (match) {\n rowVirtualizerRef.current?.scrollToIndex(match.rowIndex, {\n align: \"center\",\n });\n\n requestAnimationFrame(() => {\n store.setState(\"matchIndex\", nextIndex);\n requestAnimationFrame(() => {\n focusCell(match.rowIndex, match.columnId);\n });\n });\n }\n }, [store, focusCell]);\n\n const searchMatchSet = React.useMemo(() => {\n return new Set(\n searchMatches.map((m) => getCellKey(m.rowIndex, m.columnId)),\n );\n }, [searchMatches]);\n\n const getIsSearchMatch = React.useCallback(\n (rowIndex: number, columnId: string) => {\n return searchMatchSet.has(getCellKey(rowIndex, columnId));\n },\n [searchMatchSet],\n );\n\n const getIsActiveSearchMatch = React.useCallback(\n (rowIndex: number, columnId: string) => {\n const currentState = store.getState();\n if (currentState.matchIndex < 0) return false;\n const currentMatch = currentState.searchMatches[currentState.matchIndex];\n return (\n currentMatch?.rowIndex === rowIndex &&\n currentMatch?.columnId === columnId\n );\n },\n [store],\n );\n\n // Compute search match data for targeted row re-renders\n // Maps rowIndex -> Set of columnIds that have matches in that row\n const searchMatchesByRow = React.useMemo(() => {\n if (searchMatches.length === 0) return null;\n const rowMap = new Map>();\n for (const match of searchMatches) {\n let columnSet = rowMap.get(match.rowIndex);\n if (!columnSet) {\n columnSet = new Set();\n rowMap.set(match.rowIndex, columnSet);\n }\n columnSet.add(match.columnId);\n }\n return rowMap;\n }, [searchMatches]);\n\n const activeSearchMatch = React.useMemo(() => {\n if (matchIndex < 0 || searchMatches.length === 0) return null;\n return searchMatches[matchIndex] ?? null;\n }, [searchMatches, matchIndex]);\n\n const blurCell = React.useCallback(() => {\n const currentState = store.getState();\n if (\n currentState.editingCell &&\n document.activeElement instanceof HTMLElement\n ) {\n document.activeElement.blur();\n }\n\n store.batch(() => {\n store.setState(\"focusedCell\", null);\n store.setState(\"editingCell\", null);\n });\n }, [store]);\n\n const onCellClick = React.useCallback(\n (rowIndex: number, columnId: string, event?: React.MouseEvent) => {\n if (event?.button === 2) {\n return;\n }\n\n const currentState = store.getState();\n const currentFocused = currentState.focusedCell;\n\n function scrollToCell() {\n requestAnimationFrame(() => {\n const container = dataGridRef.current;\n const cellKey = getCellKey(rowIndex, columnId);\n const targetCell = cellMapRef.current.get(cellKey);\n\n if (container && targetCell) {\n scrollCellIntoView({\n container,\n targetCell,\n tableRef,\n viewportOffset: VIEWPORT_OFFSET,\n isRtl: dir === \"rtl\",\n });\n }\n });\n }\n\n if (event) {\n if (event.ctrlKey || event.metaKey) {\n event.preventDefault();\n const cellKey = getCellKey(rowIndex, columnId);\n const newSelectedCells = new Set(\n currentState.selectionState.selectedCells,\n );\n\n if (newSelectedCells.has(cellKey)) {\n newSelectedCells.delete(cellKey);\n } else {\n newSelectedCells.add(cellKey);\n }\n\n store.setState(\"selectionState\", {\n selectedCells: newSelectedCells,\n selectionRange: null,\n isSelecting: false,\n });\n focusCell(rowIndex, columnId);\n scrollToCell();\n return;\n }\n\n if (event.shiftKey && currentState.focusedCell) {\n event.preventDefault();\n selectRange(currentState.focusedCell, { rowIndex, columnId });\n scrollToCell();\n return;\n }\n }\n\n const hasSelectedCells =\n currentState.selectionState.selectedCells.size > 0;\n const hasSelectedRows = Object.keys(currentState.rowSelection).length > 0;\n\n if (hasSelectedCells && !currentState.selectionState.isSelecting) {\n const cellKey = getCellKey(rowIndex, columnId);\n const isClickingSelectedCell =\n currentState.selectionState.selectedCells.has(cellKey);\n\n if (!isClickingSelectedCell) {\n onSelectionClear();\n } else {\n focusCell(rowIndex, columnId);\n scrollToCell();\n return;\n }\n } else if (hasSelectedRows && columnId !== \"select\") {\n onSelectionClear();\n }\n\n if (\n currentFocused?.rowIndex === rowIndex &&\n currentFocused?.columnId === columnId\n ) {\n onCellEditingStart(rowIndex, columnId);\n } else {\n focusCell(rowIndex, columnId);\n scrollToCell();\n }\n },\n [store, focusCell, onCellEditingStart, selectRange, onSelectionClear, dir],\n );\n\n const onCellDoubleClick = React.useCallback(\n (rowIndex: number, columnId: string, event?: React.MouseEvent) => {\n if (event?.defaultPrevented) return;\n\n onCellEditingStart(rowIndex, columnId);\n },\n [onCellEditingStart],\n );\n\n const onCellMouseDown = React.useCallback(\n (rowIndex: number, columnId: string, event: React.MouseEvent) => {\n if (event.button === 2) {\n return;\n }\n\n event.preventDefault();\n\n if (!event.ctrlKey && !event.metaKey && !event.shiftKey) {\n const cellKey = getCellKey(rowIndex, columnId);\n store.batch(() => {\n store.setState(\"selectionState\", {\n selectedCells: propsRef.current.enableSingleCellSelection\n ? new Set([cellKey])\n : new Set(),\n selectionRange: {\n start: { rowIndex, columnId },\n end: { rowIndex, columnId },\n },\n isSelecting: true,\n });\n store.setState(\"rowSelection\", {});\n });\n }\n },\n [store, propsRef],\n );\n\n const onCellMouseEnter = React.useCallback(\n (rowIndex: number, columnId: string) => {\n const currentState = store.getState();\n if (\n currentState.selectionState.isSelecting &&\n currentState.selectionState.selectionRange\n ) {\n const start = currentState.selectionState.selectionRange.start;\n const end = { rowIndex, columnId };\n\n if (\n currentState.focusedCell?.rowIndex !== start.rowIndex ||\n currentState.focusedCell?.columnId !== start.columnId\n ) {\n focusCell(start.rowIndex, start.columnId);\n }\n\n selectRange(start, end, true);\n }\n },\n [store, selectRange, focusCell],\n );\n\n const onCellMouseUp = React.useCallback(() => {\n const currentState = store.getState();\n store.setState(\"selectionState\", {\n ...currentState.selectionState,\n isSelecting: false,\n });\n }, [store]);\n\n const onCellContextMenu = React.useCallback(\n (rowIndex: number, columnId: string, event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const currentState = store.getState();\n const cellKey = getCellKey(rowIndex, columnId);\n const isTargetCellSelected =\n currentState.selectionState.selectedCells.has(cellKey);\n\n if (!isTargetCellSelected) {\n store.batch(() => {\n store.setState(\"selectionState\", {\n selectedCells: new Set([cellKey]),\n selectionRange: {\n start: { rowIndex, columnId },\n end: { rowIndex, columnId },\n },\n isSelecting: false,\n });\n store.setState(\"focusedCell\", { rowIndex, columnId });\n });\n }\n\n store.setState(\"contextMenu\", {\n open: true,\n x: event.clientX,\n y: event.clientY,\n });\n },\n [store],\n );\n\n const onContextMenuOpenChange = React.useCallback(\n (open: boolean) => {\n if (!open) {\n const currentMenu = store.getState().contextMenu;\n store.setState(\"contextMenu\", {\n open: false,\n x: currentMenu.x,\n y: currentMenu.y,\n });\n }\n },\n [store],\n );\n\n const onSortingChange = React.useCallback(\n (updater: Updater) => {\n const currentState = store.getState();\n const newSorting =\n typeof updater === \"function\" ? updater(currentState.sorting) : updater;\n store.setState(\"sorting\", newSorting);\n\n propsRef.current.onSortingChange?.(newSorting);\n },\n [store, propsRef],\n );\n\n const onColumnFiltersChange = React.useCallback(\n (updater: Updater) => {\n const currentState = store.getState();\n const newColumnFilters =\n typeof updater === \"function\"\n ? updater(currentState.columnFilters)\n : updater;\n store.setState(\"columnFilters\", newColumnFilters);\n\n propsRef.current.onColumnFiltersChange?.(newColumnFilters);\n },\n [store, propsRef],\n );\n\n const onRowSelectionChange = React.useCallback(\n (updater: Updater) => {\n const currentState = store.getState();\n const newRowSelection =\n typeof updater === \"function\"\n ? updater(currentState.rowSelection)\n : updater;\n\n const selectedRows = Object.keys(newRowSelection).filter(\n (key) => newRowSelection[key],\n );\n\n const selectedCells = new Set();\n const rows = tableRef.current?.getRowModel().rows ?? [];\n\n for (const rowId of selectedRows) {\n const rowIndex = rows.findIndex((r) => r.id === rowId);\n if (rowIndex === -1) continue;\n\n for (const columnId of columnIds) {\n selectedCells.add(getCellKey(rowIndex, columnId));\n }\n }\n\n store.batch(() => {\n store.setState(\"rowSelection\", newRowSelection);\n store.setState(\"selectionState\", {\n selectedCells,\n selectionRange: null,\n isSelecting: false,\n });\n store.setState(\"focusedCell\", null);\n store.setState(\"editingCell\", null);\n });\n\n propsRef.current.onRowSelectionChange?.(updater);\n },\n [store, columnIds, propsRef],\n );\n\n const onRowSelect = React.useCallback(\n (rowId: string, selected: boolean, shiftKey: boolean) => {\n const currentState = store.getState();\n const rows = tableRef.current?.getRowModel().rows ?? [];\n const currentRowIndex = rows.findIndex((r) => r.id === rowId);\n const currentRow = currentRowIndex >= 0 ? rows[currentRowIndex] : null;\n if (!currentRow) return;\n\n if (shiftKey && currentState.lastClickedRowId !== null) {\n const lastClickedRowIndex = rows.findIndex(\n (r) => r.id === currentState.lastClickedRowId,\n );\n if (lastClickedRowIndex >= 0) {\n const startIndex = Math.min(lastClickedRowIndex, currentRowIndex);\n const endIndex = Math.max(lastClickedRowIndex, currentRowIndex);\n\n const newRowSelection: RowSelectionState = {\n ...currentState.rowSelection,\n };\n\n for (let i = startIndex; i <= endIndex; i++) {\n const row = rows[i];\n if (row) {\n newRowSelection[row.id] = selected;\n }\n }\n\n onRowSelectionChange(newRowSelection);\n } else {\n onRowSelectionChange({\n ...currentState.rowSelection,\n [currentRow.id]: selected,\n });\n }\n } else {\n onRowSelectionChange({\n ...currentState.rowSelection,\n [currentRow.id]: selected,\n });\n }\n\n store.setState(\"lastClickedRowId\", rowId);\n },\n [store, onRowSelectionChange],\n );\n\n const onRowHeightChange = React.useCallback(\n (updater: Updater) => {\n const currentState = store.getState();\n const newRowHeight =\n typeof updater === \"function\"\n ? updater(currentState.rowHeight)\n : updater;\n store.setState(\"rowHeight\", newRowHeight);\n propsRef.current.onRowHeightChange?.(newRowHeight);\n },\n [store, propsRef],\n );\n\n const onColumnClick = React.useCallback(\n (columnId: string) => {\n if (!propsRef.current.enableColumnSelection) {\n onSelectionClear();\n return;\n }\n\n selectColumn(columnId);\n },\n [propsRef, selectColumn, onSelectionClear],\n );\n\n const onPasteDialogOpenChange = React.useCallback(\n (open: boolean) => {\n if (!open) {\n store.setState(\"pasteDialog\", {\n open: false,\n rowsNeeded: 0,\n clipboardText: \"\",\n });\n }\n },\n [store],\n );\n\n const defaultColumn: Partial> = React.useMemo(\n () => ({\n // Note: cell is rendered directly in DataGridRow to bypass flexRender's\n // unstable cell.getContext() (see TanStack Table issue #4794)\n minSize: MIN_COLUMN_SIZE,\n maxSize: MAX_COLUMN_SIZE,\n }),\n [],\n );\n\n const tableMeta = React.useMemo>(() => {\n return {\n ...propsRef.current.meta,\n dataGridRef,\n cellMapRef,\n get focusedCell() {\n return store.getState().focusedCell;\n },\n get editingCell() {\n return store.getState().editingCell;\n },\n get selectionState() {\n return store.getState().selectionState;\n },\n get searchOpen() {\n return store.getState().searchOpen;\n },\n get contextMenu() {\n return store.getState().contextMenu;\n },\n get pasteDialog() {\n return store.getState().pasteDialog;\n },\n get rowHeight() {\n return store.getState().rowHeight;\n },\n get readOnly() {\n return propsRef.current.readOnly;\n },\n getIsCellSelected,\n getIsSearchMatch,\n getIsActiveSearchMatch,\n getVisualRowIndex,\n onRowHeightChange,\n onRowSelect,\n onDataUpdate,\n onRowsDelete: propsRef.current.onRowsDelete ? onRowsDelete : undefined,\n onColumnClick,\n onCellClick,\n onCellDoubleClick,\n onCellMouseDown,\n onCellMouseEnter,\n onCellMouseUp,\n onCellContextMenu,\n onCellEditingStart,\n onCellEditingStop,\n onCellsCopy,\n onCellsCut,\n onCellsPaste,\n onSelectionClear,\n onFilesUpload: propsRef.current.onFilesUpload\n ? propsRef.current.onFilesUpload\n : undefined,\n onFilesDelete: propsRef.current.onFilesDelete\n ? propsRef.current.onFilesDelete\n : undefined,\n onContextMenuOpenChange,\n onPasteDialogOpenChange,\n };\n }, [\n propsRef,\n store,\n getIsCellSelected,\n getIsSearchMatch,\n getIsActiveSearchMatch,\n getVisualRowIndex,\n onRowHeightChange,\n onRowSelect,\n onDataUpdate,\n onRowsDelete,\n onColumnClick,\n onCellClick,\n onCellDoubleClick,\n onCellMouseDown,\n onCellMouseEnter,\n onCellMouseUp,\n onCellContextMenu,\n onCellEditingStart,\n onCellEditingStop,\n onCellsCopy,\n onCellsCut,\n onCellsPaste,\n onSelectionClear,\n onContextMenuOpenChange,\n onPasteDialogOpenChange,\n ]);\n\n const getMemoizedCoreRowModel = React.useMemo(() => getCoreRowModel(), []);\n const getMemoizedFilteredRowModel = React.useMemo(\n () => getFilteredRowModel(),\n [],\n );\n const getMemoizedSortedRowModel = React.useMemo(\n () => getSortedRowModel(),\n [],\n );\n\n // Memoize state object to reduce shallow equality checks\n const tableState = React.useMemo>(\n () => ({\n ...propsRef.current.state,\n sorting,\n columnFilters,\n rowSelection,\n }),\n [propsRef, sorting, columnFilters, rowSelection],\n );\n\n const tableOptions = React.useMemo>(() => {\n return {\n ...propsRef.current,\n data,\n columns,\n defaultColumn,\n initialState: propsRef.current.initialState,\n state: tableState,\n onRowSelectionChange,\n onSortingChange,\n onColumnFiltersChange,\n columnResizeMode: \"onChange\",\n columnResizeDirection: dir,\n getCoreRowModel: getMemoizedCoreRowModel,\n getFilteredRowModel: getMemoizedFilteredRowModel,\n getSortedRowModel: getMemoizedSortedRowModel,\n meta: tableMeta,\n };\n }, [\n propsRef,\n data,\n columns,\n defaultColumn,\n tableState,\n dir,\n onRowSelectionChange,\n onSortingChange,\n onColumnFiltersChange,\n getMemoizedCoreRowModel,\n getMemoizedFilteredRowModel,\n getMemoizedSortedRowModel,\n tableMeta,\n ]);\n\n const table = useReactTable(tableOptions);\n\n if (!tableRef.current) {\n tableRef.current = table;\n }\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: columnSizingInfo and columnSizing are used for calculating the column size vars\n const columnSizeVars = React.useMemo(() => {\n const headers = table.getFlatHeaders();\n const colSizes: { [key: string]: number } = {};\n for (const header of headers) {\n colSizes[`--header-${header.id}-size`] = header.getSize();\n colSizes[`--col-${header.column.id}-size`] = header.column.getSize();\n }\n return colSizes;\n }, [table.getState().columnSizingInfo, table.getState().columnSizing]);\n\n const isFirefox = React.useSyncExternalStore(\n React.useCallback(() => () => {}, []),\n React.useCallback(() => {\n if (typeof window === \"undefined\" || typeof navigator === \"undefined\") {\n return false;\n }\n return navigator.userAgent.indexOf(\"Firefox\") !== -1;\n }, []),\n React.useCallback(() => false, []),\n );\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: columnPinning is used for calculating the adjustLayout\n const adjustLayout = React.useMemo(() => {\n const columnPinning = table.getState().columnPinning;\n return (\n isFirefox &&\n ((columnPinning.left?.length ?? 0) > 0 ||\n (columnPinning.right?.length ?? 0) > 0)\n );\n }, [isFirefox, table.getState().columnPinning]);\n\n const rowVirtualizer = useVirtualizer({\n count: table.getRowModel().rows.length,\n getScrollElement: () => dataGridRef.current,\n estimateSize: () => rowHeightValue,\n overscan,\n measureElement: !isFirefox\n ? (element) => element?.getBoundingClientRect().height\n : undefined,\n });\n\n if (!rowVirtualizerRef.current) {\n rowVirtualizerRef.current = rowVirtualizer;\n }\n\n const onScrollToRow = React.useCallback(\n async (opts: Partial) => {\n const rowIndex = opts?.rowIndex ?? 0;\n const columnId = opts?.columnId;\n\n focusGuardRef.current = true;\n\n const navigableIds = propsRef.current.columns\n .map((c) => {\n if (c.id) return c.id;\n if (\"accessorKey\" in c) return c.accessorKey as string;\n return undefined;\n })\n .filter((id): id is string => Boolean(id))\n .filter((c) => !NON_NAVIGABLE_COLUMN_IDS.has(c));\n\n const targetColumnId = columnId ?? navigableIds[0];\n\n if (!targetColumnId) {\n releaseFocusGuard(true);\n return;\n }\n\n async function onScrollAndFocus(retryCount: number) {\n if (!targetColumnId) return;\n const currentRowCount = propsRef.current.data.length;\n\n // If the requested row doesn't exist yet, wait for data to update\n if (rowIndex >= currentRowCount && retryCount > 0) {\n await new Promise((resolve) => setTimeout(resolve, 50));\n await onScrollAndFocus(retryCount - 1);\n return;\n }\n\n const safeRowIndex = Math.min(\n rowIndex,\n Math.max(0, currentRowCount - 1),\n );\n\n const isBottomHalf = safeRowIndex > currentRowCount / 2;\n rowVirtualizer.scrollToIndex(safeRowIndex, {\n align: isBottomHalf ? \"end\" : \"start\",\n });\n\n await new Promise((resolve) => requestAnimationFrame(resolve));\n\n // Adjust scroll position to account for sticky header/footer\n const container = dataGridRef.current;\n const targetRow = rowMapRef.current.get(safeRowIndex);\n\n if (container && targetRow) {\n const containerRect = container.getBoundingClientRect();\n const headerHeight =\n headerRef.current?.getBoundingClientRect().height ?? 0;\n const footerHeight =\n footerRef.current?.getBoundingClientRect().height ?? 0;\n\n const viewportTop =\n containerRect.top + headerHeight + VIEWPORT_OFFSET;\n const viewportBottom =\n containerRect.bottom - footerHeight - VIEWPORT_OFFSET;\n\n const rowRect = targetRow.getBoundingClientRect();\n const isFullyVisible =\n rowRect.top >= viewportTop && rowRect.bottom <= viewportBottom;\n\n if (!isFullyVisible) {\n if (rowRect.top < viewportTop) {\n // Row is partially hidden by header - scroll up\n container.scrollTop -= viewportTop - rowRect.top;\n } else if (rowRect.bottom > viewportBottom) {\n // Row is partially hidden by footer - scroll down\n container.scrollTop += rowRect.bottom - viewportBottom;\n }\n }\n }\n\n store.batch(() => {\n store.setState(\"focusedCell\", {\n rowIndex: safeRowIndex,\n columnId: targetColumnId,\n });\n store.setState(\"editingCell\", null);\n });\n\n const cellKey = getCellKey(safeRowIndex, targetColumnId);\n const cellElement = cellMapRef.current.get(cellKey);\n\n if (cellElement) {\n cellElement.focus();\n releaseFocusGuard();\n } else if (retryCount > 0) {\n await new Promise((resolve) => requestAnimationFrame(resolve));\n await onScrollAndFocus(retryCount - 1);\n } else {\n dataGridRef.current?.focus();\n releaseFocusGuard();\n }\n }\n\n await onScrollAndFocus(SCROLL_SYNC_RETRY_COUNT);\n },\n [rowVirtualizer, propsRef, store, releaseFocusGuard],\n );\n\n const onRowAdd = React.useCallback(\n async (event?: React.MouseEvent) => {\n if (propsRef.current.readOnly || !propsRef.current.onRowAdd) return;\n\n const initialRowCount = propsRef.current.data.length;\n\n let result: Partial | null;\n try {\n result = await propsRef.current.onRowAdd(event);\n } catch {\n // Callback threw an error, don't proceed with scroll/focus\n return;\n }\n\n if (result === null || event?.defaultPrevented) return;\n\n onSelectionClear();\n\n // Trust the returned rowIndex from the callback\n // onScrollToRow will handle retries if the row isn't rendered yet\n const targetRowIndex = result.rowIndex ?? initialRowCount;\n const targetColumnId = result.columnId;\n\n onScrollToRow({\n rowIndex: targetRowIndex,\n columnId: targetColumnId,\n });\n },\n [propsRef, onScrollToRow, onSelectionClear],\n );\n\n const onDataGridKeyDown = React.useCallback(\n (event: KeyboardEvent) => {\n const currentState = store.getState();\n const { key, ctrlKey, metaKey, shiftKey, altKey } = event;\n const isCtrlPressed = ctrlKey || metaKey;\n\n if (\n propsRef.current.enableSearch &&\n isCtrlPressed &&\n !shiftKey &&\n key === SEARCH_SHORTCUT_KEY\n ) {\n event.preventDefault();\n onSearchOpenChange(true);\n return;\n }\n\n if (\n propsRef.current.enableSearch &&\n currentState.searchOpen &&\n !currentState.editingCell\n ) {\n if (key === \"Enter\") {\n event.preventDefault();\n if (shiftKey) {\n onNavigateToPrevMatch();\n } else {\n onNavigateToNextMatch();\n }\n return;\n }\n if (key === \"Escape\") {\n event.preventDefault();\n onSearchOpenChange(false);\n return;\n }\n return;\n }\n\n // Cell editing keyboard events (Enter, Tab, Escape) are handled by the cell variants\n // to ensure proper value commitment before navigation\n if (currentState.editingCell) return;\n\n if (\n isCtrlPressed &&\n (key === \"Backspace\" || key === \"Delete\") &&\n !propsRef.current.readOnly &&\n propsRef.current.onRowsDelete\n ) {\n const rowIndices = new Set();\n\n const selectedRowIds = Object.keys(currentState.rowSelection);\n if (selectedRowIds.length > 0) {\n const currentTable = tableRef.current;\n const rows = currentTable?.getRowModel().rows ?? [];\n for (const row of rows) {\n if (currentState.rowSelection[row.id]) {\n rowIndices.add(row.index);\n }\n }\n } else if (currentState.selectionState.selectedCells.size > 0) {\n for (const cellKey of currentState.selectionState.selectedCells) {\n const { rowIndex } = parseCellKey(cellKey);\n rowIndices.add(rowIndex);\n }\n } else if (currentState.focusedCell) {\n rowIndices.add(currentState.focusedCell.rowIndex);\n }\n\n if (rowIndices.size > 0) {\n event.preventDefault();\n onRowsDelete(Array.from(rowIndices));\n }\n return;\n }\n\n if (!currentState.focusedCell) return;\n\n let direction: NavigationDirection | null = null;\n\n if (isCtrlPressed && !shiftKey && key === \"a\") {\n event.preventDefault();\n selectAll();\n return;\n }\n\n if (isCtrlPressed && !shiftKey && key === \"c\") {\n event.preventDefault();\n onCellsCopy();\n return;\n }\n\n if (\n isCtrlPressed &&\n !shiftKey &&\n key === \"x\" &&\n !propsRef.current.readOnly\n ) {\n event.preventDefault();\n onCellsCut();\n return;\n }\n\n if (\n propsRef.current.enablePaste &&\n isCtrlPressed &&\n !shiftKey &&\n key === \"v\" &&\n !propsRef.current.readOnly\n ) {\n event.preventDefault();\n onCellsPaste();\n return;\n }\n\n if (\n (key === \"Delete\" || key === \"Backspace\") &&\n !isCtrlPressed &&\n !propsRef.current.readOnly\n ) {\n const cellsToClear =\n currentState.selectionState.selectedCells.size > 0\n ? Array.from(currentState.selectionState.selectedCells)\n : currentState.focusedCell\n ? [\n getCellKey(\n currentState.focusedCell.rowIndex,\n currentState.focusedCell.columnId,\n ),\n ]\n : [];\n\n if (cellsToClear.length > 0) {\n event.preventDefault();\n\n const updates: Array<{\n rowIndex: number;\n columnId: string;\n value: unknown;\n }> = [];\n\n const currentTable = tableRef.current;\n const tableColumns = currentTable?.getAllColumns() ?? [];\n const columnById = new Map(tableColumns.map((c) => [c.id, c]));\n\n for (const cellKey of cellsToClear) {\n const { rowIndex, columnId } = parseCellKey(cellKey);\n const column = columnById.get(columnId);\n const cellVariant = column?.columnDef?.meta?.cell?.variant;\n const emptyValue = getEmptyCellValue(cellVariant);\n updates.push({ rowIndex, columnId, value: emptyValue });\n }\n\n onDataUpdate(updates);\n\n if (currentState.selectionState.selectedCells.size > 0) {\n onSelectionClear();\n }\n\n if (currentState.cutCells.size > 0) {\n store.setState(\"cutCells\", new Set());\n }\n }\n return;\n }\n\n if (\n key === \"Enter\" &&\n shiftKey &&\n !propsRef.current.readOnly &&\n propsRef.current.onRowAdd\n ) {\n event.preventDefault();\n const initialRowCount = propsRef.current.data.length;\n const currentColumnId = currentState.focusedCell.columnId;\n\n Promise.resolve(propsRef.current.onRowAdd())\n .then(async (result) => {\n if (result === null) return;\n\n onSelectionClear();\n\n const targetRowIndex = result.rowIndex ?? initialRowCount;\n const targetColumnId = result.columnId ?? currentColumnId;\n\n onScrollToRow({\n rowIndex: targetRowIndex,\n columnId: targetColumnId,\n });\n })\n .catch(() => {\n // Callback threw an error, don't proceed with scroll/focus\n });\n return;\n }\n\n switch (key) {\n case \"ArrowUp\":\n if (altKey && !isCtrlPressed && !shiftKey) {\n direction = \"pageup\";\n } else if (isCtrlPressed && shiftKey) {\n const selectionEdge =\n currentState.selectionState.selectionRange?.end ||\n currentState.focusedCell;\n const currentColIndex = navigableColumnIds.indexOf(\n selectionEdge.columnId,\n );\n const selectionStart =\n currentState.selectionState.selectionRange?.start ||\n currentState.focusedCell;\n\n selectRange(selectionStart, {\n rowIndex: 0,\n columnId:\n navigableColumnIds[currentColIndex] ?? selectionEdge.columnId,\n });\n\n const rowVirtualizer = rowVirtualizerRef.current;\n if (rowVirtualizer) {\n rowVirtualizer.scrollToIndex(0, { align: \"start\" });\n }\n\n restoreFocus(dataGridRef.current);\n\n event.preventDefault();\n return;\n } else if (isCtrlPressed && !shiftKey) {\n direction = \"ctrl+up\";\n } else {\n direction = \"up\";\n }\n break;\n case \"ArrowDown\":\n if (altKey && !isCtrlPressed && !shiftKey) {\n direction = \"pagedown\";\n } else if (isCtrlPressed && shiftKey) {\n const rowCount =\n tableRef.current?.getRowModel().rows.length ||\n propsRef.current.data.length;\n const selectionEdge =\n currentState.selectionState.selectionRange?.end ||\n currentState.focusedCell;\n const currentColIndex = navigableColumnIds.indexOf(\n selectionEdge.columnId,\n );\n const selectionStart =\n currentState.selectionState.selectionRange?.start ||\n currentState.focusedCell;\n\n selectRange(selectionStart, {\n rowIndex: Math.max(0, rowCount - 1),\n columnId:\n navigableColumnIds[currentColIndex] ?? selectionEdge.columnId,\n });\n\n const rowVirtualizer = rowVirtualizerRef.current;\n if (rowVirtualizer) {\n rowVirtualizer.scrollToIndex(Math.max(0, rowCount - 1), {\n align: \"end\",\n });\n }\n\n restoreFocus(dataGridRef.current);\n\n event.preventDefault();\n return;\n } else if (isCtrlPressed && !shiftKey) {\n direction = \"ctrl+down\";\n } else {\n direction = \"down\";\n }\n break;\n case \"ArrowLeft\":\n if (isCtrlPressed && shiftKey) {\n const selectionEdge =\n currentState.selectionState.selectionRange?.end ||\n currentState.focusedCell;\n const selectionStart =\n currentState.selectionState.selectionRange?.start ||\n currentState.focusedCell;\n const targetColumnId =\n dir === \"rtl\"\n ? navigableColumnIds[navigableColumnIds.length - 1]\n : navigableColumnIds[0];\n\n if (targetColumnId) {\n selectRange(selectionStart, {\n rowIndex: selectionEdge.rowIndex,\n columnId: targetColumnId,\n });\n\n const container = dataGridRef.current;\n const cellKey = getCellKey(\n selectionEdge.rowIndex,\n targetColumnId,\n );\n const targetCell = cellMapRef.current.get(cellKey);\n if (container && targetCell) {\n scrollCellIntoView({\n container,\n targetCell,\n tableRef,\n viewportOffset: VIEWPORT_OFFSET,\n direction: \"home\",\n isRtl: dir === \"rtl\",\n });\n }\n\n restoreFocus(container);\n }\n event.preventDefault();\n return;\n } else if (isCtrlPressed && !shiftKey) {\n direction = \"home\";\n } else {\n direction = \"left\";\n }\n break;\n case \"ArrowRight\":\n if (isCtrlPressed && shiftKey) {\n const selectionEdge =\n currentState.selectionState.selectionRange?.end ||\n currentState.focusedCell;\n const selectionStart =\n currentState.selectionState.selectionRange?.start ||\n currentState.focusedCell;\n const targetColumnId =\n dir === \"rtl\"\n ? navigableColumnIds[0]\n : navigableColumnIds[navigableColumnIds.length - 1];\n\n if (targetColumnId) {\n selectRange(selectionStart, {\n rowIndex: selectionEdge.rowIndex,\n columnId: targetColumnId,\n });\n\n const container = dataGridRef.current;\n const cellKey = getCellKey(\n selectionEdge.rowIndex,\n targetColumnId,\n );\n const targetCell = cellMapRef.current.get(cellKey);\n if (container && targetCell) {\n scrollCellIntoView({\n container,\n targetCell,\n tableRef,\n viewportOffset: VIEWPORT_OFFSET,\n direction: \"end\",\n isRtl: dir === \"rtl\",\n });\n }\n\n restoreFocus(container);\n }\n event.preventDefault();\n return;\n } else if (isCtrlPressed && !shiftKey) {\n direction = \"end\";\n } else {\n direction = \"right\";\n }\n break;\n case \"Home\":\n direction = isCtrlPressed ? \"ctrl+home\" : \"home\";\n break;\n case \"End\":\n direction = isCtrlPressed ? \"ctrl+end\" : \"end\";\n break;\n case \"PageUp\":\n direction = altKey ? \"pageleft\" : \"pageup\";\n break;\n case \"PageDown\":\n direction = altKey ? \"pageright\" : \"pagedown\";\n break;\n case \"Escape\":\n event.preventDefault();\n if (\n currentState.selectionState.selectedCells.size > 0 ||\n Object.keys(currentState.rowSelection).length > 0\n ) {\n onSelectionClear();\n } else {\n blurCell();\n }\n return;\n case \"Tab\":\n event.preventDefault();\n if (dir === \"rtl\") {\n direction = event.shiftKey ? \"right\" : \"left\";\n } else {\n direction = event.shiftKey ? \"left\" : \"right\";\n }\n break;\n }\n\n if (direction) {\n event.preventDefault();\n\n if (shiftKey && key !== \"Tab\" && currentState.focusedCell) {\n const selectionEdge =\n currentState.selectionState.selectionRange?.end ||\n currentState.focusedCell;\n\n const currentColIndex = navigableColumnIds.indexOf(\n selectionEdge.columnId,\n );\n let newRowIndex = selectionEdge.rowIndex;\n let newColumnId = selectionEdge.columnId;\n\n const isRtl = dir === \"rtl\";\n\n const rowCount =\n tableRef.current?.getRowModel().rows.length ||\n propsRef.current.data.length;\n\n switch (direction) {\n case \"up\":\n newRowIndex = Math.max(0, selectionEdge.rowIndex - 1);\n break;\n case \"down\":\n newRowIndex = Math.min(rowCount - 1, selectionEdge.rowIndex + 1);\n break;\n case \"left\":\n if (isRtl) {\n if (currentColIndex < navigableColumnIds.length - 1) {\n const nextColumnId = navigableColumnIds[currentColIndex + 1];\n if (nextColumnId) newColumnId = nextColumnId;\n }\n } else {\n if (currentColIndex > 0) {\n const prevColumnId = navigableColumnIds[currentColIndex - 1];\n if (prevColumnId) newColumnId = prevColumnId;\n }\n }\n break;\n case \"right\":\n if (isRtl) {\n if (currentColIndex > 0) {\n const prevColumnId = navigableColumnIds[currentColIndex - 1];\n if (prevColumnId) newColumnId = prevColumnId;\n }\n } else {\n if (currentColIndex < navigableColumnIds.length - 1) {\n const nextColumnId = navigableColumnIds[currentColIndex + 1];\n if (nextColumnId) newColumnId = nextColumnId;\n }\n }\n break;\n case \"home\":\n if (navigableColumnIds.length > 0) {\n newColumnId = navigableColumnIds[0] ?? newColumnId;\n }\n break;\n case \"end\":\n if (navigableColumnIds.length > 0) {\n newColumnId =\n navigableColumnIds[navigableColumnIds.length - 1] ??\n newColumnId;\n }\n break;\n }\n\n const selectionStart =\n currentState.selectionState.selectionRange?.start ||\n currentState.focusedCell;\n\n selectRange(selectionStart, {\n rowIndex: newRowIndex,\n columnId: newColumnId,\n });\n\n const container = dataGridRef.current;\n const targetRow = rowMapRef.current.get(newRowIndex);\n const cellKey = getCellKey(newRowIndex, newColumnId);\n const targetCell = cellMapRef.current.get(cellKey);\n\n if (\n newRowIndex !== selectionEdge.rowIndex &&\n (direction === \"up\" || direction === \"down\")\n ) {\n if (container && targetRow) {\n const containerRect = container.getBoundingClientRect();\n const headerHeight =\n headerRef.current?.getBoundingClientRect().height ?? 0;\n const footerHeight =\n footerRef.current?.getBoundingClientRect().height ?? 0;\n\n const viewportTop =\n containerRect.top + headerHeight + VIEWPORT_OFFSET;\n const viewportBottom =\n containerRect.bottom - footerHeight - VIEWPORT_OFFSET;\n\n const rowRect = targetRow.getBoundingClientRect();\n const isFullyVisible =\n rowRect.top >= viewportTop && rowRect.bottom <= viewportBottom;\n\n if (!isFullyVisible) {\n const scrollNeeded =\n direction === \"down\"\n ? rowRect.bottom - viewportBottom\n : viewportTop - rowRect.top;\n\n if (direction === \"down\") {\n container.scrollTop += scrollNeeded;\n } else {\n container.scrollTop -= scrollNeeded;\n }\n\n restoreFocus(container);\n }\n } else {\n const rowVirtualizer = rowVirtualizerRef.current;\n if (rowVirtualizer) {\n const align = direction === \"up\" ? \"start\" : \"end\";\n rowVirtualizer.scrollToIndex(newRowIndex, { align });\n\n restoreFocus(container);\n }\n }\n }\n\n if (\n newColumnId !== selectionEdge.columnId &&\n (direction === \"left\" ||\n direction === \"right\" ||\n direction === \"home\" ||\n direction === \"end\")\n ) {\n if (container && targetCell) {\n scrollCellIntoView({\n container,\n targetCell,\n tableRef,\n viewportOffset: VIEWPORT_OFFSET,\n direction,\n isRtl,\n });\n }\n }\n } else {\n if (currentState.selectionState.selectedCells.size > 0) {\n onSelectionClear();\n }\n navigateCell(direction);\n }\n }\n },\n [\n dir,\n store,\n propsRef,\n blurCell,\n navigateCell,\n selectAll,\n onCellsCopy,\n onCellsCut,\n onCellsPaste,\n onDataUpdate,\n onSelectionClear,\n navigableColumnIds,\n selectRange,\n onSearchOpenChange,\n onNavigateToNextMatch,\n onNavigateToPrevMatch,\n onRowsDelete,\n restoreFocus,\n onScrollToRow,\n ],\n );\n\n const searchState = React.useMemo(() => {\n if (!propsRef.current.enableSearch) return undefined;\n\n return {\n searchMatches,\n matchIndex,\n searchOpen,\n onSearchOpenChange,\n searchQuery,\n onSearchQueryChange,\n onSearch,\n onNavigateToNextMatch,\n onNavigateToPrevMatch,\n };\n }, [\n propsRef,\n searchMatches,\n matchIndex,\n searchOpen,\n onSearchOpenChange,\n searchQuery,\n onSearchQueryChange,\n onSearch,\n onNavigateToNextMatch,\n onNavigateToPrevMatch,\n ]);\n\n React.useEffect(() => {\n const dataGridElement = dataGridRef.current;\n if (!dataGridElement) return;\n\n dataGridElement.addEventListener(\"keydown\", onDataGridKeyDown);\n return () => {\n dataGridElement.removeEventListener(\"keydown\", onDataGridKeyDown);\n };\n }, [onDataGridKeyDown]);\n\n React.useEffect(() => {\n function onGlobalKeyDown(event: KeyboardEvent) {\n const dataGridElement = dataGridRef.current;\n if (!dataGridElement) return;\n\n const target = event.target;\n if (!(target instanceof HTMLElement)) return;\n\n const { key, ctrlKey, metaKey, shiftKey } = event;\n const isCommandPressed = ctrlKey || metaKey;\n\n if (\n propsRef.current.enableSearch &&\n isCommandPressed &&\n !shiftKey &&\n key === SEARCH_SHORTCUT_KEY\n ) {\n const isInInput =\n target.tagName === \"INPUT\" || target.tagName === \"TEXTAREA\";\n const isInDataGrid = dataGridElement.contains(target);\n const isInSearchInput = target.closest('[role=\"search\"]') !== null;\n\n if (isInDataGrid || isInSearchInput || !isInInput) {\n event.preventDefault();\n event.stopPropagation();\n\n const nextSearchOpen = !store.getState().searchOpen;\n onSearchOpenChange(nextSearchOpen);\n\n if (nextSearchOpen && !isInDataGrid && !isInSearchInput) {\n requestAnimationFrame(() => {\n dataGridElement.focus();\n });\n }\n return;\n }\n }\n\n const isInDataGrid = dataGridElement.contains(target);\n if (!isInDataGrid) return;\n\n if (key === \"Escape\") {\n const currentState = store.getState();\n const hasSelections =\n currentState.selectionState.selectedCells.size > 0 ||\n Object.keys(currentState.rowSelection).length > 0;\n\n if (hasSelections) {\n event.preventDefault();\n event.stopPropagation();\n onSelectionClear();\n }\n }\n }\n\n window.addEventListener(\"keydown\", onGlobalKeyDown, true);\n return () => {\n window.removeEventListener(\"keydown\", onGlobalKeyDown, true);\n };\n }, [propsRef, onSearchOpenChange, store, onSelectionClear]);\n\n React.useEffect(() => {\n const currentState = store.getState();\n const autoFocus = propsRef.current.autoFocus;\n\n if (\n autoFocus &&\n data.length > 0 &&\n columns.length > 0 &&\n !currentState.focusedCell\n ) {\n if (navigableColumnIds.length > 0) {\n const rafId = requestAnimationFrame(() => {\n if (typeof autoFocus === \"object\") {\n const { rowIndex, columnId } = autoFocus;\n if (columnId) {\n focusCell(rowIndex ?? 0, columnId);\n }\n return;\n }\n\n const firstColumnId = navigableColumnIds[0];\n if (firstColumnId) {\n focusCell(0, firstColumnId);\n }\n });\n return () => cancelAnimationFrame(rafId);\n }\n }\n }, [store, propsRef, data, columns, navigableColumnIds, focusCell]);\n\n // Restore focus to container when virtualized cells are unmounted\n React.useEffect(() => {\n const container = dataGridRef.current;\n if (!container) return;\n\n function onFocusOut(event: FocusEvent) {\n if (focusGuardRef.current) return;\n\n const currentContainer = dataGridRef.current;\n if (!currentContainer) return;\n\n const currentState = store.getState();\n\n if (!currentState.focusedCell || currentState.editingCell) return;\n\n const relatedTarget = event.relatedTarget;\n\n const isFocusMovingOutsideGrid =\n !relatedTarget || !currentContainer.contains(relatedTarget as Node);\n\n const isFocusMovingToPopover = getIsInPopover(relatedTarget);\n\n if (isFocusMovingOutsideGrid && !isFocusMovingToPopover) {\n const { rowIndex, columnId } = currentState.focusedCell;\n const cellKey = getCellKey(rowIndex, columnId);\n const cellElement = cellMapRef.current.get(cellKey);\n\n requestAnimationFrame(() => {\n if (focusGuardRef.current) return;\n\n if (cellElement && document.body.contains(cellElement)) {\n cellElement.focus();\n } else {\n currentContainer.focus();\n }\n });\n }\n }\n\n container.addEventListener(\"focusout\", onFocusOut);\n\n return () => {\n container.removeEventListener(\"focusout\", onFocusOut);\n };\n }, [store]);\n\n React.useEffect(() => {\n function onOutsideClick(event: MouseEvent) {\n if (event.button === 2) {\n return;\n }\n\n if (\n dataGridRef.current &&\n !dataGridRef.current.contains(event.target as Node)\n ) {\n const elements = document.elementsFromPoint(\n event.clientX,\n event.clientY,\n );\n\n // Compensate for event.target bubbling up\n const isInsidePopover = elements.some((element) =>\n getIsInPopover(element),\n );\n\n if (!isInsidePopover) {\n blurCell();\n const currentState = store.getState();\n if (\n currentState.selectionState.selectedCells.size > 0 ||\n Object.keys(currentState.rowSelection).length > 0\n ) {\n onSelectionClear();\n }\n }\n }\n }\n\n document.addEventListener(\"mousedown\", onOutsideClick);\n return () => {\n document.removeEventListener(\"mousedown\", onOutsideClick);\n };\n }, [store, blurCell, onSelectionClear]);\n\n React.useEffect(() => {\n function onSelectStart(event: Event) {\n event.preventDefault();\n }\n\n function onContextMenu(event: Event) {\n event.preventDefault();\n }\n\n function onCleanup() {\n document.removeEventListener(\"selectstart\", onSelectStart);\n document.removeEventListener(\"contextmenu\", onContextMenu);\n document.body.style.userSelect = \"\";\n }\n\n const onUnsubscribe = store.subscribe(() => {\n const currentState = store.getState();\n if (currentState.selectionState.isSelecting) {\n document.addEventListener(\"selectstart\", onSelectStart);\n document.addEventListener(\"contextmenu\", onContextMenu);\n document.body.style.userSelect = \"none\";\n } else {\n onCleanup();\n }\n });\n\n return () => {\n onCleanup();\n onUnsubscribe();\n };\n }, [store]);\n\n React.useEffect(() => {\n let rafId: number | null = null;\n let mouseX = 0;\n let mouseY = 0;\n let mouseReady = false;\n let active = false;\n let lastSelectionTime = 0;\n\n let cachedRect: DOMRect | null = null;\n let cachedHdrH = 0;\n let cachedFtrH = 0;\n let cachedLpw = 0;\n let cachedRpw = 0;\n\n function getAutoScrollSpeed(dist: number): number {\n const t = Math.min(dist / (AUTO_SCROLL_EDGE_ZONE * 3), 1);\n return Math.round(\n AUTO_SCROLL_MIN_SPEED +\n (AUTO_SCROLL_MAX_SPEED - AUTO_SCROLL_MIN_SPEED) * t,\n );\n }\n\n function cacheLayout(container: HTMLDivElement) {\n cachedRect = container.getBoundingClientRect();\n cachedHdrH = headerRef.current?.getBoundingClientRect().height ?? 0;\n cachedFtrH = footerRef.current?.getBoundingClientRect().height ?? 0;\n const tbl = tableRef.current;\n if (tbl) {\n cachedLpw = tbl\n .getLeftVisibleLeafColumns()\n .reduce((s, c) => s + c.getSize(), 0);\n cachedRpw = tbl\n .getRightVisibleLeafColumns()\n .reduce((s, c) => s + c.getSize(), 0);\n }\n }\n\n function tick() {\n if (!active) return;\n const container = dataGridRef.current;\n const tbl = tableRef.current;\n\n if (!container || !tbl) {\n onAutoScrollStop();\n return;\n }\n\n if (!mouseReady || !cachedRect) {\n rafId = requestAnimationFrame(tick);\n return;\n }\n\n const rect = cachedRect;\n const { dir } = dragDepsRef.current;\n const hasNegativeScroll = container.scrollLeft < 0;\n const isActuallyRtl = dir === \"rtl\" || hasNegativeScroll;\n\n const dataTop = rect.top + cachedHdrH;\n const dataBottom = rect.bottom - cachedFtrH;\n\n const scrollAreaLeft = isActuallyRtl\n ? rect.left + cachedRpw\n : rect.left + cachedLpw;\n const scrollAreaRight = isActuallyRtl\n ? rect.right - cachedLpw\n : rect.right - cachedRpw;\n\n let dy = 0;\n let dx = 0;\n\n if (mouseY < dataTop) dy = -getAutoScrollSpeed(dataTop - mouseY);\n else if (mouseY > dataBottom)\n dy = getAutoScrollSpeed(mouseY - dataBottom);\n\n if (mouseX < scrollAreaLeft)\n dx = -getAutoScrollSpeed(scrollAreaLeft - mouseX);\n else if (mouseX > scrollAreaRight)\n dx = getAutoScrollSpeed(mouseX - scrollAreaRight);\n\n if (dx === 0 && dy === 0) {\n rafId = requestAnimationFrame(tick);\n return;\n }\n\n container.scrollTop += dy;\n container.scrollLeft += dx;\n\n const now = performance.now();\n if (now - lastSelectionTime < AUTO_SCROLL_SELECTION_THROTTLE_MS) {\n rafId = requestAnimationFrame(tick);\n return;\n }\n\n const { rowHeightValue: rh, columnIds } = dragDepsRef.current;\n if (columnIds.length === 0) {\n rafId = requestAnimationFrame(tick);\n return;\n }\n\n const totalRows = tbl.getRowModel().rows.length;\n const clampedY = Math.max(dataTop, Math.min(mouseY, dataBottom));\n const absY = container.scrollTop + (clampedY - dataTop);\n const rowIndex = Math.max(\n 0,\n Math.min(Math.floor(absY / rh), totalRows - 1),\n );\n\n const st = store.getState();\n const range = st.selectionState.selectionRange;\n\n let columnId: string | undefined;\n\n if (dx !== 0) {\n const clampedX = Math.max(rect.left, Math.min(mouseX, rect.right));\n const relX = clampedX - rect.left;\n\n const leftZoneWidth = isActuallyRtl ? cachedRpw : cachedLpw;\n const rightZoneWidth = isActuallyRtl ? cachedLpw : cachedRpw;\n\n if (relX < leftZoneWidth) {\n const columns = isActuallyRtl\n ? tbl.getRightVisibleLeafColumns()\n : tbl.getLeftVisibleLeafColumns();\n columnId = columns[0]?.id ?? columnIds[0] ?? \"\";\n let cx = 0;\n for (const col of columns) {\n if (relX < cx + col.getSize()) {\n columnId = col.id;\n break;\n }\n cx += col.getSize();\n }\n } else if (relX > rect.width - rightZoneWidth) {\n const columns = isActuallyRtl\n ? tbl.getLeftVisibleLeafColumns()\n : tbl.getRightVisibleLeafColumns();\n columnId = columns[0]?.id ?? columnIds[columnIds.length - 1] ?? \"\";\n let cx = rect.width - rightZoneWidth;\n for (const col of columns) {\n if (relX < cx + col.getSize()) {\n columnId = col.id;\n break;\n }\n cx += col.getSize();\n }\n } else {\n const center = tbl.getCenterVisibleLeafColumns();\n const centerZoneWidth = rect.width - leftZoneWidth - rightZoneWidth;\n const distFromVisualLeft = relX - leftZoneWidth;\n\n let absX: number;\n if (isActuallyRtl) {\n const scrollFromRight = hasNegativeScroll\n ? -container.scrollLeft\n : container.scrollWidth -\n container.clientWidth -\n container.scrollLeft;\n absX = scrollFromRight + (centerZoneWidth - distFromVisualLeft);\n } else {\n absX = container.scrollLeft + distFromVisualLeft;\n }\n\n columnId =\n center[center.length - 1]?.id ??\n columnIds[columnIds.length - 1] ??\n \"\";\n let cw = 0;\n for (const col of center) {\n cw += col.getSize();\n if (absX < cw) {\n columnId = col.id;\n break;\n }\n }\n }\n }\n\n if (!columnId) {\n columnId = range?.end.columnId ?? columnIds[0] ?? \"\";\n }\n\n if (\n range &&\n (rowIndex !== range.end.rowIndex || columnId !== range.end.columnId)\n ) {\n dragDepsRef.current.selectRange(\n range.start,\n { rowIndex, columnId },\n true,\n );\n lastSelectionTime = now;\n }\n\n rafId = requestAnimationFrame(tick);\n }\n\n function onMove(event: MouseEvent) {\n mouseX = event.clientX;\n mouseY = event.clientY;\n mouseReady = true;\n }\n\n function onUp() {\n onAutoScrollStop();\n const st = store.getState();\n if (st.selectionState.isSelecting) {\n store.setState(\"selectionState\", {\n ...st.selectionState,\n isSelecting: false,\n });\n }\n }\n\n function onAutoScrollStart() {\n if (active) return;\n\n const container = dataGridRef.current;\n if (!container) return;\n\n active = true;\n mouseReady = false;\n cachedRect = null;\n lastSelectionTime = 0;\n document.addEventListener(\"mousemove\", onMove);\n document.addEventListener(\"mouseup\", onUp);\n rafId = requestAnimationFrame(() => {\n const currentContainer = dataGridRef.current;\n if (currentContainer) cacheLayout(currentContainer);\n rafId = requestAnimationFrame(tick);\n });\n }\n\n function onAutoScrollStop() {\n if (!active) return;\n active = false;\n cachedRect = null;\n document.removeEventListener(\"mousemove\", onMove);\n document.removeEventListener(\"mouseup\", onUp);\n if (rafId !== null) {\n cancelAnimationFrame(rafId);\n rafId = null;\n }\n }\n\n if (store.getState().selectionState.isSelecting) onAutoScrollStart();\n\n const onUnsubscribe = store.subscribe(() => {\n const st = store.getState();\n if (st.selectionState.isSelecting && !active) onAutoScrollStart();\n else if (!st.selectionState.isSelecting && active) onAutoScrollStop();\n });\n\n return () => {\n onAutoScrollStop();\n onUnsubscribe();\n };\n }, [store, dragDepsRef]);\n\n useIsomorphicLayoutEffect(() => {\n const rafId = requestAnimationFrame(() => {\n rowVirtualizer.measure();\n });\n return () => cancelAnimationFrame(rafId);\n }, [\n rowHeight,\n table.getState().columnFilters,\n table.getState().columnOrder,\n table.getState().columnPinning,\n table.getState().columnSizing,\n table.getState().columnVisibility,\n table.getState().expanded,\n table.getState().globalFilter,\n table.getState().grouping,\n table.getState().rowSelection,\n table.getState().sorting,\n ]);\n\n const virtualTotalSize = rowVirtualizer.getTotalSize();\n const virtualItems = rowVirtualizer.getVirtualItems();\n const measureElement = rowVirtualizer.measureElement;\n\n return React.useMemo(\n () => ({\n dataGridRef,\n headerRef,\n rowMapRef,\n footerRef,\n dir,\n table,\n tableMeta,\n virtualTotalSize,\n virtualItems,\n measureElement,\n columns,\n columnSizeVars,\n searchState,\n searchMatchesByRow,\n activeSearchMatch,\n cellSelectionMap,\n focusedCell,\n editingCell,\n rowHeight,\n contextMenu,\n pasteDialog,\n onRowAdd: propsRef.current.onRowAdd ? onRowAdd : undefined,\n adjustLayout,\n }),\n [\n propsRef,\n dir,\n table,\n tableMeta,\n virtualTotalSize,\n virtualItems,\n measureElement,\n columns,\n columnSizeVars,\n searchState,\n searchMatchesByRow,\n activeSearchMatch,\n cellSelectionMap,\n focusedCell,\n editingCell,\n rowHeight,\n contextMenu,\n pasteDialog,\n onRowAdd,\n adjustLayout,\n ],\n );\n}\n\nexport {\n useDataGrid,\n //\n type UseDataGridProps,\n};\n", "type": "registry:hook" }, { diff --git a/src/hooks/use-data-grid.ts b/src/hooks/use-data-grid.ts index 51893d7e..6e9f8362 100644 --- a/src/hooks/use-data-grid.ts +++ b/src/hooks/use-data-grid.ts @@ -55,6 +55,10 @@ const MIN_COLUMN_SIZE = 60; const MAX_COLUMN_SIZE = 800; const SEARCH_SHORTCUT_KEY = "f"; const NON_NAVIGABLE_COLUMN_IDS = new Set(["select", "actions"]); +const AUTO_SCROLL_EDGE_ZONE = 50; +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}.*)?$/; @@ -406,7 +410,7 @@ function useDataGrid({ const existingRow = currentData[i]; if (!existingRow) { - newData[i] = existingRow as TData; + newData[i] = {} as TData; continue; } @@ -531,6 +535,13 @@ function useDataGrid({ [columnIds, store], ); + const dragDepsRef = useAsRef({ + selectRange, + dir, + rowHeightValue, + columnIds, + }); + const serializeCellsToTsv = React.useCallback(() => { const currentState = store.getState(); @@ -1950,18 +1961,14 @@ function useDataGrid({ const currentState = store.getState(); const rows = tableRef.current?.getRowModel().rows ?? []; const currentRowIndex = rows.findIndex((r) => r.id === rowId); - if (currentRowIndex === -1) return; + 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 === -1) { - onRowSelectionChange({ - ...currentState.rowSelection, - [rowId]: selected, - }); - } else { + if (lastClickedRowIndex >= 0) { const startIndex = Math.min(lastClickedRowIndex, currentRowIndex); const endIndex = Math.max(lastClickedRowIndex, currentRowIndex); @@ -1977,11 +1984,16 @@ function useDataGrid({ } onRowSelectionChange(newRowSelection); + } else { + onRowSelectionChange({ + ...currentState.rowSelection, + [currentRow.id]: selected, + }); } } else { onRowSelectionChange({ ...currentState.rowSelection, - [rowId]: selected, + [currentRow.id]: selected, }); } @@ -3185,6 +3197,264 @@ function useDataGrid({ }; }, [store]); + React.useEffect(() => { + let rafId: number | null = null; + let mouseX = 0; + let mouseY = 0; + let mouseReady = false; + let active = false; + let lastSelectionTime = 0; + + let cachedRect: DOMRect | null = null; + let cachedHdrH = 0; + let cachedFtrH = 0; + let cachedLpw = 0; + let cachedRpw = 0; + + function getAutoScrollSpeed(dist: number): number { + const t = Math.min(dist / (AUTO_SCROLL_EDGE_ZONE * 3), 1); + return Math.round( + AUTO_SCROLL_MIN_SPEED + + (AUTO_SCROLL_MAX_SPEED - AUTO_SCROLL_MIN_SPEED) * t, + ); + } + + function cacheLayout(container: HTMLDivElement) { + 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 } = dragDepsRef.current; + const hasNegativeScroll = container.scrollLeft < 0; + const isActuallyRtl = dir === "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 } = dragDepsRef.current; + if (columnIds.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: string | undefined; + + 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 columns = isActuallyRtl + ? tbl.getRightVisibleLeafColumns() + : tbl.getLeftVisibleLeafColumns(); + columnId = columns[0]?.id ?? columnIds[0] ?? ""; + let cx = 0; + for (const col of columns) { + if (relX < cx + col.getSize()) { + columnId = col.id; + break; + } + cx += col.getSize(); + } + } else if (relX > rect.width - rightZoneWidth) { + const columns = isActuallyRtl + ? tbl.getLeftVisibleLeafColumns() + : tbl.getRightVisibleLeafColumns(); + columnId = columns[0]?.id ?? columnIds[columnIds.length - 1] ?? ""; + let cx = rect.width - rightZoneWidth; + for (const col of columns) { + 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: number; + 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 ?? + columnIds[columnIds.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 ?? columnIds[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: MouseEvent) { + 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); + 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); + 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(); @@ -3204,7 +3474,6 @@ function useDataGrid({ table.getState().sorting, ]); - // Calculate virtual values outside of child render to avoid flushSync issues const virtualTotalSize = rowVirtualizer.getTotalSize(); const virtualItems = rowVirtualizer.getVirtualItems(); const measureElement = rowVirtualizer.measureElement;