@syncfusion/ej2-layouts 22.1.34 → 22.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.1.34
+*  version : 22.1.37
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-layouts@*",
-  "_id": "@syncfusion/ej2-layouts@21.3.0",
+  "_id": "@syncfusion/ej2-layouts@22.1.36",
   "_inBundle": false,
-  "_integrity": "sha512-NP9S9pT9bVCmEjESnp2DUWNNlPtSr3cdGDpLiDtD1MnJ2zSMjWDX9rh41uV29hhA4xObAGw28En+sCJbnDGohA==",
+  "_integrity": "sha512-vlw2CzId0ZKom9vBs3nYZQ+urOdpSCxtO8X9OsaUqPtWLhFzLnOX41koFE7d7fq/KZMWDZ5Ms+BL0AXk5XYLqw==",
   "_location": "/@syncfusion/ej2-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -27,8 +27,8 @@
     "/@syncfusion/ej2-react-layouts",
     "/@syncfusion/ej2-vue-layouts"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-layouts/-/ej2-layouts-21.3.0.tgz",
-  "_shasum": "29a4e9548f8ead95b7500bbfb035bea56f51264a",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-22.1.36.tgz",
+  "_shasum": "241226a09158f0c2e2d740bd30ac8a55f6739540",
   "_spec": "@syncfusion/ej2-layouts@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -76,7 +76,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/layouts"
   },
   "typings": "index.d.ts",
-  "version": "22.1.34",
+  "version": "22.1.37",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/dashboard-layout/dashboard-layout.js

@@ -460,6 +460,7 @@ var DashboardLayout = /** @class */ (function (_super) {
         // eslint-disable-next-line
         var panelProp = new Panel(this, 'panels', model, true);
         this.panels.push(panelProp);
+        this.oldRowCol[model.id] = { row: model.row, col: model.col };
     };
     DashboardLayout.prototype.resizeEvents = function () {
         if (this.allowResizing) {

package/src/splitter/splitter.js

@@ -162,7 +162,8 @@ var Splitter = /** @class */ (function (_super) {
                     if (!(newProp.paneSettings instanceof Array && oldProp.paneSettings instanceof Array)) {
                         var paneCounts = Object.keys(newProp.paneSettings);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        if (this.isReact) {
+                        var isPaneContentChanged = paneCounts.some(function (count) { return !isNullOrUndefined(newProp.paneSettings[count].content); });
+                        if (this.isReact && isPaneContentChanged) {
                             var cPaneCount = 0;
                             for (var k = 0; k < this.paneSettings.length; k++) {
                                 if (typeof (this.paneSettings[k].content) === 'function') {
@@ -974,7 +975,7 @@ var Splitter = /** @class */ (function (_super) {
             /* istanbul ignore next */
             hoverTimeOut = setTimeout(function () {
                 addClass([separator], [SPLIT_BAR_HOVER]);
-            }, _this.iconsDelay);
+            });
         });
     };
     Splitter.prototype.getEventType = function (e) {
@@ -1095,10 +1096,12 @@ var Splitter = /** @class */ (function (_super) {
                             this.allPanes[i].offsetWidth : this.allPanes[i].offsetHeight);
                         var isPercent = updatePane.style.flexBasis.indexOf('%') > -1;
                         var updatePaneOffset = this.orientation === 'Horizontal' ? updatePane.offsetWidth : updatePane.offsetHeight;
-                        updatePane.style.flexBasis = isPercent ? this.convertPixelToPercentage(updatePaneOffset + sizeDiff) + '%'
-                            : (updatePaneOffset + sizeDiff) + 'px';
+                        if (!isNullOrUndefined(updatePane) && updatePane.style.flexBasis !== '' && updatePane.classList.contains(STATIC_PANE)) {
+                            updatePane.style.flexBasis = isPercent ? this.convertPixelToPercentage(updatePaneOffset + sizeDiff) + '%'
+                                : (updatePaneOffset + sizeDiff) + 'px';
+                        }
                         var flexPaneOffset = this.orientation === 'Horizontal' ? flexPane.offsetWidth : flexPane.offsetHeight;
-                        if (flexPane.style.flexBasis !== '') {
+                        if (!isNullOrUndefined(flexPane) && flexPane.style.flexBasis !== '' && !flexPane.classList.contains(STATIC_PANE)) {
                             flexPane.style.flexBasis = flexPane.style.flexBasis.indexOf('%') > -1 ?
                                 this.convertPixelToPercentage(flexPaneOffset - sizeDiff) + '%' : (flexPaneOffset - sizeDiff) + 'px';
                         }
@@ -1732,7 +1735,7 @@ var Splitter = /** @class */ (function (_super) {
     };
     Splitter.prototype.checkCoordinates = function (pageX, pageY) {
         var coordinatesChanged = true;
-        if ((pageX === this.previousCoordinates.x || pageY === this.previousCoordinates.y)) {
+        if ((pageX === this.previousCoordinates.x && pageY === this.previousCoordinates.y)) {
             coordinatesChanged = false;
         }
         return coordinatesChanged;
@@ -1812,7 +1815,7 @@ var Splitter = /** @class */ (function (_super) {
             if (this.paneSettings[i].size === '') {
                 flexPaneCount = flexPaneCount + 1;
             }
-            else if ((!this.isReact) && this.allPanes[i].style.flexBasis !== '') {
+            else if (this.allPanes[i].style.flexBasis !== '') {
                 this.paneSettings[i].size = this.allPanes[i].style.flexBasis;
             }
         }

package/styles/bootstrap-dark.css

@@ -930,6 +930,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #1a1a1a;
   color: #f0f0f0;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -991,6 +992,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #1a1a1a;
   color: #f0f0f0;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0070f0;

package/styles/bootstrap.css

@@ -931,6 +931,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: #333;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -992,6 +993,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: #333;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #317ab9;

package/styles/bootstrap4.css

@@ -936,6 +936,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: #495057;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -997,6 +998,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: #495057;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #007bff;

package/styles/bootstrap5-dark.css

@@ -938,6 +938,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #212529;
   color: #adb5bd;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -999,6 +1000,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #212529;
   color: #adb5bd;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0d6efd;

package/styles/bootstrap5.css

@@ -938,6 +938,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: #6c757d;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -999,6 +1000,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: #6c757d;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0d6efd;

package/styles/fabric-dark.css

@@ -930,6 +930,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #201f1f;
   color: #dadada;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -991,6 +992,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #201f1f;
   color: #dadada;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #38a9ff;

package/styles/fabric.css

@@ -941,6 +941,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: #333;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -1002,6 +1003,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: #333;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0078d6;

package/styles/fluent-dark.css

@@ -957,6 +957,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #1b1a19;
   color: #a19f9d;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -1018,6 +1019,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #1b1a19;
   color: #a19f9d;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0078d4;

package/styles/fluent.css

@@ -957,6 +957,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: #605e5c;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -1018,6 +1019,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: #605e5c;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0078d4;

package/styles/highcontrast-light.css

@@ -930,6 +930,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: #000;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -991,6 +992,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: #000;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #400074;

package/styles/highcontrast.css

@@ -942,6 +942,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #000;
   color: #fff;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -1003,6 +1004,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #000;
   color: #fff;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #ffd939;

package/styles/material-dark.css

@@ -930,6 +930,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #303030;
   color: rgba(255, 255, 255, 0.7);
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -991,6 +992,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #303030;
   color: rgba(255, 255, 255, 0.7);
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #00b0ff;

package/styles/material.css

@@ -931,6 +931,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: rgba(0, 0, 0, 0.54);
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -992,6 +993,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: rgba(0, 0, 0, 0.54);
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #e3165b;

package/styles/material3-dark.css

@@ -990,6 +990,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface-variant));
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -1051,6 +1052,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface-variant));
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: rgba(var(--color-sf-primary));

package/styles/material3.css

@@ -1046,6 +1046,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface-variant));
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -1107,6 +1108,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface-variant));
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: rgba(var(--color-sf-primary));

package/styles/splitter/_theme.scss

@@ -29,6 +29,7 @@
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 10;
         }
 
         .e-navigate-arrow:not(.e-icon-hidden) {
@@ -115,6 +116,7 @@
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 12;
         }
 
         &.e-split-bar-hover,

package/styles/splitter/bootstrap-dark.css

@@ -370,6 +370,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #1a1a1a;
   color: #f0f0f0;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -431,6 +432,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #1a1a1a;
   color: #f0f0f0;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0070f0;

package/styles/splitter/bootstrap.css

@@ -370,6 +370,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: #333;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -431,6 +432,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: #333;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #317ab9;

package/styles/splitter/bootstrap4.css

@@ -369,6 +369,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: #495057;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -430,6 +431,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: #495057;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #007bff;

package/styles/splitter/bootstrap5-dark.css

@@ -363,6 +363,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #212529;
   color: #adb5bd;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -424,6 +425,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #212529;
   color: #adb5bd;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0d6efd;

package/styles/splitter/bootstrap5.css

@@ -363,6 +363,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: #6c757d;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -424,6 +425,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: #6c757d;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0d6efd;

package/styles/splitter/fabric-dark.css

@@ -370,6 +370,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #201f1f;
   color: #dadada;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -431,6 +432,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #201f1f;
   color: #dadada;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #38a9ff;

package/styles/splitter/fabric.css

@@ -370,6 +370,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: #333;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -431,6 +432,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: #333;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0078d6;

package/styles/splitter/fluent-dark.css

@@ -363,6 +363,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #1b1a19;
   color: #a19f9d;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -424,6 +425,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #1b1a19;
   color: #a19f9d;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0078d4;

package/styles/splitter/fluent.css

@@ -363,6 +363,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: #605e5c;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -424,6 +425,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: #605e5c;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0078d4;

package/styles/splitter/highcontrast-light.css

@@ -370,6 +370,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: #000;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -431,6 +432,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: #000;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #400074;

package/styles/splitter/highcontrast.css

@@ -370,6 +370,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #000;
   color: #fff;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -431,6 +432,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #000;
   color: #fff;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #ffd939;

package/styles/splitter/material-dark.css

@@ -370,6 +370,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #303030;
   color: rgba(255, 255, 255, 0.7);
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -431,6 +432,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #303030;
   color: rgba(255, 255, 255, 0.7);
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #00b0ff;

package/styles/splitter/material.css

@@ -371,6 +371,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: rgba(0, 0, 0, 0.54);
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -432,6 +433,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: rgba(0, 0, 0, 0.54);
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #e3165b;

package/styles/splitter/material3-dark.css

@@ -419,6 +419,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface-variant));
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -480,6 +481,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface-variant));
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: rgba(var(--color-sf-primary));

package/styles/splitter/material3.css

@@ -475,6 +475,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface-variant));
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -536,6 +537,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface-variant));
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: rgba(var(--color-sf-primary));

package/styles/splitter/tailwind-dark.css

@@ -364,6 +364,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #1f2937;
   color: #d1d5db;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -425,6 +426,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #1f2937;
   color: #d1d5db;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #22d3ee;

package/styles/splitter/tailwind.css

@@ -364,6 +364,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
   background: #fff;
   color: #6b7280;
+  z-index: 10;
 }
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
   background-color: transparent;
@@ -425,6 +426,7 @@
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
   background: #fff;
   color: #6b7280;
+  z-index: 12;
 }
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #4f46e5;