@khanacademy/wonder-blocks-modal 3.0.6 → 3.0.8

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {View} from "@khanacademy/wonder-blocks-core";
@@ -7,18 +6,18 @@ import Spacing from "@khanacademy/wonder-blocks-spacing";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-type Props = {|
+type Props = {
     /** Should the content scroll on overflow, or just expand. */
-    scrollOverflow: boolean,
+    scrollOverflow: boolean;
     /** The contents of the ModalContent */
-    children: React.Node,
+    children: React.ReactNode;
     /** Optional styling to apply to the contents. */
-    style?: StyleType,
-|};
+    style?: StyleType;
+};
 
-type DefaultProps = {|
-    scrollOverflow: $PropertyType<Props, "scrollOverflow">,
-|};
+type DefaultProps = {
+    scrollOverflow: Props["scrollOverflow"];
+};
 
 /**
  * The Modal content included after the header
@@ -31,9 +30,9 @@ export default class ModalContent extends React.Component<Props> {
         scrollOverflow: true,
     };
 
-    static __IS_MODAL_CONTENT__: boolean = true;
+    static __IS_MODAL_CONTENT__ = true;
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {scrollOverflow, style, children} = this.props;
 
         return (
@@ -80,4 +79,4 @@ const styleSheets = {
             padding: `${Spacing.xLarge_32}px ${Spacing.medium_16}px`,
         },
     }),
-};
+} as const;

package/src/components/modal-context.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+type ContextType = {
+    closeModal?: () => unknown;
+};
+
+const defaultContext: ContextType = {
+    closeModal: undefined,
+};
+
+export default React.createContext<ContextType>(
+    defaultContext,
+) as React.Context<ContextType>;

package/src/components/{modal-dialog.js → modal-dialog.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {
@@ -11,57 +10,50 @@ import type {StyleType} from "@khanacademy/wonder-blocks-core";
 import type {MediaLayoutContextValue} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 
-type Props = {|
+type Props = {
     /**
      * The dialog content
      */
-    children: React.Node,
-
+    children: React.ReactNode;
     /**
      * When set, provides a component that can render content above the top of the modal;
      * when not set, no additional content is shown above the modal.
      * This prop is passed down to the ModalDialog.
      */
-    above?: React.Node,
-
+    above?: React.ReactNode;
     /**
      * When set, provides a component that will render content below the bottom of the modal;
      * when not set, no additional content is shown below the modal.
      * This prop is passed down to the ModalDialog.
      */
-    below?: React.Node,
-
+    below?: React.ReactNode;
     /**
      * When set, overrides the default role value. Default role is "dialog"
      * Roles other than dialog and alertdialog aren't appropriate for this
      * component
      */
-    role?: "dialog" | "alertdialog",
-
+    role?: "dialog" | "alertdialog";
     /**
      * Custom styles
      */
-    style?: StyleType,
-
+    style?: StyleType;
     /**
      * Test ID used for e2e testing.
      */
-    testId?: string,
-
+    testId?: string;
     /**
      * The ID of the content labelling this dialog, if applicable.
      */
-    "aria-labelledby"?: string,
-
+    ["aria-labelledby"]?: string;
     /**
      * The ID of the content describing this dialog, if applicable.
      */
-    "aria-describedby"?: string,
-|};
+    ["aria-describedby"]?: string;
+};
 
-type DefaultProps = {|
-    role: $PropertyType<Props, "role">,
-|};
+type DefaultProps = {
+    role: Props["role"];
+};
 
 /**
  * `ModalDialog` is a component that contains these elements:
@@ -78,7 +70,7 @@ export default class ModalDialog extends React.Component<Props> {
         role: "dialog",
     };
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {
             above,
             below,
@@ -171,4 +163,4 @@ const styleSheets = {
             flexDirection: "column",
         },
     }),
-};
+} as const;

package/src/components/{modal-footer.js → modal-footer.tsx}

@@ -1,13 +1,12 @@
-// @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 
-type Props = {|
-    children: React.Node,
-|};
+type Props = {
+    children: React.ReactNode;
+};
 
 /**
  * Modal footer included after the content.
@@ -30,9 +29,9 @@ export default class ModalFooter extends React.Component<Props> {
     static isClassOf(instance: any): boolean {
         return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
     }
-    static __IS_MODAL_FOOTER__: boolean = true;
+    static __IS_MODAL_FOOTER__ = true;
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {children} = this.props;
         return <View style={styles.footer}>{children}</View>;
     }

package/src/components/{modal-header.js → modal-header.tsx}

@@ -1,30 +1,26 @@
-// @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
-import {typeof Breadcrumbs} from "@khanacademy/wonder-blocks-breadcrumbs";
+import {Breadcrumbs} from "@khanacademy/wonder-blocks-breadcrumbs";
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {HeadingMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
-type Common = {|
+type Common = {
     /**
      * The main title rendered in larger bold text.
      */
