@lion/ui 0.17.0-menu-system.1 → 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,422 +0,0 @@
-// @ts-nocheck
-/* eslint-disable class-methods-use-this */
-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 = '';
-
-    const mql = window.matchMedia(`(width <= ${this.breakpointMin}px)`);
-    /** @type {NavBarResponsiveMode} */
-    this.responsiveMode = mql.matches ? 'mobile' : 'desktop';
-    this._levelCfg = this._getLevelCfg(this.responsiveMode);
-    this._levelSecondaryCfg = this._getSecondaryLevelCfg(this.responsiveMode);
-
-    mql.addEventListener('change', () => {
-      this.responsiveMode = mql.matches ? 'mobile' : 'desktop';
-      this._levelCfg = this._getLevelCfg(this.responsiveMode);
-      this._levelSecondaryCfg = this._getSecondaryLevelCfg(this.responsiveMode);
-    });
-
-    this.#storeLatestFocusedElementId();
-  }
-
-  /**
-   * @param {NavBarResponsiveMode} responsiveMode
-   */
-  _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,
-        },
-      },
-    };
-  }
-
-  _getSecondaryLevelCfg(responsiveMode) {
-    if (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();
-    }
-  }
-
-  /**
-   * @param {import("./types.js").MenuItem}
-   * @param {number} level
-   */
-  _getId(menuItem, level) {
-    if (menuItem.id) return menuItem.id;
-    const title = menuItem.title || menuItem.label || 'item';
-    return `${
-      Number.isInteger(level) ? `l${level}-${title}` : title
-    }-${Math.random().toString(16).slice(2)}`;
-  }
-
-  /**
-   * @param {import('lit').PropertyValues} changedProperties
-   */
-  updated(changedProperties) {
-    if (changedProperties.has('responsiveMode')) {
-      this._levelCfg = this._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>
-          ${this._searchTemplate()}
-        </div>
-        <div class="nav-body">
-          ${this._menulevelTemplate(this.menuSupportItems, 1, '')}
-          ${this.responsiveMode === 'desktop'
-            ? this._ctasTemplate(this.ctaPrimary, this.ctaSecondary)
-            : ''}
-          ${this._menulevelTemplate(this.menuItems, 1, '')}
-        </div>
-        ${this.responsiveMode === 'mobile'
-          ? html`<div class="nav-footer">
-              ${this._ctasTemplate(this.ctaPrimary, this.ctaSecondary)}
-            </div>`
-          : ''}
-      </nav>
-    `;
-  }
-
-  /**
-   * @param {string[]} suggestions
-   * @returns {import('lit').TemplateResult}
-   */
-  _searchTemplate(suggestions = this.suggestions, prefilledSuggestion = this.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}
-   */
-  _ctasTemplate(ctaPrimary, ctaSecondary) {
-    return html`<div class="cta-items">
-      ${ctaSecondary?.href
-        ? html`<div class="cta-secondary">
-            <a id="${this._getId(ctaSecondary)}" href="${ctaSecondary.href}"
-              >${ctaSecondary.label}
-            </a>
-          </div>`
-        : ''}
-      ${ctaPrimary?.href
-        ? html`<div class="cta-primary">
-            <a id="${this._getId(ctaPrimary)}" href="${ctaPrimary.href}"> ${ctaPrimary.label}</a>
-          </div>`
-        : ''}
-    </div>`;
-  }
-
-  /**
-   * @param {MenuItem[]} menuItemsForLevel
-   * @param {number} level
-   * @returns {import('lit').TemplateResult}
-   */
-  _menulevelTemplate(menuItemsForLevel, level, prevText = '') {
-    // @ts-ignore
-    const cfgForLevel = this._levelCfg[`l${level}`];
-
-    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="${this._getId(menuItem)}" data-invoker>${menuItem.title}</button>
-                  ${menuItem.sub
-                    ? this._menulevelTemplate(menuItem.sub, level + 1, menuItem.title)
-                    : ''}`
-              : html` <a id="${this._getId(menuItem)}" href="${menuItem.link || ''}"
-                  >${menuItem.title}</a
-                >`}
-          </div>
-        `,
-      )}
-    </lion-menu-hybrid>`;
-  }
-}

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

@@ -1,41 +0,0 @@
-/**
- * @typedef {'mobile' | 'desktop'} NavBarResponsiveMode
- * Responsive mode for the navigation bar
- */
-
-/**
- * @typedef {Object} MenuItem
- * Navigation menu item
- * @property {string} [id] - Optional unique identifier
- * @property {string} title - Display title of the menu item
- * @property {string} [link] - URL for the menu item (for leaf items)
- * @property {MenuItem[]} [sub] - Submenu items (for parent items)
- */
-
-/**
- * @typedef {Object} CtaLink
- * Call-to-action link
- * @property {string} [id] - Optional unique identifier
- * @property {string} [href] - URL for the CTA
- * @property {string} [text] - Display text for the CTA
- * @property {string} [label] - Accessible label for the CTA
- */
-
-/**
- * @typedef {Object} Logo
- * Logo configuration for the navigation bar
- * @property {string} type - Logo type (e.g., 'ing')
- * @property {string} alt - Alternative text for the logo
- * @property {string} href - URL the logo links to
- * @property {string} [src] - Optional custom logo source URL
- */
-
-/**
- * @typedef {Object} LevelConfig
- * Configuration for a menu level
- * @property {boolean} [isBar] - Whether this level is displayed as a bar
- * @property {boolean} [hasFullWidthFlyout] - Whether this level has a full-width flyout
- * @property {object} [openableConfig] - Configuration for the openable overlay
- */
-
-export {};