@douyinfe/semi-ui 2.17.1 → 2.19.0-alpha.1

package/lib/cjs/checkbox/checkbox.js

@@ -151,7 +151,8 @@ class Checkbox extends _baseComponent.default {
       value,
       role,
       tabIndex,
-      id
+      id,
+      type
     } = this.props;
     const {
       checked,
@@ -184,6 +185,9 @@ class Checkbox extends _baseComponent.default {
       props.isCardType = isCardType;
       props.isPureCardType = isPureCardType;
       props['name'] = this.context.checkboxGroup.name;
+    } else {
+      props.isPureCardType = type === _constants.strings.TYPE_PURECARD;
+      props.isCardType = type === _constants.strings.TYPE_CARD || props.isPureCardType;
     }
 
     const prefix = prefixCls || _constants.checkboxClasses.PREFIX;
@@ -274,14 +278,16 @@ Checkbox.propTypes = {
   index: _propTypes.default.number,
   'aria-label': _propTypes.default.string,
   tabIndex: _propTypes.default.number,
-  preventScroll: _propTypes.default.bool
+  preventScroll: _propTypes.default.bool,
+  type: _propTypes.default.string
 };
 Checkbox.defaultProps = {
   defaultChecked: false,
   indeterminate: false,
   onChange: _noop2.default,
   onMouseEnter: _noop2.default,
-  onMouseLeave: _noop2.default
+  onMouseLeave: _noop2.default,
+  type: 'default'
 };
 var _default = Checkbox;
 exports.default = _default;

package/lib/cjs/checkbox/checkboxGroup.js

@@ -118,7 +118,8 @@ class CheckboxGroup extends _baseComponent.default {
             key: index,
             disabled: this.props.disabled,
             value: option,
-            prefixCls: prefixCls
+            prefixCls: prefixCls,
+            type: type
           }, option);
         } else {
           return /*#__PURE__*/_react.default.createElement(_checkbox.default, {
@@ -130,7 +131,8 @@ class CheckboxGroup extends _baseComponent.default {
             extra: option.extra,
             className: option.className,
             style: option.style,
-            onChange: option.onChange
+            onChange: option.onChange,
+            type: type
           }, option.label);
         }
       });

package/lib/cjs/form/baseForm.d.ts

@@ -126,7 +126,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         onListScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
         children?: React.ReactNode;
         preventScroll?: boolean;
-    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+    } & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
     static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
     static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
     static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;

package/lib/cjs/form/field.d.ts

@@ -74,7 +74,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onListScroll?: (e: import("react").UIEvent<HTMLDivElement, UIEvent>) => void;
     children?: import("react").ReactNode;
     preventScroll?: boolean;
-} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;

package/lib/cjs/form/hoc/withField.js

@@ -136,7 +136,8 @@ function withField(Component, opts) {
       if (arrayFieldState) {
         initVal = arrayFieldState.shouldUseInitValue && typeof initValue !== 'undefined' ? initValue : initValueInFormOpts;
       }
-    } catch (err) {}
+    } catch (err) {} // FIXME typeof initVal
+
 
     const [value, setValue, getVal] = (0, _index.useStateWithGetter)(typeof initVal !== undefined ? initVal : null);
     const validateOnMount = (0, _includes.default)(trigger).call(trigger, 'mount');

package/lib/cjs/form/label.d.ts

