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

package/dist/cjs/server/index.d.cts

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { InboxProps } from '../components/Inbox.cjs';
+import { NotificationItem as NotificationItem$1 } from '../components/notification-item/NotificationItem.cjs';
+export { NotificationItemProps } from '../components/notification-item/NotificationItem.cjs';
 export * from '@novu/js';
 export { PreferenceLevel, SeverityLevelEnum, WorkflowCriticalityEnum, pendingActionKey } from '@novu/js';
 import { NovuProviderProps } from '../hooks/NovuProvider.cjs';
@@ -19,6 +21,11 @@ export { InboxContentProps } from '../components/InboxContent.cjs';
 export { BaseProps, BellRenderer, BodyRenderer, DefaultInboxProps, DefaultProps, NoRendererProps, NotificationRendererProps, NotificationsRenderer, SubjectBodyRendererProps, SubjectRenderer, WithChildrenProps } from '../utils/types.cjs';
 export { NotificationProps } from '../components/Notifications.cjs';
 import 'react';
+import '../components/notification-item/parts/Dot.cjs';
+import '../components/notification-item/parts/Date.cjs';
+import '../components/notification-item/parts/Subject.cjs';
+import '../components/notification-item/parts/Content.cjs';
+import '../components/notification-item/parts/Avatar.cjs';
 
 /**
  * Exporting all components from the components folder
@@ -29,6 +36,13 @@ import 'react';
 declare function Inbox(props: InboxProps): react_jsx_runtime.JSX.Element;
 declare function InboxContent(): void;
 declare function Notifications(): void;
+/** The server stand-in for a client component: it takes exactly the client's props and renders nothing. */
+type ServerStub<TComponent> = TComponent extends (...args: infer TArgs) => unknown ? (...args: TArgs) => null : never;
+/** A stubbed component together with the stubs of its static parts, so a part missing here fails to compile. */
+type ServerCounterpart<TComponent> = ServerStub<TComponent> & {
+    [TPart in keyof TComponent as TComponent[TPart] extends (...args: never) => unknown ? TPart : never]: ServerStub<TComponent[TPart]>;
+};
+declare const NotificationItem: ServerCounterpart<typeof NotificationItem$1>;
 declare function Preferences(): void;
 declare function Bell(): void;
 declare function NovuProvider(props: NovuProviderProps): react_jsx_runtime.JSX.Element;
@@ -52,4 +66,4 @@ declare function useUpdateSubscription(_?: UseUpdateSubscriptionProps): UseUpdat
 declare function useRemoveSubscription(_?: UseRemoveSubscriptionProps): UseRemoveSubscriptionResult;
 declare function useSubscriptions(_: UseSubscriptionsProps): UseSubscriptionsResult;
 
-export { Bell, Inbox, InboxContent, InboxProps, MsTeamsConnectButton, MsTeamsLinkUser, Notifications, NovuProvider, NovuProviderProps, Preferences, SlackConnectButton, SlackLinkUser, Subscription, SubscriptionButton, SubscriptionPreferences, TelegramConnectButton, UseCountsProps, UseCountsResult, UseNotificationsProps, UseNotificationsResult, UseScheduleProps as UsePreferencesProps, UsePreferencesResult, UseWebChatProps, UseWebChatResult, useCounts, useCreateSubscription, useNotifications, useNovu, usePreferences, useRemoveSubscription, useSchedule, useSubscription, useSubscriptions, useUpdateSubscription, useWebChat };
+export { Bell, Inbox, InboxContent, InboxProps, MsTeamsConnectButton, MsTeamsLinkUser, NotificationItem, Notifications, NovuProvider, NovuProviderProps, Preferences, SlackConnectButton, SlackLinkUser, Subscription, SubscriptionButton, SubscriptionPreferences, TelegramConnectButton, UseCountsProps, UseCountsResult, UseNotificationsProps, UseNotificationsResult, UseScheduleProps as UsePreferencesProps, UsePreferencesResult, UseWebChatProps, UseWebChatResult, useCounts, useCreateSubscription, useNotifications, useNovu, usePreferences, useRemoveSubscription, useSchedule, useSubscription, useSubscriptions, useUpdateSubscription, useWebChat };

package/dist/cjs/utils/appearance.cjs

@@ -23,7 +23,7 @@ __export(appearance_exports, {
   adaptAppearanceForJs: () => adaptAppearanceForJs
 });
 module.exports = __toCommonJS(appearance_exports);
