dockview-core 4.1.0 → 4.2.0

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/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;
@@ -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.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",