@vuu-ui/vuu-layout 2.1.18 → 2.1.19-beta.2

package/src/layout-view/useViewBroadcastChannel.js

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useRef } from "react";
+const isMessageForSelf = (message, id, path)=>{
+    if (id && message.targetId === id) return true;
+    if (message.path && path?.startsWith(message.path)) return true;
+    return false;
+};
+const useViewBroadcastChannel = (id, path, onMessageReceived)=>{
+    const broadcastChannelRef = useRef(void 0);
+    useEffect(()=>{
+        const broadcastChannel = new BroadcastChannel("vuu");
+        broadcastChannel.onmessage = (evt)=>{
+            if (isMessageForSelf(evt.data, id, path)) onMessageReceived?.(evt.data);
+        };
+        broadcastChannelRef.current = broadcastChannel;
+        return ()=>{
+            broadcastChannel.close();
+            broadcastChannelRef.current = void 0;
+        };
+    }, [
+        id,
+        onMessageReceived,
+        path
+    ]);
+    const sendMessage = useCallback((message)=>{
+        broadcastChannelRef.current?.postMessage(message);
+    }, []);
+    return sendMessage;
+};
+export { useViewBroadcastChannel };

package/src/layout-view/useViewResize.js

@@ -0,0 +1,27 @@
+import { WidthHeight, useResizeObserver } from "../responsive/index.js";
+import { useCallback, useRef } from "react";
+const NO_MEASUREMENT = [];
+const useViewResize = ({ mainRef, resize = "responsive", rootRef })=>{
+    const deferResize = "defer" === resize;
+    const mainSize = useRef({});
+    const resizeHandle = useRef(void 0);
+    const setMainSize = useCallback(()=>{
+        if (mainRef.current) {
+            mainRef.current.style.height = mainSize.current.height + "px";
+            mainRef.current.style.width = mainSize.current.width + "px";
+        }
+        resizeHandle.current = void 0;
+    }, [
+        mainRef
+    ]);
+    const onResize = useCallback(({ height, width })=>{
+        mainSize.current.height = height;
+        mainSize.current.width = width;
+        if (null !== resizeHandle.current) clearTimeout(resizeHandle.current);
+        resizeHandle.current = window.setTimeout(setMainSize, 40);
+    }, [
+        setMainSize
+    ]);
+    useResizeObserver(rootRef, deferResize ? WidthHeight : NO_MEASUREMENT, onResize, deferResize);
+};
+export { useViewResize };

package/src/layout-view-actions/ViewContext.js

@@ -0,0 +1,11 @@
+import react, { useContext } from "react";
+const NO_CONTEXT = {
+    dispatch: null
+};
+const ViewContext = react.createContext(NO_CONTEXT);
+const useViewDispatch = ()=>{
+    const context = useContext(ViewContext);
+    return context?.dispatch ?? null;
+};
+const useViewContext = ()=>useContext(ViewContext);
+export { ViewContext, useViewContext, useViewDispatch };

package/src/layout-view-actions/useViewActionDispatcher.js

