@novu/react 3.7.1-nightly.20250723 → 3.8.0

package/dist/cjs/components/Bell.cjs

@@ -34,10 +34,10 @@ __export(Bell_exports, {
 });
 module.exports = __toCommonJS(Bell_exports);
 var import_react = __toESM(require("react"), 1);
-var import_Mounter = require("./Mounter.cjs");
-var import_Renderer = require("./Renderer.cjs");
 var import_NovuUIContext = require("../context/NovuUIContext.cjs");
 var import_RendererContext = require("../context/RendererContext.cjs");
+var import_Mounter = require("./Mounter.cjs");
+var import_Renderer = require("./Renderer.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var _Bell = import_react.default.memo((props) => {
   const { renderBell } = props;

package/dist/cjs/components/Bell.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Bell.tsx"],"sourcesContent":["import React from 'react';\nimport { Mounter } from './Mounter';\nimport { BellRenderer } from '../utils/types';\nimport { withRenderer } from './Renderer';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { useRenderer } from '../context/RendererContext';\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 ? { renderBell: (el, unreadCount) => mountElement(el, renderBell(unreadCount)) } : undefined,\n      });\n    },\n    [renderBell]\n  );\n\n  return <Mounter mount={mount} />;\n});\n\nexport const Bell = withRenderer(_Bell);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAAwB;AAExB,sBAA6B;AAC7B,2BAA0B;AAC1B,6BAA4B;AAsBnB;AAhBT,IAAM,QAAQ,aAAAA,QAAM,KAAK,CAAC,UAAqB;AAC7C,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,EAAE,OAAO,QAAI,gCAAU;AAC7B,QAAM,EAAE,aAAa,QAAI,oCAAY;AAErC,QAAM,QAAQ,aAAAA,QAAM;AAAA,IAClB,CAAC,YAAyB;AACxB,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN;AAAA,QACA,OAAO,aAAa,EAAE,YAAY,CAAC,IAAI,gBAAgB,aAAa,IAAI,WAAW,WAAW,CAAC,EAAE,IAAI;AAAA,MACvG,CAAC;AAAA,IACH;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SAAO,4CAAC,0BAAQ,OAAc;AAChC,CAAC;AAEM,IAAM,WAAO,8BAAa,KAAK;","names":["React"]}
+{"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 ? { renderBell: (el, unreadCount) => mountElement(el, renderBell(unreadCount)) } : undefined,\n      });\n    },\n    [renderBell]\n  );\n\n  return <Mounter mount={mount} />;\n});\n\nexport const Bell = withRenderer(_Bell);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,2BAA0B;AAC1B,6BAA4B;AAE5B,qBAAwB;AACxB,sBAA6B;AAsBpB;AAhBT,IAAM,QAAQ,aAAAA,QAAM,KAAK,CAAC,UAAqB;AAC7C,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,EAAE,OAAO,QAAI,gCAAU;AAC7B,QAAM,EAAE,aAAa,QAAI,oCAAY;AAErC,QAAM,QAAQ,aAAAA,QAAM;AAAA,IAClB,CAAC,YAAyB;AACxB,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN;AAAA,QACA,OAAO,aAAa,EAAE,YAAY,CAAC,IAAI,gBAAgB,aAAa,IAAI,WAAW,WAAW,CAAC,EAAE,IAAI;AAAA,MACvG,CAAC;AAAA,IACH;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SAAO,4CAAC,0BAAQ,OAAc;AAChC,CAAC;AAEM,IAAM,WAAO,8BAAa,KAAK;","names":["React"]}

package/dist/cjs/components/Bell.d.cts

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { BellRenderer } from '../utils/types.cjs';
-import '@novu/js/ui';
 import '@novu/js';
+import '@novu/js/ui';
 
 type BellProps = {
     renderBell?: BellRenderer;

package/dist/cjs/components/Inbox.cjs

@@ -33,12 +33,12 @@ __export(Inbox_exports, {
   Inbox: () => Inbox
 });
 module.exports = __toCommonJS(Inbox_exports);
-var import_react = __toESM(require("react"), 1);
 var import_internal = require("@novu/js/internal");
-var import_Mounter = require("./Mounter.cjs");
+var import_react = __toESM(require("react"), 1);
 var import_NovuUIContext = require("../context/NovuUIContext.cjs");
 var import_RendererContext = require("../context/RendererContext.cjs");
 var import_NovuProvider = require("../hooks/NovuProvider.cjs");
+var import_Mounter = require("./Mounter.cjs");
 var import_NovuUI = require("./NovuUI.cjs");
 var import_Renderer = require("./Renderer.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");

package/dist/cjs/components/Inbox.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Inbox.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { StandardNovuOptions } from '@novu/js';\nimport { buildSubscriber } from '@novu/js/internal';\n\nimport { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { useRenderer } from '../context/RendererContext';\nimport { InternalNovuProvider, useNovu, useUnsafeNovu } from '../hooks/NovuProvider';\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    renderSubject,\n    renderBody,\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          renderSubject: renderSubject\n            ? (el, notification) => mountElement(el, renderSubject(notification))\n            : undefined,\n          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : 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      renderSubject,\n      renderBody,\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 = buildSubscriber({ subscriberId: props.subscriberId, subscriber: props.subscriber });\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    backendUrl: props.backendUrl,\n    socketUrl: props.socketUrl,\n    subscriber,\n  } satisfies StandardNovuOptions;\n\n  return (\n    <InternalNovuProvider {...providerProps} userAgentType=\"components\">\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      routerPush,\n      applicationIdentifier = '', // for keyless we provide an empty string, the api will generate a identifier\n      subscriberId,\n      subscriberHash,\n      backendUrl,\n      socketUrl,\n      subscriber,\n    } = props;\n    const novu = useNovu();\n\n    const options = useMemo(() => {\n      return {\n        localization,\n        appearance,\n        tabs,\n        preferencesFilter,\n        preferenceGroups,\n        routerPush,\n        options: {\n          applicationIdentifier,\n          subscriberHash,\n          backendUrl,\n          socketUrl,\n          subscriber: buildSubscriber({ subscriberId, subscriber }),\n        },\n      };\n    }, [\n      localization,\n      appearance,\n      tabs,\n      preferencesFilter,\n      preferenceGroups,\n      applicationIdentifier,\n      subscriberId,\n      subscriberHash,\n      backendUrl,\n      socketUrl,\n      subscriber,\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      renderSubject,\n      renderBody,\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          renderSubject={renderSubject}\n          renderBody={renderBody}\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\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n"],"mappings":"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","names":["React"]}
+{"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    renderSubject,\n    renderBody,\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          renderSubject: renderSubject\n            ? (el, notification) => mountElement(el, renderSubject(notification))\n            : undefined,\n          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : 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      renderSubject,\n      renderBody,\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 = buildSubscriber({ subscriberId: props.subscriberId, subscriber: props.subscriber });\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    backendUrl: props.backendUrl,\n    socketUrl: props.socketUrl,\n    subscriber,\n  } satisfies StandardNovuOptions;\n\n  return (\n    <InternalNovuProvider {...providerProps} userAgentType=\"components\">\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      routerPush,\n      applicationIdentifier = '', // for keyless we provide an empty string, the api will generate a identifier\n      subscriberId,\n      subscriberHash,\n      backendUrl,\n      socketUrl,\n      subscriber,\n    } = props;\n    const novu = useNovu();\n\n    const options = useMemo(() => {\n      return {\n        localization,\n        appearance,\n        tabs,\n        preferencesFilter,\n        preferenceGroups,\n        routerPush,\n        options: {\n          applicationIdentifier,\n          subscriberHash,\n          backendUrl,\n          socketUrl,\n          subscriber: buildSubscriber({ subscriberId, subscriber }),\n        },\n      };\n    }, [\n      localization,\n      appearance,\n      tabs,\n      preferencesFilter,\n      preferenceGroups,\n      applicationIdentifier,\n      subscriberId,\n      subscriberHash,\n      backendUrl,\n      socketUrl,\n      subscriber,\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      renderSubject,\n      renderBody,\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          renderSubject={renderSubject}\n          renderBody={renderBody}\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\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n"],"mappings":"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","names":["React"]}

package/dist/cjs/components/Inbox.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { DefaultProps, WithChildrenProps } from '../utils/types.cjs';
-import '@novu/js/ui';
 import '@novu/js';
+import '@novu/js/ui';
 
 type InboxProps = DefaultProps | WithChildrenProps;
 declare const Inbox: React__default.MemoExoticComponent<(props: InboxProps) => react_jsx_runtime.JSX.Element>;

package/dist/cjs/components/InboxContent.cjs

@@ -34,9 +34,9 @@ __export(InboxContent_exports, {
 });
 module.exports = __toCommonJS(InboxContent_exports);
 var import_react = __toESM(require("react"), 1);
-var import_Mounter = require("./Mounter.cjs");
-var import_RendererContext = require("../context/RendererContext.cjs");
 var import_NovuUIContext = require("../context/NovuUIContext.cjs");
