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

package/src/overflow-container/OverflowContainer.css.js

@@ -1,135 +0,0 @@
-const css = `
-.vuuOverflowContainer {
-  --overflow-borderColor: var(--vuuOverflowContainer-borderColor, none);
-  --overflow-borderStyle: var(--vuuOverflowContainer-borderStyle, none);
-  --overflow-borderWidth: var(--vuuOverflowContainer-borderWidth, 0px);
-  --overflow-border-topWidth: var(--vuuOverflowContainer-borderTopWidth, var(--overflow-borderWidth));
-  --overflow-border-rightWidth: var(--vuuOverflowContainer-borderRightWidth, var(--overflow-borderWidth));
-  --overflow-border-bottomWidth: var(--vuuOverflowContainer-borderBottomWidth, var(--overflow-borderWidth));
-  --overflow-border-leftWidth: var(--vuuOverflowContainer-borderLeftWidth, var(--overflow-borderWidth));
-  --border: calc(var(--overflow-border-topWidth) + var(--overflow-border-bottomWidth));
-  --overflow-item-gap: var(--vuuOverflowContainer-gap, 2px);
-  --overflow-direction: row;
-  --overflow-height: var(--overflow-item-height);
-  background-color: var(--vuuOverflowContainer-background);
-  border-color: var(--overflow-borderColor);
-  border-style: var(--overflow-borderStyle);
-  border-top-width: var(--overflow-border-topWidth);
-  border-right-width: var(--overflow-border-rightWidth);
-  border-bottom-width: var(--overflow-border-bottomWidth);
-  border-left-width: var(--overflow-border-leftWidth);
-  height: var(--vuuOverflowContainer-height, var(--overflow-container-height));
-  width: var(--overflow-container-width);
-}
-
-.vuuOverflowContainer.vuuOrientation-horizontal {
-  --item-align: center;
-  --item-margin: 0 var(--overflow-item-gap) 0 var(--overflow-item-gap);
-  --overflow-container-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
-  --overflow-container-width: var(--vuuOverflowContainer-width, auto);
-  --overflow-wrapper-height: var(--overflow-item-height);
-  --overflow-item-height: var(--vuuOverflowContainer-contentHeight, calc(var(--overflow-container-height) - var(--total-border-size)));
-  --overflow-item-width: auto;
-  --overflow-width: 0px;
-  --total-border-size: calc(var(--overflow-border-topWidth) + var(--overflow-border-bottomWidth));
-  min-width: var(--vuuOverflowContainer-minWidth, var(--overflow-container-height));
-
-  & .vuuOverflowContainer-wrapContainer-overflowed {
-    --overflow-left: auto;
-    --overflow-position: relative;
-    --overflow-width: auto;
-  }
-}
-
-.vuuOverflowContainer.vuuOrientation-vertical {
-  --item-align: stretch;
-  --overflow-container-height: 100%;
-  --overflow-container-width: var(--vuuOverflowContainer-width, calc(var(--salt-size-base) + var(--salt-spacing-100)));
-  --overflow-item-height: auto;
-  --overflow-item-width: calc(var(--overflow-container-width) - var(--total-border-size));
-  --overflow-wrapper-height: 100%;
-  --total-border-size: calc(var(--overflow-border-leftWidth) + var(--overflow-border-rightWidth));
-  --item-margin: var(--overflow-item-gap) 0 var(--overflow-item-gap) 0;
-  --overflow-direction: column;
-  --overflow-height: 0px;
-  --overflow-left: 0;
-  --overflow-top: 100%;
-  --overflow-width: auto;
-
-  & .vuuOverflowContainer-wrapContainer-overflowed {
-    --overflow-top: auto;
-    --overflow-position: relative;
-    --overflow-height: auto;
-  }
-}
-
-.vuuOverflowContainer-wrapContainer {
-  align-items: var(--item-align);
-  flex-direction: var(--overflow-direction);
-  height: var(--overflow-wrapper-height);
-  justify-content: var(--vuuOverflowContainer-justifyContent, flex-start);
-  flex-wrap: wrap;
-  width: 100%;
-  display: flex;
-  position: relative;
-  overflow: hidden;
-}
-
-.vuuOverflowContainer-wrapContainer-overflowed {
-  --overflow-order: 2;
-  --overflow-left: auto;
-  --overflow-position: relative;
-  --overflow-width: auto;
-}
-
-.vuuOverflowContainer.vuuOrientation-vertical.vuuOverflowContainer-wrapContainer-overflowed {
-  --overflow-height: auto;
-}
-
-.vuuOverflowContainer-item {
-  align-items: inherit;
-  height: var(--overflow-item-height);
-  margin: var(--item-margin);
-  width: var(--overflow-item-width);
-  order: 1;
-  display: flex;
-  position: relative;
-}
-
-.vuuOverflowContainer-item[data-align="right"] {
-  margin-left: auto;
-}
-
-.vuuOverflowContainer-item.wrapped {
-  --overflow-item-bg: #ccc;
-  visibility: hidden;
-  order: 3;
-}
-
-.vuuOverflowContainer-item.vuuDraggable-dragAway, .vuuOverflowContainer-item:has(.vuuDraggable-dragAway) {
-  display: none;
-}
-
-.vuuOverflowContainer-item.vuuDropTarget-settling {
-  visibility: hidden;
-}
-
-.vuuOverflowContainer-OverflowIndicator {
-  height: var(--overflow-height);
-  order: var(--overflow-order, 99);
-  width: var(--overflow-width);
-  background-color: #0000;
-  align-items: center;
-  display: flex;
-  overflow: hidden;
-}
-
-.vuuDraggable-vuuOverflowContainer {
-  align-items: center;
-  height: 44px;
-  display: flex;
-}
-
-
-`;
-export default css;

