@lion/ui 0.22.0 → 0.24.0

package/components/menu/src/MultiLevelListMixin.js

@@ -0,0 +1,306 @@
+/* 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,25 @@
+/**
+ * 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

@@ -0,0 +1,124 @@
+/**
+ * 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

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

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

@@ -0,0 +1,5 @@
+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

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

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

@@ -0,0 +1,2 @@
+import { runLionMenuInteractionsSuite } from '../test-suites/LionMenuInteractions.suite.js';
+runLionMenuInteractionsSuite();

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

@@ -0,0 +1,18 @@
+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';
+
+// The Mixin suites run against plain mixin hosts (their defaults) on purpose:
+// LionMenu composes InteractiveListMixin + MultiLevelListMixin with the
+// overlay/disclosure behavior, and the composite is covered by the LionMenu
+// suites.
+runInteractiveListMixinSuite();
+runMultiLevelListMixinSuite();
+runMoreButtonMenuMixinSuite({
+  tagString: 'lion-menu',
+});
+runLionMenuSuite({
+  tagString: 'lion-menu',
+});

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

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