@novu/react 3.3.1 → 3.5.0-rc.1

package/dist/cjs/components/Inbox.cjs

@@ -41,7 +41,7 @@ var import_NovuProvider = require("../hooks/NovuProvider.cjs");
 var import_NovuUI = require("./NovuUI.cjs");
 var import_Renderer = require("./Renderer.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-var _DefaultInbox = (props) => {
+var DefaultInbox = (props) => {
   const {
     open,
     renderNotification,
@@ -103,7 +103,6 @@ var _DefaultInbox = (props) => {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { mount });
 };
-var DefaultInbox = (0, import_Renderer.withRenderer)(_DefaultInbox);
 var Inbox = import_react.default.memo((props) => {
   const { applicationIdentifier, subscriberHash, backendUrl, socketUrl } = props;
   const novu = (0, import_NovuProvider.useUnsafeNovu)();
@@ -123,65 +122,55 @@ var Inbox = import_react.default.memo((props) => {
     }
   );
 });
-var InboxChild = import_react.default.memo((props) => {
-  const {
-    localization,
-    appearance,
-    tabs,
-    preferencesFilter,
-    routerPush,
-    applicationIdentifier,
-    subscriberId,
-    subscriberHash,
-    backendUrl,
-    socketUrl
-  } = props;
-  const novu = (0, import_NovuProvider.useNovu)();
-  const options = (0, import_react.useMemo)(() => {
-    return {
+var InboxChild = (0, import_Renderer.withRenderer)(
+  import_react.default.memo((props) => {
+    const {
       localization,
       appearance,
       tabs,
       preferencesFilter,
+      preferenceGroups,
       routerPush,
-      options: {
-        applicationIdentifier,
-        subscriberHash,
-        backendUrl,
-        socketUrl,
-        subscriber: buildSubscriber(props)
-      }
-    };
-  }, [
-    localization,
-    appearance,
-    tabs,
-    preferencesFilter,
-    applicationIdentifier,
-    subscriberId,
-    subscriberHash,
-    backendUrl,
-    socketUrl,
-    props.subscriber
-  ]);
-  if (isWithChildrenProps(props)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NovuUI.NovuUI, { options, novu, children: props.children });
-  }
-  const {
-    open,
-    renderNotification,
-    renderSubject,
-    renderBody,
-    renderBell,
-    onNotificationClick,
-    onPrimaryActionClick,
-    onSecondaryActionClick,
-    placementOffset,
-    placement
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NovuUI.NovuUI, { options, novu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DefaultInbox,
-    {
+      applicationIdentifier,
+      subscriberId,
+      subscriberHash,
+      backendUrl,
+      socketUrl
+    } = props;
+    const novu = (0, import_NovuProvider.useNovu)();
+    const options = (0, import_react.useMemo)(() => {
+      return {
+        localization,
+        appearance,
+        tabs,
+        preferencesFilter,
+        preferenceGroups,
+        routerPush,
+        options: {
+          applicationIdentifier,
+          subscriberHash,
+          backendUrl,
+          socketUrl,
+          subscriber: buildSubscriber(props)
+        }
+      };
+    }, [
+      localization,
+      appearance,
+      tabs,
+      preferencesFilter,
+      preferenceGroups,
+      applicationIdentifier,
+      subscriberId,
+      subscriberHash,
+      backendUrl,
+      socketUrl,
+      props.subscriber
+    ]);
+    if (isWithChildrenProps(props)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NovuUI.NovuUI, { options, novu, children: props.children });
+    }
+    const {
       open,
       renderNotification,
       renderSubject,
@@ -190,11 +179,26 @@ var InboxChild = import_react.default.memo((props) => {
       onNotificationClick,
       onPrimaryActionClick,
       onSecondaryActionClick,
-      placement,
-      placementOffset
-    }
-  ) });
-});
+      placementOffset,
+      placement
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NovuUI.NovuUI, { options, novu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DefaultInbox,
+      {
+        open,
+        renderNotification,
+        renderSubject,
+        renderBody,
+        renderBell,
+        onNotificationClick,
+        onPrimaryActionClick,
+        onSecondaryActionClick,
+        placement,
+        placementOffset
+      }
+    ) });
+  })
+);
 function isWithChildrenProps(props) {
   return "children" in props;
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Inbox.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Subscriber } from '@novu/js';\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\nconst DefaultInbox = withRenderer(_DefaultInbox);\n\nexport const Inbox = React.memo((props: InboxProps) => {\n  const { applicationIdentifier, subscriberHash, backendUrl, socketUrl } = props;\n  const novu = useUnsafeNovu();\n\n  if (novu) {\n    return <InboxChild {...props} />;\n  }\n\n  return (\n    <InternalNovuProvider\n      applicationIdentifier={applicationIdentifier}\n      subscriberHash={subscriberHash}\n      backendUrl={backendUrl}\n      socketUrl={socketUrl}\n      subscriber={buildSubscriber(props)}\n      userAgentType=\"components\"\n    >\n      <InboxChild {...props} />\n    </InternalNovuProvider>\n  );\n});\n\nconst InboxChild = React.memo((props: InboxProps) => {\n  const {\n    localization,\n    appearance,\n    tabs,\n    preferencesFilter,\n    routerPush,\n    applicationIdentifier,\n    subscriberId,\n    subscriberHash,\n    backendUrl,\n    socketUrl,\n  } = props;\n  const novu = useNovu();\n\n  const options = useMemo(() => {\n    return {\n      localization,\n      appearance,\n      tabs,\n      preferencesFilter,\n      routerPush,\n      options: {\n        applicationIdentifier,\n        subscriberHash,\n        backendUrl,\n        socketUrl,\n        subscriber: buildSubscriber(props),\n      },\n    };\n  }, [\n    localization,\n    appearance,\n    tabs,\n    preferencesFilter,\n    applicationIdentifier,\n    subscriberId,\n    subscriberHash,\n    backendUrl,\n    socketUrl,\n    props.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\nfunction isWithChildrenProps(props: InboxProps): props is WithChildrenProps {\n  return 'children' in props;\n}\n\nfunction buildSubscriber(options: InboxProps): Subscriber {\n  let subscriberObj: Subscriber;\n\n  if (options.subscriber) {\n    subscriberObj = typeof options.subscriber === 'string' ? { subscriberId: options.subscriber } : options.subscriber;\n  } else {\n    subscriberObj = { subscriberId: options.subscriberId as string };\n  }\n\n  return subscriberObj;\n}\n"],"mappings":"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","names":["React"]}
+{"version":3,"sources":["../../../src/components/Inbox.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Subscriber } from '@novu/js';\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 { applicationIdentifier, subscriberHash, backendUrl, socketUrl } = props;\n  const novu = useUnsafeNovu();\n\n  if (novu) {\n    return <InboxChild {...props} />;\n  }\n\n  return (\n    <InternalNovuProvider\n      applicationIdentifier={applicationIdentifier}\n      subscriberHash={subscriberHash}\n      backendUrl={backendUrl}\n      socketUrl={socketUrl}\n      subscriber={buildSubscriber(props)}\n      userAgentType=\"components\"\n    >\n      <InboxChild {...props} />\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,\n      subscriberId,\n      subscriberHash,\n      backendUrl,\n      socketUrl,\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(props),\n        },\n      };\n    }, [\n      localization,\n      appearance,\n      tabs,\n      preferencesFilter,\n      preferenceGroups,\n      applicationIdentifier,\n      subscriberId,\n      subscriberHash,\n      backendUrl,\n      socketUrl,\n      props.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\nfunction buildSubscriber(options: InboxProps): Subscriber {\n  let subscriberObj: Subscriber;\n\n  if (options.subscriber) {\n    subscriberObj = typeof options.subscriber === 'string' ? { subscriberId: options.subscriber } : options.subscriber;\n  } else {\n    subscriberObj = { subscriberId: options.subscriberId as string };\n  }\n\n  return subscriberObj;\n}\n"],"mappings":"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","names":["React"]}

package/dist/cjs/components/NovuUI.cjs

@@ -27,31 +27,80 @@ var import_ui = require("@novu/js/ui");
 var import_react = require("react");
 var import_NovuUIContext = require("../context/NovuUIContext.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) => {
+  if (!child) {
+    return null;
+  }
+  let node = child;
+  while (node) {
+    if (node instanceof Element && node.shadowRoot) {
+      return node.shadowRoot;
+    }
+    if (node instanceof ShadowRoot) {
+      return node;
+    }
+    node = node.parentNode;
+    if (!node || node === document) {
+      break;
+    }
+  }
+  return null;
+};
 var NovuUI = ({ options, novu, children }) => {
-  const optionsRef = (0, import_useDataRef.useDataRef)({ ...options, novu });
+  const shadowRootDetector = (0, import_react.useRef)(null);
+  const { mountElement } = (0, import_RendererContext.useRenderer)();
+  const adaptedAppearanceForUpdate = (0, import_react.useMemo)(
+    () => (0, import_appearance.adaptAppearanceForJs)(options.appearance || {}, mountElement),
+    [options.appearance, mountElement]
+  );
+  const adaptedOptions = (0, import_react.useMemo)(() => {
+    return {
+      ...options,
+      appearance: adaptedAppearanceForUpdate,
+      novu
+    };
+  }, [options, novu, adaptedAppearanceForUpdate]);
+  const optionsRef = (0, import_useDataRef.useDataRef)(adaptedOptions);
   const [novuUI, setNovuUI] = (0, import_react.useState)();
   (0, import_react.useEffect)(() => {
-    const novu2 = new import_ui.NovuUI(optionsRef.current);
-    setNovuUI(novu2);
+    const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);
+    const instance = new import_ui.NovuUI({
+      ...optionsRef.current,
+      container: optionsRef.current.container ?? parentShadowRoot
+    });
+    setNovuUI(instance);
     return () => {
-      novu2.unmount();
+      instance.unmount();
     };
   }, []);
   (0, import_react.useEffect)(() => {
     if (!novuUI) {
       return;
     }
-    novuUI.updateAppearance(options.appearance);
+    const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);
+    novuUI.updateContainer(options.container ?? parentShadowRoot);
+    novuUI.updateAppearance(adaptedAppearanceForUpdate);
     novuUI.updateLocalization(options.localization);
     novuUI.updateTabs(options.tabs);
     novuUI.updateOptions(options.options);
     novuUI.updateRouterPush(options.routerPush);
-  }, [options]);
-  if (!novuUI) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NovuUIContext.NovuUIProvider, { value: { novuUI }, children });
+  }, [
+    shadowRootDetector,
+    novuUI,
+    adaptedAppearanceForUpdate,
+    options.localization,
+    options.tabs,
+    options.options,
+    options.routerPush
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ShadowRootDetector.ShadowRootDetector, { ref: shadowRootDetector }),
+    novuUI && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NovuUIContext.NovuUIProvider, { value: { novuUI }, children })
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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 } from '@novu/js/ui';\nimport { NovuUI as NovuUIClass } from '@novu/js/ui';\nimport React, { useEffect, useState } from 'react';\nimport { NovuUIProvider } from '../context/NovuUIContext';\nimport { useDataRef } from '../hooks/internal/useDataRef';\n\ntype RendererProps = React.PropsWithChildren<{\n  options: NovuUIOptions;\n  novu?: Novu;\n}>;\n\nexport const NovuUI = ({ options, novu, children }: RendererProps) => {\n  const optionsRef = useDataRef({ ...options, novu });\n  const [novuUI, setNovuUI] = useState<NovuUIClass | undefined>();\n\n  useEffect(() => {\n    const novu = new NovuUIClass(optionsRef.current);\n    setNovuUI(novu);\n\n    return () => {\n      novu.unmount();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!novuUI) {\n      return;\n    }\n\n    novuUI.updateAppearance(options.appearance);\n    novuUI.updateLocalization(options.localization);\n    novuUI.updateTabs(options.tabs);\n    novuUI.updateOptions(options.options);\n    novuUI.updateRouterPush(options.routerPush);\n  }, [options]);\n\n  if (!novuUI) {\n    return null;\n  }\n\n  return <NovuUIProvider value={{ novuUI }}>{children}</NovuUIProvider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gBAAsC;AACtC,mBAA2C;AAC3C,2BAA+B;AAC/B,wBAA2B;AAoClB;AA7BF,IAAM,SAAS,CAAC,EAAE,SAAS,MAAM,SAAS,MAAqB;AACpE,QAAM,iBAAa,8BAAW,EAAE,GAAG,SAAS,KAAK,CAAC;AAClD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkC;AAE9D,8BAAU,MAAM;AACd,UAAMA,QAAO,IAAI,UAAAC,OAAY,WAAW,OAAO;AAC/C,cAAUD,KAAI;AAEd,WAAO,MAAM;AACX,MAAAA,MAAK,QAAQ;AAAA,IACf;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,WAAO,iBAAiB,QAAQ,UAAU;AAC1C,WAAO,mBAAmB,QAAQ,YAAY;AAC9C,WAAO,WAAW,QAAQ,IAAI;AAC9B,WAAO,cAAc,QAAQ,OAAO;AACpC,WAAO,iBAAiB,QAAQ,UAAU;AAAA,EAC5C,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,EACT;AAEA,SAAO,4CAAC,uCAAe,OAAO,EAAE,OAAO,GAAI,UAAS;AACtD;","names":["novu","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 { 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"]}

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

@@ -2,11 +2,15 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Novu } from '@novu/js';
 import { NovuUIOptions } from '@novu/js/ui';
 import React__default from 'react';
+import { ReactAppearance } from '../utils/types.cjs';
 
+type NovuUIProps = Omit<NovuUIOptions, 'appearance'> & {
+    appearance?: ReactAppearance;
+};
 type RendererProps = React__default.PropsWithChildren<{
-    options: NovuUIOptions;
+    options: NovuUIProps;
     novu?: Novu;
 }>;
-declare const NovuUI: ({ options, novu, children }: RendererProps) => react_jsx_runtime.JSX.Element | null;
+declare const NovuUI: ({ options, novu, children }: RendererProps) => react_jsx_runtime.JSX.Element;
 
 export { NovuUI };

package/dist/cjs/components/ShadowRootDetector.cjs

@@ -0,0 +1,63 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ShadowRootDetector.tsx
+var ShadowRootDetector_exports = {};
+__export(ShadowRootDetector_exports, {
+  ShadowRootDetector: () => ShadowRootDetector
+});
+module.exports = __toCommonJS(ShadowRootDetector_exports);
+var import_react = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var ShadowRootDetector = import_react.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      style: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        borderWidth: 0
+      },
+      "data-shadow-root-detector": true,
+      ...props
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ShadowRootDetector
+});
+//# sourceMappingURL=ShadowRootDetector.cjs.map

