@khanacademy/wonder-blocks-tooltip 1.4.6 → 1.4.8

package/dist/index.js.flow

@@ -1,2 +1,20 @@
-// @flow
-export * from "../src/index";
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import type { Placement } from "./util/types";
+import type { PopperElementProps } from "./components/tooltip-bubble";
+import Tooltip from "./components/tooltip";
+import TooltipContent from "./components/tooltip-content";
+import TooltipPopper from "./components/tooltip-popper";
+import TooltipTail from "./components/tooltip-tail";
+declare export {
+  Tooltip as default,
+  TooltipContent,
+  TooltipPopper,
+  TooltipTail,
+};
+export type { Placement, PopperElementProps };

package/dist/util/active-tracker.d.ts

@@ -0,0 +1,61 @@
+/**
+ * This interface should be implemented by types that are interested in the
+ * notifications of active state being stolen. Generally, this would also be
+ * subscribers that may also steal active state, but not necessarily.
+ *
+ * Once implemented, the type must call subscribe on a tracker to begin
+ * receiving notifications.
+ */
+export interface IActiveTrackerSubscriber {
+    /**
+     * Notification raised when something steals the active state from a
+     * subscribed tracker.
+     */
+    activeStateStolen: () => void;
+}
+/**
+ * This class is used to track the concept of active state (though technically
+ * that could be any boolean state). The tracker has a variety of subscribers
+ * that receive notifications of state theft and can steal the state.
+ *
+ * For the tooltip, this enables us to have a single tooltip active at any one
+ * time. The tracker allows tooltip anchors to coordinate which of them is
+ * active, and to ensure that if a different one becomes active, all the others
+ * know that they aren't.
+ *
+ * - When notified that the state has been stolen, subscribers can immediately
+ * reflect that theft (in the case of a tooltip, they would hide themselves).
+ * - The thief does not get notified if they were the one who stole the state
+ * since they should already know that they did that (this avoids having to have
+ * checks for reentrancy, for example).
+ * - When the subscriber that owns the state no longer needs it, it can
+ * voluntarily give it up.
+ * - If the state is stolen while a subscriber owns the
+ * state, that subscriber does not give up the state, as it doesn't have it
+ * anymore (it was stolen).
+ */
+export default class ActiveTracker {
+    _subscribers: Array<IActiveTrackerSubscriber>;
+    _active: boolean;
+    _getIndex(who: IActiveTrackerSubscriber): number;
+    /**
+     * Called when a tooltip anchor becomes active so that it can tell all other
+     * anchors that they are no longer the active tooltip. Returns true if
+     * the there was a steal of active state from another anchor; otherwise, if
+     * no other anchor had been active, returns false.
+     */
+    steal(who: IActiveTrackerSubscriber): boolean;
+    /**
+     * Called if a tooltip doesn't want to be active anymore.
+     * Should not be called when being told the active spot was stolen by
+     * another anchor, only when the anchor is unhovered and unfocused and they
+     * were active.
+     */
+    giveup(): void;
+    /**
+     * Subscribes a tooltip anchor to the tracker so that it can be notified of
+     * steals. Returns a method that can be used to unsubscribe the anchor from
+     * notifications.
+     */
+    subscribe(who: IActiveTrackerSubscriber): () => void;
+}

package/dist/util/active-tracker.js.flow

