dockview-core 4.1.0 → 4.2.1

package/dist/esm/dockview/components/titlebar/tabs.js

@@ -55,9 +55,15 @@ export class Tabs extends CompositeDisposable {
         this._tabsList = document.createElement('div');
         this._tabsList.className = 'dv-tabs-container dv-horizontal';
         this.showTabsOverflowControl = options.showTabsOverflowControl;
-        const scrollbar = new Scrollbar(this._tabsList);
-        this._element = scrollbar.element;
-        this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, scrollbar, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, addDisposableListener(this.element, 'pointerdown', (event) => {
+        if (accessor.options.scrollbars === 'native') {
+            this._element = this._tabsList;
+        }
+        else {
+            const scrollbar = new Scrollbar(this._tabsList);
+            this._element = scrollbar.element;
+            this.addDisposables(scrollbar);
+        }
+        this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, addDisposableListener(this.element, 'pointerdown', (event) => {
             if (event.defaultPrevented) {
                 return;
             }

package/dist/esm/dockview/components/titlebar/tabsContainer.js

@@ -58,7 +58,7 @@ export class TabsContainer extends CompositeDisposable {
         this._element.appendChild(this.leftActionsContainer);
         this._element.appendChild(this.voidContainer.element);
         this._element.appendChild(this.rightActionsContainer);
-        this.addDisposables(accessor.onDidOptionsChange(() => {
+        this.addDisposables(this.tabs.onDrop((e) => this._onDrop.fire(e)), this.tabs.onWillShowOverlay((e) => this._onWillShowOverlay.fire(e)), accessor.onDidOptionsChange(() => {
             this.tabs.showTabsOverflowControl =
                 !accessor.options.disableTabsOverflowList;
         }), this.tabs.onOverflowTabsChange((event) => {

package/dist/esm/dockview/dockviewComponent.js

@@ -128,13 +128,48 @@ export class DockviewComponent extends BaseGrid {
         this._onDidActiveGroupChange = new Emitter();
         this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
         this._moving = false;
+        this._options = options;
         this.popupService = new PopupService(this.element);
-        this.updateDropTargetModel(options);
         this._themeClassnames = new Classnames(this.element);
+        this._api = new DockviewApi(this);
         this.rootDropTargetContainer = new DropTargetAnchorContainer(this.element, { disabled: true });
         this.overlayRenderContainer = new OverlayRenderContainer(this.gridview.element, this);
+        this._rootDropTarget = new Droptarget(this.element, {
+            className: 'dv-drop-target-edge',
+            canDisplayOverlay: (event, position) => {
+                const data = getPanelData();
+                if (data) {
+                    if (data.viewId !== this.id) {
+                        return false;
+                    }
+                    if (position === 'center') {
+                        // center drop target is only allowed if there are no panels in the grid
+                        // floating panels are allowed
+                        return this.gridview.length === 0;
+                    }
+                    return true;
+                }
+                if (position === 'center' && this.gridview.length !== 0) {
+                    /**
+                     * for external events only show the four-corner drag overlays, disable
+                     * the center position so that external drag events can fall through to the group
+                     * and panel drop target handlers
+                     */
+                    return false;
+                }
+                const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
+                this._onUnhandledDragOverEvent.fire(firedEvent);
+                return firedEvent.isAccepted;
+            },
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+            overlayModel: (_c = options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL,
+            getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
+        });
+        this.updateDropTargetModel(options);
         toggleClass(this.gridview.element, 'dv-dockview', true);
         toggleClass(this.element, 'dv-debug', !!options.debug);
+        this.updateTheme();
+        this.updateWatermark();
         if (options.debug) {
             this.addDisposables(new StrictEventsSequencing(this));
         }
@@ -170,41 +205,7 @@ export class DockviewComponent extends BaseGrid {
             for (const group of [...this._popoutGroups]) {
                 group.disposable.dispose();
             }
-        }));
-        this._options = options;
-        this.updateTheme();
-        this._rootDropTarget = new Droptarget(this.element, {
-            className: 'dv-drop-target-edge',
-            canDisplayOverlay: (event, position) => {
-                const data = getPanelData();
-                if (data) {
-                    if (data.viewId !== this.id) {
-                        return false;
-                    }
-                    if (position === 'center') {
-                        // center drop target is only allowed if there are no panels in the grid
-                        // floating panels are allowed
-                        return this.gridview.length === 0;
-                    }
-                    return true;
-                }
-                if (position === 'center' && this.gridview.length !== 0) {
-                    /**
-                     * for external events only show the four-corner drag overlays, disable
-                     * the center position so that external drag events can fall through to the group
-                     * and panel drop target handlers
-                     */
-                    return false;
-                }
-                const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
-                this._onUnhandledDragOverEvent.fire(firedEvent);
-                return firedEvent.isAccepted;
-            },
-            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-            overlayModel: (_c = this.options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL,
-            getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
-        });
-        this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
+        }), this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
             if (this.gridview.length > 0 && event.position === 'center') {
                 // option only available when no panels in primary grid
                 return;
@@ -255,8 +256,6 @@ export class DockviewComponent extends BaseGrid {
                 }));
             }
         }), this._rootDropTarget);
-        this._api = new DockviewApi(this);
-        this.updateWatermark();
     }
     setVisible(panel, visible) {
         switch (panel.api.location.type) {

package/dist/esm/dockview/options.d.ts

@@ -58,6 +58,13 @@ export interface DockviewOptions {
     noPanelsOverlay?: 'emptyGroup' | 'watermark';
     theme?: DockviewTheme;
     disableTabsOverflowList?: boolean;
+    /**
+     * Select `native` to use built-in scrollbar behaviours and `custom` to use an internal implementation
+     * that allows for improved scrollbar overlay UX.
+     *
+     * This is only applied to the tab header section. Defaults to `custom`.
+     */
+    scrollbars?: 'native' | 'custom';
 }
 export interface DockviewDndOverlayEvent extends IAcceptableEvent {
     nativeEvent: DragEvent;

package/dist/esm/dockview/options.js

@@ -31,6 +31,7 @@ export const PROPERTY_KEYS_DOCKVIEW = (() => {
         dndEdges: undefined,
         theme: undefined,
         disableTabsOverflowList: undefined,
+        scrollbars: undefined,
     };
     return Object.keys(properties);
 })();

package/dist/styles/dockview.css

@@ -1,7 +1,6 @@
 .dv-scrollable {
   position: relative;
   overflow: hidden;
-  width: 100%;
 }
 .dv-scrollable .dv-scrollbar-horizontal {
   position: absolute;
@@ -249,10 +248,10 @@
   opacity: 0;
   transition: none;
 }
-.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
+.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {
   position: relative;
 }
-.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab::after {
+.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {
   position: absolute;
   left: 0px;
   top: 0px;
@@ -262,10 +261,10 @@
   background-color: #94527e;
   z-index: 999;
 }
-.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
+.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {
   position: relative;
 }
-.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab::after {
+.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {
   position: absolute;
   left: 0px;
   bottom: 0px;
@@ -647,19 +646,19 @@
   position: relative;
 }
 
-.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
+.dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {
   background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
   color: var(--dv-activegroup-visiblepanel-tab-color);
 }
-.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-inactive-tab {
+.dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-inactive-tab {
   background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
   color: var(--dv-activegroup-hiddenpanel-tab-color);
 }
-.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
+.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {
   background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
   color: var(--dv-inactivegroup-visiblepanel-tab-color);
 }
-.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-inactive-tab {
+.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-inactive-tab {
   background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
   color: var(--dv-inactivegroup-hiddenpanel-tab-color);
 }
@@ -1100,7 +1099,7 @@
 .dv-tabs-container {
   display: flex;
   height: 100%;
-  overflow: hidden;
+  overflow: auto;
   scrollbar-width: thin;
   /* Track */
   /* Handle */
@@ -1126,6 +1125,10 @@
   background: var(--dv-tabs-container-scrollbar-color);
 }
 
+.dv-scrollable > .dv-tabs-container {
+  overflow: hidden;
+}
+
 .dv-tab {
   -webkit-user-drag: element;
   outline: none;
@@ -1162,6 +1165,9 @@
   height: var(--dv-tabs-and-actions-container-height);
   font-size: var(--dv-tabs-and-actions-container-font-size);
 }
+.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-scrollable {
+  flex-grow: 1;
+}
 .dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {
   flex-grow: 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-core",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",