Data Grid (editable)

1"use client"
2 
3/**
4 * niko-table — created by Semir N. (Semkoo, https://github.com/Semkoo) with AI assistance.
5 *
6 * Before reporting anything: please check the changelog first.
7 *  - In-repo: ./CHANGELOG.md
8 *  - Docs site: https://niko-table.com/changelog
9 *
10 * Found a bug or have a fix? Open an issue or PR on GitHub so other
11 * users (and future LLMs reading this code) benefit:
12 * https://github.com/Semkoo/niko-table-registry
13 */
14import * as React from "react"
15 
16import { TooltipProvider } from "@/components/ui/tooltip"
17 
18import { useDataTable } from "../../core/data-table-context"
19import { useDataTableScroll } from "../../hooks/use-data-table-scroll"
20import type { UseDataGrid } from "../hooks/use-data-grid"
21import { useGridKeyboard } from "../hooks/use-grid-keyboard"
22import { useGridNavigation } from "../hooks/use-grid-navigation"
23import {
24  emptyCell,
25  type CellPosition,
26  type CellState,
27  type GridRow,
28  type SelectionBounds,
29} from "../types/grid-cell"
30import { DataGridContextProvider } from "./data-grid-context"
31import {
32  DataGridFeaturesProvider,
33  DataGridInternalsProvider,
34  GRID_EDGE_SPEED,
35  GRID_EDGE_ZONE,
36  type DataGridInternals,
37  type GridEnv,
38  type GridFeatures,
39  type RegisterGridFeature,
40} from "./data-grid-features"
41 
42export interface DataGridProps<TRow extends GridRow> {
43  grid: UseDataGrid<TRow>
44  children: React.ReactNode
45  className?: string
46  /**
47   * Called when the user presses `?` (with a focused cell, not editing) — wire
48   * it to open a keyboard-shortcuts help dialog. When unset, `?` types normally.
49   */
50  onRequestShortcuts?: () => void
51}
52 
53/**
54 * The DataGrid container — the irreducible core. Place INSIDE `DataTableRoot`,
55 * wrapping the `DataTable`. It reads the table's DISPLAY order (post
56 * filter/sort) and owns the selection rectangle, keyboard navigation, drag
57 * range-select, and the scroll-into-view seam. Cells (addressed by row id)
58 * read their state from `DataGridContext`.
59 *
60 * Everything else is opt-in, composable children (mix and match — an unmounted
61 * feature attaches no listeners and tree-shakes out of the bundle):
62 *
63 * @example
64 * <DataGrid grid={grid}>
65 *   <DataGridClipboard resolveCell={resolveCell} />  // copy/cut/paste
66 *   <DataGridFillHandle />                           // corner-drag fill
67 *   <DataGridMove />                                 // border-drag move/copy
68 *   <DataGridCrossHighlight />                       // header/gutter highlight
69 *   <DataTable>…</DataTable>
70// … truncated