@lion/ui 0.21.1 → 0.23.0

package/components/menu/src/MoreButtonMenuMixin.js

@@ -0,0 +1,295 @@
+// 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);
+    }
+   });

package/components/menu/src/MultiLevelListMixin.js

@@ -0,0 +1,312 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { html } from 'lit';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+
+/**
+ * @typedef {import('../types/MultiLevelListMixinTypes.js').MultiLevelListMixin} MultiLevelListMixinType
+ */
+// import { DisclosureMixin } from '@lion/ui/collapsible.js';
+import { InteractiveListMixin } from './InteractiveListMixin.js';
+import { isChecked, setChecked } from './utils/listItemInteractions.js';
+/**
+ * @typedef {import('./InteractiveListMixin.js').LionItem} LionItem
+ * @typedef {import('../types/InteractiveListMixinTypes.js').InteractiveListHost} InteractiveList
+ * @typedef {typeof import('../../overlays/types/OverlayMixinTypes.js').OverlayHost} OverlayHost
+ * @typedef {import('./LionMenu.js').LionMenu} LionMenu
+ */
+
+/**
+ * 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
+/**
+ * @type {MultiLevelListMixinType}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
+ */
+// prettier-ignore
+const MultiLevelListMixinImplementation = /** @type {MultiLevelListMixinType} */ (superclass =>
+  class MultiLevelListMixin 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: { type: Object },
+        behaveAsAccordion: { type: Boolean, attribute: 'behave-as-accordion' },
+        level: { type: Number, reflect: true },
+      };
+    }
+
+    /**
+     * @configure DisclosureMixin
+     */
+    get _invokerNode() {
+      const ctor = /** @type {OverlayHost} */ (this.constructor);
+      if (ctor._getFocusableInvokerEl && this.invokerNode) {
+        return /** @type {HTMLElement} */ (ctor._getFocusableInvokerEl(this.invokerNode));
+      }
+      // @ts-ignore
+      return 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.hasNoDefaultSelected = true;
+      /**
+       * @configure InteractiveListMixin
+       * @type {'activedescendant'|'roving-tabindex'|'tabbable-disclosure'}
+       */
+      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.axis === 'inline' &&
+            subListOfActiveItem &&
+            this._activeMode !== 'tabbable-disclosure'
+          ) {
+            this.activeItem.click();
+          }
+          break;
+        case 'ArrowRight':
+          if (this.axis === 'block' && subListOfActiveItem) {
+            this.activeItem.click();
+          }
+          break;
+        case 'ArrowUp':
+          if (this.axis === 'inline' && parentListOfActiveItem) {
+            // @ts-ignore - close method
+            this.close();
+            if (/** @type {InteractiveList & LionMenu} */ (parentListOfActiveItem)._onOverlayShow) {
+              // @ts-ignore - _onOverlayShow method
+              /** @type {OverlayHost} */ (parentListOfActiveItem)._onOverlayShow();
+            }
+          }
+          break;
+        case 'ArrowLeft':
+          if (this.axis === 'block' && parentListOfActiveItem) {
+            // @ts-ignore - close method
+            this.close();
+            if (/** @type {InteractiveList & LionMenu} */ (parentListOfActiveItem)._onOverlayShow) {
+              // @ts-ignore - _onOverlayShow method
+              /** @type {OverlayHost} */ (parentListOfActiveItem)._onOverlayShow();
+            }
+          }
+          break;
+        /* no default */
+      }
+    }
+
+    /**
+     * @param {Location} location
+     */
+    _syncCurrentPageWithLocationHref(location) {
+      super._syncCurrentPageWithLocationHref(location);
+
+      this._subListMap.forEach(subList => {
+        subList.listItems.forEach(
+          /** @param {LionItem|HTMLElement} item */ item => {
+            // @ts-ignore
+            if (isChecked(item) && subList._invokerNode) {
+              // @ts-ignore
+              setChecked(subList._invokerNode);
+            }
+          },
+        );
+      });
+    }
+
+    // /**
+    //  * @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);

package/components/menu/src/utils/isInView.js

@@ -0,0 +1,26 @@
+/**
+ * Determines whether element is visible within container
+ *
+ * @param {HTMLElement} container
+ * @param {HTMLElement} element
+ * @param {Boolean} [partial]
+ */
+export function isInView(container, element, partial = false) {
+  const cTop = container.scrollTop;
+  const cBottom = cTop + container.clientHeight;
+  const eTop = element.offsetTop;
+  const eBottom = eTop + element.clientHeight;
+  const isTotal = eTop >= cTop && eBottom <= cBottom;
+  let isPartial;
+
+  if (partial === true) {
+    isPartial = (eTop < cTop && eBottom > cTop) || (eBottom > cBottom && eTop < cBottom);
+  } else if (typeof partial === 'number') {
+    if (eTop < cTop && eBottom > cTop) {
+      isPartial = ((eBottom - cTop) * 100) / element.clientHeight > partial;
+    } else if (eBottom > cBottom && eTop < cBottom) {
+      isPartial = ((cBottom - eTop) * 100) / element.clientHeight > partial;
+    }
+  }
+  return isTotal || isPartial;
+}