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

package/src/stack/Stack.css.js

@@ -1,44 +0,0 @@
-const css = `
-.vuuTabs {
-  box-sizing: border-box;
-  flex-direction: column;
-  display: flex;
-}
-
-.vuuTabs-horizontal {
-  --vuu-tabs-border-style: none solid none none;
-  flex-direction: row;
-}
-
-.vuuTabs .Toolbar:before {
-  content: "";
-  background: var(--grey60);
-  width: 100%;
-  height: 1px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-.vuuTabs-tabPanel {
-  flex-direction: column;
-  flex: 1;
-  display: flex;
-}
-
-.vuuTabs-tabPanel > * {
-  flex: auto;
-}
-
-.vuuTabHeader + .vuuView > .vuuHeader {
-  height: 0;
-  overflow: hidden;
-}
-
-.Layout-svg-button {
-  --spacing-medium: 5px;
-}
-
-
-`;
-export default css;

package/src/stack/Stack.js

@@ -1,98 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
-import { 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, useCallback, useRef } from "react";
-import { getDefaultTabLabel } from "../layout-reducer/index.js";
-import Stack_0 from "./Stack.css";
-const classBase = "vuuTabs";
-const getDefaultTabIcon = ()=>void 0;
-const getChildElements = (children)=>{
-    const elements = [];
-    react.Children.forEach(children, (child)=>{
-        if (/*#__PURE__*/ react.isValidElement(child)) elements.push(child);
-        else console.warn("Stack has unexpected child element type");
-    });
-    return elements;
-};
-const DefaultTabstripProps = {
-    allowAddTab: false,
-    allowCloseTab: false,
-    allowRenameTab: false
-};
-const Stack_Stack = /*#__PURE__*/ forwardRef(function({ TabstripProps = DefaultTabstripProps, active = 0, children, className: classNameProp, getTabIcon = getDefaultTabIcon, getTabLabel = getDefaultTabLabel, id: idProp, keyBoardActivation = "manual", onAddTab, onMoveTab, onTabClose, onTabEdit, onTabSelectionChanged, showTabs = "top", style }, ref) {
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-stack",
-        css: Stack_0,
-        window: targetWindow
-    });
-    const id = useId(idProp);
-    const tabLabelsRef = useRef([]);
-    const { allowCloseTab, allowRenameTab, className: tabstripClassName } = TabstripProps;
-    const handleExitEditMode = useCallback((_oldText, newText, _allowDeactivation, tabIndex)=>{
-        onTabEdit?.(tabIndex, newText);
-    }, [
-        onTabEdit
-    ]);
-    const activeChild = ()=>{
-        if (/*#__PURE__*/ react.isValidElement(children)) return children;
-        if (Array.isArray(children)) return children[active] ?? null;
-        return null;
-    };
-    tabLabelsRef.current.length = 0;
-    const renderTabs = ()=>getChildElements(children).map((child, idx)=>{
-            const { closeable = allowCloseTab, id: childId = `${id}-${idx}`, "data-tab-location": tabLocation } = child.props;
-            const label = getTabLabel(child, idx, tabLabelsRef.current);
-            tabLabelsRef.current.push(label);
-            return /*#__PURE__*/ jsx(Tab, {
-                ariaControls: childId,
-                "data-icon": getTabIcon(child, idx),
-                id: `${childId}-tab`,
-                index: idx,
-                label: label,
-                location: tabLocation,
-                closeable: closeable,
-                editable: allowRenameTab
-            }, childId);
-        });
-    const child = activeChild();
-    const isHorizontal = "left" === showTabs || "right" === showTabs;
-    const tabstripOrientation = isHorizontal ? "vertical" : "horizontal";
-    return /*#__PURE__*/ jsxs("div", {
-        className: clsx(classBase, classNameProp, {
-            [`${classBase}-horizontal`]: isHorizontal
-        }),
-        style: style,
-        id: id,
-        ref: ref,
-        children: [
-            showTabs ? /*#__PURE__*/ jsx(Tabstrip, {
-                "aria-label": "data tabs",
-                ...TabstripProps,
-                activeTabIndex: TabstripProps?.activeTabIndex ?? (null === child ? -1 : active),
-                allowDragDrop: false !== TabstripProps.allowDragDrop,
-                animateSelectionThumb: true,
-                className: clsx("vuuTabHeader", tabstripClassName),
-                keyBoardActivation: keyBoardActivation,
-                onActiveChange: onTabSelectionChanged,
-                onAddTab: onAddTab,
-                onCloseTab: onTabClose,
-                onExitEditMode: handleExitEditMode,
-                onMoveTab: onMoveTab,
-                orientation: tabstripOrientation,
-                children: renderTabs()
-            }) : null,
-            /*#__PURE__*/ jsx("div", {
-                "aria-labelledby": `${id}-${active}`,
-                className: `${classBase}-tabPanel`,
-                role: "tabpanel",
-                children: child
-            })
-        ]
-    });
-});
-Stack_Stack.displayName = "Stack";
-export { Stack_Stack as Stack };

