dockview-react 2.1.4 → 3.0.0

package/dist/dockview-react.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 2.1.4
+ * @version 3.0.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -103,6 +103,17 @@
             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();
@@ -1494,6 +1505,23 @@
         }
     }
 
+    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;
@@ -2623,6 +2651,21 @@
         }
     }
 
+    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;
@@ -3100,15 +3143,10 @@
          * 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;
@@ -4035,6 +4073,28 @@
         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();
@@ -4458,6 +4518,9 @@
             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();
             }
@@ -4484,7 +4547,7 @@
                 overlayModel: {
                     activationSize: { type: 'percentage', value: 50 },
                 },
-                canDisplayOverlay: (event) => {
+                canDisplayOverlay: (event, position) => {
                     const data = getPaneData();
                     if (data) {
                         if (data.paneId !== this.id &&
@@ -4492,14 +4555,9 @@
                             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) => {
@@ -4954,15 +5012,7 @@
             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,
@@ -5007,20 +5057,6 @@
         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];
@@ -5028,6 +5064,7 @@
             disposable.dispose();
             value.dispose();
             value.element.remove();
+            this.updateClassnames();
         }
         setActivePanel(panel) {
             this.tabs.forEach((tab) => {
@@ -5096,25 +5133,37 @@
             }
             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`
@@ -8960,31 +9009,6 @@
         }
     }
 
-    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;
@@ -9002,10 +9026,13 @@
             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,
             });
@@ -9025,12 +9052,6 @@
             }), 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);
@@ -9080,14 +9101,11 @@
                 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,
@@ -9165,7 +9183,7 @@
             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;
@@ -9181,14 +9199,12 @@
                     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,
@@ -9316,12 +9332,6 @@
             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);
         }
@@ -9384,18 +9394,17 @@
             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,
@@ -9457,17 +9466,14 @@
                 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({
@@ -9650,16 +9656,12 @@
             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,
@@ -9684,22 +9686,19 @@
             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({
@@ -9717,7 +9716,7 @@
             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,
@@ -9782,24 +9781,20 @@
                 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({
@@ -9847,9 +9842,11 @@
             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) {
@@ -10132,7 +10129,7 @@
             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%';
         }
@@ -10170,7 +10167,7 @@
             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%';
         }
@@ -10206,7 +10203,7 @@
             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%';
         }
@@ -10248,7 +10245,7 @@
             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%';
         }
@@ -10307,8 +10304,8 @@
             : 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];
             }
@@ -10324,7 +10321,7 @@
         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]) {
@@ -10335,7 +10332,7 @@
                 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) {
@@ -10371,7 +10368,7 @@
                     ? 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) {
@@ -10559,31 +10556,47 @@
         }
     }
 
+    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) {
@@ -10599,7 +10612,9 @@
                 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));
@@ -10624,36 +10639,47 @@
         }
     }
 
+    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) {
@@ -10669,7 +10695,9 @@
                 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));
@@ -10711,32 +10739,52 @@
         }
     }
 
+    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) {
@@ -10752,41 +10800,38 @@
                 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';
@@ -10814,7 +10859,10 @@
     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;
@@ -10823,6 +10871,7 @@
     exports.PaneviewComponent = PaneviewComponent;
     exports.PaneviewPanel = PaneviewPanel;
     exports.PaneviewReact = PaneviewReact;
+    exports.PaneviewUnhandledDragOverEvent = PaneviewUnhandledDragOverEvent;
     exports.ReactPart = ReactPart;
     exports.ReactPartContext = ReactPartContext;
     exports.Splitview = Splitview;