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

package/src/drag-drop/useDragDrop.js

@@ -1,435 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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 };

package/src/drag-drop/useDragDropIndicator.js

@@ -1,182 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from "react";
-import { useDropIndicator } from "./useDropIndicator.js";
-import { dimensions, getItemById, getNextDropTarget, measureDropTargets, removeDraggedItem } from "./drop-target-utils.js";
-import { Draggable, createDropIndicator } from "./Draggable.js";
-const NOT_OVERFLOWED = ':not([data-overflowed="true"])';
-const NOT_HIDDEN = ':not([aria-hidden="true"])';
-const useDragDropIndicator = ({ orientation = "horizontal", containerRef, itemQuery = "*", selected, viewportRange })=>{
-    const dragDirectionRef = useRef(void 0);
-    const dropIndicatorRef = useRef(null);
-    const dropTargetRef = useRef(null);
-    const dropZoneRef = useRef("");
-    const isScrollable = useRef(false);
-    const dragPosRef = useRef(-1);
-    const measuredDropTargets = useRef([]);
-    const overflowMenuShowingRef = useRef(false);
-    const [showOverflow, setShowOverflow] = useState(false);
-    const [dropIndicator, setDropIndicator] = useState();
-    const { clearSpacer, positionDropIndicator } = useDropIndicator();
-    const draggedItemRef = useRef(void 0);
-    const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED}${NOT_HIDDEN},[data-overflow-indicator])`;
-    const indexOf = (dropTarget)=>measuredDropTargets.current.findIndex((d)=>d.id === dropTarget.id);
-    const reposition = (dropTarget, distance, indexShift)=>{
-        dropTarget.start += distance;
-        dropTarget.mid += distance;
-        dropTarget.end += distance;
-        if ("number" == typeof indexShift) dropTarget.currentIndex += indexShift;
-    };
-    const rangeRef = useRef(void 0);
-    rangeRef.current = viewportRange;
-    const handleScrollStart = useCallback(()=>{
-        clearSpacer();
-    }, [
-        clearSpacer
-    ]);
-    const handleScrollStop = useCallback((scrollDirection, _scrollPos, atEnd)=>{
-        const { current: container } = containerRef;
-        const { current: draggedItem } = draggedItemRef;
-        if (container && draggedItem) {
-            measuredDropTargets.current = measureDropTargets(container, orientation, fullItemQuery, rangeRef.current);
-            const { size } = draggedItem;
-            const dragPos = dragPosRef.current;
-            const midPos = dragPos + size / 2;
-            const { current: dropTargets } = measuredDropTargets;
-            const nextDropTarget = getNextDropTarget(dropTargets, midPos, size, "fwd");
-            if (nextDropTarget) atEnd && "fwd" === scrollDirection ? positionDropIndicator(dropTargets[dropTargets.length - 1], "start") : positionDropIndicator(nextDropTarget, "start");
-        }
-    }, [
-        containerRef,
-        positionDropIndicator,
-        fullItemQuery,
-        orientation
-    ]);
-    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");
-        const { current: container } = containerRef;
-        if (container && dragElement) {
-            const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
-            const { id: draggedItemId } = dragElement;
-            const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } = container;
-            isScrollable.current = scrollSize > clientSize;
-            const dropTargets = measuredDropTargets.current = measureDropTargets(container, orientation, fullItemQuery, viewportRange);
-            const draggedItem = getItemById(dropTargets, draggedItemId);
-            if (draggedItem && container) {
-                const targetIndex = indexOf(draggedItem);
-                removeDraggedItem(dropTargets, targetIndex);
-                draggedItemRef.current = draggedItem;
-                const { current: range } = rangeRef;
-                if (range?.atEnd) for(let i = 0; i < dropTargets.length; i++)reposition(dropTargets[i], draggedItem.size);
-                for(let i = targetIndex; i < dropTargets.length; i++)reposition(dropTargets[i], -draggedItem.size, -1);
-                const [dropTarget, dropZone] = draggedItem.isLast ? [
-                    dropTargets[dropTargets.length - 1],
-                    "end"
-                ] : [
-                    dropTargets[targetIndex],
-                    "start"
-                ];
-                dropTargetRef.current = dropTarget;
-                dropZoneRef.current = dropZone;
-                const dropIndicatorPosition = positionDropIndicator(dropTarget, dropZone);
-                const { top, left, width } = dropIndicatorPosition.getBoundingClientRect();
-                const dropIndicatorRect = {
-                    top: draggedItem.isLast ? range?.atEnd && !range.atStart ? top + draggedItem.size - 2 : top - 2 : top - draggedItem.size - 2,
-                    left,
-                    width,
-                    height: 2
-                };
-                setDropIndicator(/*#__PURE__*/ jsx(Draggable, {
-                    wrapperClassName: "dropIndicatorContainer",
-                    style: dropIndicatorRect,
-                    ref: dropIndicatorRef,
-                    element: createDropIndicator()
-                }));
-            }
-        }
-    }, [
-        selected,
-        containerRef,
-        orientation,
-        fullItemQuery,
-        viewportRange,
-        positionDropIndicator
-    ]);
-    const drag = useCallback((dragPos, mouseMoveDirection)=>{
-        const { current: currentDropTarget } = dropTargetRef;
-        const { current: draggedItem } = draggedItemRef;
-        if (draggedItem) {
-            if (containerRef.current) {
-                const START = "horizontal" === orientation ? "left" : "top";
-                dragPosRef.current = dragPos;
-                const { current: dropTargets } = measuredDropTargets;
-                const nextDropTarget = getNextDropTarget(dropTargets, dragPos, draggedItem.size, mouseMoveDirection);
-                if (nextDropTarget && nextDropTarget.index !== currentDropTarget?.index) {
-                    if (nextDropTarget.isOverflowIndicator) setShowOverflow(overflowMenuShowingRef.current = true);
-                    else if (dropIndicatorRef.current) {
-                        const targetIndex = indexOf(nextDropTarget);
-                        if (targetIndex === dropTargets.length - 1) {
-                            const dropTarget = dropTargets[dropTargets.length - 1];
-                            const dropIndicatorPosition = positionDropIndicator(dropTarget, "start");
-                            const dropIndicatorRect = dropIndicatorPosition.getBoundingClientRect();
-                            dropIndicatorRef.current.style[START] = `${dropIndicatorRect.top}px`;
-                        } else {
-                            const dropIndicatorPosition = positionDropIndicator(nextDropTarget, "start");
-                            const dropIndicatorRect = dropIndicatorPosition.getBoundingClientRect();
-                            dropIndicatorRef.current.style[START] = `${dropIndicatorRect.top}px`;
-                        }
-                        setShowOverflow(overflowMenuShowingRef.current = false);
-                    }
-                    dropTargetRef.current = nextDropTarget;
-                    dragDirectionRef.current = mouseMoveDirection;
-                }
-            }
-        }
-    }, [
-        containerRef,
-        orientation,
-        positionDropIndicator
-    ]);
-    const drop = useCallback(()=>{
-        clearSpacer();
-        const { current: draggedItem } = draggedItemRef;
-        const { current: dropTarget } = dropTargetRef;
-        const { current: dropZone } = dropZoneRef;
-        const { current: range } = rangeRef;
-        if (draggedItem && range && dropTarget) {
-            const { index: fromIndex } = draggedItem;
-            const dropBefore = "start" === dropZone;
-            const { index: originalDropTargetIndex, currentIndex: currentDropTargetIndex } = dropTarget;
-            dropTargetRef.current = null;
-            dragDirectionRef.current = void 0;
-            setDropIndicator(void 0);
-            setShowOverflow(false);
-            if (overflowMenuShowingRef.current) return {
-                fromIndex,
-                toIndex: -1
-            };
-            if (fromIndex < originalDropTargetIndex) return {
-                fromIndex,
-                toIndex: dropBefore ? currentDropTargetIndex : currentDropTargetIndex + 1
-            };
-            return {
-                fromIndex,
-                toIndex: dropBefore ? originalDropTargetIndex : originalDropTargetIndex + 1
-            };
-        }
-        throw Error("useDragDropIndicator drop error");
-    }, [
-        clearSpacer
-    ]);
-    const releaseDrag = useCallback(()=>{}, []);
-    return {
-        beginDrag,
-        drag,
-        drop,
-        dropIndicator,
-        handleScrollStart,
-        handleScrollStop,
-        releaseDrag,
-        revealOverflowedItems: showOverflow
-    };
-};
-export { useDragDropIndicator };