@reliability-design/web 1.1.1 → 1.3.0

package/dist/components/rel-menu/rel-menu.ts

@@ -1,359 +1,359 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-
-export type MenuType = "default" | "checkbox" | "arrow";
-
-export interface MenuItem {
-  label: string;
-  active?: boolean;
-  checked?: boolean;
-  disabled?: boolean;
-  submenu?: MenuItem[];
-  open?: boolean;
-}
-
-@customElement("rel-menu-item")
-export class RelMenuItem extends LitElement {
-  @property({ type: String }) label: string = "";
-  @property({ type: String }) value: string = "";
-  @property({ type: Boolean }) disabled: boolean = false;
-  @property({ type: String }) icon: string = "";
-
-  render() {
-    return html``;
-  }
-}
-
-@customElement("rel-menu")
-export class RelMenu extends LitElement {
-  @property({ type: String }) type: MenuType = "default";
-
-  @property({ type: Array }) items: MenuItem[] = [];
-
-  @state() private focusedIndex: number = 0;
-  @state() private _menuItems: RelMenuItem[] = [];
-
-  static styles = css`
-    :host {
-      display: inline-block;
-    }
-
-    .rel-menu {
-      position: relative;
-      display: inline-block;
-      background: var(--rel-color-bg-primary);
-      color: var(--rel-color-text-primary);
-      border-radius: var(--rel-borders-radius-border-radius-300);
-      box-shadow: var(--rel-shadows-shadow-300);
-      min-width: 220px;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
-      font-size: var(--rel-fontSizes-sm);
-      padding: var(--rel-spacing-space-3xs) 0;
-      outline: none;
-      overflow: hidden;
-    }
-
-    .rel-menu:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary, #0091ea);
-      outline-offset: 2px;
-    }
-
-    .rel-menu-item {
-      position: relative;
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-xs);
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
-      line-height: var(--rel-lineHeights-sm);
-      cursor: pointer;
-      transition: background 0.15s ease, color 0.15s ease;
-      user-select: none;
-    }
-
-    .rel-menu-item:hover {
-      background: var(--rel-color-bg-hover);
-    }
-
-    .rel-menu-item:active {
-      background: var(--rel-color-bg-hover);
-    }
-
-    .rel-menu-item.active {
-      background: var(--rel-color-bg-hover);
-      font-weight: var(--rel-fontWeights-medium);
-    }
-
-    .rel-menu-item.disabled {
-      background-color: transparent;
-      color: var(--rel-text-disabled, #9e9e9e);
-      cursor: not-allowed;
-    }
-
-    .rel-menu-item[data-focused="true"] {
-      outline: 2px solid var(--rel-colors-blue-primary, #0091ea);
-      outline-offset: -2px;
-    }
-
-    .menu-check-row {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-2xs);
-      width: 100%;
-    }
-
-    .menu-checkbox {
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
-    }
-
-    .menu-checkbox:disabled {
-      cursor: not-allowed;
-    }
-
-    .menu-label {
-      flex: 1 1 auto;
-    }
-
-    .chevron {
-      font-size: var(--rel-fontSizes-lg);
-      opacity: 0.75;
-      transform: translateY(1px);
-    }
-
-    .rel-submenu {
-      position: absolute;
-      top: calc(-1 * var(--rel-spacing-space-3xs));
-      left: calc(100% + var(--rel-spacing-space-2xs));
-      min-width: 200px;
-      background: var(--rel-color-bg-primary);
-      color: var(--rel-color-text-primary);
-      border-radius: var(--rel-borders-radius-border-radius-300);
-      box-shadow: var(--rel-shadows-shadow-300);
-      padding: var(--rel-spacing-space-3xs) 0;
-      display: none;
-      z-index: 20;
-    }
-
-    .rel-submenu.visible {
-      display: block;
-    }
-
-    .rel-submenu .rel-menu-item {
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
-    }
-  `;
-
-  private _onSlotChange(e: Event) {
-    const slot = e.target as HTMLSlotElement;
-    this._menuItems = slot
-      .assignedElements()
-      .filter((el): el is RelMenuItem => el instanceof RelMenuItem);
-  }
-
-  private get _effectiveItems(): MenuItem[] {
-    if (this._menuItems.length > 0) {
-      return this._menuItems.map((el) => ({
-        label: el.label,
-        disabled: el.disabled,
-      }));
-    }
-    return this.items;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("click", this.handleDocumentClick);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("click", this.handleDocumentClick);
-  }
-
-  private handleDocumentClick = (e: MouseEvent) => {
-    const path = e.composedPath() as HTMLElement[];
-    const hit = path.some((n) => n?.classList?.contains("rel-menu"));
-    if (!hit) {
-      this._effectiveItems.forEach((i) => (i.open = false));
-      this.requestUpdate();
-    }
-  };
-
-  private onItemEnter(item: MenuItem) {
-    if (this.type === "arrow" && item.submenu?.length) {
-      this._effectiveItems.forEach((i) => {
-        if (i !== item) i.open = false;
-      });
-      item.open = true;
-      this.requestUpdate();
-    }
-  }
-
-  private onItemLeave(_item: MenuItem) {
-    // Keep open so user can move into submenu
-  }
-
-  private onItemClick(item: MenuItem, index: number, ev?: Event) {
-    ev?.stopPropagation();
-    if (item.disabled) return;
-
-    this.focusedIndex = index;
-
-    if (this.type === "checkbox") {
-      item.checked = !item.checked;
-      this.dispatchEvent(
-        new CustomEvent("rel-check", {
-          detail: { item, checked: item.checked },
-          bubbles: true,
-          composed: true,
-        })
-      );
-      this.requestUpdate();
-      return;
-    }
-
-    if (this.type === "arrow" && item.submenu?.length) {
-      const next = !item.open;
-      this._effectiveItems.forEach((i) => (i.open = false));
-      item.open = next;
-      this.requestUpdate();
-      return;
-    }
-
-    // Default: set active
-    this._effectiveItems.forEach((i) => (i.active = false));
-    item.active = true;
-    this.dispatchEvent(
-      new CustomEvent("rel-select", {
-        detail: { item },
-        bubbles: true,
-        composed: true,
-      })
-    );
-    this.requestUpdate();
-  }
-
-  private onSubClick(parent: MenuItem, sub: MenuItem, ev?: Event) {
-    ev?.stopPropagation();
-    this._effectiveItems.forEach((i) => {
-      i.active = false;
-      i.submenu?.forEach((s) => (s.active = false));
-    });
-    sub.active = true;
-    parent.open = false;
-    this.dispatchEvent(
-      new CustomEvent("rel-submenu-select", {
-        detail: { parent, sub },
-        bubbles: true,
-        composed: true,
-      })
-    );
-    this.requestUpdate();
-  }
-
-  private toggleCheckbox(item: MenuItem, ev: Event) {
-    ev.stopPropagation();
-    if (!item.disabled) {
-      item.checked = !item.checked;
-      this.dispatchEvent(
-        new CustomEvent("rel-check", {
-          detail: { item, checked: item.checked },
-          bubbles: true,
-          composed: true,
-        })
-      );
-      this.requestUpdate();
-    }
-  }
-
-  private onKeydown(ev: KeyboardEvent) {
-    const last = this._effectiveItems.length - 1;
-
-    if (ev.key === "ArrowDown") {
-      this.focusedIndex = Math.min(last, this.focusedIndex + 1);
-      ev.preventDefault();
-    } else if (ev.key === "ArrowUp") {
-      this.focusedIndex = Math.max(0, this.focusedIndex - 1);
-      ev.preventDefault();
-    } else if (ev.key === "ArrowRight") {
-      const item = this._effectiveItems[this.focusedIndex];
-      if (this.type === "arrow" && item?.submenu?.length) {
-        item.open = true;
-        this.requestUpdate();
-      }
-    } else if (ev.key === "ArrowLeft" || ev.key === "Escape") {
-      this._effectiveItems.forEach((i) => (i.open = false));
-      this.requestUpdate();
-    } else if (ev.key === "Enter" || ev.key === " ") {
-      const item = this._effectiveItems[this.focusedIndex];
-      this.onItemClick(item, this.focusedIndex);
-      ev.preventDefault();
-    }
-  }
-
-  private renderMenuItem(item: MenuItem, index: number) {
-    const isFocused = this.focusedIndex === index;
-
-    return html`
-      <div
-        class="rel-menu-item ${item.active ? "active" : ""} ${item.disabled ? "disabled" : ""}"
-        role="menuitem"
-        ?data-focused="${isFocused}"
-        @mouseenter="${() => this.onItemEnter(item)}"
-        @mouseleave="${() => this.onItemLeave(item)}"
-        @click="${(e: Event) => this.onItemClick(item, index, e)}">
-        ${this.type === "checkbox"
-          ? html`
-              <div class="menu-check-row">
-                <input
-                  class="menu-checkbox"
-                  type="checkbox"
-                  .checked="${item.checked || false}"
-                  ?disabled="${item.disabled}"
-                  @click="${(e: Event) => this.toggleCheckbox(item, e)}" />
-                <span class="menu-label">${item.label}</span>
-              </div>
-            `
-          : html`
-              <span class="menu-label">${item.label}</span>
-              ${this.type === "arrow" && item.submenu?.length
-                ? html`<span class="chevron">▸</span>`
-                : ""}
-            `}
-        ${this.type === "arrow" && item.submenu?.length
-          ? html`
-              <div
-                class="rel-submenu ${item.open ? "visible" : ""}"
-                @click="${(e: Event) => e.stopPropagation()}">
-                ${item.submenu.map(
-                  (sub) => html`
-                    <div
-                      class="rel-menu-item ${sub.active ? "active" : ""}"
-                      role="menuitem"
-                      @click="${(e: Event) => this.onSubClick(item, sub, e)}">
-                      <span class="menu-label">${sub.label}</span>
-                    </div>
-                  `
-                )}
-              </div>
-            `
-          : ""}
-      </div>
-    `;
-  }
-
-  render() {
-    return html`
-      <slot name="items" style="display:none;" @slotchange="${this._onSlotChange}"></slot>
-      <div
-        class="rel-menu"
-        role="menu"
-        tabindex="0"
-        @keydown="${this.onKeydown}"
-        @click="${(e: Event) => e.stopPropagation()}">
-        ${this._effectiveItems.map((item, index) => this.renderMenuItem(item, index))}
-      </div>
-    `;
-  }
-}
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+
+export type MenuType = "default" | "checkbox" | "arrow";
+
+export interface MenuItem {
+  label: string;
+  active?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  submenu?: MenuItem[];
+  open?: boolean;
+}
+
+@customElement("rel-menu-item")
+export class RelMenuItem extends LitElement {
+  @property({ type: String }) label: string = "";
+  @property({ type: String }) value: string = "";
+  @property({ type: Boolean }) disabled: boolean = false;
+  @property({ type: String }) icon: string = "";
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html``;
+  }
+}
+
+@customElement("rel-menu")
+export class RelMenu extends LitElement {
+  @property({ type: String }) type: MenuType = "default";
+
+  @property({ type: Array }) items: MenuItem[] = [];
+
+  @state() private focusedIndex: number = 0;
+  @state() private _items: MenuItem[] = [];
+
+  public static readonly _css = `
+    :host {
+      display: inline-block;
+    }
+
+    .rel-menu {
+      position: relative;
+      display: inline-block;
+      background: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-primary);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      box-shadow: var(--rel-shadows-shadow-300);
+      min-width: 220px;
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      font-size: var(--rel-fontSizes-sm);
+      padding: var(--rel-spacing-space-3xs) 0;
+      outline: none;
+      overflow: hidden;
+    }
+
+    .rel-menu:focus-visible,
+    :host(:focus-visible) .rel-menu {
+      outline: 2px solid var(--rel-color-border-focus);
+      outline-offset: 2px;
+    }
+
+    .rel-menu-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs);
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      line-height: var(--rel-lineHeights-sm);
+      cursor: pointer;
+      transition: background 0.15s ease, color 0.15s ease;
+      user-select: none;
+    }
+
+    .rel-menu-item:hover {
+      background: var(--rel-color-bg-hover);
+    }
+
+    .rel-menu-item:active {
+      background: var(--rel-color-bg-hover);
+    }
+
+    .rel-menu-item.active {
+      background: var(--rel-color-bg-hover);
+      font-weight: var(--rel-fontWeights-medium);
+    }
+
+    .rel-menu-item.disabled {
+      background-color: transparent;
+      color: var(--rel-color-text-disabled);
+      cursor: not-allowed;
+    }
+
+    .rel-menu-item[data-focused="true"] {
+      outline: 2px solid var(--rel-color-border-focus);
+      outline-offset: -2px;
+    }
+
+    .menu-check-row {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs);
+      width: 100%;
+    }
+
+    .menu-checkbox {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+
+    .menu-checkbox:disabled {
+      cursor: not-allowed;
+    }
+
+    .menu-label {
+      flex: 1 1 auto;
+    }
+
+    .chevron {
+      font-size: var(--rel-fontSizes-lg);
+      opacity: 0.75;
+      transform: translateY(1px);
+    }
+
+    .rel-submenu {
+      position: absolute;
+      top: calc(-1 * var(--rel-spacing-space-3xs));
+      left: calc(100% + var(--rel-spacing-space-2xs));
+      min-width: 200px;
+      background: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-primary);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      box-shadow: var(--rel-shadows-shadow-300);
+      padding: var(--rel-spacing-space-3xs) 0;
+      visibility: hidden;
+      pointer-events: none;
+      z-index: 20;
+    }
+
+    .rel-submenu.visible {
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    .rel-submenu .rel-menu-item {
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+    }
+  `;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.handleDocumentClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.handleDocumentClick);
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('items')) {
+      this._items = this.items.map(item => ({ ...item }));
+    }
+  }
+
+  private handleDocumentClick = (e: MouseEvent) => {
+    if (!this.contains(e.target as Node)) {
+      this._items = this._items.map(i => ({ ...i, open: false }));
+    }
+  };
+
+  private onItemEnter(item: MenuItem, index: number) {
+    if (this.type === "arrow" && item.submenu?.length) {
+      this._items = this._items.map((i, idx) => ({ ...i, open: idx === index }));
+    }
+  }
+
+  private onItemLeave(_item: MenuItem) {
+    // Keep open so user can move into submenu
+  }
+
+  private onItemClick(item: MenuItem, index: number, ev?: Event) {
+    ev?.stopPropagation();
+    if (item.disabled) return;
+
+    this.focusedIndex = index;
+
+    if (this.type === "checkbox") {
+      const updated = { ...item, checked: !item.checked };
+      this._items = this._items.map((i, idx) => idx === index ? updated : i);
+      this.dispatchEvent(
+        new CustomEvent("rel-check", {
+          detail: { item: updated, checked: updated.checked },
+          bubbles: true,
+          composed: true,
+        })
+      );
+      return;
+    }
+
+    if (this.type === "arrow" && item.submenu?.length) {
+      const next = !item.open;
+      this._items = this._items.map((i, idx) => ({
+        ...i,
+        open: idx === index ? next : false,
+      }));
+      return;
+    }
+
+    // Default: set active
+    const updated = { ...item, active: true };
+    this._items = this._items.map((i, idx) => idx === index ? updated : { ...i, active: false });
+    this.dispatchEvent(
+      new CustomEvent("rel-select", {
+        detail: { item: updated },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private onSubClick(parentIndex: number, subIndex: number, ev?: Event) {
+    ev?.stopPropagation();
+    this._items = this._items.map((i, idx) => ({
+      ...i,
+      active: false,
+      open: false,
+      submenu: i.submenu?.map((s, sIdx) => ({
+        ...s,
+        active: idx === parentIndex && sIdx === subIndex,
+      })),
+    }));
+    this.dispatchEvent(
+      new CustomEvent("rel-submenu-select", {
+        detail: {
+          parent: this._items[parentIndex],
+          sub: this._items[parentIndex]?.submenu?.[subIndex],
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private toggleCheckbox(item: MenuItem, ev: Event) {
+    ev.stopPropagation();
+    if (!item.disabled) {
+      item.checked = !item.checked;
+      this.dispatchEvent(
+        new CustomEvent("rel-check", {
+          detail: { item, checked: item.checked },
+          bubbles: true,
+          composed: true,
+        })
+      );
+      this.requestUpdate();
+    }
+  }
+
+  private onKeydown(ev: KeyboardEvent) {
+    const last = this._items.length - 1;
+
+    if (ev.key === "ArrowDown") {
+      this.focusedIndex = Math.min(last, this.focusedIndex + 1);
+      ev.preventDefault();
+    } else if (ev.key === "ArrowUp") {
+      this.focusedIndex = Math.max(0, this.focusedIndex - 1);
+      ev.preventDefault();
+    } else if (ev.key === "ArrowRight") {
+      const item = this._items[this.focusedIndex];
+      if (this.type === "arrow" && item?.submenu?.length) {
+        this._items = this._items.map((i, idx) => ({
+          ...i,
+          open: idx === this.focusedIndex ? true : i.open,
+        }));
+      }
+    } else if (ev.key === "ArrowLeft" || ev.key === "Escape") {
+      this._items = this._items.map(i => ({ ...i, open: false }));
+    } else if (ev.key === "Enter" || ev.key === " ") {
+      const item = this._items[this.focusedIndex];
+      this.onItemClick(item, this.focusedIndex);
+      ev.preventDefault();
+    }
+  }
+
+  private renderMenuItem(item: MenuItem, index: number) {
+    const isFocused = this.focusedIndex === index;
+
+    return html`
+      <div
+        class="rel-menu-item ${item.active ? "active" : ""} ${item.disabled ? "disabled" : ""}"
+        role="menuitem"
+        ?data-focused="${isFocused}"
+        @mouseenter="${() => this.onItemEnter(item, index)}"
+        @mouseleave="${() => this.onItemLeave(item)}"
+        @click="${(e: Event) => this.onItemClick(item, index, e)}">
+        ${this.type === "checkbox"
+          ? html`
+              <div class="menu-check-row">
+                <input
+                  class="menu-checkbox"
+                  type="checkbox"
+                  .checked="${item.checked || false}"
+                  ?disabled="${item.disabled}"
+                  @click="${(e: Event) => this.toggleCheckbox(item, e)}" />
+                <span class="menu-label">${item.label}</span>
+              </div>
+            `
+          : html`
+              <span class="menu-label">${item.label}</span>
+              ${this.type === "arrow" && item.submenu?.length
+                ? html`<span class="chevron">▸</span>`
+                : ""}
+            `}
+        ${this.type === "arrow" && item.submenu?.length
+          ? html`
+              <div
+                class="rel-submenu ${item.open ? "visible" : ""}"
+                @click="${(e: Event) => e.stopPropagation()}">
+                ${item.submenu.map(
+                  (sub, subIndex) => html`
+                    <div
+                      class="rel-menu-item ${sub.active ? "active" : ""}"
+                      role="menuitem"
+                      @click="${(e: Event) => this.onSubClick(index, subIndex, e)}">
+                      <span class="menu-label">${sub.label}</span>
+                    </div>
+                  `
+                )}
+              </div>
+            `
+          : ""}
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <style>${RelMenu._css}</style>
+      <div
+        class="rel-menu"
+        role="menu"
+        tabindex="0"
+        @keydown="${this.onKeydown}"
+        @click="${(e: Event) => e.stopPropagation()}">
+        ${this._items.map((item, index) => this.renderMenuItem(item, index))}
+      </div>
+    `;
+  }
+}