@vkontakte/vkui 5.9.2 → 5.9.3

package/dist/vkui.js.tmp

@@ -9695,6 +9695,8 @@ var stylesLevel = {
     "3": "vkuiTitle--level-3"
 };
 /**
+ * Используется для заголовков.
+ *
  * @see https://vkcom.github.io/VKUI/#/Title
  */ var Title = function(_param) {
     var className = _param.className, _param_level = _param.level, level = _param_level === void 0 ? "1" : _param_level, Component = _param.Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? true : _param_normalize, restProps = _object_without_properties(_param, [
@@ -9990,6 +9992,8 @@ var sizeYClassNames = _define_property({
     none: "vkuiHeadline--sizeY-none"
 }, _lib_adaptivity__WEBPACK_IMPORTED_MODULE_3__.SizeType.COMPACT, "vkuiHeadline--sizeY-compact");
 /**
+ * Используется для подзаголовков.
+ *
  * @see https://vkcom.github.io/VKUI/#/Headline
  */ var Headline = function(_param) {
     var className = _param.className, _param_weight = _param.weight, weight = _param_weight === void 0 ? "3" : _param_weight, _param_level = _param.level, level = _param_level === void 0 ? "1" : _param_level, _param_Component = _param.Component, Component = _param_Component === void 0 ? "h4" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? true : _param_normalize, restProps = _object_without_properties(_param, [
@@ -10098,6 +10102,8 @@ var sizeYClassNames = _define_property({
     none: "vkuiText--sizeY-none"
 }, _lib_adaptivity__WEBPACK_IMPORTED_MODULE_3__.SizeType.COMPACT, "vkuiText--sizeY-compact");
 /**
+ * Основной наборный текст.
+ *
  * @see https://vkcom.github.io/VKUI/#/Text
  */ var Text = function(_param) {
     var className = _param.className, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? true : _param_normalize, restProps = _object_without_properties(_param, [
@@ -10196,6 +10202,8 @@ function _object_without_properties_loose(source, excluded) {
 
 
 /**
+ * Используется для основного текста.
+ *
  * @see https://vkcom.github.io/VKUI/#/Paragraph
  */ var Paragraph = function(_param) {
     var className = _param.className, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? false : _param_normalize, restProps = _object_without_properties(_param, [
@@ -10300,6 +10308,8 @@ var sizeYClassNames = _define_property({
     none: "vkuiSubhead--sizeY-none"
 }, _lib_adaptivity__WEBPACK_IMPORTED_MODULE_3__.SizeType.COMPACT, "vkuiSubhead--sizeY-compact");
 /**
+ * Используется для подзаголовков 2 уровня.
+ *
  * @see https://vkcom.github.io/VKUI/#/Subhead
  */ var Subhead = function(_param) {
     var className = _param.className, _param_Component = _param.Component, Component = _param_Component === void 0 ? "h5" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? true : _param_normalize, restProps = _object_without_properties(_param, [
@@ -10398,6 +10408,8 @@ function _object_without_properties_loose(source, excluded) {
 
 
 /**
+ * Используется для основных подписей.
+ *
  * @see https://vkcom.github.io/VKUI/#/Footnote
  */ var Footnote = function(_param) /*#__PURE__*/ {
     var className = _param.className, caps = _param.caps, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? true : _param_normalize, restProps = _object_without_properties(_param, [
@@ -10501,6 +10513,8 @@ var stylesLevel = {
     "3": "vkuiCaption--level-3"
 };
 /**
+ * Используется для мелких подписей.
+ *
  * @see https://vkcom.github.io/VKUI/#/Caption
  */ var Caption = function(_param) {
     var className = _param.className, _param_level = _param.level, level = _param_level === void 0 ? "1" : _param_level, caps = _param.caps, _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, _param_normalize = _param.normalize, normalize = _param_normalize === void 0 ? true : _param_normalize, restProps = _object_without_properties(_param, [
@@ -47149,15 +47163,19 @@ function doScroll(param) {
         baseClassName: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiHorizontalScroll", "vkuiInternalHorizontalScroll", showArrows === "always" && "vkuiHorizontalScroll--withConstArrows"),
         onMouseEnter: calculateArrowsVisibility
     }), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ScrollArrow_ScrollArrow__WEBPACK_IMPORTED_MODULE_9__.ScrollArrow, {
+        "data-testid": process.env.NODE_ENV === "test" ? "ScrollArrow" : undefined,
         size: arrowSize,
         offsetY: arrowOffsetY,
         direction: "left",
+        "aria-hidden": true,
         className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowLeft"),
         onClick: scrollToLeft
     }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ScrollArrow_ScrollArrow__WEBPACK_IMPORTED_MODULE_9__.ScrollArrow, {
+        "data-testid": process.env.NODE_ENV === "test" ? "ScrollArrow" : undefined,
         size: arrowSize,
         offsetY: arrowOffsetY,
         direction: "right",
+        "aria-hidden": true,
         className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowRight"),
         onClick: scrollToRight
     }), /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
@@ -49256,7 +49274,7 @@ var warn = (0,_lib_warnOnce__WEBPACK_IMPORTED_MODULE_3__.warnOnce)("ActionSheet"
         style: mode === "menu" ? style : undefined
     }), /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
         className: "vkuiActionSheet__content-wrapper"
-    }, (header || text) && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("header", {
+    }, (header || text) && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
         className: "vkuiActionSheet__header"
     }, header && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Typography_Footnote_Footnote__WEBPACK_IMPORTED_MODULE_13__.Footnote, {
         weight: "2",
@@ -58130,24 +58148,23 @@ var stylesMode = {
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
  */ 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, multiline = _param.multiline, restProps = _object_without_properties(_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, _param_Component = _param.Component, Component = _param_Component === void 0 ? "h2" : _param_Component, children = _param.children, subtitle = _param.subtitle, indicator = _param.indicator, aside = _param.aside, multiline = _param.multiline, restProps = _object_without_properties(_param, [
         "mode",
         "size",
+        "Component",
         "children",
         "subtitle",
         "indicator",
         "aside",
         "multiline"
     ]);
-    return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_RootComponent_RootComponent__WEBPACK_IMPORTED_MODULE_8__.RootComponent, _object_spread_props(_object_spread({
-        Component: "header"
-    }, restProps), {
+    return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_RootComponent_RootComponent__WEBPACK_IMPORTED_MODULE_8__.RootComponent, _object_spread_props(_object_spread({}, restProps), {
         baseClassName: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiHeader", stylesMode[mode], size === "large" && "vkuiHeader--large", (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.isPrimitiveReactNode)(indicator) && "vkuiHeader--pi", (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.hasReactNode)(subtitle) && "vkuiHeader--with-subtitle")
     }), /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
         className: "vkuiHeader__main"
     }, /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(HeaderContent, {
         className: "vkuiHeader__content",
-        Component: "span",
+        Component: Component,
         mode: mode,
         size: size
     }, /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
@@ -64358,20 +64375,21 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
 /* harmony import */ var _vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
-/* harmony import */ var _helpers_math__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(76);
-/* harmony import */ var _hooks_useGlobalEventListener__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(63);
+/* harmony import */ var _helpers_math__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(76);
+/* harmony import */ var _hooks_useGlobalEventListener__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(63);
 /* harmony import */ var _hooks_usePlatform__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(102);
 /* harmony import */ var _hooks_usePrevious__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(163);
-/* harmony import */ var _hooks_useTimeout__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(98);
+/* harmony import */ var _hooks_useTimeout__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(98);
 /* harmony import */ var _lib_dom__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(61);
 /* harmony import */ var _lib_platform__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(70);
-/* harmony import */ var _lib_taptic__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(410);
-/* harmony import */ var _lib_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(65);
+/* harmony import */ var _lib_taptic__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(410);
+/* harmony import */ var _lib_touch__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(100);
+/* harmony import */ var _lib_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(65);
 /* harmony import */ var _AppRoot_ScrollContext__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(75);
-/* harmony import */ var _FixedLayout_FixedLayout__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(114);
-/* harmony import */ var _Touch_Touch__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(111);
-/* harmony import */ var _Touch_TouchContext__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(101);
-/* harmony import */ var _PullToRefreshSpinner__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(411);
+/* harmony import */ var _FixedLayout_FixedLayout__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(114);
+/* harmony import */ var _Touch_Touch__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(111);
+/* harmony import */ var _Touch_TouchContext__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(101);
+/* harmony import */ var _PullToRefreshSpinner__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(411);
 /* harmony import */ var _PullToRefresh_module_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(409);
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -64515,6 +64533,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 
 
 
+
 function cancelEvent(event) {
     if (!event) {
         return false;
@@ -64567,13 +64586,6 @@ var TOUCH_MOVE_EVENT_PARAMS = {
     var touchY = react__WEBPACK_IMPORTED_MODULE_0__.useRef(0);
     var _React_useState5 = _sliced_to_array(react__WEBPACK_IMPORTED_MODULE_0__.useState(0), 2), contentShift = _React_useState5[0], setContentShift = _React_useState5[1];
     var _React_useState6 = _sliced_to_array(react__WEBPACK_IMPORTED_MODULE_0__.useState(0), 2), spinnerProgress = _React_useState6[0], setSpinnerProgress = _React_useState6[1];
-    var onWindowTouchMove = function(event) {
-        if (refreshing) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    };
-    (0,_hooks_useGlobalEventListener__WEBPACK_IMPORTED_MODULE_8__.useGlobalEventListener)(document, "touchmove", onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);
     var resetRefreshingState = react__WEBPACK_IMPORTED_MODULE_0__.useCallback(function() {
         setWatching(false);
         setCanRefresh(false);
@@ -64592,8 +64604,8 @@ var TOUCH_MOVE_EVENT_PARAMS = {
         touchDown,
         resetRefreshingState
     ]);
-    var _useTimeout = (0,_hooks_useTimeout__WEBPACK_IMPORTED_MODULE_9__.useTimeout)(onRefreshingFinish, 1000), setWaitFetchingTimeout = _useTimeout.set, clearWaitFetchingTimeout = _useTimeout.clear;
-    (0,_lib_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_10__.useIsomorphicLayoutEffect)(function() {
+    var _useTimeout = (0,_hooks_useTimeout__WEBPACK_IMPORTED_MODULE_8__.useTimeout)(onRefreshingFinish, 1000), setWaitFetchingTimeout = _useTimeout.set, clearWaitFetchingTimeout = _useTimeout.clear;
+    (0,_lib_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_9__.useIsomorphicLayoutEffect)(function() {
         if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {
             onRefreshingFinish();
         }
@@ -64602,7 +64614,7 @@ var TOUCH_MOVE_EVENT_PARAMS = {
         isFetching,
         onRefreshingFinish
     ]);
-    (0,_lib_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_10__.useIsomorphicLayoutEffect)(function() {
+    (0,_lib_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_9__.useIsomorphicLayoutEffect)(function() {
         if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {
             clearWaitFetchingTimeout();
         }
@@ -64622,7 +64634,7 @@ var TOUCH_MOVE_EVENT_PARAMS = {
             var runTapticImpactOccurredCalled = onRefresh();
             // TODO [>=6]: удалить блок кода (#5049)
             if (!runTapticImpactOccurredCalled) {
-                (0,_lib_taptic__WEBPACK_IMPORTED_MODULE_11__.runTapticImpactOccurred)("light");
+                (0,_lib_taptic__WEBPACK_IMPORTED_MODULE_10__.runTapticImpactOccurred)("light");
             }
         }
     }, [
@@ -64632,7 +64644,7 @@ var TOUCH_MOVE_EVENT_PARAMS = {
         platform,
         initParams.refreshing
     ]);
-    (0,_lib_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_10__.useIsomorphicLayoutEffect)(function() {
+    (0,_lib_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_9__.useIsomorphicLayoutEffect)(function() {
         if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {
             if (!refreshing && canRefresh) {
                 runRefreshing();
@@ -64658,12 +64670,33 @@ var TOUCH_MOVE_EVENT_PARAMS = {
         canRefresh,
         runRefreshing
     ]);
+    var startYRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(0);
     var onTouchStart = function(e) {
         if (refreshing) {
             cancelEvent(e);
         }
         setTouchDown(true);
+        startYRef.current = e.startY;
+    };
+    var shouldPreventTouchMove = function(event) {
+        if (watching || refreshing) {
+            return true;
+        }
+        /* Нам нужно запретить touchmove у документа как только стало понятно, что
+     * начинается pull.
+     * состояния watching и refreshing устанавливаются слишком поздно и браузер
+     * может успеть начать нативный pull to refresh. */ var shiftY = (0,_lib_touch__WEBPACK_IMPORTED_MODULE_11__.coordY)(event) - startYRef.current;
+        var pageYOffset = scroll === null || scroll === void 0 ? void 0 : scroll.getScroll().y;
+        var isRefreshGestureStarted = pageYOffset === 0 && shiftY > 0 && touchDown;
+        return isRefreshGestureStarted;
+    };
+    var onWindowTouchMove = function(event) {
+        if (shouldPreventTouchMove(event)) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
     };
+    (0,_hooks_useGlobalEventListener__WEBPACK_IMPORTED_MODULE_12__.useGlobalEventListener)(document, "touchmove", onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);
     var onTouchMove = function(e) {
         var isY = e.isY, shiftY = e.shiftY;
         var start = initParams.start, max = initParams.max;
@@ -64672,10 +64705,10 @@ var TOUCH_MOVE_EVENT_PARAMS = {
             cancelEvent(e);
             var positionMultiplier = initParams.positionMultiplier, maxY = initParams.maxY;
             var shift = Math.max(0, shiftY - touchY.current);
-            var currentY = (0,_helpers_math__WEBPACK_IMPORTED_MODULE_12__.clamp)(start + shift * positionMultiplier, start, maxY);
+            var currentY = (0,_helpers_math__WEBPACK_IMPORTED_MODULE_13__.clamp)(start + shift * positionMultiplier, start, maxY);
             var progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;
             setSpinnerY(currentY);
-            setSpinnerProgress((0,_helpers_math__WEBPACK_IMPORTED_MODULE_12__.clamp)(progress, 0, 80));
+            setSpinnerProgress((0,_helpers_math__WEBPACK_IMPORTED_MODULE_13__.clamp)(progress, 0, 80));
             setCanRefresh(progress > 80);
             setContentShift((currentY + 10) * 2.3);
             if (progress > 85 && !refreshing && platform === _lib_platform__WEBPACK_IMPORTED_MODULE_7__.Platform.IOS) {
@@ -64700,17 +64733,17 @@ var TOUCH_MOVE_EVENT_PARAMS = {
     } else if (platform === _lib_platform__WEBPACK_IMPORTED_MODULE_7__.Platform.IOS && (contentShift || refreshing)) {
         contentTransform = "translate3d(0, ".concat(contentShift, "px, 0)");
     }
-    return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Touch_TouchContext__WEBPACK_IMPORTED_MODULE_13__["default"].Provider, {
+    return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Touch_TouchContext__WEBPACK_IMPORTED_MODULE_14__["default"].Provider, {
         value: true
-    }, /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Touch_Touch__WEBPACK_IMPORTED_MODULE_14__.Touch, _object_spread_props(_object_spread({}, restProps), {
+    }, /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Touch_Touch__WEBPACK_IMPORTED_MODULE_15__.Touch, _object_spread_props(_object_spread({}, restProps), {
         onStart: onTouchStart,
         onMove: onTouchMove,
         onEnd: onTouchEnd,
         className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiPullToRefresh", platform === _lib_platform__WEBPACK_IMPORTED_MODULE_7__.Platform.IOS && "vkuiPullToRefresh--ios", watching && "vkuiPullToRefresh--watching", refreshing && "vkuiPullToRefresh--refreshing", className)
-    }), /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FixedLayout_FixedLayout__WEBPACK_IMPORTED_MODULE_15__.FixedLayout, {
+    }), /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_FixedLayout_FixedLayout__WEBPACK_IMPORTED_MODULE_16__.FixedLayout, {
         className: "vkuiPullToRefresh__controls",
         useParentWidth: true
-    }, /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_PullToRefreshSpinner__WEBPACK_IMPORTED_MODULE_16__.PullToRefreshSpinner, {
+    }, /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_PullToRefreshSpinner__WEBPACK_IMPORTED_MODULE_17__.PullToRefreshSpinner, {
         style: {
             transform: spinnerTransform,
             WebkitTransform: spinnerTransform,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.9.2",
+  "version": "5.9.3",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "main": "dist/cjs/index.js",

package/src/components/ActionSheet/ActionSheet.tsx

@@ -130,14 +130,14 @@ export const ActionSheet = ({
       >
         <div className={styles['ActionSheet__content-wrapper']}>
           {(header || text) && (
-            <header className={styles['ActionSheet__header']}>
+            <div className={styles['ActionSheet__header']}>
               {header && (
                 <Footnote weight="2" className={styles['ActionSheet__title']}>
                   {header}
                 </Footnote>
               )}
               {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}
-            </header>
+            </div>
           )}
           {children}
         </div>

package/src/components/Alert/Alert.module.css

@@ -61,6 +61,11 @@
   color: var(--vkui--color_text_secondary);
 }
 
+.Alert__header,
+.Alert__text {
+  word-break: break-word;
+}
+
 .Alert__actions--direction-horizontal {
   justify-content: flex-end;
 }

package/src/components/CustomSelect/CustomSelect.tsx

@@ -112,7 +112,7 @@ export interface CustomSelectOptionInterface {
 }
 
 interface CustomSelectRenderOption extends CustomSelectOptionProps {
-  option?: CustomSelectOptionInterface;
+  option: CustomSelectOptionInterface;
 }
 
 export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerOptionsProps {

package/src/components/Header/Header.tsx

@@ -11,7 +11,7 @@ import { Subhead } from '../Typography/Subhead/Subhead';
 import { Title } from '../Typography/Title/Title';
 import styles from './Header.module.css';
 
-export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement> {
+export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {
   mode?: 'primary' | 'secondary' | 'tertiary';
   size?: 'regular' | 'large';
   subtitle?: React.ReactNode;
@@ -75,6 +75,7 @@ const stylesMode = {
 export const Header = ({
   mode = 'primary',
   size = 'regular',
+  Component = 'h2',
   children,
   subtitle,
   indicator,
@@ -84,7 +85,6 @@ export const Header = ({
 }: HeaderProps) => {
   return (
     <RootComponent
-      Component="header"
       {...restProps}
       baseClassName={classNames(
         styles['Header'],
@@ -97,7 +97,7 @@ export const Header = ({
       <div className={styles['Header__main']}>
         <HeaderContent
           className={styles['Header__content']}
-          Component="span"
+          Component={Component}
           mode={mode}
           size={size}
         >

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -288,9 +288,11 @@ export const HorizontalScroll = ({
     >
       {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (
         <ScrollArrow
+          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}
           size={arrowSize}
           offsetY={arrowOffsetY}
           direction="left"
+          aria-hidden
           className={classNames(
             styles['HorizontalScroll__arrow'],
             styles['HorizontalScroll__arrowLeft'],
@@ -300,9 +302,11 @@ export const HorizontalScroll = ({
       )}
       {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (
         <ScrollArrow
+          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}
           size={arrowSize}
           offsetY={arrowOffsetY}
           direction="right"
+          aria-hidden
           className={classNames(
             styles['HorizontalScroll__arrow'],
             styles['HorizontalScroll__arrowRight'],

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -8,6 +8,7 @@ import { useTimeout } from '../../hooks/useTimeout';
 import { DOMProps, useDOM } from '../../lib/dom';
 import { Platform } from '../../lib/platform';
 import { runTapticImpactOccurred } from '../../lib/taptic';
+import { coordY, VKUITouchEvent } from '../../lib/touch';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { AnyFunction, HasChildren } from '../../types';
 import { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';
@@ -113,15 +114,6 @@ export const PullToRefresh = ({
   const [contentShift, setContentShift] = React.useState(0);
   const [spinnerProgress, setSpinnerProgress] = React.useState(0);
 
-  const onWindowTouchMove = (event: Event) => {
-    if (refreshing) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  };
-
-  useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);
-
   const resetRefreshingState = React.useCallback(() => {
     setWatching(false);
     setCanRefresh(false);
@@ -199,13 +191,40 @@ export const PullToRefresh = ({
     runRefreshing,
   ]);
 
+  const startYRef = React.useRef(0);
+
   const onTouchStart = (e: TouchEvent) => {
     if (refreshing) {
       cancelEvent(e);
     }
     setTouchDown(true);
+    startYRef.current = e.startY;
   };
 
+  const shouldPreventTouchMove = (event: VKUITouchEvent) => {
+    if (watching || refreshing) {
+      return true;
+    }
+
+    /* Нам нужно запретить touchmove у документа как только стало понятно, что
+     * начинается pull.
+     * состояния watching и refreshing устанавливаются слишком поздно и браузер
+     * может успеть начать нативный pull to refresh. */
+    const shiftY = coordY(event) - startYRef.current;
+    const pageYOffset = scroll?.getScroll().y;
+    const isRefreshGestureStarted = pageYOffset === 0 && shiftY > 0 && touchDown;
+    return isRefreshGestureStarted;
+  };
+
+  const onWindowTouchMove = (event: VKUITouchEvent) => {
+    if (shouldPreventTouchMove(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
+  useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);
+
   const onTouchMove = (e: TouchEvent) => {
     const { isY, shiftY } = e;
     const { start, max } = initParams;

package/src/components/Typography/Caption/Caption.tsx

@@ -14,6 +14,8 @@ export interface CaptionProps extends TypographyProps, HasCaps {
 }
 
 /**
+ * Используется для мелких подписей.
+ *
  * @see https://vkcom.github.io/VKUI/#/Caption
  */
 export const Caption = ({

package/src/components/Typography/Footnote/Footnote.tsx

@@ -6,6 +6,8 @@ import styles from './Footnote.module.css';
 export interface FootnoteProps extends TypographyProps, HasCaps {}
 
 /**
+ * Используется для основных подписей.
+ *
  * @see https://vkcom.github.io/VKUI/#/Footnote
  */
 export const Footnote = ({

package/src/components/Typography/Headline/Headline.tsx

@@ -20,6 +20,8 @@ export interface HeadlineProps extends TypographyProps {
 }
 
 /**
+ * Используется для подзаголовков.
+ *
  * @see https://vkcom.github.io/VKUI/#/Headline
  */
 export const Headline = ({

package/src/components/Typography/Paragraph/Paragraph.tsx

@@ -6,6 +6,8 @@ import styles from './Paragraph.module.css';
 export type ParagraphProps = TypographyProps;
 
 /**
+ * Используется для основного текста.
+ *
  * @see https://vkcom.github.io/VKUI/#/Paragraph
  */
 export const Paragraph = ({

package/src/components/Typography/Subhead/Subhead.tsx

@@ -13,6 +13,8 @@ const sizeYClassNames = {
 export type SubheadProps = TypographyProps;
 
 /**
+ * Используется для подзаголовков 2 уровня.
+ *
  * @see https://vkcom.github.io/VKUI/#/Subhead
  */
 export const Subhead = ({

package/src/components/Typography/Text/Text.tsx

@@ -13,6 +13,8 @@ const sizeYClassNames = {
 export type TextProps = TypographyProps;
 
 /**
+ * Основной наборный текст.
+ *
  * @see https://vkcom.github.io/VKUI/#/Text
  */
 export const Text = ({

package/src/components/Typography/Title/Title.tsx

@@ -14,6 +14,8 @@ export interface TitleProps extends TypographyProps {
 }
 
 /**
+ * Используется для заголовков.
+ *
  * @see https://vkcom.github.io/VKUI/#/Title
  */
 export const Title = ({