From 5e4a9d5855a64a1cc258037f8496a1f9e2790f32 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Tue, 4 Oct 2022 16:45:00 -0400
Subject: [PATCH] chore: remove 1.4.3 and 1.5.0 docs
---
.../versioned_docs/version-1.4.3/basics.mdx | 118 ------
.../version-1.4.3/components/_category_.json | 9 -
.../version-1.4.3/components/dockview.mdx | 294 ---------------
.../version-1.4.3/components/gridview.mdx | 116 ------
.../version-1.4.3/components/paneview.mdx | 270 --------------
.../version-1.4.3/components/splitview.mdx | 242 ------------
.../versioned_docs/version-1.4.3/index.mdx | 148 --------
.../versioned_docs/version-1.4.3/theme.mdx | 80 ----
.../versioned_docs/version-1.5.0/basics.mdx | 119 ------
.../version-1.5.0/components/_category_.json | 9 -
.../version-1.5.0/components/dockview.mdx | 347 ------------------
.../version-1.5.0/components/gridview.mdx | 120 ------
.../version-1.5.0/components/paneview.mdx | 285 --------------
.../version-1.5.0/components/splitview.mdx | 246 -------------
.../versioned_docs/version-1.5.0/examples.mdx | 25 --
.../versioned_docs/version-1.5.0/index.mdx | 149 --------
.../versioned_docs/version-1.5.0/theme.mdx | 89 -----
.../version-1.4.3-sidebars.json | 8 -
.../version-1.5.0-sidebars.json | 8 -
packages/docs/versions.json | 4 +-
20 files changed, 1 insertion(+), 2685 deletions(-)
delete mode 100644 packages/docs/versioned_docs/version-1.4.3/basics.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.4.3/components/_category_.json
delete mode 100644 packages/docs/versioned_docs/version-1.4.3/components/dockview.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.4.3/components/gridview.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.4.3/components/paneview.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.4.3/components/splitview.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.4.3/index.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.4.3/theme.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.5.0/basics.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.5.0/components/_category_.json
delete mode 100644 packages/docs/versioned_docs/version-1.5.0/components/dockview.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.5.0/components/gridview.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.5.0/components/paneview.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.5.0/components/splitview.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.5.0/examples.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.5.0/index.mdx
delete mode 100644 packages/docs/versioned_docs/version-1.5.0/theme.mdx
delete mode 100644 packages/docs/versioned_sidebars/version-1.4.3-sidebars.json
delete mode 100644 packages/docs/versioned_sidebars/version-1.5.0-sidebars.json
diff --git a/packages/docs/versioned_docs/version-1.4.3/basics.mdx b/packages/docs/versioned_docs/version-1.4.3/basics.mdx
deleted file mode 100644
index c854beff1..000000000
--- a/packages/docs/versioned_docs/version-1.4.3/basics.mdx
+++ /dev/null
@@ -1,118 +0,0 @@
----
-sidebar_position: 1
----
-
-import { SimpleSplitview } from '@site/src/components/simpleSplitview';
-import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2';
-
-# Basics
-
-asd
-This section will take you through a number of concepts that can be applied to all dockview components.
-
-## Panels
-
-The below examples use `ReactSplitview` but the logic holds for `ReactPaneview`, `ReactGridview` and `ReactDockview` using their respective implementations and interfaces.
-All components require you to provide an `onReady` prop which you can use to build and control your component.
-
-### Adding a panel with parameters
-
-You can pass parameters to a panel through the `params` object
-
-```tsx
-const onReady = (event: SplitviewReadyEvent) => {
- event.api.addPanel({
- id: 'panel_1',
- component: 'myComponent',
- params: {
- title: 'My Title',
- },
- });
-};
-```
-
-and you can access those properties through the `props.params` object. The TypeScript interface accepts an optional generic type `T` that corresponds to the params objects type.
-
-```tsx
-const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
- return
{`My first panel has the title: ${props.params.title}`}
;
-};
-```
-
-## API
-
-There are two types of API you will interact with using `dockview`.
-
-- The `panel API` is accessible via `props.api` in user defined panels and via the `.api` variable found on panel instances. This API contains actions and variable related to the the individual panel.
-- The `container API` is accessible via `event.api` in the `onReady` events and `props.containerApi` in user defined panels. This API contains actions and variable related to the component as a whole.
-
-```tsx
-const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
- React.useEffect(() => {
- const disposable = props.api.onDidActiveChange((event) => {
- console.log(`is panel active: ${event.isActive}`);
- });
-
- return () => {
- disposable.dispose(); // remember to dispose of any subscriptions
- };
- }, [props.api]);
-
- const addAnotherPanel = React.useCallback(() => {
- props.containerApi.addPanel({
- id: 'another_id',
- component: 'anotherComponent',
- });
- }, [props.containerApi]);
-
- return (
-
- {`My first panel has the title: ${props.params.title}`}
-
-
- );
-};
-```
-
-### Serialization
-
-All components support `toJSON(): T` which returns a Typed object representation of the components state. This same Typed object can be used to deserialize a view using `fromJSON(object: T): void`.
-
-## Auto resizing
-
-`SplitviewReact`, `GridviewReact`, `PaneviewReact` and `DockviewReact` will all automatically resize to fill the size of their parent element.
-Internally this is achieved using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) which some users may need to polyfill.
-You can disable this by settings the `disableAutoResizing` prop to be `true`.
-
-You can manually resize a component using the API method `layout(width: number, height: number): void`.
-An advanced case may use this in conjunction with `disableAutoResizing=true` to allow a parent component to have ultimate control over the dimensions of the component.
-
-## Events
-
-Many API properties can be listened on using the `Event` pattern. For example `api.onDidFocusChange(() => {...})`.
-You should dispose of any event listeners you create cleaning up any listeners you would have created.
-
-```tsx
-React.useEffect(() => {
- const disposable = api.onDidFocusChange(() => {
- // write some code
- });
-
- return () => {
- disposable.dispose();
- };
-}, []);
-```
-
-## Proportional layout
-
-The `proportionalLayout` property indicates the expected behaviour of the component as it's container resizes, should all views resize equally or should just one view expand to fill the new space. `proportionalLayout` can be set as a property on `SplitviewReact` and `GridviewReact` components.
-Although not configurable on `DockviewReact` and `PaneviewReact` these both behave as if `proportionalLayout=true` was set for them.
-
-
-
-
-
-## Browser support
-
-dockview is intended to support all major browsers. Some users may require a polyfill for [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
diff --git a/packages/docs/versioned_docs/version-1.4.3/components/_category_.json b/packages/docs/versioned_docs/version-1.4.3/components/_category_.json
deleted file mode 100644
index 1cdf26b6f..000000000
--- a/packages/docs/versioned_docs/version-1.4.3/components/_category_.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "label": "Components",
- "collapsible": true,
- "collapsed": false,
- "link": {
- "type": "generated-index",
- "title": "Components"
- },
-}
diff --git a/packages/docs/versioned_docs/version-1.4.3/components/dockview.mdx b/packages/docs/versioned_docs/version-1.4.3/components/dockview.mdx
deleted file mode 100644
index a874db57b..000000000
--- a/packages/docs/versioned_docs/version-1.4.3/components/dockview.mdx
+++ /dev/null
@@ -1,294 +0,0 @@
-import { SimpleDockview } from '@site/src/components/simpleDockview';
-import {
- RenderingDockview,
- Checkbox,
-} from '@site/src/components/dockview/rendering';
-import { DndDockview } from '@site/src/components/dockview/dnd';
-import { EventsDockview } from '@site/src/components/dockview/events';
-import { ContextMenuDockview } from '@site/src/components/dockview/contextMenu';
-import Link from '@docusaurus/Link';
-
-# Dockview
-
-## Introduction
-
-Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels.
-
-
-
-
-
-You can access the panels associated group through the `panel.group` variable.
-The group will always be defined and will change if a panel is moved into another group.
-
-## DockviewReact Component
-
-You can create a Dockview through the use of the `ReactDockview` component.
-
-```tsx
-import { ReactDockview } from 'dockview';
-```
-
-| Property | Type | Optional | Default | Description |
-| ------------------- | ------------------------------------ | -------- | ------- | ------------------------------------------------------------ |
-| onReady | (event: SplitviewReadyEvent) => void | No | | |
-| components | object | No | | |
-| tabComponents | object | Yes | | |
-| watermarkComponent | object | Yes | | |
-| hideBorders | boolean | Yes | false | |
-| className | string | Yes | '' | |
-| disableAutoResizing | boolean | Yes | false | See Auto Resizing |
-| onTabContextMenu | Event | Yes | false | |
-| onDidDrop | Event | Yes | false | |
-| showDndOverlay | Event | Yes | false | |
-
-## Dockview API
-
-The Dockview API is exposed both at the `onReady` event and on each panel through `props.containerApi`.
-Through this API you can control general features of the component and access all added panels.
-
-```tsx title="Dockview API via Panel component"
-const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
- // props.containerApi...
-
- return
{`My first panel has the title: ${props.params.title}`}
{`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 |
-| width | `number` | Panel width |
-| height | `number` | Panel height |
-| onDidDimensionsChange | `Event` | |
-| onDidFocusChange | `Event` | |
-| onDidVisibilityChange | `Event` | |
-| onDidActiveChange | `Event` | |
-| setActive | `(): void` | |
-| | | |
-| onDidConstraintsChange | `onDidConstraintsChange: Event` | |
-| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
-| setSize | `(event: SizeEvent): void` | |
-| | | |
-| group | `GroupPanel | undefined` |
-| isGroupActive | `boolean` | |
-| title | `string` | |
-| suppressClosable | `boolean` | |
-| close | `(): void` | |
-| setTitle | `(title: string): void` | |
-
-## Advanced Features
-
-### Locked group
-
-Locking a group will disable all drop events for this group ensuring a user can not add additional panels to the group.
-You can still add groups to a locked panel programatically using the API.
-
-```tsx
-panel.group.locked = true;
-```
-
-### Group header
-
-You may wish to hide the header section of a group. This can achieved through setting the `hidden` variable on `panel.group.header`.
-
-```tsx
-panel.group.header.hidden = true;
-```
-
-### Context Menu
-
-Since overriding the context menu is a such a common feature rather than defining a custom tab the `ReactDockview` component exposes the prop `onTabContextMenu`.
-You can alternatively define a custom tab component for more granular control.
-
-:::caution
-
-The `onTabContextMenu` is intended to be removed in a future release to further simplify the library.
-In the future you will be required to define a custom tab component to intercept the context menu events.
-
-:::
-
-
-
-
-
-### Rendering
-
-Although `DockviewReact` will only add those tabs that are visible to the DOM all associated React Components for each tab including those that
-are not initially visible will be created.
-This will mean that any hooks in those components will run and if you running expensive operations in the tabs you may end up doing a lot of initial
-work for what are hidden tabs.
-
-This is the default behaviour to ensure the greatest flexibility for the user but you can create a Higher-Order component wrapping your components that
-will ensure the component is only created if the tab is visible as below:
-
-```tsx
-import { PanelApi } from 'dockview';
-import * as React from 'react';
-
-function RenderWhenVisible<
- T extends { api: Pick }
->(component: React.FunctionComponent) {
- const HigherOrderComponent = (props: T) => {
- const [visible, setVisible] = React.useState(
- props.api.isVisible
- );
-
- React.useEffect(() => {
- const disposable = props.api.onDidVisibilityChange((event) =>
- setVisible(event.isVisible)
- );
-
- return () => {
- disposable.dispose();
- };
- }, [props.api]);
-
- if (!visible) {
- return null;
- }
-
- return React.createElement(component, props);
- };
- return HigherOrderComponent;
-}
-```
-
-```tsx
-const component = RenderWhenVisible(MyComponent);
-```
-
-Through toggling the checkbox you can see that when you only render those panels which are visible the underling React component is destroyed when it becomes hidden and re-created when it becomes visible.
-
-
-
-
-
-
-### Drag And Drop
-
-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 (
-
-);
-```
-
-
-
-### Events
-
-
diff --git a/packages/docs/versioned_docs/version-1.4.3/components/gridview.mdx b/packages/docs/versioned_docs/version-1.4.3/components/gridview.mdx
deleted file mode 100644
index 5816d5fae..000000000
--- a/packages/docs/versioned_docs/version-1.4.3/components/gridview.mdx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { SimpleGridview } from '@site/src/components/simpleGridview';
-import { EventsGridview } from '@site/src/components/gridview/events';
-import Link from '@docusaurus/Link';
-
-# Gridview
-
-## Introduction
-
-
-
-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(
- props.api.isExpanded
- );
-
- React.useEffect(() => {
- const disposable = props.api.onDidExpansionChange((event) => {
- setExpanded(event.isExpanded);
- });
-
- return () => {
- disposable.dispose();
- };
- }, []);
-
- const onClick = () => {
- props.api.setExpanded(!expanded);
- };
-
- return (
-
-
- {props.params.title}
-
- );
-};
-
-const headerComponents = { myHeaderComponent: MyHeaderComponent };
-```
-
-### Drag And Drop
-
-If you provide the `PaneviewReact` component with the prop `onDidDrop` you will be able to interact with custom drop events.
-
-
diff --git a/packages/docs/versioned_docs/version-1.4.3/components/splitview.mdx b/packages/docs/versioned_docs/version-1.4.3/components/splitview.mdx
deleted file mode 100644
index b90042834..000000000
--- a/packages/docs/versioned_docs/version-1.4.3/components/splitview.mdx
+++ /dev/null
@@ -1,242 +0,0 @@
-import { SimpleSplitview } from '@site/src/components/simpleSplitview';
-import { SplitviewExample1 } from '@site/src/components/splitview/active';
-import Link from '@docusaurus/Link';
-
-# Splitview
-
-## Introduction
-
-A Splitview is a collection of resizable horizontally or vertically stacked panels.
-
-
;
- },
-};
-
-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 (
-
- );
-};
-```
-
-## SplitviewReact Component
-
-You can create a Splitview through the use of the `ReactSplitview` component.
-
-```tsx
-import { ReactSplitview } from 'dockview';
-```
-
-Using the `onReady` prop you can access to the component `api` and add panels either through deserialization or the individual addition of panels.
-
-| Property | Type | Optional | Default | Description |
-| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ |
-| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function |
-| components | `Record` | No | | Panel renderers |
-| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
-| proportionalLayout | `boolean` | Yes | `true` | See Proportional layout |
-| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
-| className | `string` | Yes | `''` | Attaches a classname |
-| disableAutoResizing | `boolean` | Yes | `false` | See Auto Resizing |
-
-## Splitview API
-
-The Splitview API is exposed both at the `onReady` event and on each panel through `props.containerApi`.
-Through this API you can control general features of the component and access all added panels.
-
-```tsx title="Splitview API via Panel component"
-const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
- // props.containerApi...
-
- 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` | Fires on layout change |
-| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call |
-| onDidAddView | `Event` | Fires when a view is added |
-| onDidRemoveView | `Event` | Fires when a view is removed |
-| | | |
-| addPanel | `addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel` | |
-| removePanel | `(panel: ISplitviewPanel, sizing?: Sizing): void` | |
-| getPanel | `(id:string): ISplitviewPanel \| undefined` | |
-| movePanel | `(from: number, to: number): void` | |
-| | |
-| updateOptions | `(options: SplitviewComponentUpdateOptions): void` | |
-| focus | `(): void` | Focus the active panel, if exists |
-| layout | `(width: number, height:number): void` | See Auto Resizing |
-| fromJSON | `(data: SerializedSplitview): void` | Serialization |
-| toJSON | `(): SerializedSplitview` | Serialization |
-| clear | `(): void` | Clears the current layout |
-
-## Splitview Panel API
-
-The Splitview panel API is exposed on each panel containing actions and variables specific to that panel.
-
-```tsx title="Splitview panel API via Panel component"
-const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
- // props.api...
-
- return
{`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` | Fires when panel dimensions change |
-| onDidFocusChange | `Event` | Fire when panel is focused and blurred |
-| onDidVisibilityChange | `Event` | Fires when the panels visiblity property is changed (see Panel Visibility) |
-| onDidActiveChange | `Event` | Fires when the panels active property is changed (see Active Panel) |
-| onDidConstraintsChange | `onDidConstraintsChange: Event` | Fires when the panels size contrainsts change (see Panel Constraints) |
-| | | |
-| setVisible | `(isVisible: boolean): void` | |
-| setActive | `(): void` | |
-| | | |
-| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
-| setSize | `(event: PanelSizeEvent): void` | |
-
-## Advanced Features
-
-Listed below are some functionalities avalaible through both the panel and component APIs. The live demo shows examples of these in real-time.
-
-
-
-
-
-### 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.4.3/index.mdx b/packages/docs/versioned_docs/version-1.4.3/index.mdx
deleted file mode 100644
index 976e93e2f..000000000
--- a/packages/docs/versioned_docs/version-1.4.3/index.mdx
+++ /dev/null
@@ -1,148 +0,0 @@
----
-sidebar_position: 0
----
-
-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/src/components/simpleDockview';
-
-# Introduction
-
-**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
-
-## Features
-
-- Themable and customizable
-- Support for the serialization and deserialization of layouts
-- Drag and drop support
-
-## 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';
-```
-
-A dark and light theme are provided, one of these classes (or a custom theme) must be attached at any point above your components in the HTML tree. To cover the entire web page you might attach the class to the `body` component:
-
-```html
-
- ...
-
-
- ...
-
-```
-
-There are 4 components you may want to use:
-
-Splitview
-
-
- );
- },
-};
-
-const Component = () => {
- const onReady = (event: DockviewReadyEvent) => {
- event.api.addPanel({
- id: 'panel1',
- component: 'default',
- tabComponent: 'customTab', // optional custom header
- params: {
- someProps: 'Hello',
- },
- });
- event.api.addPanel({
- id: 'panel2',
- component: 'default',
- params: {
- someProps: 'World',
- },
- position: { referencePanel: 'panel1', direction: 'below' },
- });
- };
-
- return (
-
- );
-};
-```
diff --git a/packages/docs/versioned_docs/version-1.4.3/theme.mdx b/packages/docs/versioned_docs/version-1.4.3/theme.mdx
deleted file mode 100644
index 912280116..000000000
--- a/packages/docs/versioned_docs/version-1.4.3/theme.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
----
-sidebar_position: 3
----
-
-import { CustomCSSDockview } from '@site/src/components/dockview/customCss';
-
-# 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 depending can be imported
-
-```css
-@import './node_modules/dockview/dist/styles/dockview.css';
-```
-
-## 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.
-As an 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
-.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_docs/version-1.5.0/basics.mdx b/packages/docs/versioned_docs/version-1.5.0/basics.mdx
deleted file mode 100644
index 91fdcbfd9..000000000
--- a/packages/docs/versioned_docs/version-1.5.0/basics.mdx
+++ /dev/null
@@ -1,119 +0,0 @@
----
-sidebar_position: 1
-description: How to get started with Dockview
----
-
-import { SimpleSplitview } from '@site/src/components/simpleSplitview';
-import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2';
-
-# Basics
-
-asd
-This section will take you through a number of concepts that can be applied to all dockview components.
-
-## Panels
-
-The below examples use `ReactSplitview` but the logic holds for `ReactPaneview`, `ReactGridview` and `ReactDockview` using their respective implementations and interfaces.
-All components require you to provide an `onReady` prop which you can use to build and control your component.
-
-### Adding a panel with parameters
-
-You can pass parameters to a panel through the `params` object
-
-```tsx
-const onReady = (event: SplitviewReadyEvent) => {
- event.api.addPanel({
- id: 'panel_1',
- component: 'myComponent',
- params: {
- title: 'My Title',
- },
- });
-};
-```
-
-and you can access those properties through the `props.params` object. The TypeScript interface accepts an optional generic type `T` that corresponds to the params objects type.
-
-```tsx
-const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
- return
{`My first panel has the title: ${props.params.title}`}
;
-};
-```
-
-## API
-
-There are two types of API you will interact with using `dockview`.
-
-- The `panel API` is accessible via `props.api` in user defined panels and via the `.api` variable found on panel instances. This API contains actions and variable related to the the individual panel.
-- The `container API` is accessible via `event.api` in the `onReady` events and `props.containerApi` in user defined panels. This API contains actions and variable related to the component as a whole.
-
-```tsx
-const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
- React.useEffect(() => {
- const disposable = props.api.onDidActiveChange((event) => {
- console.log(`is panel active: ${event.isActive}`);
- });
-
- return () => {
- disposable.dispose(); // remember to dispose of any subscriptions
- };
- }, [props.api]);
-
- const addAnotherPanel = React.useCallback(() => {
- props.containerApi.addPanel({
- id: 'another_id',
- component: 'anotherComponent',
- });
- }, [props.containerApi]);
-
- return (
-
- {`My first panel has the title: ${props.params.title}`}
-
-
- );
-};
-```
-
-### Serialization
-
-All components support `toJSON(): T` which returns a Typed object representation of the components state. This same Typed object can be used to deserialize a view using `fromJSON(object: T): void`.
-
-## Auto resizing
-
-`SplitviewReact`, `GridviewReact`, `PaneviewReact` and `DockviewReact` will all automatically resize to fill the size of their parent element.
-Internally this is achieved using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) which some users may need to polyfill.
-You can disable this by settings the `disableAutoResizing` prop to be `true`.
-
-You can manually resize a component using the API method `layout(width: number, height: number): void`.
-An advanced case may use this in conjunction with `disableAutoResizing=true` to allow a parent component to have ultimate control over the dimensions of the component.
-
-## Events
-
-Many API properties can be listened on using the `Event` pattern. For example `api.onDidFocusChange(() => {...})`.
-You should dispose of any event listeners you create cleaning up any listeners you would have created.
-
-```tsx
-React.useEffect(() => {
- const disposable = api.onDidFocusChange(() => {
- // write some code
- });
-
- return () => {
- disposable.dispose();
- };
-}, []);
-```
-
-## Proportional layout
-
-The `proportionalLayout` property indicates the expected behaviour of the component as it's container resizes, should all views resize equally or should just one view expand to fill the new space. `proportionalLayout` can be set as a property on `SplitviewReact` and `GridviewReact` components.
-Although not configurable on `DockviewReact` and `PaneviewReact` these both behave as if `proportionalLayout=true` was set for them.
-
-
-
-
-
-## Browser support
-
-dockview is intended to support all major browsers. Some users may require a polyfill for [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
diff --git a/packages/docs/versioned_docs/version-1.5.0/components/_category_.json b/packages/docs/versioned_docs/version-1.5.0/components/_category_.json
deleted file mode 100644
index 366718010..000000000
--- a/packages/docs/versioned_docs/version-1.5.0/components/_category_.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "label": "Components",
- "collapsible": true,
- "collapsed": false,
- "link": {
- "type": "generated-index",
- "title": "Components"
- }
-}
\ No newline at end of file
diff --git a/packages/docs/versioned_docs/version-1.5.0/components/dockview.mdx b/packages/docs/versioned_docs/version-1.5.0/components/dockview.mdx
deleted file mode 100644
index 7bb65e3a1..000000000
--- a/packages/docs/versioned_docs/version-1.5.0/components/dockview.mdx
+++ /dev/null
@@ -1,347 +0,0 @@
----
-description: Dockview Documentation
----
-
-import { SimpleDockview } from '@site/src/components/simpleDockview';
-import {
- RenderingDockview,
- Checkbox,
-} from '@site/src/components/dockview/rendering';
-import { DndDockview } from '@site/src/components/dockview/dnd';
-import { EventsDockview } from '@site/src/components/dockview/events';
-import { ContextMenuDockview } from '@site/src/components/dockview/contextMenu';
-import { NestedDockview } from '@site/src/components/dockview/nested';
-import { CustomHeadersDockview } from '@site/src/components/dockview/customHeaders';
-import Link from '@docusaurus/Link';
-
-# Dockview
-
-## Introduction
-
-Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels.
-
-
-
-
-
-You can access the panels associated group through the `panel.group` variable.
-The group will always be defined and will change if a panel is moved into another group.
-
-## DockviewReact Component
-
-You can create a Dockview through the use of the `ReactDockview` component.
-
-```tsx
-import { ReactDockview } from 'dockview';
-```
-
-| Property | Type | Optional | Default | Description |
-| ------------------- | ------------------------------------ | -------- | ------- | ------------------------------------------------------------ |
-| onReady | (event: SplitviewReadyEvent) => void | No | | |
-| components | object | No | | |
-| tabComponents | object | Yes | | |
-| watermarkComponent | object | Yes | | |
-| hideBorders | boolean | Yes | false | |
-| className | string | Yes | '' | |
-| disableAutoResizing | boolean | Yes | false | See Auto Resizing |
-| onTabContextMenu | Event | Yes | false | |
-| onDidDrop | Event | Yes | false | |
-| showDndOverlay | Event | Yes | false | |
-
-## Dockview API
-
-The Dockview API is exposed both at the `onReady` event and on each panel through `props.containerApi`.
-Through this API you can control general features of the component and access all added panels.
-
-```tsx title="Dockview API via Panel component"
-const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
- // props.containerApi...
-
- return
{`My first panel has the title: ${props.params.title}`}
{`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 |
-| width | `number` | Panel width |
-| height | `number` | Panel height |
-| onDidDimensionsChange | `Event` | |
-| onDidFocusChange | `Event` | |
-| onDidVisibilityChange | `Event` | |
-| onDidActiveChange | `Event` | |
-| setActive | `(): void` | |
-| | | |
-| onDidConstraintsChange | `onDidConstraintsChange: Event` | |
-| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
-| setSize | `(event: SizeEvent): void` | |
-| | | |
-| group | `GroupPanel | undefined` |
-| isGroupActive | `boolean` | |
-| title | `string` | |
-| suppressClosable | `boolean` | |
-| close | `(): void` | |
-| setTitle | `(title: string): void` | |
-
-## Advanced Features
-
-### Locked group
-
-Locking a group will disable all drop events for this group ensuring a user can not add additional panels to the group.
-You can still add groups to a locked panel programatically using the API.
-
-```tsx
-panel.group.locked = true;
-```
-
-### Group header
-
-You may wish to hide the header section of a group. This can achieved through setting the `hidden` variable on `panel.group.header`.
-
-```tsx
-panel.group.header.hidden = true;
-```
-
-### Custom Tab Headers
-
-You can provide custom renderers for your tab headers.
-A default implementation of `DockviewDefaultTab` is provided should you only wish to attach minor
-changes and events that do not alter the default behaviour, for example to add a custom context menu event
-handler.
-
-You are also free to define a custom renderer entirely from scratch and not make use of the `DockviewDefaultTab` component.
-
-```tsx title="Attaching a custom context menu event handlers to a custom header"
-import { IDockviewPanelHeaderProps, DockviewDefaultTab } from 'dockview';
-
-const MyCustomheader = (props: IDockviewPanelHeaderProps) => {
- const onContextMenu = (event: React.MouseEvent) => {
- event.preventDefault();
- alert('context menu');
- };
- return ;
-};
-```
-
-To use a custom renderer you can must register a collection of tab components
-
-```tsx
-const tabComponents = {
- myCustomHeader: MyCustomHeader,
-};
-
-return ;
-```
-
-```tsx
-api.addPanel({
- id: 'panel_1',
- component: 'default',
- tabComponent: 'myCustomHeader', // <--
- title: 'Panel 1',
-});
-```
-
-You can also override the default tab renderer which will be used when no `tabComponent` is provided to the `addPanel` function.
-
-```tsx
-;
-```
-
-As a simple example the below attachs a custom event handler for the context menu on all tabs as a default tab renderer
-
-
-
-### Rendering
-
-Although `DockviewReact` will only add those tabs that are visible to the DOM all associated React Components for each tab including those that
-are not initially visible will be created.
-This will mean that any hooks in those components will run and if you running expensive operations in the tabs you may end up doing a lot of initial
-work for what are hidden tabs.
-
-This is the default behaviour to ensure the greatest flexibility for the user but you can create a Higher-Order component wrapping your components that
-will ensure the component is only created if the tab is visible as below:
-
-```tsx
-import { PanelApi } from 'dockview';
-import * as React from 'react';
-
-function RenderWhenVisible<
- T extends { api: Pick }
->(component: React.FunctionComponent) {
- const HigherOrderComponent = (props: T) => {
- const [visible, setVisible] = React.useState(
- props.api.isVisible
- );
-
- React.useEffect(() => {
- const disposable = props.api.onDidVisibilityChange((event) =>
- setVisible(event.isVisible)
- );
-
- return () => {
- disposable.dispose();
- };
- }, [props.api]);
-
- if (!visible) {
- return null;
- }
-
- return React.createElement(component, props);
- };
- return HigherOrderComponent;
-}
-```
-
-```tsx
-const component = RenderWhenVisible(MyComponent);
-```
-
-Through toggling the checkbox you can see that when you only render those panels which are visible the underling React component is destroyed when it becomes hidden and re-created when it becomes visible.
-
-
-
-
-
-
-### Drag And Drop
-
-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 (
-
-);
-```
-
-
-
-### Events
-
-
-
-### 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`.
-
-
-
-### Group Controls Panel
-
-`DockviewReact` accepts a prop `groupControlComponent` which expects a React component whos props are `IDockviewGroupControlProps`.
-This control will be rendered inside the header bar on the right hand side for each group of tabs.
-
-```tsx
-const Component: React.FunctionComponent = () => {
- return
-
-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(
- props.api.isExpanded
- );
-
- React.useEffect(() => {
- const disposable = props.api.onDidExpansionChange((event) => {
- setExpanded(event.isExpanded);
- });
-
- return () => {
- disposable.dispose();
- };
- }, []);
-
- const onClick = () => {
- props.api.setExpanded(!expanded);
- };
-
- return (
-
-
- {props.params.title}
-
- );
-};
-
-const headerComponents = { myHeaderComponent: MyHeaderComponent };
-```
-
-### Drag And Drop
-
-If you provide the `PaneviewReact` component with the prop `onDidDrop` you will be able to interact with custom drop events.
-
-
-
-### Interactions
-
-You can safely create multiple paneview instances within one page. They will not interact with each other by default.
-
-If you wish to interact with the drop event from one paneview instance in another paneview instance you can implement the `showDndOverlay` and `onDidDrop` props on `PaneviewReact`.
-
-As an example see how dragging a header from one control to another will only trigger an interactable event for the developer if the checkbox is enabled.
-
-
diff --git a/packages/docs/versioned_docs/version-1.5.0/components/splitview.mdx b/packages/docs/versioned_docs/version-1.5.0/components/splitview.mdx
deleted file mode 100644
index a32e6d5a2..000000000
--- a/packages/docs/versioned_docs/version-1.5.0/components/splitview.mdx
+++ /dev/null
@@ -1,246 +0,0 @@
----
-description: Splitview Documentation
----
-
-import { SimpleSplitview } from '@site/src/components/simpleSplitview';
-import { SplitviewExample1 } from '@site/src/components/splitview/active';
-import Link from '@docusaurus/Link';
-
-# Splitview
-
-## Introduction
-
-A Splitview is a collection of resizable horizontally or vertically stacked panels.
-
-
;
- },
-};
-
-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 (
-
- );
-};
-```
-
-## SplitviewReact Component
-
-You can create a Splitview through the use of the `ReactSplitview` component.
-
-```tsx
-import { ReactSplitview } from 'dockview';
-```
-
-Using the `onReady` prop you can access to the component `api` and add panels either through deserialization or the individual addition of panels.
-
-| Property | Type | Optional | Default | Description |
-| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ |
-| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function |
-| components | `Record` | No | | Panel renderers |
-| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
-| proportionalLayout | `boolean` | Yes | `true` | See Proportional layout |
-| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
-| className | `string` | Yes | `''` | Attaches a classname |
-| disableAutoResizing | `boolean` | Yes | `false` | See Auto Resizing |
-
-## Splitview API
-
-The Splitview API is exposed both at the `onReady` event and on each panel through `props.containerApi`.
-Through this API you can control general features of the component and access all added panels.
-
-```tsx title="Splitview API via Panel component"
-const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
- // props.containerApi...
-
- 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` | Fires on layout change |
-| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call |
-| onDidAddView | `Event` | Fires when a view is added |
-| onDidRemoveView | `Event` | Fires when a view is removed |
-| | | |
-| addPanel | `addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel` | |
-| removePanel | `(panel: ISplitviewPanel, sizing?: Sizing): void` | |
-| getPanel | `(id:string): ISplitviewPanel \| undefined` | |
-| movePanel | `(from: number, to: number): void` | |
-| | |
-| updateOptions | `(options: SplitviewComponentUpdateOptions): void` | |
-| focus | `(): void` | Focus the active panel, if exists |
-| layout | `(width: number, height:number): void` | See Auto Resizing |
-| fromJSON | `(data: SerializedSplitview): void` | Serialization |
-| toJSON | `(): SerializedSplitview` | Serialization |
-| clear | `(): void` | Clears the current layout |
-
-## Splitview Panel API
-
-The Splitview panel API is exposed on each panel containing actions and variables specific to that panel.
-
-```tsx title="Splitview panel API via Panel component"
-const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
- // props.api...
-
- return
{`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` | Fires when panel dimensions change |
-| onDidFocusChange | `Event` | Fire when panel is focused and blurred |
-| onDidVisibilityChange | `Event` | Fires when the panels visiblity property is changed (see Panel Visibility) |
-| onDidActiveChange | `Event` | Fires when the panels active property is changed (see Active Panel) |
-| onDidConstraintsChange | `onDidConstraintsChange: Event` | Fires when the panels size contrainsts change (see Panel Constraints) |
-| | | |
-| setVisible | `(isVisible: boolean): void` | |
-| setActive | `(): void` | |
-| | | |
-| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
-| setSize | `(event: PanelSizeEvent): void` | |
-
-## Advanced Features
-
-Listed below are some functionalities avalaible through both the panel and component APIs. The live demo shows examples of these in real-time.
-
-
-
-
-
-### 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.5.0/examples.mdx b/packages/docs/versioned_docs/version-1.5.0/examples.mdx
deleted file mode 100644
index e608a2378..000000000
--- a/packages/docs/versioned_docs/version-1.5.0/examples.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-sidebar_position: 4
-description: Dockview examples
----
-
-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/src/components/simpleDockview';
-
-# Examples
-
-
diff --git a/packages/docs/versioned_docs/version-1.5.0/index.mdx b/packages/docs/versioned_docs/version-1.5.0/index.mdx
deleted file mode 100644
index 12068f080..000000000
--- a/packages/docs/versioned_docs/version-1.5.0/index.mdx
+++ /dev/null
@@ -1,149 +0,0 @@
----
-sidebar_position: 0
-description: A zero dependency layout manager built for React
----
-
-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/src/components/simpleDockview';
-
-# Introduction
-
-**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
-
-## Features
-
-- Themable and customizable
-- Support for the serialization and deserialization of layouts
-- Drag and drop support
-
-## 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';
-```
-
-A dark and light theme are provided, one of these classes (or a custom theme) must be attached at any point above your components in the HTML tree. To cover the entire web page you might attach the class to the `body` component:
-
-```html
-
- ...
-
-
- ...
-
-```
-
-There are 4 components you may want to use:
-
-Splitview
-
-