@vkontakte/vkui 4.34.2 → 4.35.0

package/dist/cjs/components/HorizontalCell/HorizontalCell.js

@@ -15,10 +15,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _classNames = require("../../lib/classNames");
 
-var _getClassName = require("../../helpers/getClassName");
-
-var _usePlatform = require("../../hooks/usePlatform");
-
 var _utils = require("../../lib/utils");
 
 var _Caption = require("../Typography/Caption/Caption");
@@ -27,6 +23,8 @@ var _Tappable = require("../Tappable/Tappable");
 
 var _Subhead = require("../Typography/Subhead/Subhead");
 
+var _Footnote = require("../Typography/Footnote/Footnote");
+
 var _Avatar = require("../Avatar/Avatar");
 
 var _excluded = ["size", "children"],
@@ -58,9 +56,8 @@ var HorizontalCell = function HorizontalCell(_ref2) {
       getRootRef = _ref2.getRootRef,
       getRef = _ref2.getRef,
       restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  var platform = (0, _usePlatform.usePlatform)();
   return (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("HorizontalCell", platform), "HorizontalCell--".concat(size)),
+    vkuiClass: (0, _classNames.classNames)("HorizontalCell", "HorizontalCell--".concat(size)),
     ref: getRootRef,
     style: style,
     className: className
@@ -74,7 +71,7 @@ var HorizontalCell = function HorizontalCell(_ref2) {
   }, (0, _utils.hasReactNode)(header) && (0, _jsxRuntime.createScopedElement)(CellTypography, {
     size: size,
     vkuiClass: "HorizontalCell__title"
-  }, header), (0, _utils.hasReactNode)(subtitle) && (0, _jsxRuntime.createScopedElement)(_Caption.Caption, {
+  }, header), (0, _utils.hasReactNode)(subtitle) && (0, _jsxRuntime.createScopedElement)(_Footnote.Footnote, {
     vkuiClass: "HorizontalCell__subtitle"
   }, subtitle))));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":["CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","platform"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;AAQA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAII;AAAA,MAHzBC,IAGyB,QAHzBA,IAGyB;AAAA,MAFzBC,QAEyB,QAFzBA,QAEyB;AAAA,MADtBC,SACsB;AACzB,SAAOF,IAAI,KAAK,GAAT,GACL,qCAAC,gBAAD;AAAS,IAAA,KAAK,EAAC;AAAf,KAAuBE,SAAvB,GACGD,QADH,CADK,GAKL,qCAAC,gBAAD,EAAaC,SAAb,EAAyBD,QAAzB,CALF;AAOD,CAZD;;AAyBA;AACA;AACA;AACO,IAAME,cAAc,GAAG,SAAjBA,cAAiB,QAUH;AAAA,MATzBC,SASyB,SATzBA,SASyB;AAAA,MARzBC,MAQyB,SARzBA,MAQyB;AAAA,MAPzBC,KAOyB,SAPzBA,KAOyB;AAAA,MANzBC,QAMyB,SANzBA,QAMyB;AAAA,yBALzBP,IAKyB;AAAA,MALzBA,IAKyB,2BALlB,GAKkB;AAAA,6BAJzBC,QAIyB;AAAA,MAJzBA,QAIyB,+BAJd,qCAAC,cAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAIc;AAAA,MAHzBO,UAGyB,SAHzBA,UAGyB;AAAA,MAFzBC,MAEyB,SAFzBA,MAEyB;AAAA,MADtBP,SACsB;AACzB,MAAMQ,QAAQ,GAAG,+BAAjB;AAEA,SACE;AACE,IAAA,SAAS,EAAE,4BACT,gCAAa,gBAAb,EAA+BA,QAA/B,CADS,4BAEUV,IAFV,EADb;AAKE,IAAA,GAAG,EAAEQ,UALP;AAME,IAAA,KAAK,EAAEF,KANT;AAOE,IAAA,SAAS,EAAEF;AAPb,KASE,qCAAC,kBAAD;AACE,IAAA,SAAS,EAAC,sBADZ;AAEE,IAAA,UAAU,EAAEK;AAFd,KAGMP,SAHN,GAKG,yBAAaD,QAAb,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAwCA,QAAxC,CANJ,EAQE;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,yBAAaI,MAAb,KACC,qCAAC,cAAD;AAAgB,IAAA,IAAI,EAAEL,IAAtB;AAA4B,IAAA,SAAS,EAAC;AAAtC,KACGK,MADH,CAFJ,EAMG,yBAAaE,QAAb,KACC,qCAAC,gBAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KAA+CA,QAA/C,CAPJ,CARF,CATF,CADF;AA+BD,CA5CM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { HasComponent, HasRef, HasRootRef } from \"../../types\";\nimport \"./HorizontalCell.css\";\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: HorizontalCellProps[\"size\"];\n}\n\nconst CellTypography = ({\n  size,\n  children,\n  ...restProps\n}: CellTypographyProps) => {\n  return size === \"s\" ? (\n    <Caption level=\"2\" {...restProps}>\n      {children}\n    </Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: \"s\" | \"m\" | \"l\";\n  header?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = \"s\",\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  ...restProps\n}: HorizontalCellProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      vkuiClass={classNames(\n        getClassName(\"HorizontalCell\", platform),\n        `HorizontalCell--${size}`\n      )}\n      ref={getRootRef}\n      style={style}\n      className={className}\n    >\n      <Tappable\n        vkuiClass=\"HorizontalCell__body\"\n        getRootRef={getRef}\n        {...restProps}\n      >\n        {hasReactNode(children) && (\n          <div vkuiClass=\"HorizontalCell__image\">{children}</div>\n        )}\n        <div vkuiClass=\"HorizontalCell__content\">\n          {hasReactNode(header) && (\n            <CellTypography size={size} vkuiClass=\"HorizontalCell__title\">\n              {header}\n            </CellTypography>\n          )}\n          {hasReactNode(subtitle) && (\n            <Caption vkuiClass=\"HorizontalCell__subtitle\">{subtitle}</Caption>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"file":"HorizontalCell.js"}
