@vuu-ui/vuu-shell 0.8.77 → 0.8.78

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

@@ -21,8 +21,8 @@ const useInlayLeftPanel = ({
     },
     [open]
   );
-  const getDrawers = React.useCallback(
-    (leftSidePanel) => {
+  return React.useMemo(() => {
+    const getDrawers = (leftSidePanel) => {
       const drawers = [];
       drawers.push(
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -51,33 +51,32 @@ const useInlayLeftPanel = ({
         )
       );
       return drawers;
-    },
-    [handleDrawerClick, open]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    vuuLayout.Flexbox,
-    {
-      ...htmlAttributes,
-      style: {
-        ...htmlAttributes?.style,
-        flexDirection: "column"
-      },
-      children: [
-        appHeader,
-        /* @__PURE__ */ jsxRuntime.jsx(vuuLayout.DockLayout, { style: { flex: 1 }, children: getDrawers(LeftSidePanelProps?.children).concat(
-          /* @__PURE__ */ jsxRuntime.jsx(
-            vuuLayout.LayoutContainer,
-            {
-              dropTarget: true,
-              id: vuuUtils.VuuShellLocation.WorkspaceContainer,
-              style: { width: "100%", height: "100%" }
-            },
-            "main-content"
-          )
-        ) })
-      ]
-    }
-  );
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      vuuLayout.Flexbox,
+      {
+        ...htmlAttributes,
+        style: {
+          ...htmlAttributes?.style,
+          flexDirection: "column"
+        },
+        children: [
+          appHeader,
+          /* @__PURE__ */ jsxRuntime.jsx(vuuLayout.DockLayout, { style: { flex: 1 }, children: getDrawers(LeftSidePanelProps?.children).concat(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              vuuLayout.LayoutContainer,
+              {
+                dropTarget: true,
+                id: vuuUtils.VuuShellLocation.WorkspaceContainer,
+                style: { width: "100%", height: "100%" }
+              },
+              "main-content"
+            )
+          ) })
+        ]
+      }
+    );
+  }, [LeftSidePanelProps, appHeader, handleDrawerClick, htmlAttributes, open]);
 };
 
 exports.useInlayLeftPanel = useInlayLeftPanel;

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

@@ -1 +1 @@
-{"version":3,"file":"useInlayLeftPanel.js","sources":["../../../src/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.tsx"],"sourcesContent":["import {\n  DockLayout,\n  LayoutContainer,\n  Drawer,\n  Flexbox,\n  View,\n} from \"@vuu-ui/vuu-layout\";\n\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, ReactElement, useCallback, useRef, useState } from \"react\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\n\nexport const useInlayLeftPanel: ShellLayoutTemplateHook = ({\n  LeftSidePanelProps,\n  appHeader,\n  htmlAttributes,\n}) => {\n  const paletteView = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(true);\n\n  const handleDrawerClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      const target = e.target as HTMLElement;\n      if (!paletteView.current?.contains(target)) {\n        setOpen(!open);\n      }\n    },\n    [open]\n  );\n\n  const getDrawers = useCallback(\n    (leftSidePanel) => {\n      const drawers: ReactElement[] = [];\n      drawers.push(\n        <Drawer\n          key=\"left-panel\"\n          onClick={handleDrawerClick}\n          open={open}\n          position=\"left\"\n          inline\n          peekaboo\n          sizeOpen={200}\n          toggleButton=\"end\"\n        >\n          <View\n            className=\"vuuShell-palette\"\n            id=\"vw-app-palette\"\n            key=\"app-palette\"\n            ref={paletteView}\n            style={{ height: \"100%\" }}\n          >\n            {leftSidePanel}\n          </View>\n        </Drawer>\n      );\n\n      return drawers;\n    },\n    [handleDrawerClick, open]\n  );\n\n  return (\n    <Flexbox\n      {...htmlAttributes}\n      style={{\n        ...htmlAttributes?.style,\n        flexDirection: \"column\",\n      }}\n    >\n      {appHeader}\n      <DockLayout style={{ flex: 1 }}>\n        {getDrawers(LeftSidePanelProps?.children).concat(\n          <LayoutContainer\n            dropTarget\n            id={VuuShellLocation.WorkspaceContainer}\n            key=\"main-content\"\n            style={{ width: \"100%\", height: \"100%\" }}\n          />\n        )}\n      </DockLayout>\n    </Flexbox>\n  );\n};\n"],"names":["useRef","useState","useCallback","jsx","Drawer","View","jsxs","Flexbox","DockLayout","LayoutContainer","VuuShellLocation"],"mappings":";;;;;;;AAYO,MAAM,oBAA6C,CAAC;AAAA,EACzD,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,WAAA,GAAcA,aAAuB,IAAI,CAAA,CAAA;AAC/C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,IAAI,CAAA,CAAA;AAErC,EAAA,MAAM,iBAAoB,GAAAC,iBAAA;AAAA,IACxB,CAAC,CAA+B,KAAA;AAC9B,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA,CAAA;AACjB,MAAA,IAAI,CAAC,WAAA,CAAY,OAAS,EAAA,QAAA,CAAS,MAAM,CAAG,EAAA;AAC1C,QAAA,OAAA,CAAQ,CAAC,IAAI,CAAA,CAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,aAAkB,KAAA;AACjB,MAAA,MAAM,UAA0B,EAAC,CAAA;AACjC,MAAQ,OAAA,CAAA,IAAA;AAAA,wBACNC,cAAA;AAAA,UAACC,gBAAA;AAAA,UAAA;AAAA,YAEC,OAAS,EAAA,iBAAA;AAAA,YACT,IAAA;AAAA,YACA,QAAS,EAAA,MAAA;AAAA,YACT,MAAM,EAAA,IAAA;AAAA,YACN,QAAQ,EAAA,IAAA;AAAA,YACR,QAAU,EAAA,GAAA;AAAA,YACV,YAAa,EAAA,KAAA;AAAA,YAEb,QAAA,kBAAAD,cAAA;AAAA,cAACE,cAAA;AAAA,cAAA;AAAA,gBACC,SAAU,EAAA,kBAAA;AAAA,gBACV,EAAG,EAAA,gBAAA;AAAA,gBAEH,GAAK,EAAA,WAAA;AAAA,gBACL,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAO,EAAA;AAAA,gBAEvB,QAAA,EAAA,aAAA;AAAA,eAAA;AAAA,cAJG,aAAA;AAAA,aAKN;AAAA,WAAA;AAAA,UAjBI,YAAA;AAAA,SAkBN;AAAA,OACF,CAAA;AAEA,MAAO,OAAA,OAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,mBAAmB,IAAI,CAAA;AAAA,GAC1B,CAAA;AAEA,EACE,uBAAAC,eAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,GAAG,cAAgB,EAAA,KAAA;AAAA,QACnB,aAAe,EAAA,QAAA;AAAA,OACjB;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,SAAA;AAAA,wBACDJ,cAAA,CAACK,oBAAW,EAAA,EAAA,KAAA,EAAO,EAAE,IAAA,EAAM,GACxB,EAAA,QAAA,EAAA,UAAA,CAAW,kBAAoB,EAAA,QAAQ,CAAE,CAAA,MAAA;AAAA,0BACxCL,cAAA;AAAA,YAACM,yBAAA;AAAA,YAAA;AAAA,cACC,UAAU,EAAA,IAAA;AAAA,cACV,IAAIC,yBAAiB,CAAA,kBAAA;AAAA,cAErB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,aAAA;AAAA,YADnC,cAAA;AAAA,WAEN;AAAA,SAEJ,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"useInlayLeftPanel.js","sources":["../../../src/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.tsx"],"sourcesContent":["import {\n  DockLayout,\n  LayoutContainer,\n  Drawer,\n  Flexbox,\n  View,\n} from \"@vuu-ui/vuu-layout\";\n\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport {\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\n\nexport const useInlayLeftPanel: ShellLayoutTemplateHook = ({\n  LeftSidePanelProps,\n  appHeader,\n  htmlAttributes,\n}) => {\n  const paletteView = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(true);\n  const handleDrawerClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      const target = e.target as HTMLElement;\n      if (!paletteView.current?.contains(target)) {\n        setOpen(!open);\n      }\n    },\n    [open]\n  );\n\n  return useMemo(() => {\n    const getDrawers = (leftSidePanel: ReactNode) => {\n      const drawers: ReactElement[] = [];\n      drawers.push(\n        <Drawer\n          key=\"left-panel\"\n          onClick={handleDrawerClick}\n          open={open}\n          position=\"left\"\n          inline\n          peekaboo\n          sizeOpen={200}\n          toggleButton=\"end\"\n        >\n          <View\n            className=\"vuuShell-palette\"\n            id=\"vw-app-palette\"\n            key=\"app-palette\"\n            ref={paletteView}\n            style={{ height: \"100%\" }}\n          >\n            {leftSidePanel}\n          </View>\n        </Drawer>\n      );\n\n      return drawers;\n    };\n\n    return (\n      <Flexbox\n        {...htmlAttributes}\n        style={{\n          ...htmlAttributes?.style,\n          flexDirection: \"column\",\n        }}\n      >\n        {appHeader}\n        <DockLayout style={{ flex: 1 }}>\n          {getDrawers(LeftSidePanelProps?.children).concat(\n            <LayoutContainer\n              dropTarget\n              id={VuuShellLocation.WorkspaceContainer}\n              key=\"main-content\"\n              style={{ width: \"100%\", height: \"100%\" }}\n            />\n          )}\n        </DockLayout>\n      </Flexbox>\n    );\n  }, [LeftSidePanelProps, appHeader, handleDrawerClick, htmlAttributes, open]);\n};\n"],"names":["useRef","useState","useCallback","useMemo","jsx","Drawer","View","jsxs","Flexbox","DockLayout","LayoutContainer","VuuShellLocation"],"mappings":";;;;;;;AAoBO,MAAM,oBAA6C,CAAC;AAAA,EACzD,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,WAAA,GAAcA,aAAuB,IAAI,CAAA,CAAA;AAC/C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,IAAI,CAAA,CAAA;AACrC,EAAA,MAAM,iBAAoB,GAAAC,iBAAA;AAAA,IACxB,CAAC,CAA+B,KAAA;AAC9B,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA,CAAA;AACjB,MAAA,IAAI,CAAC,WAAA,CAAY,OAAS,EAAA,QAAA,CAAS,MAAM,CAAG,EAAA;AAC1C,QAAA,OAAA,CAAQ,CAAC,IAAI,CAAA,CAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,OAAOC,cAAQ,MAAM;AACnB,IAAM,MAAA,UAAA,GAAa,CAAC,aAA6B,KAAA;AAC/C,MAAA,MAAM,UAA0B,EAAC,CAAA;AACjC,MAAQ,OAAA,CAAA,IAAA;AAAA,wBACNC,cAAA;AAAA,UAACC,gBAAA;AAAA,UAAA;AAAA,YAEC,OAAS,EAAA,iBAAA;AAAA,YACT,IAAA;AAAA,YACA,QAAS,EAAA,MAAA;AAAA,YACT,MAAM,EAAA,IAAA;AAAA,YACN,QAAQ,EAAA,IAAA;AAAA,YACR,QAAU,EAAA,GAAA;AAAA,YACV,YAAa,EAAA,KAAA;AAAA,YAEb,QAAA,kBAAAD,cAAA;AAAA,cAACE,cAAA;AAAA,cAAA;AAAA,gBACC,SAAU,EAAA,kBAAA;AAAA,gBACV,EAAG,EAAA,gBAAA;AAAA,gBAEH,GAAK,EAAA,WAAA;AAAA,gBACL,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAO,EAAA;AAAA,gBAEvB,QAAA,EAAA,aAAA;AAAA,eAAA;AAAA,cAJG,aAAA;AAAA,aAKN;AAAA,WAAA;AAAA,UAjBI,YAAA;AAAA,SAkBN;AAAA,OACF,CAAA;AAEA,MAAO,OAAA,OAAA,CAAA;AAAA,KACT,CAAA;AAEA,IACE,uBAAAC,eAAA;AAAA,MAACC,iBAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,KAAO,EAAA;AAAA,UACL,GAAG,cAAgB,EAAA,KAAA;AAAA,UACnB,aAAe,EAAA,QAAA;AAAA,SACjB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,0BACDJ,cAAA,CAACK,oBAAW,EAAA,EAAA,KAAA,EAAO,EAAE,IAAA,EAAM,GACxB,EAAA,QAAA,EAAA,UAAA,CAAW,kBAAoB,EAAA,QAAQ,CAAE,CAAA,MAAA;AAAA,4BACxCL,cAAA;AAAA,cAACM,yBAAA;AAAA,cAAA;AAAA,gBACC,UAAU,EAAA,IAAA;AAAA,gBACV,IAAIC,yBAAiB,CAAA,kBAAA;AAAA,gBAErB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,eAAA;AAAA,cADnC,cAAA;AAAA,aAEN;AAAA,WAEJ,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,KAED,CAAC,kBAAA,EAAoB,WAAW,iBAAmB,EAAA,cAAA,EAAgB,IAAI,CAAC,CAAA,CAAA;AAC7E;;;;"}

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

