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

package/dist/components/AppShellProvider/AppShellProvider.js

@@ -1,45 +1,31 @@
 import { jsx } from "react/jsx-runtime";
-import { useContext, useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useContext } from "react";
 import { I18nContext } from "react-i18next";
-import { HvAppShellContext, HvAppShellRuntimeContext, HvAppShellCombinedProvidersContext, CONFIG_TRANSLATIONS_NAMESPACE } from "@hitachivantara/app-shell-shared";
+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";
-const AppShellProvider = ({
-  children,
-  config: localConfig,
-  configUrl
+import CombinedProviders from "../../utils/CombinedProviders.js";
+const AppShellProviderInner = ({
+  config,
+  model,
+  children
 }) => {
-  const { i18n } = useContext(I18nContext);
   const { value: storedColorModeValue } = useLocalStorage("COLOR_MODE");
-  const [loadedConfig, setLoadedConfig] = useState(void 0);
-  const [hasError, setHasError] = useState(false);
-  useEffect(() => {
-    if (localConfig || !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);
-    });
-  }, [localConfig, configUrl]);
-  const theConfig = useMemo(
-    () => localConfig ?? loadedConfig,
-    [localConfig, loadedConfig]
-  );
-  if (hasError) {
-    throw Error("Failed to obtain the configuration");
-  }
-  if (theConfig?.translations) {
+  const { i18n } = useContext(I18nContext);
+  const { isPending: isModelPending, model: filteredModel } = useFilteredModel(model);
+  if (filteredModel?.translations) {
     addResourceBundles(
       i18n,
-      theConfig.translations,
+      filteredModel.translations,
       CONFIG_TRANSLATIONS_NAMESPACE
     );
   }
   const [theme, setTheme] = useState();
-  const [providers, setProviders] = useState();
   useEffect(() => {
-    const theme2 = theConfig?.theming?.theme;
+    const theme2 = filteredModel?.theming?.theme;
     if (!theme2) return;
     if (themes[theme2]) {
       setTheme(themes[theme2]);
@@ -53,29 +39,24 @@ const AppShellProvider = ({
     }).catch((e) => {
       console.error(`Import of theme bundle ${theme2} failed! ${e}`);
     });
-  }, [theConfig?.theming?.theme]);
-  useEffect(() => {
-    if (!theConfig?.providers) return;
-    Promise.all(
-      theConfig.providers.map((provider) => {
-        return import(
-          /* @vite-ignore */
-          provider.bundle
-        ).then((module) => ({
-          component: module.default,
-          config: provider.config
-        })).catch((e) => {
-          console.error(
-            `Import of provider '${provider.bundle}' failed! ${e}`
-          );
-        });
-      })
-    ).then(
-      (loadedProviders) => setProviders(loadedProviders.filter((provider) => !!provider))
-    ).catch((e) => {
-      console.error(`Import of providers failed!`, e);
-    });
-  }, [theConfig?.providers]);
+  }, [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
@@ -88,17 +69,80 @@ const AppShellProvider = ({
     }),
     [providers]
   );
-  if (!theConfig || theConfig.theming?.theme && !theme || theConfig.providers != null && providers === void 0) {
+  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: theConfig, children: /* @__PURE__ */ jsx(HvAppShellRuntimeContext.Provider, { value: runtimeContext, children: /* @__PURE__ */ jsx(
+  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 ?? theConfig.theming?.colorMode,
-      children: /* @__PURE__ */ jsx(HvAppShellCombinedProvidersContext.Provider, { value: providersContext, children })
+      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/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/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/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/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/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/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/pages/ErrorPage/Footer.js

@@ -3,7 +3,7 @@ import { useErrorBoundary } from "react-error-boundary";
 import { useTranslation, Trans } from "react-i18next";
 import styled from "@emotion/styled";
 import { useHvNavigation } from "@hitachivantara/app-shell-navigation";
-import { useHvAppShellConfig } from "@hitachivantara/app-shell-shared";
+import { useHvAppShellModel } from "@hitachivantara/app-shell-shared";
 import { HvTypography } from "@hitachivantara/uikit-react-core";
 import { useNavigationContext } from "../../providers/NavigationProvider.js";
 const StyledFooterWrapper = styled("div")({
@@ -12,7 +12,7 @@ const StyledFooterWrapper = styled("div")({
 const Footer = () => {
   const { t } = useTranslation();
   const { navigate } = useHvNavigation();
-  const { navigationMode } = useHvAppShellConfig();
+  const { navigationMode } = useHvAppShellModel();
   const { resetBoundary } = useErrorBoundary();
   const { items, verticalNavigationItems, isCompactMode } = useNavigationContext();
   const getFirstMenuItem = () => {

package/dist/pages/Root/Root.js

@@ -3,6 +3,7 @@ import { Suspense } from "react";
 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 { BannerProvider } from "../../providers/BannerProvider.js";
 import { NavigationProvider } from "../../providers/NavigationProvider.js";
 import CombinedProviders from "../../utils/CombinedProviders.js";
@@ -11,11 +12,15 @@ import CustomHooksInitializer from "../../components/CustomHooksInitializer/Cust
 import Header from "../../components/layout/Header/Header.js";
 import Main from "../../components/layout/Main/Main.js";
 import GenericError from "../GenericError/GenericError.js";
-const Root = ({ providers, services }) => /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(GenericError, { fullPage: true }), children: /* @__PURE__ */ jsx(ServiceManagerProvider, { config: { services }, children: /* @__PURE__ */ jsx(CombinedProviders, { providers, children: /* @__PURE__ */ jsx(NavigationProvider, { children: /* @__PURE__ */ jsxs(BannerProvider, { children: [
-  /* @__PURE__ */ jsx(CustomHooksInitializer, {}),
-  /* @__PURE__ */ jsx(Header, {}),
-  /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingPage, {}), children: /* @__PURE__ */ jsx(Outlet, {}) }) })
-] }) }) }) }) });
+const Root = () => {
+  const { services } = useHvAppShellModel();
+  const { providers } = useHvAppShellCombinedProviders();
+  return /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(GenericError, { fullPage: true }), children: /* @__PURE__ */ jsx(ServiceManagerProvider, { config: { services }, children: /* @__PURE__ */ jsx(CombinedProviders, { providers, children: /* @__PURE__ */ jsx(NavigationProvider, { children: /* @__PURE__ */ jsxs(BannerProvider, { children: [
+    /* @__PURE__ */ jsx(CustomHooksInitializer, {}),
+    /* @__PURE__ */ jsx(Header, {}),
+    /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingPage, {}), children: /* @__PURE__ */ jsx(Outlet, {}) }) })
+  ] }) }) }) }) });
+};
 export {
   Root as default
 };

