@vkontakte/vkui 8.0.2 → 8.1.0

package/dist/components/HorizontalScroll/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { easeInOutSine } from '../../lib/fx';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { useHover } from '../Clickable/useState';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToEndBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate.\n   */\n  initialScrollWidth: number;\n  textDirection: 'ltr' | 'rtl';\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при нажатии на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при нажатии на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  /**\n   * Размер стрелок.\n   */\n  arrowSize?: ScrollArrowProps['size'];\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  /**\n   * Показывать ли стрелки.\n   */\n  showArrows?: boolean | 'always';\n  /**\n   * Длительность анимации скролла.\n   */\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n  /**\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента.\n   */\n  prevButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента.\n   */\n  nextButtonTestId?: string;\n  /**\n   * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`.\n   */\n  ContentWrapperComponent?: React.ElementType;\n  /**\n   * `ref` для обертки над контентом, прокинутым в `children`.\n   */\n  contentWrapperRef?: React.Ref<HTMLElement>;\n  /**\n   * Специфичный `className` для обертки над контентом, прокинутым в `children`.\n   */\n  contentWrapperClassName?: string;\n  /**\n   * Добавляет отступы для контента внутри.\n   */\n  withPadding?: boolean;\n}\n\n/**\n * Timing method.\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округление к большему по модулю.\n *\n * ## Пример\n *\n * ```ts\n * import { strict as assert } from 'node:assert';\n *\n * assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n */\nfunction roundingAwayFromZero(value: number): number {\n  return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445.\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250.\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToEndBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration,\n  textDirection,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * Крайнее значение сдвига.\n   */\n  const extremeScrollLeft =\n    (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);\n\n  const startScrollLeft = roundUpElementScrollLeft(scrollElement);\n  const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);\n\n  let endScrollLeft = getScrollPosition(remappedStartScrollLeft);\n\n  const diff = endScrollLeft - remappedStartScrollLeft;\n  if (textDirection === 'rtl') {\n    endScrollLeft = startScrollLeft - diff;\n  }\n\n  onScrollStart();\n\n  /**\n   * Если окончание прокрутки вышло за ноль.\n   */\n  if (startScrollLeft * endScrollLeft < 0) {\n    endScrollLeft = 0;\n  }\n\n  if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n    onScrollToEndBorder();\n    endScrollLeft = extremeScrollLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n    scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n    const scrollEnd =\n      textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n    if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkui.io/components/horizontal-scroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'm',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  prevButtonTestId,\n  nextButtonTestId,\n  // ContentWrapper\n  ContentWrapperComponent = 'div',\n  contentWrapperRef,\n  contentWrapperClassName,\n  withPadding,\n  onPointerEnter,\n  onPointerLeave,\n  onMouseEnter,\n  ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n  const [canScrollStart, setCanScrollStart] = React.useState(false);\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false);\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n  });\n\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const { isHovered, ...hoverHandlers } = useHover();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToEndBorder: () => setCanScrollEnd(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n          textDirection: direction,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollerRef, scrollAnimationDuration, direction, setCanScrollEnd],\n  );\n\n  const scrollToStart = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToEnd = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const calculateArrowsVisibility = React.useCallback(() => {\n    if (showArrows && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n      const scrollLeft = scrollElement.scrollLeft;\n\n      setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);\n      setCanScrollEnd(\n        Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [showArrows, scrollerRef, isRtl]);\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  useIsomorphicLayoutEffect(\n    function addWheelEventHandler() {\n      const scrollEl = scrollerRef.current;\n      if (!scrollEl) {\n        return noop;\n      }\n      /**\n       * Прокрутка с помощью любого колеса мыши.\n       */\n      const onWheel = (e: WheelEvent) => {\n        scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n        e.preventDefault();\n      };\n\n      const listenerOptions = { passive: false };\n\n      if (scrollOnAnyWheel) {\n        scrollEl.addEventListener('wheel', onWheel, listenerOptions);\n      }\n      scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n\n      return () => {\n        if (scrollOnAnyWheel) {\n          // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n          scrollEl.removeEventListener('wheel', onWheel, listenerOptions);\n        }\n        // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства\n        scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n      };\n    },\n    [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],\n  );\n\n  const handlers = mergeCalls(hoverHandlers, { onPointerEnter, onPointerLeave });\n\n  return (\n    <RootComponent\n      {...restProps}\n      {...handlers}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalHorizontalScroll',\n        (showArrows === 'always' || isHovered) && styles.showArrows,\n        isRtl && styles.rtl,\n        withPadding && styles.withPadding,\n      )}\n      // FIXME: onMouseEnter из restProps затирается, а при callMultiply орет линтер на рефы.\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && canScrollStart && (\n        <ScrollArrow\n          data-testid={prevButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowLeft)}\n          onClick={scrollToStart}\n        />\n      )}\n      {showArrows && canScrollEnd && (\n        <ScrollArrow\n          data-testid={nextButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          aria-hidden\n          tabIndex={-1}\n          className={classNames(styles.arrow, styles.arrowRight)}\n          onClick={scrollToEnd}\n        />\n      )}\n      <div\n        className={classNames(styles.in, focusVisibleClassNames)}\n        ref={scrollerRef}\n        {...focusEvents}\n      >\n        <ContentWrapperComponent\n          className={classNames(styles.inWrapper, contentWrapperClassName)}\n          ref={contentWrapperRef}\n        >\n          {children}\n        </ContentWrapperComponent>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useConfigDirection","useExternRef","useFocusVisible","useFocusVisibleClassName","easeInOutSine","mergeCalls","useIsomorphicLayoutEffect","useHover","RootComponent","ScrollArrow","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","remappedStartScrollLeft","endScrollLeft","diff","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","withPadding","onPointerEnter","onPointerLeave","onMouseEnter","restProps","canScrollStart","setCanScrollStart","useState","canScrollEnd","setCanScrollEnd","focusVisible","focusEvents","focusVisibleClassNames","direction","isRtl","isCustomScrollingRef","useRef","scrollerRef","isHovered","hoverHandlers","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToStart","i","scrollToEnd","calculateArrowsVisibility","useEffect","addWheelEventHandler","scrollEl","onWheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","handlers","baseClassName","data-testid","size","offsetY","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { easeInOutSine } from '../../lib/fx';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { useHover } from '../Clickable/useState';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToEndBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate.\n   */\n  initialScrollWidth: number;\n  textDirection: 'ltr' | 'rtl';\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nconst warn = warnOnce('HorizontalScroll');\n\nexport interface HorizontalScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при нажатии на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler | undefined;\n  /**\n   * Функция для расчета величины прокрутки при нажатии на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler | undefined;\n  /**\n   * Размер стрелок.\n   */\n  arrowSize?: ScrollArrowProps['size'] | undefined;\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string | undefined;\n  /**\n   * Смещает иконки кнопок навигации по горизонтали.\n   */\n  arrowOffsetX?: number | string;\n  /**\n   * Показывать ли стрелки.\n   */\n  showArrows?: boolean | 'always' | undefined;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `prevArrow`: свойства для прокидывания в стрелку \"назад\";\n   * - `nextArrow`: свойства для прокидывания в стрелку \"вперед\".\n   */\n  slotProps?: {\n    prevArrow?: Partial<ScrollArrowProps> & HasDataAttribute;\n    nextArrow?: Partial<ScrollArrowProps> & HasDataAttribute;\n  };\n  /**\n   * Длительность анимации скролла.\n   */\n  scrollAnimationDuration?: number | undefined;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean | undefined;\n  /**\n   * @deprecated Since 8.0.0. Вместо этого используйте `slotProps={ prevArrow: { 'data-testid': ... } }`.\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента.\n   */\n  prevButtonTestId?: string | undefined;\n  /**\n   * @deprecated Since 8.0.0. Вместо этого используйте `slotProps={ nextArrow: { 'data-testid': ... } }`.\n   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента.\n   */\n  nextButtonTestId?: string | undefined;\n  /**\n   * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`.\n   */\n  ContentWrapperComponent?: React.ElementType | undefined;\n  /**\n   * `ref` для обертки над контентом, прокинутым в `children`.\n   */\n  contentWrapperRef?: React.Ref<HTMLElement> | undefined;\n  /**\n   * Специфичный `className` для обертки над контентом, прокинутым в `children`.\n   */\n  contentWrapperClassName?: string | undefined;\n  /**\n   * Добавляет отступы для контента внутри.\n   */\n  withPadding?: boolean | undefined;\n}\n\n/**\n * Timing method.\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округление к большему по модулю.\n *\n * ## Пример\n *\n * ```ts\n * import { strict as assert } from 'node:assert';\n *\n * assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n */\nfunction roundingAwayFromZero(value: number): number {\n  return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445.\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250.\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToEndBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration,\n  textDirection,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * Крайнее значение сдвига.\n   */\n  const extremeScrollLeft =\n    (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);\n\n  const startScrollLeft = roundUpElementScrollLeft(scrollElement);\n  const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);\n\n  let endScrollLeft = getScrollPosition(remappedStartScrollLeft);\n\n  const diff = endScrollLeft - remappedStartScrollLeft;\n  if (textDirection === 'rtl') {\n    endScrollLeft = startScrollLeft - diff;\n  }\n\n  onScrollStart();\n\n  /**\n   * Если окончание прокрутки вышло за ноль.\n   */\n  if (startScrollLeft * endScrollLeft < 0) {\n    endScrollLeft = 0;\n  }\n\n  if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n    onScrollToEndBorder();\n    endScrollLeft = extremeScrollLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n    scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n    const scrollEnd =\n      textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n    if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkui.io/components/horizontal-scroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'm',\n  arrowOffsetY,\n  arrowOffsetX,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  prevButtonTestId,\n  nextButtonTestId,\n  // ContentWrapper\n  ContentWrapperComponent = 'div',\n  contentWrapperRef,\n  contentWrapperClassName,\n  withPadding,\n  onPointerEnter,\n  onPointerLeave,\n  onMouseEnter,\n\n  slotProps,\n  ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development' && (prevButtonTestId || nextButtonTestId)) {\n    warn(\n      \"Свойства `prevButtonTestId` и `nextButtonTestId` устаревшие, используйте `slotProps={ prevArrow: { 'data-testid': ... }, nextArrow: { 'data-testid': ... } }`\",\n    );\n  }\n\n  const [canScrollStart, setCanScrollStart] = React.useState(false);\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false);\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n  });\n\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const { isHovered, ...hoverHandlers } = useHover();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToEndBorder: () => setCanScrollEnd(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n          textDirection: direction,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollerRef, scrollAnimationDuration, direction, setCanScrollEnd],\n  );\n\n  const scrollToStart = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToEnd = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const calculateArrowsVisibility = React.useCallback(() => {\n    if (showArrows && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n      const scrollLeft = scrollElement.scrollLeft;\n\n      setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);\n      setCanScrollEnd(\n        Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [showArrows, scrollerRef, isRtl]);\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  useIsomorphicLayoutEffect(\n    function addWheelEventHandler() {\n      const scrollEl = scrollerRef.current;\n      if (!scrollEl) {\n        return noop;\n      }\n      /**\n       * Прокрутка с помощью любого колеса мыши.\n       */\n      const onWheel = (e: WheelEvent) => {\n        scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n        e.preventDefault();\n      };\n\n      const listenerOptions = { passive: false };\n\n      if (scrollOnAnyWheel) {\n        scrollEl.addEventListener('wheel', onWheel, listenerOptions);\n      }\n      scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n\n      return () => {\n        if (scrollOnAnyWheel) {\n          // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n          scrollEl.removeEventListener('wheel', onWheel, listenerOptions);\n        }\n        // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства\n        scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n      };\n    },\n    [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],\n  );\n\n  const handlers = mergeCalls(hoverHandlers, { onPointerEnter, onPointerLeave });\n\n  const prevArrowProps = useMergeProps(\n    {\n      className: classNames(styles.arrow, styles.arrowLeft),\n      onClick: scrollToStart,\n    },\n    slotProps?.prevArrow,\n  );\n\n  const nextArrowProps = useMergeProps(\n    {\n      className: classNames(styles.arrow, styles.arrowRight),\n      onClick: scrollToEnd,\n    },\n    slotProps?.nextArrow,\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      {...handlers}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalHorizontalScroll',\n        (showArrows === 'always' || isHovered) && styles.showArrows,\n        isRtl && styles.rtl,\n        withPadding && styles.withPadding,\n      )}\n      // FIXME: onMouseEnter из restProps затирается, а при callMultiply орет линтер на рефы.\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && canScrollStart && (\n        <ScrollArrow\n          data-testid={prevButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          offsetX={arrowOffsetX}\n          direction=\"left\"\n          aria-hidden\n          tabIndex={-1}\n          {...prevArrowProps}\n        />\n      )}\n      {showArrows && canScrollEnd && (\n        <ScrollArrow\n          data-testid={nextButtonTestId}\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          offsetX={arrowOffsetX}\n          direction=\"right\"\n          aria-hidden\n          tabIndex={-1}\n          {...nextArrowProps}\n        />\n      )}\n      <div\n        className={classNames(styles.in, focusVisibleClassNames)}\n        ref={scrollerRef}\n        {...focusEvents}\n      >\n        <ContentWrapperComponent\n          className={classNames(styles.inWrapper, contentWrapperClassName)}\n          ref={contentWrapperRef}\n        >\n          {children}\n        </ContentWrapperComponent>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useConfigDirection","useExternRef","useFocusVisible","useFocusVisibleClassName","useMergeProps","easeInOutSine","mergeCalls","useIsomorphicLayoutEffect","warnOnce","useHover","RootComponent","ScrollArrow","warn","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","remappedStartScrollLeft","endScrollLeft","diff","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","arrowOffsetX","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","withPadding","onPointerEnter","onPointerLeave","onMouseEnter","slotProps","restProps","process","env","NODE_ENV","canScrollStart","setCanScrollStart","useState","canScrollEnd","setCanScrollEnd","focusVisible","focusEvents","focusVisibleClassNames","direction","isRtl","isCustomScrollingRef","useRef","scrollerRef","isHovered","hoverHandlers","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToStart","i","scrollToEnd","calculateArrowsVisibility","useEffect","addWheelEventHandler","scrollEl","onWheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","handlers","prevArrowProps","className","onClick","prevArrow","nextArrowProps","nextArrow","baseClassName","data-testid","size","offsetY","offsetX","aria-hidden","tabIndex","div","ref"],"mappings":"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"}

