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

package/src/flexbox/Splitter.css.js

@@ -0,0 +1,57 @@
+const css = `
+.vuuSplitter {
+  --splitter-background: var(--salt-separable-secondary-borderColor);
+  --splitter-borderColor: var(--salt-separable-secondary-borderColor);
+  --splitter-borderStyle: none;
+  --splitter-borderWidth: 0;
+  --splitter-size: 3px;
+  background-color: var(--splitter-background);
+  border-color: var(--splitter-borderColor);
+  border-style: var(--splitter-borderStyle);
+  border-width: var(--splitter-borderWidth);
+  box-sizing: border-box;
+  z-index: 1;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.vuuSplitter:hover, .vuuSplitter-active {
+  --splitter-background: var(--salt-separable-primary-borderColor);
+}
+
+.vuuSplitter-column {
+  cursor: ns-resize;
+  height: var(--splitter-size);
+}
+
+.vuuSplitter:not(.vuuSplitter-column) {
+  cursor: ew-resize;
+  width: var(--splitter-size);
+}
+
+.vuuSplitter-grab-zone {
+  cursor: inherit;
+  background-color: #ff000003;
+  position: absolute;
+}
+
+.vuuSplitter-column .vuuSplitter-grab-zone {
+  inset: -5px 0;
+}
+
+.vuuSplitter:not(.vuuSplitter-column) .vuuSplitter-grab-zone {
+  inset: 0 -5px;
+}
+
+.vuuSplitter-active:not(.vuuSplitter-column) .vuuSplitter-grab-zone {
+  background-color: #ffffff03;
+  left: -150px;
+  right: -150px;
+}
+
+
+`;
+export default css;

package/src/flexbox/Splitter.js

@@ -0,0 +1,112 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import react, { useCallback, useRef, useState } from "react";
+import Splitter_0 from "./Splitter.css";
+const classBase = "vuuSplitter";
+const Splitter_Splitter = /*#__PURE__*/ react.memo(function({ column, index, onDrag, onDragEnd, onDragStart, style }) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-splitter",
+        css: Splitter_0,
+        window: targetWindow
+    });
+    const ignoreClick = useRef(void 0);
+    const rootRef = useRef(null);
+    const lastPos = useRef(0);
+    const [active, setActive] = useState(false);
+    const handleKeyDownDrag = useCallback(({ key, shiftKey })=>{
+        const distance = shiftKey ? 10 : 1;
+        if (column && "ArrowDown" === key) onDrag(index, distance);
+        else if (column && "ArrowUp" === key) onDrag(index, -distance);
+        else if (column || "ArrowLeft" !== key) {
+            if (!column && "ArrowRight" === key) onDrag(index, distance);
+        } else onDrag(index, -distance);
+    }, [
+        column,
+        index,
+        onDrag
+    ]);
+    const handleKeyDownInitDrag = useCallback((evt)=>{
+        const { key } = evt;
+        const horizontalMove = "ArrowLeft" === key || "ArrowRight" === key;
+        const verticalMove = "ArrowUp" === key || "ArrowDown" === key;
+        if (column && verticalMove || !column && horizontalMove) {
+            onDragStart(index);
+            handleKeyDownDrag(evt);
+            keyDownHandlerRef.current = handleKeyDownDrag;
+        }
+    }, [
+        column,
+        handleKeyDownDrag,
+        index,
+        onDragStart
+    ]);
+    const keyDownHandlerRef = useRef(handleKeyDownInitDrag);
+    const handleKeyDown = (evt)=>keyDownHandlerRef.current(evt);
+    const handleMouseMove = useCallback((e)=>{
+        ignoreClick.current = true;
+        const pos = e[column ? "clientY" : "clientX"];
+        const diff = pos - lastPos.current;
+        if (pos && pos !== lastPos.current) onDrag(index, diff);
+        lastPos.current = pos;
+    }, [
+        column,
+        index,
+        onDrag
+    ]);
+    const handleMouseUp = useCallback(()=>{
+        window.removeEventListener("mousemove", handleMouseMove, false);
+        window.removeEventListener("mouseup", handleMouseUp, false);
+        onDragEnd();
+        setActive(false);
+        rootRef.current?.focus();
+    }, [
+        handleMouseMove,
+        onDragEnd,
+        setActive
+    ]);
+    const handleMouseDown = useCallback((e)=>{
+        lastPos.current = column ? e.clientY : e.clientX;
+        onDragStart(index);
+        window.addEventListener("mousemove", handleMouseMove, false);
+        window.addEventListener("mouseup", handleMouseUp, false);
+        e.preventDefault();
+        setActive(true);
+    }, [
+        column,
+        handleMouseMove,
+        handleMouseUp,
+        index,
+        onDragStart,
+        setActive
+    ]);
+    const handleClick = ()=>{
+        if (ignoreClick.current) ignoreClick.current = false;
+        else rootRef.current?.focus();
+    };
+    const handleBlur = ()=>{
+        keyDownHandlerRef.current = handleKeyDownInitDrag;
+    };
+    const className = clsx(classBase, {
+        [`${classBase}-active`]: active,
+        [`${classBase}-column`]: column
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: className,
+        "data-splitter": true,
+        ref: rootRef,
+        role: "separator",
+        style: style,
+        onBlur: handleBlur,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onMouseDown: handleMouseDown,
+        tabIndex: 0,
+        children: /*#__PURE__*/ jsx("div", {
+            className: `${classBase}-grab-zone`
+        })
+    });
+});
+export { Splitter_Splitter as Splitter };

