@vuu-ui/vuu-shell 0.0.26

package/cjs/layout-management/useLayoutManager.js

@@ -0,0 +1,218 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var vuuPopups = require('@vuu-ui/vuu-popups');
+var defaultApplicationJson = require('../persistence-management/defaultApplicationJson.js');
+var LocalPersistenceManager = require('../persistence-management/LocalPersistenceManager.js');
+var RemotePersistenceManager = require('../persistence-management/RemotePersistenceManager.js');
+
+let _persistenceManager;
+const getPersistenceManager = () => {
+  if (_persistenceManager === void 0) {
+    _persistenceManager = process.env.LOCAL ? new LocalPersistenceManager.LocalPersistenceManager() : new RemotePersistenceManager.RemotePersistenceManager();
+  }
+  return _persistenceManager;
+};
+const LayoutManagementContext = React.createContext({
+  getApplicationSettings: () => void 0,
+  layoutMetadata: [],
+  saveLayout: () => void 0,
+  // The default Application JSON will be served if no LayoutManagementProvider
+  applicationJson: defaultApplicationJson.defaultApplicationJson,
+  saveApplicationLayout: () => void 0,
+  saveApplicationSettings: () => void 0,
+  loadLayoutById: () => void 0
+});
+const ensureLayoutHasTitle = (layout, layoutMetadata) => {
+  if (layout.props?.title !== void 0) {
+    return layout;
+  } else {
+    return {
+      ...layout,
+      props: {
+        ...layout.props,
+        title: layoutMetadata.name
+      }
+    };
+  }
+};
+const LayoutManagementProvider = (props) => {
+  const [layoutMetadata, setLayoutMetadata] = React.useState([]);
+  const [, forceRefresh] = React.useState({});
+  const notify = vuuPopups.useNotifications();
+  const applicationJSONRef = React.useRef(defaultApplicationJson.loadingApplicationJson);
+  const setApplicationJSON = React.useCallback(
+    (applicationJSON, rerender = true) => {
+      applicationJSONRef.current = applicationJSON;
+      if (rerender) {
+        forceRefresh({});
+      }
+    },
+    []
+  );
+  const setApplicationLayout = React.useCallback(
+    (layout, rerender = true) => {
+      setApplicationJSON(
+        {
+          ...applicationJSONRef.current,
+          layout
+        },
+        rerender
+      );
+    },
+    [setApplicationJSON]
+  );
+  const setApplicationSettings = React.useCallback(
+    (settings) => {
+      setApplicationJSON(
+        {
+          ...applicationJSONRef.current,
+          settings: {
+            ...applicationJSONRef.current.settings,
+            ...settings
+          }
+        },
+        false
+      );
+    },
+    [setApplicationJSON]
+  );
+  React.useEffect(() => {
+    const persistenceManager = getPersistenceManager();
+    persistenceManager.loadMetadata().then((metadata) => {
+      setLayoutMetadata(metadata);
+    }).catch((error) => {
+      notify({
+        type: "error",
+        header: "Failed to Load Layouts",
+        body: "Could not load list of available layouts"
+      });
+      console.error("Error occurred while retrieving metadata", error);
+    });
+    persistenceManager.loadApplicationJSON().then((applicationJSON) => {
+      setApplicationJSON(applicationJSON);
+    }).catch((error) => {
+      notify({
+        type: "error",
+        header: "Failed to Load Layout",
+        body: "Could not load your latest view"
+      });
+      console.error(
+        "Error occurred while retrieving application layout",
+        error
+      );
+    });
+  }, [notify, setApplicationJSON]);
+  const saveApplicationLayout = React.useCallback(
+    (layout) => {
+      if (vuuLayout.isLayoutJSON(layout)) {
+        setApplicationLayout(layout, false);
+        getPersistenceManager().saveApplicationJSON(applicationJSONRef.current);
+      } else {
+        console.error("Tried to save invalid application layout", layout);
+      }
+    },
+    [setApplicationLayout]
+  );
+  const saveLayout = React.useCallback(
+    (metadata) => {
+      const layoutToSave = vuuLayout.resolveJSONPath(
+        applicationJSONRef.current.layout,
+        "#main-tabs.ACTIVE_CHILD"
+      );
+      if (layoutToSave && vuuLayout.isLayoutJSON(layoutToSave)) {
+        getPersistenceManager().createLayout(metadata, ensureLayoutHasTitle(layoutToSave, metadata)).then((metadata2) => {
+          notify({
+            type: "success",
+            header: "Layout Saved Successfully",
+            body: `${metadata2.name} saved successfully`
+          });
+          setLayoutMetadata((prev) => [...prev, metadata2]);
+        }).catch((error) => {
+          notify({
+            type: "error",
+            header: "Failed to Save Layout",
+            body: `Failed to save layout ${metadata.name}`
+          });
+          console.error("Error occurred while saving layout", error);
+        });
+      } else {
+        console.error("Tried to save invalid layout", layoutToSave);
+        notify({
+          type: "error",
+          header: "Failed to Save Layout",
+          body: "Cannot save invalid layout"
+        });
+      }
+    },
+    [notify]
+  );
+  const saveApplicationSettings = React.useCallback(
+    (settings, key) => {
+      const { settings: applicationSettings } = applicationJSONRef.current;
+      if (key) {
+        setApplicationSettings({
+          ...applicationSettings,
+          [key]: settings
+        });
+      } else {
+        setApplicationSettings(settings);
+      }
+      getPersistenceManager().saveApplicationJSON(applicationJSONRef.current);
+    },
+    [setApplicationSettings]
+  );
+  const getApplicationSettings = React.useCallback(
+    (key) => {
+      const { settings } = applicationJSONRef.current;
+      return key ? settings?.[key] : settings;
+    },
+    []
+  );
+  const loadLayoutById = React.useCallback(
+    (id) => {
+      getPersistenceManager().loadLayout(id).then((layoutJson) => {
+        const { layout: currentLayout } = applicationJSONRef.current;
+        setApplicationLayout({
+          ...currentLayout,
+          children: (currentLayout.children || []).concat(layoutJson),
+          props: {
+            ...currentLayout.props,
+            active: currentLayout.children?.length ?? 0
+          }
+        });
+      }).catch((error) => {
+        notify({
+          type: "error",
+          header: "Failed to Load Layout",
+          body: "Failed to load the requested layout"
+        });
+        console.error("Error occurred while loading layout", error);
+      });
+    },
+    [notify, setApplicationLayout]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LayoutManagementContext.Provider,
+    {
+      value: {
+        getApplicationSettings,
+        layoutMetadata,
+        saveLayout,
+        applicationJson: applicationJSONRef.current,
+        saveApplicationLayout,
+        saveApplicationSettings,
+        loadLayoutById
+      },
+      children: props.children
+    }
+  );
+};
+const useLayoutManager = () => React.useContext(LayoutManagementContext);
+
+exports.LayoutManagementContext = LayoutManagementContext;
+exports.LayoutManagementProvider = LayoutManagementProvider;
+exports.useLayoutManager = useLayoutManager;
+//# sourceMappingURL=useLayoutManager.js.map

