@khanacademy/wonder-blocks-link 3.7.13 → 3.8.2

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @khanacademy/wonder-blocks-link
+
+## 3.8.2
+### Patch Changes
+
+- Updated dependencies [901bfe82]
+  - @khanacademy/wonder-blocks-clickable@2.2.2

package/dist/es/index.js

@@ -1,18 +1,18 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
-import { Component, createElement } from 'react';
-import { any } from 'prop-types';
+import * as React from 'react';
+import { __RouterContext } from 'react-router';
 import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { StyleSheet } from 'aphrodite';
 import { Link as Link$1 } from 'react-router-dom';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
 import Color, { mix, fade } from '@khanacademy/wonder-blocks-color';
 
-const _excluded = ["children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"];
+const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"];
 const StyledAnchor = addStyle("a");
 const StyledLink = addStyle(Link$1);
-class LinkCore extends Component {
-  render() {
+class LinkCore extends React.Component {
+  renderInner(router) {
     const _this$props = this.props,
           {
       children,
@@ -27,11 +27,7 @@ class LinkCore extends Component {
       style,
       testId
     } = _this$props,
-          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
-    const {
-      router
-    } = this.context;
+          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
     const linkStyles = _generateStyles(kind, light, visitable);
 
@@ -42,17 +38,18 @@ class LinkCore extends Component {
       style: [defaultStyles, style]
     }, restProps);
 
-    return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/createElement(StyledLink, _extends({}, commonProps, {
+    return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/React.createElement(StyledLink, _extends({}, commonProps, {
       to: href
-    }), children) : /*#__PURE__*/createElement(StyledAnchor, _extends({}, commonProps, {
+    }), children) : /*#__PURE__*/React.createElement(StyledAnchor, _extends({}, commonProps, {
       href: href
     }), children);
   }
 
+  render() {
+    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
+  }
+
 }
-LinkCore.contextTypes = {
-  router: any
-};
 const styles = {};
 const sharedStyles = StyleSheet.create({
   shared: {
@@ -115,7 +112,7 @@ const _generateStyles = (kind, light, visitable) => {
   return styles[buttonType];
 };
 
-const _excluded$1 = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target"],
+const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target"],
       _excluded2 = ["tabIndex"],
       _excluded3 = ["tabIndex"];
 
@@ -136,8 +133,8 @@ const _excluded$1 = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientN
  * </Link>
  * ```
  */
-class Link extends Component {
-  render() {
+class Link extends React.Component {
+  renderClickableBehavior(router) {
     const _this$props = this.props,
           {
       onClick,
@@ -151,12 +148,12 @@ class Link extends Component {
       onKeyUp,
       target = undefined
     } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
-    const ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
+    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
 
     if (beforeNav) {
-      return /*#__PURE__*/createElement(ClickableBehavior, {
+      return /*#__PURE__*/React.createElement(ClickableBehavior, {
         disabled: false,
         href: href,
         role: "link",
@@ -171,7 +168,7 @@ class Link extends Component {
         } = _ref,
             childrenProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
 
-        return /*#__PURE__*/createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
+        return /*#__PURE__*/React.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
           skipClientNav: skipClientNav,
           href: href,
           target: target // If tabIndex is provide to the component we allow
@@ -182,7 +179,7 @@ class Link extends Component {
         }), children);
       });
     } else {
-      return /*#__PURE__*/createElement(ClickableBehavior, {
+      return /*#__PURE__*/React.createElement(ClickableBehavior, {
         disabled: false,
         href: href,
         role: "link",
@@ -197,7 +194,7 @@ class Link extends Component {
         } = _ref2,
             childrenProps = _objectWithoutPropertiesLoose(_ref2, _excluded3);
 
-        return /*#__PURE__*/createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
+        return /*#__PURE__*/React.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
           skipClientNav: skipClientNav,
           href: href,
           target: target // If tabIndex is provide to the component we allow
@@ -210,14 +207,15 @@ class Link extends Component {
     }
   }
 
+  render() {
+    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 }
-Link.contextTypes = {
-  router: any
-};
 Link.defaultProps = {
   kind: "primary",
   light: false,
   visitable: false
 };
 
-export default Link;
+export { Link as default };

package/dist/index.js

@@ -89,150 +89,60 @@ module.exports =
 /* 0 */
 /***/ (function(module, exports) {
 
-function _extends() {
-  module.exports = _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;
-  };
-
-  module.exports["default"] = module.exports, module.exports.__esModule = true;
-  return _extends.apply(this, arguments);
-}
-
-module.exports = _extends;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
+module.exports = require("react");
 
 /***/ }),
 /* 1 */
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("@khanacademy/wonder-blocks-color");
 
 /***/ }),
 /* 2 */
 /***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-color");
+module.exports = require("react-router");
 
 /***/ }),
 /* 3 */
 /***/ (function(module, exports) {
 
-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;
-}
-
-module.exports = _objectWithoutPropertiesLoose;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
-
-module.exports = require("prop-types");
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-
 module.exports = require("@khanacademy/wonder-blocks-clickable");
 
 /***/ }),
-/* 6 */
-/***/ (function(module, exports) {
-
-module.exports = require("aphrodite");
-
-/***/ }),
-/* 7 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-core");
-
-/***/ }),
-/* 8 */
-/***/ (function(module, exports) {
-
-module.exports = require("react-router-dom");
-
-/***/ }),
-/* 9 */
+/* 4 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ link_Link; });
-
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
-var helpers_extends = __webpack_require__(0);
-var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
-
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
-var objectWithoutPropertiesLoose = __webpack_require__(3);
-var objectWithoutPropertiesLoose_default = /*#__PURE__*/__webpack_require__.n(objectWithoutPropertiesLoose);
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(1);
-
-// EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(4);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-clickable"
-var wonder_blocks_clickable_ = __webpack_require__(5);
-
-// EXTERNAL MODULE: external "aphrodite"
-var external_aphrodite_ = __webpack_require__(6);
-
-// EXTERNAL MODULE: external "react-router-dom"
-var external_react_router_dom_ = __webpack_require__(8);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
-var wonder_blocks_core_ = __webpack_require__(7);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LinkCore; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__);
+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); }
 
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
-var wonder_blocks_color_ = __webpack_require__(2);
-var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
 
-// CONCATENATED MODULE: ./packages/wonder-blocks-link/src/components/link-core.js
 
 
-const _excluded = ["children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"];
 
 
 
 
-
-
-
-const StyledAnchor = Object(wonder_blocks_core_["addStyle"])("a");
-const StyledLink = Object(wonder_blocks_core_["addStyle"])(external_react_router_dom_["Link"]);
-class link_core_LinkCore extends external_react_["Component"] {
-  render() {
-    const _this$props = this.props,
-          {
+const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])("a");
+const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_2__["Link"]);
+class LinkCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  renderInner(router) {
+    const {
       children,
       skipClientNav,
       focused,
@@ -243,36 +153,33 @@ class link_core_LinkCore extends external_react_["Component"] {
       visitable,
       pressed,
       style,
-      testId
-    } = _this$props,
-          restProps = objectWithoutPropertiesLoose_default()(_this$props, _excluded);
-
-    const {
-      router
-    } = this.context;
+      testId,
+      waiting: _,
+      ...restProps
+    } = this.props;
 
     const linkStyles = _generateStyles(kind, light, visitable);
 
     const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && linkStyles.default, pressed ? linkStyles.active : (hovered || focused) && linkStyles.focus];
-
-    const commonProps = extends_default()({
+    const commonProps = {
       "data-test-id": testId,
-      style: [defaultStyles, style]
-    }, restProps);
-
-    return router && !skipClientNav && Object(wonder_blocks_clickable_["isClientSideUrl"])(href) ? /*#__PURE__*/external_react_["createElement"](StyledLink, extends_default()({}, commonProps, {
+      style: [defaultStyles, style],
+      ...restProps
+    };
+    return router && !skipClientNav && Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_6__["isClientSideUrl"])(href) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledLink, _extends({}, commonProps, {
       to: href
-    }), children) : /*#__PURE__*/external_react_["createElement"](StyledAnchor, extends_default()({}, commonProps, {
+    }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledAnchor, _extends({}, commonProps, {
       href: href
     }), children);
   }
 
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_3__["__RouterContext"].Consumer, null, router => this.renderInner(router));
+  }
+
 }
-link_core_LinkCore.contextTypes = {
-  router: external_prop_types_["any"]
-};
 const styles = {};
-const sharedStyles = external_aphrodite_["StyleSheet"].create({
+const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   shared: {
     cursor: "pointer",
     textDecoration: "none",
@@ -301,11 +208,11 @@ const _generateStyles = (kind, light, visitable) => {
     white,
     offBlack,
     offBlack32
-  } = wonder_blocks_color_default.a;
-  const linkPurple = Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(offBlack, 0.08), purple);
+  } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a;
+  const linkPurple = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["fade"])(offBlack, 0.08), purple);
   const defaultTextColor = kind === "primary" ? light ? white : blue : offBlack;
   const focusColor = light ? white : blue;
-  const activeColor = light ? Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(blue, 0.32), white) : Object(wonder_blocks_color_["mix"])(offBlack32, blue);
+  const activeColor = light ? Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["fade"])(blue, 0.32), white) : Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(offBlack32, blue);
   const defaultVisited = visitable ? {
     ":visited": {
       color: linkPurple
@@ -313,31 +220,56 @@ const _generateStyles = (kind, light, visitable) => {
   } : Object.freeze({});
   const activeVisited = visitable ? {
     ":visited": {
-      color: Object(wonder_blocks_color_["mix"])(offBlack32, linkPurple)
+      color: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(offBlack32, linkPurple)
     }
   } : Object.freeze({});
   const newStyles = {
-    default: extends_default()({
-      color: defaultTextColor
-    }, defaultVisited),
-    focus: extends_default()({
+    default: {
+      color: defaultTextColor,
+      ...defaultVisited
+    },
+    focus: {
       textDecoration: "underline currentcolor solid",
-      color: focusColor
-    }, defaultVisited),
-    active: extends_default()({
+      color: focusColor,
+      ...defaultVisited
+    },
+    active: {
       color: activeColor,
-      textDecoration: "underline currentcolor solid"
-    }, activeVisited)
+      textDecoration: "underline currentcolor solid",
+      ...activeVisited
+    }
   };
-  styles[buttonType] = external_aphrodite_["StyleSheet"].create(newStyles);
+  styles[buttonType] = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create(newStyles);
   return styles[buttonType];
 };
-// CONCATENATED MODULE: ./packages/wonder-blocks-link/src/components/link.js
 
+/***/ }),
+/* 5 */
+/***/ (function(module, exports) {
+
+module.exports = require("aphrodite");
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-core");
+
+/***/ }),
+/* 7 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Link; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _link_core_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+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); }
 
-const link_excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target"],
-      _excluded2 = ["tabIndex"],
-      _excluded3 = ["tabIndex"];
 
 
 
@@ -360,10 +292,9 @@ const link_excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClien
  * </Link>
  * ```
  */
-class link_Link extends external_react_["Component"] {
-  render() {
-    const _this$props = this.props,
-          {
+class Link extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
+  renderClickableBehavior(router) {
+    const {
       onClick,
       beforeNav = undefined,
       safeWithNav,
@@ -373,14 +304,13 @@ class link_Link extends external_react_["Component"] {
       tabIndex,
       onKeyDown,
       onKeyUp,
-      target = undefined
-    } = _this$props,
-          sharedProps = objectWithoutPropertiesLoose_default()(_this$props, link_excluded);
-
-    const ClickableBehavior = Object(wonder_blocks_clickable_["getClickableBehavior"])(href, skipClientNav, this.context.router);
+      target = undefined,
+      ...sharedProps
+    } = this.props;
+    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__["getClickableBehavior"])(href, skipClientNav, router);
 
     if (beforeNav) {
-      return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
         disabled: false,
         href: href,
         role: "link",
@@ -389,13 +319,11 @@ class link_Link extends external_react_["Component"] {
         safeWithNav: safeWithNav,
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp
-      }, (state, _ref) => {
-        let {
-          tabIndex: clickableTabIndex
-        } = _ref,
-            childrenProps = objectWithoutPropertiesLoose_default()(_ref, _excluded2);
-
-        return /*#__PURE__*/external_react_["createElement"](link_core_LinkCore, extends_default()({}, sharedProps, state, childrenProps, {
+      }, (state, {
+        tabIndex: clickableTabIndex,
+        ...childrenProps
+      }) => {
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_link_core_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({}, sharedProps, state, childrenProps, {
           skipClientNav: skipClientNav,
           href: href,
           target: target // If tabIndex is provide to the component we allow
@@ -406,7 +334,7 @@ class link_Link extends external_react_["Component"] {
         }), children);
       });
     } else {
-      return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
         disabled: false,
         href: href,
         role: "link",
@@ -415,13 +343,11 @@ class link_Link extends external_react_["Component"] {
         target: target,
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp
-      }, (state, _ref2) => {
-        let {
-          tabIndex: clickableTabIndex
-        } = _ref2,
-            childrenProps = objectWithoutPropertiesLoose_default()(_ref2, _excluded3);
-
-        return /*#__PURE__*/external_react_["createElement"](link_core_LinkCore, extends_default()({}, sharedProps, state, childrenProps, {
+      }, (state, {
+        tabIndex: clickableTabIndex,
+        ...childrenProps
+      }) => {
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_link_core_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], _extends({}, sharedProps, state, childrenProps, {
           skipClientNav: skipClientNav,
           href: href,
           target: target // If tabIndex is provide to the component we allow
@@ -434,16 +360,32 @@ class link_Link extends external_react_["Component"] {
     }
   }
 
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_1__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 }
-link_Link.contextTypes = {
-  router: external_prop_types_["any"]
-};
-link_Link.defaultProps = {
+Link.defaultProps = {
   kind: "primary",
   light: false,
   visitable: false
 };
-// CONCATENATED MODULE: ./packages/wonder-blocks-link/src/index.js
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
+
+module.exports = require("react-router-dom");
+
+/***/ }),
+/* 9 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _components_link_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _components_link_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
+
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "3.7.13",
+  "version": "3.8.2",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,19 +15,18 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-clickable": "^2.1.2",
-    "@khanacademy/wonder-blocks-color": "^1.1.18",
-    "@khanacademy/wonder-blocks-core": "^3.1.4"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.2",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.0.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-router-dom": "^4.2.2"
+    "react": "16.14.0",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.0"
-  },
-  "gitHead": "8022bb419eed74be37f71f71c7621854794a731c"
+    "wb-dev-build-settings": "^0.2.0"
+  }
 }

package/src/components/__tests__/link.test.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import Link from "../link.js";
 
@@ -15,7 +16,8 @@ describe("Link", () => {
     beforeEach(() => {
         // Note: window.location.assign needs a mock function in the testing
         // environment.
-        window.location.assign = jest.fn();
+        delete window.location;
+        window.location = {assign: jest.fn()};
     });
 
     afterEach(() => {

package/src/components/link-core.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {Link} from "react-router-dom";
-import * as PropTypes from "prop-types";
+import {__RouterContext} from "react-router";
 
 import {addStyle} from "@khanacademy/wonder-blocks-core";
 import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
@@ -22,17 +22,11 @@ type Props = {|
     href: string,
 |};
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 const StyledAnchor = addStyle<"a">("a");
 const StyledLink = addStyle<typeof Link>(Link);
 
 export default class LinkCore extends React.Component<Props> {
-    static contextTypes: ContextTypes = {router: PropTypes.any};
-
-    render(): React.Node {
+    renderInner(router: any): React.Node {
         const {
             children,
             skipClientNav,
@@ -48,7 +42,6 @@ export default class LinkCore extends React.Component<Props> {
             waiting: _,
             ...restProps
         } = this.props;
-        const {router} = this.context;
 
         const linkStyles = _generateStyles(kind, light, visitable);
 
@@ -76,6 +69,14 @@ export default class LinkCore extends React.Component<Props> {
             </StyledAnchor>
         );
     }
+
+    render(): React.Node {
+        return (
+            <__RouterContext.Consumer>
+                {(router) => this.renderInner(router)}
+            </__RouterContext.Consumer>
+        );
+    }
 }
 
 const styles = {};

package/src/components/link.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import * as PropTypes from "prop-types";
+import {__RouterContext} from "react-router";
 import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
@@ -156,10 +156,6 @@ export type SharedProps =
           beforeNav?: () => Promise<mixed>,
       |};
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 type DefaultProps = {|
     kind: $PropertyType<SharedProps, "kind">,
     light: $PropertyType<SharedProps, "light">,
@@ -184,14 +180,13 @@ type DefaultProps = {|
  * ```
  */
 export default class Link extends React.Component<SharedProps> {
-    static contextTypes: ContextTypes = {router: PropTypes.any};
     static defaultProps: DefaultProps = {
         kind: "primary",
         light: false,
         visitable: false,
     };
 
-    render(): React.Node {
+    renderClickableBehavior(router: any): React.Node {
         const {
             onClick,
             beforeNav = undefined,
@@ -209,7 +204,7 @@ export default class Link extends React.Component<SharedProps> {
         const ClickableBehavior = getClickableBehavior(
             href,
             skipClientNav,
-            this.context.router,
+            router,
         );
 
         if (beforeNav) {
@@ -284,4 +279,12 @@ export default class Link extends React.Component<SharedProps> {
             );
         }
     }
+
+    render(): React.Node {
+        return (
+            <__RouterContext.Consumer>
+                {(router) => this.renderClickableBehavior(router)}
+            </__RouterContext.Consumer>
+        );
+    }
 }

package/src/components/link.md

@@ -35,3 +35,9 @@ import Link from "@khanacademy/wonder-blocks-link";
     </Link>
 </View>
 ```
+
+### Running callbacks on navigation
+
+The `onClick`, `beforeNav`, and `safeWithNav` props can be used to run callbacks
+when navigating to the new URL. Which prop to use depends on the use case. See
+the [Button](#section-button) documentation for details.

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.