@notificationapi/react 0.0.15 → 0.0.17

package/dist/assets/Notification.js

@@ -1,4 +1,4 @@
-import { jsxs as lt, jsx as oe } from "react/jsx-runtime";
+import { jsxs as lt, jsx as ae } from "react/jsx-runtime";
 import * as q from "react";
 import ie, { useRef as Qe, useDebugValue as er, createElement as uo, useContext as co, useMemo as ye, useCallback as fo, useState as lo, useEffect as tr } from "react";
 import { S as po, U as N, V as le, W as B, X as U, Y as mo, Z as pt, $ as Me, a0 as pe, a1 as ho, a2 as dn, a3 as yo, a4 as go, a5 as mn, a6 as me, a7 as vo, a8 as bo, a9 as Te, aa as rr, ab as nr, h as wo, ac as So, g as Oo, m as To, r as xo, u as Eo, p as Po, a as hn, j as Ao, c as St, b as Ro, ad as Co, ae as $o, af as ko, ag as Do, ah as Io, ai as yn, aj as gn, ak as vn } from "./colors.js";
@@ -436,16 +436,16 @@ const Qo = (e, t) => {
   } = e, Z = Zo(e, ["prefixCls", "shape", "size", "src", "srcSet", "icon", "className", "rootClassName", "alt", "draggable", "children", "crossOrigin"]), Y = _o((g) => {
     var w, C;
     return (C = (w = M ?? (y == null ? void 0 : y.size)) !== null && w !== void 0 ? w : g) !== null && C !== void 0 ? C : "default";
-  }), Q = Object.keys(typeof Y == "object" ? Y || {} : {}).some((g) => ["xs", "sm", "md", "lg", "xl", "xxl"].includes(g)), ae = Go(Q), X = q.useMemo(() => {
+  }), Q = Object.keys(typeof Y == "object" ? Y || {} : {}).some((g) => ["xs", "sm", "md", "lg", "xl", "xxl"].includes(g)), oe = Go(Q), X = q.useMemo(() => {
     if (typeof Y != "object")
       return {};
-    const g = Sn.find((C) => ae[C]), w = Y[g];
+    const g = Sn.find((C) => oe[C]), w = Y[g];
     return w ? {
       width: w,
       height: w,
       fontSize: w && (f || ee) ? w / 2 : 18
     } : {};
-  }, [ae, Y]);
+  }, [oe, Y]);
   if (process.env.NODE_ENV !== "production") {
     const g = Ao("Avatar");
     process.env.NODE_ENV !== "production" && g(!(typeof f == "string" && f.length > 2), "breaking", `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${f}\` at https://ant.design/components/icon`);
@@ -1142,9 +1142,9 @@ function qa(e, t, r) {
   var k = new Ua(r, b, n ? o.componentStyle : void 0);
   function M(x, f) {
     return function(D, V, W) {
-      var K = D.attrs, ee = D.componentStyle, re = D.defaultProps, Z = D.foldedComponentIds, Y = D.styledComponentId, Q = D.target, ae = ie.useContext(Fn), X = mr(), L = D.shouldForwardProp || X.shouldForwardProp;
+      var K = D.attrs, ee = D.componentStyle, re = D.defaultProps, Z = D.foldedComponentIds, Y = D.styledComponentId, Q = D.target, oe = ie.useContext(Fn), X = mr(), L = D.shouldForwardProp || X.shouldForwardProp;
       process.env.NODE_ENV !== "production" && er(Y);
-      var J = sa(V, ae, re) || Ce, H = function(_, $, A) {
+      var J = sa(V, oe, re) || Ce, H = function(_, $, A) {
         for (var g, w = te(te({}, $), { className: void 0, theme: A }), C = 0; C < _.length; C += 1) {
           var G = $e(g = _[C]) ? g(w) : g;
           for (var d in G)
@@ -3408,7 +3408,7 @@ function ms() {
         }
       }
     }
-    var f = c, D = l, V = s, W = i, K = t, ee = m, re = n, Z = E, Y = y, Q = r, ae = a, X = o, L = v, J = !1;
+    var f = c, D = l, V = s, W = i, K = t, ee = m, re = n, Z = E, Y = y, Q = r, oe = a, X = o, L = v, J = !1;
     function H(d) {
       return J || (J = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), p(d) || x(d) === c;
     }
@@ -3448,7 +3448,7 @@ function ms() {
     function G(d) {
       return x(d) === v;
     }
-    z.AsyncMode = f, z.ConcurrentMode = D, z.ContextConsumer = V, z.ContextProvider = W, z.Element = K, z.ForwardRef = ee, z.Fragment = re, z.Lazy = Z, z.Memo = Y, z.Portal = Q, z.Profiler = ae, z.StrictMode = X, z.Suspense = L, z.isAsyncMode = H, z.isConcurrentMode = p, z.isContextConsumer = h, z.isContextProvider = T, z.isElement = P, z.isForwardRef = R, z.isFragment = _, z.isLazy = $, z.isMemo = A, z.isPortal = g, z.isProfiler = w, z.isStrictMode = C, z.isSuspense = G, z.isValidElementType = O, z.typeOf = x;
+    z.AsyncMode = f, z.ConcurrentMode = D, z.ContextConsumer = V, z.ContextProvider = W, z.Element = K, z.ForwardRef = ee, z.Fragment = re, z.Lazy = Z, z.Memo = Y, z.Portal = Q, z.Profiler = oe, z.StrictMode = X, z.Suspense = L, z.isAsyncMode = H, z.isConcurrentMode = p, z.isContextConsumer = h, z.isContextProvider = T, z.isElement = P, z.isForwardRef = R, z.isFragment = _, z.isLazy = $, z.isMemo = A, z.isPortal = g, z.isProfiler = w, z.isStrictMode = C, z.isSuspense = G, z.isValidElementType = O, z.typeOf = x;
   }()), z;
 }
 var Qr;
@@ -3738,12 +3738,12 @@ Valid keys: ` + JSON.stringify(Object.keys(p), null, "  ")
           return !1;
       }
     }
-    function ae(p, h) {
+    function oe(p, h) {
       return p === "symbol" ? !0 : h ? h["@@toStringTag"] === "Symbol" || typeof Symbol == "function" && h instanceof Symbol : !1;
     }
     function X(p) {
       var h = typeof p;
-      return Array.isArray(p) ? "array" : p instanceof RegExp ? "object" : ae(h, p) ? "symbol" : h;
+      return Array.isArray(p) ? "array" : p instanceof RegExp ? "object" : oe(h, p) ? "symbol" : h;
     }
     function L(p) {
       if (typeof p > "u" || p === null)
@@ -4293,11 +4293,11 @@ function ru(e) {
       Y(H);
     }
   }, [x]);
-  var ae = ye(function() {
+  var oe = ye(function() {
     return Is(M, m);
   }, [M, m]), X = ye(function() {
-    return c ? c(t) : ae(t);
-  }, [t, c, ae]);
+    return c ? c(t) : oe(t);
+  }, [t, c, oe]);
   return {
     date: t,
     formattedDate: Z,
@@ -4510,7 +4510,7 @@ const pu = Un.div`
       width: "100%"
     },
     children: [
-      /* @__PURE__ */ oe("div", { children: /* @__PURE__ */ oe(
+      /* @__PURE__ */ ae("div", { children: /* @__PURE__ */ ae(
         Tn,
         {
           src: e.notification.imageURL,
@@ -4529,20 +4529,19 @@ const pu = Un.div`
             flexGrow: 1
           },
           children: [
-            /* @__PURE__ */ oe("div", { children: /* @__PURE__ */ oe(or.Text, { children: /* @__PURE__ */ oe(
+            /* @__PURE__ */ ae("div", { children: /* @__PURE__ */ ae(or.Text, { children: /* @__PURE__ */ ae(
               "span",
               {
                 dangerouslySetInnerHTML: { __html: e.notification.title }
               }
             ) }) }),
-            /* @__PURE__ */ oe("div", { children: /* @__PURE__ */ oe(or.Text, { type: "secondary", style: { fontSize: 12 }, children: /* @__PURE__ */ oe(
+            /* @__PURE__ */ ae("div", { children: /* @__PURE__ */ ae(or.Text, { type: "secondary", style: { fontSize: 12 }, children: /* @__PURE__ */ ae(
               st,
               {
                 date: new Date(e.notification.date).getTime(),
                 locale: "en-US"
               }
-            ) }) }),
-            e.extraRenderer && /* @__PURE__ */ oe("div", { children: e.extraRenderer(e.notification) })
+            ) }) })
           ]
         }
       ),
@@ -4557,18 +4556,18 @@ const pu = Un.div`
             alignItems: "center"
           },
           children: [
-            /* @__PURE__ */ oe(
+            /* @__PURE__ */ ae(
               Fo,
               {
                 className: "notification-archive-button",
-                icon: /* @__PURE__ */ oe(Mo, {}),
+                icon: /* @__PURE__ */ ae(Mo, {}),
                 size: "small",
                 type: "text",
                 shape: "circle",
                 onClick: (t) => (e.markAsArchived([e.notification.id]), t.preventDefault(), t.stopPropagation(), !1)
               }
             ),
-            /* @__PURE__ */ oe(
+            /* @__PURE__ */ ae(
               zo,
               {
                 dot: !0,

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

@@ -14,6 +14,8 @@ export type InboxProps = {
     pageSize: number;
     pagePosition: NotificationPopupProps["pagePosition"];
     notificationRenderer: ((notification: InAppNotification) => JSX.Element) | undefined;
-    notificationExtraRenderer: ((notification: InAppNotification) => JSX.Element) | undefined;
+    header?: {
+        title?: JSX.Element;
+    };
 };
 export declare const Inbox: React.FC<InboxProps>;

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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-export declare const InboxHeader: (props: {
+export type InboxHeaderProps = {
     markAsArchived: (ids: string[] | "ALL") => void;
-}) => JSX.Element;
+    title?: JSX.Element;
+};
+export declare const InboxHeader: (props: InboxHeaderProps) => JSX.Element;

package/dist/components/Notifications/InboxHeader.js

@@ -1,52 +1,55 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { I as s, T as d, R as f } from "../../assets/index3.js";
-import { P as c } from "../../assets/index.js";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { I as s, T as d, R as m } from "../../assets/index3.js";
+import { P as n } from "../../assets/index.js";
 import { B as a } from "../../assets/button.js";
-import { _ as m } from "../../assets/colors.js";
-import * as n from "react";
-var p = { icon: { tag: "svg", attrs: { viewBox: "64 64 896 896", focusable: "false" }, children: [{ tag: "path", attrs: { d: "M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z" } }] }, name: "setting", theme: "outlined" }, u = function(o, r) {
-  return /* @__PURE__ */ n.createElement(s, m({}, o, {
+import { _ as f } from "../../assets/colors.js";
+import * as i from "react";
+var p = { icon: { tag: "svg", attrs: { viewBox: "64 64 896 896", focusable: "false" }, children: [{ tag: "path", attrs: { d: "M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z" } }] }, name: "setting", theme: "outlined" }, u = function(l, r) {
+  return /* @__PURE__ */ i.createElement(s, f({}, l, {
     ref: r,
     icon: p
   }));
-}, i = /* @__PURE__ */ n.forwardRef(u);
-process.env.NODE_ENV !== "production" && (i.displayName = "SettingOutlined");
-const R = (t) => /* @__PURE__ */ l(
-  "div",
-  {
-    style: {
-      display: "flex",
-      justifyContent: "space-between",
-      paddingRight: 5
-    },
-    children: [
-      /* @__PURE__ */ e(d.Text, { strong: !0, children: "Notifications" }),
-      /* @__PURE__ */ l("div", { children: [
-        /* @__PURE__ */ e(c, { content: "Resolve all", children: /* @__PURE__ */ e(
-          a,
-          {
-            icon: /* @__PURE__ */ e(f, {}),
-            size: "small",
-            type: "text",
-            onClick: () => {
-              t.markAsArchived("ALL");
+}, o = /* @__PURE__ */ i.forwardRef(u);
+process.env.NODE_ENV !== "production" && (o.displayName = "SettingOutlined");
+const R = (e) => {
+  const l = e.title ?? /* @__PURE__ */ t(d.Text, { strong: !0, children: "Notifications" });
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        paddingRight: 5
+      },
+      children: [
+        l,
+        /* @__PURE__ */ c("div", { children: [
+          /* @__PURE__ */ t(n, { content: "Resolve all", children: /* @__PURE__ */ t(
+            a,
+            {
+              icon: /* @__PURE__ */ t(m, {}),
+              size: "small",
+              type: "text",
+              onClick: () => {
+                e.markAsArchived("ALL");
+              }
             }
-          }
-        ) }),
-        /* @__PURE__ */ e(c, { content: "Notification Preferences", children: /* @__PURE__ */ e(
-          a,
-          {
-            icon: /* @__PURE__ */ e(i, {}),
-            size: "small",
-            type: "text",
-            onClick: () => {
+          ) }),
+          /* @__PURE__ */ t(n, { content: "Notification Preferences", children: /* @__PURE__ */ t(
+            a,
+            {
+              icon: /* @__PURE__ */ t(o, {}),
+              size: "small",
+              type: "text",
+              onClick: () => {
+              }
             }
-          }
-        ) })
-      ] })
-    ]
-  }
-);
+          ) })
+        ] })
+      ]
+    }
+  );
+};
 export {
   R as InboxHeader
 };

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

@@ -10,6 +10,5 @@ export type NotificationProps = {
     markAsClicked: (id: string) => void;
     imageShape: keyof typeof ImageShape;
     renderer?: (notification: InAppNotification) => JSX.Element;
-    extraRenderer?: (notification: InAppNotification) => JSX.Element;
 };
 export declare const Notification: (props: NotificationProps) => JSX.Element;

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

@@ -13,7 +13,9 @@ export type NotificationFeedProps = {
     filter?: keyof typeof Filter | ((n: InAppNotification) => boolean);
     renderers?: {
         notification?: NotificationProps["renderer"];
-        notificationExtra?: NotificationProps["extraRenderer"];
+    };
+    header?: {
+        title?: JSX.Element;
     };
 };
 export declare const NotificationFeed: React.FC<NotificationFeedProps>;

package/dist/components/Notifications/NotificationFeed.js

@@ -1,53 +1,55 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useContext as f, useEffect as c } from "react";
-import { F as g, I as l } from "../../assets/Inbox.js";
+import { jsx as o } from "react/jsx-runtime";
+import { useContext as l, useEffect as g } from "react";
+import { F as f, I as c } from "../../assets/Inbox.js";
 import { NotificationAPIContext as d } from "../Provider/index.js";
-const h = (i) => {
-  var n, o;
-  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,
+const x = (e) => {
+  var n, a;
+  const i = {
+    imageShape: e.imageShape || "circle",
+    pagination: e.pagination || "INFINITE_SCROLL",
+    pageSize: e.pageSize || 10,
+    pagePosition: e.pagePosition || "top",
+    style: e.style || {},
+    filter: e.filter || f.ALL,
+    infiniteScrollHeight: e.infiniteScrollHeight ? e.infiniteScrollHeight : window.innerHeight * 0.75,
     renderers: {
-      notification: (n = i.renderers) == null ? void 0 : n.notification,
-      notificationExtra: (o = i.renderers) == null ? void 0 : o.notificationExtra
+      notification: (n = e.renderers) == null ? void 0 : n.notification
+    },
+    header: {
+      title: (a = e.header) == null ? void 0 : a.title
     }
-  }, t = f(d);
-  return t ? (c(() => {
+  }, t = l(d);
+  return t ? (g(() => {
     t.markAsOpened();
     const r = setInterval(() => {
       t.markAsOpened();
     }, 5e3);
     return () => clearInterval(r);
-  }, []), /* @__PURE__ */ a(
+  }, []), /* @__PURE__ */ o(
     "div",
     {
       style: {
         padding: 12,
         boxSizing: "border-box",
         background: "#fff",
-        ...i.style
+        ...e.style
       },
-      children: /* @__PURE__ */ a(
-        l,
+      children: /* @__PURE__ */ o(
+        c,
         {
-          maxHeight: e.infiniteScrollHeight,
-          pagination: e.pagination,
-          filter: e.filter,
-          imageShape: e.imageShape,
-          pageSize: e.pageSize,
-          pagePosition: e.pagePosition,
-          notificationRenderer: e.renderers.notification,
-          notificationExtraRenderer: e.renderers.notificationExtra
+          maxHeight: i.infiniteScrollHeight,
+          pagination: i.pagination,
+          filter: i.filter,
+          imageShape: i.imageShape,
+          pageSize: i.pageSize,
+          pagePosition: i.pagePosition,
+          notificationRenderer: i.renderers.notification,
+          header: i.header
         }
       )
     }
   )) : null;
 };
 export {
-  h as NotificationFeed
+  x as NotificationFeed
 };

package/dist/components/Notifications/NotificationLauncher.js

@@ -1,15 +1,23 @@
 import { jsx as i } from "react/jsx-runtime";
-import { I as f } from "../../assets/Inbox.js";
-import { UnreadBadge as d } from "./UnreadBadge.js";
-import { useContext as c } 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 l } from "../../assets/BellOutlined.js";
+import { I as d } from "../../assets/Inbox.js";
+import { UnreadBadge as f } from "./UnreadBadge.js";
+import { useContext as u } from "react";
+import { NotificationAPIContext as h } from "../Provider/index.js";
+import { R as c } from "../../assets/BellOutlined.js";
+import { P as g } from "../../assets/index.js";
+import { B as l } from "../../assets/button.js";
 var m = /* @__PURE__ */ ((t) => (t.TOP_LEFT = "top-left", t.TOP_RIGHT = "top-right", t.BOTTOM_LEFT = "bottom-left", t.BOTTOM_RIGHT = "bottom-right", t))(m || {});
-const y = (t) => {
+const W = (t) => {
   var n, a;
   const e = {
+    buttonIcon: t.buttonIcon || /* @__PURE__ */ i(
+      c,
+      {
+        style: {
+          fontSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20)
+        }
+      }
+    ),
     buttonWidth: t.buttonWidth || 40,
     buttonHeight: t.buttonHeight || 40,
     popupWidth: t.popupWidth || 400,
@@ -19,37 +27,35 @@ const y = (t) => {
     pagination: t.pagination || "INFINITE_SCROLL",
     pageSize: t.pageSize || 10,
     pagePosition: t.pagePosition || "top",
-    style: {
-      zIndex: 999,
-      ...t.style
-    },
+    popupZIndex: t.popupZIndex || 1030,
     unreadBadgeProps: t.unreadBadgeProps ?? {},
     offsetX: t.offsetX || 16,
     offsetY: t.offsetY || 16,
     position: t.position || "BOTTOM_RIGHT",
     count: t.count || "COUNT_UNOPENED_NOTIFICATIONS",
     filter: t.filter || "ALL",
+    header: {
+      title: (n = t.header) == null ? void 0 : n.title
+    },
     renderers: {
-      notification: (n = t.renderers) == null ? void 0 : n.notification,
-      notificationExtra: (a = t.renderers) == null ? void 0 : a.notificationExtra
+      notification: (a = t.renderers) == null ? void 0 : a.notification
     }
-  }, o = c(g);
+  }, o = u(h);
   return o ? /* @__PURE__ */ i(
     "div",
     {
       style: {
         position: "fixed",
         right: e.offsetX,
-        bottom: e.offsetY,
-        ...e.style
+        bottom: e.offsetY
       },
       children: /* @__PURE__ */ i(
-        u,
+        g,
         {
           autoAdjustOverflow: !0,
           trigger: "click",
           content: /* @__PURE__ */ i(
-            f,
+            d,
             {
               maxHeight: 500,
               pagination: e.pagination,
@@ -58,7 +64,7 @@ const y = (t) => {
               pageSize: e.pageSize,
               pagePosition: e.pagePosition,
               notificationRenderer: e.renderers.notification,
-              notificationExtraRenderer: e.renderers.notificationExtra
+              header: e.header
             }
           ),
           arrow: !1,
@@ -76,7 +82,7 @@ const y = (t) => {
                 display: "inline-block"
               },
               children: /* @__PURE__ */ i(
-                d,
+                f,
                 {
                   ...t.unreadBadgeProps,
                   style: {
@@ -85,16 +91,9 @@ const y = (t) => {
                   },
                   count: e.count,
                   children: /* @__PURE__ */ i(
-                    h,
+                    l,
                     {
-                      icon: /* @__PURE__ */ i(
-                        l,
-                        {
-                          style: {
-                            fontSize: e.buttonIconSize
-                          }
-                        }
-                      ),
+                      icon: e.buttonIcon,
                       style: {
                         width: e.buttonWidth,
                         height: e.buttonHeight
@@ -113,6 +112,6 @@ const y = (t) => {
   ) : null;
 };
 export {
-  y as NotificationLauncher,
+  W as NotificationLauncher,
   m as Position
 };

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

@@ -8,6 +8,7 @@ export declare enum Filter {
     UNARCHIVED = "UNARCHIVED"
 }
 export type NotificationPopupProps = {
+    buttonIcon?: React.ReactNode;
     buttonIconSize?: number;
     buttonWidth?: number;
     buttonHeight?: number;
@@ -17,13 +18,15 @@ export type NotificationPopupProps = {
     pagination?: keyof typeof Pagination;
     pageSize?: number;
     pagePosition?: "top" | "bottom";
-    style?: React.CSSProperties;
+    popupZIndex?: number;
     unreadBadgeProps?: UnreadBadgeProps;
     count?: UnreadBadgeProps["count"];
     filter?: keyof typeof Filter | ((n: InAppNotification) => boolean);
     renderers?: {
         notification?: NotificationProps["renderer"];
-        notificationExtra?: NotificationProps["extraRenderer"];
+    };
+    header?: {
+        title?: JSX.Element;
     };
 };
 export declare const NotificationPopup: React.FC<NotificationPopupProps>;

package/dist/components/Notifications/NotificationPopup.js

@@ -3,9 +3,9 @@ import { F as s, N as F } from "../../assets/Inbox.js";
 import "./UnreadBadge.js";
 import "../Provider/index.js";
 import "react";
+import "../../assets/BellOutlined.js";
 import "../../assets/index.js";
 import "../../assets/button.js";
-import "../../assets/BellOutlined.js";
 export {
   s as Filter,
   F as NotificationPopup

package/package.json

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