@ttoss/components 2.2.26 → 2.2.28

package/dist/NotificationsMenu/index.d.ts

@@ -14,7 +14,8 @@ type Props = {
     onLoadMore?: () => void;
     onOpenChange?: (isOpen: boolean) => void;
     onClose?: () => void;
+    onClearAll?: () => void;
 };
-declare const NotificationsMenu: ({ notifications, defaultOpen, hasMore, onLoadMore, onOpenChange, count, onClose, }: Props) => react_jsx_runtime.JSX.Element;
+declare const NotificationsMenu: ({ notifications, defaultOpen, hasMore, onLoadMore, onOpenChange, count, onClose, onClearAll, }: 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-QIWMC6WC.js";
+import { NotificationCard } from "../chunk-QNOMRVYN.js";
 export { NotificationCard };

package/dist/esm/NotificationsMenu/index.js

@@ -1,8 +1,8 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Icon, NotificationCard } from "../chunk-QIWMC6WC.js";
+import { Icon, NotificationCard } from "../chunk-QNOMRVYN.js";
 
 // src/components/NotificationsMenu/NotificationsMenu.tsx
-import { Box, Card, Flex, IconButton, Text } from "@ttoss/ui";
+import { Box, Button, Card, Flex, IconButton, Text } from "@ttoss/ui";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var NotificationsMenu = ({
@@ -12,7 +12,8 @@ var NotificationsMenu = ({
   onLoadMore,
   onOpenChange,
   count,
-  onClose
+  onClose,
+  onClearAll
 }) => {
   const [isOpen, setIsOpen] = React.useState(defaultOpen);
   const [openToLeft, setOpenToLeft] = React.useState(false);
@@ -118,52 +119,93 @@ var NotificationsMenu = ({
           },
           children: count > 99 ? "99+" : count
         })]
-      }), isOpen && /* @__PURE__ */jsx(Card, {
-        sx: {
-          position: "absolute",
-          top: "calc(100% + 8px)",
-          left: openToLeft ? "auto" : 0,
-          right: openToLeft ? 0 : "auto",
-          width: ["90vw", "500px"],
-          maxHeight: "400px",
-          overflowY: "auto",
-          zIndex: 10,
-          padding: 0,
-          boxShadow: "xl",
-          borderRadius: "2xl",
-          backgroundColor: "display.background.secondary.default"
-        },
-        children: /* @__PURE__ */jsx(Box, {
-          ref: containerRef,
+      }), isOpen && /* @__PURE__ */jsx("div", {
+        ref: containerRef,
+        children: /* @__PURE__ */jsx(Card, {
           sx: {
-            width: "100%"
+            position: "absolute",
+            top: "calc(100% + 8px)",
+            left: openToLeft ? "auto" : 0,
+            right: openToLeft ? 0 : "auto",
+            width: ["90vw", "550px"],
+            maxHeight: "400px",
+            overflowY: "auto",
+            zIndex: 10,
+            padding: 0,
+            boxShadow: "xl",
+            borderRadius: "2xl",
+            backgroundColor: "display.background.secondary.default"
           },
-          children: /* @__PURE__ */jsxs(Flex, {
+          children: /* @__PURE__ */jsx(Box, {
             sx: {
-              flexDirection: "column",
-              gap: 2
+              width: "100%"
             },
-            children: [notifications.length === 0 ? /* @__PURE__ */jsx(Text, {
+            children: /* @__PURE__ */jsxs(Flex, {
               sx: {
-                color: "display.text.muted.default",
-                textAlign: "center",
-                p: 4
+                flexDirection: "column",
+                gap: 4
               },
-              children: "Nenhuma notifica\xE7\xE3o"
-            }) : notifications.map(notification => {
-              return /* @__PURE__ */jsx(NotificationCard, {
-                ...notification,
-                onClose: () => {
-                  notification.onClose?.();
-                  onClose?.();
+              children: [notifications.length > 0 && onClearAll && /* @__PURE__ */jsx(Flex, {
+                sx: {
+                  justifyContent: "flex-end",
+                  p: 2,
+                  marginBottom: -2
+                },
+                children: /* @__PURE__ */jsxs(Button, {
+                  variant: "ghost",
+                  sx: {
+                    borderRadius: "md",
+                    padding: 1,
+                    paddingLeft: 10,
+                    paddingRight: 10,
+                    fontSize: "md",
+                    color: "display.text.muted.default",
+                    border: "1px solid",
+                    borderColor: "display.border.default",
+                    transition: "all 0.2s ease",
+                    display: "flex",
+                    alignItems: "center",
+                    "&:hover": {
+                      backgroundColor: "action.background.muted.default",
+                      color: "display.text.default",
+                      borderColor: "action.border.default"
+                    }
+                  },
+                  onClick: onClearAll,
+                  children: [/* @__PURE__ */jsx(Icon, {
+                    icon: "delete",
+                    width: 18,
+                    height: 18
+                  }), /* @__PURE__ */jsx(Text, {
+                    sx: {
+                      ml: -1,
+                      marginTop: -0.4
+                    },
+                    children: "Limpar Tudo"
+                  })]
+                })
+              }), notifications.length === 0 ? /* @__PURE__ */jsx(Text, {
+                sx: {
+                  color: "display.text.muted.default",
+                  textAlign: "center",
+                  p: 4
+                },
+                children: "Nenhuma notifica\xE7\xE3o"
+              }) : notifications.map(notification => {
+                return /* @__PURE__ */jsx(NotificationCard, {
+                  ...notification,
+                  onClose: () => {
+                    notification.onClose?.();
+                    onClose?.();
+                  }
+                }, notification.id);
+              }), hasMore && /* @__PURE__ */jsx("div", {
+                ref: loadMoreRef,
+                style: {
+                  height: 1
                 }
-              }, notification.id);
-            }), hasMore && /* @__PURE__ */jsx("div", {
-              ref: loadMoreRef,
-              style: {
-                height: 1
-              }
-            })]
+              })]
+            })
           })
         })
       })]

package/dist/esm/{chunk-QIWMC6WC.js → chunk-QNOMRVYN.js}

@@ -2109,6 +2109,11 @@ var NotificationCard = props => {
     info: "info",
     neutral: "info"
   };
+  const hasCaption = Boolean(props.caption);
+  const hasActions = Boolean(props.actions && props.actions.length > 0);
+  const hasTitle = Boolean(props.title);
+  const shouldCenterVertically = !hasCaption && !hasActions && !hasTitle;
+  const shouldAddMinHeight = !hasCaption && !hasActions;
   return /* @__PURE__ */jsxs(Card, {
     sx: {
       ...sxMap[props.type].card,
@@ -2151,13 +2156,17 @@ var NotificationCard = props => {
         sx: {
           display: "flex",
           justifyContent: "space-between",
-          alignItems: "flex-end",
+          alignItems: "flex-start",
           width: "100%",
           gap: "4"
         },
         children: /* @__PURE__ */jsx2(Box, {
           sx: {
-            flex: 1
+            flex: 1,
+            minHeight: shouldAddMinHeight ? "40px" : "auto",
+            display: "flex",
+            alignItems: shouldCenterVertically ? "center" : "flex-start",
+            textAlign: "left"
           },
           children: props.message
         })
@@ -2180,12 +2189,12 @@ var NotificationCard = props => {
             children: action.label || "Acessar"
           }, index) : null;
         })
-      }), /* @__PURE__ */jsx2(Box, {
+      }), props.caption && /* @__PURE__ */jsx2(Box, {
         sx: {
           whiteSpace: "nowrap",
           mt: 6
         },
-        children: props.caption && /* @__PURE__ */jsx2(Text, {
+        children: /* @__PURE__ */jsx2(Text, {
           sx: {
             fontSize: "xs",
             color: "text.secondary"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.2.26",
+  "version": "2.2.28",
   "description": "React components for ttoss ecosystem.",
   "license": "MIT",
   "author": "ttoss",
@@ -108,10 +108,10 @@
     "tsup": "^8.5.0",
     "tsx": "^4.19.2",
     "@ttoss/react-hooks": "^2.1.2",
+    "@ttoss/react-icons": "^0.4.15",
     "@ttoss/config": "^1.35.6",
     "@ttoss/test-utils": "^2.1.26",
-    "@ttoss/ui": "^5.9.2",
-    "@ttoss/react-icons": "^0.4.15"
+    "@ttoss/ui": "^5.9.2"
   },
   "keywords": [
     "React",