@mk-drag-and-drop/dom 0.1.0 → 0.2.0

package/dist/runtime/drag-runtime.js

@@ -16,13 +16,12 @@ export class DragRuntime {
     session = { status: "idle" };
     modifiers = [];
     activeDragModifiers = [];
-    cleanupWindowListeners = null;
-    cleanupTextSelectionSuppression = null;
+    releaseActiveInputListeners = null;
+    restoreTextSelectionSuppression = null;
     queuedPointerPosition = null;
     pointerFrameId = null;
     subscriptions = new Set();
-    disposeCallbacks = new Set();
-    bindingCleanupRecords = new Set();
+    staleDomBindingRecords = new Set();
     lifecycleCallbacks = {};
     lifecycleHelpers = {
         getDropTargetRect: (dropTargetId) => this.getLifecycleDropTargetRect(dropTargetId),
@@ -37,7 +36,7 @@ export class DragRuntime {
     updateOverlayHost;
     targetingAlgorithm;
     hasDragOverlay;
-    keepOverlayOnDrop;
+    overlayRelease;
     targetingConstraint;
     pointerActivation = new PointerActivationController({
         getConfiguration: () => this.pointerConfiguration,
@@ -96,12 +95,12 @@ export class DragRuntime {
         this.updateOverlayHost = options.updateOverlayHost ?? noopUpdateOverlayHost;
         this.targetingAlgorithm = options.targetingAlgorithm ?? pointerToCenter;
         this.hasDragOverlay = options.hasDragOverlay ?? false;
-        this.keepOverlayOnDrop = options.keepOverlayOnDrop ?? false;
+        this.overlayRelease = options.overlayRelease ?? "auto";
         this.targetingConstraint = options.targetingConstraint;
     }
     configure(input) {
         this.hasDragOverlay = input.hasDragOverlay;
-        this.keepOverlayOnDrop = input.keepOverlayOnDrop;
+        this.overlayRelease = input.overlayRelease;
         this.targetingAlgorithm = input.targetingAlgorithm;
         this.targetingConstraint = input.targetingConstraint;
         this.lifecycleCallbacks = input.lifecycleCallbacks;
@@ -110,7 +109,7 @@ export class DragRuntime {
         this.pointerConfiguration = normalizePointerConfiguration(input.pointerConfiguration);
     }
     requestDragStart(input) {
-        this.pruneDisconnectedBindingCleanups();
+        this.pruneDisconnectedDomBindings();
         this.pointerActivation.request(input);
     }
     isKeyboardDragEnabled() {
@@ -120,8 +119,8 @@ export class DragRuntime {
         return this.keyboardDrag.handleSourceKeyDown(input);
     }
     requestKeyboardDragStart(input) {
-        this.pruneDisconnectedBindingCleanups();
-        this.pointerActivation.cancel();
+        this.pruneDisconnectedDomBindings();
+        this.cancelPendingActivation();
         if (this.isDragging ||
             !this.keyboardDrag.isEnabled() ||
             !input.element.isConnected) {
@@ -162,7 +161,7 @@ export class DragRuntime {
         else {
             pointerPosition.x += distance;
         }
-        this.updatePointerNow(pointerPosition);
+        this.updatePointerNowOrRelease(pointerPosition);
     }
     updatePointer(rawPointerPosition) {
         if (this.session.status !== "dragging") {
@@ -177,7 +176,7 @@ export class DragRuntime {
             const nextPointerPosition = this.queuedPointerPosition;
             this.queuedPointerPosition = null;
             if (nextPointerPosition) {
-                this.updatePointerNow(nextPointerPosition);
+                this.updatePointerNowOrRelease(nextPointerPosition);
             }
         });
     }
@@ -230,20 +229,38 @@ export class DragRuntime {
             placementPosition: sortablePlacementPosition,
         });
     }
+    updatePointerNowOrRelease(rawPointerPosition) {
+        try {
+            this.updatePointerNow(rawPointerPosition);
+        }
+        catch (error) {
+            this.releaseActiveDragResourcesAndRethrow(error);
+        }
+    }
+    finishDragAfterQueuedPointerUpdate(input) {
+        try {
+            this.flushQueuedPointerUpdate();
+        }
+        catch (error) {
+            this.releaseActiveDragResourcesAndRethrow(error);
+        }
+        this.finishDrag(input);
+    }
     endDrag() {
-        this.flushQueuedPointerUpdate();
-        this.finishDrag({
+        this.finishDragAfterQueuedPointerUpdate({
             reason: "drop",
-            keepReleasedOverlay: this.keepOverlayOnDrop,
+            overlayRelease: this.overlayRelease,
         });
     }
     cancelDrag() {
-        this.flushQueuedPointerUpdate();
-        this.finishDrag({
+        this.finishDragAfterQueuedPointerUpdate({
             reason: "cancel",
-            keepReleasedOverlay: false,
+            overlayRelease: this.overlayRelease,
         });
     }
+    cancelPendingActivation() {
+        this.pointerActivation.cancelPendingActivation();
+    }
     registerDropTarget(dropTargetId, element, group, options) {
         const removedTargets = this.dropTargetRegistry.register(dropTargetId, element, group, options);
         this.clearActiveDropTargetIdIfRemoved(removedTargets);
@@ -263,12 +280,53 @@ export class DragRuntime {
         const removedTargets = this.dropTargetRegistry.unregister(containerId, element);
         this.clearActiveDropTargetIdIfRemoved(removedTargets);
     }
-    cleanup() {
-        this.pointerActivation.cancel();
+    releaseActiveDragResources() {
+        const activeSession = this.getDraggingSession();
+        this.cancelPendingActivation();
+        let firstReleaseError;
+        let hasReleaseError = false;
+        if (activeSession) {
+            try {
+                this.notifyActiveDragReset({
+                    draggableId: activeSession.draggableId,
+                    source: activeSession.source,
+                });
+            }
+            catch (error) {
+                firstReleaseError = error;
+                hasReleaseError = true;
+            }
+        }
         this.resetActiveDragState();
-        this.cleanupActiveDragResources();
-        this.updateOverlayHost({ type: "unmount" });
-        this.pruneDisconnectedBindingCleanups();
+        try {
+            this.releaseActiveInputResources();
+        }
+        catch (error) {
+            firstReleaseError = error;
+            hasReleaseError = true;
+        }
+        try {
+            this.clearOverlayHost();
+        }
+        catch (error) {
+            if (!hasReleaseError) {
+                firstReleaseError = error;
+                hasReleaseError = true;
+            }
+        }
+        if (hasReleaseError) {
+            throw firstReleaseError;
+        }
+    }
+    releaseActiveDragResourcesAndRethrow(error) {
+        try {
+            this.releaseActiveDragResources();
+        }
+        catch {
+            // Preserve the original failure while still making a best effort to
+            // release resources that were acquired before it was thrown.
+        }
+        throw error;
     }
     getDropTargetRect(dropTargetId) {
         return this.dropTargetRegistry.getViewportRect(dropTargetId);
@@ -302,16 +360,16 @@ export class DragRuntime {
             ...session,
             overlayMeasurement,
         });
-        this.updatePointerNow(session.rawPointerPosition);
+        this.updatePointerNowOrRelease(session.rawPointerPosition);
     }
     remeasureDropTargets(input) {
         const pruneGroup = input !== undefined && typeof input !== "string" && !Array.isArray(input)
             ? input.group
             : undefined;
-        this.pruneDisconnectedBindingCleanups();
+        this.pruneDisconnectedDomBindings();
         this.removeDisconnectedDropTargets(pruneGroup);
         this.dropTargetRegistry.remeasure(input);
-        this.pruneDisconnectedBindingCleanups();
+        this.pruneDisconnectedDomBindings();
     }
     subscribe(subscription) {
         this.subscriptions.add(subscription);
@@ -319,121 +377,110 @@ export class DragRuntime {
             this.subscriptions.delete(subscription);
         };
     }
-    onDispose(callback) {
-        this.disposeCallbacks.add(callback);
-        return () => {
-            this.disposeCallbacks.delete(callback);
-        };
-    }
-    registerBindingCleanup(record) {
+    registerStaleDomBinding(record) {
         const storedRecord = {
             record,
             hasBeenConnected: record.isConnected(),
         };
-        // Keep registration O(1). Full cleanup pruning runs on lifecycle/manual
-        // cleanup paths so bulk renders do not rescan every prior binding.
-        this.bindingCleanupRecords.add(storedRecord);
+        // Keep registration O(1). Full stale DOM pruning runs on drag lifecycle and
+        // explicit remeasurement paths so bulk renders do not rescan prior bindings.
+        this.staleDomBindingRecords.add(storedRecord);
         return () => {
-            if (!this.bindingCleanupRecords.delete(storedRecord)) {
+            if (!this.staleDomBindingRecords.delete(storedRecord)) {
                 return;
             }
-            record.cleanup();
+            record.release();
         };
     }
-    pruneDisconnectedBindingCleanups() {
-        this.pruneDisconnectedBindingCleanupRecords();
+    pruneDisconnectedDomBindings() {
+        this.pruneDisconnectedDomBindingRecords();
     }
-    getBindingCleanupRecordCount() {
-        return this.bindingCleanupRecords.size;
-    }
-    dispose() {
-        this.cleanup();
-        this.disposeBindingCleanupRecords();
-        for (const disposeCallback of Array.from(this.disposeCallbacks)) {
-            disposeCallback();
-        }
-        this.disposeCallbacks.clear();
-        this.subscriptions.clear();
-        this.dropTargetRegistry.clear();
-        this.lifecycleCallbacks = {};
-        this.modifiers = [];
-        this.updateOverlayHost = noopUpdateOverlayHost;
+    getStaleDomBindingRecordCount() {
+        return this.staleDomBindingRecords.size;
     }
     startDragNow(input) {
-        if (this.targetingAlgorithm.mode === "rect" && !this.hasDragOverlay) {
-            throw new Error("The selected targeting algorithm requires a drag overlay. Provide dragOverlay or use a pointer-based targeting algorithm.");
-        }
-        this.pruneDisconnectedBindingCleanups();
-        const rawPointerPosition = input.pointerPosition;
-        const activeDragModifiers = createActiveDragModifiers({
-            modifiers: this.modifiers,
-            setupInput: {
+        this.cancelPendingActivation();
+        try {
+            if (this.targetingAlgorithm.mode === "rect" && !this.hasDragOverlay) {
+                throw new Error("The selected targeting algorithm requires a drag overlay. Provide dragOverlay or use a pointer-based targeting algorithm.");
+            }
+            this.pruneDisconnectedDomBindings();
+            const rawPointerPosition = input.pointerPosition;
+            const activeDragModifiers = createActiveDragModifiers({
+                modifiers: this.modifiers,
+                setupInput: {
+                    draggableId: input.draggableId,
+                    group: input.group,
+                    sourceRect: input.sourceRect,
+                    initialPointerPosition: rawPointerPosition,
+                },
+            });
+            this.activeDragModifiers = activeDragModifiers;
+            const effectivePointerPosition = applyDragModifiers({
+                activeModifiers: activeDragModifiers,
                 draggableId: input.draggableId,
                 group: input.group,
                 sourceRect: input.sourceRect,
                 initialPointerPosition: rawPointerPosition,
-            },
-        });
-        this.activeDragModifiers = activeDragModifiers;
-        const effectivePointerPosition = applyDragModifiers({
-            activeModifiers: activeDragModifiers,
-            draggableId: input.draggableId,
-            group: input.group,
-            sourceRect: input.sourceRect,
-            initialPointerPosition: rawPointerPosition,
-            rawPointerPosition,
-        });
-        const sourceContainerId = this.dropTargetRegistry.getDropTargetRegistration(input.draggableId, input.group)?.containerId ?? null;
-        const sourceSortablePlacement = this.dropTargetRegistry.getSortableItemPlacement(input.draggableId, input.group);
-        const nextSession = {
-            status: "dragging",
-            source: input.inputType,
-            draggableId: input.draggableId,
-            group: input.group,
-            sourceRect: input.sourceRect,
-            sourceContainerId,
-            sourceSortablePlacement,
-            overlayMeasurement: null,
-            startPointerPosition: rawPointerPosition,
-            rawPointerPosition,
-            pointerPosition: effectivePointerPosition,
-            activeDropTargetId: null,
-        };
-        this.setSession(nextSession);
-        this.remeasureDropTargets({ group: input.group });
-        this.updateOverlayHost({
-            type: "mount",
-            state: {
-                dragState: this.createDragState(nextSession),
-                phase: "dragging",
-            },
-        });
-        this.suppressTextSelection();
-        if (input.inputType === "pointer") {
-            this.bindPointerWindowListeners(input.pointerId);
+                rawPointerPosition,
+            });
+            const sourceContainerId = this.dropTargetRegistry.getDropTargetRegistration(input.draggableId, input.group)?.containerId ?? null;
+            const sourceSortablePlacement = this.dropTargetRegistry.getSortableItemPlacement(input.draggableId, input.group);
+            const nextSession = {
+                status: "dragging",
+                source: input.inputType,
+                draggableId: input.draggableId,
+                group: input.group,
+                sourceRect: input.sourceRect,
+                sourceContainerId,
+                sourceSortablePlacement,
+                overlayMeasurement: null,
+                startPointerPosition: rawPointerPosition,
+                rawPointerPosition,
+                pointerPosition: effectivePointerPosition,
+                activeDropTargetId: null,
+            };
+            this.setSession(nextSession);
+            this.remeasureDropTargets({ group: input.group });
+            const dragStartEvent = {
+                draggableId: input.draggableId,
+                source: input.inputType,
+                pointerPosition: effectivePointerPosition,
+                sourceRect: input.sourceRect,
+            };
+            const startOverlayRect = this.hasDragOverlay
+                ? this.getCurrentDragRectAt(effectivePointerPosition)
+                : null;
+            const dragStartSubscriptionEvent = {
+                ...dragStartEvent,
+                placementPosition: this.getSortablePlacementPosition({
+                    pointerPosition: effectivePointerPosition,
+                    overlayRect: startOverlayRect,
+                }),
+            };
+            this.notifyDragStartSubscriptions(dragStartSubscriptionEvent);
+            this.updateOverlayHost({
+                type: "mount",
+                state: {
+                    dragState: this.createDragState(nextSession),
+                    phase: "dragging",
+                },
+            });
+            this.suppressTextSelection();
+            if (input.inputType === "pointer") {
+                this.bindPointerWindowListeners(input.pointerId);
+            }
+            else {
+                this.bindKeyboardWindowListeners();
+            }
+            this.notifyDragStartLifecycle(dragStartEvent);
         }
-        else {
-            this.bindKeyboardWindowListeners();
+        catch (error) {
+            this.releaseActiveDragResourcesAndRethrow(error);
         }
-        const dragStartEvent = {
-            draggableId: input.draggableId,
-            source: input.inputType,
-            pointerPosition: effectivePointerPosition,
-            sourceRect: input.sourceRect,
-        };
-        const startOverlayRect = this.hasDragOverlay
-            ? this.getCurrentDragRectAt(effectivePointerPosition)
-            : null;
-        this.notifyDragStart(dragStartEvent, {
-            ...dragStartEvent,
-            placementPosition: this.getSortablePlacementPosition({
-                pointerPosition: effectivePointerPosition,
-                overlayRect: startOverlayRect,
-            }),
-        });
     }
     finishDrag(input) {
-        this.pointerActivation.cancel();
+        this.cancelPendingActivation();
         const session = this.getDraggingSession();
         const releasedDragState = session
             ? this.createDragState(session)
@@ -462,7 +509,15 @@ export class DragRuntime {
             })
             : null;
         this.resetActiveDragState();
-        this.cleanupActiveDragResources();
+        let finishError;
+        let hasFinishError = false;
+        try {
+            this.releaseActiveInputResources();
+        }
+        catch (error) {
+            finishError = error;
+            hasFinishError = true;
+        }
         if (session && result) {
             this.lifecycleDropTargetRectSnapshot = lifecycleDropTargetRectSnapshot;
             try {
@@ -481,25 +536,60 @@ export class DragRuntime {
                     });
                 }
             }
+            catch (error) {
+                finishError = error;
+                hasFinishError = true;
+            }
             finally {
                 this.lifecycleDropTargetRectSnapshot = null;
             }
         }
-        if (input.keepReleasedOverlay && releasedDragState && this.hasDragOverlay) {
-            this.updateOverlayHost({
-                type: "release",
-                state: {
-                    dragState: releasedDragState,
-                    phase: "released",
-                },
+        try {
+            this.releaseOverlayAfterDrag({
+                overlayRelease: input.overlayRelease,
+                releasedDragState,
             });
         }
-        else {
-            this.updateOverlayHost({ type: "unmount" });
+        catch (error) {
+            if (!hasFinishError) {
+                finishError = error;
+                hasFinishError = true;
+            }
+        }
+        if (hasFinishError) {
+            throw finishError;
+        }
+    }
+    releaseOverlayAfterDrag(input) {
+        if (input.overlayRelease === "manual" &&
+            input.releasedDragState &&
+            this.hasDragOverlay) {
+            try {
+                this.updateOverlayHost({
+                    type: "release",
+                    state: {
+                        dragState: input.releasedDragState,
+                        phase: "released",
+                    },
+                });
+            }
+            catch (error) {
+                try {
+                    this.clearOverlayHost();
+                }
+                catch {
+                    // Preserve the overlay release error while still making a best effort
+                    // to clear the host state.
+                }
+                throw error;
+            }
+            return;
         }
+        this.clearOverlayHost();
     }
     bindPointerWindowListeners(pointerId) {
-        this.cleanupWindowListeners?.();
+        this.releaseActiveInputListeners?.();
+        let listenersReleased = false;
         const handlePointerMove = (event) => {
             if (event.pointerId !== pointerId) {
                 return;
@@ -524,25 +614,29 @@ export class DragRuntime {
         window.addEventListener("pointermove", handlePointerMove);
         window.addEventListener("pointerup", handlePointerUp);
         window.addEventListener("pointercancel", handlePointerCancel);
-        this.cleanupWindowListeners = () => {
+        this.releaseActiveInputListeners = () => {
+            if (listenersReleased) {
+                return;
+            }
+            listenersReleased = true;
             window.removeEventListener("pointermove", handlePointerMove);
             window.removeEventListener("pointerup", handlePointerUp);
             window.removeEventListener("pointercancel", handlePointerCancel);
         };
     }
     bindKeyboardWindowListeners() {
-        this.cleanupWindowListeners?.();
-        this.cleanupWindowListeners = this.keyboardDrag.bindWindowListeners();
+        this.releaseActiveInputListeners?.();
+        this.releaseActiveInputListeners = this.keyboardDrag.bindWindowListeners();
     }
     suppressTextSelection() {
-        this.cleanupTextSelectionSuppression?.();
+        this.restoreTextSelectionSuppression?.();
         const root = document.documentElement;
         const body = document.body;
         const previousRootUserSelect = root.style.userSelect;
         const previousBodyUserSelect = body.style.userSelect;
         root.style.userSelect = "none";
         body.style.userSelect = "none";
-        this.cleanupTextSelectionSuppression = () => {
+        this.restoreTextSelectionSuppression = () => {
             root.style.userSelect = previousRootUserSelect;
             body.style.userSelect = previousBodyUserSelect;
         };
@@ -552,11 +646,35 @@ export class DragRuntime {
         this.setSession({ status: "idle" });
         this.activeDragModifiers = [];
     }
-    cleanupActiveDragResources() {
-        this.cleanupWindowListeners?.();
-        this.cleanupWindowListeners = null;
-        this.cleanupTextSelectionSuppression?.();
-        this.cleanupTextSelectionSuppression = null;
+    releaseActiveInputResources() {
+        const releaseActiveInputListeners = this.releaseActiveInputListeners;
+        this.releaseActiveInputListeners = null;
+        const restoreTextSelectionSuppression = this.restoreTextSelectionSuppression;
+        this.restoreTextSelectionSuppression = null;
+        let releaseError;
+        let hasReleaseError = false;
+        try {
+            releaseActiveInputListeners?.();
+        }
+        catch (error) {
+            releaseError = error;
+            hasReleaseError = true;
+        }
+        try {
+            restoreTextSelectionSuppression?.();
+        }
+        catch (error) {
+            if (!hasReleaseError) {
+                releaseError = error;
+                hasReleaseError = true;
+            }
+        }
+        if (hasReleaseError) {
+            throw releaseError;
+        }
+    }
+    clearOverlayHost() {
+        this.updateOverlayHost({ type: "unmount" });
     }
     flushQueuedPointerUpdate() {
         if (this.pointerFrameId !== null) {
@@ -697,8 +815,8 @@ export class DragRuntime {
         const removedTargets = this.dropTargetRegistry.pruneDisconnected(group);
         this.clearActiveDropTargetIdIfRemoved(removedTargets);
     }
-    pruneDisconnectedBindingCleanupRecords(skipRecord) {
-        for (const storedRecord of Array.from(this.bindingCleanupRecords)) {
+    pruneDisconnectedDomBindingRecords(skipRecord) {
+        for (const storedRecord of Array.from(this.staleDomBindingRecords)) {
             if (storedRecord === skipRecord) {
                 continue;
             }
@@ -709,14 +827,8 @@ export class DragRuntime {
             if (!storedRecord.hasBeenConnected) {
                 continue;
             }
-            this.bindingCleanupRecords.delete(storedRecord);
-            storedRecord.record.cleanup();
-        }
-    }
-    disposeBindingCleanupRecords() {
-        for (const storedRecord of Array.from(this.bindingCleanupRecords)) {
-            this.bindingCleanupRecords.delete(storedRecord);
-            storedRecord.record.cleanup();
+            this.staleDomBindingRecords.delete(storedRecord);
+            storedRecord.record.release();
         }
     }
     clearActiveDropTargetIdIfRemoved(removedTargets) {
@@ -734,17 +846,19 @@ export class DragRuntime {
             activeDropTargetId: null,
         });
     }
-    notifyDragStart(event, subscriptionEvent) {
-        this.lifecycleCallbacks.onDragStart?.(event, this.lifecycleHelpers);
+    notifyDragStartSubscriptions(subscriptionEvent) {
         for (const subscription of Array.from(this.subscriptions)) {
             subscription.onDragStart?.(subscriptionEvent);
         }
     }
+    notifyDragStartLifecycle(event) {
+        this.lifecycleCallbacks.onDragStart?.(event, this.lifecycleHelpers);
+    }
     notifyDragUpdate(event, subscriptionEvent) {
-        this.lifecycleCallbacks.onDragUpdate?.(event, this.lifecycleHelpers);
         for (const subscription of Array.from(this.subscriptions)) {
             subscription.onDragUpdate?.(subscriptionEvent);
         }
+        this.lifecycleCallbacks.onDragUpdate?.(event, this.lifecycleHelpers);
     }
     notifyDragEnd(event) {
         for (const subscription of Array.from(this.subscriptions)) {
@@ -758,6 +872,11 @@ export class DragRuntime {
         }
         this.lifecycleCallbacks.onDrop?.(event, this.lifecycleHelpers);
     }
+    notifyActiveDragReset(event) {
+        for (const subscription of Array.from(this.subscriptions)) {
+            subscription.onActiveDragReset?.(event);
+        }
+    }
 }
 function areOverlayMeasurementsEqual(previous, next) {
     if (previous === next) {

package/dist/runtime/lifecycle.d.ts

@@ -27,6 +27,10 @@ export type DropEvent = {
     dropTargetId: string;
     sortablePlacement?: SortableDropPlacement;
 };
+export type ActiveDragResetEvent = {
+    draggableId: string;
+    source: DragSource;
+};
 export type DragLifecycleHelpers = {
     getDropTargetRect: (dropTargetId: string) => DragRect | null;
 };
@@ -41,4 +45,5 @@ export type DragRuntimeSubscription = {
     onDragUpdate?: (event: DragUpdateEvent) => void;
     onDragEnd?: (event: DragEndEvent) => void;
     onDrop?: (event: DropEvent) => void;
+    onActiveDragReset?: (event: ActiveDragResetEvent) => void;
 };

package/dist/runtime/types.d.ts

@@ -15,6 +15,7 @@ export type DragState = {
     pointerPosition: Point;
 };
 export type DragOverlayPhase = "dragging" | "released";
+export type OverlayReleaseMode = "auto" | "manual";
 export type DragOverlayRenderState = {
     dragState: DragState;
     phase: DragOverlayPhase;
@@ -50,13 +51,13 @@ export type DragRuntimeOptions = {
     targetingAlgorithm?: TargetingAlgorithm;
     targetingConstraint?: TargetingConstraint;
     hasDragOverlay?: boolean;
-    keepOverlayOnDrop?: boolean;
+    overlayRelease?: OverlayReleaseMode;
 };
 export type DragRuntimeConfigureInput = {
     targetingAlgorithm: TargetingAlgorithm;
     targetingConstraint: TargetingConstraint | undefined;
     hasDragOverlay: boolean;
-    keepOverlayOnDrop: boolean;
+    overlayRelease: OverlayReleaseMode;
     lifecycleCallbacks: DragLifecycleCallbacks;
     keyboardConfiguration?: KeyboardConfiguration;
     modifiers?: readonly DragModifierInput[];