package/src/flexbox/flexbox-utils.js

@@ -0,0 +1,92 @@
+import { getIntrinsicSize, hasUnboundedFlexStyle } from "../layout-reducer/flexUtils.js";
+import { getProp } from "../utils/index.js";
+const NO_INTRINSIC_SIZE = {};
+const SPLITTER = 1;
+const PLACEHOLDER = 2;
+const isIntrinsicallySized = (item)=>"number" == typeof item.intrinsicSize;
+const getBreakPointValues = (breakPoints, component)=>{
+    const values = {};
+    breakPoints.forEach((breakPoint)=>{
+        values[breakPoint] = getProp(component, breakPoint);
+    });
+    return values;
+};
+const gatherChildMeta = (children, dimension, breakPoints)=>children.map((child, index)=>{
+        const resizeable = getProp(child, "resizeable");
+        const { [dimension]: intrinsicSize } = getIntrinsicSize(child) ?? NO_INTRINSIC_SIZE;
+        const flexOpen = hasUnboundedFlexStyle(child);
+        if (breakPoints) return {
+            index,
+            flexOpen,
+            intrinsicSize,
+            resizeable,
+            ...getBreakPointValues(breakPoints, child)
+        };
+        return {
+            index,
+            flexOpen,
+            intrinsicSize,
+            resizeable
+        };
+    });
+const findSplitterAndPlaceholderPositions = (childMeta)=>{
+    const count = childMeta.length;
+    const allIntrinsic = childMeta.every(isIntrinsicallySized);
+    const splitterPositions = Array(count).fill(0);
+    if (allIntrinsic && count > 0) {
+        splitterPositions[0] = PLACEHOLDER;
+        splitterPositions[count - 1] = PLACEHOLDER;
+    }
+    if (count < 2) return splitterPositions;
+    for(let i = 0, resizeablesLeft = 0; i < count - 1; i++){
+        if (childMeta[i].resizeable && !resizeablesLeft) resizeablesLeft = SPLITTER;
+        splitterPositions[i] += resizeablesLeft;
+    }
+    for(let i = count - 1; i > 0; i--){
+        if (splitterPositions[i] & SPLITTER) splitterPositions[i] -= SPLITTER;
+        if (childMeta[i].resizeable) break;
+    }
+    return splitterPositions;
+};
+const identifyResizeParties = (contentMeta, idx)=>{
+    const idx1 = getLeadingResizeablePos(contentMeta, idx);
+    const idx2 = getTrailingResizeablePos(contentMeta, idx);
+    const participants = -1 !== idx1 && -1 !== idx2 ? [
+        idx1,
+        idx2
+    ] : void 0;
+    const bystanders = identifyResizeBystanders(contentMeta, participants);
+    return [
+        participants,
+        bystanders
+    ];
+};
+function identifyResizeBystanders(contentMeta, participants) {
+    if (participants) {
+        const bystanders = [];
+        for(let i = 0; i < contentMeta.length; i++)if (contentMeta[i].flexOpen && !participants.includes(i)) bystanders.push(i);
+        return bystanders;
+    }
+}
+function getLeadingResizeablePos(contentMeta, idx) {
+    let pos = idx, resizeable = false;
+    while(pos >= 1 && !resizeable){
+        pos -= 1;
+        resizeable = isResizeable(contentMeta, pos);
+    }
+    return pos;
+}
+function getTrailingResizeablePos(contentMeta, idx) {
+    let pos = idx, resizeable = false;
+    const count = contentMeta.length;
+    while(pos < count - 1 && !resizeable){
+        pos += 1;
+        resizeable = isResizeable(contentMeta, pos);
+    }
+    return pos === count ? -1 : pos;
+}
+function isResizeable(contentMeta, idx) {
+    const { placeholder, splitter, resizeable, intrinsicSize } = contentMeta[idx];
+    return Boolean(!splitter && !intrinsicSize && (placeholder || resizeable));
+}
+export { PLACEHOLDER, SPLITTER, findSplitterAndPlaceholderPositions, gatherChildMeta, identifyResizeParties };