+var import_RendererContext = require("../context/RendererContext.cjs");
+var import_Mounter = require("./Mounter.cjs");
 var import_Renderer = require("./Renderer.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var _InboxContent = import_react.default.memo((props) => {

package/dist/cjs/components/InboxContent.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/InboxContent.tsx"],"sourcesContent":["import React from 'react';\nimport type { NotificationClickHandler, NotificationActionClickHandler, InboxPage } from '@novu/js/ui';\nimport { Mounter } from './Mounter';\nimport { NoRendererProps, SubjectBodyRendererProps, NotificationRendererProps } from '../utils/types';\nimport { useRenderer } from '../context/RendererContext';\nimport { useNovuUI } from '../context/NovuUIContext';\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    renderSubject,\n    renderBody,\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          renderSubject: renderSubject\n            ? (el, notification) => mountElement(el, renderSubject(notification))\n            : undefined,\n          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n          initialPage,\n          hideNav,\n        },\n      });\n    },\n    [renderNotification, renderSubject, renderBody, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  return <Mounter mount={mount} />;\n});\n\nexport const InboxContent = withRenderer(_InboxContent);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,qBAAwB;AAExB,6BAA4B;AAC5B,2BAA0B;AAC1B,sBAA6B;AA8DpB;AApDT,IAAM,gBAAgB,aAAAA,QAAM,KAAK,CAAC,UAA6B;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,OAAO,QAAI,gCAAU;AAC7B,QAAM,EAAE,aAAa,QAAI,oCAAY;AAErC,QAAM,QAAQ,aAAAA,QAAM;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,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;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,eAAe,YAAY,qBAAqB,sBAAsB,sBAAsB;AAAA,EACnH;AAEA,SAAO,4CAAC,0BAAQ,OAAc;AAChC,CAAC;AAEM,IAAM,mBAAe,8BAAa,aAAa;","names":["React"]}
+{"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    renderSubject,\n    renderBody,\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          renderSubject: renderSubject\n            ? (el, notification) => mountElement(el, renderSubject(notification))\n            : undefined,\n          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n          initialPage,\n          hideNav,\n        },\n      });\n    },\n    [renderNotification, renderSubject, renderBody, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  return <Mounter mount={mount} />;\n});\n\nexport const InboxContent = withRenderer(_InboxContent);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkB;AAClB,2BAA0B;AAC1B,6BAA4B;AAE5B,qBAAwB;AACxB,sBAA6B;AA8DpB;AApDT,IAAM,gBAAgB,aAAAA,QAAM,KAAK,CAAC,UAA6B;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,OAAO,QAAI,gCAAU;AAC7B,QAAM,EAAE,aAAa,QAAI,oCAAY;AAErC,QAAM,QAAQ,aAAAA,QAAM;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,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;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,eAAe,YAAY,qBAAqB,sBAAsB,sBAAsB;AAAA,EACnH;AAEA,SAAO,4CAAC,0BAAQ,OAAc;AAChC,CAAC;AAEM,IAAM,mBAAe,8BAAa,aAAa;","names":["React"]}

package/dist/cjs/components/InboxContent.d.cts

@@ -1,5 +1,5 @@
-import React__default from 'react';
 import { NotificationClickHandler, NotificationActionClickHandler, InboxPage } from '@novu/js/ui';
+import React__default from 'react';
 import { NotificationRendererProps, SubjectBodyRendererProps, NoRendererProps } from '../utils/types.cjs';
 import '@novu/js';
 

package/dist/cjs/components/Notifications.cjs

@@ -34,9 +34,9 @@ __export(Notifications_exports, {
 });
 module.exports = __toCommonJS(Notifications_exports);
 var import_react = __toESM(require("react"), 1);
-var import_Mounter = require("./Mounter.cjs");
-var import_RendererContext = require("../context/RendererContext.cjs");
 var import_NovuUIContext = require("../context/NovuUIContext.cjs");
