@khanacademy/wonder-blocks-clickable 2.4.3 → 2.4.5

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 2.4.5
+
+### Patch Changes
+
+-   91cb727c: Remove file extensions from imports
+-   91cb727c: Merge disjoint prop types since the codemod doesn't handle these properly.
+-   Updated dependencies [91cb727c]
+-   Updated dependencies [91cb727c]
+    -   @khanacademy/wonder-blocks-color@1.2.1
+    -   @khanacademy/wonder-blocks-core@4.7.0
+
+## 2.4.4
+
+### Patch Changes
+
+-   496119f2: Cleanup WB interdependencies
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-core@4.6.2
+
 ## 2.4.3
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,551 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+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 wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var Color = require('@khanacademy/wonder-blocks-color');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+   if (e && e.__esModule) return e;
+   var n = Object.create(null);
+   if (e) {
+      Object.keys(e).forEach(function (k) {
+         if (k !== 'default') {
+            var d = Object.getOwnPropertyDescriptor(e, k);
+            Object.defineProperty(n, k, d.get ? d : {
+               enumerable: true,
+               get: function () { return e[k]; }
+            });
+         }
+      });
+   }
+   n["default"] = e;
+   return Object.freeze(n);
+}
+
+var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
+
+const getAppropriateTriggersForRole = role => {
+  switch (role) {
+    case "link":
+      return {
+        triggerOnEnter: true,
+        triggerOnSpace: false
+      };
+
+    case "checkbox":
+    case "radio":
+    case "listbox":
+      return {
+        triggerOnEnter: false,
+        triggerOnSpace: true
+      };
+
+    case "button":
+    case "menuitem":
+    case "menu":
+    case "option":
+    default:
+      return {
+        triggerOnEnter: true,
+        triggerOnSpace: true
+      };
+  }
+};
+
+const disabledHandlers = {
+  onClick: () => void 0,
+  onMouseEnter: () => void 0,
+  onMouseLeave: () => void 0,
+  onMouseDown: () => void 0,
+  onMouseUp: () => void 0,
+  onTouchStart: () => void 0,
+  onTouchEnd: () => void 0,
+  onTouchCancel: () => void 0,
+  onKeyDown: () => void 0,
+  onKeyUp: () => void 0
+};
+const keyCodes = {
+  enter: 13,
+  space: 32
+};
+const startState = {
+  hovered: false,
+  focused: false,
+  pressed: false,
+  waiting: false
+};
+class ClickableBehavior extends React__namespace.Component {
+  static getDerivedStateFromProps(props, state) {
+    if (props.disabled) {
+      return _extends__default["default"]({}, startState, {
+        focused: state.focused
+      });
+    } else {
+      return null;
+    }
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.handleClick = e => {
+      const {
+        onClick = undefined,
+        beforeNav = undefined,
+        safeWithNav = undefined
+      } = this.props;
+
+      if (this.enterClick) {
+        return;
+      }
+
+      if (onClick || beforeNav || safeWithNav) {
+        this.waitingForClick = false;
+      }
+
+      this.runCallbackAndMaybeNavigate(e);
+    };
+
+    this.handleMouseEnter = e => {
+      if (!this.waitingForClick) {
+        this.setState({
+          hovered: true
+        });
+      }
+    };
+
+    this.handleMouseLeave = () => {
+      if (!this.waitingForClick) {
+        this.setState({
+          hovered: false,
+          pressed: false,
+          focused: false
+        });
+      }
+    };
+
+    this.handleMouseDown = () => {
+      this.setState({
+        pressed: true
+      });
+    };
+
+    this.handleMouseUp = e => {
+      this.setState({
+        pressed: false,
+        focused: false
+      });
+    };
+
+    this.handleTouchStart = () => {
+      this.setState({
+        pressed: true
+      });
+    };
+
+    this.handleTouchEnd = () => {
+      this.setState({
+        pressed: false
+      });
+      this.waitingForClick = true;
+    };
+
+    this.handleTouchCancel = () => {
+      this.setState({
+        pressed: false
+      });
+      this.waitingForClick = true;
+    };
+
+    this.handleKeyDown = e => {
+      const {
+        onKeyDown,
+        role
+      } = this.props;
+
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+
+      const keyCode = e.which || e.keyCode;
+      const {
+        triggerOnEnter,
+        triggerOnSpace
+      } = getAppropriateTriggersForRole(role);
+
+      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+        e.preventDefault();
+        this.setState({
+          pressed: true
+        });
+      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+        this.enterClick = true;
+      }
+    };
+
+    this.handleKeyUp = e => {
+      const {
+        onKeyUp,
+        role
+      } = this.props;
+
+      if (onKeyUp) {
+        onKeyUp(e);
+      }
+
+      const keyCode = e.which || e.keyCode;
+      const {
+        triggerOnEnter,
+        triggerOnSpace
+      } = getAppropriateTriggersForRole(role);
+
+      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+        this.setState({
+          pressed: false,
+          focused: true
+        });
+        this.runCallbackAndMaybeNavigate(e);
+      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+        this.enterClick = false;
+      }
+    };
+
+    this.handleFocus = e => {
+      this.setState({
+        focused: true
+      });
+    };
+
+    this.handleBlur = e => {
+      this.setState({
+        focused: false,
+        pressed: false
+      });
+    };
+
+    this.state = startState;
+    this.waitingForClick = false;
+    this.enterClick = false;
+  }
+
+  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);
+        }
+      }
+    } else {
+      this.setState({
+        waiting: false
+      });
+    }
+  }
+
+  handleSafeWithNav(safeWithNav, shouldNavigate) {
+    const {
+      skipClientNav,
+      history
+    } = this.props;
+
+    if (history && !skipClientNav || this.props.target === "_blank") {
+      safeWithNav();
+      this.navigateOrReset(shouldNavigate);
+      return Promise.resolve();
+    } else {
+      if (!this.state.waiting) {
+        this.setState({
+          waiting: true
+        });
+      }
+
+      return safeWithNav().then(() => {
+        if (!this.state.waiting) {
+          this.setState({
+            waiting: true
+          });
+        }
+
+        return;
+      }).catch(error => {}).finally(() => {
+        this.navigateOrReset(shouldNavigate);
+      });
+    }
+  }
+
+  runCallbackAndMaybeNavigate(e) {
+    const {
+      onClick = undefined,
+      beforeNav = undefined,
+      safeWithNav = undefined,
+      href,
+      type
+    } = this.props;
+    let shouldNavigate = true;
+    let canSubmit = true;
+
+    if (onClick) {
+      onClick(e);
+    }
+
+    if (e.defaultPrevented) {
+      shouldNavigate = false;
+      canSubmit = false;
+    }
+
+    e.preventDefault();
+
+    if (!href && type === "submit" && canSubmit) {
+      let target = e.currentTarget;
+
+      while (target) {
+        if (target instanceof window.HTMLFormElement) {
+          const event = new window.Event("submit", {
+            cancelable: true
+          });
+          target.dispatchEvent(event);
+          break;
+        }
+
+        target = target.parentElement;
+      }
+    }
+
+    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);
+    }
+  }
+
+  render() {
+    const childrenProps = this.props.disabled ? _extends__default["default"]({}, disabledHandlers, {
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      tabIndex: this.props.tabIndex
+    }) : {
+      onClick: this.handleClick,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      onMouseDown: this.handleMouseDown,
+      onMouseUp: this.handleMouseUp,
+      onTouchStart: this.handleTouchStart,
+      onTouchEnd: this.handleTouchEnd,
+      onTouchCancel: this.handleTouchCancel,
+      onKeyDown: this.handleKeyDown,
+      onKeyUp: this.handleKeyUp,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      tabIndex: this.props.tabIndex
+    };
+    childrenProps.rel = this.props.rel || (this.props.target === "_blank" ? "noopener noreferrer" : undefined);
+    const {
+      children
+    } = this.props;
+    return children && children(this.state, childrenProps);
+  }
+
+}
+ClickableBehavior.defaultProps = {
+  disabled: false
+};
+
+const isClientSideUrl = href => {
+  if (typeof href !== "string") {
+    return false;
+  }
+
+  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)) {
+    return ClickableBehaviorWithRouter;
+  }
+
+  return ClickableBehavior;
+}
+
+const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing", "light", "disabled"];
+const StyledAnchor = wonderBlocksCore.addStyle("a");
+const StyledButton = wonderBlocksCore.addStyle("button");
+const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
+class Clickable extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.getCorrectTag = (clickableState, router, commonProps) => {
+      const activeHref = this.props.href && !this.props.disabled;
+      const useClient = router && !this.props.skipClientNav && isClientSideUrl(this.props.href || "");
+
+      if (activeHref && useClient && this.props.href) {
+        return React__namespace.createElement(StyledLink, _extends__default["default"]({}, 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 React__namespace.createElement(StyledAnchor, _extends__default["default"]({}, 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 React__namespace.createElement(StyledButton, _extends__default["default"]({}, commonProps, {
+          type: "button",
+          "aria-disabled": this.props.disabled
+        }), this.props.children(clickableState));
+      }
+    };
+  }
+
+  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__default["default"](_this$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,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp,
+        disabled: disabled
+      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends__default["default"]({}, restProps, {
+        "data-test-id": testId,
+        style: getStyle(state)
+      }, childrenProps)));
+    } else {
+      return React__namespace.createElement(ClickableBehavior, {
+        href: href,
+        onClick: onClick,
+        safeWithNav: safeWithNav,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp,
+        target: target,
+        disabled: disabled
+      }, (state, childrenProps) => this.getCorrectTag(state, router, _extends__default["default"]({}, restProps, {
+        "data-test-id": testId,
+        style: getStyle(state)
+      }, childrenProps)));
+    }
+  }
+
+  render() {
+    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
+}
+Clickable.defaultProps = {
+  light: false,
+  disabled: false
+};
+const styles = aphrodite.StyleSheet.create({
+  reset: {
+    border: "none",
+    margin: 0,
+    padding: 0,
+    width: "auto",
+    overflow: "visible",
+    background: "transparent",
+    textDecoration: "none",
+    color: "inherit",
+    font: "inherit",
+    boxSizing: "border-box",
+    touchAction: "manipulation",
+    userSelect: "none",
+    outline: "none",
+    lineHeight: "normal",
+    WebkitFontSmoothing: "inherit",
+    MozOsxFontSmoothing: "inherit"
+  },
+  link: {
+    cursor: "pointer"
+  },
+  focused: {
+    ":focus": {
+      outline: `solid 2px ${Color__default["default"].blue}`
+    }
+  },
+  focusedLight: {
+    outline: `solid 2px ${Color__default["default"].white}`
+  },
+  disabled: {
+    color: Color__default["default"].offBlack32,
+    cursor: "not-allowed",
+    ":focus": {
+      outline: "none"
+    },
+    ":focus-visible": {
+      outline: `solid 2px ${Color__default["default"].blue}`
+    }
+  }
+});
+
+exports.ClickableBehavior = ClickableBehavior;
+exports["default"] = Clickable;
+exports.getClickableBehavior = getClickableBehavior;
+exports.isClientSideUrl = isClientSideUrl;

