@danielgindi/selectbox 2.0.0 → 2.0.2

package/lib/DropList.js

@@ -18,6 +18,7 @@ import {
 import DomEventsSink from '@danielgindi/dom-utils/lib/DomEventsSink';
 import VirtualListHelper from '@danielgindi/virtual-list-helper';
 import {
+    VALUE_BACK_SPACE,
     VALUE_DOWN,
     VALUE_END,
     VALUE_ENTER, VALUE_ESCAPE,
@@ -62,6 +63,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
@@ -134,6 +136,7 @@ let defaultOptions = {
 
     on: null,
 
+    isHeaderVisible: false,
     searchable: false,
     noResultsText: 'No matching results',
     filterThrottleWindow: 300,
@@ -206,6 +209,7 @@ class DropList {
             positionOptionsProvider: o.positionOptionsProvider ?? null,
 
             searchable: o.searchable,
+            isHeaderVisible: o.isHeaderVisible,
 
             silenceEvents: true,
             mitt: mitt(),
@@ -253,33 +257,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
@@ -1066,6 +1061,35 @@ class DropList {
         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;
+    }
+
     /**
      * @param {function(dropList: DropList):DropList.PositionOptions} fn
      * @returns {DropList}
@@ -1131,7 +1155,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.
@@ -1889,6 +1936,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;
     }
@@ -2174,7 +2287,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
@@ -2189,12 +2302,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
@@ -2479,6 +2592,8 @@ class DropList {
             case VALUE_END:
             case VALUE_UP:
             case VALUE_DOWN:
+                p.lastKeyWasChar = false;
+
                 event.preventDefault();
 
                 switch (event.key) {
@@ -2505,6 +2620,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;
@@ -2522,22 +2638,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)
@@ -2552,8 +2677,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);
 
@@ -3143,3 +3270,4 @@ class DropList {
 }
 
 export default DropList;
+export { ItemSymbol };

package/lib/SelectBox.js

@@ -22,7 +22,7 @@ import {
 } from '@danielgindi/dom-utils/lib/DomCompat';
 
 import DomEventsSink from '@danielgindi/dom-utils/lib/DomEventsSink';
-import DropList from './DropList';
+import DropList, { ItemSymbol } from './DropList';
 import {
     VALUE_BACK_SPACE,
     VALUE_DELETE, VALUE_DOWN, VALUE_END, VALUE_ENTER,
@@ -35,7 +35,6 @@ import {
 } from 'keycode-js';
 import mitt from 'mitt';
 
-const ItemSymbol = Symbol('item');
 const DestroyedSymbol = Symbol('destroyed');
 const RestMultiItemsSymbol = Symbol('rest_multi_items');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A collection of dom utilities. So you can work natively with the dom without dom frameworks.",
   "main": "dist/lib.cjs.min.js",
   "module": "lib/index.js",
@@ -51,7 +51,7 @@
     "sass": "^1.85.0"
   },
   "dependencies": {
-    "@danielgindi/dom-utils": "^1.0.10",
+    "@danielgindi/dom-utils": "^1.0.11",
     "@danielgindi/virtual-list-helper": "^1.0.13",
     "fast-deep-equal": "^3.1.3",
     "keycode-js": "^3.1.0",

package/vue/DropList.vue

@@ -53,6 +53,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        isHeaderVisible: {
+            type: Boolean,
+            default: false,
+        },
         searchable: {
             type: Boolean,
             default: false,
@@ -204,6 +208,7 @@ export default {
             for (let key of ['autoItemBlur', 'capturesFocus', 'multi',
                 'autoCheckGroupChildren', 'useExactTargetWidth', 'constrainToWindow',
                 'autoFlipDirection', 'estimateWidth',
+                'isHeaderVisible',
                 'searchable', 'filterOnEmptyTerm',
                 'filterGroups', 'filterEmptyGroups']) {
                 if (typeof this[key] === 'boolean') {
@@ -340,8 +345,16 @@ export default {
             this._recreateList();
         },
 
-        searchable() {
-            this._recreateList();
+        searchable(v) {
+            if (this.nonReactive.instance)
+                this.nonReactive.instance.setSearchable(v);
+            this.relayout();
+        },
+
+        isHeaderVisible(v) {
+            if (this.nonReactive.instance)
+                this.nonReactive.instance.setHeaderVisible(v);
+            this.relayout();
         },
 
         positionOptions: {
@@ -437,6 +450,11 @@ export default {
                 list.setSingleSelectedItemByValue(modelValue === null ? undefined : modelValue);
             }
 
+            const headerRenderer = createSlotBasedRenderFunc(this, 'header');
+            if (headerRenderer) {
+                headerRenderer({}, list.getHeaderElement());
+            }
+
             list.show();
 
             this._setupAutoRelayout();
@@ -506,6 +524,11 @@ export default {
                 this.nonReactive.instance.relayout();
         },
 
+        getHeaderElement() {
+            if (this.nonReactive.instance)
+                this.nonReactive.instance.getHeaderElement();
+        },
+
         elContains(other, considerSublists = true) {
             return !!this.listRef?.elContains(other, considerSublists);
         },