@redvars/peacock 3.9.0 → 3.9.1

package/src/loader.ts

@@ -389,15 +389,8 @@ const loaderConfig: LoaderConfig = {
     'wc-calendar-month-view': {
       importPath: `${distDirectory}/calendar-month-view.js`,
     },
-    'wc-canvas': {
-      importPath: `${distDirectory}/canvas.js`,
-    },
-    'wc-flow-designer': {
-      importPath: `${distDirectory}/flow-designer.js`,
-      dependencies: ['wc-flow-designer-node'],
-    },
-    'wc-flow-designer-node': {
-      importPath: `${distDirectory}/flow-designer-node.js`,
+    'wc-flow': {
+      importPath: `${distDirectory}/flow.js`,
     },
     'wc-chart-doughnut': {
       importPath: `${distDirectory}/chart-doughnut.js`,

package/src/menu/menu/copy-component-files.mjs

@@ -0,0 +1,47 @@
+import fs from 'fs';
+import path from 'path';
+
+const sourceDir = '../components/dist';
+const destDir = './public/assets/peacock';
+
+/**
+ * Clears the destination directory
+ */
+function clearDirectory(directory) {
+  if (fs.existsSync(directory)) {
+    // recursive: true deletes subdirectories
+    // force: true ignores errors if the path doesn't exist
+    fs.rmSync(directory, { recursive: true, force: true });
+    console.log(`Cleared directory: ${directory}`);
+  }
+}
+
+function copyFolderRecursiveSync(source, destination) {
+  if (!fs.existsSync(destination)) {
+    fs.mkdirSync(destination, { recursive: true });
+  }
+
+  const files = fs.readdirSync(source);
+
+  files.forEach(file => {
+    const srcPath = path.join(source, file);
+    const destPath = path.join(destination, file);
+    const stat = fs.statSync(srcPath);
+
+    if (stat.isDirectory()) {
+      copyFolderRecursiveSync(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  });
+
+  console.log(`Copied: ${source} -> ${destination}`);
+}
+
+// --- Execution ---
+
+// 1. Clean the destination
+clearDirectory(destDir);
+
+// 2. Perform the copy
+copyFolderRecursiveSync(sourceDir, destDir);

package/src/menu/menu/menu.scss

@@ -53,18 +53,66 @@
     z-index: 1;
     width: 100%;
 
-    ::slotted(:first-child) {
-      --menu-item-container-shape-start-start: var(--shape-corner-medium);
-      --menu-item-container-shape-start-end: var(--shape-corner-medium);
+    ::slotted([data-position-after-divider]) {
+      --menu-item-backdrop-container-shape-start-start: var(
+        --shape-corner-small
+      );
+      --menu-item-backdrop-container-shape-start-end: var(--shape-corner-small);
+      --sub-menu-item-backdrop-container-shape-start-start: var(
+        --shape-corner-small
+      );
+      --sub-menu-item-backdrop-container-shape-start-end: var(
+        --shape-corner-small
+      );
+
+      --menu-item-backdrop-elevation-level-block-start: 1;
     }
-    ::slotted(:last-child) {
-      --menu-item-container-shape-end-start: var(--shape-corner-medium);
-      --menu-item-container-shape-end-end: var(--shape-corner-medium);
+
+    ::slotted([data-position-first]) {
+      --menu-item-backdrop-container-shape-start-start: var(
+        --shape-corner-large
+      );
+      --menu-item-backdrop-container-shape-start-end: var(--shape-corner-large);
+      --sub-menu-item-backdrop-container-shape-start-start: var(
+        --shape-corner-large
+      );
+      --sub-menu-item-backdrop-container-shape-start-end: var(
+        --shape-corner-large
+      );
+
+      --menu-item-backdrop-elevation-level-block-start: 1;
+    }
+
+    ::slotted([data-position-before-divider]) {
+      --menu-item-backdrop-elevation-level-block-end: 1;
+      --menu-item-backdrop-container-shape-end-start: var(--shape-corner-small);
+
+      --menu-item-backdrop-container-shape-end-end: var(--shape-corner-small);
+      --sub-menu-item-backdrop-container-shape-end-start: var(
+        --shape-corner-small
+      );
+      --sub-menu-item-backdrop-container-shape-end-end: var(
+        --shape-corner-small
+      );
+    }
+
+    ::slotted([data-position-last]) {
+      --menu-item-backdrop-elevation-level-block-end: 1;
+      --menu-item-backdrop-container-shape-end-start: var(--shape-corner-large);
+
+      --menu-item-backdrop-container-shape-end-end: var(--shape-corner-large);
+      --sub-menu-item-backdrop-container-shape-end-start: var(
+        --shape-corner-large
+      );
+      --sub-menu-item-backdrop-container-shape-end-end: var(
+        --shape-corner-large
+      );
     }
 
     ::slotted(wc-divider) {
-      --divider-spacing: var(--spacing-100);
+      --divider-spacing: 1px;
       padding-inline: var(--spacing-050);
+      --divider-color: transparent;
     }
   }
 
@@ -73,8 +121,6 @@
     position: absolute;
     inset: 0;
 
-    border: 1px solid var(--color-red);
-
     border-start-start-radius: var(--_container-shape-start-start);
     border-start-end-radius: var(--_container-shape-start-end);
     border-end-start-radius: var(--_container-shape-end-start);
@@ -95,12 +141,4 @@
   --_container-shape-start-end: var(--shape-corner-large);
   --_container-shape-end-start: var(--shape-corner-large);
   --_container-shape-end-end: var(--shape-corner-large);
-
-  &.variant-standard {
-    --menu-item-container-color: var(--color-surface-container);
-  }
-
-  &.variant-vibrant {
-    --menu-item-container-color: var(--color-tertiary-container);
-  }
 }

package/src/menu/menu/menu.ts

@@ -1,18 +1,18 @@
-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 { FloatingController } from '../../__internal/controllers/floating-controller.js';
-import { MenuItem } from '../menu-item/menu-item.js';
-import IndividualComponent from '@/IndividualComponent.js';
+import { html, LitElement } 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 { FloatingController } from "../../__internal/controllers/floating-controller.js";
+import { MenuItem } from "../menu-item/menu-item.js";
+import IndividualComponent from "@/IndividualComponent.js";
 
 type CloseReason =
-  | { kind: 'click-selection' }
-  | { kind: 'keydown'; key: string }
-  | { kind: 'outside-click' }
-  | { kind: 'focusout' }
-  | { kind: 'programmatic' };
+  | { kind: "click-selection" }
+  | { kind: "keydown"; key: string }
+  | { kind: "outside-click" }
+  | { kind: "focusout" }
+  | { kind: "programmatic" };
 
 /**
  * @label Menu
@@ -36,54 +36,62 @@ export class Menu extends LitElement {
   static Item = MenuItem;
 
   /** Whether the menu is currently visible. */
-  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ type: Boolean, reflect: true })
+  open = false;
 
   /** Visual variant of the menu. `"vibrant"` applies stronger color emphasis. */
-  @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
-    'standard';
+  @property({ type: String, reflect: true })
+  variant: "standard" | "vibrant" = "standard";
 
   /** ID of the anchor element the menu is positioned relative to. */
-  @property({ type: String }) anchor = '';
+  @property({ type: String })
+  anchor = "";
 
   /** When true, renders the menu in a static preview state (always visible, no animation). */
-  @property({ type: Boolean, reflect: true }) preview = false;
+  @property({ type: Boolean, reflect: true })
+  preview = false;
 
   /** When true, the menu will not close when a click occurs outside it. */
-  @property({ type: Boolean, attribute: 'stay-open-on-outside-click' })
+  @property({ type: Boolean, attribute: "stay-open-on-outside-click" })
   stayOpenOnOutsideClick = false;
 
   /** When true, the menu will not close when focus leaves it. */
-  @property({ type: Boolean, attribute: 'stay-open-on-focusout' })
+  @property({ type: Boolean, attribute: "stay-open-on-focusout" })
   stayOpenOnFocusout = false;
 
   /** Set to true when this menu is being used as a submenu inside another menu. */
-  @property({ type: Boolean, attribute: 'is-submenu' }) isSubmenu = false;
+  @property({ type: Boolean, attribute: "is-submenu" })
+  isSubmenu = false;
 
   /** Floating UI placement of the menu relative to its anchor. */
-  @property({ type: String }) placement: Placement = 'bottom-start';
+  @property({ type: String })
+  placement: Placement = "bottom-start";
 
   /** Distance in pixels between the menu and its anchor element. */
-  @property({ type: Number }) offset = 6;
+  @property({ type: Number })
+  offset = 6;
 
   /** Index of the currently focused/active item within the enabled items list. */
-  @state() private activeIndex = -1;
+  @state()
+  private activeIndex = -1;
 
-  @query('.menu') private readonly menuListElement!: HTMLElement;
+  @query(".menu")
+  private readonly menuListElement!: HTMLElement;
 
   /** Direct reference to the anchor element; takes precedence over the `anchor` ID property. */
   anchorElement: HTMLElement | null = null;
 
   /** Controller managing floating-UI positioning. */
   private readonly _floatingController = new FloatingController(this, {
-    trigger: 'manual',
+    trigger: "manual",
     closeOnClickOutside: false,
-    strategy: 'fixed',
-    onOpenChange: isOpen => {
+    strategy: "fixed",
+    onOpenChange: (isOpen) => {
       if (isOpen || !this.open) {
         return;
       }
 
-      this.close({ kind: 'outside-click' });
+      this.close({ kind: "outside-click" });
     },
   });
 
@@ -91,27 +99,27 @@ export class Menu extends LitElement {
   private _lastFocusedElement: HTMLElement | null = null;
 
   /** Reason that triggered the most recent close, included in the `closed` event detail. */
-  private _closeReason: CloseReason = { kind: 'programmatic' };
+  private _closeReason: CloseReason = { kind: "programmatic" };
 
   connectedCallback() {
     // eslint-disable-next-line wc/guard-super-call
     super.connectedCallback();
-    this.setAttribute('role', 'menu');
+    this.setAttribute("role", "menu");
 
-    this.addEventListener('keydown', this._onKeyDown);
-    this.addEventListener('click', this._onClick);
+    this.addEventListener("keydown", this._onKeyDown);
+    this.addEventListener("click", this._onClick);
     this._syncAnchorAria();
   }
 
   disconnectedCallback() {
-    this.removeEventListener('keydown', this._onKeyDown);
-    this.removeEventListener('click', this._onClick);
+    this.removeEventListener("keydown", this._onKeyDown);
+    this.removeEventListener("click", this._onClick);
     this._floatingController.close();
     super.disconnectedCallback();
   }
 
   get items(): MenuItem[] {
-    const slot = this.shadowRoot?.querySelector('slot');
+    const slot = this.shadowRoot?.querySelector("slot");
     const elements = slot?.assignedElements({ flatten: true }) ?? [];
     const items: MenuItem[] = [];
 
@@ -134,11 +142,11 @@ export class Menu extends LitElement {
       return;
     }
 
-    this._closeReason = { kind: 'programmatic' };
+    this._closeReason = { kind: "programmatic" };
     this.open = true;
   }
 
-  close(reason: CloseReason = { kind: 'programmatic' }) {
+  close(reason: CloseReason = { kind: "programmatic" }) {
     if (!this.open) {
       return;
     }
@@ -162,7 +170,7 @@ export class Menu extends LitElement {
     }
 
     const root = this.getRootNode() as Document | ShadowRoot;
-    if ('getElementById' in root) {
+    if ("getElementById" in root) {
       return root.getElementById(this.anchor);
     }
 
@@ -179,13 +187,13 @@ export class Menu extends LitElement {
       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));
+    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);
+    return this.items.filter((item) => !item.disabled);
   }
 
   private _syncRovingTabIndex() {
@@ -250,7 +258,7 @@ export class Menu extends LitElement {
 
   private _isEventFromThisMenu(event: Event) {
     const path = event.composedPath();
-    const sourceMenu = path.find(target => target instanceof Menu);
+    const sourceMenu = path.find((target) => target instanceof Menu);
 
     return sourceMenu === this;
   }
@@ -265,7 +273,7 @@ export class Menu extends LitElement {
 
     for (const target of path) {
       if (target instanceof MenuItem) {
-        const ownedItem = ownedItems.find(item => item === target);
+        const ownedItem = ownedItems.find((item) => item === target);
         if (ownedItem) {
           return ownedItem;
         }
@@ -288,7 +296,7 @@ export class Menu extends LitElement {
 
   private _dispatchItemActivate(item: MenuItem) {
     this.dispatchEvent(
-      new CustomEvent('menu-item-activate', {
+      new CustomEvent("menu-item-activate", {
         bubbles: true,
         composed: true,
         detail: { item },
@@ -312,7 +320,7 @@ export class Menu extends LitElement {
       return;
     }
 
-    this.close({ kind: 'click-selection' });
+    this.close({ kind: "click-selection" });
   };
 
   private _onKeyDown = (event: KeyboardEvent) => {
@@ -330,33 +338,33 @@ export class Menu extends LitElement {
     }
 
     switch (event.key) {
-      case 'ArrowDown':
+      case "ArrowDown":
         event.preventDefault();
         this._setActiveByOffset(1);
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         event.preventDefault();
         this._setActiveByOffset(-1);
         break;
-      case 'Home':
+      case "Home":
         event.preventDefault();
         this._setBoundaryActive(0);
         break;
-      case 'End': {
+      case "End": {
         event.preventDefault();
         const last = Math.max(this._enabledItems().length - 1, 0);
         this._setBoundaryActive(last);
         break;
       }
-      case 'Escape':
+      case "Escape":
         event.preventDefault();
-        this.close({ kind: 'keydown', key: 'Escape' });
+        this.close({ kind: "keydown", key: "Escape" });
         break;
-      case 'Tab':
-        this.close({ kind: 'keydown', key: 'Tab' });
+      case "Tab":
+        this.close({ kind: "keydown", key: "Tab" });
         break;
-      case 'Enter':
-      case ' ': {
+      case "Enter":
+      case " ": {
         event.preventDefault();
         const activeItem = this._getActiveItem() ?? this._getFirstEnabledItem();
         if (!activeItem) {
@@ -374,8 +382,68 @@ export class Menu extends LitElement {
 
   private _onSlotChange = () => {
     this._syncRovingTabIndex();
+    this._syncItemPositions();
   };
 
+  private _syncItemPositions() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    const elements = slot?.assignedElements({ flatten: true }) ?? [];
+
+    for (const el of elements) {
+      if (el instanceof HTMLElement) {
+        el.removeAttribute("data-position-first");
+        el.removeAttribute("data-position-last");
+        el.removeAttribute("data-position-after-divider");
+        el.removeAttribute("data-position-before-divider");
+      }
+    }
+
+    const items = elements.filter(
+      (el) => el.tagName.toLowerCase() !== "wc-divider"
+    );
+
+    if (items.length === 0) {
+      return;
+    }
+
+    const firstItem = items[0];
+    if (firstItem instanceof HTMLElement) {
+      firstItem.setAttribute("data-position-first", "");
+    }
+
+    const lastItem = items[items.length - 1];
+    if (lastItem instanceof HTMLElement) {
+      lastItem.setAttribute("data-position-last", "");
+    }
+
+    for (let i = 0; i < elements.length; i++) {
+      const el = elements[i];
+      if (el.tagName.toLowerCase() === "wc-divider") {
+        let prevItem: Element | null = null;
+        for (let j = i - 1; j >= 0; j--) {
+          if (elements[j].tagName.toLowerCase() !== "wc-divider") {
+            prevItem = elements[j];
+            break;
+          }
+        }
+        if (prevItem instanceof HTMLElement) {
+          prevItem.setAttribute("data-position-before-divider", "");
+        }
+
+        let nextItem: Element | null = null;
+        for (let j = i + 1; j < elements.length; j++) {
+          if (elements[j].tagName.toLowerCase() !== "wc-divider") {
+            nextItem = elements[j];
+            break;
+          }
+        }
+        if (nextItem instanceof HTMLElement) {
+          nextItem.setAttribute("data-position-after-divider", "");
+        }
+      }
+    }
+  }
+
   private _applyPositioning() {
     if (!this.open || !this.menuListElement) {
       return;
@@ -389,7 +457,7 @@ export class Menu extends LitElement {
     this._floatingController.setOptions({
       placement: this.placement,
       offset: this.offset,
-      strategy: 'fixed',
+      strategy: "fixed",
       closeOnClickOutside: !this.stayOpenOnOutsideClick,
     });
     this._floatingController.setElements(anchorEl, this.menuListElement);
@@ -397,16 +465,17 @@ export class Menu extends LitElement {
   }
 
   protected override updated(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has('anchor') || changedProperties.has('open')) {
+    if (changedProperties.has("anchor") || changedProperties.has("open")) {
       this._syncAnchorAria();
     }
 
-    if (changedProperties.has('open')) {
+    if (changedProperties.has("open")) {
       if (this.open) {
         this._lastFocusedElement = document.activeElement as HTMLElement | null;
         this._syncRovingTabIndex();
+        this._syncItemPositions();
         this.dispatchEvent(
-          new CustomEvent('opened', {
+          new CustomEvent("opened", {
             bubbles: true,
             composed: true,
           }),
@@ -418,7 +487,7 @@ export class Menu extends LitElement {
 
         const reason = this._closeReason;
         this.dispatchEvent(
-          new CustomEvent('close-menu', {
+          new CustomEvent("close-menu", {
             bubbles: true,
             composed: true,
             detail: {
@@ -428,15 +497,15 @@ export class Menu extends LitElement {
           }),
         );
         this.dispatchEvent(
-          new CustomEvent('closed', {
+          new CustomEvent("closed", {
             bubbles: true,
             composed: true,
             detail: { reason },
           }),
         );
 
-        const shouldRestoreFocus =
-          reason.kind !== 'keydown' || reason.key !== 'Tab';
+        const shouldRestoreFocus = reason.kind !== "keydown" ||
+          reason.key !== "Tab";
 
         if (!this.isSubmenu && shouldRestoreFocus) {
           this._lastFocusedElement?.focus();
@@ -445,10 +514,10 @@ export class Menu extends LitElement {
     }
 
     if (
-      (changedProperties.has('open') ||
-        changedProperties.has('anchor') ||
-        changedProperties.has('placement') ||
-        changedProperties.has('offset')) &&
+      (changedProperties.has("open") ||
+        changedProperties.has("anchor") ||
+        changedProperties.has("placement") ||
+        changedProperties.has("offset")) &&
       this.open
     ) {
       this._applyPositioning();
@@ -456,21 +525,23 @@ export class Menu extends LitElement {
   }
 
   render() {
-    return html`<div
-      class=${classMap({
-        menu: true,
-        open: !this.preview && this.open,
-        closed: !this.preview && !this.open,
-        preview: this.preview,
-        [`variant-${this.variant}`]: true,
-      })}
-      aria-hidden=${String(!this.open)}
-    >
-      <div class="background"></div>
-
-      <div class="menu-content">
-        <slot @slotchange=${this._onSlotChange}></slot>
+    return html`
+      <div
+        class="${classMap({
+          menu: true,
+          open: !this.preview && this.open,
+          closed: !this.preview && !this.open,
+          preview: this.preview,
+          [`variant-${this.variant}`]: true,
+        })}"
+        aria-hidden="${String(!this.open)}"
+      >
+        <div class="background"></div>
+
+        <div class="menu-content">
+          <slot @slotchange="${this._onSlotChange}"></slot>
+        </div>
       </div>
-    </div>`;
+    `;
   }
 }

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

@@ -1,12 +1,12 @@
-@use "../../../scss/mixin";
+@use '../../../scss/mixin';
 
-:host-context([variant=standard]) {
+:host-context([variant='standard']) {
   --menu-item-label-color: var(--color-on-surface-variant);
   --menu-item-label-selected-color: var(--color-on-tertiary-container);
   --menu-item-container-selected-color: var(--color-tertiary-container);
 }
 
-:host-context([variant=vibrant]) {
+:host-context([variant='vibrant']) {
   --menu-item-label-color: var(--color-on-tertiary-container);
   --menu-item-label-selected-color: var(--color-on-tertiary);
   --menu-item-container-selected-color: var(--color-tertiary);