dockview 5.1.0 → 6.0.0

package/README.md

@@ -16,7 +16,7 @@
 
 ##
 
-![](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/splashscreen.gif?raw=true)
+![](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/splashscreenv2.png?raw=true)
 
 Please see the website: https://dockview.dev
 
@@ -28,6 +28,8 @@ Please see the website: https://dockview.dev
 -   Tab and Group docking / Drag n' Drop
 -   Popout Windows
 -   Floating Groups
+-   Edge Groups
+-   Tab Groups
 -   Extensive API
 -   Supports Shadow DOMs
 -   High test coverage

package/dist/cjs/dockview/dockview.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
-import { DockviewWillDropEvent, DockviewDidDropEvent, IWatermarkPanelProps, IDockviewHeaderActionsProps, IDockviewPanelHeaderProps, IDockviewPanelProps, DockviewOptions, DockviewReadyEvent } from 'dockview-core';
+import { DockviewWillDropEvent, DockviewDidDropEvent, IWatermarkPanelProps, IDockviewHeaderActionsProps, IDockviewPanelHeaderProps, IDockviewPanelProps, DockviewOptions, DockviewReadyEvent, BuiltInContextMenuItem, BuiltInChipContextMenuItem, ContextMenuItemConfig, GetTabContextMenuItemsParams, GetTabGroupChipContextMenuItemsParams, IContextMenuItemComponentProps } from 'dockview-core';
+import { IDockviewTabGroupChipProps } from './reactTabGroupChipPart';
+export interface ReactContextMenuItemConfig extends Omit<ContextMenuItemConfig, 'component'> {
+    component?: React.FunctionComponent<IContextMenuItemComponentProps>;
+}
 export interface IDockviewReactProps extends DockviewOptions {
     tabComponents?: Record<string, React.FunctionComponent<IDockviewPanelHeaderProps>>;
     components: Record<string, React.FunctionComponent<IDockviewPanelProps>>;
@@ -8,6 +12,9 @@ export interface IDockviewReactProps extends DockviewOptions {
     rightHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
     leftHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
     prefixHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
+    getTabContextMenuItems?: (params: GetTabContextMenuItemsParams) => (BuiltInContextMenuItem | ReactContextMenuItemConfig)[];
+    getTabGroupChipContextMenuItems?: (params: GetTabGroupChipContextMenuItemsParams) => (BuiltInChipContextMenuItem | ReactContextMenuItemConfig)[];
+    tabGroupChipComponent?: React.FunctionComponent<IDockviewTabGroupChipProps>;
     onReady: (event: DockviewReadyEvent) => void;
     onDidDrop?: (event: DockviewDidDropEvent) => void;
     onWillDrop?: (event: DockviewWillDropEvent) => void;

package/dist/cjs/dockview/dockview.js

@@ -38,6 +38,8 @@ var reactHeaderPart_1 = require("./reactHeaderPart");
 var react_2 = require("../react");
 var reactWatermarkPart_1 = require("./reactWatermarkPart");
 var headerActionsRenderer_1 = require("./headerActionsRenderer");
+var reactContextMenuItemPart_1 = require("./reactContextMenuItemPart");
+var reactTabGroupChipPart_1 = require("./reactTabGroupChipPart");
 function createGroupControlElement(component, store) {
     return component
         ? function (groupPanel) {
@@ -112,8 +114,23 @@ exports.DockviewReact = react_1.default.forwardRef(function (props, ref) {
             defaultTabComponent: props.defaultTabComponent
                 ? DEFAULT_REACT_TAB
                 : undefined,
+            createContextMenuItemComponent: function (options) {
+                if (!options.component) {
+                    return undefined;
+                }
+                return new reactContextMenuItemPart_1.ReactContextMenuItemPart(options.id, options.component, { addPortal: addPortal });
+            },
         };
-        var api = (0, dockview_core_1.createDockview)(domRef.current, __assign(__assign({}, extractCoreOptions(props)), frameworkOptions));
+        var coreOptions = extractCoreOptions(props);
+        if (props.tabGroupChipComponent) {
+            var chipComponent_1 = props.tabGroupChipComponent;
+            coreOptions.createTabGroupChipComponent = function () {
+                return new reactTabGroupChipPart_1.ReactTabGroupChipPart(chipComponent_1, {
+                    addPortal: addPortal,
+                });
+            };
+        }
+        var api = (0, dockview_core_1.createDockview)(domRef.current, __assign(__assign({}, coreOptions), frameworkOptions));
         var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
         api.layout(clientWidth, clientHeight);
         if (props.onReady) {
@@ -155,6 +172,20 @@ exports.DockviewReact = react_1.default.forwardRef(function (props, ref) {
             disposable.dispose();
         };
     }, [props.onWillDrop]);
+    react_1.default.useEffect(function () {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createTabGroupChipComponent: props.tabGroupChipComponent
+                ? function () {
+                    return new reactTabGroupChipPart_1.ReactTabGroupChipPart(props.tabGroupChipComponent, {
+                        addPortal: addPortal,
+                    });
+                }
+                : undefined,
+        });
+    }, [props.tabGroupChipComponent]);
     react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
             return;

package/dist/cjs/dockview/headerActionsRenderer.d.ts

@@ -20,4 +20,5 @@ export declare class ReactHeaderActionsRendererPart implements IHeaderActionsRen
     private updatePanels;
     private updateActivePanel;
     private updateGroupActive;
+    private updateLocation;
 }

package/dist/cjs/dockview/headerActionsRenderer.js

@@ -38,6 +38,8 @@ var ReactHeaderActionsRendererPart = /** @class */ (function () {
             _this.updateActivePanel();
         }), parameters.api.onDidActiveChange(function () {
             _this.updateGroupActive();
+        }), parameters.api.onDidLocationChange(function (event) {
+            _this.updateLocation(event.location);
         }));
         this._part = new react_1.ReactPart(this.element, this.reactPortalStore, this.component, {
             api: parameters.api,
@@ -47,6 +49,7 @@ var ReactHeaderActionsRendererPart = /** @class */ (function () {
             isGroupActive: this._group.api.isActive,
             group: this._group,
             headerPosition: this._group.model.headerPosition,
+            location: parameters.api.location,
         });
     };
     ReactHeaderActionsRendererPart.prototype.dispose = function () {
@@ -75,6 +78,9 @@ var ReactHeaderActionsRendererPart = /** @class */ (function () {
             },
         });
     };
+    ReactHeaderActionsRendererPart.prototype.updateLocation = function (location) {
+        this.update({ params: { location: location } });
+    };
     return ReactHeaderActionsRendererPart;
 }());
 exports.ReactHeaderActionsRendererPart = ReactHeaderActionsRendererPart;

