@khanacademy/wonder-blocks-clickable 6.1.6 → 7.0.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 7.0.1
+
+### Patch Changes
+
+- Updated dependencies [e8ccf60]
+    - @khanacademy/wonder-blocks-tokens@7.0.0
+
+## 7.0.0
+
+### Major Changes
+
+- 38c926c: Upgrade WB to using react-router-dom-v5-compat.
+
+### Patch Changes
+
+- @khanacademy/wonder-blocks-core@12.2.1
+
 ## 6.1.6
 
 ### Patch Changes

package/dist/components/clickable-behavior.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { NavigateFunction } from "react-router-dom-v5-compat";
 export type ClickableRole = "button" | "checkbox" | "link" | "listbox" | "menu" | "menuitem" | "menuitemcheckbox" | "option" | "radio" | "switch" | "tab";
 type CommonProps = Readonly<{
     /**
@@ -55,10 +56,10 @@ type CommonProps = Readonly<{
      */
     safeWithNav?: () => Promise<unknown>;
     /**
-     * Passed in by withRouter HOC.
+     * Passed in by an HOC in get-clickable-behavior.tsx.
      * @ignore
      */
-    history?: any;
+    navigate?: NavigateFunction;
     /**
      * A role that encapsulates how the clickable component should behave, which
      * affects which keyboard actions trigger the component. For example, a

package/dist/components/clickable.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { Link } from "react-router-dom";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import type { ClickableRole, ClickableState } from "./clickable-behavior";
 type CommonProps = 
@@ -183,5 +182,5 @@ type Props = (CommonProps & {
  * </Clickable>
  * ```
  */
-declare const Clickable: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | typeof Link>>;
+declare const Clickable: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | React.ForwardRefExoticComponent<import("react-router-dom-v5-compat").LinkProps & React.RefAttributes<HTMLAnchorElement>>>>;
 export default Clickable;

package/dist/es/index.js

@@ -2,8 +2,7 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutP
 import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
-import { withRouter, Link } from 'react-router-dom';
-import { __RouterContext } from 'react-router';
+import { useNavigate, Link, useInRouterContext } from 'react-router-dom-v5-compat';
 import { keys, addStyle } from '@khanacademy/wonder-blocks-core';
 import { border, semanticColor } from '@khanacademy/wonder-blocks-tokens';
 
@@ -198,7 +197,7 @@ class ClickableBehavior extends React.Component {
   navigateOrReset(shouldNavigate) {
     if (shouldNavigate) {
       const {
-        history,
+        navigate,
         href,
         skipClientNav,
         target = undefined
@@ -209,8 +208,8 @@ class ClickableBehavior extends React.Component {
           this.setState({
             waiting: false
           });
-        } else if (history && !skipClientNav) {
-          history.push(href);
+        } else if (navigate && !skipClientNav) {
+          navigate(href);
           this.setState({
             waiting: false
           });
@@ -227,9 +226,9 @@ class ClickableBehavior extends React.Component {
   handleSafeWithNav(safeWithNav, shouldNavigate) {
     const {
       skipClientNav,
-      history
+      navigate
     } = this.props;
-    if (history && !skipClientNav || this.props.target === "_blank") {
+    if (navigate && !skipClientNav || this.props.target === "_blank") {
       safeWithNav();
       this.navigateOrReset(shouldNavigate);
       return Promise.resolve();
@@ -340,9 +339,19 @@ const isClientSideUrl = href => {
   return !/^(https?:)?\/\//i.test(href) && !/^([^#]*#[\w-]*|[\w\-.]+:)/.test(href);
 };
 
+function withRouter(Component) {
+  function WithRouterWrapper(props) {
+    const navigate = useNavigate();
+    return React.createElement(Component, _extends({}, props, {
+      navigate: navigate
+    }));
+  }
+  WithRouterWrapper.displayName = "withRouter(ClickableBehavior)";
+  return WithRouterWrapper;
+}
 const ClickableBehaviorWithRouter = withRouter(ClickableBehavior);
-function getClickableBehavior(href, skipClientNav, router) {
-  if (router && skipClientNav !== true && href && isClientSideUrl(href)) {
+function getClickableBehavior(href, skipClientNav, inRouterContext) {
+  if (inRouterContext && skipClientNav !== true && href && isClientSideUrl(href)) {
     return ClickableBehaviorWithRouter;
   }
   return ClickableBehavior;
@@ -353,9 +362,9 @@ const StyledA = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
 const Clickable = React.forwardRef(function Clickable(props, ref) {
-  const getCorrectTag = (clickableState, router, commonProps) => {
+  const getCorrectTag = (clickableState, inRouterContext, commonProps) => {
     const activeHref = props.href && !props.disabled;
-    const useClient = router && !props.skipClientNav && isClientSideUrl(props.href || "");
+    const useClient = inRouterContext && !props.skipClientNav && isClientSideUrl(props.href || "");
     if (activeHref && useClient && props.href) {
       return React.createElement(StyledLink, _extends({}, commonProps, {
         to: props.href,
@@ -380,66 +389,64 @@ const Clickable = React.forwardRef(function Clickable(props, ref) {
       }), props.children(clickableState));
     }
   };
-  const renderClickableBehavior = router => {
-    const {
-        href,
-        onClick,
-        skipClientNav,
-        beforeNav = undefined,
-        safeWithNav = undefined,
-        style,
-        target = undefined,
-        testId,
-        onFocus,
-        onKeyDown,
-        onKeyUp,
-        onMouseDown,
-        onMouseUp,
-        hideDefaultFocusRing,
-        light,
-        disabled,
-        tabIndex
-      } = props,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
-    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
-    const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), disabled && styles.disabled, style];
-    if (beforeNav) {
-      return React.createElement(ClickableBehavior, {
-        href: href,
-        onClick: onClick,
-        beforeNav: beforeNav,
-        safeWithNav: safeWithNav,
-        onFocus: onFocus,
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp,
-        onMouseDown: onMouseDown,
-        onMouseUp: onMouseUp,
-        disabled: disabled,
-        tabIndex: tabIndex
-      }, (state, childrenProps) => getCorrectTag(state, router, _extends({}, restProps, {
-        "data-testid": testId,
-        style: getStyle(state)
-      }, childrenProps)));
-    } else {
-      return React.createElement(ClickableBehavior, {
-        href: href,
-        onClick: onClick,
-        safeWithNav: safeWithNav,
-        onFocus: onFocus,
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp,
-        onMouseDown: onMouseDown,
-        onMouseUp: onMouseUp,
-        target: target,
-        disabled: disabled,
-        tabIndex: tabIndex
-      }, (state, childrenProps) => getCorrectTag(state, router, _extends({}, restProps, {
-        "data-testid": testId,
-        style: getStyle(state)
-      }, childrenProps)));
-    }
-  };
-  return React.createElement(__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+  const inRouterContext = useInRouterContext();
+  const {
+      href,
+      onClick,
+      skipClientNav,
+      beforeNav = undefined,
+      safeWithNav = undefined,
+      style,
+      target = undefined,
+      testId,
+      onFocus,
+      onKeyDown,
+      onKeyUp,
+      onMouseDown,
+      onMouseUp,
+      hideDefaultFocusRing,
+      light,
+      disabled,
+      tabIndex
+    } = props,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const ClickableBehavior = getClickableBehavior(href, skipClientNav, inRouterContext);
+  const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), disabled && styles.disabled, style];
+  if (beforeNav) {
+    return React.createElement(ClickableBehavior, {
+      href: href,
+      onClick: onClick,
+      beforeNav: beforeNav,
+      safeWithNav: safeWithNav,
+      onFocus: onFocus,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      disabled: disabled,
+      tabIndex: tabIndex
+    }, (state, childrenProps) => getCorrectTag(state, inRouterContext, _extends({}, restProps, {
+      "data-testid": testId,
+      style: getStyle(state)
+    }, childrenProps)));
+  } else {
+    return React.createElement(ClickableBehavior, {
+      href: href,
+      onClick: onClick,
+      safeWithNav: safeWithNav,
+      onFocus: onFocus,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      target: target,
+      disabled: disabled,
+      tabIndex: tabIndex
+    }, (state, childrenProps) => getCorrectTag(state, inRouterContext, _extends({}, restProps, {
+      "data-testid": testId,
+      style: getStyle(state)
+    }, childrenProps)));
+  }
 });
 Clickable.defaultProps = {
   light: false,

package/dist/index.js

@@ -6,8 +6,7 @@ var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithou
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var aphrodite = require('aphrodite');
-var reactRouterDom = require('react-router-dom');
-var reactRouter = require('react-router');
+var reactRouterDomV5Compat = require('react-router-dom-v5-compat');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 
@@ -226,7 +225,7 @@ class ClickableBehavior extends React__namespace.Component {
   navigateOrReset(shouldNavigate) {
     if (shouldNavigate) {
       const {
-        history,
+        navigate,
         href,
         skipClientNav,
         target = undefined
@@ -237,8 +236,8 @@ class ClickableBehavior extends React__namespace.Component {
           this.setState({
             waiting: false
           });
-        } else if (history && !skipClientNav) {
-          history.push(href);
+        } else if (navigate && !skipClientNav) {
+          navigate(href);
           this.setState({
             waiting: false
           });
@@ -255,9 +254,9 @@ class ClickableBehavior extends React__namespace.Component {
   handleSafeWithNav(safeWithNav, shouldNavigate) {
     const {
       skipClientNav,
-      history
+      navigate
     } = this.props;
-    if (history && !skipClientNav || this.props.target === "_blank") {
+    if (navigate && !skipClientNav || this.props.target === "_blank") {
       safeWithNav();
       this.navigateOrReset(shouldNavigate);
       return Promise.resolve();
@@ -368,9 +367,19 @@ const isClientSideUrl = href => {
   return !/^(https?:)?\/\//i.test(href) && !/^([^#]*#[\w-]*|[\w\-.]+:)/.test(href);
 };
 
-const ClickableBehaviorWithRouter = reactRouterDom.withRouter(ClickableBehavior);
-function getClickableBehavior(href, skipClientNav, router) {
-  if (router && skipClientNav !== true && href && isClientSideUrl(href)) {
+function withRouter(Component) {
+  function WithRouterWrapper(props) {
+    const navigate = reactRouterDomV5Compat.useNavigate();
+    return React__namespace.createElement(Component, _extends__default["default"]({}, props, {
+      navigate: navigate
+    }));
+  }
+  WithRouterWrapper.displayName = "withRouter(ClickableBehavior)";
+  return WithRouterWrapper;
+}
+const ClickableBehaviorWithRouter = withRouter(ClickableBehavior);
+function getClickableBehavior(href, skipClientNav, inRouterContext) {
+  if (inRouterContext && skipClientNav !== true && href && isClientSideUrl(href)) {
     return ClickableBehaviorWithRouter;
   }
   return ClickableBehavior;
@@ -379,11 +388,11 @@ function getClickableBehavior(href, skipClientNav, router) {
 const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseUp", "hideDefaultFocusRing", "light", "disabled", "tabIndex"];
 const StyledA = wonderBlocksCore.addStyle("a");
 const StyledButton = wonderBlocksCore.addStyle("button");
-const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
+const StyledLink = wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);
 const Clickable = React__namespace.forwardRef(function Clickable(props, ref) {
-  const getCorrectTag = (clickableState, router, commonProps) => {
+  const getCorrectTag = (clickableState, inRouterContext, commonProps) => {
     const activeHref = props.href && !props.disabled;
-    const useClient = router && !props.skipClientNav && isClientSideUrl(props.href || "");
+    const useClient = inRouterContext && !props.skipClientNav && isClientSideUrl(props.href || "");
     if (activeHref && useClient && props.href) {
       return React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
         to: props.href,
@@ -408,66 +417,64 @@ const Clickable = React__namespace.forwardRef(function Clickable(props, ref) {
       }), props.children(clickableState));
     }
   };
-  const renderClickableBehavior = router => {
-    const {
-        href,
-        onClick,
-        skipClientNav,
-        beforeNav = undefined,
-        safeWithNav = undefined,
-        style,
-        target = undefined,
-        testId,
-        onFocus,
-        onKeyDown,
-        onKeyUp,
-        onMouseDown,
-        onMouseUp,
-        hideDefaultFocusRing,
-        light,
-        disabled,
-        tabIndex
-      } = props,
-      restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
-    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
-    const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), disabled && styles.disabled, style];
-    if (beforeNav) {
-      return React__namespace.createElement(ClickableBehavior, {
-        href: href,
-        onClick: onClick,
-        beforeNav: beforeNav,
-        safeWithNav: safeWithNav,
-        onFocus: onFocus,
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp,
-        onMouseDown: onMouseDown,
-        onMouseUp: onMouseUp,
-        disabled: disabled,
-        tabIndex: tabIndex
-      }, (state, childrenProps) => getCorrectTag(state, router, _extends__default["default"]({}, restProps, {
-        "data-testid": testId,
-        style: getStyle(state)
-      }, childrenProps)));
-    } else {
-      return React__namespace.createElement(ClickableBehavior, {
-        href: href,
-        onClick: onClick,
-        safeWithNav: safeWithNav,
-        onFocus: onFocus,
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp,
-        onMouseDown: onMouseDown,
-        onMouseUp: onMouseUp,
-        target: target,
-        disabled: disabled,
-        tabIndex: tabIndex
-      }, (state, childrenProps) => getCorrectTag(state, router, _extends__default["default"]({}, restProps, {
-        "data-testid": testId,
-        style: getStyle(state)
-      }, childrenProps)));
-    }
-  };
-  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+  const inRouterContext = reactRouterDomV5Compat.useInRouterContext();
+  const {
+      href,
+      onClick,
+      skipClientNav,
+      beforeNav = undefined,
+      safeWithNav = undefined,
+      style,
+      target = undefined,
+      testId,
+      onFocus,
+      onKeyDown,
+      onKeyUp,
+      onMouseDown,
+      onMouseUp,
+      hideDefaultFocusRing,
+      light,
+      disabled,
+      tabIndex
+    } = props,
+    restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
+  const ClickableBehavior = getClickableBehavior(href, skipClientNav, inRouterContext);
+  const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), disabled && styles.disabled, style];
+  if (beforeNav) {
+    return React__namespace.createElement(ClickableBehavior, {
+      href: href,
+      onClick: onClick,
+      beforeNav: beforeNav,
+      safeWithNav: safeWithNav,
+      onFocus: onFocus,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      disabled: disabled,
+      tabIndex: tabIndex
+    }, (state, childrenProps) => getCorrectTag(state, inRouterContext, _extends__default["default"]({}, restProps, {
+      "data-testid": testId,
+      style: getStyle(state)
+    }, childrenProps)));
+  } else {
+    return React__namespace.createElement(ClickableBehavior, {
+      href: href,
+      onClick: onClick,
+      safeWithNav: safeWithNav,
+      onFocus: onFocus,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      target: target,
+      disabled: disabled,
+      tabIndex: tabIndex
+    }, (state, childrenProps) => getCorrectTag(state, inRouterContext, _extends__default["default"]({}, restProps, {
+      "data-testid": testId,
+      style: getStyle(state)
+    }, childrenProps)));
+  }
 });
 Clickable.defaultProps = {
   light: false,

package/dist/util/get-clickable-behavior.d.ts

@@ -1,15 +1,3 @@
-/**
- * Returns either the default ClickableBehavior or a react-router aware version.
- *
- * 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 __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.
- */
-import * as React from "react";
-import { PropsFor } from "@khanacademy/wonder-blocks-core";
 import ClickableBehavior from "../components/clickable-behavior";
 export default function getClickableBehavior(
 /**
@@ -21,6 +9,6 @@ href?: string,
  */
 skipClientNav?: boolean, 
 /**
- * router object added to the React context object by react-router-dom.
+ * Whether we're in a react-router context.
  */
-router?: any): React.ComponentType<PropsFor<typeof ClickableBehavior>>;
+inRouterContext?: boolean): typeof ClickableBehavior;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "6.1.6",
+  "version": "7.0.1",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -14,14 +14,15 @@
   "dependencies": {
     "@babel/runtime": "^7.24.5",
     "@khanacademy/wonder-blocks-core": "12.2.1",
-    "@khanacademy/wonder-blocks-tokens": "6.0.0"
+    "@khanacademy/wonder-blocks-tokens": "7.0.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "18.2.0",
     "react-dom": "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"