Remove usages of react-onclickoutside to support React 19

[hamidrezahanafi]

Description

Closes #4801
Closes #4605

Problem
React 19 removed findDOMNode and react-onclickoutside is not supported

Changes

• Remove react-onclickoutside and replace with custom wrapper
• Update the onClickOutside to use MouseEvent instead of React.MouseEvent since it's a document event listener

Screenshots

To reviewers

Contribution checklist

• I have followed the contributing guidelines.
• I have added sufficient test coverage for my changes.
• I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

[pullrequest]

✅ This pull request was sent to the PullRequest network for review. Expert reviewers are now being matched to your request based on the code's requirements. Stay tuned!

What to expect from this code review:

• Comments posted to any areas of potential concern or improvement.
• Detailed feedback or actions needed to resolve issues that are found.
• Turnaround times vary, but we aim to be swift.

---

@hamidrezahanafi you can click here to see the review status or cancel the code review job.

[pullrequest]

PullRequest Breakdown

Reviewable lines of change

+ 164
- 101

61% TSX
34% TSX (tests)
3% TypeScript
2% JSON
<1% JavaScript

Generated lines of change

+ 0
- 12

Type of change

Feature - These changes are adding a new feature or improvement to existing code.

[pullrequest]

The change looks good to me. On the other hand, the discussion on #4605 mentioned using floating-ui instead, https://floating-ui.com/docs/usedismiss. Any specific reason to build the custom solution instead of using that?

Xiaoyong W

---

Reviewed with ❤️ by PullRequest

[hamidrezahanafi]

The change looks good to me. On the other hand, the discussion on #4605 mentioned using floating-ui instead, https://floating-ui.com/docs/usedismiss. Any specific reason to build the custom solution instead of using that?

Xiaoyong W

Reviewed with ❤️ by PullRequest

Not all usages of the react-onclickoutside could be replaced by useDismiss like month and year dropdown which are not using useFloating. I figured we probably don't want to have two different things to manage outside click.

[pullrequest]

I have no concerns with this pull request, security or otherwise.

Jacob

---

Reviewed with ❤️ by PullRequest

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.42%. Comparing base (c550195) to head (407f289).
Report is 14 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4979      +/-   ##
==========================================
+ Coverage   96.39%   96.42%   +0.02%     
==========================================
  Files          28       29       +1     
  Lines        3305     3328      +23     
  Branches     1387     1411      +24     
==========================================
+ Hits         3186     3209      +23     
+ Misses        119      115       -4     
- Partials        0        4       +4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[pullrequest]

PullRequest Breakdown

Reviewable lines of change

+ 196
- 101

55% TSX
41% TSX (tests)
3% TypeScript
1% JSON
<1% JavaScript

Generated lines of change

+ 0
- 12

Type of change

Feature - These changes are adding a new feature or improvement to existing code.

[martijnrusschen]

Thanks! I'll do some manual testing before merging. Stay tuned.

[pullrequest]

The change looks good to me and matches the description

Xiaoyong W

---

Reviewed with ❤️ by PullRequest

[martijnrusschen]

This seems to work fine, I'm going to merge this.

[hamidrezahanafi]

@martijnrusschen Is there any plan to cut a new release soon? React 19 is on the horizon and I would like to start some testing with this change.
Thank you!