@aquera/nile-elements 1.8.0 → 1.8.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-context-menu/nile-context-menu.ts

@@ -30,6 +30,7 @@ export interface NileContextMenuItemData {
   iconMethod?: 'fill' | 'stroke' | string;
   iconColor?: string;
   submenu?: NileContextMenuData[];
+  open?: boolean;
 }
 
 export interface NileContextMenuGroupData {
@@ -93,7 +94,9 @@ export class NileContextMenu extends NileElement {
   @property({ attribute: true, type: String, reflect: true }) skipOn = '';
  
   @property({ attribute: true, type: Number, reflect: true }) zIndex = 9999;
- 
+
+  @property({ attribute: true, type: Boolean, reflect: true }) open = false;
+
   @property({ attribute: false }) public items: NileContextMenuData[] = [];
   
   private get _isDataMode(): boolean {
@@ -102,9 +105,11 @@ export class NileContextMenu extends NileElement {
   @query('nile-floating-panel') private _floatingPanel?: HTMLElement;
  
   @state() private _items: NileContextMenuItem[] = [];
- 
+
   @state() private _open = false;
- 
+
+  private _pinned = false;
+
   protected _openContext: NileContextMenuOpenContext | null = null;
  
   protected _targetEl: Element | null = null;
@@ -132,6 +137,15 @@ export class NileContextMenu extends NileElement {
       this._relocateLightChildren();
     });
     this._lightObserver.observe(this, { childList: true });
+    // Restore a declaratively-opened menu after a disconnect/reconnect.
+    if (this.open && !this._open) {
+      this.updateComplete.then(() => {
+        if (this.isConnected && this.open && !this._open) {
+          this._pinned = true;
+          this._openAtTarget();
+        }
+      });
+    }
   }
 
   protected override updated(changed: PropertyValues): void {
@@ -154,8 +168,33 @@ export class NileContextMenu extends NileElement {
         this._wasDataMode = false;
       }
     }
+    if (changed.has('open')) {
+      if (this.open && !this._open) {
+        this._pinned = true;
+        this._openAtTarget();
+      } else if (!this.open && this._open) {
+        this.close('programmatic');
+      }
+    }
   }
 
+  /** Open anchored to the `for` target (used when the `open` property is set). */
+  private _openAtTarget(): void {
+    const rect = this._targetEl?.getBoundingClientRect();
+    this.openAt({
+      x: rect ? rect.left : 0,
+      y: rect ? rect.bottom : 0,
+      target: this._targetEl ?? undefined,
+    });
+  }
+
+  /** Re-anchor a pinned menu to its target after layout changes. */
+  private _onPinnedReposition = (): void => {
+    if (!this._open || !this._pinned || !this._targetEl) return;
+    const rect = this._targetEl.getBoundingClientRect();
+    this._positionProxyAt(rect.left, rect.bottom);
+  };
+
   private _resolveTarget(): void {
     const value = this.for?.trim();
     if (!value) {
@@ -196,7 +235,7 @@ export class NileContextMenu extends NileElement {
         if (isInteractive(me.target as Element | null)) return;
         me.preventDefault();
         if (this._open) return;
-        this.open({
+        this.openAt({
           x: me.clientX,
           y: me.clientY,
           target: (me.target as Element | null) ?? undefined,
@@ -219,7 +258,7 @@ export class NileContextMenu extends NileElement {
       const handler = (e: Event) => {
         const me = e as MouseEvent;
         me.preventDefault();
-        this.open({
+        this.openAt({
           x: me.clientX,
           y: me.clientY,
           target,
@@ -233,7 +272,7 @@ export class NileContextMenu extends NileElement {
     if (wantsClick) {
       const handler = (e: Event) => {
         const me = e as MouseEvent;
-        this.open({
+        this.openAt({
           x: me.clientX,
           y: me.clientY,
           target,
@@ -267,6 +306,7 @@ export class NileContextMenu extends NileElement {
     document.removeEventListener('pointerdown', this._onOutsidePointer, true);
     document.removeEventListener('keydown', this._onKeydown, true);
     window.removeEventListener('scroll', this._onScroll, true);
+    window.removeEventListener('resize', this._onPinnedReposition);
     this._proxyEl?.remove();
     this._proxyEl = undefined;
   }
@@ -312,8 +352,21 @@ export class NileContextMenu extends NileElement {
 
   private _positionProxyAt(x: number, y: number): void {
     if (!this._proxyEl) return;
+    if (this._pinned && this._targetEl) {
+      // menu attaches below it pinned menus (or flips cleanly above it)
+      const rect = this._targetEl.getBoundingClientRect();
+      this._proxyEl.style.position = 'absolute';
+      this._proxyEl.style.left = `${rect.left + window.scrollX}px`;
+      this._proxyEl.style.top = `${rect.top + window.scrollY}px`;
+      this._proxyEl.style.width = `${rect.width}px`;
+      this._proxyEl.style.height = `${rect.height}px`;
+      return;
+    }
+    this._proxyEl.style.position = 'fixed';
     this._proxyEl.style.left = `${x}px`;
     this._proxyEl.style.top = `${y}px`;
+    this._proxyEl.style.width = '0';
+    this._proxyEl.style.height = '0';
   }
 
   private _relocateLightChildren(): void {
@@ -352,6 +405,7 @@ export class NileContextMenu extends NileElement {
     if (data.id) item.id = data.id;
     item.value = data.value ?? data.id ?? '';
     if (data.disabled) item.disabled = true;
+    if (data.open) item.open = true;
     if (data.icon) {
       const glyph = document.createElement('nile-glyph');
       glyph.setAttribute('slot', 'icon');
@@ -401,7 +455,7 @@ export class NileContextMenu extends NileElement {
     return this._open;
   }
 
-  public open(options: NileContextMenuOpenOptions): void {
+  public openAt(options: NileContextMenuOpenOptions): void {
     if (this._open) return;
     for (const other of NileContextMenu._openInstances) {
       if (other !== this) other.close('programmatic');
@@ -416,11 +470,14 @@ export class NileContextMenu extends NileElement {
     this._ensureProxy();
     this._positionProxyAt(options.x, options.y);
     this._open = true;
+    this.open = true;
     NileContextMenu._openInstances.add(this);
     document.addEventListener('pointerdown', this._onOutsidePointer, true);
     document.addEventListener('keydown', this._onKeydown, true);
+    if (this._pinned) window.addEventListener('resize', this._onPinnedReposition);
     requestAnimationFrame(() => {
       if (this._open) window.addEventListener('scroll', this._onScroll, true);
+      requestAnimationFrame(() => this._openPinnedSubmenus());
     });
     this.emit('nile-change', { type: 'open', ...this._openContext });
   }
@@ -428,6 +485,8 @@ export class NileContextMenu extends NileElement {
   public close(reason: NileContextMenuCloseReason = 'programmatic'): void {
     if (!this._open) return;
     this._open = false;
+    this.open = false;
+    this._pinned = false;
     this._openContext = null;
     NileContextMenu._openInstances.delete(this);
     const subs = this._menuContainerRef?.querySelectorAll(SUBMENU_TAG);
@@ -435,6 +494,7 @@ export class NileContextMenu extends NileElement {
     document.removeEventListener('pointerdown', this._onOutsidePointer, true);
     document.removeEventListener('keydown', this._onKeydown, true);
     window.removeEventListener('scroll', this._onScroll, true);
+    window.removeEventListener('resize', this._onPinnedReposition);
     const active = document.activeElement;
     const focusInMenu =
       active === this ||
@@ -533,7 +593,8 @@ export class NileContextMenu extends NileElement {
         const sub = this._findSubmenuOwning(container);
         if (!sub) return;
         e.preventDefault();
-        sub.closeSubmenu?.();
+        // Pinned submenus (parent item has `open`) stay open; just move focus.
+        if (!sub.parentItem?.open) sub.closeSubmenu?.();
         sub.parentItem?.focus();
         return;
       }
@@ -578,6 +639,10 @@ export class NileContextMenu extends NileElement {
 
   private _onScroll = (e: Event): void => {
     if (!this._open) return;
+    if (this._pinned) {
+      this._onPinnedReposition();
+      return;
+    }
     const path = e.composedPath();
     // Scroll inside the root menu container?
     if (this._menuContainerRef && path.includes(this._menuContainerRef)) return;
@@ -615,8 +680,21 @@ export class NileContextMenu extends NileElement {
 
   private _onPanelShown = (e: Event): void => {
     e.stopPropagation();
+    this._openPinnedSubmenus();
   };
 
+  /** Open the submenu of every top-level item carrying the `open` attribute. */
+  private _openPinnedSubmenus(): void {
+    if (!this._open || !this._menuContainerRef) return;
+    for (const item of this._items) {
+      if (!item.open || item.disabled) continue;
+      const sub = item.querySelector(`:scope > ${SUBMENU_TAG}`) as
+        | (HTMLElement & { openSubmenu?: () => void })
+        | null;
+      sub?.openSubmenu?.();
+    }
+  }
+
   private _onMenuMouseOver = (e: MouseEvent): void => {
     const item = e
       .composedPath()

package/src/nile-context-menu-item/nile-context-menu-item.ts

@@ -41,6 +41,8 @@ export class NileContextMenuItem extends NileElement {
 
   @property({ attribute: true, type: Boolean, reflect: true }) disabled = false;
 
+  @property({ attribute: true, type: Boolean, reflect: true }) open = false;
+
   public onSelect?: NileContextMenuItemSelectHandler;
 
   @state() private _hasSubmenu = false;
@@ -95,7 +97,7 @@ export class NileContextMenuItem extends NileElement {
         <span part="label" class="label"><slot @slotchange=${this._onSlotChange}></slot></span>
         ${this._hasSubmenu
           ? html`<span part="chevron" class="chevron" aria-hidden="true">
-              <nile-glyph name="ng-chevron-right" size="16"></nile-glyph>
+              <nile-glyph name="ng-chevron-right" size="16" method="stroke"></nile-glyph>
             </span>`
           : ''}
       </div>

package/src/nile-context-submenu/nile-context-submenu.ts

@@ -47,6 +47,11 @@ export class NileContextSubmenu extends NileElement {
   private _openTimer?: number;
   private _closeTimer?: number;
   private _setupDone = false;
+  private _parentObserver?: MutationObserver;
+  private _repositionQueued = false;
+  private get _pinnedOpen(): boolean {
+    return !!(this._parentItem?.open && !this._parentItem.disabled);
+  }
 
   public override connectedCallback(): void {
     super.connectedCallback();
@@ -59,10 +64,27 @@ export class NileContextSubmenu extends NileElement {
       this._parentItem.addEventListener('mouseenter', this._onParentEnter);
       this._parentItem.addEventListener('mouseleave', this._onParentLeave);
       this._parentItem.addEventListener('click', this._onParentClick, true);
+      // Open/close the submenu when the parent item's `open` attribute changes.
+      this._parentObserver = new MutationObserver(() => {
+        if (this._pinnedOpen) {
+          if (this._isParentVisible()) this.openSubmenu();
+        } else if (this._open) {
+          this.closeSubmenu();
+        }
+      });
+      this._parentObserver.observe(this._parentItem, {
+        attributes: true,
+        attributeFilter: ['open'],
+      });
     }
     this._ensureBodyPanel();
   }
 
+  private _isParentVisible(): boolean {
+    const rect = this._parentItem?.getBoundingClientRect();
+    return !!rect && rect.width > 0 && rect.height > 0;
+  }
+
   private _ensureProxy(): void {
     if (this._proxyEl) return;
     const el = document.createElement('div');
@@ -77,8 +99,16 @@ export class NileContextSubmenu extends NileElement {
   private _syncProxyToParent(): void {
     if (!this._proxyEl || !this._parentItem) return;
     const rect = this._parentItem.getBoundingClientRect();
-    this._proxyEl.style.left = `${rect.left}px`;
-    this._proxyEl.style.top = `${rect.top}px`;
+    if (this._pinnedOpen) {
+      // Pinned submenus anchor in document coordinates.
+      this._proxyEl.style.position = 'absolute';
+      this._proxyEl.style.left = `${rect.left + window.scrollX}px`;
+      this._proxyEl.style.top = `${rect.top + window.scrollY}px`;
+    } else {
+      this._proxyEl.style.position = 'fixed';
+      this._proxyEl.style.left = `${rect.left}px`;
+      this._proxyEl.style.top = `${rect.top}px`;
+    }
     this._proxyEl.style.width = `${rect.width}px`;
     this._proxyEl.style.height = `${rect.height}px`;
   }
@@ -90,6 +120,8 @@ export class NileContextSubmenu extends NileElement {
       this._parentItem.removeEventListener('mouseleave', this._onParentLeave);
       this._parentItem.removeEventListener('click', this._onParentClick, true);
     }
+    this._parentObserver?.disconnect();
+    this._parentObserver = undefined;
     this._clearTimers();
     if (this._open) this.closeSubmenu();
     this._teardownBodyArtifacts();
@@ -172,6 +204,7 @@ export class NileContextSubmenu extends NileElement {
 
   private _onParentLeave = (): void => {
     if (this._openTimer != null) { clearTimeout(this._openTimer); this._openTimer = undefined; }
+    if (this._pinnedOpen) return;
     if (this._open) {
       this._closeTimer = window.setTimeout(() => this.closeSubmenu(), HOVER_CLOSE_DELAY);
     }
@@ -181,15 +214,31 @@ export class NileContextSubmenu extends NileElement {
     e.stopPropagation();
     if (this._parentItem?.disabled) return;
     this._clearTimers();
-    if (this._open) this.closeSubmenu();
-    else this.openSubmenu();
+    if (this._open) {
+      if (!this._pinnedOpen) this.closeSubmenu();
+    } else {
+      this.openSubmenu();
+    }
   };
 
   private _onPanelEnter = (): void => {
     this._clearTimers();
   };
 
+  //Re-anchor to the parent item after scroll/resize
+  private _onReposition = (): void => {
+    if (this._repositionQueued || !this._open) return;
+    this._repositionQueued = true;
+    requestAnimationFrame(() => {
+      this._repositionQueued = false;
+      if (!this._open) return;
+      this._syncProxyToParent();
+      this._floatingPanelEl?.reposition();
+    });
+  };
+
   private _onPanelLeave = (): void => {
+    if (this._pinnedOpen) return;
     if (this._open) {
       this._closeTimer = window.setTimeout(() => {
         const hasOpenDescendant = NileContextSubmenu.openStack.some(
@@ -209,11 +258,50 @@ export class NileContextSubmenu extends NileElement {
     this._ensureBodyPanel();
     this._syncProxyToParent();
     this._open = true;
-    if (this._floatingPanelEl) this._floatingPanelEl.open = true;
+    if (this._floatingPanelEl) {
+      // open pinned descendants only once this panel is fully shown
+      this._floatingPanelEl.addEventListener(
+        'nile-after-show',
+        () => {
+          if (this._open) this._openPinnedDescendants();
+        },
+        { once: true },
+      );
+      this._floatingPanelEl.open = true;
+    }
     NileContextSubmenu.openStack.push(this);
+    window.addEventListener('scroll', this._onReposition, true);
+    window.addEventListener('resize', this._onReposition);
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (this._open) this._openPinnedDescendants();
+    }));
     this._parentItem?.setSubmenuExpanded?.(true);
   }
 
+  /** Open the submenu of every direct child item carrying the `open` attribute. */
+  private _openPinnedDescendants(): void {
+    if (!this._menuContainerRef) return;
+    const items = Array.from(
+      this._menuContainerRef.querySelectorAll(ITEM_TAG)
+    ) as NileContextMenuItem[];
+    for (const item of items) {
+      if (!this._isDirectChildItem(item)) continue;
+      if (!item.open || item.disabled) continue;
+      const sub = item.querySelector(`:scope > ${SUBMENU_TAG}`) as NileContextSubmenu | null;
+      sub?.openSubmenu();
+    }
+  }
+
+  /** True if `item` sits at this submenu's own level (not inside a deeper submenu). */
+  private _isDirectChildItem(item: Element): boolean {
+    let cur: Element | null = item.parentElement;
+    while (cur && cur !== this._menuContainerRef) {
+      if (cur.tagName.toLowerCase() === SUBMENU_TAG) return false;
+      cur = cur.parentElement;
+    }
+    return true;
+  }
+
   public closeSubmenu(): void {
     if (!this._open) return;
     for (const sub of [...NileContextSubmenu.openStack]) {
@@ -223,6 +311,8 @@ export class NileContextSubmenu extends NileElement {
     }
     this._open = false;
     if (this._floatingPanelEl) this._floatingPanelEl.open = false;
+    window.removeEventListener('scroll', this._onReposition, true);
+    window.removeEventListener('resize', this._onReposition);
     NileContextSubmenu.openStack = NileContextSubmenu.openStack.filter(s => s !== this);
     this._clearTimers();
     this._parentItem?.setSubmenuExpanded?.(false);
@@ -248,13 +338,7 @@ export class NileContextSubmenu extends NileElement {
       this._menuContainerRef.querySelectorAll(ITEM_TAG)
     ) as NileContextMenuItem[];
     for (const item of items) {
-      let cur: Element | null = item.parentElement;
-      let inDeeperSub = false;
-      while (cur && cur !== this._menuContainerRef) {
-        if (cur.tagName.toLowerCase() === SUBMENU_TAG) { inDeeperSub = true; break; }
-        cur = cur.parentElement;
-      }
-      if (inDeeperSub) continue;
+      if (!this._isDirectChildItem(item)) continue;
       if (!item.disabled) { item.focus(); return; }
     }
   }
@@ -263,6 +347,7 @@ export class NileContextSubmenu extends NileElement {
     const myLevel = this._parentLevel();
     for (const sub of [...NileContextSubmenu.openStack]) {
       if (sub === this) continue;
+      if (sub._pinnedOpen) continue;
       if (sub._parentLevel() === myLevel) sub.closeSubmenu();
     }
   }

package/src/nile-floating-panel/nile-floating-panel.ts

@@ -303,6 +303,11 @@ export class NileFloatingPanel extends NileElement {
     this._attachTippy();
   }
 
+  /** Recomputes the panel position against its anchor (e.g. after the anchor moved). */
+  public reposition(): void {
+    this.tippyInstance?.popperInstance?.update();
+  }
+
   /** Returns the current resolved placement from Tippy/Popper. */
   public getCurrentPlacement(): string {
     const popper = this.tippyInstance?.popper;