@khanacademy/wonder-blocks-modal 2.1.42 → 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"
@@ -446,6 +446,10 @@ const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
  * @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"])';
+function findFocusableNodes(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
+}
+
 /**
  * A private component used by ModalLauncher. This is the fixed-position
  * container element that gets mounted outside the DOM. It overlays the modal
@@ -456,22 +460,29 @@ const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:no
  * 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.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;
     };
   }
 
   componentDidMount() {
-    const node = findDOMNode(this);
+    const node = ReactDOM.findDOMNode(this);
 
     if (!node) {
       return;
@@ -487,11 +498,10 @@ class ModalBackdrop extends Component {
       firstFocusableElement.focus();
     }, 0);
   }
+
   /**
    * Returns an element specified by the user
    */
-
-
   _getInitialFocusElement(node) {
     const {
       initialFocusId
@@ -501,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
@@ -510,7 +520,7 @@ class ModalBackdrop extends Component {
 
   _getFirstFocusableElement(node) {
     // get a collection of elements that can be focused
-    const focusableElements = node.querySelectorAll(FOCUSABLE_ELEMENTS);
+    const focusableElements = findFocusableNodes(node);
 
     if (!focusableElements) {
       return null;
@@ -527,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;
@@ -547,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,
@@ -597,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;
@@ -668,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.
@@ -686,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 = {
@@ -775,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))
     );
   }
 
@@ -803,7 +814,7 @@ ModalLauncher.defaultProps = {
   backdropDismissEnabled: true
 };
 
-class ModalLauncherKeypressListener extends Component {
+class ModalLauncherKeypressListener extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -839,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.
     //
@@ -853,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__;
   }
@@ -864,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)));
   }
@@ -880,7 +891,7 @@ ModalContent.defaultProps = {
   scrollOverflow: true
 };
 ModalContent.__IS_MODAL_CONTENT__ = true;
-const styleSheets$2 = {
+const styleSheets$1 = {
   all: StyleSheet.create({
     wrapper: {
       flex: 1,
@@ -905,7 +916,7 @@ const styleSheets$2 = {
   })
 };
 
-class CloseButton extends Component {
+class CloseButton extends React.Component {
   render() {
     const {
       light,
@@ -913,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
         ,
@@ -956,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]
     });
   }
 
@@ -991,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));
   }
 
 }
@@ -1008,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",
@@ -1043,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,
@@ -1053,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`
@@ -1088,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,
@@ -1116,7 +1127,7 @@ class OnePaneDialog extends Component {
 OnePaneDialog.defaultProps = {
   closeButtonVisible: true
 };
-const styleSheets$3 = {
+const styleSheets = {
   small: StyleSheet.create({
     dialog: {
       width: "100%",