@vkontakte/vkui 4.30.0 → 4.33.0

package/dist/components/Typography/Text/Text.js

@@ -2,33 +2,37 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "weight", "Component", "getRootRef"];
 import { createScopedElement } from "../../../lib/jsxRuntime";
-import { usePlatform } from "../../../hooks/usePlatform";
+import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import { classNames } from "../../../lib/classNames";
-import { getClassName } from "../../../helpers/getClassName";
 import { warnOnce } from "../../../lib/warnOnce";
 var warn = warnOnce("Text");
+/**
+ * @see https://vkcom.github.io/VKUI/#/Text
+ */
 
-var Text = function Text(_ref) {
+export var Text = function Text(_ref) {
   var children = _ref.children,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? "regular" : _ref$weight,
+      weight = _ref.weight,
       _ref$Component = _ref.Component,
       Component = _ref$Component === void 0 ? "span" : _ref$Component,
       getRootRef = _ref.getRootRef,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var platform = usePlatform();
-
   if (process.env.NODE_ENV === "development" && typeof Component !== "string" && getRootRef) {
     warn("\u0421\u0432\u043E\u0439\u0441\u0442\u0432\u043E \"getRootRef\" \u043C\u043E\u0436\u0435\u0442 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C\u0441\u044F \u0442\u043E\u043B\u044C\u043A\u043E \u0441 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430\u043C\u0438 DOM", "error");
   }
 
+  if (process.env.NODE_ENV === "development" && weight && ["semibold", "medium", "regular"].includes(weight)) {
+    warn("\u041D\u0430\u0447\u0435\u0440\u0442\u0430\u043D\u0438\u0435 weight=\"".concat(weight, "\" \u0443\u0441\u0442\u0430\u0440\u0435\u043B\u043E \u0438 \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u043B\u0435\u043D\u043E \u0432 5.0.0. \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \"1\", \"2\" \u0438 \"3\""));
+  }
+
+  var _useAdaptivity = useAdaptivity(),
+      sizeY = _useAdaptivity.sizeY;
+
   return createScopedElement(Component, _extends({}, restProps, {
     ref: getRootRef,
-    vkuiClass: classNames(getClassName("Text", platform), "Text--w-".concat(weight))
+    vkuiClass: classNames("Text", // TODO v5.0.0 перевести на новую адаптивность
+    "Text--sizeY-".concat(sizeY), weight && "Text--w-".concat(weight))
   }), children);
-}; // eslint-disable-next-line import/no-default-export
-
-
-export default Text;
+};
 //# sourceMappingURL=Text.js.map

