@trycourier/courier-ui-inbox 1.0.13-beta → 1.0.15

package/README.md

@@ -3,7 +3,7 @@
 ## 1. Install
 
 ```sh
-npm i @trycourier/courier-ui-inbox@1.0.13-beta
+npm install @trycourier/courier-ui-inbox@beta
 ```
 
 > **Using React?** We suggest you use [@trycourier/courier-react](../courier-react/README.md) package instead.
@@ -14,10 +14,10 @@ To use the SDK, you need to generate a JWT (JSON Web Token) for your user. **Thi
 
 **How it works:**
 
-1. **Your frontend calls your backend:**  
+1. **Your frontend calls your backend:**
    - When your app needs to authenticate a user, your frontend should make a request to your own backend (e.g., `/api/generate-courier-jwt`).
 
-2. **Your backend calls Courier to issue a JWT:**  
+2. **Your backend calls Courier to issue a JWT:**
    - In your backend endpoint, use your [Courier API Key](https://app.courier.com/settings/api-keys) to call the [Courier JWT Token Endpoint](https://www.courier.com/docs/reference/auth/issue-token) and generate a JWT for the user.
    - Your backend then returns the JWT to your frontend.
 
@@ -193,10 +193,10 @@ The fastest way to style the Inbox to match your app. This example shows unread
 
   <div style="display: flex; justify-content: center; align-items: center; padding: 100px;">
     <!-- Available alignments: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center' | 'center-right' | 'center-left' | 'center-center' -->
-    <courier-inbox-popup-menu 
+    <courier-inbox-popup-menu
       popup-alignment="top-right"
-      top="44px" 
-      right="44px" 
+      top="44px"
+      right="44px"
       popup-width="340px"
       popup-height="400px">
     </courier-inbox-popup-menu>
@@ -372,3 +372,9 @@ Customize the inbox UI with any element you want.
 ```
 
 > **Using React?** We suggest you use [@trycourier/courier-react](../courier-react/README.md) package instead.
+
+# **Share feedback with Courier**
+
+We want to make this the best SDK for managing notifications! Have an idea or feedback about our SDKs? Let us know!
+
+[Courier Web Issues](https://github.com/trycourier/courier-web/issues)

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

@@ -19,15 +19,18 @@ export declare class CourierInboxListItem extends CourierBaseElement {
     private _actionsContainer?;
     private _longPressTimeout;
     private _isLongPress;
+    private _observer?;
     private onItemClick;
     private onItemLongPress;
     private onItemActionClick;
+    private onItemVisible;
     constructor(themeManager: CourierInboxThemeManager, canClick: boolean, _canLongPress: boolean);
     private render;
+    private _setupIntersectionObserver;
+    onComponentUnmounted(): void;
     static getStyles(theme: CourierInboxTheme): string;
     private _setupHoverBehavior;
     private _setupLongPressBehavior;
-    setOnLongPress(cb: (message: InboxMessage) => void): void;
     private _getMenuOptions;
     private _showMenu;
     private _hideMenu;
@@ -35,5 +38,6 @@ export declare class CourierInboxListItem extends CourierBaseElement {
     setOnItemClick(cb: (message: InboxMessage) => void): void;
     setOnItemActionClick(cb: (message: InboxMessage, action: InboxAction) => void): void;
     setOnItemLongPress(cb: (message: InboxMessage) => void): void;
+    setOnItemVisible(cb: (message: InboxMessage) => void): void;
     private _updateContent;
 }

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

@@ -62,6 +62,7 @@ export declare class CourierInboxList extends CourierBaseElement {
     get errorProps(): any;
     get emptyProps(): any;
     private render;
+    private openVisibleMessage;
     setLoadingStateFactory(factory: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => HTMLElement): void;
     setEmptyStateFactory(factory: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => HTMLElement): void;
     setErrorStateFactory(factory: (props: CourierInboxStateErrorFactoryProps | undefined | null) => HTMLElement): void;

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

@@ -9,14 +9,29 @@ export declare class CourierInboxPopupMenu extends CourierBaseElement implements
     private _width;
     private _height;
     private _popupAlignment;
-    private _top;
-    private _right;
-    private _bottom;
-    private _left;
+    private _top?;
+    private _right?;
+    private _bottom?;
+    private _left?;
     private _themeManager;
+    /** Returns the current theme object. */
     get theme(): CourierInboxTheme;
+    /** Returns the current feed type. */
+    get currentFeed(): CourierInboxFeedType;
+    /**
+     * Set the light theme for the popup menu.
+     * @param theme The light theme object to set.
+     */
     setLightTheme(theme: CourierInboxTheme): void;
+    /**
+     * Set the dark theme for the popup menu.
+     * @param theme The dark theme object to set.
+     */
     setDarkTheme(theme: CourierInboxTheme): void;
+    /**
+     * Set the theme mode (light/dark/system).
+     * @param mode The theme mode to set.
+     */
     setMode(mode: CourierComponentThemeMode): void;
     private _triggerButton?;
     private _popup?;
@@ -31,26 +46,97 @@ export declare class CourierInboxPopupMenu extends CourierBaseElement implements
     private refreshTheme;
     static getStyles(theme: CourierInboxTheme, width: string, height: string): string;
     attributeChangedCallback(name: string, _: string, newValue: string): void;
+    /**
+     * Called when the unread count changes.
+     * @param _ The new unread count (unused).
+     */
     onUnreadCountChange(_: number): void;
+    /**
+     * Set a handler for message click events.
+     * @param handler The function to call when a message is clicked.
+     */
     onMessageClick(handler?: (props: CourierInboxListItemFactoryProps) => void): void;
+    /**
+     * Set a handler for message action click events.
+     * @param handler The function to call when a message action is clicked.
+     */
     onMessageActionClick(handler?: (props: CourierInboxListItemActionFactoryProps) => void): void;
+    /**
+     * Set a handler for message long press events.
+     * @param handler The function to call when a message is long pressed.
+     */
     onMessageLongPress(handler?: (props: CourierInboxListItemFactoryProps) => void): void;
     private isValidPosition;
     private updatePopupPosition;
+    /**
+     * Toggle the popup menu open/closed.
+     * @param event The click event that triggered the toggle.
+     */
     private togglePopup;
+    /**
+     * Close the popup menu.
+     */
     closePopup(): void;
     private handleOutsideClick;
+    /**
+     * Set the content of the popup inbox.
+     * @param element The HTMLElement to set as the content.
+     */
     setContent(element: HTMLElement): void;
+    /**
+     * Set the size of the popup menu.
+     * @param width The width to set.
+     * @param height The height to set.
+     */
     setSize(width: string, height: string): void;
+    /**
+     * Set the popup alignment/position.
+     * @param position The alignment/position to set.
+     */
     setPosition(position: CourierInboxPopupAlignment): void;
+    /**
+     * Set the feed type for the inbox.
+     * @param feedType The feed type to set.
+     */
     setFeedType(feedType: CourierInboxFeedType): void;
+    /**
+     * Set a custom header factory for the inbox.
+     * @param factory The factory function for the header.
+     */
     setHeader(factory: (props: CourierInboxHeaderFactoryProps | undefined | null) => HTMLElement): void;
+    /**
+     * Remove the custom header from the inbox.
+     */
     removeHeader(): void;
+    /**
+     * Set a custom loading state factory for the inbox.
+     * @param factory The factory function for the loading state.
+     */
     setLoadingState(factory: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => HTMLElement): void;
+    /**
+     * Set a custom empty state factory for the inbox.
+     * @param factory The factory function for the empty state.
+     */
     setEmptyState(factory: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => HTMLElement): void;
+    /**
+     * Set a custom error state factory for the inbox.
+     * @param factory The factory function for the error state.
+     */
     setErrorState(factory: (props: CourierInboxStateErrorFactoryProps | undefined | null) => HTMLElement): void;
+    /**
+     * Set a custom list item factory for the inbox.
+     * @param factory The factory function for the list item.
+     */
     setListItem(factory: (props: CourierInboxListItemFactoryProps | undefined | null) => HTMLElement): void;
+    /**
+     * Set a custom pagination item factory for the inbox.
+     * @param factory The factory function for the pagination item.
+     */
     setPaginationItem(factory: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => HTMLElement): void;
+    /**
+     * Set a custom menu button factory for the popup trigger.
+     * @param factory The factory function for the menu button.
+     */
     setMenuButton(factory: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => HTMLElement): void;
     private render;
 }

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

@@ -6,10 +6,25 @@ import { CourierInboxThemeManager } from '../types/courier-inbox-theme-manager';
 export declare class CourierInbox extends CourierBaseElement {
     static get id(): string;
     private _currentFeed;
+    /** Returns the current feed type. */
+    get currentFeed(): CourierInboxFeedType;
     private _themeManager;
+    /** Returns the current theme object. */
     get theme(): CourierInboxTheme;
+    /**
+     * Set the light theme for the inbox.
+     * @param theme The light theme object to set.
+     */
     setLightTheme(theme: CourierInboxTheme): void;
+    /**
+     * Set the dark theme for the inbox.
+     * @param theme The dark theme object to set.
+     */
     setDarkTheme(theme: CourierInboxTheme): void;
+    /**
+     * Set the theme mode (light/dark/system).
+     * @param mode The theme mode to set.
+     */
     setMode(mode: CourierComponentThemeMode): void;
     private _inboxStyle?;
     private _unreadIndicatorStyle?;
@@ -28,19 +43,65 @@ export declare class CourierInbox extends CourierBaseElement {
     onComponentUnmounted(): void;
     private refreshTheme;
     private getStyles;
+    /**
+     * Sets a custom header factory for the inbox.
+     * @param factory - A function that returns an HTMLElement to render as the header.
+     */
     setHeader(factory: (props: CourierInboxHeaderFactoryProps | undefined | null) => HTMLElement): void;
+    /**
+     * Removes the custom header factory from the inbox, reverting to the default header.
+     */
     removeHeader(): void;
+    /**
+     * Sets a custom loading state factory for the inbox list.
+     * @param factory - A function that returns an HTMLElement to render as the loading state.
+     */
     setLoadingState(factory: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => HTMLElement): void;
+    /**
+     * Sets a custom empty state factory for the inbox list.
+     * @param factory - A function that returns an HTMLElement to render as the empty state.
+     */
     setEmptyState(factory: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => HTMLElement): void;
+    /**
+     * Sets a custom error state factory for the inbox list.
+     * @param factory - A function that returns an HTMLElement to render as the error state.
+     */
     setErrorState(factory: (props: CourierInboxStateErrorFactoryProps | undefined | null) => HTMLElement): void;
+    /**
+     * Sets a custom list item factory for the inbox list.
+     * @param factory - A function that returns an HTMLElement to render as a list item.
+     */
     setListItem(factory: (props: CourierInboxListItemFactoryProps | undefined | null) => HTMLElement): void;
+    /**
+     * Sets a custom pagination item factory for the inbox list.
+     * @param factory - A function that returns an HTMLElement to render as a pagination item.
+     */
     setPaginationItem(factory: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => HTMLElement): void;
+    /**
+     * Registers a handler for message click events.
+     * @param handler - A function to be called when a message is clicked.
+     */
     onMessageClick(handler?: (props: CourierInboxListItemFactoryProps) => void): void;
+    /**
+     * Registers a handler for message action click events.
+     * @param handler - A function to be called when a message action is clicked.
+     */
     onMessageActionClick(handler?: (props: CourierInboxListItemActionFactoryProps) => void): void;
+    /**
+     * Registers a handler for message long press events.
+     * @param handler - A function to be called when a message is long-pressed.
+     */
     onMessageLongPress(handler?: (props: CourierInboxListItemFactoryProps) => void): void;
+    /**
+     * Sets the feed type for the inbox (e.g., "inbox" or "archive").
+     * @param feedType - The feed type to display.
+     */
     setFeedType(feedType: CourierInboxFeedType): void;
     private updateHeader;
     private load;
+    /**
+     * Forces a reload of the inbox data, bypassing the cache.
+     */
     refresh(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
 }