dockview-core 1.10.0 → 1.10.1

package/dist/esm/api/component.api.d.ts

@@ -374,15 +374,23 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      */
     get onWillDrop(): Event<DockviewWillDropEvent>;
     /**
+     * Invoked before an overlay is shown indicating a drop target.
      *
+     * Calling `event.preventDefault()` will prevent the overlay being shown and prevent
+     * the any subsequent drop event.
      */
     get onWillShowOverlay(): Event<WillShowOverlayLocationEvent>;
     /**
-     * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked before a group is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the group drag starting.
+     *
      */
     get onWillDragGroup(): Event<GroupDragEvent>;
     /**
-     * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked before a panel is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the panel drag starting.
      */
     get onWillDragPanel(): Event<TabDragEvent>;
     /**

package/dist/esm/api/component.api.js

@@ -516,19 +516,27 @@ export class DockviewApi {
         return this.component.onWillDrop;
     }
     /**
+     * Invoked before an overlay is shown indicating a drop target.
      *
+     * Calling `event.preventDefault()` will prevent the overlay being shown and prevent
+     * the any subsequent drop event.
      */
     get onWillShowOverlay() {
         return this.component.onWillShowOverlay;
     }
     /**
-     * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked before a group is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the group drag starting.
+     *
      */
     get onWillDragGroup() {
         return this.component.onWillDragGroup;
     }
     /**
-     * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked before a panel is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the panel drag starting.
      */
     get onWillDragPanel() {
         return this.component.onWillDragPanel;

package/dist/esm/api/dockviewPanelApi.d.ts

@@ -78,4 +78,5 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implement
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
+    private setupGroupEventListeners;
 }

package/dist/esm/api/dockviewPanelApi.js

