@khanacademy/wonder-blocks-form 4.2.3 → 4.3.1

package/src/components/choice.tsx

@@ -12,7 +12,7 @@ type Props = AriaProps & {
     /** User-defined. Should be distinct for each item in the group. */
     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;
     /** User-defined. Optional additional styling. */
@@ -21,7 +21,7 @@ type Props = AriaProps & {
      * 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).
@@ -43,7 +43,7 @@ type Props = AriaProps & {
      * Auto-populated by parent. Returns the new checked state of the component.
      * @ignore
      */
-    onChange: (newCheckedState: boolean) => unknown;
+    onChange?: (newCheckedState: boolean) => unknown;
     /**
      * Auto-populated by parent.
      * @ignore
@@ -51,12 +51,6 @@ type Props = AriaProps & {
     variant?: "radio" | "checkbox";
 };
 
-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
  * CheckboxGroup and RadioGroup because many of its props are auto-populated
@@ -123,27 +117,41 @@ type DefaultProps = {
  * </RadioGroup>
  * ```
  */
-export default class Choice extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        checked: false,
-        disabled: false,
-        onChange: () => {},
-    };
+const Choice = React.forwardRef(function Choice(
+    props: Props,
+    ref: React.ForwardedRef<HTMLInputElement>,
+) {
+    const {
+        checked = false,
+        disabled = false,
+        onChange = () => {},
+        // we don't need this going into the ChoiceComponent
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        value,
+        variant,
+        ...remainingProps
+    } = props;
 
-    getChoiceComponent(
+    const getChoiceComponent = (
         variant?: string | null,
-    ): typeof Radio | typeof Checkbox {
+    ): typeof Radio | typeof Checkbox => {
         if (variant === "checkbox") {
             return Checkbox;
         } else {
             return Radio;
         }
-    }
-    render(): React.ReactNode {
-        // we don't need this going into the ChoiceComponent
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const {value, variant, ...remainingProps} = this.props;
-        const ChoiceComponent = this.getChoiceComponent(variant);
-        return <ChoiceComponent {...remainingProps} />;
-    }
-}
+    };
+
+    const ChoiceComponent = getChoiceComponent(variant);
+    return (
+        <ChoiceComponent
+            {...remainingProps}
+            checked={checked}
+            disabled={disabled}
+            onChange={onChange}
+            ref={ref}
+        />
+    );
+});
+
+export default Choice;

package/src/components/radio-core.tsx

