@syncfusion/ej2-dropdowns 28.1.35 → 28.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.1.35
+*  version : 28.1.37
 *  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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@28.1.33",
+  "_id": "@syncfusion/ej2-dropdowns@28.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-YF/N6gzak5p8mSlO0jATbD2F7zvRtXy7f1FSAArLfDsGfphyb05cGkXSSDltP75YrGfnF5vKgqBBHH+7ALIczQ==",
+  "_integrity": "sha512-bL308Ch9zV+ucVhTJM3P6epXzfnZBPsS/SD+1yysjb3XTMqnd04itZ2ujOdGMkjokSld5qT1K1KKk72JTysDsQ==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -18,26 +18,22 @@
   },
   "_requiredBy": [
     "/",
-    "/@syncfusion/ej2",
     "/@syncfusion/ej2-angular-dropdowns",
     "/@syncfusion/ej2-documenteditor",
     "/@syncfusion/ej2-gantt",
     "/@syncfusion/ej2-grids",
-    "/@syncfusion/ej2-image-editor",
     "/@syncfusion/ej2-inplace-editor",
     "/@syncfusion/ej2-kanban",
     "/@syncfusion/ej2-pdfviewer",
     "/@syncfusion/ej2-pivotview",
-    "/@syncfusion/ej2-querybuilder",
     "/@syncfusion/ej2-react-dropdowns",
-    "/@syncfusion/ej2-ribbon",
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-28.1.33.tgz",
-  "_shasum": "69ac2cb1f2709d957d0821455f7e6730e18f1d5f",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-28.1.35.tgz",
+  "_shasum": "f81e5c32210ced7ff8fc68210e8fce81054ec4c4",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
@@ -47,9 +43,9 @@
   "dependencies": {
     "@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-inputs": "~28.1.37",
+    "@syncfusion/ej2-lists": "~28.1.37",
+    "@syncfusion/ej2-navigations": "~28.1.37",
     "@syncfusion/ej2-notifications": "~28.1.33",
     "@syncfusion/ej2-popups": "~28.1.33"
   },
@@ -76,7 +72,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "28.1.35",
+  "version": "28.1.37",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/common/virtual-scroll.js

@@ -285,8 +285,8 @@ var VirtualScroll = /** @class */ (function () {
                             if (this.parent.hideSelectedItem) {
                                 var query = this.parent.value && this.parent.value.length > 0 ?
                                     this.parent.getForQuery(this.parent.value).clone() : new Query;
-                                if (this.parent.viewPortInfo.endIndex === this.parent.totalItemCount + this.parent.value.length &&
-                                    this.parent.hideSelectedItem) {
+                                if (this.parent.value && (this.parent.viewPortInfo.endIndex === this.parent.totalItemCount +
+                                    this.parent.value.length) && this.parent.hideSelectedItem) {
                                     query = query.skip(this.parent.totalItemCount - this.parent.itemCount);
                                 }
                                 else {

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

@@ -193,58 +193,60 @@ var DropDownBase = /** @class */ (function (_super) {
         if (isTextByValue) {
             value = text;
         }
-        var dataSource = this.listData;
-        var fields = this.fields;
-        var type = this.typeOfData(dataSource).typeof;
-        if (type === 'string' || type === 'number' || type === 'boolean') {
-            for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {
-                var item = dataSource_1[_i];
-                if (!isNullOrUndefined(item)) {
-                    if (ignoreAccent) {
-                        value = this.checkingAccent(String(item), text, ignoreCase);
-                    }
-                    else {
-                        if (ignoreCase) {
-                            if (this.checkIgnoreCase(String(item), text)) {
-                                value = this.getItemValue(String(item), text, ignoreCase);
-                            }
+        if (!isNullOrUndefined(this.listData)) {
+            var dataSource = this.listData;
+            var fields_1 = this.fields;
+            var type = this.typeOfData(dataSource).typeof;
+            if (type === 'string' || type === 'number' || type === 'boolean') {
+                for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {
+                    var item = dataSource_1[_i];
+                    if (!isNullOrUndefined(item)) {
+                        if (ignoreAccent) {
+                            value = this.checkingAccent(String(item), text, ignoreCase);
                         }
                         else {
-                            if (this.checkNonIgnoreCase(String(item), text)) {
-                                value = this.getItemValue(String(item), text, ignoreCase, isTextByValue);
+                            if (ignoreCase) {
+                                if (this.checkIgnoreCase(String(item), text)) {
+                                    value = this.getItemValue(String(item), text, ignoreCase);
+                                }
+                            }
+                            else {
+                                if (this.checkNonIgnoreCase(String(item), text)) {
+                                    value = this.getItemValue(String(item), text, ignoreCase, isTextByValue);
+                                }
                             }
                         }
                     }
                 }
             }
-        }
-        else {
-            if (ignoreCase) {
-                dataSource.filter(function (item) {
-                    var itemValue = getValue(fields.value, item);
-                    if (!isNullOrUndefined(itemValue) && _this.checkIgnoreCase(getValue(fields.text, item).toString(), text)) {
-                        value = getValue(fields.value, item);
-                    }
-                });
-            }
             else {
-                if (isTextByValue) {
-                    var compareValue_1 = null;
-                    compareValue_1 = value;
+                if (ignoreCase) {
                     dataSource.filter(function (item) {
-                        var itemValue = getValue(fields.value, item);
-                        if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) &&
-                            itemValue.toString() === compareValue_1.toString()) {
-                            value = getValue(fields.text, item);
+                        var itemValue = getValue(fields_1.value, item);
+                        if (!isNullOrUndefined(itemValue) && _this.checkIgnoreCase(getValue(fields_1.text, item).toString(), text)) {
+                            value = getValue(fields_1.value, item);
                         }
                     });
                 }
                 else {
-                    dataSource.filter(function (item) {
-                        if (_this.checkNonIgnoreCase(getValue(fields.text, item), text)) {
-                            value = getValue(fields.value, item);
-                        }
-                    });
+                    if (isTextByValue) {
+                        var compareValue_1 = null;
+                        compareValue_1 = value;
+                        dataSource.filter(function (item) {
+                            var itemValue = getValue(fields_1.value, item);
+                            if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) &&
+                                itemValue.toString() === compareValue_1.toString()) {
+                                value = getValue(fields_1.text, item);
+                            }
+                        });
+                    }
+                    else {
+                        dataSource.filter(function (item) {
+                            if (_this.checkNonIgnoreCase(getValue(fields_1.text, item), text)) {
+                                value = getValue(fields_1.value, item);
+                            }
+                        });
+                    }
                 }
             }
         }
@@ -479,7 +481,7 @@ var DropDownBase = /** @class */ (function (_super) {
             for (var i = 0; i < totalSkeletonCount; i++) {
                 var liElement = this.createElement('li', { className: dropDownBaseClasses.virtualList, styles: 'overflow: inherit' });
                 if (this.isVirtualizationEnabled && this.itemTemplate) {
-                    liElement.style.height = this.listItemHeight + 'px';
+                    liElement.style.height = (this.listItemHeight - parseInt(window.getComputedStyle(this.getItems()[1]).marginBottom, 10)) + 'px';
                 }
                 var skeleton = new Skeleton({
                     shape: 'Text',
@@ -769,7 +771,6 @@ var DropDownBase = /** @class */ (function (_super) {
                                     _this.isRequested = false;
                                     _this.bindChildItems(listItems, ulElement, fields, e);
                                     if (_this.getInitialData) {
-                                        _this.setListData(dataSource, fields, query, event);
                                         _this.getInitialData = false;
                                         _this.preventPopupOpen = false;
                                         return;
@@ -1164,7 +1165,8 @@ var DropDownBase = /** @class */ (function (_super) {
     };
     DropDownBase.prototype.scrollStop = function (e, isDownkey) {
         var target = !isNullOrUndefined(e) ? e.target : this.list;
-        var liHeight = parseInt(getComputedStyle(this.getValidLi(), null).getPropertyValue('height'), 10);
+        var computedHeight = getComputedStyle(this.getValidLi(), null).getPropertyValue('height');
+        var liHeight = this.getModuleName() === 'multiselect' ? parseFloat(computedHeight) : parseInt(computedHeight, 10);
         var topIndex = Math.round(target.scrollTop / liHeight);
         var liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');
         var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;

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

@@ -120,6 +120,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private resizeWidth;
     private isUpdateHeaderHeight;
     private isUpdateFooterHeight;
+    private filterArgs;
     /**
      * Sets CSS classes to the root element of the component that allows customization of appearance.
      *

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

@@ -1869,6 +1869,7 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.onFilterUp = function (e) {
         if (!(e.ctrlKey && e.keyCode === 86) && (this.isValidKey || e.keyCode === 40 || e.keyCode === 38)) {
             this.isValidKey = false;
+            this.filterArgs = e;
             this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
             switch (e.keyCode) {
                 case 38: //up arrow
@@ -1922,7 +1923,9 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     this.typedString = this.filterInput.value;
                     this.preventAutoFill = false;
-                    this.searchLists(e);
+                    if (!this.getInitialData) {
+                        this.searchLists(e);
+                    }
                     if ((this.enableVirtualization && this.getModuleName() !== 'autocomplete') || (this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount !== 0)) {
                         this.getFilteringSkeletonCount();
                     }
@@ -2270,6 +2273,9 @@ var DropDownList = /** @class */ (function (_super) {
         var _this = this;
         setTimeout(function () {
             _this.typedString = _this.filterInput.value;
+            if (_this.getModuleName() === 'combobox' && _this.isFiltering() && isNullOrUndefined(_this.list)) {
+                _this.renderList();
+            }
             _this.searchLists(e);
         });
     };
@@ -2295,10 +2301,9 @@ var DropDownList = /** @class */ (function (_super) {
         }
         if (this.getInitialData) {
             this.updateActionCompleteDataValues(ulElement, list);
-        }
-        if (!this.preventPopupOpen && this.getModuleName() === 'combobox') {
-            this.beforePopupOpen = true;
-            this.preventPopupOpen = true;
+            this.getInitialData = false;
+            this.searchLists(this.filterArgs);
+            return;
         }
         var tempItemCount = this.itemCount;
         if (this.isActive || !isNullOrUndefined(ulElement)) {

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

@@ -465,6 +465,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 }
                 else if (args.preventDefaultAction) {
                     fields = args.fields;
+                    _this.treeObj.element.classList.add('e-filtering');
                 }
                 else {
                     if (_this.treeDataType === 1) {
@@ -790,8 +791,8 @@ var DropDownTree = /** @class */ (function (_super) {
             }
             addClass([this.inputEle], CHIP_INPUT);
             this.updateOverFlowView();
-            this.ensurePlaceHolder();
         }
+        this.ensurePlaceHolder();
     };
     DropDownTree.prototype.triggerChangeEvent = function (event) {
         var isEqual = this.ddtCompareValues(this.oldValue, this.value);
@@ -1419,10 +1420,10 @@ var DropDownTree = /** @class */ (function (_super) {
         if (this.value !== null && this.value.length !== 0) {
             var data = void 0;
             if (this.showCheckBox || this.allowMultiSelection) {
-                for (var i = 0; i < this.value.length; i++) {
+                for (var i = this.value.length - 1; i >= 0; i--) {
                     data = this.treeObj.getTreeData(this.value[i])[0];
                     if (isNOU(data)) {
-                        this.value.splice(this.value.indexOf(this.value[i]), 1);
+                        this.value.splice(i, 1);
                     }
                 }
                 if (this.value.length !== 0) {
@@ -1479,7 +1480,7 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.setSelectedValue = function () {
-        if (this.value != null) {
+        if (this.value !== null && !(this.value.length === 0)) {
             return;
         }
         if (!this.isInitialized) {
@@ -1906,7 +1907,9 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         if (this.isFilterRestore) {
             this.restoreFilterSelection();
-            this.isFilterRestore = false;
+            if (!this.showSelectAll) {
+                this.isFilterRestore = false;
+            }
         }
     };
     DropDownTree.prototype.restoreFilterSelection = function () {
@@ -2169,15 +2172,18 @@ var DropDownTree = /** @class */ (function (_super) {
             this.ensurePlaceHolder();
         }
         if (this.showSelectAll && this.checkBoxElement) {
+            var nodes = this.treeObj.element.querySelectorAll('li');
             var checkedNodes = this.treeObj.element.querySelectorAll('li[aria-checked=true]');
             var wrap = closest(this.checkBoxElement, '.' + CHECKBOXWRAP);
-            if (wrap && args.action === 'uncheck' && (args.isInteracted || checkedNodes.length === 0 || (!isNOU(args.data[0]) && args.data[0].isChecked === 'false'))) {
+            if ((wrap && args.action === 'uncheck' && (args.isInteracted || checkedNodes.length === 0 ||
+                (!isNOU(args.data[0]) && args.data[0].isChecked === 'false'))) || !args.isInteracted && this.isFilterRestore) {
+                this.isFilterRestore = false;
                 this.isReverseUpdate = true;
                 this.changeState(wrap, 'uncheck');
                 this.isReverseUpdate = false;
             }
             else if (wrap && args.action === 'check'
-                && checkedNodes.length === this.fields.dataSource.length
+                && checkedNodes.length === nodes.length
                 && (args.isInteracted || this.isCheckAllCalled || (!isNOU(args.data[0]) && args.data[0].isChecked === 'true'))) {
                 this.isReverseUpdate = true;
                 this.isCheckAllCalled = false;
@@ -2284,7 +2290,7 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.ensurePlaceHolder = function () {
-        if (isNOU(this.value) || (this.value && this.value.length === 0)) {
+        if (isNOU(this.value) || (this.value !== null && this.value.length === 0)) {
             removeClass([this.inputEle], CHIP_INPUT);
             if (this.chipWrapper) {
                 addClass([this.chipWrapper], HIDEICON);
@@ -2587,7 +2593,10 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.setTagValues = function () {
-        if (this.value === null || this.text == null) {
+        if (this.value === null || this.text == null || this.value.length === 0) {
+            if (this.inputWrapper.contains(this.chipWrapper)) {
+                addClass([this.chipWrapper], HIDEICON);
+            }
             return;
         }
         if (!this.inputWrapper.contains(this.chipWrapper)) {

package/src/list-box/list-box.d.ts

@@ -718,7 +718,7 @@ export interface ListBoxChangeEventArgs extends BaseEventArgs {
     /**
      * Returns the selected state or selected list item in the ListBox.
      */
-    value: number | string | boolean;
+    value: number[] | string[] | boolean[];
     /**
      * Specifies the event.
      */

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

@@ -1957,7 +1957,7 @@ var ListBox = /** @class */ (function (_super) {
                     ctrlKey: e.ctrlKey, shiftKey: e.shiftKey
                 });
             }
-            else if (e.keyCode === 65 && e.ctrlKey) {
+            else if (e.keyCode === 65 && e.ctrlKey && this.selectionSettings.mode === 'Multiple') {
                 this.selectAll();
             }
             else if ((e.keyCode === 38 || e.keyCode === 40) && e.ctrlKey && e.shiftKey) {

package/src/mention/mention.js

@@ -272,6 +272,7 @@ var Mention = /** @class */ (function (_super) {
                     e.preventDefault();
                     var li = this.list.querySelector('.' + dropDownBaseClasses.selected);
                     if (li) {
+                        this.isSelected = true;
                         this.setSelection(li, e);
                     }
                     if (this.isPopupOpen) {

package/src/multi-select/multi-select.js

@@ -848,6 +848,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.isFiltered) {
             if ((this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery))) {
                 filterQuery = this.customFilterQuery.clone();
+                return this.virtualFilterQuery(filterQuery);
             }
             else if (!this.enableVirtualization) {
                 return filterQuery;
@@ -2698,7 +2699,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) :
                     this.value[this.value.length - 1];
                 var temp = text;
-                var textValues = this.text != null && this.text !== '' ? this.text + ',' + temp : temp;
+                var textValues = this.text != null && this.text !== '' ? this.text + this.delimiterChar + temp : temp;
                 currentText.push(textValues);
                 this.setProperties({ text: currentText.toString() }, true);
             }
@@ -3288,7 +3289,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.list.scrollTop = 0;
                 this.virtualListInfo = null;
                 this.previousStartIndex = 0;
-                this.previousEndIndex = 0;
+                this.previousEndIndex = this.itemCount;
             }
             this.isClearAllAction = false;
         }
@@ -3633,7 +3634,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             }
                             else {
                                 temp = isInitialVirtualData && delim ? this_1.text : this_1.getTextByValue(value);
-                                var textValues = isInitialVirtualData ? this_1.text : (this_1.text && this_1.text !== '' ? this_1.text + ',' + temp : temp);
+                                var textValues = isInitialVirtualData ? this_1.text : (this_1.text && this_1.text !== '' ? this_1.text + this_1.delimiterChar + temp : temp);
                                 data += temp + delimiterChar + ' ';
                                 text.push(textValues);
                                 hiddenElementContent = this_1.hiddenElement.innerHTML;
@@ -3801,7 +3802,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             (this.mode === 'Box' || this.mode === 'Default'))) ||
                         (this.enableVirtualization && value != null && text != null && !isCustomData)) {
                         var currentText = [];
-                        var textValues = this.text != null && this.text !== '' ? this.text + ',' + text : text;
+                        var textValues = this.text != null && this.text !== '' ? this.text + this.delimiterChar + text : text;
                         currentText.push(textValues);
                         this.setProperties({ text: currentText.toString() }, true);
                         this.addChip(text, value);
@@ -3837,7 +3838,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             this.wireListEvents();
                         }
                         var currentText = [];
-                        var textValues = this.text != null && this.text !== '' ? this.text + ',' + text : text;
+                        var textValues = this.text != null && this.text !== '' ? this.text + this.delimiterChar + text : text;
                         currentText.push(textValues);
                         this.setProperties({ text: currentText.toString() }, true);
                         this.addChip(text, value);
@@ -5480,7 +5481,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             _this.viewPortInfo.endIndex : _this.itemCount;
                         _this.virtualListInfo = _this.viewPortInfo;
                         _this.previousStartIndex = 0;
-                        _this.previousEndIndex = 0;
+                        _this.previousEndIndex = _this.itemCount;
                     }
                     var dataSourceCount = void 0;
                     if (_this.dataSource instanceof DataManager) {

package/styles/drop-down-base/tailwind3.css

@@ -67,7 +67,7 @@
 .e-popup.e-mention .e-dropdownbase.e-nodata {
   color: var(--color-sf-content-text-color);
   cursor: default;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
   padding: 14px 16px;
   text-align: center;
@@ -164,7 +164,7 @@
   border-bottom: 0;
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-flyout-text-color);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
   line-height: 32px;
   min-height: 32px;
@@ -177,7 +177,7 @@
 .e-fixed-head {
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-flyout-text-color);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
   font-weight: 500;
   line-height: 32px;
@@ -235,7 +235,7 @@
   border-style: solid;
   border-width: 0 0 1px 0;
   color: var(--color-sf-flyout-text-color);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
   font-weight: 500;
   text-indent: 10px;
@@ -293,7 +293,7 @@
   border-bottom: 0;
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-flyout-text-color);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   text-indent: 12px;
   font-size: 14px;
   padding-right: 16px;

package/styles/list-box/tailwind3.css

@@ -546,7 +546,7 @@ ejs-listbox {
 .e-listbox-wrapper,
 .e-listbox-container,
 .e-listboxtool-wrapper {
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
 }
 .e-listbox-wrapper .e-filter-parent,

package/styles/multi-select/tailwind3.css

@@ -411,7 +411,7 @@
 .e-multi-select-wrapper input[type=text] {
   background: none;
   border: 0;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
   font-weight: normal;
   height: 30px;
@@ -425,7 +425,7 @@
   background: none;
   border: 0;
   color: inherit;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
   font-weight: normal;
   height: 30px;
@@ -460,7 +460,7 @@
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
   line-height: 28px;
   max-width: 100%;
@@ -642,7 +642,7 @@
 
 .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
   color: var(--color-sf-content-text-color);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
 }
 
@@ -915,7 +915,7 @@ ejs-multiselect {
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
   -webkit-text-fill-color: var(--color-sf-content-text-color);
   color: var(--color-sf-content-text-color);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
 }