@khanacademy/wonder-blocks-link 8.0.4 → 9.0.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/wonder-blocks-link
 
+## 9.0.1
+
+### Patch Changes
+
+- e8ccf60: Update `borderRadius` styles to use new `border.radius` tokens
+- e8ccf60: Update focus outline to use `radius.radius_040` (4px, 0.4rem) instead of `3px`.
+- Updated dependencies [e8ccf60]
+    - @khanacademy/wonder-blocks-tokens@7.0.0
+    - @khanacademy/wonder-blocks-clickable@7.0.1
+
+## 9.0.0
+
+### Major Changes
+
+- 38c926c: Upgrade WB to using react-router-dom-v5-compat.
+
+### Patch Changes
+
+- Updated dependencies [38c926c]
+    - @khanacademy/wonder-blocks-clickable@7.0.0
+    - @khanacademy/wonder-blocks-core@12.2.1
+
 ## 8.0.4
 
 ### Patch Changes

package/dist/components/link-core.d.ts

@@ -1,9 +1,8 @@
 import * as React from "react";
-import { Link } from "react-router-dom";
 import type { ChildrenProps, ClickableState } from "@khanacademy/wonder-blocks-clickable";
 import type { SharedProps } from "./link";
 type Props = SharedProps & ChildrenProps & ClickableState & {
     href: string;
 };
-declare const LinkCore: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement | typeof Link>>;
+declare const LinkCore: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement | React.ForwardRefExoticComponent<import("react-router-dom-v5-compat").LinkProps & React.RefAttributes<HTMLAnchorElement>>>>;
 export default LinkCore;

package/dist/components/link.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { Link as ReactRouterLink } from "react-router-dom";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import { PhosphorIcon } from "@khanacademy/wonder-blocks-icon";
 import type { Typography } from "@khanacademy/wonder-blocks-typography";