@@ -12,54 +12,48 @@ const StyledInput = addStyle("input");
 
 /**
  * The internal stateless 🔘 Radio button
- */ export default class RadioCore extends React.Component<ChoiceCoreProps> {
-    handleChange: () => void = () => {
+ */ const RadioCore = React.forwardRef(function RadioCore(
+    props: ChoiceCoreProps,
+    ref: React.ForwardedRef<HTMLInputElement>,
+) {
+    const handleChange = () => {
         // Empty because change is handled by ClickableBehavior
         return;
     };
 
-    render(): React.ReactNode {
-        const {
-            checked,
-            disabled,
-            error,
-            groupName,
-            id,
-            testId,
-            ...sharedProps
-        } = this.props;
-
-        const stateStyles = _generateStyles(checked, error);
-        const defaultStyle = [
-            sharedStyles.inputReset,
-            sharedStyles.default,
-            !disabled && stateStyles.default,
-            disabled && sharedStyles.disabled,
-        ];
-        const props = {
-            "data-test-id": testId,
-        } as const;
-        return (
-            <React.Fragment>
-                <StyledInput
-                    {...sharedProps}
-                    type="radio"
-                    aria-invalid={error}
-                    checked={checked ?? undefined}
-                    disabled={disabled}
-                    id={id}
-                    name={groupName}
-                    // Need to specify because this is a controlled React form
-                    // component, but we handle the click via ClickableBehavior
-                    onChange={this.handleChange}
-                    style={defaultStyle}
-                    {...props}
-                />
-                {disabled && checked && <span style={disabledChecked} />}
-            </React.Fragment>
-        );
-    }
-}
+    const {checked, disabled, error, groupName, id, testId, ...sharedProps} =
+        props;
+
+    const stateStyles = _generateStyles(checked, error);
+    const defaultStyle = [
+        sharedStyles.inputReset,
+        sharedStyles.default,
+        !disabled && stateStyles.default,
+        disabled && sharedStyles.disabled,
+    ];
+
+    return (
+        <React.Fragment>
+            <StyledInput
+                {...sharedProps}
+                type="radio"
+                aria-invalid={error}
+                checked={checked ?? undefined}
+                disabled={disabled}
+                id={id}
+                name={groupName}
+                // Need to specify because this is a controlled React form
+                // component, but we handle the click via ClickableBehavior
+                onChange={handleChange}
+                style={defaultStyle}
+                data-test-id={testId}
+                ref={ref}
+            />
+            {disabled && checked && <span style={disabledChecked} />}
+        </React.Fragment>
+    );
+});
+
 const size = 16; // circle with a different color. Here, we add that center circle. // If the checkbox is disabled and selected, it has a border but also an inner
 const disabledChecked = {
     position: "absolute",
@@ -175,3 +169,5 @@ const _generateStyles = (checked: Checked, error: boolean) => {
     styles[styleKey] = StyleSheet.create(newStyles);
     return styles[styleKey];
 };
+
+export default RadioCore;

package/src/components/radio-group.tsx

@@ -96,66 +96,64 @@ const StyledLegend = addStyle("legend");
  * </RadioGroup>
  * ```
  */
-export default class RadioGroup extends React.Component<RadioGroupProps> {
-    handleChange(changedValue: string) {
-        this.props.onChange(changedValue);
-    }
+const RadioGroup = React.forwardRef(function RadioGroup(
+    props: RadioGroupProps,
+    ref: React.ForwardedRef<HTMLFieldSetElement>,
+) {
+    const {
+        children,
+        label,
+        description,
+        errorMessage,
+        groupName,
+        onChange,
+        selectedValue,
+        style,
+        testId,
+    } = props;
 
-    render(): React.ReactNode {
-        const {
-            children,
-            label,
-            description,
-            errorMessage,
-            groupName,
-            selectedValue,
-            style,
-            testId,
-        } = this.props;
+    const allChildren = React.Children.toArray(children).filter(Boolean);
 
-        const allChildren = React.Children.toArray(children).filter(Boolean);
+    return (
+        <StyledFieldset data-test-id={testId} style={styles.fieldset} ref={ref}>
+            {/* We have a View here because fieldset cannot be used with flexbox*/}
+            <View style={style}>
+                {label && (
+                    <StyledLegend style={styles.legend}>
+                        <LabelMedium>{label}</LabelMedium>
+                    </StyledLegend>
+                )}
+                {description && (
+                    <LabelSmall style={styles.description}>
+                        {description}
+                    </LabelSmall>
+                )}
+                {errorMessage && (
+                    <LabelSmall style={styles.error}>{errorMessage}</LabelSmall>
+                )}
+                {(label || description || errorMessage) && (
+                    <Strut size={Spacing.small_12} />
+                )}
 
-        return (
-            <StyledFieldset data-test-id={testId} style={styles.fieldset}>
-                {/* We have a View here because fieldset cannot be used with flexbox*/}
-                <View style={style}>
-                    {label && (
-                        <StyledLegend style={styles.legend}>
-                            <LabelMedium>{label}</LabelMedium>
-                        </StyledLegend>
-                    )}
-                    {description && (
-                        <LabelSmall style={styles.description}>
-                            {description}
-                        </LabelSmall>
-                    )}
-                    {errorMessage && (
-                        <LabelSmall style={styles.error}>
-                            {errorMessage}
-                        </LabelSmall>
-                    )}
-                    {(label || description || errorMessage) && (
-                        <Strut size={Spacing.small_12} />
-                    )}
+                {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,
+                        groupName: groupName,
+                        id: `${groupName}-${value}`,
+                        key: value,
+                        onChange: () => onChange(value),
+                        style: [index > 0 && styles.defaultLineGap, style],
+                        variant: "radio",
+                    });
+                })}
+            </View>
+        </StyledFieldset>
+    );
+});
 
-                    {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,
-                            groupName: groupName,
-                            id: `${groupName}-${value}`,
-                            key: value,
-                            onChange: () => this.handleChange(value),
-                            style: [index > 0 && styles.defaultLineGap, style],
-                            variant: "radio",
-                        });
-                    })}
-                </View>
-            </StyledFieldset>
-        );
-    }
-}
+export default RadioGroup;

package/src/components/radio.tsx

@@ -12,11 +12,11 @@ type ChoiceComponentProps = AriaProps & {
     /**
      * 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.
@@ -56,24 +56,27 @@ type ChoiceComponentProps = AriaProps & {
     groupName?: string;
 };
 
-type DefaultProps = {
-    disabled: ChoiceComponentProps["disabled"];
-    error: ChoiceComponentProps["error"];
-};
-
 /**
  * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
  * optionally take label and description props.
  *
  * This component should not really be used by itself because radio buttons are
  * often grouped together. See RadioGroup.
- */ export default class Radio extends React.Component<ChoiceComponentProps> {
-    static defaultProps: DefaultProps = {
-        disabled: false,
-        error: false,
-    };
+ */ const Radio = React.forwardRef(function Radio(
+    props: ChoiceComponentProps,
+    ref: React.ForwardedRef<HTMLInputElement>,
+) {
+    const {disabled = false, error = false, ...otherProps} = props;
+
+    return (
+        <ChoiceInternal
+            {...otherProps}
+            variant="radio"
+            disabled={disabled}
+            error={error}
+            ref={ref}
+        />
+    );
+});
 
-    render(): React.ReactNode {
-        return <ChoiceInternal variant="radio" {...this.props} />;
-    }
-}
+export default Radio;

package/src/util/types.ts

@@ -46,7 +46,7 @@ export type ChoiceComponentProps = ChoiceCoreProps & {
 
 export type SharedGroupProps = {
     /** Children should be Choice components. */
-    children: Choice;
+    children: typeof Choice;
     /** Group name for this checkbox or radio group. Should be unique for all
      * such groups displayed on a page. */
     groupName: string;