@vkontakte/vkui 7.2.0 → 7.3.0

package/dist/cssm/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 { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\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\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  arrowSize?: ScrollArrowProps['size'];\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\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 * 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://vkcom.github.io/VKUI/#/HorizontalScroll\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  ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n  const [canScrollStart, setCanScrollStart] = React.useState(false);\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false);\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 hasPointer = useAdaptivityHasPointer();\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 && hasPointer && 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, hasPointer, 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  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles.withConstArrows,\n        isRtl && styles.rtl,\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && 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 && (hasPointer || hasPointer === undefined) && 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 className={styles.in} ref={scrollerRef}>\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","useAdaptivityHasPointer","useConfigDirection","useExternRef","easeInOutSine","useIsomorphicLayoutEffect","RootComponent","ScrollArrow","styles","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","restProps","canScrollStart","setCanScrollStart","useState","canScrollEnd","setCanScrollEnd","direction","isRtl","isCustomScrollingRef","useRef","scrollerRef","hasPointer","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","baseClassName","host","withConstArrows","rtl","onMouseEnter","undefined","data-testid","size","offsetY","aria-hidden","tabIndex","className","arrow","arrowLeft","onClick","arrowRight","div","in","ref","inWrapper"],"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 { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\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 * 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://vkcom.github.io/VKUI/#/HorizontalScroll\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  ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n  const [canScrollStart, setCanScrollStart] = React.useState(false);\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false);\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 hasPointer = useAdaptivityHasPointer();\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 && hasPointer && 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, hasPointer, 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  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles.withConstArrows,\n        isRtl && styles.rtl,\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && 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 && (hasPointer || hasPointer === undefined) && 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 className={styles.in} ref={scrollerRef}>\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","useAdaptivityHasPointer","useConfigDirection","useExternRef","easeInOutSine","useIsomorphicLayoutEffect","RootComponent","ScrollArrow","styles","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","restProps","canScrollStart","setCanScrollStart","useState","canScrollEnd","setCanScrollEnd","direction","isRtl","isCustomScrollingRef","useRef","scrollerRef","hasPointer","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","baseClassName","host","withConstArrows","rtl","onMouseEnter","undefined","data-testid","size","offsetY","aria-hidden","tabIndex","className","arrow","arrowLeft","onClick","arrowRight","div","in","ref","inWrapper"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,uBAAuB,QAAQ,yCAAsC;AAC9E,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,aAAa,QAAQ,kBAAe;AAC7C,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,WAAW,QAA+B,gCAA6B;AAChF,OAAOC,YAAY,gCAAgC;AA4EnD;;CAEC,GACD,SAASC;IACP,OAAOC,eAAeA,YAAYD,GAAG,GAAGC,YAAYD,GAAG,KAAKE,KAAKF,GAAG;AACtE;AAEA;;;;;;;;;;;CAWC,GACD,SAASG,qBAAqBC,KAAa;IACzC,OAAOA,QAAQ,IAAIC,KAAKC,IAAI,CAACF,SAASC,KAAKE,KAAK,CAACH;AACnD;AAEA;;;CAGC,GACD,MAAMI,2BAA2B,CAACC,KAAoBN,qBAAqBM,GAAGC,UAAU;AAExF;;;;CAIC,GACD,MAAMC,wBAAwB;AAE9B,SAASC,SAAS,EAChBC,aAAa,EACbC,iBAAiB,EACjBC,cAAc,EACdC,mBAAmB,EACnBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,uBAAuB,EACvBC,aAAa,EACC;IACd,IAAI,CAACR,iBAAiB,CAACC,mBAAmB;QACxC;IACF;IAEA;;GAEC,GACD,MAAMQ,oBACJ,AAACD,CAAAA,kBAAkB,QAAQ,IAAI,CAAC,CAAA,IAAMF,CAAAA,qBAAqBN,cAAcU,WAAW,AAAD;IAErF,MAAMC,kBAAkBhB,yBAAyBK;IACjD,MAAMY,0BAA0BD,kBAAmBH,CAAAA,kBAAkB,QAAQ,CAAC,IAAI,CAAA;IAElF,IAAIK,gBAAgBZ,kBAAkBW;IAEtC,MAAME,OAAOD,gBAAgBD;IAC7B,IAAIJ,kBAAkB,OAAO;QAC3BK,gBAAgBF,kBAAkBG;IACpC;IAEAT;IAEA;;GAEC,GACD,IAAIM,kBAAkBE,gBAAgB,GAAG;QACvCA,gBAAgB;IAClB;IAEA,IAAIrB,KAAKuB,GAAG,CAACF,kBAAkBrB,KAAKuB,GAAG,CAACN,oBAAoB;QAC1DN;QACAU,gBAAgBJ;IAClB;IAEA,MAAMO,YAAY7B;IAEjB,CAAA,SAAS8B;QACR,MAAMC,OAAO/B;QACb,MAAMgC,UAAU3B,KAAK4B,GAAG,CAAC,AAACF,CAAAA,OAAOF,SAAQ,IAAKT,yBAAyB;QAEvE,MAAMhB,QAAQT,cAAcqC;QAE5B,MAAME,oBAAoBV,kBAAkB,AAACE,CAAAA,gBAAgBF,eAAc,IAAKpB;QAChFS,cAAcH,UAAU,GAAGP,qBAAqB+B;QAEhD,MAAMC,YACJd,kBAAkB,QAAQhB,KAAK+B,GAAG,CAAC,GAAGV,iBAAiBrB,KAAK4B,GAAG,CAAC,GAAGP;QACrE,IAAIlB,yBAAyBK,mBAAmBsB,aAAaH,YAAY,GAAG;YAC1EK,sBAAsBP;YACtB;QACF;QAEAb;QACAF,eAAeuB,KAAK;QACpB,IAAIvB,eAAewB,MAAM,GAAG,GAAG;YAC7BxB,cAAc,CAAC,EAAE;QACnB;IACF,CAAA;AACF;AAEA;;CAEC,GACD,OAAO,MAAMyB,mBAAmB,CAAC,EAC/BC,QAAQ,EACRC,eAAe,EACfC,gBAAgB,EAChBC,aAAa,IAAI,EACjBC,YAAY,GAAG,EACfC,YAAY,EACZ1B,0BAA0BT,qBAAqB,EAC/CoC,MAAM,EACNC,mBAAmB,KAAK,EACxBC,gBAAgB,EAChBC,gBAAgB,EAChB,iBAAiB;AACjBC,0BAA0B,KAAK,EAC/BC,iBAAiB,EACjBC,uBAAuB,EACvB,GAAGC,WACmB;IACtB,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGnE,MAAMoE,QAAQ,CAAC;IAC3D,MAAM,CAACC,cAAcC,gBAAgB,GAAGtE,MAAMoE,QAAQ,CAAC;IACvD,MAAMG,YAAYnE;IAClB,MAAMoE,QAAQD,cAAc;IAE5B,MAAME,uBAAuBzE,MAAM0E,MAAM,CAAC;IAE1C,MAAMC,cAActE,aAAaqD;IAEjC,MAAMhC,iBAAiB1B,MAAM0E,MAAM,CAAiB,EAAE;IAEtD,MAAME,aAAazE;IAEnB,MAAM0E,WAAW7E,MAAM8E,WAAW,CAChC,CAACrD;QACC,MAAMD,gBAAgBmD,YAAYI,OAAO;QAEzCrD,eAAeqD,OAAO,CAACC,IAAI,CAAC,IAC1BzD,SAAS;gBACPC;gBACAC;gBACAC,gBAAgBA,eAAeqD,OAAO;gBACtCpD,qBAAqB,IAAM2C,gBAAgB;gBAC3C1C,aAAa,IAAO6C,qBAAqBM,OAAO,GAAG;gBACnDlD,eAAe,IAAO4C,qBAAqBM,OAAO,GAAG;gBACrDjD,oBAAoBN,eAAeyD,mBAAmBC,eAAe;gBACrEnD;gBACAC,eAAeuC;YACjB;QAEF,IAAI7C,eAAeqD,OAAO,CAAC7B,MAAM,KAAK,GAAG;YACvCxB,eAAeqD,OAAO,CAAC,EAAE;QAC3B;IACF,GACA;QAACJ;QAAa5C;QAAyBwC;QAAWD;KAAgB;IAGpE,MAAMa,gBAAgBnF,MAAM8E,WAAW,CAAC;QACtC,MAAMrD,oBACJ4B,mBAAoB,CAAA,CAAC+B,IAAcA,IAAIT,YAAYI,OAAO,CAAE7C,WAAW,AAAD;QACxE2C,SAASpD;IACX,GAAG;QAAC4B;QAAiBwB;QAAUF;KAAY;IAE3C,MAAMU,cAAcrF,MAAM8E,WAAW,CAAC;QACpC,MAAMrD,oBACJ6B,oBAAqB,CAAA,CAAC8B,IAAcA,IAAIT,YAAYI,OAAO,CAAE7C,WAAW,AAAD;QACzE2C,SAASpD;IACX,GAAG;QAAC6B;QAAkBuB;QAAUF;KAAY;IAE5C,MAAMW,4BAA4BtF,MAAM8E,WAAW,CAAC;QAClD,IAAIvB,cAAcqB,cAAcD,YAAYI,OAAO,IAAI,CAACN,qBAAqBM,OAAO,EAAE;YACpF,MAAMvD,gBAAgBmD,YAAYI,OAAO;YACzC,MAAM1D,aAAaG,cAAcH,UAAU;YAE3C8C,kBAAkBK,QAAQnD,aAAa,IAAIA,aAAa;YACxDiD,gBACEtD,KAAKuB,GAAG,CAACpB,yBAAyBK,kBAAkBA,cAAcU,WAAW,GAC3EV,cAAc0D,WAAW;QAE/B;IACF,GAAG;QAAC3B;QAAYqB;QAAYD;QAAaH;KAAM;IAE/CxE,MAAMuF,SAAS,CAACD,2BAA2B;QAACA;QAA2BlC;KAAS;IAEhF7C,0BACE,SAASiF;QACP,MAAMC,WAAWd,YAAYI,OAAO;QACpC,IAAI,CAACU,UAAU;YACb,OAAOvF;QACT;QACA;;OAEC,GACD,MAAMwF,UAAU,CAACC;YACfhB,YAAYI,OAAO,CAAEa,QAAQ,CAAC;gBAAEC,MAAMF,EAAEG,MAAM,GAAGH,EAAEI,MAAM;gBAAEC,UAAU;YAAO;YAC5EL,EAAEM,cAAc;QAClB;QAEA,MAAMC,kBAAkB;YAAEC,SAAS;QAAM;QAEzC,IAAIxC,kBAAkB;YACpB8B,SAASW,gBAAgB,CAAC,SAASV,SAASQ;QAC9C;QACAT,SAASW,gBAAgB,CAAC,UAAUd,2BAA2BY;QAE/D,OAAO;YACL,IAAIvC,kBAAkB;gBACpB,4FAA4F;gBAC5F8B,SAASY,mBAAmB,CAAC,SAASX,SAASQ;YACjD;YACA,6FAA6F;YAC7FT,SAASY,mBAAmB,CAAC,UAAUf,2BAA2BY;QACpE;IACF,GACA;QAACvC;QAAkB2B;QAA2BX;KAAY;IAG5D,qBACE,MAACnE;QACE,GAAGyD,SAAS;QACbqC,eAAerG,WACbS,OAAO6F,IAAI,EACX,gCACAhD,eAAe,YAAY7C,OAAO8F,eAAe,EACjDhC,SAAS9D,OAAO+F,GAAG;QAErBC,cAAcpB;;YAEb/B,cAAeqB,CAAAA,cAAcA,eAAe+B,SAAQ,KAAMzC,gCACzD,KAACzD;gBACCmG,eAAahD;gBACbiD,MAAMrD;gBACNsD,SAASrD;gBACTc,WAAU;gBACVwC,aAAW;gBACXC,UAAU,CAAC;gBACXC,WAAWhH,WAAWS,OAAOwG,KAAK,EAAExG,OAAOyG,SAAS;gBACpDC,SAASjC;;YAGZ5B,cAAeqB,CAAAA,cAAcA,eAAe+B,SAAQ,KAAMtC,8BACzD,KAAC5D;gBACCmG,eAAa/C;gBACbgD,MAAMrD;gBACNsD,SAASrD;gBACTc,WAAU;gBACVwC,aAAW;gBACXC,UAAU,CAAC;gBACXC,WAAWhH,WAAWS,OAAOwG,KAAK,EAAExG,OAAO2G,UAAU;gBACrDD,SAAS/B;;0BAGb,KAACiC;gBAAIL,WAAWvG,OAAO6G,EAAE;gBAAEC,KAAK7C;0BAC9B,cAAA,KAACb;oBACCmD,WAAWhH,WAAWS,OAAO+G,SAAS,EAAEzD;oBACxCwD,KAAKzD;8BAEJX;;;;;AAKX,EAAE"}

package/dist/cssm/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 TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\nexport interface IconButtonProps extends TappableProps {\n  /**\n   * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий\n   */\n  label?: string;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ label, children, ...restProps }: IconButtonProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeY = '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        sizeY !== 'regular' && sizeYClassNames[sizeY],\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","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","warn","IconButton","label","children","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","baseClassName","host","ios"],"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,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AASA,MAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMU,aAAa,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,WAA4B;IAC3E,MAAMC,WAAWjB;IACjB,MAAM,EAAEkB,QAAQ,MAAM,EAAE,GAAGnB;IAE3B,IAAIoB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAerB,kBAAkB;YACrCc,UAAU;gBAACA;gBAAUD;aAAM;YAC3B,GAAGE,SAAS;QACd;QAEA,IAAI,CAACM,cAAc;YACjBV,KAAKV,gBAAgBqB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAACpB;QACCqB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;QACjC,GAAGR,SAAS;QACbY,eAAe9B,WACbQ,OAAOuB,IAAI,EACXX,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CD,aAAa,SAASX,OAAOwB,GAAG;;YAGjChB,uBAAS,KAACT;0BAAgBS;;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 TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\nexport interface IconButtonProps extends TappableProps {\n  /**\n   * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий.\n   */\n  label?: string;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ label, children, ...restProps }: IconButtonProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeY = '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        sizeY !== 'regular' && sizeYClassNames[sizeY],\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","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","warn","IconButton","label","children","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","baseClassName","host","ios"],"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,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AASA,MAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMU,aAAa,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,WAA4B;IAC3E,MAAMC,WAAWjB;IACjB,MAAM,EAAEkB,QAAQ,MAAM,EAAE,GAAGnB;IAE3B,IAAIoB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAerB,kBAAkB;YACrCc,UAAU;gBAACA;gBAAUD;aAAM;YAC3B,GAAGE,SAAS;QACd;QAEA,IAAI,CAACM,cAAc;YACjBV,KAAKV,gBAAgBqB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAACpB;QACCqB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM;QACjC,GAAGR,SAAS;QACbY,eAAe9B,WACbQ,OAAOuB,IAAI,EACXX,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CD,aAAa,SAASX,OAAOwB,GAAG;;YAGjChB,uBAAS,KAACT;0BAAgBS;;YAC1BC;;;AAGP,EAAE"}

package/dist/cssm/components/Image/Image.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { mergeStyle } from "../../helpers/mergeStyle.js";
+import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
 import { ImageBase } from "../ImageBase/ImageBase.js";
 import { ImageBadge } from "./ImageBadge/ImageBadge.js";
 import styles from "./Image.module.css";
@@ -93,12 +94,13 @@ const getBorderRadiusBySizeInPx = (size, borderRadius)=>{
         className: classNames(className, styles.host, borderStartStartRadius && styles.borderStartStartRadius, borderStartEndRadius && styles.borderStartEndRadius, borderEndStartRadius && styles.borderEndStartRadius, borderEndEndRadius && styles.borderEndEndRadius)
     });
 };
