chore(deps): bump React to 19

We have an incompatiblity in docs due to algolia/docsearch#2388 but looks like it can safely be ignored, since the only build failure in @docsearch/react is due to a change in TypeScript typings (but the behavior of their code is correct both according to the old and the new typings).
graphs4value · Jan 22, 2025 · d171fbe · d171fbe
1 parent 25f12cb
commit d171fbe
Show file tree

Hide file tree

Showing 38 changed files with 139 additions and 141 deletions.
diff --git a/package.json b/package.json
@@ -33,12 +33,12 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
-    "react": "^18.3.1"
+    "react": "^19.0.0"
   },
   "devDependencies": {
     "@types/eslint": "^9.6.1",
     "@types/node": "^22.10.7",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.0.7",
     "@typescript-eslint/eslint-plugin": "^8.21.0",
     "@typescript-eslint/parser": "^8.21.0",
     "cheerio": "^1.0.0",

diff --git a/subprojects/docs/package.json b/subprojects/docs/package.json
@@ -54,8 +54,8 @@
     "lightningcss": "^1.29.1",
     "mdast-util-mdx": "^3.0.0",
     "prism-react-renderer": "^2.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "remark-smartypants": "^3.0.2",
     "responsive-loader": "^3.1.2",
     "search-insights": "^2.17.3",
@@ -74,8 +74,8 @@
     "@types/babel__core": "^7.20.5",
     "@types/mdast": "^4.0.4",
     "@types/node": "^22.10.7",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@types/unist": "^3.0.3"
   }
 }
diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
@@ -75,8 +75,8 @@
     "ms": "^2.1.3",
     "nanoid": "^5.0.9",
     "notistack": "^3.0.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-resize-detector": "^12.0.2",
     "svg2pdf.js": "^2.2.4",
     "xstate": "^4.38.3",
@@ -97,8 +97,8 @@
     "@types/ms": "^2.1.0",
     "@types/node": "^22.10.7",
     "@types/pnpapi": "^0.0.5",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "@xstate/cli": "^0.5.17",
     "fast-glob": "^3.3.3",

