@danielgindi/selectbox 1.0.63 → 1.0.66

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 1.0.63
+ * @danielgindi/selectbox 1.0.66
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -1937,17 +1937,17 @@ class DropList {
     _updateGroupStateForItem(item) {
         const p = this._p;
 
-        if (p.multi && p.autoCheckGroupChildren) {
-
-            let items, groupIndex, itemIndex;
+        if (!p.multi)
+            return this;
 
-            if (item._group) {
-                // Now loop through children below the group
+        if (item._group) {
+            // Now loop through children below the group
 
-                items = p.items;
-                groupIndex = items.indexOf(item);
+            let affectedItems = 0;
 
-                let affectedItems = 0;
+            if (p.autoCheckGroupChildren) {
+                let items = p.items;
+                let groupIndex = items.indexOf(item);
 
                 for (let i = groupIndex + 1, len = items.length; i < len; i++) {
                     let next = items[i];
@@ -1980,30 +1980,30 @@ class DropList {
                         isCheckingGroup: true,
                     });
                 }
+            }
 
-                // Fire event
-                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);
-                groupIndex = -1;
-
-                // Find the group index
-                for (let i = itemIndex - 1; i >= 0; i--) {
-                    if (items[i]._group) {
-                        groupIndex = i;
-                        break;
-                    }
-                }
+            // Fire event
+            this._trigger('groupcheck', {
+                value: item.value,
+                item: item[ItemSymbol$1] ?? item,
+                affectedItems: affectedItems,
+            });
+        } else if (p.groupCount > 0 && p.autoCheckGroupChildren) {
+            let items = p.items;
+            let itemIndex = items.indexOf(item);
+            let groupIndex = -1;
 
-                if (groupIndex > -1) {
-                    this._updateGroupCheckedState(groupIndex, true);
+            // Find the group index
+            for (let i = itemIndex - 1; i >= 0; i--) {
+                if (items[i]._group) {
+                    groupIndex = i;
+                    break;
                 }
             }
+
+            if (groupIndex > -1) {
+                this._updateGroupCheckedState(groupIndex, true);
+            }
         }
 
         return this;
@@ -2012,50 +2012,50 @@ class DropList {
     _updateGroupCheckedState(groupIndex, fireEvents) {
         const p = this._p;
 
-        if (p.multi && p.autoCheckGroupChildren && groupIndex > -1) {
+        if (!(p.multi && p.autoCheckGroupChildren && groupIndex > -1))
+            return this;
 
-            let items = p.items;
-            let groupItem = items[groupIndex];
-            if (!groupItem || !groupItem._group) return this;
+        let items = p.items;
+        let groupItem = items[groupIndex];
 
-            let item, hasChecked = false, hasUnchecked = false;
+        if (!groupItem || !groupItem._group) return this;
 
-            for (let i = groupIndex + 1, len = items.length; i < len; i++) {
-                item = items[i];
+        let item, hasChecked = false, hasUnchecked = false;
 
-                // Hit the next group, break out
-                if (item._group || (!item._child && items[i - 1]._child))
-                    break;
+        for (let i = groupIndex + 1, len = items.length; i < len; i++) {
+            item = items[i];
 
-                if (item._checked) {
-                    hasChecked = true;
-                } else if (!item._checked) {
-                    hasUnchecked = true;
-                }
+            // Hit the next group, break out
+            if (item._group || (!item._child && items[i - 1]._child))
+                break;
+
+            if (item._checked) {
+                hasChecked = true;
+            } else if (!item._checked) {
+                hasUnchecked = true;
             }
+        }
 
-            // See if we need to update the group
-            let shouldCheckGroup = hasChecked && !hasUnchecked;
-            if (!!groupItem._checked !== shouldCheckGroup) {
-                // Update state
-                groupItem._checked = shouldCheckGroup;
+        let shouldCheckGroup = hasChecked && !hasUnchecked;
+        if (!!groupItem._checked !== shouldCheckGroup) {
+            // Update state
+            groupItem._checked = shouldCheckGroup;
 
-                // Update DOM
-                let nextEl = p.virtualListHelper.getItemElementAt(groupIndex);
-                if (nextEl) {
-                    toggleClass(nextEl, `${p.baseClassName}__item_checked`, groupItem._checked);
-                }
+            // Update DOM
+            let nextEl = p.virtualListHelper.getItemElementAt(groupIndex);
+            if (nextEl) {
+                toggleClass(nextEl, `${p.baseClassName}__item_checked`, groupItem._checked);
+            }
 
-                if (fireEvents) {
-                    // Fire event
-                    this._trigger('check', {
-                        value: groupItem.value,
-                        item: groupItem[ItemSymbol$1] ?? groupItem,
-                        checked: groupItem._checked,
-                        isGroup: groupItem._group,
-                        isCheckingGroup: false,
-                    });
-                }
+            if (fireEvents) {
+                // Fire event
+                this._trigger('check', {
+                    value: groupItem.value,
+                    item: groupItem[ItemSymbol$1] ?? groupItem,
+                    checked: groupItem._checked,
+                    isGroup: groupItem._group,
+                    isCheckingGroup: false,
+                });
             }
         }
 
@@ -2299,6 +2299,7 @@ const inputBackbufferCssProps = [
  * @property {boolean} [sortSelectedItems=true] Should the selected items be sorted?
  * @property {boolean} [sortListItems=false] Sort list items
  * @property {boolean} [sortListCheckedFirst=true] When sorting - put checked items first (applicable to `multi` mode only)
+ * @property {boolean} [treatGroupSelectionAsItems=false] Treat group items as normal items
  * @property {*[]} [stickyValues]
  * @property {function(a: DropList.ItemBase, b: DropList.ItemBase):number} [sortItemComparator]
  * @property {boolean} [splitListCheckedGroups=true] Split groups to "checked" and "unchecked", works with `sortCheckedFirst` only
@@ -2344,6 +2345,7 @@ const defaultOptions = {
     stickyValues: null,
     sortItemComparator: null,
     splitListCheckedGroups: true,
+    treatGroupSelectionAsItems: false,
     blurOnSingleSelection: 'touch',
     multi: false,
     showSelection: true,
@@ -2433,6 +2435,7 @@ class SelectBox {
             stickyValues: Array.isArray(o.stickyValues) ? new Set(o.stickyValues) : null,
             sortItemComparator: o.sortItemComparator,
             splitListCheckedGroups: !!o.splitListCheckedGroups,
+            treatGroupSelectionAsItems: o.treatGroupSelectionAsItems,
             blurOnSingleSelection: o.blurOnSingleSelection,
             multi: o.multi,
             showSelection: o.showSelection,
@@ -2978,6 +2981,29 @@ class SelectBox {
         return this._p.sortItemComparator;
     }
 
+    /**
+     * @param {boolean} treatGroupSelectionAsItems
+     * @returns {SelectBox}
+     */
+    setTreatGroupSelectionAsItems(treatGroupSelectionAsItems) {
+        const p = this._p;
+        treatGroupSelectionAsItems = !!treatGroupSelectionAsItems;
+        if (p.treatGroupSelectionAsItems === treatGroupSelectionAsItems)
+            return this;
+
+        p.treatGroupSelectionAsItems = treatGroupSelectionAsItems;
+        p.itemsChanged = true;
+        this._scheduleSync();
+        return this;
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    isTreatGroupSelectionAsItemsEnabled() {
+        return !this._p.treatGroupSelectionAsItems;
+    }
+
     /**
      * @param {boolean} splitListCheckedGroups
      * @returns {SelectBox}
@@ -3929,7 +3955,7 @@ class SelectBox {
                         const value = event.value;
 
                         let checked = event.checked;
-                        if (event.isGroup) return; // Ignore groups
+                        if (event.isGroup && !p.treatGroupSelectionAsItems) return; // Ignore groups
 
                         let selEvt = { value: value, item: item, cancel: false };
                         this._trigger((checked ? 'addsel' : 'removesel') + ':before', selEvt);
@@ -3965,7 +3991,7 @@ class SelectBox {
                                         this._scheduleSync('full');
                                 } else {
                                     if (p.maxMultiItems != null &&
-                                        p.selectedItems.filter(x => !x._group).length > p.maxMultiItems) {
+                                        (p.treatGroupSelectionAsItems ? p.selectedItems : p.selectedItems.filter(x => !x._group)).length > p.maxMultiItems) {
                                         this._scheduleSync('addOrUpdateMultiItemRestElement');
                                     } else {
                                         this._scheduleSync('addMultiItemElement', item);
@@ -3976,7 +4002,7 @@ class SelectBox {
                                 }
                             } else {
                                 if (p.maxMultiItems != null &&
-                                    p.selectedItems.filter(x => !x._group).length === p.maxMultiItems) {
+                                    (p.treatGroupSelectionAsItems ? p.selectedItems : p.selectedItems.filter(x => !x._group)).length === p.maxMultiItems) {
                                     this._scheduleSync('removeMultiItemRestElement');
                                 } else {
                                     this._scheduleSync('removeMultiItemElement', item);
@@ -4428,6 +4454,7 @@ class SelectBox {
         const p = this._p;
 
         const term = p.filterTerm;
+        const treatGroupSelectionAsItems = p.treatGroupSelectionAsItems;
 
         if (term || (p.filterOnEmptyTerm && p.filterFn)) {
             let fn = p.filterFn;
@@ -4446,7 +4473,7 @@ class SelectBox {
                         multiItemLabelProp = p.multiItemLabelProp;
 
                     filteredItems = p.items.filter(x => {
-                        if (x._group) return true;
+                        if (!treatGroupSelectionAsItems && x._group) return true;
                         return matcher.test(x[labelProp] || x[multiItemLabelProp]);
                     });
                 } else {
@@ -4456,7 +4483,7 @@ class SelectBox {
 
             p.filteredItems = filteredItems;
 
-            if (filteredItems) {
+            if (filteredItems && !treatGroupSelectionAsItems) {
                 // Clean up groups without children
 
                 let lastGroup = -1;
@@ -4698,15 +4725,18 @@ class SelectBox {
 
     /**
      * @param {DropList.ItemBase} item
+     * @returns {boolean} true if rendered, false if not
      * @private
      */
     _addMultiItemElement(item) {
         const p = this._p;
         const itemEl = this._renderMultiItem(item);
-        if (!itemEl) return;
+        if (!itemEl) return false;
 
         before(p.inputWrapper, itemEl);
         p.multiItemEls.push(itemEl);
+
+        return true;
     }
 
     /** @private */
@@ -4714,7 +4744,7 @@ class SelectBox {
         const p = this._p;
 
         let items = p.selectedItems.slice(0);
-        let count = items.filter(x => !x._group).length - p.maxMultiItems;
+        let count = (p.treatGroupSelectionAsItems ? items : items.filter(x => !x._group)).length - p.maxMultiItems;
         let label = p.multiItemsRestLabelProvider
             ? p.multiItemsRestLabelProvider(count, items)
             : `+ ${count}`;
@@ -4728,10 +4758,13 @@ class SelectBox {
 
     /** @private */
     _syncClearButton() {
-        const p = this._p;
+        const p = this._p,
+            multiItemLabelProp = p.multiItemLabelProp;
 
         // Set clear button
-        if (p.selectedItems.length > 0 && p.clearable && p.showSelection) {
+        if (p.selectedItems.length > 0 &&
+            p.selectedItems.some(x => x[multiItemLabelProp] !== false) &&
+            p.clearable && p.showSelection) {
             if (!p.clearButtonWrapper) {
                 p.clearButtonWrapper = createElement(
                     p.multi ? 'li' : 'span',
@@ -4761,7 +4794,8 @@ class SelectBox {
 
     /** @private */
     _syncPlaceholder() {
-        const p = this._p;
+        const p = this._p,
+            multiItemLabelProp = p.multiItemLabelProp;
 
         let placeholder = '';
 
@@ -4771,7 +4805,9 @@ class SelectBox {
             } else {
                 placeholder = defaultMultiPlaceholderFormatter(p.selectedItems, p.labelProp);
             }
-        } else if (p.selectedItems.length === 0 || !p.showSelection) {
+        } else if (p.selectedItems.length === 0 ||
+            !p.showSelection ||
+            p.selectedItems.every(x => x[multiItemLabelProp] === false)) {
             placeholder = p.placeholder == null ? '' : (p.placeholder + '');
         }
 
@@ -4800,13 +4836,16 @@ class SelectBox {
      * @returns {SelectBox}
      */
     _syncFull(fullItemsRender) {
-        const p = this._p;
+        const p = this._p,
+            multiItemLabelProp = p.multiItemLabelProp;
 
         this._renderBase();
         this._syncClearButton();
         this._syncPlaceholder();
 
-        fullItemsRender = p.multi && p.showSelection && (fullItemsRender || p.selectedItems.length !== p.multiItemEls.length);
+        fullItemsRender = p.multi &&
+            p.showSelection &&
+            (fullItemsRender || p.selectedItems.filter(x => x[multiItemLabelProp] !== false).length !== p.multiItemEls.length);
 
         if (fullItemsRender || !p.showSelection || !p.multi) {
             // Remove all item elements
@@ -4819,6 +4858,7 @@ class SelectBox {
         if (p.multi) {
             if (fullItemsRender) {
                 const items = p.selectedItems;
+                const treatGroupSelectionAsItems = p.treatGroupSelectionAsItems;
 
                 // Sort these
                 if (p.sortSelectedItems) {
@@ -4851,15 +4891,16 @@ class SelectBox {
 
                 // Add item elements
                 for (let i = 0; i < items.length; i++) {
-                    if (items[i]._group) continue;
+                    if (!treatGroupSelectionAsItems && items[i]._group) continue;
 
                     if (max != null && actualItemCount === max) {
                         addRestItem = true;
                         break;
                     }
 
-                    actualItemCount++;
-                    this._addMultiItemElement(items[i]);
+                    if (this._addMultiItemElement(items[i])) {
+                        actualItemCount++;
+                    }
                 }
 
                 if (addRestItem) {
@@ -4964,7 +5005,8 @@ class SelectBox {
 
         if (item !== undefined) {
             if (value === RestMultiItemsSymbol) {
-                let items = p.selectedItems.filter(x => !x._group).slice(p.maxMultiItems);
+                let items = (p.treatGroupSelectionAsItems ? p.selectedItems : p.selectedItems.filter(x => !x._group))
+                    .slice(p.maxMultiItems);
                 let itemsToRemove = [];
 
                 for (let item of items) {