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

package/dist/{esm/pages → 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

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+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();
+  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/{esm/providers → providers}/BannerProvider.js

@@ -100,7 +100,7 @@ const BannerProvider = ({ children }) => {
         label: banner.message,
         showIcon: true,
         actions: banner.actions,
-        actionsCallback: banner.actionsCallback,
+        onAction: banner.onAction,
         bannerContentProps: {
           actionProps: { "aria-label": t("close") }
         },

package/dist/types/index.d.ts

@@ -1,9 +1,4 @@
-import { JSX as JSX_2 } from 'react/jsx-runtime';
-
-declare const _default: {
-    ({ ...wrappedProps }: any): JSX_2.Element;
-    displayName: string;
-};
-export default _default;
-
-export { }
+export {}
+import hitachivantaraappShellUi from '../packages/app-shell-ui/src/index'
+export default hitachivantaraappShellUi
+export {}

package/dist/utils/CombinedProviders.js

@@ -0,0 +1,20 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+const CombinedProviders = ({
+  children: mainChildren,
+  providers
+}) => {
+  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,6 +1,6 @@
 {
   "name": "@hitachivantara/app-shell-ui",
-  "version": "1.14.0",
+  "version": "2.0.0-next.2",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
@@ -18,13 +18,13 @@
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@hitachivantara/app-shell-events": "^1.1.3",
-    "@hitachivantara/app-shell-navigation": "^1.4.21",
-    "@hitachivantara/app-shell-services": "^1.1.3",
-    "@hitachivantara/app-shell-shared": "^1.7.11",
-    "@hitachivantara/uikit-react-core": "^5.109.0",
-    "@hitachivantara/uikit-react-icons": "^5.16.9",
-    "@mui/material": "^5.16.14",
+    "@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": "^6.0.0",
@@ -44,15 +44,15 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "6d8da4ec057c2815bbf32ca60f9464d82443ab8f",
+  "gitHead": "f404f47dd2c0a9d4033b9acccc87282aa9e42119",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "default": "./dist/esm/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
   "types": "./dist/types/index.d.ts",
-  "module": "dist/esm/index.js"
+  "module": "dist/index.js"
 }

package/dist/esm/components/AppShellProvider/AppShellProvider.js

@@ -1,115 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useContext, useState, useEffect, useMemo } from "react";
-import { I18nContext } from "react-i18next";
-import { HvAppShellContext, HvAppShellRuntimeContext, HvAppShellCombinedProvidersContext, CONFIG_TRANSLATIONS_NAMESPACE } from "@hitachivantara/app-shell-shared";
-import { themes, HvProvider } from "@hitachivantara/uikit-react-core";
-import useLocalStorage from "../../hooks/useLocalStorage.js";
-import { addResourceBundles } from "../../i18n/index.js";
-const AppShellProvider = ({
-  children,
-  config: localConfig,
-  configUrl
-}) => {
-  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) {
-      fetch(new URL(configUrl)).then((result) => {
-        return result.json();
-      }).then((data) => setLoadedConfig(data)).catch((e) => {
-        console.error(
-          `It was not possible 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("It was not possible to obtain the configuration");
-  }
-  if (theConfig?.translations) {
-    addResourceBundles(
-      i18n,
-      theConfig.translations,
-      CONFIG_TRANSLATIONS_NAMESPACE
-    );
-  }
-  const [themes$1, setThemes] = useState(void 0);
-  const [providers, setProviders] = useState(void 0);
-  useEffect(() => {
-    if (theConfig?.theming?.themes) {
-      Promise.all(
-        theConfig.theming.themes?.map((bundle) => {
-          return themes[bundle] ?? import(
-            /* @vite-ignore */
-            bundle
-          ).then((module) => module.default).catch((e) => {
-            console.error(`Import of theme bundle ${bundle} failed! ${e}`);
-          });
-        })
-      ).then((loadedThemes) => {
-        setThemes(loadedThemes.filter((theme) => !!theme));
-      }).catch((e) => {
-        console.error(`Import of themes failed! ${e}`);
-      });
-    }
-  }, [theConfig?.theming?.themes]);
-  useEffect(() => {
-    if (theConfig?.providers) {
-      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]);
-  const runtimeContext = useMemo(
-    () => ({
-      i18n
-    }),
-    [i18n]
-  );
-  const providersContext = useMemo(
-    () => ({
-      providers
-    }),
-    [providers]
-  );
-  if (!theConfig || theConfig.theming?.themes && !themes$1 || theConfig.providers != null && providers === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(HvAppShellContext.Provider, { value: theConfig, children: /* @__PURE__ */ jsx(HvAppShellRuntimeContext.Provider, { value: runtimeContext, children: /* @__PURE__ */ jsx(
-    HvProvider,
-    {
-      themes: themes$1,
-      theme: theConfig.theming?.theme,
-      colorMode: storedColorModeValue ?? theConfig.theming?.colorMode,
-      children: /* @__PURE__ */ jsx(HvAppShellCombinedProvidersContext.Provider, { value: providersContext, children })
-    }
-  ) }) });
-};
-export {
-  AppShellProvider as default
-};

package/dist/esm/pages/Root/Root.js

@@ -1,21 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Suspense } from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import { Outlet } from "react-router-dom";
-import ServiceManagerProvider from "@hitachivantara/app-shell-services";
-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 = ({ 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, {}) }) })
-] }) }) }) }) });
-export {
-  Root as default
-};

package/dist/esm/utils/CombinedProviders.js

@@ -1,23 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback } from "react";
-const CombinedProviders = ({
-  providers,
-  children: mainChildren
-}) => {
-  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 });
-};
-export {
-  CombinedProviders as default
-};