feat(useMouseInElement): add support for tracking inline-level elements - #5049

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

Description

Current Behavior

useMouseInElement works perfectly for block elements, but does not work correctly for inline elements. This is because it uses el.getBoundingClientRect(), which returns a single rect that wraps the entire element. For inline elements, this means that this rect will potentially include parts that are not in the element itself.

For example, the regions marked with x below would be detected as being in the inline element when hovered.

--------------------------------------
| xxxxxxxxxxxxxxx here is the inline |
| element which wraps onto this line |
| and ends here. xxxxxxxxxxxxxxxxxxx | 
--------------------------------------

Proposed Behavior

Instead of using el.getBoundingClientRect(), we can use el.getClientRects() to get more precise bounding.

Per the docs:

The getClientRects() method of the Element interface returns a collection of DOMRect objects that indicate the bounding rectangles for each CSS border box in a client.

Most elements only have one border box each, but a multiline inline-level element (such as a multiline element, by default) has a border box around each line.

For example, in the above scenario, we'll get three rects returned, the first one containing "here is the inline", the second rect containing "element which wraps onto this line", and the third element containing "and ends here."
And hovering on the x regions will no longer be detected as being still within the inline element.

                ----------------------
 xxxxxxxxxxxxxx | here is the inline |
                ----------------------
--------------------------------------
| element which wraps onto this line |
--------------------------------------
------------------
| and ends here. | xxxxxxxxxxxxxxxxx
------------------