chore: docs

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

@@ -188,16 +188,20 @@ const DockviewDemo = (props: { theme?: string }) => {
         >
             <div>
                 <GridActions api={api} />
+                {api && (
                     <PanelActions
                         api={api}
                         panels={panels}
                         activePanel={activePanel}
                     />
+                )}
+                {api && (
                     <GroupActions
                         api={api}
                         groups={groups}
                         activeGroup={activeGroup}
                     />
+                )}
             </div>
             <div
                 style={{

packages/docs/sandboxes/react/dockview/demo-dockview/src/defaultLayout.ts

@@ -3,9 +3,7 @@ import { DockviewApi } from 'dockview';
 export const nextId = (() => {
     let counter = 0;
 
-    return () => {
+    return () => counter++;
-        counter++;
-    };
 })();
 
 export function defaultConfig(api: DockviewApi) {

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

@@ -34,11 +34,12 @@ export const GridActions = (props: { api?: DockviewApi }) => {
         }
     };
 
-    const onAddPanel = () => {
+    const onAddPanel = (options?: { inactive: boolean }) => {
         props.api?.addPanel({
             id: `id_${Date.now().toString()}`,
             component: 'default',
             title: `Tab ${nextId()}`,
+            inactive: options?.inactive,
         });
     };
 
@@ -48,9 +49,15 @@ export const GridActions = (props: { api?: DockviewApi }) => {
 
     return (
         <div className="action-container">
-            <button className="text-button" onClick={onAddPanel}>
+            <button className="text-button" onClick={() => onAddPanel()}>
                 Add Panel
             </button>
+            <button
+                className="text-button"
+                onClick={() => onAddPanel({ inactive: true })}
+            >
+                Add Inactive Panel
+            </button>
             <button className="text-button" onClick={onAddGroup}>
                 Add Group
             </button>

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

@@ -1,50 +1,85 @@
-import { DockviewApi } from 'dockview';
+import { DockviewApi, DockviewGroupLocation } from 'dockview';
+import * as React from 'react';
 
-export const GroupActions = (props: {
+const GroupAction = (props: {
+    groupId: string;
     groups: string[];
-    api?: DockviewApi;
+    api: DockviewApi;
     activeGroup?: string;
 }) => {
-    return (
-        <div className="action-container">
-            {props.groups.map((x) => {
     const onClick = () => {
-                    props.api?.getGroup(x)?.focus();
+        props.api?.getGroup(props.groupId)?.focus();
     };
+
+    const isActive = props.activeGroup === props.groupId;
+    const group = React.useMemo(
+        () => props.api.getGroup(props.groupId),
+        [props.api, props.groupId]
+    );
+
+    const [location, setLocation] =
+        React.useState<DockviewGroupLocation | null>(null);
+    const [isMaximized, setIsMaximized] = React.useState<boolean>(false);
+
+    React.useEffect(() => {
+        if (!group) {
+            setLocation(null);
+            return;
+        }
+
+        const disposable = group.api.onDidLocationChange((event) => {
+            setLocation(event.location);
+        });
+
+        const disposable2 = props.api.onDidMaximizedGroupChange(() => {
+            setIsMaximized(group.api.isMaximized());
+        });
+
+        setLocation(group.api.location);
+        setIsMaximized(group.api.isMaximized());
+
+        return () => {
+            disposable.dispose();
+            disposable2.dispose();
+        };
+    }, [group]);
+
     return (
         <div className="button-action">
             <div style={{ display: 'flex' }}>
                 <button
                     onClick={onClick}
                     className={
-                                    props.activeGroup === x
+                        isActive ? 'demo-button selected' : 'demo-button'
-                                        ? 'demo-button selected'
-                                        : 'demo-button'
                     }
                 >
-                                {x}
+                    {props.groupId}
                 </button>
             </div>
             <div style={{ display: 'flex' }}>
                 <button
-                                className="demo-icon-button"
+                    className={
+                        location?.type === 'floating'
+                            ? 'demo-icon-button selected'
+                            : 'demo-icon-button'
+                    }
                     onClick={() => {
-                                    const panel = props.api?.getGroup(x);
+                        if (group) {
-                                    if (panel) {
+                            props.api.addFloatingGroup(group);
-                                        props.api?.addFloatingGroup(panel);
                         }
                     }}
                 >
-                                <span className="material-symbols-outlined">
+                    <span className="material-symbols-outlined">ad_group</span>
-                                    ad_group
-                                </span>
                 </button>
                 <button
-                                className="demo-icon-button"
+                    className={
+                        location?.type === 'popout'
+                            ? 'demo-icon-button selected'
+                            : 'demo-icon-button'
+                    }
                     onClick={() => {
-                                    const panel = props.api?.getGroup(x);
+                        if (group) {
-                                    if (panel) {
+                            props.api.addPopoutGroup(group);
-                                        props.api?.addPopoutGroup(panel);
                         }
                     }}
                 >
@@ -53,13 +88,18 @@ export const GroupActions = (props: {
                     </span>
                 </button>
                 <button
-                                className="demo-icon-button"
+                    className={
+                        isMaximized
+                            ? 'demo-icon-button selected'
+                            : 'demo-icon-button'
+                    }
                     onClick={() => {
-                                    const panel = props.api?.getGroup(x);
+                        if (group) {
-                                    if (panel?.api.isMaximized()) {
+                            if (group.api.isMaximized()) {
-                                        panel.api.exitMaximized();
+                                group.api.exitMaximized();
                             } else {
-                                        panel?.api.maximize();
+                                group.api.maximize();
+                            }
                         }
                     }}
                 >
@@ -70,17 +110,28 @@ export const GroupActions = (props: {
                 <button
                     className="demo-icon-button"
                     onClick={() => {
-                                    const panel = props.api?.getGroup(x);
+                        const panel = props.api?.getGroup(props.groupId);
                         panel?.api.close();
                     }}
                 >
-                                <span className="material-symbols-outlined">
+                    <span className="material-symbols-outlined">close</span>
-                                    close
-                                </span>
                 </button>
             </div>
         </div>
     );
+};
+
+export const GroupActions = (props: {
+    groups: string[];
+    api: DockviewApi;
+    activeGroup?: string;
+}) => {
+    return (
+        <div className="action-container">
+            {props.groups.map((groupId) => {
+                return (
+                    <GroupAction key={groupId} {...props} groupId={groupId} />
+                );
             })}
         </div>
     );

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

@@ -1,48 +1,44 @@
 import { DockviewApi } from 'dockview';
 
-export const PanelActions = (props: {
+const PanelAction = (props: {
     panels: string[];
-    api?: DockviewApi;
+    api: DockviewApi;
     activePanel?: string;
+    panelId: string;
 }) => {
-    return (
-        <div className="action-container">
-            {props.panels.map((x) => {
     const onClick = () => {
-                    props.api?.getPanel(x)?.focus();
+        props.api?.getPanel(props.panelId)?.focus();
     };
     return (
         <div className="button-action">
             <div style={{ display: 'flex' }}>
                 <button
                     className={
-                                    props.activePanel === x
+                        props.activePanel === props.panelId
                             ? 'demo-button selected'
                             : 'demo-button'
                     }
                     onClick={onClick}
                 >
-                                {x}
+                    {props.panelId}
                 </button>
             </div>
             <div style={{ display: 'flex' }}>
                 <button
                     className="demo-icon-button"
                     onClick={() => {
-                                    const panel = props.api?.getPanel(x);
+                        const panel = props.api?.getPanel(props.panelId);
                         if (panel) {
                             props.api?.addFloatingGroup(panel);
                         }
                     }}
                 >
-                                <span className="material-symbols-outlined">
+                    <span className="material-symbols-outlined">ad_group</span>
-                                    ad_group
-                                </span>
                 </button>
                 <button
                     className="demo-icon-button"
                     onClick={() => {
-                                    const panel = props.api?.getPanel(x);
+                        const panel = props.api?.getPanel(props.panelId);
                         if (panel) {
                             props.api?.addPopoutGroup(panel);
                         }
@@ -55,17 +51,26 @@ export const PanelActions = (props: {
                 <button
                     className="demo-icon-button"
                     onClick={() => {
-                                    const panel = props.api?.getPanel(x);
+                        const panel = props.api?.getPanel(props.panelId);
                         panel?.api.close();
                     }}
                 >
-                                <span className="material-symbols-outlined">
+                    <span className="material-symbols-outlined">close</span>
-                                    close
-                                </span>
                 </button>
             </div>
         </div>
     );
+};
+
+export const PanelActions = (props: {
+    panels: string[];
+    api: DockviewApi;
+    activePanel?: string;
+}) => {
+    return (
+        <div className="action-container">
+            {props.panels.map((id) => {
+                return <PanelAction key={id} {...props} panelId={id} />;
             })}
         </div>
     );