Only forward defined refs (#3208)

Andarist · web-flow · commit 56109e79adcf · 2024-07-09T01:36:52.000+02:00
diff --git a/.changeset/metal-boxes-admire.md b/.changeset/metal-boxes-admire.md
@@ -0,0 +1,7 @@
+---
+'@emotion/primitives-core': patch
+'@emotion/styled': patch
+'@emotion/react': patch
+---
+
+Only forward defined `ref`s to improve compatibility with the upcoming React 19
diff --git a/packages/primitives-core/src/styled.ts b/packages/primitives-core/src/styled.ts
@@ -76,9 +76,10 @@ export function createStyled(
             newProps[key] = props[key]
           }
         }
-
         newProps.style = [css.apply(mergedProps, styles), props.style]
-        newProps.ref = ref
+        if (ref) {
+          newProps.ref = ref
+        }
 
         return React.createElement(finalTag, newProps)
       })
diff --git a/packages/react/src/emotion-element.js b/packages/react/src/emotion-element.js
@@ -149,8 +149,10 @@ let Emotion = /* #__PURE__ */ withEmotionCache(
         newProps[key] = props[key]
       }
     }
-    newProps.ref = ref
     newProps.className = className
+    if (ref) {
+      newProps.ref = ref
+    }
 
     return (
       <>
diff --git a/packages/styled/src/base.js b/packages/styled/src/base.js
@@ -155,9 +155,10 @@ let createStyled /*: CreateStyled */ = (
             newProps[key] = props[key]
           }
         }
-
         newProps.className = className
-        newProps.ref = ref
+        if (ref) {
+          newProps.ref = ref
+        }
 
         return (
           <>

Original file line number	Diff line number	Diff line change
`@@ -76,9 +76,10 @@ export function createStyled(`
`76`	`76`	`newProps[key] = props[key]`
`77`	`77`	`}`
`78`	`78`	`}`
`79`		`-`
`80`	`79`	`newProps.style = [css.apply(mergedProps, styles), props.style]`
`81`		`- newProps.ref = ref`
	`80`	`+ if (ref) {`
	`81`	`+ newProps.ref = ref`
	`82`	`+ }`
`82`	`83`
`83`	`84`	`return React.createElement(finalTag, newProps)`
`84`	`85`	`})`
Original file line number	Diff line number	Diff line change
`@@ -149,8 +149,10 @@ let Emotion = /* #__PURE__ */ withEmotionCache(`
`149`	`149`	`newProps[key] = props[key]`
`150`	`150`	`}`
`151`	`151`	`}`
`152`		`- newProps.ref = ref`
`153`	`152`	`newProps.className = className`
	`153`	`+ if (ref) {`
	`154`	`+ newProps.ref = ref`
	`155`	`+ }`
`154`	`156`
`155`	`157`	`return (`
`156`	`158`	`<>`
Original file line number	Diff line number	Diff line change
`@@ -155,9 +155,10 @@ let createStyled /: CreateStyled / = (`
`155`	`155`	`newProps[key] = props[key]`
`156`	`156`	`}`
`157`	`157`	`}`
`158`		`-`
`159`	`158`	`newProps.className = className`
`160`		`- newProps.ref = ref`
	`159`	`+ if (ref) {`
	`160`	`+ newProps.ref = ref`
	`161`	`+ }`
`161`	`162`
`162`	`163`	`return (`
`163`	`164`	`<>`