@khanacademy/wonder-blocks-tooltip 1.4.6 → 1.4.7

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render} from "@testing-library/react";
 
@@ -10,7 +9,7 @@ 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,4 +1,3 @@
-// @flow
 import * as React from "react";
 
 import {render, screen, fireEvent} from "@testing-library/react";

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";
@@ -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.
@@ -17,7 +16,7 @@ import {
 
 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";
+import TooltipContent from "./tooltip-content";
 import TooltipTail from "./tooltip-tail";
 
 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.
@@ -11,30 +10,30 @@ 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}

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {css, StyleSheet} from "aphrodite";
 
@@ -9,7 +8,7 @@ import Spacing from "@khanacademy/wonder-blocks-spacing";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 import type {getRefFn, Placement, Offset} from "../util/types";
 
-export type Props = {|
+export type Props = {
     /**
      * Whether we should use the default white background color or switch to a
      * different bg color.
@@ -17,34 +16,31 @@ export type Props = {|
      * NOTE: Added to support custom popovers
      * @ignore
      */
-    color: $Keys<typeof Colors>,
-
+    color: keyof typeof Colors;
     /** The offset of the tail indicating where it should be positioned. */
-    offset?: Offset,
-
+    offset?: Offset;
     /** The placement of the tail with respect to the tooltip anchor. */
-    placement: Placement,
-
+    placement: Placement;
     /** A callback to update the ref of the tail element. */
-    updateRef?: getRefFn,
-|};
-
-type DefaultProps = {|
-    color: $PropertyType<Props, "color">,
-|};
-
-type Dimensions = {|
-    trimlinePoints: [string, string],
-    points: [string, string, string],
-    height: number,
-    width: number,
-|};
-
-type FilterPosition = {|
-    y: string,
-    x: string,
-    offsetShadowX: number,
-|};
+    updateRef?: getRefFn;
+};
+
+type DefaultProps = {
+    color: Props["color"];
+};
+
+type Dimensions = {
+    trimlinePoints: [string, string];
+    points: [string, string, string];
+    height: number;
+    width: number;
+};
+
+type FilterPosition = {
+    y: string;
+    x: string;
+    offsetShadowX: number;
+};
 
 // TODO(somewhatabstract): Replace this really basic unique ID work with
 // something SSR-friendly and more robust.
@@ -136,7 +132,7 @@ export default class TooltipTail extends React.Component<Props> {
         }
     }
 
-    _getFilterPositioning(): ?FilterPosition {
+    _getFilterPositioning(): FilterPosition | null | undefined {
         const {placement} = this.props;
         switch (placement) {
             case "top":
@@ -179,7 +175,7 @@ export default class TooltipTail extends React.Component<Props> {
      * elsewhere in the document. (The `height` value depends on
      * which way the arrow is turned!)
      */
-    _maybeRenderDropshadow(points: [string, string, string]): React.Node {
+    _maybeRenderDropshadow(points: [string, string, string]): React.ReactNode {
         const position = this._getFilterPositioning();
         if (!position) {
             return null;
@@ -308,7 +304,7 @@ export default class TooltipTail extends React.Component<Props> {
         }
     }
 
-    _getArrowStyle(): StyleType {
+    _getArrowStyle(): React.CSSProperties {
         const {placement} = this.props;
         switch (placement) {
             case "top":
@@ -344,7 +340,7 @@ export default class TooltipTail extends React.Component<Props> {
         }
     }
 
-    _renderArrow(): React.Node {
+    _renderArrow(): React.ReactNode {
         const {trimlinePoints, points, height, width} =
             this._calculateDimensionsFromPlacement();
 
@@ -391,7 +387,7 @@ export default class TooltipTail extends React.Component<Props> {
         );
     }
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {offset, placement, updateRef} = this.props;
         return (
             <View