From 13ff340e337bad0e596086ee3010091d1362f61a Mon Sep 17 00:00:00 2001
From: Eyas <eyas.sharaiha@gmail.com>
Date: Fri, 3 Apr 2020 20:05:22 -0400
Subject: [PATCH] Reflect correct type of @reach/router Link: (#43556)

Link.props.ref is actually a React.Ref<HTMLAnchorElement>. Link is
defined in terms of react's forwardRef() function, which returns a
ForwardRefExoticComponent. @reach/router actually forwards an
HTMLAnchorElement.

Without this fix, Link is a component, and "ref" is assumed to be a
React.Ref<Link>. But Link actually forwards "ref" to an <a> element
it returns.
---
 types/reach__router/index.d.ts              |  9 ++++++++-
 types/reach__router/reach__router-tests.tsx | 11 +++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/types/reach__router/index.d.ts b/types/reach__router/index.d.ts
index 00554e74f9..d48dc7cca2 100644
--- a/types/reach__router/index.d.ts
+++ b/types/reach__router/index.d.ts
@@ -69,7 +69,14 @@ export interface LinkGetProps {
     location: WindowLocation;
 }
 
-export class Link<TState> extends React.Component<LinkProps<TState>> {}
+export function Link<TState>(
+    // TODO: Define this as ...params: Parameters<Link<TState>> when only TypeScript >= 3.1 support is needed.
+    props: React.PropsWithoutRef<LinkProps<TState>> & React.RefAttributes<HTMLAnchorElement>,
+): ReturnType<Link<TState>>;
+export interface Link<TState>
+    extends React.ForwardRefExoticComponent<
+        React.PropsWithoutRef<LinkProps<TState>> & React.RefAttributes<HTMLAnchorElement>
+    > {}
 
 export interface RedirectProps<TState> {
     from?: string;
diff --git a/types/reach__router/reach__router-tests.tsx b/types/reach__router/reach__router-tests.tsx
index fe903f4f71..ab4a872a30 100644
--- a/types/reach__router/reach__router-tests.tsx
+++ b/types/reach__router/reach__router-tests.tsx
@@ -59,6 +59,17 @@ const handleRef = (el: HTMLAnchorElement) => {
 };
 
 render(<Link innerRef={handleRef} to="./foo"></Link>, document.getElementById('app-root'));
+render(<Link ref={handleRef} to="./foo"></Link>, document.getElementById('app-root'));
 
 const refObject: React.RefObject<HTMLAnchorElement> = { current: null };
 render(<Link innerRef={refObject} to="./foo"></Link>, document.getElementById('app-root'));
+render(<Link ref={refObject} to="./foo"></Link>, document.getElementById('app-root'));
+
+// Link can be used as a generic.
+// TODO: When TS >= 3.1 is supported, use more modern syntax:
+//     <Link<number> state={5} to="./foo"></Link>
+React.createElement(Link as Link<number>, {
+    state: 5 /* Cast is a test-only fix for TS 3.1. Remove when TS >= 3.2 is supported. */ as number | undefined,
+    to: './foo',
+    ref: refObject /* Cast is a test-only fix for TS 3.1. Remove when TS >= 3.2 is supported. */ as React.Ref<HTMLAnchorElement> | undefined
+});