package/dist/utils/CombinedProviders.js

@@ -1,22 +1,19 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
 const CombinedProviders = ({
-  providers,
-  children: mainChildren
+  children: mainChildren,
+  providers
 }) => {
-  const Combined = useCallback(
-    ({ children }) => {
-      let result = children;
-      if (providers && providers.length > 0) {
-        result = providers.reduceRight((Acc, { component: Curr, config }) => {
-          return /* @__PURE__ */ jsx(Curr, { ...config, children: Acc });
-        }, children);
-      }
-      return result;
-    },
-    [providers]
-  );
-  return /* @__PURE__ */ jsx(Combined, { children: mainChildren });
+  const combined = useMemo(() => {
+    if (!providers || providers.length === 0) {
+      return mainChildren;
+    }
+    return providers.reduceRight(
+      (Acc, { component: Curr, config, key }) => /* @__PURE__ */ jsx(Curr, { ...config, children: Acc }, key),
+      mainChildren
+    );
+  }, [providers, mainChildren]);
+  return /* @__PURE__ */ jsx(Fragment, { children: combined });
 };
 export {
   CombinedProviders as default

package/dist/utils/filterModel.js

@@ -0,0 +1,177 @@
+const shouldInclude = (conditions, conditionResults) => {
+  if (!conditions || conditions.length === 0) {
+    return true;
+  }
+  for (const condition of conditions) {
+    if (!conditionResults[condition.globalIndex]) {
+      return false;
+    }
+  }
+  return true;
+};
+const filterViews = (views, conditionResults) => {
+  const filteredViews = [];
+  let hasChanged = false;
+  for (const view of views) {
+    const include = shouldInclude(view.conditions, conditionResults);
+    if (!include) {
+      hasChanged = true;
+      continue;
+    }
+    if (!view.views) {
+      filteredViews.push(view);
+      continue;
+    }
+    const [filteredSubViews, subViewsChanged] = filterViews(
+      view.views,
+      conditionResults
+    );
+    if (subViewsChanged) {
+      filteredViews.push({ ...view, views: filteredSubViews });
+      hasChanged = true;
+    } else {
+      filteredViews.push(view);
+    }
+  }
+  return [hasChanged ? filteredViews : views, hasChanged];
+};
+const filterMenus = (menus, conditionResults) => {
+  const filteredMenus = [];
+  let hasChanged = false;
+  for (const menu of menus) {
+    const include = shouldInclude(menu.conditions, conditionResults);
+    if (!include) {
+      hasChanged = true;
+      continue;
+    }
+    if (!menu.submenus) {
+      filteredMenus.push(menu);
+      continue;
+    }
+    const [filteredSubmenus, submenusChanged] = filterMenus(
+      menu.submenus,
+      conditionResults
+    );
+    if (filteredSubmenus.length === 0) {
+      hasChanged = true;
+      continue;
+    }
+    if (submenusChanged) {
+      filteredMenus.push({
+        ...menu,
+        submenus: filteredSubmenus
+      });
+      hasChanged = true;
+    } else {
+      filteredMenus.push(menu);
+    }
+  }
+  return [hasChanged ? filteredMenus : menus, hasChanged];
+};
+const filterActions = (actions, conditionResults) => {
+  const filteredHeaderActions = [];
+  for (const action of actions) {
+    const include = shouldInclude(action.conditions, conditionResults);
+    if (include) filteredHeaderActions.push(action);
+  }
+  const hasChanged = filteredHeaderActions.length !== actions.length;
+  return [hasChanged ? filteredHeaderActions : actions, hasChanged];
+};
+const filterProviders = (providers, conditionResults) => {
+  const filteredProviders = [];
+  for (const provider of providers) {
+    const include = shouldInclude(provider.conditions, conditionResults);
+    if (include) filteredProviders.push(provider);
+  }
+  const hasChanged = filteredProviders.length !== providers.length;
+  return [hasChanged ? filteredProviders : providers, hasChanged];
+};
+const filterServices = (services, conditionResults) => {
+  if (!services) {
+    return [services, false];
+  }
+  const filteredServices = {};
+  let hasChanged = false;
+  for (const [serviceId, serviceProviderModels] of Object.entries(services)) {
+    const result = [];
+    let localChanged = false;
+    for (const serviceConfigModel of serviceProviderModels) {
+      const include = shouldInclude(
+        serviceConfigModel.conditions,
+        conditionResults
+      );
+      if (include) {
+        result.push(serviceConfigModel);
+      } else {
+        localChanged = true;
+      }
+    }
+    if (localChanged) hasChanged = true;
+    filteredServices[serviceId] = localChanged ? result : serviceProviderModels;
+  }
+  return [hasChanged ? filteredServices : services, hasChanged];
+};
+function filterModel(model, conditionResults) {
+  let hasChanged = false;
+  const filtered = { ...model };
+  if (model.mainPanel?.views) {
+    const [filteredViews, viewsChanged] = filterViews(
+      model.mainPanel.views,
+      conditionResults
+    );
+    if (viewsChanged) {
+      filtered.mainPanel = {
+        ...model.mainPanel,
+        views: filteredViews
+      };
+      hasChanged = true;
+    }
+  }
+  if (model.menu) {
+    const [filteredMenus, menusChanged] = filterMenus(
+      model.menu,
+      conditionResults
+    );
+    if (menusChanged) {
+      filtered.menu = filteredMenus;
+      hasChanged = true;
+    }
+  }
+  if (model.header?.actions) {
+    const [filteredActions, actionsChanged] = filterActions(
+      model.header.actions,
+      conditionResults
+    );
+    if (actionsChanged) {
+      filtered.header = {
+        ...model.header,
+        actions: filteredActions
+      };
+      hasChanged = true;
+    }
+  }
+  if (model.providers) {
+    const [filteredProviders, providersChanged] = filterProviders(
+      model.providers,
+      conditionResults
+    );
+    if (providersChanged) {
+      filtered.providers = filteredProviders;
+      hasChanged = true;
+    }
+  }
+  if (model.services) {
+    const [filteredServices, servicesChanged] = filterServices(
+      model.services,
+      conditionResults
+    );
+    if (servicesChanged) {
+      filtered.services = filteredServices;
+      hasChanged = true;
+    }
+  }
+  return hasChanged ? filtered : model;
+}
+export {
+  filterModel as default
+};

package/dist/utils/lazyImport.js

@@ -0,0 +1,40 @@
+async function lazyImport(bundle) {
+  try {
+    const module = await import(
+      /* @vite-ignore */
+      bundle
+    );
+    return {
+      isPending: false,
+      error: null,
+      module: module.default
+    };
+  } catch (err) {
+    const error = err instanceof Error ? err : new Error(String(err));
+    return {
+      isPending: false,
+      error,
+      module: void 0
+    };
+  }
+}
+async function importAllBundles(bundles) {
+  const results = await Promise.all(
+    bundles.map((bundle) => lazyImport(bundle))
+  );
+  const preloadedBundles = /* @__PURE__ */ new Map();
+  for (let i = 0; i < results.length; i++) {
+    const result = results[i];
+    const bundle = bundles[i];
+    if (result.error) {
+      console.error(`Failed to load bundle ${bundle}:`, result.error);
+      continue;
+    }
+    preloadedBundles.set(bundle, result.module);
+  }
+  return preloadedBundles;
+}
+export {
+  importAllBundles,
+  lazyImport
+};

package/dist/utils/processConfig.js

@@ -0,0 +1,158 @@
+const generateKey = () => {
+  return `${Date.now()}-${Math.round(1e3 * Math.random())}`;
+};
+const createRouteConditionsMap = (views) => {
+  const map = /* @__PURE__ */ new Map();
+  const processView = (view) => {
+    if (view.route && view.conditions) {
+      const normalizedRoute = view.route.replace(/^\//, "");
+      map.set(normalizedRoute, view.conditions);
+    }
+    if (view.views) {
+      for (const nestedView of view.views) {
+        processView(nestedView);
+      }
+    }
+  };
+  for (const view of views) {
+    processView(view);
+  }
+  return map;
+};
+const applyViewConditionsToMenus = (menus, routeConditionsMap) => {
+  return menus.map((menu) => {
+    let updatedMenu = menu;
+    if (menu.target) {
+      const normalizedTarget = menu.target.replace(/^\//, "");
+      const viewConditions = routeConditionsMap.get(normalizedTarget);
+      if (viewConditions) {
+        const mergedConditions = [
+          ...menu.conditions || [],
+          ...viewConditions
+        ];
+        if (mergedConditions.length > 0) {
+          updatedMenu = { ...menu, conditions: mergedConditions };
+        }
+      }
+    }
+    if (menu.submenus) {
+      const updatedSubmenus = applyViewConditionsToMenus(
+        menu.submenus,
+        routeConditionsMap
+      );
+      if (updatedSubmenus !== menu.submenus) {
+        updatedMenu = { ...updatedMenu, submenus: updatedSubmenus };
+      }
+    }
+    return updatedMenu;
+  });
+};
+function processConfig(appShellConfig) {
+  let globalIndex = 0;
+  const allConditions = [];
+  const registerElement = (configElement) => {
+    const key = generateKey();
+    const conditions = configElement.conditions?.map((condConfig) => {
+      const conditionModel = {
+        ...condConfig,
+        globalIndex: globalIndex++
+      };
+      allConditions.push(conditionModel);
+      return conditionModel;
+    });
+    return {
+      ...configElement,
+      key,
+      ...conditions && { conditions }
+    };
+  };
+  const processViews = (viewsConfig) => {
+    if (!viewsConfig) {
+      return [];
+    }
+    return viewsConfig.map((viewConfig) => {
+      const viewModel = registerElement(viewConfig);
+      if (viewConfig.views) {
+        return {
+          ...viewModel,
+          views: processViews(viewConfig.views)
+        };
+      }
+      return viewModel;
+    });
+  };
+  const processMenus = (menusConfig) => {
+    if (!menusConfig) {
+      return [];
+    }
+    return menusConfig.map((menuConfig) => {
+      const menuModel = registerElement(
+        menuConfig
+      );
+      if (menuConfig.submenus) {
+        return {
+          ...menuModel,
+          submenus: processMenus(menuConfig.submenus)
+        };
+      }
+      return menuModel;
+    });
+  };
+  const config = { ...appShellConfig };
+  let viewsModel;
+  if (appShellConfig.mainPanel?.views) {
+    viewsModel = processViews(appShellConfig.mainPanel.views);
+    config.mainPanel = {
+      ...appShellConfig.mainPanel,
+      views: viewsModel
+    };
+  }
+  if (appShellConfig.menu) {
+    let menusModel = processMenus(appShellConfig.menu);
+    if (viewsModel) {
+      const routeConditionsMap = createRouteConditionsMap(viewsModel);
+      menusModel = applyViewConditionsToMenus(menusModel, routeConditionsMap);
+    }
+    config.menu = menusModel;
+  }
+  if (appShellConfig.header?.actions) {
+    config.header = {
+      ...appShellConfig.header,
+      actions: appShellConfig.header.actions.map(
+        (action) => registerElement(action)
+      )
+    };
+  }
+  if (appShellConfig.systemProviders) {
+    config.systemProviders = appShellConfig.systemProviders.map((provider) => ({
+      ...provider,
+      key: generateKey()
+    }));
+  }
+  if (appShellConfig.providers) {
+    config.providers = appShellConfig.providers.map(
+      (provider) => registerElement(provider)
+    );
+  }
+  if (appShellConfig.services) {
+    const servicesModel = {};
+    for (const [serviceId, configs] of Object.entries(
+      appShellConfig.services
+    )) {
+      servicesModel[serviceId] = configs.map(
+        (serviceConfig) => registerElement(
+          serviceConfig
+        )
+      );
+    }
+    config.services = servicesModel;
+  }
+  return Object.freeze({
+    ...config,
+    allConditions,
+    preloadedBundles: /* @__PURE__ */ new Map()
+  });
+}
+export {
+  processConfig as default
+};

package/package.json

@@ -1,33 +1,33 @@
 {
   "name": "@hitachivantara/app-shell-ui",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.2",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "AppShell Component",
-  "homepage": "https://github.com/lumada-design/hv-uikit-react",
+  "homepage": "https://github.com/pentaho/hv-uikit-react",
   "sideEffects": false,
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/lumada-design/hv-uikit-react.git",
+    "url": "git+https://github.com/pentaho/hv-uikit-react.git",
     "directory": "packages/app-shell-ui"
   },
-  "bugs": "https://github.com/lumada-design/hv-uikit-react/issues",
+  "bugs": "https://github.com/pentaho/hv-uikit-react/issues",
   "dependencies": {
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@hitachivantara/app-shell-events": "^2.0.0-next.1",
-    "@hitachivantara/app-shell-navigation": "^2.0.0-next.1",
-    "@hitachivantara/app-shell-services": "^2.0.0-next.1",
-    "@hitachivantara/app-shell-shared": "^2.0.0-next.1",
-    "@hitachivantara/uikit-react-core": "^6.0.0-next.2",
-    "@hitachivantara/uikit-react-icons": "^6.0.0-next.2",
+    "@hitachivantara/app-shell-events": "^2.0.0-next.2",
+    "@hitachivantara/app-shell-navigation": "^2.0.0-next.2",
+    "@hitachivantara/app-shell-services": "^2.0.0-next.2",
+    "@hitachivantara/app-shell-shared": "^2.0.0-next.2",
+    "@hitachivantara/uikit-react-core": "^6.0.0-next.3",
+    "@hitachivantara/uikit-react-icons": "^6.0.0-next.3",
     "@mui/material": "^7.0.2",
     "i18next": "^24.2.2",
     "i18next-browser-languagedetector": "^8.0.3",
-    "react-error-boundary": "^4.0.10",
+    "react-error-boundary": "^6.0.0",
     "react-helmet-async": "^2.0.1",
     "react-i18next": "15.7.1",
     "uid": "^2.0.2"
@@ -44,7 +44,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "0b07240fb2ef75e046d8e6aaf0ff71bf2415c73f",
+  "gitHead": "f404f47dd2c0a9d4033b9acccc87282aa9e42119",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",