@danielgindi/selectbox 2.0.0 → 2.0.2

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 2.0.0
+ * @danielgindi/selectbox 2.0.2
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -7,7 +7,7 @@ import { remove, toggleClass, before, append, getRootNode } from '@danielgindi/d
 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 { VALUE_ESCAPE, VALUE_SPACE, VALUE_ENTER, VALUE_RIGHT, VALUE_LEFT, VALUE_DOWN, VALUE_UP, VALUE_END, VALUE_HOME, VALUE_PAGE_DOWN, VALUE_PAGE_UP, VALUE_TAB, VALUE_DELETE, VALUE_BACK_SPACE } from 'keycode-js';
+import { VALUE_BACK_SPACE, VALUE_ESCAPE, VALUE_SPACE, VALUE_ENTER, VALUE_RIGHT, VALUE_LEFT, VALUE_DOWN, VALUE_UP, VALUE_END, VALUE_HOME, VALUE_PAGE_DOWN, VALUE_PAGE_UP, VALUE_TAB, VALUE_DELETE } from 'keycode-js';
 import mitt from 'mitt';
 
 var escapeRegex = value => value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
@@ -59,7 +59,7 @@ const throttle = (func, wait, options) => {
     return throttled;
 };
 
-const ItemSymbol$1 = Symbol('item');
+const ItemSymbol = Symbol('item');
 const DestroyedSymbol$1 = Symbol('destroyed');
 const GhostSymbol = Symbol('ghost');
 const NoResultsItemSymbol = Symbol('no_results_items');
@@ -91,6 +91,7 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
  * @property {function(item: DropList.ItemBase, itemEl: Element):(*|false)} [renderNoResultsItem]
  * @property {function(item: DropList.ItemBase, itemEl: Element)} [unrenderNoResultsItem]
  * @property {function(name: string, data: *)} [on]
+ * @property {boolean} [isHeaderVisible=false] show header element
  * @property {boolean} [searchable=false] include inline search box
  * @property {string} [noResultsText='No matching results'] text for no results (empty for none)
  * @property {number} [filterThrottleWindow=300] throttle time (milliseconds) for filtering
@@ -163,6 +164,7 @@ let defaultOptions$1 = {
 
     on: null,
 
+    isHeaderVisible: false,
     searchable: false,
     noResultsText: 'No matching results',
     filterThrottleWindow: 300,
@@ -235,6 +237,7 @@ class DropList {
             positionOptionsProvider: o.positionOptionsProvider ?? null,
 
             searchable: o.searchable,
+            isHeaderVisible: o.isHeaderVisible,
 
             silenceEvents: true,
             mitt: mitt(),
@@ -282,33 +285,24 @@ class DropList {
             });
         }
 
+        p.el = wrapperEl;
+
         let menuEl = createElement('ul');
         menuEl.role = 'menu';
+        p.menuEl = menuEl;
 