package/dist/components/IconButton/IconButton.d.ts

@@ -3,7 +3,7 @@ export interface IconButtonProps extends TappableOmitProps {
     /**
      * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий.
      */
-    label?: string;
+    label?: string | undefined;
 }
 /**
  * @see https://vkui.io/components/icon-button

package/dist/components/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AASxE,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,mCAAmC,eAAe,KAAG,KAAK,CAAC,SAgCrF,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AASxE,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,mCAAmC,eAAe,KAAG,KAAK,CAAC,SAgCrF,CAAC"}

package/dist/components/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst densityClassNames = {\n  none: styles.densityNone,\n  compact: styles.densityCompact,\n} as const;\n\nexport interface IconButtonProps extends TappableOmitProps {\n  /**\n   * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий.\n   */\n  label?: string;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkui.io/components/icon-button\n */\nexport const IconButton = ({ label, children, ...restProps }: IconButtonProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { density = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        density !== 'regular' && densityClassNames[density],\n        platform === 'ios' && styles.ios,\n      )}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["classNames","useAdaptivity","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","VisuallyHidden","densityClassNames","none","compact","warn","IconButton","label","children","restProps","platform","density","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","baseClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,cAAc,QAAQ,sCAAmC;AAGlE,MAAMC,oBAAoB;IACxBC,IAAI;IACJC,OAAO;AACT;AASA,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,WAA4B;IAC3E,MAAMC,WAAWd;IACjB,MAAM,EAAEe,UAAU,MAAM,EAAE,GAAGhB;IAE7B,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAelB,kBAAkB;YACrCW,UAAU;gBAACA;gBAAUD;aAAM;YAC3B,GAAGE,SAAS;QACd;QAEA,IAAI,CAACM,cAAc;YACjBV,KAAKP,gBAAgBkB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAACjB;QACCkB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;QACjC,GAAGR,SAAS;QACbY,eAAe3B,mCAEbiB,YAAY,aAAaT,iBAAiB,CAACS,QAAQ,EACnDD,aAAa;;YAGdH,uBAAS,KAACN;0BAAgBM;;YAC1BC;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst densityClassNames = {\n  none: styles.densityNone,\n  compact: styles.densityCompact,\n} as const;\n\nexport interface IconButtonProps extends TappableOmitProps {\n  /**\n   * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий.\n   */\n  label?: string | undefined;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkui.io/components/icon-button\n */\nexport const IconButton = ({ label, children, ...restProps }: IconButtonProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { density = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        density !== 'regular' && densityClassNames[density],\n        platform === 'ios' && styles.ios,\n      )}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["classNames","useAdaptivity","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","VisuallyHidden","densityClassNames","none","compact","warn","IconButton","label","children","restProps","platform","density","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","baseClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,cAAc,QAAQ,sCAAmC;AAGlE,MAAMC,oBAAoB;IACxBC,IAAI;IACJC,OAAO;AACT;AASA,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,WAA4B;IAC3E,MAAMC,WAAWd;IACjB,MAAM,EAAEe,UAAU,MAAM,EAAE,GAAGhB;IAE7B,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAelB,kBAAkB;YACrCW,UAAU;gBAACA;gBAAUD;aAAM;YAC3B,GAAGE,SAAS;QACd;QAEA,IAAI,CAACM,cAAc;YACjBV,KAAKP,gBAAgBkB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAACjB;QACCkB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;QACjC,GAAGR,SAAS;QACbY,eAAe3B,mCAEbiB,YAAY,aAAaT,iBAAiB,CAACS,QAAQ,EACnDD,aAAa;;YAGdH,uBAAS,KAACN;0BAAgBM;;YAC1BC;;;AAGP,EAAE"}

package/dist/components/Image/Image.d.ts

@@ -6,23 +6,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;
 }
 /**
  * @see https://vkui.io/components/image

package/dist/components/Image/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,SAAS,EAAE,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG3E,YAAY,EAAE,eAAe,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;AAI5E,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC/B;;OAEG;IACH,sBAAsB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACzC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACtC;AAqED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,OAAO,EAAE,OAAO,SAAS,CAAC,OAAO,CAAC;IAClC,YAAY,EAAE,OAAO,SAAS,CAAC,YAAY,CAAC;CA2D7C,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,SAAS,EAAE,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG3E,YAAY,EAAE,eAAe,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;AAI5E,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IAC3C;;OAEG;IACH,sBAAsB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IACrD;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IACnD;;OAEG;IACH,oBAAoB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IACnD;;OAEG;IACH,kBAAkB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;CAClD;AAqED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,OAAO,EAAE,OAAO,SAAS,CAAC,OAAO,CAAC;IAClC,YAAY,EAAE,OAAO,SAAS,CAAC,YAAY,CAAC;CA2D7C,CAAC"}

package/dist/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { CSSCustomProperties } from '../../types';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nconst IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами начала блока и строки.\n   */\n  borderStartStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной начала блока и стороной конца строки.\n   */\n  borderStartEndRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между стороной конца блока и стороной начала строки.\n   */\n  borderEndStartRadius?: 's' | 'l' | 'm';\n  /**\n   * Размер закругления угла между сторонами конца блока и строки.\n   */\n  borderEndEndRadius?: 's' | 'l' | 'm';\n}\n\nconst getBorderRadiusBySize = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n  switch (borderRadius) {\n    case 's': {\n      if (size <= 32) {\n        return 2;\n      }\n      if (size <= 56) {\n        return 3;\n      }\n      return 4;\n    }\n    case 'm': {\n      if (size <= 32) {\n        return 3;\n      }\n      if (size <= 48) {\n        return 4;\n      }\n      if (size <= 72) {\n        return 6;\n      }\n      if (size <= 80) {\n        return 8;\n      }\n      return 10;\n    }\n    case 'l': {\n      if (size <= 16) {\n        return 4;\n      }\n      if (size <= 20) {\n        return 5;\n      }\n      if (size <= 32) {\n        return 6;\n      }\n      if (size <= 40) {\n        return 8;\n      }\n      if (size <= 48) {\n        return 10;\n      }\n      if (size <= 56) {\n        return 12;\n      }\n      if (size <= 64) {\n        return 14;\n      }\n      return 16;\n    }\n  }\n};\n\nconst getBorderRadiusBySizeInPx = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: ImageProps['borderRadius'],\n) => {\n  if (!borderRadius) {\n    return undefined;\n  }\n\n  return `${getBorderRadiusBySize(size, borderRadius)}px`;\n};\n\n/**\n * @see https://vkui.io/components/image\n */\nexport const Image: React.FC<ImageProps> & {\n  Badge: typeof ImageBadge;\n  Overlay: typeof ImageBase.Overlay;\n  FloatElement: typeof ImageBase.FloatElement;\n} = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius = 'm',\n  borderStartStartRadius,\n  borderStartEndRadius,\n  borderEndStartRadius,\n  borderEndEndRadius,\n  style,\n  className,\n  objectFit = 'cover',\n  ...restProps\n}: ImageProps) => {\n  const borderStyles: CSSCustomProperties<string | undefined> = React.useMemo(\n    () => ({\n      '--vkui_internal--Image_border_radius': getBorderRadiusBySizeInPx(size, borderRadius),\n      '--vkui_internal--Image_border_start_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartStartRadius,\n      ),\n      '--vkui_internal--Image_border_start_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartEndRadius,\n      ),\n      '--vkui_internal--Image_border_end_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndStartRadius,\n      ),\n      '--vkui_internal--Image_border_end_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndEndRadius,\n      ),\n    }),\n    [\n      borderRadius,\n      borderStartStartRadius,\n      borderStartEndRadius,\n      borderEndStartRadius,\n      borderEndEndRadius,\n      size,\n    ],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      objectFit={objectFit}\n      size={size}\n      style={mergeStyle(borderStyles, style)}\n      className={classNames(\n        className,\n        styles.host,\n        borderStartStartRadius && styles.borderStartStartRadius,\n        borderStartEndRadius && styles.borderStartEndRadius,\n        borderEndStartRadius && styles.borderEndStartRadius,\n        borderEndEndRadius && styles.borderEndEndRadius,\n      )}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\nImage.Overlay = ImageBase.Overlay;\nImage.FloatElement = ImageBase.FloatElement;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(Image.Badge, 'Image.Badge');\n  defineComponentDisplayNames(Image.Overlay, 'Image.Overlay');\n  defineComponentDisplayNames(Image.FloatElement, 'Image.FloatElement');\n}\n"],"names":["React","classNames","mergeStyle","defineComponentDisplayNames","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","Badge","Overlay","FloatElement","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,SAAS,QAAyD,4BAAyB;AACpG,SAASC,UAAU,QAA8B,6BAA0B;AAK3E,MAAMC,qBAAqB;AAyB3B,MAAMC,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAEA,MAAME,4BAA4B,CAChCF,MACAC;IAEA,IAAI,CAACA,cAAc;QACjB,OAAOE;IACT;IAEA,OAAO,GAAGJ,sBAAsBC,MAAMC,cAAc,EAAE,CAAC;AACzD;AAEA;;CAEC,GACD,OAAO,MAAMG,QAIT,CAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EACnB,GAAGC,WACQ;IACX,MAAMC,eAAwDrB,MAAMsB,OAAO,CACzE,IAAO,CAAA;YACL,wCAAwCZ,0BAA0BF,MAAMC;YACxE,oDAAoDC,0BAClDF,MACAK;YAEF,kDAAkDH,0BAChDF,MACAM;YAEF,kDAAkDJ,0BAChDF,MACAO;YAEF,gDAAgDL,0BAC9CF,MACAQ;QAEJ,CAAA,GACA;QACEP;QACAI;QACAC;QACAC;QACAC;QACAR;KACD;IAGH,qBACE,KAACJ;QACE,GAAGgB,SAAS;QACbD,WAAWA;QACXX,MAAMA;QACNS,OAAOf,WAAWmB,cAAcJ;QAChCC,WAAWjB,WACTiB,8BAEAL,+DACAC,2DACAC,2DACAC;;AAIR,EAAE;AAEFJ,MAAMW,KAAK,GAAGlB;AACdO,MAAMY,OAAO,GAAGpB,UAAUoB,OAAO;AACjCZ,MAAMa,YAAY,GAAGrB,UAAUqB,YAAY;AAE3C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCzB,4BAA4BS,MAAMW,KAAK,EAAE;IACzCpB,4BAA4BS,MAAMY,OAAO,EAAE;IAC3CrB,4BAA4BS,MAAMa,YAAY,EAAE;AAClD"}
+{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { CSSCustomProperties } from '../../types';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\nimport styles from './Image.module.css';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nconst IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm' | undefined;\n  /**\n   * Размер закругления угла между сторонами начала блока и строки.\n   */\n  borderStartStartRadius?: 's' | 'l' | 'm' | undefined;\n  /**\n   * Размер закругления угла между стороной начала блока и стороной конца строки.\n   */\n  borderStartEndRadius?: 's' | 'l' | 'm' | undefined;\n  /**\n   * Размер закругления угла между стороной конца блока и стороной начала строки.\n   */\n  borderEndStartRadius?: 's' | 'l' | 'm' | undefined;\n  /**\n   * Размер закругления угла между сторонами конца блока и строки.\n   */\n  borderEndEndRadius?: 's' | 'l' | 'm' | undefined;\n}\n\nconst getBorderRadiusBySize = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,\n) => {\n  switch (borderRadius) {\n    case 's': {\n      if (size <= 32) {\n        return 2;\n      }\n      if (size <= 56) {\n        return 3;\n      }\n      return 4;\n    }\n    case 'm': {\n      if (size <= 32) {\n        return 3;\n      }\n      if (size <= 48) {\n        return 4;\n      }\n      if (size <= 72) {\n        return 6;\n      }\n      if (size <= 80) {\n        return 8;\n      }\n      return 10;\n    }\n    case 'l': {\n      if (size <= 16) {\n        return 4;\n      }\n      if (size <= 20) {\n        return 5;\n      }\n      if (size <= 32) {\n        return 6;\n      }\n      if (size <= 40) {\n        return 8;\n      }\n      if (size <= 48) {\n        return 10;\n      }\n      if (size <= 56) {\n        return 12;\n      }\n      if (size <= 64) {\n        return 14;\n      }\n      return 16;\n    }\n  }\n};\n\nconst getBorderRadiusBySizeInPx = (\n  size: Exclude<ImageBaseProps['size'], undefined>,\n  borderRadius: ImageProps['borderRadius'],\n) => {\n  if (!borderRadius) {\n    return undefined;\n  }\n\n  return `${getBorderRadiusBySize(size, borderRadius)}px`;\n};\n\n/**\n * @see https://vkui.io/components/image\n */\nexport const Image: React.FC<ImageProps> & {\n  Badge: typeof ImageBadge;\n  Overlay: typeof ImageBase.Overlay;\n  FloatElement: typeof ImageBase.FloatElement;\n} = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius = 'm',\n  borderStartStartRadius,\n  borderStartEndRadius,\n  borderEndStartRadius,\n  borderEndEndRadius,\n  style,\n  className,\n  objectFit = 'cover',\n  ...restProps\n}: ImageProps) => {\n  const borderStyles: CSSCustomProperties<string | undefined> = React.useMemo(\n    () => ({\n      '--vkui_internal--Image_border_radius': getBorderRadiusBySizeInPx(size, borderRadius),\n      '--vkui_internal--Image_border_start_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartStartRadius,\n      ),\n      '--vkui_internal--Image_border_start_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderStartEndRadius,\n      ),\n      '--vkui_internal--Image_border_end_start_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndStartRadius,\n      ),\n      '--vkui_internal--Image_border_end_end_radius': getBorderRadiusBySizeInPx(\n        size,\n        borderEndEndRadius,\n      ),\n    }),\n    [\n      borderRadius,\n      borderStartStartRadius,\n      borderStartEndRadius,\n      borderEndStartRadius,\n      borderEndEndRadius,\n      size,\n    ],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      objectFit={objectFit}\n      size={size}\n      style={mergeStyle(borderStyles, style)}\n      className={classNames(\n        className,\n        styles.host,\n        borderStartStartRadius && styles.borderStartStartRadius,\n        borderStartEndRadius && styles.borderStartEndRadius,\n        borderEndStartRadius && styles.borderEndStartRadius,\n        borderEndEndRadius && styles.borderEndEndRadius,\n      )}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\nImage.Overlay = ImageBase.Overlay;\nImage.FloatElement = ImageBase.FloatElement;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(Image.Badge, 'Image.Badge');\n  defineComponentDisplayNames(Image.Overlay, 'Image.Overlay');\n  defineComponentDisplayNames(Image.FloatElement, 'Image.FloatElement');\n}\n"],"names":["React","classNames","mergeStyle","defineComponentDisplayNames","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","Badge","Overlay","FloatElement","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,SAAS,QAAyD,4BAAyB;AACpG,SAASC,UAAU,QAA8B,6BAA0B;AAK3E,MAAMC,qBAAqB;AAyB3B,MAAMC,wBAAwB,CAC5BC,MACAC;IAEA,OAAQA;QACN,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;QACA,KAAK;YAAK;gBACR,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,IAAIA,QAAQ,IAAI;oBACd,OAAO;gBACT;gBACA,OAAO;YACT;IACF;AACF;AAEA,MAAME,4BAA4B,CAChCF,MACAC;IAEA,IAAI,CAACA,cAAc;QACjB,OAAOE;IACT;IAEA,OAAO,GAAGJ,sBAAsBC,MAAMC,cAAc,EAAE,CAAC;AACzD;AAEA;;CAEC,GACD,OAAO,MAAMG,QAIT,CAAC,EACHJ,OAAOF,kBAAkB,EACzBG,eAAe,GAAG,EAClBI,sBAAsB,EACtBC,oBAAoB,EACpBC,oBAAoB,EACpBC,kBAAkB,EAClBC,KAAK,EACLC,SAAS,EACTC,YAAY,OAAO,EACnB,GAAGC,WACQ;IACX,MAAMC,eAAwDrB,MAAMsB,OAAO,CACzE,IAAO,CAAA;YACL,wCAAwCZ,0BAA0BF,MAAMC;YACxE,oDAAoDC,0BAClDF,MACAK;YAEF,kDAAkDH,0BAChDF,MACAM;YAEF,kDAAkDJ,0BAChDF,MACAO;YAEF,gDAAgDL,0BAC9CF,MACAQ;QAEJ,CAAA,GACA;QACEP;QACAI;QACAC;QACAC;QACAC;QACAR;KACD;IAGH,qBACE,KAACJ;QACE,GAAGgB,SAAS;QACbD,WAAWA;QACXX,MAAMA;QACNS,OAAOf,WAAWmB,cAAcJ;QAChCC,WAAWjB,WACTiB,8BAEAL,+DACAC,2DACAC,2DACAC;;AAIR,EAAE;AAEFJ,MAAMW,KAAK,GAAGlB;AACdO,MAAMY,OAAO,GAAGpB,UAAUoB,OAAO;AACjCZ,MAAMa,YAAY,GAAGrB,UAAUqB,YAAY;AAE3C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCzB,4BAA4BS,MAAMW,KAAK,EAAE;IACzCpB,4BAA4BS,MAAMY,OAAO,EAAE;IAC3CrB,4BAA4BS,MAAMa,YAAY,EAAE;AAClD"}

