@novu/react 3.19.2 → 3.20.0-rc.569d407fd0

package/dist/esm/components/notification-item/parts/Date.js

@@ -0,0 +1,89 @@
+// src/components/notification-item/parts/Date.tsx
+import { badgeStyles, formatSnoozedUntil, formatToRelativeTime, notificationItemStyles } from "@novu/js/ui-core";
+import { useEffect, useState } from "react";
+import { useNovuUI } from "../../../context/NovuUIContext.js";
+import { useLocalization, useStyle } from "../../../hooks/internal/useEngineStores.js";
+import { ClockIcon } from "../ClockIcon.js";
+import { useNotificationItem } from "../context.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MINUTE = 60 * 1e3;
+var useMinuteTick = () => {
+  const [, setMinutesPassed] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => setMinutesPassed((prev) => prev + 1), MINUTE);
+    return () => clearInterval(interval);
+  }, []);
+};
+var Clock = ({ styleKey }) => {
+  const { notification } = useNotificationItem("Date");
+  const { icons } = useNovuUI();
+  const style = useStyle();
+  const className = style({
+    key: notificationItemStyles[styleKey].key,
+    className: notificationItemStyles[styleKey].className,
+    iconKey: "clock",
+    context: { notification }
+  });
+  if (icons.clock) {
+    return /* @__PURE__ */ jsx(Fragment, { children: icons.clock({ class: className }) });
+  }
+  return /* @__PURE__ */ jsx(ClockIcon, { className });
+};
+var Date = ({ className, children }) => {
+  const { notification } = useNotificationItem("Date");
+  const style = useStyle();
+  const { t, locale } = useLocalization();
+  useMinuteTick();
+  const createdAt = formatToRelativeTime({ fromDate: new globalThis.Date(notification.createdAt), locale });
+  const snoozedUntil = notification.snoozedUntil ? formatSnoozedUntil({ untilDate: new globalThis.Date(notification.snoozedUntil), locale }) : null;
+  const deliveredAt = Array.isArray(notification.deliveredAt) ? notification.deliveredAt.map((date) => formatToRelativeTime({ fromDate: new globalThis.Date(date), locale })) : null;
+  let content = createdAt;
+  if (children !== void 0) {
+    content = children;
+  } else if (snoozedUntil) {
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Clock, { styleKey: "snoozedUntilIcon" }),
+      t("notification.snoozedUntil"),
+      " \xB7 ",
+      snoozedUntil
+    ] });
+  } else if (deliveredAt && deliveredAt.length >= 2) {
+    const [previous, latest] = deliveredAt.slice(-2);
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      previous,
+      " \xB7",
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          "data-variant": "secondary",
+          "data-size": "default",
+          className: style({
+            key: notificationItemStyles.deliveredAtBadge.key,
+            className: [badgeStyles.base, badgeStyles.variants.secondary, badgeStyles.sizes.default].join(" "),
+            context: { notification }
+          }),
+          children: [
+            /* @__PURE__ */ jsx(Clock, { styleKey: "deliveredAtIcon" }),
+            latest
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: style({
+        key: notificationItemStyles.date.key,
+        className: [notificationItemStyles.date.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      }),
+      children: content
+    }
+  );
+};
+export {
+  Date
+};
+//# sourceMappingURL=Date.js.map

