@inboxsdk/core 0.2.29-alpha.0 → 0.2.29-alpha.1

package/src/platform-implementation-js/views/app-menu-item-view.js

@@ -1,114 +1,226 @@
-import isEqual from 'lodash/isEqual';
-import kefir from 'kefir';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import kefirBus from 'kefir-bus';
 import EventEmitter from '../lib/safe-event-emitter';
 import { GmailAppMenuItemView, NATIVE_CLASS, INBOXSDK_CLASS, } from '../dom-driver/gmail/views/gmail-app-menu-item-view';
-import { CollapsiblePanelView } from './collapsible-panel-view';
+import { NATIVE_CLASS as PANEL_NATIVE_CLASS, CollapsiblePanelView, } from './collapsible-panel-view';
 import { addCollapsiblePanel } from '../dom-driver/gmail/gmail-driver/add-collapsible-panel';
 import GmailElementGetter from '../dom-driver/gmail/gmail-element-getter';
-let prevNative = {
-    menuItem: null,
-    panel: null,
-    route: null,
-};
-const setPrevNative = (next) => {
-    prevNative = {
-        ...prevNative,
-        ...next,
-    };
-};
+var NativeAppMenuClassName;
+(function (NativeAppMenuClassName) {
+    NativeAppMenuClassName["MAIL"] = "XJ";
+    NativeAppMenuClassName["CHAT"] = "ao4";
+    NativeAppMenuClassName["SPACES"] = "aIt";
+    NativeAppMenuClassName["MEET"] = "adZ";
+})(NativeAppMenuClassName || (NativeAppMenuClassName = {}));
+// Native Gmail menu button => the panel class names mapping
+const nativeButtonToPanelMap = new Map([
+    [NativeAppMenuClassName.MAIL, 'aIH'],
+    [NativeAppMenuClassName.CHAT, 'arL'],
+    [NativeAppMenuClassName.SPACES, 'arM'],
+    [NativeAppMenuClassName.MEET, undefined], // Meet
+]);
+/**
+ * Mail routes list is not exhaustive
+ */
+const MAIL_ROUTES = ['inbox/:page'];
+const CHAT_ROUTES = ['chat/welcome', 'chat/dm/:chatID'];
+const SPACES_ROUTES = ['rooms/welcome', 'chat/space/:spaceID'];
+const MEET_ROUTES = ['calls'];
+const routeIDtoMenuItemClass = Object.fromEntries([
+    ...MAIL_ROUTES.map((route) => [route, NativeAppMenuClassName.MAIL]),
+    ...CHAT_ROUTES.map((route) => [route, NativeAppMenuClassName.CHAT]),
+    ...SPACES_ROUTES.map((route) => [route, NativeAppMenuClassName.SPACES]),
+    ...MEET_ROUTES.map((route) => [route, NativeAppMenuClassName.MEET]),
+]);
+const initialRoutingStateStopper = kefirStopper();
 /**
  * Contains both a native Gmail app menu item and a collapsible panel.
  */
 export class AppMenuItemView extends EventEmitter {
-    /**
-     * Native panels are HTMLElements, custom panels are CollapsiblePanelViews.
-     */
-    static #activePanel;
-    static #nativeMenuItemChangeStream = (() => {
-        const stream = kefir.stream((emitter) => {
-            const observer = new MutationObserver((mutations) => {
-                for (const mutation of mutations) {
-                    const { target } = mutation;
-                    if (mutation.type === 'attributes' &&
-                        target instanceof HTMLElement &&
-                        target.classList.contains(NATIVE_CLASS) &&
-                        !target.classList.contains(INBOXSDK_CLASS)) {
-                        if (target.classList.contains(GmailAppMenuItemView.elementCss.ACTIVE)) {
-                            emitter.emit(['activated', target]);
-                        }
-                        else if (target.classList.contains(GmailAppMenuItemView.elementCss.HOVER)) {
-                            emitter.emit(['hovered', target]);
-                        }
-                    }
-                }
-            });
-            const f = async () => {
-                const gmailAppMenu = await GmailElementGetter.getAppMenuAsync();
-                if (!gmailAppMenu) {
-                    return;
-                }
-                const { ACTIVE } = GmailAppMenuItemView.elementCss;
-                const nativeMenuItemSelector = `.${NATIVE_CLASS}.${ACTIVE}:not(.${INBOXSDK_CLASS})`;
-                const nativeActivePanel = AppMenuItemView.#getNativeActivePanel();
-                setPrevNative({
-                    menuItem: gmailAppMenu.querySelector(nativeMenuItemSelector),
-                    panel: nativeActivePanel,
-                });
-                AppMenuItemView.#activePanel = nativeActivePanel;
-                document.addEventListener('mousedown', (e) => {
-                    const { target } = e;
-                    if (!(target instanceof Element)) {
-                        return;
-                    }
-                    if (!gmailAppMenu.contains(target)) {
-                        return;
-                    }
-                    const closest = target.closest(`.${NATIVE_CLASS}:not(.${INBOXSDK_CLASS})`);
-                    if (closest) {
-                        emitter.emit(['mousedown-on-native-el', closest, e]);
-                    }
-                });
-                observer.observe(gmailAppMenu, {
-                    attributes: true,
-                    childList: true,
-                    subtree: true,
-                });
-            };
-            f();
-        });
-        return stream;
-    })();
-    static #getNativeActivePanel() {
+    static #menuItemChangeStream = Kefir.pool();
+    static #routeViewDriverStream;
+    static #menuItemToPanelMap = new Map();
+    static #appMenuItemViews = new Set();
+    static #getActivePanel() {
         const appMenuElement = GmailElementGetter.getAppMenuContainer();
