@notificationapi/react 1.0.1 → 1.0.3

package/dist/assets/Notification.js

@@ -5895,7 +5895,8 @@ const kc = di.div`
             style: {
               marginRight: 8,
               marginLeft: 12
-            }
+            },
+            variant: t.imageShape === "circle" ? "circular" : "rounded"
           }
         ) }),
         /* @__PURE__ */ ut(

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

@@ -12,5 +12,6 @@ export type InboxProps = {
     notificationRenderer: ((notification: InAppNotification[]) => React.ReactNode) | undefined;
     header?: InboxHeaderProps;
     empty?: React.ReactNode;
+    imageShape?: 'circle' | 'square';
 };
 export declare const Inbox: React.FC<InboxProps>;

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

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

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

@@ -14,5 +14,6 @@ export type NotificationFeedProps = {
         notification?: NotificationProps['renderer'];
     };
     header?: InboxHeaderProps;
+    imageShape?: 'circle' | 'square';
 };
 export declare const NotificationFeed: React.FC<NotificationFeedProps>;

package/dist/components/Notifications/NotificationFeed.js

@@ -1,5 +1,5 @@
 import { jsx as n, jsxs as l } from "react/jsx-runtime";
-import { useState as g, useContext as m, useEffect as h } from "react";
+import { useState as d, useContext as m, useEffect as h } from "react";
 import { I as u } from "../../assets/Inbox.js";
 import { NotificationAPIContext as p } from "../Provider/context.js";
 import { N as x } from "../../assets/NotificationPreferencesPopup.js";
@@ -10,18 +10,18 @@ import { D as C } from "../../assets/Divider.js";
 const H = b(/* @__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) => {
-  var o, a, c, s;
-  const [f, r] = g(!1), t = m(p);
+  var a, o, c, s;
+  const [f, r] = d(!1), i = m(p);
   if (h(() => {
-    if (!t) return;
-    t.markAsOpened();
-    const d = setInterval(() => {
-      t.markAsOpened();
+    if (!i) return;
+    i.markAsOpened();
+    const g = setInterval(() => {
+      i.markAsOpened();
     }, 5e3);
-    return () => clearInterval(d);
-  }, [t]), !t)
+    return () => clearInterval(g);
+  }, [i]), !i)
     return null;
-  const i = {
+  const t = {
     pagination: e.pagination || "INFINITE_SCROLL",
     pageSize: e.pageSize || 5,
     pagePosition: e.pagePosition || "top",
@@ -29,13 +29,14 @@ const H = b(/* @__PURE__ */ n("path", {
     filter: e.filter || S.ALL,
     infiniteScrollHeight: e.infiniteScrollHeight ? e.infiniteScrollHeight : window.innerHeight * 0.75,
     renderers: {
-      notification: (o = e.renderers) == null ? void 0 : o.notification
+      notification: (a = e.renderers) == null ? void 0 : a.notification
     },
     header: {
-      title: (a = e.header) == null ? void 0 : a.title,
-      button1ClickHandler: ((c = e.header) == null ? void 0 : c.button1ClickHandler) ?? t.markAsArchived,
+      title: (o = e.header) == null ? void 0 : o.title,
+      button1ClickHandler: ((c = e.header) == null ? void 0 : c.button1ClickHandler) ?? i.markAsArchived,
       button2ClickHandler: ((s = e.header) == null ? void 0 : s.button2ClickHandler) ?? (() => r(!0))
-    }
+    },
+    imageShape: e.imageShape || "circle"
   };
   return /* @__PURE__ */ l(
     "div",
@@ -52,16 +53,17 @@ const H = b(/* @__PURE__ */ n("path", {
         /* @__PURE__ */ n(
           u,
           {
-            maxHeight: i.infiniteScrollHeight,
-            pagination: i.pagination,
-            filter: i.filter,
-            pageSize: i.pageSize,
-            pagePosition: i.pagePosition,
-            notificationRenderer: i.renderers.notification,
-            header: i.header
+            maxHeight: t.infiniteScrollHeight,
+            pagination: t.pagination,
+            filter: t.filter,
+            pageSize: t.pageSize,
+            pagePosition: t.pagePosition,
+            notificationRenderer: t.renderers.notification,
+            header: t.header,
+            imageShape: t.imageShape
           }
         ),
-        t.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ l("div", { children: [
+        i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ l("div", { children: [
           /* @__PURE__ */ n(C, { style: { margin: "10px 0" } }),
           /* @__PURE__ */ n(
             I,

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 b } from "react";
-import { I as P } from "../../assets/Inbox.js";
-import { UnreadBadge as x } from "./UnreadBadge.js";
-import { NotificationAPIContext as C } from "../Provider/context.js";
-import { N as O } from "../../assets/NotificationPreferencesPopup.js";
-import { W as S, L as y } from "../../assets/WebPushOptInMessage.js";
-import { N } from "../../assets/channelUtils.js";
-import { I as z } from "../../assets/IconButton.js";
-import { P as k } from "../../assets/Popover.js";
-import { D as A } from "../../assets/Divider.js";
-const D = (e) => {
-  var d, f, u, h;
-  const [g, l] = c(!1), [i, s] = c(!1), n = b(C), [m, p] = c(null);
-  if (!n)
+import { useState as c, useContext as C } from "react";
+import { I as S } from "../../assets/Inbox.js";
+import { UnreadBadge as y } from "./UnreadBadge.js";
+import { NotificationAPIContext as z } from "../Provider/context.js";
+import { N } from "../../assets/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";
+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)
     return null;
   const t = {
     buttonIcon: e.buttonIcon || /* @__PURE__ */ o(
-      N,
+      A,
       {
         style: {
           fontSize: e.buttonIconSize || 20,
@@ -45,14 +45,20 @@ const D = (e) => {
     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,
+      button1ClickHandler: ((f = e.header) == null ? void 0 : f.button1ClickHandler) ?? i.markAsArchived,
       button2ClickHandler: ((u = e.header) == null ? void 0 : u.button2ClickHandler) ?? (() => l(!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"
+      }
     }
-  }, I = (r) => {
-    s(!i), p(r == null ? void 0 : r.currentTarget), i && n.markAsOpened();
+  }, x = (r) => {
+    s(!n), O(r == null ? void 0 : r.currentTarget), n && i.markAsOpened();
   };
   return /* @__PURE__ */ a(
     "div",
@@ -70,14 +76,14 @@ const D = (e) => {
             style: {
               display: "inline-block"
             },
-            children: /* @__PURE__ */ o(x, { ...e.unreadBadgeProps, count: t.count, children: /* @__PURE__ */ o(z, { style: t.buttonStyles, onClick: I, children: t.buttonIcon }) })
+            children: /* @__PURE__ */ o(y, { ...e.unreadBadgeProps, count: t.count, children: /* @__PURE__ */ o(H, { style: t.buttonStyles, onClick: x, children: t.buttonIcon }) })
           }
         ),
         /* @__PURE__ */ a(
-          k,
+          L,
           {
-            open: i,
-            anchorEl: m,
+            open: n,
+            anchorEl: b,
             anchorReference: "anchorEl",
             anchorOrigin: {
               horizontal: "center",
@@ -99,7 +105,7 @@ const D = (e) => {
             },
             children: [
               /* @__PURE__ */ o(
-                P,
+                S,
                 {
                   maxHeight: 500,
                   pagination: t.pagination,
@@ -110,13 +116,13 @@ const D = (e) => {
                   header: t.header
                 }
               ),
-              n.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ a("div", { children: [
-                /* @__PURE__ */ o(A, { style: { margin: "10px 0" } }),
+              i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ a("div", { children: [
+                /* @__PURE__ */ o(T, { style: { margin: "10px 0" } }),
                 /* @__PURE__ */ o(
-                  S,
+                  k,
                   {
                     hideAfterInteraction: !0,
-                    icon: /* @__PURE__ */ o(y, { type: "text", style: { marginLeft: "9px" } }),
+                    icon: /* @__PURE__ */ o(v, { type: "text", style: { marginLeft: "9px" } }),
                     alertContainerStyle: { maxWidth: "345px" }
                   }
                 )
@@ -125,9 +131,9 @@ const D = (e) => {
           }
         ),
         /* @__PURE__ */ o(
-          O,
+          N,
           {
-            open: g,
+            open: P,
             onClose: () => l(!1)
           }
         )
@@ -136,5 +142,5 @@ const D = (e) => {
   );
 };
 export {
-  D as NotificationLauncher
+  j as NotificationLauncher
 };

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

@@ -23,5 +23,11 @@ export type NotificationPopupProps = {
         notification?: NotificationProps['renderer'];
     };
     header?: InboxHeaderProps;
+    popoverPosition?: {
+        anchorOrigin?: {
+            vertical: 'top' | 'center' | 'bottom';
+            horizontal: 'left' | 'center' | 'right';
+        };
+    };
 };
 export declare const NotificationPopup: React.FC<NotificationPopupProps>;

package/dist/components/Notifications/NotificationPopup.js

@@ -1,23 +1,23 @@
-import { jsx as n, jsxs as r, Fragment as m } from "react/jsx-runtime";
-import { useState as p, useContext as I } from "react";
-import { I as P } from "../../assets/Inbox.js";
-import { UnreadBadge as b } from "./UnreadBadge.js";
-import { NotificationAPIContext as C } from "../Provider/context.js";
-import { N as S } from "../../assets/NotificationPreferencesPopup.js";
-import { Filter as x } from "./interface.js";
-import { W as N } from "../../assets/WebPushOptInMessage.js";
-import { N as O } from "../../assets/channelUtils.js";
-import { I as y } from "../../assets/IconButton.js";
-import { P as k } from "../../assets/Popover.js";
-import { D as z } from "../../assets/Divider.js";
-const R = (e) => {
-  var d, c, u, s;
-  const [f, a] = p(!1), [i, l] = p(null), o = I(C);
-  if (!o)
+import { jsx as o, jsxs as r, Fragment as C } from "react/jsx-runtime";
+import { useState as m, useContext as O } from "react";
+import { I as S } from "../../assets/Inbox.js";
+import { UnreadBadge as x } from "./UnreadBadge.js";
+import { NotificationAPIContext as N } from "../Provider/context.js";
+import { N as v } from "../../assets/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 A } from "../../assets/Popover.js";
+import { D as B } from "../../assets/Divider.js";
+const j = (e) => {
+  var c, d, u, h, s, p, g, f;
+  const [I, a] = m(!1), [n, l] = m(null), i = O(N);
+  if (!i)
     return null;
   const t = {
-    buttonIcon: e.buttonIcon || /* @__PURE__ */ n(
-      O,
+    buttonIcon: e.buttonIcon || /* @__PURE__ */ o(
+      k,
       {
         style: {
           fontSize: e.buttonIconSize || 20,
@@ -36,46 +36,52 @@ const R = (e) => {
     iconColor: e.iconColor || "#000000",
     pagination: e.pagination || "INFINITE_SCROLL",
     pageSize: e.pageSize || 10,
-    pagePosition: e.pagePosition || "top",
+    pagePosition: e.pagePosition || "bottom",
     popupZIndex: e.popupZIndex || 1030,
     unreadBadgeProps: e.unreadBadgeProps ?? {},
     count: e.count || "COUNT_UNOPENED_NOTIFICATIONS",
-    filter: e.filter || x.ALL,
+    filter: e.filter || z.ALL,
     header: {
-      title: (d = e.header) == null ? void 0 : d.title,
-      button1ClickHandler: ((c = e.header) == null ? void 0 : c.button1ClickHandler) ?? o.markAsArchived,
+      title: (c = e.header) == null ? void 0 : c.title,
+      button1ClickHandler: ((d = e.header) == null ? void 0 : d.button1ClickHandler) ?? i.markAsArchived,
       button2ClickHandler: ((u = e.header) == null ? void 0 : u.button2ClickHandler) ?? (() => a(!0))
     },
     renderers: {
-      notification: (s = e.renderers) == null ? void 0 : s.notification
+      notification: (h = e.renderers) == null ? void 0 : h.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"
+      }
     }
-  }, h = (g) => {
-    l(g.currentTarget), o.markAsOpened();
+  }, P = (b) => {
+    l(b.currentTarget), i.markAsOpened();
   };
-  return /* @__PURE__ */ r(m, { children: [
-    /* @__PURE__ */ n(
+  return /* @__PURE__ */ r(C, { children: [
+    /* @__PURE__ */ o(
       "div",
       {
         style: {
           display: "inline-block"
         },
-        children: /* @__PURE__ */ n(
-          b,
+        children: /* @__PURE__ */ o(
+          x,
           {
             ...e.unreadBadgeProps,
             count: t.count,
             filter: t.filter,
-            children: /* @__PURE__ */ n(y, { onClick: h, style: t.buttonStyles, children: t.buttonIcon })
+            children: /* @__PURE__ */ o(H, { onClick: P, style: t.buttonStyles, children: t.buttonIcon })
           }
         )
       }
     ),
-    /* @__PURE__ */ n(
-      k,
+    /* @__PURE__ */ o(
+      A,
       {
-        open: !!i,
+        open: !!n,
         onClose: () => l(null),
-        anchorEl: i,
+        anchorEl: n,
         slotProps: {
           paper: {
             style: {
@@ -83,18 +89,20 @@ const R = (e) => {
             }
           }
         },
-        "aria-hidden": !i,
+        "aria-hidden": !n,
+        anchorOrigin: t.popoverPosition.anchorOrigin,
         children: /* @__PURE__ */ r(
           "div",
           {
             style: {
               width: t.popupWidth,
               padding: "0 16px",
-              zIndex: e.popupZIndex
+              zIndex: e.popupZIndex,
+              height: t.popupHeight
             },
             children: [
-              /* @__PURE__ */ n(
-                P,
+              /* @__PURE__ */ o(
+                S,
                 {
                   maxHeight: t.popupHeight - 73,
                   pagination: t.pagination,
@@ -105,24 +113,24 @@ const R = (e) => {
                   header: t.header
                 }
               ),
-              o.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ r("div", { children: [
-                /* @__PURE__ */ n(z, { style: { margin: "10px 0" } }),
-                /* @__PURE__ */ n(N, { hideAfterInteraction: !0 })
+              i.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ r("div", { children: [
+                /* @__PURE__ */ o(B, { style: { margin: "10px 0" } }),
+                /* @__PURE__ */ o(y, { hideAfterInteraction: !0 })
               ] })
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ n(
-      S,
+    /* @__PURE__ */ o(
+      v,
       {
-        open: f,
+        open: I,
         onClose: () => a(!1)
       }
     )
   ] });
 };
 export {
-  R as NotificationPopup
+  j as NotificationPopup
 };

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

@@ -15,5 +15,7 @@ export type UnreadBadgeProps = {
         bottom?: number;
         left?: number;
     };
+    fontColor?: string;
+    bubbleColor?: string;
 };
 export declare const UnreadBadge: React.FunctionComponent<PropsWithChildren<UnreadBadgeProps>>;

package/dist/components/Notifications/UnreadBadge.js

@@ -1,11 +1,11 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useContext as a } from "react";
-import { NotificationAPIContext as d } from "../Provider/context.js";
+import { jsx as c } from "react/jsx-runtime";
+import { useContext as d } from "react";
+import { NotificationAPIContext as a } from "../Provider/context.js";
 import { B as u } from "../../assets/Badge.js";
-const C = (t) => {
-  var r, i, c, f;
-  const o = a(d);
-  return /* @__PURE__ */ l(
+const b = (t) => {
+  var r, i, l, f;
+  const o = d(a);
+  return /* @__PURE__ */ c(
     u,
     {
       overlap: "circular",
@@ -15,13 +15,18 @@ const C = (t) => {
       max: t.max,
       variant: t.dot ? "dot" : "standard",
       showZero: t.showZero,
-      color: "error",
+      sx: {
+        "& .MuiBadge-badge": {
+          backgroundColor: t.bubbleColor || "#d32f2f",
+          color: t.fontColor || "#FFF"
+        }
+      },
       slotProps: {
         badge: {
           style: {
             top: (r = t.offset) == null ? void 0 : r.top,
             right: (i = t.offset) == null ? void 0 : i.right,
-            bottom: (c = t.offset) == null ? void 0 : c.bottom,
+            bottom: (l = t.offset) == null ? void 0 : l.bottom,
             left: (f = t.offset) == null ? void 0 : f.left
           }
         }
@@ -31,5 +36,5 @@ const C = (t) => {
   );
 };
 export {
-  C as UnreadBadge
+  b as UnreadBadge
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notificationapi/react",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "browserslist": [
     "last 2 versions",
@@ -43,7 +43,7 @@
     "glob": "^10.4.1",
     "prettier": "^3.3.3",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0",
+    "vite": "^5.4.14",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-lib-inject-css": "^2.1.1"
   },