package/src/flexbox/index.js

@@ -0,0 +1,2 @@
+export * from "./FlexboxLayout.js";
+export { default as Flexbox } from "./Flexbox.js";

package/src/flexbox/useSplitterResizing.js

@@ -0,0 +1,181 @@
+import { getUniqueId } from "@vuu-ui/vuu-utils";
+import react, { useCallback, useMemo, useRef } from "react";
+import { Placeholder } from "../placeholder/index.js";
+import { Splitter } from "./Splitter.js";
+import { PLACEHOLDER, SPLITTER, findSplitterAndPlaceholderPositions, gatherChildMeta, identifyResizeParties } from "./flexbox-utils.js";
+const originalContentOnly = (meta)=>!meta.splitter && !meta.placeholder;
+const useSplitterResizing = ({ children: childrenProp, onSplitterMoved, style })=>{
+    const rootRef = useRef(null);
+    const flexElementsRef = useRef(void 0);
+    const metaRef = useRef(void 0);
+    const contentRef = useRef(void 0);
+    const assignedKeys = useRef([]);
+    const isColumn = style?.flexDirection === "column";
+    const dimension = isColumn ? "height" : "width";
+    const children = useMemo(()=>Array.isArray(childrenProp) ? childrenProp : react.isValidElement(childrenProp) ? [
+            childrenProp
+        ] : [], [
+        childrenProp
+    ]);
+    const handleDragStart = useCallback((index)=>{
+        const { current: contentMeta } = metaRef;
+        if (contentMeta) {
+            const [participants, bystanders] = identifyResizeParties(contentMeta, index);
+            if (participants) {
+                participants.forEach((index)=>{
+                    const el = rootRef.current?.childNodes[index];
+                    if (el) {
+                        const { size, minSize } = measureElement(el, dimension);
+                        contentMeta[index].currentSize = size;
+                        contentMeta[index].minSize = minSize;
+                    }
+                });
+                if (bystanders) bystanders.forEach((index)=>{
+                    const el = rootRef.current?.childNodes[index];
+                    if (el) {
+                        const { [dimension]: size } = el.getBoundingClientRect();
+                        contentMeta[index].flexBasis = size;
+                    }
+                });
+                if (rootRef.current) {
+                    rootRef.current.classList.add("vuuSplitterResizing");
+                    flexElementsRef.current = Array.from(rootRef.current.querySelectorAll(":scope > div"));
+                }
+            }
+        }
+    }, [
+        dimension
+    ]);
+    const handleDrag = useCallback((idx, distance)=>{
+        const { current: flexElements = [] } = flexElementsRef;
+        if (contentRef.current && metaRef.current) resizeElements(flexElements, metaRef.current, distance);
+    }, []);
+    const handleDragEnd = useCallback(()=>{
+        const contentMeta = metaRef.current;
+        if (contentMeta) {
+            onSplitterMoved?.(contentMeta.filter(originalContentOnly));
+            if (rootRef.current) rootRef.current.classList.remove("vuuSplitterResizing");
+        }
+        contentMeta?.forEach((meta)=>{
+            meta.currentSize = void 0;
+            meta.flexBasis = void 0;
+            meta.flexOpen = false;
+        });
+    }, [
+        onSplitterMoved
+    ]);
+    const createSplitter = useCallback((i)=>react.createElement(Splitter, {
+            column: isColumn,
+            index: i,
+            key: `splitter-${i}`,
+            onDrag: handleDrag,
+            onDragEnd: handleDragEnd,
+            onDragStart: handleDragStart
+        }), [
+        handleDrag,
+        handleDragEnd,
+        handleDragStart,
+        isColumn
+    ]);
+    useMemo(()=>{
+        const [content, meta] = buildContent(children, dimension, createSplitter, assignedKeys.current);
+        metaRef.current = meta;
+        contentRef.current = content;
+    }, [
+        children,
+        createSplitter,
+        dimension
+    ]);
+    return {
+        content: contentRef.current || [],
+        rootRef
+    };
+};
+function buildContent(children, dimension, createSplitter, keys) {
+    const childMeta = gatherChildMeta(children, dimension);
+    const splitterAndPlaceholderPositions = findSplitterAndPlaceholderPositions(childMeta);
+    const content = [];
+    const meta = [];
+    for(let i = 0; i < children.length; i++){
+        const child = children[i];
+        if (0 === i && splitterAndPlaceholderPositions[i] & PLACEHOLDER) {
+            content.push(createPlaceholder(i));
+            meta.push({
+                placeholder: true,
+                shim: true
+            });
+        }
+        if (null == child.key) {
+            const key = keys[i] || (keys[i] = getUniqueId());
+            content.push(react.cloneElement(child, {
+                key
+            }));
+        } else content.push(child);
+        meta.push(childMeta[i]);
+        if (i > 0 && splitterAndPlaceholderPositions[i] & PLACEHOLDER) {
+            content.push(createPlaceholder(i));
+            meta.push({
+                placeholder: true
+            });
+        } else if (splitterAndPlaceholderPositions[i] & SPLITTER) {
+            content.push(createSplitter(content.length));
+            meta.push({
+                splitter: true
+            });
+        }
+    }
+    return [
+        content,
+        meta
+    ];
+}
+function resizeElements(flexElements, contentMeta, distance) {
+    const metaUpdated = updateMeta(contentMeta, distance);
+    if (!metaUpdated) return;
+    flexElements.forEach((element, idx)=>{
+        const meta = contentMeta[idx];
+        const { currentSize, flexOpen, flexBasis, splitter } = meta;
+        const hasCurrentSize = void 0 !== currentSize;
+        if (!splitter && (hasCurrentSize || flexOpen)) {
+            const size = hasCurrentSize ? meta.currentSize : flexBasis;
+            element.style.flexBasis = `${size}px`;
+        }
+    });
+}
+function updateMeta(contentMeta, distance) {
+    const resizeTargets = [];
+    contentMeta.forEach((meta, idx)=>{
+        if (void 0 !== meta.currentSize) resizeTargets.push(idx);
+    });
+    const target1 = distance < 0 ? resizeTargets[0] : resizeTargets[1];
+    const { currentSize = 0, minSize = 0 } = contentMeta[target1];
+    if (currentSize === minSize) return false;
+    if (Math.abs(distance) > currentSize - minSize) {
+        const multiplier = distance < 0 ? -1 : 1;
+        distance = Math.max(0, currentSize - minSize) * multiplier;
+    }
+    const leadingItem = contentMeta[resizeTargets[0]];
+    const { currentSize: leadingSize = 0 } = leadingItem;
+    leadingItem.currentSize = leadingSize + distance;
+    const trailingItem = contentMeta[resizeTargets[1]];
+    const { currentSize: trailingSize = 0 } = trailingItem;
+    trailingItem.currentSize = trailingSize - distance;
+    return true;
+}
+function createPlaceholder(index) {
+    return react.createElement(Placeholder, {
+        shim: 0 === index,
+        key: `placeholder-${index}`
+    });
+}
+function measureElement(el, dimension) {
+    const { [dimension]: size } = el.getBoundingClientRect();
+    const style = getComputedStyle(el);
+    const minSizeVal = style.getPropertyValue(`min-${dimension}`);
+    const minSize = minSizeVal.endsWith("px") ? parseInt(minSizeVal, 10) : 0;
+    return {
+        size,
+        minSize
+    };
+}
+export { useSplitterResizing };