-        const { ACTIVE, HOVER } = CollapsiblePanelView.elementCss;
-        const nativePanel = appMenuElement?.querySelector(`${CollapsiblePanelView.elementSelectors.NATIVE}.${ACTIVE}:not(.${HOVER}):not(${CollapsiblePanelView.elementSelectors.CUSTOM})`);
+        const { ACTIVE } = CollapsiblePanelView.elementCss;
+        const nativePanel = appMenuElement?.querySelector(`.${PANEL_NATIVE_CLASS}.${ACTIVE}`);
         return nativePanel;
     }
-    static #customMenuItems = new Set();
+    static #getActiveMenuItem() {
+        const appMenuElement = GmailElementGetter.getAppMenuContainer();
+        const { ACTIVE } = GmailAppMenuItemView.elementCss;
+        const button = appMenuElement?.querySelector(`.${NATIVE_CLASS}.${ACTIVE}`);
+        return button;
+    }
+    static #setUpRouteViewDriverStream(driver) {
+        if (AppMenuItemView.#routeViewDriverStream)
+            return;
+        AppMenuItemView.#routeViewDriverStream = driver.getRouteViewDriverStream();
+        const bus = kefirBus();
+        AppMenuItemView.#menuItemChangeStream.plug(bus);
+        AppMenuItemView.#routeViewDriverStream
+            .takeUntilBy(initialRoutingStateStopper)
+            .onValue(async (routeView) => {
+            const routeViewID = routeView.getRouteID();
+            const routeType = routeView.getRouteType();
+            const routeViewParams = routeView.getParams();
+            console.debug({
+                routeViewID,
+                routeType,
+                routeViewParams,
+            });
+            /* Handling custom app menu items */
+            const descriptors = Array.from(AppMenuItemView.#appMenuItemViews, async (appMenuItemView) => {
+                const gmailView = await appMenuItemView.#gmailViewPromise;
+                return [gmailView.menuItemDescriptor, gmailView];
+            });
+            const results = await Promise.all(descriptors);
+            const [, gmailView] = results.find(([descriptor]) => {
+                return descriptor?.isRouteActive(routeView);
+            }) ?? [];
+            if (gmailView?.element) {
+                bus.emit(['click', gmailView.element]);
+                return;
+            }
+            /* Handling native app menu items */
+            const selector = `.${routeViewID
+                ? routeIDtoMenuItemClass[routeViewID] ?? NativeAppMenuClassName.MAIL
+                : NativeAppMenuClassName.MAIL}`;
+            const element = document.querySelector(selector);
+            if (element) {
+                bus.emit(['click', element]);
+                return;
+            }
+        });
+    }
     static {
-        AppMenuItemView.#nativeMenuItemChangeStream.onValue(async (e) => {
-            const [type, el /*, mouseEvent */] = e;
-            if (type === 'activated') {
-                AppMenuItemView.#activePanel = AppMenuItemView.#getNativeActivePanel();
-                await Promise.all(Array.from(AppMenuItemView.#customMenuItems).map(async (customMenuItem) => {
-                    await customMenuItem.#deactivate();
-                }));
+        (async () => {
+            const gmailAppMenu = await GmailElementGetter.getAppMenuAsync();
+            if (!gmailAppMenu) {
+                return;
             }
-            if (type === 'mousedown-on-native-el') {
-                if (prevNative.menuItem !== el) {
-                    prevNative.menuItem = el;
+            // Set up menu item panel -> menu collapsible panel element mappings
+            for (const [menuItemClass, panelClass] of nativeButtonToPanelMap) {
+                const menuItemElement = document.querySelector(`.${NATIVE_CLASS}.${menuItemClass}`);
+                const panelElement = panelClass
+                    ? document.querySelector(`.${PANEL_NATIVE_CLASS}.${panelClass}`)
+                    : null;
+                if (menuItemElement) {
+                    AppMenuItemView.#menuItemToPanelMap.set(menuItemElement, panelElement ?? undefined);
+                }
+            }
+            // Set up event listeners we use to control menu UI
+            const stream = Kefir.stream((emitter) => {
+                // We intercept some events emitted on Gmail (native) menu items to gain full control of the menu (menu items and panels).
+                // Thus, some native event handlers won't be invoked so we replicate the Gmail's behavior by ourselves.
+                const appMenuElement = GmailElementGetter.getAppMenuContainer();
+                for (const nativeMenuItem of appMenuElement?.querySelectorAll(`.${NATIVE_CLASS}:not(.${INBOXSDK_CLASS})`) ?? []) {
+                    // Gmail uses this listener for panel hover state activation. It's prevented from propagation and we handle UI updates
+                    nativeMenuItem.addEventListener('mouseenter', (e) => {
+                        e.stopImmediatePropagation();
+                        emitter.emit(['mouseenter', nativeMenuItem, e]);
+                    }, true);
+                    // Gmail uses this listener for panel hover state deactivation. It's prevented from propagation and we handle UI updates
+                    nativeMenuItem.addEventListener('mouseleave', (e) => {
+                        e.stopImmediatePropagation();
+                        emitter.emit(['mouseleave', nativeMenuItem, e]);
+                    }, true);
+                    // Click event isn't prevented from propagation to let Gmail handle routing. The styling is handled by us
+                    nativeMenuItem.addEventListener('click', () => {
+                        emitter.emit(['click', nativeMenuItem]);
+                    });
+                    // Handle moving cursor out of panel. We use it to enhance the styling since it won't be handled by Gmail
+                    const panel = AppMenuItemView.#menuItemToPanelMap.get(nativeMenuItem);
+                    panel?.addEventListener('mouseleave', (e) => {
+                        emitter.emit(['mouseleave', nativeMenuItem, e]);
+                    });
+                }
+            });
+            AppMenuItemView.#menuItemChangeStream.plug(stream);
+        })();
+    }
+    static {
+        AppMenuItemView.#menuItemChangeStream.onValue(async (v) => {
+            const [type, menuItem, mouseEvent] = v;
+            const { ACTIVE, HOVER } = GmailAppMenuItemView.elementCss;
+            if (type === 'mouseenter') {
+                const panel = AppMenuItemView.#menuItemToPanelMap.get(menuItem);
+                if (mouseEvent.relatedTarget instanceof Node &&
+                    (menuItem.contains(mouseEvent.relatedTarget) ||
+                        panel?.contains(mouseEvent.relatedTarget)))
                     return;
+                const activeMenuItem = AppMenuItemView.#getActiveMenuItem();
+                const activePanel = AppMenuItemView.#getActivePanel();
+                if (activeMenuItem === menuItem && activePanel === panel)
+                    return;
+                // deactivate active panel
+                if (activePanel) {
+                    activePanel.style.removeProperty('height');
+                    activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
+                    activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+                }
+                // 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);
+                    // hover menu item
+                    menuItem.classList.add(HOVER);
                 }
                 else {
-                    const { menuItem, panel, route } = prevNative;
-                    prevNative.menuItem = el;
-                    if (route) {
-                        document.location.hash = route;
-                    }
-                    menuItem?.classList.add(GmailAppMenuItemView.elementCss.ACTIVE);
-                    menuItem.classList.remove(GmailAppMenuItemView.elementCss.HOVER);
+                    // 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);
-                    panel?.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+                }
+            }
+            if (type === 'mouseleave') {
+                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;
+                if (activePanel === activeMenuItemPanel)
+                    return;
+                // unhover menu item
+                menuItem.classList.remove(HOVER);
+                // deactivate active panel
+                if (activePanel) {
+                    activePanel.style.removeProperty('height');
+                    activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
+                    activePanel.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+                }
+                // activate active menu item panel
+                if (activeMenuItemPanel) {
+                    activeMenuItemPanel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+                }
+            }
+            if (type === 'click') {
+                const appMenuElement = GmailElementGetter.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
+                for (const menuItem_ of appMenuElement?.querySelectorAll(`.${NATIVE_CLASS}`) ?? []) {
+                    menuItem_.classList.remove(ACTIVE);
+                    menuItem_.classList.remove(HOVER);
+                }
+                // activate menu item
+                menuItem.classList.add(ACTIVE);
+                // activate panel
+                const panel = AppMenuItemView.#menuItemToPanelMap.get(menuItem);
+                if (panel) {
+                    panel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
                 }
             }
         });