+{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":["CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;AAQA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAII;AAAA,MAHzBC,IAGyB,QAHzBA,IAGyB;AAAA,MAFzBC,QAEyB,QAFzBA,QAEyB;AAAA,MADtBC,SACsB;AACzB,SAAOF,IAAI,KAAK,GAAT,GACL,qCAAC,gBAAD;AAAS,IAAA,KAAK,EAAC;AAAf,KAAuBE,SAAvB,GACGD,QADH,CADK,GAKL,qCAAC,gBAAD,EAAaC,SAAb,EAAyBD,QAAzB,CALF;AAOD,CAZD;;AAyBA;AACA;AACA;AACO,IAAME,cAAc,GAAG,SAAjBA,cAAiB,QAUH;AAAA,MATzBC,SASyB,SATzBA,SASyB;AAAA,MARzBC,MAQyB,SARzBA,MAQyB;AAAA,MAPzBC,KAOyB,SAPzBA,KAOyB;AAAA,MANzBC,QAMyB,SANzBA,QAMyB;AAAA,yBALzBP,IAKyB;AAAA,MALzBA,IAKyB,2BALlB,GAKkB;AAAA,6BAJzBC,QAIyB;AAAA,MAJzBA,QAIyB,+BAJd,qCAAC,cAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAIc;AAAA,MAHzBO,UAGyB,SAHzBA,UAGyB;AAAA,MAFzBC,MAEyB,SAFzBA,MAEyB;AAAA,MADtBP,SACsB;AACzB,SACE;AACE,IAAA,SAAS,EAAE,4BAAW,gBAAX,4BAAgDF,IAAhD,EADb;AAEE,IAAA,GAAG,EAAEQ,UAFP;AAGE,IAAA,KAAK,EAAEF,KAHT;AAIE,IAAA,SAAS,EAAEF;AAJb,KAME,qCAAC,kBAAD;AACE,IAAA,SAAS,EAAC,sBADZ;AAEE,IAAA,UAAU,EAAEK;AAFd,KAGMP,SAHN,GAKG,yBAAaD,QAAb,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAwCA,QAAxC,CANJ,EAQE;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,yBAAaI,MAAb,KACC,qCAAC,cAAD;AAAgB,IAAA,IAAI,EAAEL,IAAtB;AAA4B,IAAA,SAAS,EAAC;AAAtC,KACGK,MADH,CAFJ,EAMG,yBAAaE,QAAb,KACC,qCAAC,kBAAD;AAAU,IAAA,SAAS,EAAC;AAApB,KAAgDA,QAAhD,CAPJ,CARF,CANF,CADF;AA4BD,CAvCM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { HasComponent, HasRef, HasRootRef } from \"../../types\";\nimport \"./HorizontalCell.css\";\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: HorizontalCellProps[\"size\"];\n}\n\nconst CellTypography = ({\n  size,\n  children,\n  ...restProps\n}: CellTypographyProps) => {\n  return size === \"s\" ? (\n    <Caption level=\"2\" {...restProps}>\n      {children}\n    </Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: \"s\" | \"m\" | \"l\";\n  header?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = \"s\",\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      vkuiClass={classNames(\"HorizontalCell\", `HorizontalCell--${size}`)}\n      ref={getRootRef}\n      style={style}\n      className={className}\n    >\n      <Tappable\n        vkuiClass=\"HorizontalCell__body\"\n        getRootRef={getRef}\n        {...restProps}\n      >\n        {hasReactNode(children) && (\n          <div vkuiClass=\"HorizontalCell__image\">{children}</div>\n        )}\n        <div vkuiClass=\"HorizontalCell__content\">\n          {hasReactNode(header) && (\n            <CellTypography size={size} vkuiClass=\"HorizontalCell__title\">\n              {header}\n            </CellTypography>\n          )}\n          {hasReactNode(subtitle) && (\n            <Footnote vkuiClass=\"HorizontalCell__subtitle\">{subtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"file":"HorizontalCell.js"}

package/dist/cjs/components/MiniInfoCell/MiniInfoCell.js

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _classNames = require("../../lib/classNames");
 
-var _Text = require("../Typography/Text/Text");
+var _Paragraph = require("../Typography/Paragraph/Paragraph");
 
 var _Tappable = require("../Tappable/Tappable");
 
@@ -46,7 +46,7 @@ var MiniInfoCell = function MiniInfoCell(_ref) {
     vkuiClass: (0, _classNames.classNames)("MiniInfoCell", mode !== "base" && "MiniInfoCell--md-".concat(mode), textWrap !== "nowrap" && "MiniInfoCell--wr-".concat(textWrap), "MiniInfoCell--lvl-".concat(textLevel))
   }), (0, _jsxRuntime.createScopedElement)("span", {
     vkuiClass: "MiniInfoCell__icon"
-  }, before), (0, _jsxRuntime.createScopedElement)(_Text.Text, {
+  }, before), (0, _jsxRuntime.createScopedElement)(_Paragraph.Paragraph, {
     vkuiClass: "MiniInfoCell__content",
     weight: mode === "more" ? "2" : undefined
   }, children), (0, _utils.hasReactNode)(after) && (0, _jsxRuntime.createScopedElement)("span", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"names":["MiniInfoCell","before","after","mode","textWrap","textLevel","children","restProps","isClickable","onClick","undefined"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;AA6CA;AACA;AACA;AACO,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAQH;AAAA,MAPvBC,MAOuB,QAPvBA,MAOuB;AAAA,MANvBC,KAMuB,QANvBA,KAMuB;AAAA,uBALvBC,IAKuB;AAAA,MALvBA,IAKuB,0BALhB,MAKgB;AAAA,2BAJvBC,QAIuB;AAAA,MAJvBA,QAIuB,8BAJZ,QAIY;AAAA,4BAHvBC,SAGuB;AAAA,MAHvBA,SAGuB,+BAHX,WAGW;AAAA,MAFvBC,QAEuB,QAFvBA,QAEuB;AAAA,MADpBC,SACoB;AACvB,MAAMC,WAAW,GAAG,CAAC,CAACD,SAAS,CAACE,OAAhC;AAEA,SACE,qCAAC,kBAAD;AACE,IAAA,SAAS,EAAC,KADZ;AAEE,IAAA,QAAQ,EAAE,CAACD,WAFb;AAGE,IAAA,IAAI,EAAEA,WAAW,GAAG,QAAH,GAAcE;AAHjC,KAIMH,SAJN;AAKE,IAAA,SAAS,EAAE,4BACT,cADS,EAETJ,IAAI,KAAK,MAAT,+BAAuCA,IAAvC,CAFS,EAGTC,QAAQ,KAAK,QAAb,+BAA6CA,QAA7C,CAHS,8BAIYC,SAJZ;AALb,MAYE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAsCJ,MAAtC,CAZF,EAaE,qCAAC,UAAD;AACE,IAAA,SAAS,EAAC,uBADZ;AAEE,IAAA,MAAM,EAAEE,IAAI,KAAK,MAAT,GAAkB,GAAlB,GAAwBO;AAFlC,KAIGJ,QAJH,CAbF,EAmBG,yBAAaJ,KAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAuCA,KAAvC,CApBJ,CADF;AAyBD,CApCM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport \"./MiniInfoCell.css\";\n\nexport interface MiniInfoCellProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Иконка слева.<br />\n   * Рекомендуется использовать иконки размера 20.\n   */\n  before: React.ReactNode;\n\n  /**\n   * Содержимое справа.<br />\n   * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Тип ячейки:\n   *\n   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n   */\n  mode?: \"base\" | \"add\" | \"more\";\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: \"nowrap\" | \"short\" | \"full\";\n\n  /**\n   * Стиль текста:\n   *\n   * - `primary` – используйте этот стиль, если хотите выделить информацию в общем списке.<br />Пример использования: подробная информация на странице сообщества\n   * - `secondary` – стиль по-умолчанию.\n   */\n  textLevel?: \"primary\" | \"secondary\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  mode = \"base\",\n  textWrap = \"nowrap\",\n  textLevel = \"secondary\",\n  children,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const isClickable = !!restProps.onClick;\n\n  return (\n    <Tappable\n      Component=\"div\"\n      disabled={!isClickable}\n      role={isClickable ? \"button\" : undefined}\n      {...restProps}\n      vkuiClass={classNames(\n        \"MiniInfoCell\",\n        mode !== \"base\" && `MiniInfoCell--md-${mode}`,\n        textWrap !== \"nowrap\" && `MiniInfoCell--wr-${textWrap}`,\n        `MiniInfoCell--lvl-${textLevel}`\n      )}\n    >\n      <span vkuiClass=\"MiniInfoCell__icon\">{before}</span>\n      <Text\n        vkuiClass=\"MiniInfoCell__content\"\n        weight={mode === \"more\" ? \"2\" : undefined}\n      >\n        {children}\n      </Text>\n      {hasReactNode(after) && (\n        <span vkuiClass=\"MiniInfoCell__after\">{after}</span>\n      )}\n    </Tappable>\n  );\n};\n"],"file":"MiniInfoCell.js"}
+{"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"names":["MiniInfoCell","before","after","mode","textWrap","textLevel","children","restProps","isClickable","onClick","undefined"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;AA6CA;AACA;AACA;AACO,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAQH;AAAA,MAPvBC,MAOuB,QAPvBA,MAOuB;AAAA,MANvBC,KAMuB,QANvBA,KAMuB;AAAA,uBALvBC,IAKuB;AAAA,MALvBA,IAKuB,0BALhB,MAKgB;AAAA,2BAJvBC,QAIuB;AAAA,MAJvBA,QAIuB,8BAJZ,QAIY;AAAA,4BAHvBC,SAGuB;AAAA,MAHvBA,SAGuB,+BAHX,WAGW;AAAA,MAFvBC,QAEuB,QAFvBA,QAEuB;AAAA,MADpBC,SACoB;AACvB,MAAMC,WAAW,GAAG,CAAC,CAACD,SAAS,CAACE,OAAhC;AAEA,SACE,qCAAC,kBAAD;AACE,IAAA,SAAS,EAAC,KADZ;AAEE,IAAA,QAAQ,EAAE,CAACD,WAFb;AAGE,IAAA,IAAI,EAAEA,WAAW,GAAG,QAAH,GAAcE;AAHjC,KAIMH,SAJN;AAKE,IAAA,SAAS,EAAE,4BACT,cADS,EAETJ,IAAI,KAAK,MAAT,+BAAuCA,IAAvC,CAFS,EAGTC,QAAQ,KAAK,QAAb,+BAA6CA,QAA7C,CAHS,8BAIYC,SAJZ;AALb,MAYE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAsCJ,MAAtC,CAZF,EAaE,qCAAC,oBAAD;AACE,IAAA,SAAS,EAAC,uBADZ;AAEE,IAAA,MAAM,EAAEE,IAAI,KAAK,MAAT,GAAkB,GAAlB,GAAwBO;AAFlC,KAIGJ,QAJH,CAbF,EAmBG,yBAAaJ,KAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAuCA,KAAvC,CApBJ,CADF;AAyBD,CApCM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport \"./MiniInfoCell.css\";\n\nexport interface MiniInfoCellProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Иконка слева.<br />\n   * Рекомендуется использовать иконки размера 20.\n   */\n  before: React.ReactNode;\n\n  /**\n   * Содержимое справа.<br />\n   * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Тип ячейки:\n   *\n   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n   */\n  mode?: \"base\" | \"add\" | \"more\";\n\n  /**\n   * Тип отображения текста:\n   *\n   * - `nowrap` – в одну строку, текст не переносится и обрезается.\n   * - `short` – максимально отображается 3 строки, остальное обрезается.\n   * - `full` – текст отображается полностью.\n   */\n  textWrap?: \"nowrap\" | \"short\" | \"full\";\n\n  /**\n   * Стиль текста:\n   *\n   * - `primary` – используйте этот стиль, если хотите выделить информацию в общем списке.<br />Пример использования: подробная информация на странице сообщества\n   * - `secondary` – стиль по-умолчанию.\n   */\n  textLevel?: \"primary\" | \"secondary\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n  before,\n  after,\n  mode = \"base\",\n  textWrap = \"nowrap\",\n  textLevel = \"secondary\",\n  children,\n  ...restProps\n}: MiniInfoCellProps) => {\n  const isClickable = !!restProps.onClick;\n\n  return (\n    <Tappable\n      Component=\"div\"\n      disabled={!isClickable}\n      role={isClickable ? \"button\" : undefined}\n      {...restProps}\n      vkuiClass={classNames(\n        \"MiniInfoCell\",\n        mode !== \"base\" && `MiniInfoCell--md-${mode}`,\n        textWrap !== \"nowrap\" && `MiniInfoCell--wr-${textWrap}`,\n        `MiniInfoCell--lvl-${textLevel}`\n      )}\n    >\n      <span vkuiClass=\"MiniInfoCell__icon\">{before}</span>\n      <Paragraph\n        vkuiClass=\"MiniInfoCell__content\"\n        weight={mode === \"more\" ? \"2\" : undefined}\n      >\n        {children}\n      </Paragraph>\n      {hasReactNode(after) && (\n        <span vkuiClass=\"MiniInfoCell__after\">{after}</span>\n      )}\n    </Tappable>\n  );\n};\n"],"file":"MiniInfoCell.js"}