@@ -4,12 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var vuuLayout = require('@vuu-ui/vuu-layout');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var ContextPanel = require('../context-panel/ContextPanel.js');
+var React = require('react');
 
 const useSimpleContentPane = ({
   appHeader,
   htmlAttributes
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+}) => React.useMemo(
+  () => /* @__PURE__ */ jsxRuntime.jsxs(
     vuuLayout.Flexbox,
     {
       ...htmlAttributes,
@@ -39,8 +40,9 @@ const useSimpleContentPane = ({
         /* @__PURE__ */ jsxRuntime.jsx(ContextPanel.ContextPanel, { id: vuuUtils.VuuShellLocation.ContextPanel, overlay: true })
       ]
     }
-  );
-};
+  ),
+  [appHeader, htmlAttributes]
+);
 
 exports.useSimpleContentPane = useSimpleContentPane;
 //# sourceMappingURL=useSimpleContentPane.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useSimpleContentPane.js","sources":["../../../src/shell-layout-templates/simple-content-pane/useSimpleContentPane.tsx"],"sourcesContent":["import { LayoutContainer, Flexbox } from \"@vuu-ui/vuu-layout\";\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { ContextPanel } from \"../context-panel\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\n\nexport const useSimpleContentPane: ShellLayoutTemplateHook = ({\n  appHeader,\n  htmlAttributes,\n}) => {\n  return (\n    <Flexbox\n      {...htmlAttributes}\n      style={{\n        ...htmlAttributes?.style,\n        flexDirection: \"row\",\n      }}\n    >\n      <Flexbox\n        className=\"vuuShell-content\"\n        style={{ flex: 1, flexDirection: \"column\" }}\n      >\n        {appHeader}\n        <LayoutContainer\n          id={VuuShellLocation.WorkspaceContainer}\n          key=\"main-content\"\n          style={{ flex: 1 }}\n        />\n      </Flexbox>\n      <ContextPanel id={VuuShellLocation.ContextPanel} overlay></ContextPanel>\n    </Flexbox>\n  );\n};\n"],"names":["jsxs","Flexbox","jsx","LayoutContainer","VuuShellLocation","ContextPanel"],"mappings":";;;;;;;AAKO,MAAM,uBAAgD,CAAC;AAAA,EAC5D,SAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAAA,eAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,GAAG,cAAgB,EAAA,KAAA;AAAA,QACnB,aAAe,EAAA,KAAA;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAACC,iBAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,kBAAA;AAAA,YACV,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,eAAe,QAAS,EAAA;AAAA,YAEzC,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,8BACDC,cAAA;AAAA,gBAACC,yBAAA;AAAA,gBAAA;AAAA,kBACC,IAAIC,yBAAiB,CAAA,kBAAA;AAAA,kBAErB,KAAA,EAAO,EAAE,IAAA,EAAM,CAAE,EAAA;AAAA,iBAAA;AAAA,gBADb,cAAA;AAAA,eAEN;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,uCACCC,yBAAa,EAAA,EAAA,EAAA,EAAID,yBAAiB,CAAA,YAAA,EAAc,SAAO,IAAC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC3D,CAAA;AAEJ;;;;"}
