dockview 1.4.0 → 1.4.1

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.4.0
+ * @version 1.4.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2283,18 +2283,12 @@ class SplitviewApi {
     removePanel(panel, sizing) {
         this.component.removePanel(panel, sizing);
     }
-    setVisible(panel, isVisible) {
-        this.component.setVisible(panel, isVisible);
-    }
     focus() {
         this.component.focus();
     }
     getPanel(id) {
         return this.component.getPanel(id);
     }
-    setActive(panel) {
-        this.component.setActive(panel);
-    }
     layout(width, height) {
         return this.component.layout(width, height);
     }
@@ -2442,15 +2436,6 @@ class GridviewApi {
     getPanel(id) {
         return this.component.getPanel(id);
     }
-    toggleVisibility(panel) {
-        this.component.toggleVisibility(panel);
-    }
-    setVisible(panel, visible) {
-        this.component.setVisible(panel, visible);
-    }
-    setActive(panel) {
-        this.component.setActive(panel);
-    }
     fromJSON(data) {
         return this.component.fromJSON(data);
     }
@@ -2687,7 +2672,7 @@ var MouseEventKind;
     MouseEventKind["CLICK"] = "CLICK";
     MouseEventKind["CONTEXT_MENU"] = "CONTEXT_MENU";
 })(MouseEventKind || (MouseEventKind = {}));
