Remove InteractionMask

src/Cell.tsx

@@ -16,6 +16,7 @@ function Cell<R, SR>({
   row,
   rowIdx,
   eventBus,
+  dragHandle,
   onRowClick,
   onClick,
   onDoubleClick,
@@ -86,10 +87,7 @@ function Cell<R, SR>({
         isRowSelected={isRowSelected}
         onRowSelectionChange={onRowSelectionChange}
       />
-      {isSelected && (
-        // if (!enableCellDragAndDrop || !isCellEditable(selectedPosition) || selectedPosition.mode === 'EDIT') return null;
-        <div className="rdg-cell-drag-handle" />
-      )}
+      {dragHandle}
     </div>
   );
 }

src/DataGrid.tsx

@@ -469,11 +469,7 @@ function DataGrid<R, K extends keyof R, SR>({
     }
   }
 
-  function handleMouseDown(event: React.MouseEvent<HTMLDivElement>) {
-    if (!enableCellDragAndDrop) return;
-    const { target } = event;
-    if (!(target instanceof HTMLDivElement && target.className === 'rdg-cell-drag-handle')) return;
-
+  function handleMouseDown() {
     setDragging(true);
     window.addEventListener('mouseover', onMouseover);
     window.addEventListener('mouseup', onMouseup);
@@ -493,10 +489,6 @@ function DataGrid<R, K extends keyof R, SR>({
   }
 
   function handleDoubleClick(event: React.MouseEvent<HTMLDivElement>) {
-    if (!enableCellDragAndDrop) return;
-    const { target } = event;
-    if (!(target instanceof HTMLDivElement && target.className === 'rdg-cell-drag-handle')) return;
-
     event.stopPropagation();
 
     const column = columns[selectedPosition.idx];
@@ -639,6 +631,17 @@ function DataGrid<R, K extends keyof R, SR>({
     );
   }
 
+  function getDragHandle() {
+    if (!enableCellDragAndDrop || !isCellEditable(selectedPosition) || selectedPosition.mode === 'EDIT') return null;
+    return (
+      <div
+        className="rdg-cell-drag-handle"
+        onMouseDown={handleMouseDown}
+        onDoubleClick={handleDoubleClick}
+      />
+    );
+  }
+
   function getViewportRows() {
     const rowElements = [];
 
@@ -670,6 +673,7 @@ function DataGrid<R, K extends keyof R, SR>({
           rowClass={rowClass}
           top={rowIdx * rowHeight + totalHeaderHeight}
           setDraggedOverRowIdx={isDragging ? setDraggedOverRowIdx : undefined}
+          dragHandle={selectedPosition.rowIdx === rowIdx ? getDragHandle() : undefined}
         />
       );
     }
@@ -724,8 +728,6 @@ function DataGrid<R, K extends keyof R, SR>({
           <div
             className={clsx({ 'rdg-viewport-dragging': isDragging })}
             onKeyDown={handleKeyDown}
-            onMouseDown={handleMouseDown}
-            onDoubleClick={handleDoubleClick}
           >
             {viewportWidth > 0 && getViewportRows()}
             {getEditorContainer()}

src/Row.tsx

@@ -17,6 +17,7 @@ function Row<R, SR = unknown>({
   draggedOverCellIdx,
   row,
   viewportColumns,
+  dragHandle,
   onRowClick,
   rowClass,
   setDraggedOverRowIdx,
@@ -55,6 +56,7 @@ function Row<R, SR = unknown>({
           isDraggedOver={draggedOverCellIdx === column.idx}
           isRowSelected={isRowSelected}
           eventBus={eventBus}
+          dragHandle={selectedCellIdx === column.idx ? dragHandle : undefined}
           onRowClick={onRowClick}
         />
       ))}

src/common/types.ts

@@ -56,14 +56,6 @@ export interface Position {
   rowIdx: number;
 }
 
-export interface Dimension {
-  width: number;
-  height: number;
-  top: number;
-  left: number;
-  zIndex: number;
-}
-
 export interface Editor<TValue = never> {
   getInputNode: () => Element | Text | undefined | null;
   getValue: () => TValue;
@@ -113,6 +105,7 @@ export interface CellRendererProps<TRow, TSummaryRow = unknown> extends Omit<Rea
   isCopied: boolean;
   isDraggedOver: boolean;
   eventBus: EventBus;
+  dragHandle: React.ReactNode;
   onRowClick?: (rowIdx: number, row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void;
 }
 
@@ -128,6 +121,7 @@ export interface RowRendererProps<TRow, TSummaryRow = unknown> extends Omit<Reac
   isRowSelected: boolean;
   eventBus: EventBus;
   top: number;
+  dragHandle: React.ReactNode;
   onRowClick?: (rowIdx: number, row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void;
   rowClass?: (row: TRow) => string | undefined;
   setDraggedOverRowIdx?: (overRowIdx: number) => void;

src/utils/selectedCellUtils.ts

@@ -1,30 +1,6 @@
 import { CellNavigationMode } from '../common/enums';
 import { canEdit } from './columnUtils';
-import { CalculatedColumn, Position, Dimension } from '../common/types';
-
-// above unfrozen cells, below frozen cells
-const zCellMask = 1;
-// above frozen cells, below header/filter/summary rows
-const zFrozenCellMask = 2;
-
-interface GetSelectedDimensionsOpts<R, SR> {
-  selectedPosition: Position;
-  columns: readonly CalculatedColumn<R, SR>[];
-  rowHeight: number;
-  scrollLeft: number;
-}
-
-export function getSelectedDimensions<R, SR>({ selectedPosition: { idx, rowIdx }, columns, rowHeight, scrollLeft }: GetSelectedDimensionsOpts<R, SR>): Dimension {
-  if (idx < 0) {
-    return { width: 0, left: 0, top: 0, height: rowHeight, zIndex: 1 };
-  }
-  const column = columns[idx];
-  const { width } = column;
-  const left = column.frozen ? column.left + scrollLeft : column.left;
-  const top = rowIdx * rowHeight;
-  const zIndex = column.frozen ? zFrozenCellMask : zCellMask;
-  return { width, left, top, height: rowHeight, zIndex };
-}
+import { CalculatedColumn, Position } from '../common/types';
 
 interface IsSelectedCellEditableOpts<R, SR> {
   selectedPosition: Position;

stories/demos/AllFeatures.less

@@ -1,8 +1,8 @@
-.highlight {
+.highlight .rdg-cell {
   background-color: #9370DB;
   color: white;
 }
 
-.rdg-row.highlight:hover {
+.highlight:hover .rdg-cell {
   background-color: #800080;
 }