select component migration

To prepare for the Popover changes coming in Blueprint v5.0, we're providing "v2" variants of @blueprintjs/select components which use Popover2 instead of Popover. Migrate to these now in order to ensure a smooth migration path.

These components are available in the existing @blueprintjs/select package:

Select2

Replacement for Select, with notable changes:

• There is no more .bp4-popover-wrapper element.
• Class names on some rendered elements have changed to their Popover2 replacements:
  • .bp4-popover-target → .bp4-popover2-target
  • .bp4-popover-arrow → .bp4-popover2-arrow
  • .bp4-popover-content → .bp4-popover2-content
  • ℹ️ remember to always use the $bp-ns variable in Sass and the Classes constants in TS/JS when referencing Blueprint class names
• The type of popoverProps has changed to Popover2Props, which means a few properties have changed. See Popover2 migration for more info.
  • popover positioning may be specified with "placement" or "position"
  • boundary has been replaced with rootBoundary, which better matches popper.js' definition of what a "boundary" is
• New prop popoverContentProps allows forwarding props to the popover content wrapper element.
• New prop popoverRef allows access to the Popover2 component instance.
• In general, accessibility markup has been improved.

Target DOM changes

- <span class="bp4-popover-wrapper">
-   <span aria-haspopup="true" class="bp4-popover-target bp4-popover-open">
-     <div>
-       <button type="button" class="bp4-button">
-         ...
-       </button>
-     </div>
-   </span>
- </span>
+ <div
+   aria-controls="listbox-1"
+   aria-expanded="true"
+   aria-haspopup="listbox"
+   class="bp4-popover2-target bp4-popover2-open"
+   role="combobox"
+ >
+   <button type="button" class="bp4-button">
+     ...
+   </button>
+ </div>

Suggest2

Replacement for Suggest.

TODO(adahiya)

MultiSelect2

Replacement for MultiSelect.

TODO(adahiya)