package/src/overflow-container/OverflowContainer.js

@@ -1,87 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { PopupMenu } from "@vuu-ui/vuu-popups";
-import { asReactElements, useId } from "@vuu-ui/vuu-utils";
-import clsx from "clsx";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import react, { forwardRef } from "react";
-import { useOverflowContainer } from "./useOverflowContainer.js";
-import OverflowContainer_0 from "./OverflowContainer.css";
-const classBase = "vuuOverflowContainer";
-const WrapContainer = /*#__PURE__*/ react.memo(({ PopupMenuProps, allowDragDrop, children, id, onMoveItem, onSwitchWrappedItemIntoView, orientation, overflowIcon })=>{
-    const childElements = asReactElements(children);
-    const { draggable, draggedItemIndex, menuActionHandler, menuBuilder, onItemMouseDown, rootRef } = useOverflowContainer({
-        allowDragDrop,
-        itemCount: childElements.length,
-        onMoveItem,
-        onSwitchWrappedItemIntoView,
-        orientation
-    });
-    const content = childElements.map((childEl, i)=>{
-        const { "data-align": align, "data-overflow-priority": overflowPriority = "0", id: itemId = `${id}-${i}`, label = `Item ${i + 1}` } = childEl.props;
-        return /*#__PURE__*/ jsx("div", {
-            className: clsx(`${classBase}-item`, {
-                "vuuDraggable-dragAway": draggedItemIndex === i
-            }),
-            "data-index": i,
-            "data-align": align,
-            "data-label": label,
-            "data-overflow-priority": overflowPriority,
-            id: `${itemId}-wrapper`,
-            onMouseDown: onItemMouseDown,
-            children: childEl
-        }, i);
-    });
-    const overflowIndicator = /*#__PURE__*/ jsx("div", {
-        className: `${classBase}-OverflowIndicator`,
-        "data-index": "overflow",
-        children: /*#__PURE__*/ jsx(PopupMenu, {
-            ...PopupMenuProps,
-            "data-embedded": true,
-            icon: overflowIcon,
-            menuBuilder: menuBuilder,
-            menuActionHandler: menuActionHandler,
-            tabIndex: -1
-        })
-    }, "overflow");
-    content.push(overflowIndicator);
-    return /*#__PURE__*/ jsxs("div", {
-        className: clsx(`${classBase}-wrapContainer`),
-        ref: rootRef,
-        children: [
-            content,
-            draggable
-        ]
-    });
-});
-WrapContainer.displayName = "OverflowContainer.InnerContainer";
-const OverflowContainer_OverflowContainer = /*#__PURE__*/ forwardRef(function({ PopupMenuProps, allowDragDrop = false, children, className, id: idProp, onMoveItem, onSwitchWrappedItemIntoView, orientation = "horizontal", overflowIcon, overflowPosition, ...htmlAttributes }, forwardedRef) {
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-overflow-container",
-        css: OverflowContainer_0,
-        window: targetWindow
-    });
-    const id = useId(idProp);
-    return /*#__PURE__*/ jsx("div", {
-        ...htmlAttributes,
-        className: clsx(clsx(className, classBase, {
-            "vuuOrientation-horizontal": "horizontal" === orientation,
-            "vuuOrientation-vertical": "vertical" === orientation
-        })),
-        id: id,
-        ref: forwardedRef,
-        children: /*#__PURE__*/ jsx(WrapContainer, {
-            PopupMenuProps: PopupMenuProps,
-            allowDragDrop: allowDragDrop,
-            id: id,
-            orientation: orientation,
-            overflowIcon: overflowIcon,
-            overflowPosition: overflowPosition,
-            onMoveItem: onMoveItem,
-            onSwitchWrappedItemIntoView: onSwitchWrappedItemIntoView,
-            children: children
-        })
-    });
-});
-export { OverflowContainer_OverflowContainer as OverflowContainer };

