dockview
-
Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support written in TypeScript
+
Zero dependency layout manager supporting tabs, groups, grids and splitviews with ReactJS support written in TypeScript
---
[](https://www.npmjs.com/package/dockview)
+[](https://www.npmjs.com/package/dockview)
[](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
[](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
[](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
@@ -21,16 +22,20 @@ Please see the website: https://dockview.dev
## Features
-- Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with
- dockable and tabular views
-- Extensive API support at the component level and view level
-- Themable and customizable
-- Serialization / deserialization support
-- Tabular docking and Drag and Drop support
-- Floating groups, customized header bars and tab
-- Documentation and examples
+- Serialization / deserialization with full layout management
+- Support for split-views, grid-views and 'dockable' views
+- Themeable and customizable
+- Tab and Group docking / Drag n' Drop
+- Popout Windows
+- Floating Groups
+- Extensive API
+- Supports Shadow DOMs
+- High test coverage
+- Documentation website with live examples
+- Transparent builds and Code Analysis
+- Security at mind - verifed publishing and builds through GitHub Actions
-Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
+Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
## Quick start
diff --git a/packages/dockview-core/README.md b/packages/dockview-core/README.md
index 980454e34..32179da7c 100644
--- a/packages/dockview-core/README.md
+++ b/packages/dockview-core/README.md
@@ -8,6 +8,7 @@
---
[](https://www.npmjs.com/package/dockview)
+[](https://www.npmjs.com/package/dockview)
[](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
[](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
[](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
@@ -15,24 +16,30 @@
##
+
+
Please see the website: https://dockview.dev
## Features
-- Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with
- dockable and tabular views
-- Extensive API support at the component level and view level
-- Themable and customizable
-- Serialization / deserialization support
-- Tabular docking and Drag and Drop support
-- Floating groups, customized header bars and tab
-- Documentation and examples
+- Serialization / deserialization with full layout management
+- Support for split-views, grid-views and 'dockable' views
+- Themeable and customizable
+- Tab and Group docking / Drag n' Drop
+- Popout Windows
+- Floating Groups
+- Extensive API
+- Supports Shadow DOMs
+- High test coverage
+- Documentation website with live examples
+- Transparent builds and Code Analysis
+- Security at mind - verifed publishing and builds through GitHub Actions
-Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview-core@latest/
+Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
## Quick start
-You can install dockview-core from [npm](https://www.npmjs.com/package/dockview-core).
+Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview-core).
```
npm install --save dockview-core
diff --git a/packages/dockview-core/src/dom.ts b/packages/dockview-core/src/dom.ts
index a58df3e06..c25b12450 100644
--- a/packages/dockview-core/src/dom.ts
+++ b/packages/dockview-core/src/dom.ts
@@ -240,7 +240,7 @@ export function getDomNodePagePosition(domNode: Element): {
export function isInDocument(element: Element): boolean {
let currentElement: Element | ParentNode = element;
- while (currentElement && currentElement.parentNode) {
+ while (currentElement?.parentNode) {
if (currentElement.parentNode === document) {
return true;
} else if (currentElement.parentNode instanceof DocumentFragment) {
diff --git a/packages/dockview/README.md b/packages/dockview/README.md
index b80c8c188..7a0dc6c1e 100644
--- a/packages/dockview/README.md
+++ b/packages/dockview/README.md
@@ -8,6 +8,7 @@
---
[](https://www.npmjs.com/package/dockview)
+[](https://www.npmjs.com/package/dockview)
[](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
[](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
[](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
@@ -19,16 +20,20 @@ Please see the website: https://dockview.dev
## Features
-- Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with
- dockable and tabular views
-- Extensive API support at the component level and view level
-- Themable and customizable
-- Serialization / deserialization support
-- Tabular docking and Drag and Drop support
-- Floating groups, customized header bars and tab
-- Documentation and examples
+- Serialization / deserialization with full layout management
+- Support for split-views, grid-views and 'dockable' views
+- Themeable and customizable
+- Tab and Group docking / Drag n' Drop
+- Popout Windows
+- Floating Groups
+- Extensive API
+- Supports Shadow DOMs
+- High test coverage
+- Documentation website with live examples
+- Transparent builds and Code Analysis
+- Security at mind - verifed publishing and builds through GitHub Actions
-Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
+Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
## Quick start
diff --git a/packages/docs/blog/2024-01-31-dockview-1.9.0.md b/packages/docs/blog/2024-01-15-dockview-1.9.0.md
similarity index 88%
rename from packages/docs/blog/2024-01-31-dockview-1.9.0.md
rename to packages/docs/blog/2024-01-15-dockview-1.9.0.md
index 0f40e34cb..1cecdc982 100644
--- a/packages/docs/blog/2024-01-31-dockview-1.9.0.md
+++ b/packages/docs/blog/2024-01-15-dockview-1.9.0.md
@@ -16,6 +16,8 @@ Please reference to docs @ [dockview.dev](https://dockview.dev).
- Advanced panel rendering configurations [#397](https://github.com/mathuo/dockview/issues/397)
+- Support for rendering within Shadow DOM elements [#425](https://github.com/mathuo/dockview/issues/425)
+
## 🛠Miscs
- Remove hover effect on inactive drag handles [#392](https://github.com/mathuo/dockview/pull/392)
diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx
index 35231ef41..0472c1e1a 100644
--- a/packages/docs/docs/components/dockview.mdx
+++ b/packages/docs/docs/components/dockview.mdx
@@ -29,6 +29,7 @@ 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 { DocRef } from '@site/src/components/ui/reference/docRef';
@@ -403,7 +404,7 @@ To programatically move the popout group back into the main grid you can use the
```tsx
// option 1: add absolutely to the right-side of the grid
-props.group.api.moveTo({position: 'right'});
+props.group.api.moveTo({ position: 'right' });
// option 2: create a new group and move the contents of the popout group to it
const group = props.containerApi.addGroup();
@@ -418,12 +419,44 @@ props.group.api.moveTo({ group });
## Maximized Groups
-To maximize a group you can all
+To maximize a group from the component `api`:
```tsx
+// maximize a specified group
api.maxmimizeGroup(group);
+
+// check whether a specific group is maximized
+const result: boolean = api.isMaximizedGroup(group);
+
+// if there is any maximized group exit the maximized state
+exitMaximizedGroup();
+
+// is there a maximized group
+const result: boolean = hasMaximizedGroup();
```
+The following methods are available on both the panel and group `api` objects:
+
+> `api.