@khanacademy/wonder-blocks-modal 3.0.7 → 3.0.8

package/dist/index.js.flow

@@ -1,2 +1,23 @@
-// @flow
-export * from "../src/index";
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import ModalDialog from "./components/modal-dialog";
+import ModalFooter from "./components/modal-footer";
+import ModalHeader from "./components/modal-header";
+import ModalLauncher from "./components/modal-launcher";
+import ModalPanel from "./components/modal-panel";
+import OnePaneDialog from "./components/one-pane-dialog";
+import maybeGetPortalMountedModalHostElement from "./util/maybe-get-portal-mounted-modal-host-element";
+declare export {
+  ModalHeader,
+  ModalFooter,
+  ModalDialog,
+  ModalPanel,
+  ModalLauncher,
+  OnePaneDialog,
+  maybeGetPortalMountedModalHostElement,
+};

package/dist/util/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The attribute used to identify a modal launcher portal.
+ */
+declare const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
+export { ModalLauncherPortalAttributeName };

package/dist/util/constants.js.flow

@@ -0,0 +1,12 @@
+/**
+ * Flowtype definitions for constants
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+/**
+ * The attribute used to identify a modal launcher portal.
+ */
+declare var ModalLauncherPortalAttributeName: "data-modal-launcher-portal";
+declare export { ModalLauncherPortalAttributeName };

package/dist/util/find-focusable-nodes.d.ts

@@ -0,0 +1 @@
+export declare function findFocusableNodes(root: HTMLElement | Document): Array<HTMLElement>;

package/dist/util/find-focusable-nodes.js.flow

@@ -0,0 +1,10 @@
+/**
+ * Flowtype definitions for find-focusable-nodes
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+declare export function findFocusableNodes(
+  root: HTMLElement | Document
+): Array<HTMLElement>;

package/dist/util/maybe-get-portal-mounted-modal-host-element.d.ts

@@ -0,0 +1,9 @@
+/**
+ * From a given element, finds the next modal host that has been mounted in
+ * a modal portal.
+ * @param {?(Element | Text)} element The element whose ancestors are to be
+ * walked.
+ * @returns {?Element} The next portal-mounted modal host element.
+ * TODO(kevinb): look into getting rid of this
+ */
+export default function maybeGetPortalMountedModalHostElement(element?: Element | Text | null): Element | null | undefined;

package/dist/util/maybe-get-portal-mounted-modal-host-element.js.flow

@@ -0,0 +1,18 @@
+/**
+ * Flowtype definitions for maybe-get-portal-mounted-modal-host-element
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+/**
+ * From a given element, finds the next modal host that has been mounted in
+ * a modal portal.
+ * @param {?(Element | Text)} element The element whose ancestors are to be
+ * walked.
+ * @returns {?Element} The next portal-mounted modal host element.
+ * TODO(kevinb): look into getting rid of this
+ */
+declare export default function maybeGetPortalMountedModalHostElement(
+  element?: Element | Text | null
+): Element | null | void;

package/dist/util/types.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/**
+ * A `ModalElement` is a React element that should either itself be a modal
+ * (OnePaneDialog), or wrap a modal.
+ *
+ * If it's a wrapper component, then its props must be passed along to the child
+ * modal, because we clone this element and add new props in order to capture
+ * `onClose` events.
+ *
+ * NOTE(kevinb): we include `| null` here because that's what React.FC<> returns.
+ */
+export type ModalElement = React.ReactElement | null;

package/dist/util/types.js.flow

@@ -0,0 +1,20 @@
+/**
+ * Flowtype definitions for types
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+
+/**
+ * A `ModalElement` is a React element that should either itself be a modal
+ * (OnePaneDialog), or wrap a modal.
+ *
+ * If it's a wrapper component, then its props must be passed along to the child
+ * modal, because we clone this element and add new props in order to capture
+ * `onClose` events.
+ *
+ * NOTE(kevinb): we include `| null` here because that's what React.FC<> returns.
+ */
+export type ModalElement = React.Element<> | null;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "design": "v2",
   "publishConfig": {
     "access": "public"
   },
   "description": "",
   "main": "dist/index.js",
-  "source": "src/index.js",
+  "types": "dist/index.d.ts",
   "module": "dist/es/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -16,15 +16,15 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.38",
