@vkontakte/vkui 5.5.4 → 5.6.0

package/dist/cjs/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 {\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":["ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","Tappable","sizeXClassNames","none","compact","WAVE_LIVE","activeBus","mitt","TapState","pending","active","exiting","TappableContext","React","createContext","onHoverChange","noop","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","useTimeout","stopTimeout","useIsomorphicLayoutEffect","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","onKeyDown","e","isCustomElement","shouldTriggerClickOnEnterOrSpace","containerRef","preventDefault","current","click","addClick","x","y","dateNow","Date","now","filteredClicks","clicks","filter","setClicks","clearClicks","onStart","originalEvent","touches","length","needWaves","getOffsetRect","top","left","coordX","coordY","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","TouchRootContext","platform","usePlatform","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeX","hasPointerContext","useAdaptivityHasPointer","hasHoverContext","useAdaptivityHasHover","childHover","setChildHover","useBooleanState","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","disabled","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","useExternRef","childContext","useRef","Platform","ANDROID","classes","classNames","IOS","SizeType","REGULAR","background","opacity","handlers","callMultiple","role","Touch","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","map","wave","key","style","FocusVisible","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":["ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","Tappable","sizeXClassNames","none","compact","WAVE_LIVE","activeBus","mitt","TapState","pending","active","exiting","TappableContext","React","createContext","onHoverChange","noop","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","useTimeout","stopTimeout","useIsomorphicLayoutEffect","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","onKeyDown","e","isCustomElement","shouldTriggerClickOnEnterOrSpace","containerRef","preventDefault","current","click","addClick","x","y","dateNow","Date","now","filteredClicks","clicks","filter","setClicks","clearClicks","onStart","originalEvent","touches","length","needWaves","getOffsetRect","top","left","coordX","coordY","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","TouchRootContext","platform","usePlatform","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeX","hasPointerContext","useAdaptivityHasPointer","hasHoverContext","useAdaptivityHasHover","childHover","setChildHover","useBooleanState","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","disabled","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","useExternRef","childContext","useRef","Platform","ANDROID","classes","classNames","IOS","SizeType","REGULAR","background","opacity","handlers","callMultiple","role","Touch","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","map","wave","key","style","FocusVisible","visible","mode"],"mappings":"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"}

package/dist/cjs/components/TextTooltip/TextTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TextTooltip.module.css';\n\nexport interface TextTooltipProps\n  extends Omit<HoverPopperProps, 'arrow' | 'arrowClassName' | 'content'> {\n  /**\n   * Текст тултипа\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа\n   */\n  header?: React.ReactNode;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n  children,\n  text,\n  header,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: TextTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['TextTooltip'],\n        appearance !== 'neutral' &&\n          {\n            accent: styles['TextTooltip--appearance-accent'],\n            white: styles['TextTooltip--appearance-white'],\n            black: styles['TextTooltip--appearance-black'],\n            inversion: styles['TextTooltip--appearance-inversion'],\n          }[appearance],\n        className,\n      )}\n      arrow\n      arrowClassName={styles['TextTooltip__arrow']}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && <Subhead weight=\"2\">{header}</Subhead>}\n          {hasReactNode(text) && <Subhead>{text}</Subhead>}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"names":["TextTooltip","children","text","header","appearance","className","popperProps","HoverPopper","classNames","accent","white","black","inversion","arrow","arrowClassName","content","React","Fragment","hasReactNode","Subhead","weight"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;+DAzBU;oBACkB;2BACK;uBACtB;AAsBjB,IAAMA,cAAc;QACzBC,kBAAAA,UACAC,cAAAA,MACAC,gBAAAA,mCACAC,YAAAA,4CAAa,+BACbC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE;QACCF,WAAWG,IAAAA,qCAETJ,eAAe,aACb,CAAA;YACEK,MAAM;YACNC,KAAK;YACLC,KAAK;YACLC,SAAS;QACX,CAAA,CAAC,CAACR,WAAW,EACfC;QAEFQ,OAAAA;QACAC,cAAc;QACdC,uBACE,qBAACC,OAAMC,gBACJC,IAAAA,oBAAaf,yBAAW,qBAACgB;YAAQC,QAAO;WAAKjB,SAC7Ce,IAAAA,oBAAahB,uBAAS,qBAACiB,wBAASjB;OAGjCI,cAEHL;AAGP"}
+{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TextTooltip.module.css';\n\nexport interface TextTooltipProps\n  extends Omit<HoverPopperProps, 'arrow' | 'arrowClassName' | 'content'> {\n  /**\n   * Текст тултипа\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа\n   */\n  header?: React.ReactNode;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n  children,\n  text,\n  header,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: TextTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['TextTooltip'],\n        appearance !== 'neutral' &&\n          {\n            accent: styles['TextTooltip--appearance-accent'],\n            white: styles['TextTooltip--appearance-white'],\n            black: styles['TextTooltip--appearance-black'],\n            inversion: styles['TextTooltip--appearance-inversion'],\n          }[appearance],\n        className,\n      )}\n      arrow\n      arrowClassName={styles['TextTooltip__arrow']}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && <Subhead weight=\"2\">{header}</Subhead>}\n          {hasReactNode(text) && <Subhead>{text}</Subhead>}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"names":["TextTooltip","children","text","header","appearance","className","popperProps","HoverPopper","classNames","accent","white","black","inversion","arrow","arrowClassName","content","React","Fragment","hasReactNode","Subhead","weight"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;+DAzBU;oBACkB;2BACK;uBACtB;AAsBjB,IAAMA,cAAc;QACzBC,kBAAAA,UACAC,cAAAA,MACAC,gBAAAA,mCACAC,YAAAA,4CAAa,+BACbC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,wBAAW;QACVF,WAAWG,IAAAA,gBAAU,qBAEnBJ,eAAe,aACb,CAAA;YACEK,MAAM;YACNC,KAAK;YACLC,KAAK;YACLC,SAAS;QACX,CAAA,CAAC,CAACR,WAAW,EACfC;QAEFQ,OAAAA;QACAC,cAAc;QACdC,uBACE,qBAACC,OAAMC,QAAQ,QACZC,IAAAA,kBAAY,EAACf,yBAAW,qBAACgB,gBAAO;YAACC,QAAO;WAAKjB,SAC7Ce,IAAAA,kBAAY,EAAChB,uBAAS,qBAACiB,gBAAO,QAAEjB;OAGjCI,cAEHL;AAGP"}

package/dist/cjs/components/Textarea/Textarea.js

@@ -50,8 +50,9 @@ var Textarea = function(_param) {
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     // autosize input
     _react.useEffect(function() {
+        var _el;
         var el = elementRef.current;
-        if (grow && (el === null || el === void 0 ? void 0 : el.offsetParent)) {
+        if (grow && ((_el = el) === null || _el === void 0 ? void 0 : _el.offsetParent)) {
             el.style.height = "";
             el.style.height = "".concat(el.scrollHeight, "px");
             if (el.scrollHeight !== currentScrollHeight.current && onResize) {

package/dist/cjs/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Textarea--sizeY-none'],\n  [SizeType.COMPACT]: styles['Textarea--sizeY-compact'],\n};\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    Pick<React.CSSProperties, 'maxHeight'>,\n    Pick<FormFieldProps, 'status'> {\n  grow?: boolean;\n  onResize?(el: HTMLTextAreaElement): void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n  defaultValue = '',\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: TextareaProps) => {\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const currentScrollHeight = React.useRef<number>();\n  const elementRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  // autosize input\n  React.useEffect(() => {\n    const el = elementRef.current;\n\n    if (grow && el?.offsetParent) {\n      el.style.height = '';\n      el.style.height = `${el.scrollHeight}px`;\n\n      if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n        onResize(el);\n        currentScrollHeight.current = el.scrollHeight;\n      }\n    }\n  }, [grow, value, sizeY, elementRef, onResize]);\n\n  return (\n    <FormField\n      className={classNames(\n        styles['Textarea'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n    >\n      <Text\n        {...restProps}\n        Component=\"textarea\"\n        normalize={false}\n        style={{ maxHeight }}\n        rows={rows}\n        className={styles['Textarea__el']}\n        value={value}\n        onChange={onChange}\n        getRootRef={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["Textarea","sizeYClassNames","none","SizeType","COMPACT","defaultValue","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","onChangeProp","value","valueProp","restProps","useEnsuredControl","currentScrollHeight","React","useRef","elementRef","useExternRef","useAdaptivity","sizeY","useEffect","el","current","offsetParent","height","scrollHeight","FormField","classNames","REGULAR","disabled","Text","Component","normalize"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;;;+DA9BU;oBACI;6BACG;iCACI;4BACL;0BACJ;yBAEiB;oBACrB;AAGrB,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAiBL,IAAMJ,WAAW;qCACtBK,cAAAA,gDAAe,+CACfC,MAAAA,gCAAO,oBACPC,eAAAA,OACAC,kBAAAA,UACAC,mBAAAA,WACAC,oBAAAA,YACAC,gBAAAA,6BACAC,MAAAA,gCAAO,iBACPC,mBAAAA,WACAC,gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAZHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAA0BG,yCAAAA,IAAAA,sCAAkB;QAC1Cf,cAAAA;QACAU,UAAUC;QACVC,OAAOC;IACT,QAJOD,QAAmBG,wBAAZL,WAAYK;IAK1B,IAAMC,sBAAsBC,OAAMC;IAClC,IAAMC,aAAaC,IAAAA,4BAAad;IAChC,IAA2Be,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,iBAAiB;IACjBL,OAAMM,UAAU;QACd,IAAMC,KAAKL,WAAWM;QAEtB,IAAIxB,QAAQuB,CAAAA,eAAAA,gBAAAA,KAAAA,IAAAA,GAAIE,YAAW,GAAG;YAC5BF,GAAGtB,MAAMyB,SAAS;YAClBH,GAAGtB,MAAMyB,SAAS,AAAC,GAAkB,OAAhBH,GAAGI,cAAa;YAErC,IAAIJ,GAAGI,iBAAiBZ,oBAAoBS,WAAWtB,UAAU;gBAC/DA,SAASqB;gBACTR,oBAAoBS,UAAUD,GAAGI;YACnC;QACF;IACF,GAAG;QAAC3B;QAAMW;QAAOU;QAAOH;QAAYhB;KAAS;IAE7C,qBACE,qBAAC0B;QACCzB,WAAW0B,IAAAA,kCAETR,UAAUxB,qBAASiC,WAAWnC,eAAe,CAAC0B,MAAM,EACpDlB;QAEFF,OAAOA;QACPG,YAAYA;QACZ2B,UAAUlB,UAAUkB;QACpBvB,QAAQA;qBAER,qBAACwB,wDACKnB;QACJoB,WAAU;QACVC,WAAW;QACXjC,OAAO;YAAEM,WAAAA;QAAU;QACnBD,MAAMA;QACNH,SAAS;QACTQ,OAAOA;QACPF,UAAUA;QACVL,YAAYc;;AAIpB"}
+{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Textarea--sizeY-none'],\n  [SizeType.COMPACT]: styles['Textarea--sizeY-compact'],\n};\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    Pick<React.CSSProperties, 'maxHeight'>,\n    Pick<FormFieldProps, 'status'> {\n  grow?: boolean;\n  onResize?(el: HTMLTextAreaElement): void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n  defaultValue = '',\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: TextareaProps) => {\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const currentScrollHeight = React.useRef<number>();\n  const elementRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  // autosize input\n  React.useEffect(() => {\n    const el = elementRef.current;\n\n    if (grow && el?.offsetParent) {\n      el.style.height = '';\n      el.style.height = `${el.scrollHeight}px`;\n\n      if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n        onResize(el);\n        currentScrollHeight.current = el.scrollHeight;\n      }\n    }\n  }, [grow, value, sizeY, elementRef, onResize]);\n\n  return (\n    <FormField\n      className={classNames(\n        styles['Textarea'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n    >\n      <Text\n        {...restProps}\n        Component=\"textarea\"\n        normalize={false}\n        style={{ maxHeight }}\n        rows={rows}\n        className={styles['Textarea__el']}\n        value={value}\n        onChange={onChange}\n        getRootRef={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["Textarea","sizeYClassNames","none","SizeType","COMPACT","defaultValue","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","onChangeProp","value","valueProp","restProps","useEnsuredControl","currentScrollHeight","React","useRef","elementRef","useExternRef","useAdaptivity","sizeY","useEffect","el","current","offsetParent","height","scrollHeight","FormField","classNames","REGULAR","disabled","Text","Component","normalize"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;;;+DA9BU;oBACI;6BACG;iCACI;4BACL;0BACJ;yBAEiB;oBACrB;AAGrB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAiBZ,IAAMJ,WAAW;qCACtBK,cAAAA,gDAAe,+CACfC,MAAAA,gCAAO,oBACPC,eAAAA,OACAC,kBAAAA,UACAC,mBAAAA,WACAC,oBAAAA,YACAC,gBAAAA,6BACAC,MAAAA,gCAAO,iBACPC,mBAAAA,WACAC,gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAZHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAA0BG,yCAAAA,IAAAA,oCAAiB,EAAC;QAC1Cf,cAAAA;QACAU,UAAUC;QACVC,OAAOC;IACT,QAJOD,QAAmBG,wBAAZL,WAAYK;IAK1B,IAAMC,sBAAsBC,OAAMC,MAAM;IACxC,IAAMC,aAAaC,IAAAA,0BAAY,EAACd;IAChC,IAA2Be,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,iBAAiB;IACjBL,OAAMM,SAAS,CAAC;YAGFC;QAFZ,IAAMA,KAAKL,WAAWM,OAAO;QAE7B,IAAIxB,UAAQuB,MAAAA,gBAAAA,0BAAAA,IAAIE,YAAY,GAAE;YAC5BF,GAAGtB,KAAK,CAACyB,MAAM,GAAG;YAClBH,GAAGtB,KAAK,CAACyB,MAAM,GAAG,AAAC,GAAkB,OAAhBH,GAAGI,YAAY,EAAC;YAErC,IAAIJ,GAAGI,YAAY,KAAKZ,oBAAoBS,OAAO,IAAItB,UAAU;gBAC/DA,SAASqB;gBACTR,oBAAoBS,OAAO,GAAGD,GAAGI,YAAY;YAC/C;QACF;IACF,GAAG;QAAC3B;QAAMW;QAAOU;QAAOH;QAAYhB;KAAS;IAE7C,qBACE,qBAAC0B,oBAAS;QACRzB,WAAW0B,IAAAA,gBAAU,kBAEnBR,UAAUxB,oBAAQ,CAACiC,OAAO,IAAInC,eAAe,CAAC0B,MAAM,EACpDlB;QAEFF,OAAOA;QACPG,YAAYA;QACZ2B,UAAUlB,UAAUkB,QAAQ;QAC5BvB,QAAQA;qBAER,qBAACwB,UAAI,8CACCnB;QACJoB,WAAU;QACVC,WAAW;QACXjC,OAAO;YAAEM,WAAAA;QAAU;QACnBD,MAAMA;QACNH,SAAS;QACTQ,OAAOA;QACPF,UAAUA;QACVL,YAAYc;;AAIpB"}

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -82,7 +82,8 @@ var Tooltip = function(_param) {
     var _React_useState = _sliced_to_array._(_react.useState(null), 2), arrowRef = _React_useState[0], setArrowRef = _React_useState[1];
     var _React_useState1 = _sliced_to_array._(_react.useState(null), 2), target = _React_useState1[0], setTarget = _React_useState1[1];
     /* eslint-disable no-restricted-properties */ var tooltipContainer = _react.useMemo(function() {
-        return target === null || target === void 0 ? void 0 : target.closest("[".concat(_TooltipContainer.tooltipContainerAttr, "]"));
+        var _target;
+        return (_target = target) === null || _target === void 0 ? void 0 : _target.closest("[".concat(_TooltipContainer.tooltipContainerAttr, "]"));
     }, [
         target
     ]);
@@ -101,7 +102,8 @@ var Tooltip = function(_param) {
         ].filter(Boolean).join(" "), "error");
     }
     var floatingPositionStrategy = _react.useMemo(function() {
-        return (target === null || target === void 0 ? void 0 : target.style.position) === "fixed" ? "fixed" : "absolute";
+        var _target;
+        return ((_target = target) === null || _target === void 0 ? void 0 : _target.style.position) === "fixed" ? "fixed" : "absolute";
     }, [
         target
     ]);

package/dist/cjs/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { DefaultIcon } from '../PopperArrow/DefaultIcon';\nimport { PopperArrow, type PopperArrowProps } from '../PopperArrow/PopperArrow';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { tooltipContainerAttr } from './TooltipContainer';\nimport styles from './Tooltip.module.css';\n\n/**\n * Перебиваем `ref`.\n *\n * В оригинальном `React.DOMElement` задаётся `React.LegacyRef<T>`, в котором есть `string`.\n * Когда как `{ ref: \"string\" }` уже давно депрекейтнут.\n */\ninterface DOMElement<P extends React.HTMLAttributes<T> | React.SVGAttributes<T>, T extends Element>\n  extends React.DOMElement<P, T> {\n  ref: React.Ref<T>;\n}\n\nconst isDOMTypeElement = <\n  P extends React.HTMLAttributes<T> | React.SVGAttributes<T>,\n  T extends Element,\n>(\n  element: React.ReactElement,\n): element is DOMElement<P, T> => {\n  return React.isValidElement(element) && typeof element.type === 'string';\n};\n\nconst warn = warnOnce('Tooltip');\n\nconst stylesAppearance = {\n  accent: styles['Tooltip--appearance-accent'],\n  white: styles['Tooltip--appearance-white'],\n  black: styles['Tooltip--appearance-black'],\n  inversion: styles['Tooltip--appearance-inversion'],\n};\n\nexport interface TooltipProps {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children: React.ReactElement<HasRootRef<any>> | React.ReactElement;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n  /**\n   * Если передан `false`, то рисуется просто `children`.\n   */\n  isShown?: boolean;\n  /**\n   * Текст тултипа.\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  header?: React.ReactNode;\n  /**\n   * Положение по горизонтали (прижатие к левому или правому краю `children`).\n   * Если не задано, позиция по горизонтали определятся автоматически\n   */\n  alignX?: 'center' | 'left' | 'right';\n  /**\n   * Положение по вертикали (расположение над или под `children`).\n   * Если не задано, позиция по вертикали определятся автоматически\n   */\n  alignY?: 'top' | 'bottom';\n  /**\n   * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n   */\n  offsetX?: number;\n  /**\n   * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n   */\n  offsetY?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   * 5. Если стрелка наезжает на якорный элемент, то увеличьте значение параметра `offsetY`.\n   */\n  ArrowIcon?: PopperArrowProps['Icon'];\n  /**\n   * Сдвиг стрелочки относительно центра дочернего элемента.\n   */\n  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Пользовательские css-классы, будут добавлены на root-элемент\n   */\n  className?: string;\n}\n\nfunction mapAlignX(x: TooltipProps['alignX']) {\n  switch (x) {\n    case 'left':\n      return 'start';\n    case 'right':\n      return 'end';\n    default:\n      return '';\n  }\n}\nfunction getDefaultPlacement(\n  alignX: TooltipProps['alignX'],\n  alignY: TooltipProps['alignY'],\n): Placement {\n  return [alignY || 'bottom', mapAlignX(alignX || 'left')]\n    .filter((p) => !!p)\n    .join('-') as Placement;\n}\nfunction isVerticalPlacement(placement: PlacementWithAuto) {\n  return placement.startsWith('top') || placement.startsWith('bottom');\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n  children,\n  isShown: isShownProp = true,\n  offsetX = 0,\n  offsetY = 15,\n  alignX,\n  alignY,\n  onClose,\n  cornerOffset = 0,\n  cornerAbsoluteOffset,\n  appearance = 'accent',\n  arrow = true,\n  arrowPadding = 14,\n  ArrowIcon = DefaultIcon,\n  placement: placementProp,\n  text,\n  header,\n  className,\n  ...restProps\n}: TooltipProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [target, setTarget] = React.useState<HTMLElement | null>(null);\n  /* eslint-disable no-restricted-properties */\n  const tooltipContainer = React.useMemo(\n    () => target?.closest<HTMLDivElement>(`[${tooltipContainerAttr}]`),\n    [target],\n  );\n  const { entering } = useNavTransition();\n  const isShown = isShownProp && tooltipContainer && !entering;\n\n  const placement = placementProp || getDefaultPlacement(alignX, alignY);\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placement);\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          'children должен быть одним React элементом, получено',\n          multiChildren && 'несколько',\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(' '),\n        'error',\n      );\n  }\n\n  const floatingPositionStrategy = React.useMemo(\n    () => (target?.style.position === 'fixed' ? 'fixed' : 'absolute'),\n    [target],\n  );\n\n  if (process.env.NODE_ENV === 'development' && target && !tooltipContainer) {\n    throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n  }\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetX,\n        mainAxis: offsetY,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({\n          alignment: placement ? getAutoPlacementAlign(placement) : null,\n        }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n      middlewares.push({\n        name: 'arrowOffset',\n        fn({ placement, middlewareData }) {\n          if (!middlewareData.arrow) {\n            return Promise.resolve({});\n          }\n          if (isVerticalPlacement(placement)) {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.x = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.x !== undefined) {\n              middlewareData.arrow.x += cornerOffset;\n            }\n          } else {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.y = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.y !== undefined) {\n              middlewareData.arrow.y += cornerOffset;\n            }\n          }\n          return Promise.resolve({});\n        },\n      });\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    arrowRef,\n    arrowPadding,\n    cornerAbsoluteOffset,\n    cornerOffset,\n    offsetX,\n    offsetY,\n    placement,\n    isNotAutoPlacement,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: floatingPositionStrategy,\n    placement: isNotAutoPlacement ? placement : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n\n  const { document } = useDOM();\n  useGlobalEventListener(document, 'click', isShown && onClose, {\n    capture: true,\n    passive: true,\n  });\n\n  const childRef = isDOMTypeElement<React.HTMLAttributes<HTMLElement>, HTMLElement>(children)\n    ? children.ref\n    : React.isValidElement<HasRootRef<HTMLElement>>(children)\n    ? children.props.getRootRef\n    : null;\n  const patchedRef = useExternRef<HTMLElement>(setTarget, refs.setReference, childRef);\n  const child = React.isValidElement(children)\n    ? React.cloneElement(children, {\n        [isDOMTypeElement(children) ? 'ref' : 'getRootRef']: patchedRef,\n      })\n    : children;\n\n  return (\n    <React.Fragment>\n      {child}\n      {isShown &&\n        target != null &&\n        ReactDOM.createPortal(\n          <div\n            {...restProps}\n            className={classNames(\n              styles['Tooltip'],\n              appearance !== 'neutral' && stylesAppearance[appearance],\n              className,\n            )}\n          >\n            <div\n              ref={refs.setFloating}\n              style={convertFloatingDataToReactCSSProperties(\n                floatingPositionStrategy,\n                floatingDataX,\n                floatingDataY,\n              )}\n            >\n              {arrow && (\n                <PopperArrow\n                  coords={arrowCoords}\n                  placement={resolvedPlacement}\n                  arrowClassName={styles['Tooltip__arrow']}\n                  getRootRef={setArrowRef}\n                  Icon={ArrowIcon}\n                />\n              )}\n              <div className={styles['Tooltip__content']}>\n                {header && <Subhead weight=\"2\">{header}</Subhead>}\n                {text && <Subhead>{text}</Subhead>}\n              </div>\n            </div>\n          </div>,\n          tooltipContainer,\n        )}\n    </React.Fragment>\n  );\n};\n"],"names":["Tooltip","isDOMTypeElement","element","React","isValidElement","type","warn","warnOnce","stylesAppearance","accent","white","black","inversion","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","children","isShownProp","isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","appearance","arrow","arrowPadding","ArrowIcon","DefaultIcon","placementProp","text","header","className","restProps","useState","arrowRef","setArrowRef","target","setTarget","tooltipContainer","useMemo","closest","tooltipContainerAttr","entering","useNavTransition","isNotAutoPlacement","checkIsNotAutoPlacement","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","hasReactNode","JSON","stringify","Boolean","floatingPositionStrategy","style","position","Error","memoizedMiddlewares","middlewares","offsetMiddleware","crossAxis","mainAxis","push","flipMiddleware","autoPlacementMiddleware","alignment","getAutoPlacementAlign","shiftMiddleware","arrowMiddleware","padding","name","fn","middlewareData","Promise","resolve","undefined","y","useFloating","strategy","middleware","whileElementsMounted","autoUpdateFloatingElement","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","document","useDOM","useGlobalEventListener","capture","passive","childRef","ref","props","getRootRef","patchedRef","useExternRef","setReference","child","cloneElement","Fragment","ReactDOM","createPortal","div","classNames","setFloating","convertFloatingDataToReactCSSProperties","PopperArrow","coords","arrowClassName","Icon","Subhead","weight"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { DefaultIcon } from '../PopperArrow/DefaultIcon';\nimport { PopperArrow, type PopperArrowProps } from '../PopperArrow/PopperArrow';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { tooltipContainerAttr } from './TooltipContainer';\nimport styles from './Tooltip.module.css';\n\n/**\n * Перебиваем `ref`.\n *\n * В оригинальном `React.DOMElement` задаётся `React.LegacyRef<T>`, в котором есть `string`.\n * Когда как `{ ref: \"string\" }` уже давно депрекейтнут.\n */\ninterface DOMElement<P extends React.HTMLAttributes<T> | React.SVGAttributes<T>, T extends Element>\n  extends React.DOMElement<P, T> {\n  ref: React.Ref<T>;\n}\n\nconst isDOMTypeElement = <\n  P extends React.HTMLAttributes<T> | React.SVGAttributes<T>,\n  T extends Element,\n>(\n  element: React.ReactElement,\n): element is DOMElement<P, T> => {\n  return React.isValidElement(element) && typeof element.type === 'string';\n};\n\nconst warn = warnOnce('Tooltip');\n\nconst stylesAppearance = {\n  accent: styles['Tooltip--appearance-accent'],\n  white: styles['Tooltip--appearance-white'],\n  black: styles['Tooltip--appearance-black'],\n  inversion: styles['Tooltip--appearance-inversion'],\n};\n\nexport interface TooltipProps {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children: React.ReactElement<HasRootRef<any>> | React.ReactElement;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n  /**\n   * Если передан `false`, то рисуется просто `children`.\n   */\n  isShown?: boolean;\n  /**\n   * Текст тултипа.\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  header?: React.ReactNode;\n  /**\n   * Положение по горизонтали (прижатие к левому или правому краю `children`).\n   * Если не задано, позиция по горизонтали определятся автоматически\n   */\n  alignX?: 'center' | 'left' | 'right';\n  /**\n   * Положение по вертикали (расположение над или под `children`).\n   * Если не задано, позиция по вертикали определятся автоматически\n   */\n  alignY?: 'top' | 'bottom';\n  /**\n   * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n   */\n  offsetX?: number;\n  /**\n   * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n   */\n  offsetY?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   * 5. Если стрелка наезжает на якорный элемент, то увеличьте значение параметра `offsetY`.\n   */\n  ArrowIcon?: PopperArrowProps['Icon'];\n  /**\n   * Сдвиг стрелочки относительно центра дочернего элемента.\n   */\n  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Пользовательские css-классы, будут добавлены на root-элемент\n   */\n  className?: string;\n}\n\nfunction mapAlignX(x: TooltipProps['alignX']) {\n  switch (x) {\n    case 'left':\n      return 'start';\n    case 'right':\n      return 'end';\n    default:\n      return '';\n  }\n}\nfunction getDefaultPlacement(\n  alignX: TooltipProps['alignX'],\n  alignY: TooltipProps['alignY'],\n): Placement {\n  return [alignY || 'bottom', mapAlignX(alignX || 'left')]\n    .filter((p) => !!p)\n    .join('-') as Placement;\n}\nfunction isVerticalPlacement(placement: PlacementWithAuto) {\n  return placement.startsWith('top') || placement.startsWith('bottom');\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n  children,\n  isShown: isShownProp = true,\n  offsetX = 0,\n  offsetY = 15,\n  alignX,\n  alignY,\n  onClose,\n  cornerOffset = 0,\n  cornerAbsoluteOffset,\n  appearance = 'accent',\n  arrow = true,\n  arrowPadding = 14,\n  ArrowIcon = DefaultIcon,\n  placement: placementProp,\n  text,\n  header,\n  className,\n  ...restProps\n}: TooltipProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [target, setTarget] = React.useState<HTMLElement | null>(null);\n  /* eslint-disable no-restricted-properties */\n  const tooltipContainer = React.useMemo(\n    () => target?.closest<HTMLDivElement>(`[${tooltipContainerAttr}]`),\n    [target],\n  );\n  const { entering } = useNavTransition();\n  const isShown = isShownProp && tooltipContainer && !entering;\n\n  const placement = placementProp || getDefaultPlacement(alignX, alignY);\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placement);\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          'children должен быть одним React элементом, получено',\n          multiChildren && 'несколько',\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(' '),\n        'error',\n      );\n  }\n\n  const floatingPositionStrategy = React.useMemo(\n    () => (target?.style.position === 'fixed' ? 'fixed' : 'absolute'),\n    [target],\n  );\n\n  if (process.env.NODE_ENV === 'development' && target && !tooltipContainer) {\n    throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n  }\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetX,\n        mainAxis: offsetY,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({\n          alignment: placement ? getAutoPlacementAlign(placement) : null,\n        }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n      middlewares.push({\n        name: 'arrowOffset',\n        fn({ placement, middlewareData }) {\n          if (!middlewareData.arrow) {\n            return Promise.resolve({});\n          }\n          if (isVerticalPlacement(placement)) {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.x = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.x !== undefined) {\n              middlewareData.arrow.x += cornerOffset;\n            }\n          } else {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.y = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.y !== undefined) {\n              middlewareData.arrow.y += cornerOffset;\n            }\n          }\n          return Promise.resolve({});\n        },\n      });\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    arrowRef,\n    arrowPadding,\n    cornerAbsoluteOffset,\n    cornerOffset,\n    offsetX,\n    offsetY,\n    placement,\n    isNotAutoPlacement,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: floatingPositionStrategy,\n    placement: isNotAutoPlacement ? placement : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n\n  const { document } = useDOM();\n  useGlobalEventListener(document, 'click', isShown && onClose, {\n    capture: true,\n    passive: true,\n  });\n\n  const childRef = isDOMTypeElement<React.HTMLAttributes<HTMLElement>, HTMLElement>(children)\n    ? children.ref\n    : React.isValidElement<HasRootRef<HTMLElement>>(children)\n    ? children.props.getRootRef\n    : null;\n  const patchedRef = useExternRef<HTMLElement>(setTarget, refs.setReference, childRef);\n  const child = React.isValidElement(children)\n    ? React.cloneElement(children, {\n        [isDOMTypeElement(children) ? 'ref' : 'getRootRef']: patchedRef,\n      })\n    : children;\n\n  return (\n    <React.Fragment>\n      {child}\n      {isShown &&\n        target != null &&\n        ReactDOM.createPortal(\n          <div\n            {...restProps}\n            className={classNames(\n              styles['Tooltip'],\n              appearance !== 'neutral' && stylesAppearance[appearance],\n              className,\n            )}\n          >\n            <div\n              ref={refs.setFloating}\n              style={convertFloatingDataToReactCSSProperties(\n                floatingPositionStrategy,\n                floatingDataX,\n                floatingDataY,\n              )}\n            >\n              {arrow && (\n                <PopperArrow\n                  coords={arrowCoords}\n                  placement={resolvedPlacement}\n                  arrowClassName={styles['Tooltip__arrow']}\n                  getRootRef={setArrowRef}\n                  Icon={ArrowIcon}\n                />\n              )}\n              <div className={styles['Tooltip__content']}>\n                {header && <Subhead weight=\"2\">{header}</Subhead>}\n                {text && <Subhead>{text}</Subhead>}\n              </div>\n            </div>\n          </div>,\n          tooltipContainer,\n        )}\n    </React.Fragment>\n  );\n};\n"],"names":["Tooltip","isDOMTypeElement","element","React","isValidElement","type","warn","warnOnce","stylesAppearance","accent","white","black","inversion","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","children","isShownProp","isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","appearance","arrow","arrowPadding","ArrowIcon","DefaultIcon","placementProp","text","header","className","restProps","useState","arrowRef","setArrowRef","target","setTarget","tooltipContainer","useMemo","closest","tooltipContainerAttr","entering","useNavTransition","isNotAutoPlacement","checkIsNotAutoPlacement","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","hasReactNode","JSON","stringify","Boolean","floatingPositionStrategy","style","position","Error","memoizedMiddlewares","middlewares","offsetMiddleware","crossAxis","mainAxis","push","flipMiddleware","autoPlacementMiddleware","alignment","getAutoPlacementAlign","shiftMiddleware","arrowMiddleware","padding","name","fn","middlewareData","Promise","resolve","undefined","y","useFloating","strategy","middleware","whileElementsMounted","autoUpdateFloatingElement","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","document","useDOM","useGlobalEventListener","capture","passive","childRef","ref","props","getRootRef","patchedRef","useExternRef","setReference","child","cloneElement","Fragment","ReactDOM","createPortal","div","classNames","setFloating","convertFloatingDataToReactCSSProperties","PopperArrow","coords","arrowClassName","Icon","Subhead","weight"],"mappings":"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"}

package/dist/cjs/components/Tooltip/TooltipContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tooltip/TooltipContainer.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const tooltipContainerAttr = 'data-tooltip-container';\nexport const TooltipContainer = React.forwardRef<\n  HTMLDivElement,\n  React.HtmlHTMLAttributes<HTMLDivElement> & { fixed?: boolean }\n>(function TooltipContainer({ fixed = false, ...props }, ref) {\n  (props as any)[tooltipContainerAttr] = fixed ? 'fixed' : 'true';\n  return <div {...props} ref={ref} />;\n});\n"],"names":["tooltipContainerAttr","TooltipContainer","React","forwardRef","ref","fixed","props","div"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IACAC,gBAAgB;eAAhBA;;;;;;;+DAHU;AAEhB,IAAMD,uBAAuB;AAC7B,IAAMC,iCAAmBC,OAAMC,WAGpC,SAASF,iBAAiB,QAA6BG,GAAG;uBAAhC,OAAEC,OAAAA,kCAAQ,sBAAUC,qCAApB;QAAED;;IAC3BC,KAAa,CAACN,qBAAqB,GAAGK,QAAQ,UAAU;IACzD,qBAAO,qBAACE,mDAAQD;QAAOF,KAAKA;;AAC9B"}
+{"version":3,"sources":["../../../../src/components/Tooltip/TooltipContainer.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const tooltipContainerAttr = 'data-tooltip-container';\nexport const TooltipContainer = React.forwardRef<\n  HTMLDivElement,\n  React.HtmlHTMLAttributes<HTMLDivElement> & { fixed?: boolean }\n>(function TooltipContainer({ fixed = false, ...props }, ref) {\n  (props as any)[tooltipContainerAttr] = fixed ? 'fixed' : 'true';\n  return <div {...props} ref={ref} />;\n});\n"],"names":["tooltipContainerAttr","TooltipContainer","React","forwardRef","ref","fixed","props","div"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IACAC,gBAAgB;eAAhBA;;;;;;;+DAHU;AAEhB,IAAMD,uBAAuB;AAC7B,IAAMC,iCAAmBC,OAAMC,UAAU,CAG9C,SAASF,iBAAiB,QAA6BG,GAAG;uBAAhC,OAAEC,OAAAA,kCAAQ,sBAAUC,qCAApB;QAAED;;IAC3BC,KAAa,CAACN,qBAAqB,GAAGK,QAAQ,UAAU;IACzD,qBAAO,qBAACE,mDAAQD;QAAOF,KAAKA;;AAC9B"}

package/dist/cjs/components/Touch/Touch.js

@@ -131,7 +131,7 @@ var Touch = function(_param) {
     var handle = function(e, handlers) {
         stopPropagation && e.stopPropagation();
         handlers.forEach(function(cb) {
-            var _gesture_current, _gesture_current_startT;
+            var _gesture_current_startT, _gesture_current;
             var _gesture_current_startT_getTime;
             var duration = Date.now() - ((_gesture_current_startT_getTime = (_gesture_current = gesture.current) === null || _gesture_current === void 0 ? void 0 : (_gesture_current_startT = _gesture_current.startT) === null || _gesture_current_startT === void 0 ? void 0 : _gesture_current_startT.getTime()) !== null && _gesture_current_startT_getTime !== void 0 ? _gesture_current_startT_getTime : 0);
             cb && cb(_object_spread_props._(_object_spread._({}, gesture.current), {

package/dist/cjs/components/Touch/Touch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Touch/Touch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport { coordX, coordY, getSupportedEvents, touchEnabled, VKUITouchEvent } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\n\nexport interface TouchProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Привязать onEnter и onLeave через pointer-events - работает на disabled-инпутах\n   */\n  usePointerHover?: boolean;\n  useCapture?: boolean;\n  slideThreshold?: number;\n  noSlideClick?: boolean;\n  onEnter?: HoverHandler;\n  onLeave?: HoverHandler;\n  onStart?: TouchEventHandler;\n  onStartX?: TouchEventHandler;\n  onStartY?: TouchEventHandler;\n  onMove?: TouchEventHandler;\n  onMoveX?: TouchEventHandler;\n  onMoveY?: TouchEventHandler;\n  onEnd?: TouchEventHandler;\n  onEndX?: TouchEventHandler;\n  onEndY?: TouchEventHandler;\n  stopPropagation?: boolean;\n}\n\nexport interface Gesture {\n  startX: number;\n  startY: number;\n  startT: Date;\n  duration: number;\n  isPressed: boolean;\n  isY: boolean;\n  isX: boolean;\n  isSlideX: boolean;\n  isSlideY: boolean;\n  isSlide: boolean;\n  shiftX: number;\n  shiftY: number;\n  shiftXAbs: number;\n  shiftYAbs: number;\n}\n\nexport interface TouchEvent extends Gesture {\n  originalEvent: VKUITouchEvent;\n}\n\ntype HoverHandler = (outputEvent: MouseEvent) => void;\nexport type TouchEventHandler = (e: TouchEvent) => void;\nexport type ClickHandler = (e: React.MouseEvent<HTMLElement>) => void;\nexport type DragHandler = (e: React.DragEvent<HTMLElement>) => void;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Touch\n */\nexport const Touch = ({\n  onStart,\n  onStartX,\n  onStartY,\n  onMove: _onMove,\n  onMoveX,\n  onMoveY,\n  onLeave,\n  onEnter,\n  onEnd: _onEnd,\n  onEndX,\n  onEndY,\n  onClickCapture,\n  usePointerHover,\n  slideThreshold = 5,\n  useCapture = false,\n  Component = 'div',\n  getRootRef,\n  noSlideClick = false,\n  stopPropagation = false,\n  ...restProps\n}: TouchProps) => {\n  const { document } = useDOM();\n  const events = React.useMemo(getSupportedEvents, []);\n  const didSlide = React.useRef(false);\n  const gesture = React.useRef<Partial<Gesture> | null>(null);\n  const handle = (e: VKUITouchEvent, handlers: Array<TouchEventHandler | undefined | false>) => {\n    stopPropagation && e.stopPropagation();\n    handlers.forEach((cb) => {\n      const duration = Date.now() - (gesture.current?.startT?.getTime() ?? 0);\n      cb && cb({ ...(gesture.current as Gesture), duration, originalEvent: e });\n    });\n  };\n\n  const enterHandler = useEventListener(usePointerHover ? 'pointerenter' : 'mouseenter', onEnter);\n  const leaveHandler = useEventListener(usePointerHover ? 'pointerleave' : 'mouseleave', onLeave);\n  const startHandler = useEventListener(\n    events[0],\n    (e: VKUITouchEvent) => {\n      gesture.current = initGesture(coordX(e), coordY(e));\n\n      handle(e, [onStart, onStartX, onStartY]);\n      // 1 line, 2 bad specs, 2 workarounds:\n      subscribe(\n        touchEnabled()\n          ? // Touch events fire on initial target, and won't bubble if its removed\n            // see: #235, #1968, https://stackoverflow.com/a/45760014\n            (e.target as HTMLElement)\n          : // Mouse events fire on the element under pointer, so we lose move / end\n            // if pointer goes outside container.\n            // Can be fixed by PointerEvents' setPointerCapture later\n            document,\n      );\n    },\n    { capture: useCapture, passive: false },\n  );\n  const containerRef = useExternRef(getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    const el = containerRef.current;\n    if (el) {\n      enterHandler.add(el);\n      leaveHandler.add(el);\n      startHandler.add(el);\n    }\n  }, [Component]);\n\n  function onMove(e: VKUITouchEvent) {\n    const { isPressed, isX, isY, startX = 0, startY = 0 } = gesture.current ?? {};\n\n    if (isPressed) {\n      // смещения\n      const shiftX = coordX(e) - startX;\n      const shiftY = coordY(e) - startY;\n\n      // абсолютные значения смещений\n      const shiftXAbs = Math.abs(shiftX);\n      const shiftYAbs = Math.abs(shiftY);\n\n      // Если определяем мультитач, то прерываем жест\n      if (!!e.touches && e.touches.length > 1) {\n        return onEnd(e);\n      }\n\n      // если мы ещё не определились\n      if (!isX && !isY) {\n        const willBeX = shiftXAbs >= slideThreshold && shiftXAbs > shiftYAbs;\n        const willBeY = shiftYAbs >= slideThreshold && shiftYAbs > shiftXAbs;\n        const willBeSlidedX = willBeX && (!!onMoveX || !!_onMove);\n        const willBeSlidedY = willBeY && (!!onMoveY || !!_onMove);\n\n        if (gesture.current) {\n          Object.assign(gesture.current, {\n            isY: willBeY,\n            isX: willBeX,\n            isSlideX: willBeSlidedX,\n            isSlideY: willBeSlidedY,\n            isSlide: willBeSlidedX || willBeSlidedY,\n          });\n        }\n      }\n\n      if (gesture.current?.isSlide) {\n        Object.assign(gesture.current, {\n          shiftX,\n          shiftY,\n          shiftXAbs,\n          shiftYAbs,\n        });\n\n        handle(e, [\n          _onMove,\n          gesture.current.isSlideX && onMoveX,\n          gesture.current.isSlideY && onMoveY,\n        ]);\n      }\n    }\n  }\n\n  function onEnd(e: VKUITouchEvent) {\n    const { isPressed, isSlide, isSlideX, isSlideY } = gesture.current ?? {};\n\n    if (isPressed) {\n      handle(e, [_onEnd, isSlideY && onEndY, isSlideX && onEndX]);\n    }\n\n    const isTouchEnabled = touchEnabled();\n\n    if (isTouchEnabled && isSlide) {\n      // https://github.com/VKCOM/VKUI/issues/4414\n      // если тач-устройство и был зафиксирован touchmove,\n      // то событие клика не вызывается\n      didSlide.current = false;\n    } else {\n      didSlide.current = Boolean(isSlide);\n    }\n    gesture.current = {};\n\n    // Если это был тач-евент, симулируем отмену hover\n    if (isTouchEnabled) {\n      onLeave && onLeave(e);\n    }\n    unsubscribe();\n  }\n\n  const listenerParams = { capture: useCapture, passive: false };\n  const listeners = [\n    useEventListener(events[1], onMove, listenerParams),\n    useEventListener(events[2], onEnd, listenerParams),\n    useEventListener(events[3], onEnd, listenerParams),\n  ];\n  function subscribe(el: HTMLElement | Document | null | undefined) {\n    if (el) {\n      listeners.forEach((l) => l.add(el));\n    }\n  }\n  function unsubscribe() {\n    listeners.forEach((l) => l.remove());\n  }\n\n  /**\n   * Обработчик событий dragstart\n   * Отменяет нативное браузерное поведение для вложенных ссылок и изображений\n   */\n  const onDragStart = (e: React.DragEvent<HTMLElement>) => {\n    const target = e.target as HTMLElement;\n    if (target.tagName === 'A' || target.tagName === 'IMG') {\n      e.preventDefault();\n    }\n  };\n\n  /**\n   * Обработчик клика по компоненту\n   * Отменяет переход по вложенной ссылке, если был зафиксирован свайп\n   */\n  const postGestureClick: typeof onClickCapture = (e) => {\n    if (!didSlide.current) {\n      return onClickCapture && onClickCapture(e);\n    }\n\n    if (noSlideClick) {\n      e.stopPropagation();\n\n      // https://github.com/VKCOM/VKUI/issues/1977\n      // https://github.com/VKCOM/VKUI/issues/3892\n      e.preventDefault();\n    } else {\n      onClickCapture && onClickCapture(e);\n    }\n\n    didSlide.current = false;\n  };\n\n  return (\n    <Component\n      {...restProps}\n      onDragStart={onDragStart}\n      onClickCapture={postGestureClick}\n      ref={containerRef}\n    />\n  );\n};\n\nfunction initGesture(startX: number, startY: number): Gesture {\n  return {\n    startX,\n    startY,\n    startT: new Date(),\n    duration: 0,\n    isPressed: true,\n    isY: false,\n    isX: false,\n    isSlideX: false,\n    isSlideY: false,\n    isSlide: false,\n    shiftX: 0,\n    shiftY: 0,\n    shiftXAbs: 0,\n    shiftYAbs: 0,\n  };\n}\n"],"names":["Touch","onMove","e","gesture","current","isPressed","isX","isY","startX","startY","shiftX","coordX","shiftY","coordY","shiftXAbs","Math","abs","shiftYAbs","touches","length","onEnd","willBeX","slideThreshold","willBeY","willBeSlidedX","onMoveX","_onMove","willBeSlidedY","onMoveY","Object","assign","isSlideX","isSlideY","isSlide","handle","_onEnd","onEndY","onEndX","isTouchEnabled","touchEnabled","didSlide","Boolean","onLeave","unsubscribe","subscribe","el","listeners","forEach","l","add","remove","onStart","onStartX","onStartY","onEnter","onClickCapture","usePointerHover","useCapture","Component","getRootRef","noSlideClick","stopPropagation","restProps","document","useDOM","events","React","useMemo","getSupportedEvents","useRef","handlers","cb","duration","Date","now","startT","getTime","originalEvent","enterHandler","useEventListener","leaveHandler","startHandler","initGesture","target","capture","passive","containerRef","useExternRef","useIsomorphicLayoutEffect","listenerParams","onDragStart","tagName","preventDefault","postGestureClick","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Touch/Touch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport { coordX, coordY, getSupportedEvents, touchEnabled, VKUITouchEvent } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\n\nexport interface TouchProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Привязать onEnter и onLeave через pointer-events - работает на disabled-инпутах\n   */\n  usePointerHover?: boolean;\n  useCapture?: boolean;\n  slideThreshold?: number;\n  noSlideClick?: boolean;\n  onEnter?: HoverHandler;\n  onLeave?: HoverHandler;\n  onStart?: TouchEventHandler;\n  onStartX?: TouchEventHandler;\n  onStartY?: TouchEventHandler;\n  onMove?: TouchEventHandler;\n  onMoveX?: TouchEventHandler;\n  onMoveY?: TouchEventHandler;\n  onEnd?: TouchEventHandler;\n  onEndX?: TouchEventHandler;\n  onEndY?: TouchEventHandler;\n  stopPropagation?: boolean;\n}\n\nexport interface Gesture {\n  startX: number;\n  startY: number;\n  startT: Date;\n  duration: number;\n  isPressed: boolean;\n  isY: boolean;\n  isX: boolean;\n  isSlideX: boolean;\n  isSlideY: boolean;\n  isSlide: boolean;\n  shiftX: number;\n  shiftY: number;\n  shiftXAbs: number;\n  shiftYAbs: number;\n}\n\nexport interface TouchEvent extends Gesture {\n  originalEvent: VKUITouchEvent;\n}\n\ntype HoverHandler = (outputEvent: MouseEvent) => void;\nexport type TouchEventHandler = (e: TouchEvent) => void;\nexport type ClickHandler = (e: React.MouseEvent<HTMLElement>) => void;\nexport type DragHandler = (e: React.DragEvent<HTMLElement>) => void;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Touch\n */\nexport const Touch = ({\n  onStart,\n  onStartX,\n  onStartY,\n  onMove: _onMove,\n  onMoveX,\n  onMoveY,\n  onLeave,\n  onEnter,\n  onEnd: _onEnd,\n  onEndX,\n  onEndY,\n  onClickCapture,\n  usePointerHover,\n  slideThreshold = 5,\n  useCapture = false,\n  Component = 'div',\n  getRootRef,\n  noSlideClick = false,\n  stopPropagation = false,\n  ...restProps\n}: TouchProps) => {\n  const { document } = useDOM();\n  const events = React.useMemo(getSupportedEvents, []);\n  const didSlide = React.useRef(false);\n  const gesture = React.useRef<Partial<Gesture> | null>(null);\n  const handle = (e: VKUITouchEvent, handlers: Array<TouchEventHandler | undefined | false>) => {\n    stopPropagation && e.stopPropagation();\n    handlers.forEach((cb) => {\n      const duration = Date.now() - (gesture.current?.startT?.getTime() ?? 0);\n      cb && cb({ ...(gesture.current as Gesture), duration, originalEvent: e });\n    });\n  };\n\n  const enterHandler = useEventListener(usePointerHover ? 'pointerenter' : 'mouseenter', onEnter);\n  const leaveHandler = useEventListener(usePointerHover ? 'pointerleave' : 'mouseleave', onLeave);\n  const startHandler = useEventListener(\n    events[0],\n    (e: VKUITouchEvent) => {\n      gesture.current = initGesture(coordX(e), coordY(e));\n\n      handle(e, [onStart, onStartX, onStartY]);\n      // 1 line, 2 bad specs, 2 workarounds:\n      subscribe(\n        touchEnabled()\n          ? // Touch events fire on initial target, and won't bubble if its removed\n            // see: #235, #1968, https://stackoverflow.com/a/45760014\n            (e.target as HTMLElement)\n          : // Mouse events fire on the element under pointer, so we lose move / end\n            // if pointer goes outside container.\n            // Can be fixed by PointerEvents' setPointerCapture later\n            document,\n      );\n    },\n    { capture: useCapture, passive: false },\n  );\n  const containerRef = useExternRef(getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    const el = containerRef.current;\n    if (el) {\n      enterHandler.add(el);\n      leaveHandler.add(el);\n      startHandler.add(el);\n    }\n  }, [Component]);\n\n  function onMove(e: VKUITouchEvent) {\n    const { isPressed, isX, isY, startX = 0, startY = 0 } = gesture.current ?? {};\n\n    if (isPressed) {\n      // смещения\n      const shiftX = coordX(e) - startX;\n      const shiftY = coordY(e) - startY;\n\n      // абсолютные значения смещений\n      const shiftXAbs = Math.abs(shiftX);\n      const shiftYAbs = Math.abs(shiftY);\n\n      // Если определяем мультитач, то прерываем жест\n      if (!!e.touches && e.touches.length > 1) {\n        return onEnd(e);\n      }\n\n      // если мы ещё не определились\n      if (!isX && !isY) {\n        const willBeX = shiftXAbs >= slideThreshold && shiftXAbs > shiftYAbs;\n        const willBeY = shiftYAbs >= slideThreshold && shiftYAbs > shiftXAbs;\n        const willBeSlidedX = willBeX && (!!onMoveX || !!_onMove);\n        const willBeSlidedY = willBeY && (!!onMoveY || !!_onMove);\n\n        if (gesture.current) {\n          Object.assign(gesture.current, {\n            isY: willBeY,\n            isX: willBeX,\n            isSlideX: willBeSlidedX,\n            isSlideY: willBeSlidedY,\n            isSlide: willBeSlidedX || willBeSlidedY,\n          });\n        }\n      }\n\n      if (gesture.current?.isSlide) {\n        Object.assign(gesture.current, {\n          shiftX,\n          shiftY,\n          shiftXAbs,\n          shiftYAbs,\n        });\n\n        handle(e, [\n          _onMove,\n          gesture.current.isSlideX && onMoveX,\n          gesture.current.isSlideY && onMoveY,\n        ]);\n      }\n    }\n  }\n\n  function onEnd(e: VKUITouchEvent) {\n    const { isPressed, isSlide, isSlideX, isSlideY } = gesture.current ?? {};\n\n    if (isPressed) {\n      handle(e, [_onEnd, isSlideY && onEndY, isSlideX && onEndX]);\n    }\n\n    const isTouchEnabled = touchEnabled();\n\n    if (isTouchEnabled && isSlide) {\n      // https://github.com/VKCOM/VKUI/issues/4414\n      // если тач-устройство и был зафиксирован touchmove,\n      // то событие клика не вызывается\n      didSlide.current = false;\n    } else {\n      didSlide.current = Boolean(isSlide);\n    }\n    gesture.current = {};\n\n    // Если это был тач-евент, симулируем отмену hover\n    if (isTouchEnabled) {\n      onLeave && onLeave(e);\n    }\n    unsubscribe();\n  }\n\n  const listenerParams = { capture: useCapture, passive: false };\n  const listeners = [\n    useEventListener(events[1], onMove, listenerParams),\n    useEventListener(events[2], onEnd, listenerParams),\n    useEventListener(events[3], onEnd, listenerParams),\n  ];\n  function subscribe(el: HTMLElement | Document | null | undefined) {\n    if (el) {\n      listeners.forEach((l) => l.add(el));\n    }\n  }\n  function unsubscribe() {\n    listeners.forEach((l) => l.remove());\n  }\n\n  /**\n   * Обработчик событий dragstart\n   * Отменяет нативное браузерное поведение для вложенных ссылок и изображений\n   */\n  const onDragStart = (e: React.DragEvent<HTMLElement>) => {\n    const target = e.target as HTMLElement;\n    if (target.tagName === 'A' || target.tagName === 'IMG') {\n      e.preventDefault();\n    }\n  };\n\n  /**\n   * Обработчик клика по компоненту\n   * Отменяет переход по вложенной ссылке, если был зафиксирован свайп\n   */\n  const postGestureClick: typeof onClickCapture = (e) => {\n    if (!didSlide.current) {\n      return onClickCapture && onClickCapture(e);\n    }\n\n    if (noSlideClick) {\n      e.stopPropagation();\n\n      // https://github.com/VKCOM/VKUI/issues/1977\n      // https://github.com/VKCOM/VKUI/issues/3892\n      e.preventDefault();\n    } else {\n      onClickCapture && onClickCapture(e);\n    }\n\n    didSlide.current = false;\n  };\n\n  return (\n    <Component\n      {...restProps}\n      onDragStart={onDragStart}\n      onClickCapture={postGestureClick}\n      ref={containerRef}\n    />\n  );\n};\n\nfunction initGesture(startX: number, startY: number): Gesture {\n  return {\n    startX,\n    startY,\n    startT: new Date(),\n    duration: 0,\n    isPressed: true,\n    isY: false,\n    isX: false,\n    isSlideX: false,\n    isSlideY: false,\n    isSlide: false,\n    shiftX: 0,\n    shiftY: 0,\n    shiftXAbs: 0,\n    shiftYAbs: 0,\n  };\n}\n"],"names":["Touch","onMove","e","gesture","current","isPressed","isX","isY","startX","startY","shiftX","coordX","shiftY","coordY","shiftXAbs","Math","abs","shiftYAbs","touches","length","onEnd","willBeX","slideThreshold","willBeY","willBeSlidedX","onMoveX","_onMove","willBeSlidedY","onMoveY","Object","assign","isSlideX","isSlideY","isSlide","handle","_onEnd","onEndY","onEndX","isTouchEnabled","touchEnabled","didSlide","Boolean","onLeave","unsubscribe","subscribe","el","listeners","forEach","l","add","remove","onStart","onStartX","onStartY","onEnter","onClickCapture","usePointerHover","useCapture","Component","getRootRef","noSlideClick","stopPropagation","restProps","document","useDOM","events","React","useMemo","getSupportedEvents","useRef","handlers","cb","duration","Date","now","startT","getTime","originalEvent","enterHandler","useEventListener","leaveHandler","startHandler","initGesture","target","capture","passive","containerRef","useExternRef","useIsomorphicLayoutEffect","listenerParams","onDragStart","tagName","preventDefault","postGestureClick","ref"],"mappings":"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"}

package/dist/cjs/components/Touch/TouchContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Touch/TouchContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Контекст для компонентов, использующих Touch в качестве корневой обёртки,\n * и для которых важно не предотвращать всплытие тач-событий от дочерних компонентов\n */\nconst TouchRootContext: React.Context<boolean> = React.createContext<boolean>(false);\n\n// eslint-disable-next-line import/no-default-export\nexport default TouchRootContext;\n"],"names":["TouchRootContext","React","createContext"],"mappings":";;;;+BAQA,oDAAoD;AACpD;;;eAAA;;;;+DATuB;AAEvB;;;CAGC,GACD,IAAMA,mBAA2CC,OAAMC,cAAuB;IAG9E,WAAeF"}
+{"version":3,"sources":["../../../../src/components/Touch/TouchContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Контекст для компонентов, использующих Touch в качестве корневой обёртки,\n * и для которых важно не предотвращать всплытие тач-событий от дочерних компонентов\n */\nconst TouchRootContext: React.Context<boolean> = React.createContext<boolean>(false);\n\n// eslint-disable-next-line import/no-default-export\nexport default TouchRootContext;\n"],"names":["TouchRootContext","React","createContext"],"mappings":";;;;+BAQA,oDAAoD;AACpD;;;eAAA;;;;+DATuB;AAEvB;;;CAGC,GACD,IAAMA,mBAA2CC,OAAMC,aAAa,CAAU;IAG9E,WAAeF"}

package/dist/cjs/components/Typography/Caption/Caption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, Typography, TypographyProps } from '../Typography';\nimport styles from './Caption.module.css';\n\nexport interface CaptionProps extends TypographyProps, HasCaps {\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Caption\n */\nexport const Caption = ({\n  className,\n  level = '1',\n  caps,\n  Component = 'span',\n  normalize = true,\n  ...restProps\n}: CaptionProps) => {\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(\n        className,\n        caps && styles['Caption--caps'],\n        {\n          '1': styles['Caption--level-1'],\n          '2': styles['Caption--level-2'],\n          '3': styles['Caption--level-3'],\n        }[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Caption","className","level","caps","Component","normalize","restProps","Typography","classNames"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;+DAZU;oBACI;0BAC0B;AAU9C,IAAMA,UAAU;QACrBC,mBAAAA,iCACAC,OAAAA,kCAAQ,oBACRC,cAAAA,gCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,yBACTC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE;QACCH,WAAWA;QACXC,WAAWA;QACXJ,WAAWO,IAAAA,kBACTP,WACAE,6BACA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAC,CAACD,MAAM;OAENI;AAGV"}
+{"version":3,"sources":["../../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, Typography, TypographyProps } from '../Typography';\nimport styles from './Caption.module.css';\n\nexport interface CaptionProps extends TypographyProps, HasCaps {\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Caption\n */\nexport const Caption = ({\n  className,\n  level = '1',\n  caps,\n  Component = 'span',\n  normalize = true,\n  ...restProps\n}: CaptionProps) => {\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(\n        className,\n        caps && styles['Caption--caps'],\n        {\n          '1': styles['Caption--level-1'],\n          '2': styles['Caption--level-2'],\n          '3': styles['Caption--level-3'],\n        }[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Caption","className","level","caps","Component","normalize","restProps","Typography","classNames"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;+DAZU;oBACI;0BAC0B;AAU9C,IAAMA,UAAU;QACrBC,mBAAAA,iCACAC,OAAAA,kCAAQ,oBACRC,cAAAA,gCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,yBACTC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,sBAAU;QACTH,WAAWA;QACXC,WAAWA;QACXJ,WAAWO,IAAAA,gBAAU,EACnBP,WACAE,6BACA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAC,CAACD,MAAM;OAENI;AAGV"}

package/dist/cjs/components/Typography/Footnote/Footnote.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Footnote/Footnote.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, Typography, TypographyProps } from '../Typography';\nimport styles from './Footnote.module.css';\n\nexport interface FootnoteProps extends TypographyProps, HasCaps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footnote\n */\nexport const Footnote = ({\n  className,\n  caps,\n  Component = 'span',\n  normalize = true,\n  ...restProps\n}: FootnoteProps) => (\n  <Typography\n    Component={Component}\n    normalize={normalize}\n    className={classNames(className, styles['Footnote'], caps && styles['Footnote--caps'])}\n    {...restProps}\n  />\n);\n"],"names":["Footnote","className","caps","Component","normalize","restProps","Typography","classNames"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;+DAVU;oBACI;0BAC0B;AAQ9C,IAAMA,WAAW;QACtBC,mBAAAA,WACAC,cAAAA,gCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,yBACTC;QAJHJ;QACAC;QACAC;QACAC;;WAGA,qBAACE;QACCH,WAAWA;QACXC,WAAWA;QACXH,WAAWM,IAAAA,kBAAWN,2BAA+BC;OACjDG;AACL"}
+{"version":3,"sources":["../../../../../src/components/Typography/Footnote/Footnote.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, Typography, TypographyProps } from '../Typography';\nimport styles from './Footnote.module.css';\n\nexport interface FootnoteProps extends TypographyProps, HasCaps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footnote\n */\nexport const Footnote = ({\n  className,\n  caps,\n  Component = 'span',\n  normalize = true,\n  ...restProps\n}: FootnoteProps) => (\n  <Typography\n    Component={Component}\n    normalize={normalize}\n    className={classNames(className, styles['Footnote'], caps && styles['Footnote--caps'])}\n    {...restProps}\n  />\n);\n"],"names":["Footnote","className","caps","Component","normalize","restProps","Typography","classNames"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;+DAVU;oBACI;0BAC0B;AAQ9C,IAAMA,WAAW;QACtBC,mBAAAA,WACAC,cAAAA,gCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,yBACTC;QAJHJ;QACAC;QACAC;QACAC;;WAGA,qBAACE,sBAAU;QACTH,WAAWA;QACXC,WAAWA;QACXH,WAAWM,IAAAA,gBAAU,EAACN,2BAA+BC;OACjDG;AACL"}

package/dist/cjs/components/Typography/Headline/Headline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Headline/Headline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Headline.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Headline--sizeY-none'],\n  [SizeType.COMPACT]: styles['Headline--sizeY-compact'],\n};\n\nexport interface HeadlineProps extends TypographyProps {\n  level?: '1' | '2';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Headline\n */\nexport const Headline = ({\n  className,\n  weight = '3',\n  level = '1',\n  Component = 'h4',\n  normalize = true,\n  ...restProps\n}: HeadlineProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      weight={weight}\n      className={classNames(\n        className,\n        styles['Headline'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        {\n          '1': styles['Headline--level-1'],\n          '2': styles['Headline--level-2'],\n        }[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Headline","sizeYClassNames","none","SizeType","COMPACT","className","weight","level","Component","normalize","restProps","useAdaptivity","sizeY","Typography","classNames","REGULAR"],"mappings":";;;;+BAmBaA;;;eAAAA;;;;;;;+DAnBU;oBACI;6BACG;0BACL;0BACmB;AAG5C,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAUL,IAAMJ,WAAW;QACtBK,mBAAAA,kCACAC,QAAAA,oCAAS,2CACTC,OAAAA,kCAAQ,8CACRC,WAAAA,0CAAY,mDACZC,WAAAA,0CAAY,yBACTC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC;QACCL,WAAWA;QACXC,WAAWA;QACXH,QAAQA;QACRD,WAAWS,IAAAA,kBACTT,2BAEAO,UAAUT,qBAASY,WAAWd,eAAe,CAACW,MAAM,EACpD;YACE,GAAG;YACH,GAAG;QACL,CAAC,CAACL,MAAM;OAENG;AAGV"}
+{"version":3,"sources":["../../../../../src/components/Typography/Headline/Headline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Headline.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Headline--sizeY-none'],\n  [SizeType.COMPACT]: styles['Headline--sizeY-compact'],\n};\n\nexport interface HeadlineProps extends TypographyProps {\n  level?: '1' | '2';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Headline\n */\nexport const Headline = ({\n  className,\n  weight = '3',\n  level = '1',\n  Component = 'h4',\n  normalize = true,\n  ...restProps\n}: HeadlineProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      weight={weight}\n      className={classNames(\n        className,\n        styles['Headline'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        {\n          '1': styles['Headline--level-1'],\n          '2': styles['Headline--level-2'],\n        }[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Headline","sizeYClassNames","none","SizeType","COMPACT","className","weight","level","Component","normalize","restProps","useAdaptivity","sizeY","Typography","classNames","REGULAR"],"mappings":";;;;+BAmBaA;;;eAAAA;;;;;;;+DAnBU;oBACI;6BACG;0BACL;0BACmB;AAG5C,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAUZ,IAAMJ,WAAW;QACtBK,mBAAAA,kCACAC,QAAAA,oCAAS,2CACTC,OAAAA,kCAAQ,8CACRC,WAAAA,0CAAY,mDACZC,WAAAA,0CAAY,yBACTC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,sBAAU;QACTL,WAAWA;QACXC,WAAWA;QACXH,QAAQA;QACRD,WAAWS,IAAAA,gBAAU,EACnBT,2BAEAO,UAAUT,oBAAQ,CAACY,OAAO,IAAId,eAAe,CAACW,MAAM,EACpD;YACE,GAAG;YACH,GAAG;QACL,CAAC,CAACL,MAAM;OAENG;AAGV"}

package/dist/cjs/components/Typography/Paragraph/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Paragraph/Paragraph.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Paragraph.module.css';\n\nexport type ParagraphProps = TypographyProps;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Paragraph\n */\nexport const Paragraph = ({\n  className,\n  Component = 'span',\n  normalize = false,\n  ...restProps\n}: ParagraphProps) => {\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(className, styles['Paragraph'])}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Paragraph","className","Component","normalize","restProps","Typography","classNames"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;+DAVU;oBACI;0BACiB;AAQrC,IAAMA,YAAY;QACvBC,mBAAAA,qCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,0BACTC;QAHHH;QACAC;QACAC;;IAGA,qBACE,qBAACE;QACCH,WAAWA;QACXC,WAAWA;QACXF,WAAWK,IAAAA,kBAAWL;OAClBG;AAGV"}
+{"version":3,"sources":["../../../../../src/components/Typography/Paragraph/Paragraph.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Paragraph.module.css';\n\nexport type ParagraphProps = TypographyProps;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Paragraph\n */\nexport const Paragraph = ({\n  className,\n  Component = 'span',\n  normalize = false,\n  ...restProps\n}: ParagraphProps) => {\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(className, styles['Paragraph'])}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Paragraph","className","Component","normalize","restProps","Typography","classNames"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;+DAVU;oBACI;0BACiB;AAQrC,IAAMA,YAAY;QACvBC,mBAAAA,qCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,0BACTC;QAHHH;QACAC;QACAC;;IAGA,qBACE,qBAACE,sBAAU;QACTH,WAAWA;QACXC,WAAWA;QACXF,WAAWK,IAAAA,gBAAU,EAACL;OAClBG;AAGV"}

package/dist/cjs/components/Typography/Subhead/Subhead.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Subhead/Subhead.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Subhead.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Subhead--sizeY-none'],\n  [SizeType.COMPACT]: styles['Subhead--sizeY-compact'],\n};\n\nexport type SubheadProps = TypographyProps;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Subhead\n */\nexport const Subhead = ({\n  className,\n  Component = 'h5',\n  normalize = true,\n  ...restProps\n}: SubheadProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(\n        className,\n        styles['Subhead'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Subhead","sizeYClassNames","none","SizeType","COMPACT","className","Component","normalize","restProps","useAdaptivity","sizeY","Typography","classNames","REGULAR"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;+DAjBU;oBACI;6BACG;0BACL;0BACmB;AAG5C,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAQL,IAAMJ,UAAU;QACrBK,mBAAAA,qCACAC,WAAAA,0CAAY,mDACZC,WAAAA,0CAAY,yBACTC;QAHHH;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC;QACCL,WAAWA;QACXC,WAAWA;QACXF,WAAWO,IAAAA,kBACTP,0BAEAK,UAAUP,qBAASU,WAAWZ,eAAe,CAACS,MAAM;OAElDF;AAGV"}
+{"version":3,"sources":["../../../../../src/components/Typography/Subhead/Subhead.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Subhead.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Subhead--sizeY-none'],\n  [SizeType.COMPACT]: styles['Subhead--sizeY-compact'],\n};\n\nexport type SubheadProps = TypographyProps;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Subhead\n */\nexport const Subhead = ({\n  className,\n  Component = 'h5',\n  normalize = true,\n  ...restProps\n}: SubheadProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(\n        className,\n        styles['Subhead'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Subhead","sizeYClassNames","none","SizeType","COMPACT","className","Component","normalize","restProps","useAdaptivity","sizeY","Typography","classNames","REGULAR"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;+DAjBU;oBACI;6BACG;0BACL;0BACmB;AAG5C,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAQZ,IAAMJ,UAAU;QACrBK,mBAAAA,qCACAC,WAAAA,0CAAY,mDACZC,WAAAA,0CAAY,yBACTC;QAHHH;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,sBAAU;QACTL,WAAWA;QACXC,WAAWA;QACXF,WAAWO,IAAAA,gBAAU,EACnBP,0BAEAK,UAAUP,oBAAQ,CAACU,OAAO,IAAIZ,eAAe,CAACS,MAAM;OAElDF;AAGV"}

package/dist/cjs/components/Typography/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Text/Text.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Text.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Text--sizeY-none'],\n  [SizeType.COMPACT]: styles['Text--sizeY-compact'],\n};\n\nexport type TextProps = TypographyProps;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Text\n */\nexport const Text = ({\n  className,\n  Component = 'span',\n  normalize = true,\n  ...restProps\n}: TextProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(\n        className,\n        styles['Text'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Text","sizeYClassNames","none","SizeType","COMPACT","className","Component","normalize","restProps","useAdaptivity","sizeY","Typography","classNames","REGULAR"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;+DAjBU;oBACI;6BACG;0BACL;0BACmB;AAG5C,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAQL,IAAMJ,OAAO;QAClBK,mBAAAA,qCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,yBACTC;QAHHH;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC;QACCL,WAAWA;QACXC,WAAWA;QACXF,WAAWO,IAAAA,kBACTP,uBAEAK,UAAUP,qBAASU,WAAWZ,eAAe,CAACS,MAAM;OAElDF;AAGV"}
+{"version":3,"sources":["../../../../../src/components/Typography/Text/Text.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Text.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Text--sizeY-none'],\n  [SizeType.COMPACT]: styles['Text--sizeY-compact'],\n};\n\nexport type TextProps = TypographyProps;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Text\n */\nexport const Text = ({\n  className,\n  Component = 'span',\n  normalize = true,\n  ...restProps\n}: TextProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(\n        className,\n        styles['Text'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Text","sizeYClassNames","none","SizeType","COMPACT","className","Component","normalize","restProps","useAdaptivity","sizeY","Typography","classNames","REGULAR"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;+DAjBU;oBACI;6BACG;0BACL;0BACmB;AAG5C,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAQZ,IAAMJ,OAAO;QAClBK,mBAAAA,qCACAC,WAAAA,0CAAY,qDACZC,WAAAA,0CAAY,yBACTC;QAHHH;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,sBAAU;QACTL,WAAWA;QACXC,WAAWA;QACXF,WAAWO,IAAAA,gBAAU,EACnBP,uBAEAK,UAAUP,oBAAQ,CAACU,OAAO,IAAIZ,eAAe,CAACS,MAAM;OAElDF;AAGV"}

package/dist/cjs/components/Typography/Title/Title.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Title/Title.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Title.module.css';\n\nexport interface TitleProps extends TypographyProps {\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Title\n */\nexport const Title = ({\n  className,\n  level = '1',\n  Component,\n  normalize = true,\n  ...restProps\n}: TitleProps) => {\n  if (!Component) {\n    Component = ('h' + level) as React.ElementType;\n  }\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(\n        className,\n        {\n          '1': styles['Title--level-1'],\n          '2': styles['Title--level-2'],\n          '3': styles['Title--level-3'],\n        }[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Title","className","level","Component","normalize","restProps","Typography","classNames"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;+DAZU;oBACI;0BACiB;AAUrC,IAAMA,QAAQ;QACnBC,mBAAAA,iCACAC,OAAAA,kCAAQ,oBACRC,mBAAAA,qCACAC,WAAAA,0CAAY,yBACTC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAI,CAACD,WAAW;QACdA,YAAa,MAAMD;IACrB;IAEA,qBACE,qBAACI;QACCH,WAAWA;QACXC,WAAWA;QACXH,WAAWM,IAAAA,kBACTN,WACA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAC,CAACC,MAAM;OAENG;AAGV"}
+{"version":3,"sources":["../../../../../src/components/Typography/Title/Title.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Typography, TypographyProps } from '../Typography';\nimport styles from './Title.module.css';\n\nexport interface TitleProps extends TypographyProps {\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Title\n */\nexport const Title = ({\n  className,\n  level = '1',\n  Component,\n  normalize = true,\n  ...restProps\n}: TitleProps) => {\n  if (!Component) {\n    Component = ('h' + level) as React.ElementType;\n  }\n\n  return (\n    <Typography\n      Component={Component}\n      normalize={normalize}\n      className={classNames(\n        className,\n        {\n          '1': styles['Title--level-1'],\n          '2': styles['Title--level-2'],\n          '3': styles['Title--level-3'],\n        }[level],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Title","className","level","Component","normalize","restProps","Typography","classNames"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;+DAZU;oBACI;0BACiB;AAUrC,IAAMA,QAAQ;QACnBC,mBAAAA,iCACAC,OAAAA,kCAAQ,oBACRC,mBAAAA,qCACAC,WAAAA,0CAAY,yBACTC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAI,CAACD,WAAW;QACdA,YAAa,MAAMD;IACrB;IAEA,qBACE,qBAACI,sBAAU;QACTH,WAAWA;QACXC,WAAWA;QACXH,WAAWM,IAAAA,gBAAU,EACnBN,WACA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAC,CAACC,MAAM;OAENG;AAGV"}

package/dist/cjs/components/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './Typography.module.css';\n\nexport interface HasCaps {\n  caps?: boolean;\n}\n\nexport interface TypographyProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasComponent,\n    HasRootRef<HTMLElement> {\n  /**\n   * Задаёт начертание шрифта, отличное от стандартного.\n   */\n  weight?: '1' | '2' | '3';\n  /**\n   * Убирает внешние отступы\n   */\n  normalize?: boolean;\n}\n\nexport const Typography = ({\n  className,\n  weight,\n  Component = 'span',\n  normalize,\n  getRootRef,\n  ...restProps\n}: TypographyProps) => (\n  <Component\n    {...restProps}\n    ref={getRootRef}\n    className={classNames(\n      className,\n      normalize && styles['Typography--normalize'],\n      weight &&\n        {\n          '1': styles['Typography--weight-1'],\n          '2': styles['Typography--weight-2'],\n          '3': styles['Typography--weight-3'],\n        }[weight],\n    )}\n  />\n);\n"],"names":["Typography","className","weight","Component","normalize","getRootRef","restProps","ref","classNames"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;+DAvBU;oBACI;AAsBpB,IAAMA,aAAa;QACxBC,mBAAAA,WACAC,gBAAAA,kCACAC,WAAAA,0CAAY,2BACZC,mBAAAA,WACAC,oBAAAA,YACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;WAGA,qBAACF,uDACKG;QACJC,KAAKF;QACLJ,WAAWO,IAAAA,kBACTP,WACAG,0CACAF,UACE,CAAA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAA,CAAC,CAACA,OAAO;;AAEd"}
+{"version":3,"sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './Typography.module.css';\n\nexport interface HasCaps {\n  caps?: boolean;\n}\n\nexport interface TypographyProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasComponent,\n    HasRootRef<HTMLElement> {\n  /**\n   * Задаёт начертание шрифта, отличное от стандартного.\n   */\n  weight?: '1' | '2' | '3';\n  /**\n   * Убирает внешние отступы\n   */\n  normalize?: boolean;\n}\n\nexport const Typography = ({\n  className,\n  weight,\n  Component = 'span',\n  normalize,\n  getRootRef,\n  ...restProps\n}: TypographyProps) => (\n  <Component\n    {...restProps}\n    ref={getRootRef}\n    className={classNames(\n      className,\n      normalize && styles['Typography--normalize'],\n      weight &&\n        {\n          '1': styles['Typography--weight-1'],\n          '2': styles['Typography--weight-2'],\n          '3': styles['Typography--weight-3'],\n        }[weight],\n    )}\n  />\n);\n"],"names":["Typography","className","weight","Component","normalize","getRootRef","restProps","ref","classNames"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;+DAvBU;oBACI;AAsBpB,IAAMA,aAAa;QACxBC,mBAAAA,WACAC,gBAAAA,kCACAC,WAAAA,0CAAY,2BACZC,mBAAAA,WACAC,oBAAAA,YACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;WAGA,qBAACF,uDACKG;QACJC,KAAKF;QACLJ,WAAWO,IAAAA,gBAAU,EACnBP,WACAG,0CACAF,UACE,CAAA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAA,CAAC,CAACA,OAAO;;AAEd"}

package/dist/cjs/components/UsersStack/UsersStack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/UsersStack/UsersStack.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useId } from '../../hooks/useId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './UsersStack.module.css';\n\nexport interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Массив ссылок на фотографии\n   */\n  photos?: string[];\n  /**\n   * Размер аватарок\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Вертикальный режим рекомендуется использовать с размером `m`\n   * TODO [>=6]: удалить\n   * @deprecated\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Количество аватарок, которые будут показаны.\n   * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n   */\n  visibleCount?: number;\n  /**\n   * Число, которое будет указано в счетчике.\n   * По умолчанию высчитывается по формуле `photos.length - visibleCount`.\n   * Если число больше 99, то счетчик скроется.\n   */\n  count?: number;\n  /**\n   * Определяет положение элементов\n   * Режим `column` рекомендуется использовать с размером `m`\n   * @since 5.3.0\n   */\n  direction?: 'row' | 'row-reverse' | 'column';\n}\n\ninterface PathElementProps extends React.SVGAttributes<SVGElement> {\n  photoSize: number;\n  direction: 'circle' | 'right' | 'left';\n}\n\ntype PhotoSizeType = 16 | 24 | 32;\n\nfunction PathElement({ photoSize, direction, ...props }: PathElementProps) {\n  switch (direction) {\n    case 'circle':\n      const radius = photoSize / 2;\n\n      return <circle cx={radius} cy={radius} r={radius} {...props} />;\n\n    case 'right':\n      switch (photoSize) {\n        case 24:\n          return (\n            <path\n              d=\"M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625\"\n              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              d=\"M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75\"\n              {...props}\n            />\n          );\n      }\n\n    default:\n      switch (photoSize) {\n        case 16:\n          return (\n            <path\n              d=\"M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285\"\n              {...props}\n            />\n          );\n        case 24:\n          return (\n            <path\n              d=\"M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625\"\n              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              d=\"M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75\"\n              {...props}\n            />\n          );\n      }\n  }\n}\n\nconst photoSizes: Record<NonNullable<UsersStackProps['size']>, PhotoSizeType> = {\n  s: 16,\n  m: 24,\n  l: 32,\n};\n\nconst warn = warnOnce('UsersStack');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/UsersStack\n */\nexport const UsersStack = ({\n  photos = [],\n  visibleCount = 3,\n  count = Math.max(0, photos.length - visibleCount),\n  size = 'm',\n  layout,\n  children,\n  className,\n  direction: directionProp = 'row',\n  ...restProps\n}: UsersStackProps) => {\n  const cmpId = useId();\n\n  const canShowOthers = count > 0 && count < 100 && size !== 's';\n  const CounterTypography = size === 'l' ? Footnote : Caption;\n\n  const photoSize = photoSizes[size];\n  const directionClip = canShowOthers ? 'right' : 'left';\n\n  const photosElements = photos.slice(0, visibleCount).map((photo, i) => {\n    const direction = i === 0 && !canShowOthers ? 'circle' : directionClip;\n\n    const id = `UsersStackDefs${cmpId}${i}`;\n    const hrefID = `#${id}`;\n    const maskID = `UsersStackMask${cmpId}${i}`;\n\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={styles['UsersStack__photo']}\n        key={i}\n        aria-hidden\n      >\n        <defs>\n          <PathElement id={id} direction={direction} photoSize={photoSize} />\n        </defs>\n        <clipPath id={maskID}>\n          <use href={hrefID} />\n        </clipPath>\n        <g clipPath={`url(#${maskID})`}>\n          <use href={hrefID} className={styles['UsersStack__fill']} />\n          <image href={photo} width={photoSize} height={photoSize} />\n          <use href={hrefID} fill=\"none\" stroke=\"rgba(0, 0, 0, 0.08)\" />\n        </g>\n      </svg>\n    );\n  });\n\n  const othersElement = canShowOthers ? (\n    <CounterTypography\n      caps\n      weight=\"1\"\n      className={classNames(styles['UsersStack__photo'], styles['UsersStack__photo--others'])}\n    >\n      +{count}\n    </CounterTypography>\n  ) : null;\n\n  if (process.env.NODE_ENV === 'development' && layout) {\n    // TODO [>=6]: Удалить layout\n    warn('Свойство \"layout\" будет удалено в v6. Используйте свойство \"direction\"');\n  }\n\n  const direction = (layout && (layout === 'vertical' ? 'column' : 'row')) || directionProp;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        'vkuiInternalUsersStack',\n        styles['UsersStack'],\n        {\n          s: styles['UsersStack--size-s'],\n          m: styles['UsersStack--size-m'],\n          l: styles['UsersStack--size-l'],\n        }[size],\n        {\n          'row': styles['UsersStack--direction-row'],\n          'row-reverse': styles['UsersStack--direction-row-reverse'],\n          'column': styles['UsersStack--direction-column'],\n        }[direction],\n        className,\n      )}\n    >\n      {(photosElements.length > 0 || othersElement) && (\n        <div className={styles['UsersStack__photos']} aria-hidden>\n          {photosElements}\n          {othersElement}\n        </div>\n      )}\n      {hasReactNode(children) && (\n        <Footnote className={styles['UsersStack__text']}>{children}</Footnote>\n      )}\n    </div>\n  );\n};\n"],"names":["UsersStack","PathElement","photoSize","direction","props","radius","circle","cx","cy","r","path","d","photoSizes","s","m","l","warn","warnOnce","photos","visibleCount","count","Math","max","length","size","layout","children","className","directionProp","restProps","cmpId","useId","canShowOthers","CounterTypography","Footnote","Caption","directionClip","photosElements","slice","map","photo","i","id","hrefID","maskID","svg","xmlns","key","aria-hidden","defs","clipPath","use","href","g","image","width","height","fill","stroke","othersElement","caps","weight","classNames","process","env","NODE_ENV","div","hasReactNode"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/UsersStack/UsersStack.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useId } from '../../hooks/useId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './UsersStack.module.css';\n\nexport interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Массив ссылок на фотографии\n   */\n  photos?: string[];\n  /**\n   * Размер аватарок\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Вертикальный режим рекомендуется использовать с размером `m`\n   * TODO [>=6]: удалить\n   * @deprecated\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Количество аватарок, которые будут показаны.\n   * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n   */\n  visibleCount?: number;\n  /**\n   * Число, которое будет указано в счетчике.\n   * По умолчанию высчитывается по формуле `photos.length - visibleCount`.\n   * Если число больше 99, то счетчик скроется.\n   */\n  count?: number;\n  /**\n   * Определяет положение элементов\n   * Режим `column` рекомендуется использовать с размером `m`\n   * @since 5.3.0\n   */\n  direction?: 'row' | 'row-reverse' | 'column';\n}\n\ninterface PathElementProps extends React.SVGAttributes<SVGElement> {\n  photoSize: number;\n  direction: 'circle' | 'right' | 'left';\n}\n\ntype PhotoSizeType = 16 | 24 | 32;\n\nfunction PathElement({ photoSize, direction, ...props }: PathElementProps) {\n  switch (direction) {\n    case 'circle':\n      const radius = photoSize / 2;\n\n      return <circle cx={radius} cy={radius} r={radius} {...props} />;\n\n    case 'right':\n      switch (photoSize) {\n        case 24:\n          return (\n            <path\n              d=\"M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625\"\n              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              d=\"M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75\"\n              {...props}\n            />\n          );\n      }\n\n    default:\n      switch (photoSize) {\n        case 16:\n          return (\n            <path\n              d=\"M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285\"\n              {...props}\n            />\n          );\n        case 24:\n          return (\n            <path\n              d=\"M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625\"\n              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              d=\"M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75\"\n              {...props}\n            />\n          );\n      }\n  }\n}\n\nconst photoSizes: Record<NonNullable<UsersStackProps['size']>, PhotoSizeType> = {\n  s: 16,\n  m: 24,\n  l: 32,\n};\n\nconst warn = warnOnce('UsersStack');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/UsersStack\n */\nexport const UsersStack = ({\n  photos = [],\n  visibleCount = 3,\n  count = Math.max(0, photos.length - visibleCount),\n  size = 'm',\n  layout,\n  children,\n  className,\n  direction: directionProp = 'row',\n  ...restProps\n}: UsersStackProps) => {\n  const cmpId = useId();\n\n  const canShowOthers = count > 0 && count < 100 && size !== 's';\n  const CounterTypography = size === 'l' ? Footnote : Caption;\n\n  const photoSize = photoSizes[size];\n  const directionClip = canShowOthers ? 'right' : 'left';\n\n  const photosElements = photos.slice(0, visibleCount).map((photo, i) => {\n    const direction = i === 0 && !canShowOthers ? 'circle' : directionClip;\n\n    const id = `UsersStackDefs${cmpId}${i}`;\n    const hrefID = `#${id}`;\n    const maskID = `UsersStackMask${cmpId}${i}`;\n\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={styles['UsersStack__photo']}\n        key={i}\n        aria-hidden\n      >\n        <defs>\n          <PathElement id={id} direction={direction} photoSize={photoSize} />\n        </defs>\n        <clipPath id={maskID}>\n          <use href={hrefID} />\n        </clipPath>\n        <g clipPath={`url(#${maskID})`}>\n          <use href={hrefID} className={styles['UsersStack__fill']} />\n          <image href={photo} width={photoSize} height={photoSize} />\n          <use href={hrefID} fill=\"none\" stroke=\"rgba(0, 0, 0, 0.08)\" />\n        </g>\n      </svg>\n    );\n  });\n\n  const othersElement = canShowOthers ? (\n    <CounterTypography\n      caps\n      weight=\"1\"\n      className={classNames(styles['UsersStack__photo'], styles['UsersStack__photo--others'])}\n    >\n      +{count}\n    </CounterTypography>\n  ) : null;\n\n  if (process.env.NODE_ENV === 'development' && layout) {\n    // TODO [>=6]: Удалить layout\n    warn('Свойство \"layout\" будет удалено в v6. Используйте свойство \"direction\"');\n  }\n\n  const direction = (layout && (layout === 'vertical' ? 'column' : 'row')) || directionProp;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        'vkuiInternalUsersStack',\n        styles['UsersStack'],\n        {\n          s: styles['UsersStack--size-s'],\n          m: styles['UsersStack--size-m'],\n          l: styles['UsersStack--size-l'],\n        }[size],\n        {\n          'row': styles['UsersStack--direction-row'],\n          'row-reverse': styles['UsersStack--direction-row-reverse'],\n          'column': styles['UsersStack--direction-column'],\n        }[direction],\n        className,\n      )}\n    >\n      {(photosElements.length > 0 || othersElement) && (\n        <div className={styles['UsersStack__photos']} aria-hidden>\n          {photosElements}\n          {othersElement}\n        </div>\n      )}\n      {hasReactNode(children) && (\n        <Footnote className={styles['UsersStack__text']}>{children}</Footnote>\n      )}\n    </div>\n  );\n};\n"],"names":["UsersStack","PathElement","photoSize","direction","props","radius","circle","cx","cy","r","path","d","photoSizes","s","m","l","warn","warnOnce","photos","visibleCount","count","Math","max","length","size","layout","children","className","directionProp","restProps","cmpId","useId","canShowOthers","CounterTypography","Footnote","Caption","directionClip","photosElements","slice","map","photo","i","id","hrefID","maskID","svg","xmlns","key","aria-hidden","defs","clipPath","use","href","g","image","width","height","fill","stroke","othersElement","caps","weight","classNames","process","env","NODE_ENV","div","hasReactNode"],"mappings":"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"}

package/dist/cjs/components/View/View.d.ts

@@ -33,6 +33,7 @@ export interface ViewProps extends React.HTMLAttributes<HTMLElement>, NavIdProps
      */
     onSwipeBackCancel?(): void;
     history?: string[];
+    children: React.ReactElement | Iterable<React.ReactElement>;
 }
 export interface ViewState {
     animated: boolean;