@kubex/zinc 1.1.74 → 1.1.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.74",
+  "version": "1.1.76",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/content-block/content-block.component.ts

@@ -4,7 +4,6 @@ import {HasSlotController} from "../../internal/slot";
 import {html, unsafeCSS} from 'lit';
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, queryAssignedNodes, queryAsync, state} from 'lit/decorators.js';
-import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import ZincElement from "../../internal/zinc-element";
 import type {PropertyValues} from 'lit';
 import type ZnTile from "../tile";
@@ -280,7 +279,7 @@ export default class ContentBlock extends ZincElement {
                 'text-section--text': section.type === 'text',
                 'hidden': section.type === 'reply'
               })}>
-                ${section.lines.map((line) => html`${unsafeHTML(line)}<br>`)}
+                ${section.lines.map((line) => html`${line}<br>`)}
               </div>
             `)}
           </div>
@@ -375,7 +374,7 @@ export default class ContentBlock extends ZincElement {
     const textRows: TextRow[] = [];
 
     if (textContent) {
-      const text = textContent.innerText;
+      const text = textContent.innerText.replace(/<br\s*\/?>/gi, '\n');
       const rows = text.split('\n');
       let previousType: TextRow['type'] | null = null;
       let forceReply = false;

package/src/components/content-block/content-block.test.ts

@@ -1,10 +1,34 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture } from '@open-wc/testing';
+import type { LitElement } from 'lit';
+
+const textSection = async (body: string) => {
+  const el = await fixture<LitElement>(
+    `<zn-content-block><div slot="text">${body}</div></zn-content-block>`
+  );
+  await el.updateComplete;
+  return el.shadowRoot!.querySelector<HTMLDivElement>('.text-content')!;
+};
 
 describe('<zn-content-block>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <zn-content-block></zn-content-block> `);
+    const el = await fixture('<zn-content-block></zn-content-block>');
 
     expect(el).to.exist;
   });
+
+  it('should render markup in the text body as text', async () => {
+    const content = await textSection('&lt;img src="x" onerror="window.__xss = true"&gt; hello');
+
+    expect(content.querySelector('img')).to.be.null;
+    expect(content.textContent).to.contain('<img src="x" onerror="window.__xss = true"> hello');
+    expect((window as unknown as Record<string, unknown>).__xss).to.be.undefined;
+  });
+
+  it('should treat escaped breaks in the text body as line breaks', async () => {
+    const content = await textSection('line1&lt;br /&gt;line2');
+
+    expect(content.textContent).to.not.contain('<br');
+    expect(content.querySelectorAll('br').length).to.be.greaterThan(1);
+  });
 });

package/src/components/expanding-action/expanding-action.component.ts

@@ -325,8 +325,10 @@ export default class ZnExpandingAction extends ZincElement {
                    plain
                    notification="${this.count || nothing}">
         </zn-button>
-        <div id="content" class="expanding-action__content">
-          <slot></slot>
+        <div class="expanding-action__frame">
+          <div id="content" class="expanding-action__content">
+            <slot></slot>
+          </div>
         </div>
       </zn-dropdown>`
   }

package/src/components/expanding-action/expanding-action.scss

@@ -72,13 +72,18 @@
   height: 100%;
 }
 
-.expanding-action--drop .expanding-action__content {
+.expanding-action--drop .expanding-action__frame {
+  @include wc.scrollbars;
+
   --expanding-action-trigger-width: 36px;
 
   position: relative;
+  display: flex;
+  flex-direction: column;
   min-width: 300px;
   width: var(--expanding-action-basis, var(--zn-container-smp, 320px));
   max-width: 80vw;
+  max-height: var(--expanding-action-max-height, var(--auto-size-available-height, 80vh));
   background-color: rgb(var(--zn-panel));
   box-shadow: 0 8px 16px -6px rgba(33, 33, 33, 0.18);
   border: solid 1px rgb(var(--zn-border-color));
@@ -98,7 +103,14 @@
   }
 }
 
-:host([data-trigger-side="left"]) .expanding-action--drop .expanding-action__content {
+.expanding-action--drop .expanding-action__content {
+  flex: 1 1 auto;
+  min-height: 0; // Without this the flex item refuses to shrink below its content height
+  overflow-y: auto;
+  border-radius: inherit;
+}
+
+:host([data-trigger-side="left"]) .expanding-action--drop .expanding-action__frame {
   border-radius: 0 var(--zn-border-radius) var(--zn-border-radius) var(--zn-border-radius);
 
   &::before {

package/src/components/expanding-action/expanding-action.test.ts

@@ -1,5 +1,5 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 
 describe('<zn-expanding-action>', () => {
   it('should render a component', async () => {
@@ -7,4 +7,47 @@ describe('<zn-expanding-action>', () => {
 
     expect(el).to.exist;
   });
+
+  describe('drop panel overflow', () => {
+    const openPanel = async (el: HTMLElement) => {
+      const dropdown = el.shadowRoot!.querySelector('zn-dropdown') as HTMLElement & { show: () => Promise<unknown> };
+      await dropdown.show();
+      await waitUntil(() => el.hasAttribute('open'));
+      await new Promise(resolve => requestAnimationFrame(resolve));
+    };
+
+    const tallContent = html`
+      <zn-expanding-action method="drop" icon="note">
+        <div style="height: 4000px">tall</div>
+      </zn-expanding-action>`;
+
+    it('should bound the panel height so it cannot run off the screen', async () => {
+      const el = await fixture<HTMLElement>(tallContent);
+      await openPanel(el);
+
+      const frame = el.shadowRoot!.querySelector<HTMLElement>('.expanding-action__frame')!;
+      expect(frame).to.exist;
+      expect(frame.getBoundingClientRect().height).to.be.at.most(window.innerHeight);
+    });
+
+    it('should scroll overflowing content rather than clipping it', async () => {
+      const el = await fixture<HTMLElement>(tallContent);
+      await openPanel(el);
+
+      const content = el.shadowRoot!.querySelector<HTMLElement>('#content')!;
+      expect(getComputedStyle(content).overflowY).to.equal('auto');
+      expect(content.scrollHeight).to.be.greaterThan(content.clientHeight);
+    });
+
+    it('should honour an explicit max-height', async () => {
+      const el = await fixture<HTMLElement>(html`
+        <zn-expanding-action method="drop" icon="note" max-height="250">
+          <div style="height: 4000px">tall</div>
+        </zn-expanding-action>`);
+      await openPanel(el);
+
+      const frame = el.shadowRoot!.querySelector<HTMLElement>('.expanding-action__frame')!;
+      expect(Math.round(frame.getBoundingClientRect().height)).to.equal(250);
+    });
+  });
 });