@khanacademy/wonder-blocks-form 3.1.10 → 3.1.12

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";
@@ -8,61 +6,58 @@ import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
-import styles from "./group-styles.js";
-import typeof Choice from "./choice.js";
+import styles from "./group-styles";
+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,

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

@@ -1,79 +1,65 @@
-// @flow
-
 import * as React from "react";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import ChoiceInternal from "./choice-internal.js";
+import ChoiceInternal from "./choice-internal";
 
 // Keep synced with ChoiceComponentProps in ../util/types.js
-type ChoiceComponentProps = {|
-    ...AriaProps,
-
+type ChoiceComponentProps = AriaProps & {
     /**
      * Whether this component is checked
      */
-    checked: boolean,
-
+    checked: boolean;
     /**
      * Whether this component is disabled
      */
-    disabled: boolean,
-
+    disabled: boolean;
     /**
      * Whether this component should show an error state
      */
-    error: boolean,
-
+    error: boolean;
     /**
      * Callback when this component is selected. The newCheckedState is the
      * new checked state of the component.
      */
-    onChange: (newCheckedState: boolean) => mixed,
-
+    onChange: (newCheckedState: boolean) => unknown;
     /**
      * Optional label for the field.
      */
-    label?: React.Node,
-
+    label?: React.ReactNode;
     /**
      * Optional description for the field.
      */
-    description?: React.Node,
-
+    description?: React.ReactNode;
     /**
      * 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,
-
+    id?: string;
     /**
      * Optional styling for the container. Does not style the component.
      */
-    style?: StyleType,
-
+    style?: StyleType;
     /**
      * Adds CSS classes to the Checkbox.
      */
-    className?: string,
-
+    className?: string;
     /**
      * Optional test ID for e2e testing
      */
-    testId?: string,
-
+    testId?: string;
     /**
      * Name for the checkbox or radio button group. Only applicable for group
      * contexts, auto-populated by group components via Choice.
      * @ignore
      */
-    groupName?: string,
-|};
+    groupName?: string;
+};
 
-type DefaultProps = {|
-    disabled: $PropertyType<ChoiceComponentProps, "disabled">,
-    error: $PropertyType<ChoiceComponentProps, "error">,
-|};
+type DefaultProps = {
+    disabled: ChoiceComponentProps["disabled"];
+    error: ChoiceComponentProps["error"];
+};
 
 /**
  * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
@@ -102,7 +88,7 @@ export default class Checkbox extends React.Component<ChoiceComponentProps> {
         error: false,
     };
 
-    render(): React.Node {
+    render(): React.ReactElement {
         return <ChoiceInternal variant="checkbox" {...this.props} />;
     }
 }

package/src/components/{choice-internal.js → choice-internal.tsx}

@@ -1,5 +1,3 @@
-// @flow
-
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
@@ -10,65 +8,52 @@ import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import CheckboxCore from "./checkbox-core.js";
-import RadioCore from "./radio-core.js";
-
-type Props = {|
-    ...AriaProps,
+import CheckboxCore from "./checkbox-core";
+import RadioCore from "./radio-core";
 
+type Props = AriaProps & {
     /** Whether this choice is checked. */
-    checked: boolean,
-
+    checked: boolean;
     /** Whether this choice option is disabled. */
-    disabled: boolean,
-
+    disabled: boolean;
     /** Whether this choice is in error mode. */
-    error: boolean,
-
+    error: boolean;
     /** Returns the new checked state of the component. */
-    onChange: (newCheckedState: boolean) => mixed,
-
+    onChange: (newCheckedState: boolean) => unknown;
     /**
      * Used for accessibility purposes, where the label id should match the
      * input id.
      */
-    id?: string,
-
+    id?: string;
     /**
      * Optional additional styling.
      */
-    style?: StyleType,
-
+    style?: StyleType;
     /**
      * Adds CSS classes to the Button.
      */
-    className?: string,
-
+    className?: string;
     /**
      * Optional id for testing purposes.
      */
-    testId?: string,
-
+    testId?: string;
     /**
      * Label for the field.
      */
-    label?: React.Node,
-
+    label?: React.ReactNode;
     /** Optional description for the field. */
-    description?: React.Node,
-
+    description?: React.ReactNode;
     /** Auto-populated by parent's groupName prop if in a group. */