@@ -1,22 +1,23 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 export interface LabelProps {
+    /** text-align of label */
+    align?: string;
+    className?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
     id?: string;
     /** Whether to display the required * symbol */
     required?: boolean;
     /** Content of label */
     text?: React.ReactNode;
-    disabled?: boolean;
     /** Used to configure the htmlFor attribute of the label tag */
     name?: string;
-    /** text-align of label */
-    align?: string;
     /** width of label */
     width?: number | string;
     style?: React.CSSProperties;
-    className?: string;
-    children?: React.ReactNode;
     extra?: React.ReactNode;
+    optional?: boolean;
 }
 export default class Label extends PureComponent<LabelProps> {
     static defaultProps: {
@@ -24,6 +25,7 @@ export default class Label extends PureComponent<LabelProps> {
         name: string;
         align: string;
         className: string;
+        optional: boolean;
     };
     static propTypes: {
         id: PropTypes.Requireable<string>;
@@ -37,6 +39,7 @@ export default class Label extends PureComponent<LabelProps> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         extra: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        optional: PropTypes.Requireable<boolean>;
     };
     render(): JSX.Element;
 }

package/lib/cjs/form/label.js

@@ -22,6 +22,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/form/constants");
 
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -41,7 +43,8 @@ class Label extends _react.PureComponent {
       style,
       className,
       extra,
-      id
+      id,
+      optional
     } = this.props;
     const labelCls = (0, _classnames.default)(className, {
       ["".concat(prefixCls, "-field-label")]: true,
@@ -54,10 +57,16 @@ class Label extends _react.PureComponent {
     const labelStyle = style ? style : {};
     width ? labelStyle.width = width : null;
 
+    const optionalText = /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+      componentName: "Form"
+    }, locale => /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(prefixCls, "-field-label-optional-text")
+    }, locale.optional));
+
     const textContent = /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-field-label-text"),
       "x-semi-prop": "label"
-    }, typeof text !== 'undefined' ? text : children);
+    }, typeof text !== 'undefined' ? text : children, optional ? optionalText : null);
 
     const contentWithExtra = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, textContent, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-field-label-extra")
@@ -78,7 +87,8 @@ Label.defaultProps = {
   required: false,
   name: '',
   align: 'left',
-  className: ''
+  className: '',
+  optional: false
 };
 Label.propTypes = {
   id: _propTypes.default.string,
@@ -91,5 +101,6 @@ Label.propTypes = {
   width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   style: _propTypes.default.object,
   className: _propTypes.default.string,
-  extra: _propTypes.default.node
+  extra: _propTypes.default.node,
+  optional: _propTypes.default.bool
 };

package/lib/cjs/locale/interface.d.ts

@@ -148,4 +148,7 @@ export interface Locale {
         total: string;
         selected: string;
     };
+    Form: {
+        optional: string;
+    };
 }

package/lib/cjs/locale/source/ar.js

@@ -158,6 +158,9 @@ const local = {
     clearSelectAll: 'إلغاء تحديد الكل',
     total: 'مجموع ${total} العناصر',
     selected: '${total} العناصر المحدد'
+  },
+  Form: {
+    optional: '(اختياري)'
   }
 }; // [i18n-Arabic]
 

package/lib/cjs/locale/source/de.js

@@ -158,6 +158,9 @@ const local = {
     clearSelectAll: 'Alles abwählen',
     total: 'Gesamt ${total} Artikel',
     selected: '${total} ausgewählte Artikel'
+  },
+  Form: {
+    optional: '(Optional)'
   }
 }; // [i18n-German]
 

package/lib/cjs/locale/source/en_GB.js

@@ -158,6 +158,9 @@ const local = {
     clearSelectAll: 'Unselect all',
     total: 'Total ${total} items',
     selected: '${total} items selected'
+  },
+  Form: {
+    optional: '(optional)'
   }
 }; // [i18n-English(GB)]
 

package/lib/cjs/locale/source/en_US.js

@@ -158,6 +158,9 @@ const local = {
     clearSelectAll: 'Unselect all',
     total: 'Total ${total} items',
     selected: '${total} items selected'
+  },
+  Form: {
+    optional: '(optional)'
   }
 }; // [i18n-English(US)]
 

package/lib/cjs/locale/source/es.js

@@ -162,6 +162,9 @@ const locale = {
     clearSelectAll: 'Deseleccionar todo',
     total: 'Total ${total} objetos',
     selected: '${total} objetos seleccionados'
+  },
+  Form: {
+    optional: '(opcional)'
   }
 };
 var _default = locale;

package/lib/cjs/locale/source/fr.js

@@ -158,6 +158,9 @@ const local = {
     clearSelectAll: 'Désélectionner tout',
     total: 'Totale ${total} articles',
     selected: '${total} articles sélectionnés'
+  },
+  Form: {
+    optional: '(optionnel)'
   }
 }; // [i18n-French]
 

package/lib/cjs/locale/source/id_ID.js