package/src/index.js

@@ -0,0 +1,20 @@
+export * from "./dock-layout/index.js";
+export * from "./drag-drop/index.js";
+export * from "./flexbox/index.js";
+export * from "./layout-header/index.js";
+export * from "./layout-provider/index.js";
+export * from "./layout-reducer/index.js";
+export * from "./LayoutContainer.js";
+export * from "./palette/index.js";
+export * from "./placeholder/index.js";
+export * from "./responsive/index.js";
+export * from "./stack/index.js";
+export * from "./use-persistent-state.js";
+export * from "./utils/index.js";
+export * from "./layout-view/viewTypes.js";
+export * from "./layout-view/View.js";
+export * from "./layout-view/useViewBroadcastChannel.js";
+export { default as Component } from "./Component.js";
+export { Action } from "./layout-action.js";
+export { useViewActionDispatcher } from "./layout-view-actions/useViewActionDispatcher.js";
+export { ViewContext, useViewContext, useViewDispatch } from "./layout-view-actions/ViewContext.js";

package/src/layout-action.js

@@ -0,0 +1,20 @@
+const Action = {
+    ADD: "add",
+    BLUR: "blur",
+    BLUR_SPLITTER: "blur-splitter",
+    DRAG_START: "drag-start",
+    DRAG_STARTED: "drag-started",
+    DRAG_DROP: "drag-drop",
+    FOCUS: "focus",
+    FOCUS_SPLITTER: "focus-splitter",
+    INITIALIZE: "initialize",
+    LAYOUT_RESIZE: "layout-resize",
+    MAXIMIZE: "maximize",
+    MINIMIZE: "minimize",
+    REMOVE: "remove",
+    REPLACE: "replace",
+    RESTORE: "restore",
+    SAVE: "save",
+    SPLITTER_RESIZE: "splitter-resize"
+};
+export { Action };

