@notificationapi/react 0.0.17 → 0.0.18

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

@@ -1,3 +1,4 @@
+import { InboxHeaderProps } from './InboxHeader';
 import { ImageShape } from './Notification';
 import { NotificationPopupProps } from './NotificationPopup';
 import { InAppNotification } from '../../interface';
@@ -14,8 +15,6 @@ export type InboxProps = {
     pageSize: number;
     pagePosition: NotificationPopupProps["pagePosition"];
     notificationRenderer: ((notification: InAppNotification) => JSX.Element) | undefined;
-    header?: {
-        title?: JSX.Element;
-    };
+    header?: InboxHeaderProps;
 };
 export declare const Inbox: React.FC<InboxProps>;

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

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

package/dist/components/Notifications/InboxHeader.js

@@ -1,19 +1,19 @@
-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 { jsx as t, jsxs as n } 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 { B as a } from "../../assets/button.js";
-import { _ as f } from "../../assets/colors.js";
+import { _ as m } 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, {
+var u = { 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" }, p = function(l, r) {
+  return /* @__PURE__ */ i.createElement(s, m({}, l, {
     ref: r,
-    icon: p
+    icon: u
   }));
-}, o = /* @__PURE__ */ i.forwardRef(u);
+}, o = /* @__PURE__ */ i.forwardRef(p);
 process.env.NODE_ENV !== "production" && (o.displayName = "SettingOutlined");