-Image.displayName = 'Image';
 Image.Badge = ImageBadge;
-Image.Badge.displayName = 'Image.Badge';
 Image.Overlay = ImageBase.Overlay;
-Image.Overlay.displayName = 'Image.Overlay';
 Image.FloatElement = ImageBase.FloatElement;
-Image.FloatElement.displayName = 'Image.FloatElement';
+if (process.env.NODE_ENV !== 'production') {
+    defineComponentDisplayNames(Image.Badge, 'Image.Badge');
+    defineComponentDisplayNames(Image.Overlay, 'Image.Overlay');
+    defineComponentDisplayNames(Image.FloatElement, 'Image.FloatElement');
+}
 
 //# sourceMappingURL=Image.js.map

package/dist/cssm/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 { 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://vkcom.github.io/VKUI/#/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.displayName = 'Image';\n\nImage.Badge = ImageBadge;\nImage.Badge.displayName = 'Image.Badge';\n\nImage.Overlay = ImageBase.Overlay;\nImage.Overlay.displayName = 'Image.Overlay';\n\nImage.FloatElement = ImageBase.FloatElement;\nImage.FloatElement.displayName = 'Image.FloatElement';\n"],"names":["React","classNames","mergeStyle","ImageBase","ImageBadge","styles","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","host","displayName","Badge","Overlay","FloatElement"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,SAASC,SAAS,QAAyD,4BAAyB;AACpG,SAASC,UAAU,QAA8B,6BAA0B;AAC3E,OAAOC,YAAY,qBAAqB;AAIxC,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,KAACL;QACE,GAAGiB,SAAS;QACbD,WAAWA;QACXX,MAAMA;QACNS,OAAOf,WAAWmB,cAAcJ;QAChCC,WAAWjB,WACTiB,WACAb,OAAOkB,IAAI,EACXV,0BAA0BR,OAAOQ,sBAAsB,EACvDC,wBAAwBT,OAAOS,oBAAoB,EACnDC,wBAAwBV,OAAOU,oBAAoB,EACnDC,sBAAsBX,OAAOW,kBAAkB;;AAIvD,EAAE;AAEFJ,MAAMY,WAAW,GAAG;AAEpBZ,MAAMa,KAAK,GAAGrB;AACdQ,MAAMa,KAAK,CAACD,WAAW,GAAG;AAE1BZ,MAAMc,OAAO,GAAGvB,UAAUuB,OAAO;AACjCd,MAAMc,OAAO,CAACF,WAAW,GAAG;AAE5BZ,MAAMe,YAAY,GAAGxB,UAAUwB,YAAY;AAC3Cf,MAAMe,YAAY,CAACH,WAAW,GAAG"}
+{"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://vkcom.github.io/VKUI/#/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","styles","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","getBorderRadiusBySizeInPx","undefined","Image","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius","style","className","objectFit","restProps","borderStyles","useMemo","host","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;AAC3E,OAAOC,YAAY,qBAAqB;AAIxC,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,eAAwDtB,MAAMuB,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,KAACL;QACE,GAAGiB,SAAS;QACbD,WAAWA;QACXX,MAAMA;QACNS,OAAOhB,WAAWoB,cAAcJ;QAChCC,WAAWlB,WACTkB,WACAb,OAAOkB,IAAI,EACXV,0BAA0BR,OAAOQ,sBAAsB,EACvDC,wBAAwBT,OAAOS,oBAAoB,EACnDC,wBAAwBV,OAAOU,oBAAoB,EACnDC,sBAAsBX,OAAOW,kBAAkB;;AAIvD,EAAE;AAEFJ,MAAMY,KAAK,GAAGpB;AACdQ,MAAMa,OAAO,GAAGtB,UAAUsB,OAAO;AACjCb,MAAMc,YAAY,GAAGvB,UAAUuB,YAAY;AAE3C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC3B,4BAA4BU,MAAMY,KAAK,EAAE;IACzCtB,4BAA4BU,MAAMa,OAAO,EAAE;IAC3CvB,4BAA4BU,MAAMc,YAAY,EAAE;AAClD"}

package/dist/cssm/components/Image/ImageBadge/ImageBadge.js

@@ -11,6 +11,5 @@ export const ImageBadge = ({ className, ...restProps })=>{
         className: classNames(styles.host, size < 96 && styles.shifted, className)
     });
 };
