@kubex/zinc 1.1.85 → 1.1.87

package/src/components/preview-frame/preview-frame.component.ts

@@ -62,6 +62,11 @@ export default class ZnPreviewFrame extends ZincElement {
    * refresh the preview. These are never intercepted: the shell submits them
    * (so its own response handling — alerts, refreshes — runs as normal) and the
    * preview re-fetches its config once the shell reports the save complete.
+   * Matched by delegation on the shell's bubbled `complete` event rather than
+   * by attaching to the forms themselves, so a save anywhere on the page
+   * refreshes the preview — including forms in a different DOM root, e.g. a
+   * page-level form saved while the preview sits inside a tab panel's shadow
+   * root (a page's Template select lives on one tab, its preview on another).
    * Set empty to disable.
    */
   @property({attribute: 'refresh-on'}) refreshOn = 'form';
@@ -141,8 +146,13 @@ export default class ZnPreviewFrame extends ZincElement {
   private _contentObserver: ResizeObserver | undefined;
 
   private readonly _watchedForms = new Set<HTMLFormElement>();
-  private readonly _refreshForms = new Set<HTMLFormElement>();
   private readonly _debounceTimers = new Map<HTMLFormElement, number>();
+  // 'complete' delegation targets: the document always, plus the component's
+  // own shadow root when it has one (a non-composed event never reaches the
+  // document). A composed event inside the shadow root hits both, so the
+  // handler dedupes by event object.
+  private _shellSaveRoots: EventTarget[] = [];
+  private _lastShellSave: Event | undefined;
 
   // Forms are siblings in light DOM and get replaced when other content
   // re-renders; re-resolve them whenever the surrounding DOM changes.
@@ -158,6 +168,8 @@ export default class ZnPreviewFrame extends ZincElement {
     window.addEventListener('message', this._onMessage);
     this._attachForms();
     const root = this.getRootNode();
+    this._shellSaveRoots = root instanceof ShadowRoot ? [document, root] : [document];
+    this._shellSaveRoots.forEach(target => target.addEventListener('complete', this._onShellSave));
     if (root instanceof Document) {
       this._formObserver.observe(root.body);
     } else if (root instanceof ShadowRoot) {
@@ -178,8 +190,8 @@ export default class ZnPreviewFrame extends ZincElement {
     this._contentObserver = undefined;
     this._watchedForms.forEach(form => this._detachForm(form));
     this._watchedForms.clear();
-    this._refreshForms.forEach(form => form.removeEventListener('complete', this._onShellSave));
-    this._refreshForms.clear();
+    this._shellSaveRoots.forEach(target => target.removeEventListener('complete', this._onShellSave));
+    this._shellSaveRoots = [];
   }
 
   private readonly _onMessage = (e: MessageEvent) => {
@@ -315,30 +327,18 @@ export default class ZnPreviewFrame extends ZincElement {
       form.addEventListener('zn-input', this._onChange);
       form.addEventListener('change', this._onChange);
     });
-
-    // Shell-saved forms: the shell fires 'complete' on the form it submitted.
-    const refreshMatched = new Set<HTMLFormElement>();
-    if (this.refreshOn) {
-      root.querySelectorAll(this.refreshOn).forEach(node => {
-        if (node instanceof HTMLFormElement && !matched.has(node)) refreshMatched.add(node);
-      });
-    }
-
-    this._refreshForms.forEach(form => {
-      if (!refreshMatched.has(form)) {
-        form.removeEventListener('complete', this._onShellSave);
-        this._refreshForms.delete(form);
-      }
-    });
-
-    refreshMatched.forEach(form => {
-      if (this._refreshForms.has(form)) return;
-      this._refreshForms.add(form);
-      form.addEventListener('complete', this._onShellSave);
-    });
   }
 
-  private readonly _onShellSave = () => {
+  // Shell-saved forms: the shell fires a bubbling 'complete' on the form it
+  // submitted. composedPath()[0] recovers the form when the event was
+  // retargeted crossing a shadow boundary on its way to the document.
+  private readonly _onShellSave = (e: Event) => {
+    if (e === this._lastShellSave) return;
+    this._lastShellSave = e;
+    if (!this.refreshOn) return;
+    const origin = e.composedPath()[0];
+    if (!(origin instanceof HTMLFormElement) || !origin.matches(this.refreshOn)) return;
+    if (this._watchedForms.has(origin)) return; // auto-saved forms refresh via _save
     void this._sendConfig();
   };
 

package/src/components/preview-frame/preview-frame.test.ts

@@ -248,6 +248,54 @@ describe('<zn-preview-frame>', () => {
     expect(posted[0]['type']).to.equal('hp-preview:config');
   });
 
+  // A uri tab panel puts the preview in the tabs component's shadow root while
+  // page-level forms (e.g. the page's Template select) stay in the document —
+  // a save out there must still refresh the preview.
+  it('refreshes on a shell save of a form outside the component\'s own root', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post"><input name="template" value="flow"></form>
+        <div id="host"></div>
+      </div>`);
+
+    const shadow = wrapper.querySelector('#host')!.attachShadow({mode: 'open'});
+    const el = document.createElement('zn-preview-frame');
+    el.setAttribute('src', 'about:blank');
+    el.setAttribute('frame-origin', 'https://site.example');
+    el.setAttribute('data-uri', '/payload');
+    shadow.appendChild(el);
+    await (el as HTMLElement & {updateComplete: Promise<boolean>}).updateComplete;
+
+    wrapper.querySelector('form')!.dispatchEvent(
+      new CustomEvent('complete', {bubbles: true, detail: {}}));
+
+    await waitUntil(() => fetchCalls.length === 1);
+    expect(fetchCalls[0].uri).to.equal('/payload');
+  });
+
+  it('refreshes once for a composed complete event inside its own shadow root', async () => {
+    const wrapper = await fixture(html`<div><div id="host"></div></div>`);
+
+    const shadow = wrapper.querySelector('#host')!.attachShadow({mode: 'open'});
+    const form = document.createElement('form');
+    form.setAttribute('action', '/save');
+    shadow.appendChild(form);
+    const el = document.createElement('zn-preview-frame');
+    el.setAttribute('src', 'about:blank');
+    el.setAttribute('frame-origin', 'https://site.example');
+    el.setAttribute('data-uri', '/payload');
+    shadow.appendChild(el);
+    await (el as HTMLElement & {updateComplete: Promise<boolean>}).updateComplete;
+
+    // the shell fires composed events, so this reaches both the shadow root
+    // and the document — it must trigger a single refresh
+    form.dispatchEvent(new CustomEvent('complete', {bubbles: true, composed: true, detail: {}}));
+
+    await waitUntil(() => fetchCalls.length === 1);
+    await new Promise(resolve => setTimeout(resolve, 50));
+    expect(fetchCalls.length).to.equal(1);
+  });
+
   it('does not intercept the submit of a refresh-on form', async () => {
     const wrapper = await fixture(html`
       <div>

package/src/components/slash-menu/slash-menu.component.ts

@@ -137,6 +137,21 @@ export default class ZnSlashMenu extends ZincElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.stopPositioner();
+    this.hidePanelPopover();
+  }
+
+  private showPanelPopover() {
+    const panel = this.panel;
+    if (typeof panel?.showPopover === 'function' && !panel.matches(':popover-open')) {
+      panel.showPopover();
+    }
+  }
+
+  private hidePanelPopover() {
+    const panel = this.panel;
+    if (typeof panel?.hidePopover === 'function' && panel.matches(':popover-open')) {
+      panel.hidePopover();
+    }
   }
 
   private startPositioner() {
@@ -156,6 +171,8 @@ export default class ZnSlashMenu extends ZincElement {
     const {anchor, panel} = this;
     if (!this.open || !anchor || !panel) return;
 
+    this.showPanelPopover();
+
     const {x, y} = await computePosition(anchor, panel, {
       placement: this.placement,
       strategy: 'fixed',
@@ -233,20 +250,20 @@ export default class ZnSlashMenu extends ZincElement {
   protected updated(changed: PropertyValues) {
     super.updated(changed);
 
-    // A new list, or a reopen, starts at the top rather than wherever the last one was scrolled to
-    if (changed.has('items') || (changed.has('open') && this.open)) {
-      this.scrollActiveIntoView();
-    }
-
     if (changed.has('open') || changed.has('anchor')) {
       if (this.open) {
         this.startPositioner();
       } else {
         this.stopPositioner();
+        this.hidePanelPopover();
       }
     }
 
     if (this.open) void this.position();
+
+    if (changed.has('items') || (changed.has('open') && this.open)) {
+      this.scrollActiveIntoView();
+    }
   }
 
   private renderItem(item: SlashMenuItem, index: number, showIcons: boolean) {
@@ -310,6 +327,7 @@ export default class ZnSlashMenu extends ZincElement {
       <div
         part="panel"
         class="slash-menu__panel"
+        popover="manual"
         role="listbox"
         aria-hidden=${this.open ? 'false' : 'true'}
         aria-label=${this.query ? `Matches for ${this.query}` : this.heading}>

package/src/components/slash-menu/slash-menu.scss

@@ -15,8 +15,8 @@
   display: flex;
   flex-direction: column;
   position: fixed;
-  top: 0;
-  left: 0;
+  inset: 0 auto auto 0;
+  margin: 0;
   width: var(--slash-menu-width);
   max-width: var(--auto-size-available-width, none);
   max-height: min(var(--slash-menu-max-height), var(--auto-size-available-height, 100vh));