@inboxsdk/core 2.1.57 → 2.1.58-0

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.57-1716943847351-d4f3e466da54c4c2";
+const BUILD_VERSION = "2.1.58-0-1717520185507-d238ab15d8afd0c8-MODIFIED";
 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.57-1716943847351-d4f3e466da54c4c2");
+              "2.1.58-0-1717520185507-d238ab15d8afd0c8-MODIFIED");
               document.head.append(htmlElement);
             };
 options.domAPI = (styleDomAPI_default());
@@ -9292,7 +9292,7 @@ function createIconImgElement(iconUrl, containerElement, append, insertBeforeEl)
 // TODO make this return a class instead of taking the iconSettings state object
 function updateIcon(iconSettings, containerElement, append, newIconClass, newIconUrl, insertBeforeEl,
 // Should not be used with append: true — the append flag will override
-newIconHtml) {
+newIconHtml, iconLiga) {
   if (append && insertBeforeEl) throw new Error('append and insertBeforeEl should not be used together');
 
   // if iconHtml exists, class or url presents just throw error
@@ -9331,6 +9331,9 @@ newIconHtml) {
     if (!iconSettings.iconElement) {
       iconSettings.iconElement = createIconElement(containerElement, append, insertBeforeEl);
     }
+    if (iconLiga) {
+      iconSettings.iconElement.innerText = iconLiga;
+    }
     iconSettings.iconElement.setAttribute('class', 'inboxsdk__button_icon ' + newIconClass);
     if (iconSettings.iconHtmlElement) {
       iconSettings.iconHtmlElement.remove();
@@ -10194,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.57-1716943847351-d4f3e466da54c4c2");
+              "2.1.58-0-1717520185507-d238ab15d8afd0c8-MODIFIED");
               document.head.append(htmlElement);
             };
 options.domAPI = (styleDomAPI_default());
@@ -11323,7 +11326,7 @@ if (!globalThis.__InboxSDKImpLoader) {
       await onready;
       const {
         makePlatformImplementation
-      } = await Promise.resolve(/* import() eager */).then(__webpack_require__.bind(__webpack_require__, 7098));
+      } = await Promise.resolve(/* import() eager */).then(__webpack_require__.bind(__webpack_require__, 932));
       return makePlatformImplementation(appId, opts, {
         piMainStarted,
         piLoadStarted,
@@ -11470,7 +11473,7 @@ class Keyboard {
 
 /***/ }),
 
-/***/ 7098:
+/***/ 932:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -14923,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.57-1716943847351-d4f3e466da54c4c2");
+              "2.1.58-0-1717520185507-d238ab15d8afd0c8-MODIFIED");
               document.head.append(htmlElement);
             };
 options.domAPI = (styleDomAPI_default());
@@ -16708,11 +16711,15 @@ const navItemTypes = Object.freeze({
    * nav item that looks like a link
    */
   LINK: 'LINK',
-  // nav item for logical grouping. In Gmailv2, the entire nav item can be clicked to expand/collapse its children and it ignores all NavItemDescriptor options other than `name` and `subtitle`.
-  // Behaves identically to NAVIGATION when in Gmailv1.
+  /**
+   * nav item for logical grouping. In Gmailv2, the entire nav item can be clicked to expand/collapse its children
+   * and it ignores all NavItemDescriptor options other than `name` and `subtitle`.
+   * Behaves identically to NAVIGATION when in Gmailv1.
+   */
   GROUPER: 'GROUPER',
-  // Old alias for LINK
-  MANAGE: 'MANAGE'
+  /** Old alias for LINK */
+  MANAGE: 'MANAGE',
+  SECTION: 'SECTION'
 });
 /* harmony default export */ const nav_item_types = (navItemTypes);
 ;// CONCATENATED MODULE: ./src/platform-implementation-js/views/nav-item-view.ts
