@syncfusion/ej2-dropdowns 26.1.42 → 26.2.5

package/dist/global/index.d.ts

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

package/hotfix/26.1.35_Vol2.txt

@@ -0,0 +1 @@
+hotfix/26.1.35_Vol2

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@26.1.41",
+  "_id": "@syncfusion/ej2-dropdowns@26.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-oXyXylub+CZHjdg53nVw1G9cLpYH15SYWNKUSypradjvrRhpt85Wt0YYc+kthaAjlFDkM2x8z1mD0eafZ85yJw==",
+  "_integrity": "sha512-rYtFrunryOtJIvcg6Izb0ZowqYEWuLASJHoM/wmI3KYUvkCbSlCarJKXOdgr+bybY/Y15ptJM3CW8f7LaHK6Zg==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -35,8 +35,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-26.1.41.tgz",
-  "_shasum": "68a76e93c7ed742f782843cefdcea6381b4ded71",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-26.2.4.tgz",
+  "_shasum": "905bcd69a60c92c8eb1203b485d3dbb5373f8ccf",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -44,13 +44,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.1.42",
-    "@syncfusion/ej2-data": "~26.1.42",
-    "@syncfusion/ej2-inputs": "~26.1.42",
-    "@syncfusion/ej2-lists": "~26.1.35",
-    "@syncfusion/ej2-navigations": "~26.1.41",
-    "@syncfusion/ej2-notifications": "~26.1.35",
-    "@syncfusion/ej2-popups": "~26.1.42"
+    "@syncfusion/ej2-base": "~26.2.5",
+    "@syncfusion/ej2-data": "~26.2.5",
+    "@syncfusion/ej2-inputs": "~26.2.5",
+    "@syncfusion/ej2-lists": "~26.2.5",
+    "@syncfusion/ej2-navigations": "~26.2.5",
+    "@syncfusion/ej2-notifications": "~26.2.5",
+    "@syncfusion/ej2-popups": "~26.2.5"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -75,7 +75,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "26.1.42",
+  "version": "26.2.5",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -1284,12 +1284,21 @@ var DropDownBase = /** @class */ (function (_super) {
         option.templateID = this.itemTemplateId;
         option.isStringTemplate = this.isStringTemplate;
         var itemcheck = this.templateCompiler(this.itemTemplate);
+        var ulElement;
         if (typeof this.itemTemplate !== 'function' && itemcheck) {
             var itemValue = select(this.itemTemplate, document).innerHTML.trim();
-            return ListBase.renderContentTemplate(this.createElement, itemValue, dataSource, fields.properties, option, this);
+            ulElement = ListBase.renderContentTemplate(this.createElement, itemValue, dataSource, fields.properties, option, this);
+            if (this.isVirtualizationEnabled && this.isReact) {
+                this.renderReactTemplates();
+            }
+            return ulElement;
         }
         else {
-            return ListBase.renderContentTemplate(this.createElement, this.itemTemplate, dataSource, fields.properties, option, this);
+            ulElement = ListBase.renderContentTemplate(this.createElement, this.itemTemplate, dataSource, fields.properties, option, this);
+            if (this.isVirtualizationEnabled && this.isReact) {
+                this.renderReactTemplates();
+            }
+            return ulElement;
         }
     };
     DropDownBase.prototype.typeOfData = function (items) {

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

@@ -1902,7 +1902,7 @@ var DropDownList = /** @class */ (function (_super) {
                         return;
                     }
                     _this.isCustomFilter = true;
-                    _this.customFilterQuery = query.clone();
+                    _this.customFilterQuery = query ? query.clone() : query;
                     _this.filteringAction(dataSource, query, fields);
                 },
                 baseEventArgs: e,

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

@@ -269,7 +269,12 @@ var DropDownTree = /** @class */ (function (_super) {
             }
         }
         else {
-            this.inputEle = this.createElement('input', { attrs: { role: 'textbox', type: 'text' } });
+            if (!isNOU(this.element.id)) {
+                this.inputEle = this.createElement('input', { attrs: { role: 'textbox', type: 'text', id: this.element.id } });
+            }
+            else {
+                this.inputEle = this.createElement('input', { attrs: { role: 'textbox', type: 'text' } });
+            }
             this.element.parentElement.insertBefore(this.inputEle, this.element);
         }
         this.inputObj = Input.createInput({

package/styles/auto-complete/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);

package/styles/bootstrap-dark.css

@@ -2532,20 +2532,6 @@ ejs-multiselect {
 .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
   text-align: center;
 }
-.e-listbox-wrapper:not(.e-list-template) .e-list-item,
-.e-listbox-wrapper .e-list-nrt,
-.e-listbox-wrapper .e-selectall-parent,
-.e-listbox-container:not(.e-list-template) .e-list-item,
-.e-listbox-container .e-list-nrt,
-.e-listbox-container .e-selectall-parent,
-.e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
-.e-listboxtool-wrapper .e-list-nrt,
-.e-listboxtool-wrapper .e-selectall-parent {
-  height: 40px;
-  line-height: 1;
-  padding: 13px 16px;
-  position: relative;
-}
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent,
 .e-listboxtool-wrapper .e-list-parent {
@@ -3022,6 +3008,21 @@ ejs-listbox {
 .e-listbox-container.e-bigger .e-list-header .e-text {
   font-size: 15px;
 }
+.e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listbox-wrapper .e-list-nrt,
+.e-listbox-wrapper .e-selectall-parent,
+.e-listbox-container:not(.e-list-template) .e-list-item,
+.e-listbox-container .e-list-nrt,
+.e-listbox-container .e-selectall-parent,
+.e-listboxtool-wrapper .e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-nrt,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-selectall-parent {
+  height: 40px;
+  line-height: 1;
+  padding: 13px 16px;
+  position: relative;
+}
+
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {
   height: calc(100% - 46px) !important; /* stylelint-disable-line declaration-no-important */

package/styles/bootstrap.css

@@ -2531,20 +2531,6 @@ ejs-multiselect {
 .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
   text-align: center;
 }
-.e-listbox-wrapper:not(.e-list-template) .e-list-item,
-.e-listbox-wrapper .e-list-nrt,
-.e-listbox-wrapper .e-selectall-parent,
-.e-listbox-container:not(.e-list-template) .e-list-item,
-.e-listbox-container .e-list-nrt,
-.e-listbox-container .e-selectall-parent,
-.e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
-.e-listboxtool-wrapper .e-list-nrt,
-.e-listboxtool-wrapper .e-selectall-parent {
-  height: 40px;
-  line-height: 1;
-  padding: 13px 16px;
-  position: relative;
-}
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent,
 .e-listboxtool-wrapper .e-list-parent {
@@ -3027,6 +3013,21 @@ ejs-listbox {
 .e-listbox-container.e-bigger .e-list-header .e-text {
   font-size: 15px;
 }
+.e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listbox-wrapper .e-list-nrt,
+.e-listbox-wrapper .e-selectall-parent,
+.e-listbox-container:not(.e-list-template) .e-list-item,
+.e-listbox-container .e-list-nrt,
+.e-listbox-container .e-selectall-parent,
+.e-listboxtool-wrapper .e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-nrt,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-selectall-parent {
+  height: 40px;
+  line-height: 1;
+  padding: 13px 16px;
+  position: relative;
+}
+
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {
   height: calc(100% - 46px) !important; /* stylelint-disable-line declaration-no-important */

package/styles/bootstrap4.css

@@ -2735,20 +2735,6 @@ ejs-multiselect {
 .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
   text-align: center;
 }
-.e-listbox-wrapper:not(.e-list-template) .e-list-item,
-.e-listbox-wrapper .e-list-nrt,
-.e-listbox-wrapper .e-selectall-parent,
-.e-listbox-container:not(.e-list-template) .e-list-item,
-.e-listbox-container .e-list-nrt,
-.e-listbox-container .e-selectall-parent,
-.e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
-.e-listboxtool-wrapper .e-list-nrt,
-.e-listboxtool-wrapper .e-selectall-parent {
-  height: 40px;
-  line-height: 1.5;
-  padding: 10px 16px 10px 16px;
-  position: relative;
-}
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent,
 .e-listboxtool-wrapper .e-list-parent {
@@ -3275,6 +3261,21 @@ ejs-listbox {
   margin: 0 0 0 12px;
 }
 
+.e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listbox-wrapper .e-list-nrt,
+.e-listbox-wrapper .e-selectall-parent,
+.e-listbox-container:not(.e-list-template) .e-list-item,
+.e-listbox-container .e-list-nrt,
+.e-listbox-container .e-selectall-parent,
+.e-listboxtool-wrapper .e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-nrt,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-selectall-parent {
+  height: 40px;
+  line-height: 1.5;
+  padding: 10px 16px 10px 16px;
+  position: relative;
+}
+
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {
   height: calc(100% - 43px) !important; /* stylelint-disable-line declaration-no-important */

package/styles/bootstrap5-dark.css

@@ -2697,20 +2697,6 @@ ejs-multiselect {
 .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
   text-align: center;
 }
-.e-listbox-wrapper:not(.e-list-template) .e-list-item,
-.e-listbox-wrapper .e-list-nrt,
-.e-listbox-wrapper .e-selectall-parent,
-.e-listbox-container:not(.e-list-template) .e-list-item,
-.e-listbox-container .e-list-nrt,
-.e-listbox-container .e-selectall-parent,
-.e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
-.e-listboxtool-wrapper .e-list-nrt,
-.e-listboxtool-wrapper .e-selectall-parent {
-  height: 36px;
-  line-height: 1;
-  padding: 10px 12px;
-  position: relative;
-}
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent,
 .e-listboxtool-wrapper .e-list-parent {
@@ -3193,6 +3179,21 @@ ejs-listbox {
 .e-listbox-container.e-bigger .e-list-header .e-text {
   font-size: 14px;
 }
+.e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listbox-wrapper .e-list-nrt,
+.e-listbox-wrapper .e-selectall-parent,
+.e-listbox-container:not(.e-list-template) .e-list-item,
+.e-listbox-container .e-list-nrt,
+.e-listbox-container .e-selectall-parent,
+.e-listboxtool-wrapper .e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-nrt,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-selectall-parent {
+  height: 36px;
+  line-height: 1;
+  padding: 10px 12px;
+  position: relative;
+}
+
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {
   height: calc(100% - 45px) !important; /* stylelint-disable-line declaration-no-important */

package/styles/bootstrap5.css

@@ -2697,20 +2697,6 @@ ejs-multiselect {
 .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
   text-align: center;
 }
-.e-listbox-wrapper:not(.e-list-template) .e-list-item,
-.e-listbox-wrapper .e-list-nrt,
-.e-listbox-wrapper .e-selectall-parent,
-.e-listbox-container:not(.e-list-template) .e-list-item,
-.e-listbox-container .e-list-nrt,
-.e-listbox-container .e-selectall-parent,
-.e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
-.e-listboxtool-wrapper .e-list-nrt,
-.e-listboxtool-wrapper .e-selectall-parent {
-  height: 36px;
-  line-height: 1;
-  padding: 10px 12px;
-  position: relative;
-}
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent,
 .e-listboxtool-wrapper .e-list-parent {
@@ -3193,6 +3179,21 @@ ejs-listbox {
 .e-listbox-container.e-bigger .e-list-header .e-text {
   font-size: 14px;
 }
+.e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listbox-wrapper .e-list-nrt,
+.e-listbox-wrapper .e-selectall-parent,
+.e-listbox-container:not(.e-list-template) .e-list-item,
+.e-listbox-container .e-list-nrt,
+.e-listbox-container .e-selectall-parent,
+.e-listboxtool-wrapper .e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-nrt,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-selectall-parent {
+  height: 36px;
+  line-height: 1;
+  padding: 10px 12px;
+  position: relative;
+}
+
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {
   height: calc(100% - 45px) !important; /* stylelint-disable-line declaration-no-important */

package/styles/combo-box/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);

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

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);

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

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);

package/styles/drop-down-tree/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);

package/styles/fabric-dark.css

@@ -2506,20 +2506,6 @@ ejs-multiselect {
 .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
   text-align: center;
 }
-.e-listbox-wrapper:not(.e-list-template) .e-list-item,
-.e-listbox-wrapper .e-list-nrt,
-.e-listbox-wrapper .e-selectall-parent,
-.e-listbox-container:not(.e-list-template) .e-list-item,
-.e-listbox-container .e-list-nrt,
-.e-listbox-container .e-selectall-parent,
-.e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
-.e-listboxtool-wrapper .e-list-nrt,
-.e-listboxtool-wrapper .e-selectall-parent {
-  height: 36px;
-  line-height: 1;
-  padding: 10px 16px;
-  position: relative;
-}
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent,
 .e-listboxtool-wrapper .e-list-parent {
@@ -2996,6 +2982,21 @@ ejs-listbox {
 .e-listbox-container.e-bigger .e-list-header .e-text {
   font-size: 15px;
 }
+.e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listbox-wrapper .e-list-nrt,
+.e-listbox-wrapper .e-selectall-parent,
+.e-listbox-container:not(.e-list-template) .e-list-item,
+.e-listbox-container .e-list-nrt,
+.e-listbox-container .e-selectall-parent,
+.e-listboxtool-wrapper .e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-nrt,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-selectall-parent {
+  height: 36px;
+  line-height: 1;
+  padding: 10px 16px;
+  position: relative;
+}
+
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {
   height: calc(100% - 45px) !important; /* stylelint-disable-line declaration-no-important */

package/styles/fabric.css

@@ -2500,20 +2500,6 @@ ejs-multiselect {
 .e-listboxtool-wrapper:not(.e-list-template) .e-list-nrt {
   text-align: center;
 }
-.e-listbox-wrapper:not(.e-list-template) .e-list-item,
-.e-listbox-wrapper .e-list-nrt,
-.e-listbox-wrapper .e-selectall-parent,
-.e-listbox-container:not(.e-list-template) .e-list-item,
-.e-listbox-container .e-list-nrt,
-.e-listbox-container .e-selectall-parent,
-.e-listboxtool-wrapper:not(.e-list-template) .e-list-item,
-.e-listboxtool-wrapper .e-list-nrt,
-.e-listboxtool-wrapper .e-selectall-parent {
-  height: 36px;
-  line-height: 1;
-  padding: 10px 16px;
-  position: relative;
-}
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent,
 .e-listboxtool-wrapper .e-list-parent {
@@ -2996,6 +2982,21 @@ ejs-listbox {
 .e-listbox-container.e-bigger .e-list-header .e-text {
   font-size: 15px;
 }
+.e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listbox-wrapper .e-list-nrt,
+.e-listbox-wrapper .e-selectall-parent,
+.e-listbox-container:not(.e-list-template) .e-list-item,
+.e-listbox-container .e-list-nrt,
+.e-listbox-container .e-selectall-parent,
+.e-listboxtool-wrapper .e-listbox-wrapper:not(.e-list-template) .e-list-item,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-nrt,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-selectall-parent {
+  height: 36px;
+  line-height: 1;
+  padding: 10px 16px;
+  position: relative;
+}
+
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {
   height: calc(100% - 45px) !important; /* stylelint-disable-line declaration-no-important */