@vkontakte/vkui 4.34.0 → 4.35.0

package/dist/cssm/components/TabsItem/TabsItem.js

@@ -1,52 +1,71 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "selected", "after"];
+var _excluded = ["before", "children", "status", "after", "selected"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { Tappable } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
-import { VKCOM } from "../../lib/platform";
+import { IOS, VKCOM } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
-import { hasReactNode } from "../../lib/utils";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { TabsModeContext } from "../Tabs/Tabs";
 import { Headline } from "../Typography/Headline/Headline";
 import { Subhead } from "../Typography/Subhead/Subhead";
-import { Text } from "../Typography/Text/Text";
 import "./TabsItem.css";
 
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */
 export var TabsItem = function TabsItem(_ref) {
-  var children = _ref.children,
+  var before = _ref.before,
+      children = _ref.children,
+      status = _ref.status,
+      after = _ref.after,
       _ref$selected = _ref.selected,
       selected = _ref$selected === void 0 ? false : _ref$selected,
-      after = _ref.after,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var platform = usePlatform();
-  var mode = React.useContext(TabsModeContext);
-  var ItemTypography = mode === "buttons" || mode === "segmented" ? Subhead : Headline;
 
-  if (platform === VKCOM) {
-    ItemTypography = Text;
+  var _useAdaptivity = useAdaptivity(),
+      sizeY = _useAdaptivity.sizeY;
+
+  var _React$useContext = React.useContext(TabsModeContext),
+      mode = _React$useContext.mode,
+      withGaps = _React$useContext.withGaps;
+
+  var statusComponent = null;
+
+  if (status) {
+    statusComponent = typeof status === "number" ? createScopedElement(Subhead, {
+      Component: "span",
+      vkuiClass: "TabsItem__status TabsItem__status--count",
+      weight: "2"
+    }, status) : createScopedElement("span", {
+      vkuiClass: "TabsItem__status"
+    }, status);
   }
 
   return createScopedElement(Tappable, _extends({}, restProps, {
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: classNames(getClassName("TabsItem", platform), {
-      "TabsItem--selected": selected
-    }),
-    hasActive: mode === "segmented",
+    vkuiClass: classNames("TabsItem", (platform === IOS || platform === VKCOM) && "TabsItem--".concat(platform), mode && "TabsItem--".concat(mode), selected && "TabsItem--selected", // TODO v5.0.0 новая адаптивность
+    sizeY && "TabsItem--sizeY-".concat(sizeY), withGaps && "TabsItem--withGaps"),
+    hoverMode: "TabsItem--hover",
     activeMode: "TabsItem--active",
-    focusVisibleMode: mode === "segmented" ? "outside" : "inside"
-  }), createScopedElement(ItemTypography, {
+    focusVisibleMode: mode === "segmented" ? "outside" : "inside",
+    hasActive: mode === "segmented"
+  }), before && createScopedElement("div", {
+    vkuiClass: "TabsItem__before"
+  }, before), createScopedElement(Headline, {
     Component: "span",
-    vkuiClass: "TabsItem__in",
+    vkuiClass: "TabsItem__label",
+    level: mode === "default" ? "1" : "2",
     weight: "2"
-  }, children), hasReactNode(after) && createScopedElement("div", {
+  }, children), statusComponent, after && createScopedElement("div", {
     vkuiClass: "TabsItem__after"
-  }, after));
+  }, after), mode === "default" && createScopedElement("div", {
+    vkuiClass: "TabsItem__underline",
+    "aria-hidden": true,
+    "data-selected": selected
+  }));
 };
 //# sourceMappingURL=TabsItem.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"names":["React","getClassName","Tappable","classNames","VKCOM","usePlatform","hasReactNode","TabsModeContext","Headline","Subhead","Text","TabsItem","children","selected","after","restProps","platform","mode","useContext","ItemTypography"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,QAAT;AACA,SAASC,UAAT;AACA,SAASC,KAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAAoBC,eAApB;AACA,SAASC,QAAT;AACA,SAASC,OAAT;AACA,SAASC,IAAT;AACA;;AAOA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAKH;AAAA,MAJnBC,QAImB,QAJnBA,QAImB;AAAA,2BAHnBC,QAGmB;AAAA,MAHnBA,QAGmB,8BAHR,KAGQ;AAAA,MAFnBC,KAEmB,QAFnBA,KAEmB;AAAA,MADhBC,SACgB;;AACnB,MAAMC,QAAQ,GAAGX,WAAW,EAA5B;AACA,MAAMY,IAAuB,GAAGjB,KAAK,CAACkB,UAAN,CAAiBX,eAAjB,CAAhC;AAEA,MAAIY,cAAc,GAChBF,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,WAA/B,GAA6CR,OAA7C,GAAuDD,QADzD;;AAGA,MAAIQ,QAAQ,KAAKZ,KAAjB,EAAwB;AACtBe,IAAAA,cAAc,GAAGT,IAAjB;AACD;;AAED,SACE,oBAAC,QAAD,eACMK,SADN;AAEE;AACA,IAAA,SAAS,EAAEZ,UAAU,CAACF,YAAY,CAAC,UAAD,EAAae,QAAb,CAAb,EAAqC;AACxD,4BAAsBH;AADkC,KAArC,CAHvB;AAME,IAAA,SAAS,EAAEI,IAAI,KAAK,WANtB;AAOE,IAAA,UAAU,EAAC,kBAPb;AAQE,IAAA,gBAAgB,EAAEA,IAAI,KAAK,WAAT,GAAuB,SAAvB,GAAmC;AARvD,MAUE,oBAAC,cAAD;AAAgB,IAAA,SAAS,EAAC,MAA1B;AAAiC,IAAA,SAAS,EAAC,cAA3C;AAA0D,IAAA,MAAM,EAAC;AAAjE,KACGL,QADH,CAVF,EAaGN,YAAY,CAACQ,KAAD,CAAZ,IAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CAb1B,CADF;AAiBD,CAjCM","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { VKCOM } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { TabsProps, TabsModeContext } from \"../Tabs/Tabs\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Text } from \"../Typography/Text/Text\";\nimport \"./TabsItem.css\";\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  after?: React.ReactNode;\n  selected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  children,\n  selected = false,\n  after,\n  ...restProps\n}: TabsItemProps) => {\n  const platform = usePlatform();\n  const mode: TabsProps[\"mode\"] = React.useContext(TabsModeContext);\n\n  let ItemTypography =\n    mode === \"buttons\" || mode === \"segmented\" ? Subhead : Headline;\n\n  if (platform === VKCOM) {\n    ItemTypography = Text;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(getClassName(\"TabsItem\", platform), {\n        \"TabsItem--selected\": selected,\n      })}\n      hasActive={mode === \"segmented\"}\n      activeMode=\"TabsItem--active\"\n      focusVisibleMode={mode === \"segmented\" ? \"outside\" : \"inside\"}\n    >\n      <ItemTypography Component=\"span\" vkuiClass=\"TabsItem__in\" weight=\"2\">\n        {children}\n      </ItemTypography>\n      {hasReactNode(after) && <div vkuiClass=\"TabsItem__after\">{after}</div>}\n    </Tappable>\n  );\n};\n"],"file":"TabsItem.js"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"names":["React","Tappable","classNames","IOS","VKCOM","usePlatform","useAdaptivity","TabsModeContext","Headline","Subhead","TabsItem","before","children","status","after","selected","restProps","platform","sizeY","useContext","mode","withGaps","statusComponent"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT;AACA,SAASC,UAAT;AACA,SAASC,GAAT,EAAcC,KAAd;AACA,SAASC,WAAT;AACA,SAASC,aAAT;AACA,SAASC,eAAT;AACA,SAASC,QAAT;AACA,SAASC,OAAT;AACA;;AA4BA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAOH;AAAA,MANnBC,MAMmB,QANnBA,MAMmB;AAAA,MALnBC,QAKmB,QALnBA,QAKmB;AAAA,MAJnBC,MAImB,QAJnBA,MAImB;AAAA,MAHnBC,KAGmB,QAHnBA,KAGmB;AAAA,2BAFnBC,QAEmB;AAAA,MAFnBA,QAEmB,8BAFR,KAEQ;AAAA,MADhBC,SACgB;;AACnB,MAAMC,QAAQ,GAAGZ,WAAW,EAA5B;;AACA,uBAAkBC,aAAa,EAA/B;AAAA,MAAQY,KAAR,kBAAQA,KAAR;;AACA,0BACElB,KAAK,CAACmB,UAAN,CAAiBZ,eAAjB,CADF;AAAA,MAAQa,IAAR,qBAAQA,IAAR;AAAA,MAAcC,QAAd,qBAAcA,QAAd;;AAEA,MAAIC,eAAe,GAAG,IAAtB;;AAEA,MAAIT,MAAJ,EAAY;AACVS,IAAAA,eAAe,GACb,OAAOT,MAAP,KAAkB,QAAlB,GACE,oBAAC,OAAD;AACE,MAAA,SAAS,EAAC,MADZ;AAEE,MAAA,SAAS,EAAC,0CAFZ;AAGE,MAAA,MAAM,EAAC;AAHT,OAKGA,MALH,CADF,GASE;AAAM,MAAA,SAAS,EAAC;AAAhB,OAAoCA,MAApC,CAVJ;AAYD;;AAED,SACE,oBAAC,QAAD,eACMG,SADN;AAEE,IAAA,SAAS,EAAEd,UAAU,CACnB,UADmB,EAEnB,CAACe,QAAQ,KAAKd,GAAb,IAAoBc,QAAQ,KAAKb,KAAlC,yBAAyDa,QAAzD,CAFmB,EAGnBG,IAAI,wBAAiBA,IAAjB,CAHe,EAInBL,QAAQ,IAAI,oBAJO,EAKnB;AACAG,IAAAA,KAAK,8BAAuBA,KAAvB,CANc,EAOnBG,QAAQ,IAAI,oBAPO,CAFvB;AAWE,IAAA,SAAS,EAAC,iBAXZ;AAYE,IAAA,UAAU,EAAC,kBAZb;AAaE,IAAA,gBAAgB,EAAED,IAAI,KAAK,WAAT,GAAuB,SAAvB,GAAmC,QAbvD;AAcE,IAAA,SAAS,EAAEA,IAAI,KAAK;AAdtB,MAgBGT,MAAM,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAmCA,MAAnC,CAhBb,EAiBE,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,SAAS,EAAC,iBAFZ;AAGE,IAAA,KAAK,EAAES,IAAI,KAAK,SAAT,GAAqB,GAArB,GAA2B,GAHpC;AAIE,IAAA,MAAM,EAAC;AAJT,KAMGR,QANH,CAjBF,EAyBGU,eAzBH,EA0BGR,KAAK,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CA1BZ,EA2BGM,IAAI,KAAK,SAAT,IACC;AACE,IAAA,SAAS,EAAC,qBADZ;AAEE,uBAFF;AAGE,qBAAeL;AAHjB,IA5BJ,CADF;AAqCD,CAlEM","sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TabsModeContext, TabsContextProps } from \"../Tabs/Tabs\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport \"./TabsItem.css\";\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  ...restProps\n}: TabsItemProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps =\n    React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  if (status) {\n    statusComponent =\n      typeof status === \"number\" ? (\n        <Subhead\n          Component=\"span\"\n          vkuiClass=\"TabsItem__status TabsItem__status--count\"\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span vkuiClass=\"TabsItem__status\">{status}</span>\n      );\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={classNames(\n        \"TabsItem\",\n        (platform === IOS || platform === VKCOM) && `TabsItem--${platform}`,\n        mode && `TabsItem--${mode}`,\n        selected && \"TabsItem--selected\",\n        // TODO v5.0.0 новая адаптивность\n        sizeY && `TabsItem--sizeY-${sizeY}`,\n        withGaps && \"TabsItem--withGaps\"\n      )}\n      hoverMode=\"TabsItem--hover\"\n      activeMode=\"TabsItem--active\"\n      focusVisibleMode={mode === \"segmented\" ? \"outside\" : \"inside\"}\n      hasActive={mode === \"segmented\"}\n    >\n      {before && <div vkuiClass=\"TabsItem__before\">{before}</div>}\n      <Headline\n        Component=\"span\"\n        vkuiClass=\"TabsItem__label\"\n        level={mode === \"default\" ? \"1\" : \"2\"}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div vkuiClass=\"TabsItem__after\">{after}</div>}\n      {mode === \"default\" && (\n        <div\n          vkuiClass=\"TabsItem__underline\"\n          aria-hidden\n          data-selected={selected}\n        />\n      )}\n    </Tappable>\n  );\n};\n"],"file":"TabsItem.js"}

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

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

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