@@ -146,5 +145,5 @@ export type SharedProps = (CommonProps & {
  * </Link>
  * ```
  */
-declare const Link: React.ForwardRefExoticComponent<SharedProps & React.RefAttributes<HTMLAnchorElement | typeof ReactRouterLink>>;
+declare const Link: React.ForwardRefExoticComponent<SharedProps & React.RefAttributes<HTMLAnchorElement | React.ForwardRefExoticComponent<import("react-router-dom-v5-compat").LinkProps & React.RefAttributes<HTMLAnchorElement>>>>;
 export default Link;

package/dist/es/index.js

@@ -2,10 +2,9 @@ import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructurin
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
-import { __RouterContext } from 'react-router';
+import { Link as Link$1, useInRouterContext } from 'react-router-dom-v5-compat';
 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 { spacing, semanticColor, color, border } from '@khanacademy/wonder-blocks-tokens';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
@@ -15,63 +14,61 @@ const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href",
 const StyledA = addStyle("a");
 const StyledLink = addStyle(Link$1);
 const LinkCore = React.forwardRef(function LinkCore(props, ref) {
-  const renderInner = router => {
-    const {
-        children,
-        skipClientNav,
-        focused,
-        href,
-        inline = false,
-        light = false,
-        pressed,
-        style,
-        testId,
-        target,
-        startIcon,
-        endIcon
-      } = props,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-    const linkStyles = _generateStyles(inline, light);
-    const defaultStyles = [sharedStyles.shared, linkStyles.rest, inline && linkStyles.restInline, !pressed && focused && linkStyles.focus];
-    const commonProps = _extends({
-      "data-testid": testId,
-      style: [defaultStyles, style],
-      target
-    }, restProps);
-    const linkUrl = new URL(href, window.location.origin);
-    const isExternalLink = linkUrl.origin !== window.location.origin;
-    const externalIcon = React.createElement(PhosphorIcon, {
-      icon: externalLinkIcon,
-      size: "small",
+  const inRouterContext = useInRouterContext();
+  const {
+      children,
+      skipClientNav,
+      focused,
+      href,
+      inline = false,
+      light = false,
+      pressed,
+      style,
+      testId,
+      target,
+      startIcon,
+      endIcon
+    } = props,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const linkStyles = _generateStyles(inline, light);
+  const defaultStyles = [sharedStyles.shared, linkStyles.rest, inline && linkStyles.restInline, !pressed && focused && linkStyles.focus];
+  const commonProps = _extends({
+    "data-testid": testId,
+    style: [defaultStyles, style],
+    target
+  }, restProps);
+  const linkUrl = new URL(href, window.location.origin);
+  const isExternalLink = linkUrl.origin !== window.location.origin;
+  const externalIcon = React.createElement(PhosphorIcon, {
+    icon: externalLinkIcon,
+    size: "small",
+    style: [linkContentStyles.endIcon, linkContentStyles.centered],
+    testId: "external-icon"
+  });
+  let startIconElement;
+  let endIconElement;
+  if (startIcon) {
+    startIconElement = React.cloneElement(startIcon, _extends({
+      style: [linkContentStyles.startIcon, linkContentStyles.centered],
+      testId: "start-icon",
+      "aria-hidden": "true"
+    }, startIcon.props));
+  }
+  if (endIcon) {
+    endIconElement = React.cloneElement(endIcon, _extends({
       style: [linkContentStyles.endIcon, linkContentStyles.centered],
-      testId: "external-icon"
-    });
-    let startIconElement;
-    let endIconElement;
-    if (startIcon) {
-      startIconElement = React.cloneElement(startIcon, _extends({
-        style: [linkContentStyles.startIcon, linkContentStyles.centered],
-        testId: "start-icon",
-        "aria-hidden": "true"
-      }, startIcon.props));
-    }
-    if (endIcon) {
-      endIconElement = React.cloneElement(endIcon, _extends({
-        style: [linkContentStyles.endIcon, linkContentStyles.centered],
-        testId: "end-icon",
-        "aria-hidden": "true"
-      }, endIcon.props));
-    }
-    const linkContent = React.createElement(React.Fragment, null, startIcon && startIconElement, children, endIcon ? endIconElement : isExternalLink && target === "_blank" && externalIcon);
-    return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
-      to: href,
-      ref: ref
-    }), linkContent) : React.createElement(StyledA, _extends({}, commonProps, {
-      href: href,
-      ref: ref
-    }), linkContent);
-  };
-  return React.createElement(__RouterContext.Consumer, null, router => renderInner(router));
+      testId: "end-icon",
+      "aria-hidden": "true"
+    }, endIcon.props));
+  }
+  const linkContent = React.createElement(React.Fragment, null, startIcon && startIconElement, children, endIcon ? endIconElement : isExternalLink && target === "_blank" && externalIcon);
+  return inRouterContext && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
+    to: href,
+    ref: ref
+  }), linkContent) : React.createElement(StyledA, _extends({}, commonProps, {
+    href: href,
+    ref: ref
+  }), linkContent);
 });
 const styles = {};
 const linkContentStyles = StyleSheet.create({
@@ -137,7 +134,7 @@ const _generateStyles = (inline, light) => {
   const focusStyling = {
     color: variant.focus.foreground,
     outline: `${border.width.hairline}px solid ${variant.focus.border}`,
-    borderRadius: border.radius.small_3
+    borderRadius: border.radius.radius_040
   };
   const pressStyling = {
     color: variant.press.foreground,
@@ -181,55 +178,53 @@ const Link = React.forwardRef(function Link(props, ref) {
       light = false
     } = props,
     sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
-  const renderClickableBehavior = router => {
-    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
-    if (beforeNav) {
-      return React.createElement(ClickableBehavior, {
-        disabled: false,
+  const inRouterContext = useInRouterContext();
+  const ClickableBehavior = getClickableBehavior(href, skipClientNav, inRouterContext);
+  if (beforeNav) {
+    return React.createElement(ClickableBehavior, {
+      disabled: false,
+      href: href,
+      role: "link",
+      onClick: onClick,
+      beforeNav: beforeNav,
+      safeWithNav: safeWithNav,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp
+    }, (state, _ref) => {
+      let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+      return React.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
+        skipClientNav: skipClientNav,
         href: href,
-        role: "link",
-        onClick: onClick,
-        beforeNav: beforeNav,
-        safeWithNav: safeWithNav,
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp
-      }, (state, _ref) => {
-        let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-        return React.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
-          skipClientNav: skipClientNav,
-          href: href,
-          target: target,
-          tabIndex: tabIndex,
-          inline: inline,
-          light: light,
-          ref: ref
-        }), children);
-      });
-    } else {
-      return React.createElement(ClickableBehavior, {
-        disabled: false,
+        target: target,
+        tabIndex: tabIndex,
+        inline: inline,
+        light: light,
+        ref: ref
+      }), children);
+    });
+  } else {
+    return React.createElement(ClickableBehavior, {
+      disabled: false,
+      href: href,
+      role: "link",
+      onClick: onClick,
+      safeWithNav: safeWithNav,
+      target: target,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp
+    }, (state, _ref2) => {
+      let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+      return React.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
+        skipClientNav: skipClientNav,
         href: href,
-        role: "link",
-        onClick: onClick,
-        safeWithNav: safeWithNav,
         target: target,
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp
-      }, (state, _ref2) => {
-        let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
-        return React.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
-          skipClientNav: skipClientNav,
-          href: href,
-          target: target,
-          tabIndex: tabIndex,
-          inline: inline,
-          light: light,
-          ref: ref
-        }), children);
-      });
-    }
-  };
-  return React.createElement(__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+        tabIndex: tabIndex,
+        inline: inline,
+        light: light,
+        ref: ref
+      }), children);
+    });
+  }
 });
 
 export { Link as default };

package/dist/index.js

@@ -4,10 +4,9 @@ var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructur
 var _extends = require('@babel/runtime/helpers/extends');
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var React = require('react');
-var reactRouter = require('react-router');
+var reactRouterDomV5Compat = require('react-router-dom-v5-compat');
 var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
 var aphrodite = require('aphrodite');
-var reactRouterDom = require('react-router-dom');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
@@ -41,65 +40,63 @@ var externalLinkIcon__default = /*#__PURE__*/_interopDefaultLegacy(externalLinkI
 
 const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "light", "pressed", "style", "testId", "waiting", "target", "startIcon", "endIcon"];
 const StyledA = wonderBlocksCore.addStyle("a");
-const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
+const StyledLink = wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);
 const LinkCore = React__namespace.forwardRef(function LinkCore(props, ref) {
-  const renderInner = router => {
-    const {
-        children,
-        skipClientNav,
-        focused,
-        href,
-        inline = false,
-        light = false,
-        pressed,
-        style,
-        testId,
-        target,
-        startIcon,
-        endIcon
-      } = props,
-      restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
-    const linkStyles = _generateStyles(inline, light);
-    const defaultStyles = [sharedStyles.shared, linkStyles.rest, inline && linkStyles.restInline, !pressed && focused && linkStyles.focus];
-    const commonProps = _extends__default["default"]({
-      "data-testid": testId,
-      style: [defaultStyles, style],
-      target
-    }, restProps);
-    const linkUrl = new URL(href, window.location.origin);
-    const isExternalLink = linkUrl.origin !== window.location.origin;
-    const externalIcon = React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-      icon: externalLinkIcon__default["default"],
-      size: "small",
+  const inRouterContext = reactRouterDomV5Compat.useInRouterContext();
+  const {
+      children,
+      skipClientNav,
+      focused,
+      href,
+      inline = false,
+      light = false,
+      pressed,
+      style,
+      testId,
+      target,
+      startIcon,
+      endIcon
+    } = props,
+    restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
+  const linkStyles = _generateStyles(inline, light);
+  const defaultStyles = [sharedStyles.shared, linkStyles.rest, inline && linkStyles.restInline, !pressed && focused && linkStyles.focus];
+  const commonProps = _extends__default["default"]({
+    "data-testid": testId,
+    style: [defaultStyles, style],
+    target
+  }, restProps);
+  const linkUrl = new URL(href, window.location.origin);
+  const isExternalLink = linkUrl.origin !== window.location.origin;
+  const externalIcon = React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
+    icon: externalLinkIcon__default["default"],
+    size: "small",
+    style: [linkContentStyles.endIcon, linkContentStyles.centered],
+    testId: "external-icon"
+  });
+  let startIconElement;
+  let endIconElement;
+  if (startIcon) {
+    startIconElement = React__namespace.cloneElement(startIcon, _extends__default["default"]({
+      style: [linkContentStyles.startIcon, linkContentStyles.centered],
+      testId: "start-icon",
+      "aria-hidden": "true"
+    }, startIcon.props));
+  }
+  if (endIcon) {
+    endIconElement = React__namespace.cloneElement(endIcon, _extends__default["default"]({
       style: [linkContentStyles.endIcon, linkContentStyles.centered],
-      testId: "external-icon"
-    });
-    let startIconElement;
-    let endIconElement;
-    if (startIcon) {
-      startIconElement = React__namespace.cloneElement(startIcon, _extends__default["default"]({
-        style: [linkContentStyles.startIcon, linkContentStyles.centered],
-        testId: "start-icon",
-        "aria-hidden": "true"
-      }, startIcon.props));
-    }
-    if (endIcon) {
-      endIconElement = React__namespace.cloneElement(endIcon, _extends__default["default"]({
-        style: [linkContentStyles.endIcon, linkContentStyles.centered],
-        testId: "end-icon",
-        "aria-hidden": "true"
-      }, endIcon.props));
-    }
-    const linkContent = React__namespace.createElement(React__namespace.Fragment, null, startIcon && startIconElement, children, endIcon ? endIconElement : isExternalLink && target === "_blank" && externalIcon);
-    return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
-      to: href,
-      ref: ref
-    }), linkContent) : React__namespace.createElement(StyledA, _extends__default["default"]({}, commonProps, {
-      href: href,
-      ref: ref
-    }), linkContent);
-  };
-  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderInner(router));
+      testId: "end-icon",
+      "aria-hidden": "true"
+    }, endIcon.props));
+  }
+  const linkContent = React__namespace.createElement(React__namespace.Fragment, null, startIcon && startIconElement, children, endIcon ? endIconElement : isExternalLink && target === "_blank" && externalIcon);
+  return inRouterContext && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
+    to: href,
+    ref: ref
+  }), linkContent) : React__namespace.createElement(StyledA, _extends__default["default"]({}, commonProps, {
+    href: href,
+    ref: ref
+  }), linkContent);
 });
 const styles = {};
 const linkContentStyles = aphrodite.StyleSheet.create({
@@ -165,7 +162,7 @@ const _generateStyles = (inline, light) => {
   const focusStyling = {
     color: variant.focus.foreground,
     outline: `${wonderBlocksTokens.border.width.hairline}px solid ${variant.focus.border}`,
-    borderRadius: wonderBlocksTokens.border.radius.small_3
+    borderRadius: wonderBlocksTokens.border.radius.radius_040
   };
   const pressStyling = {
     color: variant.press.foreground,
@@ -209,55 +206,53 @@ const Link = React__namespace.forwardRef(function Link(props, ref) {
       light = false
     } = props,
     sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
-  const renderClickableBehavior = router => {
-    const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
-    if (beforeNav) {
-      return React__namespace.createElement(ClickableBehavior, {
-        disabled: false,
+  const inRouterContext = reactRouterDomV5Compat.useInRouterContext();
+  const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, inRouterContext);
+  if (beforeNav) {
+    return React__namespace.createElement(ClickableBehavior, {
+      disabled: false,
+      href: href,
+      role: "link",
+      onClick: onClick,
+      beforeNav: beforeNav,
+      safeWithNav: safeWithNav,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp
+    }, (state, _ref) => {
+      let childrenProps = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref), _ref));
+      return React__namespace.createElement(LinkCore, _extends__default["default"]({}, sharedProps, state, childrenProps, {
+        skipClientNav: skipClientNav,
         href: href,
-        role: "link",
-        onClick: onClick,
-        beforeNav: beforeNav,
-        safeWithNav: safeWithNav,
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp
-      }, (state, _ref) => {
-        let childrenProps = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref), _ref));
-        return React__namespace.createElement(LinkCore, _extends__default["default"]({}, sharedProps, state, childrenProps, {
-          skipClientNav: skipClientNav,
-          href: href,
-          target: target,
-          tabIndex: tabIndex,
-          inline: inline,
-          light: light,
-          ref: ref
-        }), children);
-      });
-    } else {
-      return React__namespace.createElement(ClickableBehavior, {
-        disabled: false,
+        target: target,
+        tabIndex: tabIndex,
+        inline: inline,
+        light: light,
+        ref: ref
+      }), children);
+    });
+  } else {
+    return React__namespace.createElement(ClickableBehavior, {
+      disabled: false,
+      href: href,
+      role: "link",
+      onClick: onClick,
+      safeWithNav: safeWithNav,
+      target: target,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp
+    }, (state, _ref2) => {
+      let childrenProps = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref2), _ref2));
+      return React__namespace.createElement(LinkCore, _extends__default["default"]({}, sharedProps, state, childrenProps, {
+        skipClientNav: skipClientNav,
         href: href,
-        role: "link",
-        onClick: onClick,
-        safeWithNav: safeWithNav,
         target: target,
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp
-      }, (state, _ref2) => {
-        let childrenProps = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref2), _ref2));
-        return React__namespace.createElement(LinkCore, _extends__default["default"]({}, sharedProps, state, childrenProps, {
-          skipClientNav: skipClientNav,
-          href: href,
-          target: target,
-          tabIndex: tabIndex,
-          inline: inline,
-          light: light,
-          ref: ref
-        }), children);
-      });
-    }
-  };
-  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+        tabIndex: tabIndex,
+        inline: inline,
+        light: light,
+        ref: ref
+      }), children);
+    });
+  }
 });
 
 module.exports = Link;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "8.0.4",
+  "version": "9.0.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -13,17 +13,18 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-clickable": "6.1.6",
+    "@khanacademy/wonder-blocks-clickable": "7.0.1",
     "@khanacademy/wonder-blocks-core": "12.2.1",
     "@khanacademy/wonder-blocks-icon": "5.1.3",
-    "@khanacademy/wonder-blocks-tokens": "6.0.0"
+    "@khanacademy/wonder-blocks-tokens": "7.0.0"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
     "aphrodite": "^1.2.5",
     "react": "18.2.0",
     "react-router": "5.3.4",
-    "react-router-dom": "5.3.4"
+    "react-router-dom": "5.3.4",
+    "react-router-dom-v5-compat": "^6.30.0"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "2.1.1"