@khanacademy/wonder-blocks-modal 4.0.4 → 4.0.6

package/dist/es/index.js

@@ -10,27 +10,8 @@ import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
 import { icons } from '@khanacademy/wonder-blocks-icon';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 
-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() {
+class ModalDialog extends React.Component {
+  render() {
     const {
       above,
       below,
@@ -65,9 +46,8 @@ let ModalDialog = function (_React$Component) {
     }, children), above && React.createElement(View, {
       style: styles.above
     }, above))));
-  };
-  return ModalDialog;
-}(React.Component);
+  }
+}
 ModalDialog.defaultProps = {
   role: "dialog"
 };
@@ -114,25 +94,19 @@ const styleSheets$3 = {
   })
 };
 
-let ModalFooter = function (_React$Component) {
-  _inheritsLoose(ModalFooter, _React$Component);
-  function ModalFooter() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  ModalFooter.isClassOf = function isClassOf(instance) {
+class ModalFooter extends React.Component {
+  static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
-  };
-  var _proto = ModalFooter.prototype;
-  _proto.render = function render() {
+  }
+  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: {
@@ -151,13 +125,8 @@ const styles$3 = StyleSheet.create({
   }
 });
 
-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() {
+class ModalHeader extends React.Component {
+  render() {
     const {
       breadcrumbs = undefined,
       light,
@@ -186,9 +155,8 @@ let ModalHeader = function (_React$Component) {
       style: light && styles.subtitle,
       testId: testId && `${testId}-subtitle`
     }, subtitle)));
-  };
-  return ModalHeader;
-}(React.Component);
+  }
+}
 ModalHeader.defaultProps = {
   light: true
 };
@@ -231,13 +199,11 @@ const styleSheets$2 = {
 };
 
 const FOCUSABLE_ELEMENTS$1 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-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 => {
+class FocusTrap extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.modalRoot = void 0;
+    this.getModalRoot = node => {
       if (!node) {
         return;
       }
@@ -245,33 +211,31 @@ let FocusTrap = function (_React$Component) {
       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;
   }
-  var _proto = FocusTrap.prototype;
-  _proto.tryToFocus = function tryToFocus(node) {
+  tryToFocus(node) {
     if (node instanceof HTMLElement) {
       try {
         node.focus();
       } catch (e) {}
       return document.activeElement === node;
     }
-  };
-  _proto.focusElementIn = function focusElementIn(isLast) {
+  }
+  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);
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       style
     } = this.props;
@@ -293,9 +257,8 @@ let FocusTrap = function (_React$Component) {
         position: "fixed"
       }
     }));
-  };
-  return FocusTrap;
-}(React.Component);
+  }
+}
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -319,25 +282,21 @@ function findFocusableNodes(root) {
   return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
 }
 
