@dile/ui 3.18.5 → 3.19.1

package/components/select/src/DileSelectSearch.js

@@ -65,6 +65,8 @@ export class DileSelectSearch extends DileSelectSearchableBase {
       value: option.value,
       text: option.textContent.trim(),
       icon: option.dataset.icon || select.dataset.icon,
+      // The native <option>, so an optionRenderer can read its dataset.
+      element: option,
     }));
   }
 
@@ -91,7 +93,7 @@ export class DileSelectSearch extends DileSelectSearchableBase {
    * Template method: decide whether an option matches the keyword.
    * By default it searches the keyword anywhere in the option text, ignoring case and accents.
    * Override it in a subclass to customize the search (e.g. also match option.value).
-   * @param {{value: string, text: string, icon: string}} option
+   * @param {{value: string, text: string, icon: string, element: HTMLOptionElement}} option
    * @param {string} keyword
    * @returns {boolean}
    */

package/components/select/src/DileSelectSearchableBase.js

@@ -11,6 +11,8 @@ import { labelStyles } from '../../input/src/label-styles.js';
 import { messageStyles } from '../../input/src/message-styles.js';
 
 const NAVIGATION_KEYS = ['ArrowDown', 'ArrowUp', 'Home', 'End', 'Enter', 'Escape', 'Tab'];
+// Parts of the nested dile-select-overlay re-exported to this component's host.
+const OPTION_PARTS = ['option', 'option-highlighted', 'option-selected', 'option-content'];
 
 /**
  * Base class for the searchable members of the select family (dile-select-ajax-overlay,
@@ -158,6 +160,13 @@ export class DileSelectSearchableBase extends DileEmmitChange(LitElement) {
       /** dile-iconlib "family.name" icon string applied to every option that has no icon of its
        *  own via iconProperty. */
       icon: { type: String },
+      /** Optional custom renderer for the content of each result: `(item, index) => TemplateResult | string`,
+       *  receiving the original data object. The displayProperty text is still used for the accessible
+       *  name, the keyboard announcements and the selected text. */
+      optionRenderer: { attribute: false },
+      /** Space or comma separated extra part names used inside optionRenderer templates, re-exported
+       *  from the nested dile-select-overlay so they can be styled with ::part() from outside. */
+      optionParts: { type: String },
       delay: { type: Number },
       keyword: {
         type: String,
@@ -382,6 +391,8 @@ export class DileSelectSearchableBase extends DileEmmitChange(LitElement) {
           name="generated-select-field"
           placeholder="${this.placeholder}"
           ?disabled=${this.disabled}
+          exportparts="${this.exportedOptionParts}"
+          .optionRenderer=${this.nestedOptionRenderer}
           @element-changed=${this.doSelected}
         >
           <select slot="select" data-icon="${ifDefined(this.icon)}">
@@ -393,6 +404,39 @@ export class DileSelectSearchableBase extends DileEmmitChange(LitElement) {
     `;
   }
 
+  /** exportparts value for the nested dile-select-overlay: built-in option parts plus optionParts. */
+  get exportedOptionParts() {
+    const extra = (this.optionParts || '').split(/[\s,]+/).filter(Boolean);
+    return [...new Set([...OPTION_PARTS, ...extra])].join(', ');
+  }
+
+  /** Adapts optionRenderer (which receives data items) to the nested overlay's (option, index) signature.
+   *  Cached per optionRenderer so the nested component doesn't see a new function on every render. */
+  get nestedOptionRenderer() {
+    if (typeof this.optionRenderer !== 'function') {
+      return undefined;
+    }
+    if (this._nestedRendererFor !== this.optionRenderer) {
+      const renderer = this.optionRenderer;
+      this._nestedRendererFor = renderer;
+      this._nestedRenderer = (option, index) => {
+        const item = this.findItemForOption(option, index);
+        return item === undefined ? option.text : renderer(item, index);
+      };
+    }
+    return this._nestedRenderer;
+  }
+
+  /** Data item behind an option of the nested overlay: by index (options are generated from
+   *  `data` in order), checked against idProperty, falling back to a search by idProperty. */
+  findItemForOption(option, index) {
+    const byIndex = this.data[index];
+    if (byIndex && String(byIndex[this.idProperty]) === option.value) {
+      return byIndex;
+    }
+    return this.data.find(item => String(item[this.idProperty]) === option.value);
+  }
+
   get messageTemplate() {
     return html`
       ${this.message

package/mixins/close-document-click/src/DileCloseDocumentClick.js

@@ -28,7 +28,7 @@ export const DileCloseDocumentClick = (SuperClass) =>
           DileCloseDocumentClick.closeDocumentHandler = () => {
             if(DileCloseDocumentClick.elements) {
               for (let ele of DileCloseDocumentClick.elements) {
-                ele.close();
+                ele.closeFromDocumentClick();
               }
             }
           };
@@ -70,6 +70,15 @@ export const DileCloseDocumentClick = (SuperClass) =>
       });
     }
 
+    /**
+     * Close requested by a click in the document. Calls close() by default.
+     * Override it to ignore these closes in some states, as DileOverlay does
+     * while the overlay is opening.
+     */
+    closeFromDocumentClick() {
+      this.close();
+    }
+
     /**
      * This method only alerts the developer to create the close() method in his component
      */

package/mixins/overlay/src/DileOverlay.js

@@ -80,35 +80,63 @@ export const DileOverlay = function(superClass) {
     }
     /**
     * closes the overlay
+    *
+    * An explicit close() while the overlay is still opening (the 50ms delay of open())
+    * cancels the opening, so the overlay ends up closed.
     */
     close() {
-      if(!this._opening && this._overlayClass=='opened') {
+      if(this._opening) {
+        this.cancelDelay();
+        this._opening = false;
+        this._overlayClass = '';
+        this.overlay.style.display = 'none';
+        this._dispatchClosed();
+      } else if(this._overlayClass=='opened') {
         this._overlayClass = '';
         this._removePositionListeners();
         this.cancelDelay();
         this.delayId = setTimeout(() => {
           this.overlay.style.display = 'none'
         }, 500);
-        this.dispatchEvent(new CustomEvent('overlay-closed', {
+        this._dispatchClosed();
+      }
+    }
+    /**
+    * Close requested by a document click (DileCloseDocumentClick). It is ignored while
+    * the overlay is opening, because the same click that opens the overlay bubbles up
+    * to the document.
+    */
+    closeFromDocumentClick() {
+      if(!this._opening) {
+        this.close();
+      }
+    }
+    _dispatchClosed() {
+      this.dispatchEvent(new CustomEvent('overlay-closed', {
         bubbles: true,
         composed: true,
       }));
-      }
     }
     /**
     * opens the overlay
+    *
+    * overlay-opened is only dispatched when the overlay was closed, so every
+    * overlay-opened is paired with one overlay-closed.
     */
     open() {
-      this.dispatchEvent(new CustomEvent('overlay-opened', {
-        bubbles: true,
-        composed: true,
-      }));
+      if(!this._opening && this._overlayClass != 'opened') {
+        this.dispatchEvent(new CustomEvent('overlay-opened', {
+          bubbles: true,
+          composed: true,
+        }));
+      }
       if(!this._opening) {
         this._opening = true;
         this.updatePosition();
-        if(this.closeAll) {
-          this.closeAll();
-        };
+        // Close the other overlays, even if they are still opening.
+        if(this.closeOthers) {
+          this.closeOthers();
+        }
         this.overlay.style.display = 'block';
         this.cancelDelay();
         this.delayId = setTimeout(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.18.5",
+  "version": "3.19.1",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "49f740275cc480045fee98068c8ee8327dcb4d0d"
+  "gitHead": "33fa981c48f488be6c9a381f1a32eeffa5b92b24"
 }