@lion/ui 0.23.0 → 0.24.0

package/components/menu/src/LionMenu.js

@@ -160,7 +160,9 @@ class LionMenuCore extends MultiLevelListMixin(LitElement) {
       /**
        * Enable bar to use [role="menubar"] and horizontal navigation
        */
-      bar: { type: Boolean },
+      bar: {
+        type: Boolean,
+      },
     };
   }
 
@@ -175,7 +177,7 @@ class LionMenuCore extends MultiLevelListMixin(LitElement) {
     if (!item) return;
 
     // @ts-ignore - InteractiveListItemRole type
-    const role = /** @type {InteractiveListItemRole} */ (item.getAttribute('role'));
+    const role = /** @type {InteractiveListItemRole} */ item.getAttribute('role');
     let listItemsWithinGroup = this.listItems;
     let { multiple } = this;
     if (role === 'menuitemradio' || role === 'menuitemcheckbox') {
@@ -195,13 +197,12 @@ class LionMenuCore extends MultiLevelListMixin(LitElement) {
        */
       const closestGroup = item.closest('[role="group"]');
       const group = closestGroup && this.contains(closestGroup) ? closestGroup : this;
-      listItemsWithinGroup = this.listItems.filter(listItem => group.contains(listItem));
+      listItemsWithinGroup = this.listItems.filter((listItem) => group.contains(listItem));
       multiple = role === 'menuitemcheckbox';
     }
-
     if (!multiple) {
       // Uncheck all within group
-      listItemsWithinGroup.forEach(listItem => {
+      listItemsWithinGroup.forEach((listItem) => {
         setChecked(listItem, true);
       });
       setChecked(this.listItems[index]);
@@ -209,10 +210,8 @@ class LionMenuCore extends MultiLevelListMixin(LitElement) {
       toggleChecked(this.listItems[index]);
     }
   }
-
   constructor() {
     super();
-
     this.bar = false;
     /** @configure MultiLevelListMixin */
     this.behaveAsAccordion = true;
@@ -229,11 +228,9 @@ class LionMenuCore extends MultiLevelListMixin(LitElement) {
    */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
-
     if (this._activeMode === 'tabbable-disclosure') {
       this._listRole = 'list';
     }
-
     this._listNode.setAttribute('role', this._listRole);
 
     // Allow generic attr for functional styling
@@ -245,7 +242,6 @@ class LionMenuCore extends MultiLevelListMixin(LitElement) {
    */
   updated(changedProperties) {
     super.updated(changedProperties);
-
     if (changedProperties.has('bar')) {
       if (this.bar) {
         this.axis = 'inline';
@@ -276,52 +272,47 @@ class LionMenuCore extends MultiLevelListMixin(LitElement) {
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
 // prettier-ignore
-const OverlayWithListInvokerMixinImplementation = /** @type {OverlayWithListInvokerMixinType} */ (superclass =>
-  class OverlayWithListInvokerMixin extends OverlayMixin(InteractiveListMixin(superclass)) {
-    _onOverlayShow = () => {
-      if (this.checkedIndex != null) {
-        // @ts-ignore - activeIndex can be number or array
-        this.activeIndex = this.checkedIndex;
-      }
-    };
-
-    /**
-     * @enhance OverlayMixin
-     */
-    _setupOverlayCtrl() {
-      super._setupOverlayCtrl();
-
-      if (!this._overlayCtrl) return;
-
-      this._overlayCtrl.addEventListener('show', this._onOverlayShow);
+const OverlayWithListInvokerMixinImplementation = /** @type {OverlayWithListInvokerMixinType} */superclass => class OverlayWithListInvokerMixin extends OverlayMixin(InteractiveListMixin(superclass)) {
+  _onOverlayShow = () => {
+    if (this.checkedIndex != null) {
+      // @ts-ignore - activeIndex can be number or array
+      this.activeIndex = this.checkedIndex;
     }
+  };
 
-    /**
-     * @enhance OverlayMixin
-     */
-    _teardownOverlayCtrl() {
-      super._teardownOverlayCtrl();
-
-      if (!this._overlayCtrl) return;
+  /**
+   * @enhance OverlayMixin
+   */
+  _setupOverlayCtrl() {
+    super._setupOverlayCtrl();
+    if (!this._overlayCtrl) return;
+    this._overlayCtrl.addEventListener('show', this._onOverlayShow);
+  }
 
-      this._overlayCtrl.removeEventListener('show', this._onOverlayShow);
-    }
+  /**
+   * @enhance OverlayMixin
+   */
+  _teardownOverlayCtrl() {
+    super._teardownOverlayCtrl();
+    if (!this._overlayCtrl) return;
+    this._overlayCtrl.removeEventListener('show', this._onOverlayShow);
+  }
 
-    /**
-     * make sure OverlayMixin gets the contentNode defined by DisclosureMixin
-     */
-    get _overlayContentNode() {
-      // @ts-ignore - _contentNode property
-      return this._contentNode;
-    }
+  /**
+   * make sure OverlayMixin gets the contentNode defined by DisclosureMixin
+   */
+  get _overlayContentNode() {
+    // @ts-ignore - _contentNode property
+    return this._contentNode;
+  }
 
-    /**
-     * make sure OverlayMixin gets the invokerNode defined by DisclosureMixin
-     */
-    get _overlayInvokerNode() {
-      return /** @type {HTMLElement} */ (this._invokerNode);
-    }
-  });
+  /**
+   * make sure OverlayMixin gets the invokerNode defined by DisclosureMixin
+   */
+  get _overlayInvokerNode() {
+    return /** @type {HTMLElement} */this._invokerNode;
+  }
+};
 export const OverlayWithListInvokerMixin = dedupeMixin(OverlayWithListInvokerMixinImplementation);
 
 /**
@@ -335,10 +326,12 @@ export class LionMenu extends OverlayWithListInvokerMixin(LionMenuCore) {
   /** @returns {import('lit').PropertyDeclarations} */
   static get properties() {
     return {
-      openableMode: { type: String, attribute: 'openable-mode' },
+      openableMode: {
+        type: String,
+        attribute: 'openable-mode',
+      },
     };
   }
-
   constructor() {
     super();
 
@@ -350,7 +343,6 @@ export class LionMenu extends OverlayWithListInvokerMixin(LionMenuCore) {
      * @type {'disclosure'|'overlay'}
      */
     this.openableMode = 'disclosure';
-
     this._shouldSetupOverlay = false;
   }
 
@@ -359,7 +351,6 @@ export class LionMenu extends OverlayWithListInvokerMixin(LionMenuCore) {
    */
   updated(changedProperties) {
     super.updated(changedProperties);
-
     if (changedProperties.has('openableMode')) {
       if (this.openableMode === 'overlay') {
         this._shouldSetupOverlay = true;
@@ -393,9 +384,7 @@ export class LionMenu extends OverlayWithListInvokerMixin(LionMenuCore) {
     if (parentList?.axis !== 'inline') {
       placement = 'right-start';
     }
-
     const dropdownCfg = withDropdownConfig();
-
     return {
       ...dropdownCfg,
       hidesOnEsc: true,
@@ -422,9 +411,7 @@ export class LionMenu extends OverlayWithListInvokerMixin(LionMenuCore) {
    */
   _onListKeyUp(ev) {
     super._onListKeyUp(ev);
-
     const { key } = ev;
-
     switch (key) {
       case 'Escape':
         // We need to stop here, or else we affect parent menu (handled by OverlayController)

package/components/menu/src/MoreButtonMenuMixin.js

@@ -38,258 +38,235 @@ const styles = css`
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
 // prettier-ignore
-export const MoreButtonMenuMixin = /** @type {MoreButtonMenuMixinType} */ (superclass =>
-  class MoreButtonMenuMixinClass extends /** @type {import('@open-wc/dedupe-mixin').Constructor<MoreButtonMenuHostType>} */ (/** @type {any} */ (superclass)) {
-    /** @param {...any} args */
-    constructor(...args) {
-      super(...args);
-      this.__resizeTimeout = null;
-      this.isMoreButtonShown = null;
-      this.handleResize = this.handleResize.bind(this);
-    }
-
-    disconnectedCallback() {
-      window.removeEventListener('resize', this.handleResize);
-      if (this.__resizeTimeout) {
-        clearTimeout(this.__resizeTimeout);
-      }
-      super.disconnectedCallback?.();
+export const MoreButtonMenuMixin = /** @type {MoreButtonMenuMixinType} */superclass => class MoreButtonMenuMixinClass extends (/** @type {import('@open-wc/dedupe-mixin').Constructor<MoreButtonMenuHostType>} */ /** @type {any} */superclass) {
+  /** @param {...any} args */
+  constructor(...args) {
+    super(...args);
+    this.__resizeTimeout = null;
+    this.isMoreButtonShown = null;
+    this.handleResize = this.handleResize.bind(this);
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.handleResize);
+    if (this.__resizeTimeout) {
+      clearTimeout(this.__resizeTimeout);
     }
+    super.disconnectedCallback?.();
+  }
+  _initMoreButtonMenu() {
+    this._createMoreButtonWrapper();
+    window.addEventListener('resize', this.handleResize);
+    this.handleResize();
+  }
 
-    _initMoreButtonMenu() {
-      this._createMoreButtonWrapper();
-      window.addEventListener('resize', this.handleResize);
-      this.handleResize();
+  // eslint-disable-next-line class-methods-use-this
+  _getDeepActiveElement() {
+    let host = document.activeElement || document.body;
+    while (host?.shadowRoot?.activeElement) {
+      host = host.shadowRoot.activeElement;
     }
-
-    // eslint-disable-next-line class-methods-use-this
-    _getDeepActiveElement() {
-      let host = document.activeElement || document.body;
-      while (host?.shadowRoot?.activeElement) {
-        host = host.shadowRoot.activeElement;
+    return host;
+  }
+  _createMoreButtonWrapper() {
+    const moreButtonWrapper = document.createElement('div');
+    const style = document.createElement('style');
+    style.textContent = styles.cssText;
+    moreButtonWrapper.appendChild(style);
+    moreButtonWrapper.setAttribute('data-more-button-wrapper', '');
+    [...(this.getMoreButtonSlotProjection()?.childNodes ?? [])].forEach(node => moreButtonWrapper.appendChild(node));
+    const moreButton = moreButtonWrapper.querySelector('button');
+    moreButton?.setAttribute('data-more-button', '');
+    moreButton?.setAttribute('tabindex', '-1');
+    moreButton?.setAttribute('aria-expanded', 'false');
+    const moreButtonMenu = document.createElement('div');
+    moreButtonMenu.setAttribute('data-more-button-menu', '');
+    moreButtonMenu.setAttribute('tabindex', '-1');
+    moreButtonWrapper.appendChild(moreButtonMenu);
+    this._listNode.appendChild(moreButtonWrapper);
+    const isElementDirectFocusableItemUnderMoreButtonMenu = (/** @type {HTMLElement} */element) => this.listItems.includes(element) && moreButtonMenu.contains(element) || element === moreButtonMenu;
+    moreButtonMenu.addEventListener('focusin', (/** @type {FocusEvent} */event) => {
+      const target = /** @type {HTMLElement} */event?.target;
+      if (!isElementDirectFocusableItemUnderMoreButtonMenu(target)) return;
+
+      // If applicable hide any other L2 menus
+      /** @type {any} */
+      this.querySelector('[level="2"]:has([data-open])')?._overlayCtrl?.hide();
+
+      // A user did `Shift + Tab` from L2 menu to More menu
+      if (target?.getAttribute('aria-expanded') === 'true') {
+        // close L2 menu
+        target?.click();
       }
-      return host;
-    }
-
-    _createMoreButtonWrapper() {
-      const moreButtonWrapper = document.createElement('div');
-      const style = document.createElement('style');
-      style.textContent = styles.cssText;
-      moreButtonWrapper.appendChild(style);
-      moreButtonWrapper.setAttribute('data-more-button-wrapper', '');
-      [...(this.getMoreButtonSlotProjection()?.childNodes ?? [])].forEach(node =>
-        moreButtonWrapper.appendChild(node),
-      );
-      const moreButton = moreButtonWrapper.querySelector('button');
-      moreButton?.setAttribute('data-more-button', '');
-      moreButton?.setAttribute('tabindex', '-1');
-      moreButton?.setAttribute('aria-expanded', 'false');
-      const moreButtonMenu = document.createElement('div');
-      moreButtonMenu.setAttribute('data-more-button-menu', '');
-      moreButtonMenu.setAttribute('tabindex', '-1');
-      moreButtonWrapper.appendChild(moreButtonMenu);
-      this._listNode.appendChild(moreButtonWrapper);
-
-      const isElementDirectFocusableItemUnderMoreButtonMenu = (/** @type {HTMLElement} */ element) =>
-        (this.listItems.includes(element) && moreButtonMenu.contains(element)) ||
-        element === moreButtonMenu;
-
-      moreButtonMenu.addEventListener(
-        'focusin',
-        (/** @type {FocusEvent} */ event) => {
-          const target = /** @type {HTMLElement} */ (event?.target);
-          if (!isElementDirectFocusableItemUnderMoreButtonMenu(target)) return;
-
-          // If applicable hide any other L2 menus
-          /** @type {any} */ (this.querySelector('[level="2"]:has([data-open])'))?._overlayCtrl?.hide();
-
-          // A user did `Shift + Tab` from L2 menu to More menu
-          if (target?.getAttribute('aria-expanded') === 'true') {
-            // close L2 menu
-            target?.click();
-          }
-          moreButton?.setAttribute('aria-expanded', 'true');
-          moreButtonMenu.setAttribute('data-open', '');
-        },
-      );
-
-      moreButtonMenu.addEventListener('focusout', () => {
-        // We need this timeout for Safari/WebKit.
-        // Unfortunately, an in progress click gets canceled when overflow:hidden is applied.
-        // Although mousedown would work instead, the consuming developer should have the freedom to apply all possible interaction pattterns.
-        // Especially, we should be compatible with 'withClickInteraction'
-        setTimeout(() => {
-          if (isElementDirectFocusableItemUnderMoreButtonMenu(/** @type {HTMLElement} */ (this._getDeepActiveElement()))) return;
-          moreButton?.setAttribute('aria-expanded', 'false');
-
-          moreButtonMenu.removeAttribute('data-open');
-        }, 100);
-      });
-
-      moreButton?.addEventListener('click', () => {
-        if (moreButtonMenu.getAttribute('data-open') === null) {
-          moreButtonMenu?.focus({ preventScroll: true });
-          moreButtonMenu.setAttribute('data-open', '');
-        }
-      });
-    }
-
-    getMoreButtonSlotProjection() {
-      return this.querySelector('[slot="more-button"]');
-    }
-
-    getMoreButtonMenu() {
-      return this.querySelector('[data-more-button-menu]');
-    }
-
-    getMoreButtonMenuWrapper() {
-      return this.querySelector('[data-more-button-wrapper]');
-    }
-
-    displayMoreButton() {
-      const wrapper = /** @type {HTMLElement} */ (this.getMoreButtonMenuWrapper());
-      if (!wrapper) return;
-      wrapper.style.display = 'block';
-      this.isMoreButtonShown = true;
-    }
-
-    hideMoreButton() {
-      const wrapper = /** @type {HTMLElement} */ (this.getMoreButtonMenuWrapper());
-      if (!wrapper) return;
-      wrapper.style.display = 'none';
-      this.isMoreButtonShown = false;
-    }
-
-    doItemsFit() {
-      this.style.display = 'none';
-      const parentWidth = /** @type {HTMLElement} */ (this.parentElement).clientWidth;
-      this.style.display = '';
-      return (
-        this._listNode.scrollWidth === this._listNode.clientWidth &&
-        this._listNode.scrollWidth <= parentWidth
-      );
-    }
-
-    getListItems() {
-      const listNode = this._listNode;
-      return Array.from(listNode.querySelectorAll(':scope > [role="listitem"]'));
-    }
-
-    /**
-     * @param {Node} listItem
-     */
-    getListItemWithAdjacentNodes = listItem => {
-      const markerNodeType = this.nodeType && Node.COMMENT_NODE;
-      /** @param {Node | null | undefined} node */
-      const isMarkerComment = node => node?.nodeType === markerNodeType && node?.nodeValue === '';
-
-      const previousNodes = [];
-      let { previousSibling } = listItem;
-      while (previousSibling) {
-        if (previousSibling.nodeType === Node.ELEMENT_NODE) {
-          break;
-        }
-        previousNodes.unshift(previousSibling);
-        if (isMarkerComment(previousSibling)) {
-          break;
-        }
-        ({ previousSibling } = previousSibling);
+      moreButton?.setAttribute('aria-expanded', 'true');
+      moreButtonMenu.setAttribute('data-open', '');
+    });
+    moreButtonMenu.addEventListener('focusout', () => {
+      // We need this timeout for Safari/WebKit.
+      // Unfortunately, an in progress click gets canceled when overflow:hidden is applied.
+      // Although mousedown would work instead, the consuming developer should have the freedom to apply all possible interaction pattterns.
+      // Especially, we should be compatible with 'withClickInteraction'
+      setTimeout(() => {
+        if (isElementDirectFocusableItemUnderMoreButtonMenu(/** @type {HTMLElement} */this._getDeepActiveElement())) return;
+        moreButton?.setAttribute('aria-expanded', 'false');
+        moreButtonMenu.removeAttribute('data-open');
+      }, 100);
+    });
+    moreButton?.addEventListener('click', () => {
+      if (moreButtonMenu.getAttribute('data-open') === null) {
+        moreButtonMenu?.focus({
+          preventScroll: true
+        });
+        moreButtonMenu.setAttribute('data-open', '');
       }
+    });
+  }
+  getMoreButtonSlotProjection() {
+    return this.querySelector('[slot="more-button"]');
+  }
+  getMoreButtonMenu() {
+    return this.querySelector('[data-more-button-menu]');
+  }
+  getMoreButtonMenuWrapper() {
+    return this.querySelector('[data-more-button-wrapper]');
+  }
+  displayMoreButton() {
+    const wrapper = /** @type {HTMLElement} */this.getMoreButtonMenuWrapper();
+    if (!wrapper) return;
+    wrapper.style.display = 'block';
+    this.isMoreButtonShown = true;
+  }
+  hideMoreButton() {
+    const wrapper = /** @type {HTMLElement} */this.getMoreButtonMenuWrapper();
+    if (!wrapper) return;
+    wrapper.style.display = 'none';
+    this.isMoreButtonShown = false;
+  }
+  doItemsFit() {
+    this.style.display = 'none';
+    const parentWidth = /** @type {HTMLElement} */this.parentElement.clientWidth;
+    this.style.display = '';
+    return this._listNode.scrollWidth === this._listNode.clientWidth && this._listNode.scrollWidth <= parentWidth;
+  }
+  getListItems() {
+    const listNode = this._listNode;
+    return Array.from(listNode.querySelectorAll(':scope > [role="listitem"]'));
+  }
 
-      const nextNodes = [];
-      let { nextSibling } = listItem;
-      while (nextSibling) {
-        if (nextSibling.nodeType === Node.ELEMENT_NODE) {
-          break;
-        }
-        nextNodes.push(nextSibling);
-
-        if (isMarkerComment(nextSibling)) {
-          break;
-        }
-
-        ({ nextSibling } = nextSibling);
+  /**
+   * @param {Node} listItem
+   */
+  getListItemWithAdjacentNodes = listItem => {
+    const markerNodeType = this.nodeType && Node.COMMENT_NODE;
+    /** @param {Node | null | undefined} node */
+    const isMarkerComment = node => node?.nodeType === markerNodeType && node?.nodeValue === '';
+    const previousNodes = [];
+    let {
+      previousSibling
+    } = listItem;
+    while (previousSibling) {
+      if (previousSibling.nodeType === Node.ELEMENT_NODE) {
+        break;
       }
-
-      const fragment = document.createDocumentFragment();
-      const nodes = [...previousNodes, listItem, ...nextNodes];
-      nodes.forEach(node => fragment.appendChild(node));
-      return fragment;
-    };
-
-    /**
-     * @param {{ moreButtonMenuElement: HTMLButtonElement, listItem: HTMLElement }} opts
-     */
-    moveItemToMoreButtonMenuFromMainMenu({ moreButtonMenuElement, listItem }) {
-      const fragment = this.getListItemWithAdjacentNodes(listItem);
-      moreButtonMenuElement.prepend(fragment);
-      // eslint-disable-next-line no-param-reassign
-      listItem.style.display = '';
-      this.displayMoreButton();
+      previousNodes.unshift(previousSibling);
+      if (isMarkerComment(previousSibling)) {
+        break;
+      }
+      ({
+        previousSibling
+      } = previousSibling);
     }
-
-    moveAllItemsToMainMenuFromMoreButtonMenu() {
-      const moreButtonMenu = this.getMoreButtonMenu();
-      const moreButtonMenuWrapper = this.getMoreButtonMenuWrapper();
-      if (!moreButtonMenu || !moreButtonMenuWrapper) return;
-      if (moreButtonMenu.childNodes.length === 0) {
-        return;
+    const nextNodes = [];
+    let {
+      nextSibling
+    } = listItem;
+    while (nextSibling) {
+      if (nextSibling.nodeType === Node.ELEMENT_NODE) {
+        break;
       }
-      [...moreButtonMenu.childNodes].forEach(node => {
-        moreButtonMenuWrapper.before(node);
-      });
+      nextNodes.push(nextSibling);
+      if (isMarkerComment(nextSibling)) {
+        break;
+      }
+      ({
+        nextSibling
+      } = nextSibling);
     }
-
-    renderAllItemsInMainMenu() {
-      this.moveAllItemsToMainMenuFromMoreButtonMenu();
+    const fragment = document.createDocumentFragment();
+    const nodes = [...previousNodes, listItem, ...nextNodes];
+    nodes.forEach(node => fragment.appendChild(node));
+    return fragment;
+  };
+
+  /**
+   * @param {{ moreButtonMenuElement: HTMLButtonElement, listItem: HTMLElement }} opts
+   */
+  moveItemToMoreButtonMenuFromMainMenu({
+    moreButtonMenuElement,
+    listItem
+  }) {
+    const fragment = this.getListItemWithAdjacentNodes(listItem);
+    moreButtonMenuElement.prepend(fragment);
+    // eslint-disable-next-line no-param-reassign
+    listItem.style.display = '';
+    this.displayMoreButton();
+  }
+  moveAllItemsToMainMenuFromMoreButtonMenu() {
+    const moreButtonMenu = this.getMoreButtonMenu();
+    const moreButtonMenuWrapper = this.getMoreButtonMenuWrapper();
+    if (!moreButtonMenu || !moreButtonMenuWrapper) return;
+    if (moreButtonMenu.childNodes.length === 0) {
+      return;
     }
-
-    hideItemsOneByOneInMainMenuUntilTheyFit() {
-      let hiddenItemsCount = 0;
-      const mainMenuItems = this.getListItems();
-      for (let i = mainMenuItems.length - 1; i >= 0 && !this.doItemsFit(); i -= 1) {
-        /** @type {HTMLElement} */ (mainMenuItems[i]).style.display = 'none';
-        hiddenItemsCount += 1;
-      }
-      return hiddenItemsCount;
+    [...moreButtonMenu.childNodes].forEach(node => {
+      moreButtonMenuWrapper.before(node);
+    });
+  }
+  renderAllItemsInMainMenu() {
+    this.moveAllItemsToMainMenuFromMoreButtonMenu();
+  }
+  hideItemsOneByOneInMainMenuUntilTheyFit() {
+    let hiddenItemsCount = 0;
+    const mainMenuItems = this.getListItems();
+    for (let i = mainMenuItems.length - 1; i >= 0 && !this.doItemsFit(); i -= 1) {
+      /** @type {HTMLElement} */mainMenuItems[i].style.display = 'none';
+      hiddenItemsCount += 1;
     }
+    return hiddenItemsCount;
+  }
 
-    /**
-     * @param {number} hiddenItemsCount
-     */
-    moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount) {
-      const moreButtonMenuElement = this.getMoreButtonMenu();
-      const listItems = this._listNode.querySelectorAll(':scope > [role="listitem"]');
-      for (let i = 0; i < hiddenItemsCount; i += 1) {
-        const listItem = listItems[listItems.length - 1 - i];
-        // @ts-ignore - the list items of a menu host are elements
-        this.moveItemToMoreButtonMenuFromMainMenu({ moreButtonMenuElement, listItem });
-      }
+  /**
+   * @param {number} hiddenItemsCount
+   */
+  moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount) {
+    const moreButtonMenuElement = this.getMoreButtonMenu();
+    const listItems = this._listNode.querySelectorAll(':scope > [role="listitem"]');
+    for (let i = 0; i < hiddenItemsCount; i += 1) {
+      const listItem = listItems[listItems.length - 1 - i];
+      // @ts-ignore - the list items of a menu host are elements
+      this.moveItemToMoreButtonMenuFromMainMenu({
+        moreButtonMenuElement,
+        listItem
+      });
     }
-
-    handleResize() {
-      if (this.__resizeTimeout) {
+  }
+  handleResize() {
+    if (this.__resizeTimeout) {
+      return;
+    }
+    this.style.visibility = 'hidden';
+    this.__resizeTimeout = setTimeout(() => {
+      this.__resizeTimeout = null;
+      this.renderAllItemsInMainMenu();
+      this.hideMoreButton();
+      if (this.doItemsFit()) {
+        this.style.visibility = '';
         return;
       }
-
       this.style.visibility = 'hidden';
-
-      this.__resizeTimeout = setTimeout(() => {
-        this.__resizeTimeout = null;
-
-        this.renderAllItemsInMainMenu();
-        this.hideMoreButton();
-
-        if (this.doItemsFit()) {
-          this.style.visibility = '';
-          return;
-        }
-
-        this.style.visibility = 'hidden';
-        this.displayMoreButton();
-        const hiddenItemsCount = this.hideItemsOneByOneInMainMenuUntilTheyFit();
-        this.moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount);
-        this.style.visibility = '';
-      }, 50);
-    }
-   });
+      this.displayMoreButton();
+      const hiddenItemsCount = this.hideItemsOneByOneInMainMenuUntilTheyFit();
+      this.moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount);
+      this.style.visibility = '';
+    }, 50);
+  }
+};