package/dist/components/ImageBase/ImageBase.d.ts

@@ -16,19 +16,19 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, An
      *
      * > ⚠️ Использование кастомного размера – это пограничный кейс.
      */
-    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;
     /**
      * Фолбек на случай, если картинка не прогрузилась.
      *
@@ -42,49 +42,49 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, An
      *
      * > ⚠️ Может перекрывать `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.
      * Подробнее можно почитать в [документации](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;
-    };
+        img?: (React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute) | undefined;
+    } | undefined;
     /**
      * @deprecated Since 7.9.0. Будет удалено в v9. Используйте `slotProps={ img: { getRootRef: ... } }`.
      */
-    getRef?: React.Ref<HTMLImageElement>;
+    getRef?: React.Ref<HTMLImageElement> | undefined;
 }
 /**
  * @see https://vkui.io/components/image-base

package/dist/components/ImageBase/ImageBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EACV,wBAAwB,EACxB,gBAAgB,EAChB,UAAU,EACV,YAAY,EACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,qBAAqB,EACrB,KAAK,0BAA0B,EAChC,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,qBAAqB,EACrB,uBAAuB,GACxB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAS5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACvD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC;;;OAGG;IACH,SAAS,CAAC,EAAE;QACV,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,CAAC;KACrF,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACtC;AA8BD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG;IACjD,KAAK,EAAE,OAAO,cAAc,CAAC;IAC7B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,YAAY,EAAE,OAAO,qBAAqB,CAAC;CAiM5C,CAAC"}
+{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EACV,wBAAwB,EACxB,gBAAgB,EAChB,UAAU,EACV,YAAY,EACb,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,qBAAqB,EACrB,KAAK,0BAA0B,EAChC,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,qBAAqB,EACrB,uBAAuB,GACxB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAS5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;IACvD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,GAAG,SAAS,CAAC;IAC1E;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC;IACzD;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;IACnE;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IACnD;;;OAGG;IACH,SAAS,CAAC,EACN;QACE,GAAG,CAAC,EACA,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,CAAC,GAC/E,SAAS,CAAC;KACf,GACD,SAAS,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;CAClD;AA8BD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG;IACjD,KAAK,EAAE,OAAO,cAAc,CAAC;IAC7B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,YAAY,EAAE,OAAO,qBAAqB,CAAC;CAiM5C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { minOr } from '../../lib/comparing';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type {\n  AnchorHTMLAttributesOnly,\n  HasDataAttribute,\n  HasRootRef,\n  LiteralUnion,\n} from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport {\n  type FloatElementIndentation,\n  type FloatElementPlacement,\n  ImageBaseFloatElement,\n  type ImageBaseFloatElementProps,\n} from './ImageBaseFloatElement/ImageBaseFloatElement';\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  ImageBaseFloatElementProps,\n  FloatElementPlacement,\n  FloatElementIndentation,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nconst warn = warnOnce('ImageBase');\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement> {\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   * Пользовательское значения стиля object-position\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position).\n   */\n  objectPosition?: React.CSSProperties['objectPosition'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки.\n   */\n  keepAspectRatio?: boolean;\n  /**\n   * Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming.\n   */\n  elementTiming?: string;\n  /**\n   * Пользовательское значения стиля filter.\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).\n   *\n   * При передаче этого свойства `<img />` будет обёрнут в дополнительный контейнер.\n   */\n  filter?: React.CSSProperties['filter'];\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `img`: свойства для прокидывания в тег `<img>`;.\n   */\n  slotProps?: {\n    img?: React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute;\n  };\n  /**\n   * @deprecated Since 7.9.0. Будет удалено в v9. Используйте `slotProps={ img: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLImageElement>; // TODO [>=9] Удалить свойство\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles.imgObjectFitContain;\n    case 'cover':\n      return styles.imgObjectFitCover;\n    case 'none':\n      return styles.imgObjectFitNone;\n    case 'scale-down':\n      return styles.imgObjectFitScaleDown;\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://vkui.io/components/image-base\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n  FloatElement: typeof ImageBaseFloatElement;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority: fetchPriorityProp,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  objectPosition,\n  filter,\n  keepAspectRatio = false,\n  getRootRef,\n  elementTiming,\n  slotProps,\n  ...restProps\n}: ImageBaseProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore if: не проверяем в тестах */\n    if (getRef) {\n      warn(\n        'Свойство `getRef` устаревшее и будет удалено в VKUI v9. Используйте `slotProps={ img: { getRootRef: ... } }`',\n      );\n    }\n  }\n\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n  const wrapperRef = useExternRef(getRootRef);\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 [mouseOverHandlers] = React.useState<VoidFunction[]>([]);\n  const [mouseOutHandlers] = React.useState<VoidFunction[]>([]);\n\n  const hasSrc = src || srcSet;\n  const fallbackIcon = failed || !hasSrc ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (React.isValidElement(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 {\n    getRootRef: getImgRef,\n    fetchPriority,\n    ...imgRest\n  } = useMergeProps<React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute>(\n    hasSrc\n      ? {\n          // safari и firefox нужно чтобы атрибут `loading` был до `src`\n          //\n          // https://mihaly4.ru/image-loading-lazy-bug\n          loading,\n          getRootRef: getRef,\n          alt,\n          className: classNames(\n            styles.img,\n            getObjectFitClassName(objectFit),\n            objectPosition && styles.withObjectPosition,\n            filter && styles.withFilter,\n            keepAspectRatio && styles.imgKeepRatio,\n            failed && styles.imgHiddenAlt,\n          ),\n          crossOrigin,\n          decoding,\n          referrerPolicy,\n          style: mergeStyle(\n            keepAspectRatio\n              ? {\n                  width: widthImg || width,\n                  height: heightImg || height,\n                }\n              : undefined,\n            objectPosition || filter\n              ? {\n                  '--vkui_internal--ImageBase_object_position': objectPosition,\n                  '--vkui_internal--ImageBase_object_filter': filter,\n                }\n              : undefined,\n          ),\n          sizes,\n          src,\n          srcSet,\n          useMap,\n          width,\n          height,\n          onLoad: handleImageLoad,\n          onError: handleImageError,\n          fetchPriority: fetchPriorityProp,\n          // @ts-expect-error: TS2322 отсутствует в @types/react\n          elementtiming: elementTiming, // eslint-disable-line react/no-unknown-property\n        }\n      : {},\n    hasSrc ? slotProps?.img : undefined,\n  );\n\n  const imgRef = useExternRef(getImgRef);\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  const onMouseOver = () => {\n    mouseOverHandlers.forEach((fn) => fn());\n  };\n\n  const onMouseOut = () => {\n    mouseOutHandlers.forEach((fn) => fn());\n  };\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      onMouseOverHandlers: mouseOverHandlers,\n      onMouseOutHandlers: mouseOutHandlers,\n    }),\n    [mouseOutHandlers, mouseOverHandlers, size],\n  );\n\n  const imgSlot = hasSrc && (\n    <img ref={imgRef} {...imgRest} {...getFetchPriorityProp(fetchPriority)} />\n  );\n\n  return (\n    <ImageBaseContext.Provider value={contextValue}>\n      <Clickable\n        baseStyle={{ width, height }}\n        baseClassName={classNames(\n          styles.host,\n          hasSrc && loaded && styles.loaded,\n          withTransparentBackground && styles.transparentBackground,\n        )}\n        getRootRef={wrapperRef}\n        onMouseOver={onMouseOver}\n        onMouseOut={onMouseOut}\n        {...restProps}\n      >\n        {filter ? <div className={styles.imgWithFilterContainer}>{imgSlot}</div> : imgSlot}\n        {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n        {children && <div className={styles.children}>{children}</div>}\n        {!noBorder && <div aria-hidden className={styles.border} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\nImageBase.Badge = ImageBaseBadge;\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.FloatElement = ImageBaseFloatElement;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ImageBase.Badge, 'ImageBase.Badge');\n  defineComponentDisplayNames(ImageBase.Overlay, 'ImageBase.Overlay');\n  defineComponentDisplayNames(ImageBase.FloatElement, 'ImageBase.FloatElement');\n}\n"],"names":["React","classNames","mergeStyle","useExternRef","useMergeProps","minOr","defineComponentDisplayNames","getFetchPriorityProp","warnOnce","Clickable","ImageBaseBadge","ImageBaseFloatElement","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","warn","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","fetchPriorityProp","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","objectPosition","filter","keepAspectRatio","getRootRef","elementTiming","slotProps","restProps","process","env","NODE_ENV","wrapperRef","loaded","setLoaded","useState","failed","setFailed","mouseOverHandlers","mouseOutHandlers","hasSrc","isValidElement","name","handleImageLoad","event","handleImageError","getImgRef","imgRest","className","style","elementtiming","img","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","onMouseOver","forEach","fn","onMouseOut","contextValue","useMemo","onMouseOverHandlers","onMouseOutHandlers","imgSlot","ref","Provider","baseStyle","baseClassName","div","aria-hidden","Badge","Overlay","FloatElement"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,KAAK,QAAQ,yBAAsB;AAC5C,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,oBAAoB,QAAQ,qBAAkB;AACvD,SAASC,QAAQ,QAAQ,wBAAqB;AAO9C,SAASC,SAAS,QAAQ,4BAAyB;AACnD,SAASC,cAAc,QAAkC,qCAAkC;AAC3F,SAGEC,qBAAqB,QAEhB,mDAAgD;AACvD,SAASC,gBAAgB,QAAoC,yCAAsC;AACnG,SAASC,gBAAgB,QAAQ,eAAY;AAE7C,SAASC,oBAAoB,EAAEC,YAAY,QAAQ,kBAAe;AAclE,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,eAAY;AAEnB,SAASL,gBAAgB,GAAG;AAE5B,MAAMM,OAAOX,SAAS;AAEtB;;CAEC,GACD,MAAMY,cAAc;AAoFpB,MAAMC,wBAAwB,CAACC;IAC7B,OAAQA;QACN,KAAK;YACH;QACF,KAAK;YACH;QACF,KAAK;YACH;QACF,KAAK;YACH;IACJ;IACA,OAAOC;AACT;AAEA,MAAMC,UAAU,CAACC;IACf,IAAIA,MAAMC,QAAQ,CAAC,OAAO;QACxB,OAAOC,SAASF;IAClB;IACA,OAAOF;AACT;AAEA,MAAMK,eAAe,CAACC;IACpB,IAAI,OAAOA,SAAS,UAAU;QAC5B,OAAOL,QAAQK;IACjB;IACA,OAAOA;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,YAIT,CAAC,EACHC,GAAG,EACHC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,GAAG,EACHC,MAAM,EACNC,MAAM,EACNC,eAAeC,iBAAiB,EAChCC,MAAM,EACNb,MAAMc,QAAQ,EACdC,OAAOC,QAAQ,EACfC,QAAQC,SAAS,EACjBC,SAAS,EACTC,UAAU,EACVC,WAAW,KAAK,EAChBC,cAAcC,gBAAgB,EAC9BC,QAAQ,EACRC,MAAM,EACNC,OAAO,EACPC,yBAAyB,EACzBlC,YAAY,OAAO,EACnBmC,cAAc,EACdC,MAAM,EACNC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,aAAa,EACbC,SAAS,EACT,GAAGC,WACY;IACf,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,6CAA6C,GAC7C,IAAIxB,QAAQ;YACVvB,KACE;QAEJ;IACF;IAEA,MAAMU,OAAOc,YAAYtC,MAAM;QAACuB,aAAaoB;QAAYpB,aAAaqB;KAAY,EAAE7B;IACpF,MAAM+C,aAAahE,aAAayD;IAEhC,MAAMhB,QAAQI,aAAcW,CAAAA,kBAAkBpC,YAAYM,IAAG;IAC7D,MAAMiB,SAASG,cAAeU,CAAAA,kBAAkBpC,YAAYM,IAAG;IAE/D,MAAM,CAACuC,QAAQC,UAAU,GAAGrE,MAAMsE,QAAQ,CAAC;IAC3C,MAAM,CAACC,QAAQC,UAAU,GAAGxE,MAAMsE,QAAQ,CAAC;IAE3C,MAAM,CAACG,kBAAkB,GAAGzE,MAAMsE,QAAQ,CAAiB,EAAE;IAC7D,MAAM,CAACI,iBAAiB,GAAG1E,MAAMsE,QAAQ,CAAiB,EAAE;IAE5D,MAAMK,SAAStC,OAAOC;IACtB,MAAMa,eAAeoB,UAAU,CAACI,SAASvB,mBAAmB;IAE5D,IAAIY,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CnD,aAAac;QACb,kBAAI7B,MAAM4E,cAAc,CAACzB,eAAe;YACtCrC,qBAAqBe,MAAM;gBAAEgD,MAAM;gBAAgBpD,OAAO0B;YAAa;QACzE;IACF;IAEA,MAAM2B,kBAAkB,CAACC;QACvB,IAAIX,QAAQ;YACV;QACF;QAEAC,UAAU;QACVG,UAAU;QACVlB,SAASyB;IACX;IAEA,MAAMC,mBAAmB,CAACD;QACxBV,UAAU;QACVG,UAAU;QACVjB,UAAUwB;IACZ;IAEA,MAAM,EACJnB,YAAYqB,SAAS,EACrBzC,aAAa,EACb,GAAG0C,SACJ,GAAG9E,cACFuE,SACI;QACE,8DAA8D;QAC9D,EAAE;QACF,4CAA4C;QAC5CzC;QACA0B,YAAYlB;QACZX;QACAoD,WAAWlF,iCAEToB,sBAAsBC,YACtBmC,uDACAC,uCACAC,kDACAY;QAEFvC;QACAC;QACAE;QACAiD,OAAOlF,WACLyD,kBACI;YACEf,OAAOC,YAAYD;YACnBE,QAAQC,aAAaD;QACvB,IACAvB,WACJkC,kBAAkBC,SACd;YACE,8CAA8CD;YAC9C,4CAA4CC;QAC9C,IACAnC;QAENa;QACAC;QACAC;QACAC;QACAK;QACAE;QACAQ,QAAQwB;QACRvB,SAASyB;QACTxC,eAAeC;QACf,sDAAsD;QACtD4C,eAAexB;IACjB,IACA,CAAC,GACLc,SAASb,WAAWwB,MAAM/D;IAG5B,MAAMgE,SAASpF,aAAa8E;IAC5B,MAAMO,2BAA2BxF,MAAMyF,MAAM,CAAC;IAC9CzF,MAAM0F,SAAS,CACb,SAASC;QACP,IAAIH,yBAAyBI,OAAO,EAAE;YACpC;QACF;QACAJ,yBAAyBI,OAAO,GAAG;QAEnC,IAAIL,OAAOK,OAAO,IAAIL,OAAOK,OAAO,CAACC,QAAQ,IAAI,CAACzB,QAAQ;YACxD,MAAMW,QAAQ,IAAIe,MAAM;YACxBP,OAAOK,OAAO,CAACG,aAAa,CAAChB;QAC/B;IACF,GACA;QAACQ;QAAQnB;KAAO;IAGlB,MAAM4B,cAAc;QAClBvB,kBAAkBwB,OAAO,CAAC,CAACC,KAAOA;IACpC;IAEA,MAAMC,aAAa;QACjBzB,iBAAiBuB,OAAO,CAAC,CAACC,KAAOA;IACnC;IAEA,MAAME,eAAepG,MAAMqG,OAAO,CAChC,IAAO,CAAA;YACLxE;YACAyE,qBAAqB7B;YACrB8B,oBAAoB7B;QACtB,CAAA,GACA;QAACA;QAAkBD;QAAmB5C;KAAK;IAG7C,MAAM2E,UAAU7B,wBACd,KAACW;QAAImB,KAAKlB;QAAS,GAAGL,OAAO;QAAG,GAAG3E,qBAAqBiC,cAAc;;IAGxE,qBACE,KAAC3B,iBAAiB6F,QAAQ;QAACjF,OAAO2E;kBAChC,cAAA,MAAC3F;YACCkG,WAAW;gBAAE/D;gBAAOE;YAAO;YAC3B8D,eAAe3G,kCAEb0E,UAAUP,mCACVZ;YAEFI,YAAYO;YACZ6B,aAAaA;YACbG,YAAYA;YACX,GAAGpC,SAAS;;gBAEZL,uBAAS,KAACmD;oBAAI1B,SAAS;8BAAkCqB;qBAAiBA;gBAC1ErD,8BAAgB,KAAC0D;oBAAI1B,SAAS;8BAAoBhC;;gBAClDE,0BAAY,KAACwD;oBAAI1B,SAAS;8BAAoB9B;;gBAC9C,CAACH,0BAAY,KAAC2D;oBAAIC,aAAW;oBAAC3B,SAAS;;;;;AAIhD,EAAE;AACFrD,UAAUiF,KAAK,GAAGrG;AAClBoB,UAAUkF,OAAO,GAAGpG;AACpBkB,UAAUmF,YAAY,GAAGtG;AAEzB,IAAIqD,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC5D,4BAA4BwB,UAAUiF,KAAK,EAAE;IAC7CzG,4BAA4BwB,UAAUkF,OAAO,EAAE;IAC/C1G,4BAA4BwB,UAAUmF,YAAY,EAAE;AACtD"}
+{"version":3,"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { minOr } from '../../lib/comparing';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type {\n  AnchorHTMLAttributesOnly,\n  HasDataAttribute,\n  HasRootRef,\n  LiteralUnion,\n} from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport {\n  type FloatElementIndentation,\n  type FloatElementPlacement,\n  ImageBaseFloatElement,\n  type ImageBaseFloatElementProps,\n} from './ImageBaseFloatElement/ImageBaseFloatElement';\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  ImageBaseFloatElementProps,\n  FloatElementPlacement,\n  FloatElementIndentation,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nconst warn = warnOnce('ImageBase');\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement> {\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> | undefined;\n  /**\n   * Ширина изображения.\n   */\n  widthSize?: number | string | undefined;\n  /**\n   * Высота изображения.\n   */\n  heightSize?: number | string | undefined;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean | undefined;\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> | undefined;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean | undefined;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n   */\n  objectFit?: React.CSSProperties['objectFit'] | undefined;\n  /**\n   * Пользовательское значения стиля object-position\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position).\n   */\n  objectPosition?: React.CSSProperties['objectPosition'] | undefined;\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки.\n   */\n  keepAspectRatio?: boolean | undefined;\n  /**\n   * Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming.\n   */\n  elementTiming?: string | undefined;\n  /**\n   * Пользовательское значения стиля filter.\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).\n   *\n   * При передаче этого свойства `<img />` будет обёрнут в дополнительный контейнер.\n   */\n  filter?: React.CSSProperties['filter'] | undefined;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `img`: свойства для прокидывания в тег `<img>`;.\n   */\n  slotProps?:\n    | {\n        img?:\n          | (React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute)\n          | undefined;\n      }\n    | undefined;\n  /**\n   * @deprecated Since 7.9.0. Будет удалено в v9. Используйте `slotProps={ img: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLImageElement> | undefined; // TODO [>=9] Удалить свойство\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles.imgObjectFitContain;\n    case 'cover':\n      return styles.imgObjectFitCover;\n    case 'none':\n      return styles.imgObjectFitNone;\n    case 'scale-down':\n      return styles.imgObjectFitScaleDown;\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://vkui.io/components/image-base\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n  FloatElement: typeof ImageBaseFloatElement;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority: fetchPriorityProp,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  objectPosition,\n  filter,\n  keepAspectRatio = false,\n  getRootRef,\n  elementTiming,\n  slotProps,\n  ...restProps\n}: ImageBaseProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore if: не проверяем в тестах */\n    if (getRef) {\n      warn(\n        'Свойство `getRef` устаревшее и будет удалено в VKUI v9. Используйте `slotProps={ img: { getRootRef: ... } }`',\n      );\n    }\n  }\n\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n  const wrapperRef = useExternRef(getRootRef);\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 [mouseOverHandlers] = React.useState<VoidFunction[]>([]);\n  const [mouseOutHandlers] = React.useState<VoidFunction[]>([]);\n\n  const hasSrc = src || srcSet;\n  const fallbackIcon = failed || !hasSrc ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (React.isValidElement(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 {\n    getRootRef: getImgRef,\n    fetchPriority,\n    ...imgRest\n  } = useMergeProps<React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute>(\n    hasSrc\n      ? {\n          // safari и firefox нужно чтобы атрибут `loading` был до `src`\n          //\n          // https://mihaly4.ru/image-loading-lazy-bug\n          loading,\n          getRootRef: getRef,\n          alt,\n          className: classNames(\n            styles.img,\n            getObjectFitClassName(objectFit),\n            objectPosition && styles.withObjectPosition,\n            filter && styles.withFilter,\n            keepAspectRatio && styles.imgKeepRatio,\n            failed && styles.imgHiddenAlt,\n          ),\n          crossOrigin,\n          decoding,\n          referrerPolicy,\n          style: mergeStyle(\n            keepAspectRatio\n              ? {\n                  width: widthImg || width,\n                  height: heightImg || height,\n                }\n              : undefined,\n            objectPosition || filter\n              ? {\n                  '--vkui_internal--ImageBase_object_position': objectPosition,\n                  '--vkui_internal--ImageBase_object_filter': filter,\n                }\n              : undefined,\n          ),\n          sizes,\n          src,\n          srcSet,\n          useMap,\n          width,\n          height,\n          onLoad: handleImageLoad,\n          onError: handleImageError,\n          fetchPriority: fetchPriorityProp,\n          // @ts-expect-error: TS2322 отсутствует в @types/react\n          elementtiming: elementTiming, // eslint-disable-line react/no-unknown-property\n        }\n      : {},\n    hasSrc ? slotProps?.img : undefined,\n  );\n\n  const imgRef = useExternRef(getImgRef);\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  const onMouseOver = () => {\n    mouseOverHandlers.forEach((fn) => fn());\n  };\n\n  const onMouseOut = () => {\n    mouseOutHandlers.forEach((fn) => fn());\n  };\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      onMouseOverHandlers: mouseOverHandlers,\n      onMouseOutHandlers: mouseOutHandlers,\n    }),\n    [mouseOutHandlers, mouseOverHandlers, size],\n  );\n\n  const imgSlot = hasSrc && (\n    <img ref={imgRef} {...imgRest} {...getFetchPriorityProp(fetchPriority)} />\n  );\n\n  return (\n    <ImageBaseContext.Provider value={contextValue}>\n      <Clickable\n        baseStyle={{ width, height }}\n        baseClassName={classNames(\n          styles.host,\n          hasSrc && loaded && styles.loaded,\n          withTransparentBackground && styles.transparentBackground,\n        )}\n        getRootRef={wrapperRef}\n        onMouseOver={onMouseOver}\n        onMouseOut={onMouseOut}\n        {...restProps}\n      >\n        {filter ? <div className={styles.imgWithFilterContainer}>{imgSlot}</div> : imgSlot}\n        {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n        {children && <div className={styles.children}>{children}</div>}\n        {!noBorder && <div aria-hidden className={styles.border} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\nImageBase.Badge = ImageBaseBadge;\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.FloatElement = ImageBaseFloatElement;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ImageBase.Badge, 'ImageBase.Badge');\n  defineComponentDisplayNames(ImageBase.Overlay, 'ImageBase.Overlay');\n  defineComponentDisplayNames(ImageBase.FloatElement, 'ImageBase.FloatElement');\n}\n"],"names":["React","classNames","mergeStyle","useExternRef","useMergeProps","minOr","defineComponentDisplayNames","getFetchPriorityProp","warnOnce","Clickable","ImageBaseBadge","ImageBaseFloatElement","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","warn","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","fetchPriorityProp","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","objectPosition","filter","keepAspectRatio","getRootRef","elementTiming","slotProps","restProps","process","env","NODE_ENV","wrapperRef","loaded","setLoaded","useState","failed","setFailed","mouseOverHandlers","mouseOutHandlers","hasSrc","isValidElement","name","handleImageLoad","event","handleImageError","getImgRef","imgRest","className","style","elementtiming","img","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","onMouseOver","forEach","fn","onMouseOut","contextValue","useMemo","onMouseOverHandlers","onMouseOutHandlers","imgSlot","ref","Provider","baseStyle","baseClassName","div","aria-hidden","Badge","Overlay","FloatElement"],"mappings":"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"}

package/dist/components/ImageBase/ImageBaseBadge/ImageBaseBadge.d.ts

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

package/dist/components/ImageBase/ImageBaseBadge/ImageBaseBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAGhE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAmB3D,MAAM,WAAW,mBAAoB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACpF;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;;OAUG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;CAC1D;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,8BAAyC,mBAAmB,4CAY1F,CAAC"}
+{"version":3,"file":"ImageBaseBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAGhE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAmB3D,MAAM,WAAW,mBAAoB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACpF;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC7C;;;;;;;;;;OAUG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;CAC1D;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,8BAAyC,mBAAmB,4CAY1F,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nfunction DevelopmentCheck({ children }: Pick<ImageBaseBadgeProps, 'children'>) {\n  const { size } = React.useContext(ImageBaseContext);\n\n  if (children) {\n    validateBadgeIcon(size, { name: 'children', value: children });\n  }\n\n  return null;\n}\n\nconst backgroundStyles = {\n  stroke: styles.backgroundStroke,\n  shadow: styles.backgroundShadow,\n};\n\nexport interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Вид подложки под иконку.\n   *\n   * - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   * - `\"shadow\"` – добавляет небольшую тень (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   */\n  background?: 'stroke' | 'shadow';\n  /**\n   * Принимает иконку.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`.\n */\nexport const ImageBaseBadge = ({ background = 'shadow', ...restProps }: ImageBaseBadgeProps) => {\n  return (\n    <>\n      <RootComponent\n        {...restProps}\n        baseClassName={classNames(styles.host, backgroundStyles[background])}\n      />\n      {process.env.NODE_ENV === 'development' && (\n        <DevelopmentCheck>{restProps.children}</DevelopmentCheck>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","RootComponent","ImageBaseContext","validateBadgeIcon","DevelopmentCheck","children","size","useContext","name","value","backgroundStyles","stroke","shadow","ImageBaseBadge","background","restProps","baseClassName","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,gBAAgB,QAAQ,gBAAa;AAE9C,SAASC,iBAAiB,QAAQ,mBAAgB;AAGlD,SAASC,iBAAiB,EAAEC,QAAQ,EAAyC;IAC3E,MAAM,EAAEC,IAAI,EAAE,GAAGP,MAAMQ,UAAU,CAACL;IAElC,IAAIG,UAAU;QACZF,kBAAkBG,MAAM;YAAEE,MAAM;YAAYC,OAAOJ;QAAS;IAC9D;IAEA,OAAO;AACT;AAEA,MAAMK,mBAAmB;IACvBC,MAAM;IACNC,MAAM;AACR;AAwBA;;;;CAIC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAAEC,aAAa,QAAQ,EAAE,GAAGC,WAAgC;IACzF,qBACE;;0BACE,KAACd;gBACE,GAAGc,SAAS;gBACbC,eAAehB,uCAAwBU,gBAAgB,CAACI,WAAW;;YAEpEG,QAAQC,GAAG,CAACC,QAAQ,KAAK,+BACxB,KAACf;0BAAkBW,UAAUV,QAAQ;;;;AAI7C,EAAE"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateBadgeIcon } from '../validators';\nimport styles from './ImageBaseBadge.module.css';\n\nfunction DevelopmentCheck({ children }: Pick<ImageBaseBadgeProps, 'children'>) {\n  const { size } = React.useContext(ImageBaseContext);\n\n  if (children) {\n    validateBadgeIcon(size, { name: 'children', value: children });\n  }\n\n  return null;\n}\n\nconst backgroundStyles = {\n  stroke: styles.backgroundStroke,\n  shadow: styles.backgroundShadow,\n};\n\nexport interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Вид подложки под иконку.\n   *\n   * - `\"stroke\"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   * - `\"shadow\"` – добавляет небольшую тень (⚠️ если фон под компонентом динамический, то ожидайте баг).\n   */\n  background?: 'stroke' | 'shadow' | undefined;\n  /**\n   * Принимает иконку.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getBadgeIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * Бейдж в правом нижнем углу компонента.\n *\n * > Не используйте при `size < 24`.\n */\nexport const ImageBaseBadge = ({ background = 'shadow', ...restProps }: ImageBaseBadgeProps) => {\n  return (\n    <>\n      <RootComponent\n        {...restProps}\n        baseClassName={classNames(styles.host, backgroundStyles[background])}\n      />\n      {process.env.NODE_ENV === 'development' && (\n        <DevelopmentCheck>{restProps.children}</DevelopmentCheck>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","RootComponent","ImageBaseContext","validateBadgeIcon","DevelopmentCheck","children","size","useContext","name","value","backgroundStyles","stroke","shadow","ImageBaseBadge","background","restProps","baseClassName","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,gBAAgB,QAAQ,gBAAa;AAE9C,SAASC,iBAAiB,QAAQ,mBAAgB;AAGlD,SAASC,iBAAiB,EAAEC,QAAQ,EAAyC;IAC3E,MAAM,EAAEC,IAAI,EAAE,GAAGP,MAAMQ,UAAU,CAACL;IAElC,IAAIG,UAAU;QACZF,kBAAkBG,MAAM;YAAEE,MAAM;YAAYC,OAAOJ;QAAS;IAC9D;IAEA,OAAO;AACT;AAEA,MAAMK,mBAAmB;IACvBC,MAAM;IACNC,MAAM;AACR;AAwBA;;;;CAIC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAAEC,aAAa,QAAQ,EAAE,GAAGC,WAAgC;IACzF,qBACE;;0BACE,KAACd;gBACE,GAAGc,SAAS;gBACbC,eAAehB,uCAAwBU,gBAAgB,CAACI,WAAW;;YAEpEG,QAAQC,GAAG,CAACC,QAAQ,KAAK,+BACxB,KAACf;0BAAkBW,UAAUV,QAAQ;;;;AAI7C,EAAE"}

package/dist/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.d.ts

@@ -9,18 +9,18 @@ export interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HT
     /**
      * Отступ компонента от края контейнера по горизонтали.
      */
-    inlineIndent?: FloatElementIndentation;
+    inlineIndent?: FloatElementIndentation | undefined;
     /**
      * Отступ компонента от края контейнера по вертикали.
      */
-    blockIndent?: FloatElementIndentation;
+    blockIndent?: FloatElementIndentation | undefined;
     /**
      * Режим отображения компонента:
      *
      * - `"always"`: Всегда
      * - `"on-hover"`: При наведении на картинку.
      */
-    visibility?: 'always' | 'on-hover';
+    visibility?: 'always' | 'on-hover' | undefined;
 }
 export declare const ImageBaseFloatElement: ({ placement, visibility, style, className, inlineIndent, blockIndent, ...restProps }: ImageBaseFloatElementProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ImageBaseFloatElement.d.ts.map

package/dist/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseFloatElement.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAMhE,MAAM,MAAM,qBAAqB,GAC7B,WAAW,GACX,KAAK,GACL,SAAS,GACT,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,cAAc,GACd,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,uBAAuB,GAC/B,KAAK,GACL,IAAI,GACJ,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,CAAC;AAsCX,MAAM,WAAW,0BAA2B,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC3F;;OAEG;IACH,SAAS,EAAE,qBAAqB,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;CACpC;AAED,eAAO,MAAM,qBAAqB,GAAI,sFAQnC,0BAA0B,4CAgE5B,CAAC"}
+{"version":3,"file":"ImageBaseFloatElement.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAMhE,MAAM,MAAM,qBAAqB,GAC7B,WAAW,GACX,KAAK,GACL,SAAS,GACT,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,cAAc,GACd,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,uBAAuB,GAC/B,KAAK,GACL,IAAI,GACJ,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,CAAC;AAsCX,MAAM,WAAW,0BAA2B,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC3F;;OAEG;IACH,SAAS,EAAE,qBAAqB,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,uBAAuB,GAAG,SAAS,CAAC;IACnD;;OAEG;IACH,WAAW,CAAC,EAAE,uBAAuB,GAAG,SAAS,CAAC;IAClD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;CAChD;AAED,eAAO,MAAM,qBAAqB,GAAI,sFAQnC,0BAA0B,4CAgE5B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport { mutableRemoveElement, resolveIndent } from './helpers';\nimport styles from './ImageBaseFloatElement.module.css';\n\nexport type FloatElementPlacement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end'\n  | 'middle-start'\n  | 'middle'\n  | 'middle-end';\n\nexport type FloatElementIndentation =\n  | '2xs'\n  | 'xs'\n  | 's'\n  | 'm'\n  | 'l'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | '4xl'\n  | number\n  | string;\n\nconst positionPlacementClassNames = {\n  'top-start': styles.placementTopStart,\n  'top': styles.placementTop,\n  'top-end': styles.placementTopEnd,\n  'bottom-start': styles.placementBottomStart,\n  'bottom': styles.placementBottom,\n  'bottom-end': styles.placementBottomEnd,\n  'middle-start': styles.placementMiddleStart,\n  'middle': styles.placementMiddle,\n  'middle-end': styles.placementMiddleEnd,\n};\n\nconst inlineIndentClassNames = {\n  '2xs': styles.inlineIndent2xs,\n  'xs': styles.inlineIndentXs,\n  's': styles.inlineIndentS,\n  'm': styles.inlineIndentM,\n  'l': styles.inlineIndentL,\n  'xl': styles.inlineIndentXl,\n  '2xl': styles.inlineIndent2xl,\n  '3xl': styles.inlineIndent3xl,\n  '4xl': styles.inlineIndent4xl,\n};\n\nconst blockIndentClassNames = {\n  '2xs': styles.blockIndent2xs,\n  'xs': styles.blockIndentXs,\n  's': styles.blockIndentS,\n  'm': styles.blockIndentM,\n  'l': styles.blockIndentL,\n  'xl': styles.blockIndentXl,\n  '2xl': styles.blockIndent2xl,\n  '3xl': styles.blockIndent3xl,\n  '4xl': styles.blockIndent4xl,\n};\n\nexport interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позиция компонента относительно родителя.\n   */\n  placement: FloatElementPlacement;\n  /**\n   * Отступ компонента от края контейнера по горизонтали.\n   */\n  inlineIndent?: FloatElementIndentation;\n  /**\n   * Отступ компонента от края контейнера по вертикали.\n   */\n  blockIndent?: FloatElementIndentation;\n  /**\n   * Режим отображения компонента:\n   *\n   * - `\"always\"`: Всегда\n   * - `\"on-hover\"`: При наведении на картинку.\n   */\n  visibility?: 'always' | 'on-hover';\n}\n\nexport const ImageBaseFloatElement = ({\n  placement,\n  visibility = 'always',\n  style,\n  className,\n  inlineIndent,\n  blockIndent,\n  ...restProps\n}: ImageBaseFloatElementProps) => {\n  const [hidden, setHidden] = React.useState(visibility !== 'always');\n  const { onMouseOverHandlers, onMouseOutHandlers } = React.useContext(ImageBaseContext);\n\n  useIsomorphicLayoutEffect(\n    function resetHidden() {\n      setHidden(visibility === 'on-hover');\n    },\n    [visibility],\n  );\n\n  useIsomorphicLayoutEffect(\n    function addMouseHandlers() {\n      if (visibility === 'on-hover') {\n        const onMouseOver = () => setHidden(false);\n        const onMouseOut = () => setHidden(true);\n\n        onMouseOverHandlers.push(onMouseOver);\n        onMouseOutHandlers.push(onMouseOut);\n\n        return () => {\n          mutableRemoveElement(onMouseOverHandlers, onMouseOver);\n          mutableRemoveElement(onMouseOutHandlers, onMouseOut);\n        };\n      }\n      return;\n    },\n    [visibility],\n  );\n\n  const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] =\n    React.useMemo(() => {\n      const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(\n        inlineIndent,\n        '--vkui_internal--FloatElement_horizontal_indent',\n        inlineIndentClassNames,\n      );\n      const [blockIndentStyle, blockIndentClassName] = resolveIndent(\n        blockIndent,\n        '--vkui_internal--FloatElement_vertical_indent',\n        blockIndentClassNames,\n      );\n\n      return [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName];\n    }, [inlineIndent, blockIndent]);\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        ...style,\n        ...inlineIndentStyle,\n        ...blockIndentStyle,\n      }}\n      className={classNames(\n        styles.host,\n        hidden && styles.hidden,\n        positionPlacementClassNames[placement],\n        inlineIndentClassName,\n        blockIndentClassName,\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","useIsomorphicLayoutEffect","RootComponent","ImageBaseContext","mutableRemoveElement","resolveIndent","positionPlacementClassNames","inlineIndentClassNames","blockIndentClassNames","ImageBaseFloatElement","placement","visibility","style","className","inlineIndent","blockIndent","restProps","hidden","setHidden","useState","onMouseOverHandlers","onMouseOutHandlers","useContext","resetHidden","addMouseHandlers","onMouseOver","onMouseOut","push","inlineIndentStyle","blockIndentStyle","inlineIndentClassName","blockIndentClassName","useMemo"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,yBAAyB,QAAQ,4CAAyC;AAEnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,gBAAgB,QAAQ,gBAAa;AAC9C,SAASC,oBAAoB,EAAEC,aAAa,QAAQ,eAAY;AA2BhE,MAAMC,8BAA8B;IAClC,WAAW;IACX,KAAK;IACL,SAAS;IACT,cAAc;IACd,QAAQ;IACR,YAAY;IACZ,cAAc;IACd,QAAQ;IACR,YAAY;AACd;AAEA,MAAMC,yBAAyB;IAC7B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAEA,MAAMC,wBAAwB;IAC5B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAwBA,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,SAAS,EACTC,aAAa,QAAQ,EACrBC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,WAAW,EACX,GAAGC,WACwB;IAC3B,MAAM,CAACC,QAAQC,UAAU,GAAGnB,MAAMoB,QAAQ,CAACR,eAAe;IAC1D,MAAM,EAAES,mBAAmB,EAAEC,kBAAkB,EAAE,GAAGtB,MAAMuB,UAAU,CAACnB;IAErEF,0BACE,SAASsB;QACPL,UAAUP,eAAe;IAC3B,GACA;QAACA;KAAW;IAGdV,0BACE,SAASuB;QACP,IAAIb,eAAe,YAAY;YAC7B,MAAMc,cAAc,IAAMP,UAAU;YACpC,MAAMQ,aAAa,IAAMR,UAAU;YAEnCE,oBAAoBO,IAAI,CAACF;YACzBJ,mBAAmBM,IAAI,CAACD;YAExB,OAAO;gBACLtB,qBAAqBgB,qBAAqBK;gBAC1CrB,qBAAqBiB,oBAAoBK;YAC3C;QACF;QACA;IACF,GACA;QAACf;KAAW;IAGd,MAAM,CAACiB,mBAAmBC,kBAAkBC,uBAAuBC,qBAAqB,GACtFhC,MAAMiC,OAAO,CAAC;QACZ,MAAM,CAACJ,mBAAmBE,sBAAsB,GAAGzB,cACjDS,cACA,mDACAP;QAEF,MAAM,CAACsB,kBAAkBE,qBAAqB,GAAG1B,cAC/CU,aACA,iDACAP;QAGF,OAAO;YAACoB;YAAmBC;YAAkBC;YAAuBC;SAAqB;IAC3F,GAAG;QAACjB;QAAcC;KAAY;IAEhC,qBACE,KAACb;QACE,GAAGc,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACR,GAAGgB,iBAAiB;YACpB,GAAGC,gBAAgB;QACrB;QACAhB,WAAWb,8CAETiB,+CACAX,2BAA2B,CAACI,UAAU,EACtCoB,uBACAC,sBACAlB;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ImageBaseContext } from '../context';\nimport { mutableRemoveElement, resolveIndent } from './helpers';\nimport styles from './ImageBaseFloatElement.module.css';\n\nexport type FloatElementPlacement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end'\n  | 'middle-start'\n  | 'middle'\n  | 'middle-end';\n\nexport type FloatElementIndentation =\n  | '2xs'\n  | 'xs'\n  | 's'\n  | 'm'\n  | 'l'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | '4xl'\n  | number\n  | string;\n\nconst positionPlacementClassNames = {\n  'top-start': styles.placementTopStart,\n  'top': styles.placementTop,\n  'top-end': styles.placementTopEnd,\n  'bottom-start': styles.placementBottomStart,\n  'bottom': styles.placementBottom,\n  'bottom-end': styles.placementBottomEnd,\n  'middle-start': styles.placementMiddleStart,\n  'middle': styles.placementMiddle,\n  'middle-end': styles.placementMiddleEnd,\n};\n\nconst inlineIndentClassNames = {\n  '2xs': styles.inlineIndent2xs,\n  'xs': styles.inlineIndentXs,\n  's': styles.inlineIndentS,\n  'm': styles.inlineIndentM,\n  'l': styles.inlineIndentL,\n  'xl': styles.inlineIndentXl,\n  '2xl': styles.inlineIndent2xl,\n  '3xl': styles.inlineIndent3xl,\n  '4xl': styles.inlineIndent4xl,\n};\n\nconst blockIndentClassNames = {\n  '2xs': styles.blockIndent2xs,\n  'xs': styles.blockIndentXs,\n  's': styles.blockIndentS,\n  'm': styles.blockIndentM,\n  'l': styles.blockIndentL,\n  'xl': styles.blockIndentXl,\n  '2xl': styles.blockIndent2xl,\n  '3xl': styles.blockIndent3xl,\n  '4xl': styles.blockIndent4xl,\n};\n\nexport interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позиция компонента относительно родителя.\n   */\n  placement: FloatElementPlacement;\n  /**\n   * Отступ компонента от края контейнера по горизонтали.\n   */\n  inlineIndent?: FloatElementIndentation | undefined;\n  /**\n   * Отступ компонента от края контейнера по вертикали.\n   */\n  blockIndent?: FloatElementIndentation | undefined;\n  /**\n   * Режим отображения компонента:\n   *\n   * - `\"always\"`: Всегда\n   * - `\"on-hover\"`: При наведении на картинку.\n   */\n  visibility?: 'always' | 'on-hover' | undefined;\n}\n\nexport const ImageBaseFloatElement = ({\n  placement,\n  visibility = 'always',\n  style,\n  className,\n  inlineIndent,\n  blockIndent,\n  ...restProps\n}: ImageBaseFloatElementProps) => {\n  const [hidden, setHidden] = React.useState(visibility !== 'always');\n  const { onMouseOverHandlers, onMouseOutHandlers } = React.useContext(ImageBaseContext);\n\n  useIsomorphicLayoutEffect(\n    function resetHidden() {\n      setHidden(visibility === 'on-hover');\n    },\n    [visibility],\n  );\n\n  useIsomorphicLayoutEffect(\n    function addMouseHandlers() {\n      if (visibility === 'on-hover') {\n        const onMouseOver = () => setHidden(false);\n        const onMouseOut = () => setHidden(true);\n\n        onMouseOverHandlers.push(onMouseOver);\n        onMouseOutHandlers.push(onMouseOut);\n\n        return () => {\n          mutableRemoveElement(onMouseOverHandlers, onMouseOver);\n          mutableRemoveElement(onMouseOutHandlers, onMouseOut);\n        };\n      }\n      return;\n    },\n    [visibility],\n  );\n\n  const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] =\n    React.useMemo(() => {\n      const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(\n        inlineIndent,\n        '--vkui_internal--FloatElement_horizontal_indent',\n        inlineIndentClassNames,\n      );\n      const [blockIndentStyle, blockIndentClassName] = resolveIndent(\n        blockIndent,\n        '--vkui_internal--FloatElement_vertical_indent',\n        blockIndentClassNames,\n      );\n\n      return [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName];\n    }, [inlineIndent, blockIndent]);\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        ...style,\n        ...inlineIndentStyle,\n        ...blockIndentStyle,\n      }}\n      className={classNames(\n        styles.host,\n        hidden && styles.hidden,\n        positionPlacementClassNames[placement],\n        inlineIndentClassName,\n        blockIndentClassName,\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","useIsomorphicLayoutEffect","RootComponent","ImageBaseContext","mutableRemoveElement","resolveIndent","positionPlacementClassNames","inlineIndentClassNames","blockIndentClassNames","ImageBaseFloatElement","placement","visibility","style","className","inlineIndent","blockIndent","restProps","hidden","setHidden","useState","onMouseOverHandlers","onMouseOutHandlers","useContext","resetHidden","addMouseHandlers","onMouseOver","onMouseOut","push","inlineIndentStyle","blockIndentStyle","inlineIndentClassName","blockIndentClassName","useMemo"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,yBAAyB,QAAQ,4CAAyC;AAEnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,gBAAgB,QAAQ,gBAAa;AAC9C,SAASC,oBAAoB,EAAEC,aAAa,QAAQ,eAAY;AA2BhE,MAAMC,8BAA8B;IAClC,WAAW;IACX,KAAK;IACL,SAAS;IACT,cAAc;IACd,QAAQ;IACR,YAAY;IACZ,cAAc;IACd,QAAQ;IACR,YAAY;AACd;AAEA,MAAMC,yBAAyB;IAC7B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAEA,MAAMC,wBAAwB;IAC5B,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAwBA,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,SAAS,EACTC,aAAa,QAAQ,EACrBC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,WAAW,EACX,GAAGC,WACwB;IAC3B,MAAM,CAACC,QAAQC,UAAU,GAAGnB,MAAMoB,QAAQ,CAACR,eAAe;IAC1D,MAAM,EAAES,mBAAmB,EAAEC,kBAAkB,EAAE,GAAGtB,MAAMuB,UAAU,CAACnB;IAErEF,0BACE,SAASsB;QACPL,UAAUP,eAAe;IAC3B,GACA;QAACA;KAAW;IAGdV,0BACE,SAASuB;QACP,IAAIb,eAAe,YAAY;YAC7B,MAAMc,cAAc,IAAMP,UAAU;YACpC,MAAMQ,aAAa,IAAMR,UAAU;YAEnCE,oBAAoBO,IAAI,CAACF;YACzBJ,mBAAmBM,IAAI,CAACD;YAExB,OAAO;gBACLtB,qBAAqBgB,qBAAqBK;gBAC1CrB,qBAAqBiB,oBAAoBK;YAC3C;QACF;QACA;IACF,GACA;QAACf;KAAW;IAGd,MAAM,CAACiB,mBAAmBC,kBAAkBC,uBAAuBC,qBAAqB,GACtFhC,MAAMiC,OAAO,CAAC;QACZ,MAAM,CAACJ,mBAAmBE,sBAAsB,GAAGzB,cACjDS,cACA,mDACAP;QAEF,MAAM,CAACsB,kBAAkBE,qBAAqB,GAAG1B,cAC/CU,aACA,iDACAP;QAGF,OAAO;YAACoB;YAAmBC;YAAkBC;YAAuBC;SAAqB;IAC3F,GAAG;QAACjB;QAAcC;KAAY;IAEhC,qBACE,KAACb;QACE,GAAGc,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACR,GAAGgB,iBAAiB;YACpB,GAAGC,gBAAgB;QACrB;QACAhB,WAAWb,8CAETiB,+CACAX,2BAA2B,CAACI,UAAU,EACtCoB,uBACAC,sBACAlB;;AAIR,EAAE"}

package/dist/components/ImageBase/ImageBaseOverlay/types.d.ts

@@ -7,7 +7,7 @@ export interface ImageBaseOverlayCommonProps extends React.AriaAttributes, HasRo
      *
      * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.
      */
-    theme?: 'dark' | 'light';
+    theme?: 'dark' | 'light' | undefined;
     /**
      * Определяет каким образом должен показываться оверлей.
      *
@@ -20,11 +20,11 @@ export interface ImageBaseOverlayCommonProps extends React.AriaAttributes, HasRo
      * > Если это критично (например при SSR), то старайтесь явно указывать значение `visibility`, либо используйте
      * > [AdaptivityProvider](#/AdaptivityProvider) для того, чтобы явно определить `hasPointer`.
      */
-    visibility?: 'on-hover' | 'always';
+    visibility?: 'on-hover' | 'always' | undefined;
     /**
      * `className` для компонента.
      */
-    className?: string;
+    className?: string | undefined;
 }
 export interface ImageBaseOverlayInteractiveProps extends ImageBaseOverlayCommonProps {
     /**

package/dist/components/ImageBase/ImageBaseOverlay/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseOverlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,EAC1B,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gCAAiC,SAAQ,2BAA2B;IACnF;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC9C;;;;;;;;;;;OAWG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,mCAAoC,SAAQ,2BAA2B;IACtF;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBaseOverlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,EAC1B,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACrC;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC/C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,gCAAiC,SAAQ,2BAA2B;IACnF;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC9C;;;;;;;;;;;OAWG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,mCAAoC,SAAQ,2BAA2B;IACtF;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}