@danielgindi/selectbox 1.0.32 → 1.0.33

package/dist/lib.es6.js

@@ -1,14 +1,14 @@
 /*!
- * @danielgindi/selectbox 1.0.32
+ * @danielgindi/selectbox 1.0.33
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
 import { remove, toggleClass, before, append, getRootNode } from '@danielgindi/dom-utils/lib/DomCompat';
-import { setCssProps, getElementOffset, getElementHeight, getElementWidth, anchoredPosition, setElementHeight, setElementWidth, getPseudoElementWidth, getCssProps } from '@danielgindi/dom-utils/lib/Css';
+import { setCssProps, getElementOffset, getElementHeight, getElementWidth, anchoredPosition, setElementHeight, parseTransition, setElementWidth, getPseudoElementWidth, getCssProps } from '@danielgindi/dom-utils/lib/Css';
 import DomEventsSink from '@danielgindi/dom-utils/lib/DomEventsSink';
 import VirtualListHelper from '@danielgindi/virtual-list-helper';
-import parseCssTransition from 'parse-css-transition';
 import { VALUE_ESCAPE, VALUE_SPACE, VALUE_ENTER, VALUE_DOWN, VALUE_UP, VALUE_END, VALUE_HOME, VALUE_PAGE_DOWN, VALUE_PAGE_UP, VALUE_TAB, VALUE_DELETE, VALUE_BACK_SPACE, VALUE_LEFT, VALUE_RIGHT } from 'keycode-js';
+import mitt from 'mitt';
 
 var escapeRegex = value => value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 
@@ -106,7 +106,7 @@ let defaultOptions$1 = {
 Emits the following events:
 ---------------------------
 
-'itemfocus' {value, item}: item gained focus.
+'itemfocus' {value, item, event}: item gained focus.
 'itemblur' {value, item}: item lost focus.
 'select' {value, item}: item was selected (in single mode).
 'show:before': the drop list will show.
@@ -151,7 +151,9 @@ class DropList {
             valueProp: o.valueProp,
             renderItem: o.renderItem,
             unrenderItem: o.unrenderItem,
-            on: o.on,
+            on: o.on || null,
+            silenceEvents: true,
+            mitt: mitt(),
 
             focusItemIndex: -1,
             focusItemEl: null,
@@ -290,6 +292,8 @@ class DropList {
         this._hookTouchEvents();
         this._hookFocusEvents();
         this._hookKeyEvents();
+
+        this.silenceEvents = false;
     }
 
     destroy() {
@@ -1114,7 +1118,7 @@ class DropList {
                 el.classList.add(`${p.baseClassName}__is-hiding`);
 
                 // support for hide transition in css
-                const maxTransitionDuration = parseCssTransition(getComputedStyle(p.el).transition)
+                const maxTransitionDuration = parseTransition(getComputedStyle(p.el).transition)
                     .reduce((p, v) => Math.max(p, v.delay + v.duration), 0);
 
                 if (maxTransitionDuration > 0) {
@@ -1196,7 +1200,7 @@ class DropList {
                 itemElement.classList.add(`${p.baseClassName}__item_focus`);
                 p.focusItemEl = itemElement;
 
-                this._trigger('itemfocus', { value: itemElement[p.valueProp], item: itemElement[ItemSymbol$1] });
+                this._trigger('itemfocus', { value: itemElement[p.valueProp], item: itemElement[ItemSymbol$1], event: null });
             }
         }
 
@@ -1300,6 +1304,58 @@ class DropList {
         return this;
     }
 
+    /**
+     * Register an event handler
+     * @param {(string|'*')?} event
+     * @param {function(any)} handler
+     * @returns {DropList}
+     */
+    on(/**string|'*'*/event, /**Function?*/handler) {
+        this._p.mitt.on(event, handler);
+        return this;
+    }
+
+    /**
+     * Register a one time event handler
+     * @param {(string|'*')?} event
+     * @param {function(any)} handler
+     * @returns {DropList}
+     */
+    once(/**string|'*'*/event, /**Function?*/handler) {
+        let wrapped = (value) => {
+            this._p.mitt.off(event, wrapped);
+            handler(value);
+        };
+        this._p.mitt.on(event, wrapped);
+        return this;
+    }
+
+    /**
+     * Remove an `handler` for `event`, all events for `event`, or all events completely.
+     * @param {(string|'*')?} event
+     * @param {function(any)} handler
+     * @returns {DropList}
+     */
+    off(/**(string|'*')?*/event, /**Function?*/handler) {
+        if (!event && !event) {
+            this._p.mitt.all.clear();
+        } else {
+            this._p.mitt.off(event, handler);
+        }
+        return this;
+    }
+
+    /**
+     * Emit an event
+     * @param {string} event
+     * @param {any} value
+     * @returns {DropList}
+     */
+    emit(/**string|'*'*/event, /**any?*/value) {
+        this._p.mitt.emit(event, value);
+        return this;
+    }
+
     _getItemIndex(item) {
         const p = this._p, labelProp = p.labelProp, valueProp = p.valueProp;
 
@@ -1342,6 +1398,7 @@ class DropList {
         const p = this._p;
         if (p.on)
             p.on(event, ...(data === undefined ? [] : [data]));
+        p.mitt.emit(event, data);
     }
 
     _itemUpAction(event, itemEl) {
@@ -1645,7 +1702,7 @@ class DropList {
                 p.focusItemIndex = itemIndex;
 
                 const item = p.items[itemIndex];
-                this._trigger('itemfocus', { value: item[p.valueProp], item: item });
+                this._trigger('itemfocus', { value: item[p.valueProp], item: item, event: event });
             }
         } else {
             // This could happen if trying to focus a grouped item
@@ -2306,7 +2363,9 @@ class SelectBox {
             renderNoResultsItem: o.renderNoResultsItem,
             unrenderNoResultsItem: o.unrenderNoResultsItem,
             filterFn: o.filterFn,
-            on: null,
+            on: o.on || null,
+            silenceEvents: true,
+            mitt: mitt(),
             additionalClasses: o.additionalClasses,
 
             isLoadingMode: !!o.isLoadingMode,
@@ -2413,11 +2472,10 @@ class SelectBox {
             this.setValue(o.value);
         }
 
-        // Start firing events
-        p.on = o.on || null;
-
         this._scheduleSync();
 
+        this.silenceEvents = false;
+
         return this;
     }
 
@@ -3427,6 +3485,58 @@ class SelectBox {
 		return this;
 	}
 
+    /**
+     * Register an event handler
+     * @param {(string|'*')?} event
+     * @param {function(any)} handler
+     * @returns {SelectBox}
+     */
+    on(/**string|'*'*/event, /**Function?*/handler) {
+        this._p.mitt.on(event, handler);
+        return this;
+    }
+
+    /**
+     * Register a one time event handler
+     * @param {(string|'*')?} event
+     * @param {function(any)} handler
+     * @returns {SelectBox}
+     */
+    once(/**string|'*'*/event, /**Function?*/handler) {
+        let wrapped = (value) => {
+            this._p.mitt.off(event, wrapped);
+            handler(value);
+        };
+        this._p.mitt.on(event, wrapped);
+        return this;
+    }
+
+    /**
+     * Remove an `handler` for `event`, all events for `event`, or all events completely.
+     * @param {(string|'*')?} event
+     * @param {function(any)} handler
+     * @returns {SelectBox}
+     */
+    off(/**(string|'*')?*/event, /**Function?*/handler) {
+        if (!event && !event) {
+            this._p.mitt.all.clear();
+        } else {
+            this._p.mitt.off(event, handler);
+        }
+        return this;
+    }
+
+    /**
+     * Emit an event
+     * @param {string} event
+     * @param {any} value
+     * @returns {SelectBox}
+     */
+    emit(/**string|'*'*/event, /**any?*/value) {
+        this._p.mitt.emit(event, value);
+        return this;
+    }
+
     /** @private */
     _renderBase() {
         const p = this._p;
@@ -4601,6 +4711,7 @@ class SelectBox {
         const p = this._p;
         if (p.on)
             p.on(event, ...(data === undefined ? [] : [data]));
+        p.mitt.emit(event, data);
     }
 
     /**