@trycourier/courier-ui-inbox 1.0.12-beta → 1.0.14-beta

package/dist/index.mjs

@@ -1218,7 +1218,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
       return;
     }
     try {
-      message.opened = (/* @__PURE__ */ new Date()).toISOString();
+      snapshot.message.opened = (/* @__PURE__ */ new Date()).toISOString();
       this.applyMessageSnapshot(snapshot);
       if (canCallApi) {
         await ((_a = Courier.shared.client) == null ? void 0 : _a.inbox.open({ messageId: message.messageId }));
@@ -1598,15 +1598,19 @@ class CourierInboxListItem extends CourierBaseElement {
     // Touch gestures
     __publicField(this, "_longPressTimeout", null);
     __publicField(this, "_isLongPress", false);
+    // Intersection Observer
+    __publicField(this, "_observer");
     // Callbacks
     __publicField(this, "onItemClick", null);
     __publicField(this, "onItemLongPress", null);
     __publicField(this, "onItemActionClick", null);
+    __publicField(this, "onItemVisible", null);
     this._canClick = canClick;
     this._themeManager = themeManager;
     this._theme = themeManager.getTheme();
     this._isMobile = "ontouchstart" in window;
     this.render();
+    this._setupIntersectionObserver();
   }
   static get id() {
     return "courier-inbox-list-item";
@@ -1652,6 +1656,26 @@ class CourierInboxListItem extends CourierBaseElement {
       this.classList.add("clickable");
     }
   }
+  _setupIntersectionObserver() {
+    if (typeof window === "undefined" || typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    if (this._observer) {
+      this._observer.disconnect();
+    }
+    this._observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.intersectionRatio === 1 && this.onItemVisible && this._message) {
+          this.onItemVisible(this._message);
+        }
+      });
+    }, { threshold: 1 });
+    this._observer.observe(this);
+  }
+  onComponentUnmounted() {
+    var _a;
+    (_a = this._observer) == null ? void 0 : _a.disconnect();
+  }
   static getStyles(theme2) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
     const list = (_a = theme2.inbox) == null ? void 0 : _a.list;
@@ -1824,9 +1848,6 @@ class CourierInboxListItem extends CourierBaseElement {
       }
     });
   }
-  setOnLongPress(cb) {
-    this.onItemLongPress = cb;
-  }
   // Helpers
   _getMenuOptions() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
@@ -1904,6 +1925,9 @@ class CourierInboxListItem extends CourierBaseElement {
   setOnItemLongPress(cb) {
     this.onItemLongPress = cb;
   }
+  setOnItemVisible(cb) {
+    this.onItemVisible = cb;
+  }
   // Content rendering
   _updateContent() {
     var _a, _b, _c;
@@ -2203,6 +2227,21 @@ class CourierInboxPaginationListItem extends CourierBaseElement {
   }
 }
 registerElement(CourierInboxPaginationListItem);
+function markAsRead(message) {
+  return CourierInboxDatastore.shared.readMessage({ message });
+}
+function markAsUnread(message) {
+  return CourierInboxDatastore.shared.unreadMessage({ message });
+}
+function clickMessage(message) {
+  return CourierInboxDatastore.shared.clickMessage({ message });
+}
+function archiveMessage(message) {
+  return CourierInboxDatastore.shared.archiveMessage({ message });
+}
+function openMessage(message) {
+  return CourierInboxDatastore.shared.openMessage({ message });
+}
 class CourierInboxList extends CourierBaseElement {
   constructor(props) {
     super();
@@ -2460,6 +2499,7 @@ class CourierInboxList extends CourierBaseElement {
         var _a2;
         return (_a2 = this._onMessageLongPress) == null ? void 0 : _a2.call(this, message2, index);
       });
+      listItem.setOnItemVisible((message2) => this.openVisibleMessage(message2));
       list.appendChild(listItem);
     });
     if (this._canPaginate) {
@@ -2474,6 +2514,12 @@ class CourierInboxList extends CourierBaseElement {
       list.appendChild(paginationItem);
     }
   }
