Merge branch 'master' of https://github.com/mathuo/dockview into 263-left-header-actions

packages/docs/blog/2023-06-03-dockview-1.7.3.md

@@ -0,0 +1,17 @@
+---
+slug: dockview-1.7.3-release
+title: Dockview 1.7.3
+tags: [release]
+---
+
+# Release Notes
+
+Please reference to docs @ [dockview.dev](https://dockview.dev).
+
+## 🚀 Features
+
+## 🛠 Miscs
+
+-  Fix bug custom params named 'title' conflicting with built-in tab 'title' object [#258](https://github.com/mathuo/dockview/issues/258)
+
+## 🔥 Breaking changes

packages/docs/docs/components/dockview.mdx

@@ -649,22 +649,22 @@ panel.group.locked = true;
 
 ### 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.
+`DockviewReact` accepts `leftHeaderActionsComponent` and `rightHeaderActionsComponent` which expect a React component with props `IDockviewGroupControlProps`.
+These controls are rendered of the left and right side of the space to the right of the tabs in the header bar.
 
 ```tsx
 const Component: React.FunctionComponent<IDockviewGroupControlProps> = () => {
     return <div>{'...'}</div>;
 };
 
-return <DockviewReact {...props} groupControlComponent={Component} />;
+return <DockviewReact {...props} leftHeaderActionsComponent={Component} rightHeaderActionsComponent={...} />;
 ```
 
 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 GroupControlComponent = (props: IDockviewGroupControlProps) => {
+const RightHeaderActionsComponent = (props: IDockviewGroupControlProps) => {
     const isGroupActive = props.isGroupActive;
     const activePanel = props.activePanel;
 

packages/docs/sandboxes/groupcontrol-dockview/src/app.tsx

@@ -28,7 +28,6 @@ const components = {
 
 const RightHeaderActions = (props: IDockviewGroupControlProps) => {
     const isGroupActive = props.isGroupActive;
-    const activePanel = props.activePanel;
 
     return (
         <div className="dockview-groupcontrol-demo">
@@ -40,6 +39,15 @@ const RightHeaderActions = (props: IDockviewGroupControlProps) => {
             >
                 {isGroupActive ? 'Group Active' : 'Group Inactive'}
             </span>
+        </div>
+    );
+};
+
+const LeftHeaderActions = (props: IDockviewGroupControlProps) => {
+    const activePanel = props.activePanel;
+
+    return (
+        <div className="dockview-groupcontrol-demo">
             <span className="dockview-groupcontrol-demo-active-panel">{`activePanel: ${
                 activePanel?.id || 'null'
             }`}</span>
@@ -87,6 +95,7 @@ const DockviewGroupControl = () => {
         <DockviewReact
             onReady={onReady}
             components={components}
+            leftHeaderActionsComponent={LeftHeaderActions}
             rightHeaderActionsComponent={RightHeaderActions}
             className="dockview-theme-abyss"
         />

packages/docs/versioned_docs/version-1.7.3/basics.mdx

@@ -8,7 +8,6 @@ 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

packages/docs/versioned_docs/version-1.7.3/components/dockview.mdx

@@ -2,7 +2,10 @@
 description: Dockview Documentation
 ---
 
-import { Container } from '@site/src/components/ui/container';
+import {
+    Container,
+    MultiFrameworkContainer,
+} from '@site/src/components/ui/container';
 
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
@@ -24,7 +27,11 @@ import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app';
 import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
 import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
 import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
+
 import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app';
+import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app';
+import { attach as attachTabHeightDockview } from '@site/sandboxes/javascript/tabheight-dockview/src/app';
+import { attach as attachNativeDockview } from '@site/sandboxes/javascript/fullwidthtab-dockview/src/app';
 
 # Dockview
 
@@ -32,12 +39,16 @@ import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vani
 
 Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels.
 
-<Container sandboxId="simple-dockview">
-    <SimpleDockview />
-</Container>
+<MultiFrameworkContainer
+    sandboxId="simple-dockview"
+    react={SimpleDockview}
+    typescript={attachSimpleDockview}
+/>
 
-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.
+<br />
+
+> 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
 
@@ -340,7 +351,9 @@ return (
 
 ### Third Party Dnd Libraries
 
-To be completed...
+This shows a simple example of a third-party library used inside a panel that relies on drag
+and drop functionalities. This examples serves to show that `dockview` doesn't interfer with
+any drag and drop logic for other controls.
 
 <Container>
     <DockviewExternalDnd />
@@ -606,15 +619,21 @@ to the entire width of the group. For example:
 <DockviewReactComponent singleTabMode="fullwidth" {...otherProps} />
 ```
 
-<Container sandboxId="fullwidthtab-dockview">
-    <DockviewNative />
-</Container>
+<MultiFrameworkContainer
+    sandboxId="fullwidthtab-dockview"
+    react={DockviewNative}
+    typescript={attachNativeDockview}
+/>
 
 ### Tab Height
 
-<Container sandboxId="tabheight-dockview">
-    <DockviewTabheight />
-</Container>
+Tab height can be controlled through CSS.
+
+<MultiFrameworkContainer
+    sandboxId="tabheight-dockview"
+    react={DockviewTabheight}
+    typescript={attachTabHeightDockview}
+/>
 
 ## Groups
 
@@ -705,19 +724,11 @@ If you wish to interact with the drop event from one dockview instance in anothe
     <NestedDockview />
 </Container>
 
-### Example
-
-hello
+### Window-like mananger with tabs
 
 <DockviewNative2 />
 
-hello 2
-
-<div style={{ height: '400px', width: '100%' }}>
-    <App />
-</div>
-
-## VanillaJS
+## Vanilla JS
 
 > Note: This section is experimental and support for Vanilla JS is a work in progress.
 
@@ -728,6 +739,6 @@ The core library is published as an independant package under the name `dockview
 > `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`.
 
 <Container
-    sandboxId="javascript/vanilla-dockview"
+    sandboxId="typescript/vanilla-dockview"
     injectVanillaJS={attachDockviewVanilla}
 />

packages/docs/versions.json

@@ -1,3 +1,3 @@
 [
-  "1.7.2"
-]
+  "1.7.3"
+]