@@ -158,6 +158,9 @@ const local = {
     clearSelectAll: 'Nyahpilih Semua',
     total: 'Total ${total} proyek',
     selected: '${total} item dipilih'
+  },
+  Form: {
+    optional: '(opsional)'
   }
 }; // [i18n-Indonesia(ID)]
 

package/lib/cjs/locale/source/it.js

@@ -158,6 +158,9 @@ const local = {
     clearSelectAll: 'Deseleziona tutto',
     total: 'Totale ${total} elementi',
     selected: '${total} elementi selezionati'
+  },
+  Form: {
+    optional: '(opzionale)'
   }
 }; // [i18n-Italian]
 

package/lib/cjs/locale/source/ja_JP.js

@@ -159,6 +159,9 @@ const local = {
     clearSelectAll: 'すべてを選択解除',
     total: '合計 ${total} アイテム',
     selected: '選択済み ${total} アイテム'
+  },
+  Form: {
+    optional: '(オプション)'
   }
 }; // [i18n-Japan]
 

package/lib/cjs/locale/source/ko_KR.js

@@ -159,6 +159,9 @@ const local = {
     clearSelectAll: '모두 선택 취소',
     total: '총 {total} 개 항목',
     selected: '선택된 {Total} 개 항목'
+  },
+  Form: {
+    optional: '(선택 과목)'
   }
 }; // [i18n-Korea]
 

package/lib/cjs/locale/source/ms_MY.js

@@ -158,6 +158,9 @@ const local = {
     clearSelectAll: 'Nyahpilih semua',
     total: 'Jumlah ${total} item',
     selected: '${total} projek dipilih'
+  },
+  Form: {
+    optional: '(pilihan)'
   }
 }; // [i18n-Malaysia(MY)]
 

package/lib/cjs/locale/source/pt_BR.js

@@ -166,6 +166,9 @@ const local = {
     clearSelectAll: 'Cancelar selecionar tudo',
     total: 'Total de ${total} itens',
     selected: '${total} itens selecionados'
+  },
+  Form: {
+    optional: '(opcional)'
   }
 }; // 葡萄牙语
 

package/lib/cjs/locale/source/ru_RU.js

@@ -161,6 +161,9 @@ const local = {
     clearSelectAll: 'Снять выделение',
     total: 'Всего ${total} элементов',
     selected: 'Выбрано ${total} элементов'
+  },
+  Form: {
+    optional: '(по желанию)'
   }
 }; // [i18n-Russia] 俄罗斯语
 

package/lib/cjs/locale/source/th_TH.js

@@ -162,6 +162,9 @@ const local = {
     clearSelectAll: 'ยกเลิกการเลือกทั้งหมด',
     total: 'รวม ${total} รายการ',
     selected: 'เลือก ${total} รายการ'
+  },
+  Form: {
+    optional: '(ไม่จำเป็น)'
   }
 }; // [i18n-Thai]
 

package/lib/cjs/locale/source/tr_TR.js

@@ -161,6 +161,9 @@ const local = {
     clearSelectAll: 'Tümünün seçimini kaldır',
     total: 'Toplam ${total} öğe',
     selected: '${total} öğe seçildi'
+  },
+  Form: {
+    optional: '(isteğe bağlı)'
   }
 }; // [i18n-Turkish] 
 

package/lib/cjs/locale/source/vi_VN.js

@@ -161,6 +161,9 @@ const local = {
     clearSelectAll: 'Bỏ chọn tất cả',
     total: 'Tổng số ${total} mặt hàng',
     selected: '${total} mục được chọn'
+  },
+  Form: {
+    optional: '(không bắt buộc)'
   }
 }; // [i18n-Vietnam] 越南语
 

package/lib/cjs/locale/source/zh_CN.js

@@ -159,6 +159,9 @@ const local = {
     clearSelectAll: '取消全选',
     total: '共 ${total} 项',
     selected: '已选 ${total} 项'
+  },
+  Form: {
+    optional: '（可选）'
   }
 }; // 中文
 

package/lib/cjs/locale/source/zh_TW.js

@@ -159,6 +159,9 @@ const local = {
     clearSelectAll: '取消全選',
     total: '共 ${total} 項',
     selected: '已選 ${total} 項'
+  },
+  Form: {
+    optional: '（可選）'
   }
 }; // 中文
 

package/lib/cjs/modal/Modal.js

