@khanacademy/wonder-blocks-modal 2.1.45 → 2.2.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @khanacademy/wonder-blocks-modal
+
+## 2.2.0
+### Minor Changes
+
+- e7bbf149: Modals will no longer close when a user presses in the panel, drags, and releases the mouse in backdrop and vice versa.
+
+### Patch Changes
+
+  - @khanacademy/wonder-blocks-icon-button@3.4.2

package/dist/es/index.js

@@ -1,11 +1,11 @@
-import { Component, createElement, Fragment, createContext, cloneElement } from 'react';
+import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import { MediaLayoutContext, MediaLayout, MEDIA_MODAL_SPEC } from '@khanacademy/wonder-blocks-layout';
 import { View, IDProvider } from '@khanacademy/wonder-blocks-core';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 import Color from '@khanacademy/wonder-blocks-color';
 import { HeadingMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
-import { findDOMNode, createPortal } from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import _extends from '@babel/runtime/helpers/extends';
 import { icons } from '@khanacademy/wonder-blocks-icon';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
@@ -20,7 +20,7 @@ import IconButton from '@khanacademy/wonder-blocks-icon-button';
  * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the dialog element doesn’t have to have
  * the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.
  */
-class ModalDialog extends Component {
+class ModalDialog extends React.Component {
   render() {
     const {
       above,
@@ -35,23 +35,23 @@ class ModalDialog extends Component {
       ssrSize: "large",
       mediaSpec: MEDIA_MODAL_SPEC
     };
-    return /*#__PURE__*/createElement(MediaLayoutContext.Provider, {
+    return /*#__PURE__*/React.createElement(MediaLayoutContext.Provider, {
       value: contextValue
-    }, /*#__PURE__*/createElement(MediaLayout, {
-      styleSheets: styleSheets
+    }, /*#__PURE__*/React.createElement(MediaLayout, {
+      styleSheets: styleSheets$3
     }, ({
       styles
-    }) => /*#__PURE__*/createElement(View, {
+    }) => /*#__PURE__*/React.createElement(View, {
       style: [styles.wrapper, style]
-    }, below && /*#__PURE__*/createElement(View, {
+    }, below && /*#__PURE__*/React.createElement(View, {
       style: styles.below
-    }, below), /*#__PURE__*/createElement(View, {
+    }, below), /*#__PURE__*/React.createElement(View, {
       role: role,
       "aria-modal": "true",
       "aria-labelledby": ariaLabelledBy,
       style: styles.dialog,
       testId: testId
-    }, children), above && /*#__PURE__*/createElement(View, {
+    }, children), above && /*#__PURE__*/React.createElement(View, {
       style: styles.above
     }, above))));
   }
@@ -60,7 +60,7 @@ class ModalDialog extends Component {
 ModalDialog.defaultProps = {
   role: "dialog"
 };
-const styleSheets = {
+const styleSheets$3 = {
   all: StyleSheet.create({
     wrapper: {
       display: "flex",
@@ -116,7 +116,7 @@ const styleSheets = {
  * - Make sure to include it as part of [ModalPanel](/#modalpanel) by using the `footer` prop.
  * - The footer is completely flexible. Meaning the developer needs to add its own custom layout to match design specs.
  */
-class ModalFooter extends Component {
+class ModalFooter extends React.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
   }
@@ -125,14 +125,14 @@ class ModalFooter extends Component {
     const {
       children
     } = this.props;
-    return /*#__PURE__*/createElement(View, {
-      style: styles.footer
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles$3.footer
     }, children);
   }
 
 }
 ModalFooter.__IS_MODAL_FOOTER__ = true;
-const styles = StyleSheet.create({
+const styles$3 = StyleSheet.create({
   footer: {
     flex: "0 0 auto",
     boxSizing: "border-box",
@@ -192,7 +192,7 @@ const styles = StyleSheet.create({
  *  />
  * ```
  */
-class ModalHeader extends Component {
+class ModalHeader extends React.Component {
   render() {
     const {
       breadcrumbs = undefined,
@@ -207,20 +207,20 @@ class ModalHeader extends Component {
       throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
     }
 
-    return /*#__PURE__*/createElement(MediaLayout, {
-      styleSheets: styleSheets$1
+    return /*#__PURE__*/React.createElement(MediaLayout, {
+      styleSheets: styleSheets$2
     }, ({
       styles
-    }) => /*#__PURE__*/createElement(View, {
+    }) => /*#__PURE__*/React.createElement(View, {
       style: [styles.header, !light && styles.dark],
       testId: testId
-    }, breadcrumbs && /*#__PURE__*/createElement(View, {
+    }, breadcrumbs && /*#__PURE__*/React.createElement(View, {
       style: styles.breadcrumbs
-    }, breadcrumbs), /*#__PURE__*/createElement(HeadingMedium, {
+    }, breadcrumbs), /*#__PURE__*/React.createElement(HeadingMedium, {
       style: styles.title,
       id: titleId,
       testId: testId && `${testId}-title`
-    }, title), subtitle && /*#__PURE__*/createElement(LabelSmall, {
+    }, title), subtitle && /*#__PURE__*/React.createElement(LabelSmall, {
       style: light && styles.subtitle,
       testId: testId && `${testId}-subtitle`
     }, subtitle)));
@@ -230,7 +230,7 @@ class ModalHeader extends Component {
 ModalHeader.defaultProps = {
   light: true
 };
-const styleSheets$1 = {
+const styleSheets$2 = {
   all: StyleSheet.create({
     header: {
       boxShadow: `0px 1px 0px ${Color.offBlack16}`,
@@ -269,7 +269,7 @@ const styleSheets$1 = {
   })
 };
 
-class FocusTrap extends Component {
+class FocusTrap extends React.Component {
   /** The most recent node _inside this component_ to receive focus. */
 
   /**
@@ -289,7 +289,7 @@ class FocusTrap extends Component {
         return;
       }
 
-      const modalRoot = findDOMNode(node);
+      const modalRoot = ReactDOM.findDOMNode(node);
 
       if (!modalRoot) {
         throw new Error("Assertion error: modal root should exist after mount");
@@ -418,15 +418,15 @@ class FocusTrap extends Component {
     const {
       style
     } = this.props;
-    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       tabIndex: "0",
       style: {
         position: "fixed"
       }
-    }), /*#__PURE__*/createElement(View, {
+    }), /*#__PURE__*/React.createElement(View, {
       style: style,
       ref: this.getModalRoot
-    }, this.props.children), /*#__PURE__*/createElement("div", {
+    }, this.props.children), /*#__PURE__*/React.createElement("div", {
       tabIndex: "0",
       style: {
         position: "fixed"
@@ -460,21 +460,29 @@ function findFocusableNodes(root) {
  * and adding an `onClose` prop that will call `onCloseModal`. If an
  * `onClose` prop is already provided, the two are merged.
  */
-class ModalBackdrop extends Component {
+class ModalBackdrop extends React.Component {
   constructor(...args) {
     super(...args);
+    this._mousePressedOutside = false;
+
+    this.handleMouseDown = e => {
+      // Confirm that it is the backdrop that is being clicked, not the child
+      this._mousePressedOutside = e.target === e.currentTarget;
+    };
 
-    this.handleClick = e => {
-      // Was the lowest-level click target (`e.target`) the positioner element
-      // (`e.currentTarget`)?
-      if (e.target === e.currentTarget) {
+    this.handleMouseUp = e => {
+      // 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;
     };
   }
 
   componentDidMount() {
-    const node = findDOMNode(this);
+    const node = ReactDOM.findDOMNode(this);
 
     if (!node) {
       return;
@@ -490,11 +498,10 @@ class ModalBackdrop extends Component {
       firstFocusableElement.focus();
     }, 0);
   }
+
   /**
    * Returns an element specified by the user
    */
-
-
   _getInitialFocusElement(node) {
     const {
       initialFocusId
@@ -504,7 +511,7 @@ class ModalBackdrop extends Component {
       return null;
     }
 
-    return findDOMNode(node.querySelector(`#${initialFocusId}`));
+    return ReactDOM.findDOMNode(node.querySelector(`#${initialFocusId}`));
   }
   /**
    * Returns the first focusable element found inside the Dialog
@@ -530,7 +537,7 @@ class ModalBackdrop extends Component {
   _getDialogElement(node) {
     // If no focusable elements are found,
     // the dialog content element itself will receive focus.
-    const dialogElement = findDOMNode(node.querySelector('[role="dialog"]')); // add tabIndex to make the Dialog focusable
+    const dialogElement = ReactDOM.findDOMNode(node.querySelector('[role="dialog"]')); // add tabIndex to make the Dialog focusable
 
     dialogElement.tabIndex = -1;
     return dialogElement;
@@ -550,15 +557,16 @@ class ModalBackdrop extends Component {
     const backdropProps = {
       [ModalLauncherPortalAttributeName]: true
     };
-    return /*#__PURE__*/createElement(View, _extends({
-      style: styles$1.modalPositioner,
-      onClick: this.handleClick,
+    return /*#__PURE__*/React.createElement(View, _extends({
+      style: styles$2.modalPositioner,
+      onMouseDown: this.handleMouseDown,
+      onMouseUp: this.handleMouseUp,
       testId: testId
     }, backdropProps), children);
   }
 
 }
-const styles$1 = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   modalPositioner: {
     position: "fixed",
     left: 0,
@@ -600,7 +608,7 @@ const needsHackyMobileSafariScrollDisabler = (() => {
   return userAgent.indexOf("iPad") > -1 || userAgent.indexOf("iPhone") > -1;
 })();
 
-class ScrollDisabler extends Component {
+class ScrollDisabler extends React.Component {
   componentDidMount() {
     if (ScrollDisabler.numModalsOpened === 0) {
       const body = document.body;
@@ -671,7 +679,7 @@ ScrollDisabler.numModalsOpened = 0;
 const defaultContext = {
   closeModal: undefined
 };
-var ModalContext = /*#__PURE__*/createContext(defaultContext);
+var ModalContext = /*#__PURE__*/React.createContext(defaultContext);
 
 /**
  * This component enables you to launch a modal, covering the screen.
@@ -689,7 +697,7 @@ var ModalContext = /*#__PURE__*/createContext(defaultContext);
  * like OnePaneDialog and is provided via
  * the `modal` prop.
  */
-class ModalLauncher extends Component {
+class ModalLauncher extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -778,24 +786,24 @@ class ModalLauncher extends Component {
       // This flow check is valid, it's the babel plugin which is broken,
       // see modal-context.js for details.
       // $FlowFixMe
-      createElement(ModalContext.Provider, {
+      React.createElement(ModalContext.Provider, {
         value: {
           closeModal: this.handleCloseModal
         }
-      }, renderedChildren, this.state.opened && /*#__PURE__*/createPortal(
+      }, renderedChildren, this.state.opened && /*#__PURE__*/ReactDOM.createPortal(
       /*#__PURE__*/
 
       /* We need the container View that FocusTrap creates to be at the
          correct z-index so that it'll be above the global nav in webapp. */
-      createElement(FocusTrap, {
-        style: styles$2.container
-      }, /*#__PURE__*/createElement(ModalBackdrop, {
+      React.createElement(FocusTrap, {
+        style: styles$1.container
+      }, /*#__PURE__*/React.createElement(ModalBackdrop, {
         initialFocusId: this.props.initialFocusId,
         testId: this.props.testId,
         onCloseModal: this.props.backdropDismissEnabled ? this.handleCloseModal : () => {}
-      }, this._renderModal())), body), this.state.opened && /*#__PURE__*/createElement(ModalLauncherKeypressListener, {
+      }, this._renderModal())), body), this.state.opened && /*#__PURE__*/React.createElement(ModalLauncherKeypressListener, {
         onClose: this.handleCloseModal
-      }), this.state.opened && /*#__PURE__*/createElement(ScrollDisabler, null))
+      }), this.state.opened && /*#__PURE__*/React.createElement(ScrollDisabler, null))
     );
   }
 
@@ -806,7 +814,7 @@ ModalLauncher.defaultProps = {
   backdropDismissEnabled: true
 };
 
-class ModalLauncherKeypressListener extends Component {
+class ModalLauncherKeypressListener extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -842,7 +850,7 @@ class ModalLauncherKeypressListener extends Component {
 
 }
 
-const styles$2 = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   container: {
     // This z-index is copied from the Khan Academy webapp.
     //
@@ -856,7 +864,7 @@ const styles$2 = StyleSheet.create({
 /**
  * The Modal content included after the header
  */
-class ModalContent extends Component {
+class ModalContent extends React.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
   }
@@ -867,13 +875,13 @@ class ModalContent extends Component {
       style,
       children
     } = this.props;
-    return /*#__PURE__*/createElement(MediaLayout, {
-      styleSheets: styleSheets$2
+    return /*#__PURE__*/React.createElement(MediaLayout, {
+      styleSheets: styleSheets$1
     }, ({
       styles
-    }) => /*#__PURE__*/createElement(View, {
+    }) => /*#__PURE__*/React.createElement(View, {
       style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
-    }, /*#__PURE__*/createElement(View, {
+    }, /*#__PURE__*/React.createElement(View, {
       style: [styles.content, style]
     }, children)));
   }
@@ -883,7 +891,7 @@ ModalContent.defaultProps = {
   scrollOverflow: true
 };
 ModalContent.__IS_MODAL_CONTENT__ = true;
-const styleSheets$2 = {
+const styleSheets$1 = {
   all: StyleSheet.create({
     wrapper: {
       flex: 1,
@@ -908,7 +916,7 @@ const styleSheets$2 = {
   })
 };
 
-class CloseButton extends Component {
+class CloseButton extends React.Component {
   render() {
     const {
       light,
@@ -916,14 +924,14 @@ class CloseButton extends Component {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/createElement(ModalContext.Consumer, null, ({
+    return /*#__PURE__*/React.createElement(ModalContext.Consumer, null, ({
       closeModal
     }) => {
       if (closeModal && onClick) {
         throw new Error("You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead");
       }
 
-      return /*#__PURE__*/createElement(IconButton, {
+      return /*#__PURE__*/React.createElement(IconButton, {
         icon: icons.dismiss // TODO(mdr): Translate this string for i18n.
         // TODO(kevinb): provide a way to set this label
         ,
@@ -959,27 +967,27 @@ class CloseButton extends Component {
  * </ModalDialog>
  * ```
  */
-class ModalPanel extends Component {
+class ModalPanel extends React.Component {
   renderMainContent() {
     const {
       content,
       footer,
       scrollOverflow
     } = this.props;
-    const mainContent = ModalContent.isClassOf(content) ? content : /*#__PURE__*/createElement(ModalContent, null, content);
+    const mainContent = ModalContent.isClassOf(content) ? content : /*#__PURE__*/React.createElement(ModalContent, null, content);
 
     if (!mainContent) {
       return mainContent;
     }
 
-    return /*#__PURE__*/cloneElement(mainContent, {
+    return /*#__PURE__*/React.cloneElement(mainContent, {
       // Pass the scrollOverflow and header in to the main content
       scrollOverflow,
       // We override the styling of the main content to help position
       // it if there is a footer or close button being
       // shown. We have to do this here as the ModalContent doesn't
       // know about things being positioned around it.
-      style: [!!footer && styles$3.hasFooter, mainContent.props.style]
+      style: [!!footer && styles.hasFooter, mainContent.props.style]
     });
   }
 
@@ -994,15 +1002,15 @@ class ModalPanel extends Component {
       testId
     } = this.props;
     const mainContent = this.renderMainContent();
-    return /*#__PURE__*/createElement(View, {
-      style: [styles$3.wrapper, !light && styles$3.dark, style],
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.wrapper, !light && styles.dark, style],
       testId: testId && `${testId}-panel`
-    }, closeButtonVisible && /*#__PURE__*/createElement(CloseButton, {
+    }, closeButtonVisible && /*#__PURE__*/React.createElement(CloseButton, {
       light: !light,
       onClick: onClose,
-      style: styles$3.closeButton,
+      style: styles.closeButton,
       testId: testId && `${testId}-close`
-    }), header, mainContent, !footer || ModalFooter.isClassOf(footer) ? footer : /*#__PURE__*/createElement(ModalFooter, null, footer));
+    }), header, mainContent, !footer || ModalFooter.isClassOf(footer) ? footer : /*#__PURE__*/React.createElement(ModalFooter, null, footer));
   }
 
 }
@@ -1011,7 +1019,7 @@ ModalPanel.defaultProps = {
   scrollOverflow: true,
   light: true
 };
-const styles$3 = StyleSheet.create({
+const styles = StyleSheet.create({
   wrapper: {
     flex: "1 1 auto",
     position: "relative",
@@ -1046,7 +1054,7 @@ const styles$3 = StyleSheet.create({
  * The ModalHeader is required, but the ModalFooter is optional.
  * The content of the dialog itself is fully customizable, but the left/right/top/bottom padding is fixed.
  */
-class OnePaneDialog extends Component {
+class OnePaneDialog extends React.Component {
   renderHeader(uniqueId) {
     const {
       title,
@@ -1056,21 +1064,21 @@ class OnePaneDialog extends Component {
     } = this.props;
 
     if (breadcrumbs) {
-      return /*#__PURE__*/createElement(ModalHeader, {
+      return /*#__PURE__*/React.createElement(ModalHeader, {
         title: title,
         breadcrumbs: breadcrumbs,
         titleId: uniqueId,
         testId: testId && `${testId}-header`
       });
     } else if (subtitle) {
-      return /*#__PURE__*/createElement(ModalHeader, {
+      return /*#__PURE__*/React.createElement(ModalHeader, {
         title: title,
         subtitle: subtitle,
         titleId: uniqueId,
         testId: testId && `${testId}-header`
       });
     } else {
-      return /*#__PURE__*/createElement(ModalHeader, {
+      return /*#__PURE__*/React.createElement(ModalHeader, {
         title: title,
         titleId: uniqueId,
         testId: testId && `${testId}-header`
@@ -1091,21 +1099,21 @@ class OnePaneDialog extends Component {
       titleId,
       role
     } = this.props;
-    return /*#__PURE__*/createElement(MediaLayout, {
-      styleSheets: styleSheets$3
+    return /*#__PURE__*/React.createElement(MediaLayout, {
+      styleSheets: styleSheets
     }, ({
       styles
-    }) => /*#__PURE__*/createElement(IDProvider, {
+    }) => /*#__PURE__*/React.createElement(IDProvider, {
       id: titleId,
       scope: "modal"
-    }, uniqueId => /*#__PURE__*/createElement(ModalDialog, {
+    }, uniqueId => /*#__PURE__*/React.createElement(ModalDialog, {
       style: [styles.dialog, style],
       above: above,
       below: below,
       testId: testId,
       "aria-labelledby": uniqueId,
       role: role
-    }, /*#__PURE__*/createElement(ModalPanel, {
+    }, /*#__PURE__*/React.createElement(ModalPanel, {
       onClose: onClose,
       header: this.renderHeader(uniqueId),
       content: content,
@@ -1119,7 +1127,7 @@ class OnePaneDialog extends Component {
 OnePaneDialog.defaultProps = {
   closeButtonVisible: true
 };
-const styleSheets$3 = {
+const styleSheets = {
   small: StyleSheet.create({
     dialog: {
       width: "100%",

package/dist/index.js

@@ -1285,13 +1285,21 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   constructor(...args) {
     super(...args);
+    this._mousePressedOutside = false;
 
-    this.handleClick = e => {
-      // Was the lowest-level click target (`e.target`) the positioner element
-      // (`e.currentTarget`)?
-      if (e.target === e.currentTarget) {
+    this.handleMouseDown = e => {
+      // Confirm that it is the backdrop that is being clicked, not the child
+      this._mousePressedOutside = e.target === e.currentTarget;
+    };
+
+    this.handleMouseUp = e => {
+      // 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;
     };
   }
 
@@ -1312,11 +1320,10 @@ class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       firstFocusableElement.focus();
     }, 0);
   }
+
   /**
    * Returns an element specified by the user
    */
-
-
   _getInitialFocusElement(node) {
     const {
       initialFocusId
@@ -1374,7 +1381,8 @@ class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     };
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], _extends({
       style: styles.modalPositioner,
-      onClick: this.handleClick,
+      onMouseDown: this.handleMouseDown,
+      onMouseUp: this.handleMouseUp,
       testId: testId
     }, backdropProps), children);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "2.1.45",
+  "version": "2.2.0",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -20,7 +20,7 @@
     "@khanacademy/wonder-blocks-color": "^1.1.20",
     "@khanacademy/wonder-blocks-core": "^4.0.0",
     "@khanacademy/wonder-blocks-icon": "^1.2.24",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.1",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.2",
     "@khanacademy/wonder-blocks-layout": "^1.4.6",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-toolbar": "^2.1.28",
@@ -33,6 +33,5 @@
   },
   "devDependencies": {
     "wb-dev-build-settings": "^0.2.0"
-  },
-  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
+  }
 }

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -21,8 +21,8 @@ exports[`wonder-blocks-modal example 1 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -116,8 +116,8 @@ exports[`wonder-blocks-modal example 2 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -392,8 +392,8 @@ exports[`wonder-blocks-modal example 4 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -487,8 +487,8 @@ exports[`wonder-blocks-modal example 5 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -1387,8 +1387,8 @@ exports[`wonder-blocks-modal example 7 1`] = `
             }
           >
             <button
+              aria-disabled={false}
               className=""
-              disabled={false}
               onBlur={[Function]}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -1996,8 +1996,8 @@ exports[`wonder-blocks-modal example 8 1`] = `
               }
             >
               <button
+                aria-disabled={false}
                 className=""
-                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onDragStart={[Function]}
@@ -2070,8 +2070,8 @@ exports[`wonder-blocks-modal example 8 1`] = `
                 </span>
               </button>
               <button
+                aria-disabled={false}
                 className=""
-                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onDragStart={[Function]}
@@ -2144,8 +2144,8 @@ exports[`wonder-blocks-modal example 8 1`] = `
                 </span>
               </button>
               <button
+                aria-disabled={false}
                 className=""
-                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onDragStart={[Function]}
@@ -2627,8 +2627,8 @@ exports[`wonder-blocks-modal example 9 1`] = `
                 }
               >
                 <button
+                  aria-disabled={false}
                   className=""
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onDragStart={[Function]}
@@ -2726,8 +2726,8 @@ exports[`wonder-blocks-modal example 9 1`] = `
                   }
                 />
                 <button
+                  aria-disabled={false}
                   className=""
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onDragStart={[Function]}
@@ -3321,8 +3321,8 @@ exports[`wonder-blocks-modal example 10 1`] = `
                     }
                   />
                   <button
+                    aria-disabled={false}
                     className=""
-                    disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
                     onDragStart={[Function]}

package/src/components/__tests__/close-button.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import expectRenderError from "../../../../../utils/testing/expect-render-error.js";
 import CloseButton from "../close-button.js";

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

@@ -1,6 +1,9 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
+import {render, screen, fireEvent} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import ModalBackdrop from "../modal-backdrop.js";
 import OnePaneDialog from "../one-pane-dialog.js";
@@ -16,6 +19,7 @@ const exampleModal = (
         content={<div data-modal-content />}
         title="Title"
         footer={<div data-modal-footer />}
+        testId="example-modal-test-id"
     />
 );
 
@@ -46,19 +50,24 @@ describe("ModalBackdrop", () => {
     });
 
     test("Clicking the backdrop triggers `onCloseModal`", () => {
+        // Arrange
         const onCloseModal = jest.fn();
 
-        // We use `mount` instead of `shallow` here, because the component's
-        // click handler expects actual DOM events.
-        const wrapper = mount(
-            <ModalBackdrop onCloseModal={onCloseModal}>
+        render(
+            <ModalBackdrop
+                onCloseModal={onCloseModal}
+                testId="modal-backdrop-test-id"
+            >
                 {exampleModal}
             </ModalBackdrop>,
         );
 
-        expect(onCloseModal).not.toHaveBeenCalled();
+        const backdrop = screen.getByTestId("modal-backdrop-test-id");
+
+        //Act
+        userEvent.click(backdrop);
 
-        wrapper.simulate("click");
+        // Assert
         expect(onCloseModal).toHaveBeenCalled();
     });
 
@@ -77,6 +86,62 @@ describe("ModalBackdrop", () => {
         expect(onCloseModal).not.toHaveBeenCalled();
     });
 
+    test("Clicking and dragging into the backdrop does not close modal", () => {
+        // Arrange
+        const onCloseModal = jest.fn();
+
+        render(
+            <ModalBackdrop
+                onCloseModal={onCloseModal}
+                testId="modal-backdrop-test-id"
+            >
+                {exampleModal}
+            </ModalBackdrop>,
+        );
+
+        const panel = screen.getByTestId("example-modal-test-id");
+        const backdrop = screen.getByTestId("modal-backdrop-test-id");
+
+        // Act
+
+        // Dragging the mouse
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.mouseDown(panel);
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.mouseUp(backdrop);
+
+        // Assert
+        expect(onCloseModal).not.toHaveBeenCalled();
+    });
+
+    test("Clicking and dragging in from the backdrop does not close modal", () => {
+        // Arrange
+        const onCloseModal = jest.fn();
+
+        render(
+            <ModalBackdrop
+                onCloseModal={onCloseModal}
+                testId="modal-backdrop-test-id"
+            >
+                {exampleModal}
+            </ModalBackdrop>,
+        );
+
+        const panel = screen.getByTestId("example-modal-test-id");
+        const backdrop = screen.getByTestId("modal-backdrop-test-id");
+
+        // Act
+
+        // Dragging the mouse
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.mouseDown(backdrop);
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.mouseUp(panel);
+
+        // Assert
+        expect(onCloseModal).not.toHaveBeenCalled();
+    });
+
     test("Clicking the modal footer does not trigger `onCloseModal`", () => {
         const onCloseModal = jest.fn();
 
@@ -96,6 +161,7 @@ describe("ModalBackdrop", () => {
         // Arrange
         // We need the elements in the DOM document, it seems, for this test
         // to work. Changing to testing-library will likely fix this.
+        // Then we can remove the lint suppression.
         const attachElement = getElementAttachedToDocument("container");
         const initialFocusId = "initial-focus";
 
@@ -125,7 +191,9 @@ describe("ModalBackdrop", () => {
         // Assert
         // first we verify the element exists in the DOM
         expect(initialFocusElement).toHaveLength(1);
+
         // verify the focus is set on the correct element
+        // eslint-disable-next-line testing-library/no-node-access
         expect(document.activeElement).toBe(initialFocusElement.getDOMNode());
     });
 
@@ -133,6 +201,7 @@ describe("ModalBackdrop", () => {
         // Arrange
         // We need the elements in the DOM document, it seems, for this test
         // to work. Changing to testing-library will likely fix this.
+        // Then we can remove the lint suppression.
         const attachElement = getElementAttachedToDocument("container");
         const initialFocusId = "initial-focus";
         const firstFocusableElement = "[data-first-button]";
@@ -155,6 +224,7 @@ describe("ModalBackdrop", () => {
         // first we verify the element doesn't exist in the DOM
         expect(initialFocusElement).toHaveLength(0);
         // verify the focus is set on the first focusable element instead
+        // eslint-disable-next-line testing-library/no-node-access
         expect(document.activeElement).toBe(
             wrapper.find(firstFocusableElement).getDOMNode(),
         );
@@ -164,6 +234,7 @@ describe("ModalBackdrop", () => {
         // Arrange
         // We need the elements in the DOM document, it seems, for this test
         // to work. Changing to testing-library will likely fix this.
+        // Then we can remove the lint suppression.
         const attachElement = getElementAttachedToDocument("container");
         const wrapper = mount(
             <ModalBackdrop onCloseModal={() => {}}>
@@ -179,6 +250,7 @@ describe("ModalBackdrop", () => {
             .getDOMNode();
 
         // Assert
+        // eslint-disable-next-line testing-library/no-node-access
         expect(document.activeElement).toBe(focusableElement);
     });
 
@@ -186,6 +258,7 @@ describe("ModalBackdrop", () => {
         // Arrange
         // We need the elements in the DOM document, it seems, for this test
         // to work. Changing to testing-library will likely fix this.
+        // Then we can remove the lint suppression.
         const attachElement = getElementAttachedToDocument("container");
         const wrapper = mount(
             <ModalBackdrop onCloseModal={() => {}}>
@@ -201,6 +274,7 @@ describe("ModalBackdrop", () => {
             .getDOMNode();
 
         // Assert
+        // eslint-disable-next-line testing-library/no-node-access
         expect(document.activeElement).toBe(focusableElement);
     });
 });

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

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount, shallow} from "enzyme";
+import "jest-enzyme";
 
 import {
     Breadcrumbs,

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

@@ -1,6 +1,7 @@
 // @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";

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

@@ -57,6 +57,8 @@ export default class ModalBackdrop extends React.Component<Props> {
         }, 0);
     }
 
+    _mousePressedOutside: boolean = false;
+
     /**
      * Returns an element specified by the user
      */
@@ -107,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 {
@@ -124,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/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";

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.