53:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 54:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 55:Ta2a,"use client"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import * as z from "zod"; import * as React from "react"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Textarea } from "@/components/ui/textarea"; import { toast } from "@/components/ui/use-toast"; import { useAutosizeTextArea } from "@/components/ui/autosize-textarea"; import { LoadingButton } from "@/components/ui/loading-button"; const FormSchema = z.object({ bio: z .string() .min(10, { message: "Bio must be at least 10 characters.", }) .max(160, { message: "Bio must not be longer than 30 characters.", }), }); const AutosizeTextareaCustomize = () => { const form = useForm>({ resolver: zodResolver(FormSchema), }); const [loading, setLoading] = React.useState(false); const textAreaRef = React.useRef(null); const [triggerAutoSize, setTriggerAutoSize] = React.useState(""); useAutosizeTextArea({ textAreaRef: textAreaRef?.current, triggerAutoSize: triggerAutoSize, minHeight: 52, maxHeight: 200, }); /** You can use `form.watch` to trigger auto sizing. */ const bio = form.watch("bio"); React.useEffect(() => { if (textAreaRef.current) { setTriggerAutoSize(bio); } }, [bio]); function onSubmit(data: z.infer) { setLoading(true); setTimeout(() => { setLoading(false); toast({ title: "Your submitted data", description: (

            {JSON.stringify(data, null, 2)}

), }); }, 500); } return (

( Bio