@novu/react 2.0.0-canary.0 → 2.0.0-canary.2

package/dist/client/index.d.mts

@@ -3,25 +3,12 @@ import React$1 from 'react';
 import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
 export { Notification } from '@novu/js/ui';
 
-type BellRenderProps = ({ unreadCount }: {
-    unreadCount: number;
-}) => React$1.ReactNode;
-type BellProps = {
-    children?: never | BellRenderProps;
-};
-declare const Bell: React$1.MemoExoticComponent<(props: BellProps) => react_jsx_runtime.JSX.Element>;
-
-type NotificationsRenderProps = (args: {
-    notification: Notification;
-}) => React.ReactNode;
+type NotificationsRenderer = (notification: Notification) => React.ReactNode;
+type BellRenderer = (unreadCount: number) => React.ReactNode;
 type DefaultInboxProps = {
     open?: boolean;
-    renderNotification?: (args: {
-        notification: Notification;
-    }) => React.ReactNode;
-    renderBell?: ({ unreadCount }: {
-        unreadCount: number;
-    }) => React.ReactNode;
+    renderNotification?: NotificationsRenderer;
+    renderBell?: BellRenderer;
     onNotificationClick?: NotificationClickHandler;
     onPrimaryActionClick?: NotificationActionClickHandler;
     onSecondaryActionClick?: NotificationActionClickHandler;
@@ -43,17 +30,22 @@ type WithChildrenProps = BaseProps & {
     children: React.ReactNode;
 };
 
+type BellProps = {
+    renderBell?: BellRenderer;
+};
+declare const Bell: React$1.MemoExoticComponent<(props: BellProps) => react_jsx_runtime.JSX.Element>;
+
 type InboxProps = DefaultProps | WithChildrenProps;
 declare const Inbox: React$1.MemoExoticComponent<(props: InboxProps) => react_jsx_runtime.JSX.Element>;
 
 declare const Preferences: () => react_jsx_runtime.JSX.Element;
 
 type NotificationProps = {
-    children?: never | NotificationsRenderProps;
+    renderNotification?: NotificationsRenderer;
     onNotificationClick?: NotificationClickHandler;
     onPrimaryActionClick?: NotificationActionClickHandler;
     onSecondaryActionClick?: NotificationActionClickHandler;
 };
-declare const Notifications: React$1.MemoExoticComponent<({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }: NotificationProps) => react_jsx_runtime.JSX.Element>;
+declare const Notifications: React$1.MemoExoticComponent<(props: NotificationProps) => react_jsx_runtime.JSX.Element>;
 
-export { type BaseProps, Bell, type BellProps, type BellRenderProps, type DefaultInboxProps, type DefaultProps, Inbox, type InboxProps, type NotificationProps, Notifications, type NotificationsRenderProps, Preferences, type WithChildrenProps };
+export { type BaseProps, Bell, type BellProps, type BellRenderer, type DefaultInboxProps, type DefaultProps, Inbox, type InboxProps, type NotificationProps, Notifications, type NotificationsRenderer, Preferences, type WithChildrenProps };

package/dist/client/index.d.ts

@@ -3,25 +3,12 @@ import React$1 from 'react';
 import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
 export { Notification } from '@novu/js/ui';
 
-type BellRenderProps = ({ unreadCount }: {
-    unreadCount: number;
-}) => React$1.ReactNode;
-type BellProps = {
-    children?: never | BellRenderProps;
-};
-declare const Bell: React$1.MemoExoticComponent<(props: BellProps) => react_jsx_runtime.JSX.Element>;
-
-type NotificationsRenderProps = (args: {
-    notification: Notification;
-}) => React.ReactNode;
+type NotificationsRenderer = (notification: Notification) => React.ReactNode;
+type BellRenderer = (unreadCount: number) => React.ReactNode;
 type DefaultInboxProps = {
     open?: boolean;
-    renderNotification?: (args: {
-        notification: Notification;
-    }) => React.ReactNode;
-    renderBell?: ({ unreadCount }: {
-        unreadCount: number;
-    }) => React.ReactNode;
+    renderNotification?: NotificationsRenderer;
+    renderBell?: BellRenderer;
     onNotificationClick?: NotificationClickHandler;
     onPrimaryActionClick?: NotificationActionClickHandler;
     onSecondaryActionClick?: NotificationActionClickHandler;
@@ -43,17 +30,22 @@ type WithChildrenProps = BaseProps & {
     children: React.ReactNode;
 };
 
+type BellProps = {
+    renderBell?: BellRenderer;
+};
+declare const Bell: React$1.MemoExoticComponent<(props: BellProps) => react_jsx_runtime.JSX.Element>;
+
 type InboxProps = DefaultProps | WithChildrenProps;
 declare const Inbox: React$1.MemoExoticComponent<(props: InboxProps) => react_jsx_runtime.JSX.Element>;
 
 declare const Preferences: () => react_jsx_runtime.JSX.Element;
 
 type NotificationProps = {
-    children?: never | NotificationsRenderProps;
+    renderNotification?: NotificationsRenderer;
     onNotificationClick?: NotificationClickHandler;
     onPrimaryActionClick?: NotificationActionClickHandler;
     onSecondaryActionClick?: NotificationActionClickHandler;
 };
-declare const Notifications: React$1.MemoExoticComponent<({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }: NotificationProps) => react_jsx_runtime.JSX.Element>;
+declare const Notifications: React$1.MemoExoticComponent<(props: NotificationProps) => react_jsx_runtime.JSX.Element>;
 
-export { type BaseProps, Bell, type BellProps, type BellRenderProps, type DefaultInboxProps, type DefaultProps, Inbox, type InboxProps, type NotificationProps, Notifications, type NotificationsRenderProps, Preferences, type WithChildrenProps };
+export { type BaseProps, Bell, type BellProps, type BellRenderer, type DefaultInboxProps, type DefaultProps, Inbox, type InboxProps, type NotificationProps, Notifications, type NotificationsRenderer, Preferences, type WithChildrenProps };

package/dist/client/index.js

@@ -1,8 +1,47 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Bell.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/utils/createContextAndHook.ts
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Bell: () => Bell,
+  Inbox: () => Inbox,
+  Notifications: () => Notifications,
+  Preferences: () => Preferences
+});
+module.exports = __toCommonJS(src_exports);
 
+// src/components/Bell.tsx
+var import_react3 = __toESM(require("react"));
+
+// src/utils/createContextAndHook.ts
+var import_react = __toESM(require("react"));
 function assertContextExists(contextVal, msgOrCtx) {
   if (!contextVal) {
     throw typeof msgOrCtx === "string" ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);
@@ -10,33 +49,33 @@ function assertContextExists(contextVal, msgOrCtx) {
 }
 var createContextAndHook = (displayName, options) => {
   const { assertCtxFn = assertContextExists } = options || {};
-  const Ctx = _react2.default.createContext(void 0);
+  const Ctx = import_react.default.createContext(void 0);
   Ctx.displayName = displayName;
   const useCtx = () => {
-    const ctx = _react2.default.useContext(Ctx);
+    const ctx = import_react.default.useContext(Ctx);
     assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);
     return ctx.value;
   };
   const useCtxWithoutGuarantee = () => {
-    const ctx = _react2.default.useContext(Ctx);
+    const ctx = import_react.default.useContext(Ctx);
     return ctx ? ctx.value : {};
   };
   return [Ctx, useCtx, useCtxWithoutGuarantee];
 };
 
 // src/context/RenderContext.tsx
-var _jsxruntime = require('react/jsx-runtime');
+var import_jsx_runtime = require("react/jsx-runtime");
 var [RendererContext, useRendererContext] = createContextAndHook("RendererContext");
 var RendererProvider = (props) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RendererContext.Provider, { value: { value: props.value }, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RendererContext.Provider, { value: { value: props.value }, children: props.children });
 };
 
 // src/components/Mounter.tsx
