@ttoss/components 2.2.18 → 2.2.20

package/dist/NotificationsMenu/index.d.ts

@@ -11,6 +11,8 @@ type Notification = {
         label?: string;
     }[];
     createdAt: string;
+    readAt?: string | null;
+    onClose?: () => void;
 };
 type Props = {
     notifications: Notification[];

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-ERHWYNDS.js";
+import { NotificationCard } from "../chunk-5OYT3X4J.js";
 export { NotificationCard };

package/dist/esm/NotificationsMenu/index.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Icon, NotificationCard } from "../chunk-ERHWYNDS.js";
+import { Icon, NotificationCard } from "../chunk-5OYT3X4J.js";
 
 // src/components/NotificationsMenu/NotificationsMenu.tsx
 import { Box, Card, Flex, IconButton, Link, Text } from "@ttoss/ui";
@@ -45,7 +45,6 @@ var NotificationsMenu = ({
   const buttonRef = React.useRef(null);
   const containerRef = React.useRef(null);
   const loadMoreRef = React.useRef(null);
-  const unread = unreadCount ?? notifications.length;
   const togglePanel = () => {
     setIsOpen(prev => {
       const next = !prev;
@@ -53,6 +52,12 @@ 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();
@@ -78,6 +83,20 @@ var NotificationsMenu = ({
       }
     };
   }, [hasMore, onLoadMore, notifications.length]);
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = event => {
+      if (containerRef.current && !containerRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
+        setIsOpen(false);
+        onOpenChange?.(false);
+        onClose?.();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onOpenChange, onClose]);
   return /* @__PURE__ */jsx(Flex, {
     sx: {
       position: "relative",
@@ -93,29 +112,34 @@ var NotificationsMenu = ({
         sx: {
           position: "relative",
           borderRadius: "full",
-          padding: 2,
+          padding: 1,
           transition: "background-color 0.3s ease",
           "&:hover": {
             backgroundColor: "action.background.muted.default"
           }
         },
         onClick: togglePanel,
-        children: [/* @__PURE__ */jsx(Icon, {
-          icon: "mdi:bell-outline",
-          width: 25,
-          height: 25
+        children: [/* @__PURE__ */jsx(Box, {
+          sx: {
+            color: "display.text.muted.default"
+          },
+          children: /* @__PURE__ */jsx(Icon, {
+            icon: "mdi:bell-outline",
+            width: 22,
+            height: 22
+          })
         }), unread > 0 && /* @__PURE__ */jsx(Box, {
           sx: {
             position: "absolute",
-            top: "-4px",
-            right: "-4px",
-            minWidth: "16px",
-            height: "16px",
+            top: "-2px",
+            right: "-2px",
+            minWidth: "14px",
+            height: "14px",
             paddingX: 1,
             borderRadius: "full",
             backgroundColor: "action.background.negative.default",
             color: "feedback.text.primary.default",
-            fontSize: "xs",
+            fontSize: "10px",
             fontWeight: "bold",
             display: "flex",
             alignItems: "center",
@@ -143,7 +167,8 @@ var NotificationsMenu = ({
           ref: containerRef,
           children: /* @__PURE__ */jsxs(Flex, {
             sx: {
-              flexDirection: "column"
+              flexDirection: "column",
+              gap: 2
             },
             children: [notifications.length === 0 && /* @__PURE__ */jsx(Text, {
               sx: {
@@ -157,7 +182,7 @@ var NotificationsMenu = ({
                 type: notification.type,
                 title: notification.title,
                 message: renderMessage(notification.message, notification.actions),
-                onClose,
+                onClose: notification.onClose || onClose,
                 metaInfo: notification.createdAt
               }, notification.id);
             }), hasMore && /* @__PURE__ */jsx("div", {

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

@@ -2313,8 +2313,13 @@ var NotificationCard = props => {
         children: [/* @__PURE__ */jsx2(Icon2, {
           icon: icon[props.type]
         }), props.title]
-      }), props.onClose && /* @__PURE__ */jsx2(CloseButton, {
-        onClick: props.onClose
+      }), props.onClose && /* @__PURE__ */jsx2(Box, {
+        sx: {
+          marginLeft: "auto"
+        },
+        children: /* @__PURE__ */jsx2(CloseButton, {
+          onClick: props.onClose
+        })
       })]
     }), /* @__PURE__ */jsxs(Card.Body, {
       sx: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.2.18",
+  "version": "2.2.20",
   "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.7.0"
+    "@ttoss/ui": "^5.8.0"
   },
   "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.7.0",
-    "@ttoss/react-icons": "^0.4.11"
+    "@ttoss/ui": "^5.8.0",
+    "@ttoss/react-hooks": "^2.0.11"
   },
   "keywords": [
     "React",