Merge pull request #4403 from maxbrieiev/main

compat: Improve React compatibility for `Ref` type.

compat/src/index.d.ts

@@ -18,7 +18,6 @@ declare namespace React {
 	export import PropRef = _hooks.PropRef;
 	export import Reducer = _hooks.Reducer;
 	export import Dispatch = _hooks.Dispatch;
-	export import Ref = _hooks.Ref;
 	export import SetStateAction = _hooks.StateUpdater;
 	export import useCallback = _hooks.useCallback;
 	export import useContext = _hooks.useContext;
@@ -50,6 +49,7 @@ declare namespace React {
 	export import ComponentClass = preact.ComponentClass;
 	export import FC = preact.FunctionComponent;
 	export import createContext = preact.createContext;
+	export import Ref = preact.Ref;
 	export import createRef = preact.createRef;
 	export import Fragment = preact.Fragment;
 	export import createElement = preact.createElement;

compat/test/ts/forward-ref.tsx

@@ -24,3 +24,7 @@ export const Bar = React.forwardRef<HTMLDivElement, { children: any }>(
 		return <div ref={ref}>{props.children}</div>;
 	}
 );
+
+export const baz = (
+	ref: React.ForwardedRef<HTMLElement>
+): React.Ref<HTMLElement> => ref;

hooks/src/index.d.ts

@@ -1,4 +1,4 @@
-import { ErrorInfo, PreactContext, Ref as PreactRef } from '../..';
+import { ErrorInfo, PreactContext, Ref, RefObject } from '../..';
 
 type Inputs = ReadonlyArray<unknown>;
 
@@ -52,9 +52,6 @@ export function useReducer<S, A, I>(
 
 /** @deprecated Use the `Ref` type instead. */
 type PropRef<T> = MutableRef<T>;
-interface Ref<T> {
-	readonly current: T | null;
-}
 
 interface MutableRef<T> {
 	current: T;
@@ -70,7 +67,7 @@ interface MutableRef<T> {
  * @param initialValue the initial value to store in the ref object
  */
 export function useRef<T>(initialValue: T): MutableRef<T>;
-export function useRef<T>(initialValue: T | null): Ref<T>;
+export function useRef<T>(initialValue: T | null): RefObject<T>;
 export function useRef<T = undefined>(): MutableRef<T | undefined>;
 
 type EffectCallback = () => void | (() => void);
@@ -92,7 +89,7 @@ type CreateHandle = () => object;
  * @param inputs If present, effect will only activate if the values in the list change (using ===).
  */
 export function useImperativeHandle<T, R extends T>(
-	ref: PreactRef<T>,
+	ref: Ref<T>,
 	create: () => R,
 	inputs?: Inputs
 ): void;