Autosize Textarea Dependencies

1"use client";
2import * as React from "react";
3import { cn } from "@/lib/utils";
4import { useImperativeHandle } from "react";
5 
6interface UseAutosizeTextAreaProps {
7  textAreaRef: HTMLTextAreaElement | null;
8  minHeight?: number;
9  maxHeight?: number;
10  triggerAutoSize: string;
11}
12 
13export const useAutosizeTextArea = ({
14  textAreaRef,
15  triggerAutoSize,
16  maxHeight = Number.MAX_SAFE_INTEGER,
17  minHeight = 0,
18}: UseAutosizeTextAreaProps) => {
19  const [init, setInit] = React.useState(true);
20  React.useEffect(() => {
21    // We need to reset the height momentarily to get the correct scrollHeight for the textarea
22    const offsetBorder = 2;
23    if (textAreaRef) {
24      if (init) {
25        textAreaRef.style.minHeight = `${minHeight + offsetBorder}px`;
26        if (maxHeight > minHeight) {
27          textAreaRef.style.maxHeight = `${maxHeight}px`;
28        }
29        setInit(false);
30      }
31      textAreaRef.style.height = `${minHeight + offsetBorder}px`;
32      const scrollHeight = textAreaRef.scrollHeight;
33      // We then set the height directly, outside of the render loop
34      // Trying to set this with state or a ref will product an incorrect value.
35      if (scrollHeight > maxHeight) {
36        textAreaRef.style.height = `${maxHeight}px`;
37      } else {
38        textAreaRef.style.height = `${scrollHeight + offsetBorder}px`;
39      }
40    }
41  }, [textAreaRef, triggerAutoSize, init, minHeight, maxHeight]);
42};
43 
44export type AutosizeTextAreaRef = {
45  textArea: HTMLTextAreaElement;
46  maxHeight: number;
47  minHeight: number;
48};
49 
50type AutosizeTextAreaProps = {
51  maxHeight?: number;
52  minHeight?: number;
53} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
54 
55export const AutosizeTextarea = React.forwardRef<
56  AutosizeTextAreaRef,
57  AutosizeTextAreaProps
58>(
59  (
60    {
61      maxHeight = Number.MAX_SAFE_INTEGER,
62      minHeight = 52,
63      className,
64      onChange,
65      value,
66      ...props
67    }: AutosizeTextAreaProps,
68    ref: React.Ref<AutosizeTextAreaRef>,
69  ) => {
70    const textAreaRef = React.useRef<HTMLTextAreaElement | null>(null);
71    const [triggerAutoSize, setTriggerAutoSize] = React.useState("");
72 
73    useAutosizeTextArea({
74      textAreaRef: textAreaRef.current,
75      triggerAutoSize: triggerAutoSize,
76      maxHeight,
77      minHeight,
78    });
79 
80    useImperativeHandle(ref, () => ({
81      textArea: textAreaRef.current as HTMLTextAreaElement,
82      focus: () => textAreaRef?.current?.focus(),
83      maxHeight,
84      minHeight,
85    }));
86 
87    React.useEffect(() => {
88// … truncated