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

package/lib/cjs/button/Button.d.ts

@@ -46,15 +46,15 @@ export default class Button extends PureComponent<ButtonProps> {
         disabled: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<unknown>;
-        type: PropTypes.Requireable<unknown>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        type: PropTypes.Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
         circle: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        htmlType: PropTypes.Requireable<unknown>;
-        theme: PropTypes.Requireable<unknown>;
+        htmlType: PropTypes.Requireable<"button" | "reset" | "submit">;
+        theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/button/buttonGroup.d.ts

@@ -16,8 +16,8 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<unknown>;
-        theme: PropTypes.Requireable<unknown>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import { ButtonProps as BaseButtonProps } from './Button';
 import { IconButtonProps } from '../iconButton';
 export { ButtonProps as BaseButtonProps, HtmlType, Size, Theme, Type } from './Button';
 export { HorizontalPaddingType } from '../iconButton';
 export { ButtonGroupProps } from './buttonGroup';
 export { SplitButtonGroupProps } from './splitButtonGroup';
-export interface ButtonProps extends IconButtonProps, BaseButtonProps {
+export interface ButtonProps extends IconButtonProps {
 }
 declare class Button extends React.PureComponent<ButtonProps> {
     static propTypes: {
@@ -18,18 +17,18 @@ declare class Button extends React.PureComponent<ButtonProps> {
         noHorizontalPadding: import("prop-types").Requireable<string | boolean | any[]>;
         children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         theme: import("prop-types").Requireable<string>;
-        iconPosition: import("prop-types").Requireable<unknown>;
+        iconPosition: import("prop-types").Requireable<"left" | "right">;
         className: import("prop-types").Requireable<string>;
         onMouseEnter: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseLeave: import("prop-types").Requireable<(...args: any[]) => any>;
         disabled: import("prop-types").Requireable<boolean>;
-        size: import("prop-types").Requireable<unknown>;
-        type: import("prop-types").Requireable<unknown>;
+        size: import("prop-types").Requireable<"default" | "small" | "large">;
+        type: import("prop-types").Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: import("prop-types").Requireable<boolean>;
         onClick: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseDown: import("prop-types").Requireable<(...args: any[]) => any>;
         circle: import("prop-types").Requireable<boolean>;
-        htmlType: import("prop-types").Requireable<unknown>;
+        htmlType: import("prop-types").Requireable<"button" | "reset" | "submit">;
         'aria-label': import("prop-types").Requireable<string>;
     };
     constructor(props?: {});

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

@@ -19,7 +19,7 @@ export interface IconButtonProps extends ButtonProps {
 }
 declare class IconButton extends PureComponent<IconButtonProps> {
     static defaultProps: {
-        iconPosition: any;
+        iconPosition: "left";
         prefixCls: string;
         loading: boolean;
         noHorizontalPadding: boolean;
@@ -36,7 +36,7 @@ declare class IconButton extends PureComponent<IconButtonProps> {
         noHorizontalPadding: PropTypes.Requireable<string | boolean | any[]>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         theme: PropTypes.Requireable<string>;
-        iconPosition: PropTypes.Requireable<unknown>;
+        iconPosition: PropTypes.Requireable<"left" | "right">;
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/navigation/Item.d.ts

@@ -1,7 +1,7 @@
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import React from 'react';
 import PropTypes from 'prop-types';
-import ItemFoundation, { ItemProps, SelectedItemProps, ItemAdapter } from '@douyinfe/semi-foundation/lib/cjs/navigation/itemFoundation';
+import ItemFoundation, { ItemAdapter, ItemProps, SelectedItemProps } from '@douyinfe/semi-foundation/lib/cjs/navigation/itemFoundation';
 export interface NavItemProps extends ItemProps, BaseProps {
     children?: React.ReactNode;
     disabled?: boolean;
@@ -63,7 +63,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
     constructor(props: NavItemProps);
     _invokeContextFunc(funcName: string, ...args: any[]): any;
     get adapter(): ItemAdapter<NavItemProps, NavItemState>;
-    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon?: boolean): JSX.Element;
+    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon?: boolean, key?: number | string): JSX.Element;
     setItemRef: (ref: HTMLLIElement) => void;
     wrapTooltip: (node: React.ReactNode) => JSX.Element;
     handleClick: (e: React.MouseEvent) => void;

package/lib/cjs/navigation/Item.js

@@ -16,10 +16,10 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
-var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _times2 = _interopRequireDefault(require("lodash/times"));
 
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -146,6 +146,7 @@ class NavItem extends _baseComponent.default {
     var _context3;
 
     let isToggleIcon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    let key = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
 
     if (this.props.isSubNav) {
       return null;
@@ -166,7 +167,8 @@ class NavItem extends _baseComponent.default {
       ["".concat(clsPrefix, "-icon-info")]: !isToggleIcon
     });
     return /*#__PURE__*/_react.default.createElement("i", {
-      className: className
+      className: className,
+      key: key
     }, (0, _utils.isSemiIcon)(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, {
       size: icon.props.size || iconSize
     }) : icon);
@@ -206,12 +208,12 @@ class NavItem extends _baseComponent.default {
 
       if (mode === _constants.strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
         const iconAmount = icon && !indent ? level : level - 1;
-        placeholderIcons = (0, _times2.default)(iconAmount, () => this.renderIcon(null, _constants.strings.ICON_POS_RIGHT, false));
+        placeholderIcons = (0, _times2.default)(iconAmount, index => this.renderIcon(null, _constants.strings.ICON_POS_RIGHT, false, index));
       }
 
-      itemChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true), icon || indent || isInSubNav ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT) : null, !(0, _isNullOrUndefined.default)(text) ? /*#__PURE__*/_react.default.createElement("span", {
+      itemChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'), icon || indent || isInSubNav ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT, false, 'key-position-left') : null, !(0, _isNullOrUndefined.default)(text) ? /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(_constants.cssClasses.PREFIX, "-item-text")
-      }, text) : '', this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true));
+      }, text) : '', this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'));
     }
 
     if (typeof link === 'string') {

package/lib/cjs/navigation/SubNav.js

@@ -233,7 +233,7 @@ class SubNav extends _baseComponent.default {
     if (mode === _constants.strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
       /* Different icons' amount means different indents.*/
       const iconAmount = icon && !indent ? level : level - 1;
-      placeholderIcons = (0, _times2.default)(iconAmount, index => this.renderIcon(null, _constants.strings.ICON_POS_RIGHT, false, undefined, index));
+      placeholderIcons = (0, _times2.default)(iconAmount, index => this.renderIcon(null, _constants.strings.ICON_POS_RIGHT, false, false, index));
     }
 
     const titleDiv = /*#__PURE__*/_react.default.createElement("div", {
@@ -245,7 +245,7 @@ class SubNav extends _baseComponent.default {
       onKeyPress: this.handleKeyPress
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-item-inner")
-    }, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== _constants.strings.MODE_HORIZONTAL ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT, undefined, undefined, 'key-inSubNav-position-left') : null, /*#__PURE__*/_react.default.createElement("span", {
+    }, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== _constants.strings.MODE_HORIZONTAL ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(prefixCls, "-item-text")
     }, text), this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
 

package/lib/cjs/table/Body/index.d.ts

@@ -43,6 +43,8 @@ export interface BodyState {
 }
 export interface BodyContext {
     getVirtualizedListRef: GetVirtualizedListRef;
+    flattenedColumns: ColumnProps[];
+    getCellWidths: (flattenedColumns: ColumnProps[]) => number[];
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<BodyProps, "forwardedRef"> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/lib/cjs/table/Body/index.js

@@ -418,8 +418,13 @@ class Body extends _baseComponent.default {
       const {
         flattenedColumns,
         getCellWidths
-      } = _this.context;
-      const cellWidths = getCellWidths(flattenedColumns);
+      } = _this.context; // we use memoized cellWidths to avoid re-render expanded row (fix #686)
+
+      if (flattenedColumns !== _this.flattenedColumns) {
+        _this.flattenedColumns = flattenedColumns;
+        _this.cellWidths = getCellWidths(flattenedColumns);
+      }
+
       return /*#__PURE__*/_react.default.createElement(_ExpandedRow.default, {
         style: style,
         components: components,
@@ -431,7 +436,7 @@ class Body extends _baseComponent.default {
         index: index,
         virtualized: virtualized,
         key: (0, _utils.genExpandedRowKey)(key),
-        cellWidths: cellWidths
+        cellWidths: _this.cellWidths
       });
     };
     /**
@@ -601,7 +606,9 @@ class Body extends _baseComponent.default {
     };
     this.listRef = /*#__PURE__*/_react.default.createRef();
     const {
-      getVirtualizedListRef
+      getVirtualizedListRef,
+      flattenedColumns,
+      getCellWidths
     } = context;
 
     if (getVirtualizedListRef) {
@@ -613,6 +620,8 @@ class Body extends _baseComponent.default {
     }
 
     this.foundation = new _bodyFoundation.default(this.adapter);
+    this.flattenedColumns = flattenedColumns;
+    this.cellWidths = getCellWidths(flattenedColumns);
     this.observer = null;
   }
 

package/lib/cjs/tooltip/index.js

@@ -229,7 +229,9 @@ class Tooltip extends _baseComponent.default {
         } = _ref;
         return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
           className: (0, _classnames.default)(className, animateCls),
-          style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, animateStyle), {
+          style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({
+            visibility: 'visible'
+          }, animateStyle), {
             transformOrigin
           }), style)
         }, portalEventSet, animateEvents, {
@@ -241,7 +243,9 @@ class Tooltip extends _baseComponent.default {
         className: className
       }, portalEventSet, {
         "x-placement": placement,
-        style: style
+        style: (0, _assign.default)({
+          visibility: motion ? undefined : 'visible'
+        }, style)
       }), content, icon);
       return /*#__PURE__*/_react.default.createElement(_index.default, {
         getPopupContainer: this.props.getPopupContainer,

package/lib/es/button/Button.d.ts

@@ -46,15 +46,15 @@ export default class Button extends PureComponent<ButtonProps> {
         disabled: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<unknown>;
-        type: PropTypes.Requireable<unknown>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        type: PropTypes.Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
         circle: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        htmlType: PropTypes.Requireable<unknown>;
-        theme: PropTypes.Requireable<unknown>;
+        htmlType: PropTypes.Requireable<"button" | "reset" | "submit">;
+        theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/button/buttonGroup.d.ts

@@ -16,8 +16,8 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<unknown>;
-        theme: PropTypes.Requireable<unknown>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import { ButtonProps as BaseButtonProps } from './Button';
 import { IconButtonProps } from '../iconButton';
 export { ButtonProps as BaseButtonProps, HtmlType, Size, Theme, Type } from './Button';
 export { HorizontalPaddingType } from '../iconButton';
 export { ButtonGroupProps } from './buttonGroup';
 export { SplitButtonGroupProps } from './splitButtonGroup';
-export interface ButtonProps extends IconButtonProps, BaseButtonProps {
+export interface ButtonProps extends IconButtonProps {
 }
 declare class Button extends React.PureComponent<ButtonProps> {
     static propTypes: {
@@ -18,18 +17,18 @@ declare class Button extends React.PureComponent<ButtonProps> {
         noHorizontalPadding: import("prop-types").Requireable<string | boolean | any[]>;
         children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         theme: import("prop-types").Requireable<string>;
-        iconPosition: import("prop-types").Requireable<unknown>;
+        iconPosition: import("prop-types").Requireable<"left" | "right">;
         className: import("prop-types").Requireable<string>;
         onMouseEnter: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseLeave: import("prop-types").Requireable<(...args: any[]) => any>;
         disabled: import("prop-types").Requireable<boolean>;
-        size: import("prop-types").Requireable<unknown>;
-        type: import("prop-types").Requireable<unknown>;
+        size: import("prop-types").Requireable<"default" | "small" | "large">;
+        type: import("prop-types").Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: import("prop-types").Requireable<boolean>;
         onClick: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseDown: import("prop-types").Requireable<(...args: any[]) => any>;
         circle: import("prop-types").Requireable<boolean>;
-        htmlType: import("prop-types").Requireable<unknown>;
+        htmlType: import("prop-types").Requireable<"button" | "reset" | "submit">;
         'aria-label': import("prop-types").Requireable<string>;
     };
     constructor(props?: {});

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

@@ -19,7 +19,7 @@ export interface IconButtonProps extends ButtonProps {
 }
 declare class IconButton extends PureComponent<IconButtonProps> {
     static defaultProps: {
-        iconPosition: any;
+        iconPosition: "left";
         prefixCls: string;
         loading: boolean;
         noHorizontalPadding: boolean;
@@ -36,7 +36,7 @@ declare class IconButton extends PureComponent<IconButtonProps> {
         noHorizontalPadding: PropTypes.Requireable<string | boolean | any[]>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         theme: PropTypes.Requireable<string>;
-        iconPosition: PropTypes.Requireable<unknown>;
+        iconPosition: PropTypes.Requireable<"left" | "right">;
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/navigation/Item.d.ts

@@ -1,7 +1,7 @@
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import React from 'react';
 import PropTypes from 'prop-types';
-import ItemFoundation, { ItemProps, SelectedItemProps, ItemAdapter } from '@douyinfe/semi-foundation/lib/es/navigation/itemFoundation';
+import ItemFoundation, { ItemAdapter, ItemProps, SelectedItemProps } from '@douyinfe/semi-foundation/lib/es/navigation/itemFoundation';
 export interface NavItemProps extends ItemProps, BaseProps {
     children?: React.ReactNode;
     disabled?: boolean;
@@ -63,7 +63,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
     constructor(props: NavItemProps);
     _invokeContextFunc(funcName: string, ...args: any[]): any;
     get adapter(): ItemAdapter<NavItemProps, NavItemState>;
-    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon?: boolean): JSX.Element;
+    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon?: boolean, key?: number | string): JSX.Element;
     setItemRef: (ref: HTMLLIElement) => void;
     wrapTooltip: (node: React.ReactNode) => JSX.Element;
     handleClick: (e: React.MouseEvent) => void;

package/lib/es/navigation/Item.js

@@ -1,5 +1,5 @@
-import _noop from "lodash/noop";
 import _times from "lodash/times";
+import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -14,7 +14,7 @@ import cls from 'classnames';
 import isNullOrUndefined from '@douyinfe/semi-foundation/lib/es/utils/isNullOrUndefined';
 import { cloneDeep, isSemiIcon } from '../_utils';
 import ItemFoundation from '@douyinfe/semi-foundation/lib/es/navigation/itemFoundation';
-import { strings, cssClasses } from '@douyinfe/semi-foundation/lib/es/navigation/constants';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/navigation/constants';
 import Tooltip from '../tooltip';
 import NavContext from './nav-context';
 import Dropdown from '../dropdown';
@@ -118,6 +118,7 @@ export default class NavItem extends BaseComponent {
     var _context3;
 
     let isToggleIcon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    let key = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
 
     if (this.props.isSubNav) {
       return null;
@@ -138,7 +139,8 @@ export default class NavItem extends BaseComponent {
       ["".concat(clsPrefix, "-icon-info")]: !isToggleIcon
     });
     return /*#__PURE__*/React.createElement("i", {
-      className: className
+      className: className,
+      key: key
     }, isSemiIcon(icon) ? /*#__PURE__*/React.cloneElement(icon, {
       size: icon.props.size || iconSize
     }) : icon);
@@ -178,12 +180,12 @@ export default class NavItem extends BaseComponent {
 
       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));
+        placeholderIcons = _times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, index));
       }
 
-      itemChildren = /*#__PURE__*/React.createElement(React.Fragment, null, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true), icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT) : null, !isNullOrUndefined(text) ? /*#__PURE__*/React.createElement("span", {
+      itemChildren = /*#__PURE__*/React.createElement(React.Fragment, null, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'), icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, 'key-position-left') : null, !isNullOrUndefined(text) ? /*#__PURE__*/React.createElement("span", {
         className: "".concat(cssClasses.PREFIX, "-item-text")
-      }, text) : '', this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true));
+      }, text) : '', this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'));
     }
 
     if (typeof link === 'string') {

package/lib/es/navigation/SubNav.js

@@ -203,7 +203,7 @@ export default class SubNav extends BaseComponent {
     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));