package/src/stack/StackLayout.js

@@ -1,116 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { registerComponent, useId } from "@vuu-ui/vuu-utils";
-import react, { useCallback, useRef } from "react";
-import { useLayoutCreateNewChild, useLayoutProviderDispatch } from "../layout-provider/index.js";
-import { getDefaultTabLabel } from "../layout-reducer/index.js";
-import { useViewActionDispatcher } from "../layout-view-actions/useViewActionDispatcher.js";
-import { useViewBroadcastChannel } from "../layout-view/useViewBroadcastChannel.js";
-import { usePersistentState } from "../use-persistent-state.js";
-import { Stack } from "./Stack.js";
-const StackLayout = (props)=>{
-    const rootRef = useRef(null);
-    const dispatch = useLayoutProviderDispatch();
-    const { loadState } = usePersistentState();
-    const { createNewChild: createNewChildProp, id: idProp, onTabSelectionChanged, path, ...restProps } = props;
-    const { children } = props;
-    const id = useId(idProp);
-    const sendMessage = useViewBroadcastChannel();
-    const [dispatchViewAction] = useViewActionDispatcher(id, rootRef, path);
-    const createNewChildFromContext = useLayoutCreateNewChild();
-    const createNewChild = createNewChildProp ?? createNewChildFromContext;
-    const handleTabSelection = (nextIdx)=>{
-        if (path) {
-            dispatch({
-                type: "switch-tab",
-                id,
-                path,
-                nextIdx
-            });
-            onTabSelectionChanged?.(nextIdx);
-        }
-    };
-    const handleTabClose = useCallback((tabIndex)=>{
-        if (Array.isArray(children)) {
-            const { props: { "data-path": dataPath, path = dataPath } } = children[tabIndex];
-            sendMessage({
-                type: "layout-closed",
-                path
-            });
-            setTimeout(()=>{
-                dispatch({
-                    type: "remove",
-                    path
-                });
-            }, 100);
-        }
-    }, [
-        children,
-        dispatch,
-        sendMessage
-    ]);
-    const handleTabAdd = useCallback(()=>{
-        if (path) {
-            const tabIndex = react.Children.count(children);
-            dispatch({
-                type: "add",
-                path,
-                component: createNewChild(tabIndex)
-            });
-        }
-    }, [
-        children,
-        createNewChild,
-        dispatch,
-        path
-    ]);
-    const handleMoveTab = useCallback((fromIndex, toIndex)=>{
-        if (path) dispatch({
-            fromIndex,
-            toIndex,
-            path,
-            type: "move-child"
-        });
-    }, [
-        dispatch,
-        path
-    ]);
-    const handleMouseDown = async (e, index)=>{
-        let readyToDrag;
-        const preDragActivity = async ()=>new Promise((resolve)=>{
-                console.log("preDragActivity: Ok, gonna release the drag");
-                readyToDrag = resolve;
-            });
-        const dragging = await dispatchViewAction({
-            type: "mousedown",
-            index,
-            preDragActivity
-        }, e);
-        if (dragging) readyToDrag?.(void 0);
-    };
-    const handleTabEdit = (tabIndex, text)=>{
-        dispatch({
-            type: "set-title",
-            path: `${path}.${tabIndex}`,
-            title: text
-        });
-    };
-    const getTabLabel = (component, idx, existingLabels)=>{
-        const { id, title } = component.props;
-        return loadState(id, "view-title") || title || getDefaultTabLabel(component, idx, existingLabels);
-    };
-    return /*#__PURE__*/ jsx(Stack, {
-        ...restProps,
-        id: id,
-        getTabLabel: getTabLabel,
-        onMouseDown: handleMouseDown,
-        onMoveTab: handleMoveTab,
-        onAddTab: handleTabAdd,
-        onTabClose: handleTabClose,
-        onTabEdit: handleTabEdit,
-        onTabSelectionChanged: handleTabSelection,
-        ref: rootRef
-    });
-};
-StackLayout.displayName = "Stack";
-registerComponent("Stack", StackLayout, "container");
-export { StackLayout };