package/cjs/layout-management/useLayoutManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutManager.js","sources":["../../src/layout-management/useLayoutManager.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ApplicationJSON,\n  ApplicationSettings,\n  LayoutJSON,\n  resolveJSONPath,\n  ApplicationSetting,\n  isLayoutJSON,\n} from \"@vuu-ui/vuu-layout\";\nimport { useNotifications } from \"@vuu-ui/vuu-popups\";\nimport { LayoutMetadata, LayoutMetadataDto } from \"./layoutTypes\";\nimport {\n  defaultApplicationJson,\n  PersistenceManager,\n  loadingApplicationJson,\n  LocalPersistenceManager,\n  RemotePersistenceManager,\n} from \"../persistence-management\";\n\nlet _persistenceManager: PersistenceManager;\n\nconst getPersistenceManager = () => {\n  if (_persistenceManager === undefined) {\n    _persistenceManager = process.env.LOCAL\n      ? new LocalPersistenceManager()\n      : new RemotePersistenceManager();\n  }\n  return _persistenceManager;\n};\n\nexport const LayoutManagementContext = React.createContext<{\n  layoutMetadata: LayoutMetadata[];\n  saveLayout: (n: LayoutMetadataDto) => void;\n  applicationJson: ApplicationJSON;\n  saveApplicationLayout: (layout: LayoutJSON) => void;\n  getApplicationSettings: (\n    key?: keyof ApplicationSettings\n  ) => ApplicationSettings | ApplicationSetting | undefined;\n  saveApplicationSettings: (\n    settings: ApplicationSettings | ApplicationSetting,\n    key?: keyof ApplicationSettings\n  ) => void;\n  loadLayoutById: (id: string) => void;\n}>({\n  getApplicationSettings: () => undefined,\n  layoutMetadata: [],\n  saveLayout: () => undefined,\n  // The default Application JSON will be served if no LayoutManagementProvider\n  applicationJson: defaultApplicationJson,\n  saveApplicationLayout: () => undefined,\n  saveApplicationSettings: () => undefined,\n  loadLayoutById: () => undefined,\n});\n\ntype LayoutManagementProviderProps = {\n  children: JSX.Element | JSX.Element[];\n};\n\nconst ensureLayoutHasTitle = (\n  layout: LayoutJSON,\n  layoutMetadata: LayoutMetadataDto\n) => {\n  if (layout.props?.title !== undefined) {\n    return layout;\n  } else {\n    return {\n      ...layout,\n      props: {\n        ...layout.props,\n        title: layoutMetadata.name,\n      },\n    };\n  }\n};\n\nexport const LayoutManagementProvider = (\n  props: LayoutManagementProviderProps\n) => {\n  const [layoutMetadata, setLayoutMetadata] = useState<LayoutMetadata[]>([]);\n  // TODO this default should probably be a loading state rather than the placeholder\n  // It will be replaced as soon as the localStorage/remote layout is resolved\n  const [, forceRefresh] = useState({});\n  const notify = useNotifications();\n  const applicationJSONRef = useRef<ApplicationJSON>(loadingApplicationJson);\n\n  const setApplicationJSON = useCallback(\n    (applicationJSON: ApplicationJSON, rerender = true) => {\n      applicationJSONRef.current = applicationJSON;\n      if (rerender) {\n        forceRefresh({});\n      }\n    },\n    []\n  );\n\n  const setApplicationLayout = useCallback(\n    (layout: LayoutJSON, rerender = true) => {\n      setApplicationJSON(\n        {\n          ...applicationJSONRef.current,\n          layout,\n        },\n        rerender\n      );\n    },\n    [setApplicationJSON]\n  );\n\n  const setApplicationSettings = useCallback(\n    (settings: ApplicationSettings) => {\n      setApplicationJSON(\n        {\n          ...applicationJSONRef.current,\n          settings: {\n            ...applicationJSONRef.current.settings,\n            ...settings,\n          },\n        },\n        false\n      );\n    },\n    [setApplicationJSON]\n  );\n\n  useEffect(() => {\n    const persistenceManager = getPersistenceManager();\n\n    persistenceManager\n      .loadMetadata()\n      .then((metadata) => {\n        setLayoutMetadata(metadata);\n      })\n      .catch((error: Error) => {\n        notify({\n          type: \"error\",\n          header: \"Failed to Load Layouts\",\n          body: \"Could not load list of available layouts\",\n        });\n        console.error(\"Error occurred while retrieving metadata\", error);\n      });\n\n    persistenceManager\n      .loadApplicationJSON()\n      .then((applicationJSON: ApplicationJSON) => {\n        setApplicationJSON(applicationJSON);\n      })\n      .catch((error: Error) => {\n        notify({\n          type: \"error\",\n          header: \"Failed to Load Layout\",\n          body: \"Could not load your latest view\",\n        });\n        console.error(\n          \"Error occurred while retrieving application layout\",\n          error\n        );\n      });\n  }, [notify, setApplicationJSON]);\n\n  const saveApplicationLayout = useCallback(\n    (layout: LayoutJSON) => {\n      if (isLayoutJSON(layout)) {\n        setApplicationLayout(layout, false);\n        getPersistenceManager().saveApplicationJSON(applicationJSONRef.current);\n      } else {\n        console.error(\"Tried to save invalid application layout\", layout);\n      }\n    },\n    [setApplicationLayout]\n  );\n\n  const saveLayout = useCallback(\n    (metadata: LayoutMetadataDto) => {\n      const layoutToSave = resolveJSONPath(\n        applicationJSONRef.current.layout,\n        \"#main-tabs.ACTIVE_CHILD\"\n      );\n\n      if (layoutToSave && isLayoutJSON(layoutToSave)) {\n        getPersistenceManager()\n          .createLayout(metadata, ensureLayoutHasTitle(layoutToSave, metadata))\n          .then((metadata) => {\n            notify({\n              type: \"success\",\n              header: \"Layout Saved Successfully\",\n              body: `${metadata.name} saved successfully`,\n            });\n            setLayoutMetadata((prev) => [...prev, metadata]);\n          })\n          .catch((error: Error) => {\n            notify({\n              type: \"error\",\n              header: \"Failed to Save Layout\",\n              body: `Failed to save layout ${metadata.name}`,\n            });\n            console.error(\"Error occurred while saving layout\", error);\n          });\n      } else {\n        console.error(\"Tried to save invalid layout\", layoutToSave);\n        notify({\n          type: \"error\",\n          header: \"Failed to Save Layout\",\n          body: \"Cannot save invalid layout\",\n        });\n      }\n    },\n    [notify]\n  );\n\n  const saveApplicationSettings = useCallback(\n    (\n      settings: ApplicationSettings | ApplicationSetting,\n      key?: keyof ApplicationSettings\n    ) => {\n      const { settings: applicationSettings } = applicationJSONRef.current;\n      if (key) {\n        setApplicationSettings({\n          ...applicationSettings,\n          [key]: settings,\n        });\n      } else {\n        setApplicationSettings(settings as ApplicationSettings);\n      }\n      getPersistenceManager().saveApplicationJSON(applicationJSONRef.current);\n    },\n    [setApplicationSettings]\n  );\n\n  const getApplicationSettings = useCallback(\n    (key?: keyof ApplicationSettings) => {\n      const { settings } = applicationJSONRef.current;\n      return key ? settings?.[key] : settings;\n    },\n    []\n  );\n\n  const loadLayoutById = useCallback(\n    (id: string) => {\n      getPersistenceManager()\n        .loadLayout(id)\n        .then((layoutJson) => {\n          const { layout: currentLayout } = applicationJSONRef.current;\n          setApplicationLayout({\n            ...currentLayout,\n            children: (currentLayout.children || []).concat(layoutJson),\n            props: {\n              ...currentLayout.props,\n              active: currentLayout.children?.length ?? 0,\n            },\n          });\n        })\n        .catch((error: Error) => {\n          notify({\n            type: \"error\",\n            header: \"Failed to Load Layout\",\n            body: \"Failed to load the requested layout\",\n          });\n          console.error(\"Error occurred while loading layout\", error);\n        });\n    },\n    [notify, setApplicationLayout]\n  );\n\n  return (\n    <LayoutManagementContext.Provider\n      value={{\n        getApplicationSettings,\n        layoutMetadata,\n        saveLayout,\n        applicationJson: applicationJSONRef.current,\n        saveApplicationLayout,\n        saveApplicationSettings,\n        loadLayoutById,\n      }}\n    >\n      {props.children}\n    </LayoutManagementContext.Provider>\n  );\n};\n\nexport const useLayoutManager = () => useContext(LayoutManagementContext);\n"],"names":["LocalPersistenceManager","RemotePersistenceManager","defaultApplicationJson","useState","useNotifications","useRef","loadingApplicationJson","useCallback","useEffect","isLayoutJSON","resolveJSONPath","metadata","jsx","useContext"],"mappings":"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"}

