@khanacademy/wonder-blocks-form 4.10.3 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @khanacademy/wonder-blocks-form
 
+## 5.0.0
+
+### Major Changes
+
+-   e6abdd17: Upgrade to React 18
+
+### Patch Changes
+
+-   Updated dependencies [e6abdd17]
+    -   @khanacademy/wonder-blocks-core@8.0.0
+    -   @khanacademy/wonder-blocks-clickable@5.0.0
+    -   @khanacademy/wonder-blocks-icon@5.0.0
+    -   @khanacademy/wonder-blocks-layout@3.0.0
+    -   @khanacademy/wonder-blocks-tokens@3.0.0
+    -   @khanacademy/wonder-blocks-typography@3.0.0
+
+## 4.11.0
+
+### Minor Changes
+
+-   9ed7bd5b: Adds `instantValidation` prop for TextArea
+-   cdcfe1ba: - TextArea and TextField: Adds `error` prop so that the components can be put in an error state explicitly. This is useful for backend validation errors after a form has already been submitted.
+-   486c6a80: - `TextField`
+    -   Add `instantValidation` prop
+    -   No longer calls `validate` prop if the field is disabled during initialization and on change
+    -   `TextArea`
+        -   Validate the value during initialization if the field is not disabled
+
+### Patch Changes
+
+-   21f6779a: Refactor TextField from class component to function component
+
 ## 4.10.3
 
 ### Patch Changes

package/dist/components/text-area.d.ts

@@ -117,12 +117,29 @@ declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanac
     /**
      * Provide a validation for the textarea value.
      * Return a string error message or null | void for a valid input.
+     *
+     * Use this for errors that are shown to the user while they are filling out
+     * a form.
      */
     validate?: ((value: string) => string | null | void) | undefined;
     /**
      * Called right after the textarea is validated.
      */
     onValidate?: ((errorMessage?: string | null | undefined) => unknown) | undefined;
+    /**
+     * If true, textarea is validated as the user types (onChange). If false,
+     * it is validated when the user's focus moves out of the field (onBlur).
+     * It is preferred that instantValidation is set to `false`, however, it
+     * defaults to `true` for backwards compatibility with existing implementations.
+     */
+    instantValidation?: boolean | undefined;
+    /**
+     * Whether the textarea is in an error state.
+     *
+     * Use this for errors that are triggered by something external to the
+     * component (example: an error after form submission).
+     */
+    error?: boolean | undefined;
     /**
      * Whether this textarea is required to continue, or the error message to
      * render if this textarea is left blank.

package/dist/components/text-field.d.ts

@@ -31,16 +31,26 @@ type CommonProps = AriaProps & {
      * This `disabled` prop will also set the `readonly` attribute to prevent
      * typing in the field.
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * Provide a validation for the input value.
      * Return a string error message or null | void for a valid input.
+     *
+     * Use this for errors that are shown to the user while they are filling out
+     * a form.
      */
     validate?: (value: string) => string | null | void;
     /**
      * Called right after the TextField input is validated.
      */
     onValidate?: (errorMessage?: string | null | undefined) => unknown;
+    /**
+     * If true, TextField is validated as the user types (onChange). If false,
+     * it is validated when the user's focus moves out of the field (onBlur).
+     * It is preferred that instantValidation is set to `false`, however, it
+     * defaults to `true` for backwards compatibility with existing implementations.
+     */
+    instantValidation?: boolean;
     /**
      * Called when the value has changed.
      */
