@lion/ui 0.18.0-menu-system.5 → 0.18.0

package/components/menu/src/LionToolbar.js

@@ -1,94 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { LionMenu } from './LionMenu.js';
-import { setChecked, toggleChecked } from './utils/listItemInteractions.js';
-
-/**
- * @typedef {import('../types/InteractiveListMixinTypes.js').InteractiveListItemRole} InteractiveListItemRole
- */
-
-export class LionToolbar extends LionMenu {
-  constructor() {
-    super();
-
-    this._listRole = 'toolbar';
-    this.bar = true;
-  }
-
-  /**
-   * Allows groups ([role=radiogroup|checkboxgroup]) within one level.
-   * In case we deal with [role=checkbox], we treat it as multiple choice group
-   * @override InteractiveListMixin
-   * @param {number} index
-   */
-  setCheckedIndex(index) {
-    const item = this.listItems[index];
-    if (item) {
-      // @ts-ignore - InteractiveListItemRole type
-      const role = /** @type {InteractiveListItemRole} */ (item.getAttribute('role'));
-      let listItemsWithinGroup = this.listItems;
-      let multiple = this.multipleChoice;
-      if (role === 'radio' || role === 'checkbox') {
-        /**
-         * If index = 1 (radio 'Red'), closest group will be div[role=radiogroup]
-         * @example
-         * <lion-toolbar>
-         *   <div role="radiogroup" aria-label="Text Color">
-         *     <button role="radio" aria-checked="false">Blue</button>
-         *     <button role="radio" aria-checked="true">Red</button>
-         *     <button role="radio" aria-checked="false">Green</button>
-         *   </div>
-         *   <div role="separator"></div>
-         *   <div role="checkboxgroup" aria-label="Text Color">
-         *     <button role="checkbox" aria-checked="false">Blue</button>
-         *     <button role="checkbox" aria-checked="true">Red</button>
-         *     <button role="checkbox" aria-checked="false">Green</button>
-         *   </div>
-         * </lion-toolbar>
-         */
-        let closestGroup;
-        if (role === 'radio') {
-          closestGroup = item.closest('[role="radiogroup"]');
-        } else if (role === 'checkbox') {
-          closestGroup = item.closest('[role="checkboxgroup"]');
-        }
-
-        const group = closestGroup && this.contains(closestGroup) ? closestGroup : this;
-        listItemsWithinGroup = this.listItems.filter(listItem => group.contains(listItem));
-        multiple = role === 'checkbox';
-      }
-
-      if (!multiple) {
-        // Uncheck all
-        listItemsWithinGroup.forEach(listItem => {
-          setChecked(listItem, true);
-        });
-        setChecked(this.listItems[index]);
-      } else {
-        toggleChecked(this.listItems[index]);
-      }
-    }
-  }
-
-  /**
-   * @param {*} newItems
-   */
-  _initListItems(newItems) {
-    super._initListItems(newItems);
-
-    // @ts-ignore - forEach parameter
-    newItems.forEach(item => {
-      if (
-        item.getAttribute('role') === 'button' ||
-        (item.tagName === 'BUTTON' && !item.hasAttribute('role'))
-      ) {
-        const initialAriaPressed = item.getAttribute('aria-pressed');
-        item.setAttribute('aria-pressed', initialAriaPressed || 'false');
-
-        item.addEventListener('click', () => {
-          const ariaPressed = item.getAttribute('aria-pressed') === 'true';
-          item.setAttribute('aria-pressed', `${!ariaPressed}`);
-        });
-      }
-    });
-  }
-}

package/components/menu/src/LionTree.js