@@ -42,4 +42,4 @@ export declare const ACTIVE_EFFECT_DELAY = 600;
 /**
  * @see https://vkcom.github.io/VKUI/#/Tappable
  */
-export declare const Tappable: React.ComponentType<Pick<TappableProps, "max" | "required" | "high" | "low" | "disabled" | "default" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "color" | "content" | "size" | "wrap" | "multiple" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "href" | "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" | "onMouseDownCapture" | "onMouseEnter" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "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" | "list" | "classID" | "useMap" | "wmode" | "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" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "srcLang" | "value" | "download" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster" | "challenge" | "keyType" | "keyParams" | "onStart" | "onMove" | "onLeave" | "onEnter" | "onEnd" | "Component" | "getRootRef" | "stopPropagation" | "activeEffectDelay" | "hasHover" | "hoverMode" | "hasActive" | "activeMode" | "focusVisibleMode"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const Tappable: React.FC<Pick<TappableProps, "max" | "required" | "high" | "low" | "disabled" | "default" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "color" | "content" | "size" | "wrap" | "multiple" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "href" | "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" | "onMouseDownCapture" | "onMouseEnter" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "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" | "list" | "classID" | "useMap" | "wmode" | "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" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "srcLang" | "value" | "download" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster" | "challenge" | "keyType" | "keyParams" | "onStart" | "onMove" | "onLeave" | "onEnter" | "onEnd" | "Component" | "getRootRef" | "stopPropagation" | "activeEffectDelay" | "hasHover" | "hoverMode" | "hasActive" | "activeMode" | "focusVisibleMode"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;

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