@@ -61,6 +71,13 @@ type CommonProps = AriaProps & {
      * Provide hints or examples of what to enter.
      */
     placeholder?: string;
+    /**
+     * Whether the input is in an error state.
+     *
+     * Use this for errors that are triggered by something external to the
+     * component (example: an error after form submission).
+     */
+    error?: boolean;
     /**
      * Whether this field is required to to continue, or the error message to
      * render if this field is left blank.
@@ -87,7 +104,7 @@ type CommonProps = AriaProps & {
     /**
      * Change the default focus ring color to fit a dark background.
      */
-    light: boolean;
+    light?: boolean;
     /**
      * Custom styles for the input.
      */
@@ -110,7 +127,7 @@ type CommonProps = AriaProps & {
     autoComplete?: string;
 };
 type OtherInputProps = CommonProps & {
-    type: "text" | "password" | "email" | "tel";
+    type?: "text" | "password" | "email" | "tel";
 };
 export type NumericInputProps = {
     type: "number";
@@ -131,32 +148,10 @@ export type NumericInputProps = {
 type FullNumericInputProps = CommonProps & NumericInputProps;
 type Props = OtherInputProps | FullNumericInputProps;
 type PropsWithForwardRef = Props & WithForwardRef;
-type DefaultProps = {
-    type: PropsWithForwardRef["type"];
-    disabled: PropsWithForwardRef["disabled"];
-    light: PropsWithForwardRef["light"];
-};
-type State = {
-    /**
-     * Displayed when the validation fails.
-     */
-    error: string | null | undefined;
-};
 /**
  * A TextField is an element used to accept a single line of text from the user.
  */
-declare class TextField extends React.Component<PropsWithForwardRef, State> {
-    static defaultProps: DefaultProps;
-    constructor(props: PropsWithForwardRef);
-    state: State;
-    componentDidMount(): void;
-    maybeValidate: (newValue: string) => void;
-    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
-    handleFocus: (event: React.FocusEvent<HTMLInputElement>) => unknown;
-    handleBlur: (event: React.FocusEvent<HTMLInputElement>) => unknown;
-    getStyles: () => StyleType;
-    render(): React.ReactNode;
-}
+declare const TextField: (props: PropsWithForwardRef) => React.JSX.Element;
 type ExportProps = OmitConstrained<JSX.LibraryManagedAttributes<typeof TextField, React.ComponentProps<typeof TextField>>, "forwardedRef">;
 /**
  * A TextField is an element used to accept a single line of text from the user.

package/dist/es/index.js

@@ -2,7 +2,7 @@ import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import { StyleSheet } from 'aphrodite';
-import { addStyle, UniqueIDProvider, View, IDProvider, useUniqueIdWithMock, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
+import { addStyle, UniqueIDProvider, View, useOnMountEffect, IDProvider, useUniqueIdWithMock } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { spacing, mix, color, border, font } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, styles as styles$7 } from '@khanacademy/wonder-blocks-typography';
@@ -590,134 +590,151 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
   }));
 });
 
-const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "light", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
-const defaultErrorMessage$1 = "This field is required.";
-const StyledInput = addStyle("input");
-class TextField extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: null
-    };
-    this.maybeValidate = newValue => {
-      const {
-        validate,
-        onValidate,
-        required
-      } = this.props;
-      if (validate) {
-        const maybeError = validate(newValue) || null;
-        this.setState({
-          error: maybeError
-        }, () => {
-          if (onValidate) {
-            onValidate(maybeError);
-          }
-        });
-      } else if (required) {
-        const requiredString = typeof required === "string" ? required : defaultErrorMessage$1;
-        const maybeError = newValue ? null : requiredString;
-        this.setState({
-          error: maybeError
-        }, () => {
-          if (onValidate) {
-            onValidate(maybeError);
-          }
-        });
+const defaultErrorMessage = "This field is required.";
+const useFieldValidation = ({
+  value,
+  disabled: _disabled = false,
+  validate,
+  onValidate,
+  required: _required = false,
+  instantValidation: _instantValidation = true
+}) => {
+  const [errorMessage, setErrorMessage] = React.useState(() => validate && value !== "" && !_disabled && validate(value) || null);
+  const onChangeValidation = newValue => {
+    if (_instantValidation) {
+      handleValidation(newValue);
+    } else {
+      if (errorMessage) {
+        setErrorMessage(null);
+        if (onValidate) {
+          onValidate(null);
+        }
       }
-    };
-    this.handleChange = event => {
-      const {
-        onChange
-      } = this.props;
-      const newValue = event.target.value;
-      this.maybeValidate(newValue);
-      onChange(newValue);
-    };
-    this.handleFocus = event => {
-      const {
-        onFocus
-      } = this.props;
-      if (onFocus) {
-        onFocus(event);
+    }
+  };
+  const onBlurValidation = newValue => {
+    if (!_instantValidation) {
+      if (newValue || _required) {
+        handleValidation(newValue);
       }
-    };
-    this.handleBlur = event => {
-      const {
-        onBlur
-      } = this.props;
-      if (onBlur) {
-        onBlur(event);
+    }
+  };
+  const handleValidation = newValue => {
+    if (_disabled) {
+      return;
+    }
+    if (validate) {
+      const error = validate(newValue) || null;
+      setErrorMessage(error);
+      if (onValidate) {
+        onValidate(error);
+      }
+    } else if (_required) {
+      const requiredString = typeof _required === "string" ? _required : defaultErrorMessage;
+      const error = newValue ? null : requiredString;
+      setErrorMessage(error);
+      if (onValidate) {
+        onValidate(error);
       }
-    };
-    this.getStyles = () => {
-      const {
-        disabled,
-        light
-      } = this.props;
-      const {
-        error
-      } = this.state;
-      const baseStyles = [styles$2.input, styles$7.LabelMedium];
-      const defaultStyles = [styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, !!error && styles$2.error];
-      const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, !!error && styles$2.lightError];
-      return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
-    };
-    if (props.validate && props.value !== "") {
-      this.state.error = props.validate(props.value) || null;
     }
-  }
-  componentDidMount() {
-    if (this.props.value !== "") {
-      this.maybeValidate(this.props.value);
+  };
+  useOnMountEffect(() => {
+    if (value !== "") {
+      handleValidation(value);
     }
-  }
-  render() {
-    const _this$props = this.props,
-      {
-        id,
-        type,
-        value,
-        name,
-        disabled,
-        onKeyDown,
-        placeholder,
-        style,
-        testId,
-        readOnly,
-        autoFocus,
-        autoComplete,
-        forwardedRef
-      } = _this$props,
-      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
-    return React.createElement(IDProvider, {
-      id: id,
-      scope: "text-field"
-    }, uniqueId => React.createElement(StyledInput, _extends({
-      style: [this.getStyles(), style],
-      id: uniqueId,
-      type: type,
-      placeholder: placeholder,
-      value: value,
-      name: name,
-      "aria-disabled": disabled,
-      onChange: this.handleChange,
-      onKeyDown: disabled ? undefined : onKeyDown,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      "data-testid": testId,
-      readOnly: readOnly || disabled,
-      autoFocus: autoFocus,
-      autoComplete: autoComplete,
-      ref: forwardedRef,
-      "aria-invalid": this.state.error ? "true" : "false"
-    }, otherProps)));
-  }
-}
-TextField.defaultProps = {
-  type: "text",
-  disabled: false,
-  light: false
+  });
+  return {
+    errorMessage,
+    onBlurValidation,
+    onChangeValidation
+  };
+};
+
+const _excluded$2 = ["id", "type", "value", "name", "disabled", "light", "error", "validate", "onValidate", "required", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "instantValidation", "onKeyDown", "onChange", "onFocus", "onBlur"];
+const StyledInput = addStyle("input");
+const TextField = props => {
+  const {
+      id,
+      type = "text",
+      value,
+      name,
+      disabled = false,
+      light = false,
+      error,
+      validate,
+      onValidate,
+      required,
+      placeholder,
+      style,
+      testId,
+      readOnly,
+      autoFocus,
+      autoComplete,
+      forwardedRef,
+      instantValidation = true,
+      onKeyDown,
+      onChange,
+      onFocus,
+      onBlur
+    } = props,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
+  const {
+    errorMessage,
+    onBlurValidation,
+    onChangeValidation
+  } = useFieldValidation({
+    value,
+    required,
+    disabled,
+    instantValidation,
+    validate,
+    onValidate
+  });
+  const hasError = error || !!errorMessage;
+  const handleChange = event => {
+    const newValue = event.target.value;
+    onChangeValidation(newValue);
+    onChange(newValue);
+  };
+  const handleFocus = event => {
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+  const handleBlur = event => {
+    onBlurValidation(event.target.value);
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  const getStyles = () => {
+    const baseStyles = [styles$2.input, styles$7.LabelMedium];
+    const defaultStyles = [styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error];
+    const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, hasError && styles$2.lightError];
+    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
+  };
+  return React.createElement(IDProvider, {
+    id: id,
+    scope: "text-field"
+  }, uniqueId => React.createElement(StyledInput, _extends({
+    style: [getStyles(), style],
+    id: uniqueId,
+    type: type,
+    placeholder: placeholder,
+    value: value,
+    name: name,
+    "aria-disabled": disabled,
+    onChange: handleChange,
+    onKeyDown: disabled ? undefined : onKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    "data-testid": testId,
+    readOnly: readOnly || disabled,
+    autoFocus: autoFocus,
+    autoComplete: autoComplete,
+    ref: forwardedRef,
+    "aria-invalid": hasError
+  }, otherProps)));
 };
 const styles$2 = StyleSheet.create({
   input: {
@@ -1028,8 +1045,7 @@ var labeledTextField = React.forwardRef((props, ref) => React.createElement(Labe
   forwardedRef: ref
 })));
 
-const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "light", "rootStyle"];
-const defaultErrorMessage = "This field is required.";
+const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "light", "rootStyle", "error", "instantValidation"];
 const StyledTextArea = addStyle("textarea");
 const TextArea = React.forwardRef(function TextArea(props, ref) {
   const {
@@ -1060,42 +1076,41 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
       required,
       resizeType,
       light,
-      rootStyle
+      rootStyle,
+      error,
+      instantValidation = true
     } = props,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-  const [error, setError] = React.useState(null);
+  const {
+    errorMessage,
+    onBlurValidation,
+    onChangeValidation
+  } = useFieldValidation({
+    value,
+    disabled,
+    validate,
+    onValidate,
+    required,
+    instantValidation
+  });
+  const hasError = error || !!errorMessage;
   const ids = useUniqueIdWithMock("text-area");
   const uniqueId = id != null ? id : ids.get("id");
   const handleChange = event => {
     const newValue = event.target.value;
+    onChangeValidation(newValue);
     onChange(newValue);
-    handleValidation(newValue);
   };
-  const handleValidation = newValue => {
-    if (validate) {
-      const error = validate(newValue) || null;
-      setError(error);
-      if (onValidate) {
-        onValidate(error);
-      }
-    } else if (required) {
-      const requiredString = typeof required === "string" ? required : defaultErrorMessage;
-      const error = newValue ? null : requiredString;
-      setError(error);
-      if (onValidate) {
-        onValidate(error);
-      }
+  const handleBlur = event => {
+    onBlurValidation(event.target.value);
+    if (onBlur) {
+      onBlur(event);
     }
   };
-  useOnMountEffect(() => {
-    if (value !== "") {
-      handleValidation(value);
-    }
-  });
   const getStyles = () => {
     const baseStyles = [styles.textarea, styles$7.LabelMedium, resizeType && resizeStyles[resizeType]];
-    const defaultStyles = [styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, !!error && styles.error];
-    const lightStyles = [styles.light, !disabled && styles.lightFocus, disabled && styles.lightDisabled, !!error && styles.lightError];
+    const defaultStyles = [styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error];
+    const lightStyles = [styles.light, !disabled && styles.lightFocus, disabled && styles.lightDisabled, hasError && styles.lightError];
     return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
   };
   return React.createElement(View, {
@@ -1125,10 +1140,10 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
     onKeyDown: disabled ? undefined : onKeyDown,
     onKeyUp: disabled ? undefined : onKeyUp,
     onFocus: onFocus,
-    onBlur: onBlur,
+    onBlur: handleBlur,
     required: !!required
   }, otherProps, {
-    "aria-invalid": !!error
+    "aria-invalid": hasError
   })));
 });
 const VERTICAL_SPACING_PX = 10;

package/dist/hooks/use-field-validation.d.ts

@@ -0,0 +1,66 @@
+type FieldValidationProps = {
+    value: string;
+    disabled?: boolean;
+    validate?: (value: string) => string | null | void;
+    onValidate?: (errorMessage?: string | null | undefined) => unknown;
+    required?: boolean | string;
+    instantValidation?: boolean;
+};
+/**
+ * Hook for validation logic for text based fields. Based on the props provided,
+ * the hook will:
+ * - call the `validate` and `onValidate` props on initialization and mount
+ * - provide validation functions for specific events (onChange and onBlur).
+ * These functions will call the `validate` and `onValidate` props as needed.
+ *
+ * @param {FieldValidationProps} props An object with:
+ * - `value` - The value of the field.
+ * - `disabled` - If the field is disabled.
+ * - `required` - Whether the field is required to continue, or the error
+ * message if it is left blank.
+ * - `instantValidation` - If the field should be validated instantly.
+ * - `validate` - Validation for the field.
+ * - `onValidate` - Called after the `validate` prop is called.
+ * @returns {object} An object with:
+ * - `errorMessage` - The error message from validation.
+ * - `onBlurValidation` - Validation logic for when a field is blurred.
+ * - `onChangeValidation` - Validation logic for when a field changes.
+ *
+ * @example
+ *  export const MyComponent = ({
+ *     value,
+ *     disabled,
+ *     validate,
+ *     onValidate,
+ *     required,
+ *     instantValidation,
+ *  }) => {
+ *   const {errorMessage, onBlurValidation, onChangeValidation} =
+ *       useFieldValidation({
+ *           value,
+ *           disabled,
+ *           validate,
+ *           onValidate,
+ *           required,
+ *           instantValidation,
+ *       });
+ *     return (
+ *       <input
+ *           onBlur={(event) => {
+ *               onBlurValidation(event.target.value);
+ *           }}
+ *           onChange={(event) => {
+ *               onChangeValidation(event.target.value);
+ *           }}
+ *           aria-invalid={!!errorMessage}
+ *       />
+ *   );
+ * }
+ *
+ */
+export declare const useFieldValidation: ({ value, disabled, validate, onValidate, required, instantValidation, }: FieldValidationProps) => {
+    errorMessage: string | null;
+    onBlurValidation: (newValue: string) => void;
+    onChangeValidation: (newValue: string) => void;
+};
+export {};

package/dist/index.js

@@ -620,134 +620,151 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
   }));
 });
 
