@reliability-design/web 1.0.3 → 1.1.1

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

@@ -0,0 +1,605 @@
+import { LitElement, html, css } from "lit";
+import { customElement, state, query } from "lit/decorators.js";
+import { RelMenubarMenu } from "./rel-menubar-menu";
+import "@reliability-design/icons/rel-icon";
+import "../rel-checkbox/rel-checkbox";
+
+interface MenuState {
+  menu: RelMenubarMenu;
+  open: boolean;
+  panelElement?: HTMLElement;
+}
+
+@customElement("rel-menubar")
+export class RelMenubar extends LitElement {
+  @state() private menus: MenuState[] = [];
+  @state() private openMenuIndex: number = -1;
+  @state() private focusedTriggerIndex: number = 0;
+  @state() private focusedItemIndex: number = 0;
+  @state() private openSubmenuElement: HTMLElement | null = null;
+
+  @query(".menubar-container") private container!: HTMLElement;
+
+  private hoverSwitchEnabled = false;
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .menubar-container {
+      display: flex;
+      align-items: center;
+      background: var(--rel-colors-gray-light);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      padding: var(--rel-spacing-space-3xs);
+      gap: var(--rel-spacing-space-3xs);
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-sm);
+    }
+
+    .menubar-trigger {
+      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
+      border-radius: var(--rel-borders-radius-border-radius-100);
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: inherit;
+      color: var(--rel-colors-gray-heading);
+      transition: background 0.15s ease;
+      user-select: none;
+      outline: none;
+    }
+
+    .menubar-trigger:hover {
+      background: var(--rel-color-bg-hover);
+    }
+
+    .menubar-trigger:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+
+    .menubar-trigger.active {
+      background: var(--rel-color-bg-hover);
+    }
+
+    .menubar-panel {
+      position: fixed;
+      min-width: 220px;
+      background: var(--rel-color-bg-primary);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      box-shadow: var(--rel-shadows-shadow-300);
+      padding: var(--rel-spacing-space-2xs) 0;
+      z-index: 1000;
+      display: none;
+    }
+
+    .menubar-panel.open {
+      display: block;
+    }
+
+    .menu-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--rel-spacing-space-sm);
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
+      cursor: pointer;
+      transition: background 0.15s ease;
+      user-select: none;
+      color: var(--rel-colors-gray-heading);
+      line-height: var(--rel-lineHeights-sm);
+    }
+
+    .menu-item:hover,
+    .menu-item.focused {
+      background: var(--rel-color-bg-hover);
+    }
+
+    .menu-item[data-disabled="true"] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .menu-separator {
+      height: var(--rel-borders-width-stroke-100);
+      background: var(--rel-colors-gray-divider);
+      margin: var(--rel-spacing-space-2xs) var(--rel-spacing-space-xs);
+    }
+
+    .menu-checkbox,
+    .menu-radio-item {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs);
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
+      cursor: pointer;
+      transition: background 0.15s ease;
+      user-select: none;
+      color: var(--rel-colors-gray-heading);
+      line-height: var(--rel-lineHeights-sm);
+    }
+
+    .menu-checkbox:hover,
+    .menu-checkbox.focused,
+    .menu-radio-item:hover,
+    .menu-radio-item.focused {
+      background: var(--rel-color-bg-hover);
+    }
+
+    .menu-checkbox rel-checkbox,
+    .menu-radio-item::before {
+      margin: 0;
+    }
+
+    :host-context([data-theme="dark"]) rel-checkbox,
+    :host-context(.dark) rel-checkbox {
+      color: var(--rel-color-text-primary);
+    }
+
+    rel-icon {
+      display: inline-flex;
+      pointer-events: none;
+    }
+
+    .menu-radio-item {
+      position: relative;
+      padding-left: calc(var(--rel-spacing-space-md) + var(--rel-spacing-space-md));
+    }
+
+    .menu-radio-item::before {
+      content: "";
+      position: absolute;
+      left: var(--rel-spacing-space-md);
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      border: var(--rel-borders-width-stroke-150) solid var(--rel-colors-gray-border);
+      background: var(--rel-colors-white);
+    }
+
+    .menu-radio-item.checked::after {
+      content: "";
+      position: absolute;
+      left: calc(var(--rel-spacing-space-md) + 3px);
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--rel-colors-blue-primary);
+    }
+
+    .menu-submenu-trigger {
+      position: relative;
+    }
+
+    .menu-submenu-trigger rel-icon {
+      opacity: 0.6;
+    }
+
+    .submenu-panel {
+      position: fixed;
+      min-width: 200px;
+      background: var(--rel-color-bg-primary);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      box-shadow: var(--rel-shadows-shadow-300);
+      padding: var(--rel-spacing-space-2xs) 0;
+      z-index: 1001;
+      display: none;
+    }
+
+    .submenu-panel.open {
+      display: block;
+    }
+
+    .menu-shortcut {
+      opacity: 0.6;
+      font-size: var(--rel-fontSizes-xs);
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-3xs);
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.discoverMenus();
+    document.addEventListener("click", this.handleOutsideClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.handleOutsideClick);
+  }
+
+  private discoverMenus() {
+    const menuElements = Array.from(
+      this.querySelectorAll("rel-menubar-menu")
+    ) as RelMenubarMenu[];
+    this.menus = menuElements.map((menu) => ({ menu, open: false }));
+  }
+
+  private handleOutsideClick = (e: MouseEvent) => {
+    const path = e.composedPath() as HTMLElement[];
+    const isInside = path.some(
+      (el) =>
+        el === this ||
+        el.classList?.contains("menubar-panel") ||
+        el.classList?.contains("submenu-panel")
+    );
+    if (!isInside) {
+      this.closeAllMenus();
+    }
+  };
+
+  private closeAllMenus() {
+    this.openMenuIndex = -1;
+    this.openSubmenuElement = null;
+    this.hoverSwitchEnabled = false;
+    this.requestUpdate();
+  }
+
+  private openMenu(index: number, triggerElement: HTMLElement) {
+    this.openMenuIndex = index;
+    this.focusedItemIndex = 0;
+    this.openSubmenuElement = null;
+    this.requestUpdate();
+
+    // Position the panel below the trigger
+    this.updateComplete.then(() => {
+      const panel = this.shadowRoot?.querySelector(
+        `.menubar-panel[data-menu-index="${index}"]`
+      ) as HTMLElement;
+      if (panel && triggerElement) {
+        const rect = triggerElement.getBoundingClientRect();
+        panel.style.top = `${rect.bottom + 4}px`;
+        panel.style.left = `${rect.left}px`;
+      }
+    });
+  }
+
+  private handleTriggerClick(index: number, event: Event) {
+    const target = event.currentTarget as HTMLElement;
+    if (this.openMenuIndex === index) {
+      this.closeAllMenus();
+    } else {
+      this.openMenu(index, target);
+      this.hoverSwitchEnabled = true;
+    }
+  }
+
+  private handleTriggerMouseEnter(index: number, event: Event) {
+    if (this.openMenuIndex !== -1 && this.hoverSwitchEnabled) {
+      const target = event.currentTarget as HTMLElement;
+      this.openMenu(index, target);
+    }
+  }
+
+  private handleTriggerKeyDown(event: KeyboardEvent) {
+    const { key } = event;
+
+    if (key === "ArrowRight") {
+      event.preventDefault();
+      this.focusedTriggerIndex = Math.min(
+        this.menus.length - 1,
+        this.focusedTriggerIndex + 1
+      );
+      this.focusTrigger(this.focusedTriggerIndex);
+    } else if (key === "ArrowLeft") {
+      event.preventDefault();
+      this.focusedTriggerIndex = Math.max(0, this.focusedTriggerIndex - 1);
+      this.focusTrigger(this.focusedTriggerIndex);
+    } else if (key === "Enter" || key === " ") {
+      event.preventDefault();
+      const trigger = this.shadowRoot?.querySelector(
+        `.menubar-trigger[data-index="${this.focusedTriggerIndex}"]`
+      ) as HTMLElement;
+      if (trigger) {
+        this.openMenu(this.focusedTriggerIndex, trigger);
+        this.updateComplete.then(() => {
+          const focusTarget = this.shadowRoot?.querySelector<HTMLElement>(
+            "[autofocus], [role='menuitem']"
+          );
+          if (focusTarget) {
+            focusTarget.focus();
+          } else {
+            this.focusMenuItem(0);
+          }
+        });
+      }
+    } else if (key === "ArrowDown" && this.openMenuIndex !== -1) {
+      event.preventDefault();
+      this.focusMenuItem(0);
+    }
+  }
+
+  private focusTrigger(index: number) {
+    const trigger = this.shadowRoot?.querySelector(
+      `.menubar-trigger[data-index="${index}"]`
+    ) as HTMLElement;
+    trigger?.focus();
+  }
+
+  private handlePanelKeyDown(event: KeyboardEvent) {
+    const { key } = event;
+    const menuContent = this.menus[this.openMenuIndex]?.menu;
+    if (!menuContent) return;
+
+    const items = this.getFocusableItems(menuContent);
+
+    if (key === "ArrowDown") {
+      event.preventDefault();
+      this.focusedItemIndex = Math.min(items.length - 1, this.focusedItemIndex + 1);
+      this.requestUpdate();
+    } else if (key === "ArrowUp") {
+      event.preventDefault();
+      this.focusedItemIndex = Math.max(0, this.focusedItemIndex - 1);
+      this.requestUpdate();
+    } else if (key === "ArrowRight") {
+      event.preventDefault();
+      const currentItem = items[this.focusedItemIndex];
+      if (currentItem?.hasAttribute("data-submenu")) {
+        this.openSubmenu(currentItem as HTMLElement);
+      }
+    } else if (key === "ArrowLeft") {
+      event.preventDefault();
+      if (this.openSubmenuElement) {
+        this.openSubmenuElement = null;
+        this.requestUpdate();
+      }
+    } else if (key === "Escape") {
+      event.preventDefault();
+      this.closeAllMenus();
+      this.focusTrigger(this.openMenuIndex);
+    } else if (key === "Enter" || key === " ") {
+      event.preventDefault();
+      const currentItem = items[this.focusedItemIndex];
+      if (currentItem) {
+        this.handleItemClick(currentItem as HTMLElement);
+      }
+    }
+  }
+
+  private getFocusableItems(menuContent: RelMenubarMenu): Element[] {
+    return Array.from(menuContent.children).filter(
+      (el) =>
+        el.hasAttribute("data-item") ||
+        el.hasAttribute("data-checkbox") ||
+        el.hasAttribute("data-radio") ||
+        el.hasAttribute("data-submenu")
+    );
+  }
+
+  private focusMenuItem(index: number) {
+    this.focusedItemIndex = index;
+    const panel = this.shadowRoot?.querySelector(
+      `.menubar-panel[data-menu-index="${this.openMenuIndex}"]`
+    ) as HTMLElement;
+    panel?.focus();
+  }
+
+  private handleItemClick(item: HTMLElement) {
+    if (item.hasAttribute("data-checkbox")) {
+      // Toggle is handled by rel-checkbox @rel-change; nothing to do here
+    } else if (item.hasAttribute("data-radio")) {
+      const radioGroup = item.closest("[data-radio-group]") as HTMLElement;
+      const value = item.getAttribute("data-radio") || item.getAttribute("value") || "";
+      const name = radioGroup?.getAttribute("name") || "";
+
+      // Update visual state
+      const allRadios = radioGroup?.querySelectorAll("[data-radio]");
+      allRadios?.forEach((radio) => radio.removeAttribute("data-checked"));
+      item.setAttribute("data-checked", "true");
+
+      // Update internal value
+      if (radioGroup) {
+        radioGroup.setAttribute("value", value);
+      }
+
+      this.dispatchChangeEvent("radio", name, value);
+      this.requestUpdate();
+    } else if (item.hasAttribute("data-submenu")) {
+      this.openSubmenu(item);
+    } else {
+      // Regular item click
+      this.closeAllMenus();
+    }
+  }
+
+  private openSubmenu(submenuTrigger: HTMLElement, renderedTrigger?: HTMLElement) {
+    this.openSubmenuElement = submenuTrigger;
+    this.requestUpdate();
+
+    this.updateComplete.then(() => {
+      const submenuPanel = this.shadowRoot?.querySelector(
+        `.submenu-panel[data-submenu-id="${submenuTrigger.getAttribute("data-submenu") || ""}"]`
+      ) as HTMLElement;
+      if (submenuPanel) {
+        // Use the rendered shadow-DOM element for getBoundingClientRect() —
+        // the light-DOM submenuTrigger is in a display:none slot and returns {0,0,0,0}.
+        const positionTarget = renderedTrigger ?? submenuTrigger;
+        const rect = positionTarget.getBoundingClientRect();
+        submenuPanel.style.top = `${rect.top}px`;
+        submenuPanel.style.left = `${rect.right + 4}px`;
+      }
+    });
+  }
+
+  private handleSubmenuItemClick(item: HTMLElement) {
+    // Regular item - just close
+    this.closeAllMenus();
+  }
+
+  private dispatchChangeEvent(type: "checkbox" | "radio", labelOrName: string, value: string | boolean) {
+    const detail =
+      type === "checkbox"
+        ? { type, label: labelOrName, name: "", checked: value as boolean }
+        : { type, label: "", name: labelOrName, value: value as string };
+    this.dispatchEvent(
+      new CustomEvent("rel-menubar-change", {
+        detail,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private renderMenuItem(item: Element, index: number): any {
+    const isFocused = index === this.focusedItemIndex;
+
+    if (item.hasAttribute("data-item")) {
+      const button = item as HTMLButtonElement;
+      const disabled = button.disabled;
+      const shortcut = button.getAttribute("data-shortcut") || "";
+
+      return html`
+        <div
+          class="menu-item ${isFocused ? "focused" : ""}"
+          data-disabled="${disabled}"
+          @click="${() => !disabled && this.handleItemClick(item as HTMLElement)}"
+        >
+          <span>${button.textContent}</span>
+          ${shortcut ? html`<span class="menu-shortcut">${shortcut}</span>` : ""}
+        </div>
+      `;
+    }
+
+    if (item.hasAttribute("data-separator")) {
+      return html`<div class="menu-separator"></div>`;
+    }
+
+    if (item.hasAttribute("data-checkbox")) {
+      const label = item as HTMLLabelElement;
+      const checkbox = label.querySelector('input[type="checkbox"]') as HTMLInputElement;
+
+      return html`
+        <label
+          class="menu-checkbox ${isFocused ? "focused" : ""}"
+          @click="${(e: Event) => {
+            e.preventDefault();
+            this.handleItemClick(item as HTMLElement);
+          }}"
+        >
+          <rel-checkbox
+            .checked="${checkbox?.checked || false}"
+            @click="${(e: Event) => e.stopPropagation()}"
+            @rel-change="${(e: CustomEvent) => {
+              if (checkbox) checkbox.checked = e.detail.checked;
+              this.dispatchChangeEvent("checkbox", label.textContent?.replace(/\s+/g, " ").trim() || "", e.detail.checked);
+            }}"
+          ></rel-checkbox>
+          <span>${label.textContent?.replace(/\s+/g, " ").trim()}</span>
+        </label>
+      `;
+    }
+
+    if (item.hasAttribute("data-submenu")) {
+      const label = item.getAttribute("label") || item.textContent?.trim() || "";
+      const submenuId = item.getAttribute("data-submenu") || label;
+
+      return html`
+        <div
+          class="menu-item menu-submenu-trigger ${isFocused ? "focused" : ""}"
+          @click="${(e: Event) => this.openSubmenu(item as HTMLElement, e.currentTarget as HTMLElement)}"
+          @mouseenter="${(e: Event) => this.openSubmenu(item as HTMLElement, e.currentTarget as HTMLElement)}"
+        >
+          <span>${label}</span>
+          <rel-icon name="chevron-right"></rel-icon>
+        </div>
+        ${this.renderSubmenu(item as HTMLElement, submenuId)}
+      `;
+    }
+
+    if (item.hasAttribute("data-radio-group")) {
+      const radioButtons = Array.from(item.querySelectorAll("[data-radio]"));
+      const currentValue = item.getAttribute("value") || "";
+
+      return html`
+        ${radioButtons.map((radio) => {
+          const value = radio.getAttribute("data-radio") || radio.getAttribute("value") || "";
+          const isChecked = value === currentValue || radio.hasAttribute("data-checked");
+          const text = radio.textContent?.trim() || "";
+
+          return html`
+            <div
+              class="menu-radio-item ${isChecked ? "checked" : ""} ${isFocused ? "focused" : ""}"
+              @click="${() => this.handleItemClick(radio as HTMLElement)}"
+            >
+              <span>${text}</span>
+            </div>
+          `;
+        })}
+      `;
+    }
+
+    return null;
+  }
+
+  private renderSubmenu(submenuElement: HTMLElement, submenuId: string) {
+    const isOpen = this.openSubmenuElement === submenuElement;
+    const submenuItems = Array.from(submenuElement.children);
+
+    return html`
+      <div class="submenu-panel ${isOpen ? "open" : ""}" data-submenu-id="${submenuId}">
+        ${submenuItems.map((subItem) => {
+          if (subItem.hasAttribute("data-item")) {
+            const button = subItem as HTMLButtonElement;
+            return html`
+              <div
+                class="menu-item"
+                @click="${() => this.handleSubmenuItemClick(subItem as HTMLElement)}"
+              >
+                <span>${button.textContent}</span>
+              </div>
+            `;
+          }
+          return null;
+        })}
+      </div>
+    `;
+  }
+
+  private renderMenuPanel(menuState: MenuState, index: number) {
+    const isOpen = index === this.openMenuIndex;
+    const items = Array.from(menuState.menu.children);
+
+    return html`
+      <div
+        class="menubar-panel ${isOpen ? "open" : ""}"
+        data-menu-index="${index}"
+        tabindex="-1"
+        @keydown="${this.handlePanelKeyDown}"
+      >
+        ${items.map((item, idx) => this.renderMenuItem(item, idx))}
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="menubar-container">
+        ${this.menus.map(
+          (menuState, index) => html`
+            <button
+              class="menubar-trigger ${index === this.openMenuIndex ? "active" : ""}"
+              data-index="${index}"
+              @click="${(e: Event) => this.handleTriggerClick(index, e)}"
+              @mouseenter="${(e: Event) => this.handleTriggerMouseEnter(index, e)}"
+              @keydown="${this.handleTriggerKeyDown}"
+            >
+              ${menuState.menu.label}
+            </button>
+          `
+        )}
+      </div>
+      ${this.menus.map((menuState, index) => this.renderMenuPanel(menuState, index))}
+      <slot style="display: none;"></slot>
+    `;
+  }
+}