fix(plasma-web,plasma-b2c): Add useResizeObserver and fix behavior with resize in TextArea

packages/plasma-b2c/src/components/TextArea/TextArea.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import {
     TextFieldRoot,
@@ -7,6 +7,7 @@ import {
     primary,
     secondary,
     tertiary,
+    useResizeObserver,
 } from '@sberdevices/plasma-core';
 import type { TextAreaProps as BaseProps } from '@sberdevices/plasma-core';
 
@@ -44,6 +45,10 @@ const StyledTextArea = styled(BaseArea)`
     }
 `;
 
+const StyledFieldHelpers = styled(FieldHelpers)<{ width: number }>`
+    width: ${({ width }) => width}px;
+`;
+
 /**
  * Поле ввода многострочного текста.
  */
@@ -66,10 +71,21 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
             className,
             ...rest
         },
-        ref,
+        outerRef,
     ) => {
+        const [width, setWidth] = useState(0);
+        const ref = useMemo(() => (outerRef && 'current' in outerRef ? outerRef : createRef<HTMLTextAreaElement>()), [
+            outerRef,
+        ]);
+
         const placeLabel = (label || placeholder) as string | undefined;
 
+        useResizeObserver(ref, (currentElement) => {
+            const { width: elementWidth } = currentElement.getBoundingClientRect();
+
+            setWidth(elementWidth);
+        });
+
         return (
             <TextFieldRoot
                 status={status}
@@ -92,10 +108,10 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
                         aria-describedby={id ? `${id}-helper` : undefined}
                         {...rest}
                     />
-                    <FieldHelpers id={id ? `${id}-helper` : undefined}>
+                    <StyledFieldHelpers width={width} id={id ? `${id}-helper` : undefined}>
                         <FieldHelper as={TextFieldHelper}>{leftHelper}</FieldHelper>
                         <FieldHelper>{rightHelper}</FieldHelper>
-                    </FieldHelpers>
+                    </StyledFieldHelpers>
                 </FieldWrapper>
             </TextFieldRoot>
         );

packages/plasma-core/package.json

@@ -7,18 +7,7 @@
     "main": "index.js",
     "module": "es/index.js",
     "types": "index.d.ts",
-    "files": [
-        "components",
-        "hocs",
-        "hooks",
-        "mixins",
-        "tokens",
-        "types",
-        "utils",
-        "index.d.ts",
-        "index.js",
-        "es"
-    ],
+    "files": ["components", "hocs", "hooks", "mixins", "tokens", "types", "utils", "index.d.ts", "index.js", "es"],
     "peerDependencies": {
         "react": ">=16.13.1",
         "react-dom": ">=16.13.1",
@@ -36,6 +25,7 @@
         "@types/node": "15.14.9",
         "@types/react": "16.9.38",
         "@types/react-dom": "16.9.8",
+        "@types/resize-observer-browser": "0.1.7",
         "@types/styled-components": "5.1.0",
         "babel-loader": "8.2.2",
         "babel-plugin-annotate-pure-calls": "0.4.0",
@@ -63,11 +53,7 @@
         "test": "NODE_ICU_DATA=node_modules/full-icu jest",
         "test:watch": "NODE_ICU_DATA=node_modules/full-icu jest --watch"
     },
-    "contributors": [
-        "Vasiliy Loginevskiy",
-        "Виноградов Антон Александрович",
-        "Зубаиров Фаниль Асхатович"
-    ],
+    "contributors": ["Vasiliy Loginevskiy", "Виноградов Антон Александрович", "Зубаиров Фаниль Асхатович"],
     "sideEffects": false,
     "dependencies": {
         "focus-visible": "5.2.0",

packages/plasma-core/src/components/TextArea/TextArea.component-test.tsx

@@ -87,6 +87,8 @@ describe('plasma-core: TextArea', () => {
             </CypressTestDecorator>,
         );
 
+        cy.root().get('textarea').last().invoke('attr', 'style', 'width: 280px; height: 140px;');
+
         cy.matchImageSnapshot();
     });
 

packages/plasma-core/src/hooks/index.ts

@@ -2,3 +2,4 @@ export { useDebouncedFunction } from './useDebouncedFunction';
 export { useForkRef } from './useForkRef';
 export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 export { useUniqId } from './useUniqId';
+export { useResizeObserver } from './useResizeObserver';

packages/plasma-core/src/hooks/useResizeObserver.ts

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+
+/**
+ * Отслеживает изменение размеров переданного элемента
+ * @param {React.Ref<T>} ref - реф элемента, за которым нужно следить
+ * @callback callback - функция, которая вызывается при изменении элемента
+ * @param {Element} element - элемент, размер которого изменился
+ */
+export const useResizeObserver = <T extends HTMLElement>(
+    ref: React.MutableRefObject<T | null>,
+    callback: (element: T) => void,
+) => {
+    useEffect(() => {
+        /* istanbul ignore if: убираем проверку на рефы из покрытия */
+        if (!ref?.current) {
+            return;
+        }
+
+        const { current } = ref;
+
+        const resizeObserver = new window.ResizeObserver(() => callback(current));
+
+        resizeObserver.observe(ref.current);
+
+        return () => {
+            /* istanbul ignore if: убираем проверку на рефы из покрытия */
+            if (!ref?.current) {
+                return;
+            }
+
+            resizeObserver.unobserve(ref.current);
+        };
+    }, [ref]);
+};

packages/plasma-web/src/components/TextArea/TextArea.tsx

@@ -1,6 +1,12 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState, useMemo, createRef } from 'react';
 import styled from 'styled-components';
