@trycourier/courier-react 8.0.11-beta → 8.0.14-beta

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import React, { version, useRef, useEffect } from "react";
-import ReactDOM, { flushSync } from "react-dom";
+import React, { useState, useEffect, useRef } from "react";
 import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
 var __defProp$1 = Object.defineProperty;
 var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -1176,7 +1176,15 @@ const addSystemThemeModeListener = (callback) => {
     mediaQuery.removeEventListener("change", handler);
   };
 };
-class CourierSystemThemeElement extends HTMLElement {
+const BaseElement = typeof window === "undefined" ? class {
+  constructor() {
+  }
+} : class extends HTMLElement {
+  constructor() {
+    super();
+  }
+};
+class CourierSystemThemeElement extends BaseElement {
   constructor() {
     super();
     __publicField2(this, "_currentSystemTheme");
@@ -1320,9 +1328,6 @@ class CourierButton extends CourierSystemThemeElement {
     this._style.textContent = this.getStyles(props);
   }
 }
-if (!customElements.get("courier-button")) {
-  customElements.define("courier-button", CourierButton);
-}
 const CourierIconSVGs = {
   inbox: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M5.5 14.5V17C5.5 17.2812 5.71875 17.5 6 17.5H18C18.25 17.5 18.5 17.2812 18.5 17V14.5H15.9375L15.2812 15.8125C15.0938 16.25 14.6562 16.5 14.1875 16.5H9.78125C9.3125 16.5 8.875 16.25 8.6875 15.8125L8.03125 14.5H5.5ZM18.1875 13L16.6562 6.90625C16.5938 6.65625 16.4062 6.5 16.1875 6.5H7.8125C7.5625 6.5 7.375 6.65625 7.3125 6.90625L5.78125 13H8.1875C8.65625 13 9.09375 13.2812 9.3125 13.7188L9.9375 15H14.0312L14.6875 13.7188C14.875 13.2812 15.3125 13 15.7812 13H18.1875ZM4 14.25C4 14.0938 4 13.9375 4.03125 13.7812L5.84375 6.53125C6.09375 5.625 6.875 5 7.8125 5H16.1875C17.0938 5 17.9062 5.625 18.125 6.53125L19.9375 13.7812C19.9688 13.9375 20 14.0938 20 14.25V17C20 18.125 19.0938 19 18 19H6C4.875 19 4 18.125 4 17V14.25Z" fill="currentColor"/>
@@ -1352,7 +1357,7 @@ const CourierIconSVGs = {
 <path d="M5.5 11C5.0625 11 4.75 10.6875 4.75 10.25V5.75C4.75 5.34375 5.0625 5 5.5 5C5.90625 5 6.25 5.34375 6.25 5.75V8.28125L6.875 7.53125C8.15625 6 10.0625 5 12.25 5C16.0938 5 19.25 8.15625 19.25 12C19.25 15.875 16.0938 19 12.25 19C10.6562 19 9.21875 18.5 8.03125 17.625C7.71875 17.375 7.625 16.9062 7.875 16.5625C8.125 16.2188 8.59375 16.1562 8.9375 16.4062C9.84375 17.0938 11 17.5 12.25 17.5C15.2812 17.5 17.75 15.0625 17.75 12C17.75 8.96875 15.2812 6.5 12.25 6.5C10.5312 6.5 9.03125 7.28125 8 8.5L7.15625 9.5H10C10.4062 9.5 10.75 9.84375 10.75 10.25C10.75 10.6875 10.4062 11 10 11H5.5Z" fill="currentColor"/>
 </svg>`
 };
-class CourierIcon extends HTMLElement {
+class CourierIcon extends BaseElement {
   constructor(color, svg) {
     super();
     __publicField2(this, "_color");
@@ -1403,10 +1408,7 @@ class CourierIcon extends HTMLElement {
     this.refresh();
   }
 }
-if (!customElements.get("courier-icon")) {
-  customElements.define("courier-icon", CourierIcon);
-}
-class CourierLink extends HTMLElement {
+class CourierLink extends BaseElement {
   constructor() {
     super();
     __publicField2(this, "link");
@@ -1568,9 +1570,6 @@ __publicField2(CourierLink, "observedAttributes", [
   "font-family",
   "font-size"
 ]);
-if (!customElements.get("courier-link")) {
-  customElements.define("courier-link", CourierLink);
-}
 class CourierElement extends CourierSystemThemeElement {
   constructor() {
     super();
@@ -1676,10 +1675,7 @@ class CourierInfoState extends CourierElement {
     this._buttonClickCallback = callback;
   }
 }
-if (!customElements.get("courier-info-state")) {
-  customElements.define("courier-info-state", CourierInfoState);
-}
-class CourierIconButton extends HTMLElement {
+class CourierIconButton extends BaseElement {
   constructor(svg, color, backgroundColor, hoverBackgroundColor, activeBackgroundColor, borderRadius, height, width) {
     super();
     __publicField2(this, "_backgroundColor");
@@ -1772,21 +1768,20 @@ class CourierIconButton extends HTMLElement {
     this.refresh();
   }
 }
-if (!customElements.get("courier-icon-button")) {
-  customElements.define("courier-icon-button", CourierIconButton);
+function registerElement(name, element) {
+  if (typeof window !== "undefined" && !customElements.get(name)) {
+    customElements.define(name, element);
+  }
 }
 const components = [
   { name: "courier-button", class: CourierButton },
   { name: "courier-icon", class: CourierIcon },
   { name: "courier-link", class: CourierLink },
   { name: "courier-info-state", class: CourierInfoState },
-  { name: "courier-icon-button", class: CourierIconButton }
+  { name: "courier-icon-button", class: CourierIconButton },
+  { name: "courier-system-theme", class: CourierSystemThemeElement }
 ];
-components.forEach(({ name, class: componentClass }) => {
-  if (!customElements.get(name)) {
-    customElements.define(name, componentClass);
-  }
-});
+components.forEach(({ name, class: componentClass }) => registerElement(name, componentClass));
 function copyMessage(message) {
   const copy = {
     ...message
@@ -1832,7 +1827,7 @@ function getMessageTime(message) {
   if (diffInSeconds < 31536e3) return `${Math.floor(diffInSeconds / 604800)}w`;
   return `${Math.floor(diffInSeconds / 31536e3)}y`;
 }
-class CourierListItemActionMenu extends HTMLElement {
+class CourierInboxListItemMenu extends BaseElement {
   constructor(theme2) {
     super();
     __publicField(this, "_theme");
@@ -1925,9 +1920,7 @@ class CourierListItemActionMenu extends HTMLElement {
     this.classList.remove("visible");
   }
 }
-if (!customElements.get("courier-list-item-menu")) {
-  customElements.define("courier-list-item-menu", CourierListItemActionMenu);
-}
+registerElement("courier-inbox-list-item-menu", CourierInboxListItemMenu);
 const _CourierInboxDatastore = class _CourierInboxDatastore2 {
   constructor() {
     __publicField(this, "_inboxDataSet");
@@ -2619,7 +2612,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
 };
 __publicField(_CourierInboxDatastore, "instance");
 let CourierInboxDatastore = _CourierInboxDatastore;
-class CourierListItem extends HTMLElement {
+class CourierListItem extends BaseElement {
   constructor(theme2) {
     super();
     __publicField(this, "_theme");
@@ -2658,7 +2651,7 @@ class CourierListItem extends HTMLElement {
     this._unreadIndicator.className = "unread-indicator";
     this._style = document.createElement("style");
     this._refreshStyles();
-    this._menu = new CourierListItemActionMenu(this._theme);
+    this._menu = new CourierInboxListItemMenu(this._theme);
     this._menu.setOptions(this._getMenuOptions());
     shadow.append(this._style, this._unreadIndicator, contentContainer, this._timeElement, this._menu);
     const cancelPropagation = (e) => {
@@ -2825,11 +2818,11 @@ class CourierListItem extends HTMLElement {
 
       /* ───────────────────────── Menu hover / active ────────────────── */
       @media (hover: hover) {
-        :host(:hover):has(courier-list-item-menu:hover, courier-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
+        :host(:hover):has(courier-inbox-list-item-menu:hover, courier-inbox-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
           background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
         }
       }
-      :host(:active):has(courier-list-item-menu:active, courier-list-item-menu *:active, courier-button:active, courier-button *:active) {
+      :host(:active):has(courier-inbox-list-item-menu:active, courier-inbox-list-item-menu *:active, courier-button:active, courier-button *:active) {
         background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
       }
 
@@ -2893,7 +2886,7 @@ class CourierListItem extends HTMLElement {
         white-space: nowrap;
       }
 
-      courier-list-item-menu {
+      courier-inbox-list-item-menu {
         z-index: 1;
         position: absolute;
         top: 8px;
@@ -2989,10 +2982,8 @@ class CourierListItem extends HTMLElement {
     });
   }
 }
-if (!customElements.get("courier-list-item")) {
-  customElements.define("courier-list-item", CourierListItem);
-}
-class CourierInboxSkeletonListItem extends HTMLElement {
+registerElement("courier-inbox-list-item", CourierListItem);
+class CourierInboxSkeletonListItem extends BaseElement {
   constructor(theme2, opacity) {
     super();
     __publicField(this, "_shadow");
@@ -3021,10 +3012,8 @@ class CourierInboxSkeletonListItem extends HTMLElement {
     `;
   }
 }
-if (!customElements.get("courier-inbox-skeleton-list-item")) {
-  customElements.define("courier-inbox-skeleton-list-item", CourierInboxSkeletonListItem);
-}
-class CourierSkeletonAnimatedRow extends HTMLElement {
+registerElement("courier-inbox-skeleton-list-item", CourierInboxSkeletonListItem);
+class CourierSkeletonAnimatedRow extends BaseElement {
   constructor(theme2, widthPercent) {
     super();
     __publicField(this, "_shadow");
@@ -3079,9 +3068,7 @@ class CourierSkeletonAnimatedRow extends HTMLElement {
     `;
   }
 }
-if (!customElements.get("courier-skeleton-animated-row")) {
-  customElements.define("courier-skeleton-animated-row", CourierSkeletonAnimatedRow);
-}
+registerElement("courier-skeleton-animated-row", CourierSkeletonAnimatedRow);
 class CourierInboxSkeletonList extends CourierElement {
   constructor(theme2) {
     super();
@@ -3131,10 +3118,8 @@ class CourierInboxSkeletonList extends CourierElement {
     `;
   }
 }
-if (!customElements.get("courier-inbox-skeleton-list")) {
-  customElements.define("courier-inbox-skeleton-list", CourierInboxSkeletonList);
-}
-class CourierInboxPaginationListItem extends HTMLElement {
+registerElement("courier-inbox-skeleton-list", CourierInboxSkeletonList);
+class CourierInboxPaginationListItem extends BaseElement {
   constructor(props) {
     super();
     __publicField(this, "skeletonLoadingList");
@@ -3183,10 +3168,8 @@ class CourierInboxPaginationListItem extends HTMLElement {
     this.observer.disconnect();
   }
 }
-if (!customElements.get("courier-inbox-pagination-list-item")) {
-  customElements.define("courier-inbox-pagination-list-item", CourierInboxPaginationListItem);
-}
-class CourierInboxList extends HTMLElement {
+registerElement("courier-inbox-pagination-list-item", CourierInboxPaginationListItem);
+class CourierInboxList extends BaseElement {
   constructor(props) {
     super();
     __publicField(this, "_themeSubscription");
@@ -3433,10 +3416,8 @@ class CourierInboxList extends HTMLElement {
     this._themeSubscription.unsubscribe();
   }
 }
-if (!customElements.get("courier-inbox-list")) {
-  customElements.define("courier-inbox-list", CourierInboxList);
-}
-class CourierInboxOptionMenuItem extends HTMLElement {
+registerElement("courier-inbox-list", CourierInboxList);
+class CourierInboxOptionMenuItem extends BaseElement {
   constructor(props) {
     super();
     __publicField(this, "_option");
@@ -3526,10 +3507,8 @@ class CourierInboxOptionMenuItem extends HTMLElement {
     this._itemIcon.updateSVG(((_d = this._option.icon) == null ? void 0 : _d.svg) ?? CourierIconSVGs.inbox);
   }
 }
-if (!customElements.get("courier-inbox-filter-menu-item")) {
-  customElements.define("courier-inbox-filter-menu-item", CourierInboxOptionMenuItem);
-}
-class CourierInboxOptionMenu extends HTMLElement {
+registerElement("courier-inbox-filter-menu-item", CourierInboxOptionMenuItem);
+class CourierInboxOptionMenu extends BaseElement {
   constructor(themeManager, type, selectable, options, onMenuOpen) {
     super();
     __publicField(this, "_themeSubscription");
@@ -3655,10 +3634,8 @@ class CourierInboxOptionMenu extends HTMLElement {
     this._themeSubscription.unsubscribe();
   }
 }
-if (!customElements.get("courier-inbox-option-menu")) {
-  customElements.define("courier-inbox-option-menu", CourierInboxOptionMenu);
-}
-class CourierUnreadCountBadge extends HTMLElement {
+registerElement("courier-inbox-option-menu", CourierInboxOptionMenu);
+class CourierUnreadCountBadge extends BaseElement {
   constructor(props) {
     super();
     __publicField(this, "_themeSubscription");
@@ -3724,10 +3701,8 @@ class CourierUnreadCountBadge extends HTMLElement {
     this._themeSubscription.unsubscribe();
   }
 }
-if (!customElements.get("courier-unread-count-badge")) {
-  customElements.define("courier-unread-count-badge", CourierUnreadCountBadge);
-}
-class CourierInboxHeaderTitle extends HTMLElement {
+registerElement("courier-unread-count-badge", CourierUnreadCountBadge);
+class CourierInboxHeaderTitle extends BaseElement {
   constructor(themeManager, option) {
     super();
     __publicField(this, "_themeSubscription");
@@ -3821,9 +3796,7 @@ class CourierInboxHeaderTitle extends HTMLElement {
     this._themeSubscription.unsubscribe();
   }
 }
-if (!customElements.get("courier-inbox-header-title")) {
-  customElements.define("courier-inbox-header-title", CourierInboxHeaderTitle);
-}
+registerElement("courier-inbox-header-title", CourierInboxHeaderTitle);
 class CourierInboxHeader extends CourierElement {
   constructor(props) {
     super();
@@ -4025,9 +3998,7 @@ class CourierInboxHeader extends CourierElement {
     this._themeSubscription.unsubscribe();
   }
 }
-if (!customElements.get("courier-inbox-header")) {
-  customElements.define("courier-inbox-header", CourierInboxHeader);
-}
+registerElement("courier-inbox-header", CourierInboxHeader);
 class CourierInboxDataStoreListener {
   constructor(events) {
     __publicField(this, "events");
@@ -4803,7 +4774,7 @@ class CourierInboxThemeManager {
     this._subscriptions = [];
   }
 }
-let CourierInbox$1 = class CourierInbox extends HTMLElement {
+let CourierInbox$1 = class CourierInbox extends BaseElement {
   constructor(themeManager) {
     var _a;
     super();
@@ -5103,9 +5074,7 @@ let CourierInbox$1 = class CourierInbox extends HTMLElement {
     }
   }
 };
-if (!customElements.get("courier-inbox")) {
-  customElements.define("courier-inbox", CourierInbox$1);
-}
+registerElement("courier-inbox", CourierInbox$1);
 class CourierInboxMenuButton extends CourierElement {
   constructor(themeBus) {
     super();
@@ -5169,10 +5138,8 @@ class CourierInboxMenuButton extends CourierElement {
     this._themeSubscription.unsubscribe();
   }
 }
-if (!customElements.get("courier-inbox-menu-button")) {
-  customElements.define("courier-inbox-menu-button", CourierInboxMenuButton);
-}
-let CourierInboxMenu$1 = class CourierInboxMenu extends HTMLElement {
+registerElement("courier-inbox-menu-button", CourierInboxMenuButton);
+let CourierInboxPopupMenu$1 = class CourierInboxPopupMenu extends BaseElement {
   constructor() {
     super();
     __publicField(this, "_width", "440px");
@@ -5472,9 +5439,7 @@ let CourierInboxMenu$1 = class CourierInboxMenu extends HTMLElement {
     this._themeManager.cleanup();
   }
 };
-if (!customElements.get("courier-inbox-menu")) {
-  customElements.define("courier-inbox-menu", CourierInboxMenu$1);
-}
+registerElement("courier-inbox-popup-menu", CourierInboxPopupMenu$1);
 const useCourier = () => {
   const signIn = (props) => Courier.shared.signIn(props);
   const signOut = () => Courier.shared.signOut();
@@ -5879,7 +5844,6 @@ function requireJsxRuntime() {
   return jsxRuntime.exports;
 }
 var jsxRuntimeExports = requireJsxRuntime();
-const reactVersion = parseInt(version.split(".")[0]);
 function reactNodeToHTMLElement(node) {
   const container = document.createElement("div");
   flushSync(() => {
@@ -5888,13 +5852,22 @@ function reactNodeToHTMLElement(node) {
   return container;
 }
 function render(node, container) {
-  if (reactVersion >= 18) {
-    const root = createRoot(container);
-    return root.render(node);
-  }
-  const render2 = ReactDOM["render"];
-  return render2(node, container);
+  const root = createRoot(container);
+  return root.render(node);
 }
+const CourierClientComponent = ({ children }) => {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  if (typeof window === "undefined") {
+    return null;
+  }
+  if (!isMounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
+};
 const CourierInbox2 = (props) => {
   const inboxRef = useRef(null);
   useEffect(() => {
@@ -5979,21 +5952,18 @@ const CourierInbox2 = (props) => {
       inbox.setFeedType(props.feedType || "inbox");
     });
   }, [props.feedType, inboxRef]);
-  return (
-    /* @ts-ignore */
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "courier-inbox",
-      {
-        ref: inboxRef,
-        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__ */ jsxRuntimeExports.jsx(CourierClientComponent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "courier-inbox",
+    {
+      ref: inboxRef,
+      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
+    }
+  ) });
 };
-const CourierInboxMenu2 = (props) => {
+const CourierInboxPopupMenu2 = (props) => {
   const menuRef = useRef(null);
   useEffect(() => {
     const menu = menuRef.current;
@@ -6087,29 +6057,26 @@ const CourierInboxMenu2 = (props) => {
       menu.setFeedType(props.feedType || "inbox");
     });
   }, [props.feedType, menuRef]);
-  return (
-    /* @ts-ignore */
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "courier-inbox-menu",
-      {
-        ref: menuRef,
-        "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__ */ jsxRuntimeExports.jsx(CourierClientComponent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "courier-inbox-popup-menu",
+    {
+      ref: menuRef,
+      "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
+    }
+  ) });
 };
 export {
   CourierInbox2 as CourierInbox,
-  CourierInboxMenu2 as CourierInboxMenu,
+  CourierInboxPopupMenu2 as CourierInboxPopupMenu,
   useCourier
 };
 //# sourceMappingURL=index.mjs.map