-    "@khanacademy/wonder-blocks-color": "^1.2.1",
-    "@khanacademy/wonder-blocks-core": "^4.7.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.37",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.21",
-    "@khanacademy/wonder-blocks-layout": "^1.4.16",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-timing": "^2.1.1",
-    "@khanacademy/wonder-blocks-typography": "^1.1.38"
+    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.39",
+    "@khanacademy/wonder-blocks-color": "^1.2.2",
+    "@khanacademy/wonder-blocks-core": "^4.8.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.38",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.22",
+    "@khanacademy/wonder-blocks-layout": "^1.4.17",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.6",
+    "@khanacademy/wonder-blocks-timing": "^2.1.2",
+    "@khanacademy/wonder-blocks-typography": "^1.1.39"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -32,7 +32,7 @@
     "react-dom": "16.14.0"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.38",
-    "wb-dev-build-settings": "^0.7.1"
+    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.39",
+    "wb-dev-build-settings": "^0.7.2"
   }
 }

package/src/components/__tests__/{close-button.test.js → close-button.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 

package/src/components/__tests__/{focus-trap.test.js → focus-trap.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";

package/src/components/__tests__/{modal-backdrop.test.js → modal-backdrop.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen, fireEvent, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
@@ -9,7 +8,9 @@ import {
 
 import ModalHeader from "../modal-header";
 
-const exampleBreadcrumbs: React.Element<typeof Breadcrumbs> = (
+const exampleBreadcrumbs: React.ReactElement<
+    React.ComponentProps<typeof Breadcrumbs>
+> = (
     <Breadcrumbs>
         <BreadcrumbsItem>breadcrumb item</BreadcrumbsItem>
     </Breadcrumbs>

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -23,7 +22,7 @@ describe("ModalLauncher", () => {
         // Arrange
         render(
             <ModalLauncher modal={exampleModal} testId="modal-launcher-portal">
-                {({openModal}) => <button onClick={openModal} />}
+                {({openModal}: any) => <button onClick={openModal} />}
             </ModalLauncher>,
         );
 
@@ -38,7 +37,7 @@ describe("ModalLauncher", () => {
 
     test("Modal can be manually opened and closed", () => {
         // Arrange
-        const UnderTest = ({opened}: {|opened: boolean|}) => (
+        const UnderTest = ({opened}: {opened: boolean}) => (
             <ModalLauncher
                 modal={exampleModal}
                 opened={opened}
@@ -62,7 +61,7 @@ describe("ModalLauncher", () => {
 
     test("Modal can close itself after launching", async () => {
         // Arrange
-        const modalFn = ({closeModal}: {|closeModal: () => void|}) => (
+        const modalFn = ({closeModal}: {closeModal: () => void}) => (
             <OnePaneDialog
                 title="Modal launcher test"
                 content={
@@ -83,7 +82,7 @@ describe("ModalLauncher", () => {
                 onClose={onCloseMock}
                 testId="modal-launcher-portal"
             >
-                {({openModal}) => <button onClick={openModal} />}
+                {({openModal}: any) => <button onClick={openModal} />}
             </ModalLauncher>,
         );
 
@@ -103,7 +102,7 @@ describe("ModalLauncher", () => {
         // Arrange
         render(
             <ModalLauncher modal={exampleModal}>
-                {({openModal}) => <button onClick={openModal} />}
+                {({openModal}: any) => <button onClick={openModal} />}
             </ModalLauncher>,
         );
 
@@ -126,7 +125,7 @@ describe("ModalLauncher", () => {
         // Arrange
         render(
             <ModalLauncher modal={exampleModal}>
-                {({openModal}) => <button onClick={openModal} />}
+                {({openModal}: any) => <button onClick={openModal} />}
             </ModalLauncher>,
         );
 
@@ -146,7 +145,7 @@ describe("ModalLauncher", () => {
         // Arrange
         render(
             <ModalLauncher modal={exampleModal}>
-                {({openModal}) => <button onClick={openModal} />}
+                {({openModal}: any) => <button onClick={openModal} />}
             </ModalLauncher>,
         );
 
@@ -169,13 +168,12 @@ describe("ModalLauncher", () => {
 
         // Act
         render(
-            // $FlowIgnore
             <ModalLauncher
                 modal={exampleModal}
                 opened={false}
                 onClose={() => {}}
             >
-                {({openModal}) => <button onClick={openModal} />}
+                {({openModal}: any) => <button onClick={openModal} />}
             </ModalLauncher>,
         );
 
@@ -191,7 +189,6 @@ describe("ModalLauncher", () => {
         jest.spyOn(console, "warn");
 
         // Act
-        // $FlowIgnore
         render(<ModalLauncher modal={exampleModal} opened={false} />);
 
         // Assert
@@ -206,7 +203,6 @@ describe("ModalLauncher", () => {
         jest.spyOn(console, "warn");
 
         // Act
-        // $FlowIgnore
         render(<ModalLauncher modal={exampleModal} />);
 
         // Assert
@@ -253,7 +249,7 @@ describe("ModalLauncher", () => {
                     />
                 }
             >
-                {({openModal}) => (
+                {({openModal}: any) => (
                     <button onClick={openModal}>Open modal</button>
                 )}
             </ModalLauncher>,
@@ -303,7 +299,7 @@ describe("ModalLauncher", () => {
                     <ModalLauncher
                         onClose={() => handleClose()}
                         opened={opened}
-                        modal={({closeModal}) => (
+                        modal={({closeModal}: any) => (
                             <OnePaneDialog
                                 title="Regular modal"
                                 content={<View>Hello World</View>}
@@ -371,7 +367,7 @@ describe("ModalLauncher", () => {
                         onClose={() => handleClose()}
                         opened={opened}
                         closedFocusId="button-to-focus-on"
-                        modal={({closeModal}) => (
+                        modal={({closeModal}: any) => (
                             <OnePaneDialog
                                 title="Triggered from action menu"
                                 content={<View>Hello World</View>}

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 

package/src/components/__tests__/{one-pane-dialog.test.js → one-pane-dialog.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 

package/src/components/{close-button.js → close-button.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {icons} from "@khanacademy/wonder-blocks-icon";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
@@ -6,21 +5,18 @@ import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 import ModalContext from "./modal-context";
 
-type Props = {|
+type Props = {
     /**
      * Whether the button is on a dark/colored background.
      *
      * Sets primary button background color to white, and secondary and
      * tertiary button title to color.
      */
-    light?: boolean,
-
+    light?: boolean;
     /** Optional click handler */
-    onClick?: () => mixed,
-
+    onClick?: () => unknown;
     /** Optional custom styles. */
-    style?: StyleType,
-
+    style?: StyleType;
     /**
      * Test ID used for e2e testing.
      *
@@ -32,11 +28,11 @@ type Props = {|
      * For testId="some-random-id"
      * The result will be: `some-random-id-modal-panel`
      */
-    testId?: string,
-|};
+    testId?: string;
+};
 
 export default class CloseButton extends React.Component<Props> {
-    render(): React.Node {
+    render(): React.ReactElement {
         const {light, onClick, style, testId} = this.props;
 
         return (

package/src/components/{focus-trap.js → focus-trap.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
@@ -30,24 +29,23 @@ const FOCUSABLE_ELEMENTS =
  *     instead if we were to generalize!
  */
 
-type Props = {|
-    children: React.Node,
-
+type Props = {
+    children: React.ReactNode;
     /**
      * Style applied to the View containing children.
      * TODO(kevinb): only allow z-index to be specified.  We'll be able to remove
      * this prop once we remove all uses of z-indexes from webapp.
      */
-    style?: StyleType,
-|};
+    style?: StyleType;
+};
 
 export default class FocusTrap extends React.Component<Props> {
     /**
      * Tabbing is restricted to descendents of this element.
      */
-    modalRoot: ?Node;
+    modalRoot: Node | null | undefined;
 
-    getModalRoot: (node: any) => void = (node) => {
+    getModalRoot: (node?: any) => void = (node) => {
         if (!node) {
             // The component is being umounted
             return;
@@ -65,11 +63,11 @@ export default class FocusTrap extends React.Component<Props> {
     /**
      * Try to focus the given node. Return true if successful.
      */
-    tryToFocus(node: Node): ?boolean {
+    tryToFocus(node: Node): boolean | null | undefined {
         if (node instanceof HTMLElement) {
             try {
                 node.focus();
-            } catch (e) {
+            } catch (e: any) {
                 // ignore error
             }
 
@@ -84,7 +82,7 @@ export default class FocusTrap extends React.Component<Props> {
      * First element within the modal, false = Last element within the modal.
      */
     focusElementIn(isLast: boolean) {
-        const modalRootAsHtmlEl = ((this.modalRoot: any): HTMLElement);
+        const modalRootAsHtmlEl = this.modalRoot as HTMLElement;
         // Get the list of available focusable elements within the modal.
         const focusableNodes = Array.from(
             modalRootAsHtmlEl.querySelectorAll(FOCUSABLE_ELEMENTS),
@@ -112,7 +110,7 @@ export default class FocusTrap extends React.Component<Props> {
         this.focusElementIn(true);
     };
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {style} = this.props;
 
         return (
@@ -130,6 +128,7 @@ export default class FocusTrap extends React.Component<Props> {
                  * they're always in view, this prevents page scrolling when
                  * tabbing. */}
                 <div
+                    // @ts-expect-error [FEI-5019] - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
                     tabIndex="0"
                     className="modal-focus-trap-first"
                     onFocus={this.handleFocusMoveToLast}
@@ -139,6 +138,7 @@ export default class FocusTrap extends React.Component<Props> {
                     {this.props.children}
                 </View>
                 <div
+                    // @ts-expect-error [FEI-5019] - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
                     tabIndex="0"
                     className="modal-focus-trap-last"
                     onFocus={this.handleFocusMoveToFirst}

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {StyleSheet} from "aphrodite";
@@ -11,20 +10,19 @@ import {findFocusableNodes} from "../util/find-focusable-nodes";
 
 import type {ModalElement} from "../util/types";
 
-type Props = {|
-    children: ModalElement,
-    onCloseModal: () => mixed,
+type Props = {
+    children: ModalElement;
+    onCloseModal: () => unknown;
     /**
      * 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;
     /**
      * Test ID used for e2e testing.
      */
-    testId?: string,
-|};
+    testId?: string;
+};
 
 /**
  * A private component used by ModalLauncher. This is the fixed-position
@@ -38,7 +36,7 @@ type Props = {|
  */
 export default class ModalBackdrop extends React.Component<Props> {
     componentDidMount() {
-        const node: HTMLElement = (ReactDOM.findDOMNode(this): any);
+        const node: HTMLElement = ReactDOM.findDOMNode(this) as any;
         if (!node) {
             return;
         }
@@ -57,7 +55,7 @@ export default class ModalBackdrop extends React.Component<Props> {
         }, 0);
     }
 
-    _mousePressedOutside: boolean = false;
+    _mousePressedOutside = false;
 
     /**
      * Returns an element specified by the user
@@ -69,9 +67,9 @@ export default class ModalBackdrop extends React.Component<Props> {
             return null;
         }
 
-        return (ReactDOM.findDOMNode(
+        return ReactDOM.findDOMNode(
             node.querySelector(`#${initialFocusId}`),
-        ): any);
+        ) as any;
     }
 
     /**
@@ -95,9 +93,9 @@ export default class ModalBackdrop extends React.Component<Props> {
     _getDialogElement(node: HTMLElement): HTMLElement {
         // If no focusable elements are found,
         // the dialog content element itself will receive focus.
-        const dialogElement: HTMLElement = (ReactDOM.findDOMNode(
+        const dialogElement: HTMLElement = ReactDOM.findDOMNode(
             node.querySelector('[role="dialog"]'),
-        ): any);
+        ) as any;
         // add tabIndex to make the Dialog focusable
         dialogElement.tabIndex = -1;
 
@@ -109,12 +107,16 @@ export default class ModalBackdrop extends React.Component<Props> {
      * _directly_ from the positioner, not bubbled up from its children), close
      * the modal.
      */
-    handleMouseDown: (e: SyntheticEvent<>) => void = (e: SyntheticEvent<>) => {
+    handleMouseDown: (e: React.SyntheticEvent) => void = (
+        e: React.SyntheticEvent,
+    ) => {
         // Confirm that it is the backdrop that is being clicked, not the child
         this._mousePressedOutside = e.target === e.currentTarget;
     };
 
-    handleMouseUp: (e: SyntheticEvent<>) => void = (e: SyntheticEvent<>) => {
+    handleMouseUp: (e: React.SyntheticEvent) => void = (
+        e: React.SyntheticEvent,
+    ) => {
         // Confirm that it is the backdrop that is being clicked, not the child
         // and that the mouse was pressed in the backdrop first.
         if (e.target === e.currentTarget && this._mousePressedOutside) {
@@ -123,11 +125,11 @@ export default class ModalBackdrop extends React.Component<Props> {
         this._mousePressedOutside = false;
     };
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {children, testId} = this.props;
         const backdropProps = {
             [ModalLauncherPortalAttributeName]: true,
-        };
+        } as const;
 
         return (
             <View

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>;