feat(Combobox, Select, Date picker, Dropdown): Update viewport detection/positioning

olehnoskov-cengage commented 1 month ago

In the scope of this ticket, the ability to detect the viewport and position certain components was integrated via https://floating-ui.com/ for some components:

Combobox
Date picker
Dropdown
Select

Feat: #62 Issue: #958

What I did

Screenshots:

Screenshot from 2024-09-24 16-10-47 Screenshot from 2024-09-20 15-04-52 Screenshot from 2024-09-20 14-03-10 Screenshot from 2024-09-20 12-46-12 Screenshot from 2024-09-19 12-34-28 Screenshot from 2024-09-25 14-01-06 Screencast from 25.09.24 14:15:32.webm

Checklist

[x] changeset has been added
[x] Pull request description is descriptive
[ ] I have made corresponding changes to the documentation
[x] New and existing unit tests pass locally with my changes
[x] I have added tests that prove my fix is effective or that my feature works

How to test

Storybook -> Combobox Storybook -> Date picker Storybook -> Dropdown -> Flipped Items Storybook -> Select

For all of these components, nothing should be changed.

If we want to test the new feature, we can use react magma docs and open this components in CodeSandBox to test it with some components in the case, when there isn't enough room for the Combobox, Date picker, Dropdown, and Select to display in the position it's supposed to, then it will automatically move to the opposite position.

For example:

the down position will move to the up position when there isn't enough space below the button and vice versa.
the right position will move to the left position when there isn't enough space and vice versa.