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

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

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

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

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

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

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

package/src/prompt/Prompt.css.js

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

package/src/prompt/Prompt.js

@@ -0,0 +1,112 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogActions, DialogContent, DialogHeader } from "@salt-ds/core";
+import clsx from "clsx";
+import { useCallback } from "react";
+import { Icon, IconButton } from "../icon-button/index.js";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import Prompt from "./Prompt.css";
+const classBase = "vuuPrompt";
+const Prompt_Prompt = ({ children, className, cancelButtonLabel = "Cancel", cancelButtonProps, confirmButtonLabel = "Confirm", confirmButtonProps, customAction = null, disableAccent, icon, initialFocusedItem, onCancel, onClose, onConfirm, onOpenChange, open, showCancelButton = true, showCloseButton = true, showConfirmButton = true, status, title, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-prompt-next",
+        css: Prompt,
+        window: targetWindow
+    });
+    const close = useCallback(()=>{
+        onClose?.();
+        onOpenChange?.(false);
+    }, [
+        onClose,
+        onOpenChange
+    ]);
+    const callbackRef = useCallback((el)=>{
+        if (el) {
+            let target = null;
+            if ("confirm" === initialFocusedItem && showConfirmButton) target = el.querySelector(".vuuPromptConfirmButton");
+            else if ("cancel" === initialFocusedItem && showCancelButton) target = el.querySelector(".vuuPromptCancelButton");
+            else if ("close" === initialFocusedItem && showCloseButton) target = el.querySelector(".vuuPromptCloseButton");
+            if (target) setTimeout(()=>{
+                target.focus();
+            }, 200);
+        }
+    }, [
+        initialFocusedItem,
+        showCancelButton,
+        showCloseButton,
+        showConfirmButton
+    ]);
+    const handleCancel = useCallback(()=>{
+        onCancel?.();
+        close();
+    }, [
+        close,
+        onCancel
+    ]);
+    const handleConfirm = useCallback(()=>{
+        if (onConfirm?.() !== false) close();
+    }, [
+        close,
+        onConfirm
+    ]);
+    const actions = showCloseButton ? /*#__PURE__*/ jsx(IconButton, {
+        appearance: "transparent",
+        className: "vuuPromptCloseButton",
+        "data-embedded": true,
+        icon: "close",
+        onClick: close
+    }) : null;
+    const header = icon ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                name: icon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: title
+            })
+        ]
+    }) : title;
+    return /*#__PURE__*/ jsxs(Dialog, {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        onOpenChange: onOpenChange,
+        open: open,
+        ref: callbackRef,
+        status: status,
+        children: [
+            /*#__PURE__*/ jsx(DialogHeader, {
+                disableAccent: disableAccent,
+                header: header,
+                actions: actions
+            }),
+            /*#__PURE__*/ jsx(DialogContent, {
+                children: children
+            }),
+            /*#__PURE__*/ jsxs(DialogActions, {
+                children: [
+                    customAction,
+                    showCancelButton ? /*#__PURE__*/ jsx(Button, {
+                        appearance: "solid",
+                        className: "vuuPromptCancelButton",
+                        disabled: cancelButtonProps?.disabled,
+                        onClick: handleCancel,
+                        ref: cancelButtonProps?.ref,
+                        sentiment: "neutral",
+                        children: cancelButtonProps?.label ?? cancelButtonLabel
+                    }) : null,
+                    showConfirmButton ? /*#__PURE__*/ jsx(Button, {
+                        appearance: "solid",
+                        className: "vuuPromptConfirmButton",
+                        disabled: confirmButtonProps?.disabled,
+                        sentiment: "accented",
+                        onClick: handleConfirm,
+                        ref: confirmButtonProps?.ref,
+                        children: confirmButtonProps?.label ?? confirmButtonLabel
+                    }) : null
+                ]
+            })
+        ]
+    });
+};
+export { Prompt_Prompt as Prompt };

package/src/sortable-list/SortableList.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { ListBox, Option } from "@salt-ds/core";
+import { DragDropProvider, useSortable } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef } from "react";
+const SortableOption = ({ id, index, value, ...optionProps })=>{
+    const { ref } = useSortable({
+        id,
+        index
+    });
+    return /*#__PURE__*/ jsx(Option, {
+        ...optionProps,
+        id: id,
+        ref: ref,
+        value: value
+    });
+};
+const SortableList = ({ children, onReorderListItems, ...listBoxProps })=>{
+    const listRef = useRef(null);
+    const handleDragEnd = useCallback(()=>{
+        setTimeout(()=>{
+            const listItems = listRef.current?.querySelectorAll(".saltOption");
+            if (listItems) {
+                const items = Array.from(listItems).map(({ id })=>id);
+                onReorderListItems?.(items);
+            }
+        }, 300);
+    }, [
+        onReorderListItems
+    ]);
+    return /*#__PURE__*/ jsx(DragDropProvider, {
+        onDragEnd: handleDragEnd,
+        children: /*#__PURE__*/ jsx(ListBox, {
+            ...listBoxProps,
+            ref: listRef,
+            children: children
+        })
+    });
+};
+export { SortableList, SortableOption };