@syncfusion/ej2-dropdowns 22.2.12 → 23.1.38

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.2.12
-*  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
+*  version : 23.1.38
+*  Copyright Syncfusion Inc. 2001 - 2023. 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
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@22.2.11",
+  "_id": "@syncfusion/ej2-dropdowns@23.1.36",
   "_inBundle": false,
-  "_integrity": "sha512-0uDWxObrmZmdmhhD9HS36g6At/QnyhJhseMU4t5vZqPL0VHeiLK0nzSNPwdxcpGOiKEHSF/k6w73GEZfaL2tGg==",
+  "_integrity": "sha512-+XC5hkXgdEtcl34xCI+wmNoO4GwZtSdi98IOrZ8iOiSTs6dIRAoJj4Znj87n4whoW09U04LF1HgoyKxxT5txNQ==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -34,21 +34,22 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-22.2.11.tgz",
-  "_shasum": "9843c2657a90cd9330be849938c3fd659fed5562",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-23.1.36.tgz",
+  "_shasum": "507377d454396bf60c334eaecdb01fde5a986bbb",
   "_spec": "@syncfusion/ej2-dropdowns@*",
-  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.2.12",
-    "@syncfusion/ej2-data": "~22.2.5",
-    "@syncfusion/ej2-inputs": "~22.2.12",
-    "@syncfusion/ej2-lists": "~22.2.11",
-    "@syncfusion/ej2-navigations": "~22.2.11",
-    "@syncfusion/ej2-popups": "~22.2.11"
+    "@syncfusion/ej2-base": "~23.1.38",
+    "@syncfusion/ej2-data": "~23.1.36",
+    "@syncfusion/ej2-inputs": "~23.1.38",
+    "@syncfusion/ej2-lists": "~23.1.36",
+    "@syncfusion/ej2-navigations": "~23.1.36",
+    "@syncfusion/ej2-notifications": "~23.1.36",
+    "@syncfusion/ej2-popups": "~23.1.38"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -73,7 +74,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "22.2.12",
+  "version": "23.1.38",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -89,7 +89,7 @@ var AutoComplete = /** @class */ (function (_super) {
                 filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
         }
-        if (!isNullOrUndefined(this.suggestionCount)) {
+        if (!isNullOrUndefined(this.suggestionCount) && !this.enableVirtualization) {
             // Since defualt value of suggestioncount is 20, checked the condition
             if (this.suggestionCount !== 20) {
                 for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
@@ -100,12 +100,19 @@ var AutoComplete = /** @class */ (function (_super) {
             }
             filterQuery.take(this.suggestionCount);
         }
+        if (this.enableVirtualization) {
+            var takeValue = this.getTakeValue();
+            filterQuery.skip(this.virtualItemStartIndex);
+            filterQuery.take(takeValue);
+            filterQuery.requiresCount();
+        }
         return filterQuery;
     };
     AutoComplete.prototype.searchLists = function (e) {
         var _this_1 = this;
         this.isTyped = true;
         this.isDataFetched = this.isSelectCustom = false;
+        this.checkAndResetCache();
         if (isNullOrUndefined(this.list)) {
             _super.prototype.renderList.call(this, e, true);
         }
@@ -152,8 +159,32 @@ var AutoComplete = /** @class */ (function (_super) {
     };
     AutoComplete.prototype.filterAction = function (dataSource, query, fields, e) {
         this.beforePopupOpen = true;
+        var isNoDataElement = this.list.classList.contains('e-nodata');
         if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {
+            if (this.enableVirtualization && this.isFiltering() && this.isTyped) {
+                this.isPreventScrollAction = true;
+                this.list.scrollTop = 0;
+                this.previousStartIndex = 0;
+                this.virtualListInfo = null;
+            }
             this.resetList(dataSource, fields, query, e);
+            if (this.enableVirtualization && isNoDataElement && !this.list.classList.contains('e-nodata')) {
+                if (!this.list.querySelector('.e-virtual-ddl-content')) {
+                    this.list.appendChild(this.createElement('div', {
+                        className: 'e-virtual-ddl-content',
+                        styles: this.getTransformValues()
+                    })).appendChild(this.list.querySelector('.e-list-parent'));
+                }
+                if (!this.list.querySelector('.e-virtual-ddl')) {
+                    var virualElement = this.createElement('div', {
+                        id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                    });
+                    document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
+                }
+            }
+            if (this.enableVirtualization) {
+                this.getFilteringSkeletonCount();
+            }
         }
         else {
             this.hidePopup(e);
@@ -164,6 +195,7 @@ var AutoComplete = /** @class */ (function (_super) {
     AutoComplete.prototype.clearAll = function (e, property) {
         if (isNullOrUndefined(property) || (!isNullOrUndefined(property) && isNullOrUndefined(property.dataSource))) {
             _super.prototype.clearAll.call(this, e);
+            this.checkAndResetCache();
         }
         if (this.beforePopupOpen) {
             this.hidePopup();
@@ -246,7 +278,9 @@ var AutoComplete = /** @class */ (function (_super) {
         return true;
     };
     AutoComplete.prototype.renderPopup = function (e) {
-        this.list.scrollTop = 0;
+        if (!this.enableVirtualization) {
+            this.list.scrollTop = 0;
+        }
         _super.prototype.renderPopup.call(this, e);
     };
     AutoComplete.prototype.isEditTextBox = function () {
@@ -314,6 +348,10 @@ var AutoComplete = /** @class */ (function (_super) {
     AutoComplete.prototype.hidePopup = function (e) {
         _super.prototype.hidePopup.call(this, e);
         this.activeIndex = null;
+        this.virtualListInfo = this.viewPortInfo;
+        this.previousStartIndex = this.viewPortInfo.startIndex;
+        this.startIndex = this.viewPortInfo.startIndex;
+        this.previousEndIndex = this.viewPortInfo.endIndex;
     };
     /**
      * Dynamically change the value of properties.

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

@@ -246,14 +246,18 @@ var ComboBox = /** @class */ (function (_super) {
                 if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {
                     this.removeFocus();
                     var fixedHead = this.fields.groupBy ? this.liCollections[0].offsetHeight : 0;
-                    this.list.scrollTop = count * height + fixedHead;
+                    if (!this.enableVirtualization) {
+                        this.list.scrollTop = count * height + fixedHead;
+                    }
                     addClass([activeElement], dropDownListClasses.focus);
                 }
             }
             else {
                 if (this.isSelectCustom && this.inputElement.value.trim() !== '') {
                     this.removeFocus();
-                    this.list.scrollTop = 0;
+                    if (!this.enableVirtualization) {
+                        this.list.scrollTop = 0;
+                    }
                 }
             }
             return activeElement;
@@ -389,7 +393,9 @@ var ComboBox = /** @class */ (function (_super) {
         else if (this.inputElement.value === '') {
             this.activeIndex = null;
             if (!isNullOrUndefined(this.list)) {
-                this.list.scrollTop = 0;
+                if (!this.enableVirtualization) {
+                    this.list.scrollTop = 0;
+                }
                 var focusItem = this.list.querySelector('.' + dropDownListClasses.li);
                 this.setHoverList(focusItem);
             }

package/src/common/index.d.ts

@@ -3,3 +3,5 @@
  */
 export * from './incremental-search';
 export * from './highlight-search';
+export * from './virtual-scroll';
+export * from './interface';

package/src/common/index.js

@@ -3,3 +3,4 @@
  */
 export * from './incremental-search';
 export * from './highlight-search';
+export * from './virtual-scroll';

package/src/common/interface.d.ts

@@ -0,0 +1,76 @@
+import { Component, KeyboardEventArgs } from '@syncfusion/ej2-base';
+import { Popup } from '@syncfusion/ej2-popups';
+import { VirtualInfo } from '../common/virtual-scroll';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';
+import { GeneratedData } from '../drop-down-list/drop-down-list';
+/**
+ * Specifies virtual scroll interfaces.
+ *
+ * @hidden
+ */
+export interface IDropdownlist extends Component<HTMLElement> {
+    popupContentElement: HTMLElement;
+    isPreventScrollAction: boolean;
+    listHeight: string;
+    previousStartIndex: number;
+    previousEndIndex: number;
+    previousInfo: VirtualInfo;
+    startIndex: number;
+    currentPageNumber: number;
+    isMouseScrollAction: boolean;
+    isPreventKeyAction: boolean;
+    pageCount: number;
+    isKeyBoardAction: boolean;
+    viewPortInfo: VirtualInfo;
+    isUpwardScrolling: boolean;
+    queryString: string;
+    containerElementRect: ClientRect;
+    isScrollActionTriggered: boolean;
+    virtualListInfo: VirtualInfo;
+    selectedValueInfo: VirtualInfo;
+    value: number | string | boolean;
+    totalItemCount: number;
+    virtualItemCount: number;
+    virtualItemEndIndex: number;
+    virtualItemStartIndex: number;
+    popupObj: Popup;
+    listItemHeight: number;
+    scrollPreStartIndex: number;
+    list: HTMLElement;
+    liCollections: HTMLElement[];
+    typedString: string;
+    isVirtualScrolling: boolean;
+    isCustomFilter: boolean;
+    allowFiltering: boolean;
+    isPopupOpen: boolean;
+    isTyped: boolean;
+    itemCount: number;
+    fields: FieldSettingsModel;
+    generatedDataObject: GeneratedData;
+    keyboardEvent: KeyboardEventArgs;
+    dataCount: number;
+    filterInput: HTMLInputElement;
+    dataSource: {
+        [key: string]: Object;
+    }[] | DataManager | string[] | number[] | boolean[];
+    listData: {
+        [key: string]: Object;
+    }[] | string[] | boolean[] | number[];
+    getSkeletonCount(retainSkeleton?: boolean): void;
+    getItems(): HTMLElement[];
+    getQuery(query: Query): Query;
+    getTransformValues(): string;
+    UpdateSkeleton(): void;
+    updateSelectionList(): void;
+    GetVirtualTrackHeight(): string;
+    getPageCount(returnExactCount?: boolean): number;
+    handleVirtualKeyboardActions(e: KeyboardEventArgs, pageCount: number): void;
+    renderItems(listData: {
+        [key: string]: Object;
+    }[], fields: FieldSettingsModel): HTMLElement;
+    resetList(dataSource?: {
+        [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;
+}

package/src/common/interface.js

@@ -0,0 +1 @@
+

package/src/common/virtual-scroll.d.ts

@@ -0,0 +1,62 @@
+import { IDropdownlist } from './interface';
+export declare type ScrollDirection = 'up' | 'down';
+declare type ScrollArg = {
+    direction: string;
+    sentinel: SentinelType;
+    offset: Offsets;
+    focusElement: HTMLElement;
+};
+export declare type SentinelType = {
+    check?: (rect: ClientRect, info: SentinelType) => boolean;
+    top?: number;
+    entered?: boolean;
+    axis?: string;
+};
+export declare type SentinelInfo = {
+    up?: SentinelType;
+    down?: SentinelType;
+    right?: SentinelType;
+    left?: SentinelType;
+};
+export declare type Offsets = {
+    top?: number;
+    left?: number;
+};
+export interface VirtualInfo {
+    currentPageNumber?: number;
+    direction?: string;
+    sentinelInfo?: SentinelType;
+    offsets?: Offsets;
+    startIndex?: number;
+    endIndex?: number;
+}
+export declare class VirtualScroll {
+    private parent;
+    private containerElementRect;
+    private element;
+    private options;
+    private touchModule;
+    private component;
+    constructor(parent: IDropdownlist);
+    addEventListener(): void;
+    removeEventListener(): void;
+    private bindScrollEvent;
+    private observe;
+    getModuleName(): string;
+    private popupScrollHandler;
+    private getPageQuery;
+    private setGeneratedData;
+    private generateAndExecuteQueryAsync;
+    setCurrentViewDataAsync(): void;
+    private generateQueryAndSetQueryIndexAsync;
+    private dataProcessAsync;
+    private virtualScrollRefreshAsync;
+    scrollListener(scrollArgs: ScrollArg): void;
+    private getPageCount;
+    private getRowHeight;
+    private getInfoFromView;
+    private sentinelInfo;
+    private virtualScrollHandler;
+    destroy(): void;
+}
+export {};