@notificationapi/react 0.0.37 → 1.0.1

package/dist/components/Notifications/NotificationPopup.js

@@ -1,36 +1,38 @@
-import { jsx as i, jsxs as o, Fragment as l } from "react/jsx-runtime";
-import { Inbox as f } from "./Inbox.js";
-import { UnreadBadge as m } from "./UnreadBadge.js";
-import { NotificationAPIContext as p } from "../Provider/index.js";
-import { useState as b, useContext as s } from "react";
-import { NotificationPreferencesPopup as I } from "../Preferences/NotificationPreferencesPopup.js";
-import { D as P } from "../../assets/PreferenceInput.js";
-import { W as S } from "../../assets/WebPushOptInMessage.js";
+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 { R as C } from "../../assets/channelUtils.js";
-import { P as W } from "../../assets/index.js";
-import { B as O } from "../../assets/button.js";
-const T = (e) => {
-  var a, d, c, u;
-  const [h, r] = b(!1), n = s(p);
-  if (!n)
+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)
     return null;
   const t = {
-    buttonIcon: e.buttonIcon || /* @__PURE__ */ i(
-      C,
+    buttonIcon: e.buttonIcon || /* @__PURE__ */ n(
+      O,
       {
         style: {
-          fontSize: e.buttonIconSize || (e.buttonWidth ? e.buttonWidth / 2 : 20),
+          fontSize: e.buttonIconSize || 20,
           color: e.iconColor || "#000000"
         }
       }
     ),
-    buttonWidth: e.buttonWidth || 40,
-    buttonHeight: e.buttonHeight || 40,
+    buttonStyles: {
+      width: 40,
+      height: 40,
+      ...e.buttonStyles
+    },
     popupWidth: e.popupWidth || 400,
     popupHeight: e.popupHeight || 600,
-    buttonIconSize: e.buttonIconSize || (e.buttonWidth ? e.buttonWidth / 2 : 20),
-    imageShape: e.imageShape || "circle",
+    buttonIconSize: e.buttonIconSize || 20,
     iconColor: e.iconColor || "#000000",
     pagination: e.pagination || "INFINITE_SCROLL",
     pageSize: e.pageSize || 10,
@@ -40,91 +42,87 @@ const T = (e) => {
     count: e.count || "COUNT_UNOPENED_NOTIFICATIONS",
     filter: e.filter || x.ALL,
     header: {
-      title: (a = e.header) == null ? void 0 : a.title,
-      button1ClickHandler: ((d = e.header) == null ? void 0 : d.button1ClickHandler) ?? n.markAsArchived,
-      button2ClickHandler: ((c = e.header) == null ? void 0 : c.button2ClickHandler) ?? (() => r(!0))
+      title: (d = e.header) == null ? void 0 : d.title,
+      button1ClickHandler: ((c = e.header) == null ? void 0 : c.button1ClickHandler) ?? o.markAsArchived,
+      button2ClickHandler: ((u = e.header) == null ? void 0 : u.button2ClickHandler) ?? (() => a(!0))
     },
     renderers: {
-      notification: (u = e.renderers) == null ? void 0 : u.notification
+      notification: (s = e.renderers) == null ? void 0 : s.notification
     }
+  }, h = (g) => {
+    l(g.currentTarget), o.markAsOpened();
   };
-  return /* @__PURE__ */ o(l, { children: [
-    /* @__PURE__ */ i(
-      W,
+  return /* @__PURE__ */ r(m, { children: [
+    /* @__PURE__ */ n(
+      "div",
       {
-        autoAdjustOverflow: !0,
-        trigger: "click",
-        content: /* @__PURE__ */ o(l, { children: [
-          /* @__PURE__ */ i(
-            f,
-            {
-              maxHeight: t.popupHeight - 73,
-              pagination: t.pagination,
-              filter: t.filter,
-              imageShape: t.imageShape,
-              pageSize: t.pageSize,
-              pagePosition: t.pagePosition,
-              notificationRenderer: t.renderers.notification,
-              header: t.header
-            }
-          ),
-          n.webPushOptInMessage && localStorage.getItem("hideWebPushOptInMessage") !== "true" && /* @__PURE__ */ o("div", { children: [
-            /* @__PURE__ */ i(P, { style: { margin: "10px 0" } }),
-            /* @__PURE__ */ i(S, { hideAfterInteraction: !0 })
-          ] })
-        ] }),
-        onOpenChange: (g) => {
-          g && n.markAsOpened();
+        style: {
+          display: "inline-block"
         },
-        arrow: !1,
-        overlayStyle: {
-          padding: "0 16px",
-          width: t.popupWidth
+        children: /* @__PURE__ */ n(
+          b,
+          {
+            ...e.unreadBadgeProps,
+            count: t.count,
+            filter: t.filter,
+            children: /* @__PURE__ */ n(y, { onClick: h, style: t.buttonStyles, children: t.buttonIcon })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ n(
+      k,
+      {
+        open: !!i,
+        onClose: () => l(null),
+        anchorEl: i,
+        slotProps: {
+          paper: {
+            style: {
+              borderRadius: 8
+            }
+          }
         },
-        zIndex: e.popupZIndex,
-        children: /* @__PURE__ */ i(
+        "aria-hidden": !i,
+        children: /* @__PURE__ */ r(
           "div",
           {
             style: {
-              display: "inline-block"
+              width: t.popupWidth,
+              padding: "0 16px",
+              zIndex: e.popupZIndex
             },
-            children: /* @__PURE__ */ i(
-              m,
-              {
-                ...e.unreadBadgeProps,
-                style: {
-                  top: 5,
-                  right: 5
-                },
-                count: t.count,
-                filter: t.filter,
-                children: /* @__PURE__ */ i(
-                  O,
-                  {
-                    icon: t.buttonIcon,
-                    style: {
-                      width: t.buttonWidth,
-                      height: t.buttonHeight
-                    },
-                    shape: "circle",
-                    type: "text"
-                  }
-                )
-              }
-            )
+            children: [
+              /* @__PURE__ */ n(
+                P,
+                {
+                  maxHeight: t.popupHeight - 73,
+                  pagination: t.pagination,
+                  filter: t.filter,
+                  pageSize: t.pageSize,
+                  pagePosition: t.pagePosition,
+                  notificationRenderer: t.renderers.notification,
+                  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 })
+              ] })
+            ]
           }
         )
       }
     ),
-    /* @__PURE__ */ i(
-      I,
+    /* @__PURE__ */ n(
+      S,
       {
-        open: h,
-        onClose: () => r(!1)
+        open: f,
+        onClose: () => a(!1)
       }
     )
   ] });
 };
 export {
-  T as NotificationPopup
+  R as NotificationPopup
 };

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

@@ -4,13 +4,16 @@ import { InAppNotification } from '@notificationapi/core/dist/interfaces';
 import { COUNT_TYPE } from './interface';
 
 export type UnreadBadgeProps = {
-    color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold' | undefined;
-    overflowCount?: number;
     dot?: boolean;
     showZero?: boolean;
-    size?: 'default' | 'small';
-    style?: React.CSSProperties;
+    max?: number;
     count?: keyof typeof COUNT_TYPE | ((notification: InAppNotification) => boolean);
     filter?: NotificationPopupProps['filter'];
+    offset?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
 };
 export declare const UnreadBadge: React.FunctionComponent<PropsWithChildren<UnreadBadgeProps>>;

package/dist/components/Notifications/UnreadBadge.js

@@ -1,27 +1,35 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useContext as r } from "react";
-import { NotificationAPIContext as c } from "../Provider/index.js";
-import { B as l } from "../../assets/index2.js";
-const h = (e) => {
-  const o = r(c);
-  return /* @__PURE__ */ i(
-    l,
+import { jsx as l } from "react/jsx-runtime";
+import { useContext as a } from "react";
+import { NotificationAPIContext as d } 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(
+    u,
     {
-      count: ((n) => e.count === "COUNT_UNOPENED_NOTIFICATIONS" || e.count === void 0 ? n.filter((t) => !t.opened && !t.seen).length : e.count === "COUNT_UNARCHIVED_NOTIFICATIONS" ? n.filter(
-        (t) => !t.archived && !t.clicked && !t.replies && !t.actioned1 && !t.actioned2
-      ).length : n.filter(e.count).length)((o == null ? void 0 : o.notifications) || []),
-      color: e.color,
-      overflowCount: e.overflowCount,
-      dot: e.dot,
-      showZero: e.showZero,
-      size: e.size,
-      style: {
-        ...e.style
+      overlap: "circular",
+      badgeContent: ((n) => t.count === "COUNT_UNOPENED_NOTIFICATIONS" || t.count === void 0 ? n.filter((e) => !e.opened && !e.seen).length : t.count === "COUNT_UNARCHIVED_NOTIFICATIONS" ? n.filter(
+        (e) => !e.archived && !e.clicked && !e.replies && !e.actioned1 && !e.actioned2
+      ).length : n.filter(t.count).length)((o == null ? void 0 : o.notifications) || []),
+      max: t.max,
+      variant: t.dot ? "dot" : "standard",
+      showZero: t.showZero,
+      color: "error",
+      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,
+            left: (f = t.offset) == null ? void 0 : f.left
+          }
+        }
       },
-      children: e.children
+      children: t.children
     }
   );
 };
 export {
-  h as UnreadBadge
+  C as UnreadBadge
 };

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

@@ -2,10 +2,6 @@ export declare enum Pagination {
     INFINITE_SCROLL = "infinite_scroll",
     PAGINATED = "paginated"
 }
-export declare enum ImageShape {
-    square = "square",
-    circle = "circle"
-}
 export declare enum Filter {
     ALL = "ALL",
     UNARCHIVED = "UNARCHIVED"

package/dist/components/Notifications/interface.js

@@ -1,4 +1,4 @@
-var N = /* @__PURE__ */ ((I) => (I.INFINITE_SCROLL = "infinite_scroll", I.PAGINATED = "paginated", I))(N || {}), r = /* @__PURE__ */ ((I) => (I.square = "square", I.circle = "circle", I))(r || {}), T = /* @__PURE__ */ ((I) => (I.ALL = "ALL", I.UNARCHIVED = "UNARCHIVED", I))(T || {}), A = /* @__PURE__ */ ((I) => (I.EMAIL = "EMAIL", I.INAPP_WEB = "INAPP_WEB", I.SMS = "SMS", I.CALL = "CALL", I.PUSH = "PUSH", I.WEB_PUSH = "WEB_PUSH", I))(A || {}), O = /* @__PURE__ */ ((I) => (I.OFF = "off", I.INSTANT = "instant", I.HOURLY = "hourly", I.DAILY = "daily", I.WEEKLY = "weekly", I.MONTHLY = "monthly", I))(O || {}), E = /* @__PURE__ */ ((I) => (I.COUNT_UNOPENED_NOTIFICATIONS = "COUNT_UNOPENED_NOTIFICATIONS", I.COUNT_UNARCHIVED_NOTIFICATIONS = "COUNT_UNARCHIVED_NOTIFICATIONS", I))(E || {}), t = /* @__PURE__ */ ((I) => (I.TOP_LEFT = "top-left", I.TOP_RIGHT = "top-right", I.BOTTOM_LEFT = "bottom-left", I.BOTTOM_RIGHT = "bottom-right", I))(t || {});
+var N = /* @__PURE__ */ ((I) => (I.INFINITE_SCROLL = "infinite_scroll", I.PAGINATED = "paginated", I))(N || {}), T = /* @__PURE__ */ ((I) => (I.ALL = "ALL", I.UNARCHIVED = "UNARCHIVED", I))(T || {}), A = /* @__PURE__ */ ((I) => (I.EMAIL = "EMAIL", I.INAPP_WEB = "INAPP_WEB", I.SMS = "SMS", I.CALL = "CALL", I.PUSH = "PUSH", I.WEB_PUSH = "WEB_PUSH", I))(A || {}), r = /* @__PURE__ */ ((I) => (I.OFF = "off", I.INSTANT = "instant", I.HOURLY = "hourly", I.DAILY = "daily", I.WEEKLY = "weekly", I.MONTHLY = "monthly", I))(r || {}), O = /* @__PURE__ */ ((I) => (I.COUNT_UNOPENED_NOTIFICATIONS = "COUNT_UNOPENED_NOTIFICATIONS", I.COUNT_UNARCHIVED_NOTIFICATIONS = "COUNT_UNARCHIVED_NOTIFICATIONS", I))(O || {}), E = /* @__PURE__ */ ((I) => (I.TOP_LEFT = "top-left", I.TOP_RIGHT = "top-right", I.BOTTOM_LEFT = "bottom-left", I.BOTTOM_RIGHT = "bottom-right", I))(E || {});
 const L = {
   opened: "opened",
   clicked: "clicked",
@@ -8,12 +8,11 @@ const L = {
   actioned2: "actioned2"
 };
 export {
-  E as COUNT_TYPE,
+  O as COUNT_TYPE,
   A as Channels,
-  O as DeliveryOptions,
+  r as DeliveryOptions,
   T as Filter,
-  r as ImageShape,
   L as NOTIFICATION_ACTIONS,
   N as Pagination,
-  t as Position
+  E as Position
 };

package/dist/components/Preferences/NotificationPreferencesInline.js

@@ -1,18 +1,18 @@
-import { jsxs as n, Fragment as r, jsx as t } from "react/jsx-runtime";
-import { Preferences as i } from "./Preferences.js";
-import { W as o } from "../../assets/WebPushOptInMessage.js";
-import { useContext as s } from "react";
-import { NotificationAPIContext as f } from "../Provider/index.js";
-import { D as a } from "../../assets/PreferenceInput.js";
-function I(m) {
-  const e = s(f);
-  return e ? /* @__PURE__ */ n(r, { children: [
-    /* @__PURE__ */ t(i, {}),
+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__ */ n("div", { children: [
-      /* @__PURE__ */ t(a, { style: { margin: "10px 0" } }),
+    e.webPushOptInMessage && /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ t(f, { style: { margin: "10px 0" } }),
       /* @__PURE__ */ t(
-        o,
+        s,
         {
           hideAfterInteraction: !1,
           descriptionStyle: {
@@ -38,5 +38,5 @@ function I(m) {
   ] }) : null;
 }
 export {
-  I as NotificationPreferencesInline
+  u as NotificationPreferencesInline
 };