FC-2206: Upgrade React to v19

STYLE.md

@@ -21,27 +21,6 @@ components and also support `defaultValue`.
 As an example, let `gap` prop auto-suggest officially supported values such as `"md"` and `"lg"`,
 while keeping possibility to pass a custom number if needed.
 
-### Forward refs
-
-Wrap component in `forwardRef()` whenever applicable.
-
-It makes it possible to use libraries such as `framer-motion` in user-land and enables passing a
-`ref` for any other reason.
-
-```tsx
-// bad
-const Component = ({ ...props }: ComponentProps): React.JSX.Element => {
-  return <div {...props} />
-}
-
-// good
-const Component = forwardRef<HTMLDivElement, ComponentProps>(
-  ({ ...props }, ref): React.JSX.Element => {
-    return <div {...props} ref={ref} />
-  },
-)
-```
-
 ### Place component interface and function first in each component file
 
 Putting the most important things at the top of the file makes the contract of the component fast to

package.json

@@ -19,16 +19,16 @@
   },
   "dependencies": {
     "@einride/hooks": "1.8.0",
-    "@emotion/is-prop-valid": "1.3.1",
+    "@emotion/is-prop-valid": "1.4.0",
     "@mantine/hooks": "7.1.1",
-    "@radix-ui/react-alert-dialog": "1.1.2",
-    "@radix-ui/react-dialog": "1.1.4",
-    "@radix-ui/react-dropdown-menu": "2.1.2",
-    "@radix-ui/react-radio-group": "1.2.1",
-    "@radix-ui/react-slider": "1.2.2",
-    "@radix-ui/react-switch": "1.1.1",
-    "@radix-ui/react-tabs": "1.1.2",
-    "@radix-ui/react-tooltip": "1.1.3",
+    "@radix-ui/react-alert-dialog": "1.1.15",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-dropdown-menu": "2.1.16",
+    "@radix-ui/react-radio-group": "1.3.8",
+    "@radix-ui/react-slider": "1.3.6",
+    "@radix-ui/react-switch": "1.2.6",
+    "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-tooltip": "1.2.8",
     "lodash.merge": "4.6.2"
   },
   "devDependencies": {
@@ -37,8 +37,8 @@
     "@einride/eslint-plugin": "7.9.0",
     "@einride/prettier-config": "2.1.0",
     "@einride/tsconfig": "2.1.0",
-    "@emotion/react": "11.11.4",
-    "@emotion/styled": "11.11.5",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "@faker-js/faker": "8.4.1",
     "@playwright/test": "1.52.0",
     "@rollup/plugin-image": "3.0.3",
@@ -61,8 +61,8 @@
     "@testing-library/user-event": "14.5.2",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.4.2",
-    "@types/react": "18.2.74",
-    "@types/react-dom": "18.2.24",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
     "@vitejs/plugin-react": "4.2.1",
     "chromatic": "11.3.0",
     "concurrently": "8.2.2",
@@ -71,8 +71,8 @@
     "framer-motion": "11.0.24",
     "luxon": "3.4.4",
     "prettier": "3.2.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "rollup": "4.22.4",
     "semantic-release": "23.0.7",
     "storybook": "8.6.12",
@@ -87,7 +87,7 @@
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "framer-motion": ">=11.0.0",
-    "react": "^18.2.0"
+    "react": "^19.2.0"
   },
   "files": [
     "dist"

src/components/cards/Card/Card.tsx

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled"
-import { ComponentPropsWithoutRef, ElementType, ReactNode, forwardRef } from "react"
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from "react"
 import { getBackground, getBorderRadius, getSpacing } from "../../../lib/theme/prop-system"
 import { Background, BorderRadius, PaddingBlockEnd } from "../../../lib/theme/props"
 
@@ -18,18 +18,24 @@ export interface CardProps extends ComponentPropsWithoutRef<"div"> {
 
   /** Padding block end of the card. */
   paddingBlockEnd?: PaddingBlockEnd
+
+  ref?: React.Ref<HTMLDivElement> | undefined
 }
 
 /** Cards are used to group content. */
-export const Card = forwardRef<HTMLDivElement, CardProps>(
-  ({ background = "primary", borderRadius = "lg", children, ...props }, ref) => {
-    return (
-      <Wrapper background={background} borderRadius={borderRadius} {...props} ref={ref}>
-        {children}
-      </Wrapper>
-    )
-  },
-)
+export const Card = ({
+  ref,
+  background = "primary",
+  borderRadius = "lg",
+  children,
+  ...props
+}: CardProps): React.JSX.Element => {
+  return (
+    <Wrapper background={background} borderRadius={borderRadius} {...props} ref={ref}>
+      {children}
+    </Wrapper>
+  )
+}
 
 interface WrapperProps {
   background: Background

src/components/charts/LinearGauge/LinearGauge.tsx

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled"
-import { ComponentPropsWithoutRef, forwardRef } from "react"
+import { ComponentPropsWithoutRef } from "react"
 import { Color } from "../../../lib/theme/props"
 import { Box } from "../../layout/Box/Box"
 import { PointerIcon } from "../StepGauge/PointerIcon"
@@ -20,42 +20,49 @@ export interface LinearGaugeProps extends Omit<ComponentPropsWithoutRef<"div">,
 
   /** Current value. */
   value: number
+
+  ref?: React.Ref<HTMLDivElement> | undefined
 }
 
 /** A linear gauge that can be used for conveying progress or status in a range. */
-export const LinearGauge = forwardRef<HTMLDivElement, LinearGaugeProps>(
-  ({ color = "positive", max = DEFAULT_MAX, min = DEFAULT_MIN, value, ...props }, ref) => {
-    const percentage = ((value - min) / (max - min)) * 100
+export const LinearGauge = ({
+  ref,
+  color = "positive",
+  max = DEFAULT_MAX,
+  min = DEFAULT_MIN,
+  value,
+  ...props
+}: LinearGaugeProps): React.JSX.Element => {
+  const percentage = ((value - min) / (max - min)) * 100
 
-    return (
-      <Box
-        position="relative"
-        inlineSize={7}
-        blockSize={7}
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        flexShrink={0}
-        role="progressbar"
-        aria-valuemax={max}
-        aria-valuemin={min}
-        aria-valuenow={value}
-        {...props}
-        ref={ref}
-      >
-        <StyledSvg viewBox={`0 0 ${VIEW_BOX_VALUE} ${VIEW_BOX_VALUE}`}>
-          <LinearGaugeProgress
-            color={color}
-            percentage={percentage}
-            strokeWidth={STROKE_WIDTH}
-            responsiveRadius={RESPONSIVE_RADIUS}
-          />
-        </StyledSvg>
-        <StyledPointerIcon percentage={percentage} />
-      </Box>
-    )
-  },
-)
+  return (
+    <Box
+      position="relative"
+      inlineSize={7}
+      blockSize={7}
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      flexShrink={0}
+      role="progressbar"
+      aria-valuemax={max}
+      aria-valuemin={min}
+      aria-valuenow={value}
+      {...props}
+      ref={ref}
+    >
+      <StyledSvg viewBox={`0 0 ${VIEW_BOX_VALUE} ${VIEW_BOX_VALUE}`}>
+        <LinearGaugeProgress
+          color={color}
+          percentage={percentage}
+          strokeWidth={STROKE_WIDTH}
+          responsiveRadius={RESPONSIVE_RADIUS}
+        />
+      </StyledSvg>
+      <StyledPointerIcon percentage={percentage} />
+    </Box>
+  )
+}
 
 export const DEFAULT_MIN = 0
 export const DEFAULT_MAX = 100

src/components/charts/LinearProgress/LinearProgress.tsx

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled"
-import { ComponentPropsWithoutRef, forwardRef } from "react"
+import { ComponentPropsWithoutRef } from "react"
 import { getColor } from "../../../lib/theme/prop-system"
 import { Color } from "../../../lib/theme/props"
 import { Box } from "../../layout/Box/Box"
@@ -19,30 +19,37 @@ export interface LinearProgressProps extends Omit<ComponentPropsWithoutRef<"div"
 
   /** Current value. */
   value: number
+
+  ref?: React.Ref<HTMLDivElement> | undefined
 }
 
 /** A linear progress bar that can be used for conveying progress. */
