chore: docs

Author: mathuo

packages/docs/docs/components/dockview.mdx

@@ -395,7 +395,6 @@ props.containerApi.addPopoutGroup(props.api.group);
     react={DockviewPopoutGroup}
 />
 
-
 ## Maximized Groups
 
 To maximize a group you can all
@@ -563,18 +562,37 @@ api.removePanel(panel);
 
 ### Panel Rendering
 
+#### Render Mode
+
+Dockview has two rendering modes `onlyWhenVisible` (default) and `always`. A rendering mode can be defined through the `renderer` prop to `DockviewReact` or at an individual panel level when added where
+the panel declaration takes precedence if both are defined. Rendering modes defined at the panel level are persisted, those defined at the `DockviewReact` level are not persisted.
+
+- `onlyWhenVisible` mode is the default mode. In this mode when a panel is no longer visible through either it's visiblity being hidden or it not being the active panel within a group the panels HTMLElement is removed
+from the DOM and any DOM state such as scrollbar positions will be lost. If you are using any ResizeObservers to measure size this will result both zero height and width as the HTMLElement no longer belongs to the DOM.
+This design allows for maximum performance at some cost.
+- `always` mode. In this mode when panels become hidden the HTMLElement is not destroyed so all DOM state such as scrollbar positions will be maintained. This is implemented by rendering each panel as an absolutely positioned
+HTMLElement and hidden the HTMLElement with `display: none` when it should be hidden.
+
+<MultiFrameworkContainer
+    height={500}
+    sandboxId="rendermode-dockview"
+    react={DockviewRenderMode}
+/>
+
+####
+
 By default `DockviewReact` only adds to the DOM those panels that are visible,
 if a panel is not the active tab and not shown the contents of the hidden panel will be removed from the DOM.
 
-However the React Components associated with each panel are only created once and will always exist for as long as the panel exists, hidden or not.
+When a panel is in `onlyWhenVisible` render mode this only affects the contents within the DOM. The lifecycle of that panel instance is still maintained.
+The React Components associated with each panel are only created once and will always exist for as long as the panel exists, hidden or not.
 
-> For example this means that any hooks in those components will run whether the panel is visible or not which may lead to excessive background work depending
+> e.g. This means that any hooks in those components will run whether the panel is visible or not which may lead to excessive background work depending
 > on the panels implementation.
 
-This is the default behaviour to ensure the greatest flexibility for the user but through the panels `props.api` you can listen to the visiblity state of the panel
-and write additional logic to optimize your application.
+You can listen to the visiblity state of the panel and write additional logic to optimize your application if required, although this is an advanced case.
 
-For example if you wanted to unmount the React Components when the panel is not visible you could create a Higher-Order-Component that listens to the panels
+If you wanted to unmount the React Components when the panel is not visible you could create a Higher-Order-Component that listens to the panels
 visiblity state and only renders the panel when visible.
 
 ```tsx title="Only rendering the React Component when the panel is visible, otherwise rendering a null React Component"
@@ -615,6 +633,7 @@ const components = { default: RenderWhenVisible(MyComponent) };
 
 Toggling the checkbox you can see that when you only render those panels which are visible the underling React component is destroyed when it becomes hidden and re-created when it becomes visible.
 
+
 <MultiFrameworkContainer
     sandboxId="rendering-dockview"
     react={RenderingDockview}
@@ -851,23 +870,6 @@ api.group.api.setConstraints(...)
     react={DockviewConstraints}
 />
 
-## Render Mode
-
-Dockview has two rendering modes `destructive` (default) and `gready`. A rendering mode can be defined through the `renderer` prop to `DockviewReact` or at an individual panel level when added where
-the panel declaration takes precedence if both are defined. Rendering modes defined at the panel level are persisted, those defined at the `DockviewReact` level are not persisted.
-
-destructive
-- Destructive mode is the default mode. In this mode when a panel is no longer visible through either it's visiblity being hidden or it not being the active panel within a group the panels HTMLElement is removed
-from the DOM and any DOM state such as scrollbar positions will be lost. If you are using any ResizeObservers to measure size this will result both zero height and width as the HTMLElement no longer belongs to the DOM.
-This design allows for maximum performance at some cost.
-- Gready mode. In this mode when panels become hidden the HTMLElement is not destroyed so all DOM state such as scrollbar positions will be maintained. This is implemented by rendering each panel as an absolutely positioned
-HTMLElement and hidden the HTMLElement with `display: none` when it should be hidden.
-
-<MultiFrameworkContainer
-    height={500}
-    sandboxId="rendermode-dockview"
-    react={DockviewRenderMode}
-/>
 
 ## iFrames
 

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

@@ -145,7 +145,7 @@ export const DockviewPersistance = (props: { theme?: string }) => {
             style={{
                 display: 'flex',
                 flexDirection: 'column',
-                height: '400px',
+                height: '100%',
             }}
         >
             <div style={{ height: '25px' }}>

packages/docs/src/components/ui/reference/docRef.tsx

@@ -17,9 +17,9 @@ type DocsComment = {
 type DocsJson = {
     [index: string]: Array<{
         name: string;
-        signature: string;
+        code: string;
         comment?: DocsComment;
-        type: string;
+        kind: 'accessor' | 'property' | 'method';
     }>;
 };
 
@@ -150,7 +150,7 @@ export const DocRef = (props: DocRefProps) => {
                                             )}
                                         </div>
                                         <CodeBlock language="tsx">
-                                            {doc.signature}
+                                            {doc.code}
                                         </CodeBlock>
                                     </div>
                                 </th>