@@ -15,32 +15,11 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         return this.panel.renderer;
     }
     set group(value) {
-        const isOldGroupActive = this.isGroupActive;
+        const oldGroup = this._group;
         if (this._group !== value) {
             this._group = value;
             this._onDidGroupChange.fire({});
-            let _trackGroupActive = isOldGroupActive; // prevent duplicate events with same state
-            this.groupEventsDisposable.value = new CompositeDisposable(this.group.api.onDidLocationChange((event) => {
-                if (this.group !== this.panel.group) {
-                    return;
-                }
-                this._onDidLocationChange.fire(event);
-            }), this.group.api.onDidActiveChange(() => {
-                if (this.group !== this.panel.group) {
-                    return;
-                }
-                if (_trackGroupActive !== this.isGroupActive) {
-                    _trackGroupActive = this.isGroupActive;
-                    this._onDidActiveGroupChange.fire({
-                        isActive: this.isGroupActive,
-                    });
-                }
-            }));
-            // if (this.isGroupActive !== isOldGroupActive) {
-            //     this._onDidActiveGroupChange.fire({
-            //         isActive: this.isGroupActive,
-            //     });
-            // }
+            this.setupGroupEventListeners(oldGroup);
             this._onDidLocationChange.fire({
                 location: this.group.api.location,
             });
@@ -66,6 +45,7 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         this.groupEventsDisposable = new MutableDisposable();
         this.initialize(panel);
         this._group = group;
+        this.setupGroupEventListeners();
         this.addDisposables(this.groupEventsDisposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange, this._onDidLocationChange);
     }
     getWindow() {
@@ -100,4 +80,33 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     exitMaximized() {
         this.group.api.exitMaximized();
     }
+    setupGroupEventListeners(previousGroup) {
+        var _a;
+        let _trackGroupActive = (_a = previousGroup === null || previousGroup === void 0 ? void 0 : previousGroup.isActive) !== null && _a !== void 0 ? _a : false; // prevent duplicate events with same state
+        this.groupEventsDisposable.value = new CompositeDisposable(this.group.api.onDidVisibilityChange((event) => {
+            if (!event.isVisible && this.isVisible) {
+                this._onDidVisibilityChange.fire(event);
+            }
+            else if (event.isVisible &&
+                !this.isVisible &&
+                this.group.model.isPanelActive(this.panel)) {
+                this._onDidVisibilityChange.fire(event);
+            }
+        }), this.group.api.onDidLocationChange((event) => {
+            if (this.group !== this.panel.group) {
+                return;
+            }
+            this._onDidLocationChange.fire(event);
+        }), this.group.api.onDidActiveChange(() => {
+            if (this.group !== this.panel.group) {
+                return;
+            }
+            if (_trackGroupActive !== this.isGroupActive) {
+                _trackGroupActive = this.isGroupActive;
+                this._onDidActiveGroupChange.fire({
+                    isActive: this.isGroupActive,
+                });
+            }
+        }));
+    }
 }

package/dist/esm/api/panelApi.d.ts

@@ -11,9 +11,6 @@ export interface PanelDimensionChangeEvent {
 export interface VisibilityEvent {
     readonly isVisible: boolean;
 }
-export interface HiddenEvent {
-    readonly isHidden: boolean;
-}
 export interface ActiveEvent {
     readonly isActive: boolean;
 }
@@ -22,8 +19,8 @@ export interface PanelApi {
     readonly onDidFocusChange: Event<FocusEvent>;
     readonly onDidVisibilityChange: Event<VisibilityEvent>;
     readonly onDidActiveChange: Event<ActiveEvent>;
-    readonly onDidHiddenChange: Event<HiddenEvent>;
     setActive(): void;
+    setVisible(isVisible: boolean): void;
     updateParameters(parameters: Parameters): void;
     /**
      * The id of the panel that would have been assigned when the panel was created
@@ -41,10 +38,6 @@ export interface PanelApi {
      * Whether the panel is visible
      */
     readonly isVisible: boolean;
-    /**
-     * Whether the panel is hidden
-     */
-    readonly isHidden: boolean;
     /**
      * The panel width in pixels
      */
@@ -66,7 +59,6 @@ export declare class PanelApiImpl extends CompositeDisposable implements PanelAp
     private _isFocused;
     private _isActive;
     private _isVisible;
-    private _isHidden;
     private _width;
     private _height;
     private readonly panelUpdatesDisposable;
@@ -78,8 +70,8 @@ export declare class PanelApiImpl extends CompositeDisposable implements PanelAp
     readonly onWillFocus: Event<WillFocusEvent>;
     readonly _onDidVisibilityChange: Emitter<VisibilityEvent>;
     readonly onDidVisibilityChange: Event<VisibilityEvent>;
-    readonly _onDidHiddenChange: Emitter<HiddenEvent>;
-    readonly onDidHiddenChange: Event<HiddenEvent>;
+    readonly _onWillVisibilityChange: Emitter<VisibilityEvent>;
+    readonly onWillVisibilityChange: Event<VisibilityEvent>;
     readonly _onDidActiveChange: Emitter<ActiveEvent>;
     readonly onDidActiveChange: Event<ActiveEvent>;
     readonly _onActiveChange: Emitter<void>;
@@ -89,12 +81,11 @@ export declare class PanelApiImpl extends CompositeDisposable implements PanelAp
     get isFocused(): boolean;
     get isActive(): boolean;
     get isVisible(): boolean;
-    get isHidden(): boolean;
     get width(): number;
     get height(): number;
     constructor(id: string);
     initialize(panel: IPanel): void;
-    setHidden(isHidden: boolean): void;
+    setVisible(isVisible: boolean): void;
     setActive(): void;
     updateParameters(parameters: Parameters): void;
 }

package/dist/esm/api/panelApi.js

@@ -18,9 +18,6 @@ export class PanelApiImpl extends CompositeDisposable {
     get isVisible() {
         return this._isVisible;
     }
-    get isHidden() {
-        return this._isHidden;
-    }
     get width() {
         return this._width;
     }
@@ -33,7 +30,6 @@ export class PanelApiImpl extends CompositeDisposable {
         this._isFocused = false;
         this._isActive = false;
         this._isVisible = true;
-        this._isHidden = false;
         this._width = 0;
         this._height = 0;
         this.panelUpdatesDisposable = new MutableDisposable();
@@ -47,8 +43,8 @@ export class PanelApiImpl extends CompositeDisposable {
         //
         this._onDidVisibilityChange = new Emitter();
         this.onDidVisibilityChange = this._onDidVisibilityChange.event;
-        this._onDidHiddenChange = new Emitter();
-        this.onDidHiddenChange = this._onDidHiddenChange.event;
+        this._onWillVisibilityChange = new Emitter();
+        this.onWillVisibilityChange = this._onWillVisibilityChange.event;
         this._onDidActiveChange = new Emitter();
         this.onDidActiveChange = this._onDidActiveChange.event;
         this._onActiveChange = new Emitter();
@@ -61,12 +57,10 @@ export class PanelApiImpl extends CompositeDisposable {
             this._isActive = event.isActive;
         }), this.onDidVisibilityChange((event) => {
             this._isVisible = event.isVisible;
-        }), this.onDidHiddenChange((event) => {
-            this._isHidden = event.isHidden;
         }), this.onDidDimensionsChange((event) => {
             this._width = event.width;
             this._height = event.height;
-        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onUpdateParameters, this._onWillFocus, this._onDidHiddenChange, this._onUpdateParameters);
+        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onUpdateParameters, this._onWillFocus, this._onWillVisibilityChange, this._onUpdateParameters);
     }
     initialize(panel) {
         this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
@@ -75,8 +69,8 @@ export class PanelApiImpl extends CompositeDisposable {
             });
         });
     }
