@khanacademy/wonder-blocks-tooltip 1.4.5 → 1.4.7

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {css, StyleSheet} from "aphrodite";
 
@@ -7,9 +6,9 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import type {getRefFn, Placement, Offset} from "../util/types.js";
+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

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

@@ -1,4 +1,3 @@
-// @flow
 /**
  * The Tooltip component provides the means to anchor some additional
  * information to some content. The additional information is shown in a
@@ -23,38 +22,35 @@ import * as ReactDOM from "react-dom";
 
 import {
     UniqueIDProvider,
-    type IIdentifierFactory,
+    IIdentifierFactory,
 } from "@khanacademy/wonder-blocks-core";
 import {maybeGetPortalMountedModalHostElement} from "@khanacademy/wonder-blocks-modal";
 import type {Typography} from "@khanacademy/wonder-blocks-typography";
 import type {AriaProps} from "@khanacademy/wonder-blocks-core";
 
-import TooltipAnchor from "./tooltip-anchor.js";
-import TooltipBubble from "./tooltip-bubble.js";
-import TooltipContent from "./tooltip-content.js";
-import TooltipPopper from "./tooltip-popper.js";
-import type {Placement} from "../util/types.js";
-
-type Props = {|
-    ...AriaProps,
+import TooltipAnchor from "./tooltip-anchor";
+import TooltipBubble from "./tooltip-bubble";
+import TooltipContent from "./tooltip-content";
+import TooltipPopper from "./tooltip-popper";
+import type {Placement} from "../util/types";
 
+type Props = AriaProps & {
     /**
      * The content for anchoring the tooltip.
      * This component will be used to position the tooltip.
      */
-    children: React.Element<any> | string,
-
+    children: React.ReactElement<any> | string;
     /**
      * The title of the tooltip.
      * Optional.
      */
-    title?: string | React.Element<Typography>,
-
+    title?: string | React.ReactElement<React.ComponentProps<Typography>>;
     /**
      * The content to render in the tooltip.
      */
-    content: string | React.Element<typeof TooltipContent>,
-
+    content:
+        | string
+        | React.ReactElement<React.ComponentProps<typeof TooltipContent>>;
     /**
      * The unique identifier to give to the tooltip. Provide this in cases where
      * you want to override the default accessibility solution. This identifier
@@ -68,8 +64,7 @@ type Props = {|
      * to the children with a unique identifier pointing to the tooltip bubble
      * content.
      */
-    id?: string,
-
+    id?: string;
     /**
      * 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
@@ -88,14 +83,12 @@ type Props = {|
      * anchor element, so you may need to implement an additional accessibility
      * solution when overriding anchor focusivity.
      */
-    forceAnchorFocusivity?: boolean,
-
+    forceAnchorFocusivity?: boolean;
     /**
      * Where the tooltip should appear in relation to the anchor element.
      * Defaults to "top".
      */
-    placement: Placement,
-
+    placement: Placement;
     /**
      * Renders the tooltip when true, renders nothing when false.
      *
@@ -103,33 +96,32 @@ type Props = {|
      * parent is responsible for managing the opening/closing of the tooltip
      * when using this prop.
      */
-    opened?: boolean,
-
+    opened?: boolean;
     /**
      * Test ID used for e2e testing.
      */
-    testId?: string,
-|};
+    testId?: string;
+};
 
-type State = {|
+type State = {
     /**
      * Whether the tooltip is open by hovering/focusing on the anchor element.
      */
-    active: boolean,
+    active: boolean;
     /**
      * Whether the tooltip is open by hovering on the tooltip bubble.
      */
-    activeBubble: boolean,
+    activeBubble: boolean;
     /**
      * The element that activates the tooltip.
      */
-    anchorElement: ?HTMLElement,
-|};
+    anchorElement: HTMLElement | null | undefined;
+};
 