@@ -164,14 +164,6 @@ class Modal extends _baseComponent.default {
       let style = styleFromProps;
       const maskStyle = maskStyleFromProps;
       const renderFooter = 'footer' in this.props ? footer : this.renderFooter();
-
-      if (this.props.centered) {
-        style = (0, _assign.default)({
-          transform: 'translateY(-50%)',
-          top: '50%'
-        }, style);
-      }
-
       let wrapperStyle = {
         zIndex
       };

package/lib/cjs/modal/ModalContent.js

@@ -376,7 +376,10 @@ class ModalContent extends _baseComponent.default {
     }, this.getMaskElement(), /*#__PURE__*/_react.default.createElement("div", {
       role: "none",
       tabIndex: -1,
-      className: "".concat(_constants.cssClasses.DIALOG, "-wrap"),
+      className: (0, _classnames.default)({
+        ["".concat(_constants.cssClasses.DIALOG, "-wrap")]: true,
+        ["".concat(_constants.cssClasses.DIALOG, "-wrap-center")]: this.props.centered
+      }),
       onClick: maskClosable ? this.onMaskClick : null,
       onMouseUp: maskClosable ? this.onMaskMouseUp : null
     }, this.getDialogElement())); // eslint-disable-next-line max-len

package/lib/cjs/radio/radio.d.ts

@@ -39,6 +39,7 @@ export interface RadioState {
     addonId?: string;
     extraId?: string;
     focusVisible?: boolean;
+    checked?: boolean;
 }
 export { RadioChangeEvent };
 declare class Radio extends BaseComponent<RadioProps, RadioState> {
@@ -71,6 +72,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
     addonId: string;
     extraId: string;
     constructor(props: RadioProps);
+    componentDidUpdate(prevProps: RadioProps): void;
     get adapter(): RadioAdapter;
     isInGroup(): {
         value?: string | number;

package/lib/cjs/radio/radio.js

@@ -14,6 +14,10 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _isBoolean2 = _interopRequireDefault(require("lodash/isBoolean"));
+
+var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
+
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -53,6 +57,7 @@ class Radio extends _baseComponent.default {
         radioGroup.onChange && radioGroup.onChange(e);
       }
 
+      !('checked' in this.props) && this.foundation.setChecked(e.target.checked);
       onChange && onChange(e);
     };
 
@@ -77,12 +82,23 @@ class Radio extends _baseComponent.default {
     this.state = {
       hover: false,
       addonId: props.addonId,
-      extraId: props.extraId
+      extraId: props.extraId,
+      checked: props.checked || props.defaultChecked || false
     };
     this.foundation = new _radioFoundation.default(this.adapter);
     this.radioEntity = null;
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.checked !== prevProps.checked) {
+      if ((0, _isUndefined2.default)(this.props.checked)) {
+        this.foundation.setChecked(false);
+      } else if ((0, _isBoolean2.default)(this.props.checked)) {
+        this.foundation.setChecked(this.props.checked);
+      }
+    }
+  }
+
   get adapter() {
     return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
       setHover: hover => {
@@ -97,6 +113,11 @@ class Radio extends _baseComponent.default {
           })
         });
       },
