@lion/ui 0.21.1-menu-system.0 → 0.22.0

package/components/menu/src/LionMenu.js

@@ -1,421 +0,0 @@
-/* eslint-disable max-classes-per-file */
-/* eslint-disable import/no-extraneous-dependencies */
-import { LitElement, html } from 'lit';
-import { dedupeMixin } from '@open-wc/dedupe-mixin';
-
-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) {
-  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.multipleChoice;
-    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.orientation = 'horizontal';
-        if (this._listRole === 'menu') {
-          this._listRole = 'menubar';
-        }
-      } else {
-        this.orientation = 'vertical';
-        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
- */
-const OverlayWithListInvokerMixinImplementation = 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() {
-      // @ts-ignore - _invokerNode property
-      return 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) {
-  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>
-    `;
-  }
-
-  // @ts-ignore - overlay config return type
-  _defineOverlayConfig() {
-    // @ts-ignore - parentList property
-    const { parentList } = this;
-    let placement = 'bottom-start';
-    if (parentList?.orientation !== 'horizontal') {
-      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

@@ -1,278 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { css } from 'lit';
-
-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
-export const MoreButtonMenuMixin = superclass =>
-  class MoreButtonMenuMixinClass extends superclass {
-    constructor() {
-      super();
-      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 {Element} */ 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
-          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(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() {
-      this.getMoreButtonMenuWrapper().style.display = 'block';
-      this.isMoreButtonShown = true;
-    }
-
-    hideMoreButton() {
-      this.getMoreButtonMenuWrapper().style.display = 'none';
-      this.isMoreButtonShown = false;
-    }
-
-    doItemsFit() {
-      this.style.display = 'none';
-      const parentWidth = 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.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) {
-        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];
-        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);
-    }
-  };