-const R = (e) => {
+const C = (e) => {
   const l = e.title ?? /* @__PURE__ */ t(d.Text, { strong: !0, children: "Notifications" });
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ n(
     "div",
     {
       style: {
@@ -23,26 +23,25 @@ const R = (e) => {
       },
       children: [
         l,
-        /* @__PURE__ */ c("div", { children: [
-          /* @__PURE__ */ t(n, { content: "Resolve all", children: /* @__PURE__ */ t(
+        /* @__PURE__ */ n("div", { children: [
+          /* @__PURE__ */ t(c, { content: "Resolve all", children: /* @__PURE__ */ t(
             a,
             {
-              icon: /* @__PURE__ */ t(m, {}),
+              icon: /* @__PURE__ */ t(f, {}),
               size: "small",
               type: "text",
               onClick: () => {
-                e.markAsArchived("ALL");
+                e.button1ClickHandler && e.button1ClickHandler("ALL");
               }
             }
           ) }),
-          /* @__PURE__ */ t(n, { content: "Notification Preferences", children: /* @__PURE__ */ t(
+          /* @__PURE__ */ t(c, { content: "Notification Preferences", children: /* @__PURE__ */ t(
             a,
             {
               icon: /* @__PURE__ */ t(o, {}),
               size: "small",
               type: "text",
-              onClick: () => {
-              }
+              onClick: e.button2ClickHandler
             }
           ) })
         ] })
@@ -51,5 +50,5 @@ const R = (e) => {
   );
 };
 export {
-  R as InboxHeader
+  C as InboxHeader
 };

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

@@ -2,6 +2,7 @@ import { Pagination } from './Inbox';
 import { ImageShape, NotificationProps } from './Notification';
 import { Filter } from './NotificationPopup';
 import { InAppNotification } from '../../interface';
+import { InboxHeaderProps } from './InboxHeader';
 
 export type NotificationFeedProps = {
     imageShape?: keyof typeof ImageShape;
@@ -14,8 +15,6 @@ export type NotificationFeedProps = {
     renderers?: {
         notification?: NotificationProps["renderer"];
     };
-    header?: {
-        title?: JSX.Element;
-    };
+    header?: InboxHeaderProps;
 };
 export declare const NotificationFeed: React.FC<NotificationFeedProps>;

package/dist/components/Notifications/NotificationFeed.js

@@ -1,31 +1,39 @@
-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 x = (e) => {
-  var n, a;
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
+import { useState as s, useContext as m, useEffect as h } from "react";
+import { F as S, I as u } from "../../assets/Inbox.js";
+import { NotificationAPIContext as x } from "../Provider/index.js";
+import { N as H } from "../../assets/NotificationPreferencesPopup.js";
+import "../../assets/colors.js";
+import "../../assets/Preferences.js";
+const N = (e) => {
+  var r, a, o, l;
+  const [f, n] = s(!1), t = m(x);
+  if (!t)
+    return null;
   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,
+    filter: e.filter || S.ALL,
     infiniteScrollHeight: e.infiniteScrollHeight ? e.infiniteScrollHeight : window.innerHeight * 0.75,
     renderers: {
-      notification: (n = e.renderers) == null ? void 0 : n.notification
+      notification: (r = e.renderers) == null ? void 0 : r.notification
     },
     header: {
-      title: (a = e.header) == null ? void 0 : a.title
+      title: (a = e.header) == null ? void 0 : a.title,
+      button1ClickHandler: ((o = e.header) == null ? void 0 : o.button1ClickHandler) ?? t.markAsArchived,
+      button2ClickHandler: ((l = e.header) == null ? void 0 : l.button2ClickHandler) ?? (() => n(!0))
     }
-  }, t = l(d);
-  return t ? (g(() => {
+  };
+  return h(() => {
     t.markAsOpened();
-    const r = setInterval(() => {
+    const g = setInterval(() => {
       t.markAsOpened();
     }, 5e3);
-    return () => clearInterval(r);
-  }, []), /* @__PURE__ */ o(
+    return () => clearInterval(g);
+  }, []), /* @__PURE__ */ d(
     "div",
     {
       style: {
@@ -34,22 +42,31 @@ const x = (e) => {
         background: "#fff",
         ...e.style
       },
-      children: /* @__PURE__ */ o(
-        c,
-        {
-          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
-        }
-      )
+      children: [
+        /* @__PURE__ */ c(
+          u,
+          {
+            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
+          }
+        ),
+        /* @__PURE__ */ c(
+          H,
+          {
+            open: f,
+            onClose: () => n(!1)
+          }
+        )
+      ]
     }
-  )) : null;
+  );
 };
 export {
-  x as NotificationFeed
+  N as NotificationFeed
 };

package/dist/components/Notifications/NotificationLauncher.js

@@ -1,17 +1,22 @@
-import { jsx as i } from "react/jsx-runtime";
-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 W = (t) => {
-  var n, a;
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
+import { I as l } from "../../assets/Inbox.js";
+import { UnreadBadge as g } from "./UnreadBadge.js";
+import { useState as m, useContext as b } from "react";
+import { NotificationAPIContext as s } from "../Provider/index.js";
+import { N as I } from "../../assets/NotificationPreferencesPopup.js";
+import "../../assets/colors.js";
+import { R as p } from "../../assets/Preferences.js";
+import { P as O } from "../../assets/index.js";
+import { B as T } from "../../assets/button.js";
+var S = /* @__PURE__ */ ((t) => (t.TOP_LEFT = "top-left", t.TOP_RIGHT = "top-right", t.BOTTOM_LEFT = "bottom-left", t.BOTTOM_RIGHT = "bottom-right", t))(S || {});
+const _ = (t) => {
+  var a, r, d, f;
+  const [u, o] = m(!1), n = b(s);
+  if (!n)
+    return null;
   const e = {
     buttonIcon: t.buttonIcon || /* @__PURE__ */ i(
-      c,
+      p,
       {
         style: {
           fontSize: t.buttonIconSize || (t.buttonWidth ? t.buttonWidth / 2 : 20)
@@ -35,83 +40,95 @@ const W = (t) => {
     count: t.count || "COUNT_UNOPENED_NOTIFICATIONS",
     filter: t.filter || "ALL",
     header: {
-      title: (n = t.header) == null ? void 0 : n.title
+      title: (a = t.header) == null ? void 0 : a.title,
+      button1ClickHandler: ((r = t.header) == null ? void 0 : r.button1ClickHandler) ?? n.markAsArchived,
+      button2ClickHandler: ((d = t.header) == null ? void 0 : d.button2ClickHandler) ?? (() => o(!0))
     },
     renderers: {
-      notification: (a = t.renderers) == null ? void 0 : a.notification
+      notification: (f = t.renderers) == null ? void 0 : f.notification
     }
-  }, o = u(h);
-  return o ? /* @__PURE__ */ i(
+  };
+  return /* @__PURE__ */ h(
     "div",
     {
       style: {
         position: "fixed",
         right: e.offsetX,
-        bottom: e.offsetY
+        bottom: e.offsetY,
+        zIndex: 9999
       },
-      children: /* @__PURE__ */ i(
-        g,
-        {
-          autoAdjustOverflow: !0,
-          trigger: "click",
-          content: /* @__PURE__ */ i(
-            d,
-            {
-              maxHeight: 500,
-              pagination: e.pagination,
-              filter: e.filter,
-              imageShape: e.imageShape,
-              pageSize: e.pageSize,
-              pagePosition: e.pagePosition,
-              notificationRenderer: e.renderers.notification,
-              header: e.header
-            }
-          ),
-          arrow: !1,
-          overlayStyle: {
-            padding: "0 16px",
-            minWidth: e.popupWidth
-          },
-          onOpenChange: (r) => {
-            r && o.markAsOpened();
-          },
-          children: /* @__PURE__ */ i(
-            "div",
-            {
-              style: {
-                display: "inline-block"
-              },
-              children: /* @__PURE__ */ i(
-                f,
-                {
-                  ...t.unreadBadgeProps,
-                  style: {
-                    top: 5,
-                    right: 5
-                  },
-                  count: e.count,
-                  children: /* @__PURE__ */ i(
-                    l,
-                    {
-                      icon: e.buttonIcon,
-                      style: {
-                        width: e.buttonWidth,
-                        height: e.buttonHeight
-                      },
-                      shape: "circle",
-                      type: "default"
-                    }
-                  )
-                }
-              )
-            }
-          )
-        }
-      )
+      children: [
+        /* @__PURE__ */ i(
+          O,
+          {
+            autoAdjustOverflow: !0,
+            trigger: "click",
+            content: /* @__PURE__ */ i(
+              l,
+              {
+                maxHeight: 500,
+                pagination: e.pagination,
+                filter: e.filter,
+                imageShape: e.imageShape,
+                pageSize: e.pageSize,
+                pagePosition: e.pagePosition,
+                notificationRenderer: e.renderers.notification,
+                header: e.header
+              }
+            ),
+            arrow: !1,
+            overlayStyle: {
+              padding: "0 16px",
+              minWidth: e.popupWidth
+            },
+            onOpenChange: (c) => {
+              c && n.markAsOpened();
+            },
+            children: /* @__PURE__ */ i(
+              "div",
+              {
+                style: {
+                  display: "inline-block"
+                },
+                children: /* @__PURE__ */ i(
+                  g,
+                  {
+                    ...t.unreadBadgeProps,
+                    style: {
+                      top: 5,
+                      right: 5
+                    },
+                    count: e.count,
+                    children: /* @__PURE__ */ i(
+                      T,
+                      {
+                        icon: e.buttonIcon,
+                        style: {
+                          width: e.buttonWidth,
+                          height: e.buttonHeight
+                        },
+                        shape: "circle",
+                        type: "default"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ i(
+          I,
+          {
+            open: u,
+            onClose: () => o(!1)
+          }
+        )
+      ]
     }
-  ) : null;
+  );
 };
 export {
-  W as NotificationLauncher,
-  m as Position
+  _ as NotificationLauncher,
+  S as Position
 };

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

@@ -2,6 +2,7 @@ import { Pagination } from './Inbox';
 import { UnreadBadgeProps } from './UnreadBadge';
 import { ImageShape, NotificationProps } from './Notification';
 import { InAppNotification } from '../../interface';
+import { InboxHeaderProps } from './InboxHeader';
 
 export declare enum Filter {
     ALL = "ALL",
@@ -25,8 +26,6 @@ export type NotificationPopupProps = {
     renderers?: {
         notification?: NotificationProps["renderer"];
     };
-    header?: {
-        title?: JSX.Element;
-    };
+    header?: InboxHeaderProps;
 };
 export declare const NotificationPopup: React.FC<NotificationPopupProps>;

package/dist/components/Notifications/NotificationPopup.js

@@ -1,12 +1,14 @@
 import "react/jsx-runtime";
-import { F as s, N as F } from "../../assets/Inbox.js";
+import { F as N, N as c } from "../../assets/Inbox.js";
 import "./UnreadBadge.js";
 import "../Provider/index.js";
 import "react";
-import "../../assets/BellOutlined.js";
+import "../../assets/NotificationPreferencesPopup.js";
+import "../../assets/colors.js";
+import "../../assets/Preferences.js";
 import "../../assets/index.js";
 import "../../assets/button.js";
 export {
-  s as Filter,
-  F as NotificationPopup
+  N as Filter,
+  c as NotificationPopup
 };