@trycourier/courier-ui-inbox 1.0.9-beta → 1.0.11-beta

package/dist/index.mjs

@@ -157,29 +157,35 @@ const baseButtonStyles = {
   fontSize: "14px"
 };
 const CourierButtonVariants = {
-  primary: (mode) => ({
-    ...baseButtonStyles,
-    backgroundColor: theme[mode].colors.primary,
-    textColor: theme[mode].colors.secondary,
-    fontWeight: "500",
-    shadow: "none"
-  }),
-  secondary: (mode) => ({
-    ...baseButtonStyles,
-    backgroundColor: theme[mode].colors.secondary,
-    textColor: theme[mode].colors.primary,
-    fontWeight: "500",
-    border: `1px solid ${theme[mode].colors.border}`,
-    shadow: mode === "light" ? "0px 1px 2px 0px rgba(0, 0, 0, 0.06)" : "0px 1px 2px 0px rgba(255, 255, 255, 0.1)"
-  }),
-  tertiary: (mode) => ({
-    ...baseButtonStyles,
-    backgroundColor: theme[mode].colors.border,
-    textColor: theme[mode].colors.primary,
-    fontWeight: "500",
-    border: "none",
-    shadow: "none"
-  })
+  primary: (mode) => {
+    return {
+      ...baseButtonStyles,
+      backgroundColor: theme[mode].colors.primary,
+      textColor: theme[mode].colors.secondary,
+      fontWeight: "500",
+      shadow: "none"
+    };
+  },
+  secondary: (mode) => {
+    return {
+      ...baseButtonStyles,
+      backgroundColor: theme[mode].colors.secondary,
+      textColor: theme[mode].colors.primary,
+      fontWeight: "500",
+      border: `1px solid ${theme[mode].colors.border}`,
+      shadow: mode === "light" ? "0px 1px 2px 0px rgba(0, 0, 0, 0.06)" : "0px 1px 2px 0px rgba(255, 255, 255, 0.1)"
+    };
+  },
+  tertiary: (mode) => {
+    return {
+      ...baseButtonStyles,
+      backgroundColor: theme[mode].colors.border,
+      textColor: theme[mode].colors.primary,
+      fontWeight: "500",
+      border: "none",
+      shadow: "none"
+    };
+  }
 };
 class CourierButton extends CourierSystemThemeElement {
   constructor(props) {
@@ -206,32 +212,33 @@ class CourierButton extends CourierSystemThemeElement {
     return "courier-button";
   }
   getStyles(props) {
+    const mode = props.mode === "system" ? this.currentSystemTheme : props.mode;
     const defaultTextColor = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.textColor;
     };
     const defaultBackgroundColor = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.backgroundColor;
     };
     const defaultBorder = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.border;
     };
     const defaultShadow = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.shadow;
     };
     const defaultBorderRadius = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.borderRadius;
     };
     const defaultFontSize = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.fontSize;
     };
     const defaultFontWeight = () => {
-      const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
+      const secondary = CourierButtonVariants.secondary(mode);
       return secondary.fontWeight;
     };
     return `
@@ -1571,9 +1578,10 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
 __publicField(_CourierInboxDatastore, "instance");
 let CourierInboxDatastore = _CourierInboxDatastore;
 class CourierInboxListItem extends CourierBaseElement {
-  constructor(theme2) {
+  constructor(themeManager) {
     super();
     // State
+    __publicField(this, "_themeManager");
     __publicField(this, "_theme");
     __publicField(this, "_message", null);
     __publicField(this, "_feedType", "inbox");
@@ -1592,7 +1600,8 @@ class CourierInboxListItem extends CourierBaseElement {
     __publicField(this, "onItemClick", null);
     __publicField(this, "onItemLongPress", null);
     __publicField(this, "onItemActionClick", null);
-    this._theme = theme2;
+    this._themeManager = themeManager;
+    this._theme = themeManager.getTheme();
     this._isMobile = "ontouchstart" in window;
     this.render();
   }
@@ -1916,6 +1925,7 @@ class CourierInboxListItem extends CourierBaseElement {
       this._message.actions.forEach((action) => {
         var _a2, _b2, _c2, _d, _e;
         const actionButton = new CourierButton({
+          mode: this._themeManager.mode,
           text: action.content,
           variant: "secondary",
           backgroundColor: actionsTheme == null ? void 0 : actionsTheme.backgroundColor,
@@ -2210,6 +2220,8 @@ class CourierInboxList extends CourierBaseElement {
     __publicField(this, "_listStyles");
     __publicField(this, "_listItemStyles");
     __publicField(this, "_listItemMenuStyles");
+    __publicField(this, "_errorContainer");
+    __publicField(this, "_emptyContainer");
     this._onRefresh = props.onRefresh;
     this._onPaginationTrigger = props.onPaginationTrigger;
     this._onMessageClick = props.onMessageClick;
@@ -2312,10 +2324,75 @@ class CourierInboxList extends CourierBaseElement {
   handleRefresh() {
     this._onRefresh();
   }
+  refreshInfoStateThemes() {
+    var _a, _b;
+    (_a = this._emptyContainer) == null ? void 0 : _a.updateStyles(this.errorProps);
+    (_b = this._emptyContainer) == null ? void 0 : _b.updateStyles(this.emptyProps);
+  }
+  get errorProps() {
+    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 error = (_a = this.theme.inbox) == null ? void 0 : _a.error;
+    const themeMode = this._themeSubscription.manager.mode;
+    return {
+      title: {
+        text: ((_b = error == null ? void 0 : error.title) == null ? void 0 : _b.text) ?? ((_c = this._error) == null ? void 0 : _c.message),
+        textColor: (_e = (_d = error == null ? void 0 : error.title) == null ? void 0 : _d.font) == null ? void 0 : _e.color,
+        fontFamily: (_g = (_f = error == null ? void 0 : error.title) == null ? void 0 : _f.font) == null ? void 0 : _g.family,
+        fontSize: (_i = (_h = error == null ? void 0 : error.title) == null ? void 0 : _h.font) == null ? void 0 : _i.size,
+        fontWeight: (_k = (_j = error == null ? void 0 : error.title) == null ? void 0 : _j.font) == null ? void 0 : _k.weight
+      },
+      button: {
+        mode: themeMode,
+        text: (_l = error == null ? void 0 : error.button) == null ? void 0 : _l.text,
+        backgroundColor: (_m = error == null ? void 0 : error.button) == null ? void 0 : _m.backgroundColor,
+        hoverBackgroundColor: (_n = error == null ? void 0 : error.button) == null ? void 0 : _n.hoverBackgroundColor,
+        activeBackgroundColor: (_o = error == null ? void 0 : error.button) == null ? void 0 : _o.activeBackgroundColor,
+        textColor: (_q = (_p = error == null ? void 0 : error.button) == null ? void 0 : _p.font) == null ? void 0 : _q.color,
+        fontFamily: (_s = (_r = error == null ? void 0 : error.button) == null ? void 0 : _r.font) == null ? void 0 : _s.family,
+        fontSize: (_u = (_t = error == null ? void 0 : error.button) == null ? void 0 : _t.font) == null ? void 0 : _u.size,
+        fontWeight: (_w = (_v = error == null ? void 0 : error.button) == null ? void 0 : _v.font) == null ? void 0 : _w.weight,
+        shadow: (_x = error == null ? void 0 : error.button) == null ? void 0 : _x.shadow,
+        border: (_y = error == null ? void 0 : error.button) == null ? void 0 : _y.border,
+        borderRadius: (_z = error == null ? void 0 : error.button) == null ? void 0 : _z.borderRadius,
+        onClick: () => this.handleRetry()
+      }
+    };
+  }
+  get emptyProps() {
+    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;
+    const empty = (_a = this.theme.inbox) == null ? void 0 : _a.empty;
+    const themeMode = this._themeSubscription.manager.mode;
+    return {
+      title: {
+        text: ((_b = empty == null ? void 0 : empty.title) == null ? void 0 : _b.text) ?? `No ${this._feedType} messages yet`,
+        textColor: (_d = (_c = empty == null ? void 0 : empty.title) == null ? void 0 : _c.font) == null ? void 0 : _d.color,
+        fontFamily: (_f = (_e = empty == null ? void 0 : empty.title) == null ? void 0 : _e.font) == null ? void 0 : _f.family,
+        fontSize: (_h = (_g = empty == null ? void 0 : empty.title) == null ? void 0 : _g.font) == null ? void 0 : _h.size,
+        fontWeight: (_j = (_i = empty == null ? void 0 : empty.title) == null ? void 0 : _i.font) == null ? void 0 : _j.weight
+      },
+      button: {
+        mode: themeMode,
+        text: (_k = empty == null ? void 0 : empty.button) == null ? void 0 : _k.text,
+        backgroundColor: (_l = empty == null ? void 0 : empty.button) == null ? void 0 : _l.backgroundColor,
+        hoverBackgroundColor: (_m = empty == null ? void 0 : empty.button) == null ? void 0 : _m.hoverBackgroundColor,
+        activeBackgroundColor: (_n = empty == null ? void 0 : empty.button) == null ? void 0 : _n.activeBackgroundColor,
+        textColor: (_p = (_o = empty == null ? void 0 : empty.button) == null ? void 0 : _o.font) == null ? void 0 : _p.color,
+        fontFamily: (_r = (_q = empty == null ? void 0 : empty.button) == null ? void 0 : _q.font) == null ? void 0 : _r.family,
+        fontSize: (_t = (_s = empty == null ? void 0 : empty.button) == null ? void 0 : _s.font) == null ? void 0 : _t.size,
+        fontWeight: (_v = (_u = empty == null ? void 0 : empty.button) == null ? void 0 : _u.font) == null ? void 0 : _v.weight,
+        shadow: (_w = empty == null ? void 0 : empty.button) == null ? void 0 : _w.shadow,
+        border: (_x = empty == null ? void 0 : empty.button) == null ? void 0 : _x.border,
+        borderRadius: (_y = empty == null ? void 0 : empty.button) == null ? void 0 : _y.borderRadius,
+        onClick: () => this.handleRefresh()
+      }
+    };
+  }
   render() {
-    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, _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, __, _$;
+    var _a, _b, _c, _d;
     while (this.firstChild) {
       this.removeChild(this.firstChild);
+      this._errorContainer = void 0;
+      this._emptyContainer = void 0;
     }
     if (this._listStyles) {
       this._listStyles.textContent = CourierInboxList.getStyles(this.theme);
@@ -2327,67 +2404,21 @@ class CourierInboxList extends CourierBaseElement {
       this._listItemMenuStyles.textContent = CourierInboxListItemMenu.getStyles(this.theme);
     }
     if (this._error) {
-      const error = (_a = this.theme.inbox) == null ? void 0 : _a.error;
-      const errorElement = new CourierInfoState({
-        title: {
-          text: ((_b = error == null ? void 0 : error.title) == null ? void 0 : _b.text) ?? this._error.message,
-          textColor: (_d = (_c = error == null ? void 0 : error.title) == null ? void 0 : _c.font) == null ? void 0 : _d.color,
-          fontFamily: (_f = (_e = error == null ? void 0 : error.title) == null ? void 0 : _e.font) == null ? void 0 : _f.family,
-          fontSize: (_h = (_g = error == null ? void 0 : error.title) == null ? void 0 : _g.font) == null ? void 0 : _h.size,
-          fontWeight: (_j = (_i = error == null ? void 0 : error.title) == null ? void 0 : _i.font) == null ? void 0 : _j.weight
-        },
-        button: {
-          text: (_k = error == null ? void 0 : error.button) == null ? void 0 : _k.text,
-          backgroundColor: (_l = error == null ? void 0 : error.button) == null ? void 0 : _l.backgroundColor,
-          hoverBackgroundColor: (_m = error == null ? void 0 : error.button) == null ? void 0 : _m.hoverBackgroundColor,
-          activeBackgroundColor: (_n = error == null ? void 0 : error.button) == null ? void 0 : _n.activeBackgroundColor,
-          textColor: (_p = (_o = error == null ? void 0 : error.button) == null ? void 0 : _o.font) == null ? void 0 : _p.color,
-          fontFamily: (_r = (_q = error == null ? void 0 : error.button) == null ? void 0 : _q.font) == null ? void 0 : _r.family,
-          fontSize: (_t = (_s = error == null ? void 0 : error.button) == null ? void 0 : _s.font) == null ? void 0 : _t.size,
-          fontWeight: (_v = (_u = error == null ? void 0 : error.button) == null ? void 0 : _u.font) == null ? void 0 : _v.weight,
-          shadow: (_w = error == null ? void 0 : error.button) == null ? void 0 : _w.shadow,
-          border: (_x = error == null ? void 0 : error.button) == null ? void 0 : _x.border,
-          borderRadius: (_y = error == null ? void 0 : error.button) == null ? void 0 : _y.borderRadius,
-          onClick: () => this.handleRetry()
-        }
-      });
-      errorElement.build((_z = this._errorStateFactory) == null ? void 0 : _z.call(this, { feedType: this._feedType, error: this._error }));
-      this.appendChild(errorElement);
+      this._errorContainer = new CourierInfoState(this.errorProps);
+      this._errorContainer.build((_a = this._errorStateFactory) == null ? void 0 : _a.call(this, { feedType: this._feedType, error: this._error }));
+      this.appendChild(this._errorContainer);
       return;
     }
     if (this._isLoading) {
       const loadingElement = new CourierInboxSkeletonList(this.theme);
-      loadingElement.build((_A = this._loadingStateFactory) == null ? void 0 : _A.call(this, { feedType: this._feedType }));
+      loadingElement.build((_b = this._loadingStateFactory) == null ? void 0 : _b.call(this, { feedType: this._feedType }));
       this.appendChild(loadingElement);
       return;
     }
     if (this._messages.length === 0) {
-      const empty = (_B = this.theme.inbox) == null ? void 0 : _B.empty;
-      const emptyElement = new CourierInfoState({
-        title: {
-          text: ((_C = empty == null ? void 0 : empty.title) == null ? void 0 : _C.text) ?? `No ${this._feedType} messages yet`,
-          textColor: (_E = (_D = empty == null ? void 0 : empty.title) == null ? void 0 : _D.font) == null ? void 0 : _E.color,
-          fontFamily: (_G = (_F = empty == null ? void 0 : empty.title) == null ? void 0 : _F.font) == null ? void 0 : _G.family,
-          fontSize: (_I = (_H = empty == null ? void 0 : empty.title) == null ? void 0 : _H.font) == null ? void 0 : _I.size,
-          fontWeight: (_K = (_J = empty == null ? void 0 : empty.title) == null ? void 0 : _J.font) == null ? void 0 : _K.weight
-        },
-        button: {
-          text: (_L = empty == null ? void 0 : empty.button) == null ? void 0 : _L.text,
-          backgroundColor: (_M = empty == null ? void 0 : empty.button) == null ? void 0 : _M.backgroundColor,
-          hoverBackgroundColor: (_N = empty == null ? void 0 : empty.button) == null ? void 0 : _N.hoverBackgroundColor,
-          activeBackgroundColor: (_O = empty == null ? void 0 : empty.button) == null ? void 0 : _O.activeBackgroundColor,
-          textColor: (_Q = (_P = empty == null ? void 0 : empty.button) == null ? void 0 : _P.font) == null ? void 0 : _Q.color,
-          fontFamily: (_S = (_R = empty == null ? void 0 : empty.button) == null ? void 0 : _R.font) == null ? void 0 : _S.family,
-          fontSize: (_U = (_T = empty == null ? void 0 : empty.button) == null ? void 0 : _T.font) == null ? void 0 : _U.size,
-          fontWeight: (_W = (_V = empty == null ? void 0 : empty.button) == null ? void 0 : _V.font) == null ? void 0 : _W.weight,
-          shadow: (_X = empty == null ? void 0 : empty.button) == null ? void 0 : _X.shadow,
-          border: (_Y = empty == null ? void 0 : empty.button) == null ? void 0 : _Y.border,
-          borderRadius: (_Z = empty == null ? void 0 : empty.button) == null ? void 0 : _Z.borderRadius,
-          onClick: () => this.handleRefresh()
-        }
-      });
-      emptyElement.build((__ = this._emptyStateFactory) == null ? void 0 : __.call(this, { feedType: this._feedType }));
-      this.appendChild(emptyElement);
+      this._emptyContainer = new CourierInfoState(this.emptyProps);
+      this._emptyContainer.build((_c = this._emptyStateFactory) == null ? void 0 : _c.call(this, { feedType: this._feedType }));
+      this.appendChild(this._emptyContainer);
       return;
     }
     const list = document.createElement("ul");
@@ -2397,7 +2428,7 @@ class CourierInboxList extends CourierBaseElement {
         list.appendChild(this._listItemFactory({ message, index }));
         return;
       }
-      const listItem = new CourierInboxListItem(this.theme);
+      const listItem = new CourierInboxListItem(this._themeSubscription.manager);
       listItem.setMessage(message, this._feedType);
       listItem.setOnItemClick((message2) => {
         var _a2;
@@ -2416,7 +2447,7 @@ class CourierInboxList extends CourierBaseElement {
     if (this._canPaginate) {
       const paginationItem = new CourierInboxPaginationListItem({
         theme: this.theme,
-        customItem: (_$ = this._paginationItemFactory) == null ? void 0 : _$.call(this, { feedType: this._feedType }),
+        customItem: (_d = this._paginationItemFactory) == null ? void 0 : _d.call(this, { feedType: this._feedType }),
         onPaginationTrigger: () => {
           var _a2;
           return (_a2 = this._onPaginationTrigger) == null ? void 0 : _a2.call(this, this._feedType);
@@ -3821,6 +3852,9 @@ class CourierInboxThemeManager {
     this._userMode = mode;
     this.updateTheme();
   }
+  get mode() {
+    return this._userMode;
+  }
   /**
    * Subscribe to theme changes
    * @param {Function} callback - Function to run when the theme changes
@@ -4026,6 +4060,8 @@ class CourierInbox extends CourierBaseElement {
     (_d = this._unreadIndicatorStyle) == null ? void 0 : _d.remove();
   }
   refreshTheme() {
+    var _a;
+    (_a = this._list) == null ? void 0 : _a.refreshInfoStateThemes();
     if (this._inboxStyle) {
       this._inboxStyle.textContent = this.getStyles();
     }
@@ -4274,6 +4310,10 @@ 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
@@ -4321,6 +4361,26 @@ 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);
@@ -4433,16 +4493,13 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     this.render();
   }
   onMessageClick(handler) {
-    var _a;
-    (_a = this._inbox) == null ? void 0 : _a.onMessageClick(handler);
+    this._onMessageClick = handler;
   }
   onMessageActionClick(handler) {
-    var _a;
-    (_a = this._inbox) == null ? void 0 : _a.onMessageActionClick(handler);
+    this._onMessageActionClick = handler;
   }
   onMessageLongPress(handler) {
-    var _a;
-    (_a = this._inbox) == null ? void 0 : _a.onMessageLongPress(handler);
+    this._onMessageLongPress = handler;
   }
   isValidPosition(value) {
     const validPositions = [
@@ -4516,6 +4573,10 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     const isVisible = this._popup.style.display === "block";
     this._popup.style.display = isVisible ? "none" : "block";
   }
+  closePopup() {
+    if (!this._popup) return;
+    this._popup.style.display = "none";
+  }
   setContent(element) {
     if (!this._inbox) return;
     this._inbox.innerHTML = "";