@douyinfe/semi-ui 2.3.0 → 2.4.1

package/lib/es/input/textarea.js

@@ -241,19 +241,21 @@ class TextArea extends BaseComponent {
       minLength: stateMinLength
     } = this.state;
     const wrapperCls = cls(className, "".concat(prefixCls, "-textarea-wrapper"), {
-      ["".concat(prefixCls, "-textarea-wrapper-disabled")]: disabled || readonly,
+      ["".concat(prefixCls, "-textarea-wrapper-disabled")]: disabled,
+      ["".concat(prefixCls, "-textarea-wrapper-readonly")]: readonly,
       [_concatInstanceProperty(_context = "".concat(prefixCls, "-textarea-wrapper-")).call(_context, validateStatus)]: Boolean(validateStatus),
       ["".concat(prefixCls, "-textarea-wrapper-focus")]: isFocus // [`${prefixCls}-textarea-wrapper-resize`]: !autosize && resize,
 
     }); // const ref = this.props.forwardRef || this.textAreaRef;
 
     const itemCls = cls("".concat(prefixCls, "-textarea"), {
-      ["".concat(prefixCls, "-textarea-disabled")]: disabled || readonly,
+      ["".concat(prefixCls, "-textarea-disabled")]: disabled,
+      ["".concat(prefixCls, "-textarea-readonly")]: readonly,
       ["".concat(prefixCls, "-textarea-autosize")]: autosize,
       ["".concat(prefixCls, "-textarea-showClear")]: showClear
     });
 
