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>

• 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>

• Computed "auto" placement for a given popover or tooltip may be different from what it was with <Popover> using Popper.js v1.x. This is mostly due to implementation changes in the positioning library. You may need to adjust the value of this prop to retain an existing visual layout.

  • Example, before & after: