selectic 3.0.21 → 3.1.0

package/src/Store.tsx

@@ -61,45 +61,45 @@ export type GetCallback = (_ids: OptionId[])
 export type FormatCallback = (_option: OptionItem) => OptionItem;
 
 export type SelectionOverflow =
-    /* Items are reduced in width and an ellipsis is displayed in their name. */
+    /** Items are reduced in width and an ellipsis is displayed in their name. */
     'collapsed'
     /* The container extends in height in order to display all items. */
   | 'multiline';
 
 export type ListPosition =
-    /* Display the list at bottom */
+    /** Display the list at bottom */
     'bottom'
-    /* Display the list at bottom */
+    /** Display the list at bottom */
   | 'top'
-    /* Display the list at bottom but if there is not enough space, display it at top */
+    /** Display the list at bottom but if there is not enough space, display it at top */
   | 'auto';
 
 export type HideFilter =
-    /* Display or hide the filter panel */
+    /** Display or hide the filter panel */
     boolean
-    /* The handler to open the filter panel is hidden only if there is less
+    /** The handler to open the filter panel is hidden only if there is less
      * than 10 options */
   | 'auto'
-    /* The panel filter is always open */
+    /** The panel filter is always open */
   | 'open';
 
 export type SelectAllOption =
-    /* Display the "select all" only when data are all fetched or allowRevert */
+    /** Display the "select all" only when data are all fetched or allowRevert */
     'auto'
