@ttoss/components 2.2.20 → 2.2.22
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/NotificationCard/index.d.ts +13 -5
- package/dist/NotificationsMenu/index.d.ts +6 -14
- package/dist/esm/Menu/index.js +2 -2
- package/dist/esm/NotificationCard/index.js +1 -1
- package/dist/esm/NotificationsMenu/index.js +19 -46
- package/dist/esm/{chunk-5OYT3X4J.js → chunk-ZLUIOHK3.js} +35 -7
- package/package.json +13 -13
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
|
|
4
|
-
type NotificationType = 'success' | 'error' | 'warning' | 'info';
|
|
5
|
-
|
|
4
|
+
type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
|
|
5
|
+
type NotificationAction = {
|
|
6
|
+
action?: 'open_url';
|
|
7
|
+
url?: string;
|
|
8
|
+
label?: string;
|
|
9
|
+
};
|
|
10
|
+
type NotificationCardProps = {
|
|
6
11
|
type: NotificationType;
|
|
7
12
|
title?: string | React.ReactNode;
|
|
8
13
|
message: string | React.ReactNode;
|
|
9
|
-
|
|
14
|
+
actions?: NotificationAction[];
|
|
15
|
+
caption?: string | React.ReactNode;
|
|
16
|
+
tags?: string[] | React.ReactNode;
|
|
10
17
|
onClose?: () => void;
|
|
11
|
-
}
|
|
18
|
+
};
|
|
19
|
+
declare const NotificationCard: (props: NotificationCardProps) => react_jsx_runtime.JSX.Element;
|
|
12
20
|
|
|
13
|
-
export { NotificationCard };
|
|
21
|
+
export { type NotificationAction, NotificationCard, type NotificationCardProps };
|
|
@@ -1,28 +1,20 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { NotificationCardProps } from '../NotificationCard/index.js';
|
|
3
|
+
import 'react';
|
|
2
4
|
|
|
3
|
-
type Notification = {
|
|
5
|
+
type Notification = NotificationCardProps & {
|
|
4
6
|
id: string;
|
|
5
|
-
|
|
6
|
-
title: string;
|
|
7
|
-
message: string;
|
|
8
|
-
actions?: {
|
|
9
|
-
action?: 'open_url';
|
|
10
|
-
url?: string;
|
|
11
|
-
label?: string;
|
|
12
|
-
}[];
|
|
13
|
-
createdAt: string;
|
|
14
|
-
readAt?: string | null;
|
|
15
|
-
onClose?: () => void;
|
|
7
|
+
group?: string;
|
|
16
8
|
};
|
|
17
9
|
type Props = {
|
|
18
10
|
notifications: Notification[];
|
|
19
11
|
defaultOpen?: boolean;
|
|
20
12
|
hasMore?: boolean;
|
|
13
|
+
count: number;
|
|
21
14
|
onLoadMore?: () => void;
|
|
22
15
|
onOpenChange?: (isOpen: boolean) => void;
|
|
23
|
-
unreadCount?: number;
|
|
24
16
|
onClose?: () => void;
|
|
25
17
|
};
|
|
26
|
-
declare const NotificationsMenu: ({ notifications, defaultOpen, hasMore, onLoadMore, onOpenChange,
|
|
18
|
+
declare const NotificationsMenu: ({ notifications, defaultOpen, hasMore, onLoadMore, onOpenChange, count, onClose, }: Props) => react_jsx_runtime.JSX.Element;
|
|
27
19
|
|
|
28
20
|
export { type Notification, NotificationsMenu };
|
package/dist/esm/Menu/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
2
|
|
|
3
|
-
// ../../node_modules/.pnpm/@iconify-icon+react@2.2.0_react@19.
|
|
3
|
+
// ../../node_modules/.pnpm/@iconify-icon+react@2.2.0_react@19.1.0/node_modules/@iconify-icon/react/dist/iconify.mjs
|
|
4
4
|
import React from "react";
|
|
5
5
|
|
|
6
6
|
// ../../node_modules/.pnpm/iconify-icon@2.2.0/node_modules/iconify-icon/dist/iconify-icon.mjs
|
|
@@ -2226,7 +2226,7 @@ var {
|
|
|
2226
2226
|
_api
|
|
2227
2227
|
} = IconifyIconComponent;
|
|
2228
2228
|
|
|
2229
|
-
// ../../node_modules/.pnpm/@iconify-icon+react@2.2.0_react@19.
|
|
2229
|
+
// ../../node_modules/.pnpm/@iconify-icon+react@2.2.0_react@19.1.0/node_modules/@iconify-icon/react/dist/iconify.mjs
|
|
2230
2230
|
var Icon = React.forwardRef((props, ref) => {
|
|
2231
2231
|
const newProps = {
|
|
2232
2232
|
...props,
|
|
@@ -1,43 +1,17 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { Icon, NotificationCard } from "../chunk-
|
|
2
|
+
import { Icon, NotificationCard } from "../chunk-ZLUIOHK3.js";
|
|
3
3
|
|
|
4
4
|
// src/components/NotificationsMenu/NotificationsMenu.tsx
|
|
5
|
-
import { Box, Card, Flex, IconButton,
|
|
5
|
+
import { Box, Card, Flex, IconButton, Text } from "@ttoss/ui";
|
|
6
6
|
import * as React from "react";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
var renderMessage = (message, actions) => {
|
|
9
|
-
if (!actions || actions.length === 0) return message;
|
|
10
|
-
return /* @__PURE__ */jsxs(Flex, {
|
|
11
|
-
sx: {
|
|
12
|
-
flexDirection: "column",
|
|
13
|
-
gap: 2
|
|
14
|
-
},
|
|
15
|
-
children: [/* @__PURE__ */jsx(Text, {
|
|
16
|
-
children: message
|
|
17
|
-
}), actions.map((action, index) => {
|
|
18
|
-
if (action.action === "open_url") {
|
|
19
|
-
return /* @__PURE__ */jsx(Link, {
|
|
20
|
-
href: action.url,
|
|
21
|
-
target: "_blank",
|
|
22
|
-
rel: "noopener noreferrer",
|
|
23
|
-
sx: {
|
|
24
|
-
color: "action.text.accent.default",
|
|
25
|
-
cursor: "pointer"
|
|
26
|
-
},
|
|
27
|
-
children: action.label || "Acessar"
|
|
28
|
-
}, index);
|
|
29
|
-
}
|
|
30
|
-
return null;
|
|
31
|
-
})]
|
|
32
|
-
});
|
|
33
|
-
};
|
|
34
8
|
var NotificationsMenu = ({
|
|
35
9
|
notifications,
|
|
36
10
|
defaultOpen = false,
|
|
37
11
|
hasMore = false,
|
|
38
12
|
onLoadMore,
|
|
39
13
|
onOpenChange,
|
|
40
|
-
|
|
14
|
+
count,
|
|
41
15
|
onClose
|
|
42
16
|
}) => {
|
|
43
17
|
const [isOpen, setIsOpen] = React.useState(defaultOpen);
|
|
@@ -45,6 +19,7 @@ var NotificationsMenu = ({
|
|
|
45
19
|
const buttonRef = React.useRef(null);
|
|
46
20
|
const containerRef = React.useRef(null);
|
|
47
21
|
const loadMoreRef = React.useRef(null);
|
|
22
|
+
const [showCount, setShowCount] = React.useState(true);
|
|
48
23
|
const togglePanel = () => {
|
|
49
24
|
setIsOpen(prev => {
|
|
50
25
|
const next = !prev;
|
|
@@ -52,18 +27,13 @@ var NotificationsMenu = ({
|
|
|
52
27
|
return next;
|
|
53
28
|
});
|
|
54
29
|
};
|
|
55
|
-
const unread = unreadCount ?? notifications.filter(n => {
|
|
56
|
-
if (defaultOpen) {
|
|
57
|
-
return 0;
|
|
58
|
-
}
|
|
59
|
-
return n.readAt === null;
|
|
60
|
-
}).length;
|
|
61
30
|
React.useEffect(() => {
|
|
62
31
|
if (!isOpen || !buttonRef.current) return;
|
|
63
32
|
const rect = buttonRef.current.getBoundingClientRect();
|
|
64
33
|
const spaceRight = window.innerWidth - rect.right;
|
|
65
34
|
const spaceLeft = rect.left;
|
|
66
|
-
|
|
35
|
+
setShowCount(false);
|
|
36
|
+
setOpenToLeft(spaceRight < 500 && spaceLeft > spaceRight);
|
|
67
37
|
}, [isOpen]);
|
|
68
38
|
React.useEffect(() => {
|
|
69
39
|
if (!hasMore || !onLoadMore || !loadMoreRef.current) return;
|
|
@@ -128,7 +98,7 @@ var NotificationsMenu = ({
|
|
|
128
98
|
width: 22,
|
|
129
99
|
height: 22
|
|
130
100
|
})
|
|
131
|
-
}),
|
|
101
|
+
}), count > 0 && showCount && /* @__PURE__ */jsx(Box, {
|
|
132
102
|
sx: {
|
|
133
103
|
position: "absolute",
|
|
134
104
|
top: "-2px",
|
|
@@ -146,7 +116,7 @@ var NotificationsMenu = ({
|
|
|
146
116
|
justifyContent: "center",
|
|
147
117
|
lineHeight: 1
|
|
148
118
|
},
|
|
149
|
-
children:
|
|
119
|
+
children: count > 99 ? "99+" : count
|
|
150
120
|
})]
|
|
151
121
|
}), isOpen && /* @__PURE__ */jsx(Card, {
|
|
152
122
|
sx: {
|
|
@@ -154,7 +124,7 @@ var NotificationsMenu = ({
|
|
|
154
124
|
top: "calc(100% + 8px)",
|
|
155
125
|
left: openToLeft ? "auto" : 0,
|
|
156
126
|
right: openToLeft ? 0 : "auto",
|
|
157
|
-
width: ["90vw", "
|
|
127
|
+
width: ["90vw", "500px"],
|
|
158
128
|
maxHeight: "400px",
|
|
159
129
|
overflowY: "auto",
|
|
160
130
|
zIndex: 10,
|
|
@@ -165,25 +135,28 @@ var NotificationsMenu = ({
|
|
|
165
135
|
},
|
|
166
136
|
children: /* @__PURE__ */jsx(Box, {
|
|
167
137
|
ref: containerRef,
|
|
138
|
+
sx: {
|
|
139
|
+
width: "100%"
|
|
140
|
+
},
|
|
168
141
|
children: /* @__PURE__ */jsxs(Flex, {
|
|
169
142
|
sx: {
|
|
170
143
|
flexDirection: "column",
|
|
171
144
|
gap: 2
|
|
172
145
|
},
|
|
173
|
-
children: [notifications.length === 0
|
|
146
|
+
children: [notifications.length === 0 ? /* @__PURE__ */jsx(Text, {
|
|
174
147
|
sx: {
|
|
175
148
|
color: "display.text.muted.default",
|
|
176
149
|
textAlign: "center",
|
|
177
150
|
p: 4
|
|
178
151
|
},
|
|
179
152
|
children: "Nenhuma notifica\xE7\xE3o"
|
|
180
|
-
})
|
|
153
|
+
}) : notifications.map(notification => {
|
|
181
154
|
return /* @__PURE__ */jsx(NotificationCard, {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
155
|
+
...notification,
|
|
156
|
+
onClose: () => {
|
|
157
|
+
notification.onClose?.();
|
|
158
|
+
onClose?.();
|
|
159
|
+
}
|
|
187
160
|
}, notification.id);
|
|
188
161
|
}), hasMore && /* @__PURE__ */jsx("div", {
|
|
189
162
|
ref: loadMoreRef,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
2
|
|
|
3
|
-
// ../../node_modules/.pnpm/@iconify-icon+react@2.2.0_react@19.
|
|
3
|
+
// ../../node_modules/.pnpm/@iconify-icon+react@2.2.0_react@19.1.0/node_modules/@iconify-icon/react/dist/iconify.mjs
|
|
4
4
|
import React from "react";
|
|
5
5
|
|
|
6
6
|
// ../../node_modules/.pnpm/iconify-icon@2.2.0/node_modules/iconify-icon/dist/iconify-icon.mjs
|
|
@@ -2226,7 +2226,7 @@ var {
|
|
|
2226
2226
|
_api
|
|
2227
2227
|
} = IconifyIconComponent;
|
|
2228
2228
|
|
|
2229
|
-
// ../../node_modules/.pnpm/@iconify-icon+react@2.2.0_react@19.
|
|
2229
|
+
// ../../node_modules/.pnpm/@iconify-icon+react@2.2.0_react@19.1.0/node_modules/@iconify-icon/react/dist/iconify.mjs
|
|
2230
2230
|
var Icon = React.forwardRef((props, ref) => {
|
|
2231
2231
|
const newProps = {
|
|
2232
2232
|
...props,
|
|
@@ -2257,7 +2257,7 @@ var Icon2 = React2.forwardRef((props, ref) => {
|
|
|
2257
2257
|
Icon2.displayName = "Icon";
|
|
2258
2258
|
|
|
2259
2259
|
// src/components/NotificationCard/NotificationCard.tsx
|
|
2260
|
-
import { Box, Card, CloseButton, Text } from "@ttoss/ui";
|
|
2260
|
+
import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
|
|
2261
2261
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
2262
2262
|
var NotificationCard = props => {
|
|
2263
2263
|
const sxMap = {
|
|
@@ -2284,13 +2284,20 @@ var NotificationCard = props => {
|
|
|
2284
2284
|
backgroundColor: "feedback.background.primary.default",
|
|
2285
2285
|
borderColor: "feedback.border.primary.default"
|
|
2286
2286
|
}
|
|
2287
|
+
},
|
|
2288
|
+
neutral: {
|
|
2289
|
+
card: {
|
|
2290
|
+
backgroundColor: "feedback.background.primary.default",
|
|
2291
|
+
borderColor: "feedback.border.primary.default"
|
|
2292
|
+
}
|
|
2287
2293
|
}
|
|
2288
2294
|
};
|
|
2289
2295
|
const icon = {
|
|
2290
2296
|
success: "success-circle",
|
|
2291
2297
|
error: "error",
|
|
2292
2298
|
warning: "warning-alt",
|
|
2293
|
-
info: "info"
|
|
2299
|
+
info: "info",
|
|
2300
|
+
neutral: "info"
|
|
2294
2301
|
};
|
|
2295
2302
|
return /* @__PURE__ */jsxs(Card, {
|
|
2296
2303
|
sx: {
|
|
@@ -2312,7 +2319,9 @@ var NotificationCard = props => {
|
|
|
2312
2319
|
},
|
|
2313
2320
|
children: [/* @__PURE__ */jsx2(Icon2, {
|
|
2314
2321
|
icon: icon[props.type]
|
|
2315
|
-
}), props.title
|
|
2322
|
+
}), props.title, props.tags && /* @__PURE__ */jsx2(Tag, {
|
|
2323
|
+
children: props.tags
|
|
2324
|
+
})]
|
|
2316
2325
|
}), props.onClose && /* @__PURE__ */jsx2(Box, {
|
|
2317
2326
|
sx: {
|
|
2318
2327
|
marginLeft: "auto"
|
|
@@ -2342,17 +2351,36 @@ var NotificationCard = props => {
|
|
|
2342
2351
|
},
|
|
2343
2352
|
children: props.message
|
|
2344
2353
|
})
|
|
2354
|
+
}), props.actions && props.actions.length > 0 && /* @__PURE__ */jsx2(Box, {
|
|
2355
|
+
sx: {
|
|
2356
|
+
display: "flex",
|
|
2357
|
+
flexDirection: "column",
|
|
2358
|
+
gap: 2,
|
|
2359
|
+
mt: 2
|
|
2360
|
+
},
|
|
2361
|
+
children: props.actions.map((action, index) => {
|
|
2362
|
+
return action.action === "open_url" ? /* @__PURE__ */jsx2(Link, {
|
|
2363
|
+
href: action.url,
|
|
2364
|
+
target: "_blank",
|
|
2365
|
+
rel: "noopener noreferrer",
|
|
2366
|
+
sx: {
|
|
2367
|
+
color: "action.text.accent.default",
|
|
2368
|
+
cursor: "pointer"
|
|
2369
|
+
},
|
|
2370
|
+
children: action.label || "Acessar"
|
|
2371
|
+
}, index) : null;
|
|
2372
|
+
})
|
|
2345
2373
|
}), /* @__PURE__ */jsx2(Box, {
|
|
2346
2374
|
sx: {
|
|
2347
2375
|
whiteSpace: "nowrap",
|
|
2348
2376
|
mt: 6
|
|
2349
2377
|
},
|
|
2350
|
-
children: props.
|
|
2378
|
+
children: props.caption && /* @__PURE__ */jsx2(Text, {
|
|
2351
2379
|
sx: {
|
|
2352
2380
|
fontSize: "xs",
|
|
2353
2381
|
color: "text.secondary"
|
|
2354
2382
|
},
|
|
2355
|
-
children: props.
|
|
2383
|
+
children: props.caption
|
|
2356
2384
|
})
|
|
2357
2385
|
}), !props.title && props.onClose && /* @__PURE__ */jsx2(Box, {
|
|
2358
2386
|
sx: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttoss/components",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.22",
|
|
4
4
|
"description": "React components for ttoss ecosystem.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "ttoss",
|
|
@@ -97,21 +97,21 @@
|
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"react": ">=16.8.0",
|
|
100
|
-
"@ttoss/react-hooks": "^2.0.
|
|
101
|
-
"@ttoss/ui": "^5.8.
|
|
100
|
+
"@ttoss/react-hooks": "^2.0.12",
|
|
101
|
+
"@ttoss/ui": "^5.8.2"
|
|
102
102
|
},
|
|
103
103
|
"devDependencies": {
|
|
104
|
-
"@types/jest": "^
|
|
105
|
-
"@types/react": "^19.
|
|
106
|
-
"jest": "^
|
|
107
|
-
"react": "^19.
|
|
108
|
-
"tsup": "^8.
|
|
104
|
+
"@types/jest": "^30.0.0",
|
|
105
|
+
"@types/react": "^19.1.8",
|
|
106
|
+
"jest": "^30.0.2",
|
|
107
|
+
"react": "^19.1.0",
|
|
108
|
+
"tsup": "^8.5.0",
|
|
109
109
|
"tsx": "^4.19.2",
|
|
110
|
-
"@ttoss/
|
|
111
|
-
"@ttoss/
|
|
112
|
-
"@ttoss/
|
|
113
|
-
"@ttoss/
|
|
114
|
-
"@ttoss/
|
|
110
|
+
"@ttoss/config": "^1.35.4",
|
|
111
|
+
"@ttoss/react-hooks": "^2.0.12",
|
|
112
|
+
"@ttoss/react-icons": "^0.4.12",
|
|
113
|
+
"@ttoss/test-utils": "^2.1.24",
|
|
114
|
+
"@ttoss/ui": "^5.8.2"
|
|
115
115
|
},
|
|
116
116
|
"keywords": [
|
|
117
117
|
"React",
|