@hitachivantara/app-shell-ui 1.6.0 → 1.6.2

package/dist/esm/lib/hooks/useNavigationMenuItems.js

@@ -1,33 +1,41 @@
-import { useContext as c, useMemo as f, useEffect as p } from "react";
-import { useLocation as g } from "react-router-dom";
-import { useHvAppShellConfig as v, HvAppShellRuntimeContext as M, CONFIG_TRANSLATIONS_NAMESPACE as I, useHvMenuItems as N } from "@hitachivantara/app-shell-shared";
-import { useHvNavigation as d } from "@hitachivantara/app-shell-navigation";
-import { createNavigationMenuItems as l } from "../utils/navigationUtil.js";
-const A = 2, H = () => {
+import { useContext, useMemo, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { useHvAppShellConfig, HvAppShellRuntimeContext, CONFIG_TRANSLATIONS_NAMESPACE, useHvMenuItems } from "@hitachivantara/app-shell-shared";
+import { useHvNavigation } from "@hitachivantara/app-shell-navigation";
+import { createNavigationMenuItems } from "../utils/navigationUtil.js";
+const MAX_TOP_MENU_DEPTH = 2;
+const useNavigationMenuItems = () => {
   const {
-    pathname: s
-  } = g(), {
-    navigationMode: m
-  } = v(), {
-    navigate: i
-  } = d(), {
-    i18n: e
-  } = c(M) ?? {}, a = f(() => (e == null ? void 0 : e.getFixedT(e.language, I)) ?? // should not happen, but fallback if the i18n instance is not available
-  ((o) => o), [e]), {
-    items: t,
-    selectedMenuItemId: n,
-    rootMenuItemId: u
-  } = N(), r = l(a, t, m === "ONLY_TOP" ? A : void 0);
-  return p(() => {
-    var o;
-    !n && s === "/" && ((o = t[0]) != null && o.href) && i(t[0].href);
-  }, [s, t, i, n]), {
-    items: r,
-    selectedMenuItemId: n,
-    rootMenuItemId: u
+    pathname
+  } = useLocation();
+  const {
+    navigationMode
+  } = useHvAppShellConfig();
+  const {
+    navigate
+  } = useHvNavigation();
+  const {
+    i18n
+  } = useContext(HvAppShellRuntimeContext) ?? {};
+  const tConfig = useMemo(() => i18n?.getFixedT(i18n.language, CONFIG_TRANSLATIONS_NAMESPACE) ?? // should not happen, but fallback if the i18n instance is not available
+  ((l) => l), [i18n]);
+  const {
+    items,
+    selectedMenuItemId,
+    rootMenuItemId
+  } = useHvMenuItems();
+  const navigationMenuItemsTmp = createNavigationMenuItems(tConfig, items, navigationMode === "ONLY_TOP" ? MAX_TOP_MENU_DEPTH : void 0);
+  useEffect(() => {
+    if (!selectedMenuItemId && pathname === "/" && items[0]?.href) {
+      navigate(items[0].href);
+    }
+  }, [pathname, items, navigate, selectedMenuItemId]);
+  return {
+    items: navigationMenuItemsTmp,
+    selectedMenuItemId,
+    rootMenuItemId
   };
 };
 export {
-  H as default
+  useNavigationMenuItems as default
 };
-//# sourceMappingURL=useNavigationMenuItems.js.map

package/dist/esm/lib/hooks/useNotificationsEventListener.js

@@ -1,45 +1,55 @@
-import { useHvSnackbar as f } from "@hitachivantara/uikit-react-core";
-import u from "../../providers/hooks/useBannerContext.js";
-const k = () => {
+import { useHvSnackbar } from "@hitachivantara/uikit-react-core";
+import useBannerContext from "../../providers/hooks/useBannerContext.js";
+const useNotificationsEventListener = () => {
   const {
-    enqueueSnackbar: o
-  } = f(), {
-    show: s
-  } = u(), i = (a) => {
+    enqueueSnackbar
+  } = useHvSnackbar();
+  const {
+    show
+  } = useBannerContext();
+  const handleCustomEventSnackbar = (notification) => {
     const {
-      message: n,
-      variant: r,
-      actions: t,
-      actionsCallback: l
-    } = a;
-    let e;
-    t && (e = {
-      action: Array.isArray(t) ? t[0] : t,
-      actionCallback: l
-    }), n && o(n, {
-      variant: r ?? "default",
-      snackbarContentProps: e
-    });
-  }, c = (a) => {
-    a.message && s(a);
+      message,
+      variant,
+      actions,
+      actionsCallback
+    } = notification;
+    let snackbarContentProps;
+    if (actions) {
+      snackbarContentProps = {
+        action: Array.isArray(actions) ? actions[0] : actions,
+        actionCallback: actionsCallback
+      };
+    }
+    if (message) {
+      enqueueSnackbar(message, {
+        variant: variant ?? "default",
+        snackbarContentProps
+      });
+    }
   };
-  return {
-    handleNotificationEvent: (a) => {
-      const n = a.detail;
-      switch (n.type) {
-        case "snackbar":
-          i(n);
-          break;
-        case "banner":
-          c(n);
-          break;
-        default:
-          console.warn("Invalid notification type", n.type);
-      }
+  const handleCustomEventBanner = (notification) => {
+    if (notification.message) {
+      show(notification);
     }
   };
+  const handleNotificationEvent = (event) => {
+    const notificationEvent = event.detail;
+    switch (notificationEvent.type) {
+      case "snackbar":
+        handleCustomEventSnackbar(notificationEvent);
+        break;
+      case "banner":
+        handleCustomEventBanner(notificationEvent);
+        break;
+      default:
+        console.warn("Invalid notification type", notificationEvent.type);
+    }
+  };
+  return {
+    handleNotificationEvent
+  };
 };
 export {
-  k as default
+  useNotificationsEventListener as default
 };
-//# sourceMappingURL=useNotificationsEventListener.js.map

package/dist/esm/lib/hooks/useThemeEventListener.js

@@ -1,27 +1,32 @@
-import { useTheme as h } from "@hitachivantara/uikit-react-core";
-import m from "./useLocalStorage.js";
-const u = () => {
+import { useTheme } from "@hitachivantara/uikit-react-core";
+import useLocalStorage from "./useLocalStorage.js";
+const useThemeEventListener = () => {
   const {
-    selectedTheme: s,
-    changeTheme: d,
-    selectedMode: r,
-    colorModes: o
-  } = h(), {
-    setStoredValue: c
-  } = m("COLOR_MODE"), l = () => {
-    const e = (o.indexOf(r) + 1) % o.length;
-    return o[e];
+    selectedTheme,
+    changeTheme,
+    selectedMode,
+    colorModes
+  } = useTheme();
+  const {
+    setStoredValue
+  } = useLocalStorage("COLOR_MODE");
+  const getNextColorMode = () => {
+    const index = colorModes.indexOf(selectedMode);
+    const nextIndex = (index + 1) % colorModes.length;
+    return colorModes[nextIndex];
+  };
+  const handleThemeEvent = (event) => {
+    const {
+      colorMode
+    } = event.detail;
+    const newColorMode = !colorMode || colorModes.indexOf(colorMode) === -1 ? getNextColorMode() : colorMode;
+    changeTheme(selectedTheme, newColorMode);
+    setStoredValue(newColorMode);
   };
   return {
-    handleThemeEvent: (t) => {
-      const {
-        colorMode: e
-      } = t.detail, n = !e || o.indexOf(e) === -1 ? l() : e;
-      d(s, n), c(n);
-    }
+    handleThemeEvent
   };
 };
 export {
-  u as default
+  useThemeEventListener as default
 };
-//# sourceMappingURL=useThemeEventListener.js.map

package/dist/esm/lib/i18n/index.js

@@ -1,29 +1,33 @@
-import s from "i18next";
-import { initReactI18next as d } from "react-i18next";
-import u from "i18next-browser-languagedetector";
-import i from "./localization/en.json.js";
-import l from "./localization/pt.json.js";
-const t = "appShell", x = (e, n, r) => {
-  Object.entries(n).forEach((o) => {
-    const [a, c] = o;
-    e.addResourceBundle(a, r ?? t, c);
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import en from "./localization/en.json.js";
+import pt from "./localization/pt.json.js";
+const APP_SHELL_NAMESPACE = "appShell";
+const addResourceBundles = (i18nInstance, bundles, namespace) => {
+  Object.entries(bundles).forEach((entry) => {
+    const [key, value] = entry;
+    i18nInstance.addResourceBundle(key, namespace ?? APP_SHELL_NAMESPACE, value);
   });
-}, B = () => {
-  const e = s.createInstance();
-  return e.use(u).use(d).init({
-    defaultNS: t,
+};
+const createI18Next = () => {
+  const newInstance = i18next.createInstance();
+  newInstance.use(LanguageDetector).use(initReactI18next).init({
+    defaultNS: APP_SHELL_NAMESPACE,
     fallbackLng: "en",
     detection: {
       order: ["navigator"]
     },
     resources: {}
-  }), e.addResourceBundle("en", t, i), e.addResourceBundle("pt", t, l), {
-    i18n: e
+  });
+  newInstance.addResourceBundle("en", APP_SHELL_NAMESPACE, en);
+  newInstance.addResourceBundle("pt", APP_SHELL_NAMESPACE, pt);
+  return {
+    i18n: newInstance
   };
 };
 export {
-  t as APP_SHELL_NAMESPACE,
-  x as addResourceBundles,
-  B as default
+  APP_SHELL_NAMESPACE,
+  addResourceBundles,
+  createI18Next as default
 };
-//# sourceMappingURL=index.js.map

package/dist/esm/lib/i18n/localization/en.json.js

@@ -1,4 +1,4 @@
-const a = {
+const errors = {
   missing: {
     configuration: "Missing or incomplete configuration."
   },
@@ -13,7 +13,8 @@ const a = {
     image_description: "500 Generic error"
   },
   footer: "Click <navigate>here</navigate> to go back to the {{label}} page."
-}, e = {
+};
+const header = {
   helpUrl: {
     documentationLink: "Documentation link"
   },
@@ -28,28 +29,30 @@ const a = {
   colorModeSwitcher: {
     ariaLabel: "Switch color mode"
   }
-}, i = {
+};
+const verticalNavigation = {
   ariaLabelNavigationTree: "Vertical navigation",
   ariaLabelCollapse: "Collapse vertical navigation",
   ariaLabelExpand: "Expand vertical navigation",
   title: "Menu",
   ariaLabelSliderForwardButton: "Navigate to submenu",
   ariaLabelHeaderBackButton: "Back"
-}, o = {
+};
+const notifications = {
   banner: {
     close: "Close banner"
   }
-}, n = {
-  errors: a,
-  header: e,
-  verticalNavigation: i,
-  notifications: o
+};
+const en = {
+  errors,
+  header,
+  verticalNavigation,
+  notifications
 };
 export {
-  n as default,
-  a as errors,
-  e as header,
-  o as notifications,
-  i as verticalNavigation
+  en as default,
+  errors,
+  header,
+  notifications,
+  verticalNavigation
 };
-//# sourceMappingURL=en.json.js.map

package/dist/esm/lib/i18n/localization/pt.json.js

@@ -1,4 +1,4 @@
-const a = {
+const errors = {
   missing: {
     configuration: "Configuração em falta ou incompleta."
   },
@@ -13,7 +13,8 @@ const a = {
     image_description: "500 Erro genérico"
   },
   footer: "Carregue <navigate>aqui</navigate> para voltar à página {{label}}."
-}, e = {
+};
+const header = {
   helpUrl: {
     documentationLink: "Link de documentação"
   },
@@ -28,28 +29,30 @@ const a = {
   colorModeSwitcher: {
     ariaLabel: "Alternar modo de cor"
   }
-}, o = {
+};
+const verticalNavigation = {
   ariaLabelNavigationTree: "Navegação vertical",
   ariaLabelCollapse: "Recolher navegação vertical",
   ariaLabelExpand: "Expandir navegação vertical",
   title: "Menu",
   ariaLabelSliderForwardButton: "Navegar para submenu",
   ariaLabelHeaderBackButton: "Voltar"
-}, i = {
+};
+const notifications = {
   banner: {
     close: "Fechar barra de notificação"
   }
-}, r = {
-  errors: a,
-  header: e,
-  verticalNavigation: o,
-  notifications: i
+};
+const pt = {
+  errors,
+  header,
+  verticalNavigation,
+  notifications
 };
 export {
-  r as default,
-  a as errors,
-  e as header,
-  i as notifications,
-  o as verticalNavigation
+  pt as default,
+  errors,
+  header,
+  notifications,
+  verticalNavigation
 };
-//# sourceMappingURL=pt.json.js.map

package/dist/esm/lib/utils/CombinedProviders.js

@@ -1,18 +1,23 @@
-import { jsx as n } from "@emotion/react/jsx-runtime";
-import { useCallback as m } from "react";
-const u = ({
-  providers: e,
-  children: o
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useCallback } from "react";
+const CombinedProviders = ({
+  providers,
+  children: mainChildren
 }) => {
-  const i = m(({
-    children: t
+  const Combined = useCallback(({
+    children
   }) => {
-    let r = t;
-    return e && e.length > 0 && (r = e.reduceRight((l, c) => /* @__PURE__ */ n(c, { children: l }), t)), r;
-  }, [e]);
-  return /* @__PURE__ */ n(i, { children: o });
-}, a = u;
+    let result = children;
+    if (providers && providers.length > 0) {
+      result = providers.reduceRight((Acc, Curr) => {
+        return /* @__PURE__ */ jsx(Curr, { children: Acc });
+      }, children);
+    }
+    return result;
+  }, [providers]);
+  return /* @__PURE__ */ jsx(Combined, { children: mainChildren });
+};
+const CombinedProviders$1 = CombinedProviders;
 export {
-  a as default
+  CombinedProviders$1 as default
 };
-//# sourceMappingURL=CombinedProviders.js.map

package/dist/esm/lib/utils/basePathUtils.js

@@ -1,5 +1,6 @@
-const t = (e) => (e == null ? void 0 : e.baseUrl) ?? "/";
+const getBasePath = (config) => {
+  return config?.baseUrl ?? "/";
+};
 export {
-  t as default
+  getBasePath as default
 };
-//# sourceMappingURL=basePathUtils.js.map

package/dist/esm/lib/utils/documentUtil.js

@@ -1,9 +1,13 @@
-const a = (t) => {
-  const n = "app-shell-panel-container";
-  let e = document.getElementById(t ?? n);
-  return e || (e = document.createElement("div"), e.id = n, document.body.appendChild(e)), e;
+const createAppContainerElement = (id) => {
+  const panelContainerId = "app-shell-panel-container";
+  let panelContainerElement = document.getElementById(id ?? panelContainerId);
+  if (!panelContainerElement) {
+    panelContainerElement = document.createElement("div");
+    panelContainerElement.id = panelContainerId;
+    document.body.appendChild(panelContainerElement);
+  }
+  return panelContainerElement;
 };
 export {
-  a as default
+  createAppContainerElement as default
 };
-//# sourceMappingURL=documentUtil.js.map

package/dist/esm/lib/utils/navigationUtil.js

@@ -1,41 +1,68 @@
-import { jsx as a } from "@emotion/react/jsx-runtime";
-import f from "../../components/IconUiKit/index.js";
-const l = (e, t, n) => n !== void 0 && n <= 0 ? [] : (t == null ? void 0 : t.reduce((r, o) => {
-  var i;
-  const d = n !== void 0 ? n - 1 : void 0, s = {
-    ...o,
-    icon: o.icon ? /* @__PURE__ */ a(f, { name: ((i = o.icon) == null ? void 0 : i.name) || "" }) : null,
-    data: o.data ? l(e, o.data, d) : void 0
-  };
-  return r.push(s), r;
-}, [])) ?? [], c = (e, t) => {
-  let n = null;
-  return e.some((r) => {
+import { jsx } from "@emotion/react/jsx-runtime";
+import IconUiKit from "../../components/IconUiKit/index.js";
+const createNavigationMenuItems = (t, menuItems, maxDepth) => {
+  if (maxDepth !== void 0 && maxDepth <= 0) {
+    return [];
+  }
+  return menuItems?.reduce((accumulator, currentValue) => {
+    const updatedDepth = maxDepth !== void 0 ? maxDepth - 1 : void 0;
+    const navItem = {
+      ...currentValue,
+      icon: currentValue.icon ? /* @__PURE__ */ jsx(IconUiKit, { name: currentValue.icon?.name || "" }) : null,
+      data: currentValue.data ? createNavigationMenuItems(t, currentValue.data, updatedDepth) : void 0
+    };
+    accumulator.push(navItem);
+    return accumulator;
+  }, []) ?? [];
+};
+const findItemById = (data, itemId) => {
+  let foundItem = null;
+  data.some((obj) => {
     const {
-      id: o,
-      data: d
-    } = r;
-    return o === t ? (n = r, !0) : d && d.length > 0 ? (n = c(d, t), n !== null) : !1;
-  }), n;
-}, h = (e) => {
-  const t = e.split("/");
-  let n;
-  return t[0].startsWith("@") ? n = `${t[0]}/${t[1]}` : [n] = t, n;
-}, p = (e) => e.map((t) => {
-  const {
-    href: n,
-    data: r,
-    ...o
-  } = t;
-  return r && r.length > 0 ? {
-    ...o,
-    data: p(r)
-  } : t;
-});
+      id: objId,
+      data: childData
+    } = obj;
+    if (objId === itemId) {
+      foundItem = obj;
+      return true;
+    }
+    if (childData && childData.length > 0) {
+      foundItem = findItemById(childData, itemId);
+      return foundItem !== null;
+    }
+    return false;
+  });
+  return foundItem;
+};
+const getAppIdFromBundle = (bundle) => {
+  const bundleTokens = bundle.split("/");
+  let appId;
+  if (bundleTokens[0].startsWith("@")) {
+    appId = `${bundleTokens[0]}/${bundleTokens[1]}`;
+  } else {
+    [appId] = bundleTokens;
+  }
+  return appId;
+};
+const removeHrefFromMenuItemsWithChildren = (items) => {
+  return items.map((item) => {
+    const {
+      href,
+      data,
+      ...rest
+    } = item;
+    if (data && data.length > 0) {
+      return {
+        ...rest,
+        data: removeHrefFromMenuItemsWithChildren(data)
+      };
+    }
+    return item;
+  });
+};
 export {
-  l as createNavigationMenuItems,
-  c as findItemById,
-  h as getAppIdFromBundle,
-  p as removeHrefFromMenuItemsWithChildren
+  createNavigationMenuItems,
+  findItemById,
+  getAppIdFromBundle,
+  removeHrefFromMenuItemsWithChildren
 };
-//# sourceMappingURL=navigationUtil.js.map

package/dist/esm/lib/utils/textUtil.js

@@ -1,5 +1,6 @@
-const t = (e, n) => e.includes(n);
+const includesString = (value, searchParam) => {
+  return value.includes(searchParam);
+};
 export {
-  t as default
+  includesString as default
 };
-//# sourceMappingURL=textUtil.js.map

package/dist/esm/pages/ErrorPage/ErrorPage.js

@@ -1,30 +1,30 @@
-import { jsxs as t, jsx as r } from "@emotion/react/jsx-runtime";
-import { HvTypography as a } from "@hitachivantara/uikit-react-core";
-import d from "../../providers/hooks/useNavigationContext.js";
-import { StyledErrorPage as g, StyledTitleWrapper as c, StyledImageWrapper as f } from "./styles.js";
-import u from "./Footer/Footer.js";
-const h = ({
-  code: e = void 0,
-  title: i,
-  background: l,
-  backgroundLabel: m,
-  fullPage: n = !1,
-  includeFooter: p = !0
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { HvTypography } from "@hitachivantara/uikit-react-core";
+import useNavigationContext from "../../providers/hooks/useNavigationContext.js";
+import { StyledErrorPage, StyledTitleWrapper, StyledImageWrapper } from "./styles.js";
+import Footer from "./Footer/Footer.js";
+const ErrorPage = ({
+  code = void 0,
+  title,
+  background,
+  backgroundLabel,
+  fullPage = false,
+  includeFooter = true
 }) => {
   const {
-    isCompactMode: o,
-    showHeaderSubMenu: s
-  } = d();
-  return /* @__PURE__ */ t(g, { showHeaderSubMenu: s, isCompactMode: o, fullPage: n, children: [
-    /* @__PURE__ */ t(c, { children: [
-      e && /* @__PURE__ */ r(a, { variant: "title1", children: e }),
-      /* @__PURE__ */ r(a, { variant: o ? "xsTitle" : "display", children: i })
+    isCompactMode,
+    showHeaderSubMenu
+  } = useNavigationContext();
+  return /* @__PURE__ */ jsxs(StyledErrorPage, { showHeaderSubMenu, isCompactMode, fullPage, children: [
+    /* @__PURE__ */ jsxs(StyledTitleWrapper, { children: [
+      code && /* @__PURE__ */ jsx(HvTypography, { variant: "title1", children: code }),
+      /* @__PURE__ */ jsx(HvTypography, { variant: isCompactMode ? "xsTitle" : "display", children: title })
     ] }),
-    /* @__PURE__ */ r(f, { backgroundImage: l, role: "img", "aria-label": m }),
-    p && /* @__PURE__ */ r(u, {})
+    /* @__PURE__ */ jsx(StyledImageWrapper, { backgroundImage: background, role: "img", "aria-label": backgroundLabel }),
+    includeFooter && /* @__PURE__ */ jsx(Footer, {})
   ] });
-}, E = h;
+};
+const ErrorPage$1 = ErrorPage;
 export {
-  E as default
+  ErrorPage$1 as default
 };
-//# sourceMappingURL=ErrorPage.js.map