@inboxsdk/core 0.2.29-alpha.2 → 0.2.29-alpha.4

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

@@ -1,11 +1,12 @@
 import Kefir from 'kefir';
-import kefirStopper from 'kefir-stopper';
 import kefirBus from 'kefir-bus';
+import cx from 'classnames';
 import EventEmitter from '../lib/safe-event-emitter';
 import { GmailAppMenuItemView, NATIVE_CLASS, INBOXSDK_CLASS, } from '../dom-driver/gmail/views/gmail-app-menu-item-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';
+import defer from '../../common/defer';
 var NativeAppMenuClassName;
 (function (NativeAppMenuClassName) {
     NativeAppMenuClassName["MAIL"] = "XJ";
@@ -33,12 +34,13 @@ const routeIDtoMenuItemClass = Object.fromEntries([
     ...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 {
     static #menuItemChangeStream = Kefir.pool();
+    static #menuItemChangeBus = kefirBus();
+    static #menuItemAddedDeferred = defer();
     static #routeViewDriverStream;
     static #menuItemToPanelMap = new Map();
     static #appMenuItemViews = new Set();
@@ -54,23 +56,18 @@ export class AppMenuItemView extends EventEmitter {
         const button = appMenuElement?.querySelector(`.${NATIVE_CLASS}.${ACTIVE}`);
         return button;
     }
+    static #isPanelLess() {
+        const activePanel = AppMenuItemView.#getActivePanel();
+        return !activePanel;
+    }
     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) => {
+        // Activate menu items on route changes. Used for deep-links, browser history navigation etc.
+        AppMenuItemView.#routeViewDriverStream.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;
@@ -81,26 +78,37 @@ export class AppMenuItemView extends EventEmitter {
                 return descriptor?.isRouteActive(routeView);
             }) ?? [];
             if (gmailView?.element) {
-                bus.emit(['click', gmailView.element]);
+                AppMenuItemView.#menuItemChangeBus.emit([
+                    'route-activated',
+                    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;
+            let menuItemClass = '';
+            if (routeViewID) {
+                menuItemClass = routeIDtoMenuItemClass[routeViewID];
+            }
+            if ((!routeViewID || !menuItemClass) && routeType !== 'CUSTOM') {
+                menuItemClass = NativeAppMenuClassName.MAIL;
+            }
+            const menuItemElement = menuItemClass &&
+                document.querySelector(`.${menuItemClass}`);
+            if (menuItemElement) {
+                AppMenuItemView.#menuItemChangeBus.emit([
+                    'route-activated',
+                    menuItemElement,
+                ]);
             }
         });
     }
     static {
-        (async () => {
+        (async function init() {
             const gmailAppMenu = await GmailElementGetter.getAppMenuAsync();
             if (!gmailAppMenu) {
                 return;
             }
+            AppMenuItemView.#menuItemChangeStream.plug(AppMenuItemView.#menuItemChangeBus);
             // Set up menu item panel -> menu collapsible panel element mappings
             for (const [menuItemClass, panelClass] of nativeButtonToPanelMap) {
                 const menuItemElement = document.querySelector(`.${NATIVE_CLASS}.${menuItemClass}`);
@@ -111,97 +119,55 @@ export class AppMenuItemView extends EventEmitter {
                     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.#menuItemAddedDeferred.promise.then(() => {
+            // Set up event listeners we use to control menu UI
+            // 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
+                const buttonElement = nativeMenuItem.querySelector('.V6.CL');
+                buttonElement?.addEventListener('mouseenter', (e) => {
+                    e.stopImmediatePropagation();
+                    AppMenuItemView.#menuItemChangeBus.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();
+                    AppMenuItemView.#menuItemChangeBus.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', () => {
+                    AppMenuItemView.#menuItemChangeBus.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) => {
+                    AppMenuItemView.#menuItemChangeBus.emit([
+                        'mouseleave',
+                        nativeMenuItem,
+                        e,
+                    ]);
+                });
+            }
+        });
+    }
     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 {
-                    // 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 (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') {
+            function handleActivate() {
                 const appMenuElement = GmailElementGetter.getAppMenuContainer();
                 // deactivate active panel
                 const activePanel = AppMenuItemView.#getActivePanel();
@@ -223,6 +189,92 @@ export class AppMenuItemView extends EventEmitter {
                     panel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
                 }
             }
+            switch (type) {
+                case 'mouseenter': {
+                    const panel = AppMenuItemView.#menuItemToPanelMap.get(menuItem);
+                    const activeMenuItem = AppMenuItemView.#getActiveMenuItem();
+                    const activePanel = AppMenuItemView.#getActivePanel();
+                    const burgerMenuOpen = GmailElementGetter.isAppBurgerMenuOpen();
+                    // hover-styled panel is displayed for collapsed burger menu
+                    if (activeMenuItem === menuItem &&
+                        activePanel === panel &&
+                        burgerMenuOpen)
+                        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);
+                        // handle burger menu collapsed
+                        if (!burgerMenuOpen) {
+                            for (const panel of document.querySelectorAll(CollapsiblePanelView.elementSelectors.NATIVE) ?? []) {
+                                panel.classList.add(CollapsiblePanelView.elementCss.COLLAPSED_HOVER);
+                            }
+                        }
+                    }
+                    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);
+                    }
+                    break;
+                }
+                case '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;
+                    const burgerMenuOpen = GmailElementGetter.isAppBurgerMenuOpen();
+                    if (activePanel === activeMenuItemPanel && burgerMenuOpen)
+                        return;
+                    // unhover menu item
+                    menuItem.classList.remove(HOVER);
+                    // handle burger menu collapsed
+                    for (const panel of document.querySelectorAll(CollapsiblePanelView.elementSelectors.NATIVE) ?? []) {
+                        panel.classList.remove(CollapsiblePanelView.elementCss.COLLAPSED_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);
+                    }
+                    break;
+                }
+                case 'click': {
+                    handleActivate();
+                    // handle panel-less mode
+                    const isPanelLess = AppMenuItemView.#isPanelLess();
+                    for (const panel of document.querySelectorAll(CollapsiblePanelView.elementSelectors.NATIVE) ?? []) {
+                        panel.classList.toggle(CollapsiblePanelView.elementCss.PANEL_LESS, isPanelLess);
+                    }
+                    GmailElementGetter.getAppMenu()?.classList.toggle('aTO', isPanelLess);
+                    GmailElementGetter.getAppHeader()?.classList.toggle('aTO', isPanelLess);
+                    break;
+                }
+                case 'route-activated': {
+                    handleActivate();
+                    break;
+                }
+            }
         });
     }
     get menuItemDescriptor() {
@@ -232,8 +284,6 @@ export class AppMenuItemView extends EventEmitter {
     #destroyed = false;
     #gmailViewPromise;
     #collapsiblePanel;
-    #appMenuItemStream;
-    #collapsiblePanelStream;
     #menuItemDescriptor;
     constructor(driver, menuItemDescriptor) {
         super();
@@ -249,41 +299,54 @@ export class AppMenuItemView extends EventEmitter {
             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');
-                });
+            gmailView.on('destroy', () => {
+                this.remove();
+            });
+            gmailView.on('click', () => {
+                AppMenuItemView.#menuItemChangeBus.emit(['click', gmailElement]);
+                this.emit('click');
+            });
+            gmailView.on('hover', (e) => {
+                AppMenuItemView.#menuItemChangeBus.emit([
+                    'mouseenter',
+                    gmailElement,
+                    e,
+                ]);
+                this.emit('hover');
+            });
+            gmailView.on('blur', (e) => {
+                AppMenuItemView.#menuItemChangeBus.emit([
+                    'mouseleave',
+                    gmailElement,
+                    e,
+                ]);
+                this.emit('blur');
             });
