OverlayToaster React Component ref example

[bdenhollander]

Environment

• Package version(s): 5.3.0; React: 18.2.0; @types/react: 18.2.21; TypeScript 4.7.0
• Operating System: Windows 11
• Browser name and version: Chrome 116

Code Sandbox

https://codesandbox.io/s/blueprintjs-overlaytoaster-prop-problems-forked-7hhd2s

Problem

Similar to #6363, the React Component example does not work with React 18 when using ref. This example worked fine in v4.

Possible solution

Change type of toaster to match React 18
private toaster: LegacyRef<OverlayToaster> | undefined;

[adidahiya]

I forked your sandbox to add code which actually demonstrates the issue: https://codesandbox.io/p/sandbox/overlaytoaster-ref-bug-react-18-y9wz2r?file=%2Fsrc%2FApp.tsx%3A5%2C32

The "ref" usage pattern in question which causes errors with @types/react v18:

export default function App() {
  const toasterRef = React.createRef<Toaster>();

  return <OverlayToaster position="top" ref={toasterRef} />;
}

Turns out this doesn't work with React 16 either: https://codesandbox.io/p/sandbox/overlaytoaster-ref-bug-react-16-r9mv6n?welcome=true

You can fix this by using the OverlayToaster type for the ref object instead of Toaster.

It does seem like the documentation has an error. I'll look into why the Toaster type is not assignable and I'll update the docs.

[adidahiya]

Fixed by #6165