@vkontakte/vkui 5.7.1 → 5.7.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { ScrollArrow } 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  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(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  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && 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 = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\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          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const onscroll = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(() => {\n    if (!scrollerRef.current || !scrollOnAnyWheel) {\n      return noop;\n    }\n\n    wheelEvent.add(scrollerRef.current);\n\n    return wheelEvent.remove;\n  }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n        className,\n      )}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowLeft'],\n          )}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowRight'],\n          )}\n          onClick={scrollToRight}\n        />\n      )}\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","ScrollArrow","styles","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","className","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","remove","div","undefined","size","offsetY","direction","onClick","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { ScrollArrow } 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  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(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  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && 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 = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\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          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = 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\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);\n  React.useEffect(\n    function addScrollerRefToScrollEvent() {\n      if (!scrollerRef.current) {\n        return noop;\n      }\n\n      scrollEvent.add(scrollerRef.current);\n      return scrollEvent.remove;\n    },\n    [scrollEvent, scrollerRef],\n  );\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(\n    function addScrollerRefToWheelEvent() {\n      if (!scrollerRef.current || !scrollOnAnyWheel) {\n        return noop;\n      }\n\n      wheelEvent.add(scrollerRef.current);\n\n      return wheelEvent.remove;\n    },\n    [wheelEvent, scrollerRef, scrollOnAnyWheel],\n  );\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n        className,\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowLeft'],\n          )}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowRight'],\n          )}\n          onClick={scrollToRight}\n        />\n      )}\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","ScrollArrow","styles","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","className","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","scrollEvent","useEffect","addScrollerRefToScrollEvent","add","remove","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","addScrollerRefToWheelEvent","div","onMouseEnter","undefined","size","offsetY","direction","onClick","ref"],"mappings":"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"}

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

@@ -2,55 +2,68 @@ import * as React from 'react';
 import { ImageBase } from '../ImageBase/ImageBase';
 import { ImageBadge } from './ImageBadge/ImageBadge';
 export const IMAGE_DEFAULT_SIZE = 48;
