@khanacademy/wonder-blocks-clickable 2.4.4 → 2.4.6

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

@@ -1,15 +1,16 @@
-// @flow
 import * as React from "react";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 import {render, screen, fireEvent, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import {View} from "@khanacademy/wonder-blocks-core";
-import Clickable from "../clickable.js";
+import Clickable from "../clickable";
 
 describe("Clickable", () => {
     beforeEach(() => {
+        // @ts-expect-error [FEI-5019] - TS2790 - The operand of a 'delete' operator must be optional.
         delete window.location;
+        // @ts-expect-error [FEI-5019] - TS2740 - Type '{ assign: Mock<any, any, any>; }' is missing the following properties from type 'Location': ancestorOrigins, hash, host, hostname, and 8 more.
         window.location = {assign: jest.fn()};
     });
 
@@ -19,7 +20,7 @@ describe("Clickable", () => {
             <MemoryRouter>
                 <View>
                     <Clickable testId="button" href="/foo">
-                        {(eventState) => <h1>Click Me!</h1>}
+                        {(eventState: any) => <h1>Click Me!</h1>}
                     </Clickable>
                     <Switch>
                         <Route path="/foo">
@@ -43,7 +44,7 @@ describe("Clickable", () => {
             <MemoryRouter>
                 <View>
                     <Clickable testId="button" href="/unknown">
-                        {(eventState) => <h1>Click Me!</h1>}
+                        {(eventState: any) => <h1>Click Me!</h1>}
                     </Clickable>
                     <Switch>
                         <Route path="/foo">
@@ -67,7 +68,7 @@ describe("Clickable", () => {
             <MemoryRouter>
                 <View>
                     <Clickable testId="button" href="/foo" skipClientNav>
-                        {(eventState) => <h1>Click Me!</h1>}
+                        {(eventState: any) => <h1>Click Me!</h1>}
                     </Clickable>
                     <Switch>
                         <Route path="/foo">
@@ -91,7 +92,7 @@ describe("Clickable", () => {
             <MemoryRouter>
                 <View>
                     <Clickable testId="button" href="/foo" disabled={true}>
-                        {(eventState) => <h1>Click Me!</h1>}
+                        {(eventState: any) => <h1>Click Me!</h1>}
                     </Clickable>
                     <Switch>
                         <Route path="/foo">
@@ -113,7 +114,7 @@ describe("Clickable", () => {
         // Arrange, Act
         render(
             <Clickable testId="button" href="/foo" skipClientNav={true}>
-                {(eventState) => <h1>Click Me!</h1>}
+                {(eventState: any) => <h1>Click Me!</h1>}
             </Clickable>,
         );
 
@@ -127,7 +128,7 @@ describe("Clickable", () => {
         // Arrange
         render(
             <Clickable testId="button" href="/foo" skipClientNav={true}>
-                {(eventState) => <h1>Click Me!</h1>}
+                {(eventState: any) => <h1>Click Me!</h1>}
             </Clickable>,
         );
 
@@ -149,7 +150,7 @@ describe("Clickable", () => {
                     <Clickable
                         testId="button"
                         href="/foo"
-                        beforeNav={(e) => Promise.reject()}
+                        beforeNav={() => Promise.reject()}
                     >
                         {() => <span>Click me!</span>}
                     </Clickable>
@@ -178,7 +179,7 @@ describe("Clickable", () => {
                     <Clickable
                         testId="button"
                         href="/foo"
-                        beforeNav={(e) => Promise.reject()}
+                        beforeNav={() => Promise.reject()}
                         safeWithNav={safeWithNavMock}
                     >
                         {() => <span>Click me!</span>}
@@ -207,7 +208,7 @@ describe("Clickable", () => {
                     <Clickable
                         testId="button"
                         href="/foo"
-                        beforeNav={(e) => Promise.resolve()}
+                        beforeNav={() => Promise.resolve()}
                     >
                         {() => <span>Click me!</span>}
                     </Clickable>
@@ -238,7 +239,7 @@ describe("Clickable", () => {
                     <Clickable
                         testId="button"
                         href="/foo"
-                        beforeNav={(e) => Promise.resolve()}
+                        beforeNav={() => Promise.resolve()}
                         safeWithNav={safeWithNavMock}
                     >
                         {() => <span>Click me!</span>}
@@ -269,7 +270,7 @@ describe("Clickable", () => {
                     <Clickable
                         testId="button"
                         href="/foo"
-                        safeWithNav={(e) => Promise.resolve()}
+                        safeWithNav={() => Promise.resolve()}
                         skipClientNav={true}
                     >
                         {() => <h1>Click me!</h1>}
@@ -300,8 +301,8 @@ describe("Clickable", () => {
                     <Clickable
                         testId="button"
                         href="/foo"
-                        beforeNav={(e) => Promise.resolve()}
-                        safeWithNav={(e) => Promise.resolve()}
+                        beforeNav={() => Promise.resolve()}
+                        safeWithNav={() => Promise.resolve()}
                         skipClientNav={true}
                     >
                         {() => <h1>Click me!</h1>}
@@ -332,7 +333,7 @@ describe("Clickable", () => {
                     <Clickable
                         testId="button"
                         href="/foo"
-                        safeWithNav={(e) => Promise.reject()}
+                        safeWithNav={() => Promise.reject()}
                         skipClientNav={true}
                     >
                         {() => <h1>Click me!</h1>}
@@ -432,7 +433,7 @@ describe("Clickable", () => {
         // Act
         render(
             <Clickable testId="clickable-button" disabled={true}>
-                {(eventState) => <h1>Click Me!</h1>}
+                {(eventState: any) => <h1>Click Me!</h1>}
             </Clickable>,
         );
 
@@ -451,7 +452,7 @@ describe("Clickable", () => {
                 testId="clickable-button"
                 aria-label="clickable-button-aria-label"
             >
-                {(eventState) => <h1>Click Me!</h1>}
+                {(eventState: any) => <h1>Click Me!</h1>}
             </Clickable>,
         );
 
@@ -470,7 +471,7 @@ describe("Clickable", () => {
         // Act
         render(
             <Clickable testId="clickable-button">
-                {(eventState) => <h1>Click Me!</h1>}
+                {(eventState: any) => <h1>Click Me!</h1>}
             </Clickable>,
         );
 
@@ -486,7 +487,7 @@ describe("Clickable", () => {
             <div>
                 <button>First focusable button</button>
                 <Clickable testId="clickable-button" disabled={true}>
-                    {(eventState) => <h1>Click Me!</h1>}
+                    {(eventState: any) => <h1>Click Me!</h1>}
                 </Clickable>
             </div>,
         );
@@ -513,17 +514,17 @@ describe("Clickable", () => {
         const ClickableWrapper = ({
             children,
             ...restProps
-        }: {|
-            children: React.Node,
-            onKeyDown?: (e: SyntheticKeyboardEvent<>) => mixed,
-            onKeyUp?: (e: SyntheticKeyboardEvent<>) => mixed,
-        |}) => {
+        }: {
+            children: React.ReactNode;
+            onKeyDown?: (e: React.KeyboardEvent) => unknown;
+            onKeyUp?: (e: React.KeyboardEvent) => unknown;
+        }) => {
             return <Clickable {...restProps}>{() => children}</Clickable>;
         };
 
         test("onKeyDown", () => {
             // Arrange
-            let keyCode;
+            let keyCode: any;
             render(
                 <ClickableWrapper onKeyDown={(e) => (keyCode = e.keyCode)}>
                     Click me!
@@ -540,7 +541,7 @@ describe("Clickable", () => {
 
         test("onKeyUp", () => {
             // Arrange
-            let keyCode;
+            let keyCode: any;
             render(
                 <ClickableWrapper onKeyUp={(e) => (keyCode = e.keyCode)}>
                     Click me!

package/src/components/{clickable-behavior.js → clickable-behavior.ts}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 
 // NOTE: Potentially add to this as more cases come up.
@@ -13,7 +12,7 @@ export type ClickableRole =
     | "menu"
     | "tab";
 
-const getAppropriateTriggersForRole = (role: ?ClickableRole) => {
+const getAppropriateTriggersForRole = (role?: ClickableRole | null) => {
     switch (role) {
         // Triggers on ENTER, but not SPACE
         case "link":
@@ -42,7 +41,8 @@ const getAppropriateTriggersForRole = (role: ?ClickableRole) => {
     }
 };
 
-type CommonProps = {|
+// TODO(FEI-5000): Convert back to conditional props after TS migration is complete.
+type Props = {
     /**
      * A function that returns the a React `Element`.
      *
@@ -52,16 +52,14 @@ type CommonProps = {|
     children: (
         state: ClickableState,
         childrenProps: ChildrenProps,
-    ) => React.Node,
-
+    ) => React.ReactElement;
     /**
      * Whether the component is disabled.
      *
      * If the component is disabled, this component will return handlers
      * that do nothing.
      */
-    disabled: boolean,
-
+    disabled: boolean;
     /**
      * A URL.
      *
@@ -71,90 +69,97 @@ type CommonProps = {|
      * press would also navigate to this location. See the triggerOnEnter and
      * triggerOnSpace props for more details.
      */
-    href?: string,
-
+    href?: string;
     /**
      * This should only be used by button.js.
      */
-    type?: "submit",
-
+    type?: "submit";
     /**
      * Specifies the type of relationship between the current document and the
      * linked document. Should only be used when `href` is specified. This
      * defaults to "noopener noreferrer" when `target="_blank"`, but can be
      * overridden by setting this prop to something else.
      */
-    rel?: string,
-
-    skipClientNav?: boolean,
-
+    rel?: string;
+    skipClientNav?: boolean;
     /**
      * Used to indicate the tab order of an element.
      * Use 0 to make an element focusable, and use -1 to make an
      * element non-focusable via keyboard navigation.
      */
-    tabIndex?: number,
-
+    tabIndex?: number;
     /**
      * A function to be executed `onclick`.
      */
-    onClick?: (e: SyntheticEvent<>) => mixed,
-
+    onClick?: (e: React.SyntheticEvent) => unknown;
     /**
      * Run async code in the background while client-side navigating. If the
      * browser does a full page load navigation, the callback promise must be
      * settled before the navigation will occur. Errors are ignored so that
      * navigation is guaranteed to succeed.
      */
-    safeWithNav?: () => Promise<mixed>,
-
+    safeWithNav?: () => Promise<unknown>;
     /**
      * Passed in by withRouter HOC.
      * @ignore
      */
-    history?: any,
-
+    history?: any;
     /**
      * A role that encapsulates how the clickable component should behave, which
      * affects which keyboard actions trigger the component. For example, a
      * component with role="button" should be able to be clicked with both the
      * enter and space keys.
      */
-    role?: ClickableRole,
-
+    role?: ClickableRole;
     /**
      * Respond to raw "keydown" event.
      */
-    onKeyDown?: (e: SyntheticKeyboardEvent<>) => mixed,
-
+    onKeyDown?: (e: React.KeyboardEvent) => unknown;
     /**
      * Respond to raw "keyup" event.
      */
-    onKeyUp?: (e: SyntheticKeyboardEvent<>) => mixed,
-|};
+    onKeyUp?: (e: React.KeyboardEvent) => unknown;
+    /**
+     * A target destination window for a link to open in. Should only be used
+     * when `href` is specified.
+     */
+    // TODO(WB-1262): only allow this prop when `href` is also set.
+    target?: "_blank";
+    /**
+     * Run async code before navigating to the URL passed to `href`. If the
+     * promise returned rejects then navigation will not occur.
+     *
+     * If both safeWithNav and beforeNav are provided, beforeNav will be run
+     * first and safeWithNav will only be run if beforeNav does not reject.
+     *
+     * WARNING: Using this with `target="_blank"` will trigger built-in popup
+     * blockers in Firefox and Safari.  This is because we do navigation
+     * programmatically and `beforeNav` causes a delay which means that the
+     * browser can't make a directly link between a user action and the
+     * navigation.
+     */
+    beforeNav?: () => Promise<unknown>;
+};
 
-export type ClickableState = {|
+export type ClickableState = {
     /**
      * Whether the component is hovered.
      *
      * See component documentation for more details.
      */
-    hovered: boolean,
-
+    hovered: boolean;
     /**
      * Whether the component is hovered.
      *
      * See component documentation for more details.
      */
-    focused: boolean,
-
+    focused: boolean;
     /**
      * Whether the component is hovered.
      *
      * See component documentation for more details.
      */
-    pressed: boolean,
-
+    pressed: boolean;
     /**
      * When we're waiting for beforeNav or safeWithNav to complete an async
      * action, this will be true.
@@ -162,59 +167,29 @@ export type ClickableState = {|
      * NOTE: We only wait for safeWithNav to complete when doing a full page
      * load navigation.
      */
-    waiting: boolean,
-|};
-
-type Props =
-    | {|
-          ...CommonProps,
-
-          /**
-           * A target destination window for a link to open in. Should only be used
-           * when `href` is specified.
-           */
-          // TODO(WB-1262): only allow this prop when `href` is also set.
-          target?: "_blank",
-      |}
-    | {|
-          ...CommonProps,
-
-          /**
-           * Run async code before navigating to the URL passed to `href`. If the
-           * promise returned rejects then navigation will not occur.
-           *
-           * If both safeWithNav and beforeNav are provided, beforeNav will be run
-           * first and safeWithNav will only be run if beforeNav does not reject.
-           *
-           * WARNING: Using this with `target="_blank"` will trigger built-in popup
-           * blockers in Firefox and Safari.  This is because we do navigation
-           * programmatically and `beforeNav` causes a delay which means that the
-           * browser can't make a directly link between a user action and the
-           * navigation.
-           */
-          beforeNav?: () => Promise<mixed>,
-      |};
-
-type DefaultProps = {|
-    disabled: $PropertyType<Props, "disabled">,
-|};
-
-export type ChildrenProps = {|
-    onClick: (e: SyntheticMouseEvent<>) => mixed,
-    onMouseEnter: (e: SyntheticMouseEvent<>) => mixed,
-    onMouseLeave: () => mixed,
-    onMouseDown: () => mixed,
-    onMouseUp: (e: SyntheticMouseEvent<>) => mixed,
-    onTouchStart: () => mixed,
-    onTouchEnd: () => mixed,
-    onTouchCancel: () => mixed,
-    onKeyDown: (e: SyntheticKeyboardEvent<>) => mixed,
-    onKeyUp: (e: SyntheticKeyboardEvent<>) => mixed,
-    onFocus: (e: SyntheticFocusEvent<>) => mixed,
-    onBlur: (e: SyntheticFocusEvent<>) => mixed,
-    tabIndex?: number,
-    rel?: string,
-|};
+    waiting: boolean;
+};
+
+type DefaultProps = {
+    disabled: Props["disabled"];
+};
+
+export type ChildrenProps = {
+    onClick: (e: React.SyntheticEvent) => unknown;
+    onMouseEnter: (e: React.MouseEvent) => unknown;
+    onMouseLeave: () => unknown;
+    onMouseDown: () => unknown;
+    onMouseUp: (e: React.MouseEvent) => unknown;
+    onTouchStart: () => unknown;
+    onTouchEnd: () => unknown;
+    onTouchCancel: () => unknown;
+    onKeyDown: (e: React.KeyboardEvent) => unknown;
+    onKeyUp: (e: React.KeyboardEvent) => unknown;
+    onFocus: (e: React.FocusEvent) => unknown;
+    onBlur: (e: React.FocusEvent) => unknown;
+    tabIndex?: number;
+    rel?: string;
+};
 
 const disabledHandlers = {
     onClick: () => void 0,
@@ -227,12 +202,12 @@ const disabledHandlers = {
     onTouchCancel: () => void 0,
     onKeyDown: () => void 0,
     onKeyUp: () => void 0,
-};
+} as const;
 
 const keyCodes = {
     enter: 13,
     space: 32,
-};
+} as const;
 
 const startState: ClickableState = {
     hovered: false,
@@ -324,7 +299,7 @@ const startState: ClickableState = {
  */
 export default class ClickableBehavior extends React.Component<
     Props,
-    ClickableState,
+    ClickableState
 > {
     waitingForClick: boolean;
     enterClick: boolean;
@@ -336,7 +311,7 @@ export default class ClickableBehavior extends React.Component<
     static getDerivedStateFromProps(
         props: Props,
         state: ClickableState,
-    ): ?Partial<ClickableState> {
+    ): Partial<ClickableState> | null | undefined {
         // If new props are disabled, reset the hovered/pressed states
         if (props.disabled) {
             // Keep the focused state for enabling keyboard navigation.
@@ -382,7 +357,7 @@ export default class ClickableBehavior extends React.Component<
     }
 
     handleSafeWithNav(
-        safeWithNav: () => Promise<mixed>,
+        safeWithNav: () => Promise<unknown>,
         shouldNavigate: boolean,
     ): Promise<void> {
         const {skipClientNav, history} = this.props;
@@ -423,7 +398,9 @@ export default class ClickableBehavior extends React.Component<
         }
     }
 
-    runCallbackAndMaybeNavigate(e: SyntheticEvent<>): ?Promise<void> {
+    runCallbackAndMaybeNavigate(
+        e: React.SyntheticEvent,
+    ): Promise<undefined> | null | undefined {
         const {
             onClick = undefined,
             beforeNav = undefined,
@@ -464,7 +441,7 @@ export default class ClickableBehavior extends React.Component<
                 // All events should be typed as SyntheticEvent<HTMLElement>.
                 // Updating all of the places will take some time so I'll do
                 // this later
-                // $FlowFixMe[prop-missing]
+                // @ts-expect-error [FEI-5019] - TS2322 - Type 'HTMLElement | null' is not assignable to type 'EventTarget & Element'.
                 target = target.parentElement;
             }
         }
@@ -484,13 +461,14 @@ export default class ClickableBehavior extends React.Component<
                 })
                 .catch(() => {});
         } else if (safeWithNav) {
+            // @ts-expect-error [FEI-5019] - TS2322 - Type 'Promise<void>' is not assignable to type 'Promise<undefined>'.
             return this.handleSafeWithNav(safeWithNav, shouldNavigate);
         } else {
             this.navigateOrReset(shouldNavigate);
         }
     }
 
-    handleClick: (e: SyntheticMouseEvent<>) => void = (e) => {
+    handleClick: (e: React.SyntheticEvent) => void = (e) => {
         const {
             onClick = undefined,
             beforeNav = undefined,
@@ -508,7 +486,7 @@ export default class ClickableBehavior extends React.Component<
         this.runCallbackAndMaybeNavigate(e);
     };
 
-    handleMouseEnter: (e: SyntheticMouseEvent<>) => void = (e) => {
+    handleMouseEnter: (e: React.MouseEvent) => void = (e) => {
         if (!this.waitingForClick) {
             this.setState({hovered: true});
         }
@@ -524,7 +502,7 @@ export default class ClickableBehavior extends React.Component<
         this.setState({pressed: true});
     };
 
-    handleMouseUp: (e: SyntheticMouseEvent<>) => void = (e) => {
+    handleMouseUp: (e: React.MouseEvent) => void = (e) => {
         this.setState({pressed: false, focused: false});
     };
 
@@ -542,7 +520,7 @@ export default class ClickableBehavior extends React.Component<
         this.waitingForClick = true;
     };
 
-    handleKeyDown: (e: SyntheticKeyboardEvent<>) => void = (e) => {
+    handleKeyDown: (e: React.KeyboardEvent) => void = (e) => {
         const {onKeyDown, role} = this.props;
         if (onKeyDown) {
             onKeyDown(e);
@@ -568,7 +546,7 @@ export default class ClickableBehavior extends React.Component<
         }
     };
 
-    handleKeyUp: (e: SyntheticKeyboardEvent<>) => void = (e) => {
+    handleKeyUp: (e: React.KeyboardEvent) => void = (e) => {
         const {onKeyUp, role} = this.props;
         if (onKeyUp) {
             onKeyUp(e);
@@ -589,15 +567,15 @@ export default class ClickableBehavior extends React.Component<
         }
     };
 
-    handleFocus: (e: SyntheticFocusEvent<>) => void = (e) => {
+    handleFocus: (e: React.FocusEvent) => void = (e) => {
         this.setState({focused: true});
     };
 
-    handleBlur: (e: SyntheticFocusEvent<>) => void = (e) => {
+    handleBlur: (e: React.FocusEvent) => void = (e) => {
         this.setState({focused: false, pressed: false});
     };
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const childrenProps: ChildrenProps = this.props.disabled
             ? {
                   ...disabledHandlers,