dockview 1.4.3 → 1.5.0

package/dist/esm/react/react.js

@@ -41,15 +41,21 @@ export class ReactPart {
         this.component = component;
         this.parameters = parameters;
         this.context = context;
+        this._initialProps = {};
         this.disposed = false;
         this.createPortal();
     }
     update(props) {
-        var _a;
         if (this.disposed) {
             throw new Error('invalid operation: resource is already disposed');
         }
-        (_a = this.componentInstance) === null || _a === void 0 ? void 0 : _a.update(props);
+        if (!this.componentInstance) {
+            // if the component is yet to be mounted store the props
+            this._initialProps = Object.assign(Object.assign({}, this._initialProps), props);
+        }
+        else {
+            this.componentInstance.update(props);
+        }
     }
     createPortal() {
         if (this.disposed) {
@@ -69,6 +75,10 @@ export class ReactPart {
             componentProps: this.parameters,
             ref: (element) => {
                 this.componentInstance = element;
+                if (Object.keys(this._initialProps).length > 0) {
+                    this.componentInstance.update(this._initialProps);
+                    this._initialProps = {}; // don't keep a reference to the users object once no longer required
+                }
             },
         });
         const node = this.context

package/dist/esm/react/svg.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const CloseButton: () => JSX.Element;
+export declare const ExpandMore: () => JSX.Element;

package/dist/esm/react/svg.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
+    React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
+export const ExpandMore = () => {
+    return (React.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 15", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
+        React.createElement("path", { d: "M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z" })));
+};

package/dist/esm/svg.d.ts

@@ -0,0 +1,3 @@
+export declare const createCloseButton: () => SVGSVGElement;
+export declare const createExpandMoreButton: () => SVGSVGElement;
+export declare const createChevronRightButton: () => SVGSVGElement;

package/dist/esm/svg.js

@@ -0,0 +1,31 @@
+const createSvgElementFromPath = (params) => {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttributeNS(null, 'height', params.height);
+    svg.setAttributeNS(null, 'width', params.width);
+    svg.setAttributeNS(null, 'viewBox', params.viewbox);
+    svg.setAttributeNS(null, 'aria-hidden', 'false');
+    svg.setAttributeNS(null, 'focusable', 'false');
+    svg.classList.add('dockview-svg');
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttributeNS(null, 'd', params.path);
+    svg.appendChild(path);
+    return svg;
+};
+export const createCloseButton = () => createSvgElementFromPath({
+    width: '11',
+    height: '11',
+    viewbox: '0 0 28 28',
+    path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
+});
+export const createExpandMoreButton = () => createSvgElementFromPath({
+    width: '11',
+    height: '11',
+    viewbox: '0 0 24 15',
+    path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
+});
+export const createChevronRightButton = () => createSvgElementFromPath({
+    width: '11',
+    height: '11',
+    viewbox: '0 0 15 25',
+    path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
+});

package/dist/styles/dockview.css

@@ -1,11 +1,18 @@
+.dockview-svg {
+  display: inline-block;
+  fill: currentcolor;
+  line-height: 1;
+  stroke: currentcolor;
+  stroke-width: 0;
+}
 .dockview-theme-dark {
   --dv-paneview-active-outline-color: dodgerblue;
   --dv-tabs-and-actions-container-font-size: 13px;
   --dv-tabs-and-actions-container-height: 35px;
-  --dv-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
   --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
   --dv-drag-over-border-color: white;
   --dv-tabs-container-scrollbar-color: #888;
+  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
   --dv-group-view-background-color: #1e1e1e;
   --dv-tabs-and-actions-container-background-color: #252526;
   --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;
@@ -25,10 +32,10 @@
   --dv-paneview-active-outline-color: dodgerblue;
   --dv-tabs-and-actions-container-font-size: 13px;
   --dv-tabs-and-actions-container-height: 35px;
-  --dv-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
   --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
   --dv-drag-over-border-color: white;
   --dv-tabs-container-scrollbar-color: #888;
+  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
   --dv-group-view-background-color: white;
   --dv-tabs-and-actions-container-background-color: #f3f3f3;
   --dv-activegroup-visiblepanel-tab-background-color: white;
@@ -48,10 +55,10 @@
   --dv-paneview-active-outline-color: dodgerblue;
   --dv-tabs-and-actions-container-font-size: 13px;
   --dv-tabs-and-actions-container-height: 35px;
-  --dv-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
   --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
   --dv-drag-over-border-color: white;
   --dv-tabs-container-scrollbar-color: #888;
+  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
   --dv-group-view-background-color: #1e1e1e;
   --dv-tabs-and-actions-container-background-color: #252526;
   --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;
@@ -65,16 +72,110 @@
   --dv-inactivegroup-hiddenpanel-tab-color: #626262;
   --dv-separator-border: rgb(68, 68, 68);
   --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);
