@vkontakte/vkui 5.4.3 → 5.5.0

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

@@ -8,21 +8,21 @@ Object.defineProperty(exports, "Header", {
         return Header;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
-var _footnote = require("../Typography/Footnote/Footnote");
-var _headline = require("../Typography/Headline/Headline");
-var _paragraph = require("../Typography/Paragraph/Paragraph");
-var _subhead = require("../Typography/Subhead/Subhead");
-var _title = require("../Typography/Title/Title");
+var _Footnote = require("../Typography/Footnote/Footnote");
+var _Headline = require("../Typography/Headline/Headline");
+var _Paragraph = require("../Typography/Paragraph/Paragraph");
+var _Subhead = require("../Typography/Subhead/Subhead");
+var _Title = require("../Typography/Title/Title");
 var HeaderContent = function(_param) {
-    var mode = _param.mode, size = _param.size, restProps = _objectWithoutProperties(_param, [
+    var mode = _param.mode, size = _param.size, restProps = _object_without_properties._(_param, [
         "mode",
         "size"
     ]);
@@ -31,66 +31,47 @@ var HeaderContent = function(_param) {
     if (platform === _platform.Platform.IOS) {
         switch(mode){
             case "primary":
-                return isLarge ? /*#__PURE__*/ _react.createElement(_title.Title, _objectSpread({
+                return isLarge ? /*#__PURE__*/ _react.createElement(_Title.Title, _object_spread._({
                     level: "2",
                     weight: "2"
-                }, restProps)) : /*#__PURE__*/ _react.createElement(_title.Title, _objectSpread({
+                }, restProps)) : /*#__PURE__*/ _react.createElement(_Title.Title, _object_spread._({
                     weight: "1",
                     level: "3"
                 }, restProps));
             case "secondary":
-                return /*#__PURE__*/ _react.createElement(_footnote.Footnote, _objectSpread({
+                return /*#__PURE__*/ _react.createElement(_Footnote.Footnote, _object_spread._({
                     weight: "1",
                     caps: true
                 }, restProps));
             case "tertiary":
-                return /*#__PURE__*/ _react.createElement(_title.Title, _objectSpread({
+                return /*#__PURE__*/ _react.createElement(_Title.Title, _object_spread._({
                     weight: "1",
                     level: "3"
                 }, restProps));
         }
     }
-    if (platform === _platform.Platform.VKCOM) {
-        switch(mode){
-            case "primary":
-                return isLarge ? /*#__PURE__*/ _react.createElement(_title.Title, _objectSpread({
-                    level: "2",
-                    weight: "1"
-                }, restProps)) : /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpread({
-                    level: "1",
-                    weight: "2"
-                }, restProps));
-            case "secondary":
-                return /*#__PURE__*/ _react.createElement(_footnote.Footnote, _objectSpread({
-                    caps: true,
-                    weight: "1"
-                }, restProps));
-            case "tertiary":
-                return /*#__PURE__*/ _react.createElement(_footnote.Footnote, restProps);
-        }
-    }
     switch(mode){
         case "primary":
-            return isLarge ? /*#__PURE__*/ _react.createElement(_title.Title, _objectSpread({
+            return isLarge ? /*#__PURE__*/ _react.createElement(_Title.Title, _object_spread._({
                 level: "2",
                 weight: "2"
-            }, restProps)) : /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpread({
+            }, restProps)) : /*#__PURE__*/ _react.createElement(_Headline.Headline, _object_spread._({
                 weight: "2"
             }, restProps));
         case "secondary":
-            return /*#__PURE__*/ _react.createElement(_footnote.Footnote, _objectSpread({
+            return /*#__PURE__*/ _react.createElement(_Footnote.Footnote, _object_spread._({
                 weight: "1",
                 caps: true
             }, restProps));
         case "tertiary":
-            return /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpread({
+            return /*#__PURE__*/ _react.createElement(_Headline.Headline, _object_spread._({
                 weight: "2"
             }, restProps));
     }
     return null;
 };
 var Header = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "primary" : _param_mode, _param_size = _param.size, size = _param_size === void 0 ? "regular" : _param_size, children = _param.children, subtitle = _param.subtitle, indicator = _param.indicator, aside = _param.aside, getRootRef = _param.getRootRef, multiline = _param.multiline, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "primary" : _param_mode, _param_size = _param.size, size = _param_size === void 0 ? "regular" : _param_size, children = _param.children, subtitle = _param.subtitle, indicator = _param.indicator, aside = _param.aside, getRootRef = _param.getRootRef, multiline = _param.multiline, className = _param.className, restProps = _object_without_properties._(_param, [
         "mode",
         "size",
         "children",
@@ -102,10 +83,9 @@ var Header = function(_param) {
         "className"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    var AsideTypography = platform === _platform.Platform.VKCOM ? _subhead.Subhead : _paragraph.Paragraph;
-    return /*#__PURE__*/ _react.createElement("header", _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement("header", _object_spread_props._(_object_spread._({}, restProps), {
         ref: getRootRef,
-        className: (0, _vkjs.classNames)("vkuiHeader", platform === _platform.Platform.VKCOM && "vkuiHeader--vkcom", platform === _platform.Platform.ANDROID && "vkuiHeader--android", platform === _platform.Platform.IOS && "vkuiHeader--ios", {
+        className: (0, _vkjs.classNames)("vkuiHeader", platform === _platform.Platform.IOS && "vkuiHeader--ios", {
             primary: "vkuiHeader--mode-primary",
             secondary: "vkuiHeader--mode-secondary",
             tertiary: "vkuiHeader--mode-tertiary"
@@ -119,13 +99,13 @@ var Header = function(_param) {
         size: size
     }, /*#__PURE__*/ _react.createElement("span", {
         className: (0, _vkjs.classNames)("vkuiHeader__content-in", multiline && "vkuiHeader__content-in--multiline")
-    }, children), (0, _vkjs.hasReactNode)(indicator) && /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
+    }, children), (0, _vkjs.hasReactNode)(indicator) && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         className: "vkuiHeader__indicator",
         weight: "2"
-    }, indicator)), (0, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/ _react.createElement(_subhead.Subhead, {
+    }, indicator)), (0, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
         className: "vkuiHeader__subtitle",
         Component: "span"
-    }, subtitle)), (0, _vkjs.hasReactNode)(aside) && /*#__PURE__*/ _react.createElement(AsideTypography, {
+    }, subtitle)), (0, _vkjs.hasReactNode)(aside) && /*#__PURE__*/ _react.createElement(_Paragraph.Paragraph, {
         className: "vkuiHeader__aside",
         Component: "span"
     }, aside));

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

@@ -1 +1 @@
-{"version":3,"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 { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\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' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"1\" {...restProps} />\n        ) : (\n          <Headline level=\"1\" weight=\"2\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote caps weight=\"1\" {...restProps} />;\n      case 'tertiary':\n        return <Footnote {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...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  size = 'regular',\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 : Paragraph;\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        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\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 className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </Subhead>\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"],"names":["Header","HeaderContent","mode","size","restProps","isLarge","platform","usePlatform","Platform","IOS","Title","level","weight","Footnote","caps","VKCOM","Headline","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","Subhead","Paragraph","header","ref","classNames","ANDROID","primary","secondary","tertiary","isPrimitiveReactNode","hasReactNode","div","Component","span"],"mappings":"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"}
+{"version":3,"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 { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\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' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...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  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.IOS && styles['Header--ios'],\n        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\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 className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </header>\n  );\n};\n"],"names":["Header","HeaderContent","mode","size","restProps","isLarge","platform","usePlatform","Platform","IOS","Title","level","weight","Footnote","caps","Headline","children","subtitle","indicator","aside","getRootRef","multiline","className","header","ref","classNames","primary","secondary","tertiary","isPrimitiveReactNode","hasReactNode","div","Component","span","Subhead","Paragraph"],"mappings":";;;;+BAoEaA;;;eAAAA;;;;;;;+DApEU;oBACwC;2BACnC;wBACH;wBAEA;wBACA;yBACC;uBACF;qBACF;AAqBtB,IAAMC,gBAAgB;QAAGC,cAAAA,MAAMC,cAAAA,MAASC;QAAfF;QAAMC;;IAC7B,IAAME,UAAUF,SAAS;IAEzB,IAAMG,WAAWC,IAAAA;IACjB,IAAID,aAAaE,mBAASC,KAAK;QAC7B,OAAQP;YACN,KAAK;gBACH,OAAOG,wBACL,qBAACK;oBAAMC,OAAM;oBAAIC,QAAO;mBAAQR,4BAEhC,qBAACM;oBAAME,QAAO;oBAAID,OAAM;mBAAQP;YAEpC,KAAK;gBACH,qBAAO,qBAACS;oBAASD,QAAO;oBAAIE,MAAAA;mBAASV;YACvC,KAAK;gBACH,qBAAO,qBAACM;oBAAME,QAAO;oBAAID,OAAM;mBAAQP;QAC3C;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,qBAACK;gBAAMC,OAAM;gBAAIC,QAAO;eAAQR,4BAEhC,qBAACW;gBAASH,QAAO;eAAQR;QAE7B,KAAK;YACH,qBAAO,qBAACS;gBAASD,QAAO;gBAAIE,MAAAA;eAASV;QACvC,KAAK;YACH,qBAAO,qBAACW;gBAASH,QAAO;eAAQR;IACpC;IAEA,OAAO;AACT;AAKO,IAAMJ,SAAS;6BACpBE,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,yBACPa,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,mBAAAA,WACGlB;QATHF;QACAC;QACAa;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMhB,WAAWC,IAAAA;IAEjB,qBACE,qBAACgB,sDACKnB;QACJoB,KAAKJ;QACLE,WAAWG,IAAAA,gCAETnB,aAAaE,mBAASC,0BACtB;YACEiB,OAAO;YACPC,SAAS;YACTC,QAAQ;QACV,CAAC,CAAC1B,KAAK,EACP2B,IAAAA,4BAAqBX,gCACrBY,IAAAA,oBAAab,0CACbK;sBAGF,qBAACS;QAAIT,SAAS;qBACZ,qBAACrB;QACCqB,SAAS;QACTU,WAAU;QACV9B,MAAMA;QACNC,MAAMA;qBAEN,qBAAC8B;QACCX,WAAWG,IAAAA,4CAETJ;OAGDL,WAEFc,IAAAA,oBAAaZ,4BACZ,qBAACL;QAASS,SAAS;QAA+BV,QAAO;OACtDM,aAKNY,IAAAA,oBAAab,2BACZ,qBAACiB;QAAQZ,SAAS;QAA8BU,WAAU;OACvDf,YAKNa,IAAAA,oBAAaX,wBACZ,qBAACgB;QAAUb,SAAS;QAA2BU,WAAU;OACtDb;AAKX"}

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

@@ -19,4 +19,4 @@ export interface HorizontalCellProps extends React.AnchorHTMLAttributes<HTMLElem
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalCell
  */
-export declare const HorizontalCell: ({ className, header, style, subtitle, size, children, getRootRef, getRef, extraSubtitle, ...restProps }: HorizontalCellProps) => JSX.Element;
+export declare const HorizontalCell: ({ className, header, style, subtitle, size, children, getRootRef, getRef, extraSubtitle, ...restProps }: HorizontalCellProps) => React.JSX.Element;

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

@@ -8,27 +8,27 @@ Object.defineProperty(exports, "HorizontalCell", {
         return HorizontalCell;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _avatar = require("../Avatar/Avatar");
-var _tappable = require("../Tappable/Tappable");
-var _caption = require("../Typography/Caption/Caption");
-var _footnote = require("../Typography/Footnote/Footnote");
-var _subhead = require("../Typography/Subhead/Subhead");
+var _Avatar = require("../Avatar/Avatar");
+var _Tappable = require("../Tappable/Tappable");
+var _Caption = require("../Typography/Caption/Caption");
+var _Footnote = require("../Typography/Footnote/Footnote");
+var _Subhead = require("../Typography/Subhead/Subhead");
 var CellTypography = function(_param) {
-    var size = _param.size, children = _param.children, restProps = _objectWithoutProperties(_param, [
+    var size = _param.size, children = _param.children, restProps = _object_without_properties._(_param, [
         "size",
         "children"
     ]);
-    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);
 };
 var HorizontalCell = function(_param) {
-    var className = _param.className, header = _param.header, style = _param.style, subtitle = _param.subtitle, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_children = _param.children, children = _param_children === void 0 ? /*#__PURE__*/ _react.createElement(_avatar.Avatar, {
+    var className = _param.className, header = _param.header, style = _param.style, subtitle = _param.subtitle, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_children = _param.children, children = _param_children === void 0 ? /*#__PURE__*/ _react.createElement(_Avatar.Avatar, {
         size: 56
-    }) : _param_children, getRootRef = _param.getRootRef, getRef = _param.getRef, extraSubtitle = _param.extraSubtitle, restProps = _objectWithoutProperties(_param, [
+    }) : _param_children, getRootRef = _param.getRootRef, getRef = _param.getRef, extraSubtitle = _param.extraSubtitle, restProps = _object_without_properties._(_param, [
         "className",
         "header",
         "style",
@@ -47,7 +47,7 @@ var HorizontalCell = function(_param) {
             m: "vkuiHorizontalCell--size-m",
             l: "vkuiHorizontalCell--size-l"
         }[size], className)
-    }, /*#__PURE__*/ _react.createElement(_tappable.Tappable, _objectSpread({
+    }, /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread._({
         className: "vkuiHorizontalCell__body",
         getRootRef: getRef
     }, restProps), (0, _vkjs.hasReactNode)(children) && /*#__PURE__*/ _react.createElement("div", {
@@ -56,9 +56,9 @@ var HorizontalCell = function(_param) {
         className: "vkuiHorizontalCell__content"
     }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(CellTypography, {
         size: size
-    }, header), (0, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
+    }, header), (0, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         className: "vkuiHorizontalCell__subtitle"
-    }, subtitle), (0, _vkjs.hasReactNode)(extraSubtitle) && /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
+    }, subtitle), (0, _vkjs.hasReactNode)(extraSubtitle) && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         className: "vkuiHorizontalCell__subtitle"
     }, extraSubtitle))));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\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  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: 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  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(\n        styles['HorizontalCell'],\n        {\n          s: styles['HorizontalCell--size-s'],\n          m: styles['HorizontalCell--size-m'],\n          l: styles['HorizontalCell--size-l'],\n        }[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) && <CellTypography size={size}>{header}</CellTypography>}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n          {hasReactNode(extraSubtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["HorizontalCell","CellTypography","size","children","restProps","Caption","Subhead","className","header","style","subtitle","Avatar","getRootRef","getRef","extraSubtitle","div","ref","classNames","s","m","l","Tappable","hasReactNode","Footnote"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;;;2DA9CU;oBACkB;sBAElB;wBACE;uBACD;wBACC;uBACD;AAOxB,IAAMC,iBAAiB,iBAA2D;QAAxDC,cAAAA,MAAMC,kBAAAA,UAAaC;QAAnBF;QAAMC;;IAC9B,OAAOD,SAAS,oBACd,qBAACG,gBAAO,EAAKD,WAAYD,0BAEzB,qBAACG,gBAAO,EAAKF,WAAYD,SAC1B;AACH;AA0BO,IAAMH,iBAAiB,iBAWH;QAVzBO,mBAAAA,WACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAR,MAAAA,gCAAO,4CACPC,UAAAA,sDAAW,qBAACQ,cAAM;QAACT,MAAM;0BACzBU,oBAAAA,YACAC,gBAAAA,QACAC,uBAAAA,eACGV;QATHG;QACAC;QACAC;QACAC;QACAR;QACAC;QACAS;QACAC;QACAC;;IAGA,qBACE,qBAACC;QACCC,KAAKJ;QACLH,OAAOA;QACPF,WAAWU,IAAAA,gBAAU,wBAEnB;YACEC,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAAClB,KAAK,EACPK;qBAGF,qBAACc,kBAAQ;QAACd,SAAS;QAAkCK,YAAYC;OAAYT,YAC1EkB,IAAAA,kBAAY,EAACnB,2BACZ,qBAACY;QAAIR,SAAS;OAAoCJ,yBAEpD,qBAACY;QAAIR,SAAS;OACXe,IAAAA,kBAAY,EAACd,yBAAW,qBAACP;QAAeC,MAAMA;OAAOM,SACrDc,IAAAA,kBAAY,EAACZ,2BACZ,qBAACa,kBAAQ;QAAChB,SAAS;OAAuCG,WAE3DY,IAAAA,kBAAY,EAACR,gCACZ,qBAACS,kBAAQ;QAAChB,SAAS;OAAuCO;AAMtE"}
+{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\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  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: 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  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(\n        styles['HorizontalCell'],\n        {\n          s: styles['HorizontalCell--size-s'],\n          m: styles['HorizontalCell--size-m'],\n          l: styles['HorizontalCell--size-l'],\n        }[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) && <CellTypography size={size}>{header}</CellTypography>}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n          {hasReactNode(extraSubtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["HorizontalCell","CellTypography","size","children","restProps","Caption","Subhead","className","header","style","subtitle","Avatar","getRootRef","getRef","extraSubtitle","div","ref","classNames","s","m","l","Tappable","hasReactNode","Footnote"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;;;+DA9CU;oBACkB;sBAElB;wBACE;uBACD;wBACC;uBACD;AAOxB,IAAMC,iBAAiB;QAAGC,cAAAA,MAAMC,kBAAAA,UAAaC;QAAnBF;QAAMC;;IAC9B,OAAOD,SAAS,oBACd,qBAACG,kBAAYD,WAAYD,0BAEzB,qBAACG,kBAAYF,WAAYD;AAE7B;AA0BO,IAAMH,iBAAiB;QAC5BO,mBAAAA,WACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAR,MAAAA,gCAAO,4CACPC,UAAAA,sDAAW,qBAACQ;QAAOT,MAAM;0BACzBU,oBAAAA,YACAC,gBAAAA,QACAC,uBAAAA,eACGV;QATHG;QACAC;QACAC;QACAC;QACAR;QACAC;QACAS;QACAC;QACAC;;IAGA,qBACE,qBAACC;QACCC,KAAKJ;QACLH,OAAOA;QACPF,WAAWU,IAAAA,wCAET;YACEC,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAAClB,KAAK,EACPK;qBAGF,qBAACc;QAASd,SAAS;QAAkCK,YAAYC;OAAYT,YAC1EkB,IAAAA,oBAAanB,2BACZ,qBAACY;QAAIR,SAAS;OAAoCJ,yBAEpD,qBAACY;QAAIR,SAAS;OACXe,IAAAA,oBAAad,yBAAW,qBAACP;QAAeC,MAAMA;OAAOM,SACrDc,IAAAA,oBAAaZ,2BACZ,qBAACa;QAAShB,SAAS;OAAuCG,WAE3DY,IAAAA,oBAAaR,gCACZ,qBAACS;QAAShB,SAAS;OAAuCO;AAMtE"}

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

@@ -26,4 +26,4 @@ export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivEleme
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */
-export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => JSX.Element;
+export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => React.JSX.Element;

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

@@ -8,18 +8,18 @@ Object.defineProperty(exports, "HorizontalScroll", {
         return HorizontalScroll;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
 var _useEventListener = require("../../hooks/useEventListener");
 var _useExternRef = require("../../hooks/useExternRef");
 var _fx = require("../../lib/fx");
-var _horizontalScrollArrow = require("./HorizontalScrollArrow");
+var _ScrollArrow = require("../ScrollArrow/ScrollArrow");
 /**
  * timing method
  */ function now() {
@@ -74,7 +74,7 @@ function doScroll(param) {
     })();
 }
 var HorizontalScroll = function(_param) {
-    var children = _param.children, getScrollToLeft = _param.getScrollToLeft, getScrollToRight = _param.getScrollToRight, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_arrowSize = _param.arrowSize, arrowSize = _param_arrowSize === void 0 ? "l" : _param_arrowSize, arrowOffsetY = _param.arrowOffsetY, _param_scrollAnimationDuration = _param.scrollAnimationDuration, scrollAnimationDuration = _param_scrollAnimationDuration === void 0 ? SCROLL_ONE_FRAME_TIME : _param_scrollAnimationDuration, getRef = _param.getRef, className = _param.className, _param_scrollOnAnyWheel = _param.scrollOnAnyWheel, scrollOnAnyWheel = _param_scrollOnAnyWheel === void 0 ? false : _param_scrollOnAnyWheel, restProps = _objectWithoutProperties(_param, [
+    var children = _param.children, getScrollToLeft = _param.getScrollToLeft, getScrollToRight = _param.getScrollToRight, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_arrowSize = _param.arrowSize, arrowSize = _param_arrowSize === void 0 ? "l" : _param_arrowSize, arrowOffsetY = _param.arrowOffsetY, _param_scrollAnimationDuration = _param.scrollAnimationDuration, scrollAnimationDuration = _param_scrollAnimationDuration === void 0 ? SCROLL_ONE_FRAME_TIME : _param_scrollAnimationDuration, getRef = _param.getRef, className = _param.className, _param_scrollOnAnyWheel = _param.scrollOnAnyWheel, scrollOnAnyWheel = _param_scrollOnAnyWheel === void 0 ? false : _param_scrollOnAnyWheel, restProps = _object_without_properties._(_param, [
         "children",
         "getScrollToLeft",
         "getScrollToRight",
@@ -86,8 +86,8 @@ var HorizontalScroll = function(_param) {
         "className",
         "scrollOnAnyWheel"
     ]);
-    var _React_useState = _slicedToArray(_react.useState(false), 2), canScrollLeft = _React_useState[0], setCanScrollLeft = _React_useState[1];
-    var _React_useState1 = _slicedToArray(_react.useState(false), 2), canScrollRight = _React_useState1[0], setCanScrollRight = _React_useState1[1];
+    var _React_useState = _sliced_to_array._(_react.useState(false), 2), canScrollLeft = _React_useState[0], setCanScrollLeft = _React_useState[1];
+    var _React_useState1 = _sliced_to_array._(_react.useState(false), 2), canScrollRight = _React_useState1[0], setCanScrollRight = _React_useState1[1];
     var isCustomScrollingRef = _react.useRef(false);
     var scrollerRef = (0, _useExternRef.useExternRef)(getRef);
     var animationQueue = _react.useRef([]);
@@ -188,24 +188,24 @@ var HorizontalScroll = function(_param) {
         scrollerRef,
         scrollOnAnyWheel
     ]);
-    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiHorizontalScroll", "vkuiInternalHorizontalScroll", showArrows === "always" && "vkuiInternalHorizontalScroll--withConstArrows", className)
+    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
+        className: (0, _vkjs.classNames)("vkuiHorizontalScroll", "vkuiInternalHorizontalScroll", 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, {
+    }, children)), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ _react.createElement(_ScrollArrow.ScrollArrow, {
         size: arrowSize,
         offsetY: arrowOffsetY,
         direction: "left",
-        className: "vkuiHorizontalScroll__arrowLeft",
+        className: (0, _vkjs.classNames)("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowLeft"),
         onClick: scrollToLeft
-    }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ _react.createElement(_horizontalScrollArrow.HorizontalScrollArrow, {
+    }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ _react.createElement(_ScrollArrow.ScrollArrow, {
         size: arrowSize,
         offsetY: arrowOffsetY,
         direction: "right",
-        className: "vkuiHorizontalScroll__arrowRight",
+        className: (0, _vkjs.classNames)("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowRight"),
         onClick: scrollToRight
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { HorizontalScrollArrow } from './HorizontalScrollArrow';\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  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\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  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  scrollOnAnyWheel = false,\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  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(() => {\n    if (!scrollerRef.current || !scrollOnAnyWheel) {\n      return noop;\n    }\n\n    wheelEvent.add(scrollerRef.current);\n\n    return wheelEvent.remove;\n  }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && 'vkuiInternalHorizontalScroll--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          offsetY={arrowOffsetY}\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          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={styles['HorizontalScroll__arrowRight']}\n          onClick={scrollToRight}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["HorizontalScroll","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","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","className","scrollOnAnyWheel","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","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","noop","remove","div","classNames","ref","undefined","HorizontalScrollArrow","size","offsetY","direction","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\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  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\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  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  scrollOnAnyWheel = false,\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  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(() => {\n    if (!scrollerRef.current || !scrollOnAnyWheel) {\n      return noop;\n    }\n\n    wheelEvent.add(scrollerRef.current);\n\n    return wheelEvent.remove;\n  }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\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        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowLeft'],\n          )}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowRight'],\n          )}\n          onClick={scrollToRight}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["HorizontalScroll","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","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","className","scrollOnAnyWheel","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","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","noop","remove","div","classNames","ref","undefined","ScrollArrow","size","offsetY","direction","onClick"],"mappings":";;;;+BAqIaA;;;eAAAA;;;;;;;;+DArIU;oBACU;uCACO;gCACP;4BACJ;kBACC;2BAEF;AA6C5B;;CAEC,GACD,SAASC;IACP,OAAOC,eAAeA,YAAYD,MAAMC,YAAYD,QAAQE,KAAKF;AACnE;AAEA;;;CAGC,GACD,IAAMG,2BAA2B,SAACC;WAAoBC,KAAKC,KAAKF,GAAGG;;AAEnE;;;;CAIC,GACD,IAAMC,wBAAwB;AAE9B,SAASC,SAAS,KASF;QARdC,gBADgB,MAChBA,eACAC,oBAFgB,MAEhBA,mBACAC,iBAHgB,MAGhBA,gBACAC,wBAJgB,MAIhBA,uBACAC,cALgB,MAKhBA,aACAC,gBANgB,MAMhBA,eACAC,qBAPgB,MAOhBA,qDAPgB,MAQhBC,yBAAAA,sEAA0BT;IAE1B,IAAI,CAACE,iBAAiB,CAACC,mBAAmB;QACxC;IACF;IAEA;;GAEC,GACD,IAAMO,UAAUF,qBAAqBN,cAAcS;IAEnD,IAAIC,YAAYjB,yBAAyBO;IACzC,IAAIW,UAAUV,kBAAkBS;IAEhCL;IAEA,IAAIM,WAAWH,SAAS;QACtBL;QACAQ,UAAUH;IACZ;IAEA,IAAMI,YAAYtB;IAEjB,CAAA,SAASuB;QACR,IAAI,CAACb,eAAe;YAClBI;YACA;QACF;QAEA,IAAMU,OAAOxB;QACb,IAAMyB,UAAUpB,KAAKqB,IAAI,AAACF,CAAAA,OAAOF,SAAQ,IAAKL,yBAAyB;QAEvE,IAAMU,QAAQC,IAAAA,mBAAcH;QAE5B,IAAMI,cAAcT,YAAY,AAACC,CAAAA,UAAUD,SAAQ,IAAKO;QACxDjB,cAAcH,aAAaF,KAAKC,KAAKuB;QAErC,IAAI1B,yBAAyBO,mBAAmBL,KAAKyB,IAAI,GAAGT,YAAYI,YAAY,GAAG;YACrFM,sBAAsBR;YACtB;QACF;QAEAT;QACAF,eAAeoB;QACf,IAAIpB,eAAeqB,SAAS,GAAG;YAC7BrB,cAAc,CAAC,EAAE;QACnB;IACF,CAAA;AACF;AAKO,IAAMb,mBAAmB;QAC9BmC,kBAAAA,UACAC,yBAAAA,iBACAC,0BAAAA,6CACAC,YAAAA,4CAAa,oDACbC,WAAAA,0CAAY,wBACZC,sBAAAA,sDACAtB,yBAAAA,sEAA0BT,wDAC1BgC,gBAAAA,QACAC,mBAAAA,4CACAC,kBAAAA,wDAAmB,iCAChBC;QAVHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAtB;QACAuB;QACAC;QACAC;;IAGA,IAA0CE,qCAAAA,OAAMC,SAAS,YAAlDC,gBAAmCF,oBAApBG,mBAAoBH;IAC1C,IAA4CA,sCAAAA,OAAMC,SAAS,YAApDG,iBAAqCJ,qBAArBK,oBAAqBL;IAE5C,IAAMM,uBAAuBN,OAAMO,OAAO;IAE1C,IAAMC,cAAcC,IAAAA,4BAAab;IAEjC,IAAM5B,iBAAiBgC,OAAMO,OAAuB,EAAE;IAEtD,IAAMG,aAAaC,IAAAA;IAEnB,IAAMC,WAAWZ,OAAMa,YACrB,SAAC9C;QACC,IAAMD,gBAAgB0C,YAAYM;QAElC9C,eAAe8C,QAAQC,KAAK;gBAQJjD;YAPtBD,OAAAA,SAAS;gBACPC,eAAAA;gBACAC,mBAAAA;gBACAC,gBAAgBA,eAAe8C;gBAC/B7C,uBAAuB;2BAAMoC,kBAAkB;;gBAC/CnC,aAAa;2BAAOoC,qBAAqBQ,UAAU;;gBACnD3C,eAAe;2BAAOmC,qBAAqBQ,UAAU;;gBACrD1C,oBAAoBN,CAAAA,0BAAAA,2BAAAA,KAAAA,IAAAA,CAAAA,mCAAAA,cAAekD,+BAAflD,8CAAAA,KAAAA,IAAAA,iCAAkCmD,WAAH,KAAkB;gBACrE5C,yBAAAA;YACF;;QAEF,IAAIL,eAAe8C,QAAQzB,WAAW,GAAG;YACvCrB,eAAe8C,OAAO,CAAC,EAAE;QAC3B;IACF,GACA;QAACzC;QAAyBmC;KAAY;IAGxC,IAAMU,eAAelB,OAAMa,YAAY;QACrC,IAAM9C,oBACJwB,4BAAAA,6BAAAA,kBAAoB,SAAC4B;mBAAcA,IAAIX,YAAYM,QAASvC;;QAC9DqC,SAAS7C;IACX,GAAG;QAACwB;QAAiBqB;QAAUJ;KAAY;IAE3C,IAAMY,gBAAgBpB,OAAMa,YAAY;QACtC,IAAM9C,oBACJyB,6BAAAA,8BAAAA,mBAAqB,SAAC2B;mBAAcA,IAAIX,YAAYM,QAASvC;;QAC/DqC,SAAS7C;IACX,GAAG;QAACyB;QAAkBoB;QAAUJ;KAAY;IAE5C,IAAMa,WAAWrB,OAAMa,YAAY;QACjC,IAAIpB,cAAciB,cAAcF,YAAYM,WAAW,CAACR,qBAAqBQ,SAAS;YACpF,IAAMhD,gBAAgB0C,YAAYM;YAElCX,iBAAiBrC,cAAcH,aAAa;YAC5C0C,kBACE9C,yBAAyBO,iBAAiBA,cAAcS,cACtDT,cAAcmD;QAEpB;IACF,GAAG;QAACP;QAAYF;QAAaf;KAAW;IAExC,IAAM6B,cAAcC,IAAAA,oCAAiB,UAAUF;IAC/CrB,OAAMwB,UAAU;QACd,IAAIhB,YAAYM,SAAS;YACvBQ,YAAYG,IAAIjB,YAAYM;QAC9B;IACF,GAAG;QAACQ;QAAad;KAAY;IAC7BR,OAAMwB,UAAUH,UAAU;QAACb;QAAalB;QAAU+B;KAAS;IAE3D;;GAEC,GACD,IAAMK,UAAU1B,OAAMa,YACpB,SAACc;QACCnB,YAAYM,QAASc,SAAS;YAAEC,MAAMF,EAAEG,SAASH,EAAEI;YAAQC,UAAU;QAAO;QAC5EL,EAAEM;IACJ,GACA;QAACzB;KAAY;IAGf,IAAM0B,aAAaX,IAAAA,oCAAiB,SAASG;IAC7C1B,OAAMwB,UAAU;QACd,IAAI,CAAChB,YAAYM,WAAW,CAAChB,kBAAkB;YAC7C,OAAOqC;QACT;QAEAD,WAAWT,IAAIjB,YAAYM;QAE3B,OAAOoB,WAAWE;IACpB,GAAG;QAACF;QAAY1B;QAAaV;KAAiB;IAE9C,qBACE,qBAACuC,mDACKtC;QACJF,WAAWyC,IAAAA,0CAET,gCACA7C,eAAe,qDACfI;sBAGF,qBAACwC;QAAIxC,SAAS;QAAkC0C,KAAK/B;qBACnD,qBAAC6B;QAAIxC,SAAS;OAA2CP,YAE1DG,cAAeiB,CAAAA,cAAcA,eAAe8B,SAAQ,KAAMtC,+BACzD,qBAACuC;QACCC,MAAMhD;QACNiD,SAAShD;QACTiD,WAAU;QACV/C,WAAWyC,IAAAA;QAIXO,SAAS3B;QAGZzB,cAAeiB,CAAAA,cAAcA,eAAe8B,SAAQ,KAAMpC,gCACzD,qBAACqC;QACCC,MAAMhD;QACNiD,SAAShD;QACTiD,WAAU;QACV/C,WAAWyC,IAAAA;QAIXO,SAASzB;;AAKnB"}

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

@@ -26,4 +26,4 @@ export interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {
      */
     children?: React.ReactElement;
 }
-export declare const HoverPopper: ({ getRef, content, children, onShownChange, shown: _shown, showDelay, hideDelay, ...restProps }: HoverPopperProps) => JSX.Element;
+export declare const HoverPopper: ({ getRef, content, children, onShownChange, shown: _shown, showDelay, hideDelay, ...restProps }: HoverPopperProps) => React.JSX.Element;

package/dist/cjs/components/HoverPopper/HoverPopper.js

@@ -8,19 +8,19 @@ Object.defineProperty(exports, "HoverPopper", {
         return HoverPopper;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _useEventListener = require("../../hooks/useEventListener");
 var _usePatchChildrenRef = require("../../hooks/usePatchChildrenRef");
 var _useTimeout = require("../../hooks/useTimeout");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-var _popper = require("../Popper/Popper");
+var _Popper = require("../Popper/Popper");
 var HoverPopper = function(_param) {
-    var getRef = _param.getRef, content = _param.content, children = _param.children, onShownChange = _param.onShownChange, _shown = _param.shown, _param_showDelay = _param.showDelay, showDelay = _param_showDelay === void 0 ? 150 : _param_showDelay, _param_hideDelay = _param.hideDelay, hideDelay = _param_hideDelay === void 0 ? 150 : _param_hideDelay, restProps = _objectWithoutProperties(_param, [
+    var getRef = _param.getRef, content = _param.content, children = _param.children, onShownChange = _param.onShownChange, _shown = _param.shown, _param_showDelay = _param.showDelay, showDelay = _param_showDelay === void 0 ? 150 : _param_showDelay, _param_hideDelay = _param.hideDelay, hideDelay = _param_hideDelay === void 0 ? 150 : _param_hideDelay, restProps = _object_without_properties._(_param, [
         "getRef",
         "content",
         "children",
@@ -29,7 +29,7 @@ var HoverPopper = function(_param) {
         "showDelay",
         "hideDelay"
     ]);
-    var _React_useState = _slicedToArray(_react.useState(_shown || false), 2), computedShown = _React_useState[0], setComputedShown = _React_useState[1];
+    var _React_useState = _sliced_to_array._(_react.useState(_shown || false), 2), computedShown = _React_useState[0], setComputedShown = _React_useState[1];
     var shown = typeof _shown === "boolean" ? _shown : computedShown;
     var setShown = function(value) {
         if (typeof _shown !== "boolean") {
@@ -43,7 +43,7 @@ var HoverPopper = function(_param) {
     var hideTimeout = (0, _useTimeout.useTimeout)(function() {
         setShown(false);
     }, hideDelay);
-    var _usePatchChildrenRef1 = _slicedToArray((0, _usePatchChildrenRef.usePatchChildrenRef)(children), 2), childRef = _usePatchChildrenRef1[0], child = _usePatchChildrenRef1[1];
+    var _usePatchChildrenRef1 = _sliced_to_array._((0, _usePatchChildrenRef.usePatchChildrenRef)(children), 2), childRef = _usePatchChildrenRef1[0], child = _usePatchChildrenRef1[1];
     var onTargetEnter = function() {
         hideTimeout.clear();
         showTimeout.set();
@@ -60,7 +60,7 @@ var HoverPopper = function(_param) {
             targetLeaveListener.add(childRef.current);
         }
     }, []);
-    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, child, shown && /*#__PURE__*/ _react.createElement(_popper.Popper, _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, child, shown && /*#__PURE__*/ _react.createElement(_Popper.Popper, _object_spread_props._(_object_spread._({}, restProps), {
         onMouseOver: hideTimeout.clear,
         onMouseOut: onTargetLeave,
         getRef: getRef,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["HoverPopper","getRef","content","children","onShownChange","shown","_shown","showDelay","hideDelay","restProps","React","useState","computedShown","setComputedShown","setShown","value","showTimeout","useTimeout","hideTimeout","usePatchChildrenRef","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","useEventListener","targetLeaveListener","useIsomorphicLayoutEffect","current","add","Fragment","Popper","onMouseOver","onMouseOut","targetRef"],"mappings":";;;;+BAkCaA;;;eAAAA;;;;;;;;2DAlCU;gCACU;mCACG;0BACT;yCACe;sBACA;AA6BnC,IAAMA,cAAc,iBASH;QARtBC,gBAAAA,QACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,AAAOC,gBAAPD,iCACAE,WAAAA,0CAAY,kDACZC,WAAAA,0CAAY,wBACTC;QAPHR;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,IAA0CE,iCAAAA,OAAMC,QAAQ,CAACL,UAAU,KAAK,OAAjEM,gBAAmCF,oBAApBG,mBAAoBH;IAE1C,IAAML,QAAQ,OAAOC,WAAW,YAAYA,SAASM,aAAa;IAElE,IAAME,WAAW,SAACC,OAAmB;QACnC,IAAI,OAAOT,WAAW,WAAW;YAC/BO,iBAAiBE;QACnB,CAAC;QACD,OAAOX,kBAAkB,cAAcA,cAAcW;IACvD;IAEA,IAAMC,cAAcC,IAAAA,sBAAU,EAAC,WAAM;QACnCH,SAAS,IAAI;IACf,GAAGP;IAEH,IAAMW,cAAcD,IAAAA,sBAAU,EAAC,WAAM;QACnCH,SAAS,KAAK;IAChB,GAAGN;IAEH,IAA0BW,uCAAAA,IAAAA,wCAAmB,EAAChB,eAAvCiB,WAAmBD,0BAATE,QAASF;IAE1B,IAAMG,gBAAgB,WAAM;QAC1BJ,YAAYK,KAAK;QACjBP,YAAYQ,GAAG;IACjB;IAEA,IAAMC,gBAAgB,WAAM;QAC1BT,YAAYO,KAAK;QACjBL,YAAYM,GAAG;IACjB;IAEA,IAAME,sBAAsBC,IAAAA,kCAAgB,EAAC,gBAAgBL;IAC7D,IAAMM,sBAAsBD,IAAAA,kCAAgB,EAAC,gBAAgBF;IAE7DI,IAAAA,oDAAyB,EAAC,WAAM;QAC9B,IAAIT,SAASU,OAAO,EAAE;YACpBJ,oBAAoBK,GAAG,CAACX,SAASU,OAAO;YACxCF,oBAAoBG,GAAG,CAACX,SAASU,OAAO;QAC1C,CAAC;IACH,GAAG,EAAE;IAEL,qBACE,qBAACpB,OAAMsB,QAAQ,QACZX,OACAhB,uBACC,qBAAC4B,cAAM,uCACDxB;QACJyB,aAAahB,YAAYK,KAAK;QAC9BY,YAAYV;QACZxB,QAAQA;QACRmC,WAAWhB;QAEVlB;AAKX"}
+{"version":3,"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["HoverPopper","getRef","content","children","onShownChange","shown","_shown","showDelay","hideDelay","restProps","React","useState","computedShown","setComputedShown","setShown","value","showTimeout","useTimeout","hideTimeout","usePatchChildrenRef","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","useEventListener","targetLeaveListener","useIsomorphicLayoutEffect","current","add","Fragment","Popper","onMouseOver","onMouseOut","targetRef"],"mappings":";;;;+BAkCaA;;;eAAAA;;;;;;;;+DAlCU;gCACU;mCACG;0BACT;yCACe;sBACA;AA6BnC,IAAMA,cAAc;QACzBC,gBAAAA,QACAC,iBAAAA,SACAC,kBAAAA,UACAC,uBAAAA,eACAC,AAAOC,gBAAPD,iCACAE,WAAAA,0CAAY,kDACZC,WAAAA,0CAAY,wBACTC;QAPHR;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,IAA0CE,qCAAAA,OAAMC,SAASL,UAAU,YAA5DM,gBAAmCF,oBAApBG,mBAAoBH;IAE1C,IAAML,QAAQ,OAAOC,WAAW,YAAYA,SAASM;IAErD,IAAME,WAAW,SAACC;QAChB,IAAI,OAAOT,WAAW,WAAW;YAC/BO,iBAAiBE;QACnB;QACA,OAAOX,kBAAkB,cAAcA,cAAcW;IACvD;IAEA,IAAMC,cAAcC,IAAAA,wBAAW;QAC7BH,SAAS;IACX,GAAGP;IAEH,IAAMW,cAAcD,IAAAA,wBAAW;QAC7BH,SAAS;IACX,GAAGN;IAEH,IAA0BW,2CAAAA,IAAAA,0CAAoBhB,eAAvCiB,WAAmBD,0BAATE,QAASF;IAE1B,IAAMG,gBAAgB;QACpBJ,YAAYK;QACZP,YAAYQ;IACd;IAEA,IAAMC,gBAAgB;QACpBT,YAAYO;QACZL,YAAYM;IACd;IAEA,IAAME,sBAAsBC,IAAAA,oCAAiB,gBAAgBL;IAC7D,IAAMM,sBAAsBD,IAAAA,oCAAiB,gBAAgBF;IAE7DI,IAAAA,sDAA0B;QACxB,IAAIT,SAASU,SAAS;YACpBJ,oBAAoBK,IAAIX,SAASU;YACjCF,oBAAoBG,IAAIX,SAASU;QACnC;IACF,GAAG,EAAE;IAEL,qBACE,qBAACpB,OAAMsB,gBACJX,OACAhB,uBACC,qBAAC4B,4DACKxB;QACJyB,aAAahB,YAAYK;QACzBY,YAAYV;QACZxB,QAAQA;QACRmC,WAAWhB;QAEVlB;AAKX"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { HasChildren } from '../../types';
 import { TappableProps } from '../Tappable/Tappable';
 export interface IconButtonProps extends TappableProps, HasChildren {
@@ -6,4 +6,4 @@ export interface IconButtonProps extends TappableProps, HasChildren {
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton
  */
-export declare const IconButton: ({ children, className, ...restProps }: IconButtonProps) => JSX.Element;
+export declare const IconButton: ({ children, className, ...restProps }: IconButtonProps) => React.JSX.Element;

package/dist/cjs/components/IconButton/IconButton.js

@@ -8,25 +8,25 @@ Object.defineProperty(exports, "IconButton", {
         return IconButton;
     }
 });
-var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _usePlatform = require("../../hooks/usePlatform");
 var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
 var _warnOnce = require("../../lib/warnOnce");
-var _tappable = require("../Tappable/Tappable");
-var sizeYClassNames = _defineProperty({
+var _Tappable = require("../Tappable/Tappable");
+var sizeYClassNames = _define_property._({
     none: "vkuiIconButton--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiIconButton--sizeY-compact");
 var warn = (0, _warnOnce.warnOnce)("IconButton");
 var IconButton = function(_param) {
-    var children = _param.children, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var children = _param.children, className = _param.className, restProps = _object_without_properties._(_param, [
         "children",
         "className"
     ]);
@@ -38,7 +38,7 @@ var IconButton = function(_param) {
             warn(_warnOnce.COMMON_WARNINGS.a11y[restProps.href ? "link-name" : "button-name"], "error");
         }
     }
-    return /*#__PURE__*/ _react.createElement(_tappable.Tappable, _objectSpreadProps(_objectSpread({
+    return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread_props._(_object_spread._({
         activeEffectDelay: 200,
         activeMode: "background",
         Component: restProps.href ? "a" : "button"