@lion/ui 0.17.0 → 0.18.0-menu-system.1

package/components/menu/src/MultiLevelListMixin.js

@@ -0,0 +1,274 @@
+/* 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 !== '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);

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;
+}

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

@@ -0,0 +1,104 @@
+/**
+ * Set of universal interactive list item state methods that are both compatible with
+ * 'smart' (LionOption) and 'regular' items
+ */
+
+/**
+ * @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') || item.getAttribute('aria-selected') === 'true';
+}
+
+/**
+ * @param {HTMLElement} item
+ * @param {boolean} [shouldSet=false]
+ */
+export function setChecked(item, shouldSet = true) {
+  const ariaAttr = item.getAttribute('role') === 'option' ? 'selected' : 'checked';
+  if (shouldSet) {
+    item.setAttribute('checked', '');
+    item.setAttribute(`aria-${ariaAttr}`, 'true');
+  } else {
+    item.removeAttribute('checked');
+    item.setAttribute(`aria-${ariaAttr}`, 'false');
+  }
+}
+
+/**
+ * @param {HTMLElement} item
+ */
+export function toggleChecked(item) {
+  setChecked(item, !isChecked(item));
+}
+
+/**
+ * @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/src/utils/uuid.js

@@ -0,0 +1,3 @@
+export function uuid() {
+  return Math.random().toString(36).substr(2, 10);
+}

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

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

package/components/menu/test-suites/InteractiveListMixin.suite.js

@@ -0,0 +1,142 @@
+import { LitElement } from 'lit';
+import { expect, html, fixture, unsafeStatic, defineCE } from '@open-wc/testing';
+import { InteractiveListMixin } from '../src/InteractiveListMixin.js';
+
+class InteractiveListClass extends InteractiveListMixin(LitElement) {}
+
+/**
+ * @typedef {import('../types/InteractiveListMixinTypes.js').InteractiveListItemRole} InteractiveListItemRole
+ */
+
+/** @type {InteractiveListItemRole[]} */
+const supportedRoles = [
+  'menuitem',
+  'menuitemcheckbox',
+  'menuitemradio',
+  'option',
+  'treeitem',
+  'radio',
+  'checkbox',
+];
+
+/**
+ * @typedef {Object} TestConfig
+ * @property {string} tagString
+ */
+
+/**
+ * @param {TestConfig} [customConfig]
+ */
+export function runInteractiveListMixinSuite(customConfig) {
+  const cfg = {
+    tagString: customConfig?.tagString || defineCE(InteractiveListClass),
+  };
+
+  const { tagString } = cfg;
+  const tag = unsafeStatic(tagString);
+
+  describe('InteractiveListMixin', () => {
+    it(`supports items with role="${supportedRoles.join('|')}"`, async () => {
+      const el = await fixture(html`
+        <${tag} name="foo">
+          ${supportedRoles.map(role => html` <div role="${role}"></div> `)}
+        </${tag}>
+      `);
+      // @ts-ignore - test element with InteractiveListMixin properties
+      expect(el.listItems.length).to.equal(supportedRoles.length);
+      supportedRoles.forEach((role, i) => {
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[i].getAttribute('role')).to.equal(role);
+      });
+    });
+
+    it('moves elements to a private [slot=list] for optimal DX and a11y', async () => {
+      const el = await fixture(html`
+        <${tag} name="foo">
+          <div role="menuitem" id="item1">Item 1</div>
+          <div role="menuitem" id="item2">Item 2</div>
+        </${tag}>
+      `);
+      // @ts-ignore - test element with InteractiveListMixin properties
+      const listSlotNode = Array.from(el.children).find(c => c.slot === 'list');
+      // @ts-ignore - accessing children property
+      const listItemEls = Array.from(listSlotNode.children);
+      // @ts-ignore - test element with InteractiveListMixin properties
+      expect(listItemEls.includes(el.listItems[0])).to.be.true;
+      // @ts-ignore - test element with InteractiveListMixin properties
+      expect(listItemEls.includes(el.listItems[1])).to.be.true;
+    });
+
+    it('inherits from DisclosureMixin', async () => {});
+
+    describe('Active mode', async () => {
+      it('supports "activedescendant" pattern', async () => {
+        const el = await fixture(html`
+        <${tag} name="foo" ._activeMode="${'activedescendant'}">
+          <div role="menuitem" id="item1">Item 1</div>
+          <div role="menuitem" id="item2">Item 2</div>
+        </${tag}>
+      `);
+        // @ts-ignore - test element with InteractiveListMixin properties
+        el.checkedIndex = 0;
+        // @ts-ignore - test element with InteractiveListMixin properties
+        const listSlotNode = Array.from(el.children).find(c => c.slot === 'list');
+
+        // @ts-ignore - test element with InteractiveListMixin properties
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[0].hasAttribute('id')).to.be.true;
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[1].hasAttribute('id')).to.be.true;
+        expect(listSlotNode?.hasAttribute('aria-activedescendant')).to.be.false;
+        // @ts-ignore - test element with InteractiveListMixin properties
+        el.activeIndex = 1;
+        expect(listSlotNode?.hasAttribute('aria-activedescendant')).to.be.true;
+      });
+
+      it('supports "roving-tabindex" pattern', async () => {
+        const el = await fixture(html`
+          <${tag} name="foo" ._activeMode="${'roving-tabindex'}">
+            <div role="menuitem" id="item1">Item 1</div>
+            <div role="menuitem" id="item2">Item 2</div>
+          </${tag}>
+        `);
+
+        // @ts-ignore - test element with InteractiveListMixin properties
+        el.activeIndex = 0;
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[0].getAttribute('tabindex')).to.equal('0');
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[1].getAttribute('tabindex')).to.equal('-1');
+
+        // @ts-ignore - test element with InteractiveListMixin properties
+        el.activeIndex = 1;
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[0].getAttribute('tabindex')).to.equal('-1');
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[1].getAttribute('tabindex')).to.equal('0');
+
+        // @ts-ignore - test element with InteractiveListMixin properties
+        el.activeIndex = 1;
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(document.activeElement).to.equal(el.listItems[1]);
+      });
+    });
+
+    // Copy tests from ListboxMixin. Later, make this mixin a fundament of the ListboxMixin
+
+    // orientation
+    // multipleChoice
+    // selectionFollowsFocus
+    // rotateKeyboardNavigation
+    // noPreselect
+    // _scrollTargetNode
+
+    describe('Widget extensions', () => {
+      it('can be extended to [role=listbox]', async () => {});
+      it('can be extended to [role=menu]', async () => {});
+      it('can be extended to [role=menubar]', async () => {});
+      it('can be extended to [role=toolbar]', async () => {});
+      it('can be extended to [role=tree]', async () => {});
+    });
+  });
+}

