From fd4eec09ffe3dd8a900037bf93e13bb3b22309a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 8 Jul 2024 18:46:43 +0200
Subject: [PATCH] Only forward defined `ref`s

---
 .changeset/metal-boxes-admire.md       | 7 +++++++
 packages/primitives-core/src/styled.ts | 5 +++--
 packages/react/src/emotion-element.js  | 4 +++-
 packages/styled/src/base.js            | 5 +++--
 4 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/metal-boxes-admire.md

diff --git a/.changeset/metal-boxes-admire.md b/.changeset/metal-boxes-admire.md
new file mode 100644
index 000000000..6e3abd2ae
--- /dev/null
+++ 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
index e9371e349..1248833db 100644
--- 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
index 2c2b7cc3c..521789a2c 100644
--- 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
index 992a97772..61745ccf1 100644
--- 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 (
           <>