@vuu-ui/vuu-shell 0.6.24-debug → 0.6.25-debug

package/esm/index.js

@@ -1,11 +1,49 @@
+// src/connection-status/ConnectionStatusIcon.tsx
+import React, { useEffect, useState } from "react";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ConnectionStatusIcon = ({ connectionStatus, className, element = "span", ...props }) => {
+  const [classBase5, setClassBase] = useState("vuuConnectingStatus");
+  useEffect(() => {
+    switch (connectionStatus) {
+      case "connected":
+      case "reconnected":
+        setClassBase("vuuActiveStatus");
+        break;
+      case "connecting":
+        setClassBase("vuuConnectingStatus");
+        break;
+      case "disconnected":
+        setClassBase("vuuDisconnectedStatus");
+        break;
+      default:
+        break;
+    }
+  }, [connectionStatus]);
+  const statusIcon = React.createElement(
+    element,
+    {
+      ...props,
+      className: cx("vuuStatus vuuIcon", classBase5, className)
+    }
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "vuuStatus-container salt-theme", children: [
+    statusIcon,
+    /* @__PURE__ */ jsxs("div", { className: "vuuStatus-text", children: [
+      "Status: ",
+      connectionStatus.toUpperCase()
+    ] })
+  ] }) });
+};
+
 // src/feature/Feature.tsx
-import React2, { Suspense } from "react";
+import React3, { Suspense } from "react";
 import { registerComponent } from "@vuu-ui/vuu-layout";
 
 // src/feature/ErrorBoundary.jsx
-import React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var ErrorBoundary = class extends React.Component {
+import React2 from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ErrorBoundary = class extends React2.Component {
   constructor(props) {
     super(props);
     this.state = { errorMessage: null };
@@ -18,9 +56,9 @@ var ErrorBoundary = class extends React.Component {
   }
   render() {
     if (this.state.errorMessage) {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("h1", { children: "Something went wrong." }),
-        /* @__PURE__ */ jsx("p", { children: this.state.errorMessage })
+      return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx2("h1", { children: "Something went wrong." }),
+        /* @__PURE__ */ jsx2("p", { children: this.state.errorMessage })
       ] });
     }
     return this.props.children;
@@ -28,8 +66,8 @@ var ErrorBoundary = class extends React.Component {
 };
 
 // src/feature/Loader.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Loader = () => /* @__PURE__ */ jsx2("div", { className: "hwLoader", children: "loading" });
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Loader = () => /* @__PURE__ */ jsx3("div", { className: "hwLoader", children: "loading" });
 
 // src/feature/css-module-loader.ts
 var importCSS = async (path) => {
@@ -38,7 +76,7 @@ var importCSS = async (path) => {
 };
 
 // src/feature/Feature.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function RawFeature({
   url,
   css,
@@ -53,25 +91,25 @@ function RawFeature({
       ];
     });
   }
