@vkontakte/vkui 5.3.2 → 5.4.1

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

@@ -18,8 +18,8 @@ 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 _text = require("../Typography/Text/Text");
 var _title = require("../Typography/Title/Title");
 var HeaderContent = function(_param) {
     var mode = _param.mode, size = _param.size, restProps = _objectWithoutProperties(_param, [
@@ -38,16 +38,16 @@ var HeaderContent = function(_param) {
                     weight: "1",
                     level: "3"
                 }, restProps));
+            case "secondary":
+                return /*#__PURE__*/ _react.createElement(_footnote.Footnote, _objectSpread({
+                    weight: "1",
+                    caps: true
+                }, restProps));
             case "tertiary":
                 return /*#__PURE__*/ _react.createElement(_title.Title, _objectSpread({
                     weight: "1",
                     level: "3"
                 }, restProps));
-            case "secondary":
-                return /*#__PURE__*/ _react.createElement(_footnote.Footnote, _objectSpread({
-                    weight: "2",
-                    caps: true
-                }, restProps));
         }
     }
     if (platform === _platform.Platform.VKCOM) {
@@ -57,9 +57,14 @@ var HeaderContent = function(_param) {
                     level: "2",
                     weight: "1"
                 }, restProps)) : /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpread({
-                    weight: "3"
+                    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);
         }
@@ -72,15 +77,15 @@ var HeaderContent = function(_param) {
             }, restProps)) : /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpread({
                 weight: "2"
             }, restProps));
-        case "tertiary":
-            return /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpread({
-                weight: "2"
-            }, restProps));
         case "secondary":
             return /*#__PURE__*/ _react.createElement(_footnote.Footnote, _objectSpread({
                 weight: "1",
                 caps: true
             }, restProps));
+        case "tertiary":
+            return /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpread({
+                weight: "2"
+            }, restProps));
     }
     return null;
 };