package/cjs/left-nav/LeftNav.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var leftNavCss = ".vuuLeftNav {\n    --vuuOverflowContainer-height: auto;\n    --salt-navigable-fontWeight-active: 700;\n    --vuuTab-background-selected: rgba(255, 255, 255, 0.10);\n    --vuuTab-hover-background: rgba(255, 255, 255, 0.10);\n    --vuuTab-before-content: none;\n    --vuuTab-borderRadius: 6px;\n    --vuuTab-height: 40px;\n    --vuuTabstrip-fontWeight: 700;\n    --vuuTabstrip-width: 100%;\n    --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z\"/><path d=\"M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z\"/><path d=\"M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z\"/><path d=\"M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z\"/><path d=\"M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z\"/><path d=\"M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z\"/><path d=\"M2 2H14V3.33333H2V2Z\"/><path d=\"M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z\"/><path d=\"M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z\"/><path d=\"M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z\"/><path d=\"M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z\"/><path d=\"M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z\"/><path d=\"M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z\"/><path d=\"M2 12.6667H14V14H2V12.6667Z\"/></svg>');\n    --svg-features: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z\"/></svg>');\n    --svg-tables: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z\"/></svg>');\n    --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z\"/></svg>');\n    --vuu-light-text-primary: #15171b;\n\n    --menu-level-2-width: 0px;\n\n    box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n    display: flex;\n    height: calc(100% - 4px);\n    margin-bottom: 4px;\n    overflow: hidden;\n    position: relative;\n    transition: width .2s ease-out;\n    z-index: 0;\n    /* width: calc(var(--menu-width) + var(--menu-level-2-width)); */\n    /* width: 100%; */\n\n}\n\n.vuuLeftNav-menu-full {\n    --menu-width: var(--nav-menu-expanded-width);\n}\n\n.vuuLeftNav-menu-icons {\n    --menu-width: var(--nav-menu-collapsed-width);\n}\n\n.vuuLeftNav-menu-icons-content {\n    --menu-width: var(--nav-menu-collapsed-width);\n    --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-full-content {\n    --menu-width: var(--nav-menu-expanded-width);\n    --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-icons-content .vuuLeftNav-menu-secondary,\n.vuuLeftNav-menu-full-content .vuuLeftNav-menu-secondary {\n    display: flex;\n}\n\n.vuuLeftNav-menu-primary {\n    background-color: #2A015F;\n    container-type: inline-size;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    padding: 32px 16px;\n    transition: flex-basis ease-out .2s;\n    flex-grow:0;\n    flex-shrink:0;\n    flex-basis: var(--menu-width);\n}\n\n.vuuLeftNav-menu-secondary {\n    flex: 1 1 auto;\n    display: none;\n    /* position: absolute; */\n    top:0;\n    right: 0;\n    flex-grow:0;\n    flex-shrink:0;\n    flex-basis: var(--nav-menu-content-width, 240px);\n    z-index: -1;\n}\n\n.vuuLeftNav .vuuTabstrip {\n    margin-top: 102px;\n}\n\n.vuuLeftNav .vuuTab {\n    --vuuTab-focusVisible-color: pink;\n    --vuu-icon-color: white;\n    --vuu-icon-left: 12px;\n    --vuu-icon-size: 16px;\n    border-left: solid 4px transparent;\n    padding: 0 0 0 48px;\n\n}\n\n.vuuLeftNav .vuuTab-selected {\n    --vuu-icon-color: var(--salt-navigable-indicator-active);\n    border-left: solid 4px var(--salt-navigable-indicator-active);\n}\n\n.vuuLeftNav-logo {\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n}\n\n.vuuLeftNav-main {\n    flex: 1 1 auto;\n}\n\n.vuuLeftNav-menu {\n    color: white;\n    margin-top: 102px;\n    padding: 0;\n}\n\n\n.vuuLeftNav [data-icon='demo'] {\n    --vuu-icon-svg: var(--svg-demo);\n}\n\n.vuuLeftNav [data-icon='tables'] {\n    --vuu-icon-svg: var(--svg-tables);\n}\n\n.vuuLeftNav [data-icon='features'] {\n    --vuu-icon-svg: var(--svg-features);\n}\n\n.vuuLeftNav [data-icon='layouts'] {\n    --vuu-icon-svg: var(--svg-layouts);\n}\n\n\n@container (max-width: 100px) {\n    .vuuTab {\n        /* --vuu-icon-left: 12px !important; */\n        --vuuTab-padding: 0 0 0 42px;\n    }\n\n    .vuuTab-main {\n        display: none !important;\n    }\n}\n\n.vuuLeftNav-buttonBar {\n    align-items: center;\n    display: flex;\n    flex: 0 0 100px;\n    justify-content: center;\n}\n\n.vuuLeftNav-toggleButton {\n    --vuu-icon-color: var(--vuu-light-text-primary);\n    --vuu-icon-left: 11px;\n    --vuu-icon-top: 10px;\n    --vuu-icon-size: 16px;\n    background-color: var(--salt-navigable-indicator-active);\n    border-width: 0;\n    border-radius: 18px;\n    height: 36px;\n    position: relative;\n    width: 36px\n}\n\n.vuuLeftNav-toggleButton-open {\n    --vuu-icon-left: 9px;\n}\n\n.vuuLeftNav-drawer {\n    display: flex;\n    padding: 0 0 0 24px;\n    flex-direction: column;\n    align-items: flex-start;\n    flex-shrink: 0;\n    align-self: stretch;\n    background: #FFF;\n    box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n    height: 100%\n}";
+
+module.exports = leftNavCss;
+//# sourceMappingURL=LeftNav.css.js.map

