funda-ui 4.6.101 → 4.6.151

package/lib/esm/Chatbox/index.tsx

@@ -9,6 +9,8 @@ import useComId from 'funda-utils/dist/cjs/useComId';
 import useDebounce from 'funda-utils/dist/cjs/useDebounce';
 import useThrottle from 'funda-utils/dist/cjs/useThrottle';
 import useClickOutside from 'funda-utils/dist/cjs/useClickOutside';
+import { htmlEncode } from 'funda-utils/dist/cjs/sanitize';
+
 
 
 // loader
@@ -20,8 +22,7 @@ import {
     formatLatestDisplayContent,
     formatName,
     fixHtmlTags,
-    isStreamResponse,
-    htmlEncode
+    isStreamResponse
 } from './utils/func';
 
 import useStreamController from './useStreamController';
@@ -38,6 +39,13 @@ export type MessageDetail = {
     tag: string; // such as '[reply]'
 };
 
+
+export type QuestionData = {
+    title: string;
+    list: Array<string>;
+};
+
+
 export interface FloatingButton {
     label: string;  // HTML string
     value: string;
@@ -77,6 +85,7 @@ export type CustomRequestFunction = (
 
 export type ChatboxProps = {
     debug?: boolean;
+    defaultRows?: number;
     prefix?: string;
     contentRef?: React.RefObject<any>;
     model?: string;
@@ -104,10 +113,12 @@ export type ChatboxProps = {
     toolkitButtons?: FloatingButton[];
     newChatButton?: FloatingButton;
     customMethods?: CustomMethod[]; // [{"name": "method1", "func": "() => { console.log('test'); }"}, ...]
+    defaultQuestions?: QuestionData;
     customRequest?: CustomRequestFunction;
     renderParser?: (input: string) => Promise<string>;
     requestBodyFormatter?: (body: any, contextData: Record<string, any>, conversationHistory: MessageDetail[]) => Promise<Record<string, any>>;
     nameFormatter?: (input: string) => string;
+    onQuestionClick?: (text: string, methods: Record<string, Function>) => void;
     onInputChange?: (controlRef: React.RefObject<any>, val: string) => any;
     onInputCallback?: (input: string) => Promise<string>;
     onChunk?: (controlRef: React.RefObject<any>, lastContent: string, conversationHistory: MessageDetail[]) => any;
@@ -253,6 +264,7 @@ const Chatbox = (props: ChatboxProps) => {
   
         const {
             debug,
+            defaultRows,
             prefix,
             contentRef,
             model,
@@ -276,6 +288,7 @@ const Chatbox = (props: ChatboxProps) => {
             newChatButton,
             maxHistoryLength,
             customRequest,
+            onQuestionClick,
             renderParser,
             requestBodyFormatter,
             nameFormatter,
@@ -328,6 +341,7 @@ const Chatbox = (props: ChatboxProps) => {
   
         return {
             debug,
+            defaultRows,
             prefix,
             contentRef,
             model,
@@ -348,6 +362,7 @@ const Chatbox = (props: ChatboxProps) => {
             toolkitButtons,
             newChatButton,
             customRequest,
+            onQuestionClick,
             renderParser,
             requestBodyFormatter,
             nameFormatter,
@@ -357,6 +372,7 @@ const Chatbox = (props: ChatboxProps) => {
             onComplete,
 
             // 
+            defaultQuestionsRes: questions, 
             latestContextData,
             questionNameRes: _questionName,
             answerNameRes: _answerName,
@@ -371,6 +387,28 @@ const Chatbox = (props: ChatboxProps) => {
     }
 
 
+
+    //================================================================
+    // Custom Questions
+    //================================================================
+    const [questions, setQuestions] = useState<QuestionData | undefined>(props.defaultQuestions);
+    useEffect(() => {
+        if (props.defaultQuestions) {
+            setQuestions(props.defaultQuestions);
+        }
+    }, [props.defaultQuestions]);
+    const hasQuestion = () => {
+        return args().defaultQuestionsRes && (args().defaultQuestionsRes as QuestionData).list.length > 0;
+    };
+    const handleQuestionClick = (text: string) => {
+        if (inputContentRef.current) {
+            inputContentRef.current.set(text);
+        }
+
+        args().onQuestionClick?.(text, exposedMethods());
+    };
+
+
     //================================================================
     // Custom buttons
     //================================================================
@@ -380,7 +418,7 @@ const Chatbox = (props: ChatboxProps) => {
         setActiveButtons(prev => {
             const newState = { ...prev };
             // Turn off only buttons with "isSelect"
-            args().toolkitButtons?.forEach((btn, index) => {
+            args().toolkitButtons?.forEach((btn: FloatingButton, index: number) => {
                 if (btn.isSelect) {
                     const _id = `${args().prefix || 'custom-'}chatbox-btn-tools-${chatId}${index}`;
                     newState[_id] = false;
@@ -1120,7 +1158,7 @@ const Chatbox = (props: ChatboxProps) => {
                 {/**------------- NO DATA -------------*/}
                 {msgList.length === 0 ? <>
 
-                    <div className="d-flex flex-column align-items-center justify-content-center h-50">
+                    <div className={`d-flex flex-column align-items-center justify-content-center ${hasQuestion() ? '' : 'h-50'}`}>
                         <p>
                             <svg width="70px" height="70px" viewBox="0 0 24 24" fill="none">
                                 <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88837 21.6244 10.4003 22 12 22Z" stroke="#858297" strokeWidth="1.5" />
@@ -1130,7 +1168,26 @@ const Chatbox = (props: ChatboxProps) => {
 
                         </p>
                         <p className="text-primary" dangerouslySetInnerHTML={{ __html: `${args().noDataPlaceholder}` }}></p>
+
+                        {/** DEFAULT QUESTIONS */}
+                        {hasQuestion() && (
+                            <div className="default-questions">
+                                <div className="default-questions-title" dangerouslySetInnerHTML={{ __html: `${(args().defaultQuestionsRes as QuestionData).title}` }}></div>
+                                {(args().defaultQuestionsRes as QuestionData).list?.map((question: string, index: number) => (
+                                    <div 
+                                        key={index}
+                                        className="default-question-item"
+                                        onClick={() => handleQuestionClick(question)}
+                                        dangerouslySetInnerHTML={{ __html: `${question}` }}
+                                    />
+                                ))}
+                            </div>
+                        )}
+                        {/** /DEFAULT QUESTIONS */}
+
                     </div>
+
+
                 </> : null}
                 {/**------------- /NO DATA -------------*/}
 
@@ -1300,7 +1357,6 @@ const Chatbox = (props: ChatboxProps) => {
                 {/**------------- CONTROL AREA -------------*/}
                 <div className="msgcontrol">
 
-
                     <Textarea
                         ref={msInput}
                         contentRef={inputContentRef}
@@ -1309,15 +1365,21 @@ const Chatbox = (props: ChatboxProps) => {
                         placeholder={args().placeholder}
                         disabled={loading ? true : false}
                         onKeyDown={(event: React.KeyboardEvent) => {
-                            if (event.key === 'Enter') {
-                                event.preventDefault();
+                            // line breaks
+                            if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+                                return;
+                            }
+                            
+                            if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
+                                event.preventDefault(); // Prevent line breaks
                                 handleClickSafe();
                             }
+
                         }}
                         onChange={(e) => {
                             args().onInputChange?.(inputContentRef.current, e.target.value);
                         }}
-                        rows={3}
+                        rows={args().defaultRows || 3}
                         autoSize
                         autoSizeMaxHeight={200}
                     />

package/lib/esm/Chatbox/utils/func.ts

@@ -127,57 +127,3 @@ export function isStreamResponse(response: Response): boolean {
     return response.body instanceof ReadableStream;
 };
 
-
-
-/**
- * HTML entities encode
- *
- * @param {String} str Input text
- * @return {String} Filtered text
- */
-export function htmlEncode(str) {
-
-    return str.replace(/[&<>'"]/g, tag => ({
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        "'": '&#39;',
-        '"': '&quot;'
-    }[tag]));
-
-}
-
-
-/**
- * HTML entities decode
- *
- * @param {String} str Input text
- * @return {String} Filtered text
- */
-export function htmlDecode(str) {
-
-    let res = '';
-    const entities = [
-        ['amp', '&'],
-        ['apos', '\''],
-        ['#x27', '\''],
-        ['#x2F', '/'],
-        ['#39', '\''],
-        ['#47', '/'],
-        ['lt', '<'],
-        ['gt', '>'],
-        ['nbsp', ' '],
-        ['quot', '"'],
-        ['#60', '<'],
-        ['#62', '>']
-    ];
-
-    for (let i = 0, max = entities.length; i < max; i++) {
-        str = str.replace(new RegExp('&' + entities[i][0] + ';', 'g'), entities[i][1]);
-    }
-    res = str;
-
-    return res;
-
-}
-

package/lib/esm/Date/index.tsx

@@ -28,6 +28,8 @@ import {
 import { isNumeric } from 'funda-utils/dist/cjs/math';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
+
+
 import Calendar from './Calendar';
 
 
@@ -196,6 +198,9 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
         return typeof s === 'undefined' || s === null || s === 'null' || s === '';
     };
     
+    const propExist = (p: any) => {
+        return typeof p !== 'undefined' && p !== null && p !== '';
+    };
 
 
 
@@ -901,7 +906,52 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
         return [_res, v]
 
     }
-    
+
+    function tools() {
+        return <span className={combinedCls(
+            'date2d__control-tools',
+            {
+                'date2d__control-tools--hover-show-tools': SHOW_TOOLS_ENABLED
+            }
+
+        )}>
+
+            <a
+                tabIndex={-1}
+                href="#"
+                className={combinedCls(
+                    'date2d__control-tools__close',
+                    {
+                        'd-none': HIDE_CLEAR_BTN_ENABLED || !dateDefaultValueExist
+                    }
+                )} onClick={(e: React.MouseEvent) => {
+                    e.preventDefault();
+                    e.stopPropagation();  // Avoid triggering pop-ups
+
+                    clearAll();
+                    onClear?.(getFullTimeData(''));
+                }}
+            ><svg width="12px" height="12px" viewBox="0 0 1024 1024"><path fill="#000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" /></svg></a>
+
+            <a
+                tabIndex={-1}
+                href="#"
+                className="date2d__control-tools__trigger"
+                onClick={(e: React.MouseEvent) => {
+                    e.preventDefault();
+                    e.stopPropagation();  // Avoid triggering pop-ups
+
+                    handleShow();
+                }}
+            >
+                <svg width="14px" height="14px" viewBox="0 0 24 24" fill="none">
+                    <path d="M3 9H21M9 15L11 17L15 13M7 3V5M17 3V5M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+            </a>
+
+        </span>;
+    }
+
 
     useEffect(() => {
 
@@ -1309,54 +1359,21 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                                 */}
 
                             </div>
+
+
+
+                            {/* TOOLS */}
+                            {propExist(iconRight) ? tools() : null}
+                            {/* /TOOLS */}
+
+
                         </>}
                         style={style}
                         {...attributes}
                     />
 
                     {/* TOOLS */}
-                    <span className={combinedCls(
-                        'date2d__control-tools',
-                        {
-                            'date2d__control-tools--hover-show-tools': SHOW_TOOLS_ENABLED
-                        }
-
-                    )}>
-
-                        <a 
-                            tabIndex={-1} 
-                            href="#" 
-                            className={combinedCls(
-                                'date2d__control-tools__close',
-                                {
-                                    'd-none': HIDE_CLEAR_BTN_ENABLED || !dateDefaultValueExist
-                                }
-                            )} onClick={(e: React.MouseEvent) => {
-                                e.preventDefault();
-                                e.stopPropagation();  // Avoid triggering pop-ups
-                                
-                                clearAll();
-                                onClear?.(getFullTimeData(''));
-                            }}
-                        ><svg width="12px" height="12px" viewBox="0 0 1024 1024"><path fill="#000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" /></svg></a>
-                        
-                        <a
-                            tabIndex={-1}
-                            href="#"
-                            className="date2d__control-tools__trigger" 
-                            onClick={(e: React.MouseEvent) => {
-                                e.preventDefault();
-                                e.stopPropagation();  // Avoid triggering pop-ups
-
-                                handleShow();
-                            }}
-                        >
-                            <svg width="14px" height="14px" viewBox="0 0 24 24" fill="none">
-                                <path d="M3 9H21M9 15L11 17L15 13M7 3V5M17 3V5M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                            </svg>
-                        </a>
-                        
-                    </span>
+                    {!propExist(iconRight) ? tools() : null}
                     {/* /TOOLS */}
 
                    

package/lib/esm/Input/index.tsx

@@ -6,6 +6,7 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 import { actualPropertyValue, getTextTop } from 'funda-utils/dist/cjs/inputsCalculation';
 import useDebounce from 'funda-utils/dist/cjs/useDebounce';
 
+
 export type InputProps = {
     contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;

package/lib/esm/Select/index.tsx

@@ -50,7 +50,6 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 
-
 export type SelectOptionChangeFnType = (arg1: any, arg2: any, arg3: any) => void;
 
 export interface MultiSelectDataConfig {
@@ -68,9 +67,9 @@ export interface OptionConfig {
     disabled?: boolean;
     optgroup?: any[];
     group?: boolean;
-    label: any;
-    listItemLabel?: any;
-    value: any;
+    label: string;
+    listItemLabel?: string;
+    value: string | number | boolean;
     queryString: string | number;
     callback?: () => void;
 }
@@ -109,7 +108,7 @@ export type SelectProps = {
     multiSelect?: MultiSelectConfig;
     multiSelectEntireAreaTrigger?: boolean;
     multiSelectSelectedItemOnlyStatus?: multiSelectSelectedItemOnlyStatusConfig;
-    renderSelectedValue?: (selectedData: MultiSelectControlValConfig, removeFunc: (e: React.MouseEvent) => void) => void;
+    renderSelectedValue?: (selectedData: MultiSelectControlValConfig, removeFunc: (e: React.MouseEvent) => void) => React.ReactNode;
     cleanTrigger?: CleanTriggerConfig;
     defaultValue?: string | OptionConfig;
     value?: string | OptionConfig;

package/lib/esm/TagInput/index.tsx

@@ -13,6 +13,12 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 
+export interface TagValConfig {
+    content: string;
+    id: number;
+    [key: string]: string | boolean | number; // Allows dynamic attributes
+}
+
 export type TagInputProps = {
     contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
@@ -27,6 +33,7 @@ export type TagInputProps = {
     required?: any;
     readOnly?: any;
     placeholder?: string;
+    renderSelectedValue?: (selectedData: TagValConfig[], removeFunc: (e: React.MouseEvent) => void) => React.ReactNode;
     /** Whether to use square brackets to save result and initialize default value */
     extractValueByBrackets?: boolean;
     /** -- */
@@ -52,6 +59,7 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
         disabled,
         required,
         placeholder,
+        renderSelectedValue,
         readOnly,
         value,
         requiredLabel,
@@ -82,7 +90,7 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
     const max = maxTags ? maxTags : 10;
     const [lastId, setLastId] = useState<number>(-1);
     const [userInput, setUserInput] = useState<string>('');
-    const [items, setItems] = useState<any[]>([]);
+    const [items, setItems] = useState<TagValConfig[]>([]);
     const [alreadyInItems, setAlreadyInItems] = useState<boolean>(false);
     const [onComposition, setOnComposition] = useState<boolean>(false);
 
@@ -115,7 +123,7 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
         } else {
             const _val = VALUE_BY_BRACKETS ? extractContentsOfBrackets(defaultValue) : defaultValue.trim().replace(/^\,|\,$/g, '').split(',');
             if (Array.isArray(_val)) {
-                setItems(_val.map((item: any, index: number) => {
+                setItems(_val.map((item: string, index: number) => {
                     return {
                         content: item,
                         id: index
@@ -129,13 +137,15 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
     }
 
 
-    function handleRemove(e: MouseEvent<HTMLAnchorElement>) {
+    function handleRemove(e: any) {
         e.preventDefault();
+        e.stopPropagation();  /* REQUIRED */
 
         const idToRemove = Number(e.currentTarget.dataset.item);
         const newArray = items!.filter((item: any) => item.id !== idToRemove);
         setItems(newArray);
 
+
         //
         onChange?.(inputRef.current, newArray, VALUE_BY_BRACKETS ? convertArrToValByBrackets(newArray.map(v => v.content)) : newArray.map(v => v.content).join(','));
     }
@@ -270,13 +280,23 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
                 <div className="tag-input__control-wrapper">
                     <div>
                         <ul className="tag-input__list">
-                            {items ? items.map((item: any, index: number) => (
-                                <li key={index}>
-                                    {item.content}
-                                    
-                                    <a href="#" tabIndex={-1} onClick={handleRemove} data-item={item.id}><svg width="10px" height="10px" viewBox="0 0 1024 1024"><path fill="#000"  d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"/></svg></a>
-                                </li>
-                            )) : null}
+
+                             {/* ITEMS LIST */}
+                            {typeof renderSelectedValue === 'function' ? <>
+                                {renderSelectedValue(items, handleRemove)}
+                            </> : <>
+                                {items ? items.map((item: any, index: number) => (
+                                    <li key={index}>
+                                        {item.content}
+                                        
+                                        <a href="#" tabIndex={-1} onClick={handleRemove} data-item={item.id}><svg width="10px" height="10px" viewBox="0 0 1024 1024"><path fill="#000"  d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"/></svg></a>
+                                    </li>
+                                )) : null}
+                            </>}
+
+
+
+
                         </ul>
 
 

package/lib/esm/Textarea/index.tsx

@@ -8,6 +8,7 @@ import { actualPropertyValue, getTextTop } from 'funda-utils/dist/cjs/inputsCalc
 import useDebounce from 'funda-utils/dist/cjs/useDebounce';
 
 
+
 export type TextareaProps = {
     contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
     wrapperClassName?: string;

package/lib/esm/Utils/hooks/useAutosizeTextArea.tsx

@@ -51,7 +51,6 @@ const App = () => {
 
  */
 import { useEffect, useState, useCallback } from "react";
-
 export interface AutosizeTextAreaProps {
     el: any;
     value: string;
@@ -66,68 +65,67 @@ const useAutosizeTextArea = ({
     cb
 }: AutosizeTextAreaProps): { reset: () => void } => {
 
-    const [defaultRowHeight, setDefaultRowHeight] = useState(0);
     const [defaultRowHeightInit, setDefaultRowHeightInit] = useState(false);
 
     // Reset function to restore default height
     const reset = useCallback(() => {
-        if (el && defaultRowHeight > 0) {
-            el.style.height = defaultRowHeight + "px";
-            
-            // Get current dimensions after reset
-            const style = (el as any).currentStyle || window.getComputedStyle(el);
-            const _controlWidth = el.scrollWidth + parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth);
-            cb?.([_controlWidth, defaultRowHeight]);
-        }
-    }, [el, defaultRowHeight, cb]);
+        if (!el) return;
+        
+        const scrollHeight = el.scrollHeight;
+        el.style.height = scrollHeight + "px";
+        
+        // Get current dimensions after reset
+        const style = window.getComputedStyle(el);
+        const _controlWidth = el.scrollWidth + parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth);
+        cb?.([_controlWidth, scrollHeight]);
+    }, [el, cb]);
 
     useEffect(() => {
-        if (el) {
-            const style = (el as any).currentStyle || window.getComputedStyle(el);
-            const _controlWidth = el.scrollWidth + parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth);
-
-            // initialize default row height
-            if (el.scrollHeight > 0 && !defaultRowHeightInit) {
-
-                let _defaultRowHeight = el.scrollHeight + parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth);
-                if (maxHeight != 0 && _defaultRowHeight >= maxHeight) {
-                    _defaultRowHeight = maxHeight;
-                }
-
-                setDefaultRowHeight(_defaultRowHeight);
-                setDefaultRowHeightInit(true);
-            }
-
-            // restore default row height
-            if (defaultRowHeight > 0) {
-                el.style.height = defaultRowHeight + "px";
+        if (!el) return;
+
+        // Initialize default height
+        if (!defaultRowHeightInit) {
+            el.style.height = 'auto';
+            const initialHeight = el.scrollHeight;
+            setDefaultRowHeightInit(true);
+
+            // If the height is 0, set it to "auto"
+            if (initialHeight === 0) {
+                el.style.height = "auto";
+            } else {
+                el.style.height = initialHeight + "px";
             }
 
-            // reset the height momentarily to get the correct scrollHeight for the textarea
-            const scrollHeight = el.scrollHeight;
+        }
 
+        // Get dimensions
+        const style = window.getComputedStyle(el);
+        const _controlWidth = el.scrollWidth + parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth);
+
+        // Calculate height
+        el.style.height = 'auto';
+        let finalHeight = el.scrollHeight;
+        
+        // Apply max height limit if needed
+        if (maxHeight > 0 && finalHeight > maxHeight) {
+            finalHeight = maxHeight;
+        }
 
-            // then set the height directly, outside of the render loop
-            // Trying to set this with state or a ref will product an incorrect value.
+        // Set final height
+        // If the height is 0, set it to "auto"
+        if (finalHeight === 0) {
+            el.style.height = "auto";
+        } else {
+            el.style.height = finalHeight + "px";
+        }
 
-            // !!! Compare initial height and changed height
-            if (scrollHeight > defaultRowHeight && defaultRowHeight > 0) {
 
-                let _scrollHeight = scrollHeight;
-                if (maxHeight != 0 && _scrollHeight >= maxHeight) {
-                    _scrollHeight = maxHeight;
-                }
-                
-                el.style.height = _scrollHeight + "px";
-                
-            }
+        // Callback
+        cb?.([_controlWidth, finalHeight]);
 
-            cb?.([_controlWidth, scrollHeight]);
-        }
-    }, [el, value]);
+    }, [el, value, maxHeight, defaultRowHeightInit]);
 
     return { reset };
 };
 
-export default useAutosizeTextArea;
-
+export default useAutosizeTextArea;