@trycourier/courier-ui-inbox 1.2.3 → 2.0.0

package/dist/types/courier-inbox-theme.d.ts

@@ -3,10 +3,6 @@ export type CourierInboxFontTheme = CourierFontTheme;
 export type CourierInboxIconTheme = CourierIconTheme;
 export type CourierInboxButtonTheme = CourierButtonTheme;
 export type CourierInboxIconButtonTheme = CourierIconButtonTheme;
-export type CourierInboxFilterItemTheme = {
-    icon?: CourierInboxIconTheme;
-    text?: string;
-};
 export type CourierInboxUnreadDotIndicatorTheme = {
     backgroundColor?: string;
     borderRadius?: string;
@@ -22,14 +18,20 @@ export type CourierInboxUnreadCountIndicatorTheme = {
 export type CourierInboxMenuButtonTheme = CourierInboxIconButtonTheme & {
     unreadDotIndicator?: CourierInboxUnreadDotIndicatorTheme;
 };
+export type CourierInboxAnimationTheme = {
+    transition?: string;
+    initialTransform?: string;
+    visibleTransform?: string;
+};
 export type CourierInboxPopupTheme = {
     backgroundColor?: string;
     border?: string;
     borderRadius?: string;
     shadow?: string;
+    animation?: CourierInboxAnimationTheme;
     list?: {
         font?: CourierInboxFontTheme;
-        selectionIcon?: CourierInboxIconTheme;
+        selectedIcon?: CourierInboxIconTheme;
         hoverBackgroundColor?: string;
         activeBackgroundColor?: string;
         divider?: string;
@@ -40,6 +42,7 @@ export type CourierInboxListItemTheme = {
     backgroundColor?: string;
     hoverBackgroundColor?: string;
     activeBackgroundColor?: string;
+    transition?: string;
     title?: CourierInboxFontTheme;
     subtitle?: CourierInboxFontTheme;
     time?: CourierInboxFontTheme;
@@ -60,6 +63,7 @@ export type CourierInboxListItemTheme = {
         border?: string;
         borderRadius?: string;
         shadow?: string;
+        animation?: CourierInboxAnimationTheme;
         longPress?: {
             displayDuration?: number;
             vibrationDuration?: number;
@@ -95,16 +99,49 @@ export type CourierMenuItemTheme = {
     icon?: CourierInboxIconTheme;
     text?: string;
 };
-export type CourierFilterMenuTheme = {
-    button?: CourierInboxIconButtonTheme;
-    inbox?: CourierMenuItemTheme;
-    archive?: CourierMenuItemTheme;
-};
 export type CourierActionMenuTheme = {
     button?: CourierInboxIconButtonTheme;
     markAllRead?: CourierMenuItemTheme;
     archiveAll?: CourierMenuItemTheme;
     archiveRead?: CourierMenuItemTheme;
+    animation?: CourierInboxAnimationTheme;
+    menu?: CourierInboxPopupTheme;
+};
+export type CourierInboxTabsBorderRadius = string | {
+    topLeft?: string;
+    topRight?: string;
+    bottomLeft?: string;
+    bottomRight?: string;
+};
+export type CourierInboxListScrollbarTheme = {
+    trackBackgroundColor?: string;
+    thumbColor?: string;
+    thumbHoverColor?: string;
+    width?: string;
+    height?: string;
+    borderRadius?: string;
+};
+export type CourierInboxTabsTheme = {
+    borderRadius?: CourierInboxTabsBorderRadius;
+    transition?: string;
+    default?: {
+        backgroundColor?: string;
+        hoverBackgroundColor?: string;
+        activeBackgroundColor?: string;
+        font?: CourierInboxFontTheme;
+        indicatorColor?: string;
+        indicatorHeight?: string;
+        unreadIndicator?: CourierInboxUnreadCountIndicatorTheme;
+    };
+    selected?: {
+        backgroundColor?: string;
+        hoverBackgroundColor?: string;
+        activeBackgroundColor?: string;
+        font?: CourierInboxFontTheme;
+        indicatorColor?: string;
+        indicatorHeight?: string;
+        unreadIndicator?: CourierInboxUnreadCountIndicatorTheme;
+    };
 };
 export type CourierInboxTheme = {
     popup?: {
@@ -114,26 +151,33 @@ export type CourierInboxTheme = {
             borderRadius?: string;
             border?: string;
             shadow?: string;
+            animation?: CourierInboxAnimationTheme;
         };
     };
     inbox?: {
         header?: {
             backgroundColor?: string;
             shadow?: string;
-            filters?: {
-                font?: CourierInboxFontTheme;
-                inbox?: CourierInboxFilterItemTheme;
-                archive?: CourierInboxFilterItemTheme;
-                unreadIndicator?: CourierInboxUnreadCountIndicatorTheme;
-            };
-            menus?: {
-                popup?: CourierInboxPopupTheme;
-                filters?: CourierFilterMenuTheme;
-                actions?: CourierActionMenuTheme;
+            border?: string;
+            feeds?: {
+                button?: {
+                    selectedFeedIconColor?: string;
+                    font?: CourierInboxFontTheme;
+                    changeFeedIcon?: CourierIconTheme;
+                    unreadCountIndicator?: CourierInboxUnreadCountIndicatorTheme;
+                    hoverBackgroundColor?: string;
+                    activeBackgroundColor?: string;
+                    transition?: string;
+                };
+                menu?: CourierInboxPopupTheme;
+                tabs?: CourierInboxTabsTheme;
             };
+            tabs?: CourierInboxTabsTheme;
+            actions?: CourierActionMenuTheme;
         };
         list?: {
             backgroundColor?: string;
+            scrollbar?: CourierInboxListScrollbarTheme;
             item?: CourierInboxListItemTheme;
         };
         loading?: CourierInboxSkeletonLoadingStateTheme;

package/dist/types/factories.d.ts

@@ -1,18 +1,30 @@
 import { InboxAction, InboxMessage } from '@trycourier/courier-js';
-import { CourierInboxFeedType } from './feed-type';
+import { CourierInboxDatasetFilter } from './inbox-data-set';
 export type CourierInboxHeaderFactoryProps = {
-    feedType: CourierInboxFeedType;
+    feeds: CourierInboxHeaderFeed[];
+};
+export type CourierInboxHeaderFeed = {
+    feedId: string;
+    title: string;
+    iconSVG?: string;
+    tabs: CourierInboxHeaderFeedTab[];
+    isSelected: boolean;
+};
+export type CourierInboxHeaderFeedTab = {
+    datasetId: string;
+    title: string;
     unreadCount: number;
-    messageCount: number;
+    isSelected: boolean;
+    filter: CourierInboxDatasetFilter;
 };
 export type CourierInboxStateLoadingFactoryProps = {
-    feedType: CourierInboxFeedType;
+    datasetId: string;
 };
 export type CourierInboxStateEmptyFactoryProps = {
-    feedType: CourierInboxFeedType;
+    datasetId: string;
 };
 export type CourierInboxStateErrorFactoryProps = {
-    feedType: CourierInboxFeedType;
+    datasetId: string;
     error: Error;
 };
 export type CourierInboxListItemFactoryProps = {
@@ -25,8 +37,9 @@ export type CourierInboxListItemActionFactoryProps = {
     index: number;
 };
 export type CourierInboxPaginationItemFactoryProps = {
-    feedType: CourierInboxFeedType;
+    datasetId: string;
 };
 export type CourierInboxMenuButtonFactoryProps = {
-    unreadCount: number;
+    totalUnreadCount: number;
+    feeds: CourierInboxHeaderFeed[];
 };

package/dist/types/inbox-data-set.d.ts

@@ -1,8 +1,117 @@
 import { InboxMessage } from '@trycourier/courier-js';
-import { CourierInboxFeedType } from './feed-type';
 export type InboxDataSet = {
-    feedType: CourierInboxFeedType;
+    id: string;
     messages: InboxMessage[];
+    unreadCount: number;
     canPaginate: boolean;
     paginationCursor: string | null;
 };
+/**
+ * The set of message filters.
+ *
+ * Filters are AND'd together to produce a set of messages.
+ * For example, if the filter is `{ archived: true, status: 'read' }`
+ * the filter will produce messages that are archived AND read.
+ */
+export type CourierInboxDatasetFilter = {
+    /**
+     * The set of tags to match to a message's tags. If a message has any of the tags,
+     * the message will be included in the dataset.
+     */
+    tags?: string[];
+    /** Whether to include archived messages. Defaults to false if unset. */
+    archived?: boolean;
+    status?: 'read' | 'unread';
+};
+/**
+ * A tab represents a filtered view of messages within a feed.
+ *
+ * Each tab corresponds to a dataset in the CourierInboxDatastore. When feeds are
+ * registered via `CourierInboxDatastore.registerFeeds()`, each tab's `datasetId`
+ * is used to create a dataset that applies the tab's filter to the message store.
+ * This dataset ID is then used throughout the system to:
+ * - Identify which dataset a tab displays
+ * - Match datastore events (message add/remove/update, unread count changes) to their corresponding tabs
+ * - Programmatically select tabs via `CourierInbox.selectTab()`
+ * - Fetch paginated messages for a specific tab
+ * - Update unread count badges on tabs
+ *
+ * @example
+ * ```typescript
+ * {
+ *   datasetId: 'inbox',  // Used to create and reference the dataset in the datastore and to select the tab
+ *   title: 'Inbox',      // Display name shown in the UI
+ *   filter: {}           // No filter = all unarchived messages
+ * }
+ * ```
+ */
+export type CourierInboxTab = {
+    /**
+     * The unique identifier that links this tab to its corresponding dataset in the datastore.
+     *
+     * This ID is used as the key when creating datasets from feeds, and must be unique
+     * across all tabs in all feeds. It's recommended to use a slug-ified version of the
+     * tab's title (e.g., `'my-tab'` for title `"My Tab"`).
+     *
+     * When a tab is selected, this ID is used to:
+     * - Load messages from the corresponding dataset via `CourierInboxDatastore.getDatasetById()`
+     * - Listen for datastore events specific to this dataset
+     * - Update the tab's unread count badge when the dataset's unread count changes
+     */
+    datasetId: string;
+    /** The display name for this tab. */
+    title: string;
+    /** The message filters to apply to this tab. */
+    filter: CourierInboxDatasetFilter;
+};
+/**
+ * A feed is a container that groups related tabs together in the inbox UI.
+ *
+ * Feeds provide a way to organize tabs into logical sections (e.g., "Inbox", "Archive", "Notifications").
+ * Each feed appears as a selectable option in the inbox header, and when selected, displays its
+ * associated tabs. When feeds are registered via `CourierInboxDatastore.registerFeeds()`, all tabs
+ * from all feeds are flattened and used to create datasets in the datastore. The feed itself doesn't
+ * create a dataset - only the tabs within it do.
+ *
+ * The `feedId` is used throughout the system to:
+ * - Programmatically select feeds via `CourierInbox.selectFeed()`
+ * - Track which feed is currently active in the inbox
+ * - Map feeds to their default (first) tab for navigation
+ * - Display feeds in the header UI with selection state
+ * - Validate that tabs belong to the current feed when selecting them
+ *
+ * @example
+ * ```typescript
+ * {
+ *   feedId: 'inbox',           // Used to select and identify this feed
+ *   title: 'Inbox',            // Display name shown in the header
+ *   iconSVG: '<svg>...</svg>', // Optional icon for the feed button
+ *   tabs: [
+ *     { datasetId: 'inbox', title: 'Inbox', filter: {} },
+ *     { datasetId: 'unread', title: 'Unread', filter: { status: 'unread' } }
+ *   ]
+ * }
+ * ```
+ */
+export type CourierInboxFeed = {
+    /**
+     * The unique identifier for this feed, used to programmatically select and reference it.
+     *
+     * This ID must be unique among all feeds. It's used to:
+     * - Select feeds programmatically via `CourierInbox.selectFeed(feedId)`
+     * - Track the currently active feed in the inbox component
+     * - Map feeds to their default tabs for navigation
+     * - Display feeds in the header with proper selection state
+     * - Validate tab selections (ensuring tabs belong to the current feed)
+     *
+     * It's recommended to use a slug-ified version of the feed's title
+     * (e.g., `'my-inbox'` for title `"My Inbox"`).
+     */
+    feedId: string;
+    /** The display name for this feed. */
+    title: string;
+    /** The icon for this feed as an SVG. */
+    iconSVG?: string;
+    /** The tabs that make up this feed. */
+    tabs: CourierInboxTab[];
+};

package/dist/types/inbox-defaults.d.ts

@@ -0,0 +1,39 @@
+import { CourierInboxFeed } from './inbox-data-set';
+/**
+ * Header action ID types.
+ */
+export type CourierInboxHeaderActionId = 'readAll' | 'archiveRead' | 'archiveAll';
+/**
+ * List item action ID types.
+ */
+export type CourierInboxListItemActionId = 'read_unread' | 'archive_unarchive';
+/**
+ * Configuration for a header action.
+ */
+export type CourierInboxHeaderAction = {
+    id: CourierInboxHeaderActionId;
+    iconSVG?: string;
+    text?: string;
+};
+/**
+ * Configuration for a list item action.
+ */
+export type CourierInboxListItemAction = {
+    id: CourierInboxListItemActionId;
+    readIconSVG?: string;
+    unreadIconSVG?: string;
+    archiveIconSVG?: string;
+    unarchiveIconSVG?: string;
+};
+/**
+ * Returns the default feeds for the inbox.
+ */
+export declare function defaultFeeds(): CourierInboxFeed[];
+/**
+ * Returns the default header actions.
+ */
+export declare function defaultActions(): CourierInboxHeaderAction[];
+/**
+ * Returns the default list item actions.
+ */
+export declare function defaultListItemActions(): CourierInboxListItemAction[];

package/dist/types/snapshots.d.ts

@@ -1,10 +1,16 @@
 import { InboxMessage } from '@trycourier/courier-js';
 import { InboxDataSet } from './inbox-data-set';
+/**
+ * @deprecated - this type has been superceded by the snapshot interface in inbox-datastore.ts
+ */
 export type MessageSnapshot = {
     message: InboxMessage;
     archiveIndex?: number;
     inboxIndex?: number;
 };
+/**
+ * @deprecated - this type has been superceded by the snapshot interface in inbox-datastore.ts
+ */
 export type DataSetSnapshot = {
     unreadCount: number;
     inbox?: InboxDataSet;

package/dist/utils/utils.d.ts

@@ -18,4 +18,11 @@ export declare function copyInboxAction(action: InboxAction): InboxAction;
  * @returns A copy of the inbox data set
  */
 export declare function copyInboxDataSet(dataSet?: InboxDataSet): InboxDataSet | undefined;
+/**
+ * Compare the mutable fields of two InboxMessages.
+ * @param message1 - The first inbox message to compare
+ * @param message2 - The second inbox message to compare
+ * @returns True if the mutable fields are equal, false otherwise
+ */
+export declare function mutableInboxMessageFieldsEqual(message1: InboxMessage, message2: InboxMessage): boolean;
 export declare function getMessageTime(message: InboxMessage): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/courier-ui-inbox",
-  "version": "1.2.3",
+  "version": "2.0.0",
   "description": "Inbox components for the Courier web UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -31,8 +31,8 @@
     "dist"
   ],
   "dependencies": {
-    "@trycourier/courier-js": "2.1.3",
-    "@trycourier/courier-ui-core": "1.0.14"
+    "@trycourier/courier-js": "3.0.0",
+    "@trycourier/courier-ui-core": "2.0.0"
   },
   "devDependencies": {
     "@types/jest": "29.5.14",

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

@@ -1,23 +0,0 @@
-import { CourierBaseElement } from '@trycourier/courier-ui-core';
-import { CourierInboxMenuOption } from './courier-inbox-option-menu';
-import { CourierInboxFeedType } from '../types/feed-type';
-import { CourierInboxThemeManager } from '../types/courier-inbox-theme-manager';
-import { CourierInboxTheme } from '../types/courier-inbox-theme';
-export declare class CourierInboxHeaderTitle extends CourierBaseElement {
-    static get id(): string;
-    private _themeSubscription;
-    private _option;
-    private _feedType?;
-    private _style?;
-    private _titleElement?;
-    private _iconElement?;
-    private _unreadBadge?;
-    private get theme();
-    constructor(themeManager: CourierInboxThemeManager, option: CourierInboxMenuOption);
-    static getStyles(theme: CourierInboxTheme): string;
-    onComponentMounted(): void;
-    onComponentUnmounted(): void;
-    private refreshTheme;
-    updateSelectedOption(option: CourierInboxMenuOption, feedType: CourierInboxFeedType, unreadCount: number): void;
-    private updateFilter;
-}

package/dist/datastore/datastore.d.ts

@@ -1,114 +0,0 @@
-import { InboxMessage } from '@trycourier/courier-js';
-import { InboxDataSet } from '../types/inbox-data-set';
-import { CourierInboxDataStoreListener } from './datastore-listener';
-import { CourierInboxFeedType } from '../types/feed-type';
-export declare class CourierInboxDatastore {
-    private static instance;
-    private _inboxDataSet?;
-    private _archiveDataSet?;
-    private _dataStoreListeners;
-    private _unreadCount?;
-    private _removeMessageEventListener?;
-    private isPaginatingInbox;
-    private isPaginatingArchive;
-    static get shared(): CourierInboxDatastore;
-    get unreadCount(): number;
-    get inboxDataSet(): InboxDataSet;
-    get archiveDataSet(): InboxDataSet;
-    addDataStoreListener(listener: CourierInboxDataStoreListener): void;
-    removeDataStoreListener(listener: CourierInboxDataStoreListener): void;
-    private fetchCachableDataSet;
-    private fetchUnreadCount;
-    load(props?: {
-        canUseCache: boolean;
-    }): Promise<void>;
-    listenForUpdates(): Promise<void>;
-    private connectSocket;
-    /**
-     * Get a message by messageId from the inbox or archive data set
-     * @param props - The message ID
-     * @returns The message or undefined if it is not found
-     */
-    private getMessage;
-    /**
-     * Fetch the next page of messages
-     * @param props - The feed type
-     * @returns The next page of messages or null if there is no next page
-     */
-    fetchNextPageOfMessages(props: {
-        feedType: CourierInboxFeedType;
-    }): Promise<InboxDataSet | null>;
-    /**
-     * Check if the datastore is loaded and ready to perform mutations
-     * @returns True if the datastore is loaded and ready to perform mutations, false otherwise
-     */
-    private canMutate;
-    readMessage({ message, canCallApi }: {
-        message: InboxMessage;
-        canCallApi?: boolean;
-    }): Promise<void>;
-    unreadMessage({ message, canCallApi }: {
-        message: InboxMessage;
-        canCallApi?: boolean;
-    }): Promise<void>;
-    openMessage({ message, canCallApi }: {
-        message: InboxMessage;
-        canCallApi?: boolean;
-    }): Promise<void>;
-    clickMessage({ message, canCallApi }: {
-        message: InboxMessage;
-        canCallApi?: boolean;
-    }): Promise<void>;
-    archiveMessage({ message, canCallApi }: {
-        message: InboxMessage;
-        canCallApi?: boolean;
-    }): Promise<void>;
-    unarchiveMessage({ message, canCallApi }: {
-        message: InboxMessage;
-        canCallApi?: boolean;
-    }): Promise<void>;
-    archiveReadMessages({ canCallApi }?: {
-        canCallApi?: boolean;
-    }): Promise<void>;
-    archiveAllMessages({ canCallApi }?: {
-        canCallApi?: boolean;
-    }): Promise<void>;
-    readAllMessages({ canCallApi }?: {
-        canCallApi?: boolean;
-    }): Promise<void>;
-    /**
-     * Find the insert index for a new message in a data set
-     * @param newMessage - The new message to insert
-     * @param dataSet - The data set to insert the message into
-     * @returns The index to insert the message at
-     */
-    private findInsertIndex;
-    private addPage;
-    private addMessage;
-    private removeMessage;
-    /**
-     * Apply a message snapshot to the data store
-     * @param snapshot - The message snapshot to apply
-     */
-    private applyMessageSnapshot;
-    private applyDatastoreSnapshot;
-    /**
-     * Update a message in the data store
-     * @param message - The message to update
-     * @param index - The index of the message in its respective data set
-     * @param feedType - The feed type of the message
-     */
-    private updateMessage;
-    /**
-     * Copy an inbox data set
-     * @param dataSet - The inbox data set to copy
-     * @returns A copy of the inbox data set
-     */
-    private getDatastoreSnapshot;
-    /**
-     * Copy an inbox message with its archive and inbox indices
-     * @param message - The inbox message to copy
-     * @returns A copy of the inbox message with its archive and inbox indices
-     */
-    private getMessageSnapshot;
-}

package/dist/types/feed-type.d.ts

@@ -1 +0,0 @@
-export type CourierInboxFeedType = 'inbox' | 'archive';