Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

dockview

Package Overview
Dependencies
Maintainers
1
Versions
151
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dockview - npm Package Compare versions

Comparing version 1.7.0 to 1.7.1

./dist/cjs/index.js

1

dist/cjs/dockview/defaultTab.d.ts

@@ -5,1 +5,2 @@ import { IDockviewPanelHeaderProps } from './dockview';

export declare const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps>;
//# sourceMappingURL=defaultTab.d.ts.map

@@ -0,0 +0,0 @@ "use strict";

10

dist/cjs/dockview/dockview.d.ts

@@ -6,7 +6,11 @@ import * as React from 'react';

import { IDockviewGroupControlProps } from './groupControlsRenderer';
export interface IGroupPanelBaseProps<T extends {} = Record<string, any>> extends PanelParameters<T> {
export interface IGroupPanelBaseProps<T extends {
[index: string]: any;
} = any> extends PanelParameters<T> {
api: DockviewPanelApi;
containerApi: DockviewApi;
}
export type IDockviewPanelHeaderProps<T extends {} = Record<string, any>> = IGroupPanelBaseProps<T>;
export type IDockviewPanelHeaderProps<T extends {
[index: string]: any;
} = any> = IGroupPanelBaseProps<T>;
export type IDockviewPanelProps<T extends {

@@ -23,3 +27,2 @@ [index: string]: any;

watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
tabHeight?: number;
onDidDrop?: (event: DockviewDropEvent) => void;

@@ -35,1 +38,2 @@ showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;

export declare const DockviewReact: React.ForwardRefExoticComponent<IDockviewReactProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=dockview.d.ts.map

@@ -64,18 +64,7 @@ "use strict";

React.useEffect(function () {
if (props.disableAutoResizing) {
if (!domRef.current) {
return function () {
//
// noop
};
}
var watcher = (0, dockview_core_1.watchElementResize)(domRef.current, function (entry) {
var _a;
var _b = entry.contentRect, width = _b.width, height = _b.height;
(_a = dockviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
});
return function () {
watcher.dispose();
};
}, [props.disableAutoResizing]);
React.useEffect(function () {
var _a;
var factory = {

@@ -104,3 +93,2 @@ content: {

};
var element = document.createElement('div');
var frameworkTabComponents = props.tabComponents || {};

@@ -111,7 +99,7 @@ if (props.defaultTabComponent) {

}
var dockview = new dockview_core_1.DockviewComponent(element, {
var dockview = new dockview_core_1.DockviewComponent({
parentElement: domRef.current,
frameworkComponentFactory: factory,
frameworkComponents: props.components,
frameworkTabComponents: frameworkTabComponents,
tabHeight: props.tabHeight,
watermarkFrameworkComponent: props.watermarkComponent,

@@ -128,4 +116,3 @@ defaultTabComponent: props.defaultTabComponent

});
(_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
dockview.layout(clientWidth, clientHeight);

@@ -138,3 +125,2 @@ if (props.onReady) {

dockview.dispose();
element.remove();
};

@@ -141,0 +127,0 @@ }, []);

@@ -33,1 +33,2 @@ import * as React from 'react';

}
//# sourceMappingURL=groupControlsRenderer.d.ts.map

@@ -0,0 +0,0 @@ "use strict";

@@ -23,1 +23,2 @@ import * as React from 'react';

}
//# sourceMappingURL=reactContentPart.d.ts.map

@@ -0,0 +0,0 @@ "use strict";

@@ -19,1 +19,2 @@ import * as React from 'react';

}
//# sourceMappingURL=reactHeaderPart.d.ts.map

@@ -0,0 +0,0 @@ "use strict";

@@ -25,1 +25,2 @@ import * as React from 'react';

}
//# sourceMappingURL=reactWatermarkPart.d.ts.map

@@ -0,0 +0,0 @@ "use strict";

@@ -23,1 +23,2 @@ import * as React from 'react';

export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=gridview.d.ts.map

@@ -53,20 +53,9 @@ "use strict";

React.useEffect(function () {
if (props.disableAutoResizing) {
if (!domRef.current) {
return function () {
//
// noop
};
}
var watcher = (0, dockview_core_1.watchElementResize)(domRef.current, function (entry) {
var _a;
var _b = entry.contentRect, width = _b.width, height = _b.height;
(_a = gridviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
});
return function () {
watcher.dispose();
};
}, [props.disableAutoResizing]);
React.useEffect(function () {
var _a;
var element = document.createElement('div');
var gridview = new dockview_core_1.GridviewComponent(element, {
var gridview = new dockview_core_1.GridviewComponent({
parentElement: domRef.current,
proportionalLayout: typeof props.proportionalLayout === 'boolean'

@@ -88,4 +77,3 @@ ? props.proportionalLayout

});
(_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(gridview.element);
var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
gridview.layout(clientWidth, clientHeight);

@@ -98,3 +86,2 @@ if (props.onReady) {

gridview.dispose();
element.remove();
};

@@ -101,0 +88,0 @@ }, []);

@@ -11,1 +11,2 @@ /// <reference types="react" />

}
//# sourceMappingURL=view.d.ts.map

@@ -0,0 +0,0 @@ "use strict";

@@ -11,1 +11,2 @@ export * from 'dockview-core';

export * from './react';
//# sourceMappingURL=index.d.ts.map

@@ -0,0 +0,0 @@ "use strict";

@@ -25,1 +25,2 @@ import * as React from 'react';

export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=paneview.d.ts.map

@@ -64,17 +64,2 @@ "use strict";

React.useEffect(function () {
if (props.disableAutoResizing) {
return function () {
//
};
}
var watcher = (0, dockview_core_1.watchElementResize)(domRef.current, function (entry) {
var _a;
var _b = entry.contentRect, width = _b.width, height = _b.height;
(_a = paneviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
});
return function () {
watcher.dispose();
};
}, [props.disableAutoResizing]);
React.useEffect(function () {
var createComponent = function (id, _componentId, component) {

@@ -85,3 +70,4 @@ return new view_1.PanePanelSection(id, component, {

};
var paneview = new dockview_core_1.PaneviewComponent(domRef.current, {
var paneview = new dockview_core_1.PaneviewComponent({
parentElement: domRef.current,
frameworkComponents: props.components,

@@ -88,0 +74,0 @@ components: {},

@@ -20,1 +20,2 @@ import * as React from 'react';

}
//# sourceMappingURL=view.d.ts.map

@@ -0,0 +0,0 @@ "use strict";

@@ -36,1 +36,2 @@ import * as React from 'react';

export {};
//# sourceMappingURL=react.d.ts.map

@@ -0,0 +0,0 @@ "use strict";

@@ -23,1 +23,2 @@ import * as React from 'react';

export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=splitview.d.ts.map

@@ -53,18 +53,4 @@ "use strict";

React.useEffect(function () {
if (props.disableAutoResizing) {
return function () {
//
};
}
var watcher = (0, dockview_core_1.watchElementResize)(domRef.current, function (entry) {
var _a;
var _b = entry.contentRect, width = _b.width, height = _b.height;
(_a = splitviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
});
return function () {
watcher.dispose();
};
}, [props.disableAutoResizing]);
React.useEffect(function () {
var splitview = new dockview_core_1.SplitviewComponent(domRef.current, {
var splitview = new dockview_core_1.SplitviewComponent({
parentElement: domRef.current,
orientation: props.orientation || dockview_core_1.Orientation.HORIZONTAL,

@@ -71,0 +57,0 @@ frameworkComponents: props.components,

@@ -11,1 +11,2 @@ /// <reference types="react" />

}
//# sourceMappingURL=view.d.ts.map

@@ -0,0 +0,0 @@ "use strict";

/// <reference types="react" />
export declare const CloseButton: () => JSX.Element;
export declare const ExpandMore: () => JSX.Element;
//# sourceMappingURL=svg.d.ts.map

@@ -0,0 +0,0 @@ "use strict";

@@ -8,1 +8,2 @@ import * as React from 'react';

}
//# sourceMappingURL=types.d.ts.map
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=types.js.map

@@ -5,1 +5,2 @@ import { IDockviewPanelHeaderProps } from './dockview';

export declare const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps>;
//# sourceMappingURL=defaultTab.d.ts.map

@@ -35,1 +35,2 @@ var __rest = (this && this.__rest) || function (s, e) {

};
//# sourceMappingURL=defaultTab.js.map

@@ -6,7 +6,11 @@ import * as React from 'react';

import { IDockviewGroupControlProps } from './groupControlsRenderer';
export interface IGroupPanelBaseProps<T extends {} = Record<string, any>> extends PanelParameters<T> {
export interface IGroupPanelBaseProps<T extends {
[index: string]: any;
} = any> extends PanelParameters<T> {
api: DockviewPanelApi;
containerApi: DockviewApi;
}
export type IDockviewPanelHeaderProps<T extends {} = Record<string, any>> = IGroupPanelBaseProps<T>;
export type IDockviewPanelHeaderProps<T extends {
[index: string]: any;
} = any> = IGroupPanelBaseProps<T>;
export type IDockviewPanelProps<T extends {

@@ -23,3 +27,2 @@ [index: string]: any;

watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
tabHeight?: number;
onDidDrop?: (event: DockviewDropEvent) => void;

@@ -35,1 +38,2 @@ showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;

export declare const DockviewReact: React.ForwardRefExoticComponent<IDockviewReactProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=dockview.d.ts.map
import * as React from 'react';
import { DockviewComponent, DockviewApi, watchElementResize, } from 'dockview-core';
import { DockviewComponent, DockviewApi, } from 'dockview-core';
import { ReactPanelContentPart } from './reactContentPart';

@@ -22,18 +22,7 @@ import { ReactPanelHeaderPart } from './reactHeaderPart';

React.useEffect(() => {
if (props.disableAutoResizing) {
if (!domRef.current) {
return () => {
//
// noop
};
}
const watcher = watchElementResize(domRef.current, (entry) => {
var _a;
const { width, height } = entry.contentRect;
(_a = dockviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
});
return () => {
watcher.dispose();
};
}, [props.disableAutoResizing]);
React.useEffect(() => {
var _a;
const factory = {

@@ -62,3 +51,2 @@ content: {

};
const element = document.createElement('div');
const frameworkTabComponents = props.tabComponents || {};

@@ -69,7 +57,7 @@ if (props.defaultTabComponent) {

}
const dockview = new DockviewComponent(element, {
const dockview = new DockviewComponent({
parentElement: domRef.current,
frameworkComponentFactory: factory,
frameworkComponents: props.components,
frameworkTabComponents,
tabHeight: props.tabHeight,
watermarkFrameworkComponent: props.watermarkComponent,

@@ -86,3 +74,2 @@ defaultTabComponent: props.defaultTabComponent

});
(_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
const { clientWidth, clientHeight } = domRef.current;

@@ -96,3 +83,2 @@ dockview.layout(clientWidth, clientHeight);

dockview.dispose();
element.remove();
};

@@ -174,1 +160,2 @@ }, []);

DockviewReact.displayName = 'DockviewComponent';
//# sourceMappingURL=dockview.js.map

@@ -33,1 +33,2 @@ import * as React from 'react';

}
//# sourceMappingURL=groupControlsRenderer.d.ts.map

@@ -69,1 +69,2 @@ import { ReactPart } from '../react';

}
//# sourceMappingURL=groupControlsRenderer.js.map

@@ -23,1 +23,2 @@ import * as React from 'react';

}
//# sourceMappingURL=reactContentPart.d.ts.map

@@ -42,1 +42,2 @@ import { ReactPart } from '../react';

}
//# sourceMappingURL=reactContentPart.js.map

@@ -19,1 +19,2 @@ import * as React from 'react';

}
//# sourceMappingURL=reactHeaderPart.d.ts.map

@@ -35,1 +35,2 @@ import { ReactPart } from '../react';

}
//# sourceMappingURL=reactHeaderPart.js.map

@@ -25,1 +25,2 @@ import * as React from 'react';

}
//# sourceMappingURL=reactWatermarkPart.d.ts.map

@@ -45,1 +45,2 @@ import { ReactPart } from '../react';

}
//# sourceMappingURL=reactWatermarkPart.js.map

@@ -23,1 +23,2 @@ import * as React from 'react';

export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=gridview.d.ts.map
import * as React from 'react';
import { GridviewComponent, Orientation, GridviewApi, watchElementResize, } from 'dockview-core';
import { GridviewComponent, Orientation, GridviewApi, } from 'dockview-core';
import { ReactGridPanelView } from './view';

@@ -11,20 +11,9 @@ import { usePortalsLifecycle } from '../react';

React.useEffect(() => {
if (props.disableAutoResizing) {
if (!domRef.current) {
return () => {
//
// noop
};
}
const watcher = watchElementResize(domRef.current, (entry) => {
var _a;
const { width, height } = entry.contentRect;
(_a = gridviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
});
return () => {
watcher.dispose();
};
}, [props.disableAutoResizing]);
React.useEffect(() => {
var _a;
const element = document.createElement('div');
const gridview = new GridviewComponent(element, {
const gridview = new GridviewComponent({
parentElement: domRef.current,
proportionalLayout: typeof props.proportionalLayout === 'boolean'

@@ -46,3 +35,2 @@ ? props.proportionalLayout

});
(_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(gridview.element);
const { clientWidth, clientHeight } = domRef.current;

@@ -56,3 +44,2 @@ gridview.layout(clientWidth, clientHeight);

gridview.dispose();
element.remove();
};

@@ -71,1 +58,2 @@ }, []);

GridviewReact.displayName = 'GridviewComponent';
//# sourceMappingURL=gridview.js.map

@@ -11,1 +11,2 @@ /// <reference types="react" />

}
//# sourceMappingURL=view.d.ts.map

@@ -18,1 +18,2 @@ import { GridviewApi, GridviewPanel, } from 'dockview-core';

}
//# sourceMappingURL=view.js.map

@@ -11,1 +11,2 @@ export * from 'dockview-core';

export * from './react';
//# sourceMappingURL=index.d.ts.map

@@ -9,1 +9,2 @@ export * from 'dockview-core';

export * from './react';
//# sourceMappingURL=index.js.map

@@ -25,1 +25,2 @@ import * as React from 'react';

export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=paneview.d.ts.map
import * as React from 'react';
import { PaneviewComponent, PaneviewApi, watchElementResize, } from 'dockview-core';
import { PaneviewComponent, PaneviewApi, } from 'dockview-core';
import { usePortalsLifecycle } from '../react';

@@ -11,21 +11,7 @@ import { PanePanelSection } from './view';

React.useEffect(() => {
if (props.disableAutoResizing) {
return () => {
//
};
}
const watcher = watchElementResize(domRef.current, (entry) => {
var _a;
const { width, height } = entry.contentRect;
(_a = paneviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
});
return () => {
watcher.dispose();
};
}, [props.disableAutoResizing]);
React.useEffect(() => {
const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
addPortal,
});
const paneview = new PaneviewComponent(domRef.current, {
const paneview = new PaneviewComponent({
parentElement: domRef.current,
frameworkComponents: props.components,

@@ -100,1 +86,2 @@ components: {},

PaneviewReact.displayName = 'PaneviewComponent';
//# sourceMappingURL=paneview.js.map

@@ -20,1 +20,2 @@ import * as React from 'react';

}
//# sourceMappingURL=view.d.ts.map

@@ -36,1 +36,2 @@ import { ReactPart } from '../react';

}
//# sourceMappingURL=view.js.map

@@ -36,1 +36,2 @@ import * as React from 'react';

export {};
//# sourceMappingURL=react.d.ts.map

@@ -128,1 +128,2 @@ import * as React from 'react';

}
//# sourceMappingURL=react.js.map

@@ -23,1 +23,2 @@ import * as React from 'react';

export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=splitview.d.ts.map
import * as React from 'react';
import { SplitviewApi, SplitviewComponent, Orientation, watchElementResize, } from 'dockview-core';
import { SplitviewApi, SplitviewComponent, Orientation, } from 'dockview-core';
import { usePortalsLifecycle } from '../react';

@@ -11,18 +11,4 @@ import { ReactPanelView } from './view';

React.useEffect(() => {
if (props.disableAutoResizing) {
return () => {
//
};
}
const watcher = watchElementResize(domRef.current, (entry) => {
var _a;
const { width, height } = entry.contentRect;
(_a = splitviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
});
return () => {
watcher.dispose();
};
}, [props.disableAutoResizing]);
React.useEffect(() => {
const splitview = new SplitviewComponent(domRef.current, {
const splitview = new SplitviewComponent({
parentElement: domRef.current,
orientation: props.orientation || Orientation.HORIZONTAL,

@@ -65,1 +51,2 @@ frameworkComponents: props.components,

SplitviewReact.displayName = 'SplitviewComponent';
//# sourceMappingURL=splitview.js.map

@@ -11,1 +11,2 @@ /// <reference types="react" />

}
//# sourceMappingURL=view.d.ts.map

@@ -18,1 +18,2 @@ import { SplitviewApi, SplitviewPanel, } from 'dockview-core';

}
//# sourceMappingURL=view.js.map
/// <reference types="react" />
export declare const CloseButton: () => JSX.Element;
export declare const ExpandMore: () => JSX.Element;
//# sourceMappingURL=svg.d.ts.map

@@ -8,1 +8,2 @@ import * as React from 'react';

};
//# sourceMappingURL=svg.js.map

@@ -8,1 +8,2 @@ import * as React from 'react';

}
//# sourceMappingURL=types.d.ts.map
export {};
//# sourceMappingURL=types.js.map
{
"name": "dockview",
"version": "1.7.0",
"version": "1.7.1",
"description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",

@@ -23,3 +23,3 @@ "main": "./dist/cjs/index.js",

"build": "npm run build:ci && npm run build:modulefiles",
"clean": "rimraf dist/ .build/",
"clean": "rimraf dist/ .build/ .rollup.cache/",
"docs": "typedoc",

@@ -60,6 +60,7 @@ "prepublishOnly": "npm run rebuild && npm run test",

"dependencies": {
"dockview-core": "^1.7.0"
"dockview-core": "^1.7.1"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-terser": "^0.4.0",
"@rollup/plugin-typescript": "^11.0.0",

@@ -76,6 +77,5 @@ "@testing-library/react": "^13.4.0",

"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-terser": "^7.0.2",
"typedoc": "^0.23.25"
},
"gitHead": "5e15af4ad508f1096a9d8c37812f3b0a7dc62fc7"
"gitHead": "302c26984937a7943e2a5b29a058834350a8fd33"
}

@@ -20,4 +20,2 @@ <div align="center">

Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
## Features

@@ -33,7 +31,7 @@

This project was inspired by many popular IDE editors. Some parts of the core resizable panelling are inspired by code found in the VSCode codebase, [splitview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/splitview) and [gridview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid).
Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
## Quick start
Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview). Please see the [Getting Started Guide](https://mathuo.github.io/dockview/docs/).
Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview).

@@ -40,0 +38,0 @@ ```

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc