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

package/src/drag-drop/useDragDropIndicator.js

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

package/src/drag-drop/useDragDropNaturalMovement.js

@@ -0,0 +1,205 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useDragDisplacers } from "./useDragDisplacers.js";
+import { dispatchMouseEvent } from "@vuu-ui/vuu-utils";
+import { NOT_HIDDEN, NOT_OVERFLOWED, dimensions, getIndexOfDraggedItem, getItemParentContainer, getNextDropTarget, measureDropTargets } from "./drop-target-utils.js";
+const useDragDropNaturalMovement = ({ containerRef, orientation = "horizontal", itemQuery = "*", selected, viewportRange })=>{
+    const dragPositionRef = useRef({
+        direction: void 0,
+        insertionPosition: -1
+    });
+    const isScrollable = useRef(false);
+    const dragPosRef = useRef(-1);
+    const measuredDropTargets = useRef([]);
+    const overflowMenuShowingRef = useRef(false);
+    const [showOverflow, setShowOverflow] = useState(false);
+    const { clearSpacers, displaceItem, displaceLastItem, setTerminalSpacer } = useDragDisplacers(orientation);
+    const draggedItemRef = useRef(void 0);
+    const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED}${NOT_HIDDEN},.vuuOverflowContainer-OverflowIndicator)`;
+    const indexOf = (dropTarget)=>measuredDropTargets.current.findIndex((d)=>d.id === dropTarget.id);
+    const rangeRef = useRef(void 0);
+    rangeRef.current = viewportRange;
+    const handleScrollStart = useCallback((scrollDirection)=>{
+        const itemContainer = getItemParentContainer(containerRef.current, itemQuery);
+        const { current: draggedItem } = draggedItemRef;
+        if (itemContainer && draggedItem) setTerminalSpacer(itemContainer, "fwd" === scrollDirection ? "end" : "start", draggedItem.size);
+    }, [
+        containerRef,
+        itemQuery,
+        setTerminalSpacer
+    ]);
+    const handleScrollStop = useCallback((scrollDirection)=>{
+        const { current: container } = containerRef;
+        const { current: draggedItem } = draggedItemRef;
+        const { current: dragPosition } = dragPositionRef;
+        if (container && draggedItem) {
+            const dropTargets = measuredDropTargets.current = measureDropTargets(container, orientation, fullItemQuery, rangeRef.current);
+            const dropTargetAtBoundary = "fwd" === scrollDirection ? dropTargets.at(-1) : dropTargets.at(0);
+            if (dropTargetAtBoundary) {
+                const { mid, end, size, start } = dropTargetAtBoundary;
+                if ("fwd" === scrollDirection) {
+                    const draggedDropTarget = {
+                        ...draggedItem,
+                        start: Math.round(start + size),
+                        mid: Math.round(mid + size),
+                        end: Math.round(end + size)
+                    };
+                    dropTargets.push(draggedDropTarget);
+                    dragPosition.insertionPosition = dropTargetAtBoundary.index + 1;
+                } else {
+                    const draggedDropTarget = {
+                        ...draggedItem,
+                        start: Math.round(start - size),
+                        mid: Math.round(mid - size),
+                        end: Math.round(end - size)
+                    };
+                    dropTargets.unshift(draggedDropTarget);
+                    dragPosition.insertionPosition = 0;
+                }
+            }
+        }
+    }, [
+        containerRef,
+        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;
+        const { current: dragPosition } = dragPositionRef;
+        if (container && dragElement) {
+            const internalDrag = container.contains(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, draggedItemId);
+            if (internalDrag) {
+                const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
+                const draggedItem = dropTargets[indexOfDraggedItem];
+                if (draggedItem && container) {
+                    draggedItemRef.current = draggedItem;
+                    const displaceFunction = draggedItem.isLast ? displaceLastItem : displaceItem;
+                    dragPosition.insertionPosition = displaceFunction(dropTargets, draggedItem, draggedItem.size, false, "static");
+                }
+            } else {
+                const { top: dragPos, height: size } = dragElement.getBoundingClientRect();
+                const dropTarget = getNextDropTarget(dropTargets, dragPos, size, "fwd");
+                const index = dropTargets.indexOf(dropTarget);
+                const { start, end, mid } = dropTarget;
+                const draggedItem = draggedItemRef.current = {
+                    end,
+                    mid,
+                    start,
+                    isDraggedItem: true,
+                    isExternal: true,
+                    size
+                };
+                const indexOfDropTarget = dropTargets.indexOf(dropTarget);
+                dropTargets.splice(indexOfDropTarget, 0, draggedItem);
+                for(let i = index + 1; i < dropTargets.length; i++){
+                    const target = dropTargets[i];
+                    target.mid += size;
+                    target.end += size;
+                    target.start += size;
+                }
+                const displaceFunction = dropTarget.isLast ? displaceLastItem : displaceItem;
+                displaceFunction(dropTargets, dropTarget, dropTarget.size, true, "static");
+            }
+        }
+    }, [
+        containerRef,
+        displaceItem,
+        displaceLastItem,
+        fullItemQuery,
+        orientation,
+        selected,
+        viewportRange
+    ]);
+    const [showPopup, hidePopup] = useMemo(()=>{
+        let popupShowing = false;
+        const show = (dropTarget)=>{
+            if (!popupShowing) {
+                popupShowing = true;
+                const button = dropTarget.element.querySelector(".vuuPopupMenu");
+                if (button) dispatchMouseEvent(button, "click");
+            }
+        };
+        const hide = (dropTarget)=>{
+            if (popupShowing) {
+                popupShowing = false;
+                const button = dropTarget.element.querySelector(".vuuPopupMenu");
+                if (button) dispatchMouseEvent(button, "click");
+            }
+        };
+        return [
+            show,
+            hide
+        ];
+    }, []);
+    const drag = useCallback((dragPos, mouseMoveDirection)=>{
+        const { current: draggedItem } = draggedItemRef;
+        const { current: dragPosition } = dragPositionRef;
+        if (draggedItem) {
+            if (containerRef.current) {
+                dragPosRef.current = dragPos;
+                const { current: dropTargets } = measuredDropTargets;
+                const nextDropTarget = getNextDropTarget(dropTargets, dragPos, draggedItem.size, mouseMoveDirection);
+                if (nextDropTarget && !nextDropTarget.isDraggedItem) if (nextDropTarget.isOverflowIndicator) {
+                    setShowOverflow(overflowMenuShowingRef.current = true);
+                    showPopup(nextDropTarget);
+                } else {
+                    const { size } = draggedItem;
+                    const targetIndex = indexOf(nextDropTarget);
+                    const displaceFunc = targetIndex === dropTargets.length - 1 ? displaceLastItem : displaceItem;
+                    dragPosition.insertionPosition = displaceFunc(dropTargets, nextDropTarget, size, true, mouseMoveDirection);
+                    const overflowIndicator = dropTargets.at(-1);
+                    hidePopup(overflowIndicator);
+                    setShowOverflow(overflowMenuShowingRef.current = false);
+                }
+                dragPosition.direction = mouseMoveDirection;
+            }
+        }
+    }, [
+        containerRef,
+        displaceItem,
+        displaceLastItem,
+        hidePopup,
+        showPopup
+    ]);
+    const drop = useCallback(()=>{
+        clearSpacers();
+        const { current: dropTargets } = measuredDropTargets;
+        const { current: dragPosition } = dragPositionRef;
+        const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
+        const draggedItem = dropTargets[indexOfDraggedItem];
+        const { insertionPosition } = dragPosition;
+        const { index: fromIndex, isExternal } = draggedItem;
+        if (overflowMenuShowingRef.current) setShowOverflow(false);
+        dragPosition.direction = void 0;
+        dragPosition.insertionPosition = -1;
+        const isLastItem = indexOfDraggedItem === dropTargets.length - 1;
+        const toIndex = overflowMenuShowingRef.current ? -1 : fromIndex < insertionPosition && !isLastItem ? insertionPosition - 1 : insertionPosition;
+        return {
+            fromIndex,
+            toIndex,
+            isExternal
+        };
+    }, [
+        clearSpacers
+    ]);
+    const releaseDrag = useCallback(()=>{
+        clearSpacers(true);
+    }, [
+        clearSpacers
+    ]);
+    return {
+        beginDrag,
+        drag,
+        drop,
+        handleScrollStart,
+        handleScrollStop,
+        releaseDrag,
+        revealOverflowedItems: showOverflow
+    };
+};
+export { useDragDropNaturalMovement };

package/src/drag-drop/useDropIndicator.js

@@ -0,0 +1,21 @@
+import { useCallback, useMemo } from "react";
+import { createDropIndicatorPosition } from "./Draggable.js";
+const SPACER_SIZE = 0;
+const useDropIndicator = ()=>{
+    const spacer = useMemo(()=>createDropIndicatorPosition(), []);
+    const clearSpacer = useCallback(()=>spacer.remove(), [
+        spacer
+    ]);
+    const positionDropIndicator = useCallback((dropTarget, dropZone = "end")=>{
+        if ("end" === dropZone) dropTarget.element.after(spacer);
+        else dropTarget.element.before(spacer);
+        return spacer;
+    }, [
+        spacer
+    ]);
+    return {
+        positionDropIndicator,
+        clearSpacer
+    };
+};
+export { SPACER_SIZE, useDropIndicator };

package/src/drag-drop/useGlobalDragDrop.js

@@ -0,0 +1,67 @@
+import { boxContainsPoint, dispatchCustomEvent } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef } from "react";
+const useGlobalDragDrop = ({ onDragOverDropTarget, onDrop })=>{
+    const dropTargetRef = useRef(void 0);
+    const measuredDropTargetsRef = useRef(void 0);
+    const dragDropStateRef = useRef(null);
+    const mousePosRef = useRef({
+        x: 0,
+        y: 0
+    });
+    const overDropTarget = useCallback((x, y)=>{
+        const { current: dropTargets } = measuredDropTargetsRef;
+        if (dropTargets) {
+            for (const [id, measuredTarget] of Object.entries(dropTargets))if (boxContainsPoint(measuredTarget, x, y)) return id;
+        }
+    }, []);
+    const dragMouseMoveHandler = useCallback((evt)=>{
+        const { clientX, clientY } = evt;
+        const { current: dragDropState } = dragDropStateRef;
+        mousePosRef.current.x = clientX;
+        mousePosRef.current.y = clientY;
+        if (dragDropState?.draggableElement) {
+            const { draggableElement, mouseOffset } = dragDropState;
+            const dragPosX = mousePosRef.current.x - mouseOffset.x;
+            const dragPosY = mousePosRef.current.y - mouseOffset.y;
+            draggableElement.style.top = `${dragPosY}px`;
+            draggableElement.style.left = `${dragPosX}px`;
+            const dropTargetId = overDropTarget(dragPosX, dragPosY);
+            if (dropTargetId) {
+                const dropTargetWillResumeDrag = onDragOverDropTarget(dropTargetId, dragDropState);
+                if (dropTargetWillResumeDrag) {
+                    document.removeEventListener("mousemove", dragMouseMoveHandler, false);
+                    document.removeEventListener("mouseup", dragMouseUpHandler, false);
+                    dragDropStateRef.current = null;
+                    dropTargetRef.current = void 0;
+                } else dropTargetRef.current = dropTargetId;
+            } else dropTargetRef.current = void 0;
+        }
+    }, []);
+    const dragMouseUpHandler = useCallback(()=>{
+        document.removeEventListener("mousemove", dragMouseMoveHandler, false);
+        document.removeEventListener("mouseup", dragMouseUpHandler, false);
+        const { current: dragDropState } = dragDropStateRef;
+        if (dragDropState) {
+            dragDropStateRef.current = null;
+            if (dropTargetRef.current) onDrop(dropTargetRef.current, dragDropState);
+            if (dragDropState.draggableElement) dispatchCustomEvent(dragDropState.draggableElement, "vuu-dropped");
+        }
+    }, [
+        dragMouseMoveHandler,
+        onDrop
+    ]);
+    const resumeDrag = useCallback((dragDropState)=>{
+        dragDropStateRef.current = dragDropState;
+        document.addEventListener("mousemove", dragMouseMoveHandler, false);
+        document.addEventListener("mouseup", dragMouseUpHandler, false);
+        return true;
+    }, [
+        dragMouseMoveHandler,
+        dragMouseUpHandler
+    ]);
+    return {
+        measuredDropTargetsRef,
+        resumeDrag
+    };
+};
+export { useGlobalDragDrop };

package/src/drag-drop/useTransition.js

@@ -0,0 +1,11 @@
+import { useCallback } from "react";
+const animationDuration = "0.15s";
+const useTransition = ()=>{
+    const applyTransition = useCallback((element, property, value)=>{
+        element.style.cssText = `${property}: ${value};transition: ${property} ${animationDuration};`;
+    }, []);
+    return {
+        applyTransition
+    };
+};
+export { useTransition };

package/src/editable/index.js

@@ -0,0 +1 @@
+export * from "./useEditableText.js";