@trycourier/courier-react 8.0.29 → 8.1.0

package/README.md

@@ -1,42 +1,27 @@
 <img width="1040" alt="courier-react" src="https://github.com/user-attachments/assets/e886b445-d106-4dab-afca-82183e0fcbe7" />
 
-## 1. Install
+**Using React 17?** Use the [@trycourier/courier-react-17](../courier-react-17/) package.
+
+**Not using React?** Use the [@trycourier/courier-ui-inbox](../courier-ui-inbox/) package.
+
+## Installation
 
 ```sh
 npm install @trycourier/courier-react
 ```
 
-> **Not using React?** We suggest you use [@trycourier/courier-ui-inbox](../courier-ui-inbox/README.md) package instead.
-
-## 2. Authenticate
-
-To use the SDK, you need to generate a JWT (JSON Web Token) for your user. **This JWT should always be generated by your backend server, never in client-side code.**
-
-**How it works:**
+## Usage
 
-1. **Your frontend calls your backend:**
-   - When your app needs to authenticate a user, your frontend should make a request to your own backend (e.g., `/api/generate-courier-jwt`).
+Check out the [Courier documentation](https://www.courier.com/docs/sdk-libraries/courier-react-web) for a full guide to Courier React.
 
-2. **Your backend calls Courier to issue a JWT:**
-   - 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.
-   - Your backend then returns the JWT to your frontend.
+If you’re coming from an earlier version of the Courier React SDK,
+check out [the v8 migration guide](https://www.courier.com/docs/sdk-libraries/courier-react-v8-migration-guide)
+for what’s changed, how to upgrade your app,
+and links to documentation for past versions of the React SDK.
 
-To quickly test JWT generation (for development only), you can use the following cURL command to call Courier's API directly. **Do not use this in production or from client-side code.**
+## Examples
 
-```sh
-curl --request POST \
-     --url https://api.courier.com/auth/issue-token \
-     --header 'Accept: application/json' \
-     --header 'Authorization: Bearer $YOUR_API_KEY' \
-     --header 'Content-Type: application/json' \
-     --data \
- '{
-    "scope": "user_id:$YOUR_USER_ID write:user-tokens inbox:read:messages inbox:write:events read:preferences write:preferences read:brands",
-    "expires_in": "$YOUR_NUMBER days"
-  }'
-```
-
-## 3. Add Inbox Component
+Below are a few examples of the Courier Inbox. Visit the [Courier documentation](https://www.courier.com/docs/sdk-libraries/courier-react-web) for more examples.
 
 ### `CourierInbox`
 
@@ -98,383 +83,8 @@ export default function App() {
 }
 ```
 
-## NextJS & Server Side Rendering Frameworks
-
-`courier-react` only supports client side rendering. You will need to add `'use client'` to the top of any file that will use `CourierInbox` or `CourierInboxPopupMenu`.
-
-```ts
-'use client'
-
-...
-import { ..., CourierInboxPopupMenu } from '@trycourier/courier-react';
-
-export default function Page() {
-
-  ...
-
-  return <CourierInboxPopupMenu />;
-
-}
-```
-
-## Handle Clicks and Presses
-
-```ts
-import { useEffect } from 'react';
-import { CourierInbox, useCourier, type CourierInboxListItemFactoryProps, type CourierInboxListItemActionFactoryProps } from '@trycourier/courier-react';
-
-export default function App() {
-
-  const courier = useCourier();
-
-  useEffect(() => {
-    // Generate a JWT for your user (do this on your backend server)
-    const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
-
-    // Authenticate the user with the inbox
-    courier.shared.signIn({
-      userId: $YOUR_USER_ID,
-      jwt: jwt,
-    });
-  }, []);
-
-  return (
-    <CourierInbox
-      onMessageClick={({ message, index }: CourierInboxListItemFactoryProps) => {
-        alert("Message clicked at index " + index + ":\n" + JSON.stringify(message, null, 2));
-      }}
-      onMessageActionClick={({ message, action, index }: CourierInboxListItemActionFactoryProps) => {
-        alert(
-          "Message action clicked at index " + index + ":\n" +
-          "Action: " + JSON.stringify(action, null, 2) + "\n" +
-          "Message: " + JSON.stringify(message, null, 2)
-        );
-      }}
-      onMessageLongPress={({ message, index }: CourierInboxListItemFactoryProps) => {
-        // Handle message long presses. **Only works on devices that support javascript's touch events. This will not work with a mouse cursor.**
-        alert("Message long pressed at index " + index + ":\n" + JSON.stringify(message, null, 2));
-      }}
-    />
-  );
-
-}
-```
-
-## Styles and Theming
-
-### Light & Dark Themes
-
-The fastest way to style the Inbox to match your app. This example shows unread indicator styling, but you can customize fonts, icons, text, and more.
-
-> **🎨 Theme Reference:** [All available theme values](../courier-ui-inbox/docs/theme.md)
-
-<img width="688" alt="Screenshot 2025-06-25 at 5 38 07 PM" src="https://github.com/user-attachments/assets/d1440494-ee66-4ff6-850b-c1a13691cf2f" />
-
-```ts
-import { CourierInbox, ..., type CourierInboxTheme } from '@trycourier/courier-react';
-
-export default function App() {
-  ...
-
-  const theme: CourierInboxTheme = {
-    inbox: {
-      header: {
-        filters: {
-          unreadIndicator: {
-            backgroundColor: '#8B5CF6',
-          },
-        },
-      },
-      list: {
-        item: {
-          unreadIndicatorColor: '#8B5CF6',
-        },
-      },
-    },
-  };
-
-  return <CourierInbox lightTheme={theme} darkTheme={theme} mode="light" />;
-}
-```
-
-### Popup Alignment, Positioning, and Dimensions
-
-```ts
-export default function App() {
-
-  ...
-
-  return (
-    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '100px' }}>
-      <CourierInboxPopupMenu
-        popupAlignment="top-right" // 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center' | 'center-right' | 'center-left' | 'center-center'
-        popupWidth="340px"
-        popupHeight="400px"
-        top="44px"
-        right="44px"
-      />
-    </div>
-  );
-
-}
-```
-
-### Custom height `CourierInbox`
-
-> **Important:** The default `CourierInbox` height is auto. It will set it's height based on it's children.
-
-```ts
-<CourierInbox height='50vh' />
-```
-
-## Custom Elements
-
-Customize the inbox UI with any element you want.
-
-### List Items
-
-<img width="688" alt="Screenshot 2025-06-25 at 6 25 17 PM" src="https://github.com/user-attachments/assets/075a568b-5538-4116-bb3d-752ecc5dea2c" />
-
-```ts
-import { CourierInbox, ..., type CourierInboxListItemFactoryProps } from '@trycourier/courier-react'
-
-const CustomListItem = ({ message, index }: CourierInboxListItemFactoryProps) => (
-  <pre style={{
-    padding: '24px',
-    borderBottom: '1px solid #e0e0e0',
-    margin: '0'
-  }}>
-    {JSON.stringify({ message, index }, null, 2)}
-  </pre>
-);
-
-export default function App() {
-
-  ...
-
-  return (
-    <CourierInbox
-      renderListItem={(props: CourierInboxListItemFactoryProps) => {
-        return <CustomListItem {...props} />
-      }}
-    />
-  );
-
-}
-```
-
-### Header
-
-<img width="688" alt="Screenshot 2025-06-25 at 6 35 59 PM" src="https://github.com/user-attachments/assets/25d45ac1-32e6-4e98-baf1-d0df34cef72a" />
-
-```ts
-import { CourierInbox, ..., type CourierInboxHeaderFactoryProps } from '@trycourier/courier-react'
-
-const CustomHeader = (props: CourierInboxHeaderFactoryProps) => (
-  <div style={{
-    background: 'red',
-    fontSize: '24px',
-    padding: '24px',
-    width: '100%'
-  }}>
-    {props.feedType}
-  </div>
-);
-
-export default function App() {
-
-  ...
-
-  return (
-    <CourierInbox
-      renderHeader={(props: CourierInboxHeaderFactoryProps) => {
-        return <CustomHeader {...props} />
-      }}
-    />
-  );
-
-}
-```
-
-### Popup Menu Button
-
-<img width="606" alt="Screenshot 2025-06-25 at 6 40 38 PM" src="https://github.com/user-attachments/assets/dfb0daca-f11d-420f-9dc7-0c14b49ab7db" />
-
-```ts
-import { CourierInboxPopupMenu, ..., type CourierInboxMenuButtonFactoryProps } from '@trycourier/courier-react'
-
-const CustomMenuButton = ({ unreadCount }: CourierInboxMenuButtonFactoryProps) => (
-  <button>
-    Open the Inbox Popup. Unread message count: {unreadCount}
-  </button>
-);
-
-export default function App() {
-
-  ...
-
-  return (
-    <div style={{ padding: '24px' }}>
-      <CourierInboxPopupMenu
-        renderMenuButton={(props: CourierInboxMenuButtonFactoryProps) => {
-          return <CustomMenuButton {...props} />
-        }}
-      />
-    </div>
-  );
-
-}
-```
-
-### Loading, Empty, Error & Pagination
-
-```ts
-import {
-  CourierInbox,
-  ...,
-  type CourierInboxStateEmptyFactoryProps,
-  type CourierInboxStateLoadingFactoryProps,
-  type CourierInboxStateErrorFactoryProps,
-  type CourierInboxPaginationItemFactoryProps
-} from '@trycourier/courier-react'
-
-const CustomLoadingState = ({ feedType }: CourierInboxStateLoadingFactoryProps) => (
-  <div style={{
-    padding: '24px',
-    background: 'red',
-    textAlign: 'center'
-  }}>
-    Custom Loading State
-  </div>
-);
-
-const CustomEmptyState = ({ feedType }: CourierInboxStateEmptyFactoryProps) => (
-  <div style={{
-    padding: '24px',
-    background: 'green',
-    textAlign: 'center'
-  }}>
-    Custom Empty State
-  </div>
-);
-
-const CustomErrorState = ({ feedType, error }: CourierInboxStateErrorFactoryProps) => (
-  <div style={{
-    padding: '24px',
-    background: 'blue',
-    textAlign: 'center'
-  }}>
-    Custom Error State: {error.message}
-  </div>
-);
-
-const CustomPaginationItem = ({ feedType }: CourierInboxPaginationItemFactoryProps) => (
-  <div style={{
-    padding: '24px',
-    background: 'yellow',
-    textAlign: 'center'
-  }}>
-    Custom Pagination Item
-  </div>
-);
-
-export default function App() {
-
-  ...
-
-  return (
-    <CourierInbox
-      renderLoadingState={(props: CourierInboxStateLoadingFactoryProps) => {
-        return <CustomLoadingState {...props} />
-      }}
-      renderEmptyState={(props: CourierInboxStateEmptyFactoryProps) => {
-        return <CustomEmptyState {...props} />
-      }}
-      renderErrorState={(props: CourierInboxStateErrorFactoryProps) => {
-        return <CustomErrorState {...props} />
-      }}
-      renderPaginationItem={(props: CourierInboxPaginationItemFactoryProps) => {
-        return <CustomPaginationItem {...props} />
-      }}
-    />
-  );
-
-}
-```
-
-### Available Hooks
-
-```ts
-import { useCourier } from '@trycourier/courier-react';
-
-const { auth, inbox } = useCourier();
-
-// Sign in & Sign out
-useEffect(() => {
-  auth.signIn({
-    userId: '$YOUR_USER_ID',
-    jwt: jwt,
-  });
-
-  // To sign out, call:
-  auth.signOut();
-}, [auth]);
-
-// Log the signed-in user
-useEffect(() => {
-  console.log('Current Courier User: ', auth.userId);
-}, [auth.userId]);
-
-// Inbox Hooks
-useEffect(() => {
-
-  // Set how many messages get fetched when getting another page
-  inbox.setPaginationLimit(20);
-
-  // Reload a specific dataset in the inbox
-  inbox.load({ feedType: 'inbox', canUseCache: true });
-
-  // Fetch the next page of messages
-  inbox.fetchNextPageOfMessages({ feedType: 'inbox' }).then((data) => {
-    if (data) {
-      console.log('Next page of messages:', data);
-    }
-  });
-
-  // Mark all messages as read
-  inbox.readAllMessages();
-
-  // Log unread count and errors
-  if (inbox.unreadCount !== undefined) {
-    console.log('Unread messages:', inbox.unreadCount);
-  }
-
-  if (inbox.error) {
-    console.error('Inbox error:', inbox.error);
-  }
-
-  // Log inbox and archive datasets
-  if (inbox.inbox) {
-    console.log('Inbox dataset:', inbox.inbox);
-  }
-
-  if (inbox.archive) {
-    console.log('Archive dataset:', inbox.archive);
-  }
-
-}, [
-  inbox,
-  inbox.inbox,
-  inbox.archive,
-  inbox.unreadCount,
-  inbox.error,
-]);
-```
-
-> **Not using React?** We suggest you use [@trycourier/courier-ui-inbox](../courier-ui-inbox/README.md) package instead.
-
-## **Share feedback with Courier**
+## Share feedback with Courier
 
-We want to make this the best SDK for managing notifications! Have an idea or feedback about our SDKs? Let us know!
+Have an idea or feedback about our SDKs? Let us know!
 
-[Courier Web Issues](https://github.com/trycourier/courier-web/issues)
+Open an issue: [Courier Web Issues](https://github.com/trycourier/courier-web/issues)

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("@trycourier/courier-react-components"),o=require("react-dom"),n=require("react-dom/client"),i=require("@trycourier/courier-ui-inbox");function u(e){const r=document.createElement("div"),t=n.createRoot(r);o.flushSync((()=>{t.render(e)}));const i=r.firstElementChild;if(!(i instanceof HTMLElement))throw new Error("renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)");return i}const a=r.forwardRef(((r,o)=>e.jsx(t.CourierRenderContext.Provider,{value:u,children:e.jsx(t.CourierInboxComponent,{...r,ref:o})})));a.displayName="CourierInbox";const s=r.forwardRef(((r,o)=>e.jsx(t.CourierRenderContext.Provider,{value:u,children:e.jsx(t.CourierInboxPopupMenuComponent,{...r,ref:o})})));s.displayName="CourierInboxPopupMenu",Object.defineProperty(exports,"useCourier",{enumerable:!0,get:()=>t.useCourier}),Object.defineProperty(exports,"archiveMessage",{enumerable:!0,get:()=>i.archiveMessage}),Object.defineProperty(exports,"clickMessage",{enumerable:!0,get:()=>i.clickMessage}),Object.defineProperty(exports,"defaultDarkTheme",{enumerable:!0,get:()=>i.defaultDarkTheme}),Object.defineProperty(exports,"defaultLightTheme",{enumerable:!0,get:()=>i.defaultLightTheme}),Object.defineProperty(exports,"markAsRead",{enumerable:!0,get:()=>i.markAsRead}),Object.defineProperty(exports,"markAsUnread",{enumerable:!0,get:()=>i.markAsUnread}),Object.defineProperty(exports,"mergeTheme",{enumerable:!0,get:()=>i.mergeTheme}),Object.defineProperty(exports,"openMessage",{enumerable:!0,get:()=>i.openMessage}),exports.CourierInbox=a,exports.CourierInboxPopupMenu=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@trycourier/courier-js"),r=require("react/jsx-runtime"),t=require("react"),o=require("@trycourier/courier-react-components"),n=require("react-dom"),i=require("react-dom/client"),u=require("@trycourier/courier-ui-inbox");function s(e){const r=document.createElement("div"),t=i.createRoot(r);n.flushSync((()=>{t.render(e)}));const o=r.firstElementChild;if(!(o instanceof HTMLElement))throw new Error("renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)");return o}const a=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:s,children:r.jsx(o.CourierInboxComponent,{...e,ref:t})})));a.displayName="CourierInbox";const c=t.forwardRef(((e,t)=>r.jsx(o.CourierRenderContext.Provider,{value:s,children:r.jsx(o.CourierInboxPopupMenuComponent,{...e,ref:t})})));c.displayName="CourierInboxPopupMenu",e.Courier.shared.courierUserAgentName="courier-react",e.Courier.shared.courierUserAgentVersion="8.1.0",Object.defineProperty(exports,"useCourier",{enumerable:!0,get:()=>o.useCourier}),Object.defineProperty(exports,"archiveMessage",{enumerable:!0,get:()=>u.archiveMessage}),Object.defineProperty(exports,"clickMessage",{enumerable:!0,get:()=>u.clickMessage}),Object.defineProperty(exports,"defaultDarkTheme",{enumerable:!0,get:()=>u.defaultDarkTheme}),Object.defineProperty(exports,"defaultLightTheme",{enumerable:!0,get:()=>u.defaultLightTheme}),Object.defineProperty(exports,"markAsRead",{enumerable:!0,get:()=>u.markAsRead}),Object.defineProperty(exports,"markAsUnread",{enumerable:!0,get:()=>u.markAsUnread}),Object.defineProperty(exports,"mergeTheme",{enumerable:!0,get:()=>u.mergeTheme}),Object.defineProperty(exports,"openMessage",{enumerable:!0,get:()=>u.openMessage}),exports.CourierInbox=a,exports.CourierInboxPopupMenu=c;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/utils/render.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.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}\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":["reactNodeToHTMLElement","node","container","document","createElement","root","createRoot","flushSync","render","element","firstElementChild","HTMLElement","Error","CourierInbox","forwardRef","props","ref","jsx","CourierRenderContext","Provider","value","children","CourierInboxComponent","displayName","CourierInboxPopupMenu","CourierInboxPopupMenuComponent"],"mappings":"yRAUO,SAASA,EAAuBC,GACrC,MAAMC,EAAYC,SAASC,cAAc,OAGnCC,EAAOC,EAAAA,WAAWJ,GACxBK,EAAAA,WAAU,KACRF,EAAKG,OAAOP,EAAI,IAIlB,MAAMQ,EAAUP,EAAUQ,kBAC1B,KAAMD,aAAmBE,aACvB,MAAM,IAAIC,MACR,gGAIJ,OAAOH,CACT,CCFO,MAAMI,EAAeC,EAAAA,YAAmD,CAACC,EAAOC,MAEnFC,IAACC,EAAAA,qBAAqBC,SAArB,CAA8BC,MAAOpB,EACpCqB,WAAAJ,IAACK,EAAAA,sBAAA,IAA0BP,EAAOC,YAKxCH,EAAaU,YAAc,eCNpB,MAAMC,EAAwBV,EAAAA,YAAqE,CAACC,EAAOC,MAE9GC,IAACC,EAAAA,qBAAqBC,SAArB,CAA8BC,MAAOpB,EACpCqB,WAAAJ,IAACQ,EAAAA,+BAAA,IAAmCV,EAAOC,YAKjDQ,EAAsBD,YAAc"}
+{"version":3,"file":"index.cjs","sources":["../src/utils/render.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx","../src/index.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}\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","import { Courier } from '@trycourier/courier-js';\n\nCourier.shared.courierUserAgentName = \"courier-react\";\nCourier.shared.courierUserAgentVersion = __PACKAGE_VERSION__;\n\nexport { CourierInbox } from './components/courier-inbox';\nexport { CourierInboxPopupMenu } from './components/courier-inbox-popup-menu';\n\nexport { useCourier } from '@trycourier/courier-react-components';\n\nexport type {\n  CourierInboxProps,\n  CourierInboxPopupMenuProps,\n} from '@trycourier/courier-react-components';\n\n// Re-export types from courier-js\nexport type {\n  CourierProps,\n  CourierClientOptions,\n  CourierBrand,\n  CourierApiUrls,\n  CourierUserPreferences,\n  CourierUserPreferencesStatus,\n  CourierUserPreferencesChannel,\n  CourierUserPreferencesPaging,\n  CourierUserPreferencesTopic,\n  CourierUserPreferencesTopicResponse,\n  CourierDevice,\n  CourierToken,\n  CourierGetInboxMessageResponse,\n  CourierGetInboxMessagesResponse,\n  InboxMessage,\n  InboxAction,\n  InboxMessageEventEnvelope,\n} from '@trycourier/courier-js';\n\n// Re-export utility functions from courier-ui-inbox\nexport {\n  markAsRead,\n  markAsUnread,\n  clickMessage,\n  archiveMessage,\n  openMessage\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export factory prop types from courier-ui-inbox\nexport type {\n  CourierInboxHeaderFactoryProps,\n  CourierInboxStateLoadingFactoryProps,\n  CourierInboxStateEmptyFactoryProps,\n  CourierInboxStateErrorFactoryProps,\n  CourierInboxListItemFactoryProps,\n  CourierInboxListItemActionFactoryProps,\n  CourierInboxPaginationItemFactoryProps,\n  CourierInboxMenuButtonFactoryProps,\n  CourierInboxFeedType\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export theme types from courier-ui-inbox\nexport type {\n  CourierInboxTheme,\n  CourierInboxFontTheme,\n  CourierInboxIconTheme,\n  CourierInboxFilterItemTheme,\n  CourierInboxUnreadCountIndicatorTheme,\n  CourierInboxUnreadDotIndicatorTheme,\n  CourierInboxIconButtonTheme,\n  CourierInboxButtonTheme,\n  CourierInboxMenuButtonTheme,\n  CourierInboxPopupTheme,\n  CourierInboxListItemTheme,\n  CourierInboxSkeletonLoadingStateTheme,\n  CourierInboxInfoStateTheme,\n  CourierMenuItemTheme,\n  CourierFilterMenuTheme,\n  CourierActionMenuTheme\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export theme utilities from courier-ui-inbox\nexport {\n  defaultLightTheme,\n  defaultDarkTheme,\n  mergeTheme\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export element types from courier-ui-inbox\nexport type { CourierInbox as CourierInboxElement } from '@trycourier/courier-ui-inbox';\nexport type { CourierInboxPopupMenu as CourierInboxPopupMenuElement } from '@trycourier/courier-ui-inbox';\n\n// Re-export types from courier-ui-core\nexport type {\n  CourierComponentThemeMode\n} from '@trycourier/courier-ui-core'\n"],"names":["reactNodeToHTMLElement","node","container","document","createElement","root","createRoot","flushSync","render","element","firstElementChild","HTMLElement","Error","CourierInbox","forwardRef","props","ref","jsx","CourierRenderContext","Provider","value","children","CourierInboxComponent","displayName","CourierInboxPopupMenu","CourierInboxPopupMenuComponent","Courier","shared","courierUserAgentName","courierUserAgentVersion"],"mappings":"6TAUO,SAASA,EAAuBC,GACrC,MAAMC,EAAYC,SAASC,cAAc,OAGnCC,EAAOC,EAAAA,WAAWJ,GACxBK,EAAAA,WAAU,KACRF,EAAKG,OAAOP,EAAI,IAIlB,MAAMQ,EAAUP,EAAUQ,kBAC1B,KAAMD,aAAmBE,aACvB,MAAM,IAAIC,MACR,gGAIJ,OAAOH,CACT,CCFO,MAAMI,EAAeC,EAAAA,YAAmD,CAACC,EAAOC,MAEnFC,IAACC,EAAAA,qBAAqBC,SAArB,CAA8BC,MAAOpB,EACpCqB,WAAAJ,IAACK,EAAAA,sBAAA,IAA0BP,EAAOC,YAKxCH,EAAaU,YAAc,eCNpB,MAAMC,EAAwBV,EAAAA,YAAqE,CAACC,EAAOC,MAE9GC,IAACC,EAAAA,qBAAqBC,SAArB,CAA8BC,MAAOpB,EACpCqB,WAAAJ,IAACQ,EAAAA,+BAAA,IAAmCV,EAAOC,YAKjDQ,EAAsBD,YAAc,wBClCpCG,EAAAA,QAAQC,OAAOC,qBAAuB,gBACtCF,EAAAA,QAAQC,OAAOE,wBAA0B"}

package/dist/index.mjs

@@ -1,3 +1,4 @@
+import { Courier } from "@trycourier/courier-js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { CourierRenderContext, CourierInboxComponent, CourierInboxPopupMenuComponent } from "@trycourier/courier-react-components";
@@ -27,6 +28,8 @@ const CourierInboxPopupMenu = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(CourierRenderContext.Provider, { value: reactNodeToHTMLElement, children: /* @__PURE__ */ jsx(CourierInboxPopupMenuComponent, { ...props, ref }) });
 });
 CourierInboxPopupMenu.displayName = "CourierInboxPopupMenu";
+Courier.shared.courierUserAgentName = "courier-react";
+Courier.shared.courierUserAgentVersion = "8.1.0";
 export {
   CourierInbox,
   CourierInboxPopupMenu,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/utils/render.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.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}\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":[],"mappings":";;;;;;;AAUO,SAAS,uBAAuB,MAA8B;AACnE,QAAM,YAAY,SAAS,cAAc,KAAK;AAG9C,QAAM,OAAO,WAAW,SAAS;AACjC,YAAU,MAAM;AACd,SAAK,OAAO,IAAI;AAAA,EAClB,CAAC;AAGD,QAAM,UAAU,UAAU;AAC1B,MAAI,EAAE,mBAAmB,cAAc;AACrC,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,SAAO;AACT;ACFO,MAAM,eAAe,WAAmD,CAAC,OAAO,QAAQ;AAC7F,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,wBACpC,UAAA,oBAAC,uBAAA,EAAuB,GAAG,OAAO,IAAA,CAAU,EAAA,CAC9C;AAEJ,CAAC;AAED,aAAa,cAAc;ACNpB,MAAM,wBAAwB,WAAqE,CAAC,OAAO,QAAQ;AACxH,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,wBACpC,UAAA,oBAAC,gCAAA,EAAgC,GAAG,OAAO,IAAA,CAAU,EAAA,CACvD;AAEJ,CAAC;AAED,sBAAsB,cAAc;"}
+{"version":3,"file":"index.mjs","sources":["../src/utils/render.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx","../src/index.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}\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","import { Courier } from '@trycourier/courier-js';\n\nCourier.shared.courierUserAgentName = \"courier-react\";\nCourier.shared.courierUserAgentVersion = __PACKAGE_VERSION__;\n\nexport { CourierInbox } from './components/courier-inbox';\nexport { CourierInboxPopupMenu } from './components/courier-inbox-popup-menu';\n\nexport { useCourier } from '@trycourier/courier-react-components';\n\nexport type {\n  CourierInboxProps,\n  CourierInboxPopupMenuProps,\n} from '@trycourier/courier-react-components';\n\n// Re-export types from courier-js\nexport type {\n  CourierProps,\n  CourierClientOptions,\n  CourierBrand,\n  CourierApiUrls,\n  CourierUserPreferences,\n  CourierUserPreferencesStatus,\n  CourierUserPreferencesChannel,\n  CourierUserPreferencesPaging,\n  CourierUserPreferencesTopic,\n  CourierUserPreferencesTopicResponse,\n  CourierDevice,\n  CourierToken,\n  CourierGetInboxMessageResponse,\n  CourierGetInboxMessagesResponse,\n  InboxMessage,\n  InboxAction,\n  InboxMessageEventEnvelope,\n} from '@trycourier/courier-js';\n\n// Re-export utility functions from courier-ui-inbox\nexport {\n  markAsRead,\n  markAsUnread,\n  clickMessage,\n  archiveMessage,\n  openMessage\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export factory prop types from courier-ui-inbox\nexport type {\n  CourierInboxHeaderFactoryProps,\n  CourierInboxStateLoadingFactoryProps,\n  CourierInboxStateEmptyFactoryProps,\n  CourierInboxStateErrorFactoryProps,\n  CourierInboxListItemFactoryProps,\n  CourierInboxListItemActionFactoryProps,\n  CourierInboxPaginationItemFactoryProps,\n  CourierInboxMenuButtonFactoryProps,\n  CourierInboxFeedType\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export theme types from courier-ui-inbox\nexport type {\n  CourierInboxTheme,\n  CourierInboxFontTheme,\n  CourierInboxIconTheme,\n  CourierInboxFilterItemTheme,\n  CourierInboxUnreadCountIndicatorTheme,\n  CourierInboxUnreadDotIndicatorTheme,\n  CourierInboxIconButtonTheme,\n  CourierInboxButtonTheme,\n  CourierInboxMenuButtonTheme,\n  CourierInboxPopupTheme,\n  CourierInboxListItemTheme,\n  CourierInboxSkeletonLoadingStateTheme,\n  CourierInboxInfoStateTheme,\n  CourierMenuItemTheme,\n  CourierFilterMenuTheme,\n  CourierActionMenuTheme\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export theme utilities from courier-ui-inbox\nexport {\n  defaultLightTheme,\n  defaultDarkTheme,\n  mergeTheme\n} from '@trycourier/courier-ui-inbox';\n\n// Re-export element types from courier-ui-inbox\nexport type { CourierInbox as CourierInboxElement } from '@trycourier/courier-ui-inbox';\nexport type { CourierInboxPopupMenu as CourierInboxPopupMenuElement } from '@trycourier/courier-ui-inbox';\n\n// Re-export types from courier-ui-core\nexport type {\n  CourierComponentThemeMode\n} from '@trycourier/courier-ui-core'\n"],"names":[],"mappings":";;;;;;;;AAUO,SAAS,uBAAuB,MAA8B;AACnE,QAAM,YAAY,SAAS,cAAc,KAAK;AAG9C,QAAM,OAAO,WAAW,SAAS;AACjC,YAAU,MAAM;AACd,SAAK,OAAO,IAAI;AAAA,EAClB,CAAC;AAGD,QAAM,UAAU,UAAU;AAC1B,MAAI,EAAE,mBAAmB,cAAc;AACrC,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,SAAO;AACT;ACFO,MAAM,eAAe,WAAmD,CAAC,OAAO,QAAQ;AAC7F,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,wBACpC,UAAA,oBAAC,uBAAA,EAAuB,GAAG,OAAO,IAAA,CAAU,EAAA,CAC9C;AAEJ,CAAC;AAED,aAAa,cAAc;ACNpB,MAAM,wBAAwB,WAAqE,CAAC,OAAO,QAAQ;AACxH,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,wBACpC,UAAA,oBAAC,gCAAA,EAAgC,GAAG,OAAO,IAAA,CAAU,EAAA,CACvD;AAEJ,CAAC;AAED,sBAAsB,cAAc;AClCpC,QAAQ,OAAO,uBAAuB;AACtC,QAAQ,OAAO,0BAA0B;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/courier-react",
-  "version": "8.0.29",
+  "version": "8.1.0",
   "description": "The React components for the Courier web UI",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -27,10 +27,10 @@
   "author": "Courier",
   "license": "MIT",
   "dependencies": {
-    "@trycourier/courier-js": "2.0.12",
-    "@trycourier/courier-react-components": "1.0.4",
+    "@trycourier/courier-js": "2.1.0",
+    "@trycourier/courier-react-components": "1.1.0",
     "@trycourier/courier-ui-core": "1.0.13",
-    "@trycourier/courier-ui-inbox": "1.0.18"
+    "@trycourier/courier-ui-inbox": "1.1.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",