@@ -1 +1 @@
-.vkuiTextTooltip{border-radius:8px;background:rgba(44,45,46,.88);padding:8px 12px 9px;color:#fff;color:var(--white);box-shadow:0 0 4px rgba(0,0,0,.04),0 4px 32px rgba(0,0,0,.16);-webkit-animation:vkui-popper-fadein .2s ease;animation:vkui-popper-fadein .2s ease}.vkuiTextTooltip__arrow{color:rgba(44,45,46,.88)}
+.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)}

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

@@ -10,8 +10,12 @@ export interface TextTooltipProps extends Omit<HoverPopperProps, "arrow" | "arro
      * Заголовок тултипа
      */
     header?: React.ReactNode;
+    /**
+     * Стиль отображения подсказки
+     */
+    appearance?: "accent" | "neutral" | "white" | "black" | "inversion";
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/TextTooltip
  */
-export declare const TextTooltip: ({ children, text, header, ...popperProps }: TextTooltipProps) => JSX.Element;
+export declare const TextTooltip: ({ children, text, header, appearance, ...popperProps }: TextTooltipProps) => JSX.Element;

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

@@ -1,14 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "text", "header"];
+var _excluded = ["children", "text", "header", "appearance"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { HoverPopper } from "../HoverPopper/HoverPopper";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { prefixClass } from "../../lib/prefixClass";
+import { classNames } from "../../lib/classNames";
 import "./TextTooltip.css";
 
 /**
@@ -18,19 +17,18 @@ export var TextTooltip = function TextTooltip(_ref) {
   var children = _ref.children,
       text = _ref.text,
       header = _ref.header,
+      _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? "black" : _ref$appearance,
       popperProps = _objectWithoutProperties(_ref, _excluded);
 
-  var platform = usePlatform();
   return createScopedElement(HoverPopper, _extends({
-    vkuiClass: getClassName("TextTooltip", platform),
+    vkuiClass: classNames("TextTooltip", "TextTooltip--".concat(appearance)),
     arrow: true,
     arrowClassName: prefixClass("TextTooltip__arrow"),
     content: createScopedElement(React.Fragment, null, hasReactNode(header) && createScopedElement(Subhead, {
-      Component: "span",
       weight: "2",
       vkuiClass: "TextTooltip__header"
     }, header), hasReactNode(text) && createScopedElement(Subhead, {
-      Component: "span",
       vkuiClass: "TextTooltip__text"
     }, text))
   }, popperProps), children);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"names":["React","HoverPopper","getClassName","usePlatform","hasReactNode","Subhead","prefixClass","TextTooltip","children","text","header","popperProps","platform"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,OAAT;AACA,SAASC,WAAT;AACA;;AAcA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAKH;AAAA,MAJtBC,QAIsB,QAJtBA,QAIsB;AAAA,MAHtBC,IAGsB,QAHtBA,IAGsB;AAAA,MAFtBC,MAEsB,QAFtBA,MAEsB;AAAA,MADnBC,WACmB;;AACtB,MAAMC,QAAQ,GAAGT,WAAW,EAA5B;AAEA,SACE,oBAAC,WAAD;AACE,IAAA,SAAS,EAAED,YAAY,CAAC,aAAD,EAAgBU,QAAhB,CADzB;AAEE,IAAA,KAAK,MAFP;AAGE,IAAA,cAAc,EAAEN,WAAW,CAAC,oBAAD,CAH7B;AAIE,IAAA,OAAO,EACL,oBAAC,KAAD,CAAO,QAAP,QACGF,YAAY,CAACM,MAAD,CAAZ,IACC,oBAAC,OAAD;AACE,MAAA,SAAS,EAAC,MADZ;AAEE,MAAA,MAAM,EAAC,GAFT;AAGE,MAAA,SAAS,EAAC;AAHZ,OAKGA,MALH,CAFJ,EAUGN,YAAY,CAACK,IAAD,CAAZ,IACC,oBAAC,OAAD;AAAS,MAAA,SAAS,EAAC,MAAnB;AAA0B,MAAA,SAAS,EAAC;AAApC,OACGA,IADH,CAXJ;AALJ,KAsBME,WAtBN,GAwBGH,QAxBH,CADF;AA4BD,CApCM","sourcesContent":["import * as React from \"react\";\nimport { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { prefixClass } from \"../../lib/prefixClass\";\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 * @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n  children,\n  text,\n  header,\n  ...popperProps\n}: TextTooltipProps) => {\n  const platform = usePlatform();\n\n  return (\n    <HoverPopper\n      vkuiClass={getClassName(\"TextTooltip\", platform)}\n      arrow\n      arrowClassName={prefixClass(\"TextTooltip__arrow\")}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && (\n            <Subhead\n              Component=\"span\"\n              weight=\"2\"\n              vkuiClass=\"TextTooltip__header\"\n            >\n              {header}\n            </Subhead>\n          )}\n          {hasReactNode(text) && (\n            <Subhead Component=\"span\" vkuiClass=\"TextTooltip__text\">\n              {text}\n            </Subhead>\n          )}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"file":"TextTooltip.js"}
+{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"names":["React","HoverPopper","hasReactNode","Subhead","prefixClass","classNames","TextTooltip","children","text","header","appearance","popperProps"],"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;AAAA,MALtBC,QAKsB,QALtBA,QAKsB;AAAA,MAJtBC,IAIsB,QAJtBA,IAIsB;AAAA,MAHtBC,MAGsB,QAHtBA,MAGsB;AAAA,6BAFtBC,UAEsB;AAAA,MAFtBA,UAEsB,gCAFT,OAES;AAAA,MADnBC,WACmB;;AACtB,SACE,oBAAC,WAAD;AACE,IAAA,SAAS,EAAEN,UAAU,CAAC,aAAD,yBAAgCK,UAAhC,EADvB;AAEE,IAAA,KAAK,MAFP;AAGE,IAAA,cAAc,EAAEN,WAAW,CAAC,oBAAD,CAH7B;AAIE,IAAA,OAAO,EACL,oBAAC,KAAD,CAAO,QAAP,QACGF,YAAY,CAACO,MAAD,CAAZ,IACC,oBAAC,OAAD;AAAS,MAAA,MAAM,EAAC,GAAhB;AAAoB,MAAA,SAAS,EAAC;AAA9B,OACGA,MADH,CAFJ,EAMGP,YAAY,CAACM,IAAD,CAAZ,IACC,oBAAC,OAAD;AAAS,MAAA,SAAS,EAAC;AAAnB,OAAwCA,IAAxC,CAPJ;AALJ,KAgBMG,WAhBN,GAkBGJ,QAlBH,CADF;AAsBD,CA7BM","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"],"file":"TextTooltip.js"}

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

@@ -1 +1 @@
-.vkuiTextarea{position:relative}.vkuiTextarea__el{margin:0;width:100%;display:block;box-sizing:border-box;resize:none;-webkit-appearance:none;appearance:none;line-height:20px;font-size:16px;color:#000;color:var(--text_primary, var(--vkui--color_text_primary));padding:12px;max-height:204px;border:0;z-index:2;position:relative;background:0 0}.vkuiTextarea__el[cols]{width:initial}.vkuiTextarea--sizeY-compact .vkuiTextarea__el{font-size:15px;max-height:196px}.vkuiTextarea__el::-webkit-input-placeholder{color:#818c99;color:var(--field_text_placeholder, var(--vkui--color_text_secondary))}.vkuiTextarea__el::placeholder{color:#818c99;color:var(--field_text_placeholder, var(--vkui--color_text_secondary))}.vkuiTextarea__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,0.64)}.vkuiTextarea__el:disabled::-webkit-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:#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:2}.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))}

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

@@ -7,4 +7,7 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     onResize?(el: HTMLTextAreaElement): void;
     defaultValue?: string;
 }
-export declare const Textarea: React.ComponentType<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" | "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>;
+/**
+ * @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" | "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>;

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

@@ -11,9 +11,6 @@ import { useEnsuredControl } from "../../hooks/useEnsuredControl";
 import { useExternRef } from "../../hooks/useExternRef";
 import "./Textarea.css";
 
-/**
- * @see https://vkcom.github.io/VKUI/#/Textarea
- */
 var TextareaComponent = function TextareaComponent(_ref) {
   var _ref$defaultValue = _ref.defaultValue,
       defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
@@ -70,10 +67,14 @@ var TextareaComponent = function TextareaComponent(_ref) {
     onChange: onChange,
     ref: elementRef
   })));
