@vkontakte/vkui 5.9.1 → 5.9.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.9.1",
+  "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/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}
     />
   );
 };

package/src/lib/floating/adapters.ts

@@ -3,7 +3,7 @@ import {
   type AutoUpdateOptions,
   type FloatingElement,
   type ReferenceType,
-} from '@floating-ui/react-dom';
+} from '@vkontakte/vkui-floating-ui/react-dom';
 
 const defaultOptions = {
   ancestorScroll: true,

package/src/lib/floating/index.ts

@@ -8,7 +8,7 @@ export {
   size as sizeMiddleware,
   hide as hideMiddleware,
   getOverflowAncestors,
-} from '@floating-ui/react-dom';
+} from '@vkontakte/vkui-floating-ui/react-dom';
 
 export type {
   Placement,

package/src/lib/floating/types.ts

@@ -1,4 +1,4 @@
-import type { Placement } from '@floating-ui/react-dom';
+import type { Placement } from '@vkontakte/vkui-floating-ui/react-dom';
 
 export type AutoPlacementType = 'auto' | 'auto-start' | 'auto-end';
 
@@ -9,4 +9,4 @@ export type {
   Middleware as UseFloatingMiddleware,
   UseFloatingData,
   Strategy as FloatingPositionStrategy,
-} from '@floating-ui/react-dom';
+} from '@vkontakte/vkui-floating-ui/react-dom';