{"version":3,"file":"useAutoResizeTextArea.hook.cjs","sources":["../../../../../src/components/forms/text-area/hooks/useAutoResizeTextArea.hook.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\r\nimport type { UseAutoResizeTextAreaOptions } from '@components/forms/text-area/hooks/types'\r\nimport { getTextAreaHeight } from '@components/forms/text-area/hooks/utils/getTextAreaHeight.utils'\r\n\r\n/**\r\n * Automatically resizes a `<textarea>` to fit its content between `minRows`\r\n * and `maxRows`. Once the content reaches `maxRows`, the textarea stops\r\n * expanding and the native scrollbar appears.\r\n */\r\nexport const useAutoResizeTextArea = (\r\n    ref: React.RefObject<HTMLTextAreaElement | null>,\r\n    { minRows, maxRows, value }: UseAutoResizeTextAreaOptions\r\n) => {\r\n    const [isEnabled] = useState(() => minRows !== undefined || maxRows !== undefined)\r\n    const resizeRef = useRef<() => void>(() => {})\r\n\r\n    resizeRef.current = useCallback(() => {\r\n        const el = ref.current\r\n        if (!el || !isEnabled) {\r\n            return\r\n        }\r\n\r\n        el.style.height = `${getTextAreaHeight(el, { minRows, maxRows })}px`\r\n    }, [ref, isEnabled, minRows, maxRows])\r\n\r\n    const handleInput = useCallback(() => {\r\n        resizeRef.current()\r\n    }, [])\r\n\r\n    // Recalculate on mount, on prop changes, and whenever a controlled `value`\r\n    // is updated externally (which would not fire an `input` event).\r\n    useEffect(() => {\r\n        if (!isEnabled) {\r\n            return\r\n        }\r\n        resizeRef.current()\r\n    }, [isEnabled, minRows, maxRows, value])\r\n\r\n    // Recalculate when the textarea's width changes (e.g. container resize or\r\n    // viewport reflow), since wrapping — and therefore content height — depends\r\n    // on width. Guard against feedback loops by reacting to width changes only.\r\n    useEffect(() => {\r\n        const el = ref.current\r\n        if (!isEnabled || !el || typeof ResizeObserver === 'undefined') {\r\n            return\r\n        }\r\n\r\n        let previousWidth = el.clientWidth\r\n        const observer = new ResizeObserver(() => {\r\n            const nextWidth = el.clientWidth\r\n            if (nextWidth !== previousWidth) {\r\n                previousWidth = nextWidth\r\n                resizeRef.current()\r\n            }\r\n        })\r\n        observer.observe(el)\r\n        return () => observer.disconnect()\r\n    }, [ref, isEnabled])\r\n\r\n    return { isEnabled, resize: handleInput }\r\n}\r\n"],"names":["useAutoResizeTextArea","ref","minRows","maxRows","value","isEnabled","useState","resizeRef","useRef","useCallback","el","getTextAreaHeight","handleInput","useEffect","previousWidth","observer","nextWidth"],"mappings":"0JASaA,EAAwB,CACjCC,EACA,CAAE,QAAAC,EAAS,QAAAC,EAAS,MAAAC,KACnB,CACD,KAAM,CAACC,CAAS,EAAIC,EAAAA,SAAS,IAAMJ,IAAY,QAAaC,IAAY,MAAS,EAC3EI,EAAYC,EAAAA,OAAmB,IAAM,CAAC,CAAC,EAE7CD,EAAU,QAAUE,EAAAA,YAAY,IAAM,CAClC,MAAMC,EAAKT,EAAI,QACX,CAACS,GAAM,CAACL,IAIZK,EAAG,MAAM,OAAS,GAAGC,EAAAA,kBAAkBD,EAAI,CAAE,QAAAR,EAAS,QAAAC,EAAS,CAAC,KACpE,EAAG,CAACF,EAAKI,EAAWH,EAASC,CAAO,CAAC,EAErC,MAAMS,EAAcH,EAAAA,YAAY,IAAM,CAClCF,EAAU,QAAA,CACd,EAAG,CAAA,CAAE,EAILM,OAAAA,EAAAA,UAAU,IAAM,CACPR,GAGLE,EAAU,QAAA,CACd,EAAG,CAACF,EAAWH,EAASC,EAASC,CAAK,CAAC,EAKvCS,EAAAA,UAAU,IAAM,CACZ,MAAMH,EAAKT,EAAI,QACf,GAAI,CAACI,GAAa,CAACK,GAAM,OAAO,eAAmB,IAC/C,OAGJ,IAAII,EAAgBJ,EAAG,YACvB,MAAMK,EAAW,IAAI,eAAe,IAAM,CACtC,MAAMC,EAAYN,EAAG,YACjBM,IAAcF,IACdA,EAAgBE,EAChBT,EAAU,QAAA,EAElB,CAAC,EACD,OAAAQ,EAAS,QAAQL,CAAE,EACZ,IAAMK,EAAS,WAAA,CAC1B,EAAG,CAACd,EAAKI,CAAS,CAAC,EAEZ,CAAE,UAAAA,EAAW,OAAQO,CAAA,CAChC"}