dockview 2.1.4 → 3.0.0

package/dist/dockview.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 2.1.4
+ * @version 3.0.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -133,6 +133,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();
@@ -1524,6 +1535,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;
@@ -2653,6 +2681,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;
@@ -3130,15 +3173,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;
@@ -4065,6 +4103,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();
@@ -4488,6 +4548,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();
           }
@@ -4514,7 +4577,7 @@
               overlayModel: {
                   activationSize: { type: 'percentage', value: 50 },
               },
-              canDisplayOverlay: (event) => {
+              canDisplayOverlay: (event, position) => {
                   const data = getPaneData();
                   if (data) {
                       if (data.paneId !== this.id &&
@@ -4522,14 +4585,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) => {
@@ -4984,15 +5042,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,
@@ -5037,20 +5087,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];
@@ -5058,6 +5094,7 @@
           disposable.dispose();
           value.dispose();
           value.element.remove();
+          this.updateClassnames();
       }
       setActivePanel(panel) {
           this.tabs.forEach((tab) => {
@@ -5126,25 +5163,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`
@@ -8990,31 +9039,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;
@@ -9032,10 +9056,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,
           });
@@ -9055,12 +9082,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);
@@ -9110,14 +9131,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,
@@ -9195,7 +9213,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;
@@ -9211,14 +9229,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,
@@ -9346,12 +9362,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);
       }
@@ -9414,18 +9424,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,
@@ -9487,17 +9496,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({
@@ -9680,16 +9686,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,
@@ -9714,22 +9716,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({
@@ -9747,7 +9746,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,
@@ -9812,24 +9811,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({
@@ -9877,9 +9872,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) {
@@ -10162,7 +10159,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%';
       }
@@ -10200,7 +10197,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%';
       }
@@ -10236,7 +10233,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%';
       }
@@ -10278,7 +10275,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%';
       }
@@ -10337,8 +10334,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];
           }
@@ -10354,7 +10351,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]) {
@@ -10365,7 +10362,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) {
@@ -10401,7 +10398,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) {
@@ -10612,31 +10609,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) {
@@ -10652,7 +10665,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));
@@ -10677,36 +10692,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) {
@@ -10722,7 +10748,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));
@@ -10764,32 +10792,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) {
@@ -10805,41 +10853,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';
@@ -10867,7 +10912,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;
@@ -10876,6 +10924,7 @@
   exports.PaneviewComponent = PaneviewComponent;
   exports.PaneviewPanel = PaneviewPanel;
   exports.PaneviewReact = PaneviewReact;
+  exports.PaneviewUnhandledDragOverEvent = PaneviewUnhandledDragOverEvent;
   exports.ReactPart = ReactPart;
   exports.ReactPartContext = ReactPartContext;
   exports.Splitview = Splitview;