@vkontakte/vkui 5.9.0 → 5.9.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.9.0",
+  "version": "5.9.2",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "main": "dist/cjs/index.js",
@@ -70,10 +70,10 @@
     "react-dom": "^17.0.0 || ^18.1.0"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.0.2",
     "@swc/helpers": "^0.5.2",
     "@vkontakte/icons": "^2.62.0",
     "@vkontakte/vkjs": "^1.1.0",
+    "@vkontakte/vkui-floating-ui": "^0.1.0",
     "dayjs": "^1.11.10",
     "mitt": "^3.0.1"
   },

package/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}

package/src/components/Button/Button.module.css

@@ -185,7 +185,9 @@
 .Button--mode-link .Button__after,
 .Button--mode-link .Button__before,
 .Button--mode-link .Button__content:first-child,
-.Button--mode-link .Button__content:last-child {
+.Button--mode-link .Button__content:last-child,
+.Button--stretched .Button__after:only-child,
+.Button--stretched .Button__before:only-child {
   padding-left: 0;
   padding-right: 0;
 }

package/src/components/CalendarRange/CalendarRange.tsx

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

package/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 = [],

package/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>

package/src/components/CustomSelect/CustomSelect.tsx

@@ -111,6 +111,10 @@ export interface CustomSelectOptionInterface {
   [index: string]: any;
 }
 
+interface CustomSelectRenderOption extends CustomSelectOptionProps {
+  option?: CustomSelectOptionInterface;
+}
+
 export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerOptionsProps {
   /**
    * Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск
@@ -149,7 +153,7 @@ export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerO
    * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии
    * опции.
    */
-  renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;
+  renderOption?: (props: CustomSelectRenderOption) => React.ReactNode;
   /**
    * Рендер-проп для кастомного рендера содержимого дропдауна.
    * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.

package/src/components/CustomSelectOption/CustomSelectOption.module.css

@@ -5,7 +5,6 @@
   position: relative;
   box-sizing: border-box;
   padding: 8px 12px;
-  white-space: nowrap;
   user-select: none;
   cursor: pointer;
   color: var(--vkui--color_text_primary);
@@ -52,8 +51,6 @@
 
 .CustomSelectOption__children {
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .CustomSelectOption__after {
@@ -65,8 +62,6 @@
 
 .CustomSelectOption__description {
   color: var(--vkui--color_text_secondary);
-  text-overflow: ellipsis;
-  overflow: hidden;
 }
 
 .CustomSelectOption__selectedIcon {

package/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' && (

package/src/components/Gallery/Gallery.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { clamp } from '../../helpers/math';
 import { useIsClient } from '../../hooks/useIsClient';
-import { useTimeout } from '../../hooks/useTimeout';
 import { BaseGallery } from '../BaseGallery/BaseGallery';
 import { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';
 import { BaseGalleryProps } from '../BaseGallery/types';
+import { useAutoPlay } from './hooks';
 
 export interface GalleryProps extends BaseGalleryProps {
   initialSlideIndex?: number;
@@ -47,11 +47,7 @@ export const Gallery = ({
     [isControlled, onChange, slideIndex],
   );
 
-  const autoplay = useTimeout(() => handleChange((slideIndex + 1) % childCount), timeout);
-  React.useEffect(
-    () => (timeout ? autoplay.set() : autoplay.clear()),
-    [timeout, slideIndex, autoplay],
-  );
+  useAutoPlay(timeout, slideIndex, () => handleChange((slideIndex + 1) % childCount));
 
   // prevent invalid slideIndex
   // any slide index is invalid with no slides, just keep it as is

package/src/components/Gallery/hooks.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { useTimeout } from '../../hooks/useTimeout';
+import { useDOM } from '../../lib/dom';
+
+export function useAutoPlay(timeout: number, slideIndex: number, callbackFn: VoidFunction) {
+  const { clear: clearAutoPlay, set: setAutoPlay } = useTimeout(callbackFn, timeout);
+  const { document } = useDOM();
+
+  React.useEffect(
+    () => (timeout ? setAutoPlay() : clearAutoPlay()),
+    [timeout, slideIndex, clearAutoPlay, setAutoPlay],
+  );
+
+  // Отключаем прокрутку слайдов при неактивной вкладке
+  React.useEffect(
+    function preventSlideChange() {
+      if (!document || !timeout) {
+        return;
+      }
+
+      const changeAutoPlay = () => {
+        if (document.visibilityState === 'visible') {
+          clearAutoPlay();
+          setAutoPlay();
+        }
+        if (document.visibilityState === 'hidden') {
+          clearAutoPlay();
+        }
+      };
+
+      document.addEventListener('visibilitychange', changeAutoPlay);
+
+      return () => {
+        document.removeEventListener('visibilitychange', changeAutoPlay);
+      };
+    },
+    [document, timeout, clearAutoPlay, setAutoPlay],
+  );
+}

package/src/components/Group/Group.module.css

@@ -9,12 +9,12 @@
 }
 
 .Group--mode-plain:not(:first-of-type) > .Group__header {
-  margin-top: -16px;
+  margin-top: -8px;
 }
 
 @media (--sizeX-compact) {
   .Group--sizeX-none.Group--mode-none:not(:first-of-type) > .Group__header {
-    margin-top: -16px;
+    margin-top: -8px;
   }
 }
 

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { useDirection } from '../../hooks/useDirection';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useExternRef } from '../../hooks/useExternRef';
 import { easeInOutSine } from '../../lib/fx';
@@ -14,7 +15,7 @@ interface ScrollContext {
   scrollAnimationDuration: number;
   animationQueue: VoidFunction[];
   getScrollPosition: (currentPosition: number) => number;
-  onScrollToRightBorder: VoidFunction;
+  onScrollToEndBorder: VoidFunction;
   onScrollEnd: VoidFunction;
   onScrollStart: VoidFunction;
   /**
@@ -22,6 +23,7 @@ interface ScrollContext {
    * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate
    */
   initialScrollWidth: number;
+  textDirection: 'ltr' | 'rtl';
 }
 
 export type ScrollPositionHandler = (currentPosition: number) => number;
@@ -58,11 +60,27 @@ function now() {
   return performance && performance.now ? performance.now() : Date.now();
 }
 
+/**
+ * Округление к большему по модулю
+ *
+ * ## Пример
+ *
+ * ```ts
+ * import { strict as assert } from 'node:assert';
+ *
+ * assert.equal(roundingAwayFromZero(5.1), 6)
+ * assert.equal(roundingAwayFromZero(-5.1), -6)
+ * ```
+ */
+function roundingAwayFromZero(value: number): number {
+  return value > 0 ? Math.ceil(value) : Math.floor(value);
+}
+
 /**
  * Округляем el.scrollLeft
  * https://github.com/VKCOM/VKUI/pull/2445
  */
-const roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);
+const roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);
 
 /**
  * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll
@@ -75,29 +93,38 @@ function doScroll({
   scrollElement,
   getScrollPosition,
   animationQueue,
-  onScrollToRightBorder,
+  onScrollToEndBorder,
   onScrollEnd,
   onScrollStart,
   initialScrollWidth,
   scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,
+  textDirection,
 }: ScrollContext) {
   if (!scrollElement || !getScrollPosition) {
     return;
   }
 
   /**
-   * максимальное значение сдвига влево
+   * крайнее значение сдвига
    */