package/cjs/left-nav/LeftNav.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftNav.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/left-nav/LeftNav.js

@@ -0,0 +1,166 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuIcons = require('@vuu-ui/vuu-icons');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var React = require('react');
+var FeatureList = require('../feature-list/FeatureList.js');
+require('html-to-image');
+require('@salt-ds/core');
+var LayoutList = require('../layout-management/LayoutList.js');
+require('../layout-management/useLayoutManager.js');
+var LeftNav$1 = require('./LeftNav.css.js');
+
+const classBase = "vuuLeftNav";
+const getDisplayStatus = (activeTabIndex, expanded) => {
+  if (activeTabIndex === 0) {
+    return expanded ? "menu-full" : "menu-icons";
+  } else {
+    return expanded ? "menu-full-content" : "menu-icons-content";
+  }
+};
+const LeftNav = (props) => {
+  const dispatch = vuuLayout.useLayoutProviderDispatch();
+  const [themeClass] = vuuUtils.useThemeAttributes();
+  const {
+    "data-path": path,
+    defaultExpanded = true,
+    defaultActiveTabIndex = 0,
+    features,
+    onActiveChange,
+    onTogglePrimaryMenu,
+    sizeCollapsed = 80,
+    sizeContent = 300,
+    sizeExpanded = 240,
+    style: styleProp,
+    tableFeatures,
+    ...htmlAttributes
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-left-nav",
+    css: LeftNav$1,
+    window: targetWindow
+  });
+  const [navState, setNavState] = React.useState({
+    activeTabIndex: defaultActiveTabIndex,
+    expanded: defaultExpanded
+  });
+  const getFullWidth = React.useCallback(
+    (tabIndex, expanded) => {
+      if (tabIndex === 0) {
+        return expanded ? sizeExpanded : sizeCollapsed;
+      } else {
+        return expanded ? sizeExpanded + sizeContent : sizeCollapsed + sizeContent;
+      }
+    },
+    [sizeCollapsed, sizeContent, sizeExpanded]
+  );
+  const handleTabSelection = React.useCallback(
+    (activeTabIndex) => {
+      const { activeTabIndex: currentIndex, expanded } = navState;
+      const newState = { activeTabIndex, expanded };
+      setNavState(newState);
+      if (activeTabIndex === 0 || currentIndex === 0) {
+        const width = getFullWidth(activeTabIndex, expanded);
+        dispatch({
+          type: "layout-resize",
+          path: "#vuu-side-panel",
+          size: width
+        });
+      }
+      onActiveChange?.(activeTabIndex);
+    },
+    [dispatch, getFullWidth, navState, onActiveChange]
+  );
+  const displayStatus = getDisplayStatus(
+    navState.activeTabIndex,
+    navState.expanded
+  );
+  const toggleExpanded = React.useCallback(() => {
+    const { activeTabIndex, expanded } = navState;
+    const primaryMenuExpanded = !expanded;
+    const newState = { activeTabIndex, expanded: primaryMenuExpanded };
+    setNavState(newState);
+    dispatch({
+      type: "layout-resize",
+      path: "#vuu-side-panel",
+      size: getFullWidth(activeTabIndex, primaryMenuExpanded)
+    });
+    onTogglePrimaryMenu?.(primaryMenuExpanded);
+  }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);
+  const style = {
+    ...styleProp,
+    "--nav-menu-collapsed-width": `${sizeCollapsed}px`,
+    "--nav-menu-expanded-width": `${sizeExpanded}px`,
+    "--nav-menu-content-width": `${sizeContent}px`
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, `${classBase}-${displayStatus}`),
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cx(`${classBase}-menu-primary`, themeClass),
+            "data-mode": "dark",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuLeftNav-logo", children: /* @__PURE__ */ jsxRuntime.jsx(vuuIcons.VuuLogo, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-main`, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                vuuUiControls.Tabstrip,
+                {
+                  activeTabIndex: navState.activeTabIndex,
+                  animateSelectionThumb: false,
+                  className: `${classBase}-Tabstrip`,
+                  onActiveChange: handleTabSelection,
+                  orientation: "vertical",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "demo", label: "DEMO" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "features", label: "VUU FEATURES" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "tables", label: "VUU TABLES" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "layouts", label: "MY LAYOUTS" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuLeftNav-buttonBar", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  className: cx("vuuLeftNav-toggleButton", {
+                    "vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
+                    "vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
+                  }),
+                  "data-icon": displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
+                  onClick: toggleExpanded
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          vuuLayout.Stack,
+          {
+            active: navState.activeTabIndex - 1,
+            className: `${classBase}-menu-secondary`,
+            showTabs: false,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(FeatureList.FeatureList, { features, title: "VUU FEATURES" }),
+              /* @__PURE__ */ jsxRuntime.jsx(FeatureList.FeatureList, { features: tableFeatures, title: "VUU TABLES" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuLeftNav-drawer", children: /* @__PURE__ */ jsxRuntime.jsx(LayoutList.LayoutList, {}) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.LeftNav = LeftNav;
+//# sourceMappingURL=LeftNav.js.map

package/cjs/left-nav/LeftNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftNav.js","sources":["../../src/left-nav/LeftNav.tsx"],"sourcesContent":["import { VuuLogo } from \"@vuu-ui/vuu-icons\";\nimport {\n  LayoutResizeAction,\n  Stack,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { Tab, Tabstrip } from \"@vuu-ui/vuu-ui-controls\";\nimport { useThemeAttributes } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { CSSProperties, HTMLAttributes, useCallback, useState } from \"react\";\nimport { FeatureProps } from \"../feature\";\nimport { FeatureList } from \"../feature-list\";\nimport { LayoutList } from \"../layout-management\";\n\nimport leftNavCss from \"./LeftNav.css\";\n\nconst classBase = \"vuuLeftNav\";\n\nexport type NavDisplayStatus =\n  | \"menu-full\"\n  | \"menu-icons\"\n  | \"menu-full-content\"\n  | \"menu-icons-content\";\n\nconst getDisplayStatus = (\n  activeTabIndex: number,\n  expanded: boolean\n): NavDisplayStatus => {\n  if (activeTabIndex === 0) {\n    return expanded ? \"menu-full\" : \"menu-icons\";\n  } else {\n    return expanded ? \"menu-full-content\" : \"menu-icons-content\";\n  }\n};\n\nexport type NavDisplayStatusHandler = (\n  navDisplayStatus: NavDisplayStatus\n) => void;\nexport interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {\n  \"data-path\"?: string;\n  defaultActiveTabIndex?: number;\n  defaultExpanded?: boolean;\n  features: FeatureProps[];\n  onActiveChange?: (activeTabIndex: number) => void;\n  onTogglePrimaryMenu?: (expanded: boolean) => void;\n  sizeCollapsed?: number;\n  sizeContent?: number;\n  sizeExpanded?: number;\n  tableFeatures: FeatureProps[];\n}\n\ntype NavState = {\n  activeTabIndex: number;\n  expanded: boolean;\n};\n\nexport const LeftNav = (props: LeftNavProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const [themeClass] = useThemeAttributes();\n  const {\n    \"data-path\": path,\n    defaultExpanded = true,\n    defaultActiveTabIndex = 0,\n    features,\n    onActiveChange,\n    onTogglePrimaryMenu,\n    sizeCollapsed = 80,\n    sizeContent = 300,\n    sizeExpanded = 240,\n    style: styleProp,\n    tableFeatures,\n    ...htmlAttributes\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-left-nav\",\n    css: leftNavCss,\n    window: targetWindow,\n  });\n\n  const [navState, setNavState] = useState<NavState>({\n    activeTabIndex: defaultActiveTabIndex,\n    expanded: defaultExpanded,\n  });\n\n  const getFullWidth = useCallback(\n    (tabIndex: number, expanded: boolean): number => {\n      if (tabIndex === 0) {\n        return expanded ? sizeExpanded : sizeCollapsed;\n      } else {\n        return expanded\n          ? sizeExpanded + sizeContent\n          : sizeCollapsed + sizeContent;\n      }\n    },\n    [sizeCollapsed, sizeContent, sizeExpanded]\n  );\n\n  const handleTabSelection = useCallback(\n    (activeTabIndex: number) => {\n      const { activeTabIndex: currentIndex, expanded } = navState;\n      const newState = { activeTabIndex, expanded };\n      setNavState(newState);\n      if (activeTabIndex === 0 || currentIndex === 0) {\n        const width = getFullWidth(activeTabIndex, expanded);\n        dispatch({\n          type: \"layout-resize\",\n          path: \"#vuu-side-panel\",\n          size: width,\n        } as LayoutResizeAction);\n      }\n      onActiveChange?.(activeTabIndex);\n    },\n    [dispatch, getFullWidth, navState, onActiveChange]\n  );\n\n  const displayStatus = getDisplayStatus(\n    navState.activeTabIndex,\n    navState.expanded\n  );\n\n  const toggleExpanded = useCallback(() => {\n    const { activeTabIndex, expanded } = navState;\n    const primaryMenuExpanded = !expanded;\n    const newState = { activeTabIndex, expanded: primaryMenuExpanded };\n    setNavState(newState);\n    dispatch({\n      type: \"layout-resize\",\n      path: \"#vuu-side-panel\",\n      size: getFullWidth(activeTabIndex, primaryMenuExpanded),\n    } as LayoutResizeAction);\n    onTogglePrimaryMenu?.(primaryMenuExpanded);\n  }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);\n\n  const style = {\n    ...styleProp,\n    \"--nav-menu-collapsed-width\": `${sizeCollapsed}px`,\n    \"--nav-menu-expanded-width\": `${sizeExpanded}px`,\n    \"--nav-menu-content-width\": `${sizeContent}px`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, `${classBase}-${displayStatus}`)}\n      style={style}\n    >\n      <div\n        className={cx(`${classBase}-menu-primary`, themeClass)}\n        data-mode=\"dark\"\n      >\n        <div className=\"vuuLeftNav-logo\">\n          <VuuLogo />\n        </div>\n        <div className={`${classBase}-main`}>\n          <Tabstrip\n            activeTabIndex={navState.activeTabIndex}\n            animateSelectionThumb={false}\n            className={`${classBase}-Tabstrip`}\n            onActiveChange={handleTabSelection}\n            orientation=\"vertical\"\n          >\n            <Tab data-icon=\"demo\" label=\"DEMO\"></Tab>\n            <Tab data-icon=\"features\" label=\"VUU FEATURES\"></Tab>\n            <Tab data-icon=\"tables\" label=\"VUU TABLES\"></Tab>\n            <Tab data-icon=\"layouts\" label=\"MY LAYOUTS\"></Tab>\n          </Tabstrip>\n        </div>\n        <div className=\"vuuLeftNav-buttonBar\">\n          <button\n            className={cx(\"vuuLeftNav-toggleButton\", {\n              \"vuuLeftNav-toggleButton-open\":\n                displayStatus.startsWith(\"menu-full\"),\n              \"vuuLeftNav-toggleButton-closed\":\n                displayStatus.startsWith(\"menu-icons\"),\n            })}\n            data-icon={\n              displayStatus.startsWith(\"menu-full\")\n                ? \"chevron-left\"\n                : \"chevron-right\"\n            }\n            onClick={toggleExpanded}\n          />\n        </div>\n      </div>\n      <Stack\n        active={navState.activeTabIndex - 1}\n        className={`${classBase}-menu-secondary`}\n        showTabs={false}\n      >\n        <FeatureList features={features} title=\"VUU FEATURES\" />\n        <FeatureList features={tableFeatures} title=\"VUU TABLES\" />\n        <div className=\"vuuLeftNav-drawer\">\n          <LayoutList />\n        </div>\n      </Stack>\n    </div>\n  );\n};\n"],"names":["useLayoutProviderDispatch","useThemeAttributes","useWindow","useComponentCssInjection","leftNavCss","useState","useCallback","jsxs","jsx","VuuLogo","Tabstrip","Tab","Stack","FeatureList","LayoutList"],"mappings":"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"}

package/cjs/login/LoginPanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var loginPanelCss = ".vuuLoginPanel {\n  --saltInput-paddingLeft: 8px;\n  --login-width: 856px;\n  --login-height: 550px;\n  --hwTextInput-border: solid 1px #ccc;\n  --hwTextInput-height: 28px;\n  --hwTextInput-padding: 0 12px;\n  --hwTextInput-width: 100%;\n  --login-row-height: 60px;\n  border-radius: 16px;\n  box-shadow: 0px 24px 44px 0px rgba(0, 0, 0, 0.25);\n  display: flex;\n  height: var(--login-height);\n  margin: 0 auto;\n  width: var(--login-width);\n}\n\n.vuuLoginPanel .saltInput-primary {\n--saltInput-height: 36px;\n}\n\n.vuuLoginPanel-title {\n  justify-content: center;\nfont-size: 28px;\nfont-weight: 400;\ndisplay: flex;\n}\n\n\n.vuuLoginPanel-branding {\n  align-items: center;\n  background-color: var(--vuu-color-purple-50);\n  border-radius: 16px 0 0 16px;\n  display: flex;\n  flex: 0 0 368px;\n  flex-direction: column;\n  gap: 40px;\n  justify-content: center;\n  padding: 40px 100px;\n}\n\n.vuuLoginPanel-form {\n  background-color: white;\n  border-radius: 0 16px 16px 0px;\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: 32px;\n  justify-content: center;\n  padding: 0 40px;\n}\n\n.vuuLoginPanel-password {\n  --vuu-icon-size: 16px;\n}\n\n.vuuLoginPanel-appName {\n  color: white;\n  font-size: 18px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.vuuLoginPanel-login {\n  --saltButton-height: 36px;\n  --saltButton-borderRadius: 6px;\n  width: 100%\n}\n\n\n";
+
+module.exports = loginPanelCss;
+//# sourceMappingURL=LoginPanel.css.js.map

package/cjs/login/LoginPanel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/login/LoginPanel.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var VuuLogo = require('./VuuLogo.js');
+var cx = require('clsx');
+var LoginPanel$1 = require('./LoginPanel.css.js');
+
+const classBase = "vuuLoginPanel";
+const LoginPanel = ({
+  appName = "Demo App",
+  className,
+  requirePassword = true,
+  onSubmit,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-login-panel",
+    css: LoginPanel$1,
+    window: targetWindow
+  });
+  const [username, setUserName] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const inputRef = React.useRef(null);
+  const login = () => {
+    onSubmit(username, password);
+  };
+  const handleUsername = (evt) => {
+    setUserName(evt.target.value);
+  };
+  const handlePassword = (evt) => {
+    setPassword(evt.target.value);
+  };
+  const handleCommitName = React.useCallback(() => {
+    if (!requirePassword) {
+      onSubmit(username);
+    }
+  }, [onSubmit, requirePassword, username]);
+  const handleCommitPassword = React.useCallback(() => {
+    if (username) {
+      onSubmit(username, password);
+    }
+  }, [onSubmit, password, username]);
+  const dataIsValid = username.trim() !== "" && (requirePassword === false || password.trim() !== "");
+  React.useEffect(() => {
+    console.log(`inputRef`, {
+      input: inputRef.current
+    });
+    inputRef.current?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-branding`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(VuuLogo.VuuLogo, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-appName`, children: appName })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-form`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-title`, children: "Welcome Back" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Username" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          vuuUiControls.VuuInput,
+          {
+            value: username,
+            id: "text-username",
+            inputRef,
+            onChange: handleUsername,
+            onCommit: handleCommitName
+          }
+        )
+      ] }),
+      requirePassword ? /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Password" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          vuuUiControls.VuuInput,
+          {
+            className: `${classBase}-password`,
+            inputProps: {
+              type: "password"
+            },
+            value: password,
+            id: "text-password",
+            onChange: handlePassword,
+            onCommit: handleCommitPassword,
+            endAdornment: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "eye", style: { cursor: "pointer" } })
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Button,
+        {
+          className: `${classBase}-login`,
+          disabled: !dataIsValid,
+          onClick: login,
+          variant: "cta",
+          children: "Login"
+        }
+      )
+    ] })
+  ] });
+};
+
+exports.LoginPanel = LoginPanel;
+//# sourceMappingURL=LoginPanel.js.map