package/dist/cjs/components/Popper/Popper.js

@@ -27,6 +27,8 @@ var _reactPopper = require("react-popper");
 
 var _AppRootPortal = require("../AppRoot/AppRootPortal");
 
+var _PopperArrow = require("../PopperArrow/PopperArrow");
+
 var _usePlatform = require("../../hooks/usePlatform");
 
 var _getClassName = require("../../helpers/getClassName");
@@ -35,7 +37,7 @@ var _useExternRef = require("../../hooks/useExternRef");
 
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 
-var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "style", "customModifiers"];
+var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "style", "customModifiers", "renderContent"];
 var ARROW_PADDING = 8;
 var ARROW_WIDTH = 20;
 var ARROW_HEIGHT = 8;
@@ -63,6 +65,7 @@ var Popper = function Popper(_ref) {
       forcePortal = _ref$forcePortal === void 0 ? true : _ref$forcePortal,
       compStyles = _ref.style,
       customModifiers = _ref.customModifiers,
+      renderContent = _ref.renderContent,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _React$useState = React.useState(null),
@@ -167,24 +170,13 @@ var Popper = function Popper(_ref) {
     style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, compStyles), styles.popper), {}, {
       minWidth: sameWidth ? (_targetRef$current3 = targetRef.current) === null || _targetRef$current3 === void 0 ? void 0 : _targetRef$current3.scrollWidth : undefined
     })
