From cd7016c05ef7e79a75d2ab69b70ebd244ed72dad Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Thu, 17 Aug 2023 16:55:07 -0400
Subject: [PATCH] fix react types for refs

---
 package-lock.json     | 14 +++++++-------
 package.json          | 18 ++++--------------
 scripts/make-react.js | 13 ++++++++++++-
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7351e3c5..acf21a85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@ctrl/tinycolor": "^3.5.0",
         "@floating-ui/dom": "^1.2.1",
-        "@lit-labs/react": "^1.1.1",
+        "@lit-labs/react": "^1.2.1",
         "@shoelace-style/animations": "^1.1.0",
         "@shoelace-style/localize": "^3.1.1",
         "composed-offset-position": "^0.0.4",
@@ -1474,9 +1474,9 @@
       }
     },
     "node_modules/@lit-labs/react": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.1.1.tgz",
-      "integrity": "sha512-9TC+/ZWb6BJlWCyUr14FKFlaGnyKpeEDorufXozQgke/VoVrslUQNaL7nBmrAWdNrmzx5jWgi8lFmWwrxMjnlA=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
+      "integrity": "sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A=="
     },
     "node_modules/@lit-labs/ssr-dom-shim": {
       "version": "1.1.1",
@@ -18291,9 +18291,9 @@
       }
     },
     "@lit-labs/react": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.1.1.tgz",
-      "integrity": "sha512-9TC+/ZWb6BJlWCyUr14FKFlaGnyKpeEDorufXozQgke/VoVrslUQNaL7nBmrAWdNrmzx5jWgi8lFmWwrxMjnlA=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
+      "integrity": "sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A=="
     },
     "@lit-labs/ssr-dom-shim": {
       "version": "1.1.1",
diff --git a/package.json b/package.json
index 00a17ff1..9b1e2b80 100644
--- a/package.json
+++ b/package.json
@@ -25,15 +25,8 @@
     "./dist/react/*": "./dist/react/*",
     "./dist/translations/*": "./dist/translations/*"
   },
-  "files": [
-    "dist",
-    "cdn"
-  ],
-  "keywords": [
-    "web components",
-    "custom elements",
-    "components"
-  ],
+  "files": ["dist", "cdn"],
+  "keywords": ["web components", "custom elements", "components"],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shoelace-style/shoelace.git"
@@ -69,7 +62,7 @@
   "dependencies": {
     "@ctrl/tinycolor": "^3.5.0",
     "@floating-ui/dom": "^1.2.1",
-    "@lit-labs/react": "^1.1.1",
+    "@lit-labs/react": "^1.2.1",
     "@shoelace-style/animations": "^1.1.0",
     "@shoelace-style/localize": "^3.1.1",
     "composed-offset-position": "^0.0.4",
@@ -140,9 +133,6 @@
     "user-agent-data-types": "^0.3.0"
   },
   "lint-staged": {
-    "*.{ts,js}": [
-      "eslint --max-warnings 0 --cache --fix",
-      "prettier --write"
-    ]
+    "*.{ts,js}": ["eslint --max-warnings 0 --cache --fix", "prettier --write"]
   }
 }
diff --git a/scripts/make-react.js b/scripts/make-react.js
index db31c97e..acd3e2b2 100644
--- a/scripts/make-react.js
+++ b/scripts/make-react.js
@@ -51,6 +51,17 @@ components.map(component => {
       ${eventImports}
       ${eventExports}
 
+      export type ForwardComponent<
+        Element extends HTMLElement,
+        ReactComponent extends React.ElementType
+      > = React.JSXElementConstructor<
+        React.ComponentPropsWithoutRef<ReactComponent> & {
+          ref?: React.ForwardedRef<Element>;
+        } &
+        // Adds { displayName?: string, propTypes?: {} } etc.
+        Omit<React.FC<ReactComponent>, 'ref'>
+      >;
+
       const tagName = '${component.tagName}'
 
       const component = createComponent({
@@ -76,7 +87,7 @@ components.map(component => {
         }
       }
 
-      export default SlComponent;
+      export default SlComponent as ForwardComponent<Component, typeof SlComponent>;
     `,
     Object.assign(prettierConfig, {
       parser: 'babel-ts'