@lion/ui 0.18.0-menu-system.6 → 0.18.1

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

@@ -1,583 +0,0 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
-import { defineCE, expect, fixture, html, unsafeStatic, aTimeout } from '@open-wc/testing';
-import { sendMouse, resetMouse, sendKeys } from '@web/test-runner-commands';
-import { useFakeTimers } from 'sinon';
-import { css } from 'lit';
-import { getDeepActiveElement } from '@lion/ui/overlays.js';
-import { LionMenuHybrid } from '../src/LionMenuHybrid.js';
-
-const l2Style = css`
-  [level='2'] > [slot='list'] {
-    position: absolute;
-    width: 100%;
-    left: 0;
-    right: 0;
-    padding: 1em;
-    background-color: white;
-    border: 1px solid gray;
-    box-sizing: border-box;
-  }
-`;
-
-const config = {
-  l1: {
-    isBar: true,
-    hasFullWidthFlyout: true,
-    openableConfig: {
-      // We want disclosure behavior
-      placementMode: 'custom',
-      // N.B. we don't have an invoker...
-      isActivated: false,
-      inheritsReferenceWidth: 'none',
-      focusContentOnOpen: true,
-    },
-  },
-  l2: {
-    isBar: false,
-    openableConfig: {
-      // We want disclosure behavior
-      placementMode: 'custom',
-      hidesOnOutsideClick: true,
-      hidesOnEscape: true,
-      inheritsReferenceWidth: 'none',
-      focusContentOnOpen: true,
-    },
-  },
-};
-
-export function runLionMenuHybridSuite({ klass = LionMenuHybrid } = {}) {
-  const tagString = defineCE(class extends klass {});
-  const tag = unsafeStatic(tagString);
-
-  describe('LionMenuHybrid', () => {
-    /** @type {import('sinon').SinonFakeTimers | null} */
-    let clock = null;
-
-    /** @param {LionMenuHybrid} el */
-    const isMoreButtonMenuShown = el => {
-      const menu = el.querySelector('[data-more-button-menu]');
-      return menu ? getComputedStyle(menu).width !== '0px' : false;
-    };
-
-    /** @param {LionMenuHybrid} el */
-    const getMoreButton = el =>
-      /** @type {HTMLElement | null} */ (el.querySelector('[data-more-button]'));
-
-    /** @param {LionMenuHybrid} el */
-    const isAnyL2MenuShown = el =>
-      Array.from(el.querySelectorAll('[level="2"]')).some(menu => menu.hasAttribute('opened'));
-
-    /** @param {LionMenuHybrid} el */
-    const focusLastVisibleItemInMainMenu = async el => {
-      const moreButton = el.querySelector('[data-more-button]');
-      const previousElement = moreButton?.parentElement?.previousElementSibling;
-      const anchor = previousElement?.querySelector('a');
-      if (anchor instanceof HTMLElement) {
-        anchor.focus();
-      }
-      await aTimeout(0);
-    };
-
-    const hitShiftTab = async () => {
-      await sendKeys({
-        down: 'Shift',
-      });
-      await sendKeys({
-        press: 'Tab',
-      });
-      await sendKeys({
-        up: 'Shift',
-      });
-    };
-
-    /**
-     * @param {HTMLElement} element
-     */
-    function getCoordinates(element) {
-      const { x, y, height } = element.getBoundingClientRect();
-
-      return {
-        x: Math.floor(x + window.pageXOffset),
-        y: Math.floor(y + window.pageYOffset + height / 2),
-      };
-    }
-
-    /**
-     *
-     * We use native click in many of the tests here because
-     * the source code uses the `mousedown`, `focusin`, `focusout`, `click`
-     * events and otherwise we need to emit those events programmatically
-     * @param {LionMenuHybrid} el
-     */
-    const clickOnMoreButton = async el => {
-      const moreButton = getMoreButton(el);
-      if (!moreButton) {
-        return;
-      }
-      const { x, y } = getCoordinates(moreButton);
-      await sendMouse({ type: 'click', position: [x, y] });
-      clock?.tick(100);
-      await aTimeout(0);
-    };
-
-    /** @param {LionMenuHybrid} el */
-    const waitResizeEventDebounce = async el => {
-      await el.updateComplete;
-      // wait for resize event debouncer
-      clock?.tick(55);
-    };
-
-    /**
-     * We need actual 100 ms timeout when More button menu is getting hidden,
-     * `useFakeTimers` is not an option. Othewise Safari fails.
-     * See more info in the description of `_createMoreButtonWrapper` method in `MoreButtonMenuMixin`
-     */
-    const waitAfterMoreButtonMenuHides = async () => {
-      await aTimeout(120);
-    };
-
-    /** @param {LionMenuHybrid} el */
-    const getDirectListItemsUnderMoreButtonMenu = el => [
-      ...Array.from(el.querySelectorAll('[data-more-button-menu] > [role="listitem"]')),
-    ];
-
-    /** @returns {Promise<LionMenuHybrid>} */
-    const getFixture = async () => {
-      const el = await fixture(html`        
-        <${tag} 
-          .itemWrap="${true}"
-          ?data-has-full-width-flyout="${config.l1.hasFullWidthFlyout}"
-          .config="${config.l1.openableConfig}"
-          .bar="${config.l1.isBar}"
-          ._activeMode="${'tabbable-disclosure'}" 
-          style="min-width: 170px; max-width: 170px; position:relative"            
-        >
-          <div role="listitem" id="item1" style="min-width: 50px; max-width: 50px;">
-             <button data-invoker>
-              Item 1
-            </button>
-            <${tag} 
-              .config="${config.l2.openableConfig}"
-              .bar="${config.l2.isBar}"
-              ._activeMode="${'tabbable-disclosure'}"               
-            >
-              <div role="listitem" id="item1.1">
-                <a href="#">Item 1.1</a>
-              </div>
-            </${tag}>
-          </div>
-          <div role="listitem" id="item2" style="min-width: 50px; max-width: 50px;">
-            <a href="#">Item 2</a>
-          </div>
-          <div role="listitem" id="item3" style="min-width: 50px; max-width: 50px;">
-            <a href="#">Item 3</a>
-          </div>
-          <div role="listitem" id="item4" style="min-width: 50px; max-width: 50px;">            
-            <button data-invoker>
-              Item 4
-            </button>
-            <${tag} 
-              .config="${config.l2.openableConfig}"
-              .bar="${config.l2.isBar}"
-              ._activeMode="${'tabbable-disclosure'}" 
-            >
-              <div role="listitem" id="item4.1">
-                <a href="#">Item 4.1</a>
-              </div>
-            </${tag}>
-          </div>
-          <div slot="more-button" style="min-width: 50px; max-width: 50px;">
-            <button>More</button>
-          </div>
-        </${tag}>
-        <style>
-          ${l2Style}
-        </style>    
-      `);
-
-      const hybridEl = /** @type {LionMenuHybrid} */ (el);
-      await waitResizeEventDebounce(hybridEl);
-      return hybridEl;
-    };
-
-    beforeEach(() => {
-      clock = useFakeTimers({
-        shouldAdvanceTime: true,
-      });
-    });
-    afterEach(async () => {
-      clock?.restore();
-      await resetMouse();
-    });
-
-    it(`[
-          {
-            action: 'Click on More button',
-            expectation: 'more button menu is shown, l2 menu is hidden'
-          },
-          {
-            action: 'Inside more button menu, click on L1 item that has L2',
-            expectation: 'more button menu is hidden, l2 menu is shown'
-          },
-          {
-            action: 'Click on More button',
-            expectation: 'more button menu is shown, l2 menu is hidden'
-          },
-      ]`, async () => {
-      const el = await getFixture();
-      expect(isAnyL2MenuShown(el)).to.be.false;
-      await clickOnMoreButton(el);
-      /** @type {HTMLButtonElement | null} */ (el.querySelector('#item4 > button'))?.click();
-      await waitAfterMoreButtonMenuHides();
-      expect(isMoreButtonMenuShown(el)).to.be.false;
-      expect(isAnyL2MenuShown(el)).to.be.true;
-      await clickOnMoreButton(el);
-      expect(isAnyL2MenuShown(el)).to.be.false;
-      expect(isMoreButtonMenuShown(el)).to.be.true;
-    });
-
-    it(`[
-      {
-        action: 'Focus last visible L1 item in the main menu',
-      },
-      {
-        action: 'Hit Tab',
-        expectation: '
-          more button menu is shown,
-          the first L1 item in the more button menu is focused,
-        '
-      },
-    ]`, async () => {
-      const el = await getFixture();
-      await focusLastVisibleItemInMainMenu(el);
-
-      // Hitting Tab should open the More button menu and focus the first L1 item in it
-      await sendKeys({
-        press: 'Tab',
-      });
-
-      expect(isMoreButtonMenuShown(el)).to.be.true;
-
-      // make sure the first L1 inside More button menu is focused
-      const firstItemInMoreMenu = getDirectListItemsUnderMoreButtonMenu(el)[0];
-      expect(firstItemInMoreMenu.contains(getDeepActiveElement())).to.be.true;
-    });
-
-    it(`[
-      {
-        action: 'Click on the L1 item that has children in the *main* menu',
-        expectation: '
-          L2 menu is shown,
-        '
-      },
-      {
-        action: 'Click on More button',        
-        expectation: '
-          L2 menu gets closed,
-          More button menu is shown,
-        '
-      }
-    ]`, async () => {
-      const el = await getFixture();
-      expect(isAnyL2MenuShown(el)).to.be.false;
-
-      // click on the first L1 item that has L2 children
-      /** @type {HTMLButtonElement | null} */ (el.querySelector('#item1 > button'))?.click();
-      await aTimeout(0);
-
-      expect(isMoreButtonMenuShown(el)).to.be.false;
-      expect(isAnyL2MenuShown(el)).to.be.true;
-
-      await clickOnMoreButton(el);
-      expect(isMoreButtonMenuShown(el)).to.be.true;
-      expect(isAnyL2MenuShown(el)).to.be.false;
-    });
-
-    it(`[
-      {
-        action: 'Click on the L1 item that has children in the *main* menu',
-        expectation: '
-          L2 menu is shown,
-        '
-      },
-      {
-        action: 'Hit Tab many times so that the focus goes through all L2 items,
-        then focus moves to the next L1 item in the *main* menu and finally reaches 
-        the last visible L1 item in the main menu just before the More button',
-        expectation: '
-          L2 menu stays open,
-        '
-      },
-      {
-        action: 'When the Tab stays on the last L1 item before More button
-          and then we hit Tab again to get into More button menu',
-        expectation: '
-          L2 menu from L1 that we clicked at the very first step is closed,
-          More button menu is shown
-        '
-      },
-    ]`, async () => {
-      const el = await getFixture();
-      expect(isAnyL2MenuShown(el)).to.be.false;
-      // click on the first L1 item that has L2 children
-      /** @type {HTMLButtonElement | null} */ (el.querySelector('#item1 > button'))?.click();
-
-      // focus #item1.1
-      await sendKeys({
-        press: 'Tab',
-      });
-
-      // focus #item2
-      await sendKeys({
-        press: 'Tab',
-      });
-      expect(isAnyL2MenuShown(el)).to.be.true;
-
-      // focus first L1 item inside More button menu
-      await sendKeys({
-        press: 'Tab',
-      });
-
-      expect(isMoreButtonMenuShown(el)).to.be.true;
-      expect(isAnyL2MenuShown(el)).to.be.false;
-    });
-
-    it(`[
-      {
-        action: 'Focus last visible L1 item in the main menu',
-      },
-      {
-        action: 'Hit Tab',
-        expectation: '
-          more button menu is shown,
-          the first L1 item in the more button menu is focused,
-        '
-      },
-      {
-        action: 'Click on More button',
-        expectation: '
-          more button menu is hidden
-        '
-      }
-    ]`, async () => {
-      const el = await getFixture();
-      await focusLastVisibleItemInMainMenu(el);
-
-      // focus first L1 item inside More button menu
-      await sendKeys({
-        press: 'Tab',
-      });
-
-      expect(isMoreButtonMenuShown(el)).to.be.true;
-      expect(isAnyL2MenuShown(el)).to.be.false;
-      await clickOnMoreButton(el);
-      expect(isMoreButtonMenuShown(el)).to.be.false;
-      expect(isAnyL2MenuShown(el)).to.be.false;
-    });
-
-    it(`[
-      {
-        action: 'Focus last visible L1 item in the main menu',
-      },
-      {
-        action: 'Hit Tab',
-        expectation: '
-          more button menu is shown,
-          the first L1 item in the more button menu is focused,
-        '
-      },
-      {
-        action: 'Hit Shift + Tab',
-        expectation: '
-          more button menu is hidden,
-          the last visible L1 item in the main menu is focused,
-        '
-      },
-    ]`, async () => {
-      const el = await getFixture();
-      await focusLastVisibleItemInMainMenu(el);
-
-      // focus first L1 item inside More button menu
-      await sendKeys({
-        press: 'Tab',
-      });
-
-      expect(isMoreButtonMenuShown(el)).to.be.true;
-      expect(isAnyL2MenuShown(el)).to.be.false;
-
-      // hit Shift + Tab
-      await hitShiftTab();
-      await waitAfterMoreButtonMenuHides();
-
-      expect(isMoreButtonMenuShown(el)).to.be.false;
-      expect(isAnyL2MenuShown(el)).to.be.false;
-    });
-
-    it(`[
-      {
-        action: 'Focus last visible L1 item in the main menu',
-      },
-      {
-        action: 'Hit Tab',
-        expectation: '
-          more button menu is shown,
-          the first L1 item in the more button menu is focused,
-        '
-      },
-      {
-        action: 'Focus the L1 item in "More" menu that has children and Hit Enter',
-        expectation: '
-          more button menu is hidden,
-          l2 menu is show,
-        '
-      },
-    ]`, async () => {
-      const el = await getFixture();
-      await focusLastVisibleItemInMainMenu(el);
-
-      // focus first L1 item inside More button menu
-      await sendKeys({
-        press: 'Tab',
-      });
-
-      // focus #item4 . It has childrent
-      await sendKeys({
-        press: 'Tab',
-      });
-
-      expect(isMoreButtonMenuShown(el)).to.be.true;
-      expect(isAnyL2MenuShown(el)).to.be.false;
-
-      // hit Enter
-      await sendKeys({
-        press: 'Enter',
-      });
-      await waitAfterMoreButtonMenuHides();
-
-      expect(isMoreButtonMenuShown(el)).to.be.false;
-      expect(isAnyL2MenuShown(el)).to.be.true;
-    });
-
-    it(`[
-      {
-        action: 'Focus last visible L1 item in the main menu',
-      },
-      {
-        action: 'Hit Tab',
-        expectation: '
-          more button menu is shown,
-          the first L1 item in the more button menu is focused,
-        '
-      },
-      {
-        action: 'Focus the L1 item in "More" menu that has children and Hit Enter',
-        expectation: '
-          more button menu is hidden,
-          l2 menu is show,
-          the PARENT L1 item under the More button is focused, not the first one
-        '
-      },
-      {
-        action: 'Hit Shitft + Tab',
-        expectation: '
-          more button menu is show,
-          l2 menu is hidden,
-        '
-      },
-      {
-        action: 'Hit Shitft + Tab until we reach the first item in the More button menu',
-      },
-      {
-        action: 'Hit Shift + Tab',
-        expectation: '
-          more button menu is hidden,
-          the last visible L1 item in the main menu is focused,
-        '
-      },
-    ]`, async () => {
-      const el = await getFixture();
-      await focusLastVisibleItemInMainMenu(el);
-
-      // focus first L1 item inside More button menu
-      await sendKeys({
-        press: 'Tab',
-      });
-
-      // focus #item4 . It has childrent
-      await sendKeys({
-        press: 'Tab',
-      });
-
-      expect(isMoreButtonMenuShown(el)).to.be.true;
-      expect(isAnyL2MenuShown(el)).to.be.false;
-
-      // hit Enter
-      await sendKeys({
-        press: 'Enter',
-      });
-      await waitAfterMoreButtonMenuHides();
-
-      expect(isMoreButtonMenuShown(el)).to.be.false;
-      expect(isAnyL2MenuShown(el)).to.be.true;
-
-      // Focus #item4. It is the second item in the More button menu
-      await hitShiftTab();
-      expect(isMoreButtonMenuShown(el)).to.be.true;
-      expect(isAnyL2MenuShown(el)).to.be.false;
-      const focusedElement = getDeepActiveElement();
-
-      // the PARENT L1 item under the More button is focused, not the first one
-      expect(
-        el?.querySelector('#item4')?.contains(focusedElement) &&
-          focusedElement instanceof HTMLElement &&
-          el.listItems.includes(focusedElement),
-      ).to.be.true;
-      // Focus #item3. It is the first item in the More button menu
-      await hitShiftTab();
-      // Focus #item2. It is the last visible item in the main menu
-      await hitShiftTab();
-      await waitAfterMoreButtonMenuHides();
-
-      expect(isMoreButtonMenuShown(el)).to.be.false;
-      expect(isAnyL2MenuShown(el)).to.be.false;
-    });
-
-    it(`[
-      {
-        action: 'Click on More button',
-        expectation: 'more button menu is shown, l2 menu is hidden'
-      },
-      {
-        action: 'Inside more button menu, click on L1 item that has L2',
-        expectation: 'more button menu is hidden, l2 menu is shown'
-      },
-      {
-        action: 'Hit Shift + Tab',
-        expectation: '
-          more button menu is show,
-          l2 menu is hidden,
-          the parent L1 item under the More button is focused
-        '
-      }
-    ]`, async () => {
-      const el = await getFixture();
-      await clickOnMoreButton(el);
-      // Inside more button menu, click on L1 item that has L2
-      /** @type {HTMLButtonElement | null} */ (el.querySelector('#item4 > button'))?.click();
-      await waitAfterMoreButtonMenuHides();
-      expect(isMoreButtonMenuShown(el)).to.be.false;
-      expect(isAnyL2MenuShown(el)).to.be.true;
-      // Focus #item4. It is the second item in the More button menu
-      await hitShiftTab();
-      expect(isMoreButtonMenuShown(el)).to.be.true;
-      expect(isAnyL2MenuShown(el)).to.be.false;
-      const focusedElement = getDeepActiveElement();
-      // the PARENT L1 item under the More button is focused, not the first one
-      expect(
-        el?.querySelector('#item4')?.contains(focusedElement) &&
-          focusedElement instanceof HTMLElement &&
-          el.listItems.includes(focusedElement),
-      ).to.be.true;
-    });
-  });
-}

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