Merge branch 'main' into am-refactor-minmax-logic

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/HeaderCell.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { css } from '@linaria/core';
 
 import { useRovingTabIndex } from './hooks';
@@ -86,7 +86,6 @@ export default function HeaderCell<R, SR>({
 }: HeaderCellProps<R, SR>) {
   const [isDragging, setIsDragging] = useState(false);
   const [isOver, setIsOver] = useState(false);
-  const isRtl = direction === 'rtl';
   const rowSpan = getHeaderCellRowSpan(column, rowIdx);
   const { tabIndex, childTabIndex, onFocus } = useRovingTabIndex(isCellSelected);
   const sortIndex = sortColumns?.findIndex((sort) => sort.columnKey === column.key);
@@ -106,42 +105,6 @@ export default function HeaderCell<R, SR>({
     [cellOverClassname]: isOver
   });
 
-  function onPointerDown(event: React.PointerEvent<HTMLDivElement>) {
-    if (event.pointerType === 'mouse' && event.buttons !== 1) {
-      return;
-    }
-
-    // Fix column resizing on a draggable column in FF
-    event.preventDefault();
-
-    const { currentTarget, pointerId } = event;
-    const headerCell = currentTarget.parentElement!;
-    const { right, left } = headerCell.getBoundingClientRect();
-    const offset = isRtl ? event.clientX - left : right - event.clientX;
-    function onPointerMove(event: PointerEvent) {
-      const { width, right, left } = headerCell.getBoundingClientRect();
-      const newWidth = isRtl ? right + offset - event.clientX : event.clientX + offset - left;
-      if (width > 0 && newWidth !== width) {
-        onColumnResize(column, newWidth);
-      }
-    }
-
-    function onLostPointerCapture() {
-      currentTarget.removeEventListener('pointermove', onPointerMove);
-      currentTarget.removeEventListener('lostpointercapture', onLostPointerCapture);
-    }
-
-    currentTarget.setPointerCapture(pointerId);
-    currentTarget.addEventListener('pointermove', onPointerMove);
-    // we are not using pointerup because it does not fire in some cases
-    // pointer down -> alt+tab -> pointer up over another window -> pointerup event not fired
-    currentTarget.addEventListener('lostpointercapture', onLostPointerCapture);
-  }
-
-  function onDoubleClick() {
-    onColumnResize(column, 'max-content');
-  }
-
   function onSort(ctrlClick: boolean) {
     if (onSortColumnsChange == null) return;
     const { sortDescendingFirst } = column;
@@ -289,17 +252,68 @@ export default function HeaderCell<R, SR>({
       })}
 
       {resizable && (
-        <div
-          className={resizeHandleClassname}
-          onClick={stopPropagation}
-          onPointerDown={onPointerDown}
-          onDoubleClick={onDoubleClick}
-        />
+        <ResizeHandle column={column} onColumnResize={onColumnResize} direction={direction} />
       )}
     </div>
   );
 }
 
+type ResizeHandleProps<R, SR> = Pick<
+  HeaderCellProps<R, SR>,
+  'column' | 'onColumnResize' | 'direction'
+>;
+
+function ResizeHandle<R, SR>({ column, onColumnResize, direction }: ResizeHandleProps<R, SR>) {
+  const resizingOffsetRef = useRef<number>(undefined);
+  const isRtl = direction === 'rtl';
+
+  function onPointerDown(event: React.PointerEvent<HTMLDivElement>) {
+    if (event.pointerType === 'mouse' && event.buttons !== 1) {
+      return;
+    }
+
+    // Fix column resizing on a draggable column in FF
+    event.preventDefault();
+
+    const { currentTarget, pointerId } = event;
+    currentTarget.setPointerCapture(pointerId);
+    const headerCell = currentTarget.parentElement!;
+    const { right, left } = headerCell.getBoundingClientRect();
+    resizingOffsetRef.current = isRtl ? event.clientX - left : right - event.clientX;
+  }
+
+  function onPointerMove(event: React.PointerEvent<HTMLDivElement>) {
+    const offset = resizingOffsetRef.current;
+    if (offset === undefined) return;
+    const { width, right, left } = event.currentTarget.parentElement!.getBoundingClientRect();
+    const newWidth = isRtl ? right + offset - event.clientX : event.clientX + offset - left;
+    if (width > 0 && newWidth !== width) {
+      onColumnResize(column, newWidth);
+    }
+  }
+
+  function onLostPointerCapture() {
+    resizingOffsetRef.current = undefined;
+  }
+
+  function onDoubleClick() {
+    onColumnResize(column, 'max-content');
+  }
+
+  return (
+    <div
+      className={resizeHandleClassname}
+      onClick={stopPropagation}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      // we are not using pointerup because it does not fire in some cases
+      // pointer down -> alt+tab -> pointer up over another window -> pointerup event not fired
+      onLostPointerCapture={onLostPointerCapture}
+      onDoubleClick={onDoubleClick}
+    />
+  );
+}
+
 // only accept pertinent drag events:
 // - ignore drag events going from the container to an element inside the container
 // - ignore drag events going from an element inside the container to the container

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,