@ttoss/react-notifications 1.22.25 → 1.23.0

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,33 +133,49 @@ 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
     })
   });
 };
 
 // src/NotificationsModal.tsx
+import { Button as Button2, Icon } from "@ttoss/ui";
 import { Modal } from "@ttoss/components";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var NotificationsModal = () => {
   const {
-    notifications
+    notifications,
+    setNotifications
   } = useNotifications();
-  return /* @__PURE__ */jsx3(Modal, {
+  return /* @__PURE__ */jsxs2(Modal, {
     isOpen: !!notifications,
     style: {
       content: {
-        minWidth: "30%"
+        minWidth: "30%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
       }
     },
-    children: /* @__PURE__ */jsx3(NotificationsBox, {
-      direction: "stack"
-    })
+    children: [/* @__PURE__ */jsx3(Button2, {
+      placeholder: "Close",
+      style: {
+        alignSelf: "flex-end"
+      },
+      onClick: () => {
+        setNotifications(void 0);
+      },
+      children: /* @__PURE__ */jsx3(Icon, {
+        icon: "close"
+      })
+    }), /* @__PURE__ */jsx3(NotificationsBox, {
+      direction: "row"
+    })]
   });
 };
 export { NotificationsBox, NotificationsModal, NotificationsProvider, useNotifications };

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,33 +178,49 @@ 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
     })
   });
 };
 
 // src/NotificationsModal.tsx
+var import_ui3 = require("@ttoss/ui");
 var import_components = require("@ttoss/components");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var NotificationsModal = () => {
   const {
-    notifications
+    notifications,
+    setNotifications
   } = useNotifications();
-  return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_components.Modal, {
+  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_components.Modal, {
     isOpen: !!notifications,
     style: {
       content: {
-        minWidth: "30%"
+        minWidth: "30%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
       }
     },
-    children: /* @__PURE__ */(0, import_jsx_runtime3.jsx)(NotificationsBox, {
-      direction: "stack"
-    })
+    children: [/* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Button, {
+      placeholder: "Close",
+      style: {
+        alignSelf: "flex-end"
+      },
+      onClick: () => {
+        setNotifications(void 0);
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Icon, {
+        icon: "close"
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime3.jsx)(NotificationsBox, {
+      direction: "row"
+    })]
   });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-notifications",
-  "version": "1.22.25",
+  "version": "1.23.0",
   "description": "ttoss notifications module for React apps.",
   "license": "UNLICENSED",
   "author": "ttoss",

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

@@ -1,13 +1,33 @@
+import { Button, Icon } from '@ttoss/ui';
 import { Modal } from '@ttoss/components';
 import { NotificationsBox } from './NotificationsBox';
 import { useNotifications } from './Provider';
 
 export const NotificationsModal = () => {
-  const { notifications } = useNotifications();
+  const { notifications, setNotifications } = useNotifications();
 
   return (
-    <Modal isOpen={!!notifications} style={{ content: { minWidth: '30%' } }}>
-      <NotificationsBox direction="stack" />
+    <Modal
+      isOpen={!!notifications}
+      style={{
+        content: {
+          minWidth: '30%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        },
+      }}
+    >
+      <Button
+        placeholder="Close"
+        style={{ alignSelf: 'flex-end' }}
+        onClick={() => {
+          setNotifications(undefined);
+        }}
+      >
+        <Icon icon={'close'}></Icon>
+      </Button>
+      <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';
 };