@ttoss/react-notifications 2.2.1 → 2.3.0

package/README.md

@@ -18,8 +18,8 @@ Add a provider on top of your application and set [Modal app element](https://re
 
 ```tsx
 import { NotificationsProvider } from '@ttoss/react-notifications';
-import { ThemeProvider } from "@ttoss/ui";
-import { Modal } from "@ttoss/components";
+import { ThemeProvider } from '@ttoss/ui';
+import { Modal } from '@ttoss/components';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -30,6 +30,7 @@ ReactDOM.render(
     </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root')
+);
 
 Modal.setAppElement('#root');
 ```
@@ -43,7 +44,7 @@ import { useNotifications } from '@ttoss/react-notifications';
 import { Box, Button } from '@ttoss/ui';
 
 const Component = () => {
-  const { loading, setLoading } = useNotifications();
+  const { isLoading, setLoading } = useNotifications();
 
   return (
     <Box>
@@ -148,7 +149,7 @@ import { useNotifications, NotificationsBox } from '@ttoss/react-notifications';
 import { Box, Button } from '@ttoss/ui';
 
 const Component = () => {
-  const { addNotification , NotificationsBox } = useNotifications();
+  const { addNotification } = useNotifications();
 
   return (
     <Box>
@@ -157,7 +158,7 @@ const Component = () => {
         onClick={() =>
           addNotification({
             message: "I'm a notification",
-            type: 'info',,
+            type: 'info',
             boxId: 'my-box',
           })
         }
@@ -202,10 +203,82 @@ const Header = () => {
 };
 ```
 
+### Persistent Notifications
+
+You can create persistent notifications that will not be removed when `clearNotifications()` is called by setting the `persist` property to `true`. This is useful for important notifications that should remain visible until manually dismissed.
+
+```tsx
+import { useNotifications } from '@ttoss/react-notifications';
+import { Box, Button } from '@ttoss/ui';
+
+const Component = () => {
+  const { addNotification, clearNotifications } = useNotifications();
+
+  return (
+    <Box>
+      <Button
+        onClick={() =>
+          addNotification({
+            message: "I'm a persistent notification",
+            type: 'warning',
+            persist: true, // This notification will not be cleared by clearNotifications()
+          })
+        }
+      >
+        Add Persistent Notification
+      </Button>
+      <Button
+        onClick={() =>
+          addNotification({
+            message: "I'm a regular notification",
+            type: 'info',
+            persist: false, // This notification will be cleared by clearNotifications()
+          })
+        }
+      >
+        Add Regular Notification
+      </Button>
+      <Button onClick={clearNotifications}>
+        Clear All Non-Persistent Notifications
+      </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."
 
+## API
+
+### Notification Properties
+
+| Property   | Type                                          | Default        | Description                                                                   |
+| ---------- | --------------------------------------------- | -------------- | ----------------------------------------------------------------------------- |
+| `id`       | `string \| number`                            | Auto-generated | Unique identifier for the notification                                        |
+| `title`    | `string`                                      | -              | Optional title for the notification                                           |
+| `message`  | `string`                                      | **Required**   | The notification message content                                              |
+| `type`     | `'warning' \| 'error' \| 'info' \| 'success'` | **Required**   | The type of notification                                                      |
+| `viewType` | `'toast' \| 'modal' \| 'box' \| 'header'`     | `'box'`        | Where the notification should be displayed                                    |
+| `toast`    | `ToastOptions`                                | -              | Additional options for toast notifications                                    |
+| `boxId`    | `string \| number`                            | -              | ID of the specific NotificationsBox to display the notification               |
+| `persist`  | `boolean`                                     | `false`        | Whether the notification should persist when `clearNotifications()` is called |
+
+### useNotifications Hook
+
+The `useNotifications` hook returns an object with the following properties:
+
+| Property             | Type                                                     | Description                                        |
+| -------------------- | -------------------------------------------------------- | -------------------------------------------------- |
+| `notifications`      | `Notification[]`                                         | Array of current notifications                     |
+| `addNotification`    | `(notification: Notification \| Notification[]) => void` | Function to add one or more notifications          |
+| `removeNotification` | `(id: string \| number) => void`                         | Function to remove a specific notification by ID   |
+| `clearNotifications` | `() => void`                                             | Function to clear all non-persistent notifications |
+| `isLoading`          | `boolean`                                                | Current loading state                              |
+| `setLoading`         | `(loading: boolean) => void`                             | Function to set the loading state                  |
+| `defaultViewType`    | `'toast' \| 'modal' \| 'box' \| 'header'`                | The default view type for notifications            |
+
 ## License
 
 [MIT](https://github.com/ttoss/ttoss/blob/main/LICENSE)

package/dist/esm/index.js

@@ -144,7 +144,11 @@ var NotificationsProvider = props => {
     });
   }, [prefix, props.defaultViewType, removeNotification]);
   const clearNotifications = React.useCallback(() => {
-    setNotifications(void 0);
+    setNotifications(prevNotifications => {
+      return prevNotifications?.filter(notification => {
+        return notification.persist === true;
+      });
+    });
   }, []);
   return /* @__PURE__ */jsxs2(NotificationsContext.Provider, {
     value: {

package/dist/index.d.ts

@@ -12,6 +12,7 @@ type Notification = {
     viewType?: ViewType;
     toast?: ToastOptions;
     boxId?: string | number;
+    persist?: boolean;
 };
 type NotificationsProviderProps = {
     children: React.ReactNode;

package/package.json

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