@khanacademy/wonder-blocks-form 3.1.11 → 3.1.13

package/dist/index.js.flow

@@ -1,2 +1,21 @@
-// @flow
-export * from "../src/index";
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import Checkbox from "./components/checkbox";
+import Choice from "./components/choice";
+import CheckboxGroup from "./components/checkbox-group";
+import RadioGroup from "./components/radio-group";
+import TextField from "./components/text-field";
+import LabeledTextField from "./components/labeled-text-field";
+declare export {
+  Checkbox,
+  Choice,
+  CheckboxGroup,
+  RadioGroup,
+  TextField,
+  LabeledTextField,
+};

package/dist/util/types.d.ts

@@ -0,0 +1,62 @@
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import Choice from "../components/choice";
+export type ChoiceCoreProps = AriaProps & {
+    /** Whether this component is checked */
+    checked: boolean;
+    /** Whether this component is disabled */
+    disabled: boolean;
+    /** Whether this component should show an error state */
+    error: boolean;
+    /** Name for the checkbox or radio button group */
+    groupName?: string;
+    /** Unique identifier attached to the HTML input element. If used, need to
+     * guarantee that the ID is unique within everything rendered on a page.
+     * Used to match <label> with <input> elements for screenreaders. */
+    id?: string;
+    /** Optional test ID for e2e testing */
+    testId?: string;
+};
+export type ChoiceComponentProps = ChoiceCoreProps & {
+    /** Callback when this component is selected. The newCheckedState is the
+     * new checked state of the component. */
+    onChange: (newCheckedState: boolean) => unknown;
+    /** Optional label for the field. */
+    label?: string;
+    /** Optional description for the field. */
+    description?: string;
+    /** Ignored because only applicable to Choice components in a group. */
+    value?: string;
+    /** Optional styling for the container. Does not style the component. */
+    style?: StyleType;
+};
+export type SharedGroupProps = {
+    /** Children should be Choice components. */
+    children: Choice;
+    /** Group name for this checkbox or radio group. Should be unique for all
+     * such groups displayed on a page. */
+    groupName: string;
+    /** Optional label for the group. This label is optional to allow for
+     * greater flexibility in implementing checkbox and radio groups. */
+    label?: string;
+    /** Optional description for the group. */
+    description?: string;
+    /** Optional error message. If supplied, the group will be displayed in an
+     * error state, along with this error message. If no error state is desired,
+     * simply do not supply this prop, or pass along null. */
+    errorMessage?: string;
+    /** Custom styling for this group of checkboxes. */
+    style?: StyleType;
+};
+export type CheckboxGroupProps = {
+    /** Callback for when selection of the group has changed. Passes the newly
+     * selected values. */
+    onChange: (selectedValues: Array<string>) => unknown;
+    /** An array of the values of the selected values in this checkbox group. */
+    selectedValues: Array<string>;
+};
+export type RadioGroupProps = {
+    /** Callback for when the selected value of the radio group has changed. */
+    onChange: (selectedValue: string) => unknown;
+    /** Value of the selected radio item. */
+    selectedValue: string;
+};

package/dist/util/types.js.flow

