dockview 1.4.0 → 1.4.1

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.4.0
+ * @version 1.4.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2273,18 +2273,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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);
         }
@@ -2432,15 +2426,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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);
         }
@@ -2677,7 +2662,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         MouseEventKind["CLICK"] = "CLICK";
         MouseEventKind["CONTEXT_MENU"] = "CONTEXT_MENU";
     })(exports.MouseEventKind || (exports.MouseEventKind = {}));
-    class Tab$1 extends CompositeDisposable {
+    class Tab extends CompositeDisposable {
         constructor(panelId, accessor, group) {
             super();
             this.panelId = panelId;
@@ -2906,7 +2891,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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');
             }
@@ -3577,10 +3562,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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,
@@ -3605,7 +3590,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             //
             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;
@@ -3829,7 +3814,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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),
             });
@@ -3979,53 +3964,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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();
@@ -4088,15 +4026,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         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;
+            }
         }
     }
 
@@ -4140,7 +4084,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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);
@@ -4189,11 +4133,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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') {
@@ -4372,7 +4316,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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
@@ -4412,9 +4356,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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() {
@@ -4802,7 +4744,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             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;
@@ -4941,9 +4883,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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();
@@ -4974,7 +4913,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         maximumHeight: data.maximumHeight,
                         priority: data.priority,
                         snap: !!data.snap,
-                        containerApi: new GridviewApi(this),
+                        accessor: this,
                         isVisible: node.visible,
                     }));
                     this.registerPanel(view);
@@ -5040,7 +4979,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 maximumHeight: options.maximumHeight,
                 priority: options.priority,
                 snap: !!options.snap,
-                containerApi: new GridviewApi(this),
+                accessor: this,
                 isVisible: true,
             });
             this.registerPanel(view);
@@ -5236,7 +5175,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 maximumSize: options.maximumSize,
                 snap: options.snap,
                 priority: options.priority,
-                containerApi: new SplitviewApi(this),
+                accessor: this,
             });
             const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
             const index = typeof options.index === 'number' ? options.index : undefined;
@@ -5312,7 +5251,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                                 maximumSize: data.maximumSize,
                                 snap: view.snap,
                                 priority: view.priority,
-                                containerApi: new SplitviewApi(this),
+                                accessor: this,
                             });
                         });
                         panel.orientation = orientation;
@@ -5954,13 +5893,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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') {
@@ -6212,9 +6149,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         layout(_width, _height) {
             // noop
         }
-        close() {
-            return Promise.resolve(true);
-        }
         dispose() {
             var _a, _b;
             this._onDidFocus.dispose();
@@ -6484,58 +6418,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     });
     DockviewReact.displayName = 'DockviewComponent';
 
-    const Tab = (props) => {
-        return React__namespace.createElement(React__namespace.Fragment, null, props.children);
-    };
-    const Content = (props) => {
-        return React__namespace.createElement(React__namespace.Fragment, null, props.children);
-    };
-    const Actions = (props) => {
-        return React__namespace.createElement(React__namespace.Fragment, null, props.children);
-    };
-    function isValidComponent(element) {
-        return [Content, Actions, Tab].find((comp) => element.type === comp);
-    }
-    const Panel = (props) => {
-        const context = React__namespace.useContext(ReactPartContext);
-        const sections = React__namespace.useMemo(() => {
-            var _a;
-            const childs = ((_a = React__namespace.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__namespace.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__namespace.createElement(React__namespace.Fragment, null,
-            sections.actions &&
-                ReactDOM__namespace.createPortal(sections.actions, context.actionsPortalElement),
-            sections.tab &&
-                ReactDOM__namespace.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);
@@ -6547,8 +6429,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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),
             });
         }
     }
@@ -6624,8 +6505,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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),
             });
         }
     }
@@ -6819,7 +6699,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.ContentContainer = ContentContainer;
     exports.DockviewApi = DockviewApi;
     exports.DockviewComponent = DockviewComponent;
-    exports.DockviewComponents = DockviewComponents;
     exports.DockviewReact = DockviewReact;
     exports.Gridview = Gridview;
     exports.GridviewApi = GridviewApi;
@@ -6845,7 +6724,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.SplitviewComponent = SplitviewComponent;
     exports.SplitviewPanel = SplitviewPanel;
     exports.SplitviewReact = SplitviewReact;
-    exports.Tab = Tab$1;
+    exports.Tab = Tab;
     exports.getDirectionOrientation = getDirectionOrientation;
     exports.getGridLocation = getGridLocation;
     exports.getLocationOrientation = getLocationOrientation;