@khanacademy/wonder-blocks-form 3.1.11 → 3.1.13

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

@@ -1,45 +1,40 @@
-// @flow
 import * as React from "react";
 
-import {IDProvider, type StyleType} from "@khanacademy/wonder-blocks-core";
+import {IDProvider, StyleType} from "@khanacademy/wonder-blocks-core";
 
 import FieldHeading from "./field-heading";
-import TextField, {type TextFieldType} from "./text-field";
+import TextField, {TextFieldType} from "./text-field";
 
-type WithForwardRef = {|forwardedRef: React.Ref<"input">|};
+type WithForwardRef = {
+    forwardedRef: React.ForwardedRef<HTMLInputElement>;
+};
 
-type Props = {|
+type Props = {
     /**
      * An optional unique identifier for the TextField.
      * If no id is specified, a unique id will be auto-generated.
      */
-    id?: string,
-
+    id?: string;
     /**
      * Determines the type of input. Defaults to text.
      */
-    type: TextFieldType,
-
+    type: TextFieldType;
     /**
      * Provide a label for the TextField.
      */
-    label: React.Node,
-
+    label: React.ReactNode;
     /**
      * Provide a description for the TextField.
      */
-    description?: React.Node,
-
+    description?: React.ReactNode;
     /**
      * The input value.
      */
-    value: string,
-
+    value: string;
     /**
      * Makes a read-only input field that cannot be focused. Defaults to false.
      */
-    disabled: boolean,
-
+    disabled: boolean;
     /**
      * Whether this field is required to to continue, or the error message to
      * render if this field is left blank.
@@ -62,54 +57,44 @@ type Props = {|
      * there is no corresponding message and the default untranlsated message
      * will be used.
      */
-    required?: boolean | string,
-
+    required?: boolean | string;
     /**
      * Identifies the element or elements that describes this text field.
      */
-    ariaDescribedby?: string | Array<string>,
-
+    ariaDescribedby?: string | undefined;
     /**
      * Provide a validation for the input value.
      * Return a string error message or null | void for a valid input.
      */
-    validate?: (value: string) => ?string,
-
+    validate?: (value: string) => string | null | undefined;
     /**
      * Called when the TextField input is validated.
      */
-    onValidate?: (errorMessage: ?string) => mixed,
-
+    onValidate?: (errorMessage?: string | null | undefined) => unknown;
     /**
      * Called when the value has changed.
      */
-    onChange: (newValue: string) => mixed,
-
+    onChange: (newValue: string) => unknown;
     /**
      * Called when a key is pressed.
      */
-    onKeyDown?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
     /**
      * Called when the element has been focused.
      */
-    onFocus?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
-
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
     /**
      * Called when the element has been blurred.
      */
-    onBlur?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
-
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
     /**
      * Provide hints or examples of what to enter.
      */
-    placeholder?: string,
-
+    placeholder?: string;
     /**
      * Change the field’s sub-components to fit a dark background.
      */
-    light: boolean,
-
+    light: boolean;
     /**
      * Custom styles for the container.
      *
@@ -122,46 +107,39 @@ type Props = {|
      * In this case, the container would maintain its width ocuppying
      * unnecessary space when the text field is smaller.
      */
-    style?: StyleType,
-
+    style?: StyleType;
     /**
      * Optional test ID for e2e testing.
      */
-    testId?: string,
-
+    testId?: string;
     /**
      * Specifies if the TextField is read-only.
      */
-    readOnly?: boolean,
-
+    readOnly?: boolean;
     /**
      * Specifies if the TextField allows autocomplete.
      */
-    autoComplete?: string,
-|};
+    autoComplete?: string;
+};
 
-type PropsWithForwardRef = {|
-    ...Props,
-    ...WithForwardRef,
-|};
+type PropsWithForwardRef = Props & WithForwardRef;
 
-type DefaultProps = {|
-    type: $PropertyType<PropsWithForwardRef, "type">,
-    disabled: $PropertyType<PropsWithForwardRef, "disabled">,
-    light: $PropertyType<PropsWithForwardRef, "light">,
-|};
+type DefaultProps = {
+    type: PropsWithForwardRef["type"];
+    disabled: PropsWithForwardRef["disabled"];
+    light: PropsWithForwardRef["light"];
+};
 