+var import_RendererContext = require("../context/RendererContext.cjs");
+var import_Mounter = require("./Mounter.cjs");
 var import_Renderer = require("./Renderer.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var _Notifications = import_react.default.memo((props) => {

package/dist/cjs/components/Notifications.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Notifications.tsx"],"sourcesContent":["import React from 'react';\nimport type { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';\nimport { Mounter } from './Mounter';\nimport { NoRendererProps, NotificationRendererProps, SubjectBodyRendererProps } from '../utils/types';\nimport { useRenderer } from '../context/RendererContext';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { withRenderer } from './Renderer';\n\nexport type NotificationProps = {\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n} & (NotificationRendererProps | SubjectBodyRendererProps | NoRendererProps);\n\nconst _Notifications = React.memo((props: NotificationProps) => {\n  const {\n    renderNotification,\n    renderSubject,\n    renderBody,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\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: 'Notifications',\n          element,\n          props: {\n            renderNotification: renderNotification\n              ? (el, notification) => mountElement(el, renderNotification(notification))\n              : undefined,\n            onNotificationClick,\n            onPrimaryActionClick,\n            onSecondaryActionClick,\n          },\n        });\n      }\n\n      return novuUI.mountComponent({\n        name: 'Notifications',\n        element,\n        props: {\n          renderSubject: renderSubject\n            ? (el, notification) => mountElement(el, renderSubject(notification))\n            : undefined,\n          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n        },\n      });\n    },\n    [renderNotification, renderSubject, renderBody, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  return <Mounter mount={mount} />;\n});\n\nexport const Notifications = withRenderer(_Notifications);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,qBAAwB;AAExB,6BAA4B;AAC5B,2BAA0B;AAC1B,sBAA6B;AAsDpB;AA9CT,IAAM,iBAAiB,aAAAA,QAAM,KAAK,CAAC,UAA6B;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,OAAO,QAAI,gCAAU;AAC7B,QAAM,EAAE,aAAa,QAAI,oCAAY;AAErC,QAAM,QAAQ,aAAAA,QAAM;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,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAEA,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN;AAAA,QACA,OAAO;AAAA,UACL,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;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,eAAe,YAAY,qBAAqB,sBAAsB,sBAAsB;AAAA,EACnH;AAEA,SAAO,4CAAC,0BAAQ,OAAc;AAChC,CAAC;AAEM,IAAM,oBAAgB,8BAAa,cAAc;","names":["React"]}
+{"version":3,"sources":["../../../src/components/Notifications.tsx"],"sourcesContent":["import type { 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 NotificationProps = {\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n} & (NotificationRendererProps | SubjectBodyRendererProps | NoRendererProps);\n\nconst _Notifications = React.memo((props: NotificationProps) => {\n  const {\n    renderNotification,\n    renderSubject,\n    renderBody,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\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: 'Notifications',\n          element,\n          props: {\n            renderNotification: renderNotification\n              ? (el, notification) => mountElement(el, renderNotification(notification))\n              : undefined,\n            onNotificationClick,\n            onPrimaryActionClick,\n            onSecondaryActionClick,\n          },\n        });\n      }\n\n      return novuUI.mountComponent({\n        name: 'Notifications',\n        element,\n        props: {\n          renderSubject: renderSubject\n            ? (el, notification) => mountElement(el, renderSubject(notification))\n            : undefined,\n          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n        },\n      });\n    },\n    [renderNotification, renderSubject, renderBody, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  return <Mounter mount={mount} />;\n});\n\nexport const Notifications = withRenderer(_Notifications);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkB;AAClB,2BAA0B;AAC1B,6BAA4B;AAE5B,qBAAwB;AACxB,sBAA6B;AAsDpB;AA9CT,IAAM,iBAAiB,aAAAA,QAAM,KAAK,CAAC,UAA6B;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,OAAO,QAAI,gCAAU;AAC7B,QAAM,EAAE,aAAa,QAAI,oCAAY;AAErC,QAAM,QAAQ,aAAAA,QAAM;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,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAEA,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN;AAAA,QACA,OAAO;AAAA,UACL,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;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,eAAe,YAAY,qBAAqB,sBAAsB,sBAAsB;AAAA,EACnH;AAEA,SAAO,4CAAC,0BAAQ,OAAc;AAChC,CAAC;AAEM,IAAM,oBAAgB,8BAAa,cAAc;","names":["React"]}

package/dist/cjs/components/Notifications.d.cts

@@ -1,5 +1,5 @@
-import React__default from 'react';
 import { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';
+import React__default from 'react';
 import { NotificationRendererProps, SubjectBodyRendererProps, NoRendererProps } from '../utils/types.cjs';
 import '@novu/js';
 

package/dist/cjs/components/NovuUI.cjs

@@ -26,9 +26,9 @@ module.exports = __toCommonJS(NovuUI_exports);
 var import_ui = require("@novu/js/ui");
 var import_react = require("react");
 var import_NovuUIContext = require("../context/NovuUIContext.cjs");
+var import_RendererContext = require("../context/RendererContext.cjs");
 var import_useDataRef = require("../hooks/internal/useDataRef.cjs");
 var import_appearance = require("../utils/appearance.cjs");
-var import_RendererContext = require("../context/RendererContext.cjs");
 var import_ShadowRootDetector = require("./ShadowRootDetector.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var findParentShadowRoot = (child) => {

package/dist/cjs/components/NovuUI.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NovuUI.tsx"],"sourcesContent":["import { Novu } from '@novu/js';\nimport type { NovuUIOptions as JsNovuUIOptions } from '@novu/js/ui';\nimport { NovuUI as NovuUIClass } from '@novu/js/ui';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { NovuUIProvider } from '../context/NovuUIContext';\nimport { useDataRef } from '../hooks/internal/useDataRef';\nimport type { ReactAppearance } from '../utils/types';\nimport { adaptAppearanceForJs } from '../utils/appearance';\nimport { useRenderer } from '../context/RendererContext';\nimport { ShadowRootDetector } from './ShadowRootDetector';\n\ntype NovuUIProps = Omit<JsNovuUIOptions, 'appearance'> & {\n  appearance?: ReactAppearance;\n};\n\ntype RendererProps = React.PropsWithChildren<{\n  options: NovuUIProps;\n  novu?: Novu;\n}>;\n\nconst findParentShadowRoot = (child?: HTMLDivElement | null): Node | null => {\n  if (!child) {\n    return null;\n  }\n\n  let node: Node | null = child;\n\n  while (node) {\n    if (node instanceof Element && node.shadowRoot) {\n      return node.shadowRoot;\n    }\n\n    if (node instanceof ShadowRoot) {\n      return node;\n    }\n\n    node = node.parentNode;\n\n    if (!node || node === document) {\n      break;\n    }\n  }\n\n  return null;\n};\n\nexport const NovuUI = ({ options, novu, children }: RendererProps) => {\n  const shadowRootDetector = useRef<HTMLDivElement>(null);\n  const { mountElement } = useRenderer();\n\n  const adaptedAppearanceForUpdate = useMemo(\n    () => adaptAppearanceForJs(options.appearance || {}, mountElement),\n    [options.appearance, mountElement]\n  );\n\n  const adaptedOptions = useMemo(() => {\n    return {\n      ...options,\n      appearance: adaptedAppearanceForUpdate,\n      novu,\n    };\n  }, [options, novu, adaptedAppearanceForUpdate]);\n\n  const optionsRef = useDataRef(adaptedOptions);\n  const [novuUI, setNovuUI] = useState<NovuUIClass | undefined>();\n\n  useEffect(() => {\n    const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);\n    const instance = new NovuUIClass({\n      ...optionsRef.current,\n      container: optionsRef.current.container ?? parentShadowRoot,\n    });\n    setNovuUI(instance);\n\n    return () => {\n      instance.unmount();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!novuUI) {\n      return;\n    }\n\n    const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);\n    novuUI.updateContainer(options.container ?? parentShadowRoot);\n    novuUI.updateAppearance(adaptedAppearanceForUpdate);\n    novuUI.updateLocalization(options.localization);\n    novuUI.updateTabs(options.tabs);\n    novuUI.updateOptions(options.options);\n    novuUI.updateRouterPush(options.routerPush);\n  }, [\n    shadowRootDetector,\n    novuUI,\n    adaptedAppearanceForUpdate,\n    options.localization,\n    options.tabs,\n    options.options,\n    options.routerPush,\n  ]);\n\n  return (\n    <>\n      <ShadowRootDetector ref={shadowRootDetector} />\n      {novuUI && <NovuUIProvider value={{ novuUI }}>{children}</NovuUIProvider>}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gBAAsC;AACtC,mBAA4D;AAC5D,2BAA+B;AAC/B,wBAA2B;AAE3B,wBAAqC;AACrC,6BAA4B;AAC5B,gCAAmC;AA6F/B;AAlFJ,IAAM,uBAAuB,CAAC,UAA+C;AAC3E,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI,OAAoB;AAExB,SAAO,MAAM;AACX,QAAI,gBAAgB,WAAW,KAAK,YAAY;AAC9C,aAAO,KAAK;AAAA,IACd;AAEA,QAAI,gBAAgB,YAAY;AAC9B,aAAO;AAAA,IACT;AAEA,WAAO,KAAK;AAEZ,QAAI,CAAC,QAAQ,SAAS,UAAU;AAC9B;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAEO,IAAM,SAAS,CAAC,EAAE,SAAS,MAAM,SAAS,MAAqB;AACpE,QAAM,yBAAqB,qBAAuB,IAAI;AACtD,QAAM,EAAE,aAAa,QAAI,oCAAY;AAErC,QAAM,iCAA6B;AAAA,IACjC,UAAM,wCAAqB,QAAQ,cAAc,CAAC,GAAG,YAAY;AAAA,IACjE,CAAC,QAAQ,YAAY,YAAY;AAAA,EACnC;AAEA,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,WAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY;AAAA,MACZ;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,0BAA0B,CAAC;AAE9C,QAAM,iBAAa,8BAAW,cAAc;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkC;AAE9D,8BAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB,mBAAmB,OAAO;AACxE,UAAM,WAAW,IAAI,UAAAA,OAAY;AAAA,MAC/B,GAAG,WAAW;AAAA,MACd,WAAW,WAAW,QAAQ,aAAa;AAAA,IAC7C,CAAC;AACD,cAAU,QAAQ;AAElB,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,UAAM,mBAAmB,qBAAqB,mBAAmB,OAAO;AACxE,WAAO,gBAAgB,QAAQ,aAAa,gBAAgB;AAC5D,WAAO,iBAAiB,0BAA0B;AAClD,WAAO,mBAAmB,QAAQ,YAAY;AAC9C,WAAO,WAAW,QAAQ,IAAI;AAC9B,WAAO,cAAc,QAAQ,OAAO;AACpC,WAAO,iBAAiB,QAAQ,UAAU;AAAA,EAC5C,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV,CAAC;AAED,SACE,4EACE;AAAA,gDAAC,gDAAmB,KAAK,oBAAoB;AAAA,IAC5C,UAAU,4CAAC,uCAAe,OAAO,EAAE,OAAO,GAAI,UAAS;AAAA,KAC1D;AAEJ;","names":["NovuUIClass"]}
+{"version":3,"sources":["../../../src/components/NovuUI.tsx"],"sourcesContent":["import { Novu } from '@novu/js';\nimport type { NovuUIOptions as JsNovuUIOptions } from '@novu/js/ui';\nimport { NovuUI as NovuUIClass } from '@novu/js/ui';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { NovuUIProvider } from '../context/NovuUIContext';\nimport { useRenderer } from '../context/RendererContext';\nimport { useDataRef } from '../hooks/internal/useDataRef';\nimport { adaptAppearanceForJs } from '../utils/appearance';\nimport type { ReactAppearance } from '../utils/types';\nimport { ShadowRootDetector } from './ShadowRootDetector';\n\ntype NovuUIProps = Omit<JsNovuUIOptions, 'appearance'> & {\n  appearance?: ReactAppearance;\n};\n\ntype RendererProps = React.PropsWithChildren<{\n  options: NovuUIProps;\n  novu?: Novu;\n}>;\n\nconst findParentShadowRoot = (child?: HTMLDivElement | null): Node | null => {\n  if (!child) {\n    return null;\n  }\n\n  let node: Node | null = child;\n\n  while (node) {\n    if (node instanceof Element && node.shadowRoot) {\n      return node.shadowRoot;\n    }\n\n    if (node instanceof ShadowRoot) {\n      return node;\n    }\n\n    node = node.parentNode;\n\n    if (!node || node === document) {\n      break;\n    }\n  }\n\n  return null;\n};\n\nexport const NovuUI = ({ options, novu, children }: RendererProps) => {\n  const shadowRootDetector = useRef<HTMLDivElement>(null);\n  const { mountElement } = useRenderer();\n\n  const adaptedAppearanceForUpdate = useMemo(\n    () => adaptAppearanceForJs(options.appearance || {}, mountElement),\n    [options.appearance, mountElement]\n  );\n\n  const adaptedOptions = useMemo(() => {\n    return {\n      ...options,\n      appearance: adaptedAppearanceForUpdate,\n      novu,\n    };\n  }, [options, novu, adaptedAppearanceForUpdate]);\n\n  const optionsRef = useDataRef(adaptedOptions);\n  const [novuUI, setNovuUI] = useState<NovuUIClass | undefined>();\n\n  useEffect(() => {\n    const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);\n    const instance = new NovuUIClass({\n      ...optionsRef.current,\n      container: optionsRef.current.container ?? parentShadowRoot,\n    });\n    setNovuUI(instance);\n\n    return () => {\n      instance.unmount();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!novuUI) {\n      return;\n    }\n\n    const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);\n    novuUI.updateContainer(options.container ?? parentShadowRoot);\n    novuUI.updateAppearance(adaptedAppearanceForUpdate);\n    novuUI.updateLocalization(options.localization);\n    novuUI.updateTabs(options.tabs);\n    novuUI.updateOptions(options.options);\n    novuUI.updateRouterPush(options.routerPush);\n  }, [\n    shadowRootDetector,\n    novuUI,\n    adaptedAppearanceForUpdate,\n    options.localization,\n    options.tabs,\n    options.options,\n    options.routerPush,\n  ]);\n\n  return (\n    <>\n      <ShadowRootDetector ref={shadowRootDetector} />\n      {novuUI && <NovuUIProvider value={{ novuUI }}>{children}</NovuUIProvider>}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gBAAsC;AACtC,mBAA4D;AAC5D,2BAA+B;AAC/B,6BAA4B;AAC5B,wBAA2B;AAC3B,wBAAqC;AAErC,gCAAmC;AA6F/B;AAlFJ,IAAM,uBAAuB,CAAC,UAA+C;AAC3E,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI,OAAoB;AAExB,SAAO,MAAM;AACX,QAAI,gBAAgB,WAAW,KAAK,YAAY;AAC9C,aAAO,KAAK;AAAA,IACd;AAEA,QAAI,gBAAgB,YAAY;AAC9B,aAAO;AAAA,IACT;AAEA,WAAO,KAAK;AAEZ,QAAI,CAAC,QAAQ,SAAS,UAAU;AAC9B;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAEO,IAAM,SAAS,CAAC,EAAE,SAAS,MAAM,SAAS,MAAqB;AACpE,QAAM,yBAAqB,qBAAuB,IAAI;AACtD,QAAM,EAAE,aAAa,QAAI,oCAAY;AAErC,QAAM,iCAA6B;AAAA,IACjC,UAAM,wCAAqB,QAAQ,cAAc,CAAC,GAAG,YAAY;AAAA,IACjE,CAAC,QAAQ,YAAY,YAAY;AAAA,EACnC;AAEA,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,WAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY;AAAA,MACZ;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,0BAA0B,CAAC;AAE9C,QAAM,iBAAa,8BAAW,cAAc;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkC;AAE9D,8BAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB,mBAAmB,OAAO;AACxE,UAAM,WAAW,IAAI,UAAAA,OAAY;AAAA,MAC/B,GAAG,WAAW;AAAA,MACd,WAAW,WAAW,QAAQ,aAAa;AAAA,IAC7C,CAAC;AACD,cAAU,QAAQ;AAElB,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,UAAM,mBAAmB,qBAAqB,mBAAmB,OAAO;AACxE,WAAO,gBAAgB,QAAQ,aAAa,gBAAgB;AAC5D,WAAO,iBAAiB,0BAA0B;AAClD,WAAO,mBAAmB,QAAQ,YAAY;AAC9C,WAAO,WAAW,QAAQ,IAAI;AAC9B,WAAO,cAAc,QAAQ,OAAO;AACpC,WAAO,iBAAiB,QAAQ,UAAU;AAAA,EAC5C,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV,CAAC;AAED,SACE,4EACE;AAAA,gDAAC,gDAAmB,KAAK,oBAAoB;AAAA,IAC5C,UAAU,4CAAC,uCAAe,OAAO,EAAE,OAAO,GAAI,UAAS;AAAA,KAC1D;AAEJ;","names":["NovuUIClass"]}

package/dist/cjs/components/Preferences.cjs

@@ -34,8 +34,8 @@ __export(Preferences_exports, {
 });
 module.exports = __toCommonJS(Preferences_exports);
 var import_react = __toESM(require("react"), 1);
-var import_Mounter = require("./Mounter.cjs");
 var import_NovuUIContext = require("../context/NovuUIContext.cjs");
+var import_Mounter = require("./Mounter.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Preferences = () => {
   const { novuUI } = (0, import_NovuUIContext.useNovuUI)();

package/dist/cjs/components/Preferences.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Preferences.tsx"],"sourcesContent":["import React from 'react';\nimport { Mounter } from './Mounter';\nimport { useNovuUI } from '../context/NovuUIContext';\n\nexport const Preferences = () => {\n  const { novuUI } = useNovuUI();\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAAwB;AACxB,2BAA0B;AAYjB;AAVF,IAAM,cAAc,MAAM;AAC/B,QAAM,EAAE,OAAO,QAAI,gCAAU;AAE7B,QAAM,QAAQ,aAAAA,QAAM,YAAY,CAAC,YAAyB;AACxD,WAAO,OAAO,eAAe;AAAA,MAC3B,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SAAO,4CAAC,0BAAQ,OAAc;AAChC;","names":["React"]}
+{"version":3,"sources":["../../../src/components/Preferences.tsx"],"sourcesContent":["import React from 'react';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { Mounter } from './Mounter';\n\nexport const Preferences = () => {\n  const { novuUI } = useNovuUI();\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,2BAA0B;AAC1B,qBAAwB;AAYf;AAVF,IAAM,cAAc,MAAM;AAC/B,QAAM,EAAE,OAAO,QAAI,gCAAU;AAE7B,QAAM,QAAQ,aAAAA,QAAM,YAAY,CAAC,YAAyB;AACxD,WAAO,OAAO,eAAe;AAAA,MAC3B,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SAAO,4CAAC,0BAAQ,OAAc;AAChC;","names":["React"]}

package/dist/cjs/components/index.cjs

@@ -17,19 +17,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/index.ts
 var components_exports = {};
 module.exports = __toCommonJS(components_exports);
+__reExport(components_exports, require("../hooks/NovuProvider.cjs"), module.exports);
 __reExport(components_exports, require("./Bell.cjs"), module.exports);
 __reExport(components_exports, require("./Inbox.cjs"), module.exports);
-__reExport(components_exports, require("./Preferences.cjs"), module.exports);
-__reExport(components_exports, require("./Notifications.cjs"), module.exports);
 __reExport(components_exports, require("./InboxContent.cjs"), module.exports);
-__reExport(components_exports, require("../hooks/NovuProvider.cjs"), module.exports);
+__reExport(components_exports, require("./Notifications.cjs"), module.exports);
+__reExport(components_exports, require("./Preferences.cjs"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ...require("../hooks/NovuProvider.cjs"),
   ...require("./Bell.cjs"),
   ...require("./Inbox.cjs"),
-  ...require("./Preferences.cjs"),
-  ...require("./Notifications.cjs"),
   ...require("./InboxContent.cjs"),
-  ...require("../hooks/NovuProvider.cjs")
+  ...require("./Notifications.cjs"),
+  ...require("./Preferences.cjs")
 });
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './Bell';\nexport * from './Inbox';\nexport * from './Preferences';\nexport * from './Notifications';\nexport * from './InboxContent';\nexport * from '../hooks/NovuProvider';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,uBAAd;AACA,+BAAc,wBADd;AAEA,+BAAc,8BAFd;AAGA,+BAAc,gCAHd;AAIA,+BAAc,+BAJd;AAKA,+BAAc,sCALd;","names":[]}
+{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from '../hooks/NovuProvider';\nexport * from './Bell';\nexport * from './Inbox';\nexport * from './InboxContent';\nexport * from './Notifications';\nexport * from './Preferences';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,sCAAd;AACA,+BAAc,uBADd;AAEA,+BAAc,wBAFd;AAGA,+BAAc,+BAHd;AAIA,+BAAc,gCAJd;AAKA,+BAAc,8BALd;","names":[]}

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

@@ -1,11 +1,11 @@
+export { InternalNovuProvider, NovuProvider, NovuProviderProps, useNovu, useUnsafeNovu } from '../hooks/NovuProvider.cjs';
 export { Bell, BellProps } from './Bell.cjs';
 export { Inbox, InboxProps } from './Inbox.cjs';
-export { Preferences } from './Preferences.cjs';
-export { NotificationProps, Notifications } from './Notifications.cjs';
 export { InboxContent, InboxContentProps } from './InboxContent.cjs';
-export { InternalNovuProvider, NovuProvider, NovuProviderProps, useNovu, useUnsafeNovu } from '../hooks/NovuProvider.cjs';
+export { NotificationProps, Notifications } from './Notifications.cjs';
+export { Preferences } from './Preferences.cjs';
+import 'react/jsx-runtime';
+import '@novu/js';
 import 'react';
 import '../utils/types.cjs';
 import '@novu/js/ui';
-import '@novu/js';
-import 'react/jsx-runtime';

package/dist/cjs/context/NovuUIContext.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/NovuUIContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { NovuUI } from '@novu/js/ui';\nimport { createContextAndHook } from '../utils/createContextAndHook';\n\ntype NovuUIContextValue = {\n  novuUI: NovuUI;\n};\n\nconst [NovuUIContext, useNovuUIContext, useUnsafeNovuUIContext] =\n  createContextAndHook<NovuUIContextValue>('NovuUIContext');\n\nconst NovuUIProvider = (props: React.PropsWithChildren<{ value: NovuUIContextValue }>) => {\n  return <NovuUIContext.Provider value={{ value: props.value }}>{props.children}</NovuUIContext.Provider>;\n};\n\nexport { useNovuUIContext as useNovuUI, useUnsafeNovuUIContext as useUnsafeNovuUI, NovuUIProvider };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,kCAAqC;AAU5B;AAJT,IAAM,CAAC,eAAe,kBAAkB,sBAAsB,QAC5D,kDAAyC,eAAe;AAE1D,IAAM,iBAAiB,CAAC,UAAkE;AACxF,SAAO,4CAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,OAAO,MAAM,MAAM,GAAI,gBAAM,UAAS;AAChF;","names":[]}
+{"version":3,"sources":["../../../src/context/NovuUIContext.tsx"],"sourcesContent":["import type { NovuUI } from '@novu/js/ui';\nimport React from 'react';\nimport { createContextAndHook } from '../utils/createContextAndHook';\n\ntype NovuUIContextValue = {\n  novuUI: NovuUI;\n};\n\nconst [NovuUIContext, useNovuUIContext, useUnsafeNovuUIContext] =\n  createContextAndHook<NovuUIContextValue>('NovuUIContext');\n\nconst NovuUIProvider = (props: React.PropsWithChildren<{ value: NovuUIContextValue }>) => {\n  return <NovuUIContext.Provider value={{ value: props.value }}>{props.children}</NovuUIContext.Provider>;\n};\n\nexport { useNovuUIContext as useNovuUI, useUnsafeNovuUIContext as useUnsafeNovuUI, NovuUIProvider };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,kCAAqC;AAU5B;AAJT,IAAM,CAAC,eAAe,kBAAkB,sBAAsB,QAC5D,kDAAyC,eAAe;AAE1D,IAAM,iBAAiB,CAAC,UAAkE;AACxF,SAAO,4CAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,OAAO,MAAM,MAAM,GAAI,gBAAM,UAAS;AAChF;","names":[]}

package/dist/cjs/context/NovuUIContext.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
 import { NovuUI } from '@novu/js/ui';
+import React__default from 'react';
 
 type NovuUIContextValue = {
     novuUI: NovuUI;

package/dist/cjs/hooks/NovuProvider.cjs

@@ -30,7 +30,7 @@ var import_js = require("@novu/js");
 var import_internal = require("@novu/js/internal");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var version = "3.7.1-nightly.20250723";
+var version = "3.8.0";
 var name = "@novu/react";
 var baseUserAgent = `${name}@${version}`;
 var NovuContext = (0, import_react.createContext)(void 0);

package/dist/cjs/hooks/NovuProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/NovuProvider.tsx"],"sourcesContent":["import { Novu, NovuOptions } from '@novu/js';\nimport { buildSubscriber } from '@novu/js/internal';\nimport { ReactNode, createContext, useContext, useMemo, useEffect } from 'react';\n\n// @ts-ignore\nconst version = PACKAGE_VERSION;\n// @ts-ignore\nconst name = PACKAGE_NAME;\nconst baseUserAgent = `${name}@${version}`;\n\nexport type NovuProviderProps = NovuOptions & {\n  children: ReactNode;\n};\n\nconst NovuContext = createContext<Novu | undefined>(undefined);\n\nexport const NovuProvider = (props: NovuProviderProps) => {\n  const { subscriberId, ...propsWithoutSubscriberId } = props;\n  const subscriberObj = buildSubscriber({ subscriberId, subscriber: props.subscriber });\n  const applicationIdentifier = propsWithoutSubscriberId.applicationIdentifier\n    ? propsWithoutSubscriberId.applicationIdentifier\n    : '';\n\n  const providerProps: NovuProviderProps = {\n    ...propsWithoutSubscriberId,\n    applicationIdentifier,\n    subscriber: subscriberObj,\n  };\n\n  return (\n    <InternalNovuProvider {...providerProps} applicationIdentifier={applicationIdentifier} userAgentType=\"hooks\">\n      {props.children}\n    </InternalNovuProvider>\n  );\n};\n\n/**\n * @internal Should be used internally not to be exposed outside of the library\n * This is needed to differentiate between the hooks and components user agents\n * Better to use this internally to avoid confusion.\n */\nexport const InternalNovuProvider = (props: NovuProviderProps & { userAgentType: 'components' | 'hooks' }) => {\n  const applicationIdentifier = props.applicationIdentifier || '';\n  const subscriberObj = buildSubscriber({ subscriberId: props.subscriberId, subscriber: props.subscriber });\n\n  const { children, subscriberId, subscriberHash, backendUrl, apiUrl, socketUrl, useCache, userAgentType } = props;\n\n  const novu = useMemo(\n    () =>\n      new Novu({\n        applicationIdentifier,\n        subscriberHash,\n        backendUrl,\n        apiUrl,\n        socketUrl,\n        useCache,\n        __userAgent: `${baseUserAgent} ${userAgentType}`,\n        subscriber: subscriberObj,\n      }),\n    [applicationIdentifier, subscriberHash, backendUrl, apiUrl, socketUrl, useCache, userAgentType]\n  );\n\n  useEffect(() => {\n    novu.changeSubscriber({\n      subscriber: subscriberObj,\n      subscriberHash: props.subscriberHash,\n    });\n  }, [subscriberObj.subscriberId, props.subscriberHash, novu]);\n\n  return <NovuContext.Provider value={novu}>{children}</NovuContext.Provider>;\n};\n\nexport const useNovu = () => {\n  const context = useContext(NovuContext);\n  if (!context) {\n    throw new Error('useNovu must be used within a <NovuProvider />');\n  }\n\n  return context;\n};\n\nexport const useUnsafeNovu = () => {\n  const context = useContext(NovuContext);\n\n  return context;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAkC;AAClC,sBAAgC;AAChC,mBAAyE;AA4BrE;AAzBJ,IAAM,UAAU;AAEhB,IAAM,OAAO;AACb,IAAM,gBAAgB,GAAG,IAAI,IAAI,OAAO;AAMxC,IAAM,kBAAc,4BAAgC,MAAS;AAEtD,IAAM,eAAe,CAAC,UAA6B;AACxD,QAAM,EAAE,cAAc,GAAG,yBAAyB,IAAI;AACtD,QAAM,oBAAgB,iCAAgB,EAAE,cAAc,YAAY,MAAM,WAAW,CAAC;AACpF,QAAM,wBAAwB,yBAAyB,wBACnD,yBAAyB,wBACzB;AAEJ,QAAM,gBAAmC;AAAA,IACvC,GAAG;AAAA,IACH;AAAA,IACA,YAAY;AAAA,EACd;AAEA,SACE,4CAAC,wBAAsB,GAAG,eAAe,uBAA8C,eAAc,SAClG,gBAAM,UACT;AAEJ;AAOO,IAAM,uBAAuB,CAAC,UAAyE;AAC5G,QAAM,wBAAwB,MAAM,yBAAyB;AAC7D,QAAM,oBAAgB,iCAAgB,EAAE,cAAc,MAAM,cAAc,YAAY,MAAM,WAAW,CAAC;AAExG,QAAM,EAAE,UAAU,cAAc,gBAAgB,YAAY,QAAQ,WAAW,UAAU,cAAc,IAAI;AAE3G,QAAM,WAAO;AAAA,IACX,MACE,IAAI,eAAK;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,GAAG,aAAa,IAAI,aAAa;AAAA,MAC9C,YAAY;AAAA,IACd,CAAC;AAAA,IACH,CAAC,uBAAuB,gBAAgB,YAAY,QAAQ,WAAW,UAAU,aAAa;AAAA,EAChG;AAEA,8BAAU,MAAM;AACd,SAAK,iBAAiB;AAAA,MACpB,YAAY;AAAA,MACZ,gBAAgB,MAAM;AAAA,IACxB,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,cAAc,MAAM,gBAAgB,IAAI,CAAC;AAE3D,SAAO,4CAAC,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AACtD;AAEO,IAAM,UAAU,MAAM;AAC3B,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,gDAAgD;AAAA,EAClE;AAEA,SAAO;AACT;AAEO,IAAM,gBAAgB,MAAM;AACjC,QAAM,cAAU,yBAAW,WAAW;AAEtC,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/hooks/NovuProvider.tsx"],"sourcesContent":["import { Novu, NovuOptions } from '@novu/js';\nimport { buildSubscriber } from '@novu/js/internal';\nimport { createContext, ReactNode, useContext, useEffect, useMemo } from 'react';\n\n// @ts-ignore\nconst version = PACKAGE_VERSION;\n// @ts-ignore\nconst name = PACKAGE_NAME;\nconst baseUserAgent = `${name}@${version}`;\n\nexport type NovuProviderProps = NovuOptions & {\n  children: ReactNode;\n};\n\nconst NovuContext = createContext<Novu | undefined>(undefined);\n\nexport const NovuProvider = (props: NovuProviderProps) => {\n  const { subscriberId, ...propsWithoutSubscriberId } = props;\n  const subscriberObj = buildSubscriber({ subscriberId, subscriber: props.subscriber });\n  const applicationIdentifier = propsWithoutSubscriberId.applicationIdentifier\n    ? propsWithoutSubscriberId.applicationIdentifier\n    : '';\n\n  const providerProps: NovuProviderProps = {\n    ...propsWithoutSubscriberId,\n    applicationIdentifier,\n    subscriber: subscriberObj,\n  };\n\n  return (\n    <InternalNovuProvider {...providerProps} applicationIdentifier={applicationIdentifier} userAgentType=\"hooks\">\n      {props.children}\n    </InternalNovuProvider>\n  );\n};\n\n/**\n * @internal Should be used internally not to be exposed outside of the library\n * This is needed to differentiate between the hooks and components user agents\n * Better to use this internally to avoid confusion.\n */\nexport const InternalNovuProvider = (props: NovuProviderProps & { userAgentType: 'components' | 'hooks' }) => {\n  const applicationIdentifier = props.applicationIdentifier || '';\n  const subscriberObj = buildSubscriber({ subscriberId: props.subscriberId, subscriber: props.subscriber });\n\n  const { children, subscriberId, subscriberHash, backendUrl, apiUrl, socketUrl, useCache, userAgentType } = props;\n\n  const novu = useMemo(\n    () =>\n      new Novu({\n        applicationIdentifier,\n        subscriberHash,\n        backendUrl,\n        apiUrl,\n        socketUrl,\n        useCache,\n        __userAgent: `${baseUserAgent} ${userAgentType}`,\n        subscriber: subscriberObj,\n      }),\n    [applicationIdentifier, subscriberHash, backendUrl, apiUrl, socketUrl, useCache, userAgentType]\n  );\n\n  useEffect(() => {\n    novu.changeSubscriber({\n      subscriber: subscriberObj,\n      subscriberHash: props.subscriberHash,\n    });\n  }, [subscriberObj.subscriberId, props.subscriberHash, novu]);\n\n  return <NovuContext.Provider value={novu}>{children}</NovuContext.Provider>;\n};\n\nexport const useNovu = () => {\n  const context = useContext(NovuContext);\n  if (!context) {\n    throw new Error('useNovu must be used within a <NovuProvider />');\n  }\n\n  return context;\n};\n\nexport const useUnsafeNovu = () => {\n  const context = useContext(NovuContext);\n\n  return context;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAkC;AAClC,sBAAgC;AAChC,mBAAyE;AA4BrE;AAzBJ,IAAM,UAAU;AAEhB,IAAM,OAAO;AACb,IAAM,gBAAgB,GAAG,IAAI,IAAI,OAAO;AAMxC,IAAM,kBAAc,4BAAgC,MAAS;AAEtD,IAAM,eAAe,CAAC,UAA6B;AACxD,QAAM,EAAE,cAAc,GAAG,yBAAyB,IAAI;AACtD,QAAM,oBAAgB,iCAAgB,EAAE,cAAc,YAAY,MAAM,WAAW,CAAC;AACpF,QAAM,wBAAwB,yBAAyB,wBACnD,yBAAyB,wBACzB;AAEJ,QAAM,gBAAmC;AAAA,IACvC,GAAG;AAAA,IACH;AAAA,IACA,YAAY;AAAA,EACd;AAEA,SACE,4CAAC,wBAAsB,GAAG,eAAe,uBAA8C,eAAc,SAClG,gBAAM,UACT;AAEJ;AAOO,IAAM,uBAAuB,CAAC,UAAyE;AAC5G,QAAM,wBAAwB,MAAM,yBAAyB;AAC7D,QAAM,oBAAgB,iCAAgB,EAAE,cAAc,MAAM,cAAc,YAAY,MAAM,WAAW,CAAC;AAExG,QAAM,EAAE,UAAU,cAAc,gBAAgB,YAAY,QAAQ,WAAW,UAAU,cAAc,IAAI;AAE3G,QAAM,WAAO;AAAA,IACX,MACE,IAAI,eAAK;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,GAAG,aAAa,IAAI,aAAa;AAAA,MAC9C,YAAY;AAAA,IACd,CAAC;AAAA,IACH,CAAC,uBAAuB,gBAAgB,YAAY,QAAQ,WAAW,UAAU,aAAa;AAAA,EAChG;AAEA,8BAAU,MAAM;AACd,SAAK,iBAAiB;AAAA,MACpB,YAAY;AAAA,MACZ,gBAAgB,MAAM;AAAA,IACxB,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,cAAc,MAAM,gBAAgB,IAAI,CAAC;AAE3D,SAAO,4CAAC,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AACtD;AAEO,IAAM,UAAU,MAAM;AAC3B,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,gDAAgD;AAAA,EAClE;AAEA,SAAO;AACT;AAEO,IAAM,gBAAgB,MAAM;AACjC,QAAM,cAAU,yBAAW,WAAW;AAEtC,SAAO;AACT;","names":[]}

package/dist/cjs/hooks/index.cjs

@@ -25,16 +25,16 @@ __export(hooks_exports, {
   useNovu: () => import_NovuProvider.useNovu
 });
 module.exports = __toCommonJS(hooks_exports);
+var import_NovuProvider = require("./NovuProvider.cjs");
+__reExport(hooks_exports, require("./useCounts.cjs"), module.exports);
 __reExport(hooks_exports, require("./useNotifications.cjs"), module.exports);
 __reExport(hooks_exports, require("./usePreferences.cjs"), module.exports);
-__reExport(hooks_exports, require("./useCounts.cjs"), module.exports);
-var import_NovuProvider = require("./NovuProvider.cjs");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   NovuProvider,
   useNovu,
+  ...require("./useCounts.cjs"),
   ...require("./useNotifications.cjs"),
-  ...require("./usePreferences.cjs"),
-  ...require("./useCounts.cjs")
+  ...require("./usePreferences.cjs")
 });
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/hooks/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/index.ts"],"sourcesContent":["export * from './useNotifications';\nexport * from './usePreferences';\nexport * from './useCounts';\nexport { NovuProvider, useNovu } from './NovuProvider';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAc,mCAAd;AACA,0BAAc,iCADd;AAEA,0BAAc,4BAFd;AAGA,0BAAsC;","names":[]}
+{"version":3,"sources":["../../../src/hooks/index.ts"],"sourcesContent":["export { NovuProvider, useNovu } from './NovuProvider';\nexport * from './useCounts';\nexport * from './useNotifications';\nexport * from './usePreferences';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAsC;AACtC,0BAAc,4BADd;AAEA,0BAAc,mCAFd;AAGA,0BAAc,iCAHd;","names":[]}

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

@@ -1,7 +1,7 @@
+export { NovuProvider, useNovu } from './NovuProvider.cjs';
+export { UseCountsProps, UseCountsResult, useCounts } from './useCounts.cjs';
 export { UseNotificationsProps, UseNotificationsResult, useNotifications } from './useNotifications.cjs';
 export { UsePreferencesProps, UsePreferencesResult, usePreferences } from './usePreferences.cjs';
-export { UseCountsProps, UseCountsResult, useCounts } from './useCounts.cjs';
-export { NovuProvider, useNovu } from './NovuProvider.cjs';
-import '@novu/js';
 import 'react/jsx-runtime';
+import '@novu/js';
 import 'react';

package/dist/cjs/hooks/internal/useWebsocketEvent.cjs

@@ -24,8 +24,8 @@ __export(useWebsocketEvent_exports, {
 });
 module.exports = __toCommonJS(useWebsocketEvent_exports);
 var import_react = require("react");
-var import_NovuProvider = require("../NovuProvider.cjs");
 var import_requestLock = require("../../utils/requestLock.cjs");
+var import_NovuProvider = require("../NovuProvider.cjs");
 var import_useBrowserTabsChannel = require("./useBrowserTabsChannel.cjs");
 var useWebSocketEvent = ({
   event: webSocketEvent,

package/dist/cjs/hooks/internal/useWebsocketEvent.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/internal/useWebsocketEvent.ts"],"sourcesContent":["import { EventHandler, Events, SocketEventNames } from '@novu/js';\nimport { useEffect } from 'react';\nimport { useNovu } from '../NovuProvider';\nimport { requestLock } from '../../utils/requestLock';\nimport { useBrowserTabsChannel } from './useBrowserTabsChannel';\n\nexport const useWebSocketEvent = <E extends SocketEventNames>({\n  event: webSocketEvent,\n  eventHandler: onMessage,\n}: {\n  event: E;\n  eventHandler: (args: Events[E]) => void;\n}) => {\n  const novu = useNovu();\n  const channelName = `nv_ws_connection:a=${novu.applicationIdentifier}:s=${novu.subscriberId}:e=${webSocketEvent}`;\n\n  const { postMessage } = useBrowserTabsChannel({\n    channelName,\n    onMessage,\n  });\n\n  const updateReadCount: EventHandler<Events[E]> = (data) => {\n    onMessage(data);\n    postMessage(data);\n  };\n\n  useEffect(() => {\n    let cleanup: () => void;\n    const resolveLock = requestLock(channelName, () => {\n      cleanup = novu.on(webSocketEvent, updateReadCount);\n    });\n\n    return () => {\n      if (cleanup) {\n        cleanup();\n      }\n\n      resolveLock();\n    };\n  }, []);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA0B;AAC1B,0BAAwB;AACxB,yBAA4B;AAC5B,mCAAsC;AAE/B,IAAM,oBAAoB,CAA6B;AAAA,EAC5D,OAAO;AAAA,EACP,cAAc;AAChB,MAGM;AACJ,QAAM,WAAO,6BAAQ;AACrB,QAAM,cAAc,sBAAsB,KAAK,qBAAqB,MAAM,KAAK,YAAY,MAAM,cAAc;AAE/G,QAAM,EAAE,YAAY,QAAI,oDAAsB;AAAA,IAC5C;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,kBAA2C,CAAC,SAAS;AACzD,cAAU,IAAI;AACd,gBAAY,IAAI;AAAA,EAClB;AAEA,8BAAU,MAAM;AACd,QAAI;AACJ,UAAM,kBAAc,gCAAY,aAAa,MAAM;AACjD,gBAAU,KAAK,GAAG,gBAAgB,eAAe;AAAA,IACnD,CAAC;AAED,WAAO,MAAM;AACX,UAAI,SAAS;AACX,gBAAQ;AAAA,MACV;AAEA,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AACP;","names":[]}
+{"version":3,"sources":["../../../../src/hooks/internal/useWebsocketEvent.ts"],"sourcesContent":["import { EventHandler, Events, SocketEventNames } from '@novu/js';\nimport { useEffect } from 'react';\nimport { requestLock } from '../../utils/requestLock';\nimport { useNovu } from '../NovuProvider';\nimport { useBrowserTabsChannel } from './useBrowserTabsChannel';\n\nexport const useWebSocketEvent = <E extends SocketEventNames>({\n  event: webSocketEvent,\n  eventHandler: onMessage,\n}: {\n  event: E;\n  eventHandler: (args: Events[E]) => void;\n}) => {\n  const novu = useNovu();\n  const channelName = `nv_ws_connection:a=${novu.applicationIdentifier}:s=${novu.subscriberId}:e=${webSocketEvent}`;\n\n  const { postMessage } = useBrowserTabsChannel({\n    channelName,\n    onMessage,\n  });\n\n  const updateReadCount: EventHandler<Events[E]> = (data) => {\n    onMessage(data);\n    postMessage(data);\n  };\n\n  useEffect(() => {\n    let cleanup: () => void;\n    const resolveLock = requestLock(channelName, () => {\n      cleanup = novu.on(webSocketEvent, updateReadCount);\n    });\n\n    return () => {\n      if (cleanup) {\n        cleanup();\n      }\n\n      resolveLock();\n    };\n  }, []);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA0B;AAC1B,yBAA4B;AAC5B,0BAAwB;AACxB,mCAAsC;AAE/B,IAAM,oBAAoB,CAA6B;AAAA,EAC5D,OAAO;AAAA,EACP,cAAc;AAChB,MAGM;AACJ,QAAM,WAAO,6BAAQ;AACrB,QAAM,cAAc,sBAAsB,KAAK,qBAAqB,MAAM,KAAK,YAAY,MAAM,cAAc;AAE/G,QAAM,EAAE,YAAY,QAAI,oDAAsB;AAAA,IAC5C;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,kBAA2C,CAAC,SAAS;AACzD,cAAU,IAAI;AACd,gBAAY,IAAI;AAAA,EAClB;AAEA,8BAAU,MAAM;AACd,QAAI;AACJ,UAAM,kBAAc,gCAAY,aAAa,MAAM;AACjD,gBAAU,KAAK,GAAG,gBAAgB,eAAe;AAAA,IACnD,CAAC;AAED,WAAO,MAAM;AACX,UAAI,SAAS;AACX,gBAAQ;AAAA,MACV;AAEA,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AACP;","names":[]}

package/dist/cjs/hooks/useCounts.cjs

@@ -23,29 +23,32 @@ __export(useCounts_exports, {
   useCounts: () => useCounts
 });
 module.exports = __toCommonJS(useCounts_exports);
-var import_react = require("react");
 var import_js = require("@novu/js");
-var import_NovuProvider = require("./NovuProvider.cjs");
+var import_react = require("react");
 var import_useWebsocketEvent = require("./internal/useWebsocketEvent.cjs");
+var import_NovuProvider = require("./NovuProvider.cjs");
 var useCounts = (props) => {
   const { filters, onSuccess, onError } = props;
   const { notifications } = (0, import_NovuProvider.useNovu)();
+  const filtersRef = (0, import_react.useRef)(filters);
   const [error, setError] = (0, import_react.useState)();
   const [counts, setCounts] = (0, import_react.useState)();
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
   const [isFetching, setIsFetching] = (0, import_react.useState)(false);
-  const sync = async (notification) => {
-    const existingCounts = counts ?? filters.map((filter) => ({ count: 0, filter }));
+  filtersRef.current = filters;
+  const sync = async (notification, overrideFilters) => {
+    const currentFilters = overrideFilters || filtersRef.current;
+    const existingCounts = currentFilters.map((filter) => ({ count: 0, filter }));
     let countFiltersToFetch = [];
     if (notification) {
       for (let i = 0; i < existingCounts.length; i++) {
-        const filter = filters[i];
+        const filter = currentFilters[i];
         if ((0, import_js.areTagsEqual)(filter.tags, notification.tags)) {
           countFiltersToFetch.push(filter);
         }
       }
     } else {
-      countFiltersToFetch = filters;
+      countFiltersToFetch = currentFilters;
     }
     if (countFiltersToFetch.length === 0) {
       return;
@@ -65,8 +68,9 @@ var useCounts = (props) => {
       const newCounts = [];
       const countsReceived = data.counts;
       for (let i = 0; i < existingCounts.length; i++) {
-        const countReceived = countsReceived.find((c) => (0, import_js.isSameFilter)(c.filter, existingCounts[i].filter));
-        const count = countReceived || oldCounts && oldCounts[i];
+        const existingFilter = existingCounts[i].filter;
+        const countReceived = countsReceived.find((c) => (0, import_js.isSameFilter)(c.filter, existingFilter));
+        const count = countReceived || (oldCounts == null ? void 0 : oldCounts[i]);
         if (count) {
           newCounts.push(count);
         }
@@ -90,7 +94,7 @@ var useCounts = (props) => {
     setError(void 0);
     setIsLoading(true);
     setIsFetching(false);
-    sync();
+    sync(void 0, filters);
   }, [JSON.stringify(filters)]);
   const refetch = async () => {
     await sync();

package/dist/cjs/hooks/useCounts.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useCounts.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Notification, NotificationFilter, NovuError, areTagsEqual, isSameFilter } from '@novu/js';\nimport { useNovu } from './NovuProvider';\nimport { useWebSocketEvent } from './internal/useWebsocketEvent';\n\ntype Count = {\n  count: number;\n  filter: NotificationFilter;\n};\n\n/**\n * Props for the useCounts hook.\n *\n * @example\n * ```tsx\n * // Count unread notifications\n * const { counts } = useCounts({\n *   filters: [{ read: false }]\n * });\n *\n * // Count unseen notifications with specific tags\n * const { counts } = useCounts({\n *   filters: [{ seen: false, tags: ['important'] }]\n * });\n *\n * // Count seen but unread notifications\n * const { counts } = useCounts({\n *   filters: [{ seen: true, read: false }]\n * });\n * ```\n */\nexport type UseCountsProps = {\n  filters: NotificationFilter[];\n  onSuccess?: (data: Count[]) => void;\n  onError?: (error: NovuError) => void;\n};\n\nexport type UseCountsResult = {\n  counts?: Count[];\n  error?: NovuError;\n  isLoading: boolean; // initial loading\n  isFetching: boolean; // the request is in flight\n  refetch: () => Promise<void>;\n};\n\nexport const useCounts = (props: UseCountsProps): UseCountsResult => {\n  const { filters, onSuccess, onError } = props;\n  const { notifications } = useNovu();\n  const [error, setError] = useState<NovuError>();\n  const [counts, setCounts] = useState<Count[]>();\n  const [isLoading, setIsLoading] = useState(true);\n  const [isFetching, setIsFetching] = useState(false);\n\n  const sync = async (notification?: Notification) => {\n    const existingCounts = counts ?? filters.map((filter) => ({ count: 0, filter }));\n    let countFiltersToFetch: NotificationFilter[] = [];\n    if (notification) {\n      // eslint-disable-next-line no-plusplus\n      for (let i = 0; i < existingCounts.length; i++) {\n        const filter = filters[i];\n        if (areTagsEqual(filter.tags, notification.tags)) {\n          countFiltersToFetch.push(filter);\n        }\n      }\n    } else {\n      countFiltersToFetch = filters;\n    }\n\n    if (countFiltersToFetch.length === 0) {\n      return;\n    }\n\n    setIsFetching(true);\n    const countsRes = await notifications.count({ filters: countFiltersToFetch });\n    setIsFetching(false);\n    setIsLoading(false);\n    if (countsRes.error) {\n      setError(countsRes.error);\n      onError?.(countsRes.error);\n\n      return;\n    }\n    const data = countsRes.data!;\n    onSuccess?.(data.counts);\n\n    setCounts((oldCounts) => {\n      const newCounts: Count[] = [];\n      const countsReceived = data.counts;\n\n      // eslint-disable-next-line no-plusplus\n      for (let i = 0; i < existingCounts.length; i++) {\n        const countReceived = countsReceived.find((c) => isSameFilter(c.filter, existingCounts[i].filter));\n        const count = countReceived || (oldCounts && oldCounts[i]);\n        if (count) {\n          newCounts.push(count);\n        }\n      }\n\n      return newCounts;\n    });\n  };\n\n  useWebSocketEvent({\n    event: 'notifications.notification_received',\n    eventHandler: (data) => {\n      sync(data.result);\n    },\n  });\n\n  useWebSocketEvent({\n    event: 'notifications.unread_count_changed',\n    eventHandler: () => {\n      sync();\n    },\n  });\n\n  useEffect(() => {\n    setError(undefined);\n    setIsLoading(true);\n    setIsFetching(false);\n    sync();\n  }, [JSON.stringify(filters)]);\n\n  const refetch = async () => {\n    await sync();\n  };\n\n  return { counts, error, refetch, isLoading, isFetching };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoC;AACpC,gBAAwF;AACxF,0BAAwB;AACxB,+BAAkC;AA0C3B,IAAM,YAAY,CAAC,UAA2C;AACnE,QAAM,EAAE,SAAS,WAAW,QAAQ,IAAI;AACxC,QAAM,EAAE,cAAc,QAAI,6BAAQ;AAClC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAoB;AAC9C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB;AAC9C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,IAAI;AAC/C,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAElD,QAAM,OAAO,OAAO,iBAAgC;AAClD,UAAM,iBAAiB,UAAU,QAAQ,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,OAAO,EAAE;AAC/E,QAAI,sBAA4C,CAAC;AACjD,QAAI,cAAc;AAEhB,eAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,cAAM,SAAS,QAAQ,CAAC;AACxB,gBAAI,wBAAa,OAAO,MAAM,aAAa,IAAI,GAAG;AAChD,8BAAoB,KAAK,MAAM;AAAA,QACjC;AAAA,MACF;AAAA,IACF,OAAO;AACL,4BAAsB;AAAA,IACxB;AAEA,QAAI,oBAAoB,WAAW,GAAG;AACpC;AAAA,IACF;AAEA,kBAAc,IAAI;AAClB,UAAM,YAAY,MAAM,cAAc,MAAM,EAAE,SAAS,oBAAoB,CAAC;AAC5E,kBAAc,KAAK;AACnB,iBAAa,KAAK;AAClB,QAAI,UAAU,OAAO;AACnB,eAAS,UAAU,KAAK;AACxB,yCAAU,UAAU;AAEpB;AAAA,IACF;AACA,UAAM,OAAO,UAAU;AACvB,2CAAY,KAAK;AAEjB,cAAU,CAAC,cAAc;AACvB,YAAM,YAAqB,CAAC;AAC5B,YAAM,iBAAiB,KAAK;AAG5B,eAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,cAAM,gBAAgB,eAAe,KAAK,CAAC,UAAM,wBAAa,EAAE,QAAQ,eAAe,CAAC,EAAE,MAAM,CAAC;AACjG,cAAM,QAAQ,iBAAkB,aAAa,UAAU,CAAC;AACxD,YAAI,OAAO;AACT,oBAAU,KAAK,KAAK;AAAA,QACtB;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,kDAAkB;AAAA,IAChB,OAAO;AAAA,IACP,cAAc,CAAC,SAAS;AACtB,WAAK,KAAK,MAAM;AAAA,IAClB;AAAA,EACF,CAAC;AAED,kDAAkB;AAAA,IAChB,OAAO;AAAA,IACP,cAAc,MAAM;AAClB,WAAK;AAAA,IACP;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,aAAS,MAAS;AAClB,iBAAa,IAAI;AACjB,kBAAc,KAAK;AACnB,SAAK;AAAA,EACP,GAAG,CAAC,KAAK,UAAU,OAAO,CAAC,CAAC;AAE5B,QAAM,UAAU,YAAY;AAC1B,UAAM,KAAK;AAAA,EACb;AAEA,SAAO,EAAE,QAAQ,OAAO,SAAS,WAAW,WAAW;AACzD;","names":[]}
+{"version":3,"sources":["../../../src/hooks/useCounts.ts"],"sourcesContent":["import { areTagsEqual, isSameFilter, Notification, NotificationFilter, NovuError } from '@novu/js';\nimport { useEffect, useRef, useState } from 'react';\nimport { useWebSocketEvent } from './internal/useWebsocketEvent';\nimport { useNovu } from './NovuProvider';\n\ntype Count = {\n  count: number;\n  filter: NotificationFilter;\n};\n\n/**\n * Props for the useCounts hook.\n *\n * @example\n * ```tsx\n * // Count unread notifications\n * const { counts } = useCounts({\n *   filters: [{ read: false }]\n * });\n *\n * // Count unseen notifications with specific tags\n * const { counts } = useCounts({\n *   filters: [{ seen: false, tags: ['important'] }]\n * });\n *\n * // Count seen but unread notifications\n * const { counts } = useCounts({\n *   filters: [{ seen: true, read: false }]\n * });\n * ```\n */\nexport type UseCountsProps = {\n  filters: NotificationFilter[];\n  onSuccess?: (data: Count[]) => void;\n  onError?: (error: NovuError) => void;\n};\n\nexport type UseCountsResult = {\n  counts?: Count[];\n  error?: NovuError;\n  isLoading: boolean; // initial loading\n  isFetching: boolean; // the request is in flight\n  refetch: () => Promise<void>;\n};\n\nexport const useCounts = (props: UseCountsProps): UseCountsResult => {\n  const { filters, onSuccess, onError } = props;\n  const { notifications } = useNovu();\n  const filtersRef = useRef<NotificationFilter[]>(filters);\n  const [error, setError] = useState<NovuError>();\n  const [counts, setCounts] = useState<Count[]>();\n  const [isLoading, setIsLoading] = useState(true);\n  const [isFetching, setIsFetching] = useState(false);\n\n  // Keep ref up to date\n  filtersRef.current = filters;\n\n  const sync = async (notification?: Notification, overrideFilters?: NotificationFilter[]) => {\n    const currentFilters = overrideFilters || filtersRef.current;\n    const existingCounts = currentFilters.map((filter) => ({ count: 0, filter }));\n    let countFiltersToFetch: NotificationFilter[] = [];\n    if (notification) {\n      for (let i = 0; i < existingCounts.length; i++) {\n        const filter = currentFilters[i];\n        if (areTagsEqual(filter.tags, notification.tags)) {\n          countFiltersToFetch.push(filter);\n        }\n      }\n    } else {\n      countFiltersToFetch = currentFilters;\n    }\n\n    if (countFiltersToFetch.length === 0) {\n      return;\n    }\n\n    setIsFetching(true);\n    const countsRes = await notifications.count({ filters: countFiltersToFetch });\n    setIsFetching(false);\n    setIsLoading(false);\n    if (countsRes.error) {\n      setError(countsRes.error);\n      onError?.(countsRes.error);\n\n      return;\n    }\n    const data = countsRes.data!;\n    onSuccess?.(data.counts);\n\n    setCounts((oldCounts) => {\n      const newCounts: Count[] = [];\n      const countsReceived = data.counts;\n\n      for (let i = 0; i < existingCounts.length; i++) {\n        const existingFilter = existingCounts[i].filter;\n        const countReceived = countsReceived.find((c) => isSameFilter(c.filter, existingFilter));\n        const count = countReceived || oldCounts?.[i];\n        if (count) {\n          newCounts.push(count);\n        }\n      }\n\n      return newCounts;\n    });\n  };\n\n  useWebSocketEvent({\n    event: 'notifications.notification_received',\n    eventHandler: (data) => {\n      sync(data.result);\n    },\n  });\n\n  useWebSocketEvent({\n    event: 'notifications.unread_count_changed',\n    eventHandler: () => {\n      sync();\n    },\n  });\n\n  useEffect(() => {\n    setError(undefined);\n    setIsLoading(true);\n    setIsFetching(false);\n    sync(undefined, filters);\n  }, [JSON.stringify(filters)]);\n\n  const refetch = async () => {\n    await sync();\n  };\n\n  return { counts, error, refetch, isLoading, isFetching };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAwF;AACxF,mBAA4C;AAC5C,+BAAkC;AAClC,0BAAwB;AA0CjB,IAAM,YAAY,CAAC,UAA2C;AACnE,QAAM,EAAE,SAAS,WAAW,QAAQ,IAAI;AACxC,QAAM,EAAE,cAAc,QAAI,6BAAQ;AAClC,QAAM,iBAAa,qBAA6B,OAAO;AACvD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAoB;AAC9C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB;AAC9C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,IAAI;AAC/C,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAGlD,aAAW,UAAU;AAErB,QAAM,OAAO,OAAO,cAA6B,oBAA2C;AAC1F,UAAM,iBAAiB,mBAAmB,WAAW;AACrD,UAAM,iBAAiB,eAAe,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,OAAO,EAAE;AAC5E,QAAI,sBAA4C,CAAC;AACjD,QAAI,cAAc;AAChB,eAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,cAAM,SAAS,eAAe,CAAC;AAC/B,gBAAI,wBAAa,OAAO,MAAM,aAAa,IAAI,GAAG;AAChD,8BAAoB,KAAK,MAAM;AAAA,QACjC;AAAA,MACF;AAAA,IACF,OAAO;AACL,4BAAsB;AAAA,IACxB;AAEA,QAAI,oBAAoB,WAAW,GAAG;AACpC;AAAA,IACF;AAEA,kBAAc,IAAI;AAClB,UAAM,YAAY,MAAM,cAAc,MAAM,EAAE,SAAS,oBAAoB,CAAC;AAC5E,kBAAc,KAAK;AACnB,iBAAa,KAAK;AAClB,QAAI,UAAU,OAAO;AACnB,eAAS,UAAU,KAAK;AACxB,yCAAU,UAAU;AAEpB;AAAA,IACF;AACA,UAAM,OAAO,UAAU;AACvB,2CAAY,KAAK;AAEjB,cAAU,CAAC,cAAc;AACvB,YAAM,YAAqB,CAAC;AAC5B,YAAM,iBAAiB,KAAK;AAE5B,eAAS,IAAI,GAAG,IAAI,eAAe,QAAQ,KAAK;AAC9C,cAAM,iBAAiB,eAAe,CAAC,EAAE;AACzC,cAAM,gBAAgB,eAAe,KAAK,CAAC,UAAM,wBAAa,EAAE,QAAQ,cAAc,CAAC;AACvF,cAAM,QAAQ,kBAAiB,uCAAY;AAC3C,YAAI,OAAO;AACT,oBAAU,KAAK,KAAK;AAAA,QACtB;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,kDAAkB;AAAA,IAChB,OAAO;AAAA,IACP,cAAc,CAAC,SAAS;AACtB,WAAK,KAAK,MAAM;AAAA,IAClB;AAAA,EACF,CAAC;AAED,kDAAkB;AAAA,IAChB,OAAO;AAAA,IACP,cAAc,MAAM;AAClB,WAAK;AAAA,IACP;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,aAAS,MAAS;AAClB,iBAAa,IAAI;AACjB,kBAAc,KAAK;AACnB,SAAK,QAAW,OAAO;AAAA,EACzB,GAAG,CAAC,KAAK,UAAU,OAAO,CAAC,CAAC;AAE5B,QAAM,UAAU,YAAY;AAC1B,UAAM,KAAK;AAAA,EACb;AAEA,SAAO,EAAE,QAAQ,OAAO,SAAS,WAAW,WAAW;AACzD;","names":[]}