+{"version":3,"file":"useSimpleContentPane.js","sources":["../../../src/shell-layout-templates/simple-content-pane/useSimpleContentPane.tsx"],"sourcesContent":["import { LayoutContainer, Flexbox } from \"@vuu-ui/vuu-layout\";\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { ContextPanel } from \"../context-panel\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\nimport { useMemo } from \"react\";\n\nexport const useSimpleContentPane: ShellLayoutTemplateHook = ({\n  appHeader,\n  htmlAttributes,\n}) =>\n  useMemo(\n    () => (\n      <Flexbox\n        {...htmlAttributes}\n        style={{\n          ...htmlAttributes?.style,\n          flexDirection: \"row\",\n        }}\n      >\n        <Flexbox\n          className=\"vuuShell-content\"\n          style={{ flex: 1, flexDirection: \"column\" }}\n        >\n          {appHeader}\n          <LayoutContainer\n            id={VuuShellLocation.WorkspaceContainer}\n            key=\"main-content\"\n            style={{ flex: 1 }}\n          />\n        </Flexbox>\n        <ContextPanel id={VuuShellLocation.ContextPanel} overlay></ContextPanel>\n      </Flexbox>\n    ),\n    [appHeader, htmlAttributes]\n  );\n"],"names":["useMemo","jsxs","Flexbox","jsx","LayoutContainer","VuuShellLocation","ContextPanel"],"mappings":";;;;;;;;AAMO,MAAM,uBAAgD,CAAC;AAAA,EAC5D,SAAA;AAAA,EACA,cAAA;AACF,CACE,KAAAA,aAAA;AAAA,EACE,sBACEC,eAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,GAAG,cAAgB,EAAA,KAAA;AAAA,QACnB,aAAe,EAAA,KAAA;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAACC,iBAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,kBAAA;AAAA,YACV,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,eAAe,QAAS,EAAA;AAAA,YAEzC,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,8BACDC,cAAA;AAAA,gBAACC,yBAAA;AAAA,gBAAA;AAAA,kBACC,IAAIC,yBAAiB,CAAA,kBAAA;AAAA,kBAErB,KAAA,EAAO,EAAE,IAAA,EAAM,CAAE,EAAA;AAAA,iBAAA;AAAA,gBADb,cAAA;AAAA,eAEN;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,uCACCC,yBAAa,EAAA,EAAA,EAAA,EAAID,yBAAiB,CAAA,YAAA,EAAc,SAAO,IAAC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC3D;AAAA,EAEF,CAAC,WAAW,cAAc,CAAA;AAC5B;;;;"}

package/cjs/shell.js

