@syncfusion/ej2-navigations 26.1.40 → 26.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.1.40
+*  version : 26.2.4
 *  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-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@26.1.39",
+  "_id": "@syncfusion/ej2-navigations@26.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-nx8+3jGZTNQzQ7xIiwKyB2wum+nmP+eQF+ljJ/+vvhn54c2b3WkGTcANpvKFQ2NluOytjU894S7QBFx4fXeV4Q==",
+  "_integrity": "sha512-4qEwEcykQV3bXbXSRVKb1Ed9XtXrOkoL3pmgz0Ytsn7lsOggS3ek/R0JiybJWZPtNXOcMY5tXl+EiWpccxEs2w==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -39,8 +39,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-26.1.39.tgz",
-  "_shasum": "60cc3aeedd220788eee7250f705c8c5fa2c0f34f",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-26.1.41.tgz",
+  "_shasum": "1af29a3e99fc8304789d0a7b6f3720afd63f5883",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -51,12 +51,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.1.37",
-    "@syncfusion/ej2-buttons": "~26.1.40",
-    "@syncfusion/ej2-data": "~26.1.40",
-    "@syncfusion/ej2-inputs": "~26.1.40",
-    "@syncfusion/ej2-lists": "~26.1.35",
-    "@syncfusion/ej2-popups": "~26.1.38"
+    "@syncfusion/ej2-base": "~26.2.4",
+    "@syncfusion/ej2-buttons": "~26.2.4",
+    "@syncfusion/ej2-data": "~26.2.4",
+    "@syncfusion/ej2-inputs": "~26.2.4",
+    "@syncfusion/ej2-lists": "~26.2.4",
+    "@syncfusion/ej2-popups": "~26.2.4"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
@@ -161,6 +161,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "26.1.40",
+  "version": "26.2.4",
   "sideEffects": false
 }

package/src/stepper/stepper.d.ts

@@ -291,6 +291,7 @@ export declare class Stepper extends StepperBase implements INotifyPropertyChang
     private updateAnimation;
     private updateStepType;
     private wireEvents;
+    private unWireEvents;
     private updateStepFocus;
     private updateStepperStatus;
     private updateStatusClass;
@@ -323,10 +324,36 @@ export declare class Stepper extends StepperBase implements INotifyPropertyChang
     private navigationHandler;
     private updateStepInteractions;
     private removeItemElements;
+    /**
+     * Move to next step from current step in Stepper.
+     *
+     * @returns {void}
+     */
     nextStep(): void;
+    /**
+     * Move to previous step from current step in Stepper.
+     *
+     * @returns {void}
+     */
     previousStep(): void;
+    /**
+     * Reset the state of the Stepper and move to the first step.
+     *
+     * @returns {void}
+     */
     reset(): void;
+    /**
+     * Refreshes the position of the progress bar programmatically when the dimensions of the parent container are changed.
+     *
+     * @returns {void}
+     */
+    refreshProgressbar(): void;
     private updateElementClassArray;
+    /**
+     * Destroy the stepper control.
+     *
+     * @returns {void}
+     */
     destroy(): void;
     private wireKeyboardEvent;
     private keyActionHandler;

package/src/stepper/stepper.js

@@ -258,9 +258,19 @@ var Stepper = /** @class */ (function (_super) {
             if (_this.stepperItemList && _this.progressbar && _this.element.classList.contains(HORIZSTEP)) {
                 _this.setProgressPosition(_this.element, true);
             }
+            _this.navigateToStep(_this.activeStep, null, null, false);
         }, this);
         EventHandler.add(window, 'click', function () { _this.updateStepFocus(); }, this);
     };
