@vkontakte/vkui 6.5.2 → 6.5.4

package/dist/cssm/components/CustomSelect/CustomSelectInput.module.css

@@ -2,10 +2,11 @@
   position: relative;
 }
 
-.CustomSelectInput__input {
+.CustomSelectInput__el {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_form_field_element);
   inline-size: 100%;
   block-size: var(--vkui--size_field_height--regular);
   line-height: var(--vkui--size_field_height--regular);
@@ -17,112 +18,66 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  color: inherit;
+  color: var(--vkui--color_text_primary);
   padding-block: 0;
   padding-inline: 12px;
   background: transparent;
-  /*
-   * По типy option.label может принимать React-компонент,
-   * но React-компонент нельзя отрендерить как value в input.
-   * Поэтому мы всегда стараемся прятать input и поверх рисовать конейнер,
-   * в который можно положить label как строку или как React-компонент.
-   * В то же время у input в value лежит текстовое представление
-   * React компонента специально для скринридера.
-   */
-  opacity: 0;
-}
-
-/*
- * Но в режиме searchable, в фокусе мы наоборот, намеренно показываем
- * input и прячем декоративный label, так как нам важно дать пользователю
- * возможность изменить значение input для поиска.
- * А пользователям скринридера надо дать возможность прочитать выбранное значение.
- */
-
-.CustomSelectInput__input:not(:-moz-read-only):focus {
-  opacity: 1;
-}
-
-.CustomSelectInput__input:not(:read-only):focus {
-  opacity: 1;
-}
-
-.CustomSelectInput__input:-moz-read-only:not(:disabled) {
-  cursor: pointer;
 }
 
