@trycourier/courier-react-components 1.0.1

package/README.md

@@ -0,0 +1,8 @@
+# `courier-react-components`
+
+> Adding Courier to a React app? Check out [`courier-react`](../courier-react/).
+>
+> Adding Courier to a React 17 app? Check out [`courier-react-17`](../courier-react-17/).
+
+This package contains React version agnostic components for Courier. `courier-react`
+uses the components here and provides a React version-specific render method.

package/dist/components/courier-client-component.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from '../../../../node_modules/react';
+interface CourierClientProps {
+    children: React.ReactNode;
+}
+export declare const CourierClientComponent: React.FC<CourierClientProps>;
+export {};

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

@@ -0,0 +1,34 @@
+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 CourierInboxComponent: import('../../../../node_modules/react').ForwardRefExoticComponent<CourierInboxProps & import('../../../../node_modules/react').RefAttributes<CourierInboxElement>>;

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

@@ -0,0 +1,48 @@
+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 CourierInboxPopupMenuComponent: import('../../../../node_modules/react').ForwardRefExoticComponent<CourierInboxPopupMenuProps & import('../../../../node_modules/react').RefAttributes<CourierInboxPopupMenuElement>>;

package/dist/hooks/use-courier.d.ts

@@ -0,0 +1,34 @@
+import { Courier, CourierProps, InboxMessage } from '@trycourier/courier-js';
+import { CourierInboxFeedType, InboxDataSet } from '@trycourier/courier-ui-inbox';
+type AuthenticationHooks = {
+    userId?: string;
+    signIn: (props: CourierProps) => void;
+    signOut: () => void;
+};
+type InboxHooks = {
+    load: (props?: {
+        feedType: CourierInboxFeedType;
+        canUseCache: boolean;
+    }) => Promise<void>;
+    fetchNextPageOfMessages: (props: {
+        feedType: CourierInboxFeedType;
+    }) => Promise<InboxDataSet | null>;
+    setPaginationLimit: (limit: number) => void;
+    readMessage: (message: InboxMessage) => Promise<void>;
+    unreadMessage: (message: InboxMessage) => Promise<void>;
+    clickMessage: (message: InboxMessage) => Promise<void>;
+    archiveMessage: (message: InboxMessage) => Promise<void>;
+    openMessage: (message: InboxMessage) => Promise<void>;
+    unarchiveMessage: (message: InboxMessage) => Promise<void>;
+    readAllMessages: () => Promise<void>;
+    inbox?: InboxDataSet;
+    archive?: InboxDataSet;
+    unreadCount?: number;
+    error?: Error;
+};
+export declare const useCourier: () => {
+    shared: Courier;
+    auth: AuthenticationHooks;
+    inbox: InboxHooks;
+};
+export {};

package/dist/index.cjs