-ImageBadge.displayName = 'ImageBadge';
 
 //# sourceMappingURL=ImageBadge.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './ImageBadge.module.css';\n\nexport type ImageBadgeProps = ImageBaseBadgeProps;\n\nexport const ImageBadge: React.FC<ImageBadgeProps> = ({\n  className,\n  ...restProps\n}: ImageBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(styles.host, size < 96 && styles.shifted, className)}\n    />\n  );\n};\n\nImageBadge.displayName = 'ImageBadge';\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","ImageBadge","className","restProps","size","useContext","Badge","host","shifted","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,+BAA4B;AAClG,OAAOC,YAAY,0BAA0B;AAI7C,OAAO,MAAMC,aAAwC,CAAC,EACpDC,SAAS,EACT,GAAGC,WACa;IAChB,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAClC,qBACE,KAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WAAWG,OAAOO,IAAI,EAAEH,OAAO,MAAMJ,OAAOQ,OAAO,EAAEN;;AAGtE,EAAE;AAEFD,WAAWQ,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './ImageBadge.module.css';\n\nexport type ImageBadgeProps = ImageBaseBadgeProps;\n\nexport const ImageBadge = ({ className, ...restProps }: ImageBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(styles.host, size < 96 && styles.shifted, className)}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","ImageBadge","className","restProps","size","useContext","Badge","host","shifted"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,+BAA4B;AAClG,OAAOC,YAAY,0BAA0B;AAI7C,OAAO,MAAMC,aAAa,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAA4B;IACrE,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAClC,qBACE,KAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WAAWG,OAAOO,IAAI,EAAEH,OAAO,MAAMJ,OAAOQ,OAAO,EAAEN;;AAGtE,EAAE"}

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

@@ -6,6 +6,7 @@ import { classNames } from "@vkontakte/vkjs";
 import { mergeStyle } from "../../helpers/mergeStyle.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { minOr } from "../../lib/comparing.js";
+import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
 import { getFetchPriorityProp } from "../../lib/utils.js";
 import { Clickable } from "../Clickable/Clickable.js";
 import { ImageBaseBadge } from "./ImageBaseBadge/ImageBaseBadge.js";
@@ -169,12 +170,13 @@ const sizeToNumber = (size)=>{
         })
     });
 };
-ImageBase.displayName = 'ImageBase';
 ImageBase.Badge = ImageBaseBadge;
-ImageBase.Badge.displayName = 'ImageBase.Badge';
 ImageBase.Overlay = ImageBaseOverlay;
-ImageBase.Overlay.displayName = 'ImageBase.Overlay';
 ImageBase.FloatElement = ImageBaseFloatElement;
