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

package/index.d.ts

@@ -1,3 +1,3 @@
-export * from '@hh.ru/magritte-ui-textarea/TextArea';
-export * from '@hh.ru/magritte-ui-textarea/UncontrolledTextArea';
-export { TextAreaGrowLimiter } from '@hh.ru/magritte-ui-textarea/TextAreaGrowLimiter';
+export * from './TextArea';
+export * from './UncontrolledTextArea';
+export { TextAreaGrowLimiter } from './TextAreaGrowLimiter';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-textarea",
-  "version": "3.3.53",
+  "version": "3.3.55",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -23,13 +23,13 @@
     "@hh.ru/magritte-common-use-disabled": "1.0.16",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.12",
     "@hh.ru/magritte-common-use-translation": "3.6.1",
-    "@hh.ru/magritte-design-tokens": "25.1.1",
+    "@hh.ru/magritte-design-tokens": "26.0.1",
     "@hh.ru/magritte-ui-breakpoint": "6.1.2",
-    "@hh.ru/magritte-ui-form-helper": "2.1.23",
-    "@hh.ru/magritte-ui-icon": "15.1.3",
-    "@hh.ru/magritte-ui-input": "9.4.50",
-    "@hh.ru/magritte-ui-scrollbar": "1.0.37",
-    "@hh.ru/magritte-ui-typography": "5.3.14"
+    "@hh.ru/magritte-ui-form-helper": "2.1.25",
+    "@hh.ru/magritte-ui-icon": "15.1.5",
+    "@hh.ru/magritte-ui-input": "9.4.52",
+    "@hh.ru/magritte-ui-scrollbar": "1.0.39",
+    "@hh.ru/magritte-ui-typography": "5.3.16"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "46d606980abbb523a41afba452c0a852ee902864"
+  "gitHead": "f6539d7a0e7cd42dd851458db1de04a748bbee03"
 }

package/types.js

@@ -1,8 +1,8 @@
 import './index.css';
 const MIN_HEIGHT_BY_SIZE = {
-    small: [40, 80],
-    medium: [48, 96],
-    large: [56, 112],
+  small: [40, 80],
+  medium: [48, 96],
+  large: [56, 112]
 };
 
 export { MIN_HEIGHT_BY_SIZE };

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":"AA2Fa,MAAA,kBAAkB,GAAG;AAC9B,IAAA,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;AACf,IAAA,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;AAChB,IAAA,KAAK,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC;;;;;"}
+{"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;;;;"}

package/useFocus.js

@@ -2,16 +2,22 @@ import './index.css';
 import { useState, useCallback } from 'react';
 
 const useFocus = (onFocus, onBlur) => {
-    const [isFocused, setFocused] = useState(false);
-    const focusHandler = useCallback((event) => {
-        setFocused(true);
-        onFocus?.(event);
-    }, [setFocused, onFocus]);
-    const blurHandler = useCallback((event) => {
-        setFocused(false);
-        onBlur?.(event);
-    }, [setFocused, onBlur]);
-    return { focusHandler, blurHandler, isFocused };
+  const [isFocused, setFocused] = useState(false);
+  const focusHandler = useCallback(
+    (event) => {
+      setFocused(true);
+      onFocus?.(event);
+    },
+    [setFocused, onFocus]
+  );
+  const blurHandler = useCallback(
+    (event) => {
+      setFocused(false);
+      onBlur?.(event);
+    },
+    [setFocused, onBlur]
+  );
+  return { focusHandler, blurHandler, isFocused };
 };
 
 export { useFocus };

