@danielgindi/selectbox 1.0.36 → 1.0.44

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 1.0.36
+ * @danielgindi/selectbox 1.0.44
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -114,7 +114,7 @@ Emits the following events:
 'hide:before': the drop list will hide.
 'hide': the drop list was hidden.
 'hide:after': emitted after the hide css transition has ended, or immediately after 'hide'.
-'check' {value, item, isCheckingGroup}: item was selected (in multi mode).
+'check' {value, item, checked: boolean, isGroup: boolean, isCheckingGroup: boolean}: item was selected (in multi mode).
 'groupcheck' {value, item, affectedItems}: item was selected (in multi mode).
  */
 
@@ -213,8 +213,13 @@ class DropList {
 
                 if ((/**@type any*/index) === GhostSymbol) {
                     item = {
-                        [p.labelProp]: p.lastMeasureLongestLabelText,
-                        [p.valueProp]: 'Measure',
+                        label: p.lastMeasureLongestLabelText,
+                        value: 'Measure',
+
+                        [ItemSymbol$1]: {
+                            [p.labelProp]: p.lastMeasureLongestLabelText,
+                            [p.valueProp]: 'Measure',
+                        },
                     };
                     itemEl.setAttribute('aria-hidden', 'true');
                 } else {
@@ -268,7 +273,7 @@ class DropList {
             const fn = p.unrenderItem;
             p.virtualListHelper.setOnItemUnrender(el => {
                 try {
-                    fn(el[ItemSymbol$1], el);
+                    fn(el[ItemSymbol$1][ItemSymbol$1], el);
                 } catch (err) { console.error(err); } // eslint-disable-line no-console
                 delete el[ItemSymbol$1];
 
@@ -408,7 +413,7 @@ class DropList {
         if (!item)
             return;
 
-        this._trigger('itemblur', { value: item[p.valueProp], item: item });
+        this._trigger('itemblur', { value: item.value, item: item[ItemSymbol$1] ?? item });
     }
 
     nextPage(event) {
@@ -430,7 +435,13 @@ class DropList {
             if (p.focusItemEl) {
                 toggleClass(p.focusItemEl, `${p.baseClassName}__item_checked`, item._checked);
             }
-            this._trigger('check', { value: item[p.valueProp], item: item });
+            this._trigger('check', {
+                value: item.value,
+                item: item[ItemSymbol$1] ?? item,
+                checked: item._checked,
+                isGroup: item._group,
+                isCheckingGroup: false,
+            });
 
             this._updateGroupStateForItem(item);
         }
@@ -455,7 +466,7 @@ class DropList {
             this._setSingleSelectedItemEl(p.focusItemEl);
         }
 
-        this._trigger('select', { value: item ? item[p.valueProp] : undefined, item: item });
+        this._trigger('select', { value: item ? item.value : undefined, item: item[ItemSymbol$1] ?? item });
 
         return true;
     }
@@ -494,8 +505,8 @@ class DropList {
             //noinspection PointlessBooleanExpressionJS
             let item = {
                 [ItemSymbol$1]: oitem,
-                [labelProp]: oitem[labelProp],
-                [valueProp]: oitem[valueProp],
+                label: oitem[labelProp],
+                value: oitem[valueProp],
                 _nocheck: !!oitem._nocheck,
                 _nointeraction: !!oitem._nointeraction,
             };
@@ -546,10 +557,10 @@ class DropList {
         item[ItemSymbol$1] = newItem;
 
         if (hasOwnProperty.call(newItem, p.labelProp))
-            item[p.labelProp] = newItem[p.labelProp];
+            item.label = newItem[p.labelProp];
 
         if (hasOwnProperty.call(newItem, p.valueProp))
-            item[p.valueProp] = newItem[p.valueProp];
+            item.value = newItem[p.valueProp];
 
         if (hasOwnProperty.call(newItem, '_nocheck'))
             item._nocheck = !!newItem._nocheck;
@@ -617,12 +628,12 @@ class DropList {
     }
 
     itemDataByValue(value) {
-        const p = this._p, valueProp = p.valueProp;
+        const p = this._p;
 
         for (let i = 0, count = p.items.length; i < count; i++) {
             let item = p.items[i];
-            if (item[valueProp] === value) {
-                return item;
+            if (item.value === value) {
+                return item[ItemSymbol$1];
             }
         }
 
@@ -630,11 +641,11 @@ class DropList {
     }
 
     itemIndexByValue(value) {
-        const p = this._p, valueProp = p.valueProp;
+        const p = this._p;
 
         for (let i = 0, count = p.items.length; i < count; i++) {
             let item = p.items[i];
-            if (item[valueProp] === value) {
+            if (item.value === value) {
                 return i;
             }
         }
@@ -643,11 +654,11 @@ class DropList {
     }
 
     itemIndexByValueOrLabel(value, label) {
-        const p = this._p, labelProp = p.labelProp, valueProp = p.valueProp;
+        const p = this._p;
 
         for (let i = 0, count = p.items.length; i < count; i++) {
             let item = p.items[i];
-            if (item[valueProp] === value || item[labelProp] === label) {
+            if (item.value === value || item.label === label) {
                 return i;
             }
         }
@@ -656,7 +667,7 @@ class DropList {
     }
 
     items() {
-        return this._p.items.slice(0);
+        return this._p.items.map(x => x[ItemSymbol$1]);
     }
 
     itemsReference() {
@@ -668,7 +679,7 @@ class DropList {
     }
 
     itemAtIndex(index) {
-        return this._p.items[index];
+        return this._p.items[index]?.[ItemSymbol$1];
     }
 
     /**
@@ -948,13 +959,13 @@ class DropList {
      * @returns {DropList} self
      */
     setCheckedValues(values) {
-        const p = this._p, valueProp = p.valueProp;
+        const p = this._p;
 
         let groupIndexes = [];
 
         for (let i = 0, count = p.items.length; i < count; i++) {
             let item = p.items[i];
-            let checked = !item._nocheck && values.indexOf(item[valueProp]) !== -1;
+            let checked = !item._nocheck && values.indexOf(item.value) !== -1;
 
             if (item._group) {
                 groupIndexes.push(i);
@@ -986,7 +997,7 @@ class DropList {
      * @returns {Array<*>} self
      */
     getCheckedValues(excludeGroups) {
-        const p = this._p, valueProp = p.valueProp;
+        const p = this._p;
 
         excludeGroups = excludeGroups && p.groupCount > 0;
 
@@ -996,7 +1007,7 @@ class DropList {
             let item = p.items[i];
             if (!item._checked) continue;
             if (excludeGroups && item._group) continue;
-            values.push(item[valueProp]);
+            values.push(item.value);
         }
 
         return values;
@@ -1019,7 +1030,7 @@ class DropList {
             let item = p.items[i];
             if (!item._checked) continue;
             if (excludeGroups && item._group) continue;
-            items.push(item);
+            items.push(item[ItemSymbol$1]);
         }
 
         return items;
@@ -1198,7 +1209,7 @@ class DropList {
                 itemElement.classList.add(`${p.baseClassName}__item_focus`);
                 p.focusItemEl = itemElement;
 
-                this._trigger('itemfocus', { value: itemElement[p.valueProp], item: itemElement[ItemSymbol$1], event: null });
+                this._trigger('itemfocus', { value: itemElement.value, item: itemElement[ItemSymbol$1], event: null });
             }
         }
 
@@ -1355,15 +1366,15 @@ class DropList {
     }
 
     _getItemIndex(item) {
-        const p = this._p, labelProp = p.labelProp, valueProp = p.valueProp;
+        const p = this._p;
 
         let itemIndex = -1;
 
         if (item) {
             itemIndex = p.items.indexOf(item);
             if (itemIndex === -1) {
-                let value = (item && item[valueProp] !== undefined) ? item[valueProp] : item;
-                let label = (item && item[labelProp]) ? item[labelProp] : value;
+                let value = (item && item.value !== undefined) ? item.value : item;
+                let label = (item && item.label) ? item.label : value;
                 itemIndex = this.itemIndexByValueOrLabel(value, label);
             }
         }
@@ -1599,7 +1610,7 @@ class DropList {
     }
 
     _keydownFreeType(evt) {
-        const p = this._p, labelProp = p.labelProp;
+        const p = this._p;
 
         // noinspection JSDeprecatedSymbols
         let character = evt.key || String.fromCharCode(evt.keyCode);
@@ -1618,7 +1629,7 @@ class DropList {
         // These are all the possible matches
         for (let i = 0, count = p.items.length; i < count; i++) {
             item = p.items[i];
-            if (regex.test(item[labelProp])) {
+            if (regex.test(item.label)) {
                 matchIndices.push(i);
             }
         }
@@ -1631,7 +1642,7 @@ class DropList {
 
             for (let i = 0, count = p.items.length; i < count; i++) {
                 item = p.items[i];
-                if (regex.test(item[labelProp])) {
+                if (regex.test(item.label)) {
                     matchIndices.push(i);
                 }
             }
@@ -1705,7 +1716,7 @@ class DropList {
         p.focusItemIndex = itemIndex;
 
         const item = p.items[itemIndex];
-        this._trigger('itemfocus', { value: item[p.valueProp], item: item, event: event });
+        this._trigger('itemfocus', { value: item.value, item: item[ItemSymbol$1] ?? item, event: event });
     }
 
     _delayBlur() {
@@ -1858,7 +1869,7 @@ class DropList {
     }
 
     _updateGroupStateForItem(item) {
-        const p = this._p, valueProp = p.valueProp;
+        const p = this._p;
 
         if (p.multi && p.autoCheckGroupChildren) {
 
@@ -1895,11 +1906,17 @@ class DropList {
                     }
 
                     // Fire event
-                    this._trigger('check', { value: next[valueProp], item: next, isCheckingGroup: true });
+                    this._trigger('check', {
+                        value: next.value,
+                        item: next[ItemSymbol$1] ?? next,
+                        checked: item._checked,
+                        isGroup: item._group,
+                        isCheckingGroup: true,
+                    });
                 }
 
                 // Fire event
-                this._trigger('groupcheck', { value: item[valueProp], item: 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);
@@ -1961,7 +1978,13 @@ class DropList {
 
                 if (fireEvents) {
                     // Fire event
-                    this._trigger('check', { value: groupItem[p.valueProp], item: groupItem });
+                    this._trigger('check', {
+                        value: groupItem.value,
+                        item: groupItem[ItemSymbol$1] ?? groupItem,
+                        checked: item._checked,
+                        isGroup: item._group,
+                        isCheckingGroup: false,
+                    });
                 }
             }
         }
@@ -1977,7 +2000,6 @@ class DropList {
         const p = this._p;
 
         if (p.lastMeasureItemCount !== p.items.length) {
-            const labelProp = p.labelProp, valueProp = p.valueProp;
             let longestLabel = p.lastMeasureLongestLabel || 1,
                 longestLabelText = p.lastMeasureLongestLabelText || '';
 
@@ -1986,9 +2008,9 @@ class DropList {
                  i++) {
 
                 const item = items[i];
-                let text = item[labelProp];
+                let text = item.label;
                 if (text == null)
-                    text = item[valueProp];
+                    text = item.value;
                 if (text == null)
                     text = '';
 
@@ -2037,7 +2059,7 @@ class DropList {
     }
 
     _renderItemContent(item, itemEl) {
-        const p = this._p, labelProp = p.labelProp;
+        const p = this._p;
 
         // NOTE: a "measure" item will not have full data of original item.
         //      so for a custom renderer - we try to send original item, and fallback to our private list item.
@@ -2045,7 +2067,7 @@ class DropList {
         if (!p.renderItem || p.renderItem(item[ItemSymbol$1] || item, itemEl) === false) {
             itemEl.appendChild(createElement('span', {
                 class: `${p.baseClassName}__item_label`,
-                textContent: item[labelProp],
+                textContent: item.label,
             }));
 
             if (p.multi) {
@@ -2200,7 +2222,7 @@ const inputBackbufferCssProps = [
  * @property {boolean} [hasOpenIndicator=true] has open/close indicator?
  * @property {string} [placeholder=''] Placeholder text
  * @property {boolean} [sortSelectedItems=true] Should the selected items be sorted?
- * @property {boolean} [sortListItems=true] Sort list items
+ * @property {boolean} [sortListItems=false] Sort list items
  * @property {boolean} [sortListCheckedFirst=true] When sorting - put checked items first (applicable to `multi` mode only)
  * @property {*[]} [stickyValues]
  * @property {function(a: DropList.ItemBase, b: DropList.ItemBase):number} [sortItemComparator]
@@ -2242,7 +2264,7 @@ const defaultOptions = {
     hasOpenIndicator: true,
     placeholder: '',
     sortSelectedItems: true,
-    sortListItems: true,
+    sortListItems: false,
     sortListCheckedFirst: true,
     stickyValues: null,
     sortItemComparator: null,
@@ -2370,6 +2392,7 @@ class SelectBox {
 
             items: [],
             filteredItems: null,
+            currentItemsView: [], // contains the final version of items sent to DropList
             itemsChanged: true,
 
             sink: new DomEventsSink(),
@@ -3846,8 +3869,8 @@ class SelectBox {
                         const item = /**@type DropList.Item*/event.item;
                         const value = event.value;
 
-                        let checked = item._checked;
-                        if (item._group) return; // Ignore groups
+                        let checked = event.checked;
+                        if (event.isGroup) return; // Ignore groups
 
                         let selEvt = { value: value, item: item, cancel: false };
                         this._trigger((checked ? 'addsel' : 'removesel') + ':before', selEvt);
@@ -3991,16 +4014,26 @@ class SelectBox {
 
                         switch (evt.key) {
                             case VALUE_PAGE_UP:
-                                dropList.previousPage(evt);
+                                if (dropList.isVisible())
+                                    dropList.previousPage(evt);
                                 break;
                             case VALUE_PAGE_DOWN:
-                                dropList.nextPage(evt);
+                                if (dropList.isVisible())
+                                    dropList.nextPage(evt);
                                 break;
                             case VALUE_UP:
-                                dropList.previous(evt);
+                                if (dropList.isVisible()) {
+                                    dropList.previous(evt);
+                                } else {
+                                    this._movePrev();
+                                }
                                 break;
                             case VALUE_DOWN:
-                                dropList.next(evt);
+                                if (dropList.isVisible()) {
+                                    dropList.next(evt);
+                                } else {
+                                    this._moveNext();
+                                }
                                 break;
 
                         }
@@ -4008,7 +4041,7 @@ class SelectBox {
 
                     case VALUE_SPACE:
                         if (p.lastKeyAllowsSpaceToggle) {
-                            if (dropList.hasFocusedItem()) {
+                            if (dropList.isVisible() && dropList.hasFocusedItem()) {
                                 suppressKeyPress = true;
                                 suppressKeyPressRepeat = true;
                                 if (p.multi)
@@ -4030,7 +4063,7 @@ class SelectBox {
                         break;
 
                     case VALUE_TAB:
-                        if (dropList.hasFocusedItem()) {
+                        if (dropList.isVisible() && dropList.hasFocusedItem()) {
                             dropList.triggerItemSelection(evt);
                         }
                         break;
@@ -4087,18 +4120,27 @@ class SelectBox {
 
                         switch (evt.key) {
                             case VALUE_PAGE_UP:
-                                dropList.previousPage(evt);
+                                if (dropList.isVisible())
+                                    dropList.previousPage(evt);
                                 break;
                             case VALUE_PAGE_DOWN:
-                                dropList.nextPage(evt);
+                                if (dropList.isVisible())
+                                    dropList.nextPage(evt);
                                 break;
                             case VALUE_UP:
-                                dropList.previous(evt);
+                                if (dropList.isVisible()) {
+                                    dropList.previous(evt);
+                                } else {
+                                    this._movePrev();
+                                }
                                 break;
                             case VALUE_DOWN:
-                                dropList.next(evt);
+                                if (dropList.isVisible()) {
+                                    dropList.next(evt);
+                                } else {
+                                    this._moveNext();
+                                }
                                 break;
-
                         }
                         break;
                 }
@@ -4183,6 +4225,40 @@ class SelectBox {
             });
     }
 
+    _movePrev() {
+        const p = this._p;
+
+        if (this.isMultiEnabled()) return;
+
+        let selectedItems = this.getSelectedItems();
+        let items = p.filteredItems ?? p.items;
+        if (p.currentItemsView && p.currentItemsView.length === items.length)
+            items = p.currentItemsView;
+        if ((items.length + (p.clearable ? 1 : 0)) > 1) {
+            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]]);
+        }
+    }
+
+    _moveNext() {
+        const p = this._p;
+
+        if (this.isMultiEnabled()) return;
+
+        let selectedItems = this.getSelectedItems();
+        let items = p.filteredItems ?? p.items;
+        if (p.currentItemsView && p.currentItemsView.length === items.length)
+            items = p.currentItemsView;
+        if ((items.length + (p.clearable ? 1 : 0)) > 1) {
+            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]]);
+        }
+    }
+
     /** @private */
     _updateListItems() {
         const p = this._p;
@@ -4221,6 +4297,7 @@ class SelectBox {
             }
 
             dropList.addItems(items);
+            p.currentItemsView = items;
             p.itemsChanged = false;
             p.selectionChanged = true;
             p.resortBySelectionNeeded = false;