package/dist/cjs/components/ShadowRootDetector.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ShadowRootDetector.tsx"],"sourcesContent":["import React from 'react';\n\nexport const ShadowRootDetector = React.forwardRef<HTMLDivElement>((props, ref) => {\n  return (\n    <div\n      ref={ref}\n      style={{\n        position: 'absolute',\n        width: 1,\n        height: 1,\n        padding: 0,\n        margin: -1,\n        overflow: 'hidden',\n        clip: 'rect(0, 0, 0, 0)',\n        whiteSpace: 'nowrap',\n        borderWidth: 0,\n      }}\n      data-shadow-root-detector\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAId;AAFG,IAAM,qBAAqB,aAAAA,QAAM,WAA2B,CAAC,OAAO,QAAQ;AACjF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,UAAU;AAAA,QACV,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,aAAa;AAAA,MACf;AAAA,MACA,6BAAyB;AAAA,MACxB,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["React"]}

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

@@ -0,0 +1,5 @@
+import React__default from 'react';
+
+declare const ShadowRootDetector: React__default.ForwardRefExoticComponent<React__default.RefAttributes<HTMLDivElement>>;
+
+export { ShadowRootDetector };

package/dist/cjs/hooks/NovuProvider.cjs

@@ -29,7 +29,7 @@ module.exports = __toCommonJS(NovuProvider_exports);
 var import_js = require("@novu/js");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var version = "3.3.1";
+var version = "3.5.0-rc.1";
 var name = "@novu/react";
 var baseUserAgent = `${name}@${version}`;
 var NovuContext = (0, import_react.createContext)(void 0);

package/dist/cjs/hooks/useNotifications.cjs

@@ -27,7 +27,7 @@ var import_react = require("react");
 var import_js = require("@novu/js");
 var import_NovuProvider = require("./NovuProvider.cjs");
 var useNotifications = (props) => {
-  const { tags, read, archived = false, snoozed = false, limit, onSuccess, onError } = props || {};
+  const { tags, data: dataFilter, read, archived = false, snoozed = false, limit, onSuccess, onError } = props || {};
   const filterRef = (0, import_react.useRef)(void 0);
   const { notifications, on } = (0, import_NovuProvider.useNovu)();
   const [data, setData] = (0, import_react.useState)();
@@ -51,14 +51,14 @@ var useNotifications = (props) => {
     };
   }, []);
   (0, import_react.useEffect)(() => {
-    const newFilter = { tags, read, archived, snoozed };
+    const newFilter = { tags, data: dataFilter, read, archived, snoozed };
     if (filterRef.current && (0, import_js.isSameFilter)(filterRef.current, newFilter)) {
       return;
     }
     notifications.clearCache({ filter: filterRef.current });
     filterRef.current = newFilter;
     fetchNotifications({ refetch: true });
-  }, [tags, read, archived, snoozed]);
+  }, [tags, dataFilter, read, archived, snoozed]);
   const fetchNotifications = async (options) => {
     if (options == null ? void 0 : options.refetch) {
       setError(void 0);
@@ -68,6 +68,7 @@ var useNotifications = (props) => {
     setIsFetching(true);
     const response = await notifications.list({
       tags,
+      data: dataFilter,
       read,
       archived,
       snoozed,
@@ -86,7 +87,7 @@ var useNotifications = (props) => {
     setIsFetching(false);
   };
   const refetch = () => {
-    notifications.clearCache({ filter: { tags, read, archived, snoozed } });
+    notifications.clearCache({ filter: { tags, read, archived, snoozed, data: dataFilter } });
     return fetchNotifications({ refetch: true });
   };
   const fetchMore = async () => {
@@ -94,13 +95,13 @@ var useNotifications = (props) => {
     return fetchNotifications();
   };
   const readAll = async () => {
-    return await notifications.readAll({ tags });
+    return await notifications.readAll({ tags, data: dataFilter });
   };
   const archiveAll = async () => {
-    return await notifications.archiveAll({ tags });
+    return await notifications.archiveAll({ tags, data: dataFilter });
   };
   const archiveAllRead = async () => {
-    return await notifications.archiveAllRead({ tags });
+    return await notifications.archiveAllRead({ tags, data: dataFilter });
   };
   return {
     readAll,

package/dist/cjs/hooks/useNotifications.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useNotifications.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport { ListNotificationsResponse, Notification, NovuError, isSameFilter, NotificationFilter } from '@novu/js';\nimport { useNovu } from './NovuProvider';\n\nexport type UseNotificationsProps = {\n  tags?: string[];\n  read?: boolean;\n  archived?: boolean;\n  snoozed?: boolean;\n  limit?: number;\n  onSuccess?: (data: Notification[]) => void;\n  onError?: (error: NovuError) => void;\n};\n\nexport type UseNotificationsResult = {\n  notifications?: Notification[];\n  error?: NovuError;\n  isLoading: boolean;\n  isFetching: boolean;\n  hasMore: boolean;\n  readAll: () => Promise<{\n    data?: void | undefined;\n    error?: NovuError | undefined;\n  }>;\n  archiveAll: () => Promise<{\n    data?: void | undefined;\n    error?: NovuError | undefined;\n  }>;\n  archiveAllRead: () => Promise<{\n    data?: void | undefined;\n    error?: NovuError | undefined;\n  }>;\n  refetch: () => Promise<void>;\n  fetchMore: () => Promise<void>;\n};\n\nexport const useNotifications = (props?: UseNotificationsProps): UseNotificationsResult => {\n  const { tags, read, archived = false, snoozed = false, limit, onSuccess, onError } = props || {};\n  const filterRef = useRef<NotificationFilter | undefined>(undefined);\n  const { notifications, on } = useNovu();\n  const [data, setData] = useState<Array<Notification>>();\n  const [error, setError] = useState<NovuError>();\n  const [isLoading, setIsLoading] = useState(true);\n  const [isFetching, setIsFetching] = useState(false);\n  const [hasMore, setHasMore] = useState(false);\n  const length = data?.length;\n  const after = length ? data[length - 1].id : undefined;\n\n  const sync = (event: { data?: ListNotificationsResponse }) => {\n    if (!event.data || (filterRef.current && !isSameFilter(filterRef.current, event.data.filter))) {\n      return;\n    }\n    setData(event.data.notifications);\n    setHasMore(event.data.hasMore);\n  };\n\n  useEffect(() => {\n    const cleanup = on('notifications.list.updated', sync);\n\n    return () => {\n      cleanup();\n    };\n  }, []);\n\n  useEffect(() => {\n    const newFilter = { tags, read, archived, snoozed };\n    if (filterRef.current && isSameFilter(filterRef.current, newFilter)) {\n      return;\n    }\n    notifications.clearCache({ filter: filterRef.current });\n    filterRef.current = newFilter;\n\n    fetchNotifications({ refetch: true });\n  }, [tags, read, archived, snoozed]);\n\n  const fetchNotifications = async (options?: { refetch: boolean }) => {\n    if (options?.refetch) {\n      setError(undefined);\n      setIsLoading(true);\n      setIsFetching(false);\n    }\n    setIsFetching(true);\n    const response = await notifications.list({\n      tags,\n      read,\n      archived,\n      snoozed,\n      limit,\n      after: options?.refetch ? undefined : after,\n    });\n    if (response.error) {\n      setError(response.error);\n      onError?.(response.error);\n    } else {\n      onSuccess?.(response.data!.notifications);\n      setData(response.data!.notifications);\n      setHasMore(response.data!.hasMore);\n    }\n    setIsLoading(false);\n    setIsFetching(false);\n  };\n\n  const refetch = () => {\n    notifications.clearCache({ filter: { tags, read, archived, snoozed } });\n\n    return fetchNotifications({ refetch: true });\n  };\n\n  const fetchMore = async () => {\n    if (!hasMore || isFetching) return;\n\n    return fetchNotifications();\n  };\n\n  const readAll = async () => {\n    return await notifications.readAll({ tags });\n  };\n\n  const archiveAll = async () => {\n    return await notifications.archiveAll({ tags });\n  };\n\n  const archiveAllRead = async () => {\n    return await notifications.archiveAllRead({ tags });\n  };\n\n  return {\n    readAll,\n    archiveAll,\n    archiveAllRead,\n    notifications: data,\n    error,\n    isLoading,\n    isFetching,\n    refetch,\n    fetchMore,\n    hasMore,\n  };\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/hooks/useNotifications.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport { ListNotificationsResponse, Notification, NovuError, isSameFilter, NotificationFilter } from '@novu/js';\nimport { useNovu } from './NovuProvider';\n\nexport type UseNotificationsProps = {\n  tags?: string[];\n  data?: Record<string, unknown>;\n  read?: boolean;\n  archived?: boolean;\n  snoozed?: boolean;\n  limit?: number;\n  onSuccess?: (data: Notification[]) => void;\n  onError?: (error: NovuError) => void;\n};\n\nexport type UseNotificationsResult = {\n  notifications?: Notification[];\n  error?: NovuError;\n  isLoading: boolean;\n  isFetching: boolean;\n  hasMore: boolean;\n  readAll: () => Promise<{\n    data?: void | undefined;\n    error?: NovuError | undefined;\n  }>;\n  archiveAll: () => Promise<{\n    data?: void | undefined;\n    error?: NovuError | undefined;\n  }>;\n  archiveAllRead: () => Promise<{\n    data?: void | undefined;\n    error?: NovuError | undefined;\n  }>;\n  refetch: () => Promise<void>;\n  fetchMore: () => Promise<void>;\n};\n\nexport const useNotifications = (props?: UseNotificationsProps): UseNotificationsResult => {\n  const { tags, data: dataFilter, read, archived = false, snoozed = false, limit, onSuccess, onError } = props || {};\n  const filterRef = useRef<NotificationFilter | undefined>(undefined);\n  const { notifications, on } = useNovu();\n  const [data, setData] = useState<Array<Notification>>();\n  const [error, setError] = useState<NovuError>();\n  const [isLoading, setIsLoading] = useState(true);\n  const [isFetching, setIsFetching] = useState(false);\n  const [hasMore, setHasMore] = useState(false);\n  const length = data?.length;\n  const after = length ? data[length - 1].id : undefined;\n\n  const sync = (event: { data?: ListNotificationsResponse }) => {\n    if (!event.data || (filterRef.current && !isSameFilter(filterRef.current, event.data.filter))) {\n      return;\n    }\n    setData(event.data.notifications);\n    setHasMore(event.data.hasMore);\n  };\n\n  useEffect(() => {\n    const cleanup = on('notifications.list.updated', sync);\n\n    return () => {\n      cleanup();\n    };\n  }, []);\n\n  useEffect(() => {\n    const newFilter = { tags, data: dataFilter, read, archived, snoozed };\n    if (filterRef.current && isSameFilter(filterRef.current, newFilter)) {\n      return;\n    }\n    notifications.clearCache({ filter: filterRef.current });\n    filterRef.current = newFilter;\n\n    fetchNotifications({ refetch: true });\n  }, [tags, dataFilter, read, archived, snoozed]);\n\n  const fetchNotifications = async (options?: { refetch: boolean }) => {\n    if (options?.refetch) {\n      setError(undefined);\n      setIsLoading(true);\n      setIsFetching(false);\n    }\n    setIsFetching(true);\n    const response = await notifications.list({\n      tags,\n      data: dataFilter,\n      read,\n      archived,\n      snoozed,\n      limit,\n      after: options?.refetch ? undefined : after,\n    });\n    if (response.error) {\n      setError(response.error);\n      onError?.(response.error);\n    } else {\n      onSuccess?.(response.data!.notifications);\n      setData(response.data!.notifications);\n      setHasMore(response.data!.hasMore);\n    }\n    setIsLoading(false);\n    setIsFetching(false);\n  };\n\n  const refetch = () => {\n    notifications.clearCache({ filter: { tags, read, archived, snoozed, data: dataFilter } });\n\n    return fetchNotifications({ refetch: true });\n  };\n\n  const fetchMore = async () => {\n    if (!hasMore || isFetching) return;\n\n    return fetchNotifications();\n  };\n\n  const readAll = async () => {\n    return await notifications.readAll({ tags, data: dataFilter });\n  };\n\n  const archiveAll = async () => {\n    return await notifications.archiveAll({ tags, data: dataFilter });\n  };\n\n  const archiveAllRead = async () => {\n    return await notifications.archiveAllRead({ tags, data: dataFilter });\n  };\n\n  return {\n    readAll,\n    archiveAll,\n    archiveAllRead,\n    notifications: data,\n    error,\n    isLoading,\n    isFetching,\n    refetch,\n    fetchMore,\n    hasMore,\n  };\n};\n"],"mappings":"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","names":[]}

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

@@ -2,6 +2,7 @@ import { Notification, NovuError } from '@novu/js';
 
 type UseNotificationsProps = {
     tags?: string[];
+    data?: Record<string, unknown>;
     read?: boolean;
     archived?: boolean;
     snoozed?: boolean;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export type {\n  FiltersCountResponse,\n  ListNotificationsResponse,\n  NovuError,\n  Preference,\n  PreferencesResponse,\n  ChannelPreference,\n  Notification,\n  ChannelType,\n  InboxNotification,\n  NotificationFilter,\n  NotificationStatus,\n  NovuOptions,\n  PreferenceLevel,\n  WebSocketEvent,\n  EventHandler,\n  Events,\n  SocketEventNames,\n} from '@novu/js';\n\nexport type {\n  Appearance,\n  AppearanceKey,\n  Elements,\n  ElementStyles,\n  Localization,\n  LocalizationKey,\n  NotificationActionClickHandler,\n  NotificationClickHandler,\n  NotificationRenderer,\n  PreferencesFilter,\n  RouterPush,\n  Tab,\n  Variables,\n} from '@novu/js/ui';\n\nexport { Inbox, Bell, InboxContent, Notifications, NovuProvider, Preferences } from './components';\nexport { useNovu, useCounts, useNotifications, usePreferences } from './hooks';\n\nexport type { InboxProps, BellProps, InboxContentProps, NotificationProps, NovuProviderProps } from './components';\n\nexport type {\n  UseCountsProps,\n  UseCountsResult,\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from './hooks';\n\nexport type {\n  NotificationsRenderer,\n  SubjectRenderer,\n  BodyRenderer,\n  BellRenderer,\n  DefaultInboxProps,\n  BaseProps,\n  NotificationRendererProps,\n  SubjectBodyRendererProps,\n  NoRendererProps,\n  DefaultProps,\n  WithChildrenProps,\n} from './utils/types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCA,wBAAoF;AACpF,mBAAqE;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export type {\n  FiltersCountResponse,\n  ListNotificationsResponse,\n  NovuError,\n  Preference,\n  PreferencesResponse,\n  ChannelPreference,\n  Notification,\n  ChannelType,\n  InboxNotification,\n  NotificationFilter,\n  NotificationStatus,\n  NovuOptions,\n  PreferenceLevel,\n  WebSocketEvent,\n  EventHandler,\n  Events,\n  SocketEventNames,\n} from '@novu/js';\n\nexport type {\n  Appearance,\n  AppearanceKey,\n  Elements,\n  ElementStyles,\n  Localization,\n  LocalizationKey,\n  NotificationActionClickHandler,\n  NotificationClickHandler,\n  NotificationRenderer,\n  PreferencesFilter,\n  PreferenceGroups,\n  RouterPush,\n  Tab,\n  Variables,\n} from '@novu/js/ui';\n\nexport { Inbox, Bell, InboxContent, Notifications, NovuProvider, Preferences } from './components';\nexport { useNovu, useCounts, useNotifications, usePreferences } from './hooks';\n\nexport type { InboxProps, BellProps, InboxContentProps, NotificationProps, NovuProviderProps } from './components';\n\nexport type {\n  UseCountsProps,\n  UseCountsResult,\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from './hooks';\n\nexport type {\n  NotificationsRenderer,\n  SubjectRenderer,\n  BodyRenderer,\n  BellRenderer,\n  DefaultInboxProps,\n  BaseProps,\n  NotificationRendererProps,\n  SubjectBodyRendererProps,\n  NoRendererProps,\n  DefaultProps,\n  WithChildrenProps,\n} from './utils/types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCA,wBAAoF;AACpF,mBAAqE;","names":[]}

package/dist/cjs/index.d.cts

@@ -1,5 +1,5 @@
 export { ChannelPreference, ChannelType, EventHandler, Events, FiltersCountResponse, InboxNotification, ListNotificationsResponse, Notification, NotificationFilter, NotificationStatus, NovuError, NovuOptions, Preference, PreferenceLevel, PreferencesResponse, SocketEventNames, WebSocketEvent } from '@novu/js';
-export { Appearance, AppearanceKey, ElementStyles, Elements, Localization, LocalizationKey, NotificationActionClickHandler, NotificationClickHandler, NotificationRenderer, PreferencesFilter, RouterPush, Tab, Variables } from '@novu/js/ui';
+export { Appearance, AppearanceKey, ElementStyles, Elements, Localization, LocalizationKey, NotificationActionClickHandler, NotificationClickHandler, NotificationRenderer, PreferenceGroups, PreferencesFilter, RouterPush, Tab, Variables } from '@novu/js/ui';
 export { Bell, BellProps } from './components/Bell.cjs';
 export { Inbox, InboxProps } from './components/Inbox.cjs';
 export { Preferences } from './components/Preferences.cjs';

package/dist/cjs/server/index.cjs

@@ -32,7 +32,10 @@ __export(server_exports, {
   usePreferences: () => usePreferences
 });
 module.exports = __toCommonJS(server_exports);
+var import_ShadowRootDetector = require("../components/ShadowRootDetector.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
 function Inbox(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ShadowRootDetector.ShadowRootDetector, {});
 }
 function InboxContent() {
 }

package/dist/cjs/server/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/server/index.tsx"],"sourcesContent":["import type {\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from '../hooks';\nimport type { UseCountsProps, UseCountsResult } from '../hooks/useCounts';\nimport type { InboxProps } from '../components/Inbox';\nimport type { NovuProviderProps } from '../hooks/NovuProvider';\n\n/**\n * Exporting all components from the components folder\n * as empty functions to fix build errors in SSR\n * This will be replaced with actual components\n * when we implement the SSR components in @novu/js/ui\n */\nexport function Inbox(props: InboxProps) {}\n\nexport function InboxContent() {}\n\nexport function Notifications() {}\n\nexport function Preferences() {}\n\nexport function Bell() {}\n\nexport function NovuProvider(props: NovuProviderProps) {}\n\nexport function useNovu() {\n  return null;\n}\n\nexport function useCounts(_: UseCountsProps): UseCountsResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    refetch: () => Promise.resolve(),\n  };\n}\n\nexport function useNotifications(_: UseNotificationsProps): UseNotificationsResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    hasMore: false,\n    readAll: () => Promise.resolve({ data: undefined, error: undefined }),\n    archiveAll: () => Promise.resolve({ data: undefined, error: undefined }),\n    archiveAllRead: () => Promise.resolve({ data: undefined, error: undefined }),\n    refetch: () => Promise.resolve(),\n    fetchMore: () => Promise.resolve(),\n  };\n}\n\nexport function usePreferences(_: UsePreferencesProps): UsePreferencesResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    refetch: () => Promise.resolve(),\n  };\n}\n\nexport type {\n  FiltersCountResponse,\n  ListNotificationsResponse,\n  NovuError,\n  Preference,\n  ChannelPreference,\n  Notification,\n  ChannelType,\n  InboxNotification,\n  NotificationFilter,\n  NotificationStatus,\n  NovuOptions,\n  PreferenceLevel,\n} from '@novu/js';\n\nexport type {\n  Appearance,\n  AppearanceKey,\n  Elements,\n  ElementStyles,\n  Localization,\n  LocalizationKey,\n  NotificationActionClickHandler,\n  NotificationClickHandler,\n  NotificationRenderer,\n  PreferencesFilter,\n  RouterPush,\n  Tab,\n  Variables,\n} from '@novu/js/ui';\n\nexport type { InboxProps, BellProps, InboxContentProps, NotificationProps, NovuProviderProps } from '../components';\n\nexport type {\n  UseCountsProps,\n  UseCountsResult,\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from '../hooks';\n\nexport type {\n  NotificationsRenderer,\n  SubjectRenderer,\n  BodyRenderer,\n  BellRenderer,\n  DefaultInboxProps,\n  BaseProps,\n  NotificationRendererProps,\n  SubjectBodyRendererProps,\n  NoRendererProps,\n  DefaultProps,\n  WithChildrenProps,\n} from '../utils/types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBO,SAAS,MAAM,OAAmB;AAAC;AAEnC,SAAS,eAAe;AAAC;AAEzB,SAAS,gBAAgB;AAAC;AAE1B,SAAS,cAAc;AAAC;AAExB,SAAS,OAAO;AAAC;AAEjB,SAAS,aAAa,OAA0B;AAAC;AAEjD,SAAS,UAAU;AACxB,SAAO;AACT;AAEO,SAAS,UAAU,GAAoC;AAC5D,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,QAAQ;AAAA,EACjC;AACF;AAEO,SAAS,iBAAiB,GAAkD;AACjF,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IACpE,YAAY,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IACvE,gBAAgB,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IAC3E,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,WAAW,MAAM,QAAQ,QAAQ;AAAA,EACnC;AACF;AAEO,SAAS,eAAe,GAA8C;AAC3E,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,QAAQ;AAAA,EACjC;AACF;","names":[]}
+{"version":3,"sources":["../../../src/server/index.tsx"],"sourcesContent":["import type {\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from '../hooks';\nimport type { UseCountsProps, UseCountsResult } from '../hooks/useCounts';\nimport type { InboxProps } from '../components/Inbox';\nimport type { NovuProviderProps } from '../hooks/NovuProvider';\nimport { ShadowRootDetector } from '../components/ShadowRootDetector';\n\n/**\n * Exporting all components from the components folder\n * as empty functions to fix build errors in SSR\n * This will be replaced with actual components\n * when we implement the SSR components in @novu/js/ui\n */\nexport function Inbox(props: InboxProps) {\n  return <ShadowRootDetector />;\n}\n\nexport function InboxContent() {}\n\nexport function Notifications() {}\n\nexport function Preferences() {}\n\nexport function Bell() {}\n\nexport function NovuProvider(props: NovuProviderProps) {}\n\nexport function useNovu() {\n  return null;\n}\n\nexport function useCounts(_: UseCountsProps): UseCountsResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    refetch: () => Promise.resolve(),\n  };\n}\n\nexport function useNotifications(_: UseNotificationsProps): UseNotificationsResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    hasMore: false,\n    readAll: () => Promise.resolve({ data: undefined, error: undefined }),\n    archiveAll: () => Promise.resolve({ data: undefined, error: undefined }),\n    archiveAllRead: () => Promise.resolve({ data: undefined, error: undefined }),\n    refetch: () => Promise.resolve(),\n    fetchMore: () => Promise.resolve(),\n  };\n}\n\nexport function usePreferences(_: UsePreferencesProps): UsePreferencesResult {\n  return {\n    isLoading: false,\n    isFetching: false,\n    refetch: () => Promise.resolve(),\n  };\n}\n\nexport type {\n  FiltersCountResponse,\n  ListNotificationsResponse,\n  NovuError,\n  Preference,\n  ChannelPreference,\n  Notification,\n  ChannelType,\n  InboxNotification,\n  NotificationFilter,\n  NotificationStatus,\n  NovuOptions,\n  PreferenceLevel,\n} from '@novu/js';\n\nexport type {\n  Appearance,\n  AppearanceKey,\n  Elements,\n  ElementStyles,\n  Localization,\n  LocalizationKey,\n  NotificationActionClickHandler,\n  NotificationClickHandler,\n  NotificationRenderer,\n  PreferencesFilter,\n  PreferenceGroups,\n  RouterPush,\n  Tab,\n  Variables,\n} from '@novu/js/ui';\n\nexport type { InboxProps, BellProps, InboxContentProps, NotificationProps, NovuProviderProps } from '../components';\n\nexport type {\n  UseCountsProps,\n  UseCountsResult,\n  UseNotificationsProps,\n  UseNotificationsResult,\n  UsePreferencesProps,\n  UsePreferencesResult,\n} from '../hooks';\n\nexport type {\n  NotificationsRenderer,\n  SubjectRenderer,\n  BodyRenderer,\n  BellRenderer,\n  DefaultInboxProps,\n  BaseProps,\n  NotificationRendererProps,\n  SubjectBodyRendererProps,\n  NoRendererProps,\n  DefaultProps,\n  WithChildrenProps,\n} from '../utils/types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,gCAAmC;AAS1B;AADF,SAAS,MAAM,OAAmB;AACvC,SAAO,4CAAC,gDAAmB;AAC7B;AAEO,SAAS,eAAe;AAAC;AAEzB,SAAS,gBAAgB;AAAC;AAE1B,SAAS,cAAc;AAAC;AAExB,SAAS,OAAO;AAAC;AAEjB,SAAS,aAAa,OAA0B;AAAC;AAEjD,SAAS,UAAU;AACxB,SAAO;AACT;AAEO,SAAS,UAAU,GAAoC;AAC5D,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,QAAQ;AAAA,EACjC;AACF;AAEO,SAAS,iBAAiB,GAAkD;AACjF,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IACpE,YAAY,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IACvE,gBAAgB,MAAM,QAAQ,QAAQ,EAAE,MAAM,QAAW,OAAO,OAAU,CAAC;AAAA,IAC3E,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,WAAW,MAAM,QAAQ,QAAQ;AAAA,EACnC;AACF;AAEO,SAAS,eAAe,GAA8C;AAC3E,SAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,QAAQ;AAAA,EACjC;AACF;","names":[]}

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

@@ -1,15 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UseNotificationsProps, UseNotificationsResult } from '../hooks/useNotifications.cjs';
 import { UsePreferencesProps, UsePreferencesResult } from '../hooks/usePreferences.cjs';
 import { UseCountsProps, UseCountsResult } from '../hooks/useCounts.cjs';
 import { NovuProviderProps } from '../hooks/NovuProvider.cjs';
 import { InboxProps } from '../components/Inbox.cjs';
 export { ChannelPreference, ChannelType, FiltersCountResponse, InboxNotification, ListNotificationsResponse, Notification, NotificationFilter, NotificationStatus, NovuError, NovuOptions, Preference, PreferenceLevel } from '@novu/js';
-export { Appearance, AppearanceKey, ElementStyles, Elements, Localization, LocalizationKey, NotificationActionClickHandler, NotificationClickHandler, NotificationRenderer, PreferencesFilter, RouterPush, Tab, Variables } from '@novu/js/ui';
+export { Appearance, AppearanceKey, ElementStyles, Elements, Localization, LocalizationKey, NotificationActionClickHandler, NotificationClickHandler, NotificationRenderer, PreferenceGroups, PreferencesFilter, RouterPush, Tab, Variables } from '@novu/js/ui';
 export { BellProps } from '../components/Bell.cjs';
 export { NotificationProps } from '../components/Notifications.cjs';
 export { InboxContentProps } from '../components/InboxContent.cjs';
 export { BaseProps, BellRenderer, BodyRenderer, DefaultInboxProps, DefaultProps, NoRendererProps, NotificationRendererProps, NotificationsRenderer, SubjectBodyRendererProps, SubjectRenderer, WithChildrenProps } from '../utils/types.cjs';
-import 'react/jsx-runtime';
 import 'react';
 
 /**
@@ -18,7 +18,7 @@ import 'react';
  * This will be replaced with actual components
  * when we implement the SSR components in @novu/js/ui
  */
-declare function Inbox(props: InboxProps): void;
+declare function Inbox(props: InboxProps): react_jsx_runtime.JSX.Element;
 declare function InboxContent(): void;
 declare function Notifications(): void;
 declare function Preferences(): void;