@douyinfe/semi-ui 2.22.0-alpha.0 → 2.22.0-beta.1

package/lib/es/table/Column.d.ts

@@ -25,11 +25,11 @@ export default class Column extends React.PureComponent<ColumnProps> {
         renderFilterDropdownItem: import("prop-types").Requireable<(...args: any[]) => any>;
         sortChildrenRecord: import("prop-types").Requireable<boolean>;
         sortDirections: import("prop-types").Requireable<string[]>;
-        sortOrder: import("prop-types").Requireable<string | boolean>;
-        sorter: import("prop-types").Requireable<boolean | ((...args: any[]) => any)>;
-        title: import("prop-types").Requireable<import("prop-types").ReactNodeLike | ((...args: any[]) => any)>;
+        sortOrder: import("prop-types").Requireable<NonNullable<string | boolean>>;
+        sorter: import("prop-types").Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
+        title: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike | ((...args: any[]) => any)>>;
         useFullRender: import("prop-types").Requireable<boolean>;
-        width: import("prop-types").Requireable<string | number>;
+        width: import("prop-types").Requireable<NonNullable<string | number>>;
     };
     constructor(props?: ColumnProps);
     render(): null;

package/lib/es/table/ColumnShape.d.ts

@@ -23,10 +23,10 @@ declare const _default: {
     renderFilterDropdownItem: PropTypes.Requireable<(...args: any[]) => any>;
     sortChildrenRecord: PropTypes.Requireable<boolean>;
     sortDirections: PropTypes.Requireable<string[]>;
-    sortOrder: PropTypes.Requireable<string | boolean>;
-    sorter: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
-    title: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+    sortOrder: PropTypes.Requireable<NonNullable<string | boolean>>;
+    sorter: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
+    title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
     useFullRender: PropTypes.Requireable<boolean>;
-    width: PropTypes.Requireable<string | number>;
+    width: PropTypes.Requireable<NonNullable<string | number>>;
 };
 export default _default;

package/lib/es/table/ColumnSorter.d.ts

@@ -15,7 +15,7 @@ export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
         style: PropTypes.Requireable<object>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         prefixCls: PropTypes.Requireable<string>;
