@ttoss/react-notifications 1.22.26 → 1.23.1

package/dist/esm/index.js

@@ -144,22 +144,38 @@ var NotificationsBox = ({
 };
 
 // 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, {
+    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.js

@@ -189,22 +189,38 @@ var NotificationsBox = ({
 };
 
 // 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, {
+    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.26",
+  "version": "1.23.1",
   "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.8",
-    "@ttoss/ui": "^2.0.4"
+    "@ttoss/components": "^1.29.9",
+    "@ttoss/ui": "^2.0.5"
   },
   "devDependencies": {
     "@types/react": "^18.2.12",
     "jest": "^29.6.1",
     "react": "^18.2.0",
     "tsup": "^7.1.0",
-    "@ttoss/components": "^1.29.8",
+    "@ttoss/components": "^1.29.9",
     "@ttoss/config": "^1.30.5",
     "@ttoss/test-utils": "^1.23.6"
   },

package/src/NotificationsModal.tsx

@@ -1,12 +1,32 @@
+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%' } }}>
+    <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>
   );