@vkontakte/vkui 5.3.2 → 5.4.1

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

@@ -58,7 +58,7 @@ function doScroll({ scrollElement , getScrollPosition , animationQueue , onScrol
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
- */ export const HorizontalScroll = ({ children , getScrollToLeft , getScrollToRight , showArrows =true , arrowSize ='l' , scrollAnimationDuration =SCROLL_ONE_FRAME_TIME , getRef , className , scrollOnAnyWheel =false , ...restProps })=>{
+ */ export const HorizontalScroll = ({ children , getScrollToLeft , getScrollToRight , showArrows =true , arrowSize ='l' , arrowOffsetY , scrollAnimationDuration =SCROLL_ONE_FRAME_TIME , getRef , className , scrollOnAnyWheel =false , ...restProps })=>{
     const [canScrollLeft, setCanScrollLeft] = React.useState(false);
     const [canScrollRight, setCanScrollRight] = React.useState(false);
     const isCustomScrollingRef = React.useRef(false);
@@ -158,11 +158,13 @@ function doScroll({ scrollElement , getScrollPosition , animationQueue , onScrol
         className: styles['HorizontalScroll__in-wrapper']
     }, children)), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ React.createElement(HorizontalScrollArrow, {
         size: arrowSize,
+        offsetY: arrowOffsetY,
         direction: "left",
         className: styles['HorizontalScroll__arrowLeft'],
         onClick: scrollToLeft
     }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ React.createElement(HorizontalScrollArrow, {
         size: arrowSize,
+        offsetY: arrowOffsetY,
         direction: "right",
         className: styles['HorizontalScroll__arrowRight'],
         onClick: scrollToRight

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 { HorizontalScrollArrow } from './HorizontalScrollArrow';\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  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  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' && 'vkuiInternalHorizontalScroll--withConstArrows',\n        className,\n      )}\n    >\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"left\"\n          className={styles['HorizontalScroll__arrowLeft']}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"right\"\n          className={styles['HorizontalScroll__arrowRight']}\n          onClick={scrollToRight}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","HorizontalScrollArrow","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","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","ref","undefined","size","direction","onClick"],"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 { HorizontalScrollArrow } from './HorizontalScrollArrow';\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' && 'vkuiInternalHorizontalScroll--withConstArrows',\n        className,\n      )}\n    >\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          className={styles['HorizontalScroll__arrowLeft']}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={styles['HorizontalScroll__arrowRight']}\n          onClick={scrollToRight}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","HorizontalScrollArrow","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","ref","undefined","size","offsetY","direction","onClick"],"mappings":"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"}

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

@@ -1 +1,59 @@
-.vkuiHorizontalScroll{overflow-x:hidden;position:relative}.vkuiHorizontalScroll__in{-webkit-overflow-scrolling:touch;overflow-x:auto;scrollbar-width:none}.vkuiHorizontalScroll__in::-webkit-scrollbar{display:none}.vkuiHorizontalScroll__in-wrapper{transition:transform .2s}.vkuiHorizontalScroll__arrowLeft:hover~.vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper{transform:translateX(8px)}.vkuiHorizontalScroll__arrowRight:hover~.vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper{transform:translateX(-8px)}.vkuiInternalTabs .vkuiHorizontalScroll{min-width:100%}.vkuiInternalTabs .vkuiHorizontalScroll__in-wrapper{align-items:stretch;display:flex}.vkuiInternalTabs--withGaps .vkuiHorizontalScroll__in-wrapper:after,.vkuiInternalTabs--withGaps .vkuiHorizontalScroll__in-wrapper:before{content:"";display:block;flex-shrink:0;height:1px;width:16px;width:var(--vkui--size_base_padding_horizontal--regular)}
+.HorizontalScroll {
+  position: relative;
+
+  /**
+   * ⚠️ WARNING ⚠️
+   * `overflow-y` мы не трогаем, т.к. из-за `hidden` могут обрезаться тени у потомков.
+   */
+  overflow-x: hidden;
+}
+
+.HorizontalScroll__in {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+
+  /**
+   * Для удаление скролла в Firefox.
+   * В версии ниже 64 будет виден скролл, но это не ломает функциональность.
+   */
+  scrollbar-width: none;
+}
+
+.HorizontalScroll__in::-webkit-scrollbar {
+  display: none;
+}
+
+.HorizontalScroll__in-wrapper {
+  transition: transform 0.2s;
+}
+
+.HorizontalScroll__arrowLeft:hover ~ .HorizontalScroll__in .HorizontalScroll__in-wrapper {
+  transform: translateX(8px);
+}
+
+.HorizontalScroll__arrowRight:hover ~ .HorizontalScroll__in .HorizontalScroll__in-wrapper {
+  transform: translateX(-8px);
+}
+
+/**
+ * CMP:
+ * Tabs
+ */
+
+:global(.vkuiInternalTabs) .HorizontalScroll {
+  min-width: 100%;
+}
+
+:global(.vkuiInternalTabs) .HorizontalScroll__in-wrapper {
+  display: flex;
+  align-items: stretch;
+}
+
+:global(.vkuiInternalTabs--withGaps) .HorizontalScroll__in-wrapper::after,
+:global(.vkuiInternalTabs--withGaps) .HorizontalScroll__in-wrapper::before {
+  display: block;
+  width: var(--vkui--size_base_padding_horizontal--regular);
+  flex-shrink: 0;
+  height: 1px;
+  content: '';
+}

package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 export interface HorizontalScrollArrowProps {
     direction: 'left' | 'right';
     size?: 'm' | 'l';
+    offsetY?: number | string;
     onClick(event: React.MouseEvent): void;
     className?: string;
 }
-export declare const HorizontalScrollArrow: ({ size, direction, onClick, className, ...restProps }: HorizontalScrollArrowProps) => JSX.Element;
+export declare const HorizontalScrollArrow: ({ size, offsetY, direction, onClick, className, ...restProps }: HorizontalScrollArrowProps) => JSX.Element;

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

@@ -3,7 +3,7 @@ import { Icon16Chevron, Icon16ChevronLeft, Icon24Chevron, Icon24ChevronCompactLe
 import { classNames } from '@vkontakte/vkjs';
 import { Tappable } from '../Tappable/Tappable';
 import styles from './HorizontalScrollArrow.module.css';
-export const HorizontalScrollArrow = ({ size ='l' , direction , onClick , className , ...restProps })=>{
+export const HorizontalScrollArrow = ({ size ='l' , offsetY , direction , onClick , className , ...restProps })=>{
     let ArrowIcon;
     if (size === 'm') {
         ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;
@@ -24,7 +24,10 @@ export const HorizontalScrollArrow = ({ size ='l' , direction , onClick , classN
         }[direction], className),
         onClick: onClick
     }, /*#__PURE__*/ React.createElement("span", {
-        className: styles['HorizontalScrollArrow__icon']
+        className: styles['HorizontalScrollArrow__icon'],
+        style: offsetY ? {
+            top: offsetY
+        } : undefined
     }, /*#__PURE__*/ React.createElement(ArrowIcon, null)));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './HorizontalScrollArrow.module.css';\n\nexport interface HorizontalScrollArrowProps {\n  direction: 'left' | 'right';\n  size?: 'm' | 'l';\n  onClick(event: React.MouseEvent): void;\n  className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = 'l',\n  direction,\n  onClick,\n  className,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === 'm') {\n    ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      className={classNames(\n        styles['HorizontalScrollArrow'],\n        {\n          m: styles['HorizontalScrollArrow--size-m'],\n          l: styles['HorizontalScrollArrow--size-l'],\n        }[size],\n        {\n          left: styles['HorizontalScrollArrow--direction-left'],\n          right: styles['HorizontalScrollArrow--direction-right'],\n        }[direction],\n        className,\n      )}\n      onClick={onClick}\n    >\n      <span className={styles['HorizontalScrollArrow__icon']}>\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon16ChevronLeft","Icon24Chevron","Icon24ChevronCompactLeft","classNames","Tappable","styles","HorizontalScrollArrow","size","direction","onClick","className","restProps","ArrowIcon","Component","hasHover","hasActive","m","l","left","right","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,OAAOC,YAAY,qCAAqC;AASxD,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,MAAO,IAAG,EACVC,UAAS,EACTC,QAAO,EACPC,UAAS,EACT,GAAGC,WACwB,GAAK;IAChC,IAAIC;IAEJ,IAAIL,SAAS,KAAK;QAChBK,YAAYJ,cAAc,SAASR,oBAAoBD,aAAa;IACtE,OAAO;QACLa,YAAYJ,cAAc,SAASN,2BAA2BD,aAAa;IAC7E,CAAC;IAED,qBACE,oBAACG;QACE,GAAGO,SAAS;QACbE,WAAU;QACVC,UAAU,KAAK;QACfC,WAAW,KAAK;QAChBL,WAAWP,WACTE,MAAM,CAAC,wBAAwB,EAC/B;YACEW,GAAGX,MAAM,CAAC,gCAAgC;YAC1CY,GAAGZ,MAAM,CAAC,gCAAgC;QAC5C,CAAC,CAACE,KAAK,EACP;YACEW,MAAMb,MAAM,CAAC,wCAAwC;YACrDc,OAAOd,MAAM,CAAC,yCAAyC;QACzD,CAAC,CAACG,UAAU,EACZE;QAEFD,SAASA;qBAET,oBAACW;QAAKV,WAAWL,MAAM,CAAC,8BAA8B;qBACpD,oBAACO;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './HorizontalScrollArrow.module.css';\n\nexport interface HorizontalScrollArrowProps {\n  direction: 'left' | 'right';\n  size?: 'm' | 'l';\n  offsetY?: number | string;\n  onClick(event: React.MouseEvent): void;\n  className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = 'l',\n  offsetY,\n  direction,\n  onClick,\n  className,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === 'm') {\n    ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      className={classNames(\n        styles['HorizontalScrollArrow'],\n        {\n          m: styles['HorizontalScrollArrow--size-m'],\n          l: styles['HorizontalScrollArrow--size-l'],\n        }[size],\n        {\n          left: styles['HorizontalScrollArrow--direction-left'],\n          right: styles['HorizontalScrollArrow--direction-right'],\n        }[direction],\n        className,\n      )}\n      onClick={onClick}\n    >\n      <span\n        className={styles['HorizontalScrollArrow__icon']}\n        style={offsetY ? { top: offsetY } : undefined}\n      >\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon16ChevronLeft","Icon24Chevron","Icon24ChevronCompactLeft","classNames","Tappable","styles","HorizontalScrollArrow","size","offsetY","direction","onClick","className","restProps","ArrowIcon","Component","hasHover","hasActive","m","l","left","right","span","style","top","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,OAAOC,YAAY,qCAAqC;AAUxD,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,MAAO,IAAG,EACVC,QAAO,EACPC,UAAS,EACTC,QAAO,EACPC,UAAS,EACT,GAAGC,WACwB,GAAK;IAChC,IAAIC;IAEJ,IAAIN,SAAS,KAAK;QAChBM,YAAYJ,cAAc,SAAST,oBAAoBD,aAAa;IACtE,OAAO;QACLc,YAAYJ,cAAc,SAASP,2BAA2BD,aAAa;IAC7E,CAAC;IAED,qBACE,oBAACG;QACE,GAAGQ,SAAS;QACbE,WAAU;QACVC,UAAU,KAAK;QACfC,WAAW,KAAK;QAChBL,WAAWR,WACTE,MAAM,CAAC,wBAAwB,EAC/B;YACEY,GAAGZ,MAAM,CAAC,gCAAgC;YAC1Ca,GAAGb,MAAM,CAAC,gCAAgC;QAC5C,CAAC,CAACE,KAAK,EACP;YACEY,MAAMd,MAAM,CAAC,wCAAwC;YACrDe,OAAOf,MAAM,CAAC,yCAAyC;QACzD,CAAC,CAACI,UAAU,EACZE;QAEFD,SAASA;qBAET,oBAACW;QACCV,WAAWN,MAAM,CAAC,8BAA8B;QAChDiB,OAAOd,UAAU;YAAEe,KAAKf;QAAQ,IAAIgB,SAAS;qBAE7C,oBAACX;AAIT,EAAE"}

package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.module.css

@@ -1 +1,67 @@
-.vkuiHorizontalScrollArrow{background-color:initial;border:none;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;opacity:0;padding:0;position:absolute;top:0;transition:opacity .15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:var(--vkui--animation_easing_platform);-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.vkuiHorizontalScrollArrow__icon{align-items:center;background-color:#fff;background-color:var(--vkui--color_background_modal);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;justify-content:center}.vkuiHorizontalScrollArrow--size-m .vkuiHorizontalScrollArrow__icon{border-radius:14px;height:28px;width:28px}.vkuiHorizontalScrollArrow--size-l .vkuiHorizontalScrollArrow__icon{border-radius:24px;height:40px;width:40px}.vkuiHorizontalScrollArrow--direction-left{left:0;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiHorizontalScrollArrow--direction-right{padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular,16px);right:0}.vkuiInternalBaseGallery:hover .vkuiHorizontalScrollArrow,.vkuiInternalHorizontalScroll:hover .vkuiHorizontalScrollArrow{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiInternalBaseGallery:hover .vkuiHorizontalScrollArrow:hover,.vkuiInternalHorizontalScroll--withConstArrows .vkuiHorizontalScrollArrow,.vkuiInternalHorizontalScroll--withConstArrows:hover .vkuiHorizontalScrollArrow,.vkuiInternalHorizontalScroll:hover .vkuiHorizontalScrollArrow:hover{opacity:1}
+.HorizontalScrollArrow {
+  position: absolute;
+  cursor: pointer;
+  -webkit-user-select: auto;
+     -moz-user-select: auto;
+      -ms-user-select: auto;
+          user-select: auto;
+  top: 0;
+  height: 100%;
+  padding: 0;
+  opacity: 0;
+  border: none;
+  background-color: transparent;
+  transition: opacity 0.15s;
+  transition-timing-function: var(--vkui--animation_easing_platform);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.HorizontalScrollArrow__icon {
+  position: relative;
+  background-color: var(--vkui--color_background_modal);
+  color: var(--vkui--color_icon_secondary);
+  box-shadow: var(--vkui--elevation3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.HorizontalScrollArrow--size-m .HorizontalScrollArrow__icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+}
+
+.HorizontalScrollArrow--size-l .HorizontalScrollArrow__icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 24px;
+}
+
+.HorizontalScrollArrow--direction-left {
+  padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px);
+  left: 0;
+}
+
+.HorizontalScrollArrow--direction-right {
+  padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px);
+  right: 0;
+}
+
+/**
+ * CMP: BaseGallery, HorizontalScroll
+ */
+
+:global(.vkuiInternalBaseGallery):hover .HorizontalScrollArrow,
+:global(.vkuiInternalHorizontalScroll):hover .HorizontalScrollArrow {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+:global(.vkuiInternalBaseGallery):hover .HorizontalScrollArrow:hover,
+:global(.vkuiInternalHorizontalScroll):hover .HorizontalScrollArrow:hover,
+:global(.vkuiInternalHorizontalScroll--withConstArrows) .HorizontalScrollArrow,
+:global(.vkuiInternalHorizontalScroll--withConstArrows):hover .HorizontalScrollArrow {
+  opacity: 1;
+}

package/dist/cssm/components/HoverPopper/HoverPopper.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PopperCommonProps } from '../Popper/Popper';
-export interface HoverPopperProps extends PopperCommonProps {
+export interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {
     /**
      * Содержимое тултипа
      */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends PopperCommonProps {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useEventListener","usePatchChildrenRef","useTimeout","useIsomorphicLayoutEffect","Popper","HoverPopper","getRef","content","children","onShownChange","shown","_shown","showDelay","hideDelay","restProps","computedShown","setComputedShown","useState","setShown","value","showTimeout","hideTimeout","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","targetLeaveListener","current","add","Fragment","onMouseOver","onMouseOut","targetRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,MAAM,QAA2B,mBAAmB;AA6B7D,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAM,EACNC,QAAO,EACPC,SAAQ,EACRC,cAAa,EACbC,OAAOC,OAAM,EACbC,WAAY,IAAG,EACfC,WAAY,IAAG,EACf,GAAGC,WACc,GAAK;IACtB,MAAM,CAACC,eAAeC,iBAAiB,GAAGjB,MAAMkB,QAAQ,CAACN,UAAU,KAAK;IAExE,MAAMD,QAAQ,OAAOC,WAAW,YAAYA,SAASI,aAAa;IAElE,MAAMG,WAAW,CAACC,QAAmB;QACnC,IAAI,OAAOR,WAAW,WAAW;YAC/BK,iBAAiBG;QACnB,CAAC;QACD,OAAOV,kBAAkB,cAAcA,cAAcU;IACvD;IAEA,MAAMC,cAAclB,WAAW,IAAM;QACnCgB,SAAS,IAAI;IACf,GAAGN;IAEH,MAAMS,cAAcnB,WAAW,IAAM;QACnCgB,SAAS,KAAK;IAChB,GAAGL;IAEH,MAAM,CAACS,UAAUC,MAAM,GAAGtB,oBAAoBO;IAE9C,MAAMgB,gBAAgB,IAAM;QAC1BH,YAAYI,KAAK;QACjBL,YAAYM,GAAG;IACjB;IAEA,MAAMC,gBAAgB,IAAM;QAC1BP,YAAYK,KAAK;QACjBJ,YAAYK,GAAG;IACjB;IAEA,MAAME,sBAAsB5B,iBAAiB,gBAAgBwB;IAC7D,MAAMK,sBAAsB7B,iBAAiB,gBAAgB2B;IAE7DxB,0BAA0B,IAAM;QAC9B,IAAImB,SAASQ,OAAO,EAAE;YACpBF,oBAAoBG,GAAG,CAACT,SAASQ,OAAO;YACxCD,oBAAoBE,GAAG,CAACT,SAASQ,OAAO;QAC1C,CAAC;IACH,GAAG,EAAE;IAEL,qBACE,oBAAC/B,MAAMiC,QAAQ,QACZT,OACAb,uBACC,oBAACN;QACE,GAAGU,SAAS;QACbmB,aAAaZ,YAAYI,KAAK;QAC9BS,YAAYP;QACZrB,QAAQA;QACR6B,WAAWb;OAEVf;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useEventListener","usePatchChildrenRef","useTimeout","useIsomorphicLayoutEffect","Popper","HoverPopper","getRef","content","children","onShownChange","shown","_shown","showDelay","hideDelay","restProps","computedShown","setComputedShown","useState","setShown","value","showTimeout","hideTimeout","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","targetLeaveListener","current","add","Fragment","onMouseOver","onMouseOut","targetRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,MAAM,QAA2B,mBAAmB;AA6B7D,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAM,EACNC,QAAO,EACPC,SAAQ,EACRC,cAAa,EACbC,OAAOC,OAAM,EACbC,WAAY,IAAG,EACfC,WAAY,IAAG,EACf,GAAGC,WACc,GAAK;IACtB,MAAM,CAACC,eAAeC,iBAAiB,GAAGjB,MAAMkB,QAAQ,CAACN,UAAU,KAAK;IAExE,MAAMD,QAAQ,OAAOC,WAAW,YAAYA,SAASI,aAAa;IAElE,MAAMG,WAAW,CAACC,QAAmB;QACnC,IAAI,OAAOR,WAAW,WAAW;YAC/BK,iBAAiBG;QACnB,CAAC;QACD,OAAOV,kBAAkB,cAAcA,cAAcU;IACvD;IAEA,MAAMC,cAAclB,WAAW,IAAM;QACnCgB,SAAS,IAAI;IACf,GAAGN;IAEH,MAAMS,cAAcnB,WAAW,IAAM;QACnCgB,SAAS,KAAK;IAChB,GAAGL;IAEH,MAAM,CAACS,UAAUC,MAAM,GAAGtB,oBAAoBO;IAE9C,MAAMgB,gBAAgB,IAAM;QAC1BH,YAAYI,KAAK;QACjBL,YAAYM,GAAG;IACjB;IAEA,MAAMC,gBAAgB,IAAM;QAC1BP,YAAYK,KAAK;QACjBJ,YAAYK,GAAG;IACjB;IAEA,MAAME,sBAAsB5B,iBAAiB,gBAAgBwB;IAC7D,MAAMK,sBAAsB7B,iBAAiB,gBAAgB2B;IAE7DxB,0BAA0B,IAAM;QAC9B,IAAImB,SAASQ,OAAO,EAAE;YACpBF,oBAAoBG,GAAG,CAACT,SAASQ,OAAO;YACxCD,oBAAoBE,GAAG,CAACT,SAASQ,OAAO;QAC1C,CAAC;IACH,GAAG,EAAE;IAEL,qBACE,oBAAC/B,MAAMiC,QAAQ,QACZT,OACAb,uBACC,oBAACN;QACE,GAAGU,SAAS;QACbmB,aAAaZ,YAAYI,KAAK;QAC9BS,YAAYP;QACZrB,QAAQA;QACR6B,WAAWb;OAEVf;AAKX,EAAE"}

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
+/// <reference types="react" />
+import { HasChildren } from '../../types';
 import { TappableProps } from '../Tappable/Tappable';
-export interface IconButtonProps extends TappableProps {
-    children?: React.ReactNode;
+export interface IconButtonProps extends TappableProps, HasChildren {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps {\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\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      className={classNames(\n        styles['IconButton'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","COMMON_WARNINGS","warnOnce","Tappable","styles","sizeYClassNames","none","COMPACT","warn","IconButton","children","className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","REGULAR","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAC/D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,yBAAyB;IACtC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,4BAA4B;AACzD;AAMA,MAAMI,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAA4B,GAAK;IACpF,MAAMC,WAAWf;IACjB,MAAM,EAAEgB,OAAQ,OAAM,EAAE,GAAGjB;IAE3B,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,eAAeN,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE5E,IAAI,CAACM,cAAc;YACjBV,KAAKP,gBAAgBkB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,aAAa,CAAC,EAAE;QAC3E,CAAC;IACH,CAAC;IAED,qBACE,oBAACjB;QACCkB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM,QAAQ;QACzC,GAAGR,SAAS;QACbD,WAAWf,WACTQ,MAAM,CAAC,aAAa,EACpBU,UAAUf,SAASyB,OAAO,IAAInB,eAAe,CAACS,MAAM,EACpDD,aAAab,SAASyB,GAAG,IAAIrB,MAAM,CAAC,kBAAkB,EACtDO;OAGDD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasChildren } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps, HasChildren {}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\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      className={classNames(\n        styles['IconButton'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","COMMON_WARNINGS","warnOnce","Tappable","styles","sizeYClassNames","none","COMPACT","warn","IconButton","children","className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","REGULAR","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,yBAAyB;IACtC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,4BAA4B;AACzD;AAIA,MAAMI,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAA4B,GAAK;IACpF,MAAMC,WAAWf;IACjB,MAAM,EAAEgB,OAAQ,OAAM,EAAE,GAAGjB;IAE3B,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,eAAeN,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE5E,IAAI,CAACM,cAAc;YACjBV,KAAKP,gBAAgBkB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,aAAa,CAAC,EAAE;QAC3E,CAAC;IACH,CAAC;IAED,qBACE,oBAACjB;QACCkB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM,QAAQ;QACzC,GAAGR,SAAS;QACbD,WAAWf,WACTQ,MAAM,CAAC,aAAa,EACpBU,UAAUf,SAASyB,OAAO,IAAInB,eAAe,CAACS,MAAM,EACpDD,aAAab,SAASyB,GAAG,IAAIrB,MAAM,CAAC,kBAAkB,EACtDO;OAGDD;AAGP,EAAE"}

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

@@ -1 +1,152 @@
-.vkuiIconButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:9999px;box-shadow:none;color:currentColor;display:block;height:48px;margin:0;padding:0;position:relative}.vkuiIconButton--sizeY-compact{height:44px}.vkuiIconButton[disabled]{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiIconButton--ios{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular)}.vkuiIconButton .vkuiIcon--16{padding:16px}.vkuiIconButton .vkuiIcon--16.vkuiIcon--w-8{padding:16px 14px}.vkuiIconButton--sizeY-compact .vkuiIcon--16,.vkuiIconButton--sizeY-compact .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton .vkuiIcon--24{padding:12px}.vkuiIconButton .vkuiIcon--28,.vkuiIconButton--sizeY-compact .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-compact .vkuiIcon--28{padding:8px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiIconButton--sizeY-none{height:44px}.vkuiIconButton--sizeY-none .vkuiIcon--16,.vkuiIconButton--sizeY-none .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton--sizeY-none .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-none .vkuiIcon--28{padding:8px}}.vkuiInternalFormField__after .vkuiIconButton,.vkuiInternalFormItem--removable .vkuiInternalRemovable__content>.vkuiIconButton,.vkuiInternalFormLayoutGroup--removable .vkuiInternalRemovable__content>.vkuiIconButton{align-content:center;align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:44px;height:var(--vkui--size_field_height--regular);justify-content:center;width:44px;width:var(--vkui--size_field_height--regular)}.vkuiInternalFormField__after .vkuiIconButton .vkuiIcon.vkuiIcon.vkuiIcon{padding:0}.vkuiInternalFormField__after .vkuiIconButton--sizeY-compact{height:36px;height:var(--vkui--size_field_height--compact);width:36px;width:var(--vkui--size_field_height--compact)}.vkuiInternalFormItem--removable .vkuiInternalRemovable__content>.vkuiIconButton--sizeY-compact,.vkuiInternalFormLayoutGroup--removable .vkuiInternalRemovable__content>.vkuiIconButton--sizeY-compact{height:36px;height:var(--vkui--size_field_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiInternalFormField__after .vkuiIconButton--sizeY-none{width:36px;width:var(--vkui--size_field_height--compact)}.vkuiInternalFormField__after .vkuiIconButton--sizeY-none,.vkuiInternalFormItem--removable .vkuiInternalRemovable__content>.vkuiIconButton--sizeY-none,.vkuiInternalFormLayoutGroup--removable .vkuiInternalRemovable__content>.vkuiIconButton--sizeY-none{height:36px;height:var(--vkui--size_field_height--compact)}}
+.IconButton {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+  display: block;
+  color: currentColor;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  height: 48px;
+
+  /**
+   * Чтобы закргуление было равно половине высоты.
+   * см. https://stackoverflow.com/questions/27233295/possible-to-make-border-radius-equal-to-half-the-total-height-without-javascript
+   */
+  border-radius: 9999px;
+}
+
+.IconButton--sizeY-compact {
+  height: 44px;
+}
+
+.IconButton[disabled] {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.IconButton--ios {
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
+.IconButton :global(.vkuiIcon--16) {
+  padding: 16px;
+}
+
+.IconButton :global(.vkuiIcon--16.vkuiIcon--w-8) {
+  padding: 16px 14px;
+}
+
+.IconButton--sizeY-compact :global(.vkuiIcon--16),
+.IconButton--sizeY-compact :global(.vkuiIcon--16.vkuiIcon--w-8) {
+  padding: 14px;
+}
+
+.IconButton :global(.vkuiIcon--24) {
+  padding: 12px;
+}
+
+.IconButton--sizeY-compact :global(.vkuiIcon--24) {
+  padding: 10px;
+}
+
+.IconButton :global(.vkuiIcon--28) {
+  padding: 10px;
+}
+
+.IconButton--sizeY-compact :global(.vkuiIcon--28) {
+  padding: 8px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .IconButton--sizeY-none {
+    height: 44px;
+  }
+
+  .IconButton--sizeY-none :global(.vkuiIcon--16),
+  .IconButton--sizeY-none :global(.vkuiIcon--16.vkuiIcon--w-8) {
+    padding: 14px;
+  }
+
+  .IconButton--sizeY-none :global(.vkuiIcon--24) {
+    padding: 10px;
+  }
+
+  .IconButton--sizeY-none :global(.vkuiIcon--28) {
+    padding: 8px;
+  }
+}
+
+/**
+ * CMP:
+ * - FormItem
+ * - FormLayoutGroup
+ * - FormField
+ */
+
+:global(.vkuiInternalFormItem--removable) :global(.vkuiInternalRemovable__content) > .IconButton,
+:global(.vkuiInternalFormLayoutGroup--removable)
+  :global(.vkuiInternalRemovable__content)
+  > .IconButton,
+:global(.vkuiInternalFormField__after) .IconButton {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  width: var(--vkui--size_field_height--regular);
+  height: var(--vkui--size_field_height--regular);
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
+:global(.vkuiInternalFormField__after)
+  .IconButton
+  :global(.vkuiIcon):global(.vkuiIcon):global(.vkuiIcon) {
+  padding: 0;
+}
+
+:global(.vkuiInternalFormField__after) .IconButton--sizeY-compact {
+  width: var(--vkui--size_field_height--compact);
+  height: var(--vkui--size_field_height--compact);
+}
+
+:global(.vkuiInternalFormItem--removable)
+  :global(.vkuiInternalRemovable__content)
+  > .IconButton--sizeY-compact,
+:global(.vkuiInternalFormLayoutGroup--removable)
+  :global(.vkuiInternalRemovable__content)
+  > .IconButton--sizeY-compact {
+  height: var(--vkui--size_field_height--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  :global(.vkuiInternalFormField__after) .IconButton--sizeY-none {
+    width: var(--vkui--size_field_height--compact);
+    height: var(--vkui--size_field_height--compact);
+  }
+
+  :global(.vkuiInternalFormItem--removable)
+    :global(.vkuiInternalRemovable__content)
+    > .IconButton--sizeY-none,
+  :global(.vkuiInternalFormLayoutGroup--removable)
+    :global(.vkuiInternalRemovable__content)
+    > .IconButton--sizeY-none {
+    height: var(--vkui--size_field_height--compact);
+  }
+}
+
+/**
+ * CMP:
+ * SimpleCell
+ */
+
+:global(.vkuiInternalSimpleCell__after) .IconButton:last-child {
+  margin-right: -12px;
+}
+
+:global(.vkuiInternalSimpleCell--ios)
+  :global(.vkuiInternalSimpleCell__after)
+  .IconButton:last-child {
+  margin-right: -9px;
+}

package/dist/cssm/components/Image/ImageBadge/ImageBadge.module.css

@@ -1 +1,10 @@
-.vkuiImageBadge{bottom:-4px;position:absolute;right:-4px}.vkuiImageBadge--shifted{bottom:-3px;right:-3px}
+.ImageBadge {
+  position: absolute;
+  bottom: -4px;
+  right: -4px;
+}
+
+.ImageBadge--shifted {
+  bottom: -3px;
+  right: -3px;
+}