Remove InteractionMask (#2061)

* Initial commit

* Copy Tab logic

* Initial cell drag implementation

* Initial cell editing implementation

* Move editorContainer to the DataGrid component

* Update src/utils/selectedCellUtils.ts

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

* Cleanup

* Remove masks components

* Cancel copying

* Remove edit check

* Cleanup

* Address comments

* Move DragHandle to the parent DataGrid component

* Do not paste on the copied cell

* Remove unnecessary class

* Fix copy/dragged cell styles

* Address dragging issues

* Pass down dragHandle component

* Fix styles

* Remove unused function

* Move getNextPosition to  selectedCellUtils

* Use ref to get the latest draggedOverRowIdx

* Revert EventBus changes

* Fix type errors

* Specify return type

* Update changelog

* Add selectedCellProps props
Select cell only on update

* Remove isMouted check

* Add the row containing the selected cell if not included in the vertical range

* Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

* Address comments

* Set focus in useLayoutEffect and set tabIndex to -1

* setFocus -> shouldFocus

* Address comments

* Cleanup

* use event.buttons

* Better focus handling

* Remove comments

* Check valid selection

* Even better focus implementation

* Cleanup handleKeyDown usage

* Remove drag cell borders

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <stepien.nicolas@gmail.com>

src/Cell.test.tsx

@@ -22,7 +22,9 @@ const testProps: CellRendererProps<Row> = {
   lastFrozenColumnIndex: -1,
   row: { id: 1, description: 'Wicklow' },
   isRowSelected: false,
-  eventBus: new EventBus()
+  eventBus: new EventBus(),
+  isCopied: false,
+  isDraggedOver: false
 };
 
 const renderComponent = (extraProps?: PropsWithChildren<Partial<CellRendererProps<Row>>>) => {
@@ -60,7 +62,9 @@ describe('Cell', () => {
       lastFrozenColumnIndex: -1,
       row: helpers.rows[11],
       isRowSelected: false,
-      eventBus: new EventBus()
+      eventBus: new EventBus(),
+      isCopied: false,
+      isDraggedOver: false
     };
 
     it('passes classname property', () => {

src/Cell.tsx

@@ -1,77 +1,118 @@
-import React, { forwardRef, memo } from 'react';
+import React, { forwardRef, memo, useRef } from 'react';
 import clsx from 'clsx';
 
+import { EditorContainer, EditorPortal } from './editors';
 import { CellRendererProps } from './common/types';
-import { preventDefault, wrapEvent } from './utils';
+import { wrapEvent } from './utils';
+import { useCombinedRefs } from './hooks';
 
 function Cell<R, SR>({
   className,
   column,
+  isCopied,
+  isDraggedOver,
   isRowSelected,
   lastFrozenColumnIndex,
   row,
   rowIdx,
   eventBus,
+  selectedCellProps,
   onRowClick,
+  onKeyDown,
   onClick,
   onDoubleClick,
   onContextMenu,
-  onDragOver,
   ...props
 }: CellRendererProps<R, SR>, ref: React.Ref<HTMLDivElement>) {
+  const cellRef = useRef<HTMLDivElement>(null);
+  const isSelected = selectedCellProps !== undefined;
+  const isEditing = selectedCellProps?.mode === 'EDIT';
+
+  const { cellClass } = column;
+  className = clsx(
+    'rdg-cell',
+    {
+      'rdg-cell-frozen': column.frozen,
+      'rdg-cell-frozen-last': column.idx === lastFrozenColumnIndex,
+      'rdg-cell-selected': isSelected,
+      'rdg-cell-copied': isCopied,
+      'rdg-cell-dragged-over': isDraggedOver
+    },
+    typeof cellClass === 'function' ? cellClass(row) : cellClass,
+    className
+  );
+
   function selectCell(openEditor?: boolean) {
     eventBus.dispatch('SELECT_CELL', { idx: column.idx, rowIdx }, openEditor);
   }
 
-  function handleCellClick() {
+  function handleClick() {
     selectCell();
     onRowClick?.(rowIdx, row, column);
   }
 
-  function handleCellContextMenu() {
+  function handleContextMenu() {
     selectCell();
   }
 
-  function handleCellDoubleClick() {
+  function handleDoubleClick() {
     selectCell(true);
   }
 
   function onRowSelectionChange(checked: boolean, isShiftClick: boolean) {
     eventBus.dispatch('SELECT_ROW', { rowIdx, checked, isShiftClick });
   }
 
-  const { cellClass } = column;
-  className = clsx(
-    'rdg-cell',
-    {
-      'rdg-cell-frozen': column.frozen,
-      'rdg-cell-frozen-last': column.idx === lastFrozenColumnIndex
-    },
-    typeof cellClass === 'function' ? cellClass(row) : cellClass,
-    className
-  );
+  function getCellContent() {
+    if (selectedCellProps && selectedCellProps.mode === 'EDIT') {
+      const { editorPortalTarget, ...editorProps } = selectedCellProps.editorContainerProps;
+      const { left, top } = cellRef.current!.getBoundingClientRect();
+
+      return (
+        <EditorPortal target={editorPortalTarget}>
+          <EditorContainer<R, SR>
+            {...editorProps}
+            rowIdx={rowIdx}
+            row={row}
+            column={column}
+            left={left}
+            top={top}
+          />
+        </EditorPortal>
+      );
+    }
+
+    return (
+      <>
+        <column.formatter
+          column={column}
+          rowIdx={rowIdx}
+          row={row}
+          isRowSelected={isRowSelected}
+          onRowSelectionChange={onRowSelectionChange}
+        />
+        {selectedCellProps?.dragHandleProps && (
+          <div className="rdg-cell-drag-handle" {...selectedCellProps.dragHandleProps} />
+        )}
+      </>
+    );
+  }
 
   return (
     <div
-      ref={ref}
+      ref={useCombinedRefs(cellRef, ref)}
       className={className}
       style={{
         width: column.width,
         left: column.left
       }}
-      onClick={wrapEvent(handleCellClick, onClick)}
-      onDoubleClick={wrapEvent(handleCellDoubleClick, onDoubleClick)}
-      onContextMenu={wrapEvent(handleCellContextMenu, onContextMenu)}
-      onDragOver={wrapEvent(preventDefault, onDragOver)}
+      onKeyDown={selectedCellProps ? wrapEvent(selectedCellProps.onKeyDown, onKeyDown) : onKeyDown}
+      onClick={isEditing ? onClick : wrapEvent(handleClick, onClick)}
+      onDoubleClick={isEditing ? onDoubleClick : wrapEvent(handleDoubleClick, onDoubleClick)}
+      onContextMenu={isEditing ? onContextMenu : wrapEvent(handleContextMenu, onContextMenu)}
       {...props}
     >
-      <column.formatter
-        column={column}
-        rowIdx={rowIdx}
-        row={row}
-        isRowSelected={isRowSelected}
-        onRowSelectionChange={onRowSelectionChange}
-      />
+      {getCellContent()}
     </div>
   );
 }