-  --dv-activegroup-visiblepanel-tab-background-color: dodgerblue;
-  --dv-tabs-and-actions-container-height: 18px;
+  --dv-tabs-and-actions-container-background-color: #2d2d30;
+  --dv-tabs-and-actions-container-height: 20px;
   --dv-tabs-and-actions-container-font-size: 11px;
+  --dv-activegroup-visiblepanel-tab-background-color: #007acc;
+  --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;
+  --dv-activegroup-visiblepanel-tab-color: white;
+  --dv-activegroup-hiddenpanel-tab-color: white;
+  --dv-inactivegroup-visiblepanel-tab-color: white;
+  --dv-inactivegroup-hiddenpanel-tab-color: white;
 }
 .dockview-theme-vs .groupview.active-group > .tabs-and-actions-container {
+  box-sizing: content-box;
   border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
 }
+.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.active-tab {
+  border-top: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
+}
+.dockview-theme-vs .groupview.active-group > .tabs-and-actions-container .tab.inactive-tab {
+  border-top: 2px solid var(--dv-activegroup-hiddenpanel-tab-background-color);
+}
 .dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container {
+  box-sizing: content-box;
   border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);
 }
+.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.active-tab {
+  border-top: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);
+}
+.dockview-theme-vs .groupview.inactive-group > .tabs-and-actions-container .tab.inactive-tab {
+  border-top: 2px solid var(--dv-inactivegroup-hiddenpanel-tab-background-color);
+}
+
+.dockview-theme-abyss {
+  --dv-paneview-active-outline-color: dodgerblue;
+  --dv-tabs-and-actions-container-font-size: 13px;
+  --dv-tabs-and-actions-container-height: 35px;
+  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
+  --dv-drag-over-border-color: white;
+  --dv-tabs-container-scrollbar-color: #888;
+  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
+  --dv-group-view-background-color: #000c18;
+  --dv-tabs-and-actions-container-background-color: #1c1c2a;
+  --dv-activegroup-visiblepanel-tab-background-color: #000c18;
+  --dv-activegroup-hiddenpanel-tab-background-color: #10192c;
+  --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;
+  --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;
+  --dv-tab-divider-color: #2b2b4a;
+  --dv-activegroup-visiblepanel-tab-color: white;
+  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);
+  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);
+  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);
+  --dv-separator-border: #2b2b4a;
+  --dv-paneview-header-border-color: #2b2b4a;
+  --dv-paneview-active-outline-color: #596f99;
+}
+
+.dockview-theme-dracula {
+  --dv-paneview-active-outline-color: dodgerblue;
+  --dv-tabs-and-actions-container-font-size: 13px;
+  --dv-tabs-and-actions-container-height: 35px;
+  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
+  --dv-drag-over-border-color: white;
+  --dv-tabs-container-scrollbar-color: #888;
+  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
+  --dv-group-view-background-color: #282a36;
+  --dv-tabs-and-actions-container-background-color: #191a21;
+  --dv-activegroup-visiblepanel-tab-background-color: #282a36;
+  --dv-activegroup-hiddenpanel-tab-background-color: #21222c;
+  --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;
+  --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;
+  --dv-tab-divider-color: #191a21;
+  --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);
+  --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);
+  --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);
+  --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);
+  --dv-separator-border: #bd93f9;
+  --dv-paneview-header-border-color: #bd93f9;
+  --dv-paneview-active-outline-color: #6272a4;
+}
+.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
+  position: relative;
+}
+.dockview-theme-dracula .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  content: "";
+  width: 100%;
+  height: 1px;
+  background-color: #94527e;
+  z-index: 999;
+}
+.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
+  position: relative;
+}
+.dockview-theme-dracula .groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab::after {
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  content: "";
+  width: 100%;
+  height: 1px;
+  background-color: #5e3d5a;
+  z-index: 999;
+}
 .actions-bar {
   text-align: right;
   width: 28px;
@@ -88,19 +189,18 @@
   margin: 0px;
   justify-content: flex-end;
 }
