@ttoss/components 2.2.20 → 2.2.21

package/dist/NotificationCard/index.d.ts

@@ -1,13 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
-type NotificationType = 'success' | 'error' | 'warning' | 'info';
-declare const NotificationCard: (props: {
+type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+type NotificationAction = {
+    action?: 'open_url';
+    url?: string;
+    label?: string;
+};
+type NotificationCardProps = {
     type: NotificationType;
     title?: string | React.ReactNode;
     message: string | React.ReactNode;
-    metaInfo?: string;
+    actions?: NotificationAction[];
+    caption?: string | React.ReactNode;
+    tags?: string[] | React.ReactNode;
     onClose?: () => void;
-}) => react_jsx_runtime.JSX.Element;
+};
+declare const NotificationCard: (props: NotificationCardProps) => react_jsx_runtime.JSX.Element;
 
-export { NotificationCard };
+export { type NotificationAction, NotificationCard, type NotificationCardProps };

package/dist/NotificationsMenu/index.d.ts

@@ -1,28 +1,20 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NotificationCardProps } from '../NotificationCard/index.js';
+import 'react';
 
-type Notification = {
+type Notification = NotificationCardProps & {
     id: string;
-    type: 'info' | 'success' | 'warning' | 'error';
-    title: string;
-    message: string;
-    actions?: {
-        action?: 'open_url';
-        url?: string;
-        label?: string;
-    }[];
-    createdAt: string;
-    readAt?: string | null;
-    onClose?: () => void;
+    group?: string;
 };
 type Props = {
     notifications: Notification[];
     defaultOpen?: boolean;
     hasMore?: boolean;
+    count: number;
     onLoadMore?: () => void;
     onOpenChange?: (isOpen: boolean) => void;
-    unreadCount?: number;
     onClose?: () => void;
 };
-declare const NotificationsMenu: ({ notifications, defaultOpen, hasMore, onLoadMore, onOpenChange, unreadCount, onClose, }: Props) => react_jsx_runtime.JSX.Element;
+declare const NotificationsMenu: ({ notifications, defaultOpen, hasMore, onLoadMore, onOpenChange, count, onClose, }: Props) => react_jsx_runtime.JSX.Element;
 
 export { type Notification, NotificationsMenu };

package/dist/esm/NotificationCard/index.js

@@ -1,3 +1,3 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { NotificationCard } from "../chunk-5OYT3X4J.js";
+import { NotificationCard } from "../chunk-J6UYHJA7.js";
 export { NotificationCard };

package/dist/esm/NotificationsMenu/index.js

@@ -1,43 +1,17 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Icon, NotificationCard } from "../chunk-5OYT3X4J.js";
+import { Icon, NotificationCard } from "../chunk-J6UYHJA7.js";
 
 // src/components/NotificationsMenu/NotificationsMenu.tsx
