@notificationapi/react 1.7.0 → 1.8.0

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
 };

package/dist/components/Preferences/NotificationPreferencesInline.js

@@ -1,42 +1,60 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { useContext as i } from "react";
-import { Preferences as n } from "./Preferences.js";
-import { NotificationAPIContext as o } from "../Provider/context.js";
-import { W as s } from "../../assets/WebPushOptInMessage.js";
-import { D as f } from "../../assets/Divider.js";
-function u(l) {
-  const e = i(o);
-  return e ? /* @__PURE__ */ r("div", { style: { borderRadius: 8, border: "1px solid #dcdcdc" }, children: [
-    /* @__PURE__ */ t(n, {}),
-    " ",
-    e.webPushOptInMessage && /* @__PURE__ */ r("div", { children: [
-      /* @__PURE__ */ t(f, { style: { margin: "10px 0" } }),
-      /* @__PURE__ */ t(
-        s,
-        {
-          hideAfterInteraction: !1,
-          descriptionStyle: {
-            flexDirection: "column",
-            // Stack the elements vertically
-            justifyContent: "flex-start",
-            // Align items to the left
-            fontSize: "14px",
-            alignItems: "flex-start"
-            // Align items to the left
-          },
-          buttonContainerStyle: {
-            justifyContent: "flex-start",
-            // Align buttons to the left
-            alignItems: "flex-start",
-            // Align buttons to the left
-            marginTop: "10px"
-            // Add some space between message and buttons
-          }
-        }
-      )
-    ] })
-  ] }) : null;
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { useContext as n } from "react";
+import { Preferences as s } from "./Preferences.js";
+import { NotificationAPIContext as m } from "../Provider/context.js";
+import { W as f } from "../../assets/WebPushOptInMessage.js";
+import { getThemeColors as l } from "../../utils/theme.js";
+import { u as a } from "../../assets/ButtonBase.js";
+import { D as p } from "../../assets/Divider.js";
+function y(c) {
+  const r = n(m), i = a(), e = l(i);
+  return r ? /* @__PURE__ */ o(
+    "div",
+    {
+      style: {
+        borderRadius: 8,
+        border: `1px solid ${e.border}`,
+        backgroundColor: e.paper,
+        color: e.text
+      },
+      children: [
+        /* @__PURE__ */ t(s, {}),
+        " ",
+        r.webPushOptInMessage && /* @__PURE__ */ o("div", { children: [
+          /* @__PURE__ */ t(
+            p,
+            {
+              style: { margin: "10px 0", borderColor: e.divider }
+            }
+          ),
+          /* @__PURE__ */ t(
+            f,
+            {
+              hideAfterInteraction: !1,
+              descriptionStyle: {
+                flexDirection: "column",
+                // Stack the elements vertically
+                justifyContent: "flex-start",
+                // Align items to the left
+                fontSize: "14px",
+                alignItems: "flex-start"
+                // Align items to the left
+              },
+              buttonContainerStyle: {
+                justifyContent: "flex-start",
+                // Align buttons to the left
+                alignItems: "flex-start",
+                // Align buttons to the left
+                marginTop: "10px"
+                // Add some space between message and buttons
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  ) : null;
 }
 export {
-  u as NotificationPreferencesInline
+  y as NotificationPreferencesInline
 };