@kubex/zinc 1.1.158 → 1.1.159

package/package.json

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

package/src/components/filter-container/filter-container.component.ts

@@ -26,62 +26,41 @@ export default class ZnFilterContainer extends ZincElement {
 
   @property() attr = 'filter';
 
+  private _filterFrame = 0;
+
   public handleSearchChange(event: Event) {
-    // get all element that have data-'this.attr' attribute
-    const filterableElements = this.querySelectorAll(`[data-${this.attr}]`);
-    const input = event.target as HTMLInputElement;
-    const searchTerm = input.value.toLowerCase();
+    const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
+    cancelAnimationFrame(this._filterFrame);
+    this._filterFrame = requestAnimationFrame(() => this.applyFilter(searchTerm));
+  }
 
-    filterableElements.forEach((el) => {
-      const filterValue = el.getAttribute(`data-${this.attr}`)?.toLowerCase() || '';
-      if (filterValue.includes(searchTerm)) {
-        (el as HTMLElement).style.display = '';
-      } else {
-        (el as HTMLElement).style.display = 'none';
-      }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    cancelAnimationFrame(this._filterFrame);
+  }
 
-      const panel = el.closest('zn-panel');
-      if (panel) {
-        const panelItems = panel.querySelectorAll(`[data-${this.attr}]`);
-        let anyVisible = false;
-        panelItems.forEach((item) => {
-          if ((item as HTMLElement).style.display !== 'none') {
-            anyVisible = true;
-          }
+  private applyFilter(searchTerm: string) {
+    const attr = `data-${this.attr}`;
+    const filterableElements = this.querySelectorAll<HTMLElement>(`[${attr}]`);
+    const panels = new Map<HTMLElement, boolean>();
+    const accordions = new Map<HTMLElement, boolean>();
+    let anyVisibleElements = false;
 
-        });
-        if (anyVisible) {
-          (panel as HTMLElement).style.display = '';
-        } else {
-          (panel as HTMLElement).style.display = 'none';
-        }
-      }
+    filterableElements.forEach((el) => {
+      const visible = searchTerm === '' || (el.getAttribute(attr)?.toLowerCase() || '').includes(searchTerm);
+      setDisplay(el, visible);
+      if (visible) anyVisibleElements = true;
 
-      const accordionItem = el.closest('zn-accordion');
-      if (accordionItem) {
-        const itemElements = accordionItem.querySelectorAll(`[data-${this.attr}]`);
-        let anyVisible = false;
-        itemElements.forEach((item) => {
-          if ((item as HTMLElement).style.display !== 'none') {
-            anyVisible = true;
-          }
-        });
+      const panel = el.closest<HTMLElement>('zn-panel');
+      if (panel) panels.set(panel, (panels.get(panel) ?? false) || visible);
 
-        if (anyVisible) {
-          (accordionItem as HTMLElement).style.display = '';
-        }
-      }
+      const accordion = el.closest<HTMLElement>('zn-accordion');
+      if (accordion) accordions.set(accordion, (accordions.get(accordion) ?? false) || visible);
     });
 
-    if (searchTerm === '') {
-      filterableElements.forEach((el) => {
-        (el as HTMLElement).style.display = '';
-      });
-    }
-
-    // if nothing is visible, show a "no results found" message
-    const anyVisibleElements = Array.from(filterableElements).some((el) => {
-      return (el as HTMLElement).style.display !== 'none';
+    panels.forEach((visible, panel) => setDisplay(panel, visible));
+    accordions.forEach((visible, accordion) => {
+      if (visible) setDisplay(accordion, true);
     });
 
     let noResultsMessage = this.querySelector<HTMLElement>('.no-results-message');
@@ -107,3 +86,8 @@ export default class ZnFilterContainer extends ZincElement {
       <slot></slot> `;
   }
 }
+
+function setDisplay(el: HTMLElement, visible: boolean) {
+  const display = visible ? '' : 'none';
+  if (el.style.display !== display) el.style.display = display;
+}

package/src/components/filter-container/filter-container.test.ts

@@ -1,5 +1,8 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type ZnFilterContainer from './filter-container.component';
+
+const nextFrame = () => new Promise(requestAnimationFrame);
 
 describe('<zn-filter-container>', () => {
   it('should render a component', async () => {
@@ -7,4 +10,26 @@ describe('<zn-filter-container>', () => {
 
     expect(el).to.exist;
   });
+
+  it('hides non-matching items and empty panels', async () => {
+    const el = await fixture<ZnFilterContainer>(html`
+      <zn-filter-container>
+        <zn-panel id="fruit"><div data-filter="Apple"></div><div data-filter="Banana"></div></zn-panel>
+        <zn-panel id="veg"><div data-filter="Carrot"></div></zn-panel>
+      </zn-filter-container>
+    `);
+
+    el.handleSearchChange({target: {value: 'app'}} as unknown as Event);
+    await nextFrame();
+
+    expect(el.querySelector<HTMLElement>('[data-filter="Apple"]')!.style.display).to.equal('');
+    expect(el.querySelector<HTMLElement>('[data-filter="Banana"]')!.style.display).to.equal('none');
+    expect(el.querySelector<HTMLElement>('#fruit')!.style.display).to.equal('');
+    expect(el.querySelector<HTMLElement>('#veg')!.style.display).to.equal('none');
+
+    el.handleSearchChange({target: {value: ''}} as unknown as Event);
+    await nextFrame();
+
+    expect(el.querySelector<HTMLElement>('#veg')!.style.display).to.equal('');
+  });
 });