@douyinfe/semi-ui 2.2.0-beta.0 → 2.2.2

package/empty/index.tsx

@@ -60,7 +60,7 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
         this.observer && this.observer.disconnect();
     }
 
-    observe(mutationsList: any): void {
+    observe = (mutationsList: any): void => {
         for (const mutation of mutationsList) {
             if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
                 this.updateMode();
@@ -68,7 +68,7 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
         }
     }
 
-    updateMode(): void {
+    updateMode = (): void => {
         const val = this.body.getAttribute('theme-mode');
         if (val !== this.state.mode) {
             this.setState({ mode: val });

package/gulpfile.js

@@ -81,7 +81,8 @@ gulp.task('compileScss', function compileScss() {
                     realUrl = url.replace(/~@douyinfe\/semi-foundation/, semiUIPath);
                 }
                 return { url: realUrl };
-            }
+            },
+            charset: false
         }).on('error', sass.logError))
         .pipe(gulp.dest('lib/es'))
         .pipe(gulp.dest('lib/cjs'));

package/inputNumber/_story/inputNumber.stories.js

@@ -641,3 +641,15 @@ export const FormCustomInput = () => {
 FormCustomInput.story = {
   name: 'Form.CustomInput',
 };
+
+
+export const FixPrecision = () => {
+  const [value, setValue] = useState(5.12);
+  const [value2, setValue2] = useState(5.12);
+  return (
+    <div>
+        <InputNumber onChange={v => setValue(v)} value={value} style={{ width: 190 }} precision={2} />
+        <InputNumber keepFocus onBlur={() => console.log('blur')} onChange={v => setValue2(v)} value={value2} style={{ width: 190 }} precision={2} />
+    </div>
+  );
+}

package/inputNumber/index.tsx

@@ -225,6 +225,7 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
     currentValue!: number | string;
     cursorBefore!: string;
     cursorAfter!: string;
+    foundation: InputNumberFoundation;
     constructor(props: InputNumberProps) {
         super(props);
         this.state = {
@@ -291,7 +292,10 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
                 if (focusing) {
                     if (this.foundation.isValidNumber(parsedNum) && parsedNum !== this.state.number) {
                         const obj: { number?: number; value?: string } = { number: parsedNum };
-                        // Updates input when a button is clicked
+                        /**
+                         * If you are clicking the button, it will automatically format once
+                         * We need to set the status to false after trigger focus event
+                         */
                         if (this.clickUpOrDown) {
                             obj.value = this.foundation.doFormat(valueStr, true);
                         }

package/lib/cjs/_utils/index.js

@@ -174,11 +174,17 @@ const registerMediaQuery = (media, _ref2) => {
     }
 
     callInInit && handlerMediaChange(mediaQueryList);
-    mediaQueryList.addEventListener('change', handlerMediaChange);
-    return () => mediaQueryList.removeEventListener('change', handlerMediaChange);
+
+    if (Object.prototype.hasOwnProperty.call(mediaQueryList, 'addEventListener')) {
+      mediaQueryList.addEventListener('change', handlerMediaChange);
+      return () => mediaQueryList.removeEventListener('change', handlerMediaChange);
+    }
+
+    mediaQueryList.addListener(handlerMediaChange);
+    return () => mediaQueryList.removeListener(handlerMediaChange);
   }
 
-  return null;
+  return () => undefined;
 };
 /**
  * Determine whether the incoming element is a built-in icon

package/lib/cjs/datePicker/datePicker.js

@@ -278,6 +278,10 @@ class DatePicker extends _baseComponent.default {
         }
 
         this.clickOutSideHandler = e => {
+          if (this.adapter.needConfirm()) {
+            return;
+          }
+
           const triggerEl = this.triggerElRef && this.triggerElRef.current;
           const panelEl = this.panelRef && this.panelRef.current;
           const isInTrigger = triggerEl && triggerEl.contains(e.target);
@@ -462,7 +466,8 @@ class DatePicker extends _baseComponent.default {
       density,
       syncSwitchMonth,
       onPanelChange,
-      timeZone
+      timeZone,
+      triggerRender
     } = this.props;
     const {
       value,
@@ -509,7 +514,8 @@ class DatePicker extends _baseComponent.default {
       syncSwitchMonth: syncSwitchMonth,
       onPanelChange: onPanelChange,
       timeZone: timeZone,
-      focusRecordsRef: this.focusRecordsRef
+      focusRecordsRef: this.focusRecordsRef,
+      triggerRender: triggerRender
     });
   }
 

package/lib/cjs/datePicker/monthsGrid.d.ts

@@ -49,6 +49,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         syncSwitchMonth: PropTypes.Requireable<boolean>;
         onPanelChange: PropTypes.Requireable<(...args: any[]) => any>;
         focusRecordsRef: PropTypes.Requireable<object>;
+        triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         type: string;

package/lib/cjs/datePicker/monthsGrid.js

@@ -695,7 +695,8 @@ MonthsGrid.propTypes = {
   syncSwitchMonth: _propTypes.default.bool,
   // Callback function for panel date switching
   onPanelChange: _propTypes.default.func,
-  focusRecordsRef: _propTypes.default.object
+  focusRecordsRef: _propTypes.default.object,
+  triggerRender: _propTypes.default.func
 };
 MonthsGrid.defaultProps = {
   type: 'date',

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

@@ -31,8 +31,8 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
     constructor(props: EmptyProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    observe(mutationsList: any): void;
-    updateMode(): void;
+    observe: (mutationsList: any) => void;
+    updateMode: () => void;
     render(): JSX.Element;
 }
 export {};

package/lib/cjs/empty/index.js

@@ -31,6 +31,25 @@ const prefixCls = _constants.cssClasses.PREFIX;
 class Empty extends _baseComponent.default {
   constructor(props) {
     super(props);
+
+    this.observe = mutationsList => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
+          this.updateMode();
+        }
+      }
+    };
+
+    this.updateMode = () => {
+      const val = this.body.getAttribute('theme-mode');
+
+      if (val !== this.state.mode) {
+        this.setState({
+          mode: val
+        });
+      }
+    };
+
     this.state = {
       mode: null
     };
@@ -54,24 +73,6 @@ class Empty extends _baseComponent.default {
     this.observer && this.observer.disconnect();
   }
 
-  observe(mutationsList) {
-    for (const mutation of mutationsList) {
-      if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
-        this.updateMode();
-      }
-    }
-  }
-
-  updateMode() {
-    const val = this.body.getAttribute('theme-mode');
-
-    if (val !== this.state.mode) {
-      this.setState({
-        mode: val
-      });
-    }
-  }
-
   render() {
     var _context;
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputProps } from '../input';
-import { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/cjs/inputNumber/foundation';
+import InputNumberFoundation, { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/cjs/inputNumber/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/inputNumber/constants';
 import '@douyinfe/semi-foundation/lib/cjs/inputNumber/inputNumber.css';
@@ -85,20 +85,21 @@ declare class InputNumber extends BaseComponent<InputNumberProps, InputNumberSta
     currentValue: number | string;
     cursorBefore: string;
     cursorAfter: string;
+    foundation: InputNumberFoundation;
     constructor(props: InputNumberProps);
     componentDidUpdate(prevProps: InputNumberProps): void;
     setInputRef: (node: HTMLInputElement) => void;
-    handleInputFocus: (e: React.FocusEvent<HTMLInputElement>) => any;
-    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => any;
-    handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => any;
-    handleInputKeyDown: (e: React.KeyboardEvent) => any;
-    handleInputMouseEnter: (e: React.MouseEvent) => any;
-    handleInputMouseLeave: (e: React.MouseEvent) => any;
-    handleInputMouseMove: (e: React.MouseEvent) => any;
-    handleUpClick: (e: React.KeyboardEvent) => any;
-    handleDownClick: (e: React.KeyboardEvent) => any;
-    handleMouseUp: (e: React.MouseEvent) => any;
-    handleMouseLeave: (e: React.MouseEvent) => any;
+    handleInputFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleInputKeyDown: (e: React.KeyboardEvent) => void;
+    handleInputMouseEnter: (e: React.MouseEvent) => void;
+    handleInputMouseLeave: (e: React.MouseEvent) => void;
+    handleInputMouseMove: (e: React.MouseEvent) => void;
+    handleUpClick: (e: React.KeyboardEvent) => void;
+    handleDownClick: (e: React.KeyboardEvent) => void;
+    handleMouseUp: (e: React.MouseEvent) => void;
+    handleMouseLeave: (e: React.MouseEvent) => void;
     renderButtons: () => JSX.Element;
     renderSuffix: () => React.ReactNode;
     render(): JSX.Element;

package/lib/cjs/inputNumber/index.js

@@ -363,7 +363,11 @@ class InputNumber extends _baseComponent.default {
           if (this.foundation.isValidNumber(parsedNum) && parsedNum !== this.state.number) {
             const obj = {
               number: parsedNum
-            }; // Updates input when a button is clicked
+            };
+            /**
+             * If you are clicking the button, it will automatically format once
+             * We need to set the status to false after trigger focus event
+             */
 
             if (this.clickUpOrDown) {
               obj.value = this.foundation.doFormat(valueStr, true);

package/lib/cjs/tabs/index.js

@@ -10,7 +10,7 @@ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-s
 
 var _forEachInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 
-var _Object$keys2 = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
@@ -25,8 +25,6 @@ var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
 
-var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
-
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
 var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
@@ -41,8 +39,6 @@ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
-var _omit2 = _interopRequireDefault(require("lodash/omit"));
-
 var _pick2 = _interopRequireDefault(require("lodash/pick"));
 
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
@@ -73,7 +69,7 @@ var _tabsContext = _interopRequireDefault(require("./tabs-context"));
 
 var _interface = require("./interface");
 
-_forEachInstanceProperty2(_context9 = _Object$keys2(_interface)).call(_context9, function (key) {
+_forEachInstanceProperty2(_context9 = _Object$keys(_interface)).call(_context9, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _interface[key]) return;
@@ -101,7 +97,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 
-const panePickKeys = (0, _keys.default)((0, _omit2.default)(_TabPane.default.propTypes, ['children']));
+const panePickKeys = ['className', 'style', 'disabled', 'itemKey', 'tab', 'icon'];
 
 class Tabs extends _baseComponent.default {
   constructor(props) {

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

@@ -152,7 +152,7 @@ declare class Transfer extends BaseComponent<TransferProps, TransferState> {
     renderHeader(headerConfig: HeaderConfig): JSX.Element;
     renderLeftItem(item: ResolvedDataItem, index: number): React.ReactNode;
     renderLeft(locale: Locale['Transfer']): React.ReactNode;
-    renderGroupTitle(group: GroupItem): JSX.Element;
+    renderGroupTitle(group: GroupItem, index: number): JSX.Element;
     renderLeftTree(): JSX.Element;
     renderLeftList(visibileItems: Array<ResolvedDataItem>): JSX.Element;
     renderRightItem(item: ResolvedDataItem): React.ReactNode;

package/lib/cjs/transfer/index.js

@@ -373,11 +373,11 @@ class Transfer extends _baseComponent.default {
     }, inputCom, content);
   }
 
-  renderGroupTitle(group) {
+  renderGroupTitle(group, index) {
     const groupCls = (0, _classnames.default)("".concat(prefixcls, "-group-title"));
     return /*#__PURE__*/_react.default.createElement("div", {
       className: groupCls,
-      key: group.title
+      key: "title-".concat(index)
     }, group.title);
   }
 
@@ -432,7 +432,7 @@ class Transfer extends _baseComponent.default {
         // group content already insert
         content.push(optionContent);
       } else if (parentGroup) {
-        const groupContent = this.renderGroupTitle(parentGroup);
+        const groupContent = this.renderGroupTitle(parentGroup, index);
         groupStatus.set(parentGroup.title, true);
         content.push(groupContent);
         content.push(optionContent);

package/lib/es/_utils/index.js

@@ -147,11 +147,17 @@ export const registerMediaQuery = (media, _ref2) => {
     }
 
     callInInit && handlerMediaChange(mediaQueryList);
-    mediaQueryList.addEventListener('change', handlerMediaChange);
-    return () => mediaQueryList.removeEventListener('change', handlerMediaChange);
+
+    if (Object.prototype.hasOwnProperty.call(mediaQueryList, 'addEventListener')) {
+      mediaQueryList.addEventListener('change', handlerMediaChange);
+      return () => mediaQueryList.removeEventListener('change', handlerMediaChange);
+    }
+
+    mediaQueryList.addListener(handlerMediaChange);
+    return () => mediaQueryList.removeListener(handlerMediaChange);
   }
 
-  return null;
+  return () => undefined;
 };
 /**
  * Determine whether the incoming element is a built-in icon

package/lib/es/datePicker/datePicker.js

@@ -241,6 +241,10 @@ export default class DatePicker extends BaseComponent {
         }
 
         this.clickOutSideHandler = e => {
+          if (this.adapter.needConfirm()) {
+            return;
+          }
+
           const triggerEl = this.triggerElRef && this.triggerElRef.current;
           const panelEl = this.panelRef && this.panelRef.current;
           const isInTrigger = triggerEl && triggerEl.contains(e.target);
@@ -429,7 +433,8 @@ export default class DatePicker extends BaseComponent {
       density,
       syncSwitchMonth,
       onPanelChange,
-      timeZone
+      timeZone,
+      triggerRender
     } = this.props;
     const {
       value,
@@ -476,7 +481,8 @@ export default class DatePicker extends BaseComponent {
       syncSwitchMonth: syncSwitchMonth,
       onPanelChange: onPanelChange,
       timeZone: timeZone,
-      focusRecordsRef: this.focusRecordsRef
+      focusRecordsRef: this.focusRecordsRef,
+      triggerRender: triggerRender
     });
   }
 

package/lib/es/datePicker/monthsGrid.d.ts

@@ -49,6 +49,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         syncSwitchMonth: PropTypes.Requireable<boolean>;
         onPanelChange: PropTypes.Requireable<(...args: any[]) => any>;
         focusRecordsRef: PropTypes.Requireable<object>;
+        triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         type: string;

package/lib/es/datePicker/monthsGrid.js

@@ -664,7 +664,8 @@ MonthsGrid.propTypes = {
   syncSwitchMonth: PropTypes.bool,
   // Callback function for panel date switching
   onPanelChange: PropTypes.func,
-  focusRecordsRef: PropTypes.object
+  focusRecordsRef: PropTypes.object,
+  triggerRender: PropTypes.func
 };
 MonthsGrid.defaultProps = {
   type: 'date',

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

@@ -31,8 +31,8 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
     constructor(props: EmptyProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    observe(mutationsList: any): void;
-    updateMode(): void;
+    observe: (mutationsList: any) => void;
+    updateMode: () => void;
     render(): JSX.Element;
 }
 export {};

package/lib/es/empty/index.js

@@ -10,6 +10,25 @@ const prefixCls = cssClasses.PREFIX;
 export default class Empty extends BaseComponent {
   constructor(props) {
     super(props);
+
+    this.observe = mutationsList => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
+          this.updateMode();
+        }
+      }
+    };
+
+    this.updateMode = () => {
+      const val = this.body.getAttribute('theme-mode');
+
+      if (val !== this.state.mode) {
+        this.setState({
+          mode: val
+        });
+      }
+    };
+
     this.state = {
       mode: null
     };
@@ -33,24 +52,6 @@ export default class Empty extends BaseComponent {
     this.observer && this.observer.disconnect();
   }
 
-  observe(mutationsList) {
-    for (const mutation of mutationsList) {
-      if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
-        this.updateMode();
-      }
-    }
-  }
-
-  updateMode() {
-    const val = this.body.getAttribute('theme-mode');
-
-    if (val !== this.state.mode) {
-      this.setState({
-        mode: val
-      });
-    }
-  }
-
   render() {
     var _context;
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputProps } from '../input';
-import { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/es/inputNumber/foundation';
+import InputNumberFoundation, { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/es/inputNumber/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { strings } from '@douyinfe/semi-foundation/lib/es/inputNumber/constants';
 import '@douyinfe/semi-foundation/lib/es/inputNumber/inputNumber.css';
@@ -85,20 +85,21 @@ declare class InputNumber extends BaseComponent<InputNumberProps, InputNumberSta
     currentValue: number | string;
     cursorBefore: string;
     cursorAfter: string;
+    foundation: InputNumberFoundation;
     constructor(props: InputNumberProps);
     componentDidUpdate(prevProps: InputNumberProps): void;
     setInputRef: (node: HTMLInputElement) => void;
-    handleInputFocus: (e: React.FocusEvent<HTMLInputElement>) => any;
-    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => any;
-    handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => any;
-    handleInputKeyDown: (e: React.KeyboardEvent) => any;
-    handleInputMouseEnter: (e: React.MouseEvent) => any;
-    handleInputMouseLeave: (e: React.MouseEvent) => any;
-    handleInputMouseMove: (e: React.MouseEvent) => any;
-    handleUpClick: (e: React.KeyboardEvent) => any;
-    handleDownClick: (e: React.KeyboardEvent) => any;
-    handleMouseUp: (e: React.MouseEvent) => any;
-    handleMouseLeave: (e: React.MouseEvent) => any;
+    handleInputFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleInputKeyDown: (e: React.KeyboardEvent) => void;
+    handleInputMouseEnter: (e: React.MouseEvent) => void;
+    handleInputMouseLeave: (e: React.MouseEvent) => void;
+    handleInputMouseMove: (e: React.MouseEvent) => void;
+    handleUpClick: (e: React.KeyboardEvent) => void;
+    handleDownClick: (e: React.KeyboardEvent) => void;
+    handleMouseUp: (e: React.MouseEvent) => void;
+    handleMouseLeave: (e: React.MouseEvent) => void;
     renderButtons: () => JSX.Element;
     renderSuffix: () => React.ReactNode;
     render(): JSX.Element;

package/lib/es/inputNumber/index.js

@@ -334,7 +334,11 @@ class InputNumber extends BaseComponent {
           if (this.foundation.isValidNumber(parsedNum) && parsedNum !== this.state.number) {
             const obj = {
               number: parsedNum
-            }; // Updates input when a button is clicked
+            };
+            /**
+             * If you are clicking the button, it will automatically format once
+             * We need to set the status to false after trigger focus event
+             */
 
             if (this.clickUpOrDown) {
               obj.value = this.foundation.doFormat(valueStr, true);

package/lib/es/tabs/index.js

@@ -1,9 +1,7 @@
-import _omit from "lodash/omit";
 import _pick from "lodash/pick";
 import _isEqual from "lodash/isEqual";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -35,9 +33,7 @@ import '@douyinfe/semi-foundation/lib/es/tabs/tabs.css';
 import TabBar from './TabBar';
 import TabPane from './TabPane';
 import TabsContext from './tabs-context';
-
-const panePickKeys = _Object$keys(_omit(TabPane.propTypes, ['children']));
-
+const panePickKeys = ['className', 'style', 'disabled', 'itemKey', 'tab', 'icon'];
 export * from './interface';
 
 class Tabs extends BaseComponent {

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

@@ -152,7 +152,7 @@ declare class Transfer extends BaseComponent<TransferProps, TransferState> {
     renderHeader(headerConfig: HeaderConfig): JSX.Element;
     renderLeftItem(item: ResolvedDataItem, index: number): React.ReactNode;
     renderLeft(locale: Locale['Transfer']): React.ReactNode;
-    renderGroupTitle(group: GroupItem): JSX.Element;
+    renderGroupTitle(group: GroupItem, index: number): JSX.Element;
     renderLeftTree(): JSX.Element;
     renderLeftList(visibileItems: Array<ResolvedDataItem>): JSX.Element;
     renderRightItem(item: ResolvedDataItem): React.ReactNode;

package/lib/es/transfer/index.js

@@ -329,11 +329,11 @@ class Transfer extends BaseComponent {
     }, inputCom, content);
   }
 
-  renderGroupTitle(group) {
+  renderGroupTitle(group, index) {
     const groupCls = cls("".concat(prefixcls, "-group-title"));
     return /*#__PURE__*/React.createElement("div", {
       className: groupCls,
-      key: group.title
+      key: "title-".concat(index)
     }, group.title);
   }
 
@@ -390,7 +390,7 @@ class Transfer extends BaseComponent {
         // group content already insert
         content.push(optionContent);
       } else if (parentGroup) {
-        const groupContent = this.renderGroupTitle(parentGroup);
+        const groupContent = this.renderGroupTitle(parentGroup, index);
         groupStatus.set(parentGroup.title, true);
         content.push(groupContent);
         content.push(optionContent);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.2.0-beta.0",
+    "version": "2.2.2",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,11 +14,11 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation-react": "2.2.0-beta.0",
-        "@douyinfe/semi-foundation": "2.2.0-beta.0",
-        "@douyinfe/semi-icons": "2.2.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.2.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.2.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.2.2",
+        "@douyinfe/semi-foundation": "2.2.2",
+        "@douyinfe/semi-icons": "2.2.2",
+        "@douyinfe/semi-illustrations": "2.2.2",
+        "@douyinfe/semi-theme-default": "2.2.2",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -68,13 +68,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "e8ea6a96a5ddd73a178a797548497cd6a64eb14b",
+    "gitHead": "de84e4f81bb443c457c075e808c4bd1fcf9441d7",
     "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.2.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.2.2",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",
@@ -99,7 +99,7 @@
         "react-storybook-addon-props-combinations": "^1.1.0",
         "react-virtualized": "^9.22.3",
         "rimraf": "^3.0.2",
-        "sass": "1.32.13",
+        "sass": "1.45.0",
         "sinon": "^6.3.5",
         "terser-webpack-plugin": "^4.2.3",
         "through2": "^4.0.2",

package/tabs/index.tsx

@@ -15,7 +15,7 @@ import TabPane from './TabPane';
 import TabsContext from './tabs-context';
 import { TabsProps, PlainTab, TabBarProps } from './interface';
 
-const panePickKeys = Object.keys(omit(TabPane.propTypes, ['children']));
+const panePickKeys = ['className', 'style', 'disabled', 'itemKey', 'tab', 'icon'];
 
 export * from './interface';