-    groupName?: string,
-
+    groupName?: string;
     /** Takes either "radio" or "checkbox" value. */
-    variant: "radio" | "checkbox",
-|};
+    variant: "radio" | "checkbox";
+};
 
-type DefaultProps = {|
-    checked: $PropertyType<Props, "checked">,
-    disabled: $PropertyType<Props, "disabled">,
-    error: $PropertyType<Props, "error">,
-|};
+type DefaultProps = {
+    checked: Props["checked"];
+    disabled: Props["disabled"];
+    error: Props["error"];
+};
 
 /**
  * This is a potentially labeled 🔘 or ☑️ item. This is an internal component
@@ -84,7 +69,7 @@ type DefaultProps = {|
         error: false,
     };
 
-    handleLabelClick: (event: SyntheticEvent<>) => void = (event) => {
+    handleLabelClick: (event: React.SyntheticEvent) => void = (event) => {
         // Browsers automatically use the for attribute to select the input,
         // but we use ClickableBehavior to handle this.
         event.preventDefault();
@@ -106,7 +91,7 @@ type DefaultProps = {|
             return CheckboxCore;
         }
     }
-    getLabel(): React.Node {
+    getLabel(): React.ReactNode {
         const {disabled, id, label} = this.props;
         return (
             <LabelMedium
@@ -118,7 +103,7 @@ type DefaultProps = {|
             </LabelMedium>
         );
     }
-    getDescription(id: string | void): React.Node {
+    getDescription(id?: string): React.ReactNode {
         const {description} = this.props;
         return (
             <LabelSmall style={styles.description} id={id}>
@@ -126,11 +111,11 @@ type DefaultProps = {|
             </LabelSmall>
         );
     }
-    render(): React.Node {
+    render(): React.ReactElement {
         const {
             label,
             description,
-            // eslint-disable-next-line no-unused-vars
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             onChange,
             style,
             className,
@@ -147,6 +132,7 @@ type DefaultProps = {|
                         : undefined;
 
                     return (
+                        // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                         <View style={style} className={className}>
                             <ClickableBehavior
                                 disabled={coreProps.disabled}

package/src/components/{choice.js → choice.tsx}

@@ -1,76 +1,61 @@
-// @flow
-
 import * as React from "react";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import Checkbox from "./checkbox.js";
-import Radio from "./radio.js";
-
-type Props = {|
-    ...AriaProps,
+import Checkbox from "./checkbox";
+import Radio from "./radio";
 
+type Props = AriaProps & {
     /** User-defined. Label for the field. */
-    label: React.Node,
-
+    label: React.ReactNode;
     /** User-defined. Optional description for the field. */
-    description?: React.Node,
-
+    description?: React.ReactNode;
     /** User-defined. Should be distinct for each item in the group. */
-    value: string,
-
+    value: string;
     /** User-defined. Whether this choice option is disabled. Default false. */
-    disabled: boolean,
-
+    disabled: boolean;
     /** User-defined. Optional id for testing purposes. */
-    testId?: string,
-
+    testId?: string;
     /** User-defined. Optional additional styling. */
-    style?: StyleType,
-
+    style?: StyleType;
     /**
      * Auto-populated by parent. Whether this choice is checked.
      * @ignore
      */
-    checked: boolean,
-
+    checked: boolean;
     /**
      * Auto-populated by parent. Whether this choice is in error mode (everything
      * in a choice group would be in error mode at the same time).
      * @ignore
      */
-    error?: boolean,
-
+    error?: boolean;
     /**
      * Auto-populated by parent. Used for accessibility purposes, where the label
      * id should match the input id.
      * @ignore
      */
-    id?: string,
-
+    id?: string;
     /**
      * Auto-populated by parent's groupName prop.
      * @ignore
      */
-    groupName?: string,
-
+    groupName?: string;
     /**
      * Auto-populated by parent. Returns the new checked state of the component.
      * @ignore
      */
-    onChange: (newCheckedState: boolean) => mixed,
-
+    onChange: (newCheckedState: boolean) => unknown;
     /**
      * Auto-populated by parent.
      * @ignore
      */
-    variant?: "radio" | "checkbox",
-|};
+    variant?: "radio" | "checkbox";
+};
 
