@khanacademy/wonder-blocks-modal 2.1.41 → 2.1.45

package/dist/es/index.js

@@ -1,4 +1,4 @@
-import { createElement, Component, Fragment, createContext, cloneElement } from 'react';
+import { Component, createElement, Fragment, createContext, cloneElement } 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';
@@ -6,143 +6,10 @@ 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 _extends from '@babel/runtime/helpers/extends';
 import { icons } from '@khanacademy/wonder-blocks-icon';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) _setPrototypeOf(subClass, superClass);
-}
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
-}
-
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-        result;
-
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return _possibleConstructorReturn(this, result);
-  };
-}
-
 /**
  * `ModalDialog` is a component that contains these elements:
  * - The visual dialog element itself (`<div role="dialog"/>`)
@@ -153,62 +20,47 @@ function _createSuper(Derived) {
  * - 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.
  */
-var ModalDialog = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModalDialog, _React$Component);
-
-  var _super = _createSuper(ModalDialog);
-
-  function ModalDialog() {
-    _classCallCheck(this, ModalDialog);
-
-    return _super.apply(this, arguments);
+class ModalDialog extends Component {
+  render() {
+    const {
+      above,
+      below,
+      role,
+      style,
+      children,
+      testId,
+      "aria-labelledby": ariaLabelledBy
+    } = this.props;
+    const contextValue = {
+      ssrSize: "large",
+      mediaSpec: MEDIA_MODAL_SPEC
+    };
+    return /*#__PURE__*/createElement(MediaLayoutContext.Provider, {
+      value: contextValue
+    }, /*#__PURE__*/createElement(MediaLayout, {
+      styleSheets: styleSheets
+    }, ({
+      styles
+    }) => /*#__PURE__*/createElement(View, {
+      style: [styles.wrapper, style]
+    }, below && /*#__PURE__*/createElement(View, {
+      style: styles.below
+    }, below), /*#__PURE__*/createElement(View, {
+      role: role,
+      "aria-modal": "true",
+      "aria-labelledby": ariaLabelledBy,
+      style: styles.dialog,
+      testId: testId
+    }, children), above && /*#__PURE__*/createElement(View, {
+      style: styles.above
+    }, above))));
   }
 
-  _createClass(ModalDialog, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          above = _this$props.above,
-          below = _this$props.below,
-          role = _this$props.role,
-          style = _this$props.style,
-          children = _this$props.children,
-          testId = _this$props.testId,
-          ariaLabelledBy = _this$props["aria-labelledby"];
-      var contextValue = {
-        ssrSize: "large",
-        mediaSpec: MEDIA_MODAL_SPEC
-      };
-      return /*#__PURE__*/createElement(MediaLayoutContext.Provider, {
-        value: contextValue
-      }, /*#__PURE__*/createElement(MediaLayout, {
-        styleSheets: styleSheets
-      }, function (_ref) {
-        var styles = _ref.styles;
-        return /*#__PURE__*/createElement(View, {
-          style: [styles.wrapper, style]
-        }, below && /*#__PURE__*/createElement(View, {
-          style: styles.below
-        }, below), /*#__PURE__*/createElement(View, {
-          role: role,
-          "aria-modal": "true",
-          "aria-labelledby": ariaLabelledBy,
-          style: styles.dialog,
-          testId: testId
-        }, children), above && /*#__PURE__*/createElement(View, {
-          style: styles.above
-        }, above));
-      }));
-    }
-  }]);
-
-  return ModalDialog;
-}(Component);
-
-_defineProperty(ModalDialog, "defaultProps", {
+}
+ModalDialog.defaultProps = {
   role: "dialog"
-});
-var styleSheets = {
+};
+const styleSheets = {
   all: StyleSheet.create({
     wrapper: {
       display: "flex",
@@ -264,37 +116,23 @@ var 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.
  */
-var ModalFooter = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModalFooter, _React$Component);
-
-  var _super = _createSuper(ModalFooter);
-
-  function ModalFooter() {
-    _classCallCheck(this, ModalFooter);
-
-    return _super.apply(this, arguments);
+class ModalFooter extends Component {
+  static isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
   }
 
-  _createClass(ModalFooter, [{
-    key: "render",
-    value: function render() {
-      var children = this.props.children;
-      return /*#__PURE__*/createElement(View, {
-        style: styles.footer
-      }, children);
-    }
-  }], [{
-    key: "isClassOf",
-    value: function isClassOf(instance) {
-      return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
-    }
-  }]);
-
-  return ModalFooter;
-}(Component);
+  render() {
+    const {
+      children
+    } = this.props;
+    return /*#__PURE__*/createElement(View, {
+      style: styles.footer
+    }, children);
+  }
 
-_defineProperty(ModalFooter, "__IS_MODAL_FOOTER__", true);
-var styles = StyleSheet.create({
+}
+ModalFooter.__IS_MODAL_FOOTER__ = true;
+const styles = StyleSheet.create({
   footer: {
     flex: "0 0 auto",
     boxSizing: "border-box",
@@ -307,7 +145,7 @@ var styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "flex-end",
-    boxShadow: "0px -1px 0px ".concat(Color.offBlack16)
+    boxShadow: `0px -1px 0px ${Color.offBlack16}`
   }
 });
 
@@ -354,69 +192,52 @@ var styles = StyleSheet.create({
  *  />
  * ```
  */
-var ModalHeader = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModalHeader, _React$Component);
-
-  var _super = _createSuper(ModalHeader);
-
-  function ModalHeader() {
-    _classCallCheck(this, ModalHeader);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(ModalHeader, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          _this$props$breadcrum = _this$props.breadcrumbs,
-          breadcrumbs = _this$props$breadcrum === void 0 ? undefined : _this$props$breadcrum,
-          light = _this$props.light,
-          _this$props$subtitle = _this$props.subtitle,
-          subtitle = _this$props$subtitle === void 0 ? undefined : _this$props$subtitle,
-          testId = _this$props.testId,
-          title = _this$props.title,
-          titleId = _this$props.titleId;
-
-      if (subtitle && breadcrumbs) {
-        throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
-      }
-
-      return /*#__PURE__*/createElement(MediaLayout, {
-        styleSheets: styleSheets$1
-      }, function (_ref) {
-        var styles = _ref.styles;
-        return /*#__PURE__*/createElement(View, {
-          style: [styles.header, !light && styles.dark],
-          testId: testId
-        }, breadcrumbs && /*#__PURE__*/createElement(View, {
-          style: styles.breadcrumbs
-        }, breadcrumbs), /*#__PURE__*/createElement(HeadingMedium, {
-          style: styles.title,
-          id: titleId,
-          testId: testId && "".concat(testId, "-title")
-        }, title), subtitle && /*#__PURE__*/createElement(LabelSmall, {
-          style: light && styles.subtitle,
-          testId: testId && "".concat(testId, "-subtitle")
-        }, subtitle));
-      });
+class ModalHeader extends Component {
+  render() {
+    const {
+      breadcrumbs = undefined,
+      light,
+      subtitle = undefined,
+      testId,
+      title,
+      titleId
+    } = this.props;
+
+    if (subtitle && breadcrumbs) {
+      throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
     }
-  }]);
 
-  return ModalHeader;
-}(Component);
+    return /*#__PURE__*/createElement(MediaLayout, {
+      styleSheets: styleSheets$1
+    }, ({
+      styles
+    }) => /*#__PURE__*/createElement(View, {
+      style: [styles.header, !light && styles.dark],
+      testId: testId
+    }, breadcrumbs && /*#__PURE__*/createElement(View, {
+      style: styles.breadcrumbs
+    }, breadcrumbs), /*#__PURE__*/createElement(HeadingMedium, {
+      style: styles.title,
+      id: titleId,
+      testId: testId && `${testId}-title`
+    }, title), subtitle && /*#__PURE__*/createElement(LabelSmall, {
+      style: light && styles.subtitle,
+      testId: testId && `${testId}-subtitle`
+    }, subtitle)));
+  }
 
-_defineProperty(ModalHeader, "defaultProps", {
+}
+ModalHeader.defaultProps = {
   light: true
-});
-var styleSheets$1 = {
+};
+const styleSheets$1 = {
   all: StyleSheet.create({
     header: {
-      boxShadow: "0px 1px 0px ".concat(Color.offBlack16),
+      boxShadow: `0px 1px 0px ${Color.offBlack16}`,
       display: "flex",
       flexDirection: "column",
       minHeight: 66,
-      padding: "".concat(Spacing.large_24, "px ").concat(Spacing.xLarge_32, "px"),
+      padding: `${Spacing.large_24}px ${Spacing.xLarge_32}px`,
       position: "relative",
       width: "100%"
     },
@@ -448,11 +269,7 @@ var styleSheets$1 = {
   })
 };
 
-var FocusTrap = /*#__PURE__*/function (_React$Component) {
-  _inherits(FocusTrap, _React$Component);
-
-  var _super = _createSuper(FocusTrap);
-
+class FocusTrap extends Component {
   /** The most recent node _inside this component_ to receive focus. */
 
   /**
@@ -463,49 +280,39 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
   /**
    * Tabbing is restricted to descendents of this element.
    */
-  function FocusTrap(props) {
-    var _this;
-
-    _classCallCheck(this, FocusTrap);
-
-    _this = _super.call(this, props);
+  constructor(props) {
+    super(props);
 
-    _defineProperty(_assertThisInitialized(_this), "lastNodeFocusedInModal", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "ignoreFocusChanges", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "modalRoot", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "getModalRoot", function (node) {
+    this.getModalRoot = node => {
       if (!node) {
         // The component is being umounted
         return;
       }
 
-      var modalRoot = findDOMNode(node);
+      const modalRoot = findDOMNode(node);
 
       if (!modalRoot) {
         throw new Error("Assertion error: modal root should exist after mount");
       }
 
-      _this.modalRoot = modalRoot;
-    });
+      this.modalRoot = modalRoot;
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleGlobalFocus", function (e) {
+    this.handleGlobalFocus = e => {
       // If we're busy applying our own programmatic focus, we ignore focus
       // changes, to avoid an infinite loop.
-      if (_this.ignoreFocusChanges) {
+      if (this.ignoreFocusChanges) {
         return;
       }
 
-      var target = e.target;
+      const target = e.target;
 
       if (!(target instanceof Node)) {
         // Sometimes focus events trigger on the document itself. Ignore!
         return;
       }
 
-      var modalRoot = _this.modalRoot;
+      const modalRoot = this.modalRoot;
 
       if (!modalRoot) {
         return;
@@ -514,141 +321,135 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
       if (modalRoot.contains(target)) {
         // If the newly focused node is inside the modal, we just keep track
         // of that.
-        _this.lastNodeFocusedInModal = target;
+        this.lastNodeFocusedInModal = target;
       } else {
         // If the newly focused node is outside the modal, we try refocusing
         // the first focusable node of the modal. (This could be the user
         // pressing Tab on the last node of the modal, or focus escaping in
         // some other way.)
-        _this.focusFirstElementIn(modalRoot); // But, if it turns out that the first focusable node of the modal
+        this.focusFirstElementIn(modalRoot); // But, if it turns out that the first focusable node of the modal
         // was what we were previously focusing, then this is probably the
         // user pressing Shift-Tab on the first node, wanting to go to the
         // end. So, we instead try focusing the last focusable node of the
         // modal.
 
-
-        if (document.activeElement === _this.lastNodeFocusedInModal) {
-          _this.focusLastElementIn(modalRoot);
+        if (document.activeElement === this.lastNodeFocusedInModal) {
+          this.focusLastElementIn(modalRoot);
         } // Focus should now be inside the modal, so record the newly-focused
         // node as the last node focused in the modal.
 
 
-        _this.lastNodeFocusedInModal = document.activeElement;
+        this.lastNodeFocusedInModal = document.activeElement;
       }
-    });
+    };
 
-    _this.lastNodeFocusedInModal = null;
-    _this.ignoreFocusChanges = false;
-    return _this;
+    this.lastNodeFocusedInModal = null;
+    this.ignoreFocusChanges = false;
   }
 
-  _createClass(FocusTrap, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener("focus", this.handleGlobalFocus, true);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener("focus", this.handleGlobalFocus, true);
-    }
-  }, {
-    key: "tryToFocus",
+  componentDidMount() {
+    window.addEventListener("focus", this.handleGlobalFocus, true);
+  }
 
-    /** Try to focus the given node. Return true iff successful. */
-    value: function tryToFocus(node) {
-      if (node instanceof HTMLElement) {
-        this.ignoreFocusChanges = true;
+  componentWillUnmount() {
+    window.removeEventListener("focus", this.handleGlobalFocus, true);
+  }
 
-        try {
-          node.focus();
-        } catch (e) {// ignore error
-        }
+  /** Try to focus the given node. Return true iff successful. */
+  tryToFocus(node) {
+    if (node instanceof HTMLElement) {
+      this.ignoreFocusChanges = true;
 
-        this.ignoreFocusChanges = false;
-        return document.activeElement === node;
+      try {
+        node.focus();
+      } catch (e) {// ignore error
       }
+
+      this.ignoreFocusChanges = false;
+      return document.activeElement === node;
     }
-    /**
-     * Focus the first focusable descendant of the given node.
-     *
-     * Return true if we succeed. Or, if the given node has no focusable
-     * descendants, return false.
-     */
+  }
+  /**
+   * Focus the first focusable descendant of the given node.
+   *
+   * Return true if we succeed. Or, if the given node has no focusable
+   * descendants, return false.
+   */
 
-  }, {
-    key: "focusFirstElementIn",
-    value: function focusFirstElementIn(currentParent) {
-      var children = currentParent.childNodes;
 
-      for (var i = 0; i < children.length; i++) {
-        var child = children[i];
+  focusFirstElementIn(currentParent) {
+    const children = currentParent.childNodes;
 
-        if (this.tryToFocus(child) || this.focusFirstElementIn(child)) {
-          return true;
-        }
-      }
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
 
-      return false;
+      if (this.tryToFocus(child) || this.focusFirstElementIn(child)) {
+        return true;
+      }
     }
-    /**
-     * Focus the last focusable descendant of the given node.
-     *
-     * Return true if we succeed. Or, if the given node has no focusable
-     * descendants, return false.
-     */
 
-  }, {
-    key: "focusLastElementIn",
-    value: function focusLastElementIn(currentParent) {
-      var children = currentParent.childNodes;
+    return false;
+  }
+  /**
+   * Focus the last focusable descendant of the given node.
+   *
+   * Return true if we succeed. Or, if the given node has no focusable
+   * descendants, return false.
+   */
+
 
-      for (var i = children.length - 1; i >= 0; i--) {
-        var child = children[i];
+  focusLastElementIn(currentParent) {
+    const children = currentParent.childNodes;
 
-        if (this.tryToFocus(child) || this.focusLastElementIn(child)) {
-          return true;
-        }
-      }
+    for (let i = children.length - 1; i >= 0; i--) {
+      const child = children[i];
 
-      return false;
-    }
-    /** This method is called when any node on the page is focused. */
-
-  }, {
-    key: "render",
-    value: function render() {
-      var style = this.props.style;
-      return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement("div", {
-        tabIndex: "0",
-        style: {
-          position: "fixed"
-        }
-      }), /*#__PURE__*/createElement(View, {
-        style: style,
-        ref: this.getModalRoot
-      }, this.props.children), /*#__PURE__*/createElement("div", {
-        tabIndex: "0",
-        style: {
-          position: "fixed"
-        }
-      }));
+      if (this.tryToFocus(child) || this.focusLastElementIn(child)) {
+        return true;
+      }
     }
-  }]);
 
-  return FocusTrap;
-}(Component);
+    return false;
+  }
+  /** This method is called when any node on the page is focused. */
+
+
+  render() {
+    const {
+      style
+    } = this.props;
+    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement("div", {
+      tabIndex: "0",
+      style: {
+        position: "fixed"
+      }
+    }), /*#__PURE__*/createElement(View, {
+      style: style,
+      ref: this.getModalRoot
+    }, this.props.children), /*#__PURE__*/createElement("div", {
+      tabIndex: "0",
+      style: {
+        position: "fixed"
+      }
+    }));
+  }
+
+}
 
 /**
  * The attribute used to identify a modal launcher portal.
  */
-var ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
+const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
 
 /**
  * List of elements that can be focused
  * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
  */
-var FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
+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
@@ -659,125 +460,105 @@ var FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not(
  * and adding an `onClose` prop that will call `onCloseModal`. If an
  * `onClose` prop is already provided, the two are merged.
  */
+class ModalBackdrop extends Component {
+  constructor(...args) {
+    super(...args);
 
-var ModalBackdrop = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModalBackdrop, _React$Component);
-
-  var _super = _createSuper(ModalBackdrop);
-
-  function ModalBackdrop() {
-    var _this;
-
-    _classCallCheck(this, ModalBackdrop);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
+    this.handleClick = e => {
       // Was the lowest-level click target (`e.target`) the positioner element
       // (`e.currentTarget`)?
       if (e.target === e.currentTarget) {
-        _this.props.onCloseModal();
+        this.props.onCloseModal();
       }
-    });
-
-    return _this;
+    };
   }
 
-  _createClass(ModalBackdrop, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var node = findDOMNode(this);
+  componentDidMount() {
+    const node = findDOMNode(this);
 
-      if (!node) {
-        return;
-      }
+    if (!node) {
+      return;
+    }
 
-      var firstFocusableElement = // 1. try to get element specified by the user
-      this._getInitialFocusElement(node) || // 2. get first occurence from list of focusable elements
-      this._getFirstFocusableElement(node) || // 3. get the dialog itself
-      this._getDialogElement(node); // wait for styles to applied
+    const firstFocusableElement = // 1. try to get element specified by the user
+    this._getInitialFocusElement(node) || // 2. get first occurence from list of focusable elements
+    this._getFirstFocusableElement(node) || // 3. get the dialog itself
+    this._getDialogElement(node); // wait for styles to applied
 
 
-      setTimeout(function () {
-        firstFocusableElement.focus();
-      }, 0);
-    }
-    /**
-     * Returns an element specified by the user
-     */
+    setTimeout(() => {
+      firstFocusableElement.focus();
+    }, 0);
+  }
+  /**
+   * Returns an element specified by the user
+   */
 
-  }, {
-    key: "_getInitialFocusElement",
-    value: function _getInitialFocusElement(node) {
-      var initialFocusId = this.props.initialFocusId;
 
-      if (!initialFocusId) {
-        return null;
-      }
+  _getInitialFocusElement(node) {
+    const {
+      initialFocusId
+    } = this.props;
 
-      return findDOMNode(node.querySelector("#".concat(initialFocusId)));
+    if (!initialFocusId) {
+      return null;
     }
-    /**
-     * Returns the first focusable element found inside the Dialog
-     */
 
-  }, {
-    key: "_getFirstFocusableElement",
-    value: function _getFirstFocusableElement(node) {
-      // get a collection of elements that can be focused
-      var focusableElements = node.querySelectorAll(FOCUSABLE_ELEMENTS);
+    return findDOMNode(node.querySelector(`#${initialFocusId}`));
+  }
+  /**
+   * Returns the first focusable element found inside the Dialog
+   */
 
-      if (!focusableElements) {
-        return null;
-      } // if found, return the first focusable element
 
+  _getFirstFocusableElement(node) {
+    // get a collection of elements that can be focused
+    const focusableElements = findFocusableNodes(node);
 
-      return focusableElements[0];
-    }
-    /**
-     * Returns the dialog element
-     */
+    if (!focusableElements) {
+      return null;
+    } // if found, return the first focusable element
 
-  }, {
-    key: "_getDialogElement",
-    value: function _getDialogElement(node) {
-      // If no focusable elements are found,
-      // the dialog content element itself will receive focus.
-      var dialogElement = findDOMNode(node.querySelector('[role="dialog"]')); // add tabIndex to make the Dialog focusable
 
-      dialogElement.tabIndex = -1;
-      return dialogElement;
-    }
-    /**
-     * When the user clicks on the gray backdrop area (i.e., the click came
-     * _directly_ from the positioner, not bubbled up from its children), close
-     * the modal.
-     */
+    return focusableElements[0];
+  }
+  /**
+   * Returns the dialog element
+   */
 
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          testId = _this$props.testId;
 
-      var backdropProps = _defineProperty({}, ModalLauncherPortalAttributeName, true);
+  _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
 
-      return /*#__PURE__*/createElement(View, _extends({
-        style: styles$1.modalPositioner,
-        onClick: this.handleClick,
-        testId: testId
-      }, backdropProps), children);
-    }
-  }]);
+    dialogElement.tabIndex = -1;
+    return dialogElement;
+  }
+  /**
+   * When the user clicks on the gray backdrop area (i.e., the click came
+   * _directly_ from the positioner, not bubbled up from its children), close
+   * the modal.
+   */
+
+
+  render() {
+    const {
+      children,
+      testId
+    } = this.props;
+    const backdropProps = {
+      [ModalLauncherPortalAttributeName]: true
+    };
+    return /*#__PURE__*/createElement(View, _extends({
+      style: styles$1.modalPositioner,
+      onClick: this.handleClick,
+      testId: testId
+    }, backdropProps), children);
+  }
 
