@douyinfe/semi-ui 2.5.0-beta.0 → 2.5.0

package/lib/cjs/datePicker/datePicker.js

@@ -434,6 +434,10 @@ class DatePicker extends _baseComponent.default {
 
     if (prevProps.open !== this.props.open) {
       this.foundation.initPanelOpenStatus();
+
+      if (!this.props.open) {
+        this.foundation.clearRangeInputFocus();
+      }
     }
   }
 

package/lib/cjs/select/index.d.ts

@@ -243,8 +243,8 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     renderOption(option: OptionProps, optionIndex: number, style?: React.CSSProperties): any;
     renderCreateOption(option: OptionProps, isFocused: boolean, optionIndex: number, style: React.CSSProperties): JSX.Element;
     onOptionHover(optionIndex: number): void;
-    renderWithGroup(visibileOptions: OptionProps[]): JSX.Element[];
-    renderVirtualizeList(visibileOptions: OptionProps[]): JSX.Element;
+    renderWithGroup(visibleOptions: OptionProps[]): JSX.Element[];
+    renderVirtualizeList(visibleOptions: OptionProps[]): JSX.Element;
     renderOptions(children?: React.ReactNode): JSX.Element;
     renderSingleSelection(selections: Map<OptionProps['label'], any>, filterable: boolean): JSX.Element;
     renderMultipleSelection(selections: Map<OptionProps['label'], any>, filterable: boolean): JSX.Element;

package/lib/cjs/select/index.js

@@ -56,7 +56,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _context15 = _interopRequireDefault(require("../configProvider/context"));
+var _context16 = _interopRequireDefault(require("../configProvider/context"));
 
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/select/foundation"));
 
@@ -347,11 +347,19 @@ class Select extends _baseComponent.default {
           el.focus();
         } catch (error) {}
       },