package/dist/components/Typography/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Typography/Text/Text.tsx"],"names":["usePlatform","classNames","getClassName","warnOnce","warn","Text","children","weight","Component","getRootRef","restProps","platform","process","env","NODE_ENV"],"mappings":";;;;AACA,SAASA,WAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AAEA,SAASC,QAAT;AAUA,IAAMC,IAAI,GAAGD,QAAQ,CAAC,MAAD,CAArB;;AACA,IAAME,IAAyB,GAAG,SAA5BA,IAA4B,OAMjB;AAAA,MALfC,QAKe,QALfA,QAKe;AAAA,yBAJfC,MAIe;AAAA,MAJfA,MAIe,4BAJN,SAIM;AAAA,4BAHfC,SAGe;AAAA,MAHfA,SAGe,+BAHH,MAGG;AAAA,MAFfC,UAEe,QAFfA,UAEe;AAAA,MADZC,SACY;;AACf,MAAMC,QAAQ,GAAGX,WAAW,EAA5B;;AAEA,MACEY,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAzB,IACA,OAAON,SAAP,KAAqB,QADrB,IAEAC,UAHF,EAIE;AACAL,IAAAA,IAAI,iTAEF,OAFE,CAAJ;AAID;;AAED,SACE,oBAAC,SAAD,eACMM,SADN;AAEE,IAAA,GAAG,EAAED,UAFP;AAGE,IAAA,SAAS,EAAER,UAAU,CACnBC,YAAY,CAAC,MAAD,EAASS,QAAT,CADO,oBAERJ,MAFQ;AAHvB,MAQGD,QARH,CADF;AAYD,CAhCD,C,CAkCA;;;AACA,eAAeD,IAAf","sourcesContent":["import * as React from \"react\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { getClassName } from \"../../../helpers/getClassName\";\nimport { HasComponent, HasRootRef } from \"../../../types\";\nimport { warnOnce } from \"../../../lib/warnOnce\";\nimport \"./Text.css\";\n\nexport interface TextProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  weight: \"regular\" | \"medium\" | \"semibold\";\n}\n\nconst warn = warnOnce(\"Text\");\nconst Text: React.FC<TextProps> = ({\n  children,\n  weight = \"regular\",\n  Component = \"span\",\n  getRootRef,\n  ...restProps\n}: TextProps) => {\n  const platform = usePlatform();\n\n  if (\n    process.env.NODE_ENV === \"development\" &&\n    typeof Component !== \"string\" &&\n    getRootRef\n  ) {\n    warn(\n      `Свойство \"getRootRef\" может использоваться только с компонентами DOM`,\n      \"error\"\n    );\n  }\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        getClassName(\"Text\", platform),\n        `Text--w-${weight}`\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default Text;\n"],"file":"Text.js"}
+{"version":3,"sources":["../../../../src/components/Typography/Text/Text.tsx"],"names":["useAdaptivity","classNames","warnOnce","warn","Text","children","weight","Component","getRootRef","restProps","process","env","NODE_ENV","includes","sizeY"],"mappings":";;;;AACA,SAASA,aAAT;AACA,SAASC,UAAT;AAEA,SAASC,QAAT;AAeA,IAAMC,IAAI,GAAGD,QAAQ,CAAC,MAAD,CAArB;AACA;AACA;AACA;;AACA,OAAO,IAAME,IAAyB,GAAG,SAA5BA,IAA4B,OAMxB;AAAA,MALfC,QAKe,QALfA,QAKe;AAAA,MAJfC,MAIe,QAJfA,MAIe;AAAA,4BAHfC,SAGe;AAAA,MAHfA,SAGe,+BAHH,MAGG;AAAA,MAFfC,UAEe,QAFfA,UAEe;AAAA,MADZC,SACY;;AACf,MACEC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAzB,IACA,OAAOL,SAAP,KAAqB,QADrB,IAEAC,UAHF,EAIE;AACAL,IAAAA,IAAI,iTAEF,OAFE,CAAJ;AAID;;AAED,MACEO,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAzB,IACAN,MADA,IAEA,CAAC,UAAD,EAAa,QAAb,EAAuB,SAAvB,EAAkCO,QAAlC,CAA2CP,MAA3C,CAHF,EAIE;AACAH,IAAAA,IAAI,iFACoBG,MADpB,sSAAJ;AAGD;;AAED,uBAAkBN,aAAa,EAA/B;AAAA,MAAQc,KAAR,kBAAQA,KAAR;;AAEA,SACE,oBAAC,SAAD,eACML,SADN;AAEE,IAAA,GAAG,EAAED,UAFP;AAGE,IAAA,SAAS,EAAEP,UAAU,CACnB,MADmB,EAEnB;AAFmB,0BAGJa,KAHI,GAInBR,MAAM,sBAAeA,MAAf,CAJa;AAHvB,MAUGD,QAVH,CADF;AAcD,CA5CM","sourcesContent":["import * as React from \"react\";\nimport { useAdaptivity } from \"../../../hooks/useAdaptivity\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { HasComponent, HasRootRef } from \"../../../types\";\nimport { warnOnce } from \"../../../lib/warnOnce\";\nimport \"./Text.css\";\n\nexport interface TextProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Задаёт начертание шрифта, отличное от стандартного.\n   *\n   * > ⚠️ Начертания `\"semibold\"`, `medium` и `\"regular\"` устарели и будут удалены в 5.0.0. Используйте значения `\"1\"`, `\"2\"` и `\"3\"`.\n   */\n  weight?: \"regular\" | \"medium\" | \"semibold\" | \"1\" | \"2\" | \"3\";\n}\n\nconst warn = warnOnce(\"Text\");\n/**\n * @see https://vkcom.github.io/VKUI/#/Text\n */\nexport const Text: React.FC<TextProps> = ({\n  children,\n  weight,\n  Component = \"span\",\n  getRootRef,\n  ...restProps\n}: TextProps) => {\n  if (\n    process.env.NODE_ENV === \"development\" &&\n    typeof Component !== \"string\" &&\n    getRootRef\n  ) {\n    warn(\n      `Свойство \"getRootRef\" может использоваться только с компонентами DOM`,\n      \"error\"\n    );\n  }\n\n  if (\n    process.env.NODE_ENV === \"development\" &&\n    weight &&\n    [\"semibold\", \"medium\", \"regular\"].includes(weight)\n  ) {\n    warn(\n      `Начертание weight=\"${weight}\" устарело и будет удалено в 5.0.0. Используйте значения \"1\", \"2\" и \"3\"`\n    );\n  }\n\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        \"Text\",\n        // TODO v5.0.0 перевести на новую адаптивность\n        `Text--sizeY-${sizeY}`,\n        weight && `Text--w-${weight}`\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"file":"Text.js"}

package/dist/components/Typography/Title/Title.d.ts

@@ -10,4 +10,7 @@ export interface TitleProps extends React.AllHTMLAttributes<HTMLElement>, HasCom
     weight?: "heavy" | "bold" | "semibold" | "medium" | "regular" | "1" | "2" | "3";
     level: "1" | "2" | "3";
 }
+/**
+ * @see https://vkcom.github.io/VKUI/#/Title
+ */
 export declare const Title: React.FC<TitleProps>;

package/dist/components/Typography/Title/Title.js

@@ -5,6 +5,10 @@ import { createScopedElement } from "../../../lib/jsxRuntime";
 import { classNames } from "../../../lib/classNames";
 import { warnOnce } from "../../../lib/warnOnce";
 var warn = warnOnce("Title");
+/**
+ * @see https://vkcom.github.io/VKUI/#/Title
+ */
+
 export var Title = function Title(_ref) {
   var children = _ref.children,
       weight = _ref.weight,

package/dist/components/Typography/Title/Title.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Typography/Title/Title.tsx"],"names":["classNames","warnOnce","warn","Title","children","weight","level","Component","restProps","process","env","NODE_ENV","includes"],"mappings":";;;;AAEA,SAASA,UAAT;AACA,SAASC,QAAT;AAuBA,IAAMC,IAAI,GAAGD,QAAQ,CAAC,OAAD,CAArB;AACA,OAAO,IAAME,KAA2B,GAAG,SAA9BA,KAA8B,OAMrC;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,wBAHJC,KAGI;AAAA,MAHJA,KAGI,2BAHI,GAGJ;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,SACC;;AACJ,MAAI,CAACD,SAAL,EAAgB;AACdA,IAAAA,SAAS,GAAI,MAAMD,KAAnB;AACD;;AAED,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAA7B,EAA4C;AAC1C,QACEN,MAAM,IACN,CAAC,OAAD,EAAU,MAAV,EAAkB,UAAlB,EAA8B,QAA9B,EAAwC,SAAxC,EAAmDO,QAAnD,CAA4DP,MAA5D,CAFF,EAIEH,IAAI,iFACoBG,MADpB,sSAAJ;AAGH;;AAED,SACE,oBAAC,SAAD,eACMG,SADN;AAEE,IAAA,SAAS,EAAER,UAAU,CACnB,OADmB,qBAEPM,KAFO,GAGnBD,MAAM,uBAAgBA,MAAhB,CAHa;AAFvB,MAQGD,QARH,CADF;AAYD,CAjCM","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../../types\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { warnOnce } from \"../../../lib/warnOnce\";\nimport \"./Title.css\";\n\nexport interface TitleProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasComponent {\n  /**\n   * Задаёт начертание шрифта отличное от стандартного.\n   *\n   * > ⚠️ Начертания `\"heavy\"`, `\"bold\"`, `\"semibold\"`, `medium` и `\"regular\"` устарели и будут удалены в 5.0.0. Используйте значения `\"1\"`, `\"2\"` и `\"3\"`.\n   */\n  weight?:\n    | \"heavy\"\n    | \"bold\"\n    | \"semibold\"\n    | \"medium\"\n    | \"regular\"\n    | \"1\"\n    | \"2\"\n    | \"3\";\n  level: \"1\" | \"2\" | \"3\";\n}\n\nconst warn = warnOnce(\"Title\");\nexport const Title: React.FC<TitleProps> = ({\n  children,\n  weight,\n  level = \"1\",\n  Component,\n  ...restProps\n}) => {\n  if (!Component) {\n    Component = (\"h\" + level) as React.ElementType;\n  }\n\n  if (process.env.NODE_ENV === \"development\") {\n    if (\n      weight &&\n      [\"heavy\", \"bold\", \"semibold\", \"medium\", \"regular\"].includes(weight)\n    )\n      warn(\n        `Начертание weight=\"${weight}\" устарело и будет удалено в 5.0.0. Используйте значения \"1\", \"2\" и \"3\"`\n      );\n  }\n\n  return (\n    <Component\n      {...restProps}\n      vkuiClass={classNames(\n        \"Title\",\n        `Title--l-${level}`,\n        weight && `Title--w-${weight}`\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"file":"Title.js"}
+{"version":3,"sources":["../../../../src/components/Typography/Title/Title.tsx"],"names":["classNames","warnOnce","warn","Title","children","weight","level","Component","restProps","process","env","NODE_ENV","includes"],"mappings":";;;;AAEA,SAASA,UAAT;AACA,SAASC,QAAT;AAuBA,IAAMC,IAAI,GAAGD,QAAQ,CAAC,OAAD,CAArB;AAEA;AACA;AACA;;AACA,OAAO,IAAME,KAA2B,GAAG,SAA9BA,KAA8B,OAMrC;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,wBAHJC,KAGI;AAAA,MAHJA,KAGI,2BAHI,GAGJ;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,SACC;;AACJ,MAAI,CAACD,SAAL,EAAgB;AACdA,IAAAA,SAAS,GAAI,MAAMD,KAAnB;AACD;;AAED,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAA7B,EAA4C;AAC1C,QACEN,MAAM,IACN,CAAC,OAAD,EAAU,MAAV,EAAkB,UAAlB,EAA8B,QAA9B,EAAwC,SAAxC,EAAmDO,QAAnD,CAA4DP,MAA5D,CAFF,EAIEH,IAAI,iFACoBG,MADpB,sSAAJ;AAGH;;AAED,SACE,oBAAC,SAAD,eACMG,SADN;AAEE,IAAA,SAAS,EAAER,UAAU,CACnB,OADmB,qBAEPM,KAFO,GAGnBD,MAAM,uBAAgBA,MAAhB,CAHa;AAFvB,MAQGD,QARH,CADF;AAYD,CAjCM","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../../types\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { warnOnce } from \"../../../lib/warnOnce\";\nimport \"./Title.css\";\n\nexport interface TitleProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasComponent {\n  /**\n   * Задаёт начертание шрифта отличное от стандартного.\n   *\n   * > ⚠️ Начертания `\"heavy\"`, `\"bold\"`, `\"semibold\"`, `medium` и `\"regular\"` устарели и будут удалены в 5.0.0. Используйте значения `\"1\"`, `\"2\"` и `\"3\"`.\n   */\n  weight?:\n    | \"heavy\"\n    | \"bold\"\n    | \"semibold\"\n    | \"medium\"\n    | \"regular\"\n    | \"1\"\n    | \"2\"\n    | \"3\";\n  level: \"1\" | \"2\" | \"3\";\n}\n\nconst warn = warnOnce(\"Title\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Title\n */\nexport const Title: React.FC<TitleProps> = ({\n  children,\n  weight,\n  level = \"1\",\n  Component,\n  ...restProps\n}) => {\n  if (!Component) {\n    Component = (\"h\" + level) as React.ElementType;\n  }\n\n  if (process.env.NODE_ENV === \"development\") {\n    if (\n      weight &&\n      [\"heavy\", \"bold\", \"semibold\", \"medium\", \"regular\"].includes(weight)\n    )\n      warn(\n        `Начертание weight=\"${weight}\" устарело и будет удалено в 5.0.0. Используйте значения \"1\", \"2\" и \"3\"`\n      );\n  }\n\n  return (\n    <Component\n      {...restProps}\n      vkuiClass={classNames(\n        \"Title\",\n        `Title--l-${level}`,\n        weight && `Title--w-${weight}`\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"file":"Title.js"}

package/dist/components/UsersStack/UsersStack.d.ts

@@ -19,5 +19,7 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     visibleCount?: number;
 }
-declare const _default: React.NamedExoticComponent<UsersStackProps>;
-export default _default;
+/**
+ * @see https://vkcom.github.io/VKUI/#/UsersStack
+ */
+export declare const UsersStack: ({ photos, visibleCount, size, layout, children, ...restProps }: UsersStackProps) => JSX.Element;

package/dist/components/UsersStack/UsersStack.js

@@ -2,28 +2,28 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["photos", "visibleCount", "size", "layout", "children"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { Caption } from "../Typography/Caption/Caption";
-import { Subhead } from "../Typography/Subhead/Subhead";
 import { createMasks } from "./masks";
 import { useDOM } from "../../lib/dom";
 
-var UsersStack = function UsersStack(props) {
-  var platform = usePlatform();
-
-  var _props$photos = props.photos,
-      photos = _props$photos === void 0 ? [] : _props$photos,
-      _props$visibleCount = props.visibleCount,
-      visibleCount = _props$visibleCount === void 0 ? 0 : _props$visibleCount,
-      size = props.size,
-      layout = props.layout,
-      children = props.children,
-      restProps = _objectWithoutProperties(props, _excluded);
+/**
+ * @see https://vkcom.github.io/VKUI/#/UsersStack
+ */
+export var UsersStack = function UsersStack(_ref) {
+  var _ref$photos = _ref.photos,
+      photos = _ref$photos === void 0 ? [] : _ref$photos,
+      _ref$visibleCount = _ref.visibleCount,
+      visibleCount = _ref$visibleCount === void 0 ? 3 : _ref$visibleCount,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "s" : _ref$size,
+      _ref$layout = _ref.layout,
+      layout = _ref$layout === void 0 ? "horizontal" : _ref$layout,
+      children = _ref.children,
+      restProps = _objectWithoutProperties(_ref, _excluded);
 
   var _useDOM = useDOM(),
       document = _useDOM.document;
@@ -32,40 +32,52 @@ var UsersStack = function UsersStack(props) {
     createMasks(document);
   }, [document]);
   var othersCount = Math.max(0, photos.length - visibleCount);
-  var canShowOthers = othersCount > 0 && size === "m";
+  var canShowOthers = othersCount > 0 && size !== "xs";
+  var CounterTypography = size === "m" ? Footnote : Caption;
+  var photoSize = {
+    xs: 16,
+    s: 24,
+    m: 32
+  }[size];
+  var directionClip = canShowOthers ? "right" : "left";
   var photosShown = photos.slice(0, visibleCount);
   return createScopedElement("div", _extends({}, restProps, {
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: classNames(getClassName("UsersStack", platform), "UsersStack--size-".concat(size), "UsersStack--l-".concat(layout), {
-      "UsersStack--others": canShowOthers
-    })
+    vkuiClass: classNames("UsersStack", "UsersStack--size-".concat(size), "UsersStack--l-".concat(layout), canShowOthers && "UsersStack--others")
   }), createScopedElement("div", {
     vkuiClass: "UsersStack__photos",
     role: "presentation"
   }, photosShown.map(function (photo, i) {
-    return createScopedElement("div", {
-      key: i,
+    var direction = i === 0 && !canShowOthers ? "circle" : directionClip;
+    var pathHref = "#users_stack_".concat(photoSize, "_").concat(direction);
+    var clipPathHref = "url(#users_stack_mask_".concat(photoSize, "_").concat(direction, ")");
+    return createScopedElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
       vkuiClass: "UsersStack__photo",
-      style: {
-        backgroundImage: "url(".concat(photo, ")")
-      }
-    });
-  }), canShowOthers && createScopedElement(Caption, {
+      key: i,
+      "aria-hidden": true
+    }, createScopedElement("g", {
+      clipPath: clipPathHref
+    }, createScopedElement("use", {
+      vkuiClass: "UsersStack__fill",
+      href: pathHref
+    }), createScopedElement("image", {
+      href: photo,
+      width: photoSize,
+      height: photoSize
+    }), createScopedElement("use", {
+      href: pathHref,
+      fill: "none",
+      stroke: "rgba(0, 0, 0, 0.08)"
+    })));
+  }), canShowOthers && createScopedElement(CounterTypography, {
+    caps: true,
     weight: "1",
+    level: "2" // TODO: remove only level in #2343
+    ,
     vkuiClass: "UsersStack__photo UsersStack__photo--others",
-    "aria-hidden": "true"
-  }, createScopedElement("span", null, "+", othersCount))), hasReactNode(children) && createScopedElement(Subhead, {
-    Component: "span",
+    "aria-hidden": true
+  }, createScopedElement("span", null, "+", othersCount))), hasReactNode(children) && createScopedElement(Footnote, {
     vkuiClass: "UsersStack__text"
   }, children));
 };
