dockview 1.5.2 → 1.6.0

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DockviewDropEvent } from '../../dockview/dockviewComponent';
 import { DockviewDndOverlayEvent } from '../../dockview/options';
-import { DockviewPanelApi } from '../../api/groupPanelApi';
+import { DockviewPanelApi } from '../../api/dockviewPanelApi';
 import { DockviewApi } from '../../api/component.api';
 import { IWatermarkPanelProps } from './reactWatermarkPart';
 import { PanelCollection, PanelParameters } from '../types';
@@ -10,18 +10,18 @@ export interface IGroupPanelBaseProps<T extends {} = Record<string, any>> extend
     api: DockviewPanelApi;
     containerApi: DockviewApi;
 }
-export declare type IDockviewPanelHeaderProps<T extends {} = Record<string, any>> = IGroupPanelBaseProps<T>;
-export declare type IDockviewPanelProps<T extends {
+export type IDockviewPanelHeaderProps<T extends {} = Record<string, any>> = IGroupPanelBaseProps<T>;
+export type IDockviewPanelProps<T extends {
     [index: string]: any;
 } = any> = IGroupPanelBaseProps<T>;
 export interface DockviewReadyEvent {
     api: DockviewApi;
 }
 export interface IDockviewReactProps {
+    onReady: (event: DockviewReadyEvent) => void;
     components: PanelCollection<IDockviewPanelProps>;
     tabComponents?: PanelCollection<IDockviewPanelHeaderProps>;
     watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
-    onReady: (event: DockviewReadyEvent) => void;
     tabHeight?: number;
     onDidDrop?: (event: DockviewDropEvent) => void;
     showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
@@ -30,5 +30,6 @@ export interface IDockviewReactProps {
     disableAutoResizing?: boolean;
     defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
     groupControlComponent?: React.FunctionComponent<IDockviewGroupControlProps>;
+    singleTabMode?: 'fullwidth' | 'default';
 }
 export declare const DockviewReact: React.ForwardRefExoticComponent<IDockviewReactProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -74,6 +74,7 @@ export const DockviewReact = React.forwardRef((props, ref) => {
                 : undefined,
             showDndOverlay: props.showDndOverlay,
             createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+            singleTabMode: props.singleTabMode,
         });
         (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
         dockview.deserializer = new ReactPanelDeserialzier(dockview);

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

@@ -4,7 +4,7 @@ import { PanelUpdateEvent } from '../../panel/types';
 import { GroupPanel, GroupviewPanelApi } from '../../groupview/groupviewPanel';
 import { DockviewApi } from '../../api/component.api';
 import { IDisposable } from '../../lifecycle';
-import { IDockviewPanel } from '../../groupview/groupPanel';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
 export interface IDockviewGroupControlProps {
     api: GroupviewPanelApi;
     containerApi: DockviewApi;

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

@@ -1,14 +1,6 @@
 import { ReactPart } from '../react';
 import { CompositeDisposable, MutableDisposable, } from '../../lifecycle';
 export class ReactGroupControlsRendererPart {
-    constructor(component, reactPortalStore, _group) {
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._group = _group;
-        this.mutableDisposable = new MutableDisposable();
-        this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
-    }
     get element() {
         return this._element;
     }
@@ -18,6 +10,14 @@ export class ReactGroupControlsRendererPart {
     get group() {
         return this._group;
     }
+    constructor(component, reactPortalStore, _group) {
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._group = _group;
+        this.mutableDisposable = new MutableDisposable();
+        this._element = document.createElement('div');
+        this._element.className = 'dockview-react-part';
+    }
     focus() {
         // TODO
     }

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

@@ -1,6 +1,9 @@
 import { ReactPart } from '../react';
 import { Emitter } from '../../events';
 export class ReactPanelContentPart {
+    get element() {
+        return this._element;
+    }
     constructor(id, component, reactPortalStore) {
         this.id = id;
         this.component = component;
@@ -12,9 +15,6 @@ export class ReactPanelContentPart {
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
     }
-    get element() {
-        return this._element;
-    }
     focus() {
         // TODO
     }

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

@@ -1,6 +1,9 @@
 import { ReactPart } from '../react';
 import { DEFAULT_TAB_IDENTIFIER } from '../../dockview/components/tab/defaultTab';
 export class ReactPanelHeaderPart {
+    get element() {
+        return this._element;
+    }
     constructor(id, component, reactPortalStore) {
         this.id = id;
         this.component = component;
@@ -8,9 +11,6 @@ export class ReactPanelHeaderPart {
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
     }
-    get element() {
-        return this._element;
-    }
     focus() {
         //noop
     }

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

@@ -1,5 +1,8 @@
 import { ReactPart } from '../react';
 export class ReactWatermarkPart {
+    get element() {
+        return this._element;
+    }
     constructor(id, component, reactPortalStore) {
         this.id = id;
         this.component = component;
@@ -10,9 +13,6 @@ export class ReactWatermarkPart {
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
     }
-    get element() {
-        return this._element;
-    }
     init(parameters) {
         this.parameters = parameters;
         this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {

package/dist/esm/react/dockview/v2/reactContentRenderer.js

@@ -1,6 +1,15 @@
 import { HostedContainer } from '../../../hostedContainer';
 import { ReactPart } from '../../react';
 export class ReactContentRenderer {
+    get element() {
+        return this._element;
+    }
+    get onDidBlur() {
+        return this._hostedContainer.onDidBlur;
+    }
+    get onDidFocus() {
+        return this._hostedContainer.onDidFocus;
+    }
     constructor(id, component, reactPortalStore) {
         this.id = id;
         this.component = component;
@@ -15,15 +24,6 @@ export class ReactContentRenderer {
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }
-    get element() {
-        return this._element;
-    }
-    get onDidBlur() {
-        return this._hostedContainer.onDidBlur;
-    }
-    get onDidFocus() {
-        return this._hostedContainer.onDidFocus;
-    }
     focus() {
         // noop
     }

package/dist/esm/react/dockview/v2/webviewContentRenderer.js

@@ -1,5 +1,8 @@
 import { HostedContainer } from '../../../hostedContainer';
 export class WebviewContentRenderer {
+    get element() {
+        return this._element;
+    }
     constructor(id) {
         this.id = id;
         this._hostedContainer = new HostedContainer({ id });
@@ -7,9 +10,6 @@ export class WebviewContentRenderer {
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }
-    get element() {
-        return this._element;
-    }
     focus() {
         // noop
     }

package/dist/esm/react/gridview/view.js

@@ -1,9 +1,10 @@
 import { GridviewApi } from '../../api/component.api';
+import { GridviewPanelApiImpl } from '../../api/gridviewPanelApi';
 import { GridviewPanel, } from '../../gridview/gridviewPanel';
 import { ReactPart } from '../react';
 export class ReactGridPanelView extends GridviewPanel {
     constructor(id, component, reactComponent, reactPortalStore) {
-        super(id, component);
+        super(id, component, new GridviewPanelApiImpl(id));
         this.reactComponent = reactComponent;
         this.reactPortalStore = reactPortalStore;
     }

package/dist/esm/react/paneview/view.js

@@ -1,5 +1,8 @@
 import { ReactPart } from '../react';
 export class PanePanelSection {
+    get element() {
+        return this._element;
+    }
     constructor(id, component, reactPortalStore) {
         this.id = id;
         this.component = component;
@@ -8,9 +11,6 @@ export class PanePanelSection {
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }
-    get element() {
-        return this._element;
-    }
     init(parameters) {
         this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
             params: parameters.params,

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

@@ -22,7 +22,7 @@ export declare class ReactPart<P extends object, C extends object = {}> implemen
     private createPortal;
     dispose(): void;
 }
-declare type PortalLifecycleHook = () => [
+type PortalLifecycleHook = () => [
     React.ReactPortal[],
     (portal: React.ReactPortal) => IDisposable
 ];

package/dist/esm/splitview/core/splitview.d.ts

@@ -38,18 +38,18 @@ export interface IView extends IBaseView {
     layout(size: number, orthogonalSize: number): void;
     setVisible(visible: boolean): void;
 }
-export declare type DistributeSizing = {
+export type DistributeSizing = {
     type: 'distribute';
 };
-export declare type SplitSizing = {
+export type SplitSizing = {
     type: 'split';
     index: number;
 };
-export declare type InvisibleSizing = {
+export type InvisibleSizing = {
     type: 'invisible';
     cachedVisibleSize: number;
 };
-export declare type Sizing = DistributeSizing | SplitSizing | InvisibleSizing;
+export type Sizing = DistributeSizing | SplitSizing | InvisibleSizing;
 export declare namespace Sizing {
     const Distribute: DistributeSizing;
     function Split(index: number): SplitSizing;

package/dist/esm/splitview/core/splitview.js

@@ -38,6 +38,65 @@ export var Sizing;
     Sizing.Invisible = Invisible;
 })(Sizing || (Sizing = {}));
 export class Splitview {
+    get size() {
+        return this._size;
+    }
+    set size(value) {
+        this._size = value;
+    }
+    get orthogonalSize() {
+        return this._orthogonalSize;
+    }
+    set orthogonalSize(value) {
+        this._orthogonalSize = value;
+    }
+    get length() {
+        return this.views.length;
+    }
+    get proportions() {
+        return this._proportions ? [...this._proportions] : undefined;
+    }
+    get orientation() {
+        return this._orientation;
+    }
+    set orientation(value) {
+        this._orientation = value;
+        const tmp = this.size;
+        this.size = this.orthogonalSize;
+        this.orthogonalSize = tmp;
+        removeClasses(this.element, 'horizontal', 'vertical');
+        this.element.classList.add(this.orientation == Orientation.HORIZONTAL
+            ? 'horizontal'
+            : 'vertical');
+    }
+    get minimumSize() {
+        return this.views.reduce((r, item) => r + item.minimumSize, 0);
+    }
+    get maximumSize() {
+        return this.length === 0
+            ? Number.POSITIVE_INFINITY
+            : this.views.reduce((r, item) => r + item.maximumSize, 0);
+    }
+    get startSnappingEnabled() {
+        return this._startSnappingEnabled;
+    }
+    set startSnappingEnabled(startSnappingEnabled) {
+        if (this._startSnappingEnabled === startSnappingEnabled) {
+            return;
+        }
+        this._startSnappingEnabled = startSnappingEnabled;
+        this.updateSashEnablement();
+    }
+    get endSnappingEnabled() {
+        return this._endSnappingEnabled;
+    }
+    set endSnappingEnabled(endSnappingEnabled) {
+        if (this._endSnappingEnabled === endSnappingEnabled) {
+            return;
+        }
+        this._endSnappingEnabled = endSnappingEnabled;
+        this.updateSashEnablement();
+    }
     constructor(container, options) {
         this.container = container;
         this.views = [];
@@ -167,65 +226,6 @@ export class Splitview {
             this.saveProportions();
         }
     }
-    get size() {
-        return this._size;
-    }
-    set size(value) {
-        this._size = value;
-    }
-    get orthogonalSize() {
-        return this._orthogonalSize;
-    }
-    set orthogonalSize(value) {
-        this._orthogonalSize = value;
-    }
-    get length() {
-        return this.views.length;
-    }
-    get proportions() {
-        return this._proportions ? [...this._proportions] : undefined;
-    }
-    get orientation() {
-        return this._orientation;
-    }
-    set orientation(value) {
-        this._orientation = value;
-        const tmp = this.size;
-        this.size = this.orthogonalSize;
-        this.orthogonalSize = tmp;
-        removeClasses(this.element, 'horizontal', 'vertical');
-        this.element.classList.add(this.orientation == Orientation.HORIZONTAL
-            ? 'horizontal'
-            : 'vertical');
-    }
-    get minimumSize() {
-        return this.views.reduce((r, item) => r + item.minimumSize, 0);
-    }
-    get maximumSize() {
-        return this.length === 0
-            ? Number.POSITIVE_INFINITY
-            : this.views.reduce((r, item) => r + item.maximumSize, 0);
-    }
-    get startSnappingEnabled() {
-        return this._startSnappingEnabled;
-    }
-    set startSnappingEnabled(startSnappingEnabled) {
-        if (this._startSnappingEnabled === startSnappingEnabled) {
-            return;
-        }
-        this._startSnappingEnabled = startSnappingEnabled;
-        this.updateSashEnablement();
-    }
-    get endSnappingEnabled() {
-        return this._endSnappingEnabled;
-    }
-    set endSnappingEnabled(endSnappingEnabled) {
-        if (this._endSnappingEnabled === endSnappingEnabled) {
-            return;
-        }
-        this._endSnappingEnabled = endSnappingEnabled;
-        this.updateSashEnablement();
-    }
     style(styles) {
         if ((styles === null || styles === void 0 ? void 0 : styles.separatorBorder) === 'transparent') {
             removeClasses(this.element, 'separator-border');

package/dist/esm/splitview/core/viewItem.js

@@ -1,20 +1,5 @@
 import { clamp } from '../../math';
 export class ViewItem {
-    constructor(container, view, size, disposable) {
-        this.container = container;
-        this.view = view;
-        this.disposable = disposable;
-        this._cachedVisibleSize = undefined;
-        if (typeof size === 'number') {
-            this._size = size;
-            this._cachedVisibleSize = undefined;
-            container.classList.add('visible');
-        }
-        else {
-            this._size = 0;
-            this._cachedVisibleSize = size.cachedVisibleSize;
-        }
-    }
     set size(size) {
         this._size = size;
     }
@@ -67,6 +52,21 @@ export class ViewItem {
     set enabled(enabled) {
         this.container.style.pointerEvents = enabled ? '' : 'none';
     }
+    constructor(container, view, size, disposable) {
+        this.container = container;
+        this.view = view;
+        this.disposable = disposable;
+        this._cachedVisibleSize = undefined;
+        if (typeof size === 'number') {
+            this._size = size;
+            this._cachedVisibleSize = undefined;
+            container.classList.add('visible');
+        }
+        else {
+            this._size = 0;
+            this._cachedVisibleSize = size.cachedVisibleSize;
+        }
+    }
     // layout(offset: number, layoutContext: TLayoutContext | undefined): void {
     //     this.layoutContainer(offset);
     //     this.view.layout(this.size, offset, layoutContext);

package/dist/esm/splitview/splitviewComponent.d.ts

@@ -30,7 +30,7 @@ export interface AddSplitviewComponentOptions extends BaseComponentOptions {
     minimumSize?: number;
     maximumSize?: number;
 }
-export declare type SplitviewComponentUpdateOptions = Pick<SplitviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents'>;
+export type SplitviewComponentUpdateOptions = Pick<SplitviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents'>;
 export interface ISplitviewComponent extends IDisposable {
     readonly minimumSize: number;
     readonly maximumSize: number;

package/dist/esm/splitview/splitviewComponent.js

@@ -6,29 +6,6 @@ import { createComponent } from '../panel/componentFactory';
  * A high-level implementation of splitview that works using 'panels'
  */
 export class SplitviewComponent extends CompositeDisposable {
-    constructor(element, options) {
-        super();
-        this.element = element;
-        this._disposable = new MutableDisposable();
-        this._panels = new Map();
-        this._onDidLayoutfromJSON = new Emitter();
-        this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
-        this._onDidAddView = new Emitter();
-        this.onDidAddView = this._onDidAddView.event;
-        this._onDidRemoveView = new Emitter();
-        this.onDidRemoveView = this._onDidRemoveView.event;
-        this._onDidLayoutChange = new Emitter();
-        this.onDidLayoutChange = this._onDidLayoutChange.event;
-        this._options = options;
-        if (!options.components) {
-            options.components = {};
-        }
-        if (!options.frameworkComponents) {
-            options.frameworkComponents = {};
-        }
-        this.splitview = new Splitview(this.element, options);
-        this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
-    }
     get panels() {
         return this.splitview.getViews();
     }
@@ -66,6 +43,29 @@ export class SplitviewComponent extends CompositeDisposable {
             ? this.splitview.size
             : this.splitview.orthogonalSize;
     }
+    constructor(element, options) {
+        super();
+        this.element = element;
+        this._disposable = new MutableDisposable();
+        this._panels = new Map();
+        this._onDidLayoutfromJSON = new Emitter();
+        this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
+        this._onDidAddView = new Emitter();
+        this.onDidAddView = this._onDidAddView.event;
+        this._onDidRemoveView = new Emitter();
+        this.onDidRemoveView = this._onDidRemoveView.event;
+        this._onDidLayoutChange = new Emitter();
+        this.onDidLayoutChange = this._onDidLayoutChange.event;
+        this._options = options;
+        if (!options.components) {
+            options.components = {};
+        }
+        if (!options.frameworkComponents) {
+            options.frameworkComponents = {};
+        }
+        this.splitview = new Splitview(this.element, options);
+        this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
+    }
     updateOptions(options) {
         const hasOrientationChanged = typeof options.orientation === 'string' &&
             this.options.orientation !== options.orientation;

package/dist/esm/splitview/splitviewPanel.js

@@ -3,36 +3,6 @@ import { SplitviewPanelApiImpl } from '../api/splitviewPanelApi';
 import { Orientation } from './core/splitview';
 import { Emitter } from '../events';
 export class SplitviewPanel extends BasePanelView {
-    constructor(id, componentName) {
-        super(id, componentName, new SplitviewPanelApiImpl(id));
-        this._evaluatedMinimumSize = 0;
-        this._evaluatedMaximumSize = Number.POSITIVE_INFINITY;
-        this._minimumSize = 0;
-        this._maximumSize = Number.POSITIVE_INFINITY;
-        this._snap = false;
-        this._onDidChange = new Emitter();
-        this.onDidChange = this._onDidChange.event;
-        this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
-            const { isVisible } = event;
-            const { accessor } = this._params;
-            accessor.setVisible(this, isVisible);
-        }), this.api.onActiveChange(() => {
-            const { accessor } = this._params;
-            accessor.setActive(this);
-        }), this.api.onDidConstraintsChangeInternal((event) => {
-            if (typeof event.minimumSize === 'number' ||
-                typeof event.minimumSize === 'function') {
-                this._minimumSize = event.minimumSize;
-            }
-            if (typeof event.maximumSize === 'number' ||
-                typeof event.maximumSize === 'function') {
-                this._maximumSize = event.maximumSize;
-            }
-            this.updateConstraints();
-        }), this.api.onDidSizeChange((event) => {
-            this._onDidChange.fire({ size: event.size });
-        }));
-    }
     get priority() {
         return this._priority;
     }
@@ -65,6 +35,37 @@ export class SplitviewPanel extends BasePanelView {
     get snap() {
         return this._snap;
     }
+    constructor(id, componentName) {
+        super(id, componentName, new SplitviewPanelApiImpl(id));
+        this._evaluatedMinimumSize = 0;
+        this._evaluatedMaximumSize = Number.POSITIVE_INFINITY;
+        this._minimumSize = 0;
+        this._maximumSize = Number.POSITIVE_INFINITY;
+        this._snap = false;
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this.api.initialize(this);
+        this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
+            const { isVisible } = event;
+            const { accessor } = this._params;
+            accessor.setVisible(this, isVisible);
+        }), this.api.onActiveChange(() => {
+            const { accessor } = this._params;
+            accessor.setActive(this);
+        }), this.api.onDidConstraintsChangeInternal((event) => {
+            if (typeof event.minimumSize === 'number' ||
+                typeof event.minimumSize === 'function') {
+                this._minimumSize = event.minimumSize;
+            }
+            if (typeof event.maximumSize === 'number' ||
+                typeof event.maximumSize === 'function') {
+                this._maximumSize = event.maximumSize;
+            }
+            this.updateConstraints();
+        }), this.api.onDidSizeChange((event) => {
+            this._onDidChange.fire({ size: event.size });
+        }));
+    }
     setVisible(isVisible) {
         this.api._onDidVisibilityChange.fire({ isVisible });
     }

package/dist/esm/types.d.ts

@@ -4,4 +4,5 @@ export interface Constructor<T> {
 export interface FrameworkFactory<T> {
     createComponent: (id: string, componentId: string, component: any) => T;
 }
-export declare type FunctionOrValue<T> = (() => T) | T;
+export type FunctionOrValue<T> = (() => T) | T;
+export declare function isBooleanValue(value: any): value is boolean;

package/dist/esm/types.js

@@ -1 +1,3 @@
-export {};
+export function isBooleanValue(value) {
+    return typeof value === 'boolean';
+}