-const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "light", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
-const defaultErrorMessage$1 = "This field is required.";
-const StyledInput = wonderBlocksCore.addStyle("input");
-class TextField extends React__namespace.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: null
-    };
-    this.maybeValidate = newValue => {
-      const {
-        validate,
-        onValidate,
-        required
-      } = this.props;
-      if (validate) {
-        const maybeError = validate(newValue) || null;
-        this.setState({
-          error: maybeError
-        }, () => {
-          if (onValidate) {
-            onValidate(maybeError);
-          }
-        });
-      } else if (required) {
-        const requiredString = typeof required === "string" ? required : defaultErrorMessage$1;
-        const maybeError = newValue ? null : requiredString;
-        this.setState({
-          error: maybeError
-        }, () => {
-          if (onValidate) {
-            onValidate(maybeError);
-          }
-        });
+const defaultErrorMessage = "This field is required.";
+const useFieldValidation = ({
+  value,
+  disabled: _disabled = false,
+  validate,
+  onValidate,
+  required: _required = false,
+  instantValidation: _instantValidation = true
+}) => {
+  const [errorMessage, setErrorMessage] = React__namespace.useState(() => validate && value !== "" && !_disabled && validate(value) || null);
+  const onChangeValidation = newValue => {
+    if (_instantValidation) {
+      handleValidation(newValue);
+    } else {
+      if (errorMessage) {
+        setErrorMessage(null);
+        if (onValidate) {
+          onValidate(null);
+        }
       }
-    };
-    this.handleChange = event => {
-      const {
-        onChange
-      } = this.props;
-      const newValue = event.target.value;
-      this.maybeValidate(newValue);
-      onChange(newValue);
-    };
-    this.handleFocus = event => {
-      const {
-        onFocus
-      } = this.props;
-      if (onFocus) {
-        onFocus(event);
+    }
+  };
+  const onBlurValidation = newValue => {
+    if (!_instantValidation) {
+      if (newValue || _required) {
+        handleValidation(newValue);
       }
-    };
-    this.handleBlur = event => {
-      const {
-        onBlur
-      } = this.props;
-      if (onBlur) {
-        onBlur(event);
+    }
+  };
+  const handleValidation = newValue => {
+    if (_disabled) {
+      return;
+    }
+    if (validate) {
+      const error = validate(newValue) || null;
+      setErrorMessage(error);
+      if (onValidate) {
+        onValidate(error);
+      }
+    } else if (_required) {
+      const requiredString = typeof _required === "string" ? _required : defaultErrorMessage;
+      const error = newValue ? null : requiredString;
+      setErrorMessage(error);
+      if (onValidate) {
+        onValidate(error);
       }
-    };
-    this.getStyles = () => {
-      const {
-        disabled,
-        light
-      } = this.props;
-      const {
-        error
-      } = this.state;
-      const baseStyles = [styles$2.input, wonderBlocksTypography.styles.LabelMedium];
-      const defaultStyles = [styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, !!error && styles$2.error];
-      const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, !!error && styles$2.lightError];
-      return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
-    };
-    if (props.validate && props.value !== "") {
-      this.state.error = props.validate(props.value) || null;
     }
-  }
-  componentDidMount() {
-    if (this.props.value !== "") {
-      this.maybeValidate(this.props.value);
+  };
+  wonderBlocksCore.useOnMountEffect(() => {
+    if (value !== "") {
+      handleValidation(value);
     }
-  }
-  render() {
-    const _this$props = this.props,
-      {
-        id,
-        type,
-        value,
-        name,
-        disabled,
-        onKeyDown,
-        placeholder,
-        style,
-        testId,
-        readOnly,
-        autoFocus,
-        autoComplete,
-        forwardedRef
-      } = _this$props,
-      otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$2);
-    return React__namespace.createElement(wonderBlocksCore.IDProvider, {
-      id: id,
-      scope: "text-field"
-    }, uniqueId => React__namespace.createElement(StyledInput, _extends__default["default"]({
-      style: [this.getStyles(), style],
-      id: uniqueId,
-      type: type,
-      placeholder: placeholder,
-      value: value,
-      name: name,
-      "aria-disabled": disabled,
-      onChange: this.handleChange,
-      onKeyDown: disabled ? undefined : onKeyDown,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      "data-testid": testId,
-      readOnly: readOnly || disabled,
-      autoFocus: autoFocus,
-      autoComplete: autoComplete,
-      ref: forwardedRef,
-      "aria-invalid": this.state.error ? "true" : "false"
-    }, otherProps)));
-  }
-}
-TextField.defaultProps = {
-  type: "text",
-  disabled: false,
-  light: false
+  });
+  return {
+    errorMessage,
+    onBlurValidation,
+    onChangeValidation
+  };
+};
+
+const _excluded$2 = ["id", "type", "value", "name", "disabled", "light", "error", "validate", "onValidate", "required", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "instantValidation", "onKeyDown", "onChange", "onFocus", "onBlur"];
+const StyledInput = wonderBlocksCore.addStyle("input");
+const TextField = props => {
+  const {
+      id,
+      type = "text",
+      value,
+      name,
+      disabled = false,
+      light = false,
+      error,
+      validate,
+      onValidate,
+      required,
+      placeholder,
+      style,
+      testId,
+      readOnly,
+      autoFocus,
+      autoComplete,
+      forwardedRef,
+      instantValidation = true,
+      onKeyDown,
+      onChange,
+      onFocus,
+      onBlur
+    } = props,
+    otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$2);
+  const {
+    errorMessage,
+    onBlurValidation,
+    onChangeValidation
+  } = useFieldValidation({
+    value,
+    required,
+    disabled,
+    instantValidation,
+    validate,
+    onValidate
+  });
+  const hasError = error || !!errorMessage;
+  const handleChange = event => {
+    const newValue = event.target.value;
+    onChangeValidation(newValue);
+    onChange(newValue);
+  };
+  const handleFocus = event => {
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+  const handleBlur = event => {
+    onBlurValidation(event.target.value);
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  const getStyles = () => {
+    const baseStyles = [styles$2.input, wonderBlocksTypography.styles.LabelMedium];
+    const defaultStyles = [styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error];
+    const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, hasError && styles$2.lightError];
+    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
+  };
+  return React__namespace.createElement(wonderBlocksCore.IDProvider, {
+    id: id,
+    scope: "text-field"
+  }, uniqueId => React__namespace.createElement(StyledInput, _extends__default["default"]({
+    style: [getStyles(), style],
+    id: uniqueId,
+    type: type,
+    placeholder: placeholder,
+    value: value,
+    name: name,
+    "aria-disabled": disabled,
+    onChange: handleChange,
+    onKeyDown: disabled ? undefined : onKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    "data-testid": testId,
+    readOnly: readOnly || disabled,
+    autoFocus: autoFocus,
+    autoComplete: autoComplete,
+    ref: forwardedRef,
+    "aria-invalid": hasError
+  }, otherProps)));
 };
 const styles$2 = aphrodite.StyleSheet.create({
   input: {
@@ -1058,8 +1075,7 @@ var labeledTextField = React__namespace.forwardRef((props, ref) => React__namesp
   forwardedRef: ref
 })));
 
-const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "light", "rootStyle"];
-const defaultErrorMessage = "This field is required.";
+const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "light", "rootStyle", "error", "instantValidation"];
 const StyledTextArea = wonderBlocksCore.addStyle("textarea");
 const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
   const {
@@ -1090,42 +1106,41 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
       required,
       resizeType,
       light,
-      rootStyle
+      rootStyle,
+      error,
+      instantValidation = true
     } = props,
     otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
