@vkontakte/vkui 4.34.1 → 4.35.1

package/dist/components/TabsItem/TabsItem.js

@@ -1,51 +1,70 @@
 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";
 
 /**
  * @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/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;;AAQA;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;;AA6BA;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/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/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";
 
 /**
  * @see https://vkcom.github.io/VKUI/#/TextTooltip
@@ -17,19 +16,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/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;;AAeA;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;;AAmBA;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/components/Textarea/Textarea.d.ts

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

@@ -10,9 +10,6 @@ import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
 import { useExternRef } from "../../hooks/useExternRef";
 
-/**
- * @see https://vkcom.github.io/VKUI/#/Textarea
- */
 var TextareaComponent = function TextareaComponent(_ref) {
   var _ref$defaultValue = _ref.defaultValue,
       defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
@@ -69,10 +66,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/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;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,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/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;

package/dist/components/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["children", "isShown", "offsetX", "offsetY", "alignX", "alignY", "onClose", "cornerOffset", "cornerAbsoluteOffset", "mode"];
+var _excluded = ["children", "isShown", "offsetX", "offsetY", "alignX", "alignY", "onClose", "cornerOffset", "cornerAbsoluteOffset", "mode", "appearance", "arrow", "placement"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import ReactDOM from "react-dom";
@@ -11,12 +11,14 @@ import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { useNavTransition } from "../NavTransitionContext/NavTransitionContext";
+import { PopperArrow } from "../PopperArrow/PopperArrow";
 import { usePopper } from "react-popper";
 import { tooltipContainerAttr } from "./TooltipContainer";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useDOM } from "../../lib/dom";
 import { warnOnce } from "../../lib/warnOnce";
 import { hasReactNode } from "../../lib/utils";
+import { prefixClass } from "../../lib/prefixClass";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 
 var isDOMTypeElement = function isDOMTypeElement(element) {
@@ -27,29 +29,28 @@ var baseClassName = getClassName("Tooltip");
 var warn = warnOnce("Tooltip");
 var IS_DEV = process.env.NODE_ENV === "development";
 var SimpleTooltip = /*#__PURE__*/React.forwardRef(function SimpleTooltip(_ref, ref) {
-  var _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? "accent" : _ref$mode,
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? "accent" : _ref$appearance,
       header = _ref.header,
       text = _ref.text,
-      arrowRef = _ref.arrowRef,
+      arrow = _ref.arrow,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style,
       attributes = _ref.attributes;
   return createScopedElement("div", {
-    vkuiClass: classNames(baseClassName, "Tooltip--".concat(mode))
+    vkuiClass: classNames(baseClassName, "Tooltip--".concat(appearance))
   }, createScopedElement("div", _extends({
     vkuiClass: "Tooltip__container",
     ref: ref,
     style: style.container
-  }, attributes === null || attributes === void 0 ? void 0 : attributes.container), createScopedElement("div", _extends({
-    vkuiClass: "Tooltip__corner",
-    style: style.arrow
-  }, attributes === null || attributes === void 0 ? void 0 : attributes.arrow, {
-    ref: arrowRef
-  })), createScopedElement("div", {
+  }, attributes === null || attributes === void 0 ? void 0 : attributes.container), arrow && createScopedElement(PopperArrow, {
+    style: style.arrow,
+    attributes: attributes === null || attributes === void 0 ? void 0 : attributes.arrow,
+    arrowClassName: prefixClass("Tooltip__arrow")
+  }), createScopedElement("div", {
     vkuiClass: "Tooltip__content"
   }, header && createScopedElement(Subhead, {
-    weight: "1",
+    weight: "2",
     vkuiClass: "Tooltip__title"
   }, header), text && createScopedElement(Subhead, {
     vkuiClass: "Tooltip__text"
@@ -78,6 +79,19 @@ function getPlacement(alignX, alignY) {
 function isVerticalPlacement(placement) {
   return placement.startsWith("top") || placement.startsWith("bottom");
 }
+/**
+ * Вычисляем стиль подсказки: параметр appearance имеет приоритет, иначе мапим mode на подходящее значение из appearance
+ * TODO: v5 избавиться от пропа mode и этого метода, для appearance по умолчанию сделать "accent"
+ */
+
+
+function calculateAppearance(mode, appearance) {
+  if (appearance) {
+    return appearance;
+  }
+
+  return mode === "light" ? "white" : "accent";
+}
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
@@ -101,6 +115,10 @@ export var Tooltip = function Tooltip(_ref2) {
       cornerAbsoluteOffset = _ref2.cornerAbsoluteOffset,
       _ref2$mode = _ref2.mode,
       mode = _ref2$mode === void 0 ? "accent" : _ref2$mode,
+      appearance = _ref2.appearance,
+      _ref2$arrow = _ref2.arrow,
+      arrow = _ref2$arrow === void 0 ? true : _ref2$arrow,
+      placement = _ref2.placement,
       restProps = _objectWithoutProperties(_ref2, _excluded);
 
   var _useNavTransition = useNavTransition(),
@@ -113,15 +131,10 @@ export var Tooltip = function Tooltip(_ref2) {
       tooltipRef = _React$useState2[0],
       setTooltipRef = _React$useState2[1];
 
-  var _React$useState3 = React.useState(null),
+  var _React$useState3 = React.useState(),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      tooltipArrowRef = _React$useState4[0],
-      setTooltipArrowRef = _React$useState4[1];
-
-  var _React$useState5 = React.useState(),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      target = _React$useState6[0],
-      setTarget = _React$useState6[1];
+      target = _React$useState4[0],
+      setTarget = _React$useState4[1];
 
   if (IS_DEV) {
     var multiChildren = React.Children.count(children) > 1; // Empty children is a noop
@@ -148,63 +161,70 @@ export var Tooltip = function Tooltip(_ref2) {
     throw new Error("Use TooltipContainer for Tooltip outside Panel (see docs)");
   }
 
-  var arrowOffsetModifier = React.useMemo(function () {
-    return {
-      name: "arrowOffset",
-      enabled: true,
-      phase: "main",
-      fn: function fn(_ref3) {
-        var state = _ref3.state;
+  var modifiers = React.useMemo(function () {
+    var modifiers = [{
+      name: "offset",
+      options: {
+        offset: [offsetX, offsetY]
+      }
+    }, {
+      name: "preventOverflow"
+    }, {
+      name: "flip"
+    }];
 
-        if (!state.modifiersData.arrow) {
-          return;
+    if (arrow) {
+      modifiers.push({
+        name: "arrow",
+        options: {
+          padding: 14
         }
+      });
+      modifiers.push({
+        name: "arrowOffset",
+        enabled: true,
+        phase: "main",
+        fn: function fn(_ref3) {
+          var state = _ref3.state;
 
-        if (isVerticalPlacement(state.placement)) {
-          if (cornerAbsoluteOffset !== undefined) {
-            state.modifiersData.arrow.x = cornerAbsoluteOffset;
-          } else {
-            var _state$modifiersData$;
+          if (!state.modifiersData.arrow) {
+            return;
+          }
+
+          if (isVerticalPlacement(state.placement)) {
+            if (cornerAbsoluteOffset !== undefined) {
+              state.modifiersData.arrow.x = cornerAbsoluteOffset;
+            } else {
+              var _state$modifiersData$;
 
-            if (((_state$modifiersData$ = state.modifiersData.arrow) === null || _state$modifiersData$ === void 0 ? void 0 : _state$modifiersData$.x) !== undefined) {
-              state.modifiersData.arrow.x += cornerOffset;
+              if (((_state$modifiersData$ = state.modifiersData.arrow) === null || _state$modifiersData$ === void 0 ? void 0 : _state$modifiersData$.x) !== undefined) {
+                state.modifiersData.arrow.x += cornerOffset;
+              }
             }
-          }
-        } else {
-          if (cornerAbsoluteOffset !== undefined) {
-            state.modifiersData.arrow.y = cornerAbsoluteOffset;
           } else {
-            var _state$modifiersData$2;
+            if (cornerAbsoluteOffset !== undefined) {
+              state.modifiersData.arrow.y = cornerAbsoluteOffset;
+            } else {
+              var _state$modifiersData$2;
 
-            if (((_state$modifiersData$2 = state.modifiersData.arrow) === null || _state$modifiersData$2 === void 0 ? void 0 : _state$modifiersData$2.y) !== undefined) {
-              state.modifiersData.arrow.y += cornerOffset;
+              if (((_state$modifiersData$2 = state.modifiersData.arrow) === null || _state$modifiersData$2 === void 0 ? void 0 : _state$modifiersData$2.y) !== undefined) {
+                state.modifiersData.arrow.y += cornerOffset;
+              }
             }
           }
         }
-      }
-    };
-  }, [cornerOffset, cornerAbsoluteOffset]);
-  var placement = getPlacement(alignX, alignY);
+      });
+    }
+
+    return modifiers;
+  }, [arrow, cornerAbsoluteOffset, cornerOffset, offsetX, offsetY]);
+
+  var _placement = placement !== null && placement !== void 0 ? placement : getPlacement(alignX, alignY);
 
   var _usePopper = usePopper(target, tooltipRef, {
     strategy: strategy,
-    placement: placement,
-    modifiers: [{
-      name: "offset",
-      options: {
-        offset: [offsetX, offsetY]
-      }
-    }, {
-      name: "arrow",
-      options: {
-        element: tooltipArrowRef,
-        padding: 14
-      }
-    }, {
-      name: "preventOverflow"
-    }, {
-      name: "flip"
-    }, arrowOffsetModifier]
+    placement: _placement,
+    modifiers: modifiers
   }),
       styles = _usePopper.styles,
       attributes = _usePopper.attributes;
@@ -219,14 +239,15 @@ export var Tooltip = function Tooltip(_ref2) {
   var childRef = /*#__PURE__*/React.isValidElement(children) && (isDOMTypeElement(children) ? children.ref : children.props.getRootRef);
   var patchedRef = useExternRef(setTarget, childRef);
   var child = /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _defineProperty({}, isDOMTypeElement(children) ? "ref" : "getRootRef", patchedRef)) : children;
+
+  var _appearance = calculateAppearance(mode, appearance);
+
   return createScopedElement(React.Fragment, null, child, isShown && target != null && /*#__PURE__*/ReactDOM.createPortal(createScopedElement(SimpleTooltip, _extends({}, restProps, {
-    mode: mode,
+    appearance: _appearance,
+    arrow: arrow,
     ref: function ref(el) {
       return setTooltipRef(el);
     },
-    arrowRef: function arrowRef(el) {
-      return setTooltipArrowRef(el);
-    },
     style: {
       arrow: styles.arrow,
       container: styles.popper