@hitachivantara/app-shell-ui 2.1.1 → 2.1.2

package/dist/components/AppShell/AppShell.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import withGlobalProvider from "../hoc/withGlobalProvider.js";
-import AppShellRoutes from "../AppShellRoutes/AppShellRoutes.js";
-const AppShell = () => {
-  return /* @__PURE__ */ jsx(AppShellRoutes, {});
-};
-const HvAppShell = withGlobalProvider(AppShell);
+import { HvAppShellContainer } from "./AppShellContainer.js";
+import { HvAppShellRouter } from "./AppShellRouter.js";
+function HvAppShell({ config, configUrl }) {
+  return /* @__PURE__ */ jsx(HvAppShellContainer, { config, configUrl, children: /* @__PURE__ */ jsx(HvAppShellRouter, {}) });
+}
 export {
   HvAppShell as default
 };

package/dist/components/AppShell/AppShellContainer.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { HelmetProvider } from "react-helmet-async";
+import { I18nextProvider } from "react-i18next";
+import { HvProvider } from "@hitachivantara/uikit-react-core";
+import createI18Next from "../../i18n/index.js";
+import { LayoutProvider } from "../../providers/LayoutProvider.js";
+import { HvAppShellProvider } from "../AppShellProvider/AppShellProvider.js";
+import GlobalStyles from "../GlobalStyles/GlobalStyles.js";
+import SnackbarProvider from "../SnackbarProvider/SnackbarProvider.js";
+import GenericError from "../../pages/GenericError/GenericError.js";
+const { i18n } = createI18Next();
+function HvAppShellContainer({
+  config: configProp,
+  configUrl,
+  children
+}) {
+  const [loadedConfig, setLoadedConfig] = useState();
+  const [hasError, setHasError] = useState(false);
+  useEffect(() => {
+    if (configProp || !configUrl) return;
+    fetch(new URL(configUrl)).then((result) => result.json()).then((data) => setLoadedConfig(data)).catch((e) => {
+      console.error(`Failed to obtain the context from: ${configUrl}`, e);
+      setLoadedConfig(void 0);
+      setHasError(true);
+    });
+  }, [configProp, configUrl]);
+  const config = useMemo(
+    () => configProp ?? loadedConfig,
+    [configProp, loadedConfig]
+  );
+  if (hasError) {
+    throw Error("Failed to obtain the configuration");
+  }
+  return /* @__PURE__ */ jsx(HelmetProvider, { children: /* @__PURE__ */ jsxs(HvProvider, { children: [
+    /* @__PURE__ */ jsx(GlobalStyles, {}),
+    /* @__PURE__ */ jsx(I18nextProvider, { i18n, children: /* @__PURE__ */ jsx(
+      ErrorBoundary,
+      {
+        fallback: /* @__PURE__ */ jsx(GenericError, { fullPage: true, includeFooter: false }),
+        children: /* @__PURE__ */ jsx(HvAppShellProvider, { config, children: /* @__PURE__ */ jsx(LayoutProvider, { children: /* @__PURE__ */ jsx(SnackbarProvider, { children }) }) })
+      },
+      "general"
+    ) })
+  ] }) });
+}
+export {
+  HvAppShellContainer
+};

package/dist/components/{AppShellRoutes/AppShellRoutes.js → AppShell/AppShellRouter.js}

@@ -5,9 +5,9 @@ import { matchRoutes, RouterProvider, createBrowserRouter, Outlet } from "react-
 import { useHvAppShellModel } from "@hitachivantara/app-shell-shared";
 import { HvContainer } from "@hitachivantara/uikit-react-core";
 import LoadingPage from "../../pages/LoadingPage/LoadingPage.js";
+import Root from "../../pages/Root/Root.js";
 import { getAppIdFromBundle } from "../../utils/navigationUtil.js";
 import GenericError from "../../pages/GenericError/GenericError.js";
