Merge branch 'fix-context-menu-keyboard-support' into pre-release

Author: annaha

packages/core/src/data-editor/data-editor-keybindings.ts

@@ -67,6 +67,8 @@ export interface ConfigurableKeybinds {
     readonly selectAll: Keybind;
     readonly selectRow: Keybind;
     readonly selectColumn: Keybind;
+
+    readonly contextMenu: Keybind;
 }
 
 export type Keybinds = ConfigurableKeybinds & ForcedKeybinds & Partial<BackCompatKeybinds>;
@@ -118,6 +120,7 @@ export const keybindingDefaults: Keybinds = {
     selectGrowRight: true,
     selectGrowDown: true,
     selectGrowLeft: true,
+    contextMenu: true,
 };
 
 function realizeKeybind(keybind: Keybind, defaultVal: string): string {
@@ -174,6 +177,7 @@ export function realizeKeybinds(keybinds: Keybinds): RealizedKeybinds {
         selectToLastCell: realizeKeybind(keybinds.selectToLastCell, "primary+shift+End"),
         selectToLastColumn: realizeKeybind(keybinds.selectToLastColumn, "primary+shift+ArrowRight"),
         selectToLastRow: realizeKeybind(keybinds.selectToLastRow, "primary+shift+ArrowDown"),
+        contextMenu: realizeKeybind(keybinds.contextMenu, "shift+F10"),
     };
 }
 

packages/core/src/data-editor/data-editor.tsx

@@ -3220,6 +3220,42 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
 
     const overlayOpen = overlay !== undefined;
 
