@salutejs/plasma-new-hope 0.268.1-dev.0 → 0.268.2-canary.1780.13373736245.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.268.1-dev.0",
+  "version": "0.268.2-canary.1780.13373736245.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -132,5 +132,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "767dbfa6c6cdb43f57c4e9b4ace42aeef623b17f"
+  "gitHead": "585e27500065b56fd2c91f35bb82eda6e7c59c39"
 }

package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx

@@ -97,18 +97,21 @@ export function App() {
 ```
 
 ### Пример с прокруткой
+При выборе таба происходит прокрутка до выбранного таба.
 
 ```tsx live
 import React, { useState } from 'react';
-import { Tabs, TabItem } from '@salutejs/{{ package }}';
+import { Tabs, TabItem, Button } from '@salutejs/plasma-web';
 import { IconClock } from '@salutejs/plasma-icons';
 
 export function App() {
     const items = Array(8).fill(0);
     const [index, setIndex] = useState(0);
 
+    const specificIndex = 6;
+
     return (
-        <div>
+        <div style=\{{ display:'flex', flexDirection: 'column', gap: '1rem' }}>
             <Tabs view="divider" size="xs" style=\{{ width: '15rem' }}>
                 {items.map((_, i) => (
                     <TabItem
@@ -124,6 +127,8 @@ export function App() {
                     </TabItem>
                 ))}
             </Tabs>
+
+            <Button onClick={() => setIndex(specificIndex)}>{`Выбрать элемент ${specificIndex + 1}`}</Button>
         </div>
     );
 }

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js

@@ -70,6 +70,16 @@ var horizontalTabItemRoot = exports.horizontalTabItemRoot = function horizontalT
         return refs.unregister(innerRef);
       };
     }, [refs]);
+    (0, _react.useLayoutEffect)(function () {
+      var _innerRef$current;
+      if (!selected) {
+        return;
+      }
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 || _innerRef$current.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }, [selected]);
     var onItemFocus = (0, _react.useCallback)(function (event) {
       if (disabled) {
         return;
@@ -95,10 +105,6 @@ var horizontalTabItemRoot = exports.horizontalTabItemRoot = function horizontalT
       refs.setCurrent(focusIndex);
     }, [refs, innerRef, onIndexChange, disabled]);
     var handleClick = function handleClick(event) {
-      event.currentTarget.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest'
-      });
       if (!onClick) {
         return;
       }

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js

@@ -11,6 +11,7 @@ var _Icon = /*#__PURE__*/require("../../../../_Icon");
 var _tokens = /*#__PURE__*/require("../../../tokens");
 var _utils = /*#__PURE__*/require("../../../../../utils");
 var _TabsContext = /*#__PURE__*/require("../../../TabsContext");
+var _utils2 = /*#__PURE__*/require("../../../utils");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
@@ -91,13 +92,7 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
         return;
       }
       var scrollLeft = Math.round(scrollRef.current.scrollLeft);
-      var firstOverflowingTab = refs.items.slice().reverse().find(function (item) {
-        if (!item.current || item.current.offsetLeft === undefined) {
-          return;
-        }
-        var tabStartX = item.current.offsetLeft;
-        return tabStartX < scrollLeft;
-      });
+      var firstOverflowingTab = (0, _utils2.getFirstOverflowingTab)(refs.items.slice().reverse(), scrollLeft);
       firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
         block: 'nearest',
         inline: 'start'
@@ -109,13 +104,7 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
         return;
       }
       var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
-      var lastOverflowingTab = refs.items.find(function (item) {
-        if (!item.current || item.current.offsetLeft === undefined) {
-          return;
-        }
-        var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
-        return tabEndX > scrollRight;
-      });
+      var lastOverflowingTab = (0, _utils2.getLastOverflowingTab)(refs.items, scrollRight);
       lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
         block: 'nearest',
         inline: 'end'
@@ -190,18 +179,22 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
         });
       }
     }, [index]);