-    title: string,
-
+    title: string;
     /**
      * Whether to display the "light" version of this component instead, for
      * use when the item is used on a dark background.
      */
-    light: boolean,
-
+    light: boolean;
     /**
      * An id to provide a selector for the title element.
      */
-    titleId: string,
-
+    titleId: string;
     /**
      * Test ID used for e2e testing.
      *
@@ -36,32 +32,28 @@ type Common = {|
      * For testId="some-random-id"
      * The result will be: `some-random-id-modal-header`
      */
-    testId?: string,
-|};
-
-type WithSubtitle = {|
-    ...Common,
+    testId?: string;
+};
 
+type WithSubtitle = Common & {
     /**
      * The dialog subtitle.
      */
-    subtitle: string,
-|};
-
-type WithBreadcrumbs = {|
-    ...Common,
+    subtitle: string;
+};
 
+type WithBreadcrumbs = Common & {
     /**
      * Adds a breadcrumb-trail, appearing in the ModalHeader, above the title.
      */
-    breadcrumbs: React.Element<Breadcrumbs>,
-|};
+    breadcrumbs: React.ReactElement<React.ComponentProps<typeof Breadcrumbs>>;
+};
 
 type Props = Common | WithSubtitle | WithBreadcrumbs;
 
-type DefaultProps = {|
-    light: $PropertyType<Props, "light">,
-|};
+type DefaultProps = {
+    light: Props["light"];
+};
 
 /**
  * This is a helper component that is never rendered by itself. It is always
@@ -111,10 +103,12 @@ export default class ModalHeader extends React.Component<Props> {
         light: true,
     };
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'breadcrumbs' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
             breadcrumbs = undefined,
             light,
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'subtitle' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
             subtitle = undefined,
             testId,
             title,
@@ -204,4 +198,4 @@ const styleSheets = {
             paddingRight: Spacing.xLarge_32,
         },
     }),
-};
+} as const;

package/src/components/{modal-launcher.js → modal-launcher.tsx}

@@ -1,21 +1,18 @@
-// @flow
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {StyleSheet} from "aphrodite";
 
 import {withActionScheduler} from "@khanacademy/wonder-blocks-timing";
-import type {
-    WithActionSchedulerProps,
-    WithoutActionScheduler,
-} from "@khanacademy/wonder-blocks-timing";
+import type {WithActionSchedulerProps} from "@khanacademy/wonder-blocks-timing";
 
-import FocusTrap from "./focus-trap.js";
-import ModalBackdrop from "./modal-backdrop.js";
-import ScrollDisabler from "./scroll-disabler.js";
-import type {ModalElement} from "../util/types.js";
-import ModalContext from "./modal-context.js";
+import FocusTrap from "./focus-trap";
+import ModalBackdrop from "./modal-backdrop";
+import ScrollDisabler from "./scroll-disabler";
+import type {ModalElement} from "../util/types";
+import ModalContext from "./modal-context";
 
-type CommonProps = {|
+// TODO(FEI-5000): Convert back to conditional props after TS migration is complete.
+type Props = {
     /**
      * The modal to render.
      *
@@ -29,43 +26,26 @@ type CommonProps = {|
      * Note: Don't call `closeModal` while rendering! It should be used to
      * respond to user intearction, like `onClick`.
      */
-    modal: ModalElement | (({|closeModal: () => void|}) => ModalElement),
-
-    /**
-     * If the parent needs to be notified when the modal is closed, use this
-     * prop. You probably want to use this instead of `onClose` on the modals
-     * themselves, since this will capture a more complete set of close events.
-     */
-    onClose?: () => mixed,
-
+    modal: ModalElement | React.FC<{closeModal: () => void}>;
     /**
      * Enables the backdrop to dismiss the modal on click/tap
      */
-    backdropDismissEnabled?: boolean,
-
+    backdropDismissEnabled?: boolean;
     /**
      * The selector for the element that will be focused when the dialog shows.
      * When not set, the first tabbable element within the dialog will be used.
      */
-    initialFocusId?: string,
-
+    initialFocusId?: string;
     /**
      * The selector for the element that will be focused after the dialog
      * closes. When not set, the last element focused outside the modal will
      * be used if it exists.
      */
-    closedFocusId?: string,
-
+    closedFocusId?: string;
     /**
      * Test ID used for e2e testing. It's set on the ModalBackdrop
      */