-function adaptAppearanceForJs(appearance, mountElement) {
+function adaptAppearanceForJs(appearance, outlets) {
   if (!appearance) {
     return void 0;
   }
@@ -36,7 +36,7 @@ function adaptAppearanceForJs(appearance, mountElement) {
       const reactRenderer = icons[iconKey];
       if (reactRenderer) {
         jsIcons[iconKey] = (el, props) => {
-          return mountElement(el, reactRenderer(props));
+          return outlets.mount(el, reactRenderer, [props]);
         };
       }
     }

package/dist/cjs/utils/appearance.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/appearance.ts"],"sourcesContent":["import type { AllAppearance, AllIconKey, AllIconOverrides } from '@novu/js/ui';\nimport { MountedElement } from '../context/RendererContext';\nimport type { ReactAllAppearance, ReactIconRenderer, ReactInboxAppearance, ReactSubscriptionAppearance } from './types';\n\nexport function adaptAppearanceForJs(\n  appearance: ReactInboxAppearance | ReactSubscriptionAppearance | ReactAllAppearance,\n  mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void\n): AllAppearance | undefined {\n  if (!appearance) {\n    return undefined;\n  }\n  const { icons, ...restAppearance } = appearance;\n  const jsAppearance = { ...restAppearance } as AllAppearance;\n\n  if (icons) {\n    const jsIcons: AllIconOverrides = {};\n    const iconKeys = Object.keys(icons) as Array<AllIconKey>;\n\n    for (const iconKey of iconKeys) {\n      // @ts-expect-error: cant easily fix this type error\n      const reactRenderer = icons[iconKey] as ReactIconRenderer;\n\n      if (reactRenderer) {\n        jsIcons[iconKey] = (el: HTMLDivElement, props: { class?: string }) => {\n          return mountElement(el, reactRenderer(props));\n        };\n      }\n    }\n\n    // JsAppearance also has .icons directly (from JsTheme part of JsAppearance)\n    jsAppearance.icons = jsIcons;\n  } else {\n    // If original didn't have icons, ensure the clone doesn't either\n    delete jsAppearance.icons;\n  }\n\n  return jsAppearance;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIO,SAAS,qBACd,YACA,cAC2B;AAC3B,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AACA,QAAM,EAAE,OAAO,GAAG,eAAe,IAAI;AACrC,QAAM,eAAe,EAAE,GAAG,eAAe;AAEzC,MAAI,OAAO;AACT,UAAM,UAA4B,CAAC;AACnC,UAAM,WAAW,OAAO,KAAK,KAAK;AAElC,eAAW,WAAW,UAAU;AAE9B,YAAM,gBAAgB,MAAM,OAAO;AAEnC,UAAI,eAAe;AACjB,gBAAQ,OAAO,IAAI,CAAC,IAAoB,UAA8B;AACpE,iBAAO,aAAa,IAAI,cAAc,KAAK,CAAC;AAAA,QAC9C;AAAA,MACF;AAAA,IACF;AAGA,iBAAa,QAAQ;AAAA,EACvB,OAAO;AAEL,WAAO,aAAa;AAAA,EACtB;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/utils/appearance.ts"],"sourcesContent":["import type { AllAppearance, AllIconKey, AllIconOverrides } from '@novu/js/ui';\nimport type { OutletStore } from '../context/OutletStore';\nimport type { ReactAllAppearance, ReactIconRenderer, ReactInboxAppearance, ReactSubscriptionAppearance } from './types';\n\nexport function adaptAppearanceForJs(\n  appearance: ReactInboxAppearance | ReactSubscriptionAppearance | ReactAllAppearance,\n  outlets: OutletStore\n): AllAppearance | undefined {\n  if (!appearance) {\n    return undefined;\n  }\n  const { icons, ...restAppearance } = appearance;\n  const jsAppearance = { ...restAppearance } as AllAppearance;\n\n  if (icons) {\n    const jsIcons: AllIconOverrides = {};\n    const iconKeys = Object.keys(icons) as Array<AllIconKey>;\n\n    for (const iconKey of iconKeys) {\n      // @ts-expect-error: cant easily fix this type error\n      const reactRenderer = icons[iconKey] as ReactIconRenderer;\n\n      if (reactRenderer) {\n        jsIcons[iconKey] = (el: HTMLDivElement, props: { class?: string }) => {\n          return outlets.mount(el, reactRenderer, [props]);\n        };\n      }\n    }\n\n    // JsAppearance also has .icons directly (from JsTheme part of JsAppearance)\n    jsAppearance.icons = jsIcons;\n  } else {\n    // If original didn't have icons, ensure the clone doesn't either\n    delete jsAppearance.icons;\n  }\n\n  return jsAppearance;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIO,SAAS,qBACd,YACA,SAC2B;AAC3B,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AACA,QAAM,EAAE,OAAO,GAAG,eAAe,IAAI;AACrC,QAAM,eAAe,EAAE,GAAG,eAAe;AAEzC,MAAI,OAAO;AACT,UAAM,UAA4B,CAAC;AACnC,UAAM,WAAW,OAAO,KAAK,KAAK;AAElC,eAAW,WAAW,UAAU;AAE9B,YAAM,gBAAgB,MAAM,OAAO;AAEnC,UAAI,eAAe;AACjB,gBAAQ,OAAO,IAAI,CAAC,IAAoB,UAA8B;AACpE,iBAAO,QAAQ,MAAM,IAAI,eAAe,CAAC,KAAK,CAAC;AAAA,QACjD;AAAA,MACF;AAAA,IACF;AAGA,iBAAa,QAAQ;AAAA,EACvB,OAAO;AAEL,WAAO,aAAa;AAAA,EACtB;AAEA,SAAO;AACT;","names":[]}

package/dist/cjs/utils/appearance.d.cts

@@ -1,10 +1,9 @@
 import { AllAppearance } from '@novu/js/ui';
-import { MountedElement } from '../context/RendererContext.cjs';
+import { OutletStore } from '../context/OutletStore.cjs';
 import { ReactInboxAppearance, ReactSubscriptionAppearance, ReactAllAppearance } from './types.cjs';
-import 'react/jsx-runtime';
 import 'react';
 import '@novu/js';
 
-declare function adaptAppearanceForJs(appearance: ReactInboxAppearance | ReactSubscriptionAppearance | ReactAllAppearance, mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void): AllAppearance | undefined;
+declare function adaptAppearanceForJs(appearance: ReactInboxAppearance | ReactSubscriptionAppearance | ReactAllAppearance, outlets: OutletStore): AllAppearance | undefined;
 
 export { adaptAppearanceForJs };

package/dist/esm/components/Bell.d.ts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { BellRenderer } from '../utils/types.js';
 import '@novu/js';
@@ -6,8 +7,6 @@ import '@novu/js/ui';
 type BellProps = {
     renderBell?: BellRenderer;
 };
-declare const Bell: React__default.ComponentType<BellProps & {
-    children?: React__default.ReactNode | undefined;
-}>;
+declare const Bell: React__default.MemoExoticComponent<(props: BellProps) => react_jsx_runtime.JSX.Element>;
 
 export { Bell, type BellProps };

package/dist/esm/components/Bell.js

@@ -1,29 +1,14 @@
 // src/components/Bell.tsx
-import React from "react";
-import { useNovuUI } from "../context/NovuUIContext.js";
-import { useRenderer } from "../context/RendererContext.js";
+import React, { useMemo } from "react";
+import { useOutletRenderer } from "../hooks/internal/useOutletRenderer.js";
 import { Mounter } from "./Mounter.js";
-import { withRenderer } from "./Renderer.js";
 import { jsx } from "react/jsx-runtime";
-var _Bell = React.memo((props) => {
-  const { renderBell } = props;
-  const { novuUI } = useNovuUI();
-  const { mountElement } = useRenderer();
-  const mount = React.useCallback(
-    (element) => {
-      return novuUI.mountComponent({
-        name: "Bell",
-        element,
-        props: renderBell ? {
-          renderBell: (el, unreadCount) => mountElement(el, renderBell(unreadCount))
-        } : void 0
-      });
-    },
-    [renderBell, mountElement, novuUI]
-  );
-  return /* @__PURE__ */ jsx(Mounter, { mount });
+var Bell = React.memo((props) => {
+  const renderBell = useOutletRenderer(props.renderBell);
+  const mountProps = useMemo(() => renderBell ? { renderBell } : void 0, [renderBell]);
+  return /* @__PURE__ */ jsx(Mounter, { name: "Bell", props: mountProps });
 });
-var Bell = withRenderer(_Bell);
+Bell.displayName = "Bell";
 export {
   Bell
 };

package/dist/esm/components/Bell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Bell.tsx"],"sourcesContent":["import React from 'react';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { useRenderer } from '../context/RendererContext';\nimport { BellRenderer } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { withRenderer } from './Renderer';\n\nexport type BellProps = {\n  renderBell?: BellRenderer;\n};\n\nconst _Bell = React.memo((props: BellProps) => {\n  const { renderBell } = props;\n  const { novuUI } = useNovuUI();\n  const { mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'Bell',\n        element,\n        props: renderBell\n          ? {\n              renderBell: (el, unreadCount) => mountElement(el, renderBell(unreadCount)),\n            }\n          : undefined,\n      });\n    },\n    [renderBell, mountElement, novuUI]\n  );\n\n  return <Mounter mount={mount} />;\n});\n\nexport const Bell = withRenderer(_Bell);\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAE5B,SAAS,eAAe;AACxB,SAAS,oBAAoB;AA0BpB;AApBT,IAAM,QAAQ,MAAM,KAAK,CAAC,UAAqB;AAC7C,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,QAAM,EAAE,aAAa,IAAI,YAAY;AAErC,QAAM,QAAQ,MAAM;AAAA,IAClB,CAAC,YAAyB;AACxB,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN;AAAA,QACA,OAAO,aACH;AAAA,UACE,YAAY,CAAC,IAAI,gBAAgB,aAAa,IAAI,WAAW,WAAW,CAAC;AAAA,QAC3E,IACA;AAAA,MACN,CAAC;AAAA,IACH;AAAA,IACA,CAAC,YAAY,cAAc,MAAM;AAAA,EACnC;AAEA,SAAO,oBAAC,WAAQ,OAAc;AAChC,CAAC;AAEM,IAAM,OAAO,aAAa,KAAK;","names":[]}
+{"version":3,"sources":["../../../src/components/Bell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useOutletRenderer } from '../hooks/internal/useOutletRenderer';\nimport { BellRenderer } from '../utils/types';\nimport { Mounter } from './Mounter';\n\nexport type BellProps = {\n  renderBell?: BellRenderer;\n};\n\nexport const Bell = React.memo((props: BellProps) => {\n  const renderBell = useOutletRenderer(props.renderBell);\n\n  const mountProps = useMemo(() => (renderBell ? { renderBell } : undefined), [renderBell]);\n\n  return <Mounter name=\"Bell\" props={mountProps} />;\n});\n\nBell.displayName = 'Bell';\n"],"mappings":";AAAA,OAAO,SAAS,eAAe;AAC/B,SAAS,yBAAyB;AAElC,SAAS,eAAe;AAWf;AALF,IAAM,OAAO,MAAM,KAAK,CAAC,UAAqB;AACnD,QAAM,aAAa,kBAAkB,MAAM,UAAU;AAErD,QAAM,aAAa,QAAQ,MAAO,aAAa,EAAE,WAAW,IAAI,QAAY,CAAC,UAAU,CAAC;AAExF,SAAO,oBAAC,WAAQ,MAAK,QAAO,OAAO,YAAY;AACjD,CAAC;AAED,KAAK,cAAc;","names":[]}

package/dist/esm/components/Inbox.js

@@ -1,22 +1,15 @@
 // src/components/Inbox.tsx
 import { buildSubscriber } from "@novu/js/internal";
 import React, { useMemo } from "react";
-import { useNovuUI } from "../context/NovuUIContext.js";
-import { useRenderer } from "../context/RendererContext.js";
+import { useNotificationOutlets } from "../hooks/internal/useNotificationOutlets.js";
+import { useOutletRenderer } from "../hooks/internal/useOutletRenderer.js";
 import { InternalNovuProvider, useNovu, useUnsafeNovu } from "../hooks/NovuProvider.js";
 import { Mounter } from "./Mounter.js";
 import { NovuUI } from "./NovuUI.js";
-import { withRenderer } from "./Renderer.js";
 import { jsx } from "react/jsx-runtime";
 var DefaultInbox = (props) => {
   const {
     open,
-    renderNotification,
-    renderAvatar,
-    renderSubject,
-    renderBody,
-    renderDefaultActions,
-    renderCustomActions,
     renderBell,
     onNotificationClick,
     onPrimaryActionClick,
@@ -24,60 +17,31 @@ var DefaultInbox = (props) => {
     placement,
     placementOffset
   } = props;
-  const { novuUI } = useNovuUI();
-  const { mountElement } = useRenderer();
-  const mount = React.useCallback(
-    (element) => {
-      if (renderNotification) {
-        return novuUI.mountComponent({
-          name: "Inbox",
-          props: {
-            open,
-            renderNotification: renderNotification ? (el, notification) => mountElement(el, renderNotification(notification)) : void 0,
-            renderBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : void 0,
-            onNotificationClick,
-            onPrimaryActionClick,
-            onSecondaryActionClick,
-            placementOffset,
-            placement
-          },
-          element
-        });
-      }
-      return novuUI.mountComponent({
-        name: "Inbox",
-        props: {
-          open,
-          renderAvatar: renderAvatar ? (el, notification) => mountElement(el, renderAvatar(notification)) : void 0,
-          renderSubject: renderSubject ? (el, notification) => mountElement(el, renderSubject(notification)) : void 0,
-          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : void 0,
-          renderDefaultActions: renderDefaultActions ? (el, notification) => mountElement(el, renderDefaultActions(notification)) : void 0,
-          renderCustomActions: renderCustomActions ? (el, notification) => mountElement(el, renderCustomActions(notification)) : void 0,
-          renderBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : void 0,
-          onNotificationClick,
-          onPrimaryActionClick,
-          onSecondaryActionClick,
-          placementOffset,
-          placement
-        },
-        element
-      });
-    },
+  const outlets = useNotificationOutlets(props);
+  const bellOutlet = useOutletRenderer(renderBell);
+  const mountProps = useMemo(
+    () => ({
+      ...outlets,
+      open,
+      renderBell: bellOutlet,
+      onNotificationClick,
+      onPrimaryActionClick,
+      onSecondaryActionClick,
+      placementOffset,
+      placement
+    }),
     [
+      outlets,
       open,
-      renderNotification,
-      renderAvatar,
-      renderSubject,
-      renderBody,
-      renderDefaultActions,
-      renderCustomActions,
-      renderBell,
+      bellOutlet,
       onNotificationClick,
       onPrimaryActionClick,
-      onSecondaryActionClick
+      onSecondaryActionClick,
+      placementOffset,
+      placement
     ]
   );
-  return /* @__PURE__ */ jsx(Mounter, { mount });
+  return /* @__PURE__ */ jsx(Mounter, { name: "Inbox", props: mountProps });
 };
 var Inbox = React.memo((props) => {
   const { subscriberId, ...propsWithoutSubscriberId } = props;
@@ -103,9 +67,30 @@ var Inbox = React.memo((props) => {
   };
   return /* @__PURE__ */ jsx(InternalNovuProvider, { ...providerProps, children: /* @__PURE__ */ jsx(InboxChild, { ...propsWithoutSubscriberId, applicationIdentifier, subscriber }) });
 });
-var InboxChild = withRenderer(
-  React.memo((props) => {
-    const {
+var InboxChild = React.memo((props) => {
+  const {
+    localization,
+    appearance,
+    tabs,
+    preferencesFilter,
+    preferenceGroups,
+    preferencesSort,
+    routerPush,
+    applicationIdentifier = "",
+    // for keyless we provide an empty string, the api will generate a identifier
+    subscriberId,
+    subscriberHash,
+    contextHash,
+    backendUrl,
+    socketUrl,
+    socketOptions,
+    subscriber,
+    defaultSchedule,
+    context
+  } = props;
+  const novu = useNovu();
+  const options = useMemo(() => {
+    return {
       localization,
       appearance,
       tabs,
@@ -113,61 +98,56 @@ var InboxChild = withRenderer(
       preferenceGroups,
       preferencesSort,
       routerPush,
-      applicationIdentifier = "",
-      // for keyless we provide an empty string, the api will generate a identifier
-      subscriberId,
-      subscriberHash,
-      contextHash,
-      backendUrl,
-      socketUrl,
-      socketOptions,
-      subscriber,
-      defaultSchedule,
-      context
-    } = props;
-    const novu = useNovu();
-    const options = useMemo(() => {
-      return {
-        localization,
-        appearance,
-        tabs,
-        preferencesFilter,
-        preferenceGroups,
-        preferencesSort,
-        routerPush,
-        options: {
-          applicationIdentifier,
-          subscriberHash,
-          contextHash,
-          backendUrl,
-          socketUrl,
-          socketOptions,
-          subscriber: buildSubscriber({ subscriberId, subscriber }),
-          defaultSchedule,
-          context
-        }
-      };
-    }, [
-      localization,
-      appearance,
-      tabs,
-      preferencesFilter,
-      preferenceGroups,
-      preferencesSort,
-      applicationIdentifier,
-      subscriberId,
-      subscriberHash,
-      contextHash,
-      backendUrl,
-      socketUrl,
-      socketOptions,
-      subscriber,
-      context
-    ]);
-    if (isWithChildrenProps(props)) {
-      return /* @__PURE__ */ jsx(NovuUI, { options, novu, children: props.children });
-    }
-    const {
+      options: {
+        applicationIdentifier,
+        subscriberHash,
+        contextHash,
+        backendUrl,
+        socketUrl,
+        socketOptions,
+        subscriber: buildSubscriber({ subscriberId, subscriber }),
+        defaultSchedule,
+        context
+      }
+    };
+  }, [
+    localization,
+    appearance,
+    tabs,
+    preferencesFilter,
+    preferenceGroups,
+    preferencesSort,
+    applicationIdentifier,
+    subscriberId,
+    subscriberHash,
+    contextHash,
+    backendUrl,
+    socketUrl,
+    socketOptions,
+    subscriber,
+    context
+  ]);
+  if (isWithChildrenProps(props)) {
+    return /* @__PURE__ */ jsx(NovuUI, { options, novu, children: props.children });
+  }
+  const {
+    open,
+    renderNotification,
+    renderAvatar,
+    renderSubject,
+    renderBody,
+    renderDefaultActions,
+    renderCustomActions,
+    renderBell,
+    onNotificationClick,
+    onPrimaryActionClick,
+    onSecondaryActionClick,
+    placementOffset,
+    placement
+  } = props;
+  return /* @__PURE__ */ jsx(NovuUI, { options, novu, children: /* @__PURE__ */ jsx(
+    DefaultInbox,
+    {
       open,
       renderNotification,
       renderAvatar,
@@ -179,29 +159,11 @@ var InboxChild = withRenderer(
       onNotificationClick,
       onPrimaryActionClick,
       onSecondaryActionClick,
-      placementOffset,
-      placement
-    } = props;
-    return /* @__PURE__ */ jsx(NovuUI, { options, novu, children: /* @__PURE__ */ jsx(
-      DefaultInbox,
-      {
-        open,
-        renderNotification,
-        renderAvatar,
-        renderSubject,
-        renderBody,
-        renderDefaultActions,
-        renderCustomActions,
-        renderBell,
-        onNotificationClick,
-        onPrimaryActionClick,
-        onSecondaryActionClick,
-        placement,
-        placementOffset
-      }
-    ) });
-  })
-);
+      placement,
+      placementOffset
+    }
+  ) });
+});
 InboxChild.displayName = "InboxChild";
 function isWithChildrenProps(props) {
   return "children" in props;

package/dist/esm/components/Inbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Inbox.tsx"],"sourcesContent":["import { StandardNovuOptions } from '@novu/js';\nimport { buildSubscriber } from '@novu/js/internal';\nimport React, { useMemo } from 'react';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { useRenderer } from '../context/RendererContext';\nimport { InternalNovuProvider, useNovu, useUnsafeNovu } from '../hooks/NovuProvider';\nimport { DefaultInboxProps, DefaultProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { NovuUI } from './NovuUI';\nimport { withRenderer } from './Renderer';\n\nexport type InboxProps = DefaultProps | WithChildrenProps;\n\nconst DefaultInbox = (props: DefaultInboxProps) => {\n  const {\n    open,\n    renderNotification,\n    renderAvatar,\n    renderSubject,\n    renderBody,\n    renderDefaultActions,\n    renderCustomActions,\n    renderBell,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    placement,\n    placementOffset,\n  } = props;\n  const { novuUI } = useNovuUI();\n  const { mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      if (renderNotification) {\n        return novuUI.mountComponent({\n          name: 'Inbox',\n          props: {\n            open,\n            renderNotification: renderNotification\n              ? (el, notification) => mountElement(el, renderNotification(notification))\n              : undefined,\n            renderBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : undefined,\n            onNotificationClick,\n            onPrimaryActionClick,\n            onSecondaryActionClick,\n            placementOffset,\n            placement,\n          },\n          element,\n        });\n      }\n\n      return novuUI.mountComponent({\n        name: 'Inbox',\n        props: {\n          open,\n          renderAvatar: renderAvatar ? (el, notification) => mountElement(el, renderAvatar(notification)) : undefined,\n          renderSubject: renderSubject\n            ? (el, notification) => mountElement(el, renderSubject(notification))\n            : undefined,\n          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : undefined,\n          renderDefaultActions: renderDefaultActions\n            ? (el, notification) => mountElement(el, renderDefaultActions(notification))\n            : undefined,\n          renderCustomActions: renderCustomActions\n            ? (el, notification) => mountElement(el, renderCustomActions(notification))\n            : undefined,\n          renderBell: renderBell ? (el, unreadCount) => mountElement(el, renderBell(unreadCount)) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n          placementOffset,\n          placement,\n        },\n        element,\n      });\n    },\n    [\n      open,\n      renderNotification,\n      renderAvatar,\n      renderSubject,\n      renderBody,\n      renderDefaultActions,\n      renderCustomActions,\n      renderBell,\n      onNotificationClick,\n      onPrimaryActionClick,\n      onSecondaryActionClick,\n    ]\n  );\n\n  return <Mounter mount={mount} />;\n};\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  const { subscriberId, ...propsWithoutSubscriberId } = props;\n  const subscriber = useMemo(\n    () => buildSubscriber({ subscriberId: props.subscriberId, subscriber: props.subscriber }),\n    [props.subscriberId, props.subscriber]\n  );\n  const applicationIdentifier = props.applicationIdentifier ? props.applicationIdentifier : ''; // for keyless we provide an empty string, the api will generate a identifier\n  const novu = useUnsafeNovu();\n\n  if (novu) {\n    return (\n      <InboxChild {...propsWithoutSubscriberId} applicationIdentifier={applicationIdentifier} subscriber={subscriber} />\n    );\n  }\n\n  const providerProps = {\n    applicationIdentifier,\n    subscriberHash: props.subscriberHash,\n    contextHash: props.contextHash,\n    backendUrl: props.backendUrl,\n    socketUrl: props.socketUrl,\n    socketOptions: props.socketOptions,\n    subscriber,\n    defaultSchedule: props.defaultSchedule,\n    context: props.context,\n  } satisfies StandardNovuOptions;\n\n  return (\n    <InternalNovuProvider {...providerProps}>\n      <InboxChild {...propsWithoutSubscriberId} applicationIdentifier={applicationIdentifier} subscriber={subscriber} />\n    </InternalNovuProvider>\n  );\n});\n\nconst InboxChild = withRenderer(\n  React.memo((props: InboxProps) => {\n    const {\n      localization,\n      appearance,\n      tabs,\n      preferencesFilter,\n      preferenceGroups,\n      preferencesSort,\n      routerPush,\n      applicationIdentifier = '', // for keyless we provide an empty string, the api will generate a identifier\n      subscriberId,\n      subscriberHash,\n      contextHash,\n      backendUrl,\n      socketUrl,\n      socketOptions,\n      subscriber,\n      defaultSchedule,\n      context,\n    } = props;\n    const novu = useNovu();\n\n    const options = useMemo(() => {\n      return {\n        localization,\n        appearance,\n        tabs,\n        preferencesFilter,\n        preferenceGroups,\n        preferencesSort,\n        routerPush,\n        options: {\n          applicationIdentifier,\n          subscriberHash,\n          contextHash,\n          backendUrl,\n          socketUrl,\n          socketOptions,\n          subscriber: buildSubscriber({ subscriberId, subscriber }),\n          defaultSchedule,\n          context,\n        },\n      };\n    }, [\n      localization,\n      appearance,\n      tabs,\n      preferencesFilter,\n      preferenceGroups,\n      preferencesSort,\n      applicationIdentifier,\n      subscriberId,\n      subscriberHash,\n      contextHash,\n      backendUrl,\n      socketUrl,\n      socketOptions,\n      subscriber,\n      context,\n    ]);\n\n    if (isWithChildrenProps(props)) {\n      return (\n        <NovuUI options={options} novu={novu}>\n          {props.children}\n        </NovuUI>\n      );\n    }\n\n    const {\n      open,\n      renderNotification,\n      renderAvatar,\n      renderSubject,\n      renderBody,\n      renderDefaultActions,\n      renderCustomActions,\n      renderBell,\n      onNotificationClick,\n      onPrimaryActionClick,\n      onSecondaryActionClick,\n      placementOffset,\n      placement,\n    } = props;\n\n    return (\n      <NovuUI options={options} novu={novu}>\n        <DefaultInbox\n          open={open}\n          renderNotification={renderNotification}\n          renderAvatar={renderAvatar}\n          renderSubject={renderSubject}\n          renderBody={renderBody}\n          renderDefaultActions={renderDefaultActions}\n          renderCustomActions={renderCustomActions}\n          renderBell={renderBell}\n          onNotificationClick={onNotificationClick}\n          onPrimaryActionClick={onPrimaryActionClick}\n          onSecondaryActionClick={onSecondaryActionClick}\n          placement={placement}\n          placementOffset={placementOffset}\n        />\n      </NovuUI>\n    );\n  })\n);\n\nInboxChild.displayName = 'InboxChild';\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/Inbox.tsx"],"sourcesContent":["import { StandardNovuOptions } from '@novu/js';\nimport { buildSubscriber } from '@novu/js/internal';\nimport React, { useMemo } from 'react';\nimport { useNotificationOutlets } from '../hooks/internal/useNotificationOutlets';\nimport { useOutletRenderer } from '../hooks/internal/useOutletRenderer';\nimport { InternalNovuProvider, useNovu, useUnsafeNovu } from '../hooks/NovuProvider';\nimport { DefaultInboxProps, DefaultProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { NovuUI } from './NovuUI';\n\nexport type InboxProps = DefaultProps | WithChildrenProps;\n\nconst DefaultInbox = (props: DefaultInboxProps) => {\n  const {\n    open,\n    renderBell,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    placement,\n    placementOffset,\n  } = props;\n  const outlets = useNotificationOutlets(props);\n  const bellOutlet = useOutletRenderer(renderBell);\n\n  const mountProps = useMemo(\n    () => ({\n      ...outlets,\n      open,\n      renderBell: bellOutlet,\n      onNotificationClick,\n      onPrimaryActionClick,\n      onSecondaryActionClick,\n      placementOffset,\n      placement,\n    }),\n    [\n      outlets,\n      open,\n      bellOutlet,\n      onNotificationClick,\n      onPrimaryActionClick,\n      onSecondaryActionClick,\n      placementOffset,\n      placement,\n    ]\n  );\n\n  return <Mounter name=\"Inbox\" props={mountProps} />;\n};\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  const { subscriberId, ...propsWithoutSubscriberId } = props;\n  const subscriber = useMemo(\n    () => buildSubscriber({ subscriberId: props.subscriberId, subscriber: props.subscriber }),\n    [props.subscriberId, props.subscriber]\n  );\n  const applicationIdentifier = props.applicationIdentifier ? props.applicationIdentifier : ''; // for keyless we provide an empty string, the api will generate a identifier\n  const novu = useUnsafeNovu();\n\n  if (novu) {\n    return (\n      <InboxChild {...propsWithoutSubscriberId} applicationIdentifier={applicationIdentifier} subscriber={subscriber} />\n    );\n  }\n\n  const providerProps = {\n    applicationIdentifier,\n    subscriberHash: props.subscriberHash,\n    contextHash: props.contextHash,\n    backendUrl: props.backendUrl,\n    socketUrl: props.socketUrl,\n    socketOptions: props.socketOptions,\n    subscriber,\n    defaultSchedule: props.defaultSchedule,\n    context: props.context,\n  } satisfies StandardNovuOptions;\n\n  return (\n    <InternalNovuProvider {...providerProps}>\n      <InboxChild {...propsWithoutSubscriberId} applicationIdentifier={applicationIdentifier} subscriber={subscriber} />\n    </InternalNovuProvider>\n  );\n});\n\nconst InboxChild = React.memo((props: InboxProps) => {\n  const {\n    localization,\n    appearance,\n    tabs,\n    preferencesFilter,\n    preferenceGroups,\n    preferencesSort,\n    routerPush,\n    applicationIdentifier = '', // for keyless we provide an empty string, the api will generate a identifier\n    subscriberId,\n    subscriberHash,\n    contextHash,\n    backendUrl,\n    socketUrl,\n    socketOptions,\n    subscriber,\n    defaultSchedule,\n    context,\n  } = props;\n  const novu = useNovu();\n\n  const options = useMemo(() => {\n    return {\n      localization,\n      appearance,\n      tabs,\n      preferencesFilter,\n      preferenceGroups,\n      preferencesSort,\n      routerPush,\n      options: {\n        applicationIdentifier,\n        subscriberHash,\n        contextHash,\n        backendUrl,\n        socketUrl,\n        socketOptions,\n        subscriber: buildSubscriber({ subscriberId, subscriber }),\n        defaultSchedule,\n        context,\n      },\n    };\n  }, [\n    localization,\n    appearance,\n    tabs,\n    preferencesFilter,\n    preferenceGroups,\n    preferencesSort,\n    applicationIdentifier,\n    subscriberId,\n    subscriberHash,\n    contextHash,\n    backendUrl,\n    socketUrl,\n    socketOptions,\n    subscriber,\n    context,\n  ]);\n\n  if (isWithChildrenProps(props)) {\n    return (\n      <NovuUI options={options} novu={novu}>\n        {props.children}\n      </NovuUI>\n    );\n  }\n\n  const {\n    open,\n    renderNotification,\n    renderAvatar,\n    renderSubject,\n    renderBody,\n    renderDefaultActions,\n    renderCustomActions,\n    renderBell,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    placementOffset,\n    placement,\n  } = props;\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultInbox\n        open={open}\n        renderNotification={renderNotification}\n        renderAvatar={renderAvatar}\n        renderSubject={renderSubject}\n        renderBody={renderBody}\n        renderDefaultActions={renderDefaultActions}\n        renderCustomActions={renderCustomActions}\n        renderBell={renderBell}\n        onNotificationClick={onNotificationClick}\n        onPrimaryActionClick={onPrimaryActionClick}\n        onSecondaryActionClick={onSecondaryActionClick}\n        placement={placement}\n        placementOffset={placementOffset}\n      />\n    </NovuUI>\n  );\n});\n\nInboxChild.displayName = 'InboxChild';\n\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/InboxContent.d.ts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NotificationClickHandler, NotificationActionClickHandler, InboxPage } from '@novu/js/ui';
 import React__default from 'react';
 import { NotificationRendererProps, SubjectBodyRendererProps, NoRendererProps } from '../utils/types.js';
@@ -10,8 +11,6 @@ type InboxContentProps = {
     initialPage?: InboxPage;
     hideNav?: boolean;
 } & (NotificationRendererProps | SubjectBodyRendererProps | NoRendererProps);
-declare const InboxContent: React__default.ComponentType<InboxContentProps & {
-    children?: React__default.ReactNode | undefined;
-}>;
+declare const InboxContent: React__default.MemoExoticComponent<(props: InboxContentProps) => react_jsx_runtime.JSX.Element>;
 
 export { InboxContent, type InboxContentProps };

package/dist/esm/components/InboxContent.js

@@ -1,74 +1,18 @@
 // src/components/InboxContent.tsx
-import React from "react";
-import { useNovuUI } from "../context/NovuUIContext.js";
-import { useRenderer } from "../context/RendererContext.js";
+import React, { useMemo } from "react";
+import { useNotificationOutlets } from "../hooks/internal/useNotificationOutlets.js";
 import { Mounter } from "./Mounter.js";
-import { withRenderer } from "./Renderer.js";
 import { jsx } from "react/jsx-runtime";
-var _InboxContent = React.memo((props) => {
-  const {
-    onNotificationClick,
-    onPrimaryActionClick,
-    renderNotification,
-    renderAvatar,
-    renderSubject,
-    renderBody,
-    renderDefaultActions,
-    renderCustomActions,
-    onSecondaryActionClick,
-    initialPage,
-    hideNav
-  } = props;
-  const { novuUI } = useNovuUI();
-  const { mountElement } = useRenderer();
-  const mount = React.useCallback(
-    (element) => {
-      if (renderNotification) {
-        return novuUI.mountComponent({
-          name: "InboxContent",
-          element,
-          props: {
-            renderNotification: renderNotification ? (el, notification) => mountElement(el, renderNotification(notification)) : void 0,
-            onNotificationClick,
-            onPrimaryActionClick,
-            onSecondaryActionClick,
-            initialPage,
-            hideNav
-          }
-        });
-      }
-      return novuUI.mountComponent({
-        name: "InboxContent",
-        element,
-        props: {
-          renderAvatar: renderAvatar ? (el, notification) => mountElement(el, renderAvatar(notification)) : void 0,
-          renderSubject: renderSubject ? (el, notification) => mountElement(el, renderSubject(notification)) : void 0,
-          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : void 0,
-          renderDefaultActions: renderDefaultActions ? (el, notification) => mountElement(el, renderDefaultActions(notification)) : void 0,
-          renderCustomActions: renderCustomActions ? (el, notification) => mountElement(el, renderCustomActions(notification)) : void 0,
-          onNotificationClick,
-          onPrimaryActionClick,
-          onSecondaryActionClick,
-          initialPage,
-          hideNav
-        }
-      });
-    },
-    [
-      renderNotification,
-      renderAvatar,
-      renderSubject,
-      renderBody,
-      renderDefaultActions,
-      renderCustomActions,
-      onNotificationClick,
-      onPrimaryActionClick,
-      onSecondaryActionClick
-    ]
+var InboxContent = React.memo((props) => {
+  const { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick, initialPage, hideNav } = props;
+  const outlets = useNotificationOutlets(props);
+  const mountProps = useMemo(
+    () => ({ ...outlets, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick, initialPage, hideNav }),
+    [outlets, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick, initialPage, hideNav]
   );
-  return /* @__PURE__ */ jsx(Mounter, { mount });
+  return /* @__PURE__ */ jsx(Mounter, { name: "InboxContent", props: mountProps });
 });
-var InboxContent = withRenderer(_InboxContent);
+InboxContent.displayName = "InboxContent";
 export {
   InboxContent
 };

package/dist/esm/components/InboxContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/InboxContent.tsx"],"sourcesContent":["import type { InboxPage, NotificationActionClickHandler, NotificationClickHandler } from '@novu/js/ui';\nimport React from 'react';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { useRenderer } from '../context/RendererContext';\nimport { NoRendererProps, NotificationRendererProps, SubjectBodyRendererProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { withRenderer } from './Renderer';\n\nexport type InboxContentProps = {\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n  initialPage?: InboxPage;\n  hideNav?: boolean;\n} & (NotificationRendererProps | SubjectBodyRendererProps | NoRendererProps);\n\nconst _InboxContent = React.memo((props: InboxContentProps) => {\n  const {\n    onNotificationClick,\n    onPrimaryActionClick,\n    renderNotification,\n    renderAvatar,\n    renderSubject,\n    renderBody,\n    renderDefaultActions,\n    renderCustomActions,\n    onSecondaryActionClick,\n    initialPage,\n    hideNav,\n  } = props;\n  const { novuUI } = useNovuUI();\n  const { mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      if (renderNotification) {\n        return novuUI.mountComponent({\n          name: 'InboxContent',\n          element,\n          props: {\n            renderNotification: renderNotification\n              ? (el, notification) => mountElement(el, renderNotification(notification))\n              : undefined,\n            onNotificationClick,\n            onPrimaryActionClick,\n            onSecondaryActionClick,\n            initialPage,\n            hideNav,\n          },\n        });\n      }\n\n      return novuUI.mountComponent({\n        name: 'InboxContent',\n        element,\n        props: {\n          renderAvatar: renderAvatar ? (el, notification) => mountElement(el, renderAvatar(notification)) : undefined,\n          renderSubject: renderSubject\n            ? (el, notification) => mountElement(el, renderSubject(notification))\n            : undefined,\n          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : undefined,\n          renderDefaultActions: renderDefaultActions\n            ? (el, notification) => mountElement(el, renderDefaultActions(notification))\n            : undefined,\n          renderCustomActions: renderCustomActions\n            ? (el, notification) => mountElement(el, renderCustomActions(notification))\n            : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n          initialPage,\n          hideNav,\n        },\n      });\n    },\n    [\n      renderNotification,\n      renderAvatar,\n      renderSubject,\n      renderBody,\n      renderDefaultActions,\n      renderCustomActions,\n      onNotificationClick,\n      onPrimaryActionClick,\n      onSecondaryActionClick,\n    ]\n  );\n\n  return <Mounter mount={mount} />;\n});\n\nexport const InboxContent = withRenderer(_InboxContent);\n"],"mappings":";AACA,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAE5B,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAkFpB;AAxET,IAAM,gBAAgB,MAAM,KAAK,CAAC,UAA6B;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,QAAM,EAAE,aAAa,IAAI,YAAY;AAErC,QAAM,QAAQ,MAAM;AAAA,IAClB,CAAC,YAAyB;AACxB,UAAI,oBAAoB;AACtB,eAAO,OAAO,eAAe;AAAA,UAC3B,MAAM;AAAA,UACN;AAAA,UACA,OAAO;AAAA,YACL,oBAAoB,qBAChB,CAAC,IAAI,iBAAiB,aAAa,IAAI,mBAAmB,YAAY,CAAC,IACvE;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAEA,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN;AAAA,QACA,OAAO;AAAA,UACL,cAAc,eAAe,CAAC,IAAI,iBAAiB,aAAa,IAAI,aAAa,YAAY,CAAC,IAAI;AAAA,UAClG,eAAe,gBACX,CAAC,IAAI,iBAAiB,aAAa,IAAI,cAAc,YAAY,CAAC,IAClE;AAAA,UACJ,YAAY,aAAa,CAAC,IAAI,iBAAiB,aAAa,IAAI,WAAW,YAAY,CAAC,IAAI;AAAA,UAC5F,sBAAsB,uBAClB,CAAC,IAAI,iBAAiB,aAAa,IAAI,qBAAqB,YAAY,CAAC,IACzE;AAAA,UACJ,qBAAqB,sBACjB,CAAC,IAAI,iBAAiB,aAAa,IAAI,oBAAoB,YAAY,CAAC,IACxE;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,oBAAC,WAAQ,OAAc;AAChC,CAAC;AAEM,IAAM,eAAe,aAAa,aAAa;","names":[]}
+{"version":3,"sources":["../../../src/components/InboxContent.tsx"],"sourcesContent":["import type { InboxPage, NotificationActionClickHandler, NotificationClickHandler } from '@novu/js/ui';\nimport React, { useMemo } from 'react';\nimport { useNotificationOutlets } from '../hooks/internal/useNotificationOutlets';\nimport { NoRendererProps, NotificationRendererProps, SubjectBodyRendererProps } from '../utils/types';\nimport { Mounter } from './Mounter';\n\nexport type InboxContentProps = {\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n  initialPage?: InboxPage;\n  hideNav?: boolean;\n} & (NotificationRendererProps | SubjectBodyRendererProps | NoRendererProps);\n\nexport const InboxContent = React.memo((props: InboxContentProps) => {\n  const { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick, initialPage, hideNav } = props;\n  const outlets = useNotificationOutlets(props);\n\n  const mountProps = useMemo(\n    () => ({ ...outlets, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick, initialPage, hideNav }),\n    [outlets, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick, initialPage, hideNav]\n  );\n\n  return <Mounter name=\"InboxContent\" props={mountProps} />;\n});\n\nInboxContent.displayName = 'InboxContent';\n"],"mappings":";AACA,OAAO,SAAS,eAAe;AAC/B,SAAS,8BAA8B;AAEvC,SAAS,eAAe;AAmBf;AATF,IAAM,eAAe,MAAM,KAAK,CAAC,UAA6B;AACnE,QAAM,EAAE,qBAAqB,sBAAsB,wBAAwB,aAAa,QAAQ,IAAI;AACpG,QAAM,UAAU,uBAAuB,KAAK;AAE5C,QAAM,aAAa;AAAA,IACjB,OAAO,EAAE,GAAG,SAAS,qBAAqB,sBAAsB,wBAAwB,aAAa,QAAQ;AAAA,IAC7G,CAAC,SAAS,qBAAqB,sBAAsB,wBAAwB,aAAa,OAAO;AAAA,EACnG;AAEA,SAAO,oBAAC,WAAQ,MAAK,gBAAe,OAAO,YAAY;AACzD,CAAC;AAED,aAAa,cAAc;","names":[]}

package/dist/esm/components/Mounter.d.ts

@@ -1,11 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NovuUI } from '@novu/js/ui';
 
+type MountComponentParams = Parameters<NovuUI['mountComponent']>[0];
 type MounterProps = {
-    mount: (node: HTMLElement) => ((node: HTMLElement) => void) | void;
+    name: MountComponentParams['name'];
+    props?: MountComponentParams['props'];
+    /** Mount as an island: no `Root` wrapper, no layout box. For mount points inside DOM that already sits under an engine root. */
+    bare?: boolean;
 };
 /**
- * Mounter allows you to mount a component to a DOM node.
+ * A mount point: a DOM node the host hands to the engine so the engine can render a component into it.
+ *
+ * Mounts before the browser paints, pushes later prop changes through the engine's handle instead of mounting
+ * again, and unmounts when React removes it.
  */
-declare function Mounter({ mount }: MounterProps): react_jsx_runtime.JSX.Element;
+declare function Mounter({ name, props, bare }: MounterProps): react_jsx_runtime.JSX.Element;
 
-export { Mounter };
+export { Mounter, type MounterProps };