[@mantine/hooks] Fix incorrect ref types in use-move, use-radial-move…

…, use-in-viewport and use-scroll-into-view (#7252)
mantinedev · Dec 16, 2024 · d75b0a8 · d75b0a8
1 parent 296fb8f
commit d75b0a8
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 10 deletions.
diff --git a/packages/@mantine/hooks/src/use-hover/use-hover.ts b/packages/@mantine/hooks/src/use-hover/use-hover.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-export function useHover<T extends HTMLElement = HTMLDivElement>() {
+export function useHover<T extends HTMLElement = any>() {
   const [hovered, setHovered] = useState(false);
   const ref = useRef<T>(null);
   const onMouseEnter = useCallback(() => setHovered(true), []);

diff --git a/packages/@mantine/hooks/src/use-in-viewport/use-in-viewport.ts b/packages/@mantine/hooks/src/use-in-viewport/use-in-viewport.ts
@@ -1,6 +1,6 @@
 import { useCallback, useRef, useState } from 'react';
 
-export function useInViewport<T extends HTMLElement>() {
+export function useInViewport<T extends HTMLElement = any>() {
   const observer = useRef<IntersectionObserver | null>(null);
   const [inViewport, setInViewport] = useState(false);
 

diff --git a/packages/@mantine/hooks/src/use-move/use-move.ts b/packages/@mantine/hooks/src/use-move/use-move.ts
@@ -18,7 +18,7 @@ interface useMoveHandlers {
   onScrubEnd?: () => void;
 }
 
-export function useMove<T extends HTMLElement = HTMLDivElement>(
+export function useMove<T extends HTMLElement = any>(
   onChange: (value: UseMovePosition) => void,
   handlers?: useMoveHandlers,
   dir: 'ltr' | 'rtl' = 'ltr'

diff --git a/packages/@mantine/hooks/src/use-mutation-observer/use-mutation-observer.ts b/packages/@mantine/hooks/src/use-mutation-observer/use-mutation-observer.ts
@@ -1,12 +1,12 @@
 import { useEffect, useRef } from 'react';
 
-export function useMutationObserver<Element extends HTMLElement>(
+export function useMutationObserver<T extends HTMLElement = any>(
   callback: MutationCallback,
   options: MutationObserverInit,
   target?: HTMLElement | (() => HTMLElement) | null
 ) {
   const observer = useRef<MutationObserver>(null);
-  const ref = useRef<Element>(null);
+  const ref = useRef<T>(null);
 
   useEffect(() => {
     const targetElement = typeof target === 'function' ? target() : target;

diff --git a/packages/@mantine/hooks/src/use-radial-move/use-radial-move.ts b/packages/@mantine/hooks/src/use-radial-move/use-radial-move.ts
@@ -50,7 +50,7 @@ export interface UseRadialMoveOptions {
   onScrubEnd?: () => void;
 }
 
-export function useRadialMove<T extends HTMLElement = HTMLDivElement>(
+export function useRadialMove<T extends HTMLElement = any>(
   onChange: (value: number) => void,
   { step = 0.01, onChangeEnd, onScrubStart, onScrubEnd }: UseRadialMoveOptions = {}
 ) {

diff --git a/packages/@mantine/hooks/src/use-scroll-into-view/use-scroll-into-view.ts b/packages/@mantine/hooks/src/use-scroll-into-view/use-scroll-into-view.ts
@@ -35,17 +35,17 @@ interface ScrollIntoViewParams {
 }
 
 interface ScrollIntoViewReturnType<
-  Target extends HTMLElement,
+  Target extends HTMLElement = any,
   Parent extends HTMLElement | null = null,
 > {
-  scrollableRef: React.MutableRefObject<Parent>;
-  targetRef: React.MutableRefObject<Target>;
+  scrollableRef: React.RefObject<Parent>;
+  targetRef: React.RefObject<Target>;
   scrollIntoView: (params?: ScrollIntoViewAnimation) => void;
   cancel: () => void;
 }
 
 export function useScrollIntoView<
-  Target extends HTMLElement,
+  Target extends HTMLElement = any,
   Parent extends HTMLElement | null = null,
 >({
   duration = 1250,