-
-UsersStack.defaultProps = {
-  photos: [],
-  size: "s",
-  visibleCount: 3,
-  layout: "horizontal"
-}; // eslint-disable-next-line import/no-default-export
-
-export default /*#__PURE__*/React.memo(UsersStack);
 //# sourceMappingURL=UsersStack.js.map

package/dist/components/UsersStack/UsersStack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/UsersStack/UsersStack.tsx"],"names":["React","getClassName","usePlatform","hasReactNode","classNames","useIsomorphicLayoutEffect","Caption","Subhead","createMasks","useDOM","UsersStack","props","platform","photos","visibleCount","size","layout","children","restProps","document","othersCount","Math","max","length","canShowOthers","photosShown","slice","map","photo","i","backgroundImage","defaultProps","memo"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,yBAAT;AACA,SAASC,OAAT;AACA,SAASC,OAAT;AACA,SAASC,WAAT;AACA,SAASC,MAAT;;AAuBA,IAAMC,UAAqC,GAAG,SAAxCA,UAAwC,CAACC,KAAD,EAA4B;AACxE,MAAMC,QAAQ,GAAGV,WAAW,EAA5B;;AACA,sBAOIS,KAPJ,CACEE,MADF;AAAA,MACEA,MADF,8BACW,EADX;AAAA,4BAOIF,KAPJ,CAEEG,YAFF;AAAA,MAEEA,YAFF,oCAEiB,CAFjB;AAAA,MAGEC,IAHF,GAOIJ,KAPJ,CAGEI,IAHF;AAAA,MAIEC,MAJF,GAOIL,KAPJ,CAIEK,MAJF;AAAA,MAKEC,QALF,GAOIN,KAPJ,CAKEM,QALF;AAAA,MAMKC,SANL,4BAOIP,KAPJ;;AAQA,gBAAqBF,MAAM,EAA3B;AAAA,MAAQU,QAAR,WAAQA,QAAR;;AAEAd,EAAAA,yBAAyB,CAAC,YAAM;AAC9BG,IAAAA,WAAW,CAACW,QAAD,CAAX;AACD,GAFwB,EAEtB,CAACA,QAAD,CAFsB,CAAzB;AAIA,MAAMC,WAAW,GAAGC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYT,MAAM,CAACU,MAAP,GAAgBT,YAA5B,CAApB;AACA,MAAMU,aAAa,GAAGJ,WAAW,GAAG,CAAd,IAAmBL,IAAI,KAAK,GAAlD;AAEA,MAAMU,WAAW,GAAGZ,MAAM,CAACa,KAAP,CAAa,CAAb,EAAgBZ,YAAhB,CAApB;AAEA,SACE,wCACMI,SADN;AAEE;AACA,IAAA,SAAS,EAAEd,UAAU,CACnBH,YAAY,CAAC,YAAD,EAAeW,QAAf,CADO,6BAECG,IAFD,2BAGFC,MAHE,GAInB;AACE,4BAAsBQ;AADxB,KAJmB;AAHvB,MAYE;AAAK,IAAA,SAAS,EAAC,oBAAf;AAAoC,IAAA,IAAI,EAAC;AAAzC,KACGC,WAAW,CAACE,GAAZ,CAAgB,UAACC,KAAD,EAAQC,CAAR;AAAA,WACf;AACE,MAAA,GAAG,EAAEA,CADP;AAEE,MAAA,SAAS,EAAC,mBAFZ;AAGE,MAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,gBAASF,KAAT;AAAjB;AAHT,MADe;AAAA,GAAhB,CADH,EASGJ,aAAa,IACZ,oBAAC,OAAD;AACE,IAAA,MAAM,EAAC,GADT;AAEE,IAAA,SAAS,EAAC,6CAFZ;AAGE,mBAAY;AAHd,KAKE,uCAAQJ,WAAR,CALF,CAVJ,CAZF,EA+BGjB,YAAY,CAACc,QAAD,CAAZ,IACC,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC,MAAnB;AAA0B,IAAA,SAAS,EAAC;AAApC,KACGA,QADH,CAhCJ,CADF;AAuCD,CA5DD;;AA8DAP,UAAU,CAACqB,YAAX,GAA0B;AACxBlB,EAAAA,MAAM,EAAE,EADgB;AAExBE,EAAAA,IAAI,EAAE,GAFkB;AAGxBD,EAAAA,YAAY,EAAE,CAHU;AAIxBE,EAAAA,MAAM,EAAE;AAJgB,CAA1B,C,CAOA;;AACA,4BAAehB,KAAK,CAACgC,IAAN,CAAWtB,UAAX,CAAf","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { createMasks } from \"./masks\";\nimport { useDOM } from \"../../lib/dom\";\nimport \"./UsersStack.css\";\n\nexport interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Массив ссылок на фотографии\n   */\n  photos?: string[];\n  /**\n   * Размер аватарок\n   */\n  size?: \"xs\" | \"s\" | \"m\";\n  /**\n   * Вертикальный режим рекомендуется использовать с размером `m`\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /**\n   * Количество аватарок, которые будут показаны.\n   * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n   */\n  visibleCount?: number;\n}\n\nconst UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {\n  const platform = usePlatform();\n  const {\n    photos = [],\n    visibleCount = 0,\n    size,\n    layout,\n    children,\n    ...restProps\n  } = props;\n  const { document } = useDOM();\n\n  useIsomorphicLayoutEffect(() => {\n    createMasks(document);\n  }, [document]);\n\n  const othersCount = Math.max(0, photos.length - visibleCount);\n  const canShowOthers = othersCount > 0 && size === \"m\";\n\n  const photosShown = photos.slice(0, visibleCount);\n\n  return (\n    <div\n      {...restProps}\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(\n        getClassName(\"UsersStack\", platform),\n        `UsersStack--size-${size}`,\n        `UsersStack--l-${layout}`,\n        {\n          \"UsersStack--others\": canShowOthers,\n        }\n      )}\n    >\n      <div vkuiClass=\"UsersStack__photos\" role=\"presentation\">\n        {photosShown.map((photo, i) => (\n          <div\n            key={i}\n            vkuiClass=\"UsersStack__photo\"\n            style={{ backgroundImage: `url(${photo})` }}\n          />\n        ))}\n\n        {canShowOthers && (\n          <Caption\n            weight=\"1\"\n            vkuiClass=\"UsersStack__photo UsersStack__photo--others\"\n            aria-hidden=\"true\"\n          >\n            <span>+{othersCount}</span>\n          </Caption>\n        )}\n      </div>\n      {hasReactNode(children) && (\n        <Subhead Component=\"span\" vkuiClass=\"UsersStack__text\">\n          {children}\n        </Subhead>\n      )}\n    </div>\n  );\n};\n\nUsersStack.defaultProps = {\n  photos: [],\n  size: \"s\",\n  visibleCount: 3,\n  layout: \"horizontal\",\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default React.memo(UsersStack);\n"],"file":"UsersStack.js"}
+{"version":3,"sources":["../../../src/components/UsersStack/UsersStack.tsx"],"names":["hasReactNode","classNames","useIsomorphicLayoutEffect","Footnote","Caption","createMasks","useDOM","UsersStack","photos","visibleCount","size","layout","children","restProps","document","othersCount","Math","max","length","canShowOthers","CounterTypography","photoSize","xs","s","m","directionClip","photosShown","slice","map","photo","i","direction","pathHref","clipPathHref"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,yBAAT;AACA,SAASC,QAAT;AACA,SAASC,OAAT;AACA,SAASC,WAAT;AACA,SAASC,MAAT;;AAuBA;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,OAOH;AAAA,yBANrBC,MAMqB;AAAA,MANrBA,MAMqB,4BANZ,EAMY;AAAA,+BALrBC,YAKqB;AAAA,MALrBA,YAKqB,kCALN,CAKM;AAAA,uBAJrBC,IAIqB;AAAA,MAJrBA,IAIqB,0BAJd,GAIc;AAAA,yBAHrBC,MAGqB;AAAA,MAHrBA,MAGqB,4BAHZ,YAGY;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADlBC,SACkB;;AACrB,gBAAqBP,MAAM,EAA3B;AAAA,MAAQQ,QAAR,WAAQA,QAAR;;AAEAZ,EAAAA,yBAAyB,CAAC,YAAM;AAC9BG,IAAAA,WAAW,CAACS,QAAD,CAAX;AACD,GAFwB,EAEtB,CAACA,QAAD,CAFsB,CAAzB;AAIA,MAAMC,WAAW,GAAGC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYT,MAAM,CAACU,MAAP,GAAgBT,YAA5B,CAApB;AACA,MAAMU,aAAa,GAAGJ,WAAW,GAAG,CAAd,IAAmBL,IAAI,KAAK,IAAlD;AACA,MAAMU,iBAAiB,GAAGV,IAAI,KAAK,GAAT,GAAeP,QAAf,GAA0BC,OAApD;AAEA,MAAMiB,SAAS,GAAG;AAChBC,IAAAA,EAAE,EAAE,EADY;AAEhBC,IAAAA,CAAC,EAAE,EAFa;AAGhBC,IAAAA,CAAC,EAAE;AAHa,IAIhBd,IAJgB,CAAlB;AAKA,MAAMe,aAAa,GAAGN,aAAa,GAAG,OAAH,GAAa,MAAhD;AAEA,MAAMO,WAAW,GAAGlB,MAAM,CAACmB,KAAP,CAAa,CAAb,EAAgBlB,YAAhB,CAApB;AAEA,SACE,wCACMI,SADN;AAEE,IAAA,SAAS,EAAEZ,UAAU,CACnB,YADmB,6BAECS,IAFD,2BAGFC,MAHE,GAInBQ,aAAa,IAAI,oBAJE;AAFvB,MASE;AAAK,IAAA,SAAS,EAAC,oBAAf;AAAoC,IAAA,IAAI,EAAC;AAAzC,KACGO,WAAW,CAACE,GAAZ,CAAgB,UAACC,KAAD,EAAQC,CAAR,EAAc;AAC7B,QAAMC,SAAS,GACbD,CAAC,KAAK,CAAN,IAAW,CAACX,aAAZ,GAA4B,QAA5B,GAAuCM,aADzC;AAGA,QAAMO,QAAQ,0BAAmBX,SAAnB,cAAgCU,SAAhC,CAAd;AACA,QAAME,YAAY,mCAA4BZ,SAA5B,cAAyCU,SAAzC,MAAlB;AAEA,WACE;AACE,MAAA,KAAK,EAAC,4BADR;AAEE,MAAA,SAAS,EAAC,mBAFZ;AAGE,MAAA,GAAG,EAAED,CAHP;AAIE;AAJF,OAME;AAAG,MAAA,QAAQ,EAAEG;AAAb,OACE;AAAK,MAAA,SAAS,EAAC,kBAAf;AAAkC,MAAA,IAAI,EAAED;AAAxC,MADF,EAEE;AAAO,MAAA,IAAI,EAAEH,KAAb;AAAoB,MAAA,KAAK,EAAER,SAA3B;AAAsC,MAAA,MAAM,EAAEA;AAA9C,MAFF,EAGE;AAAK,MAAA,IAAI,EAAEW,QAAX;AAAqB,MAAA,IAAI,EAAC,MAA1B;AAAiC,MAAA,MAAM,EAAC;AAAxC,MAHF,CANF,CADF;AAcD,GArBA,CADH,EAwBGb,aAAa,IACZ,oBAAC,iBAAD;AACE,IAAA,IAAI,MADN;AAEE,IAAA,MAAM,EAAC,GAFT;AAGE,IAAA,KAAK,EAAC,GAHR,CAGY;AAHZ;AAIE,IAAA,SAAS,EAAC,6CAJZ;AAKE;AALF,KAOE,uCAAQJ,WAAR,CAPF,CAzBJ,CATF,EA6CGf,YAAY,CAACY,QAAD,CAAZ,IACC,oBAAC,QAAD;AAAU,IAAA,SAAS,EAAC;AAApB,KAAwCA,QAAxC,CA9CJ,CADF;AAmDD,CA9EM","sourcesContent":["import * as React from \"react\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { createMasks } from \"./masks\";\nimport { useDOM } from \"../../lib/dom\";\nimport \"./UsersStack.css\";\n\nexport interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Массив ссылок на фотографии\n   */\n  photos?: string[];\n  /**\n   * Размер аватарок\n   */\n  size?: \"xs\" | \"s\" | \"m\"; // TODO: \"s\" | \"m\" | \"l\"\n  /**\n   * Вертикальный режим рекомендуется использовать с размером `m`\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /**\n   * Количество аватарок, которые будут показаны.\n   * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n   */\n  visibleCount?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/UsersStack\n */\nexport const UsersStack = ({\n  photos = [],\n  visibleCount = 3,\n  size = \"s\",\n  layout = \"horizontal\",\n  children,\n  ...restProps\n}: UsersStackProps) => {\n  const { document } = useDOM();\n\n  useIsomorphicLayoutEffect(() => {\n    createMasks(document);\n  }, [document]);\n\n  const othersCount = Math.max(0, photos.length - visibleCount);\n  const canShowOthers = othersCount > 0 && size !== \"xs\";\n  const CounterTypography = size === \"m\" ? Footnote : Caption;\n\n  const photoSize = {\n    xs: 16,\n    s: 24,\n    m: 32,\n  }[size];\n  const directionClip = canShowOthers ? \"right\" : \"left\";\n\n  const photosShown = photos.slice(0, visibleCount);\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        \"UsersStack\",\n        `UsersStack--size-${size}`,\n        `UsersStack--l-${layout}`,\n        canShowOthers && \"UsersStack--others\"\n      )}\n    >\n      <div vkuiClass=\"UsersStack__photos\" role=\"presentation\">\n        {photosShown.map((photo, i) => {\n          const direction =\n            i === 0 && !canShowOthers ? \"circle\" : directionClip;\n\n          const pathHref = `#users_stack_${photoSize}_${direction}`;\n          const clipPathHref = `url(#users_stack_mask_${photoSize}_${direction})`;\n\n          return (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              vkuiClass=\"UsersStack__photo\"\n              key={i}\n              aria-hidden\n            >\n              <g clipPath={clipPathHref}>\n                <use vkuiClass=\"UsersStack__fill\" href={pathHref} />\n                <image href={photo} width={photoSize} height={photoSize} />\n                <use href={pathHref} fill=\"none\" stroke=\"rgba(0, 0, 0, 0.08)\" />\n              </g>\n            </svg>\n          );\n        })}\n\n        {canShowOthers && (\n          <CounterTypography\n            caps\n            weight=\"1\"\n            level=\"2\" // TODO: remove only level in #2343\n            vkuiClass=\"UsersStack__photo UsersStack__photo--others\"\n            aria-hidden\n          >\n            <span>+{othersCount}</span>\n          </CounterTypography>\n        )}\n      </div>\n      {hasReactNode(children) && (\n        <Footnote vkuiClass=\"UsersStack__text\">{children}</Footnote>\n      )}\n    </div>\n  );\n};\n"],"file":"UsersStack.js"}

