@khanacademy/wonder-blocks-modal 3.0.5 → 3.0.7

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @khanacademy/wonder-blocks-modal
 
+## 3.0.7
+
+### 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]
+-   Updated dependencies [91cb727c]
+    -   @khanacademy/wonder-blocks-icon@1.2.37
+    -   @khanacademy/wonder-blocks-breadcrumbs@1.0.38
+    -   @khanacademy/wonder-blocks-color@1.2.1
+    -   @khanacademy/wonder-blocks-core@4.7.0
+    -   @khanacademy/wonder-blocks-icon-button@3.4.21
+    -   @khanacademy/wonder-blocks-layout@1.4.16
+    -   @khanacademy/wonder-blocks-timing@2.1.1
+    -   @khanacademy/wonder-blocks-typography@1.1.38
+
+## 3.0.6
+
+### Patch Changes
+
+-   Updated dependencies [1a5624d4]
+    -   @khanacademy/wonder-blocks-icon@1.2.36
+    -   @khanacademy/wonder-blocks-icon-button@3.4.20
+
 ## 3.0.5
 
 ### 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-modal",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -16,15 +16,15 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.37",
-    "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.2",
-    "@khanacademy/wonder-blocks-icon": "^1.2.35",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.19",
-    "@khanacademy/wonder-blocks-layout": "^1.4.15",
+    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.38",
+    "@khanacademy/wonder-blocks-color": "^1.2.1",
+    "@khanacademy/wonder-blocks-core": "^4.7.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.37",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.21",
+    "@khanacademy/wonder-blocks-layout": "^1.4.16",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-timing": "^2.1.0",
-    "@khanacademy/wonder-blocks-typography": "^1.1.37"
+    "@khanacademy/wonder-blocks-timing": "^2.1.1",
+    "@khanacademy/wonder-blocks-typography": "^1.1.38"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -32,7 +32,7 @@
     "react-dom": "16.14.0"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.37",
-    "wb-dev-build-settings": "^0.7.0"
+    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.38",
+    "wb-dev-build-settings": "^0.7.1"
   }
 }

package/src/components/__docs__/modal-dialog.stories.js

