@notificationapi/react 0.0.13 → 0.0.14

package/dist/assets/Notification.js

@@ -4492,7 +4492,7 @@ const pu = Un.div`
   &:hover .notification-archive-button {
     visibility: ${(e) => e.$archived ? "hidden" : "visible"};
   }
-`, wu = (e) => /* @__PURE__ */ lt(
+`, wu = (e) => e.renderer ? e.renderer(e.notification) : /* @__PURE__ */ lt(
   pu,
   {
     $redirect: !!e.notification.redirectURL,

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

@@ -1,17 +1,18 @@
 import { ImageShape } from './Notification';
 import { NotificationPopupProps } from './NotificationPopup';
+import { InAppNotification } from '../../interface';
 
 export declare enum Pagination {
     INFINITE_SCROLL = "infinite_scroll",
     PAGINATED = "paginated"
 }
-type InboxProps = {
+export type InboxProps = {
     pagination: keyof typeof Pagination;
     maxHeight: number;
     filter: NotificationPopupProps["filter"];
     imageShape: keyof typeof ImageShape;
     pageSize: number;
     pagePosition: NotificationPopupProps["pagePosition"];
+    notificationRenderer: ((notification: InAppNotification) => JSX.Element) | undefined;
 };
 export declare const Inbox: React.FC<InboxProps>;
-export {};

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

@@ -4,9 +4,11 @@ export declare enum ImageShape {
     square = "square",
     circle = "circle"
 }
-export declare const Notification: (props: {
+export type NotificationProps = {
     notification: InAppNotification;
     markAsArchived: (ids: string[] | "ALL") => void;
     markAsClicked: (id: string) => void;
     imageShape: keyof typeof ImageShape;
-}) => JSX.Element;
+    renderer?: (notification: InAppNotification) => JSX.Element;
+};
+export declare const Notification: (props: NotificationProps) => JSX.Element;

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

@@ -1,5 +1,5 @@
 import { Pagination } from './Inbox';
-import { ImageShape } from './Notification';
+import { ImageShape, NotificationProps } from './Notification';
 import { Filter } from './NotificationPopup';
 import { InAppNotification } from '../../interface';
 
@@ -11,5 +11,8 @@ export type NotificationFeedProps = {
     infiniteScrollHeight?: number;
     style?: React.CSSProperties;
     filter?: keyof typeof Filter | ((n: InAppNotification) => boolean);
+    renderers?: {
+        notification?: NotificationProps["renderer"];
+    };
 };
 export declare const NotificationFeed: React.FC<NotificationFeedProps>;

package/dist/components/Notifications/NotificationFeed.js

@@ -1,24 +1,28 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useContext as o, useEffect as r } from "react";
-import { F as g, I as l } from "../../assets/Inbox.js";
-import { NotificationAPIContext as f } from "../Provider/index.js";
+import { jsx as o } from "react/jsx-runtime";
+import { useContext as r, useEffect as g } from "react";
+import { F as f, I as l } from "../../assets/Inbox.js";
+import { NotificationAPIContext as c } from "../Provider/index.js";
 const h = (i) => {
+  var n;
   const e = {
     imageShape: i.imageShape || "circle",
     pagination: i.pagination || "INFINITE_SCROLL",
     pageSize: i.pageSize || 10,
     pagePosition: i.pagePosition || "top",
     style: i.style || {},
-    filter: i.filter || g.ALL,
-    infiniteScrollHeight: i.infiniteScrollHeight ? i.infiniteScrollHeight : window.innerHeight * 0.75
-  }, t = o(f);
-  return t ? (r(() => {
+    filter: i.filter || f.ALL,
+    infiniteScrollHeight: i.infiniteScrollHeight ? i.infiniteScrollHeight : window.innerHeight * 0.75,
+    renderers: {
+      notification: (n = i.renderers) == null ? void 0 : n.notification
+    }
+  }, t = r(c);
+  return t ? (g(() => {
     t.markAsOpened();
     const a = setInterval(() => {
       t.markAsOpened();
     }, 5e3);
     return () => clearInterval(a);
-  }, []), /* @__PURE__ */ n(
+  }, []), /* @__PURE__ */ o(
     "div",
     {
       style: {
@@ -27,7 +31,7 @@ const h = (i) => {
         background: "#fff",
         ...i.style
       },
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ o(
         l,
         {
           maxHeight: e.infiniteScrollHeight,
@@ -35,7 +39,8 @@ const h = (i) => {
           filter: e.filter,
           imageShape: e.imageShape,
           pageSize: e.pageSize,
-          pagePosition: e.pagePosition
+          pagePosition: e.pagePosition,
+          notificationRenderer: e.renderers.notification
         }
       )
     }

package/dist/components/Notifications/NotificationLauncher.js

@@ -1,13 +1,14 @@
 import { jsx as i } from "react/jsx-runtime";
-import { I as a } from "../../assets/Inbox.js";
+import { I as r } from "../../assets/Inbox.js";
 import { UnreadBadge as f } from "./UnreadBadge.js";
-import { useContext as r } from "react";
+import { useContext as d } from "react";
 import { NotificationAPIContext as g } from "../Provider/index.js";
 import { P as u } from "../../assets/index.js";
-import { B as h } from "../../assets/button.js";
-import { R as d } from "../../assets/BellOutlined.js";
+import { B as c } from "../../assets/button.js";
+import { R as h } from "../../assets/BellOutlined.js";
 var l = /* @__PURE__ */ ((t) => (t.TOP_LEFT = "top-left", t.TOP_RIGHT = "top-right", t.BOTTOM_LEFT = "bottom-left", t.BOTTOM_RIGHT = "bottom-right", t))(l || {});
-const S = (t) => {
+const y = (t) => {
+  var n;
   const e = {
     buttonWidth: t.buttonWidth || 40,
     buttonHeight: t.buttonHeight || 40,
@@ -27,8 +28,11 @@ const S = (t) => {
     offsetY: t.offsetY || 16,
     position: t.position || "BOTTOM_RIGHT",
     count: t.count || "COUNT_UNOPENED_NOTIFICATIONS",
-    filter: t.filter || "ALL"
-  }, o = r(g);
+    filter: t.filter || "ALL",
+    renderers: {
+      notification: (n = t.renderers) == null ? void 0 : n.notification
+    }
+  }, o = d(g);
   return o ? /* @__PURE__ */ i(
     "div",
     {
@@ -44,14 +48,15 @@ const S = (t) => {
           autoAdjustOverflow: !0,
           trigger: "click",
           content: /* @__PURE__ */ i(
-            a,
+            r,
             {
               maxHeight: 500,
               pagination: e.pagination,
               filter: e.filter,
               imageShape: e.imageShape,
               pageSize: e.pageSize,
-              pagePosition: e.pagePosition
+              pagePosition: e.pagePosition,
+              notificationRenderer: e.renderers.notification
             }
           ),
           arrow: !1,
@@ -59,8 +64,8 @@ const S = (t) => {
             padding: "0 16px",
             minWidth: e.popupWidth
           },
-          onOpenChange: (n) => {
-            n && o.markAsOpened();
+          onOpenChange: (a) => {
+            a && o.markAsOpened();
           },
           children: /* @__PURE__ */ i(
             "div",
@@ -78,10 +83,10 @@ const S = (t) => {
                   },
                   count: e.count,
                   children: /* @__PURE__ */ i(
-                    h,
+                    c,
                     {
                       icon: /* @__PURE__ */ i(
-                        d,
+                        h,
                         {
                           style: {
                             fontSize: e.buttonIconSize
@@ -106,6 +111,6 @@ const S = (t) => {
   ) : null;
 };
 export {
-  S as NotificationLauncher,
+  y as NotificationLauncher,
   l as Position
 };

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

@@ -1,6 +1,6 @@
 import { Pagination } from './Inbox';
 import { UnreadBadgeProps } from './UnreadBadge';
-import { ImageShape } from './Notification';
+import { ImageShape, NotificationProps } from './Notification';
 import { InAppNotification } from '../../interface';
 
 export declare enum Filter {
@@ -21,5 +21,8 @@ export type NotificationPopupProps = {
     unreadBadgeProps?: UnreadBadgeProps;
     count?: UnreadBadgeProps["count"];
     filter?: keyof typeof Filter | ((n: InAppNotification) => boolean);
+    renderers?: {
+        notification?: NotificationProps["renderer"];
+    };
 };
 export declare const NotificationPopup: React.FC<NotificationPopupProps>;

package/dist/components/Provider/index.d.ts

@@ -25,7 +25,7 @@ export declare enum DeliveryOptions {
     WEEKLY = "weekly",
     MONTHLY = "monthly"
 }
-export interface Notification {
+export interface NotificationConfig {
     envId: string;
     notificationId: string;
     title: string;
@@ -82,7 +82,7 @@ export interface Preferences {
         notificationId: string;
         title: string;
         channels: Channels[];
-        options: Notification["options"];
+        options: NotificationConfig["options"];
     }[];
     subNotifications: {
         notificationId: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notificationapi/react",
   "private": false,
-  "version": "0.0.13",
+  "version": "0.0.14",
   "type": "module",
   "scripts": {
     "dev": "vite",