@vkontakte/vkui 8.0.2 → 8.1.0

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

@@ -1 +1 @@
-{"version":3,"sources":["./FormItem.module.css"],"names":["host","withPadding","withRemovable","removable","top","label","aside","labelMultiline","labelRequired","bottom","statusError","statusValid","verified","densityCompact","densityNone","withTop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,a,WAJA;AAAA,E,aASAC,e,WATA;AAAA,E,aAaAC,W,WAbA;AAAA,E,aAuBAC,K,WAvBA;AAAA,E,aA8BAC,O,WA9BA;AAAA,E,aA+BAC,O,WA/BA;AAAA,E,aAqCAD,O,WArCA;AAAA,E,aAyCAC,O,WAzCA;AAAA,E,aA8CAA,O,WA9CA;AAAA,E,aAkDAC,gB,WAlDA;AAAA,E,aAuDAC,e,WAvDA;AAAA,E,aA4DAC,Q,WA5DA;AAAA,E,aAiEAC,a,WAjEA;AAAA,E,aAiEaD,Q,WAjEb;AAAA,E,aAqEAE,a,WArEA;AAAA,E,aAqEaF,Q,WArEb;AAAA,E,aAsEAG,U,WAtEA;AAAA,E,aAsEUH,Q,WAtEV;AAAA,E,aA8EAI,gB,WA9EA;AAAA,E,aA8EgBT,K,WA9EhB;AAAA,E,aAkFAS,gB,WAlFA;AAAA,E,aAkFgBJ,Q,WAlFhB;AAAA,E,aAuFEK,a,WAvFF;AAAA,E,aAuFeV,K,WAvFf;AAAA,E,aA2FEU,a,WA3FF;AAAA,E,aA2FeL,Q,WA3Ff;AAAA,E,aAqGuDT,M,WArGvD;AAAA,E,aAgHEA,M,WAhHF;AAAA,E,aAiHIA,M,WAjHJ;AAAA,E,aAuHEA,M,WAvHF;AAAA,E,aAwHIA,M,WAxHJ;AAAA,E,aA8HEA,M,WA9HF;AAAA,E,aA+HIA,M,WA/HJ;AAAA,E,aAsIEA,M,WAtIF;AAAA,E,aA2IuDe,S,WA3IvD;AAAA,E,aA4IAA,S,WA5IA;AAAA,E,aA4ISZ,W,WA5IT;AAAA,E,aAsJuDU,gB,WAtJvD;AAAA,E,aAsJsEE,S,WAtJtE;AAAA,E,aAuJAF,gB,WAvJA;AAAA,E,aAuJeE,S,WAvJf;AAAA,E,aAuJwBZ,W,WAvJxB;AAAA,E,aAkKyDW,a,WAlKzD;AAAA,E,aAkKqEC,S,WAlKrE;AAAA,E,aAmKID,a,WAnKJ;AAAA,E,aAmKgBC,S,WAnKhB;AAAA,E,aAmKyBZ,W,WAnKzB;AAAA;AAAA","file":"FormItem.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./FormItem.module.css"],"names":["host","withPadding","withRemovable","removable","top","label","aside","labelMultiline","labelRequired","bottom","statusError","statusValid","densityCompact","densityNone","withTop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,a,WAJA;AAAA,E,aASAC,e,WATA;AAAA,E,aAaAC,W,WAbA;AAAA,E,aAuBAC,K,WAvBA;AAAA,E,aA8BAC,O,WA9BA;AAAA,E,aA+BAC,O,WA/BA;AAAA,E,aAqCAD,O,WArCA;AAAA,E,aAyCAC,O,WAzCA;AAAA,E,aA8CAA,O,WA9CA;AAAA,E,aAkDAC,gB,WAlDA;AAAA,E,aAuDAC,e,WAvDA;AAAA,E,aA4DAC,Q,WA5DA;AAAA,E,aAiEAC,a,WAjEA;AAAA,E,aAiEaD,Q,WAjEb;AAAA,E,aAqEAE,a,WArEA;AAAA,E,aAqEaF,Q,WArEb;AAAA,E,aA6EAG,gB,WA7EA;AAAA,E,aA6EgBR,K,WA7EhB;AAAA,E,aAiFAQ,gB,WAjFA;AAAA,E,aAiFgBH,Q,WAjFhB;AAAA,E,aAsFEI,a,WAtFF;AAAA,E,aAsFeT,K,WAtFf;AAAA,E,aA0FES,a,WA1FF;AAAA,E,aA0FeJ,Q,WA1Ff;AAAA,E,aAoGuDT,M,WApGvD;AAAA,E,aA+GEA,M,WA/GF;AAAA,E,aAgHIA,M,WAhHJ;AAAA,E,aAsHEA,M,WAtHF;AAAA,E,aAuHIA,M,WAvHJ;AAAA,E,aA6HEA,M,WA7HF;AAAA,E,aA8HIA,M,WA9HJ;AAAA,E,aAqIEA,M,WArIF;AAAA,E,aA0IuDc,S,WA1IvD;AAAA,E,aA2IAA,S,WA3IA;AAAA,E,aA2ISX,W,WA3IT;AAAA,E,aAqJuDS,gB,WArJvD;AAAA,E,aAqJsEE,S,WArJtE;AAAA,E,aAsJAF,gB,WAtJA;AAAA,E,aAsJeE,S,WAtJf;AAAA,E,aAsJwBX,W,WAtJxB;AAAA,E,aAiKyDU,a,WAjKzD;AAAA,E,aAiKqEC,S,WAjKrE;AAAA,E,aAkKID,a,WAlKJ;AAAA,E,aAkKgBC,S,WAlKhB;AAAA,E,aAkKyBX,W,WAlKzB;AAAA;AAAA","file":"FormItem.module.css.d.ts","sourceRoot":""}

package/src/components/FormItem/FormItem.tsx

@@ -33,52 +33,52 @@ export interface FormItemProps
   /**
    * Дополнительный элемент, отображаемый над содержимым.
    */
-  top?: React.ReactNode;
+  top?: React.ReactNode | undefined;
   /**
    * Передаётся при использовании `top`.
    *
    * `id` для `top`.
    */
-  topId?: string;
+  topId?: string | undefined;
   /**
    * Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.
    */
-  topMultiline?: boolean;
+  topMultiline?: boolean | undefined;
   /**
    * Позволяет поменять тег используемый для top
    * Если оставить пустым, то тег top будет span.
    * Если оставить пустым и использовать htmlFor, то тег top будет label.
    */
-  topComponent?: React.ElementType;
+  topComponent?: React.ElementType | undefined;
   /**
    * Дополнительный элемент, отображаемый под содержимым.
    */
-  bottom?: React.ReactNode;
+  bottom?: React.ReactNode | undefined;
   /**
    * Передаётся при использовании `bottom`.
    *
    * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.
    */
-  bottomId?: string;
+  bottomId?: string | undefined;
   /**
    * Статус, влияющий на стиль отображения компонента.
    */
-  status?: 'default' | 'error' | 'valid';
+  status?: 'default' | 'error' | 'valid' | undefined;
   /**
    * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
    *
    * Режим `indent` предназначен для визуального отступа.
    */
-  removable?: boolean | 'indent';
+  removable?: boolean | 'indent' | undefined;
   /**
    * Удаляет внешние отступы вокруг компонента.
    * @since 5.8.0
    */
-  noPadding?: boolean;
+  noPadding?: boolean | undefined;
   /**
    * Помечает поле обязательным.
    */
-  required?: boolean;
+  required?: boolean | undefined;
 }
 
 /**

package/src/components/FormItem/context.ts

@@ -3,8 +3,8 @@
 import * as React from 'react';
 
 interface FormItemContextProps {
-  required?: boolean;
-  topMultiline?: boolean;
+  required?: boolean | undefined;
+  topMultiline?: boolean | undefined;
 }
 
 export const FormItemContext: React.Context<FormItemContextProps> =

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -20,23 +20,23 @@ export interface FormLayoutGroupProps
   /**
    * Направление отображения элементов формы.
    */