package/dist/components/UsersStack/masks.js

@@ -13,7 +13,7 @@ export function createMasks(document) {
   svgElement.style.position = "absolute";
   svgElement.style.width = "0px";
   svgElement.style.height = "0px";
-  svgElement.innerHTML = "<defs>\n  <clipPath id=\"users_stack_mask_16_left\">\n    <path transform=\"translate(1.5 0)\" d=\"M1.20772 8C1.20772 6.32671 0.768742 4.75626 0 3.39821C1.44342 1.34278 3.8277 0 6.52463 0C10.9293 0 14.5 3.58172 14.5 8C14.5 12.4183 10.9293 16 6.52463 16C3.8277 16 1.44342 14.6572 0 12.6018C0.768742 11.2437 1.20772 9.6733 1.20772 8Z\"></path>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_left\">\n    <path d=\"M3.9971785,12 C3.9971785,9.49005736 3.33667467,7.13438366 2.18,5.09731189 C4.35181237,2.01417617 7.93927741,0 11.9971785,0 C18.6245955,0 23.9971785,5.372583 23.9971785,12 C23.9971785,18.627417 18.6245955,24 11.9971785,24 C7.93927741,24 4.35181237,21.9858238 2.18,18.9026881 C3.33667467,16.8656163 3.9971785,14.5099426 3.9971785,12 Z\"></path>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_right\">\n    <path d=\"M21.8171785,5.09731189 C20.6605038,7.13438366 20,9.49005736 20,12 C20,14.5099426 20.6605038,16.8656163 21.8171785,18.9026881 C19.6453661,21.9858238 16.0579011,24 12,24 C5.372583,24 3.90798505e-14,18.627417 3.90798505e-14,12 C3.90798505e-14,5.372583 5.372583,0 12,0 C16.0579011,0 19.6453661,2.01417617 21.8171785,5.09731189 Z\"></path>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_left\">\n    <path d=\"M2.13430019,23.9892466 C3.32858917,21.5820026 4,18.8694095 4,16 C4,13.1305905 3.32858917,10.4179974 2.13430019,8.0107534 C4.89924175,3.22241289 10.0733034,-2.30926389e-14 16,-2.30926389e-14 C24.836556,-2.30926389e-14 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 C10.0733034,32 4.89924175,28.7775871 2.13430019,23.9892466 L2.13430019,23.9892466 Z\"></path>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_right\">\n    <path d=\"M29.8656998,8.0107534 C28.6714108,10.4179974 28,13.1305905 28,16 C28,18.8694095 28.6714108,21.5820026 29.8656998,23.9892466 C27.1007583,28.7775871 21.9266966,32 16,32 C7.163444,32 3.90798505e-14,24.836556 3.90798505e-14,16 C3.90798505e-14,7.163444 7.163444,0 16,0 C21.9266966,0 27.1007583,3.22241289 29.8656998,8.0107534 Z\"></path>\n  </clipPath>\n</defs>";
+  svgElement.innerHTML = "<defs>\n  <path id=\"users_stack_16_left\" d=\"M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285\" />\n  <circle id=\"users_stack_16_circle\" cx=\"8\" cy=\"8\" r=\"8\" />\n  \n  <path id=\"users_stack_24_left\" d=\"M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625\" />\n  <circle id=\"users_stack_24_circle\" cx=\"12\" cy=\"12\" r=\"12\" />\n  <path id=\"users_stack_24_right\" d=\"M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625\" />\n\n  <path id=\"users_stack_32_left\" d=\"M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75\" />\n  <circle id=\"users_stack_32_circle\" cx=\"16\" cy=\"16\" r=\"16\" />\n  <path id=\"users_stack_32_right\" d=\"M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75\" />\n\n  <clipPath id=\"users_stack_mask_16_left\">\n    <use href=\"#users_stack_16_left\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_16_circle\">\n    <use href=\"#users_stack_16_circle\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_left\">\n    <use href=\"#users_stack_24_left\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_circle\">\n    <use href=\"#users_stack_24_circle\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_right\">\n    <use href=\"#users_stack_24_right\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_left\">\n    <use href=\"#users_stack_32_left\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_circle\">\n    <use href=\"#users_stack_32_circle\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_right\">\n    <use href=\"#users_stack_32_right\"/>\n  </clipPath>\n</defs>";
   document.body.appendChild(svgElement);
   masksCreated.push(document);
 }

