@ttoss/react-notifications 1.22.24 → 1.22.26

package/README.md

@@ -77,3 +77,42 @@ const Component = () => {
   );
 };
 ```
+
+### Resolving notifications
+
+Additionally, the API accepts a third property in `setNotifications`: `notificationKey`.
+In this property, you can insert a placeholder for a particular notification, and, the library gonna resolve any repetated key for this notification to be only one notification.
+
+In that way, you have more control if you gonna render a repeated notification or not:
+
+```tsx
+import { useNotifications } from '@ttoss/react-notifications';
+
+const Component = () => {
+  const { setNotifications } = useNotifications();
+
+  return (
+    <div>
+      <button
+        onClick={() =>
+          setNotifications([
+            {
+              message: "I'm a notification",
+              type: 'info',
+              key: 'information',
+            },
+            {
+              message: "I'm considered to be the same notification",
+              type: 'info',
+              key: 'information',
+            },
+          ])
+        }
+      >
+        Click Me!
+      </button>
+      <NotificationsModal />
+    </div>
+  );
+};
+```

package/dist/esm/index.js

@@ -67,7 +67,7 @@ var NotificationBoxWrapper = ({
     gap: "md",
     marginTop: !notifications || Array.isArray(notifications) && !notifications.length ? 0 : "2xl"
   };
-  return direction === "flex" ? /* @__PURE__ */jsx2(Flex2, {
+  return direction === "row" ? /* @__PURE__ */jsx2(Flex2, {
     sx,
     children
   }) : /* @__PURE__ */jsx2(Stack, {
@@ -75,8 +75,25 @@ var NotificationBoxWrapper = ({
     children
   });
 };
+var resolveNotifications = notifications => {
+  if (!Array.isArray(notifications)) return notifications;
+  const keyedNotifications = new Map(notifications.filter(notification => {
+    return notification.key;
+  }).map(notification => {
+    return [notification?.key, notification];
+  })).values();
+  const nonKeyedNotifications = notifications.filter(notification => {
+    return !notification.key;
+  }).map((notification, index) => {
+    return {
+      ...notification,
+      key: index.toString()
+    };
+  });
+  return Array.from(keyedNotifications).concat(nonKeyedNotifications);
+};
 var NotificationsBox = ({
-  direction = "flex"
+  direction = "row"
 }) => {
   const {
     setNotifications,
@@ -85,18 +102,22 @@ var NotificationsBox = ({
   if (!notifications) {
     return null;
   }
+  const renderNotifications = resolveNotifications(notifications);
   const ButtonMemoized = /*#__PURE__*/React2.memo(({
-    message,
-    type
+    notification: {
+      key,
+      type,
+      message
+    }
   }) => {
     return /* @__PURE__ */jsx2(Button, {
       sx: {
         backgroundColor: type === "error" ? "danger" : "positive"
       },
       onClick: () => {
-        if (Array.isArray(notifications) && notifications.length > 1) {
-          return setNotifications(notifications.filter(notification => {
-            return notification.message !== message;
+        if (Array.isArray(renderNotifications) && renderNotifications.length > 1) {
+          return setNotifications(renderNotifications.filter(notification => {
+            return notification.key !== key;
           }));
         }
         return setNotifications(void 0);
@@ -112,12 +133,12 @@ var NotificationsBox = ({
       notifications,
       direction
     },
-    children: Array.isArray(notifications) ? notifications.map(notification => {
+    children: Array.isArray(renderNotifications) ? renderNotifications.map(notification => {
       return /* @__PURE__ */jsx2(ButtonMemoized, {
-        ...notification
-      }, JSON.stringify(notification));
+        notification
+      }, notification.key);
     }) : /* @__PURE__ */jsx2(ButtonMemoized, {
-      ...notifications
+      notification: renderNotifications
     })
   });
 };
@@ -137,7 +158,7 @@ var NotificationsModal = () => {
       }
     },
     children: /* @__PURE__ */jsx3(NotificationsBox, {
-      direction: "stack"
+      direction: "row"
     })
   });
 };

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
 type NotifyParams = {
+    key?: string;
     message: 'string' | React.ReactNode;
     type: 'success' | 'error' | 'warning' | 'info';
 };
@@ -18,7 +19,7 @@ declare const useNotifications: () => {
 };
 
 declare const NotificationsBox: ({ direction, }: {
-    direction?: "flex" | "stack" | undefined;
+    direction?: "row" | "column" | undefined;
 }) => react_jsx_runtime.JSX.Element | null;
 
 declare const NotificationsModal: () => react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
 type NotifyParams = {
+    key?: string;
     message: 'string' | React.ReactNode;
     type: 'success' | 'error' | 'warning' | 'info';
 };
@@ -18,7 +19,7 @@ declare const useNotifications: () => {
 };
 
 declare const NotificationsBox: ({ direction, }: {
-    direction?: "flex" | "stack" | undefined;
+    direction?: "row" | "column" | undefined;
 }) => react_jsx_runtime.JSX.Element | null;
 
 declare const NotificationsModal: () => react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -112,7 +112,7 @@ var NotificationBoxWrapper = ({
     gap: "md",
     marginTop: !notifications || Array.isArray(notifications) && !notifications.length ? 0 : "2xl"
   };
-  return direction === "flex" ? /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
+  return direction === "row" ? /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Flex, {
     sx,
     children
   }) : /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Stack, {
@@ -120,8 +120,25 @@ var NotificationBoxWrapper = ({
     children
   });
 };
+var resolveNotifications = notifications => {
+  if (!Array.isArray(notifications)) return notifications;
+  const keyedNotifications = new Map(notifications.filter(notification => {
+    return notification.key;
+  }).map(notification => {
+    return [notification?.key, notification];
+  })).values();
+  const nonKeyedNotifications = notifications.filter(notification => {
+    return !notification.key;
+  }).map((notification, index) => {
+    return {
+      ...notification,
+      key: index.toString()
+    };
+  });
+  return Array.from(keyedNotifications).concat(nonKeyedNotifications);
+};
 var NotificationsBox = ({
-  direction = "flex"
+  direction = "row"
 }) => {
   const {
     setNotifications,
@@ -130,18 +147,22 @@ var NotificationsBox = ({
   if (!notifications) {
     return null;
   }
+  const renderNotifications = resolveNotifications(notifications);
   const ButtonMemoized = React2.memo(({
-    message,
-    type
+    notification: {
+      key,
+      type,
+      message
+    }
   }) => {
     return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Button, {
       sx: {
         backgroundColor: type === "error" ? "danger" : "positive"
       },
       onClick: () => {
-        if (Array.isArray(notifications) && notifications.length > 1) {
-          return setNotifications(notifications.filter(notification => {
-            return notification.message !== message;
+        if (Array.isArray(renderNotifications) && renderNotifications.length > 1) {
+          return setNotifications(renderNotifications.filter(notification => {
+            return notification.key !== key;
           }));
         }
         return setNotifications(void 0);
@@ -157,12 +178,12 @@ var NotificationsBox = ({
       notifications,
       direction
     },
-    children: Array.isArray(notifications) ? notifications.map(notification => {
+    children: Array.isArray(renderNotifications) ? renderNotifications.map(notification => {
       return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(ButtonMemoized, {
-        ...notification
-      }, JSON.stringify(notification));
+        notification
+      }, notification.key);
     }) : /* @__PURE__ */(0, import_jsx_runtime2.jsx)(ButtonMemoized, {
-      ...notifications
+      notification: renderNotifications
     })
   });
 };
@@ -182,7 +203,7 @@ var NotificationsModal = () => {
       }
     },
     children: /* @__PURE__ */(0, import_jsx_runtime3.jsx)(NotificationsBox, {
-      direction: "stack"
+      direction: "row"
     })
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-notifications",
-  "version": "1.22.24",
+  "version": "1.22.26",
   "description": "ttoss notifications module for React apps.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -22,15 +22,15 @@
   "typings": "dist/index.d.ts",
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/components": "^1.29.7",
-    "@ttoss/ui": "^2.0.3"
+    "@ttoss/components": "^1.29.8",
+    "@ttoss/ui": "^2.0.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.12",
     "jest": "^29.6.1",
     "react": "^18.2.0",
     "tsup": "^7.1.0",
-    "@ttoss/components": "^1.29.7",
+    "@ttoss/components": "^1.29.8",
     "@ttoss/config": "^1.30.5",
     "@ttoss/test-utils": "^1.23.6"
   },

package/src/NotificationsBox.tsx

@@ -7,7 +7,7 @@ const NotificationBoxWrapper = ({
   notifications,
   children,
 }: React.PropsWithChildren<{
-  direction: 'flex' | 'stack';
+  direction: 'row' | 'column';
   notifications: NotifyParams | NotifyParams[] | undefined;
 }>) => {
   const sx = {
@@ -20,17 +20,45 @@ const NotificationBoxWrapper = ({
         : '2xl',
   };
 
-  return direction === 'flex' ? (
+  return direction === 'row' ? (
     <Flex sx={sx}>{children}</Flex>
   ) : (
     <Stack sx={sx}>{children}</Stack>
   );
 };
 
+const resolveNotifications = (notifications: NotifyParams | NotifyParams[]) => {
+  if (!Array.isArray(notifications)) return notifications;
+
+  // keyed notifications should be unique
+  const keyedNotifications = new Map<string | undefined, NotifyParams>(
+    notifications
+      .filter((notification) => {
+        return notification.key;
+      })
+      .map((notification) => {
+        return [notification?.key, notification];
+      })
+  ).values();
+
+  const nonKeyedNotifications = notifications
+    .filter((notification) => {
+      return !notification.key;
+    })
+    .map((notification, index) => {
+      return {
+        ...notification,
+        key: index.toString() as string,
+      };
+    });
+
+  return Array.from(keyedNotifications).concat(nonKeyedNotifications);
+};
+
 export const NotificationsBox = ({
-  direction = 'flex',
+  direction = 'row',
 }: {
-  direction?: 'flex' | 'stack';
+  direction?: 'row' | 'column';
 }) => {
   const { setNotifications, notifications } = useNotifications();
 
@@ -38,45 +66,56 @@ export const NotificationsBox = ({
     return null;
   }
 
-  const ButtonMemoized = React.memo(({ message, type }: NotifyParams) => {
-    return (
-      <Button
-        sx={{
-          backgroundColor: type === 'error' ? 'danger' : 'positive',
-        }}
-        onClick={() => {
-          if (Array.isArray(notifications) && notifications.length > 1) {
-            return setNotifications(
-              notifications.filter((notification) => {
-                return notification.message !== message;
-              })
-            );
-          }
-          return setNotifications(undefined);
-        }}
-        rightIcon="close"
-        leftIcon={type === 'error' ? 'warning' : undefined}
-      >
-        {message}
-      </Button>
-    );
-  });
+  const renderNotifications = resolveNotifications(notifications);
+
+  const ButtonMemoized = React.memo(
+    ({
+      notification: { key, type, message },
+    }: {
+      notification: NotifyParams;
+    }) => {
+      return (
+        <Button
+          sx={{
+            backgroundColor: type === 'error' ? 'danger' : 'positive',
+          }}
+          onClick={() => {
+            if (
+              Array.isArray(renderNotifications) &&
+              renderNotifications.length > 1
+            ) {
+              return setNotifications(
+                renderNotifications.filter((notification) => {
+                  return notification.key !== key;
+                })
+              );
+            }
+            return setNotifications(undefined);
+          }}
+          rightIcon="close"
+          leftIcon={type === 'error' ? 'warning' : undefined}
+        >
+          {message}
+        </Button>
+      );
+    }
+  );
 
   ButtonMemoized.displayName = 'ButtonMemoized';
 
   return (
     <NotificationBoxWrapper {...{ notifications, direction }}>
-      {Array.isArray(notifications) ? (
-        notifications.map((notification) => {
+      {Array.isArray(renderNotifications) ? (
+        renderNotifications.map((notification) => {
           return (
             <ButtonMemoized
-              key={JSON.stringify(notification)}
-              {...notification}
+              key={notification.key}
+              notification={notification}
             />
           );
         })
       ) : (
-        <ButtonMemoized {...notifications} />
+        <ButtonMemoized notification={renderNotifications} />
       )}
     </NotificationBoxWrapper>
   );

package/src/NotificationsModal.tsx

@@ -7,7 +7,7 @@ export const NotificationsModal = () => {
 
   return (
     <Modal isOpen={!!notifications} style={{ content: { minWidth: '30%' } }}>
-      <NotificationsBox direction="stack" />
+      <NotificationsBox direction="row" />
     </Modal>
   );
 };

package/src/Provider.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Flex, InfiniteLinearProgress } from '@ttoss/ui';
 
 export type NotifyParams = {
+  key?: string;
   message: 'string' | React.ReactNode;
   type: 'success' | 'error' | 'warning' | 'info';
 };