dockview-react 1.15.2 → 1.16.0

package/dist/styles/dockview.css

@@ -1,16 +1,3 @@
-.dv-render-overlay {
-  position: absolute;
-  z-index: 1;
-  height: 100%;
-}
-.dv-render-overlay.dv-render-overlay-float {
-  z-index: 999;
-}
-
-.dv-debug .dv-render-overlay {
-  outline: 1px solid red;
-  outline-offset: -1;
-}
 .dockview-svg {
   display: inline-block;
   fill: currentcolor;
@@ -257,7 +244,7 @@
 .dockview-theme-replit .groupview.inactive-group {
   border: 1px solid transparent;
 }
-.dockview-theme-replit .vertical > .sash-container > .sash::after {
+.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled)::after {
   content: "";
   height: 4px;
   width: 40px;
@@ -268,10 +255,10 @@
   background-color: var(--dv-separator-handle-background-color);
   position: absolute;
 }
-.dockview-theme-replit .vertical > .sash-container > .sash:hover::after {
+.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled):hover::after {
   background-color: var(--dv-separator-handle-hover-background-color);
 }
-.dockview-theme-replit .horizontal > .sash-container > .sash::after {
+.dockview-theme-replit .horizontal > .sash-container > .sash:not(.disabled)::after {
   content: "";
   height: 40px;
   width: 4px;
@@ -282,7 +269,7 @@
   background-color: var(--dv-separator-handle-background-color);
   position: absolute;
 }
-.dockview-theme-replit .horizontal > .sash-container > .sash:hover::after {
+.dockview-theme-replit .horizontal > .sash-container > .sash:not(.disabled):hover::after {
   background-color: var(--dv-separator-handle-hover-background-color);
 }
 .drop-target {
@@ -319,6 +306,74 @@
 .drop-target > .drop-target-dropzone > .drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {
   border-right: 1px solid var(--dv-drag-over-border-color);
 }
+.dv-dockview {
+  position: relative;
+  background-color: var(--dv-group-view-background-color);
+}
+.dv-dockview .dv-watermark-container {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+}
+.dv-dockview .dv-overlay-render-container {
+  position: relative;
+}
+
+.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
+  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
+  color: var(--dv-activegroup-visiblepanel-tab-color);
+}
+.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
+  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
+  color: var(--dv-activegroup-hiddenpanel-tab-color);
+}
+.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
+  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
+  color: var(--dv-inactivegroup-visiblepanel-tab-color);
+}
+.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
+  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
+  color: var(--dv-inactivegroup-hiddenpanel-tab-color);
+}
+
+/**
+ * when a tab is dragged we lose the above stylings because they are conditional on parent elements
+ * therefore we also set some stylings for the dragging event
+ **/
+.tab.dv-tab-dragging {
+  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
+  color: var(--dv-activegroup-visiblepanel-tab-color);
+}
+.groupview {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--dv-group-view-background-color);
+  overflow: hidden;
+}
+.groupview:focus {
+  outline: none;
+}
+.groupview.empty > .tabs-and-actions-container {
+  display: none;
+}
+.groupview > .content-container {
+  flex-grow: 1;
+  min-height: 0;
+  outline: none;
+}
+.dv-root-wrapper {
+  height: 100%;
+  width: 100%;
+}
+.grid-view,
+.branch-node {
+  height: 100%;
+  width: 100%;
+}
 .dv-debug .dv-resize-container .dv-resize-handle-top {
   background-color: red;
 }
@@ -344,9 +399,6 @@
   border: 1px solid var(--dv-tab-divider-color);
   box-shadow: var(--dv-floating-box-shadow);
 }
-.dv-resize-container.dv-bring-to-front {
-  z-index: 998;
-}
 .dv-resize-container.dv-resize-container-dragging {
   opacity: 0.5;
 }
@@ -422,73 +474,17 @@
   position: absolute;
   cursor: se-resize;
 }
-.dv-dockview {
-  position: relative;
-  background-color: var(--dv-group-view-background-color);
-}
-.dv-dockview .dv-watermark-container {
+.dv-render-overlay {
   position: absolute;
-  top: 0px;
-  left: 0px;
-  height: 100%;
-  width: 100%;
   z-index: 1;
-}
-.dv-dockview .dv-overlay-render-container {
-  position: relative;
-}
-
-.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
-  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
-  color: var(--dv-activegroup-visiblepanel-tab-color);
-}
-.groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
-  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
-  color: var(--dv-activegroup-hiddenpanel-tab-color);
-}
-.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
-  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
-  color: var(--dv-inactivegroup-visiblepanel-tab-color);
-}
-.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab {
-  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
-  color: var(--dv-inactivegroup-hiddenpanel-tab-color);
-}
-
-/**
- * when a tab is dragged we lose the above stylings because they are conditional on parent elements
- * therefore we also set some stylings for the dragging event
- **/
-.tab.dv-tab-dragging {
-  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
-  color: var(--dv-activegroup-visiblepanel-tab-color);
-}
-.groupview {
-  display: flex;
-  flex-direction: column;
   height: 100%;
-  background-color: var(--dv-group-view-background-color);
-  overflow: hidden;
 }
-.groupview:focus {
-  outline: none;
-}
-.groupview.empty > .tabs-and-actions-container {
-  display: none;
-}
-.groupview > .content-container {
-  flex-grow: 1;
-  min-height: 0;
-  outline: none;
-}
-.dv-root-wrapper {
-  height: 100%;
-  width: 100%;
+.dv-render-overlay.dv-render-overlay-float {
+  z-index: 998;
 }
-.grid-view,
-.branch-node {
-  height: 100%;
-  width: 100%;
+.dv-debug .dv-render-overlay {
+  outline: 1px solid red;
+  outline-offset: -1;
 }
 .pane-container {
   height: 100%;
@@ -744,7 +740,7 @@
   align-items: center;
   padding: 0px 8px;
   white-space: nowrap;
-  text-overflow: elipsis;
+  text-overflow: ellipsis;
 }
 .tab .dv-default-tab .dv-default-tab-content {
   padding: 0px 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-react",
-  "version": "1.15.2",
+  "version": "1.16.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",
@@ -54,6 +54,6 @@
     "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-react --coverage"
   },
   "dependencies": {
-    "dockview": "^1.15.2"
+    "dockview": "^1.16.0"
   }
 }