@vkontakte/vkui 5.4.2 → 5.5.0

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

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

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

@@ -17,7 +17,7 @@ https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Positioning/Understanding_z_in
 https://github.com/VKCOM/VKUI/pull/3641
 */
 
-/* stylelint-disable-next-line vkui/atomic */
+/* stylelint-disable-next-line @project-tools/stylelint-atomic */
 
 .Tappable > * {
   position: relative;

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

@@ -17,4 +17,4 @@ export interface TextTooltipProps extends Omit<HoverPopperProps, 'arrow' | 'arro
 /**
  * @see https://vkcom.github.io/VKUI/#/TextTooltip
  */
-export declare const TextTooltip: ({ children, text, header, appearance, className, ...popperProps }: TextTooltipProps) => JSX.Element;
+export declare const TextTooltip: ({ children, text, header, appearance, className, ...popperProps }: TextTooltipProps) => React.JSX.Element;

package/dist/cssm/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":["React","classNames","hasReactNode","HoverPopper","Subhead","styles","TextTooltip","children","text","header","appearance","className","popperProps","accent","white","black","inversion","arrow","arrowClassName","content","Fragment","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,2BAA2B;AAkB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,KAAI,EACJC,OAAM,EACNC,YAAa,UAAS,EACtBC,UAAS,EACT,GAAGC,aACc,GAAK;IACtB,qBACE,oBAACT;QACCQ,WAAWV,WACTI,MAAM,CAAC,cAAc,EACrBK,eAAe,aACb,CAAA;YACEG,QAAQR,MAAM,CAAC,iCAAiC;YAChDS,OAAOT,MAAM,CAAC,gCAAgC;YAC9CU,OAAOV,MAAM,CAAC,gCAAgC;YAC9CW,WAAWX,MAAM,CAAC,oCAAoC;QACxD,CAAA,CAAC,CAACK,WAAW,EACfC;QAEFM,OAAAA,IAAK;QACLC,gBAAgBb,MAAM,CAAC,qBAAqB;QAC5Cc,uBACE,oBAACnB,MAAMoB,QAAQ,QACZlB,aAAaO,yBAAW,oBAACL;YAAQiB,QAAO;WAAKZ,SAC7CP,aAAaM,uBAAS,oBAACJ,eAASI;QAGpC,GAAGI,WAAW;OAEdL;AAGP,EAAE"}
+{"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":["React","classNames","hasReactNode","HoverPopper","Subhead","styles","TextTooltip","children","text","header","appearance","className","popperProps","accent","white","black","inversion","arrow","arrowClassName","content","Fragment","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,2BAA2B;AAkB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,KAAI,EACJC,OAAM,EACNC,YAAa,UAAS,EACtBC,UAAS,EACT,GAAGC,aACc;IACjB,qBACE,oBAACT;QACCQ,WAAWV,WACTI,MAAM,CAAC,cAAc,EACrBK,eAAe,aACb,CAAA;YACEG,QAAQR,MAAM,CAAC,iCAAiC;YAChDS,OAAOT,MAAM,CAAC,gCAAgC;YAC9CU,OAAOV,MAAM,CAAC,gCAAgC;YAC9CW,WAAWX,MAAM,CAAC,oCAAoC;QACxD,CAAA,CAAC,CAACK,WAAW,EACfC;QAEFM,OAAAA;QACAC,gBAAgBb,MAAM,CAAC,qBAAqB;QAC5Cc,uBACE,oBAACnB,MAAMoB,gBACJlB,aAAaO,yBAAW,oBAACL;YAAQiB,QAAO;WAAKZ,SAC7CP,aAAaM,uBAAS,oBAACJ,eAASI;QAGpC,GAAGI,WAAW;OAEdL;AAGP,EAAE"}

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

@@ -9,4 +9,4 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
 /**
  * @see https://vkcom.github.io/VKUI/#/Textarea
  */
-export declare const Textarea: ({ defaultValue, grow, style, onResize, className, getRootRef, getRef, rows, maxHeight, status, onChange: onChangeProp, value: valueProp, ...restProps }: TextareaProps) => JSX.Element;
+export declare const Textarea: ({ defaultValue, grow, style, onResize, className, getRootRef, getRef, rows, maxHeight, status, onChange: onChangeProp, value: valueProp, ...restProps }: TextareaProps) => React.JSX.Element;

package/dist/cssm/components/Textarea/Textarea.js

@@ -5,6 +5,7 @@ import { useEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
 import { SizeType } from '../../lib/adaptivity';
 import { FormField } from '../FormField/FormField';
+import { Text } from '../Typography/Text/Text';
 import styles from './Textarea.module.css';
 const sizeYClassNames = {
     none: styles['Textarea--sizeY-none'],
@@ -45,8 +46,10 @@ const sizeYClassNames = {
         getRootRef: getRootRef,
         disabled: restProps.disabled,
         status: status
-    }, /*#__PURE__*/ React.createElement("textarea", {
+    }, /*#__PURE__*/ React.createElement(Text, {
         ...restProps,
+        Component: "textarea",
+        normalize: false,
         style: {
             maxHeight
         },
@@ -54,7 +57,7 @@ const sizeYClassNames = {
         className: styles['Textarea__el'],
         value: value,
         onChange: onChange,
-        ref: elementRef
+        getRootRef: elementRef
     }));
 };
 

package/dist/cssm/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 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      <textarea\n        {...restProps}\n        style={{ maxHeight }}\n        rows={rows}\n        className={styles['Textarea__el']}\n        value={value}\n        onChange={onChange}\n        ref={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useEnsuredControl","useExternRef","SizeType","FormField","styles","sizeYClassNames","none","COMPACT","Textarea","defaultValue","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","onChangeProp","value","valueProp","restProps","currentScrollHeight","useRef","elementRef","sizeY","useEffect","el","current","offsetParent","height","scrollHeight","REGULAR","disabled","textarea","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACF,SAASK,OAAO,CAAC,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAaA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,cAAe,GAAE,EACjBC,MAAO,IAAI,CAAA,EACXC,MAAK,EACLC,SAAQ,EACRC,UAAS,EACTC,WAAU,EACVC,OAAM,EACNC,MAAO,EAAC,EACRC,UAAS,EACTC,OAAM,EACNC,UAAUC,aAAY,EACtBC,OAAOC,UAAS,EAChB,GAAGC,WACW,GAAK;IACnB,MAAM,CAACF,OAAOF,SAAS,GAAGnB,kBAAkB;QAC1CS;QACAU,UAAUC;QACVC,OAAOC;IACT;IACA,MAAME,sBAAsB3B,MAAM4B,MAAM;IACxC,MAAMC,aAAazB,aAAac;IAChC,MAAM,EAAEY,OAAQ,OAAM,EAAE,GAAG5B;IAE3B,iBAAiB;IACjBF,MAAM+B,SAAS,CAAC,IAAM;QACpB,MAAMC,KAAKH,WAAWI,OAAO;QAE7B,IAAIpB,QAAQmB,IAAIE,cAAc;YAC5BF,GAAGlB,KAAK,CAACqB,MAAM,GAAG;YAClBH,GAAGlB,KAAK,CAACqB,MAAM,GAAG,CAAC,EAAEH,GAAGI,YAAY,CAAC,EAAE,CAAC;YAExC,IAAIJ,GAAGI,YAAY,KAAKT,oBAAoBM,OAAO,IAAIlB,UAAU;gBAC/DA,SAASiB;gBACTL,oBAAoBM,OAAO,GAAGD,GAAGI,YAAY;YAC/C,CAAC;QACH,CAAC;IACH,GAAG;QAACvB;QAAMW;QAAOM;QAAOD;QAAYd;KAAS;IAE7C,qBACE,oBAACT;QACCU,WAAWf,WACTM,MAAM,CAAC,WAAW,EAClBuB,UAAUzB,SAASgC,OAAO,IAAI7B,eAAe,CAACsB,MAAM,EACpDd;QAEFF,OAAOA;QACPG,YAAYA;QACZqB,UAAUZ,UAAUY,QAAQ;QAC5BjB,QAAQA;qBAER,oBAACkB;QACE,GAAGb,SAAS;QACbZ,OAAO;YAAEM;QAAU;QACnBD,MAAMA;QACNH,WAAWT,MAAM,CAAC,eAAe;QACjCiB,OAAOA;QACPF,UAAUA;QACVkB,KAAKX;;AAIb,EAAE"}
+{"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":["React","classNames","useAdaptivity","useEnsuredControl","useExternRef","SizeType","FormField","Text","styles","sizeYClassNames","none","COMPACT","Textarea","defaultValue","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","onChangeProp","value","valueProp","restProps","currentScrollHeight","useRef","elementRef","sizeY","useEffect","el","current","offsetParent","height","scrollHeight","REGULAR","disabled","Component","normalize"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACH,SAASM,QAAQ,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAaA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,cAAe,GAAE,EACjBC,MAAO,KAAI,EACXC,MAAK,EACLC,SAAQ,EACRC,UAAS,EACTC,WAAU,EACVC,OAAM,EACNC,MAAO,EAAC,EACRC,UAAS,EACTC,OAAM,EACNC,UAAUC,aAAY,EACtBC,OAAOC,UAAS,EAChB,GAAGC,WACW;IACd,MAAM,CAACF,OAAOF,SAAS,GAAGpB,kBAAkB;QAC1CU;QACAU,UAAUC;QACVC,OAAOC;IACT;IACA,MAAME,sBAAsB5B,MAAM6B;IAClC,MAAMC,aAAa1B,aAAae;IAChC,MAAM,EAAEY,OAAQ,OAAM,EAAE,GAAG7B;IAE3B,iBAAiB;IACjBF,MAAMgC,UAAU;QACd,MAAMC,KAAKH,WAAWI;QAEtB,IAAIpB,QAAQmB,IAAIE,cAAc;YAC5BF,GAAGlB,MAAMqB,SAAS;YAClBH,GAAGlB,MAAMqB,SAAS,CAAC,EAAEH,GAAGI,aAAa,EAAE,CAAC;YAExC,IAAIJ,GAAGI,iBAAiBT,oBAAoBM,WAAWlB,UAAU;gBAC/DA,SAASiB;gBACTL,oBAAoBM,UAAUD,GAAGI;YACnC;QACF;IACF,GAAG;QAACvB;QAAMW;QAAOM;QAAOD;QAAYd;KAAS;IAE7C,qBACE,oBAACV;QACCW,WAAWhB,WACTO,MAAM,CAAC,WAAW,EAClBuB,UAAU1B,SAASiC,WAAW7B,eAAe,CAACsB,MAAM,EACpDd;QAEFF,OAAOA;QACPG,YAAYA;QACZqB,UAAUZ,UAAUY;QACpBjB,QAAQA;qBAER,oBAACf;QACE,GAAGoB,SAAS;QACba,WAAU;QACVC,WAAW;QACX1B,OAAO;YAAEM;QAAU;QACnBD,MAAMA;QACNH,WAAWT,MAAM,CAAC,eAAe;QACjCiB,OAAOA;QACPF,UAAUA;QACVL,YAAYY;;AAIpB,EAAE"}

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

@@ -11,14 +11,10 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  font-family: inherit;
-  font-weight: var(--vkui--font_text--font_weight--regular);
-  font-size: var(--vkui--font_text--font_size--regular);
-  line-height: var(--vkui--font_text--line_height--regular);
   color: var(--vkui--color_text_primary);
   padding: 12px;
   max-height: 204px;
-  border: none;
+  border: 0;
   z-index: var(--vkui_internal--z_index_form_field_element);
   position: relative;
   background: transparent;
@@ -29,16 +25,12 @@
 }
 
 .Textarea--sizeY-compact .Textarea__el {
-  font-size: var(--vkui--font_text--font_size--compact);
-  line-height: var(--vkui--font_text--line_height--compact);
   max-height: 196px;
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .Textarea--sizeY-none .Textarea__el {
-    padding-top: 7px;
-    padding-bottom: 7px;
-    font-size: 15px;
+    max-height: 196px;
   }
 }
 

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type PlacementWithAuto } from '../../lib/floating';
 import { HasRootRef } from '../../types';
+import { type PopperArrowProps } from '../PopperArrow/PopperArrow';
 export interface TooltipProps {
     /**
      * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает
@@ -46,6 +47,24 @@ export interface TooltipProps {
      * Отображать ли стрелку, указывающую на якорный элемент
      */
     arrow?: boolean;
+    /**
+     * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.
+     */
+    arrowPadding?: number;
+    /**
+     * Пользовательская SVG иконка.
+     *
+     * Требования:
+     *
+     * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).
+     * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,
+     *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.
+     *    (см. https://github.com/VKCOM/VKUI/pull/4496).
+     * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.
+     * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`.
+     * 5. Если стрелка наезжает на якорный элемент, то увеличьте значение параметра `offsetY`.
+     */
+    ArrowIcon?: PopperArrowProps['Icon'];
     /**
      * Сдвиг стрелочки относительно центра дочернего элемента.
      */
@@ -70,4 +89,4 @@ export interface TooltipProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export declare const Tooltip: ({ children, isShown: isShownProp, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, appearance, arrow, placement: placementProp, text, header, className, ...restProps }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, isShown: isShownProp, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, appearance, arrow, arrowPadding, ArrowIcon, placement: placementProp, text, header, className, ...restProps }: TooltipProps) => React.JSX.Element;

package/dist/cssm/components/Tooltip/Tooltip.js

@@ -7,6 +7,7 @@ import { useDOM } from '../../lib/dom';
 import { arrowMiddleware, autoPlacementMiddleware, autoUpdateFloatingElement, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, flipMiddleware, getAutoPlacementAlign, offsetMiddleware, shiftMiddleware, useFloating } from '../../lib/floating';
 import { warnOnce } from '../../lib/warnOnce';
 import { useNavTransition } from '../NavTransitionContext/NavTransitionContext';
+import { DefaultIcon } from '../PopperArrow/DefaultIcon';
 import { PopperArrow } from '../PopperArrow/PopperArrow';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { tooltipContainerAttr } from './TooltipContainer';
@@ -42,8 +43,8 @@ function isVerticalPlacement(placement) {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
- */ export const Tooltip = ({ children , isShown: isShownProp = true , offsetX =0 , offsetY =15 , alignX , alignY , onClose , cornerOffset =0 , cornerAbsoluteOffset , appearance ='accent' , arrow =true , placement: placementProp , text , header , className , ...restProps })=>{
-    const arrowRef = React.useRef(null);
+ */ export const Tooltip = ({ children , isShown: isShownProp = true , offsetX =0 , offsetY =15 , alignX , alignY , onClose , cornerOffset =0 , cornerAbsoluteOffset , appearance ='accent' , arrow =true , arrowPadding =14 , ArrowIcon =DefaultIcon , placement: placementProp , text , header , className , ...restProps })=>{
+    const [arrowRef, setArrowRef] = React.useState(null);
     const [target, setTarget] = React.useState(null);
     /* eslint-disable no-restricted-properties */ const tooltipContainer = React.useMemo(()=>target?.closest(`[${tooltipContainerAttr}]`), [
         target
@@ -88,7 +89,7 @@ function isVerticalPlacement(placement) {
         if (arrow) {
             middlewares.push(arrowMiddleware({
                 element: arrowRef,
-                padding: 14
+                padding: arrowPadding
             }));
             middlewares.push({
                 name: 'arrowOffset',
@@ -116,6 +117,8 @@ function isVerticalPlacement(placement) {
         return middlewares;
     }, [
         arrow,
+        arrowRef,
+        arrowPadding,
         cornerAbsoluteOffset,
         cornerOffset,
         offsetX,
@@ -149,7 +152,8 @@ function isVerticalPlacement(placement) {
         coords: arrowCoords,
         placement: resolvedPlacement,
         arrowClassName: styles['Tooltip__arrow'],
-        getRootRef: arrowRef
+        getRootRef: setArrowRef,
+        Icon: ArrowIcon
     }), /*#__PURE__*/ React.createElement("div", {
         className: styles['Tooltip__content']
     }, header && /*#__PURE__*/ React.createElement(Subhead, {

package/dist/cssm/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 { PopperArrow } 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  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  placement: placementProp,\n  text,\n  header,\n  className,\n  ...restProps\n}: TooltipProps) => {\n  const arrowRef = React.useRef<HTMLDivElement>(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: 14,\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  }, [arrow, cornerAbsoluteOffset, cornerOffset, offsetX, offsetY, placement, isNotAutoPlacement]);\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={arrowRef}\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":["React","ReactDOM","classNames","hasReactNode","useExternRef","useGlobalEventListener","useDOM","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","useFloating","warnOnce","useNavTransition","PopperArrow","Subhead","tooltipContainerAttr","styles","isDOMTypeElement","element","isValidElement","type","warn","stylesAppearance","accent","white","black","inversion","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","isShown","isShownProp","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","appearance","arrow","placementProp","text","header","className","restProps","arrowRef","useRef","target","setTarget","useState","tooltipContainer","useMemo","closest","entering","isNotAutoPlacement","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","floatingPositionStrategy","style","position","Error","memoizedMiddlewares","middlewares","crossAxis","mainAxis","push","alignment","padding","name","fn","middlewareData","Promise","resolve","undefined","y","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","strategy","middleware","whileElementsMounted","document","capture","passive","childRef","ref","props","getRootRef","patchedRef","setReference","child","cloneElement","Fragment","createPortal","div","setFloating","coords","arrowClassName","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":["React","ReactDOM","classNames","hasReactNode","useExternRef","useGlobalEventListener","useDOM","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","useFloating","warnOnce","useNavTransition","DefaultIcon","PopperArrow","Subhead","tooltipContainerAttr","styles","isDOMTypeElement","element","isValidElement","type","warn","stylesAppearance","accent","white","black","inversion","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","isShown","isShownProp","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","appearance","arrow","arrowPadding","ArrowIcon","placementProp","text","header","className","restProps","arrowRef","setArrowRef","useState","target","setTarget","tooltipContainer","useMemo","closest","entering","isNotAutoPlacement","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","floatingPositionStrategy","style","position","Error","memoizedMiddlewares","middlewares","crossAxis","mainAxis","push","alignment","padding","name","fn","middlewareData","Promise","resolve","undefined","y","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","strategy","middleware","whileElementsMounted","document","capture","passive","childRef","ref","props","getRootRef","patchedRef","setReference","child","cloneElement","Fragment","createPortal","div","setFloating","coords","arrowClassName","Icon","weight"],"mappings":"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"}

package/dist/cssm/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":["React","tooltipContainerAttr","TooltipContainer","forwardRef","fixed","props","ref","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,MAAMC,uBAAuB,yBAAyB;AAC7D,OAAO,MAAMC,iCAAmBF,MAAMG,UAAU,CAG9C,SAASD,iBAAiB,EAAEE,OAAQ,KAAK,CAAA,EAAE,GAAGC,OAAO,EAAEC,GAAG,EAAE;IAC3DD,KAAa,CAACJ,qBAAqB,GAAGG,QAAQ,UAAU,MAAM;IAC/D,qBAAO,oBAACG;QAAK,GAAGF,KAAK;QAAEC,KAAKA;;AAC9B,GAAG"}
+{"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":["React","tooltipContainerAttr","TooltipContainer","forwardRef","fixed","props","ref","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,MAAMC,uBAAuB,yBAAyB;AAC7D,OAAO,MAAMC,iCAAmBF,MAAMG,WAGpC,SAASD,iBAAiB,EAAEE,OAAQ,MAAK,EAAE,GAAGC,OAAO,EAAEC,GAAG;IACzDD,KAAa,CAACJ,qBAAqB,GAAGG,QAAQ,UAAU;IACzD,qBAAO,oBAACG;QAAK,GAAGF,KAAK;QAAEC,KAAKA;;AAC9B,GAAG"}

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

@@ -48,5 +48,5 @@ export type DragHandler = (e: React.DragEvent<HTMLElement>) => void;
 /**
  * @see https://vkcom.github.io/VKUI/#/Touch
  */
-export declare const Touch: ({ onStart, onStartX, onStartY, onMove: _onMove, onMoveX, onMoveY, onLeave, onEnter, onEnd: _onEnd, onEndX, onEndY, onClickCapture, usePointerHover, slideThreshold, useCapture, Component, getRootRef, noSlideClick, stopPropagation, ...restProps }: TouchProps) => JSX.Element;
+export declare const Touch: ({ onStart, onStartX, onStartY, onMove: _onMove, onMoveX, onMoveY, onLeave, onEnter, onEnd: _onEnd, onEndX, onEndY, onClickCapture, usePointerHover, slideThreshold, useCapture, Component, getRootRef, noSlideClick, stopPropagation, ...restProps }: TouchProps) => React.JSX.Element;
 export {};

package/dist/cssm/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":["React","useEventListener","useExternRef","useDOM","coordX","coordY","getSupportedEvents","touchEnabled","useIsomorphicLayoutEffect","Touch","onStart","onStartX","onStartY","onMove","_onMove","onMoveX","onMoveY","onLeave","onEnter","onEnd","_onEnd","onEndX","onEndY","onClickCapture","usePointerHover","slideThreshold","useCapture","Component","getRootRef","noSlideClick","stopPropagation","restProps","document","events","useMemo","didSlide","useRef","gesture","handle","e","handlers","forEach","cb","duration","Date","now","current","startT","getTime","originalEvent","enterHandler","leaveHandler","startHandler","initGesture","subscribe","target","capture","passive","containerRef","el","add","isPressed","isX","isY","startX","startY","shiftX","shiftY","shiftXAbs","Math","abs","shiftYAbs","touches","length","willBeX","willBeY","willBeSlidedX","willBeSlidedY","Object","assign","isSlideX","isSlideY","isSlide","isTouchEnabled","Boolean","unsubscribe","listenerParams","listeners","l","remove","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":["React","useEventListener","useExternRef","useDOM","coordX","coordY","getSupportedEvents","touchEnabled","useIsomorphicLayoutEffect","Touch","onStart","onStartX","onStartY","onMove","_onMove","onMoveX","onMoveY","onLeave","onEnter","onEnd","_onEnd","onEndX","onEndY","onClickCapture","usePointerHover","slideThreshold","useCapture","Component","getRootRef","noSlideClick","stopPropagation","restProps","document","events","useMemo","didSlide","useRef","gesture","handle","e","handlers","forEach","cb","duration","Date","now","current","startT","getTime","originalEvent","enterHandler","leaveHandler","startHandler","initGesture","subscribe","target","capture","passive","containerRef","el","add","isPressed","isX","isY","startX","startY","shiftX","shiftY","shiftXAbs","Math","abs","shiftYAbs","touches","length","willBeX","willBeY","willBeSlidedX","willBeSlidedY","Object","assign","isSlideX","isSlideY","isSlide","isTouchEnabled","Boolean","unsubscribe","listenerParams","listeners","l","remove","onDragStart","tagName","preventDefault","postGestureClick","ref"],"mappings":"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"}

package/dist/cssm/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":["React","TouchRootContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B;;;CAGC,GACD,MAAMC,mBAA2CD,MAAME,aAAa,CAAU,KAAK;AAEnF,oDAAoD;AACpD,eAAeD,iBAAiB"}
+{"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":["React","TouchRootContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B;;;CAGC,GACD,MAAMC,mBAA2CD,MAAME,cAAuB;AAE9E,oDAAoD;AACpD,eAAeD,iBAAiB"}

package/dist/cssm/components/Typography/Caption/Caption.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { HasCaps, TypographyProps } from '../Typography';
 export interface CaptionProps extends TypographyProps, HasCaps {
     level?: '1' | '2' | '3';
@@ -6,4 +6,4 @@ export interface CaptionProps extends TypographyProps, HasCaps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Caption
  */
-export declare const Caption: ({ className, level, caps, Component, normalize, ...restProps }: CaptionProps) => JSX.Element;
+export declare const Caption: ({ className, level, caps, Component, normalize, ...restProps }: CaptionProps) => React.JSX.Element;

package/dist/cssm/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":["React","classNames","Typography","styles","Caption","className","level","caps","Component","normalize","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAAkBC,UAAU,QAAyB,gBAAgB;AACrE,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,UAAS,EACTC,OAAQ,IAAG,EACXC,KAAI,EACJC,WAAY,OAAM,EAClBC,WAAY,IAAI,CAAA,EAChB,GAAGC,WACU,GAAK;IAClB,qBACE,oBAACR;QACCM,WAAWA;QACXC,WAAWA;QACXJ,WAAWJ,WACTI,WACAE,QAAQJ,MAAM,CAAC,gBAAgB,EAC/B;YACE,KAAKA,MAAM,CAAC,mBAAmB;YAC/B,KAAKA,MAAM,CAAC,mBAAmB;YAC/B,KAAKA,MAAM,CAAC,mBAAmB;QACjC,CAAC,CAACG,MAAM;QAET,GAAGI,SAAS;;AAGnB,EAAE"}
+{"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":["React","classNames","Typography","styles","Caption","className","level","caps","Component","normalize","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAAkBC,UAAU,QAAyB,gBAAgB;AACrE,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,UAAS,EACTC,OAAQ,IAAG,EACXC,KAAI,EACJC,WAAY,OAAM,EAClBC,WAAY,KAAI,EAChB,GAAGC,WACU;IACb,qBACE,oBAACR;QACCM,WAAWA;QACXC,WAAWA;QACXJ,WAAWJ,WACTI,WACAE,QAAQJ,MAAM,CAAC,gBAAgB,EAC/B;YACE,KAAKA,MAAM,CAAC,mBAAmB;YAC/B,KAAKA,MAAM,CAAC,mBAAmB;YAC/B,KAAKA,MAAM,CAAC,mBAAmB;QACjC,CAAC,CAACG,MAAM;QAET,GAAGI,SAAS;;AAGnB,EAAE"}

package/dist/cssm/components/Typography/Footnote/Footnote.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { HasCaps, TypographyProps } from '../Typography';
 export interface FootnoteProps extends TypographyProps, HasCaps {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Footnote
  */
-export declare const Footnote: ({ className, caps, Component, normalize, ...restProps }: FootnoteProps) => JSX.Element;
+export declare const Footnote: ({ className, caps, Component, normalize, ...restProps }: FootnoteProps) => React.JSX.Element;

package/dist/cssm/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":["React","classNames","Typography","styles","Footnote","className","caps","Component","normalize","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAAkBC,UAAU,QAAyB,gBAAgB;AACrE,OAAOC,YAAY,wBAAwB;AAI3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,UAAS,EACTC,KAAI,EACJC,WAAY,OAAM,EAClBC,WAAY,IAAI,CAAA,EAChB,GAAGC,WACW,iBACd,oBAACP;QACCK,WAAWA;QACXC,WAAWA;QACXH,WAAWJ,WAAWI,WAAWF,MAAM,CAAC,WAAW,EAAEG,QAAQH,MAAM,CAAC,iBAAiB;QACpF,GAAGM,SAAS;OAEf"}
+{"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":["React","classNames","Typography","styles","Footnote","className","caps","Component","normalize","restProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAAkBC,UAAU,QAAyB,gBAAgB;AACrE,OAAOC,YAAY,wBAAwB;AAI3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,UAAS,EACTC,KAAI,EACJC,WAAY,OAAM,EAClBC,WAAY,KAAI,EAChB,GAAGC,WACW,iBACd,oBAACP;QACCK,WAAWA;QACXC,WAAWA;QACXH,WAAWJ,WAAWI,WAAWF,MAAM,CAAC,WAAW,EAAEG,QAAQH,MAAM,CAAC,iBAAiB;QACpF,GAAGM,SAAS;OAEf"}