@danielgindi/selectbox 2.0.0 → 2.0.2

package/dist/lib.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 2.0.0
+ * @danielgindi/selectbox 2.0.2
  * git://github.com/danielgindi/selectbox.git
  */
 'use strict';
@@ -61,7 +61,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');
@@ -93,6 +93,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
@@ -165,6 +166,7 @@ let defaultOptions$1 = {
 
   on: null,
 
+  isHeaderVisible: false,
   searchable: false,
   noResultsText: 'No matching results',
   filterThrottleWindow: 300,
@@ -237,6 +239,7 @@ class DropList {
       positionOptionsProvider: o.positionOptionsProvider ?? null,
 
       searchable: o.searchable,
+      isHeaderVisible: o.isHeaderVisible,
 
       silenceEvents: true,
       mitt: mitt(),
@@ -284,33 +287,24 @@ class DropList {
       });
     }
 
+    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
@@ -337,7 +331,7 @@ class DropList {
             label: p.lastMeasureLongestLabelText,
             value: 'Measure',
 
-            [ItemSymbol$1]: {
+            [ItemSymbol]: {
               [p.labelProp]: p.lastMeasureLongestLabelText,
               [p.valueProp]: 'Measure'
             }
@@ -352,7 +346,7 @@ class DropList {
               _nointeraction: true,
               _nocheck: true,
 
-              [ItemSymbol$1]: NoResultsItemSymbol
+              [ItemSymbol]: NoResultsItemSymbol
             };
           } else {
             item = items[index];
@@ -398,7 +392,7 @@ class DropList {
 
         this._renderItemContent(item, itemEl);
 
-        itemEl[ItemSymbol$1] = item;
+        itemEl[ItemSymbol] = item;
       }
     });
 
@@ -578,7 +572,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);
@@ -587,19 +581,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;
@@ -665,7 +659,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) {
@@ -697,7 +691,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
@@ -717,7 +711,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;
     }
@@ -728,7 +722,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
     });
@@ -769,7 +763,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,
@@ -856,7 +850,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];
@@ -982,7 +976,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];
       }
     }
 
@@ -1052,7 +1046,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;
       }
     }
@@ -1067,7 +1061,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;
       }
     }
@@ -1076,7 +1070,7 @@ class DropList {
   }
 
   items() {
-    return this._p.items.map((x) => x[ItemSymbol$1]);
+    return this._p.items.map((x) => x[ItemSymbol]);
   }
 
   itemsReference() {
@@ -1088,13 +1082,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;
   }
 
   /**
@@ -1162,7 +1185,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.
@@ -1661,7 +1707,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;
 
@@ -1754,7 +1800,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;
@@ -1920,6 +1966,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 = 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;
   }
@@ -1962,11 +2074,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
         });
@@ -2033,7 +2145,7 @@ class DropList {
 
     this._trigger('show_subitems', {
       value: item.value,
-      item: item[ItemSymbol$1] ?? item,
+      item: item[ItemSymbol] ?? item,
       el: itemElement,
       droplist: droplist
     });
@@ -2205,7 +2317,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
@@ -2220,12 +2332,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
@@ -2510,6 +2622,8 @@ class DropList {
       case keycodeJs.VALUE_END:
       case keycodeJs.VALUE_UP:
       case keycodeJs.VALUE_DOWN:
+        p.lastKeyWasChar = false;
+
         event.preventDefault();
 
         switch (event.key) {
@@ -2536,6 +2650,7 @@ class DropList {
 
       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;
@@ -2553,22 +2668,31 @@ class DropList {
         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)
@@ -2583,8 +2707,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 === keycodeJs.VALUE_BACK_SPACE;
+    if (!isChar) return;
 
     clearTimeout(p.filterTimer);
 
@@ -2664,7 +2790,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;
     }
 
@@ -2675,7 +2801,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;
@@ -2697,7 +2823,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
     });
@@ -2903,7 +3029,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
@@ -2914,7 +3040,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) {
@@ -2985,7 +3111,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
@@ -3090,7 +3216,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) {
@@ -3173,7 +3299,6 @@ class DropList {
   }
 }
 
-const ItemSymbol = Symbol('item');
 const DestroyedSymbol = Symbol('destroyed');
 const RestMultiItemsSymbol = Symbol('rest_multi_items');