dockview 4.13.1 → 5.1.0

package/dist/styles/dockview.css

@@ -2,11 +2,8 @@
   position: relative;
   overflow: hidden;
 }
-.dv-scrollable .dv-scrollbar-horizontal {
+.dv-scrollable .dv-scrollbar {
   position: absolute;
-  bottom: 0px;
-  left: 0px;
-  height: 4px;
   border-radius: 2px;
   background-color: transparent;
   /* GPU optimizations */
@@ -18,7 +15,17 @@
   transition-duration: 1s;
   transition-delay: 0s;
 }
-.dv-scrollable:hover .dv-scrollbar-horizontal, .dv-scrollable.dv-scrollable-resizing .dv-scrollbar-horizontal, .dv-scrollable.dv-scrollable-scrolling .dv-scrollbar-horizontal {
+.dv-scrollable .dv-scrollbar-horizontal {
+  bottom: 0px;
+  left: 0px;
+  height: 4px;
+}
+.dv-scrollable .dv-scrollbar-vertical {
+  right: 0px;
+  top: 0px;
+  width: 4px;
+}
+.dv-scrollable:hover .dv-scrollbar, .dv-scrollable.dv-scrollable-resizing .dv-scrollbar, .dv-scrollable.dv-scrollable-scrolling .dv-scrollbar {
   background-color: var(--dv-scrollbar-background-color, rgba(255, 255, 255, 0.25));
 }
 .dv-svg {
@@ -686,10 +693,10 @@
 }
 .dv-groupview {
   display: flex;
-  flex-direction: column;
   height: 100%;
   background-color: var(--dv-group-view-background-color);
   overflow: hidden;
+  flex-direction: column;
 }
 .dv-groupview:focus {
   outline: none;
@@ -699,6 +706,15 @@
   min-height: 0;
   outline: none;
 }
+.dv-groupview.dv-groupview-header-bottom {
+  flex-direction: column-reverse;
+}
+.dv-groupview.dv-groupview-header-left {
+  flex-direction: row;
+}
+.dv-groupview.dv-groupview-header-right {
+  flex-direction: row-reverse;
+}
 .dv-root-wrapper {
   height: 100%;
   width: 100%;
@@ -1092,6 +1108,7 @@
 .dv-tab .dv-default-tab {
   position: relative;
   height: 100%;
+  width: 100%;
   display: flex;
   align-items: center;
   white-space: nowrap;
@@ -1139,7 +1156,13 @@
   /* Track */
   /* Handle */
 }
-.dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before {
+.dv-tabs-container.dv-tabs-container-vertical {
+  width: 100%;
+  height: fit-content;
+  max-height: 100%;
+  writing-mode: vertical-rl;
+}
+.dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before, .dv-tabs-container.dv-vertical .dv-tab:not(:first-child)::before {
   content: " ";
   position: absolute;
   top: 0;
@@ -1147,9 +1170,15 @@
   z-index: 5;
   pointer-events: none;
   background-color: var(--dv-tab-divider-color);
+}
+.dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before {
   width: 1px;
   height: 100%;
 }
+.dv-tabs-container.dv-vertical .dv-tab:not(:first-child)::before {
+  width: 100%;
+  height: 1px;
+}
 .dv-tabs-container::-webkit-scrollbar {
   height: 3px;
 }
@@ -1175,11 +1204,30 @@
   margin: var(--dv-tab-margin);
 }
 
+.dv-tabs-container-vertical .dv-tab {
+  padding: 0.5rem 0.25rem;
+}
+
 .dv-tabs-overflow-container {
   flex-direction: column;
   height: unset;
+  max-height: min(50vh, 400px);
+  overflow-y: auto;
   border: 1px solid var(--dv-tab-divider-color);
   background-color: var(--dv-group-view-background-color);
+  /* Scrollbar styling for webkit browsers */
+  /* Firefox scrollbar */
+  scrollbar-width: thin;
+}
+.dv-tabs-overflow-container::-webkit-scrollbar {
+  width: 6px;
+}
+.dv-tabs-overflow-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+.dv-tabs-overflow-container::-webkit-scrollbar-thumb {
+  background: var(--dv-tabs-container-scrollbar-color);
+  border-radius: 3px;
 }
 .dv-tabs-overflow-container .dv-tab:not(:last-child) {
   border-bottom: 1px solid var(--dv-tab-divider-color);
@@ -1223,6 +1271,14 @@
 .dv-tabs-and-actions-container .dv-right-actions-container {
   display: flex;
 }
+.dv-tabs-and-actions-container .dv-right-actions-container.dv-right-actions-container-vertical {
+  flex-direction: column;
+}
+.dv-tabs-and-actions-container.dv-groupview-header-vertical {
+  flex-direction: column;
+  height: auto;
+  width: var(--dv-tabs-and-actions-container-height);
+}
 .dv-watermark {
   display: flex;
   height: 100%;

package/package.json

@@ -1,61 +1,72 @@
 {
-  "name": "dockview",
-  "version": "4.13.1",
-  "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
-  "keywords": [
-    "splitview",
-    "split-view",
-    "gridview",
-    "grid-view",
-    "dockview",
-    "dock-view",
-    "grid",
-    "tabs",
-    "layout",
-    "layout manager",
-    "dock layout",
-    "dock",
-    "docking",
-    "splitter",
-    "drag-and-drop",
-    "drag",
-    "drop",
-    "react",
-    "react-component"
-  ],
-  "homepage": "https://github.com/mathuo/dockview",
-  "bugs": {
-    "url": "https://github.com/mathuo/dockview/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mathuo/dockview.git"
-  },
-  "license": "MIT",
-  "author": "https://github.com/mathuo",
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/cjs/index.d.ts",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "scripts": {
-    "build:bundle": "rollup -c",
-    "build:cjs": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.json --verbose --extendedDiagnostics",
-    "build:css": "node scripts/copy-css.js",
-    "build:esm": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics",
-    "build": "npm run build:cjs && npm run build:esm && npm run build:css",
-    "clean": "rimraf dist/ .build/ .rollup.cache/",
-    "prepublishOnly": "npm run rebuild && npm run build:bundle && npm run test",
-    "rebuild": "npm run clean && npm run build",
-    "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview",
-    "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage"
-  },
-  "dependencies": {
-    "dockview-core": "^4.13.1"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-  }
+    "name": "dockview",
+    "version": "5.1.0",
+    "description": "React docking layout manager — tabs, groups, grids, splitviews, drag and drop, floating panels",
+    "keywords": [
+        "splitview",
+        "split-view",
+        "gridview",
+        "grid-view",
+        "dockview",
+        "dock-view",
+        "grid",
+        "tabs",
+        "layout",
+        "layout manager",
+        "dock layout",
+        "dock",
+        "docking",
+        "splitter",
+        "drag-and-drop",
+        "drag",
+        "drop",
+        "typescript",
+        "zero-dependency",
+        "ide-layout",
+        "panel",
+        "resizable",
+        "floating",
+        "serialization",
+        "workbench",
+        "react",
+        "react-component"
+    ],
+    "homepage": "https://github.com/mathuo/dockview",
+    "bugs": {
+        "url": "https://github.com/mathuo/dockview/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/mathuo/dockview.git"
+    },
+    "license": "MIT",
+    "author": "https://github.com/mathuo",
+    "main": "./dist/package/main.cjs.js",
+    "module": "./dist/package/main.esm.mjs",
+    "types": "./dist/cjs/index.d.ts",
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "scripts": {
+        "build:bundle": "rollup -c",
+        "build:cjs": "tsc --build ./tsconfig.json --verbose --extendedDiagnostics",
+        "build:css": "node scripts/copy-css.js",
+        "build:esm": "tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics",
+        "build": "npm run build:cjs && npm run build:esm && npm run build:css",
+        "clean": "rimraf dist/ .build/ .rollup.cache/",
+        "rebuild": "npm run clean && npm run build",
+        "test": "jest --selectProjects dockview",
+        "test:cov": "jest --selectProjects dockview --coverage",
+        "lint": "eslint 'src/**/*.{ts,tsx,js,jsx}'",
+        "lint:fix": "eslint 'src/**/*.{ts,tsx,js,jsx}' --fix",
+        "format": "prettier --write 'src/**/*.{ts,tsx,js,jsx}'",
+        "format:check": "prettier --check 'src/**/*.{ts,tsx,js,jsx}'"
+    },
+    "dependencies": {
+        "dockview-core": "^5.1.0"
+    },
+    "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    }
 }