@hh.ru/magritte-ui-textarea 3.3.60 → 3.3.62

package/TextArea.js

@@ -19,7 +19,7 @@ import './types.js';
 import './TextAreaGrowLimiter.js';
 import '@hh.ru/magritte-common-func-utils';
 
-var styles = {"textarea":"magritte-textarea___ugvor_3-3-60","textarea-elevated":"magritte-textarea-elevated___S0jk-_3-3-60","textareaElevated":"magritte-textarea-elevated___S0jk-_3-3-60","textarea-small":"magritte-textarea-small___Q-tsg_3-3-60","textareaSmall":"magritte-textarea-small___Q-tsg_3-3-60","textarea-medium":"magritte-textarea-medium___GNzAm_3-3-60","textareaMedium":"magritte-textarea-medium___GNzAm_3-3-60","textarea-large":"magritte-textarea-large___ugT-5_3-3-60","textareaLarge":"magritte-textarea-large___ugT-5_3-3-60","has-grip":"magritte-has-grip___ATMYQ_3-3-60","hasGrip":"magritte-has-grip___ATMYQ_3-3-60","textarea-limited":"magritte-textarea-limited___cU1Rg_3-3-60","textareaLimited":"magritte-textarea-limited___cU1Rg_3-3-60","maxed-height":"magritte-maxed-height___v1wYG_3-3-60","maxedHeight":"magritte-maxed-height___v1wYG_3-3-60","textarea-focused":"magritte-textarea-focused___eiGyC_3-3-60","textareaFocused":"magritte-textarea-focused___eiGyC_3-3-60","textarea-invalid":"magritte-textarea-invalid___iKOPh_3-3-60","textareaInvalid":"magritte-textarea-invalid___iKOPh_3-3-60","textarea-disabled":"magritte-textarea-disabled___XN0cg_3-3-60","textareaDisabled":"magritte-textarea-disabled___XN0cg_3-3-60","textarea-position-container-wrapper":"magritte-textarea-position-container-wrapper___4Dsui_3-3-60","textareaPositionContainerWrapper":"magritte-textarea-position-container-wrapper___4Dsui_3-3-60","textarea-position-container":"magritte-textarea-position-container___cEpbv_3-3-60","textareaPositionContainer":"magritte-textarea-position-container___cEpbv_3-3-60","native-element":"magritte-native-element___a0RAE_3-3-60","nativeElement":"magritte-native-element___a0RAE_3-3-60","textarea-label":"magritte-textarea-label___sgTIH_3-3-60","textareaLabel":"magritte-textarea-label___sgTIH_3-3-60","textarea-label-elevated":"magritte-textarea-label-elevated___0lxOI_3-3-60","textareaLabelElevated":"magritte-textarea-label-elevated___0lxOI_3-3-60","textarea-limit":"magritte-textarea-limit___IjPJy_3-3-60","textareaLimit":"magritte-textarea-limit___IjPJy_3-3-60","textarea-limit-error":"magritte-textarea-limit-error___vLvZU_3-3-60","textareaLimitError":"magritte-textarea-limit-error___vLvZU_3-3-60","textarea-layout-fill-both":"magritte-textarea-layout-fill-both___ERS-q_3-3-60","textareaLayoutFillBoth":"magritte-textarea-layout-fill-both___ERS-q_3-3-60","textarea-layout-fill-vertical":"magritte-textarea-layout-fill-vertical___HmNtp_3-3-60","textareaLayoutFillVertical":"magritte-textarea-layout-fill-vertical___HmNtp_3-3-60","textarea-layout-fill-horizontal":"magritte-textarea-layout-fill-horizontal___imBH2_3-3-60","textareaLayoutFillHorizontal":"magritte-textarea-layout-fill-horizontal___imBH2_3-3-60","textarea-layout-hug":"magritte-textarea-layout-hug___tdCMY_3-3-60","textareaLayoutHug":"magritte-textarea-layout-hug___tdCMY_3-3-60","textarea-wrapper":"magritte-textarea-wrapper___yD7G6_3-3-60","textareaWrapper":"magritte-textarea-wrapper___yD7G6_3-3-60","value-clone-wrapper":"magritte-value-clone-wrapper___2ZZvS_3-3-60","valueCloneWrapper":"magritte-value-clone-wrapper___2ZZvS_3-3-60","value-clone-container":"magritte-value-clone-container___PVM97_3-3-60","valueCloneContainer":"magritte-value-clone-container___PVM97_3-3-60","side-padding":"magritte-side-padding___O-HUP_3-3-60","sidePadding":"magritte-side-padding___O-HUP_3-3-60","textarea-animation-timeout":"magritte-textarea-animation-timeout___zudbr_3-3-60","textareaAnimationTimeout":"magritte-textarea-animation-timeout___zudbr_3-3-60","textarea-rigging-container":"magritte-textarea-rigging-container___-1S6i_3-3-60","textareaRiggingContainer":"magritte-textarea-rigging-container___-1S6i_3-3-60","label-no-wrap":"magritte-label-no-wrap___RxZ3A_3-3-60","labelNoWrap":"magritte-label-no-wrap___RxZ3A_3-3-60","textarea-grip":"magritte-textarea-grip___iL7lq_3-3-60","textareaGrip":"magritte-textarea-grip___iL7lq_3-3-60","textarea-grip-icon":"magritte-textarea-grip-icon___YK-9w_3-3-60","textareaGripIcon":"magritte-textarea-grip-icon___YK-9w_3-3-60","textarea-limit-enter":"magritte-textarea-limit-enter___CygGz_3-3-60","textareaLimitEnter":"magritte-textarea-limit-enter___CygGz_3-3-60","textarea-limit-exit":"magritte-textarea-limit-exit___RMp-R_3-3-60","textareaLimitExit":"magritte-textarea-limit-exit___RMp-R_3-3-60","textarea-limit-enter-active":"magritte-textarea-limit-enter-active___8vN-t_3-3-60","textareaLimitEnterActive":"magritte-textarea-limit-enter-active___8vN-t_3-3-60","textarea-limit-exit-active":"magritte-textarea-limit-exit-active___a5kBr_3-3-60","textareaLimitExitActive":"magritte-textarea-limit-exit-active___a5kBr_3-3-60"};
+var styles = {"textarea":"magritte-textarea___ugvor_3-3-62","textarea-elevated":"magritte-textarea-elevated___S0jk-_3-3-62","textareaElevated":"magritte-textarea-elevated___S0jk-_3-3-62","textarea-small":"magritte-textarea-small___Q-tsg_3-3-62","textareaSmall":"magritte-textarea-small___Q-tsg_3-3-62","textarea-medium":"magritte-textarea-medium___GNzAm_3-3-62","textareaMedium":"magritte-textarea-medium___GNzAm_3-3-62","textarea-large":"magritte-textarea-large___ugT-5_3-3-62","textareaLarge":"magritte-textarea-large___ugT-5_3-3-62","has-grip":"magritte-has-grip___ATMYQ_3-3-62","hasGrip":"magritte-has-grip___ATMYQ_3-3-62","textarea-limited":"magritte-textarea-limited___cU1Rg_3-3-62","textareaLimited":"magritte-textarea-limited___cU1Rg_3-3-62","maxed-height":"magritte-maxed-height___v1wYG_3-3-62","maxedHeight":"magritte-maxed-height___v1wYG_3-3-62","textarea-focused":"magritte-textarea-focused___eiGyC_3-3-62","textareaFocused":"magritte-textarea-focused___eiGyC_3-3-62","textarea-invalid":"magritte-textarea-invalid___iKOPh_3-3-62","textareaInvalid":"magritte-textarea-invalid___iKOPh_3-3-62","textarea-disabled":"magritte-textarea-disabled___XN0cg_3-3-62","textareaDisabled":"magritte-textarea-disabled___XN0cg_3-3-62","textarea-position-container-wrapper":"magritte-textarea-position-container-wrapper___4Dsui_3-3-62","textareaPositionContainerWrapper":"magritte-textarea-position-container-wrapper___4Dsui_3-3-62","textarea-position-container":"magritte-textarea-position-container___cEpbv_3-3-62","textareaPositionContainer":"magritte-textarea-position-container___cEpbv_3-3-62","native-element":"magritte-native-element___a0RAE_3-3-62","nativeElement":"magritte-native-element___a0RAE_3-3-62","textarea-label":"magritte-textarea-label___sgTIH_3-3-62","textareaLabel":"magritte-textarea-label___sgTIH_3-3-62","textarea-label-elevated":"magritte-textarea-label-elevated___0lxOI_3-3-62","textareaLabelElevated":"magritte-textarea-label-elevated___0lxOI_3-3-62","textarea-limit":"magritte-textarea-limit___IjPJy_3-3-62","textareaLimit":"magritte-textarea-limit___IjPJy_3-3-62","textarea-limit-error":"magritte-textarea-limit-error___vLvZU_3-3-62","textareaLimitError":"magritte-textarea-limit-error___vLvZU_3-3-62","textarea-layout-fill-both":"magritte-textarea-layout-fill-both___ERS-q_3-3-62","textareaLayoutFillBoth":"magritte-textarea-layout-fill-both___ERS-q_3-3-62","textarea-layout-fill-vertical":"magritte-textarea-layout-fill-vertical___HmNtp_3-3-62","textareaLayoutFillVertical":"magritte-textarea-layout-fill-vertical___HmNtp_3-3-62","textarea-layout-fill-horizontal":"magritte-textarea-layout-fill-horizontal___imBH2_3-3-62","textareaLayoutFillHorizontal":"magritte-textarea-layout-fill-horizontal___imBH2_3-3-62","textarea-layout-hug":"magritte-textarea-layout-hug___tdCMY_3-3-62","textareaLayoutHug":"magritte-textarea-layout-hug___tdCMY_3-3-62","textarea-wrapper":"magritte-textarea-wrapper___yD7G6_3-3-62","textareaWrapper":"magritte-textarea-wrapper___yD7G6_3-3-62","value-clone-wrapper":"magritte-value-clone-wrapper___2ZZvS_3-3-62","valueCloneWrapper":"magritte-value-clone-wrapper___2ZZvS_3-3-62","value-clone-container":"magritte-value-clone-container___PVM97_3-3-62","valueCloneContainer":"magritte-value-clone-container___PVM97_3-3-62","side-padding":"magritte-side-padding___O-HUP_3-3-62","sidePadding":"magritte-side-padding___O-HUP_3-3-62","textarea-animation-timeout":"magritte-textarea-animation-timeout___zudbr_3-3-62","textareaAnimationTimeout":"magritte-textarea-animation-timeout___zudbr_3-3-62","textarea-rigging-container":"magritte-textarea-rigging-container___-1S6i_3-3-62","textareaRiggingContainer":"magritte-textarea-rigging-container___-1S6i_3-3-62","label-no-wrap":"magritte-label-no-wrap___RxZ3A_3-3-62","labelNoWrap":"magritte-label-no-wrap___RxZ3A_3-3-62","textarea-grip":"magritte-textarea-grip___iL7lq_3-3-62","textareaGrip":"magritte-textarea-grip___iL7lq_3-3-62","textarea-grip-icon":"magritte-textarea-grip-icon___YK-9w_3-3-62","textareaGripIcon":"magritte-textarea-grip-icon___YK-9w_3-3-62","textarea-limit-enter":"magritte-textarea-limit-enter___CygGz_3-3-62","textareaLimitEnter":"magritte-textarea-limit-enter___CygGz_3-3-62","textarea-limit-exit":"magritte-textarea-limit-exit___RMp-R_3-3-62","textareaLimitExit":"magritte-textarea-limit-exit___RMp-R_3-3-62","textarea-limit-enter-active":"magritte-textarea-limit-enter-active___8vN-t_3-3-62","textareaLimitEnterActive":"magritte-textarea-limit-enter-active___8vN-t_3-3-62","textarea-limit-exit-active":"magritte-textarea-limit-exit-active___a5kBr_3-3-62","textareaLimitExitActive":"magritte-textarea-limit-exit-active___a5kBr_3-3-62"};
 
 const ZERO_WIDTH_SPACE = "\u200B";
 const TextAreaComponent = ({
@@ -79,7 +79,8 @@ const TextAreaComponent = ({
     contentCloneWrapperRef,
     textAreaRef,
     resizableDivRef,
-    minHeight
+    minHeight,
+    maxedHeight
   });
   const trlOf = useTranslation("TextArea", "of");
   useEffect(() => {

package/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["src/TextArea.tsx"],"sourcesContent":["import {\n    forwardRef,\n    ReactElement,\n    useEffect,\n    useId,\n    useRef,\n    useState,\n    type TextareaHTMLAttributes,\n    type ForwardedRef,\n    type CSSProperties,\n} from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { GripSize24 } from '@hh.ru/magritte-ui-icon/private';\nimport { useInputAriaProps } from '@hh.ru/magritte-ui-input/useInputAriaProps';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\nimport { type TextAreaLayout, type ControlledTextAreaProps } from '@hh.ru/magritte-ui-textarea/types';\nimport { useFocus } from '@hh.ru/magritte-ui-textarea/useFocus';\nimport { useHeightObserver } from '@hh.ru/magritte-ui-textarea/useHeightObserver';\nimport { useLimitGrow } from '@hh.ru/magritte-ui-textarea/useLimitGrow';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './textarea.less';\n\nconst ZERO_WIDTH_SPACE = '\\u200B';\n\nconst TextAreaComponent = <Layout extends TextAreaLayout>(\n    {\n        onChange,\n        onFocus,\n        onBlur,\n        onValidate,\n        value,\n        placeholder,\n        disabled = false,\n        elevatePlaceholder = false,\n        invalid = false,\n        invalidLimit = false,\n        maxLength,\n        description,\n        errorMessage,\n        resize = 'none',\n        layout = 'fixed' as Layout,\n        size = 'large',\n        minHeight: _minHeight,\n        maxHeight,\n        'aria-describedby': ariaDescribedBy,\n        ...restProps\n    }: ControlledTextAreaProps<Layout> &\n        Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, keyof ControlledTextAreaProps<'fixed'>>,\n    ref: ForwardedRef<HTMLTextAreaElement>\n) => {\n    const { isMobile } = useBreakpoint();\n    const forceDisabled = useDisabled();\n    const isComponentDisabled = forceDisabled || !!disabled;\n    const [internalInvalid, setInternalInvalid] = useState(false);\n    const [isFocusVisible, setFocusVisible] = useState(false);\n    const limitRef = useRef<HTMLDivElement>(null);\n    const previousInvalid = useRef(internalInvalid);\n    const textAreaRef = useRef<HTMLTextAreaElement>(null);\n    const resizableDivRef = useRef<HTMLDivElement>(null);\n    const resizableDivSizes = useRef<{ width?: number; height?: number } | null>(null);\n    const resizableDivWasResized = useRef(false);\n    const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({\n        axis: isComponentDisabled ? 'none' : 'vertical',\n    });\n    const textAreaRefCallback = useMultipleRefs(ref, textAreaRef, scrollbar.scrollContainerRef);\n    const descriptionId = useId();\n    const labelId = useId();\n    const [animationTimeout, setAnimationTimeout] = useState(100);\n    const currentResizeValue = isMobile ? 'none' : resize;\n    const isResizable = currentResizeValue !== 'none';\n    const contentCloneRef = useRef<HTMLPreElement>(null);\n    const contentCloneWrapperRef = useRef<HTMLDivElement>(null);\n    const { minHeight, maxedHeight } = useHeightObserver({\n        size,\n        minHeight: _minHeight,\n        layout,\n        contentCloneRef,\n        onHeightChange: () => scrollbar.resizeCallbackRef.current?.(),\n    });\n    const { maxHeightRef, allowScrollRef } = useLimitGrow({\n        layout,\n        contentCloneRef,\n        contentCloneWrapperRef,\n        textAreaRef,\n        resizableDivRef,\n        minHeight,\n    });\n    const trlOf = useTranslation('TextArea', 'of');\n\n    useEffect(() => {\n        const animationTimeoutElement = document.createElement('div');\n        animationTimeoutElement.classList.add(styles.textareaAnimationTimeout);\n        document.body.appendChild(animationTimeoutElement);\n        const style = window.getComputedStyle(animationTimeoutElement);\n        const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);\n        if (Number.isInteger(animationTimeout)) {\n            setAnimationTimeout(animationTimeout);\n        }\n        document.body.removeChild(animationTimeoutElement);\n    }, []);\n\n    const { focusHandler, blurHandler, isFocused } = useFocus<HTMLTextAreaElement>(onFocus, onBlur);\n\n    const handleClick = () => {\n        if (resizableDivWasResized.current) {\n            resizableDivWasResized.current = false;\n            return;\n        }\n        textAreaRef.current?.focus();\n    };\n\n    const handleMouseUp = () => {\n        if (\n            resizableDivRef.current?.offsetWidth !== resizableDivSizes.current?.width ||\n            resizableDivRef.current?.offsetHeight !== resizableDivSizes.current?.height\n        ) {\n            resizableDivWasResized.current = true;\n        }\n    };\n\n    const handleMouseDown = () => {\n        resizableDivSizes.current = {\n            width: resizableDivRef.current?.offsetWidth,\n            height: resizableDivRef.current?.offsetHeight,\n        };\n    };\n\n    useEffect(() => {\n        if (maxLength) {\n            const invalid = !isFocused && value.length > maxLength;\n            setInternalInvalid(invalid);\n\n            if (previousInvalid.current !== invalid) {\n                onValidate?.({ invalidLimit: invalid });\n            }\n            previousInvalid.current = invalid;\n        }\n    }, [onValidate, value, internalInvalid, maxLength, isFocused]);\n\n    useEffect(() => {\n        if (textAreaRef.current) {\n            setFocusVisible(isFocused && textAreaRef.current.classList.contains('focus-visible'));\n        }\n    }, [isFocused]);\n\n    useEffect(() => {\n        // для layout === 'hug' resizeCallback вызывается в useHeightObserver, т.к. нужно ожидать перерисовку оберток\n        if (layout !== 'hug') {\n            scrollbar.resizeCallbackRef.current?.();\n        }\n    }, [layout, scrollbar.resizeCallbackRef, value]);\n\n    const placeholderIsElevated = !!elevatePlaceholder && !!placeholder && size === 'large';\n    const showLabel = placeholderIsElevated || value === '';\n\n    const invalidState = invalid || invalidLimit;\n    const ariaProps = useInputAriaProps({\n        invalid: invalidState || internalInvalid,\n        hasDescription: !!description || !!errorMessage || !!ariaDescribedBy,\n        hasPlaceholder: !!placeholder,\n        descriptionId: ariaDescribedBy || `input-description-${descriptionId}`,\n        labelId,\n    });\n\n    const hasElevatedPlaceholderClass = (isFocused || value !== '') && placeholderIsElevated;\n\n    return (\n        <div\n            data-qa=\"textarea-wrapper\"\n            data-interactive={true}\n            className={classnames(styles.textarea, styles[`textarea-${size}`], {\n                [styles.textareaFocused]: isFocused,\n                [styles.textareaDisabled]: isComponentDisabled,\n                [styles.textareaInvalid]: !!(invalidState || internalInvalid),\n                [styles.textareaLimitError]:\n                    invalidLimit || internalInvalid || (maxLength ? value.length > maxLength : false),\n                [styles.textareaLimited]: !!maxLength && maxedHeight,\n                [styles.textareaLayoutFillBoth]: layout === 'fill-both',\n                [styles.textareaLayoutFillVertical]: layout === 'fill-vertical',\n                [styles.textareaLayoutFillHorizontal]: layout === 'fill-horizontal',\n                [styles.textareaLayoutHug]: layout === 'hug',\n                [styles.textareaElevated]: placeholderIsElevated,\n                [styles.hasGrip]: isResizable,\n                [styles.maxedHeight]: size === 'large' && maxedHeight,\n            })}\n        >\n            <div\n                className={classnames(styles.textareaPositionContainerWrapper, scrollbar.hoverContainerCssClass, {\n                    'focus-visible': isFocusVisible,\n                })}\n            >\n                <div\n                    className={classnames(styles.textareaPositionContainer)}\n                    onClick={handleClick}\n                    onMouseDown={isResizable ? handleMouseDown : undefined}\n                    onMouseUp={isResizable ? handleMouseUp : undefined}\n                    style={\n                        {\n                            height: maxHeightRef.current || (maxedHeight ? 'auto' : minHeight),\n                            minHeight,\n                            '--magritte-textarea-max-height': maxHeight\n                                ? `${Math.max(maxHeight, minHeight)}px`\n                                : 'auto',\n                            resize: currentResizeValue,\n                        } as CSSProperties\n                    }\n                    ref={resizableDivRef}\n                >\n                    <div className={styles.textareaWrapper} data-qa=\"textarea-native-wrapper\">\n                        <textarea\n                            {...restProps}\n                            {...ariaProps}\n                            disabled={isComponentDisabled}\n                            suppressHydrationWarning\n                            className={classnames(styles.nativeElement, styles.sidePadding)}\n                            value={value}\n                            onChange={onChange}\n                            onFocus={focusHandler}\n                            onBlur={blurHandler}\n                            style={{ overflowY: layout !== 'hug' || allowScrollRef.current ? 'auto' : 'hidden' }}\n                            ref={textAreaRefCallback}\n                        />\n                        {layout === 'hug' && (\n                            <div\n                                className={classnames(styles.valueCloneWrapper, styles.sidePadding)}\n                                ref={contentCloneWrapperRef}\n                            >\n                                <pre className={styles.valueCloneContainer} ref={contentCloneRef}>\n                                    {`${value}${ZERO_WIDTH_SPACE}`}\n                                </pre>\n                            </div>\n                        )}\n                        {showLabel && (\n                            <div className={classnames(styles.textareaRiggingContainer, styles.sidePadding)}>\n                                <label\n                                    className={classnames(styles.textareaLabel, {\n                                        [styles.labelNoWrap]: elevatePlaceholder,\n                                        [styles.textareaLabelElevated]: hasElevatedPlaceholderClass,\n                                    })}\n                                    id={ariaProps['aria-labelledby']}\n                                >\n                                    {placeholder}\n                                </label>\n                            </div>\n                        )}\n                    </div>\n                    {hasVerticalScroll && <Scrollbar {...verticalScrollbarProps} />}\n                </div>\n                {!!maxLength && maxedHeight && (\n                    <CSSTransition\n                        in={isFocused || value.length > maxLength}\n                        timeout={animationTimeout}\n                        classNames={{\n                            enter: styles.textareaLimitEnter,\n                            enterActive: styles.textareaLimitEnterActive,\n                            exit: styles.textareaLimitExit,\n                            exitActive: styles.textareaLimitExitActive,\n                        }}\n                        unmountOnExit\n                        nodeRef={limitRef}\n                    >\n                        <div className={styles.textareaLimit} ref={limitRef}>\n                            <Text typography=\"label-3-regular\">\n                                {value.length}\n                                {trlOf}\n                                {maxLength}\n                            </Text>\n                        </div>\n                    </CSSTransition>\n                )}\n                {isResizable && (\n                    <div className={styles.textareaGrip}>\n                        <div className={styles.textareaGripIcon}>\n                            <GripSize24 />\n                        </div>\n                    </div>\n                )}\n            </div>\n            <FormHelper\n                description={description}\n                errorMessage={errorMessage}\n                descriptionId={ariaProps['aria-describedby']}\n                disabled={isComponentDisabled}\n                invalid={invalidState}\n                data-qa=\"textarea-hint-container\"\n            />\n        </div>\n    );\n};\n\nconst TextArea = forwardRef(TextAreaComponent) as (<Layout extends TextAreaLayout>(\n    props: ControlledTextAreaProps<Layout> &\n        Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof ControlledTextAreaProps<'fixed'>> & {\n            ref?: React.ForwardedRef<HTMLTextAreaElement>;\n        }\n) => ReactElement | null) & { displayName: string };\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\n"],"names":["animationTimeout","invalid"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","sources":["src/TextArea.tsx"],"sourcesContent":["import {\n    forwardRef,\n    ReactElement,\n    useEffect,\n    useId,\n    useRef,\n    useState,\n    type TextareaHTMLAttributes,\n    type ForwardedRef,\n    type CSSProperties,\n} from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { GripSize24 } from '@hh.ru/magritte-ui-icon/private';\nimport { useInputAriaProps } from '@hh.ru/magritte-ui-input/useInputAriaProps';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\nimport { type TextAreaLayout, type ControlledTextAreaProps } from '@hh.ru/magritte-ui-textarea/types';\nimport { useFocus } from '@hh.ru/magritte-ui-textarea/useFocus';\nimport { useHeightObserver } from '@hh.ru/magritte-ui-textarea/useHeightObserver';\nimport { useLimitGrow } from '@hh.ru/magritte-ui-textarea/useLimitGrow';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './textarea.less';\n\nconst ZERO_WIDTH_SPACE = '\\u200B';\n\nconst TextAreaComponent = <Layout extends TextAreaLayout>(\n    {\n        onChange,\n        onFocus,\n        onBlur,\n        onValidate,\n        value,\n        placeholder,\n        disabled = false,\n        elevatePlaceholder = false,\n        invalid = false,\n        invalidLimit = false,\n        maxLength,\n        description,\n        errorMessage,\n        resize = 'none',\n        layout = 'fixed' as Layout,\n        size = 'large',\n        minHeight: _minHeight,\n        maxHeight,\n        'aria-describedby': ariaDescribedBy,\n        ...restProps\n    }: ControlledTextAreaProps<Layout> &\n        Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, keyof ControlledTextAreaProps<'fixed'>>,\n    ref: ForwardedRef<HTMLTextAreaElement>\n) => {\n    const { isMobile } = useBreakpoint();\n    const forceDisabled = useDisabled();\n    const isComponentDisabled = forceDisabled || !!disabled;\n    const [internalInvalid, setInternalInvalid] = useState(false);\n    const [isFocusVisible, setFocusVisible] = useState(false);\n    const limitRef = useRef<HTMLDivElement>(null);\n    const previousInvalid = useRef(internalInvalid);\n    const textAreaRef = useRef<HTMLTextAreaElement>(null);\n    const resizableDivRef = useRef<HTMLDivElement>(null);\n    const resizableDivSizes = useRef<{ width?: number; height?: number } | null>(null);\n    const resizableDivWasResized = useRef(false);\n    const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({\n        axis: isComponentDisabled ? 'none' : 'vertical',\n    });\n    const textAreaRefCallback = useMultipleRefs(ref, textAreaRef, scrollbar.scrollContainerRef);\n    const descriptionId = useId();\n    const labelId = useId();\n    const [animationTimeout, setAnimationTimeout] = useState(100);\n    const currentResizeValue = isMobile ? 'none' : resize;\n    const isResizable = currentResizeValue !== 'none';\n    const contentCloneRef = useRef<HTMLPreElement>(null);\n    const contentCloneWrapperRef = useRef<HTMLDivElement>(null);\n    const { minHeight, maxedHeight } = useHeightObserver({\n        size,\n        minHeight: _minHeight,\n        layout,\n        contentCloneRef,\n        onHeightChange: () => scrollbar.resizeCallbackRef.current?.(),\n    });\n    const { maxHeightRef, allowScrollRef } = useLimitGrow({\n        layout,\n        contentCloneRef,\n        contentCloneWrapperRef,\n        textAreaRef,\n        resizableDivRef,\n        minHeight,\n        maxedHeight,\n    });\n    const trlOf = useTranslation('TextArea', 'of');\n\n    useEffect(() => {\n        const animationTimeoutElement = document.createElement('div');\n        animationTimeoutElement.classList.add(styles.textareaAnimationTimeout);\n        document.body.appendChild(animationTimeoutElement);\n        const style = window.getComputedStyle(animationTimeoutElement);\n        const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);\n        if (Number.isInteger(animationTimeout)) {\n            setAnimationTimeout(animationTimeout);\n        }\n        document.body.removeChild(animationTimeoutElement);\n    }, []);\n\n    const { focusHandler, blurHandler, isFocused } = useFocus<HTMLTextAreaElement>(onFocus, onBlur);\n\n    const handleClick = () => {\n        if (resizableDivWasResized.current) {\n            resizableDivWasResized.current = false;\n            return;\n        }\n        textAreaRef.current?.focus();\n    };\n\n    const handleMouseUp = () => {\n        if (\n            resizableDivRef.current?.offsetWidth !== resizableDivSizes.current?.width ||\n            resizableDivRef.current?.offsetHeight !== resizableDivSizes.current?.height\n        ) {\n            resizableDivWasResized.current = true;\n        }\n    };\n\n    const handleMouseDown = () => {\n        resizableDivSizes.current = {\n            width: resizableDivRef.current?.offsetWidth,\n            height: resizableDivRef.current?.offsetHeight,\n        };\n    };\n\n    useEffect(() => {\n        if (maxLength) {\n            const invalid = !isFocused && value.length > maxLength;\n            setInternalInvalid(invalid);\n\n            if (previousInvalid.current !== invalid) {\n                onValidate?.({ invalidLimit: invalid });\n            }\n            previousInvalid.current = invalid;\n        }\n    }, [onValidate, value, internalInvalid, maxLength, isFocused]);\n\n    useEffect(() => {\n        if (textAreaRef.current) {\n            setFocusVisible(isFocused && textAreaRef.current.classList.contains('focus-visible'));\n        }\n    }, [isFocused]);\n\n    useEffect(() => {\n        // для layout === 'hug' resizeCallback вызывается в useHeightObserver, т.к. нужно ожидать перерисовку оберток\n        if (layout !== 'hug') {\n            scrollbar.resizeCallbackRef.current?.();\n        }\n    }, [layout, scrollbar.resizeCallbackRef, value]);\n\n    const placeholderIsElevated = !!elevatePlaceholder && !!placeholder && size === 'large';\n    const showLabel = placeholderIsElevated || value === '';\n\n    const invalidState = invalid || invalidLimit;\n    const ariaProps = useInputAriaProps({\n        invalid: invalidState || internalInvalid,\n        hasDescription: !!description || !!errorMessage || !!ariaDescribedBy,\n        hasPlaceholder: !!placeholder,\n        descriptionId: ariaDescribedBy || `input-description-${descriptionId}`,\n        labelId,\n    });\n\n    const hasElevatedPlaceholderClass = (isFocused || value !== '') && placeholderIsElevated;\n\n    return (\n        <div\n            data-qa=\"textarea-wrapper\"\n            data-interactive={true}\n            className={classnames(styles.textarea, styles[`textarea-${size}`], {\n                [styles.textareaFocused]: isFocused,\n                [styles.textareaDisabled]: isComponentDisabled,\n                [styles.textareaInvalid]: !!(invalidState || internalInvalid),\n                [styles.textareaLimitError]:\n                    invalidLimit || internalInvalid || (maxLength ? value.length > maxLength : false),\n                [styles.textareaLimited]: !!maxLength && maxedHeight,\n                [styles.textareaLayoutFillBoth]: layout === 'fill-both',\n                [styles.textareaLayoutFillVertical]: layout === 'fill-vertical',\n                [styles.textareaLayoutFillHorizontal]: layout === 'fill-horizontal',\n                [styles.textareaLayoutHug]: layout === 'hug',\n                [styles.textareaElevated]: placeholderIsElevated,\n                [styles.hasGrip]: isResizable,\n                [styles.maxedHeight]: size === 'large' && maxedHeight,\n            })}\n        >\n            <div\n                className={classnames(styles.textareaPositionContainerWrapper, scrollbar.hoverContainerCssClass, {\n                    'focus-visible': isFocusVisible,\n                })}\n            >\n                <div\n                    className={classnames(styles.textareaPositionContainer)}\n                    onClick={handleClick}\n                    onMouseDown={isResizable ? handleMouseDown : undefined}\n                    onMouseUp={isResizable ? handleMouseUp : undefined}\n                    style={\n                        {\n                            height: maxHeightRef.current || (maxedHeight ? 'auto' : minHeight),\n                            minHeight,\n                            '--magritte-textarea-max-height': maxHeight\n                                ? `${Math.max(maxHeight, minHeight)}px`\n                                : 'auto',\n                            resize: currentResizeValue,\n                        } as CSSProperties\n                    }\n                    ref={resizableDivRef}\n                >\n                    <div className={styles.textareaWrapper} data-qa=\"textarea-native-wrapper\">\n                        <textarea\n                            {...restProps}\n                            {...ariaProps}\n                            disabled={isComponentDisabled}\n                            suppressHydrationWarning\n                            className={classnames(styles.nativeElement, styles.sidePadding)}\n                            value={value}\n                            onChange={onChange}\n                            onFocus={focusHandler}\n                            onBlur={blurHandler}\n                            style={{ overflowY: layout !== 'hug' || allowScrollRef.current ? 'auto' : 'hidden' }}\n                            ref={textAreaRefCallback}\n                        />\n                        {layout === 'hug' && (\n                            <div\n                                className={classnames(styles.valueCloneWrapper, styles.sidePadding)}\n                                ref={contentCloneWrapperRef}\n                            >\n                                <pre className={styles.valueCloneContainer} ref={contentCloneRef}>\n                                    {`${value}${ZERO_WIDTH_SPACE}`}\n                                </pre>\n                            </div>\n                        )}\n                        {showLabel && (\n                            <div className={classnames(styles.textareaRiggingContainer, styles.sidePadding)}>\n                                <label\n                                    className={classnames(styles.textareaLabel, {\n                                        [styles.labelNoWrap]: elevatePlaceholder,\n                                        [styles.textareaLabelElevated]: hasElevatedPlaceholderClass,\n                                    })}\n                                    id={ariaProps['aria-labelledby']}\n                                >\n                                    {placeholder}\n                                </label>\n                            </div>\n                        )}\n                    </div>\n                    {hasVerticalScroll && <Scrollbar {...verticalScrollbarProps} />}\n                </div>\n                {!!maxLength && maxedHeight && (\n                    <CSSTransition\n                        in={isFocused || value.length > maxLength}\n                        timeout={animationTimeout}\n                        classNames={{\n                            enter: styles.textareaLimitEnter,\n                            enterActive: styles.textareaLimitEnterActive,\n                            exit: styles.textareaLimitExit,\n                            exitActive: styles.textareaLimitExitActive,\n                        }}\n                        unmountOnExit\n                        nodeRef={limitRef}\n                    >\n                        <div className={styles.textareaLimit} ref={limitRef}>\n                            <Text typography=\"label-3-regular\">\n                                {value.length}\n                                {trlOf}\n                                {maxLength}\n                            </Text>\n                        </div>\n                    </CSSTransition>\n                )}\n                {isResizable && (\n                    <div className={styles.textareaGrip}>\n                        <div className={styles.textareaGripIcon}>\n                            <GripSize24 />\n                        </div>\n                    </div>\n                )}\n            </div>\n            <FormHelper\n                description={description}\n                errorMessage={errorMessage}\n                descriptionId={ariaProps['aria-describedby']}\n                disabled={isComponentDisabled}\n                invalid={invalidState}\n                data-qa=\"textarea-hint-container\"\n            />\n        </div>\n    );\n};\n\nconst TextArea = forwardRef(TextAreaComponent) as (<Layout extends TextAreaLayout>(\n    props: ControlledTextAreaProps<Layout> &\n        Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof ControlledTextAreaProps<'fixed'>> & {\n            ref?: React.ForwardedRef<HTMLTextAreaElement>;\n        }\n) => ReactElement | null) & { displayName: string };\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\n"],"names":["animationTimeout","invalid"],"mappings":"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"}

package/TextAreaGrowLimiter.d.ts

@@ -11,6 +11,7 @@ export declare const TextAreaGrowLimiter: import("react").ForwardRefExoticCompon
     debounce?: boolean;
     preMeasurement?: VoidFunction;
     postMeasurement?: VoidFunction;
+    disabled?: boolean;
     style?: import("react").HTMLAttributes<HTMLDivElement>['style'];
     className?: import("react").HTMLAttributes<HTMLDivElement>['className'];
 } & {

package/TextAreaGrowLimiter.js

@@ -4,21 +4,25 @@ import { createContext, forwardRef, useRef, useState, useMemo, useEffect } from
 import { debounce } from '@hh.ru/magritte-common-func-utils';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 
-const GrowLimiterContext = createContext({
+const DEFAULT_GROW_LIMITER_CONTEXT_VALUE = {
   getHeightDiff: () => 0,
   onHeightChange: () => void 0,
   offHeightChange: () => void 0,
   heightUpdated: () => void 0,
   hasLimit: false
-});
+};
+const GrowLimiterContext = createContext(DEFAULT_GROW_LIMITER_CONTEXT_VALUE);
 const TextAreaGrowLimiter = forwardRef(
-  ({ children, containerRef, preMeasurement, postMeasurement, debounce: debounce$1 = false, ...rest }, ref) => {
+  ({ children, containerRef, preMeasurement, postMeasurement, debounce: debounce$1 = false, disabled = false, ...rest }, ref) => {
     const wrapperRef = useRef(null);
     const refMultiplexer = useMultipleRefs(ref, wrapperRef);
     const [heightChangeHandlers, _] = useState(() => /* @__PURE__ */ new Set());
     const heightDiffCache = useRef(null);
-    const contextValue = useMemo(
-      () => ({
+    const contextValue = useMemo(() => {
+      if (disabled) {
+        return DEFAULT_GROW_LIMITER_CONTEXT_VALUE;
+      }
+      return {
         getHeightDiff: () => {
           if (heightDiffCache.current === null) {
             const currentContainer = containerRef?.current || wrapperRef?.current?.parentElement;
@@ -42,13 +46,13 @@ const TextAreaGrowLimiter = forwardRef(
         offHeightChange: (callback) => heightChangeHandlers.delete(callback),
         heightUpdated: () => heightDiffCache.current = null,
         hasLimit: true
-      }),
-      [heightChangeHandlers, containerRef, wrapperRef, preMeasurement, postMeasurement]
-    );
+      };
+    }, [disabled, heightChangeHandlers, containerRef, wrapperRef, preMeasurement, postMeasurement]);
     useEffect(
       () => {
+        heightDiffCache.current = null;
         const currentContainer = containerRef?.current || wrapperRef?.current?.parentElement;
-        if (!wrapperRef.current || !currentContainer) {
+        if (disabled || !wrapperRef.current || !currentContainer) {
           return void 0;
         }
         const observerCallback = () => {
@@ -69,14 +73,14 @@ const TextAreaGrowLimiter = forwardRef(
       // eslint считает что containerRef?.current лишняя зависимость, но эффект должен реагировать если
       // значение в рефе изменилось, т.к. обзервер должен переподписаться на другой элемент
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [heightChangeHandlers, containerRef, containerRef?.current, wrapperRef]
+      [disabled, heightChangeHandlers, containerRef, containerRef?.current, wrapperRef]
     );
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref: refMultiplexer,
         ...rest,
-        style: {
+        style: disabled ? rest.style : {
           ...rest.style || {},
           borderBottomStyle: "solid",
           borderBottomColor: "transparent"

package/TextAreaGrowLimiter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaGrowLimiter.js","sources":["src/TextAreaGrowLimiter.tsx"],"sourcesContent":["import { createContext, useRef, forwardRef, useEffect, useState, useMemo } from 'react';\n\nimport { debounce as debounceFunc } from '@hh.ru/magritte-common-func-utils';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport type { TextAreaGrowLimiterProps } from '@hh.ru/magritte-ui-textarea/types';\n\nexport interface GrowLimiterContextValue {\n    getHeightDiff: () => number;\n    onHeightChange: (callback: VoidFunction) => void;\n    offHeightChange: (callback: VoidFunction) => void;\n    heightUpdated: VoidFunction;\n    hasLimit: boolean;\n}\n\nexport const GrowLimiterContext = createContext<GrowLimiterContextValue>({\n    getHeightDiff: () => 0,\n    onHeightChange: () => void 0,\n    offHeightChange: () => void 0,\n    heightUpdated: () => void 0,\n    hasLimit: false,\n});\n\nexport const TextAreaGrowLimiter = forwardRef<HTMLDivElement, TextAreaGrowLimiterProps>(\n    ({ children, containerRef, preMeasurement, postMeasurement, debounce = false, ...rest }, ref) => {\n        const wrapperRef = useRef<HTMLDivElement>(null);\n        const refMultiplexer = useMultipleRefs(ref, wrapperRef);\n        const [heightChangeHandlers, _] = useState(() => new Set<VoidFunction>());\n        const heightDiffCache = useRef<number | null>(null);\n\n        const contextValue = useMemo<GrowLimiterContextValue>(\n            () => ({\n                getHeightDiff: () => {\n                    if (heightDiffCache.current === null) {\n                        const currentContainer = containerRef?.current || wrapperRef?.current?.parentElement;\n\n                        if (!wrapperRef.current || !currentContainer) {\n                            return 0;\n                        }\n\n                        // запоминаем позицию скролла в контейнере, отключаем скролл, вызываем preMeasurement если задан\n                        // в BottomSheet например он отключает ограничение height на внешнем контейнере, чтобы была\n                        // возможность узнать реальный максимальный размер контейнера\n                        const scrollTop = currentContainer.scrollTop;\n                        const overflow = currentContainer.style.overflowY;\n                        currentContainer.style.overflowY = 'hidden';\n                        preMeasurement?.();\n\n                        // Устанавливаем толщину нижней рамки равно 20000 пикселей, чтобы размер обертки гарантированно\n                        // превысил размер контейнера. После этого сравниваем offsetHeight и scrollHeight контейнера\n                        // чтобы вычислить сколько доступно свободного пространства до появления в контейнере скролла\n                        wrapperRef.current.style.borderBottomWidth = '20000px';\n                        heightDiffCache.current = currentContainer.clientHeight - currentContainer.scrollHeight + 20000;\n                        // Вызываем postMeasurement если задан, в BottomSheet он возвращает ограничение height к\n                        // изначальному значению\n                        postMeasurement?.();\n\n                        // Возвращаем настройки контейнера и обретки к изначальным значениям\n                        currentContainer.style.overflowY = overflow;\n                        wrapperRef.current.style.borderBottomWidth = '0';\n                        currentContainer.scrollTop = scrollTop;\n                    }\n                    return heightDiffCache.current;\n                },\n                onHeightChange: (callback) => heightChangeHandlers.add(callback),\n                offHeightChange: (callback) => heightChangeHandlers.delete(callback),\n                heightUpdated: () => (heightDiffCache.current = null),\n                hasLimit: true,\n            }),\n            [heightChangeHandlers, containerRef, wrapperRef, preMeasurement, postMeasurement]\n        );\n\n        useEffect(\n            () => {\n                const currentContainer = containerRef?.current || wrapperRef?.current?.parentElement;\n\n                if (!wrapperRef.current || !currentContainer) {\n                    return void 0;\n                }\n\n                const observerCallback = () => {\n                    heightDiffCache.current = null;\n                    heightChangeHandlers.forEach((callback) => callback());\n                };\n\n                const observer = new ResizeObserver(\n                    debounce ? debounceFunc(observerCallback, 17 /* ~= 1000ms / 60fps */) : observerCallback\n                );\n                observer.observe(wrapperRef.current, { box: 'content-box' });\n                observer.observe(currentContainer, { box: 'content-box' });\n\n                return () => observer.disconnect();\n            },\n            // eslint считает что containerRef?.current лишняя зависимость, но эффект должен реагировать если\n            // значение в рефе изменилось, т.к. обзервер должен переподписаться на другой элемент\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n            [heightChangeHandlers, containerRef, containerRef?.current, wrapperRef]\n        );\n\n        return (\n            <div\n                ref={refMultiplexer}\n                {...rest}\n                style={{\n                    ...(rest.style || {}),\n                    borderBottomStyle: 'solid',\n                    borderBottomColor: 'transparent',\n                }}\n            >\n                <GrowLimiterContext.Provider value={contextValue}>{children}</GrowLimiterContext.Provider>\n            </div>\n        );\n    }\n);\n\nTextAreaGrowLimiter.displayName = 'TextAreaGrowLimiter';\n"],"names":["debounce","debounceFunc"],"mappings":"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"}
+{"version":3,"file":"TextAreaGrowLimiter.js","sources":["src/TextAreaGrowLimiter.tsx"],"sourcesContent":["import { createContext, useRef, forwardRef, useEffect, useState, useMemo } from 'react';\n\nimport { debounce as debounceFunc } from '@hh.ru/magritte-common-func-utils';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport type { TextAreaGrowLimiterProps } from '@hh.ru/magritte-ui-textarea/types';\n\nexport interface GrowLimiterContextValue {\n    getHeightDiff: () => number;\n    onHeightChange: (callback: VoidFunction) => void;\n    offHeightChange: (callback: VoidFunction) => void;\n    heightUpdated: VoidFunction;\n    hasLimit: boolean;\n}\n\nconst DEFAULT_GROW_LIMITER_CONTEXT_VALUE: GrowLimiterContextValue = {\n    getHeightDiff: () => 0,\n    onHeightChange: () => void 0,\n    offHeightChange: () => void 0,\n    heightUpdated: () => void 0,\n    hasLimit: false,\n};\n\nexport const GrowLimiterContext = createContext<GrowLimiterContextValue>(DEFAULT_GROW_LIMITER_CONTEXT_VALUE);\n\nexport const TextAreaGrowLimiter = forwardRef<HTMLDivElement, TextAreaGrowLimiterProps>(\n    ({ children, containerRef, preMeasurement, postMeasurement, debounce = false, disabled = false, ...rest }, ref) => {\n        const wrapperRef = useRef<HTMLDivElement>(null);\n        const refMultiplexer = useMultipleRefs(ref, wrapperRef);\n        const [heightChangeHandlers, _] = useState(() => new Set<VoidFunction>());\n        const heightDiffCache = useRef<number | null>(null);\n\n        const contextValue = useMemo<GrowLimiterContextValue>(() => {\n            if (disabled) {\n                return DEFAULT_GROW_LIMITER_CONTEXT_VALUE;\n            }\n\n            return {\n                getHeightDiff: () => {\n                    if (heightDiffCache.current === null) {\n                        const currentContainer = containerRef?.current || wrapperRef?.current?.parentElement;\n\n                        if (!wrapperRef.current || !currentContainer) {\n                            return 0;\n                        }\n\n                        // запоминаем позицию скролла в контейнере, отключаем скролл, вызываем preMeasurement если задан\n                        // в BottomSheet например он отключает ограничение height на внешнем контейнере, чтобы была\n                        // возможность узнать реальный максимальный размер контейнера\n                        const scrollTop = currentContainer.scrollTop;\n                        const overflow = currentContainer.style.overflowY;\n                        currentContainer.style.overflowY = 'hidden';\n                        preMeasurement?.();\n\n                        // Устанавливаем толщину нижней рамки равно 20000 пикселей, чтобы размер обертки гарантированно\n                        // превысил размер контейнера. После этого сравниваем offsetHeight и scrollHeight контейнера\n                        // чтобы вычислить сколько доступно свободного пространства до появления в контейнере скролла\n                        wrapperRef.current.style.borderBottomWidth = '20000px';\n                        heightDiffCache.current = currentContainer.clientHeight - currentContainer.scrollHeight + 20000;\n                        // Вызываем postMeasurement если задан, в BottomSheet он возвращает ограничение height к\n                        // изначальному значению\n                        postMeasurement?.();\n\n                        // Возвращаем настройки контейнера и обретки к изначальным значениям\n                        currentContainer.style.overflowY = overflow;\n                        wrapperRef.current.style.borderBottomWidth = '0';\n                        currentContainer.scrollTop = scrollTop;\n                    }\n                    return heightDiffCache.current;\n                },\n                onHeightChange: (callback) => heightChangeHandlers.add(callback),\n                offHeightChange: (callback) => heightChangeHandlers.delete(callback),\n                heightUpdated: () => (heightDiffCache.current = null),\n                hasLimit: true,\n            };\n        }, [disabled, heightChangeHandlers, containerRef, wrapperRef, preMeasurement, postMeasurement]);\n\n        useEffect(\n            () => {\n                // в выключенном состоянии ничего не измеряем и не наблюдаем, кеш сбрасываем, чтобы после включения\n                // не использовать устаревшее значение\n                heightDiffCache.current = null;\n\n                const currentContainer = containerRef?.current || wrapperRef?.current?.parentElement;\n\n                if (disabled || !wrapperRef.current || !currentContainer) {\n                    return void 0;\n                }\n\n                const observerCallback = () => {\n                    heightDiffCache.current = null;\n                    heightChangeHandlers.forEach((callback) => callback());\n                };\n\n                const observer = new ResizeObserver(\n                    debounce ? debounceFunc(observerCallback, 17 /* ~= 1000ms / 60fps */) : observerCallback\n                );\n                observer.observe(wrapperRef.current, { box: 'content-box' });\n                observer.observe(currentContainer, { box: 'content-box' });\n\n                return () => observer.disconnect();\n            },\n            // eslint считает что containerRef?.current лишняя зависимость, но эффект должен реагировать если\n            // значение в рефе изменилось, т.к. обзервер должен переподписаться на другой элемент\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n            [disabled, heightChangeHandlers, containerRef, containerRef?.current, wrapperRef]\n        );\n\n        return (\n            <div\n                ref={refMultiplexer}\n                {...rest}\n                style={\n                    disabled\n                        ? rest.style\n                        : {\n                              ...(rest.style || {}),\n                              borderBottomStyle: 'solid',\n                              borderBottomColor: 'transparent',\n                          }\n                }\n            >\n                <GrowLimiterContext.Provider value={contextValue}>{children}</GrowLimiterContext.Provider>\n            </div>\n        );\n    }\n);\n\nTextAreaGrowLimiter.displayName = 'TextAreaGrowLimiter';\n"],"names":["debounce","debounceFunc"],"mappings":"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"}

package/index.css

@@ -84,7 +84,7 @@
 .magritte-zp-day-theme{
   --magritte-color-component-input-stroke-state-field-focused-v26-0-2:#7195AF;
 }
-.magritte-textarea___ugvor_3-3-60{
+.magritte-textarea___ugvor_3-3-62{
   display:inline-flex;
   flex-flow:column;
   --magritte-ui-textarea-vertical-offset:0px;
@@ -92,229 +92,229 @@
   --animation-100-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v26-0-2);
   --animation-300-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-elevated___S0jk-_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-elevated___S0jk-_3-3-62{
   --magritte-ui-textarea-vertical-offset:calc(18px * 0.5);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-small___Q-tsg_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-small___Q-tsg_3-3-62{
   --magritte-ui-textarea-vertical-padding:10px;
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-medium___GNzAm_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-medium___GNzAm_3-3-62{
   --magritte-ui-textarea-vertical-padding:12px;
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-large___ugT-5_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-large___ugT-5_3-3-62{
   --magritte-ui-textarea-vertical-padding:16px;
 }
-.magritte-textarea___ugvor_3-3-60.magritte-has-grip___ATMYQ_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-has-grip___ATMYQ_3-3-62{
   --magritte-ui-textarea-additional-bottom-padding:18px;
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-limited___cU1Rg_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-limited___cU1Rg_3-3-62{
   --magritte-ui-textarea-additional-bottom-padding:20px + 8px;
 }
-.magritte-textarea___ugvor_3-3-60.magritte-maxed-height___v1wYG_3-3-60.magritte-textarea-elevated___S0jk-_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-maxed-height___v1wYG_3-3-62.magritte-textarea-elevated___S0jk-_3-3-62{
   --magritte-ui-textarea-bottom-padding:calc(12px + var(--magritte-ui-textarea-vertical-offset));
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover{
+  body.magritte-old-layout .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover{
     --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-hovered-v26-0-2);
   }
-  body.magritte-old-layout .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-textarea-position-container-wrapper___4Dsui_3-3-60::after{
+  body.magritte-old-layout .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-textarea-position-container-wrapper___4Dsui_3-3-62::after{
     border-bottom-color:var(--magritte-color-component-input-stroke-state-field-hovered-v26-0-2);
     border-right-color:var(--magritte-color-component-input-stroke-state-field-hovered-v26-0-2);
     border-width:1px;
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v26-0-2);
   }
-  body.magritte-old-layout .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-textarea-position-container___cEpbv_3-3-60{
+  body.magritte-old-layout .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-textarea-position-container___cEpbv_3-3-62{
     box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v26-0-2);
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v26-0-2);
   }
-  body.magritte-old-layout .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-native-element___a0RAE_3-3-60{
+  body.magritte-old-layout .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-native-element___a0RAE_3-3-62{
     color:var(--magritte-color-component-input-text-state-content-hovered-v26-0-2);
     -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v26-0-2);
     opacity:1;
   }
-  body.magritte-old-layout .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-textarea-label___sgTIH_3-3-60{
+  body.magritte-old-layout .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-textarea-label___sgTIH_3-3-62{
     color:var(--magritte-color-component-input-text-state-placeholder-hovered-v26-0-2);
   }
-  body.magritte-old-layout .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-textarea-label-elevated___0lxOI_3-3-60{
+  body.magritte-old-layout .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-textarea-label-elevated___0lxOI_3-3-62{
     color:var(--magritte-color-component-input-text-state-label-hovered-v26-0-2);
   }
-  body.magritte-old-layout .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-textarea-limit___IjPJy_3-3-60{
+  body.magritte-old-layout .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-textarea-limit___IjPJy_3-3-62{
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v26-0-2);
   }
-  body.magritte-old-layout .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-textarea-limit___IjPJy_3-3-60{
+  body.magritte-old-layout .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-textarea-limit___IjPJy_3-3-62{
     --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-hovered-v26-0-2);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover{
+  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover{
     --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-hovered-v26-0-2);
   }
-  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-textarea-position-container-wrapper___4Dsui_3-3-60::after{
+  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-textarea-position-container-wrapper___4Dsui_3-3-62::after{
     border-bottom-color:var(--magritte-color-component-input-stroke-state-field-hovered-v26-0-2);
     border-right-color:var(--magritte-color-component-input-stroke-state-field-hovered-v26-0-2);
     border-width:1px;
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v26-0-2);
   }
-  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-textarea-position-container___cEpbv_3-3-60{
+  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-textarea-position-container___cEpbv_3-3-62{
     box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v26-0-2);
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v26-0-2);
   }
-  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-native-element___a0RAE_3-3-60{
+  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-native-element___a0RAE_3-3-62{
     color:var(--magritte-color-component-input-text-state-content-hovered-v26-0-2);
     -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v26-0-2);
     opacity:1;
   }
-  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-textarea-label___sgTIH_3-3-60{
+  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-textarea-label___sgTIH_3-3-62{
     color:var(--magritte-color-component-input-text-state-placeholder-hovered-v26-0-2);
   }
-  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-textarea-label-elevated___0lxOI_3-3-60{
+  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-textarea-label-elevated___0lxOI_3-3-62{
     color:var(--magritte-color-component-input-text-state-label-hovered-v26-0-2);
   }
-  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-textarea-limit___IjPJy_3-3-60{
+  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-textarea-limit___IjPJy_3-3-62{
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v26-0-2);
   }
-  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-60:not(.magritte-textarea-focused___eiGyC_3-3-60):not(.magritte-textarea-invalid___iKOPh_3-3-60):not(.magritte-textarea-disabled___XN0cg_3-3-60):hover .magritte-textarea-limit___IjPJy_3-3-60{
+  body:not(.magritte-old-layout) .magritte-textarea___ugvor_3-3-62:not(.magritte-textarea-focused___eiGyC_3-3-62):not(.magritte-textarea-invalid___iKOPh_3-3-62):not(.magritte-textarea-disabled___XN0cg_3-3-62):hover .magritte-textarea-limit___IjPJy_3-3-62{
     --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-hovered-v26-0-2);
   }
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62{
   --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-focused-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60 .magritte-textarea-position-container-wrapper___4Dsui_3-3-60::after{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62 .magritte-textarea-position-container-wrapper___4Dsui_3-3-62::after{
   border-bottom-color:var(--magritte-color-component-input-stroke-state-field-focused-v26-0-2);
   border-right-color:var(--magritte-color-component-input-stroke-state-field-focused-v26-0-2);
   border-width:2px;
   background-color:var(--magritte-color-component-input-background-state-field-focused-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60 .magritte-textarea-position-container___cEpbv_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62 .magritte-textarea-position-container___cEpbv_3-3-62{
   box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v26-0-2);
   background-color:var(--magritte-color-component-input-background-state-field-focused-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60 .magritte-native-element___a0RAE_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62 .magritte-native-element___a0RAE_3-3-62{
   color:var(--magritte-color-component-input-text-state-content-focused-v26-0-2);
   -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-focused-v26-0-2);
   opacity:1;
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60 .magritte-textarea-label___sgTIH_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62 .magritte-textarea-label___sgTIH_3-3-62{
   color:var(--magritte-color-component-input-text-state-placeholder-focused-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60 .magritte-textarea-label-elevated___0lxOI_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62 .magritte-textarea-label-elevated___0lxOI_3-3-62{
   color:var(--magritte-color-component-input-text-state-label-focused-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60 .magritte-textarea-limit___IjPJy_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62 .magritte-textarea-limit___IjPJy_3-3-62{
   background-color:var(--magritte-color-component-input-background-state-field-focused-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60 .magritte-textarea-limit___IjPJy_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62 .magritte-textarea-limit___IjPJy_3-3-62{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-focused-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-limit-error___vLvZU_3-3-60,
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-limit-error___vLvZU_3-3-62,
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62{
   --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-limit-error___vLvZU_3-3-60 .magritte-textarea-position-container-wrapper___4Dsui_3-3-60::after,
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60 .magritte-textarea-position-container-wrapper___4Dsui_3-3-60::after{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-limit-error___vLvZU_3-3-62 .magritte-textarea-position-container-wrapper___4Dsui_3-3-62::after,
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62 .magritte-textarea-position-container-wrapper___4Dsui_3-3-62::after{
   border-bottom-color:var(--magritte-color-component-input-stroke-state-field-invalid-v26-0-2);
   border-right-color:var(--magritte-color-component-input-stroke-state-field-invalid-v26-0-2);
   border-width:2px;
   background-color:var(--magritte-color-component-input-background-state-field-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-limit-error___vLvZU_3-3-60 .magritte-textarea-position-container___cEpbv_3-3-60,
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60 .magritte-textarea-position-container___cEpbv_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-limit-error___vLvZU_3-3-62 .magritte-textarea-position-container___cEpbv_3-3-62,
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62 .magritte-textarea-position-container___cEpbv_3-3-62{
   box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-invalid-v26-0-2);
   background-color:var(--magritte-color-component-input-background-state-field-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-limit-error___vLvZU_3-3-60 .magritte-native-element___a0RAE_3-3-60,
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60 .magritte-native-element___a0RAE_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-limit-error___vLvZU_3-3-62 .magritte-native-element___a0RAE_3-3-62,
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62 .magritte-native-element___a0RAE_3-3-62{
   color:var(--magritte-color-component-input-text-state-content-invalid-v26-0-2);
   -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v26-0-2);
   opacity:1;
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-limit-error___vLvZU_3-3-60 .magritte-textarea-label___sgTIH_3-3-60,
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60 .magritte-textarea-label___sgTIH_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-limit-error___vLvZU_3-3-62 .magritte-textarea-label___sgTIH_3-3-62,
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62 .magritte-textarea-label___sgTIH_3-3-62{
   color:var(--magritte-color-component-input-text-state-placeholder-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-limit-error___vLvZU_3-3-60 .magritte-textarea-label-elevated___0lxOI_3-3-60,
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60 .magritte-textarea-label-elevated___0lxOI_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-limit-error___vLvZU_3-3-62 .magritte-textarea-label-elevated___0lxOI_3-3-62,
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62 .magritte-textarea-label-elevated___0lxOI_3-3-62{
   color:var(--magritte-color-component-input-text-state-label-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-limit-error___vLvZU_3-3-60 .magritte-textarea-limit___IjPJy_3-3-60,
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60 .magritte-textarea-limit___IjPJy_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-limit-error___vLvZU_3-3-62 .magritte-textarea-limit___IjPJy_3-3-62,
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62 .magritte-textarea-limit___IjPJy_3-3-62{
   background-color:var(--magritte-color-component-input-background-state-field-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-focused___eiGyC_3-3-60.magritte-textarea-limit-error___vLvZU_3-3-60 .magritte-textarea-limit___IjPJy_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-focused___eiGyC_3-3-62.magritte-textarea-limit-error___vLvZU_3-3-62 .magritte-textarea-limit___IjPJy_3-3-62{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62{
   --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60 .magritte-textarea-position-container-wrapper___4Dsui_3-3-60::after{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62 .magritte-textarea-position-container-wrapper___4Dsui_3-3-62::after{
   border-bottom-color:var(--magritte-color-component-input-stroke-state-field-invalid-v26-0-2);
   border-right-color:var(--magritte-color-component-input-stroke-state-field-invalid-v26-0-2);
   border-width:1px;
   background-color:var(--magritte-color-component-input-background-state-field-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60 .magritte-textarea-position-container___cEpbv_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62 .magritte-textarea-position-container___cEpbv_3-3-62{
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v26-0-2);
   background-color:var(--magritte-color-component-input-background-state-field-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60 .magritte-native-element___a0RAE_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62 .magritte-native-element___a0RAE_3-3-62{
   color:var(--magritte-color-component-input-text-state-content-invalid-v26-0-2);
   -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v26-0-2);
   opacity:1;
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60 .magritte-textarea-label___sgTIH_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62 .magritte-textarea-label___sgTIH_3-3-62{
   color:var(--magritte-color-component-input-text-state-placeholder-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60 .magritte-textarea-label-elevated___0lxOI_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62 .magritte-textarea-label-elevated___0lxOI_3-3-62{
   color:var(--magritte-color-component-input-text-state-label-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-invalid___iKOPh_3-3-60 .magritte-textarea-limit___IjPJy_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-invalid___iKOPh_3-3-62 .magritte-textarea-limit___IjPJy_3-3-62{
   background-color:var(--magritte-color-component-input-background-state-field-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-limit-error___vLvZU_3-3-60 .magritte-textarea-limit___IjPJy_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-limit-error___vLvZU_3-3-62 .magritte-textarea-limit___IjPJy_3-3-62{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-invalid-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-disabled___XN0cg_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-disabled___XN0cg_3-3-62{
   --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-disabled-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-disabled___XN0cg_3-3-60 .magritte-textarea-position-container-wrapper___4Dsui_3-3-60::after{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-disabled___XN0cg_3-3-62 .magritte-textarea-position-container-wrapper___4Dsui_3-3-62::after{
   border-bottom-color:var(--magritte-color-component-input-stroke-state-field-disabled-v26-0-2);
   border-right-color:var(--magritte-color-component-input-stroke-state-field-disabled-v26-0-2);
   border-width:1px;
   background-color:var(--magritte-color-component-input-background-state-field-disabled-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-disabled___XN0cg_3-3-60 .magritte-textarea-position-container___cEpbv_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-disabled___XN0cg_3-3-62 .magritte-textarea-position-container___cEpbv_3-3-62{
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v26-0-2);
   background-color:var(--magritte-color-component-input-background-state-field-disabled-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-disabled___XN0cg_3-3-60 .magritte-native-element___a0RAE_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-disabled___XN0cg_3-3-62 .magritte-native-element___a0RAE_3-3-62{
   color:var(--magritte-color-component-input-text-state-content-disabled-v26-0-2);
   -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-disabled-v26-0-2);
   opacity:1;
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-disabled___XN0cg_3-3-60 .magritte-textarea-label___sgTIH_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-disabled___XN0cg_3-3-62 .magritte-textarea-label___sgTIH_3-3-62{
   color:var(--magritte-color-component-input-text-state-placeholder-disabled-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-disabled___XN0cg_3-3-60 .magritte-textarea-label-elevated___0lxOI_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-disabled___XN0cg_3-3-62 .magritte-textarea-label-elevated___0lxOI_3-3-62{
   color:var(--magritte-color-component-input-text-state-label-disabled-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-disabled___XN0cg_3-3-60 .magritte-textarea-limit___IjPJy_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-disabled___XN0cg_3-3-62 .magritte-textarea-limit___IjPJy_3-3-62{
   background-color:var(--magritte-color-component-input-background-state-field-disabled-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-disabled___XN0cg_3-3-60 .magritte-textarea-limit___IjPJy_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-disabled___XN0cg_3-3-62 .magritte-textarea-limit___IjPJy_3-3-62{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-disabled-v26-0-2);
 }
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-disabled___XN0cg_3-3-60 .magritte-textarea-position-container___cEpbv_3-3-60,
-.magritte-textarea___ugvor_3-3-60.magritte-textarea-disabled___XN0cg_3-3-60 .magritte-native-element___a0RAE_3-3-60{
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-disabled___XN0cg_3-3-62 .magritte-textarea-position-container___cEpbv_3-3-62,
+.magritte-textarea___ugvor_3-3-62.magritte-textarea-disabled___XN0cg_3-3-62 .magritte-native-element___a0RAE_3-3-62{
   cursor:not-allowed;
 }
 @media (prefers-reduced-motion){
-  .magritte-textarea___ugvor_3-3-60{
+  .magritte-textarea___ugvor_3-3-62{
     --animation-100-duration:1ms;
     --animation-300-duration:1ms;
   }
 }
-.magritte-textarea-position-container-wrapper___4Dsui_3-3-60{
+.magritte-textarea-position-container-wrapper___4Dsui_3-3-62{
   display:inline-flex;
   position:relative;
   overflow:hidden;
@@ -322,14 +322,14 @@
   border-radius:12px;
   --magritte-ui-scrollbar-border-radius:12px;
 }
-.magritte-textarea-position-container-wrapper___4Dsui_3-3-60.focus-visible{
+.magritte-textarea-position-container-wrapper___4Dsui_3-3-62.focus-visible{
   outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v26-0-2) solid 4px;
 }
-.magritte-textarea-invalid___iKOPh_3-3-60 .magritte-textarea-position-container-wrapper___4Dsui_3-3-60.focus-visible,
-.magritte-textarea-limit-error___vLvZU_3-3-60 .magritte-textarea-position-container-wrapper___4Dsui_3-3-60.focus-visible{
+.magritte-textarea-invalid___iKOPh_3-3-62 .magritte-textarea-position-container-wrapper___4Dsui_3-3-62.focus-visible,
+.magritte-textarea-limit-error___vLvZU_3-3-62 .magritte-textarea-position-container-wrapper___4Dsui_3-3-62.focus-visible{
   outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v26-0-2);
 }
-.magritte-textarea-position-container-wrapper___4Dsui_3-3-60::after{
+.magritte-textarea-position-container-wrapper___4Dsui_3-3-62::after{
   display:none;
   pointer-events:none;
   user-select:none;
@@ -344,10 +344,10 @@
   border-bottom:1px solid var(--magritte-color-component-input-stroke-field-v26-0-2);
   border-right:1px solid var(--magritte-color-component-input-stroke-field-v26-0-2);
 }
-.magritte-has-grip___ATMYQ_3-3-60 .magritte-textarea-position-container-wrapper___4Dsui_3-3-60::after{
+.magritte-has-grip___ATMYQ_3-3-62 .magritte-textarea-position-container-wrapper___4Dsui_3-3-62::after{
   display:block;
 }
-.magritte-native-element___a0RAE_3-3-60{
+.magritte-native-element___a0RAE_3-3-62{
   box-sizing:border-box;
   border:0;
   width:100%;
@@ -375,11 +375,11 @@
   background:none;
   appearance:none;
 }
-.magritte-native-element___a0RAE_3-3-60::-webkit-scrollbar{
+.magritte-native-element___a0RAE_3-3-62::-webkit-scrollbar{
   display:none;
 }
-.magritte-textarea-medium___GNzAm_3-3-60 .magritte-native-element___a0RAE_3-3-60,
-.magritte-textarea-large___ugT-5_3-3-60 .magritte-native-element___a0RAE_3-3-60{
+.magritte-textarea-medium___GNzAm_3-3-62 .magritte-native-element___a0RAE_3-3-62,
+.magritte-textarea-large___ugT-5_3-3-62 .magritte-native-element___a0RAE_3-3-62{
   font-family:"hh sans";
   font-weight:400;
   line-height:22px;
@@ -389,45 +389,45 @@
   text-transform:none;
   text-decoration:none;
 }
-.magritte-native-element___a0RAE_3-3-60:focus{
+.magritte-native-element___a0RAE_3-3-62:focus{
   outline:none;
 }
-.magritte-textarea-layout-fill-both___ERS-q_3-3-60 .magritte-textarea-position-container-wrapper___4Dsui_3-3-60,
-.magritte-textarea-layout-fill-vertical___HmNtp_3-3-60 .magritte-textarea-position-container-wrapper___4Dsui_3-3-60,
-.magritte-textarea-layout-fill-horizontal___imBH2_3-3-60 .magritte-textarea-position-container-wrapper___4Dsui_3-3-60{
+.magritte-textarea-layout-fill-both___ERS-q_3-3-62 .magritte-textarea-position-container-wrapper___4Dsui_3-3-62,
+.magritte-textarea-layout-fill-vertical___HmNtp_3-3-62 .magritte-textarea-position-container-wrapper___4Dsui_3-3-62,
+.magritte-textarea-layout-fill-horizontal___imBH2_3-3-62 .magritte-textarea-position-container-wrapper___4Dsui_3-3-62{
   flex:1;
 }
-.magritte-textarea-layout-fill-both___ERS-q_3-3-60{
+.magritte-textarea-layout-fill-both___ERS-q_3-3-62{
   width:100%;
   height:100%;
 }
-.magritte-textarea-layout-fill-vertical___HmNtp_3-3-60{
+.magritte-textarea-layout-fill-vertical___HmNtp_3-3-62{
   height:100%;
 }
-.magritte-textarea-layout-fill-horizontal___imBH2_3-3-60,
-.magritte-textarea-layout-hug___tdCMY_3-3-60{
+.magritte-textarea-layout-fill-horizontal___imBH2_3-3-62,
+.magritte-textarea-layout-hug___tdCMY_3-3-62{
   width:100%;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout  .magritte-textarea-layout-hug___tdCMY_3-3-60 .magritte-textarea-position-container___cEpbv_3-3-60{
+  body.magritte-old-layout  .magritte-textarea-layout-hug___tdCMY_3-3-62 .magritte-textarea-position-container___cEpbv_3-3-62{
     max-height:var(--magritte-textarea-max-height, auto);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout)  .magritte-textarea-layout-hug___tdCMY_3-3-60 .magritte-textarea-position-container___cEpbv_3-3-60{
+  body:not(.magritte-old-layout)  .magritte-textarea-layout-hug___tdCMY_3-3-62 .magritte-textarea-position-container___cEpbv_3-3-62{
     max-height:var(--magritte-textarea-max-height, auto);
   }
 }
-.magritte-textarea-wrapper___yD7G6_3-3-60{
+.magritte-textarea-wrapper___yD7G6_3-3-62{
   display:grid;
   width:100%;
 }
-.magritte-value-clone-wrapper___2ZZvS_3-3-60{
+.magritte-value-clone-wrapper___2ZZvS_3-3-62{
   grid-area:1 / 1 / 2 / 2;
   min-height:0;
   overflow:hidden;
 }
-.magritte-value-clone-container___PVM97_3-3-60{
+.magritte-value-clone-container___PVM97_3-3-62{
   margin:0;
   box-sizing:border-box;
   border:0;
@@ -455,11 +455,11 @@
   visibility:hidden;
   pointer-events:none;
 }
-.magritte-value-clone-container___PVM97_3-3-60::-webkit-scrollbar{
+.magritte-value-clone-container___PVM97_3-3-62::-webkit-scrollbar{
   display:none;
 }
-.magritte-textarea-medium___GNzAm_3-3-60 .magritte-value-clone-container___PVM97_3-3-60,
-.magritte-textarea-large___ugT-5_3-3-60 .magritte-value-clone-container___PVM97_3-3-60{
+.magritte-textarea-medium___GNzAm_3-3-62 .magritte-value-clone-container___PVM97_3-3-62,
+.magritte-textarea-large___ugT-5_3-3-62 .magritte-value-clone-container___PVM97_3-3-62{
   font-family:"hh sans";
   font-weight:400;
   line-height:22px;
@@ -469,16 +469,16 @@
   text-transform:none;
   text-decoration:none;
 }
-.magritte-textarea-small___Q-tsg_3-3-60 .magritte-side-padding___O-HUP_3-3-60{
+.magritte-textarea-small___Q-tsg_3-3-62 .magritte-side-padding___O-HUP_3-3-62{
   padding:0 calc(12px - 2px);
 }
-.magritte-textarea-medium___GNzAm_3-3-60 .magritte-side-padding___O-HUP_3-3-60{
+.magritte-textarea-medium___GNzAm_3-3-62 .magritte-side-padding___O-HUP_3-3-62{
   padding:0 calc(16px - 2px);
 }
-.magritte-textarea-large___ugT-5_3-3-60 .magritte-side-padding___O-HUP_3-3-60{
+.magritte-textarea-large___ugT-5_3-3-62 .magritte-side-padding___O-HUP_3-3-62{
   padding:0 calc(16px - 2px);
 }
-.magritte-textarea-position-container___cEpbv_3-3-60{
+.magritte-textarea-position-container___cEpbv_3-3-62{
   display:inline-flex;
   overflow:hidden;
   position:relative;
@@ -490,19 +490,19 @@
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v26-0-2);
   padding:var(--magritte-ui-textarea-vertical-padding) 2px var(--magritte-ui-textarea-bottom-padding, var(--magritte-ui-textarea-vertical-padding));
 }
-.magritte-textarea-animation-timeout___zudbr_3-3-60,
-.magritte-textarea-position-container___cEpbv_3-3-60{
+.magritte-textarea-animation-timeout___zudbr_3-3-62,
+.magritte-textarea-position-container___cEpbv_3-3-62{
   transition-property:transform, color, font-size, letter-spacing;
   transition-duration:var(--animation-100-duration);
   transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v26-0-2);
   --animation-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v26-0-2);
 }
-.magritte-textarea-rigging-container___-1S6i_3-3-60{
+.magritte-textarea-rigging-container___-1S6i_3-3-62{
   position:relative;
   pointer-events:none;
   grid-area:1 / 1 / 2 / 2;
 }
-.magritte-textarea-label___sgTIH_3-3-60{
+.magritte-textarea-label___sgTIH_3-3-62{
   font-family:"hh sans";
   font-weight:400;
   line-height:22px;
@@ -520,10 +520,10 @@
   transition-duration:var(--animation-100-duration);
   transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v26-0-2);
 }
-.magritte-label-no-wrap___RxZ3A_3-3-60{
+.magritte-label-no-wrap___RxZ3A_3-3-62{
   white-space:nowrap;
 }
-.magritte-textarea-label-elevated___0lxOI_3-3-60{
+.magritte-textarea-label-elevated___0lxOI_3-3-62{
   font-family:"hh sans";
   font-weight:400;
   line-height:18px;
@@ -535,7 +535,7 @@
   color:var(--magritte-color-component-input-text-label-v26-0-2);
   transform:translateY(calc(18px * -0.5));
 }
-.magritte-textarea-limit___IjPJy_3-3-60{
+.magritte-textarea-limit___IjPJy_3-3-62{
   position:absolute;
   bottom:8px;
   right:12px;
@@ -546,7 +546,7 @@
   z-index:1;
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-limit-v26-0-2);
 }
-.magritte-textarea-grip___iL7lq_3-3-60{
+.magritte-textarea-grip___iL7lq_3-3-62{
   position:absolute;
   pointer-events:none;
   display:inline-flex;
@@ -555,25 +555,25 @@
   border-bottom-right-radius:12px;
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-grip-v26-0-2);
 }
-.magritte-textarea-grip-icon___YK-9w_3-3-60{
+.magritte-textarea-grip-icon___YK-9w_3-3-62{
   display:inline-flex;
   z-index:1;
 }
 @media (prefers-reduced-motion: no-preference){
-  .magritte-textarea-limit-enter___CygGz_3-3-60{
+  .magritte-textarea-limit-enter___CygGz_3-3-62{
     opacity:0;
   }
-  .magritte-textarea-limit-exit___RMp-R_3-3-60,
-  .magritte-textarea-limit-enter-active___8vN-t_3-3-60{
+  .magritte-textarea-limit-exit___RMp-R_3-3-62,
+  .magritte-textarea-limit-enter-active___8vN-t_3-3-62{
     opacity:1;
   }
-  .magritte-textarea-limit-enter-active___8vN-t_3-3-60{
+  .magritte-textarea-limit-enter-active___8vN-t_3-3-62{
     transition-property:opacity;
     transition-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v26-0-2);
     transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v26-0-2);
     --animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v26-0-2);
   }
-  .magritte-textarea-limit-exit-active___a5kBr_3-3-60{
+  .magritte-textarea-limit-exit-active___a5kBr_3-3-62{
     opacity:0;
     transition-property:opacity;
     transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v26-0-2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-textarea",
-  "version": "3.3.60",
+  "version": "3.3.62",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -27,12 +27,12 @@
     "@hh.ru/magritte-common-func-utils": "1.3.17",
     "@hh.ru/magritte-common-use-disabled": "1.0.17",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.13",
-    "@hh.ru/magritte-common-use-translation": "3.7.0",
+    "@hh.ru/magritte-common-use-translation": "3.8.0",
     "@hh.ru/magritte-design-tokens": "26.0.2",
     "@hh.ru/magritte-ui-breakpoint": "6.1.3",
     "@hh.ru/magritte-ui-form-helper": "2.1.27",
     "@hh.ru/magritte-ui-icon": "15.1.6",
-    "@hh.ru/magritte-ui-input": "9.4.56",
+    "@hh.ru/magritte-ui-input": "9.4.57",
     "@hh.ru/magritte-ui-scrollbar": "1.0.40",
     "@hh.ru/magritte-ui-typography": "5.3.17"
   },
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b2ad93b0a58b9d2cf766f456b91b54168494de89"
+  "gitHead": "d3182e9c5671dcf62e80e756b6701ec9f72cd7d0"
 }

package/types.d.ts

@@ -21,6 +21,12 @@ export type TextAreaGrowLimiterProps = PropsWithChildren<{
      * Функция вызываемая после снятия метрик с контейнера.
      */
     postMeasurement?: VoidFunction;
+    /**
+     * Отключает ограничение роста: обертка остается в DOM, но не измеряет контейнер и не ограничивает высоту
+     * вложенных `TextArea`. Позволяет не перемонтировать содержимое, когда ограничение нужно только в части случаев.
+     * @default false
+     */
+    disabled?: boolean;
     style?: HTMLAttributes<HTMLDivElement>['style'];
     className?: HTMLAttributes<HTMLDivElement>['className'];
 }> & HTMLAttributes<HTMLDivElement>;

package/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["src/types.ts"],"sourcesContent":["import type {\n    ReactNode,\n    FocusEventHandler,\n    ChangeEventHandler,\n    PropsWithChildren,\n    RefObject,\n    HTMLAttributes,\n} from 'react';\n\nexport type TextAreaGrowLimiterProps = PropsWithChildren<{\n    /**\n     * Ссылка на контейнер, который должен ограничивать высоту TextArea.\n     * Если не указан, то используется непосредственный родитель компонента в DOM\n     * */\n    containerRef?: RefObject<HTMLElement>;\n    /**\n     * Применять ли дебаунс при пересчете размера TextArea.\n     * Если вы ожидаете, что для изменения размера контента или контейнера будет использоваться анимация, то имеет\n     * смысл использовать дебаунс для вызова перерасчета. В случае если анимации нет дебаунс можно не использовать.\n     */\n    debounce?: boolean;\n    /**\n     * Функция вызываемая перед снятием метрик с контейнера. Может понадобиться при наличии кастомной логики на\n     * контейнере. Например если контейнер фиксирует свой размер, но при изменении размера контента подстраивает свой\n     * размер под него. В этом случае перед съемом метрик может понадобиться убрать фиксированный размер на контейнере.\n     */\n    preMeasurement?: VoidFunction;\n    /**\n     * Функция вызываемая после снятия метрик с контейнера.\n     */\n    postMeasurement?: VoidFunction;\n    style?: HTMLAttributes<HTMLDivElement>['style'];\n    className?: HTMLAttributes<HTMLDivElement>['className'];\n}> &\n    HTMLAttributes<HTMLDivElement>;\n\nexport type TextAreaSize = 'small' | 'medium' | 'large';\nexport type TextAreaLayout = 'fixed' | 'hug' | 'fill-vertical' | 'fill-horizontal' | 'fill-both';\n\nexport type BaseTextAreaProps<Layout extends TextAreaLayout> = {\n    /** Текст плейсхолдера */\n    placeholder?: ReactNode;\n    /** Обработчик события получения фокуса */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /** Обработчик события потери фокуса */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /** Текст подсказки под textarea */\n    description?: ReactNode;\n    /** Текст сообщения об ошибке */\n    errorMessage?: ReactNode;\n    /** Флаг отключения textarea */\n    disabled?: boolean;\n    /** Признак невалидности */\n    invalid?: boolean;\n    /** Признак невалидности по лимиту */\n    invalidLimit?: boolean;\n    /** Флаг управляющий режимом отображения полейсхолдера */\n    elevatePlaceholder?: boolean;\n    /** Определяет отступы и типографику компонента */\n    size?: TextAreaSize;\n    /** Лимит на количество символов, отображает текущее состояние и лимит */\n    maxLength?: number;\n    /** Функция для связывания внешней валидации с внутренней */\n    onValidate?: (invalidState: { invalidLimit: boolean }) => void;\n    /** Позволяет задать в каком направлении допустимо ручное изменение размера. Доступно только с `layout=\"fixed\"` */\n    resize?: Layout extends 'fixed' ? 'none' | 'both' | 'horizontal' | 'vertical' : 'none';\n    layout?: Layout;\n    /** Позволяет задать максимальную высоту при `layout=\"hug\"`. Если значение равно 0 высота не ограничена. */\n    maxHeight?: Layout extends 'hug' ? number : never;\n} & TextAreaSizes<Layout>;\n\ntype TextAreaSizes<\n    Layout extends TextAreaLayout = 'fixed',\n    AllowBothHeight extends boolean = Layout extends 'hug' ? true : false,\n> =\n    | { size: 'small'; minHeight?: AllowBothHeight extends true ? 40 | 80 : 80 }\n    | { size: 'medium'; minHeight?: AllowBothHeight extends true ? 48 | 96 : 96 }\n    | { size?: 'large'; minHeight?: AllowBothHeight extends true ? 56 | 112 : 112 };\n\nexport interface ControlledProps {\n    /** Обработчик события изменения */\n    onChange: ChangeEventHandler<HTMLTextAreaElement>;\n    /** Значение textarea */\n    value: string;\n}\n\nexport type UncontrolledTextAreaProps<Layout extends TextAreaLayout> = Partial<ControlledProps> &\n    BaseTextAreaProps<Layout>;\n\nexport type ControlledTextAreaProps<Layout extends TextAreaLayout> = BaseTextAreaProps<Layout> & ControlledProps;\n\nexport const MIN_HEIGHT_BY_SIZE = {\n    small: [40, 80],\n    medium: [48, 96],\n    large: [56, 112],\n} as const;\n"],"names":[],"mappings":"AA2FO,MAAM,kBAAqB,GAAA;AAAA,EAC9B,KAAA,EAAO,CAAC,EAAA,EAAI,EAAE,CAAA;AAAA,EACd,MAAA,EAAQ,CAAC,EAAA,EAAI,EAAE,CAAA;AAAA,EACf,KAAA,EAAO,CAAC,EAAA,EAAI,GAAG,CAAA;AACnB;;;;"}
+{"version":3,"file":"types.js","sources":["src/types.ts"],"sourcesContent":["import type {\n    ReactNode,\n    FocusEventHandler,\n    ChangeEventHandler,\n    PropsWithChildren,\n    RefObject,\n    HTMLAttributes,\n} from 'react';\n\nexport type TextAreaGrowLimiterProps = PropsWithChildren<{\n    /**\n     * Ссылка на контейнер, который должен ограничивать высоту TextArea.\n     * Если не указан, то используется непосредственный родитель компонента в DOM\n     * */\n    containerRef?: RefObject<HTMLElement>;\n    /**\n     * Применять ли дебаунс при пересчете размера TextArea.\n     * Если вы ожидаете, что для изменения размера контента или контейнера будет использоваться анимация, то имеет\n     * смысл использовать дебаунс для вызова перерасчета. В случае если анимации нет дебаунс можно не использовать.\n     */\n    debounce?: boolean;\n    /**\n     * Функция вызываемая перед снятием метрик с контейнера. Может понадобиться при наличии кастомной логики на\n     * контейнере. Например если контейнер фиксирует свой размер, но при изменении размера контента подстраивает свой\n     * размер под него. В этом случае перед съемом метрик может понадобиться убрать фиксированный размер на контейнере.\n     */\n    preMeasurement?: VoidFunction;\n    /**\n     * Функция вызываемая после снятия метрик с контейнера.\n     */\n    postMeasurement?: VoidFunction;\n    /**\n     * Отключает ограничение роста: обертка остается в DOM, но не измеряет контейнер и не ограничивает высоту\n     * вложенных `TextArea`. Позволяет не перемонтировать содержимое, когда ограничение нужно только в части случаев.\n     * @default false\n     */\n    disabled?: boolean;\n    style?: HTMLAttributes<HTMLDivElement>['style'];\n    className?: HTMLAttributes<HTMLDivElement>['className'];\n}> &\n    HTMLAttributes<HTMLDivElement>;\n\nexport type TextAreaSize = 'small' | 'medium' | 'large';\nexport type TextAreaLayout = 'fixed' | 'hug' | 'fill-vertical' | 'fill-horizontal' | 'fill-both';\n\nexport type BaseTextAreaProps<Layout extends TextAreaLayout> = {\n    /** Текст плейсхолдера */\n    placeholder?: ReactNode;\n    /** Обработчик события получения фокуса */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /** Обработчик события потери фокуса */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /** Текст подсказки под textarea */\n    description?: ReactNode;\n    /** Текст сообщения об ошибке */\n    errorMessage?: ReactNode;\n    /** Флаг отключения textarea */\n    disabled?: boolean;\n    /** Признак невалидности */\n    invalid?: boolean;\n    /** Признак невалидности по лимиту */\n    invalidLimit?: boolean;\n    /** Флаг управляющий режимом отображения полейсхолдера */\n    elevatePlaceholder?: boolean;\n    /** Определяет отступы и типографику компонента */\n    size?: TextAreaSize;\n    /** Лимит на количество символов, отображает текущее состояние и лимит */\n    maxLength?: number;\n    /** Функция для связывания внешней валидации с внутренней */\n    onValidate?: (invalidState: { invalidLimit: boolean }) => void;\n    /** Позволяет задать в каком направлении допустимо ручное изменение размера. Доступно только с `layout=\"fixed\"` */\n    resize?: Layout extends 'fixed' ? 'none' | 'both' | 'horizontal' | 'vertical' : 'none';\n    layout?: Layout;\n    /** Позволяет задать максимальную высоту при `layout=\"hug\"`. Если значение равно 0 высота не ограничена. */\n    maxHeight?: Layout extends 'hug' ? number : never;\n} & TextAreaSizes<Layout>;\n\ntype TextAreaSizes<\n    Layout extends TextAreaLayout = 'fixed',\n    AllowBothHeight extends boolean = Layout extends 'hug' ? true : false,\n> =\n    | { size: 'small'; minHeight?: AllowBothHeight extends true ? 40 | 80 : 80 }\n    | { size: 'medium'; minHeight?: AllowBothHeight extends true ? 48 | 96 : 96 }\n    | { size?: 'large'; minHeight?: AllowBothHeight extends true ? 56 | 112 : 112 };\n\nexport interface ControlledProps {\n    /** Обработчик события изменения */\n    onChange: ChangeEventHandler<HTMLTextAreaElement>;\n    /** Значение textarea */\n    value: string;\n}\n\nexport type UncontrolledTextAreaProps<Layout extends TextAreaLayout> = Partial<ControlledProps> &\n    BaseTextAreaProps<Layout>;\n\nexport type ControlledTextAreaProps<Layout extends TextAreaLayout> = BaseTextAreaProps<Layout> & ControlledProps;\n\nexport const MIN_HEIGHT_BY_SIZE = {\n    small: [40, 80],\n    medium: [48, 96],\n    large: [56, 112],\n} as const;\n"],"names":[],"mappings":"AAiGO,MAAM,kBAAqB,GAAA;AAAA,EAC9B,KAAA,EAAO,CAAC,EAAA,EAAI,EAAE,CAAA;AAAA,EACd,MAAA,EAAQ,CAAC,EAAA,EAAI,EAAE,CAAA;AAAA,EACf,KAAA,EAAO,CAAC,EAAA,EAAI,GAAG,CAAA;AACnB;;;;"}

package/useLimitGrow.d.ts

@@ -7,8 +7,9 @@ type UseLimitGrowArgs = {
     resizableDivRef: RefObject<HTMLElement>;
     textAreaRef: RefObject<HTMLTextAreaElement>;
     minHeight: number;
+    maxedHeight: boolean;
 };
-export declare const useLimitGrow: ({ layout, contentCloneRef, contentCloneWrapperRef, resizableDivRef, textAreaRef, minHeight, }: UseLimitGrowArgs) => {
+export declare const useLimitGrow: ({ layout, contentCloneRef, contentCloneWrapperRef, resizableDivRef, textAreaRef, minHeight, maxedHeight, }: UseLimitGrowArgs) => {
     maxHeightRef: RefObject<string>;
     allowScrollRef: RefObject<boolean>;
 };

package/useLimitGrow.js

@@ -11,17 +11,24 @@ const useLimitGrow = ({
   contentCloneWrapperRef,
   resizableDivRef,
   textAreaRef,
-  minHeight
+  minHeight,
+  maxedHeight
 }) => {
   const growLimiterContext = useContext(GrowLimiterContext);
   const allowScrollRef = useRef(false);
   const maxHeightRef = useRef(null);
+  const limitAppliedRef = useRef(false);
   if (layout !== "hug" || !growLimiterContext.hasLimit) {
     maxHeightRef.current = null;
     allowScrollRef.current = true;
   }
   useLayoutEffect(() => {
     if (layout !== "hug" || !contentCloneRef.current || !growLimiterContext.hasLimit) {
+      if (limitAppliedRef.current) {
+        limitAppliedRef.current = false;
+        textAreaRef.current && (textAreaRef.current.style.overflowY = "auto");
+        resizableDivRef.current && (resizableDivRef.current.style.height = maxedHeight ? "auto" : `${minHeight}px`);
+      }
       return void 0;
     }
     const applyHeightLimit = () => {
@@ -38,6 +45,7 @@ const useLimitGrow = ({
       textAreaRef.current.style.overflowY = allowScrollRef.current ? "auto" : "hidden";
       resizableDivRef.current.style.height = `${appliedHeight}px`;
       maxHeightRef.current = `${appliedHeight}px`;
+      limitAppliedRef.current = true;
       if (appliedHeight !== height) {
         growLimiterContext.heightUpdated();
       }
@@ -51,7 +59,16 @@ const useLimitGrow = ({
       observer.disconnect();
       context.offHeightChange(applyHeightLimit);
     };
-  }, [layout, growLimiterContext, contentCloneRef, contentCloneWrapperRef, resizableDivRef, minHeight, textAreaRef]);
+  }, [
+    layout,
+    growLimiterContext,
+    contentCloneRef,
+    contentCloneWrapperRef,
+    resizableDivRef,
+    minHeight,
+    maxedHeight,
+    textAreaRef
+  ]);
   return { maxHeightRef, allowScrollRef };
 };
 

package/useLimitGrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLimitGrow.js","sources":["src/useLimitGrow.ts"],"sourcesContent":["import { useRef, useContext, useLayoutEffect, type RefObject } from 'react';\n\nimport { GrowLimiterContext } from '@hh.ru/magritte-ui-textarea/TextAreaGrowLimiter';\nimport type { TextAreaLayout } from '@hh.ru/magritte-ui-textarea/types';\n\ntype UseLimitGrowArgs = {\n    layout: TextAreaLayout;\n    contentCloneRef: RefObject<HTMLElement>;\n    contentCloneWrapperRef: RefObject<HTMLElement>;\n    resizableDivRef: RefObject<HTMLElement>;\n    textAreaRef: RefObject<HTMLTextAreaElement>;\n    minHeight: number;\n};\n\nexport const useLimitGrow = ({\n    layout,\n    contentCloneRef,\n    contentCloneWrapperRef,\n    resizableDivRef,\n    textAreaRef,\n    minHeight,\n}: UseLimitGrowArgs): { maxHeightRef: RefObject<string>; allowScrollRef: RefObject<boolean> } => {\n    const growLimiterContext = useContext(GrowLimiterContext);\n    const allowScrollRef = useRef(false);\n    const maxHeightRef = useRef<string | null>(null);\n\n    if (layout !== 'hug' || !growLimiterContext.hasLimit) {\n        maxHeightRef.current = null;\n        allowScrollRef.current = true;\n    }\n\n    useLayoutEffect(() => {\n        if (layout !== 'hug' || !contentCloneRef.current || !growLimiterContext.hasLimit) {\n            return void 0;\n        }\n\n        const applyHeightLimit = () => {\n            if (\n                !resizableDivRef.current ||\n                !contentCloneWrapperRef.current ||\n                !contentCloneRef.current ||\n                !textAreaRef.current\n            ) {\n                return;\n            }\n\n            // Сравниваем высоту контейнера содержащего клон контента текстарии и его обертки. Контейнер может свободно\n            // менять высоту чтобы уместить весь контент. Обертка может только свободно уменьшаться, при увеличении\n            // размера контента размер обертки не меняется. Вычитая одно из другого получаем положительное число равное\n            // изменению размера контента если контент стал больше, и 0 если он уменьшился.\n            const contentCloneHeight = contentCloneRef.current.offsetHeight;\n            const contentCloneWrapperHeight = contentCloneWrapperRef.current.offsetHeight;\n            const contentHeightDelta = contentCloneHeight - contentCloneWrapperHeight;\n            // Размер внешнего контейнера текстарии\n            const height = resizableDivRef.current.offsetHeight;\n\n            // Получаем количество свободного пространства в контейнере которое можем занять до получения скролла\n            // Число может быть отрицательным если в контейнере уже присутствует скролл, тогда это количество пикселей\n            // на которое нужно уменьшить высоту контента чтобы скролл исчез.\n            const heightDiff = growLimiterContext.getHeightDiff();\n            // Вычисляем новую высоту внешнего контейнера как сумму его текущей высоты и дельты высоты контента.\n            // Убеждаемся что добавляем к высоте текстарии не больше пикселей, чем доступно в контейнере до появления\n            // скролла. В результате размер текстарии может уменьшиться, если в контейнере доступно отрицательное\n            // количество пикселей до появления скролла (в случае если скролл уже появился из-за добавления другого\n            // контента например).\n            // Убеждаемся, что высота не стала меньше минимальной допустимой\n            const appliedHeight = Math.max(height + Math.min(contentHeightDelta, heightDiff), minHeight);\n            allowScrollRef.current = contentHeightDelta > heightDiff || heightDiff < 0;\n            textAreaRef.current.style.overflowY = allowScrollRef.current ? 'auto' : 'hidden';\n            resizableDivRef.current.style.height = `${appliedHeight}px`;\n            maxHeightRef.current = `${appliedHeight}px`;\n            if (appliedHeight !== height) {\n                // При тестировании в хроме с 20x slowdown сброс кеша в height diff контексте не успевал сработать за\n                // период дебаунса, из-за этого если зажать enter компонент мог стать больше по высоте чем контейнер\n                // и ограничение срабатывало только после отпускания клавиши,поэтому добавил принудительный сброс кеша\n                // при изменении размера компонента\n                growLimiterContext.heightUpdated();\n            }\n        };\n\n        const observer = new ResizeObserver(applyHeightLimit);\n        // Запускаем процесс пересчета максимальной высоты текстарии каждый раз\n        // когда вертикальный размер контента меняется\n        observer.observe(contentCloneRef.current, { box: 'border-box' });\n        const context = growLimiterContext;\n        // Так же запускаем его когда меняется размер контейнера скролла в котором мы пытаемся избежать.\n        // Или размер обертки которую создает TextAreaGrowLimiter, например вследствие добавления или удаления\n        // контента рядом с текстарией.\n        context.onHeightChange(applyHeightLimit);\n        applyHeightLimit();\n\n        return () => {\n            observer.disconnect();\n            context.offHeightChange(applyHeightLimit);\n        };\n    }, [layout, growLimiterContext, contentCloneRef, contentCloneWrapperRef, resizableDivRef, minHeight, textAreaRef]);\n\n    return { maxHeightRef, allowScrollRef };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useLimitGrow.js","sources":["src/useLimitGrow.ts"],"sourcesContent":["import { useRef, useContext, useLayoutEffect, type RefObject } from 'react';\n\nimport { GrowLimiterContext } from '@hh.ru/magritte-ui-textarea/TextAreaGrowLimiter';\nimport type { TextAreaLayout } from '@hh.ru/magritte-ui-textarea/types';\n\ntype UseLimitGrowArgs = {\n    layout: TextAreaLayout;\n    contentCloneRef: RefObject<HTMLElement>;\n    contentCloneWrapperRef: RefObject<HTMLElement>;\n    resizableDivRef: RefObject<HTMLElement>;\n    textAreaRef: RefObject<HTMLTextAreaElement>;\n    minHeight: number;\n    maxedHeight: boolean;\n};\n\nexport const useLimitGrow = ({\n    layout,\n    contentCloneRef,\n    contentCloneWrapperRef,\n    resizableDivRef,\n    textAreaRef,\n    minHeight,\n    maxedHeight,\n}: UseLimitGrowArgs): { maxHeightRef: RefObject<string>; allowScrollRef: RefObject<boolean> } => {\n    const growLimiterContext = useContext(GrowLimiterContext);\n    const allowScrollRef = useRef(false);\n    const maxHeightRef = useRef<string | null>(null);\n    const limitAppliedRef = useRef(false);\n\n    if (layout !== 'hug' || !growLimiterContext.hasLimit) {\n        maxHeightRef.current = null;\n        allowScrollRef.current = true;\n    }\n\n    useLayoutEffect(() => {\n        if (layout !== 'hug' || !contentCloneRef.current || !growLimiterContext.hasLimit) {\n            if (limitAppliedRef.current) {\n                // Ограничение сняли на лету (например, TextAreaGrowLimiter выключили пропом disabled). React\n                // перезаписывает style только при изменении пропа, поэтому значения, выставленные вручную в\n                // applyHeightLimit, возвращаем к тем, что компонент рендерит без ограничения.\n                limitAppliedRef.current = false;\n                textAreaRef.current && (textAreaRef.current.style.overflowY = 'auto');\n                resizableDivRef.current &&\n                    (resizableDivRef.current.style.height = maxedHeight ? 'auto' : `${minHeight}px`);\n            }\n            return void 0;\n        }\n\n        const applyHeightLimit = () => {\n            if (\n                !resizableDivRef.current ||\n                !contentCloneWrapperRef.current ||\n                !contentCloneRef.current ||\n                !textAreaRef.current\n            ) {\n                return;\n            }\n\n            // Сравниваем высоту контейнера содержащего клон контента текстарии и его обертки. Контейнер может свободно\n            // менять высоту чтобы уместить весь контент. Обертка может только свободно уменьшаться, при увеличении\n            // размера контента размер обертки не меняется. Вычитая одно из другого получаем положительное число равное\n            // изменению размера контента если контент стал больше, и 0 если он уменьшился.\n            const contentCloneHeight = contentCloneRef.current.offsetHeight;\n            const contentCloneWrapperHeight = contentCloneWrapperRef.current.offsetHeight;\n            const contentHeightDelta = contentCloneHeight - contentCloneWrapperHeight;\n            // Размер внешнего контейнера текстарии\n            const height = resizableDivRef.current.offsetHeight;\n\n            // Получаем количество свободного пространства в контейнере которое можем занять до получения скролла\n            // Число может быть отрицательным если в контейнере уже присутствует скролл, тогда это количество пикселей\n            // на которое нужно уменьшить высоту контента чтобы скролл исчез.\n            const heightDiff = growLimiterContext.getHeightDiff();\n            // Вычисляем новую высоту внешнего контейнера как сумму его текущей высоты и дельты высоты контента.\n            // Убеждаемся что добавляем к высоте текстарии не больше пикселей, чем доступно в контейнере до появления\n            // скролла. В результате размер текстарии может уменьшиться, если в контейнере доступно отрицательное\n            // количество пикселей до появления скролла (в случае если скролл уже появился из-за добавления другого\n            // контента например).\n            // Убеждаемся, что высота не стала меньше минимальной допустимой\n            const appliedHeight = Math.max(height + Math.min(contentHeightDelta, heightDiff), minHeight);\n            allowScrollRef.current = contentHeightDelta > heightDiff || heightDiff < 0;\n            textAreaRef.current.style.overflowY = allowScrollRef.current ? 'auto' : 'hidden';\n            resizableDivRef.current.style.height = `${appliedHeight}px`;\n            maxHeightRef.current = `${appliedHeight}px`;\n            limitAppliedRef.current = true;\n            if (appliedHeight !== height) {\n                // При тестировании в хроме с 20x slowdown сброс кеша в height diff контексте не успевал сработать за\n                // период дебаунса, из-за этого если зажать enter компонент мог стать больше по высоте чем контейнер\n                // и ограничение срабатывало только после отпускания клавиши,поэтому добавил принудительный сброс кеша\n                // при изменении размера компонента\n                growLimiterContext.heightUpdated();\n            }\n        };\n\n        const observer = new ResizeObserver(applyHeightLimit);\n        // Запускаем процесс пересчета максимальной высоты текстарии каждый раз\n        // когда вертикальный размер контента меняется\n        observer.observe(contentCloneRef.current, { box: 'border-box' });\n        const context = growLimiterContext;\n        // Так же запускаем его когда меняется размер контейнера скролла в котором мы пытаемся избежать.\n        // Или размер обертки которую создает TextAreaGrowLimiter, например вследствие добавления или удаления\n        // контента рядом с текстарией.\n        context.onHeightChange(applyHeightLimit);\n        applyHeightLimit();\n\n        return () => {\n            observer.disconnect();\n            context.offHeightChange(applyHeightLimit);\n        };\n    }, [\n        layout,\n        growLimiterContext,\n        contentCloneRef,\n        contentCloneWrapperRef,\n        resizableDivRef,\n        minHeight,\n        maxedHeight,\n        textAreaRef,\n    ]);\n\n    return { maxHeightRef, allowScrollRef };\n};\n"],"names":[],"mappings":"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"}