Popover2 migration

Requirements

• @blueprintjs/popover2 depends on React 16.8+. This is a stricter requirement than @blueprintjs/core.
• This package also depends on v2.x of the @popperjs/core and react-popper libraries, while the core package depends on v1.x. Note that this means you will have two versions of Popper.js installed and possibly bundled into your application at runtime.

Notable changes compared to <Popover>:

• There is no more .bp3-popover-wrapper wrapper element surrounding the target and overlay. With usePortal={false}, both the target and overlay are rendered out to the virtual DOM as siblings. With usePortal={true}, just the target is rendered in place (overlay is rendered in a portal).

- <span class="bp3-popover-wrapper">
-     <span class="bp3-popover-target">
-         <button type="button" class="bp3-button bp3-intent-primary">
-             <span class="bp3-button-text">Popover target</span>
-         </button>
-     </span>
-     <div class="bp3-overlay bp3-overlay-inline foo"></div>
- </span>
+ <span class="bp3-popover2-target">
+     <button type="button" class="bp3-button bp3-intent-primary">
+         <span class="bp3-button-text">Popover target</span>
+     </button>
+ </span>
+ <div class="bp3-overlay bp3-overlay-inline foo"></div>

• The removal of the wrapper element means that the className prop now gets applied directly to the rendered target (before, it was applied to the wrapper element). This is equivalent to what targetClassName did before, so that that redundant prop has been removed.

• There is an option to no longer render a .bp3-popover-target wrapper element surrounding the target as well. If renderTarget prop is supplied, its return value will be rendered out directly to the DOM without a wrapper.

  • Note: in this case it is the consumer's responsibility to disable a <Tooltip2> target which is a direct child of a <Popover2> when the popover is open (<Popover> would handle this automatically for you, with its wrapper element behavior).

- <span class="bp3-popover-target">
-     <button type="button" class="bp3-button">
-         <span class="bp3-button-text">Target</span>
-     </button>
- </span>
+ <button type="button" class="bp3-button">
+     <span class="bp3-button-text">Target</span>
+ </button>

• The old API of supplying a target as the first child of <Popover2> is retained. In this case, a .bp3-popover-target wrapper element will be generated around the target child, so we can atttach event handlers to it.
• For certain prop configurations (openOnTargetFocus={true} and hover interaction kinds), a tabIndex was previously generated and applied to the cloned props.children element directly. Now, that tabIndex is applied to the bp3-popover2-target wrapper element to increase the chance of this feature working in more situations.

- <span class="bp3-popover-target">
-     <button type="button" class="bp3-button" tabIndex="0">
+ <span class="bp3-popover-target" tabIndex="0">
+     <button type="button" class="bp3-button">
         <span class="bp3-button-text">Target</span>
     </button>
 </span>