+    Stepper.prototype.unWireEvents = function () {
+        var _this = this;
+        EventHandler.remove(window, 'resize', function () {
+            if (_this.stepperItemList && _this.progressbar && _this.element.classList.contains(HORIZSTEP)) {
+                _this.setProgressPosition(_this.element, true);
+            }
+        });
+        EventHandler.remove(window, 'click', function () { _this.updateStepFocus(); });
+    };
     Stepper.prototype.updateStepFocus = function () {
         if (this.isKeyNavFocus) {
             this.isKeyNavFocus = false;
@@ -924,16 +934,31 @@ var Stepper = /** @class */ (function (_super) {
         }
         this.stepperItemElements = [];
     };
+    /**
+     * Move to next step from current step in Stepper.
+     *
+     * @returns {void}
+     */
     Stepper.prototype.nextStep = function () {
         if (this.activeStep !== this.steps.length - 1) {
             this.navigateToStep(this.activeStep + 1, null, null, false);
         }
     };
+    /**
+     * Move to previous step from current step in Stepper.
+     *
+     * @returns {void}
+     */
     Stepper.prototype.previousStep = function () {
         if (this.activeStep > 0) {
             this.navigateToStep(this.activeStep - 1, null, null, false);
         }
     };
+    /**
+     * Reset the state of the Stepper and move to the first step.
+     *
+     * @returns {void}
+     */
     Stepper.prototype.reset = function () {
         if (this.activeStep === 0) {
             this.updateStepInteractions();
@@ -943,18 +968,30 @@ var Stepper = /** @class */ (function (_super) {
             this.navigateToStep(isDisabled ? -1 : 0, null, null, false);
         }
     };
+    /**
+     * Refreshes the position of the progress bar programmatically when the dimensions of the parent container are changed.
+     *
+     * @returns {void}
+     */
+    Stepper.prototype.refreshProgressbar = function () {
+        if (this.stepperItemList && this.progressbar) {
+            this.setProgressPosition(this.element);
+        }
+        this.navigateToStep(this.activeStep, null, null, false);
+    };
     Stepper.prototype.updateElementClassArray = function () {
         var classArray = [RTL, READONLY, 'e-steps-focus', LABELAFTER, LABELBEFORE, 'e-label-top',
             'e-label-bottom', 'e-label-start', 'e-label-end', STEPINDICATOR, LABELINDICATOR, VERTICALSTEP, HORIZSTEP, LINEARSTEP];
         removeClass([this.element], classArray);
     };
+    /**
+     * Destroy the stepper control.
+     *
+     * @returns {void}
+     */
     Stepper.prototype.destroy = function () {
-        var _this = this;
         _super.prototype.destroy.call(this);
-        EventHandler.remove(window, 'resize', function () { if (_this.stepperItemList && _this.progressbar) {
-            _this.setProgressPosition(_this.element, true);
-        } });
-        EventHandler.remove(window, 'click', function () { _this.updateStepFocus(); });
+        this.unWireEvents();
         // unwires the events and detach the li elements
         this.removeItemElements();
         this.clearTemplate();

package/src/toolbar/toolbar.d.ts

@@ -253,6 +253,8 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     private isVertical;
     private tempId;
     private isExtendedOpen;
+    private clickEvent;
+    private scrollEvent;
     private resizeContext;
     private orientationChangeContext;
     /**

package/src/toolbar/toolbar.js

@@ -295,8 +295,10 @@ var Toolbar = /** @class */ (function (_super) {
         this.unwireKeyboardEvent();
         window.removeEventListener('resize', this.resizeContext);
         window.removeEventListener('orientationchange', this.orientationChangeContext);
-        EventHandler.remove(document, 'scroll', this.docEvent);
-        EventHandler.remove(document, 'click', this.docEvent);
+        document.removeEventListener('scroll', this.clickEvent);
+        document.removeEventListener('click', this.scrollEvent);
+        this.scrollEvent = null;
+        this.clickEvent = null;
     };
     Toolbar.prototype.clearProperty = function () {
         this.tbarEle = [];
@@ -695,6 +697,8 @@ var Toolbar = /** @class */ (function (_super) {
         this.initialize();
         this.renderControl();
         this.wireEvents();
+        this.clickEvent = this.docEvent.bind(this);
+        this.scrollEvent = this.docEvent.bind(this);
         this.renderComplete();
         if (this.isReact && this.portals && this.portals.length > 0) {
             this.renderReactTemplates(function () {
@@ -1080,8 +1084,8 @@ var Toolbar = /** @class */ (function (_super) {
                 popup.offsetX = 0;
             }
             popup.appendTo(ele);
-            EventHandler.add(document, 'scroll', this.docEvent.bind(this));
-            EventHandler.add(document, 'click ', this.docEvent.bind(this));
+            document.addEventListener('scroll', this.clickEvent);
+            document.addEventListener('click', this.scrollEvent);
             if (this.overflowMode !== 'Extended') {
                 popup.element.style.maxHeight = popup.element.offsetHeight + 'px';
             }

package/src/treeview/treeview.d.ts

@@ -546,6 +546,8 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private isRightClick;
     private mouseDownStatus;
     private isDropIn;
+    private DDTTreeData;
+    private OldCheckedData;
     /**
      * Indicates whether the TreeView allows drag and drop of nodes. To drag and drop a node in
      * desktop, hold the mouse on the node, drag it to the target node and drop the node by releasing
@@ -1105,6 +1107,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private selectGivenNodes;
     private clickHandler;
     private nodeCheckedEvent;
+    private updateOldCheckedData;
     private triggerClickEvent;
     private expandNode;
     private expandedNode;

package/src/treeview/treeview.js

@@ -219,6 +219,7 @@ var TreeView = /** @class */ (function (_super) {
         _this.isRightClick = false;
         _this.mouseDownStatus = false;
         _this.isDropIn = false;
+        _this.OldCheckedData = [];
         return _this;
     }
     TreeView_1 = TreeView;
@@ -292,6 +293,7 @@ var TreeView = /** @class */ (function (_super) {
         this.expandChildren = [];
         this.index = 0;
         this.setTouchClass();
+        this.DDTTreeData = JSON.parse(JSON.stringify(this.fields.dataSource));
         if (isNOU(this.selectedNodes)) {
             this.setProperties({ selectedNodes: [] }, true);
         }
@@ -670,23 +672,38 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.updateParentCheckState = function () {
         var indeterminate = selectAll('.' + INDETERMINATE, this.element);
         var childCheckedElement;
+        var data = this.treeData;
+        if (this.element.classList.contains('e-filtering')) {
+            data = this.DDTTreeData;
+        }
         for (var i = 0; i < indeterminate.length; i++) {
             var node = closest(indeterminate[parseInt(i.toString(), 10)], '.' + LISTITEM);
             var nodeId = node.getAttribute('data-uid').toString();
+            var OldCheckedNodes = void 0;
+            if (this.element.classList.contains('e-filtering')) {
+                OldCheckedNodes = new DataManager(this.OldCheckedData).executeLocal(new Query().where('parentID', 'equal', nodeId, true));
+            }
             if (this.dataType === 1) {
-                childCheckedElement = new DataManager(this.treeData).
+                childCheckedElement = new DataManager(data).
                     executeLocal(new Query().where(this.fields.parentID, 'equal', nodeId, true));
             }
             else {
-                childCheckedElement = this.getChildNodes(this.treeData, nodeId);
+                childCheckedElement = this.getChildNodes(data, nodeId);
             }
             var count = 0;
             if (childCheckedElement) {
-                for (var j = 0; j < childCheckedElement.length; j++) {
-                    var childId = childCheckedElement[parseInt(j.toString(), 10)][this.fields.id].toString();
-                    if (this.checkedNodes.indexOf(childId) !== -1) {
+                var _loop_1 = function (j) {
+                    var childId = childCheckedElement[parseInt(j.toString(), 10)][this_1.fields.id].toString();
+                    if (this_1.checkedNodes.indexOf(childId) !== -1) {
+                        count++;
+                    }
+                    else if (this_1.element.classList.contains('e-filtering') && OldCheckedNodes.findIndex(function (e) { return e['id'] === childId; }) !== -1) {
                         count++;
                     }
+                };
+                var this_1 = this;
+                for (var j = 0; j < childCheckedElement.length; j++) {
+                    _loop_1(j);
                 }
                 if (count === childCheckedElement.length) {
                     var nodeCheck = node.getAttribute('data-uid');
@@ -966,13 +983,28 @@ var TreeView = /** @class */ (function (_super) {
             var indeterminateNodes = selectAll('.' + INDETERMINATE, ulElement);
             var nodes = selectAll('.' + LISTITEM, ulElement);
             var checkBoxEle = element.getElementsByClassName(CHECKBOXWRAP)[0];
-            if (nodes.length === checkedNodes.length) {
+            var count = nodes.length;
+            var checkedCount = checkedNodes.length;
+            var dataUid = element.getAttribute('data-uid');
+            if (this.element.classList.contains('e-filtering')) {
+                var oldCheckedNodes = new DataManager(this.OldCheckedData).executeLocal(new Query().where('parentID', 'equal', dataUid, true));
+                checkedCount = oldCheckedNodes.length;
+                var childItems = [];
+                if (this.dataType === 1) {
+                    childItems = new DataManager(this.DDTTreeData).executeLocal(new Query().where(this.fields.parentID, 'equal', dataUid, true));
+                }
+                else {
+                    childItems = this.getChildNodes(this.DDTTreeData, dataUid);
+                }
+                count = childItems.length;
+            }
+            if (count === checkedCount) {
                 this.changeState(checkBoxEle, 'check', null, true, true);
             }
-            else if (checkedNodes.length > 0 || indeterminateNodes.length > 0) {
+            else if (checkedCount > 0 || indeterminateNodes.length > 0) {
                 this.changeState(checkBoxEle, 'indeterminate', null, true, true);
             }
-            else if (checkedNodes.length === 0) {
+            else if (checkedCount === 0) {
                 this.changeState(checkBoxEle, 'uncheck', null, true, true);
             }
             var parentUL = closest(element, '.' + PARENTITEM);
@@ -1044,11 +1076,11 @@ var TreeView = /** @class */ (function (_super) {
     };
     TreeView.prototype.doCheckBoxAction = function (nodes, doCheck) {
         if (!isNOU(nodes)) {
+            nodes.reverse();
             for (var len = nodes.length - 1; len >= 0; len--) {
                 var liEle = this.getElement(nodes[parseInt(len.toString(), 10)]);
                 if (isNOU(liEle)) {
-                    var node = nodes[len - (nodes.length - 1)]
-                        ? nodes[len - (nodes.length - 1)].toString()
+                    var node = nodes[len - nodes.length] ? nodes[len - nodes.length].toString()
                         : nodes[parseInt(len.toString(), 10)]
                             ? nodes[parseInt(len.toString(), 10)].toString()
                             : null;
@@ -1608,6 +1640,25 @@ var TreeView = /** @class */ (function (_super) {
         eventArgs.data = eventArgs.data.splice(0, eventArgs.data.length - 1);
         this.trigger('nodeChecked', eventArgs);
     };
+    TreeView.prototype.updateOldCheckedData = function (data) {
+        var dataManager = new DataManager(data);
+        var childItems = dataManager.executeLocal(new Query().where('isChecked', 'equal', 'true', true));
+        var uncheckedItems = dataManager.executeLocal(new Query().where('isChecked', 'equal', 'false', true));
+        if (uncheckedItems.length > 0) {
+            var index = this.OldCheckedData.findIndex(function (e) { return e['id'] === uncheckedItems[0]['id']; });
+            if (index !== -1) {
+                this.OldCheckedData.splice(index, 1);
+                return;
+            }
+        }
+        if (childItems.length > 0) {
+            var index = this.OldCheckedData.findIndex(function (e) { return e['id'] === childItems[0]['id']; });
+            if (index === -1) {
+                this.OldCheckedData.push(childItems[0]);
+                return;
+            }
+        }
+    };
     TreeView.prototype.triggerClickEvent = function (e, li) {
         var eventArgs = {
             event: e,
@@ -2461,6 +2512,7 @@ var TreeView = /** @class */ (function (_super) {
         this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true);
         if (this.autoCheck) {
             this.ensureChildCheckState(li);
+            this.updateOldCheckedData([this.getNodeData(li)]);
             this.ensureParentCheckState(closest(closest(li, '.' + PARENTITEM), '.' + LISTITEM));
             var doCheck = void 0;
             if (eventArgs.action === 'check') {
@@ -4259,7 +4311,7 @@ var TreeView = /** @class */ (function (_super) {
         }
         for (var i = 0, objlen = obj.length; i < objlen; i++) {
             var nodeId = getValue(mapper.id, obj[parseInt(i.toString(), 10)]);
-            if (obj[parseInt(i.toString(), 10)] && nodeId && nodeId.toString() === id) {
+            if (obj[parseInt(i.toString(), 10)] && !isNOU(nodeId) && nodeId.toString() === id) {
                 if (remove) {
                     removedData = obj.splice(i, 1);
                 }
@@ -4836,6 +4888,9 @@ var TreeView = /** @class */ (function (_super) {
                     this.initialRender = true;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     if (!this.isReact || this.isReact && !(this.fields.dataSource instanceof DataManager)) {
+                        if (!this.element.classList.contains('e-filtering')) {
+                            this.DDTTreeData = JSON.parse(JSON.stringify(this.fields.dataSource));
+                        }
                         this.reRenderNodes();
                     }
                     this.initialRender = false;

package/styles/accordion/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/appbar/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

@@ -7823,7 +7823,8 @@
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e230";
 }
 .e-treeview .e-sibling::before {

package/styles/bootstrap.css

@@ -7826,7 +7826,8 @@
 /*! TreeView's bootstrap theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e230";
 }
 .e-treeview .e-sibling::before {

package/styles/bootstrap4.css

@@ -7825,7 +7825,8 @@
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e70b";
 }
 .e-treeview .e-sibling::before {

package/styles/bootstrap5-dark.css

@@ -7863,7 +7863,8 @@
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e75c";
 }
 .e-treeview .e-sibling::before {

package/styles/bootstrap5.css

@@ -7863,7 +7863,8 @@
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e75c";
 }
 .e-treeview .e-sibling::before {

package/styles/breadcrumb/_layout.scss

@@ -170,9 +170,11 @@
         &:focus-visible {
           @if $skin-name == 'fluent2' {
             box-shadow: $secondary-shadow-focus;
+            color: $breadcrumb-item-color !important; /* stylelint-disable-line declaration-no-important */
 
-            & .e-breadcrumb-icon {
-              color: $icon-color;
+            & .e-breadcrumb-icon,
+            &.e-breadcrumb-url .e-breadcrumb-icon {
+              color: $icon-color !important; /* stylelint-disable-line declaration-no-important */
             }
           }
         }

package/styles/breadcrumb/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);
@@ -1151,9 +1151,10 @@
 .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus-visible {
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
           box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
+  color: var(--color-sf-content-text-color-alt1) !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus-visible .e-breadcrumb-icon {
-  color: var(--color-sf-icon-color);
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus-visible .e-breadcrumb-icon, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus-visible.e-breadcrumb-url .e-breadcrumb-icon {
+  color: var(--color-sf-icon-color) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-breadcrumb .e-breadcrumb-item span.e-breadcrumb-text {
   cursor: default;