@vkontakte/vkui 5.2.3 → 5.3.0

package/dist/cjs/components/Tappable/Tappable.js

@@ -1,330 +1,318 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ACTIVE_DELAY: function() {
+        return ACTIVE_DELAY;
+    },
+    ACTIVE_EFFECT_DELAY: function() {
+        return ACTIVE_EFFECT_DELAY;
+    },
+    Tappable: function() {
+        return Tappable;
+    }
 });
-exports.Tappable = exports.ACTIVE_EFFECT_DELAY = exports.ACTIVE_DELAY = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
+var _toConsumableArray = require("@swc/helpers/lib/_to_consumable_array.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _mitt = _interopRequireDefault(require("mitt"));
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _mitt = /*#__PURE__*/ _interopRequireDefault(require("mitt"));
+var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useAdaptivityHasHover = require("../../hooks/useAdaptivityHasHover");
 var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
-var _useBooleanState2 = require("../../hooks/useBooleanState");
+var _useBooleanState = require("../../hooks/useBooleanState");
 var _useExternRef = require("../../hooks/useExternRef");
-var _useFocusVisible2 = require("../../hooks/useFocusVisible");
+var _useFocusVisible = require("../../hooks/useFocusVisible");
 var _usePlatform = require("../../hooks/usePlatform");
 var _useTimeout = require("../../hooks/useTimeout");
 var _accessibility = require("../../lib/accessibility");
+var _adaptivity = require("../../lib/adaptivity");
 var _callMultiple = require("../../lib/callMultiple");
 var _offset = require("../../lib/offset");
 var _platform = require("../../lib/platform");
 var _touch = require("../../lib/touch");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-var _FocusVisible = require("../FocusVisible/FocusVisible");
-var _Touch = require("../Touch/Touch");
-var _TouchContext = _interopRequireDefault(require("../Touch/TouchContext"));
-var _excluded = ["children", "Component", "onClick", "onKeyDown", "activeEffectDelay", "stopPropagation", "getRootRef", "hasHover", "hoverMode", "hasActive", "activeMode", "focusVisibleMode", "onEnter", "onLeave", "className"];
+var _focusVisible = require("../FocusVisible/FocusVisible");
+var _touch1 = require("../Touch/Touch");
+var _touchContext = /*#__PURE__*/ _interopRequireDefault(require("../Touch/TouchContext"));
 var sizeXClassNames = {
-  none: "vkuiTappable--sizeX-none",
-  compact: "vkuiTappable--sizeX-compact",
-  regular: "vkuiTappable--sizeX-regular"
+    none: "vkuiTappable--sizeX-none",
+    compact: "vkuiTappable--sizeX-compact"
 };
 var WAVE_LIVE = 225;
 var ACTIVE_DELAY = 70;
-exports.ACTIVE_DELAY = ACTIVE_DELAY;
 var ACTIVE_EFFECT_DELAY = 600;
-exports.ACTIVE_EFFECT_DELAY = ACTIVE_EFFECT_DELAY;
 var activeBus = (0, _mitt.default)();
 var TapState = {
-  none: 0,
-  pending: 1,
-  active: 2,
-  exiting: 3
+    none: 0,
+    pending: 1,
+    active: 2,
+    exiting: 3
 };
-var TappableContext = /*#__PURE__*/React.createContext({
-  onHoverChange: _vkjs.noop
+var TappableContext = /*#__PURE__*/ _react.createContext({
+    onHoverChange: _vkjs.noop
 });
 function isPresetStateMode(stateMode) {
-  switch (stateMode) {
-    case 'opacity':
-    case 'background':
-      return true;
-    default:
-      return false;
-  }
+    switch(stateMode){
+        case "opacity":
+        case "background":
+            return true;
+        default:
+            return false;
+    }
 }
 function useActivity(hasActive, stopDelay) {
-  var id = React.useMemo(function () {
-    return Math.round(Math.random() * 1e8).toString(16);
-  }, []);
-  var _React$useState = React.useState(TapState.none),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    activity = _React$useState2[0],
-    setActivity = _React$useState2[1];
-  var _stop = function _stop() {
-    return setActivity(TapState.none);
-  };
-  var start = function start() {
-    return hasActive && setActivity(TapState.active);
-  };
-  var delayStart = function delayStart() {
-    hasActive && setActivity(TapState.pending);
-  };
-  var activeTimeout = (0, _useTimeout.useTimeout)(start, ACTIVE_DELAY);
-  var stopTimeout = (0, _useTimeout.useTimeout)(_stop, stopDelay);
-  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (activity === TapState.pending) {
-      activeTimeout.set();
-      return activeTimeout.clear;
-    }
-    if (activity === TapState.exiting) {
-      return stopTimeout.clear;
-    }
-    if (activity === TapState.active) {
-      activeBus.emit('active', id);
-    }
-    return _vkjs.noop;
-  }, [activity]);
-  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (activity === TapState.none) {
-      return _vkjs.noop;
-    }
-    var onActiveChange = function onActiveChange(activeId) {
-      activeId !== id && _stop();
+    var id = _react.useMemo(function() {
+        return Math.round(Math.random() * 1e8).toString(16);
+    }, []);
+    var _React_useState = _slicedToArray(_react.useState(TapState.none), 2), activity = _React_useState[0], setActivity = _React_useState[1];
+    var _stop = function() {
+        return setActivity(TapState.none);
     };
-    activeBus.on('active', onActiveChange);
-    return function () {
-      return activeBus.off('active', onActiveChange);
+    var start = function() {
+        return hasActive && setActivity(TapState.active);
     };
-  }, [activity === TapState.none]);
-  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    !hasActive && _stop();
-  }, [hasActive]);
-  var stop = function stop(delay) {
-    if (delay) {
-      setActivity(TapState.exiting);
-      return stopTimeout.set(delay);
-    }
-    _stop();
-  };
-  return [activity, {
-    delayStart: delayStart,
-    start: start,
-    stop: stop
-  }];
-}
-
-/**
- * @see https://vkcom.github.io/VKUI/#/Tappable
- */
-var Tappable = function Tappable(_ref) {
-  var children = _ref.children,
-    Component = _ref.Component,
-    onClick = _ref.onClick,
-    _onKeyDown = _ref.onKeyDown,
-    _ref$activeEffectDela = _ref.activeEffectDelay,
-    activeEffectDelay = _ref$activeEffectDela === void 0 ? ACTIVE_EFFECT_DELAY : _ref$activeEffectDela,
-    _ref$stopPropagation = _ref.stopPropagation,
-    stopPropagation = _ref$stopPropagation === void 0 ? false : _ref$stopPropagation,
-    getRootRef = _ref.getRootRef,
-    _ref$hasHover = _ref.hasHover,
-    _hasHover = _ref$hasHover === void 0 ? true : _ref$hasHover,
-    _ref$hoverMode = _ref.hoverMode,
-    hoverMode = _ref$hoverMode === void 0 ? 'background' : _ref$hoverMode,
-    _ref$hasActive = _ref.hasActive,
-    _hasActive = _ref$hasActive === void 0 ? true : _ref$hasActive,
-    _ref$activeMode = _ref.activeMode,
-    activeMode = _ref$activeMode === void 0 ? 'background' : _ref$activeMode,
-    _ref$focusVisibleMode = _ref.focusVisibleMode,
-    focusVisibleMode = _ref$focusVisibleMode === void 0 ? 'inside' : _ref$focusVisibleMode,
-    onEnter = _ref.onEnter,
-    onLeave = _ref.onLeave,
-    className = _ref.className,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  Component = Component || (props.href ? 'a' : 'div');
-  var _React$useContext = React.useContext(TappableContext),
-    onHoverChange = _React$useContext.onHoverChange;
-  var insideTouchRoot = React.useContext(_TouchContext.default);
-  var platform = (0, _usePlatform.usePlatform)();
-  var _useFocusVisible = (0, _useFocusVisible2.useFocusVisible)(),
-    focusVisible = _useFocusVisible.focusVisible,
-    onBlur = _useFocusVisible.onBlur,
-    onFocus = _useFocusVisible.onFocus;
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
-    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
-  var hasPointerContext = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
-  var hasHoverContext = (0, _useAdaptivityHasHover.useAdaptivityHasHover)();
-  var _React$useState3 = React.useState([]),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    clicks = _React$useState4[0],
-    setClicks = _React$useState4[1];
-  var _React$useState5 = React.useState(false),
-    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-    childHover = _React$useState6[0],
-    setChildHover = _React$useState6[1];
-  var _useBooleanState = (0, _useBooleanState2.useBooleanState)(false),
-    _hovered = _useBooleanState.value,
-    setHoveredTrue = _useBooleanState.setTrue,
-    setHoveredFalse = _useBooleanState.setFalse;
-  var hovered = _hovered && !props.disabled;
-  var hasActive = _hasActive && !childHover && !props.disabled;
-  var hasHover = hasHoverContext && _hasHover && !childHover;
-  var isCustomElement = Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;
-  var isPresetHoverMode = isPresetStateMode(hoverMode);
-  var isPresetActiveMode = isPresetStateMode(activeMode);
-  var isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);
-  var _useActivity = useActivity(hasActive, activeEffectDelay),
-    _useActivity2 = (0, _slicedToArray2.default)(_useActivity, 2),
-    activity = _useActivity2[0],
-    _useActivity2$ = _useActivity2[1],
-    start = _useActivity2$.start,
-    stop = _useActivity2$.stop,
-    delayStart = _useActivity2$.delayStart;
-  var active = activity === TapState.active || activity === TapState.exiting;
-  var containerRef = (0, _useExternRef.useExternRef)(getRootRef);
-
-  // hover propagation
-  var childContext = React.useRef({
-    onHoverChange: setChildHover
-  }).current;
-  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (!hovered) {
-      return _vkjs.noop;
-    }
-    onHoverChange(true);
-    return function () {
-      return onHoverChange(false);
+    var delayStart = function() {
+        hasActive && setActivity(TapState.pending);
     };
-  }, [hovered]);
-
-  /*
+    var activeTimeout = (0, _useTimeout.useTimeout)(start, ACTIVE_DELAY);
+    var stopTimeout = (0, _useTimeout.useTimeout)(_stop, stopDelay);
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
+        if (activity === TapState.pending) {
+            activeTimeout.set();
+            return activeTimeout.clear;
+        }
+        if (activity === TapState.exiting) {
+            return stopTimeout.clear;
+        }
+        if (activity === TapState.active) {
+            activeBus.emit("active", id);
+        }
+        return _vkjs.noop;
+    }, [
+        activity
+    ]);
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
+        if (activity === TapState.none) {
+            return _vkjs.noop;
+        }
+        var onActiveChange = function(activeId) {
+            activeId !== id && _stop();
+        };
+        activeBus.on("active", onActiveChange);
+        return function() {
+            return activeBus.off("active", onActiveChange);
+        };
+    }, [
+        activity === TapState.none
+    ]);
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
+        !hasActive && _stop();
+    }, [
+        hasActive
+    ]);
+    var stop = function(delay) {
+        if (delay) {
+            setActivity(TapState.exiting);
+            return stopTimeout.set(delay);
+        }
+        _stop();
+    };
+    return [
+        activity,
+        {
+            delayStart: delayStart,
+            start: start,
+            stop: stop
+        }
+    ];
+}
+var Tappable = function(_param) {
+    var onKeyDown = /*
    * [a11y]
    * Обрабатывает событие onkeydown
    * для кастомных доступных элементов:
    * - role="link" (активация по Enter)
    * - role="button" (активация по Space и Enter)
-   */
-  function onKeyDown(e) {
-    if (isCustomElement && (0, _accessibility.shouldTriggerClickOnEnterOrSpace)(e)) {
-      var _containerRef$current;
-      e.preventDefault();
-      (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.click();
-    }
-  }
-  var needWaves = platform === _platform.Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';
-  var clearClicks = (0, _useTimeout.useTimeout)(function () {
-    return setClicks([]);
-  }, WAVE_LIVE);
-  function addClick(x, y) {
-    var dateNow = Date.now();
-    var filteredClicks = clicks.filter(function (click) {
-      return click.id + WAVE_LIVE > dateNow;
-    });
-    setClicks([].concat((0, _toConsumableArray2.default)(filteredClicks), [{
-      x: x,
-      y: y,
-      id: dateNow
-    }]));
-    clearClicks.set();
-  }
-  function onStart(_ref2) {
-    var originalEvent = _ref2.originalEvent;
-    if (hasActive) {
-      if (originalEvent.touches && originalEvent.touches.length > 1) {
-        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch
-        return stop();
-      }
-      if (needWaves) {
-        var _getOffsetRect = (0, _offset.getOffsetRect)(containerRef.current),
-          top = _getOffsetRect.top,
-          left = _getOffsetRect.left;
-        var x = (0, _touch.coordX)(originalEvent) - (left !== null && left !== void 0 ? left : 0);
-        var y = (0, _touch.coordY)(originalEvent) - (top !== null && top !== void 0 ? top : 0);
-        addClick(x, y);
-      }
-      delayStart();
-    }
-  }
-  function onMove(_ref3) {
-    var isSlide = _ref3.isSlide;
-    if (isSlide) {
-      stop();
-    }
-  }
-  function onEnd(_ref4) {
-    var duration = _ref4.duration;
-    if (activity === TapState.none) {
-      return;
-    }
-    if (activity === TapState.pending) {
-      // активировать при коротком тапе
-      start();
-    }
-
-    // отключить без задержки при длинном тапе
-    var activeDuration = duration - ACTIVE_DELAY;
-    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
-  }
-  var classes = (0, _vkjs.classNames)(className, "vkuiTappable", platform === _platform.Platform.IOS && "vkuiTappable--ios", sizeXClassNames[sizeX], hasHoverContext && "vkuiTappable--hover-has", hasActive && "vkuiTappable--hasActive", hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasActive && active && "vkuiTappable--active", hasHover && hovered && isPresetHoverMode && styles["Tappable--hover-".concat(hoverMode)], hasActive && active && isPresetActiveMode && styles["Tappable--active-".concat(activeMode)], focusVisible && "vkuiTappable--focus-visible");
-  var handlers = {
-    onStart: (0, _callMultiple.callMultiple)(onStart, props.onStart),
-    onMove: (0, _callMultiple.callMultiple)(onMove, props.onMove),
-    onEnd: (0, _callMultiple.callMultiple)(onEnd, props.onEnd),
-    onClick: onClick,
-    onKeyDown: (0, _callMultiple.callMultiple)(onKeyDown, _onKeyDown)
-  };
-  var role = props.href ? 'link' : 'button';
-  return /*#__PURE__*/React.createElement(_Touch.Touch, (0, _extends2.default)({
-    onEnter: (0, _callMultiple.callMultiple)(setHoveredTrue, onEnter),
-    onLeave: (0, _callMultiple.callMultiple)(setHoveredFalse, onLeave),
-    type: Component === 'button' ? 'button' : undefined,
-    tabIndex: isCustomElement && !props.disabled ? 0 : undefined,
-    role: isCustomElement ? role : undefined,
-    "aria-disabled": isCustomElement ? props.disabled : undefined,
-    stopPropagation: stopPropagation && !insideTouchRoot && !props.disabled
-  }, props, {
-    slideThreshold: 20,
-    usePointerHover: true,
-    className: classes,
-    Component: Component,
-    getRootRef: containerRef,
-    onBlur: (0, _callMultiple.callMultiple)(onBlur, props.onBlur),
-    onFocus: (0, _callMultiple.callMultiple)(onFocus, props.onFocus)
-  }, props.disabled ? {} : handlers), /*#__PURE__*/React.createElement(TappableContext.Provider, {
-    value: childContext
-  }, children), needWaves && /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": true,
-    className: "vkuiTappable__waves"
-  }, clicks.map(function (wave) {
-    return /*#__PURE__*/React.createElement("span", {
-      key: wave.id,
-      className: "vkuiTappable__wave",
-      style: {
-        top: wave.y,
-        left: wave.x
-      }
-    });
-  })), (hasHover && hoverMode === 'background' || hasActive && activeMode === 'background') && /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": true,
-    className: "vkuiTappable__stateLayer"
-  }), !props.disabled && isPresetFocusVisibleMode && /*#__PURE__*/React.createElement(_FocusVisible.FocusVisible, {
-    mode: focusVisibleMode
-  }));
-};
-exports.Tappable = Tappable;
-var styles = {
-  "Tappable--hover-has": "vkuiTappable--hover-has",
-  "Tappable--hover-background": "vkuiTappable--hover-background",
-  "Tappable--hover-opacity": "vkuiTappable--hover-opacity",
-  "Tappable--active-background": "vkuiTappable--active-background",
-  "Tappable--active-opacity": "vkuiTappable--active-opacity"
+   */ function onKeyDown(e) {
+        if (isCustomElement && (0, _accessibility.shouldTriggerClickOnEnterOrSpace)(e)) {
+            var _containerRef_current;
+            e.preventDefault();
+            (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.click();
+        }
+    };
+    var addClick = function addClick(x, y) {
+        var dateNow = Date.now();
+        var filteredClicks = clicks.filter(function(click) {
+            return click.id + WAVE_LIVE > dateNow;
+        });
+        setClicks(_toConsumableArray(filteredClicks).concat([
+            {
+                x: x,
+                y: y,
+                id: dateNow
+            }
+        ]));
+        clearClicks.set();
+    };
+    var onStart = function onStart(param) {
+        var originalEvent = param.originalEvent;
+        if (hasActive) {
+            if (originalEvent.touches && originalEvent.touches.length > 1) {
+                // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch
+                return stop();
+            }
+            if (needWaves) {
+                var _getOffsetRect = (0, _offset.getOffsetRect)(containerRef.current), top = _getOffsetRect.top, left = _getOffsetRect.left;
+                var x = (0, _touch.coordX)(originalEvent) - (left !== null && left !== void 0 ? left : 0);
+                var y = (0, _touch.coordY)(originalEvent) - (top !== null && top !== void 0 ? top : 0);
+                addClick(x, y);
+            }
+            delayStart();
+        }
+    };
+    var onMove = function onMove(param) {
+        var isSlide = param.isSlide;
+        if (isSlide) {
+            stop();
+        }
+    };
+    var onEnd = function onEnd(param) {
+        var duration = param.duration;
+        if (activity === TapState.none) {
+            return;
+        }
+        if (activity === TapState.pending) {
+            // активировать при коротком тапе
+            start();
+        }
+        // отключить без задержки при длинном тапе
+        var activeDuration = duration - ACTIVE_DELAY;
+        stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
+    };
+    var children = _param.children, Component = _param.Component, onClick = _param.onClick, _onKeyDown = _param.onKeyDown, _param_activeEffectDelay = _param.activeEffectDelay, activeEffectDelay = _param_activeEffectDelay === void 0 ? ACTIVE_EFFECT_DELAY : _param_activeEffectDelay, _param_stopPropagation = _param.stopPropagation, stopPropagation = _param_stopPropagation === void 0 ? false : _param_stopPropagation, getRootRef = _param.getRootRef, tmp = _param.hasHover, _hasHover = tmp === void 0 ? true : tmp, _param_hoverMode = _param.hoverMode, hoverMode = _param_hoverMode === void 0 ? "background" : _param_hoverMode, tmp1 = _param.hasActive, _hasActive = tmp1 === void 0 ? true : tmp1, _param_activeMode = _param.activeMode, activeMode = _param_activeMode === void 0 ? "background" : _param_activeMode, _param_focusVisibleMode = _param.focusVisibleMode, focusVisibleMode = _param_focusVisibleMode === void 0 ? "inside" : _param_focusVisibleMode, onEnter = _param.onEnter, onLeave = _param.onLeave, className = _param.className, props = _objectWithoutProperties(_param, [
+        "children",
+        "Component",
+        "onClick",
+        "onKeyDown",
+        "activeEffectDelay",
+        "stopPropagation",
+        "getRootRef",
+        "hasHover",
+        "hoverMode",
+        "hasActive",
+        "activeMode",
+        "focusVisibleMode",
+        "onEnter",
+        "onLeave",
+        "className"
+    ]);
+    Component = Component || (props.href ? "a" : "div");
+    var onHoverChange = _react.useContext(TappableContext).onHoverChange;
+    var insideTouchRoot = _react.useContext(_touchContext.default);
+    var platform = (0, _usePlatform.usePlatform)();
+    var _useFocusVisible1 = (0, _useFocusVisible.useFocusVisible)(), focusVisible = _useFocusVisible1.focusVisible, onBlur = _useFocusVisible1.onBlur, onFocus = _useFocusVisible1.onFocus;
+    var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeX = _useAdaptivity1.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? "none" : _useAdaptivity_sizeX;
+    var hasPointerContext = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
+    var hasHoverContext = (0, _useAdaptivityHasHover.useAdaptivityHasHover)();
+    var _React_useState = _slicedToArray(_react.useState([]), 2), clicks = _React_useState[0], setClicks = _React_useState[1];
+    var _React_useState1 = _slicedToArray(_react.useState(false), 2), childHover = _React_useState1[0], setChildHover = _React_useState1[1];
+    var _useBooleanState1 = (0, _useBooleanState.useBooleanState)(false), _hovered = _useBooleanState1.value, setHoveredTrue = _useBooleanState1.setTrue, setHoveredFalse = _useBooleanState1.setFalse;
+    var hovered = _hovered && !props.disabled;
+    var hasActive = _hasActive && !childHover && !props.disabled;
+    var hasHover = hasHoverContext && _hasHover && !childHover;
+    var isCustomElement = Component !== "a" && Component !== "button" && Component !== "label" && !props.contentEditable;
+    var isPresetHoverMode = isPresetStateMode(hoverMode);
+    var isPresetActiveMode = isPresetStateMode(activeMode);
+    var isPresetFocusVisibleMode = [
+        "inside",
+        "outside"
+    ].includes(focusVisibleMode);
+    var _useActivity = _slicedToArray(useActivity(hasActive, activeEffectDelay), 2), activity = _useActivity[0], _useActivity_ = _useActivity[1], start = _useActivity_.start, stop = _useActivity_.stop, delayStart = _useActivity_.delayStart;
+    var active = activity === TapState.active || activity === TapState.exiting;
+    var containerRef = (0, _useExternRef.useExternRef)(getRootRef);
+    // hover propagation
+    var childContext = _react.useRef({
+        onHoverChange: setChildHover
+    }).current;
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
+        if (!hovered) {
+            return _vkjs.noop;
+        }
+        onHoverChange(true);
+        return function() {
+            return onHoverChange(false);
+        };
+    }, [
+        hovered
+    ]);
+    var needWaves = platform === _platform.Platform.ANDROID && !hasPointerContext && hasActive && activeMode === "background";
+    var clearClicks = (0, _useTimeout.useTimeout)(function() {
+        return setClicks([]);
+    }, WAVE_LIVE);
+    var classes = (0, _vkjs.classNames)(className, "vkuiTappable", "vkuiInternalTappable", platform === _platform.Platform.IOS && "vkuiTappable--ios", sizeX !== _adaptivity.SizeType.REGULAR && sizeXClassNames[sizeX], hasHoverContext && "vkuiTappable--hover-has", hasActive && "vkuiTappable--hasActive", hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasHover && hovered && isPresetHoverMode && ({
+        background: "vkuiTappable--hover-background",
+        opacity: "vkuiTappable--hover-opacity"
+    })[hoverMode], hasActive && active && isPresetActiveMode && ({
+        background: "vkuiTappable--active-background",
+        opacity: "vkuiTappable--active-opacity"
+    })[activeMode], focusVisible && "vkuiTappable--focus-visible");
+    var handlers = {
+        onStart: (0, _callMultiple.callMultiple)(onStart, props.onStart),
+        onMove: (0, _callMultiple.callMultiple)(onMove, props.onMove),
+        onEnd: (0, _callMultiple.callMultiple)(onEnd, props.onEnd),
+        onClick: onClick,
+        onKeyDown: (0, _callMultiple.callMultiple)(onKeyDown, _onKeyDown)
+    };
+    var role = props.href ? "link" : "button";
+    return /*#__PURE__*/ _react.createElement(_touch1.Touch, _objectSpread(_objectSpreadProps(_objectSpread({
+        onEnter: (0, _callMultiple.callMultiple)(setHoveredTrue, onEnter),
+        onLeave: (0, _callMultiple.callMultiple)(setHoveredFalse, onLeave),
+        type: Component === "button" ? "button" : undefined,
+        tabIndex: isCustomElement && !props.disabled ? 0 : undefined,
+        role: isCustomElement ? role : undefined,
+        "aria-disabled": isCustomElement ? props.disabled : undefined,
+        stopPropagation: stopPropagation && !insideTouchRoot && !props.disabled
+    }, props), {
+        slideThreshold: 20,
+        usePointerHover: true,
+        className: classes,
+        Component: Component,
+        getRootRef: containerRef,
+        onBlur: (0, _callMultiple.callMultiple)(onBlur, props.onBlur),
+        onFocus: (0, _callMultiple.callMultiple)(onFocus, props.onFocus)
+    }), props.disabled ? {} : handlers), /*#__PURE__*/ _react.createElement(TappableContext.Provider, {
+        value: childContext
+    }, children), needWaves && /*#__PURE__*/ _react.createElement("span", {
+        "aria-hidden": true,
+        className: "vkuiTappable__waves"
+    }, clicks.map(function(wave) {
+        return /*#__PURE__*/ _react.createElement("span", {
+            key: wave.id,
+            className: "vkuiTappable__wave",
+            style: {
+                top: wave.y,
+                left: wave.x
+            }
+        });
+    })), (hasHover && hoverMode === "background" || hasActive && activeMode === "background") && /*#__PURE__*/ _react.createElement("span", {
+        "aria-hidden": true,
+        className: "vkuiTappable__stateLayer"
+    }), !props.disabled && isPresetFocusVisibleMode && /*#__PURE__*/ _react.createElement(_focusVisible.FocusVisible, {
+        mode: focusVisibleMode
+    }));
 };
+
 //# sourceMappingURL=Tappable.js.map