-        if (o.searchable) {
-            p.headerEl = createElement('div', {
-                class:  p.baseClassName + '_header',
-            });
-
-            p.searchInput = createElement('input', {
-                type: 'search',
-                role: 'searchbox',
-                tabindex: '0',
-                autocorrect: 'off',
-                autocomplete: 'off',
-                autocapitalize: 'off',
-                spellcheck: 'false',
-                'aria-autocomplete': 'list',
-            });
+        p.headerEl = createElement('div', {
+            class: p.baseClassName + '_header',
+        });
 
-            p.headerEl.appendChild(p.searchInput);
-            wrapperEl.appendChild(p.headerEl);
+        if (o.searchable) {
+            this.setSearchable(true);
         }
 
-        wrapperEl.appendChild(menuEl);
+        if (o.isHeaderVisible)
+            this.setHeaderVisible(o.isHeaderVisible);
 
-        p.el = wrapperEl;
-        p.menuEl = menuEl;
+        wrapperEl.appendChild(menuEl);
 
         p.items = [];
         p.groupCount = 0; // This will keep state of how many `group` items we have
@@ -335,7 +329,7 @@ class DropList {
                         label: p.lastMeasureLongestLabelText,
                         value: 'Measure',
 
-                        [ItemSymbol$1]: {
+                        [ItemSymbol]: {
                             [p.labelProp]: p.lastMeasureLongestLabelText,
                             [p.valueProp]: 'Measure',
                         },
@@ -350,7 +344,7 @@ class DropList {
                             _nointeraction: true,
                             _nocheck: true,
 
-                            [ItemSymbol$1]: NoResultsItemSymbol,
+                            [ItemSymbol]: NoResultsItemSymbol,
                         };
                     } else {
                         item = items[index];
@@ -396,7 +390,7 @@ class DropList {
 
                 this._renderItemContent(item, itemEl);
 
-                itemEl[ItemSymbol$1] = item;
+                itemEl[ItemSymbol] = item;
             },
         });
 
@@ -576,7 +570,7 @@ class DropList {
             const fn = p.unrenderItem;
             const fnNoResults = p.unrenderNoResultsItem;
             p.virtualListHelper.setOnItemUnrender(el => {
-                const item = el[ItemSymbol$1];
+                const item = el[ItemSymbol];
                 if (item === NoResultsItemSymbol) {
                     try {
                         fnNoResults(item, el);
@@ -585,19 +579,19 @@ class DropList {
                     }
                 } else {
                     try {
-                        fn(item[ItemSymbol$1], el);
+                        fn(item[ItemSymbol], el);
                     } catch (err) {
                         console.error(err); // eslint-disable-line no-console
                     }
                 }
-                delete el[ItemSymbol$1];
+                delete el[ItemSymbol];
 
                 if (p.focusItemEl === el)
                     p.focusItemEl = null;
             });
         } else {
             p.virtualListHelper.setOnItemUnrender(el => {
-                delete el[ItemSymbol$1];
+                delete el[ItemSymbol];
 
                 if (p.focusItemEl === el)
                     p.focusItemEl = null;
@@ -663,7 +657,7 @@ class DropList {
             this._hideSublist();
         }
 
-        this._trigger('itemblur', { value: item.value, item: item[ItemSymbol$1] ?? item });
+        this._trigger('itemblur', { value: item.value, item: item[ItemSymbol] ?? item });
     }
 
     nextPage(event) {
@@ -695,7 +689,7 @@ class DropList {
             }
             this._trigger('check', {
                 value: item.value,
-                item: item[ItemSymbol$1] ?? item,
+                item: item[ItemSymbol] ?? item,
                 checked: item._checked,
                 isGroup: item._group,
                 isCheckingGroup: false,
@@ -715,7 +709,7 @@ class DropList {
         if (p.focusItemIndex === undefined)
             p.focusItemIndex = -1;
 
-        item = item ?? p.focusItemEl[ItemSymbol$1];
+        item = item ?? p.focusItemEl[ItemSymbol];
         if (item._nointeraction) {
             return false;
         }
@@ -726,7 +720,7 @@ class DropList {
 
         this._trigger('select', {
             value: item ? item.value : undefined,
-            item: item[ItemSymbol$1] ?? item,
+            item: item[ItemSymbol] ?? item,
             event: event,
             el: p.focusItemEl,
         });
@@ -767,7 +761,7 @@ class DropList {
             let oitem = itemsToAdd[i];
             //noinspection PointlessBooleanExpressionJS
             let item = {
-                [ItemSymbol$1]: oitem,
+                [ItemSymbol]: oitem,
                 label: oitem[labelProp],
                 value: oitem[valueProp],
                 _nocheck: !!oitem._nocheck,
@@ -854,7 +848,7 @@ class DropList {
         if (itemIndex === -1) return this;
 
         let item = this.itemAtIndex(itemIndex);
-        item[ItemSymbol$1] = newItem;
+        item[ItemSymbol] = newItem;
 
         if (hasOwnProperty.call(newItem, p.labelProp))
             item.label = newItem[p.labelProp];
@@ -980,7 +974,7 @@ class DropList {
         for (let i = 0, count = p.items.length; i < count; i++) {
             let item = p.items[i];
             if (item.value === value) {
-                return item[ItemSymbol$1];
+                return item[ItemSymbol];
             }
         }
 
@@ -1050,7 +1044,7 @@ class DropList {
 
         for (let i = 0, count = items.length; i < count; i++) {
             let it = items[i];
-            if (it[ItemSymbol$1] === item) {
+            if (it[ItemSymbol] === item) {
                 return i;
             }
         }
@@ -1065,7 +1059,7 @@ class DropList {
 
         for (let i = 0, count = items.length; i < count; i++) {
             let it = items[i];
-            if (it[ItemSymbol$1] === item) {
+            if (it[ItemSymbol] === item) {
                 return i;
             }
         }
@@ -1074,7 +1068,7 @@ class DropList {
     }
 
     items() {
-        return this._p.items.map(x => x[ItemSymbol$1]);
+        return this._p.items.map(x => x[ItemSymbol]);
     }
 
     itemsReference() {
@@ -1086,13 +1080,42 @@ class DropList {
     }
 
     itemAtIndex(index) {
-        return this._p.items[index]?.[ItemSymbol$1];
+        return this._p.items[index]?.[ItemSymbol];
     }
 
     filteredItemAtIndex(index) {
         const p = this._p;
         const items = p.filteredItems ?? p.items;
-        return items[index]?.[ItemSymbol$1];
+        return items[index]?.[ItemSymbol];
+    }
+
+    /**
+     * Return the item element at the given original index, if it exists.
+     * The item may not be currently rendered, and null will be returned
+     * @param index
+     * @returns {HTMLElement|null}
+     */
+    itemElementAtIndex(index) {
+        const p = this._p;
+        if (!p.filteredItems)
+            return this.filteredElementItemAtIndex(index);
+
+        index = p.filteredItems.indexOf(this._p.items[index]);
+
+        const li = p.virtualListHelper.getItemElementAt(index);
+        return li ?? null;
+    }
+
+    /**
+     * Return the item element at the given index, if it exists.
+     * The item may not be currently rendered, and null will be returned
+     * @param index
+     * @returns {HTMLElement|null}
+     */
+    filteredElementItemAtIndex(index) {
+        const p = this._p;
+        const li = p.virtualListHelper.getItemElementAt(index);
+        return li ?? null;
     }
 
     /**
@@ -1160,7 +1183,30 @@ class DropList {
             let filteredItems;
 
             if (typeof fn === 'function') {
-                filteredItems = p.filterFn(p.items, term);
+                // Send the original items to the filter function
+                filteredItems = p.filterFn(
+                    p.items.map(x => x[ItemSymbol] ?? x),
+                    term);
+
+                if (Array.isArray(filteredItems)) {
+                    // And back
+                    filteredItems = filteredItems.map(oitem => {
+                        let our = oitem[ItemSymbol];
+                        if (!our) {
+                            our = {
+                                [ItemSymbol]: oitem,
+                                label: oitem[p.labelProp],
+                                value: oitem[p.valueProp],
+                                _nocheck: !!oitem._nocheck,
+                                _nointeraction: !!oitem._nointeraction,
+                                _subitems: oitem._subitems,
+                                _group: !!oitem._group,
+                                _checked: !!oitem._checked,
+                            };
+                        }
+                        return our;
+                    });
+                }
             }
 
             // If there was no filter function, or it gave up on filtering.
@@ -1659,7 +1705,7 @@ class DropList {
         let li = p.virtualListHelper.getItemElementAt(index);
         if (!li) return this;
 
-        let item = li[ItemSymbol$1];
+        let item = li[ItemSymbol];
 
         checked = checked && !item._nocheck;
 
@@ -1752,7 +1798,7 @@ class DropList {
             let item = p.items[i];
             if (!item._checked) continue;
             if (excludeGroups && item._group) continue;
-            items.push(item[ItemSymbol$1]);
+            items.push(item[ItemSymbol]);
         }
 
         return items;
@@ -1918,6 +1964,72 @@ class DropList {
         return p.el.parentNode && getComputedStyle(p.el).display !== 'none';
     }
 
+    /**
+     * Change visibility of the header element
+     * You should probably call `relayout()` after this.
+     * @param {boolean} visible
+     */
+    setHeaderVisible(visible) {
+        let isVisible = this.isHeaderVisible();
+        if (isVisible === !!visible)
+            return;
+
+        if (visible) {
+            this._p.el.insertBefore(this._p.headerEl, this._p.el.firstChild ?? null);
+        } else {
+            this._p.headerEl.remove();
+        }
+    }
+
+    /**
+     * Is the header element visible?
+     * @returns {boolean}
+     */
+    isHeaderVisible() {
+        return !!this._p.headerEl.parentNode;
+    }
+
+    /**
+     * Get a reference to the header element in order to add custom content.
+     * @returns {Element}
+     */
+    getHeaderElement() {
+        return this._p.headerEl;
+    }
+
+    /**
+     * Set inline search visibility
+     * You should probably call `relayout()` after this.
+     * @param {boolean} searchable
+     */
+    setSearchable(searchable) {
+        const p = this._p;
+
+        if (!!p.searchInput === !!searchable)
+            return;
+
+        if (searchable) {
+            p.searchInput = createElement('input', {
+                type: 'search',
+                role: 'searchbox',
+                tabindex: '0',
+                autocorrect: 'off',
+                autocomplete: 'off',
+                autocapitalize: 'off',
+                spellcheck: 'false',
+                'aria-autocomplete': 'list',
+            });
+
+            p.headerEl.appendChild(p.searchInput);
+        } else {
+            if (p.searchInput.parentNode)
+                p.searchInput.remove();
+            p.searchInput = null;
+        }
+
+        this.setHeaderVisible(searchable);
+    }
+
     hasFocusedItem() {
         return this._p.focusItemIndex > -1;
     }
@@ -1960,11 +2072,11 @@ class DropList {
                 itemElement.classList.add(`${p.baseClassName}__item_focus`);
                 p.focusItemEl = itemElement;
 
-                const item = itemElement[ItemSymbol$1];
+                const item = itemElement[ItemSymbol];
 
                 this._trigger('itemfocus', {
                     value: item.value,
-                    item: item[ItemSymbol$1] ?? item,
+                    item: item[ItemSymbol] ?? item,
                     event: null,
                     el: itemElement,
                 });
@@ -2031,7 +2143,7 @@ class DropList {
 
         this._trigger('show_subitems', {
             value: item.value,
-            item: item[ItemSymbol$1] ?? item,
+            item: item[ItemSymbol] ?? item,
             el: itemElement,
             droplist: droplist,
         });
@@ -2203,7 +2315,7 @@ class DropList {
         const p = this._p;
 
         if (this._hasScroll()) {
-            const el = p.el, scrollTop = el.scrollTop;
+            const menuEl = p.menuEl, scrollTop = menuEl.scrollTop;
 
             let itemPos, previousPos = -1;
             let maxIterations = 30; // Some zoom/scroll issues can make it so that it takes almost forever
@@ -2218,12 +2330,12 @@ class DropList {
 
                 let itemSize = p.virtualListHelper.getItemSize(itemIndex);
 
-                let listHeight = el.clientHeight;
+                let listHeight = menuEl.clientHeight;
 
                 if (itemPos < scrollTop) {
-                    el.scrollTop = itemPos;
+                    menuEl.scrollTop = itemPos;
                 } else if (itemPos + itemSize > scrollTop + listHeight) {
-                    el.scrollTop = itemPos + itemSize - listHeight;
+                    menuEl.scrollTop = itemPos + itemSize - listHeight;
                 }
 
                 // force update items, until the positions and sizes are final
@@ -2508,6 +2620,8 @@ class DropList {
             case VALUE_END:
             case VALUE_UP:
             case VALUE_DOWN:
+                p.lastKeyWasChar = false;
+
                 event.preventDefault();
 
                 switch (event.key) {
@@ -2534,6 +2648,7 @@ class DropList {
 
             case VALUE_LEFT:
             case VALUE_RIGHT:
+                p.lastKeyWasChar = false;
                 if (event.key === VALUE_RIGHT && getComputedStyle(event.target).direction !== 'rtl' ||
                     event.key === VALUE_LEFT && getComputedStyle(event.target).direction === 'rtl') {
                     const items = p.filteredItems ?? p.items;
@@ -2551,22 +2666,31 @@ class DropList {
                 break;
 
             case VALUE_ENTER:
+                p.lastKeyWasChar = false;
                 this.triggerItemSelection(null, event);
                 event.preventDefault();
                 break;
 
             case VALUE_SPACE:
+                if (event.target.tagName === 'BUTTON' ||
+                    event.target.tagName === 'INPUT' && p.lastKeyWasChar) return;
+
                 this.toggleFocusedItem();
                 event.preventDefault();
                 break;
 
             case VALUE_ESCAPE:
+                p.lastKeyWasChar = false;
                 event.preventDefault();
                 this.hide();
                 break;
 
             default: {
-                if (event.type === 'keydown') return;
+                if (event.target.tagName === 'INPUT' ||
+                    event.target.tagName === 'TEXTAREA') {
+                    const character = event.key || String.fromCharCode(event.keyCode);
+                    p.lastKeyWasChar = character.length === 1 || event.key === VALUE_BACK_SPACE;
+                }
 
                 // Inline search box not available, then support typing to focus by first letters
                 if (!p.searchable)
@@ -2581,8 +2705,10 @@ class DropList {
         const p = this._p;
 
         // noinspection JSDeprecatedSymbols
-        let character = evt.key || String.fromCharCode(evt.keyCode);
-        if (character.length !== 1) return;
+        const character = evt.key || String.fromCharCode(evt.keyCode);
+        const isChar = character.length === 1;
+        p.lastKeyWasChar = isChar || evt.key === VALUE_BACK_SPACE;
+        if (!isChar) return;
 
         clearTimeout(p.filterTimer);
 
@@ -2662,7 +2788,7 @@ class DropList {
             itemIndex = p.virtualListHelper.getItemIndexFromElement(itemEl);
         }
 
-        if (itemIndex > -1 && itemEl?.[ItemSymbol$1]?.[ItemSymbol$1] === NoResultsItemSymbol) {
+        if (itemIndex > -1 && itemEl?.[ItemSymbol]?.[ItemSymbol] === NoResultsItemSymbol) {
             itemIndex = undefined;
         }
 
@@ -2673,7 +2799,7 @@ class DropList {
         }
 
         let focusItemEl = itemEl || p.virtualListHelper.getItemElementAt(itemIndex);
-        if (!focusItemEl || focusItemEl[ItemSymbol$1]._nointeraction) {
+        if (!focusItemEl || focusItemEl[ItemSymbol]._nointeraction) {
             p._isFocusingItem = false;
             this.blurFocusedItem();
             return;
@@ -2695,7 +2821,7 @@ class DropList {
         const item = items[itemIndex];
         this._trigger('itemfocus', {
             value: item.value,
-            item: item[ItemSymbol$1] ?? item,
+            item: item[ItemSymbol] ?? item,
             event: event,
             el: focusItemEl,
         });
@@ -2901,7 +3027,7 @@ class DropList {
                     // Fire event
                     this._trigger('check', {
                         value: next.value,
-                        item: next[ItemSymbol$1] ?? next,
+                        item: next[ItemSymbol] ?? next,
                         checked: next._checked,
                         isGroup: next._group,
                         isCheckingGroup: true,
@@ -2912,7 +3038,7 @@ class DropList {
             // Fire event
             this._trigger('groupcheck', {
                 value: item.value,
-                item: item[ItemSymbol$1] ?? item,
+                item: item[ItemSymbol] ?? item,
                 affectedItems: affectedItems,
             });
         } else if (p.groupCount > 0 && p.autoCheckGroupChildren) {
@@ -2983,7 +3109,7 @@ class DropList {
                 // Fire event
                 this._trigger('check', {
                     value: groupItem.value,
-                    item: groupItem[ItemSymbol$1] ?? groupItem,
+                    item: groupItem[ItemSymbol] ?? groupItem,
                     checked: groupItem._checked,
                     isGroup: groupItem._group,
                     isCheckingGroup: false,
@@ -3088,7 +3214,7 @@ class DropList {
         // 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.
 
-        const originalItem = item[ItemSymbol$1];
+        const originalItem = item[ItemSymbol];
 
         if (originalItem === NoResultsItemSymbol) {
             if (p.renderNoResultsItem && p.renderNoResultsItem(item, itemEl) !== false) {
@@ -3171,7 +3297,6 @@ class DropList {
     }
 }
 
-const ItemSymbol = Symbol('item');
 const DestroyedSymbol = Symbol('destroyed');
 const RestMultiItemsSymbol = Symbol('rest_multi_items');