@kubex/zinc 1.1.106 → 1.1.108

package/package.json

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

package/src/components/data-select/data-select.component.ts

@@ -9,6 +9,7 @@ import {
   usStateDataProvider,
 } from "./providers/provider";
 import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
+import {defaultValue} from "../../internal/default-value";
 import {FormControlController} from "../../internal/form";
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, query} from 'lit/decorators.js';
@@ -72,6 +73,9 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
     }
   }) value: string | string[] = '';
 
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  @defaultValue() defaultValue: string | string[] = '';
+
   /** The provider of the select. */
   @property() provider: 'color' | 'currency' | 'country' | 'phone' | 'us-state';
 

package/src/components/dialog/dialog.scss

@@ -13,10 +13,14 @@
 }
 
 .dialog-container {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
   border-radius: var(--zn-border-radius);
   background-color: var(--zn-panel-background-color);
   margin: 2px;
-  overflow: auto;
+  overflow: hidden;
 }
 
 .dialog__header + .dialog__body {
@@ -29,13 +33,17 @@
   width: calc(var(--width) + 1px);
   overflow: hidden;
   max-width: calc(100% - var(--zn-spacing-2x-large));
-  max-height: calc(100% - var(--zn-spacing-2x-large));
+  max-height: calc(100% - 20vh);
   background-color: var(--zn-panel-background-color);
   border-radius: var(--zn-border-radius);
   box-shadow: var(--zn-shadow-x-large);
   padding: 0;
   margin: 10vh auto;
 
+  &[open] {
+    display: flex;
+  }
+
   &__header {
     flex: 0 0 auto;
     display: flex;
@@ -69,6 +77,7 @@
 
   &__body {
     flex: 1 1 auto;
+    min-height: 0;
     display: block;
     padding: var(--body-spacing);
     overflow: auto;

package/src/components/linked-select/linked-select.component.ts

@@ -1,4 +1,5 @@
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {defaultValue} from "../../internal/default-value";
 import {FormControlController} from "../../internal/form";
 import {property, query} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
@@ -40,6 +41,9 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
   @property() name: string = "";
   @property() value: string;
 
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  @defaultValue() defaultValue: string = '';
+
   @property({type: Boolean, reflect: true}) checked = false;
   @property({type: Array}) options: linkedSelectOptions;
   @property({attribute: 'linked-select'}) linkedSelect: string = "";

package/src/components/page/page.test.ts

@@ -499,6 +499,33 @@ describe('<zn-page>', () => {
     expect(navItems[0].getAttribute('tab')).to.equal('');
   });
 
+  it('opens the next tab at the top of the content', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Page Title" style="height: 200px;">
+        <zn-tab caption="Overview">
+          <div style="height: 2000px;">Overview Content</div>
+        </zn-tab>
+        <zn-tab caption="Details">
+          <div style="height: 2000px;">Details Content</div>
+        </zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(60);
+
+    const content = el.shadowRoot!.querySelector<HTMLElement>('#content')!;
+    content.scrollTop = 600;
+    expect(content.scrollTop, 'the content never scrolled').to.be.greaterThan(0);
+
+    // The page's first tab is registered under an empty id, so leaving it is the
+    // case a "did the tab change?" test on the id alone gets wrong.
+    const navbar = el.shadowRoot!.querySelector('zn-navbar')!;
+    navbar.shadowRoot!.querySelectorAll<HTMLElement>('li:not(.more)')[1].click();
+    await aTimeout(80);
+
+    expect(el.getAttribute('active')).to.equal('details');
+    expect(content.scrollTop).to.equal(0);
+  });
+
   it('shows a header border when scrolled without visible navigation', async () => {
     const el = await fixture<ZnPage>(html`
       <zn-page caption="Page Title" style="height: 120px;">

package/src/components/priority-list/priority-list.component.ts

@@ -19,6 +19,14 @@ export interface PriorityItem {
   priority: number;
 }
 
+function safeParse(value: string): unknown {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return undefined;
+  }
+}
+
 /**
  * @summary A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop
  *   and keyboard reordering. Priority values are submitted as form data via hidden inputs.
@@ -68,16 +76,14 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
       return JSON.stringify(control.getPriorityMap());
     },
     defaultValue: (control: ZnPriorityList) => control.defaultValue,
-    setValue: (control: ZnPriorityList, value: string) => {
-      if (value) {
-        try {
-          const parsed: unknown = JSON.parse(value);
-          if (Array.isArray(parsed) && parsed.every((item: unknown): item is string => typeof item === 'string')) {
-            control.value = parsed as string[];
-          }
-        } catch {
-          // ignore parse errors
-        }
+    // A form reset passes defaultValue straight back in, so this has to accept the
+    // key array as well as the serialised value other callers set.
+    setValue: (control: ZnPriorityList, value: string | string[]) => {
+      if (!value || (Array.isArray(value) && value.length === 0)) return;
+
+      const keys: unknown = Array.isArray(value) ? value : safeParse(value);
+      if (Array.isArray(keys) && keys.every((item: unknown): item is string => typeof item === 'string')) {
+        control.value = keys as string[];
       }
     },
   });
@@ -199,9 +205,8 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
       } else {
         this._value = domKeys;
       }
-
-      this.defaultValue = [...this._value];
     }
+    this.defaultValue = [...this._value];
     this._assignSlotNames();
     this._syncHiddenInputs();
     this.requestUpdate();

package/src/components/priority-list/priority-list.test.ts

@@ -84,6 +84,49 @@ describe('<zn-priority-list>', () => {
     expect(hiddenInputs[1].value).to.equal('2');
   });
 
+  it('should restore the original order when its form is reset', async () => {
+    const form = await fixture(html`
+      <form>
+        <zn-priority-list name="order">
+          <div value="alpha">Alpha</div>
+          <div value="beta">Beta</div>
+          <div value="gamma">Gamma</div>
+        </zn-priority-list>
+      </form>
+    `) as HTMLFormElement;
+
+    const el = form.querySelector('zn-priority-list') as any;
+    await el.updateComplete;
+    expect(el.value).to.deep.equal(['alpha', 'beta', 'gamma']);
+
+    el.value = ['gamma', 'alpha', 'beta'];
+    await el.updateComplete;
+    expect(el.value).to.deep.equal(['gamma', 'alpha', 'beta']);
+
+    form.reset();
+    await el.updateComplete;
+    expect(el.value).to.deep.equal(['alpha', 'beta', 'gamma']);
+  });
+
+  it('should not empty a populated list on reset', async () => {
+    const form = await fixture(html`
+      <form>
+        <zn-priority-list name="order">
+          <div value="alpha">Alpha</div>
+          <div value="beta">Beta</div>
+        </zn-priority-list>
+      </form>
+    `) as HTMLFormElement;
+
+    const el = form.querySelector('zn-priority-list') as any;
+    await el.updateComplete;
+
+    el.defaultValue = [];
+    form.reset();
+    await el.updateComplete;
+    expect(el.value).to.deep.equal(['alpha', 'beta']);
+  });
+
   it('should have listbox role on the list container', async () => {
     const el = await fixture(html`
       <zn-priority-list label="My List">

package/src/components/rating/rating.component.ts

@@ -1,5 +1,6 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {defaultValue} from "../../internal/default-value";
 import {FormControlController, validValidityState} from "../../internal/form";
 import {HasSlotController} from "../../internal/slot";
 import {property, query, state} from 'lit/decorators.js';
@@ -61,6 +62,9 @@ export default class ZnRating extends ZincElement implements ZincFormControl {
 
   @property({type: Number}) value: number = 0;
 
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  @defaultValue() defaultValue: number = 0;
+
   @property({type: Number}) max: number = 5;
 
   @property({type: Number}) precision: number = 1;

package/src/components/tabs/tabs.component.ts

@@ -9,6 +9,7 @@ import {
   replaceHistoryTab,
   TAB_STORE_PREFIX
 } from './tabs-navigation';
+import {getScrolledAncestors, scrollToTop} from "../../internal/scroll";
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {md5} from "../../utilities/md5";
@@ -548,8 +549,12 @@ export default class ZnTabs extends ZincElement {
       this._current = tabName;
     };
 
+    const scrolled = sameTab ? [] : getScrolledAncestors(this._panel);
+
     updateTabs();
 
+    scrollToTop(scrolled);
+
     return true;
   }
 

package/src/components/tabs/tabs.test.ts

@@ -50,6 +50,70 @@ describe('<zn-tabs>', () => {
     expect(selectedPagePanel.id).to.equal('');
   });
 
+  describe('scroll position', () => {
+    const panels = html`
+      <zn-navbar slot="top">
+        <li tab="first">First</li>
+        <li tab="second">Second</li>
+      </zn-navbar>
+      <div id="first">
+        <div style="height: 2000px;">First panel</div>
+      </div>
+      <div id="second">
+        <div style="height: 2000px;">Second panel</div>
+      </div>
+    `;
+
+    const openSecondTab = async (el: ZnTabs) => {
+      el.querySelector('zn-navbar')!.querySelectorAll<HTMLElement>('li')[1].click();
+      await aTimeout(40);
+      expect(el.getAttribute('active')).to.equal('second');
+    };
+
+    it('opens a newly selected tab at the top of its own scroller', async () => {
+      // zn-tabs is display:contents, so #content only has a height to overflow
+      // when an ancestor gives it one.
+      const wrapper = await fixture<HTMLElement>(html`
+        <div style="height: 200px; display: flex; flex-direction: column;">
+          <zn-tabs active="first">${panels}</zn-tabs>
+        </div>
+      `);
+      const el = wrapper.querySelector<ZnTabs>('zn-tabs')!;
+      await aTimeout(40);
+
+      const content = el.shadowRoot!.querySelector('#content')!;
+      content.scrollTop = 500;
+      expect(content.scrollTop, 'the content never scrolled').to.be.greaterThan(0);
+
+      await openSecondTab(el);
+
+      expect(content.scrollTop).to.equal(0);
+    });
+
+    it('opens a newly selected tab at the top of an enclosing scroller', async () => {
+      // Unconstrained, the panels grow instead of scrolling and something further
+      // out - an app shell, an outer page - is what the reader has scrolled.
+      const wrapper = await fixture<HTMLElement>(html`
+        <div style="height: 200px; overflow: auto;">
+          <div>
+            <zn-tabs active="first">${panels}</zn-tabs>
+          </div>
+        </div>
+      `);
+      const el = wrapper.querySelector<ZnTabs>('zn-tabs')!;
+      await aTimeout(40);
+
+      const content = el.shadowRoot!.querySelector('#content')!;
+      wrapper.scrollTop = 500;
+      expect(wrapper.scrollTop, 'the enclosing scroller never scrolled').to.be.greaterThan(0);
+      expect(content.scrollTop, 'the panels scrolled themselves').to.equal(0);
+
+      await openSecondTab(el);
+
+      expect(wrapper.scrollTop).to.equal(0);
+    });
+  });
+
   describe('selection persistence', () => {
     const storeKey = 'tabs-navigation-test';
     const originalHref = window.location.href;

package/src/internal/scroll.ts

@@ -67,3 +67,28 @@ export function scrollIntoView(
     }
   }
 }
+
+/**
+ * Every ancestor of `element`, itself included, that is scrolled away from the top. Shadow
+ * boundaries are crossed, so a host's own scroller and the app's outer one are both found.
+ */
+export function getScrolledAncestors(element: Element | null | undefined): Element[] {
+  const scrolled: Element[] = [];
+  let node: Node | null | undefined = element;
+
+  while (node) {
+    if (node instanceof Element && node.scrollTop > 0) {
+      scrolled.push(node);
+    }
+    node = node.parentNode instanceof ShadowRoot ? node.parentNode.host : node.parentNode;
+  }
+
+  return scrolled;
+}
+
+/** Returns containers to the top. */
+export function scrollToTop(containers: Iterable<Element>, behavior: ScrollBehavior = 'auto') {
+  for (const container of containers) {
+    container.scrollTo({ top: 0, behavior });
+  }
+}