From 0df4062de4e3da89d11b5429b0a513de62a7dd49 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Wed, 17 Jan 2024 19:46:12 +0000
Subject: [PATCH] feat: scrollbar as default

---
 .codesandbox/ci.json                          |  3 +-
 .../src/dockview/dockviewGroupPanel.scss      |  2 +-
 packages/docs/docs/components/dockview.mdx    | 17 ++++
 .../scrollbars-dockview/package.json          | 34 ++++++++
 .../scrollbars-dockview/public/index.html     | 45 +++++++++++
 .../scrollbars-dockview/src/app.scss          | 16 ++++
 .../sandboxes/scrollbars-dockview/src/app.tsx | 77 +++++++++++++++++++
 .../scrollbars-dockview/src/index.tsx         | 20 +++++
 .../scrollbars-dockview/src/styles.css        | 16 ++++
 .../scrollbars-dockview/tsconfig.json         | 18 +++++
 10 files changed, 246 insertions(+), 2 deletions(-)
 create mode 100644 packages/docs/sandboxes/scrollbars-dockview/package.json
 create mode 100644 packages/docs/sandboxes/scrollbars-dockview/public/index.html
 create mode 100644 packages/docs/sandboxes/scrollbars-dockview/src/app.scss
 create mode 100644 packages/docs/sandboxes/scrollbars-dockview/src/app.tsx
 create mode 100644 packages/docs/sandboxes/scrollbars-dockview/src/index.tsx
 create mode 100644 packages/docs/sandboxes/scrollbars-dockview/src/styles.css
 create mode 100644 packages/docs/sandboxes/scrollbars-dockview/tsconfig.json

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index f460a9448..e450b957b 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -28,6 +28,7 @@
     "/packages/docs/sandboxes/rendermode-dockview",
     "/packages/docs/sandboxes/resize-dockview",
     "/packages/docs/sandboxes/resizecontainer-dockview",
+    "/packages/docs/sandboxes/scrollbars-dockview",
     "/packages/docs/sandboxes/simple-dockview",
     "/packages/docs/sandboxes/simple-gridview",
     "/packages/docs/sandboxes/simple-paneview",
@@ -40,4 +41,4 @@
     "/packages/docs/sandboxes/javascript/vanilla-dockview"
   ],
   "node": "18"
-}
+}
\ No newline at end of file
diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanel.scss b/packages/dockview-core/src/dockview/dockviewGroupPanel.scss
index d1c10568a..dc8b46a8d 100644
--- a/packages/dockview-core/src/dockview/dockviewGroupPanel.scss
+++ b/packages/dockview-core/src/dockview/dockviewGroupPanel.scss
@@ -17,7 +17,7 @@
 
     > .content-container {
         flex-grow: 1;
-        overflow: hidden;
+        min-height: 0;
         outline: none;
     }
 }
diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx
index 0472c1e1a..e31864d21 100644
--- a/packages/docs/docs/components/dockview.mdx
+++ b/packages/docs/docs/components/dockview.mdx
@@ -31,6 +31,7 @@ import DockviewKeyboard from '@site/sandboxes/keyboard-dockview/src/app';
 import DockviewPopoutGroup from '@site/sandboxes/popoutgroup-dockview/src/app';
 import DockviewMaximizeGroup from '@site/sandboxes/maximizegroup-dockview/src/app';
 import DockviewRenderMode from '@site/sandboxes/rendermode-dockview/src/app';
+import DockviewScrollbars from '@site/sandboxes/scrollbars-dockview/src/app';
 
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
@@ -196,6 +197,22 @@ If you refresh the page you should notice your layout is loaded as you left it.
     react={DockviewPersistance}
 />
 
+## Scrollbars
+
+Scrollbars will appear if the contents of your view has a fixed height. If you are using a relative height such
+as *100%* you will need to define an inner container with the appropiate `overflow` value to allow scrollbars to appear.
+
+The following container three views:
+- **Panel 1**: Sets `height: 100%` and no scrollbar appears even, the content is clipped.
+- **Panel 2**: Sets `height: 2000px` and a scrollbar does appear since a fixed height has been used.
+- **Panel 3**: Sets `height: 100%` and defines an inner component with `overflow: auto` to enable the scrollbars.
+
+
+<MultiFrameworkContainer
+    sandboxId="scrollbars-dockview"
+    react={DockviewScrollbars}
+/>
+
 ## Resizing
 
 ### Panel Resizing
