@trycourier/courier-react 8.0.23-beta → 8.0.25
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 -26
- package/dist/components/courier-inbox.d.ts +23 -19
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +6 -3
- package/dist/index.mjs +211 -169
- 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,27 +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
|
-
}
|
|
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
|
+
*/
|
|
27
26
|
export declare const CourierInboxPopupMenu: import('../../../../node_modules/react').ForwardRefExoticComponent<CourierInboxPopupMenuProps & import('../../../../node_modules/react').RefAttributes<CourierInboxPopupMenuElement>>;
|
|
@@ -1,20 +1,24 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
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
|
+
*/
|
|
20
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?: string;\n lightTheme?: CourierInboxTheme;\n darkTheme?: CourierInboxTheme;\n mode?: CourierComponentThemeMode;\n feedType?: CourierInboxFeedType;\n onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\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 { useRef, useEffect, forwardRef, ReactNode } from \"react\";\nimport { CourierInboxFeedType, CourierInboxHeaderFactoryProps, CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxMenuButtonFactoryProps, CourierInboxPopupMenu as CourierInboxPopupMenuElement, CourierInboxPaginationItemFactoryProps, CourierInboxPopupAlignment, CourierInboxStateEmptyFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxTheme } 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 popupAlignment?: CourierInboxPopupAlignment;\n popupWidth?: string;\n popupHeight?: string;\n left?: string;\n top?: string;\n right?: string;\n bottom?: string;\n lightTheme?: CourierInboxTheme;\n darkTheme?: CourierInboxTheme;\n mode?: CourierComponentThemeMode;\n feedType?: CourierInboxFeedType;\n onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n renderMenuButton?: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInboxPopupMenu = forwardRef<CourierInboxPopupMenuElement, CourierInboxPopupMenuProps>((props, ref) => {\n const menuRef = useRef<CourierInboxPopupMenuElement>(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(menuRef.current);\n } else if (ref) {\n (ref as React.RefObject<CourierInboxPopupMenuElement | null>).current = menuRef.current;\n }\n }, [ref]);\n\n // Handle message click\n useEffect(() => {\n const menu = menuRef.current;\n if (!menu) return;\n menu.onMessageClick(props.onMessageClick);\n }, [props.onMessageClick, menuRef]);\n\n // Handle message action click\n useEffect(() => {\n const menu = menuRef.current;\n if (!menu) return;\n menu.onMessageActionClick(props.onMessageActionClick);\n }, [props.onMessageActionClick, menuRef]);\n\n // Handle message long press\n useEffect(() => {\n const menu = menuRef.current;\n if (!menu) return;\n menu.onMessageLongPress(props.onMessageLongPress);\n }, [props.onMessageLongPress, menuRef]);\n\n // Render header\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Render list item\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Render empty state\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Render loading state\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Render error state\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Render pagination item\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Render menu button\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Set feed type\n useEffect(() => {\n const menu = menuRef.current;\n if (!menu) return;\n queueMicrotask(() => {\n menu.setFeedType(props.feedType || 'inbox');\n });\n }, [props.feedType, menuRef]);\n\n return (\n <CourierClientComponent>\n {/* @ts-ignore */}\n <courier-inbox-popup-menu\n ref={menuRef}\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\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","menuRef","menu","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":"2QAuFMA,EAAyB,EAAGC,eAChC,MAAOC,EAAWC,GAAgBC,EAAAA,UAAS,GAI3C,OAHAC,EAAAA,WAAU,KACRF,GAAa,EAAI,GAChB,IACmB,oBAAXG,OACF,KAEJJ,QAGsBK,EAAAA,SAAU,CAAEN,aAF9B,IAEwC,EAE7CO,EAAuBC,EAAAA,cAAc,MACrCC,EAAwBC,EAAAA,YAAW,CAACC,EAAOC,KAC/C,MAAMC,EAASC,EAAAA,WAAWP,GAC1B,IAAKM,EACH,MAAM,IAAIE,MAAM,sFAElB,MAAMC,EAAWC,EAAAA,OAAO,MAWxB,SAASC,IACP,OAAOF,EAASG,OAClB,CACAf,EAAAA,WAAU,KACR,MAAMgB,EAAQF,IACTE,GACLA,EAAMC,eAAeV,EAAMU,eAAc,GACxC,CAACV,EAAMU,iBACVjB,EAAAA,WAAU,KACR,MAAMgB,EAAQF,IACTE,GACLA,EAAME,qBAAqBX,EAAMW,qBAAoB,GACpD,CAACX,EAAMW,uBACVlB,EAAAA,WAAU,KACR,MAAMgB,EAAQF,IACTE,GACLA,EAAMG,mBAAmBZ,EAAMY,mBAAkB,GAChD,CAACZ,EAAMY,qBACVnB,EAAAA,WAAU,KACR,MAAMgB,EAAQF,IACTE,GAAUT,EAAMa,cACrBC,gBAAe,KACbL,EAAMM,WAAWC,IACf,MAAMC,EAAYjB,EAAMa,aAAaG,GACrC,OAAOd,EAAOe,EAAS,GACxB,GACF,GACA,CAACjB,EAAMa,eACVpB,EAAAA,WAAU,KACR,MAAMgB,EAAQF,IACTE,GAAUT,EAAMkB,gBACrBJ,gBAAe,KACbL,EAAMU,aAAaC,IACjB,MAAMH,EAAYjB,EAAMkB,eAAeE,GACvC,OAAOlB,EAAOe,EAAS,GACxB,GACF,GACA,CAACjB,EAAMkB,iBACVzB,EAAAA,WAAU,KACR,MAAMgB,EAAQF,IACTE,GAAUT,EAAMqB,kBACrBP,gBAAe,KACbL,EAAMa,eAAeC,IACnB,MAAMN,EAAYjB,EAAMqB,iBAAiBE,GACzC,OAAOrB,EAAOe,EAAS,GACxB,GACF,GACA,CAACjB,EAAMqB,mBACV5B,EAAAA,WAAU,KACR,MAAMgB,EAAQF,IACTE,GAAUT,EAAMwB,oBACrBV,gBAAe,KACbL,EAAMgB,iBAAiBC,IACrB,MAAMT,EAAYjB,EAAMwB,mBAAmBE,GAC3C,OAAOxB,EAAOe,EAAS,GACxB,GACF,GACA,CAACjB,EAAMwB,qBACV/B,EAAAA,WAAU,KACR,MAAMgB,EAAQF,IACTE,GAAUT,EAAM2B,kBACrBb,gBAAe,KACbL,EAAMmB,eAAeC,IACnB,MAAMZ,EAAYjB,EAAM2B,iBAAiBE,GACzC,OAAO3B,EAAOe,EAAS,GACxB,GACF,GACA,CAACjB,EAAM2B,mBACVlC,EAAAA,WAAU,KACR,MAAMgB,EAAQF,IACTE,GAAUT,EAAM8B,sBACrBhB,gBAAe,KACbL,EAAMsB,mBAAmBC,IACvB,MAAMf,EAAYjB,EAAM8B,qBAAqBE,GAC7C,OAAO9B,EAAOe,EAAS,GACxB,GACF,GACA,CAACjB,EAAM8B,uBACVrC,EAAAA,WAAU,KACR,MAAMgB,EAAQF,IACTE,GACLK,gBAAe,KACbL,EAAMwB,YAAYjC,EAAMkC,UAAY,QAAO,GAC5C,GACA,CAAClC,EAAMkC,WACV,MAAM7C,EAEY8C,EAAAA,IACd,gBACA,CACElC,IApGN,SAAmBmC,GACbnC,IACiB,mBAARA,EACTA,EAAImC,GAEJnC,EAAIO,QAAU4B,GAGlB/B,EAASG,QAAU4B,CACrB,EA4FMC,OAAQrC,EAAMqC,OACd,cAAerC,EAAMsC,WAAaC,KAAKC,UAAUxC,EAAMsC,iBAAc,EACrE,aAActC,EAAMyC,UAAYF,KAAKC,UAAUxC,EAAMyC,gBAAa,EAClEC,KAAM1C,EAAM0C,OAIlB,OAAuBP,MAAI/C,EAAwB,CAAEC,YAAU,IAE3DsD,EAAiC5C,EAAAA,YACrC,CAACC,EAAOC,KACN,MAAMC,EAASC,EAAAA,WAAWP,GAC1B,IAAKM,EACH,MAAM,IAAIE,MAAM,+FAElB,MAAMC,EAAWC,EAAAA,OAAO,MAWxB,SAASC,IACP,OAAOF,EAASG,OAClB,CACA,MAAMoC,EAAkBtC,EAAAA,YAAO,GAC/Bb,EAAAA,WAAU,KACR,MAAMoD,EAAOtC,IACRsC,GACD7C,EAAMkC,WAAaU,EAAgBpC,UACrCoC,EAAgBpC,QAAUR,EAAMkC,SAChCpB,gBAAe,KACb,IAAIgC,EACuB,OAA1BA,EAAKD,EAAKZ,cAAgCa,EAAGC,KAAKF,EAAM7C,EAAMkC,UAAY,QAAO,IAEtF,GACC,CAAClC,EAAMkC,WACVzC,EAAAA,WAAU,KACR,MAAMoD,EAAOtC,IACRsC,GACLA,EAAKnC,eAAeV,EAAMU,eAAc,GACvC,CAACV,EAAMU,iBACVjB,EAAAA,WAAU,KACR,MAAMoD,EAAOtC,IACRsC,GACLA,EAAKlC,qBAAqBX,EAAMW,qBAAoB,GACnD,CAACX,EAAMW,uBACVlB,EAAAA,WAAU,KACR,MAAMoD,EAAOtC,IACRsC,GACLA,EAAKjC,mBAAmBZ,EAAMY,mBAAkB,GAC/C,CAACZ,EAAMY,qBACVnB,EAAAA,WAAU,KACR,MAAMoD,EAAOtC,IACRsC,GAAS7C,EAAMa,cACpBC,gBAAe,KACb+B,EAAK9B,WAAWC,IACd,MAAMC,EAAYjB,EAAMa,aAAaG,GACrC,OAAOd,EAAOe,EAAS,GACxB,GACF,GACA,CAACjB,EAAMa,eACVpB,EAAAA,WAAU,KACR,MAAMoD,EAAOtC,IACRsC,GAAS7C,EAAMkB,gBACpBJ,gBAAe,KACb+B,EAAK1B,aAAaC,IAChB,MAAMH,EAAYjB,EAAMkB,eAAeE,GACvC,OAAOlB,EAAOe,EAAS,GACxB,GACF,GACA,CAACjB,EAAMkB,iBACVzB,EAAAA,WAAU,KACR,MAAMoD,EAAOtC,IACRsC,GAAS7C,EAAMqB,kBACpBP,gBAAe,KACb+B,EAAKvB,eAAeC,IAClB,MAAMN,EAAYjB,EAAMqB,iBAAiBE,GACzC,OAAOrB,EAAOe,EAAS,GACxB,GACF,GACA,CAACjB,EAAMqB,mBACV5B,EAAAA,WAAU,KACR,MAAMoD,EAAOtC,IACRsC,GAAS7C,EAAMwB,oBACpBV,gBAAe,KACb+B,EAAKpB,iBAAiBC,IACpB,MAAMT,EAAYjB,EAAMwB,mBAAmBE,GAC3C,OAAOxB,EAAOe,EAAS,GACxB,GACF,GACA,CAACjB,EAAMwB,qBACV/B,EAAAA,WAAU,KACR,MAAMoD,EAAOtC,IACRsC,GAAS7C,EAAM2B,kBACpBb,gBAAe,KACb+B,EAAKjB,eAAeC,IAClB,MAAMZ,EAAYjB,EAAM2B,iBAAiBE,GACzC,OAAO3B,EAAOe,EAAS,GACxB,GACF,GACA,CAACjB,EAAM2B,mBACVlC,EAAAA,WAAU,KACR,MAAMoD,EAAOtC,IACRsC,GAAS7C,EAAM8B,sBACpBhB,gBAAe,KACb+B,EAAKd,mBAAmBC,IACtB,MAAMf,EAAYjB,EAAM8B,qBAAqBE,GAC7C,OAAO9B,EAAOe,EAAS,GACxB,GACF,GACA,CAACjB,EAAM8B,uBACVrC,EAAAA,WAAU,KACR,MAAMoD,EAAOtC,IACRsC,GAAS7C,EAAMgD,kBACpBlC,gBAAe,KACb+B,EAAKI,eAAeC,IAClB,MAAMjC,EAAYjB,EAAMgD,iBAAiBE,GACzC,OAAOhD,EAAOe,EAAS,GACxB,GACF,GACA,CAACjB,EAAMgD,mBACV,MAAM3D,EAEY8C,EAAAA,IACd,2BACA,CACElC,IAnHN,SAAmBmC,GACbnC,IACiB,mBAARA,EACTA,EAAImC,GAEJnC,EAAIO,QAAU4B,GAGlB/B,EAASG,QAAU4B,CACrB,EA2GM,kBAAmBpC,EAAMmD,eACzB,cAAenD,EAAMoD,WACrB,eAAgBpD,EAAMqD,YACtBC,KAAMtD,EAAMsD,KACZC,IAAKvD,EAAMuD,IACXC,MAAOxD,EAAMwD,MACbC,OAAQzD,EAAMyD,OACd,cAAezD,EAAMsC,WAAaC,KAAKC,UAAUxC,EAAMsC,iBAAc,EACrE,aAActC,EAAMyC,UAAYF,KAAKC,UAAUxC,EAAMyC,gBAAa,EAClEC,KAAM1C,EAAM0C,OAIlB,OAAuBP,MAAI/C,EAAwB,CAAEC,YAAU,ICvV5D,SAASqE,EAAuBC,GACrC,MAAMC,EAAYC,SAASC,cAAc,OAGnCC,EAAOC,EAAAA,WAAWJ,GACxBK,EAAAA,WAAU,KACRF,EAAK7D,OAAOyD,EAAI,IAIlB,MAAMO,EAAUN,EAAUO,kBAC1B,KAAMD,aAAmBE,aACvB,MAAM,IAAIhE,MACR,gGAIJ,OAAO8D,CACT,CCFO,MAAMG,EAAetE,EAAAA,YAAmD,CAACC,EAAOC,MAEnFkC,IAACvC,EAAqB0E,SAArB,CAA8BC,MAAOb,EACpCrE,SAAA8C,EAAAA,IAACrC,EAAA,IAA0BE,EAAOC,YAKxCoE,EAAaG,YAAc,eCNpB,MAAMC,EAAwB1E,EAAAA,YAAqE,CAACC,EAAOC,MAE9GkC,IAACvC,EAAqB0E,SAArB,CAA8BC,MAAOb,EACpCrE,SAAA8C,EAAAA,IAACQ,EAAA,IAAmC3C,EAAOC,YAKjDwE,EAAsBD,YAAc,sxBHhCjB,KACjB,MAAME,EAAU1E,GAAU2E,EAAAA,QAAQC,OAAOF,OAAO1E,GAC1C6E,EAAU,IAAMF,UAAQC,OAAOC,UAC/BC,EAAa9E,GAAU+E,EAAAA,sBAAsBH,OAAOI,KAAKhF,GACzDiF,EAA2BjF,GAAU+E,EAAAA,sBAAsBH,OAAOK,wBAAwBjF,GAC1FkF,EAAsBC,GAAUR,EAAAA,QAAQC,OAAOQ,gBAAkBD,EACjEE,EAAeC,GAAYP,EAAAA,sBAAsBH,OAAOS,YAAY,CAAEC,YACtEC,EAAiBD,GAAYP,EAAAA,sBAAsBH,OAAOW,cAAc,CAAED,YAC1EE,EAAgBF,GAAYP,EAAAA,sBAAsBH,OAAOY,aAAa,CAAEF,YACxEG,EAAkBH,GAAYP,EAAAA,sBAAsBH,OAAOa,eAAe,CAAEH,YAC5EI,EAAeJ,GAAYP,EAAAA,sBAAsBH,OAAOc,YAAY,CAAEJ,YACtEK,EAAoBL,GAAYP,EAAAA,sBAAsBH,OAAOe,iBAAiB,CAAEL,YAChFM,EAAkB,IAAMb,wBAAsBH,OAAOgB,mBACpDC,EAAMC,GAAWC,EAAMvG,SAAS,CACrCwG,YAAQ,EACRtB,SACAG,aAEKpE,EAAOwF,GAAYF,EAAMvG,SAAS,CACvCwF,KAAMF,EACNG,0BACAC,qBACAG,cACAE,gBACAC,eACAC,iBACAC,cACAC,mBACAC,oBAEFG,EAAMtG,WAAU,KACd,MAAMyG,EAAWvB,EAAAA,QAAQC,OAAOuB,2BAA0B,IAAMC,MAC1DC,EAAgB,IAAIC,gCAA8B,CACtDC,QAAUC,GAAUC,EAAaD,GACjCE,gBAAiB,IAAMD,IACvBE,YAAa,IAAMF,IACnBG,aAAc,IAAMH,IACpBI,gBAAiB,IAAMJ,IACvBK,gBAAiB,IAAML,IACvBM,oBAAqB,IAAMN,MAK7B,OAHA1B,wBAAsBH,OAAOoC,qBAAqBX,GAClDD,IACAK,IACO,KACLP,EAASe,SACTZ,EAAcY,QAAM,CACtB,GACC,IACH,MAAMb,EAAc,KAClB,IAAItD,EACJ,MAAMoE,EAA0C,OAA/BpE,EAAK6B,UAAQC,OAAOuC,aAAkB,EAASrE,EAAGoE,QACnEpB,EAAQ,CACNE,OAAmB,MAAXkB,OAAkB,EAASA,EAAQlB,OAC3CtB,SACAG,WACD,EAEG4B,EAAgBD,IACpB,MAAMY,EAAYrC,EAAAA,sBAAsBH,OACxCqB,EAAS,CACPjB,KAAMF,EACNG,0BACAC,qBACAG,cACAE,gBACAC,eACAC,iBACAC,cACAC,mBACAC,kBACAnF,MAAO2G,EAAUC,aACjBC,QAASF,EAAUG,eACnBC,YAAaJ,EAAUI,YACvBhB,SACD,EAEH,MAAO,CACL5B,OAAQD,EAAAA,QAAQC,OAChBiB,OACApF,QACJ"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
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';
|
|
7
8
|
export type { CourierInboxTheme, CourierInboxFontTheme, CourierInboxIconTheme, CourierInboxFilterItemTheme, CourierInboxUnreadCountIndicatorTheme, CourierInboxUnreadDotIndicatorTheme, CourierInboxIconButtonTheme, CourierInboxButtonTheme, CourierInboxMenuButtonTheme, CourierInboxPopupTheme, CourierInboxListItemTheme, CourierInboxSkeletonLoadingStateTheme, CourierInboxInfoStateTheme, CourierMenuItemTheme, CourierFilterMenuTheme, CourierActionMenuTheme } from '@trycourier/courier-ui-inbox';
|
|
8
9
|
export { defaultLightTheme, defaultDarkTheme, mergeTheme } from '@trycourier/courier-ui-inbox';
|
|
10
|
+
export type { CourierInbox as CourierInboxElement } from '@trycourier/courier-ui-inbox';
|
|
11
|
+
export type { CourierInboxPopupMenu as CourierInboxPopupMenuElement } from '@trycourier/courier-ui-inbox';
|
|
9
12
|
export type { CourierComponentThemeMode } from '@trycourier/courier-ui-core';
|
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,226 +101,282 @@ 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
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
ref(menuRef.current);
|
|
226
|
-
} else if (ref) {
|
|
227
|
-
ref.current = menuRef.current;
|
|
221
|
+
const CourierInboxPopupMenuComponent = forwardRef(
|
|
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.");
|
|
228
226
|
}
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
227
|
+
const inboxRef = useRef(null);
|
|
228
|
+
function handleRef(el) {
|
|
229
|
+
if (ref) {
|
|
230
|
+
if (typeof ref === "function") {
|
|
231
|
+
ref(el);
|
|
232
|
+
} else {
|
|
233
|
+
ref.current = el;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
inboxRef.current = el;
|
|
237
|
+
}
|
|
238
|
+
function getEl() {
|
|
239
|
+
return inboxRef.current;
|
|
240
|
+
}
|
|
241
|
+
const lastFeedTypeRef = useRef(void 0);
|
|
242
|
+
useEffect(() => {
|
|
243
|
+
const menu = getEl();
|
|
244
|
+
if (!menu) return;
|
|
245
|
+
if (props.feedType !== lastFeedTypeRef.current) {
|
|
246
|
+
lastFeedTypeRef.current = props.feedType;
|
|
247
|
+
queueMicrotask(() => {
|
|
248
|
+
var _a;
|
|
249
|
+
(_a = menu.setFeedType) == null ? void 0 : _a.call(menu, props.feedType ?? "inbox");
|
|
250
|
+
});
|
|
251
|
+
}
|
|
252
|
+
}, [props.feedType]);
|
|
253
|
+
useEffect(() => {
|
|
254
|
+
const menu = getEl();
|
|
255
|
+
if (!menu) return;
|
|
256
|
+
menu.onMessageClick(props.onMessageClick);
|
|
257
|
+
}, [props.onMessageClick]);
|
|
258
|
+
useEffect(() => {
|
|
259
|
+
const menu = getEl();
|
|
260
|
+
if (!menu) return;
|
|
261
|
+
menu.onMessageActionClick(props.onMessageActionClick);
|
|
262
|
+
}, [props.onMessageActionClick]);
|
|
263
|
+
useEffect(() => {
|
|
264
|
+
const menu = getEl();
|
|
265
|
+
if (!menu) return;
|
|
266
|
+
menu.onMessageLongPress(props.onMessageLongPress);
|
|
267
|
+
}, [props.onMessageLongPress]);
|
|
268
|
+
useEffect(() => {
|
|
269
|
+
const menu = getEl();
|
|
270
|
+
if (!menu || !props.renderHeader) return;
|
|
271
|
+
queueMicrotask(() => {
|
|
272
|
+
menu.setHeader((headerProps) => {
|
|
273
|
+
const reactNode = props.renderHeader(headerProps);
|
|
274
|
+
return render(reactNode);
|
|
275
|
+
});
|
|
252
276
|
});
|
|
253
|
-
});
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
277
|
+
}, [props.renderHeader]);
|
|
278
|
+
useEffect(() => {
|
|
279
|
+
const menu = getEl();
|
|
280
|
+
if (!menu || !props.renderListItem) return;
|
|
281
|
+
queueMicrotask(() => {
|
|
282
|
+
menu.setListItem((itemProps) => {
|
|
283
|
+
const reactNode = props.renderListItem(itemProps);
|
|
284
|
+
return render(reactNode);
|
|
285
|
+
});
|
|
262
286
|
});
|
|
263
|
-
});
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
287
|
+
}, [props.renderListItem]);
|
|
288
|
+
useEffect(() => {
|
|
289
|
+
const menu = getEl();
|
|
290
|
+
if (!menu || !props.renderEmptyState) return;
|
|
291
|
+
queueMicrotask(() => {
|
|
292
|
+
menu.setEmptyState((emptyStateProps) => {
|
|
293
|
+
const reactNode = props.renderEmptyState(emptyStateProps);
|
|
294
|
+
return render(reactNode);
|
|
295
|
+
});
|
|
272
296
|
});
|
|
273
|
-
});
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
297
|
+
}, [props.renderEmptyState]);
|
|
298
|
+
useEffect(() => {
|
|
299
|
+
const menu = getEl();
|
|
300
|
+
if (!menu || !props.renderLoadingState) return;
|
|
301
|
+
queueMicrotask(() => {
|
|
302
|
+
menu.setLoadingState((loadingStateProps) => {
|
|
303
|
+
const reactNode = props.renderLoadingState(loadingStateProps);
|
|
304
|
+
return render(reactNode);
|
|
305
|
+
});
|
|
282
306
|
});
|
|
283
|
-
});
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
307
|
+
}, [props.renderLoadingState]);
|
|
308
|
+
useEffect(() => {
|
|
309
|
+
const menu = getEl();
|
|
310
|
+
if (!menu || !props.renderErrorState) return;
|
|
311
|
+
queueMicrotask(() => {
|
|
312
|
+
menu.setErrorState((errorStateProps) => {
|
|
313
|
+
const reactNode = props.renderErrorState(errorStateProps);
|
|
314
|
+
return render(reactNode);
|
|
315
|
+
});
|
|
292
316
|
});
|
|
293
|
-
});
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
317
|
+
}, [props.renderErrorState]);
|
|
318
|
+
useEffect(() => {
|
|
319
|
+
const menu = getEl();
|
|
320
|
+
if (!menu || !props.renderPaginationItem) return;
|
|
321
|
+
queueMicrotask(() => {
|
|
322
|
+
menu.setPaginationItem((paginationProps) => {
|
|
323
|
+
const reactNode = props.renderPaginationItem(paginationProps);
|
|
324
|
+
return render(reactNode);
|
|
325
|
+
});
|
|
302
326
|
});
|
|
303
|
-
});
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
327
|
+
}, [props.renderPaginationItem]);
|
|
328
|
+
useEffect(() => {
|
|
329
|
+
const menu = getEl();
|
|
330
|
+
if (!menu || !props.renderMenuButton) return;
|
|
331
|
+
queueMicrotask(() => {
|
|
332
|
+
menu.setMenuButton((buttonProps) => {
|
|
333
|
+
const reactNode = props.renderMenuButton(buttonProps);
|
|
334
|
+
return render(reactNode);
|
|
335
|
+
});
|
|
312
336
|
});
|
|
313
|
-
});
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
337
|
+
}, [props.renderMenuButton]);
|
|
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 });
|
|
358
|
+
}
|
|
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 }) });
|
|
338
380
|
});
|
|
339
381
|
CourierInboxPopupMenu.displayName = "CourierInboxPopupMenu";
|
|
340
382
|
export {
|
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?: string;\n lightTheme?: CourierInboxTheme;\n darkTheme?: CourierInboxTheme;\n mode?: CourierComponentThemeMode;\n feedType?: CourierInboxFeedType;\n onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\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 { useRef, useEffect, forwardRef, ReactNode } from \"react\";\nimport { CourierInboxFeedType, CourierInboxHeaderFactoryProps, CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxMenuButtonFactoryProps, CourierInboxPopupMenu as CourierInboxPopupMenuElement, CourierInboxPaginationItemFactoryProps, CourierInboxPopupAlignment, CourierInboxStateEmptyFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxTheme } 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 popupAlignment?: CourierInboxPopupAlignment;\n popupWidth?: string;\n popupHeight?: string;\n left?: string;\n top?: string;\n right?: string;\n bottom?: string;\n lightTheme?: CourierInboxTheme;\n darkTheme?: CourierInboxTheme;\n mode?: CourierComponentThemeMode;\n feedType?: CourierInboxFeedType;\n onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n renderMenuButton?: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInboxPopupMenu = forwardRef<CourierInboxPopupMenuElement, CourierInboxPopupMenuProps>((props, ref) => {\n const menuRef = useRef<CourierInboxPopupMenuElement>(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(menuRef.current);\n } else if (ref) {\n (ref as React.RefObject<CourierInboxPopupMenuElement | null>).current = menuRef.current;\n }\n }, [ref]);\n\n // Handle message click\n useEffect(() => {\n const menu = menuRef.current;\n if (!menu) return;\n menu.onMessageClick(props.onMessageClick);\n }, [props.onMessageClick, menuRef]);\n\n // Handle message action click\n useEffect(() => {\n const menu = menuRef.current;\n if (!menu) return;\n menu.onMessageActionClick(props.onMessageActionClick);\n }, [props.onMessageActionClick, menuRef]);\n\n // Handle message long press\n useEffect(() => {\n const menu = menuRef.current;\n if (!menu) return;\n menu.onMessageLongPress(props.onMessageLongPress);\n }, [props.onMessageLongPress, menuRef]);\n\n // Render header\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Render list item\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Render empty state\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Render loading state\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Render error state\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Render pagination item\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Render menu button\n useEffect(() => {\n const menu = menuRef.current;\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, menuRef]);\n\n // Set feed type\n useEffect(() => {\n const menu = menuRef.current;\n if (!menu) return;\n queueMicrotask(() => {\n menu.setFeedType(props.feedType || 'inbox');\n });\n }, [props.feedType, menuRef]);\n\n return (\n <CourierClientComponent>\n {/* @ts-ignore */}\n <courier-inbox-popup-menu\n ref={menuRef}\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\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.25",
|
|
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-
|
|
31
|
-
"@trycourier/courier-ui-
|
|
30
|
+
"@trycourier/courier-js": "2.0.10",
|
|
31
|
+
"@trycourier/courier-react-components": "1.0.0",
|
|
32
|
+
"@trycourier/courier-ui-core": "1.0.12",
|
|
33
|
+
"@trycourier/courier-ui-inbox": "1.0.15"
|
|
32
34
|
},
|
|
33
35
|
"peerDependencies": {
|
|
34
36
|
"react": ">=18.0.0",
|
|
35
37
|
"react-dom": ">=18.0.0"
|
|
36
38
|
},
|
|
37
39
|
"devDependencies": {
|
|
38
|
-
"@
|
|
39
|
-
"@
|
|
40
|
+
"@testing-library/dom": "^10.0.0",
|
|
41
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
42
|
+
"@testing-library/react": "^16.3.0",
|
|
43
|
+
"@testing-library/user-event": "^14.6.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
|