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

package/src/date-picker/DatePickerPanel.css.js

@@ -0,0 +1,25 @@
+const css = `
+.saltDatePickerPanel {
+  background: var(--salt-container-primary-background);
+  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  z-index: var(--salt-zIndex-flyover);
+  box-shadow: var(--salt-overlayable-shadow-popout);
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner, 0);
+  display: flex;
+  position: relative;
+  overflow: hidden auto;
+}
+
+.saltDatePickerPanel-container {
+  gap: 1px;
+  width: min-content;
+}
+
+.saltDatePickerPanel-header {
+  padding: var(--salt-spacing-100);
+}
+
+
+`;
+export default css;

package/src/date-picker/DatePickerPanel.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { endOfMonth, startOfMonth } from "@internationalized/date";
+import { FlexItem, FlexLayout, FormFieldContext, FormFieldHelperText, StackLayout, makePrefixer, useFloatingComponent, useFormFieldProps } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
+import { forwardRef, useEffect, useState } from "react";
+import { Calendar, isRangeOrOffsetSelectionWithStartDate } from "../calendar/index.js";
+import { useDatePickerContext } from "./DatePickerContext.js";
+import DatePickerPanel_0 from "./DatePickerPanel.css";
+const withBaseName = makePrefixer("saltDatePickerPanel");
+function getHoveredDate(date, compact, hoveredDate) {
+    return date && !compact && hoveredDate && hoveredDate.compare(endOfMonth(date)) > 0 ? endOfMonth(date) : hoveredDate;
+}
+const DatePickerPanel_DatePickerPanel = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { className, onSelect, helperText, CalendarProps, visibleMonths, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "salt-date-picker-panel",
+        css: DatePickerPanel_0,
+        window: targetWindow
+    });
+    const { Component: FloatingComponent } = useFloatingComponent();
+    const [hoveredDate, setHoveredDate] = useState(null);
+    const { openState, selectedDate, setSelectedDate, startVisibleMonth, setStartVisibleMonth, endVisibleMonth, setEndVisibleMonth, setOpen, context, getPanelPosition, selectionVariant } = useDatePickerContext();
+    const { a11yProps } = useFormFieldProps();
+    const isRangePicker = isRangeOrOffsetSelectionWithStartDate(selectedDate) || "range" === selectionVariant && void 0 === selectedDate;
+    const compact = 1 === visibleMonths;
+    const setRangeDate = (event, newDate)=>{
+        setSelectedDate(newDate);
+        onSelect?.(event, newDate);
+        if (newDate.startDate && newDate.endDate) setOpen(false);
+    };
+    const setSingleDate = (event, newDate)=>{
+        setSelectedDate(newDate);
+        onSelect?.(event, newDate);
+        setOpen(false);
+    };
+    const handleHoveredDateChange = (_, newHoveredDate)=>{
+        setHoveredDate(newHoveredDate);
+    };
+    useEffect(()=>{
+        if (isRangePicker) {
+            if (selectedDate?.startDate) {
+                setStartVisibleMonth(selectedDate.startDate);
+                setEndVisibleMonth(selectedDate.startDate.add({
+                    months: 1
+                }));
+            }
+        } else setStartVisibleMonth(selectedDate);
+    }, [
+        isRangePicker,
+        selectedDate,
+        setEndVisibleMonth,
+        setStartVisibleMonth
+    ]);
+    const firstCalendarProps = isRangePicker ? {
+        selectionVariant: "range",
+        hoveredDate: getHoveredDate(selectedDate?.startDate, compact, hoveredDate),
+        onHoveredDateChange: handleHoveredDateChange,
+        selectedDate: selectedDate,
+        onSelectedDateChange: setRangeDate,
+        maxDate: !compact && selectedDate?.startDate ? endOfMonth(selectedDate?.startDate) : void 0,
+        hideOutOfRangeDates: true
+    } : {
+        selectionVariant: "default",
+        selectedDate: selectedDate,
+        onSelectedDateChange: setSingleDate
+    };
+    return /*#__PURE__*/ jsx(FloatingComponent, {
+        open: openState,
+        className: clsx(withBaseName(), className),
+        "aria-modal": "true",
+        ref: ref,
+        focusManagerProps: context ? {
+            context: context,
+            initialFocus: 4
+        } : void 0,
+        ...getPanelPosition(),
+        ...a11yProps,
+        ...rest,
+        children: /*#__PURE__*/ jsxs(StackLayout, {
+            separators: true,
+            gap: 0,
+            className: withBaseName("container"),
+            children: [
+                helperText && /*#__PURE__*/ jsx(FlexItem, {
+                    className: withBaseName("header"),
+                    children: /*#__PURE__*/ jsx(FormFieldHelperText, {
+                        children: helperText
+                    })
+                }),
+                /*#__PURE__*/ jsx(FlexLayout, {
+                    children: /*#__PURE__*/ jsxs(FormFieldContext.Provider, {
+                        value: {},
+                        children: [
+                            /*#__PURE__*/ jsx(Calendar, {
+                                visibleMonth: startVisibleMonth,
+                                onVisibleMonthChange: (_, month)=>setStartVisibleMonth(month),
+                                ...firstCalendarProps,
+                                ...CalendarProps
+                            }),
+                            isRangePicker && !compact && /*#__PURE__*/ jsx(Calendar, {
+                                selectionVariant: "range",
+                                hoveredDate: hoveredDate,
+                                onHoveredDateChange: handleHoveredDateChange,
+                                selectedDate: selectedDate,
+                                onSelectedDateChange: setRangeDate,
+                                visibleMonth: endVisibleMonth,
+                                onVisibleMonthChange: (_, month)=>setEndVisibleMonth(month),
+                                hideOutOfRangeDates: true,
+                                minDate: selectedDate?.startDate ? startOfMonth(selectedDate?.startDate)?.add({
+                                    months: 1
+                                }) : void 0,
+                                ...CalendarProps
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+});
+export { DatePickerPanel_DatePickerPanel as DatePickerPanel };

package/src/date-picker/index.js

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

package/src/drag-drop/DragDropProvider.js

@@ -0,0 +1,123 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { useGlobalDragDrop } from "./useGlobalDragDrop.js";
+const NO_DRAG_CONTEXT = {
+    isDragSource: void 0,
+    isDropTarget: void 0,
+    register: ()=>void 0
+};
+const unconfiguredRegistrationCall = ()=>console.log("have you forgotten to provide a DragDrop Provider ?");
+const DragDropContext = /*#__PURE__*/ createContext({
+    registerDragDropParty: unconfiguredRegistrationCall
+});
+const measureDropTargets = (dropTargetIds = [])=>dropTargetIds.reduce((map, id)=>{
+        const el = document.getElementById(id);
+        if (el) {
+            const { top, right, bottom, left } = el.getBoundingClientRect();
+            map[id] = {
+                top,
+                right,
+                bottom,
+                left
+            };
+        }
+        return map;
+    }, {});
+const DragDropProvider = ({ children, dragSources: dragSourcesProp })=>{
+    const resumeDragHandlers = useMemo(()=>new Map(), []);
+    const dropHandlers = useMemo(()=>new Map(), []);
+    const handleDragOverDropTarget = useCallback((dropTargetId, dragDropState)=>{
+        const resumeDrag = resumeDragHandlers.get(dropTargetId);
+        if (resumeDrag) return resumeDrag(dragDropState);
+        return false;
+    }, [
+        resumeDragHandlers
+    ]);
+    const handleDrop = useCallback((dropTargetId, dragDropState)=>{
+        const handleDrop = dropHandlers.get(dropTargetId);
+        if (handleDrop) handleDrop(dragDropState);
+    }, [
+        dropHandlers
+    ]);
+    const { measuredDropTargetsRef, resumeDrag } = useGlobalDragDrop({
+        onDragOverDropTarget: handleDragOverDropTarget,
+        onDrop: handleDrop
+    });
+    const [dragSources, dropTargets] = useMemo(()=>{
+        const sources = new Map();
+        const targets = new Map();
+        for (const [sourceId, { dropTargets }] of Object.entries(dragSourcesProp)){
+            const sourceEntry = sources.get(sourceId);
+            const targetIds = Array.isArray(dropTargets) ? dropTargets : [
+                dropTargets
+            ];
+            if (sourceEntry) sourceEntry.push(...targetIds);
+            else sources.set(sourceId, targetIds);
+            for (const targetId of targetIds){
+                const targetEntry = targets.get(targetId);
+                if (targetEntry) targetEntry.push(sourceId);
+                else targets.set(targetId, [
+                    sourceId
+                ]);
+            }
+        }
+        return [
+            sources,
+            targets
+        ];
+    }, [
+        dragSourcesProp
+    ]);
+    const onDragOut = useCallback((id, dragDropState)=>{
+        measuredDropTargetsRef.current = measureDropTargets(dragSources.get(id));
+        resumeDrag(dragDropState);
+        return true;
+    }, [
+        dragSources,
+        measuredDropTargetsRef,
+        resumeDrag
+    ]);
+    const onEndOfDragOperation = useCallback((id)=>{
+        console.log(`end of drag operation, id= ${id}`);
+    }, []);
+    const registerDragDropParty = useCallback((id, resumeDrag, onDrop)=>{
+        if (resumeDrag) resumeDragHandlers.set(id, resumeDrag);
+        else if (onDrop) dropHandlers.set(id, onDrop);
+    }, [
+        dropHandlers,
+        resumeDragHandlers
+    ]);
+    const contextValue = useMemo(()=>({
+            dragSources,
+            dropTargets,
+            onDragOut,
+            onEndOfDragOperation,
+            registerDragDropParty
+        }), [
+        dragSources,
+        dropTargets,
+        onDragOut,
+        onEndOfDragOperation,
+        registerDragDropParty
+    ]);
+    return /*#__PURE__*/ jsx(DragDropContext.Provider, {
+        value: contextValue,
+        children: children
+    });
+};
+const useDragDropProvider = (id)=>{
+    const { dragSources, dropTargets, onDragOut, onEndOfDragOperation, registerDragDropParty } = useContext(DragDropContext);
+    if (!id || !dragSources && !dropTargets) return NO_DRAG_CONTEXT;
+    {
+        const isDragSource = dragSources?.has(id) ?? false;
+        const isDropTarget = dropTargets?.has(id) ?? false;
+        return {
+            isDragSource,
+            isDropTarget,
+            onDragOut,
+            onEndOfDragOperation,
+            register: registerDragDropParty
+        };
+    }
+};
+export { DragDropProvider, useDragDropProvider };

package/src/drag-drop/DragDropState.js

@@ -0,0 +1,25 @@
+class DragDropState {
+    mouseOffset;
+    initialDragElement;
+    draggableElement = null;
+    payload = null;
+    constructor(mousePosition, dragElement){
+        this.initialDragElement = dragElement;
+        this.mouseOffset = this.getMouseOffset(mousePosition, dragElement);
+    }
+    setDraggable = (el)=>{
+        this.draggableElement = el;
+    };
+    setPayload(payload) {
+        this.payload = payload;
+    }
+    getMouseOffset(mousePosition, dragElement) {
+        const { clientX, clientY } = mousePosition;
+        const draggableRect = dragElement.getBoundingClientRect();
+        return {
+            x: clientX - draggableRect.left,
+            y: clientY - draggableRect.top
+        };
+    }
+}
+export { DragDropState };

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

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

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

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

package/src/drag-drop/DropIndicator.js

@@ -0,0 +1,28 @@
+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/dragDropTypes.js

@@ -0,0 +1,3 @@
+const FWD = "fwd";
+const BWD = "bwd";
+export { BWD, FWD };

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

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