@syncfusion/ej2-dropdowns 27.2.5 → 28.1.35

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.2.5
-*  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
+*  version : 28.1.35
+*  Copyright Syncfusion Inc. 2001 - 2024. 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@27.2.4",
+  "_id": "@syncfusion/ej2-dropdowns@28.1.33",
   "_inBundle": false,
-  "_integrity": "sha512-kwUZ/36PpkSlj/Dt+Pely38/+otGDsjMAHtJqd6pucIRE+qskmr+68t6w+e1ejmxsCSRRgLJ8TTOILCNQQT6Mg==",
+  "_integrity": "sha512-YF/N6gzak5p8mSlO0jATbD2F7zvRtXy7f1FSAArLfDsGfphyb05cGkXSSDltP75YrGfnF5vKgqBBHH+7ALIczQ==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -36,22 +36,22 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-27.2.4.tgz",
-  "_shasum": "8e13af0cfcf786fbae3399f4fb7145e43b708535",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-28.1.33.tgz",
+  "_shasum": "69ac2cb1f2709d957d0821455f7e6730e18f1d5f",
   "_spec": "@syncfusion/ej2-dropdowns@*",
-  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.2.5",
-    "@syncfusion/ej2-data": "~27.2.2",
-    "@syncfusion/ej2-inputs": "~27.2.4",
-    "@syncfusion/ej2-lists": "~27.2.5",
-    "@syncfusion/ej2-navigations": "~27.2.5",
-    "@syncfusion/ej2-notifications": "~27.2.4",
-    "@syncfusion/ej2-popups": "~27.2.2"
+    "@syncfusion/ej2-base": "~28.1.33",
+    "@syncfusion/ej2-data": "~28.1.33",
+    "@syncfusion/ej2-inputs": "~28.1.33",
+    "@syncfusion/ej2-lists": "~28.1.33",
+    "@syncfusion/ej2-navigations": "~28.1.35",
+    "@syncfusion/ej2-notifications": "~28.1.33",
+    "@syncfusion/ej2-popups": "~28.1.33"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -76,7 +76,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "27.2.5",
+  "version": "28.1.35",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -234,11 +234,11 @@ var AutoComplete = /** @class */ (function (_super) {
                     });
                     this.list.appendChild(virtualElement).appendChild(this.list.querySelector('.e-list-parent'));
                 }
