@hitachivantara/app-shell-ui 2.3.2 → 2.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/dist/components/AppShell/AppShell.js +16 -5
  2. package/dist/components/AppShell/AppShellContainer.js +75 -66
  3. package/dist/components/AppShell/AppShellRouter.js +98 -109
  4. package/dist/components/AppShellI18nProvider/AppShellI18nProvider.js +19 -25
  5. package/dist/components/AppShellProvider/AppShellProvider.js +84 -91
  6. package/dist/components/AppShellViewProvider/AppShellViewProvider.js +10 -7
  7. package/dist/components/ConfigIcon.js +13 -15
  8. package/dist/components/CustomHooksInitializer/CustomHooksInitializer.js +7 -7
  9. package/dist/components/GlobalStyles.js +11 -9
  10. package/dist/components/IconUiKit/IconUiKit.js +10 -8
  11. package/dist/components/InitErrorFallback/InitErrorFallback.js +31 -23
  12. package/dist/components/SnackbarProvider/SnackbarProvider.js +17 -20
  13. package/dist/components/layout/AppShellLayout.js +50 -65
  14. package/dist/components/layout/BrandLogo/BrandLogo.js +25 -35
  15. package/dist/components/layout/BrandLogo/logos.js +38 -55
  16. package/dist/components/layout/Header/Header.js +55 -74
  17. package/dist/components/layout/HeaderActions/AppSwitcherToggle/AppSwitcherToggle.js +66 -74
  18. package/dist/components/layout/HeaderActions/AppSwitcherToggle/styles.js +12 -12
  19. package/dist/components/layout/HeaderActions/ColorModeSwitcher.js +23 -26
  20. package/dist/components/layout/HeaderActions/DynamicAction.js +22 -21
  21. package/dist/components/layout/HeaderActions/HeaderActions.js +15 -22
  22. package/dist/components/layout/HeaderActions/HelpButton/HelpButton.js +22 -31
  23. package/dist/components/layout/HeaderActions/InternalAction/InternalAction.js +25 -36
  24. package/dist/components/layout/VerticalNavigation/NavigationCollapse.js +29 -34
  25. package/dist/components/layout/VerticalNavigation/NavigationHeader.js +18 -20
  26. package/dist/components/layout/VerticalNavigation/VerticalNavigation.js +96 -130
  27. package/dist/hooks/useClearLocationState.js +10 -12
  28. package/dist/hooks/useConditionsEvaluator.js +67 -81
  29. package/dist/hooks/useCustomEventListener.js +16 -28
  30. package/dist/hooks/useFilteredModel.js +30 -27
  31. package/dist/hooks/useLocalStorage.js +26 -26
  32. package/dist/hooks/useModelFromConfig.js +43 -39
  33. package/dist/hooks/useNavigationMenuItems.js +27 -30
  34. package/dist/hooks/useNotificationsEventListener.js +35 -42
  35. package/dist/hooks/useResizeObserver.js +13 -13
  36. package/dist/hooks/useThemeEventListener.js +17 -18
  37. package/dist/i18n/constants.js +5 -6
  38. package/dist/i18n/index.js +26 -20
  39. package/dist/i18n/useI18nInit.js +72 -66
  40. package/dist/index.js +4 -3
  41. package/dist/pages/ErrorPage/ErrorPage.js +33 -32
  42. package/dist/pages/ErrorPage/Footer.js +46 -55
  43. package/dist/pages/GenericError/CatServer.js +585 -569
  44. package/dist/pages/GenericError/GenericError.js +25 -26
  45. package/dist/pages/LoadingPage/LoadingPage.js +9 -17
  46. package/dist/pages/LoadingPage/index.js +4 -3
  47. package/dist/pages/NotFound/DogeSpace.js +505 -540
  48. package/dist/pages/NotFound/NotFound.js +17 -20
  49. package/dist/pages/NotFound/index.js +2 -4
  50. package/dist/pages/RootRoute.js +32 -19
  51. package/dist/providers/BannerProvider.js +98 -123
  52. package/dist/providers/LayoutProvider.js +26 -32
  53. package/dist/providers/NavigationProvider.js +96 -107
  54. package/dist/utils/CombinedProviders.js +12 -18
  55. package/dist/utils/documentUtil.js +12 -12
  56. package/dist/utils/filterModel.js +134 -170
  57. package/dist/utils/lazyImport.js +31 -36
  58. package/dist/utils/navigationUtil.js +68 -53
  59. package/dist/utils/processConfig.js +119 -153
  60. package/package.json +8 -8
  61. package/dist/components/IconUiKit/index.js +0 -6
  62. package/dist/pages/LoadingPage/styles.js +0 -30
