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

package/src/measured-container/useMeasuredContainer.js

@@ -0,0 +1,156 @@
+import { isValidNumber, useResizeObserver } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+const ClientWidthHeight = [
+    "clientHeight",
+    "clientWidth"
+];
+const WidthOnly = [
+    "clientWidth"
+];
+const HeightOnly = [
+    "clientHeight"
+];
+const NO_MEASUREMENT = [];
+const NullClientSize = {
+    clientHeight: -1,
+    clientWidth: -1
+};
+const isNumber = (val)=>Number.isFinite(val);
+const reduceSizeHeight = (size, value)=>{
+    if (0 === value) return size;
+    return {
+        height: size.height - value,
+        width: size.width
+    };
+};
+const getInitialValue = (value, defaultValue)=>{
+    if (isValidNumber(value)) return `${value}px`;
+    if ("string" == typeof value) return value;
+    return defaultValue;
+};
+const getInitialCssSize = (height, width)=>({
+        height: getInitialValue(height, "100%"),
+        width: getInitialValue(width, "auto")
+    });
+const getInitialInnerSize = (height, width)=>{
+    if (isValidNumber(height) && isValidNumber(width)) return {
+        height,
+        width
+    };
+};
+const useMeasuredContainer = ({ defaultHeight = 0, defaultWidth = 0, height, onResize: onResizeProp, resizeStrategy = "responsive", width })=>{
+    const deferResize = "defer" === resizeStrategy;
+    const sizeRef = useRef(NullClientSize);
+    const resizeHandleRef = useRef(void 0);
+    const containerRef = useRef(null);
+    const [size, setSize] = useState({
+        css: getInitialCssSize(height, width),
+        inner: getInitialInnerSize(height, width),
+        outer: {
+            height: height ?? "100%",
+            width: width ?? "auto"
+        }
+    });
+    const fixedHeight = "number" == typeof height;
+    const fixedWidth = "number" == typeof width;
+    const dimensions = fixedHeight && fixedWidth ? NO_MEASUREMENT : fixedHeight ? WidthOnly : fixedWidth ? HeightOnly : ClientWidthHeight;
+    useMemo(()=>{
+        setSize((currentSize)=>{
+            const { inner, outer } = currentSize;
+            if (isValidNumber(height) && isValidNumber(width) && inner && outer) {
+                const { height: innerHeight, width: innerWidth } = inner;
+                const { height: outerHeight, width: outerWidth } = outer;
+                if (outerHeight !== height || outerWidth !== width) {
+                    const heightDiff = isValidNumber(outerHeight) ? outerHeight - innerHeight : 0;
+                    const widthDiff = isValidNumber(outerWidth) ? outerWidth - innerWidth : 0;
+                    return {
+                        ...currentSize,
+                        outer: {
+                            height,
+                            width
+                        },
+                        inner: {
+                            height: height - heightDiff,
+                            width: width - widthDiff
+                        }
+                    };
+                }
+            }
+            return currentSize;
+        });
+    }, [
+        height,
+        width
+    ]);
+    const handleResize = useCallback((clientWidth, clientHeight)=>{
+        const { css, inner, outer } = size;
+        let newState = size;
+        if (fixedHeight && isNumber(clientWidth) && Math.floor(clientWidth) !== inner?.width) newState = {
+            css,
+            outer,
+            inner: {
+                width: Math.floor(clientWidth) || defaultWidth,
+                height
+            }
+        };
+        else if (fixedWidth && isNumber(clientHeight) && Math.floor(clientHeight) !== inner?.height) newState = {
+            css,
+            outer,
+            inner: {
+                height: Math.floor(clientHeight) || defaultHeight,
+                width
+            }
+        };
+        else if (isNumber(clientHeight) && isNumber(clientWidth) && (clientWidth !== inner?.width || clientHeight !== inner?.height)) newState = {
+            css,
+            outer,
+            inner: {
+                width: Math.floor(clientWidth) || defaultWidth,
+                height: Math.floor(clientHeight) || defaultHeight
+            }
+        };
+        if (newState !== size) setSize(newState);
+    }, [
+        defaultHeight,
+        defaultWidth,
+        fixedHeight,
+        fixedWidth,
+        height,
+        size,
+        width
+    ]);
+    const onResize = useCallback(({ clientHeight, clientWidth })=>{
+        if (deferResize) {
+            sizeRef.current.clientHeight = clientHeight;
+            sizeRef.current.clientWidth = clientWidth;
+            if (null !== resizeHandleRef.current) clearTimeout(resizeHandleRef.current);
+            resizeHandleRef.current = setTimeout(()=>{
+                handleResize(clientWidth, clientHeight);
+            }, 40);
+        } else handleResize(clientWidth, clientHeight);
+    }, [
+        deferResize,
+        handleResize
+    ]);
+    useEffect(()=>{
+        if (size.inner) {
+            if (containerRef.current) {
+                if ("number" != typeof height || 0 === height) size.inner.height = containerRef.current.clientHeight;
+                size.inner.width = containerRef.current.clientWidth;
+                onResizeProp?.(size.inner);
+            }
+        }
+    }, [
+        height,
+        onResizeProp,
+        size.inner
+    ]);
+    useResizeObserver(containerRef, dimensions, onResize, true);
+    return {
+        containerRef,
+        cssSize: size.css,
+        outerSize: size.outer,
+        innerSize: size.inner
+    };
+};
+export { reduceSizeHeight, useMeasuredContainer };