-import Root from "../../pages/Root/Root.js";
 import AppShellViewProvider from "../AppShellViewProvider/AppShellViewProvider.js";
 const NotFound = lazy(() => import("../../pages/NotFound/index.js"));
 function renderNestedRoutes(views) {
@@ -87,7 +87,7 @@ function renderErrorRoutes(mainPanel) {
     }
   ];
 }
-const AppShellRoutes = () => {
+function HvAppShellRouter() {
   const { baseUrl, mainPanel } = useHvAppShellModel();
   const prevRoutesRef = useRef([]);
   const [routerKey, setRouterKey] = useState("router-initial");
@@ -127,7 +127,7 @@ const AppShellRoutes = () => {
     },
     routerKey
   );
-};
+}
 export {
-  AppShellRoutes as default
+  HvAppShellRouter
 };

package/dist/components/AppShellProvider/AppShellProvider.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useEffect, useMemo, useContext } from "react";
+import { useMemo, useContext, useState, useEffect } from "react";
 import { I18nContext } from "react-i18next";
 import { HvAppShellContext, HvAppShellModelContext, HvAppShellRuntimeContext, HvAppShellCombinedProvidersContext, CONFIG_TRANSLATIONS_NAMESPACE } from "@hitachivantara/app-shell-shared";
 import { themes, HvProvider } from "@hitachivantara/uikit-react-core";
@@ -92,52 +92,24 @@ const AppShellProviderInner = ({
     }
   ) }) }) });
 };
