@hitachivantara/app-shell-ui 1.9.0 → 1.10.0

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

@@ -1,23 +1,20 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { memo, useState, useEffect, lazy, Suspense } from "react";
-const DynamicAction = ({
-  bundle,
-  ...others
-}) => {
+const DynamicAction = ({ bundle, ...others }) => {
   const [loadError, setLoadError] = useState(null);
   useEffect(() => {
     setLoadError(null);
   }, [bundle]);
-  const Action = lazy(() => import(
-    /* @vite-ignore */
-    bundle
-  ).catch((error) => {
-    console.error(error);
-    setLoadError(error);
-    return {
-      default: () => null
-    };
-  }));
+  const Action = lazy(
+    () => import(
+      /* @vite-ignore */
+      bundle
+    ).catch((error) => {
+      console.error(error);
+      setLoadError(error);
+      return { default: () => null };
+    })
+  );
   return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: !loadError && /* @__PURE__ */ jsx(Action, { ...others }) });
 };
 const DynamicAction$1 = memo(DynamicAction);

package/dist/esm/components/layout/Header/HeaderActions/HeaderActions.mjs

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { useHvAppShellConfig } from "@hitachivantara/app-shell-shared";
+import { HvHeaderActions } from "@hitachivantara/uikit-react-core";
+import DynamicAction from "./DynamicAction.mjs";
+import InternalAction, { internalActions } from "./InternalActions/InternalAction/InternalAction.mjs";
+const HeaderActions = () => {
+  const { header } = useHvAppShellConfig();
+  return /* @__PURE__ */ jsx(HvHeaderActions, { children: header?.actions.map((action, index) => {
+    const headerActionKey = `${action.bundle}${index}`;
+    const Component = internalActions.find(
+      (a) => a.bundle === action.bundle
+    ) ? InternalAction : DynamicAction;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        bundle: action.bundle,
+        ...action.config
+      },
+      headerActionKey
+    );
+  }) });
+};
+export {
+  HeaderActions as default
+};

package/dist/esm/components/layout/Header/HeaderActions/InternalActions/AppSwitcherToggle/AppSwitcherToggle.mjs

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useId } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { ClickAwayListener } from "@mui/material";
+import { CONFIG_TRANSLATIONS_NAMESPACE, useHvAppShellConfig } from "@hitachivantara/app-shell-shared";
+import { HvIconButton, theme, HvAppSwitcher, HvTypography } from "@hitachivantara/uikit-react-core";
+import createAppContainerElement from "../../../../../../utils/documentUtil.mjs";
+import IconUiKit from "../../../../../IconUiKit/index.mjs";
+import StyledIconWrapper from "../../../styles.mjs";
+import StyledAppShellPanelWrapper from "./styles.mjs";
+import BrandLogo from "../../../../BrandLogo/BrandLogo.mjs";
+const AppSwitcherToggle = ({
+  title,
+  apps,
+  showLogo = false
+}) => {
+  const { t } = useTranslation(void 0, { keyPrefix: "header.appSwitcher" });
+  const { t: tConfig } = useTranslation(CONFIG_TRANSLATIONS_NAMESPACE);
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+  const appSwitcherPanelId = useId();
+  const appShellConfig = useHvAppShellConfig();
+  const createAppsList = () => {
+    return apps ? apps.map((app) => ({
+      name: tConfig(app.label),
+      description: app.description ? tConfig(app.description).toString() : void 0,
+      url: app.url.includes(":") ? app.url : tConfig(app.url).toString(),
+      target: app.target === "NEW" ? "_blank" : "_top",
+      iconElement: app.icon && /* @__PURE__ */ jsx(IconUiKit, { name: app.icon.name })
+    })) : [];
+  };
+  const closeAppSwitcherPanel = () => {
+    setIsPanelOpen(false);
+  };
+  const handleAppSwitcherPanelItemClicked = () => {
+    closeAppSwitcherPanel();
+  };
+  const handleAppSwitcherButtonClick = () => {
+    setIsPanelOpen(!isPanelOpen);
+  };
+  if (!apps || apps.length === 0) {
+    return null;
+  }
+  const finalTitle = title ? tConfig(title) : t("title");
+  return /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: closeAppSwitcherPanel, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", margin: 0 }, children: [
+    /* @__PURE__ */ jsxs(
+      HvIconButton,
+      {
+        title: finalTitle,
+        "aria-label": finalTitle,
+        "aria-expanded": isPanelOpen,
+        onClick: handleAppSwitcherButtonClick,
+        ...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 }) })
+        ]
+      }
+    ),
+    isPanelOpen && createPortal(
+      /* @__PURE__ */ jsx(
+        StyledAppShellPanelWrapper,
+        {
+          id: appSwitcherPanelId,
+          role: "region",
+          "aria-label": t("ariaLabel"),
+          children: /* @__PURE__ */ jsx(
+            HvAppSwitcher,
+            {
+              applications: createAppsList(),
+              onActionClickedCallback: handleAppSwitcherPanelItemClicked,
+              header: /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: finalTitle })
+            }
+          )
+        }
+      ),
+      createAppContainerElement()
+    )
+  ] }) });
+};
+export {
+  AppSwitcherToggle as default
+};

