@vkontakte/vkui 5.4.2 → 5.5.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { runTapticImpactOccurred } from '../../lib/taptic';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnyFunction, HasChildren } from '../../types';\nimport { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nfunction cancelEvent(event: any) {\n  if (!event) {\n    return false;\n  }\n  while (event.originalEvent) {\n    event = event.originalEvent;\n  }\n  if (event.preventDefault && event.cancelable) {\n    event.preventDefault();\n  }\n  if (event.stopPropagation) {\n    event.stopPropagation();\n  }\n  return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n}\n\nconst TOUCH_MOVE_EVENT_PARAMS = {\n  cancelable: true,\n  passive: false,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n  children,\n  isFetching,\n  onRefresh,\n  className,\n  ...restProps\n}: PullToRefreshProps) => {\n  const platform = usePlatform();\n  const scroll = useScroll();\n  const { document } = useDOM();\n  const prevIsFetching = usePrevious(isFetching);\n\n  const initParams = React.useMemo(\n    () => ({\n      start: platform === Platform.IOS ? -10 : -45,\n      max: platform === Platform.IOS ? 50 : 80,\n      maxY: platform === Platform.IOS ? 400 : 80,\n      refreshing: platform === Platform.IOS ? 36 : 50,\n      positionMultiplier: platform === Platform.IOS ? 0.21 : 1,\n    }),\n    [platform],\n  );\n\n  const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n  const [watching, setWatching] = React.useState(false);\n  const [refreshing, setRefreshing] = React.useState(false);\n  const [canRefresh, setCanRefresh] = React.useState(false);\n  const [touchDown, setTouchDown] = React.useState(false);\n  const prevTouchDown = usePrevious(touchDown);\n\n  const touchY = React.useRef(0);\n  const [contentShift, setContentShift] = React.useState(0);\n  const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n  const onWindowTouchMove = (event: Event) => {\n    if (refreshing) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);\n\n  const resetRefreshingState = React.useCallback(() => {\n    setWatching(false);\n    setCanRefresh(false);\n    setRefreshing(false);\n    setSpinnerY(initParams.start);\n    setSpinnerProgress(0);\n    setContentShift(0);\n  }, [initParams]);\n\n  const onRefreshingFinish = React.useCallback(() => {\n    if (!touchDown) {\n      resetRefreshingState();\n    }\n  }, [touchDown, resetRefreshingState]);\n\n  const { set: setWaitFetchingTimeout, clear: clearWaitFetchingTimeout } = useTimeout(\n    onRefreshingFinish,\n    1000,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n      onRefreshingFinish();\n    }\n  }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n      clearWaitFetchingTimeout();\n    }\n  }, [isFetching, prevIsFetching, clearWaitFetchingTimeout]);\n\n  const runRefreshing = React.useCallback(() => {\n    if (!refreshing && onRefresh) {\n      // cleanup if the consumer does not start fetching in 1s\n      setWaitFetchingTimeout();\n\n      setRefreshing(true);\n      setSpinnerY((prevSpinnerY) =>\n        platform === Platform.IOS ? prevSpinnerY : initParams.refreshing,\n      );\n\n      onRefresh();\n      runTapticImpactOccurred('light');\n    }\n  }, [refreshing, onRefresh, setWaitFetchingTimeout, platform, initParams.refreshing]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n      if (!refreshing && canRefresh) {\n        runRefreshing();\n      } else if (refreshing && !isFetching) {\n        // only iOS can start refresh before gesture end\n        resetRefreshingState();\n      } else {\n        // refreshing && isFetching: refresh in progress\n        // OR !refreshing && !canRefresh: pull was not strong enough\n        setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n        setSpinnerProgress(0);\n        setContentShift(0);\n      }\n    }\n  }, [\n    initParams,\n    prevIsFetching,\n    isFetching,\n    onRefreshingFinish,\n    prevTouchDown,\n    touchDown,\n    refreshing,\n    canRefresh,\n    runRefreshing,\n  ]);\n\n  const onTouchStart = (e: TouchEvent) => {\n    if (refreshing) {\n      cancelEvent(e);\n    }\n    setTouchDown(true);\n  };\n\n  const onTouchMove = (e: TouchEvent) => {\n    const { isY, shiftY } = e;\n    const { start, max } = initParams;\n    const pageYOffset = scroll?.getScroll().y;\n\n    if (watching && touchDown) {\n      cancelEvent(e);\n\n      const { positionMultiplier, maxY } = initParams;\n\n      const shift = Math.max(0, shiftY - touchY.current);\n\n      const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n      const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n      setSpinnerY(currentY);\n      setSpinnerProgress(clamp(progress, 0, 80));\n      setCanRefresh(progress > 80);\n      setContentShift((currentY + 10) * 2.3);\n\n      if (progress > 85 && !refreshing && platform === Platform.IOS) {\n        runRefreshing();\n      }\n    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n      cancelEvent(e);\n\n      touchY.current = shiftY;\n      setWatching(true);\n      setSpinnerY(start);\n      setSpinnerProgress(0);\n    }\n  };\n\n  const onTouchEnd = () => {\n    setWatching(false);\n    setTouchDown(false);\n  };\n\n  const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n  let contentTransform = '';\n\n  if (platform === Platform.IOS && refreshing && !touchDown) {\n    contentTransform = 'translate3d(0, 100px, 0)';\n  } else if (platform === Platform.IOS && (contentShift || refreshing)) {\n    contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n  }\n\n  return (\n    <TouchRootContext.Provider value={true}>\n      <Touch\n        {...restProps}\n        onStart={onTouchStart}\n        onMove={onTouchMove}\n        onEnd={onTouchEnd}\n        className={classNames(\n          styles['PullToRefresh'],\n          platform === Platform.IOS && styles['PullToRefresh--ios'],\n          watching && styles['PullToRefresh--watching'],\n          refreshing && styles['PullToRefresh--refreshing'],\n          className,\n        )}\n      >\n        <FixedLayout className={styles['PullToRefresh__controls']}>\n          <PullToRefreshSpinner\n            style={{\n              transform: spinnerTransform,\n              WebkitTransform: spinnerTransform,\n              opacity: watching || refreshing || canRefresh ? 1 : 0,\n            }}\n            on={refreshing}\n            progress={refreshing ? undefined : spinnerProgress}\n          />\n        </FixedLayout>\n\n        <div\n          className={styles['PullToRefresh__content']}\n          style={{\n            transform: contentTransform,\n            WebkitTransform: contentTransform,\n          }}\n        >\n          {children}\n        </div>\n      </Touch>\n    </TouchRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","clamp","useGlobalEventListener","usePlatform","usePrevious","useTimeout","useDOM","Platform","runTapticImpactOccurred","useIsomorphicLayoutEffect","useScroll","FixedLayout","Touch","TouchRootContext","PullToRefreshSpinner","styles","cancelEvent","event","originalEvent","preventDefault","cancelable","stopPropagation","TOUCH_MOVE_EVENT_PARAMS","passive","PullToRefresh","children","isFetching","onRefresh","className","restProps","platform","scroll","document","prevIsFetching","initParams","useMemo","start","IOS","max","maxY","refreshing","positionMultiplier","spinnerY","setSpinnerY","useState","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","onWindowTouchMove","resetRefreshingState","useCallback","onRefreshingFinish","set","setWaitFetchingTimeout","clear","clearWaitFetchingTimeout","undefined","runRefreshing","prevSpinnerY","onTouchStart","e","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","current","currentY","progress","abs","onTouchEnd","spinnerTransform","contentTransform","Provider","value","onStart","onMove","onEnd","style","transform","WebkitTransform","opacity","on","div"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { runTapticImpactOccurred } from '../../lib/taptic';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnyFunction, HasChildren } from '../../types';\nimport { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nfunction cancelEvent(event: any) {\n  if (!event) {\n    return false;\n  }\n  while (event.originalEvent) {\n    event = event.originalEvent;\n  }\n  if (event.preventDefault && event.cancelable) {\n    event.preventDefault();\n  }\n  if (event.stopPropagation) {\n    event.stopPropagation();\n  }\n  return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n}\n\nconst TOUCH_MOVE_EVENT_PARAMS = {\n  cancelable: true,\n  passive: false,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n  children,\n  isFetching,\n  onRefresh,\n  className,\n  ...restProps\n}: PullToRefreshProps) => {\n  const platform = usePlatform();\n  const scroll = useScroll();\n  const { document } = useDOM();\n  const prevIsFetching = usePrevious(isFetching);\n\n  const initParams = React.useMemo(\n    () => ({\n      start: platform === Platform.IOS ? -10 : -45,\n      max: platform === Platform.IOS ? 50 : 80,\n      maxY: platform === Platform.IOS ? 400 : 80,\n      refreshing: platform === Platform.IOS ? 36 : 50,\n      positionMultiplier: platform === Platform.IOS ? 0.21 : 1,\n    }),\n    [platform],\n  );\n\n  const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n  const [watching, setWatching] = React.useState(false);\n  const [refreshing, setRefreshing] = React.useState(false);\n  const [canRefresh, setCanRefresh] = React.useState(false);\n  const [touchDown, setTouchDown] = React.useState(false);\n  const prevTouchDown = usePrevious(touchDown);\n\n  const touchY = React.useRef(0);\n  const [contentShift, setContentShift] = React.useState(0);\n  const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n  const onWindowTouchMove = (event: Event) => {\n    if (refreshing) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);\n\n  const resetRefreshingState = React.useCallback(() => {\n    setWatching(false);\n    setCanRefresh(false);\n    setRefreshing(false);\n    setSpinnerY(initParams.start);\n    setSpinnerProgress(0);\n    setContentShift(0);\n  }, [initParams]);\n\n  const onRefreshingFinish = React.useCallback(() => {\n    if (!touchDown) {\n      resetRefreshingState();\n    }\n  }, [touchDown, resetRefreshingState]);\n\n  const { set: setWaitFetchingTimeout, clear: clearWaitFetchingTimeout } = useTimeout(\n    onRefreshingFinish,\n    1000,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n      onRefreshingFinish();\n    }\n  }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n      clearWaitFetchingTimeout();\n    }\n  }, [isFetching, prevIsFetching, clearWaitFetchingTimeout]);\n\n  const runRefreshing = React.useCallback(() => {\n    if (!refreshing && onRefresh) {\n      // cleanup if the consumer does not start fetching in 1s\n      setWaitFetchingTimeout();\n\n      setRefreshing(true);\n      setSpinnerY((prevSpinnerY) =>\n        platform === Platform.IOS ? prevSpinnerY : initParams.refreshing,\n      );\n\n      onRefresh();\n      runTapticImpactOccurred('light');\n    }\n  }, [refreshing, onRefresh, setWaitFetchingTimeout, platform, initParams.refreshing]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n      if (!refreshing && canRefresh) {\n        runRefreshing();\n      } else if (refreshing && !isFetching) {\n        // only iOS can start refresh before gesture end\n        resetRefreshingState();\n      } else {\n        // refreshing && isFetching: refresh in progress\n        // OR !refreshing && !canRefresh: pull was not strong enough\n        setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n        setSpinnerProgress(0);\n        setContentShift(0);\n      }\n    }\n  }, [\n    initParams,\n    prevIsFetching,\n    isFetching,\n    onRefreshingFinish,\n    prevTouchDown,\n    touchDown,\n    refreshing,\n    canRefresh,\n    runRefreshing,\n  ]);\n\n  const onTouchStart = (e: TouchEvent) => {\n    if (refreshing) {\n      cancelEvent(e);\n    }\n    setTouchDown(true);\n  };\n\n  const onTouchMove = (e: TouchEvent) => {\n    const { isY, shiftY } = e;\n    const { start, max } = initParams;\n    const pageYOffset = scroll?.getScroll().y;\n\n    if (watching && touchDown) {\n      cancelEvent(e);\n\n      const { positionMultiplier, maxY } = initParams;\n\n      const shift = Math.max(0, shiftY - touchY.current);\n\n      const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n      const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n      setSpinnerY(currentY);\n      setSpinnerProgress(clamp(progress, 0, 80));\n      setCanRefresh(progress > 80);\n      setContentShift((currentY + 10) * 2.3);\n\n      if (progress > 85 && !refreshing && platform === Platform.IOS) {\n        runRefreshing();\n      }\n    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n      cancelEvent(e);\n\n      touchY.current = shiftY;\n      setWatching(true);\n      setSpinnerY(start);\n      setSpinnerProgress(0);\n    }\n  };\n\n  const onTouchEnd = () => {\n    setWatching(false);\n    setTouchDown(false);\n  };\n\n  const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n  let contentTransform = '';\n\n  if (platform === Platform.IOS && refreshing && !touchDown) {\n    contentTransform = 'translate3d(0, 100px, 0)';\n  } else if (platform === Platform.IOS && (contentShift || refreshing)) {\n    contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n  }\n\n  return (\n    <TouchRootContext.Provider value={true}>\n      <Touch\n        {...restProps}\n        onStart={onTouchStart}\n        onMove={onTouchMove}\n        onEnd={onTouchEnd}\n        className={classNames(\n          styles['PullToRefresh'],\n          platform === Platform.IOS && styles['PullToRefresh--ios'],\n          watching && styles['PullToRefresh--watching'],\n          refreshing && styles['PullToRefresh--refreshing'],\n          className,\n        )}\n      >\n        <FixedLayout className={styles['PullToRefresh__controls']}>\n          <PullToRefreshSpinner\n            style={{\n              transform: spinnerTransform,\n              WebkitTransform: spinnerTransform,\n              opacity: watching || refreshing || canRefresh ? 1 : 0,\n            }}\n            on={refreshing}\n            progress={refreshing ? undefined : spinnerProgress}\n          />\n        </FixedLayout>\n\n        <div\n          className={styles['PullToRefresh__content']}\n          style={{\n            transform: contentTransform,\n            WebkitTransform: contentTransform,\n          }}\n        >\n          {children}\n        </div>\n      </Touch>\n    </TouchRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","clamp","useGlobalEventListener","usePlatform","usePrevious","useTimeout","useDOM","Platform","runTapticImpactOccurred","useIsomorphicLayoutEffect","useScroll","FixedLayout","Touch","TouchRootContext","PullToRefreshSpinner","styles","cancelEvent","event","originalEvent","preventDefault","cancelable","stopPropagation","TOUCH_MOVE_EVENT_PARAMS","passive","PullToRefresh","children","isFetching","onRefresh","className","restProps","platform","scroll","document","prevIsFetching","initParams","useMemo","start","IOS","max","maxY","refreshing","positionMultiplier","spinnerY","setSpinnerY","useState","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","onWindowTouchMove","resetRefreshingState","useCallback","onRefreshingFinish","set","setWaitFetchingTimeout","clear","clearWaitFetchingTimeout","undefined","runRefreshing","prevSpinnerY","onTouchStart","e","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","current","currentY","progress","abs","onTouchEnd","spinnerTransform","contentTransform","Provider","value","onStart","onMove","onEnd","style","transform","WebkitTransform","opacity","on","div"],"mappings":"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"}

package/dist/cssm/components/PullToRefresh/PullToRefreshSpinner.d.ts

@@ -6,4 +6,4 @@ export interface PullToRefreshSpinnerProps extends React.HTMLAttributes<HTMLDivE
     'progress'?: number;
     'aria-label'?: string;
 }
-export declare const PullToRefreshSpinner: ({ on, size, strokeWidth, style, progress, "aria-label": ariaLabel, }: PullToRefreshSpinnerProps) => JSX.Element;
+export declare const PullToRefreshSpinner: ({ on, size, strokeWidth, style, progress, "aria-label": ariaLabel, }: PullToRefreshSpinnerProps) => React.JSX.Element;

package/dist/cssm/components/PullToRefresh/PullToRefreshSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PullToRefresh.module.css';\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  'size'?: number;\n  'strokeWidth'?: number;\n  'on'?: boolean;\n  'progress'?: number;\n  'aria-label'?: string;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  style,\n  progress = 0,\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <div\n      className={classNames(\n        styles['PullToRefresh__spinner'],\n        on && styles['PullToRefresh__spinner--on'],\n      )}\n      style={style}\n      aria-label={on ? ariaLabel : undefined}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles['PullToRefresh__spinner-self']}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles['PullToRefresh__spinner-path']}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","calcStrokeDashOffset","value","radius","progress","Math","PI","PullToRefreshSpinner","on","size","strokeWidth","style","ariaLabel","dasharray","circleCenter","dashoffset","div","className","aria-label","undefined","svg","role","width","height","viewBox","xmlns","g","transformOrigin","circle","fill","strokeDasharray","strokeDashoffset","strokeLinecap","cx","cy","r"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,6BAA6B;AAEhD,SAASC,qBAAqBC,KAAa,EAAEC,MAAc,EAAE;IAC3D,MAAMC,WAAWF,QAAQ;IACzB,OAAO,IAAIG,KAAKC,EAAE,GAAGH,SAAU,CAAA,IAAIC,QAAO;AAC5C;AAUA,OAAO,MAAMG,uBAAuB,CAAC,EACnCC,IAAK,IAAI,CAAA,EACTC,MAAO,GAAE,EACTC,aAAc,IAAG,EACjBC,MAAK,EACLP,UAAW,EAAC,EACZ,cAAcQ,YAAY,0BAA0B,CAAA,EAC1B,GAAK;IAC/B,MAAMT,SAAS,MAAMM,OAAO,MAAMC;IAClC,MAAMG,YAAY,IAAIR,KAAKC,EAAE,GAAGH;IAChC,MAAMW,eAAe,MAAML;IAE3B,MAAMM,aAAad,qBAAqBO,KAAK,KAAKJ,QAAQ,EAAED;IAE5D,qBACE,oBAACa;QACCC,WAAWlB,WACTC,MAAM,CAAC,yBAAyB,EAChCQ,MAAMR,MAAM,CAAC,6BAA6B;QAE5CW,OAAOA;QACPO,cAAYV,KAAKI,YAAYO,SAAS;qBAEtC,oBAACC;QACCC,MAAK;QACLJ,WAAWjB,MAAM,CAAC,8BAA8B;QAChDW,OAAO;YACLW,OAAOb;YACPc,QAAQd;QACV;QACAe,SAAS,CAAC,IAAI,EAAEf,KAAK,CAAC,EAAEA,KAAK,CAAC;QAC9BgB,OAAM;qBAEN,oBAACC;QACCf,OAAO;YACLW,OAAOb;YACPc,QAAQd;YACRkB,iBAAiB,CAAC,EAAEb,aAAa,GAAG,EAAEA,aAAa,EAAE,CAAC;QACxD;qBAEA,oBAACc;QACCX,WAAWjB,MAAM,CAAC,8BAA8B;QAChD6B,MAAK;QACLC,iBAAiBjB;QACjBkB,kBAAkBhB;QAClBL,aAAaA;QACbsB,eAAc;QACdC,IAAInB;QACJoB,IAAIpB;QACJqB,GAAGhC;;AAMf,EAAE"}
+{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PullToRefresh.module.css';\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  'size'?: number;\n  'strokeWidth'?: number;\n  'on'?: boolean;\n  'progress'?: number;\n  'aria-label'?: string;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  style,\n  progress = 0,\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <div\n      className={classNames(\n        styles['PullToRefresh__spinner'],\n        on && styles['PullToRefresh__spinner--on'],\n      )}\n      style={style}\n      aria-label={on ? ariaLabel : undefined}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles['PullToRefresh__spinner-self']}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles['PullToRefresh__spinner-path']}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","calcStrokeDashOffset","value","radius","progress","Math","PI","PullToRefreshSpinner","on","size","strokeWidth","style","ariaLabel","dasharray","circleCenter","dashoffset","div","className","aria-label","undefined","svg","role","width","height","viewBox","xmlns","g","transformOrigin","circle","fill","strokeDasharray","strokeDashoffset","strokeLinecap","cx","cy","r"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,6BAA6B;AAEhD,SAASC,qBAAqBC,KAAa,EAAEC,MAAc;IACzD,MAAMC,WAAWF,QAAQ;IACzB,OAAO,IAAIG,KAAKC,KAAKH,SAAU,CAAA,IAAIC,QAAO;AAC5C;AAUA,OAAO,MAAMG,uBAAuB,CAAC,EACnCC,IAAK,KAAI,EACTC,MAAO,GAAE,EACTC,aAAc,IAAG,EACjBC,MAAK,EACLP,UAAW,EAAC,EACZ,cAAcQ,YAAY,0BAA0B,CAAA,EAC1B;IAC1B,MAAMT,SAAS,MAAMM,OAAO,MAAMC;IAClC,MAAMG,YAAY,IAAIR,KAAKC,KAAKH;IAChC,MAAMW,eAAe,MAAML;IAE3B,MAAMM,aAAad,qBAAqBO,KAAK,KAAKJ,UAAUD;IAE5D,qBACE,oBAACa;QACCC,WAAWlB,WACTC,MAAM,CAAC,yBAAyB,EAChCQ,MAAMR,MAAM,CAAC,6BAA6B;QAE5CW,OAAOA;QACPO,cAAYV,KAAKI,YAAYO;qBAE7B,oBAACC;QACCC,MAAK;QACLJ,WAAWjB,MAAM,CAAC,8BAA8B;QAChDW,OAAO;YACLW,OAAOb;YACPc,QAAQd;QACV;QACAe,SAAS,CAAC,IAAI,EAAEf,KAAK,CAAC,EAAEA,KAAK,CAAC;QAC9BgB,OAAM;qBAEN,oBAACC;QACCf,OAAO;YACLW,OAAOb;YACPc,QAAQd;YACRkB,iBAAiB,CAAC,EAAEb,aAAa,GAAG,EAAEA,aAAa,EAAE,CAAC;QACxD;qBAEA,oBAACc;QACCX,WAAWjB,MAAM,CAAC,8BAA8B;QAChD6B,MAAK;QACLC,iBAAiBjB;QACjBkB,kBAAkBhB;QAClBL,aAAaA;QACbsB,eAAc;QACdC,IAAInB;QACJoB,IAAIpB;QACJqB,GAAGhC;;AAMf,EAAE"}

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

@@ -7,4 +7,4 @@ export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>,
 /**
  * @see https://vkcom.github.io/VKUI/#/Radio
  */
-export declare const Radio: ({ children, description, style, className, getRootRef, titleAfter, getRef, ...restProps }: RadioProps) => JSX.Element;
+export declare const Radio: ({ children, description, style, className, getRootRef, titleAfter, getRef, ...restProps }: RadioProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Radio--sizeY-none'],\n  [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(\n        styles['Radio'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"radio\"\n        getRootRef={getRef}\n        className={styles['Radio__input']}\n      />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__title']}>\n            <span>{children}</span>\n            <div className={styles['Radio__titleAfter']}>{titleAfter}</div>\n          </div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","Radio","children","description","style","getRootRef","titleAfter","getRef","restProps","platform","sizeY","Component","REGULAR","activeEffectDelay","IOS","disabled","type","div","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,uBAAuB;AACrE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACN,SAASS,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;AACpD;AAEA,MAAMI,YAAY,CAACC,QAAyC;IAC1D,qBACE,oBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA,IAAW;QAAE,GAAGJ,KAAK;qBAC/E,oBAACK;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAKC,QAAO;QAAeC,aAAY;QAAIC,MAAK;sBAC1E,oBAACN;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAMI,WAAWjB,MAAM,CAAC,aAAa;QAAEgB,MAAK;;AAG5E;AAUA;;CAEC,GACD,OAAO,MAAME,QAAQ,CAAC,EACpBC,SAAQ,EACRC,YAAW,EACXC,MAAK,EACLJ,UAAS,EACTK,WAAU,EACVC,WAAU,EACVC,OAAM,EACN,GAAGC,WACQ,GAAK;IAChB,MAAMC,WAAWjC;IACjB,MAAM,EAAEkC,OAAQ,OAAM,EAAE,GAAGnC;IAE3B,qBACE,oBAACK;QACC+B,WAAU;QACVP,OAAOA;QACPJ,WAAW3B,WACTU,MAAM,CAAC,QAAQ,EACf2B,UAAUjC,SAASmC,OAAO,IAAI5B,eAAe,CAAC0B,MAAM,EACpDV;QAEFa,mBAAmBJ,aAAa/B,SAASoC,GAAG,GAAG,MAAMnC,mBAAmB;QACxEoC,UAAUP,UAAUO,QAAQ;QAC5BV,YAAYA;qBAEZ,oBAACvB;QACE,GAAG0B,SAAS;QACbG,WAAU;QACVK,MAAK;QACLX,YAAYE;QACZP,WAAWjB,MAAM,CAAC,eAAe;sBAEnC,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,mBAAmB;qBACxC,oBAACI;QAAUa,WAAWjB,MAAM,CAAC,cAAc;sBAC3C,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,iBAAiB;qBACtC,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,eAAe;qBACpC,oBAACmC,cAAMhB,yBACP,oBAACe;QAAIjB,WAAWjB,MAAM,CAAC,oBAAoB;OAAGuB,cAE/ChC,aAAa6B,8BACZ,oBAACtB;QAASmB,WAAWjB,MAAM,CAAC,qBAAqB;OAAGoB;AAMhE,EAAE"}
+{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Radio--sizeY-none'],\n  [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(\n        styles['Radio'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"radio\"\n        getRootRef={getRef}\n        className={styles['Radio__input']}\n      />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__title']}>\n            <span>{children}</span>\n            <div className={styles['Radio__titleAfter']}>{titleAfter}</div>\n          </div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","Radio","children","description","style","getRootRef","titleAfter","getRef","restProps","platform","sizeY","Component","REGULAR","activeEffectDelay","IOS","disabled","type","div","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,uBAAuB;AACrE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACN,SAASS,QAAQ,EAAEH,MAAM,CAAC,uBAAuB;AACpD;AAEA,MAAMI,YAAY,CAACC;IACjB,qBACE,oBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA;QAAa,GAAGJ,KAAK;qBAC/E,oBAACK;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAKC,QAAO;QAAeC,aAAY;QAAIC,MAAK;sBAC1E,oBAACN;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAMI,WAAWjB,MAAM,CAAC,aAAa;QAAEgB,MAAK;;AAG5E;AAUA;;CAEC,GACD,OAAO,MAAME,QAAQ,CAAC,EACpBC,SAAQ,EACRC,YAAW,EACXC,MAAK,EACLJ,UAAS,EACTK,WAAU,EACVC,WAAU,EACVC,OAAM,EACN,GAAGC,WACQ;IACX,MAAMC,WAAWjC;IACjB,MAAM,EAAEkC,OAAQ,OAAM,EAAE,GAAGnC;IAE3B,qBACE,oBAACK;QACC+B,WAAU;QACVP,OAAOA;QACPJ,WAAW3B,WACTU,MAAM,CAAC,QAAQ,EACf2B,UAAUjC,SAASmC,WAAW5B,eAAe,CAAC0B,MAAM,EACpDV;QAEFa,mBAAmBJ,aAAa/B,SAASoC,MAAM,MAAMnC;QACrDoC,UAAUP,UAAUO;QACpBV,YAAYA;qBAEZ,oBAACvB;QACE,GAAG0B,SAAS;QACbG,WAAU;QACVK,MAAK;QACLX,YAAYE;QACZP,WAAWjB,MAAM,CAAC,eAAe;sBAEnC,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,mBAAmB;qBACxC,oBAACI;QAAUa,WAAWjB,MAAM,CAAC,cAAc;sBAC3C,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,iBAAiB;qBACtC,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,eAAe;qBACpC,oBAACmC,cAAMhB,yBACP,oBAACe;QAAIjB,WAAWjB,MAAM,CAAC,oBAAoB;OAAGuB,cAE/ChC,aAAa6B,8BACZ,oBAACtB;QAASmB,WAAWjB,MAAM,CAAC,qBAAqB;OAAGoB;AAMhE,EAAE"}

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

@@ -5,4 +5,4 @@ export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup
  */
-export declare const RadioGroup: ({ mode, children, className, ...restProps }: RadioGroupProps) => JSX.Element;
+export declare const RadioGroup: ({ mode, children, className, ...restProps }: RadioGroupProps) => React.JSX.Element;

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

@@ -1,8 +1,11 @@
-/// <reference types="react" />
-import { UniversalSliderProps } from './UniversalSlider';
-export type Value = [number, number];
-export type RangeSliderProps = UniversalSliderProps<Value>;
+import * as React from 'react';
+import { type SliderMultipleProps } from '../Slider/Slider';
+export type RangeSliderProps = Omit<SliderMultipleProps, 'multiple'>;
 /**
  * @see https://vkcom.github.io/VKUI/#/RangeSlider
+ *
+ * @deprecated 5.5.0
+ *
+ * Компонент устарел и будет удален в v6. Используйте [`Slider`](#/Slider).
  */
-export declare const RangeSlider: ({ onChange, min, max, defaultValue, step, ...props }: RangeSliderProps) => JSX.Element;
+export declare const RangeSlider: ({ step, min, max, defaultValue, ...restProps }: RangeSliderProps) => React.JSX.Element;

package/dist/cssm/components/RangeSlider/RangeSlider.js

@@ -1,43 +1,22 @@
 import * as React from 'react';
-import { clamp } from '../../helpers/math';
-import { UniversalSlider } from './UniversalSlider';
+import { Slider } from '../Slider/Slider';
 /**
  * @see https://vkcom.github.io/VKUI/#/RangeSlider
- */ export const RangeSlider = ({ onChange , min =0 , max =100 , defaultValue =[
+ *
+ * @deprecated 5.5.0
+ *
+ * Компонент устарел и будет удален в v6. Используйте [`Slider`](#/Slider).
+ */ export const RangeSlider = ({ step =0 , min =0 , max =100 , defaultValue =[
     min,
     max
-] , step =0 , ...props })=>{
-    const isControlled = props.value !== undefined;
-    const [localValue, setValue] = React.useState(defaultValue);
-    const [start, end] = props.value || localValue;
-    const value = React.useMemo(()=>[
-            clamp(start, min, max),
-            clamp(end, min, max)
-        ], [
-        end,
-        max,
-        min,
-        start
-    ]);
-    const handleChange = React.useCallback((nextValue, event)=>{
-        if (props.disabled || value[0] === nextValue[0] && value[1] === nextValue[1]) {
-            return;
-        }
-        !isControlled && setValue(nextValue);
-        onChange && onChange(nextValue, event);
-    }, [
-        props.disabled,
-        value,
-        isControlled,
-        onChange
-    ]);
-    return /*#__PURE__*/ React.createElement(UniversalSlider, {
-        ...props,
-        value: value,
-        onChange: handleChange,
+] , ...restProps })=>{
+    return /*#__PURE__*/ React.createElement(Slider, {
+        step: step,
         min: min,
         max: max,
-        step: step
+        defaultValue: defaultValue,
+        ...restProps,
+        multiple: true
     });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { TouchEvent } from '../Touch/Touch';\nimport { UniversalSlider, UniversalSliderProps } from './UniversalSlider';\n\nexport type Value = [number, number];\nexport type RangeSliderProps = UniversalSliderProps<Value>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RangeSlider\n */\nexport const RangeSlider = ({\n  onChange,\n  min = 0,\n  max = 100,\n  defaultValue = [min, max],\n  step = 0,\n  ...props\n}: RangeSliderProps) => {\n  const isControlled = props.value !== undefined;\n\n  const [localValue, setValue] = React.useState(defaultValue);\n  const [start, end] = props.value || localValue;\n  const value = React.useMemo(\n    () => [clamp(start, min, max), clamp(end, min, max)] as Value,\n    [end, max, min, start],\n  );\n\n  const handleChange: RangeSliderProps['onChange'] = React.useCallback(\n    (nextValue: Value, event: TouchEvent) => {\n      if (props.disabled || (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n        return;\n      }\n      !isControlled && setValue(nextValue);\n      onChange && onChange(nextValue, event);\n    },\n    [props.disabled, value, isControlled, onChange],\n  );\n\n  return (\n    <UniversalSlider\n      {...props}\n      value={value}\n      onChange={handleChange}\n      min={min}\n      max={max}\n      step={step}\n    />\n  );\n};\n"],"names":["React","clamp","UniversalSlider","RangeSlider","onChange","min","max","defaultValue","step","props","isControlled","value","undefined","localValue","setValue","useState","start","end","useMemo","handleChange","useCallback","nextValue","event","disabled"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAE3C,SAASC,eAAe,QAA8B,oBAAoB;AAK1E;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,KAAM,EAAC,EACPC,KAAM,IAAG,EACTC,cAAe;IAACF;IAAKC;CAAI,CAAA,EACzBE,MAAO,EAAC,EACR,GAAGC,OACc,GAAK;IACtB,MAAMC,eAAeD,MAAME,KAAK,KAAKC;IAErC,MAAM,CAACC,YAAYC,SAAS,GAAGd,MAAMe,QAAQ,CAACR;IAC9C,MAAM,CAACS,OAAOC,IAAI,GAAGR,MAAME,KAAK,IAAIE;IACpC,MAAMF,QAAQX,MAAMkB,OAAO,CACzB,IAAM;YAACjB,MAAMe,OAAOX,KAAKC;YAAML,MAAMgB,KAAKZ,KAAKC;SAAK,EACpD;QAACW;QAAKX;QAAKD;QAAKW;KAAM;IAGxB,MAAMG,eAA6CnB,MAAMoB,WAAW,CAClE,CAACC,WAAkBC,QAAsB;QACvC,IAAIb,MAAMc,QAAQ,IAAKZ,KAAK,CAAC,EAAE,KAAKU,SAAS,CAAC,EAAE,IAAIV,KAAK,CAAC,EAAE,KAAKU,SAAS,CAAC,EAAE,EAAG;YAC9E;QACF,CAAC;QACD,CAACX,gBAAgBI,SAASO;QAC1BjB,YAAYA,SAASiB,WAAWC;IAClC,GACA;QAACb,MAAMc,QAAQ;QAAEZ;QAAOD;QAAcN;KAAS;IAGjD,qBACE,oBAACF;QACE,GAAGO,KAAK;QACTE,OAAOA;QACPP,UAAUe;QACVd,KAAKA;QACLC,KAAKA;QACLE,MAAMA;;AAGZ,EAAE"}
+{"version":3,"sources":["../../../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Slider, type SliderMultipleProps } from '../Slider/Slider';\n\nexport type RangeSliderProps = Omit<SliderMultipleProps, 'multiple'>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RangeSlider\n *\n * @deprecated 5.5.0\n *\n * Компонент устарел и будет удален в v6. Используйте [`Slider`](#/Slider).\n */\nexport const RangeSlider = ({\n  step = 0,\n  min = 0,\n  max = 100,\n  defaultValue = [min, max],\n  ...restProps\n}: RangeSliderProps) => {\n  return (\n    <Slider step={step} min={min} max={max} defaultValue={defaultValue} {...restProps} multiple />\n  );\n};\n"],"names":["React","Slider","RangeSlider","step","min","max","defaultValue","restProps","multiple"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAkC,mBAAmB;AAIpE;;;;;;CAMC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAO,EAAC,EACRC,KAAM,EAAC,EACPC,KAAM,IAAG,EACTC,cAAe;IAACF;IAAKC;CAAI,CAAA,EACzB,GAAGE,WACc;IACjB,qBACE,oBAACN;QAAOE,MAAMA;QAAMC,KAAKA;QAAKC,KAAKA;QAAKC,cAAcA;QAAe,GAAGC,SAAS;QAAEC,UAAAA;;AAEvF,EAAE"}

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

@@ -24,5 +24,5 @@ interface RemovableOwnProps extends React.HTMLAttributes<HTMLDivElement>, Remova
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
  */
-export declare const Removable: ({ getRootRef, children, onRemove, removePlaceholder, align, className, indent, ...restProps }: RemovableOwnProps) => JSX.Element;
+export declare const Removable: ({ getRootRef, children, onRemove, removePlaceholder, align, className, indent, ...restProps }: RemovableOwnProps) => React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps, HasChildren {\n  removePlaceholderString?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span className={styles['Removable__offset']} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles['Removable__remove']}\n        onClick={onRemove}\n      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  className,\n  indent = false,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNames(\n        platform === Platform.IOS && styles['Removable--ios'],\n        align === 'start' && styles['Removable--align-start'],\n        indent && styles['Removable--indent'],\n        className,\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","noop","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","getTitleFromChildren","IconButton","Tappable","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Component","getRootRef","Removable","align","indent","restProps","platform","ref","onRemoveClick","preventDefault","IOS","activeMode","hoverMode"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps, HasChildren {\n  removePlaceholderString?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span className={styles['Removable__offset']} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles['Removable__remove']}\n        onClick={onRemove}\n      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  className,\n  indent = false,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNames(\n        platform === Platform.IOS && styles['Removable--ios'],\n        align === 'start' && styles['Removable--align-start'],\n        indent && styles['Removable--indent'],\n        className,\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","noop","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","getTitleFromChildren","IconButton","Tappable","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Component","getRootRef","Removable","align","indent","restProps","platform","ref","onRemoveClick","preventDefault","IOS","activeMode","hoverMode"],"mappings":"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"}

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

@@ -9,7 +9,7 @@
   position: relative;
   flex-grow: 0;
   flex-shrink: 0;
-  border: none;
+  border: 0;
 }
 
 /* Увеличиваем вес селектора */
@@ -40,7 +40,7 @@
   line-height: 45px;
   color: var(--vkui_internal--white);
   background-color: var(--vkui--color_background_negative);
-  border: none;
+  border: 0;
   border-radius: 0;
 }
 
@@ -74,7 +74,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  border: none;
+  border: 0;
 }
 
 .Removable__toggle-in::after {

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

@@ -53,6 +53,6 @@ export interface RichCellProps extends TappableProps {
  * @see https://vkcom.github.io/VKUI/#/RichCell
  */
 export declare const RichCell: {
-    ({ subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className, ...restProps }: RichCellProps): JSX.Element;
-    Icon: ({ children, className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+    ({ subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className, ...restProps }: RichCellProps): React.JSX.Element;
+    Icon: ({ children, className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['RichCell--sizeY-none'],\n  [SizeType.COMPACT]: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles['RichCell__content-after']}>\n              {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n              {afterCaption && (\n                <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","SizeType","Tappable","Subhead","RichCellIcon","styles","sizeYClassNames","none","COMPACT","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","REGULAR","div","Component","Icon"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAoDA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,QAAO,EACPC,SAAQ,EACRC,KAAI,EACJC,QAAO,EACPC,OAAM,EACNC,MAAK,EACLC,aAAY,EACZC,OAAM,EACNC,QAAO,EACPC,UAAS,EACTC,UAAS,EACT,GAAGC,WACW,GAAK;IACnB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGtB;IAE3B,qBACE,oBAACE;QACE,GAAGmB,SAAS;QACbD,WAAWrB,WACTM,MAAM,CAAC,WAAW,EAClB,CAACc,aAAad,MAAM,CAAC,0BAA0B,EAC/CiB,UAAUrB,SAASsB,OAAO,IAAIjB,eAAe,CAACgB,MAAM,EACpDF;OAGDN,wBAAU,oBAACU;QAAIJ,WAAWf,MAAM,CAAC,mBAAmB;OAAGS,uBACxD,oBAACU;QAAIJ,WAAWf,MAAM,CAAC,eAAe;qBACpC,oBAACmB;QAAIJ,WAAWf,MAAM,CAAC,oBAAoB;qBACzC,oBAACmB;QAAIJ,WAAWf,MAAM,CAAC,2BAA2B;OAC/CK,yBACC,oBAACP;QAAQsB,WAAU;QAAML,WAAWf,MAAM,CAAC,oBAAoB;OAC5DK,wBAGL,oBAACc;QAAIJ,WAAWf,MAAM,CAAC,qBAAqB;OAAGM,WAC9CC,sBAAQ,oBAACY;QAAIJ,WAAWf,MAAM,CAAC,iBAAiB;OAAGO,OACnDC,yBACC,oBAACV;QAAQsB,WAAU;QAAML,WAAWf,MAAM,CAAC,oBAAoB;OAC5DQ,WAIN,AAACE,CAAAA,SAASC,YAAW,mBACpB,oBAACQ;QAAIJ,WAAWf,MAAM,CAAC,0BAA0B;OAC9CU,uBAAS,oBAACS;QAAIJ,WAAWf,MAAM,CAAC,2BAA2B;OAAGU,QAC9DC,8BACC,oBAACQ;QAAIJ,WAAWf,MAAM,CAAC,0BAA0B;OAAGW,iBAK3DC,wBAAU,oBAACO;QAAIJ,WAAWf,MAAM,CAAC,mBAAmB;OAAGY,SACvDC,yBAAW,oBAACM;QAAIJ,WAAWf,MAAM,CAAC,oBAAoB;OAAGa;AAIlE,EAAE;AAEFT,SAASiB,IAAI,GAAGtB"}
+{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['RichCell--sizeY-none'],\n  [SizeType.COMPACT]: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles['RichCell__content-after']}>\n              {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n              {afterCaption && (\n                <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","SizeType","Tappable","Subhead","RichCellIcon","styles","sizeYClassNames","none","COMPACT","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","REGULAR","div","Component","Icon"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACJ,SAASO,QAAQ,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAoDA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,QAAO,EACPC,SAAQ,EACRC,KAAI,EACJC,QAAO,EACPC,OAAM,EACNC,MAAK,EACLC,aAAY,EACZC,OAAM,EACNC,QAAO,EACPC,UAAS,EACTC,UAAS,EACT,GAAGC,WACW;IACd,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGtB;IAE3B,qBACE,oBAACE;QACE,GAAGmB,SAAS;QACbD,WAAWrB,WACTM,MAAM,CAAC,WAAW,EAClB,CAACc,aAAad,MAAM,CAAC,0BAA0B,EAC/CiB,UAAUrB,SAASsB,WAAWjB,eAAe,CAACgB,MAAM,EACpDF;OAGDN,wBAAU,oBAACU;QAAIJ,WAAWf,MAAM,CAAC,mBAAmB;OAAGS,uBACxD,oBAACU;QAAIJ,WAAWf,MAAM,CAAC,eAAe;qBACpC,oBAACmB;QAAIJ,WAAWf,MAAM,CAAC,oBAAoB;qBACzC,oBAACmB;QAAIJ,WAAWf,MAAM,CAAC,2BAA2B;OAC/CK,yBACC,oBAACP;QAAQsB,WAAU;QAAML,WAAWf,MAAM,CAAC,oBAAoB;OAC5DK,wBAGL,oBAACc;QAAIJ,WAAWf,MAAM,CAAC,qBAAqB;OAAGM,WAC9CC,sBAAQ,oBAACY;QAAIJ,WAAWf,MAAM,CAAC,iBAAiB;OAAGO,OACnDC,yBACC,oBAACV;QAAQsB,WAAU;QAAML,WAAWf,MAAM,CAAC,oBAAoB;OAC5DQ,WAIN,AAACE,CAAAA,SAASC,YAAW,mBACpB,oBAACQ;QAAIJ,WAAWf,MAAM,CAAC,0BAA0B;OAC9CU,uBAAS,oBAACS;QAAIJ,WAAWf,MAAM,CAAC,2BAA2B;OAAGU,QAC9DC,8BACC,oBAACQ;QAAIJ,WAAWf,MAAM,CAAC,0BAA0B;OAAGW,iBAK3DC,wBAAU,oBAACO;QAAIJ,WAAWf,MAAM,CAAC,mBAAmB;OAAGY,SACvDC,yBAAW,oBAACM;QAAIJ,WAAWf,MAAM,CAAC,oBAAoB;OAAGa;AAIlE,EAAE;AAEFT,SAASiB,OAAOtB"}

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const RichCellIcon: ({ children, className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const RichCellIcon: ({ children, className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n  children,\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","RichCellIcon","children","className","restProps","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAE/C,OAAO,MAAMC,eAAe,CAAC,EAC3BC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACkC,GAAK;IAC1C,qBACE,oBAACC;QAAK,GAAGD,SAAS;QAAED,WAAWJ,WAAWC,MAAM,CAAC,eAAe,EAAEG;OAC/DD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n  children,\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","RichCellIcon","children","className","restProps","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAE/C,OAAO,MAAMC,eAAe,CAAC,EAC3BC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACkC;IACrC,qBACE,oBAACC;QAAK,GAAGD,SAAS;QAAED,WAAWJ,WAAWC,MAAM,CAAC,eAAe,EAAEG;OAC/DD;AAGP,EAAE"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { HoverPopperProps } from '../HoverPopper/HoverPopper';
 export interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {
     /**
@@ -9,4 +9,4 @@ export interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName
 /**
  * @see https://vkcom.github.io/VKUI/#/RichTooltip
  */
-export declare const RichTooltip: ({ children, arrow, appearance, className, ...popperProps }: RichTooltipProps) => JSX.Element;
+export declare const RichTooltip: ({ children, arrow, appearance, className, ...popperProps }: RichTooltipProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport styles from './RichTooltip.module.css';\n\nexport interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n  children,\n  arrow = true,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: RichTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['RichTooltip'],\n        appearance !== 'neutral' &&\n          {\n            accent: styles['RichTooltip--appearance-accent'],\n            white: styles['RichTooltip--appearance-white'],\n            black: styles['RichTooltip--appearance-black'],\n            inversion: styles['RichTooltip--appearance-inversion'],\n          }[appearance],\n        className,\n      )}\n      arrow={arrow}\n      arrowClassName={styles['RichTooltip__arrow']}\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"names":["React","classNames","HoverPopper","styles","RichTooltip","children","arrow","appearance","className","popperProps","accent","white","black","inversion","arrowClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,OAAOC,YAAY,2BAA2B;AAS9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,OAAQ,IAAI,CAAA,EACZC,YAAa,UAAS,EACtBC,UAAS,EACT,GAAGC,aACc,GAAK;IACtB,qBACE,oBAACP;QACCM,WAAWP,WACTE,MAAM,CAAC,cAAc,EACrBI,eAAe,aACb,CAAA;YACEG,QAAQP,MAAM,CAAC,iCAAiC;YAChDQ,OAAOR,MAAM,CAAC,gCAAgC;YAC9CS,OAAOT,MAAM,CAAC,gCAAgC;YAC9CU,WAAWV,MAAM,CAAC,oCAAoC;QACxD,CAAA,CAAC,CAACI,WAAW,EACfC;QAEFF,OAAOA;QACPQ,gBAAgBX,MAAM,CAAC,qBAAqB;QAC3C,GAAGM,WAAW;OAEdJ;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport styles from './RichTooltip.module.css';\n\nexport interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n  children,\n  arrow = true,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: RichTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['RichTooltip'],\n        appearance !== 'neutral' &&\n          {\n            accent: styles['RichTooltip--appearance-accent'],\n            white: styles['RichTooltip--appearance-white'],\n            black: styles['RichTooltip--appearance-black'],\n            inversion: styles['RichTooltip--appearance-inversion'],\n          }[appearance],\n        className,\n      )}\n      arrow={arrow}\n      arrowClassName={styles['RichTooltip__arrow']}\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"names":["React","classNames","HoverPopper","styles","RichTooltip","children","arrow","appearance","className","popperProps","accent","white","black","inversion","arrowClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,OAAOC,YAAY,2BAA2B;AAS9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,OAAQ,KAAI,EACZC,YAAa,UAAS,EACtBC,UAAS,EACT,GAAGC,aACc;IACjB,qBACE,oBAACP;QACCM,WAAWP,WACTE,MAAM,CAAC,cAAc,EACrBI,eAAe,aACb,CAAA;YACEG,QAAQP,MAAM,CAAC,iCAAiC;YAChDQ,OAAOR,MAAM,CAAC,gCAAgC;YAC9CS,OAAOT,MAAM,CAAC,gCAAgC;YAC9CU,WAAWV,MAAM,CAAC,oCAAoC;QACxD,CAAA,CAAC,CAACI,WAAW,EACfC;QAEFF,OAAOA;QACPQ,gBAAgBX,MAAM,CAAC,qBAAqB;QAC3C,GAAGM,WAAW;OAEdJ;AAGP,EAAE"}

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

@@ -17,4 +17,4 @@ export interface RootState {
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
  */
-export declare const Root: ({ children, activeView: _activeView, onTransition, nav, className, ...restProps }: RootProps) => JSX.Element;
+export declare const Root: ({ children, activeView: _activeView, onTransition, nav, className, ...restProps }: RootProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        styles['vkui-root-android-animation-hide-back'],\n        styles['vkui-root-android-animation-show-forward'],\n        styles['vkui-root-ios-animation-hide-back'],\n        styles['vkui-root-ios-animation-show-forward'],\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","useTimeout","useDOM","getNavId","Platform","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","SplitColContext","styles","warn","Root","children","activeView","_activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","div","viewId","isTransitionTarget","compensateScroll","key","ref","undefined","entering","style","marginTop"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        styles['vkui-root-android-animation-hide-back'],\n        styles['vkui-root-android-animation-show-forward'],\n        styles['vkui-root-ios-animation-hide-back'],\n        styles['vkui-root-ios-animation-show-forward'],\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","useTimeout","useDOM","getNavId","Platform","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","SplitColContext","styles","warn","Root","children","activeView","_activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","div","viewId","isTransitionTarget","compensateScroll","key","ref","undefined","entering","style","marginTop"],"mappings":"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"}

package/dist/cssm/components/ScreenSpinner/Icon48CancelCircle.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const Icon48CancelCircle: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const Icon48CancelCircle: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/dist/cssm/components/ScreenSpinner/Icon48DoneOutline.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const Icon48DoneOutline: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const Icon48DoneOutline: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SpinnerProps } from '../Spinner/Spinner';
 export interface ScreenSpinnerProps extends SpinnerProps {
     state?: 'loading' | 'cancelable' | 'done' | 'error';
@@ -6,4 +6,4 @@ export interface ScreenSpinnerProps extends SpinnerProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
  */
-export declare const ScreenSpinner: ({ style, className, state, size, "aria-label": ariaLabel, onClick, ...restProps }: ScreenSpinnerProps) => JSX.Element;
+export declare const ScreenSpinner: ({ style, className, state, size, "aria-label": ariaLabel, onClick, ...restProps }: ScreenSpinnerProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n  style,\n  className,\n  state = 'loading',\n  size = 'large',\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n  onClick,\n  ...restProps\n}: ScreenSpinnerProps) => {\n  const hideSpinner = state === 'done' || state === 'error';\n\n  const Icon = {\n    loading: () => null,\n    cancelable: Icon24Cancel,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      hasMask={false}\n      className={classNames(\n        styles['ScreenSpinner'],\n        hideSpinner && styles['ScreenSpinner--hideSpinner'],\n        state === 'cancelable' && styles['ScreenSpinner--state-cancelable'],\n        state === 'done' && styles['ScreenSpinner--state-done'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n        <Spinner\n          className={styles['ScreenSpinner__spinner']}\n          size={size}\n          aria-label={ariaLabel}\n          {...restProps}\n        />\n        <div className={styles['ScreenSpinner__icon']}>\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","useScrollLock","PopoutWrapper","Spinner","Icon48CancelCircle","Icon48DoneOutline","styles","ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","done","error","hasMask","div","aria-label"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAsB,qBAAqB;AAC3D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,OAAOC,YAAY,6BAA6B;AAMhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,MAAK,EACLC,UAAS,EACTC,OAAQ,UAAS,EACjBC,MAAO,QAAO,EACd,cAAcC,YAAY,0BAA0B,CAAA,EACpDC,QAAO,EACP,GAAGC,WACgB,GAAK;IACxB,MAAMC,cAAcL,UAAU,UAAUA,UAAU;IAElD,MAAMM,OAAO;QACXC,SAAS,IAAM,IAAI;QACnBC,YAAYnB;QACZoB,MAAMd;QACNe,OAAOhB;IACT,CAAC,CAACM,MAAM;IAERT;IAEA,qBACE,oBAACC;QACCmB,SAAS,KAAK;QACdZ,WAAWT,WACTM,MAAM,CAAC,gBAAgB,EACvBS,eAAeT,MAAM,CAAC,6BAA6B,EACnDI,UAAU,gBAAgBJ,MAAM,CAAC,kCAAkC,EACnEI,UAAU,UAAUJ,MAAM,CAAC,4BAA4B,EACvDG;QAEFD,OAAOA;qBAEP,oBAACc;QAAIb,WAAWH,MAAM,CAAC,2BAA2B;QAAEO,SAASA;qBAC3D,oBAACV;QACCM,WAAWH,MAAM,CAAC,yBAAyB;QAC3CK,MAAMA;QACNY,cAAYX;QACX,GAAGE,SAAS;sBAEf,oBAACQ;QAAIb,WAAWH,MAAM,CAAC,sBAAsB;qBAC3C,oBAACU;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n  style,\n  className,\n  state = 'loading',\n  size = 'large',\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n  onClick,\n  ...restProps\n}: ScreenSpinnerProps) => {\n  const hideSpinner = state === 'done' || state === 'error';\n\n  const Icon = {\n    loading: () => null,\n    cancelable: Icon24Cancel,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      hasMask={false}\n      className={classNames(\n        styles['ScreenSpinner'],\n        hideSpinner && styles['ScreenSpinner--hideSpinner'],\n        state === 'cancelable' && styles['ScreenSpinner--state-cancelable'],\n        state === 'done' && styles['ScreenSpinner--state-done'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n        <Spinner\n          className={styles['ScreenSpinner__spinner']}\n          size={size}\n          aria-label={ariaLabel}\n          {...restProps}\n        />\n        <div className={styles['ScreenSpinner__icon']}>\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","useScrollLock","PopoutWrapper","Spinner","Icon48CancelCircle","Icon48DoneOutline","styles","ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","done","error","hasMask","div","aria-label"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAsB,qBAAqB;AAC3D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,OAAOC,YAAY,6BAA6B;AAMhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,MAAK,EACLC,UAAS,EACTC,OAAQ,UAAS,EACjBC,MAAO,QAAO,EACd,cAAcC,YAAY,0BAA0B,CAAA,EACpDC,QAAO,EACP,GAAGC,WACgB;IACnB,MAAMC,cAAcL,UAAU,UAAUA,UAAU;IAElD,MAAMM,OAAO;QACXC,SAAS,IAAM;QACfC,YAAYnB;QACZoB,MAAMd;QACNe,OAAOhB;IACT,CAAC,CAACM,MAAM;IAERT;IAEA,qBACE,oBAACC;QACCmB,SAAS;QACTZ,WAAWT,WACTM,MAAM,CAAC,gBAAgB,EACvBS,eAAeT,MAAM,CAAC,6BAA6B,EACnDI,UAAU,gBAAgBJ,MAAM,CAAC,kCAAkC,EACnEI,UAAU,UAAUJ,MAAM,CAAC,4BAA4B,EACvDG;QAEFD,OAAOA;qBAEP,oBAACc;QAAIb,WAAWH,MAAM,CAAC,2BAA2B;QAAEO,SAASA;qBAC3D,oBAACV;QACCM,WAAWH,MAAM,CAAC,yBAAyB;QAC3CK,MAAMA;QACNY,cAAYX;QACX,GAAGE,SAAS;sBAEf,oBAACQ;QAAIb,WAAWH,MAAM,CAAC,sBAAsB;qBAC3C,oBAACU;AAKX,EAAE"}

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+export interface ScrollArrowProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, HasRootRef<HTMLButtonElement> {
+    /**
+     * Направление стрелки
+     */
+    direction: 'left' | 'right';
+    /**
+     * Размер стрелки
+     */
+    size?: 'm' | 'l';
+    /**
+     * Смещает иконку кнопки навигации по вертикали.
+     */
+    offsetY?: number | string;
+}
+/**
+ * Компонент стрелки из HorizontalScroll
+ *
+ * @since 5.4.0
+ * @see https://vkcom.github.io/VKUI/#/ScrollArrow
+ */
+export declare const ScrollArrow: ({ size, offsetY, direction, className, getRootRef, children, ...restProps }: ScrollArrowProps) => React.JSX.Element;

package/dist/cssm/components/ScrollArrow/ScrollArrow.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Icon16Chevron, Icon16ChevronLeft, Icon24Chevron, Icon24ChevronCompactLeft } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
+import styles from './ScrollArrow.module.css';
+const ArrowIcon = ({ size , direction  })=>{
+    if (size === 'm') {
+        return direction === 'left' ? /*#__PURE__*/ React.createElement(Icon16ChevronLeft, null) : /*#__PURE__*/ React.createElement(Icon16Chevron, null);
+    }
+    return direction === 'left' ? /*#__PURE__*/ React.createElement(Icon24ChevronCompactLeft, null) : /*#__PURE__*/ React.createElement(Icon24Chevron, null);
+};
+/**
+ * Компонент стрелки из HorizontalScroll
+ *
+ * @since 5.4.0
+ * @see https://vkcom.github.io/VKUI/#/ScrollArrow
+ */ export const ScrollArrow = ({ size ='l' , offsetY , direction , className , getRootRef , children =/*#__PURE__*/ React.createElement(ArrowIcon, {
+    direction: direction,
+    size: size
+}) , ...restProps })=>{
+    return /*#__PURE__*/ React.createElement("button", {
+        className: classNames(styles['ScrollArrow'], {
+            m: styles['ScrollArrow--size-m'],
+            l: styles['ScrollArrow--size-l']
+        }[size], {
+            left: styles['ScrollArrow--direction-left'],
+            right: styles['ScrollArrow--direction-right']
+        }[direction], className),
+        ref: getRootRef,
+        ...restProps
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: styles['ScrollArrow__icon'],
+        style: offsetY ? {
+            top: offsetY
+        } : undefined
+    }, children));
+};
+
+//# sourceMappingURL=ScrollArrow.js.map