@inboxsdk/core 2.1.59 → 2.1.60

package/inboxsdk.js

@@ -371,7 +371,7 @@ function isNotNil(value) {
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- SDK_VERSION is injected by webpack
 ///@ts-ignore
-const BUILD_VERSION = "2.1.59-1718234389875-7ae8da1c5adbea88";
+const BUILD_VERSION = "2.1.60-1718718023878-64aa156f6ee5ecb1";
 if (false) {}
 
 /***/ }),
@@ -2646,7 +2646,7 @@ options.insert = htmlElement => {
               htmlElement.setAttribute('data-inboxsdk-version',
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- this is injected by webpack
               ///@ts-ignore
-              "2.1.59-1718234389875-7ae8da1c5adbea88");
+              "2.1.60-1718718023878-64aa156f6ee5ecb1");
               document.head.append(htmlElement);
             };
 options.domAPI = (styleDomAPI_default());
@@ -10197,7 +10197,7 @@ options.insert = htmlElement => {
               htmlElement.setAttribute('data-inboxsdk-version',
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- this is injected by webpack
               ///@ts-ignore
-              "2.1.59-1718234389875-7ae8da1c5adbea88");
+              "2.1.60-1718718023878-64aa156f6ee5ecb1");
               document.head.append(htmlElement);
             };
 options.domAPI = (styleDomAPI_default());
@@ -14926,7 +14926,7 @@ options.insert = htmlElement => {
               htmlElement.setAttribute('data-inboxsdk-version',
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- this is injected by webpack
               ///@ts-ignore
-              "2.1.59-1718234389875-7ae8da1c5adbea88");
+              "2.1.60-1718718023878-64aa156f6ee5ecb1");
               document.head.append(htmlElement);
             };
 options.domAPI = (styleDomAPI_default());
