@redvars/peacock 3.5.0 → 3.6.0

package/src/popover/popover.ts

@@ -0,0 +1,170 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import type { Placement } from '@floating-ui/dom';
+import IndividualComponent from '@/IndividualComponent.js';
+import { FloatingController } from '../__controllers/floating-controller.js';
+import styles from './popover.scss';
+import type { PopoverContent } from './popover-content.js';
+
+/**
+ * @label Popover
+ * @tag wc-popover
+ * @rawTag popover
+ * @summary Displays additional information in a floating panel anchored to a trigger element.
+ * @overview
+ * <p>The Popover component wraps a trigger element and a <code>wc-popover-content</code> child. It uses
+ * floating-ui to compute position, keeping the panel visible inside the viewport even on scroll.</p>
+ * @tags display
+ *
+ * @fires {CustomEvent} wc-popover--open - Fired when the popover opens.
+ * @fires {CustomEvent} wc-popover--close - Fired when the popover closes.
+ *
+ * @example
+ * ```html
+ * <wc-popover trigger="click">
+ *   <wc-button>Open popover</wc-button>
+ *   <wc-popover-content>
+ *     <p>Popover body text goes here.</p>
+ *   </wc-popover-content>
+ * </wc-popover>
+ * ```
+ */
+@IndividualComponent
+export class Popover extends LitElement {
+  static styles = [styles];
+
+  /**
+   * Determines how the popover is triggered.
+   * Possible values are `"click"`, `"hover"`, `"manual"`.
+   */
+  @property({ reflect: true }) trigger: 'click' | 'hover' | 'manual' = 'click';
+
+  /**
+   * Preferred placement of the popover relative to the trigger element.
+   * Accepts any floating-ui `Placement` string such as `"bottom"`, `"top-start"`, `"right"`, etc.
+   */
+  @property({ reflect: true }) placement: Placement = 'bottom';
+
+  /**
+   * Whether the popover is open.
+   */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /**
+   * Distance in pixels between the trigger element and the popover panel.
+   */
+  @property({ type: Number }) offset = 8;
+
+  private _floating: FloatingController | null = null;
+
+  private _contentEl: PopoverContent | null = null;
+
+  private _triggerEl: HTMLElement | null = null;
+
+  private _setupFloating() {
+    // Tear down any existing controller
+    if (this._floating) {
+      this._floating = null;
+    }
+
+    // Resolve the content element
+    this._contentEl = this.querySelector<PopoverContent>('wc-popover-content');
+
+    // Resolve the trigger element: first light-DOM child that is NOT wc-popover-content
+    this._triggerEl =
+      (Array.from(this.children).find(
+        (c) => c.tagName.toLowerCase() !== 'wc-popover-content',
+      ) as HTMLElement) ?? null;
+
+    if (!this._triggerEl || !this._contentEl) return;
+
+    const triggerMode =
+      this.trigger === 'manual'
+        ? 'manual'
+        : (this.trigger as 'click' | 'hover');
+
+    this._floating = new FloatingController(this, {
+      placement: this.placement,
+      strategy: 'fixed',
+      offset: this.offset,
+      trigger: triggerMode,
+      closeOnClickOutside: true,
+      onOpenChange: (isOpen) => {
+        this.open = isOpen;
+        if (this._contentEl) {
+          this._contentEl.open = isOpen;
+        }
+        this.dispatchEvent(
+          new CustomEvent(isOpen ? 'wc-popover--open' : 'wc-popover--close', {
+            bubbles: true,
+            composed: true,
+          }),
+        );
+      },
+    });
+
+    this._floating.setElements(
+      this._triggerEl,
+      this._contentEl as unknown as HTMLElement,
+    );
+
+    if (this.open) {
+      this._floating.open();
+      this._contentEl.open = true;
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  firstUpdated() {
+    this._setupFloating();
+  }
+
+  updated(changedProps: Map<string, unknown>) {
+    if (
+      changedProps.has('trigger') ||
+      changedProps.has('placement') ||
+      changedProps.has('offset')
+    ) {
+      this._setupFloating();
+    }
+
+    if (changedProps.has('open') && this._floating) {
+      if (this.open && !this._floating.isOpen) {
+        this._floating.open();
+        if (this._contentEl) this._contentEl.open = true;
+      } else if (!this.open && this._floating.isOpen) {
+        this._floating.close();
+        if (this._contentEl) this._contentEl.open = false;
+      }
+    }
+  }
+
+  /**
+   * Programmatically opens the popover.
+   */
+  show() {
+    if (this._floating && !this._floating.isOpen) {
+      this._floating.open();
+    } else if (!this._floating) {
+      this.open = true;
+    }
+  }
+
+  /**
+   * Programmatically closes the popover.
+   */
+  hide() {
+    if (this._floating && this._floating.isOpen) {
+      this._floating.close();
+    } else if (!this._floating) {
+      this.open = false;
+    }
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/search/search.ts

@@ -110,6 +110,8 @@ export class Search extends LitElement {
   private __handleInput(event: InputEvent) {
     const input = event.target as HTMLInputElement;
     this.value = input.value;
+    // Prevent the native input event from escaping in addition to our API event.
+    event.stopPropagation();
     this.dispatchEvent(
       new CustomEvent('input', {
         detail: { value: this.value },
@@ -122,6 +124,8 @@ export class Search extends LitElement {
   private __handleChange(event: Event) {
     const input = event.target as HTMLInputElement;
     this.value = input.value;
+    // Prevent the native change event from escaping in addition to our API event.
+    event.stopPropagation();
     this.dispatchEvent(
       new CustomEvent('change', {
         detail: { value: this.value },

package/src/sidebar-menu/demo/index.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
+  <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
+  <style>
+    body {
+      background: #fafafa;
+      padding: 2rem;
+      font-family: 'Noto Sans', sans-serif;
+    }
+    h2 {
+      margin-top: 2rem;
+      margin-bottom: 0.5rem;
+    }
+  </style>
+</head>
+<body>
+
+<h2>Basic Sidebar Menu</h2>
+<wc-sidebar-menu>
+  <wc-sidebar-sub-menu label="Documents" icon="folder" expanded>
+    <wc-sidebar-sub-menu label="Work" icon="folder" expanded>
+      <wc-sidebar-menu-item label="Project A" icon="description"></wc-sidebar-menu-item>
+      <wc-sidebar-menu-item label="Project B" icon="description"></wc-sidebar-menu-item>
+    </wc-sidebar-sub-menu>
+    <wc-sidebar-menu-item label="Personal" icon="folder"></wc-sidebar-menu-item>
+  </wc-sidebar-sub-menu>
+  <wc-sidebar-sub-menu label="Pictures" icon="image" expanded>
+    <wc-sidebar-menu-item label="Vacation 2024" icon="image"></wc-sidebar-menu-item>
+    <wc-sidebar-menu-item label="Family" icon="image"></wc-sidebar-menu-item>
+  </wc-sidebar-sub-menu>
+</wc-sidebar-menu>
+
+<h2>Sidebar Menu without icons</h2>
+<wc-sidebar-menu>
+  <wc-sidebar-sub-menu label="Category 1" expanded>
+    <wc-sidebar-menu-item label="Subcategory 1.1"></wc-sidebar-menu-item>
+    <wc-sidebar-menu-item label="Subcategory 1.2"></wc-sidebar-menu-item>
+  </wc-sidebar-sub-menu>
+  <wc-sidebar-menu-item label="Category 2"></wc-sidebar-menu-item>
+</wc-sidebar-menu>
+
+<h2>Disabled items</h2>
+<wc-sidebar-menu>
+  <wc-sidebar-sub-menu label="Enabled" expanded>
+    <wc-sidebar-menu-item label="Child 1"></wc-sidebar-menu-item>
+    <wc-sidebar-menu-item label="Child 2" disabled></wc-sidebar-menu-item>
+  </wc-sidebar-sub-menu>
+  <wc-sidebar-menu-item label="Disabled" disabled></wc-sidebar-menu-item>
+</wc-sidebar-menu>
+
+<script type='module'>
+  import '/dist/index.es2017.js';
+
+  const menu = document.querySelector('wc-sidebar-menu');
+  if (menu) {
+    menu.addEventListener('sidebar-menu:change', (e) => {
+      console.log('Selected item:', e.detail);
+    });
+  }
+</script>
+
+</body>
+</html>

package/src/sidebar-menu/index.ts

@@ -0,0 +1,3 @@
+export { SidebarMenuItem } from './sidebar-menu-item.js';
+export { SidebarSubMenu } from './sidebar-sub-menu.js';
+export { SidebarMenu } from './sidebar-menu.js';

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

@@ -0,0 +1,102 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+
+  // M3 sidebar menu item sizing
+  --sidebar-menu-item-height: 3rem;
+  --sidebar-menu-item-icon-size: 1.25rem;
+  --sidebar-menu-item-border-radius: var(--global-shape-corner-full, 9999px);
+
+  // M3 color tokens
+  --sidebar-menu-item-label-color: var(--color-on-surface);
+  --sidebar-menu-item-icon-color: var(--color-on-surface-variant);
+  --sidebar-menu-item-selected-background: var(--color-secondary-container);
+  --sidebar-menu-item-selected-color: var(--color-on-secondary-container);
+  --sidebar-menu-item-focus-ring-color: var(--color-primary);
+
+  // M3 animation timing
+  --sidebar-menu-item-transition-duration: 200ms;
+  --sidebar-menu-item-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar-menu-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: var(--sidebar-menu-item-height);
+  border-radius: var(--sidebar-menu-item-border-radius);
+  color: var(--_label-color);
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  outline: none;
+
+  --_container-color: transparent;
+  --_container-opacity: 1;
+  --_label-color: var(--sidebar-menu-item-label-color);
+
+  @include mixin.get-typography(label-large);
+
+  &.selected {
+    --_container-color: var(--sidebar-menu-item-selected-background);
+    --_label-color: var(--sidebar-menu-item-selected-color);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+.sidebar-menu-item-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1;
+  min-height: var(--sidebar-menu-item-height);
+  padding-inline: 0.75rem;
+  color: inherit;
+  z-index: 1;
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.focus-ring {
+  z-index: 2;
+  --focus-ring-color: var(--sidebar-menu-item-focus-ring-color);
+  --focus-ring-container-shape-start-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-start-end: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-end: var(--sidebar-menu-item-border-radius);
+}
+
+.ripple {
+  --ripple-pressed-color: var(--color-on-surface);
+  border-radius: inherit;
+}
+
+.sidebar-menu-item.selected .ripple {
+  --ripple-pressed-color: var(--sidebar-menu-item-selected-color);
+}
+
+.sidebar-menu-item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+

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

@@ -0,0 +1,151 @@
+import { html, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './sidebar-menu-item.scss';
+
+/**
+ * @label Sidebar Menu Item
+ * @tag wc-sidebar-menu-item
+ * @rawTag sidebar-menu-item
+ * @parentRawTag sidebar-menu
+ * @summary A sidebar menu item represents a selectable leaf item in the sidebar navigation tree.
+ *
+ * @example
+ * ```html
+ * <wc-sidebar-menu>
+ *   <wc-sidebar-sub-menu label="Parent" expanded>
+ *     <wc-sidebar-menu-item label="Child"></wc-sidebar-menu-item>
+ *   </wc-sidebar-sub-menu>
+ * </wc-sidebar-menu>
+ * ```
+ * @tags navigation
+ */
+export class SidebarMenuItem extends LitElement {
+  static styles = [styles];
+
+  /**
+   * The value used to identify this item when selected.
+   */
+  @property({ type: String, reflect: true })
+  value: string = '';
+
+  /**
+   * The display label for this item.
+   */
+  @property({ type: String, reflect: true })
+  label: string = '';
+
+  /**
+   * Optional icon name to display before the label.
+   */
+  @property({ type: String, reflect: true })
+  icon: string = '';
+
+  /**
+   * Optional hyperlink to navigate to on click.
+   */
+  @property({ type: String, reflect: true })
+  href: string = '';
+
+  /**
+   * Sets or retrieves the window or frame at which to target content.
+   */
+  @property({ type: String, reflect: true })
+  target: string = '_self';
+
+  /**
+   * If true, the user cannot interact with the item.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false;
+
+  /**
+   * Whether the item is currently selected.
+   */
+  @property({ type: Boolean, reflect: true })
+  selected: boolean = false;
+
+  /**
+   * The nesting depth level (set automatically by the parent sidebar-menu).
+   */
+  @property({ type: Number, reflect: true })
+  level: number = 0;
+
+  @query('.sidebar-menu-item-content')
+  private readonly _nativeElement!: HTMLElement | null;
+
+  override focus() {
+    this._nativeElement?.focus();
+  }
+
+  override blur() {
+    this._nativeElement?.blur();
+  }
+
+  private _onClick = () => {
+    if (this.disabled) return;
+
+    this.dispatchEvent(
+      new CustomEvent('sidebar-menu-item:click', {
+        bubbles: true,
+        composed: true,
+        detail: { value: this.value, label: this.label },
+      }),
+    );
+  };
+
+  override render() {
+    const classes = classMap({
+      'sidebar-menu-item': true,
+      disabled: this.disabled,
+      selected: this.selected,
+    });
+
+    const content = html`
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+      <div class="background"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+      <div class="sidebar-menu-item-content">
+        ${this.icon ? html`<wc-icon name="${this.icon}"></wc-icon>` : ''}
+        <span class="sidebar-menu-item-label">${this.label}</span>
+      </div>
+    `;
+
+    if (this.href) {
+      return html`
+        <a
+          id="item"
+          href="${this.href}"
+          target="${this.target}"
+          class="${classes}"
+          aria-disabled="${this.disabled}"
+          tabindex="${this.disabled ? -1 : 0}"
+          @click="${this._onClick}"
+        >
+          ${content}
+        </a>
+      `;
+    }
+
+    return html`
+      <div
+        id="item"
+        class="${classes}"
+        role="treeitem"
+        aria-label="${this.label}"
+        aria-selected="${String(this.selected)}"
+        aria-disabled="${this.disabled}"
+        tabindex="${this.disabled ? -1 : 0}"
+        @click="${this._onClick}"
+        @keydown="${(e: KeyboardEvent) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this._onClick();
+          }
+        }}"
+      >
+        ${content}
+      </div>
+    `;
+  }
+}

package/src/{tree-view/tree-view.scss → sidebar-menu/sidebar-menu.scss}

@@ -6,7 +6,7 @@
   display: block;
 }
 
-.tree-view {
+.sidebar-menu {
   display: block;
   padding: var(--spacing-100, 0.5rem) 0;
 }

package/src/sidebar-menu/sidebar-menu.ts

@@ -0,0 +1,182 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './sidebar-menu.scss';
+import { SidebarMenuItem } from './sidebar-menu-item.js';
+import { SidebarSubMenu } from './sidebar-sub-menu.js';
+
+type SidebarNode = SidebarMenuItem | SidebarSubMenu;
+
+/**
+ * @label Sidebar Menu
+ * @tag wc-sidebar-menu
+ * @rawTag sidebar-menu
+ * @summary A sidebar menu is a hierarchical structure that provides nested levels of navigation. It supports keyboard navigation, single/multi select, and expandable items.
+ *
+ * @example
+ * ```html
+ * <wc-sidebar-menu>
+ *   <wc-sidebar-sub-menu label="Parent" expanded>
+ *     <wc-sidebar-menu-item label="Child 1"></wc-sidebar-menu-item>
+ *     <wc-sidebar-menu-item label="Child 2"></wc-sidebar-menu-item>
+ *   </wc-sidebar-sub-menu>
+ * </wc-sidebar-menu>
+ * ```
+ * @tags navigation
+ */
+export class SidebarMenu extends LitElement {
+  static styles = [styles];
+
+  /**
+   * The value of the currently selected item.
+   */
+  @property({ type: String, attribute: 'selected-item', reflect: true })
+  selectedItem: string = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('sidebar-menu-item:click', this._onItemClick as EventListener);
+    this.addEventListener('keydown', this._onKeyDown);
+    this.setAttribute('role', 'tree');
+  }
+
+  updated(changedProps: Map<string, unknown>) {
+    super.updated(changedProps);
+
+    if (changedProps.has('selectedItem')) {
+      this._syncSelectedStateFromProperty();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('sidebar-menu-item:click', this._onItemClick as EventListener);
+    this.removeEventListener('keydown', this._onKeyDown);
+  }
+
+  private _isSidebarNode(element: Element): element is SidebarNode {
+    const tag = element.tagName.toLowerCase();
+    return tag === 'wc-sidebar-menu-item' || tag === 'wc-sidebar-sub-menu';
+  }
+
+  private _getTopLevelItems(): SidebarNode[] {
+    return Array.from(this.children).filter(
+      el => this._isSidebarNode(el),
+    ) as SidebarNode[];
+  }
+
+  private _getChildNodes(item: SidebarSubMenu): SidebarNode[] {
+    return Array.from(item.children).filter(
+      child => this._isSidebarNode(child),
+    ) as SidebarNode[];
+  }
+
+  private _getAllVisibleItems(): SidebarNode[] {
+    const result: SidebarNode[] = [];
+    const collect = (items: SidebarNode[]) => {
+      items.forEach(item => {
+        result.push(item);
+        if (item instanceof SidebarSubMenu && item.expanded) {
+          collect(this._getChildNodes(item));
+        }
+      });
+    };
+    collect(this._getTopLevelItems());
+    return result;
+  }
+
+  private _onItemClick = (event: CustomEvent) => {
+    const item = event.target as SidebarNode;
+    if (item.disabled) return;
+
+    const value = event.detail?.value ?? item.value ?? item.label;
+    this.selectedItem = value;
+
+    // Update selected state on all items
+    this._updateSelectedState(value);
+
+    this.dispatchEvent(
+      new CustomEvent('sidebar-menu:change', {
+        bubbles: true,
+        composed: true,
+        detail: { value, item },
+      }),
+    );
+  };
+
+  private _updateSelectedState(selectedValue: string) {
+    const allItems = this._collectAllItems(this._getTopLevelItems());
+    allItems.forEach(item => {
+      const itemValue = item.value || item.label;
+      // eslint-disable-next-line no-param-reassign
+      item.selected = itemValue === selectedValue;
+    });
+  }
+
+  private _collectAllItems(items: SidebarNode[]): SidebarNode[] {
+    const result: SidebarNode[] = [];
+    items.forEach(item => {
+      result.push(item);
+      if (item instanceof SidebarSubMenu) {
+        result.push(...this._collectAllItems(this._getChildNodes(item)));
+      }
+    });
+    return result;
+  }
+
+  private _syncSelectedStateFromProperty() {
+    const allItems = this._collectAllItems(this._getTopLevelItems());
+    allItems.forEach(item => {
+      const itemValue = item.value || item.label;
+      item.selected = itemValue === this.selectedItem;
+    });
+  }
+
+  private _onKeyDown = (event: KeyboardEvent) => {
+    const allVisible = this._getAllVisibleItems();
+    const currentElement = event.composedPath().find(
+      target => target instanceof SidebarMenuItem || target instanceof SidebarSubMenu,
+    ) as SidebarNode | undefined;
+
+    if (!currentElement) {
+      return;
+    }
+
+    if (!allVisible.includes(currentElement)) {
+      return;
+    }
+
+    const currentIndex = allVisible.indexOf(currentElement);
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      const nextIndex = (currentIndex + 1) % allVisible.length;
+      allVisible[nextIndex].focus();
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      const prevIndex = currentIndex === 0 ? allVisible.length - 1 : currentIndex - 1;
+      allVisible[prevIndex].focus();
+    } else if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      currentElement.click();
+    } else if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      if (currentElement instanceof SidebarSubMenu && !currentElement.expanded) {
+        currentElement.expanded = true;
+      } else if (currentElement instanceof SidebarSubMenu) {
+        const children = this._getChildNodes(currentElement);
+        if (children.length > 0) {
+          children[0].focus();
+        }
+      }
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      if (currentElement instanceof SidebarSubMenu && currentElement.expanded) {
+        currentElement.expanded = false;
+      }
+    }
+  };
+
+  override render() {
+    return html` <div class="sidebar-menu"><slot></slot></div> `;
+  }
+}