@@ -117,60 +229,61 @@ export class AppMenuItemView extends EventEmitter {
     #destroyed = false;
     #gmailViewPromise;
     #collapsiblePanel;
-    /** Denotes if either the collapsable panel or app menu item are hovered. */
-    #hovered = false;
-    menuItemDescriptor;
+    #appMenuItemStream;
+    #collapsiblePanelStream;
     constructor(driver, menuItemDescriptor) {
         super();
         this.#driver = driver;
-        this.menuItemDescriptor = menuItemDescriptor;
         const gmailAppMenuItemView = this.#driver.addAppMenuItem(menuItemDescriptor);
         this.#gmailViewPromise = gmailAppMenuItemView;
         gmailAppMenuItemView.then((gmailView) => {
             if (this.#destroyed || !gmailView) {
                 return; //we have been removed already
             }
-            // add callbacks and listeners here
-            gmailView.on('click', this.#onClick);
-            gmailView.on('destroy', () => this.remove());
-            gmailView.on('blur', this.#onBlur);
-            gmailView.on('hover', this.#onHover);
-            // handle routing
-            driver.getRouteViewDriverStream().onValue((routeView) => {
-                const routeViewID = routeView.getRouteID();
-                const routeViewParams = routeView.getParams();
-                const routeViewType = routeView.getRouteType();
-                // Ignore custom routes that don't have a route id
-                // TODO fix chat/spaces routes to have NATIVE routeViewTypes so we can gate on that instead.
-                if (!(routeViewType === 'UNKNOWN' && routeViewID === null)) {
-                    console.log({ routeViewID, routeViewType });
-                    if (routeViewType !== 'CUSTOM') {
-                        prevNative.route === document.location.hash;
-                    }
-                }
-                const { activeRouteID, routeID, routeParams, activeRouteParams } = gmailView.menuItemDescriptor ?? {};
-                let isActive = isEqual(activeRouteID || routeID, routeViewID);
-                if (isActive) {
-                    if (activeRouteParams) {
-                        isActive = isEqual(activeRouteParams, routeViewParams);
-                    }
-                    else if (routeParams) {
-                        isActive = isEqual(routeParams, routeViewParams);
-                    }
-                }
-                // deactivation is handled by the native menu item change stream
-                if (isActive) {
-                    this.#activate();
-                }
+            const gmailElement = gmailView.element;
+            if (gmailElement) {
+                AppMenuItemView.#menuItemToPanelMap.set(gmailElement, undefined);
+            }
+            this.#appMenuItemStream = Kefir.stream((emitter) => {
+                gmailView.on('destroy', () => {
+                    emitter.end();
+                    this.remove();
+                });
+                gmailView.on('click', () => {
+                    emitter.emit(['click', gmailElement]);
+                    this.emit('click');
+                });
+                gmailView.on('hover', (e) => {
+                    emitter.emit(['mouseenter', gmailElement, e]);
+                    this.emit('hover');
+                });
+                gmailView.on('blur', (e) => {
+                    emitter.emit(['mouseleave', gmailElement, e]);
+                    this.emit('blur');
+                });
             });
+            AppMenuItemView.#menuItemChangeStream.plug(this.#appMenuItemStream);
+            AppMenuItemView.#setUpRouteViewDriverStream(driver);
+            AppMenuItemView.#appMenuItemViews.add(this);
         });
-        AppMenuItemView.#customMenuItems.add(this);
     }
     async addCollapsiblePanel(panelDescriptor) {
         const collapsiblePanel = await addCollapsiblePanel(this.#driver, panelDescriptor);
         if (collapsiblePanel) {
-            collapsiblePanel.on('blur', this.#onBlur);
-            collapsiblePanel.on('hover', this.#onHover);
+            this.#gmailViewPromise.then((gmailView) => {
+                const gmailElement = gmailView.element;
+                if (gmailElement) {
+                    this.#collapsiblePanelStream = Kefir.stream((emitter) => {
+                        collapsiblePanel.on('blur', (e) => {
+                            emitter.value(['mouseleave', gmailElement, e]);
+                        });
+                    });
+                    AppMenuItemView.#menuItemChangeStream.plug(this.#collapsiblePanelStream);
+                }
+                if (gmailElement && collapsiblePanel) {
+                    AppMenuItemView.#menuItemToPanelMap.set(gmailElement, collapsiblePanel.element);
+                }
+            });
         }
         this.#collapsiblePanel = collapsiblePanel;
         return collapsiblePanel;
@@ -183,18 +296,21 @@ export class AppMenuItemView extends EventEmitter {
         if (this.#destroyed)
             return;
         this.#destroyed = true;
-        AppMenuItemView.#customMenuItems.delete(this);
         this.emit('destroy');
         this.#collapsiblePanel?.remove();
-        this.#gmailViewPromise.then((gmailView) => gmailView.remove());
-    }
-    async #deactivate() {
-        const gmailView = await this.#gmailViewPromise;
-        gmailView.deactivate();
-        this.#collapsiblePanel?.deactivate();
+        this.#gmailViewPromise.then((gmailView) => {
+            gmailView.element &&
+                AppMenuItemView.#menuItemToPanelMap.delete(gmailView.element);
+            gmailView.remove();
+        });
+        this.#appMenuItemStream &&
+            AppMenuItemView.#menuItemChangeStream.unplug(this.#appMenuItemStream);
+        this.#collapsiblePanelStream &&
+            AppMenuItemView.#menuItemChangeStream.unplug(this.#collapsiblePanelStream);
+        AppMenuItemView.#appMenuItemViews.delete(this);
+        initialRoutingStateStopper.destroy();
     }
     async #activate() {
-        AppMenuItemView.#activePanel = this.#collapsiblePanel;
         const gmailView = await this.#gmailViewPromise;
         const appMenuElement = GmailElementGetter.getAppMenuContainer();
         const { ACTIVE } = GmailAppMenuItemView.elementCss;
@@ -205,55 +321,4 @@ export class AppMenuItemView extends EventEmitter {
         gmailView.activate();
         this.#collapsiblePanel?.activate();
     }
-    #onBlur = async (e) => {
-        const gmailView = await this.#gmailViewPromise;
-        const { relatedTarget } = e;
-        const blurringMenuItem = relatedTarget instanceof Node &&
-            gmailView.element?.contains(relatedTarget);
-        const blurringPanel = relatedTarget instanceof Node &&
-            this.#collapsiblePanel?.element?.contains(relatedTarget);
-        if (blurringMenuItem || blurringPanel) {
-            return;
-        }
-        this.#hovered = false;
-        gmailView.blur();
-        const hasActivePanel = this.#hasActivePanel();
-        this.#collapsiblePanel?.blur(hasActivePanel);
-        if (!hasActivePanel) {
-            if (AppMenuItemView.#activePanel instanceof CollapsiblePanelView) {
-                AppMenuItemView.#activePanel?.activate();
-            }
-            else if (AppMenuItemView.#activePanel instanceof HTMLElement) {
-                AppMenuItemView.#activePanel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
-            }
-        }
-        this.emit('blur');
-    };
-    #hasActivePanel() {
-        return (this.#collapsiblePanel != null &&
-            AppMenuItemView.#activePanel === this.#collapsiblePanel);
-    }
-    #onHover = async (_e) => {
-        if (this.#hovered) {
-            return;
-        }
-        this.#hovered = true;
-        const gmailView = await this.#gmailViewPromise;
-        gmailView.hover();
-        const hasActivePanel = this.#hasActivePanel();
-        if (!hasActivePanel) {
-            if (AppMenuItemView.#activePanel instanceof CollapsiblePanelView) {
-                AppMenuItemView.#activePanel?.deactivate();
-            }
-            else if (AppMenuItemView.#activePanel instanceof HTMLElement) {
-                AppMenuItemView.#activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
-            }
-        }
-        this.#collapsiblePanel?.hover(hasActivePanel);
-        this.emit('hover');
-    };
-    #onClick = () => {
-        this.#activate();
-        this.emit('click');
-    };
 }