-    testId?: string,
-
-    ...WithActionSchedulerProps,
-|};
-
-type ControlledProps = {|
-    ...CommonProps,
+    testId?: string;
     /**
      * Renders the modal when true, renders nothing when false.
      *
@@ -75,33 +55,34 @@ type ControlledProps = {|
      * should never be used with this prop.  Not doing so will result in an
      * error being thrown.
      */
-    opened: boolean,
-
+    opened?: boolean;
     /**
+     * If the parent needs to be notified when the modal is closed, use this
+     * prop. You probably want to use this instead of `onClose` on the modals
+     * themselves, since this will capture a more complete set of close events.
+     *
      * Called when the modal needs to notify the parent component that it should
      * be closed.
      *
      * This prop must be used when the component is being used as a controlled
      * component.
      */
-    onClose: () => mixed,
-|};
-
-type DefaultProps = {|
-    backdropDismissEnabled: $PropertyType<Props, "backdropDismissEnabled">,
-|};
-
-type UncontrolledProps = {|
-    ...CommonProps,
-    children: ({|openModal: () => mixed|}) => React.Node,
-|};
+    onClose?: () => unknown;
+    /**
+     * WARNING: This props should only be used when using the component as a
+     * controlled component.
+     */
+    children?: (arg1: {openModal: () => unknown}) => React.ReactNode;
+} & WithActionSchedulerProps;
 
-type Props = ControlledProps | UncontrolledProps;
+type DefaultProps = {
+    backdropDismissEnabled: Props["backdropDismissEnabled"];
+};
 
-type State = {|
+type State = {
     /** Whether the modal should currently be open. */
-    opened: boolean,
-|};
+    opened: boolean;
+};
 
 /**
  * This component enables you to launch a modal, covering the screen.
@@ -124,7 +105,7 @@ class ModalLauncher extends React.Component<Props, State> {
      * The most recent element _outside this component_ that received focus.
      * Be default, it captures the element that triggered the modal opening
      */
