@syncfusion/ej2-dropdowns 23.2.7-52849 → 24.1.41-566987

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

@@ -253,14 +253,17 @@ var DropDownTree = /** @class */ (function (_super) {
     DropDownTree.prototype.render = function () {
         var isTree = select('#' + this.element.id + '_tree', document);
         if (isTree) {
-            var popupDiv = select('#' + this.element.id + '_popup', document);
+            var popupDiv = select('#' + this.element.id + '_options', document);
             detach(popupDiv ? popupDiv : isTree.parentElement);
         }
         this.ensureAutoCheck();
         if (this.element.tagName === 'INPUT') {
             this.inputEle = this.element;
             if (isNOU(this.inputEle.getAttribute('role'))) {
-                this.inputEle.setAttribute('role', 'textbox');
+                this.inputEle.setAttribute('aria-expanded', 'false');
+                this.inputEle.setAttribute('role', 'combobox');
+                this.inputEle.setAttribute('aria-haspopup', 'tree');
+                this.inputEle.setAttribute('aria-controls', this.element.id + "_options");
             }
             if (isNOU(this.inputEle.getAttribute('type'))) {
                 this.inputEle.setAttribute('type', 'text');
@@ -428,8 +431,12 @@ var DropDownTree = /** @class */ (function (_super) {
                 }
                 _this.treeObj.fields = _this.getTreeFields(fields);
                 _this.treeObj.dataBind();
-                if (_this.hasTemplate && _this.portals) {
-                    _this.portals = [].concat(_this.treeObj.portals);
+                if (_this.hasTemplate && _this.portals && _this.treeObj.portals) {
+                    for (var i = 0; i < _this.treeObj.portals.length; i++) {
+                        if (_this.portals.indexOf(_this.treeObj.portals[i]) == -1) {
+                            _this.portals.push(_this.treeObj.portals[i]);
+                        }
+                    }
                     if (_this.isReact) {
                         _this.renderReactTemplates();
                     }
@@ -889,16 +896,7 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.getAriaAttributes = function () {
-        var disable = this.enabled ? 'false' : 'true';
-        return {
-            'aria-disabled': disable,
-            'aria-owns': this.element.id + '_options',
-            'role': 'listbox',
-            'aria-haspopup': 'true',
-            'aria-expanded': 'false',
-            'aria-activedescendant': 'null',
-            'aria-labelledby': this.hiddenElement.id
-        };
+        return {};
     };
     DropDownTree.prototype.updateOverFlowView = function () {
         this.overFlowWrapper.classList.remove(TOTAL_COUNT_WRAPPER);
@@ -1249,7 +1247,7 @@ var DropDownTree = /** @class */ (function (_super) {
                         }
                     }
                     else {
-                        this.inputWrapper.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
+                        this.inputEle.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                     }
                 }
             }
@@ -1503,8 +1501,10 @@ var DropDownTree = /** @class */ (function (_super) {
                 addClass([_this.inputWrapper], [ICONANIMATION]);
                 if (_this.isFirstRender) {
                     _this.popupEle = _this.createElement('div', {
-                        id: _this.element.id + '_popup', className: POPUP_CLASS + ' ' + (_this.cssClass != null ? _this.cssClass : '')
+                        id: _this.element.id + '_options', className: POPUP_CLASS + ' ' + (_this.cssClass != null ? _this.cssClass : '')
                     });
+                    _this.popupEle.setAttribute('role', 'region');
+                    _this.popupEle.setAttribute('aria-label', _this.element.id);
                     document.body.appendChild(_this.popupEle);
                     _this.createPopup(_this.popupEle);
                 }
@@ -1540,7 +1540,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 }
             }
             if (!isCancelled) {
-                attributes(_this.inputWrapper, { 'aria-expanded': 'true' });
+                attributes(_this.inputEle, { 'aria-expanded': 'true' });
                 _this.popupObj.show(null, (_this.zIndex === 1000) ? _this.inputEle : null);
                 removeClass([_this.popupEle], DDTHIDEICON);
                 _this.updatePopupHeight();
@@ -1992,8 +1992,12 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.onNodeExpanded = function (args) {
-        if (this.hasTemplate && this.portals) {
-            this.portals = [].concat(this.treeObj.portals);
+        if (this.hasTemplate && this.portals && this.treeObj.portals) {
+            for (var i = 0; i < this.treeObj.portals.length; i++) {
+                if (this.portals.indexOf(this.treeObj.portals[i]) == -1) {
+                    this.portals.push(this.treeObj.portals[i]);
+                }
+            }
             /* eslint-enable */
             this.renderReactTemplates();
         }
@@ -3027,7 +3031,7 @@ var DropDownTree = /** @class */ (function (_super) {
         if (this.popupEle) {
             addClass([this.popupEle], DDTHIDEICON);
         }
-        attributes(this.inputWrapper, { 'aria-expanded': 'false' });
+        attributes(this.inputEle, { 'aria-expanded': 'false' });
         if (this.popupObj && this.isPopupOpen) {
             this.popupObj.hide();
             if (this.inputFocus) {

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

@@ -137,6 +137,12 @@ var ListBox = /** @class */ (function (_super) {
         var hiddenSelect = this.createElement('select', { className: 'e-hidden-select', attrs: { 'multiple': '' } });
         hiddenSelect.style.visibility = 'hidden';
         this.list.classList.add('e-listbox-wrapper');
+        this.list.querySelector('.e-list-parent').setAttribute('role', 'presentation');
+        var groupHdrs = this.list.querySelectorAll('.e-list-group-item');
+        for (var i = 0; i < groupHdrs.length; i++) {
+            groupHdrs[i].removeAttribute('tabindex');
+            groupHdrs[i].setAttribute('role', 'option');
+        }
         if (this.itemTemplate) {
             this.list.classList.add('e-list-template');
         }
@@ -1201,7 +1207,8 @@ var ListBox = /** @class */ (function (_super) {
                 'autocomplete': 'off',
                 'autocorrect': 'off',
                 'autocapitalize': 'off',
-                'spellcheck': 'false'
+                'spellcheck': 'false',
+                'role': 'textbox'
             });
             if (this.height.toString().indexOf('%') < 0) {
                 addClass([this.list], 'e-filter-list');

package/src/mention/mention.js

@@ -149,6 +149,7 @@ var Mention = /** @class */ (function (_super) {
             }
         }
         this.inputElement.setAttribute('role', 'textbox');
+        this.inputElement.setAttribute('aria-label', 'mention');
         this.queryString = this.elementValue();
         this.wireEvent();
     };
@@ -459,7 +460,10 @@ var Mention = /** @class */ (function (_super) {
                 var value = this.getFormattedValue(focusItem.getAttribute('data-value'));
                 this.selectEventCallback(focusItem, this.getDataByValue(value), value, true);
             }
-            if (this.beforePopupOpen) {
+            if (this.beforePopupOpen && this.isPopupOpen) {
+                if (this.initRemoteRender && !isNullOrUndefined(this.popupObj.element)) {
+                    this.popupObj.element.remove();
+                }
                 this.renderPopup();
             }
         }

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

@@ -282,7 +282,10 @@ var CheckBoxSelection = /** @class */ (function () {
                 'role': 'combobox',
                 'autocomplete': 'off',
                 'autocapitalize': 'off',
-                'spellcheck': 'false'
+                'spellcheck': 'false',
+                'aria-label': 'multiselect',
+                'aria-expanded': 'true',
+                'aria-controls': args.popupElement.id
             });
             this.clearIconElement = this.filterInput.parentElement.querySelector('.' + clearIcon);
             if (!Browser.isDevice && this.clearIconElement) {

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

@@ -259,7 +259,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (_this.popupObj) {
                     _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
                 }
-                attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options' });
+                attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id });
                 _this.updateAriaActiveDescendant();
                 if (_this.isFirstClick) {
                     _this.loadTemplate();
@@ -340,7 +340,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.updateListARIA = function () {
         if (!isNullOrUndefined(this.ulElement)) {
-            attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
+            attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false', 'aria-label': 'list' });
         }
         var disableStatus = !isNullOrUndefined(this.inputElement) && (this.inputElement.disabled) ? true : false;
         if (!this.isPopupOpen() && !isNullOrUndefined(this.inputElement)) {
@@ -3937,6 +3937,8 @@ var MultiSelect = /** @class */ (function (_super) {
         this.setWidth(this.width);
         this.overAllWrapper.appendChild(this.componentWrapper);
         this.popupWrapper = this.createElement('div', { id: this.element.id + '_popup', className: POPUP_WRAPPER });
+        this.popupWrapper.setAttribute('aria-label', this.element.id);
+        this.popupWrapper.setAttribute('role', 'dialog');
         if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {
             this.delimiterWrapper = this.createElement('span', { className: DELIMITER_WRAPPER, styles: 'display:none' });
             this.componentWrapper.appendChild(this.delimiterWrapper);

package/styles/auto-complete/_bds-definition.scss

@@ -0,0 +1,2 @@
+//default
+//enddefault

package/styles/bootstrap-dark.css

@@ -68,9 +68,6 @@
   position: absolute;
   top: 0;
 }
-.e-rtl .e-dropdownbase .e-fixed-head {
-  left: 33px;
-}
 
 .e-dropdownbase.e-content {
   overflow: auto;
@@ -110,11 +107,6 @@
   cursor: default;
 }
 
-.e-mention .e-mention-chip::selection {
-  color: #fff;
-  background: #0070f0;
-}
-
 .e-mention.e-editable-element {
   border: 2px solid #414141;
   height: auto;
@@ -539,6 +531,11 @@
   padding: 4px 0;
 }
 
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;
@@ -836,6 +833,10 @@ ejs-dropdownlist {
   padding-left: 0;
   padding-right: 0;
 }
+.e-ddt.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
+  display: -ms-flexbox;
+  display: flex;
+}
 .e-ddt .e-chips-wrapper {
   width: 100%;
 }
@@ -1223,6 +1224,10 @@ ejs-dropdownlist {
   color: #fff;
 }
 
+.e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
+  margin-top: -3.2em;
+}
+
 .e-multiselect.e-input-group .e-ddl-icon::before {
   content: "\e969";
   font-family: "e-icons";
@@ -1523,8 +1528,10 @@ ejs-dropdownlist {
   margin-top: -4em;
 }
 
-.e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
+.e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
+.e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
   margin-top: -4em;
+  margin-top: -3.7em;
 }
 
 .e-multi-select-wrapper input[type=text] {

package/styles/bootstrap.css

@@ -68,9 +68,6 @@
   position: absolute;
   top: 0;
 }
-.e-rtl .e-dropdownbase .e-fixed-head {
-  left: 33px;
-}
 
 .e-dropdownbase.e-content {
   overflow: auto;
@@ -110,11 +107,6 @@
   cursor: default;
 }
 
-.e-mention .e-mention-chip::selection {
-  color: #fff;
-  background: #317ab9;
-}
-
 .e-mention.e-editable-element {
   border: 2px solid rgba(119, 119, 119, 0.25);
   height: auto;
@@ -539,6 +531,11 @@
   padding: 4px 0;
 }
 
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;
@@ -837,6 +834,10 @@ ejs-dropdownlist {
   padding-left: 0;
   padding-right: 0;
 }
+.e-ddt.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
+  display: -ms-flexbox;
+  display: flex;
+}
 .e-ddt .e-chips-wrapper {
   width: 100%;
 }
@@ -1217,6 +1218,10 @@ ejs-dropdownlist {
   width: 40px;
 }
 
+.e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
+  margin-top: -3.2em;
+}
+
 .e-multiselect.e-input-group .e-ddl-icon::before {
   content: "\e969";
   font-family: "e-icons";
@@ -1517,8 +1522,10 @@ ejs-dropdownlist {
   margin-top: -4em;
 }
 
-.e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
+.e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
+.e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
   margin-top: -4em;
+  margin-top: -3.7em;
 }
 
 .e-multi-select-wrapper input[type=text] {

package/styles/bootstrap4.css

@@ -78,9 +78,6 @@
   position: absolute;
   top: 0;
 }
-.e-rtl .e-dropdownbase .e-fixed-head {
-  left: 33px;
-}
 
 .e-dropdownbase.e-content {
   overflow: auto;
@@ -120,11 +117,6 @@
   cursor: default;
 }
 
-.e-mention .e-mention-chip::selection {
-  color: #fff;
-  background: #007bff;
-}
-
 .e-mention.e-editable-element {
   border: 2px solid rgba(0, 0, 0, 0.15);
   height: auto;
@@ -586,6 +578,11 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;
@@ -880,6 +877,10 @@ ejs-dropdownlist {
   padding-left: 0;
   padding-right: 0;
 }
+.e-ddt.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
+  display: -ms-flexbox;
+  display: flex;
+}
 .e-ddt .e-chips-wrapper {
   width: 100%;
 }
@@ -1682,7 +1683,8 @@ ejs-dropdownlist {
   margin-top: -3.5em;
 }
 
-.e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
+.e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
+.e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
   margin-top: -3.5em;
 }
 

package/styles/bootstrap5-dark.css

@@ -94,9 +94,6 @@
   position: absolute;
   top: 0;
 }
-.e-rtl .e-dropdownbase .e-fixed-head {
-  left: 33px;
-}
 
 .e-dropdownbase.e-content {
   overflow: auto;
@@ -136,11 +133,6 @@
   cursor: default;
 }
 
-.e-mention .e-mention-chip::selection {
-  color: #fff;
-  background: #0d6efd;
-}
-
 .e-mention.e-editable-element {
   border: 2px solid #444c54;
   height: auto;
@@ -605,6 +597,11 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;
@@ -900,6 +897,10 @@ ejs-dropdownlist {
   padding-left: 0;
   padding-right: 0;
 }
+.e-ddt.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
+  display: -ms-flexbox;
+  display: flex;
+}
 .e-ddt .e-chips-wrapper {
   width: 100%;
 }
@@ -1666,7 +1667,8 @@ ejs-dropdownlist {
   margin-top: -2.25em;
 }
 
-.e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
+.e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
+.e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
   margin-top: -2.25em;
   margin-top: -2.15em;
 }

package/styles/bootstrap5.css

@@ -94,9 +94,6 @@
   position: absolute;
   top: 0;
 }
-.e-rtl .e-dropdownbase .e-fixed-head {
-  left: 33px;
-}
 
 .e-dropdownbase.e-content {
   overflow: auto;
@@ -136,11 +133,6 @@
   cursor: default;
 }
 
-.e-mention .e-mention-chip::selection {
-  color: #fff;
-  background: #0d6efd;
-}
-
 .e-mention.e-editable-element {
   border: 2px solid #dee2e6;
   height: auto;
@@ -605,6 +597,11 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
+.e-popup.e-wide-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;
@@ -900,6 +897,10 @@ ejs-dropdownlist {
   padding-left: 0;
   padding-right: 0;
 }
+.e-ddt.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
+  display: -ms-flexbox;
+  display: flex;
+}
 .e-ddt .e-chips-wrapper {
   width: 100%;
 }
@@ -1666,7 +1667,8 @@ ejs-dropdownlist {
   margin-top: -2.25em;
 }
 
-.e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
+.e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
+.e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
   margin-top: -2.25em;
   margin-top: -2.15em;
 }

package/styles/combo-box/_bds-definition.scss

@@ -0,0 +1,2 @@
+//default
+//enddefault

package/styles/drop-down-base/_bds-definition.scss

@@ -0,0 +1,134 @@
+$ddl-list-line-height: 32px !default;
+$ddl-header-font-weight: $font-weight-medium !default;
+$ddl-last-child-bottom-border: 0 !default;
+$ddl-default-font-family: $font-family !default;
+$ddl-line-height: 40px !default;
+$ddl-list-border-size: 0 !default;
+$ddl-list-bottom-border: $ddl-list-border-size !default;
+
+$ddl-list-font-size: $text-sm !default;
+$ddl-list-font-family: $font-family !default;
+$ddl-list-focus-border: 1px solid $border-focus !default;
+$ddl-group-list-padding-left: 12px !default;
+$ddl-group-list-small-padding-left: 8px !default;
+$ddl-group-list-bigger-padding-left: 16px !default;
+$ddl-group-list-bigger-small-padding-left: 14px !default;
+$ddl-list-header-padding-left: 12px !default;
+$ddl-list-header-small-padding-left: 8px !default;
+$ddl-list-header-bigger-small-padding-left: 14px !default;
+$ddl-list-header-bigger-padding-left: 16px !default;
+$ddl-list-text-indent: 12px !default;
+$ddl-bigger-text-indent: 16px !default;
+$ddl-list-rtl-padding-right: 0 !default;
+$ddl-list-padding-right: 16px !default;
+$ddl-list-rtl-padding-left: 16px !default;
+$ddl-multi-column-border-width: 0 0 1px 0 !default;
+$ddl-bigger-list-header-font-size: $text-sm !default;
+$ddl-group-list-font-size: $text-sm !default;
+$ddl-list-header-font-size: $text-xs !default;
+$ddl-small-list-nodata-font-size: $text-xs !default;
+$ddl-bigger-list-nodata-font-size: $text-base !default;
+$ddl-bigger-small-list-nodata-font-size: $text-sm !default;
+
+// Small Size
+
+$ddl-small-icon-font-size: $font-icon-14 !default;
+$ddl-small-line-height: 28px !default;
+$ddl-small-list-text-indent: 8px !default;
+$ddl-small-list-header-font-size: $text-xxs !default;
+
+// Touch Small
+
+$ddl-bigger-small-icon-font-size: $font-icon-18 !default;
+$ddl-bigger-small-line-height: 36px !default;
+$ddl-bigger-small-list-text-indent: 14px !default;
+$ddl-bigger-small-list-header-font-size: $text-xs !default;
+
+$ddl-list-border-color: $border-light !default;
+$ddl-list-gradient-color: $border-light !default;
+$mention-gradient-color: $white !default;
+$mention-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
+$mention-chip-bg-color: $content-bg-color-alt2 !default;
+$mention-chip-border-radius: 2px !default;
+$mention-chip-border: none !default;
+$ddl-list-bg-color: $flyout-bg-color !default;
+$ddl-list-header-bg-color: $content-bg-color-focus !default;
+$ddl-list-tap-color: transparent !default;
+$ddl-list-header-border-color: $border-light !default;
+$ddl-nodata-font-color: $content-text-color !default;
+$ddl-list-default-font-color: $content-text-color !default;
+$ddl-list-active-border-color: $content-bg-color !default;
+$mention-popup-bg-color: $content-bg-color !default;
+$ddl-list-active-font-color: $content-text-color-selected !default;
+$mention-active-font-color: $primary !default;
+$ddl-list-active-bg-color: $content-bg-color-selected !default;
+$ddl-list-hover-border-color: $content-bg-color !default;
+$ddl-list-hover-bg-color: $content-bg-color-hover !default;
+$ddl-list-hover-font-color: $content-text-color-hover !default;
+$ddl-list-header-font-color: $content-text-color-alt2 !default;
+$ddl-default-header-font-color: $content-text-color !default;
+$ddl-list-focus-color: $content-bg-color-focus !default;
+$ddl-multi-column-border-color: $border-light !default;
+$ddl-list-icon-color: $icon-color !default;
+
+// Small Size color
+$ddl-small-list-font-color: $content-text-color !default;
+
+// Touch Small color
+$ddl-bigger-small-list-font-color: $content-text-color !default;
+$ddl-group-list-item-text-intent: 0 !default;
+
+@include export-module('dropdownbase-bds') {
+  .e-dropdownbase .e-list-item.e-active,
+  .e-dropdownbase .e-list-item.e-active.e-hover {
+    font-weight: $font-weight-medium;
+  }
+
+  .e-dropdownbase .e-list-group-item,
+  .e-fixed-head {
+    font-size: $text-xs;
+    text-transform: uppercase;
+  }
+
+  .e-small .e-dropdownbase .e-list-group-item,
+  .e-small .e-fixed-head,
+  .e-small.e-dropdownbase .e-list-group-item,
+  .e-small.e-fixed-head {
+    font-size: $text-xxs;
+  }
+
+  .e-bigger .e-dropdownbase .e-list-group-item,
+  .e-bigger .e-fixed-head,
+  .e-bigger.e-dropdownbase .e-list-group-item,
+  .e-bigger.e-fixed-head {
+    font-size: $text-sm;
+  }
+
+  .e-bigger.e-small .e-dropdownbase .e-list-group-item,
+  .e-bigger.e-small .e-fixed-head,
+  .e-bigger.e-small.e-dropdownbase .e-list-group-item,
+  .e-bigger.e-small.e-fixed-head {
+    font-size: $text-xs;
+  }
+
+  .e-dropdownbase .e-list-item .e-list-icon {
+    padding: 0 8px 0 0;
+  }
+
+  .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
+    padding: 0 12px 0 0;
+  }
+
+  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
+    padding: 0 8px 0 0;
+  }
+
+  .e-small .e-dropdownbase .e-list-item .e-list-icon {
+    padding: 0 4px 0 0;
+  }
+
+  /* stylelint-disable */
+  .e-dropdownbase .e-list-item {
+    border-radius: 6px !important;
+  }
+}

package/styles/drop-down-base/_layout.scss

@@ -57,9 +57,6 @@
       #{if(&, '&', '*')} .e-fixed-head {
         position: absolute;
         top: 0;
-        .e-rtl #{if(&, '&', '*')} {
-          left: 33px;
-        }
       }
     }
   }
@@ -104,11 +101,6 @@
     cursor: default;
   }
 
-  .e-mention .e-mention-chip::selection {
-    color: $mention-gradient-color;
-    background: $mention-active-font-color;
-  }
-
   .e-mention.e-editable-element {
     border: 2px solid $ddl-list-border-color;
     height: auto;

package/styles/drop-down-base/bootstrap-dark.css

@@ -68,9 +68,6 @@
   position: absolute;
   top: 0;
 }
-.e-rtl .e-dropdownbase .e-fixed-head {
-  left: 33px;
-}
 
 .e-dropdownbase.e-content {
   overflow: auto;
@@ -110,11 +107,6 @@
   cursor: default;
 }
 
-.e-mention .e-mention-chip::selection {
-  color: #fff;
-  background: #0070f0;
-}
-
 .e-mention.e-editable-element {
   border: 2px solid #414141;
   height: auto;