fix(power-bi): :bug: Quick filter dropdowns now close when clicking outside popover

[EdwardBrunton]

Short summary

Added an overlay to close popover when clicking outside the popover

Link to issue: https://github.com/equinor/cc-reports/issues/140

PR Checklist

• [x] I have performed a self-review of my own code
• [x] I have written a short summary of my changes in the PR
• [x] I have linked related issue to the PR
• [x] I have bumped the version(s) in the changed package(s)
• [x] I have bumped the version in workspace-fusion

[!TIP] You can test your changes on the test-application. You can find it under apps\test-app\src\index.tsx

[!CAUTION] ⛔ I understand by merging my PR, the changed packages will be published to NPM immediately ⛔

[github-actions[bot]]

Howdy, wanderer🌵🤠🐴,

Seems you've sauntered into our GitHub saloon with a pull request, but it appears you've forgotten to tie your horse to the hitching post. Now, in this town, we don't take kindly to stray requests, and the GitHub corral is no place for them.

I reckon you best mosey on over and link that pull request to an issue, lest you want the winds of open source trouble blowin' your way. I've got my eye on you, stranger, and a stern warning echoes through these digital canyons.

Now, for those who might be new to these parts or sufferin' from a bout of forgetfulness, fear not. I've rustled up a guide that's as handy as a snake in a boot🐍🥾. Take a peek at this guide, and it'll show you the way to tether that pull request like a seasoned rancher🤠.

Don't let the sun set on your unlinked pull request, and remember, in these GitHub lands, the code speaks louder than six-shooters.

Sincerely, The code patrol👮

[github-actions[bot]]

Howdy, wanderer🌵🤠🐴,

Seems you've sauntered into our GitHub saloon with a pull request, but it appears you've forgotten to tie your horse to the hitching post. Now, in this town, we don't take kindly to stray requests, and the GitHub corral is no place for them.

I reckon you best mosey on over and link that pull request to an issue, lest you want the winds of open source trouble blowin' your way. I've got my eye on you, stranger, and a stern warning echoes through these digital canyons.

Now, for those who might be new to these parts or sufferin' from a bout of forgetfulness, fear not. I've rustled up a guide that's as handy as a snake in a boot🐍🥾. Take a peek at this guide, and it'll show you the way to tether that pull request like a seasoned rancher🤠.

Don't let the sun set on your unlinked pull request, and remember, in these GitHub lands, the code speaks louder than six-shooters.

Sincerely, The code patrol👮

[EdwardBrunton]

I think we should consider the overlay not covering the entire window.

Maybe some comment indicating what this "hack" does, for future reference? (Hard to deduct if you dont know the context)

I have left a comment, but I just wanted to say that it isn't a hack, it's a common solution in component libraries 😄

[Gustav-Eikaas]

I am more used to seeing something like this, where you attach a ref to the container and subscribe to click events on the whole document. Then you just check if a given click event is inside the ref or not.

https://github.com/chakra-ui/chakra-ui/blob/dfc81b4d4b3a667055e67fdac39cc17b27742f33/packages/hooks/src/use-outside-click.ts#L25

Are you sure something like this would not work?

[EdwardBrunton]

I'm sure that would work too, but I am not sure why we are trying to overcomplicate this. My proposed solution is very simple, with minimal code, and is a accepted way to do this. See for example Angular CDK Overlay