-    lastElementFocusedOutsideModal: ?HTMLElement;
+    lastElementFocusedOutsideModal: HTMLElement | null | undefined;
 
     static defaultProps: DefaultProps = {
         backdropDismissEnabled: true,
@@ -133,7 +114,7 @@ class ModalLauncher extends React.Component<Props, State> {
     static getDerivedStateFromProps(
         props: Props,
         state: State,
-    ): ?Partial<State> {
+    ): Partial<State> {
         if (typeof props.opened === "boolean" && props.children) {
             // eslint-disable-next-line no-console
             console.warn("'children' and 'opened' can't be used together");
@@ -163,6 +144,7 @@ class ModalLauncher extends React.Component<Props, State> {
 
     _saveLastElementFocused: () => void = () => {
         // keep a reference of the element that triggers the modal
+        // @ts-expect-error [FEI-5019] - TS2322 - Type 'Element | null' is not assignable to type 'HTMLElement | null | undefined'.
         this.lastElementFocusedOutsideModal = document.activeElement;
     };
 
@@ -177,9 +159,9 @@ class ModalLauncher extends React.Component<Props, State> {
 
         // Focus on the specified element after closing the modal.
         if (closedFocusId) {
-            const focusElement = (ReactDOM.findDOMNode(
+            const focusElement = ReactDOM.findDOMNode(
                 document.getElementById(closedFocusId),
-            ): any);
+            ) as any;
 
             if (focusElement) {
                 // Wait for the modal to leave the DOM before trying
@@ -204,7 +186,7 @@ class ModalLauncher extends React.Component<Props, State> {
         this.setState({opened: false}, () => {
             const {onClose} = this.props;
 
-            onClose && onClose();
+            onClose?.();
             this._returnFocus();
         });
     };
@@ -219,7 +201,7 @@ class ModalLauncher extends React.Component<Props, State> {
         }
     }
 
-    render(): React.Node {
+    render(): React.ReactElement | null {
         const renderedChildren = this.props.children
             ? this.props.children({
                   openModal: this._openModal,
@@ -232,9 +214,6 @@ class ModalLauncher extends React.Component<Props, State> {
         }
 
         return (
-            // This flow check is valid, it's the babel plugin which is broken,
-            // see modal-context.js for details.
-            // $FlowFixMe
             <ModalContext.Provider value={{closeModal: this.handleCloseModal}}>
                 {renderedChildren}
                 {this.state.opened &&
@@ -268,9 +247,9 @@ class ModalLauncher extends React.Component<Props, State> {
 }
 
 /** A component that, when mounted, calls `onClose` when Escape is pressed. */
-class ModalLauncherKeypressListener extends React.Component<{|
-    onClose: () => mixed,
-|}> {
+class ModalLauncherKeypressListener extends React.Component<{
+    onClose: () => unknown;
+}> {
     componentDidMount() {
         window.addEventListener("keyup", this._handleKeyup);
     }
@@ -296,7 +275,7 @@ class ModalLauncherKeypressListener extends React.Component<{|
         }
     };
 
-    render(): React.Node {
+    render(): React.ReactElement | null {
         return null;
     }
 }
@@ -312,10 +291,4 @@ const styles = StyleSheet.create({
     },
 });
 
-type ExportProps = WithoutActionScheduler<
-    React.ElementConfig<typeof ModalLauncher>,
->;
-
-export default (withActionScheduler(
-    ModalLauncher,
-): React.ComponentType<ExportProps>);
+export default withActionScheduler(ModalLauncher);

package/src/components/{modal-panel.js → modal-panel.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import Color from "@khanacademy/wonder-blocks-color";
@@ -6,50 +5,49 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-import ModalContent from "./modal-content.js";
-import ModalHeader from "./modal-header.js";
-import ModalFooter from "./modal-footer.js";
-import CloseButton from "./close-button.js";
+import ModalContent from "./modal-content";
+import ModalHeader from "./modal-header";
+import ModalFooter from "./modal-footer";
+import CloseButton from "./close-button";
 
-type Props = {|
+type Props = {
     /**
      * The main contents of the ModalPanel. All other parts of the panel
      * are positioned around it.
      */
-    content: React.Element<typeof ModalContent> | React.Node,
-
+    content:
+        | React.ReactElement<React.ComponentProps<typeof ModalContent>>
+        | React.ReactNode;
     /**
      * The modal header to show at the top of the panel.
      */
-    header?: React.Element<typeof ModalHeader> | React.Node,
-
+    header?:
+        | React.ReactElement<React.ComponentProps<typeof ModalHeader>>
+        | React.ReactNode;
     /**
      * A footer to show beneath the contents.
      */
-    footer?: React.Element<typeof ModalFooter> | React.Node,
-
+    footer?:
+        | React.ReactElement<React.ComponentProps<typeof ModalFooter>>
+        | React.ReactNode;
     /**
      * When true, the close button is shown; otherwise, the close button is not shown.
      */
-    closeButtonVisible: boolean,
-
+    closeButtonVisible: boolean;
     /**
      * Should the contents of the panel become scrollable should they
      * become too tall?
      */
-    scrollOverflow: boolean,
-
+    scrollOverflow: boolean;
     /**
      * Whether to display the "light" version of this component instead, for
      * use when the item is used on a dark background.
      */
-    light: boolean,
-
+    light: boolean;
     /**
      * Any optional styling to apply to the panel.
      */
-    style?: StyleType,
-
+    style?: StyleType;
     /**
      * Called when the close button is clicked.
      *
@@ -57,22 +55,21 @@ type Props = {|
      * Instead, to listen for when the modal closes, add an `onClose` handler
      * to the `ModalLauncher`.  Doing so will throw an error.
      */
-    onClose?: () => mixed,
-
+    onClose?: () => unknown;
     /**
      * Test ID used for e2e testing.
      *
      * In this case, this `testId` comes from the `testId` prop defined in the
      * Dialog variant (e.g. OnePaneDialog).
      */
-    testId?: string,
-|};
+    testId?: string;
+};
 
-type DefaultProps = {|
-    closeButtonVisible: $PropertyType<Props, "closeButtonVisible">,
-    scrollOverflow: $PropertyType<Props, "scrollOverflow">,
-    light: $PropertyType<Props, "light">,
-|};
+type DefaultProps = {
+    closeButtonVisible: Props["closeButtonVisible"];
+    scrollOverflow: Props["scrollOverflow"];
+    light: Props["light"];
+};
 
 /**
  * ModalPanel is  the content container.
@@ -101,11 +98,13 @@ export default class ModalPanel extends React.Component<Props> {
         light: true,
     };
 
-    renderMainContent(): React.Node {
+    renderMainContent(): React.ReactNode {
         const {content, footer, scrollOverflow} = this.props;
 
         const mainContent = ModalContent.isClassOf(content) ? (
-            ((content: any): React.Element<typeof ModalContent>)
+            (content as React.ReactElement<
+                React.ComponentProps<typeof ModalContent>
+            >)
         ) : (
             <ModalContent>{content}</ModalContent>
         );
@@ -125,7 +124,7 @@ export default class ModalPanel extends React.Component<Props> {
         });
     }
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {
             closeButtonVisible,
             footer,