@@ -0,0 +1,71 @@
+/**
+ * Flowtype definitions for active-tracker
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+/**
+ * This interface should be implemented by types that are interested in the
+ * notifications of active state being stolen. Generally, this would also be
+ * subscribers that may also steal active state, but not necessarily.
+ *
+ * Once implemented, the type must call subscribe on a tracker to begin
+ * receiving notifications.
+ */
+export interface IActiveTrackerSubscriber {
+  /**
+   * Notification raised when something steals the active state from a
+   * subscribed tracker.
+   */
+  activeStateStolen: () => void;
+}
+/**
+ * This class is used to track the concept of active state (though technically
+ * that could be any boolean state). The tracker has a variety of subscribers
+ * that receive notifications of state theft and can steal the state.
+ *
+ * For the tooltip, this enables us to have a single tooltip active at any one
+ * time. The tracker allows tooltip anchors to coordinate which of them is
+ * active, and to ensure that if a different one becomes active, all the others
+ * know that they aren't.
+ *
+ * - When notified that the state has been stolen, subscribers can immediately
+ * reflect that theft (in the case of a tooltip, they would hide themselves).
+ * - The thief does not get notified if they were the one who stole the state
+ * since they should already know that they did that (this avoids having to have
+ * checks for reentrancy, for example).
+ * - When the subscriber that owns the state no longer needs it, it can
+ * voluntarily give it up.
+ * - If the state is stolen while a subscriber owns the
+ * state, that subscriber does not give up the state, as it doesn't have it
+ * anymore (it was stolen).
+ */
+declare export default class ActiveTracker {
+  _subscribers: Array<IActiveTrackerSubscriber>;
+  _active: boolean;
+  _getIndex(who: IActiveTrackerSubscriber): number;
+
+  /**
+   * Called when a tooltip anchor becomes active so that it can tell all other
+   * anchors that they are no longer the active tooltip. Returns true if
+   * the there was a steal of active state from another anchor; otherwise, if
+   * no other anchor had been active, returns false.
+   */
+  steal(who: IActiveTrackerSubscriber): boolean;
+
+  /**
+   * Called if a tooltip doesn't want to be active anymore.
+   * Should not be called when being told the active spot was stolen by
+   * another anchor, only when the anchor is unhovered and unfocused and they
+   * were active.
+   */
+  giveup(): void;
+
+  /**
+   * Subscribes a tooltip anchor to the tracker so that it can be notified of
+   * steals. Returns a method that can be used to unsubscribe the anchor from
+   * notifications.
+   */
+  subscribe(who: IActiveTrackerSubscriber): () => void;
+}

package/dist/util/constants.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The attribute used to identify a tooltip portal.
+ */
+export declare const TooltipPortalAttributeName = "data-tooltip-portal";
+export declare const TooltipAppearanceDelay = 100;
+export declare const TooltipDisappearanceDelay = 75;

package/dist/util/constants.js.flow

@@ -0,0 +1,13 @@
+/**
+ * Flowtype definitions for constants
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+/**
+ * The attribute used to identify a tooltip portal.
+ */
+declare export var TooltipPortalAttributeName: "data-tooltip-portal";
+declare export var TooltipAppearanceDelay: 100;
+declare export var TooltipDisappearanceDelay: 75;

package/dist/util/ref-tracker.d.ts

@@ -0,0 +1,16 @@
+/**
+ * This is a little helper that we can use to wrap the react-popper reference
+ * update methods so that we can convert a regular React ref into a DOM node
+ * as react-popper expects, and also ensure we only update react-popper
+ * on actual changes, and not just renders of the same thing.
+ */
+import * as React from "react";
+import type { PopperChildrenProps } from "react-popper";
+type PopperRef = PopperChildrenProps["ref"];
+export default class RefTracker {
+    _lastRef: HTMLElement | null | undefined;
+    _targetFn: (arg1?: HTMLElement | null | undefined) => void | null | undefined;
+    updateRef: (ref?: React.Component<any> | Element | null | undefined) => void;
+    setCallback: (targetFn?: PopperRef | null | undefined) => void;
+}
+export {};

package/dist/util/ref-tracker.js.flow

