Update React Wrappers with Refs that work (shoelace-style#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
fiqrisr · Aug 18, 2023 · 539eade · 539eade
1 parent 93b2e78
commit 539eade
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/docs/pages/resources/changelog.md b/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]
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/scripts/make-react.js b/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'
-Original file line number
+Diff line change
@@ Expand Up @@
     ## 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]
@@ Expand Down @@