package/dist/esm/components/notification-item/parts/Date.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/notification-item/parts/Date.tsx"],"sourcesContent":["import { badgeStyles, formatSnoozedUntil, formatToRelativeTime, notificationItemStyles } from '@novu/js/ui-core';\nimport React, { type ReactNode, useEffect, useMemo, useState } from 'react';\nimport { useNovuUI } from '../../../context/NovuUIContext';\nimport { useLocalization, useStyle } from '../../../hooks/internal/useEngineStores';\nimport { ClockIcon } from '../ClockIcon';\nimport { useNotificationItem } from '../context';\n\nexport type NotificationItemDateProps = { className?: string; children?: ReactNode };\n\nconst MINUTE = 60 * 1000;\n\nconst useMinuteTick = () => {\n  const [, setMinutesPassed] = useState(0);\n\n  useEffect(() => {\n    const interval = setInterval(() => setMinutesPassed((prev) => prev + 1), MINUTE);\n\n    return () => clearInterval(interval);\n  }, []);\n};\n\nconst Clock = ({ styleKey }: { styleKey: 'deliveredAtIcon' | 'snoozedUntilIcon' }) => {\n  const { notification } = useNotificationItem('Date');\n  const { icons } = useNovuUI();\n  const style = useStyle();\n  const className = style({\n    key: notificationItemStyles[styleKey].key,\n    className: notificationItemStyles[styleKey].className,\n    iconKey: 'clock',\n    context: { notification },\n  });\n\n  if (icons.clock) {\n    return <>{icons.clock({ class: className })}</>;\n  }\n\n  return <ClockIcon className={className} />;\n};\n\n/** When the notification arrived, when it was delivered again, or until when it is snoozed. */\nexport const Date = ({ className, children }: NotificationItemDateProps) => {\n  const { notification } = useNotificationItem('Date');\n  const style = useStyle();\n  const { t, locale } = useLocalization();\n  useMinuteTick();\n\n  const createdAt = formatToRelativeTime({ fromDate: new globalThis.Date(notification.createdAt), locale });\n  const snoozedUntil = notification.snoozedUntil\n    ? formatSnoozedUntil({ untilDate: new globalThis.Date(notification.snoozedUntil), locale })\n    : null;\n  const deliveredAt = Array.isArray(notification.deliveredAt)\n    ? notification.deliveredAt.map((date) => formatToRelativeTime({ fromDate: new globalThis.Date(date), locale }))\n    : null;\n\n  let content: ReactNode = createdAt;\n  if (children !== undefined) {\n    content = children;\n  } else if (snoozedUntil) {\n    content = (\n      <>\n        <Clock styleKey=\"snoozedUntilIcon\" />\n        {t('notification.snoozedUntil')} · {snoozedUntil}\n      </>\n    );\n  } else if (deliveredAt && deliveredAt.length >= 2) {\n    const [previous, latest] = deliveredAt.slice(-2);\n    content = (\n      <>\n        {' '}\n        {previous} ·\n        <span\n          data-variant=\"secondary\"\n          data-size=\"default\"\n          className={style({\n            key: notificationItemStyles.deliveredAtBadge.key,\n            className: [badgeStyles.base, badgeStyles.variants.secondary, badgeStyles.sizes.default].join(' '),\n            context: { notification },\n          })}\n        >\n          <Clock styleKey=\"deliveredAtIcon\" />\n          {latest}\n        </span>\n      </>\n    );\n  }\n\n  return (\n    <div\n      className={style({\n        key: notificationItemStyles.date.key,\n        className: [notificationItemStyles.date.className, className].filter(Boolean).join(' '),\n        context: { notification },\n      })}\n    >\n      {content}\n    </div>\n  );\n};\n"],"mappings":";AAAA,SAAS,aAAa,oBAAoB,sBAAsB,8BAA8B;AAC9F,SAAgC,WAAoB,gBAAgB;AACpE,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB,gBAAgB;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AA4BzB,wBA0BL,YA1BK;AAxBX,IAAM,SAAS,KAAK;AAEpB,IAAM,gBAAgB,MAAM;AAC1B,QAAM,CAAC,EAAE,gBAAgB,IAAI,SAAS,CAAC;AAEvC,YAAU,MAAM;AACd,UAAM,WAAW,YAAY,MAAM,iBAAiB,CAAC,SAAS,OAAO,CAAC,GAAG,MAAM;AAE/E,WAAO,MAAM,cAAc,QAAQ;AAAA,EACrC,GAAG,CAAC,CAAC;AACP;AAEA,IAAM,QAAQ,CAAC,EAAE,SAAS,MAA4D;AACpF,QAAM,EAAE,aAAa,IAAI,oBAAoB,MAAM;AACnD,QAAM,EAAE,MAAM,IAAI,UAAU;AAC5B,QAAM,QAAQ,SAAS;AACvB,QAAM,YAAY,MAAM;AAAA,IACtB,KAAK,uBAAuB,QAAQ,EAAE;AAAA,IACtC,WAAW,uBAAuB,QAAQ,EAAE;AAAA,IAC5C,SAAS;AAAA,IACT,SAAS,EAAE,aAAa;AAAA,EAC1B,CAAC;AAED,MAAI,MAAM,OAAO;AACf,WAAO,gCAAG,gBAAM,MAAM,EAAE,OAAO,UAAU,CAAC,GAAE;AAAA,EAC9C;AAEA,SAAO,oBAAC,aAAU,WAAsB;AAC1C;AAGO,IAAM,OAAO,CAAC,EAAE,WAAW,SAAS,MAAiC;AAC1E,QAAM,EAAE,aAAa,IAAI,oBAAoB,MAAM;AACnD,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,GAAG,OAAO,IAAI,gBAAgB;AACtC,gBAAc;AAEd,QAAM,YAAY,qBAAqB,EAAE,UAAU,IAAI,WAAW,KAAK,aAAa,SAAS,GAAG,OAAO,CAAC;AACxG,QAAM,eAAe,aAAa,eAC9B,mBAAmB,EAAE,WAAW,IAAI,WAAW,KAAK,aAAa,YAAY,GAAG,OAAO,CAAC,IACxF;AACJ,QAAM,cAAc,MAAM,QAAQ,aAAa,WAAW,IACtD,aAAa,YAAY,IAAI,CAAC,SAAS,qBAAqB,EAAE,UAAU,IAAI,WAAW,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC,IAC5G;AAEJ,MAAI,UAAqB;AACzB,MAAI,aAAa,QAAW;AAC1B,cAAU;AAAA,EACZ,WAAW,cAAc;AACvB,cACE,iCACE;AAAA,0BAAC,SAAM,UAAS,oBAAmB;AAAA,MAClC,EAAE,2BAA2B;AAAA,MAAE;AAAA,MAAI;AAAA,OACtC;AAAA,EAEJ,WAAW,eAAe,YAAY,UAAU,GAAG;AACjD,UAAM,CAAC,UAAU,MAAM,IAAI,YAAY,MAAM,EAAE;AAC/C,cACE,iCACG;AAAA;AAAA,MACA;AAAA,MAAS;AAAA,MACV;AAAA,QAAC;AAAA;AAAA,UACC,gBAAa;AAAA,UACb,aAAU;AAAA,UACV,WAAW,MAAM;AAAA,YACf,KAAK,uBAAuB,iBAAiB;AAAA,YAC7C,WAAW,CAAC,YAAY,MAAM,YAAY,SAAS,WAAW,YAAY,MAAM,OAAO,EAAE,KAAK,GAAG;AAAA,YACjG,SAAS,EAAE,aAAa;AAAA,UAC1B,CAAC;AAAA,UAED;AAAA,gCAAC,SAAM,UAAS,mBAAkB;AAAA,YACjC;AAAA;AAAA;AAAA,MACH;AAAA,OACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,QACf,KAAK,uBAAuB,KAAK;AAAA,QACjC,WAAW,CAAC,uBAAuB,KAAK,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACtF,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/esm/components/notification-item/parts/Dot.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type NotificationItemDotProps = {
+    className?: string;
+};
+/** The unread marker on the right edge of the item. */
+declare const Dot: ({ className }: NotificationItemDotProps) => react_jsx_runtime.JSX.Element;
+
+export { Dot, type NotificationItemDotProps };

package/dist/esm/components/notification-item/parts/Dot.js

@@ -0,0 +1,23 @@
+// src/components/notification-item/parts/Dot.tsx
+import { notificationItemStyles } from "@novu/js/ui-core";
+import { useStyle } from "../../../hooks/internal/useEngineStores.js";
+import { useNotificationItem } from "../context.js";
+import { jsx } from "react/jsx-runtime";
+var Dot = ({ className }) => {
+  const { notification } = useNotificationItem("Dot");
+  const style = useStyle();
+  return /* @__PURE__ */ jsx("div", { className: notificationItemStyles.dotContainer.className, children: !notification.isRead && /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: style({
+        key: notificationItemStyles.dot.key,
+        className: [notificationItemStyles.dot.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      })
+    }
+  ) });
+};
+export {
+  Dot
+};
+//# sourceMappingURL=Dot.js.map

package/dist/esm/components/notification-item/parts/Dot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/notification-item/parts/Dot.tsx"],"sourcesContent":["import { notificationItemStyles } from '@novu/js/ui-core';\nimport React from 'react';\nimport { useStyle } from '../../../hooks/internal/useEngineStores';\nimport { useNotificationItem } from '../context';\n\nexport type NotificationItemDotProps = { className?: string };\n\n/** The unread marker on the right edge of the item. */\nexport const Dot = ({ className }: NotificationItemDotProps) => {\n  const { notification } = useNotificationItem('Dot');\n  const style = useStyle();\n\n  return (\n    <div className={notificationItemStyles.dotContainer.className}>\n      {!notification.isRead && (\n        <span\n          className={style({\n            key: notificationItemStyles.dot.key,\n            className: [notificationItemStyles.dot.className, className].filter(Boolean).join(' '),\n            context: { notification },\n          })}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":";AAAA,SAAS,8BAA8B;AAEvC,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AAY5B;AAPD,IAAM,MAAM,CAAC,EAAE,UAAU,MAAgC;AAC9D,QAAM,EAAE,aAAa,IAAI,oBAAoB,KAAK;AAClD,QAAM,QAAQ,SAAS;AAEvB,SACE,oBAAC,SAAI,WAAW,uBAAuB,aAAa,WACjD,WAAC,aAAa,UACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,QACf,KAAK,uBAAuB,IAAI;AAAA,QAChC,WAAW,CAAC,uBAAuB,IAAI,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACrF,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA;AAAA,EACH,GAEJ;AAEJ;","names":[]}

package/dist/esm/components/notification-item/parts/Subject.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type NotificationItemSubjectProps = {
+    className?: string;
+    children?: ReactNode;
+};
+declare const Subject: ({ className, children }: NotificationItemSubjectProps) => react_jsx_runtime.JSX.Element | null;
+type NotificationItemBodyProps = {
+    className?: string;
+    children?: ReactNode;
+};
+declare const Body: ({ className, children }: NotificationItemBodyProps) => react_jsx_runtime.JSX.Element;
+
+export { Body, type NotificationItemBodyProps, type NotificationItemSubjectProps, Subject };

package/dist/esm/components/notification-item/parts/Subject.js

@@ -0,0 +1,66 @@
+// src/components/notification-item/parts/Subject.tsx
+import { notificationItemStyles } from "@novu/js/ui-core";
+import { useStyle } from "../../../hooks/internal/useEngineStores.js";
+import { useNotificationItem } from "../context.js";
+import { Markdown } from "../Markdown.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+var Subject = ({ className, children }) => {
+  const { notification, renderers } = useNotificationItem("Subject");
+  const style = useStyle();
+  if (renderers.renderSubject) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderers.renderSubject(notification) });
+  }
+  if (children === void 0 && !notification.subject) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: style({
+        key: notificationItemStyles.subject.key,
+        className: [notificationItemStyles.subject.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      }),
+      children: children ?? /* @__PURE__ */ jsx(
+        Markdown,
+        {
+          strongKey: notificationItemStyles.subject.strongKey,
+          emKey: notificationItemStyles.subject.emKey,
+          context: { notification },
+          children: notification.subject ?? ""
+        }
+      )
+    }
+  );
+};
+var Body = ({ className, children }) => {
+  const { notification, renderers } = useNotificationItem("Body");
+  const style = useStyle();
+  if (renderers.renderBody) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderers.renderBody(notification) });
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: style({
+        key: notificationItemStyles.body.key,
+        className: [notificationItemStyles.body.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      }),
+      children: children ?? /* @__PURE__ */ jsx(
+        Markdown,
+        {
+          strongKey: notificationItemStyles.body.strongKey,
+          emKey: notificationItemStyles.body.emKey,
+          context: { notification },
+          children: notification.body
+        }
+      )
+    }
+  );
+};
+export {
+  Body,
+  Subject
+};
+//# sourceMappingURL=Subject.js.map

