feat(popup): unstable_pinned prop

[bmdalex]

feat(popup): unstable_pinned prop

Description

There are certain use cases where our users need to position Popup content or Dropdown items using a specific alignment and position (via align and position props).

By default, Popup content or Dropdown items reposition themselves automatically on both axis if the content / items do not fit in the viewport. However, the algorithm has a few issues, outlined in #1391 so this PR addresses that with a short term fix presented here:

The short term fix is to add the unstable_pinned prop that disables automatic repositioning of the component; it will always be placed according to the values of align and position props, regardless of the size of the component, the reference element or the viewport.

e.g.

<Popup align="start" position="above" pinned ... />

will create a Popup that will always be placed on top of the trigger aligned to the start (auto positioning will be turned off). Same applies for Dropdown.

Screenshot outlining the difference in Popup:

[bmdalex]

fyi @kuzhelov @layershifter @stuartlong

[codecov]

Codecov Report

Merging #1471 into master will decrease coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #1471      +/-   ##
==========================================
- Coverage   73.47%   73.46%   -0.01%     
==========================================
  Files         807      806       -1     
  Lines        6088     6087       -1     
  Branches     1752     1800      +48     
==========================================
- Hits         4473     4472       -1     
+ Misses       1610     1609       -1     
- Partials        5        6       +1

Impacted Files	Coverage Δ
packages/react/src/lib/positioner/Popper.tsx	89.13% <100%> (-0.46%)	⬇️
...ackages/react/src/components/Dropdown/Dropdown.tsx	88.54% <100%> (ø)	⬆️
packages/react/src/components/Popup/Popup.tsx	67.74% <100%> (ø)	⬆️
packages/react/src/components/Tree/TreeTitle.tsx	50% <0%> (-36.37%)	⬇️
packages/react/src/components/Tree/Tree.tsx	71.42% <0%> (-21.91%)	⬇️
...lib/accessibility/Behaviors/Popup/popupBehavior.ts	89.65% <0%> (-6.18%)	⬇️
...haviors/Toolbar/menuItemAsToolbarButtonBehavior.ts	100% <0%> (ø)	⬆️
...ssibility/Behaviors/List/selectableListBehavior.ts	100% <0%> (ø)	⬆️
...c/lib/accessibility/Behaviors/Icon/iconBehavior.ts	100% <0%> (ø)	⬆️
...b/accessibility/Behaviors/List/listItemBehavior.ts	100% <0%> (ø)	⬆️
... and 23 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e28114e...c8808cc. Read the comment docs.

[bmdalex]

closing for now as @layershifter will introduce a better solution

[bmdalex]

in the end we need this PR, added few more changes