-            AppMenuItemView.#menuItemChangeStream.plug(this.#appMenuItemStream);
-            AppMenuItemView.#setUpRouteViewDriverStream(driver);
-            AppMenuItemView.#appMenuItemViews.add(this);
         });
+        AppMenuItemView.#setUpRouteViewDriverStream(driver);
+        AppMenuItemView.#menuItemAddedDeferred.resolve(undefined);
+        AppMenuItemView.#appMenuItemViews.add(this);
     }
     async addCollapsiblePanel(panelDescriptor) {
-        const collapsiblePanel = await addCollapsiblePanel(this.#driver, panelDescriptor);
+        const descriptor = {
+            ...panelDescriptor,
+            className: cx(panelDescriptor.className, {
+                [CollapsiblePanelView.elementCss.COLLAPSED]: !GmailElementGetter.isAppBurgerMenuOpen(),
+                [CollapsiblePanelView.elementCss.PANEL_LESS]: AppMenuItemView.#isPanelLess(),
+            }),
+        };
+        const collapsiblePanel = await addCollapsiblePanel(this.#driver, descriptor);
         if (collapsiblePanel) {
             this.#gmailViewPromise.then((gmailView) => {
                 const gmailElement = gmailView.element;
                 if (gmailElement) {
-                    this.#collapsiblePanelStream = Kefir.stream((emitter) => {
-                        collapsiblePanel.on('blur', (e) => {
-                            emitter.value(['mouseleave', gmailElement, e]);
-                        });
+                    collapsiblePanel.on('blur', (e) => {
+                        AppMenuItemView.#menuItemChangeBus.value([
+                            'mouseleave',
+                            gmailElement,
+                            e,
+                        ]);
                     });
-                    AppMenuItemView.#menuItemChangeStream.plug(this.#collapsiblePanelStream);
                 }
                 if (gmailElement && collapsiblePanel) {
                     AppMenuItemView.#menuItemToPanelMap.set(gmailElement, collapsiblePanel.element);
@@ -296,6 +359,7 @@ export class AppMenuItemView extends EventEmitter {
     async update(menuItemDescriptor) {
         const gmailView = await this.#gmailViewPromise;
         gmailView.setMenuItemDescriptor(menuItemDescriptor);
+        this.#menuItemDescriptor = menuItemDescriptor;
     }
     remove() {
         if (this.#destroyed)
@@ -308,22 +372,6 @@ export class AppMenuItemView extends EventEmitter {
                 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() {
-        const gmailView = await this.#gmailViewPromise;
-        const appMenuElement = GmailElementGetter.getAppMenuContainer();
-        const { ACTIVE } = GmailAppMenuItemView.elementCss;
-        // Note this affects both the active app menu item and the collapsible panel.
-        for (const el of appMenuElement?.querySelectorAll(`.${ACTIVE}`) ?? []) {
-            el.classList.remove(ACTIVE);
-        }
-        gmailView.activate();
-        this.#collapsiblePanel?.activate();
     }
 }

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

@@ -19,19 +19,21 @@ export declare class CollapsiblePanelView extends CollapsiblePanelView_base {
     };
     static elementCss: {
         readonly ACTIVE: "apV";
-        readonly COLLAPSED: "aBa";
+        readonly COLLAPSED: "aBA";
         /** A hover popover has both ACTIVE _and_ HOVER */
         readonly HOVER: "aJu";
+        readonly COLLAPSED_HOVER: "bym";
+        readonly PANEL_LESS: "a3W";
     };
-    get element(): HTMLElement | undefined;
+    get loading(): boolean;
+    setLoading(loading: boolean): void;
+    get panelDescriptor(): AppMenuItemPanelDescriptor;
     set panelDescriptor(panelDescriptor: AppMenuItemPanelDescriptor);
-    constructor(driver: GmailDriver);
-    /**
-     * @internal
-     */
-    activate(): void;
+    get element(): HTMLElement;
+    get scrollablePaneElement(): Element | null;
+    constructor(driver: GmailDriver, panelDescriptor: AppMenuItemPanelDescriptor);
     remove(): void;
-    addNavItem(navItemDescriptor: NavItemDescriptor | Kefir.Observable<NavItemDescriptor, any>): NavItemView | undefined;
+    addNavItem(navItemDescriptor: NavItemDescriptor | Kefir.Observable<NavItemDescriptor, any>): NavItemView;
 }
 export {};
 //# sourceMappingURL=collapsible-panel-view.d.ts.map

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;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"}
+{"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;AAapE,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;;;;MAIzC;IASX,IAAI,OAAO,YAEV;IAED,UAAU,CAAC,OAAO,EAAE,OAAO;IAS3B,IAAI,eAAe,IAIkB,0BAA0B,CAF9D;IAED,IAAI,eAAe,CAAC,eAAe,EAAE,0BAA0B,EAG9D;IAED,IAAI,OAAO,gBAEV;IAED,IAAI,qBAAqB,mBAExB;gBAGC,MAAM,EAAE,WAAW,EACnB,eAAe,EAAE,0BAA0B;IAY7C,MAAM;IAON,UAAU,CACR,iBAAiB,EACb,iBAAiB,GACjB,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC;CAsL/C"}

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

@@ -11,6 +11,10 @@ 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 scrollablePanelClass = 'at9';
+const scrollablePanelSelector = `.${scrollablePanelClass}`;
+const loadingElementClass = 'inboxsdk__collapsiblePanel_loading_container';
+const loadingElementSelector = `.${loadingElementClass}`;
 const NAV_MENU_CONTAINER_ELEMENT_SELECTOR = '.at9 .n3 .TK';
 export class CollapsiblePanelView extends EventEmitter {
     static elementSelectors = {
@@ -19,9 +23,11 @@ export class CollapsiblePanelView extends EventEmitter {
     };
     static elementCss = {
         ACTIVE: 'apV',
-        COLLAPSED: 'aBa',
+        COLLAPSED: 'aBA',
         /** A hover popover has both ACTIVE _and_ HOVER */
         HOVER: 'aJu',
+        COLLAPSED_HOVER: 'bym',
+        PANEL_LESS: 'a3W',
     };
     #panelDescriptor;
     #element;
@@ -29,42 +35,50 @@ export class CollapsiblePanelView extends EventEmitter {
     #id = Math.random().toFixed(3);
     #ARIA_LABELLED_BY_ID = Math.random().toFixed(3);
     #driver;
-    get element() {
-        return this.#element;
+    #loading;
+    get loading() {
+        return this.#loading;
+    }
+    setLoading(loading) {
+        const changed = this.#loading !== loading;
+        this.#loading = loading;
+        if (changed) {
+            this.#update();
+        }
+    }
+    get panelDescriptor() {
+        return this.#panelDescriptor;
     }
     set panelDescriptor(panelDescriptor) {
         this.#panelDescriptor = panelDescriptor;
         this.#update();
     }
-    constructor(driver) {
+    get element() {
+        return this.#element;
+    }
+    get scrollablePaneElement() {
+        return this.element.querySelector(scrollablePanelSelector);
+    }
+    constructor(driver, panelDescriptor) {
         super();
         this.#driver = driver;
+        this.#panelDescriptor = panelDescriptor;
+        this.#loading = panelDescriptor.loadingIcon != null;
         this.#element = this.#setupElement();
         this.#element.addEventListener('mouseleave', (e) => {
             this.emit('blur', e);
         });
     }
-    /**
-     * @internal
-     */
-    activate() {
-        const element = this.element;
-        if (!element)
-            return;
-        element?.classList.remove(CollapsiblePanelView.elementCss.HOVER);
-        element.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
-    }
     remove() {
         if (this.#destroyed)
             return;
         this.#destroyed = true;
-        this.element?.remove();
+        this.element.remove();
         this.emit('destroy');
     }
     addNavItem(navItemDescriptor) {
-        const element = this.element;
-        if (!element)
-            return;
+        this.setLoading(false);
+        const { element } = this;
         const navMenuContainerElement = querySelector(element, NAV_MENU_CONTAINER_ELEMENT_SELECTOR);
         const appId = `collapsible-panel-${this.#id}`;
         const navItemDescriptorPropertyStream = kefirCast(Kefir, navItemDescriptor).toProperty();
@@ -73,9 +87,11 @@ export class CollapsiblePanelView extends EventEmitter {
         return navItemView;
     }
     #setupElement() {
-        const { iconUrl: themedIcons, className, name = '', } = this.#panelDescriptor?.primaryButton ?? {};
+        const { panelDescriptor } = this;
+        const { loadingIcon } = panelDescriptor;
+        const { iconUrl: themedIcons, className, name = '', } = panelDescriptor?.primaryButton ?? {};
         const element = document.createElement('div');
-        element.className = ELEMENT_CLASS;
+        element.className = cx(ELEMENT_CLASS, this.panelDescriptor.className);
         const primaryButtonClass = cx(PRIMARY_BUTTON_ELEMENT_CLASS, className);
         let iconUrl;
         if (themedIcons) {
@@ -95,7 +111,8 @@ export class CollapsiblePanelView extends EventEmitter {
             </div>
           </div>
         </div>
-        <div class="at9">
+        <div class="${scrollablePanelClass}">
+          <div class="${loadingElementClass}">${loadingIcon ? { __html: loadingIcon } : ''}</div>
           <div class="Ls77Lb aZ6">
             <div class="pp" style="user-select: none;">
               <div>
@@ -127,25 +144,21 @@ export class CollapsiblePanelView extends EventEmitter {
         return element;
     }
     #onPrimaryButtonClick = (e) => {
-        this.#panelDescriptor?.primaryButton?.onClick?.(e);
+        this.panelDescriptor.primaryButton?.onClick?.(e);
     };
     #update() {
         const element = this.element;
         if (!element)
             return;
-        const { ACTIVE, COLLAPSED } = CollapsiblePanelView.elementCss;
-        const isActive = element.classList.contains(ACTIVE);
-        const isCollapsed = element.classList.contains(COLLAPSED);
-        element.className = cx(ELEMENT_CLASS, this.#panelDescriptor?.className, {
-            [ACTIVE]: isActive,
-            [COLLAPSED]: isCollapsed,
-        });
+        const existingClassNames = Object.values(CollapsiblePanelView.elementCss).filter((className) => element.classList.contains(className));
+        element.className = cx(ELEMENT_CLASS, this.panelDescriptor.className, ...existingClassNames);
         this.#updateName(element);
         this.#updateIcon(element);
+        this.#updateScrollablePanelLoading(element);
     }
     #updateIcon(element) {
         const iconContainerEl = querySelector(element, PRIMARY_BUTTON_ELEMENT_SELECTOR);
-        const { iconUrl, className } = this.#panelDescriptor?.primaryButton ?? {};
+        const { iconUrl, className } = this.panelDescriptor.primaryButton ?? {};
         if (iconUrl) {
             const backgroundImage = `url(${GmailElementGetter.isDarkTheme()
                 ? iconUrl.darkTheme
@@ -162,6 +175,19 @@ export class CollapsiblePanelView extends EventEmitter {
         if (!buttonTextEl) {
             return;
         }
-        buttonTextEl.textContent = this.#panelDescriptor?.primaryButton?.name ?? '';
+        buttonTextEl.textContent = this.panelDescriptor.primaryButton?.name ?? '';
+    }
+    #updateScrollablePanelLoading(element) {
+        const scrollablePanelLoadingEl = element.querySelector(loadingElementSelector);
+        if (!scrollablePanelLoadingEl) {
+            return;
+        }
+        const panelLoadingClass = `${loadingElementClass}--active`;
+        if (this.loading) {
+            scrollablePanelLoadingEl.classList.add(panelLoadingClass);
+        }
+        else {
+            scrollablePanelLoadingEl.classList.remove(panelLoadingClass);
+        }
     }
 }