-  const [error, setError] = React__namespace.useState(null);
+  const {
+    errorMessage,
+    onBlurValidation,
+    onChangeValidation
+  } = useFieldValidation({
+    value,
+    disabled,
+    validate,
+    onValidate,
+    required,
+    instantValidation
+  });
+  const hasError = error || !!errorMessage;
   const ids = wonderBlocksCore.useUniqueIdWithMock("text-area");
   const uniqueId = id != null ? id : ids.get("id");
   const handleChange = event => {
     const newValue = event.target.value;
+    onChangeValidation(newValue);
     onChange(newValue);
-    handleValidation(newValue);
   };
-  const handleValidation = newValue => {
-    if (validate) {
-      const error = validate(newValue) || null;
-      setError(error);
-      if (onValidate) {
-        onValidate(error);
-      }
-    } else if (required) {
-      const requiredString = typeof required === "string" ? required : defaultErrorMessage;
-      const error = newValue ? null : requiredString;
-      setError(error);
-      if (onValidate) {
-        onValidate(error);
-      }
+  const handleBlur = event => {
+    onBlurValidation(event.target.value);
+    if (onBlur) {
+      onBlur(event);
     }
   };
-  wonderBlocksCore.useOnMountEffect(() => {
-    if (value !== "") {
-      handleValidation(value);
-    }
-  });
   const getStyles = () => {
     const baseStyles = [styles.textarea, wonderBlocksTypography.styles.LabelMedium, resizeType && resizeStyles[resizeType]];
-    const defaultStyles = [styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, !!error && styles.error];
-    const lightStyles = [styles.light, !disabled && styles.lightFocus, disabled && styles.lightDisabled, !!error && styles.lightError];
+    const defaultStyles = [styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error];
+    const lightStyles = [styles.light, !disabled && styles.lightFocus, disabled && styles.lightDisabled, hasError && styles.lightError];
     return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
   };
   return React__namespace.createElement(wonderBlocksCore.View, {
@@ -1155,10 +1170,10 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
     onKeyDown: disabled ? undefined : onKeyDown,
     onKeyUp: disabled ? undefined : onKeyUp,
     onFocus: onFocus,
-    onBlur: onBlur,
+    onBlur: handleBlur,
     required: !!required
   }, otherProps, {
-    "aria-invalid": !!error
+    "aria-invalid": hasError
   })));
 });
 const VERTICAL_SPACING_PX = 10;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.10.3",
+  "version": "5.0.0",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,18 +16,18 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.2.9",
-    "@khanacademy/wonder-blocks-core": "^7.0.1",
-    "@khanacademy/wonder-blocks-icon": "^4.2.0",
-    "@khanacademy/wonder-blocks-layout": "^2.2.2",
-    "@khanacademy/wonder-blocks-tokens": "^2.1.0",
-    "@khanacademy/wonder-blocks-typography": "^2.1.16"
+    "@khanacademy/wonder-blocks-clickable": "^5.0.0",
+    "@khanacademy/wonder-blocks-core": "^8.0.0",
+    "@khanacademy/wonder-blocks-icon": "^5.0.0",
+    "@khanacademy/wonder-blocks-layout": "^3.0.0",
+    "@khanacademy/wonder-blocks-tokens": "^3.0.0",
+    "@khanacademy/wonder-blocks-typography": "^3.0.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "react": "16.14.0"
+    "react": "18.2.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "^1.0.1"
+    "@khanacademy/wb-dev-build-settings": "^2.0.0"
   }
 }