package/useFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocus.js","sources":["src/useFocus.ts"],"sourcesContent":["import { useCallback, useState, FocusEventHandler } from 'react';\n\nexport const useFocus = <T extends HTMLTextAreaElement = HTMLTextAreaElement>(\n    onFocus: FocusEventHandler<T> | undefined,\n    onBlur: FocusEventHandler<T> | undefined\n): {\n    focusHandler: FocusEventHandler<T>;\n    blurHandler: FocusEventHandler<T>;\n    isFocused: boolean;\n} => {\n    const [isFocused, setFocused] = useState(false);\n    const focusHandler = useCallback<FocusEventHandler<T>>(\n        (event) => {\n            setFocused(true);\n            onFocus?.(event);\n        },\n        [setFocused, onFocus]\n    );\n\n    const blurHandler = useCallback<FocusEventHandler<T>>(\n        (event) => {\n            setFocused(false);\n            onBlur?.(event);\n        },\n        [setFocused, onBlur]\n    );\n\n    return { focusHandler, blurHandler, isFocused };\n};\n"],"names":[],"mappings":";;MAEa,QAAQ,GAAG,CACpB,OAAyC,EACzC,MAAwC,KAKxC;IACA,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAChD,IAAA,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,KAAK,KAAI;QACN,UAAU,CAAC,IAAI,CAAC,CAAC;AACjB,QAAA,OAAO,GAAG,KAAK,CAAC,CAAC;AACrB,KAAC,EACD,CAAC,UAAU,EAAE,OAAO,CAAC,CACxB,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAK,KAAI;QACN,UAAU,CAAC,KAAK,CAAC,CAAC;AAClB,QAAA,MAAM,GAAG,KAAK,CAAC,CAAC;AACpB,KAAC,EACD,CAAC,UAAU,EAAE,MAAM,CAAC,CACvB,CAAC;AAEF,IAAA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;AACpD;;;;"}
+{"version":3,"file":"useFocus.js","sources":["src/useFocus.ts"],"sourcesContent":["import { useCallback, useState, FocusEventHandler } from 'react';\n\nexport const useFocus = <T extends HTMLTextAreaElement = HTMLTextAreaElement>(\n    onFocus: FocusEventHandler<T> | undefined,\n    onBlur: FocusEventHandler<T> | undefined\n): {\n    focusHandler: FocusEventHandler<T>;\n    blurHandler: FocusEventHandler<T>;\n    isFocused: boolean;\n} => {\n    const [isFocused, setFocused] = useState(false);\n    const focusHandler = useCallback<FocusEventHandler<T>>(\n        (event) => {\n            setFocused(true);\n            onFocus?.(event);\n        },\n        [setFocused, onFocus]\n    );\n\n    const blurHandler = useCallback<FocusEventHandler<T>>(\n        (event) => {\n            setFocused(false);\n            onBlur?.(event);\n        },\n        [setFocused, onBlur]\n    );\n\n    return { focusHandler, blurHandler, isFocused };\n};\n"],"names":[],"mappings":";;AAEa,MAAA,QAAA,GAAW,CACpB,OAAA,EACA,MAKC,KAAA;AACD,EAAA,MAAM,CAAC,SAAA,EAAW,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC9C,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACjB,CAAC,KAAU,KAAA;AACP,MAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AACf,MAAA,OAAA,GAAU,KAAK,CAAA,CAAA;AAAA,KACnB;AAAA,IACA,CAAC,YAAY,OAAO,CAAA;AAAA,GACxB,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAChB,CAAC,KAAU,KAAA;AACP,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,MAAA,MAAA,GAAS,KAAK,CAAA,CAAA;AAAA,KAClB;AAAA,IACA,CAAC,YAAY,MAAM,CAAA;AAAA,GACvB,CAAA;AAEA,EAAO,OAAA,EAAE,YAAc,EAAA,WAAA,EAAa,SAAU,EAAA,CAAA;AAClD;;;;"}

package/useHeightObserver.d.ts

@@ -1,5 +1,5 @@
 import { type RefObject } from 'react';