package/dist/esm/components/notification-item/parts/Subject.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/notification-item/parts/Subject.tsx"],"sourcesContent":["import { notificationItemStyles } from '@novu/js/ui-core';\nimport React, { type ReactNode } from 'react';\nimport { useStyle } from '../../../hooks/internal/useEngineStores';\nimport { useNotificationItem } from '../context';\nimport { Markdown } from '../Markdown';\n\nexport type NotificationItemSubjectProps = { className?: string; children?: ReactNode };\n\nexport const Subject = ({ className, children }: NotificationItemSubjectProps) => {\n  const { notification, renderers } = useNotificationItem('Subject');\n  const style = useStyle();\n\n  if (renderers.renderSubject) {\n    return <>{renderers.renderSubject(notification)}</>;\n  }\n\n  if (children === undefined && !notification.subject) {\n    return null;\n  }\n\n  return (\n    <p\n      className={style({\n        key: notificationItemStyles.subject.key,\n        className: [notificationItemStyles.subject.className, className].filter(Boolean).join(' '),\n        context: { notification },\n      })}\n    >\n      {children ?? (\n        <Markdown\n          strongKey={notificationItemStyles.subject.strongKey}\n          emKey={notificationItemStyles.subject.emKey}\n          context={{ notification }}\n        >\n          {notification.subject ?? ''}\n        </Markdown>\n      )}\n    </p>\n  );\n};\n\nexport type NotificationItemBodyProps = { className?: string; children?: ReactNode };\n\nexport const Body = ({ className, children }: NotificationItemBodyProps) => {\n  const { notification, renderers } = useNotificationItem('Body');\n  const style = useStyle();\n\n  if (renderers.renderBody) {\n    return <>{renderers.renderBody(notification)}</>;\n  }\n\n  return (\n    <p\n      className={style({\n        key: notificationItemStyles.body.key,\n        className: [notificationItemStyles.body.className, className].filter(Boolean).join(' '),\n        context: { notification },\n      })}\n    >\n      {children ?? (\n        <Markdown\n          strongKey={notificationItemStyles.body.strongKey}\n          emKey={notificationItemStyles.body.emKey}\n          context={{ notification }}\n        >\n          {notification.body}\n        </Markdown>\n      )}\n    </p>\n  );\n};\n"],"mappings":";AAAA,SAAS,8BAA8B;AAEvC,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AASd;AALJ,IAAM,UAAU,CAAC,EAAE,WAAW,SAAS,MAAoC;AAChF,QAAM,EAAE,cAAc,UAAU,IAAI,oBAAoB,SAAS;AACjE,QAAM,QAAQ,SAAS;AAEvB,MAAI,UAAU,eAAe;AAC3B,WAAO,gCAAG,oBAAU,cAAc,YAAY,GAAE;AAAA,EAClD;AAEA,MAAI,aAAa,UAAa,CAAC,aAAa,SAAS;AACnD,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,QACf,KAAK,uBAAuB,QAAQ;AAAA,QACpC,WAAW,CAAC,uBAAuB,QAAQ,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACzF,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA,MAEA,sBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,uBAAuB,QAAQ;AAAA,UAC1C,OAAO,uBAAuB,QAAQ;AAAA,UACtC,SAAS,EAAE,aAAa;AAAA,UAEvB,uBAAa,WAAW;AAAA;AAAA,MAC3B;AAAA;AAAA,EAEJ;AAEJ;AAIO,IAAM,OAAO,CAAC,EAAE,WAAW,SAAS,MAAiC;AAC1E,QAAM,EAAE,cAAc,UAAU,IAAI,oBAAoB,MAAM;AAC9D,QAAM,QAAQ,SAAS;AAEvB,MAAI,UAAU,YAAY;AACxB,WAAO,gCAAG,oBAAU,WAAW,YAAY,GAAE;AAAA,EAC/C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,QACf,KAAK,uBAAuB,KAAK;AAAA,QACjC,WAAW,CAAC,uBAAuB,KAAK,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACtF,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA,MAEA,sBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,uBAAuB,KAAK;AAAA,UACvC,OAAO,uBAAuB,KAAK;AAAA,UACnC,SAAS,EAAE,aAAa;AAAA,UAEvB,uBAAa;AAAA;AAAA,MAChB;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/esm/components/slack-connect-button/DefaultSlackConnectButton.js

@@ -1,6 +1,5 @@
 // src/components/slack-connect-button/DefaultSlackConnectButton.tsx
