dockview-core 1.16.0 → 1.17.0

package/dist/dockview-core.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 1.16.0
+ * @version 1.17.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -555,6 +555,42 @@
             },
         };
     }
+    function getDockviewTheme(element) {
+        function toClassList(element) {
+            const list = [];
+            for (let i = 0; i < element.classList.length; i++) {
+                list.push(element.classList.item(i));
+            }
+            return list;
+        }
+        let theme = undefined;
+        let parent = element;
+        while (parent !== null) {
+            theme = toClassList(parent).find((cls) => cls.startsWith('dockview-theme-'));
+            if (typeof theme === 'string') {
+                break;
+            }
+            parent = parent.parentElement;
+        }
+        return theme;
+    }
+    class Classnames {
+        constructor(element) {
+            this.element = element;
+            this._classNames = [];
+        }
+        setClassNames(classNames) {
+            for (const className of this._classNames) {
+                toggleClass(this.element, className, false);
+            }
+            this._classNames = classNames
+                .split(' ')
+                .filter((v) => v.trim().length > 0);
+            for (const className of this._classNames) {
+                toggleClass(this.element, className, true);
+            }
+        }
+    }
 
     function tail(arr) {
         if (arr.length === 0) {
@@ -2674,7 +2710,8 @@
         set locked(value) {
             this.gridview.locked = value;
         }
-        constructor(options) {
+        constructor(parentElement, options) {
+            var _a;
             super(document.createElement('div'), options.disableAutoResizing);
             this._id = nextLayoutId$1.next();
             this._groups = new Map();
@@ -2690,10 +2727,9 @@
             this.onDidViewVisibilityChangeMicroTaskQueue = this._onDidViewVisibilityChangeMicroTaskQueue.onEvent;
             this.element.style.height = '100%';
             this.element.style.width = '100%';
-            if (typeof options.className === 'string') {
-                this.element.classList.add(options.className);
-            }
-            options.parentElement.appendChild(this.element);
+            this._classNames = new Classnames(this.element);
+            this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
+            parentElement.appendChild(this.element);
             this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
             this.gridview.locked = !!options.locked;
             this.element.appendChild(this.gridview.element);
@@ -2716,6 +2752,25 @@
         isVisible(panel) {
             return this.gridview.isViewVisible(getGridLocation(panel.element));
         }
+        updateOptions(options) {
+            var _a, _b, _c, _d;
+            if (typeof options.proportionalLayout === 'boolean') ;
+            if (options.orientation) {
+                this.gridview.orientation = options.orientation;
+            }
+            if ('disableResizing' in options) {
+                this.disableResizing = (_a = options.disableAutoResizing) !== null && _a !== void 0 ? _a : false;
+            }
+            if ('locked' in options) {
+                this.locked = (_b = options.locked) !== null && _b !== void 0 ? _b : false;
+            }
+            if ('margin' in options) {
+                this.gridview.margin = (_c = options.margin) !== null && _c !== void 0 ? _c : 0;
+            }
+            if ('className' in options) {
+                this._classNames.setClassNames((_d = options.className) !== null && _d !== void 0 ? _d : '');
+            }
+        }
         maximizeGroup(panel) {
             this.gridview.maximizeView(panel);
             this.doSetGroupActive(panel);
@@ -4639,7 +4694,7 @@
             this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
             this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
                 this._onDragStart.fire(event);
-            }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
+            }), dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
                 if (event.defaultPrevented) {
                     return;
                 }
@@ -4681,7 +4736,7 @@
             this.accessor = accessor;
             this.group = group;
             this.panelTransfer = LocalSelectionTransfer.getInstance();
-            this.addDisposables(addDisposableListener(element, 'mousedown', (e) => {
+            this.addDisposables(addDisposableListener(element, 'pointerdown', (e) => {
                 if (e.shiftKey) {
                     /**
                      * You cannot call e.preventDefault() because that will prevent drag events from firing
@@ -4900,7 +4955,7 @@
                     group: this.group,
                     getData: getPanelData,
                 }));
-            }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
+            }), addDisposableListener(this.voidContainer.element, 'pointerdown', (event) => {
                 const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
                 if (isFloatingGroupsEnabled &&
                     event.shiftKey &&
@@ -4914,7 +4969,7 @@
                         inDragMode: true,
                     });
                 }
-            }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
+            }), addDisposableListener(this.tabContainer, 'pointerdown', (event) => {
                 if (event.defaultPrevented) {
                     return;
                 }
@@ -5619,7 +5674,6 @@
                 });
                 this.tabsContainer.hide();
                 this.contentContainer.element.appendChild(this.watermark.element);
-                this.watermark.updateParentGroup(this.groupPanel, true);
             }
             if (!this.isEmpty && this.watermark) {
                 this.watermark.element.remove();
@@ -5982,6 +6036,34 @@
     const MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH = 100;
     const MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT = 100;
     class DockviewGroupPanel extends GridviewPanel {
+        get minimumWidth() {
+            var _a;
+            const activePanelMinimumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumWidth;
+            return typeof activePanelMinimumWidth === 'number'
+                ? activePanelMinimumWidth
+                : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
+        }
+        get minimumHeight() {
+            var _a;
+            const activePanelMinimumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumHeight;
+            return typeof activePanelMinimumHeight === 'number'
+                ? activePanelMinimumHeight
+                : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
+        }
+        get maximumWidth() {
+            var _a;
+            const activePanelMaximumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumWidth;
+            return typeof activePanelMaximumWidth === 'number'
+                ? activePanelMaximumWidth
+                : Number.MAX_SAFE_INTEGER;
+        }
+        get maximumHeight() {
+            var _a;
+            const activePanelMaximumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumHeight;
+            return typeof activePanelMaximumHeight === 'number'
+                ? activePanelMaximumHeight
+                : Number.MAX_SAFE_INTEGER;
+        }
         get panels() {
             return this._model.panels;
         }
@@ -6004,9 +6086,12 @@
             return this._model.header;
         }
         constructor(accessor, id, options) {
+            var _a, _b, _c, _d, _e, _f;
             super(id, 'groupview_default', {
-                minimumHeight: MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT,
-                minimumWidth: MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
+                minimumHeight: (_b = (_a = options.constraints) === null || _a === void 0 ? void 0 : _a.minimumHeight) !== null && _b !== void 0 ? _b : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT,
+                minimumWidth: (_d = (_c = options.constraints) === null || _c === void 0 ? void 0 : _c.maximumHeight) !== null && _d !== void 0 ? _d : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
+                maximumHeight: (_e = options.constraints) === null || _e === void 0 ? void 0 : _e.maximumHeight,
+                maximumWidth: (_f = options.constraints) === null || _f === void 0 ? void 0 : _f.maximumWidth,
             }, new DockviewGroupPanelApiImpl(id, accessor));
             this.api.initialize(this); // cannot use 'this' after after 'super' call
             this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
@@ -6162,6 +6247,18 @@
             var _a;
             return (_a = this._renderer) !== null && _a !== void 0 ? _a : this.accessor.renderer;
         }
+        get minimumWidth() {
+            return this._minimumWidth;
+        }
+        get minimumHeight() {
+            return this._minimumHeight;
+        }
+        get maximumWidth() {
+            return this._maximumWidth;
+        }
+        get maximumHeight() {
+            return this._maximumHeight;
+        }
         constructor(id, component, tabComponent, accessor, containerApi, group, view, options) {
             super();
             this.id = id;
@@ -6170,6 +6267,10 @@
             this.view = view;
             this._renderer = options.renderer;
             this._group = group;
+            this._minimumWidth = options.minimumWidth;
+            this._minimumHeight = options.minimumHeight;
+            this._maximumWidth = options.maximumWidth;
+            this._maximumHeight = options.maximumHeight;
             this.api = new DockviewPanelApiImpl(this, this._group, accessor, component, tabComponent);
             this.addDisposables(this.api.onActiveChange(() => {
                 accessor.setActivePanel(this);
@@ -6206,6 +6307,10 @@
                     : undefined,
                 title: this.title,
                 renderer: this._renderer,
+                minimumHeight: this._minimumHeight,
+                maximumHeight: this._maximumHeight,
+                minimumWidth: this._minimumWidth,
+                maximumWidth: this._maximumWidth,
             };
         }
         setTitle(title) {
@@ -6335,7 +6440,7 @@
             this.action.appendChild(createCloseButton());
             this._element.appendChild(this._content);
             this._element.appendChild(this.action);
-            this.addDisposables(addDisposableListener(this.action, 'mousedown', (ev) => {
+            this.addDisposables(addDisposableListener(this.action, 'pointerdown', (ev) => {
                 ev.preventDefault();
             }));
             this.render();
@@ -6345,7 +6450,7 @@
             this.addDisposables(params.api.onDidTitleChange((event) => {
                 this._title = event.title;
                 this.render();
-            }), addDisposableListener(this.action, 'mousedown', (ev) => {
+            }), addDisposableListener(this.action, 'pointerdown', (ev) => {
                 ev.preventDefault();
             }), addDisposableListener(this.action, 'click', (ev) => {
                 if (ev.defaultPrevented) {
@@ -6446,6 +6551,10 @@
             const view = new DockviewPanelModel(this.accessor, panelId, contentComponent, tabComponent);
             const panel = new DockviewPanel(panelId, contentComponent, tabComponent, this.accessor, new DockviewApi(this.accessor), group, view, {
                 renderer: panelData.renderer,
+                minimumWidth: panelData.minimumWidth,
+                minimumHeight: panelData.minimumHeight,
+                maximumWidth: panelData.maximumWidth,
+                maximumHeight: panelData.maximumHeight,
             });
             panel.init({
                 title: title !== null && title !== void 0 ? title : panelId,
@@ -6479,34 +6588,19 @@
             actionsContainer.appendChild(closeAnchor);
             title.appendChild(emptySpace);
             title.appendChild(actionsContainer);
-            this.addDisposables(addDisposableListener(closeAnchor, 'click', (ev) => {
+            this.addDisposables(addDisposableListener(closeAnchor, 'click', (event) => {
                 var _a;
-                ev.preventDefault();
+                event.preventDefault();
                 if (this._group) {
                     (_a = this._api) === null || _a === void 0 ? void 0 : _a.removeGroup(this._group);
                 }
             }));
         }
-        update(_event) {
-            // noop
-        }
-        focus() {
-            // noop
-        }
-        layout(_width, _height) {
-            // noop
-        }
         init(_params) {
             this._api = _params.containerApi;
+            this._group = _params.group;
             this.render();
         }
-        updateParentGroup(group, _visible) {
-            this._group = group;
-            this.render();
-        }
-        dispose() {
-            super.dispose();
-        }
         render() {
             const isOneGroup = !!(this._api && this._api.size <= 1);
             toggleClass(this.element, 'has-actions', isOneGroup);
@@ -6665,7 +6759,7 @@
                     dispose: () => {
                         iframes.release();
                     },
-                }, addDisposableWindowListener(window, 'mousemove', (e) => {
+                }, addDisposableWindowListener(window, 'pointermove', (e) => {
                     const containerRect = this.options.container.getBoundingClientRect();
                     const x = e.clientX - containerRect.left;
                     const y = e.clientY - containerRect.top;
@@ -6708,7 +6802,7 @@
                     this._onDidChangeEnd.fire();
                 }));
             };
-            this.addDisposables(move, addDisposableListener(dragTarget, 'mousedown', (event) => {
+            this.addDisposables(move, addDisposableListener(dragTarget, 'pointerdown', (event) => {
                 if (event.defaultPrevented) {
                     event.preventDefault();
                     return;
@@ -6719,7 +6813,7 @@
                     return;
                 }
                 track();
-            }), addDisposableListener(this.options.content, 'mousedown', (event) => {
+            }), addDisposableListener(this.options.content, 'pointerdown', (event) => {
                 if (event.defaultPrevented) {
                     return;
                 }
@@ -6731,7 +6825,7 @@
                 if (event.shiftKey) {
                     track();
                 }
-            }), addDisposableListener(this.options.content, 'mousedown', () => {
+            }), addDisposableListener(this.options.content, 'pointerdown', () => {
                 arialLevelTracker.push(this._element);
             }, true));
             if (options.inDragMode) {
@@ -6743,11 +6837,11 @@
             resizeHandleElement.className = `dv-resize-handle-${direction}`;
             this._element.appendChild(resizeHandleElement);
             const move = new MutableDisposable();
-            this.addDisposables(move, addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
+            this.addDisposables(move, addDisposableListener(resizeHandleElement, 'pointerdown', (e) => {
                 e.preventDefault();
                 let startPosition = null;
                 const iframes = disableIframePointEvents();
-                move.value = new CompositeDisposable(addDisposableWindowListener(window, 'mousemove', (e) => {
+                move.value = new CompositeDisposable(addDisposableWindowListener(window, 'pointermove', (e) => {
                     const containerRect = this.options.container.getBoundingClientRect();
                     const overlayRect = this._element.getBoundingClientRect();
                     const y = e.clientY - containerRect.top;
@@ -7252,25 +7346,6 @@
             });
         });
     }
-    function getDockviewTheme(element) {
-        function toClassList(element) {
-            const list = [];
-            for (let i = 0; i < element.classList.length; i++) {
-                list.push(element.classList.item(i));
-            }
-            return list;
-        }
-        let theme = undefined;
-        let parent = element;
-        while (parent !== null) {
-            theme = toClassList(parent).find((cls) => cls.startsWith('dockview-theme-'));
-            if (typeof theme === 'string') {
-                break;
-            }
-            parent = parent.parentElement;
-        }
-        return theme;
-    }
     class DockviewComponent extends BaseGrid {
         get orientation() {
             return this.gridview.orientation;
@@ -7306,13 +7381,12 @@
         }
         constructor(parentElement, options) {
             var _a;
-            super({
+            super(parentElement, {
                 proportionalLayout: true,
                 orientation: exports.Orientation.HORIZONTAL,
                 styles: options.hideBorders
                     ? { separatorBorder: 'transparent' }
                     : undefined,
-                parentElement: parentElement,
                 disableAutoResizing: options.disableAutoResizing,
                 locked: options.locked,
                 margin: options.gap,
@@ -7352,9 +7426,6 @@
             this._onDidActiveGroupChange = new Emitter();
             this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
             this._moving = false;
-            // const gready = document.createElement('div');
-            // gready.className = 'dv-overlay-render-container';
-            // this.gridview.element.appendChild(gready);
             this.overlayRenderContainer = new OverlayRenderContainer(this.gridview.element, this);
             toggleClass(this.gridview.element, 'dv-dockview', true);
             toggleClass(this.element, 'dv-debug', !!options.debug);
@@ -7803,15 +7874,11 @@
             }
         }
         updateOptions(options) {
-            var _a, _b;
-            const changed_floatingGroupBounds = 'floatingGroupBounds' in options &&
-                options.floatingGroupBounds !== this.options.floatingGroupBounds;
-            const changed_rootOverlayOptions = 'rootOverlayModel' in options &&
-                options.rootOverlayModel !== this.options.rootOverlayModel;
-            this._options = Object.assign(Object.assign({}, this.options), options);
-            if (changed_floatingGroupBounds) {
+            var _a, _b, _c, _d;
+            super.updateOptions(options);
+            if ('floatingGroupBounds' in options) {
                 for (const group of this._floatingGroups) {
-                    switch (this.options.floatingGroupBounds) {
+                    switch (options.floatingGroupBounds) {
                         case 'boundedWithinViewport':
                             group.overlay.minimumInViewportHeight = undefined;
                             group.overlay.minimumInViewportWidth = undefined;
@@ -7824,25 +7891,20 @@
                             break;
                         default:
                             group.overlay.minimumInViewportHeight =
-                                (_a = this.options.floatingGroupBounds) === null || _a === void 0 ? void 0 : _a.minimumHeightWithinViewport;
+                                (_a = options.floatingGroupBounds) === null || _a === void 0 ? void 0 : _a.minimumHeightWithinViewport;
                             group.overlay.minimumInViewportWidth =
-                                (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
+                                (_b = options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
                     }
                     group.overlay.setBounds();
                 }
             }
-            if (changed_rootOverlayOptions) {
-                this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
+            if ('rootOverlayModel' in options) {
+                this._rootDropTarget.setOverlayModel((_c = options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL);
             }
-            if (
-            //  if explicitly set as `undefined`
-            'gap' in options &&
-                options.gap === undefined) {
-                this.gridview.margin = 0;
-            }
-            if (typeof options.gap === 'number') {
-                this.gridview.margin = options.gap;
+            if ('gap' in options) {
+                this.gridview.margin = (_d = options.gap) !== null && _d !== void 0 ? _d : 0;
             }
+            this._options = Object.assign(Object.assign({}, this.options), options);
             this.layout(this.gridview.width, this.gridview.height, true);
         }
         layout(width, height, forceResize) {
@@ -8099,6 +8161,10 @@
             if (options.position && options.floating) {
                 throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
             }
+            const initial = {
+                width: options.initialWidth,
+                height: options.initialHeight,
+            };
             if (options.position) {
                 if (isPanelOptionsWithPanel(options.position)) {
                     const referencePanel = typeof options.position.referencePanel === 'string'
@@ -8128,6 +8194,10 @@
                     if (!options.inactive) {
                         this.doSetGroupAndPanelActive(group);
                     }
+                    group.api.setSize({
+                        height: initial === null || initial === void 0 ? void 0 : initial.height,
+                        width: initial === null || initial === void 0 ? void 0 : initial.width,
+                    });
                     return panel;
                 }
             }
@@ -8158,6 +8228,10 @@
                         skipSetActive: options.inactive,
                         skipSetGroupActive: options.inactive,
                     });
+                    referenceGroup.api.setSize({
+                        width: initial === null || initial === void 0 ? void 0 : initial.width,
+                        height: initial === null || initial === void 0 ? void 0 : initial.height,
+                    });
                     if (!options.inactive) {
                         this.doSetGroupAndPanelActive(referenceGroup);
                     }
@@ -8165,7 +8239,10 @@
                 else {
                     const location = getGridLocation(referenceGroup.element);
                     const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
-                    const group = this.createGroupAtLocation(relativeLocation);
+                    const group = this.createGroupAtLocation(relativeLocation, this.orientationAtLocation(relativeLocation) ===
+                        exports.Orientation.VERTICAL
+                        ? initial === null || initial === void 0 ? void 0 : initial.height
+                        : initial === null || initial === void 0 ? void 0 : initial.width);
                     panel = this.createPanel(options, group);
                     group.model.openPanel(panel, {
                         skipSetActive: options.inactive,
@@ -8191,7 +8268,9 @@
                 });
             }
             else {
-                const group = this.createGroupAtLocation();
+                const group = this.createGroupAtLocation([0], this.gridview.orientation === exports.Orientation.VERTICAL
+                    ? initial === null || initial === void 0 ? void 0 : initial.height
+                    : initial === null || initial === void 0 ? void 0 : initial.width);
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
@@ -8285,7 +8364,11 @@
                 const location = getGridLocation(referenceGroup.element);
                 const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
                 const group = this.createGroup(options);
-                this.doAddGroup(group, relativeLocation);
+                const size = this.getLocationOrientation(relativeLocation) ===
+                    exports.Orientation.VERTICAL
+                    ? options.initialHeight
+                    : options.initialWidth;
+                this.doAddGroup(group, relativeLocation, size);
                 if (!options.skipSetActive) {
                     this.doSetGroupAndPanelActive(group);
                 }
@@ -8298,6 +8381,12 @@
                 return group;
             }
         }
+        getLocationOrientation(location) {
+            return location.length % 2 == 0 &&
+                this.gridview.orientation === exports.Orientation.HORIZONTAL
+                ? exports.Orientation.HORIZONTAL
+                : exports.Orientation.VERTICAL;
+        }
         removeGroup(group, options) {
             this.doRemoveGroup(group, options);
         }
@@ -8569,7 +8658,22 @@
                 }
                 const referenceLocation = getGridLocation(to.element);
                 const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-                this.gridview.addView(from, exports.Sizing.Distribute, dropLocation);
+                let size;
+                switch (this.gridview.orientation) {
+                    case exports.Orientation.VERTICAL:
+                        size =
+                            referenceLocation.length % 2 == 0
+                                ? from.api.width
+                                : from.api.height;
+                        break;
+                    case exports.Orientation.HORIZONTAL:
+                        size =
+                            referenceLocation.length % 2 == 0
+                                ? from.api.height
+                                : from.api.width;
+                        break;
+                }
+                this.gridview.addView(from, size, dropLocation);
             }
             from.panels.forEach((panel) => {
                 this._onDidMovePanel.fire({ panel, from });
@@ -8681,22 +8785,34 @@
             const contentComponent = options.component;
             const tabComponent = (_a = options.tabComponent) !== null && _a !== void 0 ? _a : this.options.defaultTabComponent;
             const view = new DockviewPanelModel(this, options.id, contentComponent, tabComponent);
-            const panel = new DockviewPanel(options.id, contentComponent, tabComponent, this, this._api, group, view, { renderer: options.renderer });
+            const panel = new DockviewPanel(options.id, contentComponent, tabComponent, this, this._api, group, view, {
+                renderer: options.renderer,
+                minimumWidth: options.minimumWidth,
+                minimumHeight: options.minimumHeight,
+                maximumWidth: options.maximumWidth,
+                maximumHeight: options.maximumHeight,
+            });
             panel.init({
                 title: (_b = options.title) !== null && _b !== void 0 ? _b : options.id,
                 params: (_c = options === null || options === void 0 ? void 0 : options.params) !== null && _c !== void 0 ? _c : {},
             });
             return panel;
         }
-        createGroupAtLocation(location = [0]) {
+        createGroupAtLocation(location, size) {
             const group = this.createGroup();
-            this.doAddGroup(group, location);
+            this.doAddGroup(group, location, size);
             return group;
         }
         findGroup(panel) {
             var _a;
             return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
         }
+        orientationAtLocation(location) {
+            const rootOrientation = this.gridview.orientation;
+            return location.length % 2 == 1
+                ? rootOrientation
+                : orthogonal(rootOrientation);
+        }
     }
 
     class GridviewComponent extends BaseGrid {
@@ -8716,8 +8832,7 @@
             this._deserializer = value;
         }
         constructor(parentElement, options) {
-            super({
-                parentElement: parentElement,
+            super(parentElement, {
                 proportionalLayout: options.proportionalLayout,
                 orientation: options.orientation,
                 styles: options.styles,
@@ -8748,6 +8863,7 @@
             }
         }
         updateOptions(options) {
+            super.updateOptions(options);
             const hasOrientationChanged = typeof options.orientation === 'string' &&
                 this.gridview.orientation !== options.orientation;
             this._options = Object.assign(Object.assign({}, this.options), options);
@@ -9015,6 +9131,7 @@
                 : this.splitview.orthogonalSize;
         }
         constructor(parentElement, options) {
+            var _a;
             super(parentElement, options.disableAutoResizing);
             this._splitviewChangeDisposable = new MutableDisposable();
             this._panels = new Map();
@@ -9026,9 +9143,8 @@
             this.onDidRemoveView = this._onDidRemoveView.event;
             this._onDidLayoutChange = new Emitter();
             this.onDidLayoutChange = this._onDidLayoutChange.event;
-            if (typeof options.className === 'string') {
-                this.element.classList.add(options.className);
-            }
+            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 = {};
@@ -9040,12 +9156,17 @@
             this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
         }
         updateOptions(options) {
-            const hasOrientationChanged = typeof options.orientation === 'string' &&
-                this.options.orientation !== options.orientation;
-            this._options = Object.assign(Object.assign({}, this.options), options);
-            if (hasOrientationChanged) {
+            var _a, _b;
+            if ('className' in options) {
+                this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
+            }
+            if ('disableResizing' in options) {
+                this.disableResizing = (_b = options.disableAutoResizing) !== null && _b !== void 0 ? _b : false;
+            }
+            if (typeof options.orientation === 'string') {
                 this.splitview.orientation = options.orientation;
             }
+            this._options = Object.assign(Object.assign({}, this.options), options);
             this.splitview.layout(this.splitview.size, this.splitview.orthogonalSize);
         }
         focus() {
@@ -9342,6 +9463,7 @@
             return this._options;
         }
         constructor(parentElement, options) {
+            var _a;
             super(parentElement, options.disableAutoResizing);
             this._id = nextLayoutId.next();
             this._disposable = new MutableDisposable();
@@ -9356,10 +9478,9 @@
             this.onDidAddView = this._onDidAddView.event;
             this._onDidRemoveView = new Emitter();
             this.onDidRemoveView = this._onDidRemoveView.event;
-            if (typeof options.className === 'string') {
-                this.element.classList.add(options.className);
-            }
             this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
+            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 = {};
@@ -9381,6 +9502,13 @@
             //noop
         }
         updateOptions(options) {
+            var _a, _b;
+            if ('className' in options) {
+                this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
+            }
+            if ('disableResizing' in options) {
+                this.disableResizing = (_b = options.disableAutoResizing) !== null && _b !== void 0 ? _b : false;
+            }
             this._options = Object.assign(Object.assign({}, this.options), options);
         }
         addPanel(options) {