@vkontakte/vkui 8.0.1 → 8.1.0

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 = (

package/src/components/ImageBase/ImageBase.module.css

@@ -41,10 +41,19 @@
   transform-origin: left top;
 }
 
-.img {
-  display: block;
+.imgWithFilterContainer {
+  overflow: hidden; /* Обрезает сайд-эффекты свойства `filter`. */
+}
+
+.img,
+.imgWithFilterContainer {
   inline-size: 100%;
   block-size: 100%;
+  border-radius: inherit;
+}
+
+.img {
+  display: block;
   /* Скрывает текст из атрибута alt. */
   color: transparent;
   /*
@@ -53,7 +62,6 @@
   */
   text-indent: 10000px;
   border: 0;
-  border-radius: inherit;
 }
 
 .imgKeepRatio {

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

@@ -1 +1 @@
-{"version":3,"sources":["./ImageBase.module.css"],"names":["host","loaded","transparentBackground","children","border","img","imgKeepRatio","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","withObjectPosition","withFilter","imgHiddenAlt","fallback"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAaAC,Q,WAbA;AAAA,E,aAcAC,uB,WAdA;AAAA,E,aAkBAC,U,WAlBA;AAAA,E,aAmBAC,Q,WAnBA;AAAA,E,aA2BAD,U,WA3BA;AAAA,E,aAkCAC,Q,WAlCA;AAAA,E,aA2CAC,K,WA3CA;AAAA,E,aA0DAC,c,WA1DA;AAAA,E,aA+DAC,qB,WA/DA;AAAA,E,aAmEAC,mB,WAnEA;AAAA,E,aAuEAC,kB,WAvEA;AAAA,E,aA2EAC,uB,WA3EA;AAAA,E,aA+EAC,oB,WA/EA;AAAA,E,aAwFAC,Y,WAxFA;AAAA,E,aAiGAC,c,WAjGA;AAAA,E,aAqGAC,U,WArGA;AAAA,E,aAkH4Cd,M,WAlH5C;AAAA,E,aAuH2CA,M,WAvH3C;AAAA;AAAA","file":"ImageBase.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ImageBase.module.css"],"names":["host","loaded","transparentBackground","children","border","imgWithFilterContainer","img","imgKeepRatio","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","withObjectPosition","withFilter","imgHiddenAlt","fallback"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAaAC,Q,WAbA;AAAA,E,aAcAC,uB,WAdA;AAAA,E,aAkBAC,U,WAlBA;AAAA,E,aAmBAC,Q,WAnBA;AAAA,E,aA2BAD,U,WA3BA;AAAA,E,aAkCAC,Q,WAlCA;AAAA,E,aA2CAC,wB,WA3CA;AAAA,E,aA+CAC,K,WA/CA;AAAA,E,aAgDAD,wB,WAhDA;AAAA,E,aAsDAC,K,WAtDA;AAAA,E,aAkEAC,c,WAlEA;AAAA,E,aAuEAC,qB,WAvEA;AAAA,E,aA2EAC,mB,WA3EA;AAAA,E,aA+EAC,kB,WA/EA;AAAA,E,aAmFAC,uB,WAnFA;AAAA,E,aAuFAC,oB,WAvFA;AAAA,E,aAgGAC,Y,WAhGA;AAAA,E,aAyGAC,c,WAzGA;AAAA,E,aA6GAC,U,WA7GA;AAAA,E,aA0H4Cf,M,WA1H5C;AAAA,E,aA+H2CA,M,WA/H3C;AAAA;AAAA","file":"ImageBase.module.css.d.ts","sourceRoot":""}

package/src/components/ImageBase/ImageBase.tsx

@@ -66,19 +66,19 @@ export interface ImageBaseProps
    *
    * > ⚠️ Использование кастомного размера – это пограничный кейс.
    */
-  size?: LiteralUnion<ImageBaseSize, number>;
+  size?: LiteralUnion<ImageBaseSize, number> | undefined;
   /**
    * Ширина изображения.
    */
-  widthSize?: number | string;
+  widthSize?: number | string | undefined;
   /**
    * Высота изображения.
    */
-  heightSize?: number | string;
+  heightSize?: number | string | undefined;
   /**
    * Отключает обводку.
    */
-  noBorder?: boolean;
+  noBorder?: boolean | undefined;
   /**
    * Фолбек на случай, если картинка не прогрузилась.
    *
@@ -92,47 +92,53 @@ export interface ImageBaseProps
    *
    * > ⚠️ Может перекрывать `children`.
    */
-  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;
+  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps> | undefined;
   /**
    * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.
    * @since 5.10.0
    */
-  withTransparentBackground?: boolean;
+  withTransparentBackground?: boolean | undefined;
   /**
    * Пользовательское значения стиля object-fit
    * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).
    */
-  objectFit?: React.CSSProperties['objectFit'];
+  objectFit?: React.CSSProperties['objectFit'] | undefined;
   /**
    * Пользовательское значения стиля object-position
    * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position).
    */
-  objectPosition?: React.CSSProperties['objectPosition'];
+  objectPosition?: React.CSSProperties['objectPosition'] | undefined;
   /**
    * Флаг для сохранения пропорций картинки.
    * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки.
    */
-  keepAspectRatio?: boolean;
+  keepAspectRatio?: boolean | undefined;
   /**
    * Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming.
    */
-  elementTiming?: string;
+  elementTiming?: string | undefined;
   /**
-   * Пользовательское значения стиля filter
+   * Пользовательское значения стиля filter.
    * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).
+   *
+   * При передаче этого свойства `<img />` будет обёрнут в дополнительный контейнер.
    */
-  filter?: React.CSSProperties['filter'];
+  filter?: React.CSSProperties['filter'] | undefined;
   /**
    * Свойства, которые можно прокинуть внутрь компонента:
    * - `img`: свойства для прокидывания в тег `<img>`;.
    */
-  slotProps?: {
-    img?: React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute;
-  };
+  slotProps?:
+    | {
+        img?:
+          | (React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute)
+          | undefined;
+      }
+    | undefined;
   /**
    * @deprecated Since 7.9.0. Будет удалено в v9. Используйте `slotProps={ img: { getRootRef: ... } }`.
    */
-  getRef?: React.Ref<HTMLImageElement>; // TODO [>=9] Удалить свойство
+  getRef?: React.Ref<HTMLImageElement> | undefined; // TODO [>=9] Удалить свойство
 }
 
 const getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {
@@ -337,6 +343,10 @@ export const ImageBase: React.FC<ImageBaseProps> & {
     [mouseOutHandlers, mouseOverHandlers, size],
   );
 
+  const imgSlot = hasSrc && (
+    <img ref={imgRef} {...imgRest} {...getFetchPriorityProp(fetchPriority)} />
+  );
+
   return (
     <ImageBaseContext.Provider value={contextValue}>
       <Clickable
@@ -351,7 +361,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
         onMouseOut={onMouseOut}
         {...restProps}
       >
-        {hasSrc && <img ref={imgRef} {...imgRest} {...getFetchPriorityProp(fetchPriority)} />}
+        {filter ? <div className={styles.imgWithFilterContainer}>{imgSlot}</div> : imgSlot}
         {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}
         {children && <div className={styles.children}>{children}</div>}
         {!noBorder && <div aria-hidden className={styles.border} />}

package/src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx

@@ -31,7 +31,7 @@ export interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivEl
    * - `"stroke"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).
    * - `"shadow"` – добавляет небольшую тень (⚠️ если фон под компонентом динамический, то ожидайте баг).
    */
-  background?: 'stroke' | 'shadow';
+  background?: 'stroke' | 'shadow' | undefined;
   /**
    * Принимает иконку.
    *