-        sortOrder: PropTypes.Requireable<string | boolean>;
+        sortOrder: PropTypes.Requireable<NonNullable<string | boolean>>;
     };
     static defaultProps: {
         prefixCls: "semi-table";

package/lib/es/table/CustomExpandIcon.d.ts

@@ -21,7 +21,7 @@ declare namespace CustomExpandIcon {
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
-        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+        expandIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         prefixCls: PropTypes.Requireable<string>;
         motion: PropTypes.Requireable<boolean>;
     };

package/lib/es/table/CustomExpandIcon.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { IconChevronRight, IconChevronDown, IconTreeTriangleDown, IconTreeTriangleRight } from '@douyinfe/semi-icons';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import isEnterPress from '@douyinfe/semi-foundation/lib/es/utils/isEnterPress';
-import Rotate from '../motions/Rotate';
+import CSSAnimation from "../_cssAnimation";
 /**
  * render expand icon
  */
@@ -45,10 +45,18 @@ export default function CustomExpandIcon(props) {
   }, [expanded]);
 
   if (motion) {
-    icon = /*#__PURE__*/React.createElement(Rotate, {
-      isOpen: expanded,
-      enterDeg: 90
-    }, icon);
+    const originIcon = icon;
+    icon = /*#__PURE__*/React.createElement(CSSAnimation, {
+      animationState: expanded ? "enter" : "leave",
+      startClassName: "".concat(cssClasses.PREFIX, "-expandedIcon-").concat(expanded ? 'show' : "hide")
+    }, _ref => {
+      let {
+        animationClassName
+      } = _ref;
+      return /*#__PURE__*/React.cloneElement(originIcon, {
+        className: (originIcon.props.className || "") + " " + animationClassName
+      });
+    });
   }
 
   return /*#__PURE__*/React.createElement("span", {

package/lib/es/table/Table.d.ts

@@ -78,21 +78,21 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
             renderFilterDropdownItem: PropTypes.Requireable<(...args: any[]) => any>;
             sortChildrenRecord: PropTypes.Requireable<boolean>;
             sortDirections: PropTypes.Requireable<string[]>;
-            sortOrder: PropTypes.Requireable<string | boolean>;
-            sorter: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
-            title: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+            sortOrder: PropTypes.Requireable<NonNullable<string | boolean>>;
+            sorter: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
+            title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
             useFullRender: PropTypes.Requireable<boolean>;
-            width: PropTypes.Requireable<string | number>;
+            width: PropTypes.Requireable<NonNullable<string | number>>;
         }>[]>;
         hideExpandedColumn: PropTypes.Requireable<boolean>;
         id: PropTypes.Requireable<string>;
-        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+        expandIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         expandCellFixed: PropTypes.Requireable<boolean | "left" | "right">;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         onHeaderRow: PropTypes.Requireable<(...args: any[]) => any>;
         showHeader: PropTypes.Requireable<boolean>;
         indentSize: PropTypes.Requireable<number>;
-        rowKey: PropTypes.Requireable<string | number | ((...args: any[]) => any)>;
+        rowKey: PropTypes.Requireable<NonNullable<string | number | ((...args: any[]) => any)>>;
         onRow: PropTypes.Requireable<(...args: any[]) => any>;
         onExpandedRowsChange: PropTypes.Requireable<(...args: any[]) => any>;
         onExpand: PropTypes.Requireable<(...args: any[]) => any>;
@@ -104,23 +104,23 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         defaultExpandAllGroupRows: PropTypes.Requireable<boolean>;
         expandAllGroupRows: PropTypes.Requireable<boolean>;
         defaultExpandedRowKeys: PropTypes.Requireable<any[]>;
-        pagination: PropTypes.Requireable<boolean | object>;
+        pagination: PropTypes.Requireable<NonNullable<boolean | object>>;
         renderPagination: PropTypes.Requireable<(...args: any[]) => any>;
-        footer: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+        footer: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         empty: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         dataSource: PropTypes.Requireable<any[]>;
         childrenRecordName: PropTypes.Requireable<string>;
-        rowSelection: PropTypes.Requireable<boolean | object>;
+        rowSelection: PropTypes.Requireable<NonNullable<boolean | object>>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         scroll: PropTypes.Requireable<PropTypes.InferProps<{
-            x: PropTypes.Requireable<string | number | boolean>;
-            y: PropTypes.Requireable<string | number>;
+            x: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+            y: PropTypes.Requireable<NonNullable<string | number>>;
         }>>;
-        groupBy: PropTypes.Requireable<string | number | ((...args: any[]) => any)>;
+        groupBy: PropTypes.Requireable<NonNullable<string | number | ((...args: any[]) => any)>>;
         renderGroupSection: PropTypes.Requireable<(...args: any[]) => any>;
         onGroupedRow: PropTypes.Requireable<(...args: any[]) => any>;
         clickGroupedRowToExpand: PropTypes.Requireable<boolean>;
-        virtualized: PropTypes.Requireable<boolean | object>;
+        virtualized: PropTypes.Requireable<NonNullable<boolean | object>>;
         dropdownPrefixCls: PropTypes.Requireable<string>;
         expandRowByClick: PropTypes.Requireable<boolean>;
         getVirtualizedListRef: PropTypes.Requireable<(...args: any[]) => any>;
@@ -294,7 +294,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         defaultCurrentPage?: number;
         onPageChange?: (currentPage: number) => void;
         onPageSizeChange?: (newPageSize: number) => void;
-        onChange: ((currentPage: number, pageSize: number) => void) | ((currentPage: number, currentPageSize: number) => void);
+        onChange: (currentPage: number, pageSize: number) => void;
         prevText?: React.ReactNode;
         nextText?: React.ReactNode;
         showSizeChanger?: boolean;

package/lib/es/table/Table.js

@@ -819,6 +819,7 @@ class Table extends BaseComponent {
 
     const columns = this.getColumns(props.columns, props.children);
     const cachedflattenColumns = flattenColumns(columns);
+    const queries = TableFoundation.initColumnsFilteredValueAndSorterOrder(cloneDeep(cachedflattenColumns));
     this.state = {
       /**
        * Cached props
@@ -831,7 +832,7 @@ class Table extends BaseComponent {
       /**
        * State calculated based on prop
        */
-      queries: cloneDeep(cachedflattenColumns),
+      queries,
       dataSource: [],
       flattenData: [],
       expandedRowKeys: [...(props.expandedRowKeys || []), ...(props.defaultExpandedRowKeys || [])],
@@ -1082,7 +1083,23 @@ class Table extends BaseComponent {
             bodyHasScrollBar
           });
         }
+      },
+
+      stopPropagation(e) {
+        // The event definition here is not very accurate for now, it belongs to a broad structure definition
+        if (e && typeof e === 'object') {
+          if (typeof e.stopPropagation === 'function') {
+            e.stopPropagation();
+          }
+
+          if (e.nativeEvent && typeof e.nativeEvent.stopPropagation === 'function') {
+            e.nativeEvent.stopPropagation();
+          } else if (typeof e.stopImmediatePropagation === 'function') {
+            e.stopImmediatePropagation();
+          }
+        }
       }