-ImageBase.FloatElement.displayName = 'ImageBase.FloatElement';
+if (process.env.NODE_ENV !== 'production') {
+    defineComponentDisplayNames(ImageBase.Badge, 'ImageBase.Badge');
+    defineComponentDisplayNames(ImageBase.Overlay, 'ImageBase.Overlay');
+    defineComponentDisplayNames(ImageBase.FloatElement, 'ImageBase.FloatElement');
+}
 
 //# sourceMappingURL=ImageBase.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type {\n  AnchorHTMLAttributesOnly,\n  CSSCustomProperties,\n  HasRef,\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\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения\n   */\n  widthSize?: number | string;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Пользовательское значения стиля 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  filter?: React.CSSProperties['filter'];\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://vkcom.github.io/VKUI/#/ImageBase\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,\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  ...restProps\n}: ImageBaseProps) => {\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 mouseOverHandlersRef = useRef<VoidFunction[]>([]);\n  const mouseOutHandlersRef = useRef<VoidFunction[]>([]);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  const onMouseOver = () => {\n    mouseOverHandlersRef.current.forEach((fn) => fn());\n  };\n\n  const onMouseOut = () => {\n    mouseOutHandlersRef.current.forEach((fn) => fn());\n  };\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      onMouseOverHandlers: mouseOverHandlersRef.current,\n      onMouseOutHandlers: mouseOutHandlersRef.current,\n    }),\n    [size],\n  );\n\n  const imgStyles:\n    | CSSCustomProperties<React.CSSProperties['objectPosition'] | React.CSSProperties['filter']>\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  const keepAspectRationStyles = keepAspectRatio\n    ? {\n        width: widthImg || width,\n        height: heightImg || height,\n      }\n    : undefined;\n\n  return (\n    <ImageBaseContext.Provider value={contextValue}>\n      <Clickable\n        baseStyle={{ width, height }}\n        baseClassName={classNames(\n          styles.host,\n          loaded && styles.loaded,\n          withTransparentBackground && styles.transparentBackground,\n        )}\n        getRootRef={wrapperRef}\n        onMouseOver={onMouseOver}\n        onMouseOut={onMouseOut}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={classNames(\n              styles.img,\n              getObjectFitClassName(objectFit),\n              objectPosition && styles.withObjectPosition,\n              filter && styles.withFilter,\n              keepAspectRatio && styles.imgKeepRatio,\n            )}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            style={mergeStyle(keepAspectRationStyles, imgStyles)}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            // @ts-expect-error: TS2322 отсутствует в @types/react\n            elementtiming={elementTiming} // eslint-disable-line react/no-unknown-property\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\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};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n\nImageBase.FloatElement = ImageBaseFloatElement;\nImageBase.FloatElement.displayName = 'ImageBase.FloatElement';\n"],"names":["useRef","React","classNames","mergeStyle","useExternRef","minOr","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseFloatElement","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","objectPosition","filter","keepAspectRatio","getRootRef","elementTiming","restProps","wrapperRef","loaded","setLoaded","useState","failed","setFailed","mouseOverHandlersRef","mouseOutHandlersRef","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","onMouseOver","forEach","fn","onMouseOut","contextValue","useMemo","onMouseOverHandlers","onMouseOutHandlers","imgStyles","keepAspectRationStyles","Provider","baseStyle","baseClassName","host","transparentBackground","img","ref","className","withObjectPosition","withFilter","imgKeepRatio","style","elementtiming","div","fallback","aria-hidden","border","displayName","Badge","Overlay","FloatElement"],"mappings":"AAAA;;AAEA,SAASA,MAAM,QAAQ,QAAQ;AAC/B,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,KAAK,QAAQ,yBAAsB;AAC5C,SAASC,oBAAoB,QAAQ,qBAAkB;AAQvD,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,OAAOC,YAAY,yBAAyB;AAa5C,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,eAAY;AAEnB,SAASN,gBAAgB,GAAG;AAE5B;;CAEC,GACD,MAAMO,cAAc;AAwEpB,MAAMC,wBAAwB,CAACC;IAC7B,OAAQA;QACN,KAAK;YACH,OAAON,OAAOO,mBAAmB;QACnC,KAAK;YACH,OAAOP,OAAOQ,iBAAiB;QACjC,KAAK;YACH,OAAOR,OAAOS,gBAAgB;QAChC,KAAK;YACH,OAAOT,OAAOU,qBAAqB;IACvC;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,aAAa,EACbC,MAAM,EACNZ,MAAMa,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,EACzBrC,YAAY,OAAO,EACnBsC,cAAc,EACdC,MAAM,EACNC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,aAAa,EACb,GAAGC,WACY;IACf,MAAMhC,OAAOa,YAAYvC,MAAM;QAACyB,aAAamB;QAAYnB,aAAaoB;KAAY,EAAEhC;IACpF,MAAM8C,aAAa5D,aAAayD;IAEhC,MAAMhB,QAAQI,aAAcW,CAAAA,kBAAkBnC,YAAYM,IAAG;IAC7D,MAAMgB,SAASG,cAAeU,CAAAA,kBAAkBnC,YAAYM,IAAG;IAE/D,MAAM,CAACkC,QAAQC,UAAU,GAAGjE,MAAMkE,QAAQ,CAAC;IAC3C,MAAM,CAACC,QAAQC,UAAU,GAAGpE,MAAMkE,QAAQ,CAAC;IAE3C,MAAMG,uBAAuBtE,OAAuB,EAAE;IACtD,MAAMuE,sBAAsBvE,OAAuB,EAAE;IAErD,MAAMwE,SAASjC,OAAOC;IACtB,MAAMiC,uBAAuB,AAACL,CAAAA,UAAU,CAACI,MAAK,mBAAMvE,MAAMyE,cAAc,CAACrB;IAEzE,MAAMD,eAAeqB,uBAAuBpB,mBAAmB;IAE/D,IAAIsB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1ChE,aAAakB;QACb,IAAIqB,cAAc;YAChBxC,qBAAqBmB,MAAM;gBAAE+C,MAAM;gBAAgBnD,OAAOyB;YAAa;QACzE;IACF;IAEA,MAAM2B,kBAAkB,CAACC;QACvB,IAAIf,QAAQ;YACV;QACF;QAEAC,UAAU;QACVG,UAAU;QACVd,SAASyB;IACX;IAEA,MAAMC,mBAAmB,CAACD;QACxBd,UAAU;QACVG,UAAU;QACVb,UAAUwB;IACZ;IAEA,MAAME,SAAS9E,aAAauC;IAC5B,MAAMwC,2BAA2BlF,MAAMD,MAAM,CAAC;IAC9CC,MAAMmF,SAAS,CACb,SAASC;QACP,IAAIF,yBAAyBG,OAAO,EAAE;YACpC;QACF;QACAH,yBAAyBG,OAAO,GAAG;QAEnC,IAAIJ,OAAOI,OAAO,IAAIJ,OAAOI,OAAO,CAACC,QAAQ,IAAI,CAACtB,QAAQ;YACxD,MAAMe,QAAQ,IAAIQ,MAAM;YACxBN,OAAOI,OAAO,CAACG,aAAa,CAACT;QAC/B;IACF,GACA;QAACE;QAAQjB;KAAO;IAGlB,MAAMyB,cAAc;QAClBpB,qBAAqBgB,OAAO,CAACK,OAAO,CAAC,CAACC,KAAOA;IAC/C;IAEA,MAAMC,aAAa;QACjBtB,oBAAoBe,OAAO,CAACK,OAAO,CAAC,CAACC,KAAOA;IAC9C;IAEA,MAAME,eAAe7F,MAAM8F,OAAO,CAChC,IAAO,CAAA;YACLhE;YACAiE,qBAAqB1B,qBAAqBgB,OAAO;YACjDW,oBAAoB1B,oBAAoBe,OAAO;QACjD,CAAA,GACA;QAACvD;KAAK;IAGR,MAAMmE,YAGJxC,kBAAkBC,SACd;QACE,8CAA8CD;QAC9C,4CAA4CC;IAC9C,IACAlC;IAEN,MAAM0E,yBAAyBvC,kBAC3B;QACEf,OAAOC,YAAYD;QACnBE,QAAQC,aAAaD;IACvB,IACAtB;IAEJ,qBACE,KAACd,iBAAiByF,QAAQ;QAACzE,OAAOmE;kBAChC,cAAA,MAACvF;YACC8F,WAAW;gBAAExD;gBAAOE;YAAO;YAC3BuD,eAAepG,WACbY,OAAOyF,IAAI,EACXtC,UAAUnD,OAAOmD,MAAM,EACvBR,6BAA6B3C,OAAO0F,qBAAqB;YAE3D3C,YAAYG;YACZ0B,aAAaA;YACbG,YAAYA;YACX,GAAG9B,SAAS;;gBAEZS,wBACC,KAACiC;oBACCC,KAAKxB;oBACLjD,KAAKA;oBACL0E,WAAWzG,WACTY,OAAO2F,GAAG,EACVtF,sBAAsBC,YACtBsC,kBAAkB5C,OAAO8F,kBAAkB,EAC3CjD,UAAU7C,OAAO+F,UAAU,EAC3BjD,mBAAmB9C,OAAOgG,YAAY;oBAExC5E,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChB0E,OAAO5G,WAAWgG,wBAAwBD;oBAC1C5D,OAAOA;oBACPC,KAAKA;oBACLC,QAAQA;oBACRC,QAAQA;oBACRI,OAAOC;oBACPC,QAAQC;oBACRO,QAAQwB;oBACRvB,SAASyB;oBACT,sDAAsD;oBACtD+B,eAAelD;oBACd,GAAGxD,qBAAqBoC,cAAc;;gBAG1CU,8BAAgB,KAAC6D;oBAAIN,WAAW7F,OAAOoG,QAAQ;8BAAG9D;;gBAClDE,0BAAY,KAAC2D;oBAAIN,WAAW7F,OAAOwC,QAAQ;8BAAGA;;gBAC9C,CAACH,0BAAY,KAAC8D;oBAAIE,aAAW;oBAACR,WAAW7F,OAAOsG,MAAM;;;;;AAI/D,EAAE;AAEFpF,UAAUqF,WAAW,GAAG;AAExBrF,UAAUsF,KAAK,GAAG9G;AAClBwB,UAAUsF,KAAK,CAACD,WAAW,GAAG;AAE9BrF,UAAUuF,OAAO,GAAG7G;AACpBsB,UAAUuF,OAAO,CAACF,WAAW,GAAG;AAEhCrF,UAAUwF,YAAY,GAAG/G;AACzBuB,UAAUwF,YAAY,CAACH,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type {\n  AnchorHTMLAttributesOnly,\n  CSSCustomProperties,\n  HasRef,\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\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения.\n   */\n  widthSize?: number | string;\n  /**\n   * Высота изображения.\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Пользовательское значения стиля 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  filter?: React.CSSProperties['filter'];\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://vkcom.github.io/VKUI/#/ImageBase\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,\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  ...restProps\n}: ImageBaseProps) => {\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 mouseOverHandlersRef = useRef<VoidFunction[]>([]);\n  const mouseOutHandlersRef = useRef<VoidFunction[]>([]);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  const onMouseOver = () => {\n    mouseOverHandlersRef.current.forEach((fn) => fn());\n  };\n\n  const onMouseOut = () => {\n    mouseOutHandlersRef.current.forEach((fn) => fn());\n  };\n\n  const contextValue = React.useMemo(\n    () => ({\n      size,\n      onMouseOverHandlers: mouseOverHandlersRef.current,\n      onMouseOutHandlers: mouseOutHandlersRef.current,\n    }),\n    [size],\n  );\n\n  const imgStyles:\n    | CSSCustomProperties<React.CSSProperties['objectPosition'] | React.CSSProperties['filter']>\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  const keepAspectRationStyles = keepAspectRatio\n    ? {\n        width: widthImg || width,\n        height: heightImg || height,\n      }\n    : undefined;\n\n  return (\n    <ImageBaseContext.Provider value={contextValue}>\n      <Clickable\n        baseStyle={{ width, height }}\n        baseClassName={classNames(\n          styles.host,\n          loaded && styles.loaded,\n          withTransparentBackground && styles.transparentBackground,\n        )}\n        getRootRef={wrapperRef}\n        onMouseOver={onMouseOver}\n        onMouseOut={onMouseOut}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={classNames(\n              styles.img,\n              getObjectFitClassName(objectFit),\n              objectPosition && styles.withObjectPosition,\n              filter && styles.withFilter,\n              keepAspectRatio && styles.imgKeepRatio,\n            )}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            style={mergeStyle(keepAspectRationStyles, imgStyles)}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            // @ts-expect-error: TS2322 отсутствует в @types/react\n            elementtiming={elementTiming} // eslint-disable-line react/no-unknown-property\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\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":["useRef","React","classNames","mergeStyle","useExternRef","minOr","defineComponentDisplayNames","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseFloatElement","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","objectPosition","filter","keepAspectRatio","getRootRef","elementTiming","restProps","wrapperRef","loaded","setLoaded","useState","failed","setFailed","mouseOverHandlersRef","mouseOutHandlersRef","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","onMouseOver","forEach","fn","onMouseOut","contextValue","useMemo","onMouseOverHandlers","onMouseOutHandlers","imgStyles","keepAspectRationStyles","Provider","baseStyle","baseClassName","host","transparentBackground","img","ref","className","withObjectPosition","withFilter","imgKeepRatio","style","elementtiming","div","fallback","aria-hidden","border","Badge","Overlay","FloatElement"],"mappings":"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"}

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

@@ -23,7 +23,7 @@ const backgroundStyles = {
 /**
  * Бейдж в правом нижнем углу компонента.
  *
- * > Не используйте при `size < 24`
+ * > Не используйте при `size < 24`.
  */ export const ImageBaseBadge = ({ background = 'shadow', ...restProps })=>{
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
@@ -37,6 +37,5 @@ const backgroundStyles = {
         ]
     });
 };
-ImageBaseBadge.displayName = 'ImageBaseBadge';
 
 //# sourceMappingURL=ImageBaseBadge.js.map

package/dist/cssm/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: React.FC<ImageBaseBadgeProps> = ({\n  background = 'shadow',\n  ...restProps\n}: 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\nImageBaseBadge.displayName = 'ImageBaseBadge';\n"],"names":["React","classNames","RootComponent","ImageBaseContext","validateBadgeIcon","styles","DevelopmentCheck","children","size","useContext","name","value","backgroundStyles","stroke","backgroundStroke","shadow","backgroundShadow","ImageBaseBadge","background","restProps","baseClassName","host","process","env","NODE_ENV","displayName"],"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;AAClD,OAAOC,YAAY,8BAA8B;AAEjD,SAASC,iBAAiB,EAAEC,QAAQ,EAAyC;IAC3E,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAElC,IAAII,UAAU;QACZH,kBAAkBI,MAAM;YAAEE,MAAM;YAAYC,OAAOJ;QAAS;IAC9D;IAEA,OAAO;AACT;AAEA,MAAMK,mBAAmB;IACvBC,QAAQR,OAAOS,gBAAgB;IAC/BC,QAAQV,OAAOW,gBAAgB;AACjC;AAwBA;;;;CAIC,GACD,OAAO,MAAMC,iBAAgD,CAAC,EAC5DC,aAAa,QAAQ,EACrB,GAAGC,WACiB;IACpB,qBACE;;0BACE,KAACjB;gBACE,GAAGiB,SAAS;gBACbC,eAAenB,WAAWI,OAAOgB,IAAI,EAAET,gBAAgB,CAACM,WAAW;;YAEpEI,QAAQC,GAAG,CAACC,QAAQ,KAAK,+BACxB,KAAClB;0BAAkBa,UAAUZ,QAAQ;;;;AAI7C,EAAE;AAEFU,eAAeQ,WAAW,GAAG"}
+{"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","styles","DevelopmentCheck","children","size","useContext","name","value","backgroundStyles","stroke","backgroundStroke","shadow","backgroundShadow","ImageBaseBadge","background","restProps","baseClassName","host","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;AAClD,OAAOC,YAAY,8BAA8B;AAEjD,SAASC,iBAAiB,EAAEC,QAAQ,EAAyC;IAC3E,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAElC,IAAII,UAAU;QACZH,kBAAkBI,MAAM;YAAEE,MAAM;YAAYC,OAAOJ;QAAS;IAC9D;IAEA,OAAO;AACT;AAEA,MAAMK,mBAAmB;IACvBC,QAAQR,OAAOS,gBAAgB;IAC/BC,QAAQV,OAAOW,gBAAgB;AACjC;AAwBA;;;;CAIC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAAEC,aAAa,QAAQ,EAAE,GAAGC,WAAgC;IACzF,qBACE;;0BACE,KAACjB;gBACE,GAAGiB,SAAS;gBACbC,eAAenB,WAAWI,OAAOgB,IAAI,EAAET,gBAAgB,CAACM,WAAW;;YAEpEI,QAAQC,GAAG,CAACC,QAAQ,KAAK,+BACxB,KAAClB;0BAAkBa,UAAUZ,QAAQ;;;;AAI7C,EAAE"}

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

@@ -86,6 +86,5 @@ export const ImageBaseFloatElement = ({ placement, visibility = 'always', style,
         className: classNames(styles.host, hidden && styles.hidden, positionPlacementClassNames[placement], inlineIndentClassName, blockIndentClassName, className)
     });
 };
-ImageBaseFloatElement.displayName = 'ImageBaseFloatElement';
 
 //# sourceMappingURL=ImageBaseFloatElement.js.map

package/dist/cssm/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\nImageBaseFloatElement.displayName = 'ImageBaseFloatElement';\n"],"names":["React","classNames","useIsomorphicLayoutEffect","RootComponent","ImageBaseContext","mutableRemoveElement","resolveIndent","styles","positionPlacementClassNames","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","placementMiddleStart","placementMiddle","placementMiddleEnd","inlineIndentClassNames","inlineIndent2xs","inlineIndentXs","inlineIndentS","inlineIndentM","inlineIndentL","inlineIndentXl","inlineIndent2xl","inlineIndent3xl","inlineIndent4xl","blockIndentClassNames","blockIndent2xs","blockIndentXs","blockIndentS","blockIndentM","blockIndentL","blockIndentXl","blockIndent2xl","blockIndent3xl","blockIndent4xl","ImageBaseFloatElement","placement","visibility","style","className","inlineIndent","blockIndent","restProps","hidden","setHidden","useState","onMouseOverHandlers","onMouseOutHandlers","useContext","resetHidden","addMouseHandlers","onMouseOver","onMouseOut","push","inlineIndentStyle","blockIndentStyle","inlineIndentClassName","blockIndentClassName","useMemo","host","displayName"],"mappings":"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"}
+{"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","styles","positionPlacementClassNames","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","placementMiddleStart","placementMiddle","placementMiddleEnd","inlineIndentClassNames","inlineIndent2xs","inlineIndentXs","inlineIndentS","inlineIndentM","inlineIndentL","inlineIndentXl","inlineIndent2xl","inlineIndent3xl","inlineIndent4xl","blockIndentClassNames","blockIndent2xs","blockIndentXs","blockIndentS","blockIndentM","blockIndentL","blockIndentXl","blockIndent2xl","blockIndent3xl","blockIndent4xl","ImageBaseFloatElement","placement","visibility","style","className","inlineIndent","blockIndent","restProps","hidden","setHidden","useState","onMouseOverHandlers","onMouseOutHandlers","useContext","resetHidden","addMouseHandlers","onMouseOver","onMouseOut","push","inlineIndentStyle","blockIndentStyle","inlineIndentClassName","blockIndentClassName","useMemo","host"],"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;AAChE,OAAOC,YAAY,qCAAqC;AA0BxD,MAAMC,8BAA8B;IAClC,aAAaD,OAAOE,iBAAiB;IACrC,OAAOF,OAAOG,YAAY;IAC1B,WAAWH,OAAOI,eAAe;IACjC,gBAAgBJ,OAAOK,oBAAoB;IAC3C,UAAUL,OAAOM,eAAe;IAChC,cAAcN,OAAOO,kBAAkB;IACvC,gBAAgBP,OAAOQ,oBAAoB;IAC3C,UAAUR,OAAOS,eAAe;IAChC,cAAcT,OAAOU,kBAAkB;AACzC;AAEA,MAAMC,yBAAyB;IAC7B,OAAOX,OAAOY,eAAe;IAC7B,MAAMZ,OAAOa,cAAc;IAC3B,KAAKb,OAAOc,aAAa;IACzB,KAAKd,OAAOe,aAAa;IACzB,KAAKf,OAAOgB,aAAa;IACzB,MAAMhB,OAAOiB,cAAc;IAC3B,OAAOjB,OAAOkB,eAAe;IAC7B,OAAOlB,OAAOmB,eAAe;IAC7B,OAAOnB,OAAOoB,eAAe;AAC/B;AAEA,MAAMC,wBAAwB;IAC5B,OAAOrB,OAAOsB,cAAc;IAC5B,MAAMtB,OAAOuB,aAAa;IAC1B,KAAKvB,OAAOwB,YAAY;IACxB,KAAKxB,OAAOyB,YAAY;IACxB,KAAKzB,OAAO0B,YAAY;IACxB,MAAM1B,OAAO2B,aAAa;IAC1B,OAAO3B,OAAO4B,cAAc;IAC5B,OAAO5B,OAAO6B,cAAc;IAC5B,OAAO7B,OAAO8B,cAAc;AAC9B;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,GAAG/C,MAAMgD,QAAQ,CAACR,eAAe;IAC1D,MAAM,EAAES,mBAAmB,EAAEC,kBAAkB,EAAE,GAAGlD,MAAMmD,UAAU,CAAC/C;IAErEF,0BACE,SAASkD;QACPL,UAAUP,eAAe;IAC3B,GACA;QAACA;KAAW;IAGdtC,0BACE,SAASmD;QACP,IAAIb,eAAe,YAAY;YAC7B,MAAMc,cAAc,IAAMP,UAAU;YACpC,MAAMQ,aAAa,IAAMR,UAAU;YAEnCE,oBAAoBO,IAAI,CAACF;YACzBJ,mBAAmBM,IAAI,CAACD;YAExB,OAAO;gBACLlD,qBAAqB4C,qBAAqBK;gBAC1CjD,qBAAqB6C,oBAAoBK;YAC3C;QACF;QACA;IACF,GACA;QAACf;KAAW;IAGd,MAAM,CAACiB,mBAAmBC,kBAAkBC,uBAAuBC,qBAAqB,GACtF5D,MAAM6D,OAAO,CAAC;QACZ,MAAM,CAACJ,mBAAmBE,sBAAsB,GAAGrD,cACjDqC,cACA,mDACAzB;QAEF,MAAM,CAACwC,kBAAkBE,qBAAqB,GAAGtD,cAC/CsC,aACA,iDACAhB;QAGF,OAAO;YAAC6B;YAAmBC;YAAkBC;YAAuBC;SAAqB;IAC3F,GAAG;QAACjB;QAAcC;KAAY;IAEhC,qBACE,KAACzC;QACE,GAAG0C,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACR,GAAGgB,iBAAiB;YACpB,GAAGC,gBAAgB;QACrB;QACAhB,WAAWzC,WACTM,OAAOuD,IAAI,EACXhB,UAAUvC,OAAOuC,MAAM,EACvBtC,2BAA2B,CAAC+B,UAAU,EACtCoB,uBACAC,sBACAlB;;AAIR,EAAE"}

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

@@ -81,6 +81,5 @@ const ImageBaseOverlayNonInteractive = ({ className, getRootRef, overlayShown: o
         ...commonProps
     });
 };