-/**
- * @see https://vkcom.github.io/VKUI/#/Image
- */ export const Image = ({ size = IMAGE_DEFAULT_SIZE, borderRadius: borderRadiusProp = 'm', style, className, ...restProps })=>{
-    let borderRadius;
-    switch(borderRadiusProp){
+const getBorderRadiusBySize = (size, borderRadius)=>{
+    switch(borderRadius){
         case 's':
             {
                 if (size <= 32) {
-                    borderRadius = 2;
-                } else if (size <= 56) {
-                    borderRadius = 3;
+                    return 2;
                 }
-                borderRadius = 4;
-                break;
+                if (size <= 56) {
+                    return 3;
+                }
+                return 4;
             }
         case 'm':
             {
                 if (size <= 32) {
-                    borderRadius = 3;
-                } else if (size <= 48) {
-                    borderRadius = 4;
-                } else if (size <= 72) {
-                    borderRadius = 6;
-                } else if (size <= 80) {
-                    borderRadius = 8;
+                    return 3;
+                }
+                if (size <= 48) {
+                    return 4;
                 }
-                borderRadius = 10;
-                break;
+                if (size <= 72) {
+                    return 6;
+                }
+                if (size <= 80) {
+                    return 8;
+                }
+                return 10;
             }
         case 'l':
             {
                 if (size <= 16) {
-                    borderRadius = 4;
-                } else if (size <= 20) {
-                    borderRadius = 5;
-                } else if (size <= 32) {
-                    borderRadius = 6;
-                } else if (size <= 40) {
-                    borderRadius = 8;
-                } else if (size <= 48) {
-                    borderRadius = 10;
-                } else if (size <= 56) {
-                    borderRadius = 12;
-                } else if (size <= 64) {
-                    borderRadius = 14;
+                    return 4;
+                }
+                if (size <= 20) {
+                    return 5;
+                }
+                if (size <= 32) {
+                    return 6;
+                }
+                if (size <= 40) {
+                    return 8;
+                }
+                if (size <= 48) {
+                    return 10;
+                }
+                if (size <= 56) {
+                    return 12;
+                }
+                if (size <= 64) {
+                    return 14;
                 }
-                borderRadius = 16;
+                return 16;
             }
     }
+};
+/**
+ * @see https://vkcom.github.io/VKUI/#/Image
+ */ export const Image = ({ size = IMAGE_DEFAULT_SIZE, borderRadius: borderRadiusProp = 'm', style, className, ...restProps })=>{
+    const borderRadius = React.useMemo(()=>getBorderRadiusBySize(size, borderRadiusProp), [
+        size,
+        borderRadiusProp
+    ]);
     return /*#__PURE__*/ React.createElement(ImageBase, {
         ...restProps,
         size: size,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: 's' | 'l' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = 'm',\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  let borderRadius: number;\n\n  switch (borderRadiusProp) {\n    case 's': {\n      if (size <= 32) {\n        borderRadius = 2;\n      } else if (size <= 56) {\n        borderRadius = 3;\n      }\n      borderRadius = 4;\n      break;\n    }\n    case 'm': {\n      if (size <= 32) {\n        borderRadius = 3;\n      } else if (size <= 48) {\n        borderRadius = 4;\n      } else if (size <= 72) {\n        borderRadius = 6;\n      } else if (size <= 80) {\n        borderRadius = 8;\n      }\n      borderRadius = 10;\n      break;\n    }\n    case 'l': {\n      if (size <= 16) {\n        borderRadius = 4;\n      } else if (size <= 20) {\n        borderRadius = 5;\n      } else if (size <= 32) {\n        borderRadius = 6;\n      } else if (size <= 40) {\n        borderRadius = 8;\n      } else if (size <= 48) {\n        borderRadius = 10;\n      } else if (size <= 56) {\n        borderRadius = 12;\n      } else if (size <= 64) {\n        borderRadius = 14;\n      }\n      borderRadius = 16;\n    }\n  }\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={className}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"names":["React","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","Image","size","borderRadius","borderRadiusProp","style","className","restProps","Badge","Overlay"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,UAAU,QAA8B,0BAA0B;AAI3E,OAAO,MAAMC,qBAAqB,GAAG;AASrC;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EACpBC,OAAOF,kBAAkB,EACzBG,cAAcC,mBAAmB,GAAG,EACpCC,KAAK,EACLC,SAAS,EACT,GAAGC,WACQ;IACX,IAAIJ;IAEJ,OAAQC;QACN,KAAK;YAAK;gBACR,IAAIF,QAAQ,IAAI;oBACdC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB;gBACAA,eAAe;gBACf;YACF;QACA,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACdC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB;gBACAA,eAAe;gBACf;YACF;QACA,KAAK;YAAK;gBACR,IAAID,QAAQ,IAAI;oBACdC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB,OAAO,IAAID,QAAQ,IAAI;oBACrBC,eAAe;gBACjB;gBACAA,eAAe;YACjB;IACF;IAEA,qBACE,oBAACL;QACE,GAAGS,SAAS;QACbL,MAAMA;QACNG,OAAO;YAAE,GAAGA,KAAK;YAAEF;QAAa;QAChCG,WAAWA;;AAGjB,EAAE;AAEFL,MAAMO,KAAK,GAAGT;AAEdE,MAAMQ,OAAO,GAAGX,UAAUW,OAAO"}
+{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';\n\nexport type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };\n\nexport const IMAGE_DEFAULT_SIZE = 48;\n\nexport interface ImageProps extends Omit<ImageBaseProps, 'badge'> {\n  /**\n   * Размер закругления.\n   */\n  borderRadius?: '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\n/**\n * @see https://vkcom.github.io/VKUI/#/Image\n */\nexport const Image = ({\n  size = IMAGE_DEFAULT_SIZE,\n  borderRadius: borderRadiusProp = 'm',\n  style,\n  className,\n  ...restProps\n}: ImageProps) => {\n  const borderRadius = React.useMemo(\n    () => getBorderRadiusBySize(size, borderRadiusProp),\n    [size, borderRadiusProp],\n  );\n\n  return (\n    <ImageBase\n      {...restProps}\n      size={size}\n      style={{ ...style, borderRadius }}\n      className={className}\n    />\n  );\n};\n\nImage.Badge = ImageBadge;\n\nImage.Overlay = ImageBase.Overlay;\n"],"names":["React","ImageBase","ImageBadge","IMAGE_DEFAULT_SIZE","getBorderRadiusBySize","size","borderRadius","Image","borderRadiusProp","style","className","restProps","useMemo","Badge","Overlay"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAyD,yBAAyB;AACpG,SAASC,UAAU,QAA8B,0BAA0B;AAI3E,OAAO,MAAMC,qBAAqB,GAAG;AASrC,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;;CAEC,GACD,OAAO,MAAME,QAAQ,CAAC,EACpBF,OAAOF,kBAAkB,EACzBG,cAAcE,mBAAmB,GAAG,EACpCC,KAAK,EACLC,SAAS,EACT,GAAGC,WACQ;IACX,MAAML,eAAeN,MAAMY,OAAO,CAChC,IAAMR,sBAAsBC,MAAMG,mBAClC;QAACH;QAAMG;KAAiB;IAG1B,qBACE,oBAACP;QACE,GAAGU,SAAS;QACbN,MAAMA;QACNI,OAAO;YAAE,GAAGA,KAAK;YAAEH;QAAa;QAChCI,WAAWA;;AAGjB,EAAE;AAEFH,MAAMM,KAAK,GAAGX;AAEdK,MAAMO,OAAO,GAAGb,UAAUa,OAAO"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useExternRef } from '../../hooks/useExternRef';
 import { ImageBaseBadge } from './ImageBaseBadge/ImageBaseBadge';
 import { ImageBaseOverlay } from './ImageBaseOverlay/ImageBaseOverlay';
 import { ImageBaseContext } from './context';
@@ -25,6 +26,9 @@ export { ImageBaseContext };
         }
     }
     const handleImageLoad = (event)=>{
+        if (loaded) {
+            return;
+        }
         setLoaded(true);
         setFailed(false);
         onLoad?.(event);
@@ -34,6 +38,21 @@ export { ImageBaseContext };
         setFailed(true);
         onError?.(event);
     };
+    const imgRef = useExternRef(getRef);
+    const isOnLoadStatusCheckedRef = React.useRef(false);
+    React.useEffect(function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {
+        if (isOnLoadStatusCheckedRef.current) {
+            return;
+        }
+        isOnLoadStatusCheckedRef.current = true;
+        if (imgRef.current && imgRef.current.complete && !loaded) {
+            const event = new Event('load');
+            imgRef.current.dispatchEvent(event);
+        }
+    }, [
+        imgRef,
+        loaded
+    ]);
     const sizeClassName = (()=>{
         switch(size){
             case 28:
@@ -66,7 +85,7 @@ export { ImageBaseContext };
         "aria-label": ariaLabel,
         onClick: onClick
     }, hasSrc && /*#__PURE__*/ React.createElement("img", {
-        ref: getRef,
+        ref: imgRef,
         alt: alt,
         className: styles['ImageBase__img'],
         crossOrigin: crossOrigin,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\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  withBorder?: 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/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    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 sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","role","aria-label","img","aria-hidden","Badge","Overlay"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\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  withBorder?: 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/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  const sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","useExternRef","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","sizeClassName","Provider","div","ref","role","aria-label","img","aria-hidden","Badge","Overlay"],"mappings":"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"}

package/dist/cssm/components/MiniInfoCell/MiniInfoCell.js

@@ -16,7 +16,7 @@ import styles from './MiniInfoCell.module.css';
         accent: styles['MiniInfoCell--mode-accent'],
         more: styles['MiniInfoCell--mode-more']
     })[mode], className);
-    const cellContent = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
+    const cellContent = /*#__PURE__*/ React.createElement(React.Fragment, null, hasReactNode(before) && /*#__PURE__*/ React.createElement("span", {
         className: styles['MiniInfoCell__before']
     }, before), /*#__PURE__*/ React.createElement("div", {
         className: styles['MiniInfoCell__middle']

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './MiniInfoCell.module.css';\n\nexport interface MiniInfoCellProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Иконка слева.<br />\n   * Рекомендуется использовать иконки размера 20.\n   */\n  before: React.ReactNode;\n\n  /**\n   * Содержимое справа.<br />\n   * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Тип ячейки:\n   *\n   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n   */\n  mode?: 'base' | 'accent' | 'add' | 'more';\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: 'nowrap' | 'short' | 'full';\n\n  /**\n   * Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  children,\n  mode = 'base',\n  textWrap = 'nowrap',\n  expandable = false,\n  className,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const cellClasses = classNames(\n    styles['MiniInfoCell'],\n    {\n      nowrap: styles['MiniInfoCell--textWrap-nowrap'],\n      full: styles['MiniInfoCell--textWrap-full'],\n      short: styles['MiniInfoCell--textWrap-short'],\n    }[textWrap],\n    mode !== 'base' &&\n      {\n        add: styles['MiniInfoCell--mode-add'],\n        accent: styles['MiniInfoCell--mode-accent'],\n        more: styles['MiniInfoCell--mode-more'],\n      }[mode],\n    className,\n  );\n\n  const cellContent = (\n    <React.Fragment>\n      <span className={styles['MiniInfoCell__before']}>{before}</span>\n      <div className={styles['MiniInfoCell__middle']}>\n        <Paragraph\n          className={styles['MiniInfoCell__content']}\n          weight={mode === 'more' ? '2' : undefined}\n        >\n          {children}\n        </Paragraph>\n        {expandable && <Icon16Chevron />}\n      </div>\n      {hasReactNode(after) && <span className={styles['MiniInfoCell__after']}>{after}</span>}\n    </React.Fragment>\n  );\n\n  return restProps.onClick ? (\n    <Tappable Component=\"div\" role=\"button\" {...restProps} className={cellClasses}>\n      {cellContent}\n    </Tappable>\n  ) : (\n    <div {...restProps} className={cellClasses}>\n      {cellContent}\n    </div>\n  );\n};\n"],"names":["React","Icon16Chevron","classNames","hasReactNode","Tappable","Paragraph","styles","MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","nowrap","full","short","add","accent","more","cellContent","Fragment","span","div","weight","undefined","onClick","Component","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,OAAOC,YAAY,4BAA4B;AAwC/C;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAC3BC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBC,aAAa,KAAK,EAClBC,SAAS,EACT,GAAGC,WACe;IAClB,MAAMC,cAAcd,WAClBI,MAAM,CAAC,eAAe,EACtB;QACEW,QAAQX,MAAM,CAAC,gCAAgC;QAC/CY,MAAMZ,MAAM,CAAC,8BAA8B;QAC3Ca,OAAOb,MAAM,CAAC,+BAA+B;IAC/C,CAAC,CAACM,SAAS,EACXD,SAAS,UACP,CAAA;QACES,KAAKd,MAAM,CAAC,yBAAyB;QACrCe,QAAQf,MAAM,CAAC,4BAA4B;QAC3CgB,MAAMhB,MAAM,CAAC,0BAA0B;IACzC,CAAA,CAAC,CAACK,KAAK,EACTG;IAGF,MAAMS,4BACJ,oBAACvB,MAAMwB,QAAQ,sBACb,oBAACC;QAAKX,WAAWR,MAAM,CAAC,uBAAuB;OAAGE,uBAClD,oBAACkB;QAAIZ,WAAWR,MAAM,CAAC,uBAAuB;qBAC5C,oBAACD;QACCS,WAAWR,MAAM,CAAC,wBAAwB;QAC1CqB,QAAQhB,SAAS,SAAS,MAAMiB;OAE/BlB,WAEFG,4BAAc,oBAACZ,uBAEjBE,aAAaM,wBAAU,oBAACgB;QAAKX,WAAWR,MAAM,CAAC,sBAAsB;OAAGG;IAI7E,OAAOM,UAAUc,OAAO,iBACtB,oBAACzB;QAAS0B,WAAU;QAAMC,MAAK;QAAU,GAAGhB,SAAS;QAAED,WAAWE;OAC/DO,6BAGH,oBAACG;QAAK,GAAGX,SAAS;QAAED,WAAWE;OAC5BO;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './MiniInfoCell.module.css';\n\nexport interface MiniInfoCellProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Иконка слева.<br />\n   * Рекомендуется использовать иконки размера 20.\n   */\n  before: React.ReactNode;\n\n  /**\n   * Содержимое справа.<br />\n   * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Тип ячейки:\n   *\n   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n   */\n  mode?: 'base' | 'accent' | 'add' | 'more';\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: 'nowrap' | 'short' | 'full';\n\n  /**\n   * Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  children,\n  mode = 'base',\n  textWrap = 'nowrap',\n  expandable = false,\n  className,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const cellClasses = classNames(\n    styles['MiniInfoCell'],\n    {\n      nowrap: styles['MiniInfoCell--textWrap-nowrap'],\n      full: styles['MiniInfoCell--textWrap-full'],\n      short: styles['MiniInfoCell--textWrap-short'],\n    }[textWrap],\n    mode !== 'base' &&\n      {\n        add: styles['MiniInfoCell--mode-add'],\n        accent: styles['MiniInfoCell--mode-accent'],\n        more: styles['MiniInfoCell--mode-more'],\n      }[mode],\n    className,\n  );\n\n  const cellContent = (\n    <React.Fragment>\n      {hasReactNode(before) && <span className={styles['MiniInfoCell__before']}>{before}</span>}\n      <div className={styles['MiniInfoCell__middle']}>\n        <Paragraph\n          className={styles['MiniInfoCell__content']}\n          weight={mode === 'more' ? '2' : undefined}\n        >\n          {children}\n        </Paragraph>\n        {expandable && <Icon16Chevron />}\n      </div>\n      {hasReactNode(after) && <span className={styles['MiniInfoCell__after']}>{after}</span>}\n    </React.Fragment>\n  );\n\n  return restProps.onClick ? (\n    <Tappable Component=\"div\" role=\"button\" {...restProps} className={cellClasses}>\n      {cellContent}\n    </Tappable>\n  ) : (\n    <div {...restProps} className={cellClasses}>\n      {cellContent}\n    </div>\n  );\n};\n"],"names":["React","Icon16Chevron","classNames","hasReactNode","Tappable","Paragraph","styles","MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","nowrap","full","short","add","accent","more","cellContent","Fragment","span","div","weight","undefined","onClick","Component","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,OAAOC,YAAY,4BAA4B;AAwC/C;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAC3BC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBC,aAAa,KAAK,EAClBC,SAAS,EACT,GAAGC,WACe;IAClB,MAAMC,cAAcd,WAClBI,MAAM,CAAC,eAAe,EACtB;QACEW,QAAQX,MAAM,CAAC,gCAAgC;QAC/CY,MAAMZ,MAAM,CAAC,8BAA8B;QAC3Ca,OAAOb,MAAM,CAAC,+BAA+B;IAC/C,CAAC,CAACM,SAAS,EACXD,SAAS,UACP,CAAA;QACES,KAAKd,MAAM,CAAC,yBAAyB;QACrCe,QAAQf,MAAM,CAAC,4BAA4B;QAC3CgB,MAAMhB,MAAM,CAAC,0BAA0B;IACzC,CAAA,CAAC,CAACK,KAAK,EACTG;IAGF,MAAMS,4BACJ,oBAACvB,MAAMwB,QAAQ,QACZrB,aAAaK,yBAAW,oBAACiB;QAAKX,WAAWR,MAAM,CAAC,uBAAuB;OAAGE,uBAC3E,oBAACkB;QAAIZ,WAAWR,MAAM,CAAC,uBAAuB;qBAC5C,oBAACD;QACCS,WAAWR,MAAM,CAAC,wBAAwB;QAC1CqB,QAAQhB,SAAS,SAAS,MAAMiB;OAE/BlB,WAEFG,4BAAc,oBAACZ,uBAEjBE,aAAaM,wBAAU,oBAACgB;QAAKX,WAAWR,MAAM,CAAC,sBAAsB;OAAGG;IAI7E,OAAOM,UAAUc,OAAO,iBACtB,oBAACzB;QAAS0B,WAAU;QAAMC,MAAK;QAAU,GAAGhB,SAAS;QAAED,WAAWE;OAC/DO,6BAGH,oBAACG;QAAK,GAAGX,SAAS;QAAED,WAAWE;OAC5BO;AAGP,EAAE"}

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

@@ -123,10 +123,6 @@
   height: 100%;
 }
 
-.ModalPage__content-in {
-  position: relative;
-}
-
 .ModalPage__content-in::after {
   content: '';
   height: var(--vkui_internal--safe_area_inset_bottom);

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

@@ -16,7 +16,7 @@
       -ms-user-select: none;
           user-select: none;
   transition: opacity 167ms ease-out;
-  animation: vkui-animation-fadeIn 0.32s ease;
+  animation: animation-fade-in 0.32s ease;
 }
 
 .ModalRoot--touched .ModalRoot__mask {
@@ -54,7 +54,7 @@
   box-sizing: border-box;
 }
 
-@keyframes vkui-animation-fadeIn {
+@keyframes animation-fade-in {
   from {
     opacity: 0;
   }

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

@@ -9,10 +9,12 @@
 
 .PanelHeader:not(.PanelHeader--vis):not(.PanelHeader--fixed) {
   height: 0;
+  /* см. https://github.com/VKCOM/VKUI/issues/5571 */
+  z-index: var(--vkui_internal--z_index_panel_header);
 }
 
 .PanelHeader__fixed {
-  z-index: var(--vkui_internal--z_index_panel_header_fixed);
+  z-index: var(--vkui_internal--z_index_panel_header);
 }
 
 .PanelHeader__in {
@@ -243,7 +245,7 @@
 
 .PanelHeader--vkcom {
   position: relative;
-  z-index: var(--vkui_internal--z_index_panel_header_fixed);
+  z-index: var(--vkui_internal--z_index_panel_header);
 }
 
 .PanelHeader--vkcom.PanelHeader--sizeX-regular:not(:global(.vkuiInternalModalPageHeader__in)):not(

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

@@ -50,20 +50,20 @@
 }
 
 .PanelHeaderContext--opened .PanelHeaderContext__fade {
-  animation: vkui-animation-panelheadercontext-fade-in 0.2s ease;
+  animation: animation-panelheadercontext-fade-in 0.2s ease;
 }
 
 .PanelHeaderContext--closing .PanelHeaderContext__fade {
-  animation: vkui-animation-panelheadercontext-fade-out 0.2s ease;
+  animation: animation-panelheadercontext-fade-out 0.2s ease;
 }
 
 .PanelHeaderContext--opened .PanelHeaderContext__in {
   pointer-events: auto;
-  animation: vkui-animation-panelheadercontext-translate-in 0.2s ease;
+  animation: animation-panelheadercontext-translate-in 0.2s ease;
 }
 
 .PanelHeaderContext--closing .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-out 0.2s ease;
+  animation: animation-panelheadercontext-translate-out 0.2s ease;
 }
 
 .PanelHeaderContext__content {
@@ -128,7 +128,7 @@
   Animations
  */
 
-@keyframes vkui-animation-panelheadercontext-translate-in {
+@keyframes animation-panelheadercontext-translate-in {
   from {
     transform: translateY(-100%);
   }
@@ -138,7 +138,7 @@
   }
 }
 
-@keyframes vkui-animation-panelheadercontext-translate-out {
+@keyframes animation-panelheadercontext-translate-out {
   from {
     transform: translateY(0);
   }
@@ -148,7 +148,7 @@
   }
 }
 
-@keyframes vkui-animation-panelheadercontext-fade-in {
+@keyframes animation-panelheadercontext-fade-in {
   from {
     opacity: 0;
   }
@@ -158,7 +158,7 @@
   }
 }
 
-@keyframes vkui-animation-panelheadercontext-fade-out {
+@keyframes animation-panelheadercontext-fade-out {
   from {
     opacity: 1;
   }

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

@@ -15,6 +15,7 @@
   flex: 1 0;
   padding-top: inherit;
   padding-bottom: inherit;
+  height: 100%;
 }
 
 .Placeholder__icon {

package/dist/cssm/components/PopoutRoot/PopoutRoot.js

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { blurActiveElement, useDOM } from '../../lib/dom';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import styles from './PopoutRoot.module.css';
 const PopoutRootPopout = ({ children })=>{
-    const { isDesktop } = useAdaptivityWithJSMediaQueries();
     return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['PopoutRoot__popout'], isDesktop && styles['PopoutRoot__popout--absolute'])
+        className: classNames(styles['PopoutRoot__popout'])
     }, children);
 };
 const PopoutRootModal = ({ children })=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['PopoutRoot__popout'],\n        isDesktop && styles['PopoutRoot__popout--absolute'],\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n  return <div className={styles['PopoutRoot__modal']}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n  popout,\n  modal,\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div {...restProps} className={classNames(styles['PopoutRoot'], className)} ref={getRootRef}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","blurActiveElement","useDOM","AppRootPortal","styles","PopoutRootPopout","children","isDesktop","div","className","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","restProps","document","useEffect","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAOC,YAAY,0BAA0B;AAM7C,MAAMC,mBAAmB,CAAC,EAAEC,QAAQ,EAAyB;IAC3D,MAAM,EAAEC,SAAS,EAAE,GAAGP;IAEtB,qBACE,oBAACQ;QACCC,WAAWV,WACTK,MAAM,CAAC,qBAAqB,EAC5BG,aAAaH,MAAM,CAAC,+BAA+B;OAGpDE;AAGP;AAMA,MAAMI,kBAAkB,CAAC,EAAEJ,QAAQ,EAAwB;IACzD,qBAAO,oBAACE;QAAIC,WAAWL,MAAM,CAAC,oBAAoB;OAAGE;AACvD;AASA,OAAO,MAAMK,aAAa,CAAC,EACzBC,MAAM,EACNC,KAAK,EACLP,QAAQ,EACRQ,UAAU,EACVL,SAAS,EACT,GAAGM,WACa;IAChB,MAAM,EAAEC,QAAQ,EAAE,GAAGd;IAErBJ,MAAMmB,SAAS,CAAC;QACdL,UAAUX,kBAAkBe;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACJ;QAAK,GAAGO,SAAS;QAAEN,WAAWV,WAAWK,MAAM,CAAC,aAAa,EAAEK;QAAYS,KAAKJ;OAC9ER,wBACD,oBAACH,qBACE,CAAC,CAACS,wBAAU,oBAACP,wBAAkBO,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}
+{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n  return <div className={classNames(styles['PopoutRoot__popout'])}>{children}</div>;\n};\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n  return <div className={styles['PopoutRoot__modal']}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n  popout,\n  modal,\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div {...restProps} className={classNames(styles['PopoutRoot'], className)} ref={getRootRef}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </div>\n  );\n};\n"],"names":["React","classNames","blurActiveElement","useDOM","AppRootPortal","styles","PopoutRootPopout","children","div","className","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","restProps","document","useEffect","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAOC,YAAY,0BAA0B;AAM7C,MAAMC,mBAAmB,CAAC,EAAEC,QAAQ,EAAyB;IAC3D,qBAAO,oBAACC;QAAIC,WAAWR,WAAWI,MAAM,CAAC,qBAAqB;OAAIE;AACpE;AAMA,MAAMG,kBAAkB,CAAC,EAAEH,QAAQ,EAAwB;IACzD,qBAAO,oBAACC;QAAIC,WAAWJ,MAAM,CAAC,oBAAoB;OAAGE;AACvD;AASA,OAAO,MAAMI,aAAa,CAAC,EACzBC,MAAM,EACNC,KAAK,EACLN,QAAQ,EACRO,UAAU,EACVL,SAAS,EACT,GAAGM,WACa;IAChB,MAAM,EAAEC,QAAQ,EAAE,GAAGb;IAErBH,MAAMiB,SAAS,CAAC;QACdL,UAAUV,kBAAkBc;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACJ;QAAK,GAAGO,SAAS;QAAEN,WAAWR,WAAWI,MAAM,CAAC,aAAa,EAAEI;QAAYS,KAAKJ;OAC9EP,wBACD,oBAACH,qBACE,CAAC,CAACQ,wBAAU,oBAACN,wBAAkBM,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}

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

@@ -13,10 +13,6 @@
   height: 100%;
 }
 
