feat: render MessageActionsBox on modal

[MartinCupela]

🎯 Goal

Render the message actions menu above an overlay that would prevent the erratic behavior of menu disappearing when hovered away. Make sure that only one menu is rendered in a given container.

🛠 Implementation details

This implementation uses React portal to append the modal to a selected container. That avoids the message hover state to influence the display of the message actions menu.

Only one message actions menu can be rendered per message list.

Each menu is positioned using react-popper. This assures that the menu position will be adjusted so that it is always entirely visible.

Message options are kept visible meanwhile the message actions menu is open.

During the implementation the Modal component received changes that allows us to pass the properties to the inner modal container div as well as to set the reference to this div for the parent components. This is used in connection with the react-popper.

🎨 UI Changes

demo_message_actions_on_modal.webm

[codecov[bot]]

Codecov Report

Merging #1716 (f87a809) into theming-v2 (363676e) will increase coverage by 0.19%. The diff coverage is 96.96%.

@@              Coverage Diff               @@
##           theming-v2    #1716      +/-   ##
==============================================
+ Coverage       83.44%   83.63%   +0.19%     
==============================================
  Files             251      252       +1     
  Lines            6166     6196      +30     
  Branches         1647     1654       +7     
==============================================
+ Hits             5145     5182      +37     
+ Misses            870      864       -6     
+ Partials          151      150       -1     

Impacted Files	Coverage Δ
src/context/MessageContext.tsx	57.89% <ø> (ø)
.../components/MessageList/VirtualizedMessageList.tsx	64.35% <75.00%> (+0.17%)	:arrow_up:
src/components/Modal/Modal.tsx	97.05% <94.73%> (+1.60%)	:arrow_up:
src/components/MessageActions/MessageActions.tsx	98.30% <96.96%> (+3.22%)	:arrow_up:
src/components/Message/Message.tsx	100.00% <100.00%> (ø)
src/components/Message/MessageOptions.tsx	100.00% <100.00%> (ø)
...rc/components/MessageActions/MessageActionsBox.tsx	82.05% <100.00%> (+4.05%)	:arrow_up:
src/components/MessageList/MessageList.tsx	85.54% <100.00%> (+0.17%)	:arrow_up:
src/components/MessageList/utils.ts	70.27% <100.00%> (+0.82%)	:arrow_up:
src/components/Modal/Portal.tsx	100.00% <100.00%> (ø)
... and 3 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[DannyBiezen]

I've been trying to find a way to not have the message actions menu disappear when hovering away and found this PR which seems to do exactly what I want!

Are there any plans on getting this merged? It would be great having this provided by this SDK instead of having to customize a lot of components in my codebase.

[MartinCupela]

Hello @DannyBiezen , this is currently on hold due the focus on other priorities. I plan to get back to this, but I do not have an exact roadmap to provide you.