From add2bd512ffe24fda88b426f6d72aecb2ef105ef Mon Sep 17 00:00:00 2001
From: Jishnu Viswanath <github@jishnu.me>
Date: Thu, 30 Jun 2022 17:09:27 +1000
Subject: [PATCH] =?UTF-8?q?fix(types):=20[1016]=20updated=20type=20definit?=
 =?UTF-8?q?ion=20of=20useForkRef=20with=20generic=20suppor=E2=80=A6=20(#10?=
 =?UTF-8?q?17)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: [1016] updated type definition of useForkRef with generic support and null support

* fix: [1016] revert accidental code styling change

* fix: [1016] revert accidental code styling change

* chore(prettier): Update .prettierrc.json

Co-authored-by: Bhargav Ponnapalli <imbhargav5@gmail.com>
---
 src/hooks/useForkRef.ts | 11 +++++++----
 src/utils/utils.ts      |  8 ++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useForkRef.ts b/src/hooks/useForkRef.ts
index 829109248a..aab1ba6741 100644
--- a/src/hooks/useForkRef.ts
+++ b/src/hooks/useForkRef.ts
@@ -1,10 +1,10 @@
-import { useMemo, MutableRefObject } from 'react';
+import { useMemo } from 'react';
 import type { HTMLElementOrNull, CallbackRef, AnyRef } from '../utils/utils';
 /**
  * Credit to material-ui for this snippet
  */
 
-function setRef(ref: AnyRef, value: HTMLElementOrNull) {
+function setRef<T extends HTMLElement | null>(ref: AnyRef<T> | null, value: T) {
   if (typeof ref === 'function') {
     ref(value);
   } else if (ref) {
@@ -19,7 +19,10 @@ function setRef(ref: AnyRef, value: HTMLElementOrNull) {
  * @param refA
  * @param refB
  */
-function useForkRef(refA: AnyRef, refB: AnyRef): CallbackRef | null {
+function useForkRef<T extends HTMLElement | null = HTMLElementOrNull>(
+  refA: AnyRef<T> | null,
+  refB: AnyRef<T> | null
+): CallbackRef<T> | null {
   /**
    * This will create a new function if the ref props change and are defined.
    * This means react will call the old forkRef with `null` and the new forkRef
@@ -30,7 +33,7 @@ function useForkRef(refA: AnyRef, refB: AnyRef): CallbackRef | null {
       return null;
     }
 
-    return (refValue: HTMLElementOrNull) => {
+    return (refValue: T) => {
       setRef(refA, refValue);
       setRef(refB, refValue);
     };
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 49de21206c..aeb3f7643e 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -2,5 +2,9 @@ import type { MutableRefObject } from 'react';
 
 export type HTMLElementOrNull = HTMLElement | null;
 export type RefElementOrNull<T> = T | null;
-export type CallbackRef = (node: HTMLElementOrNull) => any;
-export type AnyRef = CallbackRef | MutableRefObject<HTMLElementOrNull>;
+export type CallbackRef<T extends HTMLElement | null = HTMLElementOrNull> = (
+  node: T
+) => any;
+export type AnyRef<T extends HTMLElement | null = HTMLElementOrNull> =
+  | CallbackRef<T>
+  | MutableRefObject<T>;