@vkontakte/vkui 5.5.2 → 5.5.4

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: ImageBaseSize | number;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","role","aria-label","img","aria-hidden","Badge","Overlay"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","role","aria-label","img","aria-hidden","Badge","Overlay"],"mappings":"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"}

package/dist/components/PullToRefresh/PullToRefresh.js

@@ -208,7 +208,8 @@ var TOUCH_MOVE_EVENT_PARAMS = {
         onEnd: onTouchEnd,
         className: classNames("vkuiPullToRefresh", platform === Platform.IOS && "vkuiPullToRefresh--ios", watching && "vkuiPullToRefresh--watching", refreshing && "vkuiPullToRefresh--refreshing", className)
     }), /*#__PURE__*/ React.createElement(FixedLayout, {
-        className: "vkuiPullToRefresh__controls"
+        className: "vkuiPullToRefresh__controls",
+        useParentWidth: true
     }, /*#__PURE__*/ React.createElement(PullToRefreshSpinner, {
         style: {
             transform: spinnerTransform,

package/dist/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","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","useState","spinnerY","setSpinnerY","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']} useParentWidth>\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","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","useState","spinnerY","setSpinnerY","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","useParentWidth","style","transform","WebkitTransform","opacity","on","div"],"mappings":"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"}

package/dist/components/ScreenSpinner/ScreenSpinner.js

@@ -31,17 +31,17 @@ import { Icon48DoneOutline } from "./Icon48DoneOutline";
     useScrollLock();
     return /*#__PURE__*/ React.createElement(PopoutWrapper, {
         hasMask: false,
-        className: classNames("vkuiScreenSpinner", hideSpinner && "vkuiScreenSpinner--hideSpinner", state === "cancelable" && "vkuiScreenSpinner--state-cancelable", state === "done" && "vkuiScreenSpinner--state-done", className),
+        className: classNames("vkuiScreenSpinner", state === "cancelable" && "vkuiScreenSpinner--clickable", className),
         style: style
     }, /*#__PURE__*/ React.createElement("div", {
         className: "vkuiScreenSpinner__container",
         onClick: onClick
     }, /*#__PURE__*/ React.createElement(Spinner, _object_spread({
-        className: "vkuiScreenSpinner__spinner",
+        className: classNames("vkuiScreenSpinner__spinner", hideSpinner && "vkuiScreenSpinner__spinner--hidden"),
         size: size,
         "aria-label": ariaLabel
     }, restProps)), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiScreenSpinner__icon"
+        className: classNames("vkuiScreenSpinner__icon", state === "done" && "vkuiScreenSpinner__icon--state-done")
     }, /*#__PURE__*/ React.createElement(Icon, null))));
 };
 

package/dist/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","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;AAOxD;;CAEC,GACD,OAAO,IAAMC,gBAAgB;QAC3BC,eAAAA,OACAC,mBAAAA,iCACAC,OAAAA,kCAAQ,+CACRC,MAAAA,gCAAO,uBACOC,aAAd,eAAcA,YAAAA,iBAAY,6BAAZA,KACdC,iBAAAA,SACGC;QANHN;QACAC;QACAC;QACAC;QACA;QACAE;;IAGA,IAAME,cAAcL,UAAU,UAAUA,UAAU;IAElD,IAAMM,OAAO;QACXC,SAAS;mBAAM;;QACfC,YAAYlB;QACZmB,MAAMb;QACNc,OAAOf;IACT,CAAC,CAACK,MAAM;IAERR;IAEA,qBACE,oBAACC;QACCkB,SAAS;QACTZ,WAAWR,gCAETc,iDACAL,UAAU,uDACVA,UAAU,2CACVD;QAEFD,OAAOA;qBAEP,oBAACc;QAAIb,SAAS;QAAsCI,SAASA;qBAC3D,oBAACT;QACCK,SAAS;QACTE,MAAMA;QACNY,cAAYX;OACRE,2BAEN,oBAACQ;QAAIb,SAAS;qBACZ,oBAACO;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        state === 'cancelable' && styles['ScreenSpinner--clickable'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n        <Spinner\n          className={classNames(\n            styles['ScreenSpinner__spinner'],\n            hideSpinner && styles['ScreenSpinner__spinner--hidden'],\n          )}\n          size={size}\n          aria-label={ariaLabel}\n          {...restProps}\n        />\n        <div\n          className={classNames(\n            styles['ScreenSpinner__icon'],\n            state === 'done' && styles['ScreenSpinner__icon--state-done'],\n          )}\n        >\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","useScrollLock","PopoutWrapper","Spinner","Icon48CancelCircle","Icon48DoneOutline","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;AAOxD;;CAEC,GACD,OAAO,IAAMC,gBAAgB;QAC3BC,eAAAA,OACAC,mBAAAA,iCACAC,OAAAA,kCAAQ,+CACRC,MAAAA,gCAAO,uBACOC,aAAd,eAAcA,YAAAA,iBAAY,6BAAZA,KACdC,iBAAAA,SACGC;QANHN;QACAC;QACAC;QACAC;QACA;QACAE;;IAGA,IAAME,cAAcL,UAAU,UAAUA,UAAU;IAElD,IAAMM,OAAO;QACXC,SAAS;mBAAM;;QACfC,YAAYlB;QACZmB,MAAMb;QACNc,OAAOf;IACT,CAAC,CAACK,MAAM;IAERR;IAEA,qBACE,oBAACC;QACCkB,SAAS;QACTZ,WAAWR,gCAETS,UAAU,gDACVD;QAEFD,OAAOA;qBAEP,oBAACc;QAAIb,SAAS;QAAsCI,SAASA;qBAC3D,oBAACT;QACCK,WAAWR,yCAETc;QAEFJ,MAAMA;QACNY,cAAYX;OACRE,2BAEN,oBAACQ;QACCb,WAAWR,sCAETS,UAAU;qBAGZ,oBAACM;AAKX,EAAE"}

package/dist/components/Select/Select.d.ts

@@ -4,4 +4,4 @@ export type SelectType = 'default' | 'plain' | 'accent';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */
-export declare const Select: ({ children, options, popupDirection, renderOption, allowClearButton, ClearButton, ...props }: SelectProps) => React.JSX.Element;
+export declare const Select: ({ children, ...props }: SelectProps) => React.JSX.Element;

package/dist/components/Select/Select.js

@@ -1,4 +1,3 @@
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { useAdaptivityHasPointer } from "../../hooks/useAdaptivityHasPointer";
@@ -7,22 +6,34 @@ import { NativeSelect } from "../NativeSelect/NativeSelect";
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */ export var Select = function(_param) {
-    var children = _param.children, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options, popupDirection = _param.popupDirection, renderOption = _param.renderOption, allowClearButton = _param.allowClearButton, ClearButton = _param.ClearButton, props = _object_without_properties(_param, [
-        "children",
+    var children = _param.children, props = _object_without_properties(_param, [
+        "children"
+    ]);
+    var _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, searchable = props.searchable, emptyText = props.emptyText, onInputChange = props.onInputChange, filterFn = props.filterFn, popupDirection = props.popupDirection, renderOption = props.renderOption, renderDropdown = props.renderDropdown, fetching = props.fetching, onClose = props.onClose, onOpen = props.onOpen, icon = props.icon, ClearButton = props.ClearButton, allowClearButton = props.allowClearButton, dropdownOffsetDistance = props.dropdownOffsetDistance, fixDropdownWidth = props.fixDropdownWidth, forceDropdownPortal = props.forceDropdownPortal, selectType = props.selectType, autoHideScrollbar = props.autoHideScrollbar, autoHideScrollbarDelay = props.autoHideScrollbarDelay, nativeProps // TODO: https://github.com/Microsoft/TypeScript/issues/12936
+     = _object_without_properties(props, [
         "options",
+        "searchable",
+        "emptyText",
+        "onInputChange",
+        "filterFn",
         "popupDirection",
         "renderOption",
+        "renderDropdown",
+        "fetching",
+        "onClose",
+        "onOpen",
+        "icon",
+        "ClearButton",
         "allowClearButton",
-        "ClearButton"
+        "dropdownOffsetDistance",
+        "fixDropdownWidth",
+        "forceDropdownPortal",
+        "selectType",
+        "autoHideScrollbar",
+        "autoHideScrollbarDelay"
     ]);
     var hasPointer = useAdaptivityHasPointer();
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/ React.createElement(CustomSelect, _object_spread({
-        options: options,
-        popupDirection: popupDirection,
-        renderOption: renderOption,
-        allowClearButton: allowClearButton,
-        ClearButton: ClearButton
-    }, props)), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ React.createElement(NativeSelect, props, options.map(function(param) {
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/ React.createElement(CustomSelect, props), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ React.createElement(NativeSelect, nativeProps, options.map(function(param) {
         var label = param.label, value = param.value;
         return /*#__PURE__*/ React.createElement("option", {
             value: value,

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n  children,\n  options = [],\n  popupDirection,\n  renderOption,\n  allowClearButton,\n  ClearButton,\n  ...props\n}: SelectProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && (\n        <CustomSelect\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          allowClearButton={allowClearButton}\n          ClearButton={ClearButton}\n          {...props}\n        />\n      )}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect {...props}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useAdaptivityHasPointer","CustomSelect","NativeSelect","Select","children","options","popupDirection","renderOption","allowClearButton","ClearButton","props","hasPointer","Fragment","undefined","map","label","value","option","key"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,YAAY,QAAqB,+BAA+B;AACzE,SAASC,YAAY,QAAQ,+BAA+B;AAI5D;;CAEC,GACD,OAAO,IAAMC,SAAS;QACpBC,kBAAAA,kCACAC,SAAAA,sCAAU,EAAE,mBACZC,wBAAAA,gBACAC,sBAAAA,cACAC,0BAAAA,kBACAC,qBAAAA,aACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,aAAaX;IAEnB,qBACE,oBAACD,MAAMa,gBACJ,AAACD,CAAAA,eAAeE,aAAaF,UAAS,mBACrC,oBAACV;QACCI,SAASA;QACTC,gBAAgBA;QAChBC,cAAcA;QACdC,kBAAkBA;QAClBC,aAAaA;OACTC,SAGP,AAACC,CAAAA,eAAeE,aAAa,CAACF,UAAS,mBACtC,oBAACT,cAAiBQ,OACfL,QAAQS,IAAI;YAAGC,cAAAA,OAAOC,cAAAA;6BACrB,oBAACC;YAAOD,OAAOA;YAAOE,KAAK,AAAC,GAAQ,OAANF;WAC3BD;;AAOf,EAAE"}
+{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({ children, ...props }: SelectProps) => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    dropdownOffsetDistance,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    selectType,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    ...nativeProps // TODO: https://github.com/Microsoft/TypeScript/issues/12936\n  } = props;\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && <CustomSelect {...props} />}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect {...nativeProps}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useAdaptivityHasPointer","CustomSelect","NativeSelect","Select","children","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","nativeProps","hasPointer","Fragment","undefined","map","label","value","option","key"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,YAAY,QAAqB,+BAA+B;AACzE,SAASC,YAAY,QAAQ,+BAA+B;AAI5D;;CAEC,GACD,OAAO,IAAMC,SAAS;QAAGC,kBAAAA,UAAaC;QAAbD;;IACvB,qBAsBIC,MArBFC,SAAAA,sCAAU,EAAE,mBACZC,aAoBEF,MApBFE,YACAC,YAmBEH,MAnBFG,WACAC,gBAkBEJ,MAlBFI,eACAC,WAiBEL,MAjBFK,UACAC,iBAgBEN,MAhBFM,gBACAC,eAeEP,MAfFO,cACAC,iBAcER,MAdFQ,gBACAC,WAaET,MAbFS,UACAC,UAYEV,MAZFU,SACAC,SAWEX,MAXFW,QACAC,OAUEZ,MAVFY,MACAC,cASEb,MATFa,aACAC,mBAQEd,MARFc,kBACAC,yBAOEf,MAPFe,wBACAC,mBAMEhB,MANFgB,kBACAC,sBAKEjB,MALFiB,qBACAC,aAIElB,MAJFkB,YACAC,oBAGEnB,MAHFmB,mBACAC,yBAEEpB,MAFFoB,wBACGC,YAAY,6DAA6D;kCAC1ErB;QArBFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,IAAME,aAAa3B;IAEnB,qBACE,oBAACD,MAAM6B,gBACJ,AAACD,CAAAA,eAAeE,aAAaF,UAAS,mBAAM,oBAAC1B,cAAiBI,QAC9D,AAACsB,CAAAA,eAAeE,aAAa,CAACF,UAAS,mBACtC,oBAACzB,cAAiBwB,aACfpB,QAAQwB,IAAI;YAAGC,cAAAA,OAAOC,cAAAA;6BACrB,oBAACC;YAAOD,OAAOA;YAAOE,KAAK,AAAC,GAAQ,OAANF;WAC3BD;;AAOf,EAAE"}

package/dist/components/Spinner/Spinner.d.ts

@@ -5,4 +5,4 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */
-export declare const Spinner: React.MemoExoticComponent<({ size, "aria-label": ariaLabel, className, ...restProps }: SpinnerProps) => React.JSX.Element>;
+export declare const Spinner: React.MemoExoticComponent<({ size, children, "aria-label": ariaLabel, className, ...restProps }: SpinnerProps) => React.JSX.Element>;

package/dist/components/Spinner/Spinner.js

@@ -4,11 +4,16 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import * as React from "react";
 import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
+import { warnOnce } from "../../lib/warnOnce";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden";
+var warn = warnOnce("Spinner");
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */ export var Spinner = /*#__PURE__*/ React.memo(function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? "regular" : _param_size, tmp = _param["aria-label"], ariaLabel = tmp === void 0 ? "Загружается..." : tmp, className = _param.className, restProps = _object_without_properties(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? "regular" : _param_size, _param_children = _param.children, children = _param_children === void 0 ? "Загружается..." : _param_children, tmp = _param[// TODO [>=6]: Удалить автоматическое приведение aria-label
+    "aria-label"], ariaLabel = tmp === void 0 ? "Загружается..." : tmp, className = _param.className, restProps = _object_without_properties(_param, [
         "size",
+        "children",
         "aria-label",
         "className"
     ]);
@@ -18,14 +23,19 @@ import { classNames } from "@vkontakte/vkjs";
         medium: Icon32Spinner,
         large: Icon44Spinner
     }[size];
+    // TODO [>=6]: Удалить варнинг
+    if (process.env.NODE_ENV === "development") {
+        if (ariaLabel && !children) {
+            warn("a11y: Пожалуйста, передавайте ваш текст для ассистивных технологий в children вместо aria-label.");
+        }
+    }
     return /*#__PURE__*/ React.createElement("span", _object_spread_props(_object_spread({
-        role: "status",
-        "aria-label": ariaLabel
+        role: "status"
     }, restProps), {
         className: classNames("vkuiSpinner", className)
     }), /*#__PURE__*/ React.createElement(SpinnerIcon, {
         className: "vkuiSpinner__self"
-    }));
+    }), /*#__PURE__*/ React.createElement(VisuallyHidden, null, children !== null && children !== void 0 ? children : ariaLabel));
 });
 Spinner.displayName = "Spinner";
 

package/dist/components/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    'aria-label': ariaLabel = 'Загружается...',\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    return (\n      <span\n        role=\"status\"\n        aria-label={ariaLabel}\n        {...restProps}\n        className={classNames(styles['Spinner'], className)}\n      >\n        <SpinnerIcon className={styles['Spinner__self']} />\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","Spinner","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","span","role","aria-label","displayName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,QAAQ,kBAAkB;AAO7C;;CAEC,GACD,OAAO,IAAMC,wBAAUN,MAAMO,KAC3B;6BACEC,MAAAA,gCAAO,yBACOC,aAAd,eAAcA,YAAAA,iBAAY,mBAAZA,KACdC,mBAAAA,WACGC;QAHHH;QACA;QACAE;;IAGA,IAAME,cAAc;QAClBC,OAAOZ;QACPa,SAASZ;QACTa,QAAQZ;QACRa,OAAOZ;IACT,CAAC,CAACI,KAAK;IAEP,qBACE,oBAACS;QACCC,MAAK;QACLC,cAAYV;OACRE;QACJD,WAAWL,0BAA8BK;sBAEzC,oBAACE;QAAYF,SAAS;;AAG5B,GACA;AAEFJ,QAAQc,cAAc"}
+{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\nconst warn = warnOnce('Spinner');\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    // TODO [>=6]: Удалить автоматическое приведение aria-label\n    'aria-label': ariaLabel = 'Загружается...',\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    // TODO [>=6]: Удалить варнинг\n    if (process.env.NODE_ENV === 'development') {\n      if (ariaLabel && !children) {\n        warn(\n          'a11y: Пожалуйста, передавайте ваш текст для ассистивных технологий в children вместо aria-label.',\n        );\n      }\n    }\n\n    return (\n      <span role=\"status\" {...restProps} className={classNames(styles['Spinner'], className)}>\n        <SpinnerIcon className={styles['Spinner__self']} />\n        <VisuallyHidden>{children ?? ariaLabel}</VisuallyHidden>\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","warnOnce","VisuallyHidden","warn","Spinner","memo","size","children","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","process","env","NODE_ENV","span","role","displayName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,cAAc,QAAQ,mCAAmC;AAOlE,IAAMC,OAAOF,SAAS;AACtB;;CAEC,GACD,OAAO,IAAMG,wBAAUT,MAAMU,KAC3B;6BACEC,MAAAA,gCAAO,kDACPC,UAAAA,wCAAW,oCAEGC,aADd,2DAA2D;IAC3D,eAAcA,YAAAA,iBAAY,mBAAZA,KACdC,mBAAAA,WACGC;QALHJ;QACAC;QAEA;QACAE;;IAGA,IAAME,cAAc;QAClBC,OAAOhB;QACPiB,SAAShB;QACTiB,QAAQhB;QACRiB,OAAOhB;IACT,CAAC,CAACO,KAAK;IAEP,8BAA8B;IAC9B,IAAIU,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAIV,aAAa,CAACD,UAAU;YAC1BJ,KACE;QAEJ;IACF;IAEA,qBACE,oBAACgB;QAAKC,MAAK;OAAaV;QAAWD,WAAWT,0BAA8BS;sBAC1E,oBAACE;QAAYF,SAAS;sBACtB,oBAACP,sBAAgBK,qBAAAA,sBAAAA,WAAYC;AAGnC,GACA;AAEFJ,QAAQiB,cAAc"}

package/dist/components/Tappable/Tappable.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AnchorHTMLAttributesOnly, HasChildren, HasComponent, HasRootRef } from '../../types';
+import { AnchorHTMLAttributesOnly, HasChildren, HasComponent, HasRootRef, LiteralUnion } from '../../types';
 import { FocusVisibleMode } from '../FocusVisible/FocusVisible';
 import { TouchProps } from '../Touch/Touch';
 type StateMode = 'opacity' | 'background';
@@ -25,15 +25,15 @@ export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElem
     /**
      * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active
      */
-    activeMode?: StateMode | string;
+    activeMode?: LiteralUnion<StateMode, string>;
     /**
      * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover
      */
-    hoverMode?: StateMode | string;
+    hoverMode?: LiteralUnion<StateMode, string>;
     /**
      * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
      */
-    focusVisibleMode?: FocusVisibleMode | string;
+    focusVisibleMode?: LiteralUnion<FocusVisibleMode, string>;
     onEnter?(outputEvent: MouseEvent): void;
     onLeave?(outputEvent: MouseEvent): void;
 }

package/dist/components/Tappable/Tappable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnchorHTMLAttributesOnly, HasChildren, HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\ntype StateMode = 'opacity' | 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  | 'onTouchStart'\n  | 'onTouchMove'\n  | 'onTouchEnd'\n  | 'onTouchCancel'\n  | 'onMouseDown'\n  | 'onMouseMove'\n  | 'onMouseUp'\n  | 'onMouseLeave'\n> &\n  AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n  extends TappableElementProps,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    HasChildren,\n    Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {\n  /**\n   * Длительность показа active-состояния\n   */\n  activeEffectDelay?: number;\n  stopPropagation?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateMode | string;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateMode | string;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: FocusVisibleMode | string;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n  ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n  onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode | string): stateMode is StateMode {\n  switch (stateMode) {\n    case 'opacity':\n    case 'background':\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n  const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);\n\n  const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n    TapState.none,\n  );\n  const _stop = () => setActivity(TapState.none);\n  const start = () => hasActive && setActivity(TapState.active);\n  const delayStart = () => {\n    hasActive && setActivity(TapState.pending);\n  };\n\n  const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n  const stopTimeout = useTimeout(_stop, stopDelay);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.pending) {\n      activeTimeout.set();\n      return activeTimeout.clear;\n    }\n    if (activity === TapState.exiting) {\n      return stopTimeout.clear;\n    }\n    if (activity === TapState.active) {\n      activeBus.emit('active', id);\n    }\n    return noop;\n  }, [activity]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.none) {\n      return noop;\n    }\n    const onActiveChange = (activeId: string) => {\n      activeId !== id && _stop();\n    };\n    activeBus.on('active', onActiveChange);\n    return () => activeBus.off('active', onActiveChange);\n  }, [activity === TapState.none]);\n\n  useIsomorphicLayoutEffect(() => {\n    !hasActive && _stop();\n  }, [hasActive]);\n\n  const stop = (delay?: number) => {\n    if (delay) {\n      setActivity(TapState.exiting);\n      return stopTimeout.set(delay);\n    }\n    _stop();\n  };\n\n  return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n  children,\n  Component,\n  onClick,\n  onKeyDown: _onKeyDown,\n  activeEffectDelay = ACTIVE_EFFECT_DELAY,\n  stopPropagation = false,\n  getRootRef,\n  hasHover: _hasHover = true,\n  hoverMode = 'background',\n  hasActive: _hasActive = true,\n  activeMode = 'background',\n  focusVisibleMode = 'inside',\n  onEnter,\n  onLeave,\n  className,\n  hovered: hoveredProp,\n  ...props\n}: TappableProps) => {\n  Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);\n\n  const { onHoverChange } = React.useContext(TappableContext);\n  const insideTouchRoot = React.useContext(TouchRootContext);\n  const platform = usePlatform();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeX = 'none' } = useAdaptivity();\n  const hasPointerContext = useAdaptivityHasPointer();\n  const hasHoverContext = useAdaptivityHasHover();\n\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n  const [childHover, setChildHover] = React.useState(false);\n  const {\n    value: _hovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const hovered = (_hovered || hoveredProp) && !props.disabled;\n  const hasActive = _hasActive && !childHover && !props.disabled;\n  const hasHover = hasHoverContext && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n  const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n  const active = activity === TapState.active || activity === TapState.exiting;\n\n  const containerRef = useExternRef(getRootRef);\n\n  // hover propagation\n  const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n  useIsomorphicLayoutEffect(() => {\n    if (!hovered) {\n      return noop;\n    }\n    onHoverChange(true);\n    return () => onHoverChange(false);\n  }, [hovered]);\n\n  /*\n   * [a11y]\n   * Обрабатывает событие onkeydown\n   * для кастомных доступных элементов:\n   * - role=\"link\" (активация по Enter)\n   * - role=\"button\" (активация по Space и Enter)\n   */\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n      e.preventDefault();\n      containerRef.current?.click();\n    }\n  }\n\n  const needWaves =\n    platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow }]);\n    clearClicks.set();\n  }\n\n  function onStart({ originalEvent }: TouchEvent) {\n    if (hasActive) {\n      if (originalEvent.touches && originalEvent.touches.length > 1) {\n        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n        return stop();\n      }\n\n      if (needWaves) {\n        const { top, left } = getOffsetRect(containerRef.current);\n        const x = coordX(originalEvent) - (left ?? 0);\n        const y = coordY(originalEvent) - (top ?? 0);\n        addClick(x, y);\n      }\n\n      delayStart();\n    }\n  }\n\n  function onMove({ isSlide }: TouchEvent) {\n    if (isSlide) {\n      stop();\n    }\n  }\n\n  function onEnd({ duration }: TouchEvent) {\n    if (activity === TapState.none) {\n      return;\n    }\n    if (activity === TapState.pending) {\n      // активировать при коротком тапе\n      start();\n    }\n\n    // отключить без задержки при длинном тапе\n    const activeDuration = duration - ACTIVE_DELAY;\n    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n  }\n\n  const classes = classNames(\n    className,\n    styles['Tappable'],\n    'vkuiInternalTappable',\n    platform === Platform.IOS && styles['Tappable--ios'],\n    sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n    hasHover && styles['Tappable--hasHover'],\n    hasActive && styles['Tappable--hasActive'],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasHover &&\n      hovered &&\n      isPresetHoverMode &&\n      {\n        background: styles['Tappable--hover-background'],\n        opacity: styles['Tappable--hover-opacity'],\n      }[hoverMode],\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      {\n        background: styles['Tappable--active-background'],\n        opacity: styles['Tappable--active-opacity'],\n      }[activeMode],\n    focusVisible && styles['Tappable--focus-visible'],\n  );\n\n  const handlers: RootComponentProps = {\n    onStart: callMultiple(onStart, props.onStart),\n    onMove: callMultiple(onMove, props.onMove),\n    onEnd: callMultiple(onEnd, props.onEnd),\n    onClick,\n    onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n  };\n  const role = props.href ? 'link' : 'button';\n\n  return (\n    <Touch\n      onEnter={callMultiple(setHoveredTrue, onEnter)}\n      onLeave={callMultiple(setHoveredFalse, onLeave)}\n      type={Component === 'button' ? 'button' : undefined}\n      tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n      role={isCustomElement ? role : undefined}\n      aria-disabled={isCustomElement ? props.disabled : undefined}\n      stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n      {...props}\n      slideThreshold={20}\n      usePointerHover\n      className={classes}\n      Component={Component}\n      getRootRef={containerRef}\n      onBlur={callMultiple(onBlur, props.onBlur)}\n      onFocus={callMultiple(onFocus, props.onFocus)}\n      {...(props.disabled ? {} : handlers)}\n    >\n      <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden className={styles.Tappable__waves}>\n          {clicks.map((wave) => (\n            <span\n              key={wave.id}\n              className={styles.Tappable__wave}\n              style={{ top: wave.y, left: wave.x }}\n            />\n          ))}\n        </span>\n      )}\n      {((hasHover && hoverMode === 'background') || (hasActive && activeMode === 'background')) && (\n        <span aria-hidden className={styles.Tappable__stateLayer} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible visible={focusVisible} mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"names":["React","classNames","noop","mitt","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","useBooleanState","useExternRef","useFocusVisible","usePlatform","useTimeout","shouldTriggerClickOnEnterOrSpace","SizeType","callMultiple","getOffsetRect","Platform","coordX","coordY","useIsomorphicLayoutEffect","FocusVisible","Touch","TouchRootContext","sizeXClassNames","none","compact","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","onKeyDown","e","isCustomElement","containerRef","preventDefault","current","click","addClick","x","y","dateNow","Date","now","filteredClicks","clicks","filter","setClicks","clearClicks","onStart","originalEvent","touches","length","needWaves","top","left","onMove","isSlide","onEnd","duration","activeDuration","activeEffectDelay","children","Component","onClick","_onKeyDown","stopPropagation","getRootRef","_hasHover","hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","hovered","hoveredProp","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","childHover","setChildHover","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","disabled","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","childContext","useRef","ANDROID","classes","IOS","REGULAR","background","opacity","handlers","role","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","map","wave","key","style","visible","mode"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport {\n  AnchorHTMLAttributesOnly,\n  HasChildren,\n  HasComponent,\n  HasRootRef,\n  LiteralUnion,\n} from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\ntype StateMode = 'opacity' | 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  | 'onTouchStart'\n  | 'onTouchMove'\n  | 'onTouchEnd'\n  | 'onTouchCancel'\n  | 'onMouseDown'\n  | 'onMouseMove'\n  | 'onMouseUp'\n  | 'onMouseLeave'\n> &\n  AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n  extends TappableElementProps,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    HasChildren,\n    Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {\n  /**\n   * Длительность показа active-состояния\n   */\n  activeEffectDelay?: number;\n  stopPropagation?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: LiteralUnion<StateMode, string>;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: LiteralUnion<StateMode, string>;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: LiteralUnion<FocusVisibleMode, string>;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n  ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n  onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: LiteralUnion<StateMode, string>): stateMode is StateMode {\n  switch (stateMode) {\n    case 'opacity':\n    case 'background':\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n  const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);\n\n  const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n    TapState.none,\n  );\n  const _stop = () => setActivity(TapState.none);\n  const start = () => hasActive && setActivity(TapState.active);\n  const delayStart = () => {\n    hasActive && setActivity(TapState.pending);\n  };\n\n  const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n  const stopTimeout = useTimeout(_stop, stopDelay);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.pending) {\n      activeTimeout.set();\n      return activeTimeout.clear;\n    }\n    if (activity === TapState.exiting) {\n      return stopTimeout.clear;\n    }\n    if (activity === TapState.active) {\n      activeBus.emit('active', id);\n    }\n    return noop;\n  }, [activity]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.none) {\n      return noop;\n    }\n    const onActiveChange = (activeId: string) => {\n      activeId !== id && _stop();\n    };\n    activeBus.on('active', onActiveChange);\n    return () => activeBus.off('active', onActiveChange);\n  }, [activity === TapState.none]);\n\n  useIsomorphicLayoutEffect(() => {\n    !hasActive && _stop();\n  }, [hasActive]);\n\n  const stop = (delay?: number) => {\n    if (delay) {\n      setActivity(TapState.exiting);\n      return stopTimeout.set(delay);\n    }\n    _stop();\n  };\n\n  return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n  children,\n  Component,\n  onClick,\n  onKeyDown: _onKeyDown,\n  activeEffectDelay = ACTIVE_EFFECT_DELAY,\n  stopPropagation = false,\n  getRootRef,\n  hasHover: _hasHover = true,\n  hoverMode = 'background',\n  hasActive: _hasActive = true,\n  activeMode = 'background',\n  focusVisibleMode = 'inside',\n  onEnter,\n  onLeave,\n  className,\n  hovered: hoveredProp,\n  ...props\n}: TappableProps) => {\n  Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);\n\n  const { onHoverChange } = React.useContext(TappableContext);\n  const insideTouchRoot = React.useContext(TouchRootContext);\n  const platform = usePlatform();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeX = 'none' } = useAdaptivity();\n  const hasPointerContext = useAdaptivityHasPointer();\n  const hasHoverContext = useAdaptivityHasHover();\n\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n  const [childHover, setChildHover] = React.useState(false);\n  const {\n    value: _hovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const hovered = (_hovered || hoveredProp) && !props.disabled;\n  const hasActive = _hasActive && !childHover && !props.disabled;\n  const hasHover = hasHoverContext && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n  const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n  const active = activity === TapState.active || activity === TapState.exiting;\n\n  const containerRef = useExternRef(getRootRef);\n\n  // hover propagation\n  const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n  useIsomorphicLayoutEffect(() => {\n    if (!hovered) {\n      return noop;\n    }\n    onHoverChange(true);\n    return () => onHoverChange(false);\n  }, [hovered]);\n\n  /*\n   * [a11y]\n   * Обрабатывает событие onkeydown\n   * для кастомных доступных элементов:\n   * - role=\"link\" (активация по Enter)\n   * - role=\"button\" (активация по Space и Enter)\n   */\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n      e.preventDefault();\n      containerRef.current?.click();\n    }\n  }\n\n  const needWaves =\n    platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow }]);\n    clearClicks.set();\n  }\n\n  function onStart({ originalEvent }: TouchEvent) {\n    if (hasActive) {\n      if (originalEvent.touches && originalEvent.touches.length > 1) {\n        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n        return stop();\n      }\n\n      if (needWaves) {\n        const { top, left } = getOffsetRect(containerRef.current);\n        const x = coordX(originalEvent) - (left ?? 0);\n        const y = coordY(originalEvent) - (top ?? 0);\n        addClick(x, y);\n      }\n\n      delayStart();\n    }\n  }\n\n  function onMove({ isSlide }: TouchEvent) {\n    if (isSlide) {\n      stop();\n    }\n  }\n\n  function onEnd({ duration }: TouchEvent) {\n    if (activity === TapState.none) {\n      return;\n    }\n    if (activity === TapState.pending) {\n      // активировать при коротком тапе\n      start();\n    }\n\n    // отключить без задержки при длинном тапе\n    const activeDuration = duration - ACTIVE_DELAY;\n    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n  }\n\n  const classes = classNames(\n    className,\n    styles['Tappable'],\n    'vkuiInternalTappable',\n    platform === Platform.IOS && styles['Tappable--ios'],\n    sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n    hasHover && styles['Tappable--hasHover'],\n    hasActive && styles['Tappable--hasActive'],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasHover &&\n      hovered &&\n      isPresetHoverMode &&\n      {\n        background: styles['Tappable--hover-background'],\n        opacity: styles['Tappable--hover-opacity'],\n      }[hoverMode],\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      {\n        background: styles['Tappable--active-background'],\n        opacity: styles['Tappable--active-opacity'],\n      }[activeMode],\n    focusVisible && styles['Tappable--focus-visible'],\n  );\n\n  const handlers: RootComponentProps = {\n    onStart: callMultiple(onStart, props.onStart),\n    onMove: callMultiple(onMove, props.onMove),\n    onEnd: callMultiple(onEnd, props.onEnd),\n    onClick,\n    onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n  };\n  const role = props.href ? 'link' : 'button';\n\n  return (\n    <Touch\n      onEnter={callMultiple(setHoveredTrue, onEnter)}\n      onLeave={callMultiple(setHoveredFalse, onLeave)}\n      type={Component === 'button' ? 'button' : undefined}\n      tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n      role={isCustomElement ? role : undefined}\n      aria-disabled={isCustomElement ? props.disabled : undefined}\n      stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n      {...props}\n      slideThreshold={20}\n      usePointerHover\n      className={classes}\n      Component={Component}\n      getRootRef={containerRef}\n      onBlur={callMultiple(onBlur, props.onBlur)}\n      onFocus={callMultiple(onFocus, props.onFocus)}\n      {...(props.disabled ? {} : handlers)}\n    >\n      <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden className={styles.Tappable__waves}>\n          {clicks.map((wave) => (\n            <span\n              key={wave.id}\n              className={styles.Tappable__wave}\n              style={{ top: wave.y, left: wave.x }}\n            />\n          ))}\n        </span>\n      )}\n      {((hasHover && hoverMode === 'background') || (hasActive && activeMode === 'background')) && (\n        <span aria-hidden className={styles.Tappable__stateLayer} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible visible={focusVisible} mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"names":["React","classNames","noop","mitt","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","useBooleanState","useExternRef","useFocusVisible","usePlatform","useTimeout","shouldTriggerClickOnEnterOrSpace","SizeType","callMultiple","getOffsetRect","Platform","coordX","coordY","useIsomorphicLayoutEffect","FocusVisible","Touch","TouchRootContext","sizeXClassNames","none","compact","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","onKeyDown","e","isCustomElement","containerRef","preventDefault","current","click","addClick","x","y","dateNow","Date","now","filteredClicks","clicks","filter","setClicks","clearClicks","onStart","originalEvent","touches","length","needWaves","top","left","onMove","isSlide","onEnd","duration","activeDuration","activeEffectDelay","children","Component","onClick","_onKeyDown","stopPropagation","getRootRef","_hasHover","hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","hovered","hoveredProp","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","childHover","setChildHover","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","disabled","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","childContext","useRef","ANDROID","classes","IOS","REGULAR","background","opacity","handlers","role","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","map","wave","key","style","visible","mode"],"mappings":"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"}