@novu/react 3.3.0 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Inbox.cjs +65 -61
- package/dist/cjs/components/Inbox.cjs.map +1 -1
- package/dist/cjs/components/NovuUI.cjs +59 -10
- package/dist/cjs/components/NovuUI.cjs.map +1 -1
- package/dist/cjs/components/NovuUI.d.cts +6 -2
- package/dist/cjs/components/ShadowRootDetector.cjs +63 -0
- package/dist/cjs/components/ShadowRootDetector.cjs.map +1 -0
- package/dist/cjs/components/ShadowRootDetector.d.cts +5 -0
- package/dist/cjs/hooks/NovuProvider.cjs +1 -1
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/index.d.cts +1 -1
- package/dist/cjs/server/index.cjs +3 -0
- package/dist/cjs/server/index.cjs.map +1 -1
- package/dist/cjs/server/index.d.cts +3 -3
- package/dist/cjs/utils/appearance.cjs +53 -0
- package/dist/cjs/utils/appearance.cjs.map +1 -0
- package/dist/cjs/utils/appearance.d.cts +10 -0
- package/dist/cjs/utils/types.cjs.map +1 -1
- package/dist/cjs/utils/types.d.cts +18 -3
- package/dist/esm/components/Inbox.js +65 -61
- package/dist/esm/components/Inbox.js.map +1 -1
- package/dist/esm/components/NovuUI.d.ts +6 -2
- package/dist/esm/components/NovuUI.js +61 -12
- package/dist/esm/components/NovuUI.js.map +1 -1
- package/dist/esm/components/ShadowRootDetector.d.ts +5 -0
- package/dist/esm/components/ShadowRootDetector.js +28 -0
- package/dist/esm/components/ShadowRootDetector.js.map +1 -0
- package/dist/esm/hooks/NovuProvider.js +1 -1
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/server/index.d.ts +3 -3
- package/dist/esm/server/index.js +3 -0
- package/dist/esm/server/index.js.map +1 -1
- package/dist/esm/utils/appearance.d.ts +10 -0
- package/dist/esm/utils/appearance.js +28 -0
- package/dist/esm/utils/appearance.js.map +1 -0
- package/dist/esm/utils/types.d.ts +18 -3
- package/package.json +9 -9
|
@@ -41,7 +41,7 @@ var import_NovuProvider = require("../hooks/NovuProvider.cjs");
|
|
|
41
41
|
var import_NovuUI = require("./NovuUI.cjs");
|
|
42
42
|
var import_Renderer = require("./Renderer.cjs");
|
|
43
43
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
44
|
-
var
|
|
44
|
+
var DefaultInbox = (props) => {
|
|
45
45
|
const {
|
|
46
46
|
open,
|
|
47
47
|
renderNotification,
|
|
@@ -103,7 +103,6 @@ var _DefaultInbox = (props) => {
|
|
|
103
103
|
);
|
|
104
104
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { mount });
|
|
105
105
|
};
|
|
106
|
-
var DefaultInbox = (0, import_Renderer.withRenderer)(_DefaultInbox);
|
|
107
106
|
var Inbox = import_react.default.memo((props) => {
|
|
108
107
|
const { applicationIdentifier, subscriberHash, backendUrl, socketUrl } = props;
|
|
109
108
|
const novu = (0, import_NovuProvider.useUnsafeNovu)();
|
|
@@ -123,65 +122,55 @@ var Inbox = import_react.default.memo((props) => {
|
|
|
123
122
|
}
|
|
124
123
|
);
|
|
125
124
|
});
|
|
126
|
-
var InboxChild =
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
appearance,
|
|
130
|
-
tabs,
|
|
131
|
-
preferencesFilter,
|
|
132
|
-
routerPush,
|
|
133
|
-
applicationIdentifier,
|
|
134
|
-
subscriberId,
|
|
135
|
-
subscriberHash,
|
|
136
|
-
backendUrl,
|
|
137
|
-
socketUrl
|
|
138
|
-
} = props;
|
|
139
|
-
const novu = (0, import_NovuProvider.useNovu)();
|
|
140
|
-
const options = (0, import_react.useMemo)(() => {
|
|
141
|
-
return {
|
|
125
|
+
var InboxChild = (0, import_Renderer.withRenderer)(
|
|
126
|
+
import_react.default.memo((props) => {
|
|
127
|
+
const {
|
|
142
128
|
localization,
|
|
143
129
|
appearance,
|
|
144
130
|
tabs,
|
|
145
131
|
preferencesFilter,
|
|
132
|
+
preferenceGroups,
|
|
146
133
|
routerPush,
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
134
|
+
applicationIdentifier,
|
|
135
|
+
subscriberId,
|
|
136
|
+
subscriberHash,
|
|
137
|
+
backendUrl,
|
|
138
|
+
socketUrl
|
|
139
|
+
} = props;
|
|
140
|
+
const novu = (0, import_NovuProvider.useNovu)();
|
|
141
|
+
const options = (0, import_react.useMemo)(() => {
|
|
142
|
+
return {
|
|
143
|
+
localization,
|
|
144
|
+
appearance,
|
|
145
|
+
tabs,
|
|
146
|
+
preferencesFilter,
|
|
147
|
+
preferenceGroups,
|
|
148
|
+
routerPush,
|
|
149
|
+
options: {
|
|
150
|
+
applicationIdentifier,
|
|
151
|
+
subscriberHash,
|
|
152
|
+
backendUrl,
|
|
153
|
+
socketUrl,
|
|
154
|
+
subscriber: buildSubscriber(props)
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
}, [
|
|
158
|
+
localization,
|
|
159
|
+
appearance,
|
|
160
|
+
tabs,
|
|
161
|
+
preferencesFilter,
|
|
162
|
+
preferenceGroups,
|
|
163
|
+
applicationIdentifier,
|
|
164
|
+
subscriberId,
|
|
165
|
+
subscriberHash,
|
|
166
|
+
backendUrl,
|
|
167
|
+
socketUrl,
|
|
168
|
+
props.subscriber
|
|
169
|
+
]);
|
|
170
|
+
if (isWithChildrenProps(props)) {
|
|
171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NovuUI.NovuUI, { options, novu, children: props.children });
|
|
172
|
+
}
|
|
173
|
+
const {
|
|
185
174
|
open,
|
|
186
175
|
renderNotification,
|
|
187
176
|
renderSubject,
|
|
@@ -190,11 +179,26 @@ var InboxChild = import_react.default.memo((props) => {
|
|
|
190
179
|
onNotificationClick,
|
|
191
180
|
onPrimaryActionClick,
|
|
192
181
|
onSecondaryActionClick,
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
|
|
182
|
+
placementOffset,
|
|
183
|
+
placement
|
|
184
|
+
} = props;
|
|
185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NovuUI.NovuUI, { options, novu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
186
|
+
DefaultInbox,
|
|
187
|
+
{
|
|
188
|
+
open,
|
|
189
|
+
renderNotification,
|
|
190
|
+
renderSubject,
|
|
191
|
+
renderBody,
|
|
192
|
+
renderBell,
|
|
193
|
+
onNotificationClick,
|
|
194
|
+
onPrimaryActionClick,
|
|
195
|
+
onSecondaryActionClick,
|
|
196
|
+
placement,
|
|
197
|
+
placementOffset
|
|
198
|
+
}
|
|
199
|
+
) });
|
|
200
|
+
})
|
|
201
|
+
);
|
|
198
202
|
function isWithChildrenProps(props) {
|
|
199
203
|
return "children" in props;
|
|
200
204
|
}
|
|
@@ -1 +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
|
|
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\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"]}
|
|
@@ -27,31 +27,80 @@ var import_ui = require("@novu/js/ui");
|
|
|
27
27
|
var import_react = require("react");
|
|
28
28
|
var import_NovuUIContext = require("../context/NovuUIContext.cjs");
|
|
29
29
|
var import_useDataRef = require("../hooks/internal/useDataRef.cjs");
|
|
30
|
+
var import_appearance = require("../utils/appearance.cjs");
|
|
31
|
+
var import_RendererContext = require("../context/RendererContext.cjs");
|
|
32
|
+
var import_ShadowRootDetector = require("./ShadowRootDetector.cjs");
|
|
30
33
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
|
+
var findParentShadowRoot = (child) => {
|
|
35
|
+
if (!child) {
|
|
36
|
+
return null;
|
|
37
|
+
}
|
|
38
|
+
let node = child;
|
|
39
|
+
while (node) {
|
|
40
|
+
if (node instanceof Element && node.shadowRoot) {
|
|
41
|
+
return node.shadowRoot;
|
|
42
|
+
}
|
|
43
|
+
if (node instanceof ShadowRoot) {
|
|
44
|
+
return node;
|
|
45
|
+
}
|
|
46
|
+
node = node.parentNode;
|
|
47
|
+
if (!node || node === document) {
|
|
48
|
+
break;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
return null;
|
|
52
|
+
};
|
|
31
53
|
var NovuUI = ({ options, novu, children }) => {
|
|
32
|
-
const
|
|
54
|
+
const shadowRootDetector = (0, import_react.useRef)(null);
|
|
55
|
+
const { mountElement } = (0, import_RendererContext.useRenderer)();
|
|
56
|
+
const adaptedAppearanceForUpdate = (0, import_react.useMemo)(
|
|
57
|
+
() => (0, import_appearance.adaptAppearanceForJs)(options.appearance || {}, mountElement),
|
|
58
|
+
[options.appearance, mountElement]
|
|
59
|
+
);
|
|
60
|
+
const adaptedOptions = (0, import_react.useMemo)(() => {
|
|
61
|
+
return {
|
|
62
|
+
...options,
|
|
63
|
+
appearance: adaptedAppearanceForUpdate,
|
|
64
|
+
novu
|
|
65
|
+
};
|
|
66
|
+
}, [options, novu, adaptedAppearanceForUpdate]);
|
|
67
|
+
const optionsRef = (0, import_useDataRef.useDataRef)(adaptedOptions);
|
|
33
68
|
const [novuUI, setNovuUI] = (0, import_react.useState)();
|
|
34
69
|
(0, import_react.useEffect)(() => {
|
|
35
|
-
const
|
|
36
|
-
|
|
70
|
+
const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);
|
|
71
|
+
const instance = new import_ui.NovuUI({
|
|
72
|
+
...optionsRef.current,
|
|
73
|
+
container: optionsRef.current.container ?? parentShadowRoot
|
|
74
|
+
});
|
|
75
|
+
setNovuUI(instance);
|
|
37
76
|
return () => {
|
|
38
|
-
|
|
77
|
+
instance.unmount();
|
|
39
78
|
};
|
|
40
79
|
}, []);
|
|
41
80
|
(0, import_react.useEffect)(() => {
|
|
42
81
|
if (!novuUI) {
|
|
43
82
|
return;
|
|
44
83
|
}
|
|
45
|
-
|
|
84
|
+
const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);
|
|
85
|
+
novuUI.updateContainer(options.container ?? parentShadowRoot);
|
|
86
|
+
novuUI.updateAppearance(adaptedAppearanceForUpdate);
|
|
46
87
|
novuUI.updateLocalization(options.localization);
|
|
47
88
|
novuUI.updateTabs(options.tabs);
|
|
48
89
|
novuUI.updateOptions(options.options);
|
|
49
90
|
novuUI.updateRouterPush(options.routerPush);
|
|
50
|
-
}, [
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
91
|
+
}, [
|
|
92
|
+
shadowRootDetector,
|
|
93
|
+
novuUI,
|
|
94
|
+
adaptedAppearanceForUpdate,
|
|
95
|
+
options.localization,
|
|
96
|
+
options.tabs,
|
|
97
|
+
options.options,
|
|
98
|
+
options.routerPush
|
|
99
|
+
]);
|
|
100
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
101
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ShadowRootDetector.ShadowRootDetector, { ref: shadowRootDetector }),
|
|
102
|
+
novuUI && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NovuUIContext.NovuUIProvider, { value: { novuUI }, children })
|
|
103
|
+
] });
|
|
55
104
|
};
|
|
56
105
|
// Annotate the CommonJS export names for ESM import in node:
|
|
57
106
|
0 && (module.exports = {
|
|
@@ -1 +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:
|
|
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"]}
|
|
@@ -2,11 +2,15 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import { Novu } from '@novu/js';
|
|
3
3
|
import { NovuUIOptions } from '@novu/js/ui';
|
|
4
4
|
import React__default from 'react';
|
|
5
|
+
import { ReactAppearance } from '../utils/types.cjs';
|
|
5
6
|
|
|
7
|
+
type NovuUIProps = Omit<NovuUIOptions, 'appearance'> & {
|
|
8
|
+
appearance?: ReactAppearance;
|
|
9
|
+
};
|
|
6
10
|
type RendererProps = React__default.PropsWithChildren<{
|
|
7
|
-
options:
|
|
11
|
+
options: NovuUIProps;
|
|
8
12
|
novu?: Novu;
|
|
9
13
|
}>;
|
|
10
|
-
declare const NovuUI: ({ options, novu, children }: RendererProps) => react_jsx_runtime.JSX.Element
|
|
14
|
+
declare const NovuUI: ({ options, novu, children }: RendererProps) => react_jsx_runtime.JSX.Element;
|
|
11
15
|
|
|
12
16
|
export { NovuUI };
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/components/ShadowRootDetector.tsx
|
|
31
|
+
var ShadowRootDetector_exports = {};
|
|
32
|
+
__export(ShadowRootDetector_exports, {
|
|
33
|
+
ShadowRootDetector: () => ShadowRootDetector
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(ShadowRootDetector_exports);
|
|
36
|
+
var import_react = __toESM(require("react"), 1);
|
|
37
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
38
|
+
var ShadowRootDetector = import_react.default.forwardRef((props, ref) => {
|
|
39
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
40
|
+
"div",
|
|
41
|
+
{
|
|
42
|
+
ref,
|
|
43
|
+
style: {
|
|
44
|
+
position: "absolute",
|
|
45
|
+
width: 1,
|
|
46
|
+
height: 1,
|
|
47
|
+
padding: 0,
|
|
48
|
+
margin: -1,
|
|
49
|
+
overflow: "hidden",
|
|
50
|
+
clip: "rect(0, 0, 0, 0)",
|
|
51
|
+
whiteSpace: "nowrap",
|
|
52
|
+
borderWidth: 0
|
|
53
|
+
},
|
|
54
|
+
"data-shadow-root-detector": true,
|
|
55
|
+
...props
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
});
|
|
59
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
60
|
+
0 && (module.exports = {
|
|
61
|
+
ShadowRootDetector
|
|
62
|
+
});
|
|
63
|
+
//# sourceMappingURL=ShadowRootDetector.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -29,7 +29,7 @@ module.exports = __toCommonJS(NovuProvider_exports);
|
|
|
29
29
|
var import_js = require("@novu/js");
|
|
30
30
|
var import_react = require("react");
|
|
31
31
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
-
var version = "3.
|
|
32
|
+
var version = "3.4.0";
|
|
33
33
|
var name = "@novu/react";
|
|
34
34
|
var baseUserAgent = `${name}@${version}`;
|
|
35
35
|
var NovuContext = (0, import_react.createContext)(void 0);
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +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;
|
|
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 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
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { ChannelPreference, ChannelType, EventHandler, Events, FiltersCountResponse, InboxNotification, ListNotificationsResponse, Notification, NotificationFilter, NotificationStatus, NovuError, NovuOptions, Preference, PreferenceLevel, PreferencesResponse, SocketEventNames, WebSocketEvent } from '@novu/js';
|
|
2
|
-
export { Appearance, AppearanceKey, ElementStyles, Elements, Localization, LocalizationKey, NotificationActionClickHandler, NotificationClickHandler, NotificationRenderer, PreferencesFilter, RouterPush, Tab, Variables } from '@novu/js/ui';
|
|
2
|
+
export { Appearance, AppearanceKey, ElementStyles, Elements, Localization, LocalizationKey, NotificationActionClickHandler, NotificationClickHandler, NotificationRenderer, PreferenceGroups, PreferencesFilter, RouterPush, Tab, Variables } from '@novu/js/ui';
|
|
3
3
|
export { Bell, BellProps } from './components/Bell.cjs';
|
|
4
4
|
export { Inbox, InboxProps } from './components/Inbox.cjs';
|
|
5
5
|
export { Preferences } from './components/Preferences.cjs';
|
|
@@ -32,7 +32,10 @@ __export(server_exports, {
|
|
|
32
32
|
usePreferences: () => usePreferences
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(server_exports);
|
|
35
|
+
var import_ShadowRootDetector = require("../components/ShadowRootDetector.cjs");
|
|
36
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
37
|
function Inbox(props) {
|
|
38
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ShadowRootDetector.ShadowRootDetector, {});
|
|
36
39
|
}
|
|
37
40
|
function InboxContent() {
|
|
38
41
|
}
|
|
@@ -1 +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;
|
|
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';\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":[]}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
1
2
|
import { UseNotificationsProps, UseNotificationsResult } from '../hooks/useNotifications.cjs';
|
|
2
3
|
import { UsePreferencesProps, UsePreferencesResult } from '../hooks/usePreferences.cjs';
|
|
3
4
|
import { UseCountsProps, UseCountsResult } from '../hooks/useCounts.cjs';
|
|
4
5
|
import { NovuProviderProps } from '../hooks/NovuProvider.cjs';
|
|
5
6
|
import { InboxProps } from '../components/Inbox.cjs';
|
|
6
7
|
export { ChannelPreference, ChannelType, FiltersCountResponse, InboxNotification, ListNotificationsResponse, Notification, NotificationFilter, NotificationStatus, NovuError, NovuOptions, Preference, PreferenceLevel } from '@novu/js';
|
|
7
|
-
export { Appearance, AppearanceKey, ElementStyles, Elements, Localization, LocalizationKey, NotificationActionClickHandler, NotificationClickHandler, NotificationRenderer, PreferencesFilter, RouterPush, Tab, Variables } from '@novu/js/ui';
|
|
8
|
+
export { Appearance, AppearanceKey, ElementStyles, Elements, Localization, LocalizationKey, NotificationActionClickHandler, NotificationClickHandler, NotificationRenderer, PreferenceGroups, PreferencesFilter, RouterPush, Tab, Variables } from '@novu/js/ui';
|
|
8
9
|
export { BellProps } from '../components/Bell.cjs';
|
|
9
10
|
export { NotificationProps } from '../components/Notifications.cjs';
|
|
10
11
|
export { InboxContentProps } from '../components/InboxContent.cjs';
|
|
11
12
|
export { BaseProps, BellRenderer, BodyRenderer, DefaultInboxProps, DefaultProps, NoRendererProps, NotificationRendererProps, NotificationsRenderer, SubjectBodyRendererProps, SubjectRenderer, WithChildrenProps } from '../utils/types.cjs';
|
|
12
|
-
import 'react/jsx-runtime';
|
|
13
13
|
import 'react';
|
|
14
14
|
|
|
15
15
|
/**
|
|
@@ -18,7 +18,7 @@ import 'react';
|
|
|
18
18
|
* This will be replaced with actual components
|
|
19
19
|
* when we implement the SSR components in @novu/js/ui
|
|
20
20
|
*/
|
|
21
|
-
declare function Inbox(props: InboxProps):
|
|
21
|
+
declare function Inbox(props: InboxProps): react_jsx_runtime.JSX.Element;
|
|
22
22
|
declare function InboxContent(): void;
|
|
23
23
|
declare function Notifications(): void;
|
|
24
24
|
declare function Preferences(): void;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/utils/appearance.ts
|
|
21
|
+
var appearance_exports = {};
|
|
22
|
+
__export(appearance_exports, {
|
|
23
|
+
adaptAppearanceForJs: () => adaptAppearanceForJs
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(appearance_exports);
|
|
26
|
+
function adaptAppearanceForJs(appearance, mountElement) {
|
|
27
|
+
if (!appearance) {
|
|
28
|
+
return void 0;
|
|
29
|
+
}
|
|
30
|
+
const jsAppearance = JSON.parse(JSON.stringify(appearance));
|
|
31
|
+
if (appearance.icons) {
|
|
32
|
+
const jsIcons = {};
|
|
33
|
+
const reactIcons = appearance.icons;
|
|
34
|
+
const iconKeys = Object.keys(reactIcons);
|
|
35
|
+
for (const iconKey of iconKeys) {
|
|
36
|
+
const reactRenderer = reactIcons[iconKey];
|
|
37
|
+
if (reactRenderer) {
|
|
38
|
+
jsIcons[iconKey] = (el, props) => {
|
|
39
|
+
return mountElement(el, reactRenderer(props));
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
jsAppearance.icons = jsIcons;
|
|
44
|
+
} else {
|
|
45
|
+
delete jsAppearance.icons;
|
|
46
|
+
}
|
|
47
|
+
return jsAppearance;
|
|
48
|
+
}
|
|
49
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
50
|
+
0 && (module.exports = {
|
|
51
|
+
adaptAppearanceForJs
|
|
52
|
+
});
|
|
53
|
+
//# sourceMappingURL=appearance.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/appearance.ts"],"sourcesContent":["import type { Appearance as JsAppearance, IconRenderer, IconOverrides as JsIconOverrides, IconKey } from '@novu/js/ui';\n\nimport type { ReactAppearance, ReactIconRenderer } from './types';\nimport { MountedElement } from '../context/RendererContext';\n\nexport function adaptAppearanceForJs(\n appearance: ReactAppearance,\n mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void\n): JsAppearance | undefined {\n if (!appearance) {\n return undefined;\n }\n\n const jsAppearance: JsAppearance = JSON.parse(JSON.stringify(appearance));\n\n if (appearance.icons) {\n const jsIcons: JsIconOverrides = {};\n const reactIcons = appearance.icons;\n const iconKeys = Object.keys(reactIcons) as IconKey[];\n\n for (const iconKey of iconKeys) {\n const reactRenderer = reactIcons[iconKey];\n\n if (reactRenderer) {\n jsIcons[iconKey] = (el: HTMLDivElement, props: { class?: string }) => {\n return mountElement(el, reactRenderer(props));\n };\n }\n }\n\n // JsAppearance also has .icons directly (from JsTheme part of JsAppearance)\n jsAppearance.icons = jsIcons;\n } else {\n // If original didn't have icons, ensure the clone doesn't either\n delete jsAppearance.icons;\n }\n\n return jsAppearance;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKO,SAAS,qBACd,YACA,cAC0B;AAC1B,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,QAAM,eAA6B,KAAK,MAAM,KAAK,UAAU,UAAU,CAAC;AAExE,MAAI,WAAW,OAAO;AACpB,UAAM,UAA2B,CAAC;AAClC,UAAM,aAAa,WAAW;AAC9B,UAAM,WAAW,OAAO,KAAK,UAAU;AAEvC,eAAW,WAAW,UAAU;AAC9B,YAAM,gBAAgB,WAAW,OAAO;AAExC,UAAI,eAAe;AACjB,gBAAQ,OAAO,IAAI,CAAC,IAAoB,UAA8B;AACpE,iBAAO,aAAa,IAAI,cAAc,KAAK,CAAC;AAAA,QAC9C;AAAA,MACF;AAAA,IACF;AAGA,iBAAa,QAAQ;AAAA,EACvB,OAAO;AAEL,WAAO,aAAa;AAAA,EACtB;AAEA,SAAO;AACT;","names":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Appearance } from '@novu/js/ui';
|
|
2
|
+
import { ReactAppearance } from './types.cjs';
|
|
3
|
+
import { MountedElement } from '../context/RendererContext.cjs';
|
|
4
|
+
import '@novu/js';
|
|
5
|
+
import 'react';
|
|
6
|
+
import 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
declare function adaptAppearanceForJs(appearance: ReactAppearance, mountElement: (el: HTMLElement, mountedElement: MountedElement) => () => void): Appearance | undefined;
|
|
9
|
+
|
|
10
|
+
export { adaptAppearanceForJs };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/types.ts"],"sourcesContent":["import type {\n Notification,\n NotificationClickHandler,\n NotificationActionClickHandler,\n Tab,\n Appearance,\n Localization,\n RouterPush,\n PreferencesFilter,\n InboxProps,\n} from '@novu/js/ui';\nimport type { Subscriber } from '@novu/js';\n\nexport type NotificationsRenderer = (notification: Notification) => React.ReactNode;\nexport type SubjectRenderer = (notification: Notification) => React.ReactNode;\nexport type BodyRenderer = (notification: Notification) => React.ReactNode;\nexport type BellRenderer = (unreadCount: number) => React.ReactNode;\n\nexport type DefaultInboxProps = {\n open?: boolean;\n renderNotification?: NotificationsRenderer;\n renderSubject?: SubjectRenderer;\n renderBody?: BodyRenderer;\n renderBell?: BellRenderer;\n onNotificationClick?: NotificationClickHandler;\n onPrimaryActionClick?: NotificationActionClickHandler;\n onSecondaryActionClick?: NotificationActionClickHandler;\n placement?: InboxProps['placement'];\n placementOffset?: InboxProps['placementOffset'];\n};\n\nexport type BaseProps = {\n applicationIdentifier: string;\n subscriberHash?: string;\n backendUrl?: string;\n socketUrl?: string;\n appearance?:
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/types.ts"],"sourcesContent":["import type {\n Notification,\n NotificationClickHandler,\n NotificationActionClickHandler,\n Tab,\n Appearance as JsAppearance,\n Theme as JsTheme,\n IconKey,\n Localization,\n RouterPush,\n PreferencesFilter,\n PreferenceGroups,\n InboxProps,\n InboxPage,\n} from '@novu/js/ui';\nimport type { Subscriber } from '@novu/js';\nimport type { ReactNode } from 'react';\n\nexport type NotificationsRenderer = (notification: Notification) => React.ReactNode;\nexport type SubjectRenderer = (notification: Notification) => React.ReactNode;\nexport type BodyRenderer = (notification: Notification) => React.ReactNode;\nexport type BellRenderer = (unreadCount: number) => React.ReactNode;\n\nexport type ReactIconRendererProps = { class?: string };\nexport type ReactIconRenderer = (props: ReactIconRendererProps) => ReactNode;\n\nexport type ReactIconOverrides = {\n [key in IconKey]?: ReactIconRenderer;\n};\n\nexport type ReactTheme = Omit<JsTheme, 'icons'> & {\n icons?: ReactIconOverrides;\n};\n\nexport type ReactAppearance = ReactTheme & {\n baseTheme?: JsTheme | JsTheme[];\n};\n\nexport type DefaultInboxProps = {\n open?: boolean;\n renderNotification?: NotificationsRenderer;\n renderSubject?: SubjectRenderer;\n renderBody?: BodyRenderer;\n renderBell?: BellRenderer;\n onNotificationClick?: NotificationClickHandler;\n onPrimaryActionClick?: NotificationActionClickHandler;\n onSecondaryActionClick?: NotificationActionClickHandler;\n placement?: InboxProps['placement'];\n placementOffset?: InboxProps['placementOffset'];\n};\n\nexport type BaseProps = {\n applicationIdentifier: string;\n subscriberHash?: string;\n backendUrl?: string;\n socketUrl?: string;\n appearance?: ReactAppearance;\n localization?: Localization;\n tabs?: Array<Tab>;\n preferencesFilter?: PreferencesFilter;\n preferenceGroups?: PreferenceGroups;\n routerPush?: RouterPush;\n} & (\n | {\n // TODO: Backward compatibility support - remove in future versions (see NV-5801)\n /** @deprecated Use subscriber prop instead */\n subscriberId: string;\n subscriber?: never;\n }\n | {\n subscriber: Subscriber | string;\n subscriberId?: never;\n }\n);\n\nexport type NotificationRendererProps = {\n renderNotification: NotificationsRenderer;\n renderSubject?: never;\n renderBody?: never;\n};\n\nexport type SubjectBodyRendererProps = {\n renderNotification?: never;\n renderSubject?: SubjectRenderer;\n renderBody?: BodyRenderer;\n};\n\nexport type NoRendererProps = {\n renderNotification?: undefined;\n renderSubject?: undefined;\n renderBody?: undefined;\n};\n\nexport type DefaultProps = BaseProps &\n DefaultInboxProps & {\n children?: never;\n } & (NotificationRendererProps | SubjectBodyRendererProps | NoRendererProps);\n\nexport type WithChildrenProps = BaseProps & {\n children: React.ReactNode;\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
|