@mantine/hooks useClickOutside ref typescript type is immutable

[scamden]

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?

Vite

In which browsers you can reproduce the issue?

None

Describe the bug

useClickOutside returns

import("react").RefObject<T | null>;

Which is readonly. React's types don't allow you to pass this to <div ref= which is the canonical example given in the docs.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

I believe this should be MutableRefObject instead

Self-service

• I would be willing to implement a fix for this issue

[noahw3]

I just came across this with useElementSize as well. It looks like it was introduced in 7.15.0. It switched from ref: import("react").RefObject<T>; to ref: import("react").RefObject<T | null>;.

[noahw3]

Also, looks like this is a dupe of #7252

[rtivital]

I cannot reproduce the issue on codesandbox https://codesandbox.io/p/sandbox/mantine-react-template-forked-nmnl8y
Please provide a sandbox with a minimal reproduction.

[scamden]

I cannot reproduce the issue on codesandbox https://codesandbox.io/p/sandbox/mantine-react-template-forked-nmnl8y Please provide a sandbox with a minimal reproduction.

https://codesandbox.io/p/sandbox/mantine-react-template-forked-pzk2y5

Needs to specify the element type to see the bug.

Actual issue looks like: useClickOutside adds null to the ref type but LegacyRef on divs don't want the null.

The reason MutableRefObject happens to fix this, for the curious, is because it's type directly accepts the generic without adding null

 interface MutableRefObject<T> {
        current: T;
    }

whereas RefObject adds the null therefore inferring a non-null T for the generic

    interface RefObject<T> {
      /**
       * The current value of the ref.
       */
      readonly current: T | null;
  }