@dile/ui 3.5.0 → 3.5.2

package/components/select/select-ajax-overlay.spec.js

@@ -275,6 +275,39 @@ describe('dile-select-ajax-overlay', () => {
       expect(el.value).toBeUndefined();
       expect(el.shadowRoot.getElementById('search')).toBeTruthy();
     });
+
+    it('clear() does not re-select the same item (regression: infinite add loop under addOnSelect)', async () => {
+      // Regression test: unlike onClearSelected() (triggered by the user's own "x" click), the
+      // public clear() API left `data`/`keyword` untouched. Flipping isSelected back to false
+      // remounts a brand new nested dile-select-overlay, whose firstUpdated() syncs its value to
+      // whatever the native <select> currently holds. With no placeholder option and the stale
+      // data still in place, that was the just-cleared item's own option — auto-selecting it and
+      // re-firing element-changed for the same value, which under dile-many-relation's
+      // addOnSelect re-added the same item forever until the API started rate-limiting.
+      mockFetch([{ id: 1, name: 'Spain' }]);
+      const el = await renderSelectAjaxOverlay(`
+        <dile-select-ajax-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" delay="10"></dile-select-ajax-overlay>
+      `);
+
+      await typeKeyword(el, 'sp');
+      await selectOption(el, 0);
+      expect(el.value).toBe('1');
+
+      const changedValues = [];
+      el.addEventListener('element-changed', (e) => { changedValues.push(e.detail.value); });
+
+      el.clear();
+      await el.updateComplete;
+      await wait(20);
+      await el.updateComplete;
+
+      expect(el.isSelected).toBe(false);
+      expect(el.value).toBeUndefined();
+      expect(el.data).toEqual([]);
+      // Exactly one event: the clear itself. A second one carrying the old value ('1') back
+      // would mean the freshly remounted select auto-picked the stale option again.
+      expect(changedValues).toEqual([undefined]);
+    });
   });
 
   describe('Form Association', () => {

package/components/select/select-overlay.spec.js

@@ -1,5 +1,7 @@
 import { describe, it, expect, afterEach, vi } from 'vitest';
 import './select-overlay.js';
+import '@dile/iconlib/lucide-icons/house.js';
+import '@dile/iconlib/material-icons/star.js';
 
 describe('dile-select-overlay', () => {
   afterEach(() => {
@@ -151,6 +153,93 @@ describe('dile-select-overlay', () => {
     });
   });
 
+  describe('Icons', () => {
+    it("shows the selected option's icon on the trigger, marked aria-hidden", async () => {
+      const el = await renderSelectOverlay(`
+        <dile-select-overlay value="2">
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2" data-icon="lucide.house">Option 2</option>
+          </select>
+        </dile-select-overlay>
+      `);
+
+      const icon = el.shadowRoot.querySelector('.trigger-text dile-iconlib');
+      expect(icon).toBeTruthy();
+      expect(icon.getAttribute('icon')).toBe('lucide.house');
+      expect(icon.getAttribute('aria-hidden')).toBe('true');
+    });
+
+    it("does not show an icon on the trigger when the selected option has none", async () => {
+      const el = await renderSelectOverlay(`
+        <dile-select-overlay value="1">
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2" data-icon="lucide.house">Option 2</option>
+          </select>
+        </dile-select-overlay>
+      `);
+
+      expect(el.shadowRoot.querySelector('.trigger-text dile-iconlib')).toBeNull();
+    });
+
+    it("shows each option's icon in the listbox, keeping the option text as its accessible name", async () => {
+      const el = await renderSelectOverlay(`
+        <dile-select-overlay>
+          <select slot="select">
+            <option value="1" data-icon="lucide.house">Option 1</option>
+            <option value="2" data-icon="material.star">Option 2</option>
+            <option value="3">Option 3</option>
+          </select>
+        </dile-select-overlay>
+      `);
+
+      await open(el);
+      const items = el.shadowRoot.querySelectorAll('[role="option"]');
+      expect(items[0].querySelector('dile-iconlib').getAttribute('icon')).toBe('lucide.house');
+      expect(items[0].textContent.trim()).toBe('Option 1');
+      expect(items[1].querySelector('dile-iconlib').getAttribute('icon')).toBe('material.star');
+      expect(items[2].querySelector('dile-iconlib')).toBeNull();
+    });
+
+    it('uses data-icon on the <select> as the default icon for options that do not declare their own', async () => {
+      const el = await renderSelectOverlay(`
+        <dile-select-overlay value="2">
+          <select slot="select" data-icon="lucide.house">
+            <option value="1">Option 1</option>
+            <option value="2" data-icon="material.star">Option 2</option>
+          </select>
+        </dile-select-overlay>
+      `);
+
+      await open(el);
+      const items = el.shadowRoot.querySelectorAll('[role="option"]');
+      // Option 1 has no icon of its own, so it falls back to the select-level default.
+      expect(items[0].querySelector('dile-iconlib').getAttribute('icon')).toBe('lucide.house');
+      // Option 2 declares its own icon, which takes precedence over the select-level default.
+      expect(items[1].querySelector('dile-iconlib').getAttribute('icon')).toBe('material.star');
+      // The trigger shows the selected option's own icon too.
+      expect(el.shadowRoot.querySelector('.trigger-text dile-iconlib').getAttribute('icon')).toBe('material.star');
+    });
+
+    it('warns and skips rendering an icon that has not been imported/registered', async () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const el = await renderSelectOverlay(`
+        <dile-select-overlay>
+          <select slot="select">
+            <option value="1" data-icon="lucide.this-icon-does-not-exist">Option 1</option>
+          </select>
+        </dile-select-overlay>
+      `);
+
+      await open(el);
+      const item = el.shadowRoot.querySelector('[role="option"]');
+      expect(item.querySelector('dile-iconlib')).toBeNull();
+      expect(warnSpy).toHaveBeenCalled();
+      warnSpy.mockRestore();
+    });
+  });
+
   describe('Opening and closing', () => {
     it('opens the listbox when the trigger is clicked', async () => {
       const el = await renderSelectOverlay(`

package/components/select/src/DileSelectAjaxOverlay.js

@@ -135,6 +135,12 @@ export class DileSelectAjaxOverlay extends DileEmmitChange(LitElement) {
       resultDataProperty: { type: String },
       displayProperty: { type: String },
       idProperty: { type: String },
+      /** Property in each data object holding a dile-iconlib "family.name" icon string, applied
+       *  per option. Leave unset if you don't need per-option icons. */
+      iconProperty: { type: String },
+      /** dile-iconlib "family.name" icon string applied to every option that has no icon of its
+       *  own via iconProperty. */
+      icon: { type: String },
       delay: { type: Number },
       keyword: {
         type: String,
@@ -342,9 +348,9 @@ export class DileSelectAjaxOverlay extends DileEmmitChange(LitElement) {
           ?disabled=${this.disabled}
           @element-changed=${this.doSelected}
         >
-          <select slot="select">
+          <select slot="select" data-icon="${ifDefined(this.icon)}">
             ${this.data.map(item => html`
-              <option value="${item[this.idProperty]}">${item[this.displayProperty]}</option>
+              <option value="${item[this.idProperty]}" data-icon="${ifDefined(this.iconProperty ? item[this.iconProperty] : undefined)}">${item[this.displayProperty]}</option>
             `)}
           </select>
         </dile-select-overlay>
@@ -499,6 +505,16 @@ export class DileSelectAjaxOverlay extends DileEmmitChange(LitElement) {
     this.isSelected = false;
     this.value = undefined;
     this.selectedText = '';
+    // isSelected flipping back to false remounts a brand new nested dile-select-overlay (the
+    // read-only and search branches are mutually exclusive templates). Its firstUpdated() syncs
+    // its value to the native <select>'s current value, and this component's <select> has no
+    // placeholder option — so leftover data/keyword from the previous search would leave a real
+    // option in place, get auto-picked as the new instance's value, and re-fire element-changed
+    // for the very same item that was just cleared (an infinite loop under addOnSelect).
+    if (!this.static) {
+      this.keyword = '';
+      this.data = [];
+    }
   }
 
   set(value) {

package/components/select/src/DileSelectOverlay.js

@@ -4,8 +4,12 @@ import { DileEmmitChange } from '../../../mixins/form/index.js';
 import { DileOverlay } from '../../../mixins/overlay/index.js';
 import { DileCloseDocumentClick } from '../../../mixins/close-document-click/index.js';
 import { labelStyles, messageStyles } from '../../input/index.js';
+import '@dile/iconlib/dile-iconlib.js';
 
 const TYPEAHEAD_RESET_DELAY = 500;
+// Mirrors DileSelectorItem's renderIconlibIcon() folder map/registration-warning convention.
+const ICONLIB_FOLDERS = { material: 'material-icons', lucide: 'lucide-icons', fontawesome: 'fontawesome-icons' };
+const warnedIcons = new Set();
 
 export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEmmitChange(LitElement))) {
   static get styles() {
@@ -69,13 +73,28 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
         pointer-events: none;
       }
       .trigger-text {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
         overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
       }
       .trigger-text.placeholder {
         color: var(--dile-input-placeholder-color, #ccc);
       }
+      .trigger-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .option-icon {
+        display: flex;
+        align-items: center;
+        flex: none;
+      }
+      .option-icon dile-iconlib {
+        --dile-icon-size: var(--dile-select-overlay-option-icon-size, 16px);
+        --dile-icon-color: var(--dile-select-overlay-option-icon-color, currentColor);
+      }
       .arrow-icon {
         width: 18px;
         height: 18px;
@@ -115,6 +134,9 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
         transform: translateY(0);
       }
       .option {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
         padding: var(--dile-select-overlay-option-padding, 7px 10px);
         cursor: pointer;
         color: var(--dile-select-overlay-color, #303030);
@@ -193,7 +215,7 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
 
   get options() {
     return this.elselect
-      ? Array.from(this.elselect.options).map(o => ({ value: o.value, text: o.textContent }))
+      ? Array.from(this.elselect.options).map(o => ({ value: o.value, text: o.textContent, icon: o.dataset.icon || this.elselect.dataset.icon }))
       : [];
   }
 
@@ -319,7 +341,10 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
         @click="${this._onTriggerClick}"
         @keydown="${this.handleExternalKeydown}"
       >
-        <span class="trigger-text ${selected ? '' : 'placeholder'}">${selected ? selected.text : this.placeholder}</span>
+        <span class="trigger-text ${selected ? '' : 'placeholder'}">
+          ${selected && selected.icon ? html`<span class="option-icon">${this.renderIconlibIcon(selected.icon)}</span>` : ''}
+          <span class="trigger-label">${selected ? selected.text : this.placeholder}</span>
+        </span>
         <span class="arrow-icon" aria-hidden="true">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 448" enable-background="new 0 0 256 448">
             <path d="M255.9 168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2 0-7.9 1.6-11.2 4.8S0 163.8 0 168c0 4.4 1.6 8.2 4.8 11.4l112 112c3.1 3.1 6.8 4.6 11.2 4.6 4.4 0 8.2-1.5 11.4-4.6l112-112c3-3.2 4.5-7 4.5-11.4z"></path>
@@ -341,12 +366,32 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
             aria-selected="${opt.value === (this.value ?? '')}"
             @click="${() => this.selectOption(index)}"
             @mousemove="${() => this._setActiveIndex(index, false)}"
-          >${opt.text}</li>
+          >${opt.icon ? html`<span class="option-icon">${this.renderIconlibIcon(opt.icon)}</span>` : ''}${opt.text}</li>
         `)}
       </ul>
     `;
   }
 
+  renderIconlibIcon(icon) {
+    const dotIndex = icon.indexOf('.');
+    if (dotIndex === -1) {
+      return html`<dile-iconlib icon="${icon}" aria-hidden="true"></dile-iconlib>`;
+    }
+    const family = icon.slice(0, dotIndex);
+    const name = icon.slice(dotIndex + 1);
+    const tagName = `dile-${family}-icon-${name}`;
+    if (customElements.get(tagName)) {
+      return html`<dile-iconlib icon="${icon}" aria-hidden="true"></dile-iconlib>`;
+    }
+    if (!warnedIcons.has(icon)) {
+      warnedIcons.add(icon);
+      const folder = ICONLIB_FOLDERS[family] || family;
+      console.warn(`dile-select-overlay: icon "${icon}" is not registered. Import "@dile/iconlib/${folder}/${name}.js" before using it.`);
+    }
+    customElements.whenDefined(tagName).then(() => this.requestUpdate());
+    return '';
+  }
+
   _optionId(index) {
     return `${this.selectId}-option-${index}`;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.5.0",
+  "version": "3.5.2",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "817f0dfc3c345957ae7a63c113e22aa0f80a773f"
+  "gitHead": "352830a2d1bd846bd07ffc0084df32dc3f8bac83"
 }