-ImageBaseOverlay.displayName = 'ImageBaseOverlay';
 
 //# sourceMappingURL=ImageBaseOverlay.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useColorScheme } from '../../../hooks/useColorScheme';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { clickByKeyboardHandler } from '../../../lib/utils';\nimport { ImageBaseContext } from '../context';\nimport { validateOverlayIcon } from '../validators';\nimport { useCalculatedDefaultVisibility, useNonInteractiveOverlayProps } from './hooks';\nimport type {\n  ImageBaseOverlayInteractiveProps,\n  ImageBaseOverlayNonInteractiveProps,\n} from './types';\nimport styles from './ImageBaseOverlay.module.css';\n\nfunction DevelopmentCheck({ children }: Pick<ImageBaseOverlayInteractiveProps, 'children'>) {\n  const { size } = React.useContext(ImageBaseContext);\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return null;\n}\n\nexport type ImageBaseOverlayProps =\n  | ImageBaseOverlayInteractiveProps\n  | ImageBaseOverlayNonInteractiveProps;\n\nconst ImageBaseOverlayInteractive = ({\n  children,\n  className,\n  getRootRef,\n  overlayShown,\n  ...restProps\n}: ImageBaseOverlayInteractiveProps & { overlayShown?: boolean }) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'inside' });\n\n  return (\n    <>\n      <div\n        {...restProps}\n        tabIndex={0}\n        role=\"button\"\n        className={classNames(\n          styles.clickable,\n          (focusVisible || overlayShown) && styles.visible,\n          focusVisibleClassNames,\n          className,\n        )}\n        ref={getRootRef}\n        onKeyDown={clickByKeyboardHandler}\n        {...focusEvents}\n      >\n        {children}\n      </div>\n      {process.env.NODE_ENV === 'development' && <DevelopmentCheck>{children}</DevelopmentCheck>}\n    </>\n  );\n};\n\nconst ImageBaseOverlayNonInteractive = ({\n  className,\n  getRootRef,\n  overlayShown: overlayShownProps,\n  ...restProps\n}: ImageBaseOverlayNonInteractiveProps & { overlayShown?: boolean }) => {\n  const rootRef = useExternRef(getRootRef);\n  const { shown: overlayShown, onClick: onOverlayClick } = useNonInteractiveOverlayProps(rootRef);\n\n  return (\n    <div\n      {...restProps}\n      ref={rootRef}\n      className={classNames((overlayShown || overlayShownProps) && styles.visible, className)}\n      onClick={onOverlayClick}\n    />\n  );\n};\n\n/**\n * Оверлей над картинкой.\n */\nexport const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const colorScheme = useColorScheme();\n\n  const theme = themeProp ?? colorScheme;\n\n  const commonClassNames = classNames(\n    styles.host,\n    theme === 'light' && styles.themeLight,\n    theme === 'dark' && styles.themeDark,\n    className,\n  );\n\n  const defaultVisibility = useCalculatedDefaultVisibility();\n  const visibility = visibilityProp ?? defaultVisibility;\n\n  const commonProps = {\n    className: commonClassNames,\n    overlayShown: visibility === 'always',\n  };\n\n  // Не делаем деструктуризацию пропа, потому что Typescript не вывозит\n  if (!restProps.onClick) {\n    return <ImageBaseOverlayNonInteractive {...restProps} {...commonProps} />;\n  }\n\n  return <ImageBaseOverlayInteractive {...restProps} {...commonProps} />;\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["React","classNames","useColorScheme","useExternRef","useFocusVisible","useFocusVisibleClassName","clickByKeyboardHandler","ImageBaseContext","validateOverlayIcon","useCalculatedDefaultVisibility","useNonInteractiveOverlayProps","styles","DevelopmentCheck","children","size","useContext","process","env","NODE_ENV","name","value","ImageBaseOverlayInteractive","className","getRootRef","overlayShown","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","div","tabIndex","role","clickable","visible","ref","onKeyDown","ImageBaseOverlayNonInteractive","overlayShownProps","rootRef","shown","onClick","onOverlayClick","ImageBaseOverlay","theme","themeProp","visibility","visibilityProp","colorScheme","commonClassNames","host","themeLight","themeDark","defaultVisibility","commonProps","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,cAAc,QAAQ,mCAAgC;AAC/D,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SAASC,sBAAsB,QAAQ,wBAAqB;AAC5D,SAASC,gBAAgB,QAAQ,gBAAa;AAC9C,SAASC,mBAAmB,QAAQ,mBAAgB;AACpD,SAASC,8BAA8B,EAAEC,6BAA6B,QAAQ,aAAU;AAKxF,OAAOC,YAAY,gCAAgC;AAEnD,SAASC,iBAAiB,EAAEC,QAAQ,EAAsD;IACxF,MAAM,EAAEC,IAAI,EAAE,GAAGd,MAAMe,UAAU,CAACR;IAElC,IAAIS,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIL,UAAU;YACZL,oBAAoBM,MAAM;gBAAEK,MAAM;gBAAYC,OAAOP;YAAS;QAChE;IACF;IAEA,OAAO;AACT;AAMA,MAAMQ,8BAA8B,CAAC,EACnCR,QAAQ,EACRS,SAAS,EACTC,UAAU,EACVC,YAAY,EACZ,GAAGC,WAC2D;IAC9D,MAAM,EAAEC,YAAY,EAAE,GAAGC,aAAa,GAAGvB;IACzC,MAAMwB,yBAAyBvB,yBAAyB;QAAEqB;QAAcG,MAAM;IAAS;IAEvF,qBACE;;0BACE,KAACC;gBACE,GAAGL,SAAS;gBACbM,UAAU;gBACVC,MAAK;gBACLV,WAAWrB,WACTU,OAAOsB,SAAS,EAChB,AAACP,CAAAA,gBAAgBF,YAAW,KAAMb,OAAOuB,OAAO,EAChDN,wBACAN;gBAEFa,KAAKZ;gBACLa,WAAW9B;gBACV,GAAGqB,WAAW;0BAEdd;;YAEFG,QAAQC,GAAG,CAACC,QAAQ,KAAK,+BAAiB,KAACN;0BAAkBC;;;;AAGpE;AAEA,MAAMwB,iCAAiC,CAAC,EACtCf,SAAS,EACTC,UAAU,EACVC,cAAcc,iBAAiB,EAC/B,GAAGb,WAC8D;IACjE,MAAMc,UAAUpC,aAAaoB;IAC7B,MAAM,EAAEiB,OAAOhB,YAAY,EAAEiB,SAASC,cAAc,EAAE,GAAGhC,8BAA8B6B;IAEvF,qBACE,KAACT;QACE,GAAGL,SAAS;QACbU,KAAKI;QACLjB,WAAWrB,WAAW,AAACuB,CAAAA,gBAAgBc,iBAAgB,KAAM3B,OAAOuB,OAAO,EAAEZ;QAC7EmB,SAASC;;AAGf;AAEA;;CAEC,GACD,OAAO,MAAMC,mBAAoD,CAAC,EAChErB,SAAS,EACTsB,OAAOC,SAAS,EAChBC,YAAYC,cAAc,EAC1B,GAAGtB,WACmB;IACtB,MAAMuB,cAAc9C;IAEpB,MAAM0C,QAAQC,aAAaG;IAE3B,MAAMC,mBAAmBhD,WACvBU,OAAOuC,IAAI,EACXN,UAAU,WAAWjC,OAAOwC,UAAU,EACtCP,UAAU,UAAUjC,OAAOyC,SAAS,EACpC9B;IAGF,MAAM+B,oBAAoB5C;IAC1B,MAAMqC,aAAaC,kBAAkBM;IAErC,MAAMC,cAAc;QAClBhC,WAAW2B;QACXzB,cAAcsB,eAAe;IAC/B;IAEA,qEAAqE;IACrE,IAAI,CAACrB,UAAUgB,OAAO,EAAE;QACtB,qBAAO,KAACJ;YAAgC,GAAGZ,SAAS;YAAG,GAAG6B,WAAW;;IACvE;IAEA,qBAAO,KAACjC;QAA6B,GAAGI,SAAS;QAAG,GAAG6B,WAAW;;AACpE,EAAE;AAEFX,iBAAiBY,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useColorScheme } from '../../../hooks/useColorScheme';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { clickByKeyboardHandler } from '../../../lib/utils';\nimport { ImageBaseContext } from '../context';\nimport { validateOverlayIcon } from '../validators';\nimport { useCalculatedDefaultVisibility, useNonInteractiveOverlayProps } from './hooks';\nimport type {\n  ImageBaseOverlayInteractiveProps,\n  ImageBaseOverlayNonInteractiveProps,\n} from './types';\nimport styles from './ImageBaseOverlay.module.css';\n\nfunction DevelopmentCheck({ children }: Pick<ImageBaseOverlayInteractiveProps, 'children'>) {\n  const { size } = React.useContext(ImageBaseContext);\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return null;\n}\n\nexport type ImageBaseOverlayProps =\n  | ImageBaseOverlayInteractiveProps\n  | ImageBaseOverlayNonInteractiveProps;\n\nconst ImageBaseOverlayInteractive = ({\n  children,\n  className,\n  getRootRef,\n  overlayShown,\n  ...restProps\n}: ImageBaseOverlayInteractiveProps & { overlayShown?: boolean }) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'inside' });\n\n  return (\n    <>\n      <div\n        {...restProps}\n        tabIndex={0}\n        role=\"button\"\n        className={classNames(\n          styles.clickable,\n          (focusVisible || overlayShown) && styles.visible,\n          focusVisibleClassNames,\n          className,\n        )}\n        ref={getRootRef}\n        onKeyDown={clickByKeyboardHandler}\n        {...focusEvents}\n      >\n        {children}\n      </div>\n      {process.env.NODE_ENV === 'development' && <DevelopmentCheck>{children}</DevelopmentCheck>}\n    </>\n  );\n};\n\nconst ImageBaseOverlayNonInteractive = ({\n  className,\n  getRootRef,\n  overlayShown: overlayShownProps,\n  ...restProps\n}: ImageBaseOverlayNonInteractiveProps & { overlayShown?: boolean }) => {\n  const rootRef = useExternRef(getRootRef);\n  const { shown: overlayShown, onClick: onOverlayClick } = useNonInteractiveOverlayProps(rootRef);\n\n  return (\n    <div\n      {...restProps}\n      ref={rootRef}\n      className={classNames((overlayShown || overlayShownProps) && styles.visible, className)}\n      onClick={onOverlayClick}\n    />\n  );\n};\n\n/**\n * Оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const colorScheme = useColorScheme();\n\n  const theme = themeProp ?? colorScheme;\n\n  const commonClassNames = classNames(\n    styles.host,\n    theme === 'light' && styles.themeLight,\n    theme === 'dark' && styles.themeDark,\n    className,\n  );\n\n  const defaultVisibility = useCalculatedDefaultVisibility();\n  const visibility = visibilityProp ?? defaultVisibility;\n\n  const commonProps = {\n    className: commonClassNames,\n    overlayShown: visibility === 'always',\n  };\n\n  // Не делаем деструктуризацию пропа, потому что Typescript не вывозит\n  if (!restProps.onClick) {\n    return <ImageBaseOverlayNonInteractive {...restProps} {...commonProps} />;\n  }\n\n  return <ImageBaseOverlayInteractive {...restProps} {...commonProps} />;\n};\n"],"names":["React","classNames","useColorScheme","useExternRef","useFocusVisible","useFocusVisibleClassName","clickByKeyboardHandler","ImageBaseContext","validateOverlayIcon","useCalculatedDefaultVisibility","useNonInteractiveOverlayProps","styles","DevelopmentCheck","children","size","useContext","process","env","NODE_ENV","name","value","ImageBaseOverlayInteractive","className","getRootRef","overlayShown","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","div","tabIndex","role","clickable","visible","ref","onKeyDown","ImageBaseOverlayNonInteractive","overlayShownProps","rootRef","shown","onClick","onOverlayClick","ImageBaseOverlay","theme","themeProp","visibility","visibilityProp","colorScheme","commonClassNames","host","themeLight","themeDark","defaultVisibility","commonProps"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,cAAc,QAAQ,mCAAgC;AAC/D,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SAASC,sBAAsB,QAAQ,wBAAqB;AAC5D,SAASC,gBAAgB,QAAQ,gBAAa;AAC9C,SAASC,mBAAmB,QAAQ,mBAAgB;AACpD,SAASC,8BAA8B,EAAEC,6BAA6B,QAAQ,aAAU;AAKxF,OAAOC,YAAY,gCAAgC;AAEnD,SAASC,iBAAiB,EAAEC,QAAQ,EAAsD;IACxF,MAAM,EAAEC,IAAI,EAAE,GAAGd,MAAMe,UAAU,CAACR;IAElC,IAAIS,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIL,UAAU;YACZL,oBAAoBM,MAAM;gBAAEK,MAAM;gBAAYC,OAAOP;YAAS;QAChE;IACF;IAEA,OAAO;AACT;AAMA,MAAMQ,8BAA8B,CAAC,EACnCR,QAAQ,EACRS,SAAS,EACTC,UAAU,EACVC,YAAY,EACZ,GAAGC,WAC2D;IAC9D,MAAM,EAAEC,YAAY,EAAE,GAAGC,aAAa,GAAGvB;IACzC,MAAMwB,yBAAyBvB,yBAAyB;QAAEqB;QAAcG,MAAM;IAAS;IAEvF,qBACE;;0BACE,KAACC;gBACE,GAAGL,SAAS;gBACbM,UAAU;gBACVC,MAAK;gBACLV,WAAWrB,WACTU,OAAOsB,SAAS,EAChB,AAACP,CAAAA,gBAAgBF,YAAW,KAAMb,OAAOuB,OAAO,EAChDN,wBACAN;gBAEFa,KAAKZ;gBACLa,WAAW9B;gBACV,GAAGqB,WAAW;0BAEdd;;YAEFG,QAAQC,GAAG,CAACC,QAAQ,KAAK,+BAAiB,KAACN;0BAAkBC;;;;AAGpE;AAEA,MAAMwB,iCAAiC,CAAC,EACtCf,SAAS,EACTC,UAAU,EACVC,cAAcc,iBAAiB,EAC/B,GAAGb,WAC8D;IACjE,MAAMc,UAAUpC,aAAaoB;IAC7B,MAAM,EAAEiB,OAAOhB,YAAY,EAAEiB,SAASC,cAAc,EAAE,GAAGhC,8BAA8B6B;IAEvF,qBACE,KAACT;QACE,GAAGL,SAAS;QACbU,KAAKI;QACLjB,WAAWrB,WAAW,AAACuB,CAAAA,gBAAgBc,iBAAgB,KAAM3B,OAAOuB,OAAO,EAAEZ;QAC7EmB,SAASC;;AAGf;AAEA;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BrB,SAAS,EACTsB,OAAOC,SAAS,EAChBC,YAAYC,cAAc,EAC1B,GAAGtB,WACmB;IACtB,MAAMuB,cAAc9C;IAEpB,MAAM0C,QAAQC,aAAaG;IAE3B,MAAMC,mBAAmBhD,WACvBU,OAAOuC,IAAI,EACXN,UAAU,WAAWjC,OAAOwC,UAAU,EACtCP,UAAU,UAAUjC,OAAOyC,SAAS,EACpC9B;IAGF,MAAM+B,oBAAoB5C;IAC1B,MAAMqC,aAAaC,kBAAkBM;IAErC,MAAMC,cAAc;QAClBhC,WAAW2B;QACXzB,cAAcsB,eAAe;IAC/B;IAEA,qEAAqE;IACrE,IAAI,CAACrB,UAAUgB,OAAO,EAAE;QACtB,qBAAO,KAACJ;YAAgC,GAAGZ,SAAS;YAAG,GAAG6B,WAAW;;IACvE;IAEA,qBAAO,KAACjC;QAA6B,GAAGI,SAAS;QAAG,GAAG6B,WAAW;;AACpE,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { HasRootRef } from '../../../types';\nimport type { ImageBaseExpectedIconProps } from '../types';\n\nexport interface ImageBaseOverlayCommonProps\n  extends React.AriaAttributes,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт тему оформления.\n   *\n   * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n   */\n  theme?: 'dark' | 'light';\n  /**\n   * Определяет каким образом должен показываться оверлей.\n   *\n   * - `\"on-hover\"` – на наведение указателя мыши.\n   * - `\"always\"` – всегда показывать.\n   *\n   * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n   * > Определение просиходит с помощью двойного рендера, так что на устройствах без мыши\n   * > оверлей покажется не раньше второго рендера.\n   * > Если это критично (например при SSR), то старайтесь явно указывать значение `visibility`, либо используйте\n   * > [AdaptivityProvider](#/AdaptivityProvider) для того, чтобы явно определить `hasPointer`.\n   */\n  visibility?: 'on-hover' | 'always';\n  className?: string;\n}\n\nexport interface ImageBaseOverlayInteractiveProps extends ImageBaseOverlayCommonProps {\n  /**\n   * Обработчик взаимодействия с элементом.\n   */\n  onClick: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Принимает иконку.\n   *\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\nexport interface ImageBaseOverlayNonInteractiveProps extends ImageBaseOverlayCommonProps {\n  /**\n   * По умолчанию сам компонент является интерактивным элементом. Передав значение равное `'undefined'` или не передав этот параметр вовсе, можно отключить\n   * такое поведение, что дает возможность передавать отдельные интерактивные элементы в `children`.\n   */\n  onClick?: undefined;\n  children: React.ReactNode;\n}\n"],"names":[],"mappings":"AAiDA,WAOC"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { HasRootRef } from '../../../types';\nimport type { ImageBaseExpectedIconProps } from '../types';\n\nexport interface ImageBaseOverlayCommonProps\n  extends React.AriaAttributes,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт тему оформления.\n   *\n   * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n   */\n  theme?: 'dark' | 'light';\n  /**\n   * Определяет каким образом должен показываться оверлей.\n   *\n   * - `\"on-hover\"` – на наведение указателя мыши.\n   * - `\"always\"` – всегда показывать.\n   *\n   * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n   * > Определение просиходит с помощью двойного рендера, так что на устройствах без мыши\n   * > оверлей покажется не раньше второго рендера.\n   * > Если это критично (например при SSR), то старайтесь явно указывать значение `visibility`, либо используйте\n   * > [AdaptivityProvider](#/AdaptivityProvider) для того, чтобы явно определить `hasPointer`.\n   */\n  visibility?: 'on-hover' | 'always';\n  /**\n   * `className` для компонента.\n   */\n  className?: string;\n}\n\nexport interface ImageBaseOverlayInteractiveProps extends ImageBaseOverlayCommonProps {\n  /**\n   * Обработчик взаимодействия с элементом.\n   */\n  onClick: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Принимает иконку.\n   *\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\nexport interface ImageBaseOverlayNonInteractiveProps extends ImageBaseOverlayCommonProps {\n  /**\n   * По умолчанию сам компонент является интерактивным элементом. Передав значение равное `'undefined'` или не передав этот параметр вовсе, можно отключить\n   * такое поведение, что дает возможность передавать отдельные интерактивные элементы в `children`.\n   */\n  onClick?: undefined;\n  /**\n   * Содержимое.\n   */\n  children: React.ReactNode;\n}\n"],"names":[],"mappings":"AAoDA,WAUC"}

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

