dockview-react 2.1.4 → 3.0.0

package/dist/dockview-react.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 2.1.4
+ * @version 3.0.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -132,6 +132,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();
@@ -1523,6 +1534,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;
@@ -2652,6 +2680,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;
@@ -3129,15 +3172,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;
@@ -4064,6 +4102,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();
@@ -4487,6 +4547,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();
         }
@@ -4513,7 +4576,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 &&
@@ -4521,14 +4584,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) => {
@@ -4983,15 +5041,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,
@@ -5036,20 +5086,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];
@@ -5057,6 +5093,7 @@ class TabsContainer extends CompositeDisposable {
         disposable.dispose();
         value.dispose();
         value.element.remove();
+        this.updateClassnames();
     }
     setActivePanel(panel) {
         this.tabs.forEach((tab) => {
@@ -5125,25 +5162,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`
@@ -8989,31 +9038,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;
@@ -9031,10 +9055,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,
         });
@@ -9054,12 +9081,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);
@@ -9109,14 +9130,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,
@@ -9194,7 +9212,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;
@@ -9210,14 +9228,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,
@@ -9345,12 +9361,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);
     }
@@ -9413,18 +9423,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,
@@ -9486,17 +9495,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({
@@ -9679,16 +9685,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: exports.Orientation.VERTICAL,
@@ -9713,22 +9715,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({
@@ -9746,7 +9745,7 @@ class PaneviewComponent extends Resizable {
         const size = typeof options.size === 'number' ? options.size : exports.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,
@@ -9811,24 +9810,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({
@@ -9876,9 +9871,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) {
@@ -10161,7 +10158,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%';
     }
@@ -10199,7 +10196,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%';
     }
@@ -10235,7 +10232,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%';
     }
@@ -10277,7 +10274,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%';
     }
@@ -10336,8 +10333,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];
         }
@@ -10353,7 +10350,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]) {
@@ -10364,7 +10361,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) {
@@ -10400,7 +10397,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) {
@@ -10588,31 +10585,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 : exports.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) {
@@ -10628,7 +10641,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));
@@ -10653,36 +10668,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 : exports.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) {
@@ -10698,7 +10724,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));
@@ -10740,32 +10768,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) {
@@ -10781,41 +10829,38 @@ 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';
@@ -10843,7 +10888,10 @@ exports.GridviewApi = GridviewApi;
 exports.GridviewComponent = GridviewComponent;
 exports.GridviewPanel = GridviewPanel;
 exports.GridviewReact = GridviewReact;
-exports.PROPERTY_KEYS = PROPERTY_KEYS;
+exports.PROPERTY_KEYS_DOCKVIEW = PROPERTY_KEYS_DOCKVIEW;
+exports.PROPERTY_KEYS_GRIDVIEW = PROPERTY_KEYS_GRIDVIEW;
+exports.PROPERTY_KEYS_PANEVIEW = PROPERTY_KEYS_PANEVIEW;
+exports.PROPERTY_KEYS_SPLITVIEW = PROPERTY_KEYS_SPLITVIEW;
 exports.PaneFramework = PaneFramework;
 exports.PaneTransfer = PaneTransfer;
 exports.PanelTransfer = PanelTransfer;
@@ -10852,6 +10900,7 @@ exports.PaneviewApi = PaneviewApi;
 exports.PaneviewComponent = PaneviewComponent;
 exports.PaneviewPanel = PaneviewPanel;
 exports.PaneviewReact = PaneviewReact;
+exports.PaneviewUnhandledDragOverEvent = PaneviewUnhandledDragOverEvent;
 exports.ReactPart = ReactPart;
 exports.ReactPartContext = ReactPartContext;
 exports.Splitview = Splitview;