-.PopoutRoot__popout--absolute {
-  position: absolute;
-}
-
 .PopoutRoot__modal {
   position: fixed;
   left: 0;

package/dist/cssm/components/PopoutWrapper/PopoutWrapper.js

@@ -13,7 +13,7 @@ import styles from './PopoutWrapper.module.css';
     const [opened, setOpened] = React.useState(!hasMask);
     const elRef = React.useRef(null);
     const onFadeInEnd = (e)=>{
-        if (!e || e.animationName === styles['vkui-animation-full-fade-in']) {
+        if (!e || e.animationName === styles['animation-full-fade-in']) {
             setOpened(true);
         }
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['vkui-animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","styles","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","opened","setOpened","useState","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,OAAOC,YAAY,6BAA6B;AAUhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,UAAU,IAAI,EACdC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACT,GAAGC,WACgB;IACnB,MAAMC,WAAWf;IACjB,MAAM,CAACgB,QAAQC,UAAU,GAAGpB,MAAMqB,QAAQ,CAAC,CAACT;IAC5C,MAAMU,QAAQtB,MAAMuB,MAAM,CAAiB;IAE3C,MAAMC,cAAc,CAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,KAAKnB,MAAM,CAAC,8BAA8B,EAAE;YACnEa,UAAU;QACZ;IACF;IACA,MAAMO,0BAA0BvB,WAAWoB,aAAaN,aAAaZ,SAASsB,GAAG,GAAG,MAAM;IAC1F5B,MAAM6B,SAAS,CAAC;QACd,CAACV,UAAUQ,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBR;KAAO;IAEpC,MAAM,EAAEY,MAAM,EAAE,GAAG1B;IACnBH,uBAAuB6B,QAAQ,aAAa,CAACN,IAAMA,EAAEO,cAAc,IAAI;QACrEC,SAAS;IACX;IAEA,qBACE,oBAACC;QACE,GAAGjB,SAAS;QACbD,WAAWf,WACTM,MAAM,CAAC,gBAAgB,EACvB;YACE4B,QAAQ5B,MAAM,CAAC,+BAA+B;YAC9C6B,KAAK7B,MAAM,CAAC,4BAA4B;YACxC8B,QAAQ9B,MAAM,CAAC,+BAA+B;QAChD,CAAC,CAACE,OAAO,EACT;YACE0B,QAAQ5B,MAAM,CAAC,+BAA+B;YAC9C+B,MAAM/B,MAAM,CAAC,6BAA6B;YAC1CgC,OAAOhC,MAAM,CAAC,8BAA8B;QAC9C,CAAC,CAACG,OAAO,EACTC,WAAWJ,MAAM,CAAC,yBAAyB,EAC3CY,UAAUZ,MAAM,CAAC,wBAAwB,EACzCM,SAASN,MAAM,CAAC,uBAAuB,EACvCK,WAAWL,MAAM,CAAC,wBAAwB,EAC1CS;QAEFwB,gBAAgBrB,SAASsB,YAAYjB;QACrCkB,KAAKpB;qBAEL,oBAACY;QAAIlB,WAAWT,MAAM,CAAC,2BAA2B;qBAChD,oBAAC2B;QAAIlB,WAAWT,MAAM,CAAC,yBAAyB;QAAEQ,SAASA;sBAC3D,oBAACmB;QAAIlB,WAAWT,MAAM,CAAC,yBAAyB;OAAGO;AAI3D,EAAE"}
+{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","styles","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","opened","setOpened","useState","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,OAAOC,YAAY,6BAA6B;AAUhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,UAAU,IAAI,EACdC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACT,GAAGC,WACgB;IACnB,MAAMC,WAAWf;IACjB,MAAM,CAACgB,QAAQC,UAAU,GAAGpB,MAAMqB,QAAQ,CAAC,CAACT;IAC5C,MAAMU,QAAQtB,MAAMuB,MAAM,CAAiB;IAE3C,MAAMC,cAAc,CAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,KAAKnB,MAAM,CAAC,yBAAyB,EAAE;YAC9Da,UAAU;QACZ;IACF;IACA,MAAMO,0BAA0BvB,WAAWoB,aAAaN,aAAaZ,SAASsB,GAAG,GAAG,MAAM;IAC1F5B,MAAM6B,SAAS,CAAC;QACd,CAACV,UAAUQ,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBR;KAAO;IAEpC,MAAM,EAAEY,MAAM,EAAE,GAAG1B;IACnBH,uBAAuB6B,QAAQ,aAAa,CAACN,IAAMA,EAAEO,cAAc,IAAI;QACrEC,SAAS;IACX;IAEA,qBACE,oBAACC;QACE,GAAGjB,SAAS;QACbD,WAAWf,WACTM,MAAM,CAAC,gBAAgB,EACvB;YACE4B,QAAQ5B,MAAM,CAAC,+BAA+B;YAC9C6B,KAAK7B,MAAM,CAAC,4BAA4B;YACxC8B,QAAQ9B,MAAM,CAAC,+BAA+B;QAChD,CAAC,CAACE,OAAO,EACT;YACE0B,QAAQ5B,MAAM,CAAC,+BAA+B;YAC9C+B,MAAM/B,MAAM,CAAC,6BAA6B;YAC1CgC,OAAOhC,MAAM,CAAC,8BAA8B;QAC9C,CAAC,CAACG,OAAO,EACTC,WAAWJ,MAAM,CAAC,yBAAyB,EAC3CY,UAAUZ,MAAM,CAAC,wBAAwB,EACzCM,SAASN,MAAM,CAAC,uBAAuB,EACvCK,WAAWL,MAAM,CAAC,wBAAwB,EAC1CS;QAEFwB,gBAAgBrB,SAASsB,YAAYjB;QACrCkB,KAAKpB;qBAEL,oBAACY;QAAIlB,WAAWT,MAAM,CAAC,2BAA2B;qBAChD,oBAAC2B;QAAIlB,WAAWT,MAAM,CAAC,yBAAyB;QAAEQ,SAASA;sBAC3D,oBAACmB;QAAIlB,WAAWT,MAAM,CAAC,yBAAyB;OAAGO;AAI3D,EAAE"}

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

@@ -26,7 +26,7 @@
   width: 100%;
   height: 100%;
   opacity: 1;
-  animation: vkui-animation-full-fade-in var(--vkui--animation_duration_m) ease;
+  animation: animation-full-fade-in var(--vkui--animation_duration_m) ease;
 }
 
 .PopoutWrapper--closing .PopoutWrapper__overlay {
@@ -86,7 +86,7 @@
   justify-content: flex-end;
 }
 
-@keyframes vkui-animation-full-fade-in {
+@keyframes animation-full-fade-in {
   from {
     opacity: 0;
   }

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

@@ -1,6 +1,6 @@
 .Popover {
   position: relative;
-  animation: vkui-popover-fadein 0.2s ease;
+  animation: popover-fade-in 0.2s ease;
   background: var(--vkui--color_background_modal);
   border-radius: var(--vkui--size_border_radius--regular);
   box-shadow: var(--vkui--elevation3);
@@ -21,7 +21,7 @@
   position: relative;
 }
 
-@keyframes vkui-popover-fadein {
+@keyframes popover-fade-in {
   from {
     opacity: 0;
   }

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

@@ -48,7 +48,7 @@
 }
 
 .PullToRefresh--ios.PullToRefresh--refreshing .PullToRefresh__spinner-self {
-  animation: vkui-PullToRefreshToRefreshing 380ms ease-out;
+  animation: pull-to-refresh-to-refreshing 380ms ease-out;
 }
 
 .PullToRefresh__spinner-path {
@@ -63,7 +63,7 @@
 }
 
 .PullToRefresh__spinner--on .PullToRefresh__spinner-path {
-  animation: vkui-ptr-rotator var(--vkui_internal--duration) linear infinite;
+  animation: ptr-rotator var(--vkui_internal--duration) linear infinite;
 }
 
 .PullToRefresh__content {
@@ -75,7 +75,7 @@
   transition: none;
 }
 
-@keyframes vkui-PullToRefreshToRefreshing {
+@keyframes pull-to-refresh-to-refreshing {
   0% {
     transform: scale(1);
   }
@@ -93,7 +93,7 @@
   }
 }
 
-@keyframes vkui-ptr-rotator {
+@keyframes ptr-rotator {
   0% {
     transform: rotate(0deg);
   }