@danielgindi/selectbox 1.0.48 → 1.0.51

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 1.0.48
+ * @danielgindi/selectbox 1.0.51
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -51,14 +51,14 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 /**
  * @typedef {Object} DropList.PositionOptions
- * @property {Element} [target] Target element to act as anchor
- * @property {{left: number, top: number}} [targetOffset=undefined] Override the offset of target. Automatically calculated if unspecified.
- * @property {number} [targetHeight=undefined] Override height of the target
- * @property {number} [targetWidth=undefined] Override width of the target
- * @property {DropList.PositionAnchor} [position=undefined]
- * @property {DropList.PositionAnchor} [anchor=undefined]
- * @property {boolean} [updateWidth=false] Should update the width of the menu according to target
- * @property {string} [targetRtl=undefined] Override for rtl mode of the target
+ * @property {Element?} [target] Target element to act as anchor
+ * @property {{left: number, top: number}?} [targetOffset] Override the offset of target. Automatically calculated if unspecified.
+ * @property {number?} [targetHeight] Override height of the target
+ * @property {number?} [targetWidth] Override width of the target
+ * @property {DropList.PositionAnchor?} [position]
+ * @property {DropList.PositionAnchor?} [anchor]
+ * @property {boolean|number?} [updateWidth=false] `true` to set width of the menu according to `target`'s width, or specify an arbitrary number.
+ * @property {string?} [targetRtl] Override for rtl mode of the target
  * @property {{x: number, y: number}} [offset=undefined] Extra rtl-aware offset to the target
  * */
 /** */
@@ -779,7 +779,7 @@ class DropList {
         }
 
         // Now set the width of the dropdown
-        if (positionOptions.updateWidth) {
+        if (positionOptions.updateWidth || typeof positionOptions.updateWidth === 'number') {
             this._updateWidth(positionOptions);
         }
 
@@ -2137,9 +2137,14 @@ class DropList {
         let targetWidth = 0;
 
         if (positionOptions) {
-            // Measure target
-            targetWidth = positionOptions.targetWidth;
-            if (targetWidth == null) {
+            if (typeof positionOptions.updateWidth === 'number') {
+                // Set from width specified
+                targetWidth = positionOptions.updateWidth;
+            } else if (positionOptions.targetWidth != null) {
+                // Set from simulated target width
+                targetWidth = positionOptions.updateWidth;
+            } else {
+                // Measure target
                 targetWidth = getElementWidth(positionOptions.target, true, true);
             }
         }
@@ -3307,27 +3312,11 @@ class SelectBox {
      * @returns {SelectBox}
      */
     clear() {
-        const p = this._p;
-
-        let clearEvt = { cancel: false };
-        this._trigger('clear:before', clearEvt);
-        if (clearEvt.cancel)
+        if (!this._performClearWithEvent(true))
             return this;
 
-        p.selectedItems = [];
-        p.selectedValues = [];
-        p.selectionChanged = true;
-        p.resortBySelectionNeeded = true;
-
-        this._trigger('clear');
-
         if (this[DestroyedSymbol]) return this; // destroyed by event handler
 
-        this._updateListItems();
-
-        this._setInputText('');
-        this._scheduleSync('full');
-
         return this;
     }
 
@@ -3991,19 +3980,11 @@ class SelectBox {
                         const item = event.item;
                         const value = event.value;
 
-                        let selectEvt = { value: value, item: item, cancel: false };
-                        this._trigger('select:before', selectEvt);
-
-                        if (selectEvt.cancel)
+                        if (!this._performSelectWithEvent(item, value))
                             return;
 
                         if (this[DestroyedSymbol]) return; // destroyed by event handler
 
-                        this._setSelectedItems([item]);
-                        this._trigger('select', { value: value, item: item });
-
-                        if (this[DestroyedSymbol]) return; // destroyed by event handler
-
                         this.closeList();
 
                         if (p.blurOnSingleSelection === 'touch' && hasTouchCapability ||
@@ -4269,6 +4250,40 @@ class SelectBox {
             });
     }
 
+    _performSelectWithEvent(item, value) {
+        let cancellable = { value: value, item: item, cancel: false };
+        this._trigger('select:before', cancellable);
+
+        if (cancellable.cancel)
+            return false;
+
+        if (this[DestroyedSymbol]) return false; // destroyed by event handler
+
+        this._setSelectedItems([item]);
+        this._trigger('select', { value: value, item: item });
+
+        return true;
+    }
+
+    _performClearWithEvent(clearInput = false) {
+        let cancellable = { cancel: false };
+        this._trigger('clear:before', cancellable);
+
+        if (cancellable.cancel)
+            return false;
+
+        if (this[DestroyedSymbol]) return false; // destroyed by event handler
+
+        this._setSelectedItems([]);
+
+        if (clearInput)
+            this._setInputText('');
+
+        this._trigger('clear');
+
+        return true;
+    }
+
     _movePrev() {
         const p = this._p;
 
@@ -4282,7 +4297,13 @@ class SelectBox {
             let nextIndex = selectedItems.length > 0 ? items.indexOf(selectedItems[0]) - 1 : (items.length - 1);
             if (nextIndex === -1 && !p.clearable)
                 nextIndex = items.length - 1;
-            this.setSelectedItems(nextIndex === -1 ? [] : [items[nextIndex]]);
+
+            let item = nextIndex === -1 ? null : items[nextIndex];
+            if (item) {
+                this._performSelectWithEvent(item, item[p.valueProp]);
+            } else {
+                this._performClearWithEvent();
+            }
         }
     }
 
@@ -4299,7 +4320,13 @@ class SelectBox {
             let nextIndex = selectedItems.length > 0 ? items.indexOf(selectedItems[0]) + 1 : 0;
             if (nextIndex === items.length)
                 nextIndex = p.clearable ? -1 : 0;
-            this.setSelectedItems(nextIndex === -1 ? [] : [items[nextIndex]]);
+
+            let item = nextIndex === -1 ? null : items[nextIndex];
+            if (item) {
+                this._performSelectWithEvent(item, item[p.valueProp]);
+            } else {
+                this._performClearWithEvent();
+            }
         }
     }