package/src/platform-implementation-js/views/collapsible-panel-view.d.ts

@@ -4,11 +4,11 @@ import { AppMenuItemPanelDescriptor } from '../namespaces/app-menu';
 import GmailDriver from '../dom-driver/gmail/gmail-driver';
 import { NavItemDescriptor } from '../dom-driver/gmail/views/gmail-nav-item-view';
 import NavItemView from './nav-item-view';
+export declare const NATIVE_CLASS: "aqn";
+export declare const INBOXSDK_CLASS: "inboxsdk__collapsiblePanel";
 type MessageEvents = {
-    toggle: (collapsed: boolean) => void;
     destroy: () => void;
     blur: (e: MouseEvent) => void;
-    hover: (e: MouseEvent) => void;
 };
 declare const CollapsiblePanelView_base: new () => TypedEmitter<MessageEvents>;
 export declare class CollapsiblePanelView extends CollapsiblePanelView_base {
@@ -26,23 +26,10 @@ export declare class CollapsiblePanelView extends CollapsiblePanelView_base {
     get element(): HTMLElement | undefined;
     set panelDescriptor(panelDescriptor: AppMenuItemPanelDescriptor);
     constructor(driver: GmailDriver);
-    toggleCollapse(collapsed: boolean): void;
-    /**
-     * @internal
-     */
-    blur(isActivePanel: boolean): void;
-    /**
-     * @internal
-     */
-    hover(isActivePanel: boolean): void;
     /**
      * @internal
      */
     activate(): void;
-    /**
-     * @internal
-     */
-    deactivate(): void;
     remove(): void;
     addNavItem(navItemDescriptor: NavItemDescriptor | Kefir.Observable<NavItemDescriptor, any>): NavItemView | undefined;
 }

package/src/platform-implementation-js/views/collapsible-panel-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-panel-view.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/views/collapsible-panel-view.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AAEzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAIpE,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAa1C,KAAK,aAAa,GAAG;IACnB,MAAM,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9B,KAAK,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAChC,CAAC;mDAEmE,aAAa,aAAa,CAAC;AAAhG,qBAAa,oBAAqB,SAAQ,yBAAuD;;IAC/F,MAAM,CAAC,gBAAgB;;;MAGZ;IACX,MAAM,CAAC,UAAU;;;QAGf,kDAAkD;;MAEzC;IAQX,IAAI,OAAO,4BAEV;IAED,IAAI,eAAe,CAAC,eAAe,EAAE,0BAA0B,EAG9D;gBAEW,MAAM,EAAE,WAAW;IAQ/B,cAAc,CAAC,SAAS,EAAE,OAAO;IAejC;;OAEG;IACH,IAAI,CAAC,aAAa,EAAE,OAAO;IAW3B;;OAEG;IACH,KAAK,CAAC,aAAa,EAAE,OAAO;IAY5B;;OAEG;IACH,QAAQ;IAQR;;OAEG;IACH,UAAU;IAOV,MAAM;IAON,UAAU,CACR,iBAAiB,EACb,iBAAiB,GACjB,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC;CAuK/C"}
+{"version":3,"file":"collapsible-panel-view.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/views/collapsible-panel-view.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AAEzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAIpE,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,eAAO,MAAM,YAAY,OAAiB,CAAC;AAC3C,eAAO,MAAM,cAAc,8BAAwC,CAAC;AAQpE,KAAK,aAAa,GAAG;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC/B,CAAC;mDAEmE,aAAa,aAAa,CAAC;AAAhG,qBAAa,oBAAqB,SAAQ,yBAAuD;;IAC/F,MAAM,CAAC,gBAAgB;;;MAGZ;IACX,MAAM,CAAC,UAAU;;;QAGf,kDAAkD;;MAEzC;IAQX,IAAI,OAAO,4BAEV;IAED,IAAI,eAAe,CAAC,eAAe,EAAE,0BAA0B,EAG9D;gBAEW,MAAM,EAAE,WAAW;IAS/B;;OAEG;IACH,QAAQ;IAQR,MAAM;IAON,UAAU,CACR,iBAAiB,EACb,iBAAiB,GACjB,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC;CA+J/C"}

package/src/platform-implementation-js/views/collapsible-panel-view.js

@@ -6,10 +6,9 @@ import autoHtml from 'auto-html';
 import querySelector from '../lib/dom/querySelectorOrFail';
 import GmailElementGetter from '../dom-driver/gmail/gmail-element-getter';
 import NavItemView from './nav-item-view';
-const ELEMENT_CLASS = 'aqn oy8Mbf inboxsdk__collapsiblePanel';
-// const ELEMENT_CLASS_ACTIVE = `aqn oy8Mbf ${ACTIVE_CLASS_NAME_TOKEN}` as const;
-// const ELEMENT_CLASS_COLLAPSED =
-//   `aqn oy8Mbf ${COLLAPSED_CLASS_NAME_TOKEN}` as const;
+export const NATIVE_CLASS = 'aqn';
+export const INBOXSDK_CLASS = 'inboxsdk__collapsiblePanel';
+const ELEMENT_CLASS = `${NATIVE_CLASS} ${INBOXSDK_CLASS} oy8Mbf`;
 const PRIMARY_BUTTON_ELEMENT_CLASS = 'T-I T-I-KE L3';
 const PRIMARY_BUTTON_ELEMENT_SELECTOR = '.T-I.T-I-KE.L3';
 const NAV_MENU_CONTAINER_ELEMENT_SELECTOR = '.at9 .n3 .TK';
@@ -41,48 +40,9 @@ export class CollapsiblePanelView extends EventEmitter {
         super();
         this.#driver = driver;
         this.#element = this.#setupElement();
-        this.#element.addEventListener('mouseover', this.#onHover);
-        this.#element.addEventListener('mouseout', this.#onBlur);
-    }
-    toggleCollapse(collapsed) {
-        const element = this.element;
-        if (!element)
-            return;
-        const { COLLAPSED } = CollapsiblePanelView.elementCss;
-        if (collapsed) {
-            element.classList.add(COLLAPSED);
-        }
-        else {
-            element.classList.remove(COLLAPSED);
-        }
-        this.emit('toggle', collapsed);
-    }
-    /**
-     * @internal
-     */
-    blur(isActivePanel) {
-        const { element } = this;
-        if (!element)
-            return;
-        element.classList.remove(CollapsiblePanelView.elementCss.HOVER);
-        if (!isActivePanel) {
-            element.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
-        }
-        element.style.removeProperty('height');
-    }
-    /**
-     * @internal
-     */
-    hover(isActivePanel) {
-        const { element } = this;
-        const { ACTIVE, HOVER } = CollapsiblePanelView.elementCss;
-        if (!element || element.classList.contains(ACTIVE))
-            return;
-        element.classList.add(HOVER);
-        if (!isActivePanel) {
-            element.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
-        }
-        element.style.cssText = 'height: 785px;';
+        this.#element.addEventListener('mouseleave', (e) => {
+            this.emit('blur', e);
+        });
     }
     /**
      * @internal
@@ -94,15 +54,6 @@ export class CollapsiblePanelView extends EventEmitter {
         element?.classList.remove(CollapsiblePanelView.elementCss.HOVER);
         element.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
     }
-    /**
-     * @internal
-     */
-    deactivate() {
-        const element = this.element;
-        if (!element)
-            return;
-        element.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
-    }
     remove() {
         if (this.#destroyed)
             return;
@@ -213,10 +164,4 @@ export class CollapsiblePanelView extends EventEmitter {
         }
         buttonTextEl.textContent = this.#panelDescriptor?.primaryButton?.name ?? '';
     }
-    #onBlur = (e) => {
-        this.emit('blur', e);
-    };
-    #onHover = (e) => {
-        this.emit('hover', e);
-    };
 }