PanelStack2 migration

PanelStack in Blueprint v4.0 features some breaking changes compared to v3.0. To help you migrate to the new component, we've provided a new component called PanelStack2 in @blueprintjs/core v3.41.0+.

Requirements

• <PanelStack2> uses React hooks, so you must use React 16.8+, otherwise it will fail at runtime. @blueprintjs/core >=v3.39.0 <4.0.0 is lenient about its React peer dependency and will not enforce this constraint for you.

Notable changes compared to PanelStack

• The component type is now constrained by a generic type parameter. This change fixes issues like #4272.
  • As a JavaScript user, this does not affect you.
  • It is unlikely to require any changes for TypeScript consumers either, as the correct types will be inferred across the component API.
• Interface names and type structure have changed slightly:
  • IPanel -> Panel<P>
  • IPanelProps -> PanelProps<P>
• The Panel<T> interface has changed to use a slightly more standard "render prop" pattern:

import { Panel, PanelProps } from "@blueprintjs/core";

interface ExampleInfo {
    // ...
}

const PanelExample: React.FC<PanelProps<ExampleInfo> = props => {
    // ...
};

const initialPanel: Panel<ExampleInfo>> = {
    props: {},
-    component: PanelExample,
+    renderPanel: PanelExample,
+    // or, if it was a class component:
+    renderPanel: p => <PanelExample {...p} />,
    title: "Example",
};