@lion/ui 0.22.0 → 0.24.0

package/components/menu/src/LionMenu.js

@@ -0,0 +1,423 @@
+/* eslint-disable max-classes-per-file */
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+
+/**
+ * @typedef {import('../types/OverlayWithListInvokerMixinTypes.js').OverlayWithListInvokerMixin} OverlayWithListInvokerMixinType
+ * @typedef {import('../../overlays/types/OverlayConfig.js').OverlayConfig} OverlayConfig
+ */
+
+import { OverlayMixin, withDropdownConfig } from '@lion/ui/overlays.js';
+import { MultiLevelListMixin } from './MultiLevelListMixin.js';
+import { InteractiveListMixin } from './InteractiveListMixin.js';
+import { setChecked, toggleChecked } from './utils/listItemInteractions.js';
+
+// /**
+//  * @param {Element} element
+//  */
+// function getContentHeight(element) {
+//   return `${element.getBoundingClientRect().height}px`;
+// }
+
+// /**
+//  * Calculate total content height after collapsible opens
+//  * @param {HTMLElement} contentNode content node
+//  * @private
+//  */
+// async function calculateHeight(contentNode) {
+//   contentNode.style.setProperty('max-height', '');
+//   await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
+//   return getContentHeight(contentNode); // Expected height i.e. actual size once collapsed after animation
+// }
+
+// /**
+//  * @type {AnimateMixin}
+//  */
+// const AnimateMixinImplementation = superclass =>
+//   class AnimateMixin extends superclass {
+//     constructor() {
+//       super();
+//       this.__handleAnimateComplete = this.__handleAnimateComplete.bind(this);
+//     }
+
+//     connectedCallback() {
+//       super.connectedCallback();
+//       this._contentNode.style.setProperty('transition', 'max-height 0.35s, opacity 0.35s');
+//     }
+
+//     /**
+//      * Trigger show animation and wait for transition to be finished.
+//      * @param {Object} options - element node and its options
+//      * @override
+//      */
+//     async _showAnimation(cfg) {
+//       super._showAnimation(cfg);
+
+//       const { contentNode } = cfg;
+//       const expectedHeight = await calculateHeight(contentNode);
+//       contentNode.style.setProperty('overflow', 'hidden');
+//       contentNode.style.setProperty('opacity', '1');
+//       contentNode.style.setProperty('max-height', '0');
+//       await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
+//       contentNode.style.setProperty('max-height', expectedHeight);
+//       await this._animateComplete;
+//       ['opacity', 'padding', 'max-height', 'overflow'].map(prop =>
+//         contentNode.style.removeProperty(prop),
+//       );
+//     }
+
+//     /**
+//      * Trigger hide animation and wait for transition to be finished.
+//      * @param {Object} options - element node and its options
+//      * @override
+//      */
+//     async _hideAnimation(cfg) {
+//       super._hideAnimation(cfg);
+
+//       const { contentNode } = cfg;
+//       if (getContentHeight(contentNode) === '0px') {
+//         return;
+//       }
+//       const expectedHeight = await calculateHeight(contentNode);
+
+//       contentNode.style.setProperty('overflow', 'hidden');
+//       contentNode.style.setProperty('max-height', expectedHeight);
+//       await new Promise(resolve => requestAnimationFrame(() => resolve()));
+//       ['opacity', 'padding', 'max-height'].map(prop => contentNode.style.setProperty(prop, 0));
+
+//       await this._animateComplete;
+//     }
+//   };
+// export const AnimateMixin = dedupeMixin(AnimateMixinImplementation);
+
+/**
+ * The interactive (multi level) list behavior of a menu.
+ *
+ * Not exported on its own: consumers use `LionMenu`, which adds the
+ * disclosure/overlay behavior on top of this.
+ *
+ * Api explanation:
+ * - No [slot="invoker"], because adding it inside the lion-menu would:
+ *  - make api more verbose, less aligned with common html examples (examples from wai-aria etc.)
+ *  - break Popper positioning (you would need to specify parent menuitem as reference node)
+ *  - put click surface inside menuitem padding (you would need to correct with negative margin :( ...)
+ * - No [slot="content"], because for a "right click menu" it would be obsolete
+ *
+ * @example menu button (VsCode action menu right top of screen)
+ * <lion-menu>
+ *   <button slot="invoker" title="More actions">...</button>
+ *   <div role="menuitem">Show opened editors</div>
+ *   <div role="separator"></div>
+ *   <div role="menuitem">Close All</div>
+ * </lion-menu>
+ *
+ * @example as menubar (VsCode main menu)
+ * <lion-menu bar>
+ *   <div>
+ *     <div role="menuitem">File</div>
+ *     <lion-menu>
+ *       <div role="menuitem">New File</div>
+ *       <div role="separator"></div>
+ *       <div>
+ *         <div role="menuitem">Open Recent</div>
+ *         <lion-menu>
+ *           More...
+ *         </lion-menu>
+ *       </div>
+ *     </lion-menu>
+ *   </div>
+ *   <div>
+ *     <div role="menuitem">View</div>
+ *     <lion-menu>
+ *       <div role="menuitemcheckbox">Show Minimap</div>
+ *     </lion-menu>
+ *   </div>
+ * </lion-menu>
+ *
+ *
+ * @example as context menu (VsCode right click menu)
+ * <lion-menu>
+ *   <div role="menuitem">Go to Definition</div>
+ *   <div role="menuitem">Go to Type Definition</div>
+ *   <div>
+ *     <div role="menuitem">Peek</div>
+ *     <lion-menu>
+ *       <div role="menuitem">Peek Call Hierarchy</div>
+ *       <div role="separator"></div>
+ *       <div role="menuitem">Peek Definition</div>
+ *     </lion-menu>
+ *   </div>
+ *   <div role="separator"></div>
+ *   <div role="menuitem">Find all References</div>
+ * </lion-menu>
+ */
+// @ts-ignore - _listRole property type compatibility
+class LionMenuCore extends MultiLevelListMixin(LitElement) {
+  /** @returns {import('lit').PropertyDeclarations} */
+  static get properties() {
+    return {
+      /**
+       * Enable bar to use [role="menubar"] and horizontal navigation
+       */
+      bar: {
+        type: Boolean,
+      },
+    };
+  }
+
+  /**
+   * Allows groups within one level. In case we deal with menuitemcheckbox,
+   * we treat it as multiple choice group
+   * @override InteractiveListMixin
+   * @param {number} index
+   */
+  setCheckedIndex(index) {
+    const item = this.listItems[index];
+    if (!item) return;
+
+    // @ts-ignore - InteractiveListItemRole type
+    const role = /** @type {InteractiveListItemRole} */ item.getAttribute('role');
+    let listItemsWithinGroup = this.listItems;
+    let { multiple } = this;
+    if (role === 'menuitemradio' || role === 'menuitemcheckbox') {
+      /**
+       * If index = 3 (menuitemradio 'Red'), closest group will be div[role=group]
+       * @example
+       * <interactive-list role="menu">
+       *   <div role="menuitemcheckbox" aria-checked="true">Bold</div>
+       *   <div role="menuitemcheckbox" aria-checked="true">Italic</div>
+       *   <div role="separator"></div>
+       *   <div role="group" aria-label="Text Color">
+       *     <div role="menuitemradio" aria-checked="false">Blue</div>
+       *     <div role="menuitemradio" aria-checked="true">Red</div>
+       *     <div role="menuitemradio" aria-checked="false">Green</div>
+       *   </div>
+       * </interactive-list>
+       */
+      const closestGroup = item.closest('[role="group"]');
+      const group = closestGroup && this.contains(closestGroup) ? closestGroup : this;
+      listItemsWithinGroup = this.listItems.filter((listItem) => group.contains(listItem));
+      multiple = role === 'menuitemcheckbox';
+    }
+    if (!multiple) {
+      // Uncheck all within group
+      listItemsWithinGroup.forEach((listItem) => {
+        setChecked(listItem, true);
+      });
+      setChecked(this.listItems[index]);
+    } else {
+      toggleChecked(this.listItems[index]);
+    }
+  }
+  constructor() {
+    super();
+    this.bar = false;
+    /** @configure MultiLevelListMixin */
+    this.behaveAsAccordion = true;
+    /** @configure InteractiveListMixin */
+    this._listRole = 'menu';
+    /** @configure InteractiveListMixin */
+    this._activateOnTypedChars = true;
+    /** @configure DisclosureMixin */
+    this.invokerInteraction = 'click';
+  }
+
+  /**
+   * @param {import('lit-element').PropertyValues } changedProperties
+   */
+  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
+    this.dataset.menu = '';
+  }
+
+  /**
+   * @param {import('lit-element').PropertyValues } changedProperties
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('bar')) {
+      if (this.bar) {
+        this.axis = 'inline';
+        if (this._listRole === 'menu') {
+          this._listRole = 'menubar';
+        }
+      } else {
+        this.axis = 'block';
+        if (this._listRole === 'menubar') {
+          this._listRole = 'menu';
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Handles integration of InteractiveListMixin and OverlayMixin
+ * Will be used by:
+ * - LionMenu
+ * - LionCombobox
+ * - LionSelectRich
+ *
+ * @param {import('@open-wc/dedupe-mixin').Constructor<LionMenuCore>} superclass
+ */
+/**
+ * @type {OverlayWithListInvokerMixinType}
+ * @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);
+  }
+
+  /**
+   * @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 invokerNode defined by DisclosureMixin
+   */
+  get _overlayInvokerNode() {
+    return /** @type {HTMLElement} */this._invokerNode;
+  }
+};
+export const OverlayWithListInvokerMixin = dedupeMixin(OverlayWithListInvokerMixinImplementation);
+
+/**
+ * LionMenu is a list of choices. Whether it opens as an overlay or as a regular
+ * collapsible (disclosure) is configurable via `openable-mode`.
+ *
+ * N.B. the actual switching will be delegated to the disclosure system (see the
+ * visibility-toggle controller); for now `disclosure` is the default.
+ */
+export class LionMenu extends OverlayWithListInvokerMixin(LionMenuCore) {
+  /** @returns {import('lit').PropertyDeclarations} */
+  static get properties() {
+    return {
+      openableMode: {
+        type: String,
+        attribute: 'openable-mode',
+      },
+    };
+  }
+  constructor() {
+    super();
+
+    // By default, we go for disclosure behavior
+    // a TODO: in the future, bring disclosure behavior to a controller (and therefore directive).
+    // Take inspiration from VisibilityToggleCtrl of portal elements
+    /**
+     * Terminology aligned with https://open-ui.org/components/openable.explainer/
+     * @type {'disclosure'|'overlay'}
+     */
+    this.openableMode = 'disclosure';
+    this._shouldSetupOverlay = false;
+  }
+
+  /**
+   * @param {import('lit').PropertyValues} changedProperties
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('openableMode')) {
+      if (this.openableMode === 'overlay') {
+        this._shouldSetupOverlay = true;
+        this._setupOverlayCtrl();
+      } else {
+        this._teardownOverlayCtrl();
+      }
+    }
+  }
+
+  // TODO: this was created 5 years ago, do we still need id="overlay-content-node-wrapper" after the "dialog refactor"?
+  render() {
+    return html`
+      <slot name="invoker"></slot>
+      <div id="overlay-content-node-wrapper">
+        <slot name="list"></slot>
+      </div>
+      <slot id="list-items-outlet"></slot>
+    `;
+  }
+
+  /**
+   * @override
+   * @returns {OverlayConfig}
+   */
+  _defineOverlayConfig() {
+    // @ts-ignore - parentList property
+    const { parentList } = this;
+    /** @type {import('@popperjs/core').Placement} */
+    let placement = 'bottom-start';
+    if (parentList?.axis !== 'inline') {
+      placement = 'right-start';
+    }
+    const dropdownCfg = withDropdownConfig();
+    return {
+      ...dropdownCfg,
+      hidesOnEsc: true,
+      popperConfig: {
+        ...dropdownCfg.popperConfig,
+        placement,
+        strategy: 'absolute',
+        modifiers: [
+          {
+            name: 'offset',
+            enabled: true,
+            options: {
+              offset: [0, 0],
+            },
+          },
+        ],
+      },
+    };
+  }
+
+  /**
+   * @enhance InteractiveListMixin
+   * @param {*} ev
+   */
+  _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)
+        ev.stopPropagation();
+        break;
+      /* no default */
+    }
+  }
+}