@@ -0,0 +1,138 @@
+/**
+ * Flowtype definitions for types
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import Choice from "../components/choice";
+export type ChoiceCoreProps = {
+  ...AriaProps,
+  ...{
+    /**
+     * Whether this component is checked
+     */
+    checked: boolean,
+
+    /**
+     * Whether this component is disabled
+     */
+    disabled: boolean,
+
+    /**
+     * Whether this component should show an error state
+     */
+    error: boolean,
+
+    /**
+     * Name for the checkbox or radio button group
+     */
+    groupName?: string,
+
+    /**
+     * Unique identifier attached to the HTML input element. If used, need to
+     * guarantee that the ID is unique within everything rendered on a page.
+     * Used to match <label> with <input> elements for screenreaders.
+     */
+    id?: string,
+
+    /**
+     * Optional test ID for e2e testing
+     */
+    testId?: string,
+    ...
+  },
+};
+export type ChoiceComponentProps = {
+  ...ChoiceCoreProps,
+  ...{
+    /**
+     * Callback when this component is selected. The newCheckedState is the
+     * new checked state of the component.
+     */
+    onChange: (newCheckedState: boolean) => mixed,
+
+    /**
+     * Optional label for the field.
+     */
+    label?: string,
+
+    /**
+     * Optional description for the field.
+     */
+    description?: string,
+
+    /**
+     * Ignored because only applicable to Choice components in a group.
+     */
+    value?: string,
+
+    /**
+     * Optional styling for the container. Does not style the component.
+     */
+    style?: StyleType,
+    ...
+  },
+};
+export type SharedGroupProps = {
+  /**
+   * Children should be Choice components.
+   */
+  children: Choice,
+
+  /**
+   * Group name for this checkbox or radio group. Should be unique for all
+   * such groups displayed on a page.
+   */
+  groupName: string,
+
+  /**
+   * Optional label for the group. This label is optional to allow for
+   * greater flexibility in implementing checkbox and radio groups.
+   */
+  label?: string,
+
+  /**
+   * Optional description for the group.
+   */
+  description?: string,
+
+  /**
+   * Optional error message. If supplied, the group will be displayed in an
+   * error state, along with this error message. If no error state is desired,
+   * simply do not supply this prop, or pass along null.
+   */
+  errorMessage?: string,
+
+  /**
+   * Custom styling for this group of checkboxes.
+   */
+  style?: StyleType,
+  ...
+};
+export type CheckboxGroupProps = {
+  /**
+   * Callback for when selection of the group has changed. Passes the newly
+   * selected values.
+   */
+  onChange: (selectedValues: Array<string>) => mixed,
+
+  /**
+   * An array of the values of the selected values in this checkbox group.
+   */
+  selectedValues: Array<string>,
+  ...
+};
+export type RadioGroupProps = {
+  /**
+   * Callback for when the selected value of the radio group has changed.
+   */
+  onChange: (selectedValue: string) => mixed,
+
+  /**
+   * Value of the selected radio item.
+   */
+  selectedValue: string,
+  ...
+};

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "3.1.11",
+  "version": "3.1.13",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
-  "source": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -16,19 +16,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.5",
-    "@khanacademy/wonder-blocks-color": "^1.2.1",
-    "@khanacademy/wonder-blocks-core": "^4.7.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.37",
-    "@khanacademy/wonder-blocks-layout": "^1.4.16",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.38"
+    "@khanacademy/wonder-blocks-clickable": "^2.4.7",
+    "@khanacademy/wonder-blocks-color": "^1.2.2",
+    "@khanacademy/wonder-blocks-core": "^4.9.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.39",
+    "@khanacademy/wonder-blocks-layout": "^1.4.18",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.6",
+    "@khanacademy/wonder-blocks-typography": "^1.1.40"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.7.1"
+    "wb-dev-build-settings": "^0.7.3"
   }
 }

package/src/__tests__/{custom-snapshot.test.js → custom-snapshot.test.tsx}

@@ -1,6 +1,5 @@
-// @flow
-import React from "react";
-import renderer from "react-test-renderer";
+import * as React from "react";
+import * as renderer from "react-test-renderer";
 
 import CheckboxCore from "../components/checkbox-core";
 import RadioCore from "../components/radio-core";
