@hh.ru/magritte-ui-textarea 3.3.53 → 3.3.55

package/TextArea.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
-import { type TextAreaLayout, type ControlledTextAreaProps } from '@hh.ru/magritte-ui-textarea/types';
-declare const TextArea: (<Layout extends TextAreaLayout>(props: ControlledTextAreaProps<Layout> & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof ControlledTextAreaProps<"fixed">> & {
+import { type TextAreaLayout, type ControlledTextAreaProps } from './types';
+declare const TextArea: (<Layout extends TextAreaLayout>(props: ControlledTextAreaProps<Layout> & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof ControlledTextAreaProps<'fixed'>> & {
     ref?: React.ForwardedRef<HTMLTextAreaElement>;
 }) => ReactElement | null) & {
     displayName: string;

package/TextArea.js

@@ -19,145 +19,254 @@ import './types.js';
 import './TextAreaGrowLimiter.js';
 import '@hh.ru/magritte-common-func-utils';
 
-var styles = {"textarea":"magritte-textarea___ugvor_3-3-53","textarea-elevated":"magritte-textarea-elevated___S0jk-_3-3-53","textareaElevated":"magritte-textarea-elevated___S0jk-_3-3-53","textarea-small":"magritte-textarea-small___Q-tsg_3-3-53","textareaSmall":"magritte-textarea-small___Q-tsg_3-3-53","textarea-medium":"magritte-textarea-medium___GNzAm_3-3-53","textareaMedium":"magritte-textarea-medium___GNzAm_3-3-53","textarea-large":"magritte-textarea-large___ugT-5_3-3-53","textareaLarge":"magritte-textarea-large___ugT-5_3-3-53","has-grip":"magritte-has-grip___ATMYQ_3-3-53","hasGrip":"magritte-has-grip___ATMYQ_3-3-53","textarea-limited":"magritte-textarea-limited___cU1Rg_3-3-53","textareaLimited":"magritte-textarea-limited___cU1Rg_3-3-53","maxed-height":"magritte-maxed-height___v1wYG_3-3-53","maxedHeight":"magritte-maxed-height___v1wYG_3-3-53","textarea-focused":"magritte-textarea-focused___eiGyC_3-3-53","textareaFocused":"magritte-textarea-focused___eiGyC_3-3-53","textarea-invalid":"magritte-textarea-invalid___iKOPh_3-3-53","textareaInvalid":"magritte-textarea-invalid___iKOPh_3-3-53","textarea-disabled":"magritte-textarea-disabled___XN0cg_3-3-53","textareaDisabled":"magritte-textarea-disabled___XN0cg_3-3-53","textarea-position-container-wrapper":"magritte-textarea-position-container-wrapper___4Dsui_3-3-53","textareaPositionContainerWrapper":"magritte-textarea-position-container-wrapper___4Dsui_3-3-53","textarea-position-container":"magritte-textarea-position-container___cEpbv_3-3-53","textareaPositionContainer":"magritte-textarea-position-container___cEpbv_3-3-53","native-element":"magritte-native-element___a0RAE_3-3-53","nativeElement":"magritte-native-element___a0RAE_3-3-53","textarea-label":"magritte-textarea-label___sgTIH_3-3-53","textareaLabel":"magritte-textarea-label___sgTIH_3-3-53","textarea-label-elevated":"magritte-textarea-label-elevated___0lxOI_3-3-53","textareaLabelElevated":"magritte-textarea-label-elevated___0lxOI_3-3-53","textarea-limit":"magritte-textarea-limit___IjPJy_3-3-53","textareaLimit":"magritte-textarea-limit___IjPJy_3-3-53","textarea-limit-error":"magritte-textarea-limit-error___vLvZU_3-3-53","textareaLimitError":"magritte-textarea-limit-error___vLvZU_3-3-53","textarea-layout-fill-both":"magritte-textarea-layout-fill-both___ERS-q_3-3-53","textareaLayoutFillBoth":"magritte-textarea-layout-fill-both___ERS-q_3-3-53","textarea-layout-fill-vertical":"magritte-textarea-layout-fill-vertical___HmNtp_3-3-53","textareaLayoutFillVertical":"magritte-textarea-layout-fill-vertical___HmNtp_3-3-53","textarea-layout-fill-horizontal":"magritte-textarea-layout-fill-horizontal___imBH2_3-3-53","textareaLayoutFillHorizontal":"magritte-textarea-layout-fill-horizontal___imBH2_3-3-53","textarea-layout-hug":"magritte-textarea-layout-hug___tdCMY_3-3-53","textareaLayoutHug":"magritte-textarea-layout-hug___tdCMY_3-3-53","textarea-wrapper":"magritte-textarea-wrapper___yD7G6_3-3-53","textareaWrapper":"magritte-textarea-wrapper___yD7G6_3-3-53","value-clone-wrapper":"magritte-value-clone-wrapper___2ZZvS_3-3-53","valueCloneWrapper":"magritte-value-clone-wrapper___2ZZvS_3-3-53","value-clone-container":"magritte-value-clone-container___PVM97_3-3-53","valueCloneContainer":"magritte-value-clone-container___PVM97_3-3-53","side-padding":"magritte-side-padding___O-HUP_3-3-53","sidePadding":"magritte-side-padding___O-HUP_3-3-53","textarea-animation-timeout":"magritte-textarea-animation-timeout___zudbr_3-3-53","textareaAnimationTimeout":"magritte-textarea-animation-timeout___zudbr_3-3-53","textarea-rigging-container":"magritte-textarea-rigging-container___-1S6i_3-3-53","textareaRiggingContainer":"magritte-textarea-rigging-container___-1S6i_3-3-53","label-no-wrap":"magritte-label-no-wrap___RxZ3A_3-3-53","labelNoWrap":"magritte-label-no-wrap___RxZ3A_3-3-53","textarea-grip":"magritte-textarea-grip___iL7lq_3-3-53","textareaGrip":"magritte-textarea-grip___iL7lq_3-3-53","textarea-grip-icon":"magritte-textarea-grip-icon___YK-9w_3-3-53","textareaGripIcon":"magritte-textarea-grip-icon___YK-9w_3-3-53","textarea-limit-enter":"magritte-textarea-limit-enter___CygGz_3-3-53","textareaLimitEnter":"magritte-textarea-limit-enter___CygGz_3-3-53","textarea-limit-exit":"magritte-textarea-limit-exit___RMp-R_3-3-53","textareaLimitExit":"magritte-textarea-limit-exit___RMp-R_3-3-53","textarea-limit-enter-active":"magritte-textarea-limit-enter-active___8vN-t_3-3-53","textareaLimitEnterActive":"magritte-textarea-limit-enter-active___8vN-t_3-3-53","textarea-limit-exit-active":"magritte-textarea-limit-exit-active___a5kBr_3-3-53","textareaLimitExitActive":"magritte-textarea-limit-exit-active___a5kBr_3-3-53"};
+var styles = {"textarea":"magritte-textarea___ugvor_3-3-55","textarea-elevated":"magritte-textarea-elevated___S0jk-_3-3-55","textareaElevated":"magritte-textarea-elevated___S0jk-_3-3-55","textarea-small":"magritte-textarea-small___Q-tsg_3-3-55","textareaSmall":"magritte-textarea-small___Q-tsg_3-3-55","textarea-medium":"magritte-textarea-medium___GNzAm_3-3-55","textareaMedium":"magritte-textarea-medium___GNzAm_3-3-55","textarea-large":"magritte-textarea-large___ugT-5_3-3-55","textareaLarge":"magritte-textarea-large___ugT-5_3-3-55","has-grip":"magritte-has-grip___ATMYQ_3-3-55","hasGrip":"magritte-has-grip___ATMYQ_3-3-55","textarea-limited":"magritte-textarea-limited___cU1Rg_3-3-55","textareaLimited":"magritte-textarea-limited___cU1Rg_3-3-55","maxed-height":"magritte-maxed-height___v1wYG_3-3-55","maxedHeight":"magritte-maxed-height___v1wYG_3-3-55","textarea-focused":"magritte-textarea-focused___eiGyC_3-3-55","textareaFocused":"magritte-textarea-focused___eiGyC_3-3-55","textarea-invalid":"magritte-textarea-invalid___iKOPh_3-3-55","textareaInvalid":"magritte-textarea-invalid___iKOPh_3-3-55","textarea-disabled":"magritte-textarea-disabled___XN0cg_3-3-55","textareaDisabled":"magritte-textarea-disabled___XN0cg_3-3-55","textarea-position-container-wrapper":"magritte-textarea-position-container-wrapper___4Dsui_3-3-55","textareaPositionContainerWrapper":"magritte-textarea-position-container-wrapper___4Dsui_3-3-55","textarea-position-container":"magritte-textarea-position-container___cEpbv_3-3-55","textareaPositionContainer":"magritte-textarea-position-container___cEpbv_3-3-55","native-element":"magritte-native-element___a0RAE_3-3-55","nativeElement":"magritte-native-element___a0RAE_3-3-55","textarea-label":"magritte-textarea-label___sgTIH_3-3-55","textareaLabel":"magritte-textarea-label___sgTIH_3-3-55","textarea-label-elevated":"magritte-textarea-label-elevated___0lxOI_3-3-55","textareaLabelElevated":"magritte-textarea-label-elevated___0lxOI_3-3-55","textarea-limit":"magritte-textarea-limit___IjPJy_3-3-55","textareaLimit":"magritte-textarea-limit___IjPJy_3-3-55","textarea-limit-error":"magritte-textarea-limit-error___vLvZU_3-3-55","textareaLimitError":"magritte-textarea-limit-error___vLvZU_3-3-55","textarea-layout-fill-both":"magritte-textarea-layout-fill-both___ERS-q_3-3-55","textareaLayoutFillBoth":"magritte-textarea-layout-fill-both___ERS-q_3-3-55","textarea-layout-fill-vertical":"magritte-textarea-layout-fill-vertical___HmNtp_3-3-55","textareaLayoutFillVertical":"magritte-textarea-layout-fill-vertical___HmNtp_3-3-55","textarea-layout-fill-horizontal":"magritte-textarea-layout-fill-horizontal___imBH2_3-3-55","textareaLayoutFillHorizontal":"magritte-textarea-layout-fill-horizontal___imBH2_3-3-55","textarea-layout-hug":"magritte-textarea-layout-hug___tdCMY_3-3-55","textareaLayoutHug":"magritte-textarea-layout-hug___tdCMY_3-3-55","textarea-wrapper":"magritte-textarea-wrapper___yD7G6_3-3-55","textareaWrapper":"magritte-textarea-wrapper___yD7G6_3-3-55","value-clone-wrapper":"magritte-value-clone-wrapper___2ZZvS_3-3-55","valueCloneWrapper":"magritte-value-clone-wrapper___2ZZvS_3-3-55","value-clone-container":"magritte-value-clone-container___PVM97_3-3-55","valueCloneContainer":"magritte-value-clone-container___PVM97_3-3-55","side-padding":"magritte-side-padding___O-HUP_3-3-55","sidePadding":"magritte-side-padding___O-HUP_3-3-55","textarea-animation-timeout":"magritte-textarea-animation-timeout___zudbr_3-3-55","textareaAnimationTimeout":"magritte-textarea-animation-timeout___zudbr_3-3-55","textarea-rigging-container":"magritte-textarea-rigging-container___-1S6i_3-3-55","textareaRiggingContainer":"magritte-textarea-rigging-container___-1S6i_3-3-55","label-no-wrap":"magritte-label-no-wrap___RxZ3A_3-3-55","labelNoWrap":"magritte-label-no-wrap___RxZ3A_3-3-55","textarea-grip":"magritte-textarea-grip___iL7lq_3-3-55","textareaGrip":"magritte-textarea-grip___iL7lq_3-3-55","textarea-grip-icon":"magritte-textarea-grip-icon___YK-9w_3-3-55","textareaGripIcon":"magritte-textarea-grip-icon___YK-9w_3-3-55","textarea-limit-enter":"magritte-textarea-limit-enter___CygGz_3-3-55","textareaLimitEnter":"magritte-textarea-limit-enter___CygGz_3-3-55","textarea-limit-exit":"magritte-textarea-limit-exit___RMp-R_3-3-55","textareaLimitExit":"magritte-textarea-limit-exit___RMp-R_3-3-55","textarea-limit-enter-active":"magritte-textarea-limit-enter-active___8vN-t_3-3-55","textareaLimitEnterActive":"magritte-textarea-limit-enter-active___8vN-t_3-3-55","textarea-limit-exit-active":"magritte-textarea-limit-exit-active___a5kBr_3-3-55","textareaLimitExitActive":"magritte-textarea-limit-exit-active___a5kBr_3-3-55"};
 
-const ZERO_WIDTH_SPACE = '\u200B';
-const TextAreaComponent = ({ onChange, onFocus, onBlur, onValidate, value, placeholder, disabled = false, elevatePlaceholder = false, invalid = false, invalidLimit = false, maxLength, description, errorMessage, resize = 'none', layout = 'fixed', size = 'large', minHeight: _minHeight, maxHeight, 'aria-describedby': ariaDescribedBy, ...restProps }, ref) => {
-    const { isMobile } = useBreakpoint();
-    const forceDisabled = useDisabled();
-    const isComponentDisabled = forceDisabled || !!disabled;
-    const [internalInvalid, setInternalInvalid] = useState(false);
-    const [isFocusVisible, setFocusVisible] = useState(false);
-    const limitRef = useRef(null);
-    const previousInvalid = useRef(internalInvalid);
-    const textAreaRef = useRef(null);
-    const resizableDivRef = useRef(null);
-    const resizableDivSizes = useRef(null);
-    const resizableDivWasResized = useRef(false);
-    const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({
-        axis: isComponentDisabled ? 'none' : 'vertical',
-    });
-    const textAreaRefCallback = useMultipleRefs(ref, textAreaRef, scrollbar.scrollContainerRef);
-    const descriptionId = useId();
-    const labelId = useId();
-    const [animationTimeout, setAnimationTimeout] = useState(100);
-    const currentResizeValue = isMobile ? 'none' : resize;
-    const isResizable = currentResizeValue !== 'none';
-    const contentCloneRef = useRef(null);
-    const contentCloneWrapperRef = useRef(null);
-    const { minHeight, maxedHeight } = useHeightObserver({
-        size,
-        minHeight: _minHeight,
-        layout,
-        contentCloneRef,
-        onHeightChange: () => scrollbar.resizeCallbackRef.current?.(),
-    });
-    const { maxHeightRef, allowScrollRef } = useLimitGrow({
-        layout,
-        contentCloneRef,
-        contentCloneWrapperRef,
-        textAreaRef,
-        resizableDivRef,
-        minHeight,
-    });
-    const trlOf = useTranslation('TextArea', 'of');
-    useEffect(() => {
-        const animationTimeoutElement = document.createElement('div');
-        animationTimeoutElement.classList.add(styles.textareaAnimationTimeout);
-        document.body.appendChild(animationTimeoutElement);
-        const style = window.getComputedStyle(animationTimeoutElement);
-        const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);
-        if (Number.isInteger(animationTimeout)) {
-            setAnimationTimeout(animationTimeout);
-        }
-        document.body.removeChild(animationTimeoutElement);
-    }, []);
-    const { focusHandler, blurHandler, isFocused } = useFocus(onFocus, onBlur);
-    const handleClick = () => {
-        if (resizableDivWasResized.current) {
-            resizableDivWasResized.current = false;
-            return;
-        }
-        textAreaRef.current?.focus();
+const ZERO_WIDTH_SPACE = "\u200B";
+const TextAreaComponent = ({
+  onChange,
+  onFocus,
+  onBlur,
+  onValidate,
+  value,
+  placeholder,
+  disabled = false,
+  elevatePlaceholder = false,
+  invalid = false,
+  invalidLimit = false,
+  maxLength,
+  description,
+  errorMessage,
+  resize = "none",
+  layout = "fixed",
+  size = "large",
+  minHeight: _minHeight,
+  maxHeight,
+  "aria-describedby": ariaDescribedBy,
+  ...restProps
+}, ref) => {
+  const { isMobile } = useBreakpoint();
+  const forceDisabled = useDisabled();
+  const isComponentDisabled = forceDisabled || !!disabled;
+  const [internalInvalid, setInternalInvalid] = useState(false);
+  const [isFocusVisible, setFocusVisible] = useState(false);
+  const limitRef = useRef(null);
+  const previousInvalid = useRef(internalInvalid);
+  const textAreaRef = useRef(null);
+  const resizableDivRef = useRef(null);
+  const resizableDivSizes = useRef(null);
+  const resizableDivWasResized = useRef(false);
+  const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({
+    axis: isComponentDisabled ? "none" : "vertical"
+  });
+  const textAreaRefCallback = useMultipleRefs(ref, textAreaRef, scrollbar.scrollContainerRef);
+  const descriptionId = useId();
+  const labelId = useId();
+  const [animationTimeout, setAnimationTimeout] = useState(100);
+  const currentResizeValue = isMobile ? "none" : resize;
+  const isResizable = currentResizeValue !== "none";
+  const contentCloneRef = useRef(null);
+  const contentCloneWrapperRef = useRef(null);
+  const { minHeight, maxedHeight } = useHeightObserver({
+    size,
+    minHeight: _minHeight,
+    layout,
+    contentCloneRef,
+    onHeightChange: () => scrollbar.resizeCallbackRef.current?.()
+  });
+  const { maxHeightRef, allowScrollRef } = useLimitGrow({
+    layout,
+    contentCloneRef,
+    contentCloneWrapperRef,
+    textAreaRef,
+    resizableDivRef,
+    minHeight
+  });
+  const trlOf = useTranslation("TextArea", "of");
+  useEffect(() => {
+    const animationTimeoutElement = document.createElement("div");
+    animationTimeoutElement.classList.add(styles.textareaAnimationTimeout);
+    document.body.appendChild(animationTimeoutElement);
+    const style = window.getComputedStyle(animationTimeoutElement);
+    const animationTimeout2 = parseInt(style.getPropertyValue(`--animation-duration`), 10);
+    if (Number.isInteger(animationTimeout2)) {
+      setAnimationTimeout(animationTimeout2);
+    }
+    document.body.removeChild(animationTimeoutElement);
+  }, []);
+  const { focusHandler, blurHandler, isFocused } = useFocus(onFocus, onBlur);
+  const handleClick = () => {
+    if (resizableDivWasResized.current) {
+      resizableDivWasResized.current = false;
+      return;
+    }
+    textAreaRef.current?.focus();
+  };
+  const handleMouseUp = () => {
+    if (resizableDivRef.current?.offsetWidth !== resizableDivSizes.current?.width || resizableDivRef.current?.offsetHeight !== resizableDivSizes.current?.height) {
+      resizableDivWasResized.current = true;
+    }
+  };
+  const handleMouseDown = () => {
+    resizableDivSizes.current = {
+      width: resizableDivRef.current?.offsetWidth,
+      height: resizableDivRef.current?.offsetHeight
     };
-    const handleMouseUp = () => {
-        if (resizableDivRef.current?.offsetWidth !== resizableDivSizes.current?.width ||
-            resizableDivRef.current?.offsetHeight !== resizableDivSizes.current?.height) {
-            resizableDivWasResized.current = true;
-        }
-    };
-    const handleMouseDown = () => {
-        resizableDivSizes.current = {
-            width: resizableDivRef.current?.offsetWidth,
-            height: resizableDivRef.current?.offsetHeight,
-        };
-    };
-    useEffect(() => {
-        if (maxLength) {
-            const invalid = !isFocused && value.length > maxLength;
-            setInternalInvalid(invalid);
-            if (previousInvalid.current !== invalid) {
-                onValidate?.({ invalidLimit: invalid });
-            }
-            previousInvalid.current = invalid;
-        }
-    }, [onValidate, value, internalInvalid, maxLength, isFocused]);
-    useEffect(() => {
-        if (textAreaRef.current) {
-            setFocusVisible(isFocused && textAreaRef.current.classList.contains('focus-visible'));
-        }
-    }, [isFocused]);
-    useEffect(() => {
-        // для layout === 'hug' resizeCallback вызывается в useHeightObserver, т.к. нужно ожидать перерисовку оберток
-        if (layout !== 'hug') {
-            scrollbar.resizeCallbackRef.current?.();
-        }
-    }, [layout, scrollbar.resizeCallbackRef, value]);
-    const placeholderIsElevated = !!elevatePlaceholder && !!placeholder && size === 'large';
-    const showLabel = placeholderIsElevated || value === '';
-    const invalidState = invalid || invalidLimit;
-    const ariaProps = useInputAriaProps({
-        invalid: invalidState || internalInvalid,
-        hasDescription: !!description || !!errorMessage || !!ariaDescribedBy,
-        hasPlaceholder: !!placeholder,
-        descriptionId: ariaDescribedBy || `input-description-${descriptionId}`,
-        labelId,
-    });
-    const hasElevatedPlaceholderClass = (isFocused || value !== '') && placeholderIsElevated;
-    return (jsxs("div", { "data-qa": "textarea-wrapper", "data-interactive": true, className: classnames(styles.textarea, styles[`textarea-${size}`], {
-            [styles.textareaFocused]: isFocused,
-            [styles.textareaDisabled]: isComponentDisabled,
-            [styles.textareaInvalid]: !!(invalidState || internalInvalid),
-            [styles.textareaLimitError]: invalidLimit || internalInvalid || (maxLength ? value.length > maxLength : false),
-            [styles.textareaLimited]: !!maxLength && maxedHeight,
-            [styles.textareaLayoutFillBoth]: layout === 'fill-both',
-            [styles.textareaLayoutFillVertical]: layout === 'fill-vertical',
-            [styles.textareaLayoutFillHorizontal]: layout === 'fill-horizontal',
-            [styles.textareaLayoutHug]: layout === 'hug',
-            [styles.textareaElevated]: placeholderIsElevated,
-            [styles.hasGrip]: isResizable,
-            [styles.maxedHeight]: size === 'large' && maxedHeight,
-        }), children: [jsxs("div", { className: classnames(styles.textareaPositionContainerWrapper, scrollbar.hoverContainerCssClass, {
-                    'focus-visible': isFocusVisible,
-                }), children: [jsxs("div", { className: classnames(styles.textareaPositionContainer), onClick: handleClick, onMouseDown: isResizable ? handleMouseDown : undefined, onMouseUp: isResizable ? handleMouseUp : undefined, style: {
-                            height: maxHeightRef.current || (maxedHeight ? 'auto' : minHeight),
-                            minHeight,
-                            '--magritte-textarea-max-height': maxHeight
-                                ? `${Math.max(maxHeight, minHeight)}px`
-                                : 'auto',
-                            resize: currentResizeValue,
-                        }, ref: resizableDivRef, children: [jsxs("div", { className: styles.textareaWrapper, "data-qa": "textarea-native-wrapper", children: [jsx("textarea", { ...restProps, ...ariaProps, disabled: isComponentDisabled, suppressHydrationWarning: true, className: classnames(styles.nativeElement, styles.sidePadding), value: value, onChange: onChange, onFocus: focusHandler, onBlur: blurHandler, style: { overflowY: layout !== 'hug' || allowScrollRef.current ? 'auto' : 'hidden' }, ref: textAreaRefCallback }), layout === 'hug' && (jsx("div", { className: classnames(styles.valueCloneWrapper, styles.sidePadding), ref: contentCloneWrapperRef, children: jsx("pre", { className: styles.valueCloneContainer, ref: contentCloneRef, children: `${value}${ZERO_WIDTH_SPACE}` }) })), showLabel && (jsx("div", { className: classnames(styles.textareaRiggingContainer, styles.sidePadding), children: jsx("label", { className: classnames(styles.textareaLabel, {
-                                                [styles.labelNoWrap]: elevatePlaceholder,
-                                                [styles.textareaLabelElevated]: hasElevatedPlaceholderClass,
-                                            }), id: ariaProps['aria-labelledby'], children: placeholder }) }))] }), hasVerticalScroll && jsx(Scrollbar, { ...verticalScrollbarProps })] }), !!maxLength && maxedHeight && (jsx(CSSTransition, { in: isFocused || value.length > maxLength, timeout: animationTimeout, classNames: {
-                            enter: styles.textareaLimitEnter,
-                            enterActive: styles.textareaLimitEnterActive,
-                            exit: styles.textareaLimitExit,
-                            exitActive: styles.textareaLimitExitActive,
-                        }, unmountOnExit: true, nodeRef: limitRef, children: jsx("div", { className: styles.textareaLimit, ref: limitRef, children: jsxs(Text, { typography: "label-3-regular", children: [value.length, trlOf, maxLength] }) }) })), isResizable && (jsx("div", { className: styles.textareaGrip, children: jsx("div", { className: styles.textareaGripIcon, children: jsx(GripSize24, {}) }) }))] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, descriptionId: ariaProps['aria-describedby'], disabled: isComponentDisabled, invalid: invalidState, "data-qa": "textarea-hint-container" })] }));
+  };
+  useEffect(() => {
+    if (maxLength) {
+      const invalid2 = !isFocused && value.length > maxLength;
+      setInternalInvalid(invalid2);
+      if (previousInvalid.current !== invalid2) {
+        onValidate?.({ invalidLimit: invalid2 });
+      }
+      previousInvalid.current = invalid2;
+    }
+  }, [onValidate, value, internalInvalid, maxLength, isFocused]);
+  useEffect(() => {
+    if (textAreaRef.current) {
+      setFocusVisible(isFocused && textAreaRef.current.classList.contains("focus-visible"));
+    }
+  }, [isFocused]);
+  useEffect(() => {
+    if (layout !== "hug") {
+      scrollbar.resizeCallbackRef.current?.();
+    }
+  }, [layout, scrollbar.resizeCallbackRef, value]);
+  const placeholderIsElevated = !!elevatePlaceholder && !!placeholder && size === "large";
+  const showLabel = placeholderIsElevated || value === "";
+  const invalidState = invalid || invalidLimit;
+  const ariaProps = useInputAriaProps({
+    invalid: invalidState || internalInvalid,
+    hasDescription: !!description || !!errorMessage || !!ariaDescribedBy,
+    hasPlaceholder: !!placeholder,
+    descriptionId: ariaDescribedBy || `input-description-${descriptionId}`,
+    labelId
+  });
+  const hasElevatedPlaceholderClass = (isFocused || value !== "") && placeholderIsElevated;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-qa": "textarea-wrapper",
+      "data-interactive": true,
+      className: classnames(styles.textarea, styles[`textarea-${size}`], {
+        [styles.textareaFocused]: isFocused,
+        [styles.textareaDisabled]: isComponentDisabled,
+        [styles.textareaInvalid]: !!(invalidState || internalInvalid),
+        [styles.textareaLimitError]: invalidLimit || internalInvalid || (maxLength ? value.length > maxLength : false),
+        [styles.textareaLimited]: !!maxLength && maxedHeight,
+        [styles.textareaLayoutFillBoth]: layout === "fill-both",
+        [styles.textareaLayoutFillVertical]: layout === "fill-vertical",
+        [styles.textareaLayoutFillHorizontal]: layout === "fill-horizontal",
+        [styles.textareaLayoutHug]: layout === "hug",
+        [styles.textareaElevated]: placeholderIsElevated,
+        [styles.hasGrip]: isResizable,
+        [styles.maxedHeight]: size === "large" && maxedHeight
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classnames(styles.textareaPositionContainerWrapper, scrollbar.hoverContainerCssClass, {
+              "focus-visible": isFocusVisible
+            }),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classnames(styles.textareaPositionContainer),
+                  onClick: handleClick,
+                  onMouseDown: isResizable ? handleMouseDown : void 0,
+                  onMouseUp: isResizable ? handleMouseUp : void 0,
+                  style: {
+                    height: maxHeightRef.current || (maxedHeight ? "auto" : minHeight),
+                    minHeight,
+                    "--magritte-textarea-max-height": maxHeight ? `${Math.max(maxHeight, minHeight)}px` : "auto",
+                    resize: currentResizeValue
+                  },
+                  ref: resizableDivRef,
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: styles.textareaWrapper, "data-qa": "textarea-native-wrapper", children: [
+                      /* @__PURE__ */ jsx(
+                        "textarea",
+                        {
+                          ...restProps,
+                          ...ariaProps,
+                          disabled: isComponentDisabled,
+                          suppressHydrationWarning: true,
+                          className: classnames(styles.nativeElement, styles.sidePadding),
+                          value,
+                          onChange,
+                          onFocus: focusHandler,
+                          onBlur: blurHandler,
+                          style: { overflowY: layout !== "hug" || allowScrollRef.current ? "auto" : "hidden" },
+                          ref: textAreaRefCallback
+                        }
+                      ),
+                      layout === "hug" && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: classnames(styles.valueCloneWrapper, styles.sidePadding),
+                          ref: contentCloneWrapperRef,
+                          children: /* @__PURE__ */ jsx("pre", { className: styles.valueCloneContainer, ref: contentCloneRef, children: `${value}${ZERO_WIDTH_SPACE}` })
+                        }
+                      ),
+                      showLabel && /* @__PURE__ */ jsx("div", { className: classnames(styles.textareaRiggingContainer, styles.sidePadding), children: /* @__PURE__ */ jsx(
+                        "label",
+                        {
+                          className: classnames(styles.textareaLabel, {
+                            [styles.labelNoWrap]: elevatePlaceholder,
+                            [styles.textareaLabelElevated]: hasElevatedPlaceholderClass
+                          }),
+                          id: ariaProps["aria-labelledby"],
+                          children: placeholder
+                        }
+                      ) })
+                    ] }),
+                    hasVerticalScroll && /* @__PURE__ */ jsx(Scrollbar, { ...verticalScrollbarProps })
+                  ]
+                }
+              ),
+              !!maxLength && maxedHeight && /* @__PURE__ */ jsx(
+                CSSTransition,
+                {
+                  in: isFocused || value.length > maxLength,
+                  timeout: animationTimeout,
+                  classNames: {
+                    enter: styles.textareaLimitEnter,
+                    enterActive: styles.textareaLimitEnterActive,
+                    exit: styles.textareaLimitExit,
+                    exitActive: styles.textareaLimitExitActive
+                  },
+                  unmountOnExit: true,
+                  nodeRef: limitRef,
+                  children: /* @__PURE__ */ jsx("div", { className: styles.textareaLimit, ref: limitRef, children: /* @__PURE__ */ jsxs(Text, { typography: "label-3-regular", children: [
+                    value.length,
+                    trlOf,
+                    maxLength
+                  ] }) })
+                }
+              ),
+              isResizable && /* @__PURE__ */ jsx("div", { className: styles.textareaGrip, children: /* @__PURE__ */ jsx("div", { className: styles.textareaGripIcon, children: /* @__PURE__ */ jsx(GripSize24, {}) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormHelper,
+          {
+            description,
+            errorMessage,
+            descriptionId: ariaProps["aria-describedby"],
+            disabled: isComponentDisabled,
+            invalid: invalidState,
+            "data-qa": "textarea-hint-container"
+          }
+        )
+      ]
+    }
+  );
 };
 const TextArea = forwardRef(TextAreaComponent);
-TextArea.displayName = 'TextArea';
+TextArea.displayName = "TextArea";
 
 export { TextArea };
 //# sourceMappingURL=TextArea.js.map

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":["_jsxs","_jsx"],"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    });\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,8 +11,8 @@ export declare const TextAreaGrowLimiter: import("react").ForwardRefExoticCompon
     debounce?: boolean;
     preMeasurement?: VoidFunction;
     postMeasurement?: VoidFunction;
-    style?: import("react").HTMLAttributes<HTMLDivElement>["style"];
-    className?: import("react").HTMLAttributes<HTMLDivElement>["className"];
+    style?: import("react").HTMLAttributes<HTMLDivElement>['style'];
+    className?: import("react").HTMLAttributes<HTMLDivElement>['className'];
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;