@vuu-ui/vuu-shell 0.8.22-debug → 0.8.23-debug

package/cjs/index.js

@@ -78,7 +78,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/app-header/AppHeader.tsx
 var import_react3 = require("react");
-var import_vuu_layout = require("@vuu-ui/vuu-layout");
+var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
 var import_clsx2 = __toESM(require("clsx"));
 
 // src/login/LoginPanel.tsx
@@ -342,7 +342,7 @@ var AppHeader = ({
   loginUrl,
   onNavigate,
   onSwitchTheme,
-  themeMode = "light",
+  themeMode: _,
   user,
   ...htmlAttributes
 }) => {
@@ -351,7 +351,7 @@ var AppHeader = ({
     logout(loginUrl);
   }, [loginUrl]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    import_vuu_layout.Toolbar,
+    import_vuu_ui_controls2.Toolbar,
     {
       alignItems: "end",
       className,
@@ -424,7 +424,7 @@ var ConnectionStatusIcon = ({
 
 // src/feature/Feature.tsx
 var import_react6 = __toESM(require("react"));
-var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
+var import_vuu_layout = require("@vuu-ui/vuu-layout");
 
 // src/feature/FeatureErrorBoundary.tsx
 var import_react5 = __toESM(require("react"));
@@ -507,10 +507,10 @@ function RawFeature({
 }
 var Feature = import_react6.default.memo(RawFeature);
 Feature.displayName = "Feature";
-(0, import_vuu_layout2.registerComponent)("Feature", Feature, "view");
+(0, import_vuu_layout.registerComponent)("Feature", Feature, "view");
 
 // src/layout-management/SaveLayoutPanel.tsx
-var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
 
 // ../../node_modules/html-to-image/es/util.js
 function resolveUrl(url, baseUrl) {
@@ -1342,7 +1342,7 @@ var SaveLayoutPanel = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core3.FormField, { className: formField, children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core3.FormFieldLabel, { children: "Group" }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            import_vuu_ui_controls2.ComboBox,
+            import_vuu_ui_controls3.ComboBox,
             {
               source: groups,
               allowFreeText: true,
@@ -1375,7 +1375,7 @@ var SaveLayoutPanel = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core3.FormField, { className: formField, children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core3.FormFieldLabel, { children: "Some Layout Setting" }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase3}-settingsGroup`, children: checkboxValues.map((value, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            import_vuu_ui_controls2.Checkbox,
+            import_vuu_ui_controls3.Checkbox,
             {
               onToggle: () => setCheckValues(
                 (prev) => prev.includes(value) ? prev.filter((entry) => entry !== value) : [...prev, value]
@@ -1389,7 +1389,7 @@ var SaveLayoutPanel = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core3.FormField, { className: formField, children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core3.FormFieldLabel, { children: "Some Layout Setting" }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase3}-settingsGroup`, children: radioValues.map((value, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            import_vuu_ui_controls2.RadioButton,
+            import_vuu_ui_controls3.RadioButton,
             {
               onClick: () => setRadioValue(value),
               checked: radioValue === value,
@@ -1418,11 +1418,11 @@ var SaveLayoutPanel = (props) => {
 };
 
 // src/layout-management/LayoutList.tsx
-var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
 
 // src/layout-management/useLayoutManager.tsx
 var import_react14 = __toESM(require("react"));
-var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
+var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
 
 // ../vuu-popups/src/dialog/Dialog.tsx
 var import_clsx5 = __toESM(require("clsx"));
@@ -1457,8 +1457,11 @@ var DialogHeader = ({
 
 // ../vuu-popups/src/popup/useAnchoredPosition.ts
 var import_react8 = require("react");
+
+// ../vuu-popups/src/popup/getPositionRelativeToAnchor.ts
 var getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetTop, minWidth, dimensions) => {
   const { bottom, height, left, right, top, width } = anchorElement.getBoundingClientRect();
+  console.log({ top });
   switch (placement) {
     case "below":
       return { left: left + offsetLeft, top: bottom + offsetTop };
@@ -1491,10 +1494,12 @@ var getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetT
       }
     default:
       throw Error(
-        "Popup getPositionRelativeToAnchor only supported placement values are below and right"
+        `Popup getPositionRelativeToAnchor non-supported placement value ${placement}`
       );
   }
 };
+
+// ../vuu-popups/src/popup/useAnchoredPosition.ts
 var useAnchoredPosition = ({
   anchorElement,
   minWidth,
@@ -1570,7 +1575,7 @@ var Dialog = ({
   } = PopupProps;
   const rootRef = (0, import_react9.useRef)(null);
   const portalRef = (0, import_react9.useRef)(null);
-  const [themeClass, densityClass, dataMode] = (0, import_vuu_utils2.useThemeAttributes)();
+  const [themeClass, _, dataMode] = (0, import_vuu_utils2.useThemeAttributes)();
   const { position } = useAnchoredPosition({
     anchorElement,
     offsetLeft,
@@ -2082,18 +2087,22 @@ var LayoutManagementProvider = (props) => {
   }, [notify, setApplicationJSON]);
   const saveApplicationLayout = (0, import_react14.useCallback)(
     (layout) => {
-      setApplicationLayout(layout, false);
-      getPersistenceManager().saveApplicationJSON(applicationJSONRef.current);
+      if ((0, import_vuu_layout2.isLayoutJSON)(layout)) {
+        setApplicationLayout(layout, false);
+        getPersistenceManager().saveApplicationJSON(applicationJSONRef.current);
+      } else {
+        console.error("Tried to save invalid application layout", layout);
+      }
     },
     [setApplicationLayout]
   );
   const saveLayout = (0, import_react14.useCallback)(
     (metadata) => {
-      const layoutToSave = (0, import_vuu_layout3.resolveJSONPath)(
+      const layoutToSave = (0, import_vuu_layout2.resolveJSONPath)(
         applicationJSONRef.current.layout,
         "#main-tabs.ACTIVE_CHILD"
       );
-      if (layoutToSave) {
+      if (layoutToSave && (0, import_vuu_layout2.isLayoutJSON)(layoutToSave)) {
         getPersistenceManager().createLayout(metadata, ensureLayoutHasTitle(layoutToSave, metadata)).then((metadata2) => {
           notify({
             type: "success" /* Success */,
@@ -2110,10 +2119,11 @@ var LayoutManagementProvider = (props) => {
           console.error("Error occurred while saving layout", error2);
         });
       } else {
+        console.error("Tried to save invalid layout", layoutToSave);
         notify({
           type: "error" /* Error */,
           header: "Failed to Save Layout",
-          body: "Cannot save undefined layout"
+          body: "Cannot save invalid layout"
         });
       }
     },
@@ -2238,7 +2248,7 @@ var LayoutList = (props) => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `${classBase7}-header`, children: "My Layouts" }),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          import_vuu_ui_controls3.List,
+          import_vuu_ui_controls4.List,
           {
             height: "auto",
             source: Object.entries(layoutsByGroup),
@@ -2267,14 +2277,14 @@ var LayoutList = (props) => {
 
 // src/left-nav/LeftNav.tsx
 var import_vuu_icons = require("@vuu-ui/vuu-icons");
-var import_vuu_layout5 = require("@vuu-ui/vuu-layout");
-var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_layout4 = require("@vuu-ui/vuu-layout");
+var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
 var import_clsx7 = __toESM(require("clsx"));
 var import_react15 = require("react");
 
 // src/feature-list/FeatureList.tsx
-var import_vuu_layout4 = require("@vuu-ui/vuu-layout");
+var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var classBase8 = "vuuFeatureList";
 var FeatureList = ({
@@ -2289,13 +2299,13 @@ var FeatureList = ({
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ...htmlAttributes, className: classBase8, children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `${classBase8}-header`, children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `${classBase8}-content`, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_vuu_layout4.Palette,
+      import_vuu_layout3.Palette,
       {
         orientation: "vertical",
         ListProps: listProps,
         ViewProps: ViewProps2,
         children: features.map((featureProps, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_vuu_layout4.PaletteItem,
+          import_vuu_layout3.PaletteItem,
           {
             closeable: true,
             label: featureProps.title,
@@ -2322,7 +2332,7 @@ var getDisplayStatus = (activeTabIndex, expanded) => {
   }
 };
 var LeftNav = (props) => {
-  const dispatch = (0, import_vuu_layout5.useLayoutProviderDispatch)();
+  const dispatch = (0, import_vuu_layout4.useLayoutProviderDispatch)();
   const [themeClass] = (0, import_vuu_utils5.useThemeAttributes)();
   const {
     "data-path": path,
@@ -2406,7 +2416,7 @@ var LeftNav = (props) => {
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "vuuLeftNav-logo", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vuu_icons.VuuLogo, {}) }),
               /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `${classBase9}-main`, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-                import_vuu_ui_controls4.Tabstrip,
+                import_vuu_ui_controls5.Tabstrip,
                 {
                   activeTabIndex: navState.activeTabIndex,
                   animateSelectionThumb: false,
@@ -2414,10 +2424,10 @@ var LeftNav = (props) => {
                   onActiveChange: handleTabSelection,
                   orientation: "vertical",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vuu_ui_controls4.Tab, { "data-icon": "demo", label: "DEMO" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vuu_ui_controls4.Tab, { "data-icon": "features", label: "VUU FEATURES" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vuu_ui_controls4.Tab, { "data-icon": "tables", label: "VUU TABLES" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vuu_ui_controls4.Tab, { "data-icon": "layouts", label: "MY LAYOUTS" })
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vuu_ui_controls5.Tab, { "data-icon": "demo", label: "DEMO" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vuu_ui_controls5.Tab, { "data-icon": "features", label: "VUU FEATURES" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vuu_ui_controls5.Tab, { "data-icon": "tables", label: "VUU TABLES" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vuu_ui_controls5.Tab, { "data-icon": "layouts", label: "MY LAYOUTS" })
                   ]
                 }
               ) }),
@@ -2436,7 +2446,7 @@ var LeftNav = (props) => {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-          import_vuu_layout5.Stack,
+          import_vuu_layout4.Stack,
           {
             active: navState.activeTabIndex - 1,
             className: `${classBase9}-menu-secondary`,
@@ -2726,7 +2736,7 @@ var SessionEditingForm = ({
 
 // src/shell.tsx
 var import_vuu_data_remote2 = require("@vuu-ui/vuu-data-remote");
-var import_vuu_layout9 = require("@vuu-ui/vuu-layout");
+var import_vuu_layout8 = require("@vuu-ui/vuu-layout");
 var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
 var import_clsx11 = __toESM(require("clsx"));
 var import_react20 = require("react");
@@ -2735,7 +2745,7 @@ var import_react20 = require("react");
 var import_core6 = require("@salt-ds/core");
 var import_clsx9 = __toESM(require("clsx"));
 var import_react17 = require("react");
-var import_vuu_layout6 = require("@vuu-ui/vuu-layout");
+var import_vuu_layout5 = require("@vuu-ui/vuu-layout");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var classBase11 = "vuuContextPanel";
 var ContextPanel = ({
@@ -2745,7 +2755,7 @@ var ContextPanel = ({
   overlay = false,
   title
 }) => {
-  const dispatchLayoutAction = (0, import_vuu_layout6.useLayoutProviderDispatch)();
+  const dispatchLayoutAction = (0, import_vuu_layout5.useLayoutProviderDispatch)();
   const handleClose = (0, import_react17.useCallback)(() => {
     dispatchLayoutAction({
       path: "#context-panel",
@@ -2760,7 +2770,7 @@ var ContextPanel = ({
     [`${classBase11}-overlay`]: overlay
   });
   const content = (0, import_react17.useMemo)(
-    () => contentProp && expanded ? (0, import_vuu_layout6.layoutFromJson)(contentProp, "context-0") : null,
+    () => contentProp && expanded ? (0, import_vuu_layout5.layoutFromJson)(contentProp, "context-0") : null,
     [contentProp, expanded]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -2769,7 +2779,7 @@ var ContextPanel = ({
       className: (0, import_clsx9.default)(classBase11, className, {
         [`${classBase11}-expanded`]: expanded
       }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_vuu_layout6.View, { className: `${classBase11}-inner`, header: false, id: "context-panel", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_vuu_layout5.View, { className: `${classBase11}-inner`, header: false, id: "context-panel", children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `${classBase11}-header`, children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: `${classBase11}-title`, children: title }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -2789,7 +2799,7 @@ var ContextPanel = ({
 };
 
 // src/shell-layouts/useFullHeightLeftPanel.tsx
-var import_vuu_layout7 = require("@vuu-ui/vuu-layout");
+var import_vuu_layout6 = require("@vuu-ui/vuu-layout");
 
 // src/shell-layouts/side-panel/SidePanel.tsx
 var import_react18 = require("react");
@@ -2821,7 +2831,7 @@ var useFullHeightLeftPanel = ({
   LeftSidePanelProps
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-    import_vuu_layout7.Flexbox,
+    import_vuu_layout6.Flexbox,
     {
       className: "App",
       style: {
@@ -2832,13 +2842,13 @@ var useFullHeightLeftPanel = ({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SidePanel, { ...LeftSidePanelProps, id: "vuu-side-panel" }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-          import_vuu_layout7.Flexbox,
+          import_vuu_layout6.Flexbox,
           {
             className: "vuuShell-content",
             style: { flex: 1, flexDirection: "column" },
             children: [
               appHeader,
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_vuu_layout7.DraggableLayout, { dropTarget: true, style: { flex: 1 } }, "main-content")
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_vuu_layout6.DraggableLayout, { dropTarget: true, style: { flex: 1 } }, "main-content")
             ]
           }
         ),
@@ -2849,7 +2859,7 @@ var useFullHeightLeftPanel = ({
 };
 
 // src/shell-layouts/useInlayLeftPanel.tsx
-var import_vuu_layout8 = require("@vuu-ui/vuu-layout");
+var import_vuu_layout7 = require("@vuu-ui/vuu-layout");
 var import_react19 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var useInlayLeftPanel = ({
@@ -2873,7 +2883,7 @@ var useInlayLeftPanel = ({
       const drawers = [];
       drawers.push(
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          import_vuu_layout8.Drawer,
+          import_vuu_layout7.Drawer,
           {
             onClick: handleDrawerClick,
             open,
@@ -2883,7 +2893,7 @@ var useInlayLeftPanel = ({
             sizeOpen: 200,
             toggleButton: "end",
             children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-              import_vuu_layout8.View,
+              import_vuu_layout7.View,
               {
                 className: "vuuShell-palette",
                 id: "vw-app-palette",
@@ -2902,15 +2912,15 @@ var useInlayLeftPanel = ({
     [handleDrawerClick, open]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-    import_vuu_layout8.Flexbox,
+    import_vuu_layout7.Flexbox,
     {
       className: "App",
       style: { flexDirection: "column", height: "100%", width: "100%" },
       children: [
         appHeader,
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_vuu_layout8.DockLayout, { style: { flex: 1 }, children: getDrawers(LeftSidePanelProps == null ? void 0 : LeftSidePanelProps.children).concat(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_vuu_layout7.DockLayout, { style: { flex: 1 }, children: getDrawers(LeftSidePanelProps == null ? void 0 : LeftSidePanelProps.children).concat(
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            import_vuu_layout8.DraggableLayout,
+            import_vuu_layout7.DraggableLayout,
             {
               dropTarget: true,
               style: { width: "100%", height: "100%" }
@@ -2934,7 +2944,7 @@ var useShellLayout = ({
 
 // src/shell.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
-if (typeof import_vuu_layout9.StackLayout !== "function") {
+if (typeof import_vuu_layout8.StackLayout !== "function") {
   console.warn(
     "StackLayout module not loaded, will be unsbale to deserialize from layout JSON"
   );
@@ -2948,7 +2958,7 @@ var Shell = ({
   className: classNameProp,
   leftSidePanelLayout,
   loginUrl,
-  saveLocation = "remote",
+  saveLocation: _,
   saveUrl,
   serverUrl,
   user,
@@ -3014,13 +3024,13 @@ var Shell = ({
       menuBuilder: buildMenuOptions,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          import_vuu_layout9.LayoutProvider,
+          import_vuu_layout8.LayoutProvider,
           {
             ...LayoutProps,
             layout: applicationJson.layout,
             onLayoutChange: handleLayoutChange,
             children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-              import_vuu_layout9.DraggableLayout,
+              import_vuu_layout8.DraggableLayout,
               {
                 className,
                 "data-mode": dataMode,