package/dist/esm/components/layout/Header/HeaderActions/InternalActions/AppSwitcherToggle/index.mjs

@@ -0,0 +1,4 @@
+import AppSwitcherToggle from "./AppSwitcherToggle.mjs";
+export {
+  AppSwitcherToggle as default
+};

package/dist/esm/components/layout/Header/HeaderActions/InternalActions/AppSwitcherToggle/styles.mjs

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { theme } from "@hitachivantara/uikit-react-core";
+const StyledAppShellPanelWrapper = styled("div")({
+  position: "fixed",
+  maxHeight: `calc(100vh - ${theme.header.height})`,
+  top: theme.header.height,
+  right: 0,
+  display: "flex",
+  boxShadow: theme.colors.shadow,
+  zIndex: `calc(${theme.zIndices.banner} - 1)`
+});
+export {
+  StyledAppShellPanelWrapper as default
+};

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

@@ -1,23 +1,22 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import { useTheme, HvIconButton } from "@hitachivantara/uikit-react-core";
 import { HvAppShellEventThemeTrigger } from "@hitachivantara/app-shell-events";
-import IconUiKit from "../../../../../IconUiKit/index.js";
+import { useTheme, HvIconButton } from "@hitachivantara/uikit-react-core";
+import IconUiKit from "../../../../IconUiKit/index.mjs";
 const ColorModeSwitcher = () => {
-  const {
-    t
-  } = useTranslation(void 0, {
+  const { t } = useTranslation(void 0, {
     keyPrefix: "header.colorModeSwitcher"
   });
-  const {
-    colorModes
-  } = useTheme();
+  const { colorModes } = useTheme();
   const changeColorModeHandler = () => {
-    const customEvent = new CustomEvent(HvAppShellEventThemeTrigger, {
-      detail: {
-        colorMode: void 0
+    const customEvent = new CustomEvent(
+      HvAppShellEventThemeTrigger,
+      {
+        detail: {
+          colorMode: void 0
+        }
       }
-    });
+    );
     globalThis.dispatchEvent(customEvent);
   };
   return colorModes.length > 1 ? /* @__PURE__ */ jsx(HvIconButton, { onClick: changeColorModeHandler, title: t("ariaLabel"), children: /* @__PURE__ */ jsx(IconUiKit, { name: "ThemeSwitcher" }) }) : null;

package/dist/esm/components/layout/Header/HeaderActions/InternalActions/HelpButton/HelpButton.mjs

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { CONFIG_TRANSLATIONS_NAMESPACE } from "@hitachivantara/app-shell-shared";
+import { HvIconButton } from "@hitachivantara/uikit-react-core";
+import IconUiKit from "../../../../../IconUiKit/index.mjs";
+const HelpButton = ({ url, description }) => {
+  const { t } = useTranslation(void 0, { keyPrefix: "header.helpUrl" });
+  const { t: tConfig } = useTranslation(CONFIG_TRANSLATIONS_NAMESPACE);
+  if (!url) {
+    return null;
+  }
+  const finalUrl = url.includes(":") ? url : tConfig(url);
+  const finalDescription = description ? tConfig(description) : t("documentationLink");
+  return /* @__PURE__ */ jsx(
+    HvIconButton,
+    {
+      component: "a",
+      href: finalUrl,
+      target: "_blank",
+      title: finalDescription,
+      rel: "noopener,noreferrer",
+      children: /* @__PURE__ */ jsx(IconUiKit, { name: "Help" })
+    }
+  );
+};
+export {
+  HelpButton as default
+};

package/dist/esm/components/layout/Header/HeaderActions/InternalActions/HelpButton/index.mjs

@@ -0,0 +1,4 @@
+import HelpButton from "./HelpButton.mjs";
+export {
+  HelpButton as default
+};

package/dist/esm/components/layout/Header/HeaderActions/InternalActions/InternalAction/InternalAction.mjs

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, lazy, Suspense } from "react";
+const internalActions = [
+  {
+    bundle: "@hv/theming-client/colorModeSwitcher.js",
+    component: () => import("../ColorModeSwitcher.mjs").then((module) => ({
+      default: module.default
+    }))
+  },
+  {
+    bundle: "@hv/help-client/button.js",
+    component: () => import("../HelpButton/index.mjs").then((module) => ({
+      default: module.default
+    }))
+  },
+  {
+    bundle: "@hv/app-switcher-client/toggle.js",
+    component: () => import("../AppSwitcherToggle/index.mjs").then((module) => ({
+      default: module.default
+    }))
+  }
+];
+const InternalAction = ({ bundle, ...others }) => {
+  const { component } = internalActions.find(
+    (internalAction) => internalAction.bundle === bundle
+  ) ?? {};
+  if (!component) {
+    return null;
+  }
+  const Action = lazy(
+    () => component()
+  );
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Action, { ...others }) });
+};
+const InternalAction$1 = memo(InternalAction);
+export {
+  InternalAction$1 as default,
+  internalActions
+};