-.CustomSelectInput__input:read-only:not(:disabled) {
+.CustomSelectInput__el--cursor-pointer {
   cursor: pointer;
 }
 
-.CustomSelectInput--sizeY-compact .CustomSelectInput__input {
+.CustomSelectInput--sizeY-compact .CustomSelectInput__el {
   block-size: var(--vkui--size_field_height--compact);
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .CustomSelectInput--sizeY-none .CustomSelectInput__input {
+  .CustomSelectInput--sizeY-none .CustomSelectInput__el {
     block-size: var(--vkui--size_field_height--compact);
   }
 }
 
-.CustomSelectInput--hasBefore .CustomSelectInput__input {
+.CustomSelectInput--hasBefore .CustomSelectInput__el {
   -webkit-padding-start: 0;
           padding-inline-start: 0;
 }
 
-.CustomSelectInput--hasAfter .CustomSelectInput__input {
+.CustomSelectInput--hasAfter .CustomSelectInput__el {
   -webkit-padding-end: 0;
           padding-inline-end: 0;
 }
 
-.CustomSelectInput__input::-ms-input-placeholder {
-  color: var(--vkui--color_text_secondary);
-  /* Для Firefox: взято из Input.module.css */
-  opacity: 1;
-}
-
-.CustomSelectInput__input::placeholder {
-  color: var(--vkui--color_text_secondary);
-  /* Для Firefox: взято из Input.module.css */
-  opacity: 1;
+.CustomSelectInput__el:disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
-.CustomSelectInput__label-wrapper {
+.CustomSelectInput__container {
+  z-index: var(--vkui_internal--z_index_form_field_element);
   inline-size: 100%;
   max-block-size: 100%;
   padding-inline: 12px 0;
+  color: var(--vkui--color_text_primary);
   box-sizing: border-box;
   overflow: hidden;
   pointer-events: none;
 }
 
-.CustomSelectInput__input:focus:not(:-moz-read-only) ~ .CustomSelectInput__label-wrapper {
-  display: none;
-}
-
-.CustomSelectInput__input:focus:not(:read-only) ~ .CustomSelectInput__label-wrapper {
-  display: none;
-}
-
-.CustomSelectInput__input:disabled ~ .CustomSelectInput__label-wrapper {
-  opacity: var(--vkui--opacity_disable_accessibility);
-}
-
-.CustomSelectInput--hasBefore .CustomSelectInput__label-wrapper {
+.CustomSelectInput--hasBefore .CustomSelectInput__container {
   -webkit-padding-start: 0;
           padding-inline-start: 0;
 }
 
-.CustomSelectInput--multiline .CustomSelectInput__label-wrapper {
+.CustomSelectInput--multiline .CustomSelectInput__container {
   padding-block: 12px;
 }
 
-.CustomSelectInput--sizeY-compact.CustomSelectInput--multiline .CustomSelectInput__label-wrapper {
+.CustomSelectInput--sizeY-compact.CustomSelectInput--multiline .CustomSelectInput__container {
   padding-block: 8px;
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .CustomSelectInput--sizeY-none.CustomSelectInput--multiline .CustomSelectInput__label-wrapper {
+  .CustomSelectInput--sizeY-none.CustomSelectInput--multiline .CustomSelectInput__container {
     padding-block: 8px;
   }
 }
@@ -134,34 +89,45 @@
   align-items: center;
   flex: 1;
   overflow: hidden;
-  color: var(--vkui--color_text_primary);
-}
-
-.CustomSelectInput--empty .CustomSelectInput__label-wrapper {
-  color: var(--vkui--color_text_secondary);
 }
 
 .CustomSelectInput--hasBefore .CustomSelectInput__input-group {
   border-radius: 0;
 }
 
-.CustomSelectInput__label {
+.CustomSelectInput__title {
   display: block;
 }
 
-.CustomSelectInput:not(.CustomSelectInput--multiline) .CustomSelectInput__label {
+.CustomSelectInput:not(.CustomSelectInput--multiline) .CustomSelectInput__title {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.CustomSelectInput--align-right .CustomSelectInput__label,
-.CustomSelectInput--align-right .CustomSelectInput__input {
+.CustomSelectInput--empty .CustomSelectInput__title {
+  color: var(--vkui--color_text_secondary);
+}
+
+/* Для доступности placeholder в инпуте задан, но визуально не виден, потому что
+ * для комфортного управления видом плейсходера мы рендерим его отдельно, так же как и лэйбл
+ */
+
+.CustomSelectInput__el::-ms-input-placeholder {
+  opacity: 0;
+}
+
+.CustomSelectInput__el::placeholder {
+  opacity: 0;
+}
+
+.CustomSelectInput--align-right .CustomSelectInput__title,
+.CustomSelectInput--align-right .CustomSelectInput__el {
   text-align: end;
 }
 
-.CustomSelectInput--align-center .CustomSelectInput__label,
-.CustomSelectInput--align-center .CustomSelectInput__input {
+.CustomSelectInput--align-center .CustomSelectInput__title,
+.CustomSelectInput--align-center .CustomSelectInput__el {
   text-align: center;
 }
 
@@ -172,7 +138,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
-:global(.vkuiInternalCalendarHeader__picker) .CustomSelectInput__label-wrapper {
+:global(.vkuiInternalCalendarHeader__picker) .CustomSelectInput__container {
   -webkit-padding-end: 4px;
           padding-inline-end: 4px;
 }

package/dist/cssm/components/ImageBase/ImageBase.js

@@ -130,7 +130,10 @@ const sizeToNumber = (size)=>{
                     className: styles['ImageBase__fallback'],
                     children: fallbackIcon
                 }),
-                children,
+                children && /*#__PURE__*/ _jsx("div", {
+                    className: styles['ImageBase__children'],
+                    children: children
+                }),
                 !noBorder && /*#__PURE__*/ _jsx("div", {
                     "aria-hidden": true,
                     className: styles['ImageBase__border']

package/dist/cssm/components/ImageBase/ImageBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения\n   */\n  widthSize?: number | string;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n   */\n  keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles['ImageBase__img--objectFit-contain'];\n    case 'cover':\n      return styles['ImageBase__img--objectFit-cover'];\n    case 'none':\n      return styles['ImageBase__img--objectFit-none'];\n    case 'scale-down':\n      return styles['ImageBase__img--objectFit-scaleDown'];\n  }\n  return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n  if (value.endsWith('px')) {\n    return parseInt(value);\n  }\n  return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n  if (typeof size === 'string') {\n    return parsePx(size);\n  }\n  return size;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  style,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  keepAspectRatio = false,\n  ...restProps\n}: ImageBaseProps) => {\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n\n  const width = widthSize ?? (keepAspectRatio ? undefined : size);\n  const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <Clickable\n        style={{ width, height, ...style }}\n        baseClassName={classNames(\n          styles['ImageBase'],\n          loaded && styles['ImageBase--loaded'],\n          withTransparentBackground && styles['ImageBase--transparent-background'],\n        )}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={classNames(\n              styles['ImageBase__img'],\n              getObjectFitClassName(objectFit),\n              keepAspectRatio && styles['ImageBase__img--keepRatio'],\n            )}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            style={\n              keepAspectRatio\n                ? {\n                    width: widthImg || width,\n                    height: heightImg || height,\n                  }\n                : undefined\n            }\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\n        {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n        {children}\n        {!noBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["React","classNames","useExternRef","minOr","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","style","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","keepAspectRatio","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","baseClassName","img","ref","className","div","aria-hidden","displayName","Badge","Overlay"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения\n   */\n  widthSize?: number | string;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n   */\n  keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles['ImageBase__img--objectFit-contain'];\n    case 'cover':\n      return styles['ImageBase__img--objectFit-cover'];\n    case 'none':\n      return styles['ImageBase__img--objectFit-none'];\n    case 'scale-down':\n      return styles['ImageBase__img--objectFit-scaleDown'];\n  }\n  return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n  if (value.endsWith('px')) {\n    return parseInt(value);\n  }\n  return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n  if (typeof size === 'string') {\n    return parsePx(size);\n  }\n  return size;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  style,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  keepAspectRatio = false,\n  ...restProps\n}: ImageBaseProps) => {\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n\n  const width = widthSize ?? (keepAspectRatio ? undefined : size);\n  const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <Clickable\n        style={{ width, height, ...style }}\n        baseClassName={classNames(\n          styles['ImageBase'],\n          loaded && styles['ImageBase--loaded'],\n          withTransparentBackground && styles['ImageBase--transparent-background'],\n        )}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={classNames(\n              styles['ImageBase__img'],\n              getObjectFitClassName(objectFit),\n              keepAspectRatio && styles['ImageBase__img--keepRatio'],\n            )}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            style={\n              keepAspectRatio\n                ? {\n                    width: widthImg || width,\n                    height: heightImg || height,\n                  }\n                : undefined\n            }\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\n        {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n        {children && <div className={styles['ImageBase__children']}>{children}</div>}\n        {!noBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["React","classNames","useExternRef","minOr","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","style","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","keepAspectRatio","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","baseClassName","img","ref","className","div","aria-hidden","displayName","Badge","Overlay"],"mappings":"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"}

package/dist/cssm/components/ImageBase/ImageBase.module.css

@@ -16,14 +16,25 @@
   background-color: transparent;
 }
 
+.ImageBase__children,
 .ImageBase__border {
-  pointer-events: none;
   position: absolute;
-  z-index: var(--vkui_internal--z_index_image_base_border);
   inset-inline-start: 0;
   inset-block-start: 0;
   inline-size: 100%;
   block-size: 100%;
+}
+
+.ImageBase__children {
+  display: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  border-radius: inherit;
+}
+
+.ImageBase__border {
+  pointer-events: none;
+  z-index: var(--vkui_internal--z_index_image_base_border);
   box-sizing: border-box;
   transform-origin: left top;
   border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);