@khanacademy/wonder-blocks-modal 3.0.6 → 3.0.8

package/dist/es/index.js

@@ -7,12 +7,30 @@ import Color from '@khanacademy/wonder-blocks-color';
 import { HeadingMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
 import * as ReactDOM from 'react-dom';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
-import _extends from '@babel/runtime/helpers/extends';
 import { icons } from '@khanacademy/wonder-blocks-icon';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 
-class ModalDialog extends React.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,
@@ -47,9 +65,9 @@ class ModalDialog extends React.Component {
     }, children), above && React.createElement(View, {
       style: styles.above
     }, above))));
-  }
-
-}
+  };
+  return ModalDialog;
+}(React.Component);
 ModalDialog.defaultProps = {
   role: "dialog"
 };
@@ -96,21 +114,25 @@ const styleSheets$3 = {
   })
 };
 
-class ModalFooter extends React.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.createElement(View, {
       style: styles$3.footer
     }, children);
-  }
-
-}
+  };
+  return ModalFooter;
+}(React.Component);
 ModalFooter.__IS_MODAL_FOOTER__ = true;
 const styles$3 = StyleSheet.create({
   footer: {
@@ -129,8 +151,13 @@ const styles$3 = StyleSheet.create({
   }
 });
 
-class ModalHeader extends React.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,
@@ -139,11 +166,9 @@ class ModalHeader extends React.Component {
       title,
       titleId
     } = this.props;
-
     if (subtitle && breadcrumbs) {
       throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
     }
-
     return React.createElement(MediaLayout, {
       styleSheets: styleSheets$2
     }, ({
@@ -161,9 +186,9 @@ class ModalHeader extends React.Component {
       style: light && styles.subtitle,
       testId: testId && `${testId}-subtitle`
     }, subtitle)));
-  }
-
-}
+  };
+  return ModalHeader;
+}(React.Component);
 ModalHeader.defaultProps = {
   light: true
 };
@@ -206,52 +231,47 @@ const styleSheets$2 = {
 };
 
 const FOCUSABLE_ELEMENTS$1 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-class FocusTrap extends React.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.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;
@@ -273,8 +293,23 @@ class FocusTrap extends React.Component {
         position: "fixed"
       }
     }));
-  }
-
+  };
+  return FocusTrap;
+}(React.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";
@@ -284,67 +319,56 @@ function findFocusableNodes(root) {
   return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
 }
 
-class ModalBackdrop extends React.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.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.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.findDOMNode(node.querySelector('[role="dialog"]'));
     dialogElement.tabIndex = -1;
     return dialogElement;
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       children,
       testId
@@ -358,9 +382,9 @@ class ModalBackdrop extends React.Component {
       onMouseUp: this.handleMouseUp,
       testId: testId
     }, backdropProps), children);
-  }
-
-}
+  };
+  return ModalBackdrop;
+}(React.Component);
 const styles$2 = StyleSheet.create({
   modalPositioner: {
     position: "fixed",
@@ -379,71 +403,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.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.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 = {
@@ -451,35 +469,32 @@ const defaultContext = {
 };
 var ModalContext = React.createContext(defaultContext);
 
-class ModalLauncher extends React.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.findDOMNode(document.getElementById(closedFocusId));
-
         if (focusElement) {
           schedule.animationFrame(() => {
             focusElement.focus();
@@ -487,53 +502,46 @@ class ModalLauncher extends React.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
@@ -541,20 +549,17 @@ class ModalLauncher extends React.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.createElement(ModalContext.Provider, {
       value: {
         closeModal: this.handleCloseModal
@@ -568,41 +573,38 @@ class ModalLauncher extends React.Component {
     }, this._renderModal())), body), this.state.opened && React.createElement(ModalLauncherKeypressListener, {
       onClose: this.handleCloseModal
     }), this.state.opened && React.createElement(ScrollDisabler, null));
-  }
-
-}
-
+  };
+  return ModalLauncher;
+}(React.Component);
 ModalLauncher.defaultProps = {
   backdropDismissEnabled: true
 };
-
-class ModalLauncherKeypressListener extends React.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.Component);
 const styles$1 = StyleSheet.create({
   container: {
     zIndex: 1080
@@ -610,12 +612,16 @@ const styles$1 = StyleSheet.create({
 });
 var modalLauncher = withActionScheduler(ModalLauncher);
 
-class ModalContent extends React.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,
@@ -630,9 +636,9 @@ class ModalContent extends React.Component {
     }, React.createElement(View, {
       style: [styles.content, style]
     }, children)));
-  }
-
-}
+  };
+  return ModalContent;
+}(React.Component);
 ModalContent.defaultProps = {
   scrollOverflow: true
 };
@@ -660,8 +666,13 @@ const styleSheets$1 = {
   })
 };
 
-class CloseButton extends React.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,
@@ -674,7 +685,6 @@ class CloseButton extends React.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.createElement(IconButton, {
         icon: icons.dismiss,
         "aria-label": "Close modal",
@@ -685,30 +695,32 @@ class CloseButton extends React.Component {
         testId: testId
       });
     });
-  }
-
-}
+  };
+  return CloseButton;
+}(React.Component);
 
-class ModalPanel extends React.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.createElement(ModalContent, null, content);
-
     if (!mainContent) {
       return mainContent;
     }
-
     return React.cloneElement(mainContent, {
       scrollOverflow,
       style: [!!footer && styles.hasFooter, mainContent.props.style]
     });
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       closeButtonVisible,
       footer,
@@ -728,9 +740,9 @@ class ModalPanel extends React.Component {
       style: styles.closeButton,
       testId: testId && `${testId}-close`
     }), header, mainContent, !footer || ModalFooter.isClassOf(footer) ? footer : React.createElement(ModalFooter, null, footer));
-  }
-
-}
+  };
+  return ModalPanel;
+}(React.Component);
 ModalPanel.defaultProps = {
   closeButtonVisible: true,
   scrollOverflow: true,
@@ -763,15 +775,19 @@ const styles = StyleSheet.create({
   }
 });
 
-class OnePaneDialog extends React.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.createElement(ModalHeader, {
         title: title,
@@ -793,9 +809,8 @@ class OnePaneDialog extends React.Component {
         testId: testId && `${testId}-header`
       });
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       onClose,
       footer,
@@ -832,9 +847,9 @@ class OnePaneDialog extends React.Component {
       closeButtonVisible: closeButtonVisible,
       testId: testId
     }))));
-  }
-
-}
+  };
+  return OnePaneDialog;
+}(React.Component);
 OnePaneDialog.defaultProps = {
   closeButtonVisible: true
 };
@@ -858,14 +873,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);
 }