@trycourier/courier-react 8.0.23-beta → 8.0.24-beta

package/README.md

@@ -3,7 +3,7 @@
 ## 1. Install
 
 ```sh
-npm i @trycourier/courier-react@8.0.23-beta
+npm i @trycourier/courier-react@8.0.24-beta
 ```
 
 > **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

@@ -2,26 +2,47 @@ import { ReactNode } from '../../../../node_modules/react';
 import { CourierInboxFeedType, CourierInboxHeaderFactoryProps, CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxMenuButtonFactoryProps, CourierInboxPopupMenu as CourierInboxPopupMenuElement, CourierInboxPaginationItemFactoryProps, CourierInboxPopupAlignment, CourierInboxStateEmptyFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxTheme } from '@trycourier/courier-ui-inbox';
 import { CourierComponentThemeMode } from '@trycourier/courier-ui-core';
 export interface CourierInboxPopupMenuProps {
+    /** Alignment of the popup menu: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center', 'center-right', 'center-left', 'center-center'. */
     popupAlignment?: CourierInboxPopupAlignment;
+    /** Width of the popup menu container. */
     popupWidth?: string;
+    /** Height of the popup menu container. */
     popupHeight?: string;
+    /** CSS left position for the popup menu. */
     left?: string;
+    /** CSS top position for the popup menu. */
     top?: string;
+    /** CSS right position for the popup menu. */
     right?: string;
+    /** CSS bottom position for the popup menu. */
     bottom?: string;
+    /** Theme object for light mode. */
     lightTheme?: CourierInboxTheme;
+    /** Theme object for dark mode. */
     darkTheme?: CourierInboxTheme;
+    /** Theme mode: 'light', 'dark', or 'system'. */
     mode?: CourierComponentThemeMode;
+    /** Type of feed to display in the popup menu ('inbox' or 'archive'). */
     feedType?: CourierInboxFeedType;
+    /** Callback fired when a message is clicked. */
     onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;
+    /** Callback fired when a message action (e.g., button) is clicked. */
     onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;
+    /** Callback fired when a message is long-pressed (for mobile/gesture support). */
     onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;
+    /** Allows you to pass a custom component as the header. */
     renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;
+    /** Allows you to pass a custom component as the list item. */
     renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;
+    /** Allows you to pass a custom component as the empty state. */
     renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;
+    /** Allows you to pass a custom component as the loading state. */
     renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;
+    /** Allows you to pass a custom component as the error state. */
     renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;
+    /** Allows you to pass a custom component as the pagination list item. */
     renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;
+    /** Allows you to pass a custom component as the menu button. */
     renderMenuButton?: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => ReactNode;
 }
 export declare const CourierInboxPopupMenu: import('../../../../node_modules/react').ForwardRefExoticComponent<CourierInboxPopupMenuProps & import('../../../../node_modules/react').RefAttributes<CourierInboxPopupMenuElement>>;

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

