datetime2 component migration

To prepare for the Popover changes coming in Blueprint v5.0, we're providing "v2" variants of @blueprintjs/datetime and @blueprintjs/timezone 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 new @blueprintjs/datetime2 package:

DateInput2

Replacement for DateInput.

TODO(adahiya)

TimezoneSelect

Replacement for TimezonePicker, with notable changes:

• Component name has changed to better match semantic naming patterns of other Blueprint components:
  • It is a specialized select component, not a picker component.
  • Note that we use the term "picker" to refer to DatePicker / DateRangePicker, which do not rely on popovers.
• New name means that class names have changed:
  • .bp4-timezone-picker → .bp4-timezone-select
  • .bp4-timezone-picker-popover → .bp4-timezone-select-popover
  • ℹ️ remember to always use the $bp-ns variable in Sass and the Classes constants in TS/JS when referencing Blueprint class names
• Component uses Select2 instead of Select, so there are some DOM changes — see Select2 migration for more info.
• New prop fill matches behavior of <Select fill>.
• 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
  • modifiers type has changed
  • targetClassName and targetTagName properties have been removed

Target DOM changes

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