Use native copy/paste event handlers (#3667)

- Added `onCellCopy` and `onCellPaste` props
- Grid now uses native `onCopy` and `onPaste` events
- Copy state has been removed as it can be implemented outside the grid.

Author: amanmahajan7

src/Cell.tsx

@@ -5,21 +5,9 @@ import { useRovingTabIndex } from './hooks';
 import { createCellEvent, getCellClassname, getCellStyle, isCellEditableUtil } from './utils';
 import type { CellRendererProps } from './types';
 
-const cellCopied = css`
-  @layer rdg.Cell {
-    background-color: #ccccff;
-  }
-`;
-
-const cellCopiedClassname = `rdg-cell-copied ${cellCopied}`;
-
 const cellDraggedOver = css`
   @layer rdg.Cell {
     background-color: #ccccff;
-
-    &.${cellCopied} {
-      background-color: #9999ff;
-    }
   }
 `;
 
@@ -29,7 +17,6 @@ function Cell<R, SR>({
   column,
   colSpan,
   isCellSelected,
-  isCopied,
   isDraggedOver,
   row,
   rowIdx,
@@ -48,7 +35,6 @@ function Cell<R, SR>({
   className = getCellClassname(
     column,
     {
-      [cellCopiedClassname]: isCopied,
       [cellDraggedOverClassname]: isDraggedOver
     },
     typeof cellClass === 'function' ? cellClass(row) : cellClass,

src/DataGrid.tsx

@@ -39,18 +39,19 @@ import {
 import type {
   CalculatedColumn,
   CellClickArgs,
+  CellClipboardEvent,
+  CellCopyEvent,
   CellKeyboardEvent,
   CellKeyDownArgs,
   CellMouseEvent,
   CellNavigationMode,
+  CellPasteEvent,
   CellSelectArgs,
   Column,
   ColumnOrColumnGroup,
-  CopyEvent,
   Direction,
   FillEvent,
   Maybe,
-  PasteEvent,
   Position,
   Renderers,
   RowsChangeData,
@@ -175,8 +176,6 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
   onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>;
   defaultColumnOptions?: Maybe<DefaultColumnOptions<NoInfer<R>, NoInfer<SR>>>;
   onFill?: Maybe<(event: FillEvent<NoInfer<R>>) => NoInfer<R>>;
-  onCopy?: Maybe<(event: CopyEvent<NoInfer<R>>) => void>;
-  onPaste?: Maybe<(event: PasteEvent<NoInfer<R>>) => NoInfer<R>>;
 
   /**
    * Event props
@@ -196,6 +195,12 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
   onCellKeyDown?: Maybe<
     (args: CellKeyDownArgs<NoInfer<R>, NoInfer<SR>>, event: CellKeyboardEvent) => void
   >;
+  onCellCopy?: Maybe<
+    (args: CellCopyEvent<NoInfer<R>, NoInfer<SR>>, event: CellClipboardEvent) => void
+  >;
+  onCellPaste?: Maybe<
+    (args: CellPasteEvent<NoInfer<R>, NoInfer<SR>>, event: CellClipboardEvent) => NoInfer<R>
+  >;
   /** Function called whenever cell selection is changed */
   onSelectedCellChange?: Maybe<(args: CellSelectArgs<NoInfer<R>, NoInfer<SR>>) => void>;
   /** Called when the grid is scrolled */
@@ -260,8 +265,8 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     onColumnResize,
     onColumnsReorder,
     onFill,
-    onCopy,
-    onPaste,
+    onCellCopy,
+    onCellPaste,
     // Toggles and modes
     enableVirtualization: rawEnableVirtualization,
     // Miscellaneous
@@ -310,7 +315,6 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
   const [measuredColumnWidths, setMeasuredColumnWidths] = useState(
     (): ReadonlyMap<string, number> => new Map()
   );
-  const [copiedCell, setCopiedCell] = useState<{ row: R; columnKey: string } | null>(null);
   const [isDragging, setDragging] = useState(false);
   const [draggedOverRowIdx, setOverRowIdx] = useState<number | undefined>(undefined);
   const [scrollToPosition, setScrollToPosition] = useState<PartialPosition | null>(null);
@@ -608,39 +612,13 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
       );
       if (cellEvent.isGridDefaultPrevented()) return;
     }
+
     if (!(event.target instanceof Element)) return;
     const isCellEvent = event.target.closest('.rdg-cell') !== null;
     const isRowEvent = isTreeGrid && event.target === focusSinkRef.current;
     if (!isCellEvent && !isRowEvent) return;
 
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
-    const { keyCode } = event;
-
-    if (
-      selectedCellIsWithinViewportBounds &&
-      (onPaste != null || onCopy != null) &&
-      isCtrlKeyHeldDown(event)
-    ) {
-      // event.key may differ by keyboard input language, so we use event.keyCode instead
-      // event.nativeEvent.code cannot be used either as it would break copy/paste for the DVORAK layout
-      const cKey = 67;
-      const vKey = 86;
-      if (keyCode === cKey) {
-        // copy highlighted text only
-        if (window.getSelection()?.isCollapsed === false) return;
-        handleCopy();
-        return;
-      }
-      if (keyCode === vKey) {
-        handlePaste();
-        return;
-      }
-    }
-
     switch (event.key) {
-      case 'Escape':
-        setCopiedCell(null);
-        return;
       case 'ArrowUp':
       case 'ArrowDown':
       case 'ArrowLeft':
@@ -684,31 +662,21 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     updateRow(columns[selectedPosition.idx], selectedPosition.rowIdx, selectedPosition.row);
   }
 
-  function handleCopy() {
+  function handleCellCopy(event: CellClipboardEvent) {
+    if (!selectedCellIsWithinViewportBounds) return;
     const { idx, rowIdx } = selectedPosition;
-    const sourceRow = rows[rowIdx];
-    const sourceColumnKey = columns[idx].key;
-    setCopiedCell({ row: sourceRow, columnKey: sourceColumnKey });
-    onCopy?.({ sourceRow, sourceColumnKey });
+    onCellCopy?.({ row: rows[rowIdx], column: columns[idx] }, event);
   }
 
-  function handlePaste() {
-    if (!onPaste || !onRowsChange || copiedCell === null || !isCellEditable(selectedPosition)) {
+  function handleCellPaste(event: CellClipboardEvent) {
+    if (!onCellPaste || !onRowsChange || !isCellEditable(selectedPosition)) {
       return;
     }
 
     const { idx, rowIdx } = selectedPosition;
-    const targetColumn = columns[idx];
-    const targetRow = rows[rowIdx];
-
-    const updatedTargetRow = onPaste({
-      sourceRow: copiedCell.row,
-      sourceColumnKey: copiedCell.columnKey,
-      targetRow,
-      targetColumnKey: targetColumn.key
-    });
-
-    updateRow(targetColumn, rowIdx, updatedTargetRow);
+    const column = columns[idx];
+    const updatedRow = onCellPaste({ row: rows[rowIdx], column }, event);
+    updateRow(column, rowIdx, updatedRow);
   }
 
   function handleCellInput(event: KeyboardEvent<HTMLDivElement>) {
@@ -726,7 +694,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
       return;
     }
 
-    if (isCellEditable(selectedPosition) && isDefaultCellInput(event)) {
+    if (isCellEditable(selectedPosition) && isDefaultCellInput(event, onCellPaste != null)) {
       setSelectedPosition(({ idx, rowIdx }) => ({
         idx,
         rowIdx,
@@ -1051,11 +1019,6 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
           onCellContextMenu: onCellContextMenuLatest,
           rowClass,
           gridRowStart,
-          copiedCellIdx:
-            copiedCell !== null && copiedCell.row === row
-              ? columns.findIndex((c) => c.key === copiedCell.columnKey)
-              : undefined,
-
           selectedCellIdx: selectedRowIdx === rowIdx ? selectedIdx : undefined,
           draggedOverCellIdx: getDraggedOverCellIdx(rowIdx),
           setDraggedOverRowIdx: isDragging ? setDraggedOverRowIdx : undefined,
@@ -1135,6 +1098,8 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
       ref={gridRef}
       onScroll={handleScroll}
       onKeyDown={handleKeyDown}
+      onCopy={handleCellCopy}
+      onPaste={handleCellPaste}
       data-testid={testId}
       data-cy={dataCy}
     >

src/Row.tsx

@@ -14,7 +14,6 @@ function Row<R, SR>({
   selectedCellIdx,
   isRowSelectionDisabled,
   isRowSelected,
-  copiedCellIdx,
   draggedOverCellIdx,
   lastFrozenColumnIndex,
   row,
@@ -72,7 +71,6 @@ function Row<R, SR>({
           colSpan,
           row,
           rowIdx,
-          isCopied: copiedCellIdx === idx,
           isDraggedOver: draggedOverCellIdx === idx,
           isCellSelected,
           onClick: onCellClick,

src/TreeDataGrid.tsx

@@ -2,10 +2,13 @@ import { useCallback, useMemo } from 'react';
 import type { Key } from 'react';
 
 import { useLatestFunc } from './hooks';
-import { assertIsValidKeyGetter, isCtrlKeyHeldDown } from './utils';
+import { assertIsValidKeyGetter } from './utils';
 import type {
+  CellClipboardEvent,
+  CellCopyEvent,
   CellKeyboardEvent,
   CellKeyDownArgs,
+  CellPasteEvent,
   Column,
   GroupRow,
   Maybe,
@@ -53,6 +56,8 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
   rowHeight: rawRowHeight,
   rowKeyGetter: rawRowKeyGetter,
   onCellKeyDown: rawOnCellKeyDown,
+  onCellCopy: rawOnCellCopy,
+  onCellPaste: rawOnCellPaste,
   onRowsChange,
   selectedRows: rawSelectedRows,
   onSelectedRowsChange: rawOnSelectedRowsChange,
@@ -318,14 +323,25 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
         selectCell({ idx, rowIdx: parentRowAndIndex[1] });
       }
     }
+  }
 
-    // Prevent copy/paste on group rows
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
-    if (isCtrlKeyHeldDown(event) && (event.keyCode === 67 || event.keyCode === 86)) {
-      event.preventGridDefault();
+  // Prevent copy/paste on group rows
+  function handleCellCopy(
+    { row, column }: CellCopyEvent<NoInfer<R>, NoInfer<SR>>,
+    event: CellClipboardEvent
+  ) {
+    if (!isGroupRow(row)) {
+      rawOnCellCopy?.({ row, column }, event);
     }
   }
 
+  function handleCellPaste(
+    { row, column }: CellPasteEvent<NoInfer<R>, NoInfer<SR>>,
+    event: CellClipboardEvent
+  ) {
+    return isGroupRow(row) ? row : rawOnCellPaste!({ row, column }, event);
+  }
+
   function handleRowsChange(updatedRows: R[], { indexes, column }: RowsChangeData<R, SR>) {
     if (!onRowsChange) return;
     const updatedRawRows = [...rawRows];
@@ -361,7 +377,6 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
       onCellContextMenu,
       onRowChange,
       lastFrozenColumnIndex,
-      copiedCellIdx,
       draggedOverCellIdx,
       setDraggedOverRowIdx,
       selectedCellEditor,
@@ -400,7 +415,6 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
       onCellContextMenu,
       onRowChange,
       lastFrozenColumnIndex,
-      copiedCellIdx,
       draggedOverCellIdx,
       setDraggedOverRowIdx,
       selectedCellEditor
@@ -422,6 +436,8 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
       selectedRows={selectedRows}
       onSelectedRowsChange={onSelectedRowsChange}
       onCellKeyDown={handleKeyDown}
+      onCellCopy={handleCellCopy}
+      onCellPaste={rawOnCellPaste ? handleCellPaste : undefined}
       renderers={{
         ...renderers,
         renderRow

src/index.ts

@@ -34,8 +34,6 @@ export type {
   SelectHeaderRowEvent,
   SelectRowEvent,
   FillEvent,
-  CopyEvent,
-  PasteEvent,
   SortDirection,
   SortColumn,
   ColSpanArgs,
@@ -49,5 +47,7 @@ export type {
   CellClickArgs,
   CellKeyDownArgs,
   CellKeyboardEvent,
+  CellCopyEvent,
+  CellPasteEvent,
   CellSelectArgs
 } from './types';

src/types.ts

@@ -153,7 +153,6 @@ export interface CellRendererProps<TRow, TSummaryRow>
     Omit<React.ComponentProps<'div'>, 'children' | 'onClick' | 'onDoubleClick' | 'onContextMenu'> {
   column: CalculatedColumn<TRow, TSummaryRow>;
   colSpan: number | undefined;
-  isCopied: boolean;
   isDraggedOver: boolean;
   isCellSelected: boolean;
   onClick: RenderRowProps<TRow, TSummaryRow>['onCellClick'];
@@ -171,25 +170,27 @@ export type CellMouseEvent = CellEvent<React.MouseEvent<HTMLDivElement>>;
 
 export type CellKeyboardEvent = CellEvent<React.KeyboardEvent<HTMLDivElement>>;
 
+export type CellClipboardEvent = React.ClipboardEvent<HTMLDivElement>;
+
 export interface CellClickArgs<TRow, TSummaryRow = unknown> {
-  rowIdx: number;
-  row: TRow;
   column: CalculatedColumn<TRow, TSummaryRow>;
+  row: TRow;
+  rowIdx: number;
   selectCell: (enableEditor?: boolean) => void;
 }
 
 interface SelectCellKeyDownArgs<TRow, TSummaryRow = unknown> {
   mode: 'SELECT';
-  row: TRow;
   column: CalculatedColumn<TRow, TSummaryRow>;
+  row: TRow;
   rowIdx: number;
   selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
 }
 
 export interface EditCellKeyDownArgs<TRow, TSummaryRow = unknown> {
   mode: 'EDIT';
-  row: TRow;
   column: CalculatedColumn<TRow, TSummaryRow>;
+  row: TRow;
   rowIdx: number;
   navigate: () => void;
   onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
@@ -224,7 +225,6 @@ export interface RenderRowProps<TRow, TSummaryRow = unknown>
   extends BaseRenderRowProps<TRow, TSummaryRow> {
   row: TRow;
   lastFrozenColumnIndex: number;
-  copiedCellIdx: number | undefined;
   draggedOverCellIdx: number | undefined;
   selectedCellEditor: ReactElement<RenderEditCellProps<TRow>> | undefined;
   onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, rowIdx: number, newRow: TRow) => void;
@@ -253,17 +253,13 @@ export interface FillEvent<TRow> {
   targetRow: TRow;
 }
 
-export interface CopyEvent<TRow> {
-  sourceColumnKey: string;
-  sourceRow: TRow;
+interface CellCopyPasteEvent<TRow, TSummaryRow = unknown> {
+  column: CalculatedColumn<TRow, TSummaryRow>;
+  row: TRow;
 }
 
-export interface PasteEvent<TRow> {
-  sourceColumnKey: string;
-  sourceRow: TRow;
-  targetColumnKey: string;
-  targetRow: TRow;
-}
+export type CellCopyEvent<TRow, TSummaryRow = unknown> = CellCopyPasteEvent<TRow, TSummaryRow>;
+export type CellPasteEvent<TRow, TSummaryRow = unknown> = CellCopyPasteEvent<TRow, TSummaryRow>;
 
 export interface GroupRow<TRow> {
   readonly childRows: readonly TRow[];