@syncfusion/ej2-dropdowns 23.2.7-52849 → 24.1.41-566987

package/package.json

@@ -1,8 +1,8 @@
 {
     "_from": "@syncfusion/ej2-dropdowns@*",
-    "_id": "@syncfusion/ej2-dropdowns@23.2.6",
+    "_id": "@syncfusion/ej2-dropdowns@18.66.19",
     "_inBundle": false,
-    "_integrity": "sha512-vUNqFVb1yxS4MDFefoKBnWGgc1xKuuxNSqeG3Qp6HwqQyN7jMZ0Zon5fJZgvl0pReF9+PTggSiEWiHKiuVRToA==",
+    "_integrity": "sha512-s44ZbX8pmdJIl6CM2ku298JD2p3QiAnI2/rPJQu9kar1yjLrXdnokG80WPDU3/isZ1NUsKcuMCaU38P/keLcMA==",
     "_location": "/@syncfusion/ej2-dropdowns",
     "_phantomChildren": {},
     "_requested": {
@@ -34,22 +34,22 @@
       "/@syncfusion/ej2-spreadsheet",
       "/@syncfusion/ej2-vue-dropdowns"
     ],
-    "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-23.2.6.tgz",
-    "_shasum": "a958f6597f60a12c0375f50816626d2ad0d62efd",
+    "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.66.19.tgz",
+    "_shasum": "b096d3578c1d78fb2eb247425960d07e5af5657b",
     "_spec": "@syncfusion/ej2-dropdowns@*",
-    "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
+    "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
     "author": {
       "name": "Syncfusion Inc."
     },
     "bundleDependencies": false,
     "dependencies": {
-      "@syncfusion/ej2-base": "~23.2.6",
-      "@syncfusion/ej2-data": "~23.2.4",
-      "@syncfusion/ej2-inputs": "~23.2.4",
-      "@syncfusion/ej2-lists": "~23.2.4",
-      "@syncfusion/ej2-navigations": "~23.2.7",
-      "@syncfusion/ej2-notifications": "~23.2.5",
-      "@syncfusion/ej2-popups": "~23.2.4"
+      "@syncfusion/ej2-base": "~24.1.41",
+      "@syncfusion/ej2-data": "~24.1.41",
+      "@syncfusion/ej2-inputs": "~24.1.41",
+      "@syncfusion/ej2-lists": "~24.1.41",
+      "@syncfusion/ej2-navigations": "~24.1.41",
+      "@syncfusion/ej2-notifications": "~24.1.41",
+      "@syncfusion/ej2-popups": "~24.1.41"
     },
     "deprecated": false,
     "description": "Essential JS 2 DropDown Components",
@@ -74,7 +74,7 @@
     "module": "./index.js",
     "name": "@syncfusion/ej2-dropdowns",
     "typings": "index.d.ts",
-    "version": "23.2.7-52849",
+    "version": "24.1.41-566987",
     "sideEffects": false,
     "homepage": "https://www.syncfusion.com/javascript-ui-controls"
   }

package/src/auto-complete/auto-complete.js