-}; // eslint-disable-next-line import/no-default-export
+};
+/**
+ * @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,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":["React","classNames","FormField","withAdaptivity","useEnsuredControl","useExternRef","TextareaComponent","defaultValue","grow","style","onResize","className","getRootRef","getRef","sizeY","rows","maxHeight","restProps","value","onChange","currentScrollHeight","useRef","elementRef","useEffect","el","current","offsetParent","height","scrollHeight","disabled","Textarea"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,SAAT;AAEA,SAASC,cAAT;AACA,SAASC,iBAAT;AACA,SAASC,YAAT;AACA;;AAaA;AACA;AACA;AACA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,OAYL;AAAA,+BAXnBC,YAWmB;AAAA,MAXnBA,YAWmB,kCAXJ,EAWI;AAAA,uBAVnBC,IAUmB;AAAA,MAVnBA,IAUmB,0BAVZ,IAUY;AAAA,MATnBC,KASmB,QATnBA,KASmB;AAAA,MARnBC,QAQmB,QARnBA,QAQmB;AAAA,MAPnBC,SAOmB,QAPnBA,SAOmB;AAAA,MANnBC,UAMmB,QANnBA,UAMmB;AAAA,MALnBC,MAKmB,QALnBA,MAKmB;AAAA,MAJnBC,KAImB,QAJnBA,KAImB;AAAA,uBAHnBC,IAGmB;AAAA,MAHnBA,IAGmB,0BAHZ,CAGY;AAAA,MAFnBC,SAEmB,QAFnBA,SAEmB;AAAA,MADhBC,SACgB;;AACnB,2BAA0Bb,iBAAiB,CAACa,SAAD,EAAY;AAAEV,IAAAA,YAAY,EAAZA;AAAF,GAAZ,CAA3C;AAAA;AAAA,MAAOW,KAAP;AAAA,MAAcC,QAAd;;AACA,MAAMC,mBAAmB,GAAGpB,KAAK,CAACqB,MAAN,EAA5B;AACA,MAAMC,UAAU,GAAGjB,YAAY,CAACQ,MAAD,CAA/B,CAHmB,CAKnB;;AACAb,EAAAA,KAAK,CAACuB,SAAN,CAAgB,YAAM;AACpB,QAAMC,EAAE,GAAGF,UAAU,CAACG,OAAtB;;AAEA,QAAIjB,IAAI,IAAIgB,EAAJ,aAAIA,EAAJ,eAAIA,EAAE,CAAEE,YAAhB,EAA8B;AAC5BF,MAAAA,EAAE,CAACf,KAAH,CAASkB,MAAT,GAAkB,EAAlB;AACAH,MAAAA,EAAE,CAACf,KAAH,CAASkB,MAAT,aAAqBH,EAAE,CAACI,YAAxB;;AAEA,UAAIJ,EAAE,CAACI,YAAH,KAAoBR,mBAAmB,CAACK,OAAxC,IAAmDf,QAAvD,EAAiE;AAC/DA,QAAAA,QAAQ,CAACc,EAAD,CAAR;AACAJ,QAAAA,mBAAmB,CAACK,OAApB,GAA8BD,EAAE,CAACI,YAAjC;AACD;AACF;AACF,GAZD,EAYG,CAACpB,IAAD,EAAOU,KAAP,EAAcJ,KAAd,EAAqBQ,UAArB,EAAiCZ,QAAjC,CAZH;AAcA,SACE,oBAAC,SAAD;AACE,IAAA,SAAS,EAAET,UAAU,CACnB,UADmB,EAEnB;AAFmB,8BAGAa,KAHA,EADvB;AAME,IAAA,SAAS,EAAEH,SANb;AAOE,IAAA,KAAK,EAAEF,KAPT;AAQE,IAAA,UAAU,EAAEG,UARd;AASE,IAAA,QAAQ,EAAEK,SAAS,CAACY;AATtB,KAWE,6CACMZ,SADN;AAEE,IAAA,KAAK,EAAE;AAAED,MAAAA,SAAS,EAATA;AAAF,KAFT;AAGE,IAAA,IAAI,EAAED,IAHR;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,KAAK,EAAEG,KALT;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,GAAG,EAAEG;AAPP,KAXF,CADF;AAuBD,CAvDD,C,CAyDA;;;AACA,OAAO,IAAMQ,QAAQ,GAAG3B,cAAc,CAACG,iBAAD,EAAoB;AAAEQ,EAAAA,KAAK,EAAE;AAAT,CAApB,CAA/B","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { FormField } 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  grow?: boolean;\n  onResize?(el: HTMLTextAreaElement): void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\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  ...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    >\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// eslint-disable-next-line import/no-default-export\nexport const Textarea = withAdaptivity(TextareaComponent, { sizeY: true });\n"],"file":"Textarea.js"}
+{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":["React","classNames","FormField","withAdaptivity","useEnsuredControl","useExternRef","TextareaComponent","defaultValue","grow","style","onResize","className","getRootRef","getRef","sizeY","rows","maxHeight","restProps","value","onChange","currentScrollHeight","useRef","elementRef","useEffect","el","current","offsetParent","height","scrollHeight","disabled","Textarea","displayName"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,SAAT;AAEA,SAASC,cAAT;AACA,SAASC,iBAAT;AACA,SAASC,YAAT;AACA;;AAaA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,OAYL;AAAA,+BAXnBC,YAWmB;AAAA,MAXnBA,YAWmB,kCAXJ,EAWI;AAAA,uBAVnBC,IAUmB;AAAA,MAVnBA,IAUmB,0BAVZ,IAUY;AAAA,MATnBC,KASmB,QATnBA,KASmB;AAAA,MARnBC,QAQmB,QARnBA,QAQmB;AAAA,MAPnBC,SAOmB,QAPnBA,SAOmB;AAAA,MANnBC,UAMmB,QANnBA,UAMmB;AAAA,MALnBC,MAKmB,QALnBA,MAKmB;AAAA,MAJnBC,KAImB,QAJnBA,KAImB;AAAA,uBAHnBC,IAGmB;AAAA,MAHnBA,IAGmB,0BAHZ,CAGY;AAAA,MAFnBC,SAEmB,QAFnBA,SAEmB;AAAA,MADhBC,SACgB;;AACnB,2BAA0Bb,iBAAiB,CAACa,SAAD,EAAY;AAAEV,IAAAA,YAAY,EAAZA;AAAF,GAAZ,CAA3C;AAAA;AAAA,MAAOW,KAAP;AAAA,MAAcC,QAAd;;AACA,MAAMC,mBAAmB,GAAGpB,KAAK,CAACqB,MAAN,EAA5B;AACA,MAAMC,UAAU,GAAGjB,YAAY,CAACQ,MAAD,CAA/B,CAHmB,CAKnB;;AACAb,EAAAA,KAAK,CAACuB,SAAN,CAAgB,YAAM;AACpB,QAAMC,EAAE,GAAGF,UAAU,CAACG,OAAtB;;AAEA,QAAIjB,IAAI,IAAIgB,EAAJ,aAAIA,EAAJ,eAAIA,EAAE,CAAEE,YAAhB,EAA8B;AAC5BF,MAAAA,EAAE,CAACf,KAAH,CAASkB,MAAT,GAAkB,EAAlB;AACAH,MAAAA,EAAE,CAACf,KAAH,CAASkB,MAAT,aAAqBH,EAAE,CAACI,YAAxB;;AAEA,UAAIJ,EAAE,CAACI,YAAH,KAAoBR,mBAAmB,CAACK,OAAxC,IAAmDf,QAAvD,EAAiE;AAC/DA,QAAAA,QAAQ,CAACc,EAAD,CAAR;AACAJ,QAAAA,mBAAmB,CAACK,OAApB,GAA8BD,EAAE,CAACI,YAAjC;AACD;AACF;AACF,GAZD,EAYG,CAACpB,IAAD,EAAOU,KAAP,EAAcJ,KAAd,EAAqBQ,UAArB,EAAiCZ,QAAjC,CAZH;AAcA,SACE,oBAAC,SAAD;AACE,IAAA,SAAS,EAAET,UAAU,CACnB,UADmB,EAEnB;AAFmB,8BAGAa,KAHA,EADvB;AAME,IAAA,SAAS,EAAEH,SANb;AAOE,IAAA,KAAK,EAAEF,KAPT;AAQE,IAAA,UAAU,EAAEG,UARd;AASE,IAAA,QAAQ,EAAEK,SAAS,CAACY;AATtB,KAWE,6CACMZ,SADN;AAEE,IAAA,KAAK,EAAE;AAAED,MAAAA,SAAS,EAATA;AAAF,KAFT;AAGE,IAAA,IAAI,EAAED,IAHR;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,KAAK,EAAEG,KALT;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,GAAG,EAAEG;AAPP,KAXF,CADF;AAuBD,CAvDD;AAyDA;AACA;AACA;;;AACA,OAAO,IAAMQ,QAAQ,GAAG3B,cAAc,CAACG,iBAAD,EAAoB;AAAEQ,EAAAA,KAAK,EAAE;AAAT,CAApB,CAA/B;AAEPgB,QAAQ,CAACC,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { FormField } 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  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  ...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    >\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"],"file":"Textarea.js"}

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

@@ -1 +1 @@
-.vkuiTooltip{position:absolute;left:0;top:0;height:100%;width:100%;z-index:2;white-space:normal}.vkuiTooltip__container{position:absolute}.vkuiTooltip__container[data-popper-placement^=bottom] .vkuiTooltip__corner{top:-8px}.vkuiTooltip__container[data-popper-placement^=top] .vkuiTooltip__corner{bottom:-8px}.vkuiTooltip__container[data-popper-placement^=top] .vkuiTooltip__corner::before{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.vkuiTooltip__container[data-popper-placement^=left] .vkuiTooltip__corner{right:-14px}.vkuiTooltip__container[data-popper-placement^=left] .vkuiTooltip__corner::before{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.vkuiTooltip__container[data-popper-placement^=right] .vkuiTooltip__corner{left:-14px}.vkuiTooltip__container[data-popper-placement^=right] .vkuiTooltip__corner::before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.vkuiTooltip__corner{width:20px;height:8px;position:absolute}.vkuiTooltip__corner::before{content:"";display:block;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDIwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+dG9vbHRpcF90aXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iTWFzdGVyLUtpdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8cGF0aCBkPSJNMTAsMCBDMTMuNSwwIDE1LjUsOCAyMCw4IEwwLDggQzQuNSw4IDYuNSwwIDEwLDAgWiIgaWQ9InRvb2x0aXBfdGlwIiBmaWxsPSIjNDdhM2ZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==);width:20px;height:8px}.vkuiTooltip--light .vkuiTooltip__corner::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDIwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+dG9vbHRpcF90aXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iTWFzdGVyLUtpdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8cGF0aCBkPSJNMTAsMCBDMTMuNSwwIDE1LjUsOCAyMCw4IEwwLDggQzQuNSw4IDYuNSwwIDEwLDAgWiIgaWQ9InRvb2x0aXBfdGlwIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==)}.vkuiTooltip__content{background-color:#47a3ff;box-shadow:0 4px 32px 0 rgba(0,0,0,.16),0 0 4px 0 rgba(0,0,0,.04);padding:8px 12px 10px;border-radius:10px;color:#fff;max-width:220px}.vkuiTooltip--light .vkuiTooltip__content{background:#fff;color:#2c2d2e}
+.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)}

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Placement } from "@popperjs/core";
 import { HasRootRef } from "../../types";
 import "./Tooltip.css";
 export interface TooltipProps {
@@ -8,7 +9,15 @@ export interface TooltipProps {
      * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.
      */
     children: React.ReactElement<HasRootRef<any>> | React.ReactElement<React.PropsWithRef<any>>;
+    /**
+     * @deprecated будет удалено в 5.0.0, устанавливать стиль следует через appearance
+     * Стиль отображения подсказки
+     */
     mode?: "accent" | "light";
+    /**
+     * Стиль отображения подсказки
+     */
+    appearance?: "accent" | "neutral" | "white" | "black" | "inversion";
     /**
      * Если передан `false`, то рисуется просто `children`.
      */
@@ -39,6 +48,10 @@ export interface TooltipProps {
      * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).
      */
     offsetY?: number;
+    /**
+     * Отображать ли стрелку, указывающую на якорный элемент
+     */
+    arrow?: boolean;
     /**
      * Сдвиг стрелочки относительно центра дочернего элемента.
      */
@@ -51,8 +64,12 @@ export interface TooltipProps {
      * Callback, который вызывается при клике по любому месту в пределах экрана.
      */
     onClose?: () => void;
+    /**
+     * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
+     */
+    placement?: Placement;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export declare const Tooltip: ({ children, isShown: _isShown, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, mode, ...restProps }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, isShown: _isShown, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, mode, appearance, arrow, placement, ...restProps }: TooltipProps) => JSX.Element;