@douyinfe/semi-ui 2.13.0-beta.0 → 2.14.0-beta.0

package/lib/cjs/grid/col.js

@@ -116,7 +116,8 @@ class Col extends _react.default.Component {
     } : {}), style);
     return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, others, {
       style: style,
-      className: classes
+      className: classes,
+      "x-semi-prop": "children"
     }), children);
   }
 

package/lib/cjs/grid/row.js

@@ -181,7 +181,8 @@ class Row extends _react.default.Component {
       }
     }, /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, otherProps, {
       className: classes,
-      style: rowStyle
+      style: rowStyle,
+      "x-semi-prop": "children"
     }), children));
   }
 

package/lib/cjs/iconButton/index.js

@@ -103,8 +103,10 @@ class IconButton extends _react.PureComponent {
       ["".concat(prefixCls, "-content-left")]: iconPosition === 'right',
       ["".concat(prefixCls, "-content-right")]: iconPosition === 'left'
     });
+    const xSemiProp = this.props['x-semi-children-alias'] || 'children';
     const children = originChildren != null ? /*#__PURE__*/_react.default.createElement("span", {
-      className: btnTextCls
+      className: btnTextCls,
+      "x-semi-prop": xSemiProp
     }, originChildren) : null;
 
     if (iconPosition === 'left') {

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

@@ -161,7 +161,6 @@ declare class Input extends BaseComponent<InputProps, InputState> {
     static getDerivedStateFromProps(props: InputProps, state: InputState): Partial<InputState>;
     componentDidUpdate(prevProps: InputProps): void;
     handleClear: (e: React.MouseEvent<HTMLInputElement>) => void;
-    handleClearEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     handleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
     handleMouseOver: (e: React.MouseEvent<HTMLDivElement>) => void;
     handleMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;

package/lib/cjs/input/index.js

@@ -68,10 +68,6 @@ class Input extends _baseComponent.default {
       this.foundation.handleClear(e);
     };
 
-    this.handleClearEnterPress = e => {
-      this.foundation.handleClearEnterPress(e);
-    };
-
     this.handleClick = e => {
       this.foundation.handleClick(e);
     };
@@ -210,7 +206,8 @@ class Input extends _baseComponent.default {
         ["".concat(prefixCls, "-prepend-icon")]: (0, _utils.isSemiIcon)(addonBefore)
       });
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: prefixWrapperCls
+        className: prefixWrapperCls,
+        "x-semi-prop": "addonBefore"
       }, addonBefore);
     }
 
@@ -229,7 +226,8 @@ class Input extends _baseComponent.default {
         ["".concat(prefixCls, "-append-icon")]: (0, _utils.isSemiIcon)(addonAfter)
       });
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: prefixWrapperCls
+        className: prefixWrapperCls,
+        "x-semi-prop": "addonAfter"
       }, addonAfter);
     }
 
@@ -241,14 +239,14 @@ class Input extends _baseComponent.default {
     const allowClear = this.foundation.isAllowClear(); // use onMouseDown to fix issue 1203
 
     if (allowClear) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        role: "button",
-        tabIndex: 0,
-        "aria-label": "Clear input value",
-        className: clearCls,
-        onMouseDown: this.handleClear,
-        onKeyPress: this.handleClearEnterPress
-      }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        _react.default.createElement("div", {
+          className: clearCls,
+          onMouseDown: this.handleClear
+        }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null))
+      );
     }
 
     return null;