-import { Box, Card, Flex, IconButton, Link, Text } from "@ttoss/ui";
+import { Box, Card, Flex, IconButton, Text } from "@ttoss/ui";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var renderMessage = (message, actions) => {
-  if (!actions || actions.length === 0) return message;
-  return /* @__PURE__ */jsxs(Flex, {
-    sx: {
-      flexDirection: "column",
-      gap: 2
-    },
-    children: [/* @__PURE__ */jsx(Text, {
-      children: message
-    }), actions.map((action, index) => {
-      if (action.action === "open_url") {
-        return /* @__PURE__ */jsx(Link, {
-          href: action.url,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          sx: {
-            color: "action.text.accent.default",
-            cursor: "pointer"
-          },
-          children: action.label || "Acessar"
-        }, index);
-      }
-      return null;
-    })]
-  });
-};
 var NotificationsMenu = ({
   notifications,
   defaultOpen = false,
   hasMore = false,
   onLoadMore,
   onOpenChange,
-  unreadCount,
+  count,
   onClose
 }) => {
   const [isOpen, setIsOpen] = React.useState(defaultOpen);
@@ -45,6 +19,7 @@ var NotificationsMenu = ({
   const buttonRef = React.useRef(null);
   const containerRef = React.useRef(null);
   const loadMoreRef = React.useRef(null);
+  const [showCount, setShowCount] = React.useState(true);
   const togglePanel = () => {
     setIsOpen(prev => {
       const next = !prev;
@@ -52,18 +27,13 @@ var NotificationsMenu = ({
       return next;
     });
   };
-  const unread = unreadCount ?? notifications.filter(n => {
-    if (defaultOpen) {
-      return 0;
-    }
-    return n.readAt === null;
-  }).length;
   React.useEffect(() => {
     if (!isOpen || !buttonRef.current) return;
     const rect = buttonRef.current.getBoundingClientRect();
     const spaceRight = window.innerWidth - rect.right;
     const spaceLeft = rect.left;
-    setOpenToLeft(spaceRight < 400 && spaceLeft > spaceRight);
+    setShowCount(false);
+    setOpenToLeft(spaceRight < 500 && spaceLeft > spaceRight);
   }, [isOpen]);
   React.useEffect(() => {
     if (!hasMore || !onLoadMore || !loadMoreRef.current) return;
@@ -128,7 +98,7 @@ var NotificationsMenu = ({
             width: 22,
             height: 22
           })
-        }), unread > 0 && /* @__PURE__ */jsx(Box, {
+        }), count > 0 && showCount && /* @__PURE__ */jsx(Box, {
           sx: {
             position: "absolute",
             top: "-2px",
@@ -146,7 +116,7 @@ var NotificationsMenu = ({
             justifyContent: "center",
             lineHeight: 1
           },
-          children: unread > 99 ? "99+" : unread
+          children: count > 99 ? "99+" : count
         })]
       }), isOpen && /* @__PURE__ */jsx(Card, {
         sx: {
@@ -154,7 +124,7 @@ var NotificationsMenu = ({
           top: "calc(100% + 8px)",
           left: openToLeft ? "auto" : 0,
           right: openToLeft ? 0 : "auto",
-          width: ["90vw", "400px"],
+          width: ["90vw", "500px"],
           maxHeight: "400px",
           overflowY: "auto",
           zIndex: 10,
@@ -165,25 +135,28 @@ var NotificationsMenu = ({
         },
         children: /* @__PURE__ */jsx(Box, {
           ref: containerRef,
+          sx: {
+            width: "100%"
+          },
           children: /* @__PURE__ */jsxs(Flex, {
             sx: {
               flexDirection: "column",
               gap: 2
             },
-            children: [notifications.length === 0 && /* @__PURE__ */jsx(Text, {
+            children: [notifications.length === 0 ? /* @__PURE__ */jsx(Text, {
               sx: {
                 color: "display.text.muted.default",
                 textAlign: "center",
                 p: 4
               },
               children: "Nenhuma notifica\xE7\xE3o"
-            }), notifications.map(notification => {
+            }) : notifications.map(notification => {
               return /* @__PURE__ */jsx(NotificationCard, {
-                type: notification.type,
-                title: notification.title,
-                message: renderMessage(notification.message, notification.actions),
-                onClose: notification.onClose || onClose,
-                metaInfo: notification.createdAt
+                ...notification,
+                onClose: () => {
+                  notification.onClose?.();
+                  onClose?.();
+                }
               }, notification.id);
             }), hasMore && /* @__PURE__ */jsx("div", {
               ref: loadMoreRef,

package/dist/esm/{chunk-5OYT3X4J.js → chunk-J6UYHJA7.js}

@@ -2257,7 +2257,7 @@ var Icon2 = React2.forwardRef((props, ref) => {
 Icon2.displayName = "Icon";
 
 // src/components/NotificationCard/NotificationCard.tsx
-import { Box, Card, CloseButton, Text } from "@ttoss/ui";
+import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var NotificationCard = props => {
   const sxMap = {
@@ -2284,13 +2284,20 @@ var NotificationCard = props => {
         backgroundColor: "feedback.background.primary.default",
         borderColor: "feedback.border.primary.default"
       }
+    },
+    neutral: {
+      card: {
+        backgroundColor: "feedback.background.primary.default",
+        borderColor: "feedback.border.primary.default"
+      }
     }
   };
   const icon = {
     success: "success-circle",
     error: "error",
     warning: "warning-alt",
-    info: "info"
+    info: "info",
+    neutral: "info"
   };
   return /* @__PURE__ */jsxs(Card, {
     sx: {
@@ -2312,7 +2319,9 @@ var NotificationCard = props => {
         },
         children: [/* @__PURE__ */jsx2(Icon2, {
           icon: icon[props.type]
-        }), props.title]
+        }), props.title, props.tags && /* @__PURE__ */jsx2(Tag, {
+          children: props.tags
+        })]
       }), props.onClose && /* @__PURE__ */jsx2(Box, {
         sx: {
           marginLeft: "auto"
@@ -2342,17 +2351,36 @@ var NotificationCard = props => {
           },
           children: props.message
         })
+      }), props.actions && props.actions.length > 0 && /* @__PURE__ */jsx2(Box, {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          mt: 2
+        },
+        children: props.actions.map((action, index) => {
+          return action.action === "open_url" ? /* @__PURE__ */jsx2(Link, {
+            href: action.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            sx: {
+              color: "action.text.accent.default",
+              cursor: "pointer"
+            },
+            children: action.label || "Acessar"
+          }, index) : null;
+        })
       }), /* @__PURE__ */jsx2(Box, {
         sx: {
           whiteSpace: "nowrap",
           mt: 6
         },
-        children: props.metaInfo && /* @__PURE__ */jsx2(Text, {
+        children: props.caption && /* @__PURE__ */jsx2(Text, {
           sx: {
             fontSize: "xs",
             color: "text.secondary"
           },
-          children: props.metaInfo
+          children: props.caption
         })
       }), !props.title && props.onClose && /* @__PURE__ */jsx2(Box, {
         sx: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.2.20",
+  "version": "2.2.21",
   "description": "React components for ttoss ecosystem.",
   "license": "MIT",
   "author": "ttoss",
@@ -98,7 +98,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/react-hooks": "^2.0.11",
-    "@ttoss/ui": "^5.8.0"
+    "@ttoss/ui": "^5.8.1"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",
@@ -107,11 +107,11 @@
     "react": "^19.0.0",
     "tsup": "^8.3.5",
     "tsx": "^4.19.2",
-    "@ttoss/react-icons": "^0.4.11",
     "@ttoss/config": "^1.35.3",
+    "@ttoss/react-hooks": "^2.0.11",
     "@ttoss/test-utils": "^2.1.23",
-    "@ttoss/ui": "^5.8.0",
-    "@ttoss/react-hooks": "^2.0.11"
+    "@ttoss/react-icons": "^0.4.11",
+    "@ttoss/ui": "^5.8.1"
   },
   "keywords": [
     "React",