dockview 1.4.0 → 1.4.3

package/dist/esm/splitview/splitviewComponent.js

@@ -1,7 +1,6 @@
 import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
 import { Orientation, Sizing, Splitview, } from './core/splitview';
 import { Emitter } from '../events';
-import { SplitviewApi } from '../api/component.api';
 import { createComponent } from '../panel/componentFactory';
 /**
  * A high-level implementation of splitview that works using 'panels'
@@ -136,7 +135,7 @@ export class SplitviewComponent extends CompositeDisposable {
             maximumSize: options.maximumSize,
             snap: options.snap,
             priority: options.priority,
-            containerApi: new SplitviewApi(this),
+            accessor: this,
         });
         const size = typeof options.size === 'number' ? options.size : Sizing.Distribute;
         const index = typeof options.index === 'number' ? options.index : undefined;
@@ -181,13 +180,8 @@ export class SplitviewComponent extends CompositeDisposable {
         };
     }
     fromJSON(serializedSplitview) {
+        this.clear();
         const { views, orientation, size, activeView } = serializedSplitview;
-        for (const [_, value] of this._panels.entries()) {
-            value.disposable.dispose();
-            value.value.dispose();
-        }
-        this._panels.clear();
-        this.splitview.dispose();
         const queue = [];
         this.splitview = new Splitview(this.element, {
             orientation,
@@ -212,7 +206,7 @@ export class SplitviewComponent extends CompositeDisposable {
                             maximumSize: data.maximumSize,
                             snap: view.snap,
                             priority: view.priority,
-                            containerApi: new SplitviewApi(this),
+                            accessor: this,
                         });
                     });
                     panel.orientation = orientation;
@@ -235,6 +229,14 @@ export class SplitviewComponent extends CompositeDisposable {
         }
         this._onDidLayoutfromJSON.fire();
     }
+    clear() {
+        for (const [_, value] of this._panels.entries()) {
+            value.disposable.dispose();
+            value.value.dispose();
+        }
+        this._panels.clear();
+        this.splitview.dispose();
+    }
     dispose() {
         for (const [_, value] of this._panels.entries()) {
             value.disposable.dispose();

package/dist/esm/splitview/splitviewPanel.js

@@ -14,13 +14,11 @@ export class SplitviewPanel extends BasePanelView {
         this.onDidChange = this._onDidChange.event;
         this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
             const { isVisible } = event;
-            const { containerApi } = this
-                ._params;
-            containerApi.setVisible(this, isVisible);
+            const { accessor } = this._params;
+            accessor.setVisible(this, isVisible);
         }), this.api.onActiveChange(() => {
-            const { containerApi } = this
-                ._params;
-            containerApi.setActive(this);
+            const { accessor } = this._params;
+            accessor.setActive(this);
         }), this.api.onDidConstraintsChangeInternal((event) => {
             if (typeof event.minimumSize === 'number' ||
                 typeof event.minimumSize === 'function') {

package/dist/styles/dockview.css

@@ -244,8 +244,13 @@
   color: var(--dv-activegroup-visiblepanel-tab-color);
   display: flex;
   padding: 0px 8px;
+  cursor: pointer;
+}
+.pane-container .view .default-header .collapsed {
+  transform: rotate(-90deg);
 }
 .pane-container .view .default-header > span {
+  padding-left: 8px;
   flex-grow: 1;
 }
 .pane-container:first-of-type > .pane > .pane-header {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview",
-  "version": "1.4.0",
+  "version": "1.4.3",
   "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": "63a9ba81ccc854880c9d526831d5a120e76edd86"
+  "gitHead": "95c7b1a624f19b37fc8ec13531d7d6f4f54a3164"
 }

package/dist/cjs/react/dockview/components.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-interface WithChildren {
-    children: React.ReactNode;
-}
-export declare const DockviewComponents: {
-    Tab: React.FunctionComponent<WithChildren>;
-    Content: React.FunctionComponent<WithChildren>;
-    Actions: React.FunctionComponent<WithChildren>;
-    Panel: React.FunctionComponent<WithChildren>;
-};
-export {};

package/dist/cjs/react/dockview/components.js

@@ -1,81 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DockviewComponents = void 0;
-var React = __importStar(require("react"));
-var ReactDOM = __importStar(require("react-dom"));
-var react_1 = require("../react");
-var Tab = function (props) {
-    return React.createElement(React.Fragment, null, props.children);
-};
-var Content = function (props) {
-    return React.createElement(React.Fragment, null, props.children);
-};
-var Actions = function (props) {
-    return React.createElement(React.Fragment, null, props.children);
-};
-function isValidComponent(element) {
-    return [Content, Actions, Tab].find(function (comp) { return element.type === comp; });
-}
-var Panel = function (props) {
-    var context = React.useContext(react_1.ReactPartContext);
-    var sections = React.useMemo(function () {
-        var _a;
-        var childs = ((_a = React.Children.map(props.children, function (_) { return _; })) === null || _a === void 0 ? void 0 : _a.filter(react_1.isReactElement)) || [];
-        var isInvalid = !!childs.find(function (_) { return !isValidComponent(_); });
-        if (isInvalid) {
-            throw new Error('Children of DockviewComponents.Panel must be one of the following: DockviewComponents.Content, DockviewComponents.Actions, DockviewComponents.Tab');
-        }
-        var body = childs.find(function (_) { return _.type === Content; });
-        var actions = childs.find(function (_) { return _.type === Actions; });
-        var tab = childs.find(function (_) { return _.type === Tab; });
-        return { body: body, actions: actions, tab: tab };
-    }, [props.children]);
-    React.useEffect(function () {
-        /**
-         * hide or show the default tab behavior based on whether we want to override
-         * with our own React tab.
-         */
-        if (sections.tab) {
-            context.tabPortalElement.hide();
-        }
-        else {
-            context.tabPortalElement.show();
-        }
-    }, [sections.tab]);
-    return (React.createElement(React.Fragment, null,
-        sections.actions &&
-            ReactDOM.createPortal(sections.actions, context.actionsPortalElement),
-        sections.tab &&
-            ReactDOM.createPortal(sections.tab, context.tabPortalElement.element),
-        sections.body || props.children));
-};
-exports.DockviewComponents = {
-    Tab: Tab,
-    Content: Content,
-    Actions: Actions,
-    Panel: Panel,
-};
-//# sourceMappingURL=components.js.map

