feat: right click whilst dragging will now cancel drag

Author: Clariity

src/ChessboardProvider.tsx

@@ -51,6 +51,7 @@ import {
   defaultNumericNotationStyle,
   defaultSquareStyle,
 } from './defaults';
+import { RightClickCancelSensor } from './RightClickCancelSensor';
 
 type Defined<T> = T extends undefined ? never : T;
 
@@ -613,6 +614,7 @@ export function ChessboardProvider({
     useSensor(KeyboardSensor),
     useSensor(TouchSensor),
     useSensor(MouseSensor),
+    useSensor(RightClickCancelSensor),
   );
 
   // collision detection that first tries pointer-based detection and then falls back to rectangle intersection for keyboards

src/RightClickCancelSensor.tsx

@@ -0,0 +1,29 @@
+import { PointerSensor, PointerSensorProps } from '@dnd-kit/core';
+
+/**
+ * A custom PointerSensor that listens for right-clicks during a drag
+ * and cancels the active drag operation.
+ *
+ * Works by listening to the "contextmenu" event on window.
+ */
+export class RightClickCancelSensor extends PointerSensor {
+  private handleContextMenu = (event: MouseEvent) => {
+    event.preventDefault();
+    // @ts-expect-error: Accessing private props to call onCancel
+    if (this.props && typeof this.props.onCancel === 'function') {
+      // @ts-expect-error: Accessing private props to call onCancel
+      this.props.onCancel();
+    }
+  };
+
+  constructor(props: PointerSensorProps) {
+    super(props);
+    window.addEventListener('contextmenu', this.handleContextMenu, {
+      passive: false,
+    });
+  }
+
+  teardown() {
+    window.removeEventListener('contextmenu', this.handleContextMenu);
+  }
+}