@redvars/peacock 3.3.0 → 3.3.2

package/src/menu/menu/menu.ts

@@ -1,136 +1,444 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import type { Placement } from '@floating-ui/dom';
+import styles from './menu.scss';
+import { MenuItem } from '../menu-item/menu-item.js';
+import { MenuSurfaceController } from './MenuSurfaceController.js';
+
+type CloseReason =
+  | { kind: 'click-selection' }
+  | { kind: 'keydown'; key: string }
+  | { kind: 'outside-click' }
+  | { kind: 'focusout' }
+  | { kind: 'programmatic' };
 
 /**
  * @label Menu
  * @tag wc-menu
  * @rawTag menu
- * @summary A dropdown menu component.
+ * @summary A list of menu items.
  * @tags navigation
  *
  * @example
  * ```html
  * <wc-menu>
- *   <wc-menu-list>
- *     <wc-menu-item>Item 1</wc-menu-item>
- *   </wc-menu-list>
+ *   <wc-menu-item>Item 1</wc-menu-item>
+ *   <wc-menu-item>Item 2</wc-menu-item>
  * </wc-menu>
  * ```
  */
 export class Menu extends LitElement {
+  static styles = [styles];
+
+  static Item = MenuItem;
+
   @property({ type: Boolean, reflect: true }) open = false;
 
-  // Position: 'bottom-start' | 'bottom-end' | etc. (Simplified here to generic dropdown)
-  @property({ type: String }) align = 'start';
+  @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
+    'standard';
 
-  @query('.menu-wrapper') menuWrapper!: HTMLElement;
+  @property({ type: String }) anchor = '';
 
-  private _boundClickOutside: (e: MouseEvent) => void;
+  @property({ type: Boolean, attribute: 'stay-open-on-outside-click' })
+  stayOpenOnOutsideClick = false;
 
-  constructor() {
-    super();
-    this._boundClickOutside = this._handleClickOutside.bind(this);
-  }
+  @property({ type: Boolean, attribute: 'stay-open-on-focusout' })
+  stayOpenOnFocusout = false;
+
+  @property({ type: Boolean, attribute: 'is-submenu' }) isSubmenu = false;
+
+  @property({ type: String }) placement: Placement = 'bottom-start';
+
+  @property({ type: Number }) offset = 6;
+
+  @state() private activeIndex = -1;
+
+  @query('.menu') private readonly menuListElement!: HTMLElement;
+
+  anchorElement: HTMLElement | null = null;
+
+  private readonly _surfaceController = new MenuSurfaceController(this);
+
+  private _lastFocusedElement: HTMLElement | null = null;
+
+  private _closeReason: CloseReason = { kind: 'programmatic' };
 
   connectedCallback() {
     // eslint-disable-next-line wc/guard-super-call
     super.connectedCallback();
-    window.addEventListener('click', this._boundClickOutside);
-    // Listen for menu-item clicks bubbling up
-    this.addEventListener('click', this._handleItemClick);
+    this.setAttribute('role', 'menu');
+
+    this.addEventListener('keydown', this._onKeyDown);
+    this.addEventListener('focusout', this._onFocusOut);
+    this.addEventListener('menu-item-activate', this._onItemActivate);
+    this.addEventListener('menu-item-request-close', this._onItemRequestClose);
+    window.addEventListener('click', this._onWindowClick, { capture: true });
+    this._syncAnchorAria();
   }
 
   disconnectedCallback() {
-    // eslint-disable-next-line wc/guard-super-call
+    this.removeEventListener('keydown', this._onKeyDown);
+    this.removeEventListener('focusout', this._onFocusOut);
+    this.removeEventListener('menu-item-activate', this._onItemActivate);
+    this.removeEventListener(
+      'menu-item-request-close',
+      this._onItemRequestClose,
+    );
+    window.removeEventListener('click', this._onWindowClick, { capture: true });
     super.disconnectedCallback();
-    window.removeEventListener('click', this._boundClickOutside);
-    this.removeEventListener('click', this._handleItemClick);
   }
 
-  private _handleClickOutside(e: MouseEvent) {
-    if (!this.open) return;
+  get items(): MenuItem[] {
+    const slot = this.shadowRoot?.querySelector('slot');
+    const elements = slot?.assignedElements({ flatten: true }) ?? [];
+    const items: MenuItem[] = [];
+
+    for (const element of elements) {
+      if (element instanceof MenuItem) {
+        items.push(element);
+      } else {
+        const maybeItem = (element as { item?: unknown }).item;
+        if (maybeItem instanceof MenuItem) {
+          items.push(maybeItem);
+        }
+      }
+    }
+
+    return items;
+  }
+
+  show() {
+    if (this.open) {
+      return;
+    }
+
+    this._closeReason = { kind: 'programmatic' };
+    this.open = true;
+  }
+
+  close(reason: CloseReason = { kind: 'programmatic' }) {
+    if (!this.open) {
+      return;
+    }
+
+    this._closeReason = reason;
+    this.open = false;
+  }
+
+  override focus() {
+    const target = this._getActiveItem() ?? this._getFirstEnabledItem();
+    target?.focus();
+  }
+
+  private _resolveAnchorElement() {
+    if (this.anchorElement) {
+      return this.anchorElement;
+    }
+
+    if (!this.anchor) {
+      return null;
+    }
+
+    const root = this.getRootNode() as Document | ShadowRoot;
+    if ('getElementById' in root) {
+      return root.getElementById(this.anchor);
+    }
+
+    return document.getElementById(this.anchor);
+  }
+
+  private _syncAnchorAria() {
+    const anchorEl = this._resolveAnchorElement();
+    if (!anchorEl) {
+      return;
+    }
+
+    if (!this.id) {
+      this.id = `wc-menu-${Math.random().toString(36).slice(2, 9)}`;
+    }
+
+    anchorEl.setAttribute('aria-haspopup', 'menu');
+    anchorEl.setAttribute('aria-controls', this.id);
+    anchorEl.setAttribute('aria-expanded', String(this.open));
+  }
+
+  private _enabledItems() {
+    return this.items.filter(item => !item.disabled);
+  }
+
+  private _syncRovingTabIndex() {
+    const enabledItems = this._enabledItems();
+    if (!enabledItems.length) {
+      this.activeIndex = -1;
+      return;
+    }
+
+    if (this.activeIndex < 0 || this.activeIndex >= enabledItems.length) {
+      this.activeIndex = 0;
+    }
+
+    for (let index = 0; index < enabledItems.length; index += 1) {
+      const currentItem = enabledItems[index];
+      currentItem.tabIndex = index === this.activeIndex ? 0 : -1;
+      currentItem.selected = index === this.activeIndex;
+    }
+  }
+
+  private _setActiveByOffset(offset: 1 | -1) {
+    const enabledItems = this._enabledItems();
+    if (!enabledItems.length) {
+      return;
+    }
 
-    const path = e.composedPath();
-    if (!path.includes(this)) {
-      this.open = false;
+    if (this.activeIndex < 0) {
+      this.activeIndex = 0;
+    } else {
+      const count = enabledItems.length;
+      this.activeIndex = (this.activeIndex + offset + count) % count;
     }
+
+    this._syncRovingTabIndex();
+    enabledItems[this.activeIndex]?.focus();
   }
 
-  private _handleItemClick(e: Event) {
-    const target = e.target as HTMLElement;
-    // Check if the clicked element is a menu-item
-    if (target.tagName.toLowerCase() === 'menu-item') {
-      // Dispatch custom event with value
-      const value = (target as any).value;
-      this.dispatchEvent(
-        new CustomEvent('menu-selected', {
-          detail: { value },
-          bubbles: true,
-          composed: true,
-        }),
-      );
+  private _setBoundaryActive(index: number) {
+    const enabledItems = this._enabledItems();
+    if (!enabledItems.length) {
+      return;
+    }
 
-      this.open = false;
+    this.activeIndex = index;
+    this._syncRovingTabIndex();
+    enabledItems[this.activeIndex]?.focus();
+  }
+
+  private _getActiveItem() {
+    const enabledItems = this._enabledItems();
+    if (!enabledItems.length || this.activeIndex < 0) {
+      return null;
     }
+
+    return enabledItems[this.activeIndex] ?? null;
   }
 
-  private _toggleMenu(e: Event) {
-    e.stopPropagation(); // Prevent immediate closing via window listener
-    this.open = !this.open;
+  private _getFirstEnabledItem() {
+    return this._enabledItems()[0] ?? null;
   }
 
-  static styles = css`
-    :host {
-      display: inline-block;
-      position: relative;
+  private _onItemActivate = (event: Event) => {
+    const customEvent = event as CustomEvent<{ item: MenuItem }>;
+    const enabledItems = this._enabledItems();
+    const nextIndex = enabledItems.indexOf(customEvent.detail.item);
+    if (nextIndex >= 0) {
+      this.activeIndex = nextIndex;
+      this._syncRovingTabIndex();
     }
+  };
 
-    .trigger {
-      cursor: pointer;
-      display: inline-block;
+  private _onItemRequestClose = (event: Event) => {
+    const customEvent = event as CustomEvent<{
+      reason: 'click-selection' | 'keydown';
+      key?: string;
+    }>;
+
+    if (customEvent.defaultPrevented) {
+      return;
     }
 
-    .menu-wrapper {
-      position: absolute;
-      top: 100%;
-      z-index: 10;
-      opacity: 0;
-      transform: scale(0.95);
-      transform-origin: top left;
-      transition:
-        opacity 0.1s ease-out,
-        transform 0.1s ease-out;
-      pointer-events: none; /* Prevent clicking when hidden */
-      margin-top: 4px; /* Slight gap */
+    if (customEvent.detail.reason === 'click-selection') {
+      this.close({ kind: 'click-selection' });
+      return;
     }
 
-    :host([open]) .menu-wrapper {
-      opacity: 1;
-      transform: scale(1);
-      pointer-events: auto;
+    this.close({ kind: 'keydown', key: customEvent.detail.key ?? 'Enter' });
+  };
+
+  private _onKeyDown = (event: KeyboardEvent) => {
+    if (!this.open) {
+      return;
     }
 
-    /* Alignment logic */
-    :host([align='end']) .menu-wrapper {
-      right: 0;
-      transform-origin: top right;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this._setActiveByOffset(1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this._setActiveByOffset(-1);
+        break;
+      case 'Home':
+        event.preventDefault();
+        this._setBoundaryActive(0);
+        break;
+      case 'End': {
+        event.preventDefault();
+        const last = Math.max(this._enabledItems().length - 1, 0);
+        this._setBoundaryActive(last);
+        break;
+      }
+      case 'Escape':
+        event.preventDefault();
+        this.close({ kind: 'keydown', key: 'Escape' });
+        break;
+      default:
+        break;
     }
-    :host([align='start']) .menu-wrapper {
-      left: 0;
-      transform-origin: top left;
+  };
+
+  private _onWindowClick = (event: MouseEvent) => {
+    if (!this.open || this.stayOpenOnOutsideClick) {
+      return;
     }
-  `;
+
+    const path = event.composedPath();
+    const anchorEl = this._resolveAnchorElement();
+    const inMenuTree = path.some(
+      target => target === this || (target instanceof Node && this.contains(target)),
+    );
+
+    if (inMenuTree || (anchorEl && path.includes(anchorEl))) {
+      return;
+    }
+
+    this.close({ kind: 'outside-click' });
+  };
+
+  private _isWithinMenuTree(node: Node | null) {
+    if (!node) {
+      return false;
+    }
+
+    let current: Node | null = node;
+    while (current) {
+      if (current === this || this.contains(current)) {
+        return true;
+      }
+
+      const root = current.getRootNode();
+      if (root instanceof ShadowRoot) {
+        current = root.host;
+      } else {
+        current = null;
+      }
+    }
+
+    return false;
+  }
+
+  private _onFocusOut = (event: FocusEvent) => {
+    if (!this.open || this.stayOpenOnFocusout) {
+      return;
+    }
+
+    const next = event.relatedTarget;
+    if (!next) {
+      return;
+    }
+
+    if (next instanceof Node && this._isWithinMenuTree(next)) {
+      return;
+    }
+
+    this.close({ kind: 'focusout' });
+  };
+
+  private _onSlotChange = () => {
+    this._syncRovingTabIndex();
+  };
+
+  private _applyPositioning() {
+    if (!this.open || !this.menuListElement) {
+      return;
+    }
+
+    const anchorEl = this._resolveAnchorElement();
+    if (!anchorEl) {
+      return;
+    }
+
+    this._surfaceController.start({
+      reference: anchorEl,
+      floating: this.menuListElement,
+      placement: this.placement,
+      offset: this.offset,
+      strategy: 'fixed',
+    });
+  }
+
+  protected override updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('anchor') || changedProperties.has('open')) {
+      this._syncAnchorAria();
+    }
+
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        this._lastFocusedElement = document.activeElement as HTMLElement | null;
+        this._syncRovingTabIndex();
+        this.dispatchEvent(
+          new CustomEvent('opened', {
+            bubbles: true,
+            composed: true,
+          }),
+        );
+
+        this._applyPositioning();
+      } else {
+        this._surfaceController.stop();
+
+        const reason = this._closeReason;
+        this.dispatchEvent(
+          new CustomEvent('close-menu', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              reason,
+              itemPath: [],
+            },
+          }),
+        );
+        this.dispatchEvent(
+          new CustomEvent('closed', {
+            bubbles: true,
+            composed: true,
+            detail: { reason },
+          }),
+        );
+
+        if (!this.isSubmenu) {
+          this._lastFocusedElement?.focus();
+        }
+      }
+    }
+
+    if (
+      (changedProperties.has('open') ||
+        changedProperties.has('anchor') ||
+        changedProperties.has('placement') ||
+        changedProperties.has('offset')) &&
+      this.open
+    ) {
+      this._applyPositioning();
+    }
+  }
 
   render() {
-    return html`
-      <div class="trigger" @click="${this._toggleMenu}">
-        <slot name="trigger"></slot>
-      </div>
+    return html`<div
+      class=${classMap({
+        'menu': true,
+        open: this.open,
+        closed: !this.open,
+        [`variant-${this.variant}`]: true,
+      })}
+      aria-hidden=${String(!this.open)}
+    >
+      <div class="background"></div>
+      <wc-elevation class="elevation"></wc-elevation>
 
-      <div class="menu-wrapper">
-        <!-- We expect a menu-list to be passed here -->
-        <slot></slot>
+      <div class="menu-content">
+        <slot @slotchange=${this._onSlotChange}></slot>
       </div>
-    `;
+    </div>`;
   }
 }