@vkontakte/vkui 5.0.3 → 5.1.2

package/dist/cjs/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridAvatarBadge.js","names":["GridAvatarBadge","className","restProps","React","useContext","ImageBaseContext","size","classNamesString"],"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport {\n  type ImageBaseBadgeProps,\n  ImageBase,\n  ImageBaseContext,\n} from \"../../ImageBase/ImageBase\";\nimport styles from \"./GridAvatarBadge.module.css\";\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({\n  className,\n  ...restProps\n}: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNamesString(\n        styles[\"GridAvatarBadge\"],\n        size < 96 && styles[\"GridAvatarBadge--shifted\"],\n        className\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAImC;AAK5B,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAGA;EAAA,IAF1BC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,wBAAiBC,KAAK,CAACC,UAAU,CAACC,2BAAgB,CAAC;IAA3CC,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,oBAAS,CAAC,KAAK,6BACVJ,SAAS;IACb,SAAS,EAAE,IAAAK,4BAAgB,yBAEzBD,IAAI,GAAG,EAAE,kCAAsC,EAC/CL,SAAS;EACT,GACF;AAEN,CAAC;AAAC"}
+{"version":3,"file":"GridAvatarBadge.js","names":["GridAvatarBadge","className","restProps","React","useContext","ImageBaseContext","size","classNames"],"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type ImageBaseBadgeProps, ImageBase, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './GridAvatarBadge.module.css';\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({ className, ...restProps }: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['GridAvatarBadge'],\n        size < 96 && styles['GridAvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAkG;AAK3F,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAA0D;EAAA,IAApDC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACvD,wBAAiBC,KAAK,CAACC,UAAU,CAACC,2BAAgB,CAAC;IAA3CC,IAAI,qBAAJA,IAAI;EACZ,oBACE,oBAAC,oBAAS,CAAC,KAAK,6BACVJ,SAAS;IACb,SAAS,EAAE,IAAAK,gBAAU,yBAEnBD,IAAI,GAAG,EAAE,kCAAsC,EAC/CL,SAAS;EACT,GACF;AAEN,CAAC;AAAC"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement> {
     header?: React.ReactNode;
     description?: React.ReactNode;
@@ -8,18 +8,18 @@ export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttribute
       hide - разделитель всегда спрятан,
       auto - разделитель рисуется автоматически между соседними группами.
      */
-    separator?: "show" | "hide" | "auto";
+    separator?: 'show' | 'hide' | 'auto';
     /**
      * Режим отображения. Если установлен 'card', выглядит как карточка c
      * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.
      * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах
      * по умолчанию 'plain'.
      */
-    mode?: "plain" | "card";
+    mode?: 'plain' | 'card';
     /**
      * Отвечает за отступы вокруг контента в режиме 'card'.
      */
-    padding?: "s" | "m";
+    padding?: 's' | 'm';
     children?: React.ReactNode;
 }
 export declare const Group: ({ header, description, children, separator, getRootRef, mode: modeProps, padding, className, tabIndex: tabIndexProp, ...restProps }: GroupProps) => JSX.Element;

package/dist/cjs/components/Group/Group.js

@@ -10,28 +10,27 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _platform = require("../../lib/platform");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _Spacing = require("../Spacing/Spacing");
 var _Separator = require("../Separator/Separator");
-var _utils = require("../../lib/utils");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _warnOnce = require("../../lib/warnOnce");
 var _ModalRootContext = require("../ModalRoot/ModalRootContext");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _getSizeXClassName = require("../../helpers/getSizeXClassName");
 var _excluded = ["header", "description", "children", "separator", "getRootRef", "mode", "padding", "className", "tabIndex"];
-var warn = (0, _warnOnce.warnOnce)("TabsItem");
+var warn = (0, _warnOnce.warnOnce)('TabsItem');
 var Group = function Group(_ref) {
   var header = _ref.header,
     description = _ref.description,
     children = _ref.children,
     _ref$separator = _ref.separator,
-    separator = _ref$separator === void 0 ? "auto" : _ref$separator,
+    separator = _ref$separator === void 0 ? 'auto' : _ref$separator,
     getRootRef = _ref.getRootRef,
     modeProps = _ref.mode,
     _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? "m" : _ref$padding,
+    padding = _ref$padding === void 0 ? 'm' : _ref$padding,
     className = _ref.className,
     tabIndexProp = _ref.tabIndex,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -43,27 +42,27 @@ var Group = function Group(_ref) {
   var mode = modeProps;
   if (!modeProps) {
     // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
-    mode = isInsideModal ? "plain" : "none";
+    mode = isInsideModal ? 'plain' : 'none';
   }
-  var isTabPanel = restProps.role === "tabpanel";
-  if (process.env.NODE_ENV === "development" && isTabPanel && (!restProps["aria-controls"] || !restProps["id"])) {
+  var isTabPanel = restProps.role === 'tabpanel';
+  if (process.env.NODE_ENV === 'development' && isTabPanel && (!restProps['aria-controls'] || !restProps['id'])) {
     warn('При использовании роли "tabpanel" необходимо задать значение свойств "aria-controls" и "id"');
   }
   var tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;
-  var separatorClassName = (0, _classNames.classNamesString)("vkuiGroup__separator", separator === "show" && "vkuiGroup__separator--force");
+  var separatorClassName = (0, _vkjs.classNames)("vkuiGroup__separator", separator === 'show' && "vkuiGroup__separator--force");
   return /*#__PURE__*/React.createElement("section", (0, _extends2.default)({}, restProps, {
     tabIndex: tabIndex,
     ref: getRootRef,
-    className: (0, _classNames.classNamesString)("vkuiGroup", platform === _platform.Platform.IOS && "vkuiGroup--ios", (0, _getSizeXClassName.getSizeXClassName)("vkuiGroup", sizeX), mode && styles["Group--mode-".concat(mode)], styles["Group--padding-".concat(padding)], className)
+    className: (0, _vkjs.classNames)("vkuiGroup", platform === _platform.Platform.IOS && "vkuiGroup--ios", (0, _getSizeXClassName.getSizeXClassName)("vkuiGroup", sizeX), mode && styles["Group--mode-".concat(mode)], styles["Group--padding-".concat(padding)], className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiGroup__inner"
-  }, header, children, (0, _utils.hasReactNode)(description) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
+  }, header, children, (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
     className: "vkuiGroup__description"
-  }, description)), separator !== "hide" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Spacing.Spacing, {
-    className: (0, _classNames.classNamesString)(separatorClassName, "vkuiGroup__separator--spacing"),
+  }, description)), separator !== 'hide' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Spacing.Spacing, {
+    className: (0, _vkjs.classNames)(separatorClassName, "vkuiGroup__separator--spacing"),
     size: 16
   }), /*#__PURE__*/React.createElement(_Separator.Separator, {
-    className: (0, _classNames.classNamesString)(separatorClassName, "vkuiGroup__separator--separator")
+    className: (0, _vkjs.classNames)(separatorClassName, "vkuiGroup__separator--separator")
   })));
 };
 exports.Group = Group;

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