+  async openVisibleMessage(message) {
+    try {
+      await openMessage(message);
+    } catch (error) {
+    }
+  }
   // Factories
   setLoadingStateFactory(factory) {
     this._loadingStateFactory = factory;
@@ -2778,7 +2824,6 @@ class CourierUnreadCountBadge extends CourierBaseElement {
         text-align: center;
         display: none;
         pointer-events: none;
-        min-width: 20px;
       }
 
       ${CourierUnreadCountBadge.id} .header {
@@ -3903,6 +3948,7 @@ class CourierInbox extends CourierBaseElement {
     // State
     __publicField(this, "_currentFeed", "inbox");
     // Theming
+    // Theme manager instance for handling theming logic
     __publicField(this, "_themeManager");
     // Components
     __publicField(this, "_inboxStyle");
@@ -3929,15 +3975,32 @@ class CourierInbox extends CourierBaseElement {
   static get id() {
     return "courier-inbox";
   }
+  /** Returns the current feed type. */
+  get currentFeed() {
+    return this._currentFeed;
+  }
+  /** Returns the current theme object. */
   get theme() {
     return this._themeManager.getTheme();
   }
+  /**
+   * Set the light theme for the inbox.
+   * @param theme The light theme object to set.
+   */
   setLightTheme(theme2) {
     this._themeManager.setLightTheme(theme2);
   }
+  /**
+   * Set the dark theme for the inbox.
+   * @param theme The dark theme object to set.
+   */
   setDarkTheme(theme2) {
     this._themeManager.setDarkTheme(theme2);
   }
+  /**
+   * Set the theme mode (light/dark/system).
+   * @param mode The theme mode to set.
+   */
   setMode(mode) {
     this._themeManager.setMode(mode);
   }
@@ -4095,49 +4158,95 @@ class CourierInbox extends CourierBaseElement {
       }
     `;
   }
+  /**
+   * Sets a custom header factory for the inbox.
+   * @param factory - A function that returns an HTMLElement to render as the header.
+   */
   setHeader(factory) {
     this._headerFactory = factory;
     this.updateHeader();
   }
+  /**
+   * Removes the custom header factory from the inbox, reverting to the default header.
+   */
   removeHeader() {
     this._headerFactory = null;
     this.updateHeader();
   }
+  /**
+   * 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) {
     var _a;
     (_a = this._list) == null ? void 0 : _a.setLoadingStateFactory(factory);
   }
+  /**
+   * 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) {
     var _a;
     (_a = this._list) == null ? void 0 : _a.setEmptyStateFactory(factory);
   }
+  /**
+   * 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) {
     var _a;
     (_a = this._list) == null ? void 0 : _a.setErrorStateFactory(factory);
   }
+  /**
+   * 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) {
     var _a;
     (_a = this._list) == null ? void 0 : _a.setListItemFactory(factory);
   }
+  /**
+   * 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) {
     var _a;
     (_a = this._list) == null ? void 0 : _a.setPaginationItemFactory(factory);
   }
+  /**
+   * Registers a handler for message click events.
+   * @param handler - A function to be called when a message is clicked.
+   */
   onMessageClick(handler) {
     var _a;
     this._onMessageClick = handler;
     (_a = this._list) == null ? void 0 : _a.setCanClickListItems(handler !== void 0);
   }
+  /**
+   * Registers a handler for message action click events.
+   * @param handler - A function to be called when a message action is clicked.
+   */
   onMessageActionClick(handler) {
     this._onMessageActionClick = handler;
   }
+  /**
+   * Registers a handler for message long press events.
+   * @param handler - A function to be called when a message is long-pressed.
+   */
   onMessageLongPress(handler) {
     var _a;
     this._onMessageLongPress = handler;
     (_a = this._list) == null ? void 0 : _a.setCanLongPressListItems(handler !== void 0);
   }
+  /**
+   * Sets the feed type for the inbox (e.g., "inbox" or "archive").
+   * @param feedType - The feed type to display.
+   */
   setFeedType(feedType) {
     var _a;
+    if (this._currentFeed === feedType) {
+      return;
+    }
     this._currentFeed = feedType;
     (_a = this._list) == null ? void 0 : _a.setFeedType(feedType);
     this.updateHeader();
@@ -4169,6 +4278,9 @@ class CourierInbox extends CourierBaseElement {
     await CourierInboxDatastore.shared.load(props);
     await CourierInboxDatastore.shared.listenForUpdates();
   }
+  /**
+   * Forces a reload of the inbox data, bypassing the cache.
+   */
   refresh() {
     this.load({
       canUseCache: false
@@ -4318,10 +4430,10 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     __publicField(this, "_width", "440px");
     __publicField(this, "_height", "440px");
     __publicField(this, "_popupAlignment", "top-left");
-    __publicField(this, "_top", "40px");
-    __publicField(this, "_right", "0");
-    __publicField(this, "_bottom", "40px");
-    __publicField(this, "_left", "0");
+    __publicField(this, "_top");
+    __publicField(this, "_right");
+    __publicField(this, "_bottom");
+    __publicField(this, "_left");
     // Theming
     __publicField(this, "_themeManager", new CourierInboxThemeManager(defaultLightTheme));
     // Components
@@ -4329,10 +4441,6 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     __publicField(this, "_popup");
     __publicField(this, "_inbox");
     __publicField(this, "_style");
-    // Inbox Handlers
-    __publicField(this, "_onMessageClick");
-    __publicField(this, "_onMessageActionClick");
-    __publicField(this, "_onMessageLongPress");
     // Listeners
     __publicField(this, "_datastoreListener");
     // Factories
@@ -4357,15 +4465,33 @@ class CourierInboxPopupMenu extends CourierBaseElement {
   static get id() {
     return "courier-inbox-popup-menu";
   }
+  /** Returns the current theme object. */
   get theme() {
     return this._themeManager.getTheme();
   }
+  /** Returns the current feed type. */
+  get currentFeed() {
+    var _a;
+    return ((_a = this._inbox) == null ? void 0 : _a.currentFeed) ?? "inbox";
+  }
+  /**
+   * Set the light theme for the popup menu.
+   * @param theme The light theme object to set.
+   */
   setLightTheme(theme2) {
     this._themeManager.setLightTheme(theme2);
   }
+  /**
+   * Set the dark theme for the popup menu.
+   * @param theme The dark theme object to set.
+   */
   setDarkTheme(theme2) {
     this._themeManager.setDarkTheme(theme2);
   }
+  /**
+   * Set the theme mode (light/dark/system).
+   * @param mode The theme mode to set.
+   */
   setMode(mode) {
     this._themeManager.setMode(mode);
   }
@@ -4380,26 +4506,6 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     this._popup.className = "popup";
     this._inbox = new CourierInbox(this._themeManager);
     this._inbox.setAttribute("height", "100%");
-    if (this._inbox) {
-      this._inbox.onMessageClick((props) => {
-        if (this._onMessageClick) {
-          this._onMessageClick(props);
-        }
-        this.closePopup();
-      });
-      this._inbox.onMessageActionClick((props) => {
-        if (this._onMessageActionClick) {
-          this._onMessageActionClick(props);
-        }
-        this.closePopup();
-      });
-      this._inbox.onMessageLongPress((props) => {
-        if (this._onMessageLongPress) {
-          this._onMessageLongPress(props);
-        }
-        this.closePopup();
-      });
-    }
     this.refreshTheme();
     this.appendChild(this._triggerButton);
     this.appendChild(this._popup);
@@ -4508,17 +4614,51 @@ class CourierInboxPopupMenu extends CourierBaseElement {
         break;
     }
   }
+  /**
+   * Called when the unread count changes.
+   * @param _ The new unread count (unused).
+   */
   onUnreadCountChange(_) {
     this.render();
   }
+  /**
+   * Set a handler for message click events.
+   * @param handler The function to call when a message is clicked.
+   */
   onMessageClick(handler) {
-    this._onMessageClick = handler;
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.onMessageClick((props) => {
+      if (handler) {
+        handler(props);
+      }
+      this.closePopup();
+    });
   }
+  /**
+   * Set a handler for message action click events.
+   * @param handler The function to call when a message action is clicked.
+   */
   onMessageActionClick(handler) {
-    this._onMessageActionClick = handler;
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.onMessageActionClick((props) => {
+      if (handler) {
+        handler(props);
+      }
+      this.closePopup();
+    });
   }
+  /**
+   * Set a handler for message long press events.
+   * @param handler The function to call when a message is long pressed.
+   */
   onMessageLongPress(handler) {
-    this._onMessageLongPress = handler;
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.onMessageLongPress((props) => {
+      if (handler) {
+        handler(props);
+      }
+      this.closePopup();
+    });
   }
   isValidPosition(value) {
     const validPositions = [
@@ -4544,39 +4684,39 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     this._popup.style.transform = "";
     switch (this._popupAlignment) {
       case "top-right":
-        this._popup.style.top = this._top;
-        this._popup.style.right = this._right;
+        this._popup.style.top = this._top ?? "40px";
+        this._popup.style.right = this._right ?? "0px";
         break;
       case "top-left":
-        this._popup.style.top = this._top;
-        this._popup.style.left = this._left;
+        this._popup.style.top = this._top ?? "40px";
+        this._popup.style.left = this._left ?? "0px";
         break;
       case "top-center":
-        this._popup.style.top = this._top;
+        this._popup.style.top = this._top ?? "40px";
         this._popup.style.left = "50%";
         this._popup.style.transform = "translateX(-50%)";
         break;
       case "bottom-right":
-        this._popup.style.bottom = this._bottom;
-        this._popup.style.right = this._right;
+        this._popup.style.bottom = this._bottom ?? "40px";
+        this._popup.style.right = this._right ?? "0px";
         break;
       case "bottom-left":
-        this._popup.style.bottom = this._bottom;
-        this._popup.style.left = this._left;
+        this._popup.style.bottom = this._bottom ?? "40px";
+        this._popup.style.left = this._left ?? "0px";
         break;
       case "bottom-center":
-        this._popup.style.bottom = this._bottom;
+        this._popup.style.bottom = this._bottom ?? "40px";
         this._popup.style.left = "50%";
         this._popup.style.transform = "translateX(-50%)";
         break;
       case "center-right":
         this._popup.style.top = "50%";
-        this._popup.style.right = this._right;
+        this._popup.style.right = this._right ?? "40px";
         this._popup.style.transform = "translateY(-50%)";
         break;
       case "center-left":
         this._popup.style.top = "50%";
-        this._popup.style.left = this._left;
+        this._popup.style.left = this._left ?? "40px";
         this._popup.style.transform = "translateY(-50%)";
         break;
       case "center-center":
@@ -4586,21 +4726,37 @@ class CourierInboxPopupMenu extends CourierBaseElement {
         break;
     }
   }
+  /**
+   * Toggle the popup menu open/closed.
+   * @param event The click event that triggered the toggle.
+   */
   togglePopup(event) {
     event.stopPropagation();
     if (!this._popup) return;
     const isVisible = this._popup.style.display === "block";
     this._popup.style.display = isVisible ? "none" : "block";
   }
+  /**
+   * Close the popup menu.
+   */
   closePopup() {
     if (!this._popup) return;
     this._popup.style.display = "none";
   }
+  /**
+   * Set the content of the popup inbox.
+   * @param element The HTMLElement to set as the content.
+   */
   setContent(element) {
     if (!this._inbox) return;
     this._inbox.innerHTML = "";
     this._inbox.appendChild(element);
   }
+  /**
+   * Set the size of the popup menu.
+   * @param width The width to set.
+   * @param height The height to set.
+   */
   setSize(width, height) {
     this._width = width;
     this._height = height;
@@ -4608,6 +4764,10 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     this._popup.style.width = width;
     this._popup.style.height = height;
   }
+  /**
+   * Set the popup alignment/position.
+   * @param position The alignment/position to set.
+   */
   setPosition(position) {
     var _a, _b;
     if (this.isValidPosition(position)) {
@@ -4617,39 +4777,74 @@ class CourierInboxPopupMenu extends CourierBaseElement {
       (_b = (_a = Courier.shared.client) == null ? void 0 : _a.options.logger) == null ? void 0 : _b.error(`Invalid position: ${position}`);
     }
   }
+  /**
+   * Set the feed type for the inbox.
+   * @param feedType The feed type to set.
+   */
   setFeedType(feedType) {
     var _a;
     (_a = this._inbox) == null ? void 0 : _a.setFeedType(feedType);
   }
   // Factory methods
+  /**
+   * Set a custom header factory for the inbox.
+   * @param factory The factory function for the header.
+   */
   setHeader(factory) {
     var _a;
     (_a = this._inbox) == null ? void 0 : _a.setHeader(factory);
   }
+  /**
+   * Remove the custom header from the inbox.
+   */
   removeHeader() {
     var _a;
     (_a = this._inbox) == null ? void 0 : _a.removeHeader();
   }
+  /**
+   * Set a custom loading state factory for the inbox.
+   * @param factory The factory function for the loading state.
+   */
   setLoadingState(factory) {
     var _a;
     (_a = this._inbox) == null ? void 0 : _a.setLoadingState(factory);
   }
+  /**
+   * Set a custom empty state factory for the inbox.
+   * @param factory The factory function for the empty state.
+   */
   setEmptyState(factory) {
     var _a;
     (_a = this._inbox) == null ? void 0 : _a.setEmptyState(factory);
   }
+  /**
+   * Set a custom error state factory for the inbox.
+   * @param factory The factory function for the error state.
+   */
   setErrorState(factory) {
     var _a;
     (_a = this._inbox) == null ? void 0 : _a.setErrorState(factory);
   }
+  /**
+   * Set a custom list item factory for the inbox.
+   * @param factory The factory function for the list item.
+   */
   setListItem(factory) {
     var _a;
     (_a = this._inbox) == null ? void 0 : _a.setListItem(factory);
   }
+  /**
+   * Set a custom pagination item factory for the inbox.
+   * @param factory The factory function for the pagination item.
+   */
   setPaginationItem(factory) {
     var _a;
     (_a = this._inbox) == null ? void 0 : _a.setPaginationItem(factory);
   }
+  /**
+   * Set a custom menu button factory for the popup trigger.
+   * @param factory The factory function for the menu button.
+   */
   setMenuButton(factory) {
     this._popupMenuButtonFactory = factory;
     this.render();
@@ -4671,21 +4866,6 @@ class CourierInboxPopupMenu extends CourierBaseElement {
   }
 }
 registerElement(CourierInboxPopupMenu);
-function markAsRead(message) {
-  return CourierInboxDatastore.shared.readMessage({ message });
-}
-function markAsUnread(message) {
-  return CourierInboxDatastore.shared.unreadMessage({ message });
-}
-function clickMessage(message) {
-  return CourierInboxDatastore.shared.clickMessage({ message });
-}
-function archiveMessage(message) {
-  return CourierInboxDatastore.shared.archiveMessage({ message });
-}
-function openMessage(message) {
-  return CourierInboxDatastore.shared.openMessage({ message });
-}
 class CourierInboxDatastoreEvents {
   onDataSetChange(_, __) {
   }