@vkontakte/vkui 5.0.3 → 5.1.0

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

@@ -9,7 +9,7 @@ exports.Title = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["className", "children", "weight", "level", "Component"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Title
@@ -19,14 +19,14 @@ var Title = function Title(_ref) {
     children = _ref.children,
     weight = _ref.weight,
     _ref$level = _ref.level,
-    level = _ref$level === void 0 ? "1" : _ref$level,
+    level = _ref$level === void 0 ? '1' : _ref$level,
     Component = _ref.Component,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (!Component) {
-    Component = "h" + level;
+    Component = 'h' + level;
   }
   return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)(className, "vkuiTitle", styles["Title--level-".concat(level)], weight && styles["Title--weight-".concat(weight)])
+    className: (0, _vkjs.classNames)(className, "vkuiTitle", styles["Title--level-".concat(level)], weight && styles["Title--weight-".concat(weight)])
   }), children);
 };
 exports.Title = Title;

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

@@ -1 +1 @@
-{"version":3,"file":"Title.js","names":["Title","className","children","weight","level","Component","restProps","classNamesString","styles"],"sources":["../../../../../src/components/Typography/Title/Title.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../../types\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport styles from \"./Title.module.css\";\n\nexport interface TitleProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasComponent {\n  /**\n   * Задаёт начертание шрифта отличное от стандартного.\n   */\n  weight?: \"1\" | \"2\" | \"3\";\n  level?: \"1\" | \"2\" | \"3\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Title\n */\nexport const Title = ({\n  className,\n  children,\n  weight,\n  level = \"1\",\n  Component,\n  ...restProps\n}: TitleProps) => {\n  if (!Component) {\n    Component = (\"h\" + level) as React.ElementType;\n  }\n\n  return (\n    <Component\n      {...restProps}\n      className={classNamesString(\n        className,\n        styles[\"Title\"],\n        styles[`Title--level-${level}`],\n        weight && styles[`Title--weight-${weight}`]\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AAEA;AAA2D;AAa3D;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,IANhBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IAAA,kBACNC,KAAK;IAALA,KAAK,2BAAG,GAAG;IACXC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAI,CAACD,SAAS,EAAE;IACdA,SAAS,GAAI,GAAG,GAAGD,KAA2B;EAChD;EAEA,oBACE,oBAAC,SAAS,6BACJE,SAAS;IACb,SAAS,EAAE,IAAAC,4BAAgB,EACzBN,SAAS,eAETO,MAAM,wBAAiBJ,KAAK,EAAG,EAC/BD,MAAM,IAAIK,MAAM,yBAAkBL,MAAM,EAAG;EAC3C,IAEDD,QAAQ,CACC;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Title.js","names":["Title","className","children","weight","level","Component","restProps","classNames","styles"],"sources":["../../../../../src/components/Typography/Title/Title.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasComponent } from '../../../types';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Title.module.css';\n\nexport interface TitleProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {\n  /**\n   * Задаёт начертание шрифта отличное от стандартного.\n   */\n  weight?: '1' | '2' | '3';\n  level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Title\n */\nexport const Title = ({\n  className,\n  children,\n  weight,\n  level = '1',\n  Component,\n  ...restProps\n}: TitleProps) => {\n  if (!Component) {\n    Component = ('h' + level) as React.ElementType;\n  }\n\n  return (\n    <Component\n      {...restProps}\n      className={classNames(\n        className,\n        styles['Title'],\n        styles[`Title--level-${level}`],\n        weight && styles[`Title--weight-${weight}`],\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AAEA;AAA6C;AAW7C;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,IANhBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IAAA,kBACNC,KAAK;IAALA,KAAK,2BAAG,GAAG;IACXC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAI,CAACD,SAAS,EAAE;IACdA,SAAS,GAAI,GAAG,GAAGD,KAA2B;EAChD;EAEA,oBACE,oBAAC,SAAS,6BACJE,SAAS;IACb,SAAS,EAAE,IAAAC,gBAAU,EACnBN,SAAS,eAETO,MAAM,wBAAiBJ,KAAK,EAAG,EAC/BD,MAAM,IAAIK,MAAM,yBAAkBL,MAAM,EAAG;EAC3C,IAEDD,QAAQ,CACC;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Массив ссылок на фотографии
@@ -7,11 +7,11 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Размер аватарок
      */
-    size?: "s" | "m" | "l";
+    size?: 's' | 'm' | 'l';
     /**
      * Вертикальный режим рекомендуется использовать с размером `m`
      */
-    layout?: "vertical" | "horizontal";
+    layout?: 'vertical' | 'horizontal';
     /**
      * Количество аватарок, которые будут показаны.
      * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов

package/dist/cjs/components/UsersStack/UsersStack.js

@@ -9,8 +9,7 @@ exports.UsersStack = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("../../lib/utils");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _Caption = require("../Typography/Caption/Caption");
 var _useId = require("../../hooks/useId");
@@ -21,14 +20,14 @@ function PathElement(_ref) {
     direction = _ref.direction,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   switch (direction) {
-    case "circle":
+    case 'circle':
       var radius = photoSize / 2;
       return /*#__PURE__*/React.createElement("circle", (0, _extends2.default)({
         cx: radius,
         cy: radius,
         r: radius
       }, props));
-    case "right":
+    case 'right':
       switch (photoSize) {
         case 24:
           return /*#__PURE__*/React.createElement("path", (0, _extends2.default)({
@@ -73,19 +72,19 @@ var UsersStack = function UsersStack(_ref2) {
     _ref2$count = _ref2.count,
     count = _ref2$count === void 0 ? Math.max(0, photos.length - visibleCount) : _ref2$count,
     _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? "m" : _ref2$size,
+    size = _ref2$size === void 0 ? 'm' : _ref2$size,
     _ref2$layout = _ref2.layout,
-    layout = _ref2$layout === void 0 ? "horizontal" : _ref2$layout,
+    layout = _ref2$layout === void 0 ? 'horizontal' : _ref2$layout,
     children = _ref2.children,
     className = _ref2.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var cmpId = (0, _useId.useId)();
-  var canShowOthers = count > 0 && size !== "s";
-  var CounterTypography = size === "m" ? _Footnote.Footnote : _Caption.Caption;
+  var canShowOthers = count > 0 && size !== 's';
+  var CounterTypography = size === 'l' ? _Footnote.Footnote : _Caption.Caption;
   var photoSize = photoSizes[size];
-  var directionClip = canShowOthers ? "right" : "left";
+  var directionClip = canShowOthers ? 'right' : 'left';
   var photosElements = photos.slice(0, visibleCount).map(function (photo, i) {
-    var direction = i === 0 && !canShowOthers ? "circle" : directionClip;
+    var direction = i === 0 && !canShowOthers ? 'circle' : directionClip;
     var id = "UsersStackDefs".concat(cmpId).concat(i);
     var hrefID = "#".concat(id);
     var maskID = "UsersStackMask".concat(cmpId).concat(i);
@@ -120,14 +119,14 @@ var UsersStack = function UsersStack(_ref2) {
   var othersElement = canShowOthers ? /*#__PURE__*/React.createElement(CounterTypography, {
     caps: true,
     weight: "1",
-    className: (0, _classNames.classNamesString)("vkuiUsersStack__photo", "vkuiUsersStack__photo--others")
-  }, /*#__PURE__*/React.createElement("span", null, "+", count)) : null;
+    className: (0, _vkjs.classNames)("vkuiUsersStack__photo", "vkuiUsersStack__photo--others")
+  }, "+", count) : null;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiUsersStack", styles["UsersStack--size-".concat(size)], styles["UsersStack--layout-".concat(layout)], canShowOthers && "vkuiUsersStack--others", className)
+    className: (0, _vkjs.classNames)("vkuiUsersStack", styles["UsersStack--size-".concat(size)], styles["UsersStack--layout-".concat(layout)], canShowOthers && "vkuiUsersStack--others", className)
   }), (photosElements.length > 0 || othersElement) && /*#__PURE__*/React.createElement("div", {
     className: "vkuiUsersStack__photos",
     role: "presentation"
-  }, photosElements, othersElement), (0, _utils.hasReactNode)(children) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
+  }, photosElements, othersElement), (0, _vkjs.hasReactNode)(children) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
     className: "vkuiUsersStack__text"
   }, children));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"UsersStack.js","names":["PathElement","photoSize","direction","props","radius","photoSizes","s","m","l","UsersStack","photos","visibleCount","count","Math","max","length","size","layout","children","className","restProps","cmpId","useId","canShowOthers","CounterTypography","Footnote","Caption","directionClip","photosElements","slice","map","photo","i","id","hrefID","maskID","othersElement","classNamesString","styles","hasReactNode"],"sources":["../../../../src/components/UsersStack/UsersStack.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { useId } from \"../../hooks/useId\";\nimport styles from \"./UsersStack.module.css\";\n\nexport interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Массив ссылок на фотографии\n   */\n  photos?: string[];\n  /**\n   * Размер аватарок\n   */\n  size?: \"s\" | \"m\" | \"l\";\n  /**\n   * Вертикальный режим рекомендуется использовать с размером `m`\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /**\n   * Количество аватарок, которые будут показаны.\n   * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n   */\n  visibleCount?: number;\n  /**\n   * Число, которое будет указано в счетчике.\n   * По умолчанию высчитывается по формуле `photos.length - visibleCount`.\n   * Если число больше 99, то счетчик скроется.\n   */\n  count?: number;\n}\n\ninterface PathElementProps extends React.SVGAttributes<SVGElement> {\n  photoSize: number;\n  direction: \"circle\" | \"right\" | \"left\";\n}\n\ntype PhotoSizeType = 16 | 24 | 32;\n\nfunction PathElement({ photoSize, direction, ...props }: PathElementProps) {\n  switch (direction) {\n    case \"circle\":\n      const radius = photoSize / 2;\n\n      return <circle cx={radius} cy={radius} r={radius} {...props} />;\n\n    case \"right\":\n      switch (photoSize) {\n        case 24:\n          return (\n            <path\n              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              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              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              {...props}\n            />\n          );\n      }\n\n    default:\n      switch (photoSize) {\n        case 16:\n          return (\n            <path\n              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              {...props}\n            />\n          );\n        case 24:\n          return (\n            <path\n              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              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              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              {...props}\n            />\n          );\n      }\n  }\n}\n\nconst photoSizes: Record<\n  NonNullable<UsersStackProps[\"size\"]>,\n  PhotoSizeType\n> = {\n  s: 16,\n  m: 24,\n  l: 32,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/UsersStack\n */\nexport const UsersStack = ({\n  photos = [],\n  visibleCount = 3,\n  count = Math.max(0, photos.length - visibleCount),\n  size = \"m\",\n  layout = \"horizontal\",\n  children,\n  className,\n  ...restProps\n}: UsersStackProps) => {\n  const cmpId = useId();\n\n  const canShowOthers = count > 0 && size !== \"s\";\n  const CounterTypography = size === \"m\" ? Footnote : Caption;\n\n  const photoSize = photoSizes[size];\n  const directionClip = canShowOthers ? \"right\" : \"left\";\n\n  const photosElements = photos.slice(0, visibleCount).map((photo, i) => {\n    const direction = i === 0 && !canShowOthers ? \"circle\" : directionClip;\n\n    const id = `UsersStackDefs${cmpId}${i}`;\n    const hrefID = `#${id}`;\n    const maskID = `UsersStackMask${cmpId}${i}`;\n\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={styles[\"UsersStack__photo\"]}\n        key={i}\n        aria-hidden\n      >\n        <defs>\n          <PathElement id={id} direction={direction} photoSize={photoSize} />\n        </defs>\n        <clipPath id={maskID}>\n          <use href={hrefID} />\n        </clipPath>\n        <g clipPath={`url(#${maskID})`}>\n          <use href={hrefID} className={styles[\"UsersStack__fill\"]} />\n          <image href={photo} width={photoSize} height={photoSize} />\n          <use href={hrefID} fill=\"none\" stroke=\"rgba(0, 0, 0, 0.08)\" />\n        </g>\n      </svg>\n    );\n  });\n  const othersElement = canShowOthers ? (\n    <CounterTypography\n      caps\n      weight=\"1\"\n      className={classNamesString(\n        styles[\"UsersStack__photo\"],\n        styles[\"UsersStack__photo--others\"]\n      )}\n    >\n      <span>+{count}</span>\n    </CounterTypography>\n  ) : null;\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(\n        styles[\"UsersStack\"],\n        styles[`UsersStack--size-${size}`],\n        styles[`UsersStack--layout-${layout}`],\n        canShowOthers && styles[\"UsersStack--others\"],\n        className\n      )}\n    >\n      {(photosElements.length > 0 || othersElement) && (\n        <div className={styles[\"UsersStack__photos\"]} role=\"presentation\">\n          {photosElements}\n          {othersElement}\n        </div>\n      )}\n      {hasReactNode(children) && (\n        <Footnote className={styles[\"UsersStack__text\"]}>{children}</Footnote>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"UsersStack.js","names":["PathElement","photoSize","direction","props","radius","photoSizes","s","m","l","UsersStack","photos","visibleCount","count","Math","max","length","size","layout","children","className","restProps","cmpId","useId","canShowOthers","CounterTypography","Footnote","Caption","directionClip","photosElements","slice","map","photo","i","id","hrefID","maskID","othersElement","classNames","styles","hasReactNode"],"sources":["../../../../src/components/UsersStack/UsersStack.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { useId } from '../../hooks/useId';\nimport styles from './UsersStack.module.css';\n\nexport interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Массив ссылок на фотографии\n   */\n  photos?: string[];\n  /**\n   * Размер аватарок\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Вертикальный режим рекомендуется использовать с размером `m`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Количество аватарок, которые будут показаны.\n   * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n   */\n  visibleCount?: number;\n  /**\n   * Число, которое будет указано в счетчике.\n   * По умолчанию высчитывается по формуле `photos.length - visibleCount`.\n   * Если число больше 99, то счетчик скроется.\n   */\n  count?: number;\n}\n\ninterface PathElementProps extends React.SVGAttributes<SVGElement> {\n  photoSize: number;\n  direction: 'circle' | 'right' | 'left';\n}\n\ntype PhotoSizeType = 16 | 24 | 32;\n\nfunction PathElement({ photoSize, direction, ...props }: PathElementProps) {\n  switch (direction) {\n    case 'circle':\n      const radius = photoSize / 2;\n\n      return <circle cx={radius} cy={radius} r={radius} {...props} />;\n\n    case 'right':\n      switch (photoSize) {\n        case 24:\n          return (\n            <path\n              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              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              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              {...props}\n            />\n          );\n      }\n\n    default:\n      switch (photoSize) {\n        case 16:\n          return (\n            <path\n              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              {...props}\n            />\n          );\n        case 24:\n          return (\n            <path\n              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              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              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              {...props}\n            />\n          );\n      }\n  }\n}\n\nconst photoSizes: Record<NonNullable<UsersStackProps['size']>, PhotoSizeType> = {\n  s: 16,\n  m: 24,\n  l: 32,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/UsersStack\n */\nexport const UsersStack = ({\n  photos = [],\n  visibleCount = 3,\n  count = Math.max(0, photos.length - visibleCount),\n  size = 'm',\n  layout = 'horizontal',\n  children,\n  className,\n  ...restProps\n}: UsersStackProps) => {\n  const cmpId = useId();\n\n  const canShowOthers = count > 0 && size !== 's';\n  const CounterTypography = size === 'l' ? Footnote : Caption;\n\n  const photoSize = photoSizes[size];\n  const directionClip = canShowOthers ? 'right' : 'left';\n\n  const photosElements = photos.slice(0, visibleCount).map((photo, i) => {\n    const direction = i === 0 && !canShowOthers ? 'circle' : directionClip;\n\n    const id = `UsersStackDefs${cmpId}${i}`;\n    const hrefID = `#${id}`;\n    const maskID = `UsersStackMask${cmpId}${i}`;\n\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={styles['UsersStack__photo']}\n        key={i}\n        aria-hidden\n      >\n        <defs>\n          <PathElement id={id} direction={direction} photoSize={photoSize} />\n        </defs>\n        <clipPath id={maskID}>\n          <use href={hrefID} />\n        </clipPath>\n        <g clipPath={`url(#${maskID})`}>\n          <use href={hrefID} className={styles['UsersStack__fill']} />\n          <image href={photo} width={photoSize} height={photoSize} />\n          <use href={hrefID} fill=\"none\" stroke=\"rgba(0, 0, 0, 0.08)\" />\n        </g>\n      </svg>\n    );\n  });\n  const othersElement = canShowOthers ? (\n    <CounterTypography\n      caps\n      weight=\"1\"\n      className={classNames(styles['UsersStack__photo'], styles['UsersStack__photo--others'])}\n    >\n      +{count}\n    </CounterTypography>\n  ) : null;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['UsersStack'],\n        styles[`UsersStack--size-${size}`],\n        styles[`UsersStack--layout-${layout}`],\n        canShowOthers && styles['UsersStack--others'],\n        className,\n      )}\n    >\n      {(photosElements.length > 0 || othersElement) && (\n        <div className={styles['UsersStack__photos']} role=\"presentation\">\n          {photosElements}\n          {othersElement}\n        </div>\n      )}\n      {hasReactNode(children) && (\n        <Footnote className={styles['UsersStack__text']}>{children}</Footnote>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { NavIdProps } from "../../lib/getNavId";
+import * as React from 'react';
+import { NavIdProps } from '../../lib/getNavId';
 declare enum SwipeBackResults {
     fail = 1,
     success = 2
@@ -24,8 +24,10 @@ export interface ViewProps extends React.HTMLAttributes<HTMLElement>, NavIdProps
     onSwipeBack?(): void;
     /**
      * callback начала анимации свайпа назад.
+     *
+     * Чтобы остановить свайп назад, возвращайте `"prevent"`.
      */
-    onSwipeBackStart?(): void;
+    onSwipeBackStart?(activePanel: string | null): void | 'prevent';
     /**
      * callback завершения анимации отмененного пользователем свайпа
      */

package/dist/cjs/components/View/View.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _supportEvents = require("../../lib/supportEvents");
 var _platform = require("../../lib/platform");
 var _Touch = require("../Touch/Touch");
@@ -27,8 +27,8 @@ var _useWaitTransitionFinish = require("../../hooks/useWaitTransitionFinish");
 var _useTimeout = require("../../hooks/useTimeout");
 var _usePrevious = require("../../hooks/usePrevious");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-var _utils2 = require("../../lib/utils");
 var _excluded = ["activePanel", "history", "nav", "onTransition", "onSwipeBack", "onSwipeBackStart", "onSwipeBackCancel", "children", "className"];
+var SWIPE_BACK_AREA = 70;
 var SwipeBackResults;
 (function (SwipeBackResults) {
   SwipeBackResults[SwipeBackResults["fail"] = 1] = "fail";
@@ -36,7 +36,7 @@ var SwipeBackResults;
 })(SwipeBackResults || (SwipeBackResults = {}));
 var scrollsCache = {};
 exports.scrollsCache = scrollsCache;
-var warn = (0, _warnOnce.warnOnce)("View");
+var warn = (0, _warnOnce.warnOnce)('View');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/View
@@ -56,7 +56,7 @@ var View = function View(_ref) {
     nav: nav,
     id: restProps.id
   })] || {});
-  var afterTransition = React.useRef(_utils2.noop);
+  var afterTransition = React.useRef(_vkjs.noop);
   React.useEffect(function () {
     return function () {
       var id = (0, _getNavId.getNavId)({
@@ -104,30 +104,34 @@ var View = function View(_ref) {
     _React$useState14 = (0, _slicedToArray2.default)(_React$useState13, 2),
     swipingBack = _React$useState14[0],
     setSwipingBack = _React$useState14[1];
-  var _React$useState15 = React.useState(0),
+  var _React$useState15 = React.useState(false),
     _React$useState16 = (0, _slicedToArray2.default)(_React$useState15, 2),
-    swipeBackStartX = _React$useState16[0],
-    setSwipeBackStartX = _React$useState16[1];
+    swipeBackPrevented = _React$useState16[0],
+    setSwipeBackPrevented = _React$useState16[1];
   var _React$useState17 = React.useState(0),
     _React$useState18 = (0, _slicedToArray2.default)(_React$useState17, 2),
-    swipeBackShift = _React$useState18[0],
-    setSwipeBackShift = _React$useState18[1];
-  var _React$useState19 = React.useState(null),
+    swipeBackStartX = _React$useState18[0],
+    setSwipeBackStartX = _React$useState18[1];
+  var _React$useState19 = React.useState(0),
     _React$useState20 = (0, _slicedToArray2.default)(_React$useState19, 2),
-    swipeBackNextPanel = _React$useState20[0],
-    setSwipeBackNextPanel = _React$useState20[1];
+    swipeBackShift = _React$useState20[0],
+    setSwipeBackShift = _React$useState20[1];
   var _React$useState21 = React.useState(null),
     _React$useState22 = (0, _slicedToArray2.default)(_React$useState21, 2),
-    swipeBackPrevPanel = _React$useState22[0],
-    setSwipeBackPrevPanel = _React$useState22[1];
+    swipeBackNextPanel = _React$useState22[0],
+    setSwipeBackNextPanel = _React$useState22[1];
   var _React$useState23 = React.useState(null),
     _React$useState24 = (0, _slicedToArray2.default)(_React$useState23, 2),
-    swipeBackResult = _React$useState24[0],
-    setSwipeBackResult = _React$useState24[1];
-  var _React$useState25 = React.useState(false),
+    swipeBackPrevPanel = _React$useState24[0],
+    setSwipeBackPrevPanel = _React$useState24[1];
+  var _React$useState25 = React.useState(null),
     _React$useState26 = (0, _slicedToArray2.default)(_React$useState25, 2),
-    browserSwipe = _React$useState26[0],
-    setBrowserSwipe = _React$useState26[1];
+    swipeBackResult = _React$useState26[0],
+    setSwipeBackResult = _React$useState26[1];
+  var _React$useState27 = React.useState(false),
+    _React$useState28 = (0, _slicedToArray2.default)(_React$useState27, 2),
+    browserSwipe = _React$useState28[0],
+    setBrowserSwipe = _React$useState28[1];
   var prevActivePanel = (0, _usePrevious.usePrevious)(activePanelProp);
   var prevSwipingBack = (0, _usePrevious.usePrevious)(swipingBack);
   var prevBrowserSwipe = (0, _usePrevious.usePrevious)(browserSwipe);
@@ -138,7 +142,7 @@ var View = function View(_ref) {
     var panelId = (0, _getNavId.getNavId)(panel.props, warn);
     return panelId !== undefined && visiblePanels.includes(panelId) || panelId === swipeBackPrevPanel || panelId === swipeBackNextPanel;
   });
-  var disableAnimation = (configProvider === null || configProvider === void 0 ? void 0 : configProvider.transitionMotionEnabled) === false || !(splitCol !== null && splitCol !== void 0 && splitCol.animate);
+  var disableAnimation = (configProvider === null || configProvider === void 0 ? void 0 : configProvider.transitionMotionEnabled) === false || !(splitCol !== null && splitCol !== void 0 && splitCol.animate) || platform === _platform.Platform.VKCOM;
   var pickPanel = function pickPanel(id) {
     if (id === null) {
       return null;
@@ -166,10 +170,10 @@ var View = function View(_ref) {
   }, [activePanelProp, onTransition, scroll]);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     afterTransition.current();
-    afterTransition.current = _utils2.noop;
+    afterTransition.current = _vkjs.noop;
   }, [afterTransition.current]);
   var transitionEndHandler = React.useCallback(function (e) {
-    if ((!e || ["vkui-animation-ios-next-forward", "vkui-animation-ios-prev-back", "vkui-animation-view-next-forward", "vkui-animation-view-prev-back"].includes(e.animationName)) && prevPanel !== null) {
+    if ((!e || ['vkui-animation-ios-next-forward', 'vkui-animation-ios-prev-back', 'vkui-animation-view-next-forward', 'vkui-animation-view-prev-back'].includes(e.animationName)) && prevPanel !== null) {
       flushTransition(prevPanel, Boolean(isBack));
     }
   }, [flushTransition, isBack, prevPanel]);
@@ -190,7 +194,7 @@ var View = function View(_ref) {
   }, [onSwipeBackCancelProp]);
   var swipingBackTransitionEndHandler = React.useCallback(function (e) {
     // indexOf because of vendor prefixes in old browsers
-    if (!e || e !== null && e !== void 0 && e.propertyName.includes("transform") && (e === null || e === void 0 ? void 0 : e.target) === pickPanel(swipeBackNextPanel)) {
+    if (!e || e !== null && e !== void 0 && e.propertyName.includes('transform') && (e === null || e === void 0 ? void 0 : e.target) === pickPanel(swipeBackNextPanel)) {
       switch (swipeBackResult) {
         case SwipeBackResults.fail:
           onSwipeBackCancel();
@@ -200,48 +204,57 @@ var View = function View(_ref) {
       }
     }
   }, [onSwipeBackCancel, onSwipeBackSuccess, swipeBackNextPanel, swipeBackResult]);
-  var onMoveX = function onMoveX(e) {
-    if ((0, _utils.swipeBackExcluded)(e)) {
+  var onMoveX = function onMoveX(event) {
+    if (platform !== _platform.Platform.IOS || swipeBackPrevented || (0, _utils.swipeBackExcluded)(event) || disableAnimation) {
       return;
     }
-    if (platform === _platform.Platform.IOS && !(configProvider !== null && configProvider !== void 0 && configProvider.isWebView) && (e.startX <= 70 || e.startX >= window.innerWidth - 70) && !browserSwipe) {
-      setBrowserSwipe(true);
-    }
-    if (platform === _platform.Platform.IOS && configProvider !== null && configProvider !== void 0 && configProvider.isWebView && onSwipeBack) {
-      if (animated && e.startX <= 70 || !window) {
-        return;
+    if (!(configProvider !== null && configProvider !== void 0 && configProvider.isWebView)) {
+      if ((event.startX <= SWIPE_BACK_AREA || event.startX >= window.innerWidth - SWIPE_BACK_AREA) && !browserSwipe) {
+        setBrowserSwipe(true);
       }
-      if (e.startX <= 70 && !swipingBack && history && history.length > 1) {
-        if (activePanel !== null) {
-          // Note: вызываем закрытие клавиатуры. В iOS это нативное поведение при свайпе.
-          (0, _dom.blurActiveElement)(document);
-          scrolls.current[activePanel] = scroll === null || scroll === void 0 ? void 0 : scroll.getScroll().y;
+      return;
+    }
+    if (!onSwipeBack || animated && event.startX <= SWIPE_BACK_AREA) {
+      return;
+    }
+    if (!swipingBack && event.startX <= SWIPE_BACK_AREA && history && history.length > 1) {
+      // Начался свайп назад
+      if (onSwipeBackStart) {
+        var payload = onSwipeBackStart(activePanel);
+        if (payload === 'prevent') {
+          setSwipeBackPrevented(true);
+          return;
         }
-        setSwipingBack(true);
-        setSwipeBackStartX(e.startX);
-        setSwipeBackPrevPanel(activePanel);
-        setSwipeBackNextPanel(history.slice(-2)[0]);
       }
-      if (swipingBack) {
-        var _swipeBackShift = 0;
-        if (e.shiftX < 0) {
-          _swipeBackShift = 0;
-        } else if (e.shiftX > window.innerWidth - swipeBackStartX) {
-          _swipeBackShift = window === null || window === void 0 ? void 0 : window.innerWidth;
-        } else {
-          _swipeBackShift = e.shiftX;
-        }
-        setSwipeBackShift(_swipeBackShift);
+      if (activePanel !== null) {
+        // Note: вызываем закрытие клавиатуры. В iOS это нативное поведение при свайпе.
+        (0, _dom.blurActiveElement)(document);
+        scrolls.current[activePanel] = scroll === null || scroll === void 0 ? void 0 : scroll.getScroll().y;
       }
+      setSwipingBack(true);
+      setSwipeBackStartX(event.startX);
+      setSwipeBackPrevPanel(activePanel);
+      setSwipeBackNextPanel(history.slice(-2)[0]);
+    }
+    if (swipingBack) {
+      var _swipeBackShift = 0;
+      if (event.shiftX < 0) {
+        _swipeBackShift = 0;
+      } else if (event.shiftX > window.innerWidth - swipeBackStartX) {
+        _swipeBackShift = window.innerWidth;
+      } else {
+        _swipeBackShift = event.shiftX;
+      }
+      setSwipeBackShift(_swipeBackShift);
     }
   };
-  var onEnd = React.useCallback(function (e) {
-    if (swipingBack && window) {
-      var _window$innerWidth;
-      var speed = swipeBackShift / e.duration * 1000;
+  var onEnd = React.useCallback(function (event) {
+    if (swipingBack) {
+      var _innerWidth;
+      var speed = swipeBackShift / event.duration * 1000;
       if (swipeBackShift === 0) {
         onSwipeBackCancel();
-      } else if (swipeBackShift >= ((_window$innerWidth = window === null || window === void 0 ? void 0 : window.innerWidth) !== null && _window$innerWidth !== void 0 ? _window$innerWidth : 0)) {
+      } else if (swipeBackShift >= ((_innerWidth = window.innerWidth) !== null && _innerWidth !== void 0 ? _innerWidth : 0)) {
         onSwipeBackSuccess();
       } else if (speed > 250 || swipeBackStartX + swipeBackShift > window.innerWidth / 2) {
         setSwipeBackResult(SwipeBackResults.success);
@@ -249,7 +262,10 @@ var View = function View(_ref) {
         setSwipeBackResult(SwipeBackResults.fail);
       }
     }
-  }, [onSwipeBackCancel, onSwipeBackSuccess, swipeBackShift, swipeBackStartX, swipingBack, window]);
+    if (swipeBackPrevented) {
+      setSwipeBackPrevented(false);
+    }
+  }, [onSwipeBackCancel, onSwipeBackSuccess, swipeBackShift, swipeBackStartX, swipingBack, swipeBackPrevented, window]);
   var calcPanelSwipeStyles = function calcPanelSwipeStyles(panelId) {
     if (!_dom.canUseDOM || !window) {
       return {};
@@ -337,11 +353,6 @@ var View = function View(_ref) {
       };
     }
 
-    // Начался свайп назад
-    if (!prevSwipingBack && swipingBack) {
-      onSwipeBackStart && onSwipeBackStart();
-    }
-
     // Началась анимация завершения свайпа назад.
     if (!prevSwipeBackResult && swipeBackResult) {
       waitTransitionFinish(pickPanel(swipeBackNextPanel), swipingBackTransitionEndHandler, platform === _platform.Platform.IOS ? 600 : 300);
@@ -365,7 +376,7 @@ var View = function View(_ref) {
   return /*#__PURE__*/React.createElement(_Touch.Touch, (0, _extends2.default)({
     Component: "section"
   }, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiView", platform === _platform.Platform.IOS && "vkuiView--ios", !disableAnimation && animated && "vkuiView--animated", !disableAnimation && swipingBack && "vkuiView--swiping-back", disableAnimation && "vkuiView--no-motion", className),
+    className: (0, _vkjs.classNames)("vkuiView", platform === _platform.Platform.IOS && "vkuiView--ios", !disableAnimation && animated && "vkuiView--animated", !disableAnimation && swipingBack && "vkuiView--swiping-back", disableAnimation && "vkuiView--no-motion", className),
     onMoveX: onMoveX,
     onEnd: onEnd
   }), /*#__PURE__*/React.createElement("div", {
@@ -377,7 +388,7 @@ var View = function View(_ref) {
     var isTransitionTarget = animated && panelId === (isBack ? prevPanel : nextPanel);
     var compensateScroll = isPrev || panelId === swipeBackNextPanel || panelId === nextPanel && isBack;
     return /*#__PURE__*/React.createElement("div", {
-      className: (0, _classNames.classNamesString)("vkuiView__panel", panelId === activePanel && "vkuiView__panel--active", panelId === prevPanel && "vkuiView__panel--prev", panelId === nextPanel && "vkuiView__panel--next", panelId === swipeBackPrevPanel && "vkuiView__panel--swipe-back-prev", panelId === swipeBackNextPanel && "vkuiView__panel--swipe-back-next", swipeBackResult === SwipeBackResults.success && "vkuiView__panel--swipe-back-success", swipeBackResult === SwipeBackResults.fail && "vkuiView__panel--swipe-back-failed"),
+      className: (0, _vkjs.classNames)("vkuiView__panel", panelId === activePanel && "vkuiView__panel--active", panelId === prevPanel && "vkuiView__panel--prev", panelId === nextPanel && "vkuiView__panel--next", panelId === swipeBackPrevPanel && "vkuiView__panel--swipe-back-prev", panelId === swipeBackNextPanel && "vkuiView__panel--swipe-back-next", swipeBackResult === SwipeBackResults.success && "vkuiView__panel--swipe-back-success", swipeBackResult === SwipeBackResults.fail && "vkuiView__panel--swipe-back-failed"),
       onAnimationEnd: isTransitionTarget ? transitionEndHandler : undefined,
       ref: function ref(el) {
         return panelId !== undefined && (panelNodes.current[panelId] = el);