@vkontakte/vkui 5.0.0 → 5.0.2

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

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { TouchProps } from "../Touch/Touch";
+import { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from "../../types";
+import { FocusVisibleMode } from "../FocusVisible/FocusVisible";
+declare type StateMode = "opacity" | "background";
+export declare 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"> {
+    /**
+     * Длительность показа active-состояния
+     */
+    activeEffectDelay?: number;
+    stopPropagation?: boolean;
+    /**
+     * Указывает, должен ли компонент реагировать на hover-состояние
+     */
+    hasHover?: boolean;
+    /**
+     * Указывает, должен ли компонент реагировать на active-состояние
+     */
+    hasActive?: boolean;
+    /**
+     * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active
+     */
+    activeMode?: StateMode | string;
+    /**
+     * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover
+     */
+    hoverMode?: StateMode | string;
+    /**
+     * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
+     */
+    focusVisibleMode?: FocusVisibleMode | string;
+    children?: React.ReactNode;
+    onEnter?(outputEvent: MouseEvent): void;
+    onLeave?(outputEvent: MouseEvent): void;
+}
+export interface RootComponentProps extends TouchProps {
+    ref?: React.Ref<HTMLElement>;
+}
+export declare const ACTIVE_DELAY = 70;
+export declare const ACTIVE_EFFECT_DELAY = 600;
+/**
+ * @see https://vkcom.github.io/VKUI/#/Tappable
+ */
+export declare const Tappable: ({ children, Component, onClick, onKeyDown: _onKeyDown, activeEffectDelay, stopPropagation, getRootRef, hasHover: _hasHover, hoverMode, hasActive: _hasActive, activeMode, focusVisibleMode, onEnter, onLeave, className, ...props }: TappableProps) => JSX.Element;
+export {};

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

@@ -1,88 +1,41 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Tappable = exports.ACTIVE_EFFECT_DELAY = exports.ACTIVE_DELAY = void 0;
-
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 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 _mitt = _interopRequireDefault(require("mitt"));
-
 var _utils = require("../../lib/utils");
-
 var _Touch = require("../Touch/Touch");
-
 var _TouchContext = _interopRequireDefault(require("../Touch/TouchContext"));
-
 var _classNames = require("../../lib/classNames");
-
-var _getSizeXClassName = require("../../helpers/getSizeXClassName");
-
 var _platform = require("../../lib/platform");
-
 var _offset = require("../../lib/offset");
-
 var _touch = require("../../lib/touch");
-
 var _accessibility = require("../../lib/accessibility");
-
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-
 var _FocusVisible = require("../FocusVisible/FocusVisible");
-
 var _useTimeout = require("../../hooks/useTimeout");
-
 var _useExternRef = require("../../hooks/useExternRef");
-
 var _usePlatform = require("../../hooks/usePlatform");
-
 var _useFocusVisible2 = require("../../hooks/useFocusVisible");
-
 var _callMultiple = require("../../lib/callMultiple");
-
 var _useBooleanState2 = require("../../hooks/useBooleanState");
-
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-
-var _getHoverClassName = require("../../helpers/getHoverClassName");
-
+var _useAdaptivityHasHover = require("../../hooks/useAdaptivityHasHover");
+var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
 var _excluded = ["children", "Component", "onClick", "onKeyDown", "activeEffectDelay", "stopPropagation", "getRootRef", "hasHover", "hoverMode", "hasActive", "activeMode", "focusVisibleMode", "onEnter", "onLeave", "className"];