-type State = {|
+type State = {
     /**
      * Displayed when the validation fails.
      */
-    error: ?string,
-
+    error: string | null | undefined;
     /**
      * The user focuses on the textfield.
      */
-    focused: boolean,
-|};
+    focused: boolean;
+};
 
 /**
  * A LabeledTextField is an element used to accept a single line of text
@@ -182,7 +160,9 @@ class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
         };
     }
 
-    handleValidate: (errorMessage: ?string) => mixed = (errorMessage) => {
+    handleValidate: (errorMessage?: string | null | undefined) => unknown = (
+        errorMessage,
+    ) => {
         const {onValidate} = this.props;
         this.setState({error: errorMessage}, () => {
             if (onValidate) {
@@ -191,7 +171,7 @@ class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
         });
     };
 
-    handleFocus: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed = (
+    handleFocus: (event: React.FocusEvent<HTMLInputElement>) => unknown = (
         event,
     ) => {
         const {onFocus} = this.props;
@@ -202,7 +182,7 @@ class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
         });
     };
 
-    handleBlur: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed = (
+    handleBlur: (event: React.FocusEvent<HTMLInputElement>) => unknown = (
         event,
     ) => {
         const {onBlur} = this.props;
@@ -213,7 +193,7 @@ class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
         });
     };
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {
             id,
             type,
@@ -283,9 +263,12 @@ class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
     }
 }
 
-type ExportProps = $Diff<
-    React.ElementConfig<typeof LabeledTextField>,
-    WithForwardRef,
+type ExportProps = Omit<
+    JSX.LibraryManagedAttributes<
+        typeof LabeledTextField,
+        React.ComponentProps<typeof LabeledTextField>
+    >,
+    "forwardedRef"
 >;
 
 /**
@@ -309,6 +292,8 @@ type ExportProps = $Diff<
  * ```
  */
 
-export default (React.forwardRef<ExportProps, HTMLInputElement>(
-    (props, ref) => <LabeledTextField {...props} forwardedRef={ref} />,
-): React.AbstractComponent<ExportProps, HTMLInputElement>);
+export default React.forwardRef<HTMLInputElement, ExportProps>((props, ref) => (
+    <LabeledTextField {...props} forwardedRef={ref} />
+)) as React.ForwardRefExoticComponent<
+    ExportProps & React.RefAttributes<HTMLInputElement>
+>;

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

@@ -1,5 +1,3 @@
-// @flow
-
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
@@ -8,13 +6,12 @@ import {addStyle} from "@khanacademy/wonder-blocks-core";
 
 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;
 
@@ -28,7 +25,7 @@ const StyledInput = addStyle("input");
         return;
     };
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {
             checked,
             disabled,
@@ -55,7 +52,7 @@ const StyledInput = addStyle("input");
         ];
         const props = {
             "data-test-id": testId,
-        };
+        } as const;
         return (
             <React.Fragment>
                 <StyledInput
@@ -86,7 +83,7 @@ const disabledChecked = {
     width: size / 2,
     borderRadius: "50%",
     backgroundColor: offBlack32,
-};
+} as const;
 const sharedStyles = StyleSheet.create({
     // Reset the default styled input element
     inputReset: {
@@ -128,16 +125,16 @@ const colors = {
         base: red,
         active: activeRed,
     },
-};
-const styles = {};
-const _generateStyles = (checked, error) => {
+} as const;
+const styles: Record<string, any> = {};
+const _generateStyles = (checked: boolean, error: boolean) => {
     // "hash" the parameters
     const styleKey = `${String(checked)}-${String(error)}`;
     if (styles[styleKey]) {
         return styles[styleKey];
     }
     const palette = error ? colors.error : colors.default;
-    let newStyles = {};
+    let newStyles: Record<string, any> = {};
     if (checked) {
         newStyles = {
             default: {

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

@@ -1,5 +1,3 @@
-// @flow
-
 import * as React from "react";
 
 import {View, addStyle} from "@khanacademy/wonder-blocks-core";
@@ -9,59 +7,56 @@ 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 RadioGroupProps in ../util/types.js
-type RadioGroupProps = {|
+type RadioGroupProps = {
     /**
      * 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;
     /**
      * Custom styling for this group of checkboxes.
      */
-    style?: StyleType,
-
+    style?: StyleType;
     /**
      * Callback for when the selected value of the radio group has changed.
      */
-    onChange: (selectedValue: string) => mixed,
-
+    onChange: (selectedValue: string) => unknown;
     /**
      * Value of the selected radio item.
      */
-    selectedValue: string,
-
+    selectedValue: string;
     /**
      * Test ID used for e2e testing.
      */
-    testId?: string,
-|};
+    testId?: string;
+};
 
 const StyledFieldset = addStyle<"fieldset">("fieldset");
 const StyledLegend = addStyle<"legend">("legend");
@@ -106,7 +101,7 @@ export default class RadioGroup extends React.Component<RadioGroupProps> {
         this.props.onChange(changedValue);
     }
 
-    render(): React.Node {
+    render(): React.ReactElement {
         const {
             children,
             label,
@@ -144,8 +139,10 @@ export default class RadioGroup extends React.Component<RadioGroupProps> {
                     )}
 
                     {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 = selectedValue === value;
+                        // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                         return React.cloneElement(child, {
                             checked: checked,
                             error: !!errorMessage,

package/src/components/{radio.js → radio.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";
 
 // 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 radio button for all your non-AMFM radio button needs. Can
@@ -87,7 +73,7 @@ type DefaultProps = {|
         error: false,
     };
 
-    render(): React.Node {
+    render(): React.ReactElement {
         return <ChoiceInternal variant="radio" {...this.props} />;
     }
 }