@hitachivantara/app-shell-ui 1.4.0 → 1.4.1
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.
- package/dist/esm/components/layout/Header/Header.js +17 -15
- package/dist/esm/components/layout/Header/Header.js.map +1 -1
- package/dist/esm/components/layout/Header/HeaderActions/InternalActions/AppSwitcherToggle/AppSwitcherToggle.js +15 -13
- package/dist/esm/components/layout/Header/HeaderActions/InternalActions/AppSwitcherToggle/AppSwitcherToggle.js.map +1 -1
- package/dist/esm/components/layout/Header/HeaderActions/InternalActions/ColorModeSwitcher/ColorModeSwitcher.js +4 -2
- package/dist/esm/components/layout/Header/HeaderActions/InternalActions/ColorModeSwitcher/ColorModeSwitcher.js.map +1 -1
- package/dist/esm/components/layout/Header/HeaderActions/InternalActions/HelpButton/HelpButton.js +6 -4
- package/dist/esm/components/layout/Header/HeaderActions/InternalActions/HelpButton/HelpButton.js.map +1 -1
- package/dist/esm/components/layout/VerticalNavigation/VerticalNavigation.js +31 -29
- package/dist/esm/components/layout/VerticalNavigation/VerticalNavigation.js.map +1 -1
- package/dist/esm/pages/GenericError/GenericError.js +11 -9
- package/dist/esm/pages/GenericError/GenericError.js.map +1 -1
- package/dist/esm/pages/NotFound/NotFound.js +11 -9
- package/dist/esm/pages/NotFound/NotFound.js.map +1 -1
- package/dist/esm/providers/BannerProvider.js +43 -41
- package/dist/esm/providers/BannerProvider.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,30 +1,32 @@
|
|
|
1
1
|
import { jsxs as u, jsx as o } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { Helmet as M } from "react-helmet-async";
|
|
3
3
|
import { useTranslation as d } from "react-i18next";
|
|
4
|
-
import { HvHeader as I, HvButton as
|
|
4
|
+
import { HvHeader as I, HvButton as x, HvHeaderBrand as O, HvHeaderNavigation as S } from "@hitachivantara/uikit-react-core";
|
|
5
5
|
import { CONFIG_TRANSLATIONS_NAMESPACE as A, useHvAppShellConfig as L } from "@hitachivantara/app-shell-shared";
|
|
6
6
|
import { useHvNavigation as T } from "@hitachivantara/app-shell-navigation";
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
7
|
+
import P from "./styles.js";
|
|
8
|
+
import B from "../../../providers/hooks/useNavigationContext.js";
|
|
9
|
+
import E from "../../IconUiKit/index.js";
|
|
10
10
|
import _ from "./HeaderActions/HeaderActions.js";
|
|
11
|
-
import
|
|
12
|
-
const
|
|
11
|
+
import k from "./BrandLogo/BrandLogo.js";
|
|
12
|
+
const w = () => {
|
|
13
13
|
const {
|
|
14
14
|
t: n
|
|
15
|
-
} = d(
|
|
15
|
+
} = d(void 0, {
|
|
16
|
+
keyPrefix: "header.navigation"
|
|
17
|
+
}), {
|
|
16
18
|
t: c
|
|
17
19
|
} = d(A), e = L(), {
|
|
18
20
|
navigate: m
|
|
19
21
|
} = T(), {
|
|
20
22
|
items: a,
|
|
21
|
-
selectedMenuItemId:
|
|
22
|
-
rootMenuItemId:
|
|
23
|
+
selectedMenuItemId: v,
|
|
24
|
+
rootMenuItemId: g,
|
|
23
25
|
isCompactMode: r,
|
|
24
26
|
switchVerticalNavigationMode: p,
|
|
25
27
|
verticalNavigationMode: f,
|
|
26
|
-
verticalNavigationItems:
|
|
27
|
-
} =
|
|
28
|
+
verticalNavigationItems: N
|
|
29
|
+
} = B(), l = e.navigationMode === "ONLY_TOP", h = !r && e.navigationMode !== "ONLY_LEFT" && a.length > 0, t = f === "CLOSED", C = r && N.length > 0, H = (y, i) => {
|
|
28
30
|
i.href && m(i.href, {
|
|
29
31
|
state: {
|
|
30
32
|
selectedItemId: i.id
|
|
@@ -33,12 +35,12 @@ const V = () => {
|
|
|
33
35
|
}, s = e.name ? c(e.name) : "";
|
|
34
36
|
return /* @__PURE__ */ u(I, { position: "fixed", children: [
|
|
35
37
|
/* @__PURE__ */ o(M, { children: /* @__PURE__ */ o("title", { children: s }) }),
|
|
36
|
-
C && /* @__PURE__ */ o(
|
|
37
|
-
/* @__PURE__ */ o(
|
|
38
|
-
|
|
38
|
+
C && /* @__PURE__ */ o(x, { icon: !0, "aria-label": n(t ? "openNavigationPanel" : "closeNavigationPanel"), "aria-expanded": !t, onClick: p, children: /* @__PURE__ */ o(E, { name: t ? "Menu" : "Close" }) }),
|
|
39
|
+
/* @__PURE__ */ o(O, { logo: /* @__PURE__ */ o(P, { children: /* @__PURE__ */ o(k, { logo: e.logo }) }), name: s }),
|
|
40
|
+
h && /* @__PURE__ */ o(S, { data: a, selected: l ? v : g, onClick: H, levels: l ? 2 : 1 }),
|
|
39
41
|
/* @__PURE__ */ o(_, {})
|
|
40
42
|
] });
|
|
41
|
-
}, $ =
|
|
43
|
+
}, $ = w;
|
|
42
44
|
export {
|
|
43
45
|
$ as default
|
|
44
46
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../../../../src/components/layout/Header/Header.tsx"],"sourcesContent":["import { Helmet } from \"react-helmet-async\";\nimport { useTranslation } from \"react-i18next\";\n\nimport {\n HvButton,\n HvHeader,\n HvHeaderBrand,\n HvHeaderNavigation,\n HvHeaderNavigationProps\n} from \"@hitachivantara/uikit-react-core\";\n\nimport {\n CONFIG_TRANSLATIONS_NAMESPACE,\n useHvAppShellConfig\n} from \"@hitachivantara/app-shell-shared\";\nimport { useHvNavigation } from \"@hitachivantara/app-shell-navigation\";\n\nimport BrandLogo from \"./BrandLogo\";\nimport StyledIconWrapper from \"./styles\";\n\nimport useNavigationContext from \"../../../providers/hooks/useNavigationContext\";\nimport IconUiKit from \"../../IconUiKit\";\nimport HeaderActions from \"./HeaderActions\";\n\nconst Header = () => {\n const { t } = useTranslation();\n const { t: tConfig } = useTranslation(CONFIG_TRANSLATIONS_NAMESPACE);\n const appShellConfig = useHvAppShellConfig();\n const { navigate } = useHvNavigation();\n\n const {\n items,\n selectedMenuItemId,\n rootMenuItemId,\n isCompactMode,\n switchVerticalNavigationMode,\n verticalNavigationMode,\n verticalNavigationItems\n } = useNavigationContext();\n\n const isOnlyTopMode = appShellConfig.navigationMode === \"ONLY_TOP\";\n const showNavigation =\n !isCompactMode &&\n appShellConfig.navigationMode !== \"ONLY_LEFT\" &&\n items.length > 0;\n const isVerticalNavigationClosed = verticalNavigationMode === \"CLOSED\";\n const showVerticalNavigationButton =\n isCompactMode && verticalNavigationItems.length > 0;\n\n const handleNavigationChange: HvHeaderNavigationProps[\"onClick\"] = (\n event,\n selectedItem\n ) => {\n if (selectedItem.href) {\n navigate(selectedItem.href, {\n state: { selectedItemId: selectedItem.id }\n });\n }\n };\n\n const name = appShellConfig.name ? tConfig(appShellConfig.name) : \"\";\n\n return (\n <HvHeader position=\"fixed\">\n <Helmet>\n <title>{name}</title>\n </Helmet>\n\n {showVerticalNavigationButton && (\n <HvButton\n icon\n aria-label={\n isVerticalNavigationClosed\n ? t(\"
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../../../../src/components/layout/Header/Header.tsx"],"sourcesContent":["import { Helmet } from \"react-helmet-async\";\nimport { useTranslation } from \"react-i18next\";\n\nimport {\n HvButton,\n HvHeader,\n HvHeaderBrand,\n HvHeaderNavigation,\n HvHeaderNavigationProps\n} from \"@hitachivantara/uikit-react-core\";\n\nimport {\n CONFIG_TRANSLATIONS_NAMESPACE,\n useHvAppShellConfig\n} from \"@hitachivantara/app-shell-shared\";\nimport { useHvNavigation } from \"@hitachivantara/app-shell-navigation\";\n\nimport BrandLogo from \"./BrandLogo\";\nimport StyledIconWrapper from \"./styles\";\n\nimport useNavigationContext from \"../../../providers/hooks/useNavigationContext\";\nimport IconUiKit from \"../../IconUiKit\";\nimport HeaderActions from \"./HeaderActions\";\n\nconst Header = () => {\n const { t } = useTranslation(undefined, { keyPrefix: \"header.navigation\" });\n const { t: tConfig } = useTranslation(CONFIG_TRANSLATIONS_NAMESPACE);\n const appShellConfig = useHvAppShellConfig();\n const { navigate } = useHvNavigation();\n\n const {\n items,\n selectedMenuItemId,\n rootMenuItemId,\n isCompactMode,\n switchVerticalNavigationMode,\n verticalNavigationMode,\n verticalNavigationItems\n } = useNavigationContext();\n\n const isOnlyTopMode = appShellConfig.navigationMode === \"ONLY_TOP\";\n const showNavigation =\n !isCompactMode &&\n appShellConfig.navigationMode !== \"ONLY_LEFT\" &&\n items.length > 0;\n const isVerticalNavigationClosed = verticalNavigationMode === \"CLOSED\";\n const showVerticalNavigationButton =\n isCompactMode && verticalNavigationItems.length > 0;\n\n const handleNavigationChange: HvHeaderNavigationProps[\"onClick\"] = (\n event,\n selectedItem\n ) => {\n if (selectedItem.href) {\n navigate(selectedItem.href, {\n state: { selectedItemId: selectedItem.id }\n });\n }\n };\n\n const name = appShellConfig.name ? tConfig(appShellConfig.name) : \"\";\n\n return (\n <HvHeader position=\"fixed\">\n <Helmet>\n <title>{name}</title>\n </Helmet>\n\n {showVerticalNavigationButton && (\n <HvButton\n icon\n aria-label={\n isVerticalNavigationClosed\n ? t(\"openNavigationPanel\")\n : t(\"closeNavigationPanel\")\n }\n aria-expanded={!isVerticalNavigationClosed}\n onClick={switchVerticalNavigationMode}>\n <IconUiKit name={isVerticalNavigationClosed ? \"Menu\" : \"Close\"} />\n </HvButton>\n )}\n\n <HvHeaderBrand\n logo={\n <StyledIconWrapper>\n <BrandLogo logo={appShellConfig.logo} />\n </StyledIconWrapper>\n }\n name={name}\n />\n {showNavigation && (\n <HvHeaderNavigation\n data={items}\n selected={isOnlyTopMode ? selectedMenuItemId : rootMenuItemId}\n onClick={handleNavigationChange}\n levels={isOnlyTopMode ? 2 : 1}\n />\n )}\n\n <HeaderActions />\n </HvHeader>\n );\n};\n\nexport default Header;\n"],"names":["Header","t","useTranslation","undefined","keyPrefix","tConfig","CONFIG_TRANSLATIONS_NAMESPACE","appShellConfig","useHvAppShellConfig","navigate","useHvNavigation","items","selectedMenuItemId","rootMenuItemId","isCompactMode","switchVerticalNavigationMode","verticalNavigationMode","verticalNavigationItems","useNavigationContext","isOnlyTopMode","navigationMode","showNavigation","length","isVerticalNavigationClosed","showVerticalNavigationButton","handleNavigationChange","event","selectedItem","href","state","selectedItemId","id","name","jsxs","HvHeader","jsx","Helmet","HvButton","IconUiKit","HvHeaderBrand","StyledIconWrapper","BrandLogo","logo","HvHeaderNavigation","HeaderActions","Header$1"],"mappings":";;;;;;;;;;;AAwBA,MAAMA,IAASA,MAAM;AACb,QAAA;AAAA,IAAEC,GAAAA;AAAAA,EAAAA,IAAMC,EAAeC,QAAW;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAqB,GACpE;AAAA,IAAEH,GAAGI;AAAAA,EAAAA,IAAYH,EAAeI,CAA6B,GAC7DC,IAAiBC,KACjB;AAAA,IAAEC,UAAAA;AAAAA,MAAaC,EAAgB,GAE/B;AAAA,IACJC,OAAAA;AAAAA,IACAC,oBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,8BAAAA;AAAAA,IACAC,wBAAAA;AAAAA,IACAC,yBAAAA;AAAAA,MACEC,EAAqB,GAEnBC,IAAgBZ,EAAea,mBAAmB,YAClDC,IACJ,CAACP,KACDP,EAAea,mBAAmB,eAClCT,EAAMW,SAAS,GACXC,IAA6BP,MAA2B,UACxDQ,IACJV,KAAiBG,EAAwBK,SAAS,GAE9CG,IAA6DA,CACjEC,GACAC,MACG;AACH,IAAIA,EAAaC,QACfnB,EAASkB,EAAaC,MAAM;AAAA,MAC1BC,OAAO;AAAA,QAAEC,gBAAgBH,EAAaI;AAAAA,MAAG;AAAA,IAAA,CAC1C;AAAA,EACH,GAGIC,IAAOzB,EAAeyB,OAAO3B,EAAQE,EAAeyB,IAAI,IAAI;AAGhE,SAAA,gBAAAC,EAACC,GAAS,EAAA,UAAS,SACjB,UAAA;AAAA,IAAA,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAAC,SAAOH,EAAAA,UAAAA,EAAK,CAAA,GACf;AAAA,IAECR,KACE,gBAAAW,EAAAE,GAAA,EACC,MAAI,IACJ,cAEMpC,EADJsB,IACM,wBACA,sBADqB,GAG7B,iBAAe,CAACA,GAChB,SAASR,GACT,UAAA,gBAAAoB,EAACG,KAAU,MAAMf,IAA6B,SAAS,QAAA,CAAQ,EACjE,CAAA;AAAA,IAGD,gBAAAY,EAAAI,GAAA,EACC,MACE,gBAAAJ,EAACK,GACC,EAAA,UAAA,gBAAAL,EAACM,GAAU,EAAA,MAAMlC,EAAemC,KAAK,CAAA,EACvC,CAAA,GAEF,MAAAV,GAAW;AAAA,IAEZX,KACC,gBAAAc,EAACQ,GACC,EAAA,MAAMhC,GACN,UAAUQ,IAAgBP,IAAqBC,GAC/C,SAASY,GACT,QAAQN,IAAgB,IAAI,GAE/B;AAAA,sBAEAyB,GAAa,EAAA;AAAA,EAChB,EAAA,CAAA;AAEJ,GAEAC,IAAe7C;"}
|
|
@@ -3,44 +3,46 @@ import { useState as u, useId as g } from "react";
|
|
|
3
3
|
import { useTranslation as p } from "react-i18next";
|
|
4
4
|
import { createPortal as w } from "react-dom";
|
|
5
5
|
import { ClickAwayListener as C } from "@mui/material";
|
|
6
|
-
import { HvIconButton as k, HvAppSwitcher as
|
|
7
|
-
import { CONFIG_TRANSLATIONS_NAMESPACE as
|
|
8
|
-
import
|
|
6
|
+
import { HvIconButton as k, HvAppSwitcher as P, HvTypography as y } from "@hitachivantara/uikit-react-core";
|
|
7
|
+
import { CONFIG_TRANSLATIONS_NAMESPACE as I } from "@hitachivantara/app-shell-shared";
|
|
8
|
+
import b from "./styles.js";
|
|
9
9
|
import d from "../../../../../IconUiKit/index.js";
|
|
10
|
-
import
|
|
11
|
-
import
|
|
10
|
+
import v from "../../../../../../lib/utils/textUtil.js";
|
|
11
|
+
import T from "../../../../../../lib/utils/documentUtil.js";
|
|
12
12
|
const x = ({
|
|
13
13
|
title: l,
|
|
14
14
|
apps: r
|
|
15
15
|
}) => {
|
|
16
16
|
const {
|
|
17
17
|
t: a
|
|
18
|
-
} = p(
|
|
18
|
+
} = p(void 0, {
|
|
19
|
+
keyPrefix: "header.appSwitcher"
|
|
20
|
+
}), {
|
|
19
21
|
t: i
|
|
20
|
-
} = p(
|
|
22
|
+
} = p(I), [n, c] = u(!1), s = g(), h = () => r ? r.map((e) => ({
|
|
21
23
|
name: i(e.label),
|
|
22
24
|
description: e.description ? i(e.description).toString() : void 0,
|
|
23
|
-
url:
|
|
25
|
+
url: v(e.url, ":") ? e.url : i(e.url).toString(),
|
|
24
26
|
target: e.target === "NEW" ? "_blank" : "_top",
|
|
25
27
|
iconElement: e.icon && /* @__PURE__ */ t(d, { name: e.icon.name })
|
|
26
28
|
})) : [], m = () => {
|
|
27
29
|
c(!1);
|
|
28
|
-
}, S = () => {
|
|
29
|
-
m();
|
|
30
30
|
}, f = () => {
|
|
31
|
+
m();
|
|
32
|
+
}, S = () => {
|
|
31
33
|
c(!n);
|
|
32
34
|
};
|
|
33
35
|
if (!r || r.length === 0)
|
|
34
36
|
return null;
|
|
35
|
-
const o = l ? i(l) : a("
|
|
37
|
+
const o = l ? i(l) : a("title");
|
|
36
38
|
return /* @__PURE__ */ t(C, { onClickAway: m, children: /* @__PURE__ */ A("div", { style: {
|
|
37
39
|
display: "flex",
|
|
38
40
|
margin: 0
|
|
39
41
|
}, children: [
|
|
40
|
-
/* @__PURE__ */ t(k, { title: o, "aria-label": o, "aria-expanded": n, onClick:
|
|
42
|
+
/* @__PURE__ */ t(k, { title: o, "aria-label": o, "aria-expanded": n, onClick: S, ...n && {
|
|
41
43
|
"aria-controls": s
|
|
42
44
|
}, children: /* @__PURE__ */ t(d, { name: "AppSwitcher" }) }),
|
|
43
|
-
n && w(/* @__PURE__ */ t(
|
|
45
|
+
n && w(/* @__PURE__ */ t(b, { id: s, role: "region", "aria-label": a("ariaLabel"), children: /* @__PURE__ */ t(P, { applications: h(), onActionClickedCallback: f, header: /* @__PURE__ */ t(y, { variant: "label", children: o }) }) }), T())
|
|
44
46
|
] }) });
|
|
45
47
|
}, K = x;
|
|
46
48
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppSwitcherToggle.js","sources":["../../../../../../../../src/components/layout/Header/HeaderActions/InternalActions/AppSwitcherToggle/AppSwitcherToggle.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { createPortal } from \"react-dom\";\nimport { ClickAwayListener } from \"@mui/material\";\n\nimport {\n HvAppSwitcherActionApplication,\n HvAppSwitcher,\n HvTypography,\n HvIconButton\n} from \"@hitachivantara/uikit-react-core\";\n\nimport {\n CONFIG_TRANSLATIONS_NAMESPACE,\n HvAppShellAppSwitcherConfig,\n HvAppShellAppSwitcherItemConfig\n} from \"@hitachivantara/app-shell-shared\";\n\nimport StyledAppShellPanelWrapper from \"./styles\";\nimport IconUiKit from \"../../../../../IconUiKit\";\nimport includesString from \"../../../../../../lib/utils/textUtil\";\nimport createAppContainerElement from \"../../../../../../lib/utils/documentUtil\";\n\nconst AppSwitcherToggle: React.FC<HvAppShellAppSwitcherConfig> = ({\n title,\n apps\n}) => {\n const { t } = useTranslation();\n const { t: tConfig } = useTranslation(CONFIG_TRANSLATIONS_NAMESPACE);\n const [isPanelOpen, setIsPanelOpen] = useState(false);\n const appSwitcherPanelId = useId();\n\n /**\n * Creates the apps list to be sent to the HvAppSwitcherPanel.\n *\n * @memberof AppSwitcherToggle\n */\n const createAppsList = (): HvAppSwitcherActionApplication[] => {\n return apps\n ? apps.map((app: HvAppShellAppSwitcherItemConfig) => ({\n name: tConfig(app.label),\n description: app.description\n ? tConfig(app.description).toString()\n : undefined,\n url: includesString(app.url, \":\")\n ? app.url\n : tConfig(app.url).toString(),\n target: app.target === \"NEW\" ? \"_blank\" : \"_top\",\n iconElement: app.icon && <IconUiKit name={app.icon.name} />\n }))\n : [];\n };\n\n /**\n * Closes the apps panel.\n *\n * @memberof AppSwitcherToggle\n */\n const closeAppSwitcherPanel = () => {\n setIsPanelOpen(false);\n };\n\n /**\n * Handles action clicked event from the AppSwitcherPanel items\n *\n * @memberof AppSwitcherToggle\n */\n const handleAppSwitcherPanelItemClicked = () => {\n closeAppSwitcherPanel();\n };\n\n /**\n * Handles the click on the AppSwitcher button.\n *\n * @memberof AppSwitcherToggle\n */\n const handleAppSwitcherButtonClick = () => {\n setIsPanelOpen(!isPanelOpen);\n };\n\n if (!apps || apps.length === 0) {\n return null;\n }\n\n const finalTitle: string = title
|
|
1
|
+
{"version":3,"file":"AppSwitcherToggle.js","sources":["../../../../../../../../src/components/layout/Header/HeaderActions/InternalActions/AppSwitcherToggle/AppSwitcherToggle.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { createPortal } from \"react-dom\";\nimport { ClickAwayListener } from \"@mui/material\";\n\nimport {\n HvAppSwitcherActionApplication,\n HvAppSwitcher,\n HvTypography,\n HvIconButton\n} from \"@hitachivantara/uikit-react-core\";\n\nimport {\n CONFIG_TRANSLATIONS_NAMESPACE,\n HvAppShellAppSwitcherConfig,\n HvAppShellAppSwitcherItemConfig\n} from \"@hitachivantara/app-shell-shared\";\n\nimport StyledAppShellPanelWrapper from \"./styles\";\nimport IconUiKit from \"../../../../../IconUiKit\";\nimport includesString from \"../../../../../../lib/utils/textUtil\";\nimport createAppContainerElement from \"../../../../../../lib/utils/documentUtil\";\n\nconst AppSwitcherToggle: React.FC<HvAppShellAppSwitcherConfig> = ({\n title,\n apps\n}) => {\n const { t } = useTranslation(undefined, { keyPrefix: \"header.appSwitcher\" });\n const { t: tConfig } = useTranslation(CONFIG_TRANSLATIONS_NAMESPACE);\n const [isPanelOpen, setIsPanelOpen] = useState(false);\n const appSwitcherPanelId = useId();\n\n /**\n * Creates the apps list to be sent to the HvAppSwitcherPanel.\n *\n * @memberof AppSwitcherToggle\n */\n const createAppsList = (): HvAppSwitcherActionApplication[] => {\n return apps\n ? apps.map((app: HvAppShellAppSwitcherItemConfig) => ({\n name: tConfig(app.label),\n description: app.description\n ? tConfig(app.description).toString()\n : undefined,\n url: includesString(app.url, \":\")\n ? app.url\n : tConfig(app.url).toString(),\n target: app.target === \"NEW\" ? \"_blank\" : \"_top\",\n iconElement: app.icon && <IconUiKit name={app.icon.name} />\n }))\n : [];\n };\n\n /**\n * Closes the apps panel.\n *\n * @memberof AppSwitcherToggle\n */\n const closeAppSwitcherPanel = () => {\n setIsPanelOpen(false);\n };\n\n /**\n * Handles action clicked event from the AppSwitcherPanel items\n *\n * @memberof AppSwitcherToggle\n */\n const handleAppSwitcherPanelItemClicked = () => {\n closeAppSwitcherPanel();\n };\n\n /**\n * Handles the click on the AppSwitcher button.\n *\n * @memberof AppSwitcherToggle\n */\n const handleAppSwitcherButtonClick = () => {\n setIsPanelOpen(!isPanelOpen);\n };\n\n if (!apps || apps.length === 0) {\n return null;\n }\n\n const finalTitle: string = title ? tConfig(title) : t(\"title\");\n\n return (\n <ClickAwayListener onClickAway={closeAppSwitcherPanel}>\n <div style={{ display: \"flex\", margin: 0 }}>\n <HvIconButton\n title={finalTitle}\n aria-label={finalTitle}\n aria-expanded={isPanelOpen}\n onClick={handleAppSwitcherButtonClick}\n {...(isPanelOpen && { \"aria-controls\": appSwitcherPanelId })}>\n <IconUiKit name=\"AppSwitcher\" />\n </HvIconButton>\n {isPanelOpen &&\n createPortal(\n <StyledAppShellPanelWrapper\n id={appSwitcherPanelId}\n role=\"region\"\n aria-label={t(\"ariaLabel\")}>\n <HvAppSwitcher\n applications={createAppsList()}\n onActionClickedCallback={handleAppSwitcherPanelItemClicked}\n header={\n <HvTypography variant=\"label\">{finalTitle}</HvTypography>\n }\n />\n </StyledAppShellPanelWrapper>,\n createAppContainerElement()\n )}\n </div>\n </ClickAwayListener>\n );\n};\n\nexport default AppSwitcherToggle;\n"],"names":["AppSwitcherToggle","title","apps","t","useTranslation","undefined","keyPrefix","tConfig","CONFIG_TRANSLATIONS_NAMESPACE","isPanelOpen","setIsPanelOpen","useState","appSwitcherPanelId","useId","createAppsList","map","app","name","label","description","toString","url","includesString","target","iconElement","icon","jsx","IconUiKit","closeAppSwitcherPanel","handleAppSwitcherPanelItemClicked","handleAppSwitcherButtonClick","length","finalTitle","ClickAwayListener","jsxs","display","margin","HvIconButton","createPortal","StyledAppShellPanelWrapper","HvAppSwitcher","HvTypography","createAppContainerElement","AppSwitcherToggle$1"],"mappings":";;;;;;;;;;;AAuBA,MAAMA,IAA2DA,CAAC;AAAA,EAChEC,OAAAA;AAAAA,EACAC,MAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,GAAAA;AAAAA,EAAAA,IAAMC,EAAeC,QAAW;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAsB,GACrE;AAAA,IAAEH,GAAGI;AAAAA,EAAAA,IAAYH,EAAeI,CAA6B,GAC7D,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9CC,IAAqBC,KAOrBC,IAAiBA,MACdZ,IACHA,EAAKa,IAAI,CAACC,OAA0C;AAAA,IAClDC,MAAMV,EAAQS,EAAIE,KAAK;AAAA,IACvBC,aAAaH,EAAIG,cACbZ,EAAQS,EAAIG,WAAW,EAAEC,SACzBf,IAAAA;AAAAA,IACJgB,KAAKC,EAAeN,EAAIK,KAAK,GAAG,IAC5BL,EAAIK,MACJd,EAAQS,EAAIK,GAAG,EAAED,SAAS;AAAA,IAC9BG,QAAQP,EAAIO,WAAW,QAAQ,WAAW;AAAA,IAC1CC,aAAaR,EAAIS,QAAQ,gBAAAC,EAACC,KAAU,MAAMX,EAAIS,KAAKR,MAAK;AAAA,EAAA,EACxD,IACF,CAAA,GAQAW,IAAwBA,MAAM;AAClClB,IAAAA,EAAe,EAAK;AAAA,EAAA,GAQhBmB,IAAoCA,MAAM;AACxB,IAAAD;EAAA,GAQlBE,IAA+BA,MAAM;AACzCpB,IAAAA,EAAe,CAACD,CAAW;AAAA,EAAA;AAG7B,MAAI,CAACP,KAAQA,EAAK6B,WAAW;AACpB,WAAA;AAGT,QAAMC,IAAqB/B,IAAQM,EAAQN,CAAK,IAAIE,EAAE,OAAO;AAE7D,2BACG8B,GAAkB,EAAA,aAAaL,GAC9B,UAAA,gBAAAM,EAAC,SAAI,OAAO;AAAA,IAAEC,SAAS;AAAA,IAAQC,QAAQ;AAAA,EACrC,GAAA,UAAA;AAAA,IAAC,gBAAAV,EAAAW,GAAA,EACC,OAAOL,GACP,cAAYA,GACZ,iBAAevB,GACf,SAASqB,GACT,GAAKrB,KAAe;AAAA,MAAE,iBAAiBG;AAAAA,IAAAA,GACvC,UAAA,gBAAAc,EAACC,GAAU,EAAA,MAAK,cAAa,CAAA,GAC/B;AAAA,IACClB,KACC6B,EACG,gBAAAZ,EAAAa,GAAA,EACC,IAAI3B,GACJ,MAAK,UACL,cAAYT,EAAE,WAAW,GACzB,UAAC,gBAAAuB,EAAAc,GAAA,EACC,cAAc1B,EAAAA,GACd,yBAAyBe,GACzB,QACG,gBAAAH,EAAAe,GAAA,EAAa,SAAQ,SAAST,UAAWA,EAAA,CAAA,EAC3C,CAAA,EAEL,CAAA,GACAU,GACF;AAAA,EAAA,EACJ,CAAA,EACF,CAAA;AAEJ,GAEAC,IAAe3C;"}
|
|
@@ -6,7 +6,9 @@ import s from "../../../../../IconUiKit/index.js";
|
|
|
6
6
|
const a = () => {
|
|
7
7
|
const {
|
|
8
8
|
t: e
|
|
9
|
-
} = i(
|
|
9
|
+
} = i(void 0, {
|
|
10
|
+
keyPrefix: "header.colorModeSwitcher"
|
|
11
|
+
}), {
|
|
10
12
|
colorModes: t
|
|
11
13
|
} = l(), r = () => {
|
|
12
14
|
const n = new CustomEvent(m, {
|
|
@@ -16,7 +18,7 @@ const a = () => {
|
|
|
16
18
|
});
|
|
17
19
|
globalThis.dispatchEvent(n);
|
|
18
20
|
};
|
|
19
|
-
return t.length > 1
|
|
21
|
+
return t.length > 1 ? /* @__PURE__ */ o(c, { onClick: r, title: e("ariaLabel"), children: /* @__PURE__ */ o(s, { name: "ThemeSwitcher" }) }) : null;
|
|
20
22
|
}, f = a;
|
|
21
23
|
export {
|
|
22
24
|
f as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorModeSwitcher.js","sources":["../../../../../../../../src/components/layout/Header/HeaderActions/InternalActions/ColorModeSwitcher/ColorModeSwitcher.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\nimport { HvIconButton, useTheme } from \"@hitachivantara/uikit-react-core\";\nimport {\n HvAppShellEventThemeTrigger,\n HvAppShellEventTheme\n} from \"@hitachivantara/app-shell-events\";\n\nimport IconUiKit from \"../../../../../IconUiKit\";\n\nconst ColorModeSwitcher: React.FC = () => {\n const { t } = useTranslation();\n const { colorModes } = useTheme();\n\n const changeColorModeHandler = () => {\n const customEvent = new CustomEvent<HvAppShellEventTheme>(\n HvAppShellEventThemeTrigger,\n {\n detail: {\n colorMode: undefined\n }\n }\n );\n globalThis.dispatchEvent(customEvent);\n };\n\n return
|
|
1
|
+
{"version":3,"file":"ColorModeSwitcher.js","sources":["../../../../../../../../src/components/layout/Header/HeaderActions/InternalActions/ColorModeSwitcher/ColorModeSwitcher.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\nimport { HvIconButton, useTheme } from \"@hitachivantara/uikit-react-core\";\nimport {\n HvAppShellEventThemeTrigger,\n HvAppShellEventTheme\n} from \"@hitachivantara/app-shell-events\";\n\nimport IconUiKit from \"../../../../../IconUiKit\";\n\nconst ColorModeSwitcher: React.FC = () => {\n const { t } = useTranslation(undefined, {\n keyPrefix: \"header.colorModeSwitcher\"\n });\n const { colorModes } = useTheme();\n\n const changeColorModeHandler = () => {\n const customEvent = new CustomEvent<HvAppShellEventTheme>(\n HvAppShellEventThemeTrigger,\n {\n detail: {\n colorMode: undefined\n }\n }\n );\n globalThis.dispatchEvent(customEvent);\n };\n\n return colorModes.length > 1 ? (\n <HvIconButton onClick={changeColorModeHandler} title={t(\"ariaLabel\")}>\n <IconUiKit name=\"ThemeSwitcher\" />\n </HvIconButton>\n ) : null;\n};\n\nexport default ColorModeSwitcher;\n"],"names":["ColorModeSwitcher","t","useTranslation","undefined","keyPrefix","colorModes","useTheme","changeColorModeHandler","customEvent","CustomEvent","HvAppShellEventThemeTrigger","detail","colorMode","globalThis","dispatchEvent","length","jsx","HvIconButton","IconUiKit","ColorModeSwitcher$1"],"mappings":";;;;;AAUA,MAAMA,IAA8BA,MAAM;AAClC,QAAA;AAAA,IAAEC,GAAAA;AAAAA,EAAAA,IAAMC,EAAeC,QAAW;AAAA,IACtCC,WAAW;AAAA,EAAA,CACZ,GACK;AAAA,IAAEC,YAAAA;AAAAA,MAAeC,EAAS,GAE1BC,IAAyBA,MAAM;AAC7BC,UAAAA,IAAc,IAAIC,YACtBC,GACA;AAAA,MACEC,QAAQ;AAAA,QACNC,WAAWT;AAAAA,MACb;AAAA,IAAA,CAEJ;AACAU,eAAWC,cAAcN,CAAW;AAAA,EAAA;AAGtC,SAAOH,EAAWU,SAAS,IACxB,gBAAAC,EAAAC,GAAA,EAAa,SAASV,GAAwB,OAAON,EAAE,WAAW,GACjE,UAAC,gBAAAe,EAAAE,GAAA,EAAU,MAAK,gBAAe,CAAA,GACjC,IACE;AACN,GAEAC,IAAenB;"}
|
package/dist/esm/components/layout/Header/HeaderActions/InternalActions/HelpButton/HelpButton.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as r } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useTranslation as e } from "react-i18next";
|
|
3
|
-
import { HvIconButton as
|
|
3
|
+
import { HvIconButton as l } from "@hitachivantara/uikit-react-core";
|
|
4
4
|
import { CONFIG_TRANSLATIONS_NAMESPACE as p } from "@hitachivantara/app-shell-shared";
|
|
5
5
|
import a from "../../../../../../lib/utils/textUtil.js";
|
|
6
6
|
import c from "../../../../../IconUiKit/index.js";
|
|
@@ -10,13 +10,15 @@ const s = ({
|
|
|
10
10
|
}) => {
|
|
11
11
|
const {
|
|
12
12
|
t: i
|
|
13
|
-
} = e(
|
|
13
|
+
} = e(void 0, {
|
|
14
|
+
keyPrefix: "header.helpUrl"
|
|
15
|
+
}), {
|
|
14
16
|
t: n
|
|
15
17
|
} = e(p);
|
|
16
18
|
if (!t)
|
|
17
19
|
return null;
|
|
18
|
-
const m = a(t, ":") ? t : n(t),
|
|
19
|
-
return /* @__PURE__ */ r(
|
|
20
|
+
const m = a(t, ":") ? t : n(t), f = o ? n(o) : i("documentationLink");
|
|
21
|
+
return /* @__PURE__ */ r(l, { component: "a", href: m, target: "_blank", title: f, rel: "noopener,noreferrer", children: /* @__PURE__ */ r(c, { name: "Help" }) });
|
|
20
22
|
}, N = s;
|
|
21
23
|
export {
|
|
22
24
|
N as default
|
package/dist/esm/components/layout/Header/HeaderActions/InternalActions/HelpButton/HelpButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HelpButton.js","sources":["../../../../../../../../src/components/layout/Header/HeaderActions/InternalActions/HelpButton/HelpButton.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\nimport { HvIconButton } from \"@hitachivantara/uikit-react-core\";\nimport {\n CONFIG_TRANSLATIONS_NAMESPACE,\n HvAppShellHelp\n} from \"@hitachivantara/app-shell-shared\";\n\nimport includesString from \"../../../../../../lib/utils/textUtil\";\nimport IconUiKit from \"../../../../../IconUiKit\";\n\nconst HelpButton: React.FC<HvAppShellHelp> = ({ url, description }) => {\n const { t } = useTranslation();\n const { t: tConfig } = useTranslation(CONFIG_TRANSLATIONS_NAMESPACE);\n\n if (!url) {\n return null;\n }\n\n const finalUrl = includesString(url, \":\") ? url : tConfig(url);\n\n const finalDescription = description\n ? tConfig(description)\n : t(\"
|
|
1
|
+
{"version":3,"file":"HelpButton.js","sources":["../../../../../../../../src/components/layout/Header/HeaderActions/InternalActions/HelpButton/HelpButton.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\nimport { HvIconButton } from \"@hitachivantara/uikit-react-core\";\nimport {\n CONFIG_TRANSLATIONS_NAMESPACE,\n HvAppShellHelp\n} from \"@hitachivantara/app-shell-shared\";\n\nimport includesString from \"../../../../../../lib/utils/textUtil\";\nimport IconUiKit from \"../../../../../IconUiKit\";\n\nconst HelpButton: React.FC<HvAppShellHelp> = ({ url, description }) => {\n const { t } = useTranslation(undefined, { keyPrefix: \"header.helpUrl\" });\n const { t: tConfig } = useTranslation(CONFIG_TRANSLATIONS_NAMESPACE);\n\n if (!url) {\n return null;\n }\n\n const finalUrl = includesString(url, \":\") ? url : tConfig(url);\n\n const finalDescription = description\n ? tConfig(description)\n : t(\"documentationLink\");\n\n return (\n <HvIconButton\n component=\"a\"\n href={finalUrl}\n target=\"_blank\"\n title={finalDescription}\n rel=\"noopener,noreferrer\">\n <IconUiKit name=\"Help\" />\n </HvIconButton>\n );\n};\n\nexport default HelpButton;\n"],"names":["HelpButton","url","description","t","useTranslation","undefined","keyPrefix","tConfig","CONFIG_TRANSLATIONS_NAMESPACE","finalUrl","includesString","finalDescription","HvIconButton","jsx","IconUiKit","HelpButton$1"],"mappings":";;;;;;AAWA,MAAMA,IAAuCA,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAKC,aAAAA;AAAY,MAAM;AAC/D,QAAA;AAAA,IAAEC,GAAAA;AAAAA,EAAAA,IAAMC,EAAeC,QAAW;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAkB,GACjE;AAAA,IAAEH,GAAGI;AAAAA,EAAAA,IAAYH,EAAeI,CAA6B;AAEnE,MAAI,CAACP;AACI,WAAA;AAGT,QAAMQ,IAAWC,EAAeT,GAAK,GAAG,IAAIA,IAAMM,EAAQN,CAAG,GAEvDU,IAAmBT,IACrBK,EAAQL,CAAW,IACnBC,EAAE,mBAAmB;AAEzB,2BACGS,GACC,EAAA,WAAU,KACV,MAAMH,GACN,QAAO,UACP,OAAOE,GACP,KAAI,uBACJ,UAAA,gBAAAE,EAACC,GAAU,EAAA,MAAK,QAAM,EACxB,CAAA;AAEJ,GAEAC,IAAef;"}
|
|
@@ -1,56 +1,58 @@
|
|
|
1
1
|
import { jsx as r, jsxs as N } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useRef as b, useEffect as h } from "react";
|
|
3
|
-
import { useTranslation as
|
|
4
|
-
import { cx as
|
|
3
|
+
import { useTranslation as x } from "react-i18next";
|
|
4
|
+
import { cx as C } from "@emotion/css";
|
|
5
5
|
import { HvVerticalNavigation as L, HvVerticalNavigationHeader as V, HvVerticalNavigationTree as B, HvVerticalNavigationActions as H } from "@hitachivantara/uikit-react-core";
|
|
6
6
|
import { useHvNavigation as I } from "@hitachivantara/app-shell-navigation";
|
|
7
|
-
import
|
|
7
|
+
import P from "../../../providers/hooks/useNavigationContext.js";
|
|
8
8
|
import { classes as l } from "./styles.js";
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
const
|
|
9
|
+
import k from "../../hoc/withClickAwayListener.js";
|
|
10
|
+
import w from "../../../providers/hooks/useLayoutContext.js";
|
|
11
|
+
const A = () => {
|
|
12
12
|
const {
|
|
13
13
|
t: a
|
|
14
|
-
} =
|
|
14
|
+
} = x(void 0, {
|
|
15
|
+
keyPrefix: "verticalNavigation"
|
|
16
|
+
}), {
|
|
15
17
|
selectedMenuItemId: d,
|
|
16
|
-
rootMenuItemId:
|
|
17
|
-
verticalNavigationItems:
|
|
18
|
-
isCompactMode:
|
|
18
|
+
rootMenuItemId: p,
|
|
19
|
+
verticalNavigationItems: f,
|
|
20
|
+
isCompactMode: t,
|
|
19
21
|
verticalNavigationMode: s,
|
|
20
22
|
switchVerticalNavigationMode: c
|
|
21
|
-
} =
|
|
23
|
+
} = P(), {
|
|
22
24
|
setVerticalNavigationWidth: o
|
|
23
|
-
} =
|
|
25
|
+
} = w(), {
|
|
24
26
|
navigate: m
|
|
25
|
-
} = I(), v = b(null), n = s === "EXPANDED",
|
|
26
|
-
e.preventDefault(),
|
|
27
|
+
} = I(), v = b(null), n = s === "EXPANDED", u = (e, i) => {
|
|
28
|
+
e.preventDefault(), i.href && (m(i.href, {
|
|
27
29
|
state: {
|
|
28
|
-
selectedItemId:
|
|
30
|
+
selectedItemId: i.id
|
|
29
31
|
}
|
|
30
|
-
}),
|
|
32
|
+
}), t && c());
|
|
31
33
|
};
|
|
32
34
|
h(() => {
|
|
33
35
|
const {
|
|
34
36
|
current: e
|
|
35
|
-
} = v,
|
|
36
|
-
return o(
|
|
37
|
-
}, [s,
|
|
38
|
-
const
|
|
39
|
-
return /* @__PURE__ */ r("div", { ref: v, children: /* @__PURE__ */ N(L, { className:
|
|
40
|
-
[l.navigationCompact]:
|
|
41
|
-
}), open: n, useIcons: !0, slider:
|
|
42
|
-
/* @__PURE__ */ r(V, { title: a("
|
|
43
|
-
"aria-label":
|
|
37
|
+
} = v, i = e == null ? void 0 : e.childNodes[0];
|
|
38
|
+
return o(i && !t ? i.offsetWidth : 0), () => o(0);
|
|
39
|
+
}, [s, t, o]);
|
|
40
|
+
const g = a(n ? "ariaLabelCollapse" : "ariaLabelExpand");
|
|
41
|
+
return /* @__PURE__ */ r("div", { ref: v, children: /* @__PURE__ */ N(L, { className: C(l.navigation, {
|
|
42
|
+
[l.navigationCompact]: t
|
|
43
|
+
}), open: n, useIcons: !0, slider: t, children: [
|
|
44
|
+
/* @__PURE__ */ r(V, { title: a("title"), onCollapseButtonClick: t ? void 0 : c, collapseButtonProps: {
|
|
45
|
+
"aria-label": g,
|
|
44
46
|
"aria-expanded": n
|
|
45
47
|
}, backButtonProps: {
|
|
46
|
-
"aria-label": a("
|
|
48
|
+
"aria-label": a("ariaLabelHeaderBackButton")
|
|
47
49
|
} }),
|
|
48
|
-
/* @__PURE__ */ r(B, { mode: "navigation", collapsible: !0, "aria-label": a("
|
|
50
|
+
/* @__PURE__ */ r(B, { mode: "navigation", collapsible: !0, "aria-label": a("ariaLabelNavigationTree"), selected: d, onChange: u, data: f, classes: {
|
|
49
51
|
navigationPopup: l.navigationPopup
|
|
50
|
-
}, sliderForwardButtonAriaLabel: a("
|
|
52
|
+
}, sliderForwardButtonAriaLabel: a("ariaLabelSliderForwardButton") }, p),
|
|
51
53
|
/* @__PURE__ */ r(H, {})
|
|
52
54
|
] }) });
|
|
53
|
-
}, X = A
|
|
55
|
+
}, X = k(A);
|
|
54
56
|
export {
|
|
55
57
|
X as default
|
|
56
58
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalNavigation.js","sources":["../../../../../src/components/layout/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cx } from \"@emotion/css\";\nimport {\n HvVerticalNavigation,\n HvVerticalNavigationActions,\n HvVerticalNavigationHeader,\n HvVerticalNavigationTree\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useHvNavigation } from \"@hitachivantara/app-shell-navigation\";\n\nimport { NavigationMenuItem } from \"../../../lib/types\";\nimport useNavigationContext from \"../../../providers/hooks/useNavigationContext\";\nimport { classes } from \"./styles\";\n\nimport withClickAwayListener from \"../../hoc/withClickAwayListener\";\nimport useLayoutContext from \"../../../providers/hooks/useLayoutContext\";\n\nconst VerticalNavigation = () => {\n const { t } = useTranslation();\n const {\n selectedMenuItemId,\n rootMenuItemId,\n verticalNavigationItems,\n isCompactMode,\n verticalNavigationMode,\n switchVerticalNavigationMode\n } = useNavigationContext();\n const { setVerticalNavigationWidth } = useLayoutContext();\n const { navigate } = useHvNavigation();\n const verticalNavigationRef = useRef<HTMLDivElement>(null);\n const isVerticalNavigationExpanded = verticalNavigationMode === \"EXPANDED\";\n\n const changeHandler = (\n event: React.SyntheticEvent<Element, Event>,\n selectedItem: NavigationMenuItem\n ) => {\n // Due to the change from buttons to links on the navigation tree, we need to prevent the default behaviour of\n // the event to avoid full refreshes when clicking on the links.\n event.preventDefault();\n\n if (selectedItem.href) {\n navigate(selectedItem.href, {\n state: { selectedItemId: selectedItem.id }\n });\n\n if (isCompactMode) {\n switchVerticalNavigationMode();\n }\n }\n };\n\n useEffect(() => {\n const { current } = verticalNavigationRef;\n const firstChild = current?.childNodes[0] as HTMLElement;\n if (firstChild && !isCompactMode) {\n setVerticalNavigationWidth(firstChild.offsetWidth);\n } else {\n setVerticalNavigationWidth(0);\n }\n\n return () => setVerticalNavigationWidth(0);\n }, [verticalNavigationMode, isCompactMode, setVerticalNavigationWidth]);\n\n const collapseButtonAriaLabel = isVerticalNavigationExpanded\n ? t(\"
|
|
1
|
+
{"version":3,"file":"VerticalNavigation.js","sources":["../../../../../src/components/layout/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { cx } from \"@emotion/css\";\nimport {\n HvVerticalNavigation,\n HvVerticalNavigationActions,\n HvVerticalNavigationHeader,\n HvVerticalNavigationTree\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useHvNavigation } from \"@hitachivantara/app-shell-navigation\";\n\nimport { NavigationMenuItem } from \"../../../lib/types\";\nimport useNavigationContext from \"../../../providers/hooks/useNavigationContext\";\nimport { classes } from \"./styles\";\n\nimport withClickAwayListener from \"../../hoc/withClickAwayListener\";\nimport useLayoutContext from \"../../../providers/hooks/useLayoutContext\";\n\nconst VerticalNavigation = () => {\n const { t } = useTranslation(undefined, { keyPrefix: \"verticalNavigation\" });\n const {\n selectedMenuItemId,\n rootMenuItemId,\n verticalNavigationItems,\n isCompactMode,\n verticalNavigationMode,\n switchVerticalNavigationMode\n } = useNavigationContext();\n const { setVerticalNavigationWidth } = useLayoutContext();\n const { navigate } = useHvNavigation();\n const verticalNavigationRef = useRef<HTMLDivElement>(null);\n const isVerticalNavigationExpanded = verticalNavigationMode === \"EXPANDED\";\n\n const changeHandler = (\n event: React.SyntheticEvent<Element, Event>,\n selectedItem: NavigationMenuItem\n ) => {\n // Due to the change from buttons to links on the navigation tree, we need to prevent the default behaviour of\n // the event to avoid full refreshes when clicking on the links.\n event.preventDefault();\n\n if (selectedItem.href) {\n navigate(selectedItem.href, {\n state: { selectedItemId: selectedItem.id }\n });\n\n if (isCompactMode) {\n switchVerticalNavigationMode();\n }\n }\n };\n\n useEffect(() => {\n const { current } = verticalNavigationRef;\n const firstChild = current?.childNodes[0] as HTMLElement;\n if (firstChild && !isCompactMode) {\n setVerticalNavigationWidth(firstChild.offsetWidth);\n } else {\n setVerticalNavigationWidth(0);\n }\n\n return () => setVerticalNavigationWidth(0);\n }, [verticalNavigationMode, isCompactMode, setVerticalNavigationWidth]);\n\n const collapseButtonAriaLabel = isVerticalNavigationExpanded\n ? t(\"ariaLabelCollapse\")\n : t(\"ariaLabelExpand\");\n\n return (\n <div ref={verticalNavigationRef}>\n <HvVerticalNavigation\n className={cx(classes.navigation, {\n [classes.navigationCompact]: isCompactMode\n })}\n open={isVerticalNavigationExpanded}\n useIcons\n slider={isCompactMode}>\n <HvVerticalNavigationHeader\n title={t(\"title\")}\n onCollapseButtonClick={\n !isCompactMode ? switchVerticalNavigationMode : undefined\n }\n collapseButtonProps={{\n \"aria-label\": collapseButtonAriaLabel,\n \"aria-expanded\": isVerticalNavigationExpanded\n }}\n backButtonProps={{\n \"aria-label\": t(\"ariaLabelHeaderBackButton\")\n }}\n />\n\n <HvVerticalNavigationTree\n key={rootMenuItemId}\n mode=\"navigation\"\n collapsible\n aria-label={t(\"ariaLabelNavigationTree\")}\n selected={selectedMenuItemId}\n onChange={changeHandler}\n data={verticalNavigationItems}\n classes={{ navigationPopup: classes.navigationPopup }}\n sliderForwardButtonAriaLabel={t(\"ariaLabelSliderForwardButton\")}\n />\n\n <HvVerticalNavigationActions />\n </HvVerticalNavigation>\n </div>\n );\n};\n\nexport default withClickAwayListener(VerticalNavigation);\n"],"names":["VerticalNavigation","t","useTranslation","undefined","keyPrefix","selectedMenuItemId","rootMenuItemId","verticalNavigationItems","isCompactMode","verticalNavigationMode","switchVerticalNavigationMode","useNavigationContext","setVerticalNavigationWidth","useLayoutContext","navigate","useHvNavigation","verticalNavigationRef","useRef","isVerticalNavigationExpanded","changeHandler","event","selectedItem","preventDefault","href","state","selectedItemId","id","useEffect","current","firstChild","childNodes","offsetWidth","collapseButtonAriaLabel","jsx","HvVerticalNavigation","cx","classes","navigation","navigationCompact","HvVerticalNavigationHeader","HvVerticalNavigationTree","navigationPopup","HvVerticalNavigationActions","withClickAwayListener"],"mappings":";;;;;;;;;;AAmBA,MAAMA,IAAqBA,MAAM;AACzB,QAAA;AAAA,IAAEC,GAAAA;AAAAA,EAAAA,IAAMC,EAAeC,QAAW;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAsB,GACrE;AAAA,IACJC,oBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,yBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,wBAAAA;AAAAA,IACAC,8BAAAA;AAAAA,MACEC,EAAqB,GACnB;AAAA,IAAEC,4BAAAA;AAAAA,MAA+BC,EAAiB,GAClD;AAAA,IAAEC,UAAAA;AAAAA,MAAaC,EAAgB,GAC/BC,IAAwBC,EAAuB,IAAI,GACnDC,IAA+BT,MAA2B,YAE1DU,IAAgBA,CACpBC,GACAC,MACG;AAGHD,IAAAA,EAAME,eAAe,GAEjBD,EAAaE,SACfT,EAASO,EAAaE,MAAM;AAAA,MAC1BC,OAAO;AAAA,QAAEC,gBAAgBJ,EAAaK;AAAAA,MAAG;AAAA,IAAA,CAC1C,GAEGlB,KAC2BE;EAEjC;AAGFiB,EAAAA,EAAU,MAAM;AACR,UAAA;AAAA,MAAEC,SAAAA;AAAAA,IAAYZ,IAAAA,GACda,IAAaD,KAAAA,gBAAAA,EAASE,WAAW;AACnCD,WACFjB,EADEiB,KAAc,CAACrB,IACUqB,EAAWE,cAEX,CAFsB,GAK5C,MAAMnB,EAA2B,CAAC;AAAA,EACxC,GAAA,CAACH,GAAwBD,GAAeI,CAA0B,CAAC;AAEtE,QAAMoB,IACF/B,EAD4BiB,IAC1B,sBACA,iBADmB;AAIvB,SAAA,gBAAAe,EAAC,SAAI,KAAKjB,GACR,4BAACkB,GACC,EAAA,WAAWC,EAAGC,EAAQC,YAAY;AAAA,IAChC,CAACD,EAAQE,iBAAiB,GAAG9B;AAAAA,EAAAA,CAC9B,GACD,MAAMU,GACN,UAAQ,IACR,QAAQV,GACR,UAAA;AAAA,IAAC,gBAAAyB,EAAAM,GAAA,EACC,OAAOtC,EAAE,OAAO,GAChB,uBACGO,IAA+CL,SAA/BO,GAEnB,qBAAqB;AAAA,MACnB,cAAcsB;AAAAA,MACd,iBAAiBd;AAAAA,OAEnB,iBAAiB;AAAA,MACf,cAAcjB,EAAE,2BAA2B;AAAA,IAAA,GAC3C;AAAA,sBAGHuC,GAEC,EAAA,MAAK,cACL,aAAW,IACX,cAAYvC,EAAE,yBAAyB,GACvC,UAAUI,GACV,UAAUc,GACV,MAAMZ,GACN,SAAS;AAAA,MAAEkC,iBAAiBL,EAAQK;AAAAA,IACpC,GAAA,8BAA8BxC,EAAE,8BAA8B,KARzDK,CAQ2D;AAAA,sBAGjEoC,GAA2B,EAAA;AAAA,EAAA,EAC9B,CAAA,EACF,CAAA;AAEJ,GAEeC,IAAAA,EAAsB3C,CAAkB;"}
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import { jsx as t } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useTranslation as i } from "react-i18next";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
fullPage:
|
|
7
|
-
includeFooter:
|
|
3
|
+
import a from "./500.svg.js";
|
|
4
|
+
import c from "../ErrorPage/ErrorPage.js";
|
|
5
|
+
const n = ({
|
|
6
|
+
fullPage: o = !1,
|
|
7
|
+
includeFooter: e = !0
|
|
8
8
|
}) => {
|
|
9
9
|
const {
|
|
10
10
|
t: r
|
|
11
|
-
} = i(
|
|
12
|
-
|
|
13
|
-
}
|
|
11
|
+
} = i(void 0, {
|
|
12
|
+
keyPrefix: "errors.genericError"
|
|
13
|
+
});
|
|
14
|
+
return /* @__PURE__ */ t(c, { code: r("code"), title: r("title"), backgroundLabel: r("image_description"), fullPage: o, includeFooter: e, background: `url(${a})` });
|
|
15
|
+
}, f = n;
|
|
14
16
|
export {
|
|
15
|
-
|
|
17
|
+
f as default
|
|
16
18
|
};
|
|
17
19
|
//# sourceMappingURL=GenericError.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenericError.js","sources":["../../../../src/pages/GenericError/GenericError.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport ErrorPage from \"../ErrorPage\";\nimport BlackCat from \"./500.svg\";\n\nconst GenericError = ({ fullPage = false, includeFooter = true }) => {\n const { t } = useTranslation();\n return (\n <ErrorPage\n code={t(\"
|
|
1
|
+
{"version":3,"file":"GenericError.js","sources":["../../../../src/pages/GenericError/GenericError.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport ErrorPage from \"../ErrorPage\";\nimport BlackCat from \"./500.svg\";\n\nconst GenericError = ({ fullPage = false, includeFooter = true }) => {\n const { t } = useTranslation(undefined, { keyPrefix: \"errors.genericError\" });\n return (\n <ErrorPage\n code={t(\"code\")}\n title={t(\"title\")}\n backgroundLabel={t(\"image_description\")}\n fullPage={fullPage}\n includeFooter={includeFooter}\n background={`url(${BlackCat})`}\n />\n );\n};\n\nexport default GenericError;\n"],"names":["GenericError","fullPage","includeFooter","t","useTranslation","undefined","keyPrefix","ErrorPage","BlackCat","GenericError$1"],"mappings":";;;;AAIA,MAAMA,IAAeA,CAAC;AAAA,EAAEC,UAAAA,IAAW;AAAA,EAAOC,eAAAA,IAAgB;AAAK,MAAM;AAC7D,QAAA;AAAA,IAAEC,GAAAA;AAAAA,EAAAA,IAAMC,EAAeC,QAAW;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAuB;AAC5E,2BACGC,GACC,EAAA,MAAMJ,EAAE,MAAM,GACd,OAAOA,EAAE,OAAO,GAChB,iBAAiBA,EAAE,mBAAmB,GACtC,UAAAF,GACA,eAAAC,GACA,YAAa,OAAMM,CAAS,IAC5B,CAAA;AAEN,GAEAC,IAAeT;"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useTranslation as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const
|
|
1
|
+
import { jsx as r } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useTranslation as t } from "react-i18next";
|
|
3
|
+
import e from "./404.svg.js";
|
|
4
|
+
import n from "../ErrorPage/ErrorPage.js";
|
|
5
|
+
const i = () => {
|
|
6
6
|
const {
|
|
7
7
|
t: o
|
|
8
|
-
} =
|
|
9
|
-
|
|
10
|
-
}
|
|
8
|
+
} = t(void 0, {
|
|
9
|
+
keyPrefix: "errors.notFound"
|
|
10
|
+
});
|
|
11
|
+
return /* @__PURE__ */ r(n, { code: o("code"), title: o("title"), backgroundLabel: o("image_description"), background: `url(${e})` });
|
|
12
|
+
}, s = i;
|
|
11
13
|
export {
|
|
12
|
-
|
|
14
|
+
s as default
|
|
13
15
|
};
|
|
14
16
|
//# sourceMappingURL=NotFound.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotFound.js","sources":["../../../../src/pages/NotFound/NotFound.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\nimport ErrorPage from \"../ErrorPage\";\nimport DogeSpace from \"./404.svg\";\n\nconst NotFound = () => {\n const { t } = useTranslation(
|
|
1
|
+
{"version":3,"file":"NotFound.js","sources":["../../../../src/pages/NotFound/NotFound.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\nimport ErrorPage from \"../ErrorPage\";\nimport DogeSpace from \"./404.svg\";\n\nconst NotFound = () => {\n const { t } = useTranslation(undefined, { keyPrefix: \"errors.notFound\" });\n\n return (\n <ErrorPage\n code={t(\"code\")}\n title={t(\"title\")}\n backgroundLabel={t(\"image_description\")}\n background={`url(${DogeSpace})`}\n />\n );\n};\n\nexport default NotFound;\n"],"names":["NotFound","t","useTranslation","undefined","keyPrefix","ErrorPage","DogeSpace","NotFound$1"],"mappings":";;;;AAKA,MAAMA,IAAWA,MAAM;AACf,QAAA;AAAA,IAAEC,GAAAA;AAAAA,EAAAA,IAAMC,EAAeC,QAAW;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAmB;AAExE,2BACGC,GACC,EAAA,MAAMJ,EAAE,MAAM,GACd,OAAOA,EAAE,OAAO,GAChB,iBAAiBA,EAAE,mBAAmB,GACtC,YAAa,OAAMK,CAAU,IAC7B,CAAA;AAEN,GAEAC,IAAeP;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { createContext as s, useState as o, useMemo as
|
|
3
|
-
import { css as
|
|
4
|
-
import { v4 as
|
|
5
|
-
import { theme as g, HvBanner as
|
|
6
|
-
import { useTranslation as
|
|
1
|
+
import { jsxs as h, jsx as n } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { createContext as s, useState as o, useMemo as u, useEffect as B } from "react";
|
|
3
|
+
import { css as p } from "@emotion/css";
|
|
4
|
+
import { v4 as V } from "uuid";
|
|
5
|
+
import { theme as g, HvBanner as Y } from "@hitachivantara/uikit-react-core";
|
|
6
|
+
import { useTranslation as H } from "react-i18next";
|
|
7
7
|
import F from "./hooks/useNavigationContext.js";
|
|
8
|
-
import
|
|
9
|
-
const
|
|
8
|
+
import J from "./hooks/useLayoutContext.js";
|
|
9
|
+
const N = s({
|
|
10
10
|
show: () => {
|
|
11
11
|
},
|
|
12
12
|
dismiss: () => {
|
|
@@ -15,57 +15,59 @@ const v = s({
|
|
|
15
15
|
children: t
|
|
16
16
|
}) => {
|
|
17
17
|
const {
|
|
18
|
-
t:
|
|
19
|
-
} =
|
|
20
|
-
|
|
18
|
+
t: i
|
|
19
|
+
} = H(void 0, {
|
|
20
|
+
keyPrefix: "notifications.banner"
|
|
21
|
+
}), {
|
|
22
|
+
showHeaderSubMenu: d,
|
|
21
23
|
isCompactMode: A
|
|
22
24
|
} = F(), {
|
|
23
|
-
verticalNavigationWidth:
|
|
24
|
-
setBannerMaxHeight:
|
|
25
|
-
} =
|
|
25
|
+
verticalNavigationWidth: G,
|
|
26
|
+
setBannerMaxHeight: m
|
|
27
|
+
} = J(), [b, X] = o([]), a = (I) => {
|
|
26
28
|
const c = {
|
|
27
|
-
id:
|
|
29
|
+
id: V(),
|
|
28
30
|
...I,
|
|
29
31
|
variant: I.variant ?? "default"
|
|
30
32
|
};
|
|
31
|
-
|
|
32
|
-
},
|
|
33
|
-
|
|
34
|
-
},
|
|
35
|
-
show:
|
|
36
|
-
dismiss:
|
|
33
|
+
X((l) => [...l, c]);
|
|
34
|
+
}, Z = (I) => {
|
|
35
|
+
X((C) => C.filter((c) => c.id !== I));
|
|
36
|
+
}, W = u(() => ({
|
|
37
|
+
show: a,
|
|
38
|
+
dismiss: Z
|
|
37
39
|
}), []);
|
|
38
|
-
|
|
39
|
-
if (
|
|
40
|
-
const I =
|
|
40
|
+
B(() => {
|
|
41
|
+
if (b.length > 0) {
|
|
42
|
+
const I = b.map((c) => {
|
|
41
43
|
const l = document.getElementById(c.id);
|
|
42
44
|
return l ? l.clientHeight : 0;
|
|
43
|
-
}),
|
|
44
|
-
|
|
45
|
+
}), C = Math.max(...I);
|
|
46
|
+
m(C);
|
|
45
47
|
} else
|
|
46
|
-
|
|
47
|
-
}, [
|
|
48
|
-
const
|
|
49
|
-
marginTop:
|
|
50
|
-
left: `calc(${
|
|
51
|
-
width: `calc(100% - (${
|
|
48
|
+
m(0);
|
|
49
|
+
}, [b, m]);
|
|
50
|
+
const e = u(() => /* @__PURE__ */ p({
|
|
51
|
+
marginTop: d && !A ? `calc(${g.header.height} + ${g.header.secondLevelHeight} + ${g.space.sm})` : `calc(${g.header.height} + ${g.space.sm})`,
|
|
52
|
+
left: `calc(${G}px + ${g.space.sm})`,
|
|
53
|
+
width: `calc(100% - (${G}px + ${g.space.sm}) - ${g.space.sm})`,
|
|
52
54
|
transform: "unset",
|
|
53
55
|
minWidth: "unset",
|
|
54
56
|
zIndex: g.zIndices.banner
|
|
55
|
-
}, process.env.NODE_ENV === "production" ? "" : ";label:styles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
56
|
-
return /* @__PURE__ */
|
|
57
|
-
|
|
58
|
-
anchorOriginTopCenter:
|
|
59
|
-
}, id: I.id, offset: 0, open: !0, onClose: () =>
|
|
57
|
+
}, process.env.NODE_ENV === "production" ? "" : ";label:styles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9wcm92aWRlcnMvQmFubmVyUHJvdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1GTSIsImZpbGUiOiIvX193L2h2LWFwcC1zaGVsbC9odi1hcHAtc2hlbGwvY2xpZW50L3BhY2thZ2VzL2FwcC1zaGVsbC11aS9zcmMvcHJvdmlkZXJzL0Jhbm5lclByb3ZpZGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNyZWF0ZUNvbnRleHQsIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7IHY0IGFzIHV1aWQgfSBmcm9tIFwidXVpZFwiO1xuXG5pbXBvcnQgeyBIdkJhbm5lciwgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXJlYWN0LWNvcmVcIjtcbmltcG9ydCB7IEh2QXBwU2hlbGxFdmVudE5vdGlmaWNhdGlvbiB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvYXBwLXNoZWxsLWV2ZW50c1wiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHVzZU5hdmlnYXRpb25Db250ZXh0IGZyb20gXCIuL2hvb2tzL3VzZU5hdmlnYXRpb25Db250ZXh0XCI7XG5pbXBvcnQgdXNlTGF5b3V0Q29udGV4dCBmcm9tIFwiLi9ob29rcy91c2VMYXlvdXRDb250ZXh0XCI7XG5cbmV4cG9ydCB0eXBlIEJhbm5lclByb3ZpZGVyUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG59O1xuXG5leHBvcnQgaW50ZXJmYWNlIEJhbm5lciBleHRlbmRzIE9taXQ8SHZBcHBTaGVsbEV2ZW50Tm90aWZpY2F0aW9uLCBcInR5cGVcIj4ge1xuICBpZDogc3RyaW5nO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEJhbm5lckNvbnRleHRWYWx1ZSB7XG4gIHNob3c6IChub3RpZmljYXRpb246IEh2QXBwU2hlbGxFdmVudE5vdGlmaWNhdGlvbikgPT4gdm9pZDtcbiAgZGlzbWlzczogKGlkOiBzdHJpbmcpID0+IHZvaWQ7XG59XG5cbmV4cG9ydCBjb25zdCBCYW5uZXJDb250ZXh0ID0gY3JlYXRlQ29udGV4dDxCYW5uZXJDb250ZXh0VmFsdWU+KHtcbiAgc2hvdzogKCkgPT4ge1xuICAgIC8vIEVtcHR5IGZ1bmN0aW9uXG4gIH0sXG4gIGRpc21pc3M6ICgpID0+IHtcbiAgICAvLyBFbXB0eSBmdW5jdGlvblxuICB9XG59KTtcblxuY29uc3QgQmFubmVyUHJvdmlkZXIgPSAoeyBjaGlsZHJlbiB9OiBCYW5uZXJQcm92aWRlclByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24odW5kZWZpbmVkLCB7XG4gICAga2V5UHJlZml4OiBcIm5vdGlmaWNhdGlvbnMuYmFubmVyXCJcbiAgfSk7XG4gIGNvbnN0IHsgc2hvd0hlYWRlclN1Yk1lbnUsIGlzQ29tcGFjdE1vZGUgfSA9IHVzZU5hdmlnYXRpb25Db250ZXh0KCk7XG4gIGNvbnN0IHsgdmVydGljYWxOYXZpZ2F0aW9uV2lkdGgsIHNldEJhbm5lck1heEhlaWdodCB9ID0gdXNlTGF5b3V0Q29udGV4dCgpO1xuICBjb25zdCBbYmFubmVycywgc2V0QmFubmVyc10gPSB1c2VTdGF0ZTxCYW5uZXJbXT4oW10pO1xuXG4gIGNvbnN0IHNob3cgPSAobm90aWZpY2F0aW9uOiBIdkFwcFNoZWxsRXZlbnROb3RpZmljYXRpb24pID0+IHtcbiAgICBjb25zdCBpZCA9IHV1aWQoKTtcblxuICAgIGNvbnN0IG5ld0Jhbm5lcjogQmFubmVyID0ge1xuICAgICAgaWQsXG4gICAgICAuLi5ub3RpZmljYXRpb24sXG4gICAgICB2YXJpYW50OiBub3RpZmljYXRpb24udmFyaWFudCA/PyBcImRlZmF1bHRcIlxuICAgIH07XG4gICAgc2V0QmFubmVycyhwcmV2QmFubmVycyA9PiBbLi4ucHJldkJhbm5lcnMsIG5ld0Jhbm5lcl0pO1xuICB9O1xuXG4gIGNvbnN0IGRpc21pc3MgPSAoaWQ6IHN0cmluZykgPT4ge1xuICAgIHNldEJhbm5lcnMocHJldkJhbm5lcnMgPT4gcHJldkJhbm5lcnMuZmlsdGVyKGJhbm5lciA9PiBiYW5uZXIuaWQgIT09IGlkKSk7XG4gIH07XG5cbiAgY29uc3QgdmFsdWUgPSB1c2VNZW1vKFxuICAgICgpID0+ICh7XG4gICAgICBzaG93LFxuICAgICAgZGlzbWlzc1xuICAgIH0pLFxuICAgIFtdXG4gICk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoYmFubmVycy5sZW5ndGggPiAwKSB7XG4gICAgICAvLyBHZXQgYWxsIGhlaWdodHMgZnJvbSB0aGUgcmVuZGVyZWQgYmFubmVyc1xuICAgICAgY29uc3QgYmFubmVySGVpZ2h0cyA9IGJhbm5lcnMubWFwKGl0ZW0gPT4ge1xuICAgICAgICBjb25zdCBiYW5uZXJFbGVtZW50ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoaXRlbS5pZCk7XG4gICAgICAgIHJldHVybiBiYW5uZXJFbGVtZW50ID8gYmFubmVyRWxlbWVudC5jbGllbnRIZWlnaHQgOiAwO1xuICAgICAgfSk7XG5cbiAgICAgIC8vIEZpbmQgdGhlICd0YWxsZXN0JyBiYW5uZXJcbiAgICAgIGNvbnN0IG1heEJhbm5lckhlaWdodCA9IE1hdGgubWF4KC4uLmJhbm5lckhlaWdodHMpO1xuXG4gICAgICAvLyBVcGRhdGUgcGFkZGluZyB2YWx1ZVxuICAgICAgc2V0QmFubmVyTWF4SGVpZ2h0KG1heEJhbm5lckhlaWdodCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHNldEJhbm5lck1heEhlaWdodCgwKTtcbiAgICB9XG4gIH0sIFtiYW5uZXJzLCBzZXRCYW5uZXJNYXhIZWlnaHRdKTtcblxuICBjb25zdCBzdHlsZXMgPSB1c2VNZW1vKFxuICAgICgpID0+XG4gICAgICBjc3Moe1xuICAgICAgICBtYXJnaW5Ub3A6XG4gICAgICAgICAgc2hvd0hlYWRlclN1Yk1lbnUgJiYgIWlzQ29tcGFjdE1vZGVcbiAgICAgICAgICAgID8gYGNhbGMoJHt0aGVtZS5oZWFkZXIuaGVpZ2h0fSArICR7dGhlbWUuaGVhZGVyLnNlY29uZExldmVsSGVpZ2h0fSArICR7dGhlbWUuc3BhY2Uuc219KWBcbiAgICAgICAgICAgIDogYGNhbGMoJHt0aGVtZS5oZWFkZXIuaGVpZ2h0fSArICR7dGhlbWUuc3BhY2Uuc219KWAsXG4gICAgICAgIGxlZnQ6IGBjYWxjKCR7dmVydGljYWxOYXZpZ2F0aW9uV2lkdGh9cHggKyAke3RoZW1lLnNwYWNlLnNtfSlgLFxuICAgICAgICB3aWR0aDogYGNhbGMoMTAwJSAtICgke3ZlcnRpY2FsTmF2aWdhdGlvbldpZHRofXB4ICsgJHt0aGVtZS5zcGFjZS5zbX0pIC0gJHt0aGVtZS5zcGFjZS5zbX0pYCxcbiAgICAgICAgdHJhbnNmb3JtOiBcInVuc2V0XCIsXG4gICAgICAgIG1pbldpZHRoOiBcInVuc2V0XCIsXG4gICAgICAgIHpJbmRleDogdGhlbWUuekluZGljZXMuYmFubmVyXG4gICAgICB9KSxcbiAgICBbaXNDb21wYWN0TW9kZSwgc2hvd0hlYWRlclN1Yk1lbnUsIHZlcnRpY2FsTmF2aWdhdGlvbldpZHRoXVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEJhbm5lckNvbnRleHQuUHJvdmlkZXIgdmFsdWU9e3ZhbHVlfT5cbiAgICAgIHtiYW5uZXJzLm1hcChiYW5uZXIgPT4gKFxuICAgICAgICA8SHZCYW5uZXJcbiAgICAgICAgICBjbGFzc2VzPXt7XG4gICAgICAgICAgICBhbmNob3JPcmlnaW5Ub3BDZW50ZXI6IHN0eWxlc1xuICAgICAgICAgIH19XG4gICAgICAgICAgaWQ9e2Jhbm5lci5pZH1cbiAgICAgICAgICBrZXk9e2Jhbm5lci5pZH1cbiAgICAgICAgICBvZmZzZXQ9ezB9XG4gICAgICAgICAgb3BlblxuICAgICAgICAgIG9uQ2xvc2U9eygpID0+IGRpc21pc3MoYmFubmVyLmlkKX1cbiAgICAgICAgICB2YXJpYW50PXtiYW5uZXIudmFyaWFudH1cbiAgICAgICAgICBsYWJlbD17YmFubmVyLm1lc3NhZ2V9XG4gICAgICAgICAgc2hvd0ljb25cbiAgICAgICAgICBhY3Rpb25zPXtiYW5uZXIuYWN0aW9uc31cbiAgICAgICAgICBhY3Rpb25zQ2FsbGJhY2s9e2Jhbm5lci5hY3Rpb25zQ2FsbGJhY2t9XG4gICAgICAgICAgYmFubmVyQ29udGVudFByb3BzPXt7XG4gICAgICAgICAgICBhY3Rpb25Qcm9wczogeyBcImFyaWEtbGFiZWxcIjogdChcImNsb3NlXCIpIH1cbiAgICAgICAgICB9fVxuICAgICAgICAvPlxuICAgICAgKSl9XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9CYW5uZXJDb250ZXh0LlByb3ZpZGVyPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQmFubmVyUHJvdmlkZXI7XG4iXX0= */"), [A, d, G]);
|
|
58
|
+
return /* @__PURE__ */ h(N.Provider, { value: W, children: [
|
|
59
|
+
b.map((I) => /* @__PURE__ */ n(Y, { classes: {
|
|
60
|
+
anchorOriginTopCenter: e
|
|
61
|
+
}, id: I.id, offset: 0, open: !0, onClose: () => Z(I.id), variant: I.variant, label: I.message, showIcon: !0, actions: I.actions, actionsCallback: I.actionsCallback, bannerContentProps: {
|
|
60
62
|
actionProps: {
|
|
61
|
-
"aria-label":
|
|
63
|
+
"aria-label": i("close")
|
|
62
64
|
}
|
|
63
65
|
} }, I.id)),
|
|
64
66
|
t
|
|
65
67
|
] });
|
|
66
|
-
},
|
|
68
|
+
}, j = x;
|
|
67
69
|
export {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
+
N as BannerContext,
|
|
71
|
+
j as default
|
|
70
72
|
};
|
|
71
73
|
//# sourceMappingURL=BannerProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerProvider.js","sources":["../../../src/providers/BannerProvider.tsx"],"sourcesContent":["import { createContext, useEffect, useMemo, useState } from \"react\";\nimport { css } from \"@emotion/css\";\nimport { v4 as uuid } from \"uuid\";\n\nimport { HvBanner, theme } from \"@hitachivantara/uikit-react-core\";\nimport { HvAppShellEventNotification } from \"@hitachivantara/app-shell-events\";\nimport { useTranslation } from \"react-i18next\";\nimport useNavigationContext from \"./hooks/useNavigationContext\";\nimport useLayoutContext from \"./hooks/useLayoutContext\";\n\nexport type BannerProviderProps = {\n children: React.ReactNode;\n};\n\nexport interface Banner extends Omit<HvAppShellEventNotification, \"type\"> {\n id: string;\n}\n\nexport interface BannerContextValue {\n show: (notification: HvAppShellEventNotification) => void;\n dismiss: (id: string) => void;\n}\n\nexport const BannerContext = createContext<BannerContextValue>({\n show: () => {\n // Empty function\n },\n dismiss: () => {\n // Empty function\n }\n});\n\nconst BannerProvider = ({ children }: BannerProviderProps) => {\n const { t } = useTranslation();\n const { showHeaderSubMenu, isCompactMode } = useNavigationContext();\n const { verticalNavigationWidth, setBannerMaxHeight } = useLayoutContext();\n const [banners, setBanners] = useState<Banner[]>([]);\n\n const show = (notification: HvAppShellEventNotification) => {\n const id = uuid();\n\n const newBanner: Banner = {\n id,\n ...notification,\n variant: notification.variant ?? \"default\"\n };\n setBanners(prevBanners => [...prevBanners, newBanner]);\n };\n\n const dismiss = (id: string) => {\n setBanners(prevBanners => prevBanners.filter(banner => banner.id !== id));\n };\n\n const value = useMemo(\n () => ({\n show,\n dismiss\n }),\n []\n );\n\n useEffect(() => {\n if (banners.length > 0) {\n // Get all heights from the rendered banners\n const bannerHeights = banners.map(item => {\n const bannerElement = document.getElementById(item.id);\n return bannerElement ? bannerElement.clientHeight : 0;\n });\n\n // Find the 'tallest' banner\n const maxBannerHeight = Math.max(...bannerHeights);\n\n // Update padding value\n setBannerMaxHeight(maxBannerHeight);\n } else {\n setBannerMaxHeight(0);\n }\n }, [banners, setBannerMaxHeight]);\n\n const styles = useMemo(\n () =>\n css({\n marginTop:\n showHeaderSubMenu && !isCompactMode\n ? `calc(${theme.header.height} + ${theme.header.secondLevelHeight} + ${theme.space.sm})`\n : `calc(${theme.header.height} + ${theme.space.sm})`,\n left: `calc(${verticalNavigationWidth}px + ${theme.space.sm})`,\n width: `calc(100% - (${verticalNavigationWidth}px + ${theme.space.sm}) - ${theme.space.sm})`,\n transform: \"unset\",\n minWidth: \"unset\",\n zIndex: theme.zIndices.banner\n }),\n [isCompactMode, showHeaderSubMenu, verticalNavigationWidth]\n );\n\n
|
|
1
|
+
{"version":3,"file":"BannerProvider.js","sources":["../../../src/providers/BannerProvider.tsx"],"sourcesContent":["import { createContext, useEffect, useMemo, useState } from \"react\";\nimport { css } from \"@emotion/css\";\nimport { v4 as uuid } from \"uuid\";\n\nimport { HvBanner, theme } from \"@hitachivantara/uikit-react-core\";\nimport { HvAppShellEventNotification } from \"@hitachivantara/app-shell-events\";\nimport { useTranslation } from \"react-i18next\";\nimport useNavigationContext from \"./hooks/useNavigationContext\";\nimport useLayoutContext from \"./hooks/useLayoutContext\";\n\nexport type BannerProviderProps = {\n children: React.ReactNode;\n};\n\nexport interface Banner extends Omit<HvAppShellEventNotification, \"type\"> {\n id: string;\n}\n\nexport interface BannerContextValue {\n show: (notification: HvAppShellEventNotification) => void;\n dismiss: (id: string) => void;\n}\n\nexport const BannerContext = createContext<BannerContextValue>({\n show: () => {\n // Empty function\n },\n dismiss: () => {\n // Empty function\n }\n});\n\nconst BannerProvider = ({ children }: BannerProviderProps) => {\n const { t } = useTranslation(undefined, {\n keyPrefix: \"notifications.banner\"\n });\n const { showHeaderSubMenu, isCompactMode } = useNavigationContext();\n const { verticalNavigationWidth, setBannerMaxHeight } = useLayoutContext();\n const [banners, setBanners] = useState<Banner[]>([]);\n\n const show = (notification: HvAppShellEventNotification) => {\n const id = uuid();\n\n const newBanner: Banner = {\n id,\n ...notification,\n variant: notification.variant ?? \"default\"\n };\n setBanners(prevBanners => [...prevBanners, newBanner]);\n };\n\n const dismiss = (id: string) => {\n setBanners(prevBanners => prevBanners.filter(banner => banner.id !== id));\n };\n\n const value = useMemo(\n () => ({\n show,\n dismiss\n }),\n []\n );\n\n useEffect(() => {\n if (banners.length > 0) {\n // Get all heights from the rendered banners\n const bannerHeights = banners.map(item => {\n const bannerElement = document.getElementById(item.id);\n return bannerElement ? bannerElement.clientHeight : 0;\n });\n\n // Find the 'tallest' banner\n const maxBannerHeight = Math.max(...bannerHeights);\n\n // Update padding value\n setBannerMaxHeight(maxBannerHeight);\n } else {\n setBannerMaxHeight(0);\n }\n }, [banners, setBannerMaxHeight]);\n\n const styles = useMemo(\n () =>\n css({\n marginTop:\n showHeaderSubMenu && !isCompactMode\n ? `calc(${theme.header.height} + ${theme.header.secondLevelHeight} + ${theme.space.sm})`\n : `calc(${theme.header.height} + ${theme.space.sm})`,\n left: `calc(${verticalNavigationWidth}px + ${theme.space.sm})`,\n width: `calc(100% - (${verticalNavigationWidth}px + ${theme.space.sm}) - ${theme.space.sm})`,\n transform: \"unset\",\n minWidth: \"unset\",\n zIndex: theme.zIndices.banner\n }),\n [isCompactMode, showHeaderSubMenu, verticalNavigationWidth]\n );\n\n return (\n <BannerContext.Provider value={value}>\n {banners.map(banner => (\n <HvBanner\n classes={{\n anchorOriginTopCenter: styles\n }}\n id={banner.id}\n key={banner.id}\n offset={0}\n open\n onClose={() => dismiss(banner.id)}\n variant={banner.variant}\n label={banner.message}\n showIcon\n actions={banner.actions}\n actionsCallback={banner.actionsCallback}\n bannerContentProps={{\n actionProps: { \"aria-label\": t(\"close\") }\n }}\n />\n ))}\n {children}\n </BannerContext.Provider>\n );\n};\n\nexport default BannerProvider;\n"],"names":["BannerContext","createContext","show","dismiss","BannerProvider","children","t","useTranslation","undefined","keyPrefix","showHeaderSubMenu","isCompactMode","useNavigationContext","verticalNavigationWidth","setBannerMaxHeight","useLayoutContext","banners","setBanners","useState","notification","newBanner","id","uuid","variant","prevBanners","filter","banner","value","useMemo","useEffect","length","bannerHeights","map","item","bannerElement","document","getElementById","clientHeight","maxBannerHeight","Math","max","styles","css","marginTop","theme","header","height","secondLevelHeight","space","sm","left","width","transform","minWidth","zIndex","zIndices","process","env","NODE_ENV","jsxs","jsx","HvBanner","anchorOriginTopCenter","message","actions","actionsCallback","actionProps","BannerProvider$1"],"mappings":";;;;;;;;AAuBO,MAAMA,IAAgBC,EAAkC;AAAA,EAC7DC,MAAMA,MAAM;AAAA,EACV;AAAA,EAEFC,SAASA,MAAM;AAAA,EACb;AAEJ,CAAC,GAEKC,IAAiBA,CAAC;AAAA,EAAEC,UAAAA;AAA8B,MAAM;AACtD,QAAA;AAAA,IAAEC,GAAAA;AAAAA,EAAAA,IAAMC,EAAeC,QAAW;AAAA,IACtCC,WAAW;AAAA,EAAA,CACZ,GACK;AAAA,IAAEC,mBAAAA;AAAAA,IAAmBC,eAAAA;AAAAA,MAAkBC,EAAqB,GAC5D;AAAA,IAAEC,yBAAAA;AAAAA,IAAyBC,oBAAAA;AAAAA,MAAuBC,EAAiB,GACnE,CAACC,GAASC,CAAU,IAAIC,EAAmB,CAAE,CAAA,GAE7ChB,IAAOA,CAACiB,MAA8C;AAG1D,UAAMC,IAAoB;AAAA,MACxBC,IAHSC;MAIT,GAAGH;AAAAA,MACHI,SAASJ,EAAaI,WAAW;AAAA,IAAA;AAEnCN,IAAAA,EAAWO,CAAeA,MAAA,CAAC,GAAGA,GAAaJ,CAAS,CAAC;AAAA,EAAA,GAGjDjB,IAAUA,CAACkB,MAAe;AAC9BJ,IAAAA,EAAWO,OAAeA,EAAYC,OAAOC,OAAUA,EAAOL,OAAOA,CAAE,CAAC;AAAA,EAAA,GAGpEM,IAAQC,EACZ,OAAO;AAAA,IACL1B,MAAAA;AAAAA,IACAC,SAAAA;AAAAA,EAAAA,IAEF,CACF,CAAA;AAEA0B,EAAAA,EAAU,MAAM;AACVb,QAAAA,EAAQc,SAAS,GAAG;AAEhBC,YAAAA,IAAgBf,EAAQgB,IAAIC,CAAQA,MAAA;AACxC,cAAMC,IAAgBC,SAASC,eAAeH,EAAKZ,EAAE;AAC9Ca,eAAAA,IAAgBA,EAAcG,eAAe;AAAA,MAAA,CACrD,GAGKC,IAAkBC,KAAKC,IAAI,GAAGT,CAAa;AAGjDjB,MAAAA,EAAmBwB,CAAe;AAAA,IAAA;AAElCxB,MAAAA,EAAmB,CAAC;AAAA,EACtB,GACC,CAACE,GAASF,CAAkB,CAAC;AAE1B2B,QAAAA,IAASb,EACb,MACM,gBAAAc,EAAA;AAAA,IACFC,WACEjC,KAAqB,CAACC,IACjB,QAAOiC,EAAMC,OAAOC,MAAO,MAAKF,EAAMC,OAAOE,iBAAkB,MAAKH,EAAMI,MAAMC,EAAG,MACnF,QAAOL,EAAMC,OAAOC,MAAO,MAAKF,EAAMI,MAAMC,EAAG;AAAA,IACtDC,MAAO,QAAOrC,CAAwB,QAAO+B,EAAMI,MAAMC,EAAG;AAAA,IAC5DE,OAAQ,gBAAetC,CAAwB,QAAO+B,EAAMI,MAAMC,EAAG,OAAML,EAAMI,MAAMC,EAAG;AAAA,IAC1FG,WAAW;AAAA,IACXC,UAAU;AAAA,IACVC,QAAQV,EAAMW,SAAS7B;AAAAA,EAAAA,GACxB8B,QAAAC,IAAAC,aAAA,eAAA,KAAA,kBAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,q1KAAA,GACH,CAAC/C,GAAeD,GAAmBG,CAAuB,CAC5D;AAEA,SACG,gBAAA8C,EAAA3D,EAAc,UAAd,EAAuB,OAAA2B,GACrBX,UAAAA;AAAAA,IAAAA,EAAQgB,IAAIN,CAAAA,MACV,gBAAAkC,EAAAC,GAAA,EACC,SAAS;AAAA,MACPC,uBAAuBrB;AAAAA,IAEzB,GAAA,IAAIf,EAAOL,IAEX,QAAQ,GACR,MAAI,IACJ,SAAS,MAAMlB,EAAQuB,EAAOL,EAAE,GAChC,SAASK,EAAOH,SAChB,OAAOG,EAAOqC,SACd,UAAQ,IACR,SAASrC,EAAOsC,SAChB,iBAAiBtC,EAAOuC,iBACxB,oBAAoB;AAAA,MAClBC,aAAa;AAAA,QAAE,cAAc5D,EAAE,OAAO;AAAA,MAAE;AAAA,IAAA,KAVrCoB,EAAOL,GAaf;AAAA,IACAhB;AAAAA,EACH,EAAA,CAAA;AAEJ,GAEA8D,IAAe/D;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/app-shell-ui",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.1",
|
|
4
4
|
"description": "AppShell Component",
|
|
5
5
|
"author": "Hitachi Vantara - Boba Fett Team",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"vite-plugin-dts": "^3.6.4",
|
|
69
69
|
"vite-tsconfig-paths": "^4.0.5"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "d8f6ac33c04ba580ecd275a0f94d367f8d186ef8"
|
|
72
72
|
}
|