@syncfusion/ej2-dropdowns 34.2.8 → 35.1.39

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 34.2.8
+*  version : 35.1.39
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "34.2.8",
+  "version": "35.1.39",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,13 +8,13 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~34.2.8",
-    "@syncfusion/ej2-data": "~34.2.8",
-    "@syncfusion/ej2-inputs": "~34.2.8",
-    "@syncfusion/ej2-lists": "~34.2.8",
-    "@syncfusion/ej2-navigations": "~34.2.8",
-    "@syncfusion/ej2-notifications": "~34.2.8",
-    "@syncfusion/ej2-popups": "~34.2.8"
+    "@syncfusion/ej2-base": "~35.1.37",
+    "@syncfusion/ej2-data": "~35.1.37",
+    "@syncfusion/ej2-inputs": "~35.1.37",
+    "@syncfusion/ej2-lists": "~35.1.37",
+    "@syncfusion/ej2-navigations": "~35.1.39",
+    "@syncfusion/ej2-notifications": "~35.1.37",
+    "@syncfusion/ej2-popups": "~35.1.39"
   },
   "devDependencies": {},
   "keywords": [

package/src/common/interface.d.ts

@@ -108,7 +108,7 @@ export interface IDropdownlist extends Component<HTMLElement> {
     handleVirtualKeyboardActions(e: KeyboardEventArgs, pageCount: number): void;
     resetList(dataSource?: {
         [key: string]: Object;
-    }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query, e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
+    }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query, e?: MouseEvent | KeyboardEventArgs | TouchEvent, skipExecuteLocal?: boolean): void;
     findListElement(list: HTMLElement, findNode: string, attribute: string, value: string | boolean | number): HTMLElement;
     scrollStop(e?: Event): void;
     targetElement(): string;

package/src/common/virtual-scroll.js

@@ -247,7 +247,14 @@ var VirtualScroll = /** @class */ (function () {
                     if (oldUlElement) {
                         this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
                     }
-                    this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    if (this.component === 'multiselect' && this.parent.value.length >= this.parent.getSummaryTagThreshold() &&
+                        this.parent.mode === 'CheckBox' && this.parent.enableVirtualization) {
+                        this.parent.resetList(this.parent.dataSource, this.parent.fields, query, undefined, true);
+                    }
+                    else {
+                        this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                    }
                     isListUpdated = false;
                     this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ? this.parent.appendUncheckList : false;
                     oldUlElement = null;

package/src/drop-down-base/drop-down-base.d.ts

@@ -583,6 +583,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @param {MouseEvent | KeyboardEventArgs | TouchEvent} event - Specifies the event which is the reason for the invocation of this method.
+     * @param {boolean} skipExecuteLocal - Specifies whether to skip executing the local query on the data source and use unchecked values instead.
      * @returns {void}
      */
     private setListData;
@@ -706,11 +707,12 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - Specifies the event.
+     * @param {boolean} skipExecuteLocal - Specifies whether to skip executing the local query on the data source and use unchecked values instead.
      * @returns {void}
      */
     protected resetList(dataSource?: {
         [key: string]: Object;
-    }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query, e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
+    }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query, e?: MouseEvent | KeyboardEventArgs | TouchEvent, skipExecuteLocal?: boolean): void;
     protected updateSelectElementData(isFiltering: boolean): void;
     protected updateSelection(): void;
     protected renderList(): void;

package/src/drop-down-base/drop-down-base.js

@@ -745,9 +745,10 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @param {MouseEvent | KeyboardEventArgs | TouchEvent} event - Specifies the event which is the reason for the invocation of this method.
+     * @param {boolean} skipExecuteLocal - Specifies whether to skip executing the local query on the data source and use unchecked values instead.
      * @returns {void}
      */
-    DropDownBase.prototype.setListData = function (dataSource, fields, query, event) {
+    DropDownBase.prototype.setListData = function (dataSource, fields, query, event, skipExecuteLocal) {
         var _this = this;
         fields = fields ? fields : this.fields;
         var ulElement;
@@ -908,7 +909,13 @@ var DropDownBase = /** @class */ (function (_super) {
                             _this.virtualGroupDataSource
                             && !_this.isCustomDataUpdated ? new DataManager(_this.virtualGroupDataSource) :
                             new DataManager(eventArgs.data);
-                        listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        if (!skipExecuteLocal) {
+                            listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        }
+                        else {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            listItems = { count: _this.uncheckedValues.length, result: _this.uncheckedValues };
+                        }
                         if (!_this.virtualSelectAll) {
                             var newQuery = _this.getQuery(eventArgs.query);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1823,9 +1830,10 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
      * @param {Query} query - Accepts the external Query that execute along with data processing.
      * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - Specifies the event.
+     * @param {boolean} skipExecuteLocal - Specifies whether to skip executing the local query on the data source and use unchecked values instead.
      * @returns {void}
      */
-    DropDownBase.prototype.resetList = function (dataSource, fields, query, e) {
+    DropDownBase.prototype.resetList = function (dataSource, fields, query, e, skipExecuteLocal) {
         if (this.list) {
             if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)
                 || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {
@@ -1841,7 +1849,7 @@ var DropDownBase = /** @class */ (function (_super) {
                 this.setCustomListData(dataSource, fields, query, e);
             }
             else {
-                this.setListData(dataSource, fields, query, e);
+                this.setListData(dataSource, fields, query, e, skipExecuteLocal);
             }
         }
     };

package/src/list-box/list-box.js

@@ -192,7 +192,9 @@ var ListBox = /** @class */ (function (_super) {
             this.selectAllText = l10nSelect.getConstant('selectAllText');
             this.unSelectAllText = l10nSelect.getConstant('unSelectAllText');
             this.popupWrapper = this.list;
-            this.checkBoxSelectionModule.checkAllParent = null;
+            if (this.checkBoxSelectionModule) {
+                this.checkBoxSelectionModule.checkAllParent = null;
+            }
             if (this.filterParent) {
                 var parentNode = this.filterParent.parentNode;
                 if (parentNode) {
@@ -2425,7 +2427,9 @@ var ListBox = /** @class */ (function (_super) {
                 this.selectAllText = l10nShow.getConstant('selectAllText');
                 this.unSelectAllText = l10nShow.getConstant('unSelectAllText');
                 this.popupWrapper = this.list;
-                this.checkBoxSelectionModule.checkAllParent = null;
+                if (this.checkBoxSelectionModule) {
+                    this.checkBoxSelectionModule.checkAllParent = null;
+                }
                 this.notify('selectAll', {});
                 this.checkSelectAll();
             }
@@ -2436,7 +2440,10 @@ var ListBox = /** @class */ (function (_super) {
             }
             for (index; index < liCollLen; index++) {
                 if (liColl[index].classList.contains('e-list-item')) {
-                    liColl[index].removeChild(liColl[index].getElementsByClassName('e-checkbox-wrapper')[0]);
+                    var checkboxElem = liColl[index].getElementsByClassName('e-checkbox-wrapper')[0];
+                    if (checkboxElem) {
+                        liColl[index].removeChild(checkboxElem);
+                    }
                 }
                 if (liColl[index].hasAttribute('aria-selected')) {
                     liColl[index].removeAttribute('aria-selected');
@@ -2625,7 +2632,13 @@ var ListBox = /** @class */ (function (_super) {
                         this.showSelectAll = showSelectAll;
                         if (this.showSelectAll) {
                             var l10nSel = new L10n(this.getModuleName(), { selectAllText: 'Select All', unSelectAllText: 'Unselect All' }, this.locale);
-                            this.checkBoxSelectionModule.checkAllParent = null;
+                            var selectAllElem = this.list.querySelector('.e-selectall-parent');
+                            if (this.checkBoxSelectionModule) {
+                                this.checkBoxSelectionModule.checkAllParent = null;
+                            }
+                            if (selectAllElem) {
+                                detach(selectAllElem);
+                            }
                             this.showSelectAll = true;
                             this.selectAllText = l10nSel.getConstant('selectAllText');
                             this.unSelectAllText = l10nSel.getConstant('selectAllText');

package/src/mention/mention.js

@@ -1049,8 +1049,12 @@ var Mention = /** @class */ (function (_super) {
             }
             this.isTyped = false;
             range.collapse(false);
-            rect = range.getBoundingClientRect().top === 0 ? range.startContainer.getClientRects()[0] :
-                range.getBoundingClientRect();
+            var node = range.startContainer;
+            var clientRects = node.nodeType === Node.TEXT_NODE ? node.parentElement.getClientRects()
+                : node.getClientRects();
+            rect = range.getBoundingClientRect().top === 0 ?
+                (clientRects && clientRects.length ? clientRects[0] : range.getBoundingClientRect())
+                : range.getBoundingClientRect();
         }
         var rectTop = rect.top;
         var rectLeft = rect.left;

package/src/multi-select/multi-select-model.d.ts

@@ -414,6 +414,22 @@ export interface MultiSelectModel extends DropDownBaseModel{
      */
     mode?: visualMode;
 
+    /**
+     * Defines the threshold number of selected items above which the summary template is applied (CheckBox mode only).
+     *
+     * @default 0
+     * @type {number}
+     */
+    summaryTagCount?: number;
+
+    /**
+     * Specifies the string template content for displaying selected items in the input field (CheckBox mode only).
+     *
+     * @default '${selectedCount} items selected'
+     * @type {string}
+     */
+    summaryTagTemplate?: string;
+
     /**
      * Sets the delimiter character for 'default' and 'delimiter' visibility modes.
      *

package/src/multi-select/multi-select.d.ts

@@ -47,6 +47,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private isSelectAll;
     private isSelectAllClicked;
     private isProcessingVirtualSelectAll;
+    private wasSelectAllActive;
     private clearIconWidth;
     private previousFilterText;
     private selectedElementID;
@@ -81,6 +82,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private preventKeyboardInteraction;
     private scrollEvent;
     private isPropertyChanged;
+    private uncheckedValues;
     /**
      * The `fields` property maps the columns of the data table and binds the data to the component.
      * * text - Maps the text column from data table for each list item.
@@ -450,6 +452,20 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @default Default
      */
     mode: visualMode;
+    /**
+     * Defines the threshold number of selected items above which the summary template is applied (CheckBox mode only).
+     *
+     * @default 0
+     * @type {number}
+     */
+    summaryTagCount: number;
+    /**
+     * Specifies the string template content for displaying selected items in the input field (CheckBox mode only).
+     *
+     * @default '${selectedCount} items selected'
+     * @type {string}
+     */
+    summaryTagTemplate: string;
     /**
      * Sets the delimiter character for 'default' and 'delimiter' visibility modes.
      *
@@ -704,6 +720,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private updateActionList;
     protected getAppendToElement(): HTMLElement;
     private refreshSelection;
+    private extendSelectionToNewItems;
     private hideGroupItem;
     protected getValidLi(): HTMLElement;
     private checkSelectAll;
@@ -791,6 +808,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private refreshPlaceHolder;
     private removeAllItems;
     private invokeCheckboxSelection;
+    private isDimColumnWithCustomStyle;
     private removeValue;
     private updateMainList;
     private isFilteringWithRemoteData;
@@ -893,6 +911,9 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      */
     hideSpinner(): void;
     protected updateWrapperText(wrapperType: HTMLElement, wrapperData: string): void;
+    private getSummaryTagThreshold;
+    private getSummaryTagText;
+    private applySummaryTagWidth;
     private updateDelimView;
     private checkClearIconWidth;
     private updateRemainWidth;