@khanacademy/wonder-blocks-tooltip 1.4.5 → 1.4.7

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.js";
-import TooltipPopper from "../tooltip-popper.js";
+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} />

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

@@ -1,16 +1,15 @@
-// @flow
 import * as React from "react";
 import {render} from "@testing-library/react";
 
-import TooltipTail from "../tooltip-tail.js";
+import TooltipTail from "../tooltip-tail";
 
-import type {Placement} from "../../util/types.js";
+import type {Placement} from "../../util/types";
 
 describe("TooltipTail", () => {
     describe("#render", () => {
         test("unknown placement, throws", () => {
             // Arrange
-            const fakePlacement = (("notaplacement": any): Placement);
+            const fakePlacement = "notaplacement" as Placement;
             const nodes = <TooltipTail placement={fakePlacement} />;
 
             // Act
@@ -25,10 +24,12 @@ describe("TooltipTail", () => {
         test("known placement, does not throw", () => {
             // Arrange
             const testPoints = ["top", "right", "bottom", "left"];
-            const makeNode = (p) => <TooltipTail placement={p} />;
+            const makeNode = (p: any) => <TooltipTail placement={p} />;
 
             // Act
-            const testees = testPoints.map((tp) => () => render(makeNode(tp)));
+            const testees = testPoints.map(
+                (tp: any) => () => render(makeNode(tp)),
+            );
 
             // Assert
             for (const testee of testees) {

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

@@ -1,10 +1,9 @@
-// @flow
 import * as React from "react";
 
 import {render, screen, fireEvent} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import Tooltip from "../tooltip.js";
+import Tooltip from "../tooltip";
 
 describe("tooltip integration tests", () => {
     beforeEach(() => {

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {render, screen} from "@testing-library/react";
@@ -6,7 +5,7 @@ import userEvent from "@testing-library/user-event";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 
-import Tooltip from "../tooltip.js";
+import Tooltip from "../tooltip";
 
 const mockIDENTIFIER = "mock-identifier";
 jest.mock("@khanacademy/wonder-blocks-core", () => {
@@ -14,7 +13,7 @@ jest.mock("@khanacademy/wonder-blocks-core", () => {
     // We want all of Core to be the regular thing except for UniqueIDProvider
     return {
         ...Core,
-        UniqueIDProvider: (props) =>
+        UniqueIDProvider: (props: any) =>
             // NOTE(kevinb): We aren't actually access the DOM here.  The logic
             // used by this lint rule to determine DOM access could be more
             // precise.
@@ -221,7 +220,7 @@ describe("Tooltip", () => {
                         <View>Anchor</View>
                     </View>
                 );
-                const ref = await new Promise((resolve) => {
+                const ref = await new Promise((resolve: any) => {
                     render(
                         <View>
                             <Tooltip ref={resolve} content="Content">
@@ -232,7 +231,8 @@ describe("Tooltip", () => {
                 });
 
                 // Act
-                const result = (ReactDOM.findDOMNode(ref): any);
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ReactInstance | null | undefined'.
+                const result = ReactDOM.findDOMNode(ref) as any;
 
                 // Assert
                 expect(result).toBeInstanceOf(HTMLDivElement);
@@ -248,7 +248,7 @@ describe("Tooltip", () => {
                         <View>Anchor</View>
                     </View>
                 );
-                const ref = await new Promise((resolve) => {
+                const ref = await new Promise((resolve: any) => {
                     render(
                         <View>
                             <Tooltip
@@ -261,7 +261,8 @@ describe("Tooltip", () => {
                         </View>,
                     );
                 });
-                const node = (ReactDOM.findDOMNode(ref): any);
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ReactInstance | null | undefined'.
+                const node = ReactDOM.findDOMNode(ref) as any;
 
                 // Act
                 const result = node.getAttribute("aria-describedby");
@@ -277,7 +278,7 @@ describe("Tooltip", () => {
                         <View>Anchor</View>
                     </View>
                 );
-                const ref = await new Promise((resolve) => {
+                const ref = await new Promise((resolve: any) => {
                     render(
                         <View>
                             <Tooltip ref={resolve} content="Content">
@@ -286,7 +287,8 @@ describe("Tooltip", () => {
                         </View>,
                     );
                 });
-                const node = (ReactDOM.findDOMNode(ref): any);
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ReactInstance | null | undefined'.
+                const node = ReactDOM.findDOMNode(ref) as any;
 
                 // Act
                 const result = node.getAttribute("aria-describedby");

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

@@ -1,4 +1,3 @@
-// @flow
 /**
  * This component turns the given content into an accessible anchor for
  * positioning and displaying tooltips.
@@ -9,15 +8,15 @@ import * as ReactDOM from "react-dom";
 import {Text as WBText} from "@khanacademy/wonder-blocks-core";
 import type {IIdentifierFactory} from "@khanacademy/wonder-blocks-core";
 
-import ActiveTracker from "../util/active-tracker.js";
+import ActiveTracker from "../util/active-tracker";
 import {
     TooltipAppearanceDelay,
     TooltipDisappearanceDelay,
-} from "../util/constants.js";
+} from "../util/constants";
 
-import type {IActiveTrackerSubscriber} from "../util/active-tracker.js";
+import type {IActiveTrackerSubscriber} from "../util/active-tracker";
 
-type Props = {|
+type Props = {
     /**
      * The content for anchoring the tooltip.
      * This element will be used to position the tooltip.
@@ -25,15 +24,13 @@ type Props = {|
      * We allow children to be a string so that we can add tooltips to
      * words within a large block of text easily.
      */
-    children: React.Element<any> | string,
-
+    children: React.ReactElement<any> | string;
     /**
      * Callback to be invoked when the anchored content is mounted.
      * This provides a reference to the anchored content, which can then be
      * used for calculating tooltip bubble positioning.
      */
-    anchorRef: (?Element) => mixed,
-
+    anchorRef: (arg1?: Element | null | undefined) => unknown;
     /**
      * When true, if a tabindex attribute is not already present on the element
      * wrapped by the anchor, the element will be given tabindex=0 to make it
@@ -48,30 +45,28 @@ type Props = {|
      * be accessible via keyboard in all circumstances where the tooltip would
      * appear using the mouse, so verify those use-cases.
      */
-    forceAnchorFocusivity?: boolean,
-
+    forceAnchorFocusivity?: boolean;
     /**
      * Callback to pass active state back to Tooltip.
      *
      * `active` will be true whenever the anchor is hovered or focused and false
      * otherwise.
      */
-    onActiveChanged: (active: boolean) => mixed,
-
+    onActiveChanged: (active: boolean) => unknown;
     /**
      * Optional unique id factory.
      */
-    ids?: IIdentifierFactory,
-|};
+    ids?: IIdentifierFactory;
+};
 
-type DefaultProps = {|
-    forceAnchorFocusivity: $PropertyType<Props, "forceAnchorFocusivity">,
-|};
+type DefaultProps = {
+    forceAnchorFocusivity: Props["forceAnchorFocusivity"];
+};
 
-type State = {|
+type State = {
     /** Is the anchor active or not? */
-    active: boolean,
-|};
+    active: boolean;
+};
 
 const TRACKER = new ActiveTracker();
 
@@ -79,13 +74,15 @@ export default class TooltipAnchor
     extends React.Component<Props, State>
     implements IActiveTrackerSubscriber
 {
-    _weSetFocusivity: ?boolean;
-    _anchorNode: ?Element;
+    _weSetFocusivity: boolean | null | undefined;
+    _anchorNode: Element | null | undefined;
     _focused: boolean;
     _hovered: boolean;
+    // @ts-expect-error [FEI-5019] - TS2564 - Property '_stolenFromUs' has no initializer and is not definitely assigned in the constructor.
     _stolenFromUs: boolean;
-    _unsubscribeFromTracker: ?() => void;
-    _timeoutID: ?TimeoutID;
+    // @ts-expect-error [FEI-5019] - TS2564 - Property '_unsubscribeFromTracker' has no initializer and is not definitely assigned in the constructor.
+    _unsubscribeFromTracker: () => void | null | undefined;
+    _timeoutID: number | null | undefined;
 
     static defaultProps: DefaultProps = {
         forceAnchorFocusivity: true,
@@ -104,7 +101,7 @@ export default class TooltipAnchor
     componentDidMount() {
         const anchorNode = ReactDOM.findDOMNode(this);
 
-        // This should never happen, but we have this check here to make flow
+        // This should never happen, but we have this check here to make TypeScript
         // happy and ensure that if this does happen, we'll know about it.
         if (anchorNode instanceof Text) {
             throw new Error(
@@ -165,7 +162,7 @@ export default class TooltipAnchor
         }
     }
 
-    static ariaContentId: string = "aria-content";
+    static ariaContentId = "aria-content";
 
     activeStateStolen: () => void = () => {
         // Something wants the active state.
@@ -257,6 +254,7 @@ export default class TooltipAnchor
             const delay = active
                 ? TooltipAppearanceDelay
                 : TooltipDisappearanceDelay;
+            // @ts-expect-error [FEI-5019] - TS2322 - Type 'Timeout' is not assignable to type 'number'.
             this._timeoutID = setTimeout(() => {
                 this._timeoutID = null;
                 this._setActiveState(active, true);
@@ -301,7 +299,7 @@ export default class TooltipAnchor
         }
     };
 
-    _renderAnchorableChildren(): React.Element<any> {
+    _renderAnchorableChildren(): React.ReactElement<any> {
         const {children} = this.props;
         return typeof children === "string" ? (
             <WBText>{children}</WBText>
@@ -310,7 +308,7 @@ export default class TooltipAnchor
         );
     }
 
-    _renderAccessibleChildren(ids: IIdentifierFactory): React.Node {
+    _renderAccessibleChildren(ids: IIdentifierFactory): React.ReactNode {
         const anchorableChildren = this._renderAnchorableChildren();
 
         return React.cloneElement(anchorableChildren, {
@@ -318,12 +316,13 @@ export default class TooltipAnchor
         });
     }
 
-    render(): React.Node {
+    render(): React.ReactElement {
         // We need to make sure we can anchor on our content.
         // If the content is just a string, we wrap it in a Text element
         // so as not to affect styling or layout but still have an element
         // to anchor to.
         if (this.props.ids) {
+            // @ts-expect-error [FEI-5019] - TS2322 - Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
             return this._renderAccessibleChildren(this.props.ids);
         }
         return this._renderAnchorableChildren();

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

@@ -1,4 +1,3 @@
-// @flow
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import Colors from "@khanacademy/wonder-blocks-color";
@@ -6,48 +5,37 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import typeof TooltipContent from "./tooltip-content.js";
-import TooltipTail from "./tooltip-tail.js";
+import TooltipContent from "./tooltip-content";
+import TooltipTail from "./tooltip-tail";
 
-import type {getRefFn, Offset, Placement} from "../util/types.js";
+import type {getRefFn, Offset, Placement} from "../util/types";
 
-export type PopperElementProps = {|
+export type PopperElementProps = {
     /** The placement of the bubble with respect to the anchor. */
-    placement: Placement,
-
+    placement: Placement;
     /** Whether the bubble is out of bounds or not. */
-    isReferenceHidden?: ?boolean,
-
+    isReferenceHidden?: boolean | null | undefined;
     /** A callback for updating the ref of the bubble itself. */
-    updateBubbleRef?: getRefFn,
-
+    updateBubbleRef?: getRefFn;
     /** A callback for updating the ref of the bubble's tail. */
-    updateTailRef?: getRefFn,
-
+    updateTailRef?: getRefFn;
     /** Where the tail is to be rendered. */
-    tailOffset?: Offset,
-
+    tailOffset?: Offset;
     /** Additional styles to be applied by the bubble. */
-    style?: StyleType,
-|};
+    style?: StyleType;
+};
 
-export type Props = {|
+export type Props = {
     /** The unique identifier for this component. */
-    id: string,
-
+    id: string;
     /** The `TooltipContent` element that will be rendered in the bubble. */
-    children: React.Element<TooltipContent>,
-
-    onActiveChanged: (active: boolean) => mixed,
-
-    // TODO(somewhatabstract): Update react-docgen to support spread operators
-    // (v3 beta introduces this)
-    ...PopperElementProps,
-|};
+    children: React.ReactElement<React.ComponentProps<typeof TooltipContent>>;
+    onActiveChanged: (active: boolean) => unknown;
+} & PopperElementProps; // (v3 beta introduces this) // TODO(somewhatabstract): Update react-docgen to support spread operators
 
-type State = {|
-    active: boolean,
-|};
+type State = {
+    active: boolean;
+};
 
 export default class TooltipBubble extends React.Component<Props, State> {
     state: State = {
@@ -67,7 +55,7 @@ export default class TooltipBubble extends React.Component<Props, State> {
         this.props.onActiveChanged(false);
     };
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {
             id,
             children,

package/src/components/{tooltip-content.js → tooltip-content.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
@@ -9,21 +8,20 @@ import {HeadingSmall, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 
 import type {Typography} from "@khanacademy/wonder-blocks-typography";
 
-type Props = {|
+type Props = {
     /**
      * The title for the tooltip content.
      * Optional.
      */
-    title?: string | React.Element<Typography>,
-
+    title?: string | React.ReactElement<React.ComponentProps<Typography>>;
     /**
      * The main content for a tooltip.
      */
     children:
         | string
-        | React.Element<Typography>
-        | Array<React.Element<Typography>>,
-|};
+        | React.ReactElement<React.ComponentProps<Typography>>
+        | Array<React.ReactElement<React.ComponentProps<Typography>>>;
+};
 
 /**
  * This component is used to provide the content that is to be rendered in the
@@ -40,7 +38,7 @@ type Props = {|
  * ```
  */
 export default class TooltipContent extends React.Component<Props> {
-    _renderTitle(): React.Node {
+    _renderTitle(): React.ReactNode {
         const {title} = this.props;
         if (title) {
             if (typeof title === "string") {
@@ -52,7 +50,7 @@ export default class TooltipContent extends React.Component<Props> {
         return null;
     }
 
-    _renderChildren(): React.Node {
+    _renderChildren(): React.ReactNode {
         const {children} = this.props;
         if (typeof children === "string") {
             return <LabelMedium>{children}</LabelMedium>;
@@ -61,7 +59,7 @@ export default class TooltipContent extends React.Component<Props> {
         }
     }
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const title = this._renderTitle();
         const children = this._renderChildren();
         const containerStyle = title ? styles.withTitle : styles.withoutTitle;

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

@@ -1,4 +1,3 @@
-// @flow
 /**
  * This component is a light wrapper for react-popper, allowing us to position
  * and control the tooltip bubble location and visibility as we need.
@@ -7,34 +6,34 @@ import * as React from "react";
 import {Popper} from "react-popper";
 import type {PopperChildrenProps} from "react-popper";
 
-import RefTracker from "../util/ref-tracker.js";
-import type {Placement} from "../util/types.js";
-import type {PopperElementProps} from "./tooltip-bubble.js";
+import RefTracker from "../util/ref-tracker";
+import type {Placement} from "../util/types";
+import type {PopperElementProps} from "./tooltip-bubble";
 
-type Props = {|
+type Props = {
     /**
      * This uses the children-as-a-function approach, mirroring react-popper's
      * implementation.
      *
      * TODO(WB-624): figure out to only allow TooltipBubble and PopoverDialog
      */
-    children: (PopperElementProps) => React.Element<any>,
-
+    children: (arg1: PopperElementProps) => React.ReactElement<any>;
     /**
      * The element that anchors the tooltip bubble.
      * This is used to position the bubble.
      */
-    anchorElement: ?HTMLElement,
-
+    anchorElement: HTMLElement | null | undefined;
     /** Where should the bubble try to go with respect to its anchor. */
-    placement: Placement,
-|};
+    placement: Placement;
+};
 
 export default class TooltipPopper extends React.Component<Props> {
     _bubbleRefTracker: RefTracker = new RefTracker();
     _tailRefTracker: RefTracker = new RefTracker();
 
-    _renderPositionedContent(popperProps: PopperChildrenProps): React.Node {
+    _renderPositionedContent(
+        popperProps: PopperChildrenProps,
+    ): React.ReactNode {
         const {children} = this.props;
 
         // We'll hide some complexity from the children here and ensure
@@ -42,7 +41,7 @@ export default class TooltipPopper extends React.Component<Props> {
         const placement: Placement =
             // We know that popperProps.placement will only be one of our
             // supported values, so just cast it.
-            (popperProps.placement: any) || this.props.placement;
+            (popperProps.placement as any) || this.props.placement;
 
         // Just in case the callbacks have changed, let's update our reference
         // trackers.
@@ -55,8 +54,8 @@ export default class TooltipPopper extends React.Component<Props> {
             placement,
             style: {
                 // NOTE(jeresig): We can't just use `popperProps.style` here
-                // as the Flow type doesn't match Aphrodite's CSS flow props
-                // (as it doesn't camelCase props). So we just copy over the
+                // as the TypeScript type doesn't match Aphrodite's CSS TypeScript
+                // props (as it doesn't camelCase props). So we just copy over the
                 // props that we need, instead.
                 top: popperProps.style.top,
                 left: popperProps.style.left,
@@ -75,14 +74,15 @@ export default class TooltipPopper extends React.Component<Props> {
             },
             updateTailRef: this._tailRefTracker.updateRef,
             isReferenceHidden: popperProps.isReferenceHidden,
-        };
+        } as const;
         return children(bubbleProps);
     }
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {anchorElement, placement} = this.props;
         return (
             <Popper
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                 referenceElement={anchorElement}
                 strategy="fixed"
                 placement={placement}