@@ -1,52 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { LitElement } from 'lit';
-import { MultiLevelListMixin } from './MultiLevelListMixin.js';
-
-// @ts-ignore - class extension with mixin
-export class LionTree extends MultiLevelListMixin(LitElement) {
-  constructor() {
-    super();
-
-    /** @configure InteractiveListMixin */
-    this._listRole = 'tree';
-    /** @configure InteractiveListMixin */
-    this._activateOnTypedChars = true;
-    /** @configure DisclosureMixin */
-    this.invokerInteraction = 'click';
-  }
-
-  /**
-   * @param {*} changedProperties
-   */
-  updated(changedProperties) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has('level')) {
-      if (this.level > 0) {
-        this._listNode.setAttribute('role', 'group');
-      }
-      this.__setAriaLevelForListItems();
-    }
-  }
-
-  /**
-   * @param {*} newItems
-   */
-  _initListItems(newItems) {
-    // @ts-ignore - parameter types
-    super._initListItems(newItems);
-
-    this.__setAriaLevelForListItems();
-    // @ts-ignore - forEach parameters
-    newItems.forEach((item, index) => {
-      item.setAttribute('aria-posinset', `${index + 1}`);
-      item.setAttribute('aria-setsize', `${this.listItems.length}`);
-    });
-  }
-
-  __setAriaLevelForListItems() {
-    this.listItems.forEach(item => {
-      item.setAttribute?.('aria-level', `${this.level + 1}`);
-    });
-  }
-}

package/components/menu/src/MoreButtonMenuMixin.js

@@ -1,287 +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: 1px;
-    width: 1px;
-  }
-
-  [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', '');
-      moreButtonWrapper.appendChild(moreButtonMenu);
-      this._listNode.appendChild(moreButtonWrapper);
-
-      const isElementDirectFocusableItemUnderMoreButtonMenu = (/** @type {Element} */ element) =>
-        this.listItems.includes(element) && moreButtonMenu.contains(element);
-
-      moreButtonMenu.addEventListener(
-        'focusin',
-        /** @type {FocusEvent} */ event => {
-          const target = /** @type {HTMLElement} */ (event?.target);
-          if (!isElementDirectFocusableItemUnderMoreButtonMenu(target)) return;
-
-          // 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);
-      });
-
-      this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
-
-      moreButton?.addEventListener('mousedown', () => {
-        this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
-        const focusableFirstLevelItems = moreButtonMenu.querySelectorAll(
-          ':scope > [role="listitem"] > :is(a, button)',
-        );
-
-        // @ts-ignore Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
-        for (const focusableFirstLevelItem of focusableFirstLevelItems) {
-          if (this._getDeepActiveElement() === focusableFirstLevelItem) {
-            this.hasMoreButtonMenuAnyFocusedFirstLevelItems = true;
-          }
-        }
-      });
-
-      moreButton?.addEventListener('click', () => {
-        if (this.hasMoreButtonMenuAnyFocusedFirstLevelItems) return;
-        /** @type {HTMLElement | null} */
-        const firstInteractiveItem = moreButtonMenu.querySelector(
-          ':scope > [role="listitem"] > :is(a, button)',
-        );
-
-        firstInteractiveItem?.focus();
-        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) {
-        previousNodes.unshift(previousSibling);
-        if (isMarkerComment(previousSibling)) {
-          break;
-        }
-        ({ previousSibling } = previousSibling);
-      }
-
-      const nextNodes = [];
-      let { nextSibling } = listItem;
-      while (nextSibling) {
-        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);
-    }
-  };

package/components/menu/src/MultiLevelListMixin.js