package/src/layout-header/ActionButton.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const ActionButton = ({ actionId, className, iconName, onClick, ...props })=>{
+    const handleClick = (evt)=>{
+        onClick(evt, actionId);
+    };
+    return /*#__PURE__*/ jsx("button", {
+        ...props,
+        className: clsx("ActionButton", className),
+        onClick: handleClick,
+        title: "Close View"
+    });
+};
+var layout_header_ActionButton = ActionButton;
+export default layout_header_ActionButton;

package/src/layout-header/Header.css.js

@@ -0,0 +1,32 @@
+const css = `
+.vuuHeader {
+  --saltButton-height: 24px;
+  --saltButton-width: 24px;
+  padding: 0 var(--salt-spacing-100);
+
+  & [data-align="end"] {
+    margin-left: auto;
+  }
+
+  & [data-align="end"] ~ [data-align="end"] {
+    margin-left: 0;
+  }
+
+  &:hover {
+    & .vuuHeader-edit {
+      visibility: visible;
+    }
+  }
+}
+
+.vuuHeader-edit {
+  visibility: hidden;
+}
+
+.salt-density-high .vuuHeader {
+  --saltToolbarField-marginTop: 0;
+}
+
+
+`;
+export default css;

package/src/layout-header/Header.js

@@ -0,0 +1,99 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { EditableLabel, IconButton } from "@vuu-ui/vuu-ui-controls";
+import clsx from "clsx";
+import { cloneElement } from "react";
+import { useHeader } from "./useHeader.js";
+import Header from "./Header.css";
+const classBase = "vuuHeader";
+const Header_Header = ({ allowRename = false, className: classNameProp, contributions, collapsed, closeable, onCollapse, onEditTitle, onExpand, orientation: orientationProp = "horizontal", style, title = "Untitled" })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-header",
+        css: Header,
+        window: targetWindow
+    });
+    const { editing, focusTitle, labelFieldRef, onClickEdit, onClose, onExitEditMode, onMouseDown, onTitleKeyDown, onToggleCollapse, onToggleExpand, setValue, value } = useHeader({
+        onCollapse,
+        onEditTitle,
+        onExpand,
+        title
+    });
+    const handleButtonMouseDown = (evt)=>{
+        evt.stopPropagation();
+    };
+    const orientation = collapsed || orientationProp;
+    const className = clsx(classBase, classNameProp, `${classBase}-${orientation}`);
+    const toolbarItems = [];
+    const postTitleContributedItems = [];
+    const actionButtons = [];
+    const allowCollapse = "boolean" == typeof collapsed || "string" == typeof collapsed;
+    contributions?.forEach((contribution, i)=>{
+        switch(contribution.location){
+            case "pre-title":
+                toolbarItems.push(/*#__PURE__*/ cloneElement(contribution.content, {
+                    key: i
+                }));
+                break;
+            default:
+                postTitleContributedItems.push(/*#__PURE__*/ cloneElement(contribution.content, {
+                    key: i
+                }));
+        }
+    });
+    allowCollapse && toolbarItems.push(/*#__PURE__*/ jsx(IconButton, {
+        className: clsx(`${classBase}-toggle`, {
+            [`${classBase}-collapsed`]: collapsed
+        }),
+        "data-embedded": true,
+        icon: collapsed ? "chevron-open" : "chevron-down",
+        onClick: collapsed ? onToggleExpand : onToggleCollapse,
+        size: 20,
+        tabIndex: 0,
+        appearance: "transparent",
+        sentiment: "neutral"
+    }, "collapse-button"));
+    title && toolbarItems.push(/*#__PURE__*/ jsx(EditableLabel, {
+        className: `${classBase}-title`,
+        editing: editing,
+        value: value,
+        onChange: setValue,
+        onMouseDownCapture: focusTitle,
+        onExitEditMode: onExitEditMode,
+        onKeyDown: onTitleKeyDown,
+        ref: labelFieldRef
+    }, "title"));
+    allowRename && toolbarItems.push(/*#__PURE__*/ jsx(IconButton, {
+        className: `${classBase}-edit`,
+        "data-embedded": true,
+        icon: "edit",
+        onClick: onClickEdit,
+        onMouseDown: handleButtonMouseDown,
+        tabIndex: 0,
+        variant: "secondary"
+    }, "edit-button"));
+    closeable && actionButtons.push(/*#__PURE__*/ jsx(IconButton, {
+        appearance: "transparent",
+        "data-embedded": true,
+        icon: "close",
+        onClick: onClose,
+        onMouseDown: handleButtonMouseDown,
+        sentiment: "neutral"
+    }, "close"));
+    postTitleContributedItems.length > 0 && toolbarItems.push(/*#__PURE__*/ jsx("div", {
+        "data-align": "end",
+        children: postTitleContributedItems
+    }, "contributions"));
+    actionButtons.length > 0 && toolbarItems.push(/*#__PURE__*/ jsx("div", {
+        "data-align": "end",
+        children: actionButtons
+    }, "actions"));
+    return /*#__PURE__*/ jsx("div", {
+        className: clsx("vuuToolbarProxy", className),
+        style: style,
+        onMouseDown: onMouseDown,
+        children: toolbarItems
+    });
+};
+export { Header_Header as Header };

package/src/layout-header/index.js

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