-    (0, _react.useEffect)(function () {
+    (0, _react.useLayoutEffect)(function () {
       var _scrollRef$current, _scrollRef$current2;
       setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollWidth) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientWidth));
     }, []);
 
     // Этот хук компенсирует появление левой стрелки при прокрутке
-    (0, _react.useEffect)(function () {
+    (0, _react.useLayoutEffect)(function () {
+      var _lastOverflowingTab$c2;
       if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {
         return;
       }
-      scrollRef.current.scrollTo({
-        left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
+      var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
+      var lastOverflowingTab = (0, _utils2.getLastOverflowingTab)(refs.items, scrollRight);
+      lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c2 = lastOverflowingTab.current) === null || _lastOverflowingTab$c2 === void 0 || _lastOverflowingTab$c2.scrollIntoView({
+        block: 'nearest',
+        inline: 'end'
       });
     }, [firstItemVisible, scrollRef, leftArrowRef]);
     return /*#__PURE__*/_react["default"].createElement(_TabsContext.TabsContext.Provider, {

package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js

@@ -61,6 +61,16 @@ var verticalTabItemRoot = exports.verticalTabItemRoot = function verticalTabItem
         return refs.unregister(innerRef);
       };
     }, [refs]);
+    (0, _react.useLayoutEffect)(function () {
+      var _innerRef$current;
+      if (!selected) {
+        return;
+      }
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 || _innerRef$current.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }, [selected]);
     var onItemFocus = (0, _react.useCallback)(function (event) {
       if (disabled) {
         return;
@@ -85,10 +95,6 @@ var verticalTabItemRoot = exports.verticalTabItemRoot = function verticalTabItem
       refs.setCurrent(focusIndex);
     }, [refs, innerRef, onIndexChange, disabled]);
     var handleClick = function handleClick(event) {
-      event.currentTarget.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest'
-      });
       if (!onClick) {
         return;
       }

package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js

@@ -11,6 +11,7 @@ var _tokens = /*#__PURE__*/require("../../../tokens");
 var _utils = /*#__PURE__*/require("../../../../../utils");
 var _TabsContext = /*#__PURE__*/require("../../../TabsContext");
 var _Icon = /*#__PURE__*/require("../../../../_Icon");
+var _utils2 = /*#__PURE__*/require("../../../utils");
 var _VerticalTabs = /*#__PURE__*/require("./VerticalTabs.styles");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_view/base");
@@ -78,13 +79,7 @@ var verticalTabsRoot = exports.verticalTabsRoot = function verticalTabsRoot(Root
         return;
       }
       var scrollTop = Math.round(scrollRef.current.scrollTop);
-      var firstOverflowingTab = refs.items.slice().reverse().find(function (item) {
-        if (!item.current || item.current.offsetTop === undefined) {
-          return;
-        }
-        var tabStartY = item.current.offsetTop;
-        return tabStartY < scrollTop;
-      });
+      var firstOverflowingTab = (0, _utils2.getFirstOverflowingTab)(refs.items.slice().reverse(), scrollTop);
       firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
         block: 'start',
         inline: 'nearest'
@@ -96,13 +91,7 @@ var verticalTabsRoot = exports.verticalTabsRoot = function verticalTabsRoot(Root
         return;
       }
       var scrollBottom = Math.round(scrollRef.current.scrollTop + scrollRef.current.clientHeight);
-      var lastOverflowingTab = refs.items.find(function (item) {
-        if (!item.current || item.current.offsetTop === undefined) {
-          return;
-        }
-        var tabEndY = item.current.offsetTop + item.current.offsetHeight;
-        return tabEndY > scrollBottom;
-      });
+      var lastOverflowingTab = (0, _utils2.getLastOverflowingTab)(refs.items, scrollBottom);
       lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
         block: 'end',
         inline: 'nearest'
@@ -168,18 +157,22 @@ var verticalTabsRoot = exports.verticalTabsRoot = function verticalTabsRoot(Root
         });
       }
     }, [index]);
