import { CellActivateDetail, CellChangeDetail, CellClickDetail, CellCommitDetail, ChangedRowsResetDetail, ColumnMoveDetail, ColumnResizeDetail, ColumnVisibilityDetail, CopyDetail, DataGridEventMap, DetailExpandDetail, ExportCompleteDetail, FilterChangeDetail, GridColumnState, GroupToggleDetail, PasteDetail, PasteRejectedDetail, PrintCompleteDetail, PrintStartDetail, RenderDetail, ResponsiveChangeDetail, RowClickDetail, RowCommitDetail, RowDragEndDetail, RowDragStartDetail, RowDropDetail, RowMoveDetail, RowTransferDetail, SelectionChangeDetail, SortChangeDetail, TbwScrollDetail, TreeExpandDetail, TreeLoadEndDetail, TreeLoadErrorDetail, TreeLoadStartDetail, UndoRedoDetail } from '@toolbox-web/grid/all'; /** * Event handler type with unwrapped detail. * Pattern: `(detail: T, event?: CustomEvent) => void` * @since 0.7.0 */ export type EventHandler = (detail: T, event?: CustomEvent) => void; /** * Event handler props for grid events. * All handlers receive the unwrapped detail as first argument, * with optional access to the full CustomEvent for preventDefault(). * * @template TRow - The row data type * @since 0.7.0 */ export interface EventProps { /** * Fired when a cell is clicked. * * @example * ```tsx * onCellClick={(detail) => console.log('Clicked:', detail.field, detail.value)} * ``` */ onCellClick?: EventHandler>; /** * Fired when a row is clicked. * * @example * ```tsx * onRowClick={(detail) => navigateTo(`/employees/${detail.row.id}`)} * ``` */ onRowClick?: EventHandler>; /** * Fired when a cell is activated (Enter key or double-click). * * @example * ```tsx * onCellActivate={(detail) => openEditor(detail.field, detail.row)} * ``` */ onCellActivate?: EventHandler>; /** * Fired when a cell value changes (before commit). * * @example * ```tsx * onCellChange={(detail) => validateChange(detail)} * ``` */ onCellChange?: EventHandler>; /** * Fired when a cell edit is committed. * Cancelable - call `event.preventDefault()` to reject the edit. * * @requires `import '@toolbox-web/grid-react/features/editing';` * * @example * ```tsx * onCellCommit={(detail, event) => { * if (!isValid(detail.value)) { * event?.preventDefault(); * showError('Invalid value'); * } * }} * ``` */ onCellCommit?: EventHandler>; /** * Fired when all pending row edits are committed. * * @requires `import '@toolbox-web/grid-react/features/editing';` * * @example * ```tsx * onRowCommit={(detail) => saveToServer(detail.row)} * ``` */ onRowCommit?: EventHandler>; /** * Fired when changed rows cache is reset via `resetChangedRows()`. * * @requires `import '@toolbox-web/grid-react/features/editing';` * * @example * ```tsx * onChangedRowsReset={(detail) => console.log('Reset:', detail.rows.length, 'rows cleared')} * ``` */ onChangedRowsReset?: EventHandler>; /** * Fired when an editor opens for a cell. * * @requires `import '@toolbox-web/grid-react/features/editing';` */ onEditOpen?: EventHandler['edit-open']>; /** * Fired before an editor closes (commit or cancel). Cancelable. * * @requires `import '@toolbox-web/grid-react/features/editing';` */ onBeforeEditClose?: EventHandler['before-edit-close']>; /** * Fired after an editor closes (commit or cancel). * * @requires `import '@toolbox-web/grid-react/features/editing';` */ onEditClose?: EventHandler['edit-close']>; /** * Fired when a cell edit is canceled (e.g. Escape key). * * @requires `import '@toolbox-web/grid-react/features/editing';` */ onCellCancel?: EventHandler['cell-cancel']>; /** * Fired when the dirty/changed-rows state transitions. * * @requires `import '@toolbox-web/grid-react/features/editing';` */ onDirtyChange?: EventHandler['dirty-change']>; /** * Fired after the render pipeline captures new dirty-tracking baseline * snapshots (i.e. rows became eligible for change tracking). * * `detail.count` is the **total** number of tracked baselines, not just the * newly captured ones. * * @requires `import '@toolbox-web/grid-react/features/editing';` * @since 2.3.0 */ onBaselinesCaptured?: EventHandler['baselines-captured']>; /** * Fired when the row data is replaced (e.g. via the `data` property setter). */ onDataChange?: EventHandler['data-change']>; /** * Fired when sort state changes. * * @requires `import '@toolbox-web/grid-react/features/sorting';` * * @example * ```tsx * onSortChange={(detail) => console.log('Sort:', detail.field, detail.direction)} * ``` */ onSortChange?: EventHandler; /** * Fired when filter values change. * * @requires `import '@toolbox-web/grid-react/features/filtering';` * * @example * ```tsx * onFilterChange={(detail) => console.log('Filters:', detail.activeFilters)} * ``` */ onFilterChange?: EventHandler; /** * Fired when a column is resized. * * @example * ```tsx * onColumnResize={(detail) => console.log('Resized:', detail.field, detail.width)} * ``` */ onColumnResize?: EventHandler; /** * Fired when a column is moved via drag-and-drop. * Cancelable - call `event.preventDefault()` to cancel the move. * * @requires `import '@toolbox-web/grid-react/features/reorder';` * * @example * ```tsx * onColumnMove={(detail, event) => { * if (detail.column.field === 'id') { * event?.preventDefault(); // Don't allow moving ID column * } * }} * ``` */ onColumnMove?: EventHandler; /** * Fired when a column resize is reset (e.g. via double-click on the resize handle). * * @example * ```tsx * onColumnResizeReset={(detail) => console.log('Reset width for:', detail.field)} * ``` */ onColumnResizeReset?: EventHandler['column-resize-reset']>; /** * Fired when a column is shown or hidden — either via the visibility * sidebar, `grid.toggleColumnVisibility(field)`, `grid.setColumnVisible(field, visible)`, * or `grid.showAllColumns()`. * * `field` and `visible` are present for single-column toggles and * `undefined` for bulk operations (`showAllColumns`). `visibleColumns` * always lists the current set. * * @requires `import '@toolbox-web/grid-react/features/visibility';` * * @example * ```tsx * onColumnVisibility={(detail) => { * console.log(detail.hidden ? 'Hidden:' : 'Shown:', detail.field); * localStorage.setItem('visibleColumns', JSON.stringify(detail.visibleColumns)); * }} * ``` */ onColumnVisibility?: EventHandler; /** * Fired when column state changes (resize, reorder, visibility). * Useful for persisting column state. * * @example * ```tsx * onColumnStateChange={(state) => saveToLocalStorage('gridState', state)} * ``` */ onColumnStateChange?: EventHandler; /** * Fired when selection changes. * * @requires `import '@toolbox-web/grid-react/features/selection';` * * @example * ```tsx * onSelectionChange={(detail) => { * console.log('Selected ranges:', detail.ranges); * console.log('Mode:', detail.mode); * }} * ``` */ onSelectionChange?: EventHandler; /** * Fired when a row is moved via drag-and-drop. * Cancelable - call `event.preventDefault()` to cancel the move. * * @requires `import '@toolbox-web/grid-react/features/row-reorder';` * * @example * ```tsx * onRowMove={(detail, event) => { * if (!canMove(detail.row)) { * event?.preventDefault(); * } * }} * ``` */ onRowMove?: EventHandler>; /** * Fired when a row drag starts. Cancelable. * * @requires `import '@toolbox-web/grid-react/features/row-drag-drop';` */ onRowDragStart?: EventHandler>; /** * Fired when a row drag ends (after drop or cancel). * * @requires `import '@toolbox-web/grid-react/features/row-drag-drop';` */ onRowDragEnd?: EventHandler>; /** * Fired on the target grid when rows are dropped from another grid. * Cancelable. * * @requires `import '@toolbox-web/grid-react/features/row-drag-drop';` */ onRowDrop?: EventHandler>; /** * Fired on BOTH source and target grids after a successful cross-grid * row transfer. * * @requires `import '@toolbox-web/grid-react/features/row-drag-drop';` */ onRowTransfer?: EventHandler>; /** * Fired when a group is expanded or collapsed. * * @requires `import '@toolbox-web/grid-react/features/grouping-rows';` * * @example * ```tsx * onGroupToggle={(detail) => { * console.log(detail.expanded ? 'Expanded' : 'Collapsed', detail.key); * }} * ``` */ onGroupToggle?: EventHandler; /** * Fired when a group is expanded. * * @requires `import '@toolbox-web/grid-react/features/grouping-rows';` */ onGroupExpand?: EventHandler['group-expand']>; /** * Fired when a group is collapsed. * * @requires `import '@toolbox-web/grid-react/features/grouping-rows';` */ onGroupCollapse?: EventHandler['group-collapse']>; /** * Fired when the context menu opens. * * @requires `import '@toolbox-web/grid-react/features/context-menu';` */ onContextMenuOpen?: EventHandler['context-menu-open']>; /** * Fired when a tree node is expanded. * * @requires `import '@toolbox-web/grid-react/features/tree';` * * @example * ```tsx * onTreeExpand={(detail) => console.log('Expanded:', detail.row)} * ``` */ onTreeExpand?: EventHandler>; /** * Fired when lazy child loading starts for a tree node. * * @requires `import '@toolbox-web/grid-react/features/tree';` */ onTreeLoadStart?: EventHandler>; /** * Fired when lazy child loading completes and children are merged into the parent row. * * @requires `import '@toolbox-web/grid-react/features/tree';` */ onTreeLoadEnd?: EventHandler>; /** * Fired when lazy child loading fails. Re-expanding the node retries the fetch. * * @requires `import '@toolbox-web/grid-react/features/tree';` */ onTreeLoadError?: EventHandler>; /** * Fired when a detail panel is expanded or collapsed. * * @requires `import '@toolbox-web/grid-react/features/master-detail';` * * @example * ```tsx * onDetailExpand={(detail) => { * if (detail.expanded) loadDetailData(detail.rowId); * }} * ``` */ onDetailExpand?: EventHandler; /** * Fired when responsive mode changes (table ↔ card). * * @requires `import '@toolbox-web/grid-react/features/responsive';` * * @example * ```tsx * onResponsiveChange={(detail) => { * console.log('Mode:', detail.mode); // 'table' | 'card' * }} * ``` */ onResponsiveChange?: EventHandler; /** * Fired when cells are copied to clipboard. * * @requires `import '@toolbox-web/grid-react/features/clipboard';` * * @example * ```tsx * onCopy={(detail) => console.log('Copied:', detail.text)} * ``` */ onCopy?: EventHandler; /** * Fired when cells are pasted from clipboard. * * @requires `import '@toolbox-web/grid-react/features/clipboard';` * * @example * ```tsx * onPaste={(detail) => console.log('Pasted:', detail.affectedCells.length, 'cells')} * ``` */ onPaste?: EventHandler; /** * Fired after a paste when one or more cells were rejected by a column's * `onPaste` guard. * * @requires `import '@toolbox-web/grid-react/features/clipboard';` * * @example * ```tsx * onPasteRejected={(detail) => toast(`${detail.rejected.length} cell(s) rejected`)} * ``` */ onPasteRejected?: EventHandler; /** * Fired when an undo action is performed. * * @requires `import '@toolbox-web/grid-react/features/undo-redo';` * * @example * ```tsx * onUndo={(detail) => console.log('Undid:', detail.action.type, '- Can undo:', detail.canUndo)} * ``` */ onUndo?: EventHandler; /** * Fired when a redo action is performed. * * @requires `import '@toolbox-web/grid-react/features/undo-redo';` * * @example * ```tsx * onRedo={(detail) => console.log('Redid:', detail.action.type, '- Can redo:', detail.canRedo)} * ``` */ onRedo?: EventHandler; /** * Fired when export completes. * * @requires `import '@toolbox-web/grid-react/features/export';` * * @example * ```tsx * onExportComplete={(detail) => console.log('Exported:', detail.filename)} * ``` */ onExportComplete?: EventHandler; /** * Fired when print starts. * * @requires `import '@toolbox-web/grid-react/features/print';` * * @example * ```tsx * onPrintStart={(detail) => console.log('Printing:', detail.rowCount, 'rows')} * ``` */ onPrintStart?: EventHandler; /** * Fired when print completes. * * @requires `import '@toolbox-web/grid-react/features/print';` * * @example * ```tsx * onPrintComplete={() => console.log('Print complete')} * ``` */ onPrintComplete?: EventHandler; /** * Fired (rAF-batched) when the grid's viewport scrolls vertically. * * For server-side pagination of large datasets prefer `ServerSidePlugin` * — this event is the lower-level primitive for custom load-more * triggers, deferring heavy cell content, dismissing overlays, etc. * * @example * ```tsx * onTbwScroll={(detail) => { * if (detail.scrollTop + detail.clientHeight >= detail.scrollHeight - 200) { * loadMore(); * } * }} * ``` */ onTbwScroll?: EventHandler; /** * Fired once at the end of every render-scheduler flush, after all * plugin `afterRender` hooks have run and `ready()` has resolved. * * Use this to act on the rendered DOM after a programmatic mutation * (e.g. focus the first input of a freshly added row in full-grid * edit mode) without `setTimeout` or double-`requestAnimationFrame` * hacks. Fires on every flush — including scroll-driven virtual-window * updates — so prefer subscribing once and unsubscribing (or gating on * `detail.phase >= RenderPhase.ROWS`) when you only care about a * specific mutation. * * @example * ```tsx * onRender={(detail) => { * if (detail.initial) console.log('first render complete'); * }} * ``` */ onRender?: EventHandler; } /** * Map of event handler prop names to their corresponding event names. * Used internally to wire up event listeners. * * The `satisfies` clause enforces bidirectional sync: * - Every key must be a valid `keyof EventProps` (interface drift fails) * - Every value must be a valid `keyof DataGridEventMap` (event-name typos * and stale entries pointing at non-existent events fail at compile time) */ export declare const EVENT_PROP_MAP: { readonly onCellClick: "cell-click"; readonly onRowClick: "row-click"; readonly onCellActivate: "cell-activate"; readonly onCellChange: "cell-change"; readonly onCellCommit: "cell-commit"; readonly onCellCancel: "cell-cancel"; readonly onRowCommit: "row-commit"; readonly onChangedRowsReset: "changed-rows-reset"; readonly onEditOpen: "edit-open"; readonly onBeforeEditClose: "before-edit-close"; readonly onEditClose: "edit-close"; readonly onDirtyChange: "dirty-change"; readonly onBaselinesCaptured: "baselines-captured"; readonly onDataChange: "data-change"; readonly onSortChange: "sort-change"; readonly onFilterChange: "filter-change"; readonly onColumnResize: "column-resize"; readonly onColumnResizeReset: "column-resize-reset"; readonly onColumnMove: "column-move"; readonly onColumnVisibility: "column-visibility"; readonly onColumnStateChange: "column-state-change"; readonly onSelectionChange: "selection-change"; readonly onRowMove: "row-move"; readonly onRowDragStart: "row-drag-start"; readonly onRowDragEnd: "row-drag-end"; readonly onRowDrop: "row-drop"; readonly onRowTransfer: "row-transfer"; readonly onGroupToggle: "group-toggle"; readonly onGroupExpand: "group-expand"; readonly onGroupCollapse: "group-collapse"; readonly onTreeExpand: "tree-expand"; readonly onTreeLoadStart: "tree-load-start"; readonly onTreeLoadEnd: "tree-load-end"; readonly onTreeLoadError: "tree-load-error"; readonly onDetailExpand: "detail-expand"; readonly onResponsiveChange: "responsive-change"; readonly onContextMenuOpen: "context-menu-open"; readonly onCopy: "copy"; readonly onPaste: "paste"; readonly onPasteRejected: "paste-rejected"; readonly onUndo: "undo"; readonly onRedo: "redo"; readonly onExportComplete: "export-complete"; readonly onPrintStart: "print-start"; readonly onPrintComplete: "print-complete"; readonly onTbwScroll: "tbw-scroll"; readonly onRender: "render"; }; /** * Gets all event prop names. */ export declare function getEventPropNames(): (keyof EventProps)[]; //# sourceMappingURL=event-props.d.ts.map