-  return ModalBackdrop;
-}(Component);
-var styles$1 = StyleSheet.create({
+}
+const styles$1 = StyleSheet.create({
   modalPositioner: {
     position: "fixed",
     left: 0,
@@ -799,113 +580,98 @@ var styles$1 = StyleSheet.create({
   }
 });
 
-var needsHackyMobileSafariScrollDisabler = function () {
+/**
+ * A UI-less component that lets `ModalLauncher` disable page scroll.
+ *
+ * The positioning of the modal requires some global page state changed
+ * unfortunately, and this handles that in an encapsulated way.
+ *
+ * NOTE(mdr): This component was copied from webapp. Be wary of sync issues. It
+ *     also doesn't have unit tests, and we haven't added any, since it's a
+ *     relatively stable component that has now been stress-tested lots in prod.
+ */
+
+const needsHackyMobileSafariScrollDisabler = (() => {
   if (typeof window === "undefined") {
     return false;
   }
 
-  var userAgent = window.navigator.userAgent;
+  const userAgent = window.navigator.userAgent;
   return userAgent.indexOf("iPad") > -1 || userAgent.indexOf("iPhone") > -1;
-}();
-
-var ScrollDisabler = /*#__PURE__*/function (_React$Component) {
-  _inherits(ScrollDisabler, _React$Component);
-
-  var _super = _createSuper(ScrollDisabler);
-
-  function ScrollDisabler() {
-    _classCallCheck(this, ScrollDisabler);
-
-    return _super.apply(this, arguments);
-  }
+})();
 
-  _createClass(ScrollDisabler, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (ScrollDisabler.numModalsOpened === 0) {
-        var body = document.body;
+class ScrollDisabler extends Component {
+  componentDidMount() {
+    if (ScrollDisabler.numModalsOpened === 0) {
+      const body = document.body;
 
-        if (!body) {
-          throw new Error("couldn't find document.body");
-        } // Prevent scrolling of the background, the first time a modal is
-        // opened.
+      if (!body) {
+        throw new Error("couldn't find document.body");
+      } // Prevent scrolling of the background, the first time a modal is
+      // opened.
 
 
-        ScrollDisabler.oldOverflow = body.style.overflow;
-        ScrollDisabler.oldScrollY = window.scrollY; // We need to grab all of the original style properties before we
-        // modified any of them.
+      ScrollDisabler.oldOverflow = body.style.overflow;
+      ScrollDisabler.oldScrollY = window.scrollY; // We need to grab all of the original style properties before we
+      // modified any of them.
 
-        if (needsHackyMobileSafariScrollDisabler) {
-          ScrollDisabler.oldPosition = body.style.position;
-          ScrollDisabler.oldWidth = body.style.width;
-          ScrollDisabler.oldTop = body.style.top;
-        }
+      if (needsHackyMobileSafariScrollDisabler) {
+        ScrollDisabler.oldPosition = body.style.position;
+        ScrollDisabler.oldWidth = body.style.width;
+        ScrollDisabler.oldTop = body.style.top;
+      }
 
-        body.style.overflow = "hidden"; // On mobile Safari, overflow: hidden is not enough, position:
-        // fixed is also required.  Setting style.top = -scollTop maintains
-        // the scroll position (without which we'd scroll to the top).
+      body.style.overflow = "hidden"; // On mobile Safari, overflow: hidden is not enough, position:
+      // fixed is also required.  Setting style.top = -scollTop maintains
+      // the scroll position (without which we'd scroll to the top).
 
-        if (needsHackyMobileSafariScrollDisabler) {
-          body.style.position = "fixed";
-          body.style.width = "100%";
-          body.style.top = "".concat(-ScrollDisabler.oldScrollY, "px");
-        }
+      if (needsHackyMobileSafariScrollDisabler) {
+        body.style.position = "fixed";
+        body.style.width = "100%";
+        body.style.top = `${-ScrollDisabler.oldScrollY}px`;
       }
-
-      ScrollDisabler.numModalsOpened++;
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      ScrollDisabler.numModalsOpened--;
-
-      if (ScrollDisabler.numModalsOpened === 0) {
-        var body = document.body;
-
-        if (!body) {
-          throw new Error("couldn't find document.body");
-        } // Reset all values on the closing of the final modal.
 
+    ScrollDisabler.numModalsOpened++;
+  }
 
-        body.style.overflow = ScrollDisabler.oldOverflow;
+  componentWillUnmount() {
+    ScrollDisabler.numModalsOpened--;
 
-        if (needsHackyMobileSafariScrollDisabler) {
-          body.style.position = ScrollDisabler.oldPosition;
-          body.style.width = ScrollDisabler.oldWidth;
-          body.style.top = ScrollDisabler.oldTop;
-        }
+    if (ScrollDisabler.numModalsOpened === 0) {
+      const body = document.body;
 
-        if (typeof window !== "undefined" && window.scrollTo) {
-          window.scrollTo(0, ScrollDisabler.oldScrollY);
-        }
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return null;
-    }
-  }]);
+      if (!body) {
+        throw new Error("couldn't find document.body");
+      } // Reset all values on the closing of the final modal.
 
-  return ScrollDisabler;
-}(Component);
 
-_defineProperty(ScrollDisabler, "oldOverflow", void 0);
+      body.style.overflow = ScrollDisabler.oldOverflow;
 
-_defineProperty(ScrollDisabler, "oldPosition", void 0);
+      if (needsHackyMobileSafariScrollDisabler) {
+        body.style.position = ScrollDisabler.oldPosition;
+        body.style.width = ScrollDisabler.oldWidth;
+        body.style.top = ScrollDisabler.oldTop;
+      }
 
-_defineProperty(ScrollDisabler, "oldScrollY", void 0);
+      if (typeof window !== "undefined" && window.scrollTo) {
+        window.scrollTo(0, ScrollDisabler.oldScrollY);
+      }
+    }
+  }
 
-_defineProperty(ScrollDisabler, "oldWidth", void 0);
+  render() {
+    return null;
+  }
 
-_defineProperty(ScrollDisabler, "oldTop", void 0);
+}
 
-_defineProperty(ScrollDisabler, "numModalsOpened", 0);
+ScrollDisabler.numModalsOpened = 0;
 
-var defaultContext = {
+const defaultContext = {
   closeModal: undefined
 };
-var ModalContext = createContext(defaultContext);
+var ModalContext = /*#__PURE__*/createContext(defaultContext);
 
 /**
  * This component enables you to launch a modal, covering the screen.
@@ -923,164 +689,128 @@ var ModalContext = createContext(defaultContext);
  * like OnePaneDialog and is provided via
  * the `modal` prop.
  */
-var ModalLauncher = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModalLauncher, _React$Component);
-
-  var _super = _createSuper(ModalLauncher);
-
-  function ModalLauncher() {
-    var _this;
-
-    _classCallCheck(this, ModalLauncher);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "lastElementFocusedOutsideModal", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+class ModalLauncher extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
       opened: false
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "_saveLastElementFocused", function () {
+    this._saveLastElementFocused = () => {
       // keep a reference of the element that triggers the modal
-      _this.lastElementFocusedOutsideModal = document.activeElement;
-    });
+      this.lastElementFocusedOutsideModal = document.activeElement;
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "_openModal", function () {
-      _this._saveLastElementFocused();
+    this._openModal = () => {
+      this._saveLastElementFocused();
 
-      _this.setState({
+      this.setState({
         opened: true
       });
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleCloseModal", function () {
-      _this.setState({
+    this.handleCloseModal = () => {
+      this.setState({
         opened: false
-      }, function () {
-        _this.props.onClose && _this.props.onClose();
+      }, () => {
+        this.props.onClose && this.props.onClose();
 
-        if (_this.lastElementFocusedOutsideModal != null) {
+        if (this.lastElementFocusedOutsideModal != null) {
           // return focus to the element that triggered the modal
-          _this.lastElementFocusedOutsideModal.focus();
+          this.lastElementFocusedOutsideModal.focus();
         }
       });
-    });
-
-    return _this;
+    };
   }
 
-  _createClass(ModalLauncher, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      // ensures the element is stored only when the modal is opened
-      if (!prevProps.opened && this.props.opened) {
-        this._saveLastElementFocused();
-      }
-    }
-  }, {
-    key: "_renderModal",
-    value: function _renderModal() {
-      if (typeof this.props.modal === "function") {
-        return this.props.modal({
-          closeModal: this.handleCloseModal
-        });
-      } else {
-        return this.props.modal;
-      }
+  static getDerivedStateFromProps(props, state) {
+    if (typeof props.opened === "boolean" && props.children) {
+      // eslint-disable-next-line no-console
+      console.warn("'children' and 'opened' can't be used together");
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var renderedChildren = this.props.children ? this.props.children({
-        openModal: this._openModal
-      }) : null;
-      var _document = document,
-          body = _document.body;
 
-      if (!body) {
-        return null;
-      }
-
-      return (
-        /*#__PURE__*/
-        // This flow check is valid, it's the babel plugin which is broken,
-        // see modal-context.js for details.
-        // $FlowFixMe
-        createElement(ModalContext.Provider, {
-          value: {
-            closeModal: this.handleCloseModal
-          }
-        }, renderedChildren, this.state.opened && 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, {
-          initialFocusId: this.props.initialFocusId,
-          testId: this.props.testId,
-          onCloseModal: this.props.backdropDismissEnabled ? this.handleCloseModal : function () {}
-        }, this._renderModal())), body), this.state.opened && /*#__PURE__*/createElement(ModalLauncherKeypressListener, {
-          onClose: this.handleCloseModal
-        }), this.state.opened && /*#__PURE__*/createElement(ScrollDisabler, null))
-      );
+    if (typeof props.opened === "boolean" && !props.onClose) {
+      // eslint-disable-next-line no-console
+      console.warn("'onClose' should be used with 'opened'");
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      if (typeof props.opened === "boolean" && props.children) {
-        // eslint-disable-next-line no-console
-        console.warn("'children' and 'opened' can't be used together");
-      }
-
-      if (typeof props.opened === "boolean" && !props.onClose) {
-        // eslint-disable-next-line no-console
-        console.warn("'onClose' should be used with 'opened'");
-      }
-
-      if (typeof props.opened !== "boolean" && !props.children) {
-        // eslint-disable-next-line no-console
-        console.warn("either 'children' or 'opened' must be set");
-      }
 
-      return {
-        opened: typeof props.opened === "boolean" ? props.opened : state.opened
-      };
+    if (typeof props.opened !== "boolean" && !props.children) {
+      // eslint-disable-next-line no-console
+      console.warn("either 'children' or 'opened' must be set");
     }
-  }]);
 
-  return ModalLauncher;
-}(Component);
-/** A component that, when mounted, calls `onClose` when Escape is pressed. */
+    return {
+      opened: typeof props.opened === "boolean" ? props.opened : state.opened
+    };
+  }
 
+  componentDidUpdate(prevProps) {
+    // ensures the element is stored only when the modal is opened
+    if (!prevProps.opened && this.props.opened) {
+      this._saveLastElementFocused();
+    }
+  }
 
-_defineProperty(ModalLauncher, "defaultProps", {
-  backdropDismissEnabled: true
-});
+  _renderModal() {
+    if (typeof this.props.modal === "function") {
+      return this.props.modal({
+        closeModal: this.handleCloseModal
+      });
+    } else {
+      return this.props.modal;
+    }
+  }
 
-var ModalLauncherKeypressListener = /*#__PURE__*/function (_React$Component2) {
-  _inherits(ModalLauncherKeypressListener, _React$Component2);
+  render() {
+    const renderedChildren = this.props.children ? this.props.children({
+      openModal: this._openModal
+    }) : null;
+    const {
+      body
+    } = document;
 
-  var _super2 = _createSuper(ModalLauncherKeypressListener);
+    if (!body) {
+      return null;
+    }
 
-  function ModalLauncherKeypressListener() {
-    var _this2;
+    return (
+      /*#__PURE__*/
+      // This flow check is valid, it's the babel plugin which is broken,
+      // see modal-context.js for details.
+      // $FlowFixMe
+      createElement(ModalContext.Provider, {
+        value: {
+          closeModal: this.handleCloseModal
+        }
+      }, renderedChildren, this.state.opened && /*#__PURE__*/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, {
+        initialFocusId: this.props.initialFocusId,
+        testId: this.props.testId,
+        onCloseModal: this.props.backdropDismissEnabled ? this.handleCloseModal : () => {}
+      }, this._renderModal())), body), this.state.opened && /*#__PURE__*/createElement(ModalLauncherKeypressListener, {
+        onClose: this.handleCloseModal
+      }), this.state.opened && /*#__PURE__*/createElement(ScrollDisabler, null))
+    );
+  }
 
-    _classCallCheck(this, ModalLauncherKeypressListener);
+}
+/** A component that, when mounted, calls `onClose` when Escape is pressed. */
 
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
+ModalLauncher.defaultProps = {
+  backdropDismissEnabled: true
+};
 
-    _this2 = _super2.call.apply(_super2, [this].concat(args));
+class ModalLauncherKeypressListener extends Component {
+  constructor(...args) {
+    super(...args);
 
-    _defineProperty(_assertThisInitialized(_this2), "_handleKeyup", function (e) {
+    this._handleKeyup = e => {
       // We check the key as that's keyboard layout agnostic and also avoids
       // the minefield of deprecated number type properties like keyCode and
       // which, with the replacement code, which uses a string instead.
@@ -1093,35 +823,26 @@ var ModalLauncherKeypressListener = /*#__PURE__*/function (_React$Component2) {
         // unexpectedly cancels multiple things.
         e.preventDefault();
         e.stopPropagation();
-
-        _this2.props.onClose();
+        this.props.onClose();
       }
-    });
+    };
+  }
 
-    return _this2;
+  componentDidMount() {
+    window.addEventListener("keyup", this._handleKeyup);
   }
 
-  _createClass(ModalLauncherKeypressListener, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener("keyup", this._handleKeyup);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener("keyup", this._handleKeyup);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return null;
-    }
-  }]);
+  componentWillUnmount() {
+    window.removeEventListener("keyup", this._handleKeyup);
+  }
 