@@ -10,9 +9,9 @@ const clickableStates = ["default", "hovered", "pressed"];
 const checkedStates = [false, true];
 
 describe("CheckboxCore", () => {
-    states.forEach((state) => {
-        clickableStates.forEach((clickableState) => {
-            checkedStates.forEach((checked) => {
+    states.forEach((state: any) => {
+        clickableStates.forEach((clickableState: any) => {
+            checkedStates.forEach((checked: any) => {
                 test(`type:${state} state:${clickableState} checked:${String(
                     checked,
                 )}`, () => {
@@ -38,9 +37,9 @@ describe("CheckboxCore", () => {
 });
 
 describe("RadioCore", () => {
-    states.forEach((state) => {
-        clickableStates.forEach((clickableState) => {
-            checkedStates.forEach((checked) => {
+    states.forEach((state: any) => {
+        clickableStates.forEach((clickableState: any) => {
+            checkedStates.forEach((checked: any) => {
                 test(`type:${state} state:${clickableState} checked:${String(
                     checked,
                 )}`, () => {

package/src/components/__tests__/{checkbox-group.test.js → checkbox-group.test.tsx}

@@ -1,4 +1,3 @@
-//@flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -8,12 +7,12 @@ import Choice from "../choice";
 
 describe("CheckboxGroup", () => {
     describe("behavior", () => {
-        const TestComponent = ({errorMessage}: {|errorMessage?: string|}) => {
+        const TestComponent = ({errorMessage}: {errorMessage?: string}) => {
             const [selectedValues, setSelectedValue] = React.useState([
                 "a",
                 "b",
             ]);
-            const handleChange = (selectedValues) => {
+            const handleChange = (selectedValues: any) => {
                 setSelectedValue(selectedValues);
             };
             return (
@@ -144,9 +143,10 @@ describe("CheckboxGroup", () => {
                     selectedValues={[]}
                 >
                     <Choice label="a" value="a" aria-labelledby="test-a" />
-                    {false && (
+                    {/* eslint-disable-next-line no-constant-condition */}
+                    {false ? (
                         <Choice label="b" value="b" aria-labelledby="test-b" />
-                    )}
+                    ) : null}
                     <Choice label="c" value="c" aria-labelledby="test-c" />
                     {undefined}
                     {null}

package/src/components/__tests__/{field-heading.test.js → field-heading.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import {StyleSheet} from "aphrodite";

package/src/components/__tests__/{labeled-text-field.test.js → labeled-text-field.test.tsx}

@@ -1,4 +1,3 @@
-//@flow
 import * as React from "react";
 import {render, screen, fireEvent} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -219,7 +218,7 @@ describe("LabeledTextField", () => {
 
     it("validate prop is called when input changes", () => {
         // Arrange
-        const validate = jest.fn((value: string): ?string => {});
+        const validate = jest.fn((value: string): any => {});
         render(
             <LabeledTextField
                 label="Label"
@@ -243,10 +242,10 @@ describe("LabeledTextField", () => {
 
     it("onValidate prop is called on new validated input", () => {
         // Arrange
-        const handleValidate = jest.fn((errorMessage: ?string) => {});
+        const handleValidate = jest.fn((errorMessage?: string | null) => {});
         const errorMessage = "Password must be at least 8 characters long";
 
-        const validate = (value: string): ?string => {
+        const validate = (value: string): string | null | undefined => {
             if (value.length < 8) {
                 return errorMessage;
             }
@@ -293,7 +292,7 @@ describe("LabeledTextField", () => {
     it("onKeyDown prop is called on keyboard keypress", () => {
         // Arrange
         const handleKeyDown = jest.fn(
-            (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+            (event: React.KeyboardEvent<HTMLInputElement>) => {
                 return event.key;
             },
         );

package/src/components/__tests__/{radio-group.test.js → radio-group.test.tsx}

@@ -1,4 +1,3 @@
-//@flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -10,12 +9,12 @@ describe("RadioGroup", () => {
     const TestComponent = ({
         errorMessage,
         onChange,
-    }: {|
-        errorMessage?: string,
-        onChange?: () => mixed,
-    |}) => {
+    }: {
+        errorMessage?: string;
+        onChange?: () => unknown;
+    }) => {
         const [selectedValue, setSelectedValue] = React.useState("a");
-        const handleChange = (selectedValue) => {
+        const handleChange = (selectedValue: any) => {
             setSelectedValue(selectedValue);
             onChange?.();
         };
@@ -164,9 +163,10 @@ describe("RadioGroup", () => {
                     selectedValue={"a"}
                 >
                     <Choice label="a" value="a" aria-labelledby="test-a" />
-                    {false && (
+                    {/* eslint-disable-next-line no-constant-condition */}
+                    {false ? (
                         <Choice label="b" value="b" aria-labelledby="test-b" />
-                    )}
+                    ) : null}
                     <Choice label="c" value="c" aria-labelledby="test-c" />
                     {undefined}
                     {null}

package/src/components/__tests__/{text-field.test.js → text-field.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {fireEvent, render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -78,7 +77,7 @@ describe("TextField", () => {
 
     it("id prop is passed to the input element", () => {
         // Arrange
-        const id: string = "tf-1";
+        const id = "tf-1";
 
         // Act
         render(<TextField id={id} value="" onChange={() => {}} />);
@@ -155,12 +154,13 @@ describe("TextField", () => {
 
     it("validate is called when value changes", () => {
         // Arrange
-        const handleValidate = jest.fn((value: string): ?string => {});
+        const handleValidate = jest.fn((value: string) => {});
 
         render(
             <TextField
                 id={"tf-1"}
                 value="Text"
+                // @ts-expect-error: handleValidate is not the correc type
                 validate={handleValidate}
                 onChange={() => {}}
             />,
@@ -177,11 +177,13 @@ describe("TextField", () => {
 
     it("validate is given a valid input", () => {
         // Arrange
-        const handleValidate = jest.fn((value: string): ?string => {
-            if (value.length < 8) {
-                return "Value is too short";
-            }
-        });
+        const handleValidate = jest.fn(
+            (value: string): string | null | undefined => {
+                if (value.length < 8) {
+                    return "Value is too short";
+                }
+            },
+        );
 
         render(
             <TextField
@@ -204,11 +206,13 @@ describe("TextField", () => {
     it("validate is given an invalid input", () => {
         // Arrange
         const errorMessage = "Value is too short";
-        const handleValidate = jest.fn((value: string): ?string => {
-            if (value.length < 8) {
-                return errorMessage;
-            }
-        });
+        const handleValidate = jest.fn(
+            (value: string): string | null | undefined => {
+                if (value.length < 8) {
+                    return errorMessage;
+                }
+            },
+        );
 
         render(
             <TextField
@@ -231,8 +235,8 @@ describe("TextField", () => {
     it("onValidate is called after input validate", () => {
         // Arrange
         const errorMessage = "Value is too short";
-        const handleValidate = jest.fn((errorMessage: ?string) => {});
-        const validate = jest.fn((value: string): ?string => {
+        const handleValidate = jest.fn((errorMessage?: string | null) => {});
+        const validate = jest.fn((value: string): string | null | undefined => {
             if (value.length < 8) {
                 return errorMessage;
             }
@@ -260,8 +264,8 @@ describe("TextField", () => {
     it("onValidate is called on input's initial value", () => {
         // Arrange
         const errorMessage = "Value is too short";
-        const handleValidate = jest.fn((errorMessage: ?string) => {});
-        const validate = jest.fn((value: string): ?string => {
+        const handleValidate = jest.fn((errorMessage?: string | null) => {});
+        const validate = jest.fn((value: string): string | null | undefined => {
             if (value.length < 8) {
                 return errorMessage;
             }
@@ -285,7 +289,7 @@ describe("TextField", () => {
     it("onKeyDown is called after keyboard key press", () => {
         // Arrange
         const handleOnKeyDown = jest.fn(
-            (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+            (event: React.KeyboardEvent<HTMLInputElement>) => {
                 return event.key;
             },
         );

package/src/components/{checkbox-core.js → checkbox-core.tsx}

@@ -1,5 +1,3 @@
-// @flow
-
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
@@ -11,13 +9,12 @@ import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
 
 import type {ChoiceCoreProps} from "../util/types";
 
-type Props = {|
-    ...ChoiceCoreProps,
-    hovered: boolean,
-    focused: boolean,
-    pressed: boolean,
-    waiting: boolean,
-|};
+type Props = ChoiceCoreProps & {
+    hovered: boolean;
+    focused: boolean;
+    pressed: boolean;
+    waiting: boolean;
+};
 
 const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = Color;
 
@@ -36,7 +33,7 @@ export default class CheckboxCore extends React.Component<Props> {
         return;
     };
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {
             checked,
             disabled,
@@ -66,7 +63,7 @@ export default class CheckboxCore extends React.Component<Props> {
 
         const props = {
             "data-test-id": testId,
-        };
+        } as const;
 
         return (
             <React.Fragment>
@@ -149,11 +146,11 @@ const colors = {
         base: red,
         active: activeRed,
     },
-};
+} as const;
 
-const styles = {};
+const styles: Record<string, any> = {};
 
-const _generateStyles = (checked, error) => {
+const _generateStyles = (checked: boolean, error: boolean) => {
     // "hash" the parameters
     const styleKey = `${String(checked)}-${String(error)}`;
     if (styles[styleKey]) {
@@ -162,7 +159,7 @@ const _generateStyles = (checked, error) => {
 
     const palette = error ? colors.error : colors.default;
 
-    let newStyles = {};
+    let newStyles: Record<string, any> = {};
     if (checked) {
         newStyles = {
             default: {

package/src/components/{checkbox-group.js → checkbox-group.tsx}

@@ -1,5 +1,3 @@
-// @flow
-
 import * as React from "react";
 
 import {View, addStyle} from "@khanacademy/wonder-blocks-core";
@@ -9,60 +7,57 @@ import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 import styles from "./group-styles";
-import typeof Choice from "./choice";
+import Choice from "./choice";
 
 // Keep synced with CheckboxGroupProps in ../util/types.js
-type CheckboxGroupProps = {|
+type CheckboxGroupProps = {
     /**
      * Children should be Choice components.
      */
-    children: Array<?(React.Element<Choice> | false)>,
-
+    children: Array<
+        | React.ReactElement<React.ComponentProps<typeof Choice>>
+        | false
+        | null
+        | undefined
+    >;
     /**
      * Group name for this checkbox or radio group. Should be unique for all
      * such groups displayed on a page.
      */
-    groupName: string,
-
+    groupName: string;
     /**
      * Optional label for the group. This label is optional to allow for
      * greater flexibility in implementing checkbox and radio groups.
      */
-    label?: React.Node,
-
+    label?: React.ReactNode;
     /**
      * Optional description for the group.
      */
-    description?: React.Node,
-
+    description?: React.ReactNode;
     /**
      * Optional error message. If supplied, the group will be displayed in an
      * error state, along with this error message. If no error state is desired,
      * simply do not supply this prop, or pass along null.
      */
-    errorMessage?: ?string,
-
+    errorMessage?: string | null | undefined;
     /**
      * Custom styling for this group of checkboxes.
      */
-    style?: StyleType,
-
+    style?: StyleType;
     /**
      * Callback for when selection of the group has changed. Passes the newly
      * selected values.
      */
-    onChange: (selectedValues: Array<string>) => mixed,
-
+    onChange: (selectedValues: Array<string>) => unknown;
     /**
      * An array of the values of the selected values in this checkbox group.
      */
-    selectedValues: Array<string>,
-
+    selectedValues: Array<string>;
     /**
      * Test ID used for e2e testing.
      */
-    testId?: string,
-|};
+    testId?: string;
+};
 
 const StyledFieldset = addStyle<"fieldset">("fieldset");
 const StyledLegend = addStyle<"legend">("legend");
@@ -116,7 +111,7 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
         }
     }
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {
             children,
             label,
@@ -154,8 +149,10 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
                     )}
 
                     {allChildren.map((child, index) => {
+                        // @ts-expect-error [FEI-5019] - TS2339 - Property 'props' does not exist on type 'ReactChild | ReactFragment | ReactPortal'.
                         const {style, value} = child.props;
                         const checked = selectedValues.includes(value);
+                        // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                         return React.cloneElement(child, {
                             checked: checked,
                             error: !!errorMessage,