@ttoss/react-notifications 2.1.28 → 2.2.0

package/README.md

@@ -169,6 +169,39 @@ const Component = () => {
 };
 ```
 
+### NotificationsHeader
+
+You can use `NotificationsHeader` to display notifications with `viewType: 'header'` in a specific place, such as your application's header. Only notifications with `viewType: 'header'` will be shown by this component.
+
+```tsx
+import {
+  NotificationsHeader,
+  useNotifications,
+} from '@ttoss/react-notifications';
+import { Box, Button } from '@ttoss/ui';
+
+const Header = () => {
+  const { addNotification } = useNotifications();
+
+  return (
+    <Box>
+      <NotificationsHeader />
+      <Button
+        onClick={() =>
+          addNotification({
+            message: "I'm a header notification",
+            type: 'info',
+            viewType: 'header',
+          })
+        }
+      >
+        Show Header Notification
+      </Button>
+    </Box>
+  );
+};
+```
+
 #### Recommendation
 
 "You can place the `NotificationsBox` component at the root of your application to handle notifications rendering automatically, eliminating the need to manage it manually elsewhere. If you need a specific `NotificationsBox`, simply render the `NotificationsBox` in the desired location and use the `boxId` property to differentiate it."

package/dist/esm/index.js

@@ -9,10 +9,24 @@ import { toast, ToastContainer } from "@ttoss/components/Toast";
 import { Flex, InfiniteLinearProgress } from "@ttoss/ui";
 import * as React from "react";
 
+// src/NotificationsHeader.tsx
+import { jsx } from "react/jsx-runtime";
+var NotificationsHeader = () => {
+  const {
+    notifications
+  } = useNotifications();
+  const headerNotifications = notifications?.filter(notification => {
+    return notification.viewType === "header";
+  });
+  return /* @__PURE__ */jsx(NotificationsBox, {
+    notifications: headerNotifications
+  });
+};
+
 // src/NotificationsModal.tsx
 import { Modal } from "@ttoss/components/Modal";
 import { CloseButton } from "@ttoss/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var NotificationsModal = () => {
   const {
     notifications,
@@ -37,7 +51,7 @@ var NotificationsModal = () => {
         gap: "4"
       }
     },
-    children: [/* @__PURE__ */jsx(CloseButton, {
+    children: [/* @__PURE__ */jsx2(CloseButton, {
       "aria-label": "Close",
       sx: {
         alignSelf: "flex-end"
@@ -45,14 +59,14 @@ var NotificationsModal = () => {
       onClick: () => {
         clearNotifications();
       }
-    }), /* @__PURE__ */jsx(NotificationsBox, {
+    }), /* @__PURE__ */jsx2(NotificationsBox, {
       notifications: modalNotifications
     })]
   });
 };
 
 // src/Provider.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var NotificationsContext = React.createContext({
   isLoading: false,
   setLoading: () => {
@@ -142,16 +156,16 @@ var NotificationsProvider = props => {
       clearNotifications,
       defaultViewType: props.defaultViewType || "box"
     },
-    children: [/* @__PURE__ */jsx2(ToastContainer, {
+    children: [/* @__PURE__ */jsx3(ToastContainer, {
       ...props.toast
-    }), /* @__PURE__ */jsx2(NotificationsModal, {}), isLoading && /* @__PURE__ */jsx2(Flex, {
+    }), /* @__PURE__ */jsx3(NotificationsModal, {}), isLoading && /* @__PURE__ */jsx3(Flex, {
       sx: {
         position: "absolute",
         width: "100%",
         top: 0
       },
-      children: /* @__PURE__ */jsx2(InfiniteLinearProgress, {})
-    }), props.children]
+      children: /* @__PURE__ */jsx3(InfiniteLinearProgress, {})
+    }), /* @__PURE__ */jsx3(NotificationsHeader, {}), props.children]
   });
 };
 var useNotifications = () => {
@@ -159,7 +173,7 @@ var useNotifications = () => {
 };
 
 // src/NotificationsBox.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var NotificationsBox = props => {
   const {
     notifications,
@@ -182,13 +196,13 @@ var NotificationsBox = props => {
   if (!hasBoxNotifications) {
     return null;
   }
-  return /* @__PURE__ */jsx3(Stack, {
+  return /* @__PURE__ */jsx4(Stack, {
     sx: {
       width: "full",
       gap: "1"
     },
     children: boxNotifications.map(notification => {
-      return /* @__PURE__ */jsx3(NotificationCard, {
+      return /* @__PURE__ */jsx4(NotificationCard, {
         type: notification.type,
         title: notification.title,
         message: notification.message,

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { ToastOptions, ToastContainerProps } from '@ttoss/components/Toast';
 export { toast } from '@ttoss/components/Toast';
 import * as React from 'react';
 
-type ViewType = 'toast' | 'modal' | 'box';
+type ViewType = 'toast' | 'modal' | 'box' | 'header';
 type Notification = {
     id?: string | number;
     title?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-notifications",
-  "version": "2.1.28",
+  "version": "2.2.0",
   "description": "ttoss notifications module for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -25,9 +25,9 @@
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^5.8.2",
     "@ttoss/components": "^2.2.22",
-    "@ttoss/react-icons": "^0.4.12"
+    "@ttoss/react-icons": "^0.4.12",
+    "@ttoss/ui": "^5.8.2"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",
@@ -36,9 +36,9 @@
     "tsup": "^8.5.0",
     "@ttoss/components": "^2.2.22",
     "@ttoss/config": "^1.35.4",
+    "@ttoss/react-icons": "^0.4.12",
     "@ttoss/test-utils": "^2.1.24",
-    "@ttoss/ui": "^5.8.2",
-    "@ttoss/react-icons": "^0.4.12"
+    "@ttoss/ui": "^5.8.2"
   },
   "keywords": [
     "React",