@khanacademy/wonder-blocks-clickable 2.1.1 → 2.2.1

package/dist/es/index.js

@@ -1,215 +1,13 @@
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
+import _extends from '@babel/runtime/helpers/extends';
 import { Component, createElement } from 'react';
 import { StyleSheet } from 'aphrodite';
-import { any } from 'prop-types';
 import { withRouter, Link } from 'react-router-dom';
+import { __RouterContext } from 'react-router';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
 import Color from '@khanacademy/wonder-blocks-color';
 
-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 ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
-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 _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-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);
-  };
-}
-
-var getAppropriateTriggersForRole = function getAppropriateTriggersForRole(role) {
+const getAppropriateTriggersForRole = role => {
   switch (role) {
     // Triggers on ENTER, but not SPACE
     case "link":
@@ -240,53 +38,27 @@ var getAppropriateTriggersForRole = function getAppropriateTriggersForRole(role)
   }
 };
 
-var disabledHandlers = {
-  onClick: function onClick() {
-    return void 0;
-  },
-  onMouseEnter: function onMouseEnter() {
-    return void 0;
-  },
-  onMouseLeave: function onMouseLeave() {
-    return void 0;
-  },
-  onMouseDown: function onMouseDown() {
-    return void 0;
-  },
-  onMouseUp: function onMouseUp() {
-    return void 0;
-  },
-  onDragStart: function onDragStart() {
-    return void 0;
-  },
-  onTouchStart: function onTouchStart() {
-    return void 0;
-  },
-  onTouchEnd: function onTouchEnd() {
-    return void 0;
-  },
-  onTouchCancel: function onTouchCancel() {
-    return void 0;
-  },
-  onKeyDown: function onKeyDown() {
-    return void 0;
-  },
-  onKeyUp: function onKeyUp() {
-    return void 0;
-  },
-  onFocus: function onFocus() {
-    return void 0;
-  },
-  onBlur: function onBlur() {
-    return void 0;
-  },
+const disabledHandlers = {
+  onClick: () => void 0,
+  onMouseEnter: () => void 0,
+  onMouseLeave: () => void 0,
+  onMouseDown: () => void 0,
+  onMouseUp: () => void 0,
+  onDragStart: () => void 0,
+  onTouchStart: () => void 0,
+  onTouchEnd: () => void 0,
+  onTouchCancel: () => void 0,
+  onKeyDown: () => void 0,
+  onKeyUp: () => void 0,
+  onFocus: () => void 0,
+  onBlur: () => void 0,
   tabIndex: -1
 };
-var keyCodes = {
+const keyCodes = {
   enter: 13,
   space: 32
 };
-var startState = {
+const startState = {
   hovered: false,
   focused: false,
   pressed: false,
@@ -366,149 +138,126 @@ var startState = {
  * The react-router aware version is returned if `router` is a react-router-dom
  * router, `skipClientNav` is not `true`, and `href` is an internal URL.
  *
- * The `router` can be accessed via this.context.router from a component
- * rendered as a descendant of a BrowserRouter.
+ * The `router` can be accessed via __RouterContext (imported from 'react-router')
+ * from a component rendered as a descendant of a BrowserRouter.
  * See https://reacttraining.com/react-router/web/guides/basic-components.
  */
 
-var ClickableBehavior = /*#__PURE__*/function (_React$Component) {
-  _inherits(ClickableBehavior, _React$Component);
-
-  var _super = _createSuper(ClickableBehavior);
-
-  _createClass(ClickableBehavior, null, [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      // If new props are disabled, reset the hovered/focused/pressed states
-      if (props.disabled) {
-        return startState;
-      } else {
-        // Cannot return undefined
-        return null;
-      }
+class ClickableBehavior extends Component {
+  static getDerivedStateFromProps(props, state) {
+    // If new props are disabled, reset the hovered/focused/pressed states
+    if (props.disabled) {
+      return startState;
+    } else {
+      // Cannot return undefined
+      return null;
     }
-  }]);
-
-  function ClickableBehavior(props) {
-    var _this;
-
-    _classCallCheck(this, ClickableBehavior);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "waitingForClick", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "enterClick", void 0);
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "dragging", void 0);
+  constructor(props) {
+    super(props);
 
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      var _this$props = _this.props,
-          _this$props$onClick = _this$props.onClick,
-          onClick = _this$props$onClick === void 0 ? undefined : _this$props$onClick,
-          _this$props$beforeNav = _this$props.beforeNav,
-          beforeNav = _this$props$beforeNav === void 0 ? undefined : _this$props$beforeNav,
-          _this$props$safeWithN = _this$props.safeWithNav,
-          safeWithNav = _this$props$safeWithN === void 0 ? undefined : _this$props$safeWithN;
+    this.handleClick = e => {
+      const {
+        onClick = undefined,
+        beforeNav = undefined,
+        safeWithNav = undefined
+      } = this.props;
 
-      if (_this.enterClick) {
+      if (this.enterClick) {
         return;
       }
 
       if (onClick || beforeNav || safeWithNav) {
-        _this.waitingForClick = false;
+        this.waitingForClick = false;
       }
 
-      _this.runCallbackAndMaybeNavigate(e);
-    });
+      this.runCallbackAndMaybeNavigate(e);
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (e) {
+    this.handleMouseEnter = e => {
       // When the left button is pressed already, we want it to be pressed
       if (e.buttons === 1) {
-        _this.dragging = true;
-
-        _this.setState({
+        this.dragging = true;
+        this.setState({
           pressed: true
         });
-      } else if (!_this.waitingForClick) {
-        _this.setState({
+      } else if (!this.waitingForClick) {
+        this.setState({
           hovered: true
         });
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () {
-      if (!_this.waitingForClick) {
-        _this.dragging = false;
+    };
 
-        _this.setState({
+    this.handleMouseLeave = () => {
+      if (!this.waitingForClick) {
+        this.dragging = false;
+        this.setState({
           hovered: false,
           pressed: false,
           focused: false
         });
       }
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function () {
-      _this.setState({
+    this.handleMouseDown = () => {
+      this.setState({
         pressed: true
       });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseUp", function (e) {
-      if (_this.dragging) {
-        _this.dragging = false;
+    };
 
-        _this.handleClick(e);
+    this.handleMouseUp = e => {
+      if (this.dragging) {
+        this.dragging = false;
+        this.handleClick(e);
       }
 
-      _this.setState({
+      this.setState({
         pressed: false,
         focused: false
       });
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleDragStart", function (e) {
-      _this.dragging = true;
+    this.handleDragStart = e => {
+      this.dragging = true;
       e.preventDefault();
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleTouchStart", function () {
-      _this.setState({
+    this.handleTouchStart = () => {
+      this.setState({
         pressed: true
       });
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleTouchEnd", function () {
-      _this.setState({
+    this.handleTouchEnd = () => {
+      this.setState({
         pressed: false
       });
+      this.waitingForClick = true;
+    };
 
-      _this.waitingForClick = true;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleTouchCancel", function () {
-      _this.setState({
+    this.handleTouchCancel = () => {
+      this.setState({
         pressed: false
       });
+      this.waitingForClick = true;
+    };
 
-      _this.waitingForClick = true;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
-      var _this$props2 = _this.props,
-          onKeyDown = _this$props2.onKeyDown,
-          role = _this$props2.role;
+    this.handleKeyDown = e => {
+      const {
+        onKeyDown,
+        role
+      } = this.props;
 
       if (onKeyDown) {
         onKeyDown(e);
       }
 
-      var keyCode = e.which || e.keyCode;
-
-      var _getAppropriateTrigge = getAppropriateTriggersForRole(role),
-          triggerOnEnter = _getAppropriateTrigge.triggerOnEnter,
-          triggerOnSpace = _getAppropriateTrigge.triggerOnSpace;
+      const keyCode = e.which || e.keyCode;
+      const {
+        triggerOnEnter,
+        triggerOnSpace
+      } = getAppropriateTriggersForRole(role);
 
       if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
         // This prevents space from scrolling down. It also prevents the
@@ -516,112 +265,116 @@ var ClickableBehavior = /*#__PURE__*/function (_React$Component) {
         // call the supplied onClick and handle potential navigation in
         // handleKeyUp instead.
         e.preventDefault();
-
-        _this.setState({
+        this.setState({
           pressed: true
         });
       } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
         // If the component isn't supposed to trigger on enter, we have to
         // keep track of the enter keydown to negate the onClick callback
-        _this.enterClick = true;
+        this.enterClick = true;
       }
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleKeyUp", function (e) {
-      var _this$props3 = _this.props,
-          onKeyUp = _this$props3.onKeyUp,
-          role = _this$props3.role;
+    this.handleKeyUp = e => {
+      const {
+        onKeyUp,
+        role
+      } = this.props;
 
       if (onKeyUp) {
         onKeyUp(e);
       }
 
-      var keyCode = e.which || e.keyCode;
-
-      var _getAppropriateTrigge2 = getAppropriateTriggersForRole(role),
-          triggerOnEnter = _getAppropriateTrigge2.triggerOnEnter,
-          triggerOnSpace = _getAppropriateTrigge2.triggerOnSpace;
+      const keyCode = e.which || e.keyCode;
+      const {
+        triggerOnEnter,
+        triggerOnSpace
+      } = getAppropriateTriggersForRole(role);
 
       if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
-        _this.setState({
+        this.setState({
           pressed: false,
           focused: true
         });
-
-        _this.runCallbackAndMaybeNavigate(e);
+        this.runCallbackAndMaybeNavigate(e);
       } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
-        _this.enterClick = false;
+        this.enterClick = false;
       }
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
-      _this.setState({
+    this.handleFocus = e => {
+      this.setState({
         focused: true
       });
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
-      _this.setState({
+    this.handleBlur = e => {
+      this.setState({
         focused: false,
         pressed: false
       });
-    });
+    };
 
-    _this.state = startState;
-    _this.waitingForClick = false;
-    _this.enterClick = false;
-    _this.dragging = false;
-    return _this;
+    this.state = startState;
+    this.waitingForClick = false;
+    this.enterClick = false;
+    this.dragging = false;
   }
 
-  _createClass(ClickableBehavior, [{
-    key: "navigateOrReset",
-    value: function navigateOrReset(shouldNavigate) {
-      if (shouldNavigate) {
-        var _this$props4 = this.props,
-            history = _this$props4.history,
-            href = _this$props4.href,
-            skipClientNav = _this$props4.skipClientNav,
-            _this$props4$target = _this$props4.target,
-            target = _this$props4$target === void 0 ? undefined : _this$props4$target;
-
-        if (href) {
-          if (target === "_blank") {
-            window.open(href, "_blank");
-            this.setState({
-              waiting: false
-            });
-          } else if (history && !skipClientNav) {
-            history.push(href);
-            this.setState({
-              waiting: false
-            });
-          } else {
-            window.location.assign(href); // We don't bother clearing the waiting state, the full page
-            // load navigation will do that for us by loading a new page.
-          }
+  navigateOrReset(shouldNavigate) {
+    if (shouldNavigate) {
+      const {
+        history,
+        href,
+        skipClientNav,
+        target = undefined
+      } = this.props;
+
+      if (href) {
+        if (target === "_blank") {
+          window.open(href, "_blank");
+          this.setState({
+            waiting: false
+          });
+        } else if (history && !skipClientNav) {
+          history.push(href);
+          this.setState({
+            waiting: false
+          });
+        } else {
+          window.location.assign(href); // We don't bother clearing the waiting state, the full page
+          // load navigation will do that for us by loading a new page.
         }
-      } else {
+      }
+    } else {
+      this.setState({
+        waiting: false
+      });
+    }
+  }
+
+  handleSafeWithNav(safeWithNav, shouldNavigate) {
+    const {
+      skipClientNav,
+      history
+    } = this.props;
+
+    if (history && !skipClientNav || this.props.target === "_blank") {
+      // client-side nav
+      safeWithNav();
+      this.navigateOrReset(shouldNavigate);
+      return Promise.resolve();
+    } else {
+      if (!this.state.waiting) {
+        // We only show the spinner for safeWithNav when doing
+        // a full page load navigation since since the spinner is
+        // indicating that we're waiting for navigation to occur.
         this.setState({
-          waiting: false
+          waiting: true
         });
       }
-    }
-  }, {
-    key: "handleSafeWithNav",
-    value: function handleSafeWithNav(safeWithNav, shouldNavigate) {
-      var _this2 = this;
-
-      var _this$props5 = this.props,
-          skipClientNav = _this$props5.skipClientNav,
-          history = _this$props5.history;
-
-      if (history && !skipClientNav || this.props.target === "_blank") {
-        // client-side nav
-        safeWithNav();
-        this.navigateOrReset(shouldNavigate);
-        return Promise.resolve();
-      } else {
+
+      return safeWithNav().then(() => {
         if (!this.state.waiting) {
           // We only show the spinner for safeWithNav when doing
           // a full page load navigation since since the spinner is
@@ -631,134 +384,117 @@ var ClickableBehavior = /*#__PURE__*/function (_React$Component) {
           });
         }
 
-        return safeWithNav().then(function () {
-          if (!_this2.state.waiting) {
-            // We only show the spinner for safeWithNav when doing
-            // a full page load navigation since since the spinner is
-            // indicating that we're waiting for navigation to occur.
-            _this2.setState({
-              waiting: true
-            });
-          }
-
-          return;
-        }).catch(function (error) {// We ignore the error here so that we always
-          // navigate when using safeWithNav regardless of
-          // whether we're doing a client-side nav or not.
-        }).finally(function () {
-          _this2.navigateOrReset(shouldNavigate);
-        });
-      }
+        return;
+      }).catch(error => {// We ignore the error here so that we always
+        // navigate when using safeWithNav regardless of
+        // whether we're doing a client-side nav or not.
+      }).finally(() => {
+        this.navigateOrReset(shouldNavigate);
+      });
     }
-  }, {
-    key: "runCallbackAndMaybeNavigate",
-    value: function runCallbackAndMaybeNavigate(e) {
-      var _this3 = this;
-
-      var _this$props6 = this.props,
-          _this$props6$onClick = _this$props6.onClick,
-          onClick = _this$props6$onClick === void 0 ? undefined : _this$props6$onClick,
-          _this$props6$beforeNa = _this$props6.beforeNav,
-          beforeNav = _this$props6$beforeNa === void 0 ? undefined : _this$props6$beforeNa,
-          _this$props6$safeWith = _this$props6.safeWithNav,
-          safeWithNav = _this$props6$safeWith === void 0 ? undefined : _this$props6$safeWith,
-          href = _this$props6.href,
-          type = _this$props6.type;
-      var shouldNavigate = true;
-      var canSubmit = true;
-
-      if (onClick) {
-        onClick(e);
-      } // If onClick() has called e.preventDefault() then we shouldn't
-      // navigate.
-
-
-      if (e.defaultPrevented) {
-        shouldNavigate = false;
-        canSubmit = false;
-      }
+  }
 
-      e.preventDefault();
+  runCallbackAndMaybeNavigate(e) {
+    const {
+      onClick = undefined,
+      beforeNav = undefined,
+      safeWithNav = undefined,
+      href,
+      type
+    } = this.props;
+    let shouldNavigate = true;
+    let canSubmit = true;
+
+    if (onClick) {
+      onClick(e);
+    } // If onClick() has called e.preventDefault() then we shouldn't
+    // navigate.
+
+
+    if (e.defaultPrevented) {
+      shouldNavigate = false;
+      canSubmit = false;
+    }
 
-      if (!href && type === "submit" && canSubmit) {
-        var target = e.currentTarget;
-
-        while (target) {
-          if (target instanceof window.HTMLFormElement) {
-            // This event must be marked as cancelable otherwise calling
-            // e.preventDefault() on it won't do anything in Firefox.
-            // Chrome and Safari allow calling e.preventDefault() on
-            // non-cancelable events, but really they shouldn't.
-            var event = new window.Event("submit", {
-              cancelable: true
-            });
-            target.dispatchEvent(event);
-            break;
-          } // All events should be typed as SyntheticEvent<HTMLElement>.
-          // Updating all of the places will take some time so I'll do
-          // this later
-          // $FlowFixMe[prop-missing]
-
-
-          target = target.parentElement;
-        }
-      }
+    e.preventDefault();
 
-      if (beforeNav) {
-        this.setState({
-          waiting: true
-        });
-        beforeNav().then(function () {
-          if (safeWithNav) {
-            return _this3.handleSafeWithNav(safeWithNav, shouldNavigate);
-          } else {
-            return _this3.navigateOrReset(shouldNavigate);
-          }
-        }).catch(function () {});
-      } else if (safeWithNav) {
-        return this.handleSafeWithNav(safeWithNav, shouldNavigate);
-      } else {
-        this.navigateOrReset(shouldNavigate);
+    if (!href && type === "submit" && canSubmit) {
+      let target = e.currentTarget;
+
+      while (target) {
+        if (target instanceof window.HTMLFormElement) {
+          // This event must be marked as cancelable otherwise calling
+          // e.preventDefault() on it won't do anything in Firefox.
+          // Chrome and Safari allow calling e.preventDefault() on
+          // non-cancelable events, but really they shouldn't.
+          const event = new window.Event("submit", {
+            cancelable: true
+          });
+          target.dispatchEvent(event);
+          break;
+        } // All events should be typed as SyntheticEvent<HTMLElement>.
+        // Updating all of the places will take some time so I'll do
+        // this later
+        // $FlowFixMe[prop-missing]
+
+
+        target = target.parentElement;
       }
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var childrenProps = this.props.disabled ? disabledHandlers : {
-        onClick: this.handleClick,
-        onMouseEnter: this.handleMouseEnter,
-        onMouseLeave: this.handleMouseLeave,
-        onMouseDown: this.handleMouseDown,
-        onMouseUp: this.handleMouseUp,
-        onDragStart: this.handleDragStart,
-        onTouchStart: this.handleTouchStart,
-        onTouchEnd: this.handleTouchEnd,
-        onTouchCancel: this.handleTouchCancel,
-        onKeyDown: this.handleKeyDown,
-        onKeyUp: this.handleKeyUp,
-        onFocus: this.handleFocus,
-        onBlur: this.handleBlur,
-        // We set tabIndex to 0 so that users can tab to clickable
-        // things that aren't buttons or anchors.
-        tabIndex: 0
-      }; // When the link is set to open in a new window, we want to set some
-      // `rel` attributes. This is to ensure that the links we're sending folks
-      // to can't hijack the existing page.  These defaults can be overriden
-      // by passing in a different value for the `rel` prop.
-      // More info: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
-
-      childrenProps.rel = this.props.rel || (this.props.target === "_blank" ? "noopener noreferrer" : undefined);
-      var children = this.props.children;
-      return children && children(this.state, childrenProps);
+
+    if (beforeNav) {
+      this.setState({
+        waiting: true
+      });
+      beforeNav().then(() => {
+        if (safeWithNav) {
+          return this.handleSafeWithNav(safeWithNav, shouldNavigate);
+        } else {
+          return this.navigateOrReset(shouldNavigate);
+        }
+      }).catch(() => {});
+    } else if (safeWithNav) {
+      return this.handleSafeWithNav(safeWithNav, shouldNavigate);
+    } else {
+      this.navigateOrReset(shouldNavigate);
     }
-  }]);
+  }
 
-  return ClickableBehavior;
-}(Component);
+  render() {
+    const childrenProps = this.props.disabled ? disabledHandlers : {
+      onClick: this.handleClick,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      onMouseDown: this.handleMouseDown,
+      onMouseUp: this.handleMouseUp,
+      onDragStart: this.handleDragStart,
+      onTouchStart: this.handleTouchStart,
+      onTouchEnd: this.handleTouchEnd,
+      onTouchCancel: this.handleTouchCancel,
+      onKeyDown: this.handleKeyDown,
+      onKeyUp: this.handleKeyUp,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      // We set tabIndex to 0 so that users can tab to clickable
+      // things that aren't buttons or anchors.
+      tabIndex: 0
+    }; // When the link is set to open in a new window, we want to set some
+    // `rel` attributes. This is to ensure that the links we're sending folks
+    // to can't hijack the existing page.  These defaults can be overriden
+    // by passing in a different value for the `rel` prop.
+    // More info: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
+
+    childrenProps.rel = this.props.rel || (this.props.target === "_blank" ? "noopener noreferrer" : undefined);
+    const {
+      children
+    } = this.props;
+    return children && children(this.state, childrenProps);
+  }
 
-_defineProperty(ClickableBehavior, "defaultProps", {
+}
+ClickableBehavior.defaultProps = {
   disabled: false
-});
+};
 
 /**
  * Returns:
@@ -766,7 +502,7 @@ _defineProperty(ClickableBehavior, "defaultProps", {
  * - false for '#', 'javascript:...', 'mailto:...', 'tel:...', etc.
  * - true for all other values, e.g. /foo/bar
  */
-var isClientSideUrl = function isClientSideUrl(href) {
+const isClientSideUrl = href => {
   if (typeof href !== "string") {
     return false;
   }
@@ -780,11 +516,11 @@ var isClientSideUrl = function isClientSideUrl(href) {
  * The react-router aware version is returned if `router` is a react-router-dom
  * router, `skipClientNav` is not `true`, and `href` is an internal URL.
  *
- * The `router` can be accessed via this.context.router from a component rendered
- * as a descendant of a BrowserRouter.
+ * The `router` can be accessed via __RouterContext (imported from 'react-router')
+ * from a component rendered as a descendant of a BrowserRouter.
  * See https://reacttraining.com/react-router/web/guides/basic-components.
  */
-var ClickableBehaviorWithRouter = withRouter(ClickableBehavior);
+const ClickableBehaviorWithRouter = withRouter(ClickableBehavior);
 function getClickableBehavior(
 /**
  * The URL to navigate to.
@@ -809,9 +545,10 @@ router) {
   return ClickableBehavior;
 }
 
-var StyledAnchor = addStyle("a");
-var StyledButton = addStyle("button");
-var StyledLink = addStyle(Link);
+const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled"];
+const StyledAnchor = addStyle("a");
+const StyledButton = addStyle("button");
+const StyledLink = addStyle(Link);
 /**
  * A component to turn any custom component into a clickable one.
  *
@@ -837,130 +574,102 @@ var StyledLink = addStyle(Link);
  * ```
  */
 
-var Clickable = /*#__PURE__*/function (_React$Component) {
-  _inherits(Clickable, _React$Component);
-
-  var _super = _createSuper(Clickable);
-
-  function Clickable() {
-    var _this;
-
-    _classCallCheck(this, Clickable);
+class Clickable extends Component {
+  constructor(...args) {
+    super(...args);
 
-    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), "getCorrectTag", function (clickableState, commonProps) {
-      var activeHref = _this.props.href && !_this.props.disabled;
-      var useClient = _this.context.router && !_this.props.skipClientNav && isClientSideUrl(_this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow
+    this.getCorrectTag = (clickableState, router, commonProps) => {
+      const activeHref = this.props.href && !this.props.disabled;
+      const useClient = router && !this.props.skipClientNav && isClientSideUrl(this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow
       // needs it to refine this.props.href to a string.
 
-      if (activeHref && useClient && _this.props.href) {
+      if (activeHref && useClient && this.props.href) {
         return /*#__PURE__*/createElement(StyledLink, _extends({}, commonProps, {
-          to: _this.props.href,
-          role: _this.props.role,
-          target: _this.props.target || undefined,
-          "aria-disabled": _this.props.disabled ? "true" : undefined
-        }), _this.props.children(clickableState));
+          to: this.props.href,
+          role: this.props.role,
+          target: this.props.target || undefined,
+          "aria-disabled": this.props.disabled ? "true" : undefined
+        }), this.props.children(clickableState));
       } else if (activeHref && !useClient) {
         return /*#__PURE__*/createElement(StyledAnchor, _extends({}, commonProps, {
-          href: _this.props.href,
-          role: _this.props.role,
-          target: _this.props.target || undefined,
-          "aria-disabled": _this.props.disabled ? "true" : undefined
-        }), _this.props.children(clickableState));
+          href: this.props.href,
+          role: this.props.role,
+          target: this.props.target || undefined,
+          "aria-disabled": this.props.disabled ? "true" : undefined
+        }), this.props.children(clickableState));
       } else {
         return /*#__PURE__*/createElement(StyledButton, _extends({}, commonProps, {
           type: "button",
-          disabled: _this.props.disabled
-        }), _this.props.children(clickableState));
+          disabled: this.props.disabled
+        }), this.props.children(clickableState));
       }
-    });
-
-    return _this;
+    };
   }
 
-  _createClass(Clickable, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          href = _this$props.href,
-          onClick = _this$props.onClick,
-          skipClientNav = _this$props.skipClientNav,
-          _this$props$beforeNav = _this$props.beforeNav,
-          beforeNav = _this$props$beforeNav === void 0 ? undefined : _this$props$beforeNav,
-          _this$props$safeWithN = _this$props.safeWithNav,
-          safeWithNav = _this$props$safeWithN === void 0 ? undefined : _this$props$safeWithN,
-          style = _this$props.style,
-          _this$props$target = _this$props.target,
-          target = _this$props$target === void 0 ? undefined : _this$props$target,
-          testId = _this$props.testId,
-          onKeyDown = _this$props.onKeyDown,
-          onKeyUp = _this$props.onKeyUp,
-          hideDefaultFocusRing = _this$props.hideDefaultFocusRing,
-          light = _this$props.light,
-          disabled = _this$props.disabled,
-          restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled"]);
-
-      var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
-
-      var getStyle = function getStyle(state) {
-        return [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
-      };
-
-      if (beforeNav) {
-        return /*#__PURE__*/createElement(ClickableBehavior, {
-          href: href,
-          onClick: onClick,
-          beforeNav: beforeNav,
-          safeWithNav: safeWithNav,
-          onKeyDown: onKeyDown,
-          onKeyUp: onKeyUp,
-          disabled: disabled
-        }, function (state, childrenProps) {
-          return _this2.getCorrectTag(state, _objectSpread2(_objectSpread2({}, restProps), {}, {
-            "data-test-id": testId,
-            style: getStyle(state)
-          }, childrenProps));
-        });
-      } else {
-        return /*#__PURE__*/createElement(ClickableBehavior, {
-          href: href,
-          onClick: onClick,
-          safeWithNav: safeWithNav,
-          onKeyDown: onKeyDown,
-          onKeyUp: onKeyUp,
-          target: target,
-          disabled: disabled
-        }, function (state, childrenProps) {
-          return _this2.getCorrectTag(state, _objectSpread2(_objectSpread2({}, restProps), {}, {
-            "data-test-id": testId,
-            style: getStyle(state)
-          }, childrenProps));
-        });
-      }
+  renderClickableBehavior(router) {
+    const _this$props = this.props,
+          {
+      href,
+      onClick,
+      skipClientNav,
+      beforeNav = undefined,
+      safeWithNav = undefined,
+      style,
+      target = undefined,
+      testId,
+      onKeyDown,
+      onKeyUp,
+      hideDefaultFocusRing,
+      light,
+      disabled
+    } = _this$props,
+          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+
+    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
+
+    const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
+
+    if (beforeNav) {
+      return /*#__PURE__*/createElement(ClickableBehavior, {
+        href: href,
+        onClick: onClick,
+        beforeNav: beforeNav,
+        safeWithNav: safeWithNav,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp,
+        disabled: disabled
+      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends({}, restProps, {
+        "data-test-id": testId,
+        style: getStyle(state)
+      }, childrenProps)));
+    } else {
+      return /*#__PURE__*/createElement(ClickableBehavior, {
+        href: href,
+        onClick: onClick,
+        safeWithNav: safeWithNav,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp,
+        target: target,
+        disabled: disabled
+      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends({}, restProps, {
+        "data-test-id": testId,
+        style: getStyle(state)
+      }, childrenProps)));
     }
-  }]);
-
-  return Clickable;
-}(Component); // Source:  https://gist.github.com/MoOx/9137295
+  }
 
+  render() {
+    return /*#__PURE__*/createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
 
-_defineProperty(Clickable, "contextTypes", {
-  router: any
-});
+} // Source:  https://gist.github.com/MoOx/9137295
 
-_defineProperty(Clickable, "defaultProps", {
+Clickable.defaultProps = {
   light: false,
   disabled: false,
   "aria-label": ""
-});
-var styles = StyleSheet.create({
+};
+const styles = StyleSheet.create({
   reset: {
     border: "none",
     margin: 0,
@@ -993,10 +702,10 @@ var styles = StyleSheet.create({
     cursor: "pointer"
   },
   focused: {
-    outline: "solid 2px ".concat(Color.blue)
+    outline: `solid 2px ${Color.blue}`
   },
   focusedLight: {
-    outline: "solid 2px ".concat(Color.white)
+    outline: `solid 2px ${Color.white}`
   }
 });