package/dist/esm/components/layout/Header/HeaderActions/index.mjs

@@ -0,0 +1,4 @@
+import HeaderActions from "./HeaderActions.mjs";
+export {
+  HeaderActions as default
+};

package/dist/esm/components/layout/Header/styles.mjs

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+const StyledIconWrapper = styled.div({
+  height: 20,
+  svg: {
+    height: "inherit"
+  }
+});
+export {
+  StyledIconWrapper as default
+};

package/dist/esm/components/layout/Loading/Loading.mjs

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { StyledLoading } from "./styles.mjs";
+const Loading = ({ loadingLabel }) => {
+  return /* @__PURE__ */ jsx(StyledLoading, { label: loadingLabel });
+};
+export {
+  Loading as default
+};

package/dist/esm/components/layout/Loading/styles.mjs

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { HvLoading } from "@hitachivantara/uikit-react-core";
+const StyledLoading = styled(HvLoading)({
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  height: "100%"
+});
+styled("main")({
+  flex: 1
+});
+export {
+  StyledLoading
+};

package/dist/esm/components/layout/Main/Main.mjs

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { css } from "@emotion/css";
+import { useTheme, theme } from "@hitachivantara/uikit-react-core";
+import { useLayoutContext } from "../../../providers/LayoutProvider.mjs";
+import { useNavigationContext } from "../../../providers/NavigationProvider.mjs";
+import { StyledContainer, StyledMain } from "./styles.mjs";
+import VerticalNavigation from "../VerticalNavigation/VerticalNavigation.mjs";
+const Main = ({ children }) => {
+  const {
+    hasVerticalNavigation,
+    verticalNavigationMode,
+    showHeaderSubMenu,
+    isCompactMode,
+    switchVerticalNavigationMode
+  } = useNavigationContext();
+  const { bannerMaxHeight, verticalNavigationWidth } = useLayoutContext();
+  const { activeTheme } = useTheme();
+  const isPentahoTheme = activeTheme?.name === "pentahoPlus";
+  return /* @__PURE__ */ jsxs(
+    StyledContainer,
+    {
+      style: {
+        ["--vNavWidth"]: `${verticalNavigationWidth}px`,
+        ["--headerHeight"]: showHeaderSubMenu && !isCompactMode ? `calc(${theme.header.height} + ${theme.header.secondLevelHeight})` : theme.header.height
+      },
+      children: [
+        hasVerticalNavigation && verticalNavigationMode !== "CLOSED" && /* @__PURE__ */ jsx(
+          VerticalNavigation,
+          {
+            onClickAway: isCompactMode ? switchVerticalNavigationMode : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StyledMain,
+          {
+            className: isPentahoTheme ? void 0 : css({
+              paddingTop: bannerMaxHeight ? `calc(${bannerMaxHeight}px + ${theme.space.xs})` : void 0
+            }),
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Main as default
+};

package/dist/esm/components/layout/Main/styles.mjs

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+const StyledContainer = styled.div({
+  display: "flex",
+  minHeight: "100vh",
+  paddingTop: "var(--headerHeight)"
+});
+const StyledMain = styled.main({
+  flex: 1,
+  width: "calc(100% - var(--vNavWidth))"
+});
+export {
+  StyledContainer,
+  StyledMain
+};

package/dist/esm/components/layout/VerticalNavigation/NavigationCollapse.mjs

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { cx } from "@emotion/css";
+import { HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
+import { Start, End } from "@hitachivantara/uikit-react-icons";
+import { classes } from "./styles.mjs";
+const NavigationCollapse = ({ onClick, isOpen }) => {
+  const { t } = useTranslation(void 0, { keyPrefix: "verticalNavigation" });
+  return /* @__PURE__ */ jsxs("div", { className: classes.navigationCollapse, children: [
+    isOpen && /* @__PURE__ */ jsx(
+      HvTypography,
+      {
+        variant: "label",
+        className: classes.navigationCollapseText,
+        children: t("collapseAction")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HvButton,
+      {
+        className: cx(classes.navigationCollapseButton, {
+          [classes.navigationCollapseAlignRight]: isOpen
+        }),
+        "aria-label": isOpen ? t("ariaLabelCollapse") : t("ariaLabelExpand"),
+        icon: true,
+        onClick,
+        children: isOpen ? /* @__PURE__ */ jsx(Start, {}) : /* @__PURE__ */ jsx(End, {})
+      }
+    )
+  ] });
+};
+export {
+  NavigationCollapse
+};

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

@@ -1,11 +1,9 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useHvAppShellConfig } 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
-}) => {
+import { classes } from "./styles.mjs";
+import BrandLogo from "../BrandLogo/BrandLogo.mjs";
+const NavigationHeader = ({ isOpen }) => {
   const appShellConfig = useHvAppShellConfig();
   return /* @__PURE__ */ jsxs("div", { className: classes.navigationHeader, children: [
     /* @__PURE__ */ jsx(AppSwitcher, {}),

package/dist/esm/components/layout/VerticalNavigation/VerticalNavigation.mjs

@@ -0,0 +1,98 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { cx } from "@emotion/css";
+import { useHvNavigation } from "@hitachivantara/app-shell-navigation";
+import { useTheme, HvVerticalNavigation, HvVerticalNavigationHeader, HvVerticalNavigationTree, HvVerticalNavigationActions } from "@hitachivantara/uikit-react-core";
+import { useResizeObserver } from "../../../hooks/useResizeObserver.mjs";
+import { useLayoutContext } from "../../../providers/LayoutProvider.mjs";
+import { useNavigationContext } from "../../../providers/NavigationProvider.mjs";
+import withClickAwayListener from "../../hoc/withClickAwayListener.mjs";
+import { NavigationCollapse } from "./NavigationCollapse.mjs";
+import { NavigationHeader } from "./NavigationHeader.mjs";
+import { classes } from "./styles.mjs";
+const VerticalNavigation = () => {
+  const { t } = useTranslation(void 0, { keyPrefix: "verticalNavigation" });
+  const {
+    selectedMenuItemId,
+    rootMenuItemId,
+    verticalNavigationItems,
+    isCompactMode,
+    verticalNavigationMode,
+    switchVerticalNavigationMode
+  } = useNavigationContext();
+  const { setVerticalNavigationWidth } = useLayoutContext();
+  const { navigate } = useHvNavigation();
+  const { activeTheme } = useTheme();
+  const ref = useRef(null);
+  const open = verticalNavigationMode === "EXPANDED";
+  const isPentahoTheme = activeTheme?.name === "pentahoPlus";
+  const changeHandler = (event, selectedItem) => {
+    event.preventDefault();
+    if (selectedItem.href) {
+      navigate(selectedItem.href, {
+        state: { selectedItemId: selectedItem.id }
+      });
+      if (isCompactMode) {
+        switchVerticalNavigationMode();
+      }
+    }
+  };
+  useResizeObserver(ref, (width) => {
+    setVerticalNavigationWidth(isCompactMode ? 0 : width);
+  });
+  return /* @__PURE__ */ jsxs(
+    HvVerticalNavigation,
+    {
+      ref,
+      className: cx(classes.root, {
+        [classes.pentaho]: isPentahoTheme && !isCompactMode,
+        [classes.compact]: isCompactMode
+      }),
+      open,
+      useIcons: true,
+      slider: isCompactMode,
+      children: [
+        isPentahoTheme ? /* @__PURE__ */ jsx(NavigationHeader, { isOpen: open }) : /* @__PURE__ */ jsx(
+          HvVerticalNavigationHeader,
+          {
+            title: t("title"),
+            onCollapseButtonClick: !isCompactMode ? switchVerticalNavigationMode : void 0,
+            collapseButtonProps: {
+              "aria-label": t(open ? "ariaLabelCollapse" : "ariaLabelExpand"),
+              "aria-expanded": open
+            },
+            backButtonProps: {
+              "aria-label": t("ariaLabelHeaderBackButton")
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          HvVerticalNavigationTree,
+          {
+            mode: "navigation",
+            collapsible: true,
+            "aria-label": t("ariaLabelNavigationTree"),
+            selected: selectedMenuItemId,
+            onChange: changeHandler,
+            data: verticalNavigationItems,
+            classes: { navigationPopup: classes.popup },
+            sliderForwardButtonAriaLabel: t("ariaLabelSliderForwardButton")
+          },
+          rootMenuItemId
+        ),
+        isPentahoTheme ? /* @__PURE__ */ jsx(
+          NavigationCollapse,
+          {
+            onClick: () => switchVerticalNavigationMode(),
+            isOpen: open
+          }
+        ) : /* @__PURE__ */ jsx(HvVerticalNavigationActions, {})
+      ]
+    }
+  );
+};
+const VerticalNavigation$1 = withClickAwayListener(VerticalNavigation);
+export {
+  VerticalNavigation$1 as default
+};

package/dist/esm/components/layout/VerticalNavigation/styles.mjs

@@ -0,0 +1,55 @@
+import { css } from "@emotion/css";
+import { theme, verticalNavigationTreeClasses } from "@hitachivantara/uikit-react-core";
+const classes = {
+  root: css({
+    height: `calc(100vh - ${theme.header.height})`,
+    top: theme.header.height,
+    zIndex: theme.zIndices.overlay,
+    position: "sticky"
+  }),
+  /** full-height Vertical Navigation */
+  pentaho: css({
+    height: "100dvh",
+    marginTop: `calc(-1 * var(--headerHeight))`,
+    top: 0
+  }),
+  compact: css({
+    position: "fixed",
+    top: theme.header.height
+  }),
+  popup: css({
+    maxHeight: `calc(100vh - ${theme.header.height})`,
+    overflowY: "auto",
+    boxShadow: theme.colors.shadow,
+    [`& .${verticalNavigationTreeClasses.popup}`]: { boxShadow: "none" }
+  }),
+  navigationHeader: css({
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    "& svg path": {
+      fill: theme.colors.base_light
+    },
+    gap: theme.space.xs
+  }),
+  navigationCollapse: css({
+    position: "absolute",
+    bottom: 0,
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center"
+  }),
+  navigationCollapseButton: css({
+    color: "inherit"
+  }),
+  navigationCollapseAlignRight: css({
+    marginLeft: "auto"
+  }),
+  navigationCollapseText: css({
+    color: "inherit"
+  })
+};
+export {
+  classes
+};

package/dist/esm/{lib/hooks/useClearLocationState.js → hooks/useClearLocationState.mjs}

@@ -3,16 +3,12 @@ import { useLocation, useBeforeUnload } from "react-router-dom";
 import { useHvNavigation } from "@hitachivantara/app-shell-navigation";
 const useClearLocationState = () => {
   const location = useLocation();
-  const {
-    navigate
-  } = useHvNavigation();
-  useBeforeUnload(useCallback(() => {
-    navigate({
-      ...location
-    }, {
-      replace: true
-    });
-  }, [location, navigate]));
+  const { navigate } = useHvNavigation();
+  useBeforeUnload(
+    useCallback(() => {
+      navigate({ ...location }, { replace: true });
+    }, [location, navigate])
+  );
 };
 export {
   useClearLocationState as default

package/dist/esm/hooks/useCustomEventListener.mjs

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { HvAppShellEventNotificationTrigger, HvAppShellEventThemeTrigger } from "@hitachivantara/app-shell-events";
+import useNotificationsEventListener from "./useNotificationsEventListener.mjs";
+import useThemeEventListener from "./useThemeEventListener.mjs";
+const useCustomEventListener = () => {
+  const { handleNotificationEvent } = useNotificationsEventListener();
+  const { handleThemeEvent } = useThemeEventListener();
+  useEffect(() => {
+    globalThis.addEventListener(
+      HvAppShellEventNotificationTrigger,
+      handleNotificationEvent
+    );
+    globalThis.addEventListener(
+      HvAppShellEventThemeTrigger,
+      handleThemeEvent
+    );
+    return () => {
+      globalThis.removeEventListener(
+        HvAppShellEventNotificationTrigger,
+        handleNotificationEvent
+      );
+      globalThis.removeEventListener(
+        HvAppShellEventThemeTrigger,
+        handleThemeEvent
+      );
+    };
+  }, [handleNotificationEvent, handleThemeEvent]);
+};
+export {
+  useCustomEventListener as default
+};

package/dist/esm/{lib/hooks/useLocalStorage.js → hooks/useLocalStorage.mjs}

@@ -20,10 +20,7 @@ const useLocalStorage = (storageKey) => {
       window.removeEventListener("storage", handleStorageChange);
     };
   }, [key]);
-  return {
-    value,
-    setStoredValue
-  };
+  return { value, setStoredValue };
 };
 export {
   LOCAL_STORAGE_KEYS,