package/dist/cjs/dockview/reactContextMenuItemPart.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ReactPortalStore } from '../react';
+import { IContextMenuItemRenderer, IContextMenuItemComponentProps } from 'dockview-core';
+export declare class ReactContextMenuItemPart implements IContextMenuItemRenderer {
+    readonly id: string;
+    private readonly component;
+    private readonly reactPortalStore;
+    private readonly _element;
+    private part?;
+    get element(): HTMLElement;
+    constructor(id: string, component: React.FunctionComponent<IContextMenuItemComponentProps>, reactPortalStore: ReactPortalStore);
+    init(props: IContextMenuItemComponentProps): void;
+    dispose(): void;
+}

package/dist/cjs/dockview/reactContextMenuItemPart.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactContextMenuItemPart = void 0;
+var react_1 = require("../react");
+var ReactContextMenuItemPart = /** @class */ (function () {
+    function ReactContextMenuItemPart(id, component, reactPortalStore) {
+        this.id = id;
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._element = document.createElement('div');
+        this._element.className = 'dv-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
+    }
+    Object.defineProperty(ReactContextMenuItemPart.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ReactContextMenuItemPart.prototype.init = function (props) {
+        this.part = new react_1.ReactPart(this._element, this.reactPortalStore, this.component, props);
+    };
+    ReactContextMenuItemPart.prototype.dispose = function () {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    return ReactContextMenuItemPart;
+}());
+exports.ReactContextMenuItemPart = ReactContextMenuItemPart;

package/dist/cjs/dockview/reactTabGroupChipPart.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ReactPortalStore } from '../react';
+import { ITabGroupChipRenderer, ITabGroup, DockviewApi } from 'dockview-core';
+export interface IDockviewTabGroupChipProps {
+    tabGroup: ITabGroup;
+    api: DockviewApi;
+}
+export declare class ReactTabGroupChipPart implements ITabGroupChipRenderer {
+    private readonly component;
+    private readonly reactPortalStore;
+    private readonly _element;
+    private part?;
+    get element(): HTMLElement;
+    constructor(component: React.FunctionComponent<IDockviewTabGroupChipProps>, reactPortalStore: ReactPortalStore);
+    init(params: {
+        tabGroup: ITabGroup;
+        api: DockviewApi;
+    }): void;
+    update(params: {
+        tabGroup: ITabGroup;
+    }): void;
+    dispose(): void;
+}

package/dist/cjs/dockview/reactTabGroupChipPart.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactTabGroupChipPart = void 0;
+var react_1 = require("../react");
+var ReactTabGroupChipPart = /** @class */ (function () {
+    function ReactTabGroupChipPart(component, reactPortalStore) {
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._element = document.createElement('div');
+        this._element.className = 'dv-react-part';
+        this._element.style.display = 'inline-flex';
+    }
+    Object.defineProperty(ReactTabGroupChipPart.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ReactTabGroupChipPart.prototype.init = function (params) {
+        this.part = new react_1.ReactPart(this._element, this.reactPortalStore, this.component, {
+            tabGroup: params.tabGroup,
+            api: params.api,
+        });
+    };
+    ReactTabGroupChipPart.prototype.update = function (params) {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ tabGroup: params.tabGroup });
+    };
+    ReactTabGroupChipPart.prototype.dispose = function () {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    return ReactTabGroupChipPart;
+}());
+exports.ReactTabGroupChipPart = ReactTabGroupChipPart;

package/dist/cjs/gridview/view.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GridviewPanel, IFrameworkPart } from 'dockview-core';
 import { ReactPortalStore } from '../react';
 import { IGridviewPanelProps } from './gridview';

