@khanacademy/wonder-blocks-modal 3.0.7 → 3.0.9

package/dist/index.js

@@ -11,39 +11,56 @@ var Color = require('@khanacademy/wonder-blocks-color');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var ReactDOM = require('react-dom');
 var wonderBlocksTiming = require('@khanacademy/wonder-blocks-timing');
-var _extends = require('@babel/runtime/helpers/extends');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 
-class ModalDialog extends React__namespace.Component {
-  render() {
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
+let ModalDialog = function (_React$Component) {
+  _inheritsLoose(ModalDialog, _React$Component);
+  function ModalDialog() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = ModalDialog.prototype;
+  _proto.render = function render() {
     const {
       above,
       below,
@@ -78,9 +95,9 @@ class ModalDialog extends React__namespace.Component {
     }, children), above && React__namespace.createElement(wonderBlocksCore.View, {
       style: styles.above
     }, above))));
-  }
-
-}
+  };
+  return ModalDialog;
+}(React__namespace.Component);
 ModalDialog.defaultProps = {
   role: "dialog"
 };
@@ -127,21 +144,25 @@ const styleSheets$3 = {
   })
 };
 
-class ModalFooter extends React__namespace.Component {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
+let ModalFooter = function (_React$Component) {
+  _inheritsLoose(ModalFooter, _React$Component);
+  function ModalFooter() {
+    return _React$Component.apply(this, arguments) || this;
   }
-
-  render() {
+  ModalFooter.isClassOf = function isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
+  };
+  var _proto = ModalFooter.prototype;
+  _proto.render = function render() {
     const {
       children
     } = this.props;
     return React__namespace.createElement(wonderBlocksCore.View, {
       style: styles$3.footer
     }, children);
-  }
-
-}
+  };
+  return ModalFooter;
+}(React__namespace.Component);
 ModalFooter.__IS_MODAL_FOOTER__ = true;
 const styles$3 = aphrodite.StyleSheet.create({
   footer: {
@@ -160,8 +181,13 @@ const styles$3 = aphrodite.StyleSheet.create({
   }
 });
 
-class ModalHeader extends React__namespace.Component {
-  render() {
+let ModalHeader = function (_React$Component) {
+  _inheritsLoose(ModalHeader, _React$Component);
+  function ModalHeader() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = ModalHeader.prototype;
+  _proto.render = function render() {
     const {
       breadcrumbs = undefined,
       light,
@@ -170,11 +196,9 @@ class ModalHeader extends React__namespace.Component {
       title,
       titleId
     } = this.props;
-
     if (subtitle && breadcrumbs) {
       throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
     }
-
     return React__namespace.createElement(wonderBlocksLayout.MediaLayout, {
       styleSheets: styleSheets$2
     }, ({
@@ -192,9 +216,9 @@ class ModalHeader extends React__namespace.Component {
       style: light && styles.subtitle,
       testId: testId && `${testId}-subtitle`
     }, subtitle)));
-  }
-
-}
+  };
+  return ModalHeader;
+}(React__namespace.Component);
 ModalHeader.defaultProps = {
   light: true
 };
@@ -237,52 +261,47 @@ const styleSheets$2 = {
 };
 
 const FOCUSABLE_ELEMENTS$1 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-class FocusTrap extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.getModalRoot = node => {
+let FocusTrap = function (_React$Component) {
+  _inheritsLoose(FocusTrap, _React$Component);
+  function FocusTrap(...args) {
+    var _this;
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.modalRoot = void 0;
+    _this.getModalRoot = node => {
       if (!node) {
         return;
       }
-
       const modalRoot = ReactDOM__namespace.findDOMNode(node);
-
       if (!modalRoot) {
         throw new Error("Assertion error: modal root should exist after mount");
       }
-
-      this.modalRoot = modalRoot;
+      _this.modalRoot = modalRoot;
     };
-
-    this.handleFocusMoveToLast = () => {
-      this.focusElementIn(false);
+    _this.handleFocusMoveToLast = () => {
+      _this.focusElementIn(false);
     };
-
-    this.handleFocusMoveToFirst = () => {
-      this.focusElementIn(true);
+    _this.handleFocusMoveToFirst = () => {
+      _this.focusElementIn(true);
     };
+    return _this;
   }
-
-  tryToFocus(node) {
+  var _proto = FocusTrap.prototype;
+  _proto.tryToFocus = function tryToFocus(node) {
     if (node instanceof HTMLElement) {
       try {
         node.focus();
       } catch (e) {}
-
       return document.activeElement === node;
     }
-  }
-
-  focusElementIn(isLast) {
+  };
+  _proto.focusElementIn = function focusElementIn(isLast) {
     const modalRootAsHtmlEl = this.modalRoot;
     const focusableNodes = Array.from(modalRootAsHtmlEl.querySelectorAll(FOCUSABLE_ELEMENTS$1));
     const nodeIndex = !isLast ? focusableNodes.length - 1 : 0;
     const focusableNode = focusableNodes[nodeIndex];
     this.tryToFocus(focusableNode);
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       style
     } = this.props;
@@ -304,8 +323,23 @@ class FocusTrap extends React__namespace.Component {
         position: "fixed"
       }
     }));
-  }
-
+  };
+  return FocusTrap;
+}(React__namespace.Component);
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : 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);
 }
 
 const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