@@ -84,7 +84,7 @@ var AutoComplete = /** @class */ (function (_super) {
             if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                 filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
-            else {
+            else if ((!this.enableVirtualization) || (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource)))) {
                 var mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';
                 filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
@@ -100,7 +100,7 @@ var AutoComplete = /** @class */ (function (_super) {
             }
             filterQuery.take(this.suggestionCount);
         }
-        if (this.enableVirtualization) {
+        if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
             var takeValue = this.getTakeValue();
             filterQuery.skip(this.virtualItemStartIndex);
             filterQuery.take(takeValue);
@@ -182,7 +182,7 @@ var AutoComplete = /** @class */ (function (_super) {
                     document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
                 }
             }
-            if (this.enableVirtualization) {
+            if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount != 0)) {
                 this.getFilteringSkeletonCount();
             }
         }
@@ -203,7 +203,12 @@ var AutoComplete = /** @class */ (function (_super) {
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     AutoComplete.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
-        this.fixedHeaderElement = null;
+        if (!this.enableVirtualization) {
+            this.fixedHeaderElement = null;
+        }
+        if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount != 0)) {
+            this.getFilteringSkeletonCount();
+        }
         _super.prototype.onActionComplete.call(this, ulElement, list, e);
         var item = this.list.querySelector('.' + dropDownListClasses.li);
         if (!isNullOrUndefined(item)) {

package/src/combo-box/combo-box.js

@@ -220,7 +220,7 @@ var ComboBox = /** @class */ (function (_super) {
         if (this.isSelectCustom) {
             this.removeSelection();
         }
-        if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped) {
+        if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped && !this.enableVirtualization) {
             setTimeout(function () {
                 _this.inlineSearch();
             });
@@ -229,7 +229,7 @@ var ComboBox = /** @class */ (function (_super) {
     ComboBox.prototype.getFocusElement = function () {
         var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
         var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : this.list;
-        var isSelected = dataItem.text === this.inputElement.value && !isNullOrUndefined(selected);
+        var isSelected = dataItem.text && dataItem.text.toString() === this.inputElement.value && !isNullOrUndefined(selected);
         if (isSelected) {
             return selected;
         }
@@ -239,6 +239,70 @@ var ComboBox = /** @class */ (function (_super) {
             var dataSource = this.sortedData;
             var type = this.typeOfData(dataSource).typeof;
             var activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
+            if (this.enableVirtualization && inputValue !== '' && this.getModuleName() !== 'autocomplete' && this.isTyped && !this.allowFiltering) {
+                var updatingincrementalindex = false;
+                if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) || this.incrementalEndIndex == 0) {
+                    updatingincrementalindex = true;
+                    this.incrementalStartIndex = this.incrementalEndIndex;
+                    if (this.incrementalEndIndex == 0) {
+                        this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
+                    }
+                    else {
+                        this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
+                    }
+                    this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                    updatingincrementalindex = true;
+                }
+                if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                    this.updateIncrementalView(0, this.itemCount);
+                }
+                activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
+                while (isNullOrUndefined(activeItem) && this.incrementalEndIndex < this.totalItemCount) {
+                    this.incrementalStartIndex = this.incrementalEndIndex;
+                    this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
+                    this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                    updatingincrementalindex = true;
+                    if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                        this.updateIncrementalView(0, this.itemCount);
+                    }
+                    activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
+                    if (!isNullOrUndefined(activeItem)) {
+                        break;
+                    }
+                    if (isNullOrUndefined(activeItem) && this.incrementalEndIndex >= this.totalItemCount) {
+                        this.incrementalStartIndex = 0;
+                        this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
+                        break;
+                    }
+                }
+                if (activeItem.index) {
+                    if ((!(this.viewPortInfo.startIndex >= activeItem.index)) || (!(activeItem.index >= this.viewPortInfo.endIndex))) {
+                        var startIndex = activeItem.index - ((this.itemCount / 2) - 2) > 0 ? activeItem.index - ((this.itemCount / 2) - 2) : 0;
+                        var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                        if (startIndex != this.viewPortInfo.startIndex) {
+                            this.updateIncrementalView(startIndex, endIndex);
+                        }
+                    }
+                }
+                if (!isNullOrUndefined(activeItem.item)) {
+                    var index_1 = this.getIndexByValue(activeItem.item.getAttribute('data-value')) - this.skeletonCount;
+                    if (index_1 > this.itemCount / 2) {
+                        var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;
+                        var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                        this.updateIncrementalView(startIndex, endIndex);
+                    }
+                    activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));
+                }
+                else {
+                    this.updateIncrementalView(0, this.itemCount);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+                    this.list.scrollTop = 0;
+                }
+                if (activeItem && activeItem.item) {
+                    activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));
+                }
+            }
             var activeElement = activeItem.item;
             if (!isNullOrUndefined(activeElement)) {
                 var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -249,6 +313,14 @@ var ComboBox = /** @class */ (function (_super) {
                     if (!this.enableVirtualization) {
                         this.list.scrollTop = count * height + fixedHead;
                     }
+                    else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+                        if (this.enableVirtualization && !this.fields.groupBy) {
+                            var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? activeElement.offsetTop + (this.virtualListInfo.startIndex * activeElement.offsetHeight) : activeElement.offsetTop;
+                            this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * activeElement.offsetHeight);
+                        }
+                    }
                     addClass([activeElement], dropDownListClasses.focus);
                 }
             }

package/src/common/incremental-search.d.ts

@@ -13,7 +13,7 @@ export declare type SearchType = 'StartsWith' | 'Equal' | 'EndsWith' | 'Contains
  * @param {string} elementId - Specifies the list element ID.
  * @returns {Element} Returns list item based on key code matches with list text content.
  */
-export declare function incrementalSearch(keyCode: number, items: HTMLElement[], selectedIndex: number, ignoreCase: boolean, elementId: string): Element;
+export declare function incrementalSearch(keyCode: number, items: HTMLElement[], selectedIndex: number, ignoreCase: boolean, elementId: string, queryStringUpdated?: boolean, currentValue?: string, isVirtual?: boolean, refresh?: boolean): Element;
 /**
  * Search the list item based on given input value matches with search type.
  *

package/src/common/incremental-search.js

@@ -3,6 +3,7 @@
  */
 var queryString = '';
 var prevString = '';