-    setHidden(isHidden) {
-        this._onDidHiddenChange.fire({ isHidden });
+    setVisible(isVisible) {
+        this._onWillVisibilityChange.fire({ isVisible });
     }
     setActive() {
         this._onActiveChange.fire();

package/dist/esm/dockview/components/panel/content.js

@@ -48,7 +48,7 @@ export class ContentContainer extends CompositeDisposable {
                         data.groupId === this.group.id;
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
-                return this.group.canDisplayOverlay(event, position, 'panel');
+                return this.group.canDisplayOverlay(event, position, 'content');
             },
         });
         this.addDisposables(this.dropTarget);

package/dist/esm/dockview/components/titlebar/voidContainer.js

@@ -38,7 +38,7 @@ export class VoidContainer extends CompositeDisposable {
                     // don't show the overlay if the tab being dragged is the last panel of this group
                     return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
                 }
-                return group.model.canDisplayOverlay(event, position, 'panel');
+                return group.model.canDisplayOverlay(event, position, 'header_space');
             },
         });
         this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;

package/dist/esm/dockview/dockviewComponent.js

@@ -12,7 +12,7 @@ import { isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGro
 import { BaseGrid, toTarget, } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation, Sizing } from '../splitview/splitview';
-import { DockviewDidDropEvent, DockviewWillDropEvent, } from './dockviewGroupPanelModel';
+import { DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent, } from './dockviewGroupPanelModel';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelModel } from './dockviewPanelModel';
 import { getPanelData } from '../dnd/dataTransfer';
@@ -269,7 +269,15 @@ export class DockviewComponent extends BaseGrid {
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: (_b = this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
         });