@@ -1,24 +1,21 @@
1
- import { jsx } from "react/jsx-runtime";
1
+ import { ErrorPage } from "../ErrorPage/ErrorPage.js";
2
2
  import { lazy } from "react";
3
3
  import { useTranslation } from "react-i18next";
4
4
  import { useHvAppShellRuntimeContext } from "@hitachivantara/app-shell-shared";
5
- import { ErrorPage } from "../ErrorPage/ErrorPage.js";
6
- const DogeSpace = lazy(() => import("./DogeSpace.js"));
7
- const NotFound = () => {
8
- const { i18n } = useHvAppShellRuntimeContext();
9
- const { t } = useTranslation(void 0, {
10
- i18n,
11
- keyPrefix: "errors.notFound"
12
- });
13
- return /* @__PURE__ */ jsx(
14
- ErrorPage,
15
- {
16
- code: t("code"),
17
- title: t("title"),
18
- image: /* @__PURE__ */ jsx(DogeSpace, { title: t("image_description") })
19
- }
20
- );
21
- };
22
- export {
23
- NotFound as default
5
+ import { jsx } from "react/jsx-runtime";
6
+ //#region src/pages/NotFound/NotFound.tsx
7
+ var DogeSpace = lazy(() => import("./DogeSpace.js"));
8
+ var NotFound = () => {
9
+ const { i18n } = useHvAppShellRuntimeContext();
10
+ const { t } = useTranslation(void 0, {
11
+ i18n,
12
+ keyPrefix: "errors.notFound"
13
+ });
14
+ return /* @__PURE__ */ jsx(ErrorPage, {
15
+ code: t("code"),
16
+ title: t("title"),
17
+ image: /* @__PURE__ */ jsx(DogeSpace, { title: t("image_description") })
18
+ });
24
19
  };
20
+ //#endregion
21
+ export { NotFound as default };
@@ -1,4 +1,2 @@
1
- import { default as default2 } from "./NotFound.js";
2
- export {
3
- default2 as default
4
- };
1
+ import NotFound from "./NotFound.js";
2
+ export { NotFound as default };
@@ -1,24 +1,37 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ import { NavigationProvider } from "../providers/NavigationProvider.js";
2
+ import GenericError from "./GenericError/GenericError.js";
3
+ import CombinedProviders from "../utils/CombinedProviders.js";
4
+ import LoadingPage_default from "./LoadingPage/index.js";
5
+ import { BannerProvider } from "../providers/BannerProvider.js";
6
+ import CustomHooksInitializer from "../components/CustomHooksInitializer/CustomHooksInitializer.js";
7
+ import { HvAppShellLayout } from "../components/layout/AppShellLayout.js";
2
8
  import { Suspense } from "react";
3
9
  import { ErrorBoundary } from "react-error-boundary";
10
+ import { useHvAppShellCombinedProviders, useHvAppShellModel } from "@hitachivantara/app-shell-shared";
4
11
  import { Outlet } from "react-router-dom";
12
+ import { jsx, jsxs } from "react/jsx-runtime";
5
13
  import ServiceManagerProvider from "@hitachivantara/app-shell-services";
6
- import { useHvAppShellModel, useHvAppShellCombinedProviders } from "@hitachivantara/app-shell-shared";
7
- import { HvAppShellLayout } from "../components/layout/AppShellLayout.js";
8
- import { BannerProvider } from "../providers/BannerProvider.js";
9
- import { NavigationProvider } from "../providers/NavigationProvider.js";
10
- import CombinedProviders from "../utils/CombinedProviders.js";
11
- import LoadingPage from "./LoadingPage/LoadingPage.js";
12
- import CustomHooksInitializer from "../components/CustomHooksInitializer/CustomHooksInitializer.js";
13
- import GenericError from "./GenericError/GenericError.js";
14
- const RootRoute = () => {
15
- const { services } = useHvAppShellModel();
16
- const { providers } = useHvAppShellCombinedProviders();
17
- return /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(GenericError, {}), children: /* @__PURE__ */ jsx(ServiceManagerProvider, { config: { services }, children: /* @__PURE__ */ jsx(CombinedProviders, { providers, children: /* @__PURE__ */ jsx(NavigationProvider, { children: /* @__PURE__ */ jsxs(BannerProvider, { children: [
18
- /* @__PURE__ */ jsx(CustomHooksInitializer, {}),
19
- /* @__PURE__ */ jsx(HvAppShellLayout, { children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingPage, {}), children: /* @__PURE__ */ jsx(Outlet, {}) }) })
20
- ] }) }) }) }) });
21
- };
22
- export {
23
- RootRoute
14
+ //#region src/pages/RootRoute.tsx
15
+ /**
16
+ * Root route component for provides & visual layout that needs router provider context.
17
+ * When its not necessary, use `HvAppShellContainer` instead
18
+ */
19
+ var RootRoute = () => {
20
+ const { services } = useHvAppShellModel();
21
+ const { providers } = useHvAppShellCombinedProviders();
22
+ return /* @__PURE__ */ jsx(ErrorBoundary, {
23
+ fallback: /* @__PURE__ */ jsx(GenericError, {}),
24
+ children: /* @__PURE__ */ jsx(ServiceManagerProvider, {
25
+ config: { services },
26
+ children: /* @__PURE__ */ jsx(CombinedProviders, {
27
+ providers,
28
+ children: /* @__PURE__ */ jsx(NavigationProvider, { children: /* @__PURE__ */ jsxs(BannerProvider, { children: [/* @__PURE__ */ jsx(CustomHooksInitializer, {}), /* @__PURE__ */ jsx(HvAppShellLayout, { children: /* @__PURE__ */ jsx(Suspense, {
29
+ fallback: /* @__PURE__ */ jsx(LoadingPage_default, {}),
30
+ children: /* @__PURE__ */ jsx(Outlet, {})
31
+ }) })] }) })
32
+ })
33
+ })
34
+ });
24
35
  };
36
+ //#endregion
37
+ export { RootRoute };
@@ -1,129 +1,104 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- import { useState, useMemo, useEffect, createContext, useContext } from "react";
1
+ import { useNavigationContext } from "./NavigationProvider.js";
2
+ import { useLayoutContext } from "./LayoutProvider.js";
3
+ import { createContext, useContext, useEffect, useMemo, useState } from "react";
3
4
  import { useTranslation } from "react-i18next";
5
+ import { HvBanner, theme, useTheme } from "@hitachivantara/uikit-react-core";
6
+ import { useHvAppShellRuntimeContext } from "@hitachivantara/app-shell-shared";
7
+ import { jsx, jsxs } from "react/jsx-runtime";
4
8
  import { css } from "@emotion/css";
5
9
  import { uid } from "uid";
6
- import { useHvAppShellRuntimeContext } from "@hitachivantara/app-shell-shared";
7
- import { useTheme, theme, HvBanner } from "@hitachivantara/uikit-react-core";
8
- import { useLayoutContext } from "./LayoutProvider.js";
9
- import { useNavigationContext } from "./NavigationProvider.js";
10
- const BannerContext = createContext({
11
- show: () => {
12
- },
13
- dismiss: () => {
14
- }
10
+ //#region src/providers/BannerProvider.tsx
11
+ var BannerContext = createContext({
12
+ show: () => {},
13
+ dismiss: () => {}
15
14
  });
16
- const BannerProvider = ({ children }) => {
17
- const { i18n } = useHvAppShellRuntimeContext();
18
- const { t } = useTranslation(void 0, {
19
- i18n,
20
- keyPrefix: "notifications.banner"
21
- });
22
- const { activeTheme } = useTheme();
23
- const { showHeaderSubMenu, isCompactMode } = useNavigationContext();
24
- const { verticalNavigationWidth, setBannerMaxHeight } = useLayoutContext();
25
- const [banners, setBanners] = useState([]);
26
- const isPentahoTheme = activeTheme?.name === "pentahoPlus";
27
- const show = (notification) => {
28
- const id = uid();
29
- const newBanner = {
30
- id,
31
- ...notification,
32
- variant: notification.variant ?? "default"
33
- };
34
- setBanners((prevBanners) => [...prevBanners, newBanner]);
35
- };
36
- const dismiss = (id) => {
37
- setBanners(
38
- (prevBanners) => prevBanners.filter((banner) => banner.id !== id)
39
- );
40
- };
41
- const value = useMemo(
42
- () => ({
43
- show,
44
- dismiss
45
- }),
46
- []
47
- );
48
- useEffect(() => {
49
- if (banners.length > 0) {
50
- const bannerHeights = banners.map((item) => {
51
- const bannerElement = document.getElementById(item.id);
52
- return bannerElement ? bannerElement.clientHeight : 0;
53
- });
54
- const maxBannerHeight = Math.max(...bannerHeights);
55
- setBannerMaxHeight(maxBannerHeight);
56
- } else {
57
- setBannerMaxHeight(0);
58
- }
59
- }, [banners, setBannerMaxHeight]);
60
- const { root, topCenter, bottomCenter } = useMemo(() => {
61
- const paddingY = theme.space.xs;
62
- const paddingX = theme.space.sm;
63
- return {
64
- root: css({
65
- left: `calc(${verticalNavigationWidth}px + ${paddingX})`,
66
- width: `calc(100% - (${verticalNavigationWidth}px + ${paddingX}) - ${paddingX})`,
67
- transform: "unset",
68
- minWidth: "unset",
69
- zIndex: theme.zIndices.banner,
70
- ...isPentahoTheme && {
71
- maxWidth: 540,
72
- left: `calc(${verticalNavigationWidth}px + (100% - ${verticalNavigationWidth}px) / 2)`,
73
- transform: `translateX(-50%)`
74
- }
75
- }),
76
- topCenter: css({
77
- marginTop: showHeaderSubMenu && !isCompactMode ? `calc(${theme.header.height} + ${theme.header.secondLevelHeight} + ${paddingY})` : `calc(${theme.header.height} + ${paddingY})`
78
- }),
79
- bottomCenter: css({
80
- marginBottom: theme.space.md
81
- })
82
- };
83
- }, [
84
- isCompactMode,
85
- isPentahoTheme,
86
- showHeaderSubMenu,
87
- verticalNavigationWidth
88
- ]);
89
- return /* @__PURE__ */ jsxs(BannerContext.Provider, { value, children: [
90
- banners.map((banner) => /* @__PURE__ */ jsx(
91
- HvBanner,
92
- {
93
- classes: {
94
- root,
95
- anchorOriginBottomCenter: bottomCenter,
96
- anchorOriginTopCenter: topCenter
97
- },
98
- id: banner.id,
99
- offset: 0,
100
- open: true,
101
- onClose: () => dismiss(banner.id),
102
- variant: banner.variant,
103
- label: banner.message,
104
- showIcon: true,
105
- actions: banner.actions,
106
- onAction: banner.onAction,
107
- bannerContentProps: {
108
- actionProps: { "aria-label": t("close") }
109
- },
110
- anchorOrigin: isPentahoTheme ? "bottom" : void 0,
111
- transitionDirection: isPentahoTheme ? "up" : void 0
112
- },
113
- banner.id
114
- )),
115
- children
116
- ] });
117
- };
118
- const useBannerContext = () => {
119
- const context = useContext(BannerContext);
120
- if (!context) {
121
- console.error("BannerContext was used outside of its Provider");
122
- }
123
- return context;
15
+ var BannerProvider = ({ children }) => {
16
+ const { i18n } = useHvAppShellRuntimeContext();
17
+ const { t } = useTranslation(void 0, {
18
+ i18n,
19
+ keyPrefix: "notifications.banner"
20
+ });
21
+ const { activeTheme } = useTheme();
22
+ const { showHeaderSubMenu, isCompactMode } = useNavigationContext();
23
+ const { verticalNavigationWidth, setBannerMaxHeight } = useLayoutContext();
24
+ const [banners, setBanners] = useState([]);
25
+ const isPentahoTheme = activeTheme?.name === "pentahoPlus";
26
+ const show = (notification) => {
27
+ const newBanner = {
28
+ id: uid(),
29
+ ...notification,
30
+ variant: notification.variant ?? "default"
31
+ };
32
+ setBanners((prevBanners) => [...prevBanners, newBanner]);
33
+ };
34
+ const dismiss = (id) => {
35
+ setBanners((prevBanners) => prevBanners.filter((banner) => banner.id !== id));
36
+ };
37
+ const value = useMemo(() => ({
38
+ show,
39
+ dismiss
40
+ }), []);
41
+ useEffect(() => {
42
+ if (banners.length > 0) {
43
+ const bannerHeights = banners.map((item) => {
44
+ const bannerElement = document.getElementById(item.id);
45
+ return bannerElement ? bannerElement.clientHeight : 0;
46
+ });
47
+ setBannerMaxHeight(Math.max(...bannerHeights));
48
+ } else setBannerMaxHeight(0);
49
+ }, [banners, setBannerMaxHeight]);
50
+ const { root, topCenter, bottomCenter } = useMemo(() => {
51
+ const paddingY = theme.space.xs;
52
+ const paddingX = theme.space.sm;
53
+ return {
54
+ root: css({
55
+ left: `calc(${verticalNavigationWidth}px + ${paddingX})`,
56
+ width: `calc(100% - (${verticalNavigationWidth}px + ${paddingX}) - ${paddingX})`,
57
+ transform: "unset",
58
+ minWidth: "unset",
59
+ zIndex: theme.zIndices.banner,
60
+ ...isPentahoTheme && {
61
+ maxWidth: 540,
62
+ left: `calc(${verticalNavigationWidth}px + (100% - ${verticalNavigationWidth}px) / 2)`,
63
+ transform: `translateX(-50%)`
64
+ }
65
+ }),
66
+ topCenter: css({ marginTop: showHeaderSubMenu && !isCompactMode ? `calc(${theme.header.height} + ${theme.header.secondLevelHeight} + ${paddingY})` : `calc(${theme.header.height} + ${paddingY})` }),
67
+ bottomCenter: css({ marginBottom: theme.space.md })
68
+ };
69
+ }, [
70
+ isCompactMode,
71
+ isPentahoTheme,
72
+ showHeaderSubMenu,
73
+ verticalNavigationWidth
74
+ ]);
75
+ return /* @__PURE__ */ jsxs(BannerContext.Provider, {
76
+ value,
77
+ children: [banners.map((banner) => /* @__PURE__ */ jsx(HvBanner, {
78
+ classes: {
79
+ root,
80
+ anchorOriginBottomCenter: bottomCenter,
81
+ anchorOriginTopCenter: topCenter
82
+ },
83
+ id: banner.id,
84
+ offset: 0,
85
+ open: true,
86
+ onClose: () => dismiss(banner.id),
87
+ variant: banner.variant,
88
+ label: banner.message,
89
+ showIcon: true,
90
+ actions: banner.actions,
91
+ onAction: banner.onAction,
92
+ bannerContentProps: { actionProps: { "aria-label": t("close") } },
93
+ anchorOrigin: isPentahoTheme ? "bottom" : void 0,
94
+ transitionDirection: isPentahoTheme ? "up" : void 0
95
+ }, banner.id)), children]
96
+ });
124
97
  };
125
- export {
126
- BannerContext,
127
- BannerProvider,
128
- useBannerContext
98
+ var useBannerContext = () => {
99
+ const context = useContext(BannerContext);
100
+ if (!context) console.error("BannerContext was used outside of its Provider");
101
+ return context;
129
102
  };
103
+ //#endregion
104
+ export { BannerProvider, useBannerContext };
@@ -1,36 +1,30 @@
1
+ import { createContext, useContext, useMemo, useState } from "react";
1
2
  import { jsx } from "react/jsx-runtime";
2
- import { useState, useMemo, createContext, useContext } from "react";
3
- const LayoutContext = createContext({
4
- bannerMaxHeight: 0,
5
- setBannerMaxHeight: () => {
6
- },
7
- verticalNavigationWidth: 0,
8
- setVerticalNavigationWidth: () => {
9
- }
3
+ //#region src/providers/LayoutProvider.tsx
4
+ var LayoutContext = createContext({
5
+ bannerMaxHeight: 0,
6
+ setBannerMaxHeight: () => {},
7
+ verticalNavigationWidth: 0,
8
+ setVerticalNavigationWidth: () => {}
10
9
  });
11
- const LayoutProvider = ({ children }) => {
12
- const [bannerMaxHeight, setBannerMaxHeight] = useState(0);
13
- const [verticalNavigationWidth, setVerticalNavigationWidth] = useState(0);
14
- const value = useMemo(
15
- () => ({
16
- bannerMaxHeight,
17
- setBannerMaxHeight,
18
- verticalNavigationWidth,
19
- setVerticalNavigationWidth
20
- }),
21
- [bannerMaxHeight, verticalNavigationWidth]
22
- );
23
- return /* @__PURE__ */ jsx(LayoutContext.Provider, { value, children });
10
+ var LayoutProvider = ({ children }) => {
11
+ const [bannerMaxHeight, setBannerMaxHeight] = useState(0);
12
+ const [verticalNavigationWidth, setVerticalNavigationWidth] = useState(0);
13
+ const value = useMemo(() => ({
14
+ bannerMaxHeight,
15
+ setBannerMaxHeight,
16
+ verticalNavigationWidth,
17
+ setVerticalNavigationWidth
18
+ }), [bannerMaxHeight, verticalNavigationWidth]);
19
+ return /* @__PURE__ */ jsx(LayoutContext.Provider, {
20
+ value,
21
+ children
22
+ });
24
23
  };
25
- const useLayoutContext = () => {
26
- const context = useContext(LayoutContext);
27
- if (!context) {
28
- console.error("LayoutContext was used outside of its Provider");
29
- }
30
- return context;
31
- };
32
- export {
33
- LayoutContext,
34
- LayoutProvider,
35
- useLayoutContext
24
+ var useLayoutContext = () => {
25
+ const context = useContext(LayoutContext);
26
+ if (!context) console.error("LayoutContext was used outside of its Provider");
27
+ return context;
36
28
  };
29
+ //#endregion
30
+ export { LayoutProvider, useLayoutContext };
@@ -1,112 +1,101 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { useState, useMemo, useEffect, useCallback, useContext, createContext } from "react";
3
- import { useTheme } from "@mui/material/styles";
4
- import useMediaQuery from "@mui/material/useMediaQuery";
5
- import { useHvAppShellConfig } from "@hitachivantara/app-shell-shared";
6
1
  import useLocalStorage from "../hooks/useLocalStorage.js";
2
+ import { findItemById, removeHrefFromMenuItemsWithChildren } from "../utils/navigationUtil.js";
7
3
  import useNavigationMenuItems from "../hooks/useNavigationMenuItems.js";
8
- import { removeHrefFromMenuItemsWithChildren, findItemById } from "../utils/navigationUtil.js";
9
- const NavigationContext = createContext({
10
- selectedMenuItemId: void 0,
11
- rootMenuItemId: void 0,
12
- items: [],
13
- verticalNavigationItems: [],
14
- hasVerticalNavigation: false,
15
- showHeaderSubMenu: false,
16
- isCompactMode: false,
17
- verticalNavigationMode: "EXPANDED",
18
- switchVerticalNavigationMode: () => {
19
- }
4
+ import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
5
+ import { useHvAppShellConfig } from "@hitachivantara/app-shell-shared";
6
+ import { useTheme } from "@mui/material/styles";
7
+ import useMediaQuery from "@mui/material/useMediaQuery";
8
+ import { jsx } from "react/jsx-runtime";
9
+ //#region src/providers/NavigationProvider.tsx
10
+ var NavigationContext = createContext({
11
+ selectedMenuItemId: void 0,
12
+ rootMenuItemId: void 0,
13
+ items: [],
14
+ verticalNavigationItems: [],
15
+ hasVerticalNavigation: false,
16
+ showHeaderSubMenu: false,
17
+ isCompactMode: false,
18
+ verticalNavigationMode: "EXPANDED",
19
+ switchVerticalNavigationMode: () => {}
20
20
  });
21
- const NavigationProvider = ({ children }) => {
22
- const { navigationMode } = useHvAppShellConfig();
23
- const { items, selectedMenuItemId, rootMenuItemId } = useNavigationMenuItems();
24
- const muiTheme = useTheme();
25
- const isCompactMode = useMediaQuery(muiTheme.breakpoints.down("md"));
26
- const { value: storedExpanded, setStoredValue: setStoreExpanded } = useLocalStorage("NAV_EXPANDED");
27
- const [isExpanded, setIsExpanded] = useState(
28
- storedExpanded == null ? true : storedExpanded === "true"
29
- );
30
- const [isClosed, setIsClosed] = useState(isCompactMode);
31
- const [showHeaderSubMenu, setShowHeaderSubMenu] = useState(false);
32
- const verticalNavigationMode = useMemo(() => {
33
- if (isCompactMode) {
34
- return isClosed ? "CLOSED" : "EXPANDED";
35
- }
36
- return isExpanded ? "EXPANDED" : "COLLAPSED";
37
- }, [isClosed, isCompactMode, isExpanded]);
38
- const verticalNavigationItems = useMemo(() => {
39
- if (isCompactMode) {
40
- return items;
41
- }
42
- if (navigationMode === "ONLY_LEFT") {
43
- return removeHrefFromMenuItemsWithChildren(items);
44
- }
45
- const itemsToReturn = rootMenuItemId && findItemById(items, rootMenuItemId)?.data || [];
46
- return removeHrefFromMenuItemsWithChildren(itemsToReturn);
47
- }, [items, navigationMode, rootMenuItemId, isCompactMode]);
48
- const hasVerticalNavigation = useMemo(() => {
49
- if (isCompactMode) {
50
- return true;
51
- }
52
- if (navigationMode === "ONLY_TOP") {
53
- return false;
54
- }
55
- return verticalNavigationItems && verticalNavigationItems.length > 0;
56
- }, [navigationMode, verticalNavigationItems, isCompactMode]);
57
- useEffect(() => {
58
- setStoreExpanded(String(isExpanded));
59
- }, [isExpanded, setStoreExpanded]);
60
- useEffect(() => {
61
- setIsClosed(isCompactMode);
62
- }, [isCompactMode]);
63
- useEffect(() => {
64
- setShowHeaderSubMenu(
65
- navigationMode === "ONLY_TOP" && items.some((item) => item.data && item.data.length > 0)
66
- );
67
- }, [navigationMode, items]);
68
- const switchVerticalNavigationMode = useCallback(() => {
69
- if (isCompactMode) {
70
- setIsClosed((prevState) => !prevState);
71
- } else {
72
- setIsExpanded((prevState) => !prevState);
73
- }
74
- }, [isCompactMode]);
75
- const value = useMemo(
76
- () => ({
77
- selectedMenuItemId,
78
- rootMenuItemId,
79
- items,
80
- verticalNavigationItems,
81
- hasVerticalNavigation,
82
- showHeaderSubMenu,
83
- isCompactMode,
84
- verticalNavigationMode,
85
- switchVerticalNavigationMode
86
- }),
87
- [
88
- selectedMenuItemId,
89
- rootMenuItemId,
90
- items,
91
- verticalNavigationItems,
92
- hasVerticalNavigation,
93
- showHeaderSubMenu,
94
- isCompactMode,
95
- verticalNavigationMode,
96
- switchVerticalNavigationMode
97
- ]
98
- );
99
- return /* @__PURE__ */ jsx(NavigationContext.Provider, { value, children });
100
- };
101
- const useNavigationContext = () => {
102
- const context = useContext(NavigationContext);
103
- if (!context) {
104
- console.error("NavigationContext was used outside of its Provider");
105
- }
106
- return context;
21
+ var NavigationProvider = ({ children }) => {
22
+ const { navigationMode } = useHvAppShellConfig();
23
+ const { items, selectedMenuItemId, rootMenuItemId } = useNavigationMenuItems();
24
+ const isCompactMode = useMediaQuery(useTheme().breakpoints.down("md"));
25
+ const { value: storedExpanded, setStoredValue: setStoreExpanded } = useLocalStorage("NAV_EXPANDED");
26
+ const [isExpanded, setIsExpanded] = useState(storedExpanded == null ? true : storedExpanded === "true");
27
+ const [isClosed, setIsClosed] = useState(isCompactMode);
28
+ const [showHeaderSubMenu, setShowHeaderSubMenu] = useState(false);
29
+ const verticalNavigationMode = useMemo(() => {
30
+ if (isCompactMode) return isClosed ? "CLOSED" : "EXPANDED";
31
+ return isExpanded ? "EXPANDED" : "COLLAPSED";
32
+ }, [
33
+ isClosed,
34
+ isCompactMode,
35
+ isExpanded
36
+ ]);
37
+ const verticalNavigationItems = useMemo(() => {
38
+ if (isCompactMode) return items;
39
+ if (navigationMode === "ONLY_LEFT") return removeHrefFromMenuItemsWithChildren(items);
40
+ return removeHrefFromMenuItemsWithChildren(rootMenuItemId && findItemById(items, rootMenuItemId)?.data || []);
41
+ }, [
42
+ items,
43
+ navigationMode,
44
+ rootMenuItemId,
45
+ isCompactMode
46
+ ]);
47
+ const hasVerticalNavigation = useMemo(() => {
48
+ if (isCompactMode) return true;
49
+ if (navigationMode === "ONLY_TOP") return false;
50
+ return verticalNavigationItems && verticalNavigationItems.length > 0;
51
+ }, [
52
+ navigationMode,
53
+ verticalNavigationItems,
54
+ isCompactMode
55
+ ]);
56
+ useEffect(() => {
57
+ setStoreExpanded(String(isExpanded));
58
+ }, [isExpanded, setStoreExpanded]);
59
+ useEffect(() => {
60
+ setIsClosed(isCompactMode);
61
+ }, [isCompactMode]);
62
+ useEffect(() => {
63
+ setShowHeaderSubMenu(navigationMode === "ONLY_TOP" && items.some((item) => item.data && item.data.length > 0));
64
+ }, [navigationMode, items]);
65
+ const switchVerticalNavigationMode = useCallback(() => {
66
+ if (isCompactMode) setIsClosed((prevState) => !prevState);
67
+ else setIsExpanded((prevState) => !prevState);
68
+ }, [isCompactMode]);
69
+ const value = useMemo(() => ({
70
+ selectedMenuItemId,
71
+ rootMenuItemId,
72
+ items,
73
+ verticalNavigationItems,
74
+ hasVerticalNavigation,
75
+ showHeaderSubMenu,
76
+ isCompactMode,
77
+ verticalNavigationMode,
78
+ switchVerticalNavigationMode
79
+ }), [
80
+ selectedMenuItemId,
81
+ rootMenuItemId,
82
+ items,
83
+ verticalNavigationItems,
84
+ hasVerticalNavigation,
85
+ showHeaderSubMenu,
86
+ isCompactMode,
87
+ verticalNavigationMode,
88
+ switchVerticalNavigationMode
89
+ ]);
90
+ return /* @__PURE__ */ jsx(NavigationContext.Provider, {
91
+ value,
92
+ children
93
+ });
107
94
  };
108
- export {
109
- NavigationContext,
110
- NavigationProvider,
111
- useNavigationContext
95
+ var useNavigationContext = () => {
96
+ const context = useContext(NavigationContext);
97
+ if (!context) console.error("NavigationContext was used outside of its Provider");
98
+ return context;
112
99
  };
100
+ //#endregion
101
+ export { NavigationProvider, useNavigationContext };
@@ -1,20 +1,14 @@
1
- import { jsx, Fragment } from "react/jsx-runtime";
2
1
  import { useMemo } from "react";
3
- const CombinedProviders = ({
4
- children: mainChildren,
5
- providers
6
- }) => {
7
- const combined = useMemo(() => {
8
- if (!providers || providers.length === 0) {
9
- return mainChildren;
10
- }
11
- return providers.reduceRight(
12
- (Acc, { component: Curr, config, key }) => /* @__PURE__ */ jsx(Curr, { ...config, children: Acc }, key),
13
- mainChildren
14
- );
15
- }, [providers, mainChildren]);
16
- return /* @__PURE__ */ jsx(Fragment, { children: combined });
17
- };
18
- export {
19
- CombinedProviders as default
2
+ import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
3
+ //#region src/utils/CombinedProviders.tsx
4
+ var CombinedProviders = ({ children: mainChildren, providers }) => {
5
+ return /* @__PURE__ */ jsx(Fragment$1, { children: useMemo(() => {
6
+ if (!providers || providers.length === 0) return mainChildren;
7
+ return providers.reduceRight((Acc, { component: Curr, config, key }) => /* @__PURE__ */ jsx(Curr, {
8
+ ...config,
9
+ children: Acc
10
+ }, key), mainChildren);
11
+ }, [providers, mainChildren]) });
20
12
  };
13
+ //#endregion
14
+ export { CombinedProviders as default };