@notificationapi/react 1.6.0 → 1.6.2

package/dist/assets/Notification.js

@@ -5884,7 +5884,7 @@ const kc = di.div`
       $seen: c || !!f,
       $archived: !!d,
       onClick: () => {
-        t.markAsClicked(v), a && (window.location.href = a);
+        t.markAsClicked(v), a && (t.newTab ? window.open(a, "_blank") : window.location.href = a);
       },
       style: {
         padding: "16px 6px 16px 0",

package/dist/components/Notifications/Inbox.d.ts

@@ -13,5 +13,6 @@ export type InboxProps = {
     header?: InboxHeaderProps;
     empty?: React.ReactNode;
     imageShape?: 'circle' | 'square';
+    newTab?: boolean;
 };
 export declare const Inbox: React.FC<InboxProps>;

package/dist/components/Notifications/Inbox.js

@@ -2874,7 +2874,8 @@ const yi = (e) => {
                 notifications: u,
                 markAsClicked: n.markAsClicked,
                 renderer: e.notificationRenderer,
-                imageShape: e.imageShape
+                imageShape: e.imageShape,
+                newTab: e.newTab
               }
             ) }, u[0].id)
           }
@@ -2908,7 +2909,8 @@ const yi = (e) => {
             notifications: u,
             markAsClicked: n.markAsClicked,
             renderer: e.notificationRenderer,
-            imageShape: e.imageShape
+            imageShape: e.imageShape,
+            newTab: e.newTab
           }
         ) }, u[0].id)),
         e.pagePosition === "bottom" && f.length > 0 && /* @__PURE__ */ j(

package/dist/components/Notifications/Notification.d.ts

@@ -7,5 +7,6 @@ export type NotificationProps = {
     markAsClicked: (ids: string[]) => void;
     renderer?: (notification: InAppNotification[]) => ReactNode;
     imageShape?: 'circle' | 'square';
+    newTab?: boolean;
 };
 export declare const Notification: (props: NotificationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Notifications/NotificationFeed.d.ts

@@ -15,5 +15,6 @@ export type NotificationFeedProps = {
     };
     header?: InboxHeaderProps;
     imageShape?: 'circle' | 'square';
+    newTab?: boolean;
 };
 export declare const NotificationFeed: React.FC<NotificationFeedProps>;

package/dist/components/Notifications/NotificationFeed.js

@@ -9,7 +9,7 @@ import { c as C } from "../../assets/createSvgIcon.js";
 import { D as I } from "../../assets/Divider.js";
 const H = C(/* @__PURE__ */ n("path", {
   d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2m6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56M12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96M4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56m2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8M12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96M14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2m.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2z"
-}), "Language"), N = (e) => {
+}), "Language"), O = (e) => {
   var a, o, c, l;
   const [f, r] = d(!1), i = m(p);
   if (h(() => {
@@ -36,7 +36,8 @@ const H = C(/* @__PURE__ */ n("path", {
       button1ClickHandler: ((c = e.header) == null ? void 0 : c.button1ClickHandler) ?? i.markAsArchived,
       button2ClickHandler: ((l = e.header) == null ? void 0 : l.button2ClickHandler) ?? (() => r(!0))
     },
-    imageShape: e.imageShape || "circle"
+    imageShape: e.imageShape || "circle",
+    newTab: e.newTab ?? !1
   };
   return /* @__PURE__ */ s(
     "div",
@@ -60,7 +61,8 @@ const H = C(/* @__PURE__ */ n("path", {
             pagePosition: t.pagePosition,
             notificationRenderer: t.renderers.notification,
             header: t.header,
-            imageShape: t.imageShape
+            imageShape: t.imageShape,
+            newTab: t.newTab
           }
         ),
         i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ s("div", { children: [
@@ -102,5 +104,5 @@ const H = C(/* @__PURE__ */ n("path", {
   );
 };
 export {
-  N as NotificationFeed
+  O as NotificationFeed
 };

package/dist/components/Notifications/NotificationLauncher.js

@@ -1,22 +1,22 @@
 import { jsx as o, jsxs as a } from "react/jsx-runtime";
-import { useState as c, useContext as C } from "react";
+import { useState as l, useContext as C } from "react";
 import { Inbox as S } from "./Inbox.js";
 import { UnreadBadge as y } from "./UnreadBadge.js";
 import { NotificationAPIContext as z } from "../Provider/context.js";
 import { NotificationPreferencesPopup as N } from "../Preferences/NotificationPreferencesPopup.js";
-import { W as k, L as v } from "../../assets/WebPushOptInMessage.js";
-import { N as A } from "../../assets/channelUtils.js";
-import { I as H } from "../../assets/IconButton.js";
-import { P as L } from "../../assets/Popover.js";
-import { D as T } from "../../assets/Divider.js";
+import { W as T, L as k } from "../../assets/WebPushOptInMessage.js";
+import { N as v } from "../../assets/channelUtils.js";
+import { I as A } from "../../assets/IconButton.js";
+import { P as H } from "../../assets/Popover.js";
+import { D as L } from "../../assets/Divider.js";
 const j = (e) => {
-  var d, f, u, h, g, p, m, I;
-  const [P, l] = c(!1), [n, s] = c(!1), i = C(z), [b, O] = c(null);
-  if (!i)
+  var d, f, u, h, g, m, p, b;
+  const [I, c] = l(!1), [i, s] = l(!1), n = C(z), [P, O] = l(null);
+  if (!n)
     return null;
   const t = {
     buttonIcon: e.buttonIcon || /* @__PURE__ */ o(
-      A,
+      v,
       {
         style: {
           fontSize: e.buttonIconSize || 20,
@@ -45,20 +45,21 @@ const j = (e) => {
     filter: e.filter || "ALL",
     header: {
       title: (d = e.header) == null ? void 0 : d.title,
-      button1ClickHandler: ((f = e.header) == null ? void 0 : f.button1ClickHandler) ?? i.markAsArchived,
-      button2ClickHandler: ((u = e.header) == null ? void 0 : u.button2ClickHandler) ?? (() => l(!0))
+      button1ClickHandler: ((f = e.header) == null ? void 0 : f.button1ClickHandler) ?? n.markAsArchived,
+      button2ClickHandler: ((u = e.header) == null ? void 0 : u.button2ClickHandler) ?? (() => c(!0))
     },
     renderers: {
       notification: (h = e.renderers) == null ? void 0 : h.notification
     },
     popoverPosition: {
       anchorOrigin: {
-        vertical: ((p = (g = e.popoverPosition) == null ? void 0 : g.anchorOrigin) == null ? void 0 : p.vertical) ?? "top",
-        horizontal: ((I = (m = e.popoverPosition) == null ? void 0 : m.anchorOrigin) == null ? void 0 : I.horizontal) ?? "left"
+        vertical: ((m = (g = e.popoverPosition) == null ? void 0 : g.anchorOrigin) == null ? void 0 : m.vertical) ?? "top",
+        horizontal: ((b = (p = e.popoverPosition) == null ? void 0 : p.anchorOrigin) == null ? void 0 : b.horizontal) ?? "left"
       }
-    }
+    },
+    newTab: e.newTab ?? !1
   }, x = (r) => {
-    s(!n), O(r == null ? void 0 : r.currentTarget), n && i.markAsOpened();
+    s(!i), O(r == null ? void 0 : r.currentTarget), i && n.markAsOpened();
   };
   return /* @__PURE__ */ a(
     "div",
@@ -76,14 +77,14 @@ const j = (e) => {
             style: {
               display: "inline-block"
             },
-            children: /* @__PURE__ */ o(y, { ...e.unreadBadgeProps, count: t.count, children: /* @__PURE__ */ o(H, { style: t.buttonStyles, onClick: x, children: t.buttonIcon }) })
+            children: /* @__PURE__ */ o(y, { ...e.unreadBadgeProps, count: t.count, children: /* @__PURE__ */ o(A, { style: t.buttonStyles, onClick: x, children: t.buttonIcon }) })
           }
         ),
         /* @__PURE__ */ a(
-          L,
+          H,
           {
-            open: n,
-            anchorEl: b,
+            open: i,
+            anchorEl: P,
             anchorReference: "anchorEl",
             anchorOrigin: {
               horizontal: "center",
@@ -113,16 +114,17 @@ const j = (e) => {
                   pageSize: t.pageSize,
                   pagePosition: t.pagePosition,
                   notificationRenderer: t.renderers.notification,
-                  header: t.header
+                  header: t.header,
+                  newTab: t.newTab
                 }
               ),
-              i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ a("div", { children: [
-                /* @__PURE__ */ o(T, { style: { margin: "10px 0" } }),
+              n.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ a("div", { children: [
+                /* @__PURE__ */ o(L, { style: { margin: "10px 0" } }),
                 /* @__PURE__ */ o(
-                  k,
+                  T,
                   {
                     hideAfterInteraction: !0,
-                    icon: /* @__PURE__ */ o(v, { type: "text", style: { marginLeft: "9px" } }),
+                    icon: /* @__PURE__ */ o(k, { type: "text", style: { marginLeft: "9px" } }),
                     alertContainerStyle: { maxWidth: "345px" }
                   }
                 )
@@ -133,8 +135,8 @@ const j = (e) => {
         /* @__PURE__ */ o(
           N,
           {
-            open: P,
-            onClose: () => l(!1)
+            open: I,
+            onClose: () => c(!1)
           }
         )
       ]

package/dist/components/Notifications/NotificationPopup.d.ts

@@ -29,5 +29,6 @@ export type NotificationPopupProps = {
             horizontal: 'left' | 'center' | 'right';
         };
     };
+    newTab?: boolean;
 };
 export declare const NotificationPopup: React.FC<NotificationPopupProps>;

package/dist/components/Notifications/NotificationPopup.js

@@ -8,12 +8,12 @@ import { Filter as z } from "./interface.js";
 import { W as y } from "../../assets/WebPushOptInMessage.js";
 import { N as k } from "../../assets/channelUtils.js";
 import { I as H } from "../../assets/IconButton.js";
-import { P as A } from "../../assets/Popover.js";
-import { D as B } from "../../assets/Divider.js";
+import { P as T } from "../../assets/Popover.js";
+import { D as A } from "../../assets/Divider.js";
 const j = (e) => {
-  var c, d, u, h, p, s, g, f;
-  const [I, a] = m(!1), [n, l] = m(null), i = O(v);
-  if (!i)
+  var c, d, u, h, s, p, g, f;
+  const [I, a] = m(!1), [i, l] = m(null), n = O(v);
+  if (!n)
     return null;
   const t = {
     buttonIcon: e.buttonIcon || /* @__PURE__ */ o(
@@ -43,7 +43,7 @@ const j = (e) => {
     filter: e.filter || z.ALL,
     header: {
       title: (c = e.header) == null ? void 0 : c.title,
-      button1ClickHandler: ((d = e.header) == null ? void 0 : d.button1ClickHandler) ?? i.markAsArchived,
+      button1ClickHandler: ((d = e.header) == null ? void 0 : d.button1ClickHandler) ?? n.markAsArchived,
       button2ClickHandler: ((u = e.header) == null ? void 0 : u.button2ClickHandler) ?? (() => a(!0))
     },
     renderers: {
@@ -51,12 +51,13 @@ const j = (e) => {
     },
     popoverPosition: {
       anchorOrigin: {
-        vertical: ((s = (p = e.popoverPosition) == null ? void 0 : p.anchorOrigin) == null ? void 0 : s.vertical) ?? "top",
+        vertical: ((p = (s = e.popoverPosition) == null ? void 0 : s.anchorOrigin) == null ? void 0 : p.vertical) ?? "top",
         horizontal: ((f = (g = e.popoverPosition) == null ? void 0 : g.anchorOrigin) == null ? void 0 : f.horizontal) ?? "left"
       }
-    }
-  }, P = (b) => {
-    l(b.currentTarget), i.markAsOpened();
+    },
+    newTab: e.newTab ?? !1
+  }, b = (P) => {
+    l(P.currentTarget), n.markAsOpened();
   };
   return /* @__PURE__ */ r(C, { children: [
     /* @__PURE__ */ o(
@@ -71,17 +72,17 @@ const j = (e) => {
             ...e.unreadBadgeProps,
             count: t.count,
             filter: t.filter,
-            children: /* @__PURE__ */ o(H, { onClick: P, style: t.buttonStyles, children: t.buttonIcon })
+            children: /* @__PURE__ */ o(H, { onClick: b, style: t.buttonStyles, children: t.buttonIcon })
           }
         )
       }
     ),
     /* @__PURE__ */ o(
-      A,
+      T,
       {
-        open: !!n,
+        open: !!i,
         onClose: () => l(null),
-        anchorEl: n,
+        anchorEl: i,
         slotProps: {
           paper: {
             style: {
@@ -89,7 +90,7 @@ const j = (e) => {
             }
           }
         },
-        "aria-hidden": !n,
+        "aria-hidden": !i,
         anchorOrigin: t.popoverPosition.anchorOrigin,
         children: /* @__PURE__ */ r(
           "div",
@@ -110,11 +111,12 @@ const j = (e) => {
                   pageSize: t.pageSize,
                   pagePosition: t.pagePosition,
                   notificationRenderer: t.renderers.notification,
-                  header: t.header
+                  header: t.header,
+                  newTab: t.newTab
                 }
               ),
-              i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ r("div", { children: [
-                /* @__PURE__ */ o(B, { style: { margin: "10px 0" } }),
+              n.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ r("div", { children: [
+                /* @__PURE__ */ o(A, { style: { margin: "10px 0" } }),
                 /* @__PURE__ */ o(y, { hideAfterInteraction: !0 })
               ] })
             ]

package/dist/components/Preferences/Preferences.js

@@ -119,9 +119,9 @@ const Oe = (o) => {
     children: l,
     className: u,
     collapsedSize: d = "0px",
-    component: m,
+    component: g,
     easing: a,
-    in: g,
+    in: m,
     onEnter: E,
     onEntered: R,
     onEntering: A,
@@ -187,7 +187,7 @@ const Oe = (o) => {
     r.style[N] = z, r.style.transitionTimingFunction = B, v && v(r);
   });
   return /* @__PURE__ */ i(k, {
-    in: g,
+    in: m,
     onEnter: le,
     onEntered: ue,
     onEntering: pe,
@@ -204,10 +204,10 @@ const Oe = (o) => {
       ownerState: h,
       ...y
     }) => /* @__PURE__ */ i($e, {
-      as: m,
+      as: g,
       className: U(x.root, u, {
         entered: x.entered,
-        exited: !g && z === "0px" && x.hidden
+        exited: !m && z === "0px" && x.hidden
       }[r]),
       style: {
         [S ? "minWidth" : "minHeight"]: z,
@@ -454,9 +454,9 @@ const F = q("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled
     className: l,
     defaultExpanded: u = !1,
     disabled: d = !1,
-    disableGutters: m = !1,
+    disableGutters: g = !1,
     expanded: a,
-    onChange: g,
+    onChange: m,
     square: E = !1,
     slots: R = {},
     slotProps: A = {},
@@ -469,17 +469,17 @@ const F = q("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled
     name: "Accordion",
     state: "expanded"
   }), b = p.useCallback((Y) => {
-    M(!f), g && g(Y, !f);
-  }, [f, g, M]), [k, ...Q] = p.Children.toArray(c), P = p.useMemo(() => ({
+    M(!f), m && m(Y, !f);
+  }, [f, m, M]), [k, ...Q] = p.Children.toArray(c), P = p.useMemo(() => ({
     expanded: f,
     disabled: d,
-    disableGutters: m,
+    disableGutters: g,
     toggle: b
-  }), [f, d, m, b]), x = {
+  }), [f, d, g, b]), x = {
     ...s,
     square: E,
     disabled: d,
-    disableGutters: m,
+    disableGutters: g,
     expanded: f
   }, O = We(x), X = {
     transition: D,
@@ -764,25 +764,25 @@ const W = q("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disable
     className: l,
     expandIcon: u,
     focusVisibleClassName: d,
-    onClick: m,
+    onClick: g,
     ...a
   } = s, {
-    disabled: g = !1,
+    disabled: m = !1,
     disableGutters: E,
     expanded: R,
     toggle: A
   } = p.useContext(ne), D = (f) => {
-    A && A(f), m && m(f);
+    A && A(f), g && g(f);
   }, w = {
     ...s,
     expanded: R,
-    disabled: g,
+    disabled: m,
     disableGutters: E
   }, v = Le(w);
   return /* @__PURE__ */ G(qe, {
     focusRipple: !1,
     disableRipple: !0,
-    disabled: g,
+    disabled: m,
     "aria-expanded": R,
     className: U(v.root, l),
     focusVisibleClassName: U(v.focusVisible, d),
@@ -848,14 +848,14 @@ function uo() {
   if (!o || !o.preferences)
     return null;
   const t = o.preferences.notifications.sort((n, s) => n.title.localeCompare(s.title)).map((n) => {
-    var u, d, m;
+    var u, d, g;
     const s = (u = o.preferences) == null ? void 0 : u.preferences.filter(
       (a) => a.notificationId === n.notificationId && !a.subNotificationId
     ), c = (d = o.preferences) == null ? void 0 : d.preferences.filter(
       (a) => a.notificationId === n.notificationId && a.subNotificationId
-    ), l = (m = o.preferences) == null ? void 0 : m.subNotifications.filter(
+    ), l = (g = o.preferences) == null ? void 0 : g.subNotifications.filter(
       (a) => c == null ? void 0 : c.find(
-        (g) => g.subNotificationId === a.subNotificationId
+        (m) => m.subNotificationId === a.subNotificationId && m.notificationId === a.notificationId
       )
     );
     return /* @__PURE__ */ G(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notificationapi/react",
   "private": false,
-  "version": "1.6.0",
+  "version": "1.6.2",
   "type": "module",
   "overrides": {
     "esbuild": "^0.25.0",