feat: extract custom react props into seperate prop variable

packages/dockview/src/react/dockview/dockview.tsx

@@ -11,28 +11,33 @@ import { DockviewPanelApi } from '../../api/groupPanelApi';
 import { usePortalsLifecycle } from '../react';
 import { DockviewApi } from '../../api/component.api';
 import { ReactWatermarkPart } from './reactWatermarkPart';
-import { PanelCollection } from '../types';
+import { PanelCollection, PanelParameters } from '../types';
 import { watchElementResize } from '../../dom';
 import { IContentRenderer, ITabRenderer } from '../../groupview/types';
 
-export interface IGroupPanelBaseProps {
+export interface PanelCollection1<T extends IDockviewPanelProps> {
-    api: DockviewPanelApi;
+    [name: string]: React.FunctionComponent<T>;
-    containerApi: DockviewApi;
-    [key: string]: any;
 }
 
-export interface IDockviewPanelProps extends IGroupPanelBaseProps {
+export interface IGroupPanelBaseProps<T extends {} = Record<string, any>>
-    [key: string]: any;
+    extends PanelParameters<T> {
+    api: DockviewPanelApi;
+    containerApi: DockviewApi;
+}
+
+export interface IDockviewPanelProps<T extends {} = Record<string, any>>
+    extends IGroupPanelBaseProps<T> {
+    // noop
 }
 
 export interface DockviewReadyEvent {
     api: DockviewApi;
 }
 
-export interface IWatermarkPanelProps {
+export interface IWatermarkPanelProps<T extends {} = Record<string, any>>
+    extends PanelParameters<T> {
     containerApi: DockviewApi;
     close(): void;
-    [key: string]: any;
 }
 
 export interface IDockviewReactProps {

packages/dockview/src/react/dockview/reactContentPart.ts

@@ -102,7 +102,7 @@ export class ReactPanelContentPart implements IContentRenderer {
             this.reactPortalStore,
             this.component,
             {
-                ...parameters.params,
+                params: parameters.params,
                 api: parameters.api,
                 containerApi: parameters.containerApi,
             },

packages/dockview/src/react/dockview/reactHeaderPart.ts

@@ -37,7 +37,7 @@ export class ReactPanelHeaderPart implements ITabRenderer {
             this.reactPortalStore,
             this.component,
             {
-                ...parameters.params,
+                params: parameters.params,
                 api: parameters.api,
                 containerApi: parameters.containerApi,
             }

packages/dockview/src/react/dockview/reactWatermarkPart.ts

@@ -38,7 +38,7 @@ export class ReactWatermarkPart implements WatermarkPart {
             this.reactPortalStore,
             this.component,
             {
-                ...parameters.params,
+                params: parameters.params,
                 api: parameters.api,
                 containerApi: parameters.containerApi,
                 close: () => {

packages/dockview/src/react/dockview/v2/reactContentRenderer.ts

@@ -67,10 +67,9 @@ export class ReactContentRenderer implements IContentRenderer {
             this.reactPortalStore,
             this.component,
             {
-                ...parameters.params,
+                params: parameters.params,
                 api: parameters.api,
                 containerApi: parameters.containerApi,
-                setActionsbar: () => null as any,
             }
         );
     }

packages/dockview/src/react/gridview/gridview.tsx

@@ -8,17 +8,17 @@ import { Orientation } from '../../splitview/core/splitview';
 import { ReactGridPanelView } from './view';
 import { usePortalsLifecycle } from '../react';
 import { GridviewApi } from '../../api/component.api';
-import { PanelCollection } from '../types';
+import { PanelCollection, PanelParameters } from '../types';
 import { watchElementResize } from '../../dom';
 
 export interface GridviewReadyEvent {
     api: GridviewApi;
 }
 
-export interface IGridviewPanelProps {
+export interface IGridviewPanelProps<T extends {} = Record<string, any>>
+    extends PanelParameters<T> {
     api: GridviewPanelApi;
     containerApi: GridviewApi;
-    [key: string]: any;
 }
 
 export interface IGridviewReactProps {

packages/dockview/src/react/gridview/view.ts

@@ -21,7 +21,7 @@ export class ReactGridPanelView extends GridviewPanel {
             this.reactPortalStore,
             this.reactComponent,
             {
-                ...(this.params?.params || {}),
+                params: this.params?.params || {},
                 api: this.api,
                 containerApi: (this.params as GridviewInitParameters)
                     .containerApi,

packages/dockview/src/react/paneview/paneview.tsx

@@ -7,18 +7,18 @@ import {
 import { usePortalsLifecycle } from '../react';
 import { PaneviewApi } from '../../api/component.api';
 import { PanePanelSection } from './view';
-import { PanelCollection } from '../types';
+import { PanelCollection, PanelParameters } from '../types';
 import { watchElementResize } from '../../dom';
 
 export interface PaneviewReadyEvent {
     api: PaneviewApi;
 }
 
-export interface IPaneviewPanelProps {
+export interface IPaneviewPanelProps<T extends {} = Record<string, any>>
+    extends PanelParameters<T> {
     api: PaneviewPanelApi;
     containerApi: PaneviewApi;
     title: string;
-    [key: string]: any;
 }
 
 export interface IPaneviewReactProps {

packages/dockview/src/react/paneview/view.tsx

@@ -31,7 +31,7 @@ export class PanePanelSection implements IPaneBodyPart {
             this.reactPortalStore,
             this.component,
             {
-                ...parameters.params,
+                params: parameters.params,
                 api: parameters.api,
                 title: parameters.title,
                 containerApi: parameters.containerApi,

packages/dockview/src/react/splitview/splitview.tsx

@@ -7,7 +7,7 @@ import {
 } from '../../splitview/splitviewComponent';
 import { Orientation } from '../../splitview/core/splitview';
 import { usePortalsLifecycle } from '../react';
-import { PanelCollection } from '../types';
+import { PanelCollection, PanelParameters } from '../types';
 import { ReactPanelView } from './view';
 import { watchElementResize } from '../../dom';
 
@@ -15,10 +15,10 @@ export interface SplitviewReadyEvent {
     api: SplitviewApi;
 }
 
-export interface ISplitviewPanelProps {
+export interface ISplitviewPanelProps<T extends {} = Record<string, any>>
+    extends PanelParameters<T> {
     api: SplitviewPanelApi;
     containerApi: SplitviewApi;
-    [key: string]: any;
 }
 
 export interface ISplitviewReactProps {

packages/dockview/src/react/splitview/view.ts

@@ -19,7 +19,7 @@ export class ReactPanelView extends SplitviewPanel {
             this.reactPortalStore,
             this.reactComponent,
             {
-                ...(this.params?.params || {}),
+                params: this.params?.params || {},
                 api: this.api,
                 containerApi: (this.params as PanelViewInitParameters)
                     .containerApi,

packages/dockview/src/react/types.ts

@@ -1,3 +1,9 @@
+import * as React from 'react';
+
 export interface PanelCollection<T extends object> {
     [name: string]: React.FunctionComponent<T>;
 }
+
+export interface PanelParameters<T extends {} = Record<string, any>> {
+    params: T;
+}