@danielgindi/selectbox 1.0.57 → 1.0.58

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 1.0.57
+ * @danielgindi/selectbox 1.0.58
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -23,7 +23,8 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
  * @property {Element} [el] An element to attach to, instead of creating a new one
  * @property {string} [baseClassName='droplist'] class name for the menu root element
  * @property {string|string[]} [additionalClasses]
- * @property {number} [itemBlurDelay=300] How long to wait before deciding to blur the focused item?
+ * @property {boolean} [autoItemBlur=true] Should we automatically blur the focused item when the droplist loses focus?
+ * @property {number} [autoItemBlurDelay=300] How long to wait before deciding to blur the focused item (when the droplist loses focus)?
  * @property {boolean} [capturesFocus=true] Should this DropList be added to the TAB-key stack?
  * @property {boolean} [multi=false] Does this DropList show checkboxes for multiple item selection?
  * @property {function} [keyDownHandler=null] An alternative "keydown" event handler. Return true to prevent default behaviour.
@@ -83,7 +84,8 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
 let defaultOptions$1 = {
     baseClassName: 'droplist',
 
-    itemBlurDelay: 300,
+    autoItemBlur: true,
+    autoItemBlurDelay: 300,
     capturesFocus: true,
     multi: false,
     keyDownHandler: null,
@@ -106,9 +108,9 @@ let defaultOptions$1 = {
 Emits the following events:
 ---------------------------
 
-'itemfocus' {value, item, event}: item gained focus.
+'itemfocus' {value, item, event?, el}: item gained focus.
 'itemblur' {value, item}: item lost focus.
-'select' {value, item}: item was selected (in single mode).
+'select' {value, item, event?, el}: item was selected (in single mode).
 'show:before': the drop list will show.
 'show': the drop list has been shown.
 'hide:before': the drop list will hide.
@@ -125,7 +127,7 @@ class DropList {
      * @param {DropList.Options} options
      */
     constructor(options) {
-        const o = { ...defaultOptions$1 };
+        const o = {...defaultOptions$1};
 
         for (let [key, value] of Object.entries(/**@type Object*/options))
             if (value !== undefined)
@@ -137,7 +139,8 @@ class DropList {
 
             baseClassName: o.baseClassName,
             additionalClasses: o.additionalClasses,
-            itemBlurDelay: o.itemBlurDelay,
+            autoItemBlur: o.autoItemBlur,
+            autoItemBlurDelay: o.autoItemBlurDelay,
             capturesFocus: o.capturesFocus,
             multi: o.multi,
             keyDownHandler: o.keyDownHandler,
@@ -274,7 +277,9 @@ class DropList {
             p.virtualListHelper.setOnItemUnrender(el => {
                 try {
                     fn(el[ItemSymbol$1][ItemSymbol$1], el);
-                } catch (err) { console.error(err); } // eslint-disable-line no-console
+                } catch (err) {
+                    console.error(err);
+                } // eslint-disable-line no-console
                 delete el[ItemSymbol$1];
 
                 if (p.focusItemEl === el)
@@ -393,7 +398,9 @@ class DropList {
             p.virtualListHelper.setOnItemUnrender(el => {
                 try {
                     fn(el[ItemSymbol$1][ItemSymbol$1], el);
-                } catch (err) { console.error(err); } // eslint-disable-line no-console
+                } catch (err) {
+                    console.error(err);
+                } // eslint-disable-line no-console
                 delete el[ItemSymbol$1];
 
                 if (p.focusItemEl === el)
@@ -457,7 +464,7 @@ class DropList {
         if (!item)
             return;
 
-        this._trigger('itemblur', { value: item.value, item: item[ItemSymbol$1] ?? item });
+        this._trigger('itemblur', {value: item.value, item: item[ItemSymbol$1] ?? item});
     }
 
     nextPage(event) {
@@ -514,6 +521,7 @@ class DropList {
             value: item ? item.value : undefined,
             item: item[ItemSymbol$1] ?? item,
             event: event,
+            el: p.focusItemEl,
         });
 
         return true;
@@ -923,8 +931,8 @@ class DropList {
 
         if (p.autoFlipDirection) {
             if ((position.specX === 'right' &&
-                viewCss.left < minX &&
-                (Math.max(viewCss.left, minX) + viewSize.width - targetBox.left) / targetBox.width > 0.5) ||
+                    viewCss.left < minX &&
+                    (Math.max(viewCss.left, minX) + viewSize.width - targetBox.left) / targetBox.width > 0.5) ||
                 (position.specX === 'left' &&
                     viewCss.left > maxX &&
                     (Math.min(viewCss.left, maxX) - targetBox.left) / targetBox.width < 0.5)) {
@@ -1108,7 +1116,7 @@ class DropList {
                 // Detect mouse tap outside of the droplist, to blur the focused item
                 p.sink.add(document, 'mousedown', p.onDocumentMouseDown = (event) => {
                     if (!p.el.contains(event.target))
-                        this._delayBlur();
+                        this._delayBlurItemOnBlur();
                 });
             }
         });
@@ -1257,7 +1265,12 @@ class DropList {
                 itemElement.classList.add(`${p.baseClassName}__item_focus`);
                 p.focusItemEl = itemElement;
 
-                this._trigger('itemfocus', { value: itemElement.value, item: itemElement[ItemSymbol$1], event: null });
+                this._trigger('itemfocus', {
+                    value: itemElement.value,
+                    item: itemElement[ItemSymbol$1],
+                    event: null,
+                    el: itemElement,
+                });
             }
         }
 
@@ -1532,7 +1545,9 @@ class DropList {
 
             // Track scrolling
             let didScroll = false;
-            let onScroll = () => { didScroll = true; };
+            let onScroll = () => {
+                didScroll = true;
+            };
             let onTouchCancel = () => {
                 currentTouchId = null;
                 p.sink.remove(null, '.dropdown_touchextra');
@@ -1581,7 +1596,7 @@ class DropList {
                     if (this[DestroyedSymbol$1]) return;
 
                     if (!p.el.contains(document.activeElement)) {
-                        this._delayBlur();
+                        this._delayBlurItemOnBlur();
                     }
                 });
             });
@@ -1764,21 +1779,24 @@ class DropList {
         p.focusItemIndex = itemIndex;
 
         const item = p.items[itemIndex];
-        this._trigger('itemfocus', { value: item.value, item: item[ItemSymbol$1] ?? item, event: event });
+        this._trigger('itemfocus', {value: item.value, item: item[ItemSymbol$1] ?? item, event: event, el: focusItemEl});
     }
 
-    _delayBlur() {
+    _delayBlurItemOnBlur() {
         if (this[DestroyedSymbol$1])
             return;
 
         const p = this._p;
 
+        if (!p.autoItemBlur)
+            return;
+
         clearTimeout(p.blurTimer);
 
         p.blurTimer = setTimeout(() => {
             if (this[DestroyedSymbol$1]) return;
             this.blurFocusedItem();
-        }, p.itemBlurDelay);
+        }, p.autoItemBlurDelay);
     }
 
     _move(direction, event) {
@@ -1964,7 +1982,11 @@ class DropList {
                 }
 
                 // Fire event
-                this._trigger('groupcheck', { value: item.value, item: item[ItemSymbol$1] ?? item, affectedItems: affectedItems });
+                this._trigger('groupcheck', {
+                    value: item.value,
+                    item: item[ItemSymbol$1] ?? item,
+                    affectedItems: affectedItems
+                });
             } else if (p.groupCount > 0) {
                 items = p.items;
                 itemIndex = items.indexOf(item);
@@ -2121,7 +2143,7 @@ class DropList {
             if (p.multi) {
                 if (!item._nocheck) {
                     itemEl.insertBefore(
-                        createElement('span', { class: 'checkbox' }),
+                        createElement('span', {class: 'checkbox'}),
                         itemEl.firstChild,
                     );
                 }