-  mode?: 'vertical' | 'horizontal';
+  mode?: 'vertical' | 'horizontal' | undefined;
   /**
    * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.
    *
    * Режим `indent` предназначен для визуального отступа.
    */
-  removable?: boolean | 'indent';
+  removable?: boolean | 'indent' | undefined;
 
   /**
    * Дает возможность склеить несколько `FormItem`.
    */
-  segmented?: boolean;
+  segmented?: boolean | undefined;
   /**
    * Удаляет внешние отступы вокруг компонента.
    * @since 8.0.0
    */
-  noPadding?: boolean;
+  noPadding?: boolean | undefined;
 }
 
 /**

package/src/components/FormStatus/FormStatus.tsx

@@ -8,11 +8,11 @@ export interface FormStatusProps extends Omit<HTMLAttributesWithRootRef<HTMLDivE
   /**
    * Режим отображения компонента.
    */
-  mode?: 'default' | 'error';
+  mode?: 'default' | 'error' | undefined;
   /**
    * Основной текст.
    */
-  title?: React.ReactNode;
+  title?: React.ReactNode | undefined;
 }
 
 /**

package/src/components/Gallery/Gallery.tsx

@@ -15,7 +15,7 @@ export interface GalleryProps extends BaseGalleryProps {
   /**
    * Индекс слайда по умолчанию.
    */