diff --git a/subprojects/frontend/src/App.tsx b/subprojects/frontend/src/App.tsx
@@ -44,7 +44,7 @@ export default function App({
   rootStore,
 }: {
   rootStore: RootStore;
-}): JSX.Element {
+}): React.ReactElement {
   // See https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
   const innerHeight = useInnerHeight();
 

diff --git a/subprojects/frontend/src/DirectionalSplitPane.tsx b/subprojects/frontend/src/DirectionalSplitPane.tsx
@@ -22,7 +22,7 @@ export default function DirectionalSplitPane({
   secondary: React.ReactNode | ((horizontal: boolean) => React.ReactNode);
   primaryOnly?: boolean;
   secondaryOnly?: boolean;
-}): JSX.Element {
+}): React.ReactElement {
   const theme = useTheme();
   const stackRef = useRef<HTMLDivElement | null>(null);
   const { ref: resizeRef, width, height } = useResizeDetector();

diff --git a/subprojects/frontend/src/ModelWorkArea.tsx b/subprojects/frontend/src/ModelWorkArea.tsx
@@ -31,7 +31,7 @@ const SplitGraphPane = observer(function SplitGraphPane({
   graph: GraphStore;
   themeStore: ThemeStore;
   touchesTop: boolean;
-}): JSX.Element {
+}): React.ReactElement {
   return (
     <DirectionalSplitPane
       primary={<GraphPane graph={graph} />}
@@ -60,7 +60,7 @@ const GeneratedModelPane = observer(function GeneratedModelPane({
 }: {
   generatedModel: GeneratedModelStore;
   themeStore: ThemeStore;
-}): JSX.Element {
+}): React.ReactElement {
   const { message, error, graph } = generatedModel;
 
   if (graph !== undefined) {
@@ -117,7 +117,11 @@ const GeneratedModelPane = observer(function GeneratedModelPane({
   );
 });
 
-function ModelWorkArea({ touchesTop }: { touchesTop: boolean }): JSX.Element {
+function ModelWorkArea({
+  touchesTop,
+}: {
+  touchesTop: boolean;
+}): React.ReactElement {
   const { editorStore, themeStore } = useRootStore();
 
   if (editorStore === undefined) {
@@ -133,7 +137,7 @@ function ModelWorkArea({ touchesTop }: { touchesTop: boolean }): JSX.Element {
   } = editorStore;
 
   const generatedModelNames: string[] = [];
-  const generatedModelTabs: JSX.Element[] = [];
+  const generatedModelTabs: React.ReactElement[] = [];
   generatedModels.forEach((value, key) => {
     generatedModelNames.push(key);
     /* eslint-disable react/no-array-index-key -- Key is a string here, not the array index. */

diff --git a/subprojects/frontend/src/PaneButtons.tsx b/subprojects/frontend/src/PaneButtons.tsx
@@ -96,7 +96,7 @@ const PaneButton = observer(function PaneButton({
   label: string;
   icon: React.ReactNode;
   hideLabel: boolean;
-}): JSX.Element {
+}): React.ReactElement {
   const button = (
     <ToggleButton
       value={value}
@@ -122,7 +122,7 @@ function PaneButtons({
 }: {
   themeStore: ThemeStore;
   hideLabel?: boolean;
-}): JSX.Element {
+}): React.ReactElement {
   const hideLabelOrDefault = hideLabel ?? false;
   return (
     <PaneButtonGroup

diff --git a/subprojects/frontend/src/Refinery.tsx b/subprojects/frontend/src/Refinery.tsx
@@ -12,7 +12,7 @@ import TopBar from './TopBar';
 import UpdateNotification from './UpdateNotification';
 import WorkArea from './WorkArea';
 
-export default function Refinery(): JSX.Element {
+export default function Refinery(): React.ReactElement {
   return (
     <SnackbarProvider TransitionComponent={Grow}>
       <UpdateNotification />

diff --git a/subprojects/frontend/src/RootStoreProvider.tsx b/subprojects/frontend/src/RootStoreProvider.tsx
@@ -24,7 +24,7 @@ export default function RootStoreProvider({
 }: {
   children?: ReactNode;
   rootStore: RootStore;
-}): JSX.Element {
+}): React.ReactElement {
   return (
     <StoreContext.Provider value={rootStore}>{children}</StoreContext.Provider>
   );

diff --git a/subprojects/frontend/src/ToggleDarkModeButton.tsx b/subprojects/frontend/src/ToggleDarkModeButton.tsx
@@ -40,7 +40,7 @@ function toggleWithoutViewTransition(themeStore: ThemeStore): void {
   }
 }
 
-export default observer(function ToggleDarkModeButton(): JSX.Element {
+export default observer(function ToggleDarkModeButton(): React.ReactElement {
   const { themeStore } = useRootStore();
   const { darkMode } = themeStore;
 

diff --git a/subprojects/frontend/src/Tooltip.tsx b/subprojects/frontend/src/Tooltip.tsx
@@ -9,7 +9,7 @@ import MuiTooltip, { TooltipProps } from '@mui/material/Tooltip';
 export default function Tooltip({
   children,
   ...props
-}: TooltipProps): JSX.Element {
+}: TooltipProps): React.ReactElement {
   return (
     <MuiTooltip {...props}>
       <span className="RefineryTooltip-Container">{children}</span>

diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
@@ -59,7 +59,7 @@ function useWindowControlsOverlayVisible(): boolean {
   return windowControlsOverlayVisible;
 }
 
-function RefineryIcon({ size }: { size: number }): JSX.Element {
+function RefineryIcon({ size }: { size: number }): React.ReactElement {
   const theme = useTheme();
   return (
     <svg
@@ -122,7 +122,7 @@ const ButtonStack = styled(Stack)({
   },
 });
 
-export default observer(function TopBar(): JSX.Element {
+export default observer(function TopBar(): React.ReactElement {
   const { editorStore, themeStore } = useRootStore();
   const overlayVisible = useWindowControlsOverlayVisible();
   const { breakpoints } = useTheme();

diff --git a/subprojects/frontend/src/WorkArea.tsx b/subprojects/frontend/src/WorkArea.tsx
@@ -11,7 +11,7 @@ import ModelWorkArea from './ModelWorkArea';
 import { useRootStore } from './RootStoreProvider';
 import EditorPane from './editor/EditorPane';
 
-export default observer(function WorkArea(): JSX.Element {
+export default observer(function WorkArea(): React.ReactElement {
   const { themeStore, editorStore } = useRootStore();
   const lintPanelOpen = editorStore?.lintPanel.state ?? false;
 

diff --git a/subprojects/frontend/src/editor/AnimatedButton.tsx b/subprojects/frontend/src/editor/AnimatedButton.tsx
@@ -7,7 +7,7 @@
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import { styled, type SxProps, type Theme } from '@mui/material/styles';
-import { type ReactNode, useLayoutEffect, useState } from 'react';
+import React, { type ReactNode, useLayoutEffect, useState } from 'react';
 
 const AnimatedButtonBase = styled(Button, {
   shouldForwardProp: (prop) => prop !== 'width',
@@ -53,10 +53,10 @@ export default function AnimatedButton({
   onClick?: React.MouseEventHandler<HTMLElement>;
   color: 'error' | 'warning' | 'primary' | 'inherit' | 'dim';
   disabled?: boolean;
-  startIcon?: JSX.Element;
+  startIcon?: React.ReactElement;
   sx?: SxProps<Theme> | undefined;
   children?: ReactNode;
-}): JSX.Element {
+}): React.ReactElement {
   const [width, setWidth] = useState<string | undefined>();
   const [contentsElement, setContentsElement] = useState<HTMLDivElement | null>(
     null,

diff --git a/subprojects/frontend/src/editor/ConnectButton.tsx b/subprojects/frontend/src/editor/ConnectButton.tsx
@@ -32,7 +32,7 @@ export default observer(function ConnectButton({
   editorStore,
 }: {
   editorStore: EditorStore | undefined;
-}): JSX.Element {
+}): React.ReactElement {
   if (
     editorStore !== undefined &&
     (editorStore.opening || editorStore.opened)
@@ -63,7 +63,7 @@ export default observer(function ConnectButton({
   }
 
   let title: string;
-  let disconnectedIcon: JSX.Element;
+  let disconnectedIcon: React.ReactElement;
   if (editorStore === undefined) {
     title = 'Connecting';
     disconnectedIcon = <SyncIcon fontSize="small" />;

diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx
@@ -16,7 +16,7 @@ export default observer(function EditorArea({
   editorStore,
 }: {
   editorStore: EditorStore;
-}): JSX.Element {
+}): React.ReactElement {
   const {
     palette: { mode: paletteMode },
   } = useTheme();

diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -50,7 +50,7 @@ export default observer(function EditorButtons({
   editorStore,
 }: {
   editorStore: EditorStore | undefined;
-}): JSX.Element {
+}): React.ReactElement {
   return (
     <Stack direction="row" flexGrow={1}>
       <Tooltip title="Open">

diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -20,7 +20,7 @@ import EditorArea from './EditorArea';
 import EditorButtons from './EditorButtons';
 import SearchPanelPortal from './SearchPanelPortal';
 
-function EditorLoading(): JSX.Element {
+function EditorLoading(): React.ReactElement {
   const [skeletonSizes] = useState(() =>
     new Array(10).fill(0).map(() => Math.random() * 60 + 10),
   );
@@ -37,7 +37,7 @@ function EditorLoading(): JSX.Element {
   );
 }
 
-export default observer(function EditorPane(): JSX.Element {
+export default observer(function EditorPane(): React.ReactElement {
   const { editorStore } = useRootStore();
   const { width, ref } = useResizeDetector();
 

diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -20,7 +20,7 @@ const GenerateButton = observer(function GenerateButton({
 }: {
   editorStore: EditorStore | undefined;
   hideWarnings?: boolean | undefined;
-}): JSX.Element {
+}): React.ReactElement {
   if (editorStore === undefined) {
     return (
       <AnimatedButton color="inherit" disabled>

diff --git a/subprojects/frontend/src/editor/SearchPanelPortal.tsx b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
@@ -16,7 +16,7 @@ export default observer(function SearchPanelPortal({
 }: {
   editorStore: EditorStore;
   width: number | undefined;
-}): JSX.Element | null {
+}): React.ReactNode {
   const { element: searchPanelContainer } = searchPanelStore;
 
   if (searchPanelContainer === undefined) {

diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx
@@ -39,7 +39,7 @@ export default observer(function SearchToolbar({
 }: {
   searchPanelStore: SearchPanelStore;
   width: number | undefined;
-}): JSX.Element {
+}): React.ReactElement {
   const {
     id: panelId,
     query: { search, valid, caseSensitive, literal, regexp, replace },

diff --git a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
@@ -41,13 +41,13 @@ function DotGraphVisualizer({
   animateThreshold?: number;
   setSvgContainer?: (container: HTMLElement | undefined) => void;
   simplify?: boolean;
-}): JSX.Element {
+}): React.ReactElement {
   const transitionTimeOrDefault = transitionTime ?? 250;
   const animateThresholdOrDefault = animateThreshold ?? 100;
-  const disposerRef = useRef<IReactionDisposer | undefined>();
+  const disposerRef = useRef<IReactionDisposer | undefined>(undefined);
   const graphvizRef = useRef<
     Graphviz<BaseType, unknown, null, undefined> | undefined
-  >();
+  >(undefined);
   const [animate, setAnimate] = useState(true);
   const [concretize, setConcretize] = useState(false);
   const prefersReducedMotion = useMediaQuery(

diff --git a/subprojects/frontend/src/graph/GraphArea.tsx b/subprojects/frontend/src/graph/GraphArea.tsx
@@ -24,7 +24,7 @@ const SyncWarning = observer(function SyncWarning({
   graph: { dimView },
 }: {
   graph: GraphStore;
-}): JSX.Element {
+}): React.ReactElement {
   const theme = useTheme();
   return (
     <Box
@@ -66,7 +66,7 @@ const Overlay = observer(function Overlay({
   graph: { dimView },
 }: {
   graph: GraphStore;
-}): JSX.Element {
+}): React.ReactElement {
   return (
     <Box
       sx={(theme) => ({
@@ -93,7 +93,7 @@ export default function GraphArea({
   graph,
 }: {
   graph: GraphStore;
-}): JSX.Element {
+}): React.ReactElement {
   const { breakpoints } = useTheme();
   const { ref, width, height } = useResizeDetector();
   const [svgContainer, setSvgContainer] = useState<HTMLElement | undefined>();

diff --git a/subprojects/frontend/src/graph/GraphPane.tsx b/subprojects/frontend/src/graph/GraphPane.tsx
@@ -17,7 +17,7 @@ export default function GraphPane({
   graph,
 }: {
   graph: GraphStore;
-}): JSX.Element {
+}): React.ReactElement {
   return (
     <Stack
       direction="column"

diff --git a/subprojects/frontend/src/graph/RelationName.tsx b/subprojects/frontend/src/graph/RelationName.tsx
@@ -61,7 +61,7 @@ function RelationName({
 }: {
   metadata: RelationMetadata;
   abbreviate?: boolean;
-}): JSX.Element {
+}): React.ReactElement {
   const { name, simpleName } = metadata;
   if (abbreviate) {
     return <FormattedName metadata={metadata}>{simpleName}</FormattedName>;

diff --git a/subprojects/frontend/src/graph/SVGIcons.tsx b/subprojects/frontend/src/graph/SVGIcons.tsx
@@ -22,7 +22,7 @@ const SVGIconsHolder = styled('div', {
   visibility: 'hidden',
 });
 
-export default function SVGIcons(): JSX.Element {
+export default function SVGIcons(): React.ReactElement {
   const addNodes = useCallback((element: HTMLDivElement | null) => {
     if (element === null) {
       return;

diff --git a/subprojects/frontend/src/graph/SlideInDialog.tsx b/subprojects/frontend/src/graph/SlideInDialog.tsx
@@ -72,7 +72,7 @@ export default function SlideInDialog({
   title: string;
   buttons: React.ReactNode | ((close: () => void) => React.ReactNode);
   children?: React.ReactNode;
-}): JSX.Element {
+}): React.ReactElement {
   const titleId = useId();
 
   return (

diff --git a/subprojects/frontend/src/graph/SlideInPanel.tsx b/subprojects/frontend/src/graph/SlideInPanel.tsx
@@ -58,7 +58,7 @@ export default function SlideInPanel({
   onKeyUp?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
   onMouseMove?: (e: React.MouseEvent<HTMLDivElement>) => void;
   children?: React.ReactNode;
-}): JSX.Element {
+}): React.ReactElement {
   const id = useId();
   const [show, setShow] = useState(false);
   const close = useCallback(() => setShow(false), []);