@kubex/zinc 1.1.108 → 1.1.110

package/docs/pages/components/opt-group.md

@@ -47,8 +47,10 @@ Use the `disabled` attribute to disable all options within a group. Disabled gro
 
 When used inside a `<zn-select>` with the `search` attribute, group headers automatically hide when all of their child options are filtered out by the search query.
 
+The `label` is matched by the search too: a query matching a group label keeps every option in that group visible, so searching `europe` returns the whole European group even though no option label contains the word. Group-label and option-label matches combine, so `japan` still narrows to the single option within Asia.
+
 ```html:preview
-<zn-select label="Select a country" search placeholder="Type to search...">
+<zn-select label="Select a country" search placeholder="Try 'europe' or 'japan'...">
   <zn-opt-group label="North America">
     <zn-option value="us">United States</zn-option>
     <zn-option value="ca">Canada</zn-option>

package/docs/pages/components/select.md

@@ -148,7 +148,7 @@ Use the `clearable` attribute to make the control clearable. The clear button on
 
 ### Search
 
-Use the `search` attribute to allow users to type into the select to filter the list of options. When the dropdown opens, the input becomes editable and options are filtered as you type using case-insensitive substring matching against labels and values.
+Use the `search` attribute to allow users to type into the select to filter the list of options. When the dropdown opens, the input becomes editable and options are filtered as you type using case-insensitive substring matching against labels and values. Group labels are matched too — see [Grouping with Search](#grouping-with-search).
 
 ```html:preview
 <zn-select label="Search for a country" search placeholder="Type to search...">
@@ -642,8 +642,10 @@ Use `<zn-opt-group>` to group options under labeled headers, similar to `<optgro
 
 When `search` is enabled, group headers automatically hide when all of their child options are filtered out.
 
+Group labels are searchable as well: typing text that matches a `<zn-opt-group>` label keeps every option in that group visible, so searching `europe` returns the whole European group even though no option label contains the word.
+
 ```html:preview
-<zn-select label="Select a country" search placeholder="Type to search...">
+<zn-select label="Select a country" search placeholder="Try 'europe' or 'japan'...">
   <zn-opt-group label="North America">
     <zn-option value="us">United States</zn-option>
     <zn-option value="ca">Canada</zn-option>

package/package.json

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

package/src/components/opt-group/opt-group.component.ts

@@ -1,4 +1,4 @@
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, nothing, unsafeCSS} from 'lit';
 import {property} from 'lit/decorators.js';
 import {watch} from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
