@ttoss/react-notifications 2.7.20 → 2.7.21

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/index.cjs ADDED
@@ -0,0 +1,220 @@
1
+ /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
+ Object.defineProperty(exports, Symbol.toStringTag, {
3
+ value: 'Module'
4
+ });
5
+ //#region \0rolldown/runtime.js
6
+ var __create = Object.create;
7
+ var __defProp = Object.defineProperty;
8
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
9
+ var __getOwnPropNames = Object.getOwnPropertyNames;
10
+ var __getProtoOf = Object.getPrototypeOf;
11
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
15
+ key = keys[i];
16
+ if (!__hasOwnProp.call(to, key) && key !== except) {
17
+ __defProp(to, key, {
18
+ get: (k => from[k]).bind(null, key),
19
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
20
+ });
21
+ }
22
+ }
23
+ }
24
+ return to;
25
+ };
26
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
27
+ value: mod,
28
+ enumerable: true
29
+ }) : target, mod));
30
+
31
+ //#endregion
32
+ let _ttoss_components_NotificationCard = require("@ttoss/components/NotificationCard");
33
+ let _ttoss_ui = require("@ttoss/ui");
34
+ let _ttoss_components_Toast = require("@ttoss/components/Toast");
35
+ let react = require("react");
36
+ react = __toESM(react);
37
+ let react_jsx_runtime = require("react/jsx-runtime");
38
+ let _ttoss_components_Modal = require("@ttoss/components/Modal");
39
+
40
+ //#region src/NotificationsHeader.tsx
41
+ const NotificationsHeader = () => {
42
+ const {
43
+ notifications
44
+ } = useNotifications();
45
+ const headerNotifications = notifications?.filter(notification => {
46
+ return notification.viewType === "header";
47
+ });
48
+ return /* @__PURE__ */(0, react_jsx_runtime.jsx)(NotificationsBox, {
49
+ notifications: headerNotifications
50
+ });
51
+ };
52
+
53
+ //#endregion
54
+ //#region src/NotificationsModal.tsx
55
+ const NotificationsModal = () => {
56
+ const {
57
+ notifications,
58
+ clearNotifications,
59
+ defaultViewType
60
+ } = useNotifications();
61
+ const modalNotifications = notifications?.filter(notification => {
62
+ if (defaultViewType === "modal" && !notification.viewType) return true;
63
+ return notification.viewType === "modal";
64
+ });
65
+ return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_components_Modal.Modal, {
66
+ isOpen: !!modalNotifications && modalNotifications.length > 0,
67
+ style: {
68
+ content: {
69
+ minWidth: "30%",
70
+ display: "flex",
71
+ flexDirection: "column",
72
+ alignItems: "center",
73
+ gap: "4"
74
+ }
75
+ },
76
+ children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.CloseButton, {
77
+ "aria-label": "Close",
78
+ sx: {
79
+ alignSelf: "flex-end"
80
+ },
81
+ onClick: () => {
82
+ clearNotifications();
83
+ }
84
+ }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(NotificationsBox, {
85
+ notifications: modalNotifications
86
+ })]
87
+ });
88
+ };
89
+
90
+ //#endregion
91
+ //#region src/Provider.tsx
92
+ const NotificationsContext = react.createContext({
93
+ isLoading: false,
94
+ setLoading: () => {},
95
+ defaultViewType: "box",
96
+ addNotification: () => {},
97
+ removeNotification: () => {},
98
+ clearNotifications: () => {}
99
+ });
100
+ const NotificationsProvider = props => {
101
+ const [isLoading, setLoading] = react.useState(false);
102
+ const [notifications, setNotifications] = react.useState();
103
+ const prefix = react.useId();
104
+ const removeNotification = react.useCallback(id => {
105
+ setNotifications(prevNotifications => {
106
+ return prevNotifications?.filter(notification => {
107
+ return notification.id !== id;
108
+ });
109
+ });
110
+ }, []);
111
+ const addNotification = react.useCallback(notification => {
112
+ const newNotifications = (Array.isArray(notification) ? notification : [notification]).map(notification => {
113
+ const id = notification.id || `${prefix}-${Math.random()}`;
114
+ return {
115
+ ...notification,
116
+ id
117
+ };
118
+ }).filter((notification, index, notifications) => {
119
+ return notifications.findIndex(n => {
120
+ return n.id === notification.id;
121
+ }) === index;
122
+ });
123
+ newNotifications.filter(notification => {
124
+ if (notification.viewType === "toast") return true;
125
+ if (!notification.viewType && props.defaultViewType === "toast") return true;
126
+ return false;
127
+ }).forEach(notification => {
128
+ (0, _ttoss_components_Toast.toast)(notification.message, {
129
+ ...notification.toast,
130
+ type: notification.type,
131
+ onClose: () => {
132
+ removeNotification(notification.id);
133
+ notification.toast?.onClose?.();
134
+ }
135
+ });
136
+ });
137
+ setNotifications((prevNotifications = []) => {
138
+ const nonToastNewNotifications = newNotifications.filter(notification => {
139
+ if (notification.viewType === "toast") return false;
140
+ if (!notification.viewType && props.defaultViewType === "toast") return false;
141
+ return true;
142
+ });
143
+ return [...prevNotifications.filter(prevNotification => {
144
+ return !nonToastNewNotifications.some(newNotification => {
145
+ return newNotification.id === prevNotification.id;
146
+ });
147
+ }), ...nonToastNewNotifications];
148
+ });
149
+ }, [prefix, props.defaultViewType, removeNotification]);
150
+ const clearNotifications = react.useCallback(() => {
151
+ setNotifications(prevNotifications => {
152
+ return prevNotifications?.filter(notification => {
153
+ return notification.persist === true;
154
+ });
155
+ });
156
+ }, []);
157
+ return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(NotificationsContext.Provider, {
158
+ value: {
159
+ isLoading,
160
+ setLoading,
161
+ notifications,
162
+ addNotification,
163
+ removeNotification,
164
+ clearNotifications,
165
+ defaultViewType: props.defaultViewType || "box"
166
+ },
167
+ children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_components_Toast.ToastContainer, {
168
+ ...props.toast
169
+ }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(NotificationsModal, {}), isLoading && /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Flex, {
170
+ sx: {
171
+ position: "absolute",
172
+ width: "100%",
173
+ top: 0
174
+ },
175
+ children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.InfiniteLinearProgress, {})
176
+ }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(NotificationsHeader, {}), props.children]
177
+ });
178
+ };
179
+ const useNotifications = () => {
180
+ return react.useContext(NotificationsContext);
181
+ };
182
+
183
+ //#endregion
184
+ //#region src/NotificationsBox.tsx
185
+ const NotificationsBox = props => {
186
+ const {
187
+ notifications,
188
+ removeNotification,
189
+ defaultViewType
190
+ } = useNotifications();
191
+ const boxNotifications = props.notifications || notifications?.filter(notification => {
192
+ if (notification.viewType !== "box" && defaultViewType !== "box") return false;
193
+ if (!props.id && notification.boxId) return false;
194
+ if (!props.id && !notification.boxId) return true;
195
+ return notification.boxId === props.id;
196
+ });
197
+ if (!Array.isArray(boxNotifications)) return null;
198
+ return /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Stack, {
199
+ sx: {
200
+ width: "full",
201
+ gap: "1"
202
+ },
203
+ children: boxNotifications.map(notification => {
204
+ return /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_components_NotificationCard.NotificationCard, {
205
+ type: notification.type,
206
+ title: notification.title,
207
+ message: notification.message,
208
+ onClose: () => {
209
+ if (notification.id) removeNotification(notification.id);
210
+ }
211
+ }, notification.id);
212
+ })
213
+ });
214
+ };
215
+
216
+ //#endregion
217
+ exports.NotificationsBox = NotificationsBox;
218
+ exports.NotificationsProvider = NotificationsProvider;
219
+ exports.toast = _ttoss_components_Toast.toast;
220
+ exports.useNotifications = useNotifications;
@@ -0,0 +1,39 @@
1
+
2
+ import { ToastContainerProps, ToastOptions, toast } from "@ttoss/components/Toast";
3
+ import * as React from "react";
4
+
5
+ //#region src/Provider.d.ts
6
+ type ViewType = 'toast' | 'modal' | 'box' | 'header';
7
+ type Notification = {
8
+ id?: string | number;
9
+ title?: string;
10
+ message: string;
11
+ type: 'warning' | 'error' | 'info' | 'success';
12
+ viewType?: ViewType;
13
+ toast?: ToastOptions;
14
+ boxId?: string | number;
15
+ persist?: boolean;
16
+ };
17
+ type NotificationsProviderProps = {
18
+ children: React.ReactNode;
19
+ defaultViewType?: ViewType;
20
+ toast?: ToastContainerProps;
21
+ };
22
+ declare const NotificationsProvider: (props: NotificationsProviderProps) => import("react/jsx-runtime").JSX.Element;
23
+ declare const useNotifications: () => {
24
+ isLoading: boolean;
25
+ setLoading: (arg: boolean) => void;
26
+ defaultViewType: ViewType;
27
+ notifications?: Notification[];
28
+ addNotification(notification: Notification | Notification[]): void;
29
+ removeNotification(id: string | number): void;
30
+ clearNotifications(): void;
31
+ };
32
+ //#endregion
33
+ //#region src/NotificationsBox.d.ts
34
+ declare const NotificationsBox: (props: {
35
+ id?: string | number;
36
+ notifications?: Notification[] | undefined;
37
+ }) => import("react/jsx-runtime").JSX.Element | null;
38
+ //#endregion
39
+ export { type Notification, NotificationsBox, NotificationsProvider, type NotificationsProviderProps, toast, useNotifications };
@@ -0,0 +1,39 @@
1
+
2
+ import { ToastContainerProps, ToastOptions, toast } from "@ttoss/components/Toast";
3
+ import * as React from "react";
4
+
5
+ //#region src/Provider.d.ts
6
+ type ViewType = 'toast' | 'modal' | 'box' | 'header';
7
+ type Notification = {
8
+ id?: string | number;
9
+ title?: string;
10
+ message: string;
11
+ type: 'warning' | 'error' | 'info' | 'success';
12
+ viewType?: ViewType;
13
+ toast?: ToastOptions;
14
+ boxId?: string | number;
15
+ persist?: boolean;
16
+ };
17
+ type NotificationsProviderProps = {
18
+ children: React.ReactNode;
19
+ defaultViewType?: ViewType;
20
+ toast?: ToastContainerProps;
21
+ };
22
+ declare const NotificationsProvider: (props: NotificationsProviderProps) => import("react/jsx-runtime").JSX.Element;
23
+ declare const useNotifications: () => {
24
+ isLoading: boolean;
25
+ setLoading: (arg: boolean) => void;
26
+ defaultViewType: ViewType;
27
+ notifications?: Notification[];
28
+ addNotification(notification: Notification | Notification[]): void;
29
+ removeNotification(id: string | number): void;
30
+ clearNotifications(): void;
31
+ };
32
+ //#endregion
33
+ //#region src/NotificationsBox.d.ts
34
+ declare const NotificationsBox: (props: {
35
+ id?: string | number;
36
+ notifications?: Notification[] | undefined;
37
+ }) => import("react/jsx-runtime").JSX.Element | null;
38
+ //#endregion
39
+ export { type Notification, NotificationsBox, NotificationsProvider, type NotificationsProviderProps, toast, useNotifications };
package/dist/index.mjs ADDED
@@ -0,0 +1,186 @@
1
+ /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
+ import { NotificationCard } from "@ttoss/components/NotificationCard";
3
+ import { CloseButton, Flex, InfiniteLinearProgress, Stack } from "@ttoss/ui";
4
+ import { ToastContainer, toast } from "@ttoss/components/Toast";
5
+ import * as React from "react";
6
+ import { jsx, jsxs } from "react/jsx-runtime";
7
+ import { Modal } from "@ttoss/components/Modal";
8
+
9
+ //#region src/NotificationsHeader.tsx
10
+ const NotificationsHeader = () => {
11
+ const {
12
+ notifications
13
+ } = useNotifications();
14
+ const headerNotifications = notifications?.filter(notification => {
15
+ return notification.viewType === "header";
16
+ });
17
+ return /* @__PURE__ */jsx(NotificationsBox, {
18
+ notifications: headerNotifications
19
+ });
20
+ };
21
+
22
+ //#endregion
23
+ //#region src/NotificationsModal.tsx
24
+ const NotificationsModal = () => {
25
+ const {
26
+ notifications,
27
+ clearNotifications,
28
+ defaultViewType
29
+ } = useNotifications();
30
+ const modalNotifications = notifications?.filter(notification => {
31
+ if (defaultViewType === "modal" && !notification.viewType) return true;
32
+ return notification.viewType === "modal";
33
+ });
34
+ return /* @__PURE__ */jsxs(Modal, {
35
+ isOpen: !!modalNotifications && modalNotifications.length > 0,
36
+ style: {
37
+ content: {
38
+ minWidth: "30%",
39
+ display: "flex",
40
+ flexDirection: "column",
41
+ alignItems: "center",
42
+ gap: "4"
43
+ }
44
+ },
45
+ children: [/* @__PURE__ */jsx(CloseButton, {
46
+ "aria-label": "Close",
47
+ sx: {
48
+ alignSelf: "flex-end"
49
+ },
50
+ onClick: () => {
51
+ clearNotifications();
52
+ }
53
+ }), /* @__PURE__ */jsx(NotificationsBox, {
54
+ notifications: modalNotifications
55
+ })]
56
+ });
57
+ };
58
+
59
+ //#endregion
60
+ //#region src/Provider.tsx
61
+ const NotificationsContext = React.createContext({
62
+ isLoading: false,
63
+ setLoading: () => {},
64
+ defaultViewType: "box",
65
+ addNotification: () => {},
66
+ removeNotification: () => {},
67
+ clearNotifications: () => {}
68
+ });
69
+ const NotificationsProvider = props => {
70
+ const [isLoading, setLoading] = React.useState(false);
71
+ const [notifications, setNotifications] = React.useState();
72
+ const prefix = React.useId();
73
+ const removeNotification = React.useCallback(id => {
74
+ setNotifications(prevNotifications => {
75
+ return prevNotifications?.filter(notification => {
76
+ return notification.id !== id;
77
+ });
78
+ });
79
+ }, []);
80
+ const addNotification = React.useCallback(notification => {
81
+ const newNotifications = (Array.isArray(notification) ? notification : [notification]).map(notification => {
82
+ const id = notification.id || `${prefix}-${Math.random()}`;
83
+ return {
84
+ ...notification,
85
+ id
86
+ };
87
+ }).filter((notification, index, notifications) => {
88
+ return notifications.findIndex(n => {
89
+ return n.id === notification.id;
90
+ }) === index;
91
+ });
92
+ newNotifications.filter(notification => {
93
+ if (notification.viewType === "toast") return true;
94
+ if (!notification.viewType && props.defaultViewType === "toast") return true;
95
+ return false;
96
+ }).forEach(notification => {
97
+ toast(notification.message, {
98
+ ...notification.toast,
99
+ type: notification.type,
100
+ onClose: () => {
101
+ removeNotification(notification.id);
102
+ notification.toast?.onClose?.();
103
+ }
104
+ });
105
+ });
106
+ setNotifications((prevNotifications = []) => {
107
+ const nonToastNewNotifications = newNotifications.filter(notification => {
108
+ if (notification.viewType === "toast") return false;
109
+ if (!notification.viewType && props.defaultViewType === "toast") return false;
110
+ return true;
111
+ });
112
+ return [...prevNotifications.filter(prevNotification => {
113
+ return !nonToastNewNotifications.some(newNotification => {
114
+ return newNotification.id === prevNotification.id;
115
+ });
116
+ }), ...nonToastNewNotifications];
117
+ });
118
+ }, [prefix, props.defaultViewType, removeNotification]);
119
+ const clearNotifications = React.useCallback(() => {
120
+ setNotifications(prevNotifications => {
121
+ return prevNotifications?.filter(notification => {
122
+ return notification.persist === true;
123
+ });
124
+ });
125
+ }, []);
126
+ return /* @__PURE__ */jsxs(NotificationsContext.Provider, {
127
+ value: {
128
+ isLoading,
129
+ setLoading,
130
+ notifications,
131
+ addNotification,
132
+ removeNotification,
133
+ clearNotifications,
134
+ defaultViewType: props.defaultViewType || "box"
135
+ },
136
+ children: [/* @__PURE__ */jsx(ToastContainer, {
137
+ ...props.toast
138
+ }), /* @__PURE__ */jsx(NotificationsModal, {}), isLoading && /* @__PURE__ */jsx(Flex, {
139
+ sx: {
140
+ position: "absolute",
141
+ width: "100%",
142
+ top: 0
143
+ },
144
+ children: /* @__PURE__ */jsx(InfiniteLinearProgress, {})
145
+ }), /* @__PURE__ */jsx(NotificationsHeader, {}), props.children]
146
+ });
147
+ };
148
+ const useNotifications = () => {
149
+ return React.useContext(NotificationsContext);
150
+ };
151
+
152
+ //#endregion
153
+ //#region src/NotificationsBox.tsx
154
+ const NotificationsBox = props => {
155
+ const {
156
+ notifications,
157
+ removeNotification,
158
+ defaultViewType
159
+ } = useNotifications();
160
+ const boxNotifications = props.notifications || notifications?.filter(notification => {
161
+ if (notification.viewType !== "box" && defaultViewType !== "box") return false;
162
+ if (!props.id && notification.boxId) return false;
163
+ if (!props.id && !notification.boxId) return true;
164
+ return notification.boxId === props.id;
165
+ });
166
+ if (!Array.isArray(boxNotifications)) return null;
167
+ return /* @__PURE__ */jsx(Stack, {
168
+ sx: {
169
+ width: "full",
170
+ gap: "1"
171
+ },
172
+ children: boxNotifications.map(notification => {
173
+ return /* @__PURE__ */jsx(NotificationCard, {
174
+ type: notification.type,
175
+ title: notification.title,
176
+ message: notification.message,
177
+ onClose: () => {
178
+ if (notification.id) removeNotification(notification.id);
179
+ }
180
+ }, notification.id);
181
+ })
182
+ });
183
+ };
184
+
185
+ //#endregion
186
+ export { NotificationsBox, NotificationsProvider, toast, useNotifications };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/react-notifications",
3
- "version": "2.7.20",
3
+ "version": "2.7.21",
4
4
  "description": "ttoss notifications module for React apps.",
