@khanacademy/wonder-blocks-form 4.2.2 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.2.2",
+  "version": "4.3.0",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.0.13",
+    "@khanacademy/wonder-blocks-clickable": "^3.1.1",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.2.3",
-    "@khanacademy/wonder-blocks-icon": "^2.0.13",
-    "@khanacademy/wonder-blocks-layout": "^2.0.13",
+    "@khanacademy/wonder-blocks-core": "^5.3.0",
+    "@khanacademy/wonder-blocks-icon": "^2.0.14",
+    "@khanacademy/wonder-blocks-layout": "^2.0.14",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-typography": "^2.0.13"
+    "@khanacademy/wonder-blocks-typography": "^2.1.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

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

@@ -1,4 +1,3 @@
-//@flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
@@ -81,4 +80,59 @@ describe("Checkbox", () => {
         // Assert
         expect(onChangeSpy).toHaveBeenCalled();
     });
+
+    test.each`
+        indeterminateValue | checkedValue
+        ${true}            | ${null}
+        ${false}           | ${true}
+        ${false}           | ${false}
+    `(
+        "sets the indeterminate property to $indeterminateValue when checked is $checkedValue (with ref)",
+        ({indeterminateValue, checkedValue}) => {
+            // Arrange
+            const ref = React.createRef<HTMLInputElement>();
+
+            // Act
+            render(
+                <Checkbox
+                    label="Some label"
+                    description="Some description"
+                    checked={checkedValue}
+                    onChange={() => {}}
+                    ref={ref}
+                />,
+            );
+
+            // Assert
+            expect(ref?.current?.indeterminate).toBe(indeterminateValue);
+        },
+    );
+
+    test.each`
+        indeterminateValue | checkedValue
+        ${true}            | ${null}
+        ${false}           | ${true}
+        ${false}           | ${false}
+    `(
+        "sets the indeterminate property to $indeterminateValue when checked is $checkedValue (innerRef)",
+        ({indeterminateValue, checkedValue}) => {
+            // Arrange
+            render(
+                <Checkbox
+                    label="Some label"
+                    description="Some description"
+                    checked={checkedValue}
+                    onChange={() => {}}
+                />,
+            );
+
+            // Act
+            const inputElement = screen.getByRole(
+                "checkbox",
+            ) as HTMLInputElement;
+
+            // Assert
+            expect(inputElement.indeterminate).toBe(indeterminateValue);
+        },
+    );
 });

package/src/components/checkbox-core.tsx

