@vuu-ui/vuu-ui-controls 2.1.18 → 2.1.19-beta.2

package/src/drag-drop/index.js

@@ -0,0 +1,6 @@
+export * from "./dragDropTypes.js";
+export * from "./DragDropProvider.js";
+export * from "./DragDropState.js";
+export * from "./useDragDrop.js";
+export * from "./drop-target-utils.js";
+export * from "./useGlobalDragDrop.js";

package/src/drag-drop/useAutoScroll.js

@@ -0,0 +1,53 @@
+import { useCallback, useRef } from "react";
+import { dimensions } from "./drop-target-utils.js";
+const useAutoScroll = ({ containerRef, onScrollingStopped, orientation = "vertical" })=>{
+    const scrollTimer = useRef(null);
+    const isScrolling = useRef(false);
+    const scrollPosRef = useRef(0);
+    const lastScrollDirectionRef = useRef("fwd");
+    const stopScrolling = useCallback((atEnd = false)=>{
+        if (null !== scrollTimer.current) {
+            clearTimeout(scrollTimer.current);
+            scrollTimer.current = null;
+        }
+        isScrolling.current = false;
+        onScrollingStopped?.(lastScrollDirectionRef.current, scrollPosRef.current, atEnd);
+    }, [
+        onScrollingStopped
+    ]);
+    const startScrolling = useCallback((direction, scrollRate, scrollUnit = 100)=>{
+        const { current: container } = containerRef;
+        if (container) {
+            const { SCROLL_POS, SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
+            const { [SCROLL_POS]: scrollPos, [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } = container;
+            const maxScroll = "fwd" === direction ? scrollSize - clientSize - scrollPos : scrollPos;
+            const nextScroll = Math.min(maxScroll, scrollUnit);
+            if ("fwd" === direction) {
+                lastScrollDirectionRef.current = "fwd";
+                container[SCROLL_POS] = scrollPosRef.current = scrollPos + nextScroll;
+            } else {
+                lastScrollDirectionRef.current = "bwd";
+                container[SCROLL_POS] = scrollPosRef.current = scrollPos - nextScroll;
+            }
+            if (nextScroll === maxScroll) requestAnimationFrame(()=>{
+                stopScrolling(true);
+            });
+            else {
+                isScrolling.current = true;
+                scrollTimer.current = window.setTimeout(()=>{
+                    startScrolling(direction, scrollRate, scrollUnit);
+                }, 100);
+            }
+        }
+    }, [
+        containerRef,
+        orientation,
+        stopScrolling
+    ]);
+    return {
+        isScrolling,
+        startScrolling,
+        stopScrolling
+    };
+};
+export { useAutoScroll };

package/src/drag-drop/useDragDisplacers.js

@@ -0,0 +1,126 @@
+import { useCallback, useMemo, useRef } from "react";
+import { createDragSpacer } from "./Draggable.js";
+import { mutateDropTargetsSwitchDropTargetPosition } from "./drop-target-utils.js";
+const useDragDisplacers = (orientation = "horizontal")=>{
+    const animationFrame = useRef(0);
+    const transitioning = useRef(false);
+    const spacers = useMemo(()=>[
+            createDragSpacer(transitioning),
+            createDragSpacer()
+        ], []);
+    const animateTransition = useCallback((size, propertyName = "width")=>{
+        const [spacer1, spacer2] = spacers;
+        animationFrame.current = requestAnimationFrame(()=>{
+            transitioning.current = true;
+            spacer1.style.cssText = `${propertyName}: 0px`;
+            spacer2.style.cssText = `${propertyName}: ${size}px`;
+            spacers[0] = spacer2;
+            spacers[1] = spacer1;
+        });
+    }, [
+        spacers
+    ]);
+    const clearSpacers = useCallback((useTransition = false)=>{
+        if (true === useTransition) {
+            const [spacer] = spacers;
+            const cleanup = ()=>{
+                spacer.removeEventListener("transitionend", cleanup);
+                clearSpacers();
+            };
+            const propertyName = "horizontal" === orientation ? "width" : "height";
+            spacer.addEventListener("transitionend", cleanup);
+            animateTransition(0, propertyName);
+        } else spacers.forEach((spacer)=>spacer.remove());
+    }, [
+        animateTransition,
+        orientation,
+        spacers
+    ]);
+    const setTerminalSpacer = useCallback((container, position, size)=>{
+        clearSpacers();
+        const propertyName = "horizontal" === orientation ? "width" : "height";
+        const [spacer] = spacers;
+        spacer.style.cssText = `${propertyName}: ${size}px`;
+        if ("start" === position) container.firstChild?.before(spacer);
+        else container.lastChild?.after(spacer);
+    }, [
+        clearSpacers,
+        orientation,
+        spacers
+    ]);
+    const cancelAnyPendingAnimation = useCallback(()=>{
+        if (animationFrame.current) {
+            cancelAnimationFrame(animationFrame.current);
+            animationFrame.current = 0;
+        }
+    }, []);
+    const displaceItem = useCallback((dropTargets, dropTarget, size, useTransition = false, direction = "static")=>{
+        if (dropTarget) {
+            const propertyName = "horizontal" === orientation ? "width" : "height";
+            const [spacer1, spacer2] = spacers;
+            cancelAnyPendingAnimation();
+            if (useTransition) {
+                if (transitioning.current) {
+                    clearSpacers();
+                    spacer1.style.cssText = `${propertyName}: ${size}px`;
+                    spacer2.style.cssText = `${propertyName}: 0px`;
+                    if ("fwd" === direction) {
+                        dropTarget.element.before(spacer1);
+                        dropTarget.element.after(spacer2);
+                    } else {
+                        dropTarget.element.after(spacer1);
+                        dropTarget.element.before(spacer2);
+                    }
+                } else if ("fwd" === direction) dropTarget.element.after(spacer2);
+                else dropTarget.element.before(spacer2);
+                animateTransition(size, propertyName);
+            } else if ("static" === direction) {
+                spacer1.style.cssText = `${propertyName}: ${size}px`;
+                dropTarget.element.before(spacer1);
+            } else throw Error("useDragDisplacers currently only supports noTransition for static displacement");
+            if ("static" !== direction) mutateDropTargetsSwitchDropTargetPosition(dropTargets, direction);
+            return "bwd" === direction ? dropTarget.index : dropTarget.index + 1;
+        }
+        return -1;
+    }, [
+        animateTransition,
+        cancelAnyPendingAnimation,
+        clearSpacers,
+        orientation,
+        spacers
+    ]);
+    const displaceLastItem = useCallback((dropTargets, dropTarget, size, useTransition = false, direction = "static")=>{
+        const propertyName = "horizontal" === orientation ? "width" : "height";
+        const [spacer1, spacer2] = spacers;
+        cancelAnyPendingAnimation();
+        if (useTransition) {
+            if (transitioning.current) {
+                clearSpacers();
+                spacer1.style.cssText = `${propertyName}: ${size}px`;
+                spacer2.style.cssText = `${propertyName}: 0px`;
+                dropTarget.element.before(spacer1);
+                dropTarget.element.after(spacer2);
+            } else if ("fwd" === direction) dropTarget.element.after(spacer2);
+            else dropTarget.element.before(spacer2);
+            animateTransition(size, propertyName);
+        } else {
+            spacer1.style.cssText = `${propertyName}: ${size}px`;
+            dropTarget.element.after(spacer1);
+        }
+        if ("static" !== direction) mutateDropTargetsSwitchDropTargetPosition(dropTargets, direction);
+        return dropTarget.index;
+    }, [
+        animateTransition,
+        cancelAnyPendingAnimation,
+        clearSpacers,
+        orientation,
+        spacers
+    ]);
+    return {
+        displaceItem,
+        displaceLastItem,
+        clearSpacers,
+        setTerminalSpacer
+    };
+};
+export { useDragDisplacers };

package/src/drag-drop/useDragDrop.js

@@ -0,0 +1,435 @@
+import { jsx } from "react/jsx-runtime";
+import { dispatchCustomEvent } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useDragDropProvider } from "./DragDropProvider.js";
+import { DragDropState } from "./DragDropState.js";
+import { Draggable } from "./Draggable.js";
+import { NOT_OVERFLOWED, cloneElement, constrainRect, dimensions, getScrollableContainer, isContainerScrollable } from "./drop-target-utils.js";
+import { useAutoScroll } from "./useAutoScroll.js";
+import { NULL_DROP_OPTIONS, useDragDropCopy } from "./useDragDropCopy.js";
+import { useDragDropIndicator } from "./useDragDropIndicator.js";
+import { useDragDropNaturalMovement } from "./useDragDropNaturalMovement.js";
+import { isOverflowElement } from "../utils/index.js";
+const NULL_DRAG_DROP_RESULT = {
+    beginDrag: ()=>void 0,
+    drag: ()=>void 0,
+    draggableRef: {
+        current: null
+    },
+    drop: ()=>NULL_DROP_OPTIONS,
+    isDragging: false,
+    isScrolling: false,
+    handleScrollStart: ()=>void 0,
+    handleScrollStop: ()=>void 0,
+    revealOverflowedItems: false
+};
+const UNBOUNDED = {
+    start: 0,
+    end: 1000,
+    contraStart: 0,
+    contraEnd: 1000
+};
+const noDragDrop = ()=>NULL_DRAG_DROP_RESULT;
+const dragThreshold = 3;
+const getDraggableElement = (el, query)=>el?.closest(query);
+const getLastElement = (container, itemQuery)=>{
+    const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED},.vuuOverflowContainer-OverflowIndicator)`;
+    const childElements = Array.from(container.querySelectorAll(fullItemQuery));
+    const lastElement = childElements.pop();
+    return [
+        lastElement,
+        isOverflowElement(lastElement)
+    ];
+};
+const useDragDrop = ({ allowDragDrop, containerRef, draggableClassName, getDragPayload, id, itemQuery = "*", onDragStart, onDrop, onDropSettle, orientation, scrollingContainerRef, ...dragDropProps })=>{
+    const dragBoundaries = useRef({
+        start: 0,
+        end: 0,
+        contraStart: 0,
+        contraEnd: 0
+    });
+    const [draggableStatus, setDraggableStatus] = useState({
+        draggable: void 0,
+        draggedItemIndex: -1,
+        isDragging: false
+    });
+    const dragDropStateRef = useRef(null);
+    const mouseDownTimer = useRef(null);
+    const isScrollableRef = useRef(false);
+    const mousedownElementRef = useRef(null);
+    const mousePosRef = useRef({
+        x: 0,
+        y: 0
+    });
+    const startPosRef = useRef({
+        x: 0,
+        y: 0
+    });
+    const settlingItemRef = useRef(null);
+    const scrollableContainerRef = useRef(null);
+    const dropPosRef = useRef(-1);
+    const dropIndexRef = useRef(-1);
+    const handleScrollStopRef = useRef(void 0);
+    const { isDragSource, isDropTarget, onDragOut, onEndOfDragOperation, register } = useDragDropProvider(id);
+    const dragMouseMoveHandlerRef = useRef(void 0);
+    const dragMouseUpHandlerRef = useRef(void 0);
+    const attachDragHandlers = useCallback(()=>{
+        const { current: dragMove } = dragMouseMoveHandlerRef;
+        const { current: dragUp } = dragMouseUpHandlerRef;
+        if (dragMove && dragUp) {
+            document.addEventListener("mousemove", dragMove, false);
+            document.addEventListener("mouseup", dragUp, false);
+        }
+    }, []);
+    const removeDragHandlers = useCallback(()=>{
+        const { current: dragMove } = dragMouseMoveHandlerRef;
+        const { current: dragUp } = dragMouseUpHandlerRef;
+        if (dragMove && dragUp) {
+            document.removeEventListener("mousemove", dragMove, false);
+            document.removeEventListener("mouseup", dragUp, false);
+        }
+    }, []);
+    const setDragBoundaries = useCallback((containerRect, draggableRect)=>{
+        const { current: container } = containerRef;
+        if (container) {
+            const [lastElement, lastItemIsOverflowIndicator] = getLastElement(container, itemQuery);
+            const { CONTRA, CONTRA_END, DIMENSION, END, START } = dimensions(orientation);
+            const draggableSize = draggableRect[DIMENSION];
+            const { [START]: lastItemStart, [END]: lastItemEnd } = lastElement.getBoundingClientRect();
+            dragBoundaries.current.start = containerRect[START];
+            dragBoundaries.current.end = lastItemIsOverflowIndicator ? Math.max(lastItemStart, containerRect.right - draggableSize) : isScrollableRef.current ? containerRect[START] + containerRect[DIMENSION] - draggableSize : lastItemEnd - draggableSize;
+            dragBoundaries.current.contraStart = containerRect[CONTRA];
+            dragBoundaries.current.contraEnd = containerRect[CONTRA_END];
+        }
+    }, [
+        containerRef,
+        itemQuery,
+        orientation
+    ]);
+    const terminateDrag = useCallback(()=>{
+        const { current: settlingItem } = settlingItemRef;
+        settlingItemRef.current = null;
+        const { current: toIndex } = dropIndexRef;
+        const droppedItem = containerRef.current?.querySelector(`${itemQuery}[data-index="${toIndex}"]`);
+        if (droppedItem) droppedItem.classList.remove("vuuDropTarget-settling");
+        dropIndexRef.current = -1;
+        onDropSettle?.(toIndex);
+        setDraggableStatus((status)=>({
+                ...status,
+                draggable: void 0
+            }));
+        if (settlingItem) dispatchCustomEvent(settlingItem, "vuu-dropped");
+    }, [
+        containerRef,
+        itemQuery,
+        onDropSettle
+    ]);
+    const getScrollDirection = useCallback((mousePos)=>{
+        if (scrollableContainerRef.current && dragDropStateRef.current) {
+            const { mouseOffset } = dragDropStateRef.current;
+            const { POS, SCROLL_POS, SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
+            const { [SCROLL_POS]: scrollPos, [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } = scrollableContainerRef.current;
+            const maxScroll = scrollSize - clientSize;
+            const canScrollFwd = scrollPos < maxScroll;
+            const viewportEnd = dragBoundaries.current.end;
+            const bwd = scrollPos > 0 && mousePos - mouseOffset[POS] <= dragBoundaries.current.start;
+            const fwd = canScrollFwd && mousePos - mouseOffset[POS] >= viewportEnd;
+            return bwd ? "bwd" : fwd ? "fwd" : "";
+        }
+    }, [
+        scrollableContainerRef,
+        orientation
+    ]);
+    const useDragDropHook = true === allowDragDrop || "natural-movement" === allowDragDrop ? useDragDropNaturalMovement : "drop-indicator" === allowDragDrop ? useDragDropIndicator : "drag-copy" === allowDragDrop ? useDragDropCopy : noDragDrop;
+    const onScrollingStopped = useCallback((scrollDirection, scrollPos, atEnd)=>{
+        handleScrollStopRef.current?.(scrollDirection, scrollPos, atEnd);
+    }, []);
+    const { isScrolling, startScrolling, stopScrolling } = useAutoScroll({
+        containerRef: scrollableContainerRef,
+        onScrollingStopped,
+        orientation
+    });
+    const handleDrop = useCallback((options)=>{
+        dropPosRef.current = options.toIndex;
+        if (options.isExternal) onDrop?.({
+            ...options,
+            payload: dragDropStateRef.current?.payload
+        });
+        else onDrop?.(options);
+        dropIndexRef.current = options.toIndex;
+        if (id) onEndOfDragOperation?.(id);
+        dragDropStateRef.current = null;
+    }, [
+        id,
+        onDrop,
+        onEndOfDragOperation
+    ]);
+    const { beginDrag, drag, drop, handleScrollStart, handleScrollStop, releaseDrag, ...dragResult } = useDragDropHook({
+        ...dragDropProps,
+        containerRef,
+        isDragSource,
+        isDropTarget,
+        itemQuery,
+        orientation
+    });
+    handleScrollStopRef.current = handleScrollStop;
+    const dragHandedOvertoProvider = useCallback((dragDistance, clientContraPos)=>{
+        const { CONTRA_POS } = dimensions(orientation);
+        const lastClientContraPos = mousePosRef.current[CONTRA_POS];
+        const dragOutDistance = isDragSource ? Math.abs(lastClientContraPos - clientContraPos) : 0;
+        if (true === allowDragDrop && !isDragSource && !isDropTarget) return false;
+        const handoverToProvider = false === isDropTarget || dragOutDistance - dragDistance > 5;
+        if (dragDropStateRef.current && handoverToProvider) {
+            if (onDragOut?.(id, dragDropStateRef.current)) {
+                removeDragHandlers();
+                releaseDrag?.();
+                dragDropStateRef.current = null;
+            }
+            dragBoundaries.current = UNBOUNDED;
+            return true;
+        }
+    }, [
+        allowDragDrop,
+        id,
+        isDragSource,
+        isDropTarget,
+        onDragOut,
+        orientation,
+        releaseDrag,
+        removeDragHandlers
+    ]);
+    const dragMouseMoveHandler = useCallback((evt)=>{
+        const { CLIENT_POS, CONTRA_CLIENT_POS, POS } = dimensions(orientation);
+        const { clientX, clientY } = evt;
+        const { [CLIENT_POS]: clientPos, [CONTRA_CLIENT_POS]: clientContraPos } = evt;
+        const lastClientPos = mousePosRef.current[POS];
+        const dragDistance = Math.abs(lastClientPos - clientPos);
+        const { current: dragDropState } = dragDropStateRef;
+        const { current: boundary } = dragBoundaries;
+        if (dragHandedOvertoProvider(dragDistance, clientContraPos)) return;
+        mousePosRef.current.x = clientX;
+        mousePosRef.current.y = clientY;
+        if (dragDropState) {
+            const { draggableElement, mouseOffset } = dragDropState;
+            if (dragBoundaries.current === UNBOUNDED && draggableElement) {
+                const dragPosX = mousePosRef.current.x - mouseOffset.x;
+                const dragPosY = mousePosRef.current.y - mouseOffset.y;
+                draggableElement.style.top = `${dragPosY}px`;
+                draggableElement.style.left = `${dragPosX}px`;
+            } else if (dragDistance > 0 && draggableElement) {
+                const mouseMoveDirection = lastClientPos < clientPos ? "fwd" : "bwd";
+                const scrollDirection = getScrollDirection(clientPos);
+                const dragPos = mousePosRef.current[POS] - mouseOffset[POS];
+                const START = "horizontal" === orientation ? "left" : "top";
+                if (scrollDirection && isScrollableRef.current && !isScrolling.current) {
+                    handleScrollStart?.(scrollDirection);
+                    startScrolling(scrollDirection, 1);
+                    if ("fwd" === scrollDirection) draggableElement.style[START] = `${boundary.end}px`;
+                    else draggableElement.style[START] = `${boundary.start}px`;
+                } else if (!scrollDirection && isScrolling.current) stopScrolling();
+                if (!isScrolling.current) {
+                    const renderDragPos = Math.round(Math.max(boundary.start, Math.min(boundary.end, dragPos)));
+                    draggableElement.style[START] = `${renderDragPos}px`;
+                    drag(renderDragPos, mouseMoveDirection);
+                }
+            }
+        }
+    }, [
+        drag,
+        dragHandedOvertoProvider,
+        getScrollDirection,
+        handleScrollStart,
+        isScrolling,
+        orientation,
+        startScrolling,
+        stopScrolling
+    ]);
+    const dragMouseUpHandler = useCallback(()=>{
+        removeDragHandlers();
+        if (dragDropStateRef.current) settlingItemRef.current = dragDropStateRef.current.draggableElement;
+        const dropOptions = drop();
+        handleDrop(dropOptions);
+        setDraggableStatus((status)=>({
+                ...status,
+                draggedItemIndex: -1,
+                isDragging: false
+            }));
+    }, [
+        drop,
+        handleDrop,
+        removeDragHandlers
+    ]);
+    dragMouseMoveHandlerRef.current = dragMouseMoveHandler;
+    dragMouseUpHandlerRef.current = dragMouseUpHandler;
+    const resumeDrag = useCallback((dragDropState)=>{
+        dragDropStateRef.current = dragDropState;
+        const { draggableElement, mouseOffset } = dragDropState;
+        const { current: container } = containerRef;
+        if (!container || !draggableElement) return false;
+        {
+            const containerRect = container.getBoundingClientRect();
+            const draggableRect = draggableElement.getBoundingClientRect();
+            setDragBoundaries(containerRect, draggableRect);
+            mousePosRef.current.x = draggableRect.left + mouseOffset.x;
+            mousePosRef.current.y = draggableRect.top + mouseOffset.y;
+            beginDrag(draggableElement);
+            attachDragHandlers();
+            return true;
+        }
+    }, [
+        attachDragHandlers,
+        beginDrag,
+        containerRef,
+        setDragBoundaries
+    ]);
+    const dragStart = useCallback((mousePosition)=>{
+        const { current: container } = containerRef;
+        const { current: target } = mousedownElementRef;
+        const dragElement = getDraggableElement(target, itemQuery);
+        const scrollableContainer = scrollingContainerRef?.current ?? getScrollableContainer(container, itemQuery);
+        if (container && scrollableContainer && dragElement) {
+            isScrollableRef.current = isContainerScrollable(scrollableContainer, orientation);
+            scrollableContainerRef.current = scrollableContainer;
+            const containerRect = scrollableContainer.getBoundingClientRect();
+            const draggableRect = dragElement.getBoundingClientRect();
+            const dragDropState = dragDropStateRef.current = new DragDropState(mousePosition, dragElement);
+            setDragBoundaries(containerRect, draggableRect);
+            beginDrag(dragElement);
+            const { dataset: { index = "-1" } } = dragElement;
+            setDraggableStatus({
+                isDragging: true,
+                draggable: /*#__PURE__*/ jsx(Draggable, {
+                    element: cloneElement(dragElement),
+                    onDropped: terminateDrag,
+                    onTransitionEnd: terminateDrag,
+                    ref: dragDropState.setDraggable,
+                    style: constrainRect(draggableRect, containerRect),
+                    wrapperClassName: draggableClassName
+                }),
+                draggedItemIndex: parseInt(index)
+            });
+            onDragStart?.(dragDropState);
+            attachDragHandlers();
+            mousedownElementRef.current = null;
+        }
+    }, [
+        attachDragHandlers,
+        beginDrag,
+        containerRef,
+        draggableClassName,
+        itemQuery,
+        onDragStart,
+        orientation,
+        scrollingContainerRef,
+        setDragBoundaries,
+        terminateDrag
+    ]);
+    const preDragMouseMoveHandler = useCallback((evt)=>{
+        const { current: mouseDownPosition } = startPosRef;
+        const { CLIENT_POS, POS } = dimensions(orientation);
+        const { [CLIENT_POS]: clientPos } = evt;
+        const mouseMoveDistance = Math.abs(clientPos - mouseDownPosition[POS]);
+        if (mouseMoveDistance > dragThreshold && containerRef.current) {
+            if (mouseDownTimer.current) {
+                window.clearTimeout(mouseDownTimer.current);
+                mouseDownTimer.current = null;
+            }
+            document.removeEventListener("mousemove", preDragMouseMoveHandler);
+            document.removeEventListener("mouseup", preDragMouseUpHandler, false);
+            const mousePosition = {
+                clientX: mouseDownPosition.x,
+                clientY: mouseDownPosition.y
+            };
+            dragStart(mousePosition);
+        }
+    }, [
+        containerRef,
+        beginDrag,
+        orientation
+    ]);
+    const preDragMouseUpHandler = useCallback(()=>{
+        if (mouseDownTimer.current) {
+            window.clearTimeout(mouseDownTimer.current);
+            mouseDownTimer.current = null;
+        }
+        document.removeEventListener("mousemove", preDragMouseMoveHandler, false);
+        document.removeEventListener("mouseup", preDragMouseUpHandler, false);
+    }, [
+        preDragMouseMoveHandler
+    ]);
+    const mouseDownHandler = useCallback((evt)=>{
+        if (0 !== evt.button) return;
+        const { current: container } = containerRef;
+        evt.stopPropagation();
+        if (container && !evt.defaultPrevented) {
+            const { clientX, clientY } = evt;
+            mousePosRef.current.x = startPosRef.current.x = clientX;
+            mousePosRef.current.y = startPosRef.current.y = clientY;
+            mousedownElementRef.current = evt.target;
+            const mousePosition = {
+                clientX,
+                clientY
+            };
+            document.addEventListener("mousemove", preDragMouseMoveHandler, false);
+            document.addEventListener("mouseup", preDragMouseUpHandler, false);
+            evt.persist();
+            mouseDownTimer.current = window.setTimeout(()=>{
+                document.removeEventListener("mousemove", preDragMouseMoveHandler, false);
+                document.removeEventListener("mouseup", preDragMouseUpHandler, false);
+                dragStart(mousePosition);
+            }, 500);
+        }
+    }, [
+        containerRef,
+        dragStart,
+        preDragMouseMoveHandler,
+        preDragMouseUpHandler
+    ]);
+    const { current: settlingItem } = settlingItemRef;
+    useLayoutEffect(()=>{
+        if (settlingItem && containerRef.current) {
+            const dropPos = dropPosRef.current;
+            const droppedItem = containerRef.current.querySelector(`${itemQuery}[data-index="${dropPos}"]`);
+            if (droppedItem) {
+                droppedItem.classList.add("vuuDropTarget-settling");
+                requestAnimationFrame(()=>{
+                    const { top: targetTop, left: targetLeft } = droppedItem.getBoundingClientRect();
+                    const style = getComputedStyle(settlingItem);
+                    const currentLeft = parseInt(style.getPropertyValue("left"));
+                    const currentTop = parseInt(style.getPropertyValue("top"));
+                    if (currentLeft !== targetLeft || currentTop !== targetTop) {
+                        settlingItem.classList.add("vuuDraggable-settling");
+                        settlingItem.style.top = `${targetTop}px`;
+                        settlingItem.style.left = `${targetLeft}px`;
+                    } else terminateDrag();
+                });
+            } else setDraggableStatus((status)=>({
+                    ...status,
+                    draggable: void 0
+                }));
+        }
+    }, [
+        containerRef,
+        itemQuery,
+        settlingItem,
+        terminateDrag
+    ]);
+    useEffect(()=>{
+        if (id && (isDragSource || isDropTarget)) register(id, "drop-only" === allowDragDrop ? false : resumeDrag, onDrop);
+    }, [
+        allowDragDrop,
+        id,
+        isDragSource,
+        isDropTarget,
+        onDrop,
+        register,
+        resumeDrag
+    ]);
+    return {
+        ...dragResult,
+        ...draggableStatus,
+        isScrolling,
+        onMouseDown: allowDragDrop && "drop-only" !== allowDragDrop ? mouseDownHandler : void 0
+    };
+};
+export { useDragDrop };

package/src/drag-drop/useDragDropCopy.js

@@ -0,0 +1,22 @@
+import { useCallback, useRef } from "react";
+const NULL_DROP_OPTIONS = {
+    fromIndex: -1,
+    toIndex: -1
+};
+const useDragDropCopy = ({ selected, viewportRange })=>{
+    const rangeRef = useRef(void 0);
+    rangeRef.current = viewportRange;
+    const beginDrag = useCallback((dragElement)=>{
+        if (dragElement.ariaSelected && Array.isArray(selected) && selected.length > 1) console.log("its a selected element, and we have a multi select");
+    }, [
+        selected
+    ]);
+    const drag = useCallback(()=>void 0, []);
+    const drop = useCallback(()=>NULL_DROP_OPTIONS, []);
+    return {
+        beginDrag,
+        drag,
+        drop
+    };
+};
+export { NULL_DROP_OPTIONS, useDragDropCopy };