@vkontakte/vkui 4.37.0 → 5.0.0

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

@@ -2,18 +2,18 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["children", "Component", "onClick", "onKeyDown", "activeEffectDelay", "stopPropagation", "getRootRef", "sizeX", "hasMouse", "deviceHasHover", "hasHover", "hoverMode", "hasActive", "activeMode", "focusVisibleMode", "onEnter", "onLeave"];
+var _excluded = ["children", "Component", "onClick", "onKeyDown", "activeEffectDelay", "stopPropagation", "getRootRef", "hasHover", "hoverMode", "hasActive", "activeMode", "focusVisibleMode", "onEnter", "onLeave", "className"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import mitt from "mitt";
 import { noop } from "../../lib/utils";
 import { Touch } from "../Touch/Touch";
 import TouchRootContext from "../Touch/TouchContext";
-import { classNames } from "../../lib/classNames";
-import { IOS, ANDROID } from "../../lib/platform";
+import { classNamesString } from "../../lib/classNames";
+import { getSizeXClassName } from "../../helpers/getSizeXClassName";
+import { Platform } from "../../lib/platform";
 import { getOffsetRect } from "../../lib/offset";
 import { coordX, coordY } from "../../lib/touch";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { shouldTriggerClickOnEnterOrSpace } from "../../lib/accessibility";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { FocusVisible } from "../FocusVisible/FocusVisible";
@@ -23,7 +23,33 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { useFocusVisible } from "../../hooks/useFocusVisible";
 import { callMultiple } from "../../lib/callMultiple";
 import { useBooleanState } from "../../hooks/useBooleanState";
-import "./Tappable.css";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { getHoverClassName } from "../../helpers/getHoverClassName";
+
+require("./Tappable.module.css");
+
+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 WAVE_LIVE = 225;
 export var ACTIVE_DELAY = 70;
 export var ACTIVE_EFFECT_DELAY = 600;
@@ -38,6 +64,17 @@ var TappableContext = /*#__PURE__*/React.createContext({
   onHoverChange: 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);
@@ -111,8 +148,12 @@ function useActivity(hasActive, stopDelay) {
     stop: stop
   }];
 }
+/**
+ * @see https://vkcom.github.io/VKUI/#/Tappable
+ */
 