package/cjs/login/LoginPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginPanel.js","sources":["../../src/login/LoginPanel.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { Button, FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuLogo } from \"./VuuLogo\";\nimport cx from \"clsx\";\n\nimport loginPanelCss from \"./LoginPanel.css\";\n\nconst classBase = \"vuuLoginPanel\";\n\nexport interface LoginPanelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onSubmit\"> {\n  appName?: string;\n  onSubmit: (username: string, password?: string) => void;\n  requirePassword?: boolean;\n}\n\nexport const LoginPanel = ({\n  appName = \"Demo App\",\n  className,\n  requirePassword = true,\n  onSubmit,\n  ...htmlAttributes\n}: LoginPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-login-panel\",\n    css: loginPanelCss,\n    window: targetWindow,\n  });\n\n  const [username, setUserName] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const login = () => {\n    onSubmit(username, password);\n  };\n\n  const handleUsername = (evt: ChangeEvent<HTMLInputElement>) => {\n    setUserName(evt.target.value);\n  };\n\n  const handlePassword = (evt: ChangeEvent<HTMLInputElement>) => {\n    setPassword(evt.target.value);\n  };\n\n  const handleCommitName = useCallback(() => {\n    if (!requirePassword) {\n      onSubmit(username);\n    }\n  }, [onSubmit, requirePassword, username]);\n\n  const handleCommitPassword = useCallback(() => {\n    if (username) {\n      onSubmit(username, password);\n    }\n  }, [onSubmit, password, username]);\n\n  const dataIsValid =\n    username.trim() !== \"\" &&\n    (requirePassword === false || password.trim() !== \"\");\n\n  useEffect(() => {\n    console.log(`inputRef`, {\n      input: inputRef.current,\n    });\n    inputRef.current?.focus();\n  }, []);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <div className={`${classBase}-branding`}>\n        <VuuLogo />\n        <div className={`${classBase}-appName`}>{appName}</div>\n      </div>\n      <div className={`${classBase}-form`}>\n        <div className={`${classBase}-title`}>Welcome Back</div>\n        <FormField>\n          <FormFieldLabel>Username</FormFieldLabel>\n          <VuuInput\n            value={username}\n            id=\"text-username\"\n            inputRef={inputRef}\n            onChange={handleUsername}\n            onCommit={handleCommitName}\n          />\n        </FormField>\n\n        {requirePassword ? (\n          <FormField>\n            <FormFieldLabel>Password</FormFieldLabel>\n            <VuuInput\n              className={`${classBase}-password`}\n              inputProps={{\n                type: \"password\",\n              }}\n              value={password}\n              id=\"text-password\"\n              onChange={handlePassword}\n              onCommit={handleCommitPassword}\n              endAdornment={\n                <span data-icon=\"eye\" style={{ cursor: \"pointer\" }} />\n              }\n            />\n          </FormField>\n        ) : null}\n\n        <Button\n          className={`${classBase}-login`}\n          disabled={!dataIsValid}\n          onClick={login}\n          variant=\"cta\"\n        >\n          Login\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","loginPanelCss","useState","useRef","useCallback","useEffect","jsxs","jsx","VuuLogo","FormField","FormFieldLabel","VuuInput","Button"],"mappings":"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"}