-  initialSlideIndex?: number;
+  initialSlideIndex?: number | undefined;
   /**
    * При передаче происходит автоматический переход к следующему слайду через переданное время в ms.
    * Автоматический переход будет ставиться на паузу при:
@@ -23,7 +23,7 @@ export interface GalleryProps extends BaseGalleryProps {
    * - фокусе на любой элемент внутри компонента;
    * - при наведении мыши на компонент.
    */
-  timeout?: number;
+  timeout?: number | undefined;
 }
 
 /**

package/src/components/Gradient/Gradient.tsx

@@ -12,11 +12,11 @@ export interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement>
   /**
    * Тип градиента.
    */
-  mode?: 'tint' | 'default' | 'overlay';
+  mode?: 'tint' | 'default' | 'overlay' | undefined;
   /**
    * Направление градиента.
    */
-  to?: 'top' | 'bottom';
+  to?: 'top' | 'bottom' | undefined;
 }
 
 /**

package/src/components/GridAvatar/GridAvatar.tsx

@@ -14,7 +14,7 @@ export interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackI
   /**
    * Массив со ссылками. От 1 до 4 элементов.
    */
-  src?: string[];
+  src?: string[] | undefined;
 }
 
 const warn = warnOnce('GridAvatar');

package/src/components/Group/Group.tsx

@@ -10,11 +10,11 @@ export interface GroupProps extends GroupContainerProps {
   /**
    * Элемент заголовка группы.
    */
-  header?: React.ReactNode;
+  header?: React.ReactNode | undefined;
   /**
    * Подпись под содержимым.
    */
-  description?: React.ReactNode;
+  description?: React.ReactNode | undefined;
 }
 
 /**

package/src/components/Group/GroupContainer.tsx

@@ -84,18 +84,18 @@ export type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> &
     `hide` - разделитель всегда спрятан,
     `auto` - разделитель рисуется автоматически между соседними группами.
    */
-    separator?: 'show' | 'hide' | 'auto';
+    separator?: 'show' | 'hide' | 'auto' | undefined;
     /**
      * Режим отображения. Если установлен `card`, выглядит как карточка c
      * обводкой и внешними отступами. Если `plain` — без отступов и обводки.
      * По умолчанию режим отображения зависит от `viewWidth` (`card` при `SMALL_TABLET` и `plain` при `MOBILE`)
      * В модальных окнах по умолчанию `plain`.
      */
-    mode?: 'plain' | 'card';
+    mode?: 'plain' | 'card' | undefined;
     /**
      * Отвечает за отступы вокруг контента в режиме `card`.
      */
-    padding?: 's' | 'm';
+    padding?: 's' | 'm' | undefined;
   };
 
 const warn = warnOnce('Group');

package/src/components/Group/GroupExpandedContent.tsx

@@ -12,7 +12,7 @@ export type GroupExpandedContentProps = HTMLAttributesWithRootRef<HTMLElement> &
     /**
      * Направление отображения контента.
      */
