[popover2] fix: add compatibility with more core components

packages/core/src/components/breadcrumbs/breadcrumbs.tsx

@@ -110,6 +110,8 @@ export class Breadcrumbs extends AbstractPureComponent2<IBreadcrumbsProps> {
             // order.
             orderedItems = items.slice().reverse();
         }
+
+        /* eslint-disable deprecation/deprecation */
         return (
             <li>
                 <Popover position={position} {...this.props.popoverProps}>
@@ -118,6 +120,7 @@ export class Breadcrumbs extends AbstractPureComponent2<IBreadcrumbsProps> {
                 </Popover>
             </li>
         );
+        /* eslint-enable deprecation/deprecation */
     };
 
     private renderOverflowBreadcrumb = (props: IBreadcrumbProps, index: number) => {

packages/core/src/components/collapsible-list/collapsibleList.tsx

@@ -97,6 +97,7 @@ export class CollapsibleList extends React.Component<ICollapsibleListProps> {
         let collapsedPopover: JSX.Element | undefined;
         if (collapsedChildren.length > 0) {
             const position = collapseFrom === Boundary.END ? Position.BOTTOM_RIGHT : Position.BOTTOM_LEFT;
+            /* eslint-disable deprecation/deprecation */
             collapsedPopover = (
                 <li className={this.props.visibleItemClassName}>
                     <Popover
@@ -108,6 +109,7 @@ export class CollapsibleList extends React.Component<ICollapsibleListProps> {
                     </Popover>
                 </li>
             );
+            /* eslint-enable deprecation/deprecation */
         }
 
         return (

packages/core/src/components/context-menu/contextMenu.tsx

@@ -65,6 +65,7 @@ class ContextMenu extends AbstractPureComponent2<IContextMenuProps, IContextMenu
 
         // wrap the popover in a positioned div to make sure it is properly
         // offset on the screen.
+        /* eslint-disable deprecation/deprecation */
         return (
             <div className={Classes.CONTEXT_MENU_POPOVER_TARGET} style={this.state.offset}>
                 <Popover
@@ -85,6 +86,7 @@ class ContextMenu extends AbstractPureComponent2<IContextMenuProps, IContextMenu
                 />
             </div>
         );
+        /* eslint-enable deprecation/deprecation */
     }
 
     public show(menu: JSX.Element, offset: IOffset, onClose?: () => void, isDarkTheme = false) {

packages/core/src/components/menu/menuItem.tsx

@@ -193,6 +193,7 @@ export class MenuItem extends AbstractPureComponent2<IMenuItemProps & React.Anch
         }
         const { disabled, popoverProps } = this.props;
         return (
+            /* eslint-disable-next-line deprecation/deprecation */
             <Popover
                 autoFocus={false}
                 captureDismiss={false}

packages/core/src/components/popover/popover.tsx

@@ -95,6 +95,7 @@ export interface IPopoverState {
     hasDarkParent: boolean;
 }
 
+/** @deprecated use { Popover2 } from "@blueprintjs/popover2" */
 @polyfill
 export class Popover extends AbstractPureComponent2<IPopoverProps, IPopoverState> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Popover`;
@@ -379,6 +380,7 @@ export class Popover extends AbstractPureComponent2<IPopoverProps, IPopoverState
                 [Classes.ACTIVE]: isOpen && !isControlled && !isHoverInteractionKind,
             }),
             // force disable single Tooltip child when popover is open (BLUEPRINT-552)
+            /* eslint-disable-next-line deprecation/deprecation */
             disabled: isOpen && Utils.isElementOfType(rawTarget, Tooltip) ? true : rawTarget.props.disabled,
             tabIndex,
         });

packages/core/src/components/tooltip/tooltip.tsx

@@ -68,6 +68,7 @@ export interface ITooltipProps extends IPopoverSharedProps, IIntentProps {
     transitionDuration?: number;
 }
 
+/** @deprecated use { Tooltip2 } from "@blueprintjs/popover2" */
 @polyfill
 export class Tooltip extends AbstractPureComponent2<ITooltipProps> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Tooltip`;
@@ -79,6 +80,7 @@ export class Tooltip extends AbstractPureComponent2<ITooltipProps> {
         transitionDuration: 100,
     };
 
+    // eslint-disable-next-line deprecation/deprecation
     private popover: Popover | null = null;
 
     public render() {
@@ -91,6 +93,7 @@ export class Tooltip extends AbstractPureComponent2<ITooltipProps> {
         );
 
         return (
+            /* eslint-disable deprecation/deprecation */
             <Popover
                 interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}
                 modifiers={{ arrow: { enabled: !this.props.minimal } }}

packages/core/test/collapsible-list/collapsibleListTests.tsx

@@ -47,6 +47,7 @@ describe("<CollapsibleList>", () => {
             },
             dropdownTarget: <strong />,
         });
+        /* eslint-disable-next-line deprecation/deprecation */
         const popover = list.find(Popover);
         assert.strictEqual(popover.prop("position"), Position.TOP_LEFT);
     });
@@ -59,6 +60,7 @@ describe("<CollapsibleList>", () => {
                 .childAt(0) // li
                 .childAt(0) // Popover
                 .type(),
+            /* eslint-disable-next-line deprecation/deprecation */
             Popover,
         );
     });
@@ -72,6 +74,7 @@ describe("<CollapsibleList>", () => {
                 .last() // li
                 .childAt(0) // Popover
                 .type(),
+            /* eslint-disable-next-line deprecation/deprecation */
             Popover,
         );
     });