5
5
  "keywords": [
6
6
  "React",
@@ -30,26 +30,26 @@
30
30
  "devDependencies": {
31
31
  "@types/react": "^19.2.14",
32
32
  "jest": "^30.3.0",
33
- "react": "^19.2.4",
34
- "tsup": "^8.5.1",
35
- "@ttoss/components": "^2.14.20",
36
- "@ttoss/config": "^1.37.12",
37
- "@ttoss/react-icons": "^0.7.13",
38
- "@ttoss/test-utils": "^4.2.12",
39
- "@ttoss/ui": "^6.9.19"
33
+ "react": "^19.2.6",
34
+ "tsdown": "^0.22.0",
35
+ "@ttoss/components": "^2.14.21",
36
+ "@ttoss/config": "^1.37.13",
37
+ "@ttoss/test-utils": "^4.2.13",
38
+ "@ttoss/react-icons": "^0.7.14",
39
+ "@ttoss/ui": "^6.9.20"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "react": ">=16.8.0",
43
- "@ttoss/components": "^2.14.20",
44
- "@ttoss/ui": "^6.9.19",
45
- "@ttoss/react-icons": "^0.7.13"
43
+ "@ttoss/react-icons": "^0.7.14",
44
+ "@ttoss/ui": "^6.9.20",
45
+ "@ttoss/components": "^2.14.21"
46
46
  },
47
47
  "publishConfig": {
48
48
  "access": "public",
49
49
  "provenance": true
50
50
  },
51
51
  "scripts": {
52
- "build": "tsup",
52
+ "build": "tsdown",
53
53
  "test": "jest --projects tests/unit"
54
54
  }
55
55
  }