@@ -0,0 +1,116 @@
+import { useSessionDataSource } from "@vuu-ui/vuu-data-react";
+import { useCallback } from "react";
+import { useLayoutProviderDispatch } from "../layout-provider/LayoutProvider.js";
+import { useViewBroadcastChannel } from "../layout-view/useViewBroadcastChannel.js";
+import { usePersistentState } from "../use-persistent-state.js";
+import { useViewContributions } from "./useViewContributions.js";
+const useViewActionDispatcher = (id, rootRef, viewPath, dropTargets)=>{
+    const { purgeState } = usePersistentState();
+    const { clearDataSource: clearDataSourceFromSessionState } = useSessionDataSource();
+    const { clearContributions, contributions, updateContributions } = useViewContributions({
+        sessionKey: id
+    });
+    const dispatchLayoutAction = useLayoutProviderDispatch();
+    const unsubscribeAndClearState = useCallback(()=>{
+        clearDataSourceFromSessionState(id, true);
+        purgeState(id);
+    }, [
+        clearDataSourceFromSessionState,
+        id,
+        purgeState
+    ]);
+    const handleRemove = useCallback(()=>{
+        unsubscribeAndClearState();
+        dispatchLayoutAction({
+            type: "remove",
+            path: viewPath
+        });
+    }, [
+        unsubscribeAndClearState,
+        dispatchLayoutAction,
+        viewPath
+    ]);
+    const handleMouseDown = useCallback(async (evt, index, preDragActivity)=>{
+        evt.stopPropagation();
+        const dragRect = rootRef.current?.getBoundingClientRect();
+        return new Promise((resolve, reject)=>{
+            dispatchLayoutAction({
+                type: "drag-start",
+                evt,
+                path: void 0 === index ? viewPath : `${viewPath}.${index}`,
+                dragRect,
+                preDragActivity,
+                dropTargets,
+                resolveDragStart: resolve,
+                rejectDragStart: reject
+            });
+        });
+    }, [
+        rootRef,
+        dispatchLayoutAction,
+        viewPath,
+        dropTargets
+    ]);
+    const handleMessageReceived = useCallback((message)=>{
+        switch(message.type){
+            case "highlight-on":
+                rootRef?.current?.classList.add("vuuHighlighted");
+                break;
+            case "highlight-off":
+                rootRef?.current?.classList.remove("vuuHighlighted");
+                break;
+            case "layout-closed":
+                unsubscribeAndClearState();
+                break;
+            default:
+                console.log(`received ${message.type} message`);
+        }
+    }, [
+        rootRef,
+        unsubscribeAndClearState
+    ]);
+    const sendMessage = useViewBroadcastChannel(id, viewPath, handleMessageReceived);
+    const dispatchAction = useCallback(async (action, evt)=>{
+        const { type } = action;
+        switch(type){
+            case "collapse":
+            case "expand":
+                return dispatchLayoutAction({
+                    type,
+                    path: action.path ?? viewPath
+                });
+            case "remove":
+                return handleRemove();
+            case "mousedown":
+                return handleMouseDown(evt, action.index, action.preDragActivity);
+            case "add-toolbar-contribution":
+                return updateContributions(action.location, action.content);
+            case "remove-toolbar-contribution":
+                return clearContributions();
+            case "query":
+                return dispatchLayoutAction({
+                    type,
+                    path: action.path,
+                    query: action.query
+                });
+            case "broadcast-message":
+                sendMessage(action.message);
+                break;
+            default:
+                return;
+        }
+    }, [
+        dispatchLayoutAction,
+        viewPath,
+        handleRemove,
+        handleMouseDown,
+        updateContributions,
+        clearContributions,
+        sendMessage
+    ]);
+    return [
+        dispatchAction,
+        contributions
+    ];
+};
+export { useViewActionDispatcher };

package/src/layout-view-actions/useViewContributions.js

@@ -0,0 +1,31 @@
+import { useCallback, useState } from "react";
+const sessionState = new Map();
+const EMPTY_ARRAY = [];
+const useViewContributions = ({ sessionKey })=>{
+    const [contributions, setContributions] = useState(EMPTY_ARRAY);
+    const updateContributions = useCallback((location, content)=>{
+        const updatedContributions = contributions.concat([
+            {
+                location,
+                content
+            }
+        ]);
+        sessionState.set(sessionKey, updatedContributions);
+        setContributions(updatedContributions);
+    }, [
+        contributions,
+        sessionKey
+    ]);
+    const clearContributions = useCallback(()=>{
+        sessionState.delete(sessionKey);
+        setContributions([]);
+    }, [
+        sessionKey
+    ]);
+    return {
+        clearContributions,
+        contributions,
+        updateContributions
+    };
+};
+export { useViewContributions };

package/src/palette/Palette.css.js

@@ -0,0 +1,31 @@
+const css = `
+.vuuPalette {
+  --vuuList-borderStyle: none;
+}
+
+.vuuPalette-horizontal {
+  align-items: center;
+  display: flex;
+}
+
+.vuuPaletteItem {
+  --vuu-icon-color: var(--salt-content-secondary-foreground);
+  --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);
+  gap: var(--salt-spacing-200);
+  padding-left: 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.vuuSimpleDraggableWrapper > .vuuPaletteItem {
+  --vuu-icon-color: var(--salt-selectable-foreground);
+}
+
+.salt-theme .vuuPaletteItem {
+  font-size: 11px;
+  font-weight: normal;
+}
+
+
+`;
+export default css;