-class Tab$1 extends CompositeDisposable {
+class Tab extends CompositeDisposable {
     constructor(panelId, accessor, group) {
         super();
         this.panelId = panelId;
@@ -2916,7 +2901,7 @@ class TabsContainer extends CompositeDisposable {
         if (this.tabs.find((tab) => tab.value.panelId === panel.id)) {
             return;
         }
-        const tabToAdd = new Tab$1(panel.id, this.accessor, this.group);
+        const tabToAdd = new Tab(panel.id, this.accessor, this.group);
         if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
             throw new Error('invalid header component');
         }
@@ -3587,10 +3572,10 @@ class PanelApiImpl extends CompositeDisposable {
         this._isVisible = true;
         this._width = 0;
         this._height = 0;
-        this._onDidPanelDimensionChange = new Emitter({
+        this._onDidDimensionChange = new Emitter({
             replay: true,
         });
-        this.onDidDimensionsChange = this._onDidPanelDimensionChange.event;
+        this.onDidDimensionsChange = this._onDidDimensionChange.event;
         //
         this._onDidChangeFocus = new Emitter({
             replay: true,
@@ -3615,7 +3600,7 @@ class PanelApiImpl extends CompositeDisposable {
         //
         this._onActiveChange = new Emitter();
         this.onActiveChange = this._onActiveChange.event;
-        this.addDisposables(this._onDidPanelDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
+        this.addDisposables(this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
             this._isFocused = event.isFocused;
         }), this.onDidActiveChange((event) => {
             this._isActive = event.isActive;
@@ -3839,7 +3824,7 @@ class DockviewGroupPanel extends CompositeDisposable {
     layout(width, height) {
         var _a;
         // the obtain the correct dimensions of the content panel we must deduct the tab height
-        this.api._onDidPanelDimensionChange.fire({
+        this.api._onDidDimensionChange.fire({
             width,
             height: height - (this.group.model.header.height || 0),
         });
@@ -3989,53 +3974,6 @@ function createComponent(id, componentName, components = {}, frameworkComponents
     return new Component(id, componentName);
 }
 
-class WrappedTab {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this._element = document.createElement('element');
-        this.show();
-    }
-    get innerRenderer() {
-        return this.renderer;
-    }
-    get element() {
-        return this._element;
-    }
-    get id() {
-        return this.renderer.id;
-    }
-    show() {
-        if (!this.renderer.element.parentElement) {
-            this._element.appendChild(this.renderer.element);
-        }
-    }
-    hide() {
-        if (this.renderer.element.parentElement) {
-            this.renderer.element.remove();
-        }
-    }
-    layout(width, height) {
-        this.renderer.layout(width, height);
-    }
-    update(event) {
-        this.renderer.update(event);
-    }
-    toJSON() {
-        return this.renderer.toJSON();
-    }
-    focus() {
-        this.renderer.focus();
-    }
-    init(parameters) {
-        this.renderer.init(parameters);
-    }
-    updateParentGroup(group, isPanelVisible) {
-        this.renderer.updateParentGroup(group, isPanelVisible);
-    }
-    dispose() {
-        this.renderer.dispose();
-    }
-}
 class DefaultTab extends CompositeDisposable {
     constructor() {
         super();
@@ -4098,15 +4036,21 @@ class DefaultTab extends CompositeDisposable {
         }
     }
     updateParentGroup(group, isPanelVisible) {
+        const changed = this._isPanelVisible !== isPanelVisible ||
+            this._isGroupActive !== group.isActive;
         this._isPanelVisible = isPanelVisible;
         this._isGroupActive = group.isActive;
-        this.render();
+        if (changed) {
+            this.render();
+        }
     }
     layout(_width, _height) {
         // noop
     }
     render() {
-        this._content.textContent = this.params.title;
+        if (this._content.textContent !== this.params.title) {
+            this._content.textContent = this.params.title;
+        }
     }
 }
 
@@ -4150,7 +4094,7 @@ class BasePanelView extends CompositeDisposable {
     layout(width, height) {
         this._width = width;
         this._height = height;
-        this.api._onDidPanelDimensionChange.fire({ width, height });
+        this.api._onDidDimensionChange.fire({ width, height });
         if (this.part) {
             if (this._params) {
                 this.part.update(this._params.params);
@@ -4199,11 +4143,11 @@ class GridviewPanel 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.minimumWidth === 'number' ||
                 typeof event.minimumWidth === 'function') {
@@ -4382,7 +4326,7 @@ class DefaultGroupPanelView {
     constructor(renderers) {
         var _a;
         this._content = renderers.content;
-        this._tab = new WrappedTab((_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab());
+        this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
         this._actions =
             renderers.actions ||
                 (this.content.actions
@@ -4422,9 +4366,7 @@ class DefaultGroupPanelView {
     toJSON() {
         return {
             content: this.content.toJSON(),
-            tab: this.tab.innerRenderer instanceof DefaultTab
-                ? undefined
-                : this.tab.toJSON(),
+            tab: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
         };
     }
     dispose() {
@@ -4812,7 +4754,7 @@ class DockviewComponent extends BaseGrid {
             }
         }
         const view = new GroupPanel(this, id, options);
-        view.init({ params: {}, containerApi: null }); // required to initialized .part and allow for correct disposal of group
+        view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
         if (!this._groups.has(view.id)) {
             const disposable = new CompositeDisposable(view.model.onMove((event) => {
                 const { groupId, itemId, target, index } = event;
@@ -4951,9 +4893,6 @@ class GridviewComponent extends BaseGrid {
             value.value.setActive(panel === value.value);
         });
     }
-    toggleVisibility(panel) {
-        this.setVisible(panel, !this.isVisible(panel));
-    }
     focus() {
         var _a;
         (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
@@ -4984,7 +4923,7 @@ class GridviewComponent extends BaseGrid {
                     maximumHeight: data.maximumHeight,
                     priority: data.priority,
                     snap: !!data.snap,
-                    containerApi: new GridviewApi(this),
+                    accessor: this,
                     isVisible: node.visible,
                 }));
                 this.registerPanel(view);
@@ -5050,7 +4989,7 @@ class GridviewComponent extends BaseGrid {
             maximumHeight: options.maximumHeight,
             priority: options.priority,
             snap: !!options.snap,
-            containerApi: new GridviewApi(this),
+            accessor: this,
             isVisible: true,
         });
         this.registerPanel(view);
@@ -5246,7 +5185,7 @@ 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;
@@ -5322,7 +5261,7 @@ class SplitviewComponent extends CompositeDisposable {
                             maximumSize: data.maximumSize,
                             snap: view.snap,
                             priority: view.priority,
-                            containerApi: new SplitviewApi(this),
+                            accessor: this,
                         });
                     });
                     panel.orientation = orientation;
@@ -5964,13 +5903,11 @@ 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') {
@@ -6222,9 +6159,6 @@ class ReactPanelContentPart {
     layout(_width, _height) {
         // noop
     }
-    close() {
-        return Promise.resolve(true);
-    }
     dispose() {
         var _a, _b;
         this._onDidFocus.dispose();
@@ -6494,58 +6428,6 @@ const DockviewReact = React.forwardRef((props, ref) => {
 });
 DockviewReact.displayName = 'DockviewComponent';
 
-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));
-};
-const DockviewComponents = {
-    Tab,
-    Content,
-    Actions,
-    Panel,
-};
-
 class ReactPanelView extends SplitviewPanel {
     constructor(id, component, reactComponent, reactPortalStore) {
         super(id, component);
@@ -6557,8 +6439,7 @@ class ReactPanelView extends SplitviewPanel {
         return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
             params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
             api: this.api,
-            containerApi: this._params
-                .containerApi,
+            containerApi: new SplitviewApi(this._params.accessor),
         });
     }
 }
@@ -6634,8 +6515,7 @@ class ReactGridPanelView extends GridviewPanel {
         return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
             params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
             api: this.api,
-            containerApi: this._params
-                .containerApi,
+            containerApi: new GridviewApi(this._params.accessor),
         });
     }
 }
@@ -6825,4 +6705,4 @@ const PaneviewReact = React.forwardRef((props, ref) => {
 });
 PaneviewReact.displayName = 'PaneviewComponent';
 
-export { BaseGrid, ContentContainer, DockviewApi, DockviewComponent, DockviewComponents, DockviewReact, Event, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, GroupChangeKind2, Groupview, LayoutPriority, LocalSelectionTransfer, MouseEventKind, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, Position, ReactPanelContentPart, ReactPanelHeaderPart, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab$1 as Tab, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isReactElement, orthogonal, toTarget, usePortalsLifecycle };
+export { BaseGrid, ContentContainer, DockviewApi, DockviewComponent, DockviewReact, Event, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, GroupChangeKind2, Groupview, LayoutPriority, LocalSelectionTransfer, MouseEventKind, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, Position, ReactPanelContentPart, ReactPanelHeaderPart, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isReactElement, orthogonal, toTarget, usePortalsLifecycle };