-  const LazyFeature = React2.lazy(() => import(
+  const LazyFeature = React3.lazy(() => import(
     /* @vite-ignore */
     url
   ));
-  return /* @__PURE__ */ jsx3(ErrorBoundary, { children: /* @__PURE__ */ jsx3(Suspense, { fallback: /* @__PURE__ */ jsx3(Loader, {}), children: /* @__PURE__ */ jsx3(LazyFeature, { ...props, ...params }) }) });
+  return /* @__PURE__ */ jsx4(ErrorBoundary, { children: /* @__PURE__ */ jsx4(Suspense, { fallback: /* @__PURE__ */ jsx4(Loader, {}), children: /* @__PURE__ */ jsx4(LazyFeature, { ...props, ...params }) }) });
 }
-var Feature = React2.memo(RawFeature);
+var Feature = React3.memo(RawFeature);
 Feature.displayName = "Feature";
 registerComponent("Feature", Feature, "view");
 
 // src/login/LoginPanel.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 import { Button } from "@salt-ds/core";
 import { FormField, Input } from "@heswell/salt-lab";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var classBase = "vuuLoginPanel";
 var LoginPanel = ({ onSubmit }) => {
-  const [username, setUserName] = useState("");
-  const [password, setPassword] = useState("");
+  const [username, setUserName] = useState2("");
+  const [password, setPassword] = useState2("");
   const login = () => {
     onSubmit(username, password);
   };
@@ -82,9 +120,9 @@ var LoginPanel = ({ onSubmit }) => {
     setPassword(value);
   };
   const dataIsValid = username.trim() !== "" && password.trim() !== "";
-  return /* @__PURE__ */ jsxs2("div", { className: classBase, children: [
-    /* @__PURE__ */ jsx4(FormField, { label: "Username", style: { width: 200 }, children: /* @__PURE__ */ jsx4(Input, { value: username, id: "text-username", onChange: handleUsername }) }),
-    /* @__PURE__ */ jsx4(FormField, { label: "Password", style: { width: 200 }, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("div", { className: classBase, children: [
+    /* @__PURE__ */ jsx5(FormField, { label: "Username", style: { width: 200 }, children: /* @__PURE__ */ jsx5(Input, { value: username, id: "text-username", onChange: handleUsername }) }),
+    /* @__PURE__ */ jsx5(FormField, { label: "Password", style: { width: 200 }, children: /* @__PURE__ */ jsx5(
       Input,
       {
         type: "password",
@@ -93,7 +131,7 @@ var LoginPanel = ({ onSubmit }) => {
         onChange: handlePassword
       }
     ) }),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       Button,
       {
         className: `${classBase}-login`,
@@ -125,16 +163,16 @@ var logout = (loginUrl) => {
 // src/shell.tsx
 import { connectToServer } from "@vuu-ui/vuu-data";
 import {
-  useCallback as useCallback5,
-  useEffect as useEffect3,
+  useCallback as useCallback6,
+  useEffect as useEffect4,
   useRef,
-  useState as useState4
+  useState as useState5
 } from "react";
 
 // src/use-layout-config.js
-import { useCallback, useEffect, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect2, useState as useState3 } from "react";
 var useLayoutConfig = (user, defaultLayout) => {
-  const [layout, _setLayout] = useState2(defaultLayout);
+  const [layout, _setLayout] = useState3(defaultLayout);
   const setLayout = (layout2) => {
     _setLayout(layout2);
   };
@@ -148,7 +186,7 @@ var useLayoutConfig = (user, defaultLayout) => {
     },
     [defaultLayout, user.username]
   );
-  useEffect(() => {
+  useEffect2(() => {
     load();
   }, [load]);
   const saveData = useCallback(
@@ -177,7 +215,7 @@ var use_layout_config_default = useLayoutConfig;
 
 // src/ShellContextProvider.tsx
 import { createContext, useContext } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var defaultConfig = {};
 var ShellContext = createContext(defaultConfig);
 var Provider = ({
@@ -189,20 +227,20 @@ var Provider = ({
     ...inheritedContext,
     ...context
   };
-  return /* @__PURE__ */ jsx5(ShellContext.Provider, { value: mergedContext, children });
+  return /* @__PURE__ */ jsx6(ShellContext.Provider, { value: mergedContext, children });
 };
 var ShellContextProvider = ({
   children,
   value
 }) => {
-  return /* @__PURE__ */ jsx5(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ jsx5(Provider, { context: value, inheritedContext: context, children }) });
+  return /* @__PURE__ */ jsx6(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ jsx6(Provider, { context: value, inheritedContext: context, children }) });
 };
 var useShellContext = () => {
   return useContext(ShellContext);
 };
 
 // src/shell.tsx
-import cx3 from "classnames";
+import cx5 from "classnames";
 import {
   Chest,
   DraggableLayout,
@@ -213,7 +251,7 @@ import {
 } from "@vuu-ui/vuu-layout";
 
 // src/app-header/AppHeader.tsx
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback5 } from "react";
 
 // src/user-profile/UserProfile.tsx
 import { Button as Button3 } from "@salt-ds/core";
@@ -228,8 +266,8 @@ import { ExportIcon } from "@salt-ds/icons";
 import {
   forwardRef,
   useCallback as useCallback2,
-  useEffect as useEffect2,
-  useState as useState3
+  useEffect as useEffect3,
+  useState as useState4
 } from "react";
 
 // src/get-layout-history.ts
@@ -243,16 +281,16 @@ var getLayoutHistory = async (user) => {
 };
 
 // src/user-profile/UserPanel.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var byLastUpdate = ({ lastUpdate: l1 }, { lastUpdate: l2 }) => {
   return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;
 };
 var HistoryListItem = (props) => {
-  return /* @__PURE__ */ jsx6(ListItem, { ...props });
+  return /* @__PURE__ */ jsx7(ListItem, { ...props });
 };
 var UserPanel = forwardRef(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
-  const [history, setHistory] = useState3([]);
-  useEffect2(() => {
+  const [history, setHistory] = useState4([]);
+  useEffect3(() => {
     async function getHistory() {
       const history2 = await getLayoutHistory(user);
       const sortedHistory = history2.filter((item) => item.id !== "latest").sort(byLastUpdate).map(({ id, lastUpdate }) => ({
@@ -277,8 +315,8 @@ var UserPanel = forwardRef(function UserPanel2({ loginUrl, onNavigate, user, lay
     logout(loginUrl);
   }, [loginUrl]);
   const selected = history.length === 0 ? null : layoutId === "latest" ? history[0] : history.find((i) => i.id === layoutId);
-  return /* @__PURE__ */ jsxs3("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs4("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
+    /* @__PURE__ */ jsx7(
       List,
       {
         ListItem: HistoryListItem,
@@ -288,15 +326,15 @@ var UserPanel = forwardRef(function UserPanel2({ loginUrl, onNavigate, user, lay
         source: history
       }
     ),
-    /* @__PURE__ */ jsx6("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ jsxs3(Button2, { "aria-label": "logout", onClick: handleLogout, children: [
-      /* @__PURE__ */ jsx6(ExportIcon, {}),
+    /* @__PURE__ */ jsx7("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ jsxs4(Button2, { "aria-label": "logout", onClick: handleLogout, children: [
+      /* @__PURE__ */ jsx7(ExportIcon, {}),
       " Logout"
     ] }) })
   ] });
 });
 
 // src/user-profile/UserProfile.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var UserProfile = ({
   layoutId,
   loginUrl,
@@ -306,9 +344,9 @@ var UserProfile = ({
   const handleNavigate = (id) => {
     onNavigate(id);
   };
-  return /* @__PURE__ */ jsxs4(DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
-    /* @__PURE__ */ jsx7(Button3, { variant: "secondary", children: /* @__PURE__ */ jsx7(UserSolidIcon, {}) }),
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5(DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
+    /* @__PURE__ */ jsx8(Button3, { variant: "secondary", children: /* @__PURE__ */ jsx8(UserSolidIcon, {}) }),
+    /* @__PURE__ */ jsx8(
       UserPanel,
       {
         layoutId,
@@ -325,10 +363,10 @@ import {
   ToggleButton,
   ToggleButtonGroup
 } from "@heswell/salt-lab";
-import cx from "classnames";
+import cx2 from "classnames";
 import { useControlled } from "@salt-ds/core";
 import { useCallback as useCallback3 } from "react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var classBase2 = "vuuThemeSwitch";
 var modes = ["light", "dark"];
 var ThemeSwitch = ({
@@ -353,8 +391,8 @@ var ThemeSwitch = ({
     },
     [onChange, setMode]
   );
-  const className = cx(classBase2, classNameProp);
-  return /* @__PURE__ */ jsxs5(
+  const className = cx2(classBase2, classNameProp);
+  return /* @__PURE__ */ jsxs6(
     ToggleButtonGroup,
     {
       className,
@@ -362,7 +400,7 @@ var ThemeSwitch = ({
       onChange: handleChangeSecondary,
       selectedIndex,
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           ToggleButton,
           {
             "aria-label": "alert",
@@ -370,7 +408,7 @@ var ThemeSwitch = ({
             "data-icon": "light"
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           ToggleButton,
           {
             "aria-label": "home",
@@ -384,9 +422,39 @@ var ThemeSwitch = ({
 };
 
 // src/app-header/AppHeader.tsx
-import cx2 from "classnames";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var classBase3 = "vuuAppHeader";
+import cx4 from "classnames";
+
+// src/density-switch/DensitySwitch.tsx
+import { Dropdown } from "@heswell/salt-lab";
+import { DEFAULT_DENSITY } from "@salt-ds/core";
+import { useCallback as useCallback4 } from "react";
+import cx3 from "classnames";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var classBase3 = "vuuDensitySwitch";
+var densities = ["high", "medium", "low", "touch"];
+var DensitySwitch = ({
+  className: classNameProp,
+  defaultDensity = DEFAULT_DENSITY,
+  onDensityChange
+}) => {
+  const handleSelectionChange = useCallback4((_event, selectedItem) => {
+    onDensityChange(selectedItem);
+  }, [onDensityChange]);
+  const className = cx3(classBase3, classNameProp);
+  return /* @__PURE__ */ jsx10(
+    Dropdown,
+    {
+      className,
+      source: densities,
+      defaultSelected: defaultDensity,
+      onSelectionChange: handleSelectionChange
+    }
+  );
+};
+
+// src/app-header/AppHeader.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var classBase4 = "vuuAppHeader";
 var AppHeader = ({
   className: classNameProp,
   layoutId,
@@ -394,17 +462,24 @@ var AppHeader = ({
   onNavigate,
   onSwitchTheme,
   themeMode = "light",
+  onDensitySwitch,
+  density = "medium",
   user,
   ...htmlAttributes
 }) => {
-  const className = cx2(classBase3, classNameProp, "salt-density-medium");
-  const handleSwitchTheme = useCallback4(
+  const className = cx4(classBase4, classNameProp, `salt-density-${density}`);
+  const handleSwitchTheme = useCallback5(
     (mode) => onSwitchTheme == null ? void 0 : onSwitchTheme(mode),
     [onSwitchTheme]
   );
-  return /* @__PURE__ */ jsxs6("header", { className, ...htmlAttributes, children: [
-    /* @__PURE__ */ jsx9(ThemeSwitch, { defaultMode: themeMode, onChange: handleSwitchTheme }),
-    /* @__PURE__ */ jsx9(
+  const handleDensitySwitch = useCallback5(
+    (density2) => onDensitySwitch == null ? void 0 : onDensitySwitch(density2),
+    [onDensitySwitch]
+  );
+  return /* @__PURE__ */ jsxs7("header", { className, ...htmlAttributes, children: [
+    /* @__PURE__ */ jsx11(ThemeSwitch, { defaultMode: themeMode, onChange: handleSwitchTheme }),
+    /* @__PURE__ */ jsx11(DensitySwitch, { defaultDensity: density, onDensityChange: handleDensitySwitch }),
+    /* @__PURE__ */ jsx11(
       UserProfile,
       {
         layoutId,
@@ -417,7 +492,7 @@ var AppHeader = ({
 };
 
 // src/shell.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var warningLayout = {
   type: "View",
   props: {
@@ -443,25 +518,31 @@ var Shell = ({
   ...htmlAttributes
 }) => {
   const rootRef = useRef(null);
-  const [density] = useState4("high");
+  const [density, setDensity] = useState5("medium");
   const paletteView = useRef(null);
-  const [open, setOpen] = useState4(false);
+  const [open, setOpen] = useState5(false);
   const layoutId = useRef("latest");
   const [layout, setLayoutConfig, loadLayoutById] = use_layout_config_default(
     user,
     defaultLayout
   );
-  const handleLayoutChange = useCallback5(
+  const handleLayoutChange = useCallback6(
     (layout2) => {
       setLayoutConfig(layout2);
     },
     [setLayoutConfig]
   );
-  const handleSwitchTheme = useCallback5((mode) => {
+  const handleSwitchTheme = useCallback6((mode) => {
     if (rootRef.current) {
       rootRef.current.dataset.mode = mode;
     }
   }, []);
+  const handleDensitySwitch = useCallback6(
+    (density2) => {
+      setDensity(density2);
+    },
+    [setDensity]
+  );
   const handleDrawerClick = (e) => {
     var _a;
     const target = e.target;
@@ -469,14 +550,14 @@ var Shell = ({
       setOpen(!open);
     }
   };
-  const handleNavigate = useCallback5(
+  const handleNavigate = useCallback6(
     (id) => {
       layoutId.current = id;
       loadLayoutById(id);
     },
     [loadLayoutById]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (serverUrl && user.token) {
       connectToServer(serverUrl, user.token);
     }
@@ -485,7 +566,7 @@ var Shell = ({
     const drawers = [];
     if (leftSidePanel) {
       drawers.push(
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx12(
           Drawer,
           {
             onClick: handleDrawerClick,
@@ -495,7 +576,7 @@ var Shell = ({
             peekaboo: true,
             sizeOpen: 200,
             toggleButton: "end",
-            children: /* @__PURE__ */ jsx10(
+            children: /* @__PURE__ */ jsx12(
               View,
               {
                 className: "vuuShell-palette",
@@ -513,7 +594,7 @@ var Shell = ({
     }
     return drawers;
   };
-  const className = cx3(
+  const className = cx5(
     "vuuShell",
     classNameProp,
     "salt-theme",
@@ -521,32 +602,33 @@ var Shell = ({
   );
   return (
     // ShellContext TBD
-    /* @__PURE__ */ jsxs7(ShellContextProvider, { value: void 0, children: [
-      /* @__PURE__ */ jsx10(LayoutProvider, { layout, onLayoutChange: handleLayoutChange, children: /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsxs8(ShellContextProvider, { value: void 0, children: [
+      /* @__PURE__ */ jsx12(LayoutProvider, { layout, onLayoutChange: handleLayoutChange, children: /* @__PURE__ */ jsx12(
         DraggableLayout,
         {
           className,
           "data-mode": "light",
           ref: rootRef,
           ...htmlAttributes,
-          children: /* @__PURE__ */ jsxs7(
+          children: /* @__PURE__ */ jsxs8(
             Flexbox,
             {
               className: "App",
               style: { flexDirection: "column", height: "100%", width: "100%" },
               children: [
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx12(
                   AppHeader,
                   {
                     layoutId: layoutId.current,
                     loginUrl,
                     user,
                     onNavigate: handleNavigate,
-                    onSwitchTheme: handleSwitchTheme
+                    onSwitchTheme: handleSwitchTheme,
+                    onDensitySwitch: handleDensitySwitch
                   }
                 ),
-                /* @__PURE__ */ jsx10(Chest, { style: { flex: 1 }, children: getDrawers().concat(
-                  /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx12(Chest, { style: { flex: 1 }, children: getDrawers().concat(
+                  /* @__PURE__ */ jsx12(
                     DraggableLayout,
                     {
                       dropTarget: true,
@@ -565,6 +647,7 @@ var Shell = ({
   );
 };
 export {
+  ConnectionStatusIcon,
   Feature,
   LoginPanel,
   Shell,