@redvars/peacock 3.5.1 → 3.6.1

package/src/menu/menu/menu.ts

@@ -3,8 +3,8 @@ 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 { FloatingController } from '../../__controllers/floating-controller.js';
 import { MenuItem } from '../menu-item/menu-item.js';
-import { MenuSurfaceController } from './MenuSurfaceController.js';
 
 type CloseReason =
   | { kind: 'click-selection' }
@@ -60,7 +60,18 @@ export class Menu extends LitElement {
 
   anchorElement: HTMLElement | null = null;
 
-  private readonly _surfaceController = new MenuSurfaceController(this);
+  private readonly _floatingController = new FloatingController(this, {
+    trigger: 'manual',
+    closeOnClickOutside: false,
+    strategy: 'fixed',
+    onOpenChange: (isOpen) => {
+      if (isOpen || !this.open) {
+        return;
+      }
+
+      this.close({ kind: 'outside-click' });
+    },
+  });
 
   private _lastFocusedElement: HTMLElement | null = null;
 
@@ -72,22 +83,14 @@ export class Menu extends LitElement {
     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.addEventListener('click', this._onClick);
     this._syncAnchorAria();
   }
 
   disconnectedCallback() {
     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 });
+    this.removeEventListener('click', this._onClick);
+    this._floatingController.close();
     super.disconnectedCallback();
   }
 
