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

package/src/drag-drop/Draggable.css.js

@@ -1,57 +0,0 @@
-const css = `
-.vuuDraggable {
-  box-shadow: var(--salt-overlayable-shadow-drag);
-  cursor: var(--salt-draggable-grab-cursor-active);
-  opacity: .95;
-  z-index: 2000;
-  background: none;
-  position: absolute;
-}
-
-.vuuDraggable-spacer {
-  display: var(--vuuDraggable-display, inline-block);
-  height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));
-  transition: var(--vuuDraggable-transitionProp, width) .3s ease;
-  width: var(--vuuDraggable-spacer-width, 0);
-}
-
-.vuuDraggable-dropIndicatorPosition {
-  display: var(--saltDraggable-display, inline-block);
-  width: 100%;
-  height: 0;
-}
-
-.vuuDraggable-dropIndicatorContainer {
-  transition: var(--vuuDraggable-transitionProp, top) .2s ease;
-}
-
-.vuuDraggable-dropIndicator {
-  background-color: var(--salt-palette-accent-background);
-  width: 100%;
-  height: 2px;
-}
-
-.vuuDraggable-dropIndicator:before {
-  content: "";
-  background-color: var(--salt-palette-accent-background);
-  border-radius: 3px;
-  width: 6px;
-  height: 6px;
-  position: absolute;
-  top: -2px;
-  left: -3px;
-}
-
-.vuuDraggable-settling {
-  transition-property: left, top;
-  transition-duration: .15s;
-  transition-timing-function: ease-out;
-}
-
-.vuuDraggable-spacer {
-  order: 1;
-}
-
-
-`;
-export default css;

package/src/drag-drop/Draggable.js

@@ -1,77 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useForkRef } from "@salt-ds/core";
-import clsx from "clsx";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { forwardRef, useCallback, useMemo } from "react";
-import { PopupComponent, Portal } from "@vuu-ui/vuu-popups";
-import Draggable_0 from "./Draggable.css";
-const makeClassNames = (classNames)=>classNames.split(" ").map((className)=>`vuuDraggable-${className}`);
-const Draggable_Draggable = /*#__PURE__*/ forwardRef(function({ wrapperClassName, element, onDropped, onTransitionEnd, style, scale = 1 }, forwardedRef) {
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-draggable",
-        css: Draggable_0,
-        window: targetWindow
-    });
-    const handleVuuDrop = useCallback(()=>{
-        onDropped?.();
-    }, [
-        onDropped
-    ]);
-    const callbackRef = useCallback((el)=>{
-        if (el) {
-            el.innerHTML = "";
-            el.appendChild(element);
-            if (1 !== scale) el.style.transform = `scale(${scale},${scale})`;
-            el.addEventListener("vuu-dropped", handleVuuDrop);
-        }
-    }, [
-        element,
-        handleVuuDrop,
-        scale
-    ]);
-    const forkedRef = useForkRef(forwardedRef, callbackRef);
-    const position = useMemo(()=>({
-            left: 0,
-            top: 0
-        }), []);
-    return /*#__PURE__*/ jsx(Portal, {
-        children: /*#__PURE__*/ jsx(PopupComponent, {
-            anchorElement: {
-                current: document.body
-            },
-            className: "vuuPopup",
-            placement: "absolute",
-            position: position,
-            children: /*#__PURE__*/ jsx("div", {
-                className: clsx("vuuDraggable", ...makeClassNames(wrapperClassName)),
-                ref: forkedRef,
-                onTransitionEnd: onTransitionEnd,
-                style: style
-            })
-        })
-    });
-});
-const createDragSpacer = (transitioning)=>{
-    const spacer = document.createElement("div");
-    spacer.className = "vuuDraggable-spacer";
-    if (transitioning) spacer.addEventListener("transitionend", ()=>{
-        transitioning.current = false;
-    });
-    return spacer;
-};
-const createDropIndicatorPosition = ()=>{
-    const spacer = document.createElement("div");
-    spacer.className = "vuuDraggable-dropIndicatorPosition";
-    return spacer;
-};
-const createDropIndicator = (transitioning)=>{
-    const spacer = document.createElement("div");
-    spacer.className = "vuuDraggable-dropIndicator";
-    if (transitioning) spacer.addEventListener("transitionend", ()=>{
-        transitioning.current = false;
-    });
-    return spacer;
-};
-export { Draggable_Draggable as Draggable, createDragSpacer, createDropIndicator, createDropIndicatorPosition };

package/src/drag-drop/DropIndicator.css.js

@@ -1,11 +0,0 @@
-const css = `
-.vuuDropIndicator {
-  background: var(--salt-accent-background);
-  cursor: move;
-  position: absolute;
-  transform: translate(-4px);
-}
-
-
-`;
-export default css;

package/src/drag-drop/DropIndicator.js

