@danielgindi/selectbox 2.0.0 → 2.0.2

package/dist/lib.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 2.0.0
+ * @danielgindi/selectbox 2.0.2
  * git://github.com/danielgindi/selectbox.git
  */
 (function (global, factory) {
@@ -57,7 +57,7 @@
       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');
@@ -89,6 +89,7 @@
      * @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
@@ -161,6 +162,7 @@
 
       on: null,
 
+      isHeaderVisible: false,
       searchable: false,
       noResultsText: 'No matching results',
       filterThrottleWindow: 300,
@@ -233,6 +235,7 @@
           positionOptionsProvider: o.positionOptionsProvider ?? null,
 
           searchable: o.searchable,
+          isHeaderVisible: o.isHeaderVisible,
 
           silenceEvents: true,
           mitt: mitt(),
@@ -280,33 +283,24 @@
           });
         }
 
+        p.el = wrapperEl;
+
         let menuEl = Dom.createElement('ul');
         menuEl.role = 'menu';
+        p.menuEl = menuEl;
 
-        if (o.searchable) {
-          p.headerEl = Dom.createElement('div', {
-            class: p.baseClassName + '_header'
-          });
-
-          p.searchInput = Dom.createElement('input', {
-            type: 'search',
-            role: 'searchbox',
-            tabindex: '0',
-            autocorrect: 'off',
-            autocomplete: 'off',
-            autocapitalize: 'off',
-            spellcheck: 'false',
-            'aria-autocomplete': 'list'
-          });
+        p.headerEl = Dom.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
@@ -333,7 +327,7 @@
                 label: p.lastMeasureLongestLabelText,
                 value: 'Measure',
 
-                [ItemSymbol$1]: {
+                [ItemSymbol]: {
                   [p.labelProp]: p.lastMeasureLongestLabelText,
                   [p.valueProp]: 'Measure'
                 }
@@ -348,7 +342,7 @@
                   _nointeraction: true,
                   _nocheck: true,
 
-                  [ItemSymbol$1]: NoResultsItemSymbol
+                  [ItemSymbol]: NoResultsItemSymbol
                 };
               } else {
                 item = items[index];
@@ -394,7 +388,7 @@
 
             this._renderItemContent(item, itemEl);
 
-            itemEl[ItemSymbol$1] = item;
+            itemEl[ItemSymbol] = item;
           }
         });
 
@@ -574,7 +568,7 @@
           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);
@@ -583,19 +577,19 @@
               }
             } 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;
@@ -661,7 +655,7 @@
           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) {
@@ -693,7 +687,7 @@
           }
           this._trigger('check', {
             value: item.value,
-            item: item[ItemSymbol$1] ?? item,
+            item: item[ItemSymbol] ?? item,
             checked: item._checked,
             isGroup: item._group,
             isCheckingGroup: false
@@ -713,7 +707,7 @@
         if (p.focusItemIndex === undefined)
         p.focusItemIndex = -1;
 
-        item = item ?? p.focusItemEl[ItemSymbol$1];
+        item = item ?? p.focusItemEl[ItemSymbol];
         if (item._nointeraction) {
           return false;
         }
@@ -724,7 +718,7 @@
 
         this._trigger('select', {
           value: item ? item.value : undefined,
-          item: item[ItemSymbol$1] ?? item,
+          item: item[ItemSymbol] ?? item,
           event: event,
           el: p.focusItemEl
         });
@@ -765,7 +759,7 @@
           let oitem = itemsToAdd[i];
           //noinspection PointlessBooleanExpressionJS
           let item = {
-            [ItemSymbol$1]: oitem,
+            [ItemSymbol]: oitem,
             label: oitem[labelProp],
             value: oitem[valueProp],
             _nocheck: !!oitem._nocheck,
@@ -852,7 +846,7 @@
         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];
@@ -978,7 +972,7 @@
         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];
           }
         }
 
@@ -1048,7 +1042,7 @@
 
         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;
           }
         }
@@ -1063,7 +1057,7 @@
 
         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;
           }
         }
