@khanacademy/wonder-blocks-tooltip 1.3.3 → 1.3.7

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @khanacademy/wonder-blocks-tooltip
+
+## 1.3.7
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.2.1
+-   @khanacademy/wonder-blocks-layout@1.4.7
+-   @khanacademy/wonder-blocks-modal@2.2.1
+-   @khanacademy/wonder-blocks-typography@1.1.29
+
+## 1.3.6
+
+### Patch Changes
+
+-   Updated dependencies [e7bbf149]
+    -   @khanacademy/wonder-blocks-modal@2.2.0

package/dist/es/index.js

@@ -1,8 +1,8 @@
-import { Component, createElement, cloneElement, Fragment } from 'react';
-import { findDOMNode, createPortal } from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { Text as Text$1, View, UniqueIDProvider } from '@khanacademy/wonder-blocks-core';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
-import { css, StyleSheet } from 'aphrodite';
+import { StyleSheet, css } from 'aphrodite';
 import Colors from '@khanacademy/wonder-blocks-color';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 import _extends from '@babel/runtime/helpers/extends';
@@ -118,7 +118,7 @@ const TooltipDisappearanceDelay = 75;
  * positioning and displaying tooltips.
  */
 const TRACKER = new ActiveTracker();
-class TooltipAnchor extends Component {
+class TooltipAnchor extends React.Component {
   constructor(props) {
     super(props);
 
@@ -182,7 +182,7 @@ class TooltipAnchor extends Component {
   }
 
   componentDidMount() {
-    const anchorNode = findDOMNode(this); // This should never happen, but we have this check here to make flow
+    const anchorNode = ReactDOM.findDOMNode(this); // This should never happen, but we have this check here to make flow
     // happy and ensure that if this does happen, we'll know about it.
 
     if (anchorNode instanceof Text) {
@@ -327,13 +327,13 @@ class TooltipAnchor extends Component {
     const {
       children
     } = this.props;
-    return typeof children === "string" ? /*#__PURE__*/createElement(Text$1, null, children) : children;
+    return typeof children === "string" ? /*#__PURE__*/React.createElement(Text$1, null, children) : children;
   }
 
   _renderAccessibleChildren(ids) {
     const anchorableChildren = this._renderAnchorableChildren();
 
-    return /*#__PURE__*/cloneElement(anchorableChildren, {
+    return /*#__PURE__*/React.cloneElement(anchorableChildren, {
       "aria-describedby": ids.get(TooltipAnchor.ariaContentId)
     });
   }
@@ -359,7 +359,7 @@ TooltipAnchor.ariaContentId = "aria-content";
 // TODO(somewhatabstract): Replace this really basic unique ID work with
 // something SSR-friendly and more robust.
 let tempIdCounter = 0;
-class TooltipTail extends Component {
+class TooltipTail extends React.Component {
   _calculateDimensionsFromPlacement() {
     const {
       placement
@@ -476,7 +476,7 @@ class TooltipTail extends Component {
       offsetShadowX
     } = position;
     const dropShadowFilterId = `tooltip-dropshadow-${placement}-${tempIdCounter++}`;
-    return [/*#__PURE__*/createElement("filter", {
+    return [/*#__PURE__*/React.createElement("filter", {
       key: "filter",
       id: dropShadowFilterId // Height and width tell the filter how big of a canvas to
       // draw based on its parent size. i.e. 2 times bigger.
@@ -491,10 +491,10 @@ class TooltipTail extends Component {
       ,
       x: x,
       y: y
-    }, /*#__PURE__*/createElement("feGaussianBlur", {
+    }, /*#__PURE__*/React.createElement("feGaussianBlur", {
       in: "SourceAlpha",
       stdDeviation: Spacing.xxSmall_6 / 2
-    }), /*#__PURE__*/createElement("feComponentTransfer", null, /*#__PURE__*/createElement("feFuncA", {
+    }), /*#__PURE__*/React.createElement("feComponentTransfer", null, /*#__PURE__*/React.createElement("feFuncA", {
       type: "linear",
       slope: "0.3"
     }))),
@@ -512,10 +512,10 @@ class TooltipTail extends Component {
      *
      * See styles below for why we offset the arrow.
      */
-    createElement("g", {
+    React.createElement("g", {
       key: "dropshadow",
       transform: `translate(${offsetShadowX},5.5)`
-    }, /*#__PURE__*/createElement("polyline", {
+    }, /*#__PURE__*/React.createElement("polyline", {
       fill: Colors.offBlack16,
       points: points.join(" "),
       stroke: Colors.offBlack32,
@@ -656,23 +656,23 @@ class TooltipTail extends Component {
     const {
       color
     } = this.props;
-    return /*#__PURE__*/createElement("svg", {
-      className: css(styles.arrow),
+    return /*#__PURE__*/React.createElement("svg", {
+      className: css(styles$2.arrow),
       style: this._getArrowStyle(),
       width: width,
       height: height
-    }, this._maybeRenderDropshadow(points), /*#__PURE__*/createElement("polyline", {
+    }, this._maybeRenderDropshadow(points), /*#__PURE__*/React.createElement("polyline", {
       fill: Colors[color],
       stroke: Colors[color],
       points: points.join(" ")
-    }), /*#__PURE__*/createElement("polyline", {
+    }), /*#__PURE__*/React.createElement("polyline", {
       // Redraw the stroke on top of the background color,
       // so that the ends aren't extra dark where they meet
       // the border of the tooltip.
       fill: Colors[color],
       points: points.join(" "),
       stroke: Colors.offBlack16
-    }), /*#__PURE__*/createElement("polyline", {
+    }), /*#__PURE__*/React.createElement("polyline", {
       stroke: Colors[color],
       points: trimlinePoints.join(" ")
     }));
@@ -684,8 +684,8 @@ class TooltipTail extends Component {
       placement,
       updateRef
     } = this.props;
-    return /*#__PURE__*/createElement(View, {
-      style: [styles.tailContainer, _extends({}, offset), this._getContainerStyle()],
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles$2.tailContainer, _extends({}, offset), this._getContainerStyle()],
       "data-placement": placement,
       ref: updateRef
     }, this._renderArrow());
@@ -706,7 +706,7 @@ const DISTANCE_FROM_ANCHOR = Spacing.xSmall_8;
 const MIN_DISTANCE_FROM_CORNERS = Spacing.xSmall_8;
 const ARROW_WIDTH = Spacing.large_24;
 const ARROW_HEIGHT = Spacing.small_12;
-const styles = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   /**
    * Container
    */
@@ -724,7 +724,7 @@ const styles = StyleSheet.create({
   }
 });
 
-class TooltipBubble extends Component {
+class TooltipBubble extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -758,7 +758,7 @@ class TooltipBubble extends Component {
       updateTailRef,
       tailOffset
     } = this.props;
-    return /*#__PURE__*/createElement(View, {
+    return /*#__PURE__*/React.createElement(View, {
       id: id,
       role: "tooltip",
       "data-placement": placement,
@@ -766,9 +766,9 @@ class TooltipBubble extends Component {
       onMouseLeave: this.handleMouseLeave,
       ref: updateBubbleRef,
       style: [isReferenceHidden && styles$1.hide, styles$1.bubble, styles$1[`content-${placement}`], style]
-    }, /*#__PURE__*/createElement(View, {
+    }, /*#__PURE__*/React.createElement(View, {
       style: styles$1.content
-    }, children), /*#__PURE__*/createElement(TooltipTail, {
+    }, children), /*#__PURE__*/React.createElement(TooltipTail, {
       updateRef: updateTailRef,
       placement: placement,
       offset: tailOffset
@@ -823,7 +823,7 @@ const styles$1 = StyleSheet.create({
  * This component is used to provide the content that is to be rendered in the
  * tooltip bubble.
  */
-class TooltipContent extends Component {
+class TooltipContent extends React.Component {
   _renderTitle() {
     const {
       title
@@ -831,7 +831,7 @@ class TooltipContent extends Component {
 
     if (title) {
       if (typeof title === "string") {
-        return /*#__PURE__*/createElement(HeadingSmall, null, title);
+        return /*#__PURE__*/React.createElement(HeadingSmall, null, title);
       } else {
         return title;
       }
@@ -846,7 +846,7 @@ class TooltipContent extends Component {
     } = this.props;
 
     if (typeof children === "string") {
-      return /*#__PURE__*/createElement(LabelMedium, null, children);
+      return /*#__PURE__*/React.createElement(LabelMedium, null, children);
     } else {
       return children;
     }
@@ -857,16 +857,16 @@ class TooltipContent extends Component {
 
     const children = this._renderChildren();
 
-    const containerStyle = title ? styles$2.withTitle : styles$2.withoutTitle;
-    return /*#__PURE__*/createElement(View, {
+    const containerStyle = title ? styles.withTitle : styles.withoutTitle;
+    return /*#__PURE__*/React.createElement(View, {
       style: containerStyle
-    }, title, title && children && /*#__PURE__*/createElement(Strut, {
+    }, title, title && children && /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }), children);
   }
 
 }
-const styles$2 = StyleSheet.create({
+const styles = StyleSheet.create({
   withoutTitle: {
     padding: `10px ${Spacing.medium_16}px`
   },
@@ -888,7 +888,7 @@ class RefTracker {
         // We only want to update the reference if it is
         // actually changed. Otherwise, we can trigger another render that
         // would then update the reference again and just keep looping.
-        const domNode = findDOMNode(ref);
+        const domNode = ReactDOM.findDOMNode(ref);
 
         if (domNode instanceof HTMLElement && domNode !== this._lastRef) {
           this._lastRef = domNode;
@@ -918,7 +918,7 @@ class RefTracker {
  * This component is a light wrapper for react-popper, allowing us to position
  * and control the tooltip bubble location and visibility as we need.
  */
-class TooltipPopper extends Component {
+class TooltipPopper extends React.Component {
   constructor(...args) {
     super(...args);
     this._bubbleRefTracker = new RefTracker();
@@ -975,7 +975,7 @@ class TooltipPopper extends Component {
       anchorElement,
       placement
     } = this.props;
-    return /*#__PURE__*/createElement(Popper, {
+    return /*#__PURE__*/React.createElement(Popper, {
       referenceElement: anchorElement,
       strategy: "fixed",
       placement: placement,
@@ -1009,7 +1009,7 @@ class TooltipPopper extends Component {
  *     - TooltipTail (renders the callout tail and shadow that points from the
  *                     callout to the anchor content)
  */
-class Tooltip extends Component {
+class Tooltip extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -1034,11 +1034,11 @@ class Tooltip extends Component {
     } = this.props;
 
     if (typeof content === "string") {
-      return /*#__PURE__*/createElement(TooltipContent, {
+      return /*#__PURE__*/React.createElement(TooltipContent, {
         title: title
       }, content);
     } else if (title) {
-      return /*#__PURE__*/cloneElement(content, {
+      return /*#__PURE__*/React.cloneElement(content, {
         title
       });
     } else {
@@ -1059,10 +1059,10 @@ class Tooltip extends Component {
     const {
       placement
     } = this.props;
-    return /*#__PURE__*/createElement(TooltipPopper, {
+    return /*#__PURE__*/React.createElement(TooltipPopper, {
       anchorElement: this.state.anchorElement,
       placement: placement
-    }, props => /*#__PURE__*/createElement(TooltipBubble, {
+    }, props => /*#__PURE__*/React.createElement(TooltipBubble, {
       id: bubbleId,
       style: props.style,
       tailOffset: props.tailOffset,
@@ -1096,14 +1096,14 @@ class Tooltip extends Component {
     const popperHost = this._getHost(); // TODO(kevinb): update to use ReactPopper's React 16-friendly syntax
 
 
-    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(TooltipAnchor, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipAnchor, {
       forceAnchorFocusivity: forceAnchorFocusivity,
       anchorRef: r => this._updateAnchorElement(r),
       onActiveChanged: active => this.setState({
         active
       }),
       ids: ids
-    }, children), popperHost && (active || activeBubble) && /*#__PURE__*/createPortal(this._renderPopper(ids), popperHost));
+    }, children), popperHost && (active || activeBubble) && /*#__PURE__*/ReactDOM.createPortal(this._renderPopper(ids), popperHost));
   }
 
   render() {
@@ -1116,7 +1116,7 @@ class Tooltip extends Component {
       // need it.
       return this._renderTooltipAnchor();
     } else {
-      return /*#__PURE__*/createElement(UniqueIDProvider, {
+      return /*#__PURE__*/React.createElement(UniqueIDProvider, {
         scope: "tooltip",
         mockOnFirstRender: true
       }, ids => this._renderTooltipAnchor(ids));
@@ -1130,5 +1130,4 @@ Tooltip.defaultProps = {
 };
 Tooltip.ariaContentId = "aria-content";
 
-export default Tooltip;
-export { TooltipContent, TooltipPopper, TooltipTail };
+export { TooltipContent, TooltipPopper, TooltipTail, Tooltip as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tooltip",
-  "version": "1.3.3",
+  "version": "1.3.7",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,23 +15,22 @@
   "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.2.1",
+    "@khanacademy/wonder-blocks-layout": "^1.4.7",
+    "@khanacademy/wonder-blocks-modal": "^2.2.1",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-typography": "^1.1.29"
   },
   "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"
-  },
-  "gitHead": "7e879c62ab49bf48f1debb96bcbc9d612e4689a6"
+    "wb-dev-build-settings": "^0.3.0"
+  }
 }

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -142,8 +142,8 @@ exports[`wonder-blocks-tooltip example 3 1`] = `
 
 exports[`wonder-blocks-tooltip example 4 1`] = `
 <button
+  aria-disabled={false}
   className=""
-  disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
   onDragStart={[Function]}
@@ -400,8 +400,8 @@ exports[`wonder-blocks-tooltip example 6 1`] = `
 >
   <button
     aria-describedby="uid-tooltip-6-aria-content"
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}

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

@@ -4,6 +4,7 @@
 import * as React from "react";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import TooltipAnchor from "../tooltip-anchor.js";
 import {
@@ -128,7 +129,7 @@ describe("TooltipAnchor", () => {
             });
 
             // Act
-            const result = ref && ref.getAttribute("tabindex");
+            const result = ref?.getAttribute("tabindex");
 
             // Assert
             expect(result).toBe("0");
@@ -150,7 +151,7 @@ describe("TooltipAnchor", () => {
             });
 
             // Act
-            const result = ref && ref.getAttribute("tabindex");
+            const result = ref?.getAttribute("tabindex");
 
             // Assert
             expect(result).toBe("-1");
@@ -174,7 +175,7 @@ describe("TooltipAnchor", () => {
             });
 
             // Act
-            const result = ref && ref.getAttribute("tabindex");
+            const result = ref?.getAttribute("tabindex");
 
             // Assert
             expect(result).toBeNull();
@@ -197,11 +198,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 +225,7 @@ describe("TooltipAnchor", () => {
             });
 
             // Act
-            const result = ref && ref.getAttribute("tabindex");
+            const result = ref?.getAttribute("tabindex");
 
             // Assert
             expect(result).not.toBeNull();
@@ -237,6 +238,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 +267,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 +312,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 +322,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 +338,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 +347,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 +361,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 +384,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 +393,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 +407,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 +424,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 +433,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 +442,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 +465,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 +474,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 +483,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 +498,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 +547,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 +588,7 @@ describe("TooltipAnchor", () => {
             });
 
             // Act
-            ref && ref.dispatchEvent(new MouseEvent("mouseenter"));
+            ref?.dispatchEvent(new MouseEvent("mouseenter"));
 
             // Assert
             expect(activeState).toBe(true);
@@ -592,6 +598,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 +613,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 +622,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 +636,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 +657,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 +666,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 +680,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 +696,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 +705,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 +714,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 +737,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 +746,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 +755,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 +770,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 +807,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 +821,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 +835,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 +846,7 @@ describe("TooltipAnchor", () => {
             spy.mockClear();
 
             // Act
-            ref && ref.dispatchEvent(new MouseEvent("mouseenter"));
+            ref?.dispatchEvent(new MouseEvent("mouseenter"));
 
             // Assert
             expect(spy).not.toHaveBeenCalled();
@@ -843,6 +854,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 +868,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 +890,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 +905,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 +922,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 +938,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 +965,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 +978,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-bubble.test.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 

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

@@ -2,6 +2,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 

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/__tests__/tooltip.test.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Body, HeadingSmall} from "@khanacademy/wonder-blocks-typography";

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

@@ -2,18 +2,28 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {View} from "@khanacademy/wonder-blocks-core";
+import Button from "@khanacademy/wonder-blocks-button";
 import {TextField} from "@khanacademy/wonder-blocks-form";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
 import Tooltip from "@khanacademy/wonder-blocks-tooltip";
 
 import type {Placement} from "@khanacademy/wonder-blocks-tooltip";
 import type {StoryComponentType} from "@storybook/react";
 
 export default {
-    title: "Tooltip",
+    title: "Floating/Tooltip",
+    parameters: {
+        // TODO(WB-1170): Reassess this after investigating more about Chromatic
+        // flakyness.
+        chromatic: {
+            delay: 400,
+        },
+    },
 };
 
 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();
@@ -41,19 +51,44 @@ const BaseTooltipExample = ({placement}: {|placement: Placement|}) => {
     );
 };
 
-export const tooltipRight: StoryComponentType = () => (
+export const TooltipOnButtons: StoryComponentType = () => {
+    return (
+        <View style={styles.centered}>
+            <View>
+                <Tooltip content={"This is a tooltip on a button."}>
+                    <Button disabled={false}>Example 1</Button>
+                </Tooltip>
+                <Strut size={Spacing.medium_16} />
+                <Tooltip
+                    content="This is a tooltip on a disabled button."
+                    placement="bottom"
+                >
+                    <Button disabled={true}>Example 2</Button>
+                </Tooltip>
+            </View>
+        </View>
+    );
+};
+
+TooltipOnButtons.parameters = {
+    chromatic: {
+        disableSnapshot: true,
+    },
+};
+
+export const TooltipRight: StoryComponentType = () => (
     <BaseTooltipExample placement="right" />
 );
 
-export const tooltipLeft: StoryComponentType = () => (
+export const TooltipLeft: StoryComponentType = () => (
     <BaseTooltipExample placement="left" />
 );
 
-export const tooltipTop: StoryComponentType = () => (
+export const TooltipTop: StoryComponentType = () => (
     <BaseTooltipExample placement="top" />
 );
 
-export const tooltipBottom: StoryComponentType = () => (
+export const TooltipBottom: StoryComponentType = () => (
     <BaseTooltipExample placement="bottom" />
 );
 

package/src/util/__tests__/ref-tracker.test.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 

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;
 

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.