package/dist/components/UsersStack/masks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/UsersStack/masks.tsx"],"names":["canUseDOM","masksCreated","createMasks","document","includes","svgElement","createElementNS","setAttributeNS","style","position","width","height","innerHTML","body","appendChild","push"],"mappings":"AAAA,SAASA,SAAT;AAEA,IAAMC,YAAwB,GAAG,EAAjC;AAEA,OAAO,SAASC,WAAT,CAAqBC,QAArB,EAAgD;AACrD,MAAI,CAACH,SAAD,IAAc,CAACG,QAAf,IAA2BF,YAAY,CAACG,QAAb,CAAsBD,QAAtB,CAA/B,EAAgE;AAC9D;AACD,GAHoD,CAKrD;;;AACA,MAAME,UAAU,GAAGF,QAAQ,CAACG,eAAT,CACjB,4BADiB,EAEjB,KAFiB,CAAnB;AAIAD,EAAAA,UAAU,CAACE,cAAX,CAA0B,IAA1B,EAAgC,IAAhC,EAAsC,oBAAtC;AACAF,EAAAA,UAAU,CAACE,cAAX,CAA0B,IAA1B,EAAgC,OAAhC,EAAyC,GAAzC;AACAF,EAAAA,UAAU,CAACE,cAAX,CAA0B,IAA1B,EAAgC,QAAhC,EAA0C,GAA1C;AACAF,EAAAA,UAAU,CAACG,KAAX,CAAiBC,QAAjB,GAA4B,UAA5B;AACAJ,EAAAA,UAAU,CAACG,KAAX,CAAiBE,KAAjB,GAAyB,KAAzB;AACAL,EAAAA,UAAU,CAACG,KAAX,CAAiBG,MAAjB,GAA0B,KAA1B;AAEAN,EAAAA,UAAU,CAACO,SAAX;AAsBAT,EAAAA,QAAQ,CAACU,IAAT,CAAcC,WAAd,CAA0BT,UAA1B;AACAJ,EAAAA,YAAY,CAACc,IAAb,CAAkBZ,QAAlB;AACD","sourcesContent":["import { canUseDOM } from \"../../lib/dom\";\n\nconst masksCreated: Document[] = [];\n\nexport function createMasks(document?: Document): void {\n  if (!canUseDOM || !document || masksCreated.includes(document)) {\n    return;\n  }\n\n  // eslint-disable-next-line no-restricted-globals\n  const svgElement = document.createElementNS(\n    \"http://www.w3.org/2000/svg\",\n    \"svg\"\n  );\n  svgElement.setAttributeNS(null, \"id\", \"__SVG_MASKS_NODE__\");\n  svgElement.setAttributeNS(null, \"width\", \"0\");\n  svgElement.setAttributeNS(null, \"height\", \"0\");\n  svgElement.style.position = \"absolute\";\n  svgElement.style.width = \"0px\";\n  svgElement.style.height = \"0px\";\n\n  svgElement.innerHTML = `<defs>\n  <clipPath id=\"users_stack_mask_16_left\">\n    <path transform=\"translate(1.5 0)\" d=\"M1.20772 8C1.20772 6.32671 0.768742 4.75626 0 3.39821C1.44342 1.34278 3.8277 0 6.52463 0C10.9293 0 14.5 3.58172 14.5 8C14.5 12.4183 10.9293 16 6.52463 16C3.8277 16 1.44342 14.6572 0 12.6018C0.768742 11.2437 1.20772 9.6733 1.20772 8Z\"></path>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_left\">\n    <path d=\"M3.9971785,12 C3.9971785,9.49005736 3.33667467,7.13438366 2.18,5.09731189 C4.35181237,2.01417617 7.93927741,0 11.9971785,0 C18.6245955,0 23.9971785,5.372583 23.9971785,12 C23.9971785,18.627417 18.6245955,24 11.9971785,24 C7.93927741,24 4.35181237,21.9858238 2.18,18.9026881 C3.33667467,16.8656163 3.9971785,14.5099426 3.9971785,12 Z\"></path>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_right\">\n    <path d=\"M21.8171785,5.09731189 C20.6605038,7.13438366 20,9.49005736 20,12 C20,14.5099426 20.6605038,16.8656163 21.8171785,18.9026881 C19.6453661,21.9858238 16.0579011,24 12,24 C5.372583,24 3.90798505e-14,18.627417 3.90798505e-14,12 C3.90798505e-14,5.372583 5.372583,0 12,0 C16.0579011,0 19.6453661,2.01417617 21.8171785,5.09731189 Z\"></path>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_left\">\n    <path d=\"M2.13430019,23.9892466 C3.32858917,21.5820026 4,18.8694095 4,16 C4,13.1305905 3.32858917,10.4179974 2.13430019,8.0107534 C4.89924175,3.22241289 10.0733034,-2.30926389e-14 16,-2.30926389e-14 C24.836556,-2.30926389e-14 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 C10.0733034,32 4.89924175,28.7775871 2.13430019,23.9892466 L2.13430019,23.9892466 Z\"></path>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_right\">\n    <path d=\"M29.8656998,8.0107534 C28.6714108,10.4179974 28,13.1305905 28,16 C28,18.8694095 28.6714108,21.5820026 29.8656998,23.9892466 C27.1007583,28.7775871 21.9266966,32 16,32 C7.163444,32 3.90798505e-14,24.836556 3.90798505e-14,16 C3.90798505e-14,7.163444 7.163444,0 16,0 C21.9266966,0 27.1007583,3.22241289 29.8656998,8.0107534 Z\"></path>\n  </clipPath>\n</defs>`;\n\n  document.body.appendChild(svgElement);\n  masksCreated.push(document);\n}\n"],"file":"masks.js"}
+{"version":3,"sources":["../../../src/components/UsersStack/masks.tsx"],"names":["canUseDOM","masksCreated","createMasks","document","includes","svgElement","createElementNS","setAttributeNS","style","position","width","height","innerHTML","body","appendChild","push"],"mappings":"AAAA,SAASA,SAAT;AAEA,IAAMC,YAAwB,GAAG,EAAjC;AAEA,OAAO,SAASC,WAAT,CAAqBC,QAArB,EAAgD;AACrD,MAAI,CAACH,SAAD,IAAc,CAACG,QAAf,IAA2BF,YAAY,CAACG,QAAb,CAAsBD,QAAtB,CAA/B,EAAgE;AAC9D;AACD,GAHoD,CAKrD;;;AACA,MAAME,UAAU,GAAGF,QAAQ,CAACG,eAAT,CACjB,4BADiB,EAEjB,KAFiB,CAAnB;AAIAD,EAAAA,UAAU,CAACE,cAAX,CAA0B,IAA1B,EAAgC,IAAhC,EAAsC,oBAAtC;AACAF,EAAAA,UAAU,CAACE,cAAX,CAA0B,IAA1B,EAAgC,OAAhC,EAAyC,GAAzC;AACAF,EAAAA,UAAU,CAACE,cAAX,CAA0B,IAA1B,EAAgC,QAAhC,EAA0C,GAA1C;AACAF,EAAAA,UAAU,CAACG,KAAX,CAAiBC,QAAjB,GAA4B,UAA5B;AACAJ,EAAAA,UAAU,CAACG,KAAX,CAAiBE,KAAjB,GAAyB,KAAzB;AACAL,EAAAA,UAAU,CAACG,KAAX,CAAiBG,MAAjB,GAA0B,KAA1B;AAEAN,EAAAA,UAAU,CAACO,SAAX;AA6CAT,EAAAA,QAAQ,CAACU,IAAT,CAAcC,WAAd,CAA0BT,UAA1B;AACAJ,EAAAA,YAAY,CAACc,IAAb,CAAkBZ,QAAlB;AACD","sourcesContent":["import { canUseDOM } from \"../../lib/dom\";\n\nconst masksCreated: Document[] = [];\n\nexport function createMasks(document?: Document): void {\n  if (!canUseDOM || !document || masksCreated.includes(document)) {\n    return;\n  }\n\n  // eslint-disable-next-line no-restricted-globals\n  const svgElement = document.createElementNS(\n    \"http://www.w3.org/2000/svg\",\n    \"svg\"\n  );\n  svgElement.setAttributeNS(null, \"id\", \"__SVG_MASKS_NODE__\");\n  svgElement.setAttributeNS(null, \"width\", \"0\");\n  svgElement.setAttributeNS(null, \"height\", \"0\");\n  svgElement.style.position = \"absolute\";\n  svgElement.style.width = \"0px\";\n  svgElement.style.height = \"0px\";\n\n  svgElement.innerHTML = `<defs>\n  <path id=\"users_stack_16_left\" d=\"M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285\" />\n  <circle id=\"users_stack_16_circle\" cx=\"8\" cy=\"8\" r=\"8\" />\n  \n  <path id=\"users_stack_24_left\" d=\"M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625\" />\n  <circle id=\"users_stack_24_circle\" cx=\"12\" cy=\"12\" r=\"12\" />\n  <path id=\"users_stack_24_right\" d=\"M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625\" />\n\n  <path id=\"users_stack_32_left\" d=\"M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75\" />\n  <circle id=\"users_stack_32_circle\" cx=\"16\" cy=\"16\" r=\"16\" />\n  <path id=\"users_stack_32_right\" d=\"M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75\" />\n\n  <clipPath id=\"users_stack_mask_16_left\">\n    <use href=\"#users_stack_16_left\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_16_circle\">\n    <use href=\"#users_stack_16_circle\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_left\">\n    <use href=\"#users_stack_24_left\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_circle\">\n    <use href=\"#users_stack_24_circle\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_24_right\">\n    <use href=\"#users_stack_24_right\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_left\">\n    <use href=\"#users_stack_32_left\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_circle\">\n    <use href=\"#users_stack_32_circle\"/>\n  </clipPath>\n\n  <clipPath id=\"users_stack_mask_32_right\">\n    <use href=\"#users_stack_32_right\"/>\n  </clipPath>\n</defs>`;\n\n  document.body.appendChild(svgElement);\n  masksCreated.push(document);\n}\n"],"file":"masks.js"}

