fix(CustomScrollView): add resize container handler

packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css

@@ -15,6 +15,10 @@
   position: relative;
 }
 
+.CustomScrollView__box-content {
+  position: relative;
+}
+
 .CustomScrollView__barY:active + .CustomScrollView__box {
   pointer-events: none;
 }

packages/vkui/src/components/CustomScrollView/CustomScrollView.tsx

@@ -3,6 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { stopPropagation } from '../../lib/utils';
@@ -57,6 +58,7 @@ export const CustomScrollView = ({
   const trackerTop = React.useRef(0);
 
   const boxRef = useExternRef(externalBoxRef);
+  const boxContentRef = React.useRef<HTMLDivElement>(null);
 
   const barY = React.useRef<HTMLDivElement>(null);
   const trackerY = React.useRef<HTMLDivElement>(null);
@@ -104,6 +106,8 @@ export const CustomScrollView = ({
     }
   }, [windowResize, window]);
 
+  useResizeObserver(boxContentRef, resize);
+
   useIsomorphicLayoutEffect(() => {
     let style = trackerY.current?.style;
     let prop = '';
@@ -200,7 +204,9 @@ export const CustomScrollView = ({
       {...restProps}
     >
       <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>
-        {children}
+        <div ref={boxContentRef} className={styles['CustomScrollView__box-content']}>
+          {children}
+        </div>
       </div>
 
       <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>

packages/vkui/src/hooks/useResizeObserver.test.tsx

@@ -0,0 +1,29 @@
+import { act, useRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import { useResizeObserver } from './useResizeObserver';
+
+describe('test useResizeObserver', () => {
+  it('should call callback when add block', async () => {
+    const callback = jest.fn();
+    const Fixture = (props: { mockedBlocksIds: string[] }) => {
+      const ref = useRef(null);
+      useResizeObserver(ref, callback);
+      return (
+        <div ref={ref} style={{ position: 'static' }}>
+          {props.mockedBlocksIds.map((id) => (
+            <div key={id} data-testid={id} style={{ height: 50 }}></div>
+          ))}
+        </div>
+      );
+    };
+
+    const result = render(<Fixture mockedBlocksIds={['block-1']} />);
+
+    await act(async () => {
+      result.rerender(<Fixture mockedBlocksIds={['block-1', 'block-2']} />);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(screen.getByTestId('block-2')).toBeInTheDocument();
+  });
+});

packages/vkui/src/hooks/useResizeObserver.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { CustomResizeObserver } from '../lib/floating/customResizeObserver';
+import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+import { useStableCallback } from './useStableCallback';
+
+/**
+ * Хук вызывает переданный коллбэк при изменении размеров элемента.
+ */
+export function useResizeObserver(
+  ref: React.MutableRefObject<HTMLElement | null>,
+  callback: (rect: DOMRect) => void,
+) {
+  const stableCallback = useStableCallback(callback);
+
+  useIsomorphicLayoutEffect(
+    function addResizeObserverHandler() {
+      if (!ref.current) {
+        return;
+      }
+      const element = ref.current;
+      const observer = new CustomResizeObserver(() => {
+        stableCallback(element.getBoundingClientRect());
+      });
+      observer.observe(element);
+      observer.appendToTheDOM();
+
+      return () => observer.disconnect();
+    },
+    [ref],
+  );
+}

packages/vkui/src/lib/floating/customResizeObserver.test.ts

@@ -77,6 +77,7 @@ describe(CustomResizeObserver, () => {
       height: '100%',
       pointerEvents: 'none',
       opacity: '0',
+      border: '0',
     });
 
     // скрытым от скринридеров

packages/vkui/src/lib/floating/customResizeObserver.ts

@@ -1,6 +1,14 @@
 const defaultIframeStyles: Pick<
   CSSStyleDeclaration,
-  'position' | 'left' | 'top' | 'zIndex' | 'width' | 'height' | 'pointerEvents' | 'opacity'
+  | 'position'
+  | 'left'
+  | 'top'
+  | 'zIndex'
+  | 'width'
+  | 'height'
+  | 'pointerEvents'
+  | 'opacity'
+  | 'border'
 > = {
   position: 'absolute',
   left: '0',
@@ -10,6 +18,7 @@ const defaultIframeStyles: Pick<
   height: '100%',
   pointerEvents: 'none',
   opacity: '0',
+  border: '0',
 };
 
 /*