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

package/src/layout-view/useViewBroadcastChannel.js

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

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

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

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

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

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

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

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

package/src/placeholder/LayoutStartPanel.css.js

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

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

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

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

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

package/src/responsive/index.js

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

package/src/responsive/measureMinimumNodeSize.js

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

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

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