-      updateScrollTop: () => {
-        var _context9, _context10;
+      updateScrollTop: index => {
+        var _context10, _context11;
 
         // eslint-disable-next-line max-len
-        let destNode = document.querySelector((0, _concat.default)(_context9 = (0, _concat.default)(_context10 = "#".concat(prefixcls, "-")).call(_context10, this.selectOptionListID, " .")).call(_context9, prefixcls, "-option-selected"));
+        let optionClassName = ".".concat(prefixcls, "-option-selected");
+
+        if (index !== undefined) {
+          var _context9;
+
+          optionClassName = (0, _concat.default)(_context9 = ".".concat(prefixcls, "-option:nth-child(")).call(_context9, index, ")");
+        }
+
+        let destNode = document.querySelector((0, _concat.default)(_context10 = (0, _concat.default)(_context11 = "#".concat(prefixcls, "-")).call(_context11, this.selectOptionListID, " ")).call(_context10, optionClassName));
 
         if ((0, _isArray.default)(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -379,10 +387,10 @@ class Select extends _baseComponent.default {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _context11, _context12;
+    var _context12, _context13;
 
-    const prevChildrenKeys = (0, _map2.default)(_context11 = _react.default.Children.toArray(prevProps.children)).call(_context11, child => child.key);
-    const nowChildrenKeys = (0, _map2.default)(_context12 = _react.default.Children.toArray(this.props.children)).call(_context12, child => child.key);
+    const prevChildrenKeys = (0, _map2.default)(_context12 = _react.default.Children.toArray(prevProps.children)).call(_context12, child => child.key);
+    const nowChildrenKeys = (0, _map2.default)(_context13 = _react.default.Children.toArray(this.props.children)).call(_context13, child => child.key);
     let isOptionsChanged = false;
 
     if (!(0, _isEqual2.default)(prevChildrenKeys, nowChildrenKeys) || !(0, _isEqual2.default)(prevProps.optionList, this.props.optionList)) {
@@ -572,33 +580,29 @@ class Select extends _baseComponent.default {
     this.foundation.handleOptionMouseEnter(optionIndex);
   }
 
-  renderWithGroup(visibileOptions) {
+  renderWithGroup(visibleOptions) {
     const content = [];
     const groupStatus = new _map.default();
-    (0, _forEach.default)(visibileOptions).call(visibileOptions, (option, optionIndex) => {
+    (0, _forEach.default)(visibleOptions).call(visibleOptions, (option, optionIndex) => {
       const parentGroup = option._parentGroup;
       const optionContent = this.renderOption(option, optionIndex);
 
-      if (parentGroup && groupStatus.has(parentGroup.label)) {
-        // group content already insert
-        content.push(optionContent);
-      } else if (parentGroup) {
+      if (parentGroup && !groupStatus.has(parentGroup.label)) {
+        // when use with OptionGroup and group content not already insert
         const groupContent = /*#__PURE__*/_react.default.createElement(_optionGroup.default, (0, _assign.default)({}, parentGroup, {
           key: parentGroup.label
         }));
 
         groupStatus.set(parentGroup.label, true);
         content.push(groupContent);
-        content.push(optionContent);
-      } else {
-        // when not use with OptionGroup
-        content.push(optionContent);
       }
+
+      content.push(optionContent);
     });
     return content;
   }
 
-  renderVirtualizeList(visibileOptions) {
+  renderVirtualizeList(visibleOptions) {
     const {
       virtualize
     } = this.props;
@@ -613,10 +617,10 @@ class Select extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
       ref: this.virtualizeListRef,
       height: height || _constants.numbers.LIST_HEIGHT,
-      itemCount: visibileOptions.length,
+      itemCount: visibleOptions.length,
       itemSize: itemSize,
       itemData: {
-        visibileOptions,
+        visibleOptions,
         renderOption: this.renderOption
       },
       width: width || '100%',
@@ -627,7 +631,7 @@ class Select extends _baseComponent.default {
   }
 
   renderOptions(children) {
-    var _context13;
+    var _context14;
 
     const {
       dropdownMinWidth,
@@ -647,11 +651,11 @@ class Select extends _baseComponent.default {
       multiple
     } = this.props; // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
 
-    const visibileOptions = (0, _filter.default)(options).call(options, item => item._show);
-    let listContent = this.renderWithGroup(visibileOptions);
+    const visibleOptions = (0, _filter.default)(options).call(options, item => item._show);
+    let listContent = this.renderWithGroup(visibleOptions);
 
     if (virtualize) {
-      listContent = this.renderVirtualizeList(visibileOptions);
+      listContent = this.renderVirtualizeList(visibleOptions);
     }
 
     const style = (0, _assign.default)({
@@ -663,7 +667,7 @@ class Select extends _baseComponent.default {
     });
     const isEmpty = !options.length || !(0, _some.default)(options).call(options, item => item._show);
     return /*#__PURE__*/_react.default.createElement("div", {
-      id: (0, _concat.default)(_context13 = "".concat(prefixcls, "-")).call(_context13, this.selectOptionListID),
+      id: (0, _concat.default)(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
       className: dropdownClassName,
       style: style
     }, outerTopSlot, /*#__PURE__*/_react.default.createElement("div", {
@@ -891,7 +895,7 @@ class Select extends _baseComponent.default {
   }
 
   renderSelection() {
-    var _context14;
+    var _context15;
 
     const {
       disabled,
@@ -975,7 +979,7 @@ class Select extends _baseComponent.default {
       role: "combobox",
       "aria-disabled": disabled,
       "aria-expanded": isOpen,
-      "aria-controls": (0, _concat.default)(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
+      "aria-controls": (0, _concat.default)(_context15 = "".concat(prefixcls, "-")).call(_context15, this.selectOptionListID),
       "aria-haspopup": "listbox",
       "aria-label": "select value",
       "aria-invalid": this.props['aria-invalid'],
@@ -1042,7 +1046,7 @@ class Select extends _baseComponent.default {
 
 }
 
-Select.contextType = _context15.default;
+Select.contextType = _context16.default;
 Select.Option = _option.default;
 Select.OptGroup = _optionGroup.default;
 Select.propTypes = {

package/lib/cjs/select/virtualRow.js

@@ -15,9 +15,9 @@ const VirtualRow = _ref => {
     style
   } = _ref;
   const {
-    visibileOptions
+    visibleOptions
   } = data;
-  const option = visibileOptions[index];
+  const option = visibleOptions[index];
   return data.renderOption(option, index, style);
 };
 

package/lib/cjs/tooltip/index.js

@@ -484,11 +484,15 @@ class Tooltip extends _baseComponent.default {
           }
         };
 
-        document.addEventListener('click', this.clickOutsideHandler, false);
+        document.addEventListener('mousedown', this.clickOutsideHandler, {
+          capture: true
+        });
       },
       unregisterClickOutsideHandler: () => {
         if (this.clickOutsideHandler) {
-          document.removeEventListener('click', this.clickOutsideHandler, false);
+          document.removeEventListener('mousedown', this.clickOutsideHandler, {
+            capture: true
+          });
           this.clickOutsideHandler = null;
         }
       },

package/lib/es/datePicker/datePicker.js

@@ -401,6 +401,10 @@ export default class DatePicker extends BaseComponent {
 
     if (prevProps.open !== this.props.open) {
       this.foundation.initPanelOpenStatus();
+
+      if (!this.props.open) {
+        this.foundation.clearRangeInputFocus();
+      }
     }
   }
 

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

@@ -243,8 +243,8 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     renderOption(option: OptionProps, optionIndex: number, style?: React.CSSProperties): any;
     renderCreateOption(option: OptionProps, isFocused: boolean, optionIndex: number, style: React.CSSProperties): JSX.Element;
     onOptionHover(optionIndex: number): void;
-    renderWithGroup(visibileOptions: OptionProps[]): JSX.Element[];
-    renderVirtualizeList(visibileOptions: OptionProps[]): JSX.Element;
+    renderWithGroup(visibleOptions: OptionProps[]): JSX.Element[];
+    renderVirtualizeList(visibleOptions: OptionProps[]): JSX.Element;
     renderOptions(children?: React.ReactNode): JSX.Element;
     renderSingleSelection(selections: Map<OptionProps['label'], any>, filterable: boolean): JSX.Element;
     renderMultipleSelection(selections: Map<OptionProps['label'], any>, filterable: boolean): JSX.Element;

package/lib/es/select/index.js

@@ -285,11 +285,19 @@ class Select extends BaseComponent {
           el.focus();
         } catch (error) {}
       },
-      updateScrollTop: () => {
-        var _context9, _context10;
+      updateScrollTop: index => {
+        var _context10, _context11;
 
         // eslint-disable-next-line max-len
-        let destNode = document.querySelector(_concatInstanceProperty(_context9 = _concatInstanceProperty(_context10 = "#".concat(prefixcls, "-")).call(_context10, this.selectOptionListID, " .")).call(_context9, prefixcls, "-option-selected"));
+        let optionClassName = ".".concat(prefixcls, "-option-selected");
+
+        if (index !== undefined) {
+          var _context9;
+
+          optionClassName = _concatInstanceProperty(_context9 = ".".concat(prefixcls, "-option:nth-child(")).call(_context9, index, ")");
+        }
+
+        let destNode = document.querySelector(_concatInstanceProperty(_context10 = _concatInstanceProperty(_context11 = "#".concat(prefixcls, "-")).call(_context11, this.selectOptionListID, " ")).call(_context10, optionClassName));
 
         if (_Array$isArray(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -317,11 +325,11 @@ class Select extends BaseComponent {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _context11, _context12;
+    var _context12, _context13;
 
-    const prevChildrenKeys = _mapInstanceProperty(_context11 = React.Children.toArray(prevProps.children)).call(_context11, child => child.key);
+    const prevChildrenKeys = _mapInstanceProperty(_context12 = React.Children.toArray(prevProps.children)).call(_context12, child => child.key);
 
-    const nowChildrenKeys = _mapInstanceProperty(_context12 = React.Children.toArray(this.props.children)).call(_context12, child => child.key);
+    const nowChildrenKeys = _mapInstanceProperty(_context13 = React.Children.toArray(this.props.children)).call(_context13, child => child.key);
 
     let isOptionsChanged = false;
 
@@ -515,34 +523,30 @@ class Select extends BaseComponent {
     this.foundation.handleOptionMouseEnter(optionIndex);
   }
 
-  renderWithGroup(visibileOptions) {
+  renderWithGroup(visibleOptions) {
     const content = [];
     const groupStatus = new _Map();
 
-    _forEachInstanceProperty(visibileOptions).call(visibileOptions, (option, optionIndex) => {
+    _forEachInstanceProperty(visibleOptions).call(visibleOptions, (option, optionIndex) => {
       const parentGroup = option._parentGroup;
       const optionContent = this.renderOption(option, optionIndex);
 
-      if (parentGroup && groupStatus.has(parentGroup.label)) {
-        // group content already insert
-        content.push(optionContent);
-      } else if (parentGroup) {
+      if (parentGroup && !groupStatus.has(parentGroup.label)) {
+        // when use with OptionGroup and group content not already insert
         const groupContent = /*#__PURE__*/React.createElement(OptionGroup, _Object$assign({}, parentGroup, {
           key: parentGroup.label
         }));
         groupStatus.set(parentGroup.label, true);
         content.push(groupContent);
-        content.push(optionContent);
-      } else {
-        // when not use with OptionGroup
-        content.push(optionContent);
       }
+
+      content.push(optionContent);
     });
 
     return content;
   }
 
-  renderVirtualizeList(visibileOptions) {
+  renderVirtualizeList(visibleOptions) {
     const {
       virtualize
     } = this.props;
@@ -557,10 +561,10 @@ class Select extends BaseComponent {
     return /*#__PURE__*/React.createElement(List, {
       ref: this.virtualizeListRef,
       height: height || numbers.LIST_HEIGHT,
-      itemCount: visibileOptions.length,
+      itemCount: visibleOptions.length,
       itemSize: itemSize,
       itemData: {
-        visibileOptions,
+        visibleOptions,
         renderOption: this.renderOption
       },
       width: width || '100%',
@@ -571,7 +575,7 @@ class Select extends BaseComponent {
   }
 
   renderOptions(children) {
-    var _context13;
+    var _context14;
 
     const {
       dropdownMinWidth,
@@ -591,12 +595,12 @@ class Select extends BaseComponent {
       multiple
     } = this.props; // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
 
-    const visibileOptions = _filterInstanceProperty(options).call(options, item => item._show);
+    const visibleOptions = _filterInstanceProperty(options).call(options, item => item._show);
 
-    let listContent = this.renderWithGroup(visibileOptions);
+    let listContent = this.renderWithGroup(visibleOptions);
 
     if (virtualize) {
-      listContent = this.renderVirtualizeList(visibileOptions);
+      listContent = this.renderVirtualizeList(visibleOptions);
     }
 
     const style = _Object$assign({
@@ -609,7 +613,7 @@ class Select extends BaseComponent {
     });
     const isEmpty = !options.length || !_someInstanceProperty(options).call(options, item => item._show);
     return /*#__PURE__*/React.createElement("div", {
-      id: _concatInstanceProperty(_context13 = "".concat(prefixcls, "-")).call(_context13, this.selectOptionListID),
+      id: _concatInstanceProperty(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
       className: dropdownClassName,
       style: style
     }, outerTopSlot, /*#__PURE__*/React.createElement("div", {
@@ -840,7 +844,7 @@ class Select extends BaseComponent {
   }
 
   renderSelection() {
-    var _context14;
+    var _context15;
 
     const {
       disabled,
@@ -924,7 +928,7 @@ class Select extends BaseComponent {
       role: "combobox",
       "aria-disabled": disabled,
       "aria-expanded": isOpen,
-      "aria-controls": _concatInstanceProperty(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
+      "aria-controls": _concatInstanceProperty(_context15 = "".concat(prefixcls, "-")).call(_context15, this.selectOptionListID),
       "aria-haspopup": "listbox",
       "aria-label": "select value",
       "aria-invalid": this.props['aria-invalid'],

package/lib/es/select/virtualRow.js

@@ -5,9 +5,9 @@ const VirtualRow = _ref => {
     style
   } = _ref;
   const {
-    visibileOptions
+    visibleOptions
   } = data;
-  const option = visibileOptions[index];
+  const option = visibleOptions[index];
   return data.renderOption(option, index, style);
 };
 

package/lib/es/tooltip/index.js

@@ -443,11 +443,15 @@ export default class Tooltip extends BaseComponent {
           }
         };
 
-        document.addEventListener('click', this.clickOutsideHandler, false);
+        document.addEventListener('mousedown', this.clickOutsideHandler, {
+          capture: true
+        });
       },
       unregisterClickOutsideHandler: () => {
         if (this.clickOutsideHandler) {
-          document.removeEventListener('click', this.clickOutsideHandler, false);
+          document.removeEventListener('mousedown', this.clickOutsideHandler, {
+            capture: true
+          });
           this.clickOutsideHandler = null;
         }
       },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.5.0-beta.0",
+    "version": "2.5.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.5.0-beta.0",
-        "@douyinfe/semi-animation-react": "2.5.0-beta.0",
-        "@douyinfe/semi-foundation": "2.5.0-beta.0",
-        "@douyinfe/semi-icons": "2.5.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.5.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.5.0-beta.0",
+        "@douyinfe/semi-animation": "2.5.0",
+        "@douyinfe/semi-animation-react": "2.5.0",
+        "@douyinfe/semi-foundation": "2.5.0",
+        "@douyinfe/semi-icons": "2.5.0",
+        "@douyinfe/semi-illustrations": "2.5.0",
+        "@douyinfe/semi-theme-default": "2.5.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "d71dddacba0c96004c19103f2e0d3cb59ac52857",
+    "gitHead": "856255d8b5ad895a5fee47c5920aa1835836aff0",
     "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.5.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.5.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/select/index.tsx

@@ -530,9 +530,13 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
                 }
             },
-            updateScrollTop: () => {
+            updateScrollTop: (index?: number) => {
                 // eslint-disable-next-line max-len
-                let destNode = document.querySelector(`#${prefixcls}-${this.selectOptionListID} .${prefixcls}-option-selected`) as HTMLDivElement;
+                let optionClassName = `.${prefixcls}-option-selected`;
+                if (index !== undefined) {
+                    optionClassName = `.${prefixcls}-option:nth-child(${index})`;
+                }
+                let destNode = document.querySelector(`#${prefixcls}-${this.selectOptionListID} ${optionClassName}`) as HTMLDivElement;
                 if (Array.isArray(destNode)) {
                     // eslint-disable-next-line prefer-destructuring
                     destNode = destNode[0];
@@ -754,31 +758,26 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         this.foundation.handleOptionMouseEnter(optionIndex);
     }
 
-    renderWithGroup(visibileOptions: OptionProps[]) {
+    renderWithGroup(visibleOptions: OptionProps[]) {
         const content: JSX.Element[] = [];
         const groupStatus = new Map();
 
-        visibileOptions.forEach((option, optionIndex) => {
+        visibleOptions.forEach((option, optionIndex) => {
             const parentGroup = option._parentGroup;
             const optionContent = this.renderOption(option, optionIndex);
-            if (parentGroup && groupStatus.has(parentGroup.label)) {
-                // group content already insert
-                content.push(optionContent);
-            } else if (parentGroup) {
+            if (parentGroup && !groupStatus.has(parentGroup.label)) {
+                // when use with OptionGroup and group content not already insert
                 const groupContent = <OptionGroup {...parentGroup} key={parentGroup.label} />;
                 groupStatus.set(parentGroup.label, true);
                 content.push(groupContent);
-                content.push(optionContent);
-            } else {
-                // when not use with OptionGroup
-                content.push(optionContent);
-            }
+            } 
+            content.push(optionContent);
         });
 
         return content;
     }
 
-    renderVirtualizeList(visibileOptions: OptionProps[]) {
+    renderVirtualizeList(visibleOptions: OptionProps[]) {
         const { virtualize } = this.props;
         const { direction } = this.context;
         const { height, width, itemSize } = virtualize;
@@ -787,9 +786,9 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             <List
                 ref={this.virtualizeListRef}
                 height={height || numbers.LIST_HEIGHT}
-                itemCount={visibileOptions.length}
+                itemCount={visibleOptions.length}
                 itemSize={itemSize}
-                itemData={{ visibileOptions, renderOption: this.renderOption }}
+                itemData={{ visibleOptions, renderOption: this.renderOption }}
                 width={width || '100%'}
                 style={{ direction }}
             >
@@ -814,11 +813,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         } = this.props;
 
         // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
-        const visibileOptions = options.filter(item => item._show);
+        const visibleOptions = options.filter(item => item._show);
 
-        let listContent: JSX.Element | JSX.Element[] = this.renderWithGroup(visibileOptions);
+        let listContent: JSX.Element | JSX.Element[] = this.renderWithGroup(visibleOptions);
         if (virtualize) {
-            listContent = this.renderVirtualizeList(visibileOptions);
+            listContent = this.renderVirtualizeList(visibleOptions);
         }
 
         const style = { minWidth: dropdownMinWidth, ...dropdownStyle };

package/select/virtualRow.tsx

@@ -5,8 +5,8 @@ export interface VirtualRowProps{
     style?: React.CSSProperties;
 }
 const VirtualRow = ({ index, data, style }: VirtualRowProps) => {
-    const { visibileOptions } = data;
-    const option = visibileOptions[index];
+    const { visibleOptions } = data;
+    const option = visibleOptions[index];
     return data.renderOption(option, index, style);
 };
 

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

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { Table, Avatar, Button, Space } from '@douyinfe/semi-ui';
+import { IconMore } from '@douyinfe/semi-icons';
+
+const columns = [
+    {
+        title: '标题',
+        dataIndex: 'name',
+        width: 300,
+        key: 'name',
+        render: (text, record, index) => {
+            return (
+                <div>
+                    <Avatar size="small" shape="square" src={record.nameIconSrc} style={{ marginRight: 12 }}></Avatar>
+                    {text}
+                </div>
+            );
+        },
+    },
+    {
+        title: '大小',
+        dataIndex: 'size',
+        key: 'size',
+        width: 200,
+    },
+    {
+        title: '所有者',
+        dataIndex: 'owner',
+        key: 'owner',
+        width: 200,
+        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',
+        key: 'updateTime',
+        width: 200,
+    },
+    {
+        title: '',
+        dataIndex: 'operate',
+        key: 'operate',
+        render: () => {
+            return <IconMore />;
+        },
+    },
+];
+
+/**
+ * fix https://github.com/DouyinFE/semi-design/issues/650
+ */
+App.storyName = 'fixed resizable column width bug';
+App.parameters = { chromatic: { disableSnapshot: true } };
+function App() {
+    const [cols, setCols] = useState(columns);
+
+    const onClickHandle = () => {
+        const localCols = [...cols].filter((i, index) => index !== 1);
+        setCols(localCols);
+    };
+
+    const data = [
+        {
+            key: '1',
+            name: 'Semi Design 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey',
+        },
+        {
+            key: '2',
+            name: 'Semi Design 分享演示文稿',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '2M',
+            owner: '郝宣',
+            updateTime: '2020-01-17 05:31',
+            avatarBg: 'red',
+        },
+        {
+            key: '3',
+            name: '设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue',
+        },
+    ];
+
+    return (
+        <>
+            <Space>
+                <Button onClick={onClickHandle}>减少一列</Button>
+                <Button theme="solid" onClick={() => setCols(columns)}>
+                    reset
+                </Button>
+            </Space>
+            <Table columns={cols} dataSource={data} pagination={false} resizable />
+        </>
+    );
+}
+
+export default App;