-var styles = {
-  "Tappable": "vkuiTappable",
-  "Tappable--hover-has-not": "vkuiTappable--hover-has-not",
-  "Tappable--hover-has": "vkuiTappable--hover-has",
-  "Tappable--hasActive": "vkuiTappable--hasActive",
-  "Tappable--hover-none": "vkuiTappable--hover-none",
-  "Tappable--active": "vkuiTappable--active",
-  "Tappable--focus-visible": "vkuiTappable--focus-visible",
-  "Tappable--active-background": "vkuiTappable--active-background",
-  "Tappable--active-opacity": "vkuiTappable--active-opacity",
-  "Tappable__hoverShadow": "vkuiTappable__hoverShadow",
-  "Tappable--hover-background": "vkuiTappable--hover-background",
-  "Tappable--hover-opacity": "vkuiTappable--hover-opacity",
-  "Tappable--mouse": "vkuiTappable--mouse",
-  "Tappable--ios": "vkuiTappable--ios",
-  "Tappable__waves": "vkuiTappable__waves",
-  "Tappable__wave": "vkuiTappable__wave",
-  "vkui-animation-wave": "vkui-animation-wave",
-  "Tappable--sizeX-regular": "vkuiTappable--sizeX-regular",
-  "Tappable--sizeX-compact": "vkuiTappable--sizeX-compact",
-  "Tappable--sizeX-none": "vkuiTappable--sizeX-none"
+var sizeXClassNames = {
+  none: "vkuiTappable--sizeX-none",
+  compact: "vkuiTappable--sizeX-compact",
+  regular: "vkuiTappable--sizeX-regular"
 };
 var WAVE_LIVE = 225;
 var ACTIVE_DELAY = 70;
@@ -99,40 +52,32 @@ var TapState = {
 var TappableContext = /*#__PURE__*/React.createContext({
   onHoverChange: _utils.noop
 });
-
 function isPresetStateMode(stateMode) {
   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];
-
+    _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 () {
@@ -140,26 +85,21 @@ function useActivity(hasActive, stopDelay) {
       activeTimeout.set();
       return activeTimeout.clear;
     }
-
     if (activity === TapState.exiting) {
       return stopTimeout.clear;
     }
-
     if (activity === TapState.active) {
       activeBus.emit("active", id);
     }
-
     return _utils.noop;
   }, [activity]);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     if (activity === TapState.none) {
       return _utils.noop;
     }
-
     var onActiveChange = function onActiveChange(activeId) {
       activeId !== id && _stop();
     };
-
     activeBus.on("active", onActiveChange);
     return function () {
       return activeBus.off("active", onActiveChange);
@@ -168,104 +108,91 @@ function useActivity(hasActive, stopDelay) {
   (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 = _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;
-
+    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;
-
+    focusVisible = _useFocusVisible.focusVisible,
+    onBlur = _useFocusVisible.onBlur,
+    onFocus = _useFocusVisible.onFocus;
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-      sizeX = _useAdaptivity.sizeX,
-      hasMouse = _useAdaptivity.hasMouse,
-      deviceHasHover = _useAdaptivity.deviceHasHover;
-
+    _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];
-
+    _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];
-
+    _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;
-
+    _hovered = _useBooleanState.value,
+    setHoveredTrue = _useBooleanState.setTrue,
+    setHoveredFalse = _useBooleanState.setFalse;
   var hovered = _hovered && !props.disabled;
   var hasActive = _hasActive && !childHover && !props.disabled;
-  var hasHover = deviceHasHover !== false && _hasHover && !childHover;
-  var isCustomElement = Component !== "a" && Component !== "button" && !props.contentEditable;
+  var hasHover = hasHoverContext === true && _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;
-
+    _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 containerRef = (0, _useExternRef.useExternRef)(getRootRef);
 
+  // hover propagation
   var childContext = React.useRef({
     onHoverChange: setChildHover
   }).current;
@@ -273,12 +200,12 @@ var Tappable = function Tappable(_ref) {
     if (!hovered) {
       return _utils.noop;
     }
-
     onHoverChange(true);
     return function () {
       return onHoverChange(false);
     };
   }, [hovered]);
+
   /*
    * [a11y]
    * Обрабатывает событие onkeydown
@@ -286,21 +213,17 @@ var Tappable = function Tappable(_ref) {
    * - 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 && !hasMouse && hasActive && activeMode === "background";
+  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) {
@@ -313,56 +236,45 @@ var Tappable = function Tappable(_ref) {
     }]));
     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;
-
+          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, _classNames.classNamesString)(className, styles.Tappable, platform === _platform.Platform.IOS && styles["Tappable--ios"], (0, _getSizeXClassName.getSizeXClassName)("Tappable", sizeX, styles), (0, _getHoverClassName.getHoverClassName)("Tappable", deviceHasHover, styles), hasActive && styles["Tappable--hasActive"], hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasActive && active && styles["Tappable--active"], hasMouse && styles["Tappable--mouse"], hasHover && hovered && isPresetHoverMode && styles["Tappable--hover-".concat(hoverMode)], hasActive && active && isPresetActiveMode && styles["Tappable--active-".concat(activeMode)], focusVisible && styles["Tappable--focus-visible"]);
+  var classes = (0, _classNames.classNamesString)(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),
@@ -371,7 +283,7 @@ var Tappable = function Tappable(_ref) {
     onKeyDown: (0, _callMultiple.callMultiple)(onKeyDown, _onKeyDown)
   };
   var role = props.href ? "link" : "button";
-  return (0, _jsxRuntime.createScopedElement)(_Touch.Touch, (0, _extends2.default)({
+  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,
@@ -387,27 +299,33 @@ var Tappable = function Tappable(_ref) {
     getRootRef: containerRef,
     onBlur: (0, _callMultiple.callMultiple)(onBlur, props.onBlur),
     onFocus: (0, _callMultiple.callMultiple)(onFocus, props.onFocus)
-  }, props.disabled ? {} : handlers), (0, _jsxRuntime.createScopedElement)(TappableContext.Provider, {
+  }, props.disabled ? {} : handlers), /*#__PURE__*/React.createElement(TappableContext.Provider, {
     value: childContext
-  }, children), needWaves && (0, _jsxRuntime.createScopedElement)("span", {
+  }, children), needWaves && /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true",
-    className: styles.Tappable__waves
+    className: "vkuiTappable__waves"
   }, clicks.map(function (wave) {
-    return (0, _jsxRuntime.createScopedElement)("span", {
+    return /*#__PURE__*/React.createElement("span", {
       key: wave.id,
-      className: styles.Tappable__wave,
+      className: "vkuiTappable__wave",
       style: {
         top: wave.y,
         left: wave.x
       }
     });
-  })), hasHover && hoverMode === "background" && (0, _jsxRuntime.createScopedElement)("span", {
+  })), (hasHover && hoverMode === "background" || hasActive && activeMode === "background") && /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true",
-    className: styles.Tappable__hoverShadow
-  }), !props.disabled && isPresetFocusVisibleMode && (0, _jsxRuntime.createScopedElement)(_FocusVisible.FocusVisible, {
+    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"
+};
 //# sourceMappingURL=Tappable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tappable.js","names":["WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","mitt","TapState","none","pending","active","exiting","TappableContext","React","createContext","onHoverChange","noop","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","useTimeout","stopTimeout","useIsomorphicLayoutEffect","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","children","Component","onClick","_onKeyDown","onKeyDown","activeEffectDelay","stopPropagation","getRootRef","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","TouchRootContext","platform","usePlatform","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeX","hasMouse","deviceHasHover","clicks","setClicks","childHover","setChildHover","useBooleanState","_hovered","value","setHoveredTrue","setTrue","setHoveredFalse","setFalse","hovered","disabled","isCustomElement","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","containerRef","useExternRef","childContext","useRef","current","e","shouldTriggerClickOnEnterOrSpace","preventDefault","click","needWaves","Platform","ANDROID","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","getOffsetRect","top","left","coordX","coordY","onMove","isSlide","onEnd","duration","activeDuration","classes","classNamesString","styles","IOS","getSizeXClassName","getHoverClassName","handlers","callMultiple","role","undefined","Tappable__waves","map","wave","Tappable__wave","Tappable__hoverShadow"],"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport mitt from \"mitt\";\nimport { noop } from \"../../lib/utils\";\nimport { Touch, TouchEvent, TouchProps } from \"../Touch/Touch\";\nimport TouchRootContext from \"../Touch/TouchContext\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { Platform } from \"../../lib/platform\";\nimport { getOffsetRect } from \"../../lib/offset\";\nimport { coordX, coordY } from \"../../lib/touch\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { shouldTriggerClickOnEnterOrSpace } from \"../../lib/accessibility\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { FocusVisible, FocusVisibleMode } from \"../FocusVisible/FocusVisible\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useFocusVisible } from \"../../hooks/useFocusVisible\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { useBooleanState } from \"../../hooks/useBooleanState\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getHoverClassName } from \"../../helpers/getHoverClassName\";\nimport styles from \"./Tappable.module.css\";\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\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(\n  stateMode: StateMode | string\n): 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(\n    () => Math.round(Math.random() * 1e8).toString(16),\n    []\n  );\n\n  const [activity, setActivity] = React.useState<\n    typeof TapState[keyof typeof TapState]\n  >(TapState.none);\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, hasMouse, deviceHasHover } = useAdaptivity();\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 = deviceHasHover !== false && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== \"a\" && Component !== \"button\" && !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = [\"inside\", \"outside\"].includes(\n    focusVisibleMode\n  );\n\n  const [activity, { start, stop, delayStart }] = useActivity(\n    hasActive,\n    activeEffectDelay\n  );\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 &&\n    !hasMouse &&\n    hasActive &&\n    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(\n      (click) => click.id + WAVE_LIVE > dateNow\n    );\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 = classNamesString(\n    className,\n    styles.Tappable,\n    platform === Platform.IOS && styles[\"Tappable--ios\"],\n    getSizeXClassName(\"Tappable\", sizeX, styles),\n    getHoverClassName(\"Tappable\", deviceHasHover, styles),\n    hasActive && styles[\"Tappable--hasActive\"],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasActive && active && styles[\"Tappable--active\"],\n    hasMouse && styles[\"Tappable--mouse\"],\n    hasHover &&\n      hovered &&\n      isPresetHoverMode &&\n      styles[`Tappable--hover-${hoverMode}`],\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      styles[`Tappable--active-${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}>\n        {children}\n      </TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden=\"true\" 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\" && (\n        <span aria-hidden=\"true\" className={styles.Tappable__hoverShadow} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Tappable.js","names":["sizeXClassNames","none","compact","regular","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","mitt","TapState","pending","active","exiting","TappableContext","React","createContext","onHoverChange","noop","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","useTimeout","stopTimeout","useIsomorphicLayoutEffect","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","children","Component","onClick","_onKeyDown","onKeyDown","activeEffectDelay","stopPropagation","getRootRef","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","TouchRootContext","platform","usePlatform","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeX","hasPointerContext","useAdaptivityHasPointer","hasHoverContext","useAdaptivityHasHover","clicks","setClicks","childHover","setChildHover","useBooleanState","_hovered","value","setHoveredTrue","setTrue","setHoveredFalse","setFalse","hovered","disabled","isCustomElement","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","containerRef","useExternRef","childContext","useRef","current","e","shouldTriggerClickOnEnterOrSpace","preventDefault","click","needWaves","Platform","ANDROID","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","getOffsetRect","top","left","coordX","coordY","onMove","isSlide","onEnd","duration","activeDuration","classes","classNamesString","IOS","styles","handlers","callMultiple","role","undefined","map","wave"],"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport mitt from \"mitt\";\nimport { noop } from \"../../lib/utils\";\nimport { Touch, TouchEvent, TouchProps } from \"../Touch/Touch\";\nimport TouchRootContext from \"../Touch/TouchContext\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { getOffsetRect } from \"../../lib/offset\";\nimport { coordX, coordY } from \"../../lib/touch\";\nimport {\n  AnchorHTMLAttributesOnly,\n  HasComponent,\n  HasRootRef,\n} from \"../../types\";\nimport { shouldTriggerClickOnEnterOrSpace } from \"../../lib/accessibility\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { FocusVisible, FocusVisibleMode } from \"../FocusVisible/FocusVisible\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useFocusVisible } from \"../../hooks/useFocusVisible\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { useBooleanState } from \"../../hooks/useBooleanState\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useAdaptivityHasHover } from \"../../hooks/useAdaptivityHasHover\";\nimport { useAdaptivityHasPointer } from \"../../hooks/useAdaptivityHasPointer\";\nimport styles from \"./Tappable.module.css\";\n\nconst sizeXClassNames = {\n  none: styles[\"Tappable--sizeX-none\"],\n  compact: styles[\"Tappable--sizeX-compact\"],\n  regular: styles[\"Tappable--sizeX-regular\"],\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(\n  stateMode: StateMode | string\n): 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(\n    () => Math.round(Math.random() * 1e8).toString(16),\n    []\n  );\n\n  const [activity, setActivity] = React.useState<\n    typeof TapState[keyof typeof TapState]\n  >(TapState.none);\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 === true && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== \"a\" &&\n    Component !== \"button\" &&\n    Component !== \"label\" &&\n    !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = [\"inside\", \"outside\"].includes(\n    focusVisibleMode\n  );\n\n  const [activity, { start, stop, delayStart }] = useActivity(\n    hasActive,\n    activeEffectDelay\n  );\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 &&\n    !hasPointerContext &&\n    hasActive &&\n    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(\n      (click) => click.id + WAVE_LIVE > dateNow\n    );\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 = classNamesString(\n    className,\n    styles[\"Tappable\"],\n    platform === Platform.IOS && styles[\"Tappable--ios\"],\n    sizeXClassNames[sizeX],\n    hasHoverContext && styles[\"Tappable--hover-has\"],\n    hasActive && styles[\"Tappable--hasActive\"],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasActive && active && styles[\"Tappable--active\"],\n    hasHover &&\n      hovered &&\n      isPresetHoverMode &&\n      styles[`Tappable--hover-${hoverMode}`],\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      styles[`Tappable--active-${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}>\n        {children}\n      </TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden=\"true\" 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\") ||\n        (hasActive && activeMode === \"background\")) && (\n        <span aria-hidden=\"true\" className={styles.Tappable__stateLayer} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"mappings":"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"}