Expose activatorEvent to DragEvent handlers

clauderic · May 19, 2022 · 188a450 · 188a450
1 parent 5811986
commit 188a450
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 4 deletions.
diff --git a/.changeset/accessibility-related-props.md b/.changeset/accessibility-related-props.md
@@ -2,6 +2,8 @@
 '@dnd-kit/core': major
 ---
 
+Accessibility related changes.
+
 #### Regrouping accessibility-related props
 
 Accessibility-related props have been regrouped under the `accessibility` prop of `<DndContext>`:

diff --git a/.changeset/expose-activator-event.md b/.changeset/expose-activator-event.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/core': minor
+---
+
+The `onDragStart`, `onDragMove`, `onDragOver`, `onDragEnd` and `onDragCancel` events of `<DndContext>` and `useDndMonitor` now expose the `activatorEvent` event that instantiated the activated sensor.
diff --git a/.changeset/shaggy-masks-refuse.md → .changeset/safer-equal-implementation.md b/.changeset/shaggy-masks-refuse.md → .changeset/safer-equal-implementation.md
diff --git a/packages/core/src/components/DndContext/DndContext.tsx b/packages/core/src/components/DndContext/DndContext.tsx
@@ -217,6 +217,7 @@ export const DndContext = memo(function DndContext({
     activeNode ? activeNode.parentElement : null
   );
   const sensorContext = useRef<SensorContext>({
+    activatorEvent: null,
     active: null,
     activeNode,
     collisionRect: null,
@@ -338,10 +339,12 @@ export const DndContext = memo(function DndContext({
         return;
       }
 
+      const activatorEvent = event.nativeEvent;
+
       const sensorInstance = new Sensor({
         active: activeRef.current,
         activeNode,
-        event: event.nativeEvent,
+        event: activatorEvent,
         options,
         // Sensors need to be instantiated with refs for arguments that change over time
         // otherwise they are frozen in time with the stale arguments
@@ -404,6 +407,7 @@ export const DndContext = memo(function DndContext({
             const {cancelDrop} = latestProps.current;
 
             event = {
+              activatorEvent,
               active: active,
               collisions,
               delta: scrollAdjustedTranslate,
@@ -506,14 +510,15 @@ export const DndContext = memo(function DndContext({
   useEffect(
     () => {
       const {onDragMove} = latestProps.current;
-      const {active, collisions, over} = sensorContext.current;
+      const {active, activatorEvent, collisions, over} = sensorContext.current;
 
-      if (!active) {
+      if (!active || !activatorEvent) {
         return;
       }
 
       const event: DragMoveEvent = {
         active,
+        activatorEvent,
         collisions,
         delta: {
           x: scrollAdjustedTranslate.x,
@@ -533,12 +538,18 @@ export const DndContext = memo(function DndContext({
     () => {
       const {
         active,
+        activatorEvent,
         collisions,
         droppableContainers,
         scrollAdjustedTranslate,
       } = sensorContext.current;
 
-      if (!active || !activeRef.current || !scrollAdjustedTranslate) {
+      if (
+        !active ||
+        !activeRef.current ||
+        !activatorEvent ||
+        !scrollAdjustedTranslate
+      ) {
         return;
       }
 
@@ -555,6 +566,7 @@ export const DndContext = memo(function DndContext({
           : null;
       const event: DragOverEvent = {
         active,
+        activatorEvent,
         collisions,
         delta: {
           x: scrollAdjustedTranslate.x,
@@ -575,6 +587,7 @@ export const DndContext = memo(function DndContext({
 
   useIsomorphicLayoutEffect(() => {
     sensorContext.current = {
+      activatorEvent,
       active,
       activeNode,
       collisionRect,

diff --git a/packages/core/src/sensors/types.ts b/packages/core/src/sensors/types.ts
@@ -23,6 +23,7 @@ export enum Response {
 }
 
 export type SensorContext = {
+  activatorEvent: Event | null;
   active: Active | null;
   activeNode: HTMLElement | null;
   collisionRect: ClientRect | null;

diff --git a/packages/core/src/types/events.ts b/packages/core/src/types/events.ts
@@ -4,6 +4,7 @@ import type {Collision} from '../utilities/algorithms';
 import type {Translate} from './coordinates';
 
 interface DragEvent {
+  activatorEvent: Event;
   active: Active;
   collisions: Collision[] | null;
   delta: Translate;