package/dist/index.js.flow

@@ -1,2 +1,2 @@
 // @flow
-export * from "../src/index.js";
+export * from "../src/index";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.4.3",
+  "version": "2.4.5",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -16,7 +16,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^4.6.1"
+    "@khanacademy/wonder-blocks-color": "^1.2.1",
+    "@khanacademy/wonder-blocks-core": "^4.7.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -26,6 +27,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.6.0"
+    "wb-dev-build-settings": "^0.7.1"
   }
-}
+}

package/src/components/__docs__/clickable-behavior.argtypes.js

@@ -1,4 +1,4 @@
-import clickableArgtypes from "./clickable.argtypes.js";
+import clickableArgtypes from "./clickable.argtypes";
 
 export default {
     children: {

package/src/components/__docs__/clickable-behavior.stories.js

@@ -8,9 +8,9 @@ import Color from "@khanacademy/wonder-blocks-color";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 
 import type {StoryComponentType} from "@storybook/react";
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
-import argTypes from "./clickable-behavior.argtypes.js";
+import argTypes from "./clickable-behavior.argtypes";
 
 const ClickableBehavior: React.ComponentType<
     React.ElementConfig<typeof ClickableBehavior>,

package/src/components/__docs__/clickable.stories.js

@@ -11,9 +11,9 @@ import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {Body, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 
 import type {StoryComponentType} from "@storybook/react";
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
-import argTypes from "./clickable.argtypes.js";
+import argTypes from "./clickable.argtypes";
 
 export default {
     title: "Clickable / Clickable",

package/src/components/__tests__/clickable-behavior.test.js

@@ -6,8 +6,8 @@ import {render, screen, fireEvent, waitFor} from "@testing-library/react";
 import {MemoryRouter, Switch, Route} from "react-router-dom";
 import userEvent from "@testing-library/user-event";
 
-import getClickableBehavior from "../../util/get-clickable-behavior.js";
-import ClickableBehavior from "../clickable-behavior.js";
+import getClickableBehavior from "../../util/get-clickable-behavior";
+import ClickableBehavior from "../clickable-behavior";
 import type {ClickableState} from "../clickable-behavior";
 
 const keyCodes = {

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

@@ -5,7 +5,7 @@ import {render, screen, fireEvent, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import {View} from "@khanacademy/wonder-blocks-core";
-import Clickable from "../clickable.js";
+import Clickable from "../clickable";
 
 describe("Clickable", () => {
     beforeEach(() => {

package/src/components/clickable-behavior.js

@@ -42,7 +42,8 @@ const getAppropriateTriggersForRole = (role: ?ClickableRole) => {
     }
 };
 
-type CommonProps = {|
+// TODO(FEI-5000): Convert back to conditional props after TS migration is complete.
+type Props = {|
     /**
      * A function that returns the a React `Element`.
      *
@@ -131,6 +132,28 @@ type CommonProps = {|
      * Respond to raw "keyup" event.
      */
     onKeyUp?: (e: SyntheticKeyboardEvent<>) => mixed,
+
+    /**
+     * A target destination window for a link to open in. Should only be used
+     * when `href` is specified.
+     */
+    // TODO(WB-1262): only allow this prop when `href` is also set.
+    target?: "_blank",
+
+    /**
+     * Run async code before navigating to the URL passed to `href`. If the
+     * promise returned rejects then navigation will not occur.
+     *
+     * If both safeWithNav and beforeNav are provided, beforeNav will be run
+     * first and safeWithNav will only be run if beforeNav does not reject.
+     *
+     * WARNING: Using this with `target="_blank"` will trigger built-in popup
+     * blockers in Firefox and Safari.  This is because we do navigation
+     * programmatically and `beforeNav` causes a delay which means that the
+     * browser can't make a directly link between a user action and the
+     * navigation.
+     */
+    beforeNav?: () => Promise<mixed>,
 |};
 
 export type ClickableState = {|
@@ -165,36 +188,6 @@ export type ClickableState = {|
     waiting: boolean,
 |};
 
-type Props =
-    | {|
-          ...CommonProps,
-
-          /**
-           * A target destination window for a link to open in. Should only be used
-           * when `href` is specified.
-           */
-          // TODO(WB-1262): only allow this prop when `href` is also set.
-          target?: "_blank",
-      |}
-    | {|
-          ...CommonProps,
-
-          /**
-           * Run async code before navigating to the URL passed to `href`. If the
-           * promise returned rejects then navigation will not occur.
-           *
-           * If both safeWithNav and beforeNav are provided, beforeNav will be run
-           * first and safeWithNav will only be run if beforeNav does not reject.
-           *
-           * WARNING: Using this with `target="_blank"` will trigger built-in popup
-           * blockers in Firefox and Safari.  This is because we do navigation
-           * programmatically and `beforeNav` causes a delay which means that the
-           * browser can't make a directly link between a user action and the
-           * navigation.
-           */
-          beforeNav?: () => Promise<mixed>,
-      |};
-
 type DefaultProps = {|
     disabled: $PropertyType<Props, "disabled">,
 |};

package/src/components/clickable.js

@@ -8,11 +8,12 @@ import {addStyle} from "@khanacademy/wonder-blocks-core";
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 import Color from "@khanacademy/wonder-blocks-color";
 
-import getClickableBehavior from "../util/get-clickable-behavior.js";
-import type {ClickableRole, ClickableState} from "./clickable-behavior.js";
-import {isClientSideUrl} from "../util/is-client-side-url.js";
+import getClickableBehavior from "../util/get-clickable-behavior";
+import type {ClickableRole, ClickableState} from "./clickable-behavior";
+import {isClientSideUrl} from "../util/is-client-side-url";
 
-type CommonProps = {|
+// TODO(FEI-5000): Convert back to conditional props after TS migration is complete.
+type Props = {|
     /**
      * aria-label should be used when `spinner={true}` to let people using screen
      * readers that the action taken by clicking the button will take some
@@ -103,75 +104,34 @@ type CommonProps = {|
      * a custom focus ring within your own component that uses Clickable.
      */
     hideDefaultFocusRing?: boolean,
-|};
 
-type Props =
-    | {|
-          ...CommonProps,
-
-          /**
-           * A target destination window for a link to open in.
-           *
-           * TODO(WB-1262): only allow this prop when `href` is also set.t
-           */
-          target?: "_blank",
-      |}
-    | {|
-          ...CommonProps,
-
-          href: string,
-
-          /**
-           * Run async code before navigating. If the promise returned rejects then
-           * navigation will not occur.
-           *
-           * If both safeWithNav and beforeNav are provided, beforeNav will be run
-           * first and safeWithNav will only be run if beforeNav does not reject.
-           */
-          beforeNav: () => Promise<mixed>,
-      |}
-    | {|
-          ...CommonProps,
-
-          href: string,
-
-          /**
-           * Run async code in the background while client-side navigating. If the
-           * browser does a full page load navigation, the callback promise must be
-           * settled before the navigation will occur. Errors are ignored so that
-           * navigation is guaranteed to succeed.
-           */
-          safeWithNav: () => Promise<mixed>,
-
-          /**
-           * A target destination window for a link to open in.
-           *
-           * TODO(WB-1262): only allow this prop when `href` is also set.t
-           */
-          target?: "_blank",
-      |}
-    | {|
-          ...CommonProps,
-
-          href: string,
-
-          /**
-           * Run async code before navigating. If the promise returned rejects then
-           * navigation will not occur.
-           *
-           * If both safeWithNav and beforeNav are provided, beforeNav will be run
-           * first and safeWithNav will only be run if beforeNav does not reject.
-           */
-          beforeNav: () => Promise<mixed>,
-
-          /**
-           * Run async code in the background while client-side navigating. If the
-           * browser does a full page load navigation, the callback promise must be
-           * settled before the navigation will occur. Errors are ignored so that
-           * navigation is guaranteed to succeed.
-           */
-          safeWithNav: () => Promise<mixed>,
-      |};
+    /**
+     * A target destination window for a link to open in.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
+     */
+    target?: "_blank",
+
+    /**
+     * Run async code before navigating. If the promise returned rejects then
+     * navigation will not occur.
+     *
+     * If both safeWithNav and beforeNav are provided, beforeNav will be run
+     * first and safeWithNav will only be run if beforeNav does not reject.
+     *
+     * WARNING: This prop must be used with `href` and should not be used with
+     * `target="blank"`.
+     */
+    beforeNav?: () => Promise<mixed>,
+
+    /**
+     * Run async code in the background while client-side navigating. If the
+     * browser does a full page load navigation, the callback promise must be
+     * settled before the navigation will occur. Errors are ignored so that
+     * navigation is guaranteed to succeed.
+     */
+    safeWithNav?: () => Promise<mixed>,
+|};
 
 type DefaultProps = {|
     light: $PropertyType<Props, "light">,

package/src/index.js

@@ -3,12 +3,12 @@ import type {
     ChildrenProps,
     ClickableState,
     ClickableRole,
-} from "./components/clickable-behavior.js";
-import Clickable from "./components/clickable.js";
+} from "./components/clickable-behavior";
+import Clickable from "./components/clickable";
 
-export {default as ClickableBehavior} from "./components/clickable-behavior.js";
-export {default as getClickableBehavior} from "./util/get-clickable-behavior.js";
-export {isClientSideUrl} from "./util/is-client-side-url.js";
+export {default as ClickableBehavior} from "./components/clickable-behavior";
+export {default as getClickableBehavior} from "./util/get-clickable-behavior";
+export {isClientSideUrl} from "./util/is-client-side-url";
 
 export {Clickable as default};
 

package/src/util/__tests__/get-clickable-behavior.test.js

@@ -1,8 +1,8 @@
 // @flow
 import * as React from "react";
 import {MemoryRouter} from "react-router-dom";
-import ClickableBehavior from "../../components/clickable-behavior.js";
-import getClickableBehavior from "../get-clickable-behavior.js";
+import ClickableBehavior from "../../components/clickable-behavior";
+import getClickableBehavior from "../get-clickable-behavior";
 
 describe("getClickableBehavior", () => {
     test("Without href, returns ClickableBehavior", () => {

package/src/util/__tests__/is-client-side-url.js.test.js

@@ -1,5 +1,5 @@
 // @flow
-import {isClientSideUrl} from "../is-client-side-url.js";
+import {isClientSideUrl} from "../is-client-side-url";
 
 describe("isClientSideUrl", () => {
     test("returns boolean based on the url", () => {

package/src/util/get-clickable-behavior.js

@@ -12,8 +12,8 @@
 import * as React from "react";
 import {withRouter} from "react-router-dom";
 
-import ClickableBehavior from "../components/clickable-behavior.js";
-import {isClientSideUrl} from "./is-client-side-url.js";
+import ClickableBehavior from "../components/clickable-behavior";
+import {isClientSideUrl} from "./is-client-side-url";
 
 const ClickableBehaviorWithRouter = withRouter(ClickableBehavior);