-        this.addDisposables(this._rootDropTarget.onDrop((event) => {
+        this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
+            if (this.gridview.length > 0 && event.position === 'center') {
+                // option only available when no panels in primary grid
+                return;
+            }
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'edge',
+            }));
+        }), this._rootDropTarget.onDrop((event) => {
             var _a;
             const willDropEvent = new DockviewWillDropEvent({
                 nativeEvent: event.nativeEvent,
@@ -278,7 +286,7 @@ export class DockviewComponent extends BaseGrid {
                 api: this._api,
                 group: undefined,
                 getData: getPanelData,
-                kind: 'content',
+                kind: 'edge',
             });
             this._onWillDrop.fire(willDropEvent);
             if (willDropEvent.defaultPrevented) {
@@ -334,7 +342,7 @@ export class DockviewComponent extends BaseGrid {
         const box = getBox();
         const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId(); //item.id;
         if (itemToPopout.api.location.type === 'grid') {
-            itemToPopout.api.setHidden(true);
+            itemToPopout.api.setVisible(false);
         }
         const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
         theme !== null && theme !== void 0 ? theme : '', {
@@ -385,7 +393,7 @@ export class DockviewComponent extends BaseGrid {
                 }));
                 switch (referenceLocation) {
                     case 'grid':
-                        referenceGroup.api.setHidden(true);
+                        referenceGroup.api.setVisible(false);
                         break;
                     case 'floating':
                     case 'popout':
@@ -439,8 +447,8 @@ export class DockviewComponent extends BaseGrid {
                         from: group,
                         to: referenceGroup,
                     }));
-                    if (referenceGroup.api.isHidden) {
-                        referenceGroup.api.setHidden(false);
+                    if (!referenceGroup.api.isVisible) {
+                        referenceGroup.api.setVisible(true);
                     }
                     if (this.getPanel(group.id)) {
                         this.doRemoveGroup(group, {
@@ -1015,7 +1023,7 @@ export class DockviewComponent extends BaseGrid {
     }
     updateWatermark() {
         var _a, _b;
-        if (this.groups.filter((x) => x.api.location.type === 'grid' && !x.api.isHidden).length === 0) {
+        if (this.groups.filter((x) => x.api.location.type === 'grid' && x.api.isVisible).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({

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

@@ -7,7 +7,6 @@ import { IViewSize } from '../gridview/gridview';
 import { CompositeDisposable } from '../lifecycle';
 import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
-import { DockviewDropTargets } from './types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
 import { OverlayRenderContainer } from '../overlayRenderContainer';
@@ -69,7 +68,7 @@ export interface IHeader {
     hidden: boolean;
 }
 export type DockviewGroupPanelLocked = boolean | 'no-drop-target';
-export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content';
+export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content' | 'edge';
 export interface IDockviewGroupPanelModel extends IPanel {
     readonly isActive: boolean;
     readonly size: number;
@@ -106,7 +105,7 @@ export interface IDockviewGroupPanelModel extends IPanel {
         panel?: IDockviewPanel;
         suppressRoll?: boolean;
     }): void;
-    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewDropTargets): boolean;
+    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewGroupDropLocation): boolean;
 }
 export type DockviewGroupLocation = {
     type: 'grid';
@@ -225,7 +224,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private doSetActivePanel;
     private updateMru;
     private updateContainer;
-    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewDropTargets): boolean;
+    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewGroupDropLocation): boolean;
     private handleDropEvent;
     dispose(): void;
 }

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

@@ -1,14 +1,14 @@
 import { DockviewApi } from '../api/component.api';
 import { Direction } from '../gridview/baseComponentGridview';
 import { IGridView } from '../gridview/gridview';
-import { IContentRenderer, ITabRenderer, WatermarkConstructor, IWatermarkRenderer, DockviewDropTargets } from './types';
+import { IContentRenderer, ITabRenderer, WatermarkConstructor, IWatermarkRenderer } from './types';
 import { Parameters } from '../panel/types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { ISplitviewStyles, Orientation } from '../splitview/splitview';
 import { PanelTransfer } from '../dnd/dataTransfer';
 import { IDisposable } from '../lifecycle';
 import { DroptargetOverlayModel, Position } from '../dnd/droptarget';
-import { GroupOptions } from './dockviewGroupPanelModel';
+import { DockviewGroupDropLocation, GroupOptions } from './dockviewGroupPanelModel';
 import { IDockviewPanel } from './dockviewPanel';
 import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory';
 import { DockviewGroupPanelApi } from '../api/dockviewGroupPanelApi';
@@ -50,7 +50,7 @@ export interface ViewFactoryData {
 }
 export interface DockviewDndOverlayEvent {
     nativeEvent: DragEvent;
-    target: DockviewDropTargets;
+    target: DockviewGroupDropLocation;
     position: Position;
     group?: DockviewGroupPanel;
     getData: () => PanelTransfer | undefined;

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

@@ -6,7 +6,6 @@ import { Event } from '../events';
 import { Optional } from '../types';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelRenderer } from '../overlayRenderContainer';
-export type DockviewDropTargets = 'tab' | 'panel' | 'tabContainer' | 'edge';
 export interface HeaderPartInitParameters {
     title: string;
 }

package/dist/esm/gridview/gridviewPanel.js

@@ -77,10 +77,10 @@ export class GridviewPanel extends BasePanelView {
             this._maximumHeight = options.maximumHeight;
         }
         this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
-        this.addDisposables(this.api.onDidHiddenChange((event) => {
-            const { isHidden } = event;
+        this.addDisposables(this.api.onWillVisibilityChange((event) => {
+            const { isVisible } = event;
             const { accessor } = this._params;
-            accessor.setVisible(this, !isHidden);
+            accessor.setVisible(this, isVisible);
         }), this.api.onActiveChange(() => {
             const { accessor } = this._params;
             accessor.doSetGroupActive(this);

package/dist/esm/lifecycle.d.ts

@@ -1,5 +1,5 @@
 export interface IDisposable {
-    dispose: () => void;
+    dispose(): void;
 }
 export interface IValueDisposable<T> {
     readonly value: T;

package/dist/esm/paneview/paneview.d.ts

@@ -26,6 +26,7 @@ export declare class Paneview extends CompositeDisposable implements IDisposable
         orientation: Orientation;
         descriptor?: ISplitViewDescriptor;
     });
+    setViewVisible(index: number, visible: boolean): void;
     addPane(pane: PaneviewPanel, size?: number | Sizing, index?: number, skipLayout?: boolean): void;
     getViewSize(index: number): number;
     getPanes(): PaneviewPanel[];

package/dist/esm/paneview/paneview.js

@@ -66,6 +66,9 @@ export class Paneview extends CompositeDisposable {
             this._onDidChange.fire();
         }));
     }
+    setViewVisible(index, visible) {
+        this.splitview.setViewVisible(index, visible);
+    }
     addPane(pane, size, index = this.splitview.length, skipLayout = false) {
         const disposable = pane.onDidChangeExpansionState(() => {
             this.setupAnimation();

package/dist/esm/paneview/paneviewComponent.d.ts

@@ -84,6 +84,7 @@ export interface IPaneviewComponent extends IDisposable {
     getPanel(id: string): IPaneviewPanel | undefined;
     movePanel(from: number, to: number): void;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;
+    setVisible(panel: IPaneviewPanel, visible: boolean): void;
     clear(): void;
 }
 export declare class PaneviewComponent extends Resizable implements IPaneviewComponent {
@@ -112,6 +113,7 @@ export declare class PaneviewComponent extends Resizable implements IPaneviewCom
     get width(): number;
     get options(): PaneviewComponentOptions;
     constructor(options: PaneviewComponentOptions);
+    setVisible(panel: PaneviewPanel, visible: boolean): void;
     focus(): void;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;
     addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;

package/dist/esm/paneview/paneviewComponent.js

@@ -85,6 +85,10 @@ export class PaneviewComponent extends Resizable {
         });
         this.addDisposables(this._disposable);
     }
+    setVisible(panel, visible) {
+        const index = this.panels.indexOf(panel);
+        this.paneview.setViewVisible(index, visible);
+    }
     focus() {
         //noop
     }
@@ -131,6 +135,7 @@ export class PaneviewComponent extends Resizable {
             isExpanded: options.isExpanded,
             title: options.title,
             containerApi: new PaneviewApi(this),
+            accessor: this,
         });
         this.paneview.addPane(view, size, index);
         view.orientation = this.paneview.orientation;
@@ -230,6 +235,7 @@ export class PaneviewComponent extends Resizable {
                             title: data.title,
                             isExpanded: !!view.expanded,
                             containerApi: new PaneviewApi(this),
+                            accessor: this,
                         });
                         panel.orientation = this.paneview.orientation;
                     });

package/dist/esm/paneview/paneviewPanel.d.ts

@@ -5,6 +5,7 @@ import { BasePanelView, BasePanelViewExported, BasePanelViewState } from '../gri
 import { IDisposable } from '../lifecycle';
 import { IFrameworkPart, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
 import { IView, Orientation } from '../splitview/splitview';
+import { PaneviewComponent } from './paneviewComponent';
 export interface PanePanelViewState extends BasePanelViewState {
     headerComponent?: string;
     title: string;
@@ -15,6 +16,7 @@ export interface PanePanelInitParameter extends PanelInitParameters {
     isExpanded?: boolean;
     title: string;
     containerApi: PaneviewApi;
+    accessor: PaneviewComponent;
 }
 export interface PanePanelComponentInitParameter extends PanePanelInitParameter {
     api: PaneviewPanelApiImpl;

package/dist/esm/paneview/paneviewPanel.js

@@ -72,7 +72,11 @@ export class PaneviewPanel extends BasePanelView {
         this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
         this._orientation = orientation;
         this.element.classList.add('pane');
-        this.addDisposables(this.api.onDidSizeChange((event) => {
+        this.addDisposables(this.api.onWillVisibilityChange((event) => {
+            const { isVisible } = event;
+            const { accessor } = this._params;
+            accessor.setVisible(this, isVisible);
+        }), this.api.onDidSizeChange((event) => {
             this._onDidChange.fire({ size: event.size });
         }), addDisposableListener(this.element, 'mouseenter', (ev) => {
             this.api._onMouseEnter.fire(ev);

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

@@ -88,7 +88,7 @@ export declare class SplitviewComponent extends Resizable implements ISplitviewC
     focus(): void;
     movePanel(from: number, to: number): void;
     setVisible(panel: SplitviewPanel, visible: boolean): void;
-    setActive(view: SplitviewPanel, skipFocus?: boolean): void;
+    setActive(panel: SplitviewPanel, skipFocus?: boolean): void;
     removePanel(panel: SplitviewPanel, sizing?: Sizing): void;
     getPanel(id: string): SplitviewPanel | undefined;
     addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): SplitviewPanel;

package/dist/esm/splitview/splitviewComponent.js

@@ -86,19 +86,19 @@ export class SplitviewComponent extends Resizable {
         const index = this.panels.indexOf(panel);
         this.splitview.setViewVisible(index, visible);
     }
-    setActive(view, skipFocus) {
-        this._activePanel = view;
+    setActive(panel, skipFocus) {
+        this._activePanel = panel;
         this.panels
-            .filter((v) => v !== view)
+            .filter((v) => v !== panel)
             .forEach((v) => {
             v.api._onDidActiveChange.fire({ isActive: false });
             if (!skipFocus) {
                 v.focus();
             }
         });
-        view.api._onDidActiveChange.fire({ isActive: true });
+        panel.api._onDidActiveChange.fire({ isActive: true });
         if (!skipFocus) {
-            view.focus();
+            panel.focus();
         }
     }
     removePanel(panel, sizing) {

package/dist/esm/splitview/splitviewPanel.js

@@ -45,10 +45,10 @@ export class SplitviewPanel extends BasePanelView {
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
         this.api.initialize(this);
-        this.addDisposables(this._onDidChange, this.api.onDidHiddenChange((event) => {
-            const { isHidden } = event;
+        this.addDisposables(this._onDidChange, this.api.onWillVisibilityChange((event) => {
+            const { isVisible } = event;
             const { accessor } = this._params;
-            accessor.setVisible(this, !isHidden);
+            accessor.setVisible(this, isVisible);
         }), this.api.onActiveChange(() => {
             const { accessor } = this._params;
             accessor.setActive(this);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-core",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
   "keywords": [
     "splitview",