package/dist/cjs/react/dockview/components.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../../../../src/react/dockview/components.tsx"],"names":[],"mappings":"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"}

package/dist/esm/react/dockview/components.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-interface WithChildren {
-    children: React.ReactNode;
-}
-export declare const DockviewComponents: {
-    Tab: React.FunctionComponent<WithChildren>;
-    Content: React.FunctionComponent<WithChildren>;
-    Actions: React.FunctionComponent<WithChildren>;
-    Panel: React.FunctionComponent<WithChildren>;
-};
-export {};

package/dist/esm/react/dockview/components.js

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { isReactElement, ReactPartContext } from '../react';
-const Tab = (props) => {
-    return React.createElement(React.Fragment, null, props.children);
-};
-const Content = (props) => {
-    return React.createElement(React.Fragment, null, props.children);
-};
-const Actions = (props) => {
-    return React.createElement(React.Fragment, null, props.children);
-};
-function isValidComponent(element) {
-    return [Content, Actions, Tab].find((comp) => element.type === comp);
-}
-const Panel = (props) => {
-    const context = React.useContext(ReactPartContext);
-    const sections = React.useMemo(() => {
-        var _a;
-        const childs = ((_a = React.Children.map(props.children, (_) => _)) === null || _a === void 0 ? void 0 : _a.filter(isReactElement)) || [];
-        const isInvalid = !!childs.find((_) => !isValidComponent(_));
-        if (isInvalid) {
-            throw new Error('Children of DockviewComponents.Panel must be one of the following: DockviewComponents.Content, DockviewComponents.Actions, DockviewComponents.Tab');
-        }
-        const body = childs.find((_) => _.type === Content);
-        const actions = childs.find((_) => _.type === Actions);
-        const tab = childs.find((_) => _.type === Tab);
-        return { body, actions, tab };
-    }, [props.children]);
-    React.useEffect(() => {
-        /**
-         * hide or show the default tab behavior based on whether we want to override
-         * with our own React tab.
-         */
-        if (sections.tab) {
-            context.tabPortalElement.hide();
-        }
-        else {
-            context.tabPortalElement.show();
-        }
-    }, [sections.tab]);
-    return (React.createElement(React.Fragment, null,
-        sections.actions &&
-            ReactDOM.createPortal(sections.actions, context.actionsPortalElement),
-        sections.tab &&
-            ReactDOM.createPortal(sections.tab, context.tabPortalElement.element),
-        sections.body || props.children));
-};
-export const DockviewComponents = {
-    Tab,
-    Content,
-    Actions,
-    Panel,
-};