@danielgindi/selectbox 1.0.141 → 1.0.142

package/dist/lib.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 1.0.141
+ * @danielgindi/selectbox 1.0.142
  * git://github.com/danielgindi/selectbox.git
  */
 'use strict';
@@ -12,7 +12,7 @@ var VirtualListHelper = require('@danielgindi/virtual-list-helper');
 var keycodeJs = require('keycode-js');
 var mitt = require('mitt');
 
-var escapeRegex = ((value) => value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'));
+var escapeRegex = (value) => value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 
 const ItemSymbol$1 = Symbol('item');
 const DestroyedSymbol$1 = Symbol('destroyed');
@@ -138,7 +138,7 @@ class DropList {
   constructor(options) {
     const o = { ...defaultOptions$1 };
 
-    for (let [key, value] of Object.entries( /**@type Object*/options))
+    for (let [key, value] of Object.entries(/**@type Object*/options))
     if (value !== undefined)
     o[key] = value;
 
@@ -192,7 +192,7 @@ class DropList {
       p.elOriginalDisplay = el.style.display || '';
       el.classList.add(...classes);
       el.role = 'menu';
-      Css.setCssProps( /**@type ElementCSSInlineStyle*/el, initialCss);
+      Css.setCssProps(/**@type ElementCSSInlineStyle*/el, initialCss);
       p.ownsEl = false;
     } else {
       el = Dom.createElement('ul', {
@@ -226,7 +226,7 @@ class DropList {
       onItemRender: (itemEl, index) => {
         let item;
 
-        if (( /**@type any*/index) === GhostSymbol) {
+        if ((/**@type any*/index) === GhostSymbol) {
           item = {
             label: p.lastMeasureLongestLabelText,
             value: 'Measure',
@@ -1596,7 +1596,7 @@ class DropList {
    * @param {function(any)} handler
    * @returns {DropList}
    */
-  on( /**string|'*'*/event, /**Function?*/handler) {
+  on(/**string|'*'*/event, /**Function?*/handler) {
     this._p.mitt.on(event, handler);
     return this;
   }
@@ -1607,7 +1607,7 @@ class DropList {
    * @param {function(any)} handler
    * @returns {DropList}
    */
-  once( /**string|'*'*/event, /**Function?*/handler) {
+  once(/**string|'*'*/event, /**Function?*/handler) {
     let wrapped = (value) => {
       this._p.mitt.off(event, wrapped);
       handler(value);
@@ -1622,7 +1622,7 @@ class DropList {
    * @param {function(any)} handler
    * @returns {DropList}
    */
-  off( /**(string|'*')?*/event, /**Function?*/handler) {
+  off(/**(string|'*')?*/event, /**Function?*/handler) {
     if (!event && !event) {
       this._p.mitt.all.clear();
     } else {
@@ -1637,7 +1637,7 @@ class DropList {
    * @param {any} value
    * @returns {DropList}
    */
-  emit( /**string|'*'*/event, /**any?*/value) {
+  emit(/**string|'*'*/event, /**any?*/value) {
     this._p.mitt.emit(event, value);
     return this;
   }
@@ -2663,7 +2663,7 @@ class SelectBox {
   constructor(options) {
     const o = { ...defaultOptions };
 
-    for (let [key, value] of Object.entries( /**@type Object*/options))
+    for (let [key, value] of Object.entries(/**@type Object*/options))
     if (value !== undefined)
     o[key] = value;
 
@@ -2792,7 +2792,7 @@ class SelectBox {
     }, true);
 
     p.sink.
-    add(p.input, 'keydown', ( /**KeyboardEvent*/event) => {
+    add(p.input, 'keydown', (/**KeyboardEvent*/event) => {
       this._handleInputKeydown(event);
     }).
     add(p.input, 'input', () => {
@@ -3431,7 +3431,7 @@ class SelectBox {
     p.selectedValues &&
     p.selectedValues.length === 1 &&
     Array.isArray(p.selectedValues[0])) {
-      this.setSelectedValues( /**@type Array*/p.selectedValues[0]);
+      this.setSelectedValues(/**@type Array*/p.selectedValues[0]);
     }
 
     this._scheduleSync('full');
@@ -3976,7 +3976,7 @@ class SelectBox {
    * @param {function(any)} handler
    * @returns {SelectBox}
    */
-  on( /**string|'*'*/event, /**Function?*/handler) {
+  on(/**string|'*'*/event, /**Function?*/handler) {
     this._p.mitt.on(event, handler);
     return this;
   }
@@ -3987,7 +3987,7 @@ class SelectBox {
    * @param {function(any)} handler
    * @returns {SelectBox}
    */
-  once( /**string|'*'*/event, /**Function?*/handler) {
+  once(/**string|'*'*/event, /**Function?*/handler) {
     let wrapped = (value) => {
       this._p.mitt.off(event, wrapped);
       handler(value);
@@ -4002,7 +4002,7 @@ class SelectBox {
    * @param {function(any)} handler
    * @returns {SelectBox}
    */
-  off( /**(string|'*')?*/event, /**Function?*/handler) {
+  off(/**(string|'*')?*/event, /**Function?*/handler) {
     if (!event && !event) {
       this._p.mitt.all.clear();
     } else {
@@ -4017,7 +4017,7 @@ class SelectBox {
    * @param {any} value
    * @returns {SelectBox}
    */
-  emit( /**string|'*'*/event, /**any?*/value) {
+  emit(/**string|'*'*/event, /**any?*/value) {
     this._p.mitt.emit(event, value);
     return this;
   }
@@ -4108,7 +4108,7 @@ class SelectBox {
             Dom.closestUntil(evt.target, `.${p.baseClassName}__item`, evt.currentTarget),
             evt);
         }).
-        add(p.list, 'keydown', ( /**KeyboardEvent*/evt) => {
+        add(p.list, 'keydown', (/**KeyboardEvent*/evt) => {
           if (!Dom.closestUntil(evt.target, `.${p.baseClassName}__item`, evt.currentTarget))
           return;
 
@@ -4396,6 +4396,8 @@ class SelectBox {
                   if (!hasGroupSync)
                   this._scheduleSync('render_base');
                 }
+              } else if (p.multi) {
+                this._scheduleSync('_syncPlaceholder');
               }
 
               this._trigger(checked ? 'addsel' : 'removesel', { value: value, item: item });
@@ -4490,7 +4492,7 @@ class SelectBox {
 
     p.sink.
     add(keyEventsTarget, 'keydown.dropdown', (evt) => {
-      if (( /**@type HTMLInputElement*/evt.currentTarget).readOnly)
+      if ((/**@type HTMLInputElement*/evt.currentTarget).readOnly)
       return;
 
       let suppressEnterSpaceToggle = false;
@@ -4978,6 +4980,10 @@ class SelectBox {
           this._syncSingleItem();
           break;
 
+        case 'syncPlaceholder':
+          this._syncPlaceholder();
+          break;
+
         case 'removeMultiItemElement':{
             if (p.showSelection) {
               this._syncPlaceholder();
@@ -5201,7 +5207,9 @@ class SelectBox {
       if (typeof p.multiPlaceholderFormatter === 'function') {
         placeholder = p.multiPlaceholderFormatter(p.selectedItems);
       } else {
-        placeholder = defaultMultiPlaceholderFormatter(p.selectedItems, p.labelProp);
+        placeholder = p.selectedItems.length === 0 ?
+        p.placeholder || '' :
+        defaultMultiPlaceholderFormatter(p.selectedItems, p.labelProp);
       }
     } else if (p.selectedItems.length === 0 ||
     !p.showSelection ||
@@ -5709,7 +5717,7 @@ class SelectBox {
     let nextFocus;
 
     if (event.key === (isRtl ? keycodeJs.VALUE_LEFT : keycodeJs.VALUE_RIGHT)) {// Next arrow
-      nextFocus = Dom.next( /**@type Element*/event.target, `.${p.baseClassName}__item,.${p.baseClassName}__search_wrapper`);
+      nextFocus = Dom.next(/**@type Element*/event.target, `.${p.baseClassName}__item,.${p.baseClassName}__search_wrapper`);
       if (hasClass(nextFocus, `${p.baseClassName}__search_wrapper`)) {
         nextFocus = nextFocus.querySelector('input');
       }
@@ -5717,7 +5725,7 @@ class SelectBox {
 
       event.preventDefault();
     } else if (event.key === (isRtl ? keycodeJs.VALUE_RIGHT : keycodeJs.VALUE_LEFT)) {// Prev arrow
-      nextFocus = Dom.prev( /**@type Element*/event.target, `.${p.baseClassName}__item,.${p.baseClassName}__search_wrapper`);
+      nextFocus = Dom.prev(/**@type Element*/event.target, `.${p.baseClassName}__item,.${p.baseClassName}__search_wrapper`);
       if (hasClass(nextFocus, `${p.baseClassName}__search_wrapper`)) {
         nextFocus = nextFocus.querySelector('input');
       }
@@ -5729,7 +5737,7 @@ class SelectBox {
       let itemEl = event.target;
       while (itemEl) {
         multiItemEls.push(itemEl);
-        itemEl = Dom.prev( /**@type Element*/itemEl, `.${p.baseClassName}__item`);
+        itemEl = Dom.prev(/**@type Element*/itemEl, `.${p.baseClassName}__item`);
       }
 
       while (multiItemEls.length) {