package/src/palette/Palette.js

@@ -0,0 +1,85 @@
+import { jsx } from "react/jsx-runtime";
+import { ListBox, Option } from "@salt-ds/core";
+import { queryClosest, registerComponent, uuid } from "@vuu-ui/vuu-utils";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { cloneElement, memo, useCallback } from "react";
+import { useLayoutProviderDispatch } from "../layout-provider/index.js";
+import { View } from "../layout-view/View.js";
+import Palette from "./Palette.css";
+const classBase = "vuuPalette";
+const clonePaletteItem = (paletteItem)=>{
+    const dolly = paletteItem.cloneNode(true);
+    dolly.id = "";
+    delete dolly.dataset.idx;
+    return dolly;
+};
+const wrapInView = (component, viewProps)=>{
+    const id = uuid();
+    return /*#__PURE__*/ jsx(View, {
+        id: id,
+        ...viewProps,
+        children: component
+    }, id);
+};
+const PaletteItem = /*#__PURE__*/ memo(({ className, component, idx, key, value, ViewProps, ...props })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-palette",
+        css: Palette,
+        window: targetWindow
+    });
+    const dispatch = useLayoutProviderDispatch();
+    const handleMouseDown = useCallback((e)=>{
+        const el = queryClosest(e.target, ".vuuPaletteItem", true);
+        const { height, left, top, width } = el.getBoundingClientRect();
+        dispatch({
+            dragRect: {
+                left,
+                top,
+                right: left + width,
+                bottom: top + 150,
+                width,
+                height
+            },
+            dragElement: clonePaletteItem(el),
+            evt: e.nativeEvent,
+            instructions: {
+                DoNotRemove: true,
+                DoNotTransform: true,
+                DriftHomeIfNoDropTarget: true,
+                RemoveDraggableOnDragEnd: true,
+                dragThreshold: 10
+            },
+            path: "*",
+            payload: wrapInView(component, ViewProps),
+            type: "drag-start"
+        });
+    }, [
+        ViewProps,
+        component,
+        dispatch
+    ]);
+    return /*#__PURE__*/ jsx(Option, {
+        className: clsx("vuuPaletteItem", className),
+        "data-draggable": true,
+        "data-index": idx,
+        onMouseDown: handleMouseDown,
+        value: value,
+        ...props
+    });
+});
+PaletteItem.displayName = "PaletteItem";
+const Palette_Palette = ({ ListBoxProps, ViewProps, children, className, orientation = "horizontal", ...props })=>/*#__PURE__*/ jsx(ListBox, {
+        ...ListBoxProps,
+        ...props,
+        className: clsx(classBase, className, `${classBase}-${orientation}`),
+        selected: [],
+        children: children.map((child, idx)=>child.type === PaletteItem ? /*#__PURE__*/ cloneElement(child, {
+                idx,
+                key: idx
+            }) : child)
+    });
+registerComponent("Palette", Palette_Palette, "view");
+export { PaletteItem, Palette_Palette as Palette };

package/src/palette/index.js

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

package/src/placeholder/LayoutStartPanel.css.js

@@ -0,0 +1,35 @@
+const css = `
+.vuuLayoutStartPanel {
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  font-weight: 700;
+  display: flex;
+  flex: none !important;
+}
+
+.vuuLayoutStartPanel-title {
+  color: var(--vuu-color-gray-80);
+  text-align: center;
+  font-size: 28px;
+  line-height: 1.5;
+}
+
+.vuuLayoutStartPanel-text {
+  color: var(--vuu-color-gray-50);
+  max-width: 460px;
+  font-size: 18px;
+  line-height: 1.5;
+}
+
+.vuuLayoutStartPanel-addButton {
+  --vuu-icon-size: 20px;
+  --saltButton-height: 56px;
+  --saltButton-width: 56px;
+  box-shadow: 0 4px 4px #00000040;
+  --saltButton-borderRadius: 28px !important;
+}
+
+
+`;
+export default css;

package/src/placeholder/LayoutStartPanel.js

