@lion/ui 0.20.0-menu-system.0 → 0.21.0

package/components/menu/src/MultiLevelListMixin.js

@@ -1,311 +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';
-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('./LionMenuOverlay.js').LionMenuOverlay} LionMenuOverlay
- */
-
-/**
- * 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() {
-      const ctor = /** @type {OverlayHost} */ (this.constructor);
-      if (ctor._getFocusableInvokerEl && this.invokerNode) {
-        // @ts-ignore - accessing static method and super property
-        return 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.noPreselect = 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.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();
-            if (
-              /** @type {InteractiveList & LionMenuOverlay} */ (parentListOfActiveItem)
-                ._onOverlayShow
-            ) {
-              // @ts-ignore - _onOverlayShow method
-              /** @type {OverlayHost} */ (parentListOfActiveItem)._onOverlayShow();
-            }
-          }
-          break;
-        case 'ArrowLeft':
-          if (this.orientation === 'vertical' && parentListOfActiveItem) {
-            // @ts-ignore - close method
-            this.close();
-            if (
-              /** @type {InteractiveList & LionMenuOverlay} */ (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

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

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

@@ -1,124 +0,0 @@
-/**
- * Set of universal interactive list item state methods that are both compatible with
- * 'smart' (LionOption) and 'regular' items
- */
-
-/**
- * @typedef {import('@lion/ui/checkbox-group.js').LionCheckboxIndeterminate} LionCheckboxIndeterminate
- */
-
-/**
- * @param {HTMLElement} item
- */
-export function isDisabled(item) {
-  return item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true';
-}
-
-/**
- * @param {HTMLElement} item
- */
-export function setDisabled(item, unset = false) {
-  if (unset) {
-    item.removeAttribute('disabled');
-    item.setAttribute('aria-disabled', 'false');
-  } else {
-    item.setAttribute('disabled', '');
-    item.setAttribute('aria-disabled', 'true');
-  }
-}
-
-/**
- * @param {HTMLElement} item
- */
-export function toggleDisabled(item) {
-  setDisabled(item, isDisabled(item));
-}
-
-/**
- * @param {HTMLElement} item
- */
-export function isChecked(item) {
-  return item.hasAttribute('checked');
-}
-
-/**
- * @param {HTMLElement} item
- * @param {Object} [options]
- * @param {boolean} [options.unset=false]
- * @param {'page'|'mixed'} [options.text] - optional text to set for aria-checked/aria-selected/aria-current (e.g. "mixed")
- */
-export function setChecked(item, unset = false) {
-  const role = item.getAttribute('role');
-  let ariaAttr = 'current';
-  if (role?.endsWith('checkbox') || role?.endsWith('radio')) {
-    ariaAttr = 'checked';
-  } else if (role === 'option' || role === 'treeitem') {
-    ariaAttr = 'selected';
-  }
-  let text;
-  if (/** @type {HTMLAnchorElement} */ (item).href) {
-    text = 'page';
-  }
-  if (/** @type {LionCheckboxIndeterminate} */ (item).mixedState) {
-    text = 'mixed';
-  }
-  if (!unset) {
-    item.setAttribute('checked', '');
-    item.setAttribute(`aria-${ariaAttr}`, text || 'true');
-  } else {
-    item.removeAttribute('checked');
-    item.setAttribute(`aria-${ariaAttr}`, 'false');
-  }
-}
-
-/**
- * @param {HTMLElement} item
- */
-export function toggleChecked(item) {
-  const shouldUnset = isChecked(item);
-  setChecked(item, shouldUnset);
-}
-
-/**
- * @param {HTMLElement} item
- */
-export function isActive(item) {
-  return item.hasAttribute('active');
-}
-
-/**
- * @param {HTMLElement} item
- */
-export function setActive(item, unset = false) {
-  if (unset) {
-    item.removeAttribute('active');
-  } else {
-    item.setAttribute('active', '');
-  }
-}
-
-/**
- * @param {HTMLElement} item
- */
-function getDirectTextContent(item) {
-  return Array.from(item.childNodes)
-    .filter(n => n.nodeName === '#text')
-    .map(n => n.textContent)
-    .join('')
-    .trim();
-}
-
-/**
- * @param {HTMLElement} item
- */
-export function getValue(item) {
-  return (
-    // @ts-ignore - choiceValue is a custom property
-    item.choiceValue ||
-    // @ts-ignore - value might not exist on all HTMLElements
-    item.value ||
-    item.getAttribute('value') ||
-    item.getAttribute('data-value') ||
-    getDirectTextContent(item)
-  );
-}

package/components/menu/test/InteractiveListMixin.test.js

@@ -1,3 +0,0 @@
-import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
-
-runInteractiveListMixinSuite();

package/components/menu/test/MoreButtonMenuMixin.test.js

@@ -1,4 +0,0 @@
-import { runMoreButtonMenuMixinSuite } from '../test-suites/MoreButtonMenuMixin.suite.js';
-import '@lion/ui/define/lion-menu.js';
-
-runMoreButtonMenuMixinSuite({ tagString: 'lion-menu' });

package/components/menu/test/MultiLevelListMixin.test.js

@@ -1,3 +0,0 @@
-import { runMultiLevelListMixinSuite } from '../test-suites/MultiLevelListMixin.suite.js';
-
-runMultiLevelListMixinSuite();

package/components/menu/test/lion-menu-hybrid.test.js

@@ -1,3 +0,0 @@
-import { runLionMenuHybridSuite } from '../test-suites/LionMenuHybrid.suite.js';
-
-runLionMenuHybridSuite();

package/components/menu/test/lion-menu.test.js

@@ -1,11 +0,0 @@
-import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
-import { runMultiLevelListMixinSuite } from '../test-suites/MultiLevelListMixin.suite.js';
-import { runMoreButtonMenuMixinSuite } from '../test-suites/MoreButtonMenuMixin.suite.js';
-import { runLionMenuSuite } from '../test-suites/LionMenu.suite.js';
-import '@lion/ui/define/lion-menu.js';
-import '@lion/ui/define/lion-menu-overlay.js';
-
-runInteractiveListMixinSuite({ tagString: 'lion-menu' });
-runMultiLevelListMixinSuite({ tagString: 'lion-menu', tagChildString: 'lion-menu-overlay' });
-runMoreButtonMenuMixinSuite({ tagString: 'lion-menu' });
-runLionMenuSuite({ tagString: 'lion-menu' });

package/components/menu/test/lion-toolbar.test.js

@@ -1,8 +0,0 @@
-// import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
-// import { runMultiLevelListMixinSuite } from '../test-suites/MultiLevelListMixin.suite.js';
-import { runMoreButtonMenuMixinSuite } from '../test-suites/MoreButtonMenuMixin.suite.js';
-import '@lion/ui/define/lion-toolbar.js';
-
-// runInteractiveListMixinSuite({ tagString: 'lion-toolbar' }); // 1 test fails
-// runMultiLevelListMixinSuite({ tagString: 'lion-toolbar', tagChildString: 'lion-toolbar' }); // hangs
-runMoreButtonMenuMixinSuite({ tagString: 'lion-toolbar' });

package/components/menu/test/lion-tree.test.js

@@ -1,7 +0,0 @@
-import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
-// import { runMultiLevelListMixinSuite } from '../test-suites/MultiLevelListMixin.suite.js';
-import '@lion/ui/define/lion-tree.js';
-
-runInteractiveListMixinSuite({ tagString: 'lion-tree' });
-// TODO: fix failing tests. LionTree is missing a close function, should this be coming from the DisclosureMixin?
-// runMultiLevelListMixinSuite({ tagString: 'lion-tree', tagChildString: 'lion-tree' });

package/components/menu/test-helpers/mimicKeyPress.js

@@ -1,9 +0,0 @@
-/**
- * @param {HTMLElement} el
- * @param {string} key
- * @param {string} code
- */
-export function mimicKeyPress(el, key, code = '') {
-  el.dispatchEvent(new KeyboardEvent('keydown', { key, code }));
-  el.dispatchEvent(new KeyboardEvent('keyup', { key, code }));
-}