From 34638416d6e1abd63a2b7fff4f943ab54059e730 Mon Sep 17 00:00:00 2001
From: samuelarbibe <samuel.arbibe@gmail.com>
Date: Wed, 25 Sep 2024 20:01:11 +0300
Subject: [PATCH] fix: add activatorEvent to resize events

---
 packages/dnd-timeline/package.json          | 5 +----
 packages/dnd-timeline/src/hooks/useItem.tsx | 9 ++++++---
 packages/dnd-timeline/src/types/resize.ts   | 2 ++
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/dnd-timeline/package.json b/packages/dnd-timeline/package.json
index 96381ad..834d5a7 100644
--- a/packages/dnd-timeline/package.json
+++ b/packages/dnd-timeline/package.json
@@ -9,10 +9,7 @@
 		"url": "https://github.com/samuelarbibe/dnd-timeline"
 	},
 	"homepage": "https://samuel-arbibe.gitbook.io/dnd-timeline/",
-	"files": [
-		"dist",
-		"src"
-	],
+	"files": ["dist", "src"],
 	"scripts": {
 		"build": "tsup src/index.tsx --format esm,cjs --dts --external react",
 		"clean": "rm -rf dist",
diff --git a/packages/dnd-timeline/src/hooks/useItem.tsx b/packages/dnd-timeline/src/hooks/useItem.tsx
index c14ea2b..3e3ea4b 100755
--- a/packages/dnd-timeline/src/hooks/useItem.tsx
+++ b/packages/dnd-timeline/src/hooks/useItem.tsx
@@ -1,6 +1,6 @@
 import { useDraggable } from "@dnd-kit/core";
 import { CSS } from "@dnd-kit/utilities";
-import type { CSSProperties, PointerEventHandler } from "react";
+import type { CSSProperties, PointerEvent, PointerEventHandler } from "react";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 
 import type {
@@ -112,7 +112,7 @@ export default function useItem(props: UseItemProps) {
 	useLayoutEffect(() => {
 		if (!dragDirection) return;
 
-		const pointermoveHandler = (event: PointerEvent) => {
+		const pointermoveHandler = (event: globalThis.PointerEvent) => {
 			if (!dragStartX.current || !draggableProps.node.current) return;
 
 			const dragDeltaX =
@@ -131,6 +131,7 @@ export default function useItem(props: UseItemProps) {
 			}
 
 			onResizeMoveCallback({
+				activatorEvent: event,
 				delta: {
 					x: dragDeltaX,
 				},
@@ -161,7 +162,7 @@ export default function useItem(props: UseItemProps) {
 	useLayoutEffect(() => {
 		if (!dragDirection) return;
 
-		const pointerupHandler = () => {
+		const pointerupHandler = (event: globalThis.PointerEvent) => {
 			if (!dragStartX.current || !draggableProps.node.current) return;
 
 			let dragDeltaX = 0;
@@ -179,6 +180,7 @@ export default function useItem(props: UseItemProps) {
 			}
 
 			onResizeEndCallback({
+				activatorEvent: event,
 				delta: {
 					x: dragDeltaX,
 				},
@@ -246,6 +248,7 @@ export default function useItem(props: UseItemProps) {
 				dragStartX.current = event.clientX;
 
 				onResizeStartCallback({
+					activatorEvent: event as unknown as Event,
 					active: {
 						id: props.id,
 						data: dataRef,
diff --git a/packages/dnd-timeline/src/types/resize.ts b/packages/dnd-timeline/src/types/resize.ts
index 25cdb61..733c7c1 100644
--- a/packages/dnd-timeline/src/types/resize.ts
+++ b/packages/dnd-timeline/src/types/resize.ts
@@ -1,6 +1,7 @@
 import type { DragDirection, ResizeActiveItem } from ".";
 
 export interface ResizeMoveEvent {
+	activatorEvent: Event;
 	active: ResizeActiveItem;
 	delta: {
 		x: number;
@@ -11,6 +12,7 @@ export interface ResizeMoveEvent {
 export type ResizeEndEvent = ResizeMoveEvent;
 
 export interface ResizeStartEvent {
+	activatorEvent: Event;
 	active: ResizeActiveItem;
 	direction: DragDirection;
 }