-    (0, _react.useEffect)(function () {
+    (0, _react.useLayoutEffect)(function () {
       var _scrollRef$current, _scrollRef$current2;
       setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientHeight));
     }, []);
 
     // Этот хук компенсирует появление верхней стрелки при прокрутке
-    (0, _react.useEffect)(function () {
+    (0, _react.useLayoutEffect)(function () {
+      var _lastOverflowingTab$c2;
       if (firstItemVisible || !scrollRef.current || !upArrowRef.current) {
         return;
       }
-      scrollRef.current.scrollTo({
-        top: Math.round(scrollRef.current.scrollTop + upArrowRef.current.clientHeight)
+      var scrollBottom = Math.round(scrollRef.current.scrollTop + scrollRef.current.clientHeight);
+      var lastOverflowingTab = (0, _utils2.getLastOverflowingTab)(refs.items, scrollBottom);
+      lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c2 = lastOverflowingTab.current) === null || _lastOverflowingTab$c2 === void 0 || _lastOverflowingTab$c2.scrollIntoView({
+        block: 'end',
+        inline: 'nearest'
       });
     }, [firstItemVisible, scrollRef, upArrowRef]);
     return /*#__PURE__*/_react["default"].createElement(_TabsContext.TabsContext.Provider, {

package/styled-components/cjs/components/Tabs/utils/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLastOverflowingTab = exports.getFirstOverflowingTab = void 0;
+var getFirstOverflowingTab = exports.getFirstOverflowingTab = function getFirstOverflowingTab(items, maxScroll) {
+  return items.find(function (item) {
+    if (!item.current || item.current.offsetLeft === undefined) {
+      return;
+    }
+    var tabStartX = item.current.offsetLeft;
+    return tabStartX < maxScroll;
+  });
+};
+var getLastOverflowingTab = exports.getLastOverflowingTab = function getLastOverflowingTab(items, minScroll) {
+  return items.find(function (item) {
+    if (!item.current || item.current.offsetLeft === undefined) {
+      return;
+    }
+    var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
+    return tabEndX > minScroll;
+  });
+};

package/styled-components/es/components/Tabs/Tabs.template-doc.mdx

@@ -97,18 +97,21 @@ export function App() {
 ```
 
 ### Пример с прокруткой
+При выборе таба происходит прокрутка до выбранного таба.
 
 ```tsx live
 import React, { useState } from 'react';
-import { Tabs, TabItem } from '@salutejs/{{ package }}';
+import { Tabs, TabItem, Button } from '@salutejs/plasma-web';
 import { IconClock } from '@salutejs/plasma-icons';
 
 export function App() {
     const items = Array(8).fill(0);
     const [index, setIndex] = useState(0);
 
+    const specificIndex = 6;
+
     return (
-        <div>
+        <div style=\{{ display:'flex', flexDirection: 'column', gap: '1rem' }}>
             <Tabs view="divider" size="xs" style=\{{ width: '15rem' }}>
                 {items.map((_, i) => (
                     <TabItem
@@ -124,6 +127,8 @@ export function App() {
                     </TabItem>
                 ))}
             </Tabs>
+
+            <Button onClick={() => setIndex(specificIndex)}>{`Выбрать элемент ${specificIndex + 1}`}</Button>
         </div>
     );
 }

package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js

@@ -8,7 +8,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';
+import React, { forwardRef, useRef, useContext, useEffect, useCallback, useLayoutEffect } from 'react';
 import { useForkRef } from '@salutejs/plasma-core';
 import { classes } from '../../../tokens';
 import { cx } from '../../../../../utils';
@@ -62,6 +62,16 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
         return refs.unregister(innerRef);
       };
     }, [refs]);
+    useLayoutEffect(function () {
+      var _innerRef$current;
+      if (!selected) {
+        return;
+      }
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 || _innerRef$current.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }, [selected]);
     var onItemFocus = useCallback(function (event) {
       if (disabled) {
         return;
@@ -87,10 +97,6 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
       refs.setCurrent(focusIndex);
     }, [refs, innerRef, onIndexChange, disabled]);
     var handleClick = function handleClick(event) {
-      event.currentTarget.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest'
-      });
       if (!onClick) {
         return;
       }

package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js

@@ -8,12 +8,13 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useMemo, useState, useRef, useLayoutEffect } from 'react';
 import { safeUseId } from '@salutejs/plasma-core';
 import { IconDisclosureLeft, IconDisclosureRight } from '../../../../_Icon';
 import { classes } from '../../../tokens';
 import { cx } from '../../../../../utils';
 import { TabItemRefs, TabsContext } from '../../../TabsContext';
+import { getFirstOverflowingTab, getLastOverflowingTab } from '../../../utils';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
@@ -82,13 +83,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
         return;
       }
       var scrollLeft = Math.round(scrollRef.current.scrollLeft);
-      var firstOverflowingTab = refs.items.slice().reverse().find(function (item) {
-        if (!item.current || item.current.offsetLeft === undefined) {
-          return;
-        }
-        var tabStartX = item.current.offsetLeft;
-        return tabStartX < scrollLeft;
-      });
+      var firstOverflowingTab = getFirstOverflowingTab(refs.items.slice().reverse(), scrollLeft);
       firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
         block: 'nearest',
         inline: 'start'
@@ -100,13 +95,7 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
         return;
       }
       var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
-      var lastOverflowingTab = refs.items.find(function (item) {
-        if (!item.current || item.current.offsetLeft === undefined) {
-          return;
-        }
-        var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
-        return tabEndX > scrollRight;
-      });
+      var lastOverflowingTab = getLastOverflowingTab(refs.items, scrollRight);
       lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
         block: 'nearest',
         inline: 'end'
@@ -181,18 +170,22 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
         });
       }
     }, [index]);