@@ -28,7 +28,7 @@ vuuUtils.registerComponent("ApplicationSettings", UserSettingsPanel.UserSettings
 if (process.env.NODE_ENV === "production") {
   if (typeof vuuLayout.StackLayout !== "function") {
     console.warn(
-      "StackLayout module not loaded, will be unsbale to deserialize from layout JSON"
+      "StackLayout module not loaded, will be unable to deserialize from layout JSON"
     );
   }
 }
@@ -61,9 +61,9 @@ const VuuApplication = ({
     css: shell,
     window: targetWindow
   });
+  const notify = vuuPopups.useNotifications();
   const { workspaceJSON, saveApplicationLayout } = WorkspaceProvider.useWorkspace();
   const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems.useWorkspaceContextMenuItems();
-  const [connectionStatus, setConnectionStatus] = React.useState("initialising");
   const handleLayoutChange = React.useCallback(
     (layout) => {
       try {
@@ -76,23 +76,26 @@ const VuuApplication = ({
   );
   React.useMemo(async () => {
     if (serverUrl && user.token) {
-      const connectionStatus2 = await vuuDataRemote.connectToServer({
+      const connectionStatus = await vuuDataRemote.connectToServer({
         authToken: user.token,
         url: serverUrl,
         username: user.username
       });
-      setConnectionStatus(connectionStatus2);
+      if (connectionStatus === "rejected") {
+        notify({
+          type: "error",
+          body: "Unable to connect to VUU Server",
+          header: "Error"
+        });
+      }
     } else {
       console.warn(
         `Shell: serverUrl: '${serverUrl}', token: '${Array(user.token.length).fill("#").join("")}'  
         `
       );
     }
-  }, [serverUrl, user.token, user.username]);
+  }, [notify, serverUrl, user.token, user.username]);
   const isLayoutLoading = workspaceJSON === defaultWorkspaceJSON.loadingJSON;
-  if (connectionStatus === "rejected") {
-    console.log("game over, no connection to server");
-  }
   const initialLayout = useShellLayout.useShellLayout({
     ...ShellLayoutProps2,
     appHeader: getAppHeader(ShellLayoutProps2),

package/cjs/shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport { LayoutProvider, StackLayout } from \"@vuu-ui/vuu-layout\";\nimport {\n  ContextMenuProvider,\n  DialogProvider,\n  NotificationsProvider,\n} from \"@vuu-ui/vuu-popups\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport {\n  IPersistenceManager,\n  LocalPersistenceManager,\n  PersistenceProvider,\n  usePersistenceManager,\n} from \"./persistence-manager\";\nimport { ShellLayoutProps, useShellLayout } from \"./shell-layout-templates\";\nimport { UserSettingsPanel } from \"./user-settings\";\nimport {\n  WorkspaceProps,\n  WorkspaceProvider,\n  useWorkspace,\n  useWorkspaceContextMenuItems,\n} from \"./workspace-management\";\n\nimport shellCss from \"./shell.css\";\nimport { loadingJSON } from \"./workspace-management/defaultWorkspaceJSON\";\n\nregisterComponent(\"ApplicationSettings\", UserSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n  // StackLayout is loaded just to force component registration, we know it will be\n  // required when default layout is instantiated. This is only required in prod\n  // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n  if (typeof StackLayout !== \"function\") {\n    console.warn(\n      \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n    );\n  }\n}\n\nconst { error } = logger(\"Shell\");\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  shellLayoutProps?: ShellLayoutProps;\n  workspaceProps?: WorkspaceProps;\n  children?: ReactNode;\n  loginUrl?: string;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nconst defaultAppHeader = <AppHeader />;\n\nconst getAppHeader = (shellLayoutProps?: ShellLayoutProps) =>\n  shellLayoutProps?.appHeader ?? defaultAppHeader;\n\nconst defaultHTMLAttributes: HTMLAttributes<HTMLDivElement> = {\n  className: \"vuuShell\",\n};\n\nconst getHTMLAttributes = (props?: ShellLayoutProps) => {\n  if (props?.htmlAttributes) {\n    return {\n      ...defaultHTMLAttributes,\n      ...props.htmlAttributes,\n    };\n  } else {\n    return defaultHTMLAttributes;\n  }\n};\n\nconst VuuApplication = ({\n  shellLayoutProps: ShellLayoutProps,\n  children,\n  // loginUrl, // need to make this available to app header\n  serverUrl,\n  user,\n}: Omit<ShellProps, \"ContentLayoutProps\" | \"loginUrl\" | \"workspaceProps\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const { workspaceJSON, saveApplicationLayout } = useWorkspace();\n\n  const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems();\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"initialising\" | \"connected\" | \"rejected\"\n  >(\"initialising\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    } else {\n      console.warn(\n        `Shell: serverUrl: '${serverUrl}', token: '${Array(user.token.length)\n          .fill(\"#\")\n          .join(\"\")}'  \n        `\n      );\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const isLayoutLoading = workspaceJSON === loadingJSON;\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  const initialLayout = useShellLayout({\n    ...ShellLayoutProps,\n    appHeader: getAppHeader(ShellLayoutProps),\n    htmlAttributes: getHTMLAttributes(ShellLayoutProps),\n  });\n\n  return isLayoutLoading ? null : (\n    <ContextMenuProvider\n      menuActionHandler={handleMenuAction}\n      menuBuilder={buildMenuOptions}\n    >\n      <LayoutProvider\n        workspaceJSON={workspaceJSON}\n        onLayoutChange={handleLayoutChange}\n      >\n        {initialLayout}\n      </LayoutProvider>\n      {children}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Shell = ({\n  loginUrl,\n  user,\n  workspaceProps,\n  ...props\n}: ShellProps) => {\n  // If user has provided an implementation of IPersistenceManager\n  // by wrapping higher level PersistenceProvider, use it, otw\n  // default to LocalPersistenceManager\n  const persistenceManager = usePersistenceManager();\n  const localPersistenceManager = useMemo<\n    IPersistenceManager | undefined\n  >(() => {\n    if (persistenceManager) {\n      return undefined;\n    }\n    console.log(\n      `No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`\n    );\n    return new LocalPersistenceManager(`vuu/${user.username}`);\n  }, [persistenceManager, user.username]);\n\n  // ApplicationProvider must go outside Dialog and Notification providers\n  // ApplicationProvider injects the SaltProvider and this must be the root\n  // SaltProvider.\n\n  const shellProviders = (\n    <ApplicationProvider\n      density=\"high\"\n      loginUrl={loginUrl}\n      theme=\"vuu-theme\"\n      user={user}\n    >\n      <WorkspaceProvider {...workspaceProps}>\n        <DialogProvider>\n          <NotificationsProvider>\n            <VuuApplication {...props} user={user} />\n          </NotificationsProvider>\n        </DialogProvider>\n      </WorkspaceProvider>\n    </ApplicationProvider>\n  );\n\n  if (persistenceManager) {\n    return shellProviders;\n  } else {\n    return (\n      <PersistenceProvider persistenceManager={localPersistenceManager}>\n        {shellProviders}\n      </PersistenceProvider>\n    );\n  }\n};\n"],"names":["registerComponent","UserSettingsPanel","StackLayout","logger","AppHeader","ShellLayoutProps","useWindow","useComponentCssInjection","shellCss","useWorkspace","useWorkspaceContextMenuItems","useState","useCallback","useMemo","connectionStatus","connectToServer","loadingJSON","useShellLayout","jsxs","ContextMenuProvider","jsx","LayoutProvider","usePersistenceManager","LocalPersistenceManager","ApplicationProvider","WorkspaceProvider","DialogProvider","NotificationsProvider","PersistenceProvider"],"mappings":"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"}
+{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport { LayoutProvider, StackLayout } from \"@vuu-ui/vuu-layout\";\nimport {\n  ContextMenuProvider,\n  DialogProvider,\n  NotificationsProvider,\n  useNotifications,\n} from \"@vuu-ui/vuu-popups\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactNode, useCallback, useMemo } from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport {\n  IPersistenceManager,\n  LocalPersistenceManager,\n  PersistenceProvider,\n  usePersistenceManager,\n} from \"./persistence-manager\";\nimport { ShellLayoutProps, useShellLayout } from \"./shell-layout-templates\";\nimport { UserSettingsPanel } from \"./user-settings\";\nimport {\n  WorkspaceProps,\n  WorkspaceProvider,\n  useWorkspace,\n  useWorkspaceContextMenuItems,\n} from \"./workspace-management\";\n\nimport shellCss from \"./shell.css\";\nimport { loadingJSON } from \"./workspace-management/defaultWorkspaceJSON\";\n\nregisterComponent(\"ApplicationSettings\", UserSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n  // StackLayout is loaded just to force component registration, we know it will be\n  // required when default layout is instantiated. This is only required in prod\n  // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n  if (typeof StackLayout !== \"function\") {\n    console.warn(\n      \"StackLayout module not loaded, will be unable to deserialize from layout JSON\"\n    );\n  }\n}\n\nconst { error } = logger(\"Shell\");\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  shellLayoutProps?: ShellLayoutProps;\n  workspaceProps?: WorkspaceProps;\n  children?: ReactNode;\n  loginUrl?: string;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nconst defaultAppHeader = <AppHeader />;\n\nconst getAppHeader = (shellLayoutProps?: ShellLayoutProps) =>\n  shellLayoutProps?.appHeader ?? defaultAppHeader;\n\nconst defaultHTMLAttributes: HTMLAttributes<HTMLDivElement> = {\n  className: \"vuuShell\",\n};\n\nconst getHTMLAttributes = (props?: ShellLayoutProps) => {\n  if (props?.htmlAttributes) {\n    return {\n      ...defaultHTMLAttributes,\n      ...props.htmlAttributes,\n    };\n  } else {\n    return defaultHTMLAttributes;\n  }\n};\n\nconst VuuApplication = ({\n  shellLayoutProps: ShellLayoutProps,\n  children,\n  // loginUrl, // need to make this available to app header\n  serverUrl,\n  user,\n}: Omit<ShellProps, \"ContentLayoutProps\" | \"loginUrl\" | \"workspaceProps\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const notify = useNotifications();\n  const { workspaceJSON, saveApplicationLayout } = useWorkspace();\n\n  const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems();\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      if (connectionStatus === \"rejected\") {\n        notify({\n          type: \"error\",\n          body: \"Unable to connect to VUU Server\",\n          header: \"Error\",\n        });\n      }\n    } else {\n      console.warn(\n        `Shell: serverUrl: '${serverUrl}', token: '${Array(user.token.length)\n          .fill(\"#\")\n          .join(\"\")}'  \n        `\n      );\n    }\n  }, [notify, serverUrl, user.token, user.username]);\n\n  const isLayoutLoading = workspaceJSON === loadingJSON;\n\n  const initialLayout = useShellLayout({\n    ...ShellLayoutProps,\n    appHeader: getAppHeader(ShellLayoutProps),\n    htmlAttributes: getHTMLAttributes(ShellLayoutProps),\n  });\n\n  return isLayoutLoading ? null : (\n    <ContextMenuProvider\n      menuActionHandler={handleMenuAction}\n      menuBuilder={buildMenuOptions}\n    >\n      <LayoutProvider\n        workspaceJSON={workspaceJSON}\n        onLayoutChange={handleLayoutChange}\n      >\n        {initialLayout}\n      </LayoutProvider>\n      {children}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Shell = ({\n  loginUrl,\n  user,\n  workspaceProps,\n  ...props\n}: ShellProps) => {\n  // If user has provided an implementation of IPersistenceManager\n  // by wrapping higher level PersistenceProvider, use it, otw\n  // default to LocalPersistenceManager\n  const persistenceManager = usePersistenceManager();\n  const localPersistenceManager = useMemo<\n    IPersistenceManager | undefined\n  >(() => {\n    if (persistenceManager) {\n      return undefined;\n    }\n    console.log(\n      `No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`\n    );\n    return new LocalPersistenceManager(`vuu/${user.username}`);\n  }, [persistenceManager, user.username]);\n\n  // ApplicationProvider must go outside Dialog and Notification providers\n  // ApplicationProvider injects the SaltProvider and this must be the root\n  // SaltProvider.\n\n  const shellProviders = (\n    <ApplicationProvider\n      density=\"high\"\n      loginUrl={loginUrl}\n      theme=\"vuu-theme\"\n      user={user}\n    >\n      <WorkspaceProvider {...workspaceProps}>\n        <DialogProvider>\n          <NotificationsProvider>\n            <VuuApplication {...props} user={user} />\n          </NotificationsProvider>\n        </DialogProvider>\n      </WorkspaceProvider>\n    </ApplicationProvider>\n  );\n\n  if (persistenceManager) {\n    return shellProviders;\n  } else {\n    return (\n      <PersistenceProvider persistenceManager={localPersistenceManager}>\n        {shellProviders}\n      </PersistenceProvider>\n    );\n  }\n};\n"],"names":["registerComponent","UserSettingsPanel","StackLayout","logger","AppHeader","ShellLayoutProps","useWindow","useComponentCssInjection","shellCss","useNotifications","useWorkspace","useWorkspaceContextMenuItems","useCallback","useMemo","connectToServer","loadingJSON","useShellLayout","jsxs","ContextMenuProvider","jsx","LayoutProvider","usePersistenceManager","LocalPersistenceManager","ApplicationProvider","WorkspaceProvider","DialogProvider","NotificationsProvider","PersistenceProvider"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Drawer, View, Flexbox, DockLayout, LayoutContainer } from '@vuu-ui/vuu-layout';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Flexbox, DockLayout, LayoutContainer, Drawer, View } from '@vuu-ui/vuu-layout';
 import { VuuShellLocation } from '@vuu-ui/vuu-utils';
-import { useRef, useState, useCallback } from 'react';
+import { useRef, useState, useCallback, useMemo } from 'react';
 
 const useInlayLeftPanel = ({
   LeftSidePanelProps,
@@ -19,8 +19,8 @@ const useInlayLeftPanel = ({
     },
     [open]
   );
-  const getDrawers = useCallback(
-    (leftSidePanel) => {
+  return useMemo(() => {
+    const getDrawers = (leftSidePanel) => {
       const drawers = [];
       drawers.push(
         /* @__PURE__ */ jsx(
@@ -49,33 +49,32 @@ const useInlayLeftPanel = ({
         )
       );
       return drawers;
-    },
-    [handleDrawerClick, open]
-  );
-  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"
-          )
-        ) })
-      ]
-    }
-  );
+    };
+    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"
+            )
+          ) })
+        ]
+      }
+    );
+  }, [LeftSidePanelProps, appHeader, handleDrawerClick, htmlAttributes, open]);
 };
 
 export { useInlayLeftPanel };

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