package/src/stack/index.js

@@ -1,3 +0,0 @@
-export * from "./Stack.js";
-export * from "./StackLayout.js";
-export * from "./stackTypes.js";

package/src/tabs/TabPanel.css.js

@@ -1,17 +0,0 @@
-const css = `
-.TabPanel {
-  flex: 1;
-  display: flex;
-}
-
-.TabPanel > * {
-  height: 100%;
-}
-
-.TabPanel > .View > .Header {
-  display: none;
-}
-
-
-`;
-export default css;

package/src/tabs/TabPanel.js

@@ -1,11 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "./TabPanel.css";
-const TabPanel = ({ ariaLabelledBy, children, id })=>/*#__PURE__*/ jsx("div", {
-        className: "TabPanel",
-        id: id,
-        role: "tabpanel",
-        "aria-labelledby": ariaLabelledBy,
-        children: children
-    });
-var tabs_TabPanel = TabPanel;
-export default tabs_TabPanel;

package/src/tabs/index.js

@@ -1 +0,0 @@
-export { default as TabPanel } from "./TabPanel.js";

package/src/tools/config-wrapper/ConfigWrapper.js

@@ -1,55 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import react, { useState } from "react";
-import { LayoutConfigurator, LayoutTreeViewer } from "../index.js";
-import { followPathToComponent } from "../../index.js";
-const ConfigWrapper = ({ children })=>{
-    const designMode = false;
-    const [layout, setLayout] = useState(children);
-    const [selectedComponent, setSelectedComponent] = useState(children);
-    const handleSelection = (selectedPath)=>{
-        const targetComponent = followPathToComponent(layout, selectedPath);
-        setSelectedComponent(targetComponent);
-    };
-    const handleChange = (property, value)=>{
-        console.log(`change ${property} -> ${value}`);
-        const newComponent = /*#__PURE__*/ react.cloneElement(selectedComponent, {
-            style: {
-                ...selectedComponent.props.style,
-                [property]: value
-            }
-        });
-        setSelectedComponent(newComponent);
-        setLayout(/*#__PURE__*/ react.cloneElement(layout, {}, newComponent));
-    };
-    return /*#__PURE__*/ jsxs("div", {
-        "data-design-mode": `${designMode}`,
-        children: [
-            layout,
-            /*#__PURE__*/ jsx("br", {}),
-            /*#__PURE__*/ jsxs("div", {
-                style: {
-                    display: "flex"
-                },
-                children: [
-                    /*#__PURE__*/ jsx(LayoutConfigurator, {
-                        height: 300,
-                        managedStyle: selectedComponent.props.style,
-                        width: 300,
-                        onChange: handleChange,
-                        style: void 0
-                    }),
-                    /*#__PURE__*/ jsx(LayoutTreeViewer, {
-                        layout: layout,
-                        onSelect: handleSelection,
-                        style: {
-                            width: 300,
-                            height: 300,
-                            backgroundColor: "#ccc"
-                        }
-                    })
-                ]
-            })
-        ]
-    });
-};
-export { ConfigWrapper };

package/src/tools/config-wrapper/index.js

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

package/src/tools/devtools-box/layout-configurator.css.js