-import { useCallback } from "react";
-import { useNovuUI } from "../../context/NovuUIContext.js";
+import { useMemo } from "react";
 import { Mounter } from "../Mounter.js";
 import { jsx } from "react/jsx-runtime";
 var DefaultSlackConnectButton = (props) => {
@@ -20,32 +19,24 @@ var DefaultSlackConnectButton = (props) => {
     connectLabel,
     connectedLabel
   } = props;
-  const { novuUI } = useNovuUI();
-  const mount = useCallback(
-    (element) => {
-      return novuUI.mountComponent({
-        name: "SlackConnectButton",
-        props: {
-          integrationIdentifier,
-          connectionIdentifier,
-          subscriberId,
-          context,
-          contextHash,
-          scope,
-          connectionMode,
-          autoLinkUser,
-          onConnectSuccess,
-          onConnectError,
-          onDisconnectSuccess,
-          onDisconnectError,
-          connectLabel,
-          connectedLabel
-        },
-        element
-      });
-    },
+  const mountProps = useMemo(
+    () => ({
+      integrationIdentifier,
+      connectionIdentifier,
+      subscriberId,
+      context,
+      contextHash,
+      scope,
+      connectionMode,
+      autoLinkUser,
+      onConnectSuccess,
+      onConnectError,
+      onDisconnectSuccess,
+      onDisconnectError,
+      connectLabel,
+      connectedLabel
+    }),
     [
-      novuUI,
       integrationIdentifier,
       connectionIdentifier,
       subscriberId,
@@ -62,7 +53,7 @@ var DefaultSlackConnectButton = (props) => {
       connectedLabel
     ]
   );
-  return /* @__PURE__ */ jsx(Mounter, { mount });
+  return /* @__PURE__ */ jsx(Mounter, { name: "SlackConnectButton", props: mountProps });
 };
 export {
   DefaultSlackConnectButton

package/dist/esm/components/slack-connect-button/DefaultSlackConnectButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/slack-connect-button/DefaultSlackConnectButton.tsx"],"sourcesContent":["import { SlackConnectButtonProps } from '@novu/js/ui';\nimport { useCallback } from 'react';\nimport { useNovuUI } from '../../context/NovuUIContext';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultSlackConnectButtonProps = Pick<\n  SlackConnectButtonProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'subscriberId'\n  | 'context'\n  | 'contextHash'\n  | 'scope'\n  | 'connectionMode'\n  | 'autoLinkUser'\n  | 'onConnectSuccess'\n  | 'onConnectError'\n  | 'onDisconnectSuccess'\n  | 'onDisconnectError'\n  | 'connectLabel'\n  | 'connectedLabel'\n>;\n\nexport const DefaultSlackConnectButton = (props: DefaultSlackConnectButtonProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    subscriberId,\n    context,\n    contextHash,\n    scope,\n    connectionMode,\n    autoLinkUser,\n    onConnectSuccess,\n    onConnectError,\n    onDisconnectSuccess,\n    onDisconnectError,\n    connectLabel,\n    connectedLabel,\n  } = props;\n  const { novuUI } = useNovuUI();\n\n  const mount = useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'SlackConnectButton',\n        props: {\n          integrationIdentifier,\n          connectionIdentifier,\n          subscriberId,\n          context,\n          contextHash,\n          scope,\n          connectionMode,\n          autoLinkUser,\n          onConnectSuccess,\n          onConnectError,\n          onDisconnectSuccess,\n          onDisconnectError,\n          connectLabel,\n          connectedLabel,\n        },\n        element,\n      });\n    },\n    [\n      novuUI,\n      integrationIdentifier,\n      connectionIdentifier,\n      subscriberId,\n      context,\n      contextHash,\n      scope,\n      connectionMode,\n      autoLinkUser,\n      onConnectSuccess,\n      onConnectError,\n      onDisconnectSuccess,\n      onDisconnectError,\n      connectLabel,\n      connectedLabel,\n    ]\n  );\n\n  return <Mounter mount={mount} />;\n};\n"],"mappings":";AACA,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAiFf;AA7DF,IAAM,4BAA4B,CAAC,UAA0C;AAClF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,QAAM,QAAQ;AAAA,IACZ,CAAC,YAAyB;AACxB,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,oBAAC,WAAQ,OAAc;AAChC;","names":[]}
+{"version":3,"sources":["../../../../src/components/slack-connect-button/DefaultSlackConnectButton.tsx"],"sourcesContent":["import { SlackConnectButtonProps } from '@novu/js/ui';\nimport { useMemo } from 'react';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultSlackConnectButtonProps = Pick<\n  SlackConnectButtonProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'subscriberId'\n  | 'context'\n  | 'contextHash'\n  | 'scope'\n  | 'connectionMode'\n  | 'autoLinkUser'\n  | 'onConnectSuccess'\n  | 'onConnectError'\n  | 'onDisconnectSuccess'\n  | 'onDisconnectError'\n  | 'connectLabel'\n  | 'connectedLabel'\n>;\n\nexport const DefaultSlackConnectButton = (props: DefaultSlackConnectButtonProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    subscriberId,\n    context,\n    contextHash,\n    scope,\n    connectionMode,\n    autoLinkUser,\n    onConnectSuccess,\n    onConnectError,\n    onDisconnectSuccess,\n    onDisconnectError,\n    connectLabel,\n    connectedLabel,\n  } = props;\n\n  const mountProps = useMemo(\n    () => ({\n      integrationIdentifier,\n      connectionIdentifier,\n      subscriberId,\n      context,\n      contextHash,\n      scope,\n      connectionMode,\n      autoLinkUser,\n      onConnectSuccess,\n      onConnectError,\n      onDisconnectSuccess,\n      onDisconnectError,\n      connectLabel,\n      connectedLabel,\n    }),\n    [\n      integrationIdentifier,\n      connectionIdentifier,\n      subscriberId,\n      context,\n      contextHash,\n      scope,\n      connectionMode,\n      autoLinkUser,\n      onConnectSuccess,\n      onConnectError,\n      onDisconnectSuccess,\n      onDisconnectError,\n      connectLabel,\n      connectedLabel,\n    ]\n  );\n\n  return <Mounter name=\"SlackConnectButton\" props={mountProps} />;\n};\n"],"mappings":";AACA,SAAS,eAAe;AACxB,SAAS,eAAe;AAyEf;AArDF,IAAM,4BAA4B,CAAC,UAA0C;AAClF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,oBAAC,WAAQ,MAAK,sBAAqB,OAAO,YAAY;AAC/D;","names":[]}

package/dist/esm/components/slack-connect-button/SlackConnectButton.js

@@ -2,10 +2,9 @@
 import React, { useMemo } from "react";
 import { useNovu } from "../../hooks/NovuProvider.js";
 import { NovuUI } from "../NovuUI.js";
-import { withRenderer } from "../Renderer.js";
 import { DefaultSlackConnectButton } from "./DefaultSlackConnectButton.js";
 import { jsx } from "react/jsx-runtime";