@@ -1 +1 @@
-{"version":3,"file":"useInlayLeftPanel.js","sources":["../../../src/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.tsx"],"sourcesContent":["import {\n  DockLayout,\n  LayoutContainer,\n  Drawer,\n  Flexbox,\n  View,\n} from \"@vuu-ui/vuu-layout\";\n\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, ReactElement, useCallback, useRef, useState } from \"react\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\n\nexport const useInlayLeftPanel: ShellLayoutTemplateHook = ({\n  LeftSidePanelProps,\n  appHeader,\n  htmlAttributes,\n}) => {\n  const paletteView = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(true);\n\n  const handleDrawerClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      const target = e.target as HTMLElement;\n      if (!paletteView.current?.contains(target)) {\n        setOpen(!open);\n      }\n    },\n    [open]\n  );\n\n  const getDrawers = useCallback(\n    (leftSidePanel) => {\n      const drawers: ReactElement[] = [];\n      drawers.push(\n        <Drawer\n          key=\"left-panel\"\n          onClick={handleDrawerClick}\n          open={open}\n          position=\"left\"\n          inline\n          peekaboo\n          sizeOpen={200}\n          toggleButton=\"end\"\n        >\n          <View\n            className=\"vuuShell-palette\"\n            id=\"vw-app-palette\"\n            key=\"app-palette\"\n            ref={paletteView}\n            style={{ height: \"100%\" }}\n          >\n            {leftSidePanel}\n          </View>\n        </Drawer>\n      );\n\n      return drawers;\n    },\n    [handleDrawerClick, open]\n  );\n\n  return (\n    <Flexbox\n      {...htmlAttributes}\n      style={{\n        ...htmlAttributes?.style,\n        flexDirection: \"column\",\n      }}\n    >\n      {appHeader}\n      <DockLayout style={{ flex: 1 }}>\n        {getDrawers(LeftSidePanelProps?.children).concat(\n          <LayoutContainer\n            dropTarget\n            id={VuuShellLocation.WorkspaceContainer}\n            key=\"main-content\"\n            style={{ width: \"100%\", height: \"100%\" }}\n          />\n        )}\n      </DockLayout>\n    </Flexbox>\n  );\n};\n"],"names":[],"mappings":";;;;;AAYO,MAAM,oBAA6C,CAAC;AAAA,EACzD,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA,CAAA;AAC/C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AAErC,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,CAA+B,KAAA;AAC9B,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA,CAAA;AACjB,MAAA,IAAI,CAAC,WAAA,CAAY,OAAS,EAAA,QAAA,CAAS,MAAM,CAAG,EAAA;AAC1C,QAAA,OAAA,CAAQ,CAAC,IAAI,CAAA,CAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,aAAkB,KAAA;AACjB,MAAA,MAAM,UAA0B,EAAC,CAAA;AACjC,MAAQ,OAAA,CAAA,IAAA;AAAA,wBACN,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,OAAS,EAAA,iBAAA;AAAA,YACT,IAAA;AAAA,YACA,QAAS,EAAA,MAAA;AAAA,YACT,MAAM,EAAA,IAAA;AAAA,YACN,QAAQ,EAAA,IAAA;AAAA,YACR,QAAU,EAAA,GAAA;AAAA,YACV,YAAa,EAAA,KAAA;AAAA,YAEb,QAAA,kBAAA,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,SAAU,EAAA,kBAAA;AAAA,gBACV,EAAG,EAAA,gBAAA;AAAA,gBAEH,GAAK,EAAA,WAAA;AAAA,gBACL,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAO,EAAA;AAAA,gBAEvB,QAAA,EAAA,aAAA;AAAA,eAAA;AAAA,cAJG,aAAA;AAAA,aAKN;AAAA,WAAA;AAAA,UAjBI,YAAA;AAAA,SAkBN;AAAA,OACF,CAAA;AAEA,MAAO,OAAA,OAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,mBAAmB,IAAI,CAAA;AAAA,GAC1B,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,GAAG,cAAgB,EAAA,KAAA;AAAA,QACnB,aAAe,EAAA,QAAA;AAAA,OACjB;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,SAAA;AAAA,wBACD,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAO,EAAE,IAAA,EAAM,GACxB,EAAA,QAAA,EAAA,UAAA,CAAW,kBAAoB,EAAA,QAAQ,CAAE,CAAA,MAAA;AAAA,0BACxC,GAAA;AAAA,YAAC,eAAA;AAAA,YAAA;AAAA,cACC,UAAU,EAAA,IAAA;AAAA,cACV,IAAI,gBAAiB,CAAA,kBAAA;AAAA,cAErB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,aAAA;AAAA,YADnC,cAAA;AAAA,WAEN;AAAA,SAEJ,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"useInlayLeftPanel.js","sources":["../../../src/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.tsx"],"sourcesContent":["import {\n  DockLayout,\n  LayoutContainer,\n  Drawer,\n  Flexbox,\n  View,\n} from \"@vuu-ui/vuu-layout\";\n\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport {\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\n\nexport const useInlayLeftPanel: ShellLayoutTemplateHook = ({\n  LeftSidePanelProps,\n  appHeader,\n  htmlAttributes,\n}) => {\n  const paletteView = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(true);\n  const handleDrawerClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      const target = e.target as HTMLElement;\n      if (!paletteView.current?.contains(target)) {\n        setOpen(!open);\n      }\n    },\n    [open]\n  );\n\n  return useMemo(() => {\n    const getDrawers = (leftSidePanel: ReactNode) => {\n      const drawers: ReactElement[] = [];\n      drawers.push(\n        <Drawer\n          key=\"left-panel\"\n          onClick={handleDrawerClick}\n          open={open}\n          position=\"left\"\n          inline\n          peekaboo\n          sizeOpen={200}\n          toggleButton=\"end\"\n        >\n          <View\n            className=\"vuuShell-palette\"\n            id=\"vw-app-palette\"\n            key=\"app-palette\"\n            ref={paletteView}\n            style={{ height: \"100%\" }}\n          >\n            {leftSidePanel}\n          </View>\n        </Drawer>\n      );\n\n      return drawers;\n    };\n\n    return (\n      <Flexbox\n        {...htmlAttributes}\n        style={{\n          ...htmlAttributes?.style,\n          flexDirection: \"column\",\n        }}\n      >\n        {appHeader}\n        <DockLayout style={{ flex: 1 }}>\n          {getDrawers(LeftSidePanelProps?.children).concat(\n            <LayoutContainer\n              dropTarget\n              id={VuuShellLocation.WorkspaceContainer}\n              key=\"main-content\"\n              style={{ width: \"100%\", height: \"100%\" }}\n            />\n          )}\n        </DockLayout>\n      </Flexbox>\n    );\n  }, [LeftSidePanelProps, appHeader, handleDrawerClick, htmlAttributes, open]);\n};\n"],"names":[],"mappings":";;;;;AAoBO,MAAM,oBAA6C,CAAC;AAAA,EACzD,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA,CAAA;AAC/C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AACrC,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,CAA+B,KAAA;AAC9B,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA,CAAA;AACjB,MAAA,IAAI,CAAC,WAAA,CAAY,OAAS,EAAA,QAAA,CAAS,MAAM,CAAG,EAAA;AAC1C,QAAA,OAAA,CAAQ,CAAC,IAAI,CAAA,CAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAM,MAAA,UAAA,GAAa,CAAC,aAA6B,KAAA;AAC/C,MAAA,MAAM,UAA0B,EAAC,CAAA;AACjC,MAAQ,OAAA,CAAA,IAAA;AAAA,wBACN,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,OAAS,EAAA,iBAAA;AAAA,YACT,IAAA;AAAA,YACA,QAAS,EAAA,MAAA;AAAA,YACT,MAAM,EAAA,IAAA;AAAA,YACN,QAAQ,EAAA,IAAA;AAAA,YACR,QAAU,EAAA,GAAA;AAAA,YACV,YAAa,EAAA,KAAA;AAAA,YAEb,QAAA,kBAAA,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,SAAU,EAAA,kBAAA;AAAA,gBACV,EAAG,EAAA,gBAAA;AAAA,gBAEH,GAAK,EAAA,WAAA;AAAA,gBACL,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAO,EAAA;AAAA,gBAEvB,QAAA,EAAA,aAAA;AAAA,eAAA;AAAA,cAJG,aAAA;AAAA,aAKN;AAAA,WAAA;AAAA,UAjBI,YAAA;AAAA,SAkBN;AAAA,OACF,CAAA;AAEA,MAAO,OAAA,OAAA,CAAA;AAAA,KACT,CAAA;AAEA,IACE,uBAAA,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,KAAO,EAAA;AAAA,UACL,GAAG,cAAgB,EAAA,KAAA;AAAA,UACnB,aAAe,EAAA,QAAA;AAAA,SACjB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,0BACD,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAO,EAAE,IAAA,EAAM,GACxB,EAAA,QAAA,EAAA,UAAA,CAAW,kBAAoB,EAAA,QAAQ,CAAE,CAAA,MAAA;AAAA,4BACxC,GAAA;AAAA,cAAC,eAAA;AAAA,cAAA;AAAA,gBACC,UAAU,EAAA,IAAA;AAAA,gBACV,IAAI,gBAAiB,CAAA,kBAAA;AAAA,gBAErB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,eAAA;AAAA,cADnC,cAAA;AAAA,aAEN;AAAA,WAEJ,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,KAED,CAAC,kBAAA,EAAoB,WAAW,iBAAmB,EAAA,cAAA,EAAgB,IAAI,CAAC,CAAA,CAAA;AAC7E;;;;"}

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

