Use React.FC for PanelStack2 renderPanel typing to fix compilation on newer @types/react versions

[gluxon]

Context

A semi-recent change in @types/react switched React.FunctionComponent's return type from ReactElement to ReactNode.

 interface FunctionComponent<P = {}> {
-    (props: P, context?: any): ReactElement<any, any> | null;
+    (props: P, context?: any): ReactNode;
     propTypes?: WeakValidationMap<P> | undefined;
     contextTypes?: ValidationMap<any> | undefined;
     defaultProps?: Partial<P> | undefined;
     displayName?: string | undefined;
 }

Break

Under @types/react@16.14.32 and @types/react@18.0.25, the following minimal example from the docs passes TypeScript compilation.

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

type AccountSettingsPanelInfo = {
  /* ...  */
};

const AccountSettingsPanel: React.FC<PanelProps<AccountSettingsPanelInfo>> = (
  props
) => {
  return null;
};

const _panel: Panel<unknown> = {
  renderPanel: AccountSettingsPanel,
  title: "Account settings"
};

However, on @types/react@18.2.34, it fails with:

Type 'FC<PanelActions>' is not assignable to type '(props: PanelActions) => Element | null'.
  Type 'ReactNode' is not assignable to type 'Element | null'.
    Type 'undefined' is not assignable to type 'Element | null'.ts(2322)

Changes

This PR fixes compilation of panel stack components under newer versions of @types/react by following React.FC's typings.

Notes for Reviews

My initial attempt to fix this was to add React.ReactNode as another possible renderPanel return type. While this works on newer versions of @types/react, it breaks on older versions.

[adidahiya]

Follow `React.FC` return type for `renderPanel` typings

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

Hmm, that's strange, I can see the type error in the sandbox repro you linked.

But when I tried to repro it myself, I don't get that error: https://codesandbox.io/p/sandbox/react-18-panelstack2-types-debugging-pcdslz?file=%2Fsrc%2FCoreExample.tsx%3A64%2C11

There are a bunch of places in the codebase where we expect a return type of JSX.Element, does this mean we have to update all of those too?

[gluxon]

Hmm, that's strange, I can see the type error in the sandbox repro you linked.

But when I tried to repro it myself, I don't get that error: https://codesandbox.io/p/sandbox/react-18-panelstack2-types-debugging-pcdslz?file=%2Fsrc%2FCoreExample.tsx%3A64%2C11

That's really surprising. Taking a look, I see there's 2 definitions of FunctionComponent in @types/react.

• /@types/react@18.2.36/index.d.ts
• /@types/react@18.2.36/ts5.0/index.d.ts

Counterintuitively, I think the ts5.0 dir is for TypeScript versions before 5. From https://unpkg.com/@types/react@18.2.36/package.json

{
    "exports": {
        ".": {
            "types@<=5.0": {
                "default": "./ts5.0/index.d.ts"
            },
            "types": {
                "default": "./index.d.ts"
            }
        }
        // ...
    }
    // ...
}

The playground in the link above is using the ts5.0/index.d.ts types, which still have function components returning React.ReactElement.

I checked locally and see the issue on TypeScript 5.1.6.

There are a bunch of places in the codebase where we expect a return type of JSX.Element, does this mean we have to update all of those too?

I think the renderPanel error showed more frequently in the codebase I was looking at because the docs had the React.FC annotation on panel components, and developers in the past followed the Blueprint docs. I don't expect to see this problem for other renderers like renderDialog, which will likely be implemented as arrow functions that have the return type inferred.

blueprint/packages/core/src/context/hotkeys/hotkeysProvider.tsx

Line 99 in 96d1ef2

renderDialog?: (state: HotkeysContextState, contextActions: { handleDialogClose: () => void }) => JSX.Element;

I think we still have a bit more time to decide the best next step; I wouldn't want us to rush replacing JSX.Element and regret it later.

[gluxon]

I think this could also just use React.FC entirely.

Suggested change

	renderPanel: (props: PanelProps<P>) => ReturnType<React.FC<PanelProps<P>>>;
	renderPanel: React.FC<PanelProps<P>>;

But that is a bit more strict than what we had before this PR since React.FC has additional optional properties on it.

interface FunctionComponent<P = {}> {
    (props: P, context?: any): ReactNode;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

[adidahiya]

I tried this out and it seems to work fine with both functions that are annotated as React.FC and plain (un-annotated) ones which return any of the ReactNode types: https://codesandbox.io/p/sandbox/react-18-panelstack2-types-debugging-typescript-v5-x-hz29zl?file=%2Fsrc%2FCoreExample.tsx%3A18%2C1

so I think we can go ahead with this suggested change

[gluxon]

Nice. Thank you for the help testing that React.FC<...> works for those cases. PR should be updated for this now.

[adidahiya]

Use `React.FC` for PanelStack2 `renderPanel` prop typing

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.