@novu/react 2.2.0 → 2.3.0

package/dist/client/index.mjs

@@ -1,5 +1,31 @@
 // src/components/Bell.tsx
-import React3 from "react";
+import React2 from "react";
+
+// src/components/Mounter.tsx
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function Mounter({ mount }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    let unmount;
+    const element = ref.current;
+    if (element && mount) {
+      const possibleUnmount = mount(element);
+      if (possibleUnmount) {
+        unmount = possibleUnmount;
+      }
+    }
+    return () => {
+      if (element && unmount) {
+        unmount(element);
+      }
+    };
+  }, [ref, mount]);
+  return /* @__PURE__ */ jsx("div", { ref });
+}
+
+// src/components/Renderer.tsx
+import { useCallback, useState } from "react";
 
 // src/utils/createContextAndHook.ts
 import React from "react";
@@ -14,7 +40,7 @@ var createContextAndHook = (displayName, options) => {
   Ctx.displayName = displayName;
   const useCtx = () => {
     const ctx = React.useContext(Ctx);
-    assertCtxFn(ctx, `Component must be wrapped with the <Inbox /> Component`);
+    assertCtxFn(ctx, `Component must be wrapped with ${Ctx.displayName}`);
     return ctx.value;
   };
   const useCtxWithoutGuarantee = () => {
@@ -24,42 +50,65 @@ var createContextAndHook = (displayName, options) => {
   return [Ctx, useCtx, useCtxWithoutGuarantee];
 };
 
-// src/context/RenderContext.tsx
-import { jsx } from "react/jsx-runtime";
-var [RendererContext, useRendererContext] = createContextAndHook("RendererContext");
+// src/context/RendererContext.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var [RendererContext, useRendererContext, useUnsafeRendererContext] = createContextAndHook("RendererContext");
 var RendererProvider = (props) => {
-  return /* @__PURE__ */ jsx(RendererContext.Provider, { value: { value: props.value }, children: props.children });
+  return /* @__PURE__ */ jsx2(RendererContext.Provider, { value: { value: props.value }, children: props.children });
 };
 
-// src/components/Mounter.tsx
-import React2 from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function Mounter({ mount }) {
-  const ref = React2.useRef(null);
-  React2.useEffect(() => {
-    let unmount;
-    const element = ref.current;
-    if (element && mount) {
-      const possibleUnmount = mount(element);
-      if (possibleUnmount) {
-        unmount = possibleUnmount;
-      }
-    }
-    return () => {
-      if (element && unmount) {
-        unmount(element);
-      }
-    };
-  }, [ref, mount]);
-  return /* @__PURE__ */ jsx2("div", { ref });
-}
+// src/components/Renderer.tsx
+import { createPortal } from "react-dom";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var Renderer = (props) => {
+  const { children } = props;
+  const [mountedElements, setMountedElements] = useState(/* @__PURE__ */ new Map());
+  const mountElement = useCallback(
+    (el, mountedElement) => {
+      setMountedElements((prev) => {
+        const newMountedElements = new Map(prev);
+        newMountedElements.set(el, mountedElement);
+        return newMountedElements;
+      });
+      return () => {
+        setMountedElements((prev) => {
+          const newMountedElements = new Map(prev);
+          newMountedElements.delete(el);
+          return newMountedElements;
+        });
+      };
+    },
+    [setMountedElements]
+  );
+  return /* @__PURE__ */ jsxs(RendererProvider, { value: { mountElement }, children: [
+    [...mountedElements].map(([element, mountedElement]) => {
+      return createPortal(mountedElement, element);
+    }),
+    children
+  ] });
+};
+var withRenderer = (WrappedComponent) => {
+  const HOC = (props) => {
+    return /* @__PURE__ */ jsx3(Renderer, { children: /* @__PURE__ */ jsx3(WrappedComponent, { ...props }) });
+  };
+  HOC.displayName = `WithRenderer(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
+  return HOC;
+};
+
+// src/context/NovuUIContext.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var [NovuUIContext, useNovuUIContext, useUnsafeNovuUIContext] = createContextAndHook("NovuUIContext");
+var NovuUIProvider = (props) => {
+  return /* @__PURE__ */ jsx4(NovuUIContext.Provider, { value: { value: props.value }, children: props.children });
+};
 
 // src/components/Bell.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Bell = React3.memo((props) => {
+import { jsx as jsx5 } from "react/jsx-runtime";
+var _Bell = React2.memo((props) => {
   const { renderBell } = props;
-  const { novuUI, mountElement } = useRendererContext();
-  const mount = React3.useCallback(
+  const { novuUI } = useNovuUIContext();
+  const { mountElement } = useRendererContext();
+  const mount = React2.useCallback(
     (element) => {
       return novuUI.mountComponent({
         name: "Bell",
@@ -69,56 +118,70 @@ var Bell = React3.memo((props) => {
     },
     [renderBell]
   );
-  return /* @__PURE__ */ jsx3(Mounter, { mount });
+  return /* @__PURE__ */ jsx5(Mounter, { mount });
 });
+var Bell = withRenderer(_Bell);
 
 // src/components/Inbox.tsx
-import React5, { useMemo } from "react";
+import React4, { useMemo as useMemo2 } from "react";
 
-// src/components/Renderer.tsx
-import { useCallback, useEffect, useState } from "react";
-import ReactDOM from "react-dom";
-import { NovuUI } from "@novu/js/ui";
+// src/hooks/NovuProvider.tsx
+import { Novu } from "@novu/js";
+import { createContext, useContext, useMemo } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var NovuContext = createContext(void 0);
+var NovuProvider = ({
+  children,
+  applicationIdentifier,
+  subscriberId,
+  subscriberHash,
+  backendUrl,
+  socketUrl,
+  useCache
+}) => {
+  const novu = useMemo(
+    () => new Novu({ applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache }),
+    [applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache]
+  );
+  return /* @__PURE__ */ jsx6(NovuContext.Provider, { value: novu, children });
+};
+var useNovu = () => {
+  const context = useContext(NovuContext);
+  if (!context) {
+    throw new Error("useNovu must be used within a <NovuProvider />");
+  }
+  return context;
+};
+var useUnsafeNovu = () => {
+  const context = useContext(NovuContext);
+  return context;
+};
+
+// src/components/NovuUI.tsx
+import { NovuUI as NovuUIClass } from "@novu/js/ui";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 
 // src/hooks/internal/useDataRef.ts
-import { useRef } from "react";
+import { useRef as useRef2 } from "react";
 var useDataRef = (data) => {
-  const ref = useRef(data);
+  const ref = useRef2(data);
   ref.current = data;
   return ref;
 };
 
-// src/components/Renderer.tsx
-import { jsxs } from "react/jsx-runtime";
-var Renderer = ({ options, novu, children }) => {
+// src/components/NovuUI.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var NovuUI = ({ options, novu, children }) => {
   const optionsRef = useDataRef({ ...options, novu });
-  const [novuUI, setNovuUI] = useState();
-  const [mountedElements, setMountedElements] = useState(/* @__PURE__ */ new Map());
-  const mountElement = useCallback(
-    (el, mountedElement) => {
-      setMountedElements((prev) => {
-        const newMountedElements = new Map(prev);
-        newMountedElements.set(el, mountedElement);
-        return newMountedElements;
-      });
-      return () => {
-        setMountedElements((prev) => {
-          const newMountedElements = new Map(prev);
-          newMountedElements.delete(el);
-          return newMountedElements;
-        });
-      };
-    },
-    [setMountedElements]
-  );
-  useEffect(() => {
-    const novu2 = new NovuUI(optionsRef.current);
+  const [novuUI, setNovuUI] = useState2();
+  useEffect2(() => {
+    const novu2 = new NovuUIClass(optionsRef.current);
     setNovuUI(novu2);
     return () => {
       novu2.unmount();
     };
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     if (!novuUI) {
       return;
     }
@@ -127,25 +190,20 @@ var Renderer = ({ options, novu, children }) => {
     novuUI.updateTabs(options.tabs);
     novuUI.updateOptions(options.options);
     novuUI.updateRouterPush(options.routerPush);
-    novuUI.updatePreferencesFilter(options.preferencesFilter);
   }, [options]);
   if (!novuUI) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(RendererProvider, { value: { mountElement, novuUI }, children: [
-    [...mountedElements].map(([element, mountedElement]) => {
-      return ReactDOM.createPortal(mountedElement, element);
-    }),
-    children
-  ] });
+  return /* @__PURE__ */ jsx7(NovuUIProvider, { value: { novuUI }, children });
 };
 
 // src/components/Inbox.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var DefaultInbox = (props) => {
+import { jsx as jsx8 } from "react/jsx-runtime";
+var _DefaultInbox = (props) => {
   const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } = props;
-  const { novuUI, mountElement } = useRendererContext();
-  const mount = React5.useCallback(
+  const { novuUI } = useNovuUIContext();
+  const { mountElement } = useRendererContext();
+  const mount = React4.useCallback(
     (element) => {
       return novuUI.mountComponent({
         name: "Inbox",
@@ -162,15 +220,16 @@ var DefaultInbox = (props) => {
     },
     [open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
   );
-  return /* @__PURE__ */ jsx4(Mounter, { mount });
+  return /* @__PURE__ */ jsx8(Mounter, { mount });
 };
-var Inbox = React5.memo((props) => {
+var DefaultInbox = withRenderer(_DefaultInbox);
+var Inbox = React4.memo((props) => {
   const { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } = props;
   const novu = useUnsafeNovu();
   if (novu) {
-    return /* @__PURE__ */ jsx4(InboxChild, { ...props });
+    return /* @__PURE__ */ jsx8(InboxChild, { ...props });
   }
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx8(
     NovuProvider,
     {
       applicationIdentifier,
@@ -178,11 +237,11 @@ var Inbox = React5.memo((props) => {
       subscriberHash,
       backendUrl,
       socketUrl,
-      children: /* @__PURE__ */ jsx4(InboxChild, { ...props })
+      children: /* @__PURE__ */ jsx8(InboxChild, { ...props })
     }
   );
 });
-var InboxChild = React5.memo((props) => {
+var InboxChild = React4.memo((props) => {
   const {
     localization,
     appearance,
@@ -196,7 +255,7 @@ var InboxChild = React5.memo((props) => {
     socketUrl
   } = props;
   const novu = useNovu();
-  const options = useMemo(() => {
+  const options = useMemo2(() => {
     return {
       localization,
       appearance,
@@ -217,10 +276,10 @@ var InboxChild = React5.memo((props) => {
     socketUrl
   ]);
   if (isWithChildrenProps(props)) {
-    return /* @__PURE__ */ jsx4(Renderer, { options, novu, children: props.children });
+    return /* @__PURE__ */ jsx8(NovuUI, { options, novu, children: props.children });
   }
   const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } = props;
-  return /* @__PURE__ */ jsx4(Renderer, { options, novu, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx8(NovuUI, { options, novu, children: /* @__PURE__ */ jsx8(
     DefaultInbox,
     {
       open,
@@ -237,26 +296,27 @@ function isWithChildrenProps(props) {
 }
 
 // src/components/Preferences.tsx
-import React6 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import React5 from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Preferences = () => {
-  const { novuUI } = useRendererContext();
-  const mount = React6.useCallback((element) => {
+  const { novuUI } = useNovuUIContext();
+  const mount = React5.useCallback((element) => {
     return novuUI.mountComponent({
       name: "Preferences",
       element
     });
   }, []);
-  return /* @__PURE__ */ jsx5(Mounter, { mount });
+  return /* @__PURE__ */ jsx9(Mounter, { mount });
 };
 
 // src/components/Notifications.tsx
-import React7 from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var Notifications = React7.memo((props) => {
+import React6 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var _Notifications = React6.memo((props) => {
   const { onNotificationClick, onPrimaryActionClick, renderNotification, onSecondaryActionClick } = props;
-  const { novuUI, mountElement } = useRendererContext();
-  const mount = React7.useCallback(
+  const { novuUI } = useNovuUIContext();
+  const { mountElement } = useRendererContext();
+  const mount = React6.useCallback(
     (element) => {
       return novuUI.mountComponent({
         name: "Notifications",
@@ -271,53 +331,57 @@ var Notifications = React7.memo((props) => {
     },
     [renderNotification, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
   );
-  return /* @__PURE__ */ jsx6(Mounter, { mount });
+  return /* @__PURE__ */ jsx10(Mounter, { mount });
 });
+var Notifications = withRenderer(_Notifications);
 
-// src/hooks/NovuProvider.tsx
-import { Novu } from "@novu/js";
-import { createContext, useContext, useMemo as useMemo2 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var NovuContext = createContext(void 0);
-var NovuProvider = ({
-  children,
-  applicationIdentifier,
-  subscriberId,
-  subscriberHash,
-  backendUrl,
-  socketUrl,
-  useCache
-}) => {
-  const novu = useMemo2(
-    () => new Novu({ applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache }),
-    [applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache]
+// src/components/InboxContent.tsx
+import React7 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var _InboxContent = React7.memo((props) => {
+  const {
+    onNotificationClick,
+    onPrimaryActionClick,
+    renderNotification,
+    onSecondaryActionClick,
+    initialPage,
+    hideNav
+  } = props;
+  const { novuUI } = useNovuUIContext();
+  const { mountElement } = useRendererContext();
+  const mount = React7.useCallback(
+    (element) => {
+      return novuUI.mountComponent({
+        name: "InboxContent",
+        element,
+        props: {
+          renderNotification: renderNotification ? (el, notification) => mountElement(el, renderNotification(notification)) : void 0,
+          onNotificationClick,
+          onPrimaryActionClick,
+          onSecondaryActionClick,
+          initialPage,
+          hideNav
+        }
+      });
+    },
+    [renderNotification, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
   );
-  return /* @__PURE__ */ jsx7(NovuContext.Provider, { value: novu, children });
-};
-var useNovu = () => {
-  const context = useContext(NovuContext);
-  if (!context) {
-    throw new Error("useNovu must be used within a <NovuProvider />");
-  }
-  return context;
-};
-var useUnsafeNovu = () => {
-  const context = useContext(NovuContext);
-  return context;
-};
+  return /* @__PURE__ */ jsx11(Mounter, { mount });
+});
+var InboxContent = withRenderer(_InboxContent);
 
 // src/hooks/useNotifications.ts
-import { useState as useState2, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useState as useState3, useEffect as useEffect3, useRef as useRef3 } from "react";
 import { isSameFilter } from "@novu/js";
 var useNotifications = (props) => {
   const { tags, read, archived = false, limit, onSuccess, onError } = props || {};
-  const filterRef = useRef2(void 0);
+  const filterRef = useRef3(void 0);
   const { notifications, on, off } = useNovu();
-  const [data, setData] = useState2();
-  const [error, setError] = useState2();
-  const [isLoading, setIsLoading] = useState2(true);
-  const [isFetching, setIsFetching] = useState2(false);
-  const [hasMore, setHasMore] = useState2(false);
+  const [data, setData] = useState3();
+  const [error, setError] = useState3();
+  const [isLoading, setIsLoading] = useState3(true);
+  const [isFetching, setIsFetching] = useState3(false);
+  const [hasMore, setHasMore] = useState3(false);
   const length = data?.length;
   const after = length ? data[length - 1].id : void 0;
   const sync = (event) => {
@@ -327,13 +391,13 @@ var useNotifications = (props) => {
     setData(event.data.notifications);
     setHasMore(event.data.hasMore);
   };
-  useEffect2(() => {
+  useEffect3(() => {
     on("notifications.list.updated", sync);
     return () => {
       off("notifications.list.updated", sync);
     };
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     const newFilter = { tags, read, archived };
     if (filterRef.current && isSameFilter(filterRef.current, newFilter)) {
       return;
@@ -399,21 +463,21 @@ var useNotifications = (props) => {
 };
 
 // src/hooks/usePreferences.ts
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 var usePreferences = (props) => {
   const { onSuccess, onError } = props || {};
-  const [data, setData] = useState3();
+  const [data, setData] = useState4();
   const { preferences, on, off } = useNovu();
-  const [error, setError] = useState3();
-  const [isLoading, setIsLoading] = useState3(true);
-  const [isFetching, setIsFetching] = useState3(false);
+  const [error, setError] = useState4();
+  const [isLoading, setIsLoading] = useState4(true);
+  const [isFetching, setIsFetching] = useState4(false);
   const sync = (event) => {
     if (!event.data) {
       return;
     }
     setData(event.data);
   };
-  useEffect3(() => {
+  useEffect4(() => {
     fetchPreferences();
     on("preferences.list.updated", sync);
     on("preferences.list.pending", sync);
@@ -450,11 +514,11 @@ var usePreferences = (props) => {
 };
 
 // src/hooks/useCounts.ts
-import { useEffect as useEffect6, useState as useState5 } from "react";
+import { useEffect as useEffect7, useState as useState6 } from "react";
 import { areTagsEqual } from "@novu/js";
 
 // src/hooks/internal/useWebsocketEvent.ts
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 
 // src/utils/requestLock.ts
 function requestLock(id, cb) {
@@ -481,18 +545,18 @@ function requestLock(id, cb) {
 }
 
 // src/hooks/internal/useBrowserTabsChannel.ts
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 var useBrowserTabsChannel = ({
   channelName,
   onMessage
 }) => {
-  const [tabsChannel] = useState4(
+  const [tabsChannel] = useState5(
     typeof BroadcastChannel !== "undefined" ? new BroadcastChannel(channelName) : void 0
   );
   const postMessage = (data) => {
     tabsChannel?.postMessage(data);
   };
-  useEffect4(() => {
+  useEffect5(() => {
     const listener = (event) => {
       onMessage(event.data);
     };
@@ -515,7 +579,7 @@ var useWebSocketEvent = ({
     onMessage(data);
     postMessage(data);
   };
-  useEffect5(() => {
+  useEffect6(() => {
     const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {
       novu.on(webSocketEvent, updateReadCount);
     });
@@ -530,10 +594,10 @@ var useWebSocketEvent = ({
 var useCounts = (props) => {
   const { filters, onSuccess, onError } = props;
   const { notifications } = useNovu();
-  const [error, setError] = useState5();
-  const [counts, setCounts] = useState5();
-  const [isLoading, setIsLoading] = useState5(true);
-  const [isFetching, setIsFetching] = useState5(false);
+  const [error, setError] = useState6();
+  const [counts, setCounts] = useState6();
+  const [isLoading, setIsLoading] = useState6(true);
+  const [isFetching, setIsFetching] = useState6(false);
   const sync = async (notification) => {
     const existingCounts = counts ?? new Array(filters.length).fill(void 0);
     let countFiltersToFetch = [];
@@ -583,7 +647,7 @@ var useCounts = (props) => {
       sync();
     }
   });
-  useEffect6(() => {
+  useEffect7(() => {
     setError(void 0);
     setIsLoading(true);
     setIsFetching(false);
@@ -597,7 +661,7 @@ var useCounts = (props) => {
 export {
   Bell,
   Inbox,
-  InboxChild,
+  InboxContent,
   Notifications,
   NovuProvider,
   Preferences,