@vkontakte/vkui 5.3.2 → 5.4.1

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

@@ -1 +1,229 @@
-.vkuiTabsItem{align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;display:flex;justify-content:center;max-width:100%;min-height:32px;min-width:0;padding:4px 8px;transition:background-color .15s ease-out}.vkuiTabsItem--withGaps{margin-bottom:8px;margin-top:8px}.vkuiTabsItem--withGaps:not(:first-of-type){margin-left:6px}.vkuiTabsItem--sizeY-compact{min-height:28px;padding-bottom:2px;padding-top:2px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiTabsItem--sizeY-none{min-height:28px;padding-bottom:2px;padding-top:2px}}.vkuiTabsItem[disabled]{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiTabsItem--mode-default{flex-basis:0;flex-grow:1;flex-shrink:0;min-height:48px;padding:12px 16px;position:relative}.vkuiTabsItem--sizeY-compact.vkuiTabsItem--mode-default{min-height:44px;padding-bottom:10px;padding-top:10px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiTabsItem--sizeY-none.vkuiTabsItem--mode-default{min-height:44px;padding-bottom:10px;padding-top:10px}}.vkuiTabsItem--hover.vkuiTabsItem--mode-default{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover)}.vkuiTabsItem--mode-accent{transition:background-color .15s ease-out,box-shadow .15s ease-out}.vkuiTabsItem--selected.vkuiTabsItem--mode-accent{background-color:#fff;background-color:var(--vkui--color_background_modal);box-shadow:0 4px 8px rgba(0,0,0,.04),0 0 4px rgba(0,0,0,.06);box-shadow:var(--vkui--elevation2)}.vkuiTabsItem--hover.vkuiTabsItem--mode-accent{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary)}.vkuiTabsItem--mode-accent:before{border:1px solid transparent;border:var(--vkui_internal--thin_border) solid transparent;border-radius:inherit;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.vkuiTabsItem--selected.vkuiTabsItem--mode-accent:before{border-color:#d7d8d9;border-color:var(--vkui--color_separator_primary)}.vkuiTabsItem--selected.vkuiTabsItem--mode-secondary{background-color:rgba(0,0,0,.04);background-color:var(--vkui--color_background_secondary_alpha)}.vkuiTabsItem--hover.vkuiTabsItem--mode-secondary{background-color:rgba(0,0,0,.08);background-color:var(--vkui--color_background_secondary_alpha--hover)}.vkuiTabsItem__before{color:#818c99;color:var(--vkui--color_icon_medium);margin-right:6px;transition:color .15s ease-out}.vkuiTabsItem--selected .vkuiTabsItem__before{color:#2c2d2e;color:var(--vkui--color_icon_primary)}.vkuiTabsItem--selected.vkuiTabsItem--mode-accent .vkuiTabsItem__before{color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiTabsItem--selected.vkuiTabsItem--mode-secondary .vkuiTabsItem__before{opacity:.72}.vkuiTabsItem__label{color:#818c99;color:var(--vkui--color_text_secondary);max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease-out;white-space:nowrap}.vkuiTabsItem--selected .vkuiTabsItem__label{color:#000;color:var(--vkui--color_text_primary)}.vkuiTabsItem--selected.vkuiTabsItem--mode-accent .vkuiTabsItem__label{color:#2688eb;color:var(--vkui--color_text_accent_themed)}.vkuiTabsItem--selected.vkuiTabsItem--mode-secondary .vkuiTabsItem__label{opacity:.72}.vkuiTabsItem__status{margin-left:6px}.vkuiTabsItem__status--count{color:#99a2ad;color:var(--vkui--color_text_tertiary)}.vkuiTabsItem__after{color:#2688eb;color:var(--vkui--color_icon_accent_themed);margin-left:6px}.vkuiTabsItem__underline{background-color:#2688eb;background-color:var(--vkui--color_background_accent);border-radius:2px;bottom:5px;height:2px;left:16px;opacity:0;pointer-events:none;position:absolute;right:16px;transition:opacity .15s ease-out}.vkuiTabsItem--sizeY-compact .vkuiTabsItem__underline{bottom:3px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiTabsItem--sizeY-none .vkuiTabsItem__underline{bottom:3px}}.vkuiTabsItem__underline[data-selected=true]{opacity:1}.vkuiInternalTabs--vkcom .vkuiTabsItem{flex-grow:0;min-width:auto;padding-left:10px;padding-right:10px}.vkuiInternalTabs--vkcom .vkuiTabsItem__underline{bottom:0;left:2px;right:2px}.vkuiInternalHorizontalScroll .vkuiTabsItem{flex-basis:auto;flex-grow:1;flex-shrink:0;min-width:64px}
+.TabsItem {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 8px;
+  min-width: 0;
+  max-width: 100%;
+  min-height: 32px;
+  border-radius: var(--vkui--size_border_radius--regular);
+  transition: background-color 150ms ease-out;
+}
+
+.TabsItem--withGaps {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.TabsItem--withGaps:not(:first-of-type) {
+  margin-left: 6px;
+}
+
+.TabsItem--sizeY-compact {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  min-height: 28px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .TabsItem--sizeY-none {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    min-height: 28px;
+  }
+}
+
+.TabsItem[disabled] {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+/* mode="default" */
+
+.TabsItem--mode-default {
+  position: relative;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
+  padding: 12px 16px;
+  min-height: 48px;
+}
+
+.TabsItem--sizeY-compact.TabsItem--mode-default {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  min-height: 44px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .TabsItem--sizeY-none.TabsItem--mode-default {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    min-height: 44px;
+  }
+}
+
+.TabsItem--hover.TabsItem--mode-default {
+  background-color: var(--vkui--color_transparent--hover);
+}
+
+/* mode="accent" */
+
+.TabsItem--mode-accent {
+  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
+}
+
+.TabsItem--selected.TabsItem--mode-accent {
+  background-color: var(--vkui--color_background_modal);
+  box-shadow: var(--vkui--elevation2);
+}
+
+.TabsItem--hover.TabsItem--mode-accent {
+  background-color: var(--vkui--color_background_secondary);
+}
+
+.TabsItem--mode-accent::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border: var(--vkui_internal--thin_border) solid transparent;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.TabsItem--selected.TabsItem--mode-accent::before {
+  border-color: var(--vkui--color_separator_primary);
+}
+
+/* mode="secondary" */
+
+.TabsItem--selected.TabsItem--mode-secondary {
+  background-color: var(--vkui--color_background_secondary_alpha);
+}
+
+.TabsItem--hover.TabsItem--mode-secondary {
+  background-color: var(--vkui--color_background_secondary_alpha--hover);
+}
+
+/* Элемент */
+
+.TabsItem__before {
+  margin-right: 6px;
+  color: var(--vkui--color_icon_medium);
+  transition: color 150ms ease-out;
+}
+
+.TabsItem--selected .TabsItem__before {
+  color: var(--vkui--color_icon_primary);
+}
+
+.TabsItem--selected.TabsItem--mode-accent .TabsItem__before {
+  color: var(--vkui--color_icon_accent_themed);
+}
+
+.TabsItem--selected.TabsItem--mode-secondary .TabsItem__before {
+  opacity: 0.72;
+}
+
+/* Элемент */
+
+.TabsItem__label {
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--vkui--color_text_secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 150ms ease-out;
+  min-width: 0;
+}
+
+.TabsItem--selected .TabsItem__label {
+  color: var(--vkui--color_text_primary);
+}
+
+.TabsItem--selected.TabsItem--mode-accent .TabsItem__label {
+  color: var(--vkui--color_text_accent_themed);
+}
+
+.TabsItem--selected.TabsItem--mode-secondary .TabsItem__label {
+  opacity: 0.72;
+}
+
+/* Элемент */
+
+.TabsItem__status {
+  margin-left: 6px;
+}
+
+.TabsItem__status--count {
+  color: var(--vkui--color_text_tertiary);
+}
+
+/* Элемент */
+
+.TabsItem__after {
+  margin-left: 6px;
+  color: var(--vkui--color_icon_accent_themed);
+}
+
+/* Элемент */
+
+.TabsItem__underline {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  bottom: 5px;
+  height: 2px;
+  border-radius: 2px;
+  background-color: var(--vkui--color_background_accent);
+  opacity: 0;
+  transition: opacity 150ms ease-out;
+  pointer-events: none;
+}
+
+.TabsItem--sizeY-compact .TabsItem__underline {
+  bottom: 3px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .TabsItem--sizeY-none .TabsItem__underline {
+    bottom: 3px;
+  }
+}
+
+.TabsItem__underline[data-selected='true'] {
+  opacity: 1;
+}
+
+/**
+ * CMP:
+ * Tabs
+ */
+
+:global(.vkuiInternalTabs--vkcom) .TabsItem {
+  flex-grow: 0;
+  min-width: auto;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+:global(.vkuiInternalTabs--vkcom) .TabsItem__underline {
+  right: 2px;
+  bottom: 0;
+  left: 2px;
+}
+
+/**
+ * CMP:
+ * HorizontalScroll
+ */
+
+:global(.vkuiInternalHorizontalScroll) .TabsItem {
+  min-width: 64px;
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 0;
+}

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';
+import { AnchorHTMLAttributesOnly, HasChildren, HasComponent, HasRootRef } from '../../types';
 import { FocusVisibleMode } from '../FocusVisible/FocusVisible';
 import { TouchProps } from '../Touch/Touch';
 type StateMode = 'opacity' | 'background';
 export type TappableElementProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'onTouchCancel' | 'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave'> & AnchorHTMLAttributesOnly;
-export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElement>, HasComponent, Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {
+export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElement>, HasComponent, HasChildren, Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {
     /**
      * Длительность показа active-состояния
      */
@@ -30,7 +30,6 @@ export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElem
      * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
      */
     focusVisibleMode?: FocusVisibleMode | string;
-    children?: React.ReactNode;
     onEnter?(outputEvent: MouseEvent): void;
     onLeave?(outputEvent: MouseEvent): void;
 }

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

@@ -251,6 +251,7 @@ function useActivity(hasActive, stopDelay) {
         "aria-hidden": true,
         className: styles.Tappable__stateLayer
     }), !props.disabled && isPresetFocusVisibleMode && /*#__PURE__*/ React.createElement(FocusVisible, {
+        visible: focusVisible,
         mode: focusVisibleMode
     }));
 };

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, 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    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  children?: React.ReactNode;\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 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","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   * Указывает, должен ли компонент реагировать на 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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"}

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

@@ -1 +1,142 @@
-.vkuiTappable{-webkit-tap-highlight-color:transparent;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);cursor:default;isolation:isolate;position:relative;transition:background-color .15s ease-out,opacity .15s ease-out}.vkuiTappable>*{position:relative;z-index:1;z-index:var(--vkui_internal--z_index_tappable_element)}.vkuiTappable--hasActive,.vkuiTappable--hasHover{cursor:pointer}.vkuiTappable[aria-disabled=true],.vkuiTappable[disabled]{cursor:default}.vkuiTappable--focus-visible{outline:none}.vkuiTappable__stateLayer{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;transition:background-color .15s ease-out;z-index:0;z-index:var(--vkui_internal--z_index_tappable_state)}.vkuiTappable--hover-background>.vkuiTappable__stateLayer{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover)}.vkuiTappable--hover-opacity{opacity:.8}.vkuiTappable--active-background>.vkuiTappable__stateLayer{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active)}.vkuiTappable--active-opacity{opacity:.7}.vkuiTappable--ios.vkuiTappable--active-background{transition:none}.vkuiTappable .vkuiTappable__waves{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;will-change:transform;z-index:0;z-index:var(--vkui_internal--z_index_tappable_state)}.vkuiTappable .vkuiTappable__wave{animation:vkui-animation-wave .3s cubic-bezier(.4,0,.2,1);animation:vkui-animation-wave .3s var(--vkui--animation_easing_platform);background:rgba(0,16,61,.08);background:var(--vkui--color_transparent--active);border-radius:50%;content:"";height:24px;left:0;margin:-12px 0 0 -12px;opacity:0;position:absolute;top:0;width:24px}.vkuiTappable--sizeX-compact{border-radius:0}@media (max-width:767.9px){.vkuiTappable--sizeX-none{border-radius:0}}@keyframes vkui-animation-wave{0%{opacity:1;transform:scale(1)}30%{opacity:1}to{opacity:0;transform:scale(8)}}
+.Tappable {
+  isolation: isolate;
+  position: relative;
+  cursor: default;
+  border-radius: var(--vkui--size_border_radius--regular);
+  transition: background-color 0.15s ease-out, opacity 0.15s ease-out;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/*
+Просто поменять местами элементы внутри Tappable нельзя:
+
+- некоторые элементы завязаны на :last-child и :first-child
+- необходимо чтобы все элементы были позиционированные
+
+https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+https://github.com/VKCOM/VKUI/pull/3641
+*/
+
+/* stylelint-disable-next-line vkui/atomic */
+
+.Tappable > * {
+  position: relative;
+  z-index: var(--vkui_internal--z_index_tappable_element);
+}
+
+.Tappable--hasHover,
+.Tappable--hasActive {
+  cursor: pointer;
+}
+
+.Tappable[disabled],
+.Tappable[aria-disabled='true'] {
+  cursor: default;
+}
+
+.Tappable--focus-visible {
+  outline: none;
+}
+
+/**
+ * hover & active state
+ */
+
+.Tappable__stateLayer {
+  z-index: var(--vkui_internal--z_index_tappable_state);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  overflow: hidden;
+  border-radius: inherit;
+  transition: background-color 0.15s ease-out;
+}
+
+.Tappable--hover-background > .Tappable__stateLayer {
+  background-color: var(--vkui--color_transparent--hover);
+}
+
+.Tappable--hover-opacity {
+  opacity: 0.8;
+}
+
+.Tappable--active-background > .Tappable__stateLayer {
+  background-color: var(--vkui--color_transparent--active);
+}
+
+.Tappable--active-opacity {
+  opacity: 0.7;
+}
+
+/**
+ * iOS tappable
+ */
+
+.Tappable--ios.Tappable--active-background {
+  transition: none;
+}
+
+.Tappable .Tappable__waves {
+  z-index: var(--vkui_internal--z_index_tappable_state);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  overflow: hidden;
+  border-radius: inherit;
+  /* Fix for Safari: css animation + border-radius + overflow ignores parent border-radius */
+  will-change: transform;
+}
+
+.Tappable .Tappable__wave {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  margin: -12px 0 0 -12px;
+  opacity: 0;
+  content: '';
+  border-radius: 50%;
+  background: var(--vkui--color_transparent--active);
+  animation: vkui-animation-wave 0.3s var(--vkui--animation_easing_platform);
+}
+
+/**
+ * overrides
+ */
+
+.Tappable--sizeX-compact {
+  border-radius: 0;
+}
+
+@media (max-width: 767.9px) {
+  .Tappable--sizeX-none {
+    border-radius: 0;
+  }
+}
+
+/**
+ * Animations
+ */
+
+@keyframes vkui-animation-wave {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  30% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(8);
+    opacity: 0;
+  }
+}

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