+      placeholderIcons = _times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, false, index));
     }
 
     const titleDiv = /*#__PURE__*/React.createElement("div", {
@@ -215,7 +215,7 @@ export default class SubNav extends BaseComponent {
       onKeyPress: this.handleKeyPress
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-item-inner")
-    }, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== strings.MODE_HORIZONTAL ? this.renderIcon(icon, strings.ICON_POS_LEFT, undefined, undefined, 'key-inSubNav-position-left') : null, /*#__PURE__*/React.createElement("span", {
+    }, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== strings.MODE_HORIZONTAL ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-item-text")
     }, text), this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
     return titleDiv;

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

@@ -43,6 +43,8 @@ export interface BodyState {
 }
 export interface BodyContext {
     getVirtualizedListRef: GetVirtualizedListRef;
+    flattenedColumns: ColumnProps[];
+    getCellWidths: (flattenedColumns: ColumnProps[]) => number[];
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<BodyProps, "forwardedRef"> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/lib/es/table/Body/index.js

@@ -389,8 +389,13 @@ class Body extends BaseComponent {
       const {
         flattenedColumns,
         getCellWidths
-      } = _this.context;
-      const cellWidths = getCellWidths(flattenedColumns);
+      } = _this.context; // we use memoized cellWidths to avoid re-render expanded row (fix #686)
+
+      if (flattenedColumns !== _this.flattenedColumns) {
+        _this.flattenedColumns = flattenedColumns;
+        _this.cellWidths = getCellWidths(flattenedColumns);
+      }
+
       return /*#__PURE__*/React.createElement(ExpandedRow, {
         style: style,
         components: components,
@@ -402,7 +407,7 @@ class Body extends BaseComponent {
         index: index,
         virtualized: virtualized,
         key: genExpandedRowKey(key),
-        cellWidths: cellWidths
+        cellWidths: _this.cellWidths
       });
     };
     /**
@@ -580,7 +585,9 @@ class Body extends BaseComponent {
     };
     this.listRef = /*#__PURE__*/React.createRef();
     const {
-      getVirtualizedListRef
+      getVirtualizedListRef,
+      flattenedColumns,
+      getCellWidths
     } = context;
 
     if (getVirtualizedListRef) {
@@ -592,6 +599,8 @@ class Body extends BaseComponent {
     }
 
     this.foundation = new BodyFoundation(this.adapter);
+    this.flattenedColumns = flattenedColumns;
+    this.cellWidths = getCellWidths(flattenedColumns);
     this.observer = null;
   }
 

package/lib/es/tooltip/index.js

@@ -184,7 +184,9 @@ export default class Tooltip extends BaseComponent {
         } = _ref;
         return /*#__PURE__*/React.createElement("div", _Object$assign({
           className: classNames(className, animateCls),
-          style: _Object$assign(_Object$assign(_Object$assign({}, animateStyle), {
+          style: _Object$assign(_Object$assign(_Object$assign({
+            visibility: 'visible'
+          }, animateStyle), {
             transformOrigin
           }), style)
         }, portalEventSet, animateEvents, {
@@ -196,7 +198,9 @@ export default class Tooltip extends BaseComponent {
         className: className
       }, portalEventSet, {
         "x-placement": placement,
-        style: style
+        style: _Object$assign({
+          visibility: motion ? undefined : 'visible'
+        }, style)
       }), content, icon);
       return /*#__PURE__*/React.createElement(Portal, {
         getPopupContainer: this.props.getPopupContainer,

package/navigation/Item.tsx

@@ -4,12 +4,16 @@ import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import React from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
-import { times, noop } from 'lodash';
+import { noop, times } from 'lodash';
 
 import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
 import { cloneDeep, isSemiIcon } from '../_utils';
-import ItemFoundation, { ItemProps, SelectedItemProps, ItemAdapter } from '@douyinfe/semi-foundation/navigation/itemFoundation';
-import { strings, cssClasses } from '@douyinfe/semi-foundation/navigation/constants';
+import ItemFoundation, {
+    ItemAdapter,
+    ItemProps,
+    SelectedItemProps
+} from '@douyinfe/semi-foundation/navigation/itemFoundation';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/navigation/constants';
 
 import Tooltip from '../tooltip';
 import NavContext from './nav-context';
@@ -114,7 +118,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         };
     }
 
-    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon = false) {
+    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon = false, key: number | string = 0) {
         if (this.props.isSubNav) {
             return null;
         }
@@ -134,8 +138,8 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         });
 
         return (
-            <i className={className}>
-                {isSemiIcon(icon) ? React.cloneElement((icon as React.ReactElement), {size: (icon as React.ReactElement).props.size || iconSize}) : icon}
+            <i className={className} key={key}>
+                {isSemiIcon(icon) ? React.cloneElement((icon as React.ReactElement), { size: (icon as React.ReactElement).props.size || iconSize }) : icon}
             </i>
         );
     }
@@ -189,7 +193,6 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         const selected = this.adapter.getSelected();
 
 
-
         let itemChildren = null;
         if (!isNullOrUndefined(children)) {
             itemChildren = children;
@@ -197,15 +200,15 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             let placeholderIcons = null;
             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));
+                placeholderIcons = times(iconAmount, (index) => this.renderIcon(null, strings.ICON_POS_RIGHT, false, index));
             }
             itemChildren = (
                 <>
                     {placeholderIcons}
-                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true)}
-                    {icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT) : null}
+                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right')}
+                    {icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, 'key-position-left') : null}
                     {!isNullOrUndefined(text) ? <span className={`${cssClasses.PREFIX}-item-text`}>{text}</span> : ''}