package/dist/esm/index.js DELETED
@@ -1,219 +0,0 @@
1
- /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import * as React from 'react';
3
- var __defProp = Object.defineProperty;
4
- var __name = (target, value) => __defProp(target, "name", {
5
- value,
6
- configurable: true
7
- });
8
-
9
- // src/NotificationsBox.tsx
10
- import { NotificationCard } from "@ttoss/components/NotificationCard";
11
- import { Stack } from "@ttoss/ui";
12
-
13
- // src/Provider.tsx
14
- import { toast, ToastContainer } from "@ttoss/components/Toast";
15
- import { Flex, InfiniteLinearProgress } from "@ttoss/ui";
16
- import * as React2 from "react";
17
-
18
- // src/NotificationsHeader.tsx
19
- var NotificationsHeader = /* @__PURE__ */__name(() => {
20
- const {
21
- notifications
22
- } = useNotifications();
23
- const headerNotifications = notifications?.filter(notification => {
24
- return notification.viewType === "header";
25
- });
26
- return /* @__PURE__ */React.createElement(NotificationsBox, {
27
- notifications: headerNotifications
28
- });
29
- }, "NotificationsHeader");
30
-
31
- // src/NotificationsModal.tsx
32
- import { Modal } from "@ttoss/components/Modal";
33
- import { CloseButton } from "@ttoss/ui";
34
- var NotificationsModal = /* @__PURE__ */__name(() => {
35
- const {
36
- notifications,
37
- clearNotifications,
38
- defaultViewType
39
- } = useNotifications();
40
- const modalNotifications = notifications?.filter(notification => {
41
- if (defaultViewType === "modal" && !notification.viewType) {
42
- return true;
43
- }
44
- return notification.viewType === "modal";
45
- });
46
- const isOpen = !!modalNotifications && modalNotifications.length > 0;
47
- return /* @__PURE__ */React.createElement(Modal, {
48
- isOpen,
49
- style: {
50
- content: {
51
- minWidth: "30%",
52
- display: "flex",
53
- flexDirection: "column",
54
- alignItems: "center",
55
- gap: "4"
56
- }
57
- }
58
- }, /* @__PURE__ */React.createElement(CloseButton, {
59
- "aria-label": "Close",
60
- sx: {
61
- alignSelf: "flex-end"
62
- },
63
- onClick: /* @__PURE__ */__name(() => {
64
- clearNotifications();
65
- }, "onClick")
66
- }), /* @__PURE__ */React.createElement(NotificationsBox, {
67
- notifications: modalNotifications
68
- }));
69
- }, "NotificationsModal");
70
-
71
- // src/Provider.tsx
72
- var NotificationsContext = /* @__PURE__ */React2.createContext({
73
- isLoading: false,
74
- setLoading: /* @__PURE__ */__name(() => {
75
- return void 0;
76
- }, "setLoading"),
77
- defaultViewType: "box",
78
- addNotification: /* @__PURE__ */__name(() => {
79
- return void 0;
80
- }, "addNotification"),
81
- removeNotification: /* @__PURE__ */__name(() => {
82
- return void 0;
83
- }, "removeNotification"),
84
- clearNotifications: /* @__PURE__ */__name(() => {
85
- return void 0;
86
- }, "clearNotifications")
87
- });
88
- var NotificationsProvider = /* @__PURE__ */__name(props => {
89
- const [isLoading, setLoading] = React2.useState(false);
90
- const [notifications, setNotifications] = React2.useState();
91
- const prefix = React2.useId();
92
- const removeNotification = React2.useCallback(id => {
93
- setNotifications(prevNotifications => {
94
- return prevNotifications?.filter(notification => {
95
- return notification.id !== id;
96
- });
97
- });
98
- }, []);
99
- const addNotification = React2.useCallback(notification => {
100
- const newNotifications = (Array.isArray(notification) ? notification : [notification]).map(notification2 => {
101
- const id = notification2.id || `${prefix}-${Math.random()}`;
102
- return {
103
- ...notification2,
104
- id
105
- };
106
- }).filter((notification2, index, notifications2) => {
107
- return notifications2.findIndex(n => {
108
- return n.id === notification2.id;
109
- }) === index;
110
- });
111
- const toastNotifications = newNotifications.filter(notification2 => {
112
- if (notification2.viewType === "toast") {
113
- return true;
114
- }
115
- if (!notification2.viewType && props.defaultViewType === "toast") {
116
- return true;
117
- }
118
- return false;
119
- });
120
- toastNotifications.forEach(notification2 => {
121
- toast(notification2.message, {
122
- ...notification2.toast,
123
- type: notification2.type,
124
- onClose: /* @__PURE__ */__name(() => {
125
- removeNotification(notification2.id);
126
- notification2.toast?.onClose?.();
127
- }, "onClose")
128
- });
129
- });
130
- setNotifications((prevNotifications = []) => {
131
- const nonToastNewNotifications = newNotifications.filter(notification2 => {
132
- if (notification2.viewType === "toast") {
133
- return false;
134
- }
135
- if (!notification2.viewType && props.defaultViewType === "toast") {
136
- return false;
137
- }
138
- return true;
139
- });
140
- const oldNotifications = prevNotifications.filter(prevNotification => {
141
- return !nonToastNewNotifications.some(newNotification => {
142
- return newNotification.id === prevNotification.id;
143
- });
144
- });
145
- return [...oldNotifications, ...nonToastNewNotifications];
146
- });
147
- }, [prefix, props.defaultViewType, removeNotification]);
148
- const clearNotifications = React2.useCallback(() => {
149
- setNotifications(prevNotifications => {
150
- return prevNotifications?.filter(notification => {
151
- return notification.persist === true;
152
- });
153
- });
154
- }, []);
155
- return /* @__PURE__ */React2.createElement(NotificationsContext.Provider, {
156
- value: {
157
- isLoading,
158
- setLoading,
159
- notifications,
160
- addNotification,
161
- removeNotification,
162
- clearNotifications,
163
- defaultViewType: props.defaultViewType || "box"
164
- }
165
- }, /* @__PURE__ */React2.createElement(ToastContainer, props.toast), /* @__PURE__ */React2.createElement(NotificationsModal, null), isLoading && /* @__PURE__ */React2.createElement(Flex, {
166
- sx: {
167
- position: "absolute",
168
- width: "100%",
169
- top: 0
170
- }
171
- }, /* @__PURE__ */React2.createElement(InfiniteLinearProgress, null)), /* @__PURE__ */React2.createElement(NotificationsHeader, null), props.children);
172
- }, "NotificationsProvider");
173
- var useNotifications = /* @__PURE__ */__name(() => {
174
- return React2.useContext(NotificationsContext);
175
- }, "useNotifications");
176
-
177
- // src/NotificationsBox.tsx
178
- var NotificationsBox = /* @__PURE__ */__name(props => {
179
- const {
180
- notifications,
181
- removeNotification,
182
- defaultViewType
183
- } = useNotifications();
184
- const boxNotifications = props.notifications || notifications?.filter(notification => {
185
- if (notification.viewType !== "box" && defaultViewType !== "box") {
186
- return false;
187
- }
188
- if (!props.id && notification.boxId) {
189
- return false;
190
- }
191
- if (!props.id && !notification.boxId) {
192
- return true;
193
- }
194
- return notification.boxId === props.id;
195
- });
196
- const hasBoxNotifications = Array.isArray(boxNotifications);
197
- if (!hasBoxNotifications) {
198
- return null;
199
- }
200
- return /* @__PURE__ */React.createElement(Stack, {
201
- sx: {
202
- width: "full",
203
- gap: "1"
204
- }
205
- }, boxNotifications.map(notification => {
206
- return /* @__PURE__ */React.createElement(NotificationCard, {
207
- key: notification.id,
208
- type: notification.type,
209
- title: notification.title,
210
- message: notification.message,
211
- onClose: /* @__PURE__ */__name(() => {
212
- if (notification.id) {
213
- removeNotification(notification.id);
214
- }
215
- }, "onClose")
216
- });
217
- }));
218
- }, "NotificationsBox");
219
- export { NotificationsBox, NotificationsProvider, toast, useNotifications };
package/dist/index.d.ts DELETED
@@ -1,38 +0,0 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ToastOptions, ToastContainerProps } from '@ttoss/components/Toast';
3
- export { toast } from '@ttoss/components/Toast';
4
- import * as React from 'react';
5
-
6
- type ViewType = 'toast' | 'modal' | 'box' | 'header';
7
- type Notification = {
8
- id?: string | number;
9
- title?: string;
10
- message: string;
11
- type: 'warning' | 'error' | 'info' | 'success';
12
- viewType?: ViewType;
13
- toast?: ToastOptions;
14
- boxId?: string | number;
15
- persist?: boolean;
16
- };
17
- type NotificationsProviderProps = {
18
- children: React.ReactNode;
19
- defaultViewType?: ViewType;
20
- toast?: ToastContainerProps;
21
- };
22
- declare const NotificationsProvider: (props: NotificationsProviderProps) => react_jsx_runtime.JSX.Element;
23
- declare const useNotifications: () => {
24
- isLoading: boolean;
25
- setLoading: (arg: boolean) => void;
26
- defaultViewType: ViewType;
27
- notifications?: Notification[];
28
- addNotification(notification: Notification | Notification[]): void;
29
- removeNotification(id: string | number): void;
30
- clearNotifications(): void;
31
- };
32
-
33
- declare const NotificationsBox: (props: {
34
- id?: string | number;
35
- notifications?: Notification[] | undefined;
36
- }) => react_jsx_runtime.JSX.Element | null;
37
-
38
- export { type Notification, NotificationsBox, NotificationsProvider, type NotificationsProviderProps, useNotifications };