@@ -39,27 +39,8 @@ const indeterminatePath: IconAsset = {
 /**
  * The internal stateless ☑️ Checkbox
  */
-export default class CheckboxCore extends React.Component<ChoiceCoreProps> {
-    componentDidMount(): void {
-        if (this.props.checked == null && this.inputRef.current != null) {
-            this.inputRef.current.indeterminate = true;
-        }
-    }
-
-    componentDidUpdate(prevProps: Readonly<ChoiceCoreProps>): void {
-        if (this.inputRef.current != null) {
-            this.inputRef.current.indeterminate = this.props.checked == null;
-        }
-    }
-
-    inputRef: React.RefObject<HTMLInputElement> = React.createRef();
-
-    handleChange: () => void = () => {
-        // Empty because change is handled by ClickableBehavior
-        return;
-    };
-
-    render(): React.ReactNode {
+const CheckboxCore = React.forwardRef(
+    (props: ChoiceCoreProps, ref: React.ForwardedRef<HTMLInputElement>) => {
         const {
             checked,
             disabled,
@@ -68,7 +49,21 @@ export default class CheckboxCore extends React.Component<ChoiceCoreProps> {
             id,
             testId,
             ...sharedProps
-        } = this.props;
+        } = props;
+
+        const innerRef = React.useRef<HTMLInputElement>(null);
+
+        React.useEffect(() => {
+            // Keep the indeterminate state in sync with the checked prop
+            if (innerRef.current != null) {
+                innerRef.current.indeterminate = checked == null;
+            }
+        }, [checked, innerRef]);
+
+        const handleChange: () => void = () => {
+            // Empty because change is handled by ClickableBehavior
+            return;
+        };
 
         const stateStyles = _generateStyles(checked, error);
 
@@ -79,10 +74,6 @@ export default class CheckboxCore extends React.Component<ChoiceCoreProps> {
             disabled && sharedStyles.disabled,
         ];
 
-        const props = {
-            "data-test-id": testId,
-        } as const;
-
         const checkboxIcon = (
             <Icon
                 color={disabled ? offBlack32 : white}
@@ -98,7 +89,15 @@ export default class CheckboxCore extends React.Component<ChoiceCoreProps> {
             <React.Fragment>
                 <StyledInput
                     {...sharedProps}
-                    ref={this.inputRef}
+                    ref={(node) => {
+                        // @ts-expect-error: current is not actually read-only
+                        innerRef.current = node;
+                        if (typeof ref === "function") {
+                            ref(node);
+                        } else if (ref != null) {
+                            ref.current = node;
+                        }
+                    }}
                     type="checkbox"
                     aria-checked={ariaChecked}
                     aria-invalid={error}
@@ -108,15 +107,15 @@ export default class CheckboxCore extends React.Component<ChoiceCoreProps> {
                     name={groupName}
                     // Need to specify because this is a controlled React form
                     // component, but we handle the click via ClickableBehavior
-                    onChange={this.handleChange}
+                    onChange={handleChange}
                     style={defaultStyle}
-                    {...props}
+                    data-test-id={testId}
                 />
                 {checked || checked == null ? checkboxIcon : <></>}
             </React.Fragment>
         );
-    }
-}
+    },
+);
 
 const size = 16;
 
@@ -237,3 +236,5 @@ const _generateStyles = (checked: Checked, error: boolean) => {
     styles[styleKey] = StyleSheet.create(newStyles);
     return styles[styleKey];
 };
+
+export default CheckboxCore;

package/src/components/checkbox-group.tsx

@@ -95,38 +95,47 @@ const StyledLegend = addStyle("legend");
  * </CheckboxGroup>
  * ```
  */
-export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
-    handleChange(changedValue: string, originalCheckedState: boolean) {
-        const {onChange, selectedValues} = this.props;
-
-        if (originalCheckedState) {
-            const index = selectedValues.indexOf(changedValue);
-            const updatedSelection = [
-                ...selectedValues.slice(0, index),
-                ...selectedValues.slice(index + 1),
-            ];
-            onChange(updatedSelection);
-        } else {
-            onChange([...selectedValues, changedValue]);
-        }
-    }
-
-    render(): React.ReactNode {
+const CheckboxGroup = React.forwardRef(
+    (
+        props: CheckboxGroupProps,
+        ref: React.ForwardedRef<HTMLFieldSetElement>,
+    ) => {
         const {
             children,
             label,
             description,
             errorMessage,
             groupName,
+            onChange,
             selectedValues,
             style,
             testId,
-        } = this.props;
+        } = props;
+
+        const handleChange = (
+            changedValue: string,
+            originalCheckedState: boolean,
+        ) => {
+            if (originalCheckedState) {
+                const index = selectedValues.indexOf(changedValue);
+                const updatedSelection = [
+                    ...selectedValues.slice(0, index),
+                    ...selectedValues.slice(index + 1),
+                ];
+                onChange(updatedSelection);
+            } else {
+                onChange([...selectedValues, changedValue]);
+            }
+        };
 
         const allChildren = React.Children.toArray(children).filter(Boolean);
 
         return (
-            <StyledFieldset data-test-id={testId} style={styles.fieldset}>
+            <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 && (
@@ -159,7 +168,7 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
                             groupName: groupName,
                             id: `${groupName}-${value}`,
                             key: value,
-                            onChange: () => this.handleChange(value, checked),
+                            onChange: () => handleChange(value, checked),
                             style: [index > 0 && styles.defaultLineGap, style],
                             variant: "checkbox",
                         });
@@ -167,5 +176,7 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
                 </View>
             </StyledFieldset>
         );
-    }
-}
+    },
+);
+
+export default CheckboxGroup;

package/src/components/checkbox.tsx

@@ -14,11 +14,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.
@@ -58,11 +58,6 @@ type ChoiceComponentProps = AriaProps & {
     groupName?: string;
 };
 
-type DefaultProps = {
-    disabled: ChoiceComponentProps["disabled"];
-    error: ChoiceComponentProps["error"];
-};
-
 /**
  * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
  * label and description props.
@@ -84,13 +79,23 @@ type DefaultProps = {
  * <Checkbox checked={checked} onChange={setChecked} />
  * ```
  */
-export default class Checkbox extends React.Component<ChoiceComponentProps> {
-    static defaultProps: DefaultProps = {
-        disabled: false,
-        error: false,
-    };
+const Checkbox = React.forwardRef(
+    (
+        props: ChoiceComponentProps,
+        ref: React.ForwardedRef<HTMLInputElement>,
+    ) => {
+        const {disabled = false, error = false} = props;
+
+        return (
+            <ChoiceInternal
+                {...props}
+                variant="checkbox"
+                disabled={disabled}
+                error={error}
+                ref={ref}
+            />
+        );
+    },
+);
 
-    render(): React.ReactNode {
-        return <ChoiceInternal variant="checkbox" {...this.props} />;
-    }
-}
+export default Checkbox;

package/src/components/choice-internal.tsx

@@ -14,9 +14,9 @@ type Props = AriaProps & {
     /** Whether this choice is checked. */
     checked: boolean | null | undefined;
     /** 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) => unknown;
     /**
@@ -48,11 +48,6 @@ type Props = AriaProps & {
     variant: "radio" | "checkbox";
 };
 
-type DefaultProps = {
-    disabled: Props["disabled"];
-    error: Props["error"];
-};
-
 /**
  * This is a potentially labeled 🔘 or ☑️ item. This is an internal component
  * that's wrapped by Checkbox and Radio. Choice is a wrapper for Checkbox and
@@ -60,60 +55,61 @@ type DefaultProps = {
  * and RadioGroup. This design allows for more explicit prop typing. For
  * example, we can make onChange a required prop on Checkbox but not on Choice
  * (because for Choice, that prop would be auto-populated by CheckboxGroup).
- */ export default class ChoiceInternal extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        disabled: false,
-        error: false,
-    };
-
-    handleClick: () => void = () => {
-        const {checked, onChange, variant} = this.props;
-        // Radio buttons cannot be unchecked
-        if (variant === "radio" && checked) {
-            return;
-        }
-        onChange(!checked);
-    };
-
-    getChoiceCoreComponent(): typeof RadioCore | typeof CheckboxCore {
-        if (this.props.variant === "radio") {
-            return RadioCore;
-        } else {
-            return CheckboxCore;
-        }
-    }
-    getLabel(id: string): React.ReactNode {
-        const {disabled, label} = this.props;
-        return (
-            <LabelMedium
-                style={[styles.label, disabled && styles.disabledLabel]}
-            >
-                <label htmlFor={id}>{label}</label>
-            </LabelMedium>
-        );
-    }
-    getDescription(id?: string): React.ReactNode {
-        const {description} = this.props;
-        return (
-            <LabelSmall style={styles.description} id={id}>
-                {description}
-            </LabelSmall>
-        );
-    }
-    render(): React.ReactNode {
+ */ const ChoiceInternal = React.forwardRef(
+    (props: Props, ref: React.ForwardedRef<HTMLInputElement>) => {
         const {
-            label,
+            checked,
             description,
+            disabled = false,
+            error = false,
             id,
+            label,
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             onChange,
             style,
             className,
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             variant,
-            ...coreProps
-        } = this.props;
-        const ChoiceCore = this.getChoiceCoreComponent();
+            // ...coreProps
+        } = props;
+
+        const handleClick: () => void = () => {
+            // Radio buttons cannot be unchecked
+            if (variant === "radio" && checked) {
+                return;
+            }
+            onChange(!checked);
+        };
+
+        const getChoiceCoreComponent = ():
+            | typeof RadioCore
+            | typeof CheckboxCore => {
+            if (variant === "radio") {
+                return RadioCore;
+            } else {
+                return CheckboxCore;
+            }
+        };
+
+        const getLabel = (id: string): React.ReactNode => {
+            return (
+                <LabelMedium
+                    style={[styles.label, disabled && styles.disabledLabel]}
+                >
+                    <label htmlFor={id}>{label}</label>
+                </LabelMedium>
+            );
+        };
+
+        const getDescription = (id?: string): React.ReactNode => {
+            return (
+                <LabelSmall style={styles.description} id={id}>
+                    {description}
+                </LabelSmall>
+            );
+        };
+
+        const ChoiceCore = getChoiceCoreComponent();
 
         return (
             <UniqueIDProvider mockOnFirstRender={true} scope="choice">
@@ -142,22 +138,26 @@ type DefaultProps = {
                                 tabIndex={-1}
                             >
                                 <ChoiceCore
-                                    {...coreProps}
+                                    {...props}
                                     id={uniqueId}
                                     aria-describedby={descriptionId}
-                                    onClick={this.handleClick}
+                                    onClick={handleClick}
+                                    disabled={disabled}
+                                    error={error}
+                                    ref={ref}
                                 />
                                 <Strut size={Spacing.xSmall_8} />
-                                {label && this.getLabel(uniqueId)}
+                                {label && getLabel(uniqueId)}
                             </View>
-                            {description && this.getDescription(descriptionId)}
+                            {description && getDescription(descriptionId)}
                         </View>
                     );
                 }}
             </UniqueIDProvider>
         );
-    }
-}
+    },
+);
+
 const styles = StyleSheet.create({
     wrapper: {
         flexDirection: "row",
@@ -181,3 +181,5 @@ const styles = StyleSheet.create({
         color: Color.offBlack64,
     },
 });
+
+export default ChoiceInternal;

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,40 @@ type DefaultProps = {
  * </RadioGroup>
  * ```
  */
-export default class Choice extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        checked: false,
-        disabled: false,
-        onChange: () => {},
-    };
+const Choice = React.forwardRef(
+    (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;
+
+        const getChoiceComponent = (
+            variant?: string | null,
+        ): typeof Radio | typeof Checkbox => {
+            if (variant === "checkbox") {
+                return Checkbox;
+            } else {
+                return Radio;
+            }
+        };
+
+        const ChoiceComponent = getChoiceComponent(variant);
+        return (
+            <ChoiceComponent
+                {...remainingProps}
+                checked={checked}
+                disabled={disabled}
+                onChange={onChange}
+                ref={ref}
+            />
+        );
+    },
+);
 
-    getChoiceComponent(
-        variant?: string | null,
-    ): 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} />;
-    }
-}
+export default Choice;

package/src/components/radio-core.tsx

@@ -12,13 +12,13 @@ const StyledInput = addStyle("input");
 
 /**
  * The internal stateless 🔘 Radio button
- */ export default class RadioCore extends React.Component<ChoiceCoreProps> {
-    handleChange: () => void = () => {
-        // Empty because change is handled by ClickableBehavior
-        return;
-    };
+ */ const RadioCore = React.forwardRef(
+    (props: ChoiceCoreProps, ref: React.ForwardedRef<HTMLInputElement>) => {
+        const handleChange = () => {
+            // Empty because change is handled by ClickableBehavior
+            return;
+        };
 
-    render(): React.ReactNode {
         const {
             checked,
             disabled,
@@ -27,7 +27,7 @@ const StyledInput = addStyle("input");
             id,
             testId,
             ...sharedProps
-        } = this.props;
+        } = props;
 
         const stateStyles = _generateStyles(checked, error);
         const defaultStyle = [
@@ -36,9 +36,7 @@ const StyledInput = addStyle("input");
             !disabled && stateStyles.default,
             disabled && sharedStyles.disabled,
         ];
-        const props = {
-            "data-test-id": testId,
-        } as const;
+
         return (
             <React.Fragment>
                 <StyledInput
@@ -51,15 +49,17 @@ const StyledInput = addStyle("input");
                     name={groupName}
                     // Need to specify because this is a controlled React form
                     // component, but we handle the click via ClickableBehavior
-                    onChange={this.handleChange}
+                    onChange={handleChange}
                     style={defaultStyle}
-                    {...props}
+                    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 +175,5 @@ const _generateStyles = (checked: Checked, error: boolean) => {
     styles[styleKey] = StyleSheet.create(newStyles);
     return styles[styleKey];
 };
+
+export default RadioCore;