chore: docs

Author: mathuo

packages/docs/docs/core/groups/floatingGroups.mdx

@@ -8,6 +8,10 @@ import { DocRef } from '@site/src/components/ui/reference/docRef';
 
 This section describes floating groups.
 
+:::info
+Floating groups cannot be maximized. Calling maximize function on groups in these states will have no effect.
+:::
+
 Dockview has built-in support for floating groups. Each floating container can contain a single group with many panels
 and you can have as many floating containers as needed. You cannot dock multiple groups together in the same floating container.
 
@@ -23,12 +27,13 @@ The following properties can be set to configure the behaviours of floating grou
   <DocRef declaration="DockviewComponentOptions" methods={['floatingGroupBounds', 'disableFloatingGroups']} />
 </FrameworkSpecific>
 
+Floating groups can be interacted with whilst holding the `shift` key activating the `event.shiftKey` boolean property on `KeyboardEvent` events.
+
 ## Live Example
 
 <LiveExample framework="react" id="dockview/floating-groups"/>
 
 
-Floating groups can be interacted with whilst holding the `shift` key activating the `event.shiftKey` boolean property on `KeyboardEvent` events.
 
 > Float an existing tab by holding `shift` whilst interacting with the tab
 

packages/docs/docs/core/groups/hiddenHeader.mdx

@@ -0,0 +1,13 @@
+---
+title: Hidden Header
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import LiveExample from '@site/src/components/ui/exampleFrame';
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+
+You may wish to hide the header section of a group. This can achieved through the `hidden` variable on `panel.group.header`.
+
+```tsx
+panel.group.header.hidden = true;
+```

packages/docs/docs/core/groups/maxmizedGroups.mdx

@@ -7,11 +7,6 @@ import LiveExample from '@site/src/components/ui/exampleFrame';
 
 This section described how to maxmimize groups.
 
-
-:::info
-Floating groups cannot be maximized. Calling maximize function on groups in these states will have no effect.
-:::
-
 ## API methods
 
 The following methods on the [API](/docs/api/dockview/overview) are related to maximizing groups.

packages/docs/docs/core/locked.mdx

@@ -0,0 +1,10 @@
+---
+title: Locked
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import { DocRef } from '@site/src/components/ui/reference/docRef';
+import LiveExample from '@site/src/components/ui/exampleFrame';
+
+This section describes how to lock the dock to prevent movement.

packages/docs/docs/core/panels/add.mdx

@@ -1,19 +1,20 @@
 ---
-title: Add Panel
+title: Adding Panels
 sidebar_position: 1
 ---
 
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
-This section describes how to add a new panel.
+This section describes how to add a new panel and the options you can provide.
 
-## API
+
+Panels can be added through the dock api.
 
 <DocRef declaration="DockviewApi" methods={['addPanel']} />
 
-## Opening a Simple Panel
+## Opening a Basic Panel
 
-The minimum options required to open a panel are a unique `id` for the panel and the name of the `component` to render.
+To open a panel requires a unique `id` and the name of the `component` to render.
 
 ```ts
 const panel: IDockviewPanel = api.addPanel({
@@ -22,7 +23,29 @@ const panel: IDockviewPanel = api.addPanel({
 });
 ```
 
-> See [Overview](/docs/core/overview) to learn how to register components.
+> See [Overview](/docs/core/overview) to register components.
+
+## Providing a Panel Title
+
+:::warning
+Registering and updating the title using these built-in variables only works for the default tab renderer.
+If you use a custom tab render you can optionally access these variables to render the title, or you can take
+your own approach to rendering a tab title.
+:::
+
+Use `title` to provide a custom title for the panel. If no `title` is provided then the dock will render `id` in the tab.
+
+```tsx
+api.addPanel({
+    id: 'panel_1',
+    component: 'my_component',
+    title: 'my_custom_title',
+});
+```
+
+```tsx
+api.setTitle('my_new_custom_title');
+```
 
 ## Provide a custom Tab renderer
 

packages/docs/docs/core/panels/register.mdx

@@ -1,5 +1,5 @@
 ---
-title: Register A Panel
+title: Registering Panels
 sidebar_position: 0
 ---
 
@@ -8,8 +8,7 @@ import { DocRef } from '@site/src/components/ui/reference/docRef';
 
 This section describes how to register a panel.
 