-var SlackConnectButtonInternal = withRenderer((props) => {
+var SlackConnectButtonInternal = (props) => {
   const { container, appearance, ...defaultProps } = props;
   const novu = useNovu();
   const options = useMemo(() => {
@@ -16,7 +15,7 @@ var SlackConnectButtonInternal = withRenderer((props) => {
     };
   }, [container, appearance, novu.options]);
   return /* @__PURE__ */ jsx(NovuUI, { options, novu, children: /* @__PURE__ */ jsx(DefaultSlackConnectButton, { ...defaultProps }) });
-});
+};
 SlackConnectButtonInternal.displayName = "SlackConnectButtonInternal";
 var SlackConnectButton = React.memo((props) => {
   return /* @__PURE__ */ jsx(SlackConnectButtonInternal, { ...props });

package/dist/esm/components/slack-connect-button/SlackConnectButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/slack-connect-button/SlackConnectButton.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { withRenderer } from '../Renderer';\nimport { DefaultSlackConnectButton, DefaultSlackConnectButtonProps } from './DefaultSlackConnectButton';\n\nexport type SlackConnectButtonProps = DefaultSlackConnectButtonProps & Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst SlackConnectButtonInternal = withRenderer<SlackConnectButtonProps>((props) => {\n  const { container, appearance, ...defaultProps } = props;\n  const novu = useNovu();\n\n  const options: NovuUIOptions = useMemo(() => {\n    return {\n      container,\n      appearance,\n      options: novu.options,\n    };\n  }, [container, appearance, novu.options]);\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultSlackConnectButton {...defaultProps} />\n    </NovuUI>\n  );\n});\n\nSlackConnectButtonInternal.displayName = 'SlackConnectButtonInternal';\n\nexport const SlackConnectButton = React.memo((props: SlackConnectButtonProps) => {\n  return <SlackConnectButtonInternal {...props} />;\n});\n\nSlackConnectButton.displayName = 'SlackConnectButton';\n"],"mappings":";AAAA,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AACxB,SAAS,cAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,iCAAiE;AAkBpE;AAdN,IAAM,6BAA6B,aAAsC,CAAC,UAAU;AAClF,QAAM,EAAE,WAAW,YAAY,GAAG,aAAa,IAAI;AACnD,QAAM,OAAO,QAAQ;AAErB,QAAM,UAAyB,QAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,KAAK,OAAO,CAAC;AAExC,SACE,oBAAC,UAAO,SAAkB,MACxB,8BAAC,6BAA2B,GAAG,cAAc,GAC/C;AAEJ,CAAC;AAED,2BAA2B,cAAc;AAElC,IAAM,qBAAqB,MAAM,KAAK,CAAC,UAAmC;AAC/E,SAAO,oBAAC,8BAA4B,GAAG,OAAO;AAChD,CAAC;AAED,mBAAmB,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/slack-connect-button/SlackConnectButton.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { DefaultSlackConnectButton, DefaultSlackConnectButtonProps } from './DefaultSlackConnectButton';\n\nexport type SlackConnectButtonProps = DefaultSlackConnectButtonProps & Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst SlackConnectButtonInternal = (props: SlackConnectButtonProps) => {\n  const { container, appearance, ...defaultProps } = props;\n  const novu = useNovu();\n\n  const options: NovuUIOptions = useMemo(() => {\n    return {\n      container,\n      appearance,\n      options: novu.options,\n    };\n  }, [container, appearance, novu.options]);\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultSlackConnectButton {...defaultProps} />\n    </NovuUI>\n  );\n};\n\nSlackConnectButtonInternal.displayName = 'SlackConnectButtonInternal';\n\nexport const SlackConnectButton = React.memo((props: SlackConnectButtonProps) => {\n  return <SlackConnectButtonInternal {...props} />;\n});\n\nSlackConnectButton.displayName = 'SlackConnectButton';\n"],"mappings":";AAAA,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AACxB,SAAS,cAA6B;AACtC,SAAS,iCAAiE;AAkBpE;AAdN,IAAM,6BAA6B,CAAC,UAAmC;AACrE,QAAM,EAAE,WAAW,YAAY,GAAG,aAAa,IAAI;AACnD,QAAM,OAAO,QAAQ;AAErB,QAAM,UAAyB,QAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,KAAK,OAAO,CAAC;AAExC,SACE,oBAAC,UAAO,SAAkB,MACxB,8BAAC,6BAA2B,GAAG,cAAc,GAC/C;AAEJ;AAEA,2BAA2B,cAAc;AAElC,IAAM,qBAAqB,MAAM,KAAK,CAAC,UAAmC;AAC/E,SAAO,oBAAC,8BAA4B,GAAG,OAAO;AAChD,CAAC;AAED,mBAAmB,cAAc;","names":[]}

package/dist/esm/components/slack-link-user/DefaultSlackLinkUser.js

@@ -1,6 +1,5 @@
 // src/components/slack-link-user/DefaultSlackLinkUser.tsx
-import { useCallback } from "react";
-import { useNovuUI } from "../../context/NovuUIContext.js";
+import { useMemo } from "react";
 import { Mounter } from "../Mounter.js";
 import { jsx } from "react/jsx-runtime";
 var DefaultSlackLinkUser = (props) => {
@@ -15,27 +14,19 @@ var DefaultSlackLinkUser = (props) => {
     linkLabel,
     unlinkLabel
   } = props;
-  const { novuUI } = useNovuUI();
-  const mount = useCallback(
-    (element) => {
-      return novuUI.mountComponent({
-        name: "SlackLinkUser",
-        props: {
-          integrationIdentifier,
-          connectionIdentifier,
-          context,
-          onLinkSuccess,
-          onLinkError,
-          onUnlinkSuccess,
-          onUnlinkError,
-          linkLabel,
-          unlinkLabel
-        },
-        element
-      });
-    },
+  const mountProps = useMemo(
+    () => ({
+      integrationIdentifier,
+      connectionIdentifier,
+      context,
+      onLinkSuccess,
+      onLinkError,
+      onUnlinkSuccess,
+      onUnlinkError,
+      linkLabel,
+      unlinkLabel
+    }),
     [
-      novuUI,
       integrationIdentifier,
       connectionIdentifier,
       context,
@@ -47,7 +38,7 @@ var DefaultSlackLinkUser = (props) => {
       unlinkLabel
     ]
   );
-  return /* @__PURE__ */ jsx(Mounter, { mount });
+  return /* @__PURE__ */ jsx(Mounter, { name: "SlackLinkUser", props: mountProps });
 };
 export {
   DefaultSlackLinkUser

package/dist/esm/components/slack-link-user/DefaultSlackLinkUser.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/slack-link-user/DefaultSlackLinkUser.tsx"],"sourcesContent":["import { SlackLinkUserProps } from '@novu/js/ui';\nimport { useCallback } from 'react';\nimport { useNovuUI } from '../../context/NovuUIContext';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultSlackLinkUserProps = Pick<\n  SlackLinkUserProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'context'\n  | 'onLinkSuccess'\n  | 'onLinkError'\n  | 'onUnlinkSuccess'\n  | 'onUnlinkError'\n  | 'linkLabel'\n  | 'unlinkLabel'\n>;\n\nexport const DefaultSlackLinkUser = (props: DefaultSlackLinkUserProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    context,\n    onLinkSuccess,\n    onLinkError,\n    onUnlinkSuccess,\n    onUnlinkError,\n    linkLabel,\n    unlinkLabel,\n  } = props;\n  const { novuUI } = useNovuUI();\n\n  const mount = useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'SlackLinkUser',\n        props: {\n          integrationIdentifier,\n          connectionIdentifier,\n          context,\n          onLinkSuccess,\n          onLinkError,\n          onUnlinkSuccess,\n          onUnlinkError,\n          linkLabel,\n          unlinkLabel,\n        },\n        element,\n      });\n    },\n    [\n      novuUI,\n      integrationIdentifier,\n      connectionIdentifier,\n      context,\n      onLinkSuccess,\n      onLinkError,\n      onUnlinkSuccess,\n      onUnlinkError,\n      linkLabel,\n      unlinkLabel,\n    ]\n  );\n\n  return <Mounter mount={mount} />;\n};\n"],"mappings":";AACA,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AA6Df;AA9CF,IAAM,uBAAuB,CAAC,UAAqC;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,QAAM,QAAQ;AAAA,IACZ,CAAC,YAAyB;AACxB,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,oBAAC,WAAQ,OAAc;AAChC;","names":[]}
+{"version":3,"sources":["../../../../src/components/slack-link-user/DefaultSlackLinkUser.tsx"],"sourcesContent":["import { SlackLinkUserProps } from '@novu/js/ui';\nimport { useMemo } from 'react';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultSlackLinkUserProps = Pick<\n  SlackLinkUserProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'context'\n  | 'onLinkSuccess'\n  | 'onLinkError'\n  | 'onUnlinkSuccess'\n  | 'onUnlinkError'\n  | 'linkLabel'\n  | 'unlinkLabel'\n>;\n\nexport const DefaultSlackLinkUser = (props: DefaultSlackLinkUserProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    context,\n    onLinkSuccess,\n    onLinkError,\n    onUnlinkSuccess,\n    onUnlinkError,\n    linkLabel,\n    unlinkLabel,\n  } = props;\n\n  const mountProps = useMemo(\n    () => ({\n      integrationIdentifier,\n      connectionIdentifier,\n      context,\n      onLinkSuccess,\n      onLinkError,\n      onUnlinkSuccess,\n      onUnlinkError,\n      linkLabel,\n      unlinkLabel,\n    }),\n    [\n      integrationIdentifier,\n      connectionIdentifier,\n      context,\n      onLinkSuccess,\n      onLinkError,\n      onUnlinkSuccess,\n      onUnlinkError,\n      linkLabel,\n      unlinkLabel,\n    ]\n  );\n\n  return <Mounter name=\"SlackLinkUser\" props={mountProps} />;\n};\n"],"mappings":";AACA,SAAS,eAAe;AACxB,SAAS,eAAe;AAqDf;AAtCF,IAAM,uBAAuB,CAAC,UAAqC;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,oBAAC,WAAQ,MAAK,iBAAgB,OAAO,YAAY;AAC1D;","names":[]}

