fix: forward ref type (#34)

* fix(react): forward ref typings

* test(react): add tests for forward ref

Author: TimKolberger

packages/react/src/forwardRef.tsx

@@ -63,8 +63,8 @@ export function forwardRef<
   Props extends Record<string, unknown> = Record<never, never>,
 >(
   component: ForwardRefRenderFunction<
-    unknown,
-    AssignCommon<ComponentProps<Component>, Props> & {
+    never,
+    AssignCommon<PropsOf<Component>, Props> & {
       as?: ElementType
     }
   >,

packages/react/test/forward-ref.test.tsx

@@ -0,0 +1,30 @@
+import { createRef } from 'react'
+import type { HTMLPolymorphicProps } from '../src'
+import { polymorphicFactory, forwardRef } from '../src'
+import { render } from '@testing-library/react'
+
+describe('forwardRef', () => {
+  const poly = polymorphicFactory()
+
+  it('should forward the ref', () => {
+    const ComponentUnderTest = forwardRef<'div', HTMLPolymorphicProps<'div'>>((props, ref) => (
+      <poly.div {...props} ref={ref} />
+    ))
+
+    const ref = createRef<HTMLDivElement>()
+    render(<ComponentUnderTest ref={ref} />)
+    expect(ref.current).toBeInstanceOf(HTMLDivElement)
+  })
+
+  it('should forward the ref with as prop', () => {
+    const ComponentUnderTest = forwardRef<'div', HTMLPolymorphicProps<'div'>>((props, ref) => (
+      <poly.div {...props} ref={ref} />
+    ))
+
+    // known issue: with the `as` prop refs are not inherited correctly
+    // workaround:
+    const ref = createRef<HTMLDivElement & HTMLFormElement>()
+    render(<ComponentUnderTest as="form" ref={ref} />)
+    expect(ref.current).toBeInstanceOf(HTMLFormElement)
+  })
+})