New source found from dndbeyond.com

ddb_main/subApps/builder/components/InputField/InputField.tsx

@@ -3,6 +3,7 @@ import {
   ChangeEvent,
   FC,
   FocusEvent,
+  FormEvent,
   HTMLAttributes,
   HTMLInputTypeAttribute,
   useEffect,
@@ -10,6 +11,7 @@ import {
 } from "react";
 import { v4 as uuidv4 } from "uuid";
 
+import formStyles from "../../styles/form.module.css";
 import styles from "./styles.module.css";
 
 interface InputProps extends HTMLAttributes<HTMLInputElement> {
@@ -18,14 +20,23 @@ interface InputProps extends HTMLAttributes<HTMLInputElement> {
   autoComplete?: string;
 }
 
-export interface InputFieldProps extends HTMLAttributes<HTMLInputElement> {
+export type InputElements = HTMLInputElement | HTMLTextAreaElement;
+
+export interface InputFieldProps
+  extends Omit<
+    HTMLAttributes<HTMLInputElement>,
+    "onBlur" | "onChange" | "onFocus"
+  > {
   errorMessage?: string;
   initialValue?: string | number | null;
   label: string;
   maxLength?: number;
   placeholder?: string;
-  type?: HTMLInputTypeAttribute;
+  type?: HTMLInputTypeAttribute | "textarea";
   inputProps?: InputProps;
+  onBlur?: (event: FocusEvent<InputElements, Element>) => void;
+  onChange?: (event: FormEvent<InputElements>) => void;
+  onFocus?: (event: FocusEvent<InputElements, Element>) => void;
 }
 
 export const InputField: FC<InputFieldProps> = ({
@@ -49,7 +60,7 @@ export const InputField: FC<InputFieldProps> = ({
   const [showError, setShowError] = useState(false);
   const id = props.id ?? `input-field-${uuidv4()}`;
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: ChangeEvent<InputElements>) => {
     const valueLength = e.target.value.length;
     if (maxLength) {
       // If the value length exceeds maxLength, show error
@@ -75,7 +86,7 @@ export const InputField: FC<InputFieldProps> = ({
     return;
   };
 
-  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+  const handleBlur = (e: FocusEvent<InputElements>) => {
     const intValue = parseInt(e.target.value);
 
     // If entered value is below the minimum, reset to minimum
@@ -103,7 +114,7 @@ export const InputField: FC<InputFieldProps> = ({
     setShowError(false);
   };
 
-  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
+  const handleFocus = (e: FocusEvent<InputElements>) => {
     // Call the provided onFocus handler if it exists
     if (onFocus) onFocus(e);
     // Check for maxLength error
@@ -122,18 +133,29 @@ export const InputField: FC<InputFieldProps> = ({
 
   return (
     <div className={clsx([styles.inputField, className])} {...props}>
-      <label className={styles.label} htmlFor={id}>
+      <label className={formStyles.label} htmlFor={id}>
         {label}
       </label>
-      <input
-        className={styles.input}
-        value={value ?? ""}
-        onBlur={handleBlur}
-        onChange={handleChange}
-        onFocus={handleFocus}
-        {...inputAttrs}
-        {...inputProps}
-      />
+      {type !== "textarea" ? (
+        <input
+          className={formStyles.input}
+          value={value ?? ""}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          {...inputAttrs}
+          {...inputProps}
+        />
+      ) : (
+        <textarea
+          className={styles.input}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onFocus={handleFocus}
+        >
+          {value}
+        </textarea>
+      )}
       {showError && <span className={styles.error}>{errorMessage}</span>}
     </div>
   );