-type DefaultProps = {|
-    forceAnchorFocusivity: $PropertyType<Props, "forceAnchorFocusivity">,
-    placement: $PropertyType<Props, "placement">,
-|};
+type DefaultProps = {
+    forceAnchorFocusivity: Props["forceAnchorFocusivity"];
+    placement: Props["placement"];
+};
 
 /**
  * Use a tooltip to help describe an on screen object.
@@ -168,7 +160,7 @@ export default class Tooltip extends React.Component<Props, State> {
     static getDerivedStateFromProps(
         props: Props,
         state: State,
-    ): ?Partial<State> {
+    ): Partial<State> | null {
         return {
             active:
                 typeof props.opened === "boolean" ? props.opened : state.active,
@@ -180,15 +172,17 @@ export default class Tooltip extends React.Component<Props, State> {
         activeBubble: false,
         anchorElement: null,
     };
-    static ariaContentId: string = "aria-content";
+    static ariaContentId = "aria-content";
 
-    _updateAnchorElement(ref: ?Element) {
+    _updateAnchorElement(ref?: Element | null) {
         if (ref && ref !== this.state.anchorElement) {
-            this.setState({anchorElement: ((ref: any): HTMLElement)});
+            this.setState({anchorElement: ref as HTMLElement});
         }
     }
 
-    _renderBubbleContent(): React.Element<typeof TooltipContent> {
+    _renderBubbleContent(): React.ReactElement<
+        React.ComponentProps<typeof TooltipContent>
+    > {
         const {title, content} = this.props;
         if (typeof content === "string") {
             return <TooltipContent title={title}>{content}</TooltipContent>;
@@ -199,7 +193,7 @@ export default class Tooltip extends React.Component<Props, State> {
         }
     }
 
-    _renderPopper(ids?: IIdentifierFactory): React.Node {
+    _renderPopper(ids?: IIdentifierFactory): React.ReactNode {
         const {id} = this.props;
         const bubbleId = ids ? ids.get(Tooltip.ariaContentId) : id;
         if (!bubbleId) {
@@ -232,7 +226,7 @@ export default class Tooltip extends React.Component<Props, State> {
         );
     }
 
-    _getHost(): ?Element {
+    _getHost(): Element | null | undefined {
         const {anchorElement} = this.state;
 
         return (
@@ -241,7 +235,7 @@ export default class Tooltip extends React.Component<Props, State> {
         );
     }
 
-    _renderTooltipAnchor(ids?: IIdentifierFactory): React.Node {
+    _renderTooltipAnchor(ids?: IIdentifierFactory): React.ReactNode {
         const {children, forceAnchorFocusivity} = this.props;
         const {active, activeBubble} = this.state;
 
@@ -265,15 +259,17 @@ export default class Tooltip extends React.Component<Props, State> {
         );
     }
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {id} = this.props;
         if (id) {
             // Let's bypass the extra weight of an id provider since we don't
             // need it.
+            // @ts-expect-error [FEI-5019] - TS2322 - Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
             return this._renderTooltipAnchor();
         } else {
             return (
                 <UniqueIDProvider scope="tooltip" mockOnFirstRender={true}>
+                    {/* @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call. */}
                     {(ids) => this._renderTooltipAnchor(ids)}
                 </UniqueIDProvider>
             );

package/src/index.ts

@@ -0,0 +1,11 @@
+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";
+
+export {Tooltip as default, TooltipContent, TooltipPopper, TooltipTail};
+
+export type {Placement, PopperElementProps};

package/src/util/__tests__/{active-tracker.test.js → active-tracker.test.ts}