@@ -170,7 +173,12 @@ export class Menu extends LitElement {
   }
 
   private _syncRovingTabIndex() {
+    const ownedItems = this.items;
     const enabledItems = this._enabledItems();
+    for (const item of ownedItems) {
+      item.tabIndex = -1;
+    }
+
     if (!enabledItems.length) {
       this.activeIndex = -1;
       return;
@@ -180,10 +188,7 @@ export class Menu extends LitElement {
       this.activeIndex = 0;
     }
 
-    for (let index = 0; index < enabledItems.length; index += 1) {
-      const currentItem = enabledItems[index];
-      currentItem.tabIndex = index === this.activeIndex ? 0 : -1;
-    }
+    enabledItems[this.activeIndex].tabIndex = 0;
   }
 
   private _setActiveByOffset(offset: 1 | -1) {
@@ -227,50 +232,66 @@ export class Menu extends LitElement {
     return this._enabledItems()[0] ?? null;
   }
 
-  private _ownsKeyboardEvent(event: KeyboardEvent) {
+  private _isEventFromThisMenu(event: Event) {
     const path = event.composedPath();
-    const ownedItems = this.items;
+    const sourceMenu = path.find(
+      target =>
+        target instanceof HTMLElement &&
+        target.tagName.toLowerCase() === 'wc-menu',
+    );
 
-    return path.some(target => target instanceof MenuItem && ownedItems.includes(target));
+    return sourceMenu === this;
   }
 
-  private _onItemActivate = (event: Event) => {
-    const customEvent = event as CustomEvent<{ item: MenuItem }>;
-    const { item } = customEvent.detail;
+  private _ownedItemFromEvent(event: Event) {
+    if (!this._isEventFromThisMenu(event)) {
+      return null;
+    }
+
+    const path = event.composedPath();
     const ownedItems = this.items;
-    if (!ownedItems.includes(item)) {
-      return;
+
+    for (const target of path) {
+      if (target instanceof HTMLElement) {
+        if (target.tagName.toLowerCase() === 'wc-menu-item') {
+          const ownedItem = ownedItems.find(item => item === target);
+          if (ownedItem) {
+            return ownedItem;
+          }
+        }
+      }
     }
 
+    return null;
+  }
+
+  private _setActiveItem(item: MenuItem) {
     const enabledItems = this._enabledItems();
     const nextIndex = enabledItems.indexOf(item);
-    if (nextIndex >= 0) {
-      this.activeIndex = nextIndex;
-      this._syncRovingTabIndex();
+    if (nextIndex < 0) {
+      return;
     }
-  };
 
-  private _onItemRequestClose = (event: Event) => {
-    const customEvent = event as CustomEvent<{
-      item: MenuItem;
-      reason: 'click-selection' | 'keydown';
-      key?: string;
-    }>;
+    this.activeIndex = nextIndex;
+    this._syncRovingTabIndex();
+  }
 
-    if (!this.items.includes(customEvent.detail.item)) {
+  private _onClick = (event: Event) => {
+    if (!this.open) {
       return;
     }
 
-    if (customEvent.defaultPrevented) {
+    const item = this._ownedItemFromEvent(event);
+    if (!item) {
       return;
     }
 
-    if (customEvent.detail.reason === 'click-selection') {
-      this.close({ kind: 'click-selection' });
+    this._setActiveItem(item);
+    if (item.keepOpen) {
       return;
     }
 
-    this.close({ kind: 'keydown', key: customEvent.detail.key ?? 'Enter' });
+    this.close({ kind: 'click-selection' });
   };
 
   private _onKeyDown = (event: KeyboardEvent) => {
@@ -278,10 +299,15 @@ export class Menu extends LitElement {
       return;
     }
 
-    if (!this._ownsKeyboardEvent(event)) {
+    if (!this._isEventFromThisMenu(event)) {
       return;
     }
 
+    const eventItem = this._ownedItemFromEvent(event);
+    if (eventItem) {
+      this._setActiveItem(eventItem);
+    }
+
     switch (event.key) {
       case 'ArrowDown':
         event.preventDefault();
@@ -305,67 +331,27 @@ export class Menu extends LitElement {
         event.preventDefault();
         this.close({ kind: 'keydown', key: 'Escape' });
         break;
-      default:
+      case 'Tab':
+        this.close({ kind: 'keydown', key: 'Tab' });
         break;
-    }
-  };
-
-  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;
-      }
+      case 'Enter':
+      case ' ': {
+        event.preventDefault();
+        const activeItem = this._getActiveItem() ?? this._getFirstEnabledItem();
+        if (!activeItem) {
+          return;
+        }
 
-      const root = current.getRootNode();
-      if (root instanceof ShadowRoot) {
-        current = root.host;
-      } else {
-        current = null;
+        this._setActiveItem(activeItem);
+        activeItem.click();
+        break;
       }
+      default:
+        break;
     }
+  };
 
-    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();
@@ -381,13 +367,14 @@ export class Menu extends LitElement {
       return;
     }
 
-    this._surfaceController.start({
-      reference: anchorEl,
-      floating: this.menuListElement,
+    this._floatingController.setOptions({
       placement: this.placement,
       offset: this.offset,
       strategy: 'fixed',
+      closeOnClickOutside: !this.stayOpenOnOutsideClick,
     });
+    this._floatingController.setElements(anchorEl, this.menuListElement);
+    this._floatingController.open();
   }
 
   protected override updated(changedProperties: Map<string, unknown>) {
@@ -408,7 +395,7 @@ export class Menu extends LitElement {
 
         this._applyPositioning();
       } else {
-        this._surfaceController.stop();
+        this._floatingController.close();
 
         const reason = this._closeReason;
         this.dispatchEvent(
@@ -429,7 +416,10 @@ export class Menu extends LitElement {
           }),
         );
 
-        if (!this.isSubmenu) {
+        const shouldRestoreFocus =
+          reason.kind !== 'keydown' || reason.key !== 'Tab';
+
+        if (!this.isSubmenu && shouldRestoreFocus) {
           this._lastFocusedElement?.focus();
         }
       }

package/src/menu/menu-item/menu-item.scss

@@ -92,6 +92,10 @@
     --_container-state-opacity: 0.08;
   }
 
+   &.pressed:not(:where(.disabled)) {
+    --_container-state-opacity: 0.12;
+  }
+
   &.selected {
     --_container-color: var(--menu-item-container-selected-color);
     --_label-text-color: var(--menu-item-label-selected-color);

package/src/menu/menu-item/menu-item.ts

@@ -1,8 +1,11 @@
 import { html, LitElement, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './menu-item.scss';
 import colorStyles from './menu-item-colors.scss';
+import BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
+import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
+import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-event-utils.js';
 
 /**
  * @label Menu Item
@@ -17,9 +20,8 @@ import colorStyles from './menu-item-colors.scss';
  * <wc-menu-item>Menu Item</wc-menu-item>
  * ```
  */
-export class MenuItem extends LitElement {
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
+export class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
+  
   @property({ type: String }) value = '';
 
   @property({ type: Boolean, reflect: true }) selected = false;
@@ -30,21 +32,19 @@ export class MenuItem extends LitElement {
 
   @property({ type: Boolean, attribute: 'submenu-open' }) submenuOpen = false;
 
-  /*
-   * Hyperlink to navigate to on click.
-   */
-  @property({ reflect: true }) href?: string;
-
-  /**
-   * Sets or retrieves the window or frame at which to target content.
-   */
-  @property() target: string = '_self';
-
   @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
     'standard';
 
   static styles = [styles, colorStyles];
 
+  @query('#item') readonly itemElement!: HTMLElement | null;
+
+  /**
+     * States
+     */
+    @state()
+    isPressed = false;
+
   connectedCallback() {
     // eslint-disable-next-line wc/guard-super-call
     super.connectedCallback();
@@ -52,91 +52,80 @@ export class MenuItem extends LitElement {
       this.setAttribute('role', 'menuitem');
     }
 
-    if (!this.hasAttribute('tabindex')) {
-      this.tabIndex = -1;
-    }
-
-    this.addEventListener('click', this._handleClick);
-    this.addEventListener('keydown', this._handleKeyDown);
+    this.addEventListener('click', this.__dispatchClickWithThrottle);
+    window.addEventListener('mouseup', this.__handlePress);
   }
 
   disconnectedCallback() {
-    this.removeEventListener('click', this._handleClick);
-    this.removeEventListener('keydown', this._handleKeyDown);
+    window.removeEventListener('mouseup', this.__handlePress);
+    this.removeEventListener('click', this.__dispatchClickWithThrottle);
     super.disconnectedCallback();
   }
 
-  private emitActivate(source: 'click' | 'keydown', key?: string) {
-    this.dispatchEvent(
-      new CustomEvent('menu-item-activate', {
-        bubbles: true,
-        composed: true,
-        detail: { item: this, source, key },
-      }),
-    );
+  override focus() {
+    this.itemElement?.focus();
   }
 
-  private requestClose(source: 'click' | 'keydown', key?: string) {
-    this.dispatchEvent(
-      new CustomEvent('menu-item-request-close', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          item: this,
-          source,
-          key,
-          reason: source === 'click' ? 'click-selection' : 'keydown',
-        },
-      }),
-    );
+  override blur() {
+    this.itemElement?.blur();
   }
 
-  private requestSubmenuKey(key: string) {
-    this.dispatchEvent(
-      new CustomEvent('menu-item-submenu-keydown', {
-        bubbles: true,
-        composed: true,
-        detail: { item: this, key },
-      }),
-    );
-  }
-
-  private _handleKeyDown(e: KeyboardEvent) {
-    if (this.disabled) {
-      e.preventDefault();
+  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
+      event => {
+        this.__dispatchClick(event);
+      };
+  
+  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
+    // If the button is soft-disabled or a disabled link, we need to explicitly
+    // prevent the click from propagating to other event listeners as well as
+    // prevent the default action.
+    if (this.softDisabled || (this.disabled && this.href)) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
       return;
     }
 
-    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-      this.requestSubmenuKey(e.key);
+    if (!isActivationClick(event) || !this.itemElement) {
       return;
     }
 
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      this.emitActivate('keydown', e.key);
-      if (!this.keepOpen) {
-        this.requestClose('keydown', e.key);
-      }
-    }
-  }
+    this.focus();
+    dispatchActivationClick(this.itemElement);
+  };
+
+  __handleKeyDown = (event: KeyboardEvent) => {
+    this.__handlePress(event);
 
-  private _handleClick(e: MouseEvent) {
-    if (this.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
+    if (this.disabled || this.softDisabled || !this.itemElement) {
       return;
     }
 
-    this.emitActivate('click');
-    if (!this.keepOpen) {
-      this.requestClose('click');
+    if (event.key === ' ') {
+      event.preventDefault();
+      this.itemElement.click();
+      return;
     }
-  }
 
-  __isLink() {
-    return !!this.href;
-  }
+    if (event.key === 'Enter' && !this.__isLink()) {
+      event.preventDefault();
+      this.itemElement.click();
+    }
+  };
+
+   __handlePress = (event: KeyboardEvent | MouseEvent) => {
+    if (this.disabled || this.softDisabled) return;
+    if (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      (event.key === 'Enter' || event.key === ' ')
+    ) {
+      this.isPressed = true;
+    } else if (event.type === 'mousedown') {
+      this.isPressed = true;
+    } else {
+      this.isPressed = false;
+    }
+  };
 
   render() {
     const isLink = this.__isLink();
@@ -145,6 +134,7 @@ export class MenuItem extends LitElement {
       'menu-item': true,
       disabled: this.disabled,
       selected: this.selected,
+      pressed: this.isPressed,
     };
 
     const controls = this.getAttribute('aria-controls');
@@ -155,6 +145,13 @@ export class MenuItem extends LitElement {
         class=${classMap(cssClasses)}
         href=${this.href}
         target=${this.target}
+        tabindex=${this.disabled ? '-1' : '0'}
+
+        @click=${this.__dispatchClickWithThrottle}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handleKeyDown}
+        @keyup=${this.__handlePress}
+
         aria-disabled=${String(this.disabled)}
         aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}
         aria-controls=${this.hasSubmenu && controls ? controls : nothing}
@@ -167,6 +164,13 @@ export class MenuItem extends LitElement {
     return html`<div
       id="item"
       class=${classMap(cssClasses)}
+      tabindex=${this.disabled ? '-1' : '0'}
+
+      @click=${this.__dispatchClick}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handleKeyDown}
+      @keyup=${this.__handlePress}
+
       aria-disabled=${String(this.disabled)}
       aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}
       aria-controls=${this.hasSubmenu && controls ? controls : nothing}
@@ -182,7 +186,7 @@ export class MenuItem extends LitElement {
       <div class="background"></div>
       <wc-ripple class="ripple"></wc-ripple>
 
-      <div class="menu-item-content">
+      <div class="menu-item-content" data-variant=${this.variant}>
         <slot name="leading-icon"></slot>
         <div class="slot-container">
           <slot></slot>

package/src/modal/index.ts

@@ -0,0 +1 @@
+export { Modal } from './modal.js';