feat: support shadow dom elements

packages/core/src/adapter/element-adapter.ts

@@ -1,6 +1,5 @@
 import { bind } from 'bind-event-listener';
 
-import { getElementFromPointWithoutHoneypot } from '../honey-pot-fix/get-element-from-point-without-honey-pot';
 import { makeHoneyPotFix } from '../honey-pot-fix/make-honey-pot-fix';
 import {
 	type AdapterAPI,
@@ -131,13 +130,17 @@ const adapter = makeAdapter<ElementDragType>({
 
 					// the closest parent that is a draggable element will be marked as
 					// the `event.target` for the event
-					const target: EventTarget | null = event.target;
+					const target = event
+            .composedPath()
+            .find(
+              (t): t is HTMLElement => t instanceof HTMLElement && draggableRegistry.has(t)
+            );
 
 					// this source is only for elements
 					// Note: only HTMLElements can have the "draggable" attribute
-					if (!(target instanceof HTMLElement)) {
-						return null;
-					}
+					if (!target) {
+            return null;
+          }
 
 					// see if the thing being dragged is owned by us
 					const entry: DraggableArgs | undefined = draggableRegistry.get(target);
@@ -201,10 +204,11 @@ const adapter = makeAdapter<ElementDragType>({
 						// technically don't need this util, but just being
 						// consistent with how we look up what is under the users
 						// cursor.
-						const over = getElementFromPointWithoutHoneypot({
-							x: input.clientX,
-							y: input.clientY,
-						});
+						const dragHandleSource = target.getRootNode() as Document | ShadowRoot;
+						const over = dragHandleSource.elementFromPoint(
+              input.clientX,
+              input.clientY
+            );
 
 						// if we are not dragging from the drag handle (or something inside the drag handle)
 						// then we will cancel the active drag

packages/core/src/internal-types.ts

@@ -386,6 +386,7 @@ export type DropTargetAPI<DragType extends AllDragTypes> = {
 	getIsOver: (args: {
 		source: DragType['payload'];
 		target: EventTarget | null;
+		event: Event;
 		input: Input;
 		current: DropTargetRecord[];
 	}) => DropTargetRecord[];

packages/core/src/ledger/lifecycle-manager.ts

@@ -124,11 +124,12 @@ function start<DragType extends AllDragTypes>({
 			: event.target;
 
 		const nextDropTargets = getDropTargetsOver({
-			target,
-			input,
-			source: dragType.payload,
-			current: state.current.dropTargets,
-		});
+      target,
+      event,
+      input,
+      source: dragType.payload,
+      current: state.current.dropTargets,
+    });
 
 		if (nextDropTargets.length) {
 			// 🩸 must call `event.preventDefault()` to allow a browser drop to occur
@@ -308,7 +309,7 @@ function start<DragType extends AllDragTypes>({
 				// as we will have already removed the event listener
 
 				type: 'dragend',
-				listener(event) {
+				listener(event: DragEvent) {
 					// In firefox, the position of the "dragend" event can
 					// be a bit different to the last "dragover" event.
 					// Updating the input so we can get the best possible
@@ -374,6 +375,7 @@ function getStartLocation<DragType extends AllDragTypes>({
 		input,
 		source: dragType.payload,
 		target: event.target,
+		event,
 		current: [],
 	});
 	return {

packages/core/src/make-adapter/make-drop-target.ts

@@ -72,16 +72,18 @@ export function makeDropTarget<DragType extends AllDragTypes>({
 		source,
 		target,
 		input,
+		event,
 		result = [],
 	}: {
 		source: DragType['payload'];
 		target: EventTarget | null;
 		input: Input;
+		event: Event | undefined;
 		result?: DropTargetRecord[];
 	}): DropTargetRecord[] {
-		if (target == null) {
-			return result;
-		}
+		if (event === undefined) {
+      return result;
+    }
 
 		if (!(target instanceof Element)) {
 			// For "text-selection" drags, the original `target`
@@ -90,6 +92,7 @@ export function makeDropTarget<DragType extends AllDragTypes>({
 			if (target instanceof Node) {
 				return getActualDropTargets({
 					source,
+					event,
 					target: target.parentElement,
 					input,
 					result,
@@ -129,6 +132,7 @@ export function makeDropTarget<DragType extends AllDragTypes>({
 				source,
 				target: args.element.parentElement,
 				input,
+				event,
 				result,
 			});
 		}
@@ -150,6 +154,7 @@ export function makeDropTarget<DragType extends AllDragTypes>({
 			source,
 			target: args.element.parentElement,
 			input,
+			event,
 			// Using bubble ordering. Same ordering as `event.getPath()`
 			result: [...result, record],
 		});
@@ -235,16 +240,19 @@ export function makeDropTarget<DragType extends AllDragTypes>({
 		source,
 		target,
 		input,
+		event,
 		current,
 	}: {
 		source: DragType['payload'];
 		target: EventTarget | null;
 		input: Input;
+		event: Event | undefined;
 		current: DropTargetRecord[];
 	}): DropTargetRecord[] {
 		const actual: DropTargetRecord[] = getActualDropTargets({
 			source,
 			target,
+			event,
 			input,
 		});