@khanacademy/wonder-blocks-clickable 2.1.2 → 2.2.2

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# @khanacademy/wonder-blocks-clickable
+
+## 2.2.2
+### Patch Changes
+
+- 901bfe82: Change disabled tabindex from -1 to 0

package/dist/es/index.js

@@ -1,9 +1,9 @@
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import _extends from '@babel/runtime/helpers/extends';
-import { Component, createElement } from 'react';
+import * as React 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';
 
@@ -52,7 +52,9 @@ const disabledHandlers = {
   onKeyUp: () => void 0,
   onFocus: () => void 0,
   onBlur: () => void 0,
-  tabIndex: -1
+  // Clickable components should still be tabbable so they can
+  // be used as anchors.
+  tabIndex: 0
 };
 const keyCodes = {
   enter: 13,
@@ -138,12 +140,12 @@ const 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.
  */
 
-class ClickableBehavior extends Component {
+class ClickableBehavior extends React.Component {
   static getDerivedStateFromProps(props, state) {
     // If new props are disabled, reset the hovered/focused/pressed states
     if (props.disabled) {
@@ -516,8 +518,8 @@ const 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.
  */
 const ClickableBehaviorWithRouter = withRouter(ClickableBehavior);
@@ -574,31 +576,31 @@ const StyledLink = addStyle(Link);
  * ```
  */
 
-class Clickable extends Component {
+class Clickable extends React.Component {
   constructor(...args) {
     super(...args);
 
-    this.getCorrectTag = (clickableState, commonProps) => {
+    this.getCorrectTag = (clickableState, router, commonProps) => {
       const activeHref = this.props.href && !this.props.disabled;
-      const useClient = this.context.router && !this.props.skipClientNav && isClientSideUrl(this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow
+      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) {
-        return /*#__PURE__*/createElement(StyledLink, _extends({}, commonProps, {
+        return /*#__PURE__*/React.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));
       } else if (activeHref && !useClient) {
-        return /*#__PURE__*/createElement(StyledAnchor, _extends({}, commonProps, {
+        return /*#__PURE__*/React.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));
       } else {
-        return /*#__PURE__*/createElement(StyledButton, _extends({}, commonProps, {
+        return /*#__PURE__*/React.createElement(StyledButton, _extends({}, commonProps, {
           type: "button",
           disabled: this.props.disabled
         }), this.props.children(clickableState));
@@ -606,7 +608,7 @@ class Clickable extends Component {
     };
   }
 
-  render() {
+  renderClickableBehavior(router) {
     const _this$props = this.props,
           {
       href,
@@ -625,12 +627,12 @@ class Clickable extends Component {
     } = _this$props,
           restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
-    const ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
+    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, {
+      return /*#__PURE__*/React.createElement(ClickableBehavior, {
         href: href,
         onClick: onClick,
         beforeNav: beforeNav,
@@ -638,12 +640,12 @@ class Clickable extends Component {
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp,
         disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, _extends({}, restProps, {
+      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends({}, restProps, {
         "data-test-id": testId,
         style: getStyle(state)
       }, childrenProps)));
     } else {
-      return /*#__PURE__*/createElement(ClickableBehavior, {
+      return /*#__PURE__*/React.createElement(ClickableBehavior, {
         href: href,
         onClick: onClick,
         safeWithNav: safeWithNav,
@@ -651,18 +653,19 @@ class Clickable extends Component {
         onKeyUp: onKeyUp,
         target: target,
         disabled: disabled
-      }, (state, childrenProps) => this.getCorrectTag(state, _extends({}, restProps, {
+      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends({}, restProps, {
         "data-test-id": testId,
         style: getStyle(state)
       }, childrenProps)));
     }
   }
 
+  render() {
+    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 } // Source:  https://gist.github.com/MoOx/9137295
 
-Clickable.contextTypes = {
-  router: any
-};
 Clickable.defaultProps = {
   light: false,
   disabled: false,
@@ -708,5 +711,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default Clickable;
-export { ClickableBehavior, getClickableBehavior, isClientSideUrl };
+export { ClickableBehavior, Clickable as default, getClickableBehavior, isClientSideUrl };