package/src/overflow-container/index.js

@@ -1,2 +0,0 @@
-export * from "./OverflowContainer.js";
-export * from "./overflow-utils.js";

package/src/overflow-container/overflow-utils.js

@@ -1,211 +0,0 @@
-import { getElementByDataIndex } from "@vuu-ui/vuu-utils";
-const NON_WRAPPED_ITEM = ".vuuOverflowContainer-item:not(.wrapped)";
-const sortByScreenOrder = (elements)=>elements.sort((e1, e2)=>{
-        const { dataset: { index: idx1 = "?" } } = e1;
-        const { dataset: { index: idx2 = "?" } } = e2;
-        const isOverflowed1 = e1.classList.contains("wrapped");
-        const isOverflowed2 = e2.classList.contains("wrapped");
-        const isOverflowedIndicator1 = "overflow" === idx1;
-        const isOverflowedIndicator2 = "overflow" === idx2;
-        if (isOverflowed1 && !isOverflowed2) return 1;
-        if (!isOverflowed1 && isOverflowed2) return -1;
-        if (isOverflowedIndicator1) return 1;
-        if (isOverflowedIndicator2) return -1;
-        return parseInt(idx1) > parseInt(idx2) ? 1 : -1;
-    });
-const NO_WRAPPED_ITEMS = [];
-const getNonWrappedAndWrappedItems = (container, orientation)=>{
-    const nonWrappedItems = [];
-    const wrappedItems = [];
-    let currentPosition = -1;
-    let overflowed = false;
-    const sortedChildren = sortByScreenOrder(Array.from(container.children));
-    const positionAttribute = "vertical" === orientation ? "top" : "left";
-    for (const child of sortedChildren){
-        const element = child;
-        const { dataset: { index = "?", label = "?", overflowPriority = "0" } } = element;
-        const { [positionAttribute]: position } = element.getBoundingClientRect();
-        if (position <= currentPosition) {
-            if ("overflow" === index) wrappedItems.push(nonWrappedItems.pop());
-            else wrappedItems.push({
-                index,
-                label,
-                overflowPriority
-            });
-            overflowed = true;
-        } else if (overflowed) wrappedItems.push({
-            index,
-            label,
-            overflowPriority
-        });
-        else nonWrappedItems.push({
-            index,
-            label,
-            overflowPriority
-        });
-        currentPosition = position;
-    }
-    return [
-        nonWrappedItems,
-        wrappedItems
-    ];
-};
-const applyOverflowClassToWrappedItems = (container, overflowedItems, classBase)=>{
-    let ignoreOverflow = false;
-    const className = classBase ? `${classBase}-overflowed` : "overflow";
-    if (overflowedItems.find(({ index })=>"overflow" === index)) {
-        if (1 === overflowedItems.length) ignoreOverflow = true;
-    }
-    for (const element of container.children){
-        const { dataset: { index = "?" } } = element;
-        if (0 === overflowedItems.length || ignoreOverflow) container.classList.remove(className);
-        else container.classList.add(className);
-        if ("overflow" !== index && overflowedItems.find((item)=>item.index === index)) element.classList.add("wrapped");
-        else element.classList.remove("wrapped");
-    }
-};
-const maxPriority = (priority, { overflowPriority })=>Math.max(priority, parseInt(overflowPriority));
-const minPriority = (priority, { overflowPriority })=>Math.min(priority, parseInt(overflowPriority));
-const overflowIndicatorHasWrappedButShouldNotHave = (wrappedItems)=>wrappedItems.length > 1 && wrappedItems.at(-1)?.index === "overflow";
-const getHighestPriorityItem = (overflowItems)=>{
-    let [highestPriorityItem] = overflowItems;
-    for(let i = 1; i < overflowItems.length; i++){
-        const item = overflowItems[i];
-        if (parseInt(item.overflowPriority) > parseInt(highestPriorityItem.overflowPriority)) highestPriorityItem = item;
-    }
-    return highestPriorityItem;
-};
-const highPriorityItemsHaveWrappedButShouldNotHave = (nonWrappedItems, wrappedItems)=>{
-    const minNonwrappedPriority = nonWrappedItems.reduce(minPriority, Number.MAX_SAFE_INTEGER);
-    const maxwrappedPriority = wrappedItems.reduce(maxPriority, 0);
-    if (maxwrappedPriority > minNonwrappedPriority) return true;
-    return wrappedItems.length > 1 && wrappedItems.at(-1)?.index === "overflow";
-};
-const correctForWrappedOverflowIndicator = (container, overflowedItems, orientation)=>new Promise((resolve)=>{
-        requestAnimationFrame(()=>{
-            const [, o2] = getNonWrappedAndWrappedItems(container, orientation);
-            const newlyOverflowed = getNewItems(overflowedItems, o2);
-            newlyOverflowed.forEach((item)=>markElementAsWrapped(container, item));
-            resolve(o2);
-        });
-    });
-const correctForWrappedHighPriorityItems = (container, nonWrapped, wrapped, orientation)=>new Promise((resolve)=>{
-        requestAnimationFrame(()=>{
-            const [, o2] = getNonWrappedAndWrappedItems(container, orientation);
-            const highPriorityWrappedItem = getHighestPriorityItem(o2);
-            if (highPriorityWrappedItem) {
-                const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(container, highPriorityWrappedItem, orientation);
-                resolve([
-                    nonWrappedItems,
-                    wrappedItems
-                ]);
-            } else resolve([
-                nonWrapped,
-                wrapped
-            ]);
-        });
-    });
-const markElementAsWrapped = (container, item)=>{
-    const el = getElementByDataIndex(container, item.index);
-    if (el) el.classList.add("wrapped");
-    else throw Error(`markElementAsWrapped element item with index ${item.index} not found`);
-};
-const getElementsMarkedAsWrapped = (container)=>Array.from(container.querySelectorAll(".wrapped"));
-const getNewItems = (items1, items2)=>{
-    const newItems = [];
-    for (const item of items2)if (!items1.find(({ index })=>index === item.index)) newItems.push(item);
-    return newItems;
-};
-const unmarkItemsWhichAreNoLongerWrapped = (container, wrappedItems)=>{
-    const elementssMarkedAsWrapped = getElementsMarkedAsWrapped(container);
-    elementssMarkedAsWrapped.forEach((el)=>{
-        const { dataset: { index = "?" } } = el;
-        if (!wrappedItems.find((i)=>i.index === index)) el.classList.remove("wrapped");
-    });
-};
-const getOverflowIndicator = (container)=>container.querySelector('[data-index="overflow"]');
-const getOverflowedItem = (container)=>container.querySelector(".wrapped");
-const getElementSize = (el, sizeProperty)=>{
-    const size = parseInt(getComputedStyle(el).getPropertyValue(sizeProperty));
-    const margin = "width" === sizeProperty ? parseInt(getComputedStyle(el).getPropertyValue("margin-left")) + parseInt(getComputedStyle(el).getPropertyValue("margin-right")) : parseInt(getComputedStyle(el).getPropertyValue("margin-top")) + parseInt(getComputedStyle(el).getPropertyValue("margin-bottom"));
-    return size + margin;
-};
-const getAvailableSpace = (container, overflowIndicator, orientation)=>{
-    if ("horizontal" === orientation) {
-        const { right: containerRight } = container.getBoundingClientRect();
-        const paddingRight = parseInt(getComputedStyle(container).getPropertyValue("padding-right"));
-        const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();
-        return containerRight - paddingRight - indicatorRight;
-    }
-    {
-        const { bottom: containerBottom } = container.getBoundingClientRect();
-        const paddingBottom = parseInt(getComputedStyle(container).getPropertyValue("padding-bottom"));
-        const { bottom: indicatorBottom } = overflowIndicator.getBoundingClientRect();
-        return containerBottom - paddingBottom - indicatorBottom;
-    }
-};
-const removeOverflowIndicatorIfNoLongerNeeded = (container, orientation)=>{
-    const sizeProperty = "horizontal" === orientation ? "width" : "height";
-    const overflowIndicator = getOverflowIndicator(container);
-    const availableSpace = getAvailableSpace(container, overflowIndicator, orientation);
-    const indicatorWidth = getElementSize(overflowIndicator, sizeProperty);
-    const overflowedItem = getOverflowedItem(container);
-    const overflowWidth = getElementSize(overflowedItem, sizeProperty);
-    if (overflowWidth <= availableSpace + indicatorWidth) {
-        container.classList.remove("vuuOverflowContainer-wrapContainer-overflowed");
-        overflowedItem.classList.remove("wrapped");
-        return true;
-    }
-    return false;
-};
-const byPriorityDescending = (h1, h2)=>{
-    const { dataset: { index: i1 = "0", overflowPriority: p1 = "0" } } = h1;
-    const { dataset: { index: i2 = "0", overflowPriority: p2 = "0" } } = h2;
-    if (p1 > p2) return -1;
-    if (p1 < p2) return 1;
-    return parseInt(i1) - parseInt(i2);
-};
-const getNonwrappedItemsByPriority = (container)=>Array.from(container.querySelectorAll(NON_WRAPPED_ITEM)).sort(byPriorityDescending);
-const switchWrappedItemIntoView = (container, overflowItem, orientation)=>{
-    const unwrappedItems = getNonwrappedItemsByPriority(container);
-    const targetElement = getElementByDataIndex(container, overflowItem.index, true);
-    let pos = -1;
-    let unwrappedItem = unwrappedItems.at(pos);
-    const sizeProperty = "horizontal" === orientation ? "width" : "height";
-    const itemWidth = getElementSize(unwrappedItem, sizeProperty);
-    const targetWidth = getElementSize(targetElement, sizeProperty);
-    const overflowIndicator = getOverflowIndicator(container);
-    let availableSpace = getAvailableSpace(container, overflowIndicator, orientation) + itemWidth;
-    if (availableSpace >= targetWidth) switchWrapOnElements(targetElement, unwrappedItem);
-    else {
-        const { left: lastLeft } = unwrappedItem.getBoundingClientRect();
-        const baseAvailableSpace = availableSpace;
-        const wrapTargets = [
-            unwrappedItem
-        ];
-        while(availableSpace < targetWidth){
-            pos -= 1;
-            unwrappedItem = unwrappedItems.at(pos);
-            wrapTargets.push(unwrappedItem);
-            const { left: nextLeft } = unwrappedItem.getBoundingClientRect();
-            const extraSpace = lastLeft - nextLeft;
-            availableSpace = baseAvailableSpace + extraSpace;
-        }
-        targetElement?.classList.remove("wrapped");
-        wrapTargets.forEach((item)=>{
-            item.classList.add("wrapped");
-        });
-    }
-    const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(container, orientation);
-    unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);
-    return [
-        nonWrappedItems,
-        wrappedItems
-    ];
-};
-const switchWrapOnElements = (wrappedElement, nonWrappedElement)=>{
-    if (!wrappedElement || !nonWrappedElement) throw Error("switchWrapOnElements, element undefined");
-    wrappedElement.classList.remove("wrapped");
-    nonWrappedElement.classList.add("wrapped");
-};
-export { NO_WRAPPED_ITEMS, applyOverflowClassToWrappedItems, correctForWrappedHighPriorityItems, correctForWrappedOverflowIndicator, getElementsMarkedAsWrapped, getNonWrappedAndWrappedItems, highPriorityItemsHaveWrappedButShouldNotHave, markElementAsWrapped, overflowIndicatorHasWrappedButShouldNotHave, removeOverflowIndicatorIfNoLongerNeeded, sortByScreenOrder, switchWrappedItemIntoView, unmarkItemsWhichAreNoLongerWrapped };

