Typings on PanelStack2 are not working as explain in documentation

[LoiKos]

Environment

• Package version(s): core 4.4.1
• Operating System: MacOS Monterrey 12.3.1
• Browser name and version: Chrome Version 102.0.5005.61

Code Sandbox

(https://codesandbox.io/s/spring-sun-vomre1?file=/src/App.tsx)

Steps to reproduce

1. Create a component and add a PanelStack2
2. Add a custom panel component with his own typing props (e.g: ComponentType) using PanelProps<ComponentType>
3. Try adding this custom panel as initial panel

Actual behavior

You will face this type error: Type 'PanelProps

Expected behavior

Types should be ok as it's following, the docs. I also think it should be ok to define Panel as :

type MainPanelProps = {
  loading: boolean;
};

const MainPanel = (props: PanelProps<MainPanelProps>) => {
  return <div />;
};

Possible solution

🤷‍♂️ Sorry, i have no idea.

[LoiKos]

After reading object ts reference it might not be what you want to use here. Maybe

typeof {}

or

{ [key:string]: any }

are more appropriate for this.

[LoiKos]

Here another example using basic stackproperty : https://codesandbox.io/s/distracted-vaughan-mxyyk6?file=/src/App.tsx

[LoiKos]

i have some doubt on the exact behaviour of the following type:

export declare type PanelProps<P> = P & PanelActions;

It may be an option to don't use this and to ask directly user to build type like :

// direct export to PanelActions
import {PanelActions} from '@blueprintjs/core'  

interface MyProps extends PanelActions { }
const MyComponent = (props: MyProps) => { return null }

What do you think ?