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

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[];

package/dist/sortable/create-sortable-binding.js

@@ -30,7 +30,7 @@ export function createSortable(input) {
         input.element.addEventListener("keydown", onKeyDown);
         keyDownAttached = true;
     }
-    const cleanup = () => {
+    const releaseDomBinding = () => {
         if (cleanedUp) {
             return;
         }
@@ -49,10 +49,10 @@ export function createSortable(input) {
                 element.removeAttribute("tabindex");
             }
         }
-        behavior.cleanup();
+        behavior.releaseRegistration();
     };
-    runtime.registerBindingCleanup({
-        cleanup,
+    runtime.registerStaleDomBinding({
+        release: releaseDomBinding,
         isConnected: () => elementRef.deref()?.isConnected === true,
     });
 }

package/dist/sortable/create-sortable.d.ts

@@ -11,7 +11,7 @@ export type CreateDomSortableInput = SortableOptions & {
 };
 export type DomSortableBehavior = {
     setElement: (element: HTMLElement | null) => void;
-    cleanup: () => void;
+    releaseRegistration: () => void;
     onPointerDown: (event: DomDraggablePointerDownEvent) => void;
     onKeyDown: (event: DomDraggableKeyDownEvent) => void;
     tabIndex: 0 | undefined;

package/dist/sortable/create-sortable.js

@@ -13,7 +13,7 @@ export function createDomSortable(input) {
     });
     let registeredElementRef = null;
     let registeredDraggableId = null;
-    const cleanup = () => {
+    const releaseRegistration = () => {
         const registeredElement = registeredElementRef?.deref() ?? null;
         unregisterSortableElement({
             registry,
@@ -31,7 +31,7 @@ export function createDomSortable(input) {
                 registeredDraggableId === input.draggableId) {
                 return;
             }
-            cleanup();
+            releaseRegistration();
             if (!element) {
                 return;
             }
@@ -47,7 +47,7 @@ export function createDomSortable(input) {
             registeredElementRef = new WeakRef(element);
             registeredDraggableId = input.draggableId;
         },
-        cleanup,
+        releaseRegistration,
         onPointerDown: draggable.onPointerDown,
         onKeyDown: draggable.onKeyDown,
         tabIndex: draggable.tabIndex,

package/dist/sortable/sortable-preview.js

@@ -6,7 +6,7 @@ export function snapshotSortableElement(registry, draggableId) {
         return;
     }
     element.dataset.dndDragged = "true";
-    registry.snapshots.set(draggableId, {
+    registry.activeDrag.snapshots.set(draggableId, {
         element,
         parent: element.parentElement,
         previousSibling: element.previousSibling,
@@ -18,13 +18,13 @@ export function isSortablePreviewTarget(input) {
     return input.activeDropTargetId !== null;
 }
 export function initializeSortablePointerMovement(registry, pointerPosition) {
-    registry.pointerMovement = {
+    registry.activeDrag.pointerMovement = {
         previousPointerPosition: { ...pointerPosition },
     };
-    registry.previewPlacement = null;
+    registry.activeDrag.previewPlacement = null;
 }
 export function updateSortablePointerMovement(registry, pointerPosition) {
-    const movement = registry.pointerMovement;
+    const movement = registry.activeDrag.pointerMovement;
     if (!movement) {
         initializeSortablePointerMovement(registry, pointerPosition);
         return;
@@ -32,22 +32,22 @@ export function updateSortablePointerMovement(registry, pointerPosition) {
     movement.previousPointerPosition = { ...pointerPosition };
 }
 export function clearSortablePointerMovement(registry) {
-    registry.pointerMovement = null;
+    registry.activeDrag.pointerMovement = null;
 }
 export function clearSortablePreviewPlacement(registry) {
-    registry.previewPlacement = null;
+    registry.activeDrag.previewPlacement = null;
 }
 export function moveSortablePreview(input) {
     if (input.activeDropTargetId === null) {
         return;
     }
     const draggedElement = getRegisteredSortableElement(input.registry, input.draggedDraggableId);
-    const draggedGroup = input.registry.groups.get(input.draggedDraggableId);
+    const draggedGroup = input.registry.registration.sortableGroups.get(input.draggedDraggableId);
     if (!draggedElement || !draggedGroup) {
         return;
     }
     const activeDropTargetId = input.activeDropTargetId === input.draggedDraggableId
-        ? input.registry.previewPlacement?.activeDropTargetId
+        ? input.registry.activeDrag.previewPlacement?.activeDropTargetId
         : input.activeDropTargetId;
     if (!activeDropTargetId ||
         activeDropTargetId === input.draggedDraggableId) {
@@ -82,7 +82,7 @@ export function moveSortablePreview(input) {
             placement: null,
             movementDirection: getCurrentAxisMovementDirection({
                 placementPosition: input.placementPosition,
-                movement: input.registry.pointerMovement,
+                movement: input.registry.activeDrag.pointerMovement,
                 axis: input.options.axis,
             }),
         });
@@ -117,8 +117,8 @@ export function moveSortablePreview(input) {
         activeDropTargetId,
         targetElement,
         placementPosition: input.placementPosition,
-        movement: input.registry.pointerMovement,
-        previewPlacement: input.registry.previewPlacement,
+        movement: input.registry.activeDrag.pointerMovement,
+        previewPlacement: input.registry.activeDrag.previewPlacement,
         options: input.options,
     });
     const placement = placementDecision.placement;
@@ -201,7 +201,7 @@ export function getSortablePreviewPlacement(input) {
     };
 }
 function setSortablePreviewPlacementState(input) {
-    input.registry.previewPlacement = {
+    input.registry.activeDrag.previewPlacement = {
         activeDropTargetId: input.activeDropTargetId,
         placement: input.placement,
         movementDirection: input.movementDirection,
@@ -235,7 +235,7 @@ export function isSortablePreviewAlreadyPlaced(input) {
         : input.draggedElement.previousElementSibling === input.targetElement;
 }
 export function restoreSortableSnapshot(registry, draggableId) {
-    const snapshot = registry.snapshots.get(draggableId);
+    const snapshot = registry.activeDrag.snapshots.get(draggableId);
     if (!snapshot) {
         return false;
     }
@@ -244,7 +244,7 @@ export function restoreSortableSnapshot(registry, draggableId) {
 }
 export function clearSortableDraggedState(registry, draggableId) {
     const element = getRegisteredSortableElement(registry, draggableId) ??
-        registry.snapshots.get(draggableId)?.element;
+        registry.activeDrag.snapshots.get(draggableId)?.element;
     if (element) {
         restoreSortableDraggedAttribute({
             registry,
@@ -254,8 +254,10 @@ export function clearSortableDraggedState(registry, draggableId) {
     }
 }
 function getSortableDraggableId(registry, element) {
-    const draggableId = registry.elementIds.get(element);
-    return draggableId && registry.elements.get(draggableId)?.deref() === element
+    const draggableId = registry.registration.sortableElementIds.get(element);
+    return (draggableId &&
+        registry.registration.sortableElementRefs.get(draggableId)?.deref() ===
+            element)
         ? draggableId
         : null;
 }
@@ -299,7 +301,8 @@ function refreshSortableDropTargetMeasurements(input) {
         input.runtime.registerDropTarget(registration.id, registration.element, registration.group, {
             containerId: registration.containerId,
             sortable: registration.capabilities.sortable,
-            sortableAxis: input.registry.sortableOptions.get(registration.id)?.axis ?? "vertical",
+            sortableAxis: input.registry.registration.sortableOptions.get(registration.id)
+                ?.axis ?? "vertical",
         });
     }
 }

package/dist/sortable/sortable-registry.d.ts

@@ -58,19 +58,28 @@ export type DomSortableRuntime = DomDraggableRuntime & {
             source: "pointer" | "keyboard";
             dropTargetId: string;
         }) => void;
+        onActiveDragReset?: (event: {
+            draggableId: string;
+            source: "pointer" | "keyboard";
+        }) => void;
     }) => () => void;
-    onDispose?: (callback: () => void) => () => void;
     remeasureDropTargets: (input?: RemeasureDropTargetsInput) => void;
 };
 export type SortableRegistry = {
-    attributeSnapshots: Map<string, SortableAttributeSnapshot>;
-    elementIds: WeakMap<HTMLElement, string>;
-    elements: Map<string, WeakRef<HTMLElement>>;
-    groups: Map<string, string>;
+    registration: SortableRegistrationState;
+    activeDrag: SortableActiveDragState;
+};
+export type SortableRegistrationState = {
+    registrationAttributeSnapshots: Map<string, SortableAttributeSnapshot>;
+    sortableElementIds: WeakMap<HTMLElement, string>;
+    sortableElementRefs: Map<string, WeakRef<HTMLElement>>;
+    sortableGroups: Map<string, string>;
+    sortableOptions: Map<string, NormalizedSortableOptions>;
+};
+export type SortableActiveDragState = {
     previewPlacement: SortablePreviewPlacementState | null;
     pointerMovement: SortablePointerMovementState | null;
     snapshots: Map<string, SortableSnapshot>;
-    sortableOptions: Map<string, NormalizedSortableOptions>;
 };
 export type SortableAttributeSnapshot = {
     elementRef: WeakRef<HTMLElement>;

package/dist/sortable/sortable-registry.js

@@ -7,16 +7,20 @@ export function getSortableRegistry(runtime) {
         return existingRegistry;
     }
     const registry = {
-        attributeSnapshots: new Map(),
-        elementIds: new WeakMap(),
-        elements: new Map(),
-        groups: new Map(),
-        previewPlacement: null,
-        pointerMovement: null,
-        snapshots: new Map(),
-        sortableOptions: new Map(),
+        registration: {
+            registrationAttributeSnapshots: new Map(),
+            sortableElementIds: new WeakMap(),
+            sortableElementRefs: new Map(),
+            sortableGroups: new Map(),
+            sortableOptions: new Map(),
+        },
+        activeDrag: {
+            previewPlacement: null,
+            pointerMovement: null,
+            snapshots: new Map(),
+        },
     };
-    const unsubscribe = runtime.subscribe({
+    runtime.subscribe({
         onDragStart: (event) => {
             initializeSortablePointerMovement(registry, event.placementPosition ?? event.pointerPosition);
             snapshotSortableElement(registry, event.draggableId);
@@ -41,40 +45,51 @@ export function getSortableRegistry(runtime) {
             updateSortablePointerMovement(registry, event.placementPosition ?? event.pointerPosition);
         },
         onDragEnd: (event) => {
-            restoreSortableSnapshot(registry, event.draggableId);
-            clearSortableDraggedState(registry, event.draggableId);
-            clearSortablePointerMovement(registry);
-            clearSortablePreviewPlacement(registry);
-            registry.snapshots.delete(event.draggableId);
+            releaseSortableActiveDragState(registry, event.draggableId);
         },
         onDrop: (event) => {
-            clearSortableDraggedState(registry, event.draggableId);
-            clearSortablePointerMovement(registry);
-            clearSortablePreviewPlacement(registry);
-            registry.snapshots.delete(event.draggableId);
+            releaseSortableActiveDragState(registry, event.draggableId);
+        },
+        onActiveDragReset: (event) => {
+            releaseSortableActiveDragState(registry, event.draggableId);
         },
     });
-    const cleanupRegistry = () => {
-        unsubscribe();
-        unsubscribeDispose?.();
-        registry.elements.clear();
-        registry.groups.clear();
-        registry.pointerMovement = null;
-        registry.previewPlacement = null;
-        registry.attributeSnapshots.clear();
-        registry.snapshots.clear();
-        registry.sortableOptions.clear();
-        sortableRegistries.delete(runtime);
-    };
-    const unsubscribeDispose = runtime.onDispose?.(cleanupRegistry);
     sortableRegistries.set(runtime, registry);
     return registry;
 }
+function releaseSortableActiveDragState(registry, draggableId) {
+    let releaseError;
+    let hasReleaseError = false;
+    try {
+        restoreSortableSnapshot(registry, draggableId);
+    }
+    catch (error) {
+        releaseError = error;
+        hasReleaseError = true;
+    }
+    try {
+        clearSortableDraggedState(registry, draggableId);
+    }
+    catch (error) {
+        if (!hasReleaseError) {
+            releaseError = error;
+            hasReleaseError = true;
+        }
+    }
+    finally {
+        clearSortablePointerMovement(registry);
+        clearSortablePreviewPlacement(registry);
+        registry.activeDrag.snapshots.delete(draggableId);
+    }
+    if (hasReleaseError) {
+        throw releaseError;
+    }
+}
 export function registerSortableElement(input) {
-    const existingSnapshot = input.registry.attributeSnapshots.get(input.draggableId);
+    const existingSnapshot = input.registry.registration.registrationAttributeSnapshots.get(input.draggableId);
     const existingSnapshotElement = existingSnapshot?.elementRef.deref() ?? null;
     if (!existingSnapshot || existingSnapshotElement !== input.element) {
-        input.registry.attributeSnapshots.set(input.draggableId, {
+        input.registry.registration.registrationAttributeSnapshots.set(input.draggableId, {
             elementRef: new WeakRef(input.element),
             sortableDraggable: input.element.getAttribute("data-dnd-sortable-draggable"),
             dragged: input.element.getAttribute("data-dnd-dragged"),
@@ -82,10 +97,10 @@ export function registerSortableElement(input) {
     }
     input.element.setAttribute("data-dnd-sortable-draggable", "true");
     const normalizedOptions = normalizeSortableOptions(input.options);
-    input.registry.elementIds.set(input.element, input.draggableId);
-    input.registry.elements.set(input.draggableId, new WeakRef(input.element));
-    input.registry.groups.set(input.draggableId, input.group);
-    input.registry.sortableOptions.set(input.draggableId, normalizedOptions);
+    input.registry.registration.sortableElementIds.set(input.element, input.draggableId);
+    input.registry.registration.sortableElementRefs.set(input.draggableId, new WeakRef(input.element));
+    input.registry.registration.sortableGroups.set(input.draggableId, input.group);
+    input.registry.registration.sortableOptions.set(input.draggableId, normalizedOptions);
     input.runtime.registerDropTarget(input.draggableId, input.element, input.group, {
         containerId: input.containerId ?? null,
         sortable: true,
@@ -95,14 +110,16 @@ export function registerSortableElement(input) {
 export function unregisterSortableElement(input) {
     if (input.draggableId !== null) {
         input.runtime.unregisterDropTarget(input.draggableId, input.element ?? undefined);
-        const registeredElement = input.registry.elements.get(input.draggableId)?.deref() ?? null;
+        const registeredElement = input.registry.registration.sortableElementRefs
+            .get(input.draggableId)
+            ?.deref() ?? null;
         if (registeredElement === input.element || input.element === null) {
             if (registeredElement) {
-                input.registry.elementIds.delete(registeredElement);
+                input.registry.registration.sortableElementIds.delete(registeredElement);
             }
-            input.registry.elements.delete(input.draggableId);
-            input.registry.groups.delete(input.draggableId);
-            input.registry.sortableOptions.delete(input.draggableId);
+            input.registry.registration.sortableElementRefs.delete(input.draggableId);
+            input.registry.registration.sortableGroups.delete(input.draggableId);
+            input.registry.registration.sortableOptions.delete(input.draggableId);
         }
     }
     if (input.element) {
@@ -115,26 +132,27 @@ export function unregisterSortableElement(input) {
 }
 export function restoreSortableInternalAttributes(input) {
     const snapshot = input.draggableId
-        ? input.registry.attributeSnapshots.get(input.draggableId)
+        ? input.registry.registration.registrationAttributeSnapshots.get(input.draggableId)
         : null;
     const snapshotElement = snapshot?.elementRef.deref() ?? null;
     restoreAttribute(input.element, "data-dnd-sortable-draggable", snapshot && snapshotElement === input.element ? snapshot.sortableDraggable : null);
     restoreAttribute(input.element, "data-dnd-dragged", snapshot && snapshotElement === input.element ? snapshot.dragged : null);
     if (input.draggableId) {
-        input.registry.attributeSnapshots.delete(input.draggableId);
+        input.registry.registration.registrationAttributeSnapshots.delete(input.draggableId);
     }
 }
 export function restoreSortableDraggedAttribute(input) {
-    const snapshot = input.registry.attributeSnapshots.get(input.draggableId);
+    const snapshot = input.registry.registration.registrationAttributeSnapshots.get(input.draggableId);
     const snapshotElement = snapshot?.elementRef.deref() ?? null;
     restoreAttribute(input.element, "data-dnd-dragged", snapshot && snapshotElement === input.element ? snapshot.dragged : null);
 }
 export function getRegisteredSortableElement(registry, draggableId) {
-    const element = registry.elements.get(draggableId)?.deref() ?? null;
+    const element = registry.registration.sortableElementRefs.get(draggableId)?.deref() ?? null;
     return element?.isConnected ? element : null;
 }
 function getSortableOptions(registry, draggableId) {
-    return (registry.sortableOptions.get(draggableId) ?? normalizeSortableOptions(undefined));
+    return (registry.registration.sortableOptions.get(draggableId) ??
+        normalizeSortableOptions(undefined));
 }
 function restoreAttribute(element, attribute, value) {
     if (value === null) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mk-drag-and-drop/dom",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Headless DOM drag-and-drop primitives for draggable, droppable, sortable, and grouped interactions.",
   "license": "MIT",
   "homepage": "https://mkramer.dev",
@@ -41,6 +41,7 @@
   "files": [
     "dist"
   ],
+  "sideEffects": false,
   "devDependencies": {
     "eslint": "^8.57.0",
     "jsdom": "^24.1.3",

package/dist/runtime/drag-runtime-handle.d.ts

@@ -1,22 +0,0 @@
-import type { DragRect } from "../geometry/rects.js";
-import type { DomDraggableRuntime } from "../draggable/create-draggable.js";
-import type { DomDropContainerRuntime } from "../droppable/create-drop-container.js";
-import type { DomDroppableRuntime } from "../droppable/create-droppable.js";
-import type { DomSortableRuntime } from "../sortable/sortable-registry.js";
-import { type BindingCleanupRecord } from "./drag-runtime.js";
-import type { DragRuntimeConfigureInput, DragRuntimeOptions } from "./types.js";
-export type DragRuntimeHandleOptions = DragRuntimeOptions;
-export type DragRuntimeHandleConfigureInput = DragRuntimeConfigureInput;
-export type DragRuntimeHandle = DomDraggableRuntime & DomDroppableRuntime & DomDropContainerRuntime & DomSortableRuntime & {
-    configure: (input: DragRuntimeHandleConfigureInput) => void;
-    cleanup: () => void;
-    dispose: () => void;
-    onDispose: (callback: () => void) => () => void;
-    setOverlayRect: (overlayRect: DragRect | null) => void;
-};
-export type InternalBindingCleanupRuntime = {
-    registerBindingCleanup: (record: BindingCleanupRecord) => () => void;
-    pruneDisconnectedBindingCleanups: () => void;
-    getBindingCleanupRecordCount: () => number;
-};
-export declare function createDragRuntimeHandle(options?: DragRuntimeHandleOptions): DragRuntimeHandle;