@khanacademy/wonder-blocks-form 4.2.3 → 4.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.2.3",
+  "version": "4.3.1",
   "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.1.0",
+    "@khanacademy/wonder-blocks-clickable": "^3.1.2",
     "@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.1",
+    "@khanacademy/wonder-blocks-icon": "^2.0.15",
+    "@khanacademy/wonder-blocks-layout": "^2.0.15",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-typography": "^2.0.13"
+    "@khanacademy/wonder-blocks-typography": "^2.1.1"
   },
   "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,84 +39,77 @@ 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;
+const CheckboxCore = React.forwardRef(function CheckboxCore(
+    props: ChoiceCoreProps,
+    ref: React.ForwardedRef<HTMLInputElement>,
+) {
+    const {checked, disabled, error, groupName, id, testId, ...sharedProps} =
+        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;
         }
-    }
-
-    componentDidUpdate(prevProps: Readonly<ChoiceCoreProps>): void {
-        if (this.inputRef.current != null) {
-            this.inputRef.current.indeterminate = this.props.checked == null;
-        }
-    }
-
-    inputRef: React.RefObject<HTMLInputElement> = React.createRef();
+    }, [checked, innerRef]);
 
-    handleChange: () => void = () => {
+    const handleChange: () => void = () => {
         // 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;
-
-        const checkboxIcon = (
-            <Icon
-                color={disabled ? offBlack32 : white}
-                icon={checked ? checkPath : indeterminatePath}
-                size="small"
-                style={sharedStyles.checkboxIcon}
+    const stateStyles = _generateStyles(checked, error);
+
+    const defaultStyle = [
+        sharedStyles.inputReset,
+        sharedStyles.default,
+        !disabled && stateStyles.default,
+        disabled && sharedStyles.disabled,
+    ];
+
+    const checkboxIcon = (
+        <Icon
+            color={disabled ? offBlack32 : white}
+            icon={checked ? checkPath : indeterminatePath}
+            size="small"
+            style={sharedStyles.checkboxIcon}
+        />
+    );
+
+    const ariaChecked = mapCheckedToAriaChecked(checked);
+
+    return (
+        <React.Fragment>
+            <StyledInput
+                {...sharedProps}
+                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}
+                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}
             />
-        );
-
-        const ariaChecked = mapCheckedToAriaChecked(checked);
-
-        return (
-            <React.Fragment>
-                <StyledInput
-                    {...sharedProps}
-                    ref={this.inputRef}
-                    type="checkbox"
-                    aria-checked={ariaChecked}
-                    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}
-                />
-                {checked || checked == null ? checkboxIcon : <></>}
-            </React.Fragment>
-        );
-    }
-}
+            {checked || checked == null ? checkboxIcon : <></>}
+        </React.Fragment>
+    );
+});
 
 const size = 16;
 
