@hitachivantara/app-shell-ui 1.6.4 → 1.7.0

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.
@@ -1,11 +1,13 @@
1
1
  import { jsxs, jsx } from "@emotion/react/jsx-runtime";
2
2
  import { Helmet } from "react-helmet-async";
3
3
  import { useTranslation } from "react-i18next";
4
- import { HvHeader, HvButton, HvHeaderBrand, HvHeaderNavigation } from "@hitachivantara/uikit-react-core";
4
+ import { css } from "@emotion/css";
5
+ import { useTheme, HvHeader, HvButton, HvHeaderBrand, HvHeaderNavigation } from "@hitachivantara/uikit-react-core";
5
6
  import { CONFIG_TRANSLATIONS_NAMESPACE, useHvAppShellConfig } from "@hitachivantara/app-shell-shared";
6
7
  import { useHvNavigation } from "@hitachivantara/app-shell-navigation";
7
8
  import StyledIconWrapper from "./styles.js";
8
9
  import useNavigationContext from "../../../providers/hooks/useNavigationContext.js";
10
+ import useLayoutContext from "../../../providers/hooks/useLayoutContext.js";
9
11
  import IconUiKit from "../../IconUiKit/index.js";
10
12
  import HeaderActions from "./HeaderActions/HeaderActions.js";
11
13
  import BrandLogo from "./BrandLogo/BrandLogo.js";
@@ -19,6 +21,12 @@ const Header = () => {
19
21
  t: tConfig
20
22
  } = useTranslation(CONFIG_TRANSLATIONS_NAMESPACE);
21
23
  const appShellConfig = useHvAppShellConfig();
24
+ const {
25
+ verticalNavigationWidth
26
+ } = useLayoutContext();
27
+ const {
28
+ activeTheme
29
+ } = useTheme();
22
30
  const {
23
31
  navigate
24
32
  } = useHvNavigation();
@@ -44,8 +52,12 @@ const Header = () => {
44
52
  });
45
53
  }
46
54
  };
55
+ const isPentahoTheme = activeTheme?.name === "pentahoPlus";
56
+ const shouldShrinkHeader = isPentahoTheme && verticalNavigationWidth > 0;
47
57
  const name = appShellConfig.name ? tConfig(appShellConfig.name) : "";