package/components/menu/src/MoreButtonMenuMixin.js

@@ -0,0 +1,272 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { css } from 'lit';
+
+/**
+ * @typedef {import('../types/MoreButtonMenuMixinTypes.js').MoreButtonMenuMixin} MoreButtonMenuMixinType
+ * @typedef {import('../types/MoreButtonMenuMixinTypes.js').MoreButtonMenuHost} MoreButtonMenuHostType
+ */
+
+const styles = css`
+  /** More button is hidden by default */
+  [data-more-button-wrapper] {
+    display: none;
+  }
+
+  [data-more-button-menu][data-open]:not(:has([role='listitem'] [aria-expanded='true'])) {
+    position: absolute;
+    overflow: visible;
+    height: auto;
+    width: auto;
+    top: 100%;
+  }
+
+  /** N.B. this is a simplified version of sr-only. when we move to overlayctrl, we should build this into overlayctrl */
+  [data-more-button-menu] {
+    overflow: hidden;
+    height: 0;
+    width: 0;
+  }
+
+  [role='list']:has(> [data-more-button-wrapper]) > [role='listitem'] > :is(button, a) {
+    white-space: nowrap;
+  }
+`;
+
+// @ts-ignore - JS mixin typing
+/**
+ * @type {MoreButtonMenuMixinType}
+ * @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?.();
+  }
+  _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;
+    }
+    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);
+    }
+    const nextNodes = [];
+    let {
+      nextSibling
+    } = listItem;
+    while (nextSibling) {
+      if (nextSibling.nodeType === Node.ELEMENT_NODE) {
+        break;
+      }
+      nextNodes.push(nextSibling);
+      if (isMarkerComment(nextSibling)) {
+        break;
+      }
+      ({
+        nextSibling
+      } = nextSibling);
+    }
+    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;
+    }
+    [...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
+      });
+    }
+  }
+  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.displayMoreButton();
+      const hiddenItemsCount = this.hideItemsOneByOneInMainMenuUntilTheyFit();
+      this.moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount);
+      this.style.visibility = '';
+    }, 50);
+  }
+};