@@ -1072,7 +1066,7 @@
       }
 
       items() {
-        return this._p.items.map((x) => x[ItemSymbol$1]);
+        return this._p.items.map((x) => x[ItemSymbol]);
       }
 
       itemsReference() {
@@ -1084,13 +1078,42 @@
       }
 
       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;
       }
 
       /**
@@ -1158,7 +1181,30 @@
           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.
@@ -1657,7 +1703,7 @@
         let li = p.virtualListHelper.getItemElementAt(index);
         if (!li) return this;
 
-        let item = li[ItemSymbol$1];
+        let item = li[ItemSymbol];
 
         checked = checked && !item._nocheck;
 
@@ -1750,7 +1796,7 @@
           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;
@@ -1916,6 +1962,72 @@
         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 = Dom.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;
       }
@@ -1958,11 +2070,11 @@
             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
             });
@@ -2029,7 +2141,7 @@
 
         this._trigger('show_subitems', {
           value: item.value,
-          item: item[ItemSymbol$1] ?? item,
+          item: item[ItemSymbol] ?? item,
           el: itemElement,
           droplist: droplist
         });
@@ -2201,7 +2313,7 @@
         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
@@ -2216,12 +2328,12 @@
 
             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
@@ -2506,6 +2618,8 @@
           case keycodeJs.VALUE_END:
           case keycodeJs.VALUE_UP:
           case keycodeJs.VALUE_DOWN:
+            p.lastKeyWasChar = false;
+
             event.preventDefault();
 
             switch (event.key) {
@@ -2532,6 +2646,7 @@
 
           case keycodeJs.VALUE_LEFT:
           case keycodeJs.VALUE_RIGHT:
+            p.lastKeyWasChar = false;
             if (event.key === keycodeJs.VALUE_RIGHT && getComputedStyle(event.target).direction !== 'rtl' ||
             event.key === keycodeJs.VALUE_LEFT && getComputedStyle(event.target).direction === 'rtl') {
               const items = p.filteredItems ?? p.items;
@@ -2549,22 +2664,31 @@
             break;
 
           case keycodeJs.VALUE_ENTER:
+            p.lastKeyWasChar = false;
             this.triggerItemSelection(null, event);
             event.preventDefault();
             break;
 
           case keycodeJs.VALUE_SPACE:
+            if (event.target.tagName === 'BUTTON' ||
+            event.target.tagName === 'INPUT' && p.lastKeyWasChar) return;
+
             this.toggleFocusedItem();
             event.preventDefault();
             break;
 
           case keycodeJs.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 === keycodeJs.VALUE_BACK_SPACE;
+              }
 
               // Inline search box not available, then support typing to focus by first letters
               if (!p.searchable)
@@ -2579,8 +2703,10 @@
         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 === keycodeJs.VALUE_BACK_SPACE;
+        if (!isChar) return;
 
         clearTimeout(p.filterTimer);
 
@@ -2660,7 +2786,7 @@
           itemIndex = p.virtualListHelper.getItemIndexFromElement(itemEl);
         }
 
-        if (itemIndex > -1 && itemEl?.[ItemSymbol$1]?.[ItemSymbol$1] === NoResultsItemSymbol) {
+        if (itemIndex > -1 && itemEl?.[ItemSymbol]?.[ItemSymbol] === NoResultsItemSymbol) {
           itemIndex = undefined;
         }
 
@@ -2671,7 +2797,7 @@
         }
 
         let focusItemEl = itemEl || p.virtualListHelper.getItemElementAt(itemIndex);
-        if (!focusItemEl || focusItemEl[ItemSymbol$1]._nointeraction) {
+        if (!focusItemEl || focusItemEl[ItemSymbol]._nointeraction) {
           p._isFocusingItem = false;
           this.blurFocusedItem();
           return;
@@ -2693,7 +2819,7 @@
         const item = items[itemIndex];
         this._trigger('itemfocus', {
           value: item.value,
-          item: item[ItemSymbol$1] ?? item,
+          item: item[ItemSymbol] ?? item,
           event: event,
           el: focusItemEl
         });
@@ -2899,7 +3025,7 @@
               // 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
@@ -2910,7 +3036,7 @@
           // 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) {
@@ -2981,7 +3107,7 @@
             // 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
@@ -3086,7 +3212,7 @@
         // 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) {
@@ -3169,7 +3295,6 @@
       }
     }
 
-    const ItemSymbol = Symbol('item');
     const DestroyedSymbol = Symbol('destroyed');
     const RestMultiItemsSymbol = Symbol('rest_multi_items');