@hitachivantara/app-shell-ui 1.14.0 → 2.0.0-next.2

package/dist/components/AppShellProvider/AppShellProvider.js

@@ -0,0 +1,149 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useContext } 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";
+import { useFilteredModel } from "../../hooks/useFilteredModel.js";
+import useLocalStorage from "../../hooks/useLocalStorage.js";
+import { useModelFromConfig } from "../../hooks/useModelFromConfig.js";
+import { addResourceBundles } from "../../i18n/index.js";
+import CombinedProviders from "../../utils/CombinedProviders.js";
+const AppShellProviderInner = ({
+  config,
+  model,
+  children
+}) => {
+  const { value: storedColorModeValue } = useLocalStorage("COLOR_MODE");
+  const { i18n } = useContext(I18nContext);
+  const { isPending: isModelPending, model: filteredModel } = useFilteredModel(model);
+  if (filteredModel?.translations) {
+    addResourceBundles(
+      i18n,
+      filteredModel.translations,
+      CONFIG_TRANSLATIONS_NAMESPACE
+    );
+  }
+  const [theme, setTheme] = useState();
+  useEffect(() => {
+    const theme2 = filteredModel?.theming?.theme;
+    if (!theme2) return;
+    if (themes[theme2]) {
+      setTheme(themes[theme2]);
+      return;
+    }
+    import(
+      /* @vite-ignore */
+      theme2
+    ).then((module) => {
+      setTheme(module.default);
+    }).catch((e) => {
+      console.error(`Import of theme bundle ${theme2} failed! ${e}`);
+    });
+  }, [filteredModel?.theming?.theme]);
+  const providers = useMemo(() => {
+    if (!filteredModel?.providers) {
+      return;
+    }
+    const providersComponents = [];
+    for (const { bundle, key, config: config2 } of filteredModel.providers) {
+      const component = model.preloadedBundles.get(
+        bundle
+      );
+      providersComponents.push({
+        key,
+        component,
+        config: config2
+      });
+    }
+    return providersComponents;
+  }, [filteredModel?.providers, model.preloadedBundles]);
+  const runtimeContext = useMemo(
+    () => ({
+      i18n
+    }),
+    [i18n]
+  );
+  const providersContext = useMemo(
+    () => ({
+      providers
+    }),
+    [providers]
+  );
+  const appShellConfigContextValue = useMemo(() => config, [config]);
+  const appShellModelContextValue = useMemo(
+    () => filteredModel,
+    [filteredModel]
+  );
+  if (isModelPending || !filteredModel || filteredModel.theming?.theme && !theme) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(HvAppShellContext.Provider, { value: appShellConfigContextValue, children: /* @__PURE__ */ jsx(HvAppShellModelContext.Provider, { value: appShellModelContextValue, children: /* @__PURE__ */ jsx(HvAppShellRuntimeContext.Provider, { value: runtimeContext, children: /* @__PURE__ */ jsx(
+    HvProvider,
+    {
+      theme,
+      colorMode: storedColorModeValue ?? filteredModel.theming?.colorMode,
+      children: /* @__PURE__ */ jsx(
+        HvAppShellCombinedProvidersContext.Provider,
+        {
+          value: providersContext,
+          children
+        }
+      )
+    }
+  ) }) }) });
+};
+const AppShellProvider = ({
+  children,
+  config: localConfig,
+  configUrl
+}) => {
+  const [loadedConfig, setLoadedConfig] = useState(void 0);
+  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 [initialConfig, setInitialConfig] = useState(void 0);
+  useEffect(() => {
+    if (rawConfig && !initialConfig) {
+      setInitialConfig(rawConfig);
+    }
+  }, [rawConfig, initialConfig]);
+  const { model, isPending: areBundlesLoading } = useModelFromConfig(initialConfig);
+  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;
+  }, [model?.systemProviders, model?.preloadedBundles]);
+  if (hasError) {
+    throw Error("Failed to obtain the configuration");
+  }
+  if (!rawConfig || !model || areBundlesLoading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(CombinedProviders, { providers: systemProviders, children: /* @__PURE__ */ jsx(AppShellProviderInner, { config: rawConfig, model, children }) });
+};
+export {
+  AppShellProvider as default
+};