+      setChecked: checked => {
+        this.setState({
+          checked
+        });
+      },
       setExtraId: () => {
         this.setState({
           extraId: (0, _uuid.getUuidShort)({
@@ -131,7 +152,6 @@ class Radio extends _baseComponent.default {
     const {
       addonClassName,
       addonStyle,
-      checked,
       disabled,
       style,
       className,
@@ -149,9 +169,13 @@ class Radio extends _baseComponent.default {
       hover: isHover,
       addonId,
       extraId,
-      focusVisible
+      focusVisible,
+      checked
     } = this.state;
-    let props = {};
+    const props = {
+      checked,
+      disabled
+    };
 
     if (this.isInGroup()) {
       realChecked = this.context.radioGroup.value === propValue;
@@ -162,16 +186,17 @@ class Radio extends _baseComponent.default {
       isPureCardRadioGroup = this.context.radioGroup.isPureCardRadio;
       buttonSize = this.context.radioGroup.buttonSize;
       realPrefixCls = prefixCls || this.context.radioGroup.prefixCls;
-      props = {
-        checked: realChecked,
-        disabled: isDisabled
-      };
+      props.checked = realChecked;
+      props.disabled = isDisabled;
     } else {
       realChecked = checked;
       isDisabled = disabled;
       realMode = mode;
       isButtonRadioComponent = type === 'button';
       realPrefixCls = prefixCls;
+      isButtonRadioGroup = type === _constants.strings.TYPE_BUTTON;
+      isPureCardRadioGroup = type === _constants.strings.TYPE_PURECARD;
+      isCardRadioGroup = type === _constants.strings.TYPE_CARD || isPureCardRadioGroup;
     }
 
     const isButtonRadio = typeof isButtonRadioGroup === 'undefined' ? isButtonRadioComponent : isButtonRadioGroup;

package/lib/cjs/radio/radioGroup.js

@@ -124,7 +124,8 @@ class RadioGroup extends _baseComponent.default {
           return /*#__PURE__*/_react.default.createElement(_radio.default, {
             key: index,
             disabled: this.props.disabled,
-            value: option
+            value: option,
+            type: type
           }, option);
         } else {
           return /*#__PURE__*/_react.default.createElement(_radio.default, {
@@ -133,7 +134,8 @@ class RadioGroup extends _baseComponent.default {
             value: option.value,
             extra: option.extra,
             className: option.className,
-            style: option.style
+            style: option.style,
+            type: type
           }, option.label);
         }
       });

package/lib/cjs/tag/group.d.ts

@@ -14,6 +14,7 @@ export interface TagGroupProps<T> {
     popoverProps?: PopoverProps;
     avatarShape?: AvatarShape;
     mode?: string;
+    onTagClose: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
 }
 export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
     static defaultProps: {
@@ -21,6 +22,7 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
         className: string;
         size: string;
         avatarShape: string;
+        onTagClose: () => any;
     };
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -31,6 +33,7 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
         tagList: PropTypes.Requireable<any[]>;
         size: PropTypes.Requireable<string>;
         mode: PropTypes.Requireable<string>;
+        onTagClose: PropTypes.Requireable<(...args: any[]) => any>;
         showPopover: PropTypes.Requireable<boolean>;
         popoverProps: PropTypes.Requireable<object>;
         avatarShape: PropTypes.Requireable<string>;

package/lib/cjs/tag/group.js

@@ -100,9 +100,10 @@ class TagGroup extends _react.PureComponent {
       tagList,
       size,
       mode,
-      avatarShape
+      avatarShape,
+      onTagClose
     } = this.props;
-    const renderTags = (0, _map.default)(tagList).call(tagList, (tag, index) => {
+    const renderTags = (0, _map.default)(tagList).call(tagList, tag => {
       if (mode === 'custom') {
         return tag;
       }
@@ -115,9 +116,24 @@ class TagGroup extends _react.PureComponent {
         tag.avatarShape = avatarShape;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({
-        key: "".concat(index, "-tag")
-      }, tag));
+      if (!tag.tagKey) {
+        if (typeof tag.children === 'string' || typeof tag.children === 'number') {
+          tag.tagKey = tag.children;
+        } else {
+          tag.tagKey = Math.random();
+        }
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({}, tag, {
+        key: tag.tagKey,
+        onClose: (tagChildren, e, tagKey) => {
+          if (tag.onClose) {
+            tag.onClose(tagChildren, e, tagKey);
+          }
+
+          onTagClose && onTagClose(tagChildren, e, tagKey);
+        }
+      }));
     });
     return renderTags;
   }
@@ -150,7 +166,8 @@ TagGroup.defaultProps = {
   style: {},
   className: '',
   size: tagSize[0],
-  avatarShape: 'square'
+  avatarShape: 'square',
+  onTagClose: () => undefined
 };
 TagGroup.propTypes = {
   children: _propTypes.default.node,
@@ -161,6 +178,7 @@ TagGroup.propTypes = {
   tagList: _propTypes.default.array,
   size: _propTypes.default.oneOf(tagSize),
   mode: _propTypes.default.string,
+  onTagClose: _propTypes.default.func,
   showPopover: _propTypes.default.bool,
   popoverProps: _propTypes.default.object,
   avatarShape: _propTypes.default.oneOf(avatarShapeSet)