@vuu-ui/vuu-notifications 1.0.3 → 2.0.0-alpha.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/cjs/NotificationsCenter.js +2 -2
- package/cjs/NotificationsCenter.js.map +1 -1
- package/cjs/NotificationsContext.js.map +1 -1
- package/cjs/ToastNotification.css.js +6 -0
- package/cjs/ToastNotification.css.js.map +1 -0
- package/cjs/ToastNotification.js +19 -8
- package/cjs/ToastNotification.js.map +1 -1
- package/cjs/index.js +2 -2
- package/esm/NotificationsCenter.js +2 -2
- package/esm/NotificationsCenter.js.map +1 -1
- package/esm/NotificationsContext.js.map +1 -1
- package/esm/ToastNotification.css.js +4 -0
- package/esm/ToastNotification.css.js.map +1 -0
- package/esm/ToastNotification.js +20 -9
- package/esm/ToastNotification.js.map +1 -1
- package/esm/index.js +1 -1
- package/package.json +2 -2
- package/types/NotificationsContext.d.ts +1 -1
- package/types/index.d.ts +1 -1
|
@@ -8,8 +8,8 @@ var ToastNotification = require('./ToastNotification.js');
|
|
|
8
8
|
var WorkspaceNotification = require('./WorkspaceNotification.js');
|
|
9
9
|
|
|
10
10
|
const toastOffsetTop = 60;
|
|
11
|
-
const toastDisplayDuration =
|
|
12
|
-
const horizontalTransitionDuration =
|
|
11
|
+
const toastDisplayDuration = 6e6;
|
|
12
|
+
const horizontalTransitionDuration = 1e8;
|
|
13
13
|
const toastContainerContentGap = 10;
|
|
14
14
|
const NotificationsCenter = ({
|
|
15
15
|
notificationsContext,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsCenter.js","sources":["../../../packages/vuu-notifications/src/NotificationsCenter.tsx"],"sourcesContent":["import { getUniqueId, saveLocalEntity } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n isToastNotification,\n isWorkspaceNotification,\n Notification,\n NotificationsContext,\n ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { TOAST_HEIGHT, ToastNotification } from \"./ToastNotification\";\nimport { WorkspaceNotification } from \"./WorkspaceNotification\";\n\nexport interface NotificationsCenterProps {\n notificationsContext: NotificationsContext;\n startupToastNotification?: ToastNotificationDescriptor;\n}\n\ninterface ToastNotificationWithId extends ToastNotificationDescriptor {\n id: string;\n}\n\n// animation times in milliseconds\nconst toastOffsetTop = 60;\
|
|
1
|
+
{"version":3,"file":"NotificationsCenter.js","sources":["../../../packages/vuu-notifications/src/NotificationsCenter.tsx"],"sourcesContent":["import { getUniqueId, saveLocalEntity } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n isToastNotification,\n isWorkspaceNotification,\n Notification,\n NotificationsContext,\n ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { TOAST_HEIGHT, ToastNotification } from \"./ToastNotification\";\nimport { WorkspaceNotification } from \"./WorkspaceNotification\";\n\nexport interface NotificationsCenterProps {\n notificationsContext: NotificationsContext;\n startupToastNotification?: ToastNotificationDescriptor;\n}\n\ninterface ToastNotificationWithId extends ToastNotificationDescriptor {\n id: string;\n}\n\n// animation times in milliseconds\nconst toastOffsetTop = 60;\n// const toastDisplayDuration = 6000;\nconst toastDisplayDuration = 6000000;\n// const horizontalTransitionDuration = 1000;\nconst horizontalTransitionDuration = 100000000;\n\nconst toastContainerContentGap = 10;\n// rightPadding is used together with the toastWidth to compute the toast position\n// at the beginning and at the end of the animation\n\nexport const NotificationsCenter = ({\n notificationsContext,\n startupToastNotification,\n}: NotificationsCenterProps) => {\n const toastNotifications = useMemo<ToastNotificationWithId[]>(\n () =>\n startupToastNotification\n ? [\n {\n ...startupToastNotification,\n id: getUniqueId(),\n },\n ]\n : [],\n [startupToastNotification],\n );\n\n const [workspaceNotification, setWorkspaceNotification] =\n useState<ReactNode>(null);\n\n const [notifications, setNotifications] =\n useState<ToastNotificationWithId[]>(toastNotifications);\n\n const showNotification = useCallback((notification: Notification) => {\n if (isToastNotification(notification)) {\n if (notification.renderPostRefresh) {\n saveLocalEntity(\"startup-notification\", {\n ...notification,\n expires: +new Date() + 10000,\n });\n } else {\n const newNotification: ToastNotificationWithId = {\n ...notification,\n id: getUniqueId(),\n };\n setNotifications((prev) => prev.concat(newNotification));\n setTimeout(\n () => {\n setNotifications((prev) =>\n prev.filter((n) => n !== newNotification),\n );\n },\n toastDisplayDuration + horizontalTransitionDuration * 2,\n );\n }\n } else if (isWorkspaceNotification(notification)) {\n setWorkspaceNotification(\n <WorkspaceNotification>{notification.content}</WorkspaceNotification>,\n );\n } else {\n throw Error(\"[NotificationsCenter] invalid notification received\");\n }\n }, []);\n\n const hideNotification = useCallback(() => {\n setWorkspaceNotification(null);\n }, []);\n\n useMemo(() => {\n notificationsContext.setNotify(showNotification, hideNotification);\n }, [hideNotification, notificationsContext, showNotification]);\n\n return (\n <>\n {workspaceNotification}\n {notifications.map((notification, i) => (\n <ToastNotification\n top={toastOffsetTop + (TOAST_HEIGHT + toastContainerContentGap) * i}\n notification={notification}\n key={notification.id}\n />\n ))}\n </>\n );\n};\n"],"names":["useMemo","getUniqueId","useState","useCallback","isToastNotification","saveLocalEntity","isWorkspaceNotification","jsx","WorkspaceNotification","jsxs","Fragment","ToastNotification","TOAST_HEIGHT"],"mappings":";;;;;;;;;AAsBA,MAAM,cAAiB,GAAA,EAAA;AAEvB,MAAM,oBAAuB,GAAA,GAAA;AAE7B,MAAM,4BAA+B,GAAA,GAAA;AAErC,MAAM,wBAA2B,GAAA,EAAA;AAI1B,MAAM,sBAAsB,CAAC;AAAA,EAClC,oBAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,kBAAqB,GAAAA,aAAA;AAAA,IACzB,MACE,wBACI,GAAA;AAAA,MACE;AAAA,QACE,GAAG,wBAAA;AAAA,QACH,IAAIC,oBAAY;AAAA;AAClB,QAEF,EAAC;AAAA,IACP,CAAC,wBAAwB;AAAA,GAC3B;AAEA,EAAA,MAAM,CAAC,qBAAA,EAAuB,wBAAwB,CAAA,GACpDC,eAAoB,IAAI,CAAA;AAE1B,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GACpCA,eAAoC,kBAAkB,CAAA;AAExD,EAAM,MAAA,gBAAA,GAAmBC,iBAAY,CAAA,CAAC,YAA+B,KAAA;AACnE,IAAI,IAAAC,wCAAA,CAAoB,YAAY,CAAG,EAAA;AACrC,MAAA,IAAI,aAAa,iBAAmB,EAAA;AAClC,QAAAC,wBAAA,CAAgB,sBAAwB,EAAA;AAAA,UACtC,GAAG,YAAA;AAAA,UACH,OAAS,EAAA,iBAAK,IAAA,IAAA,EAAS,GAAA;AAAA,SACxB,CAAA;AAAA,OACI,MAAA;AACL,QAAA,MAAM,eAA2C,GAAA;AAAA,UAC/C,GAAG,YAAA;AAAA,UACH,IAAIJ,oBAAY;AAAA,SAClB;AACA,QAAA,gBAAA,CAAiB,CAAC,IAAA,KAAS,IAAK,CAAA,MAAA,CAAO,eAAe,CAAC,CAAA;AACvD,QAAA,UAAA;AAAA,UACE,MAAM;AACJ,YAAA,gBAAA;AAAA,cAAiB,CAAC,IAChB,KAAA,IAAA,CAAK,OAAO,CAAC,CAAA,KAAM,MAAM,eAAe;AAAA,aAC1C;AAAA,WACF;AAAA,UACA,uBAAuB,4BAA+B,GAAA;AAAA,SACxD;AAAA;AACF,KACF,MAAA,IAAWK,4CAAwB,CAAA,YAAY,CAAG,EAAA;AAChD,MAAA,wBAAA;AAAA,wBACEC,cAAA,CAACC,2CAAuB,EAAA,EAAA,QAAA,EAAA,YAAA,CAAa,OAAQ,EAAA;AAAA,OAC/C;AAAA,KACK,MAAA;AACL,MAAA,MAAM,MAAM,qDAAqD,CAAA;AAAA;AACnE,GACF,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,gBAAA,GAAmBL,kBAAY,MAAM;AACzC,IAAA,wBAAA,CAAyB,IAAI,CAAA;AAAA,GAC/B,EAAG,EAAE,CAAA;AAEL,EAAAH,aAAA,CAAQ,MAAM;AACZ,IAAqB,oBAAA,CAAA,SAAA,CAAU,kBAAkB,gBAAgB,CAAA;AAAA,GAChE,EAAA,CAAC,gBAAkB,EAAA,oBAAA,EAAsB,gBAAgB,CAAC,CAAA;AAE7D,EAAA,uBAEKS,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,qBAAA;AAAA,IACA,aAAc,CAAA,GAAA,CAAI,CAAC,YAAA,EAAc,CAChC,qBAAAH,cAAA;AAAA,MAACI,mCAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,cAAkB,GAAA,CAAAC,8BAAA,GAAe,wBAA4B,IAAA,CAAA;AAAA,QAClE;AAAA,OAAA;AAAA,MACK,YAAa,CAAA;AAAA,KAErB;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsContext.js","sources":["../../../packages/vuu-notifications/src/NotificationsContext.tsx"],"sourcesContent":["import { type ValidationStatus } from \"@salt-ds/core\";\nimport { ValueOf } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode } from \"react\";\n\nexport type DispatchShowNotification = (notification: Notification) => void;\nexport type DispatchHideNotification = () => void;\n\nexport const NotificationType = {\n Toast: \"toast\",\n Workspace: \"workspace\",\n} as const;\n\nexport type NotificationType = ValueOf<typeof NotificationType>;\n\nexport type NotificationAnimationType =\n | \"slide-in\"\n | \"slide-out\"\n | \"slide-in,slide-out\";\n\ninterface NotificationDescriptorBase<T extends NotificationType> {\n animationType?: NotificationAnimationType;\n renderPostRefresh?: boolean;\n status: ValidationStatus;\n type: T;\n}\n\nexport interface ToastNotificationDescriptor\n extends NotificationDescriptorBase<\"toast\"> {\n content:
|
|
1
|
+
{"version":3,"file":"NotificationsContext.js","sources":["../../../packages/vuu-notifications/src/NotificationsContext.tsx"],"sourcesContent":["import { type ValidationStatus } from \"@salt-ds/core\";\nimport { ValueOf } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode } from \"react\";\n\nexport type DispatchShowNotification = (notification: Notification) => void;\nexport type DispatchHideNotification = () => void;\n\nexport const NotificationType = {\n Toast: \"toast\",\n Workspace: \"workspace\",\n} as const;\n\nexport type NotificationType = ValueOf<typeof NotificationType>;\n\nexport type NotificationAnimationType =\n | \"slide-in\"\n | \"slide-out\"\n | \"slide-in,slide-out\";\n\ninterface NotificationDescriptorBase<T extends NotificationType> {\n animationType?: NotificationAnimationType;\n renderPostRefresh?: boolean;\n status: ValidationStatus;\n type: T;\n}\n\nexport interface ToastNotificationDescriptor\n extends NotificationDescriptorBase<\"toast\"> {\n content: ReactNode;\n header: string;\n}\n\nexport interface WorkspaceNotificationDescriptor\n extends NotificationDescriptorBase<\"workspace\"> {\n content: ReactNode;\n}\n\nexport type Notification =\n | ToastNotificationDescriptor\n | WorkspaceNotificationDescriptor;\n\nexport const isToastNotification = (\n n: Notification,\n): n is ToastNotificationDescriptor => n.type === NotificationType.Toast;\n\nexport const isWorkspaceNotification = (\n n: Notification,\n): n is WorkspaceNotificationDescriptor =>\n n.type === NotificationType.Workspace;\n\nexport type NotificationsContext = {\n hideNotification: DispatchHideNotification;\n showNotification: DispatchShowNotification;\n setNotify: (\n showNotificationDispatcher: DispatchShowNotification,\n hideNotificationDispatcher: DispatchHideNotification,\n ) => void;\n};\n"],"names":[],"mappings":";;AAOO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,KAAO,EAAA,OAAA;AAAA,EACP,SAAW,EAAA;AACb;AA+BO,MAAM,mBAAsB,GAAA,CACjC,CACqC,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;AAE5D,MAAM,uBAA0B,GAAA,CACrC,CAEA,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;;;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var toastNotificationCss = ".vuuToastNotification {\n\n background: var(--vuuToastNotification-background, var(--toast-background));\n border-radius: var(--vuuToastNotification-borderRadius, var(--salt-curve-100, 0));\n box-sizing: border-box;\n box-shadow: var(--salt-overlayable-shadow-popout);\n\n\n\n &.vuuToastNotification-error {\n --toast-background: var(--vuuToastNotification-error-background, var(--salt-container-primary-background));\n }\n\n &.vuuToastNotification-success {\n --toast-background: var(--vuuToastNotification-success-background, var(--salt-container-primary-background));\n }\n}";
|
|
4
|
+
|
|
5
|
+
module.exports = toastNotificationCss;
|
|
6
|
+
//# sourceMappingURL=ToastNotification.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToastNotification.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
package/cjs/ToastNotification.js
CHANGED
|
@@ -4,15 +4,24 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var cx = require('clsx');
|
|
5
5
|
var core = require('@salt-ds/core');
|
|
6
6
|
var React = require('react');
|
|
7
|
+
var styles = require('@salt-ds/styles');
|
|
8
|
+
var window = require('@salt-ds/window');
|
|
9
|
+
var ToastNotification$1 = require('./ToastNotification.css.js');
|
|
7
10
|
|
|
8
11
|
const toastContainerRightPadding = 20;
|
|
9
|
-
const toastDisplayDuration =
|
|
12
|
+
const toastDisplayDuration = 12e5;
|
|
10
13
|
const horizontalTransitionDuration = 400;
|
|
11
14
|
const TOAST_HEIGHT = 80;
|
|
12
15
|
const TOAST_WIDTH = 300;
|
|
13
16
|
const verticalTransitionDuration = 300;
|
|
14
17
|
const classBase = "vuuToastNotification";
|
|
15
18
|
const ToastNotification = (props) => {
|
|
19
|
+
const targetWindow = window.useWindow();
|
|
20
|
+
styles.useComponentCssInjection({
|
|
21
|
+
testId: "vuu-toast-notification",
|
|
22
|
+
css: ToastNotification$1,
|
|
23
|
+
window: targetWindow
|
|
24
|
+
});
|
|
16
25
|
const { top, notification, animated = true } = props;
|
|
17
26
|
const { Component: FloatingComponent } = core.useFloatingComponent();
|
|
18
27
|
const { animationType = "slide-in,slide-out" } = notification;
|
|
@@ -36,27 +45,29 @@ const ToastNotification = (props) => {
|
|
|
36
45
|
);
|
|
37
46
|
}
|
|
38
47
|
}, [animated, pageWidth, slideIn]);
|
|
39
|
-
console.log(`left ${left}`);
|
|
40
48
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
41
49
|
FloatingComponent,
|
|
42
50
|
{
|
|
43
|
-
className: cx(
|
|
44
|
-
|
|
51
|
+
className: cx(
|
|
52
|
+
classBase,
|
|
53
|
+
`${classBase}-${notification.type}`,
|
|
54
|
+
`${classBase}-${notification.status}`
|
|
55
|
+
),
|
|
45
56
|
left,
|
|
46
|
-
top,
|
|
47
57
|
open: true,
|
|
58
|
+
position: "absolute",
|
|
59
|
+
top,
|
|
48
60
|
style: {
|
|
49
61
|
transition: animated ? `left ${horizontalTransitionDuration}ms, top ${verticalTransitionDuration}ms ` : "none"
|
|
50
62
|
},
|
|
51
63
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
52
|
-
|
|
64
|
+
"div",
|
|
53
65
|
{
|
|
54
|
-
status: notification.status,
|
|
55
66
|
style: {
|
|
56
67
|
height: TOAST_HEIGHT,
|
|
57
68
|
width: TOAST_WIDTH
|
|
58
69
|
},
|
|
59
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
70
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
60
71
|
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: `${classBase}-toastHeader`, children: notification.header }),
|
|
61
72
|
/* @__PURE__ */ jsxRuntime.jsx("div", { children: notification.content })
|
|
62
73
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastNotification.js","sources":["../../../packages/vuu-notifications/src/ToastNotification.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {
|
|
1
|
+
{"version":3,"file":"ToastNotification.js","sources":["../../../packages/vuu-notifications/src/ToastNotification.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useFloatingComponent } from \"@salt-ds/core\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { ToastNotificationDescriptor } from \"./NotificationsContext\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst toastContainerRightPadding = 20;\n// const toastDisplayDuration = 1200;\nconst toastDisplayDuration = 1200000;\nconst horizontalTransitionDuration = 400;\nexport const TOAST_HEIGHT = 80;\nexport const TOAST_WIDTH = 300;\nconst verticalTransitionDuration = 300;\n\nimport toastNotificationCss from \"./ToastNotification.css\";\n\nexport type ToastNotificationProps = {\n top: number;\n notification: ToastNotificationDescriptor;\n animated?: boolean;\n};\n\nconst classBase = \"vuuToastNotification\";\n\nexport const ToastNotification = (props: ToastNotificationProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-toast-notification\",\n css: toastNotificationCss,\n window: targetWindow,\n });\n\n const { top, notification, animated = true } = props;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const { animationType = \"slide-in,slide-out\" } = notification;\n\n const slideIn = animationType.includes(\"slide-in\");\n\n const pageWidth = useMemo(() => document.body.clientWidth, []);\n\n const [left, setLeft] = useState(\n slideIn\n ? pageWidth + TOAST_WIDTH - toastContainerRightPadding\n : pageWidth - TOAST_WIDTH - toastContainerRightPadding,\n );\n\n useEffect(() => {\n if (slideIn) {\n setTimeout(() =>\n setLeft(pageWidth - TOAST_WIDTH - toastContainerRightPadding),\n );\n }\n\n if (animated) {\n setTimeout(\n () =>\n setLeft(\n document.body.clientWidth +\n TOAST_WIDTH -\n toastContainerRightPadding,\n ),\n toastDisplayDuration + horizontalTransitionDuration,\n );\n }\n }, [animated, pageWidth, slideIn]);\n\n return (\n <FloatingComponent\n className={cx(\n classBase,\n `${classBase}-${notification.type}`,\n `${classBase}-${notification.status}`,\n )}\n left={left}\n open\n position=\"absolute\"\n top={top}\n style={{\n transition: animated\n ? `left ${horizontalTransitionDuration}ms, top ${verticalTransitionDuration}ms `\n : \"none\",\n }}\n >\n <div\n style={{\n height: TOAST_HEIGHT,\n width: TOAST_WIDTH,\n }}\n >\n <div>\n <h3 className={`${classBase}-toastHeader`}>{notification.header}</h3>\n <div>{notification.content}</div>\n </div>\n </div>\n </FloatingComponent>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","toastNotificationCss","useFloatingComponent","useMemo","useState","useEffect","jsx"],"mappings":";;;;;;;;;;AAOA,MAAM,0BAA6B,GAAA,EAAA;AAEnC,MAAM,oBAAuB,GAAA,IAAA;AAC7B,MAAM,4BAA+B,GAAA,GAAA;AAC9B,MAAM,YAAe,GAAA;AACrB,MAAM,WAAc,GAAA;AAC3B,MAAM,0BAA6B,GAAA,GAAA;AAUnC,MAAM,SAAY,GAAA,sBAAA;AAEL,MAAA,iBAAA,GAAoB,CAAC,KAAkC,KAAA;AAClE,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,GAAA,EAAK,YAAc,EAAA,QAAA,GAAW,MAAS,GAAA,KAAA;AAE/C,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,yBAAqB,EAAA;AAE9D,EAAM,MAAA,EAAE,aAAgB,GAAA,oBAAA,EAAyB,GAAA,YAAA;AAEjD,EAAM,MAAA,OAAA,GAAU,aAAc,CAAA,QAAA,CAAS,UAAU,CAAA;AAEjD,EAAA,MAAM,YAAYC,aAAQ,CAAA,MAAM,SAAS,IAAK,CAAA,WAAA,EAAa,EAAE,CAAA;AAE7D,EAAM,MAAA,CAAC,IAAM,EAAA,OAAO,CAAI,GAAAC,cAAA;AAAA,IACtB,OACI,GAAA,SAAA,GAAY,WAAc,GAAA,0BAAA,GAC1B,YAAY,WAAc,GAAA;AAAA,GAChC;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,UAAA;AAAA,QAAW,MACT,OAAA,CAAQ,SAAY,GAAA,WAAA,GAAc,0BAA0B;AAAA,OAC9D;AAAA;AAGF,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,UAAA;AAAA,QACE,MACE,OAAA;AAAA,UACE,QAAA,CAAS,IAAK,CAAA,WAAA,GACZ,WACA,GAAA;AAAA,SACJ;AAAA,QACF,oBAAuB,GAAA;AAAA,OACzB;AAAA;AACF,GACC,EAAA,CAAC,QAAU,EAAA,SAAA,EAAW,OAAO,CAAC,CAAA;AAEjC,EACE,uBAAAC,cAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA;AAAA,QACT,SAAA;AAAA,QACA,CAAG,EAAA,SAAS,CAAI,CAAA,EAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,QACjC,CAAG,EAAA,SAAS,CAAI,CAAA,EAAA,YAAA,CAAa,MAAM,CAAA;AAAA,OACrC;AAAA,MACA,IAAA;AAAA,MACA,IAAI,EAAA,IAAA;AAAA,MACJ,QAAS,EAAA,UAAA;AAAA,MACT,GAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,YAAY,QACR,GAAA,CAAA,KAAA,EAAQ,4BAA4B,CAAA,QAAA,EAAW,0BAA0B,CACzE,GAAA,CAAA,GAAA;AAAA,OACN;AAAA,MAEA,QAAA,kBAAAA,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA;AAAA,YACL,MAAQ,EAAA,YAAA;AAAA,YACR,KAAO,EAAA;AAAA,WACT;AAAA,UAEA,0CAAC,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAAA,cAAA,CAAC,QAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,YAAA,CAAA,EAAiB,uBAAa,MAAO,EAAA,CAAA;AAAA,4BAChEA,cAAA,CAAC,KAAK,EAAA,EAAA,QAAA,EAAA,YAAA,CAAa,OAAQ,EAAA;AAAA,WAC7B,EAAA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;;;;;;"}
|
package/cjs/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var NotificationsContext = require('./NotificationsContext.js');
|
|
3
4
|
var NotificationsProvider = require('./NotificationsProvider.js');
|
|
4
5
|
var ToastNotification = require('./ToastNotification.js');
|
|
5
|
-
var NotificationsContext = require('./NotificationsContext.js');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
+
exports.NotificationType = NotificationsContext.NotificationType;
|
|
9
10
|
exports.NotificationsProvider = NotificationsProvider.NotificationsProvider;
|
|
10
11
|
exports.useNotifications = NotificationsProvider.useNotifications;
|
|
11
12
|
exports.ToastNotification = ToastNotification.ToastNotification;
|
|
12
|
-
exports.NotificationType = NotificationsContext.NotificationType;
|
|
13
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -6,8 +6,8 @@ import { ToastNotification, TOAST_HEIGHT } from './ToastNotification.js';
|
|
|
6
6
|
import { WorkspaceNotification } from './WorkspaceNotification.js';
|
|
7
7
|
|
|
8
8
|
const toastOffsetTop = 60;
|
|
9
|
-
const toastDisplayDuration =
|
|
10
|
-
const horizontalTransitionDuration =
|
|
9
|
+
const toastDisplayDuration = 6e6;
|
|
10
|
+
const horizontalTransitionDuration = 1e8;
|
|
11
11
|
const toastContainerContentGap = 10;
|
|
12
12
|
const NotificationsCenter = ({
|
|
13
13
|
notificationsContext,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsCenter.js","sources":["../../../packages/vuu-notifications/src/NotificationsCenter.tsx"],"sourcesContent":["import { getUniqueId, saveLocalEntity } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n isToastNotification,\n isWorkspaceNotification,\n Notification,\n NotificationsContext,\n ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { TOAST_HEIGHT, ToastNotification } from \"./ToastNotification\";\nimport { WorkspaceNotification } from \"./WorkspaceNotification\";\n\nexport interface NotificationsCenterProps {\n notificationsContext: NotificationsContext;\n startupToastNotification?: ToastNotificationDescriptor;\n}\n\ninterface ToastNotificationWithId extends ToastNotificationDescriptor {\n id: string;\n}\n\n// animation times in milliseconds\nconst toastOffsetTop = 60;\
|
|
1
|
+
{"version":3,"file":"NotificationsCenter.js","sources":["../../../packages/vuu-notifications/src/NotificationsCenter.tsx"],"sourcesContent":["import { getUniqueId, saveLocalEntity } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n isToastNotification,\n isWorkspaceNotification,\n Notification,\n NotificationsContext,\n ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { TOAST_HEIGHT, ToastNotification } from \"./ToastNotification\";\nimport { WorkspaceNotification } from \"./WorkspaceNotification\";\n\nexport interface NotificationsCenterProps {\n notificationsContext: NotificationsContext;\n startupToastNotification?: ToastNotificationDescriptor;\n}\n\ninterface ToastNotificationWithId extends ToastNotificationDescriptor {\n id: string;\n}\n\n// animation times in milliseconds\nconst toastOffsetTop = 60;\n// const toastDisplayDuration = 6000;\nconst toastDisplayDuration = 6000000;\n// const horizontalTransitionDuration = 1000;\nconst horizontalTransitionDuration = 100000000;\n\nconst toastContainerContentGap = 10;\n// rightPadding is used together with the toastWidth to compute the toast position\n// at the beginning and at the end of the animation\n\nexport const NotificationsCenter = ({\n notificationsContext,\n startupToastNotification,\n}: NotificationsCenterProps) => {\n const toastNotifications = useMemo<ToastNotificationWithId[]>(\n () =>\n startupToastNotification\n ? [\n {\n ...startupToastNotification,\n id: getUniqueId(),\n },\n ]\n : [],\n [startupToastNotification],\n );\n\n const [workspaceNotification, setWorkspaceNotification] =\n useState<ReactNode>(null);\n\n const [notifications, setNotifications] =\n useState<ToastNotificationWithId[]>(toastNotifications);\n\n const showNotification = useCallback((notification: Notification) => {\n if (isToastNotification(notification)) {\n if (notification.renderPostRefresh) {\n saveLocalEntity(\"startup-notification\", {\n ...notification,\n expires: +new Date() + 10000,\n });\n } else {\n const newNotification: ToastNotificationWithId = {\n ...notification,\n id: getUniqueId(),\n };\n setNotifications((prev) => prev.concat(newNotification));\n setTimeout(\n () => {\n setNotifications((prev) =>\n prev.filter((n) => n !== newNotification),\n );\n },\n toastDisplayDuration + horizontalTransitionDuration * 2,\n );\n }\n } else if (isWorkspaceNotification(notification)) {\n setWorkspaceNotification(\n <WorkspaceNotification>{notification.content}</WorkspaceNotification>,\n );\n } else {\n throw Error(\"[NotificationsCenter] invalid notification received\");\n }\n }, []);\n\n const hideNotification = useCallback(() => {\n setWorkspaceNotification(null);\n }, []);\n\n useMemo(() => {\n notificationsContext.setNotify(showNotification, hideNotification);\n }, [hideNotification, notificationsContext, showNotification]);\n\n return (\n <>\n {workspaceNotification}\n {notifications.map((notification, i) => (\n <ToastNotification\n top={toastOffsetTop + (TOAST_HEIGHT + toastContainerContentGap) * i}\n notification={notification}\n key={notification.id}\n />\n ))}\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAsBA,MAAM,cAAiB,GAAA,EAAA;AAEvB,MAAM,oBAAuB,GAAA,GAAA;AAE7B,MAAM,4BAA+B,GAAA,GAAA;AAErC,MAAM,wBAA2B,GAAA,EAAA;AAI1B,MAAM,sBAAsB,CAAC;AAAA,EAClC,oBAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,kBAAqB,GAAA,OAAA;AAAA,IACzB,MACE,wBACI,GAAA;AAAA,MACE;AAAA,QACE,GAAG,wBAAA;AAAA,QACH,IAAI,WAAY;AAAA;AAClB,QAEF,EAAC;AAAA,IACP,CAAC,wBAAwB;AAAA,GAC3B;AAEA,EAAA,MAAM,CAAC,qBAAA,EAAuB,wBAAwB,CAAA,GACpD,SAAoB,IAAI,CAAA;AAE1B,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GACpC,SAAoC,kBAAkB,CAAA;AAExD,EAAM,MAAA,gBAAA,GAAmB,WAAY,CAAA,CAAC,YAA+B,KAAA;AACnE,IAAI,IAAA,mBAAA,CAAoB,YAAY,CAAG,EAAA;AACrC,MAAA,IAAI,aAAa,iBAAmB,EAAA;AAClC,QAAA,eAAA,CAAgB,sBAAwB,EAAA;AAAA,UACtC,GAAG,YAAA;AAAA,UACH,OAAS,EAAA,iBAAK,IAAA,IAAA,EAAS,GAAA;AAAA,SACxB,CAAA;AAAA,OACI,MAAA;AACL,QAAA,MAAM,eAA2C,GAAA;AAAA,UAC/C,GAAG,YAAA;AAAA,UACH,IAAI,WAAY;AAAA,SAClB;AACA,QAAA,gBAAA,CAAiB,CAAC,IAAA,KAAS,IAAK,CAAA,MAAA,CAAO,eAAe,CAAC,CAAA;AACvD,QAAA,UAAA;AAAA,UACE,MAAM;AACJ,YAAA,gBAAA;AAAA,cAAiB,CAAC,IAChB,KAAA,IAAA,CAAK,OAAO,CAAC,CAAA,KAAM,MAAM,eAAe;AAAA,aAC1C;AAAA,WACF;AAAA,UACA,uBAAuB,4BAA+B,GAAA;AAAA,SACxD;AAAA;AACF,KACF,MAAA,IAAW,uBAAwB,CAAA,YAAY,CAAG,EAAA;AAChD,MAAA,wBAAA;AAAA,wBACE,GAAA,CAAC,qBAAuB,EAAA,EAAA,QAAA,EAAA,YAAA,CAAa,OAAQ,EAAA;AAAA,OAC/C;AAAA,KACK,MAAA;AACL,MAAA,MAAM,MAAM,qDAAqD,CAAA;AAAA;AACnE,GACF,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,wBAAA,CAAyB,IAAI,CAAA;AAAA,GAC/B,EAAG,EAAE,CAAA;AAEL,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAqB,oBAAA,CAAA,SAAA,CAAU,kBAAkB,gBAAgB,CAAA;AAAA,GAChE,EAAA,CAAC,gBAAkB,EAAA,oBAAA,EAAsB,gBAAgB,CAAC,CAAA;AAE7D,EAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,qBAAA;AAAA,IACA,aAAc,CAAA,GAAA,CAAI,CAAC,YAAA,EAAc,CAChC,qBAAA,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,cAAkB,GAAA,CAAA,YAAA,GAAe,wBAA4B,IAAA,CAAA;AAAA,QAClE;AAAA,OAAA;AAAA,MACK,YAAa,CAAA;AAAA,KAErB;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsContext.js","sources":["../../../packages/vuu-notifications/src/NotificationsContext.tsx"],"sourcesContent":["import { type ValidationStatus } from \"@salt-ds/core\";\nimport { ValueOf } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode } from \"react\";\n\nexport type DispatchShowNotification = (notification: Notification) => void;\nexport type DispatchHideNotification = () => void;\n\nexport const NotificationType = {\n Toast: \"toast\",\n Workspace: \"workspace\",\n} as const;\n\nexport type NotificationType = ValueOf<typeof NotificationType>;\n\nexport type NotificationAnimationType =\n | \"slide-in\"\n | \"slide-out\"\n | \"slide-in,slide-out\";\n\ninterface NotificationDescriptorBase<T extends NotificationType> {\n animationType?: NotificationAnimationType;\n renderPostRefresh?: boolean;\n status: ValidationStatus;\n type: T;\n}\n\nexport interface ToastNotificationDescriptor\n extends NotificationDescriptorBase<\"toast\"> {\n content:
|
|
1
|
+
{"version":3,"file":"NotificationsContext.js","sources":["../../../packages/vuu-notifications/src/NotificationsContext.tsx"],"sourcesContent":["import { type ValidationStatus } from \"@salt-ds/core\";\nimport { ValueOf } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode } from \"react\";\n\nexport type DispatchShowNotification = (notification: Notification) => void;\nexport type DispatchHideNotification = () => void;\n\nexport const NotificationType = {\n Toast: \"toast\",\n Workspace: \"workspace\",\n} as const;\n\nexport type NotificationType = ValueOf<typeof NotificationType>;\n\nexport type NotificationAnimationType =\n | \"slide-in\"\n | \"slide-out\"\n | \"slide-in,slide-out\";\n\ninterface NotificationDescriptorBase<T extends NotificationType> {\n animationType?: NotificationAnimationType;\n renderPostRefresh?: boolean;\n status: ValidationStatus;\n type: T;\n}\n\nexport interface ToastNotificationDescriptor\n extends NotificationDescriptorBase<\"toast\"> {\n content: ReactNode;\n header: string;\n}\n\nexport interface WorkspaceNotificationDescriptor\n extends NotificationDescriptorBase<\"workspace\"> {\n content: ReactNode;\n}\n\nexport type Notification =\n | ToastNotificationDescriptor\n | WorkspaceNotificationDescriptor;\n\nexport const isToastNotification = (\n n: Notification,\n): n is ToastNotificationDescriptor => n.type === NotificationType.Toast;\n\nexport const isWorkspaceNotification = (\n n: Notification,\n): n is WorkspaceNotificationDescriptor =>\n n.type === NotificationType.Workspace;\n\nexport type NotificationsContext = {\n hideNotification: DispatchHideNotification;\n showNotification: DispatchShowNotification;\n setNotify: (\n showNotificationDispatcher: DispatchShowNotification,\n hideNotificationDispatcher: DispatchHideNotification,\n ) => void;\n};\n"],"names":[],"mappings":"AAOO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,KAAO,EAAA,OAAA;AAAA,EACP,SAAW,EAAA;AACb;AA+BO,MAAM,mBAAsB,GAAA,CACjC,CACqC,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;AAE5D,MAAM,uBAA0B,GAAA,CACrC,CAEA,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var toastNotificationCss = ".vuuToastNotification {\n\n background: var(--vuuToastNotification-background, var(--toast-background));\n border-radius: var(--vuuToastNotification-borderRadius, var(--salt-curve-100, 0));\n box-sizing: border-box;\n box-shadow: var(--salt-overlayable-shadow-popout);\n\n\n\n &.vuuToastNotification-error {\n --toast-background: var(--vuuToastNotification-error-background, var(--salt-container-primary-background));\n }\n\n &.vuuToastNotification-success {\n --toast-background: var(--vuuToastNotification-success-background, var(--salt-container-primary-background));\n }\n}";
|
|
2
|
+
|
|
3
|
+
export { toastNotificationCss as default };
|
|
4
|
+
//# sourceMappingURL=ToastNotification.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToastNotification.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/esm/ToastNotification.js
CHANGED
|
@@ -1,16 +1,25 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import cx from 'clsx';
|
|
3
|
-
import { useFloatingComponent
|
|
3
|
+
import { useFloatingComponent } from '@salt-ds/core';
|
|
4
4
|
import { useMemo, useState, useEffect } from 'react';
|
|
5
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
6
|
+
import { useWindow } from '@salt-ds/window';
|
|
7
|
+
import toastNotificationCss from './ToastNotification.css.js';
|
|
5
8
|
|
|
6
9
|
const toastContainerRightPadding = 20;
|
|
7
|
-
const toastDisplayDuration =
|
|
10
|
+
const toastDisplayDuration = 12e5;
|
|
8
11
|
const horizontalTransitionDuration = 400;
|
|
9
12
|
const TOAST_HEIGHT = 80;
|
|
10
13
|
const TOAST_WIDTH = 300;
|
|
11
14
|
const verticalTransitionDuration = 300;
|
|
12
15
|
const classBase = "vuuToastNotification";
|
|
13
16
|
const ToastNotification = (props) => {
|
|
17
|
+
const targetWindow = useWindow();
|
|
18
|
+
useComponentCssInjection({
|
|
19
|
+
testId: "vuu-toast-notification",
|
|
20
|
+
css: toastNotificationCss,
|
|
21
|
+
window: targetWindow
|
|
22
|
+
});
|
|
14
23
|
const { top, notification, animated = true } = props;
|
|
15
24
|
const { Component: FloatingComponent } = useFloatingComponent();
|
|
16
25
|
const { animationType = "slide-in,slide-out" } = notification;
|
|
@@ -34,27 +43,29 @@ const ToastNotification = (props) => {
|
|
|
34
43
|
);
|
|
35
44
|
}
|
|
36
45
|
}, [animated, pageWidth, slideIn]);
|
|
37
|
-
console.log(`left ${left}`);
|
|
38
46
|
return /* @__PURE__ */ jsx(
|
|
39
47
|
FloatingComponent,
|
|
40
48
|
{
|
|
41
|
-
className: cx(
|
|
42
|
-
|
|
49
|
+
className: cx(
|
|
50
|
+
classBase,
|
|
51
|
+
`${classBase}-${notification.type}`,
|
|
52
|
+
`${classBase}-${notification.status}`
|
|
53
|
+
),
|
|
43
54
|
left,
|
|
44
|
-
top,
|
|
45
55
|
open: true,
|
|
56
|
+
position: "absolute",
|
|
57
|
+
top,
|
|
46
58
|
style: {
|
|
47
59
|
transition: animated ? `left ${horizontalTransitionDuration}ms, top ${verticalTransitionDuration}ms ` : "none"
|
|
48
60
|
},
|
|
49
61
|
children: /* @__PURE__ */ jsx(
|
|
50
|
-
|
|
62
|
+
"div",
|
|
51
63
|
{
|
|
52
|
-
status: notification.status,
|
|
53
64
|
style: {
|
|
54
65
|
height: TOAST_HEIGHT,
|
|
55
66
|
width: TOAST_WIDTH
|
|
56
67
|
},
|
|
57
|
-
children: /* @__PURE__ */ jsxs(
|
|
68
|
+
children: /* @__PURE__ */ jsxs("div", { children: [
|
|
58
69
|
/* @__PURE__ */ jsx("h3", { className: `${classBase}-toastHeader`, children: notification.header }),
|
|
59
70
|
/* @__PURE__ */ jsx("div", { children: notification.content })
|
|
60
71
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastNotification.js","sources":["../../../packages/vuu-notifications/src/ToastNotification.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {
|
|
1
|
+
{"version":3,"file":"ToastNotification.js","sources":["../../../packages/vuu-notifications/src/ToastNotification.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useFloatingComponent } from \"@salt-ds/core\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { ToastNotificationDescriptor } from \"./NotificationsContext\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst toastContainerRightPadding = 20;\n// const toastDisplayDuration = 1200;\nconst toastDisplayDuration = 1200000;\nconst horizontalTransitionDuration = 400;\nexport const TOAST_HEIGHT = 80;\nexport const TOAST_WIDTH = 300;\nconst verticalTransitionDuration = 300;\n\nimport toastNotificationCss from \"./ToastNotification.css\";\n\nexport type ToastNotificationProps = {\n top: number;\n notification: ToastNotificationDescriptor;\n animated?: boolean;\n};\n\nconst classBase = \"vuuToastNotification\";\n\nexport const ToastNotification = (props: ToastNotificationProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-toast-notification\",\n css: toastNotificationCss,\n window: targetWindow,\n });\n\n const { top, notification, animated = true } = props;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const { animationType = \"slide-in,slide-out\" } = notification;\n\n const slideIn = animationType.includes(\"slide-in\");\n\n const pageWidth = useMemo(() => document.body.clientWidth, []);\n\n const [left, setLeft] = useState(\n slideIn\n ? pageWidth + TOAST_WIDTH - toastContainerRightPadding\n : pageWidth - TOAST_WIDTH - toastContainerRightPadding,\n );\n\n useEffect(() => {\n if (slideIn) {\n setTimeout(() =>\n setLeft(pageWidth - TOAST_WIDTH - toastContainerRightPadding),\n );\n }\n\n if (animated) {\n setTimeout(\n () =>\n setLeft(\n document.body.clientWidth +\n TOAST_WIDTH -\n toastContainerRightPadding,\n ),\n toastDisplayDuration + horizontalTransitionDuration,\n );\n }\n }, [animated, pageWidth, slideIn]);\n\n return (\n <FloatingComponent\n className={cx(\n classBase,\n `${classBase}-${notification.type}`,\n `${classBase}-${notification.status}`,\n )}\n left={left}\n open\n position=\"absolute\"\n top={top}\n style={{\n transition: animated\n ? `left ${horizontalTransitionDuration}ms, top ${verticalTransitionDuration}ms `\n : \"none\",\n }}\n >\n <div\n style={{\n height: TOAST_HEIGHT,\n width: TOAST_WIDTH,\n }}\n >\n <div>\n <h3 className={`${classBase}-toastHeader`}>{notification.header}</h3>\n <div>{notification.content}</div>\n </div>\n </div>\n </FloatingComponent>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAOA,MAAM,0BAA6B,GAAA,EAAA;AAEnC,MAAM,oBAAuB,GAAA,IAAA;AAC7B,MAAM,4BAA+B,GAAA,GAAA;AAC9B,MAAM,YAAe,GAAA;AACrB,MAAM,WAAc,GAAA;AAC3B,MAAM,0BAA6B,GAAA,GAAA;AAUnC,MAAM,SAAY,GAAA,sBAAA;AAEL,MAAA,iBAAA,GAAoB,CAAC,KAAkC,KAAA;AAClE,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,oBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,GAAA,EAAK,YAAc,EAAA,QAAA,GAAW,MAAS,GAAA,KAAA;AAE/C,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA;AAE9D,EAAM,MAAA,EAAE,aAAgB,GAAA,oBAAA,EAAyB,GAAA,YAAA;AAEjD,EAAM,MAAA,OAAA,GAAU,aAAc,CAAA,QAAA,CAAS,UAAU,CAAA;AAEjD,EAAA,MAAM,YAAY,OAAQ,CAAA,MAAM,SAAS,IAAK,CAAA,WAAA,EAAa,EAAE,CAAA;AAE7D,EAAM,MAAA,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,QAAA;AAAA,IACtB,OACI,GAAA,SAAA,GAAY,WAAc,GAAA,0BAAA,GAC1B,YAAY,WAAc,GAAA;AAAA,GAChC;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,UAAA;AAAA,QAAW,MACT,OAAA,CAAQ,SAAY,GAAA,WAAA,GAAc,0BAA0B;AAAA,OAC9D;AAAA;AAGF,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,UAAA;AAAA,QACE,MACE,OAAA;AAAA,UACE,QAAA,CAAS,IAAK,CAAA,WAAA,GACZ,WACA,GAAA;AAAA,SACJ;AAAA,QACF,oBAAuB,GAAA;AAAA,OACzB;AAAA;AACF,GACC,EAAA,CAAC,QAAU,EAAA,SAAA,EAAW,OAAO,CAAC,CAAA;AAEjC,EACE,uBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA;AAAA,QACT,SAAA;AAAA,QACA,CAAG,EAAA,SAAS,CAAI,CAAA,EAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,QACjC,CAAG,EAAA,SAAS,CAAI,CAAA,EAAA,YAAA,CAAa,MAAM,CAAA;AAAA,OACrC;AAAA,MACA,IAAA;AAAA,MACA,IAAI,EAAA,IAAA;AAAA,MACJ,QAAS,EAAA,UAAA;AAAA,MACT,GAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,YAAY,QACR,GAAA,CAAA,KAAA,EAAQ,4BAA4B,CAAA,QAAA,EAAW,0BAA0B,CACzE,GAAA,CAAA,GAAA;AAAA,OACN;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA;AAAA,YACL,MAAQ,EAAA,YAAA;AAAA,YACR,KAAO,EAAA;AAAA,WACT;AAAA,UAEA,+BAAC,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,QAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,YAAA,CAAA,EAAiB,uBAAa,MAAO,EAAA,CAAA;AAAA,4BAChE,GAAA,CAAC,KAAK,EAAA,EAAA,QAAA,EAAA,YAAA,CAAa,OAAQ,EAAA;AAAA,WAC7B,EAAA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
+
export { NotificationType } from './NotificationsContext.js';
|
|
1
2
|
export { NotificationsProvider, useNotifications } from './NotificationsProvider.js';
|
|
2
3
|
export { ToastNotification } from './ToastNotification.js';
|
|
3
|
-
export { NotificationType } from './NotificationsContext.js';
|
|
4
4
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "
|
|
2
|
+
"version": "2.0.0-alpha.1",
|
|
3
3
|
"description": "VUU notifications - Toast, WorkspaceNotification etc",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"@salt-ds/core": "1.54.1",
|
|
8
8
|
"@salt-ds/styles": "0.2.1",
|
|
9
9
|
"@salt-ds/window": "0.1.1",
|
|
10
|
-
"@vuu-ui/vuu-utils": "
|
|
10
|
+
"@vuu-ui/vuu-utils": "2.0.0-alpha.1"
|
|
11
11
|
},
|
|
12
12
|
"peerDependencies": {
|
|
13
13
|
"clsx": "^2.0.0",
|
|
@@ -16,7 +16,7 @@ interface NotificationDescriptorBase<T extends NotificationType> {
|
|
|
16
16
|
type: T;
|
|
17
17
|
}
|
|
18
18
|
export interface ToastNotificationDescriptor extends NotificationDescriptorBase<"toast"> {
|
|
19
|
-
content:
|
|
19
|
+
content: ReactNode;
|
|
20
20
|
header: string;
|
|
21
21
|
}
|
|
22
22
|
export interface WorkspaceNotificationDescriptor extends NotificationDescriptorBase<"workspace"> {
|
package/types/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
+
export { NotificationType, type Notification, type NotificationAnimationType, } from "./NotificationsContext";
|
|
1
2
|
export { NotificationsProvider, useNotifications, } from "./NotificationsProvider";
|
|
2
3
|
export { ToastNotification, type ToastNotificationProps, } from "./ToastNotification";
|
|
3
|
-
export { NotificationType } from "./NotificationsContext";
|