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

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,123 +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) {
-  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

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

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

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

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

@@ -1,304 +0,0 @@
-import { LitElement } from 'lit';
-import { expect, html, fixture as _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 {import('../src/LionMenu.js').LionMenu} LionMenu
- * @typedef {import('lit').TemplateResult} TemplateResult
- *
- * * @typedef {Object} TestConfig
- * @property {string} tagString
- */
-
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ (_fixture);
-
-/**
- * @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]);
-      });
-    });
-
-    describe('Programmatic interaction', () => {
-      // If we have the item line directly in the fixture the linting rule lit-a11y/role-has-required-aria-attrs
-      // will fail. Inside our code we set the required aria attributes, but the linter doesn't know that.
-      const item = /** @param {number} i, @param {string} role */ (i, role) => html`
-        <div role="${role}" id="item${i}">Item ${i}</div>
-      `;
-
-      it('set checked state sets aria-current attribute with role="listitem"', async () => {
-        const el = await fixture(html`
-          <${tag}>
-            ${item(1, 'listitem')}
-            ${item(2, 'listitem')}
-          </${tag}>
-        `);
-        el.setCheckedIndex(1);
-        const item1 = el.listItems[1];
-        expect(item1.getAttribute('aria-current')).to.equal('true');
-        el.setCheckedIndex(0);
-        expect(item1.getAttribute('aria-current')).to.equal('false');
-      });
-
-      it('set checked state sets aria-selected attribute with role="option"', async () => {
-        const el = await fixture(html`
-          <${tag}>
-            ${item(1, 'option')}
-            ${item(2, 'option')}
-          </${tag}>
-        `);
-        console.debug('listItems', el.listItems);
-        const item1 = el.listItems[1];
-        expect(item1.getAttribute('aria-selected')).to.equal('false');
-
-        el.setCheckedIndex(1);
-        expect(item1.getAttribute('aria-selected')).to.equal('true');
-
-        el.setCheckedIndex(0);
-        expect(item1.getAttribute('aria-selected')).to.equal('false');
-      });
-
-      it('set checked state sets aria-selected attribute with role="treeitem"', async () => {
-        const el = await fixture(html`
-          <${tag}>
-            ${item(1, 'treeitem')}
-            ${item(2, 'treeitem')}
-          </${tag}>
-        `);
-        el.setCheckedIndex(1);
-        // @ts-ignore - test element with InteractiveListMixin properties
-        const item1 = el.listItems[1];
-        expect(item1.getAttribute('aria-selected')).to.equal('true');
-        el.setCheckedIndex(0);
-        expect(item1.getAttribute('aria-selected')).to.equal('false');
-      });
-
-      it('set checked state sets aria-current attribute with role="menuitem"', async () => {
-        const el = await fixture(html`
-          <${tag}>
-            ${item(1, 'menuitem')}
-            ${item(2, 'menuitem')}
-          </${tag}>
-        `);
-        el.setCheckedIndex(1);
-        const item1 = el.listItems[1];
-        expect(item1.getAttribute('aria-current')).to.equal('true');
-        el.setCheckedIndex(0);
-        expect(item1.getAttribute('aria-current')).to.equal('false');
-      });
-
-      it('set checked state sets aria-checked attribute with role="menuitemradio"', async () => {
-        const el = await fixture(html`
-          <${tag}>
-            ${item(1, 'menuitemradio')}
-            ${item(2, 'menuitemradio')}
-          </${tag}>
-        `);
-        el.setCheckedIndex(1);
-        const item1 = el.listItems[1];
-        expect(item1.getAttribute('aria-checked')).to.equal('true');
-        el.setCheckedIndex(0);
-        expect(item1.getAttribute('aria-checked')).to.equal('false');
-      });
-
-      it('set checked state sets aria-checked attribute with role="menuitemcheckbox"', async () => {
-        const el = await fixture(html`
-          <${tag}>
-            ${item(1, 'menuitemcheckbox')}
-            ${item(2, 'menuitemcheckbox')}
-          </${tag}>
-        `);
-        el.setCheckedIndex(1);
-        const item1 = el.listItems[1];
-        expect(item1.getAttribute('aria-checked')).to.equal('true');
-        el.setCheckedIndex(0);
-        // As this is multiple choice it doesn't unset the checked state
-        expect(item1.getAttribute('aria-checked')).to.equal('true');
-      });
-
-      it('can set checked state to "page" for role="listitem"', async () => {
-        const el = await fixture(html`
-          <${tag}>
-            <a role="listitem" id="item1" href="#">Item 1</a>
-            <a role="listitem" id="item2" href="#">Item 2</a>
-          </${tag}>
-        `);
-        el.setCheckedIndex(1);
-        const item1 = el.listItems[1];
-        expect(item1.getAttribute('aria-current')).to.equal('page');
-        el.setCheckedIndex(0);
-        expect(item1.getAttribute('aria-current')).to.equal('false');
-      });
-
-      it('can set checked state to "mixed" for role="menuitemcheckbox"', async () => {
-        const el = await fixture(html`
-          <${tag}>
-            ${item(1, 'menuitemcheckbox')}
-            ${item(2, 'menuitemcheckbox')}
-          </${tag}>
-        `);
-        const item1 = el.listItems[1];
-        // @ts-ignore - not yet supported property
-        item1.mixedState = true;
-        el.setCheckedIndex(1);
-        expect(item1.getAttribute('aria-checked')).to.equal('mixed');
-        el.setCheckedIndex(0);
-        expect(item1.getAttribute('aria-checked')).to.equal('mixed');
-      });
-
-      it('does not allow to set checkedIndex or activeIndex to be out of bound', async () => {
-        const el = await fixture(html`
-          <${tag} has-no-default-selected autocomplete="list">
-            <div role="menuitem" id="item1">Item 1</div>
-          </${tag}>
-        `);
-        expect(() => {
-          el.checkedIndex = -1;
-          el.checkedIndex = 1;
-        }).to.not.throw();
-        expect(el.checkedIndex).to.equal(-1);
-      });
-
-      it('unsets checked on other options when option becomes checked', async () => {
-        const el = await fixture(html`
-          <${tag}>
-            <div role="menuitem" id="item1">Item 1</div>
-            <div role="menuitem" id="item2">Item 2</div>
-          </${tag}>
-        `);
-        const { listItems } = el;
-        el.setCheckedIndex(0);
-        expect(listItems[0].hasAttribute('checked')).to.be.true;
-        expect(listItems[1].hasAttribute('checked')).to.be.false;
-        el.setCheckedIndex(1);
-        expect(listItems[0].hasAttribute('checked')).to.be.false;
-        expect(listItems[1].hasAttribute('checked')).to.be.true;
-      });
-    });
-
-    // 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

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

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