@vkontakte/vkui 7.9.2 → 7.10.1

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

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

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

@@ -43,8 +43,7 @@
   opacity: 0;
 }
 
-.host:hover .arrow,
-.withConstArrows .arrow {
+.showArrows .arrow {
   opacity: var(--vkui--opacity_disable_accessibility);
 }
 
@@ -75,7 +74,8 @@
 
 :global(.vkuiInternalTabs--withGaps) .inWrapper::after,
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalTabs--withGaps) .inWrapper::before {
+  :global(.vkuiInternalTabs--withGaps)
+  .inWrapper::before {
   display: block;
   flex-shrink: 0;
   inline-size: var(--vkui--size_base_padding_horizontal--regular);

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

@@ -119,9 +119,13 @@
 
 :global(.vkuiInternalFormItem--removable) :global(.vkuiInternalRemovable__content) > .host,
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormLayoutGroup--removable) :global(.vkuiInternalRemovable__content) > .host,
+  :global(.vkuiInternalFormLayoutGroup--removable)
+  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  :global(.vkuiInternalRemovable__content)
+  > .host,
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormField__after) .host {
+  :global(.vkuiInternalFormField__after)
+  .host {
   display: flex;
   align-content: center;
   align-items: center;

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

@@ -80,7 +80,9 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 .modeAdd .middle :global(.vkuiIcon),
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.modeMore .middle :global(.vkuiIcon) {
+.modeMore
+  .middle
+  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  :global(.vkuiIcon) {
   color: var(--vkui--color_icon_accent_themed);
 }

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

@@ -30,7 +30,8 @@
    * Для этого также нужны `inline-size: auto` и `margin-inline: auto`.
    */
   inset-block-end: calc(
-    var(--vkui--spacing_size_m) + var(--vkui_internal_ModalCard--safeAreaInsetBottom)
+    var(--vkui--spacing_size_m) +
+    var(--vkui_internal_ModalCard--safeAreaInsetBottom)
   );
   inset-inline: var(--vkui--spacing_size_m);
   box-sizing: border-box;

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

@@ -19,12 +19,14 @@
 
 .withSafeZone .container {
   -webkit-padding-before: calc(
-    var(--vkui_internal--dismiss_icon_height) + var(--vkui_internal--dismiss_icon_padding) +
-      var(--vkui_internal--dismiss_icon_safe_offset)
+    var(--vkui_internal--dismiss_icon_height) +
+    var(--vkui_internal--dismiss_icon_padding) +
+    var(--vkui_internal--dismiss_icon_safe_offset)
   );
           padding-block-start: calc(
-    var(--vkui_internal--dismiss_icon_height) + var(--vkui_internal--dismiss_icon_padding) +
-      var(--vkui_internal--dismiss_icon_safe_offset)
+    var(--vkui_internal--dismiss_icon_height) +
+    var(--vkui_internal--dismiss_icon_padding) +
+    var(--vkui_internal--dismiss_icon_safe_offset)
   );
 }
 
@@ -103,13 +105,15 @@
 
 .withSafeZone.desktop .container {
   -webkit-padding-before: calc(
-    var(--vkui_internal--dismiss_icon_height) + var(--vkui_internal--dismiss_icon_padding) +
-      var(--vkui_internal--dismiss_icon_safe_offset) +
-      var(--vkui_internal--dismiss_icon_desktop_offset)
+    var(--vkui_internal--dismiss_icon_height) +
+    var(--vkui_internal--dismiss_icon_padding) +
+    var(--vkui_internal--dismiss_icon_safe_offset) +
+    var(--vkui_internal--dismiss_icon_desktop_offset)
   );
           padding-block-start: calc(
-    var(--vkui_internal--dismiss_icon_height) + var(--vkui_internal--dismiss_icon_padding) +
-      var(--vkui_internal--dismiss_icon_safe_offset) +
-      var(--vkui_internal--dismiss_icon_desktop_offset)
+    var(--vkui_internal--dismiss_icon_height) +
+    var(--vkui_internal--dismiss_icon_padding) +
+    var(--vkui_internal--dismiss_icon_safe_offset) +
+    var(--vkui_internal--dismiss_icon_desktop_offset)
   );
 }

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

@@ -26,7 +26,8 @@
 
 .hostMobileSafeAreaInsetTopWithCustomOffset {
   max-block-size: calc(
-    100% - (var(--vkui_internal--safe_area_inset_top) + var(--vkui_internal--panel_header_height))
+    100% -
+    (var(--vkui_internal--safe_area_inset_top) + var(--vkui_internal--panel_header_height))
   );
 }
 

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

@@ -15,9 +15,11 @@
   padding-inline: 8px;
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-
-.host :global(.vkuiIcon--dismiss_24), /* Note: <Icon24Dismiss /> по документации используется только для iOS  */
+.host
+  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  :global(
+    .vkuiIcon--dismiss_24
+  ) /* Note: <Icon24Dismiss /> по документации используется только для iOS  */,
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .host :global(.vkuiIcon--cancel_24) {
   color: var(--vkui--color_icon_secondary);

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

@@ -87,10 +87,12 @@
   -webkit-padding-after: var(--vkui_internal--tabbar_height);
           padding-block-end: var(--vkui_internal--tabbar_height);
   -webkit-padding-after: calc(
-    var(--vkui_internal--safe_area_inset_bottom) + var(--vkui_internal--tabbar_height)
+    var(--vkui_internal--safe_area_inset_bottom) +
+    var(--vkui_internal--tabbar_height)
   );
           padding-block-end: calc(
-    var(--vkui_internal--safe_area_inset_bottom) + var(--vkui_internal--tabbar_height)
+    var(--vkui_internal--safe_area_inset_bottom) +
+    var(--vkui_internal--tabbar_height)
   );
 }
 

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

@@ -281,7 +281,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 .vkcom.sizeXRegular:not(:global(.vkuiInternalModalPageHeader__in)):not(.sep):not(.trnsp)
-  .in::after {
+.in::after {
   position: absolute;
   inset-block-end: 0;
   inset-inline: var(--vkui--size_border--regular);

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

@@ -89,8 +89,8 @@
 }
 
 /**
-* VKCOM
-*/
+ * VKCOM
+ */
 
 .vkcom {
   color: var(--vkui--color_text_secondary);

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

@@ -38,8 +38,8 @@
 
 .closing .overlay {
   opacity: 0;
-  /* prettier-ignore */
-  animation: animation-full-fade-out var(--vkui--animation_duration_m) var(--vkui--animation_easing_default) both;
+  animation: animation-full-fade-out var(--vkui--animation_duration_m)
+    var(--vkui--animation_easing_default) both;
 }
 
 .masked .overlay {

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

@@ -4,8 +4,9 @@
   align-items: center;
   transform: translateX(
     calc(
-      -1px * var(--vkui_internal_Removable_remove_offset) *
-        var(--vkui_internal_Removable_remove_offset_direction)
+      -1px *
+      var(--vkui_internal_Removable_remove_offset) *
+      var(--vkui_internal_Removable_remove_offset_direction)
     )
   );
 
@@ -135,7 +136,8 @@
 
 :global(.vkuiInternalFormItem--removable) .content,
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormLayoutGroup--removable) .content {
+  :global(.vkuiInternalFormLayoutGroup--removable)
+  .content {
   flex-wrap: wrap;
   align-items: flex-start;
 }
@@ -148,7 +150,10 @@
 
 :global(.vkuiInternalFormItem--withTop) :global(.vkuiInternalFormItem__removable) ~ .offset,
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormLayoutGroup--removable) :global(.vkuiInternalFormItem--withTop) ~ .offset {
+  :global(.vkuiInternalFormLayoutGroup--removable)
+  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  :global(.vkuiInternalFormItem--withTop)
+  ~ .offset {
   display: block;
   order: -1;
   inline-size: 100%;

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

@@ -25,13 +25,13 @@
 }
 
 .viewShowForward {
-  /* prettier-ignore */
-  animation: root-animation-show-forward var(--vkui_internal--root_animation_duration) var(--vkui--animation_easing_platform);
+  animation: root-animation-show-forward var(--vkui_internal--root_animation_duration)
+    var(--vkui--animation_easing_platform);
 }
 
 .viewHideBack {
-  /* prettier-ignore */
-  animation: root-animation-hide-back var(--vkui_internal--root_animation_duration) var(--vkui--animation_easing_platform) forwards;
+  animation: root-animation-hide-back var(--vkui_internal--root_animation_duration)
+    var(--vkui--animation_easing_platform) forwards;
 }
 
 .transition .view {
@@ -63,13 +63,13 @@
 }
 
 .ios .viewShowBack::after {
-  /* prettier-ignore */
-  animation: root-ios-overlay-animation-show-back var(--vkui_internal--root_animation_duration) var(--vkui--animation_easing_platform) forwards;
+  animation: root-ios-overlay-animation-show-back var(--vkui_internal--root_animation_duration)
+    var(--vkui--animation_easing_platform) forwards;
 }
 
 .ios .viewHideForward::after {
-  /* prettier-ignore */
-  animation: root-ios-overlay-animation-hide-forward var(--vkui_internal--root_animation_duration) var(--vkui--animation_easing_platform);
+  animation: root-ios-overlay-animation-hide-forward var(--vkui_internal--root_animation_duration)
+    var(--vkui--animation_easing_platform);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {

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

@@ -38,7 +38,7 @@
   flex-basis: 0%;
   /**
    * Костыль для PanelHeader. Необходимо для растягивания на всю ширину.
-  */
+   */
   inline-size: 10000px;
   block-size: var(--vkui_internal--search_height);
   overflow: hidden;
@@ -80,7 +80,6 @@
   box-sizing: border-box;
   flex-grow: 1;
   inline-size: -webkit-fill-available;
-  inline-size: -moz-available;
   inline-size: stretch; /* автопрефиксер добавит фолбеки https://caniuse.com/mdn-css_properties_width_stretch */
   min-inline-size: 0;
   max-inline-size: 100%;
@@ -152,7 +151,7 @@
   transform: translate3d(
     calc(
       var(--vkui_internal--search_shift_direction) *
-        calc(100% - var(--vkui_internal--search_icon_size))
+      calc(100% - var(--vkui_internal--search_icon_size))
     ),
     0,
     0

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

@@ -37,13 +37,15 @@
 
 .placementBottomStart {
   --vkui_internal--snackbar_direction: calc(
-    -1 * var(--vkui_internal--snackbar_animation_text_direction)
+    -1 *
+    var(--vkui_internal--snackbar_animation_text_direction)
   );
 }
 
 .placementBottomEnd {
   --vkui_internal--snackbar_direction: calc(
-    1 * var(--vkui_internal--snackbar_animation_text_direction)
+    1 *
+    var(--vkui_internal--snackbar_animation_text_direction)
   );
 }
 

package/dist/cssm/components/Snackbar/subcomponents/Basic/Basic.module.css

@@ -1,11 +1,11 @@
 .body {
   --vkui_internal--snackbar-body_layout_vertical_action_shift: calc(
     -1 *
-      (
-        var(--vkui--size_button_small_height--compact) -
-          var(--vkui--font_subhead--line_height--compact)
-      ) /
-      2
+    (
+      var(--vkui--size_button_small_height--compact) -
+      var(--vkui--font_subhead--line_height--compact)
+    ) /
+    2
   );
 
   box-sizing: border-box;
@@ -21,11 +21,11 @@
 .sizeYRegular {
   --vkui_internal--snackbar-body_layout_vertical_action_shift: calc(
     -1 *
-      (
-        var(--vkui--size_button_small_height--regular) -
-          var(--vkui--font_subhead--line_height--regular)
-      ) /
-      2
+    (
+      var(--vkui--size_button_small_height--regular) -
+      var(--vkui--font_subhead--line_height--regular)
+    ) /
+    2
   );
 }
 
@@ -33,11 +33,11 @@
   .sizeYNone {
     --vkui_internal--snackbar-body_layout_vertical_action_shift: calc(
       -1 *
-        (
-          var(--vkui--size_button_small_height--regular) -
-            var(--vkui--font_subhead--line_height--regular)
-        ) /
-        2
+      (
+        var(--vkui--size_button_small_height--regular) -
+        var(--vkui--font_subhead--line_height--regular)
+      ) /
+      2
     );
   }
 }

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

@@ -18,19 +18,23 @@
   position: relative;
   z-index: var(--vkui_internal--z_index_split_layout_panel_header);
   -webkit-margin-before: calc(
-    -1 * (var(--vkui_internal--panel_header_height) + var(--vkui_internal--safe_area_inset_top))
+    -1 *
+    (var(--vkui_internal--panel_header_height) + var(--vkui_internal--safe_area_inset_top))
   );
           margin-block-start: calc(
-    -1 * (var(--vkui_internal--panel_header_height) + var(--vkui_internal--safe_area_inset_top))
+    -1 *
+    (var(--vkui_internal--panel_header_height) + var(--vkui_internal--safe_area_inset_top))
   );
 }
 
 .ios .innerHeader {
   -webkit-margin-before: calc(
-    -1 * (var(--vkui_internal--panel_header_height) + var(--vkui_internal--safe_area_inset_top))
+    -1 *
+    (var(--vkui_internal--panel_header_height) + var(--vkui_internal--safe_area_inset_top))
   );
           margin-block-start: calc(
-    -1 * (var(--vkui_internal--panel_header_height) + var(--vkui_internal--safe_area_inset_top))
+    -1 *
+    (var(--vkui_internal--panel_header_height) + var(--vkui_internal--safe_area_inset_top))
   );
 }
 

package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { hasReactNode } from "@vkontakte/vkjs";
+import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { HorizontalScroll } from "../HorizontalScroll/HorizontalScroll.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import styles from "./SubnavigationBar.module.css";
@@ -8,7 +8,7 @@ const defaultScrollToLeft = (x)=>x - 240;
 const defaultScrollToRight = (x)=>x + 240;
 /**
  * @see https://vkui.io/components/subnavigation-bar
- */ export const SubnavigationBar = ({ fixed = false, children, showArrows = true, getScrollToLeft = defaultScrollToLeft, getScrollToRight = defaultScrollToRight, scrollAnimationDuration, ...restProps })=>{
+ */ export const SubnavigationBar = ({ fixed = false, children, showArrows = true, noPadding = false, arrowSize = 's', getScrollToLeft = defaultScrollToLeft, getScrollToRight = defaultScrollToRight, scrollAnimationDuration, ...restProps })=>{
     let ScrollWrapper;
     let scrollWrapperProps = {};
     if (fixed) {
@@ -17,6 +17,7 @@ const defaultScrollToRight = (x)=>x + 240;
         ScrollWrapper = HorizontalScroll;
         scrollWrapperProps = {
             showArrows,
+            arrowSize,
             getScrollToLeft,
             getScrollToRight,
             scrollAnimationDuration
@@ -29,7 +30,7 @@ const defaultScrollToRight = (x)=>x + 240;
             className: styles.in,
             ...scrollWrapperProps,
             children: /*#__PURE__*/ _jsx("ul", {
-                className: styles.scrollIn,
+                className: classNames(styles.scrollIn, noPadding && styles.noPadding),
                 children: React.Children.map(children, (child, idx)=>hasReactNode(child) ? /*#__PURE__*/ _jsx("li", {
                         className: styles.item,
                         children: child

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  HorizontalScroll,\n  type HorizontalScrollProps,\n  type ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  /**\n   * Отключение возможности прокручивания компонента по горизонтали.\n   */\n  fixed?: boolean;\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkui.io/components/subnavigation-bar\n */\nexport const SubnavigationBar = ({\n  fixed = false,\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps): React.ReactNode => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (fixed) {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <RootComponent baseClassName={fixed && styles.modeFixed} {...restProps}>\n      <ScrollWrapper className={styles.in} {...scrollWrapperProps}>\n        <ul className={styles.scrollIn}>\n          {React.Children.map(children, (child, idx) =>\n            hasReactNode(child) ? (\n              <li key={idx} className={styles.item}>\n                {child}\n              </li>\n            ) : null,\n          )}\n        </ul>\n      </ScrollWrapper>\n    </RootComponent>\n  );\n};\n"],"names":["React","hasReactNode","HorizontalScroll","RootComponent","styles","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","fixed","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","baseClassName","modeFixed","className","in","ul","scrollIn","Children","map","child","idx","li","item"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SACEC,gBAAgB,QAGX,0CAAuC;AAC9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,gCAAgC;AAcnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,QAAQ,KAAK,EACbC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBP,mBAAmB,EACrCQ,mBAAmBN,oBAAoB,EACvCO,uBAAuB,EACvB,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIR,OAAO;QACTO,gBAAgB;IAClB,OAAO;QACLA,gBAAgBd;QAChBe,qBAAqB;YACnBN;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,KAACX;QAAce,eAAeT,SAASL,OAAOe,SAAS;QAAG,GAAGJ,SAAS;kBACpE,cAAA,KAACC;YAAcI,WAAWhB,OAAOiB,EAAE;YAAG,GAAGJ,kBAAkB;sBACzD,cAAA,KAACK;gBAAGF,WAAWhB,OAAOmB,QAAQ;0BAC3BvB,MAAMwB,QAAQ,CAACC,GAAG,CAACf,UAAU,CAACgB,OAAOC,MACpC1B,aAAayB,uBACX,KAACE;wBAAaR,WAAWhB,OAAOyB,IAAI;kCACjCH;uBADMC,OAGP;;;;AAMhB,EAAE"}
+{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  HorizontalScroll,\n  type HorizontalScrollProps,\n  type ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      | 'showArrows'\n      | 'arrowSize'\n      | 'getScrollToLeft'\n      | 'getScrollToRight'\n      | 'scrollAnimationDuration'\n    > {\n  /**\n   * Отключение возможности прокручивания компонента по горизонтали.\n   */\n  fixed?: boolean;\n  /**\n   * Отключает отступы. Рекомендуется использовать с `mode=\"outline\"` у [`SubnavigationButton`](https://vkui.io/components/subnavigation-button).\n   */\n  noPadding?: boolean;\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkui.io/components/subnavigation-bar\n */\nexport const SubnavigationBar = ({\n  fixed = false,\n  children,\n  showArrows = true,\n  noPadding = false,\n  arrowSize = 's',\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps): React.ReactNode => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (fixed) {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      arrowSize,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <RootComponent baseClassName={fixed && styles.modeFixed} {...restProps}>\n      <ScrollWrapper className={styles.in} {...scrollWrapperProps}>\n        <ul className={classNames(styles.scrollIn, noPadding && styles.noPadding)}>\n          {React.Children.map(children, (child, idx) =>\n            hasReactNode(child) ? (\n              <li key={idx} className={styles.item}>\n                {child}\n              </li>\n            ) : null,\n          )}\n        </ul>\n      </ScrollWrapper>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","HorizontalScroll","RootComponent","styles","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","fixed","children","showArrows","noPadding","arrowSize","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","baseClassName","modeFixed","className","in","ul","scrollIn","Children","map","child","idx","li","item"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SACEC,gBAAgB,QAGX,0CAAuC;AAC9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,gCAAgC;AAsBnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,QAAQ,KAAK,EACbC,QAAQ,EACRC,aAAa,IAAI,EACjBC,YAAY,KAAK,EACjBC,YAAY,GAAG,EACfC,kBAAkBT,mBAAmB,EACrCU,mBAAmBR,oBAAoB,EACvCS,uBAAuB,EACvB,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIV,OAAO;QACTS,gBAAgB;IAClB,OAAO;QACLA,gBAAgBhB;QAChBiB,qBAAqB;YACnBR;YACAE;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,KAACb;QAAciB,eAAeX,SAASL,OAAOiB,SAAS;QAAG,GAAGJ,SAAS;kBACpE,cAAA,KAACC;YAAcI,WAAWlB,OAAOmB,EAAE;YAAG,GAAGJ,kBAAkB;sBACzD,cAAA,KAACK;gBAAGF,WAAWtB,WAAWI,OAAOqB,QAAQ,EAAEb,aAAaR,OAAOQ,SAAS;0BACrEb,MAAM2B,QAAQ,CAACC,GAAG,CAACjB,UAAU,CAACkB,OAAOC,MACpC5B,aAAa2B,uBACX,KAACE;wBAAaR,WAAWlB,OAAO2B,IAAI;kCACjCH;uBADMC,OAGP;;;;AAMhB,EAAE"}

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

@@ -17,6 +17,15 @@
   content: '';
 }
 
+.noPadding {
+  padding: 0;
+}
+
+.noPadding::before,
+.noPadding::after {
+  display: none;
+}
+
 .item {
   display: flex;
   list-style-type: none;