-type DefaultProps = {|
-    checked: $PropertyType<Props, "checked">,
-    disabled: $PropertyType<Props, "disabled">,
-    onChange: $PropertyType<Props, "onChange">,
-|};
+type DefaultProps = {
+    checked: Props["checked"];
+    disabled: Props["disabled"];
+    onChange: Props["onChange"];
+};
 
 /**
  * This is a labeled 🔘 or ☑️ item. Choice is meant to be used as children of
@@ -145,16 +130,18 @@ export default class Choice extends React.Component<Props> {
         onChange: () => {},
     };
 
-    getChoiceComponent(variant: ?string): typeof Radio | typeof Checkbox {
+    getChoiceComponent(
+        variant?: string | null,
+    ): typeof Radio | typeof Checkbox {
         if (variant === "checkbox") {
             return Checkbox;
         } else {
             return Radio;
         }
     }
-    render(): React.Node {
+    render(): React.ReactElement {
         // we don't need this going into the ChoiceComponent
-        // eslint-disable-next-line no-unused-vars
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const {value, variant, ...remainingProps} = this.props;
         const ChoiceComponent = this.getChoiceComponent(variant);
         return <ChoiceComponent {...remainingProps} />;

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

@@ -1,57 +1,49 @@
-// @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import {View, addStyle, type StyleType} from "@khanacademy/wonder-blocks-core";
+import {View, addStyle, StyleType} from "@khanacademy/wonder-blocks-core";
 import Color from "@khanacademy/wonder-blocks-color";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
-type Props = {|
+type Props = {
     /**
      * The form field component.
      */
-    field: React.Node,
-
+    field: React.ReactNode;
     /**
      * The title for the label element.
      */
-    label: React.Node,
-
+    label: React.ReactNode;
     /**
      * The text for the description element.
      */
-    description?: React.Node,
-
+    description?: React.ReactNode;
     /**
      * Whether this field is required to continue.
      */
-    required?: boolean,
-
+    required?: boolean;
     /**
      * The message for the error element.
      */
-    error?: React.Node,
-
+    error?: React.ReactNode;
     /**
      * Custom styles for the field heading container.
      */
-    style?: StyleType,
-
+    style?: StyleType;
     /**
      * A unique id to link the label (and optional error) to the field.
      *
      * The label will assume that the field will have its id formatted as `${id}-field`.
      * The field can assume that the error will have its id formatted as `${id}-error`.
      */
-    id?: string,
-
+    id?: string;
     /**
      * Optional test ID for e2e testing.
      */
-    testId?: string,
-|};
+    testId?: string;
+};
 
 const StyledSpan = addStyle("span");
 
@@ -60,7 +52,7 @@ const StyledSpan = addStyle("span");
  * to present better context and hints to any type of form field component.
  */
 export default class FieldHeading extends React.Component<Props> {
-    renderLabel(): React.Node {
+    renderLabel(): React.ReactNode {
         const {label, id, required, testId} = this.props;
 
         const requiredIcon = (
@@ -75,6 +67,7 @@ export default class FieldHeading extends React.Component<Props> {
                 <LabelMedium
                     style={styles.label}
                     tag="label"
+                    // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                     htmlFor={id && `${id}-field`}
                     testId={testId && `${testId}-label`}
                 >
@@ -86,7 +79,7 @@ export default class FieldHeading extends React.Component<Props> {
         );
     }
 
-    maybeRenderDescription(): ?React.Node {
+    maybeRenderDescription(): React.ReactNode | null | undefined {
         const {description, testId} = this.props;
 
         if (!description) {
@@ -106,7 +99,7 @@ export default class FieldHeading extends React.Component<Props> {
         );
     }
 
-    maybeRenderError(): ?React.Node {
+    maybeRenderError(): React.ReactNode | null | undefined {
         const {error, id, testId} = this.props;
 
         if (!error) {
@@ -128,7 +121,7 @@ export default class FieldHeading extends React.Component<Props> {
         );
     }
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {field, style} = this.props;
 
         return (

package/src/components/{group-styles.js → group-styles.ts}

@@ -1,4 +1,3 @@
-// @flow
 import {StyleSheet} from "aphrodite";
 
 import Color from "@khanacademy/wonder-blocks-color";