Update React Wrappers with Refs that work (#1526)

* fix react types for refs

* fix displayName

* fix displayName]

* attempt to fix typings for React refs

* fix bad type

* prettier

* add changelog entry

* prettier

docs/pages/resources/changelog.md

@@ -14,6 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ## Next
 
+- Fixed type issues with the `ref` attribute in React Wrappers. [#1526]
 - Fixed a regression that caused `<sl-radio-button>` to render incorrectly with gaps [#1523]
 - Improved expand/collapse behavior of `<sl-tree>` to work more like users expect [#1521]
 

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",

package.json

@@ -62,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",

scripts/make-react.js

@@ -51,6 +51,15 @@ components.map(component => {
       ${eventImports}
       ${eventExports}
 
+      export type ForwardComponent<
+        Element extends HTMLElement,
+        ReactComponent extends React.ElementType
+      > = React.JSXElementConstructor<
+        React.ComponentPropsWithoutRef<ReactComponent> & {
+          ref?: React.ForwardedRef<Element>;
+        }
+      > & { displayName?: string }
+
       const tagName = '${component.tagName}'
 
       const component = createComponent({
@@ -76,7 +85,7 @@ components.map(component => {
         }
       }
 
-      export default SlComponent;
+      export default SlComponent as ForwardComponent<Component, typeof SlComponent>;
     `,
     Object.assign(prettierConfig, {
       parser: 'babel-ts'