+
     });
   }
 

package/lib/es/table/TableCell.d.ts

@@ -49,9 +49,9 @@ export default class TableCell extends BaseComponent<TableCellProps, Record<stri
         record: PropTypes.Requireable<object>;
         prefixCls: PropTypes.Requireable<string>;
         index: PropTypes.Requireable<number>;
-        fixedLeft: PropTypes.Requireable<number | boolean>;
+        fixedLeft: PropTypes.Requireable<NonNullable<number | boolean>>;
         lastFixedLeft: PropTypes.Requireable<boolean>;
-        fixedRight: PropTypes.Requireable<number | boolean>;
+        fixedRight: PropTypes.Requireable<NonNullable<number | boolean>>;
         firstFixedRight: PropTypes.Requireable<boolean>;
         indent: PropTypes.Requireable<number>;
         indentSize: PropTypes.Requireable<number>;
@@ -63,8 +63,8 @@ export default class TableCell extends BaseComponent<TableCellProps, Record<stri
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onDidUpdate: PropTypes.Requireable<(...args: any[]) => any>;
         isSection: PropTypes.Requireable<boolean>;
-        width: PropTypes.Requireable<string | number>;
-        height: PropTypes.Requireable<string | number>;
+        width: PropTypes.Requireable<NonNullable<string | number>>;
+        height: PropTypes.Requireable<NonNullable<string | number>>;
         selected: PropTypes.Requireable<boolean>;
         expanded: PropTypes.Requireable<boolean>;
         colIndex: PropTypes.Requireable<number>;

package/lib/es/table/TableHeaderRow.d.ts

@@ -21,10 +21,10 @@ export default class TableHeaderRow extends BaseComponent<TableHeaderRowProps, R
         row: PropTypes.Requireable<any[]>;
         prefixCls: PropTypes.Requireable<string>;
         onHeaderRow: PropTypes.Requireable<(...args: any[]) => any>;
-        index: PropTypes.Requireable<string | number>;
+        index: PropTypes.Requireable<NonNullable<string | number>>;
         style: PropTypes.Requireable<object>;
         columns: PropTypes.Requireable<any[]>;
-        fixed: PropTypes.Requireable<string | boolean>;
+        fixed: PropTypes.Requireable<NonNullable<string | boolean>>;
         selectedRowKeysSet: PropTypes.Validator<Set<unknown>>;
     };
     static defaultProps: {
@@ -51,6 +51,7 @@ export default class TableHeaderRow extends BaseComponent<TableHeaderRowProps, R
         getCaches(): any;
         setCache(key: any, value: any): void;
         stopPropagation(e: any): void;
+        persistEvent: (event: any) => void;
     };
     headerNode: HTMLElement;
     context: TableContextProps;

package/lib/es/table/TablePagination.d.ts

@@ -13,7 +13,7 @@ export default class TablePagination extends PureComponent<TablePaginationProps>
         style: PropTypes.Requireable<object>;
         prefixCls: PropTypes.Requireable<string>;
         pagination: PropTypes.Requireable<object>;
