@trycourier/courier-react-17 8.0.25

package/README.md

@@ -0,0 +1,394 @@
+# `@trycourier/courier-react-17`
+
+![courier-react-17](https://github.com/user-attachments/assets/e886b445-d106-4dab-afca-82183e0fcbe7)
+
+## 1. Install
+
+```sh
+npm install @trycourier/courier-react-17@beta
+```
+
+> **Using React 18+?** Check out the [@trycourier/courier-react](../courier-react/) package.
+>
+> **Not using React?** Use the [@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:**
+
+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`).
+
+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.
+
+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.**
+
+```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
+
+### `CourierInbox`
+
+<img width="688" alt="Screenshot 2025-06-25 at 5 17 47 PM" src="https://github.com/user-attachments/assets/1655f43b-cc61-473f-9204-8dffeae21042" />
+
+```ts
+import { useEffect } from 'react';
+import { CourierInbox, useCourier } from '@trycourier/courier-react-17';
+
+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 />;
+
+}
+```
+
+### `CourierInboxPopupMenu`
+
+<img width="605" alt="Screenshot 2025-06-25 at 5 21 53 PM" src="https://github.com/user-attachments/assets/1c5497ba-a860-4d7e-8cf7-5b56a65cea51" />
+
+```ts
+import { useEffect } from 'react';
+import { CourierInbox, useCourier } from '@trycourier/courier-react-17';
+
+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 (
+    <div style={{ padding: '24px' }}>
+      <CourierInboxPopupMenu />
+    </div>
+  );
+
+}
+```
+
+## Server Side Rendering Frameworks
+
+`courier-react-17` only supports client side rendering. Frameworks like Next.js must be explicitly client-side rendered where the Courier components are used.
+
+## Handle Clicks and Presses
+
+```ts
+import { useEffect } from 'react';
+import { CourierInbox, useCourier, type CourierInboxListItemFactoryProps, type CourierInboxListItemActionFactoryProps } from '@trycourier/courier-react-17';
+
+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-17';
+
+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-17'
+
+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-17'
+
+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-17'
+
+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-17'
+
+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} />
+      }}
+    />
+  );
+
+}
+```
+
+> **Not using React?** We suggest you use [@trycourier/courier-ui-inbox](../courier-ui-inbox/README.md) package instead.

package/dist/components/courier-inbox-popup-menu.d.ts

@@ -0,0 +1,26 @@
+import { CourierInboxPopupMenu as CourierInboxPopupMenuElement } from '@trycourier/courier-ui-inbox';
+import { CourierInboxPopupMenuProps } from '@trycourier/courier-react-components';
+/**
+ * CourierInboxPopupMenu React component.
+ *
+ * This component is used to display a popup menu for a message in the inbox.
+ *
+ * @example
+ * ```tsx
+ * 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 <CourierInboxPopupMenu />;
+ * ```
+ */
+export declare const CourierInboxPopupMenu: import('../../../../node_modules/react').ForwardRefExoticComponent<CourierInboxPopupMenuProps & import('../../../../node_modules/react').RefAttributes<CourierInboxPopupMenuElement>>;

package/dist/components/courier-inbox.d.ts

@@ -0,0 +1,24 @@
+import { CourierInbox as CourierInboxElement } from '@trycourier/courier-ui-inbox';
+import { CourierInboxProps } from '@trycourier/courier-react-components';
+/**
+ * CourierInbox React component.
+ *
+ * @example
+ * ```tsx
+ * 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 />;
+ * ```
+ */
+export declare const CourierInbox: import('../../../../node_modules/react').ForwardRefExoticComponent<CourierInboxProps & import('../../../../node_modules/react').RefAttributes<CourierInboxElement>>;

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"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=({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},a=r.createContext(null),i=r.forwardRef(((t,n)=>{const s=r.useContext(a);if(!s)throw new Error("RenderContext not found. Ensure CourierInbox is wrapped in a CourierRenderContext.");const i=r.useRef(null);function u(){return i.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 d=e.jsx("courier-inbox",{ref:function(e){n&&("function"==typeof n?n(e):n.current=e),i.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(o,{children:d})})),u=r.forwardRef(((t,n)=>{const s=r.useContext(a);if(!s)throw new Error("RenderContext not found. Ensure CourierInboxPopupMenu is wrapped in a CourierRenderContext.");const i=r.useRef(null);function u(){return i.current}const d=r.useRef(void 0);r.useEffect((()=>{const e=u();e&&t.feedType!==d.current&&(d.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 c=e.jsx("courier-inbox-popup-menu",{ref:function(e){n&&("function"==typeof n?n(e):n.current=e),i.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(o,{children:c})}));function d(e){const r=document.createElement("div");s.render(e,r);const t=r.firstElementChild;if(!(t instanceof HTMLElement))throw new Error("reactNodeToHTMLElement must return a single JSX element that renders to an HTMLElement (e.g., <div>)");return t}const c=r.forwardRef(((r,t)=>e.jsx(a.Provider,{value:d,children:e.jsx(i,{...r,ref:t})})));c.displayName="CourierInbox";const g=r.forwardRef(((r,t)=>e.jsx(a.Provider,{value:d,children:e.jsx(u,{...r,ref:t})})));g.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=c,exports.CourierInboxPopupMenu=g,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}),d=e=>n.CourierInboxDatastore.shared.unreadMessage({message:e}),c=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:d,clickMessage:c,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:d,clickMessage:c,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}};
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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 { render } from \"react-dom\";\n\n/**\n * Converts a React node to an HTMLElement.\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  render(node, container);\n\n  const element = container.firstElementChild;\n  if (!(element instanceof HTMLElement)) {\n    throw new Error(\n      'reactNodeToHTMLElement 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","element","firstElementChild","HTMLElement","CourierInbox","Provider","value","displayName","CourierInboxPopupMenu","signIn","Courier","shared","signOut","loadInbox","CourierInboxDatastore","load","fetchNextPageOfMessages","setPaginationLimit","limit","paginationLimit","readMessage","message","unreadMessage","clickMessage","archiveMessage","openMessage","unarchiveMessage","readAllMessages","auth","setAuth","React","userId","setInbox","listener","addAuthenticationListener","refreshAuth","inboxListener","CourierInboxDataStoreListener","onError","error","refreshInbox","onDataSetChange","onPageAdded","onMessageAdd","onMessageRemove","onMessageUpdate","onUnreadCountChange","addDataStoreListener","remove","options","client","datastore","inboxDataSet","archive","archiveDataSet","unreadCount"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { CourierInbox } from './components/courier-inbox';
+export { CourierInboxPopupMenu } from './components/courier-inbox-popup-menu';
+export { useCourier } from '@trycourier/courier-react-components';
+export type { CourierInboxProps, CourierInboxPopupMenuProps, } from '@trycourier/courier-react-components';
+export type { CourierProps, CourierClientOptions, CourierBrand, CourierApiUrls, CourierUserPreferences, CourierUserPreferencesStatus, CourierUserPreferencesChannel, CourierUserPreferencesPaging, CourierUserPreferencesTopic, CourierUserPreferencesTopicResponse, CourierDevice, CourierToken, CourierGetInboxMessageResponse, CourierGetInboxMessagesResponse, InboxMessage, InboxAction, InboxMessageEventEnvelope, } from '@trycourier/courier-js';
+export { markAsRead, markAsUnread, clickMessage, archiveMessage, openMessage } from '@trycourier/courier-ui-inbox';
+export type { CourierInboxHeaderFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxListItemFactoryProps, CourierInboxListItemActionFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxMenuButtonFactoryProps, CourierInboxFeedType } from '@trycourier/courier-ui-inbox';
+export type { CourierInboxTheme, CourierInboxFontTheme, CourierInboxIconTheme, CourierInboxFilterItemTheme, CourierInboxUnreadCountIndicatorTheme, CourierInboxUnreadDotIndicatorTheme, CourierInboxIconButtonTheme, CourierInboxButtonTheme, CourierInboxMenuButtonTheme, CourierInboxPopupTheme, CourierInboxListItemTheme, CourierInboxSkeletonLoadingStateTheme, CourierInboxInfoStateTheme, CourierMenuItemTheme, CourierFilterMenuTheme, CourierActionMenuTheme } from '@trycourier/courier-ui-inbox';
+export { defaultLightTheme, defaultDarkTheme, mergeTheme } from '@trycourier/courier-ui-inbox';
+export type { CourierInbox as CourierInboxElement } from '@trycourier/courier-ui-inbox';
+export type { CourierInboxPopupMenu as CourierInboxPopupMenuElement } from '@trycourier/courier-ui-inbox';
+export type { CourierComponentThemeMode } from '@trycourier/courier-ui-core';

package/dist/index.mjs

@@ -0,0 +1,391 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React, { createContext, forwardRef, useContext, useRef, useEffect, useState } from "react";
+import { Courier } from "@trycourier/courier-js";
+import { CourierInboxDatastore, CourierInboxDataStoreListener } from "@trycourier/courier-ui-inbox";
+import { archiveMessage, clickMessage, defaultDarkTheme, defaultLightTheme, markAsRead, markAsUnread, mergeTheme, openMessage } from "@trycourier/courier-ui-inbox";
+import { render } from "react-dom";
+const useCourier = () => {
+  const signIn = (props) => Courier.shared.signIn(props);
+  const signOut = () => Courier.shared.signOut();
+  const loadInbox = (props) => CourierInboxDatastore.shared.load(props);
+  const fetchNextPageOfMessages = (props) => CourierInboxDatastore.shared.fetchNextPageOfMessages(props);
+  const setPaginationLimit = (limit) => Courier.shared.paginationLimit = limit;
+  const readMessage = (message) => CourierInboxDatastore.shared.readMessage({ message });
+  const unreadMessage = (message) => CourierInboxDatastore.shared.unreadMessage({ message });
+  const clickMessage2 = (message) => CourierInboxDatastore.shared.clickMessage({ message });
+  const archiveMessage2 = (message) => CourierInboxDatastore.shared.archiveMessage({ message });
+  const openMessage2 = (message) => CourierInboxDatastore.shared.openMessage({ message });
+  const unarchiveMessage = (message) => CourierInboxDatastore.shared.unarchiveMessage({ message });
+  const readAllMessages = () => CourierInboxDatastore.shared.readAllMessages();
+  const [auth, setAuth] = React.useState({
+    userId: void 0,
+    signIn,
+    signOut
+  });
+  const [inbox, setInbox] = React.useState({
+    load: loadInbox,
+    fetchNextPageOfMessages,
+    setPaginationLimit,
+    readMessage,
+    unreadMessage,
+    clickMessage: clickMessage2,
+    archiveMessage: archiveMessage2,
+    openMessage: openMessage2,
+    unarchiveMessage,
+    readAllMessages
+  });
+  React.useEffect(() => {
+    const listener = Courier.shared.addAuthenticationListener(() => refreshAuth());
+    const inboxListener = new CourierInboxDataStoreListener({
+      onError: (error) => refreshInbox(error),
+      onDataSetChange: () => refreshInbox(),
+      onPageAdded: () => refreshInbox(),
+      onMessageAdd: () => refreshInbox(),
+      onMessageRemove: () => refreshInbox(),
+      onMessageUpdate: () => refreshInbox(),
+      onUnreadCountChange: () => refreshInbox()
+    });
+    CourierInboxDatastore.shared.addDataStoreListener(inboxListener);
+    refreshAuth();
+    refreshInbox();
+    return () => {
+      listener.remove();
+      inboxListener.remove();
+    };
+  }, []);
+  const refreshAuth = () => {
+    var _a;
+    const options = (_a = Courier.shared.client) == null ? void 0 : _a.options;
+    setAuth({
+      userId: options == null ? void 0 : options.userId,
+      signIn,
+      signOut
+    });
+  };
+  const refreshInbox = (error) => {
+    const datastore = CourierInboxDatastore.shared;
+    setInbox({
+      load: loadInbox,
+      fetchNextPageOfMessages,
+      setPaginationLimit,
+      readMessage,
+      unreadMessage,
+      clickMessage: clickMessage2,
+      archiveMessage: archiveMessage2,
+      openMessage: openMessage2,
+      unarchiveMessage,
+      readAllMessages,
+      inbox: datastore.inboxDataSet,
+      archive: datastore.archiveDataSet,
+      unreadCount: datastore.unreadCount,
+      error
+    });
+  };
+  return {
+    shared: Courier.shared,
+    auth,
+    inbox
+  };
+};
+const CourierClientComponent = ({ children }) => {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  if (typeof window === "undefined") {
+    return null;
+  }
+  if (!isMounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+const CourierRenderContext = createContext(null);
+const CourierInboxComponent = forwardRef((props, ref) => {
+  const render2 = useContext(CourierRenderContext);
+  if (!render2) {
+    throw new Error("RenderContext not found. Ensure CourierInbox is wrapped in a CourierRenderContext.");
+  }
+  const inboxRef = useRef(null);
+  function handleRef(el) {
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(el);
+      } else {
+        ref.current = el;
+      }
+    }
+    inboxRef.current = el;
+  }
+  function getEl() {
+    return inboxRef.current;
+  }
+  useEffect(() => {
+    const inbox = getEl();
+    if (!inbox) return;
+    inbox.onMessageClick(props.onMessageClick);
+  }, [props.onMessageClick]);
+  useEffect(() => {
+    const inbox = getEl();
+    if (!inbox) return;
+    inbox.onMessageActionClick(props.onMessageActionClick);
+  }, [props.onMessageActionClick]);
+  useEffect(() => {
+    const inbox = getEl();
+    if (!inbox) return;
+    inbox.onMessageLongPress(props.onMessageLongPress);
+  }, [props.onMessageLongPress]);
+  useEffect(() => {
+    const inbox = getEl();
+    if (!inbox || !props.renderHeader) return;
+    queueMicrotask(() => {
+      inbox.setHeader((headerProps) => {
+        const reactNode = props.renderHeader(headerProps);
+        return render2(reactNode);
+      });
+    });
+  }, [props.renderHeader]);
+  useEffect(() => {
+    const inbox = getEl();
+    if (!inbox || !props.renderListItem) return;
+    queueMicrotask(() => {
+      inbox.setListItem((itemProps) => {
+        const reactNode = props.renderListItem(itemProps);
+        return render2(reactNode);
+      });
+    });
+  }, [props.renderListItem]);
+  useEffect(() => {
+    const inbox = getEl();
+    if (!inbox || !props.renderEmptyState) return;
+    queueMicrotask(() => {
+      inbox.setEmptyState((emptyStateProps) => {
+        const reactNode = props.renderEmptyState(emptyStateProps);
+        return render2(reactNode);
+      });
+    });
+  }, [props.renderEmptyState]);
+  useEffect(() => {
+    const inbox = getEl();
+    if (!inbox || !props.renderLoadingState) return;
+    queueMicrotask(() => {
+      inbox.setLoadingState((loadingStateProps) => {
+        const reactNode = props.renderLoadingState(loadingStateProps);
+        return render2(reactNode);
+      });
+    });
+  }, [props.renderLoadingState]);
+  useEffect(() => {
+    const inbox = getEl();
+    if (!inbox || !props.renderErrorState) return;
+    queueMicrotask(() => {
+      inbox.setErrorState((errorStateProps) => {
+        const reactNode = props.renderErrorState(errorStateProps);
+        return render2(reactNode);
+      });
+    });
+  }, [props.renderErrorState]);
+  useEffect(() => {
+    const inbox = getEl();
+    if (!inbox || !props.renderPaginationItem) return;
+    queueMicrotask(() => {
+      inbox.setPaginationItem((paginationProps) => {
+        const reactNode = props.renderPaginationItem(paginationProps);
+        return render2(reactNode);
+      });
+    });
+  }, [props.renderPaginationItem]);
+  useEffect(() => {
+    const inbox = getEl();
+    if (!inbox) return;
+    queueMicrotask(() => {
+      inbox.setFeedType(props.feedType || "inbox");
+    });
+  }, [props.feedType]);
+  const children = (
+    /* @ts-ignore */
+    /* @__PURE__ */ jsx(
+      "courier-inbox",
+      {
+        ref: handleRef,
+        height: props.height,
+        "light-theme": props.lightTheme ? JSON.stringify(props.lightTheme) : void 0,
+        "dark-theme": props.darkTheme ? JSON.stringify(props.darkTheme) : void 0,
+        mode: props.mode
+      }
+    )
+  );
+  return /* @__PURE__ */ jsx(CourierClientComponent, { children });
+});
+const CourierInboxPopupMenuComponent = forwardRef(
+  (props, ref) => {
+    const render2 = useContext(CourierRenderContext);
+    if (!render2) {
+      throw new Error("RenderContext not found. Ensure CourierInboxPopupMenu is wrapped in a CourierRenderContext.");
+    }
+    const inboxRef = useRef(null);
+    function handleRef(el) {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(el);
+        } else {
+          ref.current = el;
+        }
+      }
+      inboxRef.current = el;
+    }
+    function getEl() {
+      return inboxRef.current;
+    }
+    const lastFeedTypeRef = useRef(void 0);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu) return;
+      if (props.feedType !== lastFeedTypeRef.current) {
+        lastFeedTypeRef.current = props.feedType;
+        queueMicrotask(() => {
+          var _a;
+          (_a = menu.setFeedType) == null ? void 0 : _a.call(menu, props.feedType ?? "inbox");
+        });
+      }
+    }, [props.feedType]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu) return;
+      menu.onMessageClick(props.onMessageClick);
+    }, [props.onMessageClick]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu) return;
+      menu.onMessageActionClick(props.onMessageActionClick);
+    }, [props.onMessageActionClick]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu) return;
+      menu.onMessageLongPress(props.onMessageLongPress);
+    }, [props.onMessageLongPress]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu || !props.renderHeader) return;
+      queueMicrotask(() => {
+        menu.setHeader((headerProps) => {
+          const reactNode = props.renderHeader(headerProps);
+          return render2(reactNode);
+        });
+      });
+    }, [props.renderHeader]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu || !props.renderListItem) return;
+      queueMicrotask(() => {
+        menu.setListItem((itemProps) => {
+          const reactNode = props.renderListItem(itemProps);
+          return render2(reactNode);
+        });
+      });
+    }, [props.renderListItem]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu || !props.renderEmptyState) return;
+      queueMicrotask(() => {
+        menu.setEmptyState((emptyStateProps) => {
+          const reactNode = props.renderEmptyState(emptyStateProps);
+          return render2(reactNode);
+        });
+      });
+    }, [props.renderEmptyState]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu || !props.renderLoadingState) return;
+      queueMicrotask(() => {
+        menu.setLoadingState((loadingStateProps) => {
+          const reactNode = props.renderLoadingState(loadingStateProps);
+          return render2(reactNode);
+        });
+      });
+    }, [props.renderLoadingState]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu || !props.renderErrorState) return;
+      queueMicrotask(() => {
+        menu.setErrorState((errorStateProps) => {
+          const reactNode = props.renderErrorState(errorStateProps);
+          return render2(reactNode);
+        });
+      });
+    }, [props.renderErrorState]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu || !props.renderPaginationItem) return;
+      queueMicrotask(() => {
+        menu.setPaginationItem((paginationProps) => {
+          const reactNode = props.renderPaginationItem(paginationProps);
+          return render2(reactNode);
+        });
+      });
+    }, [props.renderPaginationItem]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu || !props.renderMenuButton) return;
+      queueMicrotask(() => {
+        menu.setMenuButton((buttonProps) => {
+          const reactNode = props.renderMenuButton(buttonProps);
+          return render2(reactNode);
+        });
+      });
+    }, [props.renderMenuButton]);
+    const children = (
+      /* @ts-ignore */
+      /* @__PURE__ */ jsx(
+        "courier-inbox-popup-menu",
+        {
+          ref: handleRef,
+          "popup-alignment": props.popupAlignment,
+          "popup-width": props.popupWidth,
+          "popup-height": props.popupHeight,
+          left: props.left,
+          top: props.top,
+          right: props.right,
+          bottom: props.bottom,
+          "light-theme": props.lightTheme ? JSON.stringify(props.lightTheme) : void 0,
+          "dark-theme": props.darkTheme ? JSON.stringify(props.darkTheme) : void 0,
+          mode: props.mode
+        }
+      )
+    );
+    return /* @__PURE__ */ jsx(CourierClientComponent, { children });
+  }
+);
+function reactNodeToHTMLElement(node) {
+  const container = document.createElement("div");
+  render(node, container);
+  const element = container.firstElementChild;
+  if (!(element instanceof HTMLElement)) {
+    throw new Error(
+      "reactNodeToHTMLElement must return a single JSX element that renders to an HTMLElement (e.g., <div>)"
+    );
+  }
+  return element;
+}
+const CourierInbox = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(CourierRenderContext.Provider, { value: reactNodeToHTMLElement, children: /* @__PURE__ */ jsx(CourierInboxComponent, { ...props, ref }) });
+});
+CourierInbox.displayName = "CourierInbox";
+const CourierInboxPopupMenu = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(CourierRenderContext.Provider, { value: reactNodeToHTMLElement, children: /* @__PURE__ */ jsx(CourierInboxPopupMenuComponent, { ...props, ref }) });
+});
+CourierInboxPopupMenu.displayName = "CourierInboxPopupMenu";
+export {
+  CourierInbox,
+  CourierInboxPopupMenu,
+  archiveMessage,
+  clickMessage,
+  defaultDarkTheme,
+  defaultLightTheme,
+  markAsRead,
+  markAsUnread,
+  mergeTheme,
+  openMessage,
+  useCourier
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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 { render } from \"react-dom\";\n\n/**\n * Converts a React node to an HTMLElement.\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  render(node, container);\n\n  const element = container.firstElementChild;\n  if (!(element instanceof HTMLElement)) {\n    throw new Error(\n      'reactNodeToHTMLElement 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","render"],"mappings":"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"}

