@hitachivantara/app-shell-ui 1.5.0 → 1.6.1

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

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

@@ -1,38 +1,54 @@
-import { jsx as r } from "@emotion/react/jsx-runtime";
-import { useTranslation as u, Trans as h } from "react-i18next";
-import { useErrorBoundary as v } from "react-error-boundary";
-import { HvTypography as i } from "@hitachivantara/uikit-react-core";
-import { useHvAppShellConfig as g } from "@hitachivantara/app-shell-shared";
-import { useHvNavigation as d } from "@hitachivantara/app-shell-navigation";
-import y from "../../../providers/hooks/useNavigationContext.js";
-import b from "./styles.js";
-const F = () => {
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useTranslation, Trans } from "react-i18next";
+import { useErrorBoundary } from "react-error-boundary";
+import { HvTypography } from "@hitachivantara/uikit-react-core";
+import { useHvAppShellConfig } from "@hitachivantara/app-shell-shared";
+import { useHvNavigation } from "@hitachivantara/app-shell-navigation";
+import useNavigationContext from "../../../providers/hooks/useNavigationContext.js";
+import StyledFooterWrapper from "./styles.js";
+const Footer = () => {
   const {
-    t: a
-  } = u(), {
-    navigate: s
-  } = d(), {
-    navigationMode: l
-  } = g(), {
-    resetBoundary: m
-  } = v(), {
-    items: e,
-    verticalNavigationItems: n,
-    isCompactMode: p
-  } = y(), t = !p && l !== "ONLY_LEFT" ? e.length > 0 ? e[0] : null : n.length > 0 ? n[0] : null, c = (f) => {
-    if (f.preventDefault(), t != null && t.href) {
-      m();
-      let o = t.href;
-      o.startsWith(".") && (o = o.substring(1)), s(o);
+    t
+  } = useTranslation();
+  const {
+    navigate
+  } = useHvNavigation();
+  const {
+    navigationMode
+  } = useHvAppShellConfig();
+  const {
+    resetBoundary
+  } = useErrorBoundary();
+  const {
+    items,
+    verticalNavigationItems,
+    isCompactMode
+  } = useNavigationContext();
+  const getFirstMenuItem = () => {
+    if (!isCompactMode && navigationMode !== "ONLY_LEFT") {
+      return items.length > 0 ? items[0] : null;
     }
+    return verticalNavigationItems.length > 0 ? verticalNavigationItems[0] : null;
   };
-  return t && /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(i, { variant: "body", children: /* @__PURE__ */ r(h, { t: a, i18nKey: "errors.footer", values: {
-    label: t.label
+  const firstMenuItem = getFirstMenuItem();
+  const handleClick = (event) => {
+    event.preventDefault();
+    if (firstMenuItem?.href) {
+      resetBoundary();
+      let path = firstMenuItem.href;
+      if (path.startsWith(".")) {
+        path = path.substring(1);
+      }
+      navigate(path);
+    }
+  };
+  return firstMenuItem && /* @__PURE__ */ jsx(StyledFooterWrapper, { children: /* @__PURE__ */ jsx(HvTypography, { variant: "body", children: /* @__PURE__ */ jsx(Trans, { t, i18nKey: "errors.footer", values: {
+    label: firstMenuItem.label
   }, components: {
-    navigate: /* @__PURE__ */ r(i, { link: !0, component: "a", href: t.href, variant: "label", onClick: c, children: t.label })
+    navigate: /* @__PURE__ */ jsx(HvTypography, { link: true, component: "a", href: firstMenuItem.href, variant: "label", onClick: handleClick, children: firstMenuItem.label })
   } }) }) });
-}, I = F;
+};
+const Footer$1 = Footer;
 export {
-  I as default
+  Footer$1 as default
 };
-//# sourceMappingURL=Footer.js.map

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

@@ -1,8 +1,8 @@
-import e from "@emotion/styled/base";
-function t() {
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const c = /* @__PURE__ */ e("div", process.env.NODE_ENV === "production" ? {
+const FooterWrapper = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1bsjpnp0"
 } : {
   target: "e1bsjpnp0",
@@ -14,10 +14,10 @@ const c = /* @__PURE__ */ e("div", process.env.NODE_ENV === "production" ? {
   name: "1azakc",
   styles: "text-align:center",
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9wYWdlcy9FcnJvclBhZ2UvRm9vdGVyL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFdUMiLCJmaWxlIjoiL19fdy9odi1hcHAtc2hlbGwvaHYtYXBwLXNoZWxsL2NsaWVudC9wYWNrYWdlcy9hcHAtc2hlbGwtdWkvc3JjL3BhZ2VzL0Vycm9yUGFnZS9Gb290ZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XHJcblxyXG5leHBvcnQgY29uc3QgRm9vdGVyV3JhcHBlciA9IHN0eWxlZC5kaXZgXHJcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG5gO1xyXG5cclxuZXhwb3J0IGRlZmF1bHQgRm9vdGVyV3JhcHBlcjtcclxuIl19 */",
-  toString: t
-}), a = c;
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledFooterWrapper = FooterWrapper;
 export {
-  c as FooterWrapper,
-  a as default
+  FooterWrapper,
+  StyledFooterWrapper as default
 };
-//# sourceMappingURL=styles.js.map