@@ -1,113 +0,0 @@
-const css = `
-[data-design-mode="true"] .Component {
-  filter: grayscale();
-  opacity: .4;
-}
-
-[data-design-mode="true"] .Component:after {
-  color: #000;
-  content: "Component";
-  background-color: #ff0;
-  height: 12px;
-}
-
-.LayoutConfigurator {
-  --margin-color: #f3cea5;
-  --border-color: #fddda0;
-  --padding-color: #c6d092;
-  --content-color: #8cb6c0;
-  background-color: var(--margin-color);
-  flex-direction: column;
-  align-items: stretch;
-  display: flex;
-}
-
-.LayoutConfigurator .layout-outer {
-  flex-direction: column;
-  flex: auto;
-  align-items: stretch;
-  display: flex;
-}
-
-.LayoutBox {
-  --hw-control-font-size: 13px;
-  --hw-text-input-bg: #ffffff4d;
-  --hwTextInput-padding: 3px;
-  --hw-text-input-position: absolute;
-  --hwTextInput-width: 30px;
-  flex: auto;
-}
-
-.LayoutBox > .layout-top {
-  flex-direction: row;
-  flex: 0 0 40px;
-  align-items: center;
-  padding-left: 12px;
-  display: flex;
-  position: relative;
-}
-
-.LayoutBox > .layout-bottom {
-  flex-direction: row;
-  flex: 0 0 40px;
-  align-items: center;
-  display: flex;
-  position: relative;
-}
-
-.LayoutBox > .layout-inner > .layout-right, .LayoutBox > .layout-inner > .layout-left {
-  flex-direction: column;
-  flex: 0 0 40px;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-.layout-top, .layout-bottom {
-  --hw-text-input-margin: 0 0 0 -15px;
-}
-
-.layout-top > .layout-input, .layout-bottom > .layout-input {
-  left: 50%;
-}
-
-.LayoutBox > .layout-inner {
-  flex-direction: row;
-  flex: auto;
-  align-items: stretch;
-  display: flex;
-}
-
-.LayoutBox.layout-margin {
-  background-color: var(--margin-color);
-  border: 2px dashed #000;
-}
-
-.LayoutBox.layout-border {
-  background-color: var(--border-color);
-  border: 2px solid #000;
-}
-
-.LayoutBox.layout-padding {
-  background-color: var(--padding-color);
-  border: 2px dashed #000;
-}
-
-.LayoutBox .layout-content {
-  background-color: var(--content-color);
-  border: 2px solid gray;
-  flex: auto;
-}
-
-.LayoutBox .layout-title {
-  color: #161616;
-  font-size: 11px;
-  line-height: 15px;
-  position: absolute;
-  top: 1px;
-  left: 4px;
-}
-
-
-`;
-export default css;

package/src/tools/devtools-tree/layout-tree-viewer.css.js

@@ -1,17 +0,0 @@
-const css = `
-.hwLayoutTreeNode {
-  cursor: default;
-}
-
-.hwLayoutTreeNode:hover {
-  background-color: #fff3;
-}
-
-.hwLayoutTreeNode[aria-selected="true"] {
-  color: #fff;
-  background-color: #6495ed;
-}
-
-
-`;
-export default css;

package/src/tools/index.js

@@ -1,3 +0,0 @@
-export * from "./config-wrapper/index.js";
-export * from "./devtools-box/layout-configurator.js";
-export * from "./devtools-tree/layout-tree-viewer.js";

package/src/use-persistent-state.js

@@ -1,43 +0,0 @@
-import { useCallback } from "react";
-const persistentState = new Map();
-const getPersistentState = (id)=>persistentState.get(id);
-const hasPersistentState = (id)=>persistentState.has(id);
-const setPersistentState = (id, value)=>persistentState.set(id, value);
-const usePersistentState = ()=>{
-    const loadState = useCallback((id, key)=>{
-        const state = persistentState.get(id);
-        if (state) {
-            if (void 0 !== key) return state[key];
-            return state;
-        }
-    }, []);
-    const saveState = useCallback((id, key, data)=>{
-        if (void 0 === key) persistentState.set(id, data);
-        else if (persistentState.has(id)) {
-            const state = persistentState.get(id);
-            persistentState.set(id, {
-                ...state,
-                [key]: data
-            });
-        } else persistentState.set(id, {
-            [key]: data
-        });
-    }, []);
-    const purgeState = useCallback((id, key)=>{
-        if (persistentState.has(id)) if (void 0 === key) persistentState.delete(id);
-        else {
-            const state = persistentState.get(id);
-            if (state[key]) {
-                const { [key]: _doomedState, ...rest } = persistentState.get(id);
-                if (Object.keys(rest).length > 0) persistentState.set(id, rest);
-                else persistentState.delete(id);
-            }
-        }
-    }, []);
-    return {
-        loadState,
-        saveState,
-        purgeState
-    };
-};
-export { getPersistentState, hasPersistentState, setPersistentState, usePersistentState };

package/src/utils/index.js

@@ -1,5 +0,0 @@
-export * from "./pathUtils.js";
-export * from "./propUtils.js";
-export * from "./refUtils.js";
-export * from "./styleUtils.js";
-export * from "./typeOf.js";