@khanacademy/wonder-blocks-tooltip 1.3.1 → 1.3.5

package/dist/es/index.js

@@ -977,11 +977,12 @@ class TooltipPopper extends Component {
     } = this.props;
     return /*#__PURE__*/createElement(Popper, {
       referenceElement: anchorElement,
+      strategy: "fixed",
       placement: placement,
       modifiers: [{
         name: "preventOverflow",
         options: {
-          rootBoundary: "document"
+          rootBoundary: "viewport"
         }
       }]
     }, props => this._renderPositionedContent(props));

package/dist/index.js

@@ -669,11 +669,12 @@ class TooltipPopper extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     } = this.props;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_popper__WEBPACK_IMPORTED_MODULE_1__["Popper"], {
       referenceElement: anchorElement,
+      strategy: "fixed",
       placement: placement,
       modifiers: [{
         name: "preventOverflow",
         options: {
-          rootBoundary: "document"
+          rootBoundary: "viewport"
         }
       }]
     }, props => this._renderPositionedContent(props));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tooltip",
-  "version": "1.3.1",
+  "version": "1.3.5",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,23 +15,23 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-color": "^1.1.19",
-    "@khanacademy/wonder-blocks-core": "^3.1.5",
-    "@khanacademy/wonder-blocks-layout": "^1.4.4",
-    "@khanacademy/wonder-blocks-modal": "^2.1.43",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.4",
-    "@khanacademy/wonder-blocks-typography": "^1.1.26"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.0.0",
+    "@khanacademy/wonder-blocks-layout": "^1.4.6",
+    "@khanacademy/wonder-blocks-modal": "^2.1.45",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-typography": "^1.1.28"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
     "aphrodite": "^1.2.5",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
     "react-popper": "^2.0.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
+    "wb-dev-build-settings": "^0.2.0"
   },
-  "gitHead": "9a9cc04bf2bbfb425f991a347b4f8b0d0d56e120"
+  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
 }

package/src/components/__tests__/tooltip-anchor.test.js

@@ -128,7 +128,7 @@ describe("TooltipAnchor", () => {
             });
 
             // Act
-            const result = ref && ref.getAttribute("tabindex");
+            const result = ref?.getAttribute("tabindex");
 
             // Assert
             expect(result).toBe("0");
@@ -150,7 +150,7 @@ describe("TooltipAnchor", () => {
             });
 
             // Act
-            const result = ref && ref.getAttribute("tabindex");
+            const result = ref?.getAttribute("tabindex");
 
             // Assert
             expect(result).toBe("-1");
@@ -174,7 +174,7 @@ describe("TooltipAnchor", () => {
             });
 
             // Act
-            const result = ref && ref.getAttribute("tabindex");
+            const result = ref?.getAttribute("tabindex");
 
             // Assert
             expect(result).toBeNull();
@@ -197,11 +197,11 @@ describe("TooltipAnchor", () => {
             });
 
             // Act
-            const tabindex = ref && ref.getAttribute("tabindex");
+            const tabindex = ref?.getAttribute("tabindex");
             expect(tabindex).toBe("0");
 
-            wrapper && wrapper.setProps({force: false});
-            const result = ref && ref.getAttribute("tabindex");
+            wrapper?.setProps({force: false});
+            const result = ref?.getAttribute("tabindex");
 
             // Assert
             expect(result).toBeNull();
@@ -224,7 +224,7 @@ describe("TooltipAnchor", () => {
             });
 
             // Act
-            const result = ref && ref.getAttribute("tabindex");
+            const result = ref?.getAttribute("tabindex");
 
             // Assert
             expect(result).not.toBeNull();
