@khanacademy/wonder-blocks-clickable 2.4.4 → 2.4.5

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @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

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.4",
+  "version": "2.4.5",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.2"
+    "@khanacademy/wonder-blocks-color": "^1.2.1",
+    "@khanacademy/wonder-blocks-core": "^4.7.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -27,6 +27,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.7.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);