-  return ModalLauncherKeypressListener;
-}(Component);
+  render() {
+    return null;
+  }
 
-var styles$2 = StyleSheet.create({
+}
+
+const styles$2 = StyleSheet.create({
   container: {
     // This z-index is copied from the Khan Academy webapp.
     //
@@ -1135,51 +856,34 @@ var styles$2 = StyleSheet.create({
 /**
  * The Modal content included after the header
  */
-var ModalContent = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModalContent, _React$Component);
-
-  var _super = _createSuper(ModalContent);
-
-  function ModalContent() {
-    _classCallCheck(this, ModalContent);
-
-    return _super.apply(this, arguments);
+class ModalContent extends Component {
+  static isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
   }
 
-  _createClass(ModalContent, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          scrollOverflow = _this$props.scrollOverflow,
-          style = _this$props.style,
-          children = _this$props.children;
-      return /*#__PURE__*/createElement(MediaLayout, {
-        styleSheets: styleSheets$2
-      }, function (_ref) {
-        var styles = _ref.styles;
-        return /*#__PURE__*/createElement(View, {
-          style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
-        }, /*#__PURE__*/createElement(View, {
-          style: [styles.content, style]
-        }, children));
-      });
-    }
-  }], [{
-    key: "isClassOf",
-    value: function isClassOf(instance) {
-      return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
-    }
-  }]);
-
-  return ModalContent;
-}(Component);
+  render() {
+    const {
+      scrollOverflow,
+      style,
+      children
+    } = this.props;
+    return /*#__PURE__*/createElement(MediaLayout, {
+      styleSheets: styleSheets$2
+    }, ({
+      styles
+    }) => /*#__PURE__*/createElement(View, {
+      style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
+    }, /*#__PURE__*/createElement(View, {
+      style: [styles.content, style]
+    }, children)));
+  }
 
-_defineProperty(ModalContent, "defaultProps", {
+}
+ModalContent.defaultProps = {
   scrollOverflow: true
-});
-
-_defineProperty(ModalContent, "__IS_MODAL_CONTENT__", true);
-var styleSheets$2 = {
+};
+ModalContent.__IS_MODAL_CONTENT__ = true;
+const styleSheets$2 = {
   all: StyleSheet.create({
     wrapper: {
       flex: 1,
@@ -1199,54 +903,41 @@ var styleSheets$2 = {
   }),
   small: StyleSheet.create({
     content: {
-      padding: "".concat(Spacing.xLarge_32, "px ").concat(Spacing.medium_16, "px")
+      padding: `${Spacing.xLarge_32}px ${Spacing.medium_16}px`
     }
   })
 };
 
-var CloseButton = /*#__PURE__*/function (_React$Component) {
-  _inherits(CloseButton, _React$Component);
-
-  var _super = _createSuper(CloseButton);
-
-  function CloseButton() {
-    _classCallCheck(this, CloseButton);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(CloseButton, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          light = _this$props.light,
-          onClick = _this$props.onClick,
-          style = _this$props.style,
-          testId = _this$props.testId;
-      return /*#__PURE__*/createElement(ModalContext.Consumer, null, function (_ref) {
-        var closeModal = _ref.closeModal;
-
-        if (closeModal && onClick) {
-          throw new Error("You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead");
-        }
+class CloseButton extends Component {
+  render() {
+    const {
+      light,
+      onClick,
+      style,
+      testId
+    } = this.props;
+    return /*#__PURE__*/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, {
-          icon: icons.dismiss // TODO(mdr): Translate this string for i18n.
-          // TODO(kevinb): provide a way to set this label
-          ,
-          "aria-label": "Close modal",
-          onClick: onClick || closeModal,
-          kind: light ? "primary" : "tertiary",
-          light: light,
-          style: style,
-          testId: testId
-        });
+      return /*#__PURE__*/createElement(IconButton, {
+        icon: icons.dismiss // TODO(mdr): Translate this string for i18n.
+        // TODO(kevinb): provide a way to set this label
+        ,
+        "aria-label": "Close modal",
+        onClick: onClick || closeModal,
+        kind: light ? "primary" : "tertiary",
+        light: light,
+        style: style,
+        testId: testId
       });
-    }
-  }]);
+    });
+  }
 
-  return CloseButton;
-}(Component);
+}
 
 /**
  * ModalPanel is  the content container.
@@ -1268,73 +959,59 @@ var CloseButton = /*#__PURE__*/function (_React$Component) {
  * </ModalDialog>
  * ```
  */
-var ModalPanel = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModalPanel, _React$Component);
-
-  var _super = _createSuper(ModalPanel);
-
-  function ModalPanel() {
-    _classCallCheck(this, ModalPanel);
+class ModalPanel extends Component {
+  renderMainContent() {
+    const {
+      content,
+      footer,
+      scrollOverflow
+    } = this.props;
+    const mainContent = ModalContent.isClassOf(content) ? content : /*#__PURE__*/createElement(ModalContent, null, content);
+
+    if (!mainContent) {
+      return mainContent;
+    }
 
-    return _super.apply(this, arguments);
+    return /*#__PURE__*/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]
+    });
   }
 
-  _createClass(ModalPanel, [{
-    key: "renderMainContent",
-    value: function renderMainContent() {
-      var _this$props = this.props,
-          content = _this$props.content,
-          footer = _this$props.footer,
-          scrollOverflow = _this$props.scrollOverflow;
-      var mainContent = ModalContent.isClassOf(content) ? content : /*#__PURE__*/createElement(ModalContent, null, content);
-
-      if (!mainContent) {
-        return mainContent;
-      }
-
-      return cloneElement(mainContent, {
-        // Pass the scrollOverflow and header in to the main content
-        scrollOverflow: 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]
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          closeButtonVisible = _this$props2.closeButtonVisible,
-          footer = _this$props2.footer,
-          header = _this$props2.header,
-          light = _this$props2.light,
-          onClose = _this$props2.onClose,
-          style = _this$props2.style,
-          testId = _this$props2.testId;
-      var mainContent = this.renderMainContent();
-      return /*#__PURE__*/createElement(View, {
-        style: [styles$3.wrapper, !light && styles$3.dark, style],
-        testId: testId && "".concat(testId, "-panel")
-      }, closeButtonVisible && /*#__PURE__*/createElement(CloseButton, {
-        light: !light,
-        onClick: onClose,
-        style: styles$3.closeButton,
-        testId: testId && "".concat(testId, "-close")
-      }), header, mainContent, !footer || ModalFooter.isClassOf(footer) ? footer : /*#__PURE__*/createElement(ModalFooter, null, footer));
-    }
-  }]);
-
-  return ModalPanel;
-}(Component);
+  render() {
+    const {
+      closeButtonVisible,
+      footer,
+      header,
+      light,
+      onClose,
+      style,
+      testId
+    } = this.props;
+    const mainContent = this.renderMainContent();
+    return /*#__PURE__*/createElement(View, {
+      style: [styles$3.wrapper, !light && styles$3.dark, style],
+      testId: testId && `${testId}-panel`
+    }, closeButtonVisible && /*#__PURE__*/createElement(CloseButton, {
+      light: !light,
+      onClick: onClose,
+      style: styles$3.closeButton,
+      testId: testId && `${testId}-close`
+    }), header, mainContent, !footer || ModalFooter.isClassOf(footer) ? footer : /*#__PURE__*/createElement(ModalFooter, null, footer));
+  }
 
-_defineProperty(ModalPanel, "defaultProps", {
+}
+ModalPanel.defaultProps = {
   closeButtonVisible: true,
   scrollOverflow: true,
   light: true
-});
-var styles$3 = StyleSheet.create({
+};
+const styles$3 = StyleSheet.create({
   wrapper: {
     flex: "1 1 auto",
     position: "relative",
@@ -1369,101 +1046,80 @@ var 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.
  */
-var OnePaneDialog = /*#__PURE__*/function (_React$Component) {
-  _inherits(OnePaneDialog, _React$Component);
-
-  var _super = _createSuper(OnePaneDialog);
-
-  function OnePaneDialog() {
-    _classCallCheck(this, OnePaneDialog);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(OnePaneDialog, [{
-    key: "renderHeader",
-    value: function renderHeader(uniqueId) {
-      var _this$props = this.props,
-          title = _this$props.title,
-          _this$props$breadcrum = _this$props.breadcrumbs,
-          breadcrumbs = _this$props$breadcrum === void 0 ? undefined : _this$props$breadcrum,
-          _this$props$subtitle = _this$props.subtitle,
-          subtitle = _this$props$subtitle === void 0 ? undefined : _this$props$subtitle,
-          testId = _this$props.testId;
-
-      if (breadcrumbs) {
-        return /*#__PURE__*/createElement(ModalHeader, {
-          title: title,
-          breadcrumbs: breadcrumbs,
-          titleId: uniqueId,
-          testId: testId && "".concat(testId, "-header")
-        });
-      } else if (subtitle) {
-        return /*#__PURE__*/createElement(ModalHeader, {
-          title: title,
-          subtitle: subtitle,
-          titleId: uniqueId,
-          testId: testId && "".concat(testId, "-header")
-        });
-      } else {
-        return /*#__PURE__*/createElement(ModalHeader, {
-          title: title,
-          titleId: uniqueId,
-          testId: testId && "".concat(testId, "-header")
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this = this;
-
-      var _this$props2 = this.props,
-          onClose = _this$props2.onClose,
-          footer = _this$props2.footer,
-          content = _this$props2.content,
-          above = _this$props2.above,
-          below = _this$props2.below,
-          style = _this$props2.style,
-          closeButtonVisible = _this$props2.closeButtonVisible,
-          testId = _this$props2.testId,
-          titleId = _this$props2.titleId,
-          role = _this$props2.role;
-      return /*#__PURE__*/createElement(MediaLayout, {
-        styleSheets: styleSheets$3
-      }, function (_ref) {
-        var styles = _ref.styles;
-        return /*#__PURE__*/createElement(IDProvider, {
-          id: titleId,
-          scope: "modal"
-        }, function (uniqueId) {
-          return /*#__PURE__*/createElement(ModalDialog, {
-            style: [styles.dialog, style],
-            above: above,
-            below: below,
-            testId: testId,
-            "aria-labelledby": uniqueId,
-            role: role
-          }, /*#__PURE__*/createElement(ModalPanel, {
-            onClose: onClose,
-            header: _this.renderHeader(uniqueId),
-            content: content,
-            footer: footer,
-            closeButtonVisible: closeButtonVisible,
-            testId: testId
-          }));
-        });
+class OnePaneDialog extends Component {
+  renderHeader(uniqueId) {
+    const {
+      title,
+      breadcrumbs = undefined,
+      subtitle = undefined,
+      testId
+    } = this.props;
+
+    if (breadcrumbs) {
+      return /*#__PURE__*/createElement(ModalHeader, {
+        title: title,
+        breadcrumbs: breadcrumbs,
+        titleId: uniqueId,
+        testId: testId && `${testId}-header`
+      });
+    } else if (subtitle) {
+      return /*#__PURE__*/createElement(ModalHeader, {
+        title: title,
+        subtitle: subtitle,
+        titleId: uniqueId,
+        testId: testId && `${testId}-header`
+      });
+    } else {
+      return /*#__PURE__*/createElement(ModalHeader, {
+        title: title,
+        titleId: uniqueId,
+        testId: testId && `${testId}-header`
       });
     }
-  }]);
+  }
 
-  return OnePaneDialog;
-}(Component);
+  render() {
+    const {
+      onClose,
+      footer,
+      content,
+      above,
+      below,
+      style,
+      closeButtonVisible,
+      testId,
+      titleId,
+      role
+    } = this.props;
+    return /*#__PURE__*/createElement(MediaLayout, {
+      styleSheets: styleSheets$3
+    }, ({
+      styles
+    }) => /*#__PURE__*/createElement(IDProvider, {
+      id: titleId,
+      scope: "modal"
+    }, uniqueId => /*#__PURE__*/createElement(ModalDialog, {
+      style: [styles.dialog, style],
+      above: above,
+      below: below,
+      testId: testId,
+      "aria-labelledby": uniqueId,
+      role: role
+    }, /*#__PURE__*/createElement(ModalPanel, {
+      onClose: onClose,
+      header: this.renderHeader(uniqueId),
+      content: content,
+      footer: footer,
+      closeButtonVisible: closeButtonVisible,
+      testId: testId
+    }))));
+  }
 
-_defineProperty(OnePaneDialog, "defaultProps", {
+}
+OnePaneDialog.defaultProps = {
   closeButtonVisible: true
-});
-var styleSheets$3 = {
+};
+const styleSheets$3 = {
   small: StyleSheet.create({
     dialog: {
       width: "100%",
@@ -1490,7 +1146,7 @@ var styleSheets$3 = {
  */
 
 function maybeGetNextAncestorModalLauncherPortal(element) {
-  var candidateElement = element && element.parentElement;
+  let candidateElement = element && element.parentElement;
 
   while (candidateElement && !candidateElement.hasAttribute(ModalLauncherPortalAttributeName)) {
     candidateElement = candidateElement.parentElement;