@@ -2,12 +2,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Flexbox, LayoutContainer } from '@vuu-ui/vuu-layout';
 import { VuuShellLocation } from '@vuu-ui/vuu-utils';
 import { ContextPanel } from '../context-panel/ContextPanel.js';
+import { useMemo } from 'react';
 
 const useSimpleContentPane = ({
   appHeader,
   htmlAttributes
-}) => {
-  return /* @__PURE__ */ jsxs(
+}) => useMemo(
+  () => /* @__PURE__ */ jsxs(
     Flexbox,
     {
       ...htmlAttributes,
@@ -37,8 +38,9 @@ const useSimpleContentPane = ({
         /* @__PURE__ */ jsx(ContextPanel, { id: VuuShellLocation.ContextPanel, overlay: true })
       ]
     }
-  );
-};
+  ),
+  [appHeader, htmlAttributes]
+);
 
 export { useSimpleContentPane };
 //# sourceMappingURL=useSimpleContentPane.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useSimpleContentPane.js","sources":["../../../src/shell-layout-templates/simple-content-pane/useSimpleContentPane.tsx"],"sourcesContent":["import { LayoutContainer, Flexbox } from \"@vuu-ui/vuu-layout\";\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { ContextPanel } from \"../context-panel\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\n\nexport const useSimpleContentPane: ShellLayoutTemplateHook = ({\n  appHeader,\n  htmlAttributes,\n}) => {\n  return (\n    <Flexbox\n      {...htmlAttributes}\n      style={{\n        ...htmlAttributes?.style,\n        flexDirection: \"row\",\n      }}\n    >\n      <Flexbox\n        className=\"vuuShell-content\"\n        style={{ flex: 1, flexDirection: \"column\" }}\n      >\n        {appHeader}\n        <LayoutContainer\n          id={VuuShellLocation.WorkspaceContainer}\n          key=\"main-content\"\n          style={{ flex: 1 }}\n        />\n      </Flexbox>\n      <ContextPanel id={VuuShellLocation.ContextPanel} overlay></ContextPanel>\n    </Flexbox>\n  );\n};\n"],"names":[],"mappings":";;;;;AAKO,MAAM,uBAAgD,CAAC;AAAA,EAC5D,SAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,GAAG,cAAgB,EAAA,KAAA;AAAA,QACnB,aAAe,EAAA,KAAA;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,kBAAA;AAAA,YACV,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,eAAe,QAAS,EAAA;AAAA,YAEzC,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,8BACD,GAAA;AAAA,gBAAC,eAAA;AAAA,gBAAA;AAAA,kBACC,IAAI,gBAAiB,CAAA,kBAAA;AAAA,kBAErB,KAAA,EAAO,EAAE,IAAA,EAAM,CAAE,EAAA;AAAA,iBAAA;AAAA,gBADb,cAAA;AAAA,eAEN;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,4BACC,YAAa,EAAA,EAAA,EAAA,EAAI,gBAAiB,CAAA,YAAA,EAAc,SAAO,IAAC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC3D,CAAA;AAEJ;;;;"}