-                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true)}
+                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right')}
                 </>
             );
         }
@@ -246,7 +249,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             );
         } else {
             // Items are divided into normal and sub-wrap
-            const popoverItemCls = cls(`${className || `${clsPrefix }-normal`}`, {
+            const popoverItemCls = cls(`${className || `${clsPrefix}-normal`}`, {
                 [clsPrefix]: true,
                 [`${clsPrefix}-sub`]: isSubNav,
                 [`${clsPrefix}-selected`]: selected && !isSubNav,

package/navigation/SubNav.tsx

@@ -240,15 +240,15 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         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));
+            placeholderIcons = times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, false, index));
         }
 
         const titleDiv = (
             <div
                 role="menuitem"
                 tabIndex={-1}
-                ref={this.setTitleRef as any} 
-                className={titleCls} 
+                ref={this.setTitleRef as any}
+                className={titleCls}
                 onClick={this.handleClick}
                 onKeyPress={this.handleKeyPress}
             >
@@ -256,7 +256,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
                     {placeholderIcons}
                     {this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left')}
                     {icon || indent || (isInSubNav && mode !== strings.MODE_HORIZONTAL)
-                        ? this.renderIcon(icon, strings.ICON_POS_LEFT, undefined, undefined, 'key-inSubNav-position-left')
+                        ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left')
                         : null}
                     <span className={`${prefixCls}-item-text`}>{text}</span>
                     {this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')}