First pass overlapping menu with source.

Author: Templarian

src/pg/menu/menu.css

@@ -5,16 +5,9 @@
 [part=items] {
   display: flex;
   flex-direction: column;
-  padding: var(--pg-menu-padding, 0);
+  padding: var(--pg-menu-padding, 0.25rem);
   border-width: var(--pg-menu-border-width, 0);
   border-style: solid;
-  border-radius: 0.25rem;
+  border-radius: 0.5rem;
+  background-color: var(--pg-menu-background-color, #1E1E1E);
 }
-
-[part=items] > *:first-child {
-  --pg-menu-item-border-radius-top: var(--pg-menu-border-radius, 0.25rem);
-}
-
-[part=items] > *:last-child {
-  --pg-menu-item-border-radius-bottom: var(--pg-menu-border-radius, 0.25rem);
-}

src/pg/menu/menu.ts

@@ -35,9 +35,28 @@ export default class PgMenu extends HTMLElement {
     });
   }
 
-  focus() {
-    const first = this.$items.firstChild as HTMLElement;
-    first?.focus();
+  focus(index) {
+    const item = this.$items.children[index] as HTMLElement;
+    item?.focus();
+  }
+
+  /**
+   * Calculate height of items + gap + padding
+   * @param startIndex Start index.
+   * @param endIndex End index.
+   */
+  getItemHeight(startIndex, endIndex): number {
+    const computedStyle = getComputedStyle(this.$items);
+    let height = parseInt(computedStyle.getPropertyValue('padding-top'), 10);
+    const total = this.$items.children.length;
+    if (startIndex > total || endIndex > total) {
+      throw new Error('startIndex or endIndex out of bounds');
+    }
+    for (let i = startIndex; i < endIndex; i++) {
+      const ele = this.$items.children[i] as any;
+      height += ele.getHeight();
+    }
+    return height;
   }
 
 }

src/pg/menuItem/menuItem.css

@@ -3,14 +3,25 @@
 }
 
 [part=label] {
+  font-family: var(--pg-font-family);
   text-align: var(--pg-menu-item-text-align, left);
-  background: var(--pg-menu-item-background, #FFFFFF);
+  background: var(--pg-menu-item-background, transparent);
   padding: var(--pg-menu-padding, 0.25rem 0.5rem);
-  border-color: #453C4F;
-  border-width: 1px;
+  border-color: transparent;
+  border-width: 0;
   border-style: solid;
-  border-top-left-radius: var(--pg-menu-item-border-radius-top, 0);
-  border-top-right-radius: var(--pg-menu-item-border-radius-top, 0);
-  border-bottom-left-radius: var(--pg-menu-item-border-radius-bottom, 0);
-  border-bottom-right-radius: var(--pg-menu-item-border-radius-bottom, 0);
+  border-top-left-radius: var(--pg-menu-item-border-radius-top, 0.25rem);
+  border-top-right-radius: var(--pg-menu-item-border-radius-top, 0.25rem);
+  border-bottom-left-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);
+  border-bottom-right-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);
+  color: var(--pg-menu-item-color, #FFFFFF);
+}
+
+[part=label]:hover {
+  background: #248BE5;
+  color: #FFFFFF;
+}
+
+[part=label]:active {
+  background: #2B9CFF;
 }

src/pg/menuItem/menuItem.ts

@@ -34,4 +34,8 @@ export default class PgMenuItem extends HTMLElement {
     this.$label.focus();
   }
 
+  getHeight(): number {
+    return this.$label.getBoundingClientRect().height;
+  }
+
 }

src/pg/overlayMenu/__examples__/basic/basic.ts

@@ -17,21 +17,28 @@ export default class XPgOverlayMenuBasic extends HTMLElement {
     this.$button.addEventListener('click', this.#handleClick.bind(this));
   }
 
+  #value = null;
+
   #menuOpen = false;
   async #handleClick() {
     if (this.#menuOpen) { return; }
+    const items = [{
+      label: 'Item 1',
+      value: 'item1'
+    },
+    {
+      label: 'Item 2',
+      value: 'item2'
+    }];
     this.#menuOpen = true;
     const result = await PgOverlayMenu.open({
       source: this.$button,
-      items: [{
-        label: 'Item 1',
-        value: 'item1'
-      },
-      {
-        label: 'Item 2',
-        value: 'item2'
-      }]
+      value: this.#value,
+      items
     });
+    if (result !== undefined) {
+      this.#value = result;
+    }
     this.$result.textContent = result;
     this.#menuOpen = false;
   }

src/pg/overlayMenu/overlayMenu.css

@@ -3,10 +3,8 @@
 }
 
 [part="overlay"] {
-  position-area: end center;
   margin: 0;
-  min-width: anchor-size();
   padding: 0;
   border: 0;
-  position-try-fallbacks: flip-block;
+  background: transparent;
 }

src/pg/overlayMenu/overlayMenu.ts

@@ -15,7 +15,8 @@ export default class PgOverlayMenu extends PgOverlay {
   @Part() $menu: PgMenu;
 
   @Prop() source: HTMLElement | null = null;
-  @Prop() items = [];
+  @Prop() items: any[] = [];
+  @Prop() value: any = null;
 
   render(changes) {
     if (changes.items) {
@@ -33,7 +34,23 @@ export default class PgOverlayMenu extends PgOverlay {
       });
     }
     this.$overlay.addEventListener('toggle', this.#toggle.bind(this));
-    this.$menu.focus();
+    // Position (replace with css once Firefox supports it)
+    const rect = this.source?.getBoundingClientRect();
+    let x = rect?.left ?? 0, y = rect?.top ?? 0;
+    const value = this.value === null || typeof this.value !== 'object'
+      ? this.value
+      : this.value.value;
+    // value is an item in the items list
+    const index = this.value === null
+      ? -1
+      : this.items.findIndex(x => x.value === value);
+    if (index !== -1) {
+      // Overlap item
+      y -= this.$menu.getItemHeight(0, index);
+    }
+    this.$overlay.style.translate = `${x}px ${y}px`;
+    // Focus
+    this.$menu.focus(index);
   }
 
   #toggle(e: ToggleEvent) {
@@ -46,6 +63,7 @@ export default class PgOverlayMenu extends PgOverlay {
   }
 
   #handleSelect(e: any) {
-    this.close(e.detail.index);
+    e.detail.item.index = e.detail.index;
+    this.close(e.detail.item);
   }
 }