packages/core/test/menu/menuItemTests.tsx

@@ -66,6 +66,7 @@ describe("MenuItem", () => {
                 <MenuItem icon="underline" text="Underline" />
             </MenuItem>,
         );
+        /* eslint-disable-next-line deprecation/deprecation */
         assert.isTrue(wrapper.find(Popover).prop("disabled"));
     });
 
@@ -97,11 +98,13 @@ describe("MenuItem", () => {
     it("shouldDismissPopover=false prevents a clicked MenuItem from closing the Popover automatically", () => {
         const handleClose = spy();
         const menu = <MenuItem text="Graph" shouldDismissPopover={false} />;
+        /* eslint-disable deprecation/deprecation */
         const wrapper = mount(
             <Popover content={menu} isOpen={true} onInteraction={handleClose} usePortal={false}>
                 <Button />
             </Popover>,
         );
+        /* eslint-enable deprecation/deprecation */
         wrapper.find(MenuItem).find("a").simulate("click");
         assert.isTrue(handleClose.notCalled);
     });
@@ -119,12 +122,14 @@ describe("MenuItem", () => {
                 <MenuItem text="two" />
             </MenuItem>,
         );
+        /* eslint-disable deprecation/deprecation */
         assert.strictEqual(wrapper.find(Popover).prop("interactionKind"), popoverProps.interactionKind);
         assert.notStrictEqual(
             wrapper.find(Popover).prop("popoverClassName")!.indexOf(popoverProps.popoverClassName),
             0,
         );
         assert.notStrictEqual(wrapper.find(Popover).prop("content"), popoverProps.content);
+        /* eslint-enable deprecation/deprecation */
     });
 
     it("multiline prop determines if long content is ellipsized", () => {
@@ -151,6 +156,7 @@ describe("MenuItem", () => {
 });
 
 function findSubmenu(wrapper: ShallowWrapper<any, any>) {
+    /* eslint-disable-next-line deprecation/deprecation */
     return wrapper.find(Popover).prop("content") as React.ReactElement<
         IMenuProps & { children: Array<React.ReactElement<IMenuItemProps>> }
     >;

packages/core/test/popover/popoverTests.tsx

@@ -31,6 +31,8 @@ import { PopoverArrow } from "../../src/components/popover/popoverArrow";
 import { Tooltip } from "../../src/components/tooltip/tooltip";
 import { findInPortal } from "../utils";
 
+/* eslint-disable deprecation/deprecation */
+
 describe("<Popover>", () => {
     let testsContainerElement: HTMLElement;
     let wrapper: IPopoverWrapper | undefined;

packages/core/test/tooltip/tooltipTests.tsx

@@ -24,6 +24,8 @@ import { Classes, ITooltipProps, Overlay, Popover, Tooltip } from "../../src";
 const TARGET_SELECTOR = `.${Classes.POPOVER_TARGET}`;
 const TOOLTIP_SELECTOR = `.${Classes.TOOLTIP}`;
 
+/* eslint-disable deprecation/deprecation */
+
 describe("<Tooltip>", () => {
     it("propogates class names correctly", () => {
         const tooltip = renderTooltip({

packages/datetime/src/dateInput.tsx

@@ -244,6 +244,7 @@ export class DateInput extends AbstractPureComponent2<IDateInputProps, IDateInpu
         const { inputProps = {}, popoverProps = {} } = this.props;
         const isErrorState = value != null && (!isDateValid(value) || !this.isDateInRange(value));
         return (
+            /* eslint-disable-next-line deprecation/deprecation */
             <Popover
                 isOpen={this.state.isOpen && !this.props.disabled}
                 fill={this.props.fill}
@@ -271,6 +272,7 @@ export class DateInput extends AbstractPureComponent2<IDateInputProps, IDateInpu
                     onKeyDown={this.handleInputKeyDown}
                     value={dateString}
                 />
+                {/* eslint-disable-next-line deprecation/deprecation */}
             </Popover>
         );
     }

packages/datetime/src/dateRangeInput.tsx

@@ -334,6 +334,7 @@ export class DateRangeInput extends AbstractPureComponent2<IDateRangeInputProps,
         // allow custom props for the popover and each input group, but pass them in an order that
         // guarantees only some props are overridable.
         return (
+            /* eslint-disable-next-line deprecation/deprecation */
             <Popover
                 isOpen={this.state.isOpen}
                 position={Position.BOTTOM_LEFT}
@@ -348,6 +349,7 @@ export class DateRangeInput extends AbstractPureComponent2<IDateRangeInputProps,
                     {this.renderInputGroup(Boundary.START)}
                     {this.renderInputGroup(Boundary.END)}
                 </div>
+                {/* eslint-disable-next-line deprecation/deprecation */}
             </Popover>
         );
     }

packages/datetime/test/dateInputTests.tsx

@@ -71,20 +71,24 @@ describe("<DateInput>", () => {
     it("Popover opens on input focus", () => {
         const wrapper = mount(<DateInput {...DATE_FORMAT} />);
         wrapper.find("input").simulate("focus");
+        /* eslint-disable-next-line deprecation/deprecation */
         assert.isTrue(wrapper.find(Popover).prop("isOpen"));
     });
 
     it("Popover doesn't open if disabled=true", () => {
         const wrapper = mount(<DateInput {...DATE_FORMAT} disabled={true} />);
         wrapper.find("input").simulate("focus");
+        /* eslint-disable-next-line deprecation/deprecation */
         assert.isFalse(wrapper.find(Popover).prop("isOpen"));
     });
 
     it("Popover closes when ESC key pressed", () => {
         const wrapper = mount(<DateInput {...DATE_FORMAT} />);
         wrapper.setState({ isOpen: true });
+        /* eslint-disable-next-line deprecation/deprecation */
         assert.isTrue(wrapper.find(Popover).prop("isOpen"));
         wrapper.find("input").simulate("keydown", { which: Keys.ESCAPE });
+        /* eslint-disable-next-line deprecation/deprecation */
         assert.isFalse(wrapper.find(Popover).prop("isOpen"));
     });
 
@@ -93,28 +97,33 @@ describe("<DateInput>", () => {
         const wrapper = mount(<DateInput {...DATE_FORMAT} defaultValue={defaultValue} />);
         wrapper.find("input").simulate("focus").simulate("blur");
         // First day of month is the only .DayPicker-Day with tabIndex == 0
+        /* eslint-disable-next-line deprecation/deprecation */
         const tabbables = wrapper.find(Popover).find(".DayPicker-Day").filter({ tabIndex: 0 });
         tabbables.simulate("keydown", { key: "Tab" });
         // manually updating wrapper is required with enzyme 3
         // ref: https://github.com/airbnb/enzyme/blob/master/docs/guides/migration-from-2-to-3.md#for-mount-updates-are-sometimes-required-when-they-werent-before
         wrapper.update();
+        /* eslint-disable-next-line deprecation/deprecation */
         assert.isFalse(wrapper.find(Popover).prop("isOpen"));
     });
 
     it("Popover should not close if focus moves to previous day", () => {
         const defaultValue = new Date(2018, Months.FEBRUARY, 6, 15, 0, 0, 0);
         const wrapper = mount(<DateInput {...DATE_FORMAT} defaultValue={defaultValue} />);
         wrapper.find("input").simulate("focus").simulate("blur");
+        /* eslint-disable-next-line deprecation/deprecation */
         const tabbables = wrapper.find(Popover).find(".DayPicker-Day").filter({ tabIndex: 0 });
         const firstDay = tabbables.getDOMNode() as HTMLElement;
         const lastDayOfPrevMonth = wrapper
+            /* eslint-disable-next-line deprecation/deprecation */
             .find(Popover)
             .find(".DayPicker-Body > .DayPicker-Week .DayPicker-Day--outside")
             .last();
         const relatedTarget = lastDayOfPrevMonth.getDOMNode();
         const event = createFocusEvent("blur", relatedTarget);
         firstDay.dispatchEvent(event);
         wrapper.update();
+        /* eslint-disable-next-line deprecation/deprecation */
         assert.isTrue(wrapper.find(Popover).prop("isOpen"));
     });
 
@@ -124,6 +133,7 @@ describe("<DateInput>", () => {
         root.setState({ isOpen: true });
         root.find("input").simulate("focus").simulate("blur");
         changeSelect(Classes.DATEPICKER_MONTH_SELECT, Months.FEBRUARY);
+        /* eslint-disable-next-line deprecation/deprecation */
         assert.isTrue(root.find(Popover).prop("isOpen"));
     });
 
@@ -133,6 +143,7 @@ describe("<DateInput>", () => {
         root.setState({ isOpen: true });
         root.find("input").simulate("focus").simulate("blur");
         changeSelect(Classes.DATEPICKER_YEAR_SELECT, 2016);
+        /* eslint-disable-next-line deprecation/deprecation */
         assert.isTrue(root.find(Popover).prop("isOpen"));
     });
 
@@ -149,6 +160,7 @@ describe("<DateInput>", () => {
         root.setState({ isOpen: true }).update();
         changeSelect(Classes.DATEPICKER_MONTH_SELECT, Months.MARCH);
         root.find(`.${Classes.TIMEPICKER_ARROW_BUTTON}.${Classes.TIMEPICKER_HOUR}`).first().simulate("click");
+        /* eslint-disable-next-line deprecation/deprecation */
         assert.isTrue(root.find(Popover).prop("isOpen"));
     });
 
@@ -165,6 +177,7 @@ describe("<DateInput>", () => {
         root.setState({ isOpen: true }).update();
         changeSelect(Classes.DATEPICKER_YEAR_SELECT, 2019);
         root.find(`.${Classes.TIMEPICKER_ARROW_BUTTON}.${Classes.TIMEPICKER_HOUR}`).first().simulate("click");
+        /* eslint-disable-next-line deprecation/deprecation */
         assert.isTrue(root.find(Popover).prop("isOpen"));
     });
 
@@ -297,6 +310,7 @@ describe("<DateInput>", () => {
         );
         wrapper.find("input").simulate("focus");
 
+        /* eslint-disable-next-line deprecation/deprecation */
         const popover = wrapper.find(Popover);
         assert.strictEqual(popover.prop("autoFocus"), false, "autoFocus cannot be changed");
         assert.notStrictEqual(popover.prop("content"), "fail", "content cannot be changed");
@@ -394,6 +408,7 @@ describe("<DateInput>", () => {
                 />,
             );
             changeSelect(Classes.DATEPICKER_MONTH_SELECT, Months.FEBRUARY);
+            /* eslint-disable-next-line deprecation/deprecation */
             assert.isTrue(root.find(Popover).prop("isOpen"));
         });
 
@@ -407,10 +422,12 @@ describe("<DateInput>", () => {
 
             // try typing a new time
             wrapper.find(`.${Classes.TIMEPICKER_MILLISECOND}`).simulate("change", { target: { value: "1" } });
+            /* eslint-disable-next-line deprecation/deprecation */
             assert.isTrue(wrapper.find(Popover).prop("isOpen"));
 
             // try keyboard-incrementing to a new time
             wrapper.find(`.${Classes.TIMEPICKER_MILLISECOND}`).simulate("keydown", { which: Keys.ARROW_UP });
+            /* eslint-disable-next-line deprecation/deprecation */
             assert.isTrue(wrapper.find(Popover).prop("isOpen"));
         });