package/dist/components/View/View.d.ts

@@ -69,12 +69,15 @@ export interface ViewState {
     prevPanel: string | null;
     nextPanel: string | null;
     swipingBack: boolean;
-    swipebackStartX: number;
+    swipeBackStartX: number;
     swipeBackShift: number;
     swipeBackNextPanel: string | null;
     swipeBackPrevPanel: string | null;
     swipeBackResult: SwipeBackResults | null;
     browserSwipe: boolean;
 }
-declare const _default: React.FC<Pick<ViewProps, "hidden" | "dir" | "nav" | "slot" | "style" | "title" | "scroll" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "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" | "popout" | "modal" | "onTransition" | "activePanel" | "onSwipeBack" | "onSwipeBackStart" | "onSwipeBackCancel" | "history" | "splitCol" | "configProvider">>;
-export default _default;
+/**
+ * @see https://vkcom.github.io/VKUI/#/View
+ */
+export declare const View: React.FC<Pick<ViewProps, "hidden" | "dir" | "nav" | "slot" | "style" | "title" | "scroll" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "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" | "popout" | "modal" | "onTransition" | "activePanel" | "onSwipeBack" | "onSwipeBackStart" | "onSwipeBackCancel" | "history" | "splitCol" | "configProvider">>;
+export {};

