4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T14d2,"use client"; import { useCallback, useMemo, useRef, useState } from "react"; import { applyChange, createHistory, type DataChange } from "@/registry/default/components/data-grid/data-grid"; /** Options for {@link useDataGridHistory}. */ export type UseDataGridHistoryOptions = { /** Current data array; the hook diffs/applies against this on every render (like `data` passed to `DataGrid`). */ data: readonly TData[]; /** Writes the next array back to the consumer's state (e.g. a `useState` setter). */ setData: (next: readonly TData[]) => void; getRowId: (row: TData, index: number) => string; /** Maximum number of entries kept on the undo stack; oldest entries are dropped past this. */ capacity?: number; /** * Which `DataChange.source` values go on the undo stack. Defaults to every source except * `"stream"` — a 100-updates/s `updateCells` feed would otherwise evict the user's whole undo * stack within seconds. Pass a list to change the set, for example * `["edit", "paste", "fill", "delete", "row-op", "import", "stream"]` to record streams too. * `setData` still runs for every change, recorded or not. */ recordSources?: readonly DataChange["source"][]; }; /** Sources `useDataGridHistory` records when `recordSources` is omitted — everything a user did on purpose. */ const DEFAULT_RECORD_SOURCES: readonly DataChange["source"][] = [ "edit", "paste", "fill", "delete", "row-op", "import", "history", "app", ]; /** Return value of {@link useDataGridHistory}. */ export type UseDataGridHistoryResult = { /** Pass straight through as `DataGrid`'s `onDataChange`: records the change, then writes `next` via `setData`. */ onDataChange: (next: readonly TData[], change: DataChange) => void; /** Pass as `DataGrid`'s `onUndo`. No-op when nothing to undo. */ undo: () => void; /** Pass as `DataGrid`'s `onRedo`. No-op when nothing to redo. */ redo: () => void; canUndo: boolean; canRedo: boolean; /** Clears both stacks (e.g. after regenerating/resetting the dataset). */ clear: () => void; /** * Imperatively registers a programmatic change the consumer has ALREADY applied to `data` * (e.g. a set-row-count batch, a batch-save rollback) as one undo entry on the same stack - * this hook does not write data here, the consumer owns the array. Deliberately recorded * regardless of `recordSources`: an explicit call is intent, not a gesture stream. `label` * is an optional human-readable entry label (it also works as a field on `change` itself). */ record: (change: DataChange, label?: string) => void; }; /** * Op-based undo/redo wired to a consumer-owned data array. Plugs into core's * `onDataChange`/`onUndo`/`onRedo` extension points with no core edits. * * Design: takes `data` + `setData` (mirroring `useState`'s tuple) rather than owning * the array itself, so it composes with any state source (useState, a store, a server * mutation) — the consumer wires one setter, not a whole controlled-component contract. */ export function useDataGridHistory(opts: UseDataGridHistoryOptions): UseDataGridHistoryResult { const { data, setData, getRowId, capacity, recordSources } = opts; const history = useMemo(() => createHistory({ capacity }), [capacity]); // history's canUndo/canRedo are getters on a mutable object; this forces a re-render // after every mutating call so callers see them update even when `setData` alone wouldn't // re-render this hook (e.g. `clear()`, or a consumer setter that dedupes identical arrays). const [, forceUpdate] = useState(0); // mirrors the latest data/getRowId for undo/redo, which run outside the triggering render. const dataRef = useRef(data); dataRef.current = data; const getRowIdRef = useRef(getRowId); getRowIdRef.current = getRowId; const recorded = useMemo( () => new Set["source"]>(recordSources ?? DEFAULT_RECORD_SOURCES), [recordSources], ); const onDataChange = useCallback( (next: readonly TData[], change: DataChange) => { if (recorded.has(change.source)) history.push(change); setData(next); forceUpdate((n) => n + 1); }, [history, setData, recorded], ); const undo = useCallback(() => { const change = history.undo(); if (!change) return; setData(applyChange(dataRef.current, change, getRowIdRef.current)); forceUpdate((n) => n + 1); }, [history, setData]); const redo = useCallback(() => { const change = history.redo(); if (!change) return; setData(applyChange(dataRef.current, change, getRowIdRef.current)); forceUpdate((n) => n + 1); }, [history, setData]); const clear = useCallback(() => { history.clear(); forceUpdate((n) => n + 1); }, [history]); const record = useCallback( (change: DataChange, label?: string) => { history.push(label ? { ...change, label } : change); forceUpdate((n) => n + 1); }, [history], ); return { onDataChange, undo, redo, canUndo: history.canUndo, canRedo: history.canRedo, clear, record, }; } 52:Td87,"use client"; import { useCallback, useState } from "react"; import { applyChange, type DataChange } from "@/registry/default/components/data-grid/data-grid"; import { useDataGridHistory } from "./use-data-grid-history"; /** Options for {@link useDataGridState}. */ export type UseDataGridStateOptions = { getRowId: (row: TData, index: number) => string; /** Maximum number of entries kept on the undo stack; oldest entries are dropped past this. */ capacity?: number; }; /** Return value of {@link useDataGridState}, spreadable straight onto ``. */ export type UseDataGridStateResult = { data: readonly TData[]; getRowId: (row: TData, index: number) => string; onDataChange: (next: readonly TData[], change: DataChange) => void; onUndo: () => void; onRedo: () => void; /** * For a toolbar's undo/redo buttons, outside the spreadable `DataGrid` props. `clear` empties * both stacks (e.g. after regenerating the dataset) — it lives on this sub-object, not the * spreadable top level, to avoid a future prop-name collision on the `` * spread. */ history: { canUndo: boolean; canRedo: boolean; undo: () => void; redo: () => void; clear: () => void; /** * Applies a programmatic change (the consumer-built op batch) to the hook-owned data AND * registers it as one undo entry - unlike the bare `useDataGridHistory` `record`, which only * registers, because here the hook owns the array and the consumer has no other write path. */ record: (change: DataChange, label?: string) => void; }; }; /** * Quick-start grid state with undo/redo: wires `useState` + {@link useDataGridHistory} * into one spreadable object. * * "Uncontrolled" here means the consumer does not own the array between renders — the hook does — * NOT the core's `defaultData` semantics. It spreads a CONTROLLED `data` prop into the grid and * re-feeds it every render; undo/redo work precisely because of that echo. Never treat it like * `defaultData` (set once, grid-owned afterwards) and pass it alongside your own data. * * ```tsx * const grid = useDataGridState(rows, { getRowId: (r) => r.id }); * * ``` */ export function useDataGridState( defaultRows: readonly TData[], opts: UseDataGridStateOptions, ): UseDataGridStateResult { const { getRowId, capacity } = opts; const [data, setData] = useState(defaultRows); const { onDataChange, undo, redo, canUndo, canRedo, clear, record: historyRecord } = useDataGridHistory({ data, setData, getRowId, capacity, }); // stable identity: useDataGridRowIdToViewRow keys its O(n) Map build on getRowId identity. const gridGetRowId = useCallback((row: TData, index: number) => getRowId(row, index), [getRowId]); const record = useCallback( (change: DataChange, label?: string) => { const tagged = label ? { ...change, label } : change; setData((current) => applyChange(current, tagged, gridGetRowId)); historyRecord(tagged); }, [historyRecord, gridGetRowId], ); return { data, getRowId: gridGetRowId, onDataChange, onUndo: undo, onRedo: redo, history: { canUndo, canRedo, undo, redo, clear, record }, }; } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4f",null,{"namespace":"@gridcn","registryDependencies":["DammersCode/gridcn/data-grid"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/default/blocks/data-grid-history/data-grid-history.ts","content":"/** Public entry point — the only module consumers/docs should import from. */\r\n\r\nexport { useDataGridHistory, type UseDataGridHistoryOptions, type UseDataGridHistoryResult } from \"./use-data-grid-history\";\r\nexport { useDataGridState, type UseDataGridStateOptions, type UseDataGridStateResult } from \"./use-data-grid-state\";\r\n","type":"registry:component","target":"components/data-grid-history/data-grid-history.ts"},{"path":"registry/default/blocks/data-grid-history/use-data-grid-history.ts","content":"$51","type":"registry:component","target":"components/data-grid-history/use-data-grid-history.ts"},{"path":"registry/default/blocks/data-grid-history/use-data-grid-state.ts","content":"$52","type":"registry:component","target":"components/data-grid-history/use-data-grid-state.ts"}],"className":"h-[70svh] min-h-80"}]]}]