-
-
+var import_react2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Mounter({ mount }) {
-  const ref = _react2.default.useRef(null);
-  _react2.default.useEffect(() => {
+  const ref = import_react2.default.useRef(null);
+  import_react2.default.useEffect(() => {
     let unmount;
     const element = ref.current;
     if (element && mount) {
@@ -51,49 +90,50 @@ function Mounter({ mount }) {
       }
     };
   }, [ref, mount]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref });
 }
 
 // src/components/Bell.tsx
-
-var Bell = _react2.default.memo((props) => {
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Bell = import_react3.default.memo((props) => {
+  const { renderBell } = props;
   const { novuUI, mountElement } = useRendererContext();
-  const mount = _react2.default.useCallback(
+  const mount = import_react3.default.useCallback(
     (element) => {
       return novuUI.mountComponent({
         name: "Bell",
         element,
-        props: props.children ? { mountBell: (el, { unreadCount }) => mountElement(el, _optionalChain([props, 'access', _ => _.children, 'optionalCall', _2 => _2({ unreadCount })])) } : void 0
+        props: renderBell ? { mountBell: (el, unreadCount) => mountElement(el, renderBell(unreadCount)) } : void 0
       });
     },
-    [props.children]
+    [renderBell]
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Mounter, { mount });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Mounter, { mount });
 });
 
 // src/components/Inbox.tsx
-
+var import_react6 = __toESM(require("react"));
 
 // src/components/Renderer.tsx
-
-var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_reactdom);
-var _ui = require('@novu/js/ui');
+var import_react5 = require("react");
+var import_react_dom = __toESM(require("react-dom"));
+var import_ui = require("@novu/js/ui");
 
 // src/hooks/useDataRef.ts
-
+var import_react4 = require("react");
 var useDataRef = (data) => {
-  const ref = _react.useRef.call(void 0, data);
+  const ref = (0, import_react4.useRef)(data);
   ref.current = data;
   return ref;
 };
 
 // src/components/Renderer.tsx
-
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Renderer = ({ options, children }) => {
   const optionsRef = useDataRef(options);
-  const [novuUI, setNovuUI] = _react.useState.call(void 0, );
-  const [mountedElements, setMountedElements] = _react.useState.call(void 0, /* @__PURE__ */ new Map());
-  const mountElement = _react.useCallback.call(void 0, 
+  const [novuUI, setNovuUI] = (0, import_react5.useState)();
+  const [mountedElements, setMountedElements] = (0, import_react5.useState)(/* @__PURE__ */ new Map());
+  const mountElement = (0, import_react5.useCallback)(
     (el, mountedElement) => {
       setMountedElements((prev) => {
         const newMountedElements = new Map(prev);
@@ -110,14 +150,14 @@ var Renderer = ({ options, children }) => {
     },
     [setMountedElements]
   );
-  _react.useEffect.call(void 0, () => {
-    const novu = new (0, _ui.NovuUI)(optionsRef.current);
+  (0, import_react5.useEffect)(() => {
+    const novu = new import_ui.NovuUI(optionsRef.current);
     setNovuUI(novu);
     return () => {
       novu.unmount();
     };
   }, []);
-  _react.useEffect.call(void 0, () => {
+  (0, import_react5.useEffect)(() => {
     if (!novuUI) {
       return;
     }
@@ -129,33 +169,27 @@ var Renderer = ({ options, children }) => {
   if (!novuUI) {
     return null;
   }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, RendererProvider, { value: { mountElement, novuUI }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(RendererProvider, { value: { mountElement, novuUI }, children: [
     [...mountedElements].map(([element, mountedElement]) => {
-      return _reactdom2.default.createPortal(mountedElement, element);
+      return import_react_dom.default.createPortal(mountedElement, element);
     }),
     children
   ] });
 };
 
 // src/components/Inbox.tsx
-
-var DefaultInbox = ({
-  open,
-  renderNotification,
-  renderBell,
-  onNotificationClick,
-  onPrimaryActionClick,
-  onSecondaryActionClick
-}) => {
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DefaultInbox = (props) => {
+  const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } = props;
   const { novuUI, mountElement } = useRendererContext();
-  const mount = _react2.default.useCallback(
+  const mount = import_react6.default.useCallback(
     (element) => {
       return novuUI.mountComponent({
         name: "Inbox",
         props: {
           open,
-          mountNotification: renderNotification ? (el, { notification }) => mountElement(el, renderNotification({ notification })) : void 0,
-          mountBell: renderBell ? (el, { unreadCount }) => mountElement(el, renderBell({ unreadCount })) : void 0,
+          mountNotification: renderNotification ? (el, notification) => mountElement(el, renderNotification(notification)) : void 0,
+          mountBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : void 0,
           onNotificationClick,
           onPrimaryActionClick,
           onSecondaryActionClick
@@ -165,11 +199,11 @@ var DefaultInbox = ({
     },
     [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Mounter, { mount });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Mounter, { mount });
 };
-var Inbox = _react2.default.memo((props) => {
+var Inbox = import_react6.default.memo((props) => {
   const { localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } = props;
-  const options = _react.useMemo.call(void 0, () => {
+  const options = (0, import_react6.useMemo)(() => {
     return {
       localization,
       appearance,
@@ -178,10 +212,10 @@ var Inbox = _react2.default.memo((props) => {
     };
   }, [localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl]);
   if (isWithChildrenProps(props)) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Renderer, { options, children: props.children });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Renderer, { options, children: props.children });
   }
   const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } = props;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Renderer, { options, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Renderer, { options, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     DefaultInbox,
     {
       open,
@@ -198,47 +232,40 @@ function isWithChildrenProps(props) {
 }
 
 // src/components/Preferences.tsx
-
-
+var import_react7 = __toESM(require("react"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Preferences = () => {
   const { novuUI } = useRendererContext();
-  const mount = _react2.default.useCallback((element) => {
+  const mount = import_react7.default.useCallback((element) => {
     return novuUI.mountComponent({
       name: "Preferences",
       element
     });
   }, []);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Mounter, { mount });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Mounter, { mount });
 };
 
 // src/components/Notifications.tsx
-
-
-var Notifications = _react2.default.memo(
-  ({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }) => {
-    const { novuUI, mountElement } = useRendererContext();
-    const mount = _react2.default.useCallback(
-      (element) => {
-        return novuUI.mountComponent({
-          name: "Notifications",
-          element,
-          props: children ? {
-            mountNotification: (el, { notification }) => mountElement(el, _optionalChain([children, 'optionalCall', _3 => _3({ notification })])),
-            onNotificationClick,
-            onPrimaryActionClick,
-            onSecondaryActionClick
-          } : { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }
-        });
-      },
-      [children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
-    );
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Mounter, { mount });
-  }
-);
-
-
-
-
-
-exports.Bell = Bell; exports.Inbox = Inbox; exports.Notifications = Notifications; exports.Preferences = Preferences;
+var import_react8 = __toESM(require("react"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Notifications = import_react8.default.memo((props) => {
+  const { onNotificationClick, onPrimaryActionClick, renderNotification, onSecondaryActionClick } = props;
+  const { novuUI, mountElement } = useRendererContext();
+  const mount = import_react8.default.useCallback(
+    (element) => {
+      return novuUI.mountComponent({
+        name: "Notifications",
+        element,
+        props: {
+          mountNotification: renderNotification ? (el, notification) => mountElement(el, renderNotification(notification)) : void 0,
+          onNotificationClick,
+          onPrimaryActionClick,
+          onSecondaryActionClick
+        }
+      });
+    },
+    [renderNotification, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Mounter, { mount });
+});
 //# sourceMappingURL=index.js.map

package/dist/client/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["/Users/pavlotymchuk/projects/js/novu-2/packages/react/dist/client/index.js","../../src/components/Bell.tsx","../../src/utils/createContextAndHook.ts","../../src/context/RenderContext.tsx","../../src/components/Mounter.tsx","../../src/components/Inbox.tsx","../../src/components/Renderer.tsx","../../src/hooks/useDataRef.ts","../../src/components/Preferences.tsx","../../src/components/Notifications.tsx"],"names":[],"mappings":"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","file":"/Users/pavlotymchuk/projects/js/novu-2/packages/react/dist/client/index.js","sourcesContent":[null,"import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport type BellRenderProps = ({ unreadCount }: { unreadCount: number }) => React.ReactNode;\n\nexport type BellProps = {\n  children?: never | BellRenderProps;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Bell',\n        element,\n        props: props.children\n          ? { mountBell: (el, { unreadCount }) => mountElement(el, props.children?.({ unreadCount })) }\n          : undefined,\n      });\n    },\n    [props.children]\n  );\n\n  return <Mounter mount={mount} />;\n});\n","import React from 'react';\n\nexport function assertContextExists(contextVal: unknown, msgOrCtx: string | React.Context<any>): asserts contextVal {\n  if (!contextVal) {\n    throw typeof msgOrCtx === 'string' ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);\n  }\n}\n\ntype Options = { assertCtxFn?: (v: unknown, msg: string) => void };\ntype ContextOf<T> = React.Context<{ value: T } | undefined>;\ntype UseCtxFn<T> = () => T;\n\n/**\n * Creates and returns a Context and two hooks that return the context value.\n * The Context type is derived from the type passed in by the user.\n * The first hook returned guarantees that the context exists so the returned value is always CtxValue\n * The second hook makes no guarantees, so the returned value can be CtxValue | undefined\n */\nexport const createContextAndHook = <CtxVal>(\n  displayName: string,\n  options?: Options\n): [ContextOf<CtxVal>, UseCtxFn<CtxVal>, UseCtxFn<CtxVal | Partial<CtxVal>>] => {\n  const { assertCtxFn = assertContextExists } = options || {};\n  const Ctx = React.createContext<{ value: CtxVal } | undefined>(undefined);\n  Ctx.displayName = displayName;\n\n  const useCtx = () => {\n    const ctx = React.useContext(Ctx);\n    assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);\n\n    return (ctx as any).value as CtxVal;\n  };\n\n  const useCtxWithoutGuarantee = () => {\n    const ctx = React.useContext(Ctx);\n\n    return ctx ? ctx.value : {};\n  };\n\n  return [Ctx, useCtx, useCtxWithoutGuarantee];\n};\n","import React from 'react';\nimport type { NovuUI } from '@novu/js/ui';\nimport { createContextAndHook } from '../utils/createContextAndHook';\n\nexport type MountedElement = React.ReactNode;\nexport type MountedElements = Map<HTMLElement, MountedElement>;\n\ntype RendererContextValue = {\n  mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void;\n  novuUI: NovuUI;\n};\n\nconst [RendererContext, useRendererContext] = createContextAndHook<RendererContextValue>('RendererContext');\n\nconst RendererProvider = (props: React.PropsWithChildren<{ value: RendererContextValue }>) => {\n  return <RendererContext.Provider value={{ value: props.value }}>{props.children}</RendererContext.Provider>;\n};\n\nexport { useRendererContext as useRenderer, RendererProvider };\n","import React from 'react';\n\ntype MounterProps = {\n  mount: (node: HTMLElement) => ((node: HTMLElement) => void) | void;\n};\n\n/**\n * Mounter allows you to mount a component to a DOM node.\n */\nexport function Mounter({ mount }: MounterProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    let unmount: (node: HTMLDivElement) => void | undefined;\n    const element = ref.current;\n    if (element && mount) {\n      const possibleUnmount = mount(element);\n      if (possibleUnmount) {\n        unmount = possibleUnmount;\n      }\n    }\n\n    return () => {\n      if (element && unmount) {\n        unmount(element);\n      }\n    };\n  }, [ref, mount]);\n\n  return <div ref={ref} />;\n}\n","import React, { useMemo } from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { Renderer } from './Renderer';\n\nexport type InboxProps = DefaultProps | WithChildrenProps;\n\nconst DefaultInbox = ({\n  open,\n  renderNotification,\n  renderBell,\n  onNotificationClick,\n  onPrimaryActionClick,\n  onSecondaryActionClick,\n}: DefaultInboxProps) => {\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Inbox',\n        props: {\n          open,\n          mountNotification: renderNotification\n            ? (el, { notification }) => mountElement(el, renderNotification({ notification }))\n            : undefined,\n          mountBell: renderBell ? (el, { unreadCount }) => mountElement(el, renderBell({ unreadCount })) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n        },\n        element,\n      });\n    },\n    [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  return <Mounter mount={mount} />;\n};\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  const { localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } =\n    props;\n\n  const options = useMemo(() => {\n    return {\n      localization,\n      appearance,\n      tabs,\n      options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl },\n    };\n  }, [localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl]);\n\n  if (isWithChildrenProps(props)) {\n    return <Renderer options={options}>{props.children}</Renderer>;\n  }\n\n  const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =\n    props;\n\n  return (\n    <Renderer options={options}>\n      <DefaultInbox\n        open={open}\n        renderNotification={renderNotification}\n        renderBell={renderBell}\n        onNotificationClick={onNotificationClick}\n        onPrimaryActionClick={onPrimaryActionClick}\n        onSecondaryActionClick={onSecondaryActionClick}\n      />\n    </Renderer>\n  );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n","import React, { useCallback, useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { NovuUI } from '@novu/js/ui';\nimport type { NovuUIOptions } from '@novu/js/ui';\nimport { MountedElement, RendererProvider } from '../context/RenderContext';\nimport { useDataRef } from '../hooks/useDataRef';\n\ntype RendererProps = React.PropsWithChildren<{\n  options: NovuUIOptions;\n}>;\n\n/**\n *\n * Renderer component that provides the NovuUI instance and mounts the elements on DOM in a portal\n */\nexport const Renderer = ({ options, children }: RendererProps) => {\n  const optionsRef = useDataRef(options);\n  const [novuUI, setNovuUI] = useState<NovuUI | undefined>();\n  const [mountedElements, setMountedElements] = useState(new Map<HTMLElement, MountedElement>());\n\n  const mountElement = useCallback(\n    (el: HTMLElement, mountedElement: MountedElement) => {\n      setMountedElements((prev) => {\n        const newMountedElements = new Map(prev);\n        newMountedElements.set(el, mountedElement);\n\n        return newMountedElements;\n      });\n\n      return () => {\n        setMountedElements((prev) => {\n          const newMountedElements = new Map(prev);\n          newMountedElements.delete(el);\n\n          return newMountedElements;\n        });\n      };\n    },\n    [setMountedElements]\n  );\n\n  useEffect(() => {\n    const novu = new NovuUI(optionsRef.current);\n    setNovuUI(novu);\n\n    return () => {\n      novu.unmount();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!novuUI) {\n      return;\n    }\n\n    novuUI.updateAppearance(options.appearance);\n    novuUI.updateLocalization(options.localization);\n    novuUI.updateTabs(options.tabs);\n    novuUI.updateOptions(options.options);\n  }, [options]);\n\n  if (!novuUI) {\n    return null;\n  }\n\n  return (\n    <RendererProvider value={{ mountElement, novuUI }}>\n      {[...mountedElements].map(([element, mountedElement]) => {\n        return ReactDOM.createPortal(mountedElement, element);\n      })}\n\n      {children}\n    </RendererProvider>\n  );\n};\n","import { useRef } from 'react';\n\nexport const useDataRef = <T>(data: T) => {\n  const ref = useRef(data);\n  ref.current = data;\n\n  return ref;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport const Preferences = () => {\n  const { novuUI } = useRenderer();\n\n  const mount = React.useCallback((element: HTMLElement) => {\n    return novuUI.mountComponent({\n      name: 'Preferences',\n      element,\n    });\n  }, []);\n\n  return <Mounter mount={mount} />;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { NotificationsRenderProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\n\nexport type NotificationProps = {\n  children?: never | NotificationsRenderProps;\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo(\n  ({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }: NotificationProps) => {\n    const { novuUI, mountElement } = useRenderer();\n\n    const mount = React.useCallback(\n      (element: HTMLElement) => {\n        return novuUI.mountComponent({\n          name: 'Notifications',\n          element,\n          props: children\n            ? {\n                mountNotification: (el, { notification }) => mountElement(el, children?.({ notification })),\n                onNotificationClick,\n                onPrimaryActionClick,\n                onSecondaryActionClick,\n              }\n            : { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick },\n        });\n      },\n      [children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n    );\n\n    return <Mounter mount={mount} />;\n  }\n);\n"]}
+{"version":3,"sources":["../../src/index.ts","../../src/components/Bell.tsx","../../src/utils/createContextAndHook.ts","../../src/context/RenderContext.tsx","../../src/components/Mounter.tsx","../../src/components/Inbox.tsx","../../src/components/Renderer.tsx","../../src/hooks/useDataRef.ts","../../src/components/Preferences.tsx","../../src/components/Notifications.tsx"],"sourcesContent":["export * from './components';\nexport * from './utils/types';\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\nimport { BellRenderer } from '../utils/types';\n\nexport type BellProps = {\n  renderBell?: BellRenderer;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n  const { renderBell } = props;\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Bell',\n        element,\n        props: renderBell ? { mountBell: (el, unreadCount) => mountElement(el, renderBell(unreadCount)) } : undefined,\n      });\n    },\n    [renderBell]\n  );\n\n  return <Mounter mount={mount} />;\n});\n","import React from 'react';\n\nexport function assertContextExists(contextVal: unknown, msgOrCtx: string | React.Context<any>): asserts contextVal {\n  if (!contextVal) {\n    throw typeof msgOrCtx === 'string' ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);\n  }\n}\n\ntype Options = { assertCtxFn?: (v: unknown, msg: string) => void };\ntype ContextOf<T> = React.Context<{ value: T } | undefined>;\ntype UseCtxFn<T> = () => T;\n\n/**\n * Creates and returns a Context and two hooks that return the context value.\n * The Context type is derived from the type passed in by the user.\n * The first hook returned guarantees that the context exists so the returned value is always CtxValue\n * The second hook makes no guarantees, so the returned value can be CtxValue | undefined\n */\nexport const createContextAndHook = <CtxVal>(\n  displayName: string,\n  options?: Options\n): [ContextOf<CtxVal>, UseCtxFn<CtxVal>, UseCtxFn<CtxVal | Partial<CtxVal>>] => {\n  const { assertCtxFn = assertContextExists } = options || {};\n  const Ctx = React.createContext<{ value: CtxVal } | undefined>(undefined);\n  Ctx.displayName = displayName;\n\n  const useCtx = () => {\n    const ctx = React.useContext(Ctx);\n    assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);\n\n    return (ctx as any).value as CtxVal;\n  };\n\n  const useCtxWithoutGuarantee = () => {\n    const ctx = React.useContext(Ctx);\n\n    return ctx ? ctx.value : {};\n  };\n\n  return [Ctx, useCtx, useCtxWithoutGuarantee];\n};\n","import React from 'react';\nimport type { NovuUI } from '@novu/js/ui';\nimport { createContextAndHook } from '../utils/createContextAndHook';\n\nexport type MountedElement = React.ReactNode;\nexport type MountedElements = Map<HTMLElement, MountedElement>;\n\ntype RendererContextValue = {\n  mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void;\n  novuUI: NovuUI;\n};\n\nconst [RendererContext, useRendererContext] = createContextAndHook<RendererContextValue>('RendererContext');\n\nconst RendererProvider = (props: React.PropsWithChildren<{ value: RendererContextValue }>) => {\n  return <RendererContext.Provider value={{ value: props.value }}>{props.children}</RendererContext.Provider>;\n};\n\nexport { useRendererContext as useRenderer, RendererProvider };\n","import React from 'react';\n\ntype MounterProps = {\n  mount: (node: HTMLElement) => ((node: HTMLElement) => void) | void;\n};\n\n/**\n * Mounter allows you to mount a component to a DOM node.\n */\nexport function Mounter({ mount }: MounterProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    let unmount: (node: HTMLDivElement) => void | undefined;\n    const element = ref.current;\n    if (element && mount) {\n      const possibleUnmount = mount(element);\n      if (possibleUnmount) {\n        unmount = possibleUnmount;\n      }\n    }\n\n    return () => {\n      if (element && unmount) {\n        unmount(element);\n      }\n    };\n  }, [ref, mount]);\n\n  return <div ref={ref} />;\n}\n","import React, { useMemo } from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { Renderer } from './Renderer';\n\nexport type InboxProps = DefaultProps | WithChildrenProps;\n\nconst DefaultInbox = (props: DefaultInboxProps) => {\n  const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =\n    props;\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Inbox',\n        props: {\n          open,\n          mountNotification: renderNotification\n            ? (el, notification) => mountElement(el, renderNotification(notification))\n            : undefined,\n          mountBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n        },\n        element,\n      });\n    },\n    [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  return <Mounter mount={mount} />;\n};\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  const { localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } =\n    props;\n\n  const options = useMemo(() => {\n    return {\n      localization,\n      appearance,\n      tabs,\n      options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl },\n    };\n  }, [localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl]);\n\n  if (isWithChildrenProps(props)) {\n    return <Renderer options={options}>{props.children}</Renderer>;\n  }\n\n  const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =\n    props;\n\n  return (\n    <Renderer options={options}>\n      <DefaultInbox\n        open={open}\n        renderNotification={renderNotification}\n        renderBell={renderBell}\n        onNotificationClick={onNotificationClick}\n        onPrimaryActionClick={onPrimaryActionClick}\n        onSecondaryActionClick={onSecondaryActionClick}\n      />\n    </Renderer>\n  );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n","import React, { useCallback, useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { NovuUI } from '@novu/js/ui';\nimport type { NovuUIOptions } from '@novu/js/ui';\nimport { MountedElement, RendererProvider } from '../context/RenderContext';\nimport { useDataRef } from '../hooks/useDataRef';\n\ntype RendererProps = React.PropsWithChildren<{\n  options: NovuUIOptions;\n}>;\n\n/**\n *\n * Renderer component that provides the NovuUI instance and mounts the elements on DOM in a portal\n */\nexport const Renderer = ({ options, children }: RendererProps) => {\n  const optionsRef = useDataRef(options);\n  const [novuUI, setNovuUI] = useState<NovuUI | undefined>();\n  const [mountedElements, setMountedElements] = useState(new Map<HTMLElement, MountedElement>());\n\n  const mountElement = useCallback(\n    (el: HTMLElement, mountedElement: MountedElement) => {\n      setMountedElements((prev) => {\n        const newMountedElements = new Map(prev);\n        newMountedElements.set(el, mountedElement);\n\n        return newMountedElements;\n      });\n\n      return () => {\n        setMountedElements((prev) => {\n          const newMountedElements = new Map(prev);\n          newMountedElements.delete(el);\n\n          return newMountedElements;\n        });\n      };\n    },\n    [setMountedElements]\n  );\n\n  useEffect(() => {\n    const novu = new NovuUI(optionsRef.current);\n    setNovuUI(novu);\n\n    return () => {\n      novu.unmount();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!novuUI) {\n      return;\n    }\n\n    novuUI.updateAppearance(options.appearance);\n    novuUI.updateLocalization(options.localization);\n    novuUI.updateTabs(options.tabs);\n    novuUI.updateOptions(options.options);\n  }, [options]);\n\n  if (!novuUI) {\n    return null;\n  }\n\n  return (\n    <RendererProvider value={{ mountElement, novuUI }}>\n      {[...mountedElements].map(([element, mountedElement]) => {\n        return ReactDOM.createPortal(mountedElement, element);\n      })}\n\n      {children}\n    </RendererProvider>\n  );\n};\n","import { useRef } from 'react';\n\nexport const useDataRef = <T>(data: T) => {\n  const ref = useRef(data);\n  ref.current = data;\n\n  return ref;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport const Preferences = () => {\n  const { novuUI } = useRenderer();\n\n  const mount = React.useCallback((element: HTMLElement) => {\n    return novuUI.mountComponent({\n      name: 'Preferences',\n      element,\n    });\n  }, []);\n\n  return <Mounter mount={mount} />;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\nimport type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\nimport { NotificationsRenderer } from '../utils/types';\n\nexport type NotificationProps = {\n  renderNotification?: NotificationsRenderer;\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo((props: NotificationProps) => {\n  const { onNotificationClick, onPrimaryActionClick, renderNotification, onSecondaryActionClick } = props;\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Notifications',\n        element,\n        props: {\n          mountNotification: renderNotification\n            ? (el, notification) => mountElement(el, renderNotification(notification))\n            : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n        },\n      });\n    },\n    [renderNotification, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  return <Mounter mount={mount} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAkB;;;ACAlB,mBAAkB;AAEX,SAAS,oBAAoB,YAAqB,UAA2D;AAClH,MAAI,CAAC,YAAY;AACf,UAAM,OAAO,aAAa,WAAW,IAAI,MAAM,QAAQ,IAAI,IAAI,MAAM,GAAG,SAAS,WAAW,YAAY;AAAA,EAC1G;AACF;AAYO,IAAM,uBAAuB,CAClC,aACA,YAC8E;AAC9E,QAAM,EAAE,cAAc,oBAAoB,IAAI,WAAW,CAAC;AAC1D,QAAM,MAAM,aAAAC,QAAM,cAA6C,MAAS;AACxE,MAAI,cAAc;AAElB,QAAM,SAAS,MAAM;AACnB,UAAM,MAAM,aAAAA,QAAM,WAAW,GAAG;AAChC,gBAAY,KAAK,wDAAwD;AAEzE,WAAQ,IAAY;AAAA,EACtB;AAEA,QAAM,yBAAyB,MAAM;AACnC,UAAM,MAAM,aAAAA,QAAM,WAAW,GAAG;AAEhC,WAAO,MAAM,IAAI,QAAQ,CAAC;AAAA,EAC5B;AAEA,SAAO,CAAC,KAAK,QAAQ,sBAAsB;AAC7C;;;ACzBS;AAHT,IAAM,CAAC,iBAAiB,kBAAkB,IAAI,qBAA2C,iBAAiB;AAE1G,IAAM,mBAAmB,CAAC,UAAoE;AAC5F,SAAO,4CAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,OAAO,MAAM,MAAM,GAAI,gBAAM,UAAS;AAClF;;;AChBA,IAAAC,gBAAkB;AA6BT,IAAAC,sBAAA;AApBF,SAAS,QAAQ,EAAE,MAAM,GAAiB;AAC/C,QAAM,MAAM,cAAAC,QAAM,OAAuB,IAAI;AAE7C,gBAAAA,QAAM,UAAU,MAAM;AACpB,QAAI;AACJ,UAAM,UAAU,IAAI;AACpB,QAAI,WAAW,OAAO;AACpB,YAAM,kBAAkB,MAAM,OAAO;AACrC,UAAI,iBAAiB;AACnB,kBAAU;AAAA,MACZ;AAAA,IACF;AAEA,WAAO,MAAM;AACX,UAAI,WAAW,SAAS;AACtB,gBAAQ,OAAO;AAAA,MACjB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,SAAO,6CAAC,SAAI,KAAU;AACxB;;;AHNS,IAAAC,sBAAA;AAfF,IAAM,OAAO,cAAAC,QAAM,KAAK,CAAC,UAAqB;AACnD,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,EAAE,QAAQ,aAAa,IAAI,mBAAY;AAE7C,QAAM,QAAQ,cAAAA,QAAM;AAAA,IAClB,CAAC,YAAyB;AACxB,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN;AAAA,QACA,OAAO,aAAa,EAAE,WAAW,CAAC,IAAI,gBAAgB,aAAa,IAAI,WAAW,WAAW,CAAC,EAAE,IAAI;AAAA,MACtG,CAAC;AAAA,IACH;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SAAO,6CAAC,WAAQ,OAAc;AAChC,CAAC;;;AIzBD,IAAAC,gBAA+B;;;ACA/B,IAAAC,gBAAwD;AACxD,uBAAqB;AACrB,gBAAuB;;;ACFvB,IAAAC,gBAAuB;AAEhB,IAAM,aAAa,CAAI,SAAY;AACxC,QAAM,UAAM,sBAAO,IAAI;AACvB,MAAI,UAAU;AAEd,SAAO;AACT;;;AD2DI,IAAAC,sBAAA;AAnDG,IAAM,WAAW,CAAC,EAAE,SAAS,SAAS,MAAqB;AAChE,QAAM,aAAa,WAAW,OAAO;AACrC,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAA6B;AACzD,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,wBAAS,oBAAI,IAAiC,CAAC;AAE7F,QAAM,mBAAe;AAAA,IACnB,CAAC,IAAiB,mBAAmC;AACnD,yBAAmB,CAAC,SAAS;AAC3B,cAAM,qBAAqB,IAAI,IAAI,IAAI;AACvC,2BAAmB,IAAI,IAAI,cAAc;AAEzC,eAAO;AAAA,MACT,CAAC;AAED,aAAO,MAAM;AACX,2BAAmB,CAAC,SAAS;AAC3B,gBAAM,qBAAqB,IAAI,IAAI,IAAI;AACvC,6BAAmB,OAAO,EAAE;AAE5B,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB;AAAA,EACrB;AAEA,+BAAU,MAAM;AACd,UAAM,OAAO,IAAI,iBAAO,WAAW,OAAO;AAC1C,cAAU,IAAI;AAEd,WAAO,MAAM;AACX,WAAK,QAAQ;AAAA,IACf;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,+BAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,WAAO,iBAAiB,QAAQ,UAAU;AAC1C,WAAO,mBAAmB,QAAQ,YAAY;AAC9C,WAAO,WAAW,QAAQ,IAAI;AAC9B,WAAO,cAAc,QAAQ,OAAO;AAAA,EACtC,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,EACT;AAEA,SACE,8CAAC,oBAAiB,OAAO,EAAE,cAAc,OAAO,GAC7C;AAAA,KAAC,GAAG,eAAe,EAAE,IAAI,CAAC,CAAC,SAAS,cAAc,MAAM;AACvD,aAAO,iBAAAC,QAAS,aAAa,gBAAgB,OAAO;AAAA,IACtD,CAAC;AAAA,IAEA;AAAA,KACH;AAEJ;;;ADzCS,IAAAC,sBAAA;AAzBT,IAAM,eAAe,CAAC,UAA6B;AACjD,QAAM,EAAE,MAAM,oBAAoB,YAAY,qBAAqB,sBAAsB,uBAAuB,IAC9G;AACF,QAAM,EAAE,QAAQ,aAAa,IAAI,mBAAY;AAE7C,QAAM,QAAQ,cAAAC,QAAM;AAAA,IAClB,CAAC,YAAyB;AACxB,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN,OAAO;AAAA,UACL;AAAA,UACA,mBAAmB,qBACf,CAAC,IAAI,iBAAiB,aAAa,IAAI,mBAAmB,YAAY,CAAC,IACvE;AAAA,UACJ,WAAW,aAAa,CAAC,IAAI,gBAAgB,aAAa,IAAI,WAAW,WAAW,CAAC,IAAI;AAAA,UACzF;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,MAAM,oBAAoB,YAAY,qBAAqB,sBAAsB,sBAAsB;AAAA,EAC1G;AAEA,SAAO,6CAAC,WAAQ,OAAc;AAChC;AAEO,IAAM,QAAQ,cAAAA,QAAM,KAAK,CAAC,UAAsB;AACrD,QAAM,EAAE,cAAc,YAAY,MAAM,uBAAuB,cAAc,gBAAgB,YAAY,UAAU,IACjH;AAEF,QAAM,cAAU,uBAAQ,MAAM;AAC5B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,EAAE,uBAAuB,cAAc,gBAAgB,YAAY,UAAU;AAAA,IACxF;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,MAAM,uBAAuB,cAAc,gBAAgB,YAAY,SAAS,CAAC;AAE/G,MAAI,oBAAoB,KAAK,GAAG;AAC9B,WAAO,6CAAC,YAAS,SAAmB,gBAAM,UAAS;AAAA,EACrD;AAEA,QAAM,EAAE,MAAM,oBAAoB,YAAY,qBAAqB,sBAAsB,uBAAuB,IAC9G;AAEF,SACE,6CAAC,YAAS,SACR;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,SAAS,oBAAoB,OAA+C;AAC1E,SAAO,cAAc;AACvB;;;AGxEA,IAAAC,gBAAkB;AAcT,IAAAC,sBAAA;AAVF,IAAM,cAAc,MAAM;AAC/B,QAAM,EAAE,OAAO,IAAI,mBAAY;AAE/B,QAAM,QAAQ,cAAAC,QAAM,YAAY,CAAC,YAAyB;AACxD,WAAO,OAAO,eAAe;AAAA,MAC3B,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SAAO,6CAAC,WAAQ,OAAc;AAChC;;;ACfA,IAAAC,gBAAkB;AAmCT,IAAAC,sBAAA;AAtBF,IAAM,gBAAgB,cAAAC,QAAM,KAAK,CAAC,UAA6B;AACpE,QAAM,EAAE,qBAAqB,sBAAsB,oBAAoB,uBAAuB,IAAI;AAClG,QAAM,EAAE,QAAQ,aAAa,IAAI,mBAAY;AAE7C,QAAM,QAAQ,cAAAA,QAAM;AAAA,IAClB,CAAC,YAAyB;AACxB,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN;AAAA,QACA,OAAO;AAAA,UACL,mBAAmB,qBACf,CAAC,IAAI,iBAAiB,aAAa,IAAI,mBAAmB,YAAY,CAAC,IACvE;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,qBAAqB,sBAAsB,sBAAsB;AAAA,EACxF;AAEA,SAAO,6CAAC,WAAQ,OAAc;AAChC,CAAC;","names":["import_react","React","import_react","import_jsx_runtime","React","import_jsx_runtime","React","import_react","import_react","import_react","import_jsx_runtime","ReactDOM","import_jsx_runtime","React","import_react","import_jsx_runtime","React","import_react","import_jsx_runtime","React"]}

package/dist/client/index.mjs

@@ -57,16 +57,17 @@ function Mounter({ mount }) {
 // src/components/Bell.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var Bell = React3.memo((props) => {
+  const { renderBell } = props;
   const { novuUI, mountElement } = useRendererContext();
   const mount = React3.useCallback(
     (element) => {
       return novuUI.mountComponent({
         name: "Bell",
         element,
-        props: props.children ? { mountBell: (el, { unreadCount }) => mountElement(el, props.children?.({ unreadCount })) } : void 0
+        props: renderBell ? { mountBell: (el, unreadCount) => mountElement(el, renderBell(unreadCount)) } : void 0
       });
     },
-    [props.children]
+    [renderBell]
   );
   return /* @__PURE__ */ jsx3(Mounter, { mount });
 });
@@ -139,14 +140,8 @@ var Renderer = ({ options, children }) => {
 
 // src/components/Inbox.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-var DefaultInbox = ({
-  open,
-  renderNotification,
-  renderBell,
-  onNotificationClick,
-  onPrimaryActionClick,
-  onSecondaryActionClick
-}) => {
+var DefaultInbox = (props) => {
+  const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } = props;
   const { novuUI, mountElement } = useRendererContext();
   const mount = React5.useCallback(
     (element) => {
@@ -154,8 +149,8 @@ var DefaultInbox = ({
         name: "Inbox",
         props: {
           open,
-          mountNotification: renderNotification ? (el, { notification }) => mountElement(el, renderNotification({ notification })) : void 0,
-          mountBell: renderBell ? (el, { unreadCount }) => mountElement(el, renderBell({ unreadCount })) : void 0,
+          mountNotification: renderNotification ? (el, notification) => mountElement(el, renderNotification(notification)) : void 0,
+          mountBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : void 0,
           onNotificationClick,
           onPrimaryActionClick,
           onSecondaryActionClick
@@ -214,27 +209,26 @@ var Preferences = () => {
 // src/components/Notifications.tsx
 import React7 from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var Notifications = React7.memo(
-  ({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }) => {
-    const { novuUI, mountElement } = useRendererContext();
-    const mount = React7.useCallback(
-      (element) => {
-        return novuUI.mountComponent({
-          name: "Notifications",
-          element,
-          props: children ? {
-            mountNotification: (el, { notification }) => mountElement(el, children?.({ notification })),
-            onNotificationClick,
-            onPrimaryActionClick,
-            onSecondaryActionClick
-          } : { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }
-        });
-      },
-      [children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
-    );
-    return /* @__PURE__ */ jsx6(Mounter, { mount });
-  }
-);
+var Notifications = React7.memo((props) => {
+  const { onNotificationClick, onPrimaryActionClick, renderNotification, onSecondaryActionClick } = props;
+  const { novuUI, mountElement } = useRendererContext();
+  const mount = React7.useCallback(
+    (element) => {
+      return novuUI.mountComponent({
+        name: "Notifications",
+        element,
+        props: {
+          mountNotification: renderNotification ? (el, notification) => mountElement(el, renderNotification(notification)) : void 0,
+          onNotificationClick,
+          onPrimaryActionClick,
+          onSecondaryActionClick
+        }
+      });
+    },
+    [renderNotification, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
+  );
+  return /* @__PURE__ */ jsx6(Mounter, { mount });
+});
 export {
   Bell,
   Inbox,

package/dist/client/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Bell.tsx","../../src/utils/createContextAndHook.ts","../../src/context/RenderContext.tsx","../../src/components/Mounter.tsx","../../src/components/Inbox.tsx","../../src/components/Renderer.tsx","../../src/hooks/useDataRef.ts","../../src/components/Preferences.tsx","../../src/components/Notifications.tsx"],"sourcesContent":["import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport type BellRenderProps = ({ unreadCount }: { unreadCount: number }) => React.ReactNode;\n\nexport type BellProps = {\n  children?: never | BellRenderProps;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Bell',\n        element,\n        props: props.children\n          ? { mountBell: (el, { unreadCount }) => mountElement(el, props.children?.({ unreadCount })) }\n          : undefined,\n      });\n    },\n    [props.children]\n  );\n\n  return <Mounter mount={mount} />;\n});\n","import React from 'react';\n\nexport function assertContextExists(contextVal: unknown, msgOrCtx: string | React.Context<any>): asserts contextVal {\n  if (!contextVal) {\n    throw typeof msgOrCtx === 'string' ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);\n  }\n}\n\ntype Options = { assertCtxFn?: (v: unknown, msg: string) => void };\ntype ContextOf<T> = React.Context<{ value: T } | undefined>;\ntype UseCtxFn<T> = () => T;\n\n/**\n * Creates and returns a Context and two hooks that return the context value.\n * The Context type is derived from the type passed in by the user.\n * The first hook returned guarantees that the context exists so the returned value is always CtxValue\n * The second hook makes no guarantees, so the returned value can be CtxValue | undefined\n */\nexport const createContextAndHook = <CtxVal>(\n  displayName: string,\n  options?: Options\n): [ContextOf<CtxVal>, UseCtxFn<CtxVal>, UseCtxFn<CtxVal | Partial<CtxVal>>] => {\n  const { assertCtxFn = assertContextExists } = options || {};\n  const Ctx = React.createContext<{ value: CtxVal } | undefined>(undefined);\n  Ctx.displayName = displayName;\n\n  const useCtx = () => {\n    const ctx = React.useContext(Ctx);\n    assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);\n\n    return (ctx as any).value as CtxVal;\n  };\n\n  const useCtxWithoutGuarantee = () => {\n    const ctx = React.useContext(Ctx);\n\n    return ctx ? ctx.value : {};\n  };\n\n  return [Ctx, useCtx, useCtxWithoutGuarantee];\n};\n","import React from 'react';\nimport type { NovuUI } from '@novu/js/ui';\nimport { createContextAndHook } from '../utils/createContextAndHook';\n\nexport type MountedElement = React.ReactNode;\nexport type MountedElements = Map<HTMLElement, MountedElement>;\n\ntype RendererContextValue = {\n  mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void;\n  novuUI: NovuUI;\n};\n\nconst [RendererContext, useRendererContext] = createContextAndHook<RendererContextValue>('RendererContext');\n\nconst RendererProvider = (props: React.PropsWithChildren<{ value: RendererContextValue }>) => {\n  return <RendererContext.Provider value={{ value: props.value }}>{props.children}</RendererContext.Provider>;\n};\n\nexport { useRendererContext as useRenderer, RendererProvider };\n","import React from 'react';\n\ntype MounterProps = {\n  mount: (node: HTMLElement) => ((node: HTMLElement) => void) | void;\n};\n\n/**\n * Mounter allows you to mount a component to a DOM node.\n */\nexport function Mounter({ mount }: MounterProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    let unmount: (node: HTMLDivElement) => void | undefined;\n    const element = ref.current;\n    if (element && mount) {\n      const possibleUnmount = mount(element);\n      if (possibleUnmount) {\n        unmount = possibleUnmount;\n      }\n    }\n\n    return () => {\n      if (element && unmount) {\n        unmount(element);\n      }\n    };\n  }, [ref, mount]);\n\n  return <div ref={ref} />;\n}\n","import React, { useMemo } from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { Renderer } from './Renderer';\n\nexport type InboxProps = DefaultProps | WithChildrenProps;\n\nconst DefaultInbox = ({\n  open,\n  renderNotification,\n  renderBell,\n  onNotificationClick,\n  onPrimaryActionClick,\n  onSecondaryActionClick,\n}: DefaultInboxProps) => {\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Inbox',\n        props: {\n          open,\n          mountNotification: renderNotification\n            ? (el, { notification }) => mountElement(el, renderNotification({ notification }))\n            : undefined,\n          mountBell: renderBell ? (el, { unreadCount }) => mountElement(el, renderBell({ unreadCount })) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n        },\n        element,\n      });\n    },\n    [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  return <Mounter mount={mount} />;\n};\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  const { localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } =\n    props;\n\n  const options = useMemo(() => {\n    return {\n      localization,\n      appearance,\n      tabs,\n      options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl },\n    };\n  }, [localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl]);\n\n  if (isWithChildrenProps(props)) {\n    return <Renderer options={options}>{props.children}</Renderer>;\n  }\n\n  const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =\n    props;\n\n  return (\n    <Renderer options={options}>\n      <DefaultInbox\n        open={open}\n        renderNotification={renderNotification}\n        renderBell={renderBell}\n        onNotificationClick={onNotificationClick}\n        onPrimaryActionClick={onPrimaryActionClick}\n        onSecondaryActionClick={onSecondaryActionClick}\n      />\n    </Renderer>\n  );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n","import React, { useCallback, useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { NovuUI } from '@novu/js/ui';\nimport type { NovuUIOptions } from '@novu/js/ui';\nimport { MountedElement, RendererProvider } from '../context/RenderContext';\nimport { useDataRef } from '../hooks/useDataRef';\n\ntype RendererProps = React.PropsWithChildren<{\n  options: NovuUIOptions;\n}>;\n\n/**\n *\n * Renderer component that provides the NovuUI instance and mounts the elements on DOM in a portal\n */\nexport const Renderer = ({ options, children }: RendererProps) => {\n  const optionsRef = useDataRef(options);\n  const [novuUI, setNovuUI] = useState<NovuUI | undefined>();\n  const [mountedElements, setMountedElements] = useState(new Map<HTMLElement, MountedElement>());\n\n  const mountElement = useCallback(\n    (el: HTMLElement, mountedElement: MountedElement) => {\n      setMountedElements((prev) => {\n        const newMountedElements = new Map(prev);\n        newMountedElements.set(el, mountedElement);\n\n        return newMountedElements;\n      });\n\n      return () => {\n        setMountedElements((prev) => {\n          const newMountedElements = new Map(prev);\n          newMountedElements.delete(el);\n\n          return newMountedElements;\n        });\n      };\n    },\n    [setMountedElements]\n  );\n\n  useEffect(() => {\n    const novu = new NovuUI(optionsRef.current);\n    setNovuUI(novu);\n\n    return () => {\n      novu.unmount();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!novuUI) {\n      return;\n    }\n\n    novuUI.updateAppearance(options.appearance);\n    novuUI.updateLocalization(options.localization);\n    novuUI.updateTabs(options.tabs);\n    novuUI.updateOptions(options.options);\n  }, [options]);\n\n  if (!novuUI) {\n    return null;\n  }\n\n  return (\n    <RendererProvider value={{ mountElement, novuUI }}>\n      {[...mountedElements].map(([element, mountedElement]) => {\n        return ReactDOM.createPortal(mountedElement, element);\n      })}\n\n      {children}\n    </RendererProvider>\n  );\n};\n","import { useRef } from 'react';\n\nexport const useDataRef = <T>(data: T) => {\n  const ref = useRef(data);\n  ref.current = data;\n\n  return ref;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport const Preferences = () => {\n  const { novuUI } = useRenderer();\n\n  const mount = React.useCallback((element: HTMLElement) => {\n    return novuUI.mountComponent({\n      name: 'Preferences',\n      element,\n    });\n  }, []);\n\n  return <Mounter mount={mount} />;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { NotificationsRenderProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\n\nexport type NotificationProps = {\n  children?: never | NotificationsRenderProps;\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo(\n  ({ children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }: NotificationProps) => {\n    const { novuUI, mountElement } = useRenderer();\n\n    const mount = React.useCallback(\n      (element: HTMLElement) => {\n        return novuUI.mountComponent({\n          name: 'Notifications',\n          element,\n          props: children\n            ? {\n                mountNotification: (el, { notification }) => mountElement(el, children?.({ notification })),\n                onNotificationClick,\n                onPrimaryActionClick,\n                onSecondaryActionClick,\n              }\n            : { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick },\n        });\n      },\n      [children, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n    );\n\n    return <Mounter mount={mount} />;\n  }\n);\n"],"mappings":"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","names":["React","React","jsx","jsx","React","React","jsx","React","React","jsx","React","React","jsx","React"]}
+{"version":3,"sources":["../../src/components/Bell.tsx","../../src/utils/createContextAndHook.ts","../../src/context/RenderContext.tsx","../../src/components/Mounter.tsx","../../src/components/Inbox.tsx","../../src/components/Renderer.tsx","../../src/hooks/useDataRef.ts","../../src/components/Preferences.tsx","../../src/components/Notifications.tsx"],"sourcesContent":["import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\nimport { BellRenderer } from '../utils/types';\n\nexport type BellProps = {\n  renderBell?: BellRenderer;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n  const { renderBell } = props;\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Bell',\n        element,\n        props: renderBell ? { mountBell: (el, unreadCount) => mountElement(el, renderBell(unreadCount)) } : undefined,\n      });\n    },\n    [renderBell]\n  );\n\n  return <Mounter mount={mount} />;\n});\n","import React from 'react';\n\nexport function assertContextExists(contextVal: unknown, msgOrCtx: string | React.Context<any>): asserts contextVal {\n  if (!contextVal) {\n    throw typeof msgOrCtx === 'string' ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);\n  }\n}\n\ntype Options = { assertCtxFn?: (v: unknown, msg: string) => void };\ntype ContextOf<T> = React.Context<{ value: T } | undefined>;\ntype UseCtxFn<T> = () => T;\n\n/**\n * Creates and returns a Context and two hooks that return the context value.\n * The Context type is derived from the type passed in by the user.\n * The first hook returned guarantees that the context exists so the returned value is always CtxValue\n * The second hook makes no guarantees, so the returned value can be CtxValue | undefined\n */\nexport const createContextAndHook = <CtxVal>(\n  displayName: string,\n  options?: Options\n): [ContextOf<CtxVal>, UseCtxFn<CtxVal>, UseCtxFn<CtxVal | Partial<CtxVal>>] => {\n  const { assertCtxFn = assertContextExists } = options || {};\n  const Ctx = React.createContext<{ value: CtxVal } | undefined>(undefined);\n  Ctx.displayName = displayName;\n\n  const useCtx = () => {\n    const ctx = React.useContext(Ctx);\n    assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);\n\n    return (ctx as any).value as CtxVal;\n  };\n\n  const useCtxWithoutGuarantee = () => {\n    const ctx = React.useContext(Ctx);\n\n    return ctx ? ctx.value : {};\n  };\n\n  return [Ctx, useCtx, useCtxWithoutGuarantee];\n};\n","import React from 'react';\nimport type { NovuUI } from '@novu/js/ui';\nimport { createContextAndHook } from '../utils/createContextAndHook';\n\nexport type MountedElement = React.ReactNode;\nexport type MountedElements = Map<HTMLElement, MountedElement>;\n\ntype RendererContextValue = {\n  mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void;\n  novuUI: NovuUI;\n};\n\nconst [RendererContext, useRendererContext] = createContextAndHook<RendererContextValue>('RendererContext');\n\nconst RendererProvider = (props: React.PropsWithChildren<{ value: RendererContextValue }>) => {\n  return <RendererContext.Provider value={{ value: props.value }}>{props.children}</RendererContext.Provider>;\n};\n\nexport { useRendererContext as useRenderer, RendererProvider };\n","import React from 'react';\n\ntype MounterProps = {\n  mount: (node: HTMLElement) => ((node: HTMLElement) => void) | void;\n};\n\n/**\n * Mounter allows you to mount a component to a DOM node.\n */\nexport function Mounter({ mount }: MounterProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    let unmount: (node: HTMLDivElement) => void | undefined;\n    const element = ref.current;\n    if (element && mount) {\n      const possibleUnmount = mount(element);\n      if (possibleUnmount) {\n        unmount = possibleUnmount;\n      }\n    }\n\n    return () => {\n      if (element && unmount) {\n        unmount(element);\n      }\n    };\n  }, [ref, mount]);\n\n  return <div ref={ref} />;\n}\n","import React, { useMemo } from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { Renderer } from './Renderer';\n\nexport type InboxProps = DefaultProps | WithChildrenProps;\n\nconst DefaultInbox = (props: DefaultInboxProps) => {\n  const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =\n    props;\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Inbox',\n        props: {\n          open,\n          mountNotification: renderNotification\n            ? (el, notification) => mountElement(el, renderNotification(notification))\n            : undefined,\n          mountBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n        },\n        element,\n      });\n    },\n    [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  return <Mounter mount={mount} />;\n};\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  const { localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } =\n    props;\n\n  const options = useMemo(() => {\n    return {\n      localization,\n      appearance,\n      tabs,\n      options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl },\n    };\n  }, [localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl]);\n\n  if (isWithChildrenProps(props)) {\n    return <Renderer options={options}>{props.children}</Renderer>;\n  }\n\n  const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =\n    props;\n\n  return (\n    <Renderer options={options}>\n      <DefaultInbox\n        open={open}\n        renderNotification={renderNotification}\n        renderBell={renderBell}\n        onNotificationClick={onNotificationClick}\n        onPrimaryActionClick={onPrimaryActionClick}\n        onSecondaryActionClick={onSecondaryActionClick}\n      />\n    </Renderer>\n  );\n});\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n","import React, { useCallback, useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { NovuUI } from '@novu/js/ui';\nimport type { NovuUIOptions } from '@novu/js/ui';\nimport { MountedElement, RendererProvider } from '../context/RenderContext';\nimport { useDataRef } from '../hooks/useDataRef';\n\ntype RendererProps = React.PropsWithChildren<{\n  options: NovuUIOptions;\n}>;\n\n/**\n *\n * Renderer component that provides the NovuUI instance and mounts the elements on DOM in a portal\n */\nexport const Renderer = ({ options, children }: RendererProps) => {\n  const optionsRef = useDataRef(options);\n  const [novuUI, setNovuUI] = useState<NovuUI | undefined>();\n  const [mountedElements, setMountedElements] = useState(new Map<HTMLElement, MountedElement>());\n\n  const mountElement = useCallback(\n    (el: HTMLElement, mountedElement: MountedElement) => {\n      setMountedElements((prev) => {\n        const newMountedElements = new Map(prev);\n        newMountedElements.set(el, mountedElement);\n\n        return newMountedElements;\n      });\n\n      return () => {\n        setMountedElements((prev) => {\n          const newMountedElements = new Map(prev);\n          newMountedElements.delete(el);\n\n          return newMountedElements;\n        });\n      };\n    },\n    [setMountedElements]\n  );\n\n  useEffect(() => {\n    const novu = new NovuUI(optionsRef.current);\n    setNovuUI(novu);\n\n    return () => {\n      novu.unmount();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!novuUI) {\n      return;\n    }\n\n    novuUI.updateAppearance(options.appearance);\n    novuUI.updateLocalization(options.localization);\n    novuUI.updateTabs(options.tabs);\n    novuUI.updateOptions(options.options);\n  }, [options]);\n\n  if (!novuUI) {\n    return null;\n  }\n\n  return (\n    <RendererProvider value={{ mountElement, novuUI }}>\n      {[...mountedElements].map(([element, mountedElement]) => {\n        return ReactDOM.createPortal(mountedElement, element);\n      })}\n\n      {children}\n    </RendererProvider>\n  );\n};\n","import { useRef } from 'react';\n\nexport const useDataRef = <T>(data: T) => {\n  const ref = useRef(data);\n  ref.current = data;\n\n  return ref;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\n\nexport const Preferences = () => {\n  const { novuUI } = useRenderer();\n\n  const mount = React.useCallback((element: HTMLElement) => {\n    return novuUI.mountComponent({\n      name: 'Preferences',\n      element,\n    });\n  }, []);\n\n  return <Mounter mount={mount} />;\n};\n","import React from 'react';\nimport { useRenderer } from '../context/RenderContext';\nimport { Mounter } from './Mounter';\nimport type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\nimport { NotificationsRenderer } from '../utils/types';\n\nexport type NotificationProps = {\n  renderNotification?: NotificationsRenderer;\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n};\n\nexport const Notifications = React.memo((props: NotificationProps) => {\n  const { onNotificationClick, onPrimaryActionClick, renderNotification, onSecondaryActionClick } = props;\n  const { novuUI, mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Notifications',\n        element,\n        props: {\n          mountNotification: renderNotification\n            ? (el, notification) => mountElement(el, renderNotification(notification))\n            : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n        },\n      });\n    },\n    [renderNotification, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  return <Mounter mount={mount} />;\n});\n"],"mappings":"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","names":["React","React","jsx","jsx","React","React","jsx","React","React","jsx","React","React","jsx","React"]}

package/dist/server/server.d.mts

@@ -1,17 +1,12 @@
 import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
 export { Notification } from '@novu/js/ui';
 
-type NotificationsRenderProps = (args: {
-    notification: Notification;
-}) => React.ReactNode;
+type NotificationsRenderer = (notification: Notification) => React.ReactNode;
+type BellRenderer = (unreadCount: number) => React.ReactNode;
 type DefaultInboxProps = {
     open?: boolean;
-    renderNotification?: (args: {
-        notification: Notification;
-    }) => React.ReactNode;
-    renderBell?: ({ unreadCount }: {
-        unreadCount: number;
-    }) => React.ReactNode;
+    renderNotification?: NotificationsRenderer;
+    renderBell?: BellRenderer;
     onNotificationClick?: NotificationClickHandler;
     onPrimaryActionClick?: NotificationActionClickHandler;
     onSecondaryActionClick?: NotificationActionClickHandler;
@@ -44,4 +39,4 @@ declare function Notifications(): void;
 declare function Preferences(): void;
 declare function Bell(): void;
 
-export { type BaseProps, Bell, type DefaultInboxProps, type DefaultProps, Inbox, Notifications, type NotificationsRenderProps, Preferences, type WithChildrenProps };
+export { type BaseProps, Bell, type BellRenderer, type DefaultInboxProps, type DefaultProps, Inbox, Notifications, type NotificationsRenderer, Preferences, type WithChildrenProps };

package/dist/server/server.d.ts

@@ -1,17 +1,12 @@
 import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
 export { Notification } from '@novu/js/ui';
 
-type NotificationsRenderProps = (args: {
-    notification: Notification;
-}) => React.ReactNode;
+type NotificationsRenderer = (notification: Notification) => React.ReactNode;
+type BellRenderer = (unreadCount: number) => React.ReactNode;
 type DefaultInboxProps = {
     open?: boolean;
-    renderNotification?: (args: {
-        notification: Notification;
-    }) => React.ReactNode;
-    renderBell?: ({ unreadCount }: {
-        unreadCount: number;
-    }) => React.ReactNode;
+    renderNotification?: NotificationsRenderer;
+    renderBell?: BellRenderer;
     onNotificationClick?: NotificationClickHandler;
     onPrimaryActionClick?: NotificationActionClickHandler;
     onSecondaryActionClick?: NotificationActionClickHandler;
@@ -44,4 +39,4 @@ declare function Notifications(): void;
 declare function Preferences(): void;
 declare function Bell(): void;
 
-export { type BaseProps, Bell, type DefaultInboxProps, type DefaultProps, Inbox, Notifications, type NotificationsRenderProps, Preferences, type WithChildrenProps };
+export { type BaseProps, Bell, type BellRenderer, type DefaultInboxProps, type DefaultProps, Inbox, Notifications, type NotificationsRenderer, Preferences, type WithChildrenProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novu/react",
-  "version": "2.0.0-canary.0",
+  "version": "2.0.0-canary.2",
   "repository": "https://github.com/novuhq/novu",
   "description": "Novu's React SDK for building custom inbox notification experiences",
   "author": "",
@@ -16,7 +16,7 @@
     ".": {
       "import": {
         "types": "./dist/client/index.d.ts",
-        "default": "./dist/server/server.js"
+        "default": "./dist/server/server.mjs"
       },
       "require": {
         "types": "./dist/server/server.d.ts",
@@ -65,6 +65,6 @@
     "react-dom": ">=17"
   },
   "dependencies": {
-    "@novu/js": "^2.0.0-canary.0"
+    "@novu/js": "^2.0.0-canary.1"
   }
 }