@@ -97,15 +102,14 @@ var Header = function(_param) {
         "className"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    var AsideTypography = platform === _platform.Platform.VKCOM ? _subhead.Subhead : _text.Text;
-    var SubtitleTypography = mode === "secondary" ? _subhead.Subhead : _footnote.Footnote;
+    var AsideTypography = platform === _platform.Platform.VKCOM ? _subhead.Subhead : _paragraph.Paragraph;
     return /*#__PURE__*/ _react.createElement("header", _objectSpreadProps(_objectSpread({}, 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", {
             primary: "vkuiHeader--mode-primary",
             secondary: "vkuiHeader--mode-secondary",
             tertiary: "vkuiHeader--mode-tertiary"
-        }[mode], (0, _vkjs.isPrimitiveReactNode)(indicator) && "vkuiHeader--pi", className)
+        }[mode], (0, _vkjs.isPrimitiveReactNode)(indicator) && "vkuiHeader--pi", (0, _vkjs.hasReactNode)(subtitle) && "vkuiHeader--with-subtitle", className)
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiHeader__main"
     }, /*#__PURE__*/ _react.createElement(HeaderContent, {
@@ -117,8 +121,8 @@ var Header = function(_param) {
         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, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/ _react.createElement(SubtitleTypography, {
+        weight: "2"
+    }, indicator)), (0, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/ _react.createElement(_subhead.Subhead, {
         className: "vkuiHeader__subtitle",
         Component: "span"
     }, subtitle)), (0, _vkjs.hasReactNode)(aside) && /*#__PURE__*/ _react.createElement(AsideTypography, {

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 { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\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 '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 isLarge ? (\n          <Title level=\"2\" weight=\"1\" {...restProps} />\n        ) : (\n          <Headline weight=\"3\" {...restProps} />\n        );\n      case 'secondary':\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 '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  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 : 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        {\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        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\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"],"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","Text","SubtitleTypography","header","ref","classNames","ANDROID","primary","secondary","tertiary","isPrimitiveReactNode","div","Component","span","hasReactNode","undefined"],"mappings":";;;;+BAkFaA;;;eAAAA;;;;;;;2DAlFU;oBACwC;2BACnC;wBACH;wBAEA;wBACA;uBACD;oBACH;qBACC;AAqBtB,IAAMC,gBAAgB,iBAAsD;QAAnDC,cAAAA,MAAMC,cAAAA,MAASC;QAAfF;QAAMC;;IAC7B,IAAME,UAAUF,SAAS;IAEzB,IAAMG,WAAWC,IAAAA,wBAAW;IAC5B,IAAID,aAAaE,kBAAQ,CAACC,GAAG,EAAE;QAC7B,OAAQP;YACN,KAAK;gBACH,OAAOG,wBACL,qBAACK,YAAK;oBAACC,OAAM;oBAAIC,QAAO;mBAAQR,4BAEhC,qBAACM,YAAK;oBAACE,QAAO;oBAAID,OAAM;mBAAQP,WACjC;YACH,KAAK;gBACH,qBAAO,qBAACM,YAAK;oBAACE,QAAO;oBAAID,OAAM;mBAAQP;YACzC,KAAK;gBACH,qBAAO,qBAACS,kBAAQ;oBAACD,QAAO;oBAAIE,MAAAA,IAAI;mBAAKV;QACzC;IACF,CAAC;IAED,IAAIE,aAAaE,kBAAQ,CAACO,KAAK,EAAE;QAC/B,OAAQb;YACN,KAAK;gBACH,OAAOG,wBACL,qBAACK,YAAK;oBAACC,OAAM;oBAAIC,QAAO;mBAAQR,4BAEhC,qBAACY,kBAAQ;oBAACJ,QAAO;mBAAQR,WAC1B;YACH,KAAK;YACL,KAAK;gBACH,qBAAO,qBAACS,kBAAQ,EAAKT;QACzB;IACF,CAAC;IAED,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,qBAACK,YAAK;gBAACC,OAAM;gBAAIC,QAAO;eAAQR,4BAEhC,qBAACY,kBAAQ;gBAACJ,QAAO;eAAQR,WAC1B;QACH,KAAK;YACH,qBAAO,qBAACY,kBAAQ;gBAACJ,QAAO;eAAQR;QAClC,KAAK;YACH,qBAAO,qBAACS,kBAAQ;gBAACD,QAAO;gBAAIE,MAAAA,IAAI;eAAKV;IACzC;IAEA,OAAO,IAAI;AACb;AAKO,IAAMJ,SAAS,iBAWH;6BAVjBE,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,yBACPc,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,mBAAAA,WACGnB;QATHF;QACAC;QACAc;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMjB,WAAWC,IAAAA,wBAAW;IAE5B,IAAMiB,kBAAkBlB,aAAaE,kBAAQ,CAACO,KAAK,GAAGU,gBAAO,GAAGC,UAAI;IACpE,IAAMC,qBAAqBzB,SAAS,cAAcuB,gBAAO,GAAGZ,kBAAQ;IAEpE,qBACE,qBAACe,+CACKxB;QACJyB,KAAKR;QACLE,WAAWO,IAAAA,gBAAU,gBAEnBxB,aAAaE,kBAAQ,CAACO,KAAK,yBAC3BT,aAAaE,kBAAQ,CAACuB,OAAO,2BAC7BzB,aAAaE,kBAAQ,CAACC,GAAG,uBACzB;YACEuB,OAAO;YACPC,SAAS;YACTC,QAAQ;QACV,CAAC,CAAChC,KAAK,EACPiC,IAAAA,0BAAoB,EAAChB,gCACrBI;sBAGF,qBAACa;QAAIb,SAAS;qBACZ,qBAACtB;QACCsB,SAAS;QACTc,WAAU;QACVnC,MAAMA;QACNC,MAAMA;qBAEN,qBAACmC;QACCf,WAAWO,IAAAA,gBAAU,4BAEnBR;OAGDL,WAEFsB,IAAAA,kBAAY,EAACpB,4BACZ,qBAACN,kBAAQ;QACPU,SAAS;QACTX,QAAQV,SAAS,aAAaA,SAAS,cAAc,MAAMsC,SAAS;OAEnErB,aAKNoB,IAAAA,kBAAY,EAACrB,2BACZ,qBAACS;QAAmBJ,SAAS;QAA8Bc,WAAU;OAClEnB,YAKNqB,IAAAA,kBAAY,EAACnB,wBACZ,qBAACI;QAAgBD,SAAS;QAA2Bc,WAAU;OAC5DjB;AAKX"}
+{"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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"}

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

@@ -11,6 +11,10 @@ export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivEleme
      */
     getScrollToRight?: ScrollPositionHandler;
     arrowSize?: 'm' | 'l';
+    /**
+     * Смещает иконки кнопок навигации по вертикали.
+     */
+    arrowOffsetY?: number | string;
     showArrows?: boolean | 'always';
     scrollAnimationDuration?: number;
     /**
@@ -22,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, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => JSX.Element;
+export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => JSX.Element;

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

@@ -74,12 +74,13 @@ 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, _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 = _objectWithoutProperties(_param, [
         "children",
         "getScrollToLeft",
         "getScrollToRight",
         "showArrows",
         "arrowSize",
+        "arrowOffsetY",
         "scrollAnimationDuration",
         "getRef",
         "className",
@@ -196,11 +197,13 @@ var HorizontalScroll = function(_param) {
         className: "vkuiHorizontalScroll__in-wrapper"
     }, children)), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ _react.createElement(_horizontalScrollArrow.HorizontalScrollArrow, {
         size: arrowSize,
+        offsetY: arrowOffsetY,
         direction: "left",
         className: "vkuiHorizontalScroll__arrowLeft",
         onClick: scrollToLeft
     }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ _react.createElement(_horizontalScrollArrow.HorizontalScrollArrow, {
         size: arrowSize,
+        offsetY: arrowOffsetY,
         direction: "right",
         className: "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  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  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          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"],"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","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","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 { 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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"}

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

@@ -2,7 +2,8 @@ import * as React from 'react';
 export interface HorizontalScrollArrowProps {
     direction: 'left' | 'right';
     size?: 'm' | 'l';
+    offsetY?: number | string;
     onClick(event: React.MouseEvent): void;
     className?: string;
 }
-export declare const HorizontalScrollArrow: ({ size, direction, onClick, className, ...restProps }: HorizontalScrollArrowProps) => JSX.Element;
+export declare const HorizontalScrollArrow: ({ size, offsetY, direction, onClick, className, ...restProps }: HorizontalScrollArrowProps) => JSX.Element;

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

@@ -17,8 +17,9 @@ var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _tappable = require("../Tappable/Tappable");
 var HorizontalScrollArrow = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, direction = _param.direction, onClick = _param.onClick, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, offsetY = _param.offsetY, direction = _param.direction, onClick = _param.onClick, className = _param.className, restProps = _objectWithoutProperties(_param, [
         "size",
+        "offsetY",
         "direction",
         "onClick",
         "className"
@@ -42,7 +43,10 @@ var HorizontalScrollArrow = function(_param) {
         }[direction], className),
         onClick: onClick
     }), /*#__PURE__*/ _react.createElement("span", {
-        className: "vkuiHorizontalScrollArrow__icon"
+        className: "vkuiHorizontalScrollArrow__icon",
+        style: offsetY ? {
+            top: offsetY
+        } : undefined
     }, /*#__PURE__*/ _react.createElement(ArrowIcon, null)));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './HorizontalScrollArrow.module.css';\n\nexport interface HorizontalScrollArrowProps {\n  direction: 'left' | 'right';\n  size?: 'm' | 'l';\n  onClick(event: React.MouseEvent): void;\n  className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = 'l',\n  direction,\n  onClick,\n  className,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === 'm') {\n    ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      className={classNames(\n        styles['HorizontalScrollArrow'],\n        {\n          m: styles['HorizontalScrollArrow--size-m'],\n          l: styles['HorizontalScrollArrow--size-l'],\n        }[size],\n        {\n          left: styles['HorizontalScrollArrow--direction-left'],\n          right: styles['HorizontalScrollArrow--direction-right'],\n        }[direction],\n        className,\n      )}\n      onClick={onClick}\n    >\n      <span className={styles['HorizontalScrollArrow__icon']}>\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["HorizontalScrollArrow","size","direction","onClick","className","restProps","ArrowIcon","Icon16ChevronLeft","Icon16Chevron","Icon24ChevronCompactLeft","Icon24Chevron","Tappable","Component","hasHover","hasActive","classNames","m","l","left","right","span"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;2DAlBU;qBAMhB;oBACoB;wBACF;AAUlB,IAAMA,wBAAwB,iBAMH;6BALhCC,MAAAA,gCAAO,mBACPC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE;IAEJ,IAAIL,SAAS,KAAK;QAChBK,YAAYJ,cAAc,SAASK,wBAAiB,GAAGC,oBAAa;IACtE,OAAO;QACLF,YAAYJ,cAAc,SAASO,+BAAwB,GAAGC,oBAAa;IAC7E,CAAC;IAED,qBACE,qBAACC,kBAAQ,uCACHN;QACJO,WAAU;QACVC,UAAU,KAAK;QACfC,WAAW,KAAK;QAChBV,WAAWW,IAAAA,gBAAU,+BAEnB;YACEC,CAAC;YACDC,CAAC;QACH,CAAC,CAAChB,KAAK,EACP;YACEiB,IAAI;YACJC,KAAK;QACP,CAAC,CAACjB,UAAU,EACZE;QAEFD,SAASA;sBAET,qBAACiB;QAAKhB,SAAS;qBACb,qBAACE;AAIT"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './HorizontalScrollArrow.module.css';\n\nexport interface HorizontalScrollArrowProps {\n  direction: 'left' | 'right';\n  size?: 'm' | 'l';\n  offsetY?: number | string;\n  onClick(event: React.MouseEvent): void;\n  className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = 'l',\n  offsetY,\n  direction,\n  onClick,\n  className,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === 'm') {\n    ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      className={classNames(\n        styles['HorizontalScrollArrow'],\n        {\n          m: styles['HorizontalScrollArrow--size-m'],\n          l: styles['HorizontalScrollArrow--size-l'],\n        }[size],\n        {\n          left: styles['HorizontalScrollArrow--direction-left'],\n          right: styles['HorizontalScrollArrow--direction-right'],\n        }[direction],\n        className,\n      )}\n      onClick={onClick}\n    >\n      <span\n        className={styles['HorizontalScrollArrow__icon']}\n        style={offsetY ? { top: offsetY } : undefined}\n      >\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["HorizontalScrollArrow","size","offsetY","direction","onClick","className","restProps","ArrowIcon","Icon16ChevronLeft","Icon16Chevron","Icon24ChevronCompactLeft","Icon24Chevron","Tappable","Component","hasHover","hasActive","classNames","m","l","left","right","span","style","top","undefined"],"mappings":";;;;+BAmBaA;;;eAAAA;;;;;;;2DAnBU;qBAMhB;oBACoB;wBACF;AAWlB,IAAMA,wBAAwB,iBAOH;6BANhCC,MAAAA,gCAAO,mBACPC,iBAAAA,SACAC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IAEJ,IAAIN,SAAS,KAAK;QAChBM,YAAYJ,cAAc,SAASK,wBAAiB,GAAGC,oBAAa;IACtE,OAAO;QACLF,YAAYJ,cAAc,SAASO,+BAAwB,GAAGC,oBAAa;IAC7E,CAAC;IAED,qBACE,qBAACC,kBAAQ,uCACHN;QACJO,WAAU;QACVC,UAAU,KAAK;QACfC,WAAW,KAAK;QAChBV,WAAWW,IAAAA,gBAAU,+BAEnB;YACEC,CAAC;YACDC,CAAC;QACH,CAAC,CAACjB,KAAK,EACP;YACEkB,IAAI;YACJC,KAAK;QACP,CAAC,CAACjB,UAAU,EACZE;QAEFD,SAASA;sBAET,qBAACiB;QACChB,SAAS;QACTiB,OAAOpB,UAAU;YAAEqB,KAAKrB;QAAQ,IAAIsB,SAAS;qBAE7C,qBAACjB;AAIT"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PopperCommonProps } from '../Popper/Popper';
-export interface HoverPopperProps extends PopperCommonProps {
+export interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {
     /**
      * Содержимое тултипа
      */

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 PopperCommonProps {\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;;;;;;;;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"}

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
+/// <reference types="react" />
+import { HasChildren } from '../../types';
 import { TappableProps } from '../Tappable/Tappable';
-export interface IconButtonProps extends TappableProps {
-    children?: React.ReactNode;
+export interface IconButtonProps extends TappableProps, HasChildren {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps {\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(\n        styles['IconButton'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["IconButton","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","process","env","NODE_ENV","isAccessible","COMMON_WARNINGS","a11y","href","Tappable","activeEffectDelay","activeMode","Component","classNames","REGULAR","Platform","IOS"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;;;2DAxBU;oBACI;6BACG;2BACF;0BACH;wBACA;wBACiB;wBACF;AAGxC,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAOnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,aAAa,iBAA4D;QAAzDO,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAxBF;QAAUC;;IACrC,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,eAAeR,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE5E,IAAI,CAACQ,cAAc;YACjBZ,KAAKa,yBAAe,CAACC,IAAI,CAACV,UAAUW,IAAI,GAAG,cAAc,aAAa,CAAC,EAAE;QAC3E,CAAC;IACH,CAAC;IAED,qBACE,qBAACC,kBAAQ;QACPC,mBAAmB;QACnBC,YAAW;QACXC,WAAWf,UAAUW,IAAI,GAAG,MAAM,QAAQ;OACtCX;QACJD,WAAWiB,IAAAA,gBAAU,oBAEnBZ,UAAUV,oBAAQ,CAACuB,OAAO,IAAIzB,eAAe,CAACY,MAAM,EACpDH,aAAaiB,kBAAQ,CAACC,GAAG,2BACzBpB;QAGDD;AAGP"}
+{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasChildren } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps, HasChildren {}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(\n        styles['IconButton'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["IconButton","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","process","env","NODE_ENV","isAccessible","COMMON_WARNINGS","a11y","href","Tappable","activeEffectDelay","activeMode","Component","classNames","REGULAR","Platform","IOS"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;;2DAvBU;oBACI;6BACG;2BACF;0BACH;wBACA;wBACiB;wBAEF;AAGxC,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAKnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,aAAa,iBAA4D;QAAzDO,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAxBF;QAAUC;;IACrC,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,eAAeR,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE5E,IAAI,CAACQ,cAAc;YACjBZ,KAAKa,yBAAe,CAACC,IAAI,CAACV,UAAUW,IAAI,GAAG,cAAc,aAAa,CAAC,EAAE;QAC3E,CAAC;IACH,CAAC;IAED,qBACE,qBAACC,kBAAQ;QACPC,mBAAmB;QACnBC,YAAW;QACXC,WAAWf,UAAUW,IAAI,GAAG,MAAM,QAAQ;OACtCX;QACJD,WAAWiB,IAAAA,gBAAU,oBAEnBZ,UAAUV,oBAAQ,CAACuB,OAAO,IAAIzB,eAAe,CAACY,MAAM,EACpDH,aAAaiB,kBAAQ,CAACC,GAAG,2BACzBpB;QAGDD;AAGP"}

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

@@ -9,9 +9,9 @@ export interface LocaleProviderProps {
 }
 /**
  * Компонент, прокидывающий локаль. Список можно найти в
- * [реестре языковых подмёток IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)
+ * [реестре языковых подметок IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)
  *
- * @version 5.0.0
+ * @since 5.0.0
  * @see https://vkcom.github.io/VKUI/#/LocaleProvider
  */
 export declare function LocaleProvider({ value, children }: LocaleProviderProps): JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface LocaleProviderProps {\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  value: ConfigProviderContextInterface['locale'];\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, прокидывающий локаль. Список можно найти в\n * [реестре языковых подмёток IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)\n *\n * @version 5.0.0\n * @see https://vkcom.github.io/VKUI/#/LocaleProvider\n */\nexport function LocaleProvider({ value, children }: LocaleProviderProps) {\n  return <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>;\n}\n"],"names":["LocaleProvider","value","children","ConfigProviderOverride","locale"],"mappings":";;;;+BAmBgBA;;;eAAAA;;;;0DAnBE;sCAEqB;AAiBhC,SAASA,eAAe,KAAwC,EAAE;QAAxCC,QAAF,MAAEA,OAAOC,WAAT,MAASA;IACtC,qBAAO,6BAACC,8CAAsB;QAACC,QAAQH;OAAQC;AACjD"}
+{"version":3,"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface LocaleProviderProps {\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  value: ConfigProviderContextInterface['locale'];\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, прокидывающий локаль. Список можно найти в\n * [реестре языковых подметок IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)\n *\n * @since 5.0.0\n * @see https://vkcom.github.io/VKUI/#/LocaleProvider\n */\nexport function LocaleProvider({ value, children }: LocaleProviderProps) {\n  return <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>;\n}\n"],"names":["LocaleProvider","value","children","ConfigProviderOverride","locale"],"mappings":";;;;+BAmBgBA;;;eAAAA;;;;0DAnBE;sCAEqB;AAiBhC,SAASA,eAAe,KAAwC,EAAE;QAAxCC,QAAF,MAAEA,OAAOC,WAAT,MAASA;IACtC,qBAAO,6BAACC,8CAAsB;QAACC,QAAQH;OAAQC;AACjD"}

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

@@ -42,4 +42,4 @@ export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, Na
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
  */
-export declare const ModalPage: ({ children, header, size: sizeProp, onOpen, onOpened, onClose, onClosed, settlingHeight, dynamicContentHeight, getModalContentRef, nav, id, hideCloseButton, className, ...restProps }: ModalPageProps) => JSX.Element;
+export declare const ModalPage: ({ children, header, size: sizeProp, onOpen, onOpened, onClose, onClosed, settlingHeight, dynamicContentHeight, getModalContentRef, nav, id: idProp, hideCloseButton, className, ...restProps }: ModalPageProps) => JSX.Element;

package/dist/cjs/components/ModalPage/ModalPage.js

@@ -15,6 +15,7 @@ var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_propert
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
+var _useId = require("../../hooks/useId");
 var _useOrientationChange = require("../../hooks/useOrientationChange");
 var _usePlatform = require("../../hooks/usePlatform");
 var _adaptivity = require("../../lib/adaptivity");
@@ -25,6 +26,7 @@ var _warnOnce = require("../../lib/warnOnce");
 var _modalDismissButton = require("../ModalDismissButton/ModalDismissButton");
 var _modalRootContext = require("../ModalRoot/ModalRootContext");
 var _types = require("../ModalRoot/types");
+var _modalPageContext = require("./ModalPageContext");
 var sizeClassName = {
     s: "vkuiModalPage--size-s",
     m: "vkuiModalPage--size-m",
@@ -32,7 +34,7 @@ var sizeClassName = {
 };
 var warn = (0, _warnOnce.warnOnce)("ModalPage");
 var ModalPage = function(_param) {
-    var children = _param.children, header = _param.header, tmp = _param.size, sizeProp = tmp === void 0 ? "s" : tmp, onOpen = _param.onOpen, onOpened = _param.onOpened, onClose = _param.onClose, onClosed = _param.onClosed, settlingHeight = _param.settlingHeight, dynamicContentHeight = _param.dynamicContentHeight, getModalContentRef = _param.getModalContentRef, nav = _param.nav, id = _param.id, _param_hideCloseButton = _param.hideCloseButton, hideCloseButton = _param_hideCloseButton === void 0 ? false : _param_hideCloseButton, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var children = _param.children, header = _param.header, tmp = _param.size, sizeProp = tmp === void 0 ? "s" : tmp, onOpen = _param.onOpen, onOpened = _param.onOpened, onClose = _param.onClose, onClosed = _param.onClosed, settlingHeight = _param.settlingHeight, dynamicContentHeight = _param.dynamicContentHeight, getModalContentRef = _param.getModalContentRef, nav = _param.nav, idProp = _param.id, _param_hideCloseButton = _param.hideCloseButton, hideCloseButton = _param_hideCloseButton === void 0 ? false : _param_hideCloseButton, className = _param.className, restProps = _objectWithoutProperties(_param, [
         "children",
         "header",
         "size",
@@ -48,6 +50,8 @@ var ModalPage = function(_param) {
         "hideCloseButton",
         "className"
     ]);
+    var generatingId = (0, _useId.useId)();
+    var id = idProp || generatingId;
     var updateModalHeight = _react.useContext(_modalRootContext.ModalRootContext).updateModalHeight;
     var platform = (0, _usePlatform.usePlatform)();
     var orientation = (0, _useOrientationChange.useOrientationChange)();
@@ -64,7 +68,19 @@ var ModalPage = function(_param) {
         nav: nav,
         id: id
     }, warn), _types.ModalType.PAGE).refs;
-    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+    var contextValue = _react.useMemo(function() {
+        return {
+            labelId: "".concat(id, "-label")
+        };
+    }, [
+        id
+    ]);
+    return /*#__PURE__*/ _react.createElement(_modalPageContext.ModalPageContext.Provider, {
+        value: contextValue
+    }, /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": contextValue.labelId,
         id: id,
         className: (0, _vkjs.classNames)("vkuiModalPage", platform === _platform.Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeX === _adaptivity.SizeType.REGULAR && "vkuiInternalModalPage--sizeX-regular", typeof size === "string" && sizeClassName[size], className)
     }), /*#__PURE__*/ _react.createElement("div", {
@@ -87,7 +103,7 @@ var ModalPage = function(_param) {
         className: "vkuiModalPage__content-in"
     }, children))), isCloseButtonShown && /*#__PURE__*/ _react.createElement(_modalDismissButton.ModalDismissButton, {
         onClick: onClose || modalContext.onClose
-    }))));
+    })))));
 };
 
 //# sourceMappingURL=ModalPage.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { multiRef } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport styles from './ModalPage.module.css';\n\nconst sizeClassName = {\n  s: styles['ModalPage--size-s'],\n  m: styles['ModalPage--size-m'],\n  l: styles['ModalPage--size-l'],\n};\n\nexport interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: 's' | 'm' | 'l' | number;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство\n   */\n  dynamicContentHeight?: boolean;\n  getModalContentRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n   */\n  hideCloseButton?: boolean;\n}\n\nconst warn = warnOnce('ModalPage');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  children,\n  header,\n  size: sizeProp = 's',\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  settlingHeight, // 75\n  dynamicContentHeight,\n  getModalContentRef,\n  nav,\n  id,\n  hideCloseButton = false,\n  className,\n  ...restProps\n}: ModalPageProps) => {\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n\n  const platform = usePlatform();\n  const orientation = useOrientationChange();\n  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  React.useEffect(updateModalHeight, [children, orientation, updateModalHeight]);\n\n  const isCloseButtonShown = !hideCloseButton && isDesktop;\n  const size = isDesktop ? sizeProp : 's';\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.PAGE);\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={classNames(\n        styles['ModalPage'],\n        platform === Platform.IOS && styles['ModalPage--ios'],\n        isDesktop && styles['ModalPage--desktop'],\n        sizeX === SizeType.REGULAR && 'vkuiInternalModalPage--sizeX-regular',\n        typeof size === 'string' && sizeClassName[size],\n        className,\n      )}\n    >\n      <div\n        className={styles['ModalPage__in-wrap']}\n        style={{\n          maxWidth: typeof size === 'number' ? size : undefined,\n        }}\n        ref={refs.innerElement}\n      >\n        <div className={styles['ModalPage__in']}>\n          <div className={styles['ModalPage__header']} ref={refs.headerElement}>\n            {header}\n          </div>\n\n          <div className={styles['ModalPage__content-wrap']}>\n            <div\n              className={styles['ModalPage__content']}\n              ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}\n            >\n              <div className={styles['ModalPage__content-in']}>{children}</div>\n            </div>\n          </div>\n          {isCloseButtonShown && <ModalDismissButton onClick={onClose || modalContext.onClose} />}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["ModalPage","sizeClassName","s","m","l","warn","warnOnce","children","header","sizeProp","size","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","hideCloseButton","className","restProps","updateModalHeight","React","useContext","ModalRootContext","platform","usePlatform","orientation","useOrientationChange","useAdaptivityWithJSMediaQueries","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","refs","useModalRegistry","getNavId","ModalType","PAGE","div","classNames","Platform","IOS","SizeType","REGULAR","style","maxWidth","undefined","ref","innerElement","headerElement","multiRef","contentElement","ModalDismissButton","onClick"],"mappings":";;;;+BAkEaA;;;eAAAA;;;;;;;2DAlEU;oBACI;+CACqB;oCACX;2BACT;0BACH;wBACY;wBACZ;qBACA;wBACA;kCACU;gCACgB;qBACzB;AAG1B,IAAMC,gBAAgB;IACpBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AA0CA,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,YAAY,iBAgBH;QAfpBO,kBAAAA,UACAC,gBAAAA,QACMC,aAANC,MAAMD,WAAAA,iBAAW,MAAXA,KACNE,gBAAAA,QACAC,kBAAAA,UACAC,iBAAAA,SACAC,kBAAAA,UACAC,wBAAAA,gBACAC,8BAAAA,sBACAC,4BAAAA,oBACAC,aAAAA,KACAC,YAAAA,oCACAC,iBAAAA,sDAAkB,KAAK,2BACvBC,mBAAAA,WACGC;QAdHf;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,oBAAsBC,OAAMC,UAAU,CAACC,kCAAgB,EAAvDH;IAER,IAAMI,WAAWC,IAAAA,wBAAW;IAC5B,IAAMC,cAAcC,IAAAA,0CAAoB;IACxC,IAA6BC,oCAAAA,IAAAA,gEAA+B,KAApDC,QAAqBD,kCAArBC,OAAOC,YAAcF,kCAAdE;IAEfT,OAAMU,SAAS,CAACX,mBAAmB;QAAChB;QAAUsB;QAAaN;KAAkB;IAE7E,IAAMY,qBAAqB,CAACf,mBAAmBa;IAC/C,IAAMvB,OAAOuB,YAAYxB,WAAW,GAAG;IAEvC,IAAM2B,eAAeZ,OAAMC,UAAU,CAACC,kCAAgB;IACtD,IAAM,AAAEW,OAASC,IAAAA,kCAAgB,EAACC,IAAAA,kBAAQ,EAAC;QAAErB,KAAAA;QAAKC,IAAAA;IAAG,GAAGd,OAAOmC,gBAAS,CAACC,IAAI,EAArEJ;IAER,qBACE,qBAACK,4CACKpB;QACJH,IAAIA;QACJE,WAAWsB,IAAAA,gBAAU,mBAEnBhB,aAAaiB,kBAAQ,CAACC,GAAG,0BACzBZ,uCACAD,UAAUc,oBAAQ,CAACC,OAAO,IAAI,wCAC9B,OAAOrC,SAAS,YAAYT,aAAa,CAACS,KAAK,EAC/CW;sBAGF,qBAACqB;QACCrB,SAAS;QACT2B,OAAO;YACLC,UAAU,OAAOvC,SAAS,WAAWA,OAAOwC,SAAS;QACvD;QACAC,KAAKd,KAAKe,YAAY;qBAEtB,qBAACV;QAAIrB,SAAS;qBACZ,qBAACqB;QAAIrB,SAAS;QAA+B8B,KAAKd,KAAKgB,aAAa;OACjE7C,uBAGH,qBAACkC;QAAIrB,SAAS;qBACZ,qBAACqB;QACCrB,SAAS;QACT8B,KAAKG,IAAAA,eAAQ,EAAiBjB,KAAKkB,cAAc,EAAEtC;qBAEnD,qBAACyB;QAAIrB,SAAS;OAAoCd,aAGrD4B,oCAAsB,qBAACqB,sCAAkB;QAACC,SAAS5C,WAAWuB,aAAavB,OAAO;;AAK7F"}
+{"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useId } from '../../hooks/useId';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { multiRef } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport { ModalPageContext } from './ModalPageContext';\nimport styles from './ModalPage.module.css';\n\nconst sizeClassName = {\n  s: styles['ModalPage--size-s'],\n  m: styles['ModalPage--size-m'],\n  l: styles['ModalPage--size-l'],\n};\n\nexport interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: 's' | 'm' | 'l' | number;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство\n   */\n  dynamicContentHeight?: boolean;\n  getModalContentRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n   */\n  hideCloseButton?: boolean;\n}\n\nconst warn = warnOnce('ModalPage');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  children,\n  header,\n  size: sizeProp = 's',\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  settlingHeight, // 75\n  dynamicContentHeight,\n  getModalContentRef,\n  nav,\n  id: idProp,\n  hideCloseButton = false,\n  className,\n  ...restProps\n}: ModalPageProps) => {\n  const generatingId = useId();\n  const id = idProp || generatingId;\n\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n\n  const platform = usePlatform();\n  const orientation = useOrientationChange();\n  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  React.useEffect(updateModalHeight, [children, orientation, updateModalHeight]);\n\n  const isCloseButtonShown = !hideCloseButton && isDesktop;\n  const size = isDesktop ? sizeProp : 's';\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.PAGE);\n\n  const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);\n\n  return (\n    <ModalPageContext.Provider value={contextValue}>\n      <div\n        {...restProps}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={contextValue.labelId}\n        id={id}\n        className={classNames(\n          styles['ModalPage'],\n          platform === Platform.IOS && styles['ModalPage--ios'],\n          isDesktop && styles['ModalPage--desktop'],\n          sizeX === SizeType.REGULAR && 'vkuiInternalModalPage--sizeX-regular',\n          typeof size === 'string' && sizeClassName[size],\n          className,\n        )}\n      >\n        <div\n          className={styles['ModalPage__in-wrap']}\n          style={{\n            maxWidth: typeof size === 'number' ? size : undefined,\n          }}\n          ref={refs.innerElement}\n        >\n          <div className={styles['ModalPage__in']}>\n            <div className={styles['ModalPage__header']} ref={refs.headerElement}>\n              {header}\n            </div>\n\n            <div className={styles['ModalPage__content-wrap']}>\n              <div\n                className={styles['ModalPage__content']}\n                ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}\n              >\n                <div className={styles['ModalPage__content-in']}>{children}</div>\n              </div>\n            </div>\n            {isCloseButtonShown && <ModalDismissButton onClick={onClose || modalContext.onClose} />}\n          </div>\n        </div>\n      </div>\n    </ModalPageContext.Provider>\n  );\n};\n"],"names":["ModalPage","sizeClassName","s","m","l","warn","warnOnce","children","header","sizeProp","size","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","idProp","hideCloseButton","className","restProps","generatingId","useId","updateModalHeight","React","useContext","ModalRootContext","platform","usePlatform","orientation","useOrientationChange","useAdaptivityWithJSMediaQueries","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","refs","useModalRegistry","getNavId","ModalType","PAGE","contextValue","useMemo","labelId","ModalPageContext","Provider","value","div","role","aria-modal","aria-labelledby","classNames","Platform","IOS","SizeType","REGULAR","style","maxWidth","undefined","ref","innerElement","headerElement","multiRef","contentElement","ModalDismissButton","onClick"],"mappings":";;;;+BAoEaA;;;eAAAA;;;;;;;2DApEU;oBACI;+CACqB;qBAC1B;oCACe;2BACT;0BACH;wBACY;wBACZ;qBACA;wBACA;kCACU;gCACgB;qBACzB;gCACO;AAGjC,IAAMC,gBAAgB;IACpBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AA0CA,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,YAAY,iBAgBH;QAfpBO,kBAAAA,UACAC,gBAAAA,QACMC,aAANC,MAAMD,WAAAA,iBAAW,MAAXA,KACNE,gBAAAA,QACAC,kBAAAA,UACAC,iBAAAA,SACAC,kBAAAA,UACAC,wBAAAA,gBACAC,8BAAAA,sBACAC,4BAAAA,oBACAC,aAAAA,KACAC,AAAIC,gBAAJD,oCACAE,iBAAAA,sDAAkB,KAAK,2BACvBC,mBAAAA,WACGC;QAdHhB;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,IAAME,eAAeC,IAAAA,YAAK;IAC1B,IAAMN,KAAKC,UAAUI;IAErB,IAAM,AAAEE,oBAAsBC,OAAMC,UAAU,CAACC,kCAAgB,EAAvDH;IAER,IAAMI,WAAWC,IAAAA,wBAAW;IAC5B,IAAMC,cAAcC,IAAAA,0CAAoB;IACxC,IAA6BC,oCAAAA,IAAAA,gEAA+B,KAApDC,QAAqBD,kCAArBC,OAAOC,YAAcF,kCAAdE;IAEfT,OAAMU,SAAS,CAACX,mBAAmB;QAACnB;QAAUyB;QAAaN;KAAkB;IAE7E,IAAMY,qBAAqB,CAACjB,mBAAmBe;IAC/C,IAAM1B,OAAO0B,YAAY3B,WAAW,GAAG;IAEvC,IAAM8B,eAAeZ,OAAMC,UAAU,CAACC,kCAAgB;IACtD,IAAM,AAAEW,OAASC,IAAAA,kCAAgB,EAACC,IAAAA,kBAAQ,EAAC;QAAExB,KAAAA;QAAKC,IAAAA;IAAG,GAAGd,OAAOsC,gBAAS,CAACC,IAAI,EAArEJ;IAER,IAAMK,eAAelB,OAAMmB,OAAO,CAAC;eAAO;YAAEC,SAAS,AAAC,GAAK,OAAH5B,IAAG;QAAQ;OAAI;QAACA;KAAG;IAE3E,qBACE,qBAAC6B,kCAAgB,CAACC,QAAQ;QAACC,OAAOL;qBAChC,qBAACM,4CACK5B;QACJ6B,MAAK;QACLC,cAAW;QACXC,mBAAiBT,aAAaE,OAAO;QACrC5B,IAAIA;QACJG,WAAWiC,IAAAA,gBAAU,mBAEnBzB,aAAa0B,kBAAQ,CAACC,GAAG,0BACzBrB,uCACAD,UAAUuB,oBAAQ,CAACC,OAAO,IAAI,wCAC9B,OAAOjD,SAAS,YAAYT,aAAa,CAACS,KAAK,EAC/CY;sBAGF,qBAAC6B;QACC7B,SAAS;QACTsC,OAAO;YACLC,UAAU,OAAOnD,SAAS,WAAWA,OAAOoD,SAAS;QACvD;QACAC,KAAKvB,KAAKwB,YAAY;qBAEtB,qBAACb;QAAI7B,SAAS;qBACZ,qBAAC6B;QAAI7B,SAAS;QAA+ByC,KAAKvB,KAAKyB,aAAa;OACjEzD,uBAGH,qBAAC2C;QAAI7B,SAAS;qBACZ,qBAAC6B;QACC7B,SAAS;QACTyC,KAAKG,IAAAA,eAAQ,EAAiB1B,KAAK2B,cAAc,EAAElD;qBAEnD,qBAACkC;QAAI7B,SAAS;OAAoCf,aAGrD+B,oCAAsB,qBAAC8B,sCAAkB;QAACC,SAASxD,WAAW0B,aAAa1B,OAAO;;AAM/F"}

package/dist/cjs/components/ModalPage/ModalPageContext.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface ModalPageContextInterface {
+    labelId?: string;
+}
+export declare const ModalPageContext: React.Context<ModalPageContextInterface>;

package/dist/cjs/components/{Typography/types.js → ModalPage/ModalPageContext.js}

@@ -2,7 +2,14 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+Object.defineProperty(exports, "ModalPageContext", {
+    enumerable: true,
+    get: function() {
+        return ModalPageContext;
+    }
+});
 var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var ModalPageContext = /*#__PURE__*/ _react.createContext({});
 
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=ModalPageContext.js.map

package/dist/cjs/components/ModalPage/ModalPageContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ModalPage/ModalPageContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface ModalPageContextInterface {\n  labelId?: string;\n}\n\nexport const ModalPageContext = React.createContext<ModalPageContextInterface>({});\n"],"names":["ModalPageContext","React","createContext"],"mappings":";;;;+BAMaA;;;eAAAA;;;;2DANU;AAMhB,IAAMA,iCAAmBC,OAAMC,aAAa,CAA4B,CAAC"}

package/dist/cjs/components/ModalPageHeader/ModalPageHeader.js

@@ -17,6 +17,7 @@ var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
+var _modalPageContext = require("../ModalPage/ModalPageContext");
 var _panelHeader = require("../PanelHeader/PanelHeader");
 var _separator = require("../Separator/Separator");
 var ModalPageHeader = function(_param) {
@@ -29,6 +30,7 @@ var ModalPageHeader = function(_param) {
     var platform = (0, _usePlatform.usePlatform)();
     var hasSeparator = separator && platform === _platform.Platform.VKCOM;
     var isDesktop = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)().isDesktop;
+    var labelId = _react.useContext(_modalPageContext.ModalPageContext).labelId;
     return /*#__PURE__*/ _react.createElement("div", {
         className: (0, _vkjs.classNames)("vkuiModalPageHeader", platform !== _platform.Platform.VKCOM && "vkuiModalPageHeader--withGaps", isDesktop && "vkuiModalPageHeader--desktop"),
         ref: getRef
@@ -38,7 +40,10 @@ var ModalPageHeader = function(_param) {
         fixed: false,
         separator: false,
         transparent: true
-    }), children), hasSeparator && /*#__PURE__*/ _react.createElement(_separator.Separator, {
+    }), /*#__PURE__*/ _react.createElement(_panelHeader.PanelHeader.Content, {
+        Component: "h2",
+        id: labelId
+    }, children)), hasSeparator && /*#__PURE__*/ _react.createElement(_separator.Separator, {
         wide: true
     }));
 };