@@ -315,67 +349,56 @@ function findFocusableNodes(root) {
   return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
 }
 
-class ModalBackdrop extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this._mousePressedOutside = false;
-
-    this.handleMouseDown = e => {
-      this._mousePressedOutside = e.target === e.currentTarget;
+let ModalBackdrop = function (_React$Component) {
+  _inheritsLoose(ModalBackdrop, _React$Component);
+  function ModalBackdrop(...args) {
+    var _this;
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this._mousePressedOutside = false;
+    _this.handleMouseDown = e => {
+      _this._mousePressedOutside = e.target === e.currentTarget;
     };
-
-    this.handleMouseUp = e => {
-      if (e.target === e.currentTarget && this._mousePressedOutside) {
-        this.props.onCloseModal();
+    _this.handleMouseUp = e => {
+      if (e.target === e.currentTarget && _this._mousePressedOutside) {
+        _this.props.onCloseModal();
       }
-
-      this._mousePressedOutside = false;
+      _this._mousePressedOutside = false;
     };
+    return _this;
   }
-
-  componentDidMount() {
+  var _proto = ModalBackdrop.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     const node = ReactDOM__namespace.findDOMNode(this);
-
     if (!node) {
       return;
     }
-
     const firstFocusableElement = this._getInitialFocusElement(node) || this._getFirstFocusableElement(node) || this._getDialogElement(node);
-
     setTimeout(() => {
       firstFocusableElement.focus();
     }, 0);
-  }
-
-  _getInitialFocusElement(node) {
+  };
+  _proto._getInitialFocusElement = function _getInitialFocusElement(node) {
     const {
       initialFocusId
     } = this.props;
-
     if (!initialFocusId) {
       return null;
     }
-
     return ReactDOM__namespace.findDOMNode(node.querySelector(`#${initialFocusId}`));
-  }
-
-  _getFirstFocusableElement(node) {
+  };
+  _proto._getFirstFocusableElement = function _getFirstFocusableElement(node) {
     const focusableElements = findFocusableNodes(node);
-
     if (!focusableElements) {
       return null;
     }
-
     return focusableElements[0];
-  }
-
-  _getDialogElement(node) {
+  };
+  _proto._getDialogElement = function _getDialogElement(node) {
     const dialogElement = ReactDOM__namespace.findDOMNode(node.querySelector('[role="dialog"]'));
     dialogElement.tabIndex = -1;
     return dialogElement;
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       children,
       testId
@@ -383,15 +406,15 @@ class ModalBackdrop extends React__namespace.Component {
     const backdropProps = {
       [ModalLauncherPortalAttributeName]: true
     };
-    return React__namespace.createElement(wonderBlocksCore.View, _extends__default["default"]({
+    return React__namespace.createElement(wonderBlocksCore.View, _extends({
       style: styles$2.modalPositioner,
       onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
       testId: testId
     }, backdropProps), children);
-  }
-
-}
+  };
+  return ModalBackdrop;
+}(React__namespace.Component);
 const styles$2 = aphrodite.StyleSheet.create({
   modalPositioner: {
     position: "fixed",
@@ -410,71 +433,65 @@ const needsHackyMobileSafariScrollDisabler = (() => {
   if (typeof window === "undefined") {
     return false;
   }
-
   const userAgent = window.navigator.userAgent;
   return userAgent.indexOf("iPad") > -1 || userAgent.indexOf("iPhone") > -1;
 })();
-
-class ScrollDisabler extends React__namespace.Component {
-  componentDidMount() {
+let ScrollDisabler = function (_React$Component) {
+  _inheritsLoose(ScrollDisabler, _React$Component);
+  function ScrollDisabler() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = ScrollDisabler.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     if (ScrollDisabler.numModalsOpened === 0) {
       const body = document.body;
-
       if (!body) {
         throw new Error("couldn't find document.body");
       }
-
       ScrollDisabler.oldOverflow = body.style.overflow;
       ScrollDisabler.oldScrollY = window.scrollY;
-
       if (needsHackyMobileSafariScrollDisabler) {
         ScrollDisabler.oldPosition = body.style.position;
         ScrollDisabler.oldWidth = body.style.width;
         ScrollDisabler.oldTop = body.style.top;
       }
-
       body.style.overflow = "hidden";
-
       if (needsHackyMobileSafariScrollDisabler) {
         body.style.position = "fixed";
         body.style.width = "100%";
         body.style.top = `${-ScrollDisabler.oldScrollY}px`;
       }
     }
-
     ScrollDisabler.numModalsOpened++;
-  }
-
-  componentWillUnmount() {
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
     ScrollDisabler.numModalsOpened--;
-
     if (ScrollDisabler.numModalsOpened === 0) {
       const body = document.body;
-
       if (!body) {
         throw new Error("couldn't find document.body");
       }
-
       body.style.overflow = ScrollDisabler.oldOverflow;
-
       if (needsHackyMobileSafariScrollDisabler) {
         body.style.position = ScrollDisabler.oldPosition;
         body.style.width = ScrollDisabler.oldWidth;
         body.style.top = ScrollDisabler.oldTop;
       }
-
       if (typeof window !== "undefined" && window.scrollTo) {
         window.scrollTo(0, ScrollDisabler.oldScrollY);
       }
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return null;
-  }
-
-}
-
+  };
+  return ScrollDisabler;
+}(React__namespace.Component);
+ScrollDisabler.oldOverflow = void 0;
+ScrollDisabler.oldPosition = void 0;
+ScrollDisabler.oldScrollY = void 0;
+ScrollDisabler.oldWidth = void 0;
+ScrollDisabler.oldTop = void 0;
 ScrollDisabler.numModalsOpened = 0;
 
 const defaultContext = {
@@ -482,35 +499,32 @@ const defaultContext = {
 };
 var ModalContext = React__namespace.createContext(defaultContext);
 
-class ModalLauncher extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
+let ModalLauncher = function (_React$Component) {
+  _inheritsLoose(ModalLauncher, _React$Component);
+  function ModalLauncher(...args) {
+    var _this;
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.lastElementFocusedOutsideModal = void 0;
+    _this.state = {
       opened: false
     };
-
-    this._saveLastElementFocused = () => {
-      this.lastElementFocusedOutsideModal = document.activeElement;
+    _this._saveLastElementFocused = () => {
+      _this.lastElementFocusedOutsideModal = document.activeElement;
     };
-
-    this._openModal = () => {
-      this._saveLastElementFocused();
-
-      this.setState({
+    _this._openModal = () => {
+      _this._saveLastElementFocused();
+      _this.setState({
         opened: true
       });
     };
-
-    this._returnFocus = () => {
+    _this._returnFocus = () => {
       const {
         closedFocusId,
         schedule
-      } = this.props;
-      const lastElement = this.lastElementFocusedOutsideModal;
-
+      } = _this.props;
+      const lastElement = _this.lastElementFocusedOutsideModal;
       if (closedFocusId) {
         const focusElement = ReactDOM__namespace.findDOMNode(document.getElementById(closedFocusId));
-
         if (focusElement) {
           schedule.animationFrame(() => {
             focusElement.focus();
@@ -518,53 +532,46 @@ class ModalLauncher extends React__namespace.Component {
           return;
         }
       }
-
       if (lastElement != null) {
         schedule.animationFrame(() => {
           lastElement.focus();
         });
       }
     };
-
-    this.handleCloseModal = () => {
-      this.setState({
+    _this.handleCloseModal = () => {
+      _this.setState({
         opened: false
       }, () => {
         const {
           onClose
-        } = this.props;
-        onClose && onClose();
-
-        this._returnFocus();
+        } = _this.props;
+        onClose == null ? void 0 : onClose();
+        _this._returnFocus();
       });
     };
+    return _this;
   }
-
-  static getDerivedStateFromProps(props, state) {
+  ModalLauncher.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
     if (typeof props.opened === "boolean" && props.children) {
       console.warn("'children' and 'opened' can't be used together");
     }
-
     if (typeof props.opened === "boolean" && !props.onClose) {
       console.warn("'onClose' should be used with 'opened'");
     }
-
     if (typeof props.opened !== "boolean" && !props.children) {
       console.warn("either 'children' or 'opened' must be set");
     }
-
     return {
       opened: typeof props.opened === "boolean" ? props.opened : state.opened
     };
-  }
-
-  componentDidUpdate(prevProps) {
+  };
+  var _proto = ModalLauncher.prototype;
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     if (!prevProps.opened && this.props.opened) {
       this._saveLastElementFocused();
     }
-  }
-
-  _renderModal() {
+  };
+  _proto._renderModal = function _renderModal() {
     if (typeof this.props.modal === "function") {
       return this.props.modal({
         closeModal: this.handleCloseModal
@@ -572,20 +579,17 @@ class ModalLauncher extends React__namespace.Component {
     } else {
       return this.props.modal;
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const renderedChildren = this.props.children ? this.props.children({
       openModal: this._openModal
     }) : null;
     const {
       body
     } = document;
-
     if (!body) {
       return null;
     }
-
     return React__namespace.createElement(ModalContext.Provider, {
       value: {
         closeModal: this.handleCloseModal
@@ -599,41 +603,38 @@ class ModalLauncher extends React__namespace.Component {
     }, this._renderModal())), body), this.state.opened && React__namespace.createElement(ModalLauncherKeypressListener, {
       onClose: this.handleCloseModal
     }), this.state.opened && React__namespace.createElement(ScrollDisabler, null));
-  }
-
-}
-
+  };
+  return ModalLauncher;
+}(React__namespace.Component);
 ModalLauncher.defaultProps = {
   backdropDismissEnabled: true
 };
-
-class ModalLauncherKeypressListener extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-
-    this._handleKeyup = e => {
+let ModalLauncherKeypressListener = function (_React$Component2) {
+  _inheritsLoose(ModalLauncherKeypressListener, _React$Component2);
+  function ModalLauncherKeypressListener(...args) {
+    var _this2;
+    _this2 = _React$Component2.call.apply(_React$Component2, [this].concat(args)) || this;
+    _this2._handleKeyup = e => {
       if (e.key === "Escape") {
         e.preventDefault();
         e.stopPropagation();
-        this.props.onClose();
+        _this2.props.onClose();
       }
     };
+    return _this2;
   }
-
-  componentDidMount() {
+  var _proto2 = ModalLauncherKeypressListener.prototype;
+  _proto2.componentDidMount = function componentDidMount() {
     window.addEventListener("keyup", this._handleKeyup);
-  }
-
-  componentWillUnmount() {
+  };
+  _proto2.componentWillUnmount = function componentWillUnmount() {
     window.removeEventListener("keyup", this._handleKeyup);
-  }
-
-  render() {
+  };
+  _proto2.render = function render() {
     return null;
-  }
-
-}
-
+  };
+  return ModalLauncherKeypressListener;
+}(React__namespace.Component);
 const styles$1 = aphrodite.StyleSheet.create({
   container: {
     zIndex: 1080
@@ -641,12 +642,16 @@ const styles$1 = aphrodite.StyleSheet.create({
 });
 var modalLauncher = wonderBlocksTiming.withActionScheduler(ModalLauncher);
 
-class ModalContent extends React__namespace.Component {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
+let ModalContent = function (_React$Component) {
+  _inheritsLoose(ModalContent, _React$Component);
+  function ModalContent() {
+    return _React$Component.apply(this, arguments) || this;
   }
-
-  render() {
+  ModalContent.isClassOf = function isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
+  };
+  var _proto = ModalContent.prototype;
+  _proto.render = function render() {
     const {
       scrollOverflow,
       style,
@@ -661,9 +666,9 @@ class ModalContent extends React__namespace.Component {
     }, React__namespace.createElement(wonderBlocksCore.View, {
       style: [styles.content, style]
     }, children)));
-  }
-
-}
+  };
+  return ModalContent;
+}(React__namespace.Component);
 ModalContent.defaultProps = {
   scrollOverflow: true
 };
@@ -691,8 +696,13 @@ const styleSheets$1 = {
   })
 };
 
-class CloseButton extends React__namespace.Component {
-  render() {
+let CloseButton = function (_React$Component) {
+  _inheritsLoose(CloseButton, _React$Component);
+  function CloseButton() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = CloseButton.prototype;
+  _proto.render = function render() {
     const {
       light,
       onClick,
@@ -705,7 +715,6 @@ class CloseButton extends React__namespace.Component {
       if (closeModal && onClick) {
         throw new Error("You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead");
       }
-
       return React__namespace.createElement(IconButton__default["default"], {
         icon: wonderBlocksIcon.icons.dismiss,
         "aria-label": "Close modal",
@@ -716,30 +725,32 @@ class CloseButton extends React__namespace.Component {
         testId: testId
       });
     });
-  }
-
-}
+  };
+  return CloseButton;
+}(React__namespace.Component);
 
-class ModalPanel extends React__namespace.Component {
-  renderMainContent() {
+let ModalPanel = function (_React$Component) {
+  _inheritsLoose(ModalPanel, _React$Component);
+  function ModalPanel() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = ModalPanel.prototype;
+  _proto.renderMainContent = function renderMainContent() {
     const {
       content,
       footer,
       scrollOverflow
     } = this.props;
     const mainContent = ModalContent.isClassOf(content) ? content : React__namespace.createElement(ModalContent, null, content);
-
     if (!mainContent) {
       return mainContent;
     }
-
     return React__namespace.cloneElement(mainContent, {
       scrollOverflow,
       style: [!!footer && styles.hasFooter, mainContent.props.style]
     });
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       closeButtonVisible,
       footer,
@@ -759,9 +770,9 @@ class ModalPanel extends React__namespace.Component {
       style: styles.closeButton,
       testId: testId && `${testId}-close`
     }), header, mainContent, !footer || ModalFooter.isClassOf(footer) ? footer : React__namespace.createElement(ModalFooter, null, footer));
-  }
-
-}
+  };
+  return ModalPanel;
+}(React__namespace.Component);
 ModalPanel.defaultProps = {
   closeButtonVisible: true,
   scrollOverflow: true,
@@ -794,15 +805,19 @@ const styles = aphrodite.StyleSheet.create({
   }
 });
 
-class OnePaneDialog extends React__namespace.Component {
-  renderHeader(uniqueId) {
+let OnePaneDialog = function (_React$Component) {
+  _inheritsLoose(OnePaneDialog, _React$Component);
+  function OnePaneDialog() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = OnePaneDialog.prototype;
+  _proto.renderHeader = function renderHeader(uniqueId) {
     const {
       title,
       breadcrumbs = undefined,
       subtitle = undefined,
       testId
     } = this.props;
-
     if (breadcrumbs) {
       return React__namespace.createElement(ModalHeader, {
         title: title,
@@ -824,9 +839,8 @@ class OnePaneDialog extends React__namespace.Component {
         testId: testId && `${testId}-header`
       });
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       onClose,
       footer,
@@ -863,9 +877,9 @@ class OnePaneDialog extends React__namespace.Component {
       closeButtonVisible: closeButtonVisible,
       testId: testId
     }))));
-  }
-
-}
+  };
+  return OnePaneDialog;
+}(React__namespace.Component);
 OnePaneDialog.defaultProps = {
   closeButtonVisible: true
 };
@@ -889,14 +903,11 @@ const styleSheets = {
 
 function maybeGetNextAncestorModalLauncherPortal(element) {
   let candidateElement = element && element.parentElement;
-
   while (candidateElement && !candidateElement.hasAttribute(ModalLauncherPortalAttributeName)) {
     candidateElement = candidateElement.parentElement;
   }
-
   return candidateElement;
 }
-
 function maybeGetPortalMountedModalHostElement(element) {
   return maybeGetNextAncestorModalLauncherPortal(element);
 }