@@ -256,9 +254,6 @@ class Input extends _baseComponent.default {
 
   renderModeBtn() {
     const {
-      value,
-      isFocus,
-      isHovering,
       eyeClosed
     } = this.state;
     const {
@@ -266,8 +261,9 @@ class Input extends _baseComponent.default {
       disabled
     } = this.props;
     const modeCls = (0, _classnames.default)("".concat(prefixCls, "-modebtn"));
-    const modeIcon = eyeClosed ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconEyeClosedSolid, null) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconEyeOpened, null);
-    const showModeBtn = mode === 'password' && value && !disabled && (isFocus || isHovering);
+    const modeIcon = eyeClosed ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconEyeClosedSolid, null) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconEyeOpened, null); // alway show password button for a11y
+
+    const showModeBtn = mode === 'password' && !disabled;
     const ariaLabel = eyeClosed ? 'Show password' : 'Hidden password';
 
     if (showModeBtn) {
@@ -303,14 +299,18 @@ class Input extends _baseComponent.default {
       ["".concat(prefixCls, "-inset-label")]: insetLabel,
       ["".concat(prefixCls, "-prefix-text")]: labelNode && (0, _isString2.default)(labelNode),
       ["".concat(prefixCls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
-    }); // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: prefixWrapperCls,
-      onMouseDown: this.handlePreventMouseDown,
-      onClick: this.handleClickPrefixOrSuffix,
-      id: insetLabelId
-    }, labelNode);
+    });
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+      _react.default.createElement("div", {
+        className: prefixWrapperCls,
+        onMouseDown: this.handlePreventMouseDown,
+        onClick: this.handleClickPrefixOrSuffix,
+        id: insetLabelId,
+        "x-semi-prop": "prefix,insetLabel"
+      }, labelNode)
+    );
   }
 
   showClearBtn() {
@@ -341,13 +341,17 @@ class Input extends _baseComponent.default {
       ["".concat(prefixCls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
       ["".concat(prefixCls, "-suffix-icon")]: (0, _utils.isSemiIcon)(suffix),
       ["".concat(prefixCls, "-suffix-hidden")]: suffixAllowClear && Boolean(hideSuffix)
-    }); // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: suffixWrapperCls,
-      onMouseDown: this.handlePreventMouseDown,
-      onClick: this.handleClickPrefixOrSuffix
-    }, suffix);
+    });
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+      _react.default.createElement("div", {
+        className: suffixWrapperCls,
+        onMouseDown: this.handlePreventMouseDown,
+        onClick: this.handleClickPrefixOrSuffix,
+        "x-semi-prop": "suffix"
+      }, suffix)
+    );
   }
 
   render() {
@@ -360,6 +364,7 @@ class Input extends _baseComponent.default {
       autofocus,
       className,
       disabled,
+      defaultValue,
       placeholder,
       prefix,
       mode,
@@ -380,7 +385,7 @@ class Input extends _baseComponent.default {
       maxLength,
       getValueLength
     } = _a,
-          rest = __rest(_a, ["addonAfter", "addonBefore", "autofocus", "className", "disabled", "placeholder", "prefix", "mode", "insetLabel", "insetLabelId", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength"]);
+          rest = __rest(_a, ["addonAfter", "addonBefore", "autofocus", "className", "disabled", "defaultValue", "placeholder", "prefix", "mode", "insetLabel", "insetLabelId", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength"]);
 
     const {
       value,
@@ -447,7 +452,7 @@ class Input extends _baseComponent.default {
     }
 
     if (validateStatus === 'error') {
-      inputProps['aria-invalid'] = "true";
+      inputProps['aria-invalid'] = 'true';
     }
 
     return (

package/lib/cjs/input/inputGroup.js

@@ -79,13 +79,12 @@ class inputGroup extends _baseComponent.default {
 
     const defaultName = 'input-group';
     return /*#__PURE__*/_react.default.createElement("div", {
-      role: "group",
-      "aria-label": "Input group",
-      "aria-disabled": this.props.disabled,
       className: groupWrapperCls
     }, label && label.text ? /*#__PURE__*/_react.default.createElement(_label.default, (0, _assign.default)({
       name: defaultName
     }, label)) : null, /*#__PURE__*/_react.default.createElement("span", {
+      role: "group",
+      "aria-disabled": this.props.disabled,
       id: label && label.name || defaultName,
       className: groupCls,
       style: this.props.style,

package/lib/cjs/input/textarea.js

@@ -63,10 +63,6 @@ class TextArea extends _baseComponent.default {
       this.foundation.handleClear(e);
     };
 
-    this.handleClearEnterPress = e => {
-      this.foundation.handleClearEnterPress(e);
-    };
-
     this.setRef = node => {
       this.libRef.current = node;
       const {
@@ -191,14 +187,14 @@ class TextArea extends _baseComponent.default {
     });
 
     if (showClear) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        role: "button",
-        tabIndex: 0,
-        "aria-label": "Clear textarea value",
-        className: clearCls,
-        onClick: this.handleClear,
-        onKeyPress: this.handleClearEnterPress
-      }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        _react.default.createElement("div", {
+          className: clearCls,
+          onClick: this.handleClear
+        }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null))
+      );
     }
 
     return null;
@@ -223,9 +219,6 @@ class TextArea extends _baseComponent.default {
         ["".concat(prefixCls, "-textarea-counter-exceed")]: current > total
       });
       counter = /*#__PURE__*/_react.default.createElement("div", {
-        "aria-label": "Textarea value length counter",
-        "aria-valuemax": maxCount,
-        "aria-valuenow": current,
         className: countCls
       }, current, total ? '/' : null, total);
     } else {

package/lib/cjs/list/index.js

@@ -55,7 +55,8 @@ class List extends _baseComponent.default {
 
       if (emptyContent) {
         return /*#__PURE__*/_react.default.createElement("div", {
-          className: "".concat(_constants.cssClasses.PREFIX, "-empty")
+          className: "".concat(_constants.cssClasses.PREFIX, "-empty"),
+          "x-semi-prop": "emptyContent"
         }, emptyContent);
       } else {
         return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
@@ -140,7 +141,8 @@ class List extends _baseComponent.default {
       className: wrapperCls,
       style: style
     }, header ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(_constants.cssClasses.PREFIX, "-header")
+      className: "".concat(_constants.cssClasses.PREFIX, "-header"),
+      "x-semi-prop": "header"
     }, header) : null, /*#__PURE__*/_react.default.createElement(_listContext.default.Provider, {
       value: {
         grid,
@@ -151,7 +153,8 @@ class List extends _baseComponent.default {
       spinning: loading,
       size: "large"
     }, this.wrapChildren(childrenList, children))), footer ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(_constants.cssClasses.PREFIX, "-footer")
+      className: "".concat(_constants.cssClasses.PREFIX, "-footer"),
+      "x-semi-prop": "footer"
     }, footer) : null, loadMore ? loadMore : null);
   }
 

package/lib/cjs/modal/ConfirmModal.js

@@ -129,7 +129,8 @@ const ConfirmModal = props => {
     icon: iconNode,
     visible: visible
   }, rest), /*#__PURE__*/_react.default.createElement("div", {
-    className: contentCls
+    className: contentCls,
+    "x-semi-prop": "content"
   }, content));
 };
 

package/lib/cjs/modal/Modal.js

@@ -119,7 +119,9 @@ class Modal extends _baseComponent.default {
             loading: cancelLoading,
             type: "tertiary",
             autoFocus: true
-          }, this.props.cancelButtonProps), cancelText || locale.cancel);
+          }, this.props.cancelButtonProps, {
+            "x-semi-children-alias": "cancelText"
+          }), cancelText || locale.cancel);
         }
       };
 
