feat: add open direction to the BccReact selector dropdown

[covaci-edvin]

Change summary

These changes will open the Dropdown upwards if the selector is positioned on the bottom half of the viewport, and downwards if it is positioned on the upper half of the viewport.

Change type

• No review
• Small PR
• Big PR
• Refactor

Closes #ISSUE_NUMBER or Part of #ISSUE_NUMBER

[u12206050]

How were you able to test this? Maybe add two stories where the affect is shown.

Also, the component takes in a prop top is this still needed? If not, then the classes and functionality should be checked that it will still work.

[covaci-edvin]

How were you able to test this? Maybe add two stories where the affect is shown.

Also, the component takes in a prop top is this still needed? If not, then the classes and functionality should be checked that it will still work.

The dropdown’s behavior depends on the selector’s position in the viewport. To see it open upwards or downwards, you need to manually scroll the Storybook page so the component is near the top or bottom of the screen:

Screen.Recording.2025-08-22.at.08.36.40.mov

This behaviour is not controlled from the outside anyway, I'm not sure if its necessary to showcase it.

The selector is still opened based on the top prop (to avoid breaking the existing functionality where this component is used). The dropdown, however, when there are more than 7 emojis, is opened based on the position of the selector relative to the viewport.

Added functionality so the selector automatically closes when the user clicks anywhere outside of it, making the interaction feel more natural.