-    useEffect(function () {
+    useLayoutEffect(function () {
       var _scrollRef$current, _scrollRef$current2;
       setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollWidth) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientWidth));
     }, []);
 
     // Этот хук компенсирует появление левой стрелки при прокрутке
-    useEffect(function () {
+    useLayoutEffect(function () {
+      var _lastOverflowingTab$c2;
       if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {
         return;
       }
-      scrollRef.current.scrollTo({
-        left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
+      var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
+      var lastOverflowingTab = getLastOverflowingTab(refs.items, scrollRight);
+      lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c2 = lastOverflowingTab.current) === null || _lastOverflowingTab$c2 === void 0 || _lastOverflowingTab$c2.scrollIntoView({
+        block: 'nearest',
+        inline: 'end'
       });
     }, [firstItemVisible, scrollRef, leftArrowRef]);
     return /*#__PURE__*/React.createElement(TabsContext.Provider, {

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js

@@ -8,7 +8,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';
+import React, { forwardRef, useRef, useContext, useEffect, useCallback, useLayoutEffect } from 'react';
 import { useForkRef } from '@salutejs/plasma-core';
 import { classes } from '../../../tokens';
 import { cx } from '../../../../../utils';
@@ -53,6 +53,16 @@ export var verticalTabItemRoot = function verticalTabItemRoot(Root) {
         return refs.unregister(innerRef);
       };
     }, [refs]);
+    useLayoutEffect(function () {
+      var _innerRef$current;
+      if (!selected) {
+        return;
+      }
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 || _innerRef$current.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }, [selected]);
     var onItemFocus = useCallback(function (event) {
       if (disabled) {
         return;
@@ -77,10 +87,6 @@ export var verticalTabItemRoot = function verticalTabItemRoot(Root) {
       refs.setCurrent(focusIndex);
     }, [refs, innerRef, onIndexChange, disabled]);
     var handleClick = function handleClick(event) {
-      event.currentTarget.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest'
-      });
       if (!onClick) {
         return;
       }

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js

@@ -9,12 +9,13 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useMemo, useState, useLayoutEffect, useRef } from 'react';
 import { safeUseId } from '@salutejs/plasma-core';
 import { classes } from '../../../tokens';
 import { cx } from '../../../../../utils';
 import { TabItemRefs, TabsContext } from '../../../TabsContext';
 import { IconDisclosureLeft, IconDisclosureRight } from '../../../../_Icon';
+import { getFirstOverflowingTab, getLastOverflowingTab } from '../../../utils';
 import { base, StyledArrow, StyledContent, StyledContentWrapper } from './VerticalTabs.styles';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
@@ -69,13 +70,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
         return;
       }
       var scrollTop = Math.round(scrollRef.current.scrollTop);
-      var firstOverflowingTab = refs.items.slice().reverse().find(function (item) {
-        if (!item.current || item.current.offsetTop === undefined) {
-          return;
-        }
-        var tabStartY = item.current.offsetTop;
-        return tabStartY < scrollTop;
-      });
+      var firstOverflowingTab = getFirstOverflowingTab(refs.items.slice().reverse(), scrollTop);
       firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView({
         block: 'start',
         inline: 'nearest'
@@ -87,13 +82,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
         return;
       }
       var scrollBottom = Math.round(scrollRef.current.scrollTop + scrollRef.current.clientHeight);
-      var lastOverflowingTab = refs.items.find(function (item) {
-        if (!item.current || item.current.offsetTop === undefined) {
-          return;
-        }
-        var tabEndY = item.current.offsetTop + item.current.offsetHeight;
-        return tabEndY > scrollBottom;
-      });
+      var lastOverflowingTab = getLastOverflowingTab(refs.items, scrollBottom);
       lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView({
         block: 'end',
         inline: 'nearest'
@@ -159,18 +148,22 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
         });
       }
     }, [index]);
