@lion/ui 0.17.0-menu-system.0 → 0.17.0

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

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

@@ -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

package/components/navigation-bar/src/LionNavigationBar.js

@@ -1,449 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { LionMenuHybrid } from '@lion/ui/menu.js';
-import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
-
-/**
- * @typedef {import('./types.js').NavBarResponsiveMode} NavBarResponsiveMode
- * @typedef {import('./types.js').MenuItem} MenuItem
- * @typedef {import('./types.js').CtaLink} CtaLink
- * @typedef {import('./types.js').Logo} Logo
- * @typedef {import('./types.js').LevelConfig} LevelConfig
- */
-
-export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
-  static get properties() {
-    return {
-      responsiveMode: { type: String, reflect: true, attribute: 'responsive-mode' },
-      // logo: { type: String },
-      menuItems: { type: Array },
-      menuSupportItems: { type: Array },
-      ctaPrimary: { type: Object },
-      ctaSecondary: { type: Object },
-      suggestions: { type: Array },
-      showOnMobile: { type: Array, attribute: 'show-on-mobile', reflect: true },
-
-      _levelCfg: { state: true },
-    };
-  }
-
-  static get scopedElements() {
-    return {
-      // 'lion-menu-overlay': LionMenuOverlay,
-      'lion-menu-hybrid': LionMenuHybrid,
-    };
-  }
-
-  static get styles() {
-    return [
-      css`
-        /** specific styles */
-
-        :host([responsive-mode='desktop']) [data-has-full-width-flyout] > [slot='list'] {
-          /** make sure that we give the right styles */
-          position: relative;
-        }
-
-        :host([responsive-mode='desktop'])
-          [data-has-full-width-flyout]
-          > [slot='list']
-          [level='2']
-          > [slot='list'] {
-          position: absolute;
-          width: 100%;
-          left: 0;
-          right: 0;
-          min-height: 300px;
-          padding: 1em;
-          background-color: white;
-          border: 1px solid gray;
-          box-sizing: border-box;
-        }
-
-        :host([responsive-mode='desktop']) [level='3'] > [slot='list'] {
-          position: absolute;
-          left: 33.333%;
-          width: 33.333%;
-          top: 0;
-          padding: 1em;
-          background-color: white;
-          box-sizing: border-box;
-          height: 100%;
-        }
-
-        :host([responsive-mode='mobile']) nav {
-          border: 1px solid black;
-          display: block;
-          position: fixed;
-          top: 0;
-          bottom: 0;
-          right: 0;
-          min-width: 500px;
-        }
-
-        :host([responsive-mode='mobile']) [level][opened] > [slot='list'] {
-          left: 0;
-          width: 100%;
-          top: 0;
-          box-sizing: border-box;
-        }
-
-        :host([responsive-mode='mobile']) [slot='list'] {
-          position: relative;
-          padding: 1em;
-          background-color: white;
-        }
-
-        :host([responsive-mode='mobile']) [level='2'] > [slot='list'],
-        :host([responsive-mode='mobile']) [level='3'] > [slot='list'] {
-          position: absolute;
-          left: 100%;
-          top: 0;
-          box-sizing: border-box;
-          padding-bottom: 200%;
-        }
-
-        :host([responsive-mode='mobile']) nav {
-          display: flex;
-          flex-direction: column;
-          /* height: 100%;
-          justify-content: space-between; */
-        }
-
-        /* :host([responsive-mode='mobile']) .cta-items {
-          position: absolute;
-          bottom: 0;
-          width: 100%;
-          padding: 1em;
-          background-color: white;
-          box-sizing: border-box;
-        } */
-
-        :host([responsive-mode='mobile']) .logo-and-close {
-          padding: 1em;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-
-    /** @type {Logo} */
-    this.logo = { type: 'ing', alt: 'ING homepage', href: '/' };
-    /** @type {MenuItem[]} */
-    this.menuSupportItems = [];
-    // /**
-    //  * @type {string[]}
-    //  * @description Choose which items to show on mobile when in default mode, maximum of two. Possible values: 'search', 'ctaPrimary', 'ctaSecondary', 'avatarMenu'
-    //  */
-    // this.showOnMobile = [];
-    /**
-     * @type {CtaLink}
-     */
-    // @ts-ignore
-    this.ctaPrimary = {};
-    /**
-     * @type {CtaLink}
-     */
-    // @ts-ignore
-    this.ctaSecondary = {};
-    /** @type {MenuItem[]} */
-    this.menuItems = [];
-    // /** @type {Boolean} */
-    // this.searchDisabled = false;
-    this.breakpointMin = 1400; // force desktop
-    /** @type {string[]} */
-    this.suggestions = [];
-
-    this.prefilledSuggestion = '';
-
-    // Assign styles as a property, so that subclasses can augment it
-    // this.styles = styles;
-    // this.menuOpened = false;
-
-    const mql = window.matchMedia(`(width <= ${this.breakpointMin}px)`);
-    /** @type {NavBarResponsiveMode} */
-    this.responsiveMode = mql.matches ? 'mobile' : 'desktop';
-    this._levelCfg = LionNavigationBar.#getLevelCfg(this.responsiveMode);
-    this._levelSecondaryCfg = this.#getSecondaryLevelCfg();
-
-    mql.addEventListener('change', () => {
-      this.responsiveMode = mql.matches ? 'mobile' : 'desktop';
-      this._levelCfg = LionNavigationBar.#getLevelCfg(this.responsiveMode);
-      this._levelSecondaryCfg = this.#getSecondaryLevelCfg();
-    });
-
-    this.#storeLatestFocusedElementId();
-    this.#delegateAnalyticsEvents();
-  }
-
-  #getSecondaryLevelCfg() {
-    if (this.responsiveMode === 'mobile') {
-      return {
-        l1: {
-          isBar: true,
-        },
-        l2: {
-          isBar: false,
-        },
-      };
-    }
-
-    return {
-      l1: {
-        isBar: true,
-      },
-      l2: {
-        isBar: false,
-      },
-    };
-  }
-
-  /** @type {string | null} */
-  #latestFocusedElementId = null;
-
-  #storeLatestFocusedElementId() {
-    this.addEventListener('focusin', ({ target }) => {
-      // @ts-ignore
-      this.#latestFocusedElementId = target.id;
-    });
-  }
-
-  #syncLatestFocusedElementForNewResponsiveMode() {
-    // We might show/hide or rerender some elements (with same ids) in different positions in the DOM.
-    // As these are physically different elements, we must move focus (as otherwise it would be reset to body)
-    if (!this.#latestFocusedElementId) return;
-    const newFocusedElement = this.shadowRoot?.querySelector(`#${this.#latestFocusedElementId}`);
-    if (newFocusedElement instanceof HTMLElement) {
-      newFocusedElement.focus();
-    }
-  }
-
-  #delegateAnalyticsEvents() {
-    this.addEventListener('click', ({ target }) => {
-      if (!target || !(target instanceof HTMLElement)) return;
-
-      // @ts-expect-error
-      const isButton = target.tagName === 'BUTTON' || target.constructor._$isLionButton$;
-      const isAnchor = target.tagName === 'A';
-      if (!isButton && !isAnchor) return;
-
-      if (!target.id) return;
-
-      // TODO: do in extension layer
-      this.dispatchEvent(
-        new CustomEvent('nav-item-click', {
-          // N.B. we can also retrive the item
-          detail: {
-            item: {
-              id: target.id,
-              label: target.textContent?.trim() || '',
-              href: isAnchor ? target.getAttribute('href') : undefined,
-            },
-          },
-          // bubbles: true,
-          // composed: true,
-        }),
-      );
-    });
-  }
-
-  /**
-   * @param {NavBarResponsiveMode} responsiveMode
-   */
-  static #getLevelCfg(responsiveMode) {
-    // N.B. we're fighting some of the overlay configs provided by LionMenuOverlay here,
-    // the idea is to take over all of that when depending on LionMenu, after removing LonMenuOverlay and LionMenuHybrid components altogether.
-
-    if (responsiveMode === 'mobile') {
-      return {
-        l1: {
-          isBar: false,
-          openableConfig: {
-            // We want to do the absolute positioning ourselves, popper is not suited for this...
-            placementMode: 'custom',
-            isOpenable: false,
-            hidesOnOutsideClick: false,
-            inheritsReferenceWidth: 'none',
-          },
-        },
-        l2: {
-          openableConfig: {
-            // We want disclosure behavior
-            placementMode: 'custom',
-            hidesOnOutsideClick: false,
-            inheritsReferenceWidth: 'none',
-          },
-        },
-        l3: {
-          openableConfig: {
-            // We want disclosure behavior
-            placementMode: 'custom',
-            hidesOnOutsideClick: false,
-            inheritsReferenceWidth: 'none',
-          },
-        },
-      };
-    }
-
-    return {
-      l1: {
-        isBar: true,
-        hasFullWidthFlyout: true,
-        openableConfig: {
-          // We want disclosure behavior
-          placementMode: 'custom',
-          // N.B. we don't have an invoker...
-          isOpenable: false,
-          inheritsReferenceWidth: 'none',
-          focusContentOnOpen: true,
-        },
-      },
-      l2: {
-        openableConfig: {
-          // We want disclosure behavior
-          placementMode: 'custom',
-          hidesOnOutsideClick: true,
-          hidesOnEscape: true,
-          inheritsReferenceWidth: 'none',
-          focusContentOnOpen: true,
-        },
-      },
-      l3: {
-        openableConfig: {
-          // We want disclosure behavior
-          placementMode: 'custom',
-          inheritsReferenceWidth: 'none',
-          focusContentOnOpen: true,
-          // TODO: implement in OverlayController
-          hideVisually: true,
-        },
-      },
-    };
-  }
-
-  /**
-   * @param {import('lit').PropertyValues} changedProperties
-   */
-  updated(changedProperties) {
-    if (changedProperties.has('responsiveMode')) {
-      this._levelCfg = LionNavigationBar.#getLevelCfg(this.responsiveMode);
-      this.#syncLatestFocusedElementForNewResponsiveMode();
-    }
-  }
-
-  render() {
-    return html`
-      <nav>
-        <div class="nav-header">
-          <div class="logo-and-close">
-            <a href="${this.logo.href || '#'}">
-              <img src="${this.logo.src || ''}" alt="${this.logo.alt || ''}" />
-            </a>
-            ${this.responsiveMode === 'mobile'
-              ? html`<button data-close data-level="1">✖️</button>`
-              : ''}
-          </div>
-          ${LionNavigationBar._searchTemplate(this.suggestions, this.prefilledSuggestion)}
-        </div>
-        <div class="nav-body">
-          ${this._menulevelTemplate(this.menuSupportItems, 1, this._levelSecondaryCfg.l1, '')}
-          ${this.responsiveMode === 'desktop'
-            ? LionNavigationBar._ctaTemplate(this.ctaPrimary, this.ctaSecondary)
-            : ''}
-          ${this._menulevelTemplate(this.menuItems, 1, this._levelCfg.l1, '')}
-        </div>
-        ${this.responsiveMode === 'mobile'
-          ? html`<div class="nav-footer">
-              ${LionNavigationBar._ctaTemplate(this.ctaPrimary, this.ctaSecondary)}
-            </div>`
-          : ''}
-      </nav>
-    `;
-  }
-
-  /**
-   * @param {string[]} suggestions
-   * @returns {import('lit').TemplateResult}
-   */
-  static _searchTemplate(suggestions, prefilledSuggestion = '') {
-    return html` <form role="search">
-      <input
-        type="search"
-        list="search-list"
-        placeholder="What are you looking for?"
-        .value="${prefilledSuggestion}"
-      />
-      <datalist id="search-list">
-        ${suggestions.map(suggestion => html`<option value="${suggestion}"></option>`)}
-      </datalist>
-      <input type="submit" value="Search" />
-    </form>`;
-  }
-
-  /**
-   * @param {CtaLink} ctaPrimary
-   * @param {CtaLink} ctaSecondary
-   * @returns {import('lit').TemplateResult}
-   */
-  static _ctaTemplate(ctaPrimary, ctaSecondary) {
-    return html`<div class="cta-items">
-      ${ctaSecondary?.href
-        ? html`<div class="cta-secondary">
-            <a id="${ctaSecondary.id}" href="${ctaSecondary.href}">${ctaSecondary.label} </a>
-          </div>`
-        : ''}
-      ${ctaPrimary?.href
-        ? html`<div class="cta-primary">
-            <a id="${ctaPrimary.id}" href="${ctaPrimary.href}">${ctaPrimary.label} </a>
-          </div>`
-        : ''}
-    </div>`;
-  }
-
-  /**
-   * @param {MenuItem[]} menuItemsForLevel
-   * @param {number} level
-   * @param {LevelConfig} cfgForLevel
-   * @returns {import('lit').TemplateResult}
-   */
-  _menulevelTemplate(menuItemsForLevel, level, cfgForLevel, prevText = '') {
-    // @ts-ignore
-    const cfgForNextLevel = this._levelCfg[`l${level + 1}`];
-
-    const getId = (/** @type {import("./types.js").MenuItem} */ menuItem) =>
-      menuItem.id || `l${level}-${menuItem.title}`;
-
-    return html`<lion-menu-hybrid
-      .config="${cfgForLevel.openableConfig || {}}"
-      .bar="${cfgForLevel.isBar}"
-      ?data-has-full-width-flyout="${cfgForLevel.hasFullWidthFlyout}"
-      ._activeMode="${'tabbable-disclosure'}"
-    >
-      ${level > 1 && this.responsiveMode === 'mobile'
-        ? html` <div role="listitem">
-            <button data-close data-level="${level}">&lt; ${prevText}</button>
-          </div>`
-        : ''}
-      ${menuItemsForLevel.map(
-        menuItem => html`
-          <div role="listitem">
-            ${menuItem.sub
-              ? html` <button id="${getId(menuItem)}" data-invoker>${menuItem.title}</button>
-                  ${menuItem.sub
-                    ? this._menulevelTemplate(
-                        menuItem.sub,
-                        level + 1,
-                        cfgForNextLevel,
-                        menuItem.title,
-                      )
-                    : ''}`
-              : html` <a id="${getId(menuItem)}" href="${menuItem.link || ''}"
-                  >${menuItem.title}</a
-                >`}
-          </div>
-        `,
-      )}
-    </lion-menu-hybrid>`;
-  }
-}