@@ -237,6 +237,7 @@ describe("TooltipAnchor", () => {
             const {default: ActiveTracker} = await import(
                 "../../util/active-tracker.js"
             );
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             // Let's tell the tooltip it isn't stealing and therefore it should
             // be using a delay to show the tooltip.
             // Flow doesn't know this is a mock
@@ -265,10 +266,10 @@ describe("TooltipAnchor", () => {
             // whether focused directly or a child is focused). We have to
             // fake directly because there's no real browser here handling
             // focus and real events.
-            ref && ref.dispatchEvent(new FocusEvent("focusin"));
+            ref?.dispatchEvent(new FocusEvent("focusin"));
             // Check that we didn't go active before the delay
             expect(activeState).toBe(false);
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
@@ -310,7 +311,7 @@ describe("TooltipAnchor", () => {
             // whether focused directly or a child is focused). We have to
             // fake directly because there's no real browser here handling
             // focus and real events.
-            ref && ref.dispatchEvent(new FocusEvent("focusin"));
+            ref?.dispatchEvent(new FocusEvent("focusin"));
 
             // Assert
             expect(activeState).toBe(true);
@@ -320,6 +321,7 @@ describe("TooltipAnchor", () => {
     describe("loses keyboard focus", () => {
         test("active state was not stolen, active is set to false with delay", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             let activeState = false;
             const ref = await new Promise((resolve) => {
                 const nodes = (
@@ -335,8 +337,8 @@ describe("TooltipAnchor", () => {
                 mount(nodes);
             });
 
-            ref && ref.dispatchEvent(new FocusEvent("focusin"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new FocusEvent("focusin"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
@@ -344,9 +346,9 @@ describe("TooltipAnchor", () => {
             expect(activeState).toBe(true);
 
             // Act
-            ref && ref.dispatchEvent(new FocusEvent("focusout"));
+            ref?.dispatchEvent(new FocusEvent("focusout"));
             expect(activeState).toBe(true);
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipDisappearanceDelay,
             );
@@ -358,6 +360,7 @@ describe("TooltipAnchor", () => {
 
         test("active state was not stolen, gives up active state", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             const {default: ActiveTracker} = await import(
                 "../../util/active-tracker.js"
             );
@@ -380,8 +383,8 @@ describe("TooltipAnchor", () => {
                 mount(nodes);
             });
 
-            ref && ref.dispatchEvent(new FocusEvent("focusin"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new FocusEvent("focusin"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
@@ -389,9 +392,9 @@ describe("TooltipAnchor", () => {
             expect(activeState).toBe(true);
 
             // Act
-            ref && ref.dispatchEvent(new FocusEvent("focusout"));
+            ref?.dispatchEvent(new FocusEvent("focusout"));
             expect(activeState).toBe(true);
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipDisappearanceDelay,
             );
@@ -403,6 +406,7 @@ describe("TooltipAnchor", () => {
 
         test("active state was stolen, active is set to false immediately", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             let wrapper;
             let activeState = false;
             const ref = await new Promise((resolve) => {
@@ -419,8 +423,8 @@ describe("TooltipAnchor", () => {
                 wrapper = mount(nodes);
             });
 
-            ref && ref.dispatchEvent(new FocusEvent("focusin"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new FocusEvent("focusin"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
@@ -428,8 +432,8 @@ describe("TooltipAnchor", () => {
             expect(activeState).toBe(true);
 
             // Act
-            ref && ref.dispatchEvent(new FocusEvent("focusout"));
-            wrapper && wrapper.instance().activeStateStolen();
+            ref?.dispatchEvent(new FocusEvent("focusout"));
+            wrapper?.instance().activeStateStolen();
 
             // Assert
             expect(activeState).toBe(false);
@@ -437,6 +441,7 @@ describe("TooltipAnchor", () => {
 
         test("active state was stolen, so it does not have it to give up", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             const {default: ActiveTracker} = await import(
                 "../../util/active-tracker.js"
             );
@@ -459,8 +464,8 @@ describe("TooltipAnchor", () => {
                 );
                 wrapper = mount(nodes);
             });
-            ref && ref.dispatchEvent(new FocusEvent("focusin"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new FocusEvent("focusin"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
@@ -468,8 +473,8 @@ describe("TooltipAnchor", () => {
             expect(activeState).toBe(true);
 
             // Act
-            ref && ref.dispatchEvent(new FocusEvent("focusout"));
-            wrapper && wrapper.instance().activeStateStolen();
+            ref?.dispatchEvent(new FocusEvent("focusout"));
+            wrapper?.instance().activeStateStolen();
 
             // Assert
             expect(mockTracker.giveup).not.toHaveBeenCalled();
@@ -477,6 +482,7 @@ describe("TooltipAnchor", () => {
 
         test("if hovered, remains active", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             let activeState = false;
             const ref = await new Promise((resolve) => {
                 const nodes = (
@@ -491,30 +497,29 @@ describe("TooltipAnchor", () => {
                 );
                 mount(nodes);
             });
-            ref && ref.dispatchEvent(new FocusEvent("focusin"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new FocusEvent("focusin"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
             jest.runOnlyPendingTimers();
-            // Flow doesn't know we added jest mocks to this
-            // $FlowFixMe[prop-missing]
-            setTimeout.mockClear();
-            ref && ref.dispatchEvent(new MouseEvent("mouseenter"));
+            timeoutSpy.mockClear();
+            ref?.dispatchEvent(new MouseEvent("mouseenter"));
 
             // Act
-            ref && ref.dispatchEvent(new FocusEvent("focusout"));
+            ref?.dispatchEvent(new FocusEvent("focusout"));
 
             // Assert
             // Make sure that we're not delay hiding as well.
             expect(activeState).toBe(true);
-            expect(setTimeout).not.toHaveBeenCalled();
+            expect(timeoutSpy).not.toHaveBeenCalled();
         });
     });
 
     describe("is hovered", () => {
         test("active state was not stolen, delays set active", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             const {default: ActiveTracker} = await import(
                 "../../util/active-tracker.js"
             );
@@ -541,10 +546,10 @@ describe("TooltipAnchor", () => {
             });
 
             // Act
-            ref && ref.dispatchEvent(new MouseEvent("mouseenter"));
+            ref?.dispatchEvent(new MouseEvent("mouseenter"));
             // Check that we didn't go active before the delay
             expect(activeState).toBe(false);
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
@@ -582,7 +587,7 @@ describe("TooltipAnchor", () => {
             });
 
             // Act
-            ref && ref.dispatchEvent(new MouseEvent("mouseenter"));
+            ref?.dispatchEvent(new MouseEvent("mouseenter"));
 
             // Assert
             expect(activeState).toBe(true);
@@ -592,6 +597,7 @@ describe("TooltipAnchor", () => {
     describe("is unhovered", () => {
         test("active state was not stolen, active is set to false with delay", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             let activeState = false;
             const ref = await new Promise((resolve) => {
                 const nodes = (
@@ -606,8 +612,8 @@ describe("TooltipAnchor", () => {
                 );
                 mount(nodes);
             });
-            ref && ref.dispatchEvent(new MouseEvent("mouseenter"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new MouseEvent("mouseenter"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
@@ -615,9 +621,9 @@ describe("TooltipAnchor", () => {
             expect(activeState).toBe(true);
 
             // Act
-            ref && ref.dispatchEvent(new MouseEvent("mouseleave"));
+            ref?.dispatchEvent(new MouseEvent("mouseleave"));
             expect(activeState).toBe(true);
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipDisappearanceDelay,
             );
@@ -629,6 +635,7 @@ describe("TooltipAnchor", () => {
 
         test("active state was not stolen, gives up active state", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             const {default: ActiveTracker} = await import(
                 "../../util/active-tracker.js"
             );
@@ -649,8 +656,8 @@ describe("TooltipAnchor", () => {
                 );
                 mount(nodes);
             });
-            ref && ref.dispatchEvent(new MouseEvent("mouseenter"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new MouseEvent("mouseenter"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
@@ -658,9 +665,9 @@ describe("TooltipAnchor", () => {
             expect(activeState).toBe(true);
 
             // Act
-            ref && ref.dispatchEvent(new MouseEvent("mouseleave"));
+            ref?.dispatchEvent(new MouseEvent("mouseleave"));
             expect(activeState).toBe(true);
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipDisappearanceDelay,
             );
@@ -672,6 +679,7 @@ describe("TooltipAnchor", () => {
 
         test("active state was stolen, active is set to false immediately", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             let wrapper;
             let activeState = false;
             const ref = await new Promise((resolve) => {
@@ -687,8 +695,8 @@ describe("TooltipAnchor", () => {
                 );
                 wrapper = mount(nodes);
             });
-            ref && ref.dispatchEvent(new MouseEvent("mouseenter"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new MouseEvent("mouseenter"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
@@ -696,8 +704,8 @@ describe("TooltipAnchor", () => {
             expect(activeState).toBe(true);
 
             // Act
-            ref && ref.dispatchEvent(new MouseEvent("mouseleave"));
-            wrapper && wrapper.instance().activeStateStolen();
+            ref?.dispatchEvent(new MouseEvent("mouseleave"));
+            wrapper?.instance().activeStateStolen();
 
             // Assert
             expect(activeState).toBe(false);
@@ -705,6 +713,7 @@ describe("TooltipAnchor", () => {
 
         test("active state was stolen, so it does not have it to give up", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             const {default: ActiveTracker} = await import(
                 "../../util/active-tracker.js"
             );
@@ -727,8 +736,8 @@ describe("TooltipAnchor", () => {
                 );
                 wrapper = mount(nodes);
             });
-            ref && ref.dispatchEvent(new MouseEvent("mouseenter"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new MouseEvent("mouseenter"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
@@ -736,8 +745,8 @@ describe("TooltipAnchor", () => {
             expect(activeState).toBe(true);
 
             // Act
-            ref && ref.dispatchEvent(new MouseEvent("mouseleave"));
-            wrapper && wrapper.instance().activeStateStolen();
+            ref?.dispatchEvent(new MouseEvent("mouseleave"));
+            wrapper?.instance().activeStateStolen();
 
             // Assert
             expect(mockTracker.giveup).not.toHaveBeenCalled();
@@ -745,6 +754,7 @@ describe("TooltipAnchor", () => {
 
         test("if focused, remains active", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             let activeState = false;
             const ref = await new Promise((resolve) => {
                 const nodes = (
@@ -759,30 +769,29 @@ describe("TooltipAnchor", () => {
                 );
                 mount(nodes);
             });
-            ref && ref.dispatchEvent(new MouseEvent("mouseenter"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new MouseEvent("mouseenter"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
             jest.runOnlyPendingTimers();
-            // Flow doesn't know we added jest mocks to this
-            // $FlowFixMe[prop-missing]
-            setTimeout.mockClear();
-            ref && ref.dispatchEvent(new FocusEvent("focusin"));
+            timeoutSpy.mockClear();
+            ref?.dispatchEvent(new FocusEvent("focusin"));
 
             // Act
-            ref && ref.dispatchEvent(new MouseEvent("mouseleave"));
+            ref?.dispatchEvent(new MouseEvent("mouseleave"));
 
             // Assert
             // Make sure that we're not delay hiding as well.
             expect(activeState).toBe(true);
-            expect(setTimeout).not.toHaveBeenCalled();
+            expect(timeoutSpy).not.toHaveBeenCalled();
         });
     });
 
     describe("dismiss behavior", () => {
         test("subscribes to keydown event on active", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             const spy = jest.spyOn(document, "addEventListener");
             const ref = await new Promise((resolve) => {
                 const nodes = (
@@ -797,8 +806,8 @@ describe("TooltipAnchor", () => {
             });
 
             // Act
-            ref && ref.dispatchEvent(new MouseEvent("mouseenter"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new MouseEvent("mouseenter"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
@@ -811,6 +820,7 @@ describe("TooltipAnchor", () => {
 
         test("does not subscribe to keydown event if already active", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             const spy = jest.spyOn(document, "addEventListener");
             const ref = await new Promise((resolve) => {
                 const nodes = (
@@ -824,8 +834,8 @@ describe("TooltipAnchor", () => {
                 mount(nodes);
             });
 
-            ref && ref.dispatchEvent(new KeyboardEvent("focusin"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new KeyboardEvent("focusin"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
@@ -835,7 +845,7 @@ describe("TooltipAnchor", () => {
             spy.mockClear();
 
             // Act
-            ref && ref.dispatchEvent(new MouseEvent("mouseenter"));
+            ref?.dispatchEvent(new MouseEvent("mouseenter"));
 
             // Assert
             expect(spy).not.toHaveBeenCalled();
@@ -843,6 +853,7 @@ describe("TooltipAnchor", () => {
 
         test("unsubscribes from keydown event on inactive", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             const spy = jest.spyOn(document, "removeEventListener");
             const ref = await new Promise((resolve) => {
                 const nodes = (
@@ -856,16 +867,16 @@ describe("TooltipAnchor", () => {
                 mount(nodes);
             });
 
-            ref && ref.dispatchEvent(new KeyboardEvent("focusin"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new KeyboardEvent("focusin"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
             jest.runOnlyPendingTimers();
 
             // Act
-            ref && ref.dispatchEvent(new KeyboardEvent("focusout"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new KeyboardEvent("focusout"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipDisappearanceDelay,
             );
@@ -878,6 +889,7 @@ describe("TooltipAnchor", () => {
 
         test("unsubscribes from keydown event on unmount", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             let wrapper;
             const spy = jest.spyOn(document, "removeEventListener");
             const ref = await new Promise((resolve) => {
@@ -892,15 +904,15 @@ describe("TooltipAnchor", () => {
                 wrapper = mount(nodes);
             });
 
-            ref && ref.dispatchEvent(new KeyboardEvent("focusin"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new KeyboardEvent("focusin"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
             jest.runOnlyPendingTimers();
 
             // Act
-            wrapper && wrapper.unmount();
+            wrapper?.unmount();
 
             // Assert
             expect(spy).toHaveBeenCalledTimes(1);
@@ -909,6 +921,7 @@ describe("TooltipAnchor", () => {
 
         test("when active, escape dismisses tooltip", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             let activeState = false;
             const ref = await new Promise((resolve) => {
                 const nodes = (
@@ -924,20 +937,22 @@ describe("TooltipAnchor", () => {
                 mount(nodes);
             });
 
-            ref && ref.dispatchEvent(new KeyboardEvent("focusin"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new KeyboardEvent("focusin"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
             jest.runOnlyPendingTimers();
             const event: KeyboardEvent = (document.createEvent("Event"): any);
+            // $FlowIgnore[cannot-write]
             event.key = "Escape";
+            // $FlowIgnore[cannot-write]
             event.which = 27;
             event.initEvent("keyup", true, true);
 
             // Act
             document.dispatchEvent(event);
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipDisappearanceDelay,
             );
@@ -949,6 +964,7 @@ describe("TooltipAnchor", () => {
 
         test("when active, escape stops event propagation", async () => {
             // Arrange
+            const timeoutSpy = jest.spyOn(global, "setTimeout");
             const ref = await new Promise((resolve) => {
                 const nodes = (
                     <TooltipAnchor
@@ -961,20 +977,21 @@ describe("TooltipAnchor", () => {
                 mount(nodes);
             });
 
-            ref && ref.dispatchEvent(new KeyboardEvent("focusin"));
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            ref?.dispatchEvent(new KeyboardEvent("focusin"));
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipAppearanceDelay,
             );
             jest.runOnlyPendingTimers();
             const event: KeyboardEvent = (document.createEvent("Event"): any);
             const spyOnStopPropagation = jest.spyOn(event, "stopPropagation");
+            // $FlowIgnore[cannot-write]
             event.key = "Escape";
             event.initEvent("keyup", true, true);
 
             // Act
             document.dispatchEvent(event);
-            expect(setTimeout).toHaveBeenLastCalledWith(
+            expect(timeoutSpy).toHaveBeenLastCalledWith(
                 expect.any(Function),
                 TooltipDisappearanceDelay,
             );

package/src/components/__tests__/tooltip.integration.test.js

@@ -2,8 +2,6 @@
 import * as React from "react";
 
 import {render, screen, fireEvent} from "@testing-library/react";
-// eslint-disable-next-line import/no-unassigned-import
-import "@testing-library/jest-dom/extend-expect";
 import userEvent from "@testing-library/user-event";
 
 import Tooltip from "../tooltip.js";
@@ -56,6 +54,8 @@ describe("tooltip integration tests", () => {
         const anchor = screen.getByText("an anchor");
         userEvent.hover(anchor);
         // hover on bubble to keep it active
+        // Need to run the timers or we won't get the bubble wrapper to show.
+        jest.runAllTimers();
         const bubbleWrapper = await screen.findByRole("tooltip");
         userEvent.unhover(anchor);
 

package/src/components/tooltip-anchor.js

@@ -77,7 +77,8 @@ const TRACKER = new ActiveTracker();
 
 export default class TooltipAnchor
     extends React.Component<Props, State>
-    implements IActiveTrackerSubscriber {
+    implements IActiveTrackerSubscriber
+{
     _weSetFocusivity: ?boolean;
     _anchorNode: ?Element;
     _focused: boolean;

package/src/components/tooltip-popper.js

@@ -84,12 +84,13 @@ export default class TooltipPopper extends React.Component<Props> {
         return (
             <Popper
                 referenceElement={anchorElement}
+                strategy="fixed"
                 placement={placement}
                 modifiers={[
                     {
                         name: "preventOverflow",
                         options: {
-                            rootBoundary: "document",
+                            rootBoundary: "viewport",
                         },
                     },
                 ]}

package/src/components/tooltip-tail.js

@@ -363,12 +363,8 @@ export default class TooltipTail extends React.Component<Props> {
     }
 
     _renderArrow(): React.Node {
-        const {
-            trimlinePoints,
-            points,
-            height,
-            width,
-        } = this._calculateDimensionsFromPlacement();
+        const {trimlinePoints, points, height, width} =
+            this._calculateDimensionsFromPlacement();
 
         const {color} = this.props;
 

package/src/components/tooltip.stories.js

@@ -9,11 +9,11 @@ import type {Placement} from "@khanacademy/wonder-blocks-tooltip";
 import type {StoryComponentType} from "@storybook/react";
 
 export default {
-    title: "Tooltip",
+    title: "Floating/Tooltip",
 };
 
 const BaseTooltipExample = ({placement}: {|placement: Placement|}) => {
-    const inputRef = React.useRef<null | HTMLElement>(null);
+    const inputRef = React.useRef(null);
     React.useEffect(() => {
         if (inputRef.current) {
             inputRef.current.focus();

package/src/util/ref-tracker.js

@@ -9,12 +9,10 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 import type {PopperChildrenProps} from "react-popper";
-import type {getRefFn} from "./types.js";
 
 type PopperRef = $PropertyType<PopperChildrenProps, "ref">;
 
 export default class RefTracker {
-    updateRef: getRefFn;
     _lastRef: ?HTMLElement;
     _targetFn: ?(?HTMLElement) => void;