@@ -17098,7 +17098,8 @@ const HEADING_ELEMENT_SELECTOR = '.apW';
 class GmailAppMenuItemView extends events.EventEmitter {
   static elementCss = {
     HOVER: 'aIk',
-    ACTIVE: 'apV'
+    ACTIVE: 'apV',
+    SDK_ACTIVE: 'inboxsdk__appMenuItem_active'
   };
   #menuItemDescriptor;
   #element;
@@ -17250,7 +17251,8 @@ class CollapsiblePanelView extends safe_event_emitter/* default */.A {
     HOVER: 'aJu',
     COLLAPSED_HOVER: 'bym',
     PANEL_LESS: 'a3W',
-    TOGGLE_OPEN_STATE: 'aak'
+    TOGGLE_OPEN_STATE: 'aak',
+    SDK_ACTIVE: 'inboxsdk__collapsiblePanel_active'
   };
   #panelDescriptor;
   #element;
@@ -17549,24 +17551,72 @@ class AppMenuItemView extends safe_event_emitter/* default */.A {
   static #routeViewDriverStream;
   static #menuItemToPanelMap = new Map();
   static #appMenuItemViews = new Set();
-  static #getActivePanel() {
+  static getAllPanels() {
+    const appMenuElement = gmail_element_getter/* default */.A.getAppMenuContainer();
+    const nativePanels = appMenuElement?.querySelectorAll(`.${collapsible_panel_view_NATIVE_CLASS}`);
+    return Array.from(nativePanels ?? []);
+  }
+  static getActivePanel() {
+    let useSdkActiveSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     const appMenuElement = gmail_element_getter/* default */.A.getAppMenuContainer();
     const {
-      ACTIVE
+      ACTIVE,
+      SDK_ACTIVE
     } = CollapsiblePanelView.elementCss;
-    const nativePanel = appMenuElement?.querySelector(`.${collapsible_panel_view_NATIVE_CLASS}.${ACTIVE}`);
+    const nativePanel = appMenuElement?.querySelector(useSdkActiveSelector ? `.${collapsible_panel_view_NATIVE_CLASS}.${ACTIVE}.${SDK_ACTIVE}` : `.${collapsible_panel_view_NATIVE_CLASS}.${ACTIVE}`);
     return nativePanel;
   }
-  static #getActiveMenuItem() {
+  static deactivatePanel(panel) {
+    const {
+      ACTIVE,
+      HOVER,
+      SDK_ACTIVE
+    } = CollapsiblePanelView.elementCss;
+    panel.style.removeProperty('height');
+    if (panel.classList.contains(HOVER)) {
+      panel.classList.remove(HOVER);
+    }
+    if (panel.classList.contains(ACTIVE)) {
+      panel.classList.remove(ACTIVE);
+    }
+    if (panel.classList.contains(SDK_ACTIVE)) {
+      panel.classList.remove(SDK_ACTIVE);
+    }
+  }
+  static isMenuItem(element) {
+    return element.classList.contains(NATIVE_CLASS);
+  }
+  static getAllMenuItems() {
+    const appMenuElement = gmail_element_getter/* default */.A.getAppMenuContainer();
+    return Array.from(appMenuElement?.querySelectorAll(`.${NATIVE_CLASS}`) ?? []);
+  }
+  static getActiveMenuItem() {
     const appMenuElement = gmail_element_getter/* default */.A.getAppMenuContainer();
     const {
-      ACTIVE
+      ACTIVE,
+      SDK_ACTIVE
     } = GmailAppMenuItemView.elementCss;
-    const button = appMenuElement?.querySelector(`.${NATIVE_CLASS}.${ACTIVE}`);
+    const button = appMenuElement?.querySelector(`.${NATIVE_CLASS}.${ACTIVE}.${SDK_ACTIVE}`);
     return button;
   }
+  static deactivateMenuItem(menuItem) {
+    const {
+      ACTIVE,
+      HOVER,
+      SDK_ACTIVE
+    } = GmailAppMenuItemView.elementCss;
+    if (menuItem.classList.contains(HOVER)) {
+      menuItem.classList.remove(HOVER);
+    }
+    if (menuItem.classList.contains(ACTIVE)) {
+      menuItem.classList.remove(ACTIVE);
+    }
+    if (menuItem.classList.contains(SDK_ACTIVE)) {
+      menuItem.classList.remove(SDK_ACTIVE);
+    }
+  }
   static #isPanelLess() {
-    const activePanel = AppMenuItemView.#getActivePanel();
+    const activePanel = AppMenuItemView.getActivePanel(false);
     return !activePanel;
   }
   static #adjustTooltipNub() {
@@ -17692,24 +17742,14 @@ class AppMenuItemView extends safe_event_emitter/* default */.A {
   static #_3 = AppMenuItemView.#menuItemChangeStream.onValue(async v => {
     const [type, menuItem, mouseEvent] = v;
     const {
-      ACTIVE,
       HOVER
     } = GmailAppMenuItemView.elementCss;
     function handleActivate() {
       const appMenuElement = gmail_element_getter/* default */.A.getAppMenuContainer();
 
-      // deactivate active panel
-      const activePanel = AppMenuItemView.#getActivePanel();
-      if (activePanel) {
-        activePanel.style.removeProperty('height');
-        activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
-        activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
-      }
-
       // deactivate menu items and handle keyboard accessibility
       for (const menuItem_ of appMenuElement?.querySelectorAll(`.${NATIVE_CLASS}`) ?? []) {
-        menuItem_.classList.remove(ACTIVE);
-        menuItem_.classList.remove(HOVER);
+        AppMenuItemView.deactivateMenuItem(menuItem_);
         // update tabindex
         const iconElement = menuItem_.querySelector(ICON_ELEMENT_SELECTOR);
         if (iconElement) {
@@ -17718,19 +17758,23 @@ class AppMenuItemView extends safe_event_emitter/* default */.A {
       }
 
       // activate menu item
-      menuItem.classList.add(ACTIVE);
+      activateMenuItem(menuItem);
       // activate panel
       const panel = AppMenuItemView.#menuItemToPanelMap.get(menuItem);
       if (panel) {
-        panel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+        const otherPanels = AppMenuItemView.getAllPanels().filter(p => p !== panel);
+        for (const otherPanel of otherPanels) {
+          AppMenuItemView.deactivatePanel(otherPanel);
+        }
+        activatePanel(panel);
       }
     }
     switch (type) {
       case 'mouseenter':
         {
           const panel = AppMenuItemView.#menuItemToPanelMap.get(menuItem);
-          const activeMenuItem = AppMenuItemView.#getActiveMenuItem();
-          const activePanel = AppMenuItemView.#getActivePanel();
+          const activeMenuItem = AppMenuItemView.getActiveMenuItem();
+          const activePanel = AppMenuItemView.getActivePanel();
           const burgerMenuOpen = gmail_element_getter/* default */.A.isAppBurgerMenuOpen();
 
           // hover-styled panel is displayed for collapsed burger menu
@@ -17738,19 +17782,20 @@ class AppMenuItemView extends safe_event_emitter/* default */.A {
 
           // deactivate active panel
           if (activePanel) {
-            activePanel.style.removeProperty('height');
-            activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
-            activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+            AppMenuItemView.deactivatePanel(activePanel);
           }
 
           // activate new panel
           if (panel) {
             const height = window.innerHeight - panel.getBoundingClientRect().top;
             panel.style.cssText = `height: ${height}px;`;
-            panel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
-            panel.classList.add(CollapsiblePanelView.elementCss.HOVER);
+            activatePanel(panel, {
+              hover: true
+            });
             // hover menu item
-            menuItem.classList.add(HOVER);
+            if (!menuItem.classList.contains(HOVER)) {
+              menuItem.classList.add(HOVER);
+            }
             // handle burger menu collapsed
             if (!burgerMenuOpen) {
               for (const panel of document.querySelectorAll(CollapsiblePanelView.elementSelectors.NATIVE) ?? []) {
@@ -17760,7 +17805,9 @@ class AppMenuItemView extends safe_event_emitter/* default */.A {
           } else {
             // panel doesn't exist (i.e. Meet) so activate active menu item's panel instead (as Gmail currently does -- FEB 2023)
             const panel = activeMenuItem && AppMenuItemView.#menuItemToPanelMap.get(activeMenuItem);
-            panel?.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+            if (panel) {
+              activatePanel(panel);
+            }
           }
           break;
         }
@@ -17769,15 +17816,17 @@ class AppMenuItemView extends safe_event_emitter/* default */.A {
           // Do not handle blur event when we're in one of the panel's dropdowns
           const isPanelDropdownShown = AppMenuItemView.#isPanelDropdownShown();
           if (isPanelDropdownShown) return;
-          const activeMenuItem = AppMenuItemView.#getActiveMenuItem();
-          const activePanel = AppMenuItemView.#getActivePanel();
+          const activeMenuItem = AppMenuItemView.getActiveMenuItem();
+          const activePanel = AppMenuItemView.getActivePanel();
           const activeMenuItemPanel = activeMenuItem && AppMenuItemView.#menuItemToPanelMap.get(activeMenuItem);
           if (mouseEvent.relatedTarget instanceof Node && (menuItem.contains(mouseEvent.relatedTarget) || activePanel?.contains(mouseEvent.relatedTarget))) return;
           const burgerMenuOpen = gmail_element_getter/* default */.A.isAppBurgerMenuOpen();
           if (activePanel === activeMenuItemPanel && burgerMenuOpen) return;
 
           // unhover menu item
-          menuItem.classList.remove(HOVER);
+          if (menuItem.classList.contains(HOVER)) {
+            menuItem.classList.remove(HOVER);
+          }
 
           // handle burger menu collapsed
           for (const panel of document.querySelectorAll(CollapsiblePanelView.elementSelectors.NATIVE) ?? []) {
@@ -17786,14 +17835,12 @@ class AppMenuItemView extends safe_event_emitter/* default */.A {
 
           // deactivate active panel
           if (activePanel) {
-            activePanel.style.removeProperty('height');
-            activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
-            activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+            AppMenuItemView.deactivatePanel(activePanel);
           }
 
           // activate active menu item panel
           if (activeMenuItemPanel) {
-            activeMenuItemPanel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+            activatePanel(activeMenuItemPanel);
           }
           break;
         }
@@ -17921,12 +17968,48 @@ class AppMenuItemView extends safe_event_emitter/* default */.A {
     AppMenuItemView.#appMenuItemViews.delete(this);
   }
 }
+function activatePanel(panel, options) {
+  const {
+    ACTIVE,
+    HOVER,
+    SDK_ACTIVE
+  } = CollapsiblePanelView.elementCss;
+  if (!panel.classList.contains(ACTIVE)) {
+    panel.classList.add(ACTIVE);
+  }
+  if (!panel.classList.contains(SDK_ACTIVE)) {
+    panel.classList.add(SDK_ACTIVE);
+  }
+  if (options?.hover) {
+    if (!panel.classList.contains(HOVER)) {
+      panel.classList.add(HOVER);
+    }
+  } else {
+    if (panel.classList.contains(HOVER)) {
+      panel.classList.remove(HOVER);
+    }
+  }
+}
+function activateMenuItem(menuItem) {
+  const {
+    ACTIVE,
+    SDK_ACTIVE
+  } = GmailAppMenuItemView.elementCss;
+  if (!menuItem.classList.contains(ACTIVE)) {
+    menuItem.classList.add(ACTIVE);
+  }
+  if (!menuItem.classList.contains(SDK_ACTIVE)) {
+    menuItem.classList.add(SDK_ACTIVE);
+  }
+}
 ;// CONCATENATED MODULE: ./src/platform-implementation-js/namespaces/app-menu.ts
 
 
 
 
 
+
+
 /**
  * In dark themes, Gmail has different colored primary buttons depending on hover or active state
  */
@@ -17977,6 +18060,7 @@ class AppMenu {
   });
   constructor(driver) {
     this.#driver = driver;
+    AppMenu.#monitorAppMenuState();
   }
 
   /**
@@ -18014,6 +18098,42 @@ class AppMenu {
     const result = await gmail_element_getter/* default */.A.getAppMenuAsync();
     return !!result;
   }
+  static #monitorInitialized = false;
+  static async #monitorAppMenuState() {
+    /**
+     * Gmail could set menu item to active asynchronously, monitor changes to the menu DOM and
+     * deactivate all other menu items that don't have the SDK specific active class name.
+     *
+     * Same applies to menu panel. Deactivate all other panels that don't have the SDK specific active class name.
+     */
+
+    if (this.#monitorInitialized) {
+      return;
+    }
+    this.#monitorInitialized = true;
+    kefir_esm["default"].fromPromise(gmail_element_getter/* default */.A.getAppMenuAsync()).filter(isNotNil/* default */.A).flatMap(appMenu => (0,make_mutation_observer_chunked_stream/* default */.A)(appMenu, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['class']
+    }).delay(0)).filter(mutations => mutations.some(m => m.target instanceof HTMLElement && AppMenuItemView.isMenuItem(m.target))).throttle(10, {
+      leading: true,
+      trailing: true
+    }).map(() => {
+      const activeMenuItem = AppMenuItemView.getActiveMenuItem();
+      if (activeMenuItem) {
+        const otherMenuItems = AppMenuItemView.getAllMenuItems().filter(menuItem => menuItem !== activeMenuItem);
+        otherMenuItems.map(menuItem => AppMenuItemView.deactivateMenuItem(menuItem));
+      }
+      const activePanel = AppMenuItemView.getActivePanel();
+      if (activePanel) {
+        const otherPanels = AppMenuItemView.getAllPanels().filter(panel => panel !== activePanel);
+        otherPanels.map(panel => AppMenuItemView.deactivatePanel(panel));
+      }
+    }).onValue(() => {
+      // monitor forever
+    });
+  }
 }
 // EXTERNAL MODULE: ./node_modules/lodash/intersection.js
 var intersection = __webpack_require__(4225);
@@ -19535,7 +19655,7 @@ mole_view_module_options.insert = htmlElement => {
               htmlElement.setAttribute('data-inboxsdk-version',
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- this is injected by webpack
               ///@ts-ignore
-              "2.1.59-1718234389875-7ae8da1c5adbea88");
+              "2.1.60-1718718023878-64aa156f6ee5ecb1");
               document.head.append(htmlElement);
             };
 mole_view_module_options.domAPI = (styleDomAPI_default());