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

package/esm/index.js

@@ -36,13 +36,41 @@ var ConnectionStatusIcon = ({ connectionStatus, className, element = "span", ...
   ] }) });
 };
 
+// src/density-switch/DensitySwitch.tsx
+import { Dropdown } from "@heswell/salt-lab";
+import { useCallback } from "react";
+import cx2 from "classnames";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var classBase = "vuuDensitySwitch";
+var densities = ["high", "medium", "low", "touch"];
+var DEFAULT_DENSITY = "high";
+var DensitySwitch = ({
+  className: classNameProp,
+  defaultDensity = DEFAULT_DENSITY,
+  onDensityChange
+}) => {
+  const handleSelectionChange = useCallback((_event, selectedItem) => {
+    onDensityChange(selectedItem);
+  }, [onDensityChange]);
+  const className = cx2(classBase, classNameProp);
+  return /* @__PURE__ */ jsx2(
+    Dropdown,
+    {
+      className,
+      source: densities,
+      defaultSelected: defaultDensity,
+      onSelectionChange: handleSelectionChange
+    }
+  );
+};
+
 // src/feature/Feature.tsx
 import React3, { Suspense } from "react";
 import { registerComponent } from "@vuu-ui/vuu-layout";
 
 // src/feature/ErrorBoundary.jsx
 import React2 from "react";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var ErrorBoundary = class extends React2.Component {
   constructor(props) {
     super(props);
@@ -57,8 +85,8 @@ var ErrorBoundary = class extends React2.Component {
   render() {
     if (this.state.errorMessage) {
       return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        /* @__PURE__ */ jsx2("h1", { children: "Something went wrong." }),
-        /* @__PURE__ */ jsx2("p", { children: this.state.errorMessage })
+        /* @__PURE__ */ jsx3("h1", { children: "Something went wrong." }),
+        /* @__PURE__ */ jsx3("p", { children: this.state.errorMessage })
       ] });
     }
     return this.props.children;
@@ -66,17 +94,11 @@ var ErrorBoundary = class extends React2.Component {
 };
 
 // src/feature/Loader.tsx
-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) => {
-  const container = new CSSStyleSheet();
-  return fetch(path).then((x) => x.text()).then((x) => container.replace(x));
-};
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Loader = () => /* @__PURE__ */ jsx4("div", { className: "hwLoader", children: "loading" });
 
 // src/feature/Feature.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function RawFeature({
   url,
   css,
@@ -84,18 +106,23 @@ function RawFeature({
   ...props
 }) {
   if (css) {
-    importCSS(css).then((styleSheet) => {
-      document.adoptedStyleSheets = [
-        ...document.adoptedStyleSheets,
-        styleSheet
-      ];
-    });
+    import(
+      /* @vite-ignore */
+      css
+    ).then(
+      (cssModule) => {
+        document.adoptedStyleSheets = [
+          ...document.adoptedStyleSheets,
+          cssModule.default
+        ];
+      }
+    );
   }
   const LazyFeature = React3.lazy(() => import(
     /* @vite-ignore */
     url
   ));
-  return /* @__PURE__ */ jsx4(ErrorBoundary, { children: /* @__PURE__ */ jsx4(Suspense, { fallback: /* @__PURE__ */ jsx4(Loader, {}), children: /* @__PURE__ */ jsx4(LazyFeature, { ...props, ...params }) }) });
+  return /* @__PURE__ */ jsx5(ErrorBoundary, { children: /* @__PURE__ */ jsx5(Suspense, { fallback: /* @__PURE__ */ jsx5(Loader, {}), children: /* @__PURE__ */ jsx5(LazyFeature, { ...props, ...params }) }) });
 }
 var Feature = React3.memo(RawFeature);
 Feature.displayName = "Feature";