@@ -0,0 +1,16 @@
+/**
+ * Flowtype definitions for ref-tracker
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { PopperChildrenProps } from "react-popper";
+declare type PopperRef = $PropertyType<PopperChildrenProps, "ref">;
+declare export default class RefTracker {
+  _lastRef: HTMLElement | null | void;
+  _targetFn: (arg1?: HTMLElement | null | void) => void | null | void;
+  updateRef: (ref?: React.Component<any> | Element | null | void) => void;
+  setCallback: (targetFn?: PopperRef | null | void) => void;
+}

package/dist/util/types.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { CSSProperties } from "aphrodite";
+export type getRefFn = (arg1?: React.Component<any> | Element | null | undefined) => void;
+export type Offset = {
+    bottom: CSSProperties["bottom"];
+    top: CSSProperties["top"];
+    left: CSSProperties["left"];
+    right: CSSProperties["right"];
+    transform: CSSProperties["transform"];
+};
+export type Placement = "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";

package/dist/util/types.js.flow

@@ -0,0 +1,36 @@
+/**
+ * Flowtype definitions for types
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { CSSProperties } from "aphrodite";
+export type getRefFn = (
+  arg1?: React.Component<any> | Element | null | void
+) => void;
+export type Offset = {
+  bottom: $PropertyType<CSSProperties, "bottom">,
+  top: $PropertyType<CSSProperties, "top">,
+  left: $PropertyType<CSSProperties, "left">,
+  right: $PropertyType<CSSProperties, "right">,
+  transform: $PropertyType<CSSProperties, "transform">,
+  ...
+};
+export type Placement =
+  | "auto"
+  | "auto-start"
+  | "auto-end"
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "right"
+  | "right-start"
+  | "right-end"
+  | "left"
+  | "left-start"
+  | "left-end";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tooltip",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -8,7 +8,7 @@
   "description": "",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
-  "source": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -16,12 +16,12 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-color": "^1.2.1",
-    "@khanacademy/wonder-blocks-core": "^4.7.0",
-    "@khanacademy/wonder-blocks-layout": "^1.4.16",
-    "@khanacademy/wonder-blocks-modal": "^3.0.7",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.38"
+    "@khanacademy/wonder-blocks-color": "^1.2.2",
+    "@khanacademy/wonder-blocks-core": "^4.9.0",
+    "@khanacademy/wonder-blocks-layout": "^1.4.18",
+    "@khanacademy/wonder-blocks-modal": "^3.0.9",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.6",
+    "@khanacademy/wonder-blocks-typography": "^1.1.40"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -31,6 +31,6 @@
     "react-popper": "^2.0.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.7.1"
+    "wb-dev-build-settings": "^0.7.3"
   }
 }

package/src/components/__tests__/{tooltip-anchor.test.js → tooltip-anchor.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {render, screen} from "@testing-library/react";
@@ -14,14 +13,14 @@ jest.mock("../../util/active-tracker");
 
 describe("TooltipAnchor", () => {
     beforeEach(async () => {
-        // $FlowIgnore[method-unbinding]
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'mockReset' does not exist on type '{ <K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | ... 1 more ... | undefined): void; }'.
         if (typeof document.addEventListener.mockReset === "function") {
-            // $FlowIgnore[method-unbinding]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'mockRestore' does not exist on type '{ <K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | ... 1 more ... | undefined): void; }'.
             document.addEventListener.mockRestore();
         }
-        // $FlowIgnore[method-unbinding]
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'mockReset' does not exist on type '{ <K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions | undefined): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | ... 1 more ... | undefined): void; }'.
         if (typeof document.removeEventListener.mockReset === "function") {
-            // $FlowIgnore[method-unbinding]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'mockRestore' does not exist on type '{ <K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions | undefined): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | ... 1 more ... | undefined): void; }'.
             document.removeEventListener.mockRestore();
         }
         jest.clearAllTimers();
@@ -32,8 +31,7 @@ describe("TooltipAnchor", () => {
         );
         // We know there's one global instance of this import, so let's
         // reset it.
-        // Flow doesn't know this is a mock
-        // $FlowFixMe[prop-missing]
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'mock' does not exist on type 'typeof ActiveTracker'.
         const mockTracker = ActiveTracker.mock.instances[0];
         mockTracker.steal.mockClear();
         mockTracker.giveup.mockClear();
@@ -250,8 +248,7 @@ describe("TooltipAnchor", () => {
             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
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'mock' does not exist on type 'typeof ActiveTracker'.
             const mockTracker = ActiveTracker.mock.instances[0];
             mockTracker.steal.mockImplementationOnce(() => false);
 
@@ -260,7 +257,7 @@ describe("TooltipAnchor", () => {
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -290,8 +287,7 @@ describe("TooltipAnchor", () => {
             );
             // Let's tell the tooltip it is stealing and therefore it should
             // not be using a delay to show the tooltip.
-            // Flow doesn't know this is a mock
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'mock' does not exist on type 'typeof ActiveTracker'.
             const mockTracker = ActiveTracker.mock.instances[0];
             mockTracker.steal.mockImplementationOnce(() => true);
 
@@ -300,7 +296,7 @@ describe("TooltipAnchor", () => {
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -326,7 +322,7 @@ describe("TooltipAnchor", () => {
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -362,15 +358,14 @@ describe("TooltipAnchor", () => {
             const {default: ActiveTracker} = await import(
                 "../../util/active-tracker"
             );
-            // Flow doesn't know this is a mock
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'mock' does not exist on type 'typeof ActiveTracker'.
             const mockTracker = ActiveTracker.mock.instances[0];
 
             let activeState = false;
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -408,7 +403,7 @@ describe("TooltipAnchor", () => {
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -440,15 +435,14 @@ describe("TooltipAnchor", () => {
             const {default: ActiveTracker} = await import(
                 "../../util/active-tracker"
             );
-            // Flow doesn't know this is a mock
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'mock' does not exist on type 'typeof ActiveTracker'.
             const mockTracker = ActiveTracker.mock.instances[0];
             // Arrange
             let activeState = false;
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -479,7 +473,7 @@ describe("TooltipAnchor", () => {
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -517,8 +511,7 @@ describe("TooltipAnchor", () => {
             );
             // 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
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'mock' does not exist on type 'typeof ActiveTracker'.
             const mockTracker = ActiveTracker.mock.instances[0];
             mockTracker.steal.mockImplementationOnce(() => false);
 
@@ -527,7 +520,7 @@ describe("TooltipAnchor", () => {
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -556,8 +549,7 @@ describe("TooltipAnchor", () => {
             );
             // Let's tell the tooltip it is stealing and therefore it should
             // not be using a delay to show the tooltip.
-            // Flow doesn't know this is a mock
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'mock' does not exist on type 'typeof ActiveTracker'.
             const mockTracker = ActiveTracker.mock.instances[0];
             mockTracker.steal.mockImplementationOnce(() => true);
 
@@ -566,7 +558,7 @@ describe("TooltipAnchor", () => {
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -591,7 +583,7 @@ describe("TooltipAnchor", () => {
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -626,15 +618,14 @@ describe("TooltipAnchor", () => {
             const {default: ActiveTracker} = await import(
                 "../../util/active-tracker"
             );
-            // Flow doesn't know this is a mock
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'mock' does not exist on type 'typeof ActiveTracker'.
             const mockTracker = ActiveTracker.mock.instances[0];
             let activeState = false;
 
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -671,7 +662,7 @@ describe("TooltipAnchor", () => {
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -701,15 +692,14 @@ describe("TooltipAnchor", () => {
             const {default: ActiveTracker} = await import(
                 "../../util/active-tracker"
             );
-            // Flow doesn't know this is a mock
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'mock' does not exist on type 'typeof ActiveTracker'.
             const mockTracker = ActiveTracker.mock.instances[0];
             // Arrange
             let activeState = false;
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -738,7 +728,7 @@ describe("TooltipAnchor", () => {
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -883,7 +873,7 @@ describe("TooltipAnchor", () => {
             render(
                 <TooltipAnchor
                     anchorRef={jest.fn()}
-                    onActiveChanged={(active) => {
+                    onActiveChanged={(active: any) => {
                         activeState = active;
                     }}
                 >
@@ -927,9 +917,9 @@ describe("TooltipAnchor", () => {
                 TooltipAppearanceDelay,
             );
             jest.runOnlyPendingTimers();
-            const event: KeyboardEvent = (document.createEvent("Event"): any);
+            const event: KeyboardEvent = document.createEvent("Event") as any;
             const spyOnStopPropagation = jest.spyOn(event, "stopPropagation");
-            // $FlowIgnore[cannot-write]
+            // @ts-expect-error [FEI-5019] - TS2540 - Cannot assign to 'key' because it is a read-only property.
             event.key = "Escape";
             event.initEvent("keyup", true, true);
 

package/src/components/__tests__/{tooltip-bubble.test.js → tooltip-bubble.test.tsx}

@@ -1,11 +1,10 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 
 import TooltipBubble from "../tooltip-bubble";
-import typeof TooltipContent from "../tooltip-content";
+import TooltipContent from "../tooltip-content";
 
 describe("TooltipBubble", () => {
     // A little helper method to make the actual test more readable.
@@ -28,15 +27,16 @@ describe("TooltipBubble", () => {
 
         // Do some casting to pretend this is `TooltipContent`. That way we are
         // isolating behaviors a bit more.
-        const fakeContent = (((
+        const fakeContent = (
             <View id="content">Some content</View>
-        ): any): React.Element<TooltipContent>);
+        ) as React.ReactElement<React.ComponentProps<typeof TooltipContent>>;
 
         // Act
         render(
             <View>
                 <TooltipBubble
                     id="bubble"
+                    // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                     placement={props.placement}
                     tailOffset={props.tailOffset}
                     updateBubbleRef={jest.fn()}

package/src/components/__tests__/{tooltip-popper.test.js → tooltip-popper.test.tsx}

@@ -1,14 +1,15 @@
-// @flow
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {render} from "@testing-library/react";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 
-import typeof TooltipBubble from "../tooltip-bubble";
+import TooltipBubble from "../tooltip-bubble";
 import TooltipPopper from "../tooltip-popper";
 
-type State = {|ref: ?HTMLElement|};
+type State = {
+    ref: HTMLElement | null | undefined;
+};
 /**
  * A little wrapper for the TooltipPopper so that we can provide an anchor
  * element reference and test that the children get rendered.
@@ -18,25 +19,27 @@ class TestHarness extends React.Component<any, State> {
         ref: null,
     };
 
-    updateRef(ref) {
+    updateRef(ref: any) {
         const actualRef = ref && ReactDOM.findDOMNode(ref);
         if (actualRef && this.state.ref !== actualRef) {
-            this.setState({ref: ((actualRef: any): ?HTMLElement)});
+            this.setState({ref: actualRef as HTMLElement | null | undefined});
         }
     }
 
-    render(): React.Node {
-        const fakeBubble = (((
-            <View ref={(ref) => this.props.resultRef(ref)}>Fake bubble</View>
-        ): any): React.Element<TooltipBubble>);
+    render(): React.ReactElement {
+        const fakeBubble = (
+            <View ref={(ref: any) => this.props.resultRef(ref)}>
+                Fake bubble
+            </View>
+        ) as React.ReactElement<React.ComponentProps<typeof TooltipBubble>>;
         return (
             <View>
-                <View ref={(ref) => this.updateRef(ref)}>Anchor</View>
+                <View ref={(ref: any) => this.updateRef(ref)}>Anchor</View>
                 <TooltipPopper
                     placement={this.props.placement}
                     anchorElement={this.state.ref}
                 >
-                    {(props) => fakeBubble}
+                    {(props: any) => fakeBubble}
                 </TooltipPopper>
             </View>
         );
@@ -51,7 +54,7 @@ describe("TooltipPopper", () => {
     // and use other things to test the overall placement things.
     test("ensure component renders", async () => {
         // Arrange
-        const ref = await new Promise((resolve, reject) => {
+        const ref = await new Promise((resolve: any, reject: any) => {
             const nodes = (
                 <View>
                     <TestHarness placement="bottom" resultRef={resolve} />