feat: update to React 19

[targos]

feat: update to React 19

Closes: https://github.com/zakodium-oss/react-science/issues/922
BREAKING-CHANGE: `react-science` now requires React 19.
All peer dependencies have been updated to the latest version.
If you use `Popover` or `Overlay` from Blueprint, or `popoverProps` from our components that expose it, follow the Blueprint migration guide.
React migration guide: https://react.dev/blog/2024/04/25/react-19-upgrade-guide
Blueprint migration guide: https://github.com/palantir/blueprint/wiki/React-19-Support
Popper migration guide: https://floating-ui.com/docs/migration

[targos]

I opened a PR on Blueprint to solve types deprecation warnings: https://redirect.github.com/palantir/blueprint/pull/7839

[cloudflare-workers-and-pages]

Deploying react-science with    Cloudflare Pages

Latest commit:	c50bbab
Status:	✅  Deploy successful!
Preview URL:	https://9e5e67fb.react-science.pages.dev
Branch Preview URL:	https://react-19.react-science.pages.dev

View logs

[targos]

@stropitek After at least two hours trying to fix your workarounds, I give up. I hope you'll have an idea to clean this up.

Here are the problematic lines:

react-science/src/components/toolbar/Toolbar.tsx

Lines 282 to 286 in 1084a45

	icon={
	<>
	{isPopover ? (
	<>
	{/*For the icon to be properly styled, it should not have any siblings*/}

react-science/src/components/button/Button.tsx

Lines 83 to 94 in 1084a45

	icon={
	/*
	icon and children will be children of the same node.
	Blueprintjs' stylesheet treats the presence of multiple child elements
	as there being icon and text, styling the icon with a right margin
	so that the text is not right next to it.
	In blueprint alone, this only happens when the button has children.
	Here, we need to handle the case when the button has a tag, which
	adds a sibling but should not affect the margin on its own.
	*/
	tag ? (
	<>

[stropitek]

I don't have a clean fix, but I have another workaround which consists of using div with display: contents; instead of a fragment. BP is setting a className on the icon element, but it's always empty in our stories.

I'm pushing the commit and try to figure something better out, but I'm not very confident about it...

I noticed a small regression compared to https://react-science.pages.dev/.

CleanShot.2026-06-10.at.14.15.39.mp4

[targos]

The result is quite different:
https://react-science.pages.dev/stories/?path=/story/components-button--button-group-basic
https://cc7918bb.react-science.pages.dev/stories/?path=/story/components-button--button-group-basic

[stropitek]

I simplified the implementation, but the principle is the same and I don't see a better way to do it.

I noticed a small regression compared to react-science.pages.dev.

This might be related to shouldReturnFocusOnClose. The new popover component changes the default value from false to true. But the tooltip (which uses popover under the hood) excludes this prop.

https://github.com/palantir/blueprint/blob/191760eaba0c535e3faeca947da68274392e7fed/packages/core/src/components/popover-next/popoverNextMigrationUtils.ts#L222

We can:

• Be content with the small issue when interacting on toolbar items which have a menu.
• Pass openOnTargetFocus as the button's tooltip options (always or only when it causes the issue)
• Use the PopoverNext component instead of the Tooltip component, but there would be breaking changes in the button's tooltipProps prop.

[stropitek]

The result is quite different:
react-science.pages.dev/stories?path=/story/components-button--button-group-basic
cc7918bb.react-science.pages.dev/stories?path=/story/components-button--button-group-basic

Did not notice this. I will check what I can do.

[stropitek]

My latest commit should make buttons pretty consistent with what it was before. BP has changed the horizontal padding values from 10px to 8px so it's normal that they are less wide now.

I noticed something else while testing: the compact prop passed to toolbar tooltips does not seem to have any effect anymore. https://react-19.react-science.pages.dev/stories/?path=/story/components-toolbar--custom-tooltip-content

Before it did not have space in between the toolbar button and the tooltip content.

[targos]

Thanks for the fix. I'm now reviewing the stories one-by-one

[targos]

I noticed that the buttons became more rounded and smaller. I guess that's OK but I wonder why.

Edit: this seems to be a more general change. many form components are now a bit smaller and rounder.

[targos]

I pushed a couple fixes. It now LGTM

[stropitek]

I noticed that the buttons became more rounded and smaller. I guess that's OK but I wonder why.

Yes they changed many things. Colors are also not the same. They also use variables now for things like margins and spacing so it's not surprising if things shift a bit.