package/src/overflow-container/useOverflowContainer.js

@@ -1,108 +0,0 @@
-import { MEASURES, isValidNumber, useLayoutEffectSkipFirst } from "@vuu-ui/vuu-utils";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { NO_WRAPPED_ITEMS, applyOverflowClassToWrappedItems, correctForWrappedHighPriorityItems, correctForWrappedOverflowIndicator, getNonWrappedAndWrappedItems, highPriorityItemsHaveWrappedButShouldNotHave, overflowIndicatorHasWrappedButShouldNotHave, removeOverflowIndicatorIfNoLongerNeeded, switchWrappedItemIntoView } from "./overflow-utils.js";
-import { useDragDrop } from "../drag-drop/index.js";
-const useOverflowContainer = ({ allowDragDrop = false, itemCount, onMoveItem, onSwitchWrappedItemIntoView, orientation })=>{
-    const [container, setContainer] = useState(null);
-    const wrappedItemsRef = useRef(NO_WRAPPED_ITEMS);
-    const containerRef = useRef(null);
-    const setOverflowTabIndex = useCallback((tabIndex)=>{
-        if (containerRef.current) containerRef.current.querySelector(".vuuOverflowContainer-OverflowIndicator button")?.setAttribute("tabindex", tabIndex);
-    }, []);
-    const handleResize = useCallback(async ()=>{
-        if (container) {
-            let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(container, orientation);
-            applyOverflowClassToWrappedItems(container, wrapped, "vuuOverflowContainer-wrapContainer");
-            if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) wrapped = await correctForWrappedOverflowIndicator(container, wrapped, orientation);
-            while(highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped))[nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(container, nonWrapped, wrapped, orientation);
-            if (1 === wrapped.length) {
-                if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) wrapped = NO_WRAPPED_ITEMS;
-            }
-            if (0 === wrappedItemsRef.current.length && wrapped.length > 0) setOverflowTabIndex("0");
-            else if (wrappedItemsRef.current.length > 0 && 0 === wrapped.length) setOverflowTabIndex("-1");
-            wrappedItemsRef.current = wrapped;
-        }
-    }, [
-        container,
-        orientation,
-        setOverflowTabIndex
-    ]);
-    const hasOverflowItem = (opt)=>"object" == typeof opt && null !== opt && "overflowItem" in opt;
-    const [menuBuilder, menuActionHandler] = useMemo(()=>[
-            ()=>{
-                const { current: menuItems } = wrappedItemsRef;
-                return menuItems.map((item)=>({
-                        label: item.label,
-                        id: `activate-item-${item.index}`,
-                        options: {
-                            overflowItem: item
-                        }
-                    }));
-            },
-            (menuItemId, options)=>{
-                if (container && hasOverflowItem(options)) {
-                    const [, wrappedItems] = switchWrappedItemIntoView(container, options.overflowItem, orientation);
-                    wrappedItemsRef.current = wrappedItems;
-                    onSwitchWrappedItemIntoView?.(options.overflowItem);
-                }
-                return true;
-            }
-        ], [
-        container,
-        onSwitchWrappedItemIntoView,
-        orientation
-    ]);
-    const resizeObserver = useMemo(()=>{
-        const { sizeProp } = MEASURES[orientation];
-        let currentSize = 0;
-        return new ResizeObserver((entries)=>{
-            for (const entry of entries){
-                const { [sizeProp]: actualSize } = entry.contentRect;
-                const size = Math.round(actualSize);
-                if (isValidNumber(size) && currentSize !== size) {
-                    currentSize = size;
-                    handleResize();
-                }
-            }
-        });
-    }, [
-        handleResize,
-        orientation
-    ]);
-    useLayoutEffectSkipFirst(()=>{
-        handleResize();
-    }, [
-        handleResize,
-        itemCount
-    ]);
-    useMemo(()=>{
-        if (container) resizeObserver.observe(container);
-    }, [
-        container,
-        resizeObserver
-    ]);
-    const callbackRef = useCallback((el)=>{
-        setContainer(containerRef.current = el);
-    }, []);
-    const handleDrop = useCallback(({ fromIndex, toIndex })=>{
-        onMoveItem?.(fromIndex, toIndex);
-    }, [
-        onMoveItem
-    ]);
-    const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = useDragDrop({
-        allowDragDrop,
-        containerRef,
-        draggableClassName: "vuuOverflowContainer",
-        onDrop: handleDrop,
-        orientation: "horizontal",
-        itemQuery: ".vuuOverflowContainer-item"
-    });
-    return {
-        menuActionHandler,
-        menuBuilder,
-        onItemMouseDown: dragDropHookHandleMouseDown,
-        rootRef: callbackRef,
-        ...dragDropHook
-    };
-};
-export { useOverflowContainer };