diff --git a/packages/docs/sandboxes/scrollbars-dockview/package.json b/packages/docs/sandboxes/scrollbars-dockview/package.json
new file mode 100644
index 000000000..6d2ffca5d
--- /dev/null
+++ b/packages/docs/sandboxes/scrollbars-dockview/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "scrollbars-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/uuid": "^9.0.0",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
\ No newline at end of file
diff --git a/packages/docs/sandboxes/scrollbars-dockview/public/index.html b/packages/docs/sandboxes/scrollbars-dockview/public/index.html
new file mode 100644
index 000000000..5a4850c1d
--- /dev/null
+++ b/packages/docs/sandboxes/scrollbars-dockview/public/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/packages/docs/sandboxes/scrollbars-dockview/src/app.scss b/packages/docs/sandboxes/scrollbars-dockview/src/app.scss
new file mode 100644
index 000000000..e03cd2acf
--- /dev/null
+++ b/packages/docs/sandboxes/scrollbars-dockview/src/app.scss
@@ -0,0 +1,16 @@
+.group-control {
+    .action {
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        font-size: 18px;
+        cursor: pointer;
+
+        &:hover {
+            border-radius: 2px;
+            background-color: var(--dv-icon-hover-background-color);
+        }
+    }
+}
diff --git a/packages/docs/sandboxes/scrollbars-dockview/src/app.tsx b/packages/docs/sandboxes/scrollbars-dockview/src/app.tsx
new file mode 100644
index 000000000..bece60098
--- /dev/null
+++ b/packages/docs/sandboxes/scrollbars-dockview/src/app.tsx
@@ -0,0 +1,77 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import './app.scss';
+
+const TEXT =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+const components = {
+    fixedHeightContainer: (props: IDockviewPanelProps<{ title: string }>) => {
+        return (
+            <div style={{ height: '100%', color: 'white' }}>
+                {[TEXT, '\n\n'].join('').repeat(20)}
+            </div>
+        );
+    },
+    overflowContainer: (props: IDockviewPanelProps<{ title: string }>) => {
+        return (
+            <div style={{ height: '2000px', overflow: 'auto', color: 'white' }}>
+                {[TEXT, '\n\n'].join('').repeat(20)}
+            </div>
+        );
+    },
+    userDefinedOverflowContainer: (
+        props: IDockviewPanelProps<{ title: string }>
+    ) => {
+        return (
+            <div style={{ height: '100%', color: 'white' }}>
+                <div
+                    style={{
+                        height: '100%',
+                        color: 'white',
+                        overflow: 'auto',
+                    }}
+                >
+                    {[TEXT, '\n\n'].join('').repeat(20)}
+                </div>
+            </div>
+        );
+    },
+};
+
+const DockviewComponent = (props: { theme?: string }) => {
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'fixedHeightContainer',
+            title: 'Panel 1',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'overflowContainer',
+            title: 'Panel 2',
+            position: { direction: 'right' },
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'userDefinedOverflowContainer',
+            title: 'Panel 3',
+            position: { direction: 'right' },
+        });
+    };
+
+    return (
+        <DockviewReact
+            components={components}
+            onReady={onReady}
+            className={props.theme || 'dockview-theme-abyss'}
+        />
+    );
+};
+
+export default DockviewComponent;
diff --git a/packages/docs/sandboxes/scrollbars-dockview/src/index.tsx b/packages/docs/sandboxes/scrollbars-dockview/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/scrollbars-dockview/src/index.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/scrollbars-dockview/src/styles.css b/packages/docs/sandboxes/scrollbars-dockview/src/styles.css
new file mode 100644
index 000000000..92b6a1b36
--- /dev/null
+++ b/packages/docs/sandboxes/scrollbars-dockview/src/styles.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0px;
+  color: white;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.app {
+  height: 100%;
+
+}
diff --git a/packages/docs/sandboxes/scrollbars-dockview/tsconfig.json b/packages/docs/sandboxes/scrollbars-dockview/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/scrollbars-dockview/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}