@syncfusion/ej2-dropdowns 28.1.33 → 28.1.36

package/dist/global/index.d.ts

@@ -1,12 +1,3 @@
-/*!
-*  filename: index.d.ts
-*  version : 28.1.33
-*  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
-*  applicable laws. 
-*/
 import * as _dropdowns from '@syncfusion/ej2-dropdowns';
 
 export declare namespace ej {

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@18.66.23",
+  "_id": "@syncfusion/ej2-dropdowns@28.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-jAMyUmtAEAvQCfxHM/xreP16YtFzyXq5WLDXNo7lm9OShq+TNU3ATXtJdWqG321zdB5Sjmf8PUQ41NZjPfJq9w==",
+  "_integrity": "sha512-AV0Z1peZZOX3YhbLRzB/vm9sp/iKHLJXoEpR1lAHxIq/vJYIG2ExbHWSiueXlcmjxTtQBOdCXj3AntmcZOdfnQ==",
   "_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-release/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.66.23.tgz",
-  "_shasum": "caae466fa776dcfc31bf6b912adb3791b40e4f00",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-28.1.35.tgz",
+  "_shasum": "b8a7bc80767221ac6a1046b6a1562ae1333d144c",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
@@ -49,7 +45,7 @@
     "@syncfusion/ej2-data": "~28.1.33",
     "@syncfusion/ej2-inputs": "~28.1.33",
     "@syncfusion/ej2-lists": "~28.1.33",
-    "@syncfusion/ej2-navigations": "~28.1.33",
+    "@syncfusion/ej2-navigations": "~28.1.36",
     "@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.33",
+  "version": "28.1.36",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -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/drop-down-base/drop-down-base.js

@@ -479,7 +479,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',

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

@@ -657,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;
     /**

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

@@ -1916,6 +1916,9 @@ var DropDownList = /** @class */ (function (_super) {
                     if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {
                         this.getInitialData = true;
                         this.renderList();
+                        if (!this.isSecondClick && !this.isDropDownClick) {
+                            this.executeCloneElements();
+                        }
                     }
                     this.typedString = this.filterInput.value;
                     this.preventAutoFill = false;
@@ -2175,6 +2178,9 @@ var DropDownList = /** @class */ (function (_super) {
                 this.getFilteringSkeletonCount();
             }
             this.renderReactTemplates();
+            if (this.filterInput && this.filterInput.value === '' && this.getModuleName() === 'combobox') {
+                this.executeCloneElements();
+            }
         }
     };
     DropDownList.prototype.setSearchBox = function (popupElement) {
@@ -4067,10 +4073,15 @@ var DropDownList = /** @class */ (function (_super) {
                 isOpen: true
             });
         }
+        if (!this.isSecondClick && !this.isDropDownClick) {
+            this.executeCloneElements();
+        }
+    };
+    DropDownList.prototype.executeCloneElements = function () {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
         var duration = (this.element.tagName === this.getNgDirective() && this.itemTemplate) ? 500 : 100;
-        if (!this.isSecondClick && this.isReact && !this.isDropDownClick && this.isFiltering() && this.itemTemplate != null) {
+        if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
             setTimeout(function () {
                 proxy.cloneElements();
                 proxy.isSecondClick = true;

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

@@ -332,6 +332,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private nestedTableUpdate;
     private clearIconWidth;
     private isClicked;
+    private documentClickContext;
     private isCheckAllCalled;
     private isFromFilterChange;
     private valueTemplateContainer;

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

@@ -171,6 +171,7 @@ var DropDownTree = /** @class */ (function (_super) {
         _this.selectedData = [];
         _this.filterDelayTime = 300;
         _this.isClicked = false;
+        _this.documentClickContext = _this.onDocumentClick.bind(_this);
         // Specifies if the checkAll method has been called
         _this.isCheckAllCalled = false;
         _this.isFromFilterChange = false;
@@ -464,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) {
@@ -690,7 +692,7 @@ var DropDownTree = /** @class */ (function (_super) {
         if (this.showSelectAll && this.checkAllParent) {
             EventHandler.remove(this.checkAllParent, 'mouseup', this.clickHandler);
         }
-        EventHandler.remove(document, 'mousedown', this.onDocumentClick);
+        document.removeEventListener('mousedown', this.documentClickContext);
     };
     /* Trigger when the dropdown is clicked */
     DropDownTree.prototype.dropDownClick = function (e) {
@@ -1735,7 +1737,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 if (_this.treeObj.checkedNodes.length > 0 && !_this.isFilterRestore) {
                     var nodes = _this.treeObj.element.querySelectorAll('li');
                     var checkedNodes = _this.treeObj.element.querySelectorAll('li[aria-checked=true]');
-                    if ((checkedNodes.length === nodes.length || _this.checkSelectAll) && _this.checkBoxElement) {
+                    if ((checkedNodes.length === nodes.length) && _this.checkBoxElement) {
                         var wrap = closest(_this.checkBoxElement, '.' + CHECKBOXWRAP);
                         _this.changeState(wrap, 'check');
                         _this.checkSelectAll = false;
@@ -1798,7 +1800,7 @@ var DropDownTree = /** @class */ (function (_super) {
                     _this.isPopupOpen = false;
                 },
                 open: function () {
-                    EventHandler.add(document, 'mousedown', _this.onDocumentClick, _this);
+                    document.addEventListener('mousedown', _this.documentClickContext);
                     _this.isPopupOpen = true;
                 },
                 targetExitViewport: function () {
@@ -1905,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 () {
@@ -2168,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;

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/multi-select/multi-select.js

@@ -3288,7 +3288,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;
         }
@@ -5480,7 +5480,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/bootstrap5-dark-lite.css

@@ -1445,6 +1445,7 @@ ejs-dropdownlist {
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

package/styles/bootstrap5-dark.css

@@ -1754,6 +1754,7 @@ ejs-dropdownlist {
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

package/styles/bootstrap5-lite.css

@@ -1445,6 +1445,7 @@ ejs-dropdownlist {
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

package/styles/bootstrap5.3-lite.css

@@ -1435,6 +1435,7 @@ ejs-dropdownlist {
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

package/styles/bootstrap5.3.css

@@ -1686,6 +1686,7 @@ ejs-dropdownlist {
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

package/styles/bootstrap5.css

@@ -1754,6 +1754,7 @@ ejs-dropdownlist {
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

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/drop-down-list/_layout.scss

@@ -194,7 +194,7 @@
   .e-ddl.e-popup.e-popup-open .e-list-item.e-disabled {
     opacity: .7;
     pointer-events: none;
-    @if $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2' or $skin-name == 'tailwind4' {
+    @if $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
       color: $ddl-list-disable-item-color;
     }
   }

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

@@ -347,6 +347,7 @@
 .e-ddl.e-popup.e-popup-open .e-list-item.e-disabled {
   opacity: 0.7;
   pointer-events: none;
+  color: var(--color-sf-flyout-text-color-disabled);
 }
 
 ejs-autocomplete,

package/styles/fluent-dark-lite.css

@@ -1448,6 +1448,7 @@ ejs-dropdownlist {
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

package/styles/fluent-dark.css

@@ -1758,6 +1758,7 @@ ejs-dropdownlist {
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

package/styles/fluent-lite.css

@@ -1448,6 +1448,7 @@ ejs-dropdownlist {
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

package/styles/fluent.css

@@ -1758,6 +1758,7 @@ ejs-dropdownlist {
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

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/_layout.scss

@@ -414,9 +414,7 @@
   max-width: 100%;
   padding-left: $ddl-delim-text-indent;
   padding-right: $ddl-delim-text-padding-right;
-  @if $ddl-multiselect-skin-name != 'bootstrap5' and $ddl-multiselect-skin-name != 'bootstrap5.3' and $ddl-multiselect-skin-name != 'FluentUI' {
-    vertical-align: middle;
-  }
+  vertical-align: middle;
 }
 
 .e-small .e-multi-select-wrapper .e-delim-values .e-remain {

package/styles/multi-select/bootstrap5-dark.css

@@ -465,6 +465,7 @@
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

package/styles/multi-select/bootstrap5.3.css

@@ -469,6 +469,7 @@
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

package/styles/multi-select/bootstrap5.css

@@ -465,6 +465,7 @@
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

package/styles/multi-select/fluent-dark.css

@@ -471,6 +471,7 @@
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

package/styles/multi-select/fluent.css

@@ -471,6 +471,7 @@
   max-width: 100%;
   padding-left: 8px;
   padding-right: 6px;
+  vertical-align: middle;
 }
 
 .e-multi-select-list-wrapper .e-hide-listitem,

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;
 }
 

package/styles/tailwind3-lite.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;
@@ -645,6 +645,7 @@
 .e-ddl.e-popup.e-popup-open .e-list-item.e-disabled {
   opacity: 0.7;
   pointer-events: none;
+  color: var(--color-sf-flyout-text-color-disabled);
 }
 
 ejs-autocomplete,
@@ -1369,7 +1370,7 @@ ejs-dropdownlist {
 .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;
@@ -1383,7 +1384,7 @@ ejs-dropdownlist {
   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;
@@ -1418,7 +1419,7 @@ ejs-dropdownlist {
 }
 
 .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%;
@@ -1600,7 +1601,7 @@ ejs-dropdownlist {
 
 .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;
 }
 
@@ -1873,7 +1874,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;
 }
 
@@ -2580,7 +2581,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,