package/dist/{esm/components → components}/AppShellRoutes/AppShellRoutes.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { lazy } from "react";
+import { useRef, useState, useMemo, useEffect, lazy } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { RouterProvider, createBrowserRouter, Outlet } from "react-router-dom";
-import { useHvAppShellConfig, useHvAppShellCombinedProviders } from "@hitachivantara/app-shell-shared";
+import { matchRoutes, RouterProvider, createBrowserRouter, Outlet } from "react-router-dom";
+import { useHvAppShellModel } from "@hitachivantara/app-shell-shared";
 import { HvContainer } from "@hitachivantara/uikit-react-core";
 import LoadingPage from "../../pages/LoadingPage/LoadingPage.js";
 import { getAppIdFromBundle } from "../../utils/navigationUtil.js";
@@ -15,13 +15,13 @@ function renderNestedRoutes(views) {
     return void 0;
   }
   return views.map((view) => {
-    const { bundle } = view;
+    const { bundle, route } = view;
     const appId = getAppIdFromBundle(bundle);
     const RouteComponent = lazy(() => import(
       /* @vite-ignore */
       bundle
     ));
-    const path = view.route.replace(/^\//, "");
+    const path = route.replace(/^\//, "");
     return {
       path,
       // "Component" used instead of "element" due to lazy loading
@@ -29,16 +29,16 @@ function renderNestedRoutes(views) {
         ErrorBoundary,
         {
           fallback: /* @__PURE__ */ jsx(GenericError, { fullPage: false }),
-          children: /* @__PURE__ */ jsx(RouteComponent, { ...view.config, children: view.views != null ? /* @__PURE__ */ jsx(Outlet, {}) : null })
+          children: /* @__PURE__ */ jsx(RouteComponent, { ...view.config, children: view.views ? /* @__PURE__ */ jsx(Outlet, {}) : null })
         },
-        view.route
+        view.key
       ) }),
       children: renderNestedRoutes(view.views)
     };
   });
 }
 function renderRoutes(mainPanel) {
-  if (mainPanel == null || mainPanel.views == null) {
+  if (mainPanel?.views == null) {
     return [];
   }
   const { views, maxWidth = "xl", ...mainContainerProps } = mainPanel;
@@ -49,6 +49,8 @@ function renderRoutes(mainPanel) {
       config,
       views: nestedViews,
       maxWidth: viewMaxWidth,
+      key,
+      conditions,
       ...viewContainerProps
     } = view;
     const appId = getAppIdFromBundle(bundle);
@@ -56,25 +58,22 @@ function renderRoutes(mainPanel) {
       /* @vite-ignore */
       bundle
     ));
+    const containerProps = {
+      maxWidth: viewMaxWidth ?? maxWidth,
+      ...mainContainerProps,
+      ...viewContainerProps
+    };
     return {
       path: route,
       // "Component" used instead of "element" due to lazy loading
-      Component: () => /* @__PURE__ */ jsx(
-        HvContainer,
+      Component: () => /* @__PURE__ */ jsx(HvContainer, { ...containerProps, children: /* @__PURE__ */ jsx(AppShellViewProvider, { id: appId, children: /* @__PURE__ */ jsx(
+        ErrorBoundary,
         {
-          maxWidth: viewMaxWidth ?? maxWidth,
-          ...mainContainerProps,
-          ...viewContainerProps,
-          children: /* @__PURE__ */ jsx(AppShellViewProvider, { id: appId, children: /* @__PURE__ */ jsx(
-            ErrorBoundary,
-            {
-              fallback: /* @__PURE__ */ jsx(GenericError, { fullPage: false }),
-              children: /* @__PURE__ */ jsx(RouteComponent, { ...config, children: nestedViews != null ? /* @__PURE__ */ jsx(Outlet, {}) : null })
-            },
-            route
-          ) })
-        }
-      ),
+          fallback: /* @__PURE__ */ jsx(GenericError, { fullPage: false }),
+          children: /* @__PURE__ */ jsx(RouteComponent, { ...config, children: nestedViews ? /* @__PURE__ */ jsx(Outlet, {}) : null })
+        },
+        view.key
+      ) }) }),
       children: renderNestedRoutes(nestedViews)
     };
   });