package/dist/components/View/View.js

@@ -11,8 +11,7 @@ import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { transitionEvent, animationEvent } from "../../lib/supportEvents";
-import { getClassName } from "../../helpers/getClassName";
-import { IOS, ANDROID, VKCOM } from "../../lib/platform";
+import { IOS } from "../../lib/platform";
 import { Touch } from "../Touch/Touch";
 import { withPlatform } from "../../hoc/withPlatform";
 import { withContext } from "../../hoc/withContext";
@@ -35,15 +34,15 @@ var SwipeBackResults;
 export var scrollsCache = {};
 var warn = warnOnce("View");
 
-var View = /*#__PURE__*/function (_React$Component) {
-  _inherits(View, _React$Component);
+var ViewComponent = /*#__PURE__*/function (_React$Component) {
+  _inherits(ViewComponent, _React$Component);
 
-  var _super = _createSuper(View);
+  var _super = _createSuper(ViewComponent);
 
-  function View(props) {
+  function ViewComponent(props) {
     var _this;
 
-    _classCallCheck(this, View);
+    _classCallCheck(this, ViewComponent);
 
     _this = _super.call(this, props);
 
@@ -108,7 +107,7 @@ var View = /*#__PURE__*/function (_React$Component) {
 
           _this.setState({
             swipingBack: true,
-            swipebackStartX: e.startX,
+            swipeBackStartX: e.startX,
             swipeBackPrevPanel: _this.state.activePanel,
             swipeBackNextPanel: _this.props.history.slice(-2)[0]
           });
@@ -119,7 +118,7 @@ var View = /*#__PURE__*/function (_React$Component) {
 
           if (e.shiftX < 0) {
             swipeBackShift = 0;
-          } else if (e.shiftX > _this.window.innerWidth - _this.state.swipebackStartX) {
+          } else if (e.shiftX > _this.window.innerWidth - _this.state.swipeBackStartX) {
             var _this$window;
 
             swipeBackShift = (_this$window = _this.window) === null || _this$window === void 0 ? void 0 : _this$window.innerWidth;
@@ -144,7 +143,7 @@ var View = /*#__PURE__*/function (_React$Component) {
           _this.onSwipeBackCancel();
         } else if (_this.state.swipeBackShift >= ((_this$window$innerWid = (_this$window2 = _this.window) === null || _this$window2 === void 0 ? void 0 : _this$window2.innerWidth) !== null && _this$window$innerWid !== void 0 ? _this$window$innerWid : 0)) {
           _this.onSwipeBackSuccess();
-        } else if (speed > 250 || _this.state.swipebackStartX + _this.state.swipeBackShift > _this.window.innerWidth / 2) {
+        } else if (speed > 250 || _this.state.swipeBackStartX + _this.state.swipeBackShift > _this.window.innerWidth / 2) {
           _this.setState({
             swipeBackResult: SwipeBackResults.success
           });
@@ -164,7 +163,7 @@ var View = /*#__PURE__*/function (_React$Component) {
       prevPanel: null,
       nextPanel: null,
       swipingBack: false,
-      swipebackStartX: 0,
+      swipeBackStartX: 0,
       swipeBackShift: 0,
       swipeBackNextPanel: null,
       swipeBackPrevPanel: null,
@@ -174,7 +173,7 @@ var View = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(View, [{
+  _createClass(ViewComponent, [{
     key: "document",
     get: function get() {
       return this.props.document;
@@ -250,7 +249,7 @@ var View = /*#__PURE__*/function (_React$Component) {
               clearTimeout(this.animationFinishTimeout);
             }
 
-            this.animationFinishTimeout = setTimeout(this.transitionEndHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
+            this.animationFinishTimeout = setTimeout(this.transitionEndHandler, this.props.platform === IOS ? 600 : 300);
           }
         }
       } // Закончилась анимация свайпа назад
@@ -269,7 +268,7 @@ var View = /*#__PURE__*/function (_React$Component) {
           swipeBackNextPanel: null,
           swipingBack: false,
           swipeBackResult: null,
-          swipebackStartX: 0,
+          swipeBackStartX: 0,
           swipeBackShift: 0,
           activePanel: nextPanel,
           visiblePanels: [nextPanel]
@@ -335,7 +334,7 @@ var View = /*#__PURE__*/function (_React$Component) {
           clearTimeout(this.transitionFinishTimeout);
         }
 
-        this.transitionFinishTimeout = setTimeout(eventHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
+        this.transitionFinishTimeout = setTimeout(eventHandler, this.props.platform === IOS ? 600 : 300);
       }
     }
   }, {
@@ -399,7 +398,7 @@ var View = /*#__PURE__*/function (_React$Component) {
         swipeBackNextPanel: null,
         swipingBack: false,
         swipeBackResult: null,
-        swipebackStartX: 0,
+        swipeBackStartX: 0,
         swipeBackShift: 0
       });
     }
@@ -483,15 +482,10 @@ var View = /*#__PURE__*/function (_React$Component) {
         return panelId !== undefined && _this4.state.visiblePanels.includes(panelId) || panelId === swipeBackPrevPanel || panelId === swipeBackNextPanel;
       });
       var disableAnimation = this.shouldDisableTransitionMotion();
-      var modifiers = {
-        "View--animated": !disableAnimation && animated,
-        "View--swiping-back": !disableAnimation && this.state.swipingBack,
-        "View--no-motion": disableAnimation
-      };
       return createScopedElement(Touch, _extends({
         Component: "section"
       }, restProps, {
-        vkuiClass: classNames(getClassName("View", platform), modifiers),
+        vkuiClass: classNames("View", platform === IOS && "View--ios", !disableAnimation && animated && "View--animated", !disableAnimation && this.state.swipingBack && "View--swiping-back", disableAnimation && "View--no-motion"),
         onMoveX: this.onMoveX,
         onEnd: this.onEnd
       }), createScopedElement("div", {
@@ -504,16 +498,7 @@ var View = /*#__PURE__*/function (_React$Component) {
         var isTransitionTarget = animated && panelId === (isBack ? prevPanel : nextPanel);
         var compensateScroll = isPrev || panelId === swipeBackNextPanel || panelId === nextPanel && isBack;
         return createScopedElement("div", {
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
-          vkuiClass: classNames("View__panel", {
-            "View__panel--active": panelId === activePanel,
-            "View__panel--prev": panelId === prevPanel,
-            "View__panel--next": panelId === nextPanel,
-            "View__panel--swipe-back-prev": panelId === swipeBackPrevPanel,
-            "View__panel--swipe-back-next": panelId === swipeBackNextPanel,
-            "View__panel--swipe-back-success": swipeBackResult === SwipeBackResults.success,
-            "View__panel--swipe-back-failed": swipeBackResult === SwipeBackResults.fail
-          }),
+          vkuiClass: classNames("View__panel", panelId === activePanel && "View__panel--active", panelId === prevPanel && "View__panel--prev", panelId === nextPanel && "View__panel--next", panelId === swipeBackPrevPanel && "View__panel--swipe-back-prev", panelId === swipeBackNextPanel && "View__panel--swipe-back-next", swipeBackResult === SwipeBackResults.success && "View__panel--swipe-back-success", swipeBackResult === SwipeBackResults.fail && "View__panel--swipe-back-failed"),
           onAnimationEnd: isTransitionTarget ? _this4.transitionEndHandler : undefined,
           ref: function ref(el) {
             return panelId !== undefined && (_this4.panelNodes[panelId] = el);
@@ -536,13 +521,17 @@ var View = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return View;
-}(React.Component); // eslint-disable-next-line import/no-default-export
+  return ViewComponent;
+}(React.Component);
+/**
+ * @see https://vkcom.github.io/VKUI/#/View
+ */
 
 
-_defineProperty(View, "defaultProps", {
+_defineProperty(ViewComponent, "defaultProps", {
   history: []
 });
 
-export default withContext(withContext(withContext(withPlatform(withDOM(View)), SplitColContext, "splitCol"), ConfigProviderContext, "configProvider"), ScrollContext, "scroll");
+export var View = withContext(withContext(withContext(withPlatform(withDOM(ViewComponent)), SplitColContext, "splitCol"), ConfigProviderContext, "configProvider"), ScrollContext, "scroll");
+View.displayName = "View";
 //# sourceMappingURL=View.js.map