+var tempQueryString = '';
 var matches = [];
 var activeClass = 'e-active';
 var prevElementId = '';
@@ -17,21 +18,49 @@ var prevElementId = '';
  * @param {string} elementId - Specifies the list element ID.
  * @returns {Element} Returns list item based on key code matches with list text content.
  */
-export function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId) {
-    queryString += String.fromCharCode(keyCode);
-    setTimeout(function () {
-        queryString = '';
-    }, 1000);
+export function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId, queryStringUpdated, currentValue, isVirtual, refresh) {
+    if (!queryStringUpdated || queryString === '') {
+        if (tempQueryString != '') {
+            queryString = tempQueryString + String.fromCharCode(keyCode);
+            tempQueryString = '';
+        }
+        else {
+            queryString += String.fromCharCode(keyCode);
+        }
+    }
+    else if (queryString == prevString) {
+        tempQueryString = String.fromCharCode(keyCode);
+    }
+    if (isVirtual) {
+        setTimeout(function () {
+            tempQueryString = '';
+        }, 700);
+        setTimeout(function () {
+            queryString = '';
+        }, 3000);
+    }
+    else {
+        setTimeout(function () {
+            queryString = '';
+        }, 1000);
+    }
     var index;
     queryString = ignoreCase ? queryString.toLowerCase() : queryString;
-    if (prevElementId === elementId && prevString === queryString) {
+    if (prevElementId === elementId && prevString === queryString && !refresh) {
         for (var i = 0; i < matches.length; i++) {
             if (matches[i].classList.contains(activeClass)) {
                 index = i;
                 break;
             }
+            if (currentValue && matches[i].textContent.toLowerCase() === currentValue.toLowerCase()) {
+                index = i;
+                break;
+            }
         }
         index = index + 1;
+        if (isVirtual) {
+            return matches[index] && matches.length - 1 != index ? matches[index] : matches[matches.length];
+        }
         return matches[index] ? matches[index] : matches[0];
     }
     else {
@@ -61,6 +90,20 @@ export function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, ele
         } while (i !== selectedIndex);
         prevString = queryString;
         prevElementId = elementId;
+        if (isVirtual) {
+            var indexUpdated = false;
+            for (var i_1 = 0; i_1 < matches.length; i_1++) {
+                if (currentValue && matches[i_1].textContent.toLowerCase() === currentValue.toLowerCase()) {
+                    index = i_1;
+                    indexUpdated = true;
+                    break;
+                }
+            }
+            if (currentValue && indexUpdated) {
+                index = index + 1;
+            }
+            return matches[index] ? matches[index] : matches[0];
+        }
         return matches[0];
     }
 }
@@ -97,7 +140,7 @@ export function Search(inputVal, items, searchType, ignoreCase, dataSource, fiel
                     });
                 });
             }