package/src/modal-provider/ModalProvider.js

@@ -0,0 +1,147 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog, DialogActions, DialogCloseButton, DialogContent, DialogHeader } from "@salt-ds/core";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { Prompt } from "../prompt/Prompt.js";
+const useDialogHost = ()=>{
+    const [dialogState, setDialogState] = useState();
+    const [promptState, setPromptState] = useState();
+    const closePrompt = useCallback(()=>{
+        setPromptState(void 0);
+    }, []);
+    const closeDialog = useCallback(()=>{
+        setDialogState(void 0);
+    }, []);
+    const handleOpenChange = useCallback((open)=>{
+        if (true !== open) closeDialog();
+    }, [
+        closeDialog
+    ]);
+    const dialog = dialogState ? /*#__PURE__*/ jsxs(Dialog, {
+        open: true,
+        onOpenChange: handleOpenChange,
+        children: [
+            /*#__PURE__*/ jsx(DialogHeader, {
+                header: dialogState.title
+            }),
+            /*#__PURE__*/ jsx(DialogContent, {
+                children: dialogState.content
+            }),
+            true !== dialogState.hideCloseButton ? /*#__PURE__*/ jsx(DialogCloseButton, {
+                "data-embedded": true,
+                "data-icon": "close",
+                onClick: closeDialog
+            }) : null,
+            dialogState.actions ? /*#__PURE__*/ jsx(DialogActions, {
+                children: dialogState.actions
+            }) : null
+        ]
+    }) : null;
+    const handleOpenChangePrompt = useCallback((open)=>{
+        if (true !== open) closePrompt();
+        promptState?.promptProps.onOpenChange?.(open);
+    }, [
+        closePrompt,
+        promptState
+    ]);
+    const prompt = promptState ? /*#__PURE__*/ jsx(Prompt, {
+        ...promptState.promptProps,
+        onClose: closePrompt,
+        onOpenChange: handleOpenChangePrompt,
+        open: true,
+        children: promptState.content
+    }) : null;
+    return {
+        dialog,
+        prompt,
+        setDialogState,
+        setPromptState
+    };
+};
+const defaultShowDialog = ()=>{
+    console.warn("No DialogProvider in place");
+};
+const defaultCloseDialog = ()=>{
+    console.warn("No DialogProvider in place");
+};
+const defaultShowPrompt = ()=>{
+    console.warn("No DialogProvider in place");
+};
+const defaultClosePrompt = ()=>{
+    console.warn("No DialogProvider in place");
+};
+class DialogContextObject {
+    showDialog = defaultShowDialog;
+    closeDialog = defaultCloseDialog;
+    showPrompt = defaultShowPrompt;
+    closePrompt = defaultClosePrompt;
+    setDispatchers = (showDialog, closeDialog, showPrompt, closePrompt)=>{
+        this.showDialog = showDialog;
+        this.closeDialog = closeDialog;
+        this.showPrompt = showPrompt;
+        this.closePrompt = closePrompt;
+    };
+}
+const DialogContext = /*#__PURE__*/ createContext(new DialogContextObject());
+const DialogHost = ({ context })=>{
+    const { dialog, setDialogState, prompt, setPromptState } = useDialogHost();
+    const showDialog = useCallback((dialogContent, title, actionButtons, hideCloseButton)=>{
+        setDialogState({
+            actions: actionButtons,
+            content: dialogContent,
+            title,
+            hideCloseButton
+        });
+    }, [
+        setDialogState
+    ]);
+    const closeDialog = useCallback(()=>{
+        setDialogState(void 0);
+    }, [
+        setDialogState
+    ]);
+    const showPrompt = useCallback((content, promptProps)=>{
+        setPromptState({
+            content,
+            promptProps
+        });
+    }, [
+        setPromptState
+    ]);
+    const closePrompt = useCallback(()=>{
+        setPromptState(void 0);
+    }, [
+        setPromptState
+    ]);
+    useMemo(()=>{
+        context.setDispatchers(showDialog, closeDialog, showPrompt, closePrompt);
+    }, [
+        closeDialog,
+        closePrompt,
+        context,
+        showDialog,
+        showPrompt
+    ]);
+    return dialog ?? prompt;
+};
+const ModalProvider = ({ children })=>{
+    const context = useContext(DialogContext);
+    return /*#__PURE__*/ jsxs(DialogContext.Provider, {
+        value: context,
+        children: [
+            /*#__PURE__*/ jsx(DialogHost, {
+                context: context
+            }),
+            children
+        ]
+    });
+};
+const useModal = ()=>{
+    const { closeDialog, closePrompt, showDialog, showPrompt } = useContext(DialogContext);
+    return {
+        showDialog,
+        closeDialog,
+        showPrompt,
+        closePrompt
+    };
+};
+export { ModalProvider, useModal };

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

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

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

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