dockview 1.15.3 → 1.16.1

package/dist/esm/dockview/dockview.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DockviewComponent, DockviewApi, PROPERTY_KEYS, } from 'dockview-core';
+import { PROPERTY_KEYS, createDockview, } from 'dockview-core';
 import { ReactPanelContentPart } from './reactContentPart';
 import { ReactPanelHeaderPart } from './reactHeaderPart';
 import { usePortalsLifecycle } from '../react';
@@ -76,20 +76,19 @@ export const DockviewReact = React.forwardRef((props, ref) => {
                     });
                 }
                 : undefined,
-            parentElement: domRef.current,
             defaultTabComponent: props.defaultTabComponent
                 ? DEFAULT_REACT_TAB
                 : undefined,
         };
-        const dockview = new DockviewComponent(Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
+        const api = createDockview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
         const { clientWidth, clientHeight } = domRef.current;
-        dockview.layout(clientWidth, clientHeight);
+        api.layout(clientWidth, clientHeight);
         if (props.onReady) {
-            props.onReady({ api: new DockviewApi(dockview) });
+            props.onReady({ api });
         }
-        dockviewRef.current = dockview;
+        dockviewRef.current = api;
         return () => {
-            dockview.dispose();
+            api.dispose();
         };
     }, []);
     React.useEffect(() => {

package/dist/esm/gridview/gridview.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridviewComponent, Orientation, GridviewApi, } from 'dockview-core';
+import { Orientation, createGridview, } from 'dockview-core';
 import { ReactGridPanelView } from './view';
 import { usePortalsLifecycle } from '../react';
 export const GridviewReact = React.forwardRef((props, ref) => {
@@ -14,8 +14,7 @@ export const GridviewReact = React.forwardRef((props, ref) => {
                 // noop
             };
         }
-        const gridview = new GridviewComponent({
-            parentElement: domRef.current,
+        const api = createGridview(domRef.current, {
             disableAutoResizing: props.disableAutoResizing,
             proportionalLayout: typeof props.proportionalLayout === 'boolean'
                 ? props.proportionalLayout
@@ -34,13 +33,13 @@ export const GridviewReact = React.forwardRef((props, ref) => {
                 : undefined,
         });
         const { clientWidth, clientHeight } = domRef.current;
-        gridview.layout(clientWidth, clientHeight);
+        api.layout(clientWidth, clientHeight);
         if (props.onReady) {
-            props.onReady({ api: new GridviewApi(gridview) });
+            props.onReady({ api });
         }
-        gridviewRef.current = gridview;
+        gridviewRef.current = api;
         return () => {
-            gridview.dispose();
+            api.dispose();
         };
     }, []);
     React.useEffect(() => {

package/dist/esm/paneview/paneview.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PaneviewComponent, PaneviewApi, } from 'dockview-core';
+import { createPaneview, } from 'dockview-core';
 import { usePortalsLifecycle } from '../react';
 import { PanePanelSection } from './view';
 export const PaneviewReact = React.forwardRef((props, ref) => {
@@ -11,8 +11,7 @@ export const PaneviewReact = React.forwardRef((props, ref) => {
         const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
             addPortal,
         });
-        const paneview = new PaneviewComponent({
-            parentElement: domRef.current,
+        const api = createPaneview(domRef.current, {
             disableAutoResizing: props.disableAutoResizing,
             frameworkComponents: props.components,
             components: {},
@@ -29,15 +28,14 @@ export const PaneviewReact = React.forwardRef((props, ref) => {
             },
             showDndOverlay: props.showDndOverlay,
         });
-        const api = new PaneviewApi(paneview);
         const { clientWidth, clientHeight } = domRef.current;
-        paneview.layout(clientWidth, clientHeight);
+        api.layout(clientWidth, clientHeight);
         if (props.onReady) {
             props.onReady({ api });
         }
-        paneviewRef.current = paneview;
+        paneviewRef.current = api;
         return () => {
-            paneview.dispose();
+            api.dispose();
         };
     }, []);
     React.useEffect(() => {
@@ -62,10 +60,10 @@ export const PaneviewReact = React.forwardRef((props, ref) => {
                 //
             };
         }
-        const paneview = paneviewRef.current;
-        const disposable = paneview.onDidDrop((event) => {
+        const api = paneviewRef.current;
+        const disposable = api.onDidDrop((event) => {
             if (props.onDidDrop) {
-                props.onDidDrop(Object.assign(Object.assign({}, event), { api: new PaneviewApi(paneview) }));
+                props.onDidDrop(Object.assign(Object.assign({}, event), { api }));
             }
         });
         return () => {

package/dist/esm/splitview/splitview.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SplitviewApi, SplitviewComponent, Orientation, } from 'dockview-core';
+import { Orientation, createSplitview, } from 'dockview-core';
 import { usePortalsLifecycle } from '../react';
 import { ReactPanelView } from './view';
 export const SplitviewReact = React.forwardRef((props, ref) => {
@@ -9,8 +9,7 @@ export const SplitviewReact = React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => domRef.current, []);
     React.useEffect(() => {
         var _a;
-        const splitview = new SplitviewComponent({
-            parentElement: domRef.current,
+        const api = createSplitview(domRef.current, {
             disableAutoResizing: props.disableAutoResizing,
             orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : Orientation.HORIZONTAL,
             frameworkComponents: props.components,
@@ -29,13 +28,13 @@ export const SplitviewReact = React.forwardRef((props, ref) => {
                 : undefined,
         });
         const { clientWidth, clientHeight } = domRef.current;
-        splitview.layout(clientWidth, clientHeight);
+        api.layout(clientWidth, clientHeight);
         if (props.onReady) {
-            props.onReady({ api: new SplitviewApi(splitview) });
+            props.onReady({ api });
         }
-        splitviewRef.current = splitview;
+        splitviewRef.current = api;
         return () => {
-            splitview.dispose();
+            api.dispose();
         };
     }, []);
     React.useEffect(() => {

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%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview",
-  "version": "1.15.3",
+  "version": "1.16.1",
   "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 --coverage"
   },
   "dependencies": {
-    "dockview-core": "^1.15.3"
+    "dockview-core": "^1.16.1"
   }
 }