-export const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(
-  ({ color = "positive", max = DEFAULT_MAX, min = DEFAULT_MIN, value, ...props }, ref) => {
-    return (
-      <Box
-        background="tertiary"
-        blockSize={1}
-        borderRadius="sm"
-        position="relative"
-        inlineSize="100%"
-        role="progressbar"
-        aria-valuemax={max}
-        aria-valuemin={min}
-        aria-valuenow={value}
-        {...props}
-        ref={ref}
-      >
-        <Value max={max} min={min} textColor={color} value={value} />
-      </Box>
-    )
-  },
-)
+export const LinearProgress = ({
+  ref,
+  color = "positive",
+  max = DEFAULT_MAX,
+  min = DEFAULT_MIN,
+  value,
+  ...props
+}: LinearProgressProps): React.JSX.Element => {
+  return (
+    <Box
+      background="tertiary"
+      blockSize={1}
+      borderRadius="sm"
+      position="relative"
+      inlineSize="100%"
+      role="progressbar"
+      aria-valuemax={max}
+      aria-valuemin={min}
+      aria-valuenow={value}
+      {...props}
+      ref={ref}
+    >
+      <Value max={max} min={min} textColor={color} value={value} />
+    </Box>
+  )
+}
 
 export const DEFAULT_MIN = 0
 export const DEFAULT_MAX = 100

