@khanacademy/wonder-blocks-form 4.5.1 → 4.6.1

package/src/__tests__/custom-snapshot.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as renderer from "react-test-renderer";
+import {render} from "@testing-library/react";
 
 import CheckboxCore from "../components/checkbox-core";
 import RadioCore from "../components/radio-core";
@@ -12,17 +12,16 @@ describe("CheckboxCore", () => {
         checkedStates.forEach((checked: any) => {
             test(`type:${state} checked:${String(checked)}`, () => {
                 const disabled = state === "disabled";
-                const tree = renderer
-                    .create(
-                        <CheckboxCore
-                            checked={checked}
-                            disabled={disabled}
-                            error={state === "error"}
-                            onClick={() => {}}
-                        />,
-                    )
-                    .toJSON();
-                expect(tree).toMatchSnapshot();
+                const {container} = render(
+                    <CheckboxCore
+                        checked={checked}
+                        disabled={disabled}
+                        error={state === "error"}
+                        onClick={() => {}}
+                    />,
+                );
+
+                expect(container).toMatchSnapshot();
             });
         });
     });
@@ -33,17 +32,16 @@ describe("RadioCore", () => {
         checkedStates.forEach((checked: any) => {
             test(`type:${state} checked:${String(checked)}`, () => {
                 const disabled = state === "disabled";
-                const tree = renderer
-                    .create(
-                        <RadioCore
-                            checked={checked}
-                            disabled={disabled}
-                            error={state === "error"}
-                            onClick={() => {}}
-                        />,
-                    )
-                    .toJSON();
-                expect(tree).toMatchSnapshot();
+                const {container} = render(
+                    <RadioCore
+                        checked={checked}
+                        disabled={disabled}
+                        error={state === "error"}
+                        onClick={() => {}}
+                    />,
+                );
+
+                expect(container).toMatchSnapshot();
             });
         });
     });

package/src/components/__tests__/labeled-text-field.test.tsx

@@ -703,4 +703,45 @@ describe("Required LabeledTextField", () => {
             errorMessage,
         );
     });
+
+    test("displays an error even when onValidate is set", async () => {
+        // Arrange
+        const errorMessage = "Empty string!";
+
+        const validate = (value: string): string | null | undefined => {
+            if (value === "") {
+                return errorMessage;
+            }
+        };
+
+        const TextFieldWrapper = () => {
+            const [value, setValue] = React.useState("initial");
+            return (
+                <LabeledTextField
+                    label="Label"
+                    value={value}
+                    onChange={setValue}
+                    validate={validate}
+                    onValidate={jest.fn()}
+                    testId="test-labeled-text-field"
+                />
+            );
+        };
+
+        render(<TextFieldWrapper />);
+
+        const textField = await screen.findByTestId(
+            "test-labeled-text-field-field",
+        );
+        textField.focus();
+        await userEvent.clear(textField);
+
+        // Act
+        textField.blur();
+
+        // Assert
+        expect(await screen.findByRole("alert")).toHaveTextContent(
+            errorMessage,
+        );
+    });
 });

package/src/components/labeled-text-field.tsx

@@ -3,22 +3,20 @@ import * as React from "react";
 import {IDProvider, StyleType} from "@khanacademy/wonder-blocks-core";
 
 import FieldHeading from "./field-heading";
-import TextField, {TextFieldType} from "./text-field";
+import TextField from "./text-field";
+import type {NumericInputProps} from "./text-field";
+import {OmitConstrained} from "../util/types";
 
 type WithForwardRef = {
     forwardedRef: React.ForwardedRef<HTMLInputElement>;
 };
 
-type Props = {
+type CommonProps = {
     /**
      * An optional unique identifier for the TextField.
      * If no id is specified, a unique id will be auto-generated.
      */
     id?: string;
-    /**
-     * Determines the type of input. Defaults to text.
-     */
-    type: TextFieldType;
     /**
      * Provide a label for the TextField.
      */
@@ -122,6 +120,15 @@ type Props = {
     autoComplete?: string;
 };
 
+type OtherInputProps = CommonProps & {
+    /**
+     * Determines the type of input. Defaults to text.
+     */
+    type: "text" | "password" | "email" | "tel";
+};
+
+type FullNumericInputProps = NumericInputProps & CommonProps;
+type Props = OtherInputProps | FullNumericInputProps;
 type PropsWithForwardRef = Props & WithForwardRef;
 
 type DefaultProps = {
@@ -213,6 +220,14 @@ class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
             autoComplete,
             forwardedRef,
             ariaDescribedby,
+            // NOTE: We are not using this prop, but we need to remove it from
+            // `otherProps` so it doesn't override the `handleValidate` function
+            // call. We use `otherProps` due to a limitation in TypeScript where
+            // we can't easily extract the props when using a discriminated
+            // union.
+            onValidate: _,
+            // numeric input props
+            ...otherProps
         } = this.props;
 
         return (
@@ -247,6 +262,7 @@ class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
                                 readOnly={readOnly}
                                 autoComplete={autoComplete}
                                 ref={forwardedRef}
+                                {...otherProps}
                             />
                         }
                         label={label}
@@ -260,7 +276,7 @@ class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
     }
 }
 
-type ExportProps = Omit<
+type ExportProps = OmitConstrained<
     JSX.LibraryManagedAttributes<
         typeof LabeledTextField,
         React.ComponentProps<typeof LabeledTextField>

package/src/components/text-field.tsx

@@ -6,6 +6,7 @@ import {addStyle} from "@khanacademy/wonder-blocks-core";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
 
 import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core";
+import {OmitConstrained} from "../util/types";
 
 export type TextFieldType = "text" | "password" | "email" | "number" | "tel";
 
@@ -17,15 +18,11 @@ const defaultErrorMessage = "This field is required.";
 
 const StyledInput = addStyle("input");
 
-type Props = AriaProps & {
+type CommonProps = AriaProps & {
     /**
      * The unique identifier for the input.
      */
     id: string;
-    /**
-     * Determines the type of input. Defaults to text.
-     */
-    type: TextFieldType;
     /**
      * The input value.
      */
@@ -117,6 +114,30 @@ type Props = AriaProps & {
     autoComplete?: string;
 };
 
+type OtherInputProps = CommonProps & {
+    type: "text" | "password" | "email" | "tel";
+};
+
+// Props that are only available for inputs of type "number".
+export type NumericInputProps = {
+    type: "number";
+    /**
+     * The minimum numeric value for the input.
+     */
+    min?: number;
+    /**
+     * The maximum numeric value for the input.
+     */
+    max?: number;
+    /**
+     * The numeric value to increment or decrement by.
+     * Requires the input to be multiples of this value.
+     */
+    step?: number;
+};
+
+type FullNumericInputProps = CommonProps & NumericInputProps;
+type Props = OtherInputProps | FullNumericInputProps;
 type PropsWithForwardRef = Props & WithForwardRef;
 
 type DefaultProps = {
@@ -341,7 +362,7 @@ const styles = StyleSheet.create({
     },
 });
 
-type ExportProps = Omit<
+type ExportProps = OmitConstrained<
     JSX.LibraryManagedAttributes<
         typeof TextField,
         React.ComponentProps<typeof TextField>

package/src/util/types.ts

@@ -77,3 +77,9 @@ export type RadioGroupProps = {
     /** Value of the selected radio item. */
     selectedValue: string;
 };
+
+// For more information, see:
+// https://github.com/microsoft/TypeScript/wiki/FAQ#add-a-key-constraint-to-omit
+export type OmitConstrained<T, K> = {
+    [P in keyof T as Exclude<P, K & keyof any>]: T[P];
+};