package/dist/cjs/index.d.ts

@@ -1,6 +1,7 @@
 export * from 'dockview-core';
 export * from './dockview/dockview';
 export * from './dockview/defaultTab';
+export { IDockviewTabGroupChipProps } from './dockview/reactTabGroupChipPart';
 export * from './splitview/splitview';
 export * from './gridview/gridview';
 export * from './paneview/paneview';

package/dist/cjs/react.js

@@ -39,7 +39,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isReactComponent = exports.usePortalsLifecycle = exports.ReactPart = exports.ReactPartContext = void 0;
+exports.usePortalsLifecycle = exports.ReactPart = exports.ReactPartContext = void 0;
+exports.isReactComponent = isReactComponent;
 var react_1 = __importDefault(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var dockview_core_1 = require("dockview-core");
@@ -52,7 +53,7 @@ var dockview_core_1 = require("dockview-core");
  * component
  */
 var ReactComponentBridge = function (props, ref) {
-    var _a = __read(react_1.default.useState(), 2), _ = _a[0], triggerRender = _a[1];
+    var _a = __read(react_1.default.useState(0), 2), triggerRender = _a[1];
     var _props = react_1.default.useRef(props.componentProps);
     react_1.default.useImperativeHandle(ref, function () { return ({
         update: function (componentProps) {
@@ -62,8 +63,12 @@ var ReactComponentBridge = function (props, ref) {
              * trigger a re-render.
              * we use this rather than updating through a prop since we can
              * pass a ref into the vanilla-js world.
+             *
+             * Use a monotonic counter rather than `Date.now()` so two
+             * updates within the same millisecond still produce distinct
+             * state values and avoid React's bailout.
              */
-            triggerRender(Date.now());
+            triggerRender(function (n) { return n + 1; });
         },
     }); }, []);
     return react_1.default.createElement(props.component, _props.current);
@@ -176,4 +181,3 @@ function isReactComponent(component) {
     return (typeof component === 'function' /** Functional Componnts */ ||
         !!(component === null || component === void 0 ? void 0 : component.$$typeof) /** React.memo(...) Components */);
 }
-exports.isReactComponent = isReactComponent;

package/dist/cjs/splitview/view.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SplitviewPanel } from 'dockview-core';
 import { ReactPart, ReactPortalStore } from '../react';
 import { ISplitviewPanelProps } from './splitview';