@@ -131,7 +133,9 @@ class Modal extends _baseComponent.default {
         theme: "solid",
         loading: confirmLoading,
         onClick: this.handleOk
-      }, this.props.okButtonProps), okText || locale.confirm)));
+      }, this.props.okButtonProps, {
+        "x-semi-children-alias": "okText"
+      }), okText || locale.confirm)));
     }; // getDialog = () => {
     //     const {
     //         footer,

package/lib/cjs/modal/ModalContent.js

@@ -121,7 +121,9 @@ class ModalContent extends _baseComponent.default {
       let closer;
 
       if (closable) {
-        const iconType = closeIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null);
+        const iconType = closeIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+          "x-semi-prop": "closeIcon"
+        });
 
         closer = /*#__PURE__*/_react.default.createElement(_iconButton.default, {
           "aria-label": "close",
@@ -143,7 +145,8 @@ class ModalContent extends _baseComponent.default {
         icon
       } = this.props;
       return icon ? /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(_constants.cssClasses.DIALOG, "-icon-wrapper")
+        className: "".concat(_constants.cssClasses.DIALOG, "-icon-wrapper"),
+        "x-semi-prop": "icon"
       }, icon) : null;
     };
 
@@ -162,7 +165,8 @@ class ModalContent extends _baseComponent.default {
       }, icon, /*#__PURE__*/_react.default.createElement(_typography.default.Title, {
         heading: 5,
         className: "".concat(_constants.cssClasses.DIALOG, "-title"),
-        id: "".concat(_constants.cssClasses.DIALOG, "-title")
+        id: "".concat(_constants.cssClasses.DIALOG, "-title"),
+        "x-semi-prop": "title"
       }, title), closer);
     };
 
