chore: docs

packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss

@@ -1,3 +1,4 @@
+.dockview-demo {
     .group-control {
         .action {
             padding: 4px;
@@ -24,11 +25,6 @@
         }
     }
 
-.action-container {
-    display: flex;
-    padding: 4px 0px;
-    overflow: auto;
-
     button {
         height: 25px;
         display: flex;
@@ -40,11 +36,31 @@
         cursor: pointer;
         outline: 1px solid #4c65d4;
 
+        &:focus {
+            outline: 1px solid #4c65d4 !important;
+        }
+
         &:hover {
             background-color: #222e62;
         }
     }
 
+    input {
+        outline: 1px solid #4c65d4;
+        border: none;
+        margin: 0px;
+        height: 25px;
+
+        &:focus {
+            outline: 1px solid #4c65d4 !important;
+        }
+    }
+
+    .action-container {
+        display: flex;
+        padding: 4px;
+        overflow: auto;
+
         .text-button {
             margin: 0px 4px;
         }
@@ -94,3 +110,4 @@
             }
         }
     }
+}

packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx

@@ -89,7 +89,10 @@ const components = {
                     event.api.addPanel({
                         id: 'panel_3',
                         component: 'default',
-                        floating: true,
+                    });
+
+                    event.api.onDidRemovePanel((e) => {
+                        console.log('remove', e);
                     });
                 }}
                 className={'dockview-theme-abyss'}
@@ -264,6 +267,7 @@ const DockviewDemo = (props: { theme?: string }) => {
 
     return (
         <div
+            className="dockview-demo"
             style={{
                 height: '100%',
                 display: 'flex',
@@ -381,12 +385,15 @@ const DockviewDemo = (props: { theme?: string }) => {
                             width: '400px',
                             backgroundColor: 'black',
                             color: 'white',
-                            overflow: 'auto',
+                            overflow: 'hidden',
                             fontFamily: 'monospace',
                             marginLeft: '10px',
                             flexShrink: 0,
+                            display: 'flex',
+                            flexDirection: 'column',
                         }}
                     >
+                        <div style={{ flexGrow: 1, overflow: 'auto' }}>
                             {logLines.map((line, i) => {
                                 return (
                                     <div
@@ -399,7 +406,8 @@ const DockviewDemo = (props: { theme?: string }) => {
                                             display: 'flex',
                                             alignItems: 'center',
 
-                                        backgroundColor: line.backgroundColor,
+                                            backgroundColor:
+                                                line.backgroundColor,
                                         }}
                                         key={i}
                                     >
@@ -437,6 +445,18 @@ const DockviewDemo = (props: { theme?: string }) => {
                                 );
                             })}
                         </div>
+                        <div
+                            style={{
+                                padding: '4px',
+                                display: 'flex',
+                                justifyContent: 'flex-end',
+                            }}
+                        >
+                            <button onClick={() => setLogLines([])}>
+                                Clear
+                            </button>
+                        </div>
+                    </div>
                 )}
             </div>
         </div>

packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx

@@ -132,7 +132,7 @@ export const GridActions = (props: {
 
     const popover = usePopover();
 
-    const onAddPanel = (options?: { advanced: boolean }) => {
+    const onAddPanel = (options?: { advanced?: boolean; nested?: boolean }) => {
         if (options?.advanced) {
             popover.open(({ close }) => {
                 return <PanelBuilder api={props.api!} done={close} />;
@@ -140,7 +140,7 @@ export const GridActions = (props: {
         } else {
             props.api?.addPanel({
                 id: `id_${Date.now().toString()}`,
-                component: 'default',
+                component: options?.nested ? 'nested' : 'default',
                 title: `Tab ${nextId()}`,
                 renderer: 'always',
             });
@@ -170,6 +170,12 @@ export const GridActions = (props: {
                     <span className="material-symbols-outlined">tune</span>
                 </button>
             </div>
+            <button
+                className="text-button"
+                onClick={() => onAddPanel({ nested: true })}
+            >
+                Add Nested Panel
+            </button>
             <button className="text-button" onClick={onAddGroup}>
                 Add Group
             </button>
@@ -198,8 +204,8 @@ export const GridActions = (props: {
                 Reset
             </button>
             <span style={{ flexGrow: 1 }} />
-            <div style={{ display: 'flex' }}>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
-                <span style={{ paddingRight: '4px' }}>Group Gap</span>
+                <span style={{ paddingRight: '4px' }}>Grid Gap</span>
                 <input
                     style={{ width: 40 }}
                     type="number"
@@ -209,6 +215,7 @@ export const GridActions = (props: {
                     value={gap}
                     onChange={(event) => setGap(Number(event.target.value))}
                 />
+                <button onClick={() => setGap(0)}>Reset</button>
             </div>
         </div>
     );

packages/docs/sandboxes/react/dockview/demo-dockview/src/mapboxPanel.tsx

@@ -0,0 +1,28 @@
+import { IDockviewPanelProps } from 'dockview';
+import * as React from 'react';
+import Map from 'react-map-gl';
+
+export const MapboxPanel = (props: IDockviewPanelProps) => {
+    React.useEffect(() => {
+        const subscription = props.api.onDidLocationChange((e) => {
+            const isPopout = e.location.type === 'popout';
+        });
+
+        return () => subscription.dispose();
+    }, [props.api]);
+
+    return (
+        <div style={{ overflow: 'auto', height: '100%' }}>
+            <Map
+                mapboxAccessToken="pk.eyJ1IjoibWF0aHVvIiwiYSI6ImNrMXo4bnJ1ajA5OXUzaXA5ODg3Nnc1M3YifQ.Il7zfYd-sZ113W6Fmmagjg"
+                initialViewState={{
+                    longitude: -122.4,
+                    latitude: 37.8,
+                    zoom: 14,
+                }}
+                style={{ width: 600, height: 400 }}
+                mapStyle="mapbox://styles/mapbox/streets-v9"
+            />
+        </div>
+    );
+};

packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx

@@ -74,14 +74,7 @@ const PanelAction = (props: {
                     onClick={() => {
                         const panel = props.api.getPanel(props.panelId);
                         if (panel) {
-                            props.api.addFloatingGroup(panel, {
+                            props.api.addFloatingGroup(panel);
-                                position: {
-                                    width: 400,
-                                    height: 300,
-                                    bottom: 50,
-                                    right: 50,
-                                },
-                            });
                         }
                     }}
                 >