package/components/menu/types/InteractiveListMixinTypes.d.ts

@@ -0,0 +1,82 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+import { SlotHost } from '../../core/types/SlotMixinTypes.js';
+import { DisabledHost } from '../../core/types/DisabledMixinTypes.js';
+
+export type InteractiveListItemRole =
+  | 'menuitem'
+  | 'menuitemcheckbox'
+  | 'menuitemradio'
+  | 'option'
+  | 'treeitem'
+  | 'radio'
+  | 'checkbox';
+
+export declare class InteractiveListHost {
+  /**
+   * When true, will synchronize activedescendant and selected element on
+   * arrow key navigation.
+   * This behavior can usually be seen on <select> on the Windows platform.
+   * Note that this behavior cannot be used when multiple-choice is true.
+   * See: https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus
+   */
+  public selectionFollowsFocus: Boolean;
+  /**
+   * Will give first option active state when navigated to the next option from
+   * last option.
+   */
+  public rotateKeyboardNavigation: Boolean;
+  /**
+   * Informs screen reader and affects keyboard navigation.
+   * By default 'vertical'
+   */
+  public orientation: 'vertical' | 'horizontal';
+
+  public hasNoDefaultSelected: boolean;
+
+  public singleOption: boolean;
+
+  public checkedIndex: number | number[];
+
+  public activeIndex: number;
+
+  public listItems: HTMLElement[];
+
+  public setCheckedIndex(index: number): void;
+
+  protected _scrollTargetNode: HTMLElement;
+
+  protected _listNode: HTMLElement;
+
+  // private __setupListboxNode(): void;
+
+  protected _getPreviousEnabledOption(currentIndex: number, offset?: number): number;
+
+  protected _getNextEnabledOption(currentIndex: number, offset?: number): number;
+
+  protected _onListKeyDown(ev: KeyboardEvent): void;
+
+  protected _onListKeyUp(ev: KeyboardEvent): void;
+
+  // protected _setupListboxNode(): void;
+
+  // protected _teardownListboxNode(): void;
+
+  protected _onListClick(ev: MouseEvent): void;
+
+  // protected _setupListboxInteractions(): void;
+
+  // protected _onChildActiveChanged(ev: Event): void;
+}
+
+export declare function InteractiveListHostImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<InteractiveListHost> &
+  InteractiveListHost &
+  Constructor<DisabledHost> &
+  typeof DisabledHost &
+  Constructor<SlotHost> &
+  typeof SlotHost;
+
+export type InteractiveListMixin = typeof InteractiveListHostImplementation;

package/components/navigation-bar/README.md

@@ -0,0 +1 @@
+N.B. api is very very beta