@@ -237,3 +230,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,10 +95,26 @@ const StyledLegend = addStyle("legend");
  * </CheckboxGroup>
  * ```
  */
-export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
-    handleChange(changedValue: string, originalCheckedState: boolean) {
-        const {onChange, selectedValues} = this.props;
+const CheckboxGroup = React.forwardRef(function CheckboxGroup(
+    props: CheckboxGroupProps,
+    ref: React.ForwardedRef<HTMLFieldSetElement>,
+) {
+    const {
+        children,
+        label,
+        description,
+        errorMessage,
+        groupName,
+        onChange,
+        selectedValues,
+        style,
+        testId,
+    } = props;
 
+    const handleChange = (
+        changedValue: string,
+        originalCheckedState: boolean,
+    ) => {
         if (originalCheckedState) {
             const index = selectedValues.indexOf(changedValue);
             const updatedSelection = [
@@ -109,63 +125,50 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
         } else {
             onChange([...selectedValues, changedValue]);
         }
-    }
+    };
 
-    render(): React.ReactNode {
-        const {
-            children,
-            label,
-            description,
-            errorMessage,
-            groupName,
-            selectedValues,
-            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 = selectedValues.includes(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: () => handleChange(value, checked),
+                        style: [index > 0 && styles.defaultLineGap, style],
+                        variant: "checkbox",
+                    });
+                })}
+            </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 = selectedValues.includes(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, checked),
-                            style: [index > 0 && styles.defaultLineGap, style],
-                            variant: "checkbox",
-                        });
-                    })}
-                </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,21 @@ 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(function Checkbox(
+    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,14 +55,27 @@ 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,
-    };
+ */ const ChoiceInternal = React.forwardRef(function ChoiceInternal(
+    props: Props,
+    ref: React.ForwardedRef<HTMLInputElement>,
+) {
+    const {
+        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
+    } = props;
 
-    handleClick: () => void = () => {
-        const {checked, onChange, variant} = this.props;
+    const handleClick: () => void = () => {
         // Radio buttons cannot be unchecked
         if (variant === "radio" && checked) {
             return;
@@ -75,15 +83,17 @@ type DefaultProps = {
         onChange(!checked);
     };
 
-    getChoiceCoreComponent(): typeof RadioCore | typeof CheckboxCore {
-        if (this.props.variant === "radio") {
+    const getChoiceCoreComponent = ():
+        | typeof RadioCore
+        | typeof CheckboxCore => {
+        if (variant === "radio") {
             return RadioCore;
         } else {
             return CheckboxCore;
         }
-    }
-    getLabel(id: string): React.ReactNode {
-        const {disabled, label} = this.props;
+    };
+
+    const getLabel = (id: string): React.ReactNode => {
         return (
             <LabelMedium
                 style={[styles.label, disabled && styles.disabledLabel]}
@@ -91,73 +101,64 @@ type DefaultProps = {
                 <label htmlFor={id}>{label}</label>
             </LabelMedium>
         );
-    }
-    getDescription(id?: string): React.ReactNode {
-        const {description} = this.props;
+    };
+
+    const getDescription = (id?: string): React.ReactNode => {
         return (
             <LabelSmall style={styles.description} id={id}>
                 {description}
             </LabelSmall>
         );
-    }
-    render(): React.ReactNode {
-        const {
-            label,
-            description,
-            id,
-            // 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();
+    };
 
-        return (
-            <UniqueIDProvider mockOnFirstRender={true} scope="choice">
-                {(ids) => {
-                    // A choice element should always have a unique ID set
-                    // so that the label can always refer to this element.
-                    // This guarantees that clicking on the label will
-                    // always click on the choice as well. If an ID is
-                    // passed in as a prop, use that one. Otherwise,
-                    // create a unique ID using the provider.
-                    const uniqueId = id || ids.get("main");
+    const ChoiceCore = getChoiceCoreComponent();
 
-                    // Create a unique ID for the description section to be
-                    // used by this element's `aria-describedby`.
-                    const descriptionId = description
-                        ? ids.get("description")
-                        : undefined;
+    return (
+        <UniqueIDProvider mockOnFirstRender={true} scope="choice">
+            {(ids) => {
+                // A choice element should always have a unique ID set
+                // so that the label can always refer to this element.
+                // This guarantees that clicking on the label will
+                // always click on the choice as well. If an ID is
+                // passed in as a prop, use that one. Otherwise,
+                // create a unique ID using the provider.
+                const uniqueId = id || ids.get("main");
 
-                    return (
-                        <View style={style} className={className}>
-                            <View
-                                style={styles.wrapper}
-                                // We are resetting the tabIndex=0 from handlers
-                                // because the ChoiceCore component will receive
-                                // focus on basis of it being an input element.
-                                tabIndex={-1}
-                            >
-                                <ChoiceCore
-                                    {...coreProps}
-                                    id={uniqueId}
-                                    aria-describedby={descriptionId}
-                                    onClick={this.handleClick}
-                                />
-                                <Strut size={Spacing.xSmall_8} />
-                                {label && this.getLabel(uniqueId)}
-                            </View>
-                            {description && this.getDescription(descriptionId)}
+                // Create a unique ID for the description section to be
+                // used by this element's `aria-describedby`.
+                const descriptionId = description
+                    ? ids.get("description")
+                    : undefined;
+
+                return (
+                    <View style={style} className={className}>
+                        <View
+                            style={styles.wrapper}
+                            // We are resetting the tabIndex=0 from handlers
+                            // because the ChoiceCore component will receive
+                            // focus on basis of it being an input element.
+                            tabIndex={-1}
+                        >
+                            <ChoiceCore
+                                {...props}
+                                id={uniqueId}
+                                aria-describedby={descriptionId}
+                                onClick={handleClick}
+                                disabled={disabled}
+                                error={error}
+                                ref={ref}
+                            />
+                            <Strut size={Spacing.xSmall_8} />
+                            {label && getLabel(uniqueId)}
                         </View>
-                    );
-                }}
-            </UniqueIDProvider>
-        );
-    }
-}
+                        {description && getDescription(descriptionId)}
+                    </View>
+                );
+            }}
+        </UniqueIDProvider>
+    );
+});
+
 const styles = StyleSheet.create({
     wrapper: {
         flexDirection: "row",
@@ -181,3 +182,5 @@ const styles = StyleSheet.create({
         color: Color.offBlack64,
     },
 });
+
+export default ChoiceInternal;