-    direction?: 'inline' | 'block';
+    direction?: 'inline' | 'block' | undefined;
   };
 export const GroupExpandedContent = ({
   direction = 'inline',

package/src/components/Header/Header.tsx

@@ -16,47 +16,47 @@ export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, Has
   /**
    * Размер компонента.
    */
-  size?: 's' | 'm' | 'l' | 'xl';
+  size?: 's' | 'm' | 'l' | 'xl' | undefined;
   /**
    * Подпись под основным текстом.
    */
-  subtitle?: React.ReactNode;
+  subtitle?: React.ReactNode | undefined;
   /**
    * Позволяет задать тип элемента в который будет обёрнут subtitle.
    */
-  subtitleComponent?: React.ElementType;
+  subtitleComponent?: React.ElementType | undefined;
   /**
    * Допускаются иконки, текст, Link.
    */
-  after?: React.ReactNode;
+  after?: React.ReactNode | undefined;
   /**
    * Допускаются текст, Indicator.
    */
-  indicator?: React.ReactNode;
+  indicator?: React.ReactNode | undefined;
   /**
    * Возможность отображения текста в несколько строк.
    */
-  multiline?: boolean;
+  multiline?: boolean | undefined;
   /**
    * Иконка слева (рекомендуется использовать размер 28px).
    */
-  before?: React.ReactNode;
+  before?: React.ReactNode | undefined;
   /**
    * Иконка слева от title (рекомендуется использовать размер 16px).
    */
-  beforeTitle?: React.ReactNode;
+  beforeTitle?: React.ReactNode | undefined;
   /**
    * Иконка справа от title (рекомендуется использовать размер 16px).
    */
-  afterTitle?: React.ReactNode;
+  afterTitle?: React.ReactNode | undefined;
   /**
    * Иконка слева от subtitle (рекомендуется использовать размер 12px).
    */
-  beforeSubtitle?: React.ReactNode;
+  beforeSubtitle?: React.ReactNode | undefined;
   /**
    * Иконка справа от subtitle (рекомендуется использовать размер 12px).
    */
-  afterSubtitle?: React.ReactNode;
+  afterSubtitle?: React.ReactNode | undefined;
 }
 
 const sizeClassNames: Record<Exclude<HeaderProps['size'], undefined>, string> = {

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -37,34 +37,34 @@ export interface HorizontalCellProps
    * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.
    * Пользовательскую ширину можно задать через числовое значение.
    */
-  size?: LiteralUnion<HorizontalCellSizes, number>;
+  size?: LiteralUnion<HorizontalCellSizes | undefined, number> | undefined;
   /**
    * Заголовок.
    */
-  title?: React.ReactNode;
+  title?: React.ReactNode | undefined;
   /**
    * Дополнительная строка текста под `children`.
    */
-  subtitle?: React.ReactNode;
+  subtitle?: React.ReactNode | undefined;
   /**
    * Дополнительная строка текста под `children` и `subtitle`.
    */
-  extraSubtitle?: React.ReactNode;
+  extraSubtitle?: React.ReactNode | undefined;
   /**
    * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`.
    */
-  textAlign?: 'start' | 'center' | 'end';
+  textAlign?: 'start' | 'center' | 'end' | undefined;
   /**
    * Отключает формирование отступов у крайних элементов.
    *
    * Актуально для использования в многострочных списках.
    */
-  noPadding?: boolean;
+  noPadding?: boolean | undefined;
   /**
    * Позволяет передать типографический компонент, используемый для `title`.
    * По умолчанию `Caption` для `size=s`, иначе `Subhead`.
    */
-  TitleComponent?: React.ElementType;
+  TitleComponent?: React.ElementType | undefined;
 }
 
 /**

package/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx

@@ -25,22 +25,22 @@ export interface HorizontalCellShowMoreProps
    *
    * Игнорируется, если `size='s'`.
    */
-  height?: LiteralUnion<ImageBaseSize, number>;
+  height?: LiteralUnion<ImageBaseSize | undefined, number> | undefined;
   /**
    * Задаёт размер компонента.
    *
    * Значение `s` применяется для `<HorizontalCell size="s"`, в остальных случаях рекомендуется `m`.
    */
-  size?: 's' | 'm';
+  size?: 's' | 'm' | undefined;
   /**
    * Предназначен для отрисовки текста.
    * По умолчанию для `size='s'` содержит текст `Все`, для `size='m'` - `Показать все`.
    * */
-  children?: SubheadProps['children'];
+  children?: SubheadProps['children'] | undefined;
   /**
    * Выравнивание по центру относительно родителя.
    */
-  centered?: boolean;
+  centered?: boolean | undefined;
 }
 
 /**

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -6,10 +6,12 @@ import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useFocusVisible } from '../../hooks/useFocusVisible';
 import { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';
+import { useMergeProps } from '../../hooks/useMergeProps';
 import { easeInOutSine } from '../../lib/fx';
 import { mergeCalls } from '../../lib/mergeCalls';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import type { HasRef, HTMLAttributesWithRootRef } from '../../types';
+import { warnOnce } from '../../lib/warnOnce';
+import type { HasDataAttribute, HasRef, HTMLAttributesWithRootRef } from '../../types';
 import { useHover } from '../Clickable/useState';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';
@@ -35,62 +37,79 @@ interface ScrollContext {
 
 export type ScrollPositionHandler = (currentPosition: number) => number;
 
+const warn = warnOnce('HorizontalScroll');
+
 export interface HorizontalScrollProps
   extends HTMLAttributesWithRootRef<HTMLDivElement>,
     HasRef<HTMLDivElement> {
   /**
    * Функция для расчета величины прокрутки при нажатии на левую стрелку.
    */