@@ -1 +1 @@
-{"version":3,"file":"Group.js","names":["warn","warnOnce","Group","header","description","children","separator","getRootRef","modeProps","mode","padding","className","tabIndexProp","tabIndex","restProps","React","useContext","ModalRootContext","isInsideModal","platform","usePlatform","useAdaptivity","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","classNamesString","Platform","IOS","getSizeXClassName","styles","hasReactNode"],"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Platform } from \"../../lib/platform\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Spacing } from \"../Spacing/Spacing\";\nimport { Separator } from \"../Separator/Separator\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { ModalRootContext } from \"../ModalRoot/ModalRootContext\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport styles from \"./Group.module.css\";\n\nexport interface GroupProps\n  extends HasRootRef<HTMLElement>,\n    React.HTMLAttributes<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: \"show\" | \"hide\" | \"auto\";\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: \"plain\" | \"card\";\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: \"s\" | \"m\";\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce(\"TabsItem\");\n\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = \"auto\",\n  getRootRef,\n  mode: modeProps,\n  padding = \"m\",\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n\n  let mode: GroupProps[\"mode\"] | \"none\" = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? \"plain\" : \"none\";\n  }\n\n  const isTabPanel = restProps.role === \"tabpanel\";\n\n  if (\n    process.env.NODE_ENV === \"development\" &&\n    isTabPanel &&\n    (!restProps[\"aria-controls\"] || !restProps[\"id\"])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"'\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNamesString(\n    styles[\"Group__separator\"],\n    separator === \"show\" && styles[\"Group__separator--force\"]\n  );\n\n  return (\n    <section\n      {...restProps}\n      tabIndex={tabIndex}\n      ref={getRootRef}\n      className={classNamesString(\n        styles[\"Group\"],\n        platform === Platform.IOS && styles[\"Group--ios\"],\n        getSizeXClassName(styles[\"Group\"], sizeX),\n        mode && styles[`Group--mode-${mode}`],\n        styles[`Group--padding-${padding}`],\n        className\n      )}\n    >\n      <div className={styles[\"Group__inner\"]}>\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles[\"Group__description\"]}>\n            {description}\n          </Footnote>\n        )}\n      </div>\n      {separator !== \"hide\" && (\n        <React.Fragment>\n          <Spacing\n            className={classNamesString(\n              separatorClassName,\n              styles[\"Group__separator--spacing\"]\n            )}\n            size={16}\n          />\n          <Separator\n            className={classNamesString(\n              separatorClassName,\n              styles[\"Group__separator--separator\"]\n            )}\n          />\n        </React.Fragment>\n      )}\n    </section>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AA4BpE,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,UAAU,CAAC;AAE1B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAWA;EAAA,IAVhBC,MAAM,QAANA,MAAM;IACNC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,MAAM;IAClBC,UAAU,QAAVA,UAAU;IACJC,SAAS,QAAfC,IAAI;IAAA,oBACJC,OAAO;IAAPA,OAAO,6BAAG,GAAG;IACbC,SAAS,QAATA,SAAS;IACCC,YAAY,QAAtBC,QAAQ;IACLC,SAAS;EAEZ,wBAA0BC,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;IAApDC,aAAa,qBAAbA,aAAa;EACrB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,IAAIb,IAAiC,GAAGD,SAAS;EAEjD,IAAI,CAACA,SAAS,EAAE;IACd;IACAC,IAAI,GAAGS,aAAa,GAAG,OAAO,GAAG,MAAM;EACzC;EAEA,IAAMK,UAAU,GAAGT,SAAS,CAACU,IAAI,KAAK,UAAU;EAEhD,IACEC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IACtCJ,UAAU,KACT,CAACT,SAAS,CAAC,eAAe,CAAC,IAAI,CAACA,SAAS,CAAC,IAAI,CAAC,CAAC,EACjD;IACAd,IAAI,CACF,6FAA6F,CAC9F;EACH;EAEA,IAAMa,QAAQ,GAAGU,UAAU,IAAIX,YAAY,KAAKgB,SAAS,GAAG,CAAC,GAAGhB,YAAY;EAE5E,IAAMiB,kBAAkB,GAAG,IAAAC,4BAAgB,0BAEzCxB,SAAS,KAAK,MAAM,iCAAqC,CAC1D;EAED,oBACE,0DACMQ,SAAS;IACb,QAAQ,EAAED,QAAS;IACnB,GAAG,EAAEN,UAAW;IAChB,SAAS,EAAE,IAAAuB,4BAAgB,eAEzBX,QAAQ,KAAKY,kBAAQ,CAACC,GAAG,oBAAwB,EACjD,IAAAC,oCAAiB,eAAkBX,KAAK,CAAC,EACzCb,IAAI,IAAIyB,MAAM,uBAAgBzB,IAAI,EAAG,EACrCyB,MAAM,0BAAmBxB,OAAO,EAAG,EACnCC,SAAS;EACT,iBAEF;IAAK,SAAS;EAAyB,GACpCR,MAAM,EACNE,QAAQ,EACR,IAAA8B,mBAAY,EAAC/B,WAAW,CAAC,iBACxB,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAC/CA,WAAW,CAEf,CACG,EACLE,SAAS,KAAK,MAAM,iBACnB,oBAAC,KAAK,CAAC,QAAQ,qBACb,oBAAC,gBAAO;IACN,SAAS,EAAE,IAAAwB,4BAAgB,EACzBD,kBAAkB,kCAElB;IACF,IAAI,EAAE;EAAG,EACT,eACF,oBAAC,oBAAS;IACR,SAAS,EAAE,IAAAC,4BAAgB,EACzBD,kBAAkB;EAElB,EACF,CAEL,CACO;AAEd,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Group.js","names":["warn","warnOnce","Group","header","description","children","separator","getRootRef","modeProps","mode","padding","className","tabIndexProp","tabIndex","restProps","React","useContext","ModalRootContext","isInsideModal","platform","usePlatform","useAdaptivity","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","classNames","Platform","IOS","getSizeXClassName","styles","hasReactNode"],"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Platform } from '../../lib/platform';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Separator } from '../Separator/Separator';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport styles from './Group.module.css';\n\nexport interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: 's' | 'm';\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabsItem');\n\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <section\n      {...restProps}\n      tabIndex={tabIndex}\n      ref={getRootRef}\n      className={classNames(\n        styles['Group'],\n        platform === Platform.IOS && styles['Group--ios'],\n        getSizeXClassName(styles['Group'], sizeX),\n        mode && styles[`Group--mode-${mode}`],\n        styles[`Group--padding-${padding}`],\n        className,\n      )}\n    >\n      <div className={styles['Group__inner']}>\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </div>\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </section>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AA0BpE,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,UAAU,CAAC;AAE1B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAWA;EAAA,IAVhBC,MAAM,QAANA,MAAM;IACNC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,MAAM;IAClBC,UAAU,QAAVA,UAAU;IACJC,SAAS,QAAfC,IAAI;IAAA,oBACJC,OAAO;IAAPA,OAAO,6BAAG,GAAG;IACbC,SAAS,QAATA,SAAS;IACCC,YAAY,QAAtBC,QAAQ;IACLC,SAAS;EAEZ,wBAA0BC,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;IAApDC,aAAa,qBAAbA,aAAa;EACrB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,IAAIb,IAAiC,GAAGD,SAAS;EAEjD,IAAI,CAACA,SAAS,EAAE;IACd;IACAC,IAAI,GAAGS,aAAa,GAAG,OAAO,GAAG,MAAM;EACzC;EAEA,IAAMK,UAAU,GAAGT,SAAS,CAACU,IAAI,KAAK,UAAU;EAEhD,IACEC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IACtCJ,UAAU,KACT,CAACT,SAAS,CAAC,eAAe,CAAC,IAAI,CAACA,SAAS,CAAC,IAAI,CAAC,CAAC,EACjD;IACAd,IAAI,CACF,6FAA6F,CAC9F;EACH;EAEA,IAAMa,QAAQ,GAAGU,UAAU,IAAIX,YAAY,KAAKgB,SAAS,GAAG,CAAC,GAAGhB,YAAY;EAE5E,IAAMiB,kBAAkB,GAAG,IAAAC,gBAAU,0BAEnCxB,SAAS,KAAK,MAAM,iCAAqC,CAC1D;EAED,oBACE,0DACMQ,SAAS;IACb,QAAQ,EAAED,QAAS;IACnB,GAAG,EAAEN,UAAW;IAChB,SAAS,EAAE,IAAAuB,gBAAU,eAEnBX,QAAQ,KAAKY,kBAAQ,CAACC,GAAG,oBAAwB,EACjD,IAAAC,oCAAiB,eAAkBX,KAAK,CAAC,EACzCb,IAAI,IAAIyB,MAAM,uBAAgBzB,IAAI,EAAG,EACrCyB,MAAM,0BAAmBxB,OAAO,EAAG,EACnCC,SAAS;EACT,iBAEF;IAAK,SAAS;EAAyB,GACpCR,MAAM,EACNE,QAAQ,EACR,IAAA8B,kBAAY,EAAC/B,WAAW,CAAC,iBACxB,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAAEA,WAAW,CAChE,CACG,EACLE,SAAS,KAAK,MAAM,iBACnB,oBAAC,KAAK,CAAC,QAAQ,qBACb,oBAAC,gBAAO;IACN,SAAS,EAAE,IAAAwB,gBAAU,EAACD,kBAAkB,kCAAuC;IAC/E,IAAI,EAAE;EAAG,EACT,eACF,oBAAC,oBAAS;IACR,SAAS,EAAE,IAAAC,gBAAU,EAACD,kBAAkB;EAAyC,EACjF,CAEL,CACO;AAEd,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {
-    mode?: "primary" | "secondary" | "tertiary";
+    mode?: 'primary' | 'secondary' | 'tertiary';
     subtitle?: React.ReactNode;
     /**
      * Допускаются иконки, текст, Link

package/dist/cjs/components/Header/Header.js

@@ -9,9 +9,8 @@ exports.Header = 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 _usePlatform = require("../../hooks/usePlatform");
-var _utils = require("../../lib/utils");
 var _platform = require("../../lib/platform");
 var _Headline = require("../Typography/Headline/Headline");
 var _Footnote = require("../Typography/Footnote/Footnote");
@@ -26,13 +25,13 @@ var HeaderContent = function HeaderContent(_ref) {
   var platform = (0, _usePlatform.usePlatform)();
   if (platform === _platform.Platform.IOS) {
     switch (mode) {
-      case "primary":
-      case "tertiary":
+      case 'primary':
+      case 'tertiary':
         return /*#__PURE__*/React.createElement(_Title.Title, (0, _extends2.default)({
           weight: "1",
           level: "3"
         }, restProps));
-      case "secondary":
+      case 'secondary':
         return /*#__PURE__*/React.createElement(_Footnote.Footnote, (0, _extends2.default)({
           weight: "2",
           caps: true
@@ -41,22 +40,22 @@ var HeaderContent = function HeaderContent(_ref) {
   }
   if (platform === _platform.Platform.VKCOM) {
     switch (mode) {
-      case "primary":
+      case 'primary':
         return /*#__PURE__*/React.createElement(_Headline.Headline, (0, _extends2.default)({
           weight: "3"
         }, restProps));
-      case "secondary":
-      case "tertiary":
+      case 'secondary':
+      case 'tertiary':
         return /*#__PURE__*/React.createElement(_Footnote.Footnote, restProps);
     }
   }
   switch (mode) {
-    case "primary":
-    case "tertiary":
+    case 'primary':
+    case 'tertiary':
       return /*#__PURE__*/React.createElement(_Headline.Headline, (0, _extends2.default)({
         weight: "2"
       }, restProps));
-    case "secondary":
+    case 'secondary':
       return /*#__PURE__*/React.createElement(_Footnote.Footnote, (0, _extends2.default)({
         weight: "1",
         caps: true
@@ -70,7 +69,7 @@ var HeaderContent = function HeaderContent(_ref) {
  */
 var Header = function Header(_ref2) {
   var _ref2$mode = _ref2.mode,
-    mode = _ref2$mode === void 0 ? "primary" : _ref2$mode,
+    mode = _ref2$mode === void 0 ? 'primary' : _ref2$mode,
     children = _ref2.children,
     subtitle = _ref2.subtitle,
     indicator = _ref2.indicator,
@@ -81,10 +80,10 @@ var Header = function Header(_ref2) {
     restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var platform = (0, _usePlatform.usePlatform)();
   var AsideTypography = platform === _platform.Platform.VKCOM ? _Subhead.Subhead : _Text.Text;
-  var SubtitleTypography = mode === "secondary" ? _Subhead.Subhead : _Footnote.Footnote;
+  var SubtitleTypography = mode === 'secondary' ? _Subhead.Subhead : _Footnote.Footnote;
   return /*#__PURE__*/React.createElement("header", (0, _extends2.default)({}, restProps, {
     ref: getRootRef,
-    className: (0, _classNames.classNamesString)("vkuiHeader", platform === _platform.Platform.VKCOM && "vkuiHeader--vkcom", platform === _platform.Platform.ANDROID && "vkuiHeader--android", platform === _platform.Platform.IOS && "vkuiHeader--ios", styles["Header--mode-".concat(mode)], (0, _utils.isPrimitiveReactNode)(indicator) && "vkuiHeader--pi", className)
+    className: (0, _vkjs.classNames)("vkuiHeader", platform === _platform.Platform.VKCOM && "vkuiHeader--vkcom", platform === _platform.Platform.ANDROID && "vkuiHeader--android", platform === _platform.Platform.IOS && "vkuiHeader--ios", styles["Header--mode-".concat(mode)], (0, _vkjs.isPrimitiveReactNode)(indicator) && "vkuiHeader--pi", className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiHeader__main"
   }, /*#__PURE__*/React.createElement(HeaderContent, {
@@ -92,14 +91,14 @@ var Header = function Header(_ref2) {
     Component: "span",
     mode: mode
   }, /*#__PURE__*/React.createElement("span", {
-    className: (0, _classNames.classNamesString)("vkuiHeader__content-in", multiline && "vkuiHeader__content-in--multiline")
-  }, children), (0, _utils.hasReactNode)(indicator) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
+    className: (0, _vkjs.classNames)("vkuiHeader__content-in", multiline && "vkuiHeader__content-in--multiline")
+  }, children), (0, _vkjs.hasReactNode)(indicator) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
     className: "vkuiHeader__indicator",
-    weight: mode === "primary" || mode === "secondary" ? "1" : undefined
-  }, indicator)), (0, _utils.hasReactNode)(subtitle) && /*#__PURE__*/React.createElement(SubtitleTypography, {
+    weight: mode === 'primary' || mode === 'secondary' ? '1' : undefined
+  }, indicator)), (0, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/React.createElement(SubtitleTypography, {
     className: "vkuiHeader__subtitle",
     Component: "span"
-  }, subtitle)), (0, _utils.hasReactNode)(aside) && /*#__PURE__*/React.createElement(AsideTypography, {
+  }, subtitle)), (0, _vkjs.hasReactNode)(aside) && /*#__PURE__*/React.createElement(AsideTypography, {
     className: "vkuiHeader__aside",
     Component: "span"
   }, aside));

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","names":["HeaderContent","mode","restProps","platform","usePlatform","Platform","IOS","VKCOM","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","Subhead","Text","SubtitleTypography","Footnote","classNamesString","ANDROID","styles","isPrimitiveReactNode","hasReactNode","undefined"],"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { hasReactNode, isPrimitiveReactNode } from \"../../lib/utils\";\nimport { Platform } from \"../../lib/platform\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport styles from \"./Header.module.css\";\n\nexport interface HeaderProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement> {\n  mode?: \"primary\" | \"secondary\" | \"tertiary\";\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, \"children\" | \"mode\" | \"className\"> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, ...restProps }: HeaderContentProps) => {\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case \"primary\":\n      case \"tertiary\":\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n      case \"secondary\":\n        return <Footnote weight=\"2\" caps {...restProps} />;\n    }\n  }\n\n  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case \"primary\":\n        return <Headline weight=\"3\" {...restProps} />;\n      case \"secondary\":\n      case \"tertiary\":\n        return <Footnote {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case \"primary\":\n    case \"tertiary\":\n      return <Headline weight=\"2\" {...restProps} />;\n    case \"secondary\":\n      return <Footnote weight=\"1\" caps {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = \"primary\",\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;\n  const SubtitleTypography = mode === \"secondary\" ? Subhead : Footnote;\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNamesString(\n        styles[\"Header\"],\n        platform === Platform.VKCOM && styles[\"Header--vkcom\"],\n        platform === Platform.ANDROID && styles[\"Header--android\"],\n        platform === Platform.IOS && styles[\"Header--ios\"],\n        styles[`Header--mode-${mode}`],\n        isPrimitiveReactNode(indicator) && styles[\"Header--pi\"],\n        className\n      )}\n    >\n      <div className={styles[\"Header__main\"]}>\n        <HeaderContent\n          className={styles[\"Header__content\"]}\n          Component=\"span\"\n          mode={mode}\n        >\n          <span\n            className={classNamesString(\n              styles[\"Header__content-in\"],\n              multiline && styles[\"Header__content-in--multiline\"]\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote\n              className={styles[\"Header__indicator\"]}\n              weight={\n                mode === \"primary\" || mode === \"secondary\" ? \"1\" : undefined\n              }\n            >\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <SubtitleTypography\n            className={styles[\"Header__subtitle\"]}\n            Component=\"span\"\n          >\n            {subtitle}\n          </SubtitleTypography>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <AsideTypography className={styles[\"Header__aside\"]} Component=\"span\">\n          {aside}\n        </AsideTypography>\n      )}\n    </header>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Header.js","names":["HeaderContent","mode","restProps","platform","usePlatform","Platform","IOS","VKCOM","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","Subhead","Text","SubtitleTypography","Footnote","classNames","ANDROID","styles","isPrimitiveReactNode","hasReactNode","undefined"],"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Platform } from '../../lib/platform';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Title } from '../Typography/Title/Title';\nimport { Text } from '../Typography/Text/Text';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'className'> & HasComponent;\n\nconst HeaderContent = ({ mode, ...restProps }: HeaderContentProps) => {\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n      case 'secondary':\n        return <Footnote weight=\"2\" caps {...restProps} />;\n    }\n  }\n\n  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case 'primary':\n        return <Headline weight=\"3\" {...restProps} />;\n      case 'secondary':\n      case 'tertiary':\n        return <Footnote {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;\n  const SubtitleTypography = mode === 'secondary' ? Subhead : Footnote;\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.VKCOM && styles['Header--vkcom'],\n        platform === Platform.ANDROID && styles['Header--android'],\n        platform === Platform.IOS && styles['Header--ios'],\n        styles[`Header--mode-${mode}`],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent className={styles['Header__content']} Component=\"span\" mode={mode}>\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content-in--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote\n              className={styles['Header__indicator']}\n              weight={mode === 'primary' || mode === 'secondary' ? '1' : undefined}\n            >\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <SubtitleTypography className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </SubtitleTypography>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <AsideTypography className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </AsideTypography>\n      )}\n    </header>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HasComponent, HasRef, HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasComponent, HasRef, HasRootRef } from '../../types';
 export interface HorizontalCellProps extends React.AnchorHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement>, HasComponent {
-    size?: "s" | "m" | "l";
+    size?: 's' | 'm' | 'l';
     header?: React.ReactNode;
     subtitle?: React.ReactNode;
     disabled?: boolean;

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

@@ -9,8 +9,7 @@ exports.HorizontalCell = 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 _utils = require("../../lib/utils");
+var _vkjs = require("@vkontakte/vkjs");
 var _Caption = require("../Typography/Caption/Caption");
 var _Tappable = require("../Tappable/Tappable");
 var _Subhead = require("../Typography/Subhead/Subhead");
@@ -22,7 +21,7 @@ var CellTypography = function CellTypography(_ref) {
   var size = _ref.size,
     children = _ref.children,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return size === "s" ? /*#__PURE__*/React.createElement(_Caption.Caption, restProps, children) : /*#__PURE__*/React.createElement(_Subhead.Subhead, restProps, children);
+  return size === 's' ? /*#__PURE__*/React.createElement(_Caption.Caption, restProps, children) : /*#__PURE__*/React.createElement(_Subhead.Subhead, restProps, children);
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalCell
@@ -33,7 +32,7 @@ var HorizontalCell = function HorizontalCell(_ref2) {
     style = _ref2.style,
     subtitle = _ref2.subtitle,
     _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? "s" : _ref2$size,
+    size = _ref2$size === void 0 ? 's' : _ref2$size,
     _ref2$children = _ref2.children,
     children = _ref2$children === void 0 ? /*#__PURE__*/React.createElement(_Avatar.Avatar, {
       size: 56
@@ -44,18 +43,18 @@ var HorizontalCell = function HorizontalCell(_ref2) {
   return /*#__PURE__*/React.createElement("div", {
     ref: getRootRef,
     style: style,
-    className: (0, _classNames.classNamesString)("vkuiHorizontalCell", styles["HorizontalCell--size-".concat(size)], className)
+    className: (0, _vkjs.classNames)("vkuiHorizontalCell", styles["HorizontalCell--size-".concat(size)], className)
   }, /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
     className: "vkuiHorizontalCell__body",
     getRootRef: getRef
-  }, restProps), (0, _utils.hasReactNode)(children) && /*#__PURE__*/React.createElement("div", {
+  }, restProps), (0, _vkjs.hasReactNode)(children) && /*#__PURE__*/React.createElement("div", {
     className: "vkuiHorizontalCell__image"
   }, children), /*#__PURE__*/React.createElement("div", {
     className: "vkuiHorizontalCell__content"
-  }, (0, _utils.hasReactNode)(header) && /*#__PURE__*/React.createElement(CellTypography, {
+  }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/React.createElement(CellTypography, {
     size: size,
     className: "vkuiHorizontalCell__title"
-  }, header), (0, _utils.hasReactNode)(subtitle) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
+  }, header), (0, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
     className: "vkuiHorizontalCell__subtitle"
   }, subtitle))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCell.js","names":["CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","classNamesString","styles","hasReactNode"],"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } 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 styles from \"./HorizontalCell.module.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 {...restProps}>{children}</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      ref={getRootRef}\n      style={style}\n      className={classNamesString(\n        styles[\"HorizontalCell\"],\n        styles[`HorizontalCell--size-${size}`],\n        className\n      )}\n    >\n      <Tappable\n        className={styles[\"HorizontalCell__body\"]}\n        getRootRef={getRef}\n        {...restProps}\n      >\n        {hasReactNode(children) && (\n          <div className={styles[\"HorizontalCell__image\"]}>{children}</div>\n        )}\n        <div className={styles[\"HorizontalCell__content\"]}>\n          {hasReactNode(header) && (\n            <CellTypography\n              size={size}\n              className={styles[\"HorizontalCell__title\"]}\n            >\n              {header}\n            </CellTypography>\n          )}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles[\"HorizontalCell__subtitle\"]}>\n              {subtitle}\n            </Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA0C;EAAA;AAQ1C,IAAMA,cAAc,GAAG,SAAjBA,cAAc,OAIO;EAAA,IAHzBC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,OAAOF,IAAI,KAAK,GAAG,gBACjB,oBAAC,gBAAO,EAAKE,SAAS,EAAGD,QAAQ,CAAW,gBAE5C,oBAAC,gBAAO,EAAKC,SAAS,EAAGD,QAAQ,CAClC;AACH,CAAC;AAaD;AACA;AACA;AACO,IAAME,cAAc,GAAG,SAAjBA,cAAc,QAUA;EAAA,IATzBC,SAAS,SAATA,SAAS;IACTC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,QAAQ,SAARA,QAAQ;IAAA,mBACRP,IAAI;IAAJA,IAAI,2BAAG,GAAG;IAAA,uBACVC,QAAQ;IAARA,QAAQ,4CAAG,oBAAC,cAAM;MAAC,IAAI,EAAE;IAAG,EAAG;IAC/BO,UAAU,SAAVA,UAAU;IACVC,MAAM,SAANA,MAAM;IACHP,SAAS;EAEZ,oBACE;IACE,GAAG,EAAEM,UAAW;IAChB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAE,IAAAI,4BAAgB,wBAEzBC,MAAM,gCAAyBX,IAAI,EAAG,EACtCI,SAAS;EACT,gBAEF,oBAAC,kBAAQ;IACP,SAAS,4BAAiC;IAC1C,UAAU,EAAEK;EAAO,GACfP,SAAS,GAEZ,IAAAU,mBAAY,EAACX,QAAQ,CAAC,iBACrB;IAAK,SAAS;EAAkC,GAAEA,QAAQ,CAC3D,eACD;IAAK,SAAS;EAAoC,GAC/C,IAAAW,mBAAY,EAACP,MAAM,CAAC,iBACnB,oBAAC,cAAc;IACb,IAAI,EAAEL,IAAK;IACX,SAAS;EAAkC,GAE1CK,MAAM,CAEV,EACA,IAAAO,mBAAY,EAACL,QAAQ,CAAC,iBACrB,oBAAC,kBAAQ;IAAC,SAAS;EAAqC,GACrDA,QAAQ,CAEZ,CACG,CACG,CACP;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"HorizontalCell.js","names":["CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","classNames","styles","hasReactNode"],"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\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 styles from './HorizontalCell.module.css';\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</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      ref={getRootRef}\n      style={style}\n      className={classNames(\n        styles['HorizontalCell'],\n        styles[`HorizontalCell--size-${size}`],\n        className,\n      )}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        <div className={styles['HorizontalCell__content']}>\n          {hasReactNode(header) && (\n            <CellTypography size={size} className={styles['HorizontalCell__title']}>\n              {header}\n            </CellTypography>\n          )}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA0C;EAAA;AAQ1C,IAAMA,cAAc,GAAG,SAAjBA,cAAc,OAA8D;EAAA,IAAxDC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,SAAS;EACpD,OAAOF,IAAI,KAAK,GAAG,gBACjB,oBAAC,gBAAO,EAAKE,SAAS,EAAGD,QAAQ,CAAW,gBAE5C,oBAAC,gBAAO,EAAKC,SAAS,EAAGD,QAAQ,CAClC;AACH,CAAC;AAaD;AACA;AACA;AACO,IAAME,cAAc,GAAG,SAAjBA,cAAc,QAUA;EAAA,IATzBC,SAAS,SAATA,SAAS;IACTC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,QAAQ,SAARA,QAAQ;IAAA,mBACRP,IAAI;IAAJA,IAAI,2BAAG,GAAG;IAAA,uBACVC,QAAQ;IAARA,QAAQ,4CAAG,oBAAC,cAAM;MAAC,IAAI,EAAE;IAAG,EAAG;IAC/BO,UAAU,SAAVA,UAAU;IACVC,MAAM,SAANA,MAAM;IACHP,SAAS;EAEZ,oBACE;IACE,GAAG,EAAEM,UAAW;IAChB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAE,IAAAI,gBAAU,wBAEnBC,MAAM,gCAAyBX,IAAI,EAAG,EACtCI,SAAS;EACT,gBAEF,oBAAC,kBAAQ;IAAC,SAAS,4BAAiC;IAAC,UAAU,EAAEK;EAAO,GAAKP,SAAS,GACnF,IAAAU,kBAAY,EAACX,QAAQ,CAAC,iBACrB;IAAK,SAAS;EAAkC,GAAEA,QAAQ,CAC3D,eACD;IAAK,SAAS;EAAoC,GAC/C,IAAAW,kBAAY,EAACP,MAAM,CAAC,iBACnB,oBAAC,cAAc;IAAC,IAAI,EAAEL,IAAK;IAAC,SAAS;EAAkC,GACpEK,MAAM,CAEV,EACA,IAAAO,kBAAY,EAACL,QAAQ,CAAC,iBACrB,oBAAC,kBAAQ;IAAC,SAAS;EAAqC,GAAEA,QAAQ,CACnE,CACG,CACG,CACP;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRef } from "../../types";
+import * as React from 'react';
+import { HasRef } from '../../types';
 export declare type ScrollPositionHandler = (currentPosition: number) => number;
 export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
@@ -10,8 +10,8 @@ export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivEleme
      * Функция для расчета величины прокрутки при клике на правую стрелку.
      */
     getScrollToRight?: ScrollPositionHandler;
-    arrowSize?: "m" | "l";
-    showArrows?: boolean | "always";
+    arrowSize?: 'm' | 'l';
+    showArrows?: boolean | 'always';
     scrollAnimationDuration?: number;
 }
 /**

package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js

@@ -15,7 +15,7 @@ var _HorizontalScrollArrow = require("./HorizontalScrollArrow");
 var _fx = require("../../lib/fx");
 var _useEventListener = require("../../hooks/useEventListener");
 var _useExternRef = require("../../hooks/useExternRef");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["children", "getScrollToLeft", "getScrollToRight", "showArrows", "arrowSize", "scrollAnimationDuration", "getRef", "className"];
 /**
  * timing method
@@ -96,7 +96,7 @@ var HorizontalScroll = function HorizontalScroll(_ref2) {
     _ref2$showArrows = _ref2.showArrows,
     showArrows = _ref2$showArrows === void 0 ? true : _ref2$showArrows,
     _ref2$arrowSize = _ref2.arrowSize,
-    arrowSize = _ref2$arrowSize === void 0 ? "l" : _ref2$arrowSize,
+    arrowSize = _ref2$arrowSize === void 0 ? 'l' : _ref2$arrowSize,
     _ref2$scrollAnimation = _ref2.scrollAnimationDuration,
     scrollAnimationDuration = _ref2$scrollAnimation === void 0 ? SCROLL_ONE_FRAME_TIME : _ref2$scrollAnimation,
     getRef = _ref2.getRef,
@@ -158,7 +158,7 @@ var HorizontalScroll = function HorizontalScroll(_ref2) {
       setCanScrollRight(roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth < scrollElement.scrollWidth);
     }
   }, [hasPointer, scrollerRef, showArrows]);
-  var scrollEvent = (0, _useEventListener.useEventListener)("scroll", onscroll);
+  var scrollEvent = (0, _useEventListener.useEventListener)('scroll', onscroll);
   React.useEffect(function () {
     if (scrollerRef.current) {
       scrollEvent.add(scrollerRef.current);
@@ -166,8 +166,13 @@ var HorizontalScroll = function HorizontalScroll(_ref2) {
   }, [scrollEvent, scrollerRef]);
   React.useEffect(onscroll, [scrollerRef, children, onscroll]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiHorizontalScroll", showArrows === "always" && "vkuiHorizontalScroll--withConstArrows", className)
-  }), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/React.createElement(_HorizontalScrollArrow.HorizontalScrollArrow, {
+    className: (0, _vkjs.classNames)("vkuiHorizontalScroll", showArrows === 'always' && "vkuiHorizontalScroll--withConstArrows", className)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiHorizontalScroll__in",
+    ref: scrollerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vkuiHorizontalScroll__in-wrapper"
+  }, children)), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/React.createElement(_HorizontalScrollArrow.HorizontalScrollArrow, {
     size: arrowSize,
     direction: "left",
     className: "vkuiHorizontalScroll__arrowLeft",
@@ -177,12 +182,7 @@ var HorizontalScroll = function HorizontalScroll(_ref2) {
     direction: "right",
     className: "vkuiHorizontalScroll__arrowRight",
     onClick: scrollToRight
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiHorizontalScroll__in",
-    ref: scrollerRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiHorizontalScroll__in-wrapper"
-  }, children)));
+  }));
 };
 exports.HorizontalScroll = HorizontalScroll;
 //# sourceMappingURL=HorizontalScroll.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","names":["now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","easeInOutSine","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","getRef","className","restProps","React","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","useExternRef","hasPointer","useAdaptivityHasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEventListener","useEffect","add","classNamesString","undefined"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAdaptivityHasPointer } from \"../../hooks/useAdaptivityHasPointer\";\nimport { HorizontalScrollArrow } from \"./HorizontalScrollArrow\";\nimport { easeInOutSine } from \"../../lib/fx\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { HasRef } from \"../../types\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./HorizontalScroll.module.css\";\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: \"m\" | \"l\";\n  showArrows?: boolean | \"always\";\n  scrollAnimationDuration?: number;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (\n      roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) &&\n      elapsed !== 1\n    ) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = \"l\",\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth:\n            scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        })\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef]\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const onscroll = React.useCallback(() => {\n    if (\n      showArrows &&\n      hasPointer &&\n      scrollerRef.current &&\n      !isCustomScrollingRef.current\n    ) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener(\"scroll\", onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(\n        styles[\"HorizontalScroll\"],\n        showArrows === \"always\" && styles[\"HorizontalScroll--withConstArrows\"],\n        className\n      )}\n    >\n      {showArrows &&\n        (hasPointer || hasPointer === undefined) &&\n        canScrollLeft && (\n          <HorizontalScrollArrow\n            size={arrowSize}\n            direction=\"left\"\n            className={styles[\"HorizontalScroll__arrowLeft\"]}\n            onClick={scrollToLeft}\n          />\n        )}\n      {showArrows &&\n        (hasPointer || hasPointer === undefined) &&\n        canScrollRight && (\n          <HorizontalScrollArrow\n            size={arrowSize}\n            direction=\"right\"\n            className={styles[\"HorizontalScroll__arrowRight\"]}\n            onClick={scrollToRight}\n          />\n        )}\n      <div className={styles[\"HorizontalScroll__in\"]} ref={scrollerRef}>\n        <div className={styles[\"HorizontalScroll__in-wrapper\"]}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalScroll.js","names":["now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","easeInOutSine","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","getRef","className","restProps","React","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","useExternRef","hasPointer","useAdaptivityHasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEventListener","useEffect","add","classNames","undefined"],"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { HorizontalScrollArrow } from './HorizontalScrollArrow';\nimport { easeInOutSine } from '../../lib/fx';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { HasRef } from '../../types';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'l',\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const onscroll = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n        className,\n      )}\n    >\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"left\"\n          className={styles['HorizontalScroll__arrowLeft']}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"right\"\n          className={styles['HorizontalScroll__arrowRight']}\n          onClick={scrollToRight}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/HorizontalScroll/HorizontalScrollArrow.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import * as React from 'react';
 export interface HorizontalScrollArrowProps {
-    direction: "left" | "right";
-    size?: "m" | "l";
+    direction: 'left' | 'right';
+    size?: 'm' | 'l';
     onClick(event: React.MouseEvent): void;
     className?: string;
 }

package/dist/cjs/components/HorizontalScroll/HorizontalScrollArrow.js

@@ -10,27 +10,27 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _Tappable = require("../Tappable/Tappable");
 var _excluded = ["size", "direction", "onClick", "className"];
 var HorizontalScrollArrow = function HorizontalScrollArrow(_ref) {
   var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "l" : _ref$size,
+    size = _ref$size === void 0 ? 'l' : _ref$size,
     direction = _ref.direction,
     onClick = _ref.onClick,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var ArrowIcon;
-  if (size === "m") {
-    ArrowIcon = direction === "left" ? _icons.Icon16ChevronLeft : _icons.Icon16Chevron;
+  if (size === 'm') {
+    ArrowIcon = direction === 'left' ? _icons.Icon16ChevronLeft : _icons.Icon16Chevron;
   } else {
-    ArrowIcon = direction === "left" ? _icons.Icon24ChevronCompactLeft : _icons.Icon24Chevron;
+    ArrowIcon = direction === 'left' ? _icons.Icon24ChevronCompactLeft : _icons.Icon24Chevron;
   }
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
     Component: "button",
     hasHover: false,
     hasActive: false,
-    className: (0, _classNames.classNamesString)("vkuiHorizontalScrollArrow", styles["HorizontalScrollArrow--size-".concat(size)], styles["HorizontalScrollArrow--direction-".concat(direction)], className),
+    className: (0, _vkjs.classNames)("vkuiHorizontalScrollArrow", styles["HorizontalScrollArrow--size-".concat(size)], styles["HorizontalScrollArrow--direction-".concat(direction)], className),
     onClick: onClick
   }), /*#__PURE__*/React.createElement("span", {
     className: "vkuiHorizontalScrollArrow__icon"