@@ -1 +1,58 @@
-.vkuiTextTooltip{animation:vkui-popper-fadein .2s ease;background-color:#fff;background-color:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);color:#000;color:var(--vkui--color_text_primary);padding:8px 12px 9px}.vkuiTextTooltip__arrow{color:#fff;color:var(--vkui--color_background_modal)}.vkuiTextTooltip--appearance-accent{background-color:#5a9eff;background-color:var(--vkui--color_background_accent_tint);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiTextTooltip--appearance-accent .vkuiTextTooltip__arrow{color:#5a9eff;color:var(--vkui--color_background_accent_tint)}.vkuiTextTooltip--appearance-white{background-color:#fff;background-color:var(--vkui--color_background_contrast);color:#000;color:var(--vkui--color_text_primary_invariably)}.vkuiTextTooltip--appearance-white .vkuiTextTooltip__arrow{color:#fff;color:var(--vkui--color_background_contrast)}.vkuiTextTooltip--appearance-black{background-color:#2d2d2e;background-color:var(--vkui--color_background_contrast_inverse);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiTextTooltip--appearance-black .vkuiTextTooltip__arrow{color:#2d2d2e;color:var(--vkui--color_background_contrast_inverse)}.vkuiTextTooltip--appearance-inversion{background-color:#2d2d2e;background-color:var(--vkui--color_background_modal_inverse);color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiTextTooltip--appearance-inversion .vkuiTextTooltip__arrow{color:#2d2d2e;color:var(--vkui--color_background_modal_inverse)}
+.TextTooltip {
+  border-radius: var(--vkui--size_border_radius--regular);
+  background-color: var(--vkui--color_background_modal);
+  padding: 8px 12px 9px;
+  color: var(--vkui--color_text_primary);
+  box-shadow: var(--vkui--elevation3);
+  animation: vkui-texttooltip-fadein 0.2s ease;
+}
+
+.TextTooltip__arrow {
+  color: var(--vkui--color_background_modal);
+}
+
+.TextTooltip--appearance-accent {
+  background-color: var(--vkui--color_background_accent_tint);
+  color: var(--vkui--color_text_contrast);
+}
+
+.TextTooltip--appearance-accent .TextTooltip__arrow {
+  color: var(--vkui--color_background_accent_tint);
+}
+
+.TextTooltip--appearance-white {
+  background-color: var(--vkui--color_background_contrast);
+  color: var(--vkui--color_text_primary_invariably);
+}
+
+.TextTooltip--appearance-white .TextTooltip__arrow {
+  color: var(--vkui--color_background_contrast);
+}
+
+.TextTooltip--appearance-black {
+  background-color: var(--vkui--color_background_contrast_inverse);
+  color: var(--vkui--color_text_contrast);
+}
+
+.TextTooltip--appearance-black .TextTooltip__arrow {
+  color: var(--vkui--color_background_contrast_inverse);
+}
+
+.TextTooltip--appearance-inversion {
+  background-color: var(--vkui--color_background_modal_inverse);
+  color: var(--vkui--color_text_contrast_themed);
+}
+
+.TextTooltip--appearance-inversion .TextTooltip__arrow {
+  color: var(--vkui--color_background_modal_inverse);
+}
+
+@keyframes vkui-texttooltip-fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}