@hh.ru/magritte-ui-textarea 3.0.3 → 3.1.0

package/index.js

@@ -13,10 +13,11 @@ import '@hh.ru/magritte-ui-breakpoint';
 import '@hh.ru/magritte-ui-form-helper';
 import '@hh.ru/magritte-ui-icon/private';
 import '@hh.ru/magritte-ui-input/useInputAriaProps';
+import '@hh.ru/magritte-ui-scrollbar';
 import './useFocus.js';
-import './useLimitGrow.js';
-import './useMinHeight.js';
+import './useHeightObserver.js';
 import './types.js';
+import './useLimitGrow.js';
 import '@hh.ru/magritte-ui-typography';
 import '@hh.ru/magritte-common-func-utils';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-textarea",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -19,16 +19,17 @@
     "watch": "yarn root:watch $(pwd)"
   },
   "dependencies": {
-    "@hh.ru/magritte-common-func-utils": "1.3.12",
-    "@hh.ru/magritte-common-use-disabled": "1.0.12",
-    "@hh.ru/magritte-common-use-multiple-refs": "1.1.8",
+    "@hh.ru/magritte-common-func-utils": "1.3.13",
+    "@hh.ru/magritte-common-use-disabled": "1.0.13",
+    "@hh.ru/magritte-common-use-multiple-refs": "1.1.9",
     "@hh.ru/magritte-common-use-translation": "1.0.1",
-    "@hh.ru/magritte-design-tokens": "23.2.0",
-    "@hh.ru/magritte-ui-breakpoint": "6.0.0",
-    "@hh.ru/magritte-ui-form-helper": "2.0.5",
-    "@hh.ru/magritte-ui-icon": "12.3.1",
-    "@hh.ru/magritte-ui-input": "9.0.9",
-    "@hh.ru/magritte-ui-typography": "4.2.1"
+    "@hh.ru/magritte-design-tokens": "23.2.1",
+    "@hh.ru/magritte-ui-breakpoint": "6.0.1",
+    "@hh.ru/magritte-ui-form-helper": "2.0.6",
+    "@hh.ru/magritte-ui-icon": "12.3.2",
+    "@hh.ru/magritte-ui-input": "9.0.10",
+    "@hh.ru/magritte-ui-scrollbar": "1.0.1",
+    "@hh.ru/magritte-ui-typography": "4.2.2"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
@@ -38,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fb6e7a383f8c329c0b5bc46df4d4bb11e44d9d24"
+  "gitHead": "8c9ac514d963c54434c7f9ed84d3ae347fc5f396"
 }

package/useHeightObserver.d.ts

@@ -0,0 +1,14 @@
+import { type RefObject } from 'react';
+import { type TextAreaLayout, type TextAreaSize } from '@hh.ru/magritte-ui-textarea/types';
+type UseHeightObserverArgs = {
+    size: TextAreaSize;
+    minHeight: number | undefined;
+    layout: TextAreaLayout;
+    contentCloneRef: RefObject<HTMLElement>;
+    onHeightChange?: VoidFunction;
+};
+export declare const useHeightObserver: ({ size, minHeight, layout, contentCloneRef, onHeightChange, }: UseHeightObserverArgs) => {
+    minHeight: number;
+    maxedHeight: boolean;
+};
+export {};

package/{useMinHeight.js → useHeightObserver.js}

@@ -2,15 +2,18 @@ import './index.css';
 import { useState, useRef, useEffect } from 'react';
 import { MIN_HEIGHT_BY_SIZE } from './types.js';
 
-const useMinHeight = (size, minHeight, layout, contentCloneRef) => {
+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 || isMaxSizeHeight) {
+        if (!contentCloneRef.current) {
             return void 0;
         }
         const range = document.createRange();
@@ -20,11 +23,15 @@ const useMinHeight = (size, minHeight, layout, contentCloneRef) => {
             }
             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, isMaxSizeHeight]);
+    }, [layout, size, contentCloneRef]);
     let resultMinHeight = isSizeChanged || isMaxSizeHeight ? _minHeight : actualMinHeight;
     if (layout !== 'hug') {
         resultMinHeight = MIN_HEIGHT_BY_SIZE[size][1];
@@ -32,5 +39,5 @@ const useMinHeight = (size, minHeight, layout, contentCloneRef) => {
     return { minHeight: resultMinHeight, maxedHeight: resultMinHeight === MIN_HEIGHT_BY_SIZE[size][1] };
 };
 
-export { useMinHeight };
-//# sourceMappingURL=useMinHeight.js.map
+export { useHeightObserver };
+//# sourceMappingURL=useHeightObserver.js.map

package/useHeightObserver.js.map

@@ -0,0 +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;;;;"}

package/useMinHeight.d.ts

@@ -1,6 +0,0 @@
-import { type RefObject } from 'react';
-import { type TextAreaLayout, type TextAreaSize } from '@hh.ru/magritte-ui-textarea/types';
-export declare const useMinHeight: (size: TextAreaSize, minHeight: number | undefined, layout: TextAreaLayout, contentCloneRef: RefObject<HTMLElement>) => {
-    minHeight: number;
-    maxedHeight: boolean;
-};

package/useMinHeight.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMinHeight.js","sources":["../src/useMinHeight.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\nexport const useMinHeight = (\n    size: TextAreaSize,\n    minHeight: number | undefined,\n    layout: TextAreaLayout,\n    contentCloneRef: RefObject<HTMLElement>\n): { 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\n    useEffect(() => {\n        if (!contentCloneRef.current || isMaxSizeHeight) {\n            return void 0;\n        }\n        const range = document.createRange();\n\n        const observer = new ResizeObserver(() => {\n            if (!contentCloneRef.current) {\n                return;\n            }\n\n            range.selectNodeContents(contentCloneRef.current);\n            const rects = range.getClientRects();\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, isMaxSizeHeight]);\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":";;;AAIO,MAAM,YAAY,GAAG,CACxB,IAAkB,EAClB,SAA6B,EAC7B,MAAsB,EACtB,eAAuC,KACM;IAC7C,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;IAEpC,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,eAAe,CAAC,OAAO,IAAI,eAAe,EAAE;YAC7C,OAAO,KAAK,CAAC,CAAC;SACjB;AACD,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;AAErC,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;YACrC,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,EAAE,eAAe,CAAC,CAAC,CAAC;AAErD,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;;;;"}