@@ -1,6 +1,5 @@
-// @flow
-import ActiveTracker from "../active-tracker.js";
-import type {IActiveTrackerSubscriber} from "../active-tracker.js";
+import ActiveTracker from "../active-tracker";
+import type {IActiveTrackerSubscriber} from "../active-tracker";
 
 class MockSubscriber implements IActiveTrackerSubscriber {
     activeStateStolen = jest.fn();

package/src/util/__tests__/{ref-tracker.test.js → ref-tracker.test.tsx}

@@ -1,12 +1,11 @@
-// @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 RefTracker from "../ref-tracker.js";
+import RefTracker from "../ref-tracker";
 
-type CallbackFn = (?HTMLElement) => void;
+type CallbackFn = (arg1?: HTMLElement | null | undefined) => void;
 
 describe("RefTracker", () => {
     describe("#setCallback", () => {
@@ -24,7 +23,7 @@ describe("RefTracker", () => {
         test("called with non-function, throws", () => {
             // Arrange
             const tracker = new RefTracker();
-            const targetFn = (({}: any): CallbackFn);
+            const targetFn = {} as CallbackFn;
 
             // Act
             const underTest = () => tracker.setCallback(targetFn);
@@ -49,7 +48,7 @@ describe("RefTracker", () => {
                 // Arrange
                 const tracker = new RefTracker();
                 const targetFn = jest.fn();
-                const ref = await new Promise((resolve) => {
+                const ref = await new Promise((resolve: any) => {
                     const nodes = (
                         <View>
                             <View ref={resolve} />
@@ -57,7 +56,9 @@ describe("RefTracker", () => {
                     );
                     render(nodes);
                 });
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ReactInstance | null | undefined'.
                 const domNode = ReactDOM.findDOMNode(ref);
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'Element | Component<any, {}, any> | null | undefined'.
                 tracker.updateRef(ref);
 
                 // Act
@@ -85,7 +86,7 @@ describe("RefTracker", () => {
             test("real ref, no callback, no throw", async () => {
                 // Arrange
                 const tracker = new RefTracker();
-                const ref = await new Promise((resolve) => {
+                const ref = await new Promise((resolve: any) => {
                     const nodes = (
                         <View>
                             <View ref={resolve} />
@@ -95,6 +96,7 @@ describe("RefTracker", () => {
                 });
 
                 // Act
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'Element | Component<any, {}, any> | null | undefined'.
                 const underTest = () => tracker.updateRef(ref);
 
                 // Assert
@@ -107,7 +109,7 @@ describe("RefTracker", () => {
                 const targetFn = jest.fn();
                 tracker.setCallback(targetFn);
 
-                const ref = await new Promise((resolve) => {
+                const ref = await new Promise((resolve: any) => {
                     const nodes = (
                         <View>
                             <View ref={resolve} />
@@ -115,9 +117,11 @@ describe("RefTracker", () => {
                     );
                     render(nodes);
                 });
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ReactInstance | null | undefined'.
                 const domNode = ReactDOM.findDOMNode(ref);
 
                 // Act
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'Element | Component<any, {}, any> | null | undefined'.
                 tracker.updateRef(ref);
 
                 // Assert
@@ -130,7 +134,7 @@ describe("RefTracker", () => {
                 const targetFn = jest.fn();
                 tracker.setCallback(targetFn);
 
-                const ref = await new Promise((resolve) => {
+                const ref = await new Promise((resolve: any) => {
                     const nodes = (
                         <View>
                             <View ref={resolve} />
@@ -138,10 +142,12 @@ describe("RefTracker", () => {
                     );
                     render(nodes);
                 });
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'Element | Component<any, {}, any> | null | undefined'.
                 tracker.updateRef(ref);
                 targetFn.mockClear();
 
                 // Act
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'Element | Component<any, {}, any> | null | undefined'.
                 tracker.updateRef(ref);
 
                 // Assert

package/src/util/{active-tracker.js → active-tracker.ts}

@@ -1,5 +1,3 @@
-// @flow
-
 /**
  * This interface should be implemented by types that are interested in the
  * notifications of active state being stolen. Generally, this would also be
@@ -39,6 +37,7 @@ export interface IActiveTrackerSubscriber {
  */
 export default class ActiveTracker {
     _subscribers: Array<IActiveTrackerSubscriber> = [];
+    // @ts-expect-error [FEI-5019] - TS2564 - Property '_active' has no initializer and is not definitely assigned in the constructor.
     _active: boolean;
 
     _getIndex(who: IActiveTrackerSubscriber): number {

package/src/util/{constants.js → constants.ts}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * The attribute used to identify a tooltip portal.
  */

package/src/util/{ref-tracker.js → ref-tracker.ts}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * 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
@@ -10,13 +9,18 @@ import * as ReactDOM from "react-dom";
 
 import type {PopperChildrenProps} from "react-popper";
 
-type PopperRef = $PropertyType<PopperChildrenProps, "ref">;
+type PopperRef = PopperChildrenProps["ref"];
 
 export default class RefTracker {
-    _lastRef: ?HTMLElement;
-    _targetFn: ?(?HTMLElement) => void;
+    _lastRef: HTMLElement | null | undefined;
+    // @ts-expect-error [FEI-5019] - TS2564 - Property '_targetFn' has no initializer and is not definitely assigned in the constructor.
+    _targetFn: (
+        arg1?: HTMLElement | null | undefined,
+    ) => void | null | undefined;
 
-    updateRef: (ref: ?(React.Component<any> | Element)) => void = (ref) => {
+    updateRef: (
+        ref?: React.Component<any> | Element | null | undefined,
+    ) => void = (ref) => {
         if (ref) {
             // We only want to update the reference if it is
             // actually changed. Otherwise, we can trigger another render that
@@ -24,17 +28,20 @@ export default class RefTracker {
             const domNode = ReactDOM.findDOMNode(ref);
             if (domNode instanceof HTMLElement && domNode !== this._lastRef) {
                 this._lastRef = domNode;
-                this._targetFn && this._targetFn(domNode);
+                this._targetFn?.(domNode);
             }
         }
     };
 
-    setCallback: (targetFn: ?PopperRef) => void = (targetFn) => {
+    setCallback: (targetFn?: PopperRef | null | undefined) => void = (
+        targetFn,
+    ) => {
         if (this._targetFn !== targetFn) {
             if (targetFn && typeof targetFn !== "function") {
                 throw new Error("targetFn must be a function");
             }
 
+            // @ts-expect-error [FEI-5019] - TS2322 - Type '((instance: any) => void) | null' is not assignable to type '(arg1?: HTMLElement | null | undefined) => void | null | undefined'.
             this._targetFn = targetFn || null;
             if (this._lastRef && this._targetFn) {
                 this._targetFn(this._lastRef);

package/src/util/types.ts

@@ -0,0 +1,32 @@
+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/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "exclude": ["dist"],
+    "extends": "../tsconfig-shared.json",
+    "compilerOptions": {
+        "outDir": "./dist",
+        "rootDir": "src",
+    },
+    "references": [
+        {"path": "../wonder-blocks-color"},
+        {"path": "../wonder-blocks-core"},
+        {"path": "../wonder-blocks-layout"},
+        {"path": "../wonder-blocks-modal"},
+        {"path": "../wonder-blocks-spacing"},
+        {"path": "../wonder-blocks-typography"},
+    ]
+}