48
- return /* @__PURE__ */ jsxs(HvHeader, { position: "fixed", children: [
58
+ return /* @__PURE__ */ jsxs(HvHeader, { position: "fixed", className: /* @__PURE__ */ css({
59
+ width: shouldShrinkHeader ? `calc(100% - ${verticalNavigationWidth}px)` : void 0
60
+ }, process.env.NODE_ENV === "production" ? "" : ";label:Header;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9IZWFkZXIvSGVhZGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1RWlCIiwiZmlsZSI6Ii9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9IZWFkZXIvSGVhZGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEhlbG1ldCB9IGZyb20gXCJyZWFjdC1oZWxtZXQtYXN5bmNcIjtcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7XG4gIEh2QnV0dG9uLFxuICBIdkhlYWRlcixcbiAgSHZIZWFkZXJCcmFuZCxcbiAgSHZIZWFkZXJOYXZpZ2F0aW9uLFxuICBIdkhlYWRlck5hdmlnYXRpb25Qcm9wcyxcbiAgdXNlVGhlbWVcbn0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1jb3JlXCI7XG5cbmltcG9ydCB7XG4gIENPTkZJR19UUkFOU0xBVElPTlNfTkFNRVNQQUNFLFxuICB1c2VIdkFwcFNoZWxsQ29uZmlnXG59IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvYXBwLXNoZWxsLXNoYXJlZFwiO1xuaW1wb3J0IHsgdXNlSHZOYXZpZ2F0aW9uIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS9hcHAtc2hlbGwtbmF2aWdhdGlvblwiO1xuXG5pbXBvcnQgQnJhbmRMb2dvIGZyb20gXCIuL0JyYW5kTG9nb1wiO1xuaW1wb3J0IFN0eWxlZEljb25XcmFwcGVyIGZyb20gXCIuL3N0eWxlc1wiO1xuXG5pbXBvcnQgdXNlTmF2aWdhdGlvbkNvbnRleHQgZnJvbSBcIi4uLy4uLy4uL3Byb3ZpZGVycy9ob29rcy91c2VOYXZpZ2F0aW9uQ29udGV4dFwiO1xuaW1wb3J0IHVzZUxheW91dENvbnRleHQgZnJvbSBcIi4uLy4uLy4uL3Byb3ZpZGVycy9ob29rcy91c2VMYXlvdXRDb250ZXh0XCI7XG5pbXBvcnQgSWNvblVpS2l0IGZyb20gXCIuLi8uLi9JY29uVWlLaXRcIjtcbmltcG9ydCBIZWFkZXJBY3Rpb25zIGZyb20gXCIuL0hlYWRlckFjdGlvbnNcIjtcblxuY29uc3QgSGVhZGVyID0gKCkgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKHVuZGVmaW5lZCwgeyBrZXlQcmVmaXg6IFwiaGVhZGVyLm5hdmlnYXRpb25cIiB9KTtcbiAgY29uc3QgeyB0OiB0Q29uZmlnIH0gPSB1c2VUcmFuc2xhdGlvbihDT05GSUdfVFJBTlNMQVRJT05TX05BTUVTUEFDRSk7XG4gIGNvbnN0IGFwcFNoZWxsQ29uZmlnID0gdXNlSHZBcHBTaGVsbENvbmZpZygpO1xuICBjb25zdCB7IHZlcnRpY2FsTmF2aWdhdGlvbldpZHRoIH0gPSB1c2VMYXlvdXRDb250ZXh0KCk7XG4gIGNvbnN0IHsgYWN0aXZlVGhlbWUgfSA9IHVzZVRoZW1lKCk7XG4gIGNvbnN0IHsgbmF2aWdhdGUgfSA9IHVzZUh2TmF2aWdhdGlvbigpO1xuXG4gIGNvbnN0IHtcbiAgICBpdGVtcyxcbiAgICBzZWxlY3RlZE1lbnVJdGVtSWQsXG4gICAgcm9vdE1lbnVJdGVtSWQsXG4gICAgaXNDb21wYWN0TW9kZSxcbiAgICBzd2l0Y2hWZXJ0aWNhbE5hdmlnYXRpb25Nb2RlLFxuICAgIHZlcnRpY2FsTmF2aWdhdGlvbk1vZGUsXG4gICAgdmVydGljYWxOYXZpZ2F0aW9uSXRlbXNcbiAgfSA9IHVzZU5hdmlnYXRpb25Db250ZXh0KCk7XG5cbiAgY29uc3QgaXNPbmx5VG9wTW9kZSA9IGFwcFNoZWxsQ29uZmlnLm5hdmlnYXRpb25Nb2RlID09PSBcIk9OTFlfVE9QXCI7XG4gIGNvbnN0IHNob3dOYXZpZ2F0aW9uID1cbiAgICAhaXNDb21wYWN0TW9kZSAmJlxuICAgIGFwcFNoZWxsQ29uZmlnLm5hdmlnYXRpb25Nb2RlICE9PSBcIk9OTFlfTEVGVFwiICYmXG4gICAgaXRlbXMubGVuZ3RoID4gMDtcbiAgY29uc3QgaXNWZXJ0aWNhbE5hdmlnYXRpb25DbG9zZWQgPSB2ZXJ0aWNhbE5hdmlnYXRpb25Nb2RlID09PSBcIkNMT1NFRFwiO1xuICBjb25zdCBzaG93VmVydGljYWxOYXZpZ2F0aW9uQnV0dG9uID1cbiAgICBpc0NvbXBhY3RNb2RlICYmIHZlcnRpY2FsTmF2aWdhdGlvbkl0ZW1zLmxlbmd0aCA+IDA7XG5cbiAgY29uc3QgaGFuZGxlTmF2aWdhdGlvbkNoYW5nZTogSHZIZWFkZXJOYXZpZ2F0aW9uUHJvcHNbXCJvbkNsaWNrXCJdID0gKFxuICAgIGV2ZW50LFxuICAgIHNlbGVjdGVkSXRlbVxuICApID0+IHtcbiAgICBpZiAoc2VsZWN0ZWRJdGVtLmhyZWYpIHtcbiAgICAgIG5hdmlnYXRlKHNlbGVjdGVkSXRlbS5ocmVmLCB7XG4gICAgICAgIHN0YXRlOiB7IHNlbGVjdGVkSXRlbUlkOiBzZWxlY3RlZEl0ZW0uaWQgfVxuICAgICAgfSk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGlzUGVudGFob1RoZW1lID0gYWN0aXZlVGhlbWU/Lm5hbWUgPT09IFwicGVudGFob1BsdXNcIjtcbiAgY29uc3Qgc2hvdWxkU2hyaW5rSGVhZGVyID0gaXNQZW50YWhvVGhlbWUgJiYgdmVydGljYWxOYXZpZ2F0aW9uV2lkdGggPiAwO1xuICBjb25zdCBuYW1lID0gYXBwU2hlbGxDb25maWcubmFtZSA/IHRDb25maWcoYXBwU2hlbGxDb25maWcubmFtZSkgOiBcIlwiO1xuXG4gIHJldHVybiAoXG4gICAgPEh2SGVhZGVyXG4gICAgICBwb3NpdGlvbj1cImZpeGVkXCJcbiAgICAgIGNsYXNzTmFtZT17Y3NzKHtcbiAgICAgICAgd2lkdGg6IHNob3VsZFNocmlua0hlYWRlclxuICAgICAgICAgID8gYGNhbGMoMTAwJSAtICR7dmVydGljYWxOYXZpZ2F0aW9uV2lkdGh9cHgpYFxuICAgICAgICAgIDogdW5kZWZpbmVkXG4gICAgICB9KX0+XG4gICAgICA8SGVsbWV0PlxuICAgICAgICA8dGl0bGU+e25hbWV9PC90aXRsZT5cbiAgICAgIDwvSGVsbWV0PlxuXG4gICAgICB7c2hvd1ZlcnRpY2FsTmF2aWdhdGlvbkJ1dHRvbiAmJiAoXG4gICAgICAgIDxIdkJ1dHRvblxuICAgICAgICAgIGljb25cbiAgICAgICAgICBhcmlhLWxhYmVsPXtcbiAgICAgICAgICAgIGlzVmVydGljYWxOYXZpZ2F0aW9uQ2xvc2VkXG4gICAgICAgICAgICAgID8gdChcIm9wZW5OYXZpZ2F0aW9uUGFuZWxcIilcbiAgICAgICAgICAgICAgOiB0KFwiY2xvc2VOYXZpZ2F0aW9uUGFuZWxcIilcbiAgICAgICAgICB9XG4gICAgICAgICAgYXJpYS1leHBhbmRlZD17IWlzVmVydGljYWxOYXZpZ2F0aW9uQ2xvc2VkfVxuICAgICAgICAgIG9uQ2xpY2s9e3N3aXRjaFZlcnRpY2FsTmF2aWdhdGlvbk1vZGV9PlxuICAgICAgICAgIDxJY29uVWlLaXQgbmFtZT17aXNWZXJ0aWNhbE5hdmlnYXRpb25DbG9zZWQgPyBcIk1lbnVcIiA6IFwiQ2xvc2VcIn0gLz5cbiAgICAgICAgPC9IdkJ1dHRvbj5cbiAgICAgICl9XG5cbiAgICAgIDxIdkhlYWRlckJyYW5kXG4gICAgICAgIGxvZ289e1xuICAgICAgICAgIDxTdHlsZWRJY29uV3JhcHBlcj5cbiAgICAgICAgICAgIDxCcmFuZExvZ28gbG9nbz17YXBwU2hlbGxDb25maWcubG9nb30gLz5cbiAgICAgICAgICA8L1N0eWxlZEljb25XcmFwcGVyPlxuICAgICAgICB9XG4gICAgICAgIG5hbWU9e25hbWV9XG4gICAgICAvPlxuICAgICAge3Nob3dOYXZpZ2F0aW9uICYmIChcbiAgICAgICAgPEh2SGVhZGVyTmF2aWdhdGlvblxuICAgICAgICAgIGRhdGE9e2l0ZW1zfVxuICAgICAgICAgIHNlbGVjdGVkPXtpc09ubHlUb3BNb2RlID8gc2VsZWN0ZWRNZW51SXRlbUlkIDogcm9vdE1lbnVJdGVtSWR9XG4gICAgICAgICAgb25DbGljaz17aGFuZGxlTmF2aWdhdGlvbkNoYW5nZX1cbiAgICAgICAgICBsZXZlbHM9e2lzT25seVRvcE1vZGUgPyAyIDogMX1cbiAgICAgICAgLz5cbiAgICAgICl9XG5cbiAgICAgIDxIZWFkZXJBY3Rpb25zIC8+XG4gICAgPC9IdkhlYWRlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEhlYWRlcjtcbiJdfQ== */"), children: [
49
61
  /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx("title", { children: name }) }),
50
62
  showVerticalNavigationButton && /* @__PURE__ */ jsx(HvButton, { icon: true, "aria-label": isVerticalNavigationClosed ? t("openNavigationPanel") : t("closeNavigationPanel"), "aria-expanded": !isVerticalNavigationClosed, onClick: switchVerticalNavigationMode, children: /* @__PURE__ */ jsx(IconUiKit, { name: isVerticalNavigationClosed ? "Menu" : "Close" }) }),
51
63
  /* @__PURE__ */ jsx(HvHeaderBrand, { logo: /* @__PURE__ */ jsx(StyledIconWrapper, { children: /* @__PURE__ */ jsx(BrandLogo, { logo: appShellConfig.logo }) }), name }),
@@ -9,10 +9,8 @@ const HeaderActions = () => {
9
9
  } = useHvAppShellConfig();
10
10
  return /* @__PURE__ */ jsx(HvHeaderActions, { children: header?.actions.map((action, index) => {
11
11
  const headerActionKey = `${action.bundle}${index}`;
12
- if (!internalActions.find((internalAction) => internalAction.bundle === action.bundle)) {
13
- return /* @__PURE__ */ jsx(DynamicAction, { bundle: action.bundle, ...action.config }, headerActionKey);
14
- }
15
- return /* @__PURE__ */ jsx(InternalAction, { bundle: action.bundle, ...action.config }, headerActionKey);
12
+ const Component = internalActions.find((a) => a.bundle === action.bundle) ? InternalAction : DynamicAction;
13
+ return /* @__PURE__ */ jsx(Component, { bundle: action.bundle, ...action.config }, headerActionKey);
16
14
  }) });
17
15
  };
18
16
  const HeaderActions$1 = HeaderActions;
@@ -1,4 +1,6 @@
1
1
  import { jsxs, jsx } from "@emotion/react/jsx-runtime";
2
+ import { css } from "@emotion/css";
3
+ import { theme } from "@hitachivantara/uikit-react-core";
2
4
  import useNavigationContext from "../../../providers/hooks/useNavigationContext.js";
3
5
  import { StyledContainer, StyledMain } from "./styles.js";
4
6
  import useLayoutContext from "../../../providers/hooks/useLayoutContext.js";
@@ -17,9 +19,14 @@ const Main = ({
17
19
  bannerMaxHeight,
18
20
  verticalNavigationWidth
19
21
  } = useLayoutContext();
20
- return /* @__PURE__ */ jsxs(StyledContainer, { showHeaderSubMenu, isCompactMode, children: [
22
+ return /* @__PURE__ */ jsxs(StyledContainer, { style: {
23
+ ["--vNavWidth"]: `${verticalNavigationWidth}px`,
24
+ ["--headerHeight"]: showHeaderSubMenu && !isCompactMode ? `calc(${theme.header.height} + ${theme.header.secondLevelHeight})` : theme.header.height
25
+ }, children: [
21
26
  hasVerticalNavigation && verticalNavigationMode !== "CLOSED" && /* @__PURE__ */ jsx(VerticalNavigation, { onClickAway: isCompactMode ? switchVerticalNavigationMode : void 0 }),
22
- /* @__PURE__ */ jsx(StyledMain, { paddingTop: bannerMaxHeight, verticalNavigationWidth, children })
27
+ /* @__PURE__ */ jsx(StyledMain, { className: /* @__PURE__ */ css({
28
+ paddingTop: bannerMaxHeight ? `calc(${bannerMaxHeight}px + ${theme.space.xs})` : void 0
29
+ }, process.env.NODE_ENV === "production" ? "" : ";label:Main;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9NYWluL01haW4udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDbUIiLCJmaWxlIjoiL19fdy9odi1hcHAtc2hlbGwvaHYtYXBwLXNoZWxsL2NsaWVudC9wYWNrYWdlcy9hcHAtc2hlbGwtdWkvc3JjL2NvbXBvbmVudHMvbGF5b3V0L01haW4vTWFpbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtcmVhY3QtY29yZVwiO1xuaW1wb3J0IHVzZU5hdmlnYXRpb25Db250ZXh0IGZyb20gXCIuLi8uLi8uLi9wcm92aWRlcnMvaG9va3MvdXNlTmF2aWdhdGlvbkNvbnRleHRcIjtcbmltcG9ydCBWZXJ0aWNhbE5hdmlnYXRpb24gZnJvbSBcIi4uL1ZlcnRpY2FsTmF2aWdhdGlvblwiO1xuXG5pbXBvcnQgeyBTdHlsZWRNYWluLCBTdHlsZWRDb250YWluZXIgfSBmcm9tIFwiLi9zdHlsZXNcIjtcbmltcG9ydCB1c2VMYXlvdXRDb250ZXh0IGZyb20gXCIuLi8uLi8uLi9wcm92aWRlcnMvaG9va3MvdXNlTGF5b3V0Q29udGV4dFwiO1xuXG5leHBvcnQgdHlwZSBNYWluUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG59O1xuXG5jb25zdCBNYWluID0gKHsgY2hpbGRyZW4gfTogTWFpblByb3BzKSA9PiB7XG4gIGNvbnN0IHtcbiAgICBoYXNWZXJ0aWNhbE5hdmlnYXRpb24sXG4gICAgdmVydGljYWxOYXZpZ2F0aW9uTW9kZSxcbiAgICBzaG93SGVhZGVyU3ViTWVudSxcbiAgICBpc0NvbXBhY3RNb2RlLFxuICAgIHN3aXRjaFZlcnRpY2FsTmF2aWdhdGlvbk1vZGVcbiAgfSA9IHVzZU5hdmlnYXRpb25Db250ZXh0KCk7XG4gIGNvbnN0IHsgYmFubmVyTWF4SGVpZ2h0LCB2ZXJ0aWNhbE5hdmlnYXRpb25XaWR0aCB9ID0gdXNlTGF5b3V0Q29udGV4dCgpO1xuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZENvbnRhaW5lclxuICAgICAgc3R5bGU9e3tcbiAgICAgICAgW1wiLS12TmF2V2lkdGhcIiBhcyBzdHJpbmddOiBgJHt2ZXJ0aWNhbE5hdmlnYXRpb25XaWR0aH1weGAsXG4gICAgICAgIFtcIi0taGVhZGVySGVpZ2h0XCIgYXMgc3RyaW5nXTpcbiAgICAgICAgICBzaG93SGVhZGVyU3ViTWVudSAmJiAhaXNDb21wYWN0TW9kZVxuICAgICAgICAgICAgPyBgY2FsYygke3RoZW1lLmhlYWRlci5oZWlnaHR9ICsgJHt0aGVtZS5oZWFkZXIuc2Vjb25kTGV2ZWxIZWlnaHR9KWBcbiAgICAgICAgICAgIDogdGhlbWUuaGVhZGVyLmhlaWdodFxuICAgICAgfX0+XG4gICAgICB7aGFzVmVydGljYWxOYXZpZ2F0aW9uICYmIHZlcnRpY2FsTmF2aWdhdGlvbk1vZGUgIT09IFwiQ0xPU0VEXCIgJiYgKFxuICAgICAgICA8VmVydGljYWxOYXZpZ2F0aW9uXG4gICAgICAgICAgb25DbGlja0F3YXk9e2lzQ29tcGFjdE1vZGUgPyBzd2l0Y2hWZXJ0aWNhbE5hdmlnYXRpb25Nb2RlIDogdW5kZWZpbmVkfVxuICAgICAgICAvPlxuICAgICAgKX1cblxuICAgICAgPFN0eWxlZE1haW5cbiAgICAgICAgY2xhc3NOYW1lPXtjc3Moe1xuICAgICAgICAgIHBhZGRpbmdUb3A6IGJhbm5lck1heEhlaWdodFxuICAgICAgICAgICAgPyBgY2FsYygke2Jhbm5lck1heEhlaWdodH1weCArICR7dGhlbWUuc3BhY2UueHN9KWBcbiAgICAgICAgICAgIDogdW5kZWZpbmVkXG4gICAgICAgIH0pfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9TdHlsZWRNYWluPlxuICAgIDwvU3R5bGVkQ29udGFpbmVyPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgTWFpbjtcbiJdfQ== */"), children })
23
30
  ] });
24
31
  };
25
32
  const Main$1 = Main;
@@ -1,22 +1,35 @@
1
1
  import _styled from "@emotion/styled/base";
2
- import { theme } from "@hitachivantara/uikit-react-core";
2
+ function _EMOTION_STRINGIFIED_CSS_ERROR__() {
3
+ 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).";
4
+ }
3
5
  const StyledContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
4
6
  target: "ew4l8di1"
5
7
  } : {
6
8
  target: "ew4l8di1",
7
9
  label: "StyledContainer"
8
- })("display:flex;min-height:100vh;", (props) => ({
9
- paddingTop: props.showHeaderSubMenu && !props.isCompactMode ? `calc(${theme.header.height} + ${theme.header.secondLevelHeight})` : theme.header.height
10
- }), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9NYWluL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhK0IiLCJmaWxlIjoiL19fdy9odi1hcHAtc2hlbGwvaHYtYXBwLXNoZWxsL2NsaWVudC9wYWNrYWdlcy9hcHAtc2hlbGwtdWkvc3JjL2NvbXBvbmVudHMvbGF5b3V0L01haW4vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1jb3JlXCI7XG5cbmludGVyZmFjZSBTdHlsZWRDb250YWluZXJQcm9wcyB7XG4gIHNob3dIZWFkZXJTdWJNZW51PzogYm9vbGVhbjtcbiAgaXNDb21wYWN0TW9kZT86IGJvb2xlYW47XG59XG5pbnRlcmZhY2UgU3R5bGVkTWFpblByb3BzIHtcbiAgcGFkZGluZ1RvcD86IG51bWJlcjtcbiAgdmVydGljYWxOYXZpZ2F0aW9uV2lkdGg/OiBudW1iZXI7XG59XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2PFN0eWxlZENvbnRhaW5lclByb3BzPihcbiAge1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIG1pbkhlaWdodDogXCIxMDB2aFwiXG4gIH0sXG4gIHByb3BzID0+ICh7XG4gICAgcGFkZGluZ1RvcDpcbiAgICAgIHByb3BzLnNob3dIZWFkZXJTdWJNZW51ICYmICFwcm9wcy5pc0NvbXBhY3RNb2RlXG4gICAgICAgID8gYGNhbGMoJHt0aGVtZS5oZWFkZXIuaGVpZ2h0fSArICR7dGhlbWUuaGVhZGVyLnNlY29uZExldmVsSGVpZ2h0fSlgXG4gICAgICAgIDogdGhlbWUuaGVhZGVyLmhlaWdodFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZE1haW4gPSBzdHlsZWQubWFpbjxTdHlsZWRNYWluUHJvcHM+KFxuICB7XG4gICAgZmxleDogMVxuICB9LFxuICBwcm9wcyA9PiAoe1xuICAgIHBhZGRpbmdUb3A6IHByb3BzLnBhZGRpbmdUb3BcbiAgICAgID8gYGNhbGMoJHtwcm9wcy5wYWRkaW5nVG9wfXB4ICsgJHt0aGVtZS5zcGFjZS54c30pYFxuICAgICAgOiB1bmRlZmluZWQsXG4gICAgd2lkdGg6IGBjYWxjKDEwMCUgLSAke3Byb3BzLnZlcnRpY2FsTmF2aWdhdGlvbldpZHRofXB4KWBcbiAgfSlcbik7XG4iXX0= */");
10
+ })(process.env.NODE_ENV === "production" ? {
11
+ name: "16itqce",
12
+ styles: "display:flex;min-height:100vh;padding-top:var(--headerHeight)"
13
+ } : {
14
+ name: "16itqce",
15
+ styles: "display:flex;min-height:100vh;padding-top:var(--headerHeight)",
16
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9NYWluL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFK0IiLCJmaWxlIjoiL19fdy9odi1hcHAtc2hlbGwvaHYtYXBwLXNoZWxsL2NsaWVudC9wYWNrYWdlcy9hcHAtc2hlbGwtdWkvc3JjL2NvbXBvbmVudHMvbGF5b3V0L01haW4vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2KHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIG1pbkhlaWdodDogXCIxMDB2aFwiLFxuICBwYWRkaW5nVG9wOiBcInZhcigtLWhlYWRlckhlaWdodClcIlxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRNYWluID0gc3R5bGVkLm1haW4oe1xuICBmbGV4OiAxLFxuICB3aWR0aDogXCJjYWxjKDEwMCUgLSB2YXIoLS12TmF2V2lkdGgpKVwiXG59KTtcbiJdfQ== */",
17
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
18
+ });
11
19
  const StyledMain = /* @__PURE__ */ _styled("main", process.env.NODE_ENV === "production" ? {
12
20
  target: "ew4l8di0"
13
21
  } : {
14
22
  target: "ew4l8di0",
15
23
  label: "StyledMain"
16
- })("flex:1;", (props) => ({
17
- paddingTop: props.paddingTop ? `calc(${props.paddingTop}px + ${theme.space.xs})` : void 0,
18
- width: `calc(100% - ${props.verticalNavigationWidth}px)`
19
- }), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9NYWluL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQjBCIiwiZmlsZSI6Ii9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9NYWluL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtcmVhY3QtY29yZVwiO1xuXG5pbnRlcmZhY2UgU3R5bGVkQ29udGFpbmVyUHJvcHMge1xuICBzaG93SGVhZGVyU3ViTWVudT86IGJvb2xlYW47XG4gIGlzQ29tcGFjdE1vZGU/OiBib29sZWFuO1xufVxuaW50ZXJmYWNlIFN0eWxlZE1haW5Qcm9wcyB7XG4gIHBhZGRpbmdUb3A/OiBudW1iZXI7XG4gIHZlcnRpY2FsTmF2aWdhdGlvbldpZHRoPzogbnVtYmVyO1xufVxuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkLmRpdjxTdHlsZWRDb250YWluZXJQcm9wcz4oXG4gIHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBtaW5IZWlnaHQ6IFwiMTAwdmhcIlxuICB9LFxuICBwcm9wcyA9PiAoe1xuICAgIHBhZGRpbmdUb3A6XG4gICAgICBwcm9wcy5zaG93SGVhZGVyU3ViTWVudSAmJiAhcHJvcHMuaXNDb21wYWN0TW9kZVxuICAgICAgICA/IGBjYWxjKCR7dGhlbWUuaGVhZGVyLmhlaWdodH0gKyAke3RoZW1lLmhlYWRlci5zZWNvbmRMZXZlbEhlaWdodH0pYFxuICAgICAgICA6IHRoZW1lLmhlYWRlci5oZWlnaHRcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRNYWluID0gc3R5bGVkLm1haW48U3R5bGVkTWFpblByb3BzPihcbiAge1xuICAgIGZsZXg6IDFcbiAgfSxcbiAgcHJvcHMgPT4gKHtcbiAgICBwYWRkaW5nVG9wOiBwcm9wcy5wYWRkaW5nVG9wXG4gICAgICA/IGBjYWxjKCR7cHJvcHMucGFkZGluZ1RvcH1weCArICR7dGhlbWUuc3BhY2UueHN9KWBcbiAgICAgIDogdW5kZWZpbmVkLFxuICAgIHdpZHRoOiBgY2FsYygxMDAlIC0gJHtwcm9wcy52ZXJ0aWNhbE5hdmlnYXRpb25XaWR0aH1weClgXG4gIH0pXG4pO1xuIl19 */");
24
+ })(process.env.NODE_ENV === "production" ? {
25
+ name: "1j8smgh",
26
+ styles: "flex:1;width:calc(100% - var(--vNavWidth))"
27
+ } : {
28
+ name: "1j8smgh",
29
+ styles: "flex:1;width:calc(100% - var(--vNavWidth))",
30
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9NYWluL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRMEIiLCJmaWxlIjoiL19fdy9odi1hcHAtc2hlbGwvaHYtYXBwLXNoZWxsL2NsaWVudC9wYWNrYWdlcy9hcHAtc2hlbGwtdWkvc3JjL2NvbXBvbmVudHMvbGF5b3V0L01haW4vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2KHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIG1pbkhlaWdodDogXCIxMDB2aFwiLFxuICBwYWRkaW5nVG9wOiBcInZhcigtLWhlYWRlckhlaWdodClcIlxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRNYWluID0gc3R5bGVkLm1haW4oe1xuICBmbGV4OiAxLFxuICB3aWR0aDogXCJjYWxjKDEwMCUgLSB2YXIoLS12TmF2V2lkdGgpKVwiXG59KTtcbiJdfQ== */",
31
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
32
+ });
20
33
  export {
21
34
  StyledContainer,
22
35
  StyledMain
@@ -1,9 +1,10 @@
1
- import { jsx, jsxs } from "@emotion/react/jsx-runtime";
2
- import { useRef, useEffect } from "react";
1
+ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
2
+ import { useRef } from "react";
3
3
  import { useTranslation } from "react-i18next";
4
4
  import { cx } from "@emotion/css";
5
- import { HvVerticalNavigation, HvVerticalNavigationHeader, HvVerticalNavigationTree, HvVerticalNavigationActions } from "@hitachivantara/uikit-react-core";
5
+ import { useTheme, HvVerticalNavigation, HvVerticalNavigationHeader, HvVerticalNavigationTree, HvVerticalNavigationActions } from "@hitachivantara/uikit-react-core";
6
6
  import { useHvNavigation } from "@hitachivantara/app-shell-navigation";
7
+ import { useResizeObserver } from "../../../lib/hooks/useResizeObserver.js";
7
8
  import useNavigationContext from "../../../providers/hooks/useNavigationContext.js";
8
9
  import { classes } from "./styles.js";
9
10
  import withClickAwayListener from "../../hoc/withClickAwayListener.js";
@@ -28,8 +29,12 @@ const VerticalNavigation = () => {
28
29
  const {
29
30
  navigate
30
31
  } = useHvNavigation();
31
- const verticalNavigationRef = useRef(null);
32
- const isVerticalNavigationExpanded = verticalNavigationMode === "EXPANDED";
32
+ const {
33
+ activeTheme
34
+ } = useTheme();
35
+ const ref = useRef(null);
36
+ const open = verticalNavigationMode === "EXPANDED";
37
+ const isPentahoTheme = activeTheme?.name === "pentahoPlus";
33
38
  const changeHandler = (event, selectedItem) => {
34
39
  event.preventDefault();
35
40
  if (selectedItem.href) {
@@ -43,33 +48,24 @@ const VerticalNavigation = () => {
43
48
  }
44
49
  }
45
50
  };
46
- useEffect(() => {
47
- const {
48
- current
49
- } = verticalNavigationRef;
50
- const firstChild = current?.childNodes[0];
51
- if (firstChild && !isCompactMode) {
52
- setVerticalNavigationWidth(firstChild.offsetWidth);
53
- } else {
54
- setVerticalNavigationWidth(0);
55
- }
56
- return () => setVerticalNavigationWidth(0);
57
- }, [verticalNavigationMode, isCompactMode, setVerticalNavigationWidth]);
58
- const collapseButtonAriaLabel = isVerticalNavigationExpanded ? t("ariaLabelCollapse") : t("ariaLabelExpand");
59
- return /* @__PURE__ */ jsx("div", { ref: verticalNavigationRef, children: /* @__PURE__ */ jsxs(HvVerticalNavigation, { className: cx(classes.navigation, {
60
- [classes.navigationCompact]: isCompactMode
61
- }), open: isVerticalNavigationExpanded, useIcons: true, slider: isCompactMode, children: [
51
+ useResizeObserver(ref, (width) => {
52
+ setVerticalNavigationWidth(isCompactMode ? 0 : width);
53
+ });
54
+ return /* @__PURE__ */ jsxs(HvVerticalNavigation, { ref, className: cx(classes.root, {
55
+ [classes.pentaho]: isPentahoTheme && !isCompactMode,
56
+ [classes.compact]: isCompactMode
57
+ }), open, useIcons: true, slider: isCompactMode, children: [
62
58
  /* @__PURE__ */ jsx(HvVerticalNavigationHeader, { title: t("title"), onCollapseButtonClick: !isCompactMode ? switchVerticalNavigationMode : void 0, collapseButtonProps: {
63
- "aria-label": collapseButtonAriaLabel,
64
- "aria-expanded": isVerticalNavigationExpanded
59
+ "aria-label": t(open ? "ariaLabelCollapse" : "ariaLabelExpand"),
60
+ "aria-expanded": open
65
61
  }, backButtonProps: {
66
62
  "aria-label": t("ariaLabelHeaderBackButton")
67
63
  } }),
68
64
  /* @__PURE__ */ jsx(HvVerticalNavigationTree, { mode: "navigation", collapsible: true, "aria-label": t("ariaLabelNavigationTree"), selected: selectedMenuItemId, onChange: changeHandler, data: verticalNavigationItems, classes: {
69
- navigationPopup: classes.navigationPopup
65
+ navigationPopup: classes.popup
70
66
  }, sliderForwardButtonAriaLabel: t("ariaLabelSliderForwardButton") }, rootMenuItemId),
71
67
  /* @__PURE__ */ jsx(HvVerticalNavigationActions, {})
72
- ] }) });
68
+ ] });
73
69
  };
74
70
  const VerticalNavigation$1 = withClickAwayListener(VerticalNavigation);
75
71
  export {
@@ -1,32 +1,30 @@
1
1
  import { css } from "@emotion/css";
2
2
  import { theme, verticalNavigationTreeClasses } from "@hitachivantara/uikit-react-core";
3
- function _EMOTION_STRINGIFIED_CSS_ERROR__() {
4
- 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).";
5
- }
6
3
  const classes = {
7
- navigation: /* @__PURE__ */ css({
4
+ root: /* @__PURE__ */ css({
8
5
  height: `calc(100vh - ${theme.header.height})`,
9
6
  top: theme.header.height,
10
7
  zIndex: theme.zIndices.overlay,
11
8
  position: "sticky"
12
- }, process.env.NODE_ENV === "production" ? "" : ";label:navigation;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9WZXJ0aWNhbE5hdmlnYXRpb24vc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9jIiwiZmlsZSI6Ii9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9WZXJ0aWNhbE5hdmlnYXRpb24vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHtcbiAgdGhlbWUsXG4gIHZlcnRpY2FsTmF2aWdhdGlvblRyZWVDbGFzc2VzXG59IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtcmVhY3QtY29yZVwiO1xuXG5leHBvcnQgY29uc3QgY2xhc3NlcyA9IHtcbiAgbmF2aWdhdGlvbjogY3NzKHtcbiAgICBoZWlnaHQ6IGBjYWxjKDEwMHZoIC0gJHt0aGVtZS5oZWFkZXIuaGVpZ2h0fSlgLFxuICAgIHRvcDogdGhlbWUuaGVhZGVyLmhlaWdodCxcbiAgICB6SW5kZXg6IHRoZW1lLnpJbmRpY2VzLm92ZXJsYXksXG4gICAgcG9zaXRpb246IFwic3RpY2t5XCJcbiAgfSksXG4gIG5hdmlnYXRpb25Db21wYWN0OiBjc3Moe1xuICAgIHBvc2l0aW9uOiBcImZpeGVkXCJcbiAgfSksXG4gIG5hdmlnYXRpb25Qb3B1cDogY3NzKHtcbiAgICBtYXhIZWlnaHQ6IGBjYWxjKDEwMHZoIC0gJHt0aGVtZS5oZWFkZXIuaGVpZ2h0fSlgLFxuICAgIG92ZXJmbG93WTogXCJhdXRvXCIsXG4gICAgYm94U2hhZG93OiB0aGVtZS5jb2xvcnMuc2hhZG93LFxuICAgIFtgJiAuJHt2ZXJ0aWNhbE5hdmlnYXRpb25UcmVlQ2xhc3Nlcy5wb3B1cH1gXTogeyBib3hTaGFkb3c6IFwibm9uZVwiIH1cbiAgfSlcbn07XG4iXX0= */"),
13
- navigationCompact: /* @__PURE__ */ css(process.env.NODE_ENV === "production" ? {
14
- name: "duudsh",
15
- styles: "position:fixed"
16
- } : {
17
- name: "vmndjy-navigationCompact",
18
- styles: "position:fixed;label:navigationCompact;",
19
- map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9WZXJ0aWNhbE5hdmlnYXRpb24vc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFxQiIsImZpbGUiOiIvX193L2h2LWFwcC1zaGVsbC9odi1hcHAtc2hlbGwvY2xpZW50L3BhY2thZ2VzL2FwcC1zaGVsbC11aS9zcmMvY29tcG9uZW50cy9sYXlvdXQvVmVydGljYWxOYXZpZ2F0aW9uL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7XG4gIHRoZW1lLFxuICB2ZXJ0aWNhbE5hdmlnYXRpb25UcmVlQ2xhc3Nlc1xufSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXJlYWN0LWNvcmVcIjtcblxuZXhwb3J0IGNvbnN0IGNsYXNzZXMgPSB7XG4gIG5hdmlnYXRpb246IGNzcyh7XG4gICAgaGVpZ2h0OiBgY2FsYygxMDB2aCAtICR7dGhlbWUuaGVhZGVyLmhlaWdodH0pYCxcbiAgICB0b3A6IHRoZW1lLmhlYWRlci5oZWlnaHQsXG4gICAgekluZGV4OiB0aGVtZS56SW5kaWNlcy5vdmVybGF5LFxuICAgIHBvc2l0aW9uOiBcInN0aWNreVwiXG4gIH0pLFxuICBuYXZpZ2F0aW9uQ29tcGFjdDogY3NzKHtcbiAgICBwb3NpdGlvbjogXCJmaXhlZFwiXG4gIH0pLFxuICBuYXZpZ2F0aW9uUG9wdXA6IGNzcyh7XG4gICAgbWF4SGVpZ2h0OiBgY2FsYygxMDB2aCAtICR7dGhlbWUuaGVhZGVyLmhlaWdodH0pYCxcbiAgICBvdmVyZmxvd1k6IFwiYXV0b1wiLFxuICAgIGJveFNoYWRvdzogdGhlbWUuY29sb3JzLnNoYWRvdyxcbiAgICBbYCYgLiR7dmVydGljYWxOYXZpZ2F0aW9uVHJlZUNsYXNzZXMucG9wdXB9YF06IHsgYm94U2hhZG93OiBcIm5vbmVcIiB9XG4gIH0pXG59O1xuIl19 */",
20
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
21
- }),
22
- navigationPopup: /* @__PURE__ */ css({
9
+ }, process.env.NODE_ENV === "production" ? "" : ";label:root;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9WZXJ0aWNhbE5hdmlnYXRpb24vc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9RIiwiZmlsZSI6Ii9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9WZXJ0aWNhbE5hdmlnYXRpb24vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHtcbiAgdGhlbWUsXG4gIHZlcnRpY2FsTmF2aWdhdGlvblRyZWVDbGFzc2VzXG59IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtcmVhY3QtY29yZVwiO1xuXG5leHBvcnQgY29uc3QgY2xhc3NlcyA9IHtcbiAgcm9vdDogY3NzKHtcbiAgICBoZWlnaHQ6IGBjYWxjKDEwMHZoIC0gJHt0aGVtZS5oZWFkZXIuaGVpZ2h0fSlgLFxuICAgIHRvcDogdGhlbWUuaGVhZGVyLmhlaWdodCxcbiAgICB6SW5kZXg6IHRoZW1lLnpJbmRpY2VzLm92ZXJsYXksXG4gICAgcG9zaXRpb246IFwic3RpY2t5XCJcbiAgfSksXG4gIC8qKiBmdWxsLWhlaWdodCBWZXJ0aWNhbCBOYXZpZ2F0aW9uICovXG4gIHBlbnRhaG86IGNzcyh7XG4gICAgaGVpZ2h0OiBcIjEwMGR2aFwiLFxuICAgIG1hcmdpblRvcDogYGNhbGMoLTEgKiB2YXIoLS1oZWFkZXJIZWlnaHQpKWAsXG4gICAgdG9wOiAwXG4gIH0pLFxuICBjb21wYWN0OiBjc3Moe1xuICAgIHBvc2l0aW9uOiBcImZpeGVkXCIsXG4gICAgdG9wOiB0aGVtZS5oZWFkZXIuaGVpZ2h0XG4gIH0pLFxuICBwb3B1cDogY3NzKHtcbiAgICBtYXhIZWlnaHQ6IGBjYWxjKDEwMHZoIC0gJHt0aGVtZS5oZWFkZXIuaGVpZ2h0fSlgLFxuICAgIG92ZXJmbG93WTogXCJhdXRvXCIsXG4gICAgYm94U2hhZG93OiB0aGVtZS5jb2xvcnMuc2hhZG93LFxuICAgIFtgJiAuJHt2ZXJ0aWNhbE5hdmlnYXRpb25UcmVlQ2xhc3Nlcy5wb3B1cH1gXTogeyBib3hTaGFkb3c6IFwibm9uZVwiIH1cbiAgfSlcbn07XG4iXX0= */"),
10
+ /** full-height Vertical Navigation */
11
+ pentaho: /* @__PURE__ */ css({
12
+ height: "100dvh",
13
+ marginTop: `calc(-1 * var(--headerHeight))`,
14
+ top: 0
15
+ }, process.env.NODE_ENV === "production" ? "" : ";label:pentaho;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9WZXJ0aWNhbE5hdmlnYXRpb24vc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWNXIiwiZmlsZSI6Ii9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9WZXJ0aWNhbE5hdmlnYXRpb24vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHtcbiAgdGhlbWUsXG4gIHZlcnRpY2FsTmF2aWdhdGlvblRyZWVDbGFzc2VzXG59IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtcmVhY3QtY29yZVwiO1xuXG5leHBvcnQgY29uc3QgY2xhc3NlcyA9IHtcbiAgcm9vdDogY3NzKHtcbiAgICBoZWlnaHQ6IGBjYWxjKDEwMHZoIC0gJHt0aGVtZS5oZWFkZXIuaGVpZ2h0fSlgLFxuICAgIHRvcDogdGhlbWUuaGVhZGVyLmhlaWdodCxcbiAgICB6SW5kZXg6IHRoZW1lLnpJbmRpY2VzLm92ZXJsYXksXG4gICAgcG9zaXRpb246IFwic3RpY2t5XCJcbiAgfSksXG4gIC8qKiBmdWxsLWhlaWdodCBWZXJ0aWNhbCBOYXZpZ2F0aW9uICovXG4gIHBlbnRhaG86IGNzcyh7XG4gICAgaGVpZ2h0OiBcIjEwMGR2aFwiLFxuICAgIG1hcmdpblRvcDogYGNhbGMoLTEgKiB2YXIoLS1oZWFkZXJIZWlnaHQpKWAsXG4gICAgdG9wOiAwXG4gIH0pLFxuICBjb21wYWN0OiBjc3Moe1xuICAgIHBvc2l0aW9uOiBcImZpeGVkXCIsXG4gICAgdG9wOiB0aGVtZS5oZWFkZXIuaGVpZ2h0XG4gIH0pLFxuICBwb3B1cDogY3NzKHtcbiAgICBtYXhIZWlnaHQ6IGBjYWxjKDEwMHZoIC0gJHt0aGVtZS5oZWFkZXIuaGVpZ2h0fSlgLFxuICAgIG92ZXJmbG93WTogXCJhdXRvXCIsXG4gICAgYm94U2hhZG93OiB0aGVtZS5jb2xvcnMuc2hhZG93LFxuICAgIFtgJiAuJHt2ZXJ0aWNhbE5hdmlnYXRpb25UcmVlQ2xhc3Nlcy5wb3B1cH1gXTogeyBib3hTaGFkb3c6IFwibm9uZVwiIH1cbiAgfSlcbn07XG4iXX0= */"),
16
+ compact: /* @__PURE__ */ css({
17
+ position: "fixed",
18
+ top: theme.header.height
19
+ }, process.env.NODE_ENV === "production" ? "" : ";label:compact;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9WZXJ0aWNhbE5hdmlnYXRpb24vc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1CVyIsImZpbGUiOiIvX193L2h2LWFwcC1zaGVsbC9odi1hcHAtc2hlbGwvY2xpZW50L3BhY2thZ2VzL2FwcC1zaGVsbC11aS9zcmMvY29tcG9uZW50cy9sYXlvdXQvVmVydGljYWxOYXZpZ2F0aW9uL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7XG4gIHRoZW1lLFxuICB2ZXJ0aWNhbE5hdmlnYXRpb25UcmVlQ2xhc3Nlc1xufSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXJlYWN0LWNvcmVcIjtcblxuZXhwb3J0IGNvbnN0IGNsYXNzZXMgPSB7XG4gIHJvb3Q6IGNzcyh7XG4gICAgaGVpZ2h0OiBgY2FsYygxMDB2aCAtICR7dGhlbWUuaGVhZGVyLmhlaWdodH0pYCxcbiAgICB0b3A6IHRoZW1lLmhlYWRlci5oZWlnaHQsXG4gICAgekluZGV4OiB0aGVtZS56SW5kaWNlcy5vdmVybGF5LFxuICAgIHBvc2l0aW9uOiBcInN0aWNreVwiXG4gIH0pLFxuICAvKiogZnVsbC1oZWlnaHQgVmVydGljYWwgTmF2aWdhdGlvbiAqL1xuICBwZW50YWhvOiBjc3Moe1xuICAgIGhlaWdodDogXCIxMDBkdmhcIixcbiAgICBtYXJnaW5Ub3A6IGBjYWxjKC0xICogdmFyKC0taGVhZGVySGVpZ2h0KSlgLFxuICAgIHRvcDogMFxuICB9KSxcbiAgY29tcGFjdDogY3NzKHtcbiAgICBwb3NpdGlvbjogXCJmaXhlZFwiLFxuICAgIHRvcDogdGhlbWUuaGVhZGVyLmhlaWdodFxuICB9KSxcbiAgcG9wdXA6IGNzcyh7XG4gICAgbWF4SGVpZ2h0OiBgY2FsYygxMDB2aCAtICR7dGhlbWUuaGVhZGVyLmhlaWdodH0pYCxcbiAgICBvdmVyZmxvd1k6IFwiYXV0b1wiLFxuICAgIGJveFNoYWRvdzogdGhlbWUuY29sb3JzLnNoYWRvdyxcbiAgICBbYCYgLiR7dmVydGljYWxOYXZpZ2F0aW9uVHJlZUNsYXNzZXMucG9wdXB9YF06IHsgYm94U2hhZG93OiBcIm5vbmVcIiB9XG4gIH0pXG59O1xuIl19 */"),
20
+ popup: /* @__PURE__ */ css({
23
21
  maxHeight: `calc(100vh - ${theme.header.height})`,
24
22
  overflowY: "auto",
25
23
  boxShadow: theme.colors.shadow,
26
24
  [`& .${verticalNavigationTreeClasses.popup}`]: {
27
25
  boxShadow: "none"
28
26
  }
29
- }, process.env.NODE_ENV === "production" ? "" : ";label:navigationPopup;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9WZXJ0aWNhbE5hdmlnYXRpb24vc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCbUIiLCJmaWxlIjoiL19fdy9odi1hcHAtc2hlbGwvaHYtYXBwLXNoZWxsL2NsaWVudC9wYWNrYWdlcy9hcHAtc2hlbGwtdWkvc3JjL2NvbXBvbmVudHMvbGF5b3V0L1ZlcnRpY2FsTmF2aWdhdGlvbi9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQge1xuICB0aGVtZSxcbiAgdmVydGljYWxOYXZpZ2F0aW9uVHJlZUNsYXNzZXNcbn0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1jb3JlXCI7XG5cbmV4cG9ydCBjb25zdCBjbGFzc2VzID0ge1xuICBuYXZpZ2F0aW9uOiBjc3Moe1xuICAgIGhlaWdodDogYGNhbGMoMTAwdmggLSAke3RoZW1lLmhlYWRlci5oZWlnaHR9KWAsXG4gICAgdG9wOiB0aGVtZS5oZWFkZXIuaGVpZ2h0LFxuICAgIHpJbmRleDogdGhlbWUuekluZGljZXMub3ZlcmxheSxcbiAgICBwb3NpdGlvbjogXCJzdGlja3lcIlxuICB9KSxcbiAgbmF2aWdhdGlvbkNvbXBhY3Q6IGNzcyh7XG4gICAgcG9zaXRpb246IFwiZml4ZWRcIlxuICB9KSxcbiAgbmF2aWdhdGlvblBvcHVwOiBjc3Moe1xuICAgIG1heEhlaWdodDogYGNhbGMoMTAwdmggLSAke3RoZW1lLmhlYWRlci5oZWlnaHR9KWAsXG4gICAgb3ZlcmZsb3dZOiBcImF1dG9cIixcbiAgICBib3hTaGFkb3c6IHRoZW1lLmNvbG9ycy5zaGFkb3csXG4gICAgW2AmIC4ke3ZlcnRpY2FsTmF2aWdhdGlvblRyZWVDbGFzc2VzLnBvcHVwfWBdOiB7IGJveFNoYWRvdzogXCJub25lXCIgfVxuICB9KVxufTtcbiJdfQ== */")
27
+ }, process.env.NODE_ENV === "production" ? "" : ";label:popup;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9jb21wb25lbnRzL2xheW91dC9WZXJ0aWNhbE5hdmlnYXRpb24vc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCUyIsImZpbGUiOiIvX193L2h2LWFwcC1zaGVsbC9odi1hcHAtc2hlbGwvY2xpZW50L3BhY2thZ2VzL2FwcC1zaGVsbC11aS9zcmMvY29tcG9uZW50cy9sYXlvdXQvVmVydGljYWxOYXZpZ2F0aW9uL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7XG4gIHRoZW1lLFxuICB2ZXJ0aWNhbE5hdmlnYXRpb25UcmVlQ2xhc3Nlc1xufSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXJlYWN0LWNvcmVcIjtcblxuZXhwb3J0IGNvbnN0IGNsYXNzZXMgPSB7XG4gIHJvb3Q6IGNzcyh7XG4gICAgaGVpZ2h0OiBgY2FsYygxMDB2aCAtICR7dGhlbWUuaGVhZGVyLmhlaWdodH0pYCxcbiAgICB0b3A6IHRoZW1lLmhlYWRlci5oZWlnaHQsXG4gICAgekluZGV4OiB0aGVtZS56SW5kaWNlcy5vdmVybGF5LFxuICAgIHBvc2l0aW9uOiBcInN0aWNreVwiXG4gIH0pLFxuICAvKiogZnVsbC1oZWlnaHQgVmVydGljYWwgTmF2aWdhdGlvbiAqL1xuICBwZW50YWhvOiBjc3Moe1xuICAgIGhlaWdodDogXCIxMDBkdmhcIixcbiAgICBtYXJnaW5Ub3A6IGBjYWxjKC0xICogdmFyKC0taGVhZGVySGVpZ2h0KSlgLFxuICAgIHRvcDogMFxuICB9KSxcbiAgY29tcGFjdDogY3NzKHtcbiAgICBwb3NpdGlvbjogXCJmaXhlZFwiLFxuICAgIHRvcDogdGhlbWUuaGVhZGVyLmhlaWdodFxuICB9KSxcbiAgcG9wdXA6IGNzcyh7XG4gICAgbWF4SGVpZ2h0OiBgY2FsYygxMDB2aCAtICR7dGhlbWUuaGVhZGVyLmhlaWdodH0pYCxcbiAgICBvdmVyZmxvd1k6IFwiYXV0b1wiLFxuICAgIGJveFNoYWRvdzogdGhlbWUuY29sb3JzLnNoYWRvdyxcbiAgICBbYCYgLiR7dmVydGljYWxOYXZpZ2F0aW9uVHJlZUNsYXNzZXMucG9wdXB9YF06IHsgYm94U2hhZG93OiBcIm5vbmVcIiB9XG4gIH0pXG59O1xuIl19 */")
30
28
  };
31
29
  export {
32
30
  classes
@@ -0,0 +1,16 @@
1
+ import { useEffect } from "react";
2
+ function useResizeObserver(ref, onResize) {
3
+ useEffect(() => {
4
+ if (!ref.current) return void 0;
5
+ const observer = new ResizeObserver(([entry]) => {
6
+ onResize(entry.contentRect.width, entry.contentRect.height);
7
+ });
8
+ observer.observe(ref.current);
9
+ return () => {
10
+ observer.disconnect();
11
+ };
12
+ }, [onResize, ref]);
13
+ }
14
+ export {
15
+ useResizeObserver
16
+ };
@@ -1,4 +1,4 @@
1
- import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
1
+ import { jsx, jsxs } from "@emotion/react/jsx-runtime";
2
2
  import { Suspense } from "react";
3
3
  import { Outlet } from "react-router-dom";
4
4
  import { ErrorBoundary } from "react-error-boundary";
@@ -14,10 +14,8 @@ const Root = ({
14
14
  providers
15
15
  }) => /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(GenericError, { fullPage: true }), children: /* @__PURE__ */ jsx(CombinedProviders, { providers, children: /* @__PURE__ */ jsx(NavigationProvider, { children: /* @__PURE__ */ jsxs(BannerProvider, { children: [
16
16
  /* @__PURE__ */ jsx(CustomHooksInitializer, {}),
17
- /* @__PURE__ */ jsxs(Fragment, { children: [
18
- /* @__PURE__ */ jsx(Header, {}),
19
- /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingPage, {}), children: /* @__PURE__ */ jsx(Outlet, {}) }) })
20
- ] })
17
+ /* @__PURE__ */ jsx(Header, {}),
18
+ /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingPage, {}), children: /* @__PURE__ */ jsx(Outlet, {}) }) })
21
19
  ] }) }) }) });
22
20
  const RootRoute = Root;
23
21
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/app-shell-ui",
3
- "version": "1.6.4",
3
+ "version": "1.7.0",
4
4
  "description": "AppShell Component",
5
5
  "author": "Hitachi Vantara - Boba Fett Team",
6
6
  "license": "Apache-2.0",
@@ -64,5 +64,5 @@
64
64
  "rimraf": "^5.0.5",
65
65
  "vite": "^5.0.4"
66
66
  },
67
- "gitHead": "a044e2d19f6fac00605673bf9c97648388786286"
67
+ "gitHead": "0d03c45e299459b3e7f0af27482aaba42cd11dd0"
68
68
  }