@@ -1,28 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Portal } from "@vuu-ui/vuu-popups";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { forwardRef } from "react";
-import DropIndicator_0 from "./DropIndicator.css";
-const DropIndicator_DropIndicator = /*#__PURE__*/ forwardRef(function({ rect }, forwardedRef) {
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-drop-indicator",
-        css: DropIndicator_0,
-        window: targetWindow
-    });
-    const { left, top, width, height } = rect;
-    return /*#__PURE__*/ jsx(Portal, {
-        children: /*#__PURE__*/ jsx("div", {
-            className: "vuuDropIndicator",
-            ref: forwardedRef,
-            style: {
-                left,
-                top,
-                width,
-                height
-            }
-        })
-    });
-});
-export { DropIndicator_DropIndicator as DropIndicator };

package/src/drag-drop/drop-target-utils.js

@@ -1,199 +0,0 @@
-const LEFT_RIGHT = [
-    "left",
-    "right"
-];
-const TOP_BOTTOM = [
-    "top",
-    "bottom"
-];
-const NOT_OVERFLOWED = ":not(.wrapped)";
-const NOT_HIDDEN = ':not([aria-hidden="true"])';
-const cloneElement = (element)=>{
-    const dolly = element.cloneNode(true);
-    dolly.removeAttribute("id");
-    dolly.dataset.index = "-1";
-    return dolly;
-};
-const measureElementSizeAndPosition = (element, dimension = "width", includeAutoMargin = false)=>{
-    const pos = "width" === dimension ? "left" : "top";
-    const { [dimension]: size, [pos]: position } = element.getBoundingClientRect();
-    const { padEnd = false, padStart = false } = element.dataset;
-    const style = getComputedStyle(element);
-    const [start, end] = "width" === dimension ? LEFT_RIGHT : TOP_BOTTOM;
-    const marginStart = padStart && !includeAutoMargin ? 0 : parseInt(style.getPropertyValue(`margin-${start}`), 10);
-    const marginEnd = padEnd && !includeAutoMargin ? 0 : parseInt(style.getPropertyValue(`margin-${end}`), 10);
-    let minWidth = size;
-    const flexShrink = parseInt(style.getPropertyValue("flex-shrink"), 10);
-    if (flexShrink > 0) {
-        const flexBasis = parseInt(style.getPropertyValue("flex-basis"), 10);
-        if (!isNaN(flexBasis) && flexBasis > 0) minWidth = flexBasis;
-    }
-    return [
-        position,
-        marginStart + minWidth + marginEnd
-    ];
-};
-const DIMENSIONS = {
-    horizontal: {
-        CLIENT_POS: "clientX",
-        CLIENT_SIZE: "clientWidth",
-        CONTRA: "top",
-        CONTRA_CLIENT_POS: "clientY",
-        CONTRA_END: "bottom",
-        CONTRA_POS: "y",
-        DIMENSION: "width",
-        END: "right",
-        POS: "x",
-        SCROLL_POS: "scrollLeft",
-        SCROLL_SIZE: "scrollWidth",
-        START: "left"
-    },
-    vertical: {
-        CLIENT_POS: "clientY",
-        CLIENT_SIZE: "clientHeight",
-        CONTRA: "left",
-        CONTRA_CLIENT_POS: "clientX",
-        CONTRA_END: "right",
-        CONTRA_POS: "x",
-        DIMENSION: "height",
-        END: "bottom",
-        POS: "y",
-        SCROLL_POS: "scrollTop",
-        SCROLL_SIZE: "scrollHeight",
-        START: "top"
-    }
-};
-const dimensions = (orientation)=>DIMENSIONS[orientation];
-const getItemById = (measuredItems, id)=>{
-    const result = measuredItems.find((item)=>item.id === id);
-    if (result) return result;
-};
-const removeDraggedItem = (measuredItems, index)=>{
-    measuredItems.splice(index, 1);
-    for(let i = index; i < measuredItems.length; i++)measuredItems[i].currentIndex -= 1;
-};
-const measureDropTargets = (container, orientation, itemQuery, viewportRange, draggedItemId)=>{
-    const dragThresholds = [];
-    const { DIMENSION } = dimensions(orientation);
-    const children = Array.from(itemQuery ? container.querySelectorAll(itemQuery) : container.children);
-    const itemCount = children.length;
-    const start = "number" == typeof viewportRange?.from ? viewportRange.atEnd ? Math.max(0, viewportRange.from - 1) : viewportRange.from : 0;
-    const end = "number" == typeof viewportRange?.to ? Math.min(viewportRange.to + 2, itemCount - 1) : itemCount - 1;
-    for(let index = start; index <= end; index++){
-        const element = children[index];
-        const [start, size] = measureElementSizeAndPosition(element, DIMENSION);
-        const isLast = index === itemCount - 1;
-        const id = element.id;
-        dragThresholds.push({
-            currentIndex: index,
-            id,
-            index,
-            isDraggedItem: draggedItemId === id,
-            isLast,
-            isOverflowIndicator: "overflow" === element.dataset.index,
-            element: element,
-            start,
-            end: start + size,
-            size,
-            mid: start + size / 2
-        });
-    }
-    return dragThresholds;
-};
-const getIndexOfDraggedItem = (dropTargets)=>dropTargets.findIndex((d)=>d.isDraggedItem);
-const mutateDropTargetsSwitchDropTargetPosition = (dropTargets, direction)=>{
-    const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
-    const indexOfTarget = "fwd" === direction ? indexOfDraggedItem + 1 : indexOfDraggedItem - 1;
-    if (indexOfTarget < 0 || indexOfTarget >= dropTargets.length) throw Error("switchDropTargetPosition index out of range");
-    const draggedItem = dropTargets.at(indexOfDraggedItem);
-    const targetItem = dropTargets.at(indexOfTarget);
-    const diff = targetItem.size - draggedItem.size;
-    if ("fwd" === direction) {
-        const draggedStart = targetItem.start + diff;
-        const draggedEnd = targetItem.end;
-        const newDraggedItem = {
-            ...draggedItem,
-            start: draggedStart,
-            mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),
-            end: draggedEnd
-        };
-        const targetStart = draggedItem.start;
-        const targetEnd = draggedItem.end + diff;
-        const newTargetItem = {
-            ...targetItem,
-            start: targetStart,
-            mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),
-            end: targetEnd
-        };
-        dropTargets.splice(indexOfDraggedItem, 2, newTargetItem, newDraggedItem);
-    } else {
-        const draggedStart = targetItem.start;
-        const draggedEnd = targetItem.end - diff;
-        const newDraggedItem = {
-            ...draggedItem,
-            start: draggedStart,
-            mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),
-            end: draggedEnd
-        };
-        const targetStart = draggedItem.start - diff;
-        const targetEnd = draggedItem.end;
-        const newTargetItem = {
-            ...targetItem,
-            start: targetStart,
-            mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),
-            end: targetEnd
-        };
-        dropTargets.splice(indexOfTarget, 2, newDraggedItem, newTargetItem);
-    }
-};
-const getNextDropTarget = (dropTargets, pos, draggedItemSize, mouseMoveDirection)=>{
-    const len = dropTargets.length;
-    const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
-    const draggedItem = dropTargets[indexOfDraggedItem];
-    if ("fwd" === mouseMoveDirection) {
-        const leadingEdge = Math.round(pos + draggedItemSize);
-        for(let index = len - 1; index >= 0; index--){
-            const dropTarget = dropTargets[index];
-            if (leadingEdge > dropTarget.mid) if (draggedItem && index < indexOfDraggedItem) return draggedItem;
-            else return dropTarget;
-        }
-    } else {
-        const leadingEdge = Math.round(pos);
-        for(let index = 0; index < len; index++){
-            const dropTarget = dropTargets[index];
-            if (leadingEdge < dropTarget.mid) if (index > indexOfDraggedItem) return draggedItem;
-            else return dropTarget;
-        }
-    }
-    throw Error("no dropTarget identified");
-};
-function constrainRect(targetRect, constraintRect) {
-    const { height, left, top, width } = targetRect;
-    const { height: constrainedHeight, width: constrainedWidth } = constraintRect;
-    return {
-        height: Math.min(height, constrainedHeight),
-        left,
-        top,
-        width: Math.min(width, constrainedWidth)
-    };
-}
-const dropTargetsDebugString = (dropTargets)=>dropTargets.map((d, i)=>`\n${d.isDraggedItem ? "*" : " "}[${i}] width : ${Math.floor(d.size)}    ${Math.floor(d.start)} - ${Math.floor(d.end)} (mid ${Math.floor(d.mid)})  ${d.element?.textContent} `).join("");
-const getItemParentContainer = (container, itemQuery)=>{
-    const firstItem = container?.querySelector(`${itemQuery}:not([aria-hidden="true"])`);
-    if (firstItem) return firstItem.parentElement;
-    return null;
-};
-const getScrollableContainer = (container, itemQuery)=>{
-    const immediateParent = getItemParentContainer(container, itemQuery);
-    if (immediateParent === container) return container;
-    return immediateParent?.parentElement;
-};
-const isContainerScrollable = (scrollableContainer, orientation)=>{
-    if (null === scrollableContainer) return false;
-    {
-        const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
-        const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } = scrollableContainer;
-        return scrollSize > clientSize;
-    }
-};
-export { NOT_HIDDEN, NOT_OVERFLOWED, cloneElement, constrainRect, dimensions, dropTargetsDebugString, getIndexOfDraggedItem, getItemById, getItemParentContainer, getNextDropTarget, getScrollableContainer, isContainerScrollable, measureDropTargets, measureElementSizeAndPosition, mutateDropTargetsSwitchDropTargetPosition, removeDraggedItem };

package/src/drag-drop/index.js

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

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

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