{`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+| Property | Type | Description |
+| ---------------------- | ----------------------------------------------------------- | ---------------- |
+| id | `string` | Panel id |
+| isFocused | `boolean` | Is panel focused |
+| isActive | `boolean` | Is panel active |
+| width | `number` | Panel width |
+| height | `number` | Panel height |
+| onDidDimensionsChange | `Event
+
+```
+
+You can find more details on theming here.
+
+## Layout Persistance
+
+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.
+
+```tsx title="Saving the layout state to localStorage"
+React.useEffect(() => {
+ if (!api) {
+ return;
+ }
+
+ const disposable = api.onDidLayoutChange(() => {
+ const layout = api.toJSON();
+
+ localStorage.setItem(
+ 'dockview_persistance_layout',
+ JSON.stringify(layout)
+ );
+ });
+
+ return () => {
+ disposable.dispose();
+ };
+}, [api]);
+```
+
+```tsx title="Loading a layout from localStorage"
+const onReady = (event: DockviewReadyEvent) => {
+ const layoutString = localStorage.getItem('dockview_persistance_layout');
+
+ let success = false;
+
+ if (layoutString) {
+ try {
+ const layout = JSON.parse(layoutString);
+ event.api.fromJSON(layout);
+ success = true;
+ } catch (err) {
+ //
+ }
+ }
+
+ 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.
+
+
+ {/**... */}
+
+})
+
+> Drag a tab onto another tab to place it inbetween existing tabs.
+
+}){kind=spacer}
+
+> Drag a tab to the right of the last tab to place it after the existing tabs.
+
+})
+
+> Drag a group onto an existing group to merge the two groups.
+
+
+ })
+ })
+
+
+> Drag into the left/right/top/bottom target zone of a panel to create a new group in the selected direction.
+
+> Drag into the center of a panel to add to that group.
+
+> Drag to the edge of the dockview component to create a new group on the selected edge.
+
+### Extended behaviours
+
+For interaction with the Drag events directly the component exposes some method to help determine whether external drag events should be interacted with or not.
+
+```tsx
+/**
+ * called when an ondrop event which does not originate from the dockview libray and
+ * passes the showDndOverlay condition occurs
+ **/
+const onDidDrop = (event: DockviewDropEvent) => {
+ const { group } = event;
+
+ event.api.addPanel({
+ id: 'test',
+ component: 'default',
+ position: {
+ referencePanel: group.activePanel.id,
+ direction: 'within',
+ },
+ });
+};
+
+/**
+ * called for drag over events which do not originate from the dockview library
+ * allowing the developer to decide where the overlay should be shown for a
+ * particular drag event
+ **/
+const showDndOverlay = (event: DockviewDndOverlayEvent) => {
+ return true;
+};
+
+return (
+
+
+})
+
+> Move a floating tab by holding `shift` whilst moving the cursor or dragging the empty
+> header space
+
+})
+
+> Move an entire floating group by holding `shift` whilst dragging the empty header space
+
+})
+
+Floating groups can be programatically added through the dockview `api` method `api.addFloatingGroup(...)` and you can check whether
+a group is floating via the `group.api.isFloating` property. See examples for full code.
+
+You can control the bounding box of floating groups through the optional `floatingGroupBounds` options:
+
+- `boundedWithinViewport` will force the entire floating group to be bounded within the docks viewport.
+- `{minimumHeightWithinViewport?: number, minimumWidthWithinViewport?: number}` sets the respective dimension minimums that must appears within the docks viewport
+- If no options are provided the defaults of `100px` minimum height and width within the viewport are set.
+
+{/** tab implementation as chosen by developer */}
;
+ },
+};
+```
+
+### Hidden Headers
+
+You may wish to hide the header section of a group. This can achieved through the `hidden` variable on `panel.group.header`.
+
+```tsx
+panel.group.header.hidden = true;
+```
+
+### Full width tabs
+
+`DockviewReactComponent` accepts the prop `singleTabMode`. If set `singleTabMode=fullwidth` then when there is only one tab in a group this tab will expand
+to the entire width of the group. For example:
+
+> This can be conmbined with Locked Groups to create an application that feels more like a Window Manager
+> rather than a collection of groups and tabs.
+
+```tsx
+{'...'}
;
+};
+
+return
+
+ {isGroupActive ? 'Group Active' : 'Group Inactive'}
+
+ {`activePanel: ${
+ activePanel?.id || 'null'
+ }`}
+
+ );
+};
+```
+
+
+
+
+## GridviewReact Component
+
+```tsx
+import { ReactGridview } from 'dockview';
+```
+
+| Property | Type | Optional | Default | Description |
+| ------------------- | ------------------------------------ | -------- | ---------------------- | ----------- |
+| onReady | (event: SplitviewReadyEvent) => void | No | | |
+| components | object | No | | |
+| orientation | Orientation | Yes | Orientation.HORIZONTAL | |
+| proportionalLayout | boolean | Yes | true | |
+| hideBorders | boolean | Yes | false | |
+| className | string | Yes | '' | |
+| disableAutoResizing | boolean | Yes | false | > |
+
+## Gridview API
+
+```tsx
+const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
+ // props.containerApi...
+
+ return {`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+```tsx
+const onReady = (event: GridviewReadyEvent) => {
+ // event.api...
+};
+```
+
+| Property | Type | Description |
+| ---------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| height | `number` | Component pixel height |
+| width | `number` | Component pixel width |
+| minimumHeight | `number` | |
+| maximumHeight | `number` | |
+| maximumWidth | `number` | |
+| maximumWidth | `number` | |
+| length | `number` | Number of panels |
+| panels | `ISplitviewPanel[]` | all panels |
+| orientation | `Orientation` | |
+| | | |
+| onDidLayoutChange | `Event{`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+| Property | Type | Description |
+| ---------------------- | ----------------------------------------------------------- | ---------------- |
+| id | `string` | Panel id |
+| isFocused | `boolean` | Is panel focsed |
+| isActive | `boolean` | Is panel active |
+| isVisible | `boolean` | Is panel visible |
+| width | `number` | Panel width |
+| height | `number` | Panel height |
+| | | |
+| onDidDimensionsChange | `Event
+
+
+```tsx title="Simple Paneview example"
+import {
+ IPaneviewPanelProps,
+ PaneviewReact,
+ PaneviewReadyEvent,
+} from 'dockview';
+
+const components = {
+ default: (props: IPaneviewPanelProps<{ title: string }>) => {
+ return (
+
+ {props.params.title}
+
+ );
+ },
+};
+
+SimplePaneview = () => {
+ const onReady = (event: PaneviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ params: {
+ title: 'Panel 1',
+ },
+ title: 'Panel 1',
+ });
+
+ event.api.addPanel({
+ id: 'panel_2',
+ component: 'default',
+ params: {
+ title: 'Panel 2',
+ },
+ title: 'Panel 2',
+ });
+
+ event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ params: {
+ title: 'Panel 3',
+ },
+ title: 'Panel 3',
+ });
+ };
+
+ return (
+ {`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+```tsx title="Paneview API via the onReady callback"
+const onReady = (event: GridviewReadyEvent) => {
+ // event.api...
+};
+```
+
+| Property | Type | Description |
+| ------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| height | `number` | Component pixel height |
+| width | `number` | Component pixel width |
+| minimumSize | `number` | The sum of the `minimumSize` property for each panel |
+| maximumSize | `number` | The sum of the `maximumSize` property for each panel |
+| length | `number` | Number of panels |
+| panels | `IPaneviewPanel[]` | All panels |
+| | | |
+| onDidLayoutChange | `Event{`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+| Property | Type | Description |
+| ---------------------- | ----------------------------------------------------------- | ---------------- |
+| id | `string` | Panel id |
+| isFocused | `boolean` | Is panel focsed |
+| isActive | `boolean` | Is panel active |
+| isVisible | `boolean` | Is panel visible |
+| width | `number` | Panel width |
+| height | `number` | Panel height |
+| | |
+| onDidDimensionsChange | `Event
+
+
+You can provide a `headerComponent` option when creating a panel to tell the library to use a custom header component.
+
+```tsx
+const onReady = (event: PaneviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ headerComponent: 'myHeaderComponent',
+ params: {
+ valueA: 'A',
+ },
+ title: 'Panel 1',
+ });
+};
+```
+
+This header must be defined in the collection of components provided to the `headerComponents` props for `ReactPaneivew`
+
+```tsx
+import { IPaneviewPanelProps } from 'dockview';
+
+const MyHeaderComponent = (props: IPaneviewPanelProps<{ title: string }>) => {
+ const [expanded, setExpanded] = React.useState
+
+
+```tsx title="Simple Splitview example"
+import {
+ ISplitviewPanelProps,
+ Orientation,
+ SplitviewReact,
+ SplitviewReadyEvent,
+} from 'dockview';
+
+const components = {
+ default: (props: ISplitviewPanelProps<{ title: string }>) => {
+ return {props.params.title}
;
+ },
+};
+
+export const SimpleSplitview = () => {
+ const onReady = (event: SplitviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ params: {
+ title: 'Panel 1',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_2',
+ component: 'default',
+ params: {
+ title: 'Panel 2',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ params: {
+ title: 'Panel 3',
+ },
+ });
+ };
+
+ return (
+ {`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+```tsx title="Splitview API via the onReady callback"
+const onReady = (event: SplitviewReadyEvent) => {
+ // event.api...
+};
+```
+
+| Property | Type | Description |
+| ------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------- |
+| height | `number` | Component pixel height |
+| width | `number` | Component pixel width |
+| minimumSize | `number` | The sum of the `minimumSize` property for each panel |
+| maximumSize | `number` | The sum of the `maximumSize` property for each panel |
+| length | `number` | Number of panels |
+| panels | `ISplitviewPanel[]` | All panels |
+| | | |
+| onDidLayoutChange | `Event{`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+| Property | Type | Description |
+| ---------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| id | `string` | Panel id |
+| isFocused | `boolean` | Is panel focsed |
+| isActive | `boolean` | Is panel active |
+| isVisible | `boolean` | Is panel visible |
+| width | `number` | Panel width |
+| height | `number` | Panel height |
+| | | |
+| onDidDimensionsChange | `Event
+
+
+### Visibility
+
+A panels visibility can be controlled and monitored through the following code.
+A panel with visibility set to `false` will remain as a part of the components list of panels but will not be rendered.
+
+```tsx
+const disposable = props.api.onDidVisibilityChange(({ isVisible }) => {
+ //
+});
+```
+
+```tsx
+api.setVisible(true);
+```
+
+### Active
+
+Only one panel in the `splitview` can be the active panel at any one time.
+Setting a panel as active will set all the others as inactive.
+A focused panel is always the active panel but an active panel is not always focused.
+
+```tsx
+const disposable = props.api.onDidActiveChange(({ isActive }) => {
+ //
+});
+```
+
+```tsx
+api.setActive();
+```
+
+### Contraints
+
+When adding a panel you can specify pixel size contraints
+
+```tsx
+event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ minimumSize: 100,
+ maximumSize: 1000,
+});
+```
+
+These contraints can be updated throughout the lifecycle of the `splitview` using the panel API
+
+```tsx
+props.api.onDidConstraintsChange(({ maximumSize, minimumSize }) => {
+ //
+});
+```
+
+```tsx
+api.setConstraints({
+ maximumSize: 200,
+ minimumSize: 400,
+});
+```
diff --git a/packages/docs/versioned_docs/version-1.8.3/contributing.mdx b/packages/docs/versioned_docs/version-1.8.3/contributing.mdx
new file mode 100644
index 000000000..e35ed70d4
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.8.3/contributing.mdx
@@ -0,0 +1,52 @@
+---
+sidebar_position: 3
+description: Contributing
+---
+
+# Contributing
+
+# Project description
+
+Dockview is a layout manager library designed to provide a complete layouting solution.
+It is written in plain TypeScript and can be used without any framework although
+an extensive React wrapper has always and will always be provided for those using the React framework.
+
+The project is hosted on GitHub and developed within a Monorepo powered by [Lerna](https://github.com/lerna/lerna).
+It is developed using the `yarn` package manager since at the time of creation `yarn` was far superior when it came to managing monorepos.
+The Monorepo contains three packages:
+
+#### packages/dockview-core
+
+The core project is entirely written in plain TypeScript without any frameworks or dependencies and it's source-code can be found
+within the `dockview-core` package which is also published to npm.
+
+#### packages/dockview
+
+A complete collection of React components for use through the React framework to use dockview seamlessly
+and is published to npm. It depends explicitly on `dockview-core` so there is no need to additionally install `dockview-core`.
+
+> Dockview was originally a React-only library which is why the React version maintains the name `dockview` after
+> splitting the core logic into a seperate package named `dockview-core`.
+
+#### packages/docs
+
+This package contains the code for this documentation website and examples hosted through **CodeSandbox**. It is **not** a published package on npm.
+
+# Run the project locally
+
+1. After you have cloned the project from GitHub run `yarn` at the root of the project which will install all project dependencies.
+2. In order build `packages/dockview-core` then `packages/dockview`.
+3. Run the docs website through `npm run start` in the `packages/docs` directory and go to _http://localhost:3000_ which
+ will now be running the local copy of `dockview` that you have just built.
+
+### Examples
+
+All examples can be found under [**packages/docs/sandboxes**](https://github.com/mathuo/dockview/tree/master/packages/docs/sandboxes).
+Each example is an independently runnable example through **CodeSandbox**.
+Through the documentation you will see links to runnable **CodeSandbox** examples.
+
+## FAQ
+
+#### Are there any plans to publish wrapper libraries for other frameworks such as Angular and Vue?
+
+Currently no but this is open for contributors to try.
diff --git a/packages/docs/versioned_docs/version-1.8.3/index.mdx b/packages/docs/versioned_docs/version-1.8.3/index.mdx
new file mode 100644
index 000000000..9ea7f0923
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.8.3/index.mdx
@@ -0,0 +1,91 @@
+---
+sidebar_position: 0
+description: A zero dependency layout manager supporting ReactJS and Vanilla TypeScript
+---
+
+import { SimpleSplitview } from '@site/src/components/simpleSplitview';
+import { SimpleGridview } from '@site/src/components/simpleGridview';
+import { SimplePaneview } from '@site/src/components/simplePaneview';
+import SimpleDockview from '@site/sandboxes/simple-dockview/src/app';
+import Link from '@docusaurus/Link';
+
+# Introduction
+
+**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
+
+## Quick start
+
+`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
+
+```shell
+npm install dockview
+```
+
+You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
+depending on your solution this might be:
+
+```css
+@import './node_modules/dockview/dist/styles/dockview.css';
+```
+
+There are 4 components you may want to use:
+
+
+ Dockview
+ + +
+
+
+
+ Splitview
+ + +
+
+
+
+ Gridview
+ + +
+
+
+
+ Paneview
+ + +
+
diff --git a/packages/docs/versioned_docs/version-1.8.3/theme.mdx b/packages/docs/versioned_docs/version-1.8.3/theme.mdx
new file mode 100644
index 000000000..49a8c23ef
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.8.3/theme.mdx
@@ -0,0 +1,80 @@
+---
+sidebar_position: 1
+description: Theming Dockview Components
+---
+
+# Theme
+
+## Introduction
+
+`dockview` requires some CSS to work correctly.
+The CSS is exported as one file under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css)
+and should be imported at some point in your application
+
+```css title="Example import with .css file"
+@import './node_modules/dockview/dist/styles/dockview.css';
+```
+
+## Provided themes
+
+`dockview` comes with a number of themes which are all CSS classes and can be found [here](https://github.com/mathuo/dockview/blob/master/packages/dockview-core/src/theme.scss).
+To use a `dockview` theme the CSS must encapsulate the component. The current list of themes is:
+
+- `dockview-theme-dark`
+- `dockview-theme-light`
+- `dockview-theme-vs`
+- `dockview-theme-abyss`
+- `dockview-theme-dracula`
+- `dockview-theme-replit`
+
+## Customizing Theme
+
+`dockview` supports theming through the use of css properties.
+You can view the built-in themes at [`dockview/src/theme.scss`](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss)
+and are free to build your own themes based on these css properties.
+
+| CSS Property | Description |
+| ---------------------------------------------------- | ----------- |
+| --dv-paneview-active-outline-color | |
+| --dv-tabs-and-actions-container-font-size | |
+| --dv-tabs-and-actions-container-height | |
+| --dv-tab-close-icon | |
+| --dv-drag-over-background-color | |
+| --dv-drag-over-border-color | |
+| --dv-tabs-container-scrollbar-color | |
+| | |
+| --dv-group-view-background-color | |
+| | |
+| --dv-tabs-and-actions-container-background-color | |
+| | |
+| --dv-activegroup-visiblepanel-tab-background-color | |
+| --dv-activegroup-hiddenpanel-tab-background-color | |
+| --dv-inactivegroup-visiblepanel-tab-background-color | |
+| --dv-inactivegroup-hiddenpanel-tab-background-color | |
+| --dv-tab-divider-color | |
+| | |
+| --dv-activegroup-visiblepanel-tab-color | |
+| --dv-activegroup-hiddenpanel-tab-color | |
+| --dv-inactivegroup-visiblepanel-tab-color | |
+| --dv-inactivegroup-hiddenpanel-tab-color | |
+| | |
+| --dv-separator-border | |
+| --dv-paneview-header-border-color | |
+
+You can further customise the theme through adjusting class properties but this is up you.
+For example if you wanted to add a bottom border to the tab container for an active group in the `DockviewReact` component you could write:
+
+```css title="Additional CSS to show a bottom border on active groups"
+.groupview {
+ &.active-group {
+ > .tabs-and-actions-container {
+ border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
+ }
+ }
+ &.inactive-group {
+ > .tabs-and-actions-container {
+ border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);
+ }
+ }
+}
+```
diff --git a/packages/docs/versioned_sidebars/version-1.8.3-sidebars.json b/packages/docs/versioned_sidebars/version-1.8.3-sidebars.json
new file mode 100644
index 000000000..caea0c03b
--- /dev/null
+++ b/packages/docs/versioned_sidebars/version-1.8.3-sidebars.json
@@ -0,0 +1,8 @@
+{
+ "tutorialSidebar": [
+ {
+ "type": "autogenerated",
+ "dirName": "."
+ }
+ ]
+}
diff --git a/packages/docs/versions.json b/packages/docs/versions.json
index cc0c8b8a8..3caae0840 100644
--- a/packages/docs/versions.json
+++ b/packages/docs/versions.json
@@ -1,4 +1,5 @@
[
+ "1.8.3",
"1.8.2",
"1.7.6"
-]
\ No newline at end of file
+]