@khanacademy/wonder-blocks-modal 2.1.44 → 2.2.2

package/src/components/__tests__/modal-launcher.test.js

@@ -1,11 +1,15 @@
 // @flow
 import * as React from "react";
 import {mount, shallow} from "enzyme";
+import "jest-enzyme";
 
 import ModalLauncher from "../modal-launcher.js";
 import OnePaneDialog from "../one-pane-dialog.js";
 
-const sleep = (duration: number = 0) =>
+import {unmountAll} from "../../../../../utils/testing/enzyme-shim.js";
+import {getElementAttachedToDocument} from "../../../../../utils/testing/get-element-attached-to-document.js";
+
+const wait = (duration: number = 0) =>
     new Promise((resolve, reject) => setTimeout(resolve, duration));
 
 const exampleModal = (
@@ -16,19 +20,41 @@ const exampleModal = (
 );
 
 describe("ModalLauncher", () => {
+    beforeEach(() => {
+        jest.useRealTimers();
+    });
+
+    afterEach(() => {
+        unmountAll();
+        if (document.body) {
+            document.body.innerHTML = "";
+        }
+    });
+
     window.scrollTo = jest.fn();
 
-    test("Children can launch the modal", () => {
+    test("Children can launch the modal", async () => {
+        // Arrange
+        // We need the elements in the DOM document, it seems, for this test
+        // to work. Changing to testing-library will likely fix this.
+        const containerDiv = getElementAttachedToDocument("container");
         const wrapper = mount(
             <ModalLauncher modal={exampleModal}>
                 {({openModal}) => <button onClick={openModal} />}
             </ModalLauncher>,
+            {attachTo: containerDiv},
         );
+
+        // Act
         wrapper.find("button").simulate("click");
+        await wait();
+
         const portal = global.document.querySelector(
             "[data-modal-launcher-portal]",
         );
-        expect(portal instanceof HTMLDivElement).toBe(true);
+
+        // Assert
+        expect(portal).toBeInstanceOf(HTMLDivElement);
     });
 
     test("Modal can be manually opened and closed", () => {
@@ -62,7 +88,7 @@ describe("ModalLauncher", () => {
         //     this function receives a `closeModal` argument that works.
         const modalFn = ({closeModal}: {|closeModal: () => void|}) => {
             expect(opened).toBe(true);
-            setImmediate(closeModal);
+            setTimeout(closeModal, 0);
             return exampleModal;
         };
 
@@ -110,6 +136,7 @@ describe("ModalLauncher", () => {
 
         // Simulate an Escape keypress.
         const event: KeyboardEvent = (document.createEvent("Event"): any);
+        // $FlowIgnore[cannot-write]
         event.key = "Escape";
         event.initEvent("keyup", true, true);
         document.dispatchEvent(event);
@@ -254,7 +281,7 @@ describe("ModalLauncher", () => {
         wrapper.find("button").simulate("click");
 
         // wait for styles to be applied
-        await sleep();
+        await wait();
 
         // Assert
         expect(document.activeElement).not.toBe(lastButton);
@@ -262,6 +289,9 @@ describe("ModalLauncher", () => {
 
     test("if modal is closed, return focus to the last element focused outside the modal", async () => {
         // Arrange
+        // We need the elements in the DOM document, it seems, for this test
+        // to work. Changing to testing-library will likely fix this.
+        const containerDiv = getElementAttachedToDocument("container");
         let savedCloseModal = () => {
             throw new Error(`closeModal wasn't saved`);
         };
@@ -277,6 +307,7 @@ describe("ModalLauncher", () => {
                     <button onClick={openModal} data-last-focused-button />
                 )}
             </ModalLauncher>,
+            {attachTo: containerDiv},
         );
 
         const lastButton = wrapper
@@ -289,7 +320,7 @@ describe("ModalLauncher", () => {
         wrapper.find("button").simulate("click");
 
         // wait for styles to be applied
-        await sleep();
+        await wait();
 
         // Act
         savedCloseModal(); // close the modal

package/src/components/__tests__/modal-panel.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 

package/src/components/__tests__/one-pane-dialog.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import OnePaneDialog from "../one-pane-dialog.js";
 

package/src/components/modal-backdrop.js

@@ -7,6 +7,8 @@ import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {ModalLauncherPortalAttributeName} from "../util/constants.js";
 
+import {findFocusableNodes} from "../util/find-focusable-nodes.js";
+
 import type {ModalElement} from "../util/types.js";
 
 type Props = {|
@@ -24,13 +26,6 @@ type Props = {|
     testId?: string,
 |};
 
-/**
- * List of elements that can be focused
- * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
- */
-const FOCUSABLE_ELEMENTS =
-    'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
-
 /**
  * A private component used by ModalLauncher. This is the fixed-position
  * container element that gets mounted outside the DOM. It overlays the modal
@@ -62,6 +57,8 @@ export default class ModalBackdrop extends React.Component<Props> {
         }, 0);
     }
 
+    _mousePressedOutside: boolean = false;
+
     /**
      * Returns an element specified by the user
      */
@@ -82,7 +79,7 @@ export default class ModalBackdrop extends React.Component<Props> {
      */
     _getFirstFocusableElement(node: HTMLElement): HTMLElement | null {
         // get a collection of elements that can be focused
-        const focusableElements = node.querySelectorAll(FOCUSABLE_ELEMENTS);
+        const focusableElements = findFocusableNodes(node);
 
         if (!focusableElements) {
             return null;
@@ -112,12 +109,18 @@ export default class ModalBackdrop extends React.Component<Props> {
      * _directly_ from the positioner, not bubbled up from its children), close
      * the modal.
      */
-    handleClick: (e: SyntheticEvent<>) => void = (e: SyntheticEvent<>) => {
-        // Was the lowest-level click target (`e.target`) the positioner element
-        // (`e.currentTarget`)?
-        if (e.target === e.currentTarget) {
+    handleMouseDown: (e: SyntheticEvent<>) => void = (e: 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<>) => {
+        // 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) {
             this.props.onCloseModal();
         }
+        this._mousePressedOutside = false;
     };
 
     render(): React.Node {
@@ -129,7 +132,8 @@ export default class ModalBackdrop extends React.Component<Props> {
         return (
             <View
                 style={styles.modalPositioner}
-                onClick={this.handleClick}
+                onMouseDown={this.handleMouseDown}
+                onMouseUp={this.handleMouseUp}
                 testId={testId}
                 {...backdropProps}
             >

package/src/components/one-pane-dialog.stories.js

@@ -50,7 +50,7 @@ export default {
     },
 };
 
-export const simple: StoryComponentType = () => {
+export const Simple: StoryComponentType = () => {
     const modal = (
         <OnePaneDialog
             testId="one-pane-dialog-above"
@@ -98,7 +98,7 @@ const styles = StyleSheet.create({
     },
 });
 
-export const kitchenSink: StoryComponentType = () => {
+export const KitchenSink: StoryComponentType = () => {
     const modal = (
         <OnePaneDialog
             title="Single-line title"
@@ -142,7 +142,7 @@ export const kitchenSink: StoryComponentType = () => {
     );
 };
 
-export const withOpener: StoryComponentType = () => {
+export const WithOpener: StoryComponentType = () => {
     type MyModalProps = {|
         closeModal: () => void,
     |};
@@ -191,7 +191,7 @@ export const withOpener: StoryComponentType = () => {
     );
 };
 
-withOpener.parameters = {
+WithOpener.parameters = {
     viewport: {
         defaultViewport: null,
     },

package/src/util/find-focusable-nodes.js

@@ -0,0 +1,14 @@
+// @flow
+
+/**
+ * List of elements that can be focused
+ * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
+ */
+const FOCUSABLE_ELEMENTS =
+    'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
+
+export function findFocusableNodes(
+    root: HTMLElement | Document,
+): Array<HTMLElement> {
+    return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
+}

package/src/util/maybe-get-portal-mounted-modal-host-element.test.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {ModalLauncherPortalAttributeName} from "./constants.js";
 import maybeGetPortalMountedModalHostElement from "./maybe-get-portal-mounted-modal-host-element.js";
@@ -108,9 +109,8 @@ describe("maybeGetPortalMountedModalHostElement", () => {
                 if (node) {
                     // Act
                     const candidateElement = ReactDOM.findDOMNode(node);
-                    const result = maybeGetPortalMountedModalHostElement(
-                        candidateElement,
-                    );
+                    const result =
+                        maybeGetPortalMountedModalHostElement(candidateElement);
 
                     // Assert
                     expect(result).toBeTruthy();

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.