-  getScrollToLeft?: ScrollPositionHandler;
+  getScrollToLeft?: ScrollPositionHandler | undefined;
   /**
    * Функция для расчета величины прокрутки при нажатии на правую стрелку.
    */
-  getScrollToRight?: ScrollPositionHandler;
+  getScrollToRight?: ScrollPositionHandler | undefined;
   /**
    * Размер стрелок.
    */
-  arrowSize?: ScrollArrowProps['size'];
+  arrowSize?: ScrollArrowProps['size'] | undefined;
   /**
    * Смещает иконки кнопок навигации по вертикали.
    */
-  arrowOffsetY?: number | string;
+  arrowOffsetY?: number | string | undefined;
+  /**
+   * Смещает иконки кнопок навигации по горизонтали.
+   */
+  arrowOffsetX?: number | string;
   /**
    * Показывать ли стрелки.
    */
-  showArrows?: boolean | 'always';
+  showArrows?: boolean | 'always' | undefined;
+  /**
+   * Свойства, которые можно прокинуть внутрь компонента:
+   * - `prevArrow`: свойства для прокидывания в стрелку "назад";
+   * - `nextArrow`: свойства для прокидывания в стрелку "вперед".
+   */
+  slotProps?: {
+    prevArrow?: Partial<ScrollArrowProps> & HasDataAttribute;
+    nextArrow?: Partial<ScrollArrowProps> & HasDataAttribute;
+  };
   /**
    * Длительность анимации скролла.
    */
-  scrollAnimationDuration?: number;
+  scrollAnimationDuration?: number | undefined;
   /**
    * Добавляет возможность прокручивать контент на любое колесо мыши.
    * По умолчанию прокручивается как любой горизонтальный контент через shift.
    */
-  scrollOnAnyWheel?: boolean;
+  scrollOnAnyWheel?: boolean | undefined;
   /**
+   * @deprecated Since 8.0.0. Вместо этого используйте `slotProps={ prevArrow: { 'data-testid': ... } }`.
    * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента.
    */
-  prevButtonTestId?: string;
+  prevButtonTestId?: string | undefined;
   /**
+   * @deprecated Since 8.0.0. Вместо этого используйте `slotProps={ nextArrow: { 'data-testid': ... } }`.
    * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента.
    */
-  nextButtonTestId?: string;
+  nextButtonTestId?: string | undefined;
   /**
    * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`.
    */
-  ContentWrapperComponent?: React.ElementType;
+  ContentWrapperComponent?: React.ElementType | undefined;
   /**
    * `ref` для обертки над контентом, прокинутым в `children`.
    */
-  contentWrapperRef?: React.Ref<HTMLElement>;
+  contentWrapperRef?: React.Ref<HTMLElement> | undefined;
   /**
    * Специфичный `className` для обертки над контентом, прокинутым в `children`.
    */
-  contentWrapperClassName?: string;
+  contentWrapperClassName?: string | undefined;
   /**
    * Добавляет отступы для контента внутри.
    */
