@douyinfe/semi-ui 2.5.0 → 2.5.1

package/form/__test__/formApi.test.js

@@ -30,6 +30,11 @@ const fields = (
     </>
 );
 
+const getDomValue = (field, form) => {
+    let inputDOM = form.find(`[x-field-id="${field}"] input`).getDOMNode();
+    return inputDOM.getAttribute("value");
+};
+
 describe('Form-formApi', () => {
     beforeEach(() => {
         document.body.innerHTML = '';
@@ -416,6 +421,183 @@ describe('Form-formApi', () => {
         expect(formApi.getFormState().touched).toEqual({ a: { b: true, c: true }});
     })
 
+        it('formApi-setValue, field path precise', () => {
+        // case like:
+        // Exist 3 Field: a.b、a.c、a.d
+        // formApi.setValue('a.b', '123');
+        let formApi = null;
+        const fields = (
+            <>
+                <Form.Input field='a.b' />
+                <Form.Input field='a.c' />
+                <Form.Input field='a.d' />
+            </>
+        );
+        const props = {
+            children: fields,
+            getFormApi: api => {
+                formApi = api;
+            },
+        };
+        const form = getForm(props);
+        formApi.setValue('a.c', 'semi');
+        // check formState.values
+        let val = formApi.getValue('a.c');
+        expect(val).toEqual('semi');
+        form.update();
+        // check dom render
+        expect(getDomValue('a.c', form)).toEqual('semi');
+    });
+
+    it('formApi-setValue, field path belongs to parent aggregate', () => {
+        // case like:
+        // Exist 3 Field: a.b、a.c、a.d
+        // formApi.setValue('a', { b: 'semi', c: 'design' });
+        let formApi = null;
+        const fields = (
+            <>
+                <Form.Input field='a.b' />
+                <Form.Input field='a.c' />
+                <Form.Input field='a.d' />
+            </>
+        );
+        const props = {
+            children: fields,
+            getFormApi: api => {
+                formApi = api;
+            },
+        };
+        const form = getForm(props);
+        formApi.setValue('a', { b: 'semi', c: 'design' });
+        let acVal = formApi.getValue('a.c');
+        let abVal = formApi.getValue('a.b');
+        expect(abVal).toEqual('semi');
+        expect(acVal).toEqual('design');
+        form.update();
+
+        // check dom render
+        expect(getDomValue('a.b', form)).toEqual('semi');
+        expect(getDomValue('a.c', form)).toEqual('design');
+    });
+
+    it('formApi-setValue with array field path, 0 -> 3', () => {
+
+        const fields = ({ formState, values }) => {
+
+            return values.a && values.a.map((effect, i) => (
+                <div key={effect.key}>
+                    <Form.Input field={`a[${i}].name`} />
+                    <Form.Input field={`a[${i}].type`}  />
+                </div>
+            ));
+        };
+        let formApi = null;
+        const props = {
+            children: fields,
+            getFormApi: api => {
+                formApi = api;
+            },
+        };
+        const form = getForm(props);
+        let targetValue = [
+            { name: '0-name', type: '0-type' },
+            { name: '1-name', type: '1-type' },
+            { name: '2-name', type: '2-type' },
+        ];
+        formApi.setValue('a', targetValue);
+        let formStateValues = formApi.getValue();
+        form.update();
+        // check dom render
+        expect(getDomValue('a[0].name', form)).toEqual('0-name');
+        expect(getDomValue('a[0].type', form)).toEqual('0-type');
+        expect(getDomValue('a[1].name', form)).toEqual('1-name');
+        expect(getDomValue('a[1].type', form)).toEqual('1-type');
+        expect(getDomValue('a[2].name', form)).toEqual('2-name');
+        expect(getDomValue('a[2].type', form)).toEqual('2-type');
+    });
+
+    // // this case result was different in cypress / jest, jest result is wrong
+    // it('formApi-setValue with array field path, 3 -> 2, delete some field', done => {
+    //     const fields = ({ formState, values }) => {
+    //         return values.a && values.a.map((item, i) => (
+    //             <div key={item.key} style={{ width: 300 }}>
+    //                 <Form.Input field={`a[${i}].name`} />
+    //                 <Form.Input field={`a[${i}].type`} />
+    //             </div>
+    //         ));
+    //     };
+    //     let formApi = null;
+    //     const props = {
+    //         children: fields,
+    //         initValues: {
+    //             a: [
+    //                 { name: '0-name', type: '0-type', key: 0 },
+    //                 { name: '1-name', type: '1-type', key: 1 },
+    //                 { name: '2-name', type: '2-type', key: 2 },
+    //             ]
+    //         },
+    //         getFormApi: api => {
+    //             formApi = api;
+    //         },
+    //     };
+    //     let form = getForm(props);
+    //     // remove middle one
+    //     formApi.setValue('a', [
+    //         { name: '0-name', type: '0-type', key: 0 },
+    //         { name: '2-name', type: '2-type', key: 2 },
+    //     ]);
+    //     let formStateValues = formApi.getValue();
+    //     form.update();
+
+    //     setTimeout(() => {
+    //         // check dom render
+    //         expect(getDomValue('a[0].name', form)).toEqual('0-name');
+    //         expect(getDomValue('a[0].type', form)).toEqual('0-type');
+    //         expect(getDomValue('a[1].name', form)).toEqual('2-name');
+    //         expect(getDomValue('a[1].type', form)).toEqual('2-type');
+
+    //         expect(form.exists(`[x-field-id="a[2].name"] input`)).toEqual(false);
+    //         expect(form.exists(`[x-field-id="a[2].type"] input`)).toEqual(false);
+    //         done();
+    //     }, 5000);
+    // });
+
+    it('formApi-setValue with array field path, 1 -> 3, add some field', () => {
+        const fields = ({ formState, values }) => {
+            return values.a && values.a.map((effect, i) => (
+                <div key={effect.key}>
+                    <Form.Input field={`a[${i}].name`} />
+                    <Form.Input field={`a[${i}].type`} />
+                </div>
+            ));
+        };
+        let formApi = null;
+        const props = {
+            children: fields,
+            initValues: {
+                a: [{ name: 'semi', type: 'design' }]
+            },
+            getFormApi: api => {
+                formApi = api;
+            },
+        };
+        let form = getForm(props);
+        formApi.setValue('a', [
+            { name: '0-name', type: '0-type' },
+            { name: '1-name', type: '1-type' },
+            { name: '2-name', type: '2-type' },
+        ]);
+        let formStateValues = formApi.getValue();
+        form.update();
+        // check dom render
+        expect(getDomValue('a[0].name', form)).toEqual('0-name');
+        expect(getDomValue('a[0].type', form)).toEqual('0-type');
+        expect(getDomValue('a[1].name', form)).toEqual('1-name');
+        expect(getDomValue('a[1].type', form)).toEqual('1-type');
+        expect(getDomValue('a[2].name', form)).toEqual('2-name');
+        expect(getDomValue('a[2].type', form)).toEqual('2-type');
+    });
+
     // it('formApi-submitForm', () => {
     //     // submit should call validate first
     // });

package/form/_story/FormApi/arrayDemo.jsx

@@ -24,9 +24,9 @@ class ArrayDemo extends React.Component {
         this.state = {
             initValues: {
                 effects: [
-                    { name: '脸部贴纸', type: '2D', key: 0 },
-                    { name: '美妆', type: '2D', key: 1 },
-                    { name: '前景贴纸', type: '3D', key: 2 },
+                    { name: '1-name', type: '1-type', key: 0 },
+                    { name: '2-name', type: '2-type', key: 1 },
+                    { name: '3-name', type: '3-type', key: 2 },
                 ]
             }
         };
@@ -59,10 +59,7 @@ class ArrayDemo extends React.Component {
         return values.effects && values.effects.map((effect, i) => (
             <div key={effect.key} style={{ width: 1000, display: 'flex' }}>
                 <Form.Input field={`effects[${i}].name`} style={{ width: 200, marginRight: 16 }} />
-                <Form.Select field={`effects[${i}].type`} style={{ width: 90 }}>
-                    <Form.Select.Option value="2D">2D</Form.Select.Option>
-                    <Form.Select.Option value="3D">3D</Form.Select.Option>
-                </Form.Select>
+                <Form.Input field={`effects[${i}].type`} style={{ width: 90 }} />
                 <Button type="danger" onClick={() => this.remove(effect.key)} style={{ margin: 16 }}>Remove</Button>
             </div>
         ));

package/form/_story/Layout/slotDemo.jsx

@@ -98,7 +98,7 @@ class AssistComponent extends React.Component {
                             我是Semi Form SlotB, 我的Label Align、Width与众不同
                         </div>
                     </Form.Slot>
-                </Form>,
+                </Form>
                 <Form.Slot
                     label={{
                         text: 'SlotB',
@@ -117,7 +117,7 @@ class AssistComponent extends React.Component {
                     >
                         我是Slot，我并没有被Form包裹，我是单独使用的
                     </div>
-                </Form.Slot>,
+                </Form.Slot>
             </>
         );
     }

package/form/_story/demo.jsx

@@ -195,7 +195,7 @@ class BasicDemoWithInit extends Component {
                 initValues={formInitValue}
                 onReset={this.handleReset}
                 onValueChange={(v)=>console.log(v)}
-                style={{ padding: '10px', width: 600 }}
+                style={{ padding: '10px', width: 900 }}
                 autoScrollToError
                 aria-label='Demo Form'
                 id='demo-form-id'
@@ -341,6 +341,23 @@ class BasicDemoWithInit extends Component {
                         <Form.Switch field='switch' label='开关(Switch)'/>
                     </Col>
                 </Row>
+                <Form.CheckboxGroup field="cardCheckbox" label='卡片选择' style={{ width: '90%' }} type='card' initValue={['1', '3']} direction={'horizontal'} aria-label="CheckboxGroup 示例">
+                    <Form.Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+                        单选框标题
+                    </Form.Checkbox>
+                    <Form.Checkbox value={'2'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+                        单选框标题
+                    </Form.Checkbox>
+                </Form.CheckboxGroup>
+                <Row>
+                    <Col span={12}>
+                        <Form.RadioGroup field='buttonRadio' type='button' buttonSize='middle' defaultValue={1} aria-label="单选组合示例">
+                            <Radio value={1}>即时推送</Radio>
+                            <Radio value={2}>定时推送</Radio>
+                            <Radio value={3}>动态推送</Radio>
+                        </Form.RadioGroup>
+                    </Col>
+                </Row>
                 </Form.Section>
                 <Form.Checkbox value="false" field="agree" useOutSideGroup={true} noLabel={true}>
                     我已阅读并清楚相关规定

package/form/_story/form.stories.js

@@ -158,6 +158,12 @@ FormApiSetValueUsingFieldParentPath.story = {
   name: 'formApi-setValue using field parent path',
 };
 
+export const UseFormApiSetValueUpdateArray = () => <ArrayDemo />;
+
+UseFormApiSetValueUpdateArray.story = {
+  name: 'formApi-setValue set array',
+};
+
 export const DynamicAddRemoveField = () => (
   <Form>
     {({ formState }) => (
@@ -209,12 +215,6 @@ _ArrayFieldCollapseDemo.story = {
   name: 'ArrayField-CollapseDemo',
 };
 
-export const ArrayFieldDynamicUpdate = () => <ArrayDemo />;
-
-ArrayFieldDynamicUpdate.story = {
-  name: 'ArrayField-dynamic update',
-};
-
 export const LinkField = () => <LinkFieldForm />;
 
 LinkField.story = {

package/form/baseForm.tsx

@@ -160,8 +160,8 @@ class Form extends BaseComponent<BaseFormProps, BaseFormState> {
             notifySubmitFail: (errors: ErrorMsg, values: any) => {
                 this.props.onSubmitFail(errors, values);
             },
-            forceUpdate: () => {
-                this.forceUpdate();
+            forceUpdate: (callback?: () => void) => {
+                this.forceUpdate(callback);
             },
             notifyChange: (formState: FormState) => {
                 this.props.onChange(formState);

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/form/baseForm.js

@@ -115,8 +115,8 @@ class Form extends _baseComponent.default {
       notifySubmitFail: (errors, values) => {
         this.props.onSubmitFail(errors, values);
       },
-      forceUpdate: () => {
-        this.forceUpdate();
+      forceUpdate: callback => {
+        this.forceUpdate(callback);
       },
       notifyChange: formState => {
         this.props.onChange(formState);

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/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/form/baseForm.js

@@ -77,8 +77,8 @@ class Form extends BaseComponent {
       notifySubmitFail: (errors, values) => {
         this.props.onSubmitFail(errors, values);
       },
-      forceUpdate: () => {
-        this.forceUpdate();
+      forceUpdate: callback => {
+        this.forceUpdate(callback);
       },
       notifyChange: formState => {
         this.props.onChange(formState);

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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.5.0",
+    "version": "2.5.1",
     "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",
-        "@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",
+        "@douyinfe/semi-animation": "2.5.1",
+        "@douyinfe/semi-animation-react": "2.5.1",
+        "@douyinfe/semi-foundation": "2.5.1",
+        "@douyinfe/semi-icons": "2.5.1",
+        "@douyinfe/semi-illustrations": "2.5.1",
+        "@douyinfe/semi-theme-default": "2.5.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "856255d8b5ad895a5fee47c5920aa1835836aff0",
+    "gitHead": "3f83639f8a4fff7f912a237bf2842cb0944d993c",
     "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",
+        "@douyinfe/semi-scss-compile": "2.5.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/table/_story/Perf/Virtualized/index.jsx

@@ -9,29 +9,35 @@ class PerfVirtualized extends React.Component {
             {
                 title: 'A',
                 dataIndex: 'key',
+                key: 'a',
                 width: 150,
             },
             {
                 title: 'B',
                 dataIndex: 'key',
+                key: 'b',
             },
             {
                 title: 'C',
                 dataIndex: 'key',
+                key: 'c',
             },
             {
                 title: 'D',
                 dataIndex: 'key',
+                key: 'd',
             },
             {
                 title: 'E',
                 dataIndex: 'key',
                 width: 200,
+                key: 'e',
             },
             {
                 title: 'F',
                 dataIndex: 'key',
                 width: 100,
+                key: 'f'
             },
         ];
 

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

@@ -45,7 +45,7 @@ export default function Demo() {
     const data = useMemo(() => {
         const data = [];
         for (let i = 0; i < 100; i++) {
-            let age = 40 + (Math.random() > 0.5 ? 1 : -1) * (i % 9);
+            let age = (i * 1000) % 149;
             let name = `Edward King ${i}`;
             data.push({
                 key: '' + i,