-    const itemProps = _Object$assign(_Object$assign({}, _omit(rest, 'insetLabel', 'getValueLength', 'onClear', 'showClear')), {
+    const itemProps = _Object$assign(_Object$assign({}, _omit(rest, 'insetLabel', 'insetLabelId', 'getValueLength', 'onClear', 'showClear')), {
       className: itemCls,
       disabled,
       readOnly: readonly,

package/lib/es/inputNumber/index.js

@@ -412,9 +412,10 @@ class InputNumber extends BaseComponent {
       innerButtons,
       style,
       onNumberChange,
-      keepFocus
+      keepFocus,
+      defaultValue
     } = _a,
-          rest = __rest(_a, ["disabled", "className", "prefixCls", "min", "max", "step", "shiftStep", "precision", "formatter", "parser", "forwardedRef", "onUpClick", "onDownClick", "pressInterval", "pressTimeout", "suffix", "size", "hideButtons", "innerButtons", "style", "onNumberChange", "keepFocus"]);
+          rest = __rest(_a, ["disabled", "className", "prefixCls", "min", "max", "step", "shiftStep", "precision", "formatter", "parser", "forwardedRef", "onUpClick", "onDownClick", "pressInterval", "pressTimeout", "suffix", "size", "hideButtons", "innerButtons", "style", "onNumberChange", "keepFocus", "defaultValue"]);
 
     const {
       value,

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

@@ -5,7 +5,7 @@ import ListItem from './item';
 import { Grid } from './list-context';
 import BaseComponent from '../_base/baseComponent';
 export { ListItemProps } from './item';
-export interface ListProps {
+export interface ListProps<T> {
     style?: React.CSSProperties;
     className?: string;
     bordered?: boolean;
@@ -15,15 +15,15 @@ export interface ListProps {
     size?: 'small' | 'large' | 'default';
     split?: boolean;
     emptyContent?: React.ReactNode;
-    dataSource?: any[];
-    renderItem?: (item: any, ind: number) => React.ReactNode;
+    dataSource?: T[];
+    renderItem?: (item: T, ind: number) => React.ReactNode;
     grid?: Grid;
     loading?: boolean;
     loadMore?: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLLIElement>;
     onRightClick?: React.MouseEventHandler<HTMLLIElement>;
 }
-declare class List extends BaseComponent<ListProps> {
+declare class List<T = any> extends BaseComponent<ListProps<T>> {
     static Item: typeof ListItem;
     static propTypes: {
         style: PropTypes.Requireable<object>;

package/lib/es/navigation/Item.js

@@ -176,7 +176,7 @@ export default class NavItem extends BaseComponent {
     } else {
       let placeholderIcons = null;
 
-      if (mode === strings.MODE_VERTICAL && !limitIndent) {
+      if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
         const iconAmount = icon && !indent ? level : level - 1;
         placeholderIcons = _times(iconAmount, () => this.renderIcon(null, strings.ICON_POS_RIGHT, false));
       }

package/lib/es/navigation/SubNav.js

@@ -200,7 +200,7 @@ export default class SubNav extends BaseComponent {
 
     let placeholderIcons = null;
 
-    if (mode === strings.MODE_VERTICAL && !limitIndent) {
+    if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
       /* Different icons' amount means different indents.*/
       const iconAmount = icon && !indent ? level : level - 1;
       placeholderIcons = _times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, undefined, index));

package/lib/es/scrollList/scrollItem.d.ts

@@ -3,7 +3,10 @@ import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { Item, ScrollItemAdapter } from '@douyinfe/semi-foundation/lib/es/scrollList/itemFoundation';
 import { Motion } from '../_base/base';
-declare type DebounceSelectFn = (e: React.UIEvent, newSelectedNode: HTMLElement) => void;
+interface DebounceSelectFn {
+    (e: React.UIEvent, newSelectedNode: HTMLElement): void;
+    cancel(): void;
+}
 export interface ScrollItemProps<T extends Item> {
     mode?: string;
     cycled?: boolean;
@@ -52,6 +55,7 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
     debouncedSelect: DebounceSelectFn;
     constructor(props?: {});
     get adapter(): ScrollItemAdapter<ScrollItemProps<T>, ScrollItemState, T>;
+    componentWillUnmount(): void;
     componentDidMount(): void;
     componentDidUpdate(prevProps: ScrollItemProps<T>): void;
     _cacheNode: (name: string, node: Element) => Element;

package/lib/es/scrollList/scrollItem.js

@@ -429,6 +429,13 @@ export default class ScrollItem extends BaseComponent {
     });
   }
 
+  componentWillUnmount() {
+    if (this.props.cycled) {
+      this.throttledAdjustList.cancel();
+      this.debouncedSelect.cancel();
+    }
+  }
+
   componentDidMount() {
     this.foundation.init();
     const {

package/lib/es/select/index.js

@@ -506,7 +506,7 @@ class Select extends BaseComponent {
         role: "button",
         "aria-label": "Use the input box to create an optional item",
         onClick: e => this.onSelect(option, optionIndex, e),
-        key: new Date().valueOf()
+        key: option.key || option.label
       }, customCreateItem)
     );
   }

package/lib/es/table/Table.js

@@ -1238,15 +1238,18 @@ class Table extends BaseComponent {
       const _dataSource = [...dataSource];
       const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(_dataSource, stateQueries);
       this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
-      states.dataSource = filteredSortedDataSource; // when dataSource has change, should reset currentPage
-
-      states.pagination = _isObject(statePagination) ? _Object$assign(_Object$assign({}, statePagination), {
-        currentPage: _isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1
-      }) : statePagination;
+      states.dataSource = filteredSortedDataSource;
 
       if (this.props.groupBy) {
         states.groups = null;
       }
+    } // when dataSource has change, should reset currentPage
+
+
+    if (dataSource !== prevProps.dataSource) {
+      states.pagination = _isObject(statePagination) ? _Object$assign(_Object$assign({}, statePagination), {
+        currentPage: _isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1
+      }) : statePagination;
     }
 
     if (_Object$keys(states).length) {
@@ -1433,6 +1436,7 @@ class Table extends BaseComponent {
     return /*#__PURE__*/React.createElement("div", {
       ref: this.rootWrapRef,
       className: classnames(className, "".concat(prefixCls, "-wrapper")),
+      "data-column-fixed": anyColumnFixed,
       style: wrapStyle,
       id: id
     }, /*#__PURE__*/React.createElement(TableContextProvider, _Object$assign({}, tableContextValue), /*#__PURE__*/React.createElement(Spin, {

package/lib/es/timePicker/TimePicker.d.ts

@@ -69,6 +69,7 @@ export declare type TimePickerProps = {
     zIndex?: number | string;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onChange?: TimePickerAdapter['notifyChange'];
+    onChangeWithDateFirst?: boolean;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onOpenChange?: (open: boolean) => void;
 };
@@ -169,6 +170,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         onFocus: (...args: any[]) => void;
         onBlur: (...args: any[]) => void;
         onChange: (...args: any[]) => void;
+        onChangeWithDateFirst: boolean;
         use12Hours: boolean;
         focusOnOpen: boolean;
         onKeyDown: (...args: any[]) => void;

package/lib/es/timePicker/TimePicker.js

@@ -149,9 +149,7 @@ export default class TimePicker extends BaseComponent {
       notifyOpenChange: function () {
         return _this2.props.onOpenChange(...arguments);
       },
-      notifyChange: function () {
-        return _this2.props.onChange && _this2.props.onChange(...arguments);
-      },
+      notifyChange: (agr1, arg2) => this.props.onChange && this.props.onChange(agr1, arg2),
       notifyFocus: function () {
         return _this2.props.onFocus && _this2.props.onFocus(...arguments);
       },
@@ -298,6 +296,7 @@ export default class TimePicker extends BaseComponent {
       panelFooter,
       rangeSeparator,
       onOpenChange,
+      onChangeWithDateFirst,
       popupClassName: propPopupClassName,
       hideDisabledOptions,
       use12Hours,
@@ -309,7 +308,7 @@ export default class TimePicker extends BaseComponent {
       motion,
       autoAdjustOverflow
     } = _a,
-          rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "insetLabelId", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow"]);
+          rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "insetLabelId", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "onChangeWithDateFirst", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow"]);
 
     const format = this.foundation.getDefaultFormatIfNeed();
     const position = this.foundation.getPosition();
@@ -469,6 +468,7 @@ TimePicker.defaultProps = _Object$assign({
   onFocus: _noop,
   onBlur: _noop,
   onChange: _noop,
+  onChangeWithDateFirst: true,
   use12Hours: false,
   focusOnOpen: false,
   onKeyDown: _noop,

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

@@ -91,6 +91,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         onFocus: (...args: any[]) => void;
         onBlur: (...args: any[]) => void;
         onChange: (...args: any[]) => void;
+        onChangeWithDateFirst: boolean;
         use12Hours: boolean;
         focusOnOpen: boolean;
         onKeyDown: (...args: any[]) => void;

package/lib/es/tree/treeNode.js

@@ -1,3 +1,4 @@
+import _isEmpty from "lodash/isEmpty";
 import _get from "lodash/get";
 import _isString from "lodash/isString";
 import _isFunction from "lodash/isFunction";
@@ -470,7 +471,14 @@ export default class TreeNode extends PureComponent {
           ref: this.setRef
         }, dragProps));
       } else {
-        return customLabel;
+        if (_isEmpty(style)) {
+          return customLabel;
+        } else {
+          // In virtualization, props.style will contain location information
+          return /*#__PURE__*/React.cloneElement(customLabel, {
+            style: _Object$assign(_Object$assign({}, _get(customLabel, ['props', 'style'])), style)
+          });
+        }
       }
     }
 

package/lib/es/treeSelect/index.js

@@ -17,7 +17,7 @@ import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import TreeSelectFoundation from '@douyinfe/semi-foundation/lib/es/treeSelect/foundation';
-import { convertDataToEntities, flattenTreeData, calcExpandedKeysForValues, calcMotionKeys, findKeysForValues, calcCheckedKeys, calcExpandedKeys, getValueOrKey, normalizeKeyList, calcDisabledKeys, normalizeValue } from '@douyinfe/semi-foundation/lib/es/tree/treeUtil';
+import { convertDataToEntities, flattenTreeData, calcExpandedKeysForValues, calcMotionKeys, findKeysForValues, calcCheckedKeys, calcExpandedKeys, getValueOrKey, normalizeKeyList, calcDisabledKeys, normalizeValue, updateKeys } from '@douyinfe/semi-foundation/lib/es/tree/treeUtil';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/treeSelect/constants';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
 import { FixedSizeList as VirtualList } from 'react-window';
@@ -896,7 +896,7 @@ class TreeSelect extends BaseComponent {
     } // if treeData keys changes, we won't show animation
 
 
-    if (treeData && props.motion && !_isEqual(new _Set(_Object$keys(newState.keyEntities)), new _Set(_Object$keys(prevState.keyEntities)))) {
+    if (treeData && props.motion && !_isEqual(_Object$keys(newState.keyEntities), _Object$keys(prevState.keyEntities))) {
       if (prevProps && props.motion) {
         newState.motionKeys = new _Set([]);
         newState.motionType = null;
@@ -942,7 +942,11 @@ class TreeSelect extends BaseComponent {
         newState.selectedKeys = findKeysForValues(normalizeValue(props.defaultValue, withObject), valueEntities, isMultiple);
       } else if (treeData) {
         // If `treeData` changed, we also need check it
-        newState.selectedKeys = findKeysForValues(normalizeValue(props.value, withObject) || '', valueEntities, isMultiple);
+        if (props.value) {
+          newState.selectedKeys = findKeysForValues(normalizeValue(props.value, withObject) || '', valueEntities, isMultiple);
+        } else {
+          newState.selectedKeys = updateKeys(prevState.selectedKeys, keyEntities);
+        }
       }
     } else {
       // checkedKeys: multiple mode controlled || data changed
@@ -954,7 +958,11 @@ class TreeSelect extends BaseComponent {
         checkedKeyValues = findKeysForValues(normalizeValue(props.defaultValue, withObject), valueEntities, isMultiple);
       } else if (treeData) {
         // If `treeData` changed, we also need check it
-        checkedKeyValues = findKeysForValues(normalizeValue(props.value, withObject) || [], valueEntities, isMultiple);
+        if (props.value) {
+          checkedKeyValues = findKeysForValues(normalizeValue(props.value, withObject) || [], valueEntities, isMultiple);
+        } else {
+          checkedKeyValues = updateKeys(prevState.checkedKeys, keyEntities);
+        }
       }
 
       if (checkedKeyValues) {

package/lib/es/typography/util.js

@@ -62,7 +62,6 @@ const getRenderText = function (originEle, rows) {
   ellipsisContainer.style.zIndex = '-1000'; // clean up css overflow
 
   ellipsisContainer.style.textOverflow = 'clip';
-  ellipsisContainer.style.whiteSpace = 'normal';
   ellipsisContainer.style.webkitLineClamp = 'none'; // Render fake container
 
   ReactDOM.render( /*#__PURE__*/React.createElement(React.Fragment, null), ellipsisContainer); // Check if ellipsis in measure div is height enough for content

package/list/index.tsx

@@ -14,7 +14,7 @@ import BaseComponent from '../_base/baseComponent';
 
 export { ListItemProps } from './item';
 
-export interface ListProps {
+export interface ListProps<T> {
     style?: React.CSSProperties;
     className?: string;
     bordered?: boolean;
@@ -24,8 +24,8 @@ export interface ListProps {
     size?: 'small' | 'large' | 'default';
     split?: boolean;
     emptyContent?: React.ReactNode;
-    dataSource?: any[];
-    renderItem?: (item: any, ind: number) => React.ReactNode;
+    dataSource?: T[];
+    renderItem?: (item: T, ind: number) => React.ReactNode;
     grid?: Grid;
     loading?: boolean;
     loadMore?: React.ReactNode;
@@ -35,7 +35,7 @@ export interface ListProps {
 
 const prefixCls = cssClasses.PREFIX;
 
-class List extends BaseComponent<ListProps> {
+class List<T = any> extends BaseComponent<ListProps<T>> {
     static Item = ListItem;
 
     static propTypes = {
@@ -170,4 +170,4 @@ class List extends BaseComponent<ListProps> {
     }
 }
 
-export default List;
+export default List;

package/navigation/Item.tsx

@@ -195,7 +195,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             itemChildren = children;
         } else {
             let placeholderIcons = null;
-            if (mode === strings.MODE_VERTICAL && !limitIndent) {
+            if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
                 const iconAmount = (icon && !indent) ? level : level - 1;
                 placeholderIcons = times(iconAmount, () => this.renderIcon(null, strings.ICON_POS_RIGHT, false));
             }

package/navigation/SubNav.tsx

@@ -237,7 +237,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         }
 
         let placeholderIcons = null;
-        if (mode === strings.MODE_VERTICAL && !limitIndent) {
+        if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
             /* Different icons' amount means different indents.*/
             const iconAmount = (icon && !indent) ? level : level - 1;
             placeholderIcons = times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, undefined, index));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.3.0",
+    "version": "2.4.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,11 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation-react": "2.3.0",
-        "@douyinfe/semi-foundation": "2.3.0",
-        "@douyinfe/semi-icons": "2.3.0",
-        "@douyinfe/semi-illustrations": "2.3.0",
-        "@douyinfe/semi-theme-default": "2.3.0",
+        "@douyinfe/semi-animation": "2.4.1",
+        "@douyinfe/semi-animation-react": "2.4.1",
+        "@douyinfe/semi-foundation": "2.4.1",
+        "@douyinfe/semi-icons": "2.4.1",
+        "@douyinfe/semi-illustrations": "2.4.1",
+        "@douyinfe/semi-theme-default": "2.4.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -68,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "456b90e3f3501dd92e9d0b55bb9c8c86312837aa",
+    "gitHead": "c69c466ecd14aeeda847473e97dad2ec313f09fa",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.3.0",
+        "@douyinfe/semi-scss-compile": "2.4.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/scrollList/scrollItem.tsx

@@ -13,8 +13,10 @@ import { Motion } from '../_base/base';
 const msPerFrame = 1000 / 60;
 const blankReg = /^\s*$/;
 const wheelMode = 'wheel';
-
-type DebounceSelectFn = (e: React.UIEvent, newSelectedNode: HTMLElement) => void;
+interface DebounceSelectFn {
+    (e: React.UIEvent, newSelectedNode: HTMLElement): void;
+    cancel(): void
+}
 export interface ScrollItemProps<T extends Item> {
     mode?: string;
     cycled?: boolean;
@@ -110,7 +112,12 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
             scrollToCenter: this.scrollToCenter,
         };
     }
-
+    componentWillUnmount(){
+        if (this.props.cycled) {
+            this.throttledAdjustList.cancel();
+            this.debouncedSelect.cancel();
+        }
+    }
     componentDidMount() {
         this.foundation.init();
 

package/select/index.tsx

@@ -739,7 +739,12 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
         return (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus
-            <div role="button" aria-label="Use the input box to create an optional item" onClick={e => this.onSelect(option, optionIndex, e)} key={new Date().valueOf()}>
+            <div
+                role="button"
+                aria-label="Use the input box to create an optional item"
+                onClick={e => this.onSelect(option, optionIndex, e)}
+                key={option.key || option.label}
+            >
                 {customCreateItem}
             </div>
         );

package/table/Table.tsx

@@ -534,7 +534,6 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             this.foundation.initExpandedRowKeys({ groups: stateGroups });
         }
 
-
         /**
          * After dataSource is updated || (cachedColumns || cachedChildren updated)
          * 1. Cache filtered sorted data and a collection of data rows, stored in this
@@ -547,17 +546,20 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(_dataSource, stateQueries);
             this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
             states.dataSource = filteredSortedDataSource;
-            // when dataSource has change, should reset currentPage
-            states.pagination = isObject(statePagination) ? {
-                ...statePagination,
-                currentPage: isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1,
-            } : statePagination;
 
             if (this.props.groupBy) {
                 states.groups = null;
             }
         }
 
+        // when dataSource has change, should reset currentPage
+        if (dataSource !== prevProps.dataSource) {
+            states.pagination = isObject(statePagination) ? {
+                ...statePagination,
+                currentPage: isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1,
+            } : statePagination;
+        }
+
         if (Object.keys(states).length) {
             const {
                 // eslint-disable-next-line @typescript-eslint/no-shadow
@@ -1372,6 +1374,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             <div
                 ref={this.rootWrapRef}
                 className={classnames(className, `${prefixCls}-wrapper`)}
+                data-column-fixed={anyColumnFixed}
                 style={wrapStyle}
                 id={id}
             >

package/table/_story/table.stories.js

@@ -76,6 +76,8 @@ export { default as ScrollBar } from './ScrollBar';
 export { default as TableSpan } from './TableSpan';
 export { default as FixRenderReturnProps } from './FixRenderReturnProps';
 export { default as WarnColumnWithoutDataIndex } from './WarnColumnWithoutDataIndex';
+export { default as FixedColumnsChange } from './v2/FixedColumnsChange';
+export { default as FixedZIndex } from './v2/FixedZIndex';
 
 // empty table
 

package/table/_story/v2/FixedColumnsChange/index.jsx

@@ -0,0 +1,104 @@
+import React, { useState, useMemo } from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+const DAY = 24 * 60 * 60 * 1000;
+const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+
+const getData = () => {
+    const data = [];
+    for (let i = 0; i < 46; i++) {
+        const isSemiDesign = i % 2 === 0;
+        const randomNumber = (i * 1000) % 199;
+        data.push({
+            key: '' + i,
+            name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+            owner: isSemiDesign ? '姜鹏志' : '郝宣',
+            size: randomNumber,
+            updateTime: new Date('2022-01-01').valueOf() + randomNumber * DAY,
+            avatarBg: isSemiDesign ? 'grey' : 'red'
+        });
+    }
+    return data;
+};
+
+const data = getData();
+
+/**
+ * fix https://github.com/DouyinFE/semi-design/issues/381
+ */
+App.storyName = 'fixed columns change';
+function App() {
+    const [dataSource, setData] = useState(data);
+    const [rowKeys, setRowKeys] = useState([]);
+
+    const columns = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+            filters: [
+                {
+                    text: 'Semi Design 设计稿',
+                    value: 'Semi Design 设计稿',
+                },
+                {
+                    text: 'Semi Pro 设计稿',
+                    value: 'Semi Pro 设计稿',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+            sorter: (a, b) => a.size - b.size > 0 ? 1 : -1,
+            render: (text) => `${text} KB`
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>{typeof text === 'string' && text.slice(0, 1)}</Avatar>
+                        {text}
+                    </div>
+                );
+            }
+        },
+        {
+            title: '更新日期',
+            dataIndex: 'updateTime',
+            sorter: (a, b) => a.updateTime - b.updateTime > 0 ? 1 : -1,
+            render: (value) => {
+                return dateFns.format(new Date(value), 'yyyy-MM-dd');
+            }
+        }
+    ];
+
+    return (
+        <Table
+            columns={columns}
+            dataSource={dataSource}
+            pagination={{
+                pageSize: 5,
+            }}
+            rowSelection={{
+                onChange: rowKeys => setRowKeys(rowKeys),
+                selectedRowKeys: rowKeys,
+            }}
+            scroll={{ y: 300 }}
+        />
+    );
+}
+
+export default App;