@@ -50,9 +50,9 @@ export default class ZnOptGroup extends ZincElement {
   render() {
     return html`
       <div part="base" class="opt-group">
-        <div part="label" class="opt-group__label" aria-hidden="true">
-          ${this.label}
-        </div>
+        ${this.label
+          ? html`<div part="label" class="opt-group__label" aria-hidden="true">${this.label}</div>`
+          : nothing}
         <div class="opt-group__options" role="none">
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>

package/src/components/opt-group/opt-group.scss

@@ -8,30 +8,29 @@
   display: none !important;
 }
 
+:host(:not(:first-child)) {
+  border-block-start: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
+  margin-block-start: var(--zn-spacing-2x-small);
+}
+
 .opt-group__label {
   font-family: var(--zn-font-sans);
   font-size: var(--zn-font-size-x-small);
   font-weight: var(--zn-font-weight-semibold);
   line-height: var(--zn-line-height-normal);
-  letter-spacing: var(--zn-letter-spacing-normal);
-  color: var(--zn-color-neutral-500);
+  letter-spacing: var(--zn-letter-spacing-loose);
   text-transform: uppercase;
-  padding-block: var(--zn-spacing-2x-small);
-  padding-inline: var(--zn-spacing-large);
+  color: var(--zn-color-neutral-600);
+  padding-block: var(--zn-spacing-x-small) var(--zn-spacing-2x-small);
+  padding-inline: var(--zn-spacing-small);
   user-select: none;
   -webkit-user-select: none;
 }
 
-:host(:not(:first-of-type)) .opt-group__label {
-  border-block-start: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
-  margin-block-start: var(--zn-spacing-x-small);
-  padding-block-start: var(--zn-spacing-small);
-}
-
 .opt-group__options {
   display: block;
 }
 
-:host([disabled]) {
+:host([disabled]) .opt-group__label {
   opacity: 0.5;
 }

package/src/components/popup/popup.component.ts

@@ -268,6 +268,7 @@ export default class ZnPopup extends ZincElement {
     if (!this.anchorEl) {
       return;
     }
+    this.cleanup?.();
     this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
       this.reposition();
     });
@@ -406,7 +407,9 @@ export default class ZnPopup extends ZincElement {
 
       if (!this.popup?.isConnected) return;
 
-      this.popup.showPopover();
+      if (!this.popup.matches(':popover-open')) {
+        this.popup.showPopover();
+      }
 
       if (this.arrow) {
         const arrowX = middlewareData.arrow!.x;
@@ -537,7 +540,7 @@ export default class ZnPopup extends ZincElement {
       <div
         id="popup"
         part="popup"
-        popover
+        popover="manual"
         class="${classMap({
           popup: true,
           'popup--active': this.active,

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

@@ -832,10 +832,21 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       return;
     }
 
+    // A group whose label matches keeps its whole set of options, so searching "citrus" surfaces the group.
+    const matchedGroups = new Set(
+      this.getAllOptGroups().filter(group => group.label.toLowerCase().includes(searchQuery))
+    );
+
     allOptions.forEach(option => {
       // Don't un-hide selected options that are only in the DOM for value preservation
       if (option.selected && option.hidden) return;
 
+      const group = option.closest<ZnOptGroup>('zn-opt-group');
+      if (group && matchedGroups.has(group)) {
+        option.hidden = false;
+        return;
+      }
+
       const label = option.getTextLabel().toLowerCase();
       const value = option.value.toLowerCase();
       const matches = label.includes(searchQuery) || value.includes(searchQuery);

package/src/components/select/select.scss

@@ -407,9 +407,11 @@
   font-size: var(--zn-font-size-x-small);
   font-weight: var(--zn-font-weight-semibold);
   line-height: var(--zn-line-height-normal);
-  letter-spacing: var(--zn-letter-spacing-normal);
-  padding-block: var(--zn-spacing-2x-small);
-  padding-inline: var(--zn-spacing-2x-large);
+  letter-spacing: var(--zn-letter-spacing-loose);
+  text-transform: uppercase;
+  color: var(--zn-color-neutral-600);
+  padding-block: var(--zn-spacing-x-small) var(--zn-spacing-2x-small);
+  padding-inline: var(--zn-spacing-small);
   user-select: none;
   -webkit-user-select: none;
 }

package/src/components/select/select.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';
 import type ZnOption from '../option/option.component';
 import type ZnSelect from './select.component';
 
@@ -163,6 +163,65 @@ describe('<zn-select>', () => {
     });
   });
 
+  describe('search across opt-group labels', () => {
+    let el: ZnSelect;
+
+    const type = async (text: string) => {
+      const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;
+      displayInput.value = text;
+      displayInput.dispatchEvent(new Event('input'));
+      await el.updateComplete;
+    };
+
+    const visibleValues = () =>
+      [...el.querySelectorAll<ZnOption>('zn-option')].filter(o => !o.hidden).map(o => o.value);
+
+    beforeEach(async () => {
+      el = await fixture<ZnSelect>(html`
+        <zn-select search>
+          <zn-opt-group label="Citrus">
+            <zn-option value="orange">Orange</zn-option>
+            <zn-option value="lemon">Lemon</zn-option>
+          </zn-opt-group>
+          <zn-opt-group label="Berries">
+            <zn-option value="strawberry">Strawberry</zn-option>
+            <zn-option value="blueberry">Blueberry</zn-option>
+          </zn-opt-group>
+          <zn-option value="citrus-punch">Citrus Punch</zn-option>
+        </zn-select>
+      `);
+      await el.updateComplete;
+      await el.show();
+      await el.updateComplete;
+    });
+
+    it('keeps every option in a group whose label matches, alongside option-label matches', async () => {
+      await type('citrus');
+
+      expect(visibleValues()).to.deep.equal(['orange', 'lemon', 'citrus-punch']);
+    });
+
+    it('matches group labels case-insensitively', async () => {
+      await type('BERR');
+
+      expect(visibleValues()).to.deep.equal(['strawberry', 'blueberry']);
+    });
+
+    it('keeps the matching group visible and hides the others', async () => {
+      await type('citrus');
+
+      const groups = el.querySelectorAll('zn-opt-group');
+      expect(groups[0].hidden, 'Citrus group').to.be.false;
+      expect(groups[1].hidden, 'Berries group').to.be.true;
+    });
+
+    it('still matches option labels inside a non-matching group', async () => {
+      await type('lemon');
+
+      expect(visibleValues()).to.deep.equal(['lemon']);
+    });
+  });
+
   describe('Escape key', () => {
     it('blurs the display input when dropdown is closed and Escape is pressed', async () => {
       const el = await fixture<ZnSelect>(html`<zn-select></zn-select>`);
@@ -765,4 +824,44 @@ describe('<zn-select>', () => {
       expect(getComputedStyle(addRow).fontSize).to.equal('11px');
     });
   });
+
+  it('does not flicker the open listbox when a second select is opened', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <zn-select id="first">
+          <zn-option value="apple">Apple</zn-option>
+          <zn-option value="banana">Banana</zn-option>
+        </zn-select>
+        <zn-select id="second">
+          <zn-option value="cherry">Cherry</zn-option>
+          <zn-option value="date">Date</zn-option>
+        </zn-select>
+      </div>
+    `);
+
+    const first = wrapper.querySelector<ZnSelect>('#first')!;
+    const second = wrapper.querySelector<ZnSelect>('#second')!;
+    await Promise.all([first.updateComplete, second.updateComplete]);
+
+    const popoverOf = (el: ZnSelect) =>
+      el.shadowRoot!.querySelector('zn-popup')!.shadowRoot!.querySelector<HTMLElement>('#popup')!;
+
+    const states: string[] = [];
+    popoverOf(first).addEventListener('beforetoggle', (event: Event) =>
+      states.push((event as ToggleEvent).newState));
+
+    await first.show();
+    states.length = 0;
+
+    // Mimic a click on the second select: the document mousedown closes the first, the combobox
+    // mousedown opens the second
+    document.dispatchEvent(new MouseEvent('mousedown', {bubbles: true, composed: true}));
+    second.shadowRoot!.querySelector('.select__combobox')!
+      .dispatchEvent(new MouseEvent('mousedown', {bubbles: true, composed: true}));
+    await second.updateComplete;
+    await waitUntil(() => !first.open && states.includes('closed'));
+
+    expect(states).to.deep.equal(['closed']);
+    expect(popoverOf(second).matches(':popover-open')).to.be.true;
+  });
 });