@@ -105,8 +132,8 @@ registerComponent("Feature", Feature, "view");
 import { useState as useState2 } from "react";
 import { Button } from "@salt-ds/core";
 import { FormField, Input } from "@heswell/salt-lab";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var classBase = "vuuLoginPanel";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var classBase2 = "vuuLoginPanel";
 var LoginPanel = ({ onSubmit }) => {
   const [username, setUserName] = useState2("");
   const [password, setPassword] = useState2("");
@@ -120,9 +147,9 @@ var LoginPanel = ({ onSubmit }) => {
     setPassword(value);
   };
   const dataIsValid = username.trim() !== "" && password.trim() !== "";
-  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(
+  return /* @__PURE__ */ jsxs3("div", { className: classBase2, children: [
+    /* @__PURE__ */ jsx6(FormField, { label: "Username", style: { width: 200 }, children: /* @__PURE__ */ jsx6(Input, { value: username, id: "text-username", onChange: handleUsername }) }),
+    /* @__PURE__ */ jsx6(FormField, { label: "Password", style: { width: 200 }, children: /* @__PURE__ */ jsx6(
       Input,
       {
         type: "password",
@@ -131,10 +158,10 @@ var LoginPanel = ({ onSubmit }) => {
         onChange: handlePassword
       }
     ) }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       Button,
       {
-        className: `${classBase}-login`,
+        className: `${classBase2}-login`,
         disabled: !dataIsValid,
         onClick: login,
         variant: "cta",
@@ -162,6 +189,7 @@ var logout = (loginUrl) => {
 
 // src/shell.tsx
 import { connectToServer } from "@vuu-ui/vuu-data";
+import cx5 from "classnames";
 import {
   useCallback as useCallback6,
   useEffect as useEffect4,
@@ -169,14 +197,40 @@ import {
   useState as useState5
 } from "react";
 
+// src/ShellContextProvider.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var defaultConfig = {};
+var ShellContext = createContext(defaultConfig);
+var Provider = ({
+  children,
+  context,
+  inheritedContext
+}) => {
+  const mergedContext = {
+    ...inheritedContext,
+    ...context
+  };
+  return /* @__PURE__ */ jsx7(ShellContext.Provider, { value: mergedContext, children });
+};
+var ShellContextProvider = ({
+  children,
+  value
+}) => {
+  return /* @__PURE__ */ jsx7(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ jsx7(Provider, { context: value, inheritedContext: context, children }) });
+};
+var useShellContext = () => {
+  return useContext(ShellContext);
+};
+
 // src/use-layout-config.js
-import { useCallback, useEffect as useEffect2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState3 } from "react";
 var useLayoutConfig = (user, defaultLayout) => {
   const [layout, _setLayout] = useState3(defaultLayout);
   const setLayout = (layout2) => {
     _setLayout(layout2);
   };
-  const load = useCallback(
+  const load = useCallback2(
     async (id = "latest") => {
       fetch(`api/vui/${user.username}/${id}`, {}).then((response) => {
         return response.ok ? response.json() : defaultLayout;
@@ -189,7 +243,7 @@ var useLayoutConfig = (user, defaultLayout) => {
   useEffect2(() => {
     load();
   }, [load]);
-  const saveData = useCallback(
+  const saveData = useCallback2(
     (data) => {
       fetch(`api/vui/${user.username}`, {
         method: "POST",
@@ -203,7 +257,7 @@ var useLayoutConfig = (user, defaultLayout) => {
     },
     [defaultLayout, user]
   );
-  const loadLayoutById = useCallback(
+  const loadLayoutById = useCallback2(
     (id) => {
       load(id);
     },
@@ -213,36 +267,9 @@ var useLayoutConfig = (user, defaultLayout) => {
 };
 var use_layout_config_default = useLayoutConfig;
 
-// src/ShellContextProvider.tsx
-import { createContext, useContext } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var defaultConfig = {};
-var ShellContext = createContext(defaultConfig);
-var Provider = ({
-  children,
-  context,
-  inheritedContext
-}) => {
-  const mergedContext = {
-    ...inheritedContext,
-    ...context
-  };
-  return /* @__PURE__ */ jsx6(ShellContext.Provider, { value: mergedContext, children });
-};
-var ShellContextProvider = ({
-  children,
-  value
-}) => {
-  return /* @__PURE__ */ jsx6(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ jsx6(Provider, { context: value, inheritedContext: context, children }) });
-};
-var useShellContext = () => {
-  return useContext(ShellContext);
-};
-
 // src/shell.tsx
-import cx5 from "classnames";
 import {
-  Chest,
+  DockLayout,
   DraggableLayout,
   Drawer,
   Flexbox,
@@ -265,7 +292,7 @@ import { Button as Button2 } from "@salt-ds/core";
 import { ExportIcon } from "@salt-ds/icons";
 import {
   forwardRef,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useEffect as useEffect3,
   useState as useState4
 } from "react";
@@ -281,12 +308,12 @@ var getLayoutHistory = async (user) => {
 };
 
 // src/user-profile/UserPanel.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, 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__ */ jsx7(ListItem, { ...props });
+  return /* @__PURE__ */ jsx8(ListItem, { ...props });
 };
 var UserPanel = forwardRef(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
   const [history, setHistory] = useState4([]);
@@ -303,7 +330,7 @@ var UserPanel = forwardRef(function UserPanel2({ loginUrl, onNavigate, user, lay
     }
     getHistory();
   }, [user]);
-  const handleHisorySelected = useCallback2(
+  const handleHisorySelected = useCallback3(
     (evt, selected2) => {
       if (selected2) {
         onNavigate(selected2.id);
@@ -311,12 +338,12 @@ var UserPanel = forwardRef(function UserPanel2({ loginUrl, onNavigate, user, lay
     },
     [onNavigate]
   );
-  const handleLogout = useCallback2(() => {
+  const handleLogout = useCallback3(() => {
     logout(loginUrl);
   }, [loginUrl]);
   const selected = history.length === 0 ? null : layoutId === "latest" ? history[0] : history.find((i) => i.id === layoutId);
   return /* @__PURE__ */ jsxs4("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       List,
       {
         ListItem: HistoryListItem,
@@ -326,15 +353,15 @@ var UserPanel = forwardRef(function UserPanel2({ loginUrl, onNavigate, user, lay
         source: history
       }
     ),
-    /* @__PURE__ */ jsx7("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ jsxs4(Button2, { "aria-label": "logout", onClick: handleLogout, children: [
-      /* @__PURE__ */ jsx7(ExportIcon, {}),
+    /* @__PURE__ */ jsx8("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ jsxs4(Button2, { "aria-label": "logout", onClick: handleLogout, children: [
+      /* @__PURE__ */ jsx8(ExportIcon, {}),
       " Logout"
     ] }) })
   ] });
 });
 
 // src/user-profile/UserProfile.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var UserProfile = ({
   layoutId,
   loginUrl,
@@ -345,8 +372,8 @@ var UserProfile = ({
     onNavigate(id);
   };
   return /* @__PURE__ */ jsxs5(DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
-    /* @__PURE__ */ jsx8(Button3, { variant: "secondary", children: /* @__PURE__ */ jsx8(UserSolidIcon, {}) }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(Button3, { variant: "secondary", children: /* @__PURE__ */ jsx9(UserSolidIcon, {}) }),
+    /* @__PURE__ */ jsx9(
       UserPanel,
       {
         layoutId,
@@ -363,11 +390,11 @@ import {
   ToggleButton,
   ToggleButtonGroup
 } from "@heswell/salt-lab";
-import cx2 from "classnames";
+import cx3 from "classnames";
 import { useControlled } from "@salt-ds/core";
-import { useCallback as useCallback3 } from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var classBase2 = "vuuThemeSwitch";
+import { useCallback as useCallback4 } from "react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var classBase3 = "vuuThemeSwitch";
 var modes = ["light", "dark"];
 var ThemeSwitch = ({
   className: classNameProp,
@@ -383,7 +410,7 @@ var ThemeSwitch = ({
     state: "mode"
   });
   const selectedIndex = modes.indexOf(mode);
-  const handleChangeSecondary = useCallback3(
+  const handleChangeSecondary = useCallback4(
     (_evt, index) => {
       const mode2 = modes[index];
       setMode(mode2);
@@ -391,7 +418,7 @@ var ThemeSwitch = ({
     },
     [onChange, setMode]
   );
-  const className = cx2(classBase2, classNameProp);
+  const className = cx3(classBase3, classNameProp);
   return /* @__PURE__ */ jsxs6(
     ToggleButtonGroup,
     {
@@ -400,7 +427,7 @@ var ThemeSwitch = ({
       onChange: handleChangeSecondary,
       selectedIndex,
       children: [
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           ToggleButton,
           {
             "aria-label": "alert",
@@ -408,7 +435,7 @@ var ThemeSwitch = ({
             "data-icon": "light"
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           ToggleButton,
           {
             "aria-label": "home",
@@ -423,36 +450,6 @@ var ThemeSwitch = ({
 
 // src/app-header/AppHeader.tsx
 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 = ({
@@ -462,23 +459,16 @@ var AppHeader = ({
   onNavigate,
   onSwitchTheme,
   themeMode = "light",
-  onDensitySwitch,
-  density = "medium",
   user,
   ...htmlAttributes
 }) => {
-  const className = cx4(classBase4, classNameProp, `salt-density-${density}`);
+  const className = cx4(classBase4, classNameProp);
   const handleSwitchTheme = useCallback5(
     (mode) => onSwitchTheme == null ? void 0 : onSwitchTheme(mode),
     [onSwitchTheme]
   );
-  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,
       {
@@ -518,7 +508,6 @@ var Shell = ({
   ...htmlAttributes
 }) => {
   const rootRef = useRef(null);
-  const [density, setDensity] = useState5("medium");
   const paletteView = useRef(null);
   const [open, setOpen] = useState5(false);
   const layoutId = useRef("latest");
@@ -537,12 +526,6 @@ var Shell = ({
       rootRef.current.dataset.mode = mode;
     }
   }, []);
-  const handleDensitySwitch = useCallback6(
-    (density2) => {
-      setDensity(density2);
-    },
-    [setDensity]
-  );
   const handleDrawerClick = (e) => {
     var _a;
     const target = e.target;
@@ -598,7 +581,7 @@ var Shell = ({
     "vuuShell",
     classNameProp,
     "salt-theme",
-    `salt-density-${density}`
+    "salt-density-high"
   );
   return (
     // ShellContext TBD
@@ -623,11 +606,10 @@ var Shell = ({
                     loginUrl,
                     user,
                     onNavigate: handleNavigate,
-                    onSwitchTheme: handleSwitchTheme,
-                    onDensitySwitch: handleDensitySwitch
+                    onSwitchTheme: handleSwitchTheme
                   }
                 ),
-                /* @__PURE__ */ jsx12(Chest, { style: { flex: 1 }, children: getDrawers().concat(
+                /* @__PURE__ */ jsx12(DockLayout, { style: { flex: 1 }, children: getDrawers().concat(
                   /* @__PURE__ */ jsx12(
                     DraggableLayout,
                     {
@@ -646,12 +628,83 @@ var Shell = ({
     ] })
   );
 };
+
+// src/theme-provider/ThemeProvider.tsx
+import {
+  createContext as createContext2,
+  isValidElement,
+  cloneElement,
+  useContext as useContext2
+} from "react";
+import cx6 from "classnames";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var DEFAULT_DENSITY2 = "medium";
+var DEFAULT_THEME = "salt-theme";
+var DEFAULT_THEME_MODE = "light";
+var ThemeContext = createContext2({
+  density: "high",
+  theme: "salt-theme",
+  themeMode: "light"
+});
+var createThemedChildren = (children, theme, themeMode, density) => {
+  var _a;
+  if (isValidElement(children)) {
+    return cloneElement(children, {
+      className: cx6(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        (_a = children.props) == null ? void 0 : _a.className,
+        theme,
+        `salt-density-${density}`
+      ),
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      "data-mode": themeMode
+    });
+  } else {
+    console.warn(
+      `
+ThemeProvider can only apply CSS classes for theming to a single nested child element of the ThemeProvider.
+          Wrap elements with a single container`
+    );
+    return children;
+  }
+};
+var ThemeProvider = ({
+  children,
+  theme: themeProp,
+  themeMode: themeModeProp,
+  density: densityProp
+}) => {
+  var _a, _b, _c;
+  const {
+    density: inheritedDensity,
+    themeMode: inheritedThemeMode,
+    theme: inheritedTheme
+  } = useContext2(ThemeContext);
+  const density = (_a = densityProp != null ? densityProp : inheritedDensity) != null ? _a : DEFAULT_DENSITY2;
+  const themeMode = (_b = themeModeProp != null ? themeModeProp : inheritedThemeMode) != null ? _b : DEFAULT_THEME_MODE;
+  const theme = (_c = themeProp != null ? themeProp : inheritedTheme) != null ? _c : DEFAULT_THEME;
+  const themedChildren = createThemedChildren(
+    children,
+    theme,
+    themeMode,
+    density
+  );
+  return /* @__PURE__ */ jsx13(ThemeContext.Provider, { value: { themeMode, density, theme }, children: themedChildren });
+};
+ThemeProvider.displayName = "ThemeProvider";
 export {
   ConnectionStatusIcon,
+  DEFAULT_DENSITY2 as DEFAULT_DENSITY,
+  DEFAULT_THEME,
+  DEFAULT_THEME_MODE,
+  DensitySwitch,
   Feature,
   LoginPanel,
   Shell,
   ShellContextProvider,
+  ThemeContext,
+  ThemeProvider,
   ThemeSwitch,
   getAuthDetailsFromCookies,
   logout,