package/dist/esm/components/slack-link-user/SlackLinkUser.js

@@ -2,10 +2,9 @@
 import React, { useMemo } from "react";
 import { useNovu } from "../../hooks/NovuProvider.js";
 import { NovuUI } from "../NovuUI.js";
-import { withRenderer } from "../Renderer.js";
 import { DefaultSlackLinkUser } from "./DefaultSlackLinkUser.js";
 import { jsx } from "react/jsx-runtime";
-var SlackLinkUserInternal = withRenderer((props) => {
+var SlackLinkUserInternal = (props) => {
   const { container, appearance, ...defaultProps } = props;
   const novu = useNovu();
   const options = useMemo(() => {
@@ -16,7 +15,7 @@ var SlackLinkUserInternal = withRenderer((props) => {
     };
   }, [container, appearance, novu.options]);
   return /* @__PURE__ */ jsx(NovuUI, { options, novu, children: /* @__PURE__ */ jsx(DefaultSlackLinkUser, { ...defaultProps }) });
-});
+};
 SlackLinkUserInternal.displayName = "SlackLinkUserInternal";
 var SlackLinkUser = React.memo((props) => {
   return /* @__PURE__ */ jsx(SlackLinkUserInternal, { ...props });

package/dist/esm/components/slack-link-user/SlackLinkUser.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/slack-link-user/SlackLinkUser.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { withRenderer } from '../Renderer';\nimport { DefaultSlackLinkUser, DefaultSlackLinkUserProps } from './DefaultSlackLinkUser';\n\nexport type SlackLinkUserProps = DefaultSlackLinkUserProps & Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst SlackLinkUserInternal = withRenderer<SlackLinkUserProps>((props) => {\n  const { container, appearance, ...defaultProps } = props;\n  const novu = useNovu();\n\n  const options: NovuUIOptions = useMemo(() => {\n    return {\n      container,\n      appearance,\n      options: novu.options,\n    };\n  }, [container, appearance, novu.options]);\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultSlackLinkUser {...defaultProps} />\n    </NovuUI>\n  );\n});\n\nSlackLinkUserInternal.displayName = 'SlackLinkUserInternal';\n\nexport const SlackLinkUser = React.memo((props: SlackLinkUserProps) => {\n  return <SlackLinkUserInternal {...props} />;\n});\n\nSlackLinkUser.displayName = 'SlackLinkUser';\n"],"mappings":";AAAA,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AACxB,SAAS,cAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,4BAAuD;AAkB1D;AAdN,IAAM,wBAAwB,aAAiC,CAAC,UAAU;AACxE,QAAM,EAAE,WAAW,YAAY,GAAG,aAAa,IAAI;AACnD,QAAM,OAAO,QAAQ;AAErB,QAAM,UAAyB,QAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,KAAK,OAAO,CAAC;AAExC,SACE,oBAAC,UAAO,SAAkB,MACxB,8BAAC,wBAAsB,GAAG,cAAc,GAC1C;AAEJ,CAAC;AAED,sBAAsB,cAAc;AAE7B,IAAM,gBAAgB,MAAM,KAAK,CAAC,UAA8B;AACrE,SAAO,oBAAC,yBAAuB,GAAG,OAAO;AAC3C,CAAC;AAED,cAAc,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/slack-link-user/SlackLinkUser.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { DefaultSlackLinkUser, DefaultSlackLinkUserProps } from './DefaultSlackLinkUser';\n\nexport type SlackLinkUserProps = DefaultSlackLinkUserProps & Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst SlackLinkUserInternal = (props: SlackLinkUserProps) => {\n  const { container, appearance, ...defaultProps } = props;\n  const novu = useNovu();\n\n  const options: NovuUIOptions = useMemo(() => {\n    return {\n      container,\n      appearance,\n      options: novu.options,\n    };\n  }, [container, appearance, novu.options]);\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultSlackLinkUser {...defaultProps} />\n    </NovuUI>\n  );\n};\n\nSlackLinkUserInternal.displayName = 'SlackLinkUserInternal';\n\nexport const SlackLinkUser = React.memo((props: SlackLinkUserProps) => {\n  return <SlackLinkUserInternal {...props} />;\n});\n\nSlackLinkUser.displayName = 'SlackLinkUser';\n"],"mappings":";AAAA,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AACxB,SAAS,cAA6B;AACtC,SAAS,4BAAuD;AAkB1D;AAdN,IAAM,wBAAwB,CAAC,UAA8B;AAC3D,QAAM,EAAE,WAAW,YAAY,GAAG,aAAa,IAAI;AACnD,QAAM,OAAO,QAAQ;AAErB,QAAM,UAAyB,QAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,KAAK,OAAO,CAAC;AAExC,SACE,oBAAC,UAAO,SAAkB,MACxB,8BAAC,wBAAsB,GAAG,cAAc,GAC1C;AAEJ;AAEA,sBAAsB,cAAc;AAE7B,IAAM,gBAAgB,MAAM,KAAK,CAAC,UAA8B;AACrE,SAAO,oBAAC,yBAAuB,GAAG,OAAO;AAC3C,CAAC;AAED,cAAc,cAAc;","names":[]}

package/dist/esm/components/subscription/DefaultSubscription.js

@@ -1,32 +1,24 @@
 // src/components/subscription/DefaultSubscription.tsx
-import { useCallback } from "react";
-import { useNovuUI } from "../../context/NovuUIContext.js";
-import { useRenderer } from "../../context/RendererContext.js";
+import { useMemo } from "react";
+import { useOutletRenderer } from "../../hooks/internal/useOutletRenderer.js";
 import { Mounter } from "../Mounter.js";
 import { jsx } from "react/jsx-runtime";
 var DefaultSubscription = (props) => {
   const { topicKey, identifier, preferences, open, placement, placementOffset, renderPreferences } = props;
-  const { novuUI } = useNovuUI();
-  const { mountElement } = useRenderer();
-  const mount = useCallback(
-    (element) => {
-      return novuUI.mountComponent({
-        name: "Subscription",
-        props: {
-          topicKey,
-          identifier,
-          preferences,
-          open,
-          placementOffset,
-          placement,
-          renderPreferences: renderPreferences ? (el, subscription, loading) => mountElement(el, renderPreferences(subscription, loading)) : void 0
-        },
-        element
-      });
-    },
-    [topicKey, identifier, preferences, open, placementOffset, placement, renderPreferences, novuUI, mountElement]
+  const renderPreferencesOutlet = useOutletRenderer(renderPreferences);
+  const mountProps = useMemo(
+    () => ({
+      topicKey,
+      identifier,
+      preferences,
+      open,
+      placementOffset,
+      placement,
+      renderPreferences: renderPreferencesOutlet
+    }),
+    [topicKey, identifier, preferences, open, placementOffset, placement, renderPreferencesOutlet]
   );
-  return /* @__PURE__ */ jsx(Mounter, { mount });
+  return /* @__PURE__ */ jsx(Mounter, { name: "Subscription", props: mountProps });
 };
 export {
   DefaultSubscription

package/dist/esm/components/subscription/DefaultSubscription.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/subscription/DefaultSubscription.tsx"],"sourcesContent":["import { TopicSubscription } from '@novu/js';\nimport { SubscriptionProps } from '@novu/js/ui';\nimport { useCallback } from 'react';\nimport { useNovuUI } from '../../context/NovuUIContext';\nimport { useRenderer } from '../../context/RendererContext';\nimport { Mounter } from '../Mounter';\n\nexport type PreferencesRenderer = (subscription?: TopicSubscription, loading?: boolean) => React.ReactNode;\n\nexport type DefaultSubscriptionProps = {\n  renderPreferences?: PreferencesRenderer;\n} & Pick<SubscriptionProps, 'open' | 'placement' | 'placementOffset' | 'topicKey' | 'identifier' | 'preferences'>;\n\nexport const DefaultSubscription = (props: DefaultSubscriptionProps) => {\n  const { topicKey, identifier, preferences, open, placement, placementOffset, renderPreferences } = props;\n  const { novuUI } = useNovuUI();\n  const { mountElement } = useRenderer();\n\n  const mount = useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Subscription',\n        props: {\n          topicKey,\n          identifier,\n          preferences,\n          open,\n          placementOffset,\n          placement,\n          renderPreferences: renderPreferences\n            ? (el, subscription, loading) => mountElement(el, renderPreferences(subscription, loading))\n            : undefined,\n        },\n        element,\n      });\n    },\n    [topicKey, identifier, preferences, open, placementOffset, placement, renderPreferences, novuUI, mountElement]\n  );\n\n  return <Mounter mount={mount} />;\n};\n"],"mappings":";AAEA,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAkCf;AA1BF,IAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM,EAAE,UAAU,YAAY,aAAa,MAAM,WAAW,iBAAiB,kBAAkB,IAAI;AACnG,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,QAAM,EAAE,aAAa,IAAI,YAAY;AAErC,QAAM,QAAQ;AAAA,IACZ,CAAC,YAAyB;AACxB,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,mBAAmB,oBACf,CAAC,IAAI,cAAc,YAAY,aAAa,IAAI,kBAAkB,cAAc,OAAO,CAAC,IACxF;AAAA,QACN;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,UAAU,YAAY,aAAa,MAAM,iBAAiB,WAAW,mBAAmB,QAAQ,YAAY;AAAA,EAC/G;AAEA,SAAO,oBAAC,WAAQ,OAAc;AAChC;","names":[]}
+{"version":3,"sources":["../../../../src/components/subscription/DefaultSubscription.tsx"],"sourcesContent":["import { TopicSubscription } from '@novu/js';\nimport { SubscriptionProps } from '@novu/js/ui';\nimport { useMemo } from 'react';\nimport { useOutletRenderer } from '../../hooks/internal/useOutletRenderer';\nimport { Mounter } from '../Mounter';\n\nexport type PreferencesRenderer = (subscription?: TopicSubscription, loading?: boolean) => React.ReactNode;\n\nexport type DefaultSubscriptionProps = {\n  renderPreferences?: PreferencesRenderer;\n} & Pick<SubscriptionProps, 'open' | 'placement' | 'placementOffset' | 'topicKey' | 'identifier' | 'preferences'>;\n\nexport const DefaultSubscription = (props: DefaultSubscriptionProps) => {\n  const { topicKey, identifier, preferences, open, placement, placementOffset, renderPreferences } = props;\n  const renderPreferencesOutlet =\n    useOutletRenderer<[TopicSubscription | undefined, boolean | undefined]>(renderPreferences);\n\n  const mountProps = useMemo(\n    () => ({\n      topicKey,\n      identifier,\n      preferences,\n      open,\n      placementOffset,\n      placement,\n      renderPreferences: renderPreferencesOutlet,\n    }),\n    [topicKey, identifier, preferences, open, placementOffset, placement, renderPreferencesOutlet]\n  );\n\n  return <Mounter name=\"Subscription\" props={mountProps} />;\n};\n"],"mappings":";AAEA,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,SAAS,eAAe;AA0Bf;AAlBF,IAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM,EAAE,UAAU,YAAY,aAAa,MAAM,WAAW,iBAAiB,kBAAkB,IAAI;AACnG,QAAM,0BACJ,kBAAwE,iBAAiB;AAE3F,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,IACrB;AAAA,IACA,CAAC,UAAU,YAAY,aAAa,MAAM,iBAAiB,WAAW,uBAAuB;AAAA,EAC/F;AAEA,SAAO,oBAAC,WAAQ,MAAK,gBAAe,OAAO,YAAY;AACzD;","names":[]}

package/dist/esm/components/subscription/Subscription.js

@@ -2,10 +2,9 @@
 import React, { useMemo } from "react";
 import { useNovu } from "../../hooks/NovuProvider.js";
 import { NovuUI } from "../NovuUI.js";
-import { withRenderer } from "../Renderer.js";
 import { DefaultSubscription } from "./DefaultSubscription.js";
 import { jsx } from "react/jsx-runtime";
-var SubscriptionInternal = withRenderer((props) => {
+var SubscriptionInternal = (props) => {
   const { container, localization, appearance, ...defaultSubscriptionProps } = props;
   const novu = useNovu();
   const options = useMemo(() => {
@@ -31,7 +30,7 @@ var SubscriptionInternal = withRenderer((props) => {
     return /* @__PURE__ */ jsx(NovuUI, { options, novu, children: clonedChildren });
   }
   return /* @__PURE__ */ jsx(NovuUI, { options, novu, children: /* @__PURE__ */ jsx(DefaultSubscription, { ...defaultSubscriptionProps }) });
-});
+};
 SubscriptionInternal.displayName = "SubscriptionInternal";
 var Subscription = React.memo((props) => {
   return /* @__PURE__ */ jsx(SubscriptionInternal, { ...props });

package/dist/esm/components/subscription/Subscription.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/subscription/Subscription.tsx"],"sourcesContent":["import { SubscriptionLocalization } from '@novu/js/ui';\nimport React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { ReactSubscriptionAppearance } from '../../utils/types';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { withRenderer } from '../Renderer';\nimport { DefaultSubscription, DefaultSubscriptionProps } from './DefaultSubscription';\n\ntype BaseSubscriptionProps = {\n  localization?: SubscriptionLocalization;\n  appearance?: ReactSubscriptionAppearance;\n} & Pick<NovuUIOptions, 'container'>;\n\ntype SubscriptionPropsWithChildren = {\n  children?: React.ReactNode;\n} & Exclude<DefaultSubscriptionProps, 'renderPreferences'> &\n  BaseSubscriptionProps;\n\ntype SubscriptionPropsWithoutChildren = {\n  children?: never;\n} & DefaultSubscriptionProps &\n  BaseSubscriptionProps;\n\nexport type SubscriptionProps = SubscriptionPropsWithChildren | SubscriptionPropsWithoutChildren;\n\nconst SubscriptionInternal = withRenderer<SubscriptionProps>((props) => {\n  const { container, localization, appearance, ...defaultSubscriptionProps } = props;\n  const novu = useNovu();\n\n  const options: NovuUIOptions = useMemo(() => {\n    return {\n      container,\n      localization,\n      appearance,\n      options: novu.options,\n    };\n  }, [localization, appearance, container, novu.options]);\n\n  if (isWithChildrenProps(props)) {\n    const clonedChildren = React.Children.map(props.children, (child) => {\n      if (React.isValidElement(child)) {\n        return React.cloneElement(child, {\n          ...child.props,\n          topicKey: defaultSubscriptionProps.topicKey,\n          identifier: defaultSubscriptionProps.identifier,\n          preferences: defaultSubscriptionProps.preferences,\n        });\n      }\n\n      return child;\n    });\n\n    return (\n      <NovuUI options={options} novu={novu}>\n        {clonedChildren}\n      </NovuUI>\n    );\n  }\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultSubscription {...defaultSubscriptionProps} />\n    </NovuUI>\n  );\n});\n\nSubscriptionInternal.displayName = 'SubscriptionInternal';\n\nexport const Subscription = React.memo((props: SubscriptionProps) => {\n  return <SubscriptionInternal {...props} />;\n});\n\nfunction isWithChildrenProps(props: SubscriptionProps): props is SubscriptionPropsWithChildren {\n  return 'children' in props;\n}\n"],"mappings":";AACA,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AAExB,SAAS,cAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,2BAAqD;AA+CxD;AA5BN,IAAM,uBAAuB,aAAgC,CAAC,UAAU;AACtE,QAAM,EAAE,WAAW,cAAc,YAAY,GAAG,yBAAyB,IAAI;AAC7E,QAAM,OAAO,QAAQ;AAErB,QAAM,UAAyB,QAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,WAAW,KAAK,OAAO,CAAC;AAEtD,MAAI,oBAAoB,KAAK,GAAG;AAC9B,UAAM,iBAAiB,MAAM,SAAS,IAAI,MAAM,UAAU,CAAC,UAAU;AACnE,UAAI,MAAM,eAAe,KAAK,GAAG;AAC/B,eAAO,MAAM,aAAa,OAAO;AAAA,UAC/B,GAAG,MAAM;AAAA,UACT,UAAU,yBAAyB;AAAA,UACnC,YAAY,yBAAyB;AAAA,UACrC,aAAa,yBAAyB;AAAA,QACxC,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT,CAAC;AAED,WACE,oBAAC,UAAO,SAAkB,MACvB,0BACH;AAAA,EAEJ;AAEA,SACE,oBAAC,UAAO,SAAkB,MACxB,8BAAC,uBAAqB,GAAG,0BAA0B,GACrD;AAEJ,CAAC;AAED,qBAAqB,cAAc;AAE5B,IAAM,eAAe,MAAM,KAAK,CAAC,UAA6B;AACnE,SAAO,oBAAC,wBAAsB,GAAG,OAAO;AAC1C,CAAC;AAED,SAAS,oBAAoB,OAAkE;AAC7F,SAAO,cAAc;AACvB;","names":[]}
+{"version":3,"sources":["../../../../src/components/subscription/Subscription.tsx"],"sourcesContent":["import { SubscriptionLocalization } from '@novu/js/ui';\nimport React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { ReactSubscriptionAppearance } from '../../utils/types';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { DefaultSubscription, DefaultSubscriptionProps } from './DefaultSubscription';\n\ntype BaseSubscriptionProps = {\n  localization?: SubscriptionLocalization;\n  appearance?: ReactSubscriptionAppearance;\n} & Pick<NovuUIOptions, 'container'>;\n\ntype SubscriptionPropsWithChildren = {\n  children?: React.ReactNode;\n} & Exclude<DefaultSubscriptionProps, 'renderPreferences'> &\n  BaseSubscriptionProps;\n\ntype SubscriptionPropsWithoutChildren = {\n  children?: never;\n} & DefaultSubscriptionProps &\n  BaseSubscriptionProps;\n\nexport type SubscriptionProps = SubscriptionPropsWithChildren | SubscriptionPropsWithoutChildren;\n\nconst SubscriptionInternal = (props: SubscriptionProps) => {\n  const { container, localization, appearance, ...defaultSubscriptionProps } = props;\n  const novu = useNovu();\n\n  const options: NovuUIOptions = useMemo(() => {\n    return {\n      container,\n      localization,\n      appearance,\n      options: novu.options,\n    };\n  }, [localization, appearance, container, novu.options]);\n\n  if (isWithChildrenProps(props)) {\n    const clonedChildren = React.Children.map(props.children, (child) => {\n      if (React.isValidElement(child)) {\n        return React.cloneElement(child, {\n          ...child.props,\n          topicKey: defaultSubscriptionProps.topicKey,\n          identifier: defaultSubscriptionProps.identifier,\n          preferences: defaultSubscriptionProps.preferences,\n        });\n      }\n\n      return child;\n    });\n\n    return (\n      <NovuUI options={options} novu={novu}>\n        {clonedChildren}\n      </NovuUI>\n    );\n  }\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultSubscription {...defaultSubscriptionProps} />\n    </NovuUI>\n  );\n};\n\nSubscriptionInternal.displayName = 'SubscriptionInternal';\n\nexport const Subscription = React.memo((props: SubscriptionProps) => {\n  return <SubscriptionInternal {...props} />;\n});\n\nfunction isWithChildrenProps(props: SubscriptionProps): props is SubscriptionPropsWithChildren {\n  return 'children' in props;\n}\n"],"mappings":";AACA,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AAExB,SAAS,cAA6B;AACtC,SAAS,2BAAqD;AA+CxD;AA5BN,IAAM,uBAAuB,CAAC,UAA6B;AACzD,QAAM,EAAE,WAAW,cAAc,YAAY,GAAG,yBAAyB,IAAI;AAC7E,QAAM,OAAO,QAAQ;AAErB,QAAM,UAAyB,QAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,WAAW,KAAK,OAAO,CAAC;AAEtD,MAAI,oBAAoB,KAAK,GAAG;AAC9B,UAAM,iBAAiB,MAAM,SAAS,IAAI,MAAM,UAAU,CAAC,UAAU;AACnE,UAAI,MAAM,eAAe,KAAK,GAAG;AAC/B,eAAO,MAAM,aAAa,OAAO;AAAA,UAC/B,GAAG,MAAM;AAAA,UACT,UAAU,yBAAyB;AAAA,UACnC,YAAY,yBAAyB;AAAA,UACrC,aAAa,yBAAyB;AAAA,QACxC,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT,CAAC;AAED,WACE,oBAAC,UAAO,SAAkB,MACvB,0BACH;AAAA,EAEJ;AAEA,SACE,oBAAC,UAAO,SAAkB,MACxB,8BAAC,uBAAqB,GAAG,0BAA0B,GACrD;AAEJ;AAEA,qBAAqB,cAAc;AAE5B,IAAM,eAAe,MAAM,KAAK,CAAC,UAA6B;AACnE,SAAO,oBAAC,wBAAsB,GAAG,OAAO;AAC1C,CAAC;AAED,SAAS,oBAAoB,OAAkE;AAC7F,SAAO,cAAc;AACvB;","names":[]}

package/dist/esm/components/subscription/SubscriptionButton.d.ts

@@ -3,6 +3,6 @@ import { SubscriptionButtonWrapperProps } from '@novu/js/ui';
 import React__default from 'react';
 
 type SubscriptionButtonProps = Partial<SubscriptionButtonWrapperProps>;
-declare const SubscriptionButton: React__default.MemoExoticComponent<({ topicKey, identifier, preferences, onClick, onDeleteError, onDeleteSuccess, onCreateError, onCreateSuccess, }: SubscriptionButtonProps) => react_jsx_runtime.JSX.Element>;
+declare const SubscriptionButton: React__default.MemoExoticComponent<({ topicKey, identifier, preferences, onClick, onDeleteError, onDeleteSuccess, onCreateError, onCreateSuccess, }: SubscriptionButtonProps) => react_jsx_runtime.JSX.Element | null>;
 
 export { SubscriptionButton, type SubscriptionButtonProps };