From 656a4fae5f66b075f3dfbe9ebbf092d30af8c200 Mon Sep 17 00:00:00 2001
From: Christian Murphy <christian.murphy.42@gmail.com>
Date: Sun, 2 Jan 2022 06:55:30 -0700
Subject: [PATCH] Fix `ref` in types

Closes GH-668.

Reviewed-by: Remco Haszing <remcohaszing@gmail.com>
Reviewed-by: Titus Wormer <tituswormer@gmail.com>
---
 lib/ast-to-react.js  | 19 ++++++++++++-------
 lib/complex-types.ts |  4 ++--
 test/test.jsx        |  1 -
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/lib/ast-to-react.js b/lib/ast-to-react.js
index b0984c1c..31a06a19 100644
--- a/lib/ast-to-react.js
+++ b/lib/ast-to-react.js
@@ -3,6 +3,11 @@
  * @typedef {import('react').ComponentType<T>} ComponentType<T>
  */
 
+/**
+ * @template T
+ * @typedef {import('react').ComponentPropsWithoutRef<T>} ComponentPropsWithoutRef<T>
+ */
+
 /**
  * @typedef {import('react').ReactNode} ReactNode
  * @typedef {import('unist').Position} Position
@@ -49,13 +54,13 @@
  *
  * To do: is `data-sourcepos` typeable?
  *
- * @typedef {JSX.IntrinsicElements['code'] & ReactMarkdownProps & {inline?: boolean}} CodeProps
- * @typedef {JSX.IntrinsicElements['h1'] & ReactMarkdownProps & {level: number}} HeadingProps
- * @typedef {JSX.IntrinsicElements['li'] & ReactMarkdownProps & {checked: boolean|null, index: number, ordered: boolean}} LiProps
- * @typedef {JSX.IntrinsicElements['ol'] & ReactMarkdownProps & {depth: number, ordered: true}} OrderedListProps
- * @typedef {JSX.IntrinsicElements['table'] & ReactMarkdownProps & {style?: Record<string, unknown>, isHeader: boolean}} TableCellProps
- * @typedef {JSX.IntrinsicElements['tr'] & ReactMarkdownProps & {isHeader: boolean}} TableRowProps
- * @typedef {JSX.IntrinsicElements['ul'] & ReactMarkdownProps & {depth: number, ordered: false}} UnorderedListProps
+ * @typedef {ComponentPropsWithoutRef<'code'> & ReactMarkdownProps & {inline?: boolean}} CodeProps
+ * @typedef {ComponentPropsWithoutRef<'h1'> & ReactMarkdownProps & {level: number}} HeadingProps
+ * @typedef {ComponentPropsWithoutRef<'li'> & ReactMarkdownProps & {checked: boolean|null, index: number, ordered: boolean}} LiProps
+ * @typedef {ComponentPropsWithoutRef<'ol'> & ReactMarkdownProps & {depth: number, ordered: true}} OrderedListProps
+ * @typedef {ComponentPropsWithoutRef<'table'> & ReactMarkdownProps & {style?: Record<string, unknown>, isHeader: boolean}} TableCellProps
+ * @typedef {ComponentPropsWithoutRef<'tr'> & ReactMarkdownProps & {isHeader: boolean}} TableRowProps
+ * @typedef {ComponentPropsWithoutRef<'ul'> & ReactMarkdownProps & {depth: number, ordered: false}} UnorderedListProps
  *
  * @typedef {ComponentType<CodeProps>} CodeComponent
  * @typedef {ComponentType<HeadingProps>} HeadingComponent
diff --git a/lib/complex-types.ts b/lib/complex-types.ts
index c4df54a5..c639e7ae 100644
--- a/lib/complex-types.ts
+++ b/lib/complex-types.ts
@@ -1,4 +1,4 @@
-import type {ReactNode, ComponentType} from 'react'
+import type {ReactNode, ComponentType, ComponentPropsWithoutRef} from 'react'
 import type {Position} from 'unist'
 import type {Element} from 'hast'
 
@@ -24,5 +24,5 @@ export interface ReactMarkdownProps {
 export type NormalComponents = {
   [TagName in keyof JSX.IntrinsicElements]:
     | keyof JSX.IntrinsicElements
-    | ComponentType<JSX.IntrinsicElements[TagName] & ReactMarkdownProps>
+    | ComponentType<ComponentPropsWithoutRef<TagName> & ReactMarkdownProps>
 }
diff --git a/test/test.jsx b/test/test.jsx
index 71c1c491..384c0aa1 100644
--- a/test/test.jsx
+++ b/test/test.jsx
@@ -1161,7 +1161,6 @@ test('should be able to render components with forwardRef in HOC', () => {
   const wrapped = (props) => <a {...props} />
 
   const actual = asHtml(
-    // @ts-expect-error: something up with types for refs.
     <Markdown components={{a: wrapper(wrapped)}}>
       [Link](https://example.com/)
     </Markdown>