@@ -1,274 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { html } from 'lit';
-import { dedupeMixin } from '@open-wc/dedupe-mixin';
-// import { DisclosureMixin } from '@lion/ui/collapsible.js';
-import { InteractiveListMixin } from './InteractiveListMixin.js';
-
-/**
- * @typedef {import('./InteractiveListMixin.js').LionItem} LionItem
- * @typedef {import('../types/InteractiveListMixinTypes.js').InteractiveListHost} InteractiveList
- */
-
-/**
- * All logic that is needed for interactive lists that are allowed to have multiple nested, collapsible levels
- * Applies to [role=menu] and [role=tree]
- */
-// @ts-ignore - mixin implementation
-const MultiLevelListMixinImplementation = superclass =>
-  // @ts-ignore - mixin class extension
-  class extends InteractiveListMixin(superclass) {
-    render() {
-      return html`
-        <slot name="invoker"></slot>
-        <slot name="list"></slot>
-        <slot id="list-items-outlet"></slot>
-      `;
-    }
-
-    static get properties() {
-      return {
-        invokerNode: Object,
-        behaveAsAccordion: { type: Boolean, attribute: 'behave-as-accordion' },
-        level: { type: Number, reflect: true },
-      };
-    }
-
-    /**
-     * @configure DisclosureMixin
-     */
-    get _invokerNode() {
-      // @ts-ignore - accessing static method and super property
-      return this.constructor._getFocusableInvokerEl(this.invokerNode) || super._invokerNode;
-    }
-
-    /**
-     * @configure DisclosureMixin
-     * This will be compatible with DisclosureMixin and OverlayMixin. It contains the invoked
-     * InteractiveList widget (like menu|tree).
-     */
-    get _contentNode() {
-      return this._listNode;
-    }
-
-    constructor() {
-      super();
-
-      /**
-       * When an invokerNode is supplied (usually by a parent level menu), it will take precedence
-       * over [slot=invoker] and previousElementSibling with [data-invoker] attribute
-       * @type {HTMLElement}
-       */
-      // @ts-ignore - can be undefined initially
-      this.invokerNode = undefined;
-      /**
-       * @configure DisclosureMixin
-       */
-      this.handleFocus = true;
-      /**
-       * The parent list if level > 1
-       * @type {InteractiveList}
-       */
-      // @ts-ignore - can be undefined initially
-      this.parentList = undefined;
-      /**
-       * When true, will have a maximum of one submenu open at a time
-       */
-      this.behaveAsAccordion = false;
-      /**
-       * The level of nested menus. Will be reflected as attribute for styling purposes
-       */
-      this.level = 1;
-      /**
-       * @configure InteractiveListMixin
-       */
-      this.noPreselect = true;
-      /**
-       * @configure InteractiveListMixin
-       */
-      this._activeMode = 'roving-tabindex';
-      /**
-       * @type {Map<HTMLElement|LionItem,InteractiveList>}
-       */
-      this._subListMap = new Map();
-    }
-
-    // /**
-    //  * @param {import('lit-element').PropertyValues } changedProperties
-    //  */
-    // updated(changedProperties) {
-    //   super.updated(changedProperties);
-
-    //   if (changedProperties.has('invokerNode')) {
-    //     // TODO: update openableCtrl invokerNode once we make this a ctrl as well
-    //   }
-    // }
-
-    /**
-     * Gets the child InteractiveList, based on item
-     * @param {LionItem|HTMLElement} item can be sibling of or parent of InteractiveList
-     */
-    static _getSubInteractiveList(item) {
-      /**
-       * Note that, according to W3C spec, the sub level element with [role=menu|menubar|tree]
-       * needs to be a sibling of the invoker element with
-       * [role=menuitem|menuitemchecbox|menuitemradio|treeitem] (and not the parent)
-       *
-       * In the example below <lion-menu> is considered as item
-       * @example
-       * <lion-menuitem>
-       *   <button slot="invoker"></button>
-       *   <lion-menu> ... </lion-menu>
-       * </lion-menuitem>
-       */
-      // @ts-ignore - isInteractiveList property check
-      const siblingOfInvoker = item.nextElementSibling?.isInteractiveList;
-      if (siblingOfInvoker) {
-        return item.nextElementSibling;
-      }
-      /**
-       * In the example below div[role=listitem] | [data-item] is considered as item
-       * @example
-       * <div role="listitem" data-item>
-       *   <button slot="invoker"></button>
-       *   <lion-menu> ... </lion-menu>
-       * </div>
-       */
-      const childOfInvoker =
-        item.getAttribute?.('role') === 'listitem' || item.hasAttribute?.('data-item');
-      if (childOfInvoker) {
-        // @ts-ignore - isInteractiveList check
-        return Array.from(item.children).find(child => child.isInteractiveList);
-      }
-      return undefined;
-    }
-
-    /**
-     * @param {*} newItems
-     */
-    _initListItems(newItems) {
-      super._initListItems(newItems);
-
-      const ctor = this.constructor;
-      // @ts-ignore - forEach parameter types
-      newItems.forEach(item => {
-        // @ts-ignore - static method access
-        const subList = ctor._getSubInteractiveList(item);
-        if (subList) {
-          this._subListMap.set(item, subList);
-          subList.level = this.level + 1;
-          subList.parentList = this;
-          subList.invokerNode = item;
-          // @ts-ignore - invokerInteraction property
-          subList.invokerInteraction = this.invokerInteraction;
-          subList._activeMode = this._activeMode;
-        }
-      });
-    }
-
-    /**
-     * @enhance DisclosureMixin
-     * @param {Event} [ev]
-     */
-    toggle(ev) {
-      // @ts-ignore - target property
-      if (ev && this._listNode.contains(ev.target)) {
-        // prevent nested menus (inside invokers) from triggering invoker
-        return;
-      }
-      // @ts-ignore - super.toggle method
-      super.toggle();
-    }
-
-    /**
-     * @enhance InteractiveListMixin
-     * @param {*} ev
-     */
-    _onListKeyDown(ev) {
-      const targetFromsubList = Array.from(this._subListMap).find(
-        // @ts-ignore - contains method on InteractiveListHost
-        ([, s]) => s === ev.target || s.contains(ev.target),
-      );
-
-      if (targetFromsubList) {
-        return;
-      }
-
-      super._onListKeyDown(ev);
-
-      const subListOfActiveItem = this._subListMap.get(this.activeItem);
-      const parentListOfActiveItem = this.parentList;
-      const { key } = ev;
-
-      if (key === 'Escape' && parentListOfActiveItem) {
-        // We need to stop here, or else we affect parent menu (handled by OverlayController)
-        ev.stopPropagation();
-      }
-
-      switch (key) {
-        case 'Enter':
-        case ' ':
-          // make it work like a button
-          this.activeItem?.click();
-          break;
-        case 'ArrowDown':
-          if (
-            this.orientation === 'horizontal' &&
-            subListOfActiveItem &&
-            this._activeMode !== 'tabbable-disclosure'
-          ) {
-            this.activeItem.click();
-          }
-          break;
-        case 'ArrowRight':
-          if (this.orientation === 'vertical' && subListOfActiveItem) {
-            this.activeItem.click();
-          }
-          break;
-        case 'ArrowUp':
-          if (this.orientation === 'horizontal' && parentListOfActiveItem) {
-            // @ts-ignore - close method
-            this.close();
-            // @ts-ignore - _onOverlayShow method
-            parentListOfActiveItem._onOverlayShow();
-          }
-          break;
-        case 'ArrowLeft':
-          if (this.orientation === 'vertical' && parentListOfActiveItem) {
-            // @ts-ignore - close method
-            this.close();
-            // @ts-ignore - _onOverlayShow method
-            parentListOfActiveItem._onOverlayShow();
-          }
-          break;
-        /* no default */
-      }
-    }
-
-    // /**
-    //  * @enhance DisclosureMixin
-    //  */
-    // _setupDisclosure() {
-    //   if (!this._invokerNode) return;
-
-    //   super._setupDisclosure();
-    // }
-
-    // /**
-    //  * @enhance DisclosureMixin
-    //  */
-    // _teardownDisclosure() {
-    //   if (!this._invokerNode) return;
-
-    //   super._teardownDisclosure();
-    // }
-
-    // /**
-    //  * @enhance DisclosureMixin
-    //  */
-    // async _onOpenedChanged() {
-    //   if (!this._invokerNode) return;
-
-    //   await super._onOpenedChanged();
-    // }
-  };
-export const MultiLevelListMixin = dedupeMixin(MultiLevelListMixinImplementation);