useHover, useMouse, other hooks have a type error for refs
QuinnStraus opened this issue · 7 comments
Dependencies check up
- I have verified that I use latest version of all @mantine/* packages
What version of @mantine/* packages do you have in package.json?
7.15.1
What package has an issue?
@mantine/hooks
What framework do you use?
Next.js
In which browsers you can reproduce the issue?
Chrome
Describe the bug
The type signature for the ref objects returned from the hooks is RefObject<T | null> rather than RefObject, creating the following type error when the refs are passed into the ref prop of an html element:
Type 'RefObject<HTMLDivElement | null>' is not assignable to type 'RefObject<HTMLDivElement>'.
The hooks seem to still work as expected.
If possible, include a link to a codesandbox with a minimal reproduction
https://codesandbox.io/p/sandbox/mantine-react-template-forked-lnp22m
Possible fix
Return the hook type signature to RefObject.
Self-service
- I would be willing to implement a fix for this issue
Update: this seems to be an issue with react 19 changing the return type of useRef and the ref prop on html elements, since I had upgraded my project to mantine 7.15 but not react 19 yet. Codesandbox seems to also not have been using the react 19 types, causing the issue to reproduce there.
Same, issue for me with existing useElementSize
, useHover
and a few others.
I cannot reproduce the issue https://codesandbox.io/p/sandbox/mantine-react-template-forked-m23r4p
Please provide a sandbox with a minimal reproduction
@rtivital The codesanbox link posted with the ticket shows the TS error: https://codesandbox.io/p/sandbox/mantine-react-template-forked-lnp22m
Thanks, I've found the issue with some hooks, fixed it, will be available with the next patch.