-const AppShellProvider = ({
+function HvAppShellProvider({
   children,
-  config: localConfig,
-  configUrl
-}) => {
-  const [loadedConfig, setLoadedConfig] = useState();
-  const [hasError, setHasError] = useState(false);
-  useEffect(() => {
-    if (!localConfig && configUrl) {
-      fetch(new URL(configUrl)).then((result) => result.json()).then((data) => setLoadedConfig(data)).catch((e) => {
-        console.error(`Failed to obtain the context from: ${configUrl}`, e);
-        setLoadedConfig(void 0);
-        setHasError(true);
-      });
-    }
-  }, [localConfig, configUrl]);
-  const rawConfig = useMemo(
-    () => localConfig ?? loadedConfig,
-    [localConfig, loadedConfig]
-  );
-  const { model, isPending: areBundlesLoading } = useModelFromConfig(rawConfig);
+  config: configProp
+}) {
+  const { model, isPending: areBundlesLoading } = useModelFromConfig(configProp);
   const systemProviders = useMemo(() => {
-    if (!model?.systemProviders) {
-      return void 0;
-    }
-    const providersComponents = [];
-    for (const provider of model.systemProviders) {
-      const component = model.preloadedBundles.get(
-        provider.bundle
-      );
-      providersComponents.push({
-        key: provider.key,
-        component,
-        config: provider.config
-      });
-    }
-    return providersComponents;
+    if (!model?.systemProviders) return void 0;
+    return model.systemProviders.map(({ key, bundle, config }) => ({
+      key,
+      component: model.preloadedBundles.get(bundle),
+      config
+    }));
   }, [model?.systemProviders, model?.preloadedBundles]);
-  if (hasError) {
-    throw Error("Failed to obtain the configuration");
-  }
-  if (!rawConfig || !model || areBundlesLoading) {
+  if (!configProp || !model || areBundlesLoading) {
     return null;
   }
-  return /* @__PURE__ */ jsx(CombinedProviders, { providers: systemProviders, children: /* @__PURE__ */ jsx(AppShellProviderInner, { config: rawConfig, model, children }) });
-};
+  return /* @__PURE__ */ jsx(CombinedProviders, { providers: systemProviders, children: /* @__PURE__ */ jsx(AppShellProviderInner, { config: configProp, model, children }) });
+}
 export {
-  AppShellProvider as default
+  HvAppShellProvider
 };

package/dist/components/layout/Header/Header.js

@@ -8,9 +8,9 @@ import { useTheme, HvHeader, HvButton, HvHeaderBrand, HvHeaderNavigation } from
 import { useLayoutContext } from "../../../providers/LayoutProvider.js";
 import { useNavigationContext } from "../../../providers/NavigationProvider.js";
 import IconUiKit from "../../IconUiKit/index.js";
-import HeaderActions from "./HeaderActions/HeaderActions.js";
-import StyledIconWrapper from "./styles.js";
 import BrandLogo from "../BrandLogo/BrandLogo.js";
+import HeaderActions from "../HeaderActions/HeaderActions.js";
+import StyledIconWrapper from "./styles.js";
 const Header = () => {
   const { t } = useTranslation(void 0, { keyPrefix: "header.navigation" });
   const { t: tConfig } = useTranslation(CONFIG_TRANSLATIONS_NAMESPACE);

package/dist/components/layout/{Header/HeaderActions/InternalActions → HeaderActions}/AppSwitcherToggle/AppSwitcherToggle.js

@@ -5,11 +5,11 @@ import { useTranslation } from "react-i18next";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import { CONFIG_TRANSLATIONS_NAMESPACE, useHvAppShellModel } from "@hitachivantara/app-shell-shared";
 import { HvIconButton, theme, HvAppSwitcher, HvTypography } from "@hitachivantara/uikit-react-core";
-import createAppContainerElement from "../../../../../../utils/documentUtil.js";
-import IconUiKit from "../../../../../IconUiKit/index.js";
-import StyledIconWrapper from "../../../styles.js";
+import createAppContainerElement from "../../../../utils/documentUtil.js";
+import IconUiKit from "../../../IconUiKit/index.js";
+import BrandLogo from "../../BrandLogo/BrandLogo.js";
+import StyledIconWrapper from "../../Header/styles.js";
 import StyledAppShellPanelWrapper from "./styles.js";
-import BrandLogo from "../../../../BrandLogo/BrandLogo.js";
 const AppSwitcherToggle = ({
   title,
   apps,

package/dist/components/layout/{Header/HeaderActions/InternalActions → HeaderActions}/ColorModeSwitcher.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { HvAppShellEventThemeTrigger } from "@hitachivantara/app-shell-events";
 import { useTheme, HvIconButton } from "@hitachivantara/uikit-react-core";
-import IconUiKit from "../../../../IconUiKit/index.js";
+import IconUiKit from "../../IconUiKit/index.js";
 const ColorModeSwitcher = () => {
   const { t } = useTranslation(void 0, {
     keyPrefix: "header.colorModeSwitcher"

package/dist/components/layout/{Header/HeaderActions → HeaderActions}/HeaderActions.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useHvAppShellModel } from "@hitachivantara/app-shell-shared";
 import { HvHeaderActions } from "@hitachivantara/uikit-react-core";
 import DynamicAction from "./DynamicAction.js";
-import InternalAction, { internalActions } from "./InternalActions/InternalAction/InternalAction.js";
+import InternalAction, { internalActions } from "./InternalAction/InternalAction.js";
 const HeaderActions = () => {
   const { header } = useHvAppShellModel();
   return /* @__PURE__ */ jsx(HvHeaderActions, { children: header?.actions.map((action) => {

package/dist/components/layout/{Header/HeaderActions/InternalActions → HeaderActions}/HelpButton/HelpButton.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { CONFIG_TRANSLATIONS_NAMESPACE } from "@hitachivantara/app-shell-shared";
 import { HvIconButton } from "@hitachivantara/uikit-react-core";
-import IconUiKit from "../../../../../IconUiKit/index.js";
+import IconUiKit from "../../../IconUiKit/index.js";
 const HelpButton = ({ url, description }) => {
   const { t } = useTranslation(void 0, { keyPrefix: "header.helpUrl" });
   const { t: tConfig } = useTranslation(CONFIG_TRANSLATIONS_NAMESPACE);

package/dist/components/layout/{Header/HeaderActions/InternalActions → HeaderActions}/InternalAction/InternalAction.js

@@ -9,13 +9,13 @@ const internalActions = [
   },
   {
     bundle: "@hv/help-client/button.js",
-    component: () => import("../HelpButton/index.js").then((module) => ({
+    component: () => import("../HelpButton/HelpButton.js").then((module) => ({
       default: module.default
     }))
   },
   {
     bundle: "@hv/app-switcher-client/toggle.js",
-    component: () => import("../AppSwitcherToggle/index.js").then((module) => ({
+    component: () => import("../AppSwitcherToggle/AppSwitcherToggle.js").then((module) => ({
       default: module.default
     }))
   }

package/dist/components/layout/Main/Main.js

@@ -3,8 +3,8 @@ import { css } from "@emotion/css";
 import { useTheme, theme } from "@hitachivantara/uikit-react-core";
 import { useLayoutContext } from "../../../providers/LayoutProvider.js";
 import { useNavigationContext } from "../../../providers/NavigationProvider.js";
-import { StyledContainer, StyledMain } from "./styles.js";
 import VerticalNavigation from "../VerticalNavigation/VerticalNavigation.js";
+import { StyledContainer, StyledMain } from "./styles.js";
 const Main = ({ children }) => {
   const {
     hasVerticalNavigation,

package/dist/components/layout/VerticalNavigation/NavigationHeader.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useHvAppShellModel } from "@hitachivantara/app-shell-shared";
 import { AppSwitcher } from "@hitachivantara/uikit-react-icons";
-import { classes } from "./styles.js";
 import BrandLogo from "../BrandLogo/BrandLogo.js";
+import { classes } from "./styles.js";
 const NavigationHeader = ({ isOpen }) => {
   const { logo } = useHvAppShellModel();
   return /* @__PURE__ */ jsxs("div", { className: classes.navigationHeader, children: [

package/dist/index.d.ts

@@ -1,9 +1,19 @@
+import { HvAppShellConfig } from '@hitachivantara/app-shell-shared';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 
-declare const _default: {
-    ({ ...wrappedProps }: any): JSX_2.Element;
-    displayName: string;
-};
-export default _default;
+/**
+ *  The main App Shell UI component that:
+ * - Loads the configuration via `config` or `configUrl`
+ * - Instantiates Global Providers (i18n, theming, error boundary, etc)
+ * - Renders the App Shell Header & Vertical Navigation Layout
+ * - Instantiates the App Shell Router for the given configuration
+ */
+declare function HvAppShell({ config, configUrl }: HvAppShellProps): JSX_2.Element;
+export default HvAppShell;
+
+declare interface HvAppShellProps {
+    config?: Partial<HvAppShellConfig>;
+    configUrl?: string;
+}
 
 export { }

package/dist/pages/Root/Root.js

@@ -4,13 +4,13 @@ import { ErrorBoundary } from "react-error-boundary";
 import { Outlet } from "react-router-dom";
 import ServiceManagerProvider from "@hitachivantara/app-shell-services";
 import { useHvAppShellModel, useHvAppShellCombinedProviders } from "@hitachivantara/app-shell-shared";
+import Header from "../../components/layout/Header/Header.js";
+import Main from "../../components/layout/Main/Main.js";
 import { BannerProvider } from "../../providers/BannerProvider.js";
 import { NavigationProvider } from "../../providers/NavigationProvider.js";
 import CombinedProviders from "../../utils/CombinedProviders.js";
 import LoadingPage from "../LoadingPage/LoadingPage.js";
 import CustomHooksInitializer from "../../components/CustomHooksInitializer/CustomHooksInitializer.js";
-import Header from "../../components/layout/Header/Header.js";
-import Main from "../../components/layout/Main/Main.js";
 import GenericError from "../GenericError/GenericError.js";
 const Root = () => {
   const { services } = useHvAppShellModel();

package/dist/providers/NavigationProvider.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useContext, createContext, useState, useMemo, useEffect, useCallback } from "react";
+import { useState, useMemo, useEffect, useCallback, createContext, useContext } from "react";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useHvAppShellConfig } from "@hitachivantara/app-shell-shared";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/app-shell-ui",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
@@ -18,11 +18,11 @@
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@hitachivantara/app-shell-events": "^2.0.1",
-    "@hitachivantara/app-shell-navigation": "^2.1.1",
-    "@hitachivantara/app-shell-services": "^2.0.1",
-    "@hitachivantara/app-shell-shared": "^2.1.1",
-    "@hitachivantara/uikit-react-core": "^6.2.0",
+    "@hitachivantara/app-shell-events": "^2.0.2",
+    "@hitachivantara/app-shell-navigation": "^2.1.2",
+    "@hitachivantara/app-shell-services": "^2.0.2",
+    "@hitachivantara/app-shell-shared": "^2.1.2",
+    "@hitachivantara/uikit-react-core": "^6.3.0",
     "@hitachivantara/uikit-react-icons": "^6.0.2",
     "@mui/material": "^7.0.2",
     "i18next": "^24.2.2",
@@ -44,7 +44,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "7815bbc4041430fbc4fda437e7359ec6cfcb0b32",
+  "gitHead": "f2b8a9e107bc8886231d527b37b30716d891105c",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/dist/components/hoc/withGlobalProvider.js

@@ -1,42 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ErrorBoundary } from "react-error-boundary";
-import { HelmetProvider } from "react-helmet-async";
-import { I18nextProvider } from "react-i18next";
-import { HvProvider } from "@hitachivantara/uikit-react-core";
-import createI18Next from "../../i18n/index.js";
-import { LayoutProvider } from "../../providers/LayoutProvider.js";
-import AppShellProvider from "../AppShellProvider/AppShellProvider.js";
-import GlobalStyles from "../GlobalStyles/GlobalStyles.js";
-import SnackbarProvider from "../SnackbarProvider/SnackbarProvider.js";
-import GenericError from "../../pages/GenericError/GenericError.js";
-const withGlobalProvider = (WrappedComponent) => {
-  const displayName = WrappedComponent.displayName ?? WrappedComponent.name;
-  const { i18n } = createI18Next();
-  const ComponentWithGlobalProvider = ({
-    ...wrappedProps
-  }) => {
-    return /* @__PURE__ */ jsx(HelmetProvider, { children: /* @__PURE__ */ jsxs(HvProvider, { children: [
-      /* @__PURE__ */ jsx(GlobalStyles, {}),
-      /* @__PURE__ */ jsx(I18nextProvider, { i18n, children: /* @__PURE__ */ jsx(
-        ErrorBoundary,
-        {
-          fallback: /* @__PURE__ */ jsx(GenericError, { fullPage: true, includeFooter: false }),
-          children: /* @__PURE__ */ jsx(
-            AppShellProvider,
-            {
-              config: wrappedProps.config,
-              configUrl: wrappedProps.configUrl,
-              children: /* @__PURE__ */ jsx(LayoutProvider, { children: /* @__PURE__ */ jsx(SnackbarProvider, { children: /* @__PURE__ */ jsx(WrappedComponent, { ...wrappedProps }) }) })
-            }
-          )
-        },
-        "general"
-      ) })
-    ] }) });
-  };
-  ComponentWithGlobalProvider.displayName = `withGlobalProvider(${displayName})`;
-  return ComponentWithGlobalProvider;
-};
-export {
-  withGlobalProvider as default
-};

package/dist/components/layout/Header/HeaderActions/InternalActions/AppSwitcherToggle/index.js

@@ -1,4 +0,0 @@
-import AppSwitcherToggle from "./AppSwitcherToggle.js";
-export {
-  AppSwitcherToggle as default
-};

package/dist/components/layout/Header/HeaderActions/InternalActions/HelpButton/index.js

@@ -1,4 +0,0 @@
-import HelpButton from "./HelpButton.js";
-export {
-  HelpButton as default
-};

package/dist/components/layout/Header/HeaderActions/index.js

@@ -1,4 +0,0 @@
-import HeaderActions from "./HeaderActions.js";
-export {
-  HeaderActions as default
-};