@lion/ui 0.19.1 → 0.20.0-menu-system.0

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

@@ -0,0 +1,84 @@
+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 _invokerNode: 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

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

@@ -0,0 +1,439 @@
+// @ts-nocheck
+/* eslint-disable class-methods-use-this */
+import { LitElement, html, css, nothing } 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%;
+        }
+
+        /**
+        * TODO remove it. Use it now for testing More button feature
+        */
+        :host([responsive-mode='desktop']) [level='1'] > [slot='list'] > [role='listitem'],
+        :host([responsive-mode='desktop'])
+          [level='1']
+          > [slot='list']
+          > [data-more-button-wrapper] {
+          margin-right: 180px;
+        }
+
+        :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',
+            isActivated: 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...
+          isActivated: 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, '', true)}
+        </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 = '', itemWrap = false) {
+    // @ts-ignore
+    const cfgForLevel = this._levelCfg[`l${level}`];
+
+    return html`<lion-menu-hybrid
+      ?item-wrap=${itemWrap}
+      .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>
+        `,
+      )}
+      ${itemWrap
+        ? html`<div slot="more-button">
+            <button>More</button>
+          </div>`
+        : nothing}
+    </lion-menu-hybrid> `;
+  }
+}

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

@@ -0,0 +1,41 @@
+/**
+ * @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 {};

package/components/overlays/NEXT.md

@@ -0,0 +1,49 @@
+- Redesign goals OverlayController
+  - Simplicity
+    - One primitive to (controller to) rule them all
+      - Aligned api with all disclosure mechanisms (openables: <https://open-ui.org/components/openable.explainer/>)
+      - Aligned with platform overlay primitives (popover, dialog and tooltip)
+    - Controller will be elegantly aligned with host
+      - Controller props will be mapped to a host via a mixin, w/o requiring lots of boilerplate
+      - No race conditions due to unaligned heart beats: both hook in to the same "tick": the reactive update cycle of lit (which can theoretically be swapped by other cycles, see <https://lit.dev/docs/frameworks/react/#usecontroller>)
+        - In general, all property effects / events / reactivity should be aligned as much as possible with the update cycle (for predictability and perf. We only need
+    - All components will just be configuration (no need to redefine a lot of logic)
+    - OverlayController (or OpenableController, or DisclosureController, or VisitibilityToggleController) will be the biggest common denominator. Having all logic in one place, makes it a lot easier to erase about then having it scattered across many mixin and/or controller levels
+    - Even though the amount of logic is large (and might feel a bit monolithic), this is just needed when we want to have a stable, battle tested abstraction around all edge cases that building accessible disclosures should handle
+      - However, this does not come at an extra performance cost (see performance, you will only load what you need)
+    - The current OverlayController is a long file that can benefit from some modularity and cleanup
+      - Every overlay feature can be provided in a separate file with knowledge about the overlay lifecycle
+      - We can provide/reuse some utils like Resettable from VisibilityToggleCtrl ()
+  - Flexibility
+    - Re-use your markup for different screen sizes and/or devices (that may have different appearances, but the same functionality/semantics)
+      - Think of:
+        - a datepicker that opens as dropdown on desktop and as centered modal dialog on mobile
+        - a menubutton that opens as dropdown on desktop and as bottomsheet
+        - A menu that opens as dropdown on desktop and a collapsible (or even a plain list) on mobile
+    - As explained above, controllers are the most re-usable primitives, as a web component/mixin does not always provide the flexibility we need
+      - Controllers can be easliy mapped to directives (giving the same flexibility as "platform attributes" like popover). Forward compatible with <https://github.com/WICG/webcomponents/issues/1029>
+      - Controllers can be easily mapped to web components or mixins
+      - Contrary to mixins, it’s easy to conditionally load a controller
+      - Contrary to mixins, it’s easy to “undo” a controller (which is helpful in edge cases)
+  - Performance
+    - Will leverage the platform where possible:
+      - Use popover
+  - Forward compatibility
+    - Aligns as much as possible with (future) platform apis
+      - This leverages existing dev knowledge (api familiarity)
+      - This allows to build drop in replacements
+      - This allows to rely on the platform (reducing maintenance costs, increasing performance)
+  - Completeness
+    - Supports all use cases to build every UI thinkable:
+      - Will have optional dependency to menu controllers and interactive list controllers
+      - Supports visually hidden scenarios, hides
+  - Backward compatibility
+    - Since the amount of consumers of our overlay system (directly or indirectly) is large, we should provide a compatibility mechanism where possible. At the same time, we want to create an api as clean/aligned/forward compatible as possible. We could consider an optional compat-layer (a global import at the top of an app extending OverlayController prototype). Think of:
+      - Mapping popper api to popover concepts
+      -
+
+# Why start with OverlayController?
+
+- there is a lot of value in cleaning it up as there are many platform improvements
+- it's used by many
+- It is already a controller (we created it before Lit controllers existed) and therefore impact is minimal