@@ -0,0 +1,57 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconButton } from "@vuu-ui/vuu-ui-controls";
+import { VuuShellLocation } from "@vuu-ui/vuu-utils";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useMemo, useState } from "react";
+import { useViewContext } from "../layout-view-actions/ViewContext.js";
+import LayoutStartPanel from "./LayoutStartPanel.css";
+const classBase = "vuuLayoutStartPanel";
+const LayoutStartPanel_LayoutStartPanel = (htmlAttributes)=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-layout-start-panel",
+        css: LayoutStartPanel,
+        window: targetWindow
+    });
+    const { dispatch, path } = useViewContext();
+    const [displayState, setDisplayState] = useState();
+    useMemo(()=>{
+        dispatch?.({
+            type: "query",
+            path,
+            query: "PARENT_CONTAINER"
+        }).then((response)=>{
+            response?.parentContainerId === VuuShellLocation.Workspace ? setDisplayState("initial") : setDisplayState("nested");
+        });
+    }, [
+        dispatch,
+        path
+    ]);
+    if (void 0 === displayState) return null;
+    const showInitialState = "initial" === displayState;
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: classBase,
+        children: [
+            showInitialState ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: `${classBase}-title`,
+                        children: "Start by adding a table"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: `${classBase}-text`,
+                        children: "To add a table, drag any of the Vuu Tables to this area or click the button below"
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ jsx(IconButton, {
+                className: `${classBase}-addButton`,
+                icon: "add",
+                variant: "cta"
+            })
+        ]
+    });
+};
+export { LayoutStartPanel_LayoutStartPanel as LayoutStartPanel };

package/src/placeholder/Placeholder.css.js

@@ -0,0 +1,20 @@
+const css = `
+.vuuPlaceholder {
+  --vuuView-justify: center;
+  flex: 1 1 0;
+  align-items: center;
+  display: flex;
+}
+
+.vuuPlaceholder-nested {
+  background-color: red;
+}
+
+.vuuPlaceholder-shim {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+
+`;
+export default css;

package/src/placeholder/Placeholder.js

@@ -0,0 +1,33 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { registerComponent } from "@vuu-ui/vuu-utils";
+import { LayoutStartPanel } from "./LayoutStartPanel.js";
+import { View } from "../layout-view/View.js";
+import Placeholder from "./Placeholder.css";
+const classBase = "vuuPlaceholder";
+const PlaceholderCore = ({ showStartMenu = true })=>/*#__PURE__*/ jsx(Fragment, {
+        children: showStartMenu ? /*#__PURE__*/ jsx(LayoutStartPanel, {}) : null
+    });
+const Placeholder_Placeholder = ({ className: classNameProp, showStartMenu, ...viewProps })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-placeholder",
+        css: Placeholder,
+        window: targetWindow
+    });
+    const className = clsx(classBase, classNameProp);
+    return /*#__PURE__*/ jsx(View, {
+        ...viewProps,
+        className: className,
+        "data-placeholder": true,
+        resizeable: true,
+        children: /*#__PURE__*/ jsx(PlaceholderCore, {
+            showStartMenu: showStartMenu
+        })
+    });
+};
+Placeholder_Placeholder.displayName = "Placeholder";
+registerComponent("Placeholder", Placeholder_Placeholder, "component");
+export { Placeholder_Placeholder as Placeholder };

package/src/placeholder/index.js

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

package/src/responsive/index.js

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

package/src/responsive/measureMinimumNodeSize.js

@@ -0,0 +1,24 @@
+const LEFT_RIGHT = [
+    'left',
+    'right'
+];
+const TOP_BOTTOM = [
+    'top',
+    'bottom'
+];
+function measureMinimumNodeSize(node, dimension = 'width') {
+    const { [dimension]: size } = node.getBoundingClientRect();
+    const { padRight = false, padLeft = false } = node.dataset;
+    const style = getComputedStyle(node);
+    const [start, end] = 'width' === dimension ? LEFT_RIGHT : TOP_BOTTOM;
+    const marginStart = padLeft ? 0 : parseInt(style.getPropertyValue(`margin-${start}`), 10);
+    const marginEnd = padRight ? 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)) minWidth = flexBasis;
+    }
+    return marginStart + minWidth + marginEnd;
+}
+export { measureMinimumNodeSize };

package/src/responsive/useResizeObserver.js