-import { FieldRoot, FieldContent, FieldHelper, TextArea as BaseArea } from '@sberdevices/plasma-core';
+import {
+    FieldRoot,
+    FieldContent,
+    FieldHelper,
+    TextArea as BaseArea,
+    useResizeObserver,
+} from '@sberdevices/plasma-core';
 import type { TextAreaProps as BaseProps } from '@sberdevices/plasma-core';
 
 import { applyInputStyles } from '../Field';
@@ -16,14 +22,35 @@ const StyledTextArea = styled(BaseArea)`
     ${applyInputStyles}
 `;
 
+const StyledFieldHelperWrapper = styled.div<{ width: number }>`
+    position: absolute;
+    top: 0;
+
+    display: flex;
+    justify-content: flex-end;
+
+    width: ${({ width }) => width}px;
+`;
+
 /**
  * Поле ввода многострочного текста.
  */
 // eslint-disable-next-line prefer-arrow-callback
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(
     { id, disabled, status, label, placeholder, contentRight, helperText, style, className, ...rest },
-    ref,
+    outerRef,
 ) {
+    const [width, setWidth] = useState(0);
+    const ref = useMemo(() => (outerRef && 'current' in outerRef ? outerRef : createRef<HTMLTextAreaElement>()), [
+        outerRef,
+    ]);
+
+    useResizeObserver(ref, (currentElement) => {
+        const { width: elementWidth } = currentElement.getBoundingClientRect();
+
+        setWidth(elementWidth);
+    });
+
     const placeLabel = (label || placeholder) as string | undefined;
 
     return (
@@ -44,8 +71,10 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
                 aria-describedby={id ? `${id}-helpertext` : undefined}
                 {...rest}
             />
-            {contentRight && <FieldContent pos="right">{contentRight}</FieldContent>}
             {helperText && <FieldHelper id={id ? `${id}-helpertext` : undefined}>{helperText}</FieldHelper>}
+            <StyledFieldHelperWrapper width={width}>
+                {contentRight && <FieldContent pos="right">{contentRight}</FieldContent>}
+            </StyledFieldHelperWrapper>
         </FieldRoot>
     );
 });