npm - @vkontakte/vkui - Versions diffs - 5.4.2 → 5.5.0 - Mend

@vkontakte/vkui 5.4.2 → 5.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1983) hide show

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

@@ -19,16 +19,16 @@ _export(exports, {
         return Tappable;
     }
 });
-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 _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _mitt = /*#__PURE__*/ _interopRequireDefault(require("mitt"));
+var _mitt = /*#__PURE__*/ _interop_require_default._(require("mitt"));
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useAdaptivityHasHover = require("../../hooks/useAdaptivityHasHover");
 var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
@@ -44,9 +44,9 @@ 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 _touch1 = require("../Touch/Touch");
-var _touchContext = /*#__PURE__*/ _interopRequireDefault(require("../Touch/TouchContext"));
+var _FocusVisible = require("../FocusVisible/FocusVisible");
+var _Touch = require("../Touch/Touch");
+var _TouchContext = /*#__PURE__*/ _interop_require_default._(require("../Touch/TouchContext"));
 var sizeXClassNames = {
     none: "vkuiTappable--sizeX-none",
     compact: "vkuiTappable--sizeX-compact"
@@ -77,7 +77,7 @@ function useActivity(hasActive, stopDelay) {
     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 _React_useState = _sliced_to_array._(_react.useState(TapState.none), 2), activity = _React_useState[0], setActivity = _React_useState[1];
     var _stop = function() {
         return setActivity(TapState.none);
     };
@@ -158,7 +158,7 @@ var Tappable = function(_param) {
         var filteredClicks = clicks.filter(function(click) {
             return click.id + WAVE_LIVE > dateNow;
         });
-        setClicks(_toConsumableArray(filteredClicks).concat([
+        setClicks(_to_consumable_array._(filteredClicks).concat([
             {
                 x: x,
                 y: y,
@@ -202,7 +202,7 @@ var Tappable = function(_param) {
         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, [
+    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, hoveredProp = _param.hovered, props = _object_without_properties._(_param, [
         "children",
         "Component",
         "onClick",
@@ -217,20 +217,21 @@ var Tappable = function(_param) {
         "focusVisibleMode",
         "onEnter",
         "onLeave",
-        "className"
+        "className",
+        "hovered"
     ]);
     Component = Component || (props.href ? "a" : "div");
     var onHoverChange = _react.useContext(TappableContext).onHoverChange;
-    var insideTouchRoot = _react.useContext(_touchContext.default);
+    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 _React_useState = _sliced_to_array._(_react.useState([]), 2), clicks = _React_useState[0], setClicks = _React_useState[1];
+    var _React_useState1 = _sliced_to_array._(_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 hovered = (_hovered || hoveredProp) && !props.disabled;
     var hasActive = _hasActive && !childHover && !props.disabled;
     var hasHover = hasHoverContext && _hasHover && !childHover;
     var isCustomElement = Component !== "a" && Component !== "button" && Component !== "label" && !props.contentEditable;
@@ -240,7 +241,7 @@ var Tappable = function(_param) {
         "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 _useActivity = _sliced_to_array._(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
@@ -277,7 +278,7 @@ var Tappable = function(_param) {
         onKeyDown: (0, _callMultiple.callMultiple)(onKeyDown, _onKeyDown)
     };
     var role = props.href ? "link" : "button";
-    return /*#__PURE__*/ _react.createElement(_touch1.Touch, _objectSpread(_objectSpreadProps(_objectSpread({
+    return /*#__PURE__*/ _react.createElement(_Touch.Touch, _object_spread._(_object_spread_props._(_object_spread._({
         onEnter: (0, _callMultiple.callMultiple)(setHoveredTrue, onEnter),
         onLeave: (0, _callMultiple.callMultiple)(setHoveredFalse, onLeave),
         type: Component === "button" ? "button" : undefined,
@@ -310,7 +311,7 @@ var Tappable = function(_param) {
     })), (hasHover && hoverMode === "background" || hasActive && activeMode === "background") && /*#__PURE__*/ _react.createElement("span", {
         "aria-hidden": true,
         className: "vkuiTappable__stateLayer"
-    }), !props.disabled && isPresetFocusVisibleMode && /*#__PURE__*/ _react.createElement(_focusVisible.FocusVisible, {
+    }), !props.disabled && isPresetFocusVisibleMode && /*#__PURE__*/ _react.createElement(_FocusVisible.FocusVisible, {
         visible: focusVisible,
         mode: focusVisibleMode
     }));

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

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

package/dist/cjs/components/TextTooltip/TextTooltip.d.ts CHANGED Viewed

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

package/dist/cjs/components/TextTooltip/TextTooltip.js CHANGED Viewed

@@ -8,22 +8,22 @@ Object.defineProperty(exports, "TextTooltip", {
         return TextTooltip;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _hoverPopper = require("../HoverPopper/HoverPopper");
-var _subhead = require("../Typography/Subhead/Subhead");
+var _HoverPopper = require("../HoverPopper/HoverPopper");
+var _Subhead = require("../Typography/Subhead/Subhead");
 var TextTooltip = function(_param) {
-    var children = _param.children, text = _param.text, header = _param.header, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "neutral" : _param_appearance, className = _param.className, popperProps = _objectWithoutProperties(_param, [
+    var children = _param.children, text = _param.text, header = _param.header, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "neutral" : _param_appearance, className = _param.className, popperProps = _object_without_properties._(_param, [
         "children",
         "text",
         "header",
         "appearance",
         "className"
     ]);
-    return /*#__PURE__*/ _react.createElement(_hoverPopper.HoverPopper, _objectSpread({
+    return /*#__PURE__*/ _react.createElement(_HoverPopper.HoverPopper, _object_spread._({
         className: (0, _vkjs.classNames)("vkuiTextTooltip", appearance !== "neutral" && ({
             accent: "vkuiTextTooltip--appearance-accent",
             white: "vkuiTextTooltip--appearance-white",
@@ -32,9 +32,9 @@ var TextTooltip = function(_param) {
         })[appearance], className),
         arrow: true,
         arrowClassName: "vkuiTextTooltip__arrow",
-        content: /*#__PURE__*/ _react.createElement(_react.Fragment, null, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(_subhead.Subhead, {
+        content: /*#__PURE__*/ _react.createElement(_react.Fragment, null, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
             weight: "2"
-        }, header), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ _react.createElement(_subhead.Subhead, null, text))
+        }, header), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, null, text))
     }, popperProps), children);
 };

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

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

package/dist/cjs/components/Textarea/Textarea.d.ts CHANGED Viewed

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

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

@@ -8,24 +8,25 @@ Object.defineProperty(exports, "Textarea", {
         return Textarea;
     }
 });
-var _defineProperty = require("@swc/helpers/lib/_define_property.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 _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useEnsuredControl = require("../../hooks/useEnsuredControl");
 var _useExternRef = require("../../hooks/useExternRef");
 var _adaptivity = require("../../lib/adaptivity");
-var _formField = require("../FormField/FormField");
-var sizeYClassNames = _defineProperty({
+var _FormField = require("../FormField/FormField");
+var _Text = require("../Typography/Text/Text");
+var sizeYClassNames = _define_property._({
     none: "vkuiTextarea--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiTextarea--sizeY-compact");
 var Textarea = function(_param) {
-    var _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_grow = _param.grow, grow = _param_grow === void 0 ? true : _param_grow, style = _param.style, onResize = _param.onResize, className = _param.className, getRootRef = _param.getRootRef, getRef = _param.getRef, _param_rows = _param.rows, rows = _param_rows === void 0 ? 2 : _param_rows, maxHeight = _param.maxHeight, status = _param.status, onChangeProp = _param.onChange, valueProp = _param.value, restProps = _objectWithoutProperties(_param, [
+    var _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_grow = _param.grow, grow = _param_grow === void 0 ? true : _param_grow, style = _param.style, onResize = _param.onResize, className = _param.className, getRootRef = _param.getRootRef, getRef = _param.getRef, _param_rows = _param.rows, rows = _param_rows === void 0 ? 2 : _param_rows, maxHeight = _param.maxHeight, status = _param.status, onChangeProp = _param.onChange, valueProp = _param.value, restProps = _object_without_properties._(_param, [
         "defaultValue",
         "grow",
         "style",
@@ -39,7 +40,7 @@ var Textarea = function(_param) {
         "onChange",
         "value"
     ]);
-    var _useEnsuredControl1 = _slicedToArray((0, _useEnsuredControl.useEnsuredControl)({
+    var _useEnsuredControl1 = _sliced_to_array._((0, _useEnsuredControl.useEnsuredControl)({
         defaultValue: defaultValue,
         onChange: onChangeProp,
         value: valueProp
@@ -65,13 +66,15 @@ var Textarea = function(_param) {
         elementRef,
         onResize
     ]);
-    return /*#__PURE__*/ _react.createElement(_formField.FormField, {
+    return /*#__PURE__*/ _react.createElement(_FormField.FormField, {
         className: (0, _vkjs.classNames)("vkuiTextarea", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], className),
         style: style,
         getRootRef: getRootRef,
         disabled: restProps.disabled,
         status: status
-    }, /*#__PURE__*/ _react.createElement("textarea", _objectSpreadProps(_objectSpread({}, restProps), {
+    }, /*#__PURE__*/ _react.createElement(_Text.Text, _object_spread_props._(_object_spread._({}, restProps), {
+        Component: "textarea",
+        normalize: false,
         style: {
             maxHeight: maxHeight
         },
@@ -79,7 +82,7 @@ var Textarea = function(_param) {
         className: "vkuiTextarea__el",
         value: value,
         onChange: onChange,
-        ref: elementRef
+        getRootRef: elementRef
     })));
 };

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

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

package/dist/cjs/components/Tooltip/Tooltip.d.ts CHANGED Viewed

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

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

@@ -8,25 +8,26 @@ Object.defineProperty(exports, "Tooltip", {
         return Tooltip;
     }
 });
-var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
-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 _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _reactDom = /*#__PURE__*/ _interopRequireDefault(require("react-dom"));
+var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _reactdom = /*#__PURE__*/ _interop_require_default._(require("react-dom"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useExternRef = require("../../hooks/useExternRef");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _dom = require("../../lib/dom");
 var _floating = require("../../lib/floating");
 var _warnOnce = require("../../lib/warnOnce");
-var _navTransitionContext = require("../NavTransitionContext/NavTransitionContext");
-var _popperArrow = require("../PopperArrow/PopperArrow");
-var _subhead = require("../Typography/Subhead/Subhead");
-var _tooltipContainer = require("./TooltipContainer");
+var _NavTransitionContext = require("../NavTransitionContext/NavTransitionContext");
+var _DefaultIcon = require("../PopperArrow/DefaultIcon");
+var _PopperArrow = require("../PopperArrow/PopperArrow");
+var _Subhead = require("../Typography/Subhead/Subhead");
+var _TooltipContainer = require("./TooltipContainer");
 var isDOMTypeElement = function(element) {
     return /*#__PURE__*/ _react.isValidElement(element) && typeof element.type === "string";
 };
@@ -59,7 +60,7 @@ function isVerticalPlacement(placement) {
     return placement.startsWith("top") || placement.startsWith("bottom");
 }
 var Tooltip = function(_param) {
-    var children = _param.children, tmp = _param.isShown, isShownProp = tmp === void 0 ? true : tmp, _param_offsetX = _param.offsetX, offsetX = _param_offsetX === void 0 ? 0 : _param_offsetX, _param_offsetY = _param.offsetY, offsetY = _param_offsetY === void 0 ? 15 : _param_offsetY, alignX = _param.alignX, alignY = _param.alignY, onClose = _param.onClose, _param_cornerOffset = _param.cornerOffset, cornerOffset = _param_cornerOffset === void 0 ? 0 : _param_cornerOffset, cornerAbsoluteOffset = _param.cornerAbsoluteOffset, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, _param_arrow = _param.arrow, arrow = _param_arrow === void 0 ? true : _param_arrow, placementProp = _param.placement, text = _param.text, header = _param.header, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var children = _param.children, tmp = _param.isShown, isShownProp = tmp === void 0 ? true : tmp, _param_offsetX = _param.offsetX, offsetX = _param_offsetX === void 0 ? 0 : _param_offsetX, _param_offsetY = _param.offsetY, offsetY = _param_offsetY === void 0 ? 15 : _param_offsetY, alignX = _param.alignX, alignY = _param.alignY, onClose = _param.onClose, _param_cornerOffset = _param.cornerOffset, cornerOffset = _param_cornerOffset === void 0 ? 0 : _param_cornerOffset, cornerAbsoluteOffset = _param.cornerAbsoluteOffset, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, _param_arrow = _param.arrow, arrow = _param_arrow === void 0 ? true : _param_arrow, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? 14 : _param_arrowPadding, _param_ArrowIcon = _param.ArrowIcon, ArrowIcon = _param_ArrowIcon === void 0 ? _DefaultIcon.DefaultIcon : _param_ArrowIcon, placementProp = _param.placement, text = _param.text, header = _param.header, className = _param.className, restProps = _object_without_properties._(_param, [
         "children",
         "isShown",
         "offsetX",
@@ -71,19 +72,21 @@ var Tooltip = function(_param) {
         "cornerAbsoluteOffset",
         "appearance",
         "arrow",
+        "arrowPadding",
+        "ArrowIcon",
         "placement",
         "text",
         "header",
         "className"
     ]);
-    var arrowRef = _react.useRef(null);
-    var _React_useState = _slicedToArray(_react.useState(null), 2), target = _React_useState[0], setTarget = _React_useState[1];
+    var _React_useState = _sliced_to_array._(_react.useState(null), 2), arrowRef = _React_useState[0], setArrowRef = _React_useState[1];
+    var _React_useState1 = _sliced_to_array._(_react.useState(null), 2), target = _React_useState1[0], setTarget = _React_useState1[1];
     /* eslint-disable no-restricted-properties */ var tooltipContainer = _react.useMemo(function() {
-        return target === null || target === void 0 ? void 0 : target.closest("[".concat(_tooltipContainer.tooltipContainerAttr, "]"));
+        return target === null || target === void 0 ? void 0 : target.closest("[".concat(_TooltipContainer.tooltipContainerAttr, "]"));
     }, [
         target
     ]);
-    var entering = (0, _navTransitionContext.useNavTransition)().entering;
+    var entering = (0, _NavTransitionContext.useNavTransition)().entering;
     var isShown = isShownProp && tooltipContainer && !entering;
     var placement = placementProp || getDefaultPlacement(alignX, alignY);
     var isNotAutoPlacement = (0, _floating.checkIsNotAutoPlacement)(placement);
@@ -125,7 +128,7 @@ var Tooltip = function(_param) {
         if (arrow) {
             middlewares.push((0, _floating.arrowMiddleware)({
                 element: arrowRef,
-                padding: 14
+                padding: arrowPadding
             }));
             middlewares.push({
                 name: "arrowOffset",
@@ -154,6 +157,8 @@ var Tooltip = function(_param) {
         return middlewares;
     }, [
         arrow,
+        arrowRef,
+        arrowPadding,
         cornerAbsoluteOffset,
         cornerOffset,
         offsetX,
@@ -174,22 +179,23 @@ var Tooltip = function(_param) {
     });
     var childRef = isDOMTypeElement(children) ? children.ref : /*#__PURE__*/ _react.isValidElement(children) ? children.props.getRootRef : null;
     var patchedRef = (0, _useExternRef.useExternRef)(setTarget, refs.setReference, childRef);
-    var child = /*#__PURE__*/ _react.isValidElement(children) ? /*#__PURE__*/ _react.cloneElement(children, _defineProperty({}, isDOMTypeElement(children) ? "ref" : "getRootRef", patchedRef)) : children;
-    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, child, isShown && target != null && /*#__PURE__*/ _reactDom.default.createPortal(/*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+    var child = /*#__PURE__*/ _react.isValidElement(children) ? /*#__PURE__*/ _react.cloneElement(children, _define_property._({}, isDOMTypeElement(children) ? "ref" : "getRootRef", patchedRef)) : children;
+    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, child, isShown && target != null && /*#__PURE__*/ _reactdom.default.createPortal(/*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
         className: (0, _vkjs.classNames)("vkuiTooltip", appearance !== "neutral" && stylesAppearance[appearance], className)
     }), /*#__PURE__*/ _react.createElement("div", {
         ref: refs.setFloating,
         style: (0, _floating.convertFloatingDataToReactCSSProperties)(floatingPositionStrategy, floatingDataX, floatingDataY)
-    }, arrow && /*#__PURE__*/ _react.createElement(_popperArrow.PopperArrow, {
+    }, arrow && /*#__PURE__*/ _react.createElement(_PopperArrow.PopperArrow, {
         coords: arrowCoords,
         placement: resolvedPlacement,
         arrowClassName: "vkuiTooltip__arrow",
-        getRootRef: arrowRef
+        getRootRef: setArrowRef,
+        Icon: ArrowIcon
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiTooltip__content"
-    }, header && /*#__PURE__*/ _react.createElement(_subhead.Subhead, {
+    }, header && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
         weight: "2"
-    }, header), text && /*#__PURE__*/ _react.createElement(_subhead.Subhead, null, text)))), tooltipContainer));
+    }, header), text && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, null, text)))), tooltipContainer));
 };
 //# sourceMappingURL=Tooltip.js.map