fix: change getRootRefTest check for null (#5916)

* fix: change getRootRefTest check for null

* fix: type import

packages/vkui/src/components/AdaptivityProvider/AdaptivityProvider.test.tsx

@@ -79,7 +79,7 @@ describe('AdaptivityProvider', () => {
     });
   });
 
-  baselineComponent(AdaptivityProvider, { forward: false, a11y: false });
+  baselineComponent(AdaptivityProvider, { forward: false, a11y: false, getRootRef: false });
 
   describe('without bridge', () => {
     it('should return undefined adaptivity props', () => {

packages/vkui/src/components/Alert/Alert.tsx

@@ -7,7 +7,7 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';
 import { Platform } from '../../lib/platform';
 import { stopPropagation } from '../../lib/utils';
-import { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute } from '../../types';
+import { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute, HasRootRef } from '../../types';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { ButtonProps } from '../Button/Button';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
@@ -31,7 +31,7 @@ export interface AlertActionInterface
   mode: AlertActionMode;
 }
 
-export interface AlertProps extends React.HTMLAttributes<HTMLElement> {
+export interface AlertProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement> {
   actionsLayout?: 'vertical' | 'horizontal';
   actionsAlign?: AlignType;
   actions?: AlertActionInterface[];
@@ -67,6 +67,7 @@ export const Alert = ({
   renderAction,
   actionsAlign,
   dismissButtonMode = 'outside',
+  getRootRef,
   ...restProps
 }: AlertProps) => {
   const generatedId = useId();
@@ -124,7 +125,13 @@ export const Alert = ({
   useScrollLock();
 
   return (
-    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>
+    <PopoutWrapper
+      className={className}
+      closing={closing}
+      style={style}
+      onClick={close}
+      getRootRef={getRootRef}
+    >
       <FocusTrap
         {...restProps}
         getRootRef={elementRef}

packages/vkui/src/components/AppRoot/AppRoot.test.tsx

@@ -7,7 +7,7 @@ import { AppRoot } from './AppRoot';
 import { AppRootContext } from './AppRootContext';
 
 describe('AppRoot', () => {
-  baselineComponent(AppRoot);
+  baselineComponent(AppRoot, { getRootRef: false });
   describe('Manages portal root in embedded mode', () => {
     describe('Creates & injects portal root', () => {
       it.each(['embedded', 'partial'] as const)('in %s mode', (mode) => {

packages/vkui/src/components/CalendarRange/CalendarRange.tsx

@@ -59,7 +59,6 @@ export const CalendarRange = ({
   shouldDisableDate,
   onClose,
   weekStartsOn = 1,
-  getRootRef,
   disablePickers,
   prevMonthAriaLabel,
   nextMonthAriaLabel,

packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx

@@ -137,7 +137,7 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
   const [popperPlacement, setPopperPlacement] = React.useState<Placement | undefined>(undefined);
 
   const scrollBoxRef = React.useRef<HTMLDivElement>(null);
-  const rootRef = useExternRef(getRef);
+  const rootRef = useExternRef(getRootRef);
   const {
     fieldValue,
     selectedOptions = [],

packages/vkui/src/components/ConfigProvider/ConfigProvider.test.tsx

@@ -12,7 +12,7 @@ import {
 } from './ConfigProviderContext';
 
 describe('ConfigProvider', () => {
-  baselineComponent<any>(ConfigProvider, { forward: false, a11y: false });
+  baselineComponent<any>(ConfigProvider, { forward: false, a11y: false, getRootRef: false });
   it('provides config context', () => {
     const config = {
       appearance: Appearance.LIGHT,

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

@@ -0,0 +1,6 @@
+import { baselineComponent } from '../../testing/utils';
+import { CustomScrollView } from './CustomScrollView';
+
+describe(CustomScrollView, () => {
+  baselineComponent(CustomScrollView);
+});

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

@@ -5,10 +5,15 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { DOMProps, useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { stopPropagation } from '../../lib/utils';
+import type { HasRootRef } from '../../types';
 import { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';
 import styles from './CustomScrollView.module.css';
 
-export interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {
+export interface CustomScrollViewProps
+  extends React.AllHTMLAttributes<HTMLDivElement>,
+    DOMProps, // TODO [>=6]: remove
+    HasRootRef<HTMLDivElement>,
+    TrackerOptionsProps {
   windowResize?: boolean;
   boxRef?: React.Ref<HTMLDivElement>;
   className?: HTMLDivElement['className'];
@@ -24,6 +29,8 @@ export const CustomScrollView = ({
   autoHideScrollbar = false,
   autoHideScrollbarDelay,
   onScroll,
+  getRootRef,
+  ...restProps
 }: CustomScrollViewProps) => {
   const { document, window } = useDOM();
 
@@ -174,7 +181,11 @@ export const CustomScrollView = ({
   };
 
   return (
-    <div className={classNames(styles['CustomScrollView'], className)}>
+    <div
+      className={classNames(styles['CustomScrollView'], className)}
+      ref={getRootRef}
+      {...restProps}
+    >
       <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>
         {children}
       </div>

packages/vkui/src/components/FormLayout/FormLayout.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { HasComponent, HasRef } from '../../types';
+import { useExternRef } from '../../hooks/useExternRef';
+import { HasComponent, HasRef, HasRootRef } from '../../types';
 import styles from './FormLayout.module.css';
 
 const preventDefault = (e: React.FormEvent) => e.preventDefault();
 
 export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &
   HasRef<HTMLElement> &
+  HasRootRef<HTMLElement> &
   HasComponent;
 
 /**
@@ -15,17 +17,20 @@ export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &
 export const FormLayout = ({
   children,
   Component = 'form',
-  getRef,
+  getRef, // TOOD [>=6]: remove
+  getRootRef,
   onSubmit = preventDefault,
   className,
   ...restProps
 }: FormLayoutProps) => {
+  const formLayoutRef = useExternRef(getRef, getRootRef);
+
   return (
     <Component
       {...restProps}
       className={classNames(styles['FormLayout'], className)}
       onSubmit={onSubmit}
-      ref={getRef}
+      ref={formLayoutRef}
     >
       {children}
       {Component === 'form' && (

packages/vkui/src/components/LocaleProvider/LocaleProvider.test.tsx

@@ -9,7 +9,7 @@ import {
 import { LocaleProvider } from './LocaleProvider';
 
 describe('LocaleProvider', () => {
-  baselineComponent<any>(LocaleProvider, { forward: false, a11y: false });
+  baselineComponent<any>(LocaleProvider, { forward: false, a11y: false, getRootRef: false });
 
   describe('override config context', () => {
     let config: ConfigProviderContextInterface | undefined;

packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
-import { HasRef } from '../../types';
+import { HasRef, HasRootRef } from '../../types';
 import { ModalPageContext } from '../ModalPage/ModalPageContext';
 import { PanelHeader, PanelHeaderProps } from '../PanelHeader/PanelHeader';
 import { Separator } from '../Separator/Separator';
@@ -12,15 +13,17 @@ import styles from './ModalPageHeader.module.css';
 export interface ModalPageHeaderProps
   extends React.HTMLAttributes<HTMLDivElement>,
     Omit<PanelHeaderProps, 'fixed' | 'shadow'>,
-    HasRef<HTMLDivElement> {}
+    HasRef<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPageHeader
  */
 export const ModalPageHeader = ({
   children,
   separator = true,
-  getRef,
+  getRef, // TODO [>=6]: remove
+  getRootRef,
   className,
   typographyProps,
   ...restProps
@@ -29,6 +32,7 @@ export const ModalPageHeader = ({
   const hasSeparator = separator && platform === Platform.VKCOM;
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
   const { labelId } = React.useContext(ModalPageContext);
+  const modalPageHeaderRef = useExternRef(getRef, getRootRef);
 
   return (
     <div
@@ -37,7 +41,7 @@ export const ModalPageHeader = ({
         platform !== Platform.VKCOM && styles['ModalPageHeader--withGaps'],
         isDesktop && styles['ModalPageHeader--desktop'],
       )}
-      ref={getRef}
+      ref={modalPageHeaderRef}
     >
       <PanelHeader
         className={classNames('vkuiInternalModalPageHeader__in', className)}

packages/vkui/src/components/ModalRoot/ModalRoot.test.tsx

@@ -31,7 +31,7 @@ describe.each([
     jest.useRealTimers();
     rafSpies.forEach((m) => m.mockRestore());
   });
-  baselineComponent<any>(ModalRoot, { forward: false, a11y: false });
+  baselineComponent<any>(ModalRoot, { forward: false, a11y: false, getRootRef: false });
   describe('With ModalPage', () =>
     mountTest(() => (
       <ModalRoot activeModal="m">

packages/vkui/src/components/Tooltip/Tooltip.test.tsx

@@ -26,7 +26,7 @@ describe('Tooltip', () => {
         </Tooltip>
       </TooltipContainer>
     ),
-    { forward: false },
+    { forward: false, getRootRef: false },
   );
 
   it('renders tooltip when isShown=true', async () => {

packages/vkui/src/components/VisuallyHiddenInput/VisuallyHiddenInput.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useExternRef } from '../../hooks/useExternRef';
 import { warnOnce } from '../../lib/warnOnce';
-import { HasRef } from '../../types';
+import { HasRef, HasRootRef } from '../../types';
 import styles from './VisuallyHiddenInput.module.css';
 
 const warn = warnOnce('VisuallyHiddenInput');
 export interface VisuallyHiddenInputProps
   extends React.InputHTMLAttributes<HTMLInputElement>,
+    HasRootRef<HTMLInputElement>,
     HasRef<HTMLInputElement> {}
 /**
  * @deprecated v5.4.0
@@ -17,8 +19,10 @@ export interface VisuallyHiddenInputProps
 export const VisuallyHiddenInput = ({
   getRef,
   className,
+  getRootRef,
   ...restProps
 }: VisuallyHiddenInputProps) => {
+  const visuallyHiddenInputRef = useExternRef(getRef, getRootRef);
   if (process.env.NODE_ENV === 'development') {
     warn(
       'Компонент устарел и будет удален в v6. Используйте https://vkcom.github.io/VKUI/#/VisuallyHidden',
@@ -29,7 +33,7 @@ export const VisuallyHiddenInput = ({
     <input
       {...restProps}
       className={classNames(styles['VisuallyHiddenInput'], className)}
-      ref={getRef}
+      ref={visuallyHiddenInputRef}
     />
   );
 };

packages/vkui/src/testing/utils.tsx

@@ -91,7 +91,7 @@ export function getRootRefTest(Component: React.ComponentType<any>) {
 
     render(<Component getRootRef={ref} />);
 
-    expect(ref.current).not.toBeNull();
+    expect(ref.current).toBeTruthy();
   });
 }