@douyinfe/semi-ui 2.58.0 → 2.58.1

package/dist/umd/semi-ui.js

@@ -84959,18 +84959,11 @@ var TabBar_rest = undefined && undefined.__rest || function (s, e) {
 
 class TabBar extends (external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Component {
   constructor(props) {
+    var _this;
     super(props);
+    _this = this;
     this.handleItemClick = (itemKey, e) => {
       this.props.onTabClick(itemKey, e);
-      if (this.props.collapsible) {
-        const key = this._getItemKey(itemKey);
-        const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${tabs_constants_cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
-        tabItem.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'nearest'
-        });
-      }
     };
     this.handleKeyDown = (event, itemKey, closable) => {
       this.props.handleKeyDown(event, itemKey, closable);
@@ -84995,6 +84988,19 @@ class TabBar extends (external_root_React_commonjs2_react_commonjs_react_amd_rea
         onClick: this.handleItemClick
       }));
     };
+    this.scrollTabItemIntoViewByKey = function (key) {
+      let logicalPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'nearest';
+      const tabItem = document.querySelector(`[data-uuid="${_this.state.uuid}"] .${tabs_constants_cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
+      tabItem === null || tabItem === void 0 ? void 0 : tabItem.scrollIntoView({
+        behavior: 'smooth',
+        block: logicalPosition,
+        inline: logicalPosition
+      });
+    };
+    this.scrollActiveTabItemIntoView = logicalPosition => {
+      const key = this._getItemKey(this.props.activeKey);
+      this.scrollTabItemIntoViewByKey(key, logicalPosition);
+    };
     this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
     this.handleArrowClick = (items, pos) => {
       const lastItem = pos === 'start' ? items.pop() : items.shift();
@@ -85002,12 +85008,7 @@ class TabBar extends (external_root_React_commonjs2_react_commonjs_react_amd_rea
         return;
       }
       const key = this._getItemKey(lastItem.itemKey);
-      const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${tabs_constants_cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
-      tabItem.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'nearest'
-      });
+      this.scrollTabItemIntoViewByKey(key);
     };
     this.renderCollapse = (items, icon, pos) => {
       if (isEmpty_default()(items)) {
@@ -85157,6 +85158,13 @@ class TabBar extends (external_root_React_commonjs2_react_commonjs_react_amd_rea
       uuid: getUuidv4()
     });
   }
+  componentDidUpdate(prevProps) {
+    if (prevProps.activeKey !== this.props.activeKey) {
+      if (this.props.collapsible) {
+        this.scrollActiveTabItemIntoView();
+      }
+    }
+  }
   renderIcon(icon) {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", null, icon);
   }