@@ -0,0 +1,109 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+const WidthHeight = [
+    "height",
+    "width"
+];
+const HeightOnly = [
+    "height"
+];
+const WidthOnly = [
+    "width"
+];
+const observedMap = new WeakMap();
+const getTargetSize = (element, contentRect, dimension)=>{
+    switch(dimension){
+        case "height":
+            return contentRect.height;
+        case "scrollHeight":
+            return element.scrollHeight;
+        case "scrollWidth":
+            return element.scrollWidth;
+        case "width":
+            return contentRect.width;
+        default:
+            return 0;
+    }
+};
+const resizeObserver = new ResizeObserver((entries)=>{
+    for (const entry of entries){
+        const { target, contentRect } = entry;
+        const observedTarget = observedMap.get(target);
+        if (observedTarget) {
+            const { onResize, measurements } = observedTarget;
+            let sizeChanged = false;
+            for (const [dimension, size] of Object.entries(measurements)){
+                const newSize = getTargetSize(target, contentRect, dimension);
+                if (newSize !== size) {
+                    sizeChanged = true;
+                    measurements[dimension] = newSize;
+                }
+            }
+            if (sizeChanged) onResize && onResize(measurements);
+        }
+    }
+});
+function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
+    const dimensionsRef = useRef(dimensions);
+    const measure = useCallback((target)=>{
+        const rect = target.getBoundingClientRect();
+        return dimensionsRef.current.reduce((map, dim)=>{
+            map[dim] = getTargetSize(target, rect, dim);
+            return map;
+        }, {});
+    }, []);
+    useLayoutEffect(()=>{
+        const target = ref.current;
+        let cleanedUp = false;
+        async function registerObserver() {
+            observedMap.set(target, {
+                measurements: {}
+            });
+            cleanedUp = false;
+            const { fonts } = document;
+            if (fonts) await fonts.ready;
+            if (!cleanedUp) {
+                const observedTarget = observedMap.get(target);
+                if (observedTarget) {
+                    const measurements = measure(target);
+                    observedTarget.measurements = measurements;
+                    resizeObserver.observe(target);
+                    if (reportInitialSize) onResize(measurements);
+                }
+            }
+        }
+        if (target) {
+            if (observedMap.has(target)) throw Error("useResizeObserver attemping to observe same element twice");
+            registerObserver();
+        }
+        return ()=>{
+            if (target && observedMap.has(target)) {
+                resizeObserver.unobserve(target);
+                observedMap.delete(target);
+                cleanedUp = true;
+            }
+        };
+    }, [
+        ref,
+        measure,
+        reportInitialSize,
+        onResize
+    ]);
+    useLayoutEffect(()=>{
+        const target = ref.current;
+        const record = observedMap.get(target);
+        if (record) {
+            if (dimensionsRef.current !== dimensions) {
+                dimensionsRef.current = dimensions;
+                const measurements = measure(target);
+                record.measurements = measurements;
+            }
+            record.onResize = onResize;
+        }
+    }, [
+        dimensions,
+        measure,
+        ref,
+        onResize
+    ]);
+}
+export { HeightOnly, WidthHeight, WidthOnly, resizeObserver, useResizeObserver };

package/src/responsive/utils.js

@@ -0,0 +1,27 @@
+const COLLAPSIBLE = 'data-collapsible';
+const RESPONSIVE_ATTRIBUTE = {
+    [COLLAPSIBLE]: true,
+    'data-pad-start': true,
+    'data-pad-end': true
+};
+const isResponsiveAttribute = (propName)=>RESPONSIVE_ATTRIBUTE[propName] ?? false;
+const isCollapsible = (propName)=>propName === COLLAPSIBLE;
+const COLLAPSIBLE_VALUE = {
+    dynamic: 'dynamic',
+    instant: 'instant',
+    true: 'instant'
+};
+const collapsibleValue = (value)=>COLLAPSIBLE_VALUE[value] ?? 'none';
+const extractResponsiveProps = (props)=>Object.keys(props).reduce((result, propName)=>{
+        const [toolbarProps, rest] = result;
+        if (isResponsiveAttribute(propName)) {
+            const value = isCollapsible(propName) ? collapsibleValue(props[propName]) : props[propName];
+            toolbarProps[propName] = value;
+            rest[propName] = void 0;
+        }
+        return result;
+    }, [
+        {},
+        {}
+    ]);
+export { extractResponsiveProps, isResponsiveAttribute };