fix(react): types fixes in react utils and components

src/misc/debounce.ts

@@ -9,7 +9,7 @@ export interface DebouncedFunction<T extends (this: any, ...args: any[]) => any>
  * Simplest implementation of "debounce" function.
  * Returns function wrapper that delays original function call
  * until timeout since last call will be reached.
- * Analogue of debounce from lodash/underscore.
+ * Similar to `debounce` from lodash/underscore.
  *
  * @param func Function.
  * @param timeout Timeout in milliseconds.

src/react/error-boundary.tsx

@@ -1,4 +1,4 @@
-import { Component, type ErrorInfo, type JSX, type ReactNode } from 'react';
+import { Component, type ErrorInfo, type ReactNode } from 'react';
 
 export interface ErrorBoundaryProps {
   children?: ReactNode;
@@ -34,7 +34,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
   }
 
   /** @inheritdoc */
-  override render(): JSX.Element {
+  override render(): ReactNode {
     const { children, fallback } = this.props;
 
     return <>{this.state.hasError ? fallback : children}</>;

src/react/lifecycle.tsx

@@ -1,4 +1,4 @@
-import { type JSX, type ReactNode, useEffect } from 'react';
+import { type ReactNode, useEffect } from 'react';
 import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.ts';
 import { useLatestRef } from './use-latest-ref.ts';
 
@@ -25,7 +25,7 @@ export interface LifecycleProps {
  * @param props Props.
  * @returns JSX Element.
  */
-export function Lifecycle(props: LifecycleProps): JSX.Element {
+export function Lifecycle(props: LifecycleProps): ReactNode {
   const { children } = props;
 
   // because it is "event callbacks", we should call actual functions (from last render),

src/react/merge-refs.ts

@@ -1,4 +1,4 @@
-import type { Ref, RefObject, RefCallback, MutableRefObject } from 'react';
+import type { Ref, RefObject, RefCallback } from 'react';
 
 /**
  * Create ref that updates all accepted refs from list.
@@ -7,7 +7,7 @@ import type { Ref, RefObject, RefCallback, MutableRefObject } from 'react';
  * @returns Merged ref.
  */
 export function mergeRefs<T>(
-  list: Array<Ref<T> | RefObject<T> | RefCallback<T> | MutableRefObject<T> | null | undefined>,
+  list: Array<Ref<T> | RefObject<T> | RefCallback<T> | null | undefined>,
 ): Ref<T> {
   return (value: T) => {
     for (const ref of list) {

src/react/portal.tsx

@@ -1,4 +1,4 @@
-import { type JSX, type ReactNode, useState } from 'react';
+import { type ReactNode, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.ts';
 import { useLatestRef } from './use-latest-ref.ts';
@@ -60,7 +60,7 @@ const DEFAULTS = {
  * @param props Props.
  * @returns JSX.Element or null.
  */
-export function Portal(props: PortalProps): JSX.Element | null {
+export function Portal(props: PortalProps): ReactNode {
   const { children, portalKey } = props;
 
   const [container, setContainer] = useState<HTMLElement | null>(null);

src/react/use-drag-and-drop.ts

@@ -1,4 +1,4 @@
-import { type RefObject, type DependencyList, type MutableRefObject, useMemo } from 'react';
+import { type RefObject, type DependencyList, useMemo } from 'react';
 import { type Point2d, Vector2 } from '../math/mod.ts';
 import { getPositionedParentOffset } from '../dom/mod.ts';
 import { useIsomorphicLayoutEffect } from '../react/use-isomorphic-layout-effect.ts';
@@ -77,13 +77,7 @@ function canStartDragDefault(event: TouchEvent | PointerEvent | MouseEvent): boo
  * @param options Options.
  */
 export function useDragAndDrop<T extends HTMLElement>(
-  ref:
-    | RefObject<T>
-    | RefObject<T | null>
-    | RefObject<T | undefined>
-    | MutableRefObject<T>
-    | MutableRefObject<T | null>
-    | MutableRefObject<T | undefined>,
+  ref: RefObject<T> | RefObject<T | null> | RefObject<T | undefined>,
   {
     strategy = 'absolute',
     disabled,

src/react/use-intersection.ts

@@ -1,11 +1,4 @@
-import {
-  type RefObject,
-  type MutableRefObject,
-  useContext,
-  useMemo,
-  useRef,
-  type DependencyList,
-} from 'react';
+import { type RefObject, useContext, useMemo, useRef, type DependencyList } from 'react';
 import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.ts';
 import { useLatestRef } from './use-latest-ref.ts';
 import { IntersectionObserverContext } from './context/intersection-observer-context.ts';
@@ -24,13 +17,7 @@ export interface UseIntersectionOptions extends IntersectionObserverInit {
  * @param options Observe options.
  */
 export function useIntersection<T extends Element>(
-  ref:
-    | RefObject<T>
-    | RefObject<T | null>
-    | RefObject<T | undefined>
-    | MutableRefObject<T>
-    | MutableRefObject<T | null>
-    | MutableRefObject<T | undefined>,
+  ref: RefObject<T> | RefObject<T | null> | RefObject<T | undefined>,
   callback: (entry: IntersectionObserverEntry) => void,
   { extraDeps = zeroDeps, ...options }: UseIntersectionOptions = {},
 ): void {

src/react/use-latest-ref.ts

@@ -1,4 +1,4 @@
-import { type MutableRefObject, useRef } from 'react';
+import { type RefObject, useRef } from 'react';
 
 /**
  * Returns ref that automatically actualizes current value each render.
@@ -10,7 +10,7 @@ import { type MutableRefObject, useRef } from 'react';
  * @param value Current value.
  * @returns Ref object.
  */
-export function useLatestRef<T>(value: T): MutableRefObject<T> {
+export function useLatestRef<T>(value: T): RefObject<T> {
   const ref = useRef<T>(value);
 
   // immediately update value if it is not equals to current

src/react/use-merge-refs.ts

@@ -1,8 +1,8 @@
-import { type Ref, type RefCallback, type RefObject, type MutableRefObject, useRef } from 'react';
+import { type Ref, type RefCallback, type RefObject, useRef } from 'react';
 import { mergeRefs } from './merge-refs.ts';
 
 interface HookState<T> {
-  refs: Array<Ref<T> | RefObject<T> | RefCallback<T> | MutableRefObject<T> | null | undefined>;
+  refs: Array<Ref<T> | RefObject<T> | RefCallback<T> | null | undefined>;
   merged: Ref<T>;
 }
 
@@ -12,7 +12,7 @@ interface HookState<T> {
  * @returns Merged ref.
  */
 export function useMergeRefs<T>(
-  refs: Array<Ref<T> | RefObject<T> | RefCallback<T> | MutableRefObject<T> | null | undefined>,
+  refs: Array<Ref<T> | RefObject<T> | RefCallback<T> | null | undefined>,
 ): Ref<T> {
   const stateRef = useRef<HookState<T>>(null);
 

src/react/use-resize.ts

@@ -1,10 +1,4 @@
-import {
-  type RefObject,
-  type MutableRefObject,
-  useContext,
-  useMemo,
-  type DependencyList,
-} from 'react';
+import { type RefObject, useContext, useMemo, type DependencyList } from 'react';
 import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.ts';
 import { useLatestRef } from './use-latest-ref.ts';
 import { ResizeObserverContext } from './context/resize-observer-context.ts';
@@ -22,13 +16,7 @@ export interface UseResizeOptions extends ResizeObserverOptions {
  * @param options Resize observer options.
  */
 export function useResize<T extends Element>(
-  ref:
-    | RefObject<T>
-    | RefObject<T | null>
-    | RefObject<T | undefined>
-    | MutableRefObject<T>
-    | MutableRefObject<T | null>
-    | MutableRefObject<T | undefined>,
+  ref: RefObject<T> | RefObject<T | null> | RefObject<T | undefined>,
   callback: (entry: ResizeObserverEntry) => void,
   { extraDeps = zeroDeps, ...options }: UseResizeOptions = {},
 ): void {