-        info: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        info: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         renderPagination: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {

package/lib/es/table/index.d.ts

@@ -8,7 +8,7 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
     static DEFAULT_KEY_COLUMN_SELECTION: "column-selection";
     static DEFAULT_KEY_COLUMN_EXPAND: "column-expand";
     static propTypes: {
-        resizable: PropTypes.Requireable<boolean | object>;
+        resizable: PropTypes.Requireable<NonNullable<boolean | object>>;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         prefixCls: PropTypes.Requireable<string>;
@@ -41,21 +41,21 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
             renderFilterDropdownItem: PropTypes.Requireable<(...args: any[]) => any>;
             sortChildrenRecord: PropTypes.Requireable<boolean>;
             sortDirections: PropTypes.Requireable<string[]>;
-            sortOrder: PropTypes.Requireable<string | boolean>;
-            sorter: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
-            title: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+            sortOrder: PropTypes.Requireable<NonNullable<string | boolean>>;
+            sorter: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
+            title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
             useFullRender: PropTypes.Requireable<boolean>;
-            width: PropTypes.Requireable<string | number>;
+            width: PropTypes.Requireable<NonNullable<string | number>>;
         }>[]>;
         hideExpandedColumn: PropTypes.Requireable<boolean>;
         id: PropTypes.Requireable<string>;
-        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+        expandIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         expandCellFixed: PropTypes.Requireable<boolean | "left" | "right">;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         onHeaderRow: PropTypes.Requireable<(...args: any[]) => any>;
         showHeader: PropTypes.Requireable<boolean>;
         indentSize: PropTypes.Requireable<number>;
-        rowKey: PropTypes.Requireable<string | number | ((...args: any[]) => any)>;
+        rowKey: PropTypes.Requireable<NonNullable<string | number | ((...args: any[]) => any)>>;
         onRow: PropTypes.Requireable<(...args: any[]) => any>;
         onExpandedRowsChange: PropTypes.Requireable<(...args: any[]) => any>;
         onExpand: PropTypes.Requireable<(...args: any[]) => any>;
@@ -67,23 +67,23 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
         defaultExpandAllGroupRows: PropTypes.Requireable<boolean>;
         expandAllGroupRows: PropTypes.Requireable<boolean>;
         defaultExpandedRowKeys: PropTypes.Requireable<any[]>;
-        pagination: PropTypes.Requireable<boolean | object>;
+        pagination: PropTypes.Requireable<NonNullable<boolean | object>>;
         renderPagination: PropTypes.Requireable<(...args: any[]) => any>;
-        footer: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+        footer: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         empty: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         dataSource: PropTypes.Requireable<any[]>;
         childrenRecordName: PropTypes.Requireable<string>;
-        rowSelection: PropTypes.Requireable<boolean | object>;
+        rowSelection: PropTypes.Requireable<NonNullable<boolean | object>>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         scroll: PropTypes.Requireable<PropTypes.InferProps<{
-            x: PropTypes.Requireable<string | number | boolean>;
-            y: PropTypes.Requireable<string | number>;
+            x: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+            y: PropTypes.Requireable<NonNullable<string | number>>;
         }>>;
-        groupBy: PropTypes.Requireable<string | number | ((...args: any[]) => any)>;
+        groupBy: PropTypes.Requireable<NonNullable<string | number | ((...args: any[]) => any)>>;
         renderGroupSection: PropTypes.Requireable<(...args: any[]) => any>;
         onGroupedRow: PropTypes.Requireable<(...args: any[]) => any>;
         clickGroupedRowToExpand: PropTypes.Requireable<boolean>;
-        virtualized: PropTypes.Requireable<boolean | object>;
+        virtualized: PropTypes.Requireable<NonNullable<boolean | object>>;
         dropdownPrefixCls: PropTypes.Requireable<string>;
         expandRowByClick: PropTypes.Requireable<boolean>;
         getVirtualizedListRef: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/table/interface.d.ts

@@ -133,6 +133,8 @@ export interface FilterDropdownItem {
 }
 export interface RenderOptions {
     expandIcon?: React.ReactNode;
+    selection?: React.ReactNode;
+    indentText?: React.ReactNode;
 }
 export interface OnCellReturnObject extends React.TdHTMLAttributes<HTMLElement> {
     [x: string]: any;

package/lib/es/tabs/TabPane.d.ts

@@ -1,7 +1,6 @@
 import React, { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { TabContextValue } from './interface';
-import { PlainTab, TabPaneProps } from './interface';
+import { PlainTab, TabContextValue, TabPaneProps } from './interface';
 declare class TabPane extends PureComponent<TabPaneProps> {
     static isTabPane: boolean;
     static contextType: React.Context<TabContextValue>;
@@ -15,15 +14,10 @@ declare class TabPane extends PureComponent<TabPaneProps> {
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         closable: PropTypes.Requireable<boolean>;
     };
-    lastActiveKey: string;
     ref: React.RefObject<HTMLDivElement>;
-    isAnimating: boolean;
     _active: boolean;
     context: TabContextValue;
-    componentDidMount(): void;
-    getDirection: (activeKey: string, itemKey: string, panes: Array<PlainTab>) => boolean;
-    hideScroll: () => void;
-    autoScroll: () => void;
+    getDirection: (activeKey: string, itemKey: string, panes: Array<PlainTab>, lastActiveKey: string) => boolean;
     shouldRender: () => boolean;
     render(): ReactNode;
 }

package/lib/es/tabs/TabPane.js

@@ -15,20 +15,18 @@ import cls from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/tabs/constants';
 import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
 import TabsContext from './tabs-context';
-import TabPaneTransition from './TabPaneTransition';
+import CSSAnimation from "../_cssAnimation";
 
 class TabPane extends PureComponent {
   constructor() {
     super(...arguments);
-    this.lastActiveKey = null;
     this.ref = /*#__PURE__*/createRef(); // get direction from current item key to activeKey
 
-    this.getDirection = (activeKey, itemKey, panes) => {
+    this.getDirection = (activeKey, itemKey, panes, lastActiveKey) => {
       if (itemKey !== null && activeKey !== null && Array.isArray(panes) && panes.length) {
         const activeIndex = panes.findIndex(pane => pane.itemKey === activeKey);
         const itemIndex = panes.findIndex(pane => pane.itemKey === itemKey);
-        const lastActiveIndex = panes.findIndex(pane => pane.itemKey === this.lastActiveKey);
-        this.lastActiveKey = activeKey;
+        const lastActiveIndex = panes.findIndex(pane => pane.itemKey === lastActiveKey);
 
         if (activeIndex === itemIndex) {
           return lastActiveIndex > activeIndex;
@@ -39,24 +37,6 @@ class TabPane extends PureComponent {
 
       return false;
     };
-    /* istanbul ignore next */
-
-
-    this.hideScroll = () => {
-      if (this.ref && this.ref.current) {
-        this.ref.current.style.overflow = 'hidden';
-        this.isAnimating = true;
-      }
-    };
-    /* istanbul ignore next */
-
-
-    this.autoScroll = () => {
-      if (this.ref && this.ref.current) {
-        this.ref.current.style.overflow = '';
-        this.isAnimating = false;
-      }
-    };
 
     this.shouldRender = () => {
       const {
@@ -72,14 +52,11 @@ class TabPane extends PureComponent {
     };
   }
 
-  componentDidMount() {
-    this.lastActiveKey = this.context.activeKey;
-  }
-
   render() {
     const {
       tabPaneMotion: motion,
-      tabPosition
+      tabPosition,
+      prevActiveKey
     } = this.context;
 
     const _a = this.props,
@@ -98,6 +75,27 @@ class TabPane extends PureComponent {
       [cssClasses.TABS_PANE]: true
     });
     const shouldRender = this.shouldRender();
+
+    const startClassName = (() => {
+      const direction = this.getDirection(this.context.activeKey, itemKey, this.context.panes, prevActiveKey);
+
+      if (tabPosition === 'top') {
+        if (direction) {
+          return cssClasses.TABS_PANE_ANIMATE_RIGHT_SHOW;
+        } else {
+          return cssClasses.TABS_PANE_ANIMATE_LEFT_SHOW;
+        }
+      } else {
+        if (direction) {
+          return cssClasses.TABS_PANE_ANIMATE_BOTTOM_SHOW;
+        } else {
+          return cssClasses.TABS_PANE_ANIMATE_TOP_SHOW;
+        }
+      }
+    })();
+
+    const isActivatedBecauseOtherTabPaneRemoved = !this.context.panes.find(tabPane => tabPane.itemKey === prevActiveKey);
+    const hasMotion = motion && active && !isActivatedBecauseOtherTabPaneRemoved && !this.context.forceDisableMotion;
     return /*#__PURE__*/React.createElement("div", Object.assign({
       ref: this.ref,
       role: "tabpanel",
@@ -109,16 +107,20 @@ class TabPane extends PureComponent {
       tabIndex: 0
     }, getDataAttr(restProps), {
       "x-semi-prop": "children"
-    }), motion ? /*#__PURE__*/React.createElement(TabPaneTransition, {
-      direction: this.getDirection(this.context.activeKey, itemKey, this.context.panes),
-      motion: motion,
-      mode: tabPosition === 'top' ? 'horizontal' : 'vertical',
-      state: active ? 'enter' : 'leave'
-    }, transitionStyle => /*#__PURE__*/React.createElement("div", {
-      className: "".concat(cssClasses.TABS_PANE_MOTION_OVERLAY),
-      style: Object.assign({}, transitionStyle),
-      "x-semi-prop": "children"
-    }, shouldRender ? children : null)) : shouldRender ? children : null);
+    }), /*#__PURE__*/React.createElement(CSSAnimation, {
+      motion: hasMotion,
+      animationState: active ? "enter" : "leave",
+      startClassName: startClassName
+    }, _ref => {
+      let {
+        animationClassName,
+        animationEventsNeedBind
+      } = _ref;
+      return /*#__PURE__*/React.createElement("div", Object.assign({
+        className: "".concat(cssClasses.TABS_PANE_MOTION_OVERLAY, " ").concat(animationClassName),
+        "x-semi-prop": "children"
+      }, animationEventsNeedBind), shouldRender ? children : null);
+    }));
   }
 
 }

package/lib/es/tabs/index.d.ts

@@ -4,11 +4,13 @@ import TabsFoundation, { TabsAdapter } from '@douyinfe/semi-foundation/lib/es/ta
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/tabs/tabs.css';
 import TabPane from './TabPane';
-import { TabsProps, PlainTab } from './interface';
+import { PlainTab, TabsProps } from './interface';
 export * from './interface';
 export interface TabsState {
     activeKey: string;
     panes: Array<PlainTab>;
+    prevActiveKey: string | null;
+    forceDisableMotion: boolean;
 }
 declare class Tabs extends BaseComponent<TabsProps, TabsState> {
     static TabPane: typeof TabPane;
@@ -29,7 +31,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
         tabBarExtraContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         tabBarStyle: PropTypes.Requireable<object>;
         tabList: PropTypes.Requireable<any[]>;
-        tabPaneMotion: PropTypes.Requireable<boolean | object>;
+        tabPaneMotion: PropTypes.Requireable<boolean>;
         tabPosition: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
         onTabClose: PropTypes.Requireable<(...args: any[]) => any>;
@@ -42,7 +44,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
     constructor(props: TabsProps);
     get adapter(): TabsAdapter<TabsProps, TabsState>;
     static getDerivedStateFromProps(props: TabsProps, state: TabsState): Partial<TabsState>;
-    componentDidUpdate(prevProps: TabsProps): void;
+    componentDidUpdate(prevProps: TabsProps, prevState: TabsState): void;
     setContentRef: RefCallback<HTMLDivElement>;
     onTabClick: (activeKey: string, event: MouseEvent<HTMLDivElement>) => void;
     rePosChildren: (children: ReactElement[], activeKey: string) => ReactElement[];

package/lib/es/tabs/index.js

@@ -85,7 +85,9 @@ class Tabs extends BaseComponent {
     this.foundation = new TabsFoundation(this.adapter);
     this.state = {
       activeKey: this.foundation.getDefaultActiveKey(),
-      panes: []
+      panes: [],
+      prevActiveKey: null,
+      forceDisableMotion: false
     };
     this.contentRef = /*#__PURE__*/createRef();
     this.contentHeight = 'auto';
@@ -218,13 +220,14 @@ class Tabs extends BaseComponent {
     const states = {};
 
     if (!isNullOrUndefined(props.activeKey) && props.activeKey !== state.activeKey) {
+      state.prevActiveKey = state.activeKey;
       states.activeKey = props.activeKey;
     }
 
     return states;
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     // Panes state acts on tab bar, no need to compare TabPane children
     const prevChildrenProps = React.Children.toArray(prevProps.children).map(child => _pick( /*#__PURE__*/isValidElement(child) ? child.props : null, panePickKeys));
     const nowChildrenProps = React.Children.toArray(this.props.children).map(child => _pick( /*#__PURE__*/isValidElement(child) ? child.props : null, panePickKeys));
@@ -232,6 +235,23 @@ class Tabs extends BaseComponent {
 
     if (!_isEqual(this.props.tabList, prevProps.tabList)) {
       this.foundation.handleTabListChange();
+    }
+
+    if (prevState.activeKey !== this.state.activeKey && prevState.activeKey !== this.state.prevActiveKey) {
+      this.setState({
+        prevActiveKey: prevState.activeKey
+      });
+    }
+
+    if (prevProps.activeKey !== this.props.activeKey) {
+      const newAddedPanelItemKey = (() => {
+        const prevItemKeys = new Set(prevChildrenProps.map(p => p.itemKey));
+        return nowChildrenProps.map(p => p.itemKey).filter(itemKey => !prevItemKeys.has(itemKey));
+      })();
+
+      this.setState({
+        forceDisableMotion: newAddedPanelItemKey.includes(this.props.activeKey)
+      });
     } // children变化，tabList方式使用时，啥也不用做
     // children变化，非tabList方式使用，需要重新取activeKey。TabPane可能是异步更新的，若不重新取，未设activeKey时，第一个不会自动激活
     // children changed: do nothing in tabList case
@@ -301,7 +321,9 @@ class Tabs extends BaseComponent {
         lazyRender,
         panes,
         tabPaneMotion,
-        tabPosition
+        tabPosition,
+        prevActiveKey: this.state.prevActiveKey,
+        forceDisableMotion: this.state.forceDisableMotion
       }
     }, /*#__PURE__*/React.createElement("div", {
       ref: this.setContentRef,
@@ -330,7 +352,7 @@ Tabs.propTypes = {
   tabBarExtraContent: PropTypes.node,
   tabBarStyle: PropTypes.object,
   tabList: PropTypes.array,
-  tabPaneMotion: PropTypes.oneOfType([PropTypes.bool, PropTypes.object, PropTypes.func]),
+  tabPaneMotion: PropTypes.bool,
   tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
   type: PropTypes.oneOf(strings.TYPE_MAP),
   onTabClose: PropTypes.func,

package/lib/es/tabs/interface.d.ts

@@ -78,4 +78,6 @@ export interface TabContextValue {
     panes?: Array<PlainTab>;
     tabPaneMotion?: boolean;
     tabPosition?: TabPosition;
+    prevActiveKey?: string | null;
+    forceDisableMotion?: boolean;
 }

package/lib/es/tag/group.d.ts

@@ -9,6 +9,7 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
         size: string;
         avatarShape: string;
         onTagClose: () => any;
+        onPlusNMouseEnter: () => any;
     };
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/es/tag/group.js

@@ -12,7 +12,8 @@ export default class TagGroup extends PureComponent {
     const {
       size,
       showPopover,
-      popoverProps
+      popoverProps,
+      onPlusNMouseEnter
     } = this.props;
     let nTag = /*#__PURE__*/React.createElement(Tag, {
       closable: false,
@@ -21,7 +22,8 @@ export default class TagGroup extends PureComponent {
       style: {
         backgroundColor: 'transparent'
       },
-      key: "_+n"
+      key: "_+n",
+      onMouseEnter: onPlusNMouseEnter
     }, "+", n);
 
     if (showPopover) {
@@ -133,7 +135,8 @@ TagGroup.defaultProps = {
   className: '',
   size: tagSize[0],
   avatarShape: 'square',
-  onTagClose: () => undefined
+  onTagClose: () => undefined,
+  onPlusNMouseEnter: () => undefined
 };
 TagGroup.propTypes = {
   children: PropTypes.node,

package/lib/es/tag/index.d.ts

@@ -10,7 +10,7 @@ export default class Tag extends Component<TagProps, TagState> {
     static defaultProps: TagProps;
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        tagKey: PropTypes.Requireable<string | number>;
+        tagKey: PropTypes.Requireable<NonNullable<string | number>>;
         size: PropTypes.Requireable<string>;
         color: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;