@vuu-ui/vuu-shell 3.3.17 → 4.0.0-alpha.10

package/src/shell-layout-templates/context-panel/ContextPanel.css.js

@@ -2,29 +2,30 @@ const css = `
 .vuuContextPanel {
   --header-height: var(--vuuContextPanel-header-height, 48px);
   background: var(--vuuContextPanel-background, var(--salt-container-primary-background));
+  width: var(--vuu-side-panel-width, 0px);
   z-index: 1;
   transition: width .3s ease-in-out;
   position: relative;
-  width: var(--vuu-side-panel-width, 0px) !important;
 }
 
 .vuuContextPanel-expanded {
+  --vuu-side-panel-width: var(--vuuContextPanel-width, 300px);
   --vuu-side-panel-shadow: -4px 4px 4px #0000001a;
   --vuu-side-panel-padding: var(--vuuContextPanel-padding, 24px);
-  --vuu-side-panel-width: var(--vuuContextPanel-width, 300px) !important;
 
-  & .vuuView.vuuContextPanel-inner {
+  & .vuuContextPanel-inner {
     padding: 24px 8px 24px 18px;
   }
 }
 
 .vuuContextPanel-overlay {
-  width: 0 !important;
+  width: 0;
 }
 
-.vuuView.vuuContextPanel-inner {
+.vuuContextPanel-inner {
   background-color: inherit;
   box-shadow: var(--vuu-side-panel-shadow, none);
+  min-width: 0;
   height: 100%;
   width: var(--vuu-side-panel-width, 0px);
   flex-direction: column;
@@ -32,19 +33,18 @@ const css = `
   transition-duration: .3s;
   transition-timing-function: ease-in-out;
   display: flex;
+  position: absolute;
   top: 0;
   right: 0;
   overflow: auto;