-You can register panels through the `components` [option](/docs/api/dockview/options).
-
+You can register panels through the dock  [option](/docs/api/dockview/options) `components`.
 
 <FrameworkSpecific framework='React'>
   <DocRef declaration="IDockviewReactProps" methods={['components']} />
@@ -25,6 +24,7 @@ You can register panels through the `components` [option](/docs/api/dockview/opt
 const components = {
   component_1: (props: IDockviewPanelProps) => {
     const api: DockviewPanelApi  = props.api;
+    const groupApi: DockviewGroupPanelApi  = props.group.api;
     const containerApi: DockviewApi  = props.containerApi;
 
     return <div>{/** logic */}</div>
@@ -39,5 +39,8 @@ return <DockviewReact components={components}/>
 </FrameworkSpecific>
 
 
-Each panel has it's own [API](/docs/api/dockview/panelApi) which can be used to control the panel and you can
-also has access the dock [API](/docs/api/dockview/overview) from the panel directly.
+Each panel has an [api](/docs/api/dockview/panelApi) which is used to control specific
+features on that individual panel.
+The panel also has access the [group api](/docs/api/dockview/groupApi) and the container
+[api](/docs/api/dockview/overview), which is the docks primary api.
+

packages/docs/docs/core/tabs/rendering.mdx packages/docs/docs/core/panels/tabs.mdx

@@ -1,18 +1,21 @@
 ---
-title: Custom Tab Rendering
+title: Tabs
 sidebar_position: 2
 ---
 
 import { MultiFrameworkContainer } from '@site/src/components/ui/container';
 import CustomHeadersDockview from '@site/sandboxes/customheader-dockview/src/app';
+import DockviewNative from '@site/sandboxes/fullwidthtab-dockview/src/app';
+import { attach as attachNativeDockview } from '@site/sandboxes/javascript/fullwidthtab-dockview/src/app';
+import { DocRef } from '@site/src/components/ui/reference/docRef';
 
 This section describes how to implement custom tab renderers
 
 ## Register a Tab Component
 
 <FrameworkSpecific framework='React'>
-```jsx
-<DockviewReact tabComponents={{
+```tsx
+const components = {
   tab_1: (props: IDockviewPanelHeaderProps) => {
     const api: DockviewPanelApi  = props.api;
     const containerApi: DockviewApi  = props.containerApi;
@@ -22,7 +25,9 @@ This section describes how to implement custom tab renderers
   tab_2: (props: IDockviewPanelHeaderProps) => {
     return <div>{/** logic */}</div>
   }
-}}/>
+};
+
+return <DockviewReact tabComponents={tabComponents}/>
 ```
 </FrameworkSpecific>
 
@@ -35,14 +40,14 @@ not implemented
 
 <FrameworkSpecific framework='React'>
 ```jsx
-const MyTab = (props: IDockviewPanelHeaderProps) => {
+const CustomTabRenderer = (props: IDockviewPanelHeaderProps) => {
   const api: DockviewPanelApi  = props.api;
   const containerApi: DockviewApi  = props.containerApi;
 
   return <div>{/** logic */}</div>
 }
 
-return <DockviewReact defaultTabRenderer={MyTab}/>
+return <DockviewReact defaultTabRenderer={CustomTabRenderer}/>
 ```
 </FrameworkSpecific>
 
@@ -98,3 +103,38 @@ This still makes use of the `DockviewDefaultTab` since it's only a minor change.
     sandboxId="customheader-dockview"
     react={CustomHeadersDockview}
 />
+
+## Full Width Tab
+
+When a group has only one single tab you may want that tab to take the full width.
+
+<FrameworkSpecific framework='React'>
+  <DocRef declaration="IDockviewReactProps" methods={['singleTabMode']} />
+</FrameworkSpecific>
+
+<FrameworkSpecific framework='JavaScript'>
+  <DocRef declaration="DockviewComponentOptions" methods={['singleTabMode']} />
+</FrameworkSpecific>
+
+```tsx
+return <DockviewReactComponent singleTabMode="fullwidth" />
+```
+
+<MultiFrameworkContainer
+    sandboxId="fullwidthtab-dockview"
+    react={DockviewNative}
+    typescript={attachNativeDockview}
+/>
+
+import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
+import { attach as attachTabHeightDockview } from '@site/sandboxes/javascript/tabheight-dockview/src/app';
+
+## Tab Height
+
+Tab height can be controlled through CSS.
+
+<MultiFrameworkContainer
+    sandboxId="tabheight-dockview"
+    react={DockviewTabheight}
+    typescript={attachTabHeightDockview}
+/>

packages/docs/docs/core/state/load.mdx

@@ -6,27 +6,26 @@ import { MultiFrameworkContainer } from '@site/src/components/ui/container';
 import LiveExample from '@site/src/components/ui/exampleFrame';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
-This section described loading a dock layout.9
+This section described loading a dock layout.
 
 <DocRef declaration="DockviewApi" methods={['fromJSON', 'onDidLayoutFromJSON']} />
 
-## Layout Persistence
+## Load A Layout
 
-Layouts are loaded and saved via to `fromJSON` and `toJSON` methods on the Dockview api.
-The api also exposes an event `onDidLayoutChange` you can listen on to determine when the layout has changed.
-Below are some snippets showing how you might load from and save to localStorage.
+To load a layout you should a pass a valid object to `fromJSON`. If you try to load an invalid or corrupted layout the dock will throw an Error and the dock will reset gracefully ready
+for another attempt with a valid object.
 
-If you try to load a invalid or corrupted layout the dock will recover g
+You could load a previously saved layout from local storage for example.
 
-```tsx title="Loading a layout from localStorage"
+```tsx
 const onReady = (event: DockviewReadyEvent) => {
-    const layoutString = localStorage.getItem('dockview_persistence_layout');
-
     let success = false;
 
-    if (layoutString) {
+    const mySerializedLayout = localStorage.getItem('my_layout');
+
+    if (mySerializedLayout) {
         try {
-            const layout = JSON.parse(layoutString);
+            const layout = JSON.parse(mySerializedLayout);
             event.api.fromJSON(layout);
             success = true;
         } catch (err) {
@@ -35,13 +34,14 @@ const onReady = (event: DockviewReadyEvent) => {
     }
 
     if (!success) {
-        // do something if there is no layout or there was a loading error
+        // perhap load a default layout?
     }
 };
+
+return <DockviewComponent onReady={onReady}/>;
 ```
 
-Here is an example using the above code loading from and saving to localStorage.
-If you refresh the page you should notice your layout is loaded as you left it.
+# Live Example
 
 <LiveExample framework="react" id="dockview/layout"/>
 

packages/docs/docs/core/state/save.mdx

@@ -11,59 +11,33 @@ This section describes how to serialize a dockview instance.
 
 <DocRef declaration="DockviewApi" methods={['toJSON', 'onDidLayoutChange']} />
 
+To retrieve the current state of the dock call `toJSON()`.
+You can listen to the event `onDidlayoutChange` to determine when the layout has changed.
 
+```tsx
+const [api, setApi] = React.useState<DockviewApi>();
 
-## Layout Persistence
-
-Layouts are loaded and saved via to `fromJSON` and `toJSON` methods on the Dockview api.
-The api also exposes an event `onDidLayoutChange` you can listen on to determine when the layout has changed.
-Below are some snippets showing how you might load from and save to localStorage.
-
-```tsx title="Saving the layout state to localStorage"
 React.useEffect(() => {
-    if (!api) {
-        return;
-    }
-
-    const disposable = api.onDidLayoutChange(() => {
-        const layout = api.toJSON();
+  if(!api) {
+    return;
+  }
 
-        localStorage.setItem(
-            'dockview_persistence_layout',
-            JSON.stringify(layout)
-        );
-    });
+  const disposable = api.onDidLayoutChange(() => {
+    const layout: SerializedDockview = api.toJSON();
+    localStorage.setItem('my_layout', JSON.stringify(layout));
+  });
 
-    return () => {
-        disposable.dispose();
-    };
+  return () => disposable.dispose();
 }, [api]);
-```
 
-```tsx title="Loading a layout from localStorage"
 const onReady = (event: DockviewReadyEvent) => {
-    const layoutString = localStorage.getItem('dockview_persistence_layout');
-
-    let success = false;
-
-    if (layoutString) {
-        try {
-            const layout = JSON.parse(layoutString);
-            event.api.fromJSON(layout);
-            success = true;
-        } catch (err) {
-            //
-        }
-    }
+  setApi(event.api);
+}
 
-    if (!success) {
-        // do something if there is no layout or there was a loading error
-    }
-};
+return <DockviewComponent onReady={onReady}/>
 ```
 
-Here is an example using the above code loading from and saving to localStorage.
-If you refresh the page you should notice your layout is loaded as you left it.
+# Live Example
 
 <LiveExample framework="react" id="dockview/layout"/>