@notificationapi/react 1.7.0 → 1.9.0

package/dist/components/Notifications/Notification.js

@@ -1,9 +1,11 @@
 import "react/jsx-runtime";
-import { N as f } from "../../assets/Notification.js";
+import { N as c } from "../../assets/Notification.js";
 import "../../assets/DefaultPropsProvider.js";
+import "../../utils/theme.js";
+import "../../assets/ButtonBase.js";
 import "../../assets/Typography.js";
 import "../../assets/IconButton.js";
 import "../../assets/Badge.js";
 export {
-  f as Notification
+  c as Notification
 };

package/dist/components/Notifications/NotificationFeed.js

@@ -1,24 +1,26 @@
-import { jsx as n, jsxs as s } from "react/jsx-runtime";
-import { useState as d, useContext as m, useEffect as h } from "react";
-import { Inbox as u } from "./Inbox.js";
-import { NotificationAPIContext as p } from "../Provider/context.js";
-import { NotificationPreferencesPopup as x } from "../Preferences/NotificationPreferencesPopup.js";
-import { Filter as S } from "./interface.js";
-import { W as b } from "../../assets/WebPushOptInMessage.js";
-import { c as C } from "../../assets/createSvgIcon.js";
-import { D as I } from "../../assets/Divider.js";
-const H = C(/* @__PURE__ */ n("path", {
+import { jsx as n, jsxs as f } from "react/jsx-runtime";
+import { useState as h, useContext as u, useEffect as p } from "react";
+import { Inbox as x } from "./Inbox.js";
+import { NotificationAPIContext as b } from "../Provider/context.js";
+import { NotificationPreferencesPopup as S } from "../Preferences/NotificationPreferencesPopup.js";
+import { Filter as C } from "./interface.js";
+import { getThemeColors as I } from "../../utils/theme.js";
+import { W as H } from "../../assets/WebPushOptInMessage.js";
+import { c as P } from "../../assets/createSvgIcon.js";
+import { u as y } from "../../assets/ButtonBase.js";
+import { D as v } from "../../assets/Divider.js";
+const M = P(/* @__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"), O = (e) => {
-  var a, o, c, l;
-  const [f, r] = d(!1), i = m(p);
-  if (h(() => {
+}), "Language"), R = (e) => {
+  var a, c, s, l;
+  const [m, o] = h(!1), i = u(b), g = y(), r = I(g);
+  if (p(() => {
     if (!i) return;
     i.markAsOpened();
-    const g = setInterval(() => {
+    const d = setInterval(() => {
       i.markAsOpened();
     }, 5e3);
-    return () => clearInterval(g);
+    return () => clearInterval(d);
   }, [i]), !i)
     return null;
   const t = {
@@ -26,33 +28,34 @@ const H = C(/* @__PURE__ */ n("path", {
     pageSize: e.pageSize || 5,
     pagePosition: e.pagePosition || "top",
     style: e.style || {},
-    filter: e.filter || S.ALL,
+    filter: e.filter || C.ALL,
     infiniteScrollHeight: e.infiniteScrollHeight ? e.infiniteScrollHeight : window.innerHeight * 0.75,
     renderers: {
       notification: (a = e.renderers) == null ? void 0 : a.notification
     },
     header: {
-      title: (o = e.header) == null ? void 0 : o.title,
-      button1ClickHandler: ((c = e.header) == null ? void 0 : c.button1ClickHandler) ?? i.markAsArchived,
-      button2ClickHandler: ((l = e.header) == null ? void 0 : l.button2ClickHandler) ?? (() => r(!0))
+      title: (c = e.header) == null ? void 0 : c.title,
+      button1ClickHandler: ((s = e.header) == null ? void 0 : s.button1ClickHandler) ?? i.markAsArchived,
+      button2ClickHandler: ((l = e.header) == null ? void 0 : l.button2ClickHandler) ?? (() => o(!0))
     },
     imageShape: e.imageShape || "circle",
     newTab: e.newTab ?? !1
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ f(
     "div",
     {
       style: {
         padding: "0 12px",
         boxSizing: "border-box",
         borderRadius: 8,
-        background: "#fff",
-        border: "1px solid #dcdcdc",
+        background: r.paper,
+        border: `1px solid ${r.border}`,
+        color: r.text,
         ...e.style
       },
       children: [
         /* @__PURE__ */ n(
-          u,
+          x,
           {
             maxHeight: t.infiniteScrollHeight,
             pagination: t.pagination,
@@ -65,13 +68,18 @@ const H = C(/* @__PURE__ */ n("path", {
             newTab: t.newTab
           }
         ),
-        i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ s("div", { children: [
-          /* @__PURE__ */ n(I, { style: { margin: "10px 0" } }),
+        i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ f("div", { children: [
           /* @__PURE__ */ n(
-            b,
+            v,
+            {
+              style: { margin: "10px 0", borderColor: r.divider }
+            }
+          ),
+          /* @__PURE__ */ n(
+            H,
             {
               hideAfterInteraction: !0,
-              icon: /* @__PURE__ */ n(H, { type: "text", style: { marginLeft: "9px" } }),
+              icon: /* @__PURE__ */ n(M, { type: "text", style: { marginLeft: "9px" } }),
               descriptionStyle: {
                 flexDirection: "column",
                 // Stack the elements vertically
@@ -93,10 +101,10 @@ const H = C(/* @__PURE__ */ n("path", {
           )
         ] }),
         /* @__PURE__ */ n(
-          x,
+          S,
           {
-            open: f,
-            onClose: () => r(!1)
+            open: m,
+            onClose: () => o(!1)
           }
         )
       ]
@@ -104,5 +112,5 @@ const H = C(/* @__PURE__ */ n("path", {
   );
 };
 export {
-  O as NotificationFeed
+  R as NotificationFeed
 };

package/dist/components/Notifications/NotificationLauncher.js

@@ -1,26 +1,28 @@
-import { jsx as o, jsxs as a } from "react/jsx-runtime";
-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 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, m, p, b;
-  const [I, c] = l(!1), [i, s] = l(!1), n = C(z), [P, O] = l(null);
-  if (!n)
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { useState as c, useContext as y } from "react";
+import { Inbox as z } from "./Inbox.js";
+import { UnreadBadge as T } from "./UnreadBadge.js";
+import { NotificationAPIContext as N } from "../Provider/context.js";
+import { NotificationPreferencesPopup as k } from "../Preferences/NotificationPreferencesPopup.js";
+import { getThemeColors as v } from "../../utils/theme.js";
+import { W as H, L as A } from "../../assets/WebPushOptInMessage.js";
+import { u as L } from "../../assets/ButtonBase.js";
+import { N as w } from "../../assets/channelUtils.js";
+import { I as W } from "../../assets/IconButton.js";
+import { P as B } from "../../assets/Popover.js";
+import { D as E } from "../../assets/Divider.js";
+const K = (e) => {
+  var f, u, h, p, g, m, b, I;
+  const [x, d] = c(!1), [r, s] = c(!1), i = y(N), [C, P] = c(null), O = L(), n = v(O);
+  if (!i)
     return null;
   const t = {
     buttonIcon: e.buttonIcon || /* @__PURE__ */ o(
-      v,
+      w,
       {
         style: {
           fontSize: e.buttonIconSize || 20,
-          color: e.iconColor || "#000000"
+          color: e.iconColor || n.icon
         }
       }
     ),
@@ -32,7 +34,7 @@ const j = (e) => {
     popupWidth: e.popupWidth || 400,
     popupHeight: e.popupHeight || 600,
     buttonIconSize: e.buttonIconSize || 20,
-    iconColor: e.iconColor || "#000000",
+    iconColor: e.iconColor || n.icon,
     pagination: e.pagination || "INFINITE_SCROLL",
     pageSize: e.pageSize || 10,
     pagePosition: e.pagePosition || "top",
@@ -44,24 +46,24 @@ const j = (e) => {
     count: e.count || "COUNT_UNOPENED_NOTIFICATIONS",
     filter: e.filter || "ALL",
     header: {
-      title: (d = e.header) == null ? void 0 : d.title,
-      button1ClickHandler: ((f = e.header) == null ? void 0 : f.button1ClickHandler) ?? n.markAsArchived,
-      button2ClickHandler: ((u = e.header) == null ? void 0 : u.button2ClickHandler) ?? (() => c(!0))
+      title: (f = e.header) == null ? void 0 : f.title,
+      button1ClickHandler: ((u = e.header) == null ? void 0 : u.button1ClickHandler) ?? i.markAsArchived,
+      button2ClickHandler: ((h = e.header) == null ? void 0 : h.button2ClickHandler) ?? (() => d(!0))
     },
     renderers: {
-      notification: (h = e.renderers) == null ? void 0 : h.notification
+      notification: (p = e.renderers) == null ? void 0 : p.notification
     },
     popoverPosition: {
       anchorOrigin: {
         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"
+        horizontal: ((I = (b = e.popoverPosition) == null ? void 0 : b.anchorOrigin) == null ? void 0 : I.horizontal) ?? "left"
       }
     },
     newTab: e.newTab ?? !1
-  }, x = (r) => {
-    s(!i), O(r == null ? void 0 : r.currentTarget), i && n.markAsOpened();
+  }, S = (a) => {
+    s(!r), P(a == null ? void 0 : a.currentTarget), r && i.markAsOpened();
   };
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -77,14 +79,14 @@ const j = (e) => {
             style: {
               display: "inline-block"
             },
-            children: /* @__PURE__ */ o(y, { ...e.unreadBadgeProps, count: t.count, children: /* @__PURE__ */ o(A, { style: t.buttonStyles, onClick: x, children: t.buttonIcon }) })
+            children: /* @__PURE__ */ o(T, { ...e.unreadBadgeProps, count: t.count, children: /* @__PURE__ */ o(W, { style: t.buttonStyles, onClick: S, children: t.buttonIcon }) })
           }
         ),
-        /* @__PURE__ */ a(
-          H,
+        /* @__PURE__ */ o(
+          B,
           {
-            open: i,
-            anchorEl: P,
+            open: r,
+            anchorEl: C,
             anchorReference: "anchorEl",
             anchorOrigin: {
               horizontal: "center",
@@ -98,45 +100,69 @@ const j = (e) => {
             slotProps: {
               paper: {
                 style: {
-                  width: t.popupWidth,
-                  padding: "0 16px",
-                  borderRadius: 8
+                  borderRadius: 8,
+                  backgroundColor: n.paper,
+                  color: n.text
                 }
               }
             },
-            children: [
-              /* @__PURE__ */ o(
-                S,
-                {
-                  maxHeight: 500,
-                  pagination: t.pagination,
-                  filter: t.filter,
-                  pageSize: t.pageSize,
-                  pagePosition: t.pagePosition,
-                  notificationRenderer: t.renderers.notification,
-                  header: t.header,
-                  newTab: t.newTab
-                }
-              ),
-              n.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ a("div", { children: [
-                /* @__PURE__ */ o(L, { style: { margin: "10px 0" } }),
-                /* @__PURE__ */ o(
-                  T,
-                  {
-                    hideAfterInteraction: !0,
-                    icon: /* @__PURE__ */ o(k, { type: "text", style: { marginLeft: "9px" } }),
-                    alertContainerStyle: { maxWidth: "345px" }
-                  }
-                )
-              ] })
-            ]
+            children: /* @__PURE__ */ l(
+              "div",
+              {
+                style: {
+                  width: t.popupWidth,
+                  padding: "0 16px",
+                  zIndex: t.popupZIndex,
+                  height: t.popupHeight,
+                  backgroundColor: n.paper,
+                  color: n.text
+                },
+                children: [
+                  /* @__PURE__ */ o(
+                    z,
+                    {
+                      maxHeight: t.popupHeight - 73,
+                      pagination: t.pagination,
+                      filter: t.filter,
+                      pageSize: t.pageSize,
+                      pagePosition: t.pagePosition,
+                      notificationRenderer: t.renderers.notification,
+                      header: t.header,
+                      newTab: t.newTab
+                    }
+                  ),
+                  i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ l("div", { children: [
+                    /* @__PURE__ */ o(
+                      E,
+                      {
+                        style: { margin: "10px 0", borderColor: n.divider }
+                      }
+                    ),
+                    /* @__PURE__ */ o(
+                      H,
+                      {
+                        hideAfterInteraction: !0,
+                        icon: /* @__PURE__ */ o(
+                          A,
+                          {
+                            type: "text",
+                            style: { marginLeft: "9px" }
+                          }
+                        ),
+                        alertContainerStyle: { maxWidth: "345px" }
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ o(
-          N,
+          k,
           {
-            open: I,
-            onClose: () => c(!1)
+            open: x,
+            onClose: () => d(!1)
           }
         )
       ]
@@ -144,5 +170,5 @@ const j = (e) => {
   );
 };
 export {
-  j as NotificationLauncher
+  K as NotificationLauncher
 };

package/dist/components/Notifications/NotificationPopup.js

@@ -1,27 +1,29 @@
-import { jsx as o, jsxs as r, Fragment as C } from "react/jsx-runtime";
-import { useState as m, useContext as O } from "react";
-import { Inbox as S } from "./Inbox.js";
-import { UnreadBadge as x } from "./UnreadBadge.js";
-import { NotificationAPIContext as v } from "../Provider/context.js";
-import { NotificationPreferencesPopup as N } from "../Preferences/NotificationPreferencesPopup.js";
-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 T } from "../../assets/Popover.js";
-import { D as A } from "../../assets/Divider.js";
-const j = (e) => {
-  var c, d, u, h, s, p, g, f;
-  const [I, a] = m(!1), [i, l] = m(null), n = O(v);
-  if (!n)
+import { jsx as t, jsxs as a, Fragment as O } from "react/jsx-runtime";
+import { useState as b, useContext as S } from "react";
+import { Inbox as v } from "./Inbox.js";
+import { UnreadBadge as N } from "./UnreadBadge.js";
+import { NotificationAPIContext as k } from "../Provider/context.js";
+import { NotificationPreferencesPopup as z } from "../Preferences/NotificationPreferencesPopup.js";
+import { Filter as T } from "./interface.js";
+import { getThemeColors as y } from "../../utils/theme.js";
+import { W as H } from "../../assets/WebPushOptInMessage.js";
+import { N as A } from "../../assets/channelUtils.js";
+import { u as w } from "../../assets/ButtonBase.js";
+import { I as B } from "../../assets/IconButton.js";
+import { P as W } from "../../assets/Popover.js";
+import { D as E } from "../../assets/Divider.js";
+const V = (e) => {
+  var d, u, h, s, p, g, f, m;
+  const [I, l] = b(!1), [r, c] = b(null), i = S(k), P = w(), n = y(P);
+  if (!i)
     return null;
-  const t = {
-    buttonIcon: e.buttonIcon || /* @__PURE__ */ o(
-      k,
+  const o = {
+    buttonIcon: e.buttonIcon || /* @__PURE__ */ t(
+      A,
       {
         style: {
           fontSize: e.buttonIconSize || 20,
-          color: e.iconColor || "#000000"
+          color: e.iconColor || n.icon
         }
       }
     ),
@@ -33,106 +35,115 @@ const j = (e) => {
     popupWidth: e.popupWidth || 400,
     popupHeight: e.popupHeight || 600,
     buttonIconSize: e.buttonIconSize || 20,
-    iconColor: e.iconColor || "#000000",
+    iconColor: e.iconColor || n.icon,
     pagination: e.pagination || "INFINITE_SCROLL",
     pageSize: e.pageSize || 10,
     pagePosition: e.pagePosition || "bottom",
     popupZIndex: e.popupZIndex || 1030,
     unreadBadgeProps: e.unreadBadgeProps ?? {},
     count: e.count || "COUNT_UNOPENED_NOTIFICATIONS",
-    filter: e.filter || z.ALL,
+    filter: e.filter || T.ALL,
     header: {
-      title: (c = e.header) == null ? void 0 : c.title,
-      button1ClickHandler: ((d = e.header) == null ? void 0 : d.button1ClickHandler) ?? n.markAsArchived,
-      button2ClickHandler: ((u = e.header) == null ? void 0 : u.button2ClickHandler) ?? (() => a(!0))
+      title: (d = e.header) == null ? void 0 : d.title,
+      button1ClickHandler: ((u = e.header) == null ? void 0 : u.button1ClickHandler) ?? i.markAsArchived,
+      button2ClickHandler: ((h = e.header) == null ? void 0 : h.button2ClickHandler) ?? (() => l(!0))
     },
     renderers: {
-      notification: (h = e.renderers) == null ? void 0 : h.notification
+      notification: (s = e.renderers) == null ? void 0 : s.notification
     },
     popoverPosition: {
       anchorOrigin: {
-        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"
+        vertical: ((g = (p = e.popoverPosition) == null ? void 0 : p.anchorOrigin) == null ? void 0 : g.vertical) ?? "top",
+        horizontal: ((m = (f = e.popoverPosition) == null ? void 0 : f.anchorOrigin) == null ? void 0 : m.horizontal) ?? "left"
       }
     },
     newTab: e.newTab ?? !1
-  }, b = (P) => {
-    l(P.currentTarget), n.markAsOpened();
+  }, C = (x) => {
+    c(x.currentTarget), i.markAsOpened();
   };
-  return /* @__PURE__ */ r(C, { children: [
-    /* @__PURE__ */ o(
+  return /* @__PURE__ */ a(O, { children: [
+    /* @__PURE__ */ t(
       "div",
       {
         style: {
           display: "inline-block"
         },
-        children: /* @__PURE__ */ o(
-          x,
+        children: /* @__PURE__ */ t(
+          N,
           {
             ...e.unreadBadgeProps,
-            count: t.count,
-            filter: t.filter,
-            children: /* @__PURE__ */ o(H, { onClick: b, style: t.buttonStyles, children: t.buttonIcon })
+            count: o.count,
+            filter: o.filter,
+            children: /* @__PURE__ */ t(B, { onClick: C, style: o.buttonStyles, children: o.buttonIcon })
           }
         )
       }
     ),
-    /* @__PURE__ */ o(
-      T,
+    /* @__PURE__ */ t(
+      W,
       {
-        open: !!i,
-        onClose: () => l(null),
-        anchorEl: i,
+        open: !!r,
+        onClose: () => c(null),
+        anchorEl: r,
         slotProps: {
           paper: {
             style: {
-              borderRadius: 8
+              borderRadius: 8,
+              backgroundColor: n.paper,
+              color: n.text
             }
           }
         },
-        "aria-hidden": !i,
-        anchorOrigin: t.popoverPosition.anchorOrigin,
-        children: /* @__PURE__ */ r(
+        "aria-hidden": !r,
+        anchorOrigin: o.popoverPosition.anchorOrigin,
+        children: /* @__PURE__ */ a(
           "div",
           {
             style: {
-              width: t.popupWidth,
+              width: o.popupWidth,
               padding: "0 16px",
               zIndex: e.popupZIndex,
-              height: t.popupHeight
+              height: o.popupHeight,
+              backgroundColor: n.paper,
+              color: n.text
             },
             children: [
-              /* @__PURE__ */ o(
-                S,
+              /* @__PURE__ */ t(
+                v,
                 {
-                  maxHeight: t.popupHeight - 73,
-                  pagination: t.pagination,
-                  filter: t.filter,
-                  pageSize: t.pageSize,
-                  pagePosition: t.pagePosition,
-                  notificationRenderer: t.renderers.notification,
-                  header: t.header,
-                  newTab: t.newTab
+                  maxHeight: o.popupHeight - 73,
+                  pagination: o.pagination,
+                  filter: o.filter,
+                  pageSize: o.pageSize,
+                  pagePosition: o.pagePosition,
+                  notificationRenderer: o.renderers.notification,
+                  header: o.header,
+                  newTab: o.newTab
                 }
               ),
-              n.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ r("div", { children: [
-                /* @__PURE__ */ o(A, { style: { margin: "10px 0" } }),
-                /* @__PURE__ */ o(y, { hideAfterInteraction: !0 })
+              i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ a("div", { children: [
+                /* @__PURE__ */ t(
+                  E,
+                  {
+                    style: { margin: "10px 0", borderColor: n.divider }
+                  }
+                ),
+                /* @__PURE__ */ t(H, { hideAfterInteraction: !0 })
               ] })
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ o(
-      N,
+    /* @__PURE__ */ t(
+      z,
       {
         open: I,
-        onClose: () => a(!1)
+        onClose: () => l(!1)
       }
     )
   ] });
 };
 export {
-  j as NotificationPopup
+  V as NotificationPopup
 };