src/components/charts/LinearVerticalProgress/LinearVerticalProgress.tsx

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled"
-import { ComponentPropsWithoutRef, forwardRef } from "react"
+import { ComponentPropsWithoutRef } from "react"
 import { getColor } from "../../../lib/theme/prop-system"
 import { Color } from "../../../lib/theme/props"
 import { Box } from "../../layout/Box/Box"
@@ -20,32 +20,39 @@ export interface LinearVerticalProgressProps
 
   /** Current value. */
   value: number
+
+  ref?: React.Ref<HTMLDivElement> | undefined
 }
 
 /** A linear vertical progress bar that can be used for conveying progress. */
-export const LinearVerticalProgress = forwardRef<HTMLDivElement, LinearVerticalProgressProps>(
-  ({ color = "positive", max = DEFAULT_MAX, min = DEFAULT_MIN, value, ...props }, ref) => {
-    return (
-      <Box
-        display="flex"
-        flexDirection="column"
-        justifyContent="flex-end"
-        background="tertiary"
-        borderRadius="xs"
-        inlineSize="sm"
-        blockSize="xl"
-        role="progressbar"
-        aria-valuemax={max}
-        aria-valuemin={min}
-        aria-valuenow={value}
-        {...props}
-        ref={ref}
-      >
-        <Value max={max} min={min} textColor={color} value={value} />
-      </Box>
-    )
-  },
-)
+export const LinearVerticalProgress = ({
+  ref,
+  color = "positive",
+  max = DEFAULT_MAX,
+  min = DEFAULT_MIN,
+  value,
+  ...props
+}: LinearVerticalProgressProps): React.JSX.Element => {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      justifyContent="flex-end"
+      background="tertiary"
+      borderRadius="xs"
+      inlineSize="sm"
+      blockSize="xl"
+      role="progressbar"
+      aria-valuemax={max}
+      aria-valuemin={min}
+      aria-valuenow={value}
+      {...props}
+      ref={ref}
+    >
+      <Value max={max} min={min} textColor={color} value={value} />
+    </Box>
+  )
+}
 
 export const DEFAULT_MIN = 0
 export const DEFAULT_MAX = 100