-    useEffect(function () {
+    useLayoutEffect(function () {
       var _scrollRef$current, _scrollRef$current2;
       setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientHeight));
     }, []);
 
     // Этот хук компенсирует появление верхней стрелки при прокрутке
-    useEffect(function () {
+    useLayoutEffect(function () {
+      var _lastOverflowingTab$c2;
       if (firstItemVisible || !scrollRef.current || !upArrowRef.current) {
         return;
       }
-      scrollRef.current.scrollTo({
-        top: Math.round(scrollRef.current.scrollTop + upArrowRef.current.clientHeight)
+      var scrollBottom = Math.round(scrollRef.current.scrollTop + scrollRef.current.clientHeight);
+      var lastOverflowingTab = getLastOverflowingTab(refs.items, scrollBottom);
+      lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c2 = lastOverflowingTab.current) === null || _lastOverflowingTab$c2 === void 0 || _lastOverflowingTab$c2.scrollIntoView({
+        block: 'end',
+        inline: 'nearest'
       });
     }, [firstItemVisible, scrollRef, upArrowRef]);
     return /*#__PURE__*/React.createElement(TabsContext.Provider, {

package/styled-components/es/components/Tabs/utils/index.js

@@ -0,0 +1,18 @@
+export var getFirstOverflowingTab = function getFirstOverflowingTab(items, maxScroll) {
+  return items.find(function (item) {
+    if (!item.current || item.current.offsetLeft === undefined) {
+      return;
+    }
+    var tabStartX = item.current.offsetLeft;
+    return tabStartX < maxScroll;
+  });
+};
+export var getLastOverflowingTab = function getLastOverflowingTab(items, minScroll) {
+  return items.find(function (item) {
+    if (!item.current || item.current.offsetLeft === undefined) {
+      return;
+    }
+    var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
+    return tabEndX > minScroll;
+  });
+};

package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAGtF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAInD,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAQhE,eAAO,MAAM,qBAAqB,SAAU,UAAU,cAAc,EAAE,sBAAsB,CAAC,kGAuHvF,CAAC;AAEP,eAAO,MAAM,uBAAuB;;;mBAzHQ,UAAU,cAAc,EAAE,sBAAsB,CAAC;;;;;;;;;;;;;;;;;;;;CAgJ5F,CAAC"}
+{"version":3,"file":"HorizontalTabItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkF,MAAM,OAAO,CAAC;AAGvG,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAInD,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAQhE,eAAO,MAAM,qBAAqB,SAAU,UAAU,cAAc,EAAE,sBAAsB,CAAC,kGA6HvF,CAAC;AAEP,eAAO,MAAM,uBAAuB;;;mBA/HQ,UAAU,cAAc,EAAE,sBAAsB,CAAC;;;;;;;;;;;;;;;;;;;;CAsJ5F,CAAC"}

package/types/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuF,MAAM,OAAO,CAAC;AAI5G,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAK9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAqB/D,eAAO,MAAM,kBAAkB,SAAU,UAAU,cAAc,EAAE,mBAAmB,CAAC,+FAuNjF,CAAC;AAEP,eAAO,MAAM,oBAAoB;;;mBAzNQ,UAAU,cAAc,EAAE,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAqPtF,CAAC"}
+{"version":3,"file":"HorizontalTabs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAIlH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAK9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAsB/D,eAAO,MAAM,kBAAkB,SAAU,UAAU,cAAc,EAAE,mBAAmB,CAAC,+FAuMjF,CAAC;AAEP,eAAO,MAAM,oBAAoB;;;mBAzMQ,UAAU,cAAc,EAAE,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAqOtF,CAAC"}

package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAGtF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAInD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAO9D,eAAO,MAAM,mBAAmB,SAAU,UAAU,iBAAiB,EAAE,oBAAoB,CAAC,mGA8GtF,CAAC;AAEP,eAAO,MAAM,qBAAqB;;;mBAhHQ,UAAU,iBAAiB,EAAE,oBAAoB,CAAC;;;;;;;;;;;;;;;;;CAoI3F,CAAC"}
+{"version":3,"file":"VerticalTabItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkF,MAAM,OAAO,CAAC;AAGvG,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAInD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAO9D,eAAO,MAAM,mBAAmB,SAAU,UAAU,iBAAiB,EAAE,oBAAoB,CAAC,mGAoHtF,CAAC;AAEP,eAAO,MAAM,qBAAqB;;;mBAtHQ,UAAU,iBAAiB,EAAE,oBAAoB,CAAC;;;;;;;;;;;;;;;;;CA0I3F,CAAC"}

package/types/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuF,MAAM,OAAO,CAAC;AAI5G,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAI9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAgB7D,eAAO,MAAM,gBAAgB,SAAU,UAAU,cAAc,EAAE,iBAAiB,CAAC,+KAiM7E,CAAC;AAEP,eAAO,MAAM,kBAAkB;;;mBAnMQ,UAAU,cAAc,EAAE,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;CAwNlF,CAAC"}
+{"version":3,"file":"VerticalTabs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAIlH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAI9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAiB7D,eAAO,MAAM,gBAAgB,SAAU,UAAU,cAAc,EAAE,iBAAiB,CAAC,+KAiL7E,CAAC;AAEP,eAAO,MAAM,kBAAkB;;;mBAnLQ,UAAU,cAAc,EAAE,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;CAwMlF,CAAC"}

package/types/components/Tabs/utils/index.d.ts

@@ -0,0 +1,4 @@
+import { MutableRefObject } from 'react';
+export declare const getFirstOverflowingTab: (items: MutableRefObject<HTMLElement | null>[], maxScroll: number) => MutableRefObject<HTMLElement | null> | undefined;
+export declare const getLastOverflowingTab: (items: MutableRefObject<HTMLElement | null>[], minScroll: number) => MutableRefObject<HTMLElement | null> | undefined;
+//# sourceMappingURL=index.d.ts.map

package/types/components/Tabs/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEzC,eAAO,MAAM,sBAAsB,UAAW,iBAAiB,WAAW,GAAG,IAAI,CAAC,EAAE,aAAa,MAAM,qDAStG,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,iBAAiB,WAAW,GAAG,IAAI,CAAC,EAAE,aAAa,MAAM,qDASrG,CAAC"}