-  withPadding?: boolean;
+  withPadding?: boolean | undefined;
 }
 
 /**
@@ -210,6 +229,7 @@ export const HorizontalScroll = ({
   showArrows = true,
   arrowSize = 'm',
   arrowOffsetY,
+  arrowOffsetX,
   scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,
   getRef,
   scrollOnAnyWheel = false,
@@ -223,8 +243,17 @@ export const HorizontalScroll = ({
   onPointerEnter,
   onPointerLeave,
   onMouseEnter,
+
+  slotProps,
   ...restProps
 }: HorizontalScrollProps): React.ReactNode => {
+  /* istanbul ignore if: не проверяем в тестах */
+  if (process.env.NODE_ENV === 'development' && (prevButtonTestId || nextButtonTestId)) {
+    warn(
+      "Свойства `prevButtonTestId` и `nextButtonTestId` устаревшие, используйте `slotProps={ prevArrow: { 'data-testid': ... }, nextArrow: { 'data-testid': ... } }`",
+    );
+  }
+
   const [canScrollStart, setCanScrollStart] = React.useState(false);
   const [canScrollEnd, setCanScrollEnd] = React.useState(false);
   const { focusVisible, ...focusEvents } = useFocusVisible();
@@ -329,6 +358,22 @@ export const HorizontalScroll = ({
 
   const handlers = mergeCalls(hoverHandlers, { onPointerEnter, onPointerLeave });
 
+  const prevArrowProps = useMergeProps(
+    {
+      className: classNames(styles.arrow, styles.arrowLeft),
+      onClick: scrollToStart,
+    },
+    slotProps?.prevArrow,
+  );
+
+  const nextArrowProps = useMergeProps(
+    {
+      className: classNames(styles.arrow, styles.arrowRight),
+      onClick: scrollToEnd,
+    },
+    slotProps?.nextArrow,
+  );
+
   return (
     <RootComponent
       {...restProps}
@@ -348,11 +393,11 @@ export const HorizontalScroll = ({
           data-testid={prevButtonTestId}
           size={arrowSize}
           offsetY={arrowOffsetY}
+          offsetX={arrowOffsetX}
           direction="left"
           aria-hidden
           tabIndex={-1}
-          className={classNames(styles.arrow, styles.arrowLeft)}
-          onClick={scrollToStart}
+          {...prevArrowProps}
         />
       )}
       {showArrows && canScrollEnd && (
@@ -360,11 +405,11 @@ export const HorizontalScroll = ({
           data-testid={nextButtonTestId}
           size={arrowSize}
           offsetY={arrowOffsetY}
+          offsetX={arrowOffsetX}
           direction="right"
           aria-hidden
           tabIndex={-1}
-          className={classNames(styles.arrow, styles.arrowRight)}
-          onClick={scrollToEnd}
+          {...nextArrowProps}
         />
       )}
       <div

package/src/components/IconButton/IconButton.tsx

@@ -18,7 +18,7 @@ export interface IconButtonProps extends TappableOmitProps {
   /**
    * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий.
    */
-  label?: string;
+  label?: string | undefined;
 }
 
 const warn = warnOnce('IconButton');

package/src/components/Image/Image.tsx

@@ -17,23 +17,23 @@ export interface ImageProps extends Omit<ImageBaseProps, 'badge'> {
   /**
    * Размер закругления.
    */
-  borderRadius?: 's' | 'l' | 'm';
+  borderRadius?: 's' | 'l' | 'm' | undefined;
   /**
    * Размер закругления угла между сторонами начала блока и строки.
    */
-  borderStartStartRadius?: 's' | 'l' | 'm';
+  borderStartStartRadius?: 's' | 'l' | 'm' | undefined;
   /**
    * Размер закругления угла между стороной начала блока и стороной конца строки.
    */
-  borderStartEndRadius?: 's' | 'l' | 'm';
+  borderStartEndRadius?: 's' | 'l' | 'm' | undefined;
   /**
    * Размер закругления угла между стороной конца блока и стороной начала строки.
    */
-  borderEndStartRadius?: 's' | 'l' | 'm';
+  borderEndStartRadius?: 's' | 'l' | 'm' | undefined;
   /**
    * Размер закругления угла между сторонами конца блока и строки.
    */
-  borderEndEndRadius?: 's' | 'l' | 'm';
+  borderEndEndRadius?: 's' | 'l' | 'm' | undefined;
 }
 
 const getBorderRadiusBySize = (