-  min-width: 0 !important;
-  position: absolute !important;
 }
 
 .vuuContextPanel-header {
   flex-wrap: nowrap;
+  flex: 0 0 var(--header-height);
   justify-content: space-between;
   align-items: center;
   display: flex;
-  flex: 0 0 var(--header-height) !important;
 }
 
 .vuuContextPanel-title {

package/src/shell-layout-templates/context-panel/ContextPanel.js

@@ -1,14 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { View, layoutFromJson, useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
-import { IconButton, useHideContextPanel } 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 { IconButton, useHideContextPanel } from "@vuu-ui/vuu-ui-controls";
 import clsx from "clsx";
-import react, { useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { useCallback, useLayoutEffect, useRef } from "react";
 import ContextPanel from "./ContextPanel.css";
 const classBase = "vuuContextPanel";
-const ContextPanel_ContextPanel = ({ className: classNameProp, expanded = false, content: contentProp, id, onClose, overlay = false, title })=>{
+const ContextPanel_ContextPanel = ({ className, content, expanded = false, id, onClose, overlay = false, title })=>{
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-context-panel",
@@ -17,49 +15,33 @@ const ContextPanel_ContextPanel = ({ className: classNameProp, expanded = false,
     });
     const hideContextPanel = useHideContextPanel();
     const closeButtonRef = useRef(null);
-    const dispatchLayoutAction = useLayoutProviderDispatch();
     const handleClose = useCallback(()=>{
-        if (hideContextPanel) hideContextPanel();
-        else dispatchLayoutAction({
-            path: `#${VuuShellLocation.ContextPanel}`,
-            propName: "expanded",
-            propValue: false,
-            type: "set-prop"
-        });
+        hideContextPanel?.();
+        onClose?.();
     }, [
-        dispatchLayoutAction,
-        hideContextPanel
+        hideContextPanel,
+        onClose
     ]);
-    const handleKeyDown = useCallback((e)=>{
-        if ("Escape" === e.key) handleClose();
+    const handleKeyDown = useCallback((event)=>{
+        if ("Escape" === event.key) handleClose();
     }, [
         handleClose
     ]);
-    const className = clsx(classBase, classNameProp, {
-        [`${classBase}-expanded`]: expanded,
-        [`${classBase}-inline`]: true !== overlay,
-        [`${classBase}-overlay`]: overlay
-    });
-    const content = useMemo(()=>contentProp && expanded ? /*#__PURE__*/ react.isValidElement(contentProp) ? contentProp : layoutFromJson(contentProp, "context-0") : null, [
-        contentProp,
-        expanded
-    ]);
     useLayoutEffect(()=>{
         if (expanded) closeButtonRef.current?.focus();
-        else onClose?.();
     }, [
-        expanded,
-        onClose
+        expanded
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: clsx(classBase, className, "vuuScrollable", {
-            [`${classBase}-expanded`]: expanded
+            [`${classBase}-expanded`]: expanded,
+            [`${classBase}-inline`]: !overlay,
+            [`${classBase}-overlay`]: overlay
         }),
         id: id,
-        children: /*#__PURE__*/ jsxs(View, {
+        onKeyDown: handleKeyDown,
+        children: /*#__PURE__*/ jsxs("div", {
             className: `${classBase}-inner`,
-            header: false,
-            id: id,
             children: [
                 /*#__PURE__*/ jsxs("div", {
                     className: `${classBase}-header`,
@@ -70,11 +52,11 @@ const ContextPanel_ContextPanel = ({ className: classNameProp, expanded = false,
                         }),
                         /*#__PURE__*/ jsx(IconButton, {
                             appearance: "transparent",
+                            "aria-label": "Close context panel",
                             className: `${classBase}-close`,
                             "data-embedded": true,
                             icon: "close",
                             onClick: handleClose,
-                            onKeyDown: handleKeyDown,
                             ref: closeButtonRef,
                             sentiment: "neutral",
                             size: 16
@@ -83,7 +65,7 @@ const ContextPanel_ContextPanel = ({ className: classNameProp, expanded = false,
                 }),
                 /*#__PURE__*/ jsx("div", {
                     className: `${classBase}-content`,
-                    children: content
+                    children: expanded ? content : null
                 })
             ]
         })

package/src/shell-layout-templates/context-panel/index.js

@@ -1 +1,2 @@
 export * from "./ContextPanel.js";
+export * from "./ApplicationSettingsContextPanel.js";

package/src/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js

@@ -1,44 +1,58 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Flexbox, LayoutContainer } from "@vuu-ui/vuu-layout";
-import { VuuShellLocation } from "@vuu-ui/vuu-utils";
-import { ContextPanel } from "../context-panel/index.js";
+import { GridLayout, GridLayoutItem } from "@vuu-ui/grid-layout";
+import { ApplicationSettingsContextPanel } from "../context-panel/index.js";
 import { SidePanel } from "../side-panel/index.js";
-import { useMemo } from "react";
-const useFullHeightLeftPanel = ({ appHeader, SidePanelProps: LeftSidePanelProps, htmlAttributes })=>useMemo(()=>/*#__PURE__*/ jsxs(Flexbox, {
-            ...htmlAttributes,
-            style: {
-                ...htmlAttributes?.style,
-                flexDirection: "row"
-            },
-            children: [
-                /*#__PURE__*/ jsx(SidePanel, {
-                    ...LeftSidePanelProps,
-                    id: VuuShellLocation.SidePanel
-                }),
-                /*#__PURE__*/ jsxs(Flexbox, {
-                    className: "vuuShell-content",
-                    style: {
-                        flex: 1,
-                        flexDirection: "column"
-                    },
-                    children: [
-                        appHeader,
-                        /*#__PURE__*/ jsx(LayoutContainer, {
-                            id: VuuShellLocation.WorkspaceContainer,
-                            style: {
-                                flex: 1
-                            }
-                        }, "main-content")
-                    ]
-                }),
-                /*#__PURE__*/ jsx(ContextPanel, {
-                    id: VuuShellLocation.ContextPanel,
-                    overlay: true
-                })
+const useFullHeightLeftPanel = ({ appHeader, SidePanelProps, htmlAttributes, workspaceHost })=>{
+    const { onChange: _onChange, ...gridAttributes } = htmlAttributes ?? {};
+    return /*#__PURE__*/ jsxs(GridLayout, {
+        ...gridAttributes,
+        className: `${htmlAttributes?.className ?? ""} vuuShell-staticGrid`,
+        colsAndRows: {
+            cols: [
+                `${SidePanelProps?.sizeOpen ?? 200}px`,
+                "1fr",
+                "0px"
+            ],
+            rows: [
+                "40px",
+                "1fr"
             ]
-        }), [
-        LeftSidePanelProps,
-        appHeader,
-        htmlAttributes
-    ]);
+        },
+        id: "vuu-shell-grid",
+        children: [
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-left-nav",
+                style: {
+                    gridArea: "1/1/3/2"
+                },
+                children: /*#__PURE__*/ jsx(SidePanel, {
+                    ...SidePanelProps,
+                    id: "vuu-side-panel"
+                })
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-header",
+                style: {
+                    gridArea: "1/2/2/3"
+                },
+                children: appHeader
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                className: "vuuShell-content",
+                id: "vuu-shell-workspace-host",
+                style: {
+                    gridArea: "2/2/3/3"
+                },
+                children: workspaceHost
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-context",
+                style: {
+                    gridArea: "1/3/3/4"
+                },
+                children: /*#__PURE__*/ jsx(ApplicationSettingsContextPanel, {})
+            })
+        ]
+    });
+};
 export { useFullHeightLeftPanel };

package/src/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js

@@ -1,68 +1,58 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { DockLayout, Drawer, Flexbox, LayoutContainer, View } from "@vuu-ui/vuu-layout";
-import { VuuShellLocation } from "@vuu-ui/vuu-utils";
-import { useCallback, useMemo, useRef, useState } from "react";
-const useInlayLeftPanel = ({ SidePanelProps: LeftSidePanelProps, appHeader, htmlAttributes })=>{
-    const paletteView = useRef(null);
-    const [open, setOpen] = useState(true);
-    const handleDrawerClick = useCallback((e)=>{
-        const target = e.target;
-        if (!paletteView.current?.contains(target)) setOpen(!open);
-    }, [
-        open
-    ]);
-    return useMemo(()=>{
-        const getDrawers = (leftSidePanel)=>{
-            const drawers = [];
-            drawers.push(/*#__PURE__*/ jsx(Drawer, {
-                onClick: handleDrawerClick,
-                open: open,
-                position: "left",
-                inline: true,
-                peekaboo: true,
-                sizeOpen: 200,
-                toggleButton: "end",
-                children: /*#__PURE__*/ jsx(View, {
-                    className: "vuuShell-palette",
-                    id: "vw-app-palette",
-                    ref: paletteView,
-                    style: {
-                        height: "100%"
-                    },
-                    children: leftSidePanel
-                }, "app-palette")
-            }, "left-panel"));
-            return drawers;
-        };
-        return /*#__PURE__*/ jsxs(Flexbox, {
-            ...htmlAttributes,
-            style: {
-                ...htmlAttributes?.style,
-                flexDirection: "column"
-            },
-            children: [
-                appHeader,
-                /*#__PURE__*/ jsx(DockLayout, {
-                    style: {
-                        flex: 1
-                    },
-                    children: getDrawers(LeftSidePanelProps?.children).concat(/*#__PURE__*/ jsx(LayoutContainer, {
-                        dropTarget: true,
-                        id: VuuShellLocation.WorkspaceContainer,
-                        style: {
-                            width: "100%",
-                            height: "100%"
-                        }
-                    }, "main-content"))
-                })
+import { GridLayout, GridLayoutItem } from "@vuu-ui/grid-layout";
+import { SidePanel } from "../side-panel/index.js";
+import { ApplicationSettingsContextPanel } from "../context-panel/index.js";
+const useInlayLeftPanel = ({ SidePanelProps, appHeader, htmlAttributes, workspaceHost })=>{
+    const { onChange: _onChange, ...gridAttributes } = htmlAttributes ?? {};
+    return /*#__PURE__*/ jsxs(GridLayout, {
+        ...gridAttributes,
+        className: `${htmlAttributes?.className ?? ""} vuuShell-staticGrid`,
+        colsAndRows: {
+            cols: [
+                `${SidePanelProps?.sizeOpen ?? 200}px`,
+                "1fr",
+                "0px"
+            ],
+            rows: [
+                "40px",
+                "1fr"
             ]
-        });
-    }, [
-        LeftSidePanelProps,
-        appHeader,
-        handleDrawerClick,
-        htmlAttributes,
-        open
-    ]);
+        },
+        id: "vuu-shell-grid",
+        children: [
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-header",
+                style: {
+                    gridArea: "1/1/2/3"
+                },
+                children: appHeader
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-left-nav",
+                style: {
+                    gridArea: "2/1/3/2"
+                },
+                children: /*#__PURE__*/ jsx(SidePanel, {
+                    ...SidePanelProps,
+                    id: "vuu-side-panel"
+                })
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                className: "vuuShell-content",
+                id: "vuu-shell-workspace-host",
+                style: {
+                    gridArea: "2/2/3/3"
+                },
+                children: workspaceHost
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-context",
+                style: {
+                    gridArea: "1/3/3/4"
+                },
+                children: /*#__PURE__*/ jsx(ApplicationSettingsContextPanel, {})
+            })
+        ]
+    });
 };
 export { useInlayLeftPanel };

package/src/shell-layout-templates/left-main-tabs/useLeftMainTabs.js

@@ -1,32 +1,53 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Flexbox, StackLayout } from "@vuu-ui/vuu-layout";
-import { VuuShellLocation } from "@vuu-ui/vuu-utils";
-import { useMemo } from "react";
-const useLeftMainTabs = ({ appHeader, htmlAttributes, ToolbarProps })=>{
-    if (void 0 === ToolbarProps) throw Error("LeftMainTabs layout requires ToolbarProps");
-    return useMemo(()=>/*#__PURE__*/ jsxs(Flexbox, {
-            ...htmlAttributes,
-            style: {
-                ...htmlAttributes?.style,
-                flexDirection: "column"
-            },
-            children: [
-                appHeader,
-                /*#__PURE__*/ jsx(StackLayout, {
-                    TabstripProps: {
-                        className: `${VuuShellLocation.MultiWorkspaceContainer}-tabs`
-                    },
-                    active: 0,
-                    showTabs: "left",
-                    style: {
-                        flex: 1
-                    },
-                    id: VuuShellLocation.MultiWorkspaceContainer
-                })
+import { GridLayout, GridLayoutItem } from "@vuu-ui/grid-layout";
+import { ApplicationSettingsContextPanel } from "../context-panel/index.js";
+const useLeftMainTabs = ({ appHeader, htmlAttributes, ToolbarProps, workspaceHost })=>{
+    const { onChange: _onChange, ...gridAttributes } = htmlAttributes ?? {};
+    return /*#__PURE__*/ jsxs(GridLayout, {
+        ...gridAttributes,
+        className: `${htmlAttributes?.className ?? ""} vuuShell-staticGrid`,
+        colsAndRows: {
+            cols: [
+                `${ToolbarProps?.width ?? 48}px`,
+                "1fr",
+                "0px"
+            ],
+            rows: [
+                "40px",
+                "1fr"
             ]
-        }), [
-        appHeader,
-        htmlAttributes
-    ]);
+        },
+        id: "vuu-shell-grid",
+        children: [
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-header",
+                style: {
+                    gridArea: "1/1/2/3"
+                },
+                children: appHeader
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-toolbar",
+                style: {
+                    gridArea: "2/1/3/2"
+                },
+                children: ToolbarProps?.children
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-workspace-host",
+                style: {
+                    gridArea: "2/2/3/3"
+                },
+                children: workspaceHost
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-context",
+                style: {
+                    gridArea: "1/3/3/4"
+                },
+                children: /*#__PURE__*/ jsx(ApplicationSettingsContextPanel, {})
+            })
+        ]
+    });
 };
 export { useLeftMainTabs };

package/src/shell-layout-templates/side-panel/SidePanel.css.js

@@ -1,6 +1,8 @@
 const css = `
 .vuuShellSidePanel {
-  width: var(--shell-left-nav-size);
+  height: 100%;
+  min-width: var(--shell-left-nav-size);
+  width: auto;
   transition: width .2s ease-out;
 }
 

package/src/shell-layout-templates/simple-content-pane/useSimpleContentPane.js

@@ -1,38 +1,46 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Flexbox, LayoutContainer } from "@vuu-ui/vuu-layout";
-import { VuuShellLocation } from "@vuu-ui/vuu-utils";
-import { ContextPanel } from "../context-panel/index.js";
-import { useMemo } from "react";
-const useSimpleContentPane = ({ appHeader, htmlAttributes })=>useMemo(()=>/*#__PURE__*/ jsxs(Flexbox, {
-            ...htmlAttributes,
-            style: {
-                ...htmlAttributes?.style,
-                flexDirection: "row"
-            },
-            children: [
-                /*#__PURE__*/ jsxs(Flexbox, {
-                    className: "vuuShell-content",
-                    style: {
-                        flex: 1,
-                        flexDirection: "column"
-                    },
-                    children: [
-                        appHeader,
-                        /*#__PURE__*/ jsx(LayoutContainer, {
-                            id: VuuShellLocation.WorkspaceContainer,
-                            style: {
-                                flex: 1
-                            }
-                        }, "main-content")
-                    ]
-                }),
-                /*#__PURE__*/ jsx(ContextPanel, {
-                    id: VuuShellLocation.ContextPanel,
-                    overlay: true
-                })
+import { GridLayout, GridLayoutItem } from "@vuu-ui/grid-layout";
+import { ApplicationSettingsContextPanel } from "../context-panel/index.js";
+const useSimpleContentPane = ({ appHeader, htmlAttributes, workspaceHost })=>{
+    const { onChange: _onChange, ...gridAttributes } = htmlAttributes ?? {};
+    return /*#__PURE__*/ jsxs(GridLayout, {
+        ...gridAttributes,
+        className: `${htmlAttributes?.className ?? ""} vuuShell-staticGrid`,
+        colsAndRows: {
+            cols: [
+                "1fr",
+                "0px"
+            ],
+            rows: [
+                "40px",
+                "1fr"
             ]
-        }), [
-        appHeader,
-        htmlAttributes
-    ]);
+        },
+        id: "vuu-shell-grid",
+        children: [
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-header",
+                style: {
+                    gridArea: "1/1/2/2"
+                },
+                children: appHeader
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                className: "vuuShell-content",
+                id: "vuu-shell-workspace-host",
+                style: {
+                    gridArea: "2/1/3/2"
+                },
+                children: workspaceHost
+            }),
+            /*#__PURE__*/ jsx(GridLayoutItem, {
+                id: "vuu-shell-context",
+                style: {
+                    gridArea: "1/2/3/3"
+                },
+                children: /*#__PURE__*/ jsx(ApplicationSettingsContextPanel, {})
+            })
+        ]
+    });
+};
 export { useSimpleContentPane };

package/src/shell.css.js

@@ -1,8 +1,9 @@
 const css = `
-.vuuShell {
+.vuuShell.vuuGridLayout {
   background-color: var(--vuuShell-background, var(--salt-container-primary-background));
   height: var(--vuuShell-height, 100vh);
   width: var(--vuuShell-width, 100vw);
+  padding: 0;
 
   & .left-main-tabs {
     --vuuOverflowContainer-width: 48px;
@@ -51,7 +52,89 @@ const css = `
 }
 
 .vuuShell-content {
-  padding: var(--vuuShell-content-padding, 8px);
+  padding: var(--vuuShell-content-padding, 8px 0 0 0);
+  margin: 0 8px 8px 0;
+}
+
+.vuuShell-staticGrid, .vuuWorkspaceHost, .vuuWorkspaceHost-content, .vuuWorkspaceHost-workspace {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.vuuShell-staticGrid {
+  --vuu-grid-gap: 0px;
+  overflow: hidden;
+}
+
+.vuuShell-staticGrid > .vuuGridLayoutItem {
+  border: 0;
+  min-width: 0;
+  min-height: 0;
+}
+
+.vuuShell-staticGrid > #vuu-shell-workspace-host {
+  overflow: hidden;
+}
+
+.vuuLeftNav > .vuuGridLayout {
+  --vuu-grid-gap: 0px;
+  width: max-content;
+  height: 100%;
+}
+
+.vuuLeftNav > .vuuGridLayout > .vuuGridLayoutItem {
+  border: 0;
+  min-width: 0;
+  min-height: 0;
+}
+
+.vuuWorkspaceHost {
+  flex-direction: column;
+  display: flex;
+}
+
+.vuuWorkspaceHost-content {
+  flex: auto;
+  min-height: 0;
+}
+
+.vuuWorkspaceHost-workspace[hidden] {
+  display: none;
+}
+
+.vuuWorkspaceHost-workspace {
+  position: relative;
+}
+
+.vuuWorkspaceHost-workspace > .vuuGridLayout {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.vuuWorkspaceHost-state {
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  display: flex;
+}
+
+.vuuWorkspaceHost-empty {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  position: relative;
+}
+
+.vuuWorkspaceHost-emptyGrid {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
 }