@@ -2,19 +2,33 @@ import { ReactNode } from '../../../../node_modules/react';
 import { CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxTheme, CourierInbox as CourierInboxElement, CourierInboxHeaderFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxFeedType } from '@trycourier/courier-ui-inbox';
 import { CourierComponentThemeMode } from '@trycourier/courier-ui-core';
 export interface CourierInboxProps {
+    /** Height of the inbox container. Defaults to "auto" and will resize itself based on it's children. */
     height?: string;
+    /** Theme object for light mode */
     lightTheme?: CourierInboxTheme;
+    /** Theme object for dark mode */
     darkTheme?: CourierInboxTheme;
+    /** Theme mode: "light", "dark", or "system". Defaults to "system" */
     mode?: CourierComponentThemeMode;
+    /** Type of feed to display in the inbox ("inbox" or "archive"). Defaults to "inbox" */
     feedType?: CourierInboxFeedType;
+    /** Callback fired when a message is clicked. */
     onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;
+    /** Callback fired when a message action (e.g., button) is clicked. */
     onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;
+    /** Callback fired when a message is long-pressed (for mobile/gesture support). Only works on devices that support touch. */
     onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;
+    /** Allows you to pass a custom component as the header. */
     renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;
+    /** Allows you to pass a custom component as the list item. */
     renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;
+    /** Allows you to pass a custom component as the empty state. */
     renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;
+    /** Allows you to pass a custom component as the loading state. */
     renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;
+    /** Allows you to pass a custom component as the error state. */
     renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;
+    /** Allows you to pass a custom component as the pagination list item. */
     renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;
 }
 export declare const CourierInbox: import('../../../../node_modules/react').ForwardRefExoticComponent<CourierInboxProps & import('../../../../node_modules/react').RefAttributes<CourierInboxElement>>;

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@trycourier/courier-js"),r=require("@trycourier/courier-ui-inbox"),t=require("react"),s=require("react/jsx-runtime"),n=require("react-dom"),a=require("react-dom/client");function o(e){const r=document.createElement("div"),t=a.createRoot(r);n.flushSync((()=>{t.render(e)}));const s=r.firstElementChild;if(!(s instanceof HTMLElement))throw new Error("renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)");return s}const i=({children:e})=>{const[r,n]=t.useState(!1);return t.useEffect((()=>{n(!0)}),[]),"undefined"==typeof window?null:r?s.jsx(s.Fragment,{children:e}):null},u=t.forwardRef(((e,r)=>{const n=t.useRef(null);return t.useEffect((()=>{"function"==typeof r?r(n.current):r&&(r.current=n.current)}),[r]),t.useEffect((()=>{const r=n.current;r&&r.onMessageClick(e.onMessageClick)}),[e.onMessageClick,n]),t.useEffect((()=>{const r=n.current;r&&r.onMessageActionClick(e.onMessageActionClick)}),[e.onMessageActionClick,n]),t.useEffect((()=>{const r=n.current;r&&r.onMessageLongPress(e.onMessageLongPress)}),[e.onMessageLongPress,n]),t.useEffect((()=>{const r=n.current;r&&e.renderHeader&&queueMicrotask((()=>{r.setHeader((r=>o(e.renderHeader(r))))}))}),[e.renderHeader,n]),t.useEffect((()=>{const r=n.current;r&&e.renderListItem&&queueMicrotask((()=>{r.setListItem((r=>o(e.renderListItem(r))))}))}),[e.renderListItem,n]),t.useEffect((()=>{const r=n.current;r&&e.renderEmptyState&&queueMicrotask((()=>{r.setEmptyState((r=>o(e.renderEmptyState(r))))}))}),[e.renderEmptyState,n]),t.useEffect((()=>{const r=n.current;r&&e.renderLoadingState&&queueMicrotask((()=>{r.setLoadingState((r=>o(e.renderLoadingState(r))))}))}),[e.renderLoadingState,n]),t.useEffect((()=>{const r=n.current;r&&e.renderErrorState&&queueMicrotask((()=>{r.setErrorState((r=>o(e.renderErrorState(r))))}))}),[e.renderErrorState,n]),t.useEffect((()=>{const r=n.current;r&&e.renderPaginationItem&&queueMicrotask((()=>{r.setPaginationItem((r=>o(e.renderPaginationItem(r))))}))}),[e.renderPaginationItem,n]),t.useEffect((()=>{const r=n.current;r&&queueMicrotask((()=>{r.setFeedType(e.feedType||"inbox")}))}),[e.feedType,n]),s.jsx(i,{children:s.jsx("courier-inbox",{ref:n,height:e.height,"light-theme":e.lightTheme?JSON.stringify(e.lightTheme):void 0,"dark-theme":e.darkTheme?JSON.stringify(e.darkTheme):void 0,mode:e.mode})})}));u.displayName="CourierInbox";const c=t.forwardRef(((e,r)=>{const n=t.useRef(null);return t.useEffect((()=>{"function"==typeof r?r(n.current):r&&(r.current=n.current)}),[r]),t.useEffect((()=>{const r=n.current;r&&r.onMessageClick(e.onMessageClick)}),[e.onMessageClick,n]),t.useEffect((()=>{const r=n.current;r&&r.onMessageActionClick(e.onMessageActionClick)}),[e.onMessageActionClick,n]),t.useEffect((()=>{const r=n.current;r&&r.onMessageLongPress(e.onMessageLongPress)}),[e.onMessageLongPress,n]),t.useEffect((()=>{const r=n.current;r&&e.renderHeader&&queueMicrotask((()=>{r.setHeader((r=>o(e.renderHeader(r))))}))}),[e.renderHeader,n]),t.useEffect((()=>{const r=n.current;r&&e.renderListItem&&queueMicrotask((()=>{r.setListItem((r=>o(e.renderListItem(r))))}))}),[e.renderListItem,n]),t.useEffect((()=>{const r=n.current;r&&e.renderEmptyState&&queueMicrotask((()=>{r.setEmptyState((r=>o(e.renderEmptyState(r))))}))}),[e.renderEmptyState,n]),t.useEffect((()=>{const r=n.current;r&&e.renderLoadingState&&queueMicrotask((()=>{r.setLoadingState((r=>o(e.renderLoadingState(r))))}))}),[e.renderLoadingState,n]),t.useEffect((()=>{const r=n.current;r&&e.renderErrorState&&queueMicrotask((()=>{r.setErrorState((r=>o(e.renderErrorState(r))))}))}),[e.renderErrorState,n]),t.useEffect((()=>{const r=n.current;r&&e.renderPaginationItem&&queueMicrotask((()=>{r.setPaginationItem((r=>o(e.renderPaginationItem(r))))}))}),[e.renderPaginationItem,n]),t.useEffect((()=>{const r=n.current;r&&e.renderMenuButton&&queueMicrotask((()=>{r.setMenuButton((r=>o(e.renderMenuButton(r))))}))}),[e.renderMenuButton,n]),t.useEffect((()=>{const r=n.current;r&&queueMicrotask((()=>{r.setFeedType(e.feedType||"inbox")}))}),[e.feedType,n]),s.jsx(i,{children:s.jsx("courier-inbox-popup-menu",{ref:n,"popup-alignment":e.popupAlignment,"popup-width":e.popupWidth,"popup-height":e.popupHeight,left:e.left,top:e.top,right:e.right,bottom:e.bottom,"light-theme":e.lightTheme?JSON.stringify(e.lightTheme):void 0,"dark-theme":e.darkTheme?JSON.stringify(e.darkTheme):void 0,mode:e.mode})})}));c.displayName="CourierInboxPopupMenu",Object.defineProperty(exports,"archiveMessage",{enumerable:!0,get:()=>r.archiveMessage}),Object.defineProperty(exports,"clickMessage",{enumerable:!0,get:()=>r.clickMessage}),Object.defineProperty(exports,"defaultDarkTheme",{enumerable:!0,get:()=>r.defaultDarkTheme}),Object.defineProperty(exports,"defaultLightTheme",{enumerable:!0,get:()=>r.defaultLightTheme}),Object.defineProperty(exports,"markAsRead",{enumerable:!0,get:()=>r.markAsRead}),Object.defineProperty(exports,"markAsUnread",{enumerable:!0,get:()=>r.markAsUnread}),Object.defineProperty(exports,"mergeTheme",{enumerable:!0,get:()=>r.mergeTheme}),Object.defineProperty(exports,"openMessage",{enumerable:!0,get:()=>r.openMessage}),exports.CourierInbox=u,exports.CourierInboxPopupMenu=c,exports.useCourier=()=>{const s=r=>e.Courier.shared.signIn(r),n=()=>e.Courier.shared.signOut(),a=e=>r.CourierInboxDatastore.shared.load(e),o=e=>r.CourierInboxDatastore.shared.fetchNextPageOfMessages(e),i=r=>e.Courier.shared.paginationLimit=r,u=e=>r.CourierInboxDatastore.shared.readMessage({message:e}),c=e=>r.CourierInboxDatastore.shared.unreadMessage({message:e}),d=e=>r.CourierInboxDatastore.shared.clickMessage({message:e}),g=e=>r.CourierInboxDatastore.shared.archiveMessage({message:e}),f=e=>r.CourierInboxDatastore.shared.openMessage({message:e}),m=e=>r.CourierInboxDatastore.shared.unarchiveMessage({message:e}),h=()=>r.CourierInboxDatastore.shared.readAllMessages(),[l,p]=t.useState({userId:void 0,signIn:s,signOut:n}),[M,E]=t.useState({load:a,fetchNextPageOfMessages:o,setPaginationLimit:i,readMessage:u,unreadMessage:c,clickMessage:d,archiveMessage:g,openMessage:f,unarchiveMessage:m,readAllMessages:h});t.useEffect((()=>{const t=e.Courier.shared.addAuthenticationListener((()=>x())),s=new r.CourierInboxDataStoreListener({onError:e=>b(e),onDataSetChange:()=>b(),onPageAdded:()=>b(),onMessageAdd:()=>b(),onMessageRemove:()=>b(),onMessageUpdate:()=>b(),onUnreadCountChange:()=>b()});return r.CourierInboxDatastore.shared.addDataStoreListener(s),x(),b(),()=>{t.remove(),s.remove()}}),[]);const x=()=>{var r;const t=null==(r=e.Courier.shared.client)?void 0:r.options;p({userId:null==t?void 0:t.userId,signIn:s,signOut:n})},b=e=>{const t=r.CourierInboxDatastore.shared;E({load:a,fetchNextPageOfMessages:o,setPaginationLimit:i,readMessage:u,unreadMessage:c,clickMessage:d,archiveMessage:g,openMessage:f,unarchiveMessage:m,readAllMessages:h,inbox:t.inboxDataSet,archive:t.archiveDataSet,unreadCount:t.unreadCount,error:e})};return{shared:e.Courier.shared,auth:l,inbox:M}};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@trycourier/courier-js"),r=require("@trycourier/courier-ui-inbox"),t=require("react"),s=require("react/jsx-runtime"),n=require("react-dom"),a=require("react-dom/client");function o(e){const r=document.createElement("div"),t=a.createRoot(r);n.flushSync((()=>{t.render(e)}));const s=r.firstElementChild;if(!(s instanceof HTMLElement))throw new Error("renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)");return s}const i=({children:e})=>{const[r,n]=t.useState(!1);return t.useEffect((()=>{n(!0)}),[]),"undefined"==typeof window?null:r?s.jsx(s.Fragment,{children:e}):null},u=t.forwardRef(((e,r)=>{const n=t.useRef(null);return t.useEffect((()=>{"function"==typeof r?r(n.current):r&&(r.current=n.current)}),[r]),t.useEffect((()=>{const r=n.current;r&&r.onMessageClick(e.onMessageClick)}),[e.onMessageClick,n]),t.useEffect((()=>{const r=n.current;r&&r.onMessageActionClick(e.onMessageActionClick)}),[e.onMessageActionClick,n]),t.useEffect((()=>{const r=n.current;r&&r.onMessageLongPress(e.onMessageLongPress)}),[e.onMessageLongPress,n]),t.useEffect((()=>{const r=n.current;r&&e.renderHeader&&queueMicrotask((()=>{r.setHeader((r=>o(e.renderHeader(r))))}))}),[e.renderHeader,n]),t.useEffect((()=>{const r=n.current;r&&e.renderListItem&&queueMicrotask((()=>{r.setListItem((r=>o(e.renderListItem(r))))}))}),[e.renderListItem,n]),t.useEffect((()=>{const r=n.current;r&&e.renderEmptyState&&queueMicrotask((()=>{r.setEmptyState((r=>o(e.renderEmptyState(r))))}))}),[e.renderEmptyState,n]),t.useEffect((()=>{const r=n.current;r&&e.renderLoadingState&&queueMicrotask((()=>{r.setLoadingState((r=>o(e.renderLoadingState(r))))}))}),[e.renderLoadingState,n]),t.useEffect((()=>{const r=n.current;r&&e.renderErrorState&&queueMicrotask((()=>{r.setErrorState((r=>o(e.renderErrorState(r))))}))}),[e.renderErrorState,n]),t.useEffect((()=>{const r=n.current;r&&e.renderPaginationItem&&queueMicrotask((()=>{r.setPaginationItem((r=>o(e.renderPaginationItem(r))))}))}),[e.renderPaginationItem,n]),t.useEffect((()=>{const r=n.current;r&&queueMicrotask((()=>{r.setFeedType(e.feedType||"inbox")}))}),[e.feedType,n]),s.jsx(i,{children:s.jsx("courier-inbox",{ref:n,height:e.height,"light-theme":e.lightTheme?JSON.stringify(e.lightTheme):void 0,"dark-theme":e.darkTheme?JSON.stringify(e.darkTheme):void 0,mode:e.mode})})}));u.displayName="CourierInbox";const c=t.forwardRef(((e,r)=>{function n(e){r&&("function"==typeof r?r(e):r.current=e),n._el=e}function a(){return n._el??null}const u=t.useRef(void 0);return t.useEffect((()=>{const r=a();r&&e.feedType!==u.current&&(u.current=e.feedType,queueMicrotask((()=>{var t;null==(t=r.setFeedType)||t.call(r,e.feedType??"inbox")})))}),[e.feedType]),t.useEffect((()=>{const r=a();r&&r.onMessageClick(e.onMessageClick)}),[e.onMessageClick]),t.useEffect((()=>{const r=a();r&&r.onMessageActionClick(e.onMessageActionClick)}),[e.onMessageActionClick]),t.useEffect((()=>{const r=a();r&&r.onMessageLongPress(e.onMessageLongPress)}),[e.onMessageLongPress]),t.useEffect((()=>{const r=a();r&&e.renderHeader&&queueMicrotask((()=>{r.setHeader((r=>o(e.renderHeader(r))))}))}),[e.renderHeader]),t.useEffect((()=>{const r=a();r&&e.renderListItem&&queueMicrotask((()=>{r.setListItem((r=>o(e.renderListItem(r))))}))}),[e.renderListItem]),t.useEffect((()=>{const r=a();r&&e.renderEmptyState&&queueMicrotask((()=>{r.setEmptyState((r=>o(e.renderEmptyState(r))))}))}),[e.renderEmptyState]),t.useEffect((()=>{const r=a();r&&e.renderLoadingState&&queueMicrotask((()=>{r.setLoadingState((r=>o(e.renderLoadingState(r))))}))}),[e.renderLoadingState]),t.useEffect((()=>{const r=a();r&&e.renderErrorState&&queueMicrotask((()=>{r.setErrorState((r=>o(e.renderErrorState(r))))}))}),[e.renderErrorState]),t.useEffect((()=>{const r=a();r&&e.renderPaginationItem&&queueMicrotask((()=>{r.setPaginationItem((r=>o(e.renderPaginationItem(r))))}))}),[e.renderPaginationItem]),t.useEffect((()=>{const r=a();r&&e.renderMenuButton&&queueMicrotask((()=>{r.setMenuButton((r=>o(e.renderMenuButton(r))))}))}),[e.renderMenuButton]),s.jsx(i,{children:s.jsx("courier-inbox-popup-menu",{ref:n,"popup-alignment":e.popupAlignment,"popup-width":e.popupWidth,"popup-height":e.popupHeight,left:e.left,top:e.top,right:e.right,bottom:e.bottom,"light-theme":e.lightTheme?JSON.stringify(e.lightTheme):void 0,"dark-theme":e.darkTheme?JSON.stringify(e.darkTheme):void 0,mode:e.mode})})}));c.displayName="CourierInboxPopupMenu",Object.defineProperty(exports,"archiveMessage",{enumerable:!0,get:()=>r.archiveMessage}),Object.defineProperty(exports,"clickMessage",{enumerable:!0,get:()=>r.clickMessage}),Object.defineProperty(exports,"defaultDarkTheme",{enumerable:!0,get:()=>r.defaultDarkTheme}),Object.defineProperty(exports,"defaultLightTheme",{enumerable:!0,get:()=>r.defaultLightTheme}),Object.defineProperty(exports,"markAsRead",{enumerable:!0,get:()=>r.markAsRead}),Object.defineProperty(exports,"markAsUnread",{enumerable:!0,get:()=>r.markAsUnread}),Object.defineProperty(exports,"mergeTheme",{enumerable:!0,get:()=>r.mergeTheme}),Object.defineProperty(exports,"openMessage",{enumerable:!0,get:()=>r.openMessage}),exports.CourierInbox=u,exports.CourierInboxPopupMenu=c,exports.useCourier=()=>{const s=r=>e.Courier.shared.signIn(r),n=()=>e.Courier.shared.signOut(),a=e=>r.CourierInboxDatastore.shared.load(e),o=e=>r.CourierInboxDatastore.shared.fetchNextPageOfMessages(e),i=r=>e.Courier.shared.paginationLimit=r,u=e=>r.CourierInboxDatastore.shared.readMessage({message:e}),c=e=>r.CourierInboxDatastore.shared.unreadMessage({message:e}),d=e=>r.CourierInboxDatastore.shared.clickMessage({message:e}),g=e=>r.CourierInboxDatastore.shared.archiveMessage({message:e}),f=e=>r.CourierInboxDatastore.shared.openMessage({message:e}),m=e=>r.CourierInboxDatastore.shared.unarchiveMessage({message:e}),l=()=>r.CourierInboxDatastore.shared.readAllMessages(),[h,p]=t.useState({userId:void 0,signIn:s,signOut:n}),[M,E]=t.useState({load:a,fetchNextPageOfMessages:o,setPaginationLimit:i,readMessage:u,unreadMessage:c,clickMessage:d,archiveMessage:g,openMessage:f,unarchiveMessage:m,readAllMessages:l});t.useEffect((()=>{const t=e.Courier.shared.addAuthenticationListener((()=>x())),s=new r.CourierInboxDataStoreListener({onError:e=>b(e),onDataSetChange:()=>b(),onPageAdded:()=>b(),onMessageAdd:()=>b(),onMessageRemove:()=>b(),onMessageUpdate:()=>b(),onUnreadCountChange:()=>b()});return r.CourierInboxDatastore.shared.addDataStoreListener(s),x(),b(),()=>{t.remove(),s.remove()}}),[]);const x=()=>{var r;const t=null==(r=e.Courier.shared.client)?void 0:r.options;p({userId:null==t?void 0:t.userId,signIn:s,signOut:n})},b=e=>{const t=r.CourierInboxDatastore.shared;E({load:a,fetchNextPageOfMessages:o,setPaginationLimit:i,readMessage:u,unreadMessage:c,clickMessage:d,archiveMessage:g,openMessage:f,unarchiveMessage:m,readAllMessages:l,inbox:t.inboxDataSet,archive:t.archiveDataSet,unreadCount:t.unreadCount,error:e})};return{shared:e.Courier.shared,auth:h,inbox:M}};
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/utils/utils.tsx","../src/components/courier-client-component.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx","../src/hooks/use-courier.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { createRoot } from \"react-dom/client\";\n\n/**\n * Converts a React node to an HTMLElement.\n * This function uses flushSync to ensure the DOM is updated synchronously.\n * @param node - The React node to convert.\n * @returns The converted HTMLElement.\n */\nexport function reactNodeToHTMLElement(node: ReactNode): HTMLElement {\n  const container = document.createElement('div');\n\n  // Use React 18 root\n  const root = createRoot(container);\n  flushSync(() => {\n    root.render(node);\n  });\n\n  // Wait until React mounts the content synchronously\n  const element = container.firstElementChild;\n  if (!(element instanceof HTMLElement)) {\n    throw new Error(\n      'renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)'\n    );\n  }\n\n  return element;\n}","import React, { useState, useEffect } from 'react';\n\ninterface CourierClientProps {\n  children: React.ReactNode;\n}\n\n// This class prevents issues with server side rendering react components\n// It will force the component to only render client side\n// A future update could support server side rendering if there is enough demand\nexport const CourierClientComponent: React.FC<CourierClientProps> = ({ children }) => {\n  const [isMounted, setIsMounted] = useState(false);\n\n  useEffect(() => {\n    setIsMounted(true);\n  }, []);\n\n  // During SSR, render nothing or fallback\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  if (!isMounted) {\n    return null;\n  }\n\n  return <>{children}</>;\n};","import { useRef, useEffect, forwardRef, ReactNode } from \"react\";\nimport { CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxTheme, CourierInbox as CourierInboxElement, CourierInboxHeaderFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxFeedType } from \"@trycourier/courier-ui-inbox\";\nimport { reactNodeToHTMLElement } from \"../utils/utils\";\nimport { CourierComponentThemeMode } from \"@trycourier/courier-ui-core\";\nimport { CourierClientComponent } from \"./courier-client-component\";\n\nexport interface CourierInboxProps {\n  height?: string;\n  lightTheme?: CourierInboxTheme;\n  darkTheme?: CourierInboxTheme;\n  mode?: CourierComponentThemeMode;\n  feedType?: CourierInboxFeedType;\n  onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n  onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n  onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n  renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n  renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n  renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n  renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n  renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n  renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInbox = forwardRef<CourierInboxElement, CourierInboxProps>((props, ref) => {\n  const inboxRef = useRef<CourierInboxElement | null>(null);\n\n  // Expose the internal ref to the parent if a ref was passed in\n  useEffect(() => {\n    if (typeof ref === \"function\") {\n      ref(inboxRef.current);\n    } else if (ref) {\n      (ref as React.RefObject<CourierInboxElement | null>).current = inboxRef.current;\n    }\n  }, [ref]);\n\n  // Handle message click\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    inbox.onMessageClick(props.onMessageClick);\n  }, [props.onMessageClick, inboxRef]);\n\n  // Handle message action click\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    inbox.onMessageActionClick(props.onMessageActionClick);\n  }, [props.onMessageActionClick, inboxRef]);\n\n  // Handle message long press\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    inbox.onMessageLongPress(props.onMessageLongPress);\n  }, [props.onMessageLongPress, inboxRef]);\n\n  // Render header\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderHeader) return;\n    queueMicrotask(() => {\n      inbox.setHeader((headerProps?: CourierInboxHeaderFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderHeader!(headerProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderHeader, inboxRef]);\n\n  // Render list item\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderListItem) return;\n    queueMicrotask(() => {\n      inbox.setListItem((itemProps?: CourierInboxListItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderListItem!(itemProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderListItem, inboxRef]);\n\n  // Render empty state\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderEmptyState) return;\n    queueMicrotask(() => {\n      inbox.setEmptyState((emptyStateProps?: CourierInboxStateEmptyFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderEmptyState!(emptyStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderEmptyState, inboxRef]);\n\n  // Render loading state\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderLoadingState) return;\n    queueMicrotask(() => {\n      inbox.setLoadingState((loadingStateProps?: CourierInboxStateLoadingFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderLoadingState!(loadingStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderLoadingState, inboxRef]);\n\n  // Render error state\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderErrorState) return;\n    queueMicrotask(() => {\n      inbox.setErrorState((errorStateProps?: CourierInboxStateErrorFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderErrorState!(errorStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderErrorState, inboxRef]);\n\n  // Render pagination item\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderPaginationItem) return;\n    queueMicrotask(() => {\n      inbox.setPaginationItem((paginationProps?: CourierInboxPaginationItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderPaginationItem!(paginationProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderPaginationItem, inboxRef]);\n\n  // Set feed type\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    queueMicrotask(() => {\n      inbox.setFeedType(props.feedType || 'inbox');\n    });\n  }, [props.feedType, inboxRef]);\n\n  return (\n    <CourierClientComponent>\n      {/* @ts-ignore */}\n      <courier-inbox\n        ref={inboxRef}\n        height={props.height}\n        light-theme={props.lightTheme ? JSON.stringify(props.lightTheme) : undefined}\n        dark-theme={props.darkTheme ? JSON.stringify(props.darkTheme) : undefined}\n        mode={props.mode}\n      />\n    </CourierClientComponent>\n  );\n});\n\nCourierInbox.displayName = 'CourierInbox';","import { useRef, useEffect, forwardRef, ReactNode } from \"react\";\nimport { CourierInboxFeedType, CourierInboxHeaderFactoryProps, CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxMenuButtonFactoryProps, CourierInboxPopupMenu as CourierInboxPopupMenuElement, CourierInboxPaginationItemFactoryProps, CourierInboxPopupAlignment, CourierInboxStateEmptyFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxTheme } from \"@trycourier/courier-ui-inbox\";\nimport { reactNodeToHTMLElement } from \"../utils/utils\";\nimport { CourierComponentThemeMode } from \"@trycourier/courier-ui-core\";\nimport { CourierClientComponent } from \"./courier-client-component\";\n\nexport interface CourierInboxPopupMenuProps {\n  popupAlignment?: CourierInboxPopupAlignment;\n  popupWidth?: string;\n  popupHeight?: string;\n  left?: string;\n  top?: string;\n  right?: string;\n  bottom?: string;\n  lightTheme?: CourierInboxTheme;\n  darkTheme?: CourierInboxTheme;\n  mode?: CourierComponentThemeMode;\n  feedType?: CourierInboxFeedType;\n  onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n  onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n  onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n  renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n  renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n  renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n  renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n  renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n  renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n  renderMenuButton?: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInboxPopupMenu = forwardRef<CourierInboxPopupMenuElement, CourierInboxPopupMenuProps>((props, ref) => {\n  const menuRef = useRef<CourierInboxPopupMenuElement>(null);\n\n  // Expose the internal ref to the parent if a ref was passed in\n  useEffect(() => {\n    if (typeof ref === \"function\") {\n      ref(menuRef.current);\n    } else if (ref) {\n      (ref as React.RefObject<CourierInboxPopupMenuElement | null>).current = menuRef.current;\n    }\n  }, [ref]);\n\n  // Handle message click\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu) return;\n    menu.onMessageClick(props.onMessageClick);\n  }, [props.onMessageClick, menuRef]);\n\n  // Handle message action click\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu) return;\n    menu.onMessageActionClick(props.onMessageActionClick);\n  }, [props.onMessageActionClick, menuRef]);\n\n  // Handle message long press\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu) return;\n    menu.onMessageLongPress(props.onMessageLongPress);\n  }, [props.onMessageLongPress, menuRef]);\n\n  // Render header\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderHeader) return;\n    queueMicrotask(() => {\n      menu.setHeader((headerProps?: CourierInboxHeaderFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderHeader!(headerProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderHeader, menuRef]);\n\n  // Render list item\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderListItem) return;\n    queueMicrotask(() => {\n      menu.setListItem((itemProps?: CourierInboxListItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderListItem!(itemProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderListItem, menuRef]);\n\n  // Render empty state\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderEmptyState) return;\n    queueMicrotask(() => {\n      menu.setEmptyState((emptyStateProps?: CourierInboxStateEmptyFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderEmptyState!(emptyStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderEmptyState, menuRef]);\n\n  // Render loading state\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderLoadingState) return;\n    queueMicrotask(() => {\n      menu.setLoadingState((loadingStateProps?: CourierInboxStateLoadingFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderLoadingState!(loadingStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderLoadingState, menuRef]);\n\n  // Render error state\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderErrorState) return;\n    queueMicrotask(() => {\n      menu.setErrorState((errorStateProps?: CourierInboxStateErrorFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderErrorState!(errorStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderErrorState, menuRef]);\n\n  // Render pagination item\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderPaginationItem) return;\n    queueMicrotask(() => {\n      menu.setPaginationItem((paginationProps?: CourierInboxPaginationItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderPaginationItem!(paginationProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderPaginationItem, menuRef]);\n\n  // Render menu button\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderMenuButton) return;\n    queueMicrotask(() => {\n      menu.setMenuButton((buttonProps?: CourierInboxMenuButtonFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderMenuButton!(buttonProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderMenuButton, menuRef]);\n\n  // Set feed type\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu) return;\n    queueMicrotask(() => {\n      menu.setFeedType(props.feedType || 'inbox');\n    });\n  }, [props.feedType, menuRef]);\n\n  return (\n    <CourierClientComponent>\n      {/* @ts-ignore */}\n      <courier-inbox-popup-menu\n        ref={menuRef}\n        popup-alignment={props.popupAlignment}\n        popup-width={props.popupWidth}\n        popup-height={props.popupHeight}\n        left={props.left}\n        top={props.top}\n        right={props.right}\n        bottom={props.bottom}\n        light-theme={props.lightTheme ? JSON.stringify(props.lightTheme) : undefined}\n        dark-theme={props.darkTheme ? JSON.stringify(props.darkTheme) : undefined}\n        mode={props.mode}\n      />\n    </CourierClientComponent>\n  );\n});\n\nCourierInboxPopupMenu.displayName = 'CourierInboxPopupMenu';","import React from 'react';\nimport { Courier, CourierProps, InboxMessage } from '@trycourier/courier-js';\nimport { CourierInboxDatastore, CourierInboxDataStoreListener, CourierInboxFeedType, InboxDataSet } from '@trycourier/courier-ui-inbox';\n\ntype AuthenticationHooks = {\n  userId?: string,\n  signIn: (props: CourierProps) => void,\n  signOut: () => void\n}\n\ntype InboxHooks = {\n  load: (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => Promise<void>,\n  fetchNextPageOfMessages: (props: { feedType: CourierInboxFeedType }) => Promise<InboxDataSet | null>,\n  setPaginationLimit: (limit: number) => void,\n  readMessage: (message: InboxMessage) => Promise<void>,\n  unreadMessage: (message: InboxMessage) => Promise<void>,\n  clickMessage: (message: InboxMessage) => Promise<void>,\n  archiveMessage: (message: InboxMessage) => Promise<void>,\n  openMessage: (message: InboxMessage) => Promise<void>,\n  unarchiveMessage: (message: InboxMessage) => Promise<void>,\n  readAllMessages: () => Promise<void>,\n  inbox?: InboxDataSet,\n  archive?: InboxDataSet,\n  unreadCount?: number,\n  error?: Error\n}\n\n// A hook for managing the shared state of Courier\n// If you want to use more functions, checkout the Courier JS SDK which\n// can be used directly by importing from '@trycourier/courier-js'\nexport const useCourier = () => {\n\n  // Authentication Functions\n  const signIn = (props: CourierProps) => Courier.shared.signIn(props);\n  const signOut = () => Courier.shared.signOut();\n\n  // Inbox Functions\n  const loadInbox = (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => CourierInboxDatastore.shared.load(props);\n  const fetchNextPageOfMessages = (props: { feedType: CourierInboxFeedType }) => CourierInboxDatastore.shared.fetchNextPageOfMessages(props);\n  const setPaginationLimit = (limit: number) => Courier.shared.paginationLimit = limit;\n  const readMessage = (message: InboxMessage) => CourierInboxDatastore.shared.readMessage({ message });\n  const unreadMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unreadMessage({ message });\n  const clickMessage = (message: InboxMessage) => CourierInboxDatastore.shared.clickMessage({ message });\n  const archiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.archiveMessage({ message });\n  const openMessage = (message: InboxMessage) => CourierInboxDatastore.shared.openMessage({ message });\n  const unarchiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unarchiveMessage({ message });\n  const readAllMessages = () => CourierInboxDatastore.shared.readAllMessages();\n\n  // State\n  const [auth, setAuth] = React.useState<AuthenticationHooks>({\n    userId: undefined,\n    signIn,\n    signOut\n  });\n\n  const [inbox, setInbox] = React.useState<InboxHooks>({\n    load: loadInbox,\n    fetchNextPageOfMessages,\n    setPaginationLimit,\n    readMessage,\n    unreadMessage,\n    clickMessage,\n    archiveMessage,\n    openMessage,\n    unarchiveMessage,\n    readAllMessages\n  });\n\n  React.useEffect(() => {\n\n    // Add a listener to the Courier instance\n    const listener = Courier.shared.addAuthenticationListener(() => refreshAuth());\n\n    // Add inbox data store listener\n    const inboxListener = new CourierInboxDataStoreListener({\n      onError: (error: Error) => refreshInbox(error),\n      onDataSetChange: () => refreshInbox(),\n      onPageAdded: () => refreshInbox(),\n      onMessageAdd: () => refreshInbox(),\n      onMessageRemove: () => refreshInbox(),\n      onMessageUpdate: () => refreshInbox(),\n      onUnreadCountChange: () => refreshInbox()\n    });\n    CourierInboxDatastore.shared.addDataStoreListener(inboxListener);\n\n    // Set initial values\n    refreshAuth();\n    refreshInbox();\n\n    // Remove listeners when the component unmounts\n    return () => {\n      listener.remove();\n      inboxListener.remove();\n    };\n  }, []);\n\n  const refreshAuth = () => {\n    const options = Courier.shared.client?.options;\n    setAuth({\n      userId: options?.userId,\n      signIn,\n      signOut\n    });\n  }\n\n  const refreshInbox = (error?: Error) => {\n    const datastore = CourierInboxDatastore.shared;\n    setInbox({\n      load: loadInbox,\n      fetchNextPageOfMessages,\n      setPaginationLimit,\n      readMessage,\n      unreadMessage,\n      clickMessage,\n      archiveMessage,\n      openMessage,\n      unarchiveMessage,\n      readAllMessages,\n      inbox: datastore.inboxDataSet,\n      archive: datastore.archiveDataSet,\n      unreadCount: datastore.unreadCount,\n      error: error,\n    });\n  }\n\n  return {\n    shared: Courier.shared,\n    auth: auth,\n    inbox: inbox,\n  };\n};\n"],"names":["reactNodeToHTMLElement","node","container","document","createElement","root","createRoot","flushSync","render","element","firstElementChild","HTMLElement","Error","CourierClientComponent","children","isMounted","setIsMounted","useState","useEffect","window","CourierInbox","forwardRef","props","ref","inboxRef","useRef","current","inbox","onMessageClick","onMessageActionClick","onMessageLongPress","renderHeader","queueMicrotask","setHeader","headerProps","renderListItem","setListItem","itemProps","renderEmptyState","setEmptyState","emptyStateProps","renderLoadingState","setLoadingState","loadingStateProps","renderErrorState","setErrorState","errorStateProps","renderPaginationItem","setPaginationItem","paginationProps","setFeedType","feedType","jsx","height","lightTheme","JSON","stringify","darkTheme","mode","displayName","CourierInboxPopupMenu","menuRef","menu","renderMenuButton","setMenuButton","buttonProps","popupAlignment","popupWidth","popupHeight","left","top","right","bottom","signIn","Courier","shared","signOut","loadInbox","CourierInboxDatastore","load","fetchNextPageOfMessages","setPaginationLimit","limit","paginationLimit","readMessage","message","unreadMessage","clickMessage","archiveMessage","openMessage","unarchiveMessage","readAllMessages","auth","setAuth","React","userId","setInbox","listener","addAuthenticationListener","refreshAuth","inboxListener","CourierInboxDataStoreListener","onError","error","refreshInbox","onDataSetChange","onPageAdded","onMessageAdd","onMessageRemove","onMessageUpdate","onUnreadCountChange","addDataStoreListener","remove","options","client","datastore","inboxDataSet","archive","archiveDataSet","unreadCount"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../src/utils/utils.tsx","../src/components/courier-client-component.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx","../src/hooks/use-courier.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { createRoot } from \"react-dom/client\";\n\n/**\n * Converts a React node to an HTMLElement.\n * This function uses flushSync to ensure the DOM is updated synchronously.\n * @param node - The React node to convert.\n * @returns The converted HTMLElement.\n */\nexport function reactNodeToHTMLElement(node: ReactNode): HTMLElement {\n  const container = document.createElement('div');\n\n  // Use React 18 root\n  const root = createRoot(container);\n  flushSync(() => {\n    root.render(node);\n  });\n\n  // Wait until React mounts the content synchronously\n  const element = container.firstElementChild;\n  if (!(element instanceof HTMLElement)) {\n    throw new Error(\n      'renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)'\n    );\n  }\n\n  return element;\n}","import React, { useState, useEffect } from 'react';\n\ninterface CourierClientProps {\n  children: React.ReactNode;\n}\n\n// This class prevents issues with server side rendering react components\n// It will force the component to only render client side\n// A future update could support server side rendering if there is enough demand\nexport const CourierClientComponent: React.FC<CourierClientProps> = ({ children }) => {\n  const [isMounted, setIsMounted] = useState(false);\n\n  useEffect(() => {\n    setIsMounted(true);\n  }, []);\n\n  // During SSR, render nothing or fallback\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  if (!isMounted) {\n    return null;\n  }\n\n  return <>{children}</>;\n};","import { useRef, useEffect, forwardRef, ReactNode } from \"react\";\nimport { CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxTheme, CourierInbox as CourierInboxElement, CourierInboxHeaderFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxFeedType } from \"@trycourier/courier-ui-inbox\";\nimport { reactNodeToHTMLElement } from \"../utils/utils\";\nimport { CourierComponentThemeMode } from \"@trycourier/courier-ui-core\";\nimport { CourierClientComponent } from \"./courier-client-component\";\n\nexport interface CourierInboxProps {\n  /** Height of the inbox container. Defaults to \"auto\" and will resize itself based on it's children. */\n  height?: string;\n\n  /** Theme object for light mode */\n  lightTheme?: CourierInboxTheme;\n\n  /** Theme object for dark mode */\n  darkTheme?: CourierInboxTheme;\n\n  /** Theme mode: \"light\", \"dark\", or \"system\". Defaults to \"system\" */\n  mode?: CourierComponentThemeMode;\n\n  /** Type of feed to display in the inbox (\"inbox\" or \"archive\"). Defaults to \"inbox\" */\n  feedType?: CourierInboxFeedType;\n\n  /** Callback fired when a message is clicked. */\n  onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n\n  /** Callback fired when a message action (e.g., button) is clicked. */\n  onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n\n  /** Callback fired when a message is long-pressed (for mobile/gesture support). Only works on devices that support touch. */\n  onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n\n  /** Allows you to pass a custom component as the header. */\n  renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the list item. */\n  renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the empty state. */\n  renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the loading state. */\n  renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the error state. */\n  renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the pagination list item. */\n  renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInbox = forwardRef<CourierInboxElement, CourierInboxProps>((props, ref) => {\n  const inboxRef = useRef<CourierInboxElement | null>(null);\n\n  // Expose the internal ref to the parent if a ref was passed in\n  useEffect(() => {\n    if (typeof ref === \"function\") {\n      ref(inboxRef.current);\n    } else if (ref) {\n      (ref as React.RefObject<CourierInboxElement | null>).current = inboxRef.current;\n    }\n  }, [ref]);\n\n  // Handle message click\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    inbox.onMessageClick(props.onMessageClick);\n  }, [props.onMessageClick, inboxRef]);\n\n  // Handle message action click\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    inbox.onMessageActionClick(props.onMessageActionClick);\n  }, [props.onMessageActionClick, inboxRef]);\n\n  // Handle message long press\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    inbox.onMessageLongPress(props.onMessageLongPress);\n  }, [props.onMessageLongPress, inboxRef]);\n\n  // Render header\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderHeader) return;\n    queueMicrotask(() => {\n      inbox.setHeader((headerProps?: CourierInboxHeaderFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderHeader!(headerProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderHeader, inboxRef]);\n\n  // Render list item\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderListItem) return;\n    queueMicrotask(() => {\n      inbox.setListItem((itemProps?: CourierInboxListItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderListItem!(itemProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderListItem, inboxRef]);\n\n  // Render empty state\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderEmptyState) return;\n    queueMicrotask(() => {\n      inbox.setEmptyState((emptyStateProps?: CourierInboxStateEmptyFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderEmptyState!(emptyStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderEmptyState, inboxRef]);\n\n  // Render loading state\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderLoadingState) return;\n    queueMicrotask(() => {\n      inbox.setLoadingState((loadingStateProps?: CourierInboxStateLoadingFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderLoadingState!(loadingStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderLoadingState, inboxRef]);\n\n  // Render error state\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderErrorState) return;\n    queueMicrotask(() => {\n      inbox.setErrorState((errorStateProps?: CourierInboxStateErrorFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderErrorState!(errorStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderErrorState, inboxRef]);\n\n  // Render pagination item\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderPaginationItem) return;\n    queueMicrotask(() => {\n      inbox.setPaginationItem((paginationProps?: CourierInboxPaginationItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderPaginationItem!(paginationProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderPaginationItem, inboxRef]);\n\n  // Set feed type\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    queueMicrotask(() => {\n      inbox.setFeedType(props.feedType || 'inbox');\n    });\n  }, [props.feedType, inboxRef]);\n\n  return (\n    <CourierClientComponent>\n      {/* @ts-ignore */}\n      <courier-inbox\n        ref={inboxRef}\n        height={props.height}\n        light-theme={props.lightTheme ? JSON.stringify(props.lightTheme) : undefined}\n        dark-theme={props.darkTheme ? JSON.stringify(props.darkTheme) : undefined}\n        mode={props.mode}\n      />\n    </CourierClientComponent>\n  );\n});\n\nCourierInbox.displayName = 'CourierInbox';","import { useEffect, useRef, forwardRef, ReactNode } from 'react';\nimport {\n  CourierInboxFeedType,\n  CourierInboxHeaderFactoryProps,\n  CourierInboxListItemActionFactoryProps,\n  CourierInboxListItemFactoryProps,\n  CourierInboxMenuButtonFactoryProps,\n  CourierInboxPopupMenu as CourierInboxPopupMenuElement,\n  CourierInboxPaginationItemFactoryProps,\n  CourierInboxPopupAlignment,\n  CourierInboxStateEmptyFactoryProps,\n  CourierInboxStateErrorFactoryProps,\n  CourierInboxStateLoadingFactoryProps,\n  CourierInboxTheme,\n} from '@trycourier/courier-ui-inbox';\nimport { reactNodeToHTMLElement } from '../utils/utils';\nimport { CourierComponentThemeMode } from '@trycourier/courier-ui-core';\nimport { CourierClientComponent } from './courier-client-component';\n\nexport interface CourierInboxPopupMenuProps {\n  /** Alignment of the popup menu: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center', 'center-right', 'center-left', 'center-center'. */\n  popupAlignment?: CourierInboxPopupAlignment;\n\n  /** Width of the popup menu container. */\n  popupWidth?: string;\n\n  /** Height of the popup menu container. */\n  popupHeight?: string;\n\n  /** CSS left position for the popup menu. */\n  left?: string;\n\n  /** CSS top position for the popup menu. */\n  top?: string;\n\n  /** CSS right position for the popup menu. */\n  right?: string;\n\n  /** CSS bottom position for the popup menu. */\n  bottom?: string;\n\n  /** Theme object for light mode. */\n  lightTheme?: CourierInboxTheme;\n\n  /** Theme object for dark mode. */\n  darkTheme?: CourierInboxTheme;\n\n  /** Theme mode: 'light', 'dark', or 'system'. */\n  mode?: CourierComponentThemeMode;\n\n  /** Type of feed to display in the popup menu ('inbox' or 'archive'). */\n  feedType?: CourierInboxFeedType;\n\n  /** Callback fired when a message is clicked. */\n  onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n\n  /** Callback fired when a message action (e.g., button) is clicked. */\n  onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n\n  /** Callback fired when a message is long-pressed (for mobile/gesture support). */\n  onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n\n  /** Allows you to pass a custom component as the header. */\n  renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the list item. */\n  renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the empty state. */\n  renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the loading state. */\n  renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the error state. */\n  renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the pagination list item. */\n  renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the menu button. */\n  renderMenuButton?: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInboxPopupMenu = forwardRef<CourierInboxPopupMenuElement, CourierInboxPopupMenuProps>(\n  (props, ref) => {\n    // Instead of using useRef and assigning to the custom element,\n    // we use a callback ref to ensure the ref is set as soon as the element is mounted.\n    function handleRef(el: CourierInboxPopupMenuElement | null) {\n      if (ref) {\n        if (typeof ref === 'function') {\n          ref(el);\n        } else {\n          (ref as React.RefObject<CourierInboxPopupMenuElement | null>).current = el;\n        }\n      }\n      // Store the element for use in effects\n      (handleRef as any)._el = el;\n    }\n\n    // Helper to get the current element\n    function getEl(): CourierInboxPopupMenuElement | null {\n      return (handleRef as any)._el ?? null;\n    }\n\n    // Use a ref to track the last set feedType to prevent duplicate state changes\n    const lastFeedTypeRef = useRef<CourierInboxFeedType | undefined>(undefined);\n\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu) return;\n      // Only set feedType if it has changed from the last set value\n      if (props.feedType !== lastFeedTypeRef.current) {\n        lastFeedTypeRef.current = props.feedType;\n        queueMicrotask(() => {\n          menu.setFeedType?.(props.feedType ?? 'inbox');\n        });\n      }\n    }, [props.feedType]);\n\n    // Handle message click\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu) return;\n      menu.onMessageClick(props.onMessageClick);\n    }, [props.onMessageClick]);\n\n    // Handle message action click\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu) return;\n      menu.onMessageActionClick(props.onMessageActionClick);\n    }, [props.onMessageActionClick]);\n\n    // Handle message long press\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu) return;\n      menu.onMessageLongPress(props.onMessageLongPress);\n    }, [props.onMessageLongPress]);\n\n    // Render header\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderHeader) return;\n      queueMicrotask(() => {\n        menu.setHeader((headerProps?: CourierInboxHeaderFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderHeader!(headerProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderHeader]);\n\n    // Render list item\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderListItem) return;\n      queueMicrotask(() => {\n        menu.setListItem((itemProps?: CourierInboxListItemFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderListItem!(itemProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderListItem]);\n\n    // Render empty state\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderEmptyState) return;\n      queueMicrotask(() => {\n        menu.setEmptyState((emptyStateProps?: CourierInboxStateEmptyFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderEmptyState!(emptyStateProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderEmptyState]);\n\n    // Render loading state\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderLoadingState) return;\n      queueMicrotask(() => {\n        menu.setLoadingState((loadingStateProps?: CourierInboxStateLoadingFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderLoadingState!(loadingStateProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderLoadingState]);\n\n    // Render error state\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderErrorState) return;\n      queueMicrotask(() => {\n        menu.setErrorState((errorStateProps?: CourierInboxStateErrorFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderErrorState!(errorStateProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderErrorState]);\n\n    // Render pagination item\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderPaginationItem) return;\n      queueMicrotask(() => {\n        menu.setPaginationItem((paginationProps?: CourierInboxPaginationItemFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderPaginationItem!(paginationProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderPaginationItem]);\n\n    // Render menu button\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderMenuButton) return;\n      queueMicrotask(() => {\n        menu.setMenuButton((buttonProps?: CourierInboxMenuButtonFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderMenuButton!(buttonProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderMenuButton]);\n\n    return (\n      <CourierClientComponent>\n        {/* @ts-ignore */}\n        <courier-inbox-popup-menu\n          ref={handleRef}\n          popup-alignment={props.popupAlignment}\n          popup-width={props.popupWidth}\n          popup-height={props.popupHeight}\n          left={props.left}\n          top={props.top}\n          right={props.right}\n          bottom={props.bottom}\n          light-theme={props.lightTheme ? JSON.stringify(props.lightTheme) : undefined}\n          dark-theme={props.darkTheme ? JSON.stringify(props.darkTheme) : undefined}\n          mode={props.mode}\n        />\n      </CourierClientComponent>\n    );\n  }\n);\n\nCourierInboxPopupMenu.displayName = 'CourierInboxPopupMenu';","import React from 'react';\nimport { Courier, CourierProps, InboxMessage } from '@trycourier/courier-js';\nimport { CourierInboxDatastore, CourierInboxDataStoreListener, CourierInboxFeedType, InboxDataSet } from '@trycourier/courier-ui-inbox';\n\ntype AuthenticationHooks = {\n  userId?: string,\n  signIn: (props: CourierProps) => void,\n  signOut: () => void\n}\n\ntype InboxHooks = {\n  load: (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => Promise<void>,\n  fetchNextPageOfMessages: (props: { feedType: CourierInboxFeedType }) => Promise<InboxDataSet | null>,\n  setPaginationLimit: (limit: number) => void,\n  readMessage: (message: InboxMessage) => Promise<void>,\n  unreadMessage: (message: InboxMessage) => Promise<void>,\n  clickMessage: (message: InboxMessage) => Promise<void>,\n  archiveMessage: (message: InboxMessage) => Promise<void>,\n  openMessage: (message: InboxMessage) => Promise<void>,\n  unarchiveMessage: (message: InboxMessage) => Promise<void>,\n  readAllMessages: () => Promise<void>,\n  inbox?: InboxDataSet,\n  archive?: InboxDataSet,\n  unreadCount?: number,\n  error?: Error\n}\n\n// A hook for managing the shared state of Courier\n// If you want to use more functions, checkout the Courier JS SDK which\n// can be used directly by importing from '@trycourier/courier-js'\nexport const useCourier = () => {\n\n  // Authentication Functions\n  const signIn = (props: CourierProps) => Courier.shared.signIn(props);\n  const signOut = () => Courier.shared.signOut();\n\n  // Inbox Functions\n  const loadInbox = (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => CourierInboxDatastore.shared.load(props);\n  const fetchNextPageOfMessages = (props: { feedType: CourierInboxFeedType }) => CourierInboxDatastore.shared.fetchNextPageOfMessages(props);\n  const setPaginationLimit = (limit: number) => Courier.shared.paginationLimit = limit;\n  const readMessage = (message: InboxMessage) => CourierInboxDatastore.shared.readMessage({ message });\n  const unreadMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unreadMessage({ message });\n  const clickMessage = (message: InboxMessage) => CourierInboxDatastore.shared.clickMessage({ message });\n  const archiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.archiveMessage({ message });\n  const openMessage = (message: InboxMessage) => CourierInboxDatastore.shared.openMessage({ message });\n  const unarchiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unarchiveMessage({ message });\n  const readAllMessages = () => CourierInboxDatastore.shared.readAllMessages();\n\n  // State\n  const [auth, setAuth] = React.useState<AuthenticationHooks>({\n    userId: undefined,\n    signIn,\n    signOut\n  });\n\n  const [inbox, setInbox] = React.useState<InboxHooks>({\n    load: loadInbox,\n    fetchNextPageOfMessages,\n    setPaginationLimit,\n    readMessage,\n    unreadMessage,\n    clickMessage,\n    archiveMessage,\n    openMessage,\n    unarchiveMessage,\n    readAllMessages\n  });\n\n  React.useEffect(() => {\n\n    // Add a listener to the Courier instance\n    const listener = Courier.shared.addAuthenticationListener(() => refreshAuth());\n\n    // Add inbox data store listener\n    const inboxListener = new CourierInboxDataStoreListener({\n      onError: (error: Error) => refreshInbox(error),\n      onDataSetChange: () => refreshInbox(),\n      onPageAdded: () => refreshInbox(),\n      onMessageAdd: () => refreshInbox(),\n      onMessageRemove: () => refreshInbox(),\n      onMessageUpdate: () => refreshInbox(),\n      onUnreadCountChange: () => refreshInbox()\n    });\n    CourierInboxDatastore.shared.addDataStoreListener(inboxListener);\n\n    // Set initial values\n    refreshAuth();\n    refreshInbox();\n\n    // Remove listeners when the component unmounts\n    return () => {\n      listener.remove();\n      inboxListener.remove();\n    };\n  }, []);\n\n  const refreshAuth = () => {\n    const options = Courier.shared.client?.options;\n    setAuth({\n      userId: options?.userId,\n      signIn,\n      signOut\n    });\n  }\n\n  const refreshInbox = (error?: Error) => {\n    const datastore = CourierInboxDatastore.shared;\n    setInbox({\n      load: loadInbox,\n      fetchNextPageOfMessages,\n      setPaginationLimit,\n      readMessage,\n      unreadMessage,\n      clickMessage,\n      archiveMessage,\n      openMessage,\n      unarchiveMessage,\n      readAllMessages,\n      inbox: datastore.inboxDataSet,\n      archive: datastore.archiveDataSet,\n      unreadCount: datastore.unreadCount,\n      error: error,\n    });\n  }\n\n  return {\n    shared: Courier.shared,\n    auth: auth,\n    inbox: inbox,\n  };\n};\n"],"names":["reactNodeToHTMLElement","node","container","document","createElement","root","createRoot","flushSync","render","element","firstElementChild","HTMLElement","Error","CourierClientComponent","children","isMounted","setIsMounted","useState","useEffect","window","CourierInbox","forwardRef","props","ref","inboxRef","useRef","current","inbox","onMessageClick","onMessageActionClick","onMessageLongPress","renderHeader","queueMicrotask","setHeader","headerProps","renderListItem","setListItem","itemProps","renderEmptyState","setEmptyState","emptyStateProps","renderLoadingState","setLoadingState","loadingStateProps","renderErrorState","setErrorState","errorStateProps","renderPaginationItem","setPaginationItem","paginationProps","setFeedType","feedType","jsx","height","lightTheme","JSON","stringify","darkTheme","mode","displayName","CourierInboxPopupMenu","handleRef","el","_el","getEl","lastFeedTypeRef","menu","_a","call","renderMenuButton","setMenuButton","buttonProps","popupAlignment","popupWidth","popupHeight","left","top","right","bottom","signIn","Courier","shared","signOut","loadInbox","CourierInboxDatastore","load","fetchNextPageOfMessages","setPaginationLimit","limit","paginationLimit","readMessage","message","unreadMessage","clickMessage","archiveMessage","openMessage","unarchiveMessage","readAllMessages","auth","setAuth","React","userId","setInbox","listener","addAuthenticationListener","refreshAuth","inboxListener","CourierInboxDataStoreListener","onError","error","refreshInbox","onDataSetChange","onPageAdded","onMessageAdd","onMessageRemove","onMessageUpdate","onUnreadCountChange","addDataStoreListener","remove","options","client","datastore","inboxDataSet","archive","archiveDataSet","unreadCount"],"mappings":"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"}

