From 3a59ecff2ad5429dfc3bc4091817b74a55e183d8 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sat, 10 Feb 2024 21:16:33 +0000
Subject: [PATCH] chore: docs
---
.../components/titlebar/tabsContainer.spec.ts | 20 +-
.../{components => advanced}/keyboard.mdx | 0
packages/docs/docs/components/advanced.mdx | 8 -
packages/docs/docs/components/dockview.mdx | 42 +-
packages/docs/docs/components/events.mdx | 12 -
packages/docs/docs/components/iframe.mdx | 28 -
packages/docs/docs/components/nested.mdx | 9 -
packages/docs/docs/components/scrollbars.mdx | 22 -
packages/docs/docs/components/theme.mdx | 26 -
packages/docs/docs/components/watermark.mdx | 15 -
packages/docs/docs/core/dnd/_category_.json | 6 +
.../dnd/dragAndDrop copy.mdx} | 15 +-
packages/docs/docs/core/dnd/dragAndDrop.mdx | 44 ++
.../docs/docs/core/groups/constraints.mdx | 7 +
packages/docs/docs/core/groups/controls.mdx | 66 +-
.../docs/docs/core/groups/floatingGroups.mdx | 9 +-
.../docs/docs/core/groups/maxmizedGroups.mdx | 26 +-
.../docs/docs/core/groups/popoutGroups.mdx | 11 +-
packages/docs/docs/core/groups/resizing.mdx | 50 ++
packages/docs/docs/core/panels/register.mdx | 8 +-
packages/docs/docs/core/panels/rendering.mdx | 11 +-
.../{components => core/panels}/resizing.mdx | 9 +-
packages/docs/docs/core/scrollbars.mdx | 20 +
packages/docs/docs/core/state/_category_.json | 6 +
packages/docs/docs/core/state/load.mdx | 47 ++
.../layout.mdx => core/state/save.mdx} | 19 +-
packages/docs/docs/core/watermark.mdx | 31 +
.../docs/sandboxes/demo-dockview/src/app.tsx | 12 +
.../dockview/group-actions}/package.json | 2 +-
.../dockview/group-actions}/public/index.html | 0
.../dockview/group-actions}/src/app.scss | 0
.../dockview/group-actions}/src/app.tsx | 0
.../dockview/group-actions}/src/index.tsx | 0
.../dockview/group-actions}/src/styles.css | 0
.../dockview/group-actions}/tsconfig.json | 0
.../dockview/layout}/package.json | 4 +-
.../dockview/layout}/public/index.html | 0
.../dockview/layout}/src/app.tsx | 0
.../dockview/layout}/src/index.tsx | 0
.../dockview/layout}/src/styles.css | 0
.../dockview/layout}/tsconfig.json | 0
.../dockview/maximize-group}/package.json | 2 +-
.../maximize-group}/public/index.html | 0
.../dockview/maximize-group}/src/app.tsx | 0
.../dockview/maximize-group}/src/index.tsx | 0
.../dockview/maximize-group}/src/styles.css | 0
.../dockview/maximize-group}/src/utils.tsx | 0
.../dockview/maximize-group}/tsconfig.json | 0
.../dockview/popout-group}/package.json | 4 +-
.../dockview/popout-group}/public/index.html | 0
.../dockview/popout-group}/src/app.tsx | 0
.../dockview/popout-group}/src/index.tsx | 0
.../dockview/popout-group}/src/popover.tsx | 0
.../dockview/popout-group}/src/styles.css | 0
.../dockview/popout-group}/src/utils.tsx | 0
.../dockview/popout-group}/tsconfig.json | 0
.../dockview/render-mode}/package.json | 2 +-
.../dockview/render-mode}/public/index.html | 0
.../dockview/render-mode}/src/app.scss | 0
.../dockview/render-mode}/src/app.tsx | 0
.../dockview/render-mode}/src/index.tsx | 0
.../dockview/render-mode}/src/styles.css | 0
.../dockview/render-mode}/tsconfig.json | 0
.../dockview/scrollbars}/package.json | 4 +-
.../dockview/scrollbars}/public/index.html | 0
.../dockview/scrollbars}/src/app.scss | 0
.../dockview/scrollbars}/src/app.tsx | 0
.../dockview/scrollbars}/src/index.tsx | 0
.../dockview/scrollbars}/src/styles.css | 0
.../dockview/scrollbars}/tsconfig.json | 0
.../dockview/watermark}/package.json | 4 +-
.../dockview/watermark}/public/index.html | 0
.../dockview/watermark}/src/app.tsx | 0
.../dockview/watermark}/src/index.tsx | 0
.../dockview/watermark}/src/styles.css | 0
.../dockview/watermark}/tsconfig.json | 0
.../src/components/ui/reference/docRef.tsx | 1 -
yarn.lock | 747 ++++++++++++++++--
78 files changed, 1041 insertions(+), 308 deletions(-)
rename packages/docs/docs/{components => advanced}/keyboard.mdx (100%)
delete mode 100644 packages/docs/docs/components/advanced.mdx
delete mode 100644 packages/docs/docs/components/events.mdx
delete mode 100644 packages/docs/docs/components/iframe.mdx
delete mode 100644 packages/docs/docs/components/nested.mdx
delete mode 100644 packages/docs/docs/components/scrollbars.mdx
delete mode 100644 packages/docs/docs/components/theme.mdx
delete mode 100644 packages/docs/docs/components/watermark.mdx
create mode 100644 packages/docs/docs/core/dnd/_category_.json
rename packages/docs/docs/{components/dragAndDrop.mdx => core/dnd/dragAndDrop copy.mdx} (92%)
create mode 100644 packages/docs/docs/core/dnd/dragAndDrop.mdx
create mode 100644 packages/docs/docs/core/groups/constraints.mdx
create mode 100644 packages/docs/docs/core/groups/resizing.mdx
rename packages/docs/docs/{components => core/panels}/resizing.mdx (87%)
create mode 100644 packages/docs/docs/core/scrollbars.mdx
create mode 100644 packages/docs/docs/core/state/_category_.json
create mode 100644 packages/docs/docs/core/state/load.mdx
rename packages/docs/docs/{components/layout.mdx => core/state/save.mdx} (79%)
create mode 100644 packages/docs/docs/core/watermark.mdx
rename packages/docs/sandboxes/{headeractions-dockview => react/dockview/group-actions}/package.json (94%)
rename packages/docs/sandboxes/{headeractions-dockview => react/dockview/group-actions}/public/index.html (100%)
rename packages/docs/sandboxes/{headeractions-dockview => react/dockview/group-actions}/src/app.scss (100%)
rename packages/docs/sandboxes/{headeractions-dockview => react/dockview/group-actions}/src/app.tsx (100%)
rename packages/docs/sandboxes/{headeractions-dockview => react/dockview/group-actions}/src/index.tsx (100%)
rename packages/docs/sandboxes/{headeractions-dockview => react/dockview/group-actions}/src/styles.css (100%)
rename packages/docs/sandboxes/{headeractions-dockview => react/dockview/group-actions}/tsconfig.json (100%)
rename packages/docs/sandboxes/{layout-dockview => react/dockview/layout}/package.json (95%)
rename packages/docs/sandboxes/{layout-dockview => react/dockview/layout}/public/index.html (100%)
rename packages/docs/sandboxes/{layout-dockview => react/dockview/layout}/src/app.tsx (100%)
rename packages/docs/sandboxes/{layout-dockview => react/dockview/layout}/src/index.tsx (100%)
rename packages/docs/sandboxes/{layout-dockview => react/dockview/layout}/src/styles.css (100%)
rename packages/docs/sandboxes/{layout-dockview => react/dockview/layout}/tsconfig.json (100%)
rename packages/docs/sandboxes/{maximizegroup-dockview => react/dockview/maximize-group}/package.json (94%)
rename packages/docs/sandboxes/{maximizegroup-dockview => react/dockview/maximize-group}/public/index.html (100%)
rename packages/docs/sandboxes/{maximizegroup-dockview => react/dockview/maximize-group}/src/app.tsx (100%)
rename packages/docs/sandboxes/{maximizegroup-dockview => react/dockview/maximize-group}/src/index.tsx (100%)
rename packages/docs/sandboxes/{maximizegroup-dockview => react/dockview/maximize-group}/src/styles.css (100%)
rename packages/docs/sandboxes/{maximizegroup-dockview => react/dockview/maximize-group}/src/utils.tsx (100%)
rename packages/docs/sandboxes/{maximizegroup-dockview => react/dockview/maximize-group}/tsconfig.json (100%)
rename packages/docs/sandboxes/{popoutgroup-dockview => react/dockview/popout-group}/package.json (94%)
rename packages/docs/sandboxes/{popoutgroup-dockview => react/dockview/popout-group}/public/index.html (100%)
rename packages/docs/sandboxes/{popoutgroup-dockview => react/dockview/popout-group}/src/app.tsx (100%)
rename packages/docs/sandboxes/{popoutgroup-dockview => react/dockview/popout-group}/src/index.tsx (100%)
rename packages/docs/sandboxes/{popoutgroup-dockview => react/dockview/popout-group}/src/popover.tsx (100%)
rename packages/docs/sandboxes/{popoutgroup-dockview => react/dockview/popout-group}/src/styles.css (100%)
rename packages/docs/sandboxes/{popoutgroup-dockview => react/dockview/popout-group}/src/utils.tsx (100%)
rename packages/docs/sandboxes/{popoutgroup-dockview => react/dockview/popout-group}/tsconfig.json (100%)
rename packages/docs/sandboxes/{rendermode-dockview => react/dockview/render-mode}/package.json (95%)
rename packages/docs/sandboxes/{rendermode-dockview => react/dockview/render-mode}/public/index.html (100%)
rename packages/docs/sandboxes/{rendermode-dockview => react/dockview/render-mode}/src/app.scss (100%)
rename packages/docs/sandboxes/{rendermode-dockview => react/dockview/render-mode}/src/app.tsx (100%)
rename packages/docs/sandboxes/{rendermode-dockview => react/dockview/render-mode}/src/index.tsx (100%)
rename packages/docs/sandboxes/{rendermode-dockview => react/dockview/render-mode}/src/styles.css (100%)
rename packages/docs/sandboxes/{rendermode-dockview => react/dockview/render-mode}/tsconfig.json (100%)
rename packages/docs/sandboxes/{scrollbars-dockview => react/dockview/scrollbars}/package.json (95%)
rename packages/docs/sandboxes/{scrollbars-dockview => react/dockview/scrollbars}/public/index.html (100%)
rename packages/docs/sandboxes/{scrollbars-dockview => react/dockview/scrollbars}/src/app.scss (100%)
rename packages/docs/sandboxes/{scrollbars-dockview => react/dockview/scrollbars}/src/app.tsx (100%)
rename packages/docs/sandboxes/{scrollbars-dockview => react/dockview/scrollbars}/src/index.tsx (100%)
rename packages/docs/sandboxes/{scrollbars-dockview => react/dockview/scrollbars}/src/styles.css (100%)
rename packages/docs/sandboxes/{scrollbars-dockview => react/dockview/scrollbars}/tsconfig.json (100%)
rename packages/docs/sandboxes/{watermark-dockview => react/dockview/watermark}/package.json (94%)
rename packages/docs/sandboxes/{watermark-dockview => react/dockview/watermark}/public/index.html (100%)
rename packages/docs/sandboxes/{watermark-dockview => react/dockview/watermark}/src/app.tsx (100%)
rename packages/docs/sandboxes/{watermark-dockview => react/dockview/watermark}/src/index.tsx (100%)
rename packages/docs/sandboxes/{watermark-dockview => react/dockview/watermark}/src/styles.css (100%)
rename packages/docs/sandboxes/{watermark-dockview => react/dockview/watermark}/tsconfig.json (100%)
diff --git a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
index af1c3d68c..22f8c02ef 100644
--- a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
+++ b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
@@ -59,7 +59,7 @@ describe('tabsContainer', () => {
fireEvent.dragEnter(emptySpace);
fireEvent.dragOver(emptySpace);
- expect(groupView.canDisplayOverlay).toBeCalled();
+ expect(groupView.canDisplayOverlay).toHaveBeenCalled();
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
@@ -127,7 +127,7 @@ describe('tabsContainer', () => {
fireEvent.dragEnter(emptySpace);
fireEvent.dragOver(emptySpace);
- expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
+ expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
@@ -192,7 +192,7 @@ describe('tabsContainer', () => {
fireEvent.dragEnter(emptySpace);
fireEvent.dragOver(emptySpace);
- expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
+ expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
@@ -257,7 +257,7 @@ describe('tabsContainer', () => {
fireEvent.dragEnter(emptySpace);
fireEvent.dragOver(emptySpace);
- expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
+ expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
@@ -327,7 +327,7 @@ describe('tabsContainer', () => {
fireEvent.dragEnter(emptySpace);
fireEvent.dragOver(emptySpace);
- expect(groupView.canDisplayOverlay).toBeCalledTimes(1);
+ expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(1);
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
@@ -507,7 +507,7 @@ describe('tabsContainer', () => {
const eventPreventDefaultSpy = jest.spyOn(event, 'preventDefault');
fireEvent(container, event);
- expect(accessor.addFloatingGroup).toBeCalledWith(
+ expect(accessor.addFloatingGroup).toHaveBeenCalledWith(
groupPanel,
{
x: 100,
@@ -567,15 +567,15 @@ describe('tabsContainer', () => {
const eventPreventDefaultSpy = jest.spyOn(event, 'preventDefault');
fireEvent(container, event);
- expect(accessor.addFloatingGroup).toBeCalledTimes(0);
- expect(eventPreventDefaultSpy).toBeCalledTimes(0);
+ expect(accessor.addFloatingGroup).toHaveBeenCalledTimes(0);
+ expect(eventPreventDefaultSpy).toHaveBeenCalledTimes(0);
const event2 = new KeyboardEvent('mousedown', { shiftKey: false });
const eventPreventDefaultSpy2 = jest.spyOn(event2, 'preventDefault');
fireEvent(container, event2);
- expect(accessor.addFloatingGroup).toBeCalledTimes(0);
- expect(eventPreventDefaultSpy2).toBeCalledTimes(0);
+ expect(accessor.addFloatingGroup).toHaveBeenCalledTimes(0);
+ expect(eventPreventDefaultSpy2).toHaveBeenCalledTimes(0);
});
test('that selecting a tab with shift down will move that tab into a new floating group', () => {
diff --git a/packages/docs/docs/components/keyboard.mdx b/packages/docs/docs/advanced/keyboard.mdx
similarity index 100%
rename from packages/docs/docs/components/keyboard.mdx
rename to packages/docs/docs/advanced/keyboard.mdx
diff --git a/packages/docs/docs/components/advanced.mdx b/packages/docs/docs/components/advanced.mdx
deleted file mode 100644
index 3d5e2cc78..000000000
--- a/packages/docs/docs/components/advanced.mdx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewNative2 from '@site/sandboxes/nativeapp-dockview/src/app';
-
-# Window-like mananger with tabs
-
-
-
-
diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx
index 01aad6fce..b55b1a6ff 100644
--- a/packages/docs/docs/components/dockview.mdx
+++ b/packages/docs/docs/components/dockview.mdx
@@ -7,15 +7,15 @@ import { MultiFrameworkContainer } from '@site/src/components/ui/container';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
-import DockviewPersistence from '@site/sandboxes/layout-dockview/src/app';
+// import DockviewPersistence from '@site/sandboxes/layout-dockview/src/app';
import SimpleDockview from '@site/sandboxes/simple-dockview/src/app';
import ResizeDockview from '@site/sandboxes/resize-dockview/src/app';
-import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app';
+// import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app';
import DockviewConstraints from '@site/sandboxes/constraints-dockview/src/app';
import DndDockview from '@site/sandboxes/dnd-dockview/src/app';
import NestedDockview from '@site/sandboxes/nested-dockview/src/app';
import EventsDockview from '@site/sandboxes/events-dockview/src/app';
-import DockviewGroupControl from '@site/sandboxes/headeractions-dockview/src/app';
+// import DockviewGroupControl from '@site/sandboxes/headeractions-dockview/src/app';
import CustomHeadersDockview from '@site/sandboxes/customheader-dockview/src/app';
import DockviewNative from '@site/sandboxes/fullwidthtab-dockview/src/app';
import DockviewNative2 from '@site/sandboxes/nativeapp-dockview/src/app';
@@ -28,10 +28,10 @@ import DockviewWithIFrames from '@site/sandboxes/iframe-dockview/src/app';
// import DockviewFloating from '@site/sandboxes/floatinggroup-dockview/src/app';
import DockviewLockedGroup from '@site/sandboxes/lockedgroup-dockview/src/app';
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 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 DockviewFocus from '@site/sandboxes/focus-dockview/src/app';
@@ -199,10 +199,10 @@ const onReady = (event: DockviewReadyEvent) => {
Here is an example using the above code loading from and saving to localStorage.
If you refresh the page you should notice your layout is loaded as you left it.
-
+/> */}
## Scrollbars
@@ -215,10 +215,10 @@ The following container three views:
- **Panel 3**: Sets `height: 100%` and defines an inner component with `overflow: auto` to enable the scrollbars.
-
+/> */}
## Resizing
@@ -264,10 +264,10 @@ When the dockview is empty you may want to display some fallback content, this i
By default there the watermark has no content but you can provide as a prop to `DockviewReact` a `watermarkComponent`
which will be rendered when there are no panels or groups.
-
+/> */}
## Drag And Drop
@@ -447,11 +447,11 @@ const group = props.containerApi.addGroup();
props.group.api.moveTo({ group });
```
-
+/> */}
## Maximized Groups
@@ -486,11 +486,11 @@ const result: boolean = api.isMaxmized();
api.exitMaximized();
```
-
+/> */}
## Panels
@@ -663,11 +663,11 @@ This design allows for maximum performance at some cost.
- `always` mode. In this mode when panels become hidden the HTMLElement is not destroyed so all DOM state such as scrollbar positions will be maintained. This is implemented by rendering each panel as an absolutely positioned
HTMLElement and hidden the HTMLElement with `display: none` when it should be hidden.
-
+/> */}
####
@@ -937,10 +937,10 @@ const RightHeaderActionsComponent = (props: IDockviewHeaderActionsProps) => {
};
```
-
+/> */}
### Constraints
diff --git a/packages/docs/docs/components/events.mdx b/packages/docs/docs/components/events.mdx
deleted file mode 100644
index e4edada93..000000000
--- a/packages/docs/docs/components/events.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import EventsDockview from '@site/sandboxes/events-dockview/src/app';
-
-# Events
-
-A simple example showing events fired by `dockviewz that can be interacted with.
-
-
diff --git a/packages/docs/docs/components/iframe.mdx b/packages/docs/docs/components/iframe.mdx
deleted file mode 100644
index 9758dd506..000000000
--- a/packages/docs/docs/components/iframe.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewWithIFrames from '@site/sandboxes/iframe-dockview/src/app';
-
-# iFrames
-
-iFrames required special attention because of a particular behaviour in how iFrames render:
-
-> Re-parenting an iFrame will reload the contents of the iFrame or the rephrase this, moving an iFrame within the DOM will cause a reload of its contents.
-
-You can find many examples of discussions on this. Two reputable forums for example are linked [here](https://bugzilla.mozilla.org/show_bug.cgi?id=254144) and [here](https://github.com/whatwg/html/issues/5484).
-
-To ensure iFrames work as expected you should render them in panels with `renderer: 'always'` to ensure they are never removed from the DOM, alternatively set the defaultRenderer to `always`.
-
-> See the **Panel Rendering** section for more information of render modes.
-
-```tsx title="Example of a panel using an alternative renderer"
-api.addPanel({
- id: 'my_panel_id',
- component: 'my_component',
- renderer: 'always',
-});
- ```
-
-
diff --git a/packages/docs/docs/components/nested.mdx b/packages/docs/docs/components/nested.mdx
deleted file mode 100644
index a3cbf5310..000000000
--- a/packages/docs/docs/components/nested.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import NestedDockview from '@site/sandboxes/nested-dockview/src/app';
-
-# Nested Dockviews
-
-You can safely create multiple dockview instances within one page and nest dockviews within other dockviews.
-If you wish to interact with the drop event from one dockview instance in another dockview instance you can implement the `showDndOverlay` and `onDidDrop` props on `DockviewReact`.
-
-
diff --git a/packages/docs/docs/components/scrollbars.mdx b/packages/docs/docs/components/scrollbars.mdx
deleted file mode 100644
index bdbf003ed..000000000
--- a/packages/docs/docs/components/scrollbars.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: Scrolling
----
-
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewScrollbars from '@site/sandboxes/scrollbars-dockview/src/app';
-
-# 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.
-
-
-
diff --git a/packages/docs/docs/components/theme.mdx b/packages/docs/docs/components/theme.mdx
deleted file mode 100644
index 194de129a..000000000
--- a/packages/docs/docs/components/theme.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Theme
-sidebar_position: 1
----
-
-import Link from '@docusaurus/Link';
-
-# Theme
-
-As well as importing the `dockview` stylesheet you must provide a class-based theme somewhere in your application. For example.
-
-```tsx
-// Providing a theme directly through the DockviewReact component props
-
-
-// Providing a theme somewhere in the DOM tree
-
-
- {/**... */}
-
-
-
-```
-
-You can find more details on theming here.
-
diff --git a/packages/docs/docs/components/watermark.mdx b/packages/docs/docs/components/watermark.mdx
deleted file mode 100644
index 66783a345..000000000
--- a/packages/docs/docs/components/watermark.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app';
-
-
-# Watermark
-
-When the dockview is empty you may want to display some fallback content, this is refered to as the `watermark`.
-By default there the watermark has no content but you can provide as a prop to `DockviewReact` a `watermarkComponent`
-which will be rendered when there are no panels or groups.
-
-
diff --git a/packages/docs/docs/core/dnd/_category_.json b/packages/docs/docs/core/dnd/_category_.json
new file mode 100644
index 000000000..9b4185aee
--- /dev/null
+++ b/packages/docs/docs/core/dnd/_category_.json
@@ -0,0 +1,6 @@
+{
+ "position": 3,
+ "label": "Drag & Drop",
+ "collapsible": true,
+ "collapsed": true
+}
diff --git a/packages/docs/docs/components/dragAndDrop.mdx b/packages/docs/docs/core/dnd/dragAndDrop copy.mdx
similarity index 92%
rename from packages/docs/docs/components/dragAndDrop.mdx
rename to packages/docs/docs/core/dnd/dragAndDrop copy.mdx
index 9828a7c97..fe9b7890c 100644
--- a/packages/docs/docs/components/dragAndDrop.mdx
+++ b/packages/docs/docs/core/dnd/dragAndDrop copy.mdx
@@ -1,14 +1,25 @@
---
+title: 'Dnd'
sidebar_position: 2
---
-
-
import useBaseUrl from '@docusaurus/useBaseUrl';
import { MultiFrameworkContainer } from '@site/src/components/ui/container';
import DndDockview from '@site/sandboxes/dnd-dockview/src/app';
import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+
+The dock makes heavy use of drag and drop functionalities.
+
+
+
+
# Drag And Drop
You can override the conditions of the far edge overlays through the `rootOverlayModel` prop.
diff --git a/packages/docs/docs/core/dnd/dragAndDrop.mdx b/packages/docs/docs/core/dnd/dragAndDrop.mdx
new file mode 100644
index 000000000..23eb51677
--- /dev/null
+++ b/packages/docs/docs/core/dnd/dragAndDrop.mdx
@@ -0,0 +1,44 @@
+---
+title: 'Overview'
+sidebar_position: 2
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { MultiFrameworkContainer } from '@site/src/components/ui/container';
+import DndDockview from '@site/sandboxes/dnd-dockview/src/app';
+import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
+
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+
+Dockview supports a wide variety of built-in Drag and Drop possibilities.
+
+
Position a tab between two other tabs
+
+
+
+
+
+
Position a tab at the end of a list of tabs
+
+
+
+
+
+
Merge one group with another group
+
+
+
+
+
+
Move both Tabs and Groups in relation to another group
+
+
+
+
+
+
+
Move both Tabs and Groups in relation to the container
+
+
+
+
diff --git a/packages/docs/docs/core/groups/constraints.mdx b/packages/docs/docs/core/groups/constraints.mdx
new file mode 100644
index 000000000..817f187e1
--- /dev/null
+++ b/packages/docs/docs/core/groups/constraints.mdx
@@ -0,0 +1,7 @@
+---
+title: Constraints
+---
+
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+
+
diff --git a/packages/docs/docs/core/groups/controls.mdx b/packages/docs/docs/core/groups/controls.mdx
index a820a4190..d08b6f247 100644
--- a/packages/docs/docs/core/groups/controls.mdx
+++ b/packages/docs/docs/core/groups/controls.mdx
@@ -2,49 +2,41 @@
title: Group Controls
---
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewGroupControl from '@site/sandboxes/headeractions-dockview/src/app';
+import LiveExample from '@site/src/components/ui/exampleFrame';
+import { DocRef } from '@site/src/components/ui/reference/docRef';
-## Group Controls Panel
+This section describes how you can customize the header component of each group.
-`DockviewReact` accepts `leftHeaderActionsComponent`, `rightHeaderActionsComponent` and `prefixHeaderActionsComponent` which expect a React component with props `IDockviewHeaderActionsProps`.
-These controls are rendered to left and right side of the space to the right of the tabs in the header bar as well as before the first tab in the case of the prefix header prop.
+
+
+
+
+
+
+
```tsx
-const Component: React.FunctionComponent = () => {
- return
;
};
-return ;
-```
-
-As a simple example the below uses the `groupControlComponent` to render a small control that indicates whether the group
-is active and which panel is active in that group.
-
-```tsx
-const RightHeaderActionsComponent = (props: IDockviewHeaderActionsProps) => {
- const isGroupActive = props.isGroupActive;
- const activePanel = props.activePanel;
-
- return (
-
;
+};
+
+return ;
```
-
+## Live Example
+
+
+
diff --git a/packages/docs/docs/core/groups/floatingGroups.mdx b/packages/docs/docs/core/groups/floatingGroups.mdx
index 41214adac..e6f982b5e 100644
--- a/packages/docs/docs/core/groups/floatingGroups.mdx
+++ b/packages/docs/docs/core/groups/floatingGroups.mdx
@@ -6,12 +6,15 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
import LiveExample from '@site/src/components/ui/exampleFrame';
import { DocRef } from '@site/src/components/ui/reference/docRef';
-
-## Floating Groups
+This section describes floating groups.
Dockview has built-in support for floating groups. Each floating container can contain a single group with many panels
and you can have as many floating containers as needed. You cannot dock multiple groups together in the same floating container.
+## Options
+
+The following properties can be set to configure the behaviours of floating groups.
+
@@ -20,6 +23,8 @@ and you can have as many floating containers as needed. You cannot dock multiple
+## Live Example
+
diff --git a/packages/docs/docs/core/groups/maxmizedGroups.mdx b/packages/docs/docs/core/groups/maxmizedGroups.mdx
index 275289309..c7f727af4 100644
--- a/packages/docs/docs/core/groups/maxmizedGroups.mdx
+++ b/packages/docs/docs/core/groups/maxmizedGroups.mdx
@@ -2,19 +2,29 @@
title: Maximized Groups
---
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewMaximizeGroup from '@site/sandboxes/maximizegroup-dockview/src/app';
import { DocRef } from '@site/src/components/ui/reference/docRef';
+import LiveExample from '@site/src/components/ui/exampleFrame';
-## Maximized Groups
+This section described how to maxmimize groups.
-To maximize a group from the component `api`:
+
+:::info
+Floating and Popout groups cannot be maximized. Calling maximize function on groups in these states will have no effect.
+:::
+
+## API methods
+
+The following methods on the [API](/docs/api/dockview/overview) are related to maximizing groups.
+and the followng methods on the [Panel API](/docs/api/dockview/panelApi) are related to maximizing groups.
+
-If you maximize a group that group will automatically become active.
+## Live Examples
+
+
```tsx
// maximize a specified group
@@ -45,8 +55,4 @@ const result: boolean = api.isMaxmized();
api.exitMaximized();
```
-
+
diff --git a/packages/docs/docs/core/groups/popoutGroups.mdx b/packages/docs/docs/core/groups/popoutGroups.mdx
index 56f812e58..24ae781b5 100644
--- a/packages/docs/docs/core/groups/popoutGroups.mdx
+++ b/packages/docs/docs/core/groups/popoutGroups.mdx
@@ -2,9 +2,7 @@
title: Popout Windows
---
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewPopoutGroup from '@site/sandboxes/popoutgroup-dockview/src/app';
-
+import LiveExample from '@site/src/components/ui/exampleFrame';
import { DocRef } from '@site/src/components/ui/reference/docRef';
## Popout Groups
@@ -48,9 +46,4 @@ const group = props.containerApi.addGroup();
props.group.api.moveTo({ group });
```
-
-
+
diff --git a/packages/docs/docs/core/groups/resizing.mdx b/packages/docs/docs/core/groups/resizing.mdx
new file mode 100644
index 000000000..85412d96a
--- /dev/null
+++ b/packages/docs/docs/core/groups/resizing.mdx
@@ -0,0 +1,50 @@
+---
+title: Resizing
+---
+
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { MultiFrameworkContainer } from '@site/src/components/ui/container';
+import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
+import ResizeDockview from '@site/sandboxes/resize-dockview/src/app';
+
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+
+
+
+
+## Panel Resizing
+
+Each Dockview contains of a number of groups and each group has a number of panels.
+Logically a user may want to resize a panel, but this translates to resizing the group which contains that panel.
+
+You can set the size of a panel using `props.api.setSize(...)`.
+You can also set the size of the group associated with the panel using `props.api.group.api.setSize(...)` although this isn't recommended
+due to the clunky syntax.
+
+```tsx
+// it's mandatory to provide either a height or a width, providing both is optional
+props.api.setSize({
+ height: 100,
+ width: 200,
+});
+
+// you could also resize the panels group, although not recommended it achieved the same result
+props.api.group.api.setSize({
+ height: 100,
+ width: 200,
+});
+```
+
+You can see an example invoking both approaches below.
+
+
+
+## Container Resizing
+
+The component will automatically resize to it's container.
+
+
diff --git a/packages/docs/docs/core/panels/register.mdx b/packages/docs/docs/core/panels/register.mdx
index 0ddf8202b..3c9610fca 100644
--- a/packages/docs/docs/core/panels/register.mdx
+++ b/packages/docs/docs/core/panels/register.mdx
@@ -8,8 +8,8 @@ This section describes how to register a panel.
You can register panes through the `components` option.
-```jsx
- {
const api: DockviewPanelApi = props.api;
const containerApi: DockviewApi = props.containerApi;
@@ -19,7 +19,9 @@ You can register panes through the `components` option.
component_2: (props: IDockviewPanelProps) => {
return
{/** logic */}
}
-}}/>
+}
+
+return
```
diff --git a/packages/docs/docs/core/panels/rendering.mdx b/packages/docs/docs/core/panels/rendering.mdx
index 7a5ae3de8..ca412e95f 100644
--- a/packages/docs/docs/core/panels/rendering.mdx
+++ b/packages/docs/docs/core/panels/rendering.mdx
@@ -4,9 +4,11 @@ sidebar_postiion: 5
---
import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewRenderMode from '@site/sandboxes/rendermode-dockview/src/app';
import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app';
+import LiveExample from '@site/src/components/ui/exampleFrame';
+
+
Rendering type is an important consideration when creating your application and whether your panels should be destroyed when hidden.
:::info
@@ -68,11 +70,8 @@ api.addPanel({
## Live Example
-
+
+
By default `DockviewReact` only adds to the DOM those panels that are visible,
if a panel is not the active tab and not shown the contents of the hidden panel will be removed from the DOM.
diff --git a/packages/docs/docs/components/resizing.mdx b/packages/docs/docs/core/panels/resizing.mdx
similarity index 87%
rename from packages/docs/docs/components/resizing.mdx
rename to packages/docs/docs/core/panels/resizing.mdx
index 802657f80..f779b08e2 100644
--- a/packages/docs/docs/components/resizing.mdx
+++ b/packages/docs/docs/core/panels/resizing.mdx
@@ -1,10 +1,17 @@
+---
+title: Resizing
+---
+
import useBaseUrl from '@docusaurus/useBaseUrl';
import { MultiFrameworkContainer } from '@site/src/components/ui/container';
import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
import ResizeDockview from '@site/sandboxes/resize-dockview/src/app';
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+
+
+
-# Resizing
## Panel Resizing
diff --git a/packages/docs/docs/core/scrollbars.mdx b/packages/docs/docs/core/scrollbars.mdx
new file mode 100644
index 000000000..a46c5f7cd
--- /dev/null
+++ b/packages/docs/docs/core/scrollbars.mdx
@@ -0,0 +1,20 @@
+---
+title: Scrolling
+---
+
+import LiveExample from '@site/src/components/ui/exampleFrame';
+
+It's important to understand how to configure the scrollbar within a panel.
+
+A panel will appear with a scrollbar if the the contents of your view has a fixed height.
+If you are using a relative height such as `100%` you will need a child container
+with the appropiate `overflow` value to allow for scrollbars.
+
+## Live Examples
+
+The following example contains three views:
+- **Panel 1** (`height: 100%`): No scrollbar appears and the content is clipped.
+- **Panel 2** (`height: 2000px`): A scrollbar does appear since a fixed height has been used.
+- **Panel 3**: `height: 100%` and a child component with `overflow: auto` which will enable scrollbars.
+
+
diff --git a/packages/docs/docs/core/state/_category_.json b/packages/docs/docs/core/state/_category_.json
new file mode 100644
index 000000000..34b0cbd48
--- /dev/null
+++ b/packages/docs/docs/core/state/_category_.json
@@ -0,0 +1,6 @@
+{
+ "position": 3,
+ "label": "State",
+ "collapsible": true,
+ "collapsed": true
+}
diff --git a/packages/docs/docs/core/state/load.mdx b/packages/docs/docs/core/state/load.mdx
new file mode 100644
index 000000000..0bc2e1a0c
--- /dev/null
+++ b/packages/docs/docs/core/state/load.mdx
@@ -0,0 +1,47 @@
+---
+title: Loading State
+---
+
+import { MultiFrameworkContainer } from '@site/src/components/ui/container';
+import LiveExample from '@site/src/components/ui/exampleFrame';
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+
+This section described loading a dock layout.9
+
+
+
+## Layout Persistence
+
+Layouts are loaded and saved via to `fromJSON` and `toJSON` methods on the Dockview api.
+The api also exposes an event `onDidLayoutChange` you can listen on to determine when the layout has changed.
+Below are some snippets showing how you might load from and save to localStorage.
+
+If you try to load a invalid or corrupted layout the dock will recover g
+
+```tsx title="Loading a layout from localStorage"
+const onReady = (event: DockviewReadyEvent) => {
+ const layoutString = localStorage.getItem('dockview_persistence_layout');
+
+ let success = false;
+
+ if (layoutString) {
+ try {
+ const layout = JSON.parse(layoutString);
+ event.api.fromJSON(layout);
+ success = true;
+ } catch (err) {
+ // log the error
+ }
+ }
+
+ if (!success) {
+ // do something if there is no layout or there was a loading error
+ }
+};
+```
+
+Here is an example using the above code loading from and saving to localStorage.
+If you refresh the page you should notice your layout is loaded as you left it.
+
+
+
diff --git a/packages/docs/docs/components/layout.mdx b/packages/docs/docs/core/state/save.mdx
similarity index 79%
rename from packages/docs/docs/components/layout.mdx
rename to packages/docs/docs/core/state/save.mdx
index 434e12fb6..9c5bc49bd 100644
--- a/packages/docs/docs/components/layout.mdx
+++ b/packages/docs/docs/core/state/save.mdx
@@ -1,12 +1,19 @@
---
-title: Layouts
+title: Saving State
---
import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewPersistence from '@site/sandboxes/layout-dockview/src/app';
+import LiveExample from '@site/src/components/ui/exampleFrame';
+import { DocRef } from '@site/src/components/ui/reference/docRef';
-# Layout Persistence
+This section describes how to serialize a dockview instance.
+
+
+
+
+
+## Layout Persistence
Layouts are loaded and saved via to `fromJSON` and `toJSON` methods on the Dockview api.
The api also exposes an event `onDidLayoutChange` you can listen on to determine when the layout has changed.
@@ -58,7 +65,5 @@ const onReady = (event: DockviewReadyEvent) => {
Here is an example using the above code loading from and saving to localStorage.
If you refresh the page you should notice your layout is loaded as you left it.
-
+
+
diff --git a/packages/docs/docs/core/watermark.mdx b/packages/docs/docs/core/watermark.mdx
new file mode 100644
index 000000000..091ab7aba
--- /dev/null
+++ b/packages/docs/docs/core/watermark.mdx
@@ -0,0 +1,31 @@
+---
+title: Watermark
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+import LiveExample from '@site/src/components/ui/exampleFrame';
+
+When there is nothing else to display.
+
+When the dock is empty or a group has no panels (an empty group) you can render some fallback
+content which is refered to as a `watermark`. Both are controlled through the same provided component.
+
+## Options
+
+The following properties can be set to configure the behaviours of floating groups.
+
+
+
+
+
+
+
+
+
+## Live Examples
+
+
diff --git a/packages/docs/sandboxes/demo-dockview/src/app.tsx b/packages/docs/sandboxes/demo-dockview/src/app.tsx
index 8b14dc359..e3633c29f 100644
--- a/packages/docs/sandboxes/demo-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/demo-dockview/src/app.tsx
@@ -657,6 +657,18 @@ const DockviewDemo = (props: { theme?: string }) => {
>
pop
+
>
);
})}
diff --git a/packages/docs/sandboxes/headeractions-dockview/package.json b/packages/docs/sandboxes/react/dockview/group-actions/package.json
similarity index 94%
rename from packages/docs/sandboxes/headeractions-dockview/package.json
rename to packages/docs/sandboxes/react/dockview/group-actions/package.json
index 27f907944..2659c53db 100644
--- a/packages/docs/sandboxes/headeractions-dockview/package.json
+++ b/packages/docs/sandboxes/react/dockview/group-actions/package.json
@@ -1,5 +1,5 @@
{
- "name": "headeractions-dockview",
+ "name": "dockview.group-actions",
"description": "",
"keywords": [
"dockview"
diff --git a/packages/docs/sandboxes/headeractions-dockview/public/index.html b/packages/docs/sandboxes/react/dockview/group-actions/public/index.html
similarity index 100%
rename from packages/docs/sandboxes/headeractions-dockview/public/index.html
rename to packages/docs/sandboxes/react/dockview/group-actions/public/index.html
diff --git a/packages/docs/sandboxes/headeractions-dockview/src/app.scss b/packages/docs/sandboxes/react/dockview/group-actions/src/app.scss
similarity index 100%
rename from packages/docs/sandboxes/headeractions-dockview/src/app.scss
rename to packages/docs/sandboxes/react/dockview/group-actions/src/app.scss
diff --git a/packages/docs/sandboxes/headeractions-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/group-actions/src/app.tsx
similarity index 100%
rename from packages/docs/sandboxes/headeractions-dockview/src/app.tsx
rename to packages/docs/sandboxes/react/dockview/group-actions/src/app.tsx
diff --git a/packages/docs/sandboxes/headeractions-dockview/src/index.tsx b/packages/docs/sandboxes/react/dockview/group-actions/src/index.tsx
similarity index 100%
rename from packages/docs/sandboxes/headeractions-dockview/src/index.tsx
rename to packages/docs/sandboxes/react/dockview/group-actions/src/index.tsx
diff --git a/packages/docs/sandboxes/headeractions-dockview/src/styles.css b/packages/docs/sandboxes/react/dockview/group-actions/src/styles.css
similarity index 100%
rename from packages/docs/sandboxes/headeractions-dockview/src/styles.css
rename to packages/docs/sandboxes/react/dockview/group-actions/src/styles.css
diff --git a/packages/docs/sandboxes/headeractions-dockview/tsconfig.json b/packages/docs/sandboxes/react/dockview/group-actions/tsconfig.json
similarity index 100%
rename from packages/docs/sandboxes/headeractions-dockview/tsconfig.json
rename to packages/docs/sandboxes/react/dockview/group-actions/tsconfig.json
diff --git a/packages/docs/sandboxes/layout-dockview/package.json b/packages/docs/sandboxes/react/dockview/layout/package.json
similarity index 95%
rename from packages/docs/sandboxes/layout-dockview/package.json
rename to packages/docs/sandboxes/react/dockview/layout/package.json
index f8aafc4e2..bcd7df024 100644
--- a/packages/docs/sandboxes/layout-dockview/package.json
+++ b/packages/docs/sandboxes/react/dockview/layout/package.json
@@ -1,5 +1,5 @@
{
- "name": "layout-dockview",
+ "name": "dockview.layout",
"description": "",
"keywords": [
"dockview"
@@ -29,4 +29,4 @@
"not ie <= 11",
"not op_mini all"
]
-}
\ No newline at end of file
+}
diff --git a/packages/docs/sandboxes/layout-dockview/public/index.html b/packages/docs/sandboxes/react/dockview/layout/public/index.html
similarity index 100%
rename from packages/docs/sandboxes/layout-dockview/public/index.html
rename to packages/docs/sandboxes/react/dockview/layout/public/index.html
diff --git a/packages/docs/sandboxes/layout-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/layout/src/app.tsx
similarity index 100%
rename from packages/docs/sandboxes/layout-dockview/src/app.tsx
rename to packages/docs/sandboxes/react/dockview/layout/src/app.tsx
diff --git a/packages/docs/sandboxes/layout-dockview/src/index.tsx b/packages/docs/sandboxes/react/dockview/layout/src/index.tsx
similarity index 100%
rename from packages/docs/sandboxes/layout-dockview/src/index.tsx
rename to packages/docs/sandboxes/react/dockview/layout/src/index.tsx
diff --git a/packages/docs/sandboxes/layout-dockview/src/styles.css b/packages/docs/sandboxes/react/dockview/layout/src/styles.css
similarity index 100%
rename from packages/docs/sandboxes/layout-dockview/src/styles.css
rename to packages/docs/sandboxes/react/dockview/layout/src/styles.css
diff --git a/packages/docs/sandboxes/layout-dockview/tsconfig.json b/packages/docs/sandboxes/react/dockview/layout/tsconfig.json
similarity index 100%
rename from packages/docs/sandboxes/layout-dockview/tsconfig.json
rename to packages/docs/sandboxes/react/dockview/layout/tsconfig.json
diff --git a/packages/docs/sandboxes/maximizegroup-dockview/package.json b/packages/docs/sandboxes/react/dockview/maximize-group/package.json
similarity index 94%
rename from packages/docs/sandboxes/maximizegroup-dockview/package.json
rename to packages/docs/sandboxes/react/dockview/maximize-group/package.json
index 206d01f33..2baf5ff16 100644
--- a/packages/docs/sandboxes/maximizegroup-dockview/package.json
+++ b/packages/docs/sandboxes/react/dockview/maximize-group/package.json
@@ -1,5 +1,5 @@
{
- "name": "maximizegroup-dockview",
+ "name": "dockview.maximize-group",
"description": "",
"keywords": [
"dockview"
diff --git a/packages/docs/sandboxes/maximizegroup-dockview/public/index.html b/packages/docs/sandboxes/react/dockview/maximize-group/public/index.html
similarity index 100%
rename from packages/docs/sandboxes/maximizegroup-dockview/public/index.html
rename to packages/docs/sandboxes/react/dockview/maximize-group/public/index.html
diff --git a/packages/docs/sandboxes/maximizegroup-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/maximize-group/src/app.tsx
similarity index 100%
rename from packages/docs/sandboxes/maximizegroup-dockview/src/app.tsx
rename to packages/docs/sandboxes/react/dockview/maximize-group/src/app.tsx
diff --git a/packages/docs/sandboxes/maximizegroup-dockview/src/index.tsx b/packages/docs/sandboxes/react/dockview/maximize-group/src/index.tsx
similarity index 100%
rename from packages/docs/sandboxes/maximizegroup-dockview/src/index.tsx
rename to packages/docs/sandboxes/react/dockview/maximize-group/src/index.tsx
diff --git a/packages/docs/sandboxes/maximizegroup-dockview/src/styles.css b/packages/docs/sandboxes/react/dockview/maximize-group/src/styles.css
similarity index 100%
rename from packages/docs/sandboxes/maximizegroup-dockview/src/styles.css
rename to packages/docs/sandboxes/react/dockview/maximize-group/src/styles.css
diff --git a/packages/docs/sandboxes/maximizegroup-dockview/src/utils.tsx b/packages/docs/sandboxes/react/dockview/maximize-group/src/utils.tsx
similarity index 100%
rename from packages/docs/sandboxes/maximizegroup-dockview/src/utils.tsx
rename to packages/docs/sandboxes/react/dockview/maximize-group/src/utils.tsx
diff --git a/packages/docs/sandboxes/maximizegroup-dockview/tsconfig.json b/packages/docs/sandboxes/react/dockview/maximize-group/tsconfig.json
similarity index 100%
rename from packages/docs/sandboxes/maximizegroup-dockview/tsconfig.json
rename to packages/docs/sandboxes/react/dockview/maximize-group/tsconfig.json
diff --git a/packages/docs/sandboxes/popoutgroup-dockview/package.json b/packages/docs/sandboxes/react/dockview/popout-group/package.json
similarity index 94%
rename from packages/docs/sandboxes/popoutgroup-dockview/package.json
rename to packages/docs/sandboxes/react/dockview/popout-group/package.json
index 9b8601416..414f9443b 100644
--- a/packages/docs/sandboxes/popoutgroup-dockview/package.json
+++ b/packages/docs/sandboxes/react/dockview/popout-group/package.json
@@ -1,5 +1,5 @@
{
- "name": "popout-dockview",
+ "name": "dockview.popout-group",
"description": "",
"keywords": [
"dockview"
@@ -30,4 +30,4 @@
"not ie <= 11",
"not op_mini all"
]
-}
\ No newline at end of file
+}
diff --git a/packages/docs/sandboxes/popoutgroup-dockview/public/index.html b/packages/docs/sandboxes/react/dockview/popout-group/public/index.html
similarity index 100%
rename from packages/docs/sandboxes/popoutgroup-dockview/public/index.html
rename to packages/docs/sandboxes/react/dockview/popout-group/public/index.html
diff --git a/packages/docs/sandboxes/popoutgroup-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/popout-group/src/app.tsx
similarity index 100%
rename from packages/docs/sandboxes/popoutgroup-dockview/src/app.tsx
rename to packages/docs/sandboxes/react/dockview/popout-group/src/app.tsx
diff --git a/packages/docs/sandboxes/popoutgroup-dockview/src/index.tsx b/packages/docs/sandboxes/react/dockview/popout-group/src/index.tsx
similarity index 100%
rename from packages/docs/sandboxes/popoutgroup-dockview/src/index.tsx
rename to packages/docs/sandboxes/react/dockview/popout-group/src/index.tsx
diff --git a/packages/docs/sandboxes/popoutgroup-dockview/src/popover.tsx b/packages/docs/sandboxes/react/dockview/popout-group/src/popover.tsx
similarity index 100%
rename from packages/docs/sandboxes/popoutgroup-dockview/src/popover.tsx
rename to packages/docs/sandboxes/react/dockview/popout-group/src/popover.tsx
diff --git a/packages/docs/sandboxes/popoutgroup-dockview/src/styles.css b/packages/docs/sandboxes/react/dockview/popout-group/src/styles.css
similarity index 100%
rename from packages/docs/sandboxes/popoutgroup-dockview/src/styles.css
rename to packages/docs/sandboxes/react/dockview/popout-group/src/styles.css
diff --git a/packages/docs/sandboxes/popoutgroup-dockview/src/utils.tsx b/packages/docs/sandboxes/react/dockview/popout-group/src/utils.tsx
similarity index 100%
rename from packages/docs/sandboxes/popoutgroup-dockview/src/utils.tsx
rename to packages/docs/sandboxes/react/dockview/popout-group/src/utils.tsx
diff --git a/packages/docs/sandboxes/popoutgroup-dockview/tsconfig.json b/packages/docs/sandboxes/react/dockview/popout-group/tsconfig.json
similarity index 100%
rename from packages/docs/sandboxes/popoutgroup-dockview/tsconfig.json
rename to packages/docs/sandboxes/react/dockview/popout-group/tsconfig.json
diff --git a/packages/docs/sandboxes/rendermode-dockview/package.json b/packages/docs/sandboxes/react/dockview/render-mode/package.json
similarity index 95%
rename from packages/docs/sandboxes/rendermode-dockview/package.json
rename to packages/docs/sandboxes/react/dockview/render-mode/package.json
index d1fcfa6ce..dff2e3306 100644
--- a/packages/docs/sandboxes/rendermode-dockview/package.json
+++ b/packages/docs/sandboxes/react/dockview/render-mode/package.json
@@ -1,5 +1,5 @@
{
- "name": "rendermode-dockview",
+ "name": "dockview.render-mode",
"description": "",
"keywords": [
"dockview"
diff --git a/packages/docs/sandboxes/rendermode-dockview/public/index.html b/packages/docs/sandboxes/react/dockview/render-mode/public/index.html
similarity index 100%
rename from packages/docs/sandboxes/rendermode-dockview/public/index.html
rename to packages/docs/sandboxes/react/dockview/render-mode/public/index.html
diff --git a/packages/docs/sandboxes/rendermode-dockview/src/app.scss b/packages/docs/sandboxes/react/dockview/render-mode/src/app.scss
similarity index 100%
rename from packages/docs/sandboxes/rendermode-dockview/src/app.scss
rename to packages/docs/sandboxes/react/dockview/render-mode/src/app.scss
diff --git a/packages/docs/sandboxes/rendermode-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/render-mode/src/app.tsx
similarity index 100%
rename from packages/docs/sandboxes/rendermode-dockview/src/app.tsx
rename to packages/docs/sandboxes/react/dockview/render-mode/src/app.tsx
diff --git a/packages/docs/sandboxes/rendermode-dockview/src/index.tsx b/packages/docs/sandboxes/react/dockview/render-mode/src/index.tsx
similarity index 100%
rename from packages/docs/sandboxes/rendermode-dockview/src/index.tsx
rename to packages/docs/sandboxes/react/dockview/render-mode/src/index.tsx
diff --git a/packages/docs/sandboxes/rendermode-dockview/src/styles.css b/packages/docs/sandboxes/react/dockview/render-mode/src/styles.css
similarity index 100%
rename from packages/docs/sandboxes/rendermode-dockview/src/styles.css
rename to packages/docs/sandboxes/react/dockview/render-mode/src/styles.css
diff --git a/packages/docs/sandboxes/rendermode-dockview/tsconfig.json b/packages/docs/sandboxes/react/dockview/render-mode/tsconfig.json
similarity index 100%
rename from packages/docs/sandboxes/rendermode-dockview/tsconfig.json
rename to packages/docs/sandboxes/react/dockview/render-mode/tsconfig.json
diff --git a/packages/docs/sandboxes/scrollbars-dockview/package.json b/packages/docs/sandboxes/react/dockview/scrollbars/package.json
similarity index 95%
rename from packages/docs/sandboxes/scrollbars-dockview/package.json
rename to packages/docs/sandboxes/react/dockview/scrollbars/package.json
index 6d2ffca5d..95a6e3227 100644
--- a/packages/docs/sandboxes/scrollbars-dockview/package.json
+++ b/packages/docs/sandboxes/react/dockview/scrollbars/package.json
@@ -1,5 +1,5 @@
{
- "name": "scrollbars-dockview",
+ "name": "dockview.scrollbars",
"description": "",
"keywords": [
"dockview"
@@ -31,4 +31,4 @@
"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/react/dockview/scrollbars/public/index.html
similarity index 100%
rename from packages/docs/sandboxes/scrollbars-dockview/public/index.html
rename to packages/docs/sandboxes/react/dockview/scrollbars/public/index.html
diff --git a/packages/docs/sandboxes/scrollbars-dockview/src/app.scss b/packages/docs/sandboxes/react/dockview/scrollbars/src/app.scss
similarity index 100%
rename from packages/docs/sandboxes/scrollbars-dockview/src/app.scss
rename to packages/docs/sandboxes/react/dockview/scrollbars/src/app.scss
diff --git a/packages/docs/sandboxes/scrollbars-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/scrollbars/src/app.tsx
similarity index 100%
rename from packages/docs/sandboxes/scrollbars-dockview/src/app.tsx
rename to packages/docs/sandboxes/react/dockview/scrollbars/src/app.tsx
diff --git a/packages/docs/sandboxes/scrollbars-dockview/src/index.tsx b/packages/docs/sandboxes/react/dockview/scrollbars/src/index.tsx
similarity index 100%
rename from packages/docs/sandboxes/scrollbars-dockview/src/index.tsx
rename to packages/docs/sandboxes/react/dockview/scrollbars/src/index.tsx
diff --git a/packages/docs/sandboxes/scrollbars-dockview/src/styles.css b/packages/docs/sandboxes/react/dockview/scrollbars/src/styles.css
similarity index 100%
rename from packages/docs/sandboxes/scrollbars-dockview/src/styles.css
rename to packages/docs/sandboxes/react/dockview/scrollbars/src/styles.css
diff --git a/packages/docs/sandboxes/scrollbars-dockview/tsconfig.json b/packages/docs/sandboxes/react/dockview/scrollbars/tsconfig.json
similarity index 100%
rename from packages/docs/sandboxes/scrollbars-dockview/tsconfig.json
rename to packages/docs/sandboxes/react/dockview/scrollbars/tsconfig.json
diff --git a/packages/docs/sandboxes/watermark-dockview/package.json b/packages/docs/sandboxes/react/dockview/watermark/package.json
similarity index 94%
rename from packages/docs/sandboxes/watermark-dockview/package.json
rename to packages/docs/sandboxes/react/dockview/watermark/package.json
index faa017e11..73b2a641e 100644
--- a/packages/docs/sandboxes/watermark-dockview/package.json
+++ b/packages/docs/sandboxes/react/dockview/watermark/package.json
@@ -1,5 +1,5 @@
{
- "name": "watermark-dockview",
+ "name": "dockview.watermark",
"description": "",
"keywords": [
"dockview"
@@ -29,4 +29,4 @@
"not ie <= 11",
"not op_mini all"
]
-}
\ No newline at end of file
+}
diff --git a/packages/docs/sandboxes/watermark-dockview/public/index.html b/packages/docs/sandboxes/react/dockview/watermark/public/index.html
similarity index 100%
rename from packages/docs/sandboxes/watermark-dockview/public/index.html
rename to packages/docs/sandboxes/react/dockview/watermark/public/index.html
diff --git a/packages/docs/sandboxes/watermark-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/watermark/src/app.tsx
similarity index 100%
rename from packages/docs/sandboxes/watermark-dockview/src/app.tsx
rename to packages/docs/sandboxes/react/dockview/watermark/src/app.tsx
diff --git a/packages/docs/sandboxes/watermark-dockview/src/index.tsx b/packages/docs/sandboxes/react/dockview/watermark/src/index.tsx
similarity index 100%
rename from packages/docs/sandboxes/watermark-dockview/src/index.tsx
rename to packages/docs/sandboxes/react/dockview/watermark/src/index.tsx
diff --git a/packages/docs/sandboxes/watermark-dockview/src/styles.css b/packages/docs/sandboxes/react/dockview/watermark/src/styles.css
similarity index 100%
rename from packages/docs/sandboxes/watermark-dockview/src/styles.css
rename to packages/docs/sandboxes/react/dockview/watermark/src/styles.css
diff --git a/packages/docs/sandboxes/watermark-dockview/tsconfig.json b/packages/docs/sandboxes/react/dockview/watermark/tsconfig.json
similarity index 100%
rename from packages/docs/sandboxes/watermark-dockview/tsconfig.json
rename to packages/docs/sandboxes/react/dockview/watermark/tsconfig.json
diff --git a/packages/docs/src/components/ui/reference/docRef.tsx b/packages/docs/src/components/ui/reference/docRef.tsx
index d66d64a29..4d7ace82d 100644
--- a/packages/docs/src/components/ui/reference/docRef.tsx
+++ b/packages/docs/src/components/ui/reference/docRef.tsx
@@ -110,7 +110,6 @@ const Row = (props: { doc: Doc }) => {
>