-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;
+class ModalBackdrop extends React.Component {
+  constructor(...args) {
+    super(...args);
+    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;
   }
-  var _proto = ModalBackdrop.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     const node = ReactDOM.findDOMNode(this);
     if (!node) {
       return;
@@ -346,8 +305,8 @@ let ModalBackdrop = function (_React$Component) {
     setTimeout(() => {
       firstFocusableElement.focus();
     }, 0);
-  };
-  _proto._getInitialFocusElement = function _getInitialFocusElement(node) {
+  }
+  _getInitialFocusElement(node) {
     const {
       initialFocusId
     } = this.props;
@@ -355,20 +314,20 @@ let ModalBackdrop = function (_React$Component) {
       return null;
     }
     return ReactDOM.findDOMNode(node.querySelector(`#${initialFocusId}`));
-  };
-  _proto._getFirstFocusableElement = function _getFirstFocusableElement(node) {
+  }
+  _getFirstFocusableElement(node) {
     const focusableElements = findFocusableNodes(node);
     if (!focusableElements) {
       return null;
     }
     return focusableElements[0];
-  };
-  _proto._getDialogElement = function _getDialogElement(node) {
+  }
+  _getDialogElement(node) {
     const dialogElement = ReactDOM.findDOMNode(node.querySelector('[role="dialog"]'));
     dialogElement.tabIndex = -1;
     return dialogElement;
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       children,
       testId
@@ -382,9 +341,8 @@ let ModalBackdrop = function (_React$Component) {
       onMouseUp: this.handleMouseUp,
       testId: testId
     }, backdropProps), children);
-  };
-  return ModalBackdrop;
-}(React.Component);
+  }
+}
 const styles$2 = StyleSheet.create({
   modalPositioner: {
     position: "fixed",
@@ -406,13 +364,8 @@ const needsHackyMobileSafariScrollDisabler = (() => {
   const userAgent = window.navigator.userAgent;
   return userAgent.indexOf("iPad") > -1 || userAgent.indexOf("iPhone") > -1;
 })();
-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() {
+class ScrollDisabler extends React.Component {
+  componentDidMount() {
     if (ScrollDisabler.numModalsOpened === 0) {
       const body = document.body;
       if (!body) {
@@ -433,8 +386,8 @@ let ScrollDisabler = function (_React$Component) {
       }
     }
     ScrollDisabler.numModalsOpened++;
-  };
-  _proto.componentWillUnmount = function componentWillUnmount() {
+  }
+  componentWillUnmount() {
     ScrollDisabler.numModalsOpened--;
     if (ScrollDisabler.numModalsOpened === 0) {
       const body = document.body;
@@ -451,12 +404,11 @@ let ScrollDisabler = function (_React$Component) {
         window.scrollTo(0, ScrollDisabler.oldScrollY);
       }
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     return null;
-  };
-  return ScrollDisabler;
-}(React.Component);
+  }
+}
 ScrollDisabler.oldOverflow = void 0;
 ScrollDisabler.oldPosition = void 0;
 ScrollDisabler.oldScrollY = void 0;
@@ -469,30 +421,28 @@ const defaultContext = {
 };
 var ModalContext = React.createContext(defaultContext);
 
-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 = {
+class ModalLauncher extends React.Component {
+  constructor(...args) {
+    super(...args);
+    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) {
@@ -508,20 +458,19 @@ let ModalLauncher = function (_React$Component) {
         });
       }
     };
-    _this.handleCloseModal = () => {
-      _this.setState({
+    this.handleCloseModal = () => {
+      this.setState({
         opened: false
       }, () => {
         const {
           onClose
-        } = _this.props;
+        } = this.props;
         onClose == null ? void 0 : onClose();
-        _this._returnFocus();
+        this._returnFocus();
       });
     };
-    return _this;
   }
-  ModalLauncher.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(props, state) {
     if (typeof props.opened === "boolean" && props.children) {
       console.warn("'children' and 'opened' can't be used together");
     }
@@ -534,14 +483,13 @@ let ModalLauncher = function (_React$Component) {
     return {
       opened: typeof props.opened === "boolean" ? props.opened : state.opened
     };
-  };
-  var _proto = ModalLauncher.prototype;
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+  }
+  componentDidUpdate(prevProps) {
     if (!prevProps.opened && this.props.opened) {
       this._saveLastElementFocused();
     }
-  };
-  _proto._renderModal = function _renderModal() {
+  }
+  _renderModal() {
     if (typeof this.props.modal === "function") {
       return this.props.modal({
         closeModal: this.handleCloseModal
@@ -549,8 +497,8 @@ let ModalLauncher = function (_React$Component) {
     } else {
       return this.props.modal;
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const renderedChildren = this.props.children ? this.props.children({
       openModal: this._openModal
     }) : null;
@@ -573,38 +521,32 @@ let ModalLauncher = function (_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
 };
-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 => {
+class ModalLauncherKeypressListener extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this._handleKeyup = e => {
       if (e.key === "Escape") {
         e.preventDefault();
         e.stopPropagation();
-        _this2.props.onClose();
+        this.props.onClose();
       }
     };
-    return _this2;
   }
-  var _proto2 = ModalLauncherKeypressListener.prototype;
-  _proto2.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     window.addEventListener("keyup", this._handleKeyup);
-  };
-  _proto2.componentWillUnmount = function componentWillUnmount() {
+  }
+  componentWillUnmount() {
     window.removeEventListener("keyup", this._handleKeyup);
-  };
-  _proto2.render = function render() {
+  }
+  render() {
     return null;
-  };
-  return ModalLauncherKeypressListener;
-}(React.Component);
+  }
+}
 const styles$1 = StyleSheet.create({
   container: {
     zIndex: 1080
@@ -612,16 +554,11 @@ const styles$1 = StyleSheet.create({
 });
 var modalLauncher = withActionScheduler(ModalLauncher);
 
-let ModalContent = function (_React$Component) {
-  _inheritsLoose(ModalContent, _React$Component);
-  function ModalContent() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  ModalContent.isClassOf = function isClassOf(instance) {
+class ModalContent extends React.Component {
+  static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
-  };
-  var _proto = ModalContent.prototype;
-  _proto.render = function render() {
+  }
+  render() {
     const {
       scrollOverflow,
       style,
@@ -636,9 +573,8 @@ let ModalContent = function (_React$Component) {
     }, React.createElement(View, {
       style: [styles.content, style]
     }, children)));
-  };
-  return ModalContent;
-}(React.Component);
+  }
+}
 ModalContent.defaultProps = {
   scrollOverflow: true
 };
@@ -666,13 +602,8 @@ const styleSheets$1 = {
   })
 };
 
-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() {
+class CloseButton extends React.Component {
+  render() {
     const {
       light,
       onClick,
@@ -695,17 +626,11 @@ let CloseButton = function (_React$Component) {
         testId: testId
       });
     });
-  };
-  return CloseButton;
-}(React.Component);
-
-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() {
+}
+
+class ModalPanel extends React.Component {
+  renderMainContent() {
     const {
       content,
       footer,
@@ -719,8 +644,8 @@ let ModalPanel = function (_React$Component) {
       scrollOverflow,
       style: [!!footer && styles.hasFooter, mainContent.props.style]
     });
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       closeButtonVisible,
       footer,
@@ -740,9 +665,8 @@ let ModalPanel = function (_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,
@@ -775,13 +699,8 @@ const styles = StyleSheet.create({
   }
 });
 
-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) {
+class OnePaneDialog extends React.Component {
+  renderHeader(uniqueId) {
     const {
       title,
       breadcrumbs = undefined,
@@ -809,8 +728,8 @@ let OnePaneDialog = function (_React$Component) {
         testId: testId && `${testId}-header`
       });
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       onClose,
       footer,
@@ -847,9 +766,8 @@ let OnePaneDialog = function (_React$Component) {
       closeButtonVisible: closeButtonVisible,
       testId: testId
     }))));
-  };
-  return OnePaneDialog;
-}(React.Component);
+  }
+}
 OnePaneDialog.defaultProps = {
   closeButtonVisible: true
 };