package/dist/index.d.ts

@@ -6,4 +6,6 @@ export { markAsRead, markAsUnread, clickMessage, archiveMessage, openMessage } f
 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

@@ -218,124 +218,136 @@ const CourierInbox = forwardRef((props, ref) => {
   ) });
 });
 CourierInbox.displayName = "CourierInbox";
-const CourierInboxPopupMenu = forwardRef((props, ref) => {
-  const menuRef = useRef(null);
-  useEffect(() => {
-    if (typeof ref === "function") {
-      ref(menuRef.current);
-    } else if (ref) {
-      ref.current = menuRef.current;
+const CourierInboxPopupMenu = forwardRef(
+  (props, ref) => {
+    function handleRef(el) {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(el);
+        } else {
+          ref.current = el;
+        }
+      }
+      handleRef._el = el;
     }
-  }, [ref]);
-  useEffect(() => {
-    const menu = menuRef.current;
-    if (!menu) return;
-    menu.onMessageClick(props.onMessageClick);
-  }, [props.onMessageClick, menuRef]);
-  useEffect(() => {
-    const menu = menuRef.current;
-    if (!menu) return;
-    menu.onMessageActionClick(props.onMessageActionClick);
-  }, [props.onMessageActionClick, menuRef]);
-  useEffect(() => {
-    const menu = menuRef.current;
-    if (!menu) return;
-    menu.onMessageLongPress(props.onMessageLongPress);
-  }, [props.onMessageLongPress, menuRef]);
-  useEffect(() => {
-    const menu = menuRef.current;
-    if (!menu || !props.renderHeader) return;
-    queueMicrotask(() => {
-      menu.setHeader((headerProps) => {
-        const reactNode = props.renderHeader(headerProps);
-        return reactNodeToHTMLElement(reactNode);
+    function getEl() {
+      return handleRef._el ?? null;
+    }
+    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 reactNodeToHTMLElement(reactNode);
+        });
       });
-    });
-  }, [props.renderHeader, menuRef]);
-  useEffect(() => {
-    const menu = menuRef.current;
-    if (!menu || !props.renderListItem) return;
-    queueMicrotask(() => {
-      menu.setListItem((itemProps) => {
-        const reactNode = props.renderListItem(itemProps);
-        return reactNodeToHTMLElement(reactNode);
+    }, [props.renderHeader]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu || !props.renderListItem) return;
+      queueMicrotask(() => {
+        menu.setListItem((itemProps) => {
+          const reactNode = props.renderListItem(itemProps);
+          return reactNodeToHTMLElement(reactNode);
+        });
       });
-    });
-  }, [props.renderListItem, menuRef]);
-  useEffect(() => {
-    const menu = menuRef.current;
-    if (!menu || !props.renderEmptyState) return;
-    queueMicrotask(() => {
-      menu.setEmptyState((emptyStateProps) => {
-        const reactNode = props.renderEmptyState(emptyStateProps);
-        return reactNodeToHTMLElement(reactNode);
+    }, [props.renderListItem]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu || !props.renderEmptyState) return;
+      queueMicrotask(() => {
+        menu.setEmptyState((emptyStateProps) => {
+          const reactNode = props.renderEmptyState(emptyStateProps);
+          return reactNodeToHTMLElement(reactNode);
+        });
       });
-    });
-  }, [props.renderEmptyState, menuRef]);
-  useEffect(() => {
-    const menu = menuRef.current;
-    if (!menu || !props.renderLoadingState) return;
-    queueMicrotask(() => {
-      menu.setLoadingState((loadingStateProps) => {
-        const reactNode = props.renderLoadingState(loadingStateProps);
-        return reactNodeToHTMLElement(reactNode);
+    }, [props.renderEmptyState]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu || !props.renderLoadingState) return;
+      queueMicrotask(() => {
+        menu.setLoadingState((loadingStateProps) => {
+          const reactNode = props.renderLoadingState(loadingStateProps);
+          return reactNodeToHTMLElement(reactNode);
+        });
       });
-    });
-  }, [props.renderLoadingState, menuRef]);
-  useEffect(() => {
-    const menu = menuRef.current;
-    if (!menu || !props.renderErrorState) return;
-    queueMicrotask(() => {
-      menu.setErrorState((errorStateProps) => {
-        const reactNode = props.renderErrorState(errorStateProps);
-        return reactNodeToHTMLElement(reactNode);
+    }, [props.renderLoadingState]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu || !props.renderErrorState) return;
+      queueMicrotask(() => {
+        menu.setErrorState((errorStateProps) => {
+          const reactNode = props.renderErrorState(errorStateProps);
+          return reactNodeToHTMLElement(reactNode);
+        });
       });
-    });
-  }, [props.renderErrorState, menuRef]);
-  useEffect(() => {
-    const menu = menuRef.current;
-    if (!menu || !props.renderPaginationItem) return;
-    queueMicrotask(() => {
-      menu.setPaginationItem((paginationProps) => {
-        const reactNode = props.renderPaginationItem(paginationProps);
-        return reactNodeToHTMLElement(reactNode);
+    }, [props.renderErrorState]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu || !props.renderPaginationItem) return;
+      queueMicrotask(() => {
+        menu.setPaginationItem((paginationProps) => {
+          const reactNode = props.renderPaginationItem(paginationProps);
+          return reactNodeToHTMLElement(reactNode);
+        });
       });
-    });
-  }, [props.renderPaginationItem, menuRef]);
-  useEffect(() => {
-    const menu = menuRef.current;
-    if (!menu || !props.renderMenuButton) return;
-    queueMicrotask(() => {
-      menu.setMenuButton((buttonProps) => {
-        const reactNode = props.renderMenuButton(buttonProps);
-        return reactNodeToHTMLElement(reactNode);
+    }, [props.renderPaginationItem]);
+    useEffect(() => {
+      const menu = getEl();
+      if (!menu || !props.renderMenuButton) return;
+      queueMicrotask(() => {
+        menu.setMenuButton((buttonProps) => {
+          const reactNode = props.renderMenuButton(buttonProps);
+          return reactNodeToHTMLElement(reactNode);
+        });
       });
-    });
-  }, [props.renderMenuButton, menuRef]);
-  useEffect(() => {
-    const menu = menuRef.current;
-    if (!menu) return;
-    queueMicrotask(() => {
-      menu.setFeedType(props.feedType || "inbox");
-    });
-  }, [props.feedType, menuRef]);
-  return /* @__PURE__ */ jsx(CourierClientComponent, { children: /* @__PURE__ */ jsx(
-    "courier-inbox-popup-menu",
-    {
-      ref: menuRef,
-      "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
-    }
-  ) });
-});
+    }, [props.renderMenuButton]);
+    return /* @__PURE__ */ jsx(CourierClientComponent, { children: /* @__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
+      }
+    ) });
+  }
+);
 CourierInboxPopupMenu.displayName = "CourierInboxPopupMenu";
 export {
   CourierInbox,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/hooks/use-courier.tsx","../src/utils/utils.tsx","../src/components/courier-client-component.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx"],"sourcesContent":["import React from 'react';\nimport { Courier, CourierProps, InboxMessage } from '@trycourier/courier-js';\nimport { CourierInboxDatastore, CourierInboxDataStoreListener, CourierInboxFeedType, InboxDataSet } from '@trycourier/courier-ui-inbox';\n\ntype AuthenticationHooks = {\n  userId?: string,\n  signIn: (props: CourierProps) => void,\n  signOut: () => void\n}\n\ntype InboxHooks = {\n  load: (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => Promise<void>,\n  fetchNextPageOfMessages: (props: { feedType: CourierInboxFeedType }) => Promise<InboxDataSet | null>,\n  setPaginationLimit: (limit: number) => void,\n  readMessage: (message: InboxMessage) => Promise<void>,\n  unreadMessage: (message: InboxMessage) => Promise<void>,\n  clickMessage: (message: InboxMessage) => Promise<void>,\n  archiveMessage: (message: InboxMessage) => Promise<void>,\n  openMessage: (message: InboxMessage) => Promise<void>,\n  unarchiveMessage: (message: InboxMessage) => Promise<void>,\n  readAllMessages: () => Promise<void>,\n  inbox?: InboxDataSet,\n  archive?: InboxDataSet,\n  unreadCount?: number,\n  error?: Error\n}\n\n// A hook for managing the shared state of Courier\n// If you want to use more functions, checkout the Courier JS SDK which\n// can be used directly by importing from '@trycourier/courier-js'\nexport const useCourier = () => {\n\n  // Authentication Functions\n  const signIn = (props: CourierProps) => Courier.shared.signIn(props);\n  const signOut = () => Courier.shared.signOut();\n\n  // Inbox Functions\n  const loadInbox = (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => CourierInboxDatastore.shared.load(props);\n  const fetchNextPageOfMessages = (props: { feedType: CourierInboxFeedType }) => CourierInboxDatastore.shared.fetchNextPageOfMessages(props);\n  const setPaginationLimit = (limit: number) => Courier.shared.paginationLimit = limit;\n  const readMessage = (message: InboxMessage) => CourierInboxDatastore.shared.readMessage({ message });\n  const unreadMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unreadMessage({ message });\n  const clickMessage = (message: InboxMessage) => CourierInboxDatastore.shared.clickMessage({ message });\n  const archiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.archiveMessage({ message });\n  const openMessage = (message: InboxMessage) => CourierInboxDatastore.shared.openMessage({ message });\n  const unarchiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unarchiveMessage({ message });\n  const readAllMessages = () => CourierInboxDatastore.shared.readAllMessages();\n\n  // State\n  const [auth, setAuth] = React.useState<AuthenticationHooks>({\n    userId: undefined,\n    signIn,\n    signOut\n  });\n\n  const [inbox, setInbox] = React.useState<InboxHooks>({\n    load: loadInbox,\n    fetchNextPageOfMessages,\n    setPaginationLimit,\n    readMessage,\n    unreadMessage,\n    clickMessage,\n    archiveMessage,\n    openMessage,\n    unarchiveMessage,\n    readAllMessages\n  });\n\n  React.useEffect(() => {\n\n    // Add a listener to the Courier instance\n    const listener = Courier.shared.addAuthenticationListener(() => refreshAuth());\n\n    // Add inbox data store listener\n    const inboxListener = new CourierInboxDataStoreListener({\n      onError: (error: Error) => refreshInbox(error),\n      onDataSetChange: () => refreshInbox(),\n      onPageAdded: () => refreshInbox(),\n      onMessageAdd: () => refreshInbox(),\n      onMessageRemove: () => refreshInbox(),\n      onMessageUpdate: () => refreshInbox(),\n      onUnreadCountChange: () => refreshInbox()\n    });\n    CourierInboxDatastore.shared.addDataStoreListener(inboxListener);\n\n    // Set initial values\n    refreshAuth();\n    refreshInbox();\n\n    // Remove listeners when the component unmounts\n    return () => {\n      listener.remove();\n      inboxListener.remove();\n    };\n  }, []);\n\n  const refreshAuth = () => {\n    const options = Courier.shared.client?.options;\n    setAuth({\n      userId: options?.userId,\n      signIn,\n      signOut\n    });\n  }\n\n  const refreshInbox = (error?: Error) => {\n    const datastore = CourierInboxDatastore.shared;\n    setInbox({\n      load: loadInbox,\n      fetchNextPageOfMessages,\n      setPaginationLimit,\n      readMessage,\n      unreadMessage,\n      clickMessage,\n      archiveMessage,\n      openMessage,\n      unarchiveMessage,\n      readAllMessages,\n      inbox: datastore.inboxDataSet,\n      archive: datastore.archiveDataSet,\n      unreadCount: datastore.unreadCount,\n      error: error,\n    });\n  }\n\n  return {\n    shared: Courier.shared,\n    auth: auth,\n    inbox: inbox,\n  };\n};\n","import { ReactNode } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { createRoot } from \"react-dom/client\";\n\n/**\n * Converts a React node to an HTMLElement.\n * This function uses flushSync to ensure the DOM is updated synchronously.\n * @param node - The React node to convert.\n * @returns The converted HTMLElement.\n */\nexport function reactNodeToHTMLElement(node: ReactNode): HTMLElement {\n  const container = document.createElement('div');\n\n  // Use React 18 root\n  const root = createRoot(container);\n  flushSync(() => {\n    root.render(node);\n  });\n\n  // Wait until React mounts the content synchronously\n  const element = container.firstElementChild;\n  if (!(element instanceof HTMLElement)) {\n    throw new Error(\n      'renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)'\n    );\n  }\n\n  return element;\n}","import React, { useState, useEffect } from 'react';\n\ninterface CourierClientProps {\n  children: React.ReactNode;\n}\n\n// This class prevents issues with server side rendering react components\n// It will force the component to only render client side\n// A future update could support server side rendering if there is enough demand\nexport const CourierClientComponent: React.FC<CourierClientProps> = ({ children }) => {\n  const [isMounted, setIsMounted] = useState(false);\n\n  useEffect(() => {\n    setIsMounted(true);\n  }, []);\n\n  // During SSR, render nothing or fallback\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  if (!isMounted) {\n    return null;\n  }\n\n  return <>{children}</>;\n};","import { useRef, useEffect, forwardRef, ReactNode } from \"react\";\nimport { CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxTheme, CourierInbox as CourierInboxElement, CourierInboxHeaderFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxFeedType } from \"@trycourier/courier-ui-inbox\";\nimport { reactNodeToHTMLElement } from \"../utils/utils\";\nimport { CourierComponentThemeMode } from \"@trycourier/courier-ui-core\";\nimport { CourierClientComponent } from \"./courier-client-component\";\n\nexport interface CourierInboxProps {\n  height?: string;\n  lightTheme?: CourierInboxTheme;\n  darkTheme?: CourierInboxTheme;\n  mode?: CourierComponentThemeMode;\n  feedType?: CourierInboxFeedType;\n  onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n  onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n  onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n  renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n  renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n  renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n  renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n  renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n  renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInbox = forwardRef<CourierInboxElement, CourierInboxProps>((props, ref) => {\n  const inboxRef = useRef<CourierInboxElement | null>(null);\n\n  // Expose the internal ref to the parent if a ref was passed in\n  useEffect(() => {\n    if (typeof ref === \"function\") {\n      ref(inboxRef.current);\n    } else if (ref) {\n      (ref as React.RefObject<CourierInboxElement | null>).current = inboxRef.current;\n    }\n  }, [ref]);\n\n  // Handle message click\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    inbox.onMessageClick(props.onMessageClick);\n  }, [props.onMessageClick, inboxRef]);\n\n  // Handle message action click\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    inbox.onMessageActionClick(props.onMessageActionClick);\n  }, [props.onMessageActionClick, inboxRef]);\n\n  // Handle message long press\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    inbox.onMessageLongPress(props.onMessageLongPress);\n  }, [props.onMessageLongPress, inboxRef]);\n\n  // Render header\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderHeader) return;\n    queueMicrotask(() => {\n      inbox.setHeader((headerProps?: CourierInboxHeaderFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderHeader!(headerProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderHeader, inboxRef]);\n\n  // Render list item\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderListItem) return;\n    queueMicrotask(() => {\n      inbox.setListItem((itemProps?: CourierInboxListItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderListItem!(itemProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderListItem, inboxRef]);\n\n  // Render empty state\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderEmptyState) return;\n    queueMicrotask(() => {\n      inbox.setEmptyState((emptyStateProps?: CourierInboxStateEmptyFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderEmptyState!(emptyStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderEmptyState, inboxRef]);\n\n  // Render loading state\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderLoadingState) return;\n    queueMicrotask(() => {\n      inbox.setLoadingState((loadingStateProps?: CourierInboxStateLoadingFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderLoadingState!(loadingStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderLoadingState, inboxRef]);\n\n  // Render error state\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderErrorState) return;\n    queueMicrotask(() => {\n      inbox.setErrorState((errorStateProps?: CourierInboxStateErrorFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderErrorState!(errorStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderErrorState, inboxRef]);\n\n  // Render pagination item\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderPaginationItem) return;\n    queueMicrotask(() => {\n      inbox.setPaginationItem((paginationProps?: CourierInboxPaginationItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderPaginationItem!(paginationProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderPaginationItem, inboxRef]);\n\n  // Set feed type\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    queueMicrotask(() => {\n      inbox.setFeedType(props.feedType || 'inbox');\n    });\n  }, [props.feedType, inboxRef]);\n\n  return (\n    <CourierClientComponent>\n      {/* @ts-ignore */}\n      <courier-inbox\n        ref={inboxRef}\n        height={props.height}\n        light-theme={props.lightTheme ? JSON.stringify(props.lightTheme) : undefined}\n        dark-theme={props.darkTheme ? JSON.stringify(props.darkTheme) : undefined}\n        mode={props.mode}\n      />\n    </CourierClientComponent>\n  );\n});\n\nCourierInbox.displayName = 'CourierInbox';","import { useRef, useEffect, forwardRef, ReactNode } from \"react\";\nimport { CourierInboxFeedType, CourierInboxHeaderFactoryProps, CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxMenuButtonFactoryProps, CourierInboxPopupMenu as CourierInboxPopupMenuElement, CourierInboxPaginationItemFactoryProps, CourierInboxPopupAlignment, CourierInboxStateEmptyFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxTheme } from \"@trycourier/courier-ui-inbox\";\nimport { reactNodeToHTMLElement } from \"../utils/utils\";\nimport { CourierComponentThemeMode } from \"@trycourier/courier-ui-core\";\nimport { CourierClientComponent } from \"./courier-client-component\";\n\nexport interface CourierInboxPopupMenuProps {\n  popupAlignment?: CourierInboxPopupAlignment;\n  popupWidth?: string;\n  popupHeight?: string;\n  left?: string;\n  top?: string;\n  right?: string;\n  bottom?: string;\n  lightTheme?: CourierInboxTheme;\n  darkTheme?: CourierInboxTheme;\n  mode?: CourierComponentThemeMode;\n  feedType?: CourierInboxFeedType;\n  onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n  onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n  onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n  renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n  renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n  renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n  renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n  renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n  renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n  renderMenuButton?: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInboxPopupMenu = forwardRef<CourierInboxPopupMenuElement, CourierInboxPopupMenuProps>((props, ref) => {\n  const menuRef = useRef<CourierInboxPopupMenuElement>(null);\n\n  // Expose the internal ref to the parent if a ref was passed in\n  useEffect(() => {\n    if (typeof ref === \"function\") {\n      ref(menuRef.current);\n    } else if (ref) {\n      (ref as React.RefObject<CourierInboxPopupMenuElement | null>).current = menuRef.current;\n    }\n  }, [ref]);\n\n  // Handle message click\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu) return;\n    menu.onMessageClick(props.onMessageClick);\n  }, [props.onMessageClick, menuRef]);\n\n  // Handle message action click\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu) return;\n    menu.onMessageActionClick(props.onMessageActionClick);\n  }, [props.onMessageActionClick, menuRef]);\n\n  // Handle message long press\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu) return;\n    menu.onMessageLongPress(props.onMessageLongPress);\n  }, [props.onMessageLongPress, menuRef]);\n\n  // Render header\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderHeader) return;\n    queueMicrotask(() => {\n      menu.setHeader((headerProps?: CourierInboxHeaderFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderHeader!(headerProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderHeader, menuRef]);\n\n  // Render list item\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderListItem) return;\n    queueMicrotask(() => {\n      menu.setListItem((itemProps?: CourierInboxListItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderListItem!(itemProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderListItem, menuRef]);\n\n  // Render empty state\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderEmptyState) return;\n    queueMicrotask(() => {\n      menu.setEmptyState((emptyStateProps?: CourierInboxStateEmptyFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderEmptyState!(emptyStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderEmptyState, menuRef]);\n\n  // Render loading state\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderLoadingState) return;\n    queueMicrotask(() => {\n      menu.setLoadingState((loadingStateProps?: CourierInboxStateLoadingFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderLoadingState!(loadingStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderLoadingState, menuRef]);\n\n  // Render error state\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderErrorState) return;\n    queueMicrotask(() => {\n      menu.setErrorState((errorStateProps?: CourierInboxStateErrorFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderErrorState!(errorStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderErrorState, menuRef]);\n\n  // Render pagination item\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderPaginationItem) return;\n    queueMicrotask(() => {\n      menu.setPaginationItem((paginationProps?: CourierInboxPaginationItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderPaginationItem!(paginationProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderPaginationItem, menuRef]);\n\n  // Render menu button\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu || !props.renderMenuButton) return;\n    queueMicrotask(() => {\n      menu.setMenuButton((buttonProps?: CourierInboxMenuButtonFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderMenuButton!(buttonProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderMenuButton, menuRef]);\n\n  // Set feed type\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!menu) return;\n    queueMicrotask(() => {\n      menu.setFeedType(props.feedType || 'inbox');\n    });\n  }, [props.feedType, menuRef]);\n\n  return (\n    <CourierClientComponent>\n      {/* @ts-ignore */}\n      <courier-inbox-popup-menu\n        ref={menuRef}\n        popup-alignment={props.popupAlignment}\n        popup-width={props.popupWidth}\n        popup-height={props.popupHeight}\n        left={props.left}\n        top={props.top}\n        right={props.right}\n        bottom={props.bottom}\n        light-theme={props.lightTheme ? JSON.stringify(props.lightTheme) : undefined}\n        dark-theme={props.darkTheme ? JSON.stringify(props.darkTheme) : undefined}\n        mode={props.mode}\n      />\n    </CourierClientComponent>\n  );\n});\n\nCourierInboxPopupMenu.displayName = 'CourierInboxPopupMenu';"],"names":["clickMessage","archiveMessage","openMessage"],"mappings":";;;;;;;AA8BO,MAAM,aAAa,MAAM;AAG9B,QAAM,SAAS,CAAC,UAAwB,QAAQ,OAAO,OAAO,KAAK;AACnE,QAAM,UAAU,MAAM,QAAQ,OAAO,QAAA;AAGrC,QAAM,YAAY,CAAC,UAAqE,sBAAsB,OAAO,KAAK,KAAK;AAC/H,QAAM,0BAA0B,CAAC,UAA8C,sBAAsB,OAAO,wBAAwB,KAAK;AACzI,QAAM,qBAAqB,CAAC,UAAkB,QAAQ,OAAO,kBAAkB;AAC/E,QAAM,cAAc,CAAC,YAA0B,sBAAsB,OAAO,YAAY,EAAE,SAAS;AACnG,QAAM,gBAAgB,CAAC,YAA0B,sBAAsB,OAAO,cAAc,EAAE,SAAS;AACvG,QAAMA,gBAAe,CAAC,YAA0B,sBAAsB,OAAO,aAAa,EAAE,SAAS;AACrG,QAAMC,kBAAiB,CAAC,YAA0B,sBAAsB,OAAO,eAAe,EAAE,SAAS;AACzG,QAAMC,eAAc,CAAC,YAA0B,sBAAsB,OAAO,YAAY,EAAE,SAAS;AACnG,QAAM,mBAAmB,CAAC,YAA0B,sBAAsB,OAAO,iBAAiB,EAAE,SAAS;AAC7G,QAAM,kBAAkB,MAAM,sBAAsB,OAAO,gBAAA;AAG3D,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAA8B;AAAA,IAC1D,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAqB;AAAA,IACnD,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAAF;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,UAAU,MAAM;AAGpB,UAAM,WAAW,QAAQ,OAAO,0BAA0B,MAAM,aAAa;AAG7E,UAAM,gBAAgB,IAAI,8BAA8B;AAAA,MACtD,SAAS,CAAC,UAAiB,aAAa,KAAK;AAAA,MAC7C,iBAAiB,MAAM,aAAA;AAAA,MACvB,aAAa,MAAM,aAAA;AAAA,MACnB,cAAc,MAAM,aAAA;AAAA,MACpB,iBAAiB,MAAM,aAAA;AAAA,MACvB,iBAAiB,MAAM,aAAA;AAAA,MACvB,qBAAqB,MAAM,aAAA;AAAA,IAAa,CACzC;AACD,0BAAsB,OAAO,qBAAqB,aAAa;AAG/D,gBAAA;AACA,iBAAA;AAGA,WAAO,MAAM;AACX,eAAS,OAAA;AACT,oBAAc,OAAA;AAAA,IAChB;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,cAAc,MAAM;;AACxB,UAAM,WAAU,aAAQ,OAAO,WAAf,mBAAuB;AACvC,YAAQ;AAAA,MACN,QAAQ,mCAAS;AAAA,MACjB;AAAA,MACA;AAAA,IAAA,CACD;AAAA,EACH;AAEA,QAAM,eAAe,CAAC,UAAkB;AACtC,UAAM,YAAY,sBAAsB;AACxC,aAAS;AAAA,MACP,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAAF;AAAA,MACA,gBAAAC;AAAA,MACA,aAAAC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,UAAU;AAAA,MACjB,SAAS,UAAU;AAAA,MACnB,aAAa,UAAU;AAAA,MACvB;AAAA,IAAA,CACD;AAAA,EACH;AAEA,SAAO;AAAA,IACL,QAAQ,QAAQ;AAAA,IAChB;AAAA,IACA;AAAA,EAAA;AAEJ;ACxHO,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;ACnBO,MAAM,yBAAuD,CAAC,EAAE,eAAe;AACpF,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACd,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAA,CAAE;AAGL,MAAI,OAAO,WAAW,aAAa;AACjC,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAEA,yCAAU,UAAS;AACrB;ACHO,MAAM,eAAe,WAAmD,CAAC,OAAO,QAAQ;AAC7F,QAAM,WAAW,OAAmC,IAAI;AAGxD,YAAU,MAAM;AACd,QAAI,OAAO,QAAQ,YAAY;AAC7B,UAAI,SAAS,OAAO;AAAA,IACtB,WAAW,KAAK;AACb,UAAoD,UAAU,SAAS;AAAA,IAC1E;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAGR,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,MAAO;AACZ,UAAM,eAAe,MAAM,cAAc;AAAA,EAC3C,GAAG,CAAC,MAAM,gBAAgB,QAAQ,CAAC;AAGnC,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,MAAO;AACZ,UAAM,qBAAqB,MAAM,oBAAoB;AAAA,EACvD,GAAG,CAAC,MAAM,sBAAsB,QAAQ,CAAC;AAGzC,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,MAAO;AACZ,UAAM,mBAAmB,MAAM,kBAAkB;AAAA,EACnD,GAAG,CAAC,MAAM,oBAAoB,QAAQ,CAAC;AAGvC,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,SAAS,CAAC,MAAM,aAAc;AACnC,mBAAe,MAAM;AACnB,YAAM,UAAU,CAAC,gBAAiF;AAChG,cAAM,YAAY,MAAM,aAAc,WAAW;AACjD,eAAO,uBAAuB,SAAS;AAAA,MACzC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,cAAc,QAAQ,CAAC;AAGjC,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,SAAS,CAAC,MAAM,eAAgB;AACrC,mBAAe,MAAM;AACnB,YAAM,YAAY,CAAC,cAAiF;AAClG,cAAM,YAAY,MAAM,eAAgB,SAAS;AACjD,eAAO,uBAAuB,SAAS;AAAA,MACzC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,gBAAgB,QAAQ,CAAC;AAGnC,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,SAAS,CAAC,MAAM,iBAAkB;AACvC,mBAAe,MAAM;AACnB,YAAM,cAAc,CAAC,oBAAyF;AAC5G,cAAM,YAAY,MAAM,iBAAkB,eAAe;AACzD,eAAO,uBAAuB,SAAS;AAAA,MACzC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,kBAAkB,QAAQ,CAAC;AAGrC,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,SAAS,CAAC,MAAM,mBAAoB;AACzC,mBAAe,MAAM;AACnB,YAAM,gBAAgB,CAAC,sBAA6F;AAClH,cAAM,YAAY,MAAM,mBAAoB,iBAAiB;AAC7D,eAAO,uBAAuB,SAAS;AAAA,MACzC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,oBAAoB,QAAQ,CAAC;AAGvC,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,SAAS,CAAC,MAAM,iBAAkB;AACvC,mBAAe,MAAM;AACnB,YAAM,cAAc,CAAC,oBAAyF;AAC5G,cAAM,YAAY,MAAM,iBAAkB,eAAe;AACzD,eAAO,uBAAuB,SAAS;AAAA,MACzC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,kBAAkB,QAAQ,CAAC;AAGrC,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,SAAS,CAAC,MAAM,qBAAsB;AAC3C,mBAAe,MAAM;AACnB,YAAM,kBAAkB,CAAC,oBAA6F;AACpH,cAAM,YAAY,MAAM,qBAAsB,eAAe;AAC7D,eAAO,uBAAuB,SAAS;AAAA,MACzC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,sBAAsB,QAAQ,CAAC;AAGzC,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,MAAO;AACZ,mBAAe,MAAM;AACnB,YAAM,YAAY,MAAM,YAAY,OAAO;AAAA,IAC7C,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,UAAU,QAAQ,CAAC;AAE7B,6BACG,wBAAA,EAEC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ,MAAM;AAAA,MACd,eAAa,MAAM,aAAa,KAAK,UAAU,MAAM,UAAU,IAAI;AAAA,MACnE,cAAY,MAAM,YAAY,KAAK,UAAU,MAAM,SAAS,IAAI;AAAA,MAChE,MAAM,MAAM;AAAA,IAAA;AAAA,EAAA,GAEhB;AAEJ,CAAC;AAED,aAAa,cAAc;ACzHpB,MAAM,wBAAwB,WAAqE,CAAC,OAAO,QAAQ;AACxH,QAAM,UAAU,OAAqC,IAAI;AAGzD,YAAU,MAAM;AACd,QAAI,OAAO,QAAQ,YAAY;AAC7B,UAAI,QAAQ,OAAO;AAAA,IACrB,WAAW,KAAK;AACb,UAA6D,UAAU,QAAQ;AAAA,IAClF;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAGR,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,SAAK,eAAe,MAAM,cAAc;AAAA,EAC1C,GAAG,CAAC,MAAM,gBAAgB,OAAO,CAAC;AAGlC,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,SAAK,qBAAqB,MAAM,oBAAoB;AAAA,EACtD,GAAG,CAAC,MAAM,sBAAsB,OAAO,CAAC;AAGxC,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,SAAK,mBAAmB,MAAM,kBAAkB;AAAA,EAClD,GAAG,CAAC,MAAM,oBAAoB,OAAO,CAAC;AAGtC,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,QAAQ,CAAC,MAAM,aAAc;AAClC,mBAAe,MAAM;AACnB,WAAK,UAAU,CAAC,gBAAiF;AAC/F,cAAM,YAAY,MAAM,aAAc,WAAW;AACjD,eAAO,uBAAuB,SAAS;AAAA,MACzC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,cAAc,OAAO,CAAC;AAGhC,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,QAAQ,CAAC,MAAM,eAAgB;AACpC,mBAAe,MAAM;AACnB,WAAK,YAAY,CAAC,cAAiF;AACjG,cAAM,YAAY,MAAM,eAAgB,SAAS;AACjD,eAAO,uBAAuB,SAAS;AAAA,MACzC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,gBAAgB,OAAO,CAAC;AAGlC,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,QAAQ,CAAC,MAAM,iBAAkB;AACtC,mBAAe,MAAM;AACnB,WAAK,cAAc,CAAC,oBAAyF;AAC3G,cAAM,YAAY,MAAM,iBAAkB,eAAe;AACzD,eAAO,uBAAuB,SAAS;AAAA,MACzC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,kBAAkB,OAAO,CAAC;AAGpC,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,QAAQ,CAAC,MAAM,mBAAoB;AACxC,mBAAe,MAAM;AACnB,WAAK,gBAAgB,CAAC,sBAA6F;AACjH,cAAM,YAAY,MAAM,mBAAoB,iBAAiB;AAC7D,eAAO,uBAAuB,SAAS;AAAA,MACzC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,oBAAoB,OAAO,CAAC;AAGtC,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,QAAQ,CAAC,MAAM,iBAAkB;AACtC,mBAAe,MAAM;AACnB,WAAK,cAAc,CAAC,oBAAyF;AAC3G,cAAM,YAAY,MAAM,iBAAkB,eAAe;AACzD,eAAO,uBAAuB,SAAS;AAAA,MACzC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,kBAAkB,OAAO,CAAC;AAGpC,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,QAAQ,CAAC,MAAM,qBAAsB;AAC1C,mBAAe,MAAM;AACnB,WAAK,kBAAkB,CAAC,oBAA6F;AACnH,cAAM,YAAY,MAAM,qBAAsB,eAAe;AAC7D,eAAO,uBAAuB,SAAS;AAAA,MACzC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,sBAAsB,OAAO,CAAC;AAGxC,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,QAAQ,CAAC,MAAM,iBAAkB;AACtC,mBAAe,MAAM;AACnB,WAAK,cAAc,CAAC,gBAAqF;AACvG,cAAM,YAAY,MAAM,iBAAkB,WAAW;AACrD,eAAO,uBAAuB,SAAS;AAAA,MACzC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,kBAAkB,OAAO,CAAC;AAGpC,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,mBAAe,MAAM;AACnB,WAAK,YAAY,MAAM,YAAY,OAAO;AAAA,IAC5C,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,UAAU,OAAO,CAAC;AAE5B,6BACG,wBAAA,EAEC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,mBAAiB,MAAM;AAAA,MACvB,eAAa,MAAM;AAAA,MACnB,gBAAc,MAAM;AAAA,MACpB,MAAM,MAAM;AAAA,MACZ,KAAK,MAAM;AAAA,MACX,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM;AAAA,MACd,eAAa,MAAM,aAAa,KAAK,UAAU,MAAM,UAAU,IAAI;AAAA,MACnE,cAAY,MAAM,YAAY,KAAK,UAAU,MAAM,SAAS,IAAI;AAAA,MAChE,MAAM,MAAM;AAAA,IAAA;AAAA,EAAA,GAEhB;AAEJ,CAAC;AAED,sBAAsB,cAAc;"}
+{"version":3,"file":"index.mjs","sources":["../src/hooks/use-courier.tsx","../src/utils/utils.tsx","../src/components/courier-client-component.tsx","../src/components/courier-inbox.tsx","../src/components/courier-inbox-popup-menu.tsx"],"sourcesContent":["import React from 'react';\nimport { Courier, CourierProps, InboxMessage } from '@trycourier/courier-js';\nimport { CourierInboxDatastore, CourierInboxDataStoreListener, CourierInboxFeedType, InboxDataSet } from '@trycourier/courier-ui-inbox';\n\ntype AuthenticationHooks = {\n  userId?: string,\n  signIn: (props: CourierProps) => void,\n  signOut: () => void\n}\n\ntype InboxHooks = {\n  load: (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => Promise<void>,\n  fetchNextPageOfMessages: (props: { feedType: CourierInboxFeedType }) => Promise<InboxDataSet | null>,\n  setPaginationLimit: (limit: number) => void,\n  readMessage: (message: InboxMessage) => Promise<void>,\n  unreadMessage: (message: InboxMessage) => Promise<void>,\n  clickMessage: (message: InboxMessage) => Promise<void>,\n  archiveMessage: (message: InboxMessage) => Promise<void>,\n  openMessage: (message: InboxMessage) => Promise<void>,\n  unarchiveMessage: (message: InboxMessage) => Promise<void>,\n  readAllMessages: () => Promise<void>,\n  inbox?: InboxDataSet,\n  archive?: InboxDataSet,\n  unreadCount?: number,\n  error?: Error\n}\n\n// A hook for managing the shared state of Courier\n// If you want to use more functions, checkout the Courier JS SDK which\n// can be used directly by importing from '@trycourier/courier-js'\nexport const useCourier = () => {\n\n  // Authentication Functions\n  const signIn = (props: CourierProps) => Courier.shared.signIn(props);\n  const signOut = () => Courier.shared.signOut();\n\n  // Inbox Functions\n  const loadInbox = (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => CourierInboxDatastore.shared.load(props);\n  const fetchNextPageOfMessages = (props: { feedType: CourierInboxFeedType }) => CourierInboxDatastore.shared.fetchNextPageOfMessages(props);\n  const setPaginationLimit = (limit: number) => Courier.shared.paginationLimit = limit;\n  const readMessage = (message: InboxMessage) => CourierInboxDatastore.shared.readMessage({ message });\n  const unreadMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unreadMessage({ message });\n  const clickMessage = (message: InboxMessage) => CourierInboxDatastore.shared.clickMessage({ message });\n  const archiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.archiveMessage({ message });\n  const openMessage = (message: InboxMessage) => CourierInboxDatastore.shared.openMessage({ message });\n  const unarchiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unarchiveMessage({ message });\n  const readAllMessages = () => CourierInboxDatastore.shared.readAllMessages();\n\n  // State\n  const [auth, setAuth] = React.useState<AuthenticationHooks>({\n    userId: undefined,\n    signIn,\n    signOut\n  });\n\n  const [inbox, setInbox] = React.useState<InboxHooks>({\n    load: loadInbox,\n    fetchNextPageOfMessages,\n    setPaginationLimit,\n    readMessage,\n    unreadMessage,\n    clickMessage,\n    archiveMessage,\n    openMessage,\n    unarchiveMessage,\n    readAllMessages\n  });\n\n  React.useEffect(() => {\n\n    // Add a listener to the Courier instance\n    const listener = Courier.shared.addAuthenticationListener(() => refreshAuth());\n\n    // Add inbox data store listener\n    const inboxListener = new CourierInboxDataStoreListener({\n      onError: (error: Error) => refreshInbox(error),\n      onDataSetChange: () => refreshInbox(),\n      onPageAdded: () => refreshInbox(),\n      onMessageAdd: () => refreshInbox(),\n      onMessageRemove: () => refreshInbox(),\n      onMessageUpdate: () => refreshInbox(),\n      onUnreadCountChange: () => refreshInbox()\n    });\n    CourierInboxDatastore.shared.addDataStoreListener(inboxListener);\n\n    // Set initial values\n    refreshAuth();\n    refreshInbox();\n\n    // Remove listeners when the component unmounts\n    return () => {\n      listener.remove();\n      inboxListener.remove();\n    };\n  }, []);\n\n  const refreshAuth = () => {\n    const options = Courier.shared.client?.options;\n    setAuth({\n      userId: options?.userId,\n      signIn,\n      signOut\n    });\n  }\n\n  const refreshInbox = (error?: Error) => {\n    const datastore = CourierInboxDatastore.shared;\n    setInbox({\n      load: loadInbox,\n      fetchNextPageOfMessages,\n      setPaginationLimit,\n      readMessage,\n      unreadMessage,\n      clickMessage,\n      archiveMessage,\n      openMessage,\n      unarchiveMessage,\n      readAllMessages,\n      inbox: datastore.inboxDataSet,\n      archive: datastore.archiveDataSet,\n      unreadCount: datastore.unreadCount,\n      error: error,\n    });\n  }\n\n  return {\n    shared: Courier.shared,\n    auth: auth,\n    inbox: inbox,\n  };\n};\n","import { ReactNode } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { createRoot } from \"react-dom/client\";\n\n/**\n * Converts a React node to an HTMLElement.\n * This function uses flushSync to ensure the DOM is updated synchronously.\n * @param node - The React node to convert.\n * @returns The converted HTMLElement.\n */\nexport function reactNodeToHTMLElement(node: ReactNode): HTMLElement {\n  const container = document.createElement('div');\n\n  // Use React 18 root\n  const root = createRoot(container);\n  flushSync(() => {\n    root.render(node);\n  });\n\n  // Wait until React mounts the content synchronously\n  const element = container.firstElementChild;\n  if (!(element instanceof HTMLElement)) {\n    throw new Error(\n      'renderListItem must return a single JSX element that renders to an HTMLElement (e.g., <div>)'\n    );\n  }\n\n  return element;\n}","import React, { useState, useEffect } from 'react';\n\ninterface CourierClientProps {\n  children: React.ReactNode;\n}\n\n// This class prevents issues with server side rendering react components\n// It will force the component to only render client side\n// A future update could support server side rendering if there is enough demand\nexport const CourierClientComponent: React.FC<CourierClientProps> = ({ children }) => {\n  const [isMounted, setIsMounted] = useState(false);\n\n  useEffect(() => {\n    setIsMounted(true);\n  }, []);\n\n  // During SSR, render nothing or fallback\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  if (!isMounted) {\n    return null;\n  }\n\n  return <>{children}</>;\n};","import { useRef, useEffect, forwardRef, ReactNode } from \"react\";\nimport { CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxTheme, CourierInbox as CourierInboxElement, CourierInboxHeaderFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxFeedType } from \"@trycourier/courier-ui-inbox\";\nimport { reactNodeToHTMLElement } from \"../utils/utils\";\nimport { CourierComponentThemeMode } from \"@trycourier/courier-ui-core\";\nimport { CourierClientComponent } from \"./courier-client-component\";\n\nexport interface CourierInboxProps {\n  /** Height of the inbox container. Defaults to \"auto\" and will resize itself based on it's children. */\n  height?: string;\n\n  /** Theme object for light mode */\n  lightTheme?: CourierInboxTheme;\n\n  /** Theme object for dark mode */\n  darkTheme?: CourierInboxTheme;\n\n  /** Theme mode: \"light\", \"dark\", or \"system\". Defaults to \"system\" */\n  mode?: CourierComponentThemeMode;\n\n  /** Type of feed to display in the inbox (\"inbox\" or \"archive\"). Defaults to \"inbox\" */\n  feedType?: CourierInboxFeedType;\n\n  /** Callback fired when a message is clicked. */\n  onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n\n  /** Callback fired when a message action (e.g., button) is clicked. */\n  onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n\n  /** Callback fired when a message is long-pressed (for mobile/gesture support). Only works on devices that support touch. */\n  onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n\n  /** Allows you to pass a custom component as the header. */\n  renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the list item. */\n  renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the empty state. */\n  renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the loading state. */\n  renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the error state. */\n  renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the pagination list item. */\n  renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInbox = forwardRef<CourierInboxElement, CourierInboxProps>((props, ref) => {\n  const inboxRef = useRef<CourierInboxElement | null>(null);\n\n  // Expose the internal ref to the parent if a ref was passed in\n  useEffect(() => {\n    if (typeof ref === \"function\") {\n      ref(inboxRef.current);\n    } else if (ref) {\n      (ref as React.RefObject<CourierInboxElement | null>).current = inboxRef.current;\n    }\n  }, [ref]);\n\n  // Handle message click\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    inbox.onMessageClick(props.onMessageClick);\n  }, [props.onMessageClick, inboxRef]);\n\n  // Handle message action click\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    inbox.onMessageActionClick(props.onMessageActionClick);\n  }, [props.onMessageActionClick, inboxRef]);\n\n  // Handle message long press\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    inbox.onMessageLongPress(props.onMessageLongPress);\n  }, [props.onMessageLongPress, inboxRef]);\n\n  // Render header\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderHeader) return;\n    queueMicrotask(() => {\n      inbox.setHeader((headerProps?: CourierInboxHeaderFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderHeader!(headerProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderHeader, inboxRef]);\n\n  // Render list item\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderListItem) return;\n    queueMicrotask(() => {\n      inbox.setListItem((itemProps?: CourierInboxListItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderListItem!(itemProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderListItem, inboxRef]);\n\n  // Render empty state\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderEmptyState) return;\n    queueMicrotask(() => {\n      inbox.setEmptyState((emptyStateProps?: CourierInboxStateEmptyFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderEmptyState!(emptyStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderEmptyState, inboxRef]);\n\n  // Render loading state\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderLoadingState) return;\n    queueMicrotask(() => {\n      inbox.setLoadingState((loadingStateProps?: CourierInboxStateLoadingFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderLoadingState!(loadingStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderLoadingState, inboxRef]);\n\n  // Render error state\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderErrorState) return;\n    queueMicrotask(() => {\n      inbox.setErrorState((errorStateProps?: CourierInboxStateErrorFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderErrorState!(errorStateProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderErrorState, inboxRef]);\n\n  // Render pagination item\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox || !props.renderPaginationItem) return;\n    queueMicrotask(() => {\n      inbox.setPaginationItem((paginationProps?: CourierInboxPaginationItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderPaginationItem!(paginationProps);\n        return reactNodeToHTMLElement(reactNode);\n      });\n    });\n  }, [props.renderPaginationItem, inboxRef]);\n\n  // Set feed type\n  useEffect(() => {\n    const inbox = inboxRef.current;\n    if (!inbox) return;\n    queueMicrotask(() => {\n      inbox.setFeedType(props.feedType || 'inbox');\n    });\n  }, [props.feedType, inboxRef]);\n\n  return (\n    <CourierClientComponent>\n      {/* @ts-ignore */}\n      <courier-inbox\n        ref={inboxRef}\n        height={props.height}\n        light-theme={props.lightTheme ? JSON.stringify(props.lightTheme) : undefined}\n        dark-theme={props.darkTheme ? JSON.stringify(props.darkTheme) : undefined}\n        mode={props.mode}\n      />\n    </CourierClientComponent>\n  );\n});\n\nCourierInbox.displayName = 'CourierInbox';","import { useEffect, useRef, forwardRef, ReactNode } from 'react';\nimport {\n  CourierInboxFeedType,\n  CourierInboxHeaderFactoryProps,\n  CourierInboxListItemActionFactoryProps,\n  CourierInboxListItemFactoryProps,\n  CourierInboxMenuButtonFactoryProps,\n  CourierInboxPopupMenu as CourierInboxPopupMenuElement,\n  CourierInboxPaginationItemFactoryProps,\n  CourierInboxPopupAlignment,\n  CourierInboxStateEmptyFactoryProps,\n  CourierInboxStateErrorFactoryProps,\n  CourierInboxStateLoadingFactoryProps,\n  CourierInboxTheme,\n} from '@trycourier/courier-ui-inbox';\nimport { reactNodeToHTMLElement } from '../utils/utils';\nimport { CourierComponentThemeMode } from '@trycourier/courier-ui-core';\nimport { CourierClientComponent } from './courier-client-component';\n\nexport interface CourierInboxPopupMenuProps {\n  /** Alignment of the popup menu: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center', 'center-right', 'center-left', 'center-center'. */\n  popupAlignment?: CourierInboxPopupAlignment;\n\n  /** Width of the popup menu container. */\n  popupWidth?: string;\n\n  /** Height of the popup menu container. */\n  popupHeight?: string;\n\n  /** CSS left position for the popup menu. */\n  left?: string;\n\n  /** CSS top position for the popup menu. */\n  top?: string;\n\n  /** CSS right position for the popup menu. */\n  right?: string;\n\n  /** CSS bottom position for the popup menu. */\n  bottom?: string;\n\n  /** Theme object for light mode. */\n  lightTheme?: CourierInboxTheme;\n\n  /** Theme object for dark mode. */\n  darkTheme?: CourierInboxTheme;\n\n  /** Theme mode: 'light', 'dark', or 'system'. */\n  mode?: CourierComponentThemeMode;\n\n  /** Type of feed to display in the popup menu ('inbox' or 'archive'). */\n  feedType?: CourierInboxFeedType;\n\n  /** Callback fired when a message is clicked. */\n  onMessageClick?: (props: CourierInboxListItemFactoryProps) => void;\n\n  /** Callback fired when a message action (e.g., button) is clicked. */\n  onMessageActionClick?: (props: CourierInboxListItemActionFactoryProps) => void;\n\n  /** Callback fired when a message is long-pressed (for mobile/gesture support). */\n  onMessageLongPress?: (props: CourierInboxListItemFactoryProps) => void;\n\n  /** Allows you to pass a custom component as the header. */\n  renderHeader?: (props: CourierInboxHeaderFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the list item. */\n  renderListItem?: (props: CourierInboxListItemFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the empty state. */\n  renderEmptyState?: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the loading state. */\n  renderLoadingState?: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the error state. */\n  renderErrorState?: (props: CourierInboxStateErrorFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the pagination list item. */\n  renderPaginationItem?: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => ReactNode;\n\n  /** Allows you to pass a custom component as the menu button. */\n  renderMenuButton?: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => ReactNode;\n}\n\nexport const CourierInboxPopupMenu = forwardRef<CourierInboxPopupMenuElement, CourierInboxPopupMenuProps>(\n  (props, ref) => {\n    // Instead of using useRef and assigning to the custom element,\n    // we use a callback ref to ensure the ref is set as soon as the element is mounted.\n    function handleRef(el: CourierInboxPopupMenuElement | null) {\n      if (ref) {\n        if (typeof ref === 'function') {\n          ref(el);\n        } else {\n          (ref as React.RefObject<CourierInboxPopupMenuElement | null>).current = el;\n        }\n      }\n      // Store the element for use in effects\n      (handleRef as any)._el = el;\n    }\n\n    // Helper to get the current element\n    function getEl(): CourierInboxPopupMenuElement | null {\n      return (handleRef as any)._el ?? null;\n    }\n\n    // Use a ref to track the last set feedType to prevent duplicate state changes\n    const lastFeedTypeRef = useRef<CourierInboxFeedType | undefined>(undefined);\n\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu) return;\n      // Only set feedType if it has changed from the last set value\n      if (props.feedType !== lastFeedTypeRef.current) {\n        lastFeedTypeRef.current = props.feedType;\n        queueMicrotask(() => {\n          menu.setFeedType?.(props.feedType ?? 'inbox');\n        });\n      }\n    }, [props.feedType]);\n\n    // Handle message click\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu) return;\n      menu.onMessageClick(props.onMessageClick);\n    }, [props.onMessageClick]);\n\n    // Handle message action click\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu) return;\n      menu.onMessageActionClick(props.onMessageActionClick);\n    }, [props.onMessageActionClick]);\n\n    // Handle message long press\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu) return;\n      menu.onMessageLongPress(props.onMessageLongPress);\n    }, [props.onMessageLongPress]);\n\n    // Render header\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderHeader) return;\n      queueMicrotask(() => {\n        menu.setHeader((headerProps?: CourierInboxHeaderFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderHeader!(headerProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderHeader]);\n\n    // Render list item\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderListItem) return;\n      queueMicrotask(() => {\n        menu.setListItem((itemProps?: CourierInboxListItemFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderListItem!(itemProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderListItem]);\n\n    // Render empty state\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderEmptyState) return;\n      queueMicrotask(() => {\n        menu.setEmptyState((emptyStateProps?: CourierInboxStateEmptyFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderEmptyState!(emptyStateProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderEmptyState]);\n\n    // Render loading state\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderLoadingState) return;\n      queueMicrotask(() => {\n        menu.setLoadingState((loadingStateProps?: CourierInboxStateLoadingFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderLoadingState!(loadingStateProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderLoadingState]);\n\n    // Render error state\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderErrorState) return;\n      queueMicrotask(() => {\n        menu.setErrorState((errorStateProps?: CourierInboxStateErrorFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderErrorState!(errorStateProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderErrorState]);\n\n    // Render pagination item\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderPaginationItem) return;\n      queueMicrotask(() => {\n        menu.setPaginationItem((paginationProps?: CourierInboxPaginationItemFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderPaginationItem!(paginationProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderPaginationItem]);\n\n    // Render menu button\n    useEffect(() => {\n      const menu = getEl();\n      if (!menu || !props.renderMenuButton) return;\n      queueMicrotask(() => {\n        menu.setMenuButton((buttonProps?: CourierInboxMenuButtonFactoryProps | undefined | null): HTMLElement => {\n          const reactNode = props.renderMenuButton!(buttonProps);\n          return reactNodeToHTMLElement(reactNode);\n        });\n      });\n    }, [props.renderMenuButton]);\n\n    return (\n      <CourierClientComponent>\n        {/* @ts-ignore */}\n        <courier-inbox-popup-menu\n          ref={handleRef}\n          popup-alignment={props.popupAlignment}\n          popup-width={props.popupWidth}\n          popup-height={props.popupHeight}\n          left={props.left}\n          top={props.top}\n          right={props.right}\n          bottom={props.bottom}\n          light-theme={props.lightTheme ? JSON.stringify(props.lightTheme) : undefined}\n          dark-theme={props.darkTheme ? JSON.stringify(props.darkTheme) : undefined}\n          mode={props.mode}\n        />\n      </CourierClientComponent>\n    );\n  }\n);\n\nCourierInboxPopupMenu.displayName = 'CourierInboxPopupMenu';"],"names":["clickMessage","archiveMessage","openMessage"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/courier-react",
-  "version": "8.0.23-beta",
+  "version": "8.0.24-beta",
   "description": "The React components for the Courier web UI",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -26,9 +26,9 @@
   "author": "Courier",
   "license": "MIT",
   "dependencies": {
-    "@trycourier/courier-js": "2.0.8-beta",
+    "@trycourier/courier-js": "2.0.9-beta",
     "@trycourier/courier-ui-core": "1.0.11-beta",
-    "@trycourier/courier-ui-inbox": "1.0.13-beta"
+    "@trycourier/courier-ui-inbox": "1.0.14-beta"
   },
   "peerDependencies": {
     "react": ">=18.0.0",