@trycourier/courier-react 8.0.24-beta → 8.0.26
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/README.md +12 -6
- package/dist/components/courier-inbox-popup-menu.d.ts +25 -47
- package/dist/components/courier-inbox.d.ts +23 -33
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +4 -3
- package/dist/index.mjs +116 -86
- package/dist/index.mjs.map +1 -1
- package/package.json +23 -13
- package/dist/components/courier-client-component.d.ts +0 -6
- package/dist/hooks/use-courier.d.ts +0 -34
- /package/dist/utils/{utils.d.ts → render.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## 1. Install
|
|
4
4
|
|
|
5
5
|
```sh
|
|
6
|
-
npm
|
|
6
|
+
npm install @trycourier/courier-react@beta
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
> **Not using React?** We suggest you use [@trycourier/courier-ui-inbox](../courier-ui-inbox/README.md) package instead.
|
|
@@ -14,10 +14,10 @@ To use the SDK, you need to generate a JWT (JSON Web Token) for your user. **Thi
|
|
|
14
14
|
|
|
15
15
|
**How it works:**
|
|
16
16
|
|
|
17
|
-
1. **Your frontend calls your backend:**
|
|
17
|
+
1. **Your frontend calls your backend:**
|
|
18
18
|
- When your app needs to authenticate a user, your frontend should make a request to your own backend (e.g., `/api/generate-courier-jwt`).
|
|
19
19
|
|
|
20
|
-
2. **Your backend calls Courier to issue a JWT:**
|
|
20
|
+
2. **Your backend calls Courier to issue a JWT:**
|
|
21
21
|
- In your backend endpoint, use your [Courier API Key](https://app.courier.com/settings/api-keys) to call the [Courier JWT Token Endpoint](https://www.courier.com/docs/reference/auth/issue-token) and generate a JWT for the user.
|
|
22
22
|
- Your backend then returns the JWT to your frontend.
|
|
23
23
|
|
|
@@ -329,9 +329,9 @@ export default function App() {
|
|
|
329
329
|
### Loading, Empty, Error & Pagination
|
|
330
330
|
|
|
331
331
|
```ts
|
|
332
|
-
import {
|
|
333
|
-
CourierInbox,
|
|
334
|
-
...,
|
|
332
|
+
import {
|
|
333
|
+
CourierInbox,
|
|
334
|
+
...,
|
|
335
335
|
type CourierInboxStateEmptyFactoryProps,
|
|
336
336
|
type CourierInboxStateLoadingFactoryProps,
|
|
337
337
|
type CourierInboxStateErrorFactoryProps,
|
|
@@ -403,3 +403,9 @@ export default function App() {
|
|
|
403
403
|
```
|
|
404
404
|
|
|
405
405
|
> **Not using React?** We suggest you use [@trycourier/courier-ui-inbox](../courier-ui-inbox/README.md) package instead.
|
|
406
|
+
|
|
407
|
+
# **Share feedback with Courier**
|
|
408
|
+
|
|
409
|
+
We want to make this the best SDK for managing notifications! Have an idea or feedback about our SDKs? Let us know!
|
|
410
|
+
|
|
411
|
+
[Courier Web Issues](https://github.com/trycourier/courier-web/issues)
|
|
@@ -1,48 +1,26 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
feedType?: CourierInboxFeedType;
|
|
27
|
-
/** Callback fired when a message is clicked. */
|
|
28
|
-
onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;
|
|
29
|
-
/** Callback fired when a message action (e.g., button) is clicked. */
|
|
30
|
-
onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;
|
|
31
|
-
/** Callback fired when a message is long-pressed (for mobile/gesture support). */
|
|
32
|
-
onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;
|
|
33
|
-
/** Allows you to pass a custom component as the header. */
|
|
34
|
-
renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;
|
|
35
|
-
/** Allows you to pass a custom component as the list item. */
|
|
36
|
-
renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;
|
|
37
|
-
/** Allows you to pass a custom component as the empty state. */
|
|
38
|
-
renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;
|
|
39
|
-
/** Allows you to pass a custom component as the loading state. */
|
|
40
|
-
renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;
|
|
41
|
-
/** Allows you to pass a custom component as the error state. */
|
|
42
|
-
renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;
|
|
43
|
-
/** Allows you to pass a custom component as the pagination list item. */
|
|
44
|
-
renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;
|
|
45
|
-
/** Allows you to pass a custom component as the menu button. */
|
|
46
|
-
renderMenuButton?: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => ReactNode;
|
|
47
|
-
}
|
|
1
|
+
import { CourierInboxPopupMenu as CourierInboxPopupMenuElement } from '@trycourier/courier-ui-inbox';
|
|
2
|
+
import { CourierInboxPopupMenuProps } from '@trycourier/courier-react-components';
|
|
3
|
+
/**
|
|
4
|
+
* CourierInboxPopupMenu React component.
|
|
5
|
+
*
|
|
6
|
+
* This component is used to display a popup menu for a message in the inbox.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* const courier = useCourier();
|
|
11
|
+
*
|
|
12
|
+
* useEffect(() => {
|
|
13
|
+
* // Generate a JWT for your user (do this on your backend server)
|
|
14
|
+
* const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
|
|
15
|
+
*
|
|
16
|
+
* // Authenticate the user with the inbox
|
|
17
|
+
* courier.shared.signIn({
|
|
18
|
+
* userId: $YOUR_USER_ID,
|
|
19
|
+
* jwt: jwt,
|
|
20
|
+
* });
|
|
21
|
+
* }, []);
|
|
22
|
+
*
|
|
23
|
+
* return <CourierInboxPopupMenu />;
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
48
26
|
export declare const CourierInboxPopupMenu: import('../../../../node_modules/react').ForwardRefExoticComponent<CourierInboxPopupMenuProps & import('../../../../node_modules/react').RefAttributes<CourierInboxPopupMenuElement>>;
|
|
@@ -1,34 +1,24 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;
|
|
25
|
-
/** Allows you to pass a custom component as the empty state. */
|
|
26
|
-
renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;
|
|
27
|
-
/** Allows you to pass a custom component as the loading state. */
|
|
28
|
-
renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;
|
|
29
|
-
/** Allows you to pass a custom component as the error state. */
|
|
30
|
-
renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;
|
|
31
|
-
/** Allows you to pass a custom component as the pagination list item. */
|
|
32
|
-
renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;
|
|
33
|
-
}
|
|
1
|
+
import { CourierInbox as CourierInboxElement } from '@trycourier/courier-ui-inbox';
|
|
2
|
+
import { CourierInboxProps } from '@trycourier/courier-react-components';
|
|
3
|
+
/**
|
|
4
|
+
* CourierInbox React component.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```tsx
|
|
8
|
+
* const courier = useCourier();
|
|
9
|
+
*
|
|
10
|
+
* useEffect(() => {
|
|
11
|
+
* // Generate a JWT for your user (do this on your backend server)
|
|
12
|
+
* const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
|
|
13
|
+
*
|
|
14
|
+
* // Authenticate the user with the inbox
|
|
15
|
+
* courier.shared.signIn({
|
|
16
|
+
* userId: $YOUR_USER_ID,
|
|
17
|
+
* jwt: jwt,
|
|
18
|
+
* });
|
|
19
|
+
* }, []);
|
|
20
|
+
*
|
|
21
|
+
* return <CourierInbox />;
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
34
24
|
export declare const CourierInbox: import('../../../../node_modules/react').ForwardRefExoticComponent<CourierInboxProps & import('../../../../node_modules/react').RefAttributes<CourierInboxElement>>;
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("@trycourier/courier-js"),n=require("@trycourier/courier-ui-inbox"),s=require("react-dom"),o=require("react-dom/client"),a=({children:t})=>{const[n,s]=r.useState(!1);return r.useEffect((()=>{s(!0)}),[]),"undefined"==typeof window?null:n?e.jsx(e.Fragment,{children:t}):null},i=r.createContext(null),u=r.forwardRef(((t,n)=>{const s=r.useContext(i);if(!s)throw new Error("RenderContext not found. Ensure CourierInbox is wrapped in a CourierRenderContext.");const o=r.useRef(null);function u(){return o.current}r.useEffect((()=>{const e=u();e&&e.onMessageClick(t.onMessageClick)}),[t.onMessageClick]),r.useEffect((()=>{const e=u();e&&e.onMessageActionClick(t.onMessageActionClick)}),[t.onMessageActionClick]),r.useEffect((()=>{const e=u();e&&e.onMessageLongPress(t.onMessageLongPress)}),[t.onMessageLongPress]),r.useEffect((()=>{const e=u();e&&t.renderHeader&&queueMicrotask((()=>{e.setHeader((e=>{const r=t.renderHeader(e);return s(r)}))}))}),[t.renderHeader]),r.useEffect((()=>{const e=u();e&&t.renderListItem&&queueMicrotask((()=>{e.setListItem((e=>{const r=t.renderListItem(e);return s(r)}))}))}),[t.renderListItem]),r.useEffect((()=>{const e=u();e&&t.renderEmptyState&&queueMicrotask((()=>{e.setEmptyState((e=>{const r=t.renderEmptyState(e);return s(r)}))}))}),[t.renderEmptyState]),r.useEffect((()=>{const e=u();e&&t.renderLoadingState&&queueMicrotask((()=>{e.setLoadingState((e=>{const r=t.renderLoadingState(e);return s(r)}))}))}),[t.renderLoadingState]),r.useEffect((()=>{const e=u();e&&t.renderErrorState&&queueMicrotask((()=>{e.setErrorState((e=>{const r=t.renderErrorState(e);return s(r)}))}))}),[t.renderErrorState]),r.useEffect((()=>{const e=u();e&&t.renderPaginationItem&&queueMicrotask((()=>{e.setPaginationItem((e=>{const r=t.renderPaginationItem(e);return s(r)}))}))}),[t.renderPaginationItem]),r.useEffect((()=>{const e=u();e&&queueMicrotask((()=>{e.setFeedType(t.feedType||"inbox")}))}),[t.feedType]);const c=e.jsx("courier-inbox",{ref:function(e){n&&("function"==typeof n?n(e):n.current=e),o.current=e},height:t.height,"light-theme":t.lightTheme?JSON.stringify(t.lightTheme):void 0,"dark-theme":t.darkTheme?JSON.stringify(t.darkTheme):void 0,mode:t.mode});return e.jsx(a,{children:c})})),c=r.forwardRef(((t,n)=>{const s=r.useContext(i);if(!s)throw new Error("RenderContext not found. Ensure CourierInboxPopupMenu is wrapped in a CourierRenderContext.");const o=r.useRef(null);function u(){return o.current}const c=r.useRef(void 0);r.useEffect((()=>{const e=u();e&&t.feedType!==c.current&&(c.current=t.feedType,queueMicrotask((()=>{var r;null==(r=e.setFeedType)||r.call(e,t.feedType??"inbox")})))}),[t.feedType]),r.useEffect((()=>{const e=u();e&&e.onMessageClick(t.onMessageClick)}),[t.onMessageClick]),r.useEffect((()=>{const e=u();e&&e.onMessageActionClick(t.onMessageActionClick)}),[t.onMessageActionClick]),r.useEffect((()=>{const e=u();e&&e.onMessageLongPress(t.onMessageLongPress)}),[t.onMessageLongPress]),r.useEffect((()=>{const e=u();e&&t.renderHeader&&queueMicrotask((()=>{e.setHeader((e=>{const r=t.renderHeader(e);return s(r)}))}))}),[t.renderHeader]),r.useEffect((()=>{const e=u();e&&t.renderListItem&&queueMicrotask((()=>{e.setListItem((e=>{const r=t.renderListItem(e);return s(r)}))}))}),[t.renderListItem]),r.useEffect((()=>{const e=u();e&&t.renderEmptyState&&queueMicrotask((()=>{e.setEmptyState((e=>{const r=t.renderEmptyState(e);return s(r)}))}))}),[t.renderEmptyState]),r.useEffect((()=>{const e=u();e&&t.renderLoadingState&&queueMicrotask((()=>{e.setLoadingState((e=>{const r=t.renderLoadingState(e);return s(r)}))}))}),[t.renderLoadingState]),r.useEffect((()=>{const e=u();e&&t.renderErrorState&&queueMicrotask((()=>{e.setErrorState((e=>{const r=t.renderErrorState(e);return s(r)}))}))}),[t.renderErrorState]),r.useEffect((()=>{const e=u();e&&t.renderPaginationItem&&queueMicrotask((()=>{e.setPaginationItem((e=>{const r=t.renderPaginationItem(e);return s(r)}))}))}),[t.renderPaginationItem]),r.useEffect((()=>{const e=u();e&&t.renderMenuButton&&queueMicrotask((()=>{e.setMenuButton((e=>{const r=t.renderMenuButton(e);return s(r)}))}))}),[t.renderMenuButton]);const d=e.jsx("courier-inbox-popup-menu",{ref:function(e){n&&("function"==typeof n?n(e):n.current=e),o.current=e},"popup-alignment":t.popupAlignment,"popup-width":t.popupWidth,"popup-height":t.popupHeight,left:t.left,top:t.top,right:t.right,bottom:t.bottom,"light-theme":t.lightTheme?JSON.stringify(t.lightTheme):void 0,"dark-theme":t.darkTheme?JSON.stringify(t.darkTheme):void 0,mode:t.mode});return e.jsx(a,{children:d})}));function d(e){const r=document.createElement("div"),t=o.createRoot(r);s.flushSync((()=>{t.render(e)}));const n=r.firstElementChild;if(!(n instanceof HTMLElement))throw new Error("renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)");return n}const g=r.forwardRef(((r,t)=>e.jsx(i.Provider,{value:d,children:e.jsx(u,{...r,ref:t})})));g.displayName="CourierInbox";const f=r.forwardRef(((r,t)=>e.jsx(i.Provider,{value:d,children:e.jsx(c,{...r,ref:t})})));f.displayName="CourierInboxPopupMenu",Object.defineProperty(exports,"archiveMessage",{enumerable:!0,get:()=>n.archiveMessage}),Object.defineProperty(exports,"clickMessage",{enumerable:!0,get:()=>n.clickMessage}),Object.defineProperty(exports,"defaultDarkTheme",{enumerable:!0,get:()=>n.defaultDarkTheme}),Object.defineProperty(exports,"defaultLightTheme",{enumerable:!0,get:()=>n.defaultLightTheme}),Object.defineProperty(exports,"markAsRead",{enumerable:!0,get:()=>n.markAsRead}),Object.defineProperty(exports,"markAsUnread",{enumerable:!0,get:()=>n.markAsUnread}),Object.defineProperty(exports,"mergeTheme",{enumerable:!0,get:()=>n.mergeTheme}),Object.defineProperty(exports,"openMessage",{enumerable:!0,get:()=>n.openMessage}),exports.CourierInbox=g,exports.CourierInboxPopupMenu=f,exports.useCourier=()=>{const e=e=>t.Courier.shared.signIn(e),s=()=>t.Courier.shared.signOut(),o=e=>n.CourierInboxDatastore.shared.load(e),a=e=>n.CourierInboxDatastore.shared.fetchNextPageOfMessages(e),i=e=>t.Courier.shared.paginationLimit=e,u=e=>n.CourierInboxDatastore.shared.readMessage({message:e}),c=e=>n.CourierInboxDatastore.shared.unreadMessage({message:e}),d=e=>n.CourierInboxDatastore.shared.clickMessage({message:e}),g=e=>n.CourierInboxDatastore.shared.archiveMessage({message:e}),f=e=>n.CourierInboxDatastore.shared.openMessage({message:e}),m=e=>n.CourierInboxDatastore.shared.unarchiveMessage({message:e}),l=()=>n.CourierInboxDatastore.shared.readAllMessages(),[h,p]=r.useState({userId:void 0,signIn:e,signOut:s}),[M,x]=r.useState({load:o,fetchNextPageOfMessages:a,setPaginationLimit:i,readMessage:u,unreadMessage:c,clickMessage:d,archiveMessage:g,openMessage:f,unarchiveMessage:m,readAllMessages:l});r.useEffect((()=>{const e=t.Courier.shared.addAuthenticationListener((()=>C())),r=new n.CourierInboxDataStoreListener({onError:e=>E(e),onDataSetChange:()=>E(),onPageAdded:()=>E(),onMessageAdd:()=>E(),onMessageRemove:()=>E(),onMessageUpdate:()=>E(),onUnreadCountChange:()=>E()});return n.CourierInboxDatastore.shared.addDataStoreListener(r),C(),E(),()=>{e.remove(),r.remove()}}),[]);const C=()=>{var r;const n=null==(r=t.Courier.shared.client)?void 0:r.options;p({userId:null==n?void 0:n.userId,signIn:e,signOut:s})},E=e=>{const r=n.CourierInboxDatastore.shared;x({load:o,fetchNextPageOfMessages:a,setPaginationLimit:i,readMessage:u,unreadMessage:c,clickMessage:d,archiveMessage:g,openMessage:f,unarchiveMessage:m,readAllMessages:l,inbox:r.inboxDataSet,archive:r.archiveDataSet,unreadCount:r.unreadCount,error:e})};return{shared:t.Courier.shared,auth:h,inbox:M}};
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/utils/utils.tsx","../src/components/courier-client-component.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx","../src/hooks/use-courier.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { createRoot } from \"react-dom/client\";\n\n/**\n * Converts a React node to an HTMLElement.\n * This function uses flushSync to ensure the DOM is updated synchronously.\n * @param node - The React node to convert.\n * @returns The converted HTMLElement.\n */\nexport function reactNodeToHTMLElement(node: ReactNode): HTMLElement {\n const container = document.createElement('div');\n\n // Use React 18 root\n const root = createRoot(container);\n flushSync(() => {\n root.render(node);\n });\n\n // Wait until React mounts the content synchronously\n const element = container.firstElementChild;\n if (!(element instanceof HTMLElement)) {\n throw new Error(\n 'renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)'\n );\n }\n\n return element;\n}","import React, { useState, useEffect } from 'react';\n\ninterface CourierClientProps {\n children: React.ReactNode;\n}\n\n// This class prevents issues with server side rendering react components\n// It will force the component to only render client side\n// A future update could support server side rendering if there is enough demand\nexport const CourierClientComponent: React.FC<CourierClientProps> = ({ children }) => {\n const [isMounted, setIsMounted] = useState(false);\n\n useEffect(() => {\n setIsMounted(true);\n }, []);\n\n // During SSR, render nothing or fallback\n if (typeof window === 'undefined') {\n return null;\n }\n\n if (!isMounted) {\n return null;\n }\n\n return <>{children}</>;\n};","import { useRef, useEffect, forwardRef, ReactNode } from \"react\";\nimport { CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxTheme, CourierInbox as CourierInboxElement, CourierInboxHeaderFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxFeedType } from \"@trycourier/courier-ui-inbox\";\nimport { reactNodeToHTMLElement } from \"../utils/utils\";\nimport { CourierComponentThemeMode } from \"@trycourier/courier-ui-core\";\nimport { CourierClientComponent } from \"./courier-client-component\";\n\nexport interface CourierInboxProps {\n /** Height of the inbox container. Defaults to \"auto\" and will resize itself based on it's children. */\n height?: string;\n\n /** Theme object for light mode */\n lightTheme?: CourierInboxTheme;\n\n /** Theme object for dark mode */\n darkTheme?: CourierInboxTheme;\n\n /** Theme mode: \"light\", \"dark\", or \"system\". Defaults to \"system\" */\n mode?: CourierComponentThemeMode;\n\n /** Type of feed to display in the inbox (\"inbox\" or \"archive\"). Defaults to \"inbox\" */\n feedType?: CourierInboxFeedType;\n\n /** Callback fired when a message is clicked. */\n onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n\n /** Callback fired when a message action (e.g., button) is clicked. */\n onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n\n /** Callback fired when a message is long-pressed (for mobile/gesture support). Only works on devices that support touch. */\n onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n\n /** Allows you to pass a custom component as the header. */\n renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the list item. */\n renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the empty state. */\n renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the loading state. */\n renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the error state. */\n renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the pagination list item. */\n renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInbox = forwardRef<CourierInboxElement, CourierInboxProps>((props, ref) => {\n const inboxRef = useRef<CourierInboxElement | null>(null);\n\n // Expose the internal ref to the parent if a ref was passed in\n useEffect(() => {\n if (typeof ref === \"function\") {\n ref(inboxRef.current);\n } else if (ref) {\n (ref as React.RefObject<CourierInboxElement | null>).current = inboxRef.current;\n }\n }, [ref]);\n\n // Handle message click\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox) return;\n inbox.onMessageClick(props.onMessageClick);\n }, [props.onMessageClick, inboxRef]);\n\n // Handle message action click\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox) return;\n inbox.onMessageActionClick(props.onMessageActionClick);\n }, [props.onMessageActionClick, inboxRef]);\n\n // Handle message long press\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox) return;\n inbox.onMessageLongPress(props.onMessageLongPress);\n }, [props.onMessageLongPress, inboxRef]);\n\n // Render header\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox || !props.renderHeader) return;\n queueMicrotask(() => {\n inbox.setHeader((headerProps?: CourierInboxHeaderFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderHeader!(headerProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderHeader, inboxRef]);\n\n // Render list item\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox || !props.renderListItem) return;\n queueMicrotask(() => {\n inbox.setListItem((itemProps?: CourierInboxListItemFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderListItem!(itemProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderListItem, inboxRef]);\n\n // Render empty state\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox || !props.renderEmptyState) return;\n queueMicrotask(() => {\n inbox.setEmptyState((emptyStateProps?: CourierInboxStateEmptyFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderEmptyState!(emptyStateProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderEmptyState, inboxRef]);\n\n // Render loading state\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox || !props.renderLoadingState) return;\n queueMicrotask(() => {\n inbox.setLoadingState((loadingStateProps?: CourierInboxStateLoadingFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderLoadingState!(loadingStateProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderLoadingState, inboxRef]);\n\n // Render error state\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox || !props.renderErrorState) return;\n queueMicrotask(() => {\n inbox.setErrorState((errorStateProps?: CourierInboxStateErrorFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderErrorState!(errorStateProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderErrorState, inboxRef]);\n\n // Render pagination item\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox || !props.renderPaginationItem) return;\n queueMicrotask(() => {\n inbox.setPaginationItem((paginationProps?: CourierInboxPaginationItemFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderPaginationItem!(paginationProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderPaginationItem, inboxRef]);\n\n // Set feed type\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox) return;\n queueMicrotask(() => {\n inbox.setFeedType(props.feedType || 'inbox');\n });\n }, [props.feedType, inboxRef]);\n\n return (\n <CourierClientComponent>\n {/* @ts-ignore */}\n <courier-inbox\n ref={inboxRef}\n height={props.height}\n light-theme={props.lightTheme ? JSON.stringify(props.lightTheme) : undefined}\n dark-theme={props.darkTheme ? JSON.stringify(props.darkTheme) : undefined}\n mode={props.mode}\n />\n </CourierClientComponent>\n );\n});\n\nCourierInbox.displayName = 'CourierInbox';","import { useEffect, useRef, forwardRef, ReactNode } from 'react';\nimport {\n CourierInboxFeedType,\n CourierInboxHeaderFactoryProps,\n CourierInboxListItemActionFactoryProps,\n CourierInboxListItemFactoryProps,\n CourierInboxMenuButtonFactoryProps,\n CourierInboxPopupMenu as CourierInboxPopupMenuElement,\n CourierInboxPaginationItemFactoryProps,\n CourierInboxPopupAlignment,\n CourierInboxStateEmptyFactoryProps,\n CourierInboxStateErrorFactoryProps,\n CourierInboxStateLoadingFactoryProps,\n CourierInboxTheme,\n} from '@trycourier/courier-ui-inbox';\nimport { reactNodeToHTMLElement } from '../utils/utils';\nimport { CourierComponentThemeMode } from '@trycourier/courier-ui-core';\nimport { CourierClientComponent } from './courier-client-component';\n\nexport interface CourierInboxPopupMenuProps {\n /** Alignment of the popup menu: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center', 'center-right', 'center-left', 'center-center'. */\n popupAlignment?: CourierInboxPopupAlignment;\n\n /** Width of the popup menu container. */\n popupWidth?: string;\n\n /** Height of the popup menu container. */\n popupHeight?: string;\n\n /** CSS left position for the popup menu. */\n left?: string;\n\n /** CSS top position for the popup menu. */\n top?: string;\n\n /** CSS right position for the popup menu. */\n right?: string;\n\n /** CSS bottom position for the popup menu. */\n bottom?: string;\n\n /** Theme object for light mode. */\n lightTheme?: CourierInboxTheme;\n\n /** Theme object for dark mode. */\n darkTheme?: CourierInboxTheme;\n\n /** Theme mode: 'light', 'dark', or 'system'. */\n mode?: CourierComponentThemeMode;\n\n /** Type of feed to display in the popup menu ('inbox' or 'archive'). */\n feedType?: CourierInboxFeedType;\n\n /** Callback fired when a message is clicked. */\n onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n\n /** Callback fired when a message action (e.g., button) is clicked. */\n onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n\n /** Callback fired when a message is long-pressed (for mobile/gesture support). */\n onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n\n /** Allows you to pass a custom component as the header. */\n renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the list item. */\n renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the empty state. */\n renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the loading state. */\n renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the error state. */\n renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the pagination list item. */\n renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the menu button. */\n renderMenuButton?: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInboxPopupMenu = forwardRef<CourierInboxPopupMenuElement, CourierInboxPopupMenuProps>(\n (props, ref) => {\n // Instead of using useRef and assigning to the custom element,\n // we use a callback ref to ensure the ref is set as soon as the element is mounted.\n function handleRef(el: CourierInboxPopupMenuElement | null) {\n if (ref) {\n if (typeof ref === 'function') {\n ref(el);\n } else {\n (ref as React.RefObject<CourierInboxPopupMenuElement | null>).current = el;\n }\n }\n // Store the element for use in effects\n (handleRef as any)._el = el;\n }\n\n // Helper to get the current element\n function getEl(): CourierInboxPopupMenuElement | null {\n return (handleRef as any)._el ?? null;\n }\n\n // Use a ref to track the last set feedType to prevent duplicate state changes\n const lastFeedTypeRef = useRef<CourierInboxFeedType | undefined>(undefined);\n\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n // Only set feedType if it has changed from the last set value\n if (props.feedType !== lastFeedTypeRef.current) {\n lastFeedTypeRef.current = props.feedType;\n queueMicrotask(() => {\n menu.setFeedType?.(props.feedType ?? 'inbox');\n });\n }\n }, [props.feedType]);\n\n // Handle message click\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n menu.onMessageClick(props.onMessageClick);\n }, [props.onMessageClick]);\n\n // Handle message action click\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n menu.onMessageActionClick(props.onMessageActionClick);\n }, [props.onMessageActionClick]);\n\n // Handle message long press\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n menu.onMessageLongPress(props.onMessageLongPress);\n }, [props.onMessageLongPress]);\n\n // Render header\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderHeader) return;\n queueMicrotask(() => {\n menu.setHeader((headerProps?: CourierInboxHeaderFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderHeader!(headerProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderHeader]);\n\n // Render list item\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderListItem) return;\n queueMicrotask(() => {\n menu.setListItem((itemProps?: CourierInboxListItemFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderListItem!(itemProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderListItem]);\n\n // Render empty state\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderEmptyState) return;\n queueMicrotask(() => {\n menu.setEmptyState((emptyStateProps?: CourierInboxStateEmptyFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderEmptyState!(emptyStateProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderEmptyState]);\n\n // Render loading state\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderLoadingState) return;\n queueMicrotask(() => {\n menu.setLoadingState((loadingStateProps?: CourierInboxStateLoadingFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderLoadingState!(loadingStateProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderLoadingState]);\n\n // Render error state\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderErrorState) return;\n queueMicrotask(() => {\n menu.setErrorState((errorStateProps?: CourierInboxStateErrorFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderErrorState!(errorStateProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderErrorState]);\n\n // Render pagination item\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderPaginationItem) return;\n queueMicrotask(() => {\n menu.setPaginationItem((paginationProps?: CourierInboxPaginationItemFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderPaginationItem!(paginationProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderPaginationItem]);\n\n // Render menu button\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderMenuButton) return;\n queueMicrotask(() => {\n menu.setMenuButton((buttonProps?: CourierInboxMenuButtonFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderMenuButton!(buttonProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderMenuButton]);\n\n return (\n <CourierClientComponent>\n {/* @ts-ignore */}\n <courier-inbox-popup-menu\n ref={handleRef}\n popup-alignment={props.popupAlignment}\n popup-width={props.popupWidth}\n popup-height={props.popupHeight}\n left={props.left}\n top={props.top}\n right={props.right}\n bottom={props.bottom}\n light-theme={props.lightTheme ? JSON.stringify(props.lightTheme) : undefined}\n dark-theme={props.darkTheme ? JSON.stringify(props.darkTheme) : undefined}\n mode={props.mode}\n />\n </CourierClientComponent>\n );\n }\n);\n\nCourierInboxPopupMenu.displayName = 'CourierInboxPopupMenu';","import React from 'react';\nimport { Courier, CourierProps, InboxMessage } from '@trycourier/courier-js';\nimport { CourierInboxDatastore, CourierInboxDataStoreListener, CourierInboxFeedType, InboxDataSet } from '@trycourier/courier-ui-inbox';\n\ntype AuthenticationHooks = {\n userId?: string,\n signIn: (props: CourierProps) => void,\n signOut: () => void\n}\n\ntype InboxHooks = {\n load: (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => Promise<void>,\n fetchNextPageOfMessages: (props: { feedType: CourierInboxFeedType }) => Promise<InboxDataSet | null>,\n setPaginationLimit: (limit: number) => void,\n readMessage: (message: InboxMessage) => Promise<void>,\n unreadMessage: (message: InboxMessage) => Promise<void>,\n clickMessage: (message: InboxMessage) => Promise<void>,\n archiveMessage: (message: InboxMessage) => Promise<void>,\n openMessage: (message: InboxMessage) => Promise<void>,\n unarchiveMessage: (message: InboxMessage) => Promise<void>,\n readAllMessages: () => Promise<void>,\n inbox?: InboxDataSet,\n archive?: InboxDataSet,\n unreadCount?: number,\n error?: Error\n}\n\n// A hook for managing the shared state of Courier\n// If you want to use more functions, checkout the Courier JS SDK which\n// can be used directly by importing from '@trycourier/courier-js'\nexport const useCourier = () => {\n\n // Authentication Functions\n const signIn = (props: CourierProps) => Courier.shared.signIn(props);\n const signOut = () => Courier.shared.signOut();\n\n // Inbox Functions\n const loadInbox = (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => CourierInboxDatastore.shared.load(props);\n const fetchNextPageOfMessages = (props: { feedType: CourierInboxFeedType }) => CourierInboxDatastore.shared.fetchNextPageOfMessages(props);\n const setPaginationLimit = (limit: number) => Courier.shared.paginationLimit = limit;\n const readMessage = (message: InboxMessage) => CourierInboxDatastore.shared.readMessage({ message });\n const unreadMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unreadMessage({ message });\n const clickMessage = (message: InboxMessage) => CourierInboxDatastore.shared.clickMessage({ message });\n const archiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.archiveMessage({ message });\n const openMessage = (message: InboxMessage) => CourierInboxDatastore.shared.openMessage({ message });\n const unarchiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unarchiveMessage({ message });\n const readAllMessages = () => CourierInboxDatastore.shared.readAllMessages();\n\n // State\n const [auth, setAuth] = React.useState<AuthenticationHooks>({\n userId: undefined,\n signIn,\n signOut\n });\n\n const [inbox, setInbox] = React.useState<InboxHooks>({\n load: loadInbox,\n fetchNextPageOfMessages,\n setPaginationLimit,\n readMessage,\n unreadMessage,\n clickMessage,\n archiveMessage,\n openMessage,\n unarchiveMessage,\n readAllMessages\n });\n\n React.useEffect(() => {\n\n // Add a listener to the Courier instance\n const listener = Courier.shared.addAuthenticationListener(() => refreshAuth());\n\n // Add inbox data store listener\n const inboxListener = new CourierInboxDataStoreListener({\n onError: (error: Error) => refreshInbox(error),\n onDataSetChange: () => refreshInbox(),\n onPageAdded: () => refreshInbox(),\n onMessageAdd: () => refreshInbox(),\n onMessageRemove: () => refreshInbox(),\n onMessageUpdate: () => refreshInbox(),\n onUnreadCountChange: () => refreshInbox()\n });\n CourierInboxDatastore.shared.addDataStoreListener(inboxListener);\n\n // Set initial values\n refreshAuth();\n refreshInbox();\n\n // Remove listeners when the component unmounts\n return () => {\n listener.remove();\n inboxListener.remove();\n };\n }, []);\n\n const refreshAuth = () => {\n const options = Courier.shared.client?.options;\n setAuth({\n userId: options?.userId,\n signIn,\n signOut\n });\n }\n\n const refreshInbox = (error?: Error) => {\n const datastore = CourierInboxDatastore.shared;\n setInbox({\n load: loadInbox,\n fetchNextPageOfMessages,\n setPaginationLimit,\n readMessage,\n unreadMessage,\n clickMessage,\n archiveMessage,\n openMessage,\n unarchiveMessage,\n readAllMessages,\n inbox: datastore.inboxDataSet,\n archive: datastore.archiveDataSet,\n unreadCount: datastore.unreadCount,\n error: error,\n });\n }\n\n return {\n shared: Courier.shared,\n auth: auth,\n inbox: inbox,\n };\n};\n"],"names":["reactNodeToHTMLElement","node","container","document","createElement","root","createRoot","flushSync","render","element","firstElementChild","HTMLElement","Error","CourierClientComponent","children","isMounted","setIsMounted","useState","useEffect","window","CourierInbox","forwardRef","props","ref","inboxRef","useRef","current","inbox","onMessageClick","onMessageActionClick","onMessageLongPress","renderHeader","queueMicrotask","setHeader","headerProps","renderListItem","setListItem","itemProps","renderEmptyState","setEmptyState","emptyStateProps","renderLoadingState","setLoadingState","loadingStateProps","renderErrorState","setErrorState","errorStateProps","renderPaginationItem","setPaginationItem","paginationProps","setFeedType","feedType","jsx","height","lightTheme","JSON","stringify","darkTheme","mode","displayName","CourierInboxPopupMenu","handleRef","el","_el","getEl","lastFeedTypeRef","menu","_a","call","renderMenuButton","setMenuButton","buttonProps","popupAlignment","popupWidth","popupHeight","left","top","right","bottom","signIn","Courier","shared","signOut","loadInbox","CourierInboxDatastore","load","fetchNextPageOfMessages","setPaginationLimit","limit","paginationLimit","readMessage","message","unreadMessage","clickMessage","archiveMessage","openMessage","unarchiveMessage","readAllMessages","auth","setAuth","React","userId","setInbox","listener","addAuthenticationListener","refreshAuth","inboxListener","CourierInboxDataStoreListener","onError","error","refreshInbox","onDataSetChange","onPageAdded","onMessageAdd","onMessageRemove","onMessageUpdate","onUnreadCountChange","addDataStoreListener","remove","options","client","datastore","inboxDataSet","archive","archiveDataSet","unreadCount"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../courier-react-components/dist/index.mjs","../src/utils/render.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx"],"sourcesContent":["import { Courier } from \"@trycourier/courier-js\";\nimport { CourierInboxDatastore, CourierInboxDataStoreListener } from \"@trycourier/courier-ui-inbox\";\nimport React, { useState, useEffect, createContext, forwardRef, useContext, useRef } from \"react\";\nimport { jsx, Fragment } from \"react/jsx-runtime\";\nconst useCourier = () => {\n const signIn = (props) => Courier.shared.signIn(props);\n const signOut = () => Courier.shared.signOut();\n const loadInbox = (props) => CourierInboxDatastore.shared.load(props);\n const fetchNextPageOfMessages = (props) => CourierInboxDatastore.shared.fetchNextPageOfMessages(props);\n const setPaginationLimit = (limit) => Courier.shared.paginationLimit = limit;\n const readMessage = (message) => CourierInboxDatastore.shared.readMessage({ message });\n const unreadMessage = (message) => CourierInboxDatastore.shared.unreadMessage({ message });\n const clickMessage = (message) => CourierInboxDatastore.shared.clickMessage({ message });\n const archiveMessage = (message) => CourierInboxDatastore.shared.archiveMessage({ message });\n const openMessage = (message) => CourierInboxDatastore.shared.openMessage({ message });\n const unarchiveMessage = (message) => CourierInboxDatastore.shared.unarchiveMessage({ message });\n const readAllMessages = () => CourierInboxDatastore.shared.readAllMessages();\n const [auth, setAuth] = React.useState({\n userId: void 0,\n signIn,\n signOut\n });\n const [inbox, setInbox] = React.useState({\n load: loadInbox,\n fetchNextPageOfMessages,\n setPaginationLimit,\n readMessage,\n unreadMessage,\n clickMessage,\n archiveMessage,\n openMessage,\n unarchiveMessage,\n readAllMessages\n });\n React.useEffect(() => {\n const listener = Courier.shared.addAuthenticationListener(() => refreshAuth());\n const inboxListener = new CourierInboxDataStoreListener({\n onError: (error) => refreshInbox(error),\n onDataSetChange: () => refreshInbox(),\n onPageAdded: () => refreshInbox(),\n onMessageAdd: () => refreshInbox(),\n onMessageRemove: () => refreshInbox(),\n onMessageUpdate: () => refreshInbox(),\n onUnreadCountChange: () => refreshInbox()\n });\n CourierInboxDatastore.shared.addDataStoreListener(inboxListener);\n refreshAuth();\n refreshInbox();\n return () => {\n listener.remove();\n inboxListener.remove();\n };\n }, []);\n const refreshAuth = () => {\n var _a;\n const options = (_a = Courier.shared.client) == null ? void 0 : _a.options;\n setAuth({\n userId: options == null ? void 0 : options.userId,\n signIn,\n signOut\n });\n };\n const refreshInbox = (error) => {\n const datastore = CourierInboxDatastore.shared;\n setInbox({\n load: loadInbox,\n fetchNextPageOfMessages,\n setPaginationLimit,\n readMessage,\n unreadMessage,\n clickMessage,\n archiveMessage,\n openMessage,\n unarchiveMessage,\n readAllMessages,\n inbox: datastore.inboxDataSet,\n archive: datastore.archiveDataSet,\n unreadCount: datastore.unreadCount,\n error\n });\n };\n return {\n shared: Courier.shared,\n auth,\n inbox\n };\n};\nconst CourierClientComponent = ({ children }) => {\n const [isMounted, setIsMounted] = useState(false);\n useEffect(() => {\n setIsMounted(true);\n }, []);\n if (typeof window === \"undefined\") {\n return null;\n }\n if (!isMounted) {\n return null;\n }\n return /* @__PURE__ */ jsx(Fragment, { children });\n};\nconst CourierRenderContext = createContext(null);\nconst CourierInboxComponent = forwardRef((props, ref) => {\n const render = useContext(CourierRenderContext);\n if (!render) {\n throw new Error(\"RenderContext not found. Ensure CourierInbox is wrapped in a CourierRenderContext.\");\n }\n const inboxRef = useRef(null);\n function handleRef(el) {\n if (ref) {\n if (typeof ref === \"function\") {\n ref(el);\n } else {\n ref.current = el;\n }\n }\n inboxRef.current = el;\n }\n function getEl() {\n return inboxRef.current;\n }\n useEffect(() => {\n const inbox = getEl();\n if (!inbox) return;\n inbox.onMessageClick(props.onMessageClick);\n }, [props.onMessageClick]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox) return;\n inbox.onMessageActionClick(props.onMessageActionClick);\n }, [props.onMessageActionClick]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox) return;\n inbox.onMessageLongPress(props.onMessageLongPress);\n }, [props.onMessageLongPress]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox || !props.renderHeader) return;\n queueMicrotask(() => {\n inbox.setHeader((headerProps) => {\n const reactNode = props.renderHeader(headerProps);\n return render(reactNode);\n });\n });\n }, [props.renderHeader]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox || !props.renderListItem) return;\n queueMicrotask(() => {\n inbox.setListItem((itemProps) => {\n const reactNode = props.renderListItem(itemProps);\n return render(reactNode);\n });\n });\n }, [props.renderListItem]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox || !props.renderEmptyState) return;\n queueMicrotask(() => {\n inbox.setEmptyState((emptyStateProps) => {\n const reactNode = props.renderEmptyState(emptyStateProps);\n return render(reactNode);\n });\n });\n }, [props.renderEmptyState]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox || !props.renderLoadingState) return;\n queueMicrotask(() => {\n inbox.setLoadingState((loadingStateProps) => {\n const reactNode = props.renderLoadingState(loadingStateProps);\n return render(reactNode);\n });\n });\n }, [props.renderLoadingState]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox || !props.renderErrorState) return;\n queueMicrotask(() => {\n inbox.setErrorState((errorStateProps) => {\n const reactNode = props.renderErrorState(errorStateProps);\n return render(reactNode);\n });\n });\n }, [props.renderErrorState]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox || !props.renderPaginationItem) return;\n queueMicrotask(() => {\n inbox.setPaginationItem((paginationProps) => {\n const reactNode = props.renderPaginationItem(paginationProps);\n return render(reactNode);\n });\n });\n }, [props.renderPaginationItem]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox) return;\n queueMicrotask(() => {\n inbox.setFeedType(props.feedType || \"inbox\");\n });\n }, [props.feedType]);\n const children = (\n /* @ts-ignore */\n /* @__PURE__ */ jsx(\n \"courier-inbox\",\n {\n ref: handleRef,\n height: props.height,\n \"light-theme\": props.lightTheme ? JSON.stringify(props.lightTheme) : void 0,\n \"dark-theme\": props.darkTheme ? JSON.stringify(props.darkTheme) : void 0,\n mode: props.mode\n }\n )\n );\n return /* @__PURE__ */ jsx(CourierClientComponent, { children });\n});\nconst CourierInboxPopupMenuComponent = forwardRef(\n (props, ref) => {\n const render = useContext(CourierRenderContext);\n if (!render) {\n throw new Error(\"RenderContext not found. Ensure CourierInboxPopupMenu is wrapped in a CourierRenderContext.\");\n }\n const inboxRef = useRef(null);\n function handleRef(el) {\n if (ref) {\n if (typeof ref === \"function\") {\n ref(el);\n } else {\n ref.current = el;\n }\n }\n inboxRef.current = el;\n }\n function getEl() {\n return inboxRef.current;\n }\n const lastFeedTypeRef = useRef(void 0);\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n if (props.feedType !== lastFeedTypeRef.current) {\n lastFeedTypeRef.current = props.feedType;\n queueMicrotask(() => {\n var _a;\n (_a = menu.setFeedType) == null ? void 0 : _a.call(menu, props.feedType ?? \"inbox\");\n });\n }\n }, [props.feedType]);\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n menu.onMessageClick(props.onMessageClick);\n }, [props.onMessageClick]);\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n menu.onMessageActionClick(props.onMessageActionClick);\n }, [props.onMessageActionClick]);\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n menu.onMessageLongPress(props.onMessageLongPress);\n }, [props.onMessageLongPress]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderHeader) return;\n queueMicrotask(() => {\n menu.setHeader((headerProps) => {\n const reactNode = props.renderHeader(headerProps);\n return render(reactNode);\n });\n });\n }, [props.renderHeader]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderListItem) return;\n queueMicrotask(() => {\n menu.setListItem((itemProps) => {\n const reactNode = props.renderListItem(itemProps);\n return render(reactNode);\n });\n });\n }, [props.renderListItem]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderEmptyState) return;\n queueMicrotask(() => {\n menu.setEmptyState((emptyStateProps) => {\n const reactNode = props.renderEmptyState(emptyStateProps);\n return render(reactNode);\n });\n });\n }, [props.renderEmptyState]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderLoadingState) return;\n queueMicrotask(() => {\n menu.setLoadingState((loadingStateProps) => {\n const reactNode = props.renderLoadingState(loadingStateProps);\n return render(reactNode);\n });\n });\n }, [props.renderLoadingState]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderErrorState) return;\n queueMicrotask(() => {\n menu.setErrorState((errorStateProps) => {\n const reactNode = props.renderErrorState(errorStateProps);\n return render(reactNode);\n });\n });\n }, [props.renderErrorState]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderPaginationItem) return;\n queueMicrotask(() => {\n menu.setPaginationItem((paginationProps) => {\n const reactNode = props.renderPaginationItem(paginationProps);\n return render(reactNode);\n });\n });\n }, [props.renderPaginationItem]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderMenuButton) return;\n queueMicrotask(() => {\n menu.setMenuButton((buttonProps) => {\n const reactNode = props.renderMenuButton(buttonProps);\n return render(reactNode);\n });\n });\n }, [props.renderMenuButton]);\n const children = (\n /* @ts-ignore */\n /* @__PURE__ */ jsx(\n \"courier-inbox-popup-menu\",\n {\n ref: handleRef,\n \"popup-alignment\": props.popupAlignment,\n \"popup-width\": props.popupWidth,\n \"popup-height\": props.popupHeight,\n left: props.left,\n top: props.top,\n right: props.right,\n bottom: props.bottom,\n \"light-theme\": props.lightTheme ? JSON.stringify(props.lightTheme) : void 0,\n \"dark-theme\": props.darkTheme ? JSON.stringify(props.darkTheme) : void 0,\n mode: props.mode\n }\n )\n );\n return /* @__PURE__ */ jsx(CourierClientComponent, { children });\n }\n);\nexport {\n CourierInboxComponent,\n CourierInboxPopupMenuComponent,\n CourierRenderContext,\n useCourier\n};\n//# sourceMappingURL=index.mjs.map\n","import { ReactNode } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { createRoot } from \"react-dom/client\";\n\n/**\n * Converts a React node to an HTMLElement.\n * This function uses flushSync to ensure the DOM is updated synchronously.\n * @param node - The React node to convert.\n * @returns The converted HTMLElement.\n */\nexport function reactNodeToHTMLElement(node: ReactNode): HTMLElement {\n const container = document.createElement('div');\n\n // Use React 18 root\n const root = createRoot(container);\n flushSync(() => {\n root.render(node);\n });\n\n // Wait until React mounts the content synchronously\n const element = container.firstElementChild;\n if (!(element instanceof HTMLElement)) {\n throw new Error(\n 'renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)'\n );\n }\n\n return element;\n}\n","import { forwardRef } from \"react\";\nimport { CourierInbox as CourierInboxElement } from \"@trycourier/courier-ui-inbox\";\nimport { CourierInboxComponent, CourierInboxProps, CourierRenderContext } from \"@trycourier/courier-react-components\";\nimport { reactNodeToHTMLElement } from \"../utils/render\";\n\n/**\n * CourierInbox React component.\n *\n * @example\n * ```tsx\n * const courier = useCourier();\n *\n * useEffect(() => {\n * // Generate a JWT for your user (do this on your backend server)\n * const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT\n *\n * // Authenticate the user with the inbox\n * courier.shared.signIn({\n * userId: $YOUR_USER_ID,\n * jwt: jwt,\n * });\n * }, []);\n *\n * return <CourierInbox />;\n * ```\n */\nexport const CourierInbox = forwardRef<CourierInboxElement, CourierInboxProps>((props, ref) => {\n return (\n <CourierRenderContext.Provider value={reactNodeToHTMLElement}>\n <CourierInboxComponent {...props} ref={ref} />\n </CourierRenderContext.Provider>\n );\n});\n\nCourierInbox.displayName = 'CourierInbox';\n","import { forwardRef } from \"react\";\nimport { CourierInboxPopupMenu as CourierInboxPopupMenuElement } from \"@trycourier/courier-ui-inbox\";\nimport { CourierInboxPopupMenuComponent, CourierInboxPopupMenuProps, CourierRenderContext } from \"@trycourier/courier-react-components\";\nimport { reactNodeToHTMLElement } from \"../utils/render\";\n\n/**\n * CourierInboxPopupMenu React component.\n *\n * This component is used to display a popup menu for a message in the inbox.\n *\n * @example\n * ```tsx\n * const courier = useCourier();\n *\n * useEffect(() => {\n * // Generate a JWT for your user (do this on your backend server)\n * const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT\n *\n * // Authenticate the user with the inbox\n * courier.shared.signIn({\n * userId: $YOUR_USER_ID,\n * jwt: jwt,\n * });\n * }, []);\n *\n * return <CourierInboxPopupMenu />;\n * ```\n */\nexport const CourierInboxPopupMenu = forwardRef<CourierInboxPopupMenuElement, CourierInboxPopupMenuProps>((props, ref) => {\n return (\n <CourierRenderContext.Provider value={reactNodeToHTMLElement}>\n <CourierInboxPopupMenuComponent {...props} ref={ref} />\n </CourierRenderContext.Provider>\n );\n});\n\nCourierInboxPopupMenu.displayName = 'CourierInboxPopupMenu';\n"],"names":["CourierClientComponent","children","isMounted","setIsMounted","useState","useEffect","window","Fragment","CourierRenderContext","createContext","CourierInboxComponent","forwardRef","props","ref","render","useContext","Error","inboxRef","useRef","getEl","current","inbox","onMessageClick","onMessageActionClick","onMessageLongPress","renderHeader","queueMicrotask","setHeader","headerProps","reactNode","renderListItem","setListItem","itemProps","renderEmptyState","setEmptyState","emptyStateProps","renderLoadingState","setLoadingState","loadingStateProps","renderErrorState","setErrorState","errorStateProps","renderPaginationItem","setPaginationItem","paginationProps","setFeedType","feedType","jsx","el","height","lightTheme","JSON","stringify","darkTheme","mode","CourierInboxPopupMenuComponent","lastFeedTypeRef","menu","_a","call","renderMenuButton","setMenuButton","buttonProps","popupAlignment","popupWidth","popupHeight","left","top","right","bottom","reactNodeToHTMLElement","node","container","document","createElement","root","createRoot","flushSync","element","firstElementChild","HTMLElement","CourierInbox","Provider","value","displayName","CourierInboxPopupMenu","signIn","Courier","shared","signOut","loadInbox","CourierInboxDatastore","load","fetchNextPageOfMessages","setPaginationLimit","limit","paginationLimit","readMessage","message","unreadMessage","clickMessage","archiveMessage","openMessage","unarchiveMessage","readAllMessages","auth","setAuth","React","userId","setInbox","listener","addAuthenticationListener","refreshAuth","inboxListener","CourierInboxDataStoreListener","onError","error","refreshInbox","onDataSetChange","onPageAdded","onMessageAdd","onMessageRemove","onMessageUpdate","onUnreadCountChange","addDataStoreListener","remove","options","client","datastore","inboxDataSet","archive","archiveDataSet","unreadCount"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
1
|
+
export { CourierInbox } from './components/courier-inbox';
|
|
2
|
+
export { CourierInboxPopupMenu } from './components/courier-inbox-popup-menu';
|
|
3
|
+
export { useCourier } from '@trycourier/courier-react-components';
|
|
4
|
+
export type { CourierInboxProps, CourierInboxPopupMenuProps, } from '@trycourier/courier-react-components';
|
|
4
5
|
export type { CourierProps, CourierClientOptions, CourierBrand, CourierApiUrls, CourierUserPreferences, CourierUserPreferencesStatus, CourierUserPreferencesChannel, CourierUserPreferencesPaging, CourierUserPreferencesTopic, CourierUserPreferencesTopicResponse, CourierDevice, CourierToken, CourierGetInboxMessageResponse, CourierGetInboxMessagesResponse, InboxMessage, InboxAction, InboxMessageEventEnvelope, } from '@trycourier/courier-js';
|
|
5
6
|
export { markAsRead, markAsUnread, clickMessage, archiveMessage, openMessage } from '@trycourier/courier-ui-inbox';
|
|
6
7
|
export type { CourierInboxHeaderFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxListItemFactoryProps, CourierInboxListItemActionFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxMenuButtonFactoryProps, CourierInboxFeedType } from '@trycourier/courier-ui-inbox';
|
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import React, { createContext, forwardRef, useContext, useRef, useEffect, useState } from "react";
|
|
1
3
|
import { Courier } from "@trycourier/courier-js";
|
|
2
4
|
import { CourierInboxDatastore, CourierInboxDataStoreListener } from "@trycourier/courier-ui-inbox";
|
|
3
5
|
import { archiveMessage, clickMessage, defaultDarkTheme, defaultLightTheme, markAsRead, markAsUnread, mergeTheme, openMessage } from "@trycourier/courier-ui-inbox";
|
|
4
|
-
import React, { useState, useEffect, forwardRef, useRef } from "react";
|
|
5
|
-
import { jsx, Fragment } from "react/jsx-runtime";
|
|
6
6
|
import { flushSync } from "react-dom";
|
|
7
7
|
import { createRoot } from "react-dom/client";
|
|
8
8
|
const useCourier = () => {
|
|
@@ -88,20 +88,6 @@ const useCourier = () => {
|
|
|
88
88
|
inbox
|
|
89
89
|
};
|
|
90
90
|
};
|
|
91
|
-
function reactNodeToHTMLElement(node) {
|
|
92
|
-
const container = document.createElement("div");
|
|
93
|
-
const root = createRoot(container);
|
|
94
|
-
flushSync(() => {
|
|
95
|
-
root.render(node);
|
|
96
|
-
});
|
|
97
|
-
const element = container.firstElementChild;
|
|
98
|
-
if (!(element instanceof HTMLElement)) {
|
|
99
|
-
throw new Error(
|
|
100
|
-
"renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)"
|
|
101
|
-
);
|
|
102
|
-
}
|
|
103
|
-
return element;
|
|
104
|
-
}
|
|
105
91
|
const CourierClientComponent = ({ children }) => {
|
|
106
92
|
const [isMounted, setIsMounted] = useState(false);
|
|
107
93
|
useEffect(() => {
|
|
@@ -115,111 +101,130 @@ const CourierClientComponent = ({ children }) => {
|
|
|
115
101
|
}
|
|
116
102
|
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
117
103
|
};
|
|
118
|
-
const
|
|
104
|
+
const CourierRenderContext = createContext(null);
|
|
105
|
+
const CourierInboxComponent = forwardRef((props, ref) => {
|
|
106
|
+
const render = useContext(CourierRenderContext);
|
|
107
|
+
if (!render) {
|
|
108
|
+
throw new Error("RenderContext not found. Ensure CourierInbox is wrapped in a CourierRenderContext.");
|
|
109
|
+
}
|
|
119
110
|
const inboxRef = useRef(null);
|
|
120
|
-
|
|
121
|
-
if (
|
|
122
|
-
ref
|
|
123
|
-
|
|
124
|
-
|
|
111
|
+
function handleRef(el) {
|
|
112
|
+
if (ref) {
|
|
113
|
+
if (typeof ref === "function") {
|
|
114
|
+
ref(el);
|
|
115
|
+
} else {
|
|
116
|
+
ref.current = el;
|
|
117
|
+
}
|
|
125
118
|
}
|
|
126
|
-
|
|
119
|
+
inboxRef.current = el;
|
|
120
|
+
}
|
|
121
|
+
function getEl() {
|
|
122
|
+
return inboxRef.current;
|
|
123
|
+
}
|
|
127
124
|
useEffect(() => {
|
|
128
|
-
const inbox =
|
|
125
|
+
const inbox = getEl();
|
|
129
126
|
if (!inbox) return;
|
|
130
127
|
inbox.onMessageClick(props.onMessageClick);
|
|
131
|
-
}, [props.onMessageClick
|
|
128
|
+
}, [props.onMessageClick]);
|
|
132
129
|
useEffect(() => {
|
|
133
|
-
const inbox =
|
|
130
|
+
const inbox = getEl();
|
|
134
131
|
if (!inbox) return;
|
|
135
132
|
inbox.onMessageActionClick(props.onMessageActionClick);
|
|
136
|
-
}, [props.onMessageActionClick
|
|
133
|
+
}, [props.onMessageActionClick]);
|
|
137
134
|
useEffect(() => {
|
|
138
|
-
const inbox =
|
|
135
|
+
const inbox = getEl();
|
|
139
136
|
if (!inbox) return;
|
|
140
137
|
inbox.onMessageLongPress(props.onMessageLongPress);
|
|
141
|
-
}, [props.onMessageLongPress
|
|
138
|
+
}, [props.onMessageLongPress]);
|
|
142
139
|
useEffect(() => {
|
|
143
|
-
const inbox =
|
|
140
|
+
const inbox = getEl();
|
|
144
141
|
if (!inbox || !props.renderHeader) return;
|
|
145
142
|
queueMicrotask(() => {
|
|
146
143
|
inbox.setHeader((headerProps) => {
|
|
147
144
|
const reactNode = props.renderHeader(headerProps);
|
|
148
|
-
return
|
|
145
|
+
return render(reactNode);
|
|
149
146
|
});
|
|
150
147
|
});
|
|
151
|
-
}, [props.renderHeader
|
|
148
|
+
}, [props.renderHeader]);
|
|
152
149
|
useEffect(() => {
|
|
153
|
-
const inbox =
|
|
150
|
+
const inbox = getEl();
|
|
154
151
|
if (!inbox || !props.renderListItem) return;
|
|
155
152
|
queueMicrotask(() => {
|
|
156
153
|
inbox.setListItem((itemProps) => {
|
|
157
154
|
const reactNode = props.renderListItem(itemProps);
|
|
158
|
-
return
|
|
155
|
+
return render(reactNode);
|
|
159
156
|
});
|
|
160
157
|
});
|
|
161
|
-
}, [props.renderListItem
|
|
158
|
+
}, [props.renderListItem]);
|
|
162
159
|
useEffect(() => {
|
|
163
|
-
const inbox =
|
|
160
|
+
const inbox = getEl();
|
|
164
161
|
if (!inbox || !props.renderEmptyState) return;
|
|
165
162
|
queueMicrotask(() => {
|
|
166
163
|
inbox.setEmptyState((emptyStateProps) => {
|
|
167
164
|
const reactNode = props.renderEmptyState(emptyStateProps);
|
|
168
|
-
return
|
|
165
|
+
return render(reactNode);
|
|
169
166
|
});
|
|
170
167
|
});
|
|
171
|
-
}, [props.renderEmptyState
|
|
168
|
+
}, [props.renderEmptyState]);
|
|
172
169
|
useEffect(() => {
|
|
173
|
-
const inbox =
|
|
170
|
+
const inbox = getEl();
|
|
174
171
|
if (!inbox || !props.renderLoadingState) return;
|
|
175
172
|
queueMicrotask(() => {
|
|
176
173
|
inbox.setLoadingState((loadingStateProps) => {
|
|
177
174
|
const reactNode = props.renderLoadingState(loadingStateProps);
|
|
178
|
-
return
|
|
175
|
+
return render(reactNode);
|
|
179
176
|
});
|
|
180
177
|
});
|
|
181
|
-
}, [props.renderLoadingState
|
|
178
|
+
}, [props.renderLoadingState]);
|
|
182
179
|
useEffect(() => {
|
|
183
|
-
const inbox =
|
|
180
|
+
const inbox = getEl();
|
|
184
181
|
if (!inbox || !props.renderErrorState) return;
|
|
185
182
|
queueMicrotask(() => {
|
|
186
183
|
inbox.setErrorState((errorStateProps) => {
|
|
187
184
|
const reactNode = props.renderErrorState(errorStateProps);
|
|
188
|
-
return
|
|
185
|
+
return render(reactNode);
|
|
189
186
|
});
|
|
190
187
|
});
|
|
191
|
-
}, [props.renderErrorState
|
|
188
|
+
}, [props.renderErrorState]);
|
|
192
189
|
useEffect(() => {
|
|
193
|
-
const inbox =
|
|
190
|
+
const inbox = getEl();
|
|
194
191
|
if (!inbox || !props.renderPaginationItem) return;
|
|
195
192
|
queueMicrotask(() => {
|
|
196
193
|
inbox.setPaginationItem((paginationProps) => {
|
|
197
194
|
const reactNode = props.renderPaginationItem(paginationProps);
|
|
198
|
-
return
|
|
195
|
+
return render(reactNode);
|
|
199
196
|
});
|
|
200
197
|
});
|
|
201
|
-
}, [props.renderPaginationItem
|
|
198
|
+
}, [props.renderPaginationItem]);
|
|
202
199
|
useEffect(() => {
|
|
203
|
-
const inbox =
|
|
200
|
+
const inbox = getEl();
|
|
204
201
|
if (!inbox) return;
|
|
205
202
|
queueMicrotask(() => {
|
|
206
203
|
inbox.setFeedType(props.feedType || "inbox");
|
|
207
204
|
});
|
|
208
|
-
}, [props.feedType
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
205
|
+
}, [props.feedType]);
|
|
206
|
+
const children = (
|
|
207
|
+
/* @ts-ignore */
|
|
208
|
+
/* @__PURE__ */ jsx(
|
|
209
|
+
"courier-inbox",
|
|
210
|
+
{
|
|
211
|
+
ref: handleRef,
|
|
212
|
+
height: props.height,
|
|
213
|
+
"light-theme": props.lightTheme ? JSON.stringify(props.lightTheme) : void 0,
|
|
214
|
+
"dark-theme": props.darkTheme ? JSON.stringify(props.darkTheme) : void 0,
|
|
215
|
+
mode: props.mode
|
|
216
|
+
}
|
|
217
|
+
)
|
|
218
|
+
);
|
|
219
|
+
return /* @__PURE__ */ jsx(CourierClientComponent, { children });
|
|
219
220
|
});
|
|
220
|
-
|
|
221
|
-
const CourierInboxPopupMenu = forwardRef(
|
|
221
|
+
const CourierInboxPopupMenuComponent = forwardRef(
|
|
222
222
|
(props, ref) => {
|
|
223
|
+
const render = useContext(CourierRenderContext);
|
|
224
|
+
if (!render) {
|
|
225
|
+
throw new Error("RenderContext not found. Ensure CourierInboxPopupMenu is wrapped in a CourierRenderContext.");
|
|
226
|
+
}
|
|
227
|
+
const inboxRef = useRef(null);
|
|
223
228
|
function handleRef(el) {
|
|
224
229
|
if (ref) {
|
|
225
230
|
if (typeof ref === "function") {
|
|
@@ -228,10 +233,10 @@ const CourierInboxPopupMenu = forwardRef(
|
|
|
228
233
|
ref.current = el;
|
|
229
234
|
}
|
|
230
235
|
}
|
|
231
|
-
|
|
236
|
+
inboxRef.current = el;
|
|
232
237
|
}
|
|
233
238
|
function getEl() {
|
|
234
|
-
return
|
|
239
|
+
return inboxRef.current;
|
|
235
240
|
}
|
|
236
241
|
const lastFeedTypeRef = useRef(void 0);
|
|
237
242
|
useEffect(() => {
|
|
@@ -266,7 +271,7 @@ const CourierInboxPopupMenu = forwardRef(
|
|
|
266
271
|
queueMicrotask(() => {
|
|
267
272
|
menu.setHeader((headerProps) => {
|
|
268
273
|
const reactNode = props.renderHeader(headerProps);
|
|
269
|
-
return
|
|
274
|
+
return render(reactNode);
|
|
270
275
|
});
|
|
271
276
|
});
|
|
272
277
|
}, [props.renderHeader]);
|
|
@@ -276,7 +281,7 @@ const CourierInboxPopupMenu = forwardRef(
|
|
|
276
281
|
queueMicrotask(() => {
|
|
277
282
|
menu.setListItem((itemProps) => {
|
|
278
283
|
const reactNode = props.renderListItem(itemProps);
|
|
279
|
-
return
|
|
284
|
+
return render(reactNode);
|
|
280
285
|
});
|
|
281
286
|
});
|
|
282
287
|
}, [props.renderListItem]);
|
|
@@ -286,7 +291,7 @@ const CourierInboxPopupMenu = forwardRef(
|
|
|
286
291
|
queueMicrotask(() => {
|
|
287
292
|
menu.setEmptyState((emptyStateProps) => {
|
|
288
293
|
const reactNode = props.renderEmptyState(emptyStateProps);
|
|
289
|
-
return
|
|
294
|
+
return render(reactNode);
|
|
290
295
|
});
|
|
291
296
|
});
|
|
292
297
|
}, [props.renderEmptyState]);
|
|
@@ -296,7 +301,7 @@ const CourierInboxPopupMenu = forwardRef(
|
|
|
296
301
|
queueMicrotask(() => {
|
|
297
302
|
menu.setLoadingState((loadingStateProps) => {
|
|
298
303
|
const reactNode = props.renderLoadingState(loadingStateProps);
|
|
299
|
-
return
|
|
304
|
+
return render(reactNode);
|
|
300
305
|
});
|
|
301
306
|
});
|
|
302
307
|
}, [props.renderLoadingState]);
|
|
@@ -306,7 +311,7 @@ const CourierInboxPopupMenu = forwardRef(
|
|
|
306
311
|
queueMicrotask(() => {
|
|
307
312
|
menu.setErrorState((errorStateProps) => {
|
|
308
313
|
const reactNode = props.renderErrorState(errorStateProps);
|
|
309
|
-
return
|
|
314
|
+
return render(reactNode);
|
|
310
315
|
});
|
|
311
316
|
});
|
|
312
317
|
}, [props.renderErrorState]);
|
|
@@ -316,7 +321,7 @@ const CourierInboxPopupMenu = forwardRef(
|
|
|
316
321
|
queueMicrotask(() => {
|
|
317
322
|
menu.setPaginationItem((paginationProps) => {
|
|
318
323
|
const reactNode = props.renderPaginationItem(paginationProps);
|
|
319
|
-
return
|
|
324
|
+
return render(reactNode);
|
|
320
325
|
});
|
|
321
326
|
});
|
|
322
327
|
}, [props.renderPaginationItem]);
|
|
@@ -326,28 +331,53 @@ const CourierInboxPopupMenu = forwardRef(
|
|
|
326
331
|
queueMicrotask(() => {
|
|
327
332
|
menu.setMenuButton((buttonProps) => {
|
|
328
333
|
const reactNode = props.renderMenuButton(buttonProps);
|
|
329
|
-
return
|
|
334
|
+
return render(reactNode);
|
|
330
335
|
});
|
|
331
336
|
});
|
|
332
337
|
}, [props.renderMenuButton]);
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
338
|
+
const children = (
|
|
339
|
+
/* @ts-ignore */
|
|
340
|
+
/* @__PURE__ */ jsx(
|
|
341
|
+
"courier-inbox-popup-menu",
|
|
342
|
+
{
|
|
343
|
+
ref: handleRef,
|
|
344
|
+
"popup-alignment": props.popupAlignment,
|
|
345
|
+
"popup-width": props.popupWidth,
|
|
346
|
+
"popup-height": props.popupHeight,
|
|
347
|
+
left: props.left,
|
|
348
|
+
top: props.top,
|
|
349
|
+
right: props.right,
|
|
350
|
+
bottom: props.bottom,
|
|
351
|
+
"light-theme": props.lightTheme ? JSON.stringify(props.lightTheme) : void 0,
|
|
352
|
+
"dark-theme": props.darkTheme ? JSON.stringify(props.darkTheme) : void 0,
|
|
353
|
+
mode: props.mode
|
|
354
|
+
}
|
|
355
|
+
)
|
|
356
|
+
);
|
|
357
|
+
return /* @__PURE__ */ jsx(CourierClientComponent, { children });
|
|
349
358
|
}
|
|
350
359
|
);
|
|
360
|
+
function reactNodeToHTMLElement(node) {
|
|
361
|
+
const container = document.createElement("div");
|
|
362
|
+
const root = createRoot(container);
|
|
363
|
+
flushSync(() => {
|
|
364
|
+
root.render(node);
|
|
365
|
+
});
|
|
366
|
+
const element = container.firstElementChild;
|
|
367
|
+
if (!(element instanceof HTMLElement)) {
|
|
368
|
+
throw new Error(
|
|
369
|
+
"renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)"
|
|
370
|
+
);
|
|
371
|
+
}
|
|
372
|
+
return element;
|
|
373
|
+
}
|
|
374
|
+
const CourierInbox = forwardRef((props, ref) => {
|
|
375
|
+
return /* @__PURE__ */ jsx(CourierRenderContext.Provider, { value: reactNodeToHTMLElement, children: /* @__PURE__ */ jsx(CourierInboxComponent, { ...props, ref }) });
|
|
376
|
+
});
|
|
377
|
+
CourierInbox.displayName = "CourierInbox";
|
|
378
|
+
const CourierInboxPopupMenu = forwardRef((props, ref) => {
|
|
379
|
+
return /* @__PURE__ */ jsx(CourierRenderContext.Provider, { value: reactNodeToHTMLElement, children: /* @__PURE__ */ jsx(CourierInboxPopupMenuComponent, { ...props, ref }) });
|
|
380
|
+
});
|
|
351
381
|
CourierInboxPopupMenu.displayName = "CourierInboxPopupMenu";
|
|
352
382
|
export {
|
|
353
383
|
CourierInbox,
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../src/hooks/use-courier.tsx","../src/utils/utils.tsx","../src/components/courier-client-component.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx"],"sourcesContent":["import React from 'react';\nimport { Courier, CourierProps, InboxMessage } from '@trycourier/courier-js';\nimport { CourierInboxDatastore, CourierInboxDataStoreListener, CourierInboxFeedType, InboxDataSet } from '@trycourier/courier-ui-inbox';\n\ntype AuthenticationHooks = {\n userId?: string,\n signIn: (props: CourierProps) => void,\n signOut: () => void\n}\n\ntype InboxHooks = {\n load: (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => Promise<void>,\n fetchNextPageOfMessages: (props: { feedType: CourierInboxFeedType }) => Promise<InboxDataSet | null>,\n setPaginationLimit: (limit: number) => void,\n readMessage: (message: InboxMessage) => Promise<void>,\n unreadMessage: (message: InboxMessage) => Promise<void>,\n clickMessage: (message: InboxMessage) => Promise<void>,\n archiveMessage: (message: InboxMessage) => Promise<void>,\n openMessage: (message: InboxMessage) => Promise<void>,\n unarchiveMessage: (message: InboxMessage) => Promise<void>,\n readAllMessages: () => Promise<void>,\n inbox?: InboxDataSet,\n archive?: InboxDataSet,\n unreadCount?: number,\n error?: Error\n}\n\n// A hook for managing the shared state of Courier\n// If you want to use more functions, checkout the Courier JS SDK which\n// can be used directly by importing from '@trycourier/courier-js'\nexport const useCourier = () => {\n\n // Authentication Functions\n const signIn = (props: CourierProps) => Courier.shared.signIn(props);\n const signOut = () => Courier.shared.signOut();\n\n // Inbox Functions\n const loadInbox = (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => CourierInboxDatastore.shared.load(props);\n const fetchNextPageOfMessages = (props: { feedType: CourierInboxFeedType }) => CourierInboxDatastore.shared.fetchNextPageOfMessages(props);\n const setPaginationLimit = (limit: number) => Courier.shared.paginationLimit = limit;\n const readMessage = (message: InboxMessage) => CourierInboxDatastore.shared.readMessage({ message });\n const unreadMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unreadMessage({ message });\n const clickMessage = (message: InboxMessage) => CourierInboxDatastore.shared.clickMessage({ message });\n const archiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.archiveMessage({ message });\n const openMessage = (message: InboxMessage) => CourierInboxDatastore.shared.openMessage({ message });\n const unarchiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unarchiveMessage({ message });\n const readAllMessages = () => CourierInboxDatastore.shared.readAllMessages();\n\n // State\n const [auth, setAuth] = React.useState<AuthenticationHooks>({\n userId: undefined,\n signIn,\n signOut\n });\n\n const [inbox, setInbox] = React.useState<InboxHooks>({\n load: loadInbox,\n fetchNextPageOfMessages,\n setPaginationLimit,\n readMessage,\n unreadMessage,\n clickMessage,\n archiveMessage,\n openMessage,\n unarchiveMessage,\n readAllMessages\n });\n\n React.useEffect(() => {\n\n // Add a listener to the Courier instance\n const listener = Courier.shared.addAuthenticationListener(() => refreshAuth());\n\n // Add inbox data store listener\n const inboxListener = new CourierInboxDataStoreListener({\n onError: (error: Error) => refreshInbox(error),\n onDataSetChange: () => refreshInbox(),\n onPageAdded: () => refreshInbox(),\n onMessageAdd: () => refreshInbox(),\n onMessageRemove: () => refreshInbox(),\n onMessageUpdate: () => refreshInbox(),\n onUnreadCountChange: () => refreshInbox()\n });\n CourierInboxDatastore.shared.addDataStoreListener(inboxListener);\n\n // Set initial values\n refreshAuth();\n refreshInbox();\n\n // Remove listeners when the component unmounts\n return () => {\n listener.remove();\n inboxListener.remove();\n };\n }, []);\n\n const refreshAuth = () => {\n const options = Courier.shared.client?.options;\n setAuth({\n userId: options?.userId,\n signIn,\n signOut\n });\n }\n\n const refreshInbox = (error?: Error) => {\n const datastore = CourierInboxDatastore.shared;\n setInbox({\n load: loadInbox,\n fetchNextPageOfMessages,\n setPaginationLimit,\n readMessage,\n unreadMessage,\n clickMessage,\n archiveMessage,\n openMessage,\n unarchiveMessage,\n readAllMessages,\n inbox: datastore.inboxDataSet,\n archive: datastore.archiveDataSet,\n unreadCount: datastore.unreadCount,\n error: error,\n });\n }\n\n return {\n shared: Courier.shared,\n auth: auth,\n inbox: inbox,\n };\n};\n","import { ReactNode } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { createRoot } from \"react-dom/client\";\n\n/**\n * Converts a React node to an HTMLElement.\n * This function uses flushSync to ensure the DOM is updated synchronously.\n * @param node - The React node to convert.\n * @returns The converted HTMLElement.\n */\nexport function reactNodeToHTMLElement(node: ReactNode): HTMLElement {\n const container = document.createElement('div');\n\n // Use React 18 root\n const root = createRoot(container);\n flushSync(() => {\n root.render(node);\n });\n\n // Wait until React mounts the content synchronously\n const element = container.firstElementChild;\n if (!(element instanceof HTMLElement)) {\n throw new Error(\n 'renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)'\n );\n }\n\n return element;\n}","import React, { useState, useEffect } from 'react';\n\ninterface CourierClientProps {\n children: React.ReactNode;\n}\n\n// This class prevents issues with server side rendering react components\n// It will force the component to only render client side\n// A future update could support server side rendering if there is enough demand\nexport const CourierClientComponent: React.FC<CourierClientProps> = ({ children }) => {\n const [isMounted, setIsMounted] = useState(false);\n\n useEffect(() => {\n setIsMounted(true);\n }, []);\n\n // During SSR, render nothing or fallback\n if (typeof window === 'undefined') {\n return null;\n }\n\n if (!isMounted) {\n return null;\n }\n\n return <>{children}</>;\n};","import { useRef, useEffect, forwardRef, ReactNode } from \"react\";\nimport { CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxTheme, CourierInbox as CourierInboxElement, CourierInboxHeaderFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxFeedType } from \"@trycourier/courier-ui-inbox\";\nimport { reactNodeToHTMLElement } from \"../utils/utils\";\nimport { CourierComponentThemeMode } from \"@trycourier/courier-ui-core\";\nimport { CourierClientComponent } from \"./courier-client-component\";\n\nexport interface CourierInboxProps {\n /** Height of the inbox container. Defaults to \"auto\" and will resize itself based on it's children. */\n height?: string;\n\n /** Theme object for light mode */\n lightTheme?: CourierInboxTheme;\n\n /** Theme object for dark mode */\n darkTheme?: CourierInboxTheme;\n\n /** Theme mode: \"light\", \"dark\", or \"system\". Defaults to \"system\" */\n mode?: CourierComponentThemeMode;\n\n /** Type of feed to display in the inbox (\"inbox\" or \"archive\"). Defaults to \"inbox\" */\n feedType?: CourierInboxFeedType;\n\n /** Callback fired when a message is clicked. */\n onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n\n /** Callback fired when a message action (e.g., button) is clicked. */\n onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n\n /** Callback fired when a message is long-pressed (for mobile/gesture support). Only works on devices that support touch. */\n onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n\n /** Allows you to pass a custom component as the header. */\n renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the list item. */\n renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the empty state. */\n renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the loading state. */\n renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the error state. */\n renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the pagination list item. */\n renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInbox = forwardRef<CourierInboxElement, CourierInboxProps>((props, ref) => {\n const inboxRef = useRef<CourierInboxElement | null>(null);\n\n // Expose the internal ref to the parent if a ref was passed in\n useEffect(() => {\n if (typeof ref === \"function\") {\n ref(inboxRef.current);\n } else if (ref) {\n (ref as React.RefObject<CourierInboxElement | null>).current = inboxRef.current;\n }\n }, [ref]);\n\n // Handle message click\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox) return;\n inbox.onMessageClick(props.onMessageClick);\n }, [props.onMessageClick, inboxRef]);\n\n // Handle message action click\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox) return;\n inbox.onMessageActionClick(props.onMessageActionClick);\n }, [props.onMessageActionClick, inboxRef]);\n\n // Handle message long press\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox) return;\n inbox.onMessageLongPress(props.onMessageLongPress);\n }, [props.onMessageLongPress, inboxRef]);\n\n // Render header\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox || !props.renderHeader) return;\n queueMicrotask(() => {\n inbox.setHeader((headerProps?: CourierInboxHeaderFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderHeader!(headerProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderHeader, inboxRef]);\n\n // Render list item\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox || !props.renderListItem) return;\n queueMicrotask(() => {\n inbox.setListItem((itemProps?: CourierInboxListItemFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderListItem!(itemProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderListItem, inboxRef]);\n\n // Render empty state\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox || !props.renderEmptyState) return;\n queueMicrotask(() => {\n inbox.setEmptyState((emptyStateProps?: CourierInboxStateEmptyFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderEmptyState!(emptyStateProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderEmptyState, inboxRef]);\n\n // Render loading state\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox || !props.renderLoadingState) return;\n queueMicrotask(() => {\n inbox.setLoadingState((loadingStateProps?: CourierInboxStateLoadingFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderLoadingState!(loadingStateProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderLoadingState, inboxRef]);\n\n // Render error state\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox || !props.renderErrorState) return;\n queueMicrotask(() => {\n inbox.setErrorState((errorStateProps?: CourierInboxStateErrorFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderErrorState!(errorStateProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderErrorState, inboxRef]);\n\n // Render pagination item\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox || !props.renderPaginationItem) return;\n queueMicrotask(() => {\n inbox.setPaginationItem((paginationProps?: CourierInboxPaginationItemFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderPaginationItem!(paginationProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderPaginationItem, inboxRef]);\n\n // Set feed type\n useEffect(() => {\n const inbox = inboxRef.current;\n if (!inbox) return;\n queueMicrotask(() => {\n inbox.setFeedType(props.feedType || 'inbox');\n });\n }, [props.feedType, inboxRef]);\n\n return (\n <CourierClientComponent>\n {/* @ts-ignore */}\n <courier-inbox\n ref={inboxRef}\n height={props.height}\n light-theme={props.lightTheme ? JSON.stringify(props.lightTheme) : undefined}\n dark-theme={props.darkTheme ? JSON.stringify(props.darkTheme) : undefined}\n mode={props.mode}\n />\n </CourierClientComponent>\n );\n});\n\nCourierInbox.displayName = 'CourierInbox';","import { useEffect, useRef, forwardRef, ReactNode } from 'react';\nimport {\n CourierInboxFeedType,\n CourierInboxHeaderFactoryProps,\n CourierInboxListItemActionFactoryProps,\n CourierInboxListItemFactoryProps,\n CourierInboxMenuButtonFactoryProps,\n CourierInboxPopupMenu as CourierInboxPopupMenuElement,\n CourierInboxPaginationItemFactoryProps,\n CourierInboxPopupAlignment,\n CourierInboxStateEmptyFactoryProps,\n CourierInboxStateErrorFactoryProps,\n CourierInboxStateLoadingFactoryProps,\n CourierInboxTheme,\n} from '@trycourier/courier-ui-inbox';\nimport { reactNodeToHTMLElement } from '../utils/utils';\nimport { CourierComponentThemeMode } from '@trycourier/courier-ui-core';\nimport { CourierClientComponent } from './courier-client-component';\n\nexport interface CourierInboxPopupMenuProps {\n /** Alignment of the popup menu: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center', 'center-right', 'center-left', 'center-center'. */\n popupAlignment?: CourierInboxPopupAlignment;\n\n /** Width of the popup menu container. */\n popupWidth?: string;\n\n /** Height of the popup menu container. */\n popupHeight?: string;\n\n /** CSS left position for the popup menu. */\n left?: string;\n\n /** CSS top position for the popup menu. */\n top?: string;\n\n /** CSS right position for the popup menu. */\n right?: string;\n\n /** CSS bottom position for the popup menu. */\n bottom?: string;\n\n /** Theme object for light mode. */\n lightTheme?: CourierInboxTheme;\n\n /** Theme object for dark mode. */\n darkTheme?: CourierInboxTheme;\n\n /** Theme mode: 'light', 'dark', or 'system'. */\n mode?: CourierComponentThemeMode;\n\n /** Type of feed to display in the popup menu ('inbox' or 'archive'). */\n feedType?: CourierInboxFeedType;\n\n /** Callback fired when a message is clicked. */\n onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n\n /** Callback fired when a message action (e.g., button) is clicked. */\n onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n\n /** Callback fired when a message is long-pressed (for mobile/gesture support). */\n onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n\n /** Allows you to pass a custom component as the header. */\n renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the list item. */\n renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the empty state. */\n renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the loading state. */\n renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the error state. */\n renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the pagination list item. */\n renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n\n /** Allows you to pass a custom component as the menu button. */\n renderMenuButton?: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInboxPopupMenu = forwardRef<CourierInboxPopupMenuElement, CourierInboxPopupMenuProps>(\n (props, ref) => {\n // Instead of using useRef and assigning to the custom element,\n // we use a callback ref to ensure the ref is set as soon as the element is mounted.\n function handleRef(el: CourierInboxPopupMenuElement | null) {\n if (ref) {\n if (typeof ref === 'function') {\n ref(el);\n } else {\n (ref as React.RefObject<CourierInboxPopupMenuElement | null>).current = el;\n }\n }\n // Store the element for use in effects\n (handleRef as any)._el = el;\n }\n\n // Helper to get the current element\n function getEl(): CourierInboxPopupMenuElement | null {\n return (handleRef as any)._el ?? null;\n }\n\n // Use a ref to track the last set feedType to prevent duplicate state changes\n const lastFeedTypeRef = useRef<CourierInboxFeedType | undefined>(undefined);\n\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n // Only set feedType if it has changed from the last set value\n if (props.feedType !== lastFeedTypeRef.current) {\n lastFeedTypeRef.current = props.feedType;\n queueMicrotask(() => {\n menu.setFeedType?.(props.feedType ?? 'inbox');\n });\n }\n }, [props.feedType]);\n\n // Handle message click\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n menu.onMessageClick(props.onMessageClick);\n }, [props.onMessageClick]);\n\n // Handle message action click\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n menu.onMessageActionClick(props.onMessageActionClick);\n }, [props.onMessageActionClick]);\n\n // Handle message long press\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n menu.onMessageLongPress(props.onMessageLongPress);\n }, [props.onMessageLongPress]);\n\n // Render header\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderHeader) return;\n queueMicrotask(() => {\n menu.setHeader((headerProps?: CourierInboxHeaderFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderHeader!(headerProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderHeader]);\n\n // Render list item\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderListItem) return;\n queueMicrotask(() => {\n menu.setListItem((itemProps?: CourierInboxListItemFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderListItem!(itemProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderListItem]);\n\n // Render empty state\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderEmptyState) return;\n queueMicrotask(() => {\n menu.setEmptyState((emptyStateProps?: CourierInboxStateEmptyFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderEmptyState!(emptyStateProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderEmptyState]);\n\n // Render loading state\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderLoadingState) return;\n queueMicrotask(() => {\n menu.setLoadingState((loadingStateProps?: CourierInboxStateLoadingFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderLoadingState!(loadingStateProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderLoadingState]);\n\n // Render error state\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderErrorState) return;\n queueMicrotask(() => {\n menu.setErrorState((errorStateProps?: CourierInboxStateErrorFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderErrorState!(errorStateProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderErrorState]);\n\n // Render pagination item\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderPaginationItem) return;\n queueMicrotask(() => {\n menu.setPaginationItem((paginationProps?: CourierInboxPaginationItemFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderPaginationItem!(paginationProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderPaginationItem]);\n\n // Render menu button\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderMenuButton) return;\n queueMicrotask(() => {\n menu.setMenuButton((buttonProps?: CourierInboxMenuButtonFactoryProps | undefined | null): HTMLElement => {\n const reactNode = props.renderMenuButton!(buttonProps);\n return reactNodeToHTMLElement(reactNode);\n });\n });\n }, [props.renderMenuButton]);\n\n return (\n <CourierClientComponent>\n {/* @ts-ignore */}\n <courier-inbox-popup-menu\n ref={handleRef}\n popup-alignment={props.popupAlignment}\n popup-width={props.popupWidth}\n popup-height={props.popupHeight}\n left={props.left}\n top={props.top}\n right={props.right}\n bottom={props.bottom}\n light-theme={props.lightTheme ? JSON.stringify(props.lightTheme) : undefined}\n dark-theme={props.darkTheme ? JSON.stringify(props.darkTheme) : undefined}\n mode={props.mode}\n />\n </CourierClientComponent>\n );\n }\n);\n\nCourierInboxPopupMenu.displayName = 'CourierInboxPopupMenu';"],"names":["clickMessage","archiveMessage","openMessage"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../courier-react-components/dist/index.mjs","../src/utils/render.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx"],"sourcesContent":["import { Courier } from \"@trycourier/courier-js\";\nimport { CourierInboxDatastore, CourierInboxDataStoreListener } from \"@trycourier/courier-ui-inbox\";\nimport React, { useState, useEffect, createContext, forwardRef, useContext, useRef } from \"react\";\nimport { jsx, Fragment } from \"react/jsx-runtime\";\nconst useCourier = () => {\n const signIn = (props) => Courier.shared.signIn(props);\n const signOut = () => Courier.shared.signOut();\n const loadInbox = (props) => CourierInboxDatastore.shared.load(props);\n const fetchNextPageOfMessages = (props) => CourierInboxDatastore.shared.fetchNextPageOfMessages(props);\n const setPaginationLimit = (limit) => Courier.shared.paginationLimit = limit;\n const readMessage = (message) => CourierInboxDatastore.shared.readMessage({ message });\n const unreadMessage = (message) => CourierInboxDatastore.shared.unreadMessage({ message });\n const clickMessage = (message) => CourierInboxDatastore.shared.clickMessage({ message });\n const archiveMessage = (message) => CourierInboxDatastore.shared.archiveMessage({ message });\n const openMessage = (message) => CourierInboxDatastore.shared.openMessage({ message });\n const unarchiveMessage = (message) => CourierInboxDatastore.shared.unarchiveMessage({ message });\n const readAllMessages = () => CourierInboxDatastore.shared.readAllMessages();\n const [auth, setAuth] = React.useState({\n userId: void 0,\n signIn,\n signOut\n });\n const [inbox, setInbox] = React.useState({\n load: loadInbox,\n fetchNextPageOfMessages,\n setPaginationLimit,\n readMessage,\n unreadMessage,\n clickMessage,\n archiveMessage,\n openMessage,\n unarchiveMessage,\n readAllMessages\n });\n React.useEffect(() => {\n const listener = Courier.shared.addAuthenticationListener(() => refreshAuth());\n const inboxListener = new CourierInboxDataStoreListener({\n onError: (error) => refreshInbox(error),\n onDataSetChange: () => refreshInbox(),\n onPageAdded: () => refreshInbox(),\n onMessageAdd: () => refreshInbox(),\n onMessageRemove: () => refreshInbox(),\n onMessageUpdate: () => refreshInbox(),\n onUnreadCountChange: () => refreshInbox()\n });\n CourierInboxDatastore.shared.addDataStoreListener(inboxListener);\n refreshAuth();\n refreshInbox();\n return () => {\n listener.remove();\n inboxListener.remove();\n };\n }, []);\n const refreshAuth = () => {\n var _a;\n const options = (_a = Courier.shared.client) == null ? void 0 : _a.options;\n setAuth({\n userId: options == null ? void 0 : options.userId,\n signIn,\n signOut\n });\n };\n const refreshInbox = (error) => {\n const datastore = CourierInboxDatastore.shared;\n setInbox({\n load: loadInbox,\n fetchNextPageOfMessages,\n setPaginationLimit,\n readMessage,\n unreadMessage,\n clickMessage,\n archiveMessage,\n openMessage,\n unarchiveMessage,\n readAllMessages,\n inbox: datastore.inboxDataSet,\n archive: datastore.archiveDataSet,\n unreadCount: datastore.unreadCount,\n error\n });\n };\n return {\n shared: Courier.shared,\n auth,\n inbox\n };\n};\nconst CourierClientComponent = ({ children }) => {\n const [isMounted, setIsMounted] = useState(false);\n useEffect(() => {\n setIsMounted(true);\n }, []);\n if (typeof window === \"undefined\") {\n return null;\n }\n if (!isMounted) {\n return null;\n }\n return /* @__PURE__ */ jsx(Fragment, { children });\n};\nconst CourierRenderContext = createContext(null);\nconst CourierInboxComponent = forwardRef((props, ref) => {\n const render = useContext(CourierRenderContext);\n if (!render) {\n throw new Error(\"RenderContext not found. Ensure CourierInbox is wrapped in a CourierRenderContext.\");\n }\n const inboxRef = useRef(null);\n function handleRef(el) {\n if (ref) {\n if (typeof ref === \"function\") {\n ref(el);\n } else {\n ref.current = el;\n }\n }\n inboxRef.current = el;\n }\n function getEl() {\n return inboxRef.current;\n }\n useEffect(() => {\n const inbox = getEl();\n if (!inbox) return;\n inbox.onMessageClick(props.onMessageClick);\n }, [props.onMessageClick]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox) return;\n inbox.onMessageActionClick(props.onMessageActionClick);\n }, [props.onMessageActionClick]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox) return;\n inbox.onMessageLongPress(props.onMessageLongPress);\n }, [props.onMessageLongPress]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox || !props.renderHeader) return;\n queueMicrotask(() => {\n inbox.setHeader((headerProps) => {\n const reactNode = props.renderHeader(headerProps);\n return render(reactNode);\n });\n });\n }, [props.renderHeader]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox || !props.renderListItem) return;\n queueMicrotask(() => {\n inbox.setListItem((itemProps) => {\n const reactNode = props.renderListItem(itemProps);\n return render(reactNode);\n });\n });\n }, [props.renderListItem]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox || !props.renderEmptyState) return;\n queueMicrotask(() => {\n inbox.setEmptyState((emptyStateProps) => {\n const reactNode = props.renderEmptyState(emptyStateProps);\n return render(reactNode);\n });\n });\n }, [props.renderEmptyState]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox || !props.renderLoadingState) return;\n queueMicrotask(() => {\n inbox.setLoadingState((loadingStateProps) => {\n const reactNode = props.renderLoadingState(loadingStateProps);\n return render(reactNode);\n });\n });\n }, [props.renderLoadingState]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox || !props.renderErrorState) return;\n queueMicrotask(() => {\n inbox.setErrorState((errorStateProps) => {\n const reactNode = props.renderErrorState(errorStateProps);\n return render(reactNode);\n });\n });\n }, [props.renderErrorState]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox || !props.renderPaginationItem) return;\n queueMicrotask(() => {\n inbox.setPaginationItem((paginationProps) => {\n const reactNode = props.renderPaginationItem(paginationProps);\n return render(reactNode);\n });\n });\n }, [props.renderPaginationItem]);\n useEffect(() => {\n const inbox = getEl();\n if (!inbox) return;\n queueMicrotask(() => {\n inbox.setFeedType(props.feedType || \"inbox\");\n });\n }, [props.feedType]);\n const children = (\n /* @ts-ignore */\n /* @__PURE__ */ jsx(\n \"courier-inbox\",\n {\n ref: handleRef,\n height: props.height,\n \"light-theme\": props.lightTheme ? JSON.stringify(props.lightTheme) : void 0,\n \"dark-theme\": props.darkTheme ? JSON.stringify(props.darkTheme) : void 0,\n mode: props.mode\n }\n )\n );\n return /* @__PURE__ */ jsx(CourierClientComponent, { children });\n});\nconst CourierInboxPopupMenuComponent = forwardRef(\n (props, ref) => {\n const render = useContext(CourierRenderContext);\n if (!render) {\n throw new Error(\"RenderContext not found. Ensure CourierInboxPopupMenu is wrapped in a CourierRenderContext.\");\n }\n const inboxRef = useRef(null);\n function handleRef(el) {\n if (ref) {\n if (typeof ref === \"function\") {\n ref(el);\n } else {\n ref.current = el;\n }\n }\n inboxRef.current = el;\n }\n function getEl() {\n return inboxRef.current;\n }\n const lastFeedTypeRef = useRef(void 0);\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n if (props.feedType !== lastFeedTypeRef.current) {\n lastFeedTypeRef.current = props.feedType;\n queueMicrotask(() => {\n var _a;\n (_a = menu.setFeedType) == null ? void 0 : _a.call(menu, props.feedType ?? \"inbox\");\n });\n }\n }, [props.feedType]);\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n menu.onMessageClick(props.onMessageClick);\n }, [props.onMessageClick]);\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n menu.onMessageActionClick(props.onMessageActionClick);\n }, [props.onMessageActionClick]);\n useEffect(() => {\n const menu = getEl();\n if (!menu) return;\n menu.onMessageLongPress(props.onMessageLongPress);\n }, [props.onMessageLongPress]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderHeader) return;\n queueMicrotask(() => {\n menu.setHeader((headerProps) => {\n const reactNode = props.renderHeader(headerProps);\n return render(reactNode);\n });\n });\n }, [props.renderHeader]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderListItem) return;\n queueMicrotask(() => {\n menu.setListItem((itemProps) => {\n const reactNode = props.renderListItem(itemProps);\n return render(reactNode);\n });\n });\n }, [props.renderListItem]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderEmptyState) return;\n queueMicrotask(() => {\n menu.setEmptyState((emptyStateProps) => {\n const reactNode = props.renderEmptyState(emptyStateProps);\n return render(reactNode);\n });\n });\n }, [props.renderEmptyState]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderLoadingState) return;\n queueMicrotask(() => {\n menu.setLoadingState((loadingStateProps) => {\n const reactNode = props.renderLoadingState(loadingStateProps);\n return render(reactNode);\n });\n });\n }, [props.renderLoadingState]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderErrorState) return;\n queueMicrotask(() => {\n menu.setErrorState((errorStateProps) => {\n const reactNode = props.renderErrorState(errorStateProps);\n return render(reactNode);\n });\n });\n }, [props.renderErrorState]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderPaginationItem) return;\n queueMicrotask(() => {\n menu.setPaginationItem((paginationProps) => {\n const reactNode = props.renderPaginationItem(paginationProps);\n return render(reactNode);\n });\n });\n }, [props.renderPaginationItem]);\n useEffect(() => {\n const menu = getEl();\n if (!menu || !props.renderMenuButton) return;\n queueMicrotask(() => {\n menu.setMenuButton((buttonProps) => {\n const reactNode = props.renderMenuButton(buttonProps);\n return render(reactNode);\n });\n });\n }, [props.renderMenuButton]);\n const children = (\n /* @ts-ignore */\n /* @__PURE__ */ jsx(\n \"courier-inbox-popup-menu\",\n {\n ref: handleRef,\n \"popup-alignment\": props.popupAlignment,\n \"popup-width\": props.popupWidth,\n \"popup-height\": props.popupHeight,\n left: props.left,\n top: props.top,\n right: props.right,\n bottom: props.bottom,\n \"light-theme\": props.lightTheme ? JSON.stringify(props.lightTheme) : void 0,\n \"dark-theme\": props.darkTheme ? JSON.stringify(props.darkTheme) : void 0,\n mode: props.mode\n }\n )\n );\n return /* @__PURE__ */ jsx(CourierClientComponent, { children });\n }\n);\nexport {\n CourierInboxComponent,\n CourierInboxPopupMenuComponent,\n CourierRenderContext,\n useCourier\n};\n//# sourceMappingURL=index.mjs.map\n","import { ReactNode } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { createRoot } from \"react-dom/client\";\n\n/**\n * Converts a React node to an HTMLElement.\n * This function uses flushSync to ensure the DOM is updated synchronously.\n * @param node - The React node to convert.\n * @returns The converted HTMLElement.\n */\nexport function reactNodeToHTMLElement(node: ReactNode): HTMLElement {\n const container = document.createElement('div');\n\n // Use React 18 root\n const root = createRoot(container);\n flushSync(() => {\n root.render(node);\n });\n\n // Wait until React mounts the content synchronously\n const element = container.firstElementChild;\n if (!(element instanceof HTMLElement)) {\n throw new Error(\n 'renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)'\n );\n }\n\n return element;\n}\n","import { forwardRef } from \"react\";\nimport { CourierInbox as CourierInboxElement } from \"@trycourier/courier-ui-inbox\";\nimport { CourierInboxComponent, CourierInboxProps, CourierRenderContext } from \"@trycourier/courier-react-components\";\nimport { reactNodeToHTMLElement } from \"../utils/render\";\n\n/**\n * CourierInbox React component.\n *\n * @example\n * ```tsx\n * const courier = useCourier();\n *\n * useEffect(() => {\n * // Generate a JWT for your user (do this on your backend server)\n * const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT\n *\n * // Authenticate the user with the inbox\n * courier.shared.signIn({\n * userId: $YOUR_USER_ID,\n * jwt: jwt,\n * });\n * }, []);\n *\n * return <CourierInbox />;\n * ```\n */\nexport const CourierInbox = forwardRef<CourierInboxElement, CourierInboxProps>((props, ref) => {\n return (\n <CourierRenderContext.Provider value={reactNodeToHTMLElement}>\n <CourierInboxComponent {...props} ref={ref} />\n </CourierRenderContext.Provider>\n );\n});\n\nCourierInbox.displayName = 'CourierInbox';\n","import { forwardRef } from \"react\";\nimport { CourierInboxPopupMenu as CourierInboxPopupMenuElement } from \"@trycourier/courier-ui-inbox\";\nimport { CourierInboxPopupMenuComponent, CourierInboxPopupMenuProps, CourierRenderContext } from \"@trycourier/courier-react-components\";\nimport { reactNodeToHTMLElement } from \"../utils/render\";\n\n/**\n * CourierInboxPopupMenu React component.\n *\n * This component is used to display a popup menu for a message in the inbox.\n *\n * @example\n * ```tsx\n * const courier = useCourier();\n *\n * useEffect(() => {\n * // Generate a JWT for your user (do this on your backend server)\n * const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT\n *\n * // Authenticate the user with the inbox\n * courier.shared.signIn({\n * userId: $YOUR_USER_ID,\n * jwt: jwt,\n * });\n * }, []);\n *\n * return <CourierInboxPopupMenu />;\n * ```\n */\nexport const CourierInboxPopupMenu = forwardRef<CourierInboxPopupMenuElement, CourierInboxPopupMenuProps>((props, ref) => {\n return (\n <CourierRenderContext.Provider value={reactNodeToHTMLElement}>\n <CourierInboxPopupMenuComponent {...props} ref={ref} />\n </CourierRenderContext.Provider>\n );\n});\n\nCourierInboxPopupMenu.displayName = 'CourierInboxPopupMenu';\n"],"names":["clickMessage","archiveMessage","openMessage"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trycourier/courier-react",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.26",
|
|
4
4
|
"description": "The React components for the Courier web UI",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
"watch": "vite build --watch",
|
|
12
12
|
"preview": "vite preview",
|
|
13
13
|
"prepare": "npm run build",
|
|
14
|
-
"test": "
|
|
14
|
+
"test": "jest",
|
|
15
|
+
"test:watch": "jest --watch"
|
|
15
16
|
},
|
|
16
17
|
"files": [
|
|
17
18
|
"dist"
|
|
@@ -26,30 +27,39 @@
|
|
|
26
27
|
"author": "Courier",
|
|
27
28
|
"license": "MIT",
|
|
28
29
|
"dependencies": {
|
|
29
|
-
"@trycourier/courier-js": "2.0.
|
|
30
|
-
"@trycourier/courier-ui-core": "1.0.
|
|
31
|
-
"@trycourier/courier-ui-inbox": "1.0.
|
|
30
|
+
"@trycourier/courier-js": "2.0.10",
|
|
31
|
+
"@trycourier/courier-ui-core": "1.0.12",
|
|
32
|
+
"@trycourier/courier-ui-inbox": "1.0.15"
|
|
32
33
|
},
|
|
33
34
|
"peerDependencies": {
|
|
34
35
|
"react": ">=18.0.0",
|
|
35
36
|
"react-dom": ">=18.0.0"
|
|
36
37
|
},
|
|
37
38
|
"devDependencies": {
|
|
38
|
-
"@
|
|
39
|
-
"@
|
|
39
|
+
"@testing-library/dom": "^10.0.0",
|
|
40
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
41
|
+
"@testing-library/react": "^16.3.0",
|
|
42
|
+
"@testing-library/user-event": "^14.6.1",
|
|
43
|
+
"@trycourier/courier-react-components": "1.0.1",
|
|
44
|
+
"@types/jest": "^29.5.12",
|
|
45
|
+
"@types/react": "19.1.8",
|
|
46
|
+
"@types/react-dom": "19.1.6",
|
|
40
47
|
"@vitejs/plugin-react": "4.4.1",
|
|
41
48
|
"cross-env": "^7.0.3",
|
|
42
|
-
"
|
|
43
|
-
"
|
|
49
|
+
"jest": "^29.7.0",
|
|
50
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
51
|
+
"react": "19.1.0",
|
|
52
|
+
"react-dom": "19.1.0",
|
|
53
|
+
"ts-jest": "^29.1.2",
|
|
44
54
|
"vite": "6.2.6",
|
|
45
55
|
"vite-plugin-dts": "4.5.3"
|
|
46
56
|
},
|
|
47
57
|
"overrides": {
|
|
48
|
-
"react": "
|
|
49
|
-
"react-dom": "
|
|
58
|
+
"react": "19.1.0",
|
|
59
|
+
"react-dom": "19.1.0"
|
|
50
60
|
},
|
|
51
61
|
"resolutions": {
|
|
52
|
-
"react": "
|
|
53
|
-
"react-dom": "
|
|
62
|
+
"react": "19.1.0",
|
|
63
|
+
"react-dom": "19.1.0"
|
|
54
64
|
}
|
|
55
65
|
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { Courier, CourierProps, InboxMessage } from '@trycourier/courier-js';
|
|
2
|
-
import { CourierInboxFeedType, InboxDataSet } from '@trycourier/courier-ui-inbox';
|
|
3
|
-
type AuthenticationHooks = {
|
|
4
|
-
userId?: string;
|
|
5
|
-
signIn: (props: CourierProps) => void;
|
|
6
|
-
signOut: () => void;
|
|
7
|
-
};
|
|
8
|
-
type InboxHooks = {
|
|
9
|
-
load: (props?: {
|
|
10
|
-
feedType: CourierInboxFeedType;
|
|
11
|
-
canUseCache: boolean;
|
|
12
|
-
}) => Promise<void>;
|
|
13
|
-
fetchNextPageOfMessages: (props: {
|
|
14
|
-
feedType: CourierInboxFeedType;
|
|
15
|
-
}) => Promise<InboxDataSet | null>;
|
|
16
|
-
setPaginationLimit: (limit: number) => void;
|
|
17
|
-
readMessage: (message: InboxMessage) => Promise<void>;
|
|
18
|
-
unreadMessage: (message: InboxMessage) => Promise<void>;
|
|
19
|
-
clickMessage: (message: InboxMessage) => Promise<void>;
|
|
20
|
-
archiveMessage: (message: InboxMessage) => Promise<void>;
|
|
21
|
-
openMessage: (message: InboxMessage) => Promise<void>;
|
|
22
|
-
unarchiveMessage: (message: InboxMessage) => Promise<void>;
|
|
23
|
-
readAllMessages: () => Promise<void>;
|
|
24
|
-
inbox?: InboxDataSet;
|
|
25
|
-
archive?: InboxDataSet;
|
|
26
|
-
unreadCount?: number;
|
|
27
|
-
error?: Error;
|
|
28
|
-
};
|
|
29
|
-
export declare const useCourier: () => {
|
|
30
|
-
shared: Courier;
|
|
31
|
-
auth: AuthenticationHooks;
|
|
32
|
-
inbox: InboxHooks;
|
|
33
|
-
};
|
|
34
|
-
export {};
|
|
File without changes
|