chore: update docs

packages/docs/docs/components/dockview.mdx

@@ -12,6 +12,7 @@ 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 { ResizeDockview } from '@site/src/components/dockview/resize';
 import Link from '@docusaurus/Link';
 
 # Dockview
@@ -176,6 +177,10 @@ const onResizePanel = () => {
 };
 ```
 
+Here is a working example of resizing panels via these API methods.
+
+<ResizeDockview />
+
 ### Locked group
 
 Locking a group will disable all drop events for this group ensuring a user can not add additional panels to the group.

packages/docs/src/components/dockview/demo.tsx

@@ -209,8 +209,9 @@ const Icon = (props: {
 };
 
 const Button = () => {
-    const [position, setPosition] =
+    const [position, setPosition] = React.useState<
-        React.useState<{ x: number; y: number } | undefined>(undefined);
+        { x: number; y: number } | undefined
+    >(undefined);
 
     const close = () => setPosition(undefined);
 
@@ -318,6 +319,16 @@ export const DockviewDemo = () => {
         event.api.addEmptyGroup();
 
         event.api.getPanel('panel_1').api.setActive();
+
+        setInterval(() => {
+            event.api.getPanel('panel_1').update({
+                params: {
+                    params: {
+                        title: Date.now().toString(),
+                    },
+                },
+            });
+        }, 1000);
     };
 
     return (

packages/docs/src/components/dockview/resize.scss

@@ -0,0 +1,23 @@
+.resize-panel {
+    padding: 10px;
+    color: white;
+
+    .resize-control {
+        display: flex;
+        height: 18px;
+        line-height: 18px;
+        font-size: 13px;
+
+        span {
+            width: 60px;
+        }
+
+        input {
+            width: 75px;
+        }
+
+        button {
+            width: 50px;
+        }
+    }
+}

packages/docs/src/components/dockview/resize.tsx

@@ -0,0 +1,111 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+import './resize.scss';
+
+const Default = (props: IDockviewPanelProps) => {
+    const [width, setWidth] = React.useState<number>(100);
+    const [height, setHeight] = React.useState<number>(100);
+
+    return (
+        <div className="resize-panel">
+            <div style={{ height: '25px' }}>{props.api.title}</div>
+            <div className="resize-control">
+                <span>Width:</span>
+                <input
+                    value={width}
+                    onChange={(e) => setWidth(Number(e.target.value))}
+                    type="number"
+                    min={50}
+                    step={1}
+                />
+                <button
+                    onClick={() => {
+                        props.api.group.api.setSize({
+                            width,
+                        });
+                    }}
+                >
+                    Set
+                </button>
+            </div>
+            <div className="resize-control">
+                <span>Height:</span>
+                <input
+                    value={height}
+                    onChange={(e) => setHeight(Number(e.target.value))}
+                    type="number"
+                    min={50}
+                    step={1}
+                />
+                <button
+                    onClick={() => {
+                        props.api.group.api.setSize({
+                            height,
+                        });
+                    }}
+                >
+                    Set
+                </button>
+            </div>
+        </div>
+    );
+};
+
+const components = {
+    default: Default,
+};
+
+export const ResizeDockview = () => {
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            position: {
+                direction: 'right',
+                referencePanel: 'panel_1',
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+            position: {
+                direction: 'below',
+                referencePanel: 'panel_1',
+            },
+        });
+        event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+        });
+        event.api.addPanel({
+            id: 'panel_5',
+            component: 'default',
+        });
+    };
+
+    return (
+        <div
+            style={{
+                height: '500px',
+                display: 'flex',
+                flexDirection: 'column',
+            }}
+        >
+            <DockviewReact
+                className="dockview-theme-dark"
+                onReady={onReady}
+                components={components}
+            />
+        </div>
+    );
+};