@kubex/zinc 1.1.76 → 1.1.77

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

@@ -683,6 +683,44 @@ describe('<zn-preview-frame>', () => {
       const stage = el.shadowRoot!.querySelector<HTMLDivElement>('.preview__stage')!;
       expect(stage.style.height).to.equal('max(1500px, 100%)');
     });
+
+    it('leaves an interactive frame at the panel height, so the embed scrolls itself', async () => {
+      const el = await fixture(html`
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          fill
+          interactive></zn-preview-frame>`);
+
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+      const panel = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+      const stage = el.shadowRoot!.querySelector<HTMLDivElement>('.preview__stage')!;
+
+      reportHeight(el, 1500);
+      await new Promise(resolve => setTimeout(resolve, 50));
+
+      expect(iframe.style.height).to.equal('100%');
+      expect(stage.style.height).to.equal('');
+      expect(panel.scrollHeight).to.equal(panel.clientHeight);
+    });
+
+    it('inflates the frame again when interactive is turned off', async () => {
+      const el = await fixture(html`
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          interactive></zn-preview-frame>`) as HTMLElement & {interactive: boolean};
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+
+      reportHeight(el, 1400);
+      await new Promise(resolve => setTimeout(resolve, 50));
+      expect(iframe.style.height).to.equal('480px');
+
+      el.interactive = false;
+      await waitUntil(() => iframe.style.height === '1400px', 'kept the reported height unused');
+    });
   });
 
   it('skips the config fetch when data-uri is empty', async () => {

package/src/components/theme-editor/theme-editor.component.ts

@@ -840,12 +840,14 @@ export default class ZnThemeEditor extends ZincElement {
                 <slot @slotchange="${this._onSlotChange}"></slot>
                 ${this._hasNestedGroups()
                   ? this._renderTabs(section => html`
-                      ${this._hasAssignedControls(section.name) ? html`
-                        <slot name="${section.name}" class="editor__section-slot" @slotchange="${this._onSlotChange}"></slot>` : nothing}
-                      ${this._renderGroups(section)}`)
+                    ${this._hasAssignedControls(section.name) ? html`
+                      <slot name="${section.name}" class="editor__section-slot"
+                            @slotchange="${this._onSlotChange}"></slot>` : nothing}
+                    ${this._renderGroups(section)}`)
                   : this.sectionLayout === 'tabs'
                     ? this._renderTabs(section => html`
-                        <slot name="${section.name}" class="editor__section-slot" @slotchange="${this._onSlotChange}"></slot>`)
+                      <slot name="${section.name}" class="editor__section-slot"
+                            @slotchange="${this._onSlotChange}"></slot>`)
                     : this._renderSections()}
               </div>
               ${this.hasSlotController.test('footer') ? html`
@@ -910,6 +912,7 @@ export default class ZnThemeEditor extends ZincElement {
               device="${this.device}"
               min-height="${this.minHeight}"
               fill
+              interactive
               backdrop="${this.standalone ? 'panel' : 'dots'}"
               exportparts="base:preview__base,stage:preview__stage,iframe:preview__iframe,error:preview__error"
               @zn-error="${this._onFrameError}"></zn-preview-frame>

package/src/components/theme-editor/theme-editor.scss

@@ -180,9 +180,11 @@
   margin-top: auto;
 }
 
-// The preview's scroll region: the toolbar above stays put.
+// Holds the preview below the toolbar, and never scrolls: the frame is its own
+// scroll region (interactive, the embed is), so a scroller here would only ever
+// be a second scrollbar beside that one.
 .editor__preview {
-  overflow: auto;
+  overflow: hidden;
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;

package/src/components/theme-editor/theme-editor.test.ts

@@ -729,6 +729,22 @@ describe('<zn-theme-editor>', () => {
       expect(controlsHeader).to.exist;
       expect(controlsHeader!.textContent?.trim()).to.equal('');
     });
+
+    it('gives the preview an interactive frame that scrolls itself, so the column never adds a second scrollbar', async () => {
+      const el = await fixture(FIXTURE);
+      await (el as HTMLElement & {updateComplete: Promise<unknown>}).updateComplete;
+
+      const preview = el.shadowRoot!.querySelector<HTMLElement>('[part="preview"]')!;
+      const frame = el.shadowRoot!.querySelector<HTMLElement>('zn-preview-frame')!;
+      await (frame as HTMLElement & {updateComplete: Promise<unknown>}).updateComplete;
+
+      expect(frame.hasAttribute('interactive')).to.equal(true);
+      expect(getComputedStyle(preview).overflowY).to.equal('hidden');
+      expect(preview.scrollHeight).to.equal(preview.clientHeight);
+
+      const iframe = frame.shadowRoot!.querySelector('iframe')!;
+      expect(getComputedStyle(iframe).pointerEvents).to.equal('auto');
+    });
   });
 
   describe('tabbed sections (section-layout="tabs")', () => {