-  }), arrow && (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, attributes.arrow, {
-    vkuiClass: "Popper__arrow",
-    "data-popper-arrow": true,
-    style: styles.arrow
-  }), (0, _jsxRuntime.createScopedElement)("svg", {
-    vkuiClass: "Popper__arrow-in",
-    className: arrowClassName,
-    width: "20",
-    height: "8",
-    viewBox: "0 0 20 8",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, (0, _jsxRuntime.createScopedElement)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z",
-    fill: "currentColor"
-  }))), (0, _jsxRuntime.createScopedElement)("div", {
+  }), arrow && (0, _jsxRuntime.createScopedElement)(_PopperArrow.PopperArrow, {
+    attributes: attributes.arrow,
+    style: styles.arrow,
+    arrowClassName: arrowClassName
+  }), renderContent ? renderContent({
+    className: "Popper__content"
+  }) : (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Popper__content"
   }, children));
   return (0, _jsxRuntime.createScopedElement)(_AppRootPortal.AppRootPortal, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"names":["ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","Popper","targetRef","children","getRef","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","compStyles","style","customModifiers","restProps","React","useState","popperNode","setPopperNode","smallTargetOffsetSkidding","setSmallTargetOffsetSkidding","platform","setExternalRef","modifiers","useMemo","name","options","mainAxis","offset","push","padding","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","offsetWidth","current","attributes","resolvedPlacement","isEdgePlacement","includes","placementDirection","startsWith","arrowSize","targetSize","offsetHeight","useEffect","dropdown","minWidth","scrollWidth","undefined"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { usePopper, Modifier } from \"react-popper\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { HasRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport \"./Popper.css\";\n\nexport type Placement =\n  | \"auto\"\n  | \"auto-start\"\n  | \"auto-end\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\";\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  arrow?: boolean;\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customModifiers?: Array<Modifier<string>>;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\nconst ARROW_PADDING = 8;\nconst ARROW_WIDTH = 20;\nconst ARROW_HEIGHT = 8;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement = \"bottom-start\",\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  style: compStyles,\n  customModifiers,\n  ...restProps\n}: PopperProps) => {\n  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(\n    null\n  );\n  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] =\n    React.useState(0);\n  const platform = usePlatform();\n\n  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);\n\n  const modifiers = React.useMemo(() => {\n    const modifiers: Array<Modifier<string>> = [\n      {\n        name: \"preventOverflow\",\n        options: {\n          mainAxis: false,\n        },\n      },\n      {\n        name: \"offset\",\n        options: {\n          offset: [\n            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,\n            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n          ],\n        },\n      },\n      {\n        name: \"flip\",\n      },\n    ];\n\n    if (arrow) {\n      modifiers.push({\n        name: \"arrow\",\n        options: {\n          padding: ARROW_PADDING,\n        },\n      });\n    }\n\n    if (sameWidth) {\n      const sameWidth: Modifier<string> = {\n        name: \"sameWidth\",\n        enabled: true,\n        phase: \"beforeWrite\",\n        requires: [\"computeStyles\"],\n        fn: ({ state }) => {\n          state.styles.popper.width = `${state.rects.reference.width}px`;\n        },\n        effect: ({ state }) => {\n          state.elements.popper.style.width = `${\n            (state.elements.reference as HTMLElement).offsetWidth\n          }px`;\n        },\n      };\n\n      modifiers.push(sameWidth);\n    }\n\n    if (customModifiers) {\n      modifiers.push(...customModifiers);\n    }\n    return modifiers;\n  }, [\n    arrow,\n    sameWidth,\n    smallTargetOffsetSkidding,\n    offsetSkidding,\n    offsetDistance,\n    customModifiers,\n  ]);\n\n  const { styles, state, attributes } = usePopper(\n    targetRef.current,\n    popperNode,\n    {\n      placement,\n      modifiers,\n    }\n  );\n\n  const resolvedPlacement = state?.placement;\n  const isEdgePlacement =\n    !!resolvedPlacement && resolvedPlacement.includes(\"-\"); // true, если поппер отрисован с краю\n\n  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до\n  // таргета из-за маленьких размеров последнего\n  useIsomorphicLayoutEffect(() => {\n    if (arrow && isEdgePlacement) {\n      const placementDirection =\n        resolvedPlacement?.startsWith(\"bottom\") ||\n        resolvedPlacement?.startsWith(\"top\")\n          ? \"vertical\"\n          : \"horizontal\";\n\n      const arrowSize =\n        placementDirection === \"vertical\" ? ARROW_WIDTH : ARROW_HEIGHT;\n      const targetSize =\n        (placementDirection === \"vertical\"\n          ? targetRef.current?.offsetWidth\n          : targetRef.current?.offsetHeight) ?? 0;\n\n      if (targetSize < arrowSize + 2 * ARROW_PADDING) {\n        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);\n      }\n    } else {\n      setSmallTargetOffsetSkidding(0);\n    }\n  }, [arrow, isEdgePlacement]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement) {\n      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      {...attributes.popper}\n      vkuiClass={getClassName(\"Popper\", platform)}\n      ref={setExternalRef}\n      style={{\n        ...compStyles,\n        ...styles.popper,\n        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,\n      }}\n    >\n      {arrow && (\n        <div\n          {...attributes.arrow}\n          vkuiClass=\"Popper__arrow\"\n          data-popper-arrow={true}\n          style={styles.arrow}\n        >\n          <svg\n            vkuiClass=\"Popper__arrow-in\"\n            className={arrowClassName}\n            width=\"20\"\n            height=\"8\"\n            viewBox=\"0 0 20 8\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </div>\n      )}\n      <div vkuiClass=\"Popper__content\">{children}</div>\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} vkuiClass=\"PopperPortal\">\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"file":"Popper.js"}
+{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"names":["ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","Popper","targetRef","children","getRef","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","compStyles","style","customModifiers","renderContent","restProps","React","useState","popperNode","setPopperNode","smallTargetOffsetSkidding","setSmallTargetOffsetSkidding","platform","setExternalRef","modifiers","useMemo","name","options","mainAxis","offset","push","padding","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","offsetWidth","current","attributes","resolvedPlacement","isEdgePlacement","includes","placementDirection","startsWith","arrowSize","targetSize","offsetHeight","useEffect","dropdown","minWidth","scrollWidth","undefined","className"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { usePopper, Modifier } from \"react-popper\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { PopperArrow } from \"../PopperArrow/PopperArrow\";\nimport { HasRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport \"./Popper.css\";\n\nexport type Placement =\n  | \"auto\"\n  | \"auto-start\"\n  | \"auto-end\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\";\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customModifiers?: Array<Modifier<string>>;\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\nconst ARROW_PADDING = 8;\nconst ARROW_WIDTH = 20;\nconst ARROW_HEIGHT = 8;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement = \"bottom-start\",\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  style: compStyles,\n  customModifiers,\n  renderContent,\n  ...restProps\n}: PopperProps) => {\n  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(\n    null\n  );\n  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] =\n    React.useState(0);\n  const platform = usePlatform();\n\n  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);\n\n  const modifiers = React.useMemo(() => {\n    const modifiers: Array<Modifier<string>> = [\n      {\n        name: \"preventOverflow\",\n        options: {\n          mainAxis: false,\n        },\n      },\n      {\n        name: \"offset\",\n        options: {\n          offset: [\n            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,\n            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n          ],\n        },\n      },\n      {\n        name: \"flip\",\n      },\n    ];\n\n    if (arrow) {\n      modifiers.push({\n        name: \"arrow\",\n        options: {\n          padding: ARROW_PADDING,\n        },\n      });\n    }\n\n    if (sameWidth) {\n      const sameWidth: Modifier<string> = {\n        name: \"sameWidth\",\n        enabled: true,\n        phase: \"beforeWrite\",\n        requires: [\"computeStyles\"],\n        fn: ({ state }) => {\n          state.styles.popper.width = `${state.rects.reference.width}px`;\n        },\n        effect: ({ state }) => {\n          state.elements.popper.style.width = `${\n            (state.elements.reference as HTMLElement).offsetWidth\n          }px`;\n        },\n      };\n\n      modifiers.push(sameWidth);\n    }\n\n    if (customModifiers) {\n      modifiers.push(...customModifiers);\n    }\n    return modifiers;\n  }, [\n    arrow,\n    sameWidth,\n    smallTargetOffsetSkidding,\n    offsetSkidding,\n    offsetDistance,\n    customModifiers,\n  ]);\n\n  const { styles, state, attributes } = usePopper(\n    targetRef.current,\n    popperNode,\n    {\n      placement,\n      modifiers,\n    }\n  );\n\n  const resolvedPlacement = state?.placement;\n  const isEdgePlacement =\n    !!resolvedPlacement && resolvedPlacement.includes(\"-\"); // true, если поппер отрисован с краю\n\n  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до\n  // таргета из-за маленьких размеров последнего\n  useIsomorphicLayoutEffect(() => {\n    if (arrow && isEdgePlacement) {\n      const placementDirection =\n        resolvedPlacement?.startsWith(\"bottom\") ||\n        resolvedPlacement?.startsWith(\"top\")\n          ? \"vertical\"\n          : \"horizontal\";\n\n      const arrowSize =\n        placementDirection === \"vertical\" ? ARROW_WIDTH : ARROW_HEIGHT;\n      const targetSize =\n        (placementDirection === \"vertical\"\n          ? targetRef.current?.offsetWidth\n          : targetRef.current?.offsetHeight) ?? 0;\n\n      if (targetSize < arrowSize + 2 * ARROW_PADDING) {\n        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);\n      }\n    } else {\n      setSmallTargetOffsetSkidding(0);\n    }\n  }, [arrow, isEdgePlacement]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement) {\n      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      {...attributes.popper}\n      vkuiClass={getClassName(\"Popper\", platform)}\n      ref={setExternalRef}\n      style={{\n        ...compStyles,\n        ...styles.popper,\n        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          attributes={attributes.arrow}\n          style={styles.arrow}\n          arrowClassName={arrowClassName}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: \"Popper__content\" })\n      ) : (\n        <div vkuiClass=\"Popper__content\">{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} vkuiClass=\"PopperPortal\">\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"file":"Popper.js"}

package/dist/cjs/components/PopperArrow/PopperArrow.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopperArrow = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _jsxRuntime = require("../../lib/jsxRuntime");
+
+var PopperArrow = function PopperArrow(_ref) {
+  var style = _ref.style,
+      attributes = _ref.attributes,
+      arrowClassName = _ref.arrowClassName;
+  return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({
+    style: style
+  }, attributes, {
+    vkuiClass: "PopperArrow",
+    "data-popper-arrow": true
+  }), (0, _jsxRuntime.createScopedElement)("svg", {
+    vkuiClass: "PopperArrow__in",
+    className: arrowClassName,
+    width: "20",
+    height: "8",
+    viewBox: "0 0 20 8",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, (0, _jsxRuntime.createScopedElement)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z",
+    fill: "currentColor"
+  })));
+};
+
+exports.PopperArrow = PopperArrow;
+//# sourceMappingURL=PopperArrow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"names":["PopperArrow","style","attributes","arrowClassName"],"mappings":";;;;;;;;;;;;;AASO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAIH;AAAA,MAHtBC,KAGsB,QAHtBA,KAGsB;AAAA,MAFtBC,UAEsB,QAFtBA,UAEsB;AAAA,MADtBC,cACsB,QADtBA,cACsB;AACtB,SACE;AACE,IAAA,KAAK,EAAEF;AADT,KAEMC,UAFN;AAGE,IAAA,SAAS,EAAC,aAHZ;AAIE,yBAAmB;AAJrB,MAME;AACE,IAAA,SAAS,EAAC,iBADZ;AAEE,IAAA,SAAS,EAAEC,cAFb;AAGE,IAAA,KAAK,EAAC,IAHR;AAIE,IAAA,MAAM,EAAC,GAJT;AAKE,IAAA,OAAO,EAAC,UALV;AAME,IAAA,IAAI,EAAC,MANP;AAOE,IAAA,KAAK,EAAC;AAPR,KASE;AACE,IAAA,QAAQ,EAAC,SADX;AAEE,IAAA,QAAQ,EAAC,SAFX;AAGE,IAAA,CAAC,EAAC,gDAHJ;AAIE,IAAA,IAAI,EAAC;AAJP,IATF,CANF,CADF;AAyBD,CA9BM","sourcesContent":["import * as React from \"react\";\nimport \"./PopperArrow.css\";\n\nexport interface PopperArrowProps {\n  style?: React.CSSProperties;\n  attributes?: React.HTMLAttributes<HTMLDivElement> | null;\n  arrowClassName?: string;\n}\n\nexport const PopperArrow = ({\n  style,\n  attributes,\n  arrowClassName,\n}: PopperArrowProps) => {\n  return (\n    <div\n      style={style}\n      {...attributes}\n      vkuiClass=\"PopperArrow\"\n      data-popper-arrow={true}\n    >\n      <svg\n        vkuiClass=\"PopperArrow__in\"\n        className={arrowClassName}\n        width=\"20\"\n        height=\"8\"\n        viewBox=\"0 0 20 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"file":"PopperArrow.js"}

package/dist/cjs/components/RichTooltip/RichTooltip.js

@@ -11,23 +11,15 @@ var _jsxRuntime = require("../../lib/jsxRuntime");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _HoverPopper = require("../HoverPopper/HoverPopper");
 
-var _getClassName = require("../../helpers/getClassName");
-
-var _usePlatform = require("../../hooks/usePlatform");
-
-var _useAppearance = require("../../hooks/useAppearance");
-
-var _classNames2 = require("../../lib/classNames");
+var _classNames = require("../../lib/classNames");
 
 var _prefixClass = require("../../lib/prefixClass");
 
-var _excluded = ["children", "arrow"];
+var _excluded = ["children", "arrow", "appearance"];
 
 /**
  * @see https://vkcom.github.io/VKUI/#/RichTooltip
@@ -36,12 +28,11 @@ var RichTooltip = function RichTooltip(_ref) {
   var children = _ref.children,
       _ref$arrow = _ref.arrow,
       arrow = _ref$arrow === void 0 ? true : _ref$arrow,
+      _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? "neutral" : _ref$appearance,
       popperProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
-  var appearance = (0, _useAppearance.useAppearance)();
-  return (0, _jsxRuntime.createScopedElement)(_HoverPopper.HoverPopper // eslint-disable-next-line vkui/no-object-expression-in-arguments
-  , (0, _extends2.default)({
-    vkuiClass: (0, _classNames2.classNames)((0, _getClassName.getClassName)("RichTooltip", platform), (0, _defineProperty2.default)({}, "RichTooltip--".concat(appearance), !!appearance)),
+  return (0, _jsxRuntime.createScopedElement)(_HoverPopper.HoverPopper, (0, _extends2.default)({
+    vkuiClass: (0, _classNames.classNames)("RichTooltip", "RichTooltip--".concat(appearance)),
     arrow: arrow,
     arrowClassName: (0, _prefixClass.prefixClass)("RichTooltip__arrow")
   }, popperProps), children);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"names":["RichTooltip","children","arrow","popperProps","platform","appearance"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAKA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAIH;AAAA,MAHtBC,QAGsB,QAHtBA,QAGsB;AAAA,wBAFtBC,KAEsB;AAAA,MAFtBA,KAEsB,2BAFd,IAEc;AAAA,MADnBC,WACmB;AACtB,MAAMC,QAAQ,GAAG,+BAAjB;AACA,MAAMC,UAAU,GAAG,mCAAnB;AAEA,SACE,qCAAC,wBAAD,CACE;AADF;AAEE,IAAA,SAAS,EAAE,6BAAW,gCAAa,aAAb,EAA4BD,QAA5B,CAAX,2DACQC,UADR,GACuB,CAAC,CAACA,UADzB,EAFb;AAKE,IAAA,KAAK,EAAEH,KALT;AAME,IAAA,cAAc,EAAE,8BAAY,oBAAZ;AANlB,KAOMC,WAPN,GASGF,QATH,CADF;AAaD,CArBM","sourcesContent":["import { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAppearance } from \"../../hooks/useAppearance\";\nimport { classNames } from \"../../lib/classNames\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport \"./RichTooltip.css\";\n\nexport type RichTooltipProps = Omit<HoverPopperProps, \"arrowClassName\">;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n  children,\n  arrow = true,\n  ...popperProps\n}: RichTooltipProps) => {\n  const platform = usePlatform();\n  const appearance = useAppearance();\n\n  return (\n    <HoverPopper\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(getClassName(\"RichTooltip\", platform), {\n        [`RichTooltip--${appearance}`]: !!appearance,\n      })}\n      arrow={arrow}\n      arrowClassName={prefixClass(\"RichTooltip__arrow\")}\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"file":"RichTooltip.js"}
+{"version":3,"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"names":["RichTooltip","children","arrow","appearance","popperProps"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAWA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAKH;AAAA,MAJtBC,QAIsB,QAJtBA,QAIsB;AAAA,wBAHtBC,KAGsB;AAAA,MAHtBA,KAGsB,2BAHd,IAGc;AAAA,6BAFtBC,UAEsB;AAAA,MAFtBA,UAEsB,gCAFT,SAES;AAAA,MADnBC,WACmB;AACtB,SACE,qCAAC,wBAAD;AACE,IAAA,SAAS,EAAE,4BAAW,aAAX,yBAA0CD,UAA1C,EADb;AAEE,IAAA,KAAK,EAAED,KAFT;AAGE,IAAA,cAAc,EAAE,8BAAY,oBAAZ;AAHlB,KAIME,WAJN,GAMGH,QANH,CADF;AAUD,CAhBM","sourcesContent":["import { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { classNames } from \"../../lib/classNames\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport \"./RichTooltip.css\";\n\nexport interface RichTooltipProps\n  extends Omit<HoverPopperProps, \"arrowClassName\"> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: \"accent\" | \"neutral\" | \"white\" | \"black\" | \"inversion\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n  children,\n  arrow = true,\n  appearance = \"neutral\",\n  ...popperProps\n}: RichTooltipProps) => {\n  return (\n    <HoverPopper\n      vkuiClass={classNames(\"RichTooltip\", `RichTooltip--${appearance}`)}\n      arrow={arrow}\n      arrowClassName={prefixClass(\"RichTooltip__arrow\")}\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"file":"RichTooltip.js"}

package/dist/cjs/components/SimpleCell/SimpleCell.js

@@ -9,10 +9,10 @@ exports.SimpleCell = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _jsxRuntime = require("../../lib/jsxRuntime");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _classNames = require("../../lib/classNames");
 
 var _getClassName = require("../../helpers/getClassName");
@@ -31,13 +31,11 @@ var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 
 var _withAdaptivity = require("../../hoc/withAdaptivity");
 
-var _Title = require("../Typography/Title/Title");
-
-var _Text = require("../Typography/Text/Text");
+var _Headline = require("../Typography/Headline/Headline");
 
-var _Subhead = require("../Typography/Subhead/Subhead");
+var _Footnote = require("../Typography/Footnote/Footnote");
 
-var _Headline = require("../Typography/Headline/Headline");
+var _Caption = require("../Typography/Caption/Caption");
 
 var _excluded = ["badge", "before", "indicator", "children", "after", "description", "expandable", "multiline", "sizeY"];
 
@@ -45,22 +43,13 @@ var SimpleCellTypography = function SimpleCellTypography(props) {
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
       sizeY = _useAdaptivity.sizeY;
 
-  var platform = (0, _usePlatform.usePlatform)();
-
   if (sizeY === _withAdaptivity.SizeType.COMPACT) {
-    return (0, _jsxRuntime.createScopedElement)(_Text.Text, props);
-  } else if (platform === _platform.ANDROID) {
-    return (0, _jsxRuntime.createScopedElement)(_Headline.Headline, (0, _extends2.default)({
-      Component: "span",
-      weight: "3"
-    }, props));
-  } else {
-    return (0, _jsxRuntime.createScopedElement)(_Title.Title, (0, _extends2.default)({
-      Component: "span",
-      level: "3",
-      weight: "3"
+    return (0, _jsxRuntime.createScopedElement)(_Caption.Caption, (0, _extends2.default)({
+      level: "2"
     }, props));
   }
+
+  return (0, _jsxRuntime.createScopedElement)(_Footnote.Footnote, props);
 };
 
 var SimpleCellComponent = function SimpleCellComponent(_ref) {
@@ -79,24 +68,24 @@ var SimpleCellComponent = function SimpleCellComponent(_ref) {
   var hasAfter = (0, _utils.hasReactNode)(after) || expandable && platform === _platform.IOS;
 
   return (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("SimpleCell", platform), {
-      "SimpleCell--exp": expandable,
-      "SimpleCell--mult": multiline
-    }, "SimpleCell--sizeY-".concat(sizeY))
+    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("SimpleCell", platform), expandable && "SimpleCell--exp", multiline && "SimpleCell--mult", "SimpleCell--sizeY-".concat(sizeY))
   }), before, (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "SimpleCell__main"
   }, (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "SimpleCell__content"
-  }, (0, _jsxRuntime.createScopedElement)(SimpleCellTypography, {
-    vkuiClass: "SimpleCell__children"
+  }, (0, _jsxRuntime.createScopedElement)(_Headline.Headline, {
+    Component: "span",
+    vkuiClass: "SimpleCell__children",
+    weight: "3"
   }, children), (0, _utils.hasReactNode)(badge) && (0, _jsxRuntime.createScopedElement)("span", {
     vkuiClass: "SimpleCell__badge"
-  }, badge)), description && (0, _jsxRuntime.createScopedElement)(_Subhead.Subhead, {
-    Component: "span",
-    vkuiClass: "SimpleCell__description"
-  }, description)), (0, _utils.hasReactNode)(indicator) && (0, _jsxRuntime.createScopedElement)(SimpleCellTypography, {
+  }, badge)), description && (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "SimpleCell__content"
+  }, (0, _jsxRuntime.createScopedElement)(SimpleCellTypography, {
+    vkuiClass: "SimpleCell__text SimpleCell__subtitle"
+  }, description))), (0, _utils.hasReactNode)(indicator) && (0, _jsxRuntime.createScopedElement)(_Headline.Headline, {
     Component: "span",
+    weight: "3",
     vkuiClass: "SimpleCell__indicator"
   }, indicator), hasAfter && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "SimpleCell__after"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"names":["SimpleCellTypography","props","sizeY","platform","SizeType","COMPACT","ANDROID","SimpleCellComponent","badge","before","indicator","children","after","description","expandable","multiline","restProps","hasAfter","IOS","SimpleCell","displayName"],"mappings":";;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAwCA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAsC;AACjE,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AACA,MAAMC,QAAQ,GAAG,+BAAjB;;AAEA,MAAID,KAAK,KAAKE,yBAASC,OAAvB,EAAgC;AAC9B,WAAO,qCAAC,UAAD,EAAUJ,KAAV,CAAP;AACD,GAFD,MAEO,IAAIE,QAAQ,KAAKG,iBAAjB,EAA0B;AAC/B,WAAO,qCAAC,kBAAD;AAAU,MAAA,SAAS,EAAC,MAApB;AAA2B,MAAA,MAAM,EAAC;AAAlC,OAA0CL,KAA1C,EAAP;AACD,GAFM,MAEA;AACL,WAAO,qCAAC,YAAD;AAAO,MAAA,SAAS,EAAC,MAAjB;AAAwB,MAAA,KAAK,EAAC,GAA9B;AAAkC,MAAA,MAAM,EAAC;AAAzC,OAAiDA,KAAjD,EAAP;AACD;AACF,CAXD;;AAaA,IAAMM,mBAAmB,GAAG,SAAtBA,mBAAsB,OAWL;AAAA,MAVrBC,KAUqB,QAVrBA,KAUqB;AAAA,MATrBC,MASqB,QATrBA,MASqB;AAAA,MARrBC,SAQqB,QARrBA,SAQqB;AAAA,MAPrBC,QAOqB,QAPrBA,QAOqB;AAAA,MANrBC,KAMqB,QANrBA,KAMqB;AAAA,MALrBC,WAKqB,QALrBA,WAKqB;AAAA,MAJrBC,UAIqB,QAJrBA,UAIqB;AAAA,MAHrBC,SAGqB,QAHrBA,SAGqB;AAAA,MAFrBb,KAEqB,QAFrBA,KAEqB;AAAA,MADlBc,SACkB;AACrB,MAAMb,QAAQ,GAAG,+BAAjB;;AACA,MAAMc,QAAQ,GAAG,yBAAaL,KAAb,KAAwBE,UAAU,IAAIX,QAAQ,KAAKe,aAApE;;AAEA,SACE,qCAAC,kBAAD,6BACMF,SADN;AAEE;AACA,IAAA,SAAS,EAAE,4BACT,gCAAa,YAAb,EAA2Bb,QAA3B,CADS,EAET;AACE,yBAAmBW,UADrB;AAEE,0BAAoBC;AAFtB,KAFS,8BAMYb,KANZ;AAHb,MAYGO,MAZH,EAaE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,qCAAC,oBAAD;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACGE,QADH,CADF,EAIG,yBAAaH,KAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAqCA,KAArC,CALJ,CADF,EASGK,WAAW,IACV,qCAAC,gBAAD;AAAS,IAAA,SAAS,EAAC,MAAnB;AAA0B,IAAA,SAAS,EAAC;AAApC,KACGA,WADH,CAVJ,CAbF,EA4BG,yBAAaH,SAAb,KACC,qCAAC,oBAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,SAAS,EAAC;AAFZ,KAIGA,SAJH,CA7BJ,EAoCGO,QAAQ,IACP;AAAK,IAAA,SAAS,EAAC;AAAf,KACGL,KADH,EAEGE,UAAU,IAAIX,QAAQ,KAAKe,aAA3B,IAAkC,qCAAC,oBAAD,OAFrC,CArCJ,CADF;AA6CD,CA5DD;AA8DA;AACA;AACA;;;AACO,IAAMC,UAAU,GAAG,oCAAeZ,mBAAf,EAAoC;AAAEL,EAAAA,KAAK,EAAE;AAAT,CAApC,CAAnB;;AAEPiB,UAAU,CAACC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { Icon24Chevron } from \"@vkontakte/icons\";\nimport { ANDROID, IOS } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { withAdaptivity, SizeType } from \"../../hoc/withAdaptivity\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport \"./SimpleCell.css\";\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badge?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  description?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\ntype SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> &\n  HasComponent;\n\nconst SimpleCellTypography = (props: SimpleCellTypographyProps) => {\n  const { sizeY } = useAdaptivity();\n  const platform = usePlatform();\n\n  if (sizeY === SizeType.COMPACT) {\n    return <Text {...props} />;\n  } else if (platform === ANDROID) {\n    return <Headline Component=\"span\" weight=\"3\" {...props} />;\n  } else {\n    return <Title Component=\"span\" level=\"3\" weight=\"3\" {...props} />;\n  }\n};\n\nconst SimpleCellComponent = ({\n  badge,\n  before,\n  indicator,\n  children,\n  after,\n  description,\n  expandable,\n  multiline,\n  sizeY,\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || (expandable && platform === IOS);\n\n  return (\n    <Tappable\n      {...restProps}\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(\n        getClassName(\"SimpleCell\", platform),\n        {\n          \"SimpleCell--exp\": expandable,\n          \"SimpleCell--mult\": multiline,\n        },\n        `SimpleCell--sizeY-${sizeY}`\n      )}\n    >\n      {before}\n      <div vkuiClass=\"SimpleCell__main\">\n        <div vkuiClass=\"SimpleCell__content\">\n          <SimpleCellTypography vkuiClass=\"SimpleCell__children\">\n            {children}\n          </SimpleCellTypography>\n          {hasReactNode(badge) && (\n            <span vkuiClass=\"SimpleCell__badge\">{badge}</span>\n          )}\n        </div>\n        {description && (\n          <Subhead Component=\"span\" vkuiClass=\"SimpleCell__description\">\n            {description}\n          </Subhead>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <SimpleCellTypography\n          Component=\"span\"\n          vkuiClass=\"SimpleCell__indicator\"\n        >\n          {indicator}\n        </SimpleCellTypography>\n      )}\n      {hasAfter && (\n        <div vkuiClass=\"SimpleCell__after\">\n          {after}\n          {expandable && platform === IOS && <Icon24Chevron />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = withAdaptivity(SimpleCellComponent, { sizeY: true });\n\nSimpleCell.displayName = \"SimpleCell\";\n"],"file":"SimpleCell.js"}
+{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"names":["SimpleCellTypography","props","sizeY","SizeType","COMPACT","SimpleCellComponent","badge","before","indicator","children","after","description","expandable","multiline","restProps","platform","hasAfter","IOS","SimpleCell","displayName"],"mappings":";;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAwCA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAsC;AACjE,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AAEA,MAAIA,KAAK,KAAKC,yBAASC,OAAvB,EAAgC;AAC9B,WAAO,qCAAC,gBAAD;AAAS,MAAA,KAAK,EAAC;AAAf,OAAuBH,KAAvB,EAAP;AACD;;AAED,SAAO,qCAAC,kBAAD,EAAcA,KAAd,CAAP;AACD,CARD;;AAUA,IAAMI,mBAAmB,GAAG,SAAtBA,mBAAsB,OAWL;AAAA,MAVrBC,KAUqB,QAVrBA,KAUqB;AAAA,MATrBC,MASqB,QATrBA,MASqB;AAAA,MARrBC,SAQqB,QARrBA,SAQqB;AAAA,MAPrBC,QAOqB,QAPrBA,QAOqB;AAAA,MANrBC,KAMqB,QANrBA,KAMqB;AAAA,MALrBC,WAKqB,QALrBA,WAKqB;AAAA,MAJrBC,UAIqB,QAJrBA,UAIqB;AAAA,MAHrBC,SAGqB,QAHrBA,SAGqB;AAAA,MAFrBX,KAEqB,QAFrBA,KAEqB;AAAA,MADlBY,SACkB;AACrB,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,MAAMC,QAAQ,GAAG,yBAAaN,KAAb,KAAwBE,UAAU,IAAIG,QAAQ,KAAKE,aAApE;;AAEA,SACE,qCAAC,kBAAD,6BACMH,SADN;AAEE,IAAA,SAAS,EAAE,4BACT,gCAAa,YAAb,EAA2BC,QAA3B,CADS,EAETH,UAAU,IAAI,iBAFL,EAGTC,SAAS,IAAI,kBAHJ,8BAIYX,KAJZ;AAFb,MASGK,MATH,EAUE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,qCAAC,kBAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,SAAS,EAAC,sBAFZ;AAGE,IAAA,MAAM,EAAC;AAHT,KAKGE,QALH,CADF,EAQG,yBAAaH,KAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAqCA,KAArC,CATJ,CADF,EAaGK,WAAW,IACV;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,qCAAC,oBAAD;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACGA,WADH,CADF,CAdJ,CAVF,EA+BG,yBAAaH,SAAb,KACC,qCAAC,kBAAD;AAAU,IAAA,SAAS,EAAC,MAApB;AAA2B,IAAA,MAAM,EAAC,GAAlC;AAAsC,IAAA,SAAS,EAAC;AAAhD,KACGA,SADH,CAhCJ,EAoCGQ,QAAQ,IACP;AAAK,IAAA,SAAS,EAAC;AAAf,KACGN,KADH,EAEGE,UAAU,IAAIG,QAAQ,KAAKE,aAA3B,IAAkC,qCAAC,oBAAD,OAFrC,CArCJ,CADF;AA6CD,CA5DD;AA8DA;AACA;AACA;;;AACO,IAAMC,UAAU,GAAG,oCAAeb,mBAAf,EAAoC;AAAEH,EAAAA,KAAK,EAAE;AAAT,CAApC,CAAnB;;AAEPgB,UAAU,CAACC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { Icon24Chevron } from \"@vkontakte/icons\";\nimport { IOS } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { withAdaptivity, SizeType } from \"../../hoc/withAdaptivity\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport \"./SimpleCell.css\";\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badge?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  description?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\ntype SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> &\n  HasComponent;\n\nconst SimpleCellTypography = (props: SimpleCellTypographyProps) => {\n  const { sizeY } = useAdaptivity();\n\n  if (sizeY === SizeType.COMPACT) {\n    return <Caption level=\"2\" {...props} />;\n  }\n\n  return <Footnote {...props} />;\n};\n\nconst SimpleCellComponent = ({\n  badge,\n  before,\n  indicator,\n  children,\n  after,\n  description,\n  expandable,\n  multiline,\n  sizeY,\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || (expandable && platform === IOS);\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName(\"SimpleCell\", platform),\n        expandable && \"SimpleCell--exp\",\n        multiline && \"SimpleCell--mult\",\n        `SimpleCell--sizeY-${sizeY}`\n      )}\n    >\n      {before}\n      <div vkuiClass=\"SimpleCell__main\">\n        <div vkuiClass=\"SimpleCell__content\">\n          <Headline\n            Component=\"span\"\n            vkuiClass=\"SimpleCell__children\"\n            weight=\"3\"\n          >\n            {children}\n          </Headline>\n          {hasReactNode(badge) && (\n            <span vkuiClass=\"SimpleCell__badge\">{badge}</span>\n          )}\n        </div>\n        {description && (\n          <div vkuiClass=\"SimpleCell__content\">\n            <SimpleCellTypography vkuiClass=\"SimpleCell__text SimpleCell__subtitle\">\n              {description}\n            </SimpleCellTypography>\n          </div>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" vkuiClass=\"SimpleCell__indicator\">\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div vkuiClass=\"SimpleCell__after\">\n          {after}\n          {expandable && platform === IOS && <Icon24Chevron />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = withAdaptivity(SimpleCellComponent, { sizeY: true });\n\nSimpleCell.displayName = \"SimpleCell\";\n"],"file":"SimpleCell.js"}

package/dist/cjs/components/Snackbar/Snackbar.js

@@ -23,15 +23,13 @@ var _Touch = require("../Touch/Touch");
 
 var _classNames = require("../../lib/classNames");
 
-var _getClassName = require("../../helpers/getClassName");
-
 var _platform = require("../../lib/platform");
 
 var _touch = require("../../lib/touch");
 
 var _withAdaptivity = require("../../hoc/withAdaptivity");
 
-var _Text = require("../Typography/Text/Text");
+var _Paragraph = require("../Typography/Paragraph/Paragraph");
 
 var _Button = require("../Button/Button");
 
@@ -43,7 +41,7 @@ var _usePlatform = require("../../hooks/usePlatform");
 
 var _useTimeout = require("../../hooks/useTimeout");
 
-var _excluded = ["children", "layout", "action", "before", "after", "viewWidth", "duration", "onActionClick", "onClose"];
+var _excluded = ["children", "layout", "action", "before", "after", "viewWidth", "duration", "onActionClick", "onClose", "mode"];
 
 var SnackbarComponent = function SnackbarComponent(_ref) {
   var children = _ref.children,
@@ -57,6 +55,8 @@ var SnackbarComponent = function SnackbarComponent(_ref) {
       duration = _ref$duration === void 0 ? 4000 : _ref$duration,
       onActionClick = _ref.onActionClick,
       onClose = _ref.onClose,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "default" : _ref$mode,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
 
@@ -167,12 +167,7 @@ var SnackbarComponent = function SnackbarComponent(_ref) {
   }, [closeTimeout]);
   var resolvedLayout = after || isDesktop ? "vertical" : layout;
   return (0, _jsxRuntime.createScopedElement)(_AppRootPortal.AppRootPortal, null, (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("Snackbar", platform), "Snackbar--l-".concat(resolvedLayout), {
-      "Snackbar--closing": closing,
-      "Snackbar--touched": touched,
-      "Snackbar--desktop": isDesktop
-    })
+    vkuiClass: (0, _classNames.classNames)("Snackbar", platform === _platform.IOS && "Snackbar--ios", "Snackbar--l-".concat(resolvedLayout), "Snackbar--".concat(mode), closing && "Snackbar--closing", touched && "Snackbar--touched", isDesktop && "Snackbar--desktop")
   }), (0, _jsxRuntime.createScopedElement)(_Touch.Touch, {
     vkuiClass: "Snackbar__in",
     getRootRef: innerElRef,
@@ -186,12 +181,13 @@ var SnackbarComponent = function SnackbarComponent(_ref) {
     vkuiClass: "Snackbar__before"
   }, before), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Snackbar__content"
-  }, (0, _jsxRuntime.createScopedElement)(_Text.Text, {
+  }, (0, _jsxRuntime.createScopedElement)(_Paragraph.Paragraph, {
     vkuiClass: "Snackbar__content-text"
   }, children), action && (0, _jsxRuntime.createScopedElement)(_Button.Button, {
     align: "left",
     hasHover: false,
     mode: "tertiary",
+    appearance: mode === "dark" ? "overlay" : "accent",
     size: "s",
     vkuiClass: "Snackbar__action",
     onClick: handleActionClick

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":["SnackbarComponent","children","layout","action","before","after","viewWidth","duration","onActionClick","onClose","restProps","platform","waitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","isDesktop","ViewWidth","SMALL_TABLET","transitionFinishDurationFallback","ANDROID","VKCOM","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","resolvedLayout","displayName","Snackbar"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasPlatform } from \"../../types\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { ANDROID, VKCOM } from \"../../lib/platform\";\nimport { rubber } from \"../../lib/touch\";\nimport { withAdaptivity, ViewWidth } from \"../../hoc/withAdaptivity\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Button } from \"../Button/Button\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { useWaitTransitionFinish } from \"../../hooks/useWaitTransitionFinish\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./Snackbar.css\";\n\nexport interface SnackbarProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasPlatform,\n    AdaptivityProps {\n  /**\n   * Название кнопки действия в уведомлении\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Цветная иконка 24x24 пикселя\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть `<Avatar size={32} />`\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n}\n\nconst SnackbarComponent = ({\n  children,\n  layout = \"horizontal\",\n  action,\n  before,\n  after,\n  viewWidth,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  ...restProps\n}: SnackbarProps & AdaptivityContextInterface) => {\n  const platform = usePlatform();\n\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<\n    typeof requestAnimationFrame\n  > | null>(null);\n\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const transitionFinishDurationFallback =\n    platform === ANDROID || platform === VKCOM ? 400 : 320;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === \"function\") {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current =\n      (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(\n      shiftXPercentRef.current,\n      72,\n      1.2,\n      platform === ANDROID || platform === VKCOM\n    );\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const resolvedLayout = after || isDesktop ? \"vertical\" : layout;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        // eslint-disable-next-line vkui/no-object-expression-in-arguments\n        vkuiClass={classNames(\n          getClassName(\"Snackbar\", platform),\n          `Snackbar--l-${resolvedLayout}`,\n          {\n            \"Snackbar--closing\": closing,\n            \"Snackbar--touched\": touched,\n            \"Snackbar--desktop\": isDesktop,\n          }\n        )}\n      >\n        <Touch\n          vkuiClass=\"Snackbar__in\"\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div vkuiClass=\"Snackbar__body\" ref={bodyElRef}>\n            {before && <div vkuiClass=\"Snackbar__before\">{before}</div>}\n\n            <div vkuiClass=\"Snackbar__content\">\n              <Text vkuiClass=\"Snackbar__content-text\">{children}</Text>\n\n              {action && (\n                <Button\n                  align=\"left\"\n                  hasHover={false}\n                  mode=\"tertiary\"\n                  size=\"s\"\n                  vkuiClass=\"Snackbar__action\"\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div vkuiClass=\"Snackbar__after\">{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n\nSnackbarComponent.displayName = \"Snackbar\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = withAdaptivity(SnackbarComponent, {\n  viewWidth: true,\n});\n"],"file":"Snackbar.js"}
+{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":["SnackbarComponent","children","layout","action","before","after","viewWidth","duration","onActionClick","onClose","mode","restProps","platform","waitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","isDesktop","ViewWidth","SMALL_TABLET","transitionFinishDurationFallback","ANDROID","VKCOM","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","resolvedLayout","IOS","displayName","Snackbar"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AA+CA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,OAYwB;AAAA,MAXhDC,QAWgD,QAXhDA,QAWgD;AAAA,yBAVhDC,MAUgD;AAAA,MAVhDA,MAUgD,4BAVvC,YAUuC;AAAA,MAThDC,MASgD,QAThDA,MASgD;AAAA,MARhDC,MAQgD,QARhDA,MAQgD;AAAA,MAPhDC,KAOgD,QAPhDA,KAOgD;AAAA,MANhDC,SAMgD,QANhDA,SAMgD;AAAA,2BALhDC,QAKgD;AAAA,MALhDA,QAKgD,8BALrC,IAKqC;AAAA,MAJhDC,aAIgD,QAJhDA,aAIgD;AAAA,MAHhDC,OAGgD,QAHhDA,OAGgD;AAAA,uBAFhDC,IAEgD;AAAA,MAFhDA,IAEgD,0BAFzC,SAEyC;AAAA,MAD7CC,SAC6C;AAChD,MAAMC,QAAQ,GAAG,+BAAjB;;AAEA,8BAAiC,uDAAjC;AAAA,MAAQC,oBAAR,yBAAQA,oBAAR;;AAEA,wBAA8BC,KAAK,CAACC,QAAN,CAAe,KAAf,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACA,yBAA8BH,KAAK,CAACC,QAAN,CAAe,KAAf,CAA9B;AAAA;AAAA,MAAOG,OAAP;AAAA,MAAgBC,UAAhB;;AAEA,MAAMC,gBAAgB,GAAGN,KAAK,CAACO,MAAN,CAAqB,CAArB,CAAzB;AACA,MAAMC,gBAAgB,GAAGR,KAAK,CAACO,MAAN,CAAqB,CAArB,CAAzB;AAEA,MAAME,SAAS,GAAGT,KAAK,CAACO,MAAN,CAAoC,IAApC,CAAlB;AACA,MAAMG,UAAU,GAAGV,KAAK,CAACO,MAAN,CAAoC,IAApC,CAAnB;AAEA,MAAMI,iBAAiB,GAAGX,KAAK,CAACO,MAAN,CAEhB,IAFgB,CAA1B;AAIA,MAAMK,SAAS,GAAGpB,SAAS,IAAIqB,0BAAUC,YAAzC;AACA,MAAMC,gCAAgC,GACpCjB,QAAQ,KAAKkB,iBAAb,IAAwBlB,QAAQ,KAAKmB,eAArC,GAA6C,GAA7C,GAAmD,GADrD;;AAGA,MAAMC,KAAK,GAAG,SAARA,KAAQ,GAAM;AAClBf,IAAAA,UAAU,CAAC,IAAD,CAAV;AACAJ,IAAAA,oBAAoB,CAClBW,UAAU,CAACS,OADO,EAElB,YAAM;AACJxB,MAAAA,OAAO;AACR,KAJiB,EAKlBoB,gCALkB,CAApB;AAOD,GATD;;AAWA,MAAMK,iBAAuD,GAAG,SAA1DA,iBAA0D,CAACC,CAAD,EAAO;AACrEH,IAAAA,KAAK;;AAEL,QAAI7B,MAAM,IAAI,OAAOK,aAAP,KAAyB,UAAvC,EAAmD;AACjDA,MAAAA,aAAa,CAAC2B,CAAD,CAAb;AACD;AACF,GAND;;AAQA,MAAMC,YAAY,GAAG,4BAAWJ,KAAX,EAAkBzB,QAAlB,CAArB;;AAEA,MAAM8B,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAqB;AAC5C,QAAIb,iBAAiB,CAACQ,OAAlB,KAA8B,IAAlC,EAAwC;AACtCM,MAAAA,oBAAoB,CAACd,iBAAiB,CAACQ,OAAnB,CAApB;AACD;;AACDR,IAAAA,iBAAiB,CAACQ,OAAlB,GAA4BO,qBAAqB,CAAC,YAAM;AACtD,UAAIjB,SAAS,CAACU,OAAd,EAAuB;AACrBV,QAAAA,SAAS,CAACU,OAAV,CAAkBQ,KAAlB,CAAwBC,SAAxB,yBAAmDJ,OAAnD;AACD;AACF,KAJgD,CAAjD;AAKD,GATD;;AAWA,MAAMK,YAAY,GAAGP,YAAY,CAACQ,KAAlC;;AAEA,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAuB;AAAA;;AAC1C,QAAQC,MAAR,GAAkCD,KAAlC,CAAQC,MAAR;AAAA,QAAgBC,aAAhB,GAAkCF,KAAlC,CAAgBE,aAAhB;AACAA,IAAAA,aAAa,CAACC,cAAd;;AAEA,QAAI,CAAC/B,OAAL,EAAc;AACZC,MAAAA,UAAU,CAAC,IAAD,CAAV;AACD;;AAEDC,IAAAA,gBAAgB,CAACa,OAAjB,GACGc,MAAM,mDAAIxB,SAAS,CAACU,OAAd,uDAAI,mBAAmBiB,WAAvB,yEAAsC,CAAtC,CAAP,GAAmD,GADrD;AAEA5B,IAAAA,gBAAgB,CAACW,OAAjB,GAA2B,mBACzBb,gBAAgB,CAACa,OADQ,EAEzB,EAFyB,EAGzB,GAHyB,EAIzBrB,QAAQ,KAAKkB,iBAAb,IAAwBlB,QAAQ,KAAKmB,eAJZ,CAA3B;AAOAM,IAAAA,gBAAgB,CAACf,gBAAgB,CAACW,OAAlB,CAAhB;AACD,GAlBD;;AAoBA,MAAMkB,UAAU,GAAG,SAAbA,UAAa,CAAChB,CAAD,EAAmB;AACpC,QAAIiB,QAAJ;;AAEA,QAAIlC,OAAJ,EAAa;AACX,UAAImC,aAAa,GAAG/B,gBAAgB,CAACW,OAArC;AACA,UAAMqB,gBAAgB,GAAID,aAAa,GAAGlB,CAAC,CAAC5B,QAAnB,GAA+B,GAA/B,GAAqC,GAA9D;AACA8C,MAAAA,aAAa,GAAGA,aAAa,GAAGC,gBAAhC;;AAEA,UAAI5B,SAAS,IAAI2B,aAAa,IAAI,CAAC,EAAnC,EAAuC;AACrCjB,QAAAA,YAAY,CAACQ,KAAb;AACA/B,QAAAA,oBAAoB,CAClBU,SAAS,CAACU,OADQ,EAElB,YAAM;AACJxB,UAAAA,OAAO;AACR,SAJiB,EAKlBoB,gCALkB,CAApB;AAOAQ,QAAAA,gBAAgB,CAAC,CAAC,GAAF,CAAhB;AACD,OAVD,MAUO,IAAI,CAACX,SAAD,IAAc2B,aAAa,IAAI,EAAnC,EAAuC;AAC5CjB,QAAAA,YAAY,CAACQ,KAAb;AACA/B,QAAAA,oBAAoB,CAClBU,SAAS,CAACU,OADQ,EAElB,YAAM;AACJxB,UAAAA,OAAO;AACR,SAJiB,EAKlBoB,gCALkB,CAApB;AAOAQ,QAAAA,gBAAgB,CAAC,GAAD,CAAhB;AACD,OAVM,MAUA;AACLe,QAAAA,QAAQ,GAAG,oBAAM;AACfhB,UAAAA,YAAY,CAACmB,GAAb;AACAlB,UAAAA,gBAAgB,CAAC,CAAD,CAAhB;AACD,SAHD;AAID;AACF,KA/BD,MA+BO;AACLD,MAAAA,YAAY,CAACmB,GAAb;AACD;;AAEDpC,IAAAA,UAAU,CAAC,KAAD,CAAV;AACAiC,IAAAA,QAAQ,IAAIZ,qBAAqB,CAACY,QAAD,CAAjC;AACD,GAxCD;;AA0CAtC,EAAAA,KAAK,CAAC0C,SAAN,CAAgB;AAAA,WAAMpB,YAAY,CAACmB,GAAb,EAAN;AAAA,GAAhB,EAA0C,CAACnB,YAAD,CAA1C;AAEA,MAAMqB,cAAc,GAAGpD,KAAK,IAAIqB,SAAT,GAAqB,UAArB,GAAkCxB,MAAzD;AAEA,SACE,qCAAC,4BAAD,QACE,uEACMS,SADN;AAEE,IAAA,SAAS,EAAE,4BACT,UADS,EAETC,QAAQ,KAAK8C,aAAb,IAAoB,eAFX,wBAGMD,cAHN,uBAII/C,IAJJ,GAKTM,OAAO,IAAI,mBALF,EAMTE,OAAO,IAAI,mBANF,EAOTQ,SAAS,IAAI,mBAPJ;AAFb,MAYE,qCAAC,YAAD;AACE,IAAA,SAAS,EAAC,cADZ;AAEE,IAAA,UAAU,EAAEF,UAFd;AAGE,IAAA,OAAO,EAAEmB,YAHX;AAIE,IAAA,OAAO,EAAEE,YAJX;AAKE,IAAA,KAAK,EAAEM;AALT,KAOE;AAAK,IAAA,SAAS,EAAC,gBAAf;AAAgC,IAAA,GAAG,EAAE5B;AAArC,KACGnB,MAAM,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAmCA,MAAnC,CADb,EAGE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,qCAAC,oBAAD;AAAW,IAAA,SAAS,EAAC;AAArB,KACGH,QADH,CADF,EAKGE,MAAM,IACL,qCAAC,cAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,QAAQ,EAAE,KAFZ;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,UAAU,EAAEO,IAAI,KAAK,MAAT,GAAkB,SAAlB,GAA8B,QAJ5C;AAKE,IAAA,IAAI,EAAC,GALP;AAME,IAAA,SAAS,EAAC,kBANZ;AAOE,IAAA,OAAO,EAAEwB;AAPX,KASG/B,MATH,CANJ,CAHF,EAuBGE,KAAK,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CAvBZ,CAPF,CAZF,CADF,CADF;AAkDD,CAxLD;;AA0LAL,iBAAiB,CAAC2D,WAAlB,GAAgC,UAAhC;AAEA;AACA;AACA;;AACO,IAAMC,QAAQ,GAAG,oCAAe5D,iBAAf,EAAkC;AACxDM,EAAAA,SAAS,EAAE;AAD6C,CAAlC,CAAjB","sourcesContent":["import * as React from \"react\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasPlatform } from \"../../types\";\nimport { ANDROID, IOS, VKCOM } from \"../../lib/platform\";\nimport { rubber } from \"../../lib/touch\";\nimport { withAdaptivity, ViewWidth } from \"../../hoc/withAdaptivity\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Button } from \"../Button/Button\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { useWaitTransitionFinish } from \"../../hooks/useWaitTransitionFinish\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./Snackbar.css\";\n\nexport interface SnackbarProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasPlatform,\n    AdaptivityProps {\n  /**\n   * Название кнопки действия в уведомлении\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Цветная иконка 24x24 пикселя\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть `<Avatar size={32} />`\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: \"default\" | \"dark\";\n}\n\nconst SnackbarComponent = ({\n  children,\n  layout = \"horizontal\",\n  action,\n  before,\n  after,\n  viewWidth,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = \"default\",\n  ...restProps\n}: SnackbarProps & AdaptivityContextInterface) => {\n  const platform = usePlatform();\n\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<\n    typeof requestAnimationFrame\n  > | null>(null);\n\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const transitionFinishDurationFallback =\n    platform === ANDROID || platform === VKCOM ? 400 : 320;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === \"function\") {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current =\n      (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(\n      shiftXPercentRef.current,\n      72,\n      1.2,\n      platform === ANDROID || platform === VKCOM\n    );\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const resolvedLayout = after || isDesktop ? \"vertical\" : layout;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        vkuiClass={classNames(\n          \"Snackbar\",\n          platform === IOS && \"Snackbar--ios\",\n          `Snackbar--l-${resolvedLayout}`,\n          `Snackbar--${mode}`,\n          closing && \"Snackbar--closing\",\n          touched && \"Snackbar--touched\",\n          isDesktop && \"Snackbar--desktop\"\n        )}\n      >\n        <Touch\n          vkuiClass=\"Snackbar__in\"\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div vkuiClass=\"Snackbar__body\" ref={bodyElRef}>\n            {before && <div vkuiClass=\"Snackbar__before\">{before}</div>}\n\n            <div vkuiClass=\"Snackbar__content\">\n              <Paragraph vkuiClass=\"Snackbar__content-text\">\n                {children}\n              </Paragraph>\n\n              {action && (\n                <Button\n                  align=\"left\"\n                  hasHover={false}\n                  mode=\"tertiary\"\n                  appearance={mode === \"dark\" ? \"overlay\" : \"accent\"}\n                  size=\"s\"\n                  vkuiClass=\"Snackbar__action\"\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div vkuiClass=\"Snackbar__after\">{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n\nSnackbarComponent.displayName = \"Snackbar\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = withAdaptivity(SnackbarComponent, {\n  viewWidth: true,\n});\n"],"file":"Snackbar.js"}