@vkontakte/vkui 7.6.3 → 7.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.6.3",
+  "version": "7.7.0",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",
@@ -88,9 +88,8 @@
     "@swc/helpers": "^0.5.17",
     "@vkontakte/icons": "^3.0.0",
     "@vkontakte/vkjs": "^2.0.1",
-    "@vkontakte/vkui-date-fns-tz": "^0.0.5",
-    "@vkontakte/vkui-floating-ui": "^0.2.6",
-    "date-fns": "^4.1.0"
+    "@vkontakte/vkui-date-fns-tz": "^0.0.6",
+    "@vkontakte/vkui-floating-ui": "^0.2.7"
   },
   "devDependencies": {
     "@types/node": "*",

package/src/components/Calendar/Calendar.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { classNames, isSameDate } from '@vkontakte/vkjs';
-import { startOfMonth } from 'date-fns';
 import { useCalendar } from '../../hooks/useCalendar';
 import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import { Keys, pressedKey } from '../../lib/accessibility';
@@ -14,7 +13,12 @@ import {
   NAVIGATION_KEYS,
   setTimeEqual,
 } from '../../lib/calendar';
-import { convertDateFromTimeZone, convertDateToTimeZone, isSameMonth } from '../../lib/date';
+import {
+  convertDateFromTimeZone,
+  convertDateToTimeZone,
+  isSameMonth,
+  startOfMonth,
+} from '../../lib/date';
 import { isHTMLElement } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -8,8 +8,8 @@ import {
   Icon20ChevronRightOutline,
 } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
-import { addMonths, setMonth, setYear, subMonths } from 'date-fns';
 import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';
+import { addMonths, setMonth, setYear, subMonths } from '../../lib/date';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';

package/src/components/CalendarRange/CalendarRange.tsx

@@ -2,11 +2,17 @@
 
 import * as React from 'react';
 import { isSameDate } from '@vkontakte/vkjs';
-import { addMonths, startOfDay, subMonths } from 'date-fns';
 import { useCalendar } from '../../hooks/useCalendar';
 import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import { isFirstDay, isLastDay } from '../../lib/calendar';
-import { endOfDay, isWithinInterval } from '../../lib/date';
+import {
+  addMonths,
+  endOfDay,
+  isWithinInterval,
+  MONDAY,
+  startOfDay,
+  subMonths,
+} from '../../lib/date';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import {
   CalendarDays,
@@ -117,7 +123,7 @@ export const CalendarRange = ({
   disablePast,
   disableFuture,
   shouldDisableDate,
-  weekStartsOn = 1,
+  weekStartsOn = MONDAY,
   disablePickers,
   prevMonthLabel = 'Предыдущий месяц',
   nextMonthLabel = 'Следующий месяц',

package/src/components/CalendarRange/utils.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { isSameDate } from '@vkontakte/vkjs';
-import { startOfMonth } from 'date-fns';
 import { Keys, pressedKey } from '../../lib/accessibility';
 import { navigateDate, NAVIGATION_KEYS } from '../../lib/calendar';
-import { isSameMonth } from '../../lib/date';
+import { isSameMonth, startOfMonth } from '../../lib/date';
 import { isHTMLElement } from '../../lib/dom';
 import type { DateRangeType } from './types';
 

package/src/components/CalendarTime/CalendarTime.tsx

@@ -3,9 +3,9 @@
 import { type ChangeEvent, useRef } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { setHours, setMinutes } from 'date-fns';
 import { Keys, pressedKey } from '../../lib/accessibility';
 import { callMultiple } from '../../lib/callMultiple';
+import { setHours, setMinutes } from '../../lib/date';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { Button, type ButtonProps } from '../Button/Button';
 import { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';

package/src/components/CarouselBase/CarouselBase.module.css

@@ -78,6 +78,7 @@
 
 .arrow {
   position: absolute;
+  z-index: var(--vkui_internal--z_index_gallery_scroll_arrow);
   opacity: 0;
 }
 
@@ -104,6 +105,7 @@
   opacity: var(--vkui--opacity_disable_accessibility);
 }
 
+.arrowFocusVisible,
 .host .arrow:hover {
   opacity: 1;
 }

package/src/components/CarouselBase/CarouselBase.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./CarouselBase.module.css"],"names":["host","viewport","layer","draggable","slide","customWidth","bullets","bulletsDark","bullet","bulletsLight","bulletActive","arrow","arrowAreaStretch","arrowAreaFit","arrowStart","arrowEnd"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,U,WANA;AAAA,E,aAYAC,O,WAZA;AAAA,E,aAqBAC,W,WArBA;AAAA,E,aAqBWD,O,WArBX;AAAA,E,aAyBAA,O,WAzBA;AAAA,E,aA6BAE,O,WA7BA;AAAA,E,aAoCAC,a,WApCA;AAAA,E,aAoCaD,O,WApCb;AAAA,E,aAyCAA,O,WAzCA;AAAA,E,aA8CAE,S,WA9CA;AAAA,E,aAyDAC,a,WAzDA;AAAA,E,aAyDaC,Q,WAzDb;AAAA,E,aA6DAC,c,WA7DA;AAAA,E,aA6DcD,Q,WA7Dd;AAAA,E,aAiEAA,Q,WAjEA;AAAA,E,aA0EAE,c,WA1EA;AAAA,E,aA8EAC,O,WA9EA;AAAA,E,aAmFAA,O,WAnFA;AAAA,E,aAmFMC,kB,WAnFN;AAAA,E,aAuFAD,O,WAvFA;AAAA,E,aAuFME,c,WAvFN;AAAA,E,aA8FAC,Y,WA9FA;AAAA,E,aAkGAC,U,WAlGA;AAAA,E,aAsGAf,M,WAtGA;AAAA,E,aAsGYW,O,WAtGZ;AAAA,E,aA0GAX,M,WA1GA;AAAA,E,aA0GMW,O,WA1GN;AAAA;AAAA","file":"CarouselBase.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./CarouselBase.module.css"],"names":["host","viewport","layer","draggable","slide","customWidth","bullets","bulletsDark","bullet","bulletsLight","bulletActive","arrow","arrowAreaStretch","arrowAreaFit","arrowStart","arrowEnd","arrowFocusVisible"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,U,WANA;AAAA,E,aAYAC,O,WAZA;AAAA,E,aAqBAC,W,WArBA;AAAA,E,aAqBWD,O,WArBX;AAAA,E,aAyBAA,O,WAzBA;AAAA,E,aA6BAE,O,WA7BA;AAAA,E,aAoCAC,a,WApCA;AAAA,E,aAoCaD,O,WApCb;AAAA,E,aAyCAA,O,WAzCA;AAAA,E,aA8CAE,S,WA9CA;AAAA,E,aAyDAC,a,WAzDA;AAAA,E,aAyDaC,Q,WAzDb;AAAA,E,aA6DAC,c,WA7DA;AAAA,E,aA6DcD,Q,WA7Dd;AAAA,E,aAiEAA,Q,WAjEA;AAAA,E,aA0EAE,c,WA1EA;AAAA,E,aA8EAC,O,WA9EA;AAAA,E,aAoFAA,O,WApFA;AAAA,E,aAoFMC,kB,WApFN;AAAA,E,aAwFAD,O,WAxFA;AAAA,E,aAwFME,c,WAxFN;AAAA,E,aA+FAC,Y,WA/FA;AAAA,E,aAmGAC,U,WAnGA;AAAA,E,aAuGAf,M,WAvGA;AAAA,E,aAuGYW,O,WAvGZ;AAAA,E,aA2GAK,mB,WA3GA;AAAA,E,aA4GAhB,M,WA5GA;AAAA,E,aA4GMW,O,WA5GN;AAAA;AAAA","file":"CarouselBase.module.css.d.ts","sourceRoot":""}

package/src/components/CarouselBase/CarouselBase.tsx

@@ -62,13 +62,18 @@ export const CarouselBase = ({
   getRef,
   arrowSize,
   arrowAreaHeight,
-  arrowNextLabel,
-  arrowPrevLabel,
   slideTestId,
   bulletTestId,
   nextArrowTestId,
   prevArrowTestId,
   looped = false,
+
+  // a11y
+  'aria-roledescription': ariaRoleDescription = 'Карусель',
+  arrowNextLabel = 'Следующий слайд',
+  arrowPrevLabel = 'Предыдущий слайд',
+  slideLabel,
+  slideRoleDescription,
   ...restProps
 }: BaseGalleryProps): React.ReactNode => {
   const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});
@@ -83,7 +88,8 @@ export const CarouselBase = ({
   const shiftXCurrentRef = React.useRef<number>(0);
   const shiftXDeltaRef = React.useRef<number>(0);
   const initialized = React.useRef<boolean>(false);
-  const { addToAnimationQueue, getAnimateFunction, startAnimation } = useSlideAnimation();
+  const { animationInQueue, addToAnimationQueue, getAnimateFunction, startAnimation } =
+    useSlideAnimation();
   const isDragging = React.useRef(false);
 
   const [controlElementsState, setControlElementsState] =
@@ -91,6 +97,8 @@ export const CarouselBase = ({
 
   const hasPointer = useAdaptivityHasPointer();
 
+  const slidesContainerId = React.useId();
+
   const isCenterAlign = align === 'center';
 
   const calculateCanSlideLeft = () => {
@@ -195,6 +203,7 @@ export const CarouselBase = ({
         shiftXCurrentRef.current = Math.abs(shiftXDeltaRef.current) + snaps[0];
       }
       transformCssStyles(shiftX, animation);
+      animationFrameRef.current = null;
     });
   };
 
@@ -308,6 +317,12 @@ export const CarouselBase = ({
       );
     }
 
+    const isAnimationInProgress = animationInQueue() || animationFrameRef.current !== null;
+
+    if (isAnimationInProgress) {
+      return;
+    }
+
     shiftXCurrentRef.current = snaps[slideIndex];
     initialized.current = true;
 
@@ -521,9 +536,19 @@ export const CarouselBase = ({
 
   const { isDraggable, canSlideRight, canSlideLeft } = controlElementsState;
 
+  const handleScrollForFixVoiceOverBehavior = (event: React.UIEvent<HTMLDivElement>) => {
+    restProps.onScroll?.(event);
+    if (rootRef.current) {
+      event.currentTarget.scrollLeft = 0;
+    }
+  };
+
   return (
     <RootComponent
       {...restProps}
+      role="region"
+      onScroll={handleScrollForFixVoiceOverBehavior}
+      aria-roledescription={ariaRoleDescription}
       baseClassName={classNames(
         styles.host,
         slideWidth === 'custom' && styles.customWidth,
@@ -531,6 +556,21 @@ export const CarouselBase = ({
       )}
       getRootRef={rootRef}
     >
+      <ScrollArrows
+        hasPointer={hasPointer}
+        canSlideLeft={canSlideLeft}
+        canSlideRight={canSlideRight}
+        onSlideRight={slideRight}
+        onSlideLeft={slideLeft}
+        showArrows={showArrows}
+        arrowSize={arrowSize}
+        arrowAreaHeight={arrowAreaHeight}
+        arrowPrevLabel={arrowPrevLabel}
+        arrowNextLabel={arrowNextLabel}
+        prevArrowTestId={prevArrowTestId}
+        nextArrowTestId={nextArrowTestId}
+        slidesContainerId={slidesContainerId}
+      />
       <CarouselViewPort
         slideWidth={slideWidth}
         slideTestId={slideTestId}
@@ -540,6 +580,10 @@ export const CarouselBase = ({
         getRootRef={viewportRef}
         layerRef={layerRef}
         setSlideRef={setSlideRef}
+        slidesContainerId={slidesContainerId}
+        slideLabel={slideLabel}
+        slideRoleDescription={slideRoleDescription}
+        onChange={onChange}
       >
         {children}
       </CarouselViewPort>
@@ -552,20 +596,6 @@ export const CarouselBase = ({
           bulletTestId={bulletTestId}
         />
       )}
-      <ScrollArrows
-        hasPointer={hasPointer}
-        canSlideLeft={canSlideLeft}
-        canSlideRight={canSlideRight}
-        onSlideRight={slideRight}
-        onSlideLeft={slideLeft}
-        showArrows={showArrows}
-        arrowSize={arrowSize}
-        arrowAreaHeight={arrowAreaHeight}
-        arrowPrevLabel={arrowPrevLabel}
-        arrowNextLabel={arrowNextLabel}
-        prevArrowTestId={prevArrowTestId}
-        nextArrowTestId={nextArrowTestId}
-      />
     </RootComponent>
   );
 };

package/src/components/CarouselBase/CarouselViewPort.tsx

@@ -7,7 +7,10 @@ import { type CustomTouchEvent, Touch } from '../Touch/Touch';
 import { type BaseGalleryProps } from './types';
 import styles from './CarouselBase.module.css';
 
-type GalleryViewPortProps = Pick<BaseGalleryProps, 'slideWidth' | 'slideTestId'> &
+type GalleryViewPortProps = Pick<
+  BaseGalleryProps,
+  'slideWidth' | 'slideTestId' | 'slideRoleDescription' | 'slideLabel' | 'onChange'
+> &
   HasRootRef<HTMLElement> &
   HasChildren & {
     onStart: (e: CustomTouchEvent) => void;
@@ -15,11 +18,17 @@ type GalleryViewPortProps = Pick<BaseGalleryProps, 'slideWidth' | 'slideTestId'>
     onEnd: (e: CustomTouchEvent) => void;
     setSlideRef: (slideRef: HTMLDivElement | null, slideIndex: number) => void;
     layerRef?: React.Ref<HTMLDivElement>;
+    slidesContainerId: string;
   };
 
+const defaultSlideLabel = (index: number, slidesCount: number) => `${index + 1} из ${slidesCount}`;
+
 export const CarouselViewPort = ({
   slideTestId,
   slideWidth,
+  slideLabel = defaultSlideLabel,
+  slideRoleDescription = 'Слайд',
+  onChange,
   onStart,
   onMoveX,
   onEnd,
@@ -27,7 +36,15 @@ export const CarouselViewPort = ({
   layerRef,
   children,
   setSlideRef,
+  slidesContainerId,
 }: GalleryViewPortProps) => {
+  const slidesCount = React.Children.count(children);
+
+  const onSlideFocus = React.useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => onChange?.(Number(e.currentTarget.dataset.index)),
+    [onChange],
+  );
+
   return (
     <Touch
       className={styles.viewport}
@@ -38,13 +55,19 @@ export const CarouselViewPort = ({
       noSlideClick
       getRootRef={getRootRef}
     >
-      <div className={styles.layer} ref={layerRef}>
+      <div className={styles.layer} ref={layerRef} id={slidesContainerId}>
         {React.Children.map(children, (item: React.ReactNode, i: number) => (
           <div
+            role="group"
+            aria-roledescription={slideRoleDescription}
+            aria-label={typeof slideLabel === 'function' ? slideLabel(i, slidesCount) : slideLabel}
             className={styles.slide}
             key={`slide-${i}`}
             data-testid={slideTestId?.(i)}
             ref={(el) => setSlideRef(el, i)}
+            data-index={i}
+            tabIndex={0}
+            onFocus={onSlideFocus}
           >
             {item}
           </div>

package/src/components/CarouselBase/ScrollArrows.tsx

@@ -3,6 +3,7 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useFocusVisible } from '../../hooks/useFocusVisible';
 import { ScrollArrow } from '../ScrollArrow/ScrollArrow';
 import { type BaseGalleryProps } from './types';
 import styles from './CarouselBase.module.css';
@@ -15,11 +16,13 @@ const stylesArrowAreaHeight = {
 export const getArrowClassName = (
   side: 'start' | 'end',
   arrowAreaHeight: Exclude<BaseGalleryProps['arrowAreaHeight'], undefined>,
+  focusVisible: boolean,
 ) => {
   return classNames(
     styles.arrow,
     side === 'start' ? styles.arrowStart : styles.arrowEnd,
     stylesArrowAreaHeight[arrowAreaHeight],
+    focusVisible && styles.arrowFocusVisible,
   );
 };
 
@@ -45,6 +48,7 @@ interface ScrollArrowsProps
   canSlideRight: boolean;
   onSlideLeft: (e: React.MouseEvent) => void;
   onSlideRight: (e: React.MouseEvent) => void;
+  slidesContainerId: string;
 }
 
 export const ScrollArrows = ({
@@ -60,27 +64,35 @@ export const ScrollArrows = ({
   arrowNextLabel,
   nextArrowTestId,
   prevArrowTestId,
+  slidesContainerId,
 }: ScrollArrowsProps) => {
+  const { focusVisible: prevArrowFocusVisible, ...prevArrowFocusHandlers } = useFocusVisible();
+  const { focusVisible: nextArrowFocusVisible, ...nextArrowFocusHandlers } = useFocusVisible();
+
   return showArrows && hasPointer ? (
     <>
       {canSlideLeft && (
         <ScrollArrow
-          className={getArrowClassName('start', arrowAreaHeight)}
+          className={getArrowClassName('start', arrowAreaHeight, prevArrowFocusVisible)}
           direction="left"
           onClick={onSlideLeft}
           size={arrowSize}
           data-testid={prevArrowTestId}
           label={arrowPrevLabel}
+          aria-controls={slidesContainerId}
+          {...prevArrowFocusHandlers}
         />
       )}
       {canSlideRight && (
         <ScrollArrow
-          className={getArrowClassName('end', arrowAreaHeight)}
+          className={getArrowClassName('end', arrowAreaHeight, nextArrowFocusVisible)}
           direction="right"
           onClick={onSlideRight}
           size={arrowSize}
           data-testid={nextArrowTestId}
           label={arrowNextLabel}
+          aria-controls={slidesContainerId}
+          {...nextArrowFocusHandlers}
         />
       )}
     </>

package/src/components/CarouselBase/hooks.ts

@@ -9,6 +9,7 @@ export function useSlideAnimation(): {
   getAnimateFunction: (drawFunction: DrawInterface) => () => void;
   addToAnimationQueue: (func: VoidFunction) => void;
   startAnimation: () => void;
+  animationInQueue: () => boolean;
 } {
   const animationQueue = React.useRef<VoidFunction[]>([]);
 
@@ -33,7 +34,12 @@ export function useSlideAnimation(): {
     }
   }
 
+  function animationInQueue() {
+    return !!animationQueue.current.length;
+  }
+
   return {
+    animationInQueue,
     getAnimateFunction,
     addToAnimationQueue,
     startAnimation,

package/src/components/CarouselBase/types.ts

@@ -125,6 +125,15 @@ export interface BaseGalleryProps
    * Текст для кнопки-стрелки вправо (вперед). Делает ее доступной для ассистивных технологий.
    */
   arrowNextLabel?: string;
+  /**
+   * Текст для слайда. Делает его доступным для ассистивных технологий. Может быть функцией.
+   * По умолчанию устанавливает `aria-label` вида `${Номер слайда} из ${Количества слайдов}`.
+   */
+  slideLabel?: string | ((index: number, slidesCount: number) => string);
+  /**
+   * Описание роли для слайда, для лучше понимания пользователей скринридеров. По умолчанию - `Слайд`.
+   */
+  slideRoleDescription?: string;
   /**
    * Передает атрибут `data-testid` для слайда.
    */

package/src/components/Cell/Cell.tsx

@@ -51,6 +51,10 @@ export interface CellProps
    * Текст для кнопки перетаскивания ячейки.
    */
   draggerLabel?: string;
+  /**
+   * Передает атрибут `data-testid` для кнопки перетаскивания ячейки.
+   */
+  draggerTestId?: string;
 }
 
 /**
@@ -79,6 +83,7 @@ export const Cell: React.FC<CellProps> & {
   style,
   toggleButtonTestId,
   removeButtonTestId,
+  draggerTestId,
   href: hrefProp,
   ...restProps
 }: CellProps) => {
@@ -98,6 +103,7 @@ export const Cell: React.FC<CellProps> & {
       className={classNames(styles.dragger, !before && !selectable && styles.controlNoBefore)}
       onDragStateChange={setDragging}
       onDragFinish={onDragFinish}
+      data-testid={draggerTestId}
     >
       {draggerLabel}
     </CellDragger>

package/src/components/CustomSelect/CustomSelect.tsx

@@ -94,8 +94,10 @@ const FetchingStatus = ({
       if (fetching) {
         setStatus('fetching');
       } else {
-        setStatus('loaded');
-        setTimeout(() => setStatus('none'), FETCH_STATUS_RESET_DELAY);
+        if (status === 'fetching') {
+          setStatus('loaded');
+          setTimeout(() => setStatus('none'), FETCH_STATUS_RESET_DELAY);
+        }
       }
     },
     [fetching],

package/src/components/DateInput/DateInput.tsx

@@ -3,12 +3,18 @@
 import * as React from 'react';
 import { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
-import { startOfDay, startOfMinute } from 'date-fns';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useDateInput } from '../../hooks/useDateInput';
 import { useExternRef } from '../../hooks/useExternRef';
 import { type UseFocusTrapProps } from '../../hooks/useFocusTrap';
-import { dateFormatter, dateTimeFormatter, isMatch, parse } from '../../lib/date';
+import {
+  dateFormatter,
+  dateTimeFormatter,
+  isMatch,
+  parse,
+  startOfDay,
+  startOfMinute,
+} from '../../lib/date';
 import type { PlacementWithAuto } from '../../lib/floating';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasRootRef } from '../../types';

package/src/components/Gallery/Gallery.tsx

@@ -2,8 +2,11 @@
 
 import * as React from 'react';
 import { clamp } from '../../helpers/math';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { useIsClient } from '../../hooks/useIsClient';
 import { callMultiple } from '../../lib/callMultiple';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { CarouselBase } from '../CarouselBase/CarouselBase';
 import type { BaseGalleryProps } from '../CarouselBase/types';
 import { useAutoPlay } from './hooks';
@@ -15,6 +18,10 @@ export interface GalleryProps extends BaseGalleryProps {
   initialSlideIndex?: number;
   /**
    * При передаче происходит автоматический переход к следующему слайду через переданное время в ms.
+   * Автоматический переход будет ставиться на паузу при:
+   * - начале свайпа для переключения слайда;
+   * - фокусе на любой элемент внутри компонента;
+   * - при наведении мыши на компонент.
    */
   timeout?: number;
 }
@@ -30,8 +37,12 @@ export const Gallery = ({
   bullets,
   onDragStart,
   onDragEnd,
+  getRootRef,
+  onMouseOver,
+  onMouseOut,
   ...props
 }: GalleryProps): React.ReactNode => {
+  const rootRef = useExternRef(getRootRef);
   const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);
   const isControlled = typeof props.slideIndex === 'number';
   const slideIndex = isControlled ? (props.slideIndex ?? 0) : localSlideIndex;
@@ -41,6 +52,7 @@ export const Gallery = ({
   );
   const childCount = slides.length;
   const isClient = useIsClient();
+  const focusWithin = useFocusWithin(rootRef);
 
   const handleChange: GalleryProps['onChange'] = React.useCallback(
     (current: number) => {
@@ -70,6 +82,11 @@ export const Gallery = ({
     setSlideIndex(safeSlideIndex);
   }, [onChange, safeSlideIndex, slideIndex]);
 
+  useIsomorphicLayoutEffect(
+    () => (focusWithin ? autoPlayControls.pause() : autoPlayControls.resume()),
+    [focusWithin, autoPlayControls.pause, autoPlayControls.resume],
+  );
+
   if (!isClient) {
     return null;
   }
@@ -77,9 +94,12 @@ export const Gallery = ({
   return (
     <CarouselBase
       dragDisabled={isControlled && !onChange}
+      getRootRef={rootRef}
       {...props}
       onDragStart={callMultiple(onDragStart, autoPlayControls.pause)}
       onDragEnd={callMultiple(onDragEnd, autoPlayControls.resume)}
+      onMouseEnter={callMultiple(onMouseOver, autoPlayControls.pause)}
+      onMouseLeave={callMultiple(onMouseOut, autoPlayControls.resume)}
       bullets={childCount > 0 && bullets}
       slideIndex={safeSlideIndex}
       onChange={handleChange}

package/src/components/ModalCard/ModalCard.module.css

@@ -61,7 +61,6 @@
 .hostDesktop {
   box-sizing: content-box;
   inline-size: 100%;
-  padding: var(--vkui--spacing_size_m);
   margin-block: auto;
   opacity: 1;
   transition: opacity 340ms var(--vkui--animation_easing_platform);

package/src/components/ModalCard/ModalCard.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./ModalCard.module.css"],"names":["host","hostMaxWidthS","hostMaxWidthM","hostMaxWidthL","hostMobile","hostStateEnter","hostStateEntering","hostStateExiting","hostStateExited","hostDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAA,M,WAJA;AAAA,E,aAQAC,e,WARA;AAAA,E,aAYAC,e,WAZA;AAAA,E,aAgBAC,e,WAhBA;AAAA,E,aAqBAC,Y,WArBA;AAAA,E,aAwCAA,Y,WAxCA;AAAA,E,aAwCWC,gB,WAxCX;AAAA,E,aA6CAD,Y,WA7CA;AAAA,E,aA6CWE,mB,WA7CX;AAAA,E,aAiDAF,Y,WAjDA;AAAA,E,aAiDWG,kB,WAjDX;AAAA,E,aAsDAH,Y,WAtDA;AAAA,E,aAsDWI,iB,WAtDX;AAAA,E,aA4DAC,a,WA5DA;AAAA,E,aAqEAA,a,WArEA;AAAA,E,aAqEYJ,gB,WArEZ;AAAA,E,aA0EAI,a,WA1EA;AAAA,E,aA0EYH,mB,WA1EZ;AAAA,E,aA8EAG,a,WA9EA;AAAA,E,aA8EYF,kB,WA9EZ;AAAA,E,aAkFAE,a,WAlFA;AAAA,E,aAkFYD,iB,WAlFZ;AAAA;AAAA","file":"ModalCard.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ModalCard.module.css"],"names":["host","hostMaxWidthS","hostMaxWidthM","hostMaxWidthL","hostMobile","hostStateEnter","hostStateEntering","hostStateExiting","hostStateExited","hostDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAA,M,WAJA;AAAA,E,aAQAC,e,WARA;AAAA,E,aAYAC,e,WAZA;AAAA,E,aAgBAC,e,WAhBA;AAAA,E,aAqBAC,Y,WArBA;AAAA,E,aAwCAA,Y,WAxCA;AAAA,E,aAwCWC,gB,WAxCX;AAAA,E,aA6CAD,Y,WA7CA;AAAA,E,aA6CWE,mB,WA7CX;AAAA,E,aAiDAF,Y,WAjDA;AAAA,E,aAiDWG,kB,WAjDX;AAAA,E,aAsDAH,Y,WAtDA;AAAA,E,aAsDWI,iB,WAtDX;AAAA,E,aA4DAC,a,WA5DA;AAAA,E,aAoEAA,a,WApEA;AAAA,E,aAoEYJ,gB,WApEZ;AAAA,E,aAyEAI,a,WAzEA;AAAA,E,aAyEYH,mB,WAzEZ;AAAA,E,aA6EAG,a,WA7EA;AAAA,E,aA6EYF,kB,WA7EZ;AAAA,E,aAiFAE,a,WAjFA;AAAA,E,aAiFYD,iB,WAjFZ;AAAA;AAAA","file":"ModalCard.module.css.d.ts","sourceRoot":""}

package/src/components/ModalOutlet/ModalOutlet.module.css

@@ -15,4 +15,5 @@
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
+  padding: var(--vkui--spacing_size_2xl);
 }

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

@@ -31,21 +31,14 @@
 
 /* Desktop */
 .hostDesktop {
-  --vkui_internal_ModalPage--desktopStretchedSize: calc(100% - var(--vkui--spacing_size_2xl) * 2);
   --vkui_internal_ModalPage--desktopMaxWidth: 100%;
   --vkui_internal_ModalPage--desktopMaxHeight: 640px;
   --vkui_internal_ModalPage--userHeight: auto;
 
   position: relative;
   box-sizing: content-box;
-  max-inline-size: min(
-    var(--vkui_internal_ModalPage--desktopMaxWidth),
-    var(--vkui_internal_ModalPage--desktopStretchedSize)
-  );
-  max-block-size: min(
-    var(--vkui_internal_ModalPage--desktopMaxHeight),
-    var(--vkui_internal_ModalPage--desktopStretchedSize)
-  );
+  max-inline-size: var(--vkui_internal_ModalPage--desktopMaxWidth);
+  max-block-size: min(var(--vkui_internal_ModalPage--desktopMaxHeight), 100%);
   margin-block: auto;
 }
 

package/src/components/ModalPage/ModalPage.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./ModalPage.module.css"],"names":["host","hostMobile","hostMobileSafeAreaInsetTop","hostMobileSafeAreaInsetTopWithCustomOffset","hostDesktop","hostDesktopMaxWidthS","hostDesktopMaxWidthM","hostDesktopMaxWidthL","document","documentMobile","documentStateEnter","documentStateEntering","documentStateExiting","documentStateExited","documentDesktop","children","childrenMobile","childrenDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAUAC,Y,WAVA;AAAA,E,aAqBAC,4B,WArBA;AAAA,E,aAyBAC,4C,WAzBA;AAAA,E,aAgCAC,a,WAhCA;AAAA,E,aAmDAC,sB,WAnDA;AAAA,E,aAuDAC,sB,WAvDA;AAAA,E,aA2DAC,sB,WA3DA;AAAA,E,aA+DAC,U,WA/DA;AAAA,E,aA4EAC,gB,WA5EA;AAAA,E,aA6FAA,gB,WA7FA;AAAA,E,aA6FeC,oB,WA7Ff;AAAA,E,aAiGAD,gB,WAjGA;AAAA,E,aAiGeE,uB,WAjGf;AAAA,E,aAsGAF,gB,WAtGA;AAAA,E,aAsGeG,sB,WAtGf;AAAA,E,aA2GAH,gB,WA3GA;AAAA,E,aA2GeI,qB,WA3Gf;AAAA,E,aAgHAC,iB,WAhHA;AAAA,E,aAqHAA,iB,WArHA;AAAA,E,aAqHgBJ,oB,WArHhB;AAAA,E,aAyHAI,iB,WAzHA;AAAA,E,aAyHgBH,uB,WAzHhB;AAAA,E,aA8HAG,iB,WA9HA;AAAA,E,aA8HgBF,sB,WA9HhB;AAAA,E,aAmIAE,iB,WAnIA;AAAA,E,aAmIgBD,qB,WAnIhB;AAAA,E,aAuIAE,U,WAvIA;AAAA,E,aA2JAC,gB,WA3JA;AAAA,E,aAgKAC,iB,WAhKA;AAAA;AAAA","file":"ModalPage.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ModalPage.module.css"],"names":["host","hostMobile","hostMobileSafeAreaInsetTop","hostMobileSafeAreaInsetTopWithCustomOffset","hostDesktop","hostDesktopMaxWidthS","hostDesktopMaxWidthM","hostDesktopMaxWidthL","document","documentMobile","documentStateEnter","documentStateEntering","documentStateExiting","documentStateExited","documentDesktop","children","childrenMobile","childrenDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAUAC,Y,WAVA;AAAA,E,aAqBAC,4B,WArBA;AAAA,E,aAyBAC,4C,WAzBA;AAAA,E,aAgCAC,a,WAhCA;AAAA,E,aA4CAC,sB,WA5CA;AAAA,E,aAgDAC,sB,WAhDA;AAAA,E,aAoDAC,sB,WApDA;AAAA,E,aAwDAC,U,WAxDA;AAAA,E,aAqEAC,gB,WArEA;AAAA,E,aAsFAA,gB,WAtFA;AAAA,E,aAsFeC,oB,WAtFf;AAAA,E,aA0FAD,gB,WA1FA;AAAA,E,aA0FeE,uB,WA1Ff;AAAA,E,aA+FAF,gB,WA/FA;AAAA,E,aA+FeG,sB,WA/Ff;AAAA,E,aAoGAH,gB,WApGA;AAAA,E,aAoGeI,qB,WApGf;AAAA,E,aAyGAC,iB,WAzGA;AAAA,E,aA8GAA,iB,WA9GA;AAAA,E,aA8GgBJ,oB,WA9GhB;AAAA,E,aAkHAI,iB,WAlHA;AAAA,E,aAkHgBH,uB,WAlHhB;AAAA,E,aAuHAG,iB,WAvHA;AAAA,E,aAuHgBF,sB,WAvHhB;AAAA,E,aA4HAE,iB,WA5HA;AAAA,E,aA4HgBD,qB,WA5HhB;AAAA,E,aAgIAE,U,WAhIA;AAAA,E,aAoJAC,gB,WApJA;AAAA,E,aAyJAC,iB,WAzJA;AAAA;AAAA","file":"ModalPage.module.css.d.ts","sourceRoot":""}

package/src/components/ModalPage/ModalPageInternal.tsx

@@ -118,9 +118,9 @@ export const ModalPageInternal = ({
   const handleSheetRef = useExternRef<HTMLDivElement>(setSheetEl, ref);
   const handleSheetScrollRef = useExternRef<HTMLDivElement>(setSheetScrollEl, getModalContentRef);
 
-  const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(
-    isDesktop ? desktopMaxWidth : 's',
-  );
+  const [desktopMaxWidthClassName, desktopMaxWidthStyle] = isDesktop
+    ? resolveDesktopMaxWidth(desktopMaxWidth)
+    : [undefined, undefined];
 
   const modalOverlay = !disableModalOverlay && (
     <ModalOverlay
@@ -213,16 +213,13 @@ const desktopMaxWidthClassNames = {
 function resolveDesktopMaxWidth(
   desktopMaxWidth: ModalPageInternalProps['size'] = 's',
 ): [string | undefined, CSSCustomProperties | undefined] {
-  if (typeof desktopMaxWidth === 'string') {
-    return [desktopMaxWidthClassNames[desktopMaxWidth], undefined];
+  if (typeof desktopMaxWidth === 'number') {
+    return [undefined, { '--vkui_internal_ModalPage--desktopMaxWidth': `${desktopMaxWidth}px` }];
   }
 
-  return [
-    undefined,
-    typeof desktopMaxWidth === 'number'
-      ? { '--vkui_internal_ModalPage--desktopMaxWidth': `${desktopMaxWidth}px` }
-      : undefined,
-  ];
+  return desktopMaxWidthClassNames.hasOwnProperty(desktopMaxWidth)
+    ? [desktopMaxWidthClassNames[desktopMaxWidth], undefined]
+    : [undefined, { '--vkui_internal_ModalPage--desktopMaxWidth': desktopMaxWidth }];
 }
 
 function getHeightCSSVariable(height?: number | string): CSSCustomProperties | undefined {