+    const onContextMenu = React.useCallback(
+      (args: GridMouseEventArgs, preventDefault: () => void) => {
+        const adjustedCol = args.location[0] - rowMarkerOffset;
+        if (args.kind === "header") {
+          onHeaderContextMenu?.(adjustedCol, { ...args, preventDefault });
+        }
+
+        if (args.kind === groupHeaderKind) {
+          if (adjustedCol < 0) {
+            return;
+          }
+          onGroupHeaderContextMenu?.(adjustedCol, { ...args, preventDefault });
+        }
+
+        if (args.kind === "cell") {
+          const [col, row] = args.location;
+          onCellContextMenu?.([adjustedCol, row], {
+            ...args,
+            preventDefault,
+          });
+
+          if (!gridSelectionHasItem(gridSelection, args.location)) {
+            updateSelectedCell(col, row, false, false);
+          }
+        }
+      },
+      [
+        gridSelection,
+        onCellContextMenu,
+        onGroupHeaderContextMenu,
+        onHeaderContextMenu,
+        rowMarkerOffset,
+        updateSelectedCell,
+      ]
+    );
+
     const handleFixedKeybindings = React.useCallback(
         (event: GridKeyEventArgs): boolean => {
             const cancel = () => {
@@ -3397,6 +3433,35 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                     col = Number.MAX_SAFE_INTEGER;
                 } else if (isHotkey(keys.goToFirstColumn, event, details)) {
                     col = Number.MIN_SAFE_INTEGER;
+                } else if (
+                    isHotkey(keys.contextMenu, event, details) &&
+                    bounds !== undefined &&
+                    event.location !== undefined
+                ) {
+                    const {
+                      location,
+                      ctrlKey,
+                      metaKey,
+                      shiftKey,
+                    } = event;
+
+                    onContextMenu(
+                      {
+                        kind: "cell",
+                        isFillHandle: false,
+                        isTouch: false,
+                        isEdge: false,
+                        button: 0,
+                        scrollEdge: [0, 0],
+                        localEventX: bounds.width / 2,
+                        localEventY: bounds.height / 2,
+                        location,
+                        bounds,
+                        ctrlKey,
+                        metaKey,
+                        shiftKey,
+                        buttons: 0
+                      }, cancel)
                 } else if (rangeSelect === "rect" || rangeSelect === "multi-rect") {
                     if (isHotkey(keys.selectGrowDown, event, details)) {
                         adjustSelection([0, 1]);
@@ -3486,6 +3551,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
             return didMatch;
         },
         [
+            onContextMenu,
             rowGroupingNavBehavior,
             overlayOpen,
             gridSelection,
@@ -3579,42 +3645,6 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         ]
     );
 
-    const onContextMenu = React.useCallback(
-        (args: GridMouseEventArgs, preventDefault: () => void) => {
-            const adjustedCol = args.location[0] - rowMarkerOffset;
-            if (args.kind === "header") {
-                onHeaderContextMenu?.(adjustedCol, { ...args, preventDefault });
-            }
-
-            if (args.kind === groupHeaderKind) {
-                if (adjustedCol < 0) {
-                    return;
-                }
-                onGroupHeaderContextMenu?.(adjustedCol, { ...args, preventDefault });
-            }
-
-            if (args.kind === "cell") {
-                const [col, row] = args.location;
-                onCellContextMenu?.([adjustedCol, row], {
-                    ...args,
-                    preventDefault,
-                });
-
-                if (!gridSelectionHasItem(gridSelection, args.location)) {
-                    updateSelectedCell(col, row, false, false);
-                }
-            }
-        },
-        [
-            gridSelection,
-            onCellContextMenu,
-            onGroupHeaderContextMenu,
-            onHeaderContextMenu,
-            rowMarkerOffset,
-            updateSelectedCell,
-        ]
-    );
-
     const onPasteInternal = React.useCallback(
         async (e?: ClipboardEvent) => {
             if (!keybindings.paste) return;

packages/core/src/internal/data-grid/data-grid.tsx

@@ -1283,25 +1283,6 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
     );
     useEventListener("contextmenu", onContextMenuImpl, eventTargetRef?.current ?? null, false);
 
-    const onContextMenuWithKeyboardImpl = React.useCallback(
-      (ev: MouseEvent) => {
-        const canvas = ref.current;
-        const currentSelectedCell = selectionRef.current.current?.cell
-        if (canvas === null || onContextMenu === undefined || currentSelectedCell === undefined)
-          return;
-        const bounds = getBoundsForItem(canvas, ...currentSelectedCell);
-        if (bounds) {
-          const args = getMouseArgsForPosition(canvas, bounds.x + bounds.width / 2, bounds.y + bounds.height / 2, ev);
-          onContextMenu(args, () => {
-          if (ev.cancelable) ev.preventDefault();
-          });
-        }
-      },
-      [getMouseArgsForPosition, onContextMenu, getBoundsForItem]
-   );
-
-    useEventListener("contextmenu", onContextMenuWithKeyboardImpl, ref?.current ?? null, false);
-
     const onAnimationFrame = React.useCallback<StepCallback>(values => {
         damageRegion.current = new CellSet(values.map(x => x.item));
         hoverValues.current = values;

packages/core/test/data-editor.test.tsx

@@ -196,53 +196,6 @@ describe("data-editor", () => {
         expect(spySelection).not.toHaveBeenCalled();
     });
 
-    test("opens contextmenu at selected cell position when fired on canvas", async () => {
-      const spy = vi.fn();
-
-      vi.useFakeTimers();
-      render(<DataEditor
-        {...basicProps}
-        gridSelection={{
-          columns: CompactSelection.empty(),
-          rows: CompactSelection.empty(),
-          current: {
-            cell: [1, 1],
-            range: { x: 1, y: 1, width: 1, height: 1 },
-            rangeStack: [],
-          },
-        }}
-        onCellContextMenu={spy}
-      />, { wrapper: Context });
-
-      prep();
-
-      const canvas = screen.getByTestId("data-grid-canvas");
-
-      fireEvent.contextMenu(canvas);
-
-      expect(spy).toHaveBeenCalledWith([1, 1], expect.anything());
-    });
-
-    test("does not open contextmenu when no cell selected", async () => {
-      const spy = vi.fn();
-
-      vi.useFakeTimers();
-      render(<DataEditor
-        {...basicProps}
-        gridSelection={{
-          columns: CompactSelection.empty(),
-          rows: CompactSelection.empty(),
-        }}
-        onCellContextMenu={spy}
-      />, { wrapper: Context });
-
-      prep();
-      const canvas = screen.getByTestId("data-grid-canvas");
-      fireEvent.contextMenu(canvas);
-
-      expect(spy).not.toHaveBeenCalled();
-    });
-
     test("middle click does not change selection", async () => {
         const spySelection = vi.fn();
 
@@ -1196,6 +1149,78 @@ describe("data-editor", () => {
         expect(spy).toHaveBeenCalledWith(expect.objectContaining({ location: [1, 1] }));
     });
 
+    test("opens context menu with Shift+F10 when cell is selected", async () => {
+      const spy = vi.fn();
+
+      vi.useFakeTimers();
+      render(<DataEditor {...basicProps} onCellContextMenu={spy} />, {
+        wrapper: Context,
+      });
+      prep(false);
+
+      const canvas = screen.getByTestId("data-grid-canvas");
+      sendClick(canvas, {
+        clientX: 300,
+        clientY: 84,
+      });
+
+      fireEvent.keyDown(canvas, {
+        key: "F10",
+        keyCode: 121,
+        shiftKey: true,
+      });
+
+      expect(spy).toHaveBeenCalledWith([1, 1], expect.anything());
+
+      const eventArgs = spy.mock.calls[0][1];
+      expect(eventArgs).toMatchObject({
+        kind: "cell",
+        shiftKey: true,
+        location: [1, 1],
+        bounds: expect.objectContaining({
+          x: expect.any(Number),
+          y: expect.any(Number),
+          width: expect.any(Number),
+          height: expect.any(Number),
+        }),
+        localEventX: eventArgs.bounds.width / 2,
+        localEventY: eventArgs.bounds.height / 2,
+      });
+
+    });
+
+    test("does not open context menu with Shift+F10 when no cells are selected", async () => {
+      const spy = vi.fn();
+
+      vi.useFakeTimers();
+      render(
+        <DataEditor
+          {...basicProps}
+          onCellContextMenu={spy}
+          gridSelection={{
+            columns: CompactSelection.empty(),
+            rows: CompactSelection.empty(),
+            current: undefined,
+          }}
+        />,
+        {
+          wrapper: Context,
+        }
+      );
+      prep(false);
+
+      const canvas = screen.getByTestId("data-grid-canvas");
+
+      // Press Shift+F10 without selecting any cell
+      fireEvent.keyDown(canvas, {
+        key: "F10",
+        keyCode: 121,
+        shiftKey: true,
+      });
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+
     test("Delete cell", async () => {
         const spy = vi.fn();