React & TypeScript Support For ref With as Prop

[yishayhaz]

Current behavior

Currently, we are assigning Ref to every React component in the project that uses the as prop. This approach leads to a messy implementation, as noted by @RobinMalfait, it's a hack.

Solution

I have a solution for this TypeScript issue. By utilizing the global HTMLElementTagNameMap, we can accurately type the refs. Although there are a few additional steps to ensure the solution is clean and reusable, the general approach will look like this:

*The screenshots are from the actual headlessui/react package, where I implemented a quick local solution. *This approach also allows for passing in custom components, while including their respective props.

Conclusion

If there are no specific reasons for using a general type for all refs, I would like to implement this solution to improve this library.

I welcome any questions, comments, or suggestions!

[RobinMalfait]

Hey!

I'm more than happy to accept a contribution like this. But to make sure we are not wasting your time, can you start with a very minimal PR where you do it for a single component only? Let's say the Menu component. (If you were about to touch the generic implementation, that is also fine).

I'm just curious to see the change (and the impact) and want to double check if the implementation actually makes sense in all cases. So starting with let's say the Menu component allows us to verify the changes without spending time on all the other components.

How does that sound to you?

[yishayhaz]

@RobinMalfait Just created a simple PR with a working solution, let me know what you think