@hitachivantara/app-shell-ui 0.38.2 → 0.38.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ Hitachi Vantara App Shell. Effortless UI integration with top-notch user experie
|
|
|
4
4
|
|
|
5
5
|
## Overview
|
|
6
6
|
|
|
7
|
-
The App Shell is a set of shared client-side modules for common user-focused UI components and services. Together with the [Hitachi NEXT UI Kit](https://www.npmjs.com/package/@hitachivantara/uikit-react-core), it aims to provide a consistent user experience across all Hitachi Vantara applications, adopting the NEXT Design System and addressing Lumada Architecture key concepts of Composability and Portability.
|
|
7
|
+
The App Shell UI is a set of shared client-side modules for common user-focused UI components and services. Together with the [Hitachi NEXT UI Kit](https://www.npmjs.com/package/@hitachivantara/uikit-react-core), it aims to provide a consistent user experience across all Hitachi Vantara applications, adopting the NEXT Design System and addressing Lumada Architecture key concepts of Composability and Portability.
|
|
8
8
|
|
|
9
9
|
At its core, the App Shell consists of a collection of UI patterns shared by all products within the platform, providing a consistent set of interaction patterns that persist across all products. These include navigation, notifications, user information, and other common UX.
|
|
10
10
|
|
|
@@ -15,7 +15,7 @@ The App Shell also provides services that support the integration and communicat
|
|
|
15
15
|
The App Shell is available as an NPM package, and can be installed with:
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
npm install @hitachivantara/app-shell
|
|
18
|
+
npm install @hitachivantara/app-shell-ui
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
Setup instructions for the App Shell are available in https://github.com/lumada-design/hv-app-shell.
|
|
@@ -1,32 +1,45 @@
|
|
|
1
|
-
import { useHvSnackbar as
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
const d = () => {
|
|
1
|
+
import { useHvSnackbar as f } from "@hitachivantara/uikit-react-core";
|
|
2
|
+
import u from "../../providers/hooks/useBannerContext.js";
|
|
3
|
+
const v = () => {
|
|
5
4
|
const {
|
|
6
5
|
enqueueSnackbar: o
|
|
7
|
-
} =
|
|
8
|
-
show:
|
|
9
|
-
} =
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
6
|
+
} = f(), {
|
|
7
|
+
show: s
|
|
8
|
+
} = u(), i = (t) => {
|
|
9
|
+
const {
|
|
10
|
+
message: n,
|
|
11
|
+
variant: r,
|
|
12
|
+
actions: a,
|
|
13
|
+
actionsCallback: l
|
|
14
|
+
} = t;
|
|
15
|
+
let e;
|
|
16
|
+
a && (e = {
|
|
17
|
+
action: Array.isArray(a) ? a[0] : a,
|
|
18
|
+
actionCallback: l
|
|
19
|
+
}), n && o(n, {
|
|
20
|
+
variant: r ?? "default",
|
|
21
|
+
snackbarContentProps: e
|
|
17
22
|
});
|
|
18
|
-
},
|
|
19
|
-
|
|
23
|
+
}, c = (t) => {
|
|
24
|
+
t.message && s(t);
|
|
20
25
|
};
|
|
21
26
|
return {
|
|
22
|
-
handleNotificationEvent: (
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
27
|
+
handleNotificationEvent: (t) => {
|
|
28
|
+
const n = t.detail;
|
|
29
|
+
switch (n.type) {
|
|
30
|
+
case "snackbar":
|
|
31
|
+
i(n);
|
|
32
|
+
break;
|
|
33
|
+
case "banner":
|
|
34
|
+
c(n);
|
|
35
|
+
break;
|
|
36
|
+
default:
|
|
37
|
+
console.warn("Invalid notification type", n.type);
|
|
38
|
+
}
|
|
26
39
|
}
|
|
27
40
|
};
|
|
28
|
-
},
|
|
41
|
+
}, m = v;
|
|
29
42
|
export {
|
|
30
|
-
|
|
43
|
+
m as default
|
|
31
44
|
};
|
|
32
45
|
//# sourceMappingURL=useNotificationsEventListener.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useNotificationsEventListener.js","sources":["../../../../src/lib/hooks/useNotificationsEventListener.ts"],"sourcesContent":["import { useHvSnackbar } from \"@hitachivantara/uikit-react-core\";\nimport {
|
|
1
|
+
{"version":3,"file":"useNotificationsEventListener.js","sources":["../../../../src/lib/hooks/useNotificationsEventListener.ts"],"sourcesContent":["import { useHvSnackbar } from \"@hitachivantara/uikit-react-core\";\nimport { HvAppShellEventNotification } from \"@hitachivantara/app-shell-events\";\n\nimport useBannerContext from \"../../providers/hooks/useBannerContext\";\n\nconst useNotificationsEventListener = () => {\n const { enqueueSnackbar } = useHvSnackbar();\n const { show } = useBannerContext();\n\n const handleCustomEventSnackbar = (\n notification: HvAppShellEventNotification\n ) => {\n const { message, variant, actions, actionsCallback } = notification;\n\n let snackbarContentProps;\n if (actions) {\n snackbarContentProps = {\n action: Array.isArray(actions) ? actions[0] : actions,\n actionCallback: actionsCallback\n };\n }\n\n if (message) {\n enqueueSnackbar(message, {\n variant: variant ?? \"default\",\n snackbarContentProps\n });\n }\n };\n\n const handleCustomEventBanner = (\n notification: HvAppShellEventNotification\n ) => {\n if (notification.message) {\n show(notification);\n }\n };\n\n const handleNotificationEvent = (\n event: CustomEvent<HvAppShellEventNotification>\n ) => {\n const notificationEvent = event.detail;\n switch (notificationEvent.type) {\n case \"snackbar\":\n handleCustomEventSnackbar(notificationEvent);\n break;\n case \"banner\":\n handleCustomEventBanner(notificationEvent);\n break;\n default:\n console.warn(\"Invalid notification type\", notificationEvent.type);\n }\n };\n\n return { handleNotificationEvent };\n};\n\nexport default useNotificationsEventListener;\n"],"names":["useNotificationsEventListener","enqueueSnackbar","useHvSnackbar","show","useBannerContext","handleCustomEventSnackbar","notification","message","variant","actions","actionsCallback","snackbarContentProps","action","Array","isArray","actionCallback","handleCustomEventBanner","handleNotificationEvent","event","notificationEvent","detail","type","warn","useNotificationsEventListener$1"],"mappings":";;AAKA,MAAMA,IAAgCA,MAAM;AACpC,QAAA;AAAA,IAAEC,iBAAAA;AAAAA,MAAoBC,EAAc,GACpC;AAAA,IAAEC,MAAAA;AAAAA,MAASC,EAAiB,GAE5BC,IAA4BA,CAChCC,MACG;AACG,UAAA;AAAA,MAAEC,SAAAA;AAAAA,MAASC,SAAAA;AAAAA,MAASC,SAAAA;AAAAA,MAASC,iBAAAA;AAAAA,IAAoBJ,IAAAA;AAEnDK,QAAAA;AACJ,IAAIF,MACqBE,IAAA;AAAA,MACrBC,QAAQC,MAAMC,QAAQL,CAAO,IAAIA,EAAQ,CAAC,IAAIA;AAAAA,MAC9CM,gBAAgBL;AAAAA,IAAAA,IAIhBH,KACFN,EAAgBM,GAAS;AAAA,MACvBC,SAASA,KAAW;AAAA,MACpBG,sBAAAA;AAAAA,IAAAA,CACD;AAAA,EACH,GAGIK,IAA0BA,CAC9BV,MACG;AACH,IAAIA,EAAaC,WACfJ,EAAKG,CAAY;AAAA,EACnB;AAmBK,SAAA;AAAA,IAAEW,yBAhBuBA,CAC9BC,MACG;AACH,YAAMC,IAAoBD,EAAME;AAChC,cAAQD,EAAkBE,MAAI;AAAA,QAC5B,KAAK;AACHhB,UAAAA,EAA0Bc,CAAiB;AAC3C;AAAA,QACF,KAAK;AACHH,UAAAA,EAAwBG,CAAiB;AACzC;AAAA,QACF;AACUG,kBAAAA,KAAK,6BAA6BH,EAAkBE,IAAI;AAAA,MACpE;AAAA,IAAA;AAAA,EAGOJ;AACX,GAEAM,IAAevB;"}
|
|
@@ -27,7 +27,7 @@ const v = o({
|
|
|
27
27
|
const b = {
|
|
28
28
|
id: N(),
|
|
29
29
|
...I,
|
|
30
|
-
variant: I.variant
|
|
30
|
+
variant: I.variant ?? "default"
|
|
31
31
|
};
|
|
32
32
|
d((C) => [...C, b]);
|
|
33
33
|
}, X = (I) => {
|
|
@@ -53,7 +53,7 @@ const v = o({
|
|
|
53
53
|
transform: "unset",
|
|
54
54
|
minWidth: "unset",
|
|
55
55
|
zIndex: g.zIndices.banner
|
|
56
|
-
}, process.env.NODE_ENV === "production" ? "" : ";label:styles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9wcm92aWRlcnMvQmFubmVyUHJvdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtGTSIsImZpbGUiOiIvX193L2h2LWFwcC1zaGVsbC9odi1hcHAtc2hlbGwvY2xpZW50L3BhY2thZ2VzL2FwcC1zaGVsbC11aS9zcmMvcHJvdmlkZXJzL0Jhbm5lclByb3ZpZGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNyZWF0ZUNvbnRleHQsIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7IHY0IGFzIHV1aWQgfSBmcm9tIFwidXVpZFwiO1xuXG5pbXBvcnQgeyBIdkJhbm5lciwgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXJlYWN0LWNvcmVcIjtcbmltcG9ydCB7IEh2QXBwU2hlbGxFdmVudE5vdGlmaWNhdGlvbiB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvYXBwLXNoZWxsLWV2ZW50c1wiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHVzZU5hdmlnYXRpb25Db250ZXh0IGZyb20gXCIuL2hvb2tzL3VzZU5hdmlnYXRpb25Db250ZXh0XCI7XG5pbXBvcnQgeyBTVUJfSEVBREVSX0hFSUdIVCB9IGZyb20gXCIuLi9jb21wb25lbnRzL2xheW91dC9NYWluL3N0eWxlc1wiO1xuaW1wb3J0IHVzZUxheW91dENvbnRleHQgZnJvbSBcIi4vaG9va3MvdXNlTGF5b3V0Q29udGV4dFwiO1xuXG5leHBvcnQgdHlwZSBCYW5uZXJQcm92aWRlclByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xufTtcblxuZXhwb3J0IGludGVyZmFjZSBCYW5uZXIgZXh0ZW5kcyBPbWl0PEh2QXBwU2hlbGxFdmVudE5vdGlmaWNhdGlvbiwgXCJ0eXBlXCI+IHtcbiAgaWQ6IHN0cmluZztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBCYW5uZXJDb250ZXh0VmFsdWUge1xuICBzaG93OiAobm90aWZpY2F0aW9uOiBIdkFwcFNoZWxsRXZlbnROb3RpZmljYXRpb24pID0+IHZvaWQ7XG4gIGRpc21pc3M6IChpZDogc3RyaW5nKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgY29uc3QgQmFubmVyQ29udGV4dCA9IGNyZWF0ZUNvbnRleHQ8QmFubmVyQ29udGV4dFZhbHVlPih7XG4gIHNob3c6ICgpID0+IHtcbiAgICAvLyBFbXB0eSBmdW5jdGlvblxuICB9LFxuICBkaXNtaXNzOiAoKSA9PiB7XG4gICAgLy8gRW1wdHkgZnVuY3Rpb25cbiAgfVxufSk7XG5cbmNvbnN0IEJhbm5lclByb3ZpZGVyID0gKHsgY2hpbGRyZW4gfTogQmFubmVyUHJvdmlkZXJQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IHsgc2hvd0hlYWRlclN1Yk1lbnUsIGlzQ29tcGFjdE1vZGUgfSA9IHVzZU5hdmlnYXRpb25Db250ZXh0KCk7XG4gIGNvbnN0IHsgdmVydGljYWxOYXZpZ2F0aW9uV2lkdGgsIHNldEJhbm5lck1heEhlaWdodCB9ID0gdXNlTGF5b3V0Q29udGV4dCgpO1xuICBjb25zdCBbYmFubmVycywgc2V0QmFubmVyc10gPSB1c2VTdGF0ZTxCYW5uZXJbXT4oW10pO1xuXG4gIGNvbnN0IHNob3cgPSAobm90aWZpY2F0aW9uOiBIdkFwcFNoZWxsRXZlbnROb3RpZmljYXRpb24pID0+
|
|
56
|
+
}, process.env.NODE_ENV === "production" ? "" : ";label:styles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9fX3cvaHYtYXBwLXNoZWxsL2h2LWFwcC1zaGVsbC9jbGllbnQvcGFja2FnZXMvYXBwLXNoZWxsLXVpL3NyYy9wcm92aWRlcnMvQmFubmVyUHJvdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtGTSIsImZpbGUiOiIvX193L2h2LWFwcC1zaGVsbC9odi1hcHAtc2hlbGwvY2xpZW50L3BhY2thZ2VzL2FwcC1zaGVsbC11aS9zcmMvcHJvdmlkZXJzL0Jhbm5lclByb3ZpZGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNyZWF0ZUNvbnRleHQsIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7IHY0IGFzIHV1aWQgfSBmcm9tIFwidXVpZFwiO1xuXG5pbXBvcnQgeyBIdkJhbm5lciwgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXJlYWN0LWNvcmVcIjtcbmltcG9ydCB7IEh2QXBwU2hlbGxFdmVudE5vdGlmaWNhdGlvbiB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvYXBwLXNoZWxsLWV2ZW50c1wiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHVzZU5hdmlnYXRpb25Db250ZXh0IGZyb20gXCIuL2hvb2tzL3VzZU5hdmlnYXRpb25Db250ZXh0XCI7XG5pbXBvcnQgeyBTVUJfSEVBREVSX0hFSUdIVCB9IGZyb20gXCIuLi9jb21wb25lbnRzL2xheW91dC9NYWluL3N0eWxlc1wiO1xuaW1wb3J0IHVzZUxheW91dENvbnRleHQgZnJvbSBcIi4vaG9va3MvdXNlTGF5b3V0Q29udGV4dFwiO1xuXG5leHBvcnQgdHlwZSBCYW5uZXJQcm92aWRlclByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xufTtcblxuZXhwb3J0IGludGVyZmFjZSBCYW5uZXIgZXh0ZW5kcyBPbWl0PEh2QXBwU2hlbGxFdmVudE5vdGlmaWNhdGlvbiwgXCJ0eXBlXCI+IHtcbiAgaWQ6IHN0cmluZztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBCYW5uZXJDb250ZXh0VmFsdWUge1xuICBzaG93OiAobm90aWZpY2F0aW9uOiBIdkFwcFNoZWxsRXZlbnROb3RpZmljYXRpb24pID0+IHZvaWQ7XG4gIGRpc21pc3M6IChpZDogc3RyaW5nKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgY29uc3QgQmFubmVyQ29udGV4dCA9IGNyZWF0ZUNvbnRleHQ8QmFubmVyQ29udGV4dFZhbHVlPih7XG4gIHNob3c6ICgpID0+IHtcbiAgICAvLyBFbXB0eSBmdW5jdGlvblxuICB9LFxuICBkaXNtaXNzOiAoKSA9PiB7XG4gICAgLy8gRW1wdHkgZnVuY3Rpb25cbiAgfVxufSk7XG5cbmNvbnN0IEJhbm5lclByb3ZpZGVyID0gKHsgY2hpbGRyZW4gfTogQmFubmVyUHJvdmlkZXJQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IHsgc2hvd0hlYWRlclN1Yk1lbnUsIGlzQ29tcGFjdE1vZGUgfSA9IHVzZU5hdmlnYXRpb25Db250ZXh0KCk7XG4gIGNvbnN0IHsgdmVydGljYWxOYXZpZ2F0aW9uV2lkdGgsIHNldEJhbm5lck1heEhlaWdodCB9ID0gdXNlTGF5b3V0Q29udGV4dCgpO1xuICBjb25zdCBbYmFubmVycywgc2V0QmFubmVyc10gPSB1c2VTdGF0ZTxCYW5uZXJbXT4oW10pO1xuXG4gIGNvbnN0IHNob3cgPSAobm90aWZpY2F0aW9uOiBIdkFwcFNoZWxsRXZlbnROb3RpZmljYXRpb24pID0+IHtcbiAgICBjb25zdCBpZCA9IHV1aWQoKTtcblxuICAgIGNvbnN0IG5ld0Jhbm5lcjogQmFubmVyID0ge1xuICAgICAgaWQsXG4gICAgICAuLi5ub3RpZmljYXRpb24sXG4gICAgICB2YXJpYW50OiBub3RpZmljYXRpb24udmFyaWFudCA/PyBcImRlZmF1bHRcIlxuICAgIH07XG4gICAgc2V0QmFubmVycyhwcmV2QmFubmVycyA9PiBbLi4ucHJldkJhbm5lcnMsIG5ld0Jhbm5lcl0pO1xuICB9O1xuXG4gIGNvbnN0IGRpc21pc3MgPSAoaWQ6IHN0cmluZykgPT4ge1xuICAgIHNldEJhbm5lcnMocHJldkJhbm5lcnMgPT4gcHJldkJhbm5lcnMuZmlsdGVyKGJhbm5lciA9PiBiYW5uZXIuaWQgIT09IGlkKSk7XG4gIH07XG5cbiAgY29uc3QgdmFsdWUgPSB1c2VNZW1vKFxuICAgICgpID0+ICh7XG4gICAgICBzaG93LFxuICAgICAgZGlzbWlzc1xuICAgIH0pLFxuICAgIFtdXG4gICk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoYmFubmVycy5sZW5ndGggPiAwKSB7XG4gICAgICAvLyBHZXQgYWxsIGhlaWdodHMgZnJvbSB0aGUgcmVuZGVyZWQgYmFubmVyc1xuICAgICAgY29uc3QgYmFubmVySGVpZ2h0cyA9IGJhbm5lcnMubWFwKGl0ZW0gPT4ge1xuICAgICAgICBjb25zdCBiYW5uZXJFbGVtZW50ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoaXRlbS5pZCk7XG4gICAgICAgIHJldHVybiBiYW5uZXJFbGVtZW50ID8gYmFubmVyRWxlbWVudC5jbGllbnRIZWlnaHQgOiAwO1xuICAgICAgfSk7XG5cbiAgICAgIC8vIEZpbmQgdGhlICd0YWxsZXN0JyBiYW5uZXJcbiAgICAgIGNvbnN0IG1heEJhbm5lckhlaWdodCA9IE1hdGgubWF4KC4uLmJhbm5lckhlaWdodHMpO1xuXG4gICAgICAvLyBVcGRhdGUgcGFkZGluZyB2YWx1ZVxuICAgICAgc2V0QmFubmVyTWF4SGVpZ2h0KG1heEJhbm5lckhlaWdodCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHNldEJhbm5lck1heEhlaWdodCgwKTtcbiAgICB9XG4gIH0sIFtiYW5uZXJzLCBzZXRCYW5uZXJNYXhIZWlnaHRdKTtcblxuICBjb25zdCBzdHlsZXMgPSB1c2VNZW1vKFxuICAgICgpID0+XG4gICAgICBjc3Moe1xuICAgICAgICBtYXJnaW5Ub3A6XG4gICAgICAgICAgc2hvd0hlYWRlclN1Yk1lbnUgJiYgIWlzQ29tcGFjdE1vZGVcbiAgICAgICAgICAgID8gYGNhbGMoJHtTVUJfSEVBREVSX0hFSUdIVH1weCArICR7dGhlbWUuc3BhY2Uuc219KWBcbiAgICAgICAgICAgIDogdGhlbWUuc3BhY2Uuc20sXG4gICAgICAgIGxlZnQ6IGBjYWxjKCR7dmVydGljYWxOYXZpZ2F0aW9uV2lkdGh9cHggKyAke3RoZW1lLnNwYWNlLnNtfSlgLFxuICAgICAgICB3aWR0aDogYGNhbGMoMTAwJSAtICgke3ZlcnRpY2FsTmF2aWdhdGlvbldpZHRofXB4ICsgJHt0aGVtZS5zcGFjZS5zbX0pIC0gJHt0aGVtZS5zcGFjZS5zbX0pYCxcbiAgICAgICAgdHJhbnNmb3JtOiBcInVuc2V0XCIsXG4gICAgICAgIG1pbldpZHRoOiBcInVuc2V0XCIsXG4gICAgICAgIHpJbmRleDogdGhlbWUuekluZGljZXMuYmFubmVyXG4gICAgICB9KSxcbiAgICBbaXNDb21wYWN0TW9kZSwgc2hvd0hlYWRlclN1Yk1lbnUsIHZlcnRpY2FsTmF2aWdhdGlvbldpZHRoXVxuICApO1xuXG4gIGNvbnN0IGNsb3NlQmFubmVyTGFiZWwgPSB0KFwibm90aWZpY2F0aW9ucy5iYW5uZXIuY2xvc2VcIik7XG5cbiAgcmV0dXJuIChcbiAgICA8QmFubmVyQ29udGV4dC5Qcm92aWRlciB2YWx1ZT17dmFsdWV9PlxuICAgICAge2Jhbm5lcnMubWFwKGJhbm5lciA9PiAoXG4gICAgICAgIDxIdkJhbm5lclxuICAgICAgICAgIGNsYXNzZXM9e3tcbiAgICAgICAgICAgIGFuY2hvck9yaWdpblRvcENlbnRlcjogc3R5bGVzXG4gICAgICAgICAgfX1cbiAgICAgICAgICBpZD17YmFubmVyLmlkfVxuICAgICAgICAgIGtleT17YmFubmVyLmlkfVxuICAgICAgICAgIG9wZW5cbiAgICAgICAgICBvbkNsb3NlPXsoKSA9PiBkaXNtaXNzKGJhbm5lci5pZCl9XG4gICAgICAgICAgdmFyaWFudD17YmFubmVyLnZhcmlhbnR9XG4gICAgICAgICAgbGFiZWw9e2Jhbm5lci5tZXNzYWdlfVxuICAgICAgICAgIHNob3dJY29uXG4gICAgICAgICAgYWN0aW9ucz17YmFubmVyLmFjdGlvbnN9XG4gICAgICAgICAgYWN0aW9uc0NhbGxiYWNrPXtiYW5uZXIuYWN0aW9uc0NhbGxiYWNrfVxuICAgICAgICAgIGJhbm5lckNvbnRlbnRQcm9wcz17e1xuICAgICAgICAgICAgYWN0aW9uUHJvcHM6IHsgXCJhcmlhLWxhYmVsXCI6IGNsb3NlQmFubmVyTGFiZWwgfVxuICAgICAgICAgIH19XG4gICAgICAgIC8+XG4gICAgICApKX1cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0Jhbm5lckNvbnRleHQuUHJvdmlkZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBCYW5uZXJQcm92aWRlcjtcbiJdfQ== */"), [A, u, m]), s = Z("notifications.banner.close");
|
|
57
57
|
return /* @__PURE__ */ e(v.Provider, { value: i, children: [
|
|
58
58
|
c.map((I) => /* @__PURE__ */ h(Y, { classes: {
|
|
59
59
|
anchorOriginTopCenter: t
|
|
@@ -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 { SUB_HEADER_HEIGHT } from \"../components/layout/Main/styles\";\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
|
|
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 { SUB_HEADER_HEIGHT } from \"../components/layout/Main/styles\";\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(${SUB_HEADER_HEIGHT}px + ${theme.space.sm})`\n : 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 const closeBannerLabel = t(\"notifications.banner.close\");\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 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\": closeBannerLabel }\n }}\n />\n ))}\n {children}\n </BannerContext.Provider>\n );\n};\n\nexport default BannerProvider;\n"],"names":["BannerContext","createContext","show","dismiss","BannerProvider","children","t","useTranslation","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","SUB_HEADER_HEIGHT","theme","space","sm","left","width","transform","minWidth","zIndex","zIndices","process","env","NODE_ENV","closeBannerLabel","jsxs","jsx","HvBanner","anchorOriginTopCenter","message","actions","actionsCallback","actionProps","BannerProvider$1"],"mappings":";;;;;;;;;AAwBO,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,MAAMC,EAAe,GACvB;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,GAE7Cd,IAAOA,CAACe,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,GAGjDf,IAAUA,CAACgB,MAAe;AAC9BJ,IAAAA,EAAWO,OAAeA,EAAYC,OAAOC,OAAUA,EAAOL,OAAOA,CAAE,CAAC;AAAA,EAAA,GAGpEM,IAAQC,EACZ,OAAO;AAAA,IACLxB,MAAAA;AAAAA,IACAC,SAAAA;AAAAA,EAAAA,IAEF,CACF,CAAA;AAEAwB,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,CAAkB,QAAOC,EAAMC,MAAMC,EAAG,MAChDF,EAAMC,MAAMC;AAAAA,IAClBC,MAAO,QAAOnC,CAAwB,QAAOgC,EAAMC,MAAMC,EAAG;AAAA,IAC5DE,OAAQ,gBAAepC,CAAwB,QAAOgC,EAAMC,MAAMC,EAAG,OAAMF,EAAMC,MAAMC,EAAG;AAAA,IAC1FG,WAAW;AAAA,IACXC,UAAU;AAAA,IACVC,QAAQP,EAAMQ,SAAS3B;AAAAA,EAAAA,GACxB4B,QAAAC,IAAAC,aAAA,eAAA,KAAA,kBAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,y0KAAA,GACH,CAAC7C,GAAeD,GAAmBG,CAAuB,CAC5D,GAEM4C,IAAmBjD,EAAE,4BAA4B;AAEvD,SACG,gBAAAkD,EAAAxD,EAAc,UAAd,EAAuB,OAAAyB,GACrBX,UAAAA;AAAAA,IAAAA,EAAQgB,IAAIN,CAAAA,MACV,gBAAAiC,EAAAC,GAAA,EACC,SAAS;AAAA,MACPC,uBAAuBpB;AAAAA,IACzB,GACA,IAAIf,EAAOL,IAEX,MAAI,IACJ,SAAS,MAAMhB,EAAQqB,EAAOL,EAAE,GAChC,SAASK,EAAOH,SAChB,OAAOG,EAAOoC,SACd,UAAQ,IACR,SAASpC,EAAOqC,SAChB,iBAAiBrC,EAAOsC,iBACxB,oBAAoB;AAAA,MAClBC,aAAa;AAAA,QAAE,cAAcR;AAAAA,MAAiB;AAAA,IAAA,KAT3C/B,EAAOL,GAYf;AAAA,IACAd;AAAAA,EACH,EAAA,CAAA;AAEJ,GAEA2D,IAAe5D;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/app-shell-ui",
|
|
3
|
-
"version": "0.38.
|
|
3
|
+
"version": "0.38.3",
|
|
4
4
|
"description": "AppShell Component",
|
|
5
5
|
"author": "Hitachi Vantara - Boba Fett Team",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"@emotion/css": "^11.10.5",
|
|
39
39
|
"@emotion/react": "^11.10.5",
|
|
40
40
|
"@emotion/styled": "^11.10.5",
|
|
41
|
-
"@hitachivantara/app-shell-events": "0.1.
|
|
41
|
+
"@hitachivantara/app-shell-events": "0.1.1",
|
|
42
42
|
"@hitachivantara/app-shell-navigation": "0.1.2",
|
|
43
43
|
"@hitachivantara/app-shell-shared": "0.13.0",
|
|
44
44
|
"@hitachivantara/uikit-react-core": "^5.31.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": "5065d46d465674c03d798b3b3c58bf77e54a3e09"
|
|
72
72
|
}
|