package/src/price-ticker/PriceTicker.css.js

@@ -1,32 +0,0 @@
-const css = `
-@property --price-ticker-color {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #15171b;
-}
-
-.vuuPriceTicker {
-  font-size: var(--vuuPriceTicker-fontSize, var(--salt-text-fontSize));
-  font-weight: var(--vuuPriceTicker-fontWeight, 700);
-  align-items: center;
-  transition-property: color;
-  transition-duration: .3s;
-  display: flex;
-}
-
-.vuuPriceTicker.up1, .vuuPriceTicker.up2 {
-  --vuu-icon-color: var(--vuu-color-green-50);
-  color: var(--vuu-color-green-50);
-  animation-duration: 30s;
-}
-
-.vuuPriceTicker.down1, .vuuPriceTicker.down2 {
-  --vuu-icon-transform: rotate(180deg);
-  --vuu-icon-color: var(--vuu-color-red-50);
-  color: var(--vuu-color-red-50);
-  animation-duration: 30s;
-}
-
-
-`;
-export default css;

package/src/price-ticker/PriceTicker.js

@@ -1,51 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { getMovingValueDirection, isValidNumber, numericFormatter } from "@vuu-ui/vuu-utils";
-import { memo, useMemo, useRef } from "react";
-import clsx from "clsx";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import PriceTicker from "./PriceTicker.css";
-const classBase = "vuuPriceTicker";
-const getValueFormatter = (decimals)=>numericFormatter({
-        type: {
-            name: "number",
-            formatting: {
-                decimals,
-                zeroPad: true
-            }
-        }
-    });
-const INITIAL_VALUE = [
-    void 0,
-    void 0
-];
-const PriceTicker_PriceTicker = /*#__PURE__*/ memo(({ className, decimals = 2, price, showArrow, ...htmlAttributes })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-price-ticker",
-        css: PriceTicker,
-        window: targetWindow
-    });
-    const ref = useRef(INITIAL_VALUE);
-    const [prevValue, prevDirection] = ref.current;
-    const formatNumber = useMemo(()=>getValueFormatter(decimals), [
-        decimals
-    ]);
-    const direction = isValidNumber(prevValue) ? getMovingValueDirection(price, prevDirection, prevValue, decimals) : "";
-    ref.current = [
-        price,
-        direction
-    ];
-    return /*#__PURE__*/ jsxs("div", {
-        ...htmlAttributes,
-        className: clsx(classBase, className, direction),
-        children: [
-            formatNumber(price),
-            showArrow ? /*#__PURE__*/ jsx("span", {
-                "data-icon": "price-arrow"
-            }) : null
-        ]
-    });
-});
-PriceTicker_PriceTicker.displayName = "PriceTicker";
-export { PriceTicker_PriceTicker as PriceTicker };