-    /* Always display the "select all" in mulitple mode. */
+    /** Always display the "select all" in mulitple mode. */
   | 'visible';
 
 export interface SelecticStoreStateParams {
-    /* Equivalent of <select>'s "multiple" attribute */
+    /** Equivalent of <select>'s "multiple" attribute */
     multiple?: boolean;
 
-    /* Equivalent of <input>'s "placeholder" attribute */
+    /** Equivalent of <input>'s "placeholder" attribute */
     placeholder?: string;
 
-    /* Hide filter component when enabled */
+    /** Hide filter component when enabled */
     hideFilter?: HideFilter;
 
-    /* Allow to reverse selection.
+    /** Allow to reverse selection.
      * If true, parent should support the selectionIsExcluded property.
      * If false, the action is never available.
      * If undefined, the action is available only when it is not needed to
@@ -107,26 +107,26 @@ export interface SelecticStoreStateParams {
      */
     allowRevert?: boolean;
 
-    /* Force the availability of the "select all" even if all data is not fetched yet. */
+    /** Force the availability of the "select all" even if all data is not fetched yet. */
     forceSelectAll?: SelectAllOption;
 
-    /* Allow user to clear current selection */
+    /** Allow user to clear current selection */
     allowClearSelection?: boolean;
 
-    /* Number of items to retrieve in fetch request  (it is possible
+    /** Number of items to retrieve in fetch request  (it is possible
      * to fetch more items at once if several pages are requested) */
     pageSize?: number;
 
-    /* Select the first available option */
+    /** Select the first available option */
     autoSelect?: boolean;
 
-    /* Disable the select if only one option is given and must be selected. */
+    /** Disable the select if only one option is given and must be selected. */
     autoDisabled?: boolean;
 
-    /* Accept only values which are in options */
+    /** Accept only values which are in options */
     strictValue?: boolean;
 
-    /* Define how the component should behave when selected items are too
+    /** Define how the component should behave when selected items are too
      * large for the container.
      *     collapsed (default): Items are reduced in width and an ellipsis
      *                          is displayed in their name.
@@ -135,69 +135,80 @@ export interface SelecticStoreStateParams {
      */
     selectionOverflow?: SelectionOverflow;
 
-    /* Called when item is displayed in the list. */
+    /** Called when item is displayed in the list. */
     formatOption?: FormatCallback;
 
-    /* Called when item is displayed in the selection area. */
+    /** Called when item is displayed in the selection area. */
     formatSelection?: FormatCallback;
 
-    /* Described behavior when options from several sources are set (static, dynamic, slots)
+    /** Described behavior when options from several sources are set (static, dynamic, slots)
      * It describe what to do (sort or force)
      * and the order (O → static options, D → dynamic options, E → slot elements)
      * Example: "sort-ODE"
      */
     optionBehavior?: string;
 
-    /* Indicate where the list should be deployed */
+    /** Indicate where the list should be deployed */
     listPosition?: ListPosition;
 
-    /* If true, the component is open at start */
+    /** If true, the component is open at start */
     isOpen?: boolean;
+
+    /** Avoid selecting all items when clicking on group's header */
+    disableGroupSelection?: boolean;
 }
 
 export interface Props {
-    /* Selected value */
+    /** Selected value */
     value?: SelectedValue | null;
 
-    /* If true, the value represents the ones we don't want to select */
+    /** If true, the value represents the ones we don't want to select */
     selectionIsExcluded?: boolean;
 
-    /* Equivalent of "disabled" Select's attribute */
+    /** Equivalent of "disabled" Select's attribute */
     disabled?: boolean;
 
-    /* List of options to display */
+    /** List of options to display */
     options?: OptionProp[] | null;
 
-    /* List of options to display from child elements */
+    /** List of options to display from child elements */
     childOptions?: OptionValue[];
 
-    /* Define groups which will be used by items */
+    /** Define groups which will be used by items */
     groups?: GroupValue[];
 
-    /* Overwrite default texts */
+    /** Overwrite default texts */
     texts?: PartialMessages | null;
 
-    /* Keep this component open if another Selectic component opens */
+    /** Overwrite default icons */
+    icons?: PartialIcons | null;
+
+    /** Overwrite default icon family */
+    iconFamily?: IconFamily | null;
+
+    /** Keep this component open if another Selectic component opens */
     keepOpenWithOtherSelectic?: boolean;
 
-    /* Selectic configuration */
+    /** Selectic configuration */
     params?: SelecticStoreStateParams;
 
-    /* Method to call to fetch extra data */
+    /** Method to call to fetch extra data */
     fetchCallback?: FetchCallback | null;
 
-    /* Method to call to get specific item */
+    /** Method to call to get specific item */
     getItemsCallback?: GetCallback | null;
 }
 
 type InternalProps = MandateProps<Props>;
 
 export interface Data {
-    /* Number of items displayed in a page (before scrolling) */
+    /** Number of items displayed in a page (before scrolling) */
     itemsPerPage: number;
 
     labels: Messages;
-    /* used to avoid checking and updating table while doing batch stuff */
+    icons: PartialIcons;
+    iconFamily: IconFamily;
+    /** used to avoid checking and updating table while doing batch stuff */
     doNotUpdate: boolean;
     cacheItem: Map<OptionId, OptionValue>;
     activeOrder: OptionBehaviorOrder;
@@ -205,28 +216,28 @@ export interface Data {
 }
 
 export interface SelecticStoreState {
-    /* The current selected values */
+    /** The current selected values */
     internalValue: SelectedValue;
 
-    /* If true, user wants to choose the opposite selection */
+    /** If true, user wants to choose the opposite selection */
     selectionIsExcluded: boolean;
 
-    /* If true, several value can be selected */
+    /** If true, several value can be selected */
     multiple: boolean;
 
-    /* If true, no change can be done by user */
+    /** If true, no change can be done by user */
     disabled: boolean;
 
-    /* Define the default text to display when there is no selection */
+    /** Define the default text to display when there is no selection */
     placeholder: string;
 
-    /* If true, filters and controls are hidden */
+    /** If true, filters and controls are hidden */
     hideFilter: boolean;
 
-    /* If true, the filter panel is always open */
+    /** If true, the filter panel is always open */
     keepFilterOpen: boolean;
 
-    /* Allow to reverse selection.
+    /** Allow to reverse selection.
      * If true, parent should support the selectionIsExcluded property.
      * If false, the action is never available.
      * If undefined, the action is available only when it is not needed to
@@ -234,101 +245,134 @@ export interface SelecticStoreState {
      */
     allowRevert?: boolean;
 
-    /* If true, user can clear current selection
+    /** If true, user can clear current selection
      * (if false, it is still possible to clear it programmatically) */
     allowClearSelection: boolean;
 
-    /* If false, do not select the first available option even if value is mandatory */
+    /** If false, do not select the first available option even if value is mandatory */
     autoSelect: boolean;
 
-    /* If true, Selectic is disabled if there is only one mandatory option. */
+    /** If true, Selectic is disabled if there is only one mandatory option. */
     autoDisabled: boolean;
 
-    /* If true, only values which are in options are accepted. */
+    /** If true, only values which are in options are accepted. */
     strictValue: boolean;
 
-    /* Define how to behave when selected items are too large for container. */
+    /** Define how to behave when selected items are too large for container. */
     selectionOverflow: SelectionOverflow;
 
-    /* If true, the list is displayed */
+    /** If true, the list is displayed */
     isOpen: boolean;
 
-    /* Text entered by user to look for options */
+    /** Text entered by user to look for options */
     searchText: string;
 
-    /* Contains all known options */
+    /** Contains all known options */
     allOptions: OptionValue[];
 
-    /* Contains all fetched dynamic options */
+    /** Contains all fetched dynamic options */
     dynOptions: OptionValue[];
 
-    /* Contains options which should be displayed */
+    /** Contains options which should be displayed */
     filteredOptions: OptionItem[];
 
-    /* Contains options which are selected */
+    /** Contains options which are selected */
     selectedOptions: OptionItem | OptionItem[] | null;
 
-    /* The total number of all options (static + dynamic + elements) without any filter */
+    /** The total number of all options (static + dynamic + elements) without any filter */
     totalAllOptions: number;
 
-    /* The total number of options which can be fetched (without any filter) */
+    /** The total number of options which can be fetched (without any filter) */
     totalDynOptions: number;
 
-    /* The total number of options which should be displayed (filter is applied) */
+    /** The total number of options which should be displayed (filter is applied) */
     totalFilteredOptions: number;
 
-    /* Description of groups (optGroup) */
+    /** Description of groups (optGroup) */
     groups: Map<OptionId, string>;
 
-    /* Starting index of options which are displayed */
+    /** Starting index of options which are displayed */
     offsetItem: number;
 
-    /* Index of active item */
+    /** Index of active item */
     activeItemIdx: number;
 
-    /* Number of items to fetch per page */
+    /** Number of items to fetch per page */
     pageSize: number;
 
-    /* Called when item is displayed in the list. */
+    /** Called when item is displayed in the list. */
     formatOption?: FormatCallback;
 
-    /* Called when item is displayed in the selection area. */
+    /** Called when item is displayed in the selection area. */
     formatSelection?: FormatCallback;
 
-    /* Operation to apply when there are several sources */
+    /** Operation to apply when there are several sources */
     optionBehaviorOperation: OptionBehaviorOperation;
 
-    /* Order of sources options */
+    /** Order of sources options */
     optionBehaviorOrder: OptionBehaviorOrder[];
 
-    /* Indicate where the list should be deployed */
+    /** Indicate where the list should be deployed */
     listPosition: ListPosition;
 
-    /* If true, the "select All" is still available even if all data are not fetched yet. */
+    /** If true, the "select All" is still available even if all data are not fetched yet. */
     forceSelectAll: SelectAllOption;
 
-    /* Inner status which should be modified only by store */
+    /** Avoid selecting all items when clicking on group's header */
+    disableGroupSelection: boolean;
+
+    /** Inner status which should be modified only by store */
     status: {
-        /* If true, a search is currently done */
+        /** If true, a search is currently done */
         searching: boolean;
 
-        /* If not empty, an error happens */
+        /** If not empty, an error happens */
         errorMessage: string;
 
-        /* If true it means that all options are selected */
+        /** If true it means that all options are selected */
         areAllSelected: boolean;
 
-        /* If true, a change has been done by user */
+        /** If true, a change has been done by user */
         hasChanged: boolean;
 
-        /* If true, it means the current change has been done automatically by Selectic */
+        /** If true, it means the current change has been done automatically by Selectic */
         automaticChange: boolean;
 
-        /* If true, it means the current close has been done automatically by Selectic */
+        /** If true, it means the current close has been done automatically by Selectic */
         automaticClose: boolean;
     };
 }
 
+export type IconFamily = ''
+    | 'selectic'
+    | 'font-awesome-4'
+    | 'font-awesome-5'
+    | 'font-awesome-6'
+    | 'raw'
+    | `prefix:${string}`
+;
+
+export type IconKey =
+    | 'caret-down'
+    | 'caret-up'
+    | 'check'
+    | 'search'
+    | 'spinner'
+    | 'strikethrough'
+    | 'times'
+    | 'question'
+    | 'spin'
+;
+
+export type IconValue =
+    | `selectic:${IconKey}${'' | ':spin'}`
+    | `raw:${string}`
+    | `current:${IconKey}${'' | ':spin'}`
+    | string
+;
+export type Icons = Record<IconKey, IconValue>;
+export type PartialIcons = { [K in IconKey]?: Icons[K] };
+
 interface Messages {
     noFetchMethod: string;
     searchPlaceholder: string;
@@ -358,6 +402,14 @@ export function changeTexts(texts: PartialMessages) {
     messages = Object.assign(messages, texts);
 }
 
+export function changeIcons(newIcons: PartialIcons, newFamilyIcon?: IconFamily) {
+    icons = Object.assign(icons, newIcons);
+
+    if (newFamilyIcon) {
+        defaultFamilyIcon = newFamilyIcon;
+    }
+}
+
 /* }}} */
 
 let messages: Messages = {
@@ -380,6 +432,10 @@ let messages: Messages = {
     wrongQueryResult: 'Query did not return all results.',
 };
 
+let defaultFamilyIcon: IconFamily = 'selectic';
+let icons: PartialIcons = {
+};
+
 let closePreviousSelectic: undefined | voidCaller;
 
 /* }}} */
@@ -402,9 +458,12 @@ export default class SelecticStore {
     /* }}} */
     /* {{{ computed */
 
-    /* Number of item to pre-display */
+    /** Number of item to pre-display */
     public marginSize: ComputedRef<number>;
 
+    /** If true, it is possible to click on group to select all items inside */
+    public allowGroupSelection: ComputedRef<boolean>;
+
     public isPartial: ComputedRef<boolean>;
     public hasAllItems: ComputedRef<boolean>;
     public hasFetchedAllItems: ComputedRef<boolean>;
@@ -428,6 +487,8 @@ export default class SelecticStore {
             childOptions: [],
             groups: [],
             texts: null,
+            icons: null,
+            iconFamily: null,
             params: {},
             fetchCallback: null,
             getItemsCallback: null,
@@ -440,51 +501,52 @@ export default class SelecticStore {
         /* {{{ data */
 
         this.state = reactive<SelecticStoreState>({
-            multiple: false,
-            disabled: false,
-            placeholder: '',
-            hideFilter: false,
-            keepFilterOpen: false,
-            allowRevert: undefined,
+            activeItemIdx: -1,
+            allOptions: [],
             allowClearSelection: false,
-            autoSelect: true,
+            allowRevert: undefined,
             autoDisabled: true,
-            strictValue: false,
-            selectionOverflow: 'collapsed',
-
+            autoSelect: true,
+            disabled: false,
+            disableGroupSelection: false,
+            dynOptions: [],
+            filteredOptions: [],
+            forceSelectAll: 'auto',
+            groups: new Map(),
+            hideFilter: false,
             internalValue: null,
             isOpen: false,
+            keepFilterOpen: false,
+            listPosition: 'auto',
+            multiple: false,
+            offsetItem: 0,
+            optionBehaviorOperation: 'sort',
+            optionBehaviorOrder: ['O', 'D', 'E'],
+            pageSize: 100,
+            placeholder: '',
             searchText: '',
-            selectionIsExcluded: false,
-            forceSelectAll: 'auto',
-            allOptions: [],
-            dynOptions: [],
-            filteredOptions: [],
             selectedOptions: null,
+            selectionIsExcluded: false,
+            selectionOverflow: 'collapsed',
+            strictValue: false,
             totalAllOptions: Infinity,
             totalDynOptions: Infinity,
             totalFilteredOptions: Infinity,
-            groups: new Map(),
-            offsetItem: 0,
-            activeItemIdx: -1,
-            pageSize: 100,
-            listPosition: 'auto',
-
-            optionBehaviorOperation: 'sort',
-            optionBehaviorOrder: ['O', 'D', 'E'],
 
             status: {
-                searching: false,
-                errorMessage: '',
                 areAllSelected: false,
-                hasChanged: false,
                 automaticChange: false,
                 automaticClose: false,
+                errorMessage: '',
+                hasChanged: false,
+                searching: false,
             },
         });
 
         this.data = reactive({
             labels: Object.assign({}, messages),
+            icons: Object.assign({}, icons),
+            iconFamily: defaultFamilyIcon,
             itemsPerPage: 10,
             doNotUpdate: false,
             cacheItem: new Map(),
@@ -539,6 +601,10 @@ export default class SelecticStore {
             return this.getElementOptions();
         });
 
+        this.allowGroupSelection = computed(() => {
+            return this.state.multiple && !this.isPartial.value && !this.state.disableGroupSelection;
+        });
+
         /* }}} */
         /* {{{ watch */
 
@@ -585,6 +651,11 @@ export default class SelecticStore {
 
         watch(() => this.state.internalValue, () => {
             this.buildSelectedOptions();
+            /* If there is only one item, and the previous selected value was
+             * different, then if we change it to the only available item we
+             * should disable Selectic (user has no more choice).
+             * This is why it is needed to check autoDisabled here. */
+            this.checkAutoDisabled();
         }, { deep: true });
 
         watch(() => this.state.allOptions, () => {
@@ -641,6 +712,9 @@ export default class SelecticStore {
         if (this.props.texts) {
             this.changeTexts(this.props.texts);
         }
+        if (this.props.icons || this.props.iconFamily) {
+            this.changeIcons(this.props.icons, this.props.iconFamily);
+        }
 
         this.addGroups(this.props.groups);
         this.assertValueType();
@@ -779,19 +853,47 @@ export default class SelecticStore {
         return this.buildSelectedItems(ids);
     }
 
-    public selectItem(id: OptionId, selected?: boolean, keepOpen = false) {
+    public selectGroup(id: OptionId, itemsSelected: boolean) {
+        const state = this.state;
+
+        if (!unref(this.allowGroupSelection)) {
+            return;
+        }
+
+        const selectItem = this.selectItem.bind(this);
+        let hasChanged = false;
+        this.data.doNotUpdate = true;
+        const items = state.filteredOptions.filter((item) => {
+            const isInGroup = item.group === id && !item.exclusive && !item.disabled;
+
+            if (isInGroup) {
+                hasChanged = selectItem(item.id, itemsSelected, true) || hasChanged;
+            }
+
+            return isInGroup;
+        });
+        this.data.doNotUpdate = false;
+
+        if (hasChanged && items.length) {
+            this.updateFilteredOptions();
+        }
+
+        return;
+    }
+
+    public selectItem(id: OptionId, selected?: boolean, keepOpen = false): boolean {
         const state = this.state;
         let hasChanged = false;
         const item = state.allOptions.find((opt) => opt.id === id);
 
         /* Check that item is not disabled */
         if (item?.disabled) {
-            return;
+            return hasChanged;
         }
 
         if (state.strictValue && !this.hasValue(id)) {
             /* reject invalid values */
-            return;
+            return hasChanged;
         }
 
         if (state.multiple) {
@@ -844,12 +946,12 @@ export default class SelecticStore {
 
             if (!selected) {
                 if (id !== oldValue) {
-                    return;
+                    return hasChanged;
                 }
                 id = null;
             } else
             if (id === oldValue) {
-                return;
+                return hasChanged;
             }
 
             if (keepOpen) {
@@ -863,6 +965,8 @@ export default class SelecticStore {
         if (hasChanged) {
             state.status.hasChanged = true;
         }
+
+        return hasChanged;
     }
 
     public toggleSelectAll() {
@@ -950,6 +1054,16 @@ export default class SelecticStore {
         this.data.labels = Object.assign({}, this.data.labels, texts);
     }
 
+    public changeIcons(icons: PartialIcons | null, family?: IconFamily | null) {
+        if (icons) {
+            this.data.icons = Object.assign({}, this.data.icons, icons);
+        }
+
+        if (typeof family === 'string') {
+            this.data.iconFamily = family;
+        }
+    }
+
     /* }}} */
     /* {{{ private methods */
 
@@ -1073,6 +1187,7 @@ export default class SelecticStore {
         if (!this.data.doNotUpdate) {
             this.state.filteredOptions = this.buildItems(this.state.filteredOptions);
             this.buildSelectedOptions();
+            this.updateGroupSelection();
         }
     }
 
@@ -1082,7 +1197,7 @@ export default class SelecticStore {
         });
     }
 
-    /* This method is for the computed property listOptions */
+    /** This method is for the computed property listOptions */
     private getListOptions(): OptionValue[] {
         const options = deepClone(this.props.options, ['data']);
         const listOptions: OptionValue[] = [];
@@ -1256,13 +1371,11 @@ export default class SelecticStore {
             /* Do not fetch again just build filteredOptions */
             const search = this.state.searchText;
             if (!search) {
-                this.state.filteredOptions = this.buildGroupItems(allOptions);
-                this.state.totalFilteredOptions = this.state.filteredOptions.length;
+                this.setFilteredOptions(this.buildGroupItems(allOptions));
                 return;
             }
             const options = this.filterOptions(allOptions, search);
-            this.state.filteredOptions = options;
-            this.state.totalFilteredOptions = this.state.filteredOptions.length;
+            this.setFilteredOptions(options);
         }
     }
 
@@ -1288,14 +1401,12 @@ export default class SelecticStore {
         /* Check if all options have been fetched */
         if (hasFetchedAllItems) {
             if (!search) {
-                this.state.filteredOptions = this.buildGroupItems(allOptions);
-                this.state.totalFilteredOptions = this.state.filteredOptions.length;
+                this.setFilteredOptions(this.buildGroupItems(allOptions));
                 return;
             }
 
             const options = this.filterOptions(allOptions, search);
-            this.state.filteredOptions = options;
-            this.state.totalFilteredOptions = this.state.filteredOptions.length;
+            this.setFilteredOptions(options);
             return;
         }
 
@@ -1310,8 +1421,7 @@ export default class SelecticStore {
         }
 
         if (!search && endIndex <= allOptionsLength) {
-            this.state.filteredOptions = this.buildGroupItems(allOptions);
-            this.state.totalFilteredOptions = totalAllOptions + this.state.groups.size;
+            this.setFilteredOptions(this.buildGroupItems(allOptions), false, totalAllOptions + this.state.groups.size);
             const isPartial = unref(this.isPartial);
             if (isPartial && this.state.totalDynOptions === Infinity) {
                 this.fetchData();
@@ -1447,7 +1557,7 @@ export default class SelecticStore {
                     /* Added options are the same as previous ones.
                      * Stop fetching to avoid infinite loop
                      */
-                    if (!this.hasFetchedAllItems) {
+                    if (!unref(this.hasFetchedAllItems)) {
                         /* Display error if all items are not fetch
                          * We can have the case where old value and result
                          * are the same but total is correct when the
@@ -1472,6 +1582,10 @@ export default class SelecticStore {
                 const options = this.buildGroupItems(result, previousItem);
                 const nbGroups1 = this.nbGroups(options);
 
+                /* replace existing options by what have been received
+                 * or add received options.
+                 * This allow to manage requests received in different orders.
+                 */
                 state.filteredOptions.splice(offset + dynOffset, limit + nbGroups1, ...options);
             }
 
@@ -1481,6 +1595,7 @@ export default class SelecticStore {
             }
 
             state.totalFilteredOptions = total + nbGroups + dynOffset;
+            this.updateGroupSelection();
 
             if (search && state.totalFilteredOptions <= state.filteredOptions.length) {
                 this.addStaticFilteredOptions(true);
@@ -1538,8 +1653,7 @@ export default class SelecticStore {
                     options = this.filterOptions(unref(this.elementOptions), search);
                     break;
             }
-            this.state.filteredOptions.push(...options);
-            this.state.totalFilteredOptions += options.length;
+            this.setFilteredOptions(options, true);
         }
     }
 
@@ -1715,6 +1829,59 @@ export default class SelecticStore {
         }
     }
 
+    /** update group item, to mark them as selected if needed */
+    private updateGroupSelection() {
+        const state = this.state;
+
+        if (!unref(this.allowGroupSelection)) {
+            return;
+        }
+
+        const filteredOptions = state.filteredOptions;;
+        const groupIdx = new Map<OptionId, number>();
+        const groupAllSelected = new Map<OptionId, boolean>();
+        const groupNbItem = new Map<OptionId, number>();
+
+        filteredOptions.forEach((option, idx) => {
+            const groupId = option.group;
+
+            if (option.isGroup) {
+                const id = option.id;
+                groupIdx.set(id, idx);
+                groupAllSelected.set(id, true);
+            } else
+            if (groupId !== undefined) {
+                if (option.disabled || option.exclusive) {
+                    return;
+                }
+
+                groupNbItem.set(groupId, (groupNbItem.get(groupId) || 0) + 1)
+
+                if (!option.selected) {
+                    groupAllSelected.set(groupId, false);
+                }
+            }
+        });
+
+        for (const [id, idx] of groupIdx.entries()) {
+            const group = filteredOptions[idx];
+            group.selected = !!(groupAllSelected.get(id) && groupNbItem.get(id));
+        }
+    }
+
+    /** assign new value to the filteredOptions and apply change depending on it */
+    private setFilteredOptions(options: OptionItem[], add = false, length = 0) {
+        if (!add) {
+            this.state.filteredOptions = options;
+            this.state.totalFilteredOptions = length || options.length;
+        } else {
+            this.state.filteredOptions.push(...options);
+            this.state.totalFilteredOptions += length || options.length;
+        }
+
+        this.updateGroupSelection();
+    }
+
     /* }}} */
     /* }}} */