fix(popper): flickering

[bmdalex]

fix(popper): flickering

Fixes #1415
Fixes #1361

Description

Popup content jumps for a split second when opening.

Perform the following steps to reproduce the problem:

• build master
• go to Popup examples page: http://localhost:8080/components/popup#types-popup
• click the button to open the Popup

Expected Result

Popup opens without jump

Actual Result

Popup has a small but noticeable jump when opening (see gif below) 💣

Proposed fix

Create the PopperJS instance earlier, aka immediately after we get a ref to the children prop that the popper.js box is going to display:

<Ref
  innerRef={contentElement => {
    contentRef.current = contentElement
    createInstance() // create `PopperJS` instance here !! 
  }}
>
  {child as React.ReactElement}
</Ref>

[codecov]

Codecov Report

Merging #1434 into master will increase coverage by 0.08%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #1434      +/-   ##
==========================================
+ Coverage   73.59%   73.68%   +0.08%     
==========================================
  Files         787      787              
  Lines        5890     5906      +16     
  Branches     1738     1721      -17     
==========================================
+ Hits         4335     4352      +17     
+ Misses       1549     1548       -1     
  Partials        6        6

Impacted Files	Coverage Δ
...ackages/react/src/components/Dropdown/Dropdown.tsx	88.54% <ø> (ø)	⬆️
packages/react/src/lib/positioner/Popper.tsx	90.19% <100%> (+7.33%)	⬆️

---

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 97f5693...040e276. Read the comment docs.

[codecov]

Codecov Report

Merging #1434 into master will increase coverage by 0.07%.
The diff coverage is 100%.

@@            Coverage Diff            @@
##           master   #1434      +/-   ##
=========================================
+ Coverage   73.53%   73.6%   +0.07%     
=========================================
  Files         787     787              
  Lines        5894    5907      +13     
  Branches     1742    1744       +2     
=========================================
+ Hits         4334    4348      +14     
+ Misses       1554    1553       -1     
  Partials        6       6

Impacted Files	Coverage Δ
packages/react/src/components/Menu/MenuItem.tsx	30.85% <ø> (ø)	⬆️
...ackages/react/src/components/Dropdown/Dropdown.tsx	88.54% <ø> (ø)	⬆️
packages/react/src/lib/positioner/Popper.tsx	89.58% <100%> (+6.72%)	⬆️

---

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 e077ecf...e99664c. Read the comment docs.

[kuzhelov]

removed as this modifier is applied by default now