-            text = dataSource && filterValue ? (ignoreCase ? filterValue.toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
+            text = dataSource && filterValue ? (ignoreCase ? filterValue.toString().toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
             /* eslint-disable security/detect-non-literal-regexp */
             if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, "g").test(text))) {
                 itemData.item = item;

package/src/common/interface.d.ts

@@ -57,6 +57,7 @@ export interface IDropdownlist extends Component<HTMLElement> {
     listData: {
         [key: string]: Object;
     }[] | string[] | boolean[] | number[];
+    skeletonCount: number;
     getSkeletonCount(retainSkeleton?: boolean): void;
     getItems(): HTMLElement[];
     getQuery(query: Query): Query;
@@ -73,4 +74,5 @@ export interface IDropdownlist extends Component<HTMLElement> {
         [key: string]: Object;
     }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query, e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     findListElement(list: HTMLElement, findNode: string, attribute: string, value: string | boolean | number): HTMLElement;
+    scrollStop(e?: Event): void;
 }

package/src/common/virtual-scroll.js

@@ -46,7 +46,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { EventHandler, Browser, select, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { debounce, Touch } from '@syncfusion/ej2-base';
-import { Query } from '@syncfusion/ej2-data';
+import { DataManager, Query } from '@syncfusion/ej2-data';
 var VirtualScroll = /** @class */ (function () {
     function VirtualScroll(parent) {
         var _this = this;
@@ -150,9 +150,24 @@ var VirtualScroll = /** @class */ (function () {
                 query = this.getPageQuery(query, virtualItemStartIndex, virtualItemEndIndex);
             }
         }
+        var tempCustomFilter = this.parent.isCustomFilter;
+        if (this.component === 'combobox') {
+            var totalData = 0;
+            if (this.parent.dataSource instanceof DataManager) {
+                totalData = this.parent.dataSource.dataSource.json.length;
+            }
+            else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
+                totalData = this.parent.dataSource.length;
+            }
+            if (totalData > 0) {
+                this.parent.isCustomFilter = (totalData == this.parent.totalItemCount && this.parent.queryString != this.parent.typedString) ? true : this.parent.isCustomFilter;
+            }
+        }
         this.parent.resetList(dataSource, this.parent.fields, query);
+        this.parent.isCustomFilter = tempCustomFilter;
     };
     VirtualScroll.prototype.removeSkipAndTakeEvents = function (query) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         query.queries = query.queries.filter(function (event) {
             return event.fn !== 'onSkip' && event.fn !== 'onTake';
         });
@@ -181,6 +196,9 @@ var VirtualScroll = /** @class */ (function () {
         if (virtualContentElement) {
             (virtualContentElement).style = this.parent.getTransformValues();
         }
+        if (this.parent.fields.groupBy) {
+            this.parent.scrollStop();
+        }
     };
     VirtualScroll.prototype.generateQueryAndSetQueryIndexAsync = function (query, isPopupOpen) {
         var isStartIndexInitialised = false;
@@ -231,6 +249,9 @@ var VirtualScroll = /** @class */ (function () {
                             }
                             else {
                                 this.parent.getSkeletonCount(true);
+                                if (this.component === 'combobox') {
+                                    this.parent.skeletonCount = this.parent.totalItemCount != 0 && this.parent.totalItemCount < (this.parent.itemCount * 2) ? 0 : this.parent.skeletonCount;
+                                }
                             }
                         }
                         return [4 /*yield*/, this.dataProcessAsync()];

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

@@ -178,6 +178,11 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
         [key: string]: Object;
     }[] | string[] | boolean[] | number[];
     protected ulElement: HTMLElement;
+    protected incrementalLiCollections: HTMLElement[];
+    protected incrementalListData: {
+        [key: string]: Object;
+    }[] | string[] | boolean[] | number[];
+    protected incrementalUlElement: HTMLElement;
     protected liCollections: HTMLElement[];
     private bindEvent;
     private scrollTimer;
@@ -223,6 +228,14 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     private virtualizedItemsCount;
     protected totalItemCount: number;
     protected dataCount: number;
+    protected isRemoteDataUpdated: boolean;
+    protected virtualGroupDataSource: {
+        [key: string]: Object;
+    }[] | DataManager | string[] | number[] | boolean[];
+    protected isIncrementalRequest: boolean;
+    protected itemCount: number;
+    /**
+
     /**
      * 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.
@@ -490,6 +503,8 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @returns {void}
      */
     private setListData;
+    protected updatePopupState(): void;
+    protected updateRemoteData(): void;
     private bindChildItems;
     protected updateListValues(): void;
     protected findListElement(list: HTMLElement, findNode: string, attribute: string, value: string | boolean | number): HTMLElement;
@@ -532,7 +547,10 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
         [key: string]: Object;
     }[] | string[] | number[] | boolean[], fields: FieldSettingsModel): FieldSettingsModel;
     protected setFloatingHeader(e: Event): void;
-    protected scrollStop(e?: Event): void;
+    protected scrollStop(e?: Event, isDownkey?: boolean): void;
+    protected getPageCount(returnExactCount?: boolean): number;
+    private updateGroupHeader;
+    private updateGroupFixedHeader;
     protected getValidLi(): HTMLElement;
     /**
      * To render the list items
@@ -544,6 +562,8 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected renderItems(listData: {
         [key: string]: Object;
     }[], fields: FieldSettingsModel): HTMLElement;
+    private createVirtualContent;
+    private updateListElements;
     protected templateListItem(dataSource: {
         [key: string]: Object;
     }[], fields: FieldSettingsModel): HTMLElement;
@@ -560,14 +580,14 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @param {string | number | boolean} value - Specifies given value.
      * @returns {number} Returns the index of the item.
      */
-    protected getIndexByValueFilter(value: string | number | boolean): number;
+    protected getIndexByValue(value: string | number | boolean): number;
     /**
      * Return the index of item which matched with given value in data source
      *
      * @param {string | number | boolean} value - Specifies given value.
      * @returns {number} Returns the index of the item.
      */
-    protected getIndexByValue(value: string | number | boolean): number;
+    protected getIndexByValueFilter(value: string | number | boolean): number;
     /**
      * To dispatch the event manually
      *