-                if (!this.list.querySelector('.e-virtual-ddl') && document.getElementsByClassName('e-popup') && document.getElementsByClassName('e-popup')[0]) {
+                if (!this.list.querySelector('.e-virtual-ddl') && this.list.parentElement) {
                     var virtualElement = this.createElement('div', {
                         id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
                     });
-                    document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virtualElement);
+                    this.list.parentElement.querySelector('.e-dropdownbase').appendChild(virtualElement);
                 }
             }
             if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount !== 0)) {
@@ -273,6 +273,9 @@ var AutoComplete = /** @class */ (function (_super) {
         if (!isNullOrUndefined(item)) {
             removeClass([item], dropDownListClasses.focus);
         }
+        if (!isNullOrUndefined(this.itemData) && !this.enableVirtualization) {
+            this.focusIndexItem();
+        }
         this.postBackAction();
     };
     AutoComplete.prototype.postBackAction = function () {

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

@@ -326,7 +326,7 @@ var ComboBox = /** @class */ (function (_super) {
             var inputValue = this.inputElement.value;
             var dataSource = this.sortedData;
             var type = this.typeOfData(dataSource).typeof;
-            var activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
+            var activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type, this.ignoreAccent);
             if (this.enableVirtualization && inputValue !== '' && this.getModuleName() !== 'autocomplete' && this.isTyped && !this.allowFiltering) {
                 var updatingincrementalindex = false;
                 var isEndIndexValid = this.viewPortInfo.endIndex >= this.incrementalEndIndex &&
@@ -553,6 +553,7 @@ var ComboBox = /** @class */ (function (_super) {
             _super.prototype.clearAll.call(this, e);
         }
         if (this.isFiltering() && !isNullOrUndefined(e) && e.target === this.inputWrapper.clearButton) {
+            this.typedString = this.filterInput.value;
             this.searchLists(e);
         }
     };

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

@@ -31,7 +31,7 @@ export declare function incrementalSearch(keyCode: number, items: HTMLElement[],
  */
 export declare function Search(inputVal: string, items: HTMLElement[], searchType: SearchType, ignoreCase?: boolean, dataSource?: (string | number | boolean | {
     [key: string]: Object;
-})[], fields?: any, type?: string): {
+})[], fields?: any, type?: string, ignoreAccent?: boolean): {
     item: Element | null;
     index: number | null;
 };

package/src/common/incremental-search.js

@@ -123,7 +123,7 @@ export function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, ele
  * @param {string} [type] - Specifies the type.
  * @returns {{ item: Element | null, index: number | null }} Returns the search matched items.
  */
-export function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, type) {
+export function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, type, ignoreAccent) {
     var listItems = items;
     ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;
     var itemData = { item: null, index: null };
@@ -149,6 +149,10 @@ export function Search(inputVal, items, searchType, ignoreCase, dataSource, fiel
             }
             var 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 (ignoreAccent && text && queryStr) {
+                text = text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+                queryStr = queryStr.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+            }
             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;
                 itemData.index = i;

package/src/common/virtual-scroll.js

@@ -491,7 +491,8 @@ var VirtualScroll = /** @class */ (function () {
             direction: direction, sentinelInfo: info, offsets: e,
             startIndex: this.parent.previousStartIndex, endIndex: this.parent.previousEndIndex
         };
-        var vHeight = this.parent.popupContentElement.getBoundingClientRect().height;
+        var vHeight = this.parent.popupContentElement ?
+            this.parent.popupContentElement.getBoundingClientRect().height : 0;
         //Row Start and End Index calculation
         var rowHeight = this.parent.listItemHeight;
         var exactTopIndex = e.top / rowHeight;

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

@@ -1032,7 +1032,13 @@ var DropDownBase = /** @class */ (function (_super) {
         var focusItem = this.fields.disabled ? listElement.querySelector('.' + dropDownBaseClasses.li + ':not(.e-disabled') : listElement.querySelector('.' + dropDownBaseClasses.li);
         var selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);
         if (focusItem && !selectedItem) {
-            focusItem.classList.add(dropDownBaseClasses.focus);
+            if (this.isVirtualizationEnabled && this.viewPortInfo.startIndex !== 0) {
+                var elements = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                focusItem = elements && elements.length > 0 ? elements[2] : focusItem;
+            }
+            if (focusItem) {
+                focusItem.classList.add(dropDownBaseClasses.focus);
+            }
         }
         if (list.length <= 0) {
             this.l10nUpdate();
@@ -1256,6 +1262,12 @@ var DropDownBase = /** @class */ (function (_super) {
                 new DataManager(dataSource).executeLocal(new Query().take(100))
                 : dataSource;
             ulElement = this.templateListItem((this.getModuleName() === 'autocomplete') ? spliceData : dataSource, fields);
+            if (this.isIncrementalRequest) {
+                this.incrementalLiCollections = ulElement.querySelectorAll('.' + dropDownBaseClasses.li);
+                this.incrementalUlElement = ulElement;
+                this.incrementalListData = listData;
+                return ulElement;
+            }
             if (this.isVirtualizationEnabled) {
                 var oldUlElement = this.list.querySelector('.e-list-parent');
                 var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
@@ -1543,7 +1555,7 @@ var DropDownBase = /** @class */ (function (_super) {
                 updateData.dataSource = this.dataSource;
             }
             if (this.getModuleName() === 'listbox') {
-                if (!this.isReact || (this.isReact && !isNullOrUndefined(newProp.dataSource))) {
+                if (!this.isReact || (this.isReact && (!isNullOrUndefined(newProp.dataSource) || !isNullOrUndefined(newProp.sortOrder)))) {
                     this.updateDataSource(updateData, oldProp);
                 }
             }

package/src/drop-down-list/drop-down-list-model.d.ts

@@ -166,6 +166,15 @@ export interface DropDownListModel extends DropDownBaseModel{
      */
     enableVirtualization?: boolean;
 
+    /**
+     * Gets or sets a value that indicates whether the DropDownList popup can be resized.
+     * When set to `true`, a resize handle appears in the bottom-right corner of the popup,
+     * allowing the user to resize the width and height of the popup.
+     *
+     * @default false
+     */
+    allowResize?: boolean;
+
     /**
      * Gets or sets the display text of the selected item in the component.
      *
@@ -280,4 +289,26 @@ export interface DropDownListModel extends DropDownBaseModel{
      */
     focus?: EmitType<Object>;
 
+    /**
+     * Triggers when the user finishes resizing the DropDown popup.
+     *
+     * @event resizeStop
+     */
+    resizeStop?: EmitType<Object>;
+
+    /**
+     * Triggers continuously while the DropDown popup is being resized by the user.
+     * This event provides live updates on the width and height of the popup.
+     *
+     * @event resizing
+     */
+    resizing?: EmitType<Object>;
+
+    /**
+     * Triggers when the user starts resizing the DropDown popup.
+     *
+     * @event resizeStart
+     */
+    resizeStart?: EmitType<Object>;
+
 }

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

@@ -110,6 +110,16 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected isFocused: boolean;
     private clearButton;
     protected autoFill: boolean;
+    private resizer;
+    private isResizing;
+    private originalHeight;
+    private originalWidth;
+    private originalMouseX;
+    private originalMouseY;
+    private resizeHeight;
+    private resizeWidth;
+    private isUpdateHeaderHeight;
+    private isUpdateFooterHeight;
     /**
      * Sets CSS classes to the root element of the component that allows customization of appearance.
      *
@@ -254,6 +264,14 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @default false
      */
     enableVirtualization: boolean;
+    /**
+     * Gets or sets a value that indicates whether the DropDownList popup can be resized.
+     * When set to `true`, a resize handle appears in the bottom-right corner of the popup,
+     * allowing the user to resize the width and height of the popup.
+     *
+     * @default false
+     */
+    allowResize: boolean;
     /**
      * Gets or sets the display text of the selected item in the component.
      *
@@ -355,6 +373,25 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @event focus
      */
     focus: EmitType<Object>;
+    /**
+     * Triggers when the user finishes resizing the DropDown popup.
+     *
+     * @event resizeStop
+     */
+    resizeStop: EmitType<Object>;
+    /**
+     * Triggers continuously while the DropDown popup is being resized by the user.
+     * This event provides live updates on the width and height of the popup.
+     *
+     * @event resizing
+     */
+    resizing: EmitType<Object>;
+    /**
+     * Triggers when the user starts resizing the DropDown popup.
+     *
+     * @event resizeStart
+     */
+    resizeStart: EmitType<Object>;
     /**
      * * Constructor for creating the DropDownList component.
      *
@@ -410,6 +447,8 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected focusOutAction(e?: MouseEvent | KeyboardEventArgs): void;
     protected onFocusOut(e?: MouseEvent | KeyboardEventArgs): void;
     protected onFocus(e?: FocusEvent | MouseEvent | KeyboardEvent | TouchEvent): void;
+    protected resizingWireEvent(): void;
+    protected resizingUnWireEvent(): void;
     private resetValueHandler;
     protected wireEvent(): void;
     protected bindCommonEvent(): void;
@@ -425,6 +464,9 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private wireListEvents;
     private onSearch;
     private onServerIncrementalSearch;
+    protected startResizing(event: MouseEvent | TouchEvent): void;
+    protected resizePopup(event?: MouseEvent | TouchEvent): void;
+    protected stopResizing(event: MouseEvent | TouchEvent): void;
     protected onMouseClick(e: MouseEvent): void;
     private onMouseOver;
     private setHover;
@@ -535,7 +577,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
         [key: string]: Object;
     }, index?: number): void;
     private actionCompleteDataUpdate;
-    private focusIndexItem;
+    protected focusIndexItem(): void;
     protected updateSelection(): void;
     private updateSelectionList;
     protected removeFocus(): void;
@@ -615,6 +657,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @returns {void}
      */
     showPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
+    private executeCloneElements;
     private invokeRenderPopup;
     protected renderHightSearch(): void;
     /**
@@ -690,6 +733,7 @@ export interface DropDownListClassList {
     backIcon: string;
     filterBarClearIcon: string;
     filterInput: string;
+    resizeIcon: string;
     filterParent: string;
     mobileFilter: string;
     footer: string;