@@ -16,7 +16,7 @@ import {Body, Title} 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";
 
 const customViewports = {

package/src/components/__docs__/modal-footer.stories.js

@@ -15,7 +15,7 @@ import {Body, LabelLarge, Title} 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";
 
 const customViewports = {

package/src/components/__docs__/modal-header.stories.js

@@ -17,9 +17,9 @@ import {Body} 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 ModalHeaderArgtypes from "./modal-header.argtypes.js";
+import ModalHeaderArgtypes from "./modal-header.argtypes";
 
 const customViewports = {
     phone: {

package/src/components/__docs__/modal-launcher.stories.js

@@ -17,10 +17,10 @@ import {Body, Title} from "@khanacademy/wonder-blocks-typography";
 
 import type {StoryComponentType} from "@storybook/react";
 
-import type {ModalElement} from "../../util/types.js";
-import ModalLauncherArgTypes from "./modal-launcher.argtypes.js";
+import type {ModalElement} from "../../util/types";
+import ModalLauncherArgTypes from "./modal-launcher.argtypes";
 
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
 
 const customViewports = {

package/src/components/__docs__/modal-panel.stories.js

@@ -17,7 +17,7 @@ import {Body, Title} 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";
 
 const customViewports = {

package/src/components/__docs__/one-pane-dialog.stories.js

@@ -18,9 +18,9 @@ import {Body, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 
 import type {StoryComponentType} from "@storybook/react";
 
-import OnePaneDialogArgTypes from "./one-pane-dialog.argtypes.js";
+import OnePaneDialogArgTypes from "./one-pane-dialog.argtypes";
 
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
 
 const customViewports = {

package/src/components/__tests__/close-button.test.js

@@ -2,9 +2,9 @@
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
-import expectRenderError from "../../../../../utils/testing/expect-render-error.js";
-import CloseButton from "../close-button.js";
-import ModalContext from "../modal-context.js";
+import expectRenderError from "../../../../../utils/testing/expect-render-error";
+import CloseButton from "../close-button";
+import ModalContext from "../modal-context";
 
 describe("CloseButton", () => {
     test("ModalContext.Provider and onClose should warn", () => {

package/src/components/__tests__/focus-trap.test.js

@@ -6,7 +6,7 @@ import userEvent from "@testing-library/user-event";
 import Button from "@khanacademy/wonder-blocks-button";
 import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
 
-import FocusTrap from "../focus-trap.js";
+import FocusTrap from "../focus-trap";
 
 describe("FocusTrap", () => {
     it("Focus should move to the first focusable element", () => {

package/src/components/__tests__/modal-backdrop.test.js

@@ -3,8 +3,8 @@ import * as React from "react";
 import {render, screen, fireEvent, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import ModalBackdrop from "../modal-backdrop.js";
-import OnePaneDialog from "../one-pane-dialog.js";
+import ModalBackdrop from "../modal-backdrop";
+import OnePaneDialog from "../one-pane-dialog";
 
 const exampleModal = (
     <OnePaneDialog

package/src/components/__tests__/modal-header.test.js

@@ -7,7 +7,7 @@ import {
     BreadcrumbsItem,
 } from "@khanacademy/wonder-blocks-breadcrumbs";
 
-import ModalHeader from "../modal-header.js";
+import ModalHeader from "../modal-header";
 
 const exampleBreadcrumbs: React.Element<typeof Breadcrumbs> = (
     <Breadcrumbs>

package/src/components/__tests__/modal-launcher.test.js

@@ -6,8 +6,8 @@ import userEvent from "@testing-library/user-event";
 import {View} from "@khanacademy/wonder-blocks-core";
 import Button from "@khanacademy/wonder-blocks-button";
 
-import ModalLauncher from "../modal-launcher.js";
-import OnePaneDialog from "../one-pane-dialog.js";
+import ModalLauncher from "../modal-launcher";
+import OnePaneDialog from "../one-pane-dialog";
 
 const exampleModal = (
     <OnePaneDialog

package/src/components/__tests__/modal-panel.test.js

@@ -2,9 +2,9 @@
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
-import expectRenderError from "../../../../../utils/testing/expect-render-error.js";
-import ModalPanel from "../modal-panel.js";
-import ModalContext from "../modal-context.js";
+import expectRenderError from "../../../../../utils/testing/expect-render-error";
+import ModalPanel from "../modal-panel";
+import ModalContext from "../modal-context";
 
 describe("ModalPanel", () => {
     test("ModalContext.Provider and onClose should warn", () => {

package/src/components/__tests__/one-pane-dialog.test.js

@@ -6,7 +6,7 @@ import {
     Breadcrumbs,
     BreadcrumbsItem,
 } from "@khanacademy/wonder-blocks-breadcrumbs";
-import OnePaneDialog from "../one-pane-dialog.js";
+import OnePaneDialog from "../one-pane-dialog";
 
 describe("OnePaneDialog", () => {
     test("testId should be set in the Dialog element", () => {

package/src/components/close-button.js

@@ -4,7 +4,7 @@ import {icons} from "@khanacademy/wonder-blocks-icon";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-import ModalContext from "./modal-context.js";
+import ModalContext from "./modal-context";
 
 type Props = {|
     /**

package/src/components/modal-backdrop.js

@@ -5,11 +5,11 @@ import {StyleSheet} from "aphrodite";
 
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {ModalLauncherPortalAttributeName} from "../util/constants.js";
+import {ModalLauncherPortalAttributeName} from "../util/constants";
 
-import {findFocusableNodes} from "../util/find-focusable-nodes.js";
+import {findFocusableNodes} from "../util/find-focusable-nodes";
 
-import type {ModalElement} from "../util/types.js";
+import type {ModalElement} from "../util/types";
 
 type Props = {|
     children: ModalElement,

package/src/components/modal-launcher.js

@@ -9,13 +9,14 @@ import type {
     WithoutActionScheduler,
 } from "@khanacademy/wonder-blocks-timing";
 
-import FocusTrap from "./focus-trap.js";
-import ModalBackdrop from "./modal-backdrop.js";
-import ScrollDisabler from "./scroll-disabler.js";
-import type {ModalElement} from "../util/types.js";
-import ModalContext from "./modal-context.js";
-
-type CommonProps = {|
+import FocusTrap from "./focus-trap";
+import ModalBackdrop from "./modal-backdrop";
+import ScrollDisabler from "./scroll-disabler";
+import type {ModalElement} from "../util/types";
+import ModalContext from "./modal-context";
+
+// TODO(FEI-5000): Convert back to conditional props after TS migration is complete.
+type Props = {|
     /**
      * The modal to render.
      *
@@ -31,13 +32,6 @@ type CommonProps = {|
      */
     modal: ModalElement | (({|closeModal: () => void|}) => ModalElement),
 
-    /**
-     * If the parent needs to be notified when the modal is closed, use this
-     * prop. You probably want to use this instead of `onClose` on the modals
-     * themselves, since this will capture a more complete set of close events.
-     */
-    onClose?: () => mixed,
-
     /**
      * Enables the backdrop to dismiss the modal on click/tap
      */
@@ -61,11 +55,6 @@ type CommonProps = {|
      */
     testId?: string,
 
-    ...WithActionSchedulerProps,
-|};
-
-type ControlledProps = {|
-    ...CommonProps,
     /**
      * Renders the modal when true, renders nothing when false.
      *
@@ -75,29 +64,34 @@ type ControlledProps = {|
      * should never be used with this prop.  Not doing so will result in an
      * error being thrown.
      */
-    opened: boolean,
+    opened?: boolean,
 
     /**
+     * If the parent needs to be notified when the modal is closed, use this
+     * prop. You probably want to use this instead of `onClose` on the modals
+     * themselves, since this will capture a more complete set of close events.
+     *
      * Called when the modal needs to notify the parent component that it should
      * be closed.
      *
      * This prop must be used when the component is being used as a controlled
      * component.
      */
-    onClose: () => mixed,
+    onClose?: () => mixed,
+
+    /**
+     * WARNING: This props should only be used when using the component as a
+     * controlled component.
+     */
+    children?: ({|openModal: () => mixed|}) => React.Node,
+
+    ...WithActionSchedulerProps,
 |};
 
 type DefaultProps = {|
     backdropDismissEnabled: $PropertyType<Props, "backdropDismissEnabled">,
 |};
 
-type UncontrolledProps = {|
-    ...CommonProps,
-    children: ({|openModal: () => mixed|}) => React.Node,
-|};
-
-type Props = ControlledProps | UncontrolledProps;
-
 type State = {|
     /** Whether the modal should currently be open. */
     opened: boolean,

package/src/components/modal-panel.js

@@ -6,10 +6,10 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-import ModalContent from "./modal-content.js";
-import ModalHeader from "./modal-header.js";
-import ModalFooter from "./modal-footer.js";
-import CloseButton from "./close-button.js";
+import ModalContent from "./modal-content";
+import ModalHeader from "./modal-header";
+import ModalFooter from "./modal-footer";
+import CloseButton from "./close-button";
 
 type Props = {|
     /**

package/src/components/one-pane-dialog.js

@@ -6,9 +6,9 @@ import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 import {IDProvider} from "@khanacademy/wonder-blocks-core";
-import ModalDialog from "./modal-dialog.js";
-import ModalPanel from "./modal-panel.js";
-import ModalHeader from "./modal-header.js";
+import ModalDialog from "./modal-dialog";
+import ModalPanel from "./modal-panel";
+import ModalHeader from "./modal-header";
 
 type Common = {|
     /**

package/src/index.js

@@ -1,11 +1,11 @@
 // @flow
-import ModalDialog from "./components/modal-dialog.js";
-import ModalFooter from "./components/modal-footer.js";
-import ModalHeader from "./components/modal-header.js";
-import ModalLauncher from "./components/modal-launcher.js";
-import ModalPanel from "./components/modal-panel.js";
-import OnePaneDialog from "./components/one-pane-dialog.js";
-import maybeGetPortalMountedModalHostElement from "./util/maybe-get-portal-mounted-modal-host-element.js";
+import ModalDialog from "./components/modal-dialog";
+import ModalFooter from "./components/modal-footer";
+import ModalHeader from "./components/modal-header";
+import ModalLauncher from "./components/modal-launcher";
+import ModalPanel from "./components/modal-panel";
+import OnePaneDialog from "./components/one-pane-dialog";
+import maybeGetPortalMountedModalHostElement from "./util/maybe-get-portal-mounted-modal-host-element";
 
 export {
     ModalHeader,

package/src/util/maybe-get-portal-mounted-modal-host-element.js

@@ -1,5 +1,5 @@
 // @flow
-import {ModalLauncherPortalAttributeName} from "./constants.js";
+import {ModalLauncherPortalAttributeName} from "./constants";
 
 /**
  * From a given element, finds its next ancestor that is a modal launcher portal

package/src/util/maybe-get-portal-mounted-modal-host-element.test.js

@@ -4,10 +4,10 @@ import * as ReactDOM from "react-dom";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import {ModalLauncherPortalAttributeName} from "./constants.js";
-import maybeGetPortalMountedModalHostElement from "./maybe-get-portal-mounted-modal-host-element.js";
-import ModalLauncher from "../components/modal-launcher.js";
-import OnePaneDialog from "../components/one-pane-dialog.js";
+import {ModalLauncherPortalAttributeName} from "./constants";
+import maybeGetPortalMountedModalHostElement from "./maybe-get-portal-mounted-modal-host-element";
+import ModalLauncher from "../components/modal-launcher";
+import OnePaneDialog from "../components/one-pane-dialog";
 
 describe("maybeGetPortalMountedModalHostElement", () => {
     test("when candidate is null, returns null", () => {