@@ -181,12 +185,14 @@ class ModalContent extends _baseComponent.default {
       return hasHeader ? /*#__PURE__*/_react.default.createElement("div", {
         className: bodyCls,
         id: "".concat(_constants.cssClasses.DIALOG, "-body"),
-        style: bodyStyle
+        style: bodyStyle,
+        "x-semi-prop": "children"
       }, children) : /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_constants.cssClasses.DIALOG, "-body-wrapper")
       }, icon, /*#__PURE__*/_react.default.createElement("div", {
         className: bodyCls,
-        style: bodyStyle
+        style: bodyStyle,
+        "x-semi-prop": "children"
       }, children), closer);
     };
 
@@ -218,7 +224,8 @@ class ModalContent extends _baseComponent.default {
       const body = this.renderBody();
       const header = this.renderHeader();
       const footer = props.footer ? /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(_constants.cssClasses.DIALOG, "-footer")
+        className: "".concat(_constants.cssClasses.DIALOG, "-footer"),
+        "x-semi-prop": "footer"
       }, props.footer) : null;
 
       const dialogElement =

package/lib/cjs/notification/notice.js

@@ -143,7 +143,8 @@ class Notice extends _baseComponent.default {
 
     if (iconType) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: iconCls
+        className: iconCls,
+        "x-semi-prop": "icon"
       }, (0, _utils.isSemiIcon)(iconType) ? /*#__PURE__*/_react.default.cloneElement(iconType, {
         size: iconType.props.size || 'large'
       }) : iconType);
@@ -201,9 +202,11 @@ class Notice extends _baseComponent.default {
         className: "".concat(prefixCls, "-content-wrapper")
       }, title ? /*#__PURE__*/_react.default.createElement("div", {
         id: titleID,
-        className: "".concat(prefixCls, "-title")
+        className: "".concat(prefixCls, "-title"),
+        "x-semi-prop": "title"
       }, title) : '', content ? /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-content")
+        className: "".concat(prefixCls, "-content"),
+        "x-semi-prop": "content"
       }, content) : ''), showClose && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
         className: "".concat(prefixCls, "-icon-close"),
         type: "tertiary",

package/lib/cjs/pagination/index.js

@@ -188,7 +188,8 @@ class Pagination extends _baseComponent.default {
       "aria-disabled": prevDisabled ? true : false,
       "aria-label": "Previous",
       onClick: e => !prevDisabled && this.foundation.goPrev(e),
-      className: preClassName
+      className: preClassName,
+      "x-semi-prop": "prevText"
     }, prevText || /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronLeft, {
       size: "large"
     }));
@@ -211,7 +212,8 @@ class Pagination extends _baseComponent.default {
       "aria-disabled": nextDisabled ? true : false,
       "aria-label": "Next",
       onClick: e => !nextDisabled && this.foundation.goNext(e),
-      className: nextClassName
+      className: nextClassName,
+      "x-semi-prop": "prevText"
     }, nextText || /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronRight, {
       size: "large"
     }));

package/lib/cjs/popconfirm/index.js

@@ -150,13 +150,16 @@ class Popconfirm extends _baseComponent.default {
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-header")
     }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "".concat(prefixCls, "-header-icon")
+      className: "".concat(prefixCls, "-header-icon"),
+      "x-semi-prop": "icon"
     }, /*#__PURE__*/_react.default.isValidElement(icon) ? icon : null), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-header-body")
     }, showTitle ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-header-title")
+      className: "".concat(prefixCls, "-header-title"),
+      "x-semi-prop": "title"
     }, title) : null, showContent ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-header-content")