package/src/price-ticker/index.js

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

package/src/prompt/Prompt.css.js

@@ -1,48 +0,0 @@
-const css = `
-.vuuPrompt {
-  min-height: var(--vuuPrompt-minHeight, 257px);
-  min-width: var(--vuuPrompt-minWidth, 380px);
-
-  & .saltDialogHeader {
-    & .vuuIcon {
-      --vuu-icon-size: 20px;
-      width: 24px;
-    }
-  }
-
-  & .saltDialogActions {
-    align-items: center;
-  }
-}
-
-.vuuPrompt.saltDialog-warning {
-  --salt-status-warning-borderColor: var(--vuu-color-yellow-20);
-  --variant-color: var(--vuu-color-yellow-20);
-  min-height: var(--vuuPrompt-minHeight, 150px);
-  min-width: var(--vuuPrompt-minWidth, 280px);
-  border-radius: 4px !important;
-  padding-top: 0 !important;
-
-  & .saltDialogHeader {
-    background-color: var(--variant-color);
-    padding-left: var(--salt-spacing-100);
-    padding-bottom: var(--salt-spacing-100);
-    padding-right: var(--salt-spacing-100);
-
-    & .saltDialogHeader-header {
-      align-items: end;
-      gap: var(--salt-spacing-100);
-      display: flex;
-    }
-  }
-
-  & .saltDialogContent {
-    justify-content: flex-start;
-    align-items: center;
-    display: flex;
-  }
-}
-
-
-`;
-export default css;