@@ -89,8 +88,28 @@ function renderErrorRoutes(mainPanel) {
   ];
 }
 const AppShellRoutes = () => {
-  const { baseUrl, mainPanel, services } = useHvAppShellConfig();
-  const { providers } = useHvAppShellCombinedProviders();
+  const { baseUrl, mainPanel } = useHvAppShellModel();
+  const prevRoutesRef = useRef([]);
+  const [routerKey, setRouterKey] = useState("router-initial");
+  const childRoutes = useMemo(
+    () => [...renderRoutes(mainPanel), ...renderErrorRoutes(mainPanel)],
+    [mainPanel]
+  );
+  useEffect(() => {
+    if (prevRoutesRef.current.length === 0) {
+      prevRoutesRef.current = childRoutes;
+      return;
+    }
+    const currentPath = globalThis.location.pathname;
+    const prevMatch = matchRoutes(prevRoutesRef.current, currentPath);
+    const newMatch = matchRoutes(childRoutes, currentPath);
+    const prevWas404 = !prevMatch || prevMatch.at(-1)?.route.path === "*";
+    const newIs404 = !newMatch || newMatch.at(-1)?.route.path === "*";
+    if (prevWas404 && !newIs404 || !prevWas404 && newIs404) {
+      setRouterKey(`router-${newIs404 ? "404" : "valid"}`);
+    }
+    prevRoutesRef.current = childRoutes;
+  }, [baseUrl, childRoutes]);
   return /* @__PURE__ */ jsx(
     RouterProvider,
     {
@@ -98,18 +117,15 @@ const AppShellRoutes = () => {
       router: createBrowserRouter(
         [
           {
-            element: /* @__PURE__ */ jsx(Root, { providers, services }),
-            // All routes live inside `RootRoute`
+            element: /* @__PURE__ */ jsx(Root, {}),
             errorElement: /* @__PURE__ */ jsx(GenericError, { fullPage: true }),
-            children: [
-              ...renderRoutes(mainPanel),
-              ...renderErrorRoutes(mainPanel)
-            ]
+            children: childRoutes
           }
         ],
         { basename: baseUrl ?? "/" }
       )
-    }
+    },
+    routerKey
   );
 };
 export {

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

@@ -3,7 +3,7 @@ import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { css } from "@emotion/css";
 import { useHvNavigation } from "@hitachivantara/app-shell-navigation";
-import { CONFIG_TRANSLATIONS_NAMESPACE, useHvAppShellConfig } from "@hitachivantara/app-shell-shared";
+import { CONFIG_TRANSLATIONS_NAMESPACE, useHvAppShellModel } from "@hitachivantara/app-shell-shared";
 import { useTheme, HvHeader, HvButton, HvHeaderBrand, HvHeaderNavigation } from "@hitachivantara/uikit-react-core";
 import { useLayoutContext } from "../../../providers/LayoutProvider.js";
 import { useNavigationContext } from "../../../providers/NavigationProvider.js";
@@ -14,7 +14,7 @@ import BrandLogo from "../BrandLogo/BrandLogo.js";
 const Header = () => {
   const { t } = useTranslation(void 0, { keyPrefix: "header.navigation" });
   const { t: tConfig } = useTranslation(CONFIG_TRANSLATIONS_NAMESPACE);
-  const appShellConfig = useHvAppShellConfig();
+  const { navigationMode, name, logo } = useHvAppShellModel();
   const { verticalNavigationWidth } = useLayoutContext();
   const { activeTheme } = useTheme();
   const { navigate } = useHvNavigation();
@@ -27,8 +27,8 @@ const Header = () => {
     verticalNavigationMode,
     verticalNavigationItems
   } = useNavigationContext();
-  const isOnlyTopMode = appShellConfig.navigationMode === "ONLY_TOP";
-  const showNavigation = !isCompactMode && appShellConfig.navigationMode !== "ONLY_LEFT" && items.length > 0;
+  const isOnlyTopMode = navigationMode === "ONLY_TOP";
+  const showNavigation = !isCompactMode && navigationMode !== "ONLY_LEFT" && items.length > 0;
   const isVerticalNavigationClosed = verticalNavigationMode === "CLOSED";
   const showVerticalNavigationButton = isCompactMode && verticalNavigationItems.length > 0;
   const handleNavigationChange = (event, selectedItem) => {
@@ -40,7 +40,7 @@ const Header = () => {
   };
   const isPentahoTheme = activeTheme?.name === "pentahoPlus";
   const shouldShrinkHeader = isPentahoTheme && verticalNavigationWidth > 0;
-  const name = appShellConfig.name ? tConfig(appShellConfig.name) : "";
+  const appName = name ? tConfig(name) : "";
   return /* @__PURE__ */ jsxs(
     HvHeader,
     {
@@ -49,7 +49,7 @@ const Header = () => {
         width: shouldShrinkHeader ? `calc(100% - ${verticalNavigationWidth}px)` : void 0
       }),
       children: [
-        /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx("title", { children: name }) }),
+        /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx("title", { children: appName }) }),
         showVerticalNavigationButton && /* @__PURE__ */ jsx(
           HvButton,
           {
@@ -64,9 +64,9 @@ const Header = () => {
           HvHeaderBrand,
           {
             ...!isPentahoTheme && {
-              logo: /* @__PURE__ */ jsx(StyledIconWrapper, { children: /* @__PURE__ */ jsx(BrandLogo, { logo: appShellConfig.logo }) })
+              logo: /* @__PURE__ */ jsx(StyledIconWrapper, { children: /* @__PURE__ */ jsx(BrandLogo, { logo }) })
             },
-            name
+            name: appName
           }
         ),
         showNavigation && /* @__PURE__ */ jsx(

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

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { useHvAppShellConfig } from "@hitachivantara/app-shell-shared";
+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";
 const HeaderActions = () => {
-  const { header } = useHvAppShellConfig();
-  return /* @__PURE__ */ jsx(HvHeaderActions, { children: header?.actions.map((action, index) => {
-    const headerActionKey = `${action.bundle}${index}`;
+  const { header } = useHvAppShellModel();
+  return /* @__PURE__ */ jsx(HvHeaderActions, { children: header?.actions.map((action) => {
     const Component = internalActions.some(
       (a) => a.bundle === action.bundle
     ) ? InternalAction : DynamicAction;
@@ -16,7 +15,7 @@ const HeaderActions = () => {
         bundle: action.bundle,
         ...action.config
       },
-      headerActionKey
+      action.key
     );
   }) });
 };

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

@@ -3,7 +3,7 @@ import { useState, useId } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
-import { CONFIG_TRANSLATIONS_NAMESPACE, useHvAppShellConfig } from "@hitachivantara/app-shell-shared";
+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";
@@ -19,7 +19,7 @@ const AppSwitcherToggle = ({
   const { t: tConfig } = useTranslation(CONFIG_TRANSLATIONS_NAMESPACE);
   const [isPanelOpen, setIsPanelOpen] = useState(false);
   const appSwitcherPanelId = useId();
-  const appShellConfig = useHvAppShellConfig();
+  const { logo } = useHvAppShellModel();
   const createAppsList = () => {
     return apps ? apps.map((app) => ({
       name: tConfig(app.label),
@@ -53,7 +53,7 @@ const AppSwitcherToggle = ({
         ...isPanelOpen && { "aria-controls": appSwitcherPanelId },
         children: [
           /* @__PURE__ */ jsx(IconUiKit, { name: "AppSwitcher" }),
-          showLogo && /* @__PURE__ */ jsx(StyledIconWrapper, { style: { paddingRight: theme.space.xs }, children: /* @__PURE__ */ jsx(BrandLogo, { logo: appShellConfig.logo }) })
+          showLogo && /* @__PURE__ */ jsx(StyledIconWrapper, { style: { paddingRight: theme.space.xs }, children: /* @__PURE__ */ jsx(BrandLogo, { logo }) })
         ]
       }
     ),

package/dist/{esm/components → components}/layout/VerticalNavigation/NavigationHeader.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useHvAppShellConfig } from "@hitachivantara/app-shell-shared";
+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";
 const NavigationHeader = ({ isOpen }) => {
-  const appShellConfig = useHvAppShellConfig();
+  const { logo } = useHvAppShellModel();
   return /* @__PURE__ */ jsxs("div", { className: classes.navigationHeader, children: [
     /* @__PURE__ */ jsx(AppSwitcher, {}),
-    isOpen && /* @__PURE__ */ jsx(BrandLogo, { logo: appShellConfig.logo })
+    isOpen && /* @__PURE__ */ jsx(BrandLogo, { logo })
   ] });
 };
 export {

package/dist/hooks/useConditionsEvaluator.js

@@ -0,0 +1,87 @@
+import { useRef } from "react";
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message || "Assertion failed");
+  }
+}
+function areArraysEqual(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+const useConditionsEvaluator = (allConditions, preloadedBundles) => {
+  const previousResultsRef = useRef([]);
+  if (preloadedBundles.size === 0) {
+    return {
+      isPending: false,
+      error: null,
+      result: previousResultsRef.current
+    };
+  }
+  const hookResults = [];
+  for (const { bundle, config } of allConditions) {
+    const module = preloadedBundles.get(bundle);
+    if (!module) {
+      hookResults.push({
+        isPending: false,
+        error: new Error(`Bundle '${bundle}' not loaded`),
+        result: void 0
+      });
+      continue;
+    }
+    try {
+      const result2 = module(config);
+      hookResults.push(result2);
+    } catch (error) {
+      hookResults.push({
+        isPending: false,
+        error,
+        result: void 0
+      });
+    }
+  }
+  const isAnyPending = hookResults.some((result2) => result2.isPending);
+  const currentResults = [];
+  for (let i = 0; i < allConditions.length; i++) {
+    const condition = allConditions[i];
+    const asyncResult = hookResults[i];
+    if (asyncResult.error) {
+      console.error(
+        `Failed to execute ${condition.bundle} with: ${asyncResult.error}`
+      );
+    }
+    const boolResult = asyncResult.isPending || asyncResult.error ? false : asyncResult.result;
+    assert(
+      i === condition.globalIndex,
+      `Index mismatch: expected ${i} to equal globalIndex ${condition.globalIndex}`
+    );
+    currentResults[condition.globalIndex] = boolResult;
+  }
+  const previousResults = previousResultsRef.current;
+  const hasChanged = !areArraysEqual(previousResults, currentResults);
+  const result = hasChanged ? currentResults : previousResults;
+  if (hasChanged) {
+    previousResultsRef.current = currentResults;
+  }
+  if (isAnyPending) {
+    return {
+      isPending: true,
+      error: null,
+      result: void 0
+    };
+  }
+  return {
+    error: null,
+    result,
+    isPending: false
+  };
+};
+export {
+  useConditionsEvaluator
+};

package/dist/hooks/useFilteredModel.js

@@ -0,0 +1,30 @@
+import { useMemo } from "react";
+import filterModel from "../utils/filterModel.js";
+import { useConditionsEvaluator } from "./useConditionsEvaluator.js";
+const useFilteredModel = (model) => {
+  const { isPending: isModelPending, result } = useConditionsEvaluator(
+    model.allConditions,
+    model.preloadedBundles
+  );
+  const resolvedModel = useMemo(() => {
+    if (isModelPending) {
+      return void 0;
+    }
+    return filterModel(model, result);
+  }, [isModelPending, model, result]);
+  if (isModelPending) {
+    return {
+      error: null,
+      isPending: true,
+      model: void 0
+    };
+  }
+  return {
+    error: null,
+    isPending: false,
+    model: resolvedModel
+  };
+};
+export {
+  useFilteredModel
+};

package/dist/hooks/useModelFromConfig.js

@@ -0,0 +1,42 @@
+import { useMemo, useCallback } from "react";
+import { useAsync } from "@hitachivantara/app-shell-shared";
+import { importAllBundles } from "../utils/lazyImport.js";
+import processConfig from "../utils/processConfig.js";
+const useModelFromConfig = (config) => {
+  const initialModel = useMemo(
+    () => config ? processConfig(config) : void 0,
+    [config]
+  );
+  const systemProvidersBundles = useMemo(
+    () => (initialModel?.systemProviders ?? []).map((p) => p.bundle),
+    [initialModel]
+  );
+  const conditionBundles = useMemo(
+    () => (initialModel?.allConditions ?? []).map((c) => c.bundle),
+    [initialModel]
+  );
+  const providerBundles = useMemo(
+    () => (initialModel?.providers ?? []).map((p) => p.bundle),
+    [initialModel]
+  );
+  const bundles = useMemo(
+    () => [...systemProvidersBundles, ...conditionBundles, ...providerBundles],
+    [systemProvidersBundles, conditionBundles, providerBundles]
+  );
+  const promiseFactory = useCallback(async () => {
+    if (!initialModel) {
+      return;
+    }
+    if (bundles.length === 0) {
+      return {
+        ...initialModel
+      };
+    }
+    const preloadedBundles = await importAllBundles(bundles);
+    return { ...initialModel, preloadedBundles };
+  }, [initialModel, bundles]);
+  return useAsync(promiseFactory, { dataProp: "model" });
+};
+export {
+  useModelFromConfig
+};

package/dist/{esm/hooks → hooks}/useNavigationMenuItems.js

@@ -1,12 +1,12 @@
 import { useContext, useMemo, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { useHvNavigation } from "@hitachivantara/app-shell-navigation";
-import { useHvAppShellConfig, HvAppShellRuntimeContext, CONFIG_TRANSLATIONS_NAMESPACE, useHvMenuItems } from "@hitachivantara/app-shell-shared";
+import { useHvAppShellModel, HvAppShellRuntimeContext, CONFIG_TRANSLATIONS_NAMESPACE, useHvMenuItems } from "@hitachivantara/app-shell-shared";
 import { createNavigationMenuItems } from "../utils/navigationUtil.js";
 const MAX_TOP_MENU_DEPTH = 2;
 const useNavigationMenuItems = () => {
   const { pathname } = useLocation();
-  const { navigationMode } = useHvAppShellConfig();
+  const { navigationMode } = useHvAppShellModel();
   const { navigate } = useHvNavigation();
   const { i18n } = useContext(HvAppShellRuntimeContext) ?? {};
   const tConfig = useMemo(

package/dist/{esm/hooks → hooks}/useNotificationsEventListener.js

@@ -4,12 +4,12 @@ const useNotificationsEventListener = () => {
   const { enqueueSnackbar } = useHvSnackbar();
   const { show } = useBannerContext();
   const handleCustomEventSnackbar = (notification) => {
-    const { message, variant, actions, actionsCallback } = notification;
+    const { message, variant, actions, onAction } = notification;
     let snackbarContentProps;
     if (actions) {
       snackbarContentProps = {
         action: Array.isArray(actions) ? actions[0] : actions,
-        actionCallback: actionsCallback
+        onAction
       };
     }
     if (message) {

package/dist/{esm/hooks → hooks}/useThemeEventListener.js

@@ -1,17 +1,16 @@
 import { useTheme } from "@hitachivantara/uikit-react-core";
 import useLocalStorage from "./useLocalStorage.js";
 const useThemeEventListener = () => {
-  const { selectedTheme, changeTheme, selectedMode, colorModes } = useTheme();
+  const { selectedMode, colorModes, changeMode } = useTheme();
   const { setStoredValue } = useLocalStorage("COLOR_MODE");
   const getNextColorMode = () => {
-    const index = colorModes.indexOf(selectedMode);
-    const nextIndex = (index + 1) % colorModes.length;
-    return colorModes[nextIndex];
+    const nextIndex = colorModes.indexOf(selectedMode) + 1;
+    return colorModes[nextIndex % colorModes.length];
   };
   const handleThemeEvent = (event) => {
     const { colorMode } = event.detail;
     const newColorMode = !colorMode || colorModes.indexOf(colorMode) === -1 ? getNextColorMode() : colorMode;
-    changeTheme(selectedTheme, newColorMode);
+    changeMode(newColorMode);
     setStoredValue(newColorMode);
   };
   return { handleThemeEvent };

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+
+declare const _default: {
+    ({ ...wrappedProps }: any): JSX_2.Element;
+    displayName: string;
+};
+export default _default;
+
+export { }

package/dist/{esm/pages → pages}/ErrorPage/ErrorPage.js

@@ -21,7 +21,7 @@ const ErrorPage = ({
       children: [
         /* @__PURE__ */ jsxs(StyledTitleWrapper, { children: [
           code && /* @__PURE__ */ jsx(HvTypography, { variant: "title1", children: code }),
-          /* @__PURE__ */ jsx(HvTypography, { variant: isCompactMode ? "xsTitle" : "display", children: title })
+          /* @__PURE__ */ jsx(HvTypography, { variant: isCompactMode ? "title3" : "display", children: title })
         ] }),
         /* @__PURE__ */ jsx(
           StyledImageWrapper,