-  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;
+  const extremeScrollLeft =
+    (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);
 
-  let startLeft = roundUpElementScrollLeft(scrollElement);
-  let endLeft = getScrollPosition(startLeft);
+  let startScrollLeft = roundUpElementScrollLeft(scrollElement);
+  let endScrollLeft = getScrollPosition(startScrollLeft);
 
   onScrollStart();
 
-  if (endLeft >= maxLeft) {
-    onScrollToRightBorder();
-    endLeft = maxLeft;
+  /**
+   * Если окончание прокрутки вышло за ноль
+   */
+  if (startScrollLeft * endScrollLeft < 0) {
+    endScrollLeft = 0;
+  }
+
+  if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {
+    onScrollToEndBorder();
+    endScrollLeft = extremeScrollLeft;
   }
 
   const startTime = now();
@@ -113,10 +140,12 @@ function doScroll({
 
     const value = easeInOutSine(elapsed);
 
-    const currentLeft = startLeft + (endLeft - startLeft) * value;
-    scrollElement.scrollLeft = Math.ceil(currentLeft);
+    const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;
+    scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);
 
-    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {
+    const scrollEnd =
+      textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);
+    if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {
       requestAnimationFrame(scroll);
       return;
     }
@@ -146,10 +175,14 @@ export const HorizontalScroll = ({
 }: HorizontalScrollProps) => {
   const [canScrollLeft, setCanScrollLeft] = React.useState(false);
   const [canScrollRight, setCanScrollRight] = React.useState(false);
+  const [directionRef, textDirection = 'ltr'] = useDirection<HTMLDivElement>();
+
+  const setCanScrollStart = textDirection === 'ltr' ? setCanScrollLeft : setCanScrollRight;
+  const setCanScrollEnd = textDirection === 'ltr' ? setCanScrollRight : setCanScrollLeft;
 
   const isCustomScrollingRef = React.useRef(false);
 
-  const scrollerRef = useExternRef(getRef);
+  const scrollerRef = useExternRef(getRef, directionRef);
 
   const animationQueue = React.useRef<VoidFunction[]>([]);
 
@@ -164,18 +197,19 @@ export const HorizontalScroll = ({
           scrollElement,
           getScrollPosition,
           animationQueue: animationQueue.current,
-          onScrollToRightBorder: () => setCanScrollRight(false),
+          onScrollToEndBorder: () => setCanScrollEnd(false),
           onScrollEnd: () => (isCustomScrollingRef.current = false),
           onScrollStart: () => (isCustomScrollingRef.current = true),
           initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,
           scrollAnimationDuration,
+          textDirection,
         }),
       );
       if (animationQueue.current.length === 1) {
         animationQueue.current[0]();
       }
     },
-    [scrollAnimationDuration, scrollerRef],
+    [scrollerRef, scrollAnimationDuration, textDirection, setCanScrollEnd],
   );
 
   const scrollToLeft = React.useCallback(() => {
@@ -194,13 +228,13 @@ export const HorizontalScroll = ({
     if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {
       const scrollElement = scrollerRef.current;
 
-      setCanScrollLeft(scrollElement.scrollLeft > 0);
-      setCanScrollRight(
-        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <
+      setCanScrollStart(scrollElement.scrollLeft !== 0);
+      setCanScrollEnd(
+        Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <
           scrollElement.scrollWidth,
       );
     }
-  }, [hasPointer, scrollerRef, showArrows]);
+  }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]);
 
   const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);
   React.useEffect(

package/src/components/ModalPage/ModalPage.module.css

@@ -116,10 +116,7 @@
 }
 
 .ModalPage--desktop .ModalPage__content-in,