+      className: "".concat(prefixCls, "-header-content"),
+      "x-semi-prop": "content"
     }, content) : null), /*#__PURE__*/_react.default.createElement(_button.default, {
       className: "".concat(prefixCls, "-btn-close"),
       icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),

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

@@ -31,11 +31,13 @@ export declare type RadioProps = {
     'aria-label'?: React.AriaAttributes['aria-label'];
     addonId?: string;
     extraId?: string;
+    name?: string;
 };
 export interface RadioState {
     hover?: boolean;
     addonId?: string;
     extraId?: string;
+    focusVisible?: boolean;
 }
 export { RadioChangeEvent };
 declare class Radio extends BaseComponent<RadioProps, RadioState> {
@@ -84,6 +86,8 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
     onChange: (e: RadioChangeEvent) => void;
     handleMouseEnter: (e: React.MouseEvent<HTMLLabelElement>) => void;
     handleMouseLeave: (e: React.MouseEvent<HTMLLabelElement>) => void;
+    handleFocusVisible: (event: React.FocusEvent) => void;
+    handleBlur: (event: React.FocusEvent) => void;
     render(): JSX.Element;
 }
 export default Radio;

package/lib/cjs/radio/radio.js

@@ -66,6 +66,14 @@ class Radio extends _baseComponent.default {
       this.foundation.setHover(false);
     };
 
+    this.handleFocusVisible = event => {
+      this.foundation.handleFocusVisible(event);
+    };
+
+    this.handleBlur = event => {
+      this.foundation.handleBlur();
+    };
+
     this.state = {
       hover: false,
       addonId: props.addonId,
@@ -95,6 +103,11 @@ class Radio extends _baseComponent.default {
             prefix: 'extra'
           })
         });
+      },
+      setFocusVisible: focusVisible => {
+        this.setState({
+          focusVisible
+        });
       }
     });
   }
@@ -128,13 +141,15 @@ class Radio extends _baseComponent.default {
       extra,
       mode,
       type,
-      value: propValue
+      value: propValue,
+      name
     } = this.props;
     let realChecked, isDisabled, realMode, isButtonRadioGroup, isCardRadioGroup, isPureCardRadioGroup, isButtonRadioComponent, buttonSize, realPrefixCls;
     const {
       hover: isHover,
       addonId,
-      extraId
+      extraId,
+      focusVisible
     } = this.state;
     let props = {};
 
@@ -161,6 +176,7 @@ class Radio extends _baseComponent.default {
 
     const isButtonRadio = typeof isButtonRadioGroup === 'undefined' ? isButtonRadioComponent : isButtonRadioGroup;
     const prefix = realPrefixCls || _constants.radioClasses.PREFIX;
+    const focusOuter = isCardRadioGroup || isPureCardRadioGroup || isButtonRadio;
     const wrapper = (0, _classnames.default)(prefix, {
       ["".concat(prefix, "-disabled")]: isDisabled,
       ["".concat(prefix, "-checked")]: realChecked,
@@ -173,25 +189,29 @@ class Radio extends _baseComponent.default {
       ["".concat(prefix, "-cardRadioGroup_checked")]: isCardRadioGroup && realChecked && !isDisabled,
       ["".concat(prefix, "-cardRadioGroup_checked_disabled")]: isCardRadioGroup && realChecked && isDisabled,
       ["".concat(prefix, "-cardRadioGroup_hover")]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
-      [className]: Boolean(className)
+      [className]: Boolean(className),
+      ["".concat(prefix, "-focus")]: focusVisible && (isCardRadioGroup || isPureCardRadioGroup)
     });
-    const name = this.isInGroup() && this.context.radioGroup.name;
+    const groupName = this.isInGroup() && this.context.radioGroup.name;
     const addonCls = (0, _classnames.default)({
       ["".concat(prefix, "-addon")]: !isButtonRadio,
       ["".concat(prefix, "-addon-buttonRadio")]: isButtonRadio,
       ["".concat(prefix, "-addon-buttonRadio-checked")]: isButtonRadio && realChecked,
       ["".concat(prefix, "-addon-buttonRadio-disabled")]: isButtonRadio && isDisabled,
       ["".concat(prefix, "-addon-buttonRadio-hover")]: isButtonRadio && !realChecked && !isDisabled && isHover,
-      [(0, _concat.default)(_context3 = "".concat(prefix, "-addon-buttonRadio-")).call(_context3, buttonSize)]: isButtonRadio && buttonSize
+      [(0, _concat.default)(_context3 = "".concat(prefix, "-addon-buttonRadio-")).call(_context3, buttonSize)]: isButtonRadio && buttonSize,
+      ["".concat(prefix, "-focus")]: focusVisible && isButtonRadio
     }, addonClassName);
 
     const renderContent = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children ? /*#__PURE__*/_react.default.createElement("span", {
       className: addonCls,
       style: addonStyle,
-      id: addonId
+      id: addonId,
+      "x-semi-prop": "children"
     }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefix, "-extra"),
-      id: extraId
+      id: extraId,
+      "x-semi-prop": "extra"
     }, extra) : null);
 
     return /*#__PURE__*/_react.default.createElement("label", {
@@ -201,7 +221,7 @@ class Radio extends _baseComponent.default {
       onMouseLeave: this.handleMouseLeave
     }, /*#__PURE__*/_react.default.createElement(_radioInner.default, (0, _assign.default)({}, this.props, props, {
       mode: realMode,
-      name: name,
+      name: name !== null && name !== void 0 ? name : groupName,
       isButtonRadio: isButtonRadio,
       isPureCardRadioGroup: isPureCardRadioGroup,
       onChange: this.onChange,
@@ -209,7 +229,10 @@ class Radio extends _baseComponent.default {
         this.radioEntity = ref;
       },
       addonId: children && addonId,
-      extraId: extra && extraId
+      extraId: extra && extraId,
+      focusInner: focusVisible && !focusOuter,
+      onInputFocus: this.handleFocusVisible,
+      onInputBlur: this.handleBlur
     })), isCardRadioGroup ? /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefix, "-isCardRadioGroup_content")
     }, renderContent()) : renderContent());

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