-.actions-bar .actions-container a:active {
-  -webkit-mask-size: 100% 100% !important;
-  mask-size: 100% 100% !important;
-}
 .actions-bar .actions-container .close-action {
-  background-color: white;
-  height: 16px;
-  width: 16px;
-  display: block;
-  -webkit-mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;
-  mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;
-  margin-right: "0.5em";
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
   cursor: pointer;
+  color: var(--dv-activegroup-hiddenpanel-tab-color);
+}
+.actions-bar .actions-container .close-action:hover {
+  border-radius: 2px;
+  background-color: var(--dv-icon-hover-background-color);
 }
 .drop-target {
   position: relative;
@@ -163,30 +263,18 @@
   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.active-tab .tab-action {
-  background-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.active-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab .tab-action {
-  background-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.active-tab .tab-action {
-  background-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);
 }
-.groupview.inactive-group > .tabs-and-actions-container > .tabs-container > .tab.inactive-tab .tab-action {
-  background-color: var(--dv-inactivegroup-hiddenpanel-tab-color);
-}
 
 /**
  * when a tab is dragged we lose the above stylings because they are conditional on parent elements
@@ -246,8 +334,10 @@
   padding: 0px 8px;
   cursor: pointer;
 }
-.pane-container .view .default-header .collapsed {
-  transform: rotate(-90deg);
+.pane-container .view .default-header .dockview-pane-header-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .pane-container .view .default-header > span {
   padding-left: 8px;
@@ -359,6 +449,30 @@
   width: 1px;
   height: 100%;
 }
+.tab .dockview-react-tab {
+  display: flex;
+  padding: 0px 8px;
+  align-items: center;
+  height: 100%;
+}
+.tab .dockview-react-tab .dockview-react-tab-title {
+  padding: 0px 8px;
+  flex-grow: 1;
+}
+.tab .dockview-react-tab .dockview-react-tab-action {
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.tab .dockview-react-tab .dockview-react-tab-action:hover {
+  border-radius: 2px;
+  background-color: var(--dv-icon-hover-background-color);
+}
+.tab.inactive-tab:not(:hover) .dockview-react-tab-action {
+  visibility: hidden;
+}
 .dockview-react-part {
   height: 100%;
   width: 100%;
@@ -488,16 +602,16 @@
   display: flex;
   min-width: 80px;
   align-items: center;
-  padding-left: 10px;
+  padding: 0px 8px;
   white-space: nowrap;
   text-overflow: elipsis;
 }
 .tab .default-tab .tab-content {
+  padding: 0px 8px;
   flex-grow: 1;
 }
 .tab .default-tab .action-container {
   text-align: right;
-  width: 28px;
   display: flex;
 }
 .tab .default-tab .action-container .tab-list {
@@ -506,17 +620,16 @@
   margin: 0px;
   justify-content: flex-end;
 }
-.tab .default-tab .action-container .tab-list a:active:hover {
-  -webkit-mask-size: 100% 100% !important;
-  mask-size: 100% 100% !important;
-}
 .tab .default-tab .action-container .tab-list .tab-action {
-  height: 16px;
-  width: 16px;
-  display: block;
-  -webkit-mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;
-  mask: var(--dv-tab-close-icon) 50% 50%/90% 90% no-repeat;
-  margin-right: "0.5em";
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.tab .default-tab .action-container .tab-list .tab-action:hover {
+  border-radius: 2px;
+  background-color: var(--dv-icon-hover-background-color);
 }
 .tab .default-tab .action-container .tab-list .tab-action.disable-close {
   display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -74,5 +74,5 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "95c7b1a624f19b37fc8ec13531d7d6f4f54a3164"
+  "gitHead": "653fead20b8082daea902d949912d75680b5a2dc"
 }