fix(tooltip): Let ariakit merge the child ref to avoid React ref warning

[frankieyan]

Short description

In #1074, we tried to match Tooltip's previous implementation where we extract and pass along its child's ref to Ariakit, while keeping React 18 and 19 compatibility.. However, this causes a dev mode warning in React 18 when we try to test props.ref:

Warning: ref is not a prop. Trying to access it will result in undefined being returned.
If you need to access the same value within the child component, you should pass it as a different
prop. (https://reactjs.org/link/special-props)

Turns out, Ariakit already merges the child element's ref and check for props.ref through its render prop:

• https://github.com/ariakit/ariakit/blob/f6b6376e57f910c9163b89a36e717a1e857fe43c/packages/ariakit-react-core/src/utils/system.tsx#L39
• https://github.com/ariakit/ariakit/blob/f6b6376e57f910c9163b89a36e717a1e857fe43c/packages/ariakit-react-core/src/utils/misc.ts#L41-L44

So we can remove this logic and let Ariakit handle it: <TooltipAnchor render={child} store={tooltip} />

PR Checklist

• Added tests for bugs / new features
• Reviewed and approved Chromatic visual regression tests in CI

[doistbot]

This PR simplifies Tooltip by removing manual child ref extraction and letting Ariakit handle ref merging via its render prop, eliminating a React 18 dev warning about accessing props.ref.

Few things worth tightening:

• The new test doesn't actually lock in the regression this PR fixes—consider spying on console.error during render and asserting the special-props warning is never logged, so the test would catch it if the warning comes back.
• The hover interaction in the test relies on real timers and blocks for the full 500ms showTimeout; switching to fake timers with flushMicrotasks() would keep it in line with repo conventions and speed up the suite.

I also included a few optional follow-up notes in the details below.

Optional follow-up note (1)

• [P3] src/tooltip/tooltip.test.tsx:175: This hover interaction relies on real timers, causing findByRole to block for the duration of the tooltip's 500ms showTimeout. To avoid slowing down the test suite and to align with the repository guidelines for Ariakit interactions, consider using fake timers and flushMicrotasks(): tsx jest.useFakeTimers() const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }) await user.hover(button) act(() => { jest.advanceTimersByTime(500) }) await flushMicrotasks() expect(screen.getByRole('tooltip', { name: 'tooltip content here' })).toBeInTheDocument() jest.useRealTimers()

_{Share Feedback • Review Logs}

[doistbot]

🟡 P2 This still doesn't exercise the bug this PR fixes. The failure mode was a React 18 dev warning during render when props.ref is accessed, but these assertions only verify ref forwarding and hover behavior—both can still pass if that warning comes back. Please spy on console.error around the render and assert that the special-props warning is not logged.

[frankieyan]

Honestly, I'm not sure if it warrants an extra test 🤔

[doist-release-bot]

🎉 This PR is included in version 33.2.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[gnapse]

✅