package/dist/utils/render.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from '../../../../node_modules/react';
+/**
+ * Converts a React node to an HTMLElement.
+ * @param node - The React node to convert.
+ * @returns The converted HTMLElement.
+ */
+export declare function reactNodeToHTMLElement(node: ReactNode): HTMLElement;

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@trycourier/courier-react-17",
+  "version": "8.0.25",
+  "description": "React 17 components for the Courier web UI",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "cross-env NODE_ENV=production tsc && vite build --mode production",
+    "watch": "vite build --watch",
+    "preview": "vite preview",
+    "prepare": "npm run build",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "courier",
+    "ui",
+    "react",
+    "typescript",
+    "browser"
+  ],
+  "author": "Courier",
+  "license": "MIT",
+  "dependencies": {
+    "@trycourier/courier-js": "2.0.10",
+    "@trycourier/courier-react-components": "1.0.0",
+    "@trycourier/courier-ui-core": "1.0.12",
+    "@trycourier/courier-ui-inbox": "1.0.15"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0, <18.0.0",
+    "react-dom": ">=17.0.0, <18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^8.20.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.12",
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.2",
+    "@vitejs/plugin-react": "4.4.1",
+    "cross-env": "^7.0.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "ts-jest": "^29.1.2",
+    "vite": "6.2.6",
+    "vite-plugin-dts": "4.5.3"
+  },
+  "overrides": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "resolutions": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  }
+}