@@ -1,7 +1,7 @@
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
  *
- * @param imageSize наименьшая сторона изображения
+ * @param imageSize Наименьшая сторона изображения.
  */ export function getFallbackIconSizeByImageBaseSize(imageSize) {
     if (imageSize <= 20) {
         return 12;
@@ -20,7 +20,7 @@ getFallbackIconSizeByImageBaseSize.MAX_SIZE = 36;
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
  *
- * @param imageSize наименьшая сторона изображения
+ * @param imageSize Наименьшая сторона изображения.
  */ export function getBadgeIconSizeByImageBaseSize(imageSize) {
     if (imageSize <= 36) {
         return 12;
@@ -35,7 +35,7 @@ getBadgeIconSizeByImageBaseSize.MAX_SIZE = 24;
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
  *
- * @param imageSize наименьшая сторона изображения
+ * @param imageSize Наименьшая сторона изображения.
  */ export function getOverlayIconSizeByImageBaseSize(imageSize) {
     if (imageSize <= 20) {
         return 12;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize наименьшая сторона изображения\n */\nexport function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 28) {\n    return 16;\n  } else if (imageSize > 28 && imageSize <= 32) {\n    return 20;\n  } else if (imageSize > 32 && imageSize <= 44) {\n    return 24;\n  } else if (imageSize > 44 && imageSize <= 64) {\n    return 28;\n  }\n  return getFallbackIconSizeByImageBaseSize.MAX_SIZE;\n}\nexport declare namespace getFallbackIconSizeByImageBaseSize {\n  export let MAX_SIZE: 36;\n}\n\ngetFallbackIconSizeByImageBaseSize.MAX_SIZE = 36;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize наименьшая сторона изображения\n */\nexport function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 {\n  if (imageSize <= 36) {\n    return 12;\n  } else if (imageSize > 36 && imageSize <= 48) {\n    return 16;\n  } else if (imageSize > 48 && imageSize <= 64) {\n    return 20;\n  }\n  return getBadgeIconSizeByImageBaseSize.MAX_SIZE;\n}\nexport declare namespace getBadgeIconSizeByImageBaseSize {\n  export let MAX_SIZE: 24;\n}\n\ngetBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize наименьшая сторона изображения\n */\nexport function getOverlayIconSizeByImageBaseSize(\n  imageSize: number,\n): 12 | 16 | 18 | 20 | 24 | 28 | 32 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 24) {\n    return 16;\n  } else if (imageSize > 24 && imageSize <= 28) {\n    return 18;\n  } else if (imageSize > 28 && imageSize <= 40) {\n    return 20;\n  } else if (imageSize > 40 && imageSize <= 48) {\n    return 24;\n  } else if (imageSize > 48 && imageSize <= 88) {\n    return 28;\n  }\n  return getOverlayIconSizeByImageBaseSize.MAX_SIZE;\n}\nexport declare namespace getOverlayIconSizeByImageBaseSize {\n  export let MAX_SIZE: 32;\n}\n\ngetOverlayIconSizeByImageBaseSize.MAX_SIZE = 32 as const;\n"],"names":["getFallbackIconSizeByImageBaseSize","imageSize","MAX_SIZE","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize"],"mappings":"AAAA;;;;CAIC,GACD,OAAO,SAASA,mCAAmCC,SAAiB;IAClE,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOD,mCAAmCE,QAAQ;AACpD;AAKAF,mCAAmCE,QAAQ,GAAG;AAE9C;;;;CAIC,GACD,OAAO,SAASC,gCAAgCF,SAAiB;IAC/D,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOE,gCAAgCD,QAAQ;AACjD;AAKAC,gCAAgCD,QAAQ,GAAG;AAE3C;;;;CAIC,GACD,OAAO,SAASE,kCACdH,SAAiB;IAEjB,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOG,kCAAkCF,QAAQ;AACnD;AAKAE,kCAAkCF,QAAQ,GAAG"}
+{"version":3,"sources":["../../../../src/components/ImageBase/helpers.ts"],"sourcesContent":["/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize Наименьшая сторона изображения.\n */\nexport function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 28) {\n    return 16;\n  } else if (imageSize > 28 && imageSize <= 32) {\n    return 20;\n  } else if (imageSize > 32 && imageSize <= 44) {\n    return 24;\n  } else if (imageSize > 44 && imageSize <= 64) {\n    return 28;\n  }\n  return getFallbackIconSizeByImageBaseSize.MAX_SIZE;\n}\nexport declare namespace getFallbackIconSizeByImageBaseSize {\n  export let MAX_SIZE: 36;\n}\n\ngetFallbackIconSizeByImageBaseSize.MAX_SIZE = 36;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize Наименьшая сторона изображения.\n */\nexport function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 {\n  if (imageSize <= 36) {\n    return 12;\n  } else if (imageSize > 36 && imageSize <= 48) {\n    return 16;\n  } else if (imageSize > 48 && imageSize <= 64) {\n    return 20;\n  }\n  return getBadgeIconSizeByImageBaseSize.MAX_SIZE;\n}\nexport declare namespace getBadgeIconSizeByImageBaseSize {\n  export let MAX_SIZE: 24;\n}\n\ngetBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;\n\n/**\n * Возвращает размер иконки основанный на дизайн-системы.\n *\n * @param imageSize Наименьшая сторона изображения.\n */\nexport function getOverlayIconSizeByImageBaseSize(\n  imageSize: number,\n): 12 | 16 | 18 | 20 | 24 | 28 | 32 {\n  if (imageSize <= 20) {\n    return 12;\n  } else if (imageSize > 20 && imageSize <= 24) {\n    return 16;\n  } else if (imageSize > 24 && imageSize <= 28) {\n    return 18;\n  } else if (imageSize > 28 && imageSize <= 40) {\n    return 20;\n  } else if (imageSize > 40 && imageSize <= 48) {\n    return 24;\n  } else if (imageSize > 48 && imageSize <= 88) {\n    return 28;\n  }\n  return getOverlayIconSizeByImageBaseSize.MAX_SIZE;\n}\nexport declare namespace getOverlayIconSizeByImageBaseSize {\n  export let MAX_SIZE: 32;\n}\n\ngetOverlayIconSizeByImageBaseSize.MAX_SIZE = 32 as const;\n"],"names":["getFallbackIconSizeByImageBaseSize","imageSize","MAX_SIZE","getBadgeIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize"],"mappings":"AAAA;;;;CAIC,GACD,OAAO,SAASA,mCAAmCC,SAAiB;IAClE,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOD,mCAAmCE,QAAQ;AACpD;AAKAF,mCAAmCE,QAAQ,GAAG;AAE9C;;;;CAIC,GACD,OAAO,SAASC,gCAAgCF,SAAiB;IAC/D,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOE,gCAAgCD,QAAQ;AACjD;AAKAC,gCAAgCD,QAAQ,GAAG;AAE3C;;;;CAIC,GACD,OAAO,SAASE,kCACdH,SAAiB;IAEjB,IAAIA,aAAa,IAAI;QACnB,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT,OAAO,IAAIA,YAAY,MAAMA,aAAa,IAAI;QAC5C,OAAO;IACT;IACA,OAAOG,kCAAkCF,QAAQ;AACnD;AAKAE,kCAAkCF,QAAQ,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/types.ts"],"sourcesContent":["export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96] as const;\n\nexport type ImageBaseSize = (typeof imageBaseSizes)[number];\n\nexport type ImageBaseExpectedIconProps = {\n  width?: number;\n  height?: number;\n  className?: string;\n};\n\nexport interface ImageBaseContextProps {\n  size: ImageBaseSize | number;\n  onMouseOverHandlers: VoidFunction[];\n  onMouseOutHandlers: VoidFunction[];\n}\n"],"names":["imageBaseSizes"],"mappings":"AAAA,OAAO,MAAMA,iBAAiB;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;CAAG,CAAU"}
+{"version":3,"sources":["../../../../src/components/ImageBase/types.ts"],"sourcesContent":["export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96] as const;\n\nexport type ImageBaseSize = (typeof imageBaseSizes)[number];\n\nexport type ImageBaseExpectedIconProps = {\n  /**\n   * Ширина иконки.\n   */\n  width?: number;\n  /**\n   * Высота иконки.\n   */\n  height?: number;\n  /**\n   * ClassName для иконки.\n   */\n  className?: string;\n};\n\nexport interface ImageBaseContextProps {\n  /**\n   * Размер картинки.\n   */\n  size: ImageBaseSize | number;\n  /**\n   * Обработчики события `mouseOver`.\n   */\n  onMouseOverHandlers: VoidFunction[];\n  /**\n   * Обработчики события `mouseOut`.\n   */\n  onMouseOutHandlers: VoidFunction[];\n}\n"],"names":["imageBaseSizes"],"mappings":"AAAA,OAAO,MAAMA,iBAAiB;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;CAAG,CAAU"}

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

@@ -1,13 +1,12 @@
-import { warnOnce } from "../../lib/warnOnce.js";
+/* eslint-disable jsdoc/require-jsdoc */ import { warnOnce } from "../../lib/warnOnce.js";
 import { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize } from "./helpers.js";
 import { imageBaseSizes } from "./types.js";
 /**
  * Пример,
- *
  * Icon28User -> 28
  * Icon12Circle1 -> 12
  * Icon12Circle2 -> 12
- * Icon20TextHeading1Outline -> 20
+ * Icon20TextHeading1Outline -> 20.
  */ function parseIconSizeByDisplayName(displayName) {
     if (typeof displayName !== 'string') {
         return null;
@@ -23,7 +22,7 @@ function parseIconSizeByWidthProp(width) {
     return size > 0 ? size : null;
 }
 function getElementDisplayName(element) {
-    return element.type.displayName ?? null;
+    return element.type.displayName ?? element.type.name ?? null;
 }
 function getElementWidthProp(element) {
     return element.props.width ?? null;