dockview-react 2.1.3 → 3.0.0

package/dist/dockview-react.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 2.1.3
+ * @version 3.0.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -130,6 +130,17 @@ class DockviewEvent {
         this._defaultPrevented = true;
     }
 }
+class AcceptableEvent {
+    constructor() {
+        this._isAccepted = false;
+    }
+    get isAccepted() {
+        return this._isAccepted;
+    }
+    accept() {
+        this._isAccepted = true;
+    }
+}
 class LeakageMonitor {
     constructor() {
         this.events = new Map();
@@ -1521,6 +1532,23 @@ class Splitview {
     }
 }
 
+const PROPERTY_KEYS_SPLITVIEW = (() => {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    const properties = {
+        orientation: undefined,
+        descriptor: undefined,
+        proportionalLayout: undefined,
+        styles: undefined,
+        margin: undefined,
+        disableAutoResizing: undefined,
+        className: undefined,
+    };
+    return Object.keys(properties);
+})();
+
 class Paneview extends CompositeDisposable {
     get onDidAddView() {
         return this.splitview.onDidAddView;
@@ -2650,6 +2678,21 @@ class Gridview {
     }
 }
 
+const PROPERTY_KEYS_GRIDVIEW = (() => {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    const properties = {
+        disableAutoResizing: undefined,
+        proportionalLayout: undefined,
+        orientation: undefined,
+        hideBorders: undefined,
+        className: undefined,
+    };
+    return Object.keys(properties);
+})();
+
 class Resizable extends CompositeDisposable {
     get element() {
         return this._element;
@@ -3127,15 +3170,10 @@ class PaneviewApi {
      * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
      */
     get onDidDrop() {
-        const emitter = new Emitter();
-        const disposable = this.component.onDidDrop((e) => {
-            emitter.fire(Object.assign(Object.assign({}, e), { api: this }));
-        });
-        emitter.dispose = () => {
-            disposable.dispose();
-            emitter.dispose();
-        };
-        return emitter.event;
+        return this.component.onDidDrop;
+    }
+    get onUnhandledDragOverEvent() {
+        return this.component.onUnhandledDragOverEvent;
     }
     constructor(component) {
         this.component = component;
@@ -4062,6 +4100,28 @@ function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold)
     return 'center';
 }
 
+const PROPERTY_KEYS_PANEVIEW = (() => {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    const properties = {
+        disableAutoResizing: undefined,
+        disableDnd: undefined,
+        className: undefined,
+    };
+    return Object.keys(properties);
+})();
+class PaneviewUnhandledDragOverEvent extends AcceptableEvent {
+    constructor(nativeEvent, position, getData, panel) {
+        super();
+        this.nativeEvent = nativeEvent;
+        this.position = position;
+        this.getData = getData;
+        this.panel = panel;
+    }
+}
+
 class WillFocusEvent extends DockviewEvent {
     constructor() {
         super();
@@ -4485,6 +4545,9 @@ class DraggablePaneviewPanel extends PaneviewPanel {
         this.accessor = accessor;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
+        this._onUnhandledDragOverEvent = new Emitter();
+        this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+        this.addDisposables(this._onDidDrop, this._onUnhandledDragOverEvent);
         if (!disableDnd) {
             this.initDragFeatures();
         }
@@ -4511,7 +4574,7 @@ class DraggablePaneviewPanel extends PaneviewPanel {
             overlayModel: {
                 activationSize: { type: 'percentage', value: 50 },
             },
-            canDisplayOverlay: (event) => {
+            canDisplayOverlay: (event, position) => {
                 const data = getPaneData();
                 if (data) {
                     if (data.paneId !== this.id &&
@@ -4519,14 +4582,9 @@ class DraggablePaneviewPanel extends PaneviewPanel {
                         return true;
                     }
                 }
-                if (this.accessor.options.showDndOverlay) {
-                    return this.accessor.options.showDndOverlay({
-                        nativeEvent: event,
-                        getData: getPaneData,
-                        panel: this,
-                    });
-                }
-                return false;
+                const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
+                this._onUnhandledDragOverEvent.fire(firedEvent);
+                return firedEvent.isAccepted;
             },
         });
         this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
@@ -4981,15 +5039,7 @@ class TabsContainer extends CompositeDisposable {
         this._element.appendChild(this.leftActionsContainer);
         this._element.appendChild(this.voidContainer.element);
         this._element.appendChild(this.rightActionsContainer);
-        this.addDisposables(this.accessor.onDidAddPanel((e) => {
-            if (e.api.group === this.group) {
-                toggleClass(this._element, 'dv-single-tab', this.size === 1);
-            }
-        }), this.accessor.onDidRemovePanel((e) => {
-            if (e.api.group === this.group) {
-                toggleClass(this._element, 'dv-single-tab', this.size === 1);
-            }
-        }), this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
+        this.addDisposables(this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
             this._onGroupDragStart.fire({
                 nativeEvent: event,
                 group: this.group,
@@ -5034,20 +5084,6 @@ class TabsContainer extends CompositeDisposable {
     setActive(_isGroupActive) {
         // noop
     }
-    addTab(tab, index = this.tabs.length) {
-        if (index < 0 || index > this.tabs.length) {
-            throw new Error('invalid location');
-        }
-        this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
-        this.tabs = [
-            ...this.tabs.slice(0, index),
-            tab,
-            ...this.tabs.slice(index),
-        ];
-        if (this.selectedIndex < 0) {
-            this.selectedIndex = index;
-        }
-    }
     delete(id) {
         const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
         const tabToRemove = this.tabs.splice(index, 1)[0];
@@ -5055,6 +5091,7 @@ class TabsContainer extends CompositeDisposable {
         disposable.dispose();
         value.dispose();
         value.element.remove();
+        this.updateClassnames();
     }
     setActivePanel(panel) {
         this.tabs.forEach((tab) => {
@@ -5123,25 +5160,37 @@ class TabsContainer extends CompositeDisposable {
         }
         this.tabs = [];
     }
+    addTab(tab, index = this.tabs.length) {
+        if (index < 0 || index > this.tabs.length) {
+            throw new Error('invalid location');
+        }
+        this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
+        this.tabs = [
+            ...this.tabs.slice(0, index),
+            tab,
+            ...this.tabs.slice(index),
+        ];
+        if (this.selectedIndex < 0) {
+            this.selectedIndex = index;
+        }
+        this.updateClassnames();
+    }
+    updateClassnames() {
+        toggleClass(this._element, 'dv-single-tab', this.size === 1);
+    }
 }
 
-class DockviewUnhandledDragOverEvent {
-    get isAccepted() {
-        return this._isAccepted;
-    }
+class DockviewUnhandledDragOverEvent extends AcceptableEvent {
     constructor(nativeEvent, target, position, getData, group) {
+        super();
         this.nativeEvent = nativeEvent;
         this.target = target;
         this.position = position;
         this.getData = getData;
         this.group = group;
-        this._isAccepted = false;
-    }
-    accept() {
-        this._isAccepted = true;
     }
 }
-const PROPERTY_KEYS = (() => {
+const PROPERTY_KEYS_DOCKVIEW = (() => {
     /**
      * by readong the keys from an empty value object TypeScript will error
      * when we add or remove new properties to `DockviewOptions`
@@ -7641,10 +7690,6 @@ class DockviewComponent extends BaseGrid {
         this._api = new DockviewApi(this);
         this.updateWatermark();
     }
-    dispose() {
-        this.clear(); // explicitly clear the layout before cleaning up
-        super.dispose();
-    }
     setVisible(panel, visible) {
         switch (panel.api.location.type) {
             case 'grid':
@@ -7828,30 +7873,29 @@ class DockviewComponent extends BaseGrid {
                     }
                 }
                 else if (this.getPanel(group.id)) {
-                    const removedGroup = group;
+                    group.model.renderContainer =
+                        this.overlayRenderContainer;
+                    returnedGroup = group;
                     if (floatingBox) {
-                        this.addFloatingGroup(removedGroup, {
+                        this.addFloatingGroup(group, {
                             height: floatingBox.height,
                             width: floatingBox.width,
                             position: floatingBox,
                         });
                     }
                     else {
-                        this.doRemoveGroup(removedGroup, {
+                        this.doRemoveGroup(group, {
                             skipDispose: true,
                             skipActive: true,
                             skipPopoutReturn: true,
                         });
-                        removedGroup.model.renderContainer =
-                            this.overlayRenderContainer;
-                        removedGroup.model.location = { type: 'grid' };
-                        returnedGroup = removedGroup;
+                        group.model.location = { type: 'grid' };
                         this.movingLock(() => {
                             // suppress group add events since the group already exists
-                            this.doAddGroup(removedGroup, [0]);
+                            this.doAddGroup(group, [0]);
                         });
                     }
-                    this.doSetGroupAndPanelActive(removedGroup);
+                    this.doSetGroupAndPanelActive(group);
                 }
             }));
             this._popoutGroups.push(value);
@@ -8992,31 +9036,6 @@ class DockviewComponent extends BaseGrid {
     }
 }
 
-function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
-    const Component = typeof componentName === 'string'
-        ? components[componentName]
-        : undefined;
-    const FrameworkComponent = typeof componentName === 'string'
-        ? frameworkComponents[componentName]
-        : undefined;
-    if (Component && FrameworkComponent) {
-        throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
-    }
-    if (FrameworkComponent) {
-        if (!createFrameworkComponent) {
-            throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
-        }
-        return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
-    }
-    if (!Component) {
-        if (fallback) {
-            return fallback();
-        }
-        throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
-    }
-    return new Component(id, componentName);
-}
-
 class GridviewComponent extends BaseGrid {
     get orientation() {
         return this.gridview.orientation;
@@ -9034,10 +9053,13 @@ class GridviewComponent extends BaseGrid {
         this._deserializer = value;
     }
     constructor(parentElement, options) {
+        var _a;
         super(parentElement, {
-            proportionalLayout: options.proportionalLayout,
+            proportionalLayout: (_a = options.proportionalLayout) !== null && _a !== void 0 ? _a : true,
             orientation: options.orientation,
-            styles: options.styles,
+            styles: options.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
             disableAutoResizing: options.disableAutoResizing,
             className: options.className,
         });
@@ -9057,12 +9079,6 @@ class GridviewComponent extends BaseGrid {
         }), this.onDidActiveChange((event) => {
             this._onDidActiveGroupChange.fire(event);
         }));
-        if (!this.options.components) {
-            this.options.components = {};
-        }
-        if (!this.options.frameworkComponents) {
-            this.options.frameworkComponents = {};
-        }
     }
     updateOptions(options) {
         super.updateOptions(options);
@@ -9112,14 +9128,11 @@ class GridviewComponent extends BaseGrid {
             const height = this.height;
             this.gridview.deserialize(grid, {
                 fromJSON: (node) => {
-                    var _a, _b;
                     const { data } = node;
-                    const view = createComponent(data.id, data.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkComponentFactory
-                        ? {
-                            createComponent: this.options.frameworkComponentFactory
-                                .createComponent,
-                        }
-                        : undefined);
+                    const view = this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
                     queue.push(() => view.init({
                         params: data.params,
                         minimumWidth: data.minimumWidth,
@@ -9197,7 +9210,7 @@ class GridviewComponent extends BaseGrid {
         this.doAddGroup(removedPanel, relativeLocation, options.size);
     }
     addPanel(options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         let relativeLocation = (_a = options.location) !== null && _a !== void 0 ? _a : [0];
         if ((_b = options.position) === null || _b === void 0 ? void 0 : _b.referencePanel) {
             const referenceGroup = (_c = this._groups.get(options.position.referencePanel)) === null || _c === void 0 ? void 0 : _c.value;
@@ -9213,14 +9226,12 @@ class GridviewComponent extends BaseGrid {
                 relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
             }
         }
-        const view = createComponent(options.id, options.component, (_d = this.options.components) !== null && _d !== void 0 ? _d : {}, (_e = this.options.frameworkComponents) !== null && _e !== void 0 ? _e : {}, this.options.frameworkComponentFactory
-            ? {
-                createComponent: this.options.frameworkComponentFactory
-                    .createComponent,
-            }
-            : undefined);
+        const view = this.options.createComponent({
+            id: options.id,
+            name: options.component,
+        });
         view.init({
-            params: (_f = options.params) !== null && _f !== void 0 ? _f : {},
+            params: (_d = options.params) !== null && _d !== void 0 ? _d : {},
             minimumWidth: options.minimumWidth,
             maximumWidth: options.maximumWidth,
             minimumHeight: options.minimumHeight,
@@ -9348,12 +9359,6 @@ class SplitviewComponent extends Resizable {
         this._classNames = new Classnames(this.element);
         this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
         this._options = options;
-        if (!options.components) {
-            options.components = {};
-        }
-        if (!options.frameworkComponents) {
-            options.frameworkComponents = {};
-        }
         this.splitview = new Splitview(this.element, options);
         this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
     }
@@ -9416,18 +9421,17 @@ class SplitviewComponent extends Resizable {
         return this.panels.find((view) => view.id === id);
     }
     addPanel(options) {
-        var _a, _b, _c;
+        var _a;
         if (this._panels.has(options.id)) {
             throw new Error(`panel ${options.id} already exists`);
         }
-        const view = createComponent(options.id, options.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-            ? {
-                createComponent: this.options.frameworkWrapper.createComponent,
-            }
-            : undefined);
+        const view = this.options.createComponent({
+            id: options.id,
+            name: options.component,
+        });
         view.orientation = this.splitview.orientation;
         view.init({
-            params: (_c = options.params) !== null && _c !== void 0 ? _c : {},
+            params: (_a = options.params) !== null && _a !== void 0 ? _a : {},
             minimumSize: options.minimumSize,
             maximumSize: options.maximumSize,
             snap: options.snap,
@@ -9489,17 +9493,14 @@ class SplitviewComponent extends Resizable {
             descriptor: {
                 size,
                 views: views.map((view) => {
-                    var _a, _b;
                     const data = view.data;
                     if (this._panels.has(data.id)) {
                         throw new Error(`panel ${data.id} already exists`);
                     }
-                    const panel = createComponent(data.id, data.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-                        ? {
-                            createComponent: this.options.frameworkWrapper
-                                .createComponent,
-                        }
-                        : undefined);
+                    const panel = this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
                     queue.push(() => {
                         var _a;
                         panel.init({
@@ -9682,16 +9683,12 @@ class PaneviewComponent extends Resizable {
         this.onDidAddView = this._onDidAddView.event;
         this._onDidRemoveView = new Emitter();
         this.onDidRemoveView = this._onDidRemoveView.event;
-        this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
+        this._onUnhandledDragOverEvent = new Emitter();
+        this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+        this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView, this._onUnhandledDragOverEvent);
         this._classNames = new Classnames(this.element);
         this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
         this._options = options;
-        if (!options.components) {
-            options.components = {};
-        }
-        if (!options.frameworkComponents) {
-            options.frameworkComponents = {};
-        }
         this.paneview = new Paneview(this.element, {
             // only allow paneview in the vertical orientation for now
             orientation: Orientation.VERTICAL,
@@ -9716,22 +9713,19 @@ class PaneviewComponent extends Resizable {
         this._options = Object.assign(Object.assign({}, this.options), options);
     }
     addPanel(options) {
-        var _a, _b, _c, _d;
-        const body = createComponent(options.id, options.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-            ? {
-                createComponent: this.options.frameworkWrapper.body.createComponent,
-            }
-            : undefined);
+        var _a;
+        const body = this.options.createComponent({
+            id: options.id,
+            name: options.component,
+        });
         let header;
-        if (options.headerComponent) {
-            header = createComponent(options.id, options.headerComponent, (_c = this.options.headerComponents) !== null && _c !== void 0 ? _c : {}, this.options.headerframeworkComponents, this.options.frameworkWrapper
-                ? {
-                    createComponent: this.options.frameworkWrapper.header
-                        .createComponent,
-                }
-                : undefined);
+        if (options.headerComponent && this.options.createHeaderComponent) {
+            header = this.options.createHeaderComponent({
+                id: options.id,
+                name: options.headerComponent,
+            });
         }
-        else {
+        if (!header) {
             header = new DefaultHeader();
         }
         const view = new PaneFramework({
@@ -9749,7 +9743,7 @@ class PaneviewComponent extends Resizable {
         const size = typeof options.size === 'number' ? options.size : Sizing.Distribute;
         const index = typeof options.index === 'number' ? options.index : undefined;
         view.init({
-            params: (_d = options.params) !== null && _d !== void 0 ? _d : {},
+            params: (_a = options.params) !== null && _a !== void 0 ? _a : {},
             minimumBodySize: options.minimumBodySize,
             maximumBodySize: options.maximumBodySize,
             isExpanded: options.isExpanded,
@@ -9814,24 +9808,20 @@ class PaneviewComponent extends Resizable {
             descriptor: {
                 size,
                 views: views.map((view) => {
-                    var _a, _b, _c, _d;
                     const data = view.data;
-                    const body = createComponent(data.id, data.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-                        ? {
-                            createComponent: this.options.frameworkWrapper.body
-                                .createComponent,
-                        }
-                        : undefined);
+                    const body = this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
                     let header;
-                    if (data.headerComponent) {
-                        header = createComponent(data.id, data.headerComponent, (_c = this.options.headerComponents) !== null && _c !== void 0 ? _c : {}, (_d = this.options.headerframeworkComponents) !== null && _d !== void 0 ? _d : {}, this.options.frameworkWrapper
-                            ? {
-                                createComponent: this.options.frameworkWrapper.header
-                                    .createComponent,
-                            }
-                            : undefined);
+                    if (data.headerComponent &&
+                        this.options.createHeaderComponent) {
+                        header = this.options.createHeaderComponent({
+                            id: data.id,
+                            name: data.headerComponent,
+                        });
                     }
-                    else {
+                    if (!header) {
                         header = new DefaultHeader();
                     }
                     const panel = new PaneFramework({
@@ -9879,9 +9869,11 @@ class PaneviewComponent extends Resizable {
         this.paneview.dispose();
     }
     doAddPanel(panel) {
-        const disposable = panel.onDidDrop((event) => {
+        const disposable = new CompositeDisposable(panel.onDidDrop((event) => {
             this._onDidDrop.fire(event);
-        });
+        }), panel.onUnhandledDragOverEvent((event) => {
+            this._onUnhandledDragOverEvent.fire(event);
+        }));
         this._viewDisposables.set(panel.id, disposable);
     }
     doRemovePanel(panel) {
@@ -10164,7 +10156,7 @@ class ReactPanelContentPart {
         this._onDidBlur = new Emitter();
         this.onDidBlur = this._onDidBlur.event;
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }
@@ -10202,7 +10194,7 @@ class ReactPanelHeaderPart {
         this.component = component;
         this.reactPortalStore = reactPortalStore;
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }
@@ -10238,7 +10230,7 @@ class ReactWatermarkPart {
         this.component = component;
         this.reactPortalStore = reactPortalStore;
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }
@@ -10280,7 +10272,7 @@ class ReactHeaderActionsRendererPart {
         this._group = _group;
         this.mutableDisposable = new MutableDisposable();
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }
@@ -10339,8 +10331,8 @@ function createGroupControlElement(component, store) {
         : undefined;
 }
 const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
-function extractCoreOptions(props) {
-    const coreOptions = PROPERTY_KEYS.reduce((obj, key) => {
+function extractCoreOptions$3(props) {
+    const coreOptions = PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
         if (key in props) {
             obj[key] = props[key];
         }
@@ -10356,7 +10348,7 @@ const DockviewReact = React.forwardRef((props, ref) => {
     const prevProps = React.useRef({});
     React.useEffect(() => {
         const changes = {};
-        PROPERTY_KEYS.forEach((propKey) => {
+        PROPERTY_KEYS_DOCKVIEW.forEach((propKey) => {
             const key = propKey;
             const propValue = props[key];
             if (key in props && propValue !== prevProps.current[key]) {
@@ -10367,7 +10359,7 @@ const DockviewReact = React.forwardRef((props, ref) => {
             dockviewRef.current.updateOptions(changes);
         }
         prevProps.current = props;
-    }, PROPERTY_KEYS.map((key) => props[key]));
+    }, PROPERTY_KEYS_DOCKVIEW.map((key) => props[key]));
     React.useEffect(() => {
         var _a;
         if (!domRef.current) {
@@ -10403,7 +10395,7 @@ const DockviewReact = React.forwardRef((props, ref) => {
                 ? DEFAULT_REACT_TAB
                 : undefined,
         };
-        const api = createDockview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
+        const api = createDockview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions$3(props)), frameworkOptions));
         const { clientWidth, clientHeight } = domRef.current;
         api.layout(clientWidth, clientHeight);
         if (props.onReady) {
@@ -10591,31 +10583,47 @@ class ReactPanelView extends SplitviewPanel {
     }
 }
 
+function extractCoreOptions$2(props) {
+    const coreOptions = PROPERTY_KEYS_SPLITVIEW.reduce((obj, key) => {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
 const SplitviewReact = React.forwardRef((props, ref) => {
     const domRef = React.useRef(null);
     const splitviewRef = React.useRef();
     const [portals, addPortal] = usePortalsLifecycle();
     React.useImperativeHandle(ref, () => domRef.current, []);
+    const prevProps = React.useRef({});
     React.useEffect(() => {
-        var _a;
-        const api = createSplitview(domRef.current, {
-            disableAutoResizing: props.disableAutoResizing,
-            orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : Orientation.HORIZONTAL,
-            frameworkComponents: props.components,
-            frameworkWrapper: {
-                createComponent: (id, componentId, component) => {
-                    return new ReactPanelView(id, componentId, component, {
-                        addPortal,
-                    });
-                },
-            },
-            proportionalLayout: typeof props.proportionalLayout === 'boolean'
-                ? props.proportionalLayout
-                : true,
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
+        const changes = {};
+        PROPERTY_KEYS_SPLITVIEW.forEach((propKey) => {
+            const key = propKey;
+            const propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
         });
+        if (splitviewRef.current) {
+            splitviewRef.current.updateOptions(changes);
+        }
+        prevProps.current = props;
+    }, PROPERTY_KEYS_SPLITVIEW.map((key) => props[key]));
+    React.useEffect(() => {
+        if (!domRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const frameworkOptions = {
+            createComponent: (options) => {
+                return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
+            },
+        };
+        const api = createSplitview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions$2(props)), frameworkOptions));
         const { clientWidth, clientHeight } = domRef.current;
         api.layout(clientWidth, clientHeight);
         if (props.onReady) {
@@ -10631,7 +10639,9 @@ const SplitviewReact = React.forwardRef((props, ref) => {
             return;
         }
         splitviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            createComponent: (options) => {
+                return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
+            },
         });
     }, [props.components]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
@@ -10656,36 +10666,47 @@ class ReactGridPanelView extends GridviewPanel {
     }
 }
 
+function extractCoreOptions$1(props) {
+    const coreOptions = PROPERTY_KEYS_GRIDVIEW.reduce((obj, key) => {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
 const GridviewReact = React.forwardRef((props, ref) => {
     const domRef = React.useRef(null);
     const gridviewRef = React.useRef();
     const [portals, addPortal] = usePortalsLifecycle();
     React.useImperativeHandle(ref, () => domRef.current, []);
+    const prevProps = React.useRef({});
+    React.useEffect(() => {
+        const changes = {};
+        PROPERTY_KEYS_GRIDVIEW.forEach((propKey) => {
+            const key = propKey;
+            const propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
+        });
+        if (gridviewRef.current) {
+            gridviewRef.current.updateOptions(changes);
+        }
+        prevProps.current = props;
+    }, PROPERTY_KEYS_GRIDVIEW.map((key) => props[key]));
     React.useEffect(() => {
-        var _a;
         if (!domRef.current) {
             return () => {
                 // noop
             };
         }
-        const api = createGridview(domRef.current, {
-            disableAutoResizing: props.disableAutoResizing,
-            proportionalLayout: typeof props.proportionalLayout === 'boolean'
-                ? props.proportionalLayout
-                : true,
-            orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : Orientation.HORIZONTAL,
-            frameworkComponents: props.components,
-            frameworkComponentFactory: {
-                createComponent: (id, componentId, component) => {
-                    return new ReactGridPanelView(id, componentId, component, {
-                        addPortal,
-                    });
-                },
+        const frameworkOptions = {
+            createComponent: (options) => {
+                return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
             },
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
-        });
+        };
+        const api = createGridview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions$1(props)), frameworkOptions));
         const { clientWidth, clientHeight } = domRef.current;
         api.layout(clientWidth, clientHeight);
         if (props.onReady) {
@@ -10701,7 +10722,9 @@ const GridviewReact = React.forwardRef((props, ref) => {
             return;
         }
         gridviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            createComponent: (options) => {
+                return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
+            },
         });
     }, [props.components]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
@@ -10743,32 +10766,52 @@ class PanePanelSection {
     }
 }
 
+function extractCoreOptions(props) {
+    const coreOptions = PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
 const PaneviewReact = React.forwardRef((props, ref) => {
     const domRef = React.useRef(null);
     const paneviewRef = React.useRef();
     const [portals, addPortal] = usePortalsLifecycle();
     React.useImperativeHandle(ref, () => domRef.current, []);
+    const prevProps = React.useRef({});
     React.useEffect(() => {
-        const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
-            addPortal,
+        const changes = {};
+        PROPERTY_KEYS_PANEVIEW.forEach((propKey) => {
+            const key = propKey;
+            const propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
         });
-        const api = createPaneview(domRef.current, {
-            disableAutoResizing: props.disableAutoResizing,
-            frameworkComponents: props.components,
-            components: {},
-            headerComponents: {},
-            disableDnd: props.disableDnd,
-            headerframeworkComponents: props.headerComponents,
-            frameworkWrapper: {
-                header: {
-                    createComponent,
-                },
-                body: {
-                    createComponent,
-                },
+        if (paneviewRef.current) {
+            paneviewRef.current.updateOptions(changes);
+        }
+        prevProps.current = props;
+    }, PROPERTY_KEYS_PANEVIEW.map((key) => props[key]));
+    React.useEffect(() => {
+        var _a;
+        if (!domRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
+        const frameworkOptions = {
+            createComponent: (options) => {
+                return new PanePanelSection(options.id, props.components[options.name], { addPortal });
             },
-            showDndOverlay: props.showDndOverlay,
-        });
+            createHeaderComponent: (options) => {
+                return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
+            },
+        };
+        const api = createPaneview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
         const { clientWidth, clientHeight } = domRef.current;
         api.layout(clientWidth, clientHeight);
         if (props.onReady) {
@@ -10784,44 +10827,41 @@ const PaneviewReact = React.forwardRef((props, ref) => {
             return;
         }
         paneviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            createComponent: (options) => {
+                return new PanePanelSection(options.id, props.components[options.name], { addPortal });
+            },
         });
     }, [props.components]);
     React.useEffect(() => {
+        var _a;
         if (!paneviewRef.current) {
             return;
         }
+        const headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
         paneviewRef.current.updateOptions({
-            headerframeworkComponents: props.headerComponents,
+            createHeaderComponent: (options) => {
+                return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
+            },
         });
     }, [props.headerComponents]);
     React.useEffect(() => {
         if (!paneviewRef.current) {
             return () => {
-                //
+                // noop
             };
         }
-        const api = paneviewRef.current;
-        const disposable = api.onDidDrop((event) => {
+        const disposable = paneviewRef.current.onDidDrop((event) => {
             if (props.onDidDrop) {
-                props.onDidDrop(Object.assign(Object.assign({}, event), { api }));
+                props.onDidDrop(event);
             }
         });
         return () => {
             disposable.dispose();
         };
     }, [props.onDidDrop]);
-    React.useEffect(() => {
-        if (!paneviewRef.current) {
-            return;
-        }
-        paneviewRef.current.updateOptions({
-            showDndOverlay: props.showDndOverlay,
-        });
-    }, [props.showDndOverlay]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 PaneviewReact.displayName = 'PaneviewComponent';
 
-export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDefaultTab, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewReact, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, LayoutPriority, Orientation, PROPERTY_KEYS, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, WillShowOverlayLocationEvent, createDockview, createGridview, createPaneview, createSplitview, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactComponent, orthogonal, positionToDirection, toTarget, usePortalsLifecycle };
+export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDefaultTab, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewReact, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, LayoutPriority, Orientation, PROPERTY_KEYS_DOCKVIEW, PROPERTY_KEYS_GRIDVIEW, PROPERTY_KEYS_PANEVIEW, PROPERTY_KEYS_SPLITVIEW, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, PaneviewUnhandledDragOverEvent, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, WillShowOverlayLocationEvent, createDockview, createGridview, createPaneview, createSplitview, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactComponent, orthogonal, positionToDirection, toTarget, usePortalsLifecycle };
 //# sourceMappingURL=dockview-react.esm.js.map