+{"version":3,"file":"useSimpleContentPane.js","sources":["../../../src/shell-layout-templates/simple-content-pane/useSimpleContentPane.tsx"],"sourcesContent":["import { LayoutContainer, Flexbox } from \"@vuu-ui/vuu-layout\";\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { ContextPanel } from \"../context-panel\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\nimport { useMemo } from \"react\";\n\nexport const useSimpleContentPane: ShellLayoutTemplateHook = ({\n  appHeader,\n  htmlAttributes,\n}) =>\n  useMemo(\n    () => (\n      <Flexbox\n        {...htmlAttributes}\n        style={{\n          ...htmlAttributes?.style,\n          flexDirection: \"row\",\n        }}\n      >\n        <Flexbox\n          className=\"vuuShell-content\"\n          style={{ flex: 1, flexDirection: \"column\" }}\n        >\n          {appHeader}\n          <LayoutContainer\n            id={VuuShellLocation.WorkspaceContainer}\n            key=\"main-content\"\n            style={{ flex: 1 }}\n          />\n        </Flexbox>\n        <ContextPanel id={VuuShellLocation.ContextPanel} overlay></ContextPanel>\n      </Flexbox>\n    ),\n    [appHeader, htmlAttributes]\n  );\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,uBAAgD,CAAC;AAAA,EAC5D,SAAA;AAAA,EACA,cAAA;AACF,CACE,KAAA,OAAA;AAAA,EACE,sBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,GAAG,cAAgB,EAAA,KAAA;AAAA,QACnB,aAAe,EAAA,KAAA;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,kBAAA;AAAA,YACV,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,eAAe,QAAS,EAAA;AAAA,YAEzC,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,8BACD,GAAA;AAAA,gBAAC,eAAA;AAAA,gBAAA;AAAA,kBACC,IAAI,gBAAiB,CAAA,kBAAA;AAAA,kBAErB,KAAA,EAAO,EAAE,IAAA,EAAM,CAAE,EAAA;AAAA,iBAAA;AAAA,gBADb,cAAA;AAAA,eAEN;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,4BACC,YAAa,EAAA,EAAA,EAAA,EAAI,gBAAiB,CAAA,YAAA,EAAc,SAAO,IAAC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC3D;AAAA,EAEF,CAAC,WAAW,cAAc,CAAA;AAC5B;;;;"}

package/esm/shell.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { connectToServer } from '@vuu-ui/vuu-data-remote';
 import { StackLayout, LayoutProvider } from '@vuu-ui/vuu-layout';
-import { DialogProvider, NotificationsProvider, ContextMenuProvider } from '@vuu-ui/vuu-popups';
+import { DialogProvider, NotificationsProvider, useNotifications, ContextMenuProvider } from '@vuu-ui/vuu-popups';
 import { registerComponent, logger } from '@vuu-ui/vuu-utils';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { useMemo, useState, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import { AppHeader } from './app-header/AppHeader.js';
 import { ApplicationProvider } from './application-provider/ApplicationProvider.js';
 import { usePersistenceManager, PersistenceProvider } from './persistence-manager/PersistenceProvider.js';
@@ -26,7 +26,7 @@ registerComponent("ApplicationSettings", UserSettingsPanel, "view");
 if (process.env.NODE_ENV === "production") {
   if (typeof StackLayout !== "function") {
     console.warn(
-      "StackLayout module not loaded, will be unsbale to deserialize from layout JSON"
+      "StackLayout module not loaded, will be unable to deserialize from layout JSON"
     );
   }
 }
@@ -59,9 +59,9 @@ const VuuApplication = ({
     css: shellCss,
     window: targetWindow
   });
+  const notify = useNotifications();
   const { workspaceJSON, saveApplicationLayout } = useWorkspace();
   const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems();
-  const [connectionStatus, setConnectionStatus] = useState("initialising");
   const handleLayoutChange = useCallback(
     (layout) => {
       try {
@@ -74,23 +74,26 @@ const VuuApplication = ({
   );
   useMemo(async () => {
     if (serverUrl && user.token) {
-      const connectionStatus2 = await connectToServer({
+      const connectionStatus = await connectToServer({
         authToken: user.token,
         url: serverUrl,
         username: user.username
       });
-      setConnectionStatus(connectionStatus2);
+      if (connectionStatus === "rejected") {
+        notify({
+          type: "error",
+          body: "Unable to connect to VUU Server",
+          header: "Error"
+        });
+      }
     } else {
       console.warn(
         `Shell: serverUrl: '${serverUrl}', token: '${Array(user.token.length).fill("#").join("")}'  
         `
       );
     }
-  }, [serverUrl, user.token, user.username]);
+  }, [notify, serverUrl, user.token, user.username]);
   const isLayoutLoading = workspaceJSON === loadingJSON;
-  if (connectionStatus === "rejected") {
-    console.log("game over, no connection to server");
-  }
   const initialLayout = useShellLayout({
     ...ShellLayoutProps2,
     appHeader: getAppHeader(ShellLayoutProps2),

package/esm/shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport { LayoutProvider, StackLayout } from \"@vuu-ui/vuu-layout\";\nimport {\n  ContextMenuProvider,\n  DialogProvider,\n  NotificationsProvider,\n} from \"@vuu-ui/vuu-popups\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport {\n  IPersistenceManager,\n  LocalPersistenceManager,\n  PersistenceProvider,\n  usePersistenceManager,\n} from \"./persistence-manager\";\nimport { ShellLayoutProps, useShellLayout } from \"./shell-layout-templates\";\nimport { UserSettingsPanel } from \"./user-settings\";\nimport {\n  WorkspaceProps,\n  WorkspaceProvider,\n  useWorkspace,\n  useWorkspaceContextMenuItems,\n} from \"./workspace-management\";\n\nimport shellCss from \"./shell.css\";\nimport { loadingJSON } from \"./workspace-management/defaultWorkspaceJSON\";\n\nregisterComponent(\"ApplicationSettings\", UserSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n  // StackLayout is loaded just to force component registration, we know it will be\n  // required when default layout is instantiated. This is only required in prod\n  // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n  if (typeof StackLayout !== \"function\") {\n    console.warn(\n      \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n    );\n  }\n}\n\nconst { error } = logger(\"Shell\");\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  shellLayoutProps?: ShellLayoutProps;\n  workspaceProps?: WorkspaceProps;\n  children?: ReactNode;\n  loginUrl?: string;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nconst defaultAppHeader = <AppHeader />;\n\nconst getAppHeader = (shellLayoutProps?: ShellLayoutProps) =>\n  shellLayoutProps?.appHeader ?? defaultAppHeader;\n\nconst defaultHTMLAttributes: HTMLAttributes<HTMLDivElement> = {\n  className: \"vuuShell\",\n};\n\nconst getHTMLAttributes = (props?: ShellLayoutProps) => {\n  if (props?.htmlAttributes) {\n    return {\n      ...defaultHTMLAttributes,\n      ...props.htmlAttributes,\n    };\n  } else {\n    return defaultHTMLAttributes;\n  }\n};\n\nconst VuuApplication = ({\n  shellLayoutProps: ShellLayoutProps,\n  children,\n  // loginUrl, // need to make this available to app header\n  serverUrl,\n  user,\n}: Omit<ShellProps, \"ContentLayoutProps\" | \"loginUrl\" | \"workspaceProps\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const { workspaceJSON, saveApplicationLayout } = useWorkspace();\n\n  const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems();\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"initialising\" | \"connected\" | \"rejected\"\n  >(\"initialising\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    } else {\n      console.warn(\n        `Shell: serverUrl: '${serverUrl}', token: '${Array(user.token.length)\n          .fill(\"#\")\n          .join(\"\")}'  \n        `\n      );\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const isLayoutLoading = workspaceJSON === loadingJSON;\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  const initialLayout = useShellLayout({\n    ...ShellLayoutProps,\n    appHeader: getAppHeader(ShellLayoutProps),\n    htmlAttributes: getHTMLAttributes(ShellLayoutProps),\n  });\n\n  return isLayoutLoading ? null : (\n    <ContextMenuProvider\n      menuActionHandler={handleMenuAction}\n      menuBuilder={buildMenuOptions}\n    >\n      <LayoutProvider\n        workspaceJSON={workspaceJSON}\n        onLayoutChange={handleLayoutChange}\n      >\n        {initialLayout}\n      </LayoutProvider>\n      {children}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Shell = ({\n  loginUrl,\n  user,\n  workspaceProps,\n  ...props\n}: ShellProps) => {\n  // If user has provided an implementation of IPersistenceManager\n  // by wrapping higher level PersistenceProvider, use it, otw\n  // default to LocalPersistenceManager\n  const persistenceManager = usePersistenceManager();\n  const localPersistenceManager = useMemo<\n    IPersistenceManager | undefined\n  >(() => {\n    if (persistenceManager) {\n      return undefined;\n    }\n    console.log(\n      `No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`\n    );\n    return new LocalPersistenceManager(`vuu/${user.username}`);\n  }, [persistenceManager, user.username]);\n\n  // ApplicationProvider must go outside Dialog and Notification providers\n  // ApplicationProvider injects the SaltProvider and this must be the root\n  // SaltProvider.\n\n  const shellProviders = (\n    <ApplicationProvider\n      density=\"high\"\n      loginUrl={loginUrl}\n      theme=\"vuu-theme\"\n      user={user}\n    >\n      <WorkspaceProvider {...workspaceProps}>\n        <DialogProvider>\n          <NotificationsProvider>\n            <VuuApplication {...props} user={user} />\n          </NotificationsProvider>\n        </DialogProvider>\n      </WorkspaceProvider>\n    </ApplicationProvider>\n  );\n\n  if (persistenceManager) {\n    return shellProviders;\n  } else {\n    return (\n      <PersistenceProvider persistenceManager={localPersistenceManager}>\n        {shellProviders}\n      </PersistenceProvider>\n    );\n  }\n};\n"],"names":["ShellLayoutProps","connectionStatus"],"mappings":"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"}
+{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport { LayoutProvider, StackLayout } from \"@vuu-ui/vuu-layout\";\nimport {\n  ContextMenuProvider,\n  DialogProvider,\n  NotificationsProvider,\n  useNotifications,\n} from \"@vuu-ui/vuu-popups\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactNode, useCallback, useMemo } from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport {\n  IPersistenceManager,\n  LocalPersistenceManager,\n  PersistenceProvider,\n  usePersistenceManager,\n} from \"./persistence-manager\";\nimport { ShellLayoutProps, useShellLayout } from \"./shell-layout-templates\";\nimport { UserSettingsPanel } from \"./user-settings\";\nimport {\n  WorkspaceProps,\n  WorkspaceProvider,\n  useWorkspace,\n  useWorkspaceContextMenuItems,\n} from \"./workspace-management\";\n\nimport shellCss from \"./shell.css\";\nimport { loadingJSON } from \"./workspace-management/defaultWorkspaceJSON\";\n\nregisterComponent(\"ApplicationSettings\", UserSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n  // StackLayout is loaded just to force component registration, we know it will be\n  // required when default layout is instantiated. This is only required in prod\n  // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n  if (typeof StackLayout !== \"function\") {\n    console.warn(\n      \"StackLayout module not loaded, will be unable to deserialize from layout JSON\"\n    );\n  }\n}\n\nconst { error } = logger(\"Shell\");\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  shellLayoutProps?: ShellLayoutProps;\n  workspaceProps?: WorkspaceProps;\n  children?: ReactNode;\n  loginUrl?: string;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nconst defaultAppHeader = <AppHeader />;\n\nconst getAppHeader = (shellLayoutProps?: ShellLayoutProps) =>\n  shellLayoutProps?.appHeader ?? defaultAppHeader;\n\nconst defaultHTMLAttributes: HTMLAttributes<HTMLDivElement> = {\n  className: \"vuuShell\",\n};\n\nconst getHTMLAttributes = (props?: ShellLayoutProps) => {\n  if (props?.htmlAttributes) {\n    return {\n      ...defaultHTMLAttributes,\n      ...props.htmlAttributes,\n    };\n  } else {\n    return defaultHTMLAttributes;\n  }\n};\n\nconst VuuApplication = ({\n  shellLayoutProps: ShellLayoutProps,\n  children,\n  // loginUrl, // need to make this available to app header\n  serverUrl,\n  user,\n}: Omit<ShellProps, \"ContentLayoutProps\" | \"loginUrl\" | \"workspaceProps\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const notify = useNotifications();\n  const { workspaceJSON, saveApplicationLayout } = useWorkspace();\n\n  const { buildMenuOptions, handleMenuAction } = useWorkspaceContextMenuItems();\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      if (connectionStatus === \"rejected\") {\n        notify({\n          type: \"error\",\n          body: \"Unable to connect to VUU Server\",\n          header: \"Error\",\n        });\n      }\n    } else {\n      console.warn(\n        `Shell: serverUrl: '${serverUrl}', token: '${Array(user.token.length)\n          .fill(\"#\")\n          .join(\"\")}'  \n        `\n      );\n    }\n  }, [notify, serverUrl, user.token, user.username]);\n\n  const isLayoutLoading = workspaceJSON === loadingJSON;\n\n  const initialLayout = useShellLayout({\n    ...ShellLayoutProps,\n    appHeader: getAppHeader(ShellLayoutProps),\n    htmlAttributes: getHTMLAttributes(ShellLayoutProps),\n  });\n\n  return isLayoutLoading ? null : (\n    <ContextMenuProvider\n      menuActionHandler={handleMenuAction}\n      menuBuilder={buildMenuOptions}\n    >\n      <LayoutProvider\n        workspaceJSON={workspaceJSON}\n        onLayoutChange={handleLayoutChange}\n      >\n        {initialLayout}\n      </LayoutProvider>\n      {children}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Shell = ({\n  loginUrl,\n  user,\n  workspaceProps,\n  ...props\n}: ShellProps) => {\n  // If user has provided an implementation of IPersistenceManager\n  // by wrapping higher level PersistenceProvider, use it, otw\n  // default to LocalPersistenceManager\n  const persistenceManager = usePersistenceManager();\n  const localPersistenceManager = useMemo<\n    IPersistenceManager | undefined\n  >(() => {\n    if (persistenceManager) {\n      return undefined;\n    }\n    console.log(\n      `No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`\n    );\n    return new LocalPersistenceManager(`vuu/${user.username}`);\n  }, [persistenceManager, user.username]);\n\n  // ApplicationProvider must go outside Dialog and Notification providers\n  // ApplicationProvider injects the SaltProvider and this must be the root\n  // SaltProvider.\n\n  const shellProviders = (\n    <ApplicationProvider\n      density=\"high\"\n      loginUrl={loginUrl}\n      theme=\"vuu-theme\"\n      user={user}\n    >\n      <WorkspaceProvider {...workspaceProps}>\n        <DialogProvider>\n          <NotificationsProvider>\n            <VuuApplication {...props} user={user} />\n          </NotificationsProvider>\n        </DialogProvider>\n      </WorkspaceProvider>\n    </ApplicationProvider>\n  );\n\n  if (persistenceManager) {\n    return shellProviders;\n  } else {\n    return (\n      <PersistenceProvider persistenceManager={localPersistenceManager}>\n        {shellProviders}\n      </PersistenceProvider>\n    );\n  }\n};\n"],"names":["ShellLayoutProps"],"mappings":"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"}

package/package.json

@@ -1,25 +1,25 @@
 {
-  "version": "0.8.77",
+  "version": "0.8.78",
   "description": "VUU UI Shell",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.77",
-    "@vuu-ui/vuu-protocol-types": "0.8.77",
-    "@vuu-ui/vuu-table-types": "0.8.77"
+    "@vuu-ui/vuu-data-types": "0.8.78",
+    "@vuu-ui/vuu-protocol-types": "0.8.78",
+    "@vuu-ui/vuu-table-types": "0.8.78"
   },
   "dependencies": {
     "@salt-ds/core": "1.27.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-react": "0.8.77",
-    "@vuu-ui/vuu-data-remote": "0.8.77",
-    "@vuu-ui/vuu-icons": "0.8.77",
-    "@vuu-ui/vuu-layout": "0.8.77",
-    "@vuu-ui/vuu-popups": "0.8.77",
-    "@vuu-ui/vuu-table": "0.8.77",
-    "@vuu-ui/vuu-ui-controls": "0.8.77",
-    "@vuu-ui/vuu-utils": "0.8.77",
+    "@vuu-ui/vuu-data-react": "0.8.78",
+    "@vuu-ui/vuu-data-remote": "0.8.78",
+    "@vuu-ui/vuu-icons": "0.8.78",
+    "@vuu-ui/vuu-layout": "0.8.78",
+    "@vuu-ui/vuu-popups": "0.8.78",
+    "@vuu-ui/vuu-table": "0.8.78",
+    "@vuu-ui/vuu-ui-controls": "0.8.78",
+    "@vuu-ui/vuu-utils": "0.8.78",
     "html-to-image": "^1.11.11"
   },
   "peerDependencies": {