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

package/src/flexbox/Splitter.css.js

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

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

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

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

package/src/flexbox/useSplitterResizing.js

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

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

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

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

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

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

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