@@ -16721,31 +16728,30 @@ const navItemTypes = Object.freeze({
 
 
 
-
-const nav_item_view_memberMap = new WeakMap();
 class NavItemView extends safe_event_emitter/* default */.A {
+  #appId;
+  #driver;
+  #navItemDescriptorPropertyStream;
+  #navItemViews = [];
+  #navItemViewDriver = null;
+  #navItemViewDriverPromise;
   destroyed = false;
   constructor(appId, driver, navItemDescriptorPropertyStream, navItemViewDriverPromise) {
     super();
-    const members = {
-      appId,
-      driver,
-      navItemDescriptorPropertyStream,
-      navItemViews: [],
-      navItemViewDriver: null,
-      navItemViewDriverPromise
-    };
-    nav_item_view_memberMap.set(this, members);
+    this.#appId = appId;
+    this.#driver = driver;
+    this.#navItemDescriptorPropertyStream = navItemDescriptorPropertyStream;
+    this.#navItemViewDriverPromise = navItemViewDriverPromise;
     driver.getStopper().onValue(this.remove.bind(this));
     navItemViewDriverPromise.then(navItemViewDriver => {
       if (this.destroyed || !navItemViewDriver) {
         return; //we have been removed already
       }
 
-      const driver = members.driver;
-      members.navItemViewDriver = navItemViewDriver;
-      members.navItemDescriptorPropertyStream.sampledBy(navItemViewDriver.getEventStream(), (a, b) => [a, b]).onValue(navItemDescriptor => _handleViewDriverStreamEvent(this, navItemViewDriver, driver, navItemDescriptor));
-      kefir_esm["default"].combine([members.navItemDescriptorPropertyStream, driver.getRouteViewDriverStream()]).takeUntilBy(navItemViewDriver.getEventStream().filter(() => false).beforeEnd(() => null)).onValue(x => {
+      const driver = this.#driver;
+      this.#navItemViewDriver = navItemViewDriver;
+      this.#navItemDescriptorPropertyStream.sampledBy(navItemViewDriver.getEventStream(), (a, b) => [a, b]).onValue(navItemDescriptor => this.#handleViewDriverStreamEvent(navItemViewDriver, navItemDescriptor));
+      kefir_esm["default"].combine([this.#navItemDescriptorPropertyStream, driver.getRouteViewDriverStream()]).takeUntilBy(navItemViewDriver.getEventStream().filter(() => false).beforeEnd(() => null)).onValue(x => {
         _handleRouteViewChange(navItemViewDriver, x);
       });
       this.emit('inserted');
@@ -16753,13 +16759,12 @@ class NavItemView extends safe_event_emitter/* default */.A {
   }
   addNavItem(navItemDescriptor) {
     if (this.destroyed) throw new Error('this nav item view does not exist');
-    const members = (0,get_or_fail/* default */.A)(nav_item_view_memberMap, this);
-    const driver = members.driver;
-    const appId = members.appId;
-    const navItemViews = members.navItemViews;
+    const driver = this.#driver;
+    const appId = this.#appId;
+    const navItemViews = this.#navItemViews;
     const navItemDescriptorPropertyStream = kefir_cast_default()(kefir_esm["default"], navItemDescriptor).toProperty();
-    const childNavItemView = new NavItemView(appId, driver, navItemDescriptorPropertyStream, members.navItemViewDriverPromise.then(navItemViewDriver => {
-      const childNavItemViewDriver = navItemViewDriver.addNavItem(members.appId, navItemDescriptorPropertyStream);
+    const childNavItemView = new NavItemView(appId, driver, navItemDescriptorPropertyStream, this.#navItemViewDriverPromise.then(navItemViewDriver => {
+      const childNavItemViewDriver = navItemViewDriver.addNavItem(this.#appId, navItemDescriptorPropertyStream);
       return childNavItemViewDriver;
     }));
     navItemViews.push(childNavItemView);
@@ -16769,22 +16774,18 @@ class NavItemView extends safe_event_emitter/* default */.A {
     if (this.destroyed) {
       return;
     }
-    const members = (0,get_or_fail/* default */.A)(nav_item_view_memberMap, this);
-    const {
-      navItemViews
-    } = members;
+    const navItemViews = this.#navItemViews;
     this.destroyed = true;
     this.emit('destroy');
     navItemViews.forEach(function (navItemView) {
       navItemView.remove();
     });
-    members.navItemViewDriverPromise.then(navItemViewDriver => {
+    this.#navItemViewDriverPromise.then(navItemViewDriver => {
       navItemViewDriver.destroy();
     });
   }
   isCollapsed() {
-    const members = (0,get_or_fail/* default */.A)(nav_item_view_memberMap, this);
-    const navItemViewDriver = members.navItemViewDriver;
+    const navItemViewDriver = this.#navItemViewDriver;
     if (navItemViewDriver) {
       return navItemViewDriver.isCollapsed();
     } else {
@@ -16792,43 +16793,43 @@ class NavItemView extends safe_event_emitter/* default */.A {
     }
   }
   setCollapsed(collapseValue) {
-    (0,get_or_fail/* default */.A)(nav_item_view_memberMap, this).navItemViewDriverPromise.then(navItemViewDriver => {
+    this.#navItemViewDriverPromise.then(navItemViewDriver => {
       navItemViewDriver.setCollapsed(collapseValue);
     });
   }
   getElement() {
-    return (0,get_or_fail/* default */.A)(nav_item_view_memberMap, this).navItemViewDriverPromise.then(navItemViewDriver => navItemViewDriver.getElement());
+    return this.#navItemViewDriverPromise.then(navItemViewDriver => navItemViewDriver.getElement());
   }
-}
-function _handleViewDriverStreamEvent(eventEmitter, navItemViewDriver, driver, _ref) {
-  let [navItemDescriptor, event] = _ref;
-  switch (event.eventName) {
-    case 'click':
-      // When in Gmailv2, we ignore the onClick, routeID, and routeParams options on GROUPER nav-items
-      if (navItemDescriptor.type === nav_item_types.GROUPER) return;
-      if (typeof navItemDescriptor.onClick === 'function') {
-        let defaultPrevented = false;
-        const syntheticEvent = {
-          preventDefault() {
-            defaultPrevented = true;
+  #handleViewDriverStreamEvent(navItemViewDriver, _ref) {
+    let [navItemDescriptor, event] = _ref;
+    switch (event.eventName) {
+      case 'click':
+        // When in Gmailv2, we ignore the onClick, routeID, and routeParams options on GROUPER nav-items
+        if (navItemDescriptor.type === nav_item_types.GROUPER) return;
+        if (typeof navItemDescriptor.onClick === 'function') {
+          let defaultPrevented = false;
+          const syntheticEvent = {
+            preventDefault() {
+              defaultPrevented = true;
+            }
+          };
+          // TODO: is this synthetic event ever used?
+          navItemDescriptor.onClick(syntheticEvent);
+          if (defaultPrevented) {
+            break;
           }
-        };
-        // TODO: is this synthetic event ever used?
-        navItemDescriptor.onClick(syntheticEvent);
-        if (defaultPrevented) {
-          break;
         }
-      }
-      if (navItemDescriptor.routeID) {
-        driver.goto(navItemDescriptor.routeID, navItemDescriptor.routeParams);
-      } else {
-        navItemViewDriver.toggleCollapse();
-      }
-      break;
-    case 'expanded':
-    case 'collapsed':
-      eventEmitter.emit(event.eventName);
-      break;
+        if (navItemDescriptor.routeID) {
+          this.#driver.goto(navItemDescriptor.routeID, navItemDescriptor.routeParams);
+        } else {
+          navItemViewDriver.toggleCollapse();
+        }
+        break;
+      case 'expanded':
+      case 'collapsed':
+        this.emit(event.eventName);
+        break;
+    }
   }
 }
 function _handleRouteViewChange(navItemViewDriver, _ref2) {
@@ -16865,7 +16866,7 @@ class NativeNavItemView extends safe_event_emitter/* default */.A {
   }
   addNavItem(navItemDescriptor) {
     const members = (0,get_or_fail/* default */.A)(native_nav_item_view_memberMap, this);
-    const navItemDescriptorPropertyStream = kefir_cast_default()(kefir_esm["default"], navItemDescriptor).toProperty();
+    const navItemDescriptorPropertyStream = kefir_cast_default()(kefir_esm, navItemDescriptor).toProperty();
     const childNavItemView = new NavItemView(members.appId, members.driver, navItemDescriptorPropertyStream, members.navItemViewDriverPromise.then(navItemViewDriver => {
       const childNavItemViewDriver = navItemViewDriver.addNavItem(members.appId, navItemDescriptorPropertyStream);
       return childNavItemViewDriver;
@@ -17222,6 +17223,7 @@ class GmailAppMenuItemView extends events.EventEmitter {
 const collapsible_panel_view_NATIVE_CLASS = 'aqn';
 const collapsible_panel_view_INBOXSDK_CLASS = 'inboxsdk__collapsiblePanel';
 const collapsible_panel_view_ELEMENT_CLASS = `${collapsible_panel_view_NATIVE_CLASS} ${collapsible_panel_view_INBOXSDK_CLASS} oy8Mbf`;
+const PANEL_NAV_ITEMS_CONTAINER_CLASS = 'inboxsdk__collapsiblePanel_navItems';
 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';
@@ -17229,7 +17231,7 @@ const scrollablePanelSelector = `.${scrollablePanelClass}`;
 const loadingElementClass = 'inboxsdk__collapsiblePanel_loading_container';
 const panelLoadingClass = `${loadingElementClass}--active`;
 const loadingElementSelector = `.${loadingElementClass}`;
-const NAV_MENU_CONTAINER_ELEMENT_SELECTOR = '.at9 .n3 .TK';
+const panelNavItemsContainerSelector = `.${PANEL_NAV_ITEMS_CONTAINER_CLASS}`;
 /**
  * Each AppMenuItem can have a CollapsiblePanelView.
  *
@@ -17254,9 +17256,9 @@ class CollapsiblePanelView extends safe_event_emitter/* default */.A {
   #element;
   #destroyed = false;
   #id = Math.random().toFixed(3);
-  #ARIA_LABELLED_BY_ID = Math.random().toFixed(3);
   #driver;
   #loading;
+  #orderGroup = `collapsible-panel-${this.#id}-nav-item`;
   get loading() {
     return this.#loading;
   }
@@ -17321,11 +17323,10 @@ class CollapsiblePanelView extends safe_event_emitter/* default */.A {
     const {
       element
     } = this;
-    const navMenuContainerElement = (0,querySelectorOrFail/* default */.A)(element, NAV_MENU_CONTAINER_ELEMENT_SELECTOR);
-    const appId = `collapsible-panel-${this.#id}`;
+    const orderGroup = this.#orderGroup;
     const navItemDescriptorPropertyStream = kefir_cast_default()(kefir_esm, navItemDescriptor).toProperty();
-    const gmailNavItemView = this.#driver.addNavItem(appId, navItemDescriptorPropertyStream, navMenuContainerElement);
-    const navItemView = new NavItemView(appId, this.#driver, navItemDescriptorPropertyStream, gmailNavItemView);
+    const gmailNavItemView = this.#driver.addNavItemToPanel(orderGroup, navItemDescriptorPropertyStream, element);
+    const navItemView = new NavItemView(orderGroup, this.#driver, navItemDescriptorPropertyStream, gmailNavItemView);
     return navItemView;
   }
   #extractPrimaryButtonTheme() {
@@ -17388,20 +17389,8 @@ class CollapsiblePanelView extends safe_event_emitter/* default */.A {
           <div class="Ls77Lb aZ6">
             <div class="pp" style="user-select: none;">
               <div>
-                <div class="nM">
+                <div class="${`nM ${PANEL_NAV_ITEMS_CONTAINER_CLASS}`}">
                   <div class="aic"></div>
-                  <div class="yJ">
-                    <div class="ajl aib aZ6" aria-labelledby="${this.#ARIA_LABELLED_BY_ID}">
-                      <h2 class="aWk" id="${this.#ARIA_LABELLED_BY_ID}">Labels</h2>
-                      <div class="wT">
-                        <div class="n3">
-                          <div class="byl">
-                            <div class="TK"></div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
                 </div>
               </div>
             </div>
@@ -19546,7 +19535,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.57-1716943847351-d4f3e466da54c4c2");
+              "2.1.58-0-1717520185507-d238ab15d8afd0c8-MODIFIED");
               document.head.append(htmlElement);
             };
 mole_view_module_options.domAPI = (styleDomAPI_default());
@@ -20964,6 +20953,80 @@ function renderCustomIcon(containerElement, customIconElement, append, insertBef
     containerElement.insertBefore(containerElement, insertBeforeEl || containerElement.firstElementChild);
   }
 }
+;// CONCATENATED MODULE: ./src/platform-implementation-js/dom-driver/gmail/gmail-driver/nav-item-section.ts
+
+
+
+
+const NAV_ITEM_SECTION_CLASS_NAME = 'inboxsdk__navItem_section';
+const SECTION_LIST_CLASS_NAME = 'inboxsdk__navItem_section_list';
+const getSectionListSelector = sectionKey => `.${SECTION_LIST_CLASS_NAME}[data-section-key="${sectionKey}"]`;
+const SECTION_ITEMS_CLASS_NAME = 'inboxsdk__navItem_section_list_items';
+const getSectionItemsSelector = sectionKey => `.${SECTION_ITEMS_CLASS_NAME}[data-section-key="${sectionKey}"]`;
+function createSectionNavItemsContainer() {
+  let sectionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
+  let orderGroup = arguments.length > 1 ? arguments[1] : undefined;
+  let orderHint = arguments.length > 2 ? arguments[2] : undefined;
+  let insertionOrderHint = arguments.length > 3 ? arguments[3] : undefined;
+  const element = document.createElement('div');
+  element.classList.add('yJ', SECTION_LIST_CLASS_NAME);
+  element.dataset.sectionKey = sectionKey;
+  if (orderGroup) {
+    element.setAttribute('data-group-order-hint', orderGroup);
+  }
+  if (orderHint) {
+    element.setAttribute('data-order-hint', orderHint.toString());
+  }
+  if (insertionOrderHint) {
+    element.setAttribute('data-insertion-order-hint', insertionOrderHint.toString());
+  }
+  const ARIA_LABELLED_BY_ID = Math.random().toFixed(3);
+  element.innerHTML = auto_html_js_default()`
+    <div class="ajl aib aZ6" aria-labelledby="${ARIA_LABELLED_BY_ID}">
+      <h2 class="aWk" id="${ARIA_LABELLED_BY_ID}">Labels</h2>
+      <div class="wT">
+        <div class="n3">
+          <div class="byl">
+            <div class="TK ${SECTION_ITEMS_CLASS_NAME}" data-section-key="${sectionKey}"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+  return element;
+}
+function getPanelSectionNavItemContainerElement(panelElement) {
+  return (0,querySelectorOrFail/* default */.A)(panelElement, panelNavItemsContainerSelector);
+}
+function getPanelNavItemContainerElement(panelElement) {
+  let sectionKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
+  let orderGroup = arguments.length > 2 ? arguments[2] : undefined;
+  let orderHint = arguments.length > 3 ? arguments[3] : undefined;
+  let insertionOrderHint = arguments.length > 4 ? arguments[4] : undefined;
+  const sectionNavItemsContainer = panelElement.querySelector(getSectionListSelector(sectionKey));
+  if (!sectionNavItemsContainer) {
+    const container = createSectionNavItemsContainer(sectionKey, orderGroup, orderHint, insertionOrderHint);
+    const panelNavItemsContainer = panelElement.querySelector(panelNavItemsContainerSelector);
+    if (!panelNavItemsContainer) {
+      return panelElement;
+    }
+    (0,insert_element_in_order/* default */.A)(panelNavItemsContainer, container);
+  }
+  return (0,querySelectorOrFail/* default */.A)(panelElement, getSectionItemsSelector(sectionKey));
+}
+function getSectionNavItemsContainerElement(sectionElement) {
+  let sectionKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
+  let orderGroup = arguments.length > 2 ? arguments[2] : undefined;
+  let orderHint = arguments.length > 3 ? arguments[3] : undefined;
+  let insertionOrderHint = arguments.length > 4 ? arguments[4] : undefined;
+  const parent = sectionElement.parentElement;
+  const sectionNavItemsContainer = parent.querySelector(getSectionListSelector(sectionKey));
+  if (!sectionNavItemsContainer) {
+    const container = createSectionNavItemsContainer(sectionKey, orderGroup, orderHint, insertionOrderHint);
+    (0,insert_element_in_order/* default */.A)(parent, container);
+  }
+  return (0,querySelectorOrFail/* default */.A)(parent, getSectionItemsSelector(sectionKey));
+}
 ;// CONCATENATED MODULE: ./src/platform-implementation-js/dom-driver/gmail/views/gmail-nav-item-view.ts
 
 
@@ -20983,6 +21046,7 @@ function renderCustomIcon(containerElement, customIconElement, append, insertBef
 
 
 
+
 let NUMBER_OF_GMAIL_NAV_ITEM_VIEWS_CREATED = 0;
 const GMAIL_V2_LEFT_INDENTATION_PADDING = 12;
 // TODO could we recreate this with React? There's so much statefulness that it's
@@ -20990,6 +21054,7 @@ const GMAIL_V2_LEFT_INDENTATION_PADDING = 12;
 class GmailNavItemView {
   _accessory = null;
   _accessoryViewController = null;
+  #eventStream;
   _expandoElement = null;
   _iconSettings = {};
   _isActive = false;
@@ -20998,44 +21063,56 @@ class GmailNavItemView {
   _name = '';
   _type = null;
   _collapseKey = null;
+  #sectionKey;
 
   // delete after new left nav is fully launched, use this._level === 1 instead
 
+  get sectionKey() {
+    return this.#sectionKey;
+  }
   constructor(driver, orderGroup, level) {
     this._driver = driver;
-    this._eventStream = kefir_bus_default()();
+    this.#eventStream = kefir_bus_default()();
     this._level = level || 0;
     this._navItemNumber = ++NUMBER_OF_GMAIL_NAV_ITEM_VIEWS_CREATED;
     this._orderGroup = orderGroup;
     this._isNewLeftNavParent = !gmail_element_getter/* default */.A.shouldAddNavItemsInline() && this._level === 1;
-    if (this._isNewLeftNavParent) {
-      this._element = this._setupParentElement();
+    this._element = this.#setupElement();
+  }
+  #setupElement(navItemDescriptor) {
+    if (this._isNewLeftNavParent && navItemDescriptor?.type !== nav_item_types.SECTION) {
+      return this._setupParentElement();
+    } else if (navItemDescriptor?.type === nav_item_types.SECTION) {
+      return this.#setupSectionElement();
     } else {
-      this._element = this._setupChildElement();
+      return this._setupChildElement();
     }
   }
   addNavItem(orderGroup, navItemDescriptor) {
-    const nestedNavItemLevel = this._type === nav_item_types.GROUPER ? this._level : this._level + 1;
+    const nestedNavItemLevel = this._type === nav_item_types.GROUPER || this.isSection() ? this._level : this._level + 1;
     const gmailNavItemView = new GmailNavItemView(this._driver, orderGroup, nestedNavItemLevel);
     gmailNavItemView.getEventStream().filter(event => event.eventName === 'orderChanged').onValue(() => this._addNavItemElement(gmailNavItemView));
     gmailNavItemView.setNavItemDescriptor(navItemDescriptor);
-    if (this._isNewLeftNavParent) {
+    if (this._isNewLeftNavParent && !gmailNavItemView.isSection()) {
       this._createExpandoParent();
     }
     return gmailNavItemView;
   }
-  destroy() {
-    this._element.remove();
+  #cleanupDOMElements() {
     if (this._accessoryViewController) this._accessoryViewController.destroy();
-    if (this._eventStream) this._eventStream.end();
     if (this._expandoElement) this._expandoElement.remove();
     if (this._itemContainerElement) this._itemContainerElement.remove();
   }
+  destroy() {
+    this._element.remove();
+    if (this.#eventStream) this.#eventStream.end();
+    this.#cleanupDOMElements();
+  }
   getElement() {
     return this._element;
   }
   getEventStream() {
-    return this._eventStream;
+    return this.#eventStream;
   }
   getNavItemDescriptor() {
     return this._navItemDescriptor;
@@ -21052,11 +21129,14 @@ class GmailNavItemView {
   isCollapsed() {
     return this._isCollapsed;
   }
+  isSection() {
+    return this._type === nav_item_types.SECTION;
+  }
   remove() {
     this.destroy();
   }
   setActive(value) {
-    if (!this._element || this._type === nav_item_types.LINK || this._type === nav_item_types.MANAGE || this._isActive === value || this._isNewLeftNavParent) {
+    if (!this._element || this._type === nav_item_types.LINK || this._type === nav_item_types.MANAGE || this._isActive === value || this._isNewLeftNavParent || this.isSection()) {
       return;
     }
     const toElement = (0,querySelectorOrFail/* default */.A)(this._element, '.TO');
@@ -21093,7 +21173,7 @@ class GmailNavItemView {
     }
   }
   setNavItemDescriptor(navItemDescriptorPropertyStream) {
-    navItemDescriptorPropertyStream.takeUntilBy(this._eventStream.filter(() => false).beforeEnd(() => null)).onValue(x => this._updateValues(x));
+    navItemDescriptorPropertyStream.takeUntilBy(this.#eventStream.filter(() => false).beforeEnd(() => null)).onValue(x => this.#updateValues(x));
   }
   toggleCollapse() {
     this.setCollapsed(!this._isCollapsed);
@@ -21104,6 +21184,9 @@ class GmailNavItemView {
     const itemContainerElement = this._getItemContainerElement();
     const insertBeforeElement = getInsertBeforeElement(gmailNavItemView.getElement(), itemContainerElement.children, ['data-group-order-hint', 'data-order-hint', 'data-insertion-order-hint']);
     itemContainerElement.insertBefore(gmailNavItemView.getElement(), insertBeforeElement);
+    if (gmailNavItemView.isSection() || this.isSection()) {
+      return;
+    }
 
     // If the current nav-item is of type GROUPER and we are in Gmailv2, then any nested nav-items
     // should be at the same indentation as the current nav-item. Somewhat confusingly, this._level
@@ -21135,7 +21218,7 @@ class GmailNavItemView {
       if (this._itemContainerElement) this._itemContainerElement.style.display = 'none';
       this._setHeights();
     }
-    this._eventStream.emit({
+    this.#eventStream.emit({
       eventName: 'collapsed'
     });
   }
@@ -21372,12 +21455,14 @@ class GmailNavItemView {
       this._setHeights();
     }
     this._isCollapsed = false;
-    this._eventStream.emit({
+    this.#eventStream.emit({
       eventName: 'expanded'
     });
   }
   _getItemContainerElement() {
-    if (this._isNewLeftNavParent) {
+    if (this.isSection()) {
+      return getSectionNavItemsContainerElement(this._element, this.#sectionKey, this._orderGroup.toString(), this._orderHint.toString(), this._navItemNumber.toString());
+    } else if (this._isNewLeftNavParent) {
       return (0,querySelectorOrFail/* default */.A)(this._element, '.TK');
     } else {
       let itemContainerElement = this._itemContainerElement;
@@ -21436,6 +21521,15 @@ class GmailNavItemView {
       accessoryViewController.showDropdown();
     });
   }
+  #setupSectionElement() {
+    const element = document.createElement('div');
+    element.classList.add('aAw', 'FgKVne', NAV_ITEM_SECTION_CLASS_NAME);
+    element.dataset.sectionKey = this.#sectionKey;
+    element.innerHTML = ['<span class="aAv inboxsdk__navItem_name" role="heading">', 'Labels', '</span>', '<div class="aAu arN" aria-label="" data-tooltip="" role="button" tabindex="0" type="button">', '</div>'].join('');
+    const innerElement = (0,querySelectorOrFail/* default */.A)(element, '.aAu');
+    this.#eventStream.plug(kefir_esm.fromEvents(innerElement, 'click').map(this._makeEventMapper('click')));
+    return element;
+  }
   _setupChildElement() {
     const element = document.createElement('div');
     element.setAttribute('class', 'aim inboxsdk__navItem');
@@ -21449,7 +21543,7 @@ class GmailNavItemView {
     kefir_esm.merge([kefir_esm.fromEvents(innerElement, 'mouseenter').map(this._makeEventMapper('mouseenter')), kefir_esm.fromEvents(innerElement, 'mouseleave').map(this._makeEventMapper('mouseleave'))]).onValue(event => {
       this._updateHighlight(event);
     });
-    this._eventStream.plug(kefir_esm.fromEvents(innerElement, 'click').map(this._makeEventMapper('click')));
+    this.#eventStream.plug(kefir_esm.fromEvents(innerElement, 'click').map(this._makeEventMapper('click')));
     return element;
   }
   _setupParentElement() {
@@ -21471,7 +21565,7 @@ class GmailNavItemView {
       this.toggleCollapse();
     });
     const innerElement = (0,querySelectorOrFail/* default */.A)(element, '.V6.CL');
-    this._eventStream.plug(kefir_esm.fromEvents(innerElement, 'click').map(this._makeEventMapper('click')));
+    this.#eventStream.plug(kefir_esm.fromEvents(innerElement, 'click').map(this._makeEventMapper('click')));
     return element;
   }
   _setupGrouper() {
@@ -21525,6 +21619,9 @@ class GmailNavItemView {
     }
   }
   _updateIcon(navItemDescriptor) {
+    if (this.isSection()) {
+      return;
+    }
     const iconContainerElement = this._isNewLeftNavParent ? (0,querySelectorOrFail/* default */.A)(this._element, '.Yh') : (0,querySelectorOrFail/* default */.A)(this._element, '.qj');
 
     // render custom icon
@@ -21532,7 +21629,7 @@ class GmailNavItemView {
       renderCustomIcon(iconContainerElement, navItemDescriptor.iconElement, navItemDescriptor.iconPosition !== 'BEFORE_NAME');
       return;
     }
-    (0,update_icon/* default */.A)(this._iconSettings, iconContainerElement, navItemDescriptor.iconPosition !== 'BEFORE_NAME', navItemDescriptor.iconClass, navItemDescriptor.iconUrl);
+    (0,update_icon/* default */.A)(this._iconSettings, iconContainerElement, navItemDescriptor.iconPosition !== 'BEFORE_NAME', navItemDescriptor.iconClass, navItemDescriptor.iconUrl, undefined, undefined, navItemDescriptor.iconLiga);
 
     // Setting the border-color of the icon container element while in Gmailv2 will trigger an SDK
     // css rule that will render a circle of border-color if the icon container element has no
@@ -21549,6 +21646,8 @@ class GmailNavItemView {
     const navItemNameElement = (0,querySelectorOrFail/* default */.A)(this._element, '.inboxsdk__navItem_name');
     navItemNameElement.textContent = name;
     navItemNameElement.setAttribute('title', name);
+    this._name = name;
+    if (this.isSection()) return;
     if (this._expandoElement) {
       this._expandoElement.title = `Expand ${name}`;
     }
@@ -21557,7 +21656,6 @@ class GmailNavItemView {
       this._element.firstElementChild?.setAttribute('data-tooltip', name);
       this._element.firstElementChild?.setAttribute('data-tooltip-align', align);
     }
-    this._name = name;
   }
   _updateOrder(navItemDescriptor) {
     this._element.setAttribute('data-group-order-hint', '' + this._orderGroup);
@@ -21565,13 +21663,16 @@ class GmailNavItemView {
     navItemDescriptor.orderHint = navItemDescriptor.orderHint || navItemDescriptor.orderHint === 0 ? navItemDescriptor.orderHint : Number.MAX_SAFE_INTEGER;
     if (navItemDescriptor.orderHint !== this._orderHint) {
       this._element.setAttribute('data-order-hint', '' + navItemDescriptor.orderHint);
-      this._eventStream.emit({
+      this.#eventStream.emit({
         eventName: 'orderChanged'
       });
     }
     this._orderHint = navItemDescriptor.orderHint;
   }
   _updateRole(routeID) {
+    if (this.isSection()) {
+      return;
+    }
     const roleElement = (0,querySelectorOrFail/* default */.A)(this._element, '.V6.CL');
     if (routeID) {
       roleElement.setAttribute('role', 'link');
@@ -21581,7 +21682,7 @@ class GmailNavItemView {
     }
   }
   _updateSubtitle(navItemDescriptor) {
-    if (this._isNewLeftNavParent) {
+    if (this._isNewLeftNavParent || this.isSection()) {
       return;
     }
     if (navItemDescriptor.accessory && !['SETTINGS_BUTTON', 'DROPDOWN_BUTTON'].includes(navItemDescriptor.accessory.type) && navItemDescriptor.type !== nav_item_types.GROUPER) {
@@ -21615,7 +21716,30 @@ class GmailNavItemView {
     }
     this._type = type;
   }
-  _updateValues(navItemDescriptor) {
+  #updateSpacing(navItemDescriptor) {
+    if (this._isNewLeftNavParent) {
+      return;
+    }
+    this._element.classList.toggle('yJ', !!navItemDescriptor.spacingAfter);
+  }
+  #updateSectionTooltip(navItemDescriptor) {
+    if (!this.isSection()) return;
+    const tooltip = navItemDescriptor.sectionTooltip;
+    if (tooltip) {
+      this._element.querySelector('.aAu')?.setAttribute('data-tooltip', tooltip);
+      this._element.querySelector('.aAu')?.setAttribute('aria-label', tooltip);
+    }
+  }
+  #updateValues(navItemDescriptor) {
+    if (navItemDescriptor.type === nav_item_types.SECTION && !this.#sectionKey) {
+      // Set up section key for the first time for the Section NavItems
+      this.#sectionKey = (Math.random() * 10000).toFixed(0);
+    }
+    if (this._navItemDescriptor?.type !== navItemDescriptor.type) {
+      this._element.remove();
+      this.#cleanupDOMElements();
+      this._element = this.#setupElement(navItemDescriptor);
+    }
     this._navItemDescriptor = navItemDescriptor;
     if (this._collapseKey == null) {
       this._collapseKey = navItemDescriptor.key || `${navItemDescriptor.name}`;
@@ -21625,6 +21749,7 @@ class GmailNavItemView {
     this._updateName(navItemDescriptor.name);
     this._updateSubtitle(navItemDescriptor);
     this._updateOrder(navItemDescriptor);
+    this.#updateSpacing(navItemDescriptor);
     if (this._isNewLeftNavParent) {
       this._updateRole(navItemDescriptor.routeID);
     }
@@ -21635,6 +21760,7 @@ class GmailNavItemView {
     this._updateAccessory(navItemDescriptor.accessory);
     this._updateIcon(navItemDescriptor);
     this._updateClickability(navItemDescriptor);
+    this.#updateSectionTooltip(navItemDescriptor);
   }
 }
 function getLeftIndentationPaddingValue() {
@@ -21649,17 +21775,36 @@ function getLeftIndentationPaddingValue() {
 
 
 
+
+function attachGmailNavItemView(gmailNavItemView, injectionContainer) {
+  try {
+    const attacher = _attachNavItemView(gmailNavItemView, injectionContainer);
+    attacher();
+    gmailNavItemView.getEventStream().filter(event => event.eventName === 'orderChanged').onValue(attacher);
+  } catch (err) {
+    lib_logger/* default */.A.error(err);
+  }
+}
 async function addNavItem(driver, orderGroup, navItemDescriptor, navMenuInjectionContainer) {
   await waitForMenuReady();
   const gmailNavItemView = new GmailNavItemView(driver, orderGroup, 1);
   gmailNavItemView.setNavItemDescriptor(navItemDescriptor);
   if (!gmail_element_getter/* default */.A.isStandalone()) {
-    try {
-      const attacher = _attachNavItemView(gmailNavItemView, navMenuInjectionContainer);
-      attacher();
-      gmailNavItemView.getEventStream().filter(event => event.eventName === 'orderChanged').onValue(attacher);
-    } catch (err) {
-      lib_logger/* default */.A.error(err);
+    attachGmailNavItemView(gmailNavItemView, navMenuInjectionContainer);
+  }
+  return gmailNavItemView;
+}
+async function addNavItemToPanel(driver, orderGroup, navItemDescriptor, panelElement) {
+  await waitForMenuReady();
+  const gmailNavItemView = new GmailNavItemView(driver, orderGroup, 1);
+  gmailNavItemView.setNavItemDescriptor(navItemDescriptor);
+  if (!gmail_element_getter/* default */.A.isStandalone()) {
+    if (gmailNavItemView.isSection()) {
+      const container = getPanelSectionNavItemContainerElement(panelElement);
+      attachGmailNavItemView(gmailNavItemView, container);
+    } else {
+      const container = getPanelNavItemContainerElement(panelElement, gmailNavItemView.sectionKey);
+      attachGmailNavItemView(gmailNavItemView, container);
     }
   }
   return gmailNavItemView;
@@ -23115,8 +23260,10 @@ class NativeGmailNavItemView {
     const itemContainerElement = this._getItemContainerElement();
     const insertBeforeElement = getInsertBeforeElement(gmailNavItemView.getElement(), itemContainerElement.children, ['data-group-order-hint', 'data-order-hint', 'data-insertion-order-hint']);
     itemContainerElement.insertBefore(gmailNavItemView.getElement(), insertBeforeElement);
-    const element = gmailNavItemView.getElement();
-    (0,querySelectorOrFail/* default */.A)(element, '.TN').style.marginLeft = getLeftIndentationPaddingValue() + 'px';
+    if (!gmailNavItemView.isSection()) {
+      const element = gmailNavItemView.getElement();
+      (0,querySelectorOrFail/* default */.A)(element, '.TN').style.marginLeft = getLeftIndentationPaddingValue() + 'px';
+    }
     this._setHeights();
   }
   _getItemContainerElement() {
@@ -23199,8 +23346,8 @@ class NativeGmailNavItemView {
     return !!this._element.querySelector('.inboxsdk__expando.aih');
   }
   _setHeights() {
-    const toElement = (0,querySelectorOrFail/* default */.A)(this._element, '.TO');
     if (this._element.classList.contains('ain') && this._itemContainerElement) {
+      const toElement = (0,querySelectorOrFail/* default */.A)(this._element, '.TO');
       this._element.style.height = '';
       const totalHeight = this._element.clientHeight;
       const itemHeight = toElement.clientHeight;
@@ -24039,6 +24186,9 @@ class GmailDriver {
   addNavItem(appId, navItemDescriptorPropertyStream, navMenuInjectionContainer) {
     return addNavItem(this, appId, navItemDescriptorPropertyStream, navMenuInjectionContainer);
   }
+  addNavItemToPanel(appId, navItemDescriptorPropertyStream, panelElement) {
+    return addNavItemToPanel(this, appId, navItemDescriptorPropertyStream, panelElement);
+  }
   addAppMenuItem(menuItemDescriptor) {
     return addAppMenuItem(this, menuItemDescriptor);
   }