@@ -17,6 +17,9 @@ export interface RadioInnerProps extends BaseProps {
     addonId?: string;
     extraId?: string;
     'aria-label'?: React.AriaAttributes['aria-label'];
+    focusInner?: boolean;
+    onInputFocus?: (e: any) => void;
+    onInputBlur?: (e: any) => void;
 }
 interface RadioInnerState {
     checked?: boolean;
@@ -30,6 +33,9 @@ declare class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState>
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         mode: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
+        focusInner: PropTypes.Requireable<boolean>;
+        onInputFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onInputBlur: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         onChange: (...args: any[]) => void;

package/lib/cjs/radio/radioInner.js

@@ -93,7 +93,10 @@ class RadioInner extends _baseComponent.default {
       isPureCardRadioGroup,
       addonId,
       extraId,
-      'aria-label': ariaLabel
+      'aria-label': ariaLabel,
+      focusInner,
+      onInputFocus,
+      onInputBlur
     } = this.props;
     const {
       checked
@@ -106,6 +109,8 @@ class RadioInner extends _baseComponent.default {
       ["".concat(prefix, "-inner-pureCardRadio")]: isPureCardRadioGroup
     });
     const inner = (0, _classnames.default)({
+      ["".concat(prefix, "-focus")]: focusInner,
+      ["".concat(prefix, "-focus-border")]: focusInner && !checked,
       ["".concat(prefix, "-inner-display")]: !isButtonRadio
     });
     return /*#__PURE__*/_react.default.createElement("span", {
@@ -114,7 +119,6 @@ class RadioInner extends _baseComponent.default {
       ref: ref => {
         this.inputEntity = ref;
       },
-      // eslint-disable-next-line jsx-a11y/no-autofocus
       autoFocus: autoFocus,
       type: mode === 'advanced' ? 'checkbox' : 'radio',
       checked: Boolean(checked),
@@ -123,7 +127,9 @@ class RadioInner extends _baseComponent.default {
       name: name,
       "aria-label": ariaLabel,
       "aria-labelledby": addonId,
-      "aria-describedby": extraId
+      "aria-describedby": extraId,
+      onFocus: onInputFocus,
+      onBlur: onInputBlur
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: inner
     }, checked ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconRadio, null) : null));
@@ -138,7 +144,10 @@ RadioInner.propTypes = {
   isButtonRadio: _propTypes.default.bool,
   onChange: _propTypes.default.func,
   mode: _propTypes.default.oneOf(['advanced', '']),
-  'aria-label': _propTypes.default.string
+  'aria-label': _propTypes.default.string,
+  focusInner: _propTypes.default.bool,
+  onInputFocus: _propTypes.default.func,
+  onInputBlur: _propTypes.default.func
 };
 RadioInner.defaultProps = {
   onChange: _noop2.default,