-:global(.vkuiInternalModalRoot__modal--expandable):not(
-    :global(.vkuiInternalModalRoot__modal--collapsed)
-  )
-  .ModalPage__content-in {
+:global(.vkuiInternalModalRoot__modal--expandable) .ModalPage__content-in {
   height: 100%;
 }
 

package/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,7 +13,8 @@ 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
@@ -20,7 +22,8 @@ export interface ModalPageHeaderProps
 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)}

package/src/components/ModalRoot/ModalRoot.tsx

@@ -402,7 +402,7 @@ class ModalRootTouchComponent extends React.Component<
 
       modalState.translateY = translateY;
       modalState.translateYCurrent = translateY;
-      modalState.collapsed = translateY > 0 && translateY < shiftYEndPercent;
+      modalState.collapsed = numberInRange(translateY, modalState.collapsedRange);
       modalState.expanded = translateY === 0;
       modalState.hidden = translateY === 100;
 
@@ -661,9 +661,10 @@ function initPageModal(modalState: ModalsStateEntry) {
   let translateYFrom;
   let translateY;
   let expandedRange: TranslateRange;
-  let collapsedRange: TranslateRange;
+  let collapsedRange: TranslateRange | undefined;
   let hiddenRange: TranslateRange;
 
+  const hasCollapsedState = Boolean(modalState.expandable && modalState.settlingHeight !== 100);
   if (modalState.expandable) {
     translateYFrom = 100 - (modalState.settlingHeight ?? 0);
 
@@ -671,10 +672,10 @@ function initPageModal(modalState: ModalsStateEntry) {
     const visiblePart = 100 - translateYFrom;
 
     expandedRange = [0, shiftHalf];
-    collapsedRange = [shiftHalf, translateYFrom + visiblePart / 4];
+    collapsedRange = hasCollapsedState ? [shiftHalf, translateYFrom + visiblePart / 4] : undefined;
     hiddenRange = [translateYFrom + visiblePart / 4, 100];
 
-    collapsed = translateYFrom > 0;
+    collapsed = hasCollapsedState && translateYFrom > 0;
     expanded = translateYFrom <= 0;
     translateY = translateYFrom;
   } else {
@@ -686,7 +687,7 @@ function initPageModal(modalState: ModalsStateEntry) {
     translateY = translateYFrom;
 
     expandedRange = [translateY, translateY + 25];
-    collapsedRange = [translateY + 25, translateY + 25];
+    collapsedRange = undefined;
     hiddenRange = [translateY + 25, translateY + 100];
   }
 

package/src/components/PanelHeaderButton/PanelHeaderButton.module.css

@@ -17,7 +17,7 @@
 .PanelHeaderButton--primitive {
   height: 48px;
   line-height: 48px;
-  padding: 0 12px;
+  padding: 0 10px;
 }
 
 /*
@@ -44,6 +44,11 @@
   padding: 8px;
 }
 
+/* stylelint-disable-next-line @project-tools/stylelint-atomic -- фикс для иконки назад */
+.PanelHeaderBack--ios :global(.vkuiIcon--w-20) {
+  padding-left: 4px;
+}
+
 /*
  * Android
  */

package/src/components/Snackbar/Snackbar.module.css

@@ -42,7 +42,7 @@
   align-items: center;
   background: var(--vkui--color_background_modal);
   box-shadow: var(--vkui--elevation4);
-  border-radius: var(--vkui--size_border_radius--regular);
+  border-radius: var(--vkui--size_card_border_radius--regular);
 }
 
 .Snackbar--mode-dark .Snackbar__body {

package/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}
     />
   );
 };