-var TappableComponent = function TappableComponent(_ref) {
+
+export var Tappable = function Tappable(_ref) {
   var children = _ref.children,
       Component = _ref.Component,
       onClick = _ref.onClick,
@@ -122,9 +163,6 @@ var TappableComponent = function TappableComponent(_ref) {
       _ref$stopPropagation = _ref.stopPropagation,
       stopPropagation = _ref$stopPropagation === void 0 ? false : _ref$stopPropagation,
       getRootRef = _ref.getRootRef,
-      sizeX = _ref.sizeX,
-      hasMouse = _ref.hasMouse,
-      deviceHasHover = _ref.deviceHasHover,
       _ref$hasHover = _ref.hasHover,
       _hasHover = _ref$hasHover === void 0 ? true : _ref$hasHover,
       _ref$hoverMode = _ref.hoverMode,
@@ -137,6 +175,7 @@ var TappableComponent = function TappableComponent(_ref) {
       focusVisibleMode = _ref$focusVisibleMode === void 0 ? "inside" : _ref$focusVisibleMode,
       onEnter = _ref.onEnter,
       onLeave = _ref.onLeave,
+      className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
   Component = Component || (props.href ? "a" : "div");
@@ -152,6 +191,11 @@ var TappableComponent = function TappableComponent(_ref) {
       onBlur = _useFocusVisible.onBlur,
       onFocus = _useFocusVisible.onFocus;
 
+  var _useAdaptivity = useAdaptivity(),
+      sizeX = _useAdaptivity.sizeX,
+      hasMouse = _useAdaptivity.hasMouse,
+      deviceHasHover = _useAdaptivity.deviceHasHover;
+
   var _React$useState3 = React.useState([]),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       clicks = _React$useState4[0],
@@ -169,10 +213,10 @@ var TappableComponent = function TappableComponent(_ref) {
 
   var hovered = _hovered && !props.disabled;
   var hasActive = _hasActive && !childHover && !props.disabled;
-  var hasHover = deviceHasHover && _hasHover && !childHover;
-  var isCustomElement = Component !== "a" && Component !== "button" && Component !== "label" && !props.contentEditable;
-  var isPresetHoverMode = ["opacity", "background"].includes(hoverMode);
-  var isPresetActiveMode = ["opacity", "background"].includes(activeMode);
+  var hasHover = deviceHasHover !== false && _hasHover && !childHover;
+  var isCustomElement = Component !== "a" && Component !== "button" && !props.contentEditable;
+  var isPresetHoverMode = isPresetStateMode(hoverMode);
+  var isPresetActiveMode = isPresetStateMode(activeMode);
   var isPresetFocusVisibleMode = ["inside", "outside"].includes(focusVisibleMode);
 
   var _useActivity = useActivity(hasActive, activeEffectDelay),
@@ -216,7 +260,7 @@ var TappableComponent = function TappableComponent(_ref) {
     }
   }
 
-  var needWaves = platform === ANDROID && !hasMouse && hasActive && activeMode === "background";
+  var needWaves = platform === Platform.ANDROID && !hasMouse && hasActive && activeMode === "background";
   var clearClicks = useTimeout(function () {
     return setClicks([]);
   }, WAVE_LIVE);
@@ -282,7 +326,7 @@ var TappableComponent = function TappableComponent(_ref) {
     stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
   }
 
-  var classes = classNames("Tappable", platform === IOS && "Tappable--ios", "Tappable--sizeX-".concat(sizeX), hasHover && "Tappable--hasHover", hasActive && "Tappable--hasActive", hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasActive && active && "Tappable--active", hasMouse && "Tappable--mouse", hasHover && hovered && isPresetHoverMode && "Tappable--hover-".concat(hoverMode), hasActive && active && isPresetActiveMode && "Tappable--active-".concat(activeMode), focusVisible && "Tappable--focus-visible");
+  var classes = classNamesString(className, styles.Tappable, platform === Platform.IOS && styles["Tappable--ios"], getSizeXClassName("Tappable", sizeX, styles), 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 handlers = {
     onStart: callMultiple(onStart, props.onStart),
     onMove: callMultiple(onMove, props.onMove),
@@ -302,7 +346,7 @@ var TappableComponent = function TappableComponent(_ref) {
   }, props, {
     slideThreshold: 20,
     usePointerHover: true,
-    vkuiClass: classes,
+    className: classes,
     Component: Component,
     getRootRef: containerRef,
     onBlur: callMultiple(onBlur, props.onBlur),
@@ -311,11 +355,11 @@ var TappableComponent = function TappableComponent(_ref) {
     value: childContext
   }, children), needWaves && createScopedElement("span", {
     "aria-hidden": "true",
-    vkuiClass: "Tappable__waves"
+    className: styles.Tappable__waves
   }, clicks.map(function (wave) {
     return createScopedElement("span", {
       key: wave.id,
-      vkuiClass: "Tappable__wave",
+      className: styles.Tappable__wave,
       style: {
         top: wave.y,
         left: wave.x
@@ -323,20 +367,9 @@ var TappableComponent = function TappableComponent(_ref) {
     });
   })), hasHover && hoverMode === "background" && createScopedElement("span", {
     "aria-hidden": "true",
-    vkuiClass: "Tappable__hoverShadow"
+    className: styles.Tappable__hoverShadow
   }), !props.disabled && isPresetFocusVisibleMode && createScopedElement(FocusVisible, {
     mode: focusVisibleMode
   }));
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/Tappable
- */
-
-
-export var Tappable = withAdaptivity(TappableComponent, {
-  sizeX: true,
-  hasMouse: true,
-  deviceHasHover: true
-});
-Tappable.displayName = "Tappable";
 //# sourceMappingURL=Tappable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tappable.js","names":["React","mitt","noop","Touch","TouchRootContext","classNames","IOS","ANDROID","getOffsetRect","coordX","coordY","withAdaptivity","shouldTriggerClickOnEnterOrSpace","useIsomorphicLayoutEffect","FocusVisible","useTimeout","useExternRef","usePlatform","useFocusVisible","callMultiple","useBooleanState","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","none","pending","active","exiting","TappableContext","createContext","onHoverChange","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","TappableComponent","children","Component","onClick","_onKeyDown","onKeyDown","activeEffectDelay","stopPropagation","getRootRef","sizeX","hasMouse","deviceHasHover","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","clicks","setClicks","childHover","setChildHover","_hovered","value","setHoveredTrue","setTrue","setHoveredFalse","setFalse","hovered","disabled","isCustomElement","contentEditable","isPresetHoverMode","includes","isPresetActiveMode","isPresetFocusVisibleMode","containerRef","childContext","useRef","current","e","preventDefault","click","needWaves","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","top","left","onMove","isSlide","onEnd","duration","activeDuration","classes","handlers","role","undefined","map","wave","Tappable","displayName"],"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 { classNames } from \"../../lib/classNames\";\nimport { IOS, ANDROID } from \"../../lib/platform\";\nimport { getOffsetRect } from \"../../lib/offset\";\nimport { coordX, coordY } from \"../../lib/touch\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\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 \"./Tappable.css\";\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    AdaptivityProps,\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?: \"opacity\" | \"background\" | string;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: \"opacity\" | \"background\" | 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 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\nconst TappableComponent = ({\n  children,\n  Component,\n  onClick,\n  onKeyDown: _onKeyDown,\n  activeEffectDelay = ACTIVE_EFFECT_DELAY,\n  stopPropagation = false,\n  getRootRef,\n  sizeX,\n  hasMouse,\n  deviceHasHover,\n  hasHover: _hasHover = true,\n  hoverMode = \"background\",\n  hasActive: _hasActive = true,\n  activeMode = \"background\",\n  focusVisibleMode = \"inside\",\n  onEnter,\n  onLeave,\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\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 && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== \"a\" &&\n    Component !== \"button\" &&\n    Component !== \"label\" &&\n    !props.contentEditable;\n  const isPresetHoverMode = [\"opacity\", \"background\"].includes(hoverMode);\n  const isPresetActiveMode = [\"opacity\", \"background\"].includes(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 === 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 = classNames(\n    \"Tappable\",\n    platform === IOS && \"Tappable--ios\",\n    `Tappable--sizeX-${sizeX}`,\n    hasHover && `Tappable--hasHover`,\n    hasActive && `Tappable--hasActive`,\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasActive && active && \"Tappable--active\",\n    hasMouse && \"Tappable--mouse\",\n    hasHover && hovered && isPresetHoverMode && `Tappable--hover-${hoverMode}`,\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      `Tappable--active-${activeMode}`,\n    focusVisible && \"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      vkuiClass={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\" vkuiClass=\"Tappable__waves\">\n          {clicks.map((wave) => (\n            <span\n              key={wave.id}\n              vkuiClass=\"Tappable__wave\"\n              style={{ top: wave.y, left: wave.x }}\n            />\n          ))}\n        </span>\n      )}\n      {hasHover && hoverMode === \"background\" && (\n        <span aria-hidden=\"true\" vkuiClass=\"Tappable__hoverShadow\" />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = withAdaptivity(TappableComponent, {\n  sizeX: true,\n  hasMouse: true,\n  deviceHasHover: true,\n});\n\nTappable.displayName = \"Tappable\";\n"],"mappings":"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"}
+{"version":3,"file":"Tappable.js","names":["React","mitt","noop","Touch","TouchRootContext","classNamesString","getSizeXClassName","Platform","getOffsetRect","coordX","coordY","shouldTriggerClickOnEnterOrSpace","useIsomorphicLayoutEffect","FocusVisible","useTimeout","useExternRef","usePlatform","useFocusVisible","callMultiple","useBooleanState","useAdaptivity","getHoverClassName","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","none","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","children","Component","onClick","_onKeyDown","onKeyDown","activeEffectDelay","stopPropagation","getRootRef","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasMouse","deviceHasHover","clicks","setClicks","childHover","setChildHover","_hovered","value","setHoveredTrue","setTrue","setHoveredFalse","setFalse","hovered","disabled","isCustomElement","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","containerRef","childContext","useRef","current","e","preventDefault","click","needWaves","ANDROID","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","top","left","onMove","isSlide","onEnd","duration","activeDuration","classes","styles","IOS","handlers","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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"}

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

@@ -0,0 +1 @@
+.vkuiTappable{border-radius:var(--vkui--size_border_radius--regular);cursor:default;position:relative;transition:background-color .15s ease-out}.vkuiTappable--hasActive,.vkuiTappable--hover-has{cursor:pointer}@media (hover:hover){.vkuiTappable--hover-none{cursor:pointer}}.vkuiTappable[aria-disabled=true],.vkuiTappable[disabled]{cursor:default}.vkuiTappable--focus-visible{outline:none}.vkuiTappable--active-background.vkuiTappable--active-background.vkuiTappable--active-background{background-color:var(--vkui--color_transparent--active)}.vkuiTappable--active-opacity.vkuiTappable--active-opacity.vkuiTappable--active-opacity{opacity:.7}.vkuiTappable__hoverShadow{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0}.vkuiTappable--hover-background>.vkuiTappable__hoverShadow{background-color:var(--vkui--color_transparent--hover)}.vkuiTappable--hover-opacity{opacity:.8}.vkuiTappable--mouse{transition:opacity .15s ease-out}.vkuiTappable--mouse .vkuiTappable__hoverShadow{transition:background-color .15s ease-out}.vkuiTappable--ios.vkuiTappable--active-background{transition:none}.vkuiTappable .vkuiTappable__waves{border-radius:inherit;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;will-change:transform}.vkuiTappable .vkuiTappable__wave{animation:vkui-animation-wave .3s cubic-bezier(.4,0,.2,1);animation:vkui-animation-wave .3s var(--android-easing);background:hsla(0,0%,50%,.1);border-radius:50%;content:"";height:24px;left:0;margin:-12px 0 0 -12px;opacity:0;position:absolute;top:0;width:24px}.vkuiTappable--sizeX-compact{border-radius:0}@media (max-width:767px){.vkuiTappable--sizeX-none{border-radius:0}}@keyframes vkui-animation-wave{0%{opacity:1;transform:scale(1)}30%{opacity:1}to{opacity:0;transform:scale(8)}}

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

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

package/dist/cssm/components/TextTooltip/TextTooltip.js

@@ -18,11 +18,11 @@ export var TextTooltip = function TextTooltip(_ref) {
       text = _ref.text,
       header = _ref.header,
       _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? "black" : _ref$appearance,
+      appearance = _ref$appearance === void 0 ? "neutral" : _ref$appearance,
       popperProps = _objectWithoutProperties(_ref, _excluded);
 
   return createScopedElement(HoverPopper, _extends({
-    vkuiClass: classNames("TextTooltip", "TextTooltip--".concat(appearance)),
+    vkuiClass: classNames("TextTooltip", "TextTooltip--appearance-".concat(appearance)),
     arrow: true,
     arrowClassName: prefixClass("TextTooltip__arrow"),
     content: createScopedElement(React.Fragment, null, hasReactNode(header) && createScopedElement(Subhead, {

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

@@ -1 +1 @@
-{"version":3,"file":"TextTooltip.js","names":["React","HoverPopper","hasReactNode","Subhead","prefixClass","classNames","TextTooltip","children","text","header","appearance","popperProps"],"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./TextTooltip.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 = \"black\", // TODO v5 сменить по умолчанию на \"neutral\"\n  ...popperProps\n}: TextTooltipProps) => {\n  return (\n    <HoverPopper\n      vkuiClass={classNames(\"TextTooltip\", `TextTooltip--${appearance}`)}\n      arrow\n      arrowClassName={prefixClass(\"TextTooltip__arrow\")}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && (\n            <Subhead weight=\"2\" vkuiClass=\"TextTooltip__header\">\n              {header}\n            </Subhead>\n          )}\n          {hasReactNode(text) && (\n            <Subhead vkuiClass=\"TextTooltip__text\">{text}</Subhead>\n          )}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,OAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA;;AAkBA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAMH;EAAA,IALtBC,QAKsB,QALtBA,QAKsB;EAAA,IAJtBC,IAIsB,QAJtBA,IAIsB;EAAA,IAHtBC,MAGsB,QAHtBA,MAGsB;EAAA,2BAFtBC,UAEsB;EAAA,IAFtBA,UAEsB,gCAFT,OAES;EAAA,IADnBC,WACmB;;EACtB,OACE,oBAAC,WAAD;IACE,SAAS,EAAEN,UAAU,CAAC,aAAD,yBAAgCK,UAAhC,EADvB;IAEE,KAAK,MAFP;IAGE,cAAc,EAAEN,WAAW,CAAC,oBAAD,CAH7B;IAIE,OAAO,EACL,oBAAC,KAAD,CAAO,QAAP,QACGF,YAAY,CAACO,MAAD,CAAZ,IACC,oBAAC,OAAD;MAAS,MAAM,EAAC,GAAhB;MAAoB,SAAS,EAAC;IAA9B,GACGA,MADH,CAFJ,EAMGP,YAAY,CAACM,IAAD,CAAZ,IACC,oBAAC,OAAD;MAAS,SAAS,EAAC;IAAnB,GAAwCA,IAAxC,CAPJ;EALJ,GAgBMG,WAhBN,GAkBGJ,QAlBH,CADF;AAsBD,CA7BM"}
+{"version":3,"file":"TextTooltip.js","names":["React","HoverPopper","hasReactNode","Subhead","prefixClass","classNames","TextTooltip","children","text","header","appearance","popperProps"],"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./TextTooltip.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  ...popperProps\n}: TextTooltipProps) => {\n  return (\n    <HoverPopper\n      vkuiClass={classNames(\n        \"TextTooltip\",\n        `TextTooltip--appearance-${appearance}`\n      )}\n      arrow\n      arrowClassName={prefixClass(\"TextTooltip__arrow\")}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && (\n            <Subhead weight=\"2\" vkuiClass=\"TextTooltip__header\">\n              {header}\n            </Subhead>\n          )}\n          {hasReactNode(text) && (\n            <Subhead vkuiClass=\"TextTooltip__text\">{text}</Subhead>\n          )}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,OAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA;;AAkBA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAMH;EAAA,IALtBC,QAKsB,QALtBA,QAKsB;EAAA,IAJtBC,IAIsB,QAJtBA,IAIsB;EAAA,IAHtBC,MAGsB,QAHtBA,MAGsB;EAAA,2BAFtBC,UAEsB;EAAA,IAFtBA,UAEsB,gCAFT,SAES;EAAA,IADnBC,WACmB;;EACtB,OACE,oBAAC,WAAD;IACE,SAAS,EAAEN,UAAU,CACnB,aADmB,oCAEQK,UAFR,EADvB;IAKE,KAAK,MALP;IAME,cAAc,EAAEN,WAAW,CAAC,oBAAD,CAN7B;IAOE,OAAO,EACL,oBAAC,KAAD,CAAO,QAAP,QACGF,YAAY,CAACO,MAAD,CAAZ,IACC,oBAAC,OAAD;MAAS,MAAM,EAAC,GAAhB;MAAoB,SAAS,EAAC;IAA9B,GACGA,MADH,CAFJ,EAMGP,YAAY,CAACM,IAAD,CAAZ,IACC,oBAAC,OAAD;MAAS,SAAS,EAAC;IAAnB,GAAwCA,IAAxC,CAPJ;EARJ,GAmBMG,WAnBN,GAqBGJ,QArBH,CADF;AAyBD,CAhCM"}

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

@@ -1 +1 @@
-.vkuiTextarea{position:relative}.vkuiTextarea__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;box-sizing:border-box;color:#000;color:var(--text_primary,var(--vkui--color_text_primary));display:block;font-size:16px;font-size:var(--vkui--font_text--font_size--regular,16px);font-weight:400;font-weight:var(--vkui--font_text--font_weight--regular,400);line-height:20px;line-height:var(--vkui--font_text--line_height--regular,20px);margin:0;max-height:204px;padding:12px;position:relative;resize:none;width:100%;z-index:6}.vkuiTextarea__el[cols]{width:auto}.vkuiTextarea--sizeY-compact .vkuiTextarea__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact,15px);line-height:20px;line-height:var(--vkui--font_text--line_height--compact,20px);max-height:196px}.vkuiTextarea__el::-webkit-input-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiTextarea__el::-moz-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiTextarea__el::-ms-input-placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiTextarea__el::placeholder{color:#818c99;color:var(--field_text_placeholder,var(--vkui--color_text_secondary));opacity:1}.vkuiTextarea__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64)}.vkuiTextarea__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiTextarea__el:disabled::-moz-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiTextarea__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiTextarea__el:disabled::placeholder{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}
+.vkuiTextarea{position:relative}.vkuiTextarea__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;box-sizing:border-box;color:var(--vkui--color_text_primary);display:block;font-size:var(--vkui--font_text--font_size--regular);font-weight:var(--vkui--font_text--font_weight--regular);line-height:var(--vkui--font_text--line_height--regular);margin:0;max-height:204px;padding:12px;position:relative;resize:none;width:100%;z-index:6}.vkuiTextarea__el[cols]{width:auto}.vkuiTextarea--sizeY-compact .vkuiTextarea__el{font-size:var(--vkui--font_text--font_size--compact);line-height:var(--vkui--font_text--line_height--compact);max-height:196px}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiTextarea--sizeY-none .vkuiTextarea__el{font-size:15px;padding-bottom:7px;padding-top:7px}}.vkuiTextarea__el::-webkit-input-placeholder{color:var(--vkui--color_text_secondary);opacity:1}.vkuiTextarea__el::-moz-placeholder{color:var(--vkui--color_text_secondary);opacity:1}.vkuiTextarea__el::-ms-input-placeholder{color:var(--vkui--color_text_secondary);opacity:1}.vkuiTextarea__el::placeholder{color:var(--vkui--color_text_secondary);opacity:1}.vkuiTextarea__el:disabled{opacity:var(--vkui--opacity_disable_accessibility)}.vkuiTextarea__el:disabled::-webkit-input-placeholder{color:var(--vkui--color_text_secondary)}.vkuiTextarea__el:disabled::-moz-placeholder{color:var(--vkui--color_text_secondary)}.vkuiTextarea__el:disabled::-ms-input-placeholder{color:var(--vkui--color_text_secondary)}.vkuiTextarea__el:disabled::placeholder{color:var(--vkui--color_text_secondary)}

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

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { FormFieldProps } from "../FormField/FormField";
 import { HasRef, HasRootRef } from "../../types";
-import { AdaptivityProps } from "../../hoc/withAdaptivity";
 import "./Textarea.css";
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, HasRef<HTMLTextAreaElement>, HasRootRef<HTMLElement>, AdaptivityProps, Pick<React.CSSProperties, "maxHeight">, Pick<FormFieldProps, "status"> {
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, HasRef<HTMLTextAreaElement>, HasRootRef<HTMLElement>, Pick<React.CSSProperties, "maxHeight">, Pick<FormFieldProps, "status"> {
     grow?: boolean;
     onResize?(el: HTMLTextAreaElement): void;
     defaultValue?: string;
@@ -11,4 +10,4 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
 /**
  * @see https://vkcom.github.io/VKUI/#/Textarea
  */
-export declare const Textarea: React.FC<Pick<TextareaProps, "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "wrap" | "maxHeight" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "status" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "autoComplete" | "maxLength" | "minLength" | "readOnly" | "cols" | "dirName" | "rows" | "getRootRef" | "getRef" | "grow" | "onResize"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const Textarea: ({ defaultValue, grow, style, onResize, className, getRootRef, getRef, rows, maxHeight, status, ...restProps }: TextareaProps) => JSX.Element;

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

@@ -1,17 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["defaultValue", "grow", "style", "onResize", "className", "getRootRef", "getRef", "sizeY", "rows", "maxHeight", "status"];
+var _excluded = ["defaultValue", "grow", "style", "onResize", "className", "getRootRef", "getRef", "rows", "maxHeight", "status"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { FormField } from "../FormField/FormField";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
 import { useExternRef } from "../../hooks/useExternRef";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
 import "./Textarea.css";
 
-var TextareaComponent = function TextareaComponent(_ref) {
+/**
+ * @see https://vkcom.github.io/VKUI/#/Textarea
+ */
+export var Textarea = function Textarea(_ref) {
   var _ref$defaultValue = _ref.defaultValue,
       defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
       _ref$grow = _ref.grow,
@@ -21,7 +25,6 @@ var TextareaComponent = function TextareaComponent(_ref) {
       className = _ref.className,
       getRootRef = _ref.getRootRef,
       getRef = _ref.getRef,
-      sizeY = _ref.sizeY,
       _ref$rows = _ref.rows,
       rows = _ref$rows === void 0 ? 2 : _ref$rows,
       maxHeight = _ref.maxHeight,
@@ -36,7 +39,11 @@ var TextareaComponent = function TextareaComponent(_ref) {
       onChange = _useEnsuredControl2[1];
 
   var currentScrollHeight = React.useRef();
-  var elementRef = useExternRef(getRef); // autosize input
+  var elementRef = useExternRef(getRef);
+
+  var _useAdaptivity = useAdaptivity(),
+      sizeY = _useAdaptivity.sizeY; // autosize input
+
 
   React.useEffect(function () {
     var el = elementRef.current;
@@ -52,8 +59,7 @@ var TextareaComponent = function TextareaComponent(_ref) {
     }
   }, [grow, value, sizeY, elementRef, onResize]);
   return createScopedElement(FormField, {
-    vkuiClass: classNames("Textarea", // TODO. v5.0.0 Новая адаптивность
-    "Textarea--sizeY-".concat(sizeY)),
+    vkuiClass: classNames("Textarea", getSizeYClassName("Textarea", sizeY)),
     className: className,
     style: style,
     getRootRef: getRootRef,
@@ -70,13 +76,4 @@ var TextareaComponent = function TextareaComponent(_ref) {
     ref: elementRef
   })));
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/Textarea
- */
-
-
-export var Textarea = withAdaptivity(TextareaComponent, {
-  sizeY: true
-});
-Textarea.displayName = "Textarea";
 //# sourceMappingURL=Textarea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","classNames","FormField","withAdaptivity","useEnsuredControl","useExternRef","TextareaComponent","defaultValue","grow","style","onResize","className","getRootRef","getRef","sizeY","rows","maxHeight","status","restProps","value","onChange","currentScrollHeight","useRef","elementRef","useEffect","el","current","offsetParent","height","scrollHeight","disabled","Textarea","displayName"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport \"./Textarea.css\";\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    AdaptivityProps,\n    Pick<React.CSSProperties, \"maxHeight\">,\n    Pick<FormFieldProps, \"status\"> {\n  grow?: boolean;\n  onResize?(el: HTMLTextAreaElement): void;\n  defaultValue?: string;\n}\n\nconst TextareaComponent = ({\n  defaultValue = \"\",\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  sizeY,\n  rows = 2,\n  maxHeight,\n  status,\n  ...restProps\n}: TextareaProps) => {\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const currentScrollHeight = React.useRef<number>();\n  const elementRef = useExternRef(getRef);\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      vkuiClass={classNames(\n        \"Textarea\",\n        // TODO. v5.0.0 Новая адаптивность\n        `Textarea--sizeY-${sizeY}`\n      )}\n      className={className}\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        vkuiClass=\"Textarea__el\"\n        value={value}\n        onChange={onChange}\n        ref={elementRef}\n      />\n    </FormField>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = withAdaptivity(TextareaComponent, { sizeY: true });\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,SAAT;AAEA,SAASC,cAAT;AACA,SAASC,iBAAT;AACA,SAASC,YAAT;AACA;;AAcA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,OAaL;EAAA,6BAZnBC,YAYmB;EAAA,IAZnBA,YAYmB,kCAZJ,EAYI;EAAA,qBAXnBC,IAWmB;EAAA,IAXnBA,IAWmB,0BAXZ,IAWY;EAAA,IAVnBC,KAUmB,QAVnBA,KAUmB;EAAA,IATnBC,QASmB,QATnBA,QASmB;EAAA,IARnBC,SAQmB,QARnBA,SAQmB;EAAA,IAPnBC,UAOmB,QAPnBA,UAOmB;EAAA,IANnBC,MAMmB,QANnBA,MAMmB;EAAA,IALnBC,KAKmB,QALnBA,KAKmB;EAAA,qBAJnBC,IAImB;EAAA,IAJnBA,IAImB,0BAJZ,CAIY;EAAA,IAHnBC,SAGmB,QAHnBA,SAGmB;EAAA,IAFnBC,MAEmB,QAFnBA,MAEmB;EAAA,IADhBC,SACgB;;EACnB,yBAA0Bd,iBAAiB,CAACc,SAAD,EAAY;IAAEX,YAAY,EAAZA;EAAF,CAAZ,CAA3C;EAAA;EAAA,IAAOY,KAAP;EAAA,IAAcC,QAAd;;EACA,IAAMC,mBAAmB,GAAGrB,KAAK,CAACsB,MAAN,EAA5B;EACA,IAAMC,UAAU,GAAGlB,YAAY,CAACQ,MAAD,CAA/B,CAHmB,CAKnB;;EACAb,KAAK,CAACwB,SAAN,CAAgB,YAAM;IACpB,IAAMC,EAAE,GAAGF,UAAU,CAACG,OAAtB;;IAEA,IAAIlB,IAAI,IAAIiB,EAAJ,aAAIA,EAAJ,eAAIA,EAAE,CAAEE,YAAhB,EAA8B;MAC5BF,EAAE,CAAChB,KAAH,CAASmB,MAAT,GAAkB,EAAlB;MACAH,EAAE,CAAChB,KAAH,CAASmB,MAAT,aAAqBH,EAAE,CAACI,YAAxB;;MAEA,IAAIJ,EAAE,CAACI,YAAH,KAAoBR,mBAAmB,CAACK,OAAxC,IAAmDhB,QAAvD,EAAiE;QAC/DA,QAAQ,CAACe,EAAD,CAAR;QACAJ,mBAAmB,CAACK,OAApB,GAA8BD,EAAE,CAACI,YAAjC;MACD;IACF;EACF,CAZD,EAYG,CAACrB,IAAD,EAAOW,KAAP,EAAcL,KAAd,EAAqBS,UAArB,EAAiCb,QAAjC,CAZH;EAcA,OACE,oBAAC,SAAD;IACE,SAAS,EAAET,UAAU,CACnB,UADmB,EAEnB;IAFmB,0BAGAa,KAHA,EADvB;IAME,SAAS,EAAEH,SANb;IAOE,KAAK,EAAEF,KAPT;IAQE,UAAU,EAAEG,UARd;IASE,QAAQ,EAAEM,SAAS,CAACY,QATtB;IAUE,MAAM,EAAEb;EAVV,GAYE,6CACMC,SADN;IAEE,KAAK,EAAE;MAAEF,SAAS,EAATA;IAAF,CAFT;IAGE,IAAI,EAAED,IAHR;IAIE,SAAS,EAAC,cAJZ;IAKE,KAAK,EAAEI,KALT;IAME,QAAQ,EAAEC,QANZ;IAOE,GAAG,EAAEG;EAPP,GAZF,CADF;AAwBD,CAzDD;AA2DA;AACA;AACA;;;AACA,OAAO,IAAMQ,QAAQ,GAAG5B,cAAc,CAACG,iBAAD,EAAoB;EAAEQ,KAAK,EAAE;AAAT,CAApB,CAA/B;AAEPiB,QAAQ,CAACC,WAAT,GAAuB,UAAvB"}
+{"version":3,"file":"Textarea.js","names":["React","classNames","FormField","useEnsuredControl","useExternRef","useAdaptivity","getSizeYClassName","Textarea","defaultValue","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","restProps","value","onChange","currentScrollHeight","useRef","elementRef","sizeY","useEffect","el","current","offsetParent","height","scrollHeight","disabled"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport \"./Textarea.css\";\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  ...restProps\n}: TextareaProps) => {\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const currentScrollHeight = React.useRef<number>();\n  const elementRef = useExternRef(getRef);\n  const { sizeY } = 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      vkuiClass={classNames(\"Textarea\", getSizeYClassName(\"Textarea\", sizeY))}\n      className={className}\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        vkuiClass=\"Textarea__el\"\n        value={value}\n        onChange={onChange}\n        ref={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,SAAT;AAEA,SAASC,iBAAT;AACA,SAASC,YAAT;AACA,SAASC,aAAT;AACA,SAASC,iBAAT;AACA;;AAaA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAYH;EAAA,6BAXnBC,YAWmB;EAAA,IAXnBA,YAWmB,kCAXJ,EAWI;EAAA,qBAVnBC,IAUmB;EAAA,IAVnBA,IAUmB,0BAVZ,IAUY;EAAA,IATnBC,KASmB,QATnBA,KASmB;EAAA,IARnBC,QAQmB,QARnBA,QAQmB;EAAA,IAPnBC,SAOmB,QAPnBA,SAOmB;EAAA,IANnBC,UAMmB,QANnBA,UAMmB;EAAA,IALnBC,MAKmB,QALnBA,MAKmB;EAAA,qBAJnBC,IAImB;EAAA,IAJnBA,IAImB,0BAJZ,CAIY;EAAA,IAHnBC,SAGmB,QAHnBA,SAGmB;EAAA,IAFnBC,MAEmB,QAFnBA,MAEmB;EAAA,IADhBC,SACgB;;EACnB,yBAA0Bf,iBAAiB,CAACe,SAAD,EAAY;IAAEV,YAAY,EAAZA;EAAF,CAAZ,CAA3C;EAAA;EAAA,IAAOW,KAAP;EAAA,IAAcC,QAAd;;EACA,IAAMC,mBAAmB,GAAGrB,KAAK,CAACsB,MAAN,EAA5B;EACA,IAAMC,UAAU,GAAGnB,YAAY,CAACU,MAAD,CAA/B;;EACA,qBAAkBT,aAAa,EAA/B;EAAA,IAAQmB,KAAR,kBAAQA,KAAR,CAJmB,CAMnB;;;EACAxB,KAAK,CAACyB,SAAN,CAAgB,YAAM;IACpB,IAAMC,EAAE,GAAGH,UAAU,CAACI,OAAtB;;IAEA,IAAIlB,IAAI,IAAIiB,EAAJ,aAAIA,EAAJ,eAAIA,EAAE,CAAEE,YAAhB,EAA8B;MAC5BF,EAAE,CAAChB,KAAH,CAASmB,MAAT,GAAkB,EAAlB;MACAH,EAAE,CAAChB,KAAH,CAASmB,MAAT,aAAqBH,EAAE,CAACI,YAAxB;;MAEA,IAAIJ,EAAE,CAACI,YAAH,KAAoBT,mBAAmB,CAACM,OAAxC,IAAmDhB,QAAvD,EAAiE;QAC/DA,QAAQ,CAACe,EAAD,CAAR;QACAL,mBAAmB,CAACM,OAApB,GAA8BD,EAAE,CAACI,YAAjC;MACD;IACF;EACF,CAZD,EAYG,CAACrB,IAAD,EAAOU,KAAP,EAAcK,KAAd,EAAqBD,UAArB,EAAiCZ,QAAjC,CAZH;EAcA,OACE,oBAAC,SAAD;IACE,SAAS,EAAEV,UAAU,CAAC,UAAD,EAAaK,iBAAiB,CAAC,UAAD,EAAakB,KAAb,CAA9B,CADvB;IAEE,SAAS,EAAEZ,SAFb;IAGE,KAAK,EAAEF,KAHT;IAIE,UAAU,EAAEG,UAJd;IAKE,QAAQ,EAAEK,SAAS,CAACa,QALtB;IAME,MAAM,EAAEd;EANV,GAQE,6CACMC,SADN;IAEE,KAAK,EAAE;MAAEF,SAAS,EAATA;IAAF,CAFT;IAGE,IAAI,EAAED,IAHR;IAIE,SAAS,EAAC,cAJZ;IAKE,KAAK,EAAEI,KALT;IAME,QAAQ,EAAEC,QANZ;IAOE,GAAG,EAAEG;EAPP,GARF,CADF;AAoBD,CArDM"}

package/dist/cssm/components/Tooltip/Tooltip.css

@@ -1 +1 @@
-.vkuiTooltip{height:100%;left:0;top:0;white-space:normal;width:100%;z-index:2}.vkuiTooltip,.vkuiTooltip__container{position:absolute}.vkuiTooltip__content{background-color:#fff;background-color:var(--vkui--color_background_modal,#fff);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08));color:#000;color:var(--vkui--color_text_primary,#000);max-width:220px;padding:9px 12px 10px}.vkuiTooltip__arrow{color:#fff;color:var(--vkui--color_background_modal,#fff)}.vkuiTooltip--accent .vkuiTooltip__content{background-color:#5a9eff;background-color:var(--vkui--color_background_accent_tint,#5a9eff);color:#fff;color:var(--vkui--color_text_contrast,#fff)}.vkuiTooltip--accent .vkuiTooltip__arrow{color:#5a9eff;color:var(--vkui--color_background_accent_tint,#5a9eff)}.vkuiTooltip--white .vkuiTooltip__content{background-color:#fff;background-color:var(--vkui--color_background_contrast,#fff);color:#000;color:var(--vkui--color_text_primary_invariably,#000)}.vkuiTooltip--white .vkuiTooltip__arrow{color:#fff;color:var(--vkui--color_background_contrast,#fff)}.vkuiTooltip--black .vkuiTooltip__content{background-color:#2d2d2e;background-color:var(--vkui--color_background_contrast_inverse,#2d2d2e);color:#fff;color:var(--vkui--color_text_contrast,#fff)}.vkuiTooltip--black .vkuiTooltip__arrow{color:#2d2d2e;color:var(--vkui--color_background_contrast_inverse,#2d2d2e)}.vkuiTooltip--inversion .vkuiTooltip__content{background-color:#2d2d2e;background-color:var(--vkui--color_background_modal_inverse,#2d2d2e);color:#fff;color:var(--vkui--color_text_contrast_themed,#fff)}.vkuiTooltip--inversion .vkuiTooltip__arrow{color:#2d2d2e;color:var(--vkui--color_background_modal_inverse,#2d2d2e)}
+.vkuiTooltip{height:100%;left:0;top:0;white-space:normal;width:100%;z-index:2}.vkuiTooltip,.vkuiTooltip__container{position:absolute}.vkuiTooltip__content{background-color:var(--vkui--color_background_modal);border-radius:var(--vkui--size_border_radius--regular);box-shadow:var(--vkui--elevation3);color:var(--vkui--color_text_primary);max-width:220px;padding:9px 12px 10px}.vkuiTooltip__arrow{color:var(--vkui--color_background_modal)}.vkuiTooltip--appearance-accent .vkuiTooltip__content{background-color:var(--vkui--color_background_accent_tint);color:var(--vkui--color_text_contrast)}.vkuiTooltip--appearance-accent .vkuiTooltip__arrow{color:var(--vkui--color_background_accent_tint)}.vkuiTooltip--appearance-white .vkuiTooltip__content{background-color:var(--vkui--color_background_contrast);color:var(--vkui--color_text_primary_invariably)}.vkuiTooltip--appearance-white .vkuiTooltip__arrow{color:var(--vkui--color_background_contrast)}.vkuiTooltip--appearance-black .vkuiTooltip__content{background-color:var(--vkui--color_background_contrast_inverse);color:var(--vkui--color_text_contrast)}.vkuiTooltip--appearance-black .vkuiTooltip__arrow{color:var(--vkui--color_background_contrast_inverse)}.vkuiTooltip--appearance-inversion .vkuiTooltip__content{background-color:var(--vkui--color_background_modal_inverse);color:var(--vkui--color_text_contrast_themed)}.vkuiTooltip--appearance-inversion .vkuiTooltip__arrow{color:var(--vkui--color_background_modal_inverse)}

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

@@ -8,12 +8,7 @@ export interface TooltipProps {
      * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,
      * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.
      */
-    children: React.ReactElement<HasRootRef<any>> | React.ReactElement<React.PropsWithRef<any>>;
-    /**
-     * @deprecated будет удалено в 5.0.0, устанавливать стиль следует через appearance
-     * Стиль отображения подсказки
-     */
-    mode?: "accent" | "light";
+    children: React.ReactElement<HasRootRef<any>> | React.ReactElement;
     /**
      * Стиль отображения подсказки
      */
@@ -72,4 +67,4 @@ export interface TooltipProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export declare const Tooltip: ({ children, isShown: _isShown, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, mode, appearance, arrow, placement, ...restProps }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, isShown: _isShown, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, appearance, arrow, placement, ...restProps }: TooltipProps) => JSX.Element;