@hitachivantara/app-shell-ui 1.3.0 → 1.4.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.
- package/dist/esm/components/layout/Header/Header.js +37 -30
- package/dist/esm/components/layout/Header/Header.js.map +1 -1
- package/dist/esm/components/layout/Header/HeaderActions/HeaderActions.js +14 -27
- package/dist/esm/components/layout/Header/HeaderActions/HeaderActions.js.map +1 -1
- package/dist/esm/components/layout/Header/HeaderActions/InternalActions/AppSwitcherToggle/AppSwitcherToggle.js +29 -32
- 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 +6 -6
- 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 +9 -9
- package/dist/esm/components/layout/Header/HeaderActions/InternalActions/HelpButton/HelpButton.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,38 +1,45 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Helmet as
|
|
3
|
-
import { useTranslation as
|
|
4
|
-
import { HvHeader as
|
|
5
|
-
import { CONFIG_TRANSLATIONS_NAMESPACE as
|
|
6
|
-
import { useHvNavigation as
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
|
|
1
|
+
import { jsxs as u, jsx as o } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { Helmet as M } from "react-helmet-async";
|
|
3
|
+
import { useTranslation as d } from "react-i18next";
|
|
4
|
+
import { HvHeader as I, HvButton as O, HvHeaderBrand as S, HvHeaderNavigation as x } from "@hitachivantara/uikit-react-core";
|
|
5
|
+
import { CONFIG_TRANSLATIONS_NAMESPACE as A, useHvAppShellConfig as L } from "@hitachivantara/app-shell-shared";
|
|
6
|
+
import { useHvNavigation as T } from "@hitachivantara/app-shell-navigation";
|
|
7
|
+
import B from "./styles.js";
|
|
8
|
+
import E from "../../../providers/hooks/useNavigationContext.js";
|
|
9
|
+
import P from "../../IconUiKit/index.js";
|
|
10
|
+
import _ from "./HeaderActions/HeaderActions.js";
|
|
11
|
+
import w from "./BrandLogo/BrandLogo.js";
|
|
12
|
+
const V = () => {
|
|
12
13
|
const {
|
|
13
|
-
t:
|
|
14
|
-
} =
|
|
15
|
-
|
|
16
|
-
} =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
14
|
+
t: n
|
|
15
|
+
} = d(), {
|
|
16
|
+
t: c
|
|
17
|
+
} = d(A), e = L(), {
|
|
18
|
+
navigate: m
|
|
19
|
+
} = T(), {
|
|
20
|
+
items: a,
|
|
21
|
+
selectedMenuItemId: g,
|
|
22
|
+
rootMenuItemId: v,
|
|
23
|
+
isCompactMode: r,
|
|
24
|
+
switchVerticalNavigationMode: p,
|
|
25
|
+
verticalNavigationMode: f,
|
|
26
|
+
verticalNavigationItems: h
|
|
27
|
+
} = E(), l = e.navigationMode === "ONLY_TOP", N = !r && e.navigationMode !== "ONLY_LEFT" && a.length > 0, t = f === "CLOSED", C = r && h.length > 0, H = (j, i) => {
|
|
28
|
+
i.href && m(i.href, {
|
|
23
29
|
state: {
|
|
24
|
-
selectedItemId:
|
|
30
|
+
selectedItemId: i.id
|
|
25
31
|
}
|
|
26
32
|
});
|
|
27
|
-
},
|
|
28
|
-
return /* @__PURE__ */
|
|
29
|
-
/* @__PURE__ */ o(
|
|
30
|
-
/* @__PURE__ */ o(
|
|
31
|
-
|
|
32
|
-
/* @__PURE__ */ o(
|
|
33
|
+
}, s = e.name ? c(e.name) : "";
|
|
34
|
+
return /* @__PURE__ */ u(I, { position: "fixed", children: [
|
|
35
|
+
/* @__PURE__ */ o(M, { children: /* @__PURE__ */ o("title", { children: s }) }),
|
|
36
|
+
C && /* @__PURE__ */ o(O, { icon: !0, "aria-label": n(t ? "header.navigation.openNavigationPanel" : "header.navigation.closeNavigationPanel"), "aria-expanded": !t, onClick: p, children: /* @__PURE__ */ o(P, { name: t ? "Menu" : "Close" }) }),
|
|
37
|
+
/* @__PURE__ */ o(S, { logo: /* @__PURE__ */ o(B, { children: /* @__PURE__ */ o(w, { logo: e.logo }) }), name: s }),
|
|
38
|
+
N && /* @__PURE__ */ o(x, { data: a, selected: l ? g : v, onClick: H, levels: l ? 2 : 1 }),
|
|
39
|
+
/* @__PURE__ */ o(_, {})
|
|
33
40
|
] });
|
|
34
|
-
},
|
|
41
|
+
}, $ = V;
|
|
35
42
|
export {
|
|
36
|
-
|
|
43
|
+
$ as default
|
|
37
44
|
};
|
|
38
45
|
//# sourceMappingURL=Header.js.map
|
|
@@ -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 HvHeader,\n HvHeaderBrand,\n HvHeaderNavigation,\n
|
|
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(\"header.navigation.openNavigationPanel\")\n : t(\"header.navigation.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","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,MAAMC,EAAe,GACvB;AAAA,IAAED,GAAGE;AAAAA,EAAAA,IAAYD,EAAeE,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,cAEMlC,EADJoB,IACM,0CACA,wCADuC,GAG/C,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,IAAe3C;"}
|
|
@@ -1,31 +1,18 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
import b from "./DynamicAction/DynamicAction.js";
|
|
8
|
-
import C, { internalActions as H } from "./InternalActions/InternalAction/InternalAction.js";
|
|
9
|
-
const x = () => {
|
|
1
|
+
import { jsx as r } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { HvHeaderActions as d } from "@hitachivantara/uikit-react-core";
|
|
3
|
+
import { useHvAppShellConfig as l } from "@hitachivantara/app-shell-shared";
|
|
4
|
+
import m from "./DynamicAction/DynamicAction.js";
|
|
5
|
+
import s, { internalActions as u } from "./InternalActions/InternalAction/InternalAction.js";
|
|
6
|
+
const c = () => {
|
|
10
7
|
const {
|
|
11
|
-
|
|
12
|
-
} =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
verticalNavigationItems: l
|
|
19
|
-
} = A(), i = c === "CLOSED", d = r && l.length > 0;
|
|
20
|
-
return /* @__PURE__ */ v(f, { children: [
|
|
21
|
-
t == null ? void 0 : t.actions.map((n, m) => {
|
|
22
|
-
const a = `headerAction_${m}`;
|
|
23
|
-
return H.find((u) => u.bundle === n.bundle) ? /* @__PURE__ */ o(C, { bundle: n.bundle, ...n.config }, a) : /* @__PURE__ */ o(b, { bundle: n.bundle, ...n.config }, a);
|
|
24
|
-
}),
|
|
25
|
-
d && /* @__PURE__ */ o(g, { icon: !0, onClick: () => s(), variant: "secondaryGhost", "aria-label": i ? e("header.navigation.openNavigationPanel") ?? "" : e("header.navigation.closeNavigationPanel") ?? "", "aria-expanded": !i, children: /* @__PURE__ */ o(N, { name: i ? "Menu" : "Close" }) })
|
|
26
|
-
] });
|
|
27
|
-
}, K = x;
|
|
8
|
+
header: e
|
|
9
|
+
} = l();
|
|
10
|
+
return /* @__PURE__ */ r(d, { children: e == null ? void 0 : e.actions.map((n, t) => {
|
|
11
|
+
const o = `${n.bundle}${t}`;
|
|
12
|
+
return u.find((i) => i.bundle === n.bundle) ? /* @__PURE__ */ r(s, { bundle: n.bundle, ...n.config }, o) : /* @__PURE__ */ r(m, { bundle: n.bundle, ...n.config }, o);
|
|
13
|
+
}) });
|
|
14
|
+
}, H = c;
|
|
28
15
|
export {
|
|
29
|
-
|
|
16
|
+
H as default
|
|
30
17
|
};
|
|
31
18
|
//# sourceMappingURL=HeaderActions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderActions.js","sources":["../../../../../../src/components/layout/Header/HeaderActions/HeaderActions.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"HeaderActions.js","sources":["../../../../../../src/components/layout/Header/HeaderActions/HeaderActions.tsx"],"sourcesContent":["import { HvHeaderActions } from \"@hitachivantara/uikit-react-core\";\nimport { useHvAppShellConfig } from \"@hitachivantara/app-shell-shared\";\n\nimport DynamicAction from \"./DynamicAction\";\nimport InternalAction, {\n internalActions\n} from \"./InternalActions/InternalAction/InternalAction\";\n\nconst HeaderActions = () => {\n const { header } = useHvAppShellConfig();\n\n return (\n <HvHeaderActions>\n {header?.actions.map((action, index) => {\n const headerActionKey = `${action.bundle}${index}`;\n if (\n !internalActions.find(\n internalAction => internalAction.bundle === action.bundle\n )\n ) {\n return (\n <DynamicAction\n key={headerActionKey}\n bundle={action.bundle}\n {...action.config}\n />\n );\n }\n return (\n <InternalAction\n key={headerActionKey}\n bundle={action.bundle}\n {...action.config}\n />\n );\n })}\n </HvHeaderActions>\n );\n};\n\nexport default HeaderActions;\n"],"names":["HeaderActions","header","useHvAppShellConfig","HvHeaderActions","actions","map","action","index","headerActionKey","bundle","internalActions","find","internalAction","jsx","InternalAction","config","DynamicAction","HeaderActions$1"],"mappings":";;;;;AAQA,MAAMA,IAAgBA,MAAM;AACpB,QAAA;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAoB;AAEvC,2BACGC,GACEF,EAAAA,UAAAA,KAAAA,gBAAAA,EAAQG,QAAQC,IAAI,CAACC,GAAQC,MAAU;AACtC,UAAMC,IAAmB,GAAEF,EAAOG,MAAO,GAAEF,CAAM;AAE/C,WAACG,EAAgBC,KACfC,CAAAA,MAAkBA,EAAeH,WAAWH,EAAOG,MACrD,IAWA,gBAAAI,EAACC,KAEC,QAAQR,EAAOG,WACXH,EAAOS,UAFNP,CAGL,IAZA,gBAAAK,EAACG,KAEC,QAAQV,EAAOG,WACXH,EAAOS,UAFNP,CAGL;AAAA,EAUP,GACH,CAAA;AAEJ,GAEAS,IAAejB;"}
|
|
@@ -1,52 +1,49 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as g } from "react";
|
|
3
|
-
import { useTranslation as
|
|
1
|
+
import { jsx as t, jsxs as A } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useState as u, useId as g } from "react";
|
|
3
|
+
import { useTranslation as p } from "react-i18next";
|
|
4
4
|
import { createPortal as w } from "react-dom";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import { HvButton as k, HvAppSwitcher as v, HvTypography as y } from "@hitachivantara/uikit-react-core";
|
|
5
|
+
import { ClickAwayListener as C } from "@mui/material";
|
|
6
|
+
import { HvIconButton as k, HvAppSwitcher as I, HvTypography as P } from "@hitachivantara/uikit-react-core";
|
|
8
7
|
import { CONFIG_TRANSLATIONS_NAMESPACE as b } from "@hitachivantara/app-shell-shared";
|
|
9
|
-
import
|
|
8
|
+
import y from "./styles.js";
|
|
10
9
|
import d from "../../../../../IconUiKit/index.js";
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
const
|
|
14
|
-
title:
|
|
15
|
-
apps:
|
|
10
|
+
import T from "../../../../../../lib/utils/textUtil.js";
|
|
11
|
+
import v from "../../../../../../lib/utils/documentUtil.js";
|
|
12
|
+
const x = ({
|
|
13
|
+
title: l,
|
|
14
|
+
apps: r
|
|
16
15
|
}) => {
|
|
17
16
|
const {
|
|
18
|
-
t:
|
|
19
|
-
} =
|
|
17
|
+
t: a
|
|
18
|
+
} = p(), {
|
|
20
19
|
t: i
|
|
21
|
-
} =
|
|
20
|
+
} = p(b), [n, c] = u(!1), s = g(), h = () => r ? r.map((e) => ({
|
|
22
21
|
name: i(e.label),
|
|
23
22
|
description: e.description ? i(e.description).toString() : void 0,
|
|
24
|
-
url:
|
|
23
|
+
url: T(e.url, ":") ? e.url : i(e.url).toString(),
|
|
25
24
|
target: e.target === "NEW" ? "_blank" : "_top",
|
|
26
|
-
iconElement: e.icon && /* @__PURE__ */
|
|
27
|
-
})) : [],
|
|
28
|
-
|
|
25
|
+
iconElement: e.icon && /* @__PURE__ */ t(d, { name: e.icon.name })
|
|
26
|
+
})) : [], m = () => {
|
|
27
|
+
c(!1);
|
|
29
28
|
}, S = () => {
|
|
30
|
-
|
|
29
|
+
m();
|
|
31
30
|
}, f = () => {
|
|
32
|
-
|
|
31
|
+
c(!n);
|
|
33
32
|
};
|
|
34
|
-
if (!
|
|
33
|
+
if (!r || r.length === 0)
|
|
35
34
|
return null;
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
"aria-controls": p
|
|
39
|
-
} : {}
|
|
40
|
-
};
|
|
41
|
-
return /* @__PURE__ */ r(P, { onClickAway: c, children: /* @__PURE__ */ u("div", { style: {
|
|
35
|
+
const o = l ? i(l) : a("header.appSwitcher.title");
|
|
36
|
+
return /* @__PURE__ */ t(C, { onClickAway: m, children: /* @__PURE__ */ A("div", { style: {
|
|
42
37
|
display: "flex",
|
|
43
38
|
margin: 0
|
|
44
39
|
}, children: [
|
|
45
|
-
/* @__PURE__ */
|
|
46
|
-
|
|
40
|
+
/* @__PURE__ */ t(k, { title: o, "aria-label": o, "aria-expanded": n, onClick: f, ...n && {
|
|
41
|
+
"aria-controls": s
|
|
42
|
+
}, children: /* @__PURE__ */ t(d, { name: "AppSwitcher" }) }),
|
|
43
|
+
n && w(/* @__PURE__ */ t(y, { id: s, role: "region", "aria-label": a("header.appSwitcher.ariaLabel") ?? "", children: /* @__PURE__ */ t(I, { applications: h(), onActionClickedCallback: S, header: /* @__PURE__ */ t(P, { variant: "label", children: o }) }) }), v())
|
|
47
44
|
] }) });
|
|
48
|
-
},
|
|
45
|
+
}, K = x;
|
|
49
46
|
export {
|
|
50
|
-
|
|
47
|
+
K as default
|
|
51
48
|
};
|
|
52
49
|
//# sourceMappingURL=AppSwitcherToggle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppSwitcherToggle.js","sources":["../../../../../../../../src/components/layout/Header/HeaderActions/InternalActions/AppSwitcherToggle/AppSwitcherToggle.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { createPortal } from \"react-dom\";\nimport {
|
|
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\n ? tConfig(title)\n : t(\"header.appSwitcher.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(\"header.appSwitcher.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","tConfig","CONFIG_TRANSLATIONS_NAMESPACE","isPanelOpen","setIsPanelOpen","useState","appSwitcherPanelId","useId","createAppsList","map","app","name","label","description","toString","undefined","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,MAAMC,EAAe,GACvB;AAAA,IAAED,GAAGE;AAAAA,EAAAA,IAAYD,EAAeE,CAA6B,GAC7D,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9CC,IAAqBC,KAOrBC,IAAiBA,MACdV,IACHA,EAAKW,IAAI,CAACC,OAA0C;AAAA,IAClDC,MAAMV,EAAQS,EAAIE,KAAK;AAAA,IACvBC,aAAaH,EAAIG,cACbZ,EAAQS,EAAIG,WAAW,EAAEC,SACzBC,IAAAA;AAAAA,IACJC,KAAKC,EAAeP,EAAIM,KAAK,GAAG,IAC5BN,EAAIM,MACJf,EAAQS,EAAIM,GAAG,EAAEF,SAAS;AAAA,IAC9BI,QAAQR,EAAIQ,WAAW,QAAQ,WAAW;AAAA,IAC1CC,aAAaT,EAAIU,QAAQ,gBAAAC,EAACC,KAAU,MAAMZ,EAAIU,KAAKT,MAAK;AAAA,EAAA,EACxD,IACF,CAAA,GAQAY,IAAwBA,MAAM;AAClCnB,IAAAA,EAAe,EAAK;AAAA,EAAA,GAQhBoB,IAAoCA,MAAM;AACxB,IAAAD;EAAA,GAQlBE,IAA+BA,MAAM;AACzCrB,IAAAA,EAAe,CAACD,CAAW;AAAA,EAAA;AAG7B,MAAI,CAACL,KAAQA,EAAK4B,WAAW;AACpB,WAAA;AAGT,QAAMC,IAAqB9B,IACvBI,EAAQJ,CAAK,IACbE,EAAE,0BAA0B;AAEhC,2BACG6B,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,iBAAexB,GACf,SAASsB,GACT,GAAKtB,KAAe;AAAA,MAAE,iBAAiBG;AAAAA,IAAAA,GACvC,UAAA,gBAAAe,EAACC,GAAU,EAAA,MAAK,cAAa,CAAA,GAC/B;AAAA,IACCnB,KACC8B,EACG,gBAAAZ,EAAAa,GAAA,EACC,IAAI5B,GACJ,MAAK,UACL,cAAYP,EAAE,8BAA8B,KAAK,IACjD,UAAC,gBAAAsB,EAAAc,GAAA,EACC,cAAc3B,EACd,GAAA,yBAAyBgB,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,IAAe1C;"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { jsx as o } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useTranslation as i } from "react-i18next";
|
|
3
|
-
import { useTheme as l,
|
|
4
|
-
import { HvAppShellEventThemeTrigger as
|
|
3
|
+
import { useTheme as l, HvIconButton as c } from "@hitachivantara/uikit-react-core";
|
|
4
|
+
import { HvAppShellEventThemeTrigger as m } from "@hitachivantara/app-shell-events";
|
|
5
5
|
import s from "../../../../../IconUiKit/index.js";
|
|
6
|
-
const
|
|
6
|
+
const a = () => {
|
|
7
7
|
const {
|
|
8
8
|
t: e
|
|
9
9
|
} = i(), {
|
|
10
10
|
colorModes: t
|
|
11
11
|
} = l(), r = () => {
|
|
12
|
-
const n = new CustomEvent(
|
|
12
|
+
const n = new CustomEvent(m, {
|
|
13
13
|
detail: {
|
|
14
14
|
colorMode: void 0
|
|
15
15
|
}
|
|
16
16
|
});
|
|
17
17
|
globalThis.dispatchEvent(n);
|
|
18
18
|
};
|
|
19
|
-
return t.length > 1 && /* @__PURE__ */ o(c, {
|
|
20
|
-
}, f =
|
|
19
|
+
return t.length > 1 && /* @__PURE__ */ o(c, { onClick: r, title: e("header.colorModeSwitcher.ariaLabel"), children: /* @__PURE__ */ o(s, { name: "ThemeSwitcher" }) }) || null;
|
|
20
|
+
}, f = a;
|
|
21
21
|
export {
|
|
22
22
|
f as default
|
|
23
23
|
};
|
|
@@ -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 {
|
|
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 (\n (colorModes.length > 1 && (\n <HvIconButton\n onClick={changeColorModeHandler}\n title={t(\"header.colorModeSwitcher.ariaLabel\")}>\n <IconUiKit name=\"ThemeSwitcher\" />\n </HvIconButton>\n )) ||\n null\n );\n};\n\nexport default ColorModeSwitcher;\n"],"names":["ColorModeSwitcher","t","useTranslation","colorModes","useTheme","changeColorModeHandler","customEvent","CustomEvent","HvAppShellEventThemeTrigger","detail","colorMode","undefined","globalThis","dispatchEvent","length","jsx","HvIconButton","IconUiKit","ColorModeSwitcher$1"],"mappings":";;;;;AAUA,MAAMA,IAA8BA,MAAM;AAClC,QAAA;AAAA,IAAEC,GAAAA;AAAAA,MAAMC,EAAe,GACvB;AAAA,IAAEC,YAAAA;AAAAA,MAAeC,EAAS,GAE1BC,IAAyBA,MAAM;AAC7BC,UAAAA,IAAc,IAAIC,YACtBC,GACA;AAAA,MACEC,QAAQ;AAAA,QACNC,WAAWC;AAAAA,MACb;AAAA,IAAA,CAEJ;AACAC,eAAWC,cAAcP,CAAW;AAAA,EAAA;AAGtC,SACGH,EAAWW,SAAS,KAClB,gBAAAC,EAAAC,GAAA,EACC,SAASX,GACT,OAAOJ,EAAE,oCAAoC,GAC7C,UAAC,gBAAAc,EAAAE,GAAA,EAAU,MAAK,gBAAe,CAAA,GACjC,KAEF;AAEJ,GAEAC,IAAelB;"}
|
package/dist/esm/components/layout/Header/HeaderActions/InternalActions/HelpButton/HelpButton.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as r } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { useTranslation as e } from "react-i18next";
|
|
3
|
-
import {
|
|
4
|
-
import { CONFIG_TRANSLATIONS_NAMESPACE as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
3
|
+
import { HvIconButton as f } from "@hitachivantara/uikit-react-core";
|
|
4
|
+
import { CONFIG_TRANSLATIONS_NAMESPACE as p } from "@hitachivantara/app-shell-shared";
|
|
5
|
+
import a from "../../../../../../lib/utils/textUtil.js";
|
|
6
|
+
import c from "../../../../../IconUiKit/index.js";
|
|
7
7
|
const s = ({
|
|
8
8
|
url: t,
|
|
9
9
|
description: o
|
|
@@ -12,13 +12,13 @@ const s = ({
|
|
|
12
12
|
t: i
|
|
13
13
|
} = e(), {
|
|
14
14
|
t: n
|
|
15
|
-
} = e(
|
|
15
|
+
} = e(p);
|
|
16
16
|
if (!t)
|
|
17
17
|
return null;
|
|
18
|
-
const
|
|
19
|
-
return /* @__PURE__ */ r(
|
|
20
|
-
},
|
|
18
|
+
const m = a(t, ":") ? t : n(t), l = o ? n(o) : i("header.helpUrl.documentationLink");
|
|
19
|
+
return /* @__PURE__ */ r(f, { component: "a", href: m, target: "_blank", title: l, rel: "noopener,noreferrer", children: /* @__PURE__ */ r(c, { name: "Help" }) });
|
|
20
|
+
}, N = s;
|
|
21
21
|
export {
|
|
22
|
-
|
|
22
|
+
N as default
|
|
23
23
|
};
|
|
24
24
|
//# sourceMappingURL=HelpButton.js.map
|
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 {
|
|
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(\"header.helpUrl.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","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,MAAMC,EAAe,GACvB;AAAA,IAAED,GAAGE;AAAAA,EAAAA,IAAYD,EAAeE,CAA6B;AAEnE,MAAI,CAACL;AACI,WAAA;AAGT,QAAMM,IAAWC,EAAeP,GAAK,GAAG,IAAIA,IAAMI,EAAQJ,CAAG,GAEvDQ,IAAmBP,IACrBG,EAAQH,CAAW,IACnBC,EAAE,kCAAkC;AAExC,2BACGO,GACC,EAAA,WAAU,KACV,MAAMH,GACN,QAAO,UACP,OAAOE,GACP,KAAI,uBACJ,UAAA,gBAAAE,EAACC,GAAU,EAAA,MAAK,QAAM,EACxB,CAAA;AAEJ,GAEAC,IAAeb;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/app-shell-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
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": "21d20a365cf4718324c6e0c628cf28cffd2cf444"
|
|
72
72
|
}
|