@khanacademy/wonder-blocks-popover 2.1.7 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @khanacademy/wonder-blocks-popover
 
+## 3.0.1
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-icon-button@4.1.4
+-   @khanacademy/wonder-blocks-modal@4.0.20
+-   @khanacademy/wonder-blocks-tooltip@2.1.3
+
+## 3.0.0
+
+### Major Changes
+
+-   674a1e5c: Props are using discriminated union types to prevent invalid combinations of props
+
+### Patch Changes
+
+-   674a1e5c: We're no longer building flow types
+-   Updated dependencies [674a1e5c]
+-   Updated dependencies [674a1e5c]
+    -   @khanacademy/wonder-blocks-modal@4.0.19
+    -   @khanacademy/wonder-blocks-core@6.0.0
+    -   @khanacademy/wonder-blocks-icon-button@4.1.3
+    -   @khanacademy/wonder-blocks-icon@2.1.1
+    -   @khanacademy/wonder-blocks-tooltip@2.1.2
+    -   @khanacademy/wonder-blocks-typography@2.1.3
+
 ## 2.1.7
 
 ### Patch Changes

package/dist/components/popover-content.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import type { PopoverContextType } from "./popover-context";
-type Props = AriaProps & {
+type CommonProps = AriaProps & {
     /**
      * The content to render inside the popover.
      */
@@ -37,6 +37,8 @@ type Props = AriaProps & {
      * Test ID used for e2e testing.
      */
     testId?: string;
+};
+type Props = (CommonProps & {
     /**
      * Decorate the popover with an illustrated icon. It cannot be used at the
      * same time with image.
@@ -47,13 +49,17 @@ type Props = AriaProps & {
      * the same time with icon.
      */
     image?: React.ReactElement<React.ComponentProps<"img">> | React.ReactElement<React.ComponentProps<"svg">>;
+    emphasized?: never;
+}) | (CommonProps & {
     /**
      * When true, changes the popover dialog background to blue; otherwise, the
      * popover dialog background is not modified. It can be used only with
      * Text-only popovers. It cannot be used with icon or image.
      */
     emphasized?: boolean;
-};
+    icon?: never;
+    image?: never;
+});
 type DefaultProps = {
     closeButtonVisible: Props["closeButtonVisible"];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-popover",
-  "version": "2.1.7",
+  "version": "3.0.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -17,13 +17,13 @@
   "dependencies": {
     "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.4.0",
-    "@khanacademy/wonder-blocks-icon": "^2.1.0",
-    "@khanacademy/wonder-blocks-icon-button": "^4.1.2",
-    "@khanacademy/wonder-blocks-modal": "^4.0.18",
+    "@khanacademy/wonder-blocks-core": "^6.0.0",
+    "@khanacademy/wonder-blocks-icon": "^2.1.1",
+    "@khanacademy/wonder-blocks-icon-button": "^4.1.4",
+    "@khanacademy/wonder-blocks-modal": "^4.0.20",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-tooltip": "^2.1.1",
-    "@khanacademy/wonder-blocks-typography": "^2.1.2"
+    "@khanacademy/wonder-blocks-tooltip": "^2.1.3",
+    "@khanacademy/wonder-blocks-typography": "^2.1.3"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -33,6 +33,6 @@
     "react-popper": "^2.0.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.9.7"
+    "@khanacademy/wb-dev-build-settings": "^1.0.0"
   }
 }

package/src/components/__tests__/popover-content.typestest.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+import PopoverContent from "../popover-content";
+
+<PopoverContent title="Title" content="Content" />;
+
+<PopoverContent title="Title" content="Content" icon="close" />;
+
+<PopoverContent
+    title="Title"
+    content="Content"
+    image={<img src="domokun.jpg" alt="domokun" />}
+/>;
+
+<PopoverContent
+    title="Title"
+    content="Content"
+    icon="close"
+    image={<img src="domokun.jpg" alt="domokun" />}
+/>;
+
+<PopoverContent title="Title" content="Content" emphasized={true} />;
+
+// @ts-expect-error `emphasized` cannot be used with `icon`
+<PopoverContent
+    title="Title"
+    content="Content"
+    icon="close"
+    emphasized={true}
+/>;
+
+// @ts-expect-error `emphasized` cannot be used with `img`
+<PopoverContent
+    title="Title"
+    content="Content"
+    image={<img src="domokun.jpg" alt="domokun" />}
+    emphasized={true}
+/>;

package/src/components/popover-content.tsx

@@ -11,8 +11,7 @@ import type {PopoverContextType} from "./popover-context";
 import PopoverContentCore from "./popover-content-core";
 import PopoverContext from "./popover-context";
 
-// TODO(FEI-5000): Convert back to conditional props after TS migration is complete.
-type Props = AriaProps & {
+type CommonProps = AriaProps & {
     /**
      * The content to render inside the popover.
      */
@@ -48,29 +47,40 @@ type Props = AriaProps & {
      * Test ID used for e2e testing.
      */
     testId?: string;
-    /**
-     * Decorate the popover with an illustrated icon. It cannot be used at the
-     * same time with image.
-     */
-    icon?:
-        | string
-        | React.ReactElement<React.ComponentProps<"img">>
-        | React.ReactElement<React.ComponentProps<"svg">>;
-    /**
-     * Decorate the popover with a full-bleed illustration. It cannot be used at
-     * the same time with icon.
-     */
-    image?:
-        | React.ReactElement<React.ComponentProps<"img">>
-        | React.ReactElement<React.ComponentProps<"svg">>;
-    /**
-     * When true, changes the popover dialog background to blue; otherwise, the
-     * popover dialog background is not modified. It can be used only with
-     * Text-only popovers. It cannot be used with icon or image.
-     */
-    emphasized?: boolean;
 };
 
+type Props =
+    | (CommonProps & {
+          /**
+           * Decorate the popover with an illustrated icon. It cannot be used at the
+           * same time with image.
+           */
+          icon?:
+              | string
+              | React.ReactElement<React.ComponentProps<"img">>
+              | React.ReactElement<React.ComponentProps<"svg">>;
+          /**
+           * Decorate the popover with a full-bleed illustration. It cannot be used at
+           * the same time with icon.
+           */
+          image?:
+              | React.ReactElement<React.ComponentProps<"img">>
+              | React.ReactElement<React.ComponentProps<"svg">>;
+
+          emphasized?: never;
+      })
+    | (CommonProps & {
+          /**
+           * When true, changes the popover dialog background to blue; otherwise, the
+           * popover dialog background is not modified. It can be used only with
+           * Text-only popovers. It cannot be used with icon or image.
+           */
+          emphasized?: boolean;
+
+          icon?: never;
+          image?: never;
+      });
+
 type DefaultProps = {
     closeButtonVisible: Props["closeButtonVisible"];
 };