-import { type TextAreaLayout, type TextAreaSize } from '@hh.ru/magritte-ui-textarea/types';
+import { type TextAreaLayout, type TextAreaSize } from './types';
 type UseHeightObserverArgs = {
     size: TextAreaSize;
     minHeight: number | undefined;

package/useHeightObserver.js

@@ -2,41 +2,47 @@ import './index.css';
 import { useState, useRef, useEffect } from 'react';
 import { MIN_HEIGHT_BY_SIZE } from './types.js';
 
-const useHeightObserver = ({ size, minHeight, layout, contentCloneRef, onHeightChange, }) => {
-    const _minHeight = minHeight ?? MIN_HEIGHT_BY_SIZE[size][1];
-    const isMaxSizeHeight = _minHeight === MIN_HEIGHT_BY_SIZE[size][1];
-    const [actualMinHeight, setActualMinHeight] = useState(_minHeight);
-    const lastProcessedSizeRef = useRef(size);
-    const isSizeChanged = lastProcessedSizeRef.current !== size;
-    lastProcessedSizeRef.current = size;
-    const onHeightChangeRef = useRef(onHeightChange);
-    onHeightChangeRef.current = onHeightChange;
-    const rectsLengthRef = useRef(null);
-    useEffect(() => {
-        if (!contentCloneRef.current) {
-            return void 0;
-        }
-        const range = document.createRange();
-        const observer = new ResizeObserver(() => {
-            if (!contentCloneRef.current) {
-                return;
-            }
-            range.selectNodeContents(contentCloneRef.current);
-            const rects = range.getClientRects();
-            if (rectsLengthRef.current !== rects.length && rectsLengthRef.current !== null) {
-                onHeightChangeRef.current?.();
-            }
-            rectsLengthRef.current = rects.length;
-            setActualMinHeight(MIN_HEIGHT_BY_SIZE[size][rects.length > 1 ? 1 : 0]);
-        });
-        observer.observe(contentCloneRef.current);
-        return () => observer.disconnect();
-    }, [layout, size, contentCloneRef]);
-    let resultMinHeight = isSizeChanged || isMaxSizeHeight ? _minHeight : actualMinHeight;
-    if (layout !== 'hug') {
-        resultMinHeight = MIN_HEIGHT_BY_SIZE[size][1];
+const useHeightObserver = ({
+  size,
+  minHeight,
+  layout,
+  contentCloneRef,
+  onHeightChange
+}) => {
+  const _minHeight = minHeight ?? MIN_HEIGHT_BY_SIZE[size][1];
+  const isMaxSizeHeight = _minHeight === MIN_HEIGHT_BY_SIZE[size][1];
+  const [actualMinHeight, setActualMinHeight] = useState(_minHeight);
+  const lastProcessedSizeRef = useRef(size);
+  const isSizeChanged = lastProcessedSizeRef.current !== size;
+  lastProcessedSizeRef.current = size;
+  const onHeightChangeRef = useRef(onHeightChange);
+  onHeightChangeRef.current = onHeightChange;
+  const rectsLengthRef = useRef(null);
+  useEffect(() => {
+    if (!contentCloneRef.current) {
+      return void 0;
     }
-    return { minHeight: resultMinHeight, maxedHeight: resultMinHeight === MIN_HEIGHT_BY_SIZE[size][1] };
+    const range = document.createRange();
+    const observer = new ResizeObserver(() => {
+      if (!contentCloneRef.current) {
+        return;
+      }
+      range.selectNodeContents(contentCloneRef.current);
+      const rects = range.getClientRects();
+      if (rectsLengthRef.current !== rects.length && rectsLengthRef.current !== null) {
+        onHeightChangeRef.current?.();
+      }
+      rectsLengthRef.current = rects.length;
+      setActualMinHeight(MIN_HEIGHT_BY_SIZE[size][rects.length > 1 ? 1 : 0]);
+    });
+    observer.observe(contentCloneRef.current);
+    return () => observer.disconnect();
+  }, [layout, size, contentCloneRef]);
+  let resultMinHeight = isSizeChanged || isMaxSizeHeight ? _minHeight : actualMinHeight;
+  if (layout !== "hug") {
+    resultMinHeight = MIN_HEIGHT_BY_SIZE[size][1];
+  }
+  return { minHeight: resultMinHeight, maxedHeight: resultMinHeight === MIN_HEIGHT_BY_SIZE[size][1] };
 };
 
 export { useHeightObserver };

package/useHeightObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHeightObserver.js","sources":["src/useHeightObserver.ts"],"sourcesContent":["import { type RefObject, useState, useEffect, useRef } from 'react';\n\nimport { type TextAreaLayout, type TextAreaSize, MIN_HEIGHT_BY_SIZE } from '@hh.ru/magritte-ui-textarea/types';\n\ntype UseHeightObserverArgs = {\n    size: TextAreaSize;\n    minHeight: number | undefined;\n    layout: TextAreaLayout;\n    contentCloneRef: RefObject<HTMLElement>;\n    onHeightChange?: VoidFunction;\n};\n\nexport const useHeightObserver = ({\n    size,\n    minHeight,\n    layout,\n    contentCloneRef,\n    onHeightChange,\n}: UseHeightObserverArgs): { minHeight: number; maxedHeight: boolean } => {\n    const _minHeight = minHeight ?? MIN_HEIGHT_BY_SIZE[size][1];\n    const isMaxSizeHeight = _minHeight === MIN_HEIGHT_BY_SIZE[size][1];\n    const [actualMinHeight, setActualMinHeight] = useState(_minHeight);\n    const lastProcessedSizeRef = useRef<TextAreaSize>(size);\n    const isSizeChanged = lastProcessedSizeRef.current !== size;\n    lastProcessedSizeRef.current = size;\n    const onHeightChangeRef = useRef(onHeightChange);\n    onHeightChangeRef.current = onHeightChange;\n    const rectsLengthRef = useRef<number | null>(null);\n\n    useEffect(() => {\n        if (!contentCloneRef.current) {\n            return void 0;\n        }\n\n        const range = document.createRange();\n        const observer = new ResizeObserver(() => {\n            if (!contentCloneRef.current) {\n                return;\n            }\n\n            range.selectNodeContents(contentCloneRef.current);\n            const rects = range.getClientRects();\n            if (rectsLengthRef.current !== rects.length && rectsLengthRef.current !== null) {\n                onHeightChangeRef.current?.();\n            }\n            rectsLengthRef.current = rects.length;\n            setActualMinHeight(MIN_HEIGHT_BY_SIZE[size][rects.length > 1 ? 1 : 0]);\n        });\n        observer.observe(contentCloneRef.current);\n        return () => observer.disconnect();\n    }, [layout, size, contentCloneRef]);\n\n    let resultMinHeight = isSizeChanged || isMaxSizeHeight ? _minHeight : actualMinHeight;\n    if (layout !== 'hug') {\n        resultMinHeight = MIN_HEIGHT_BY_SIZE[size][1];\n    }\n\n    return { minHeight: resultMinHeight, maxedHeight: resultMinHeight === MIN_HEIGHT_BY_SIZE[size][1] };\n};\n"],"names":[],"mappings":";;;AAYa,MAAA,iBAAiB,GAAG,CAAC,EAC9B,IAAI,EACJ,SAAS,EACT,MAAM,EACN,eAAe,EACf,cAAc,GACM,KAAiD;IACrE,MAAM,UAAU,GAAG,SAAS,IAAI,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,UAAU,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AACnE,IAAA,MAAM,oBAAoB,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;AACxD,IAAA,MAAM,aAAa,GAAG,oBAAoB,CAAC,OAAO,KAAK,IAAI,CAAC;AAC5D,IAAA,oBAAoB,CAAC,OAAO,GAAG,IAAI,CAAC;AACpC,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AACjD,IAAA,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC;AAC3C,IAAA,MAAM,cAAc,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAEnD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;YAC1B,OAAO,KAAK,CAAC,CAAC;SACjB;AAED,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;AACrC,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;AACrC,YAAA,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;gBAC1B,OAAO;aACV;AAED,YAAA,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;AAClD,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC;AACrC,YAAA,IAAI,cAAc,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,IAAI,cAAc,CAAC,OAAO,KAAK,IAAI,EAAE;AAC5E,gBAAA,iBAAiB,CAAC,OAAO,IAAI,CAAC;aACjC;AACD,YAAA,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;YACtC,kBAAkB,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC3E,SAAC,CAAC,CAAC;AACH,QAAA,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;AAC1C,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;KACtC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC;AAEpC,IAAA,IAAI,eAAe,GAAG,aAAa,IAAI,eAAe,GAAG,UAAU,GAAG,eAAe,CAAC;AACtF,IAAA,IAAI,MAAM,KAAK,KAAK,EAAE;QAClB,eAAe,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;KACjD;AAED,IAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,eAAe,KAAK,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AACxG;;;;"}
+{"version":3,"file":"useHeightObserver.js","sources":["src/useHeightObserver.ts"],"sourcesContent":["import { type RefObject, useState, useEffect, useRef } from 'react';\n\nimport { type TextAreaLayout, type TextAreaSize, MIN_HEIGHT_BY_SIZE } from '@hh.ru/magritte-ui-textarea/types';\n\ntype UseHeightObserverArgs = {\n    size: TextAreaSize;\n    minHeight: number | undefined;\n    layout: TextAreaLayout;\n    contentCloneRef: RefObject<HTMLElement>;\n    onHeightChange?: VoidFunction;\n};\n\nexport const useHeightObserver = ({\n    size,\n    minHeight,\n    layout,\n    contentCloneRef,\n    onHeightChange,\n}: UseHeightObserverArgs): { minHeight: number; maxedHeight: boolean } => {\n    const _minHeight = minHeight ?? MIN_HEIGHT_BY_SIZE[size][1];\n    const isMaxSizeHeight = _minHeight === MIN_HEIGHT_BY_SIZE[size][1];\n    const [actualMinHeight, setActualMinHeight] = useState(_minHeight);\n    const lastProcessedSizeRef = useRef<TextAreaSize>(size);\n    const isSizeChanged = lastProcessedSizeRef.current !== size;\n    lastProcessedSizeRef.current = size;\n    const onHeightChangeRef = useRef(onHeightChange);\n    onHeightChangeRef.current = onHeightChange;\n    const rectsLengthRef = useRef<number | null>(null);\n\n    useEffect(() => {\n        if (!contentCloneRef.current) {\n            return void 0;\n        }\n\n        const range = document.createRange();\n        const observer = new ResizeObserver(() => {\n            if (!contentCloneRef.current) {\n                return;\n            }\n\n            range.selectNodeContents(contentCloneRef.current);\n            const rects = range.getClientRects();\n            if (rectsLengthRef.current !== rects.length && rectsLengthRef.current !== null) {\n                onHeightChangeRef.current?.();\n            }\n            rectsLengthRef.current = rects.length;\n            setActualMinHeight(MIN_HEIGHT_BY_SIZE[size][rects.length > 1 ? 1 : 0]);\n        });\n        observer.observe(contentCloneRef.current);\n        return () => observer.disconnect();\n    }, [layout, size, contentCloneRef]);\n\n    let resultMinHeight = isSizeChanged || isMaxSizeHeight ? _minHeight : actualMinHeight;\n    if (layout !== 'hug') {\n        resultMinHeight = MIN_HEIGHT_BY_SIZE[size][1];\n    }\n\n    return { minHeight: resultMinHeight, maxedHeight: resultMinHeight === MIN_HEIGHT_BY_SIZE[size][1] };\n};\n"],"names":[],"mappings":";;;AAYO,MAAM,oBAAoB,CAAC;AAAA,EAC9B,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AACJ,CAA0E,KAAA;AACtE,EAAA,MAAM,UAAa,GAAA,SAAA,IAAa,kBAAmB,CAAA,IAAI,EAAE,CAAC,CAAA,CAAA;AAC1D,EAAA,MAAM,eAAkB,GAAA,UAAA,KAAe,kBAAmB,CAAA,IAAI,EAAE,CAAC,CAAA,CAAA;AACjE,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,UAAU,CAAA,CAAA;AACjE,EAAM,MAAA,oBAAA,GAAuB,OAAqB,IAAI,CAAA,CAAA;AACtD,EAAM,MAAA,aAAA,GAAgB,qBAAqB,OAAY,KAAA,IAAA,CAAA;AACvD,EAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA,CAAA;AAC/B,EAAM,MAAA,iBAAA,GAAoB,OAAO,cAAc,CAAA,CAAA;AAC/C,EAAA,iBAAA,CAAkB,OAAU,GAAA,cAAA,CAAA;AAC5B,EAAM,MAAA,cAAA,GAAiB,OAAsB,IAAI,CAAA,CAAA;AAEjD,EAAA,SAAA,CAAU,MAAM;AACZ,IAAI,IAAA,CAAC,gBAAgB,OAAS,EAAA;AAC1B,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACX;AAEA,IAAM,MAAA,KAAA,GAAQ,SAAS,WAAY,EAAA,CAAA;AACnC,IAAM,MAAA,QAAA,GAAW,IAAI,cAAA,CAAe,MAAM;AACtC,MAAI,IAAA,CAAC,gBAAgB,OAAS,EAAA;AAC1B,QAAA,OAAA;AAAA,OACJ;AAEA,MAAM,KAAA,CAAA,kBAAA,CAAmB,gBAAgB,OAAO,CAAA,CAAA;AAChD,MAAM,MAAA,KAAA,GAAQ,MAAM,cAAe,EAAA,CAAA;AACnC,MAAA,IAAI,eAAe,OAAY,KAAA,KAAA,CAAM,MAAU,IAAA,cAAA,CAAe,YAAY,IAAM,EAAA;AAC5E,QAAA,iBAAA,CAAkB,OAAU,IAAA,CAAA;AAAA,OAChC;AACA,MAAA,cAAA,CAAe,UAAU,KAAM,CAAA,MAAA,CAAA;AAC/B,MAAmB,kBAAA,CAAA,kBAAA,CAAmB,IAAI,CAAE,CAAA,KAAA,CAAM,SAAS,CAAI,GAAA,CAAA,GAAI,CAAC,CAAC,CAAA,CAAA;AAAA,KACxE,CAAA,CAAA;AACD,IAAS,QAAA,CAAA,OAAA,CAAQ,gBAAgB,OAAO,CAAA,CAAA;AACxC,IAAO,OAAA,MAAM,SAAS,UAAW,EAAA,CAAA;AAAA,GAClC,EAAA,CAAC,MAAQ,EAAA,IAAA,EAAM,eAAe,CAAC,CAAA,CAAA;AAElC,EAAI,IAAA,eAAA,GAAkB,aAAiB,IAAA,eAAA,GAAkB,UAAa,GAAA,eAAA,CAAA;AACtE,EAAA,IAAI,WAAW,KAAO,EAAA;AAClB,IAAkB,eAAA,GAAA,kBAAA,CAAmB,IAAI,CAAA,CAAE,CAAC,CAAA,CAAA;AAAA,GAChD;AAEA,EAAO,OAAA,EAAE,WAAW,eAAiB,EAAA,WAAA,EAAa,oBAAoB,kBAAmB,CAAA,IAAI,CAAE,CAAA,CAAC,CAAE,EAAA,CAAA;AACtG;;;;"}

package/useLimitGrow.d.ts

@@ -1,5 +1,5 @@
 import { type RefObject } from 'react';
-import type { TextAreaLayout } from '@hh.ru/magritte-ui-textarea/types';
+import type { TextAreaLayout } from './types';
 type UseLimitGrowArgs = {
     layout: TextAreaLayout;
     contentCloneRef: RefObject<HTMLElement>;

package/useLimitGrow.js

@@ -5,73 +5,54 @@ import 'react/jsx-runtime';
 import '@hh.ru/magritte-common-func-utils';
 import '@hh.ru/magritte-common-use-multiple-refs';
 
-const useLimitGrow = ({ layout, contentCloneRef, contentCloneWrapperRef, resizableDivRef, textAreaRef, minHeight, }) => {
-    const growLimiterContext = useContext(GrowLimiterContext);
-    const allowScrollRef = useRef(false);
-    const maxHeightRef = useRef(null);
-    if (layout !== 'hug' || !growLimiterContext.hasLimit) {
-        maxHeightRef.current = null;
-        allowScrollRef.current = true;
+const useLimitGrow = ({
+  layout,
+  contentCloneRef,
+  contentCloneWrapperRef,
+  resizableDivRef,
+  textAreaRef,
+  minHeight
+}) => {
+  const growLimiterContext = useContext(GrowLimiterContext);
+  const allowScrollRef = useRef(false);
+  const maxHeightRef = useRef(null);
+  if (layout !== "hug" || !growLimiterContext.hasLimit) {
+    maxHeightRef.current = null;
+    allowScrollRef.current = true;
+  }
+  useLayoutEffect(() => {
+    if (layout !== "hug" || !contentCloneRef.current || !growLimiterContext.hasLimit) {
+      return void 0;
     }
-    useLayoutEffect(() => {
-        if (layout !== 'hug' || !contentCloneRef.current || !growLimiterContext.hasLimit) {
-            return void 0;
-        }
-        const applyHeightLimit = () => {
-            if (!resizableDivRef.current ||
-                !contentCloneWrapperRef.current ||
-                !contentCloneRef.current ||
-                !textAreaRef.current) {
-                return;
-            }
-            // Сравниваем высоту контейнера содержащего клон контента текстарии и его обертки. Контейнер может свободно
-            // менять высоту чтобы уместить весь контент. Обертка может только свободно уменьшаться, при увеличении
-            // размера контента размер обертки не меняется. Вычитая одно из другого получаем положительное число равное
-            // изменению размера контента если контент стал больше, и 0 если он уменьшился.
-            const contentCloneHeight = contentCloneRef.current.offsetHeight;
-            const contentCloneWrapperHeight = contentCloneWrapperRef.current.offsetHeight;
-            const contentHeightDelta = contentCloneHeight - contentCloneWrapperHeight;
-            // Размер внешнего контейнера текстарии
-            const height = resizableDivRef.current.offsetHeight;
-            // Получаем количество свободного пространства в контейнере которое можем занять до получения скролла
-            // Число может быть отрицательным если в контейнере уже присутствует скролл, тогда это количество пикселей
-            // на которое нужно уменьшить высоту контента чтобы скролл исчез.
-            const heightDiff = growLimiterContext.getHeightDiff();
-            // Вычисляем новую высоту внешнего контейнера как сумму его текущей высоты и дельты высоты контента.
-            // Убеждаемся что добавляем к высоте текстарии не больше пикселей, чем доступно в контейнере до появления
-            // скролла. В результате размер текстарии может уменьшиться, если в контейнере доступно отрицательное
-            // количество пикселей до появления скролла (в случае если скролл уже появился из-за добавления другого
-            // контента например).
-            // Убеждаемся, что высота не стала меньше минимальной допустимой
-            const appliedHeight = Math.max(height + Math.min(contentHeightDelta, heightDiff), minHeight);
-            allowScrollRef.current = contentHeightDelta > heightDiff || heightDiff < 0;
-            textAreaRef.current.style.overflowY = allowScrollRef.current ? 'auto' : 'hidden';
-            resizableDivRef.current.style.height = `${appliedHeight}px`;
-            maxHeightRef.current = `${appliedHeight}px`;
-            if (appliedHeight !== height) {
-                // При тестировании в хроме с 20x slowdown сброс кеша в height diff контексте не успевал сработать за
-                // период дебаунса, из-за этого если зажать enter компонент мог стать больше по высоте чем контейнер
-                // и ограничение срабатывало только после отпускания клавиши,поэтому добавил принудительный сброс кеша
-                // при изменении размера компонента
-                growLimiterContext.heightUpdated();
-            }
-        };
-        const observer = new ResizeObserver(applyHeightLimit);
-        // Запускаем процесс пересчета максимальной высоты текстарии каждый раз
-        // когда вертикальный размер контента меняется
-        observer.observe(contentCloneRef.current, { box: 'border-box' });
-        const context = growLimiterContext;
-        // Так же запускаем его когда меняется размер контейнера скролла в котором мы пытаемся избежать.
-        // Или размер обертки которую создает TextAreaGrowLimiter, например вследствие добавления или удаления
-        // контента рядом с текстарией.
-        context.onHeightChange(applyHeightLimit);
-        applyHeightLimit();
-        return () => {
-            observer.disconnect();
-            context.offHeightChange(applyHeightLimit);
-        };
-    }, [layout, growLimiterContext, contentCloneRef, contentCloneWrapperRef, resizableDivRef, minHeight, textAreaRef]);
-    return { maxHeightRef, allowScrollRef };
+    const applyHeightLimit = () => {
+      if (!resizableDivRef.current || !contentCloneWrapperRef.current || !contentCloneRef.current || !textAreaRef.current) {
+        return;
+      }
+      const contentCloneHeight = contentCloneRef.current.offsetHeight;
+      const contentCloneWrapperHeight = contentCloneWrapperRef.current.offsetHeight;
+      const contentHeightDelta = contentCloneHeight - contentCloneWrapperHeight;
+      const height = resizableDivRef.current.offsetHeight;
+      const heightDiff = growLimiterContext.getHeightDiff();
+      const appliedHeight = Math.max(height + Math.min(contentHeightDelta, heightDiff), minHeight);
+      allowScrollRef.current = contentHeightDelta > heightDiff || heightDiff < 0;
+      textAreaRef.current.style.overflowY = allowScrollRef.current ? "auto" : "hidden";
+      resizableDivRef.current.style.height = `${appliedHeight}px`;
+      maxHeightRef.current = `${appliedHeight}px`;
+      if (appliedHeight !== height) {
+        growLimiterContext.heightUpdated();
+      }
+    };
+    const observer = new ResizeObserver(applyHeightLimit);
+    observer.observe(contentCloneRef.current, { box: "border-box" });
+    const context = growLimiterContext;
+    context.onHeightChange(applyHeightLimit);
+    applyHeightLimit();
+    return () => {
+      observer.disconnect();
+      context.offHeightChange(applyHeightLimit);
+    };
+  }, [layout, growLimiterContext, contentCloneRef, contentCloneWrapperRef, resizableDivRef, minHeight, textAreaRef]);
+  return { maxHeightRef, allowScrollRef };
 };
 
 export { useLimitGrow };

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};\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":";;;;;;AAcO,MAAM,eAAe,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,eAAA;AAAA,EACA,sBAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AACJ,CAAiG,KAAA;AAC7F,EAAM,MAAA,kBAAA,GAAqB,WAAW,kBAAkB,CAAA,CAAA;AACxD,EAAM,MAAA,cAAA,GAAiB,OAAO,KAAK,CAAA,CAAA;AACnC,EAAM,MAAA,YAAA,GAAe,OAAsB,IAAI,CAAA,CAAA;AAE/C,EAAA,IAAI,MAAW,KAAA,KAAA,IAAS,CAAC,kBAAA,CAAmB,QAAU,EAAA;AAClD,IAAA,YAAA,CAAa,OAAU,GAAA,IAAA,CAAA;AACvB,IAAA,cAAA,CAAe,OAAU,GAAA,IAAA,CAAA;AAAA,GAC7B;AAEA,EAAA,eAAA,CAAgB,MAAM;AAClB,IAAA,IAAI,WAAW,KAAS,IAAA,CAAC,gBAAgB,OAAW,IAAA,CAAC,mBAAmB,QAAU,EAAA;AAC9E,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACX;AAEA,IAAA,MAAM,mBAAmB,MAAM;AAC3B,MACI,IAAA,CAAC,eAAgB,CAAA,OAAA,IACjB,CAAC,sBAAA,CAAuB,OACxB,IAAA,CAAC,eAAgB,CAAA,OAAA,IACjB,CAAC,WAAA,CAAY,OACf,EAAA;AACE,QAAA,OAAA;AAAA,OACJ;AAMA,MAAM,MAAA,kBAAA,GAAqB,gBAAgB,OAAQ,CAAA,YAAA,CAAA;AACnD,MAAM,MAAA,yBAAA,GAA4B,uBAAuB,OAAQ,CAAA,YAAA,CAAA;AACjE,MAAA,MAAM,qBAAqB,kBAAqB,GAAA,yBAAA,CAAA;AAEhD,MAAM,MAAA,MAAA,GAAS,gBAAgB,OAAQ,CAAA,YAAA,CAAA;AAKvC,MAAM,MAAA,UAAA,GAAa,mBAAmB,aAAc,EAAA,CAAA;AAOpD,MAAM,MAAA,aAAA,GAAgB,KAAK,GAAI,CAAA,MAAA,GAAS,KAAK,GAAI,CAAA,kBAAA,EAAoB,UAAU,CAAA,EAAG,SAAS,CAAA,CAAA;AAC3F,MAAe,cAAA,CAAA,OAAA,GAAU,kBAAqB,GAAA,UAAA,IAAc,UAAa,GAAA,CAAA,CAAA;AACzE,MAAA,WAAA,CAAY,OAAQ,CAAA,KAAA,CAAM,SAAY,GAAA,cAAA,CAAe,UAAU,MAAS,GAAA,QAAA,CAAA;AACxE,MAAA,eAAA,CAAgB,OAAQ,CAAA,KAAA,CAAM,MAAS,GAAA,CAAA,EAAG,aAAa,CAAA,EAAA,CAAA,CAAA;AACvD,MAAa,YAAA,CAAA,OAAA,GAAU,GAAG,aAAa,CAAA,EAAA,CAAA,CAAA;AACvC,MAAA,IAAI,kBAAkB,MAAQ,EAAA;AAK1B,QAAA,kBAAA,CAAmB,aAAc,EAAA,CAAA;AAAA,OACrC;AAAA,KACJ,CAAA;AAEA,IAAM,MAAA,QAAA,GAAW,IAAI,cAAA,CAAe,gBAAgB,CAAA,CAAA;AAGpD,IAAA,QAAA,CAAS,QAAQ,eAAgB,CAAA,OAAA,EAAS,EAAE,GAAA,EAAK,cAAc,CAAA,CAAA;AAC/D,IAAA,MAAM,OAAU,GAAA,kBAAA,CAAA;AAIhB,IAAA,OAAA,CAAQ,eAAe,gBAAgB,CAAA,CAAA;AACvC,IAAiB,gBAAA,EAAA,CAAA;AAEjB,IAAA,OAAO,MAAM;AACT,MAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AACpB,MAAA,OAAA,CAAQ,gBAAgB,gBAAgB,CAAA,CAAA;AAAA,KAC5C,CAAA;AAAA,GACJ,EAAG,CAAC,MAAQ,EAAA,kBAAA,EAAoB,iBAAiB,sBAAwB,EAAA,eAAA,EAAiB,SAAW,EAAA,WAAW,CAAC,CAAA,CAAA;AAEjH,EAAO,OAAA,EAAE,cAAc,cAAe,EAAA,CAAA;AAC1C;;;;"}