@@ -0,0 +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"),n=require("react/jsx-runtime"),s=({children:e})=>{const[r,s]=t.useState(!1);return t.useEffect((()=>{s(!0)}),[]),"undefined"==typeof window?null:r?n.jsx(n.Fragment,{children:e}):null},o=t.createContext(null),a=t.forwardRef(((e,r)=>{const a=t.useContext(o);if(!a)throw new Error("RenderContext not found. Ensure CourierInbox is wrapped in a CourierRenderContext.");const i=t.useRef(null);function u(){return i.current}t.useEffect((()=>{const r=u();r&&r.onMessageClick(e.onMessageClick)}),[e.onMessageClick]),t.useEffect((()=>{const r=u();r&&r.onMessageActionClick(e.onMessageActionClick)}),[e.onMessageActionClick]),t.useEffect((()=>{const r=u();r&&r.onMessageLongPress(e.onMessageLongPress)}),[e.onMessageLongPress]),t.useEffect((()=>{const r=u();r&&e.renderHeader&&queueMicrotask((()=>{r.setHeader((r=>{const t=e.renderHeader(r);return a(t)}))}))}),[e.renderHeader]),t.useEffect((()=>{const r=u();r&&e.renderListItem&&queueMicrotask((()=>{r.setListItem((r=>{const t=e.renderListItem(r);return a(t)}))}))}),[e.renderListItem]),t.useEffect((()=>{const r=u();r&&e.renderEmptyState&&queueMicrotask((()=>{r.setEmptyState((r=>{const t=e.renderEmptyState(r);return a(t)}))}))}),[e.renderEmptyState]),t.useEffect((()=>{const r=u();r&&e.renderLoadingState&&queueMicrotask((()=>{r.setLoadingState((r=>{const t=e.renderLoadingState(r);return a(t)}))}))}),[e.renderLoadingState]),t.useEffect((()=>{const r=u();r&&e.renderErrorState&&queueMicrotask((()=>{r.setErrorState((r=>{const t=e.renderErrorState(r);return a(t)}))}))}),[e.renderErrorState]),t.useEffect((()=>{const r=u();r&&e.renderPaginationItem&&queueMicrotask((()=>{r.setPaginationItem((r=>{const t=e.renderPaginationItem(r);return a(t)}))}))}),[e.renderPaginationItem]),t.useEffect((()=>{const r=u();r&&queueMicrotask((()=>{r.setFeedType(e.feedType||"inbox")}))}),[e.feedType]);const c=n.jsx("courier-inbox",{ref:function(e){r&&("function"==typeof r?r(e):r.current=e),i.current=e},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});return n.jsx(s,{children:c})})),i=t.forwardRef(((e,r)=>{const a=t.useContext(o);if(!a)throw new Error("RenderContext not found. Ensure CourierInboxPopupMenu is wrapped in a CourierRenderContext.");const i=t.useRef(null);function u(){return i.current}const c=t.useRef(void 0);t.useEffect((()=>{const r=u();r&&e.feedType!==c.current&&(c.current=e.feedType,queueMicrotask((()=>{var t;null==(t=r.setFeedType)||t.call(r,e.feedType??"inbox")})))}),[e.feedType]),t.useEffect((()=>{const r=u();r&&r.onMessageClick(e.onMessageClick)}),[e.onMessageClick]),t.useEffect((()=>{const r=u();r&&r.onMessageActionClick(e.onMessageActionClick)}),[e.onMessageActionClick]),t.useEffect((()=>{const r=u();r&&r.onMessageLongPress(e.onMessageLongPress)}),[e.onMessageLongPress]),t.useEffect((()=>{const r=u();r&&e.renderHeader&&queueMicrotask((()=>{r.setHeader((r=>{const t=e.renderHeader(r);return a(t)}))}))}),[e.renderHeader]),t.useEffect((()=>{const r=u();r&&e.renderListItem&&queueMicrotask((()=>{r.setListItem((r=>{const t=e.renderListItem(r);return a(t)}))}))}),[e.renderListItem]),t.useEffect((()=>{const r=u();r&&e.renderEmptyState&&queueMicrotask((()=>{r.setEmptyState((r=>{const t=e.renderEmptyState(r);return a(t)}))}))}),[e.renderEmptyState]),t.useEffect((()=>{const r=u();r&&e.renderLoadingState&&queueMicrotask((()=>{r.setLoadingState((r=>{const t=e.renderLoadingState(r);return a(t)}))}))}),[e.renderLoadingState]),t.useEffect((()=>{const r=u();r&&e.renderErrorState&&queueMicrotask((()=>{r.setErrorState((r=>{const t=e.renderErrorState(r);return a(t)}))}))}),[e.renderErrorState]),t.useEffect((()=>{const r=u();r&&e.renderPaginationItem&&queueMicrotask((()=>{r.setPaginationItem((r=>{const t=e.renderPaginationItem(r);return a(t)}))}))}),[e.renderPaginationItem]),t.useEffect((()=>{const r=u();r&&e.renderMenuButton&&queueMicrotask((()=>{r.setMenuButton((r=>{const t=e.renderMenuButton(r);return a(t)}))}))}),[e.renderMenuButton]);const d=n.jsx("courier-inbox-popup-menu",{ref:function(e){r&&("function"==typeof r?r(e):r.current=e),i.current=e},"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});return n.jsx(s,{children:d})}));exports.CourierInboxComponent=a,exports.CourierInboxPopupMenuComponent=i,exports.CourierRenderContext=o,exports.useCourier=()=>{const n=r=>e.Courier.shared.signIn(r),s=()=>e.Courier.shared.signOut(),o=e=>r.CourierInboxDatastore.shared.load(e),a=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}),h=e=>r.CourierInboxDatastore.shared.unarchiveMessage({message:e}),M=()=>r.CourierInboxDatastore.shared.readAllMessages(),[p,m]=t.useState({userId:void 0,signIn:n,signOut:s}),[l,C]=t.useState({load:o,fetchNextPageOfMessages:a,setPaginationLimit:i,readMessage:u,unreadMessage:c,clickMessage:d,archiveMessage:g,openMessage:f,unarchiveMessage:h,readAllMessages:M});t.useEffect((()=>{const t=e.Courier.shared.addAuthenticationListener((()=>x())),n=new r.CourierInboxDataStoreListener({onError:e=>E(e),onDataSetChange:()=>E(),onPageAdded:()=>E(),onMessageAdd:()=>E(),onMessageRemove:()=>E(),onMessageUpdate:()=>E(),onUnreadCountChange:()=>E()});return r.CourierInboxDatastore.shared.addDataStoreListener(n),x(),E(),()=>{t.remove(),n.remove()}}),[]);const x=()=>{var r;const t=null==(r=e.Courier.shared.client)?void 0:r.options;m({userId:null==t?void 0:t.userId,signIn:n,signOut:s})},E=e=>{const t=r.CourierInboxDatastore.shared;C({load:o,fetchNextPageOfMessages:a,setPaginationLimit:i,readMessage:u,unreadMessage:c,clickMessage:d,archiveMessage:g,openMessage:f,unarchiveMessage:h,readAllMessages:M,inbox:t.inboxDataSet,archive:t.archiveDataSet,unreadCount:t.unreadCount,error:e})};return{shared:e.Courier.shared,auth:p,inbox:l}};
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/components/courier-client-component.tsx","../src/context/render-context.ts","../src/components/courier-inbox-component.tsx","../src/components/courier-inbox-popup-menu-component.tsx","../src/hooks/use-courier.tsx"],"sourcesContent":["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 { createContext, ReactNode } from \"react\";\n\ntype RenderFn = (node: ReactNode) => HTMLElement;\n\n/**\n * Context providing a function to render a React component.\n *\n * Courier's React package renders as follows:\n *\n *   - React engine (client application)\n *     - Courier React components\n *       - Courier web components\n *         - [Optional] User-provided React components (ex. a list item)\n *\n * By default, React will not render the user-provided React components within Courier's\n * web components. We instead manually render the user-provided React components and inject\n * them into the Courier web components.\n *\n * Client rendering changed between React 17 and 18, so the SDKs provide React version-specific\n * rendering functions. See\n * https://18.react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis.\n */\nexport const CourierRenderContext = createContext<RenderFn | null>(null);\n","import { useRef, useEffect, forwardRef, ReactNode, useContext } from \"react\";\nimport { CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxTheme, CourierInbox as CourierInboxElement, CourierInboxHeaderFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxFeedType } from \"@trycourier/courier-ui-inbox\";\nimport { CourierComponentThemeMode } from \"@trycourier/courier-ui-core\";\nimport { CourierClientComponent } from \"./courier-client-component\";\nimport { CourierRenderContext } from \"../context/render-context\";\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 CourierInboxComponent = forwardRef<CourierInboxElement, CourierInboxProps>((props, ref) => {\n  const render = useContext(CourierRenderContext);\n  if (!render) {\n    throw new Error(\"RenderContext not found. Ensure CourierInbox is wrapped in a CourierRenderContext.\");\n  }\n\n  // Element ref for use in effects, updated by handleRef.\n  const inboxRef = useRef<CourierInboxElement | null>(null);\n\n  // Callback ref passed to rendered component, used to propagate the DOM element's ref to the parent component.\n  // We use a callback ref (rather than a React.RefObject) since we want the parent ref to be up-to-date with\n  // rendered component. Updating the parent ref via useEffect does not work, since mutating a RefObject\n  // does not trigger useEffect (see https://stackoverflow.com/a/60476525).\n  function handleRef(el: CourierInboxElement | null) {\n    if (ref) {\n\n      // Propagate ref to ref callback functions\n      if (typeof ref === 'function') {\n        ref(el);\n      } else {\n        // Propagate ref to ref objects\n        // @ts-ignore - RefObject.current is readonly in React 17, however it's not frozen and is equivalent the widened type MutableRefObject\n        (ref as React.RefObject<CourierInboxElement | null>).current = el;\n      }\n    }\n\n    // Store the element for use in effects\n    inboxRef.current = el;\n  }\n\n  // Helper to get the current element\n  function getEl(): CourierInboxElement | null {\n    return inboxRef.current;\n  }\n\n  // Handle message click\n  useEffect(() => {\n    const inbox = getEl();\n    if (!inbox) return;\n    inbox.onMessageClick(props.onMessageClick);\n  }, [props.onMessageClick]);\n\n  // Handle message action click\n  useEffect(() => {\n    const inbox = getEl();\n    if (!inbox) return;\n    inbox.onMessageActionClick(props.onMessageActionClick);\n  }, [props.onMessageActionClick]);\n\n  // Handle message long press\n  useEffect(() => {\n    const inbox = getEl();\n    if (!inbox) return;\n    inbox.onMessageLongPress(props.onMessageLongPress);\n  }, [props.onMessageLongPress]);\n\n  // Render header\n  useEffect(() => {\n    const inbox = getEl();\n    if (!inbox || !props.renderHeader) return;\n    queueMicrotask(() => {\n      inbox.setHeader((headerProps?: CourierInboxHeaderFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderHeader!(headerProps);\n        return render(reactNode);\n      });\n    });\n  }, [props.renderHeader]);\n\n  // Render list item\n  useEffect(() => {\n    const inbox = getEl();\n    if (!inbox || !props.renderListItem) return;\n    queueMicrotask(() => {\n      inbox.setListItem((itemProps?: CourierInboxListItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderListItem!(itemProps);\n        return render(reactNode);\n      });\n    });\n  }, [props.renderListItem]);\n\n  // Render empty state\n  useEffect(() => {\n    const inbox = getEl();\n    if (!inbox || !props.renderEmptyState) return;\n    queueMicrotask(() => {\n      inbox.setEmptyState((emptyStateProps?: CourierInboxStateEmptyFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderEmptyState!(emptyStateProps);\n        return render(reactNode);\n      });\n    });\n  }, [props.renderEmptyState]);\n\n  // Render loading state\n  useEffect(() => {\n    const inbox = getEl();\n    if (!inbox || !props.renderLoadingState) return;\n    queueMicrotask(() => {\n      inbox.setLoadingState((loadingStateProps?: CourierInboxStateLoadingFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderLoadingState!(loadingStateProps);\n        return render(reactNode);\n      });\n    });\n  }, [props.renderLoadingState]);\n\n  // Render error state\n  useEffect(() => {\n    const inbox = getEl();\n    if (!inbox || !props.renderErrorState) return;\n    queueMicrotask(() => {\n      inbox.setErrorState((errorStateProps?: CourierInboxStateErrorFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderErrorState!(errorStateProps);\n        return render(reactNode);\n      });\n    });\n  }, [props.renderErrorState]);\n\n  // Render pagination item\n  useEffect(() => {\n    const inbox = getEl();\n    if (!inbox || !props.renderPaginationItem) return;\n    queueMicrotask(() => {\n      inbox.setPaginationItem((paginationProps?: CourierInboxPaginationItemFactoryProps | undefined | null): HTMLElement => {\n        const reactNode = props.renderPaginationItem!(paginationProps);\n        return render(reactNode);\n      });\n    });\n  }, [props.renderPaginationItem]);\n\n  // Set feed type\n  useEffect(() => {\n    const inbox = getEl();\n    if (!inbox) return;\n    queueMicrotask(() => {\n      inbox.setFeedType(props.feedType || 'inbox');\n    });\n  }, [props.feedType]);\n\n  const children = (\n    /* @ts-ignore */\n    <courier-inbox\n      ref={handleRef}\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  );\n\n  return (\n    <CourierClientComponent children={children} />\n  );\n});\n","import { useEffect, useRef, forwardRef, ReactNode, useContext } 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 { CourierComponentThemeMode } from '@trycourier/courier-ui-core';\nimport { CourierClientComponent } from './courier-client-component';\nimport { CourierRenderContext } from '../context/render-context';\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 CourierInboxPopupMenuComponent = forwardRef<CourierInboxPopupMenuElement, CourierInboxPopupMenuProps>(\n  (props, ref) => {\n    const render = useContext(CourierRenderContext);\n    if (!render) {\n      throw new Error(\"RenderContext not found. Ensure CourierInboxPopupMenu is wrapped in a CourierRenderContext.\");\n    }\n\n    // Element ref for use in effects, updated by handleRef.\n    const inboxRef = useRef<CourierInboxPopupMenuElement | null>(null);\n\n    // Callback ref passed to rendered component, used to propagate the DOM element's ref to the parent component.\n    // We use a callback ref (rather than a React.RefObject) since we want the parent ref to be up-to-date with\n    // rendered component. Updating the parent ref via useEffect does not work, since mutating a RefObject\n    // does not trigger useEffect (see https://stackoverflow.com/a/60476525).\n    function handleRef(el: CourierInboxPopupMenuElement | null) {\n      if (ref) {\n        if (typeof ref === 'function') {\n          ref(el);\n        } else {\n          // @ts-ignore - RefObject.current is readonly in React 17, however it's not frozen and is equivalent the widened type MutableRefObject\n          (ref as React.RefObject<CourierInboxPopupMenuElement | null>).current = el;\n        }\n      }\n\n      // Store the element for use in effects\n      inboxRef.current = el;\n    }\n\n    // Helper to get the current element\n    function getEl(): CourierInboxPopupMenuElement | null {\n      return inboxRef.current;\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 render(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 render(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 render(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 render(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 render(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 render(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 render(reactNode);\n        });\n      });\n    }, [props.renderMenuButton]);\n\n    const children = (\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    );\n\n    return (\n      <CourierClientComponent children={children} />\n    );\n  }\n);\n","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":["CourierClientComponent","children","isMounted","setIsMounted","useState","useEffect","window","CourierRenderContext","createContext","CourierInboxComponent","forwardRef","props","ref","render","useContext","Error","inboxRef","useRef","getEl","current","inbox","onMessageClick","onMessageActionClick","onMessageLongPress","renderHeader","queueMicrotask","setHeader","headerProps","reactNode","renderListItem","setListItem","itemProps","renderEmptyState","setEmptyState","emptyStateProps","renderLoadingState","setLoadingState","loadingStateProps","renderErrorState","setErrorState","errorStateProps","renderPaginationItem","setPaginationItem","paginationProps","setFeedType","feedType","jsx","el","height","lightTheme","JSON","stringify","darkTheme","mode","CourierInboxPopupMenuComponent","lastFeedTypeRef","menu","_a","call","renderMenuButton","setMenuButton","buttonProps","popupAlignment","popupWidth","popupHeight","left","top","right","bottom","signIn","Courier","shared","signOut","loadInbox","CourierInboxDatastore","load","fetchNextPageOfMessages","setPaginationLimit","limit","paginationLimit","readMessage","message","unreadMessage","clickMessage","archiveMessage","openMessage","unarchiveMessage","readAllMessages","auth","setAuth","React","userId","setInbox","listener","addAuthenticationListener","refreshAuth","inboxListener","CourierInboxDataStoreListener","onError","error","refreshInbox","onDataSetChange","onPageAdded","onMessageAdd","onMessageRemove","onMessageUpdate","onUnreadCountChange","addDataStoreListener","remove","options","client","datastore","inboxDataSet","archive","archiveDataSet","unreadCount"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { useCourier } from './hooks/use-courier';
+export { CourierInboxComponent } from './components/courier-inbox-component';
+export { CourierInboxPopupMenuComponent } from './components/courier-inbox-popup-menu-component';
+export type { CourierInboxProps } from './components/courier-inbox-component';
+export type { CourierInboxPopupMenuProps, } from './components/courier-inbox-popup-menu-component';
+export { CourierRenderContext } from './context/render-context';

package/dist/index.mjs

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