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

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

@@ -6,7 +6,7 @@ import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError } from './interface';
 import { Locale } from '../locale/interface';
 import '@douyinfe/semi-foundation/lib/es/upload/upload.css';
-export { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, BeforeUploadObjectResult, AfterUploadResult };
+export { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, BeforeUploadObjectResult, AfterUploadResult, };
 export interface UploadProps {
     accept?: string;
     action: string;

package/lib/es/upload/index.js

@@ -230,7 +230,9 @@ class Upload extends BaseComponent {
         });
       }
 
-      const addContent = /*#__PURE__*/React.createElement("div", _Object$assign({}, addContentProps), children);
+      const addContent = /*#__PURE__*/React.createElement("div", _Object$assign({}, addContentProps, {
+        "x-semi-prop": "children"
+      }), children);
 
       if (!showUploadList || !fileList.length) {
         if (showAddTriggerInList) {
@@ -363,15 +365,18 @@ class Upload extends BaseComponent {
         onDragEnter: this.onDragEnter,
         onClick: this.onClick
       }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-icon")
+        className: "".concat(dragAreaBaseCls, "-icon"),
+        "x-semi-prop": "dragIcon"
       }, dragIcon || /*#__PURE__*/React.createElement(IconUpload, {
         size: "extra-large"
       })), /*#__PURE__*/React.createElement("div", {
         className: "".concat(dragAreaBaseCls, "-text")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-main-text")
+        className: "".concat(dragAreaBaseCls, "-main-text"),
+        "x-semi-prop": "dragMainText"
       }, dragMainText || locale.mainText), /*#__PURE__*/React.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-sub-text")
+        className: "".concat(dragAreaBaseCls, "-sub-text"),
+        "x-semi-prop": "dragSubText"
       }, dragSubText), /*#__PURE__*/React.createElement("div", {
         className: "".concat(dragAreaBaseCls, "-tips")
       }, dragAreaStatus === strings.DRAG_AREA_LEGAL && /*#__PURE__*/React.createElement("span", {
@@ -557,9 +562,11 @@ class Upload extends BaseComponent {
       className: inputReplaceCls,
       ref: this.replaceInputRef
     }), this.renderAddContent(), prompt ? /*#__PURE__*/React.createElement("div", {
-      className: promptCls
+      className: promptCls,
+      "x-semi-prop": "prompt"
     }, prompt) : null, validateMessage ? /*#__PURE__*/React.createElement("div", {
-      className: validateMsgCls
+      className: validateMsgCls,
+      "x-semi-prop": "validateMessage"
     }, validateMessage) : null, this.renderFileList());
   }
 

package/list/index.tsx

@@ -71,7 +71,11 @@ class List<T = any> extends BaseComponent<ListProps<T>> {
     renderEmpty = () => {
         const { emptyContent } = this.props;
         if (emptyContent) {
-            return (<div className={`${cssClasses.PREFIX}-empty`}>{emptyContent}</div>);
+            return (
+                <div className={`${cssClasses.PREFIX}-empty`} x-semi-prop="emptyContent">
+                    {emptyContent}
+                </div>
+            );
         } else {
             return (
                 <LocaleConsumer componentName="List">
@@ -152,19 +156,27 @@ class List<T = any> extends BaseComponent<ListProps<T>> {
         }
         return (
             <div className={wrapperCls} style={style}>
-                {header ? <div className={`${cssClasses.PREFIX}-header`}>{header}</div> : null}
+                {header ? (
+                    <div className={`${cssClasses.PREFIX}-header`} x-semi-prop="header">
+                        {header}
+                    </div>
+                ) : null}
                 <ListContext.Provider
                     value={{
                         grid,
                         onRightClick,
-                        onClick
+                        onClick,
                     }}
                 >
                     <Spin spinning={loading} size="large">
                         {this.wrapChildren(childrenList, children)}
                     </Spin>
                 </ListContext.Provider>
-                {footer ? <div className={`${cssClasses.PREFIX}-footer`}>{footer}</div> : null}
+                {footer ? (
+                    <div className={`${cssClasses.PREFIX}-footer`} x-semi-prop="footer">
+                        {footer}
+                    </div>
+                ) : null}
                 {loadMore ? loadMore : null}
             </div>
         );

package/modal/ConfirmModal.tsx

@@ -81,7 +81,7 @@ const ConfirmModal = (props: ConfirmProps) => {
             visible={visible}
             {...rest}
         >
-            <div className={contentCls}>{content}</div>
+            <div className={contentCls} x-semi-prop="content">{content}</div>
         </Modal>
     );
 };

package/modal/Modal.tsx

@@ -292,6 +292,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                         type="tertiary"
                         autoFocus={true}
                         {...this.props.cancelButtonProps}
+                        x-semi-children-alias="cancelText"
                     >
                         {cancelText || locale.cancel}
                     </Button>
@@ -311,6 +312,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                             loading={confirmLoading}
                             onClick={this.handleOk}
                             {...this.props.okButtonProps}
+                            x-semi-children-alias="okText"
                         >
                             {okText || locale.confirm}
                         </Button>

package/modal/ModalContent.tsx

@@ -163,7 +163,7 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
         } = this.props;
         let closer;
         if (closable) {
-            const iconType = closeIcon || <IconClose/>;
+            const iconType = closeIcon || <IconClose x-semi-prop="closeIcon" />;
             closer = (
                 <Button
                     aria-label="close"
@@ -182,7 +182,7 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
 
     renderIcon = () => {
         const { icon } = this.props;
-        return icon ? <span className={`${cssClasses.DIALOG}-icon-wrapper`}>{icon}</span> : null;
+        return icon ? <span className={`${cssClasses.DIALOG}-icon-wrapper`} x-semi-prop="icon">{icon}</span> : null;
     };
 
     renderHeader = () => {
@@ -197,8 +197,14 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             (
                 <div className={`${cssClasses.DIALOG}-header`}>
                     {icon}
-                    <Typography.Title heading={5} className={`${cssClasses.DIALOG}-title`}
-                        id={`${cssClasses.DIALOG}-title`}>{title}</Typography.Title>
+                    <Typography.Title
+                        heading={5}
+                        className={`${cssClasses.DIALOG}-title`}
+                        id={`${cssClasses.DIALOG}-title`}
+                        x-semi-prop="title"
+                    >
+                        {title}
+                    </Typography.Title>
                     {closer}
                 </div>
             );
@@ -216,16 +222,19 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
         const closer = this.renderCloseBtn();
         const icon = this.renderIcon();
         const hasHeader = title !== null && title !== undefined || 'header' in this.props;
-        return hasHeader ?
-            <div className={bodyCls} id={`${cssClasses.DIALOG}-body`} style={bodyStyle}>{children}</div> :
-            (
-                <div className={`${cssClasses.DIALOG}-body-wrapper`}>
-                    {icon}
-                    <div className={bodyCls} style={bodyStyle}>{children}</div>
-                    {closer}
+        return hasHeader ? (
+            <div className={bodyCls} id={`${cssClasses.DIALOG}-body`} style={bodyStyle} x-semi-prop="children">
+                {children}
+            </div>
+        ) : (
+            <div className={`${cssClasses.DIALOG}-body-wrapper`}>
+                {icon}
+                <div className={bodyCls} style={bodyStyle} x-semi-prop="children">
+                    {children}
                 </div>
-            );
-
+                {closer}
+            </div>
+        );
     };
 
     getDialogElement = () => {
@@ -248,7 +257,11 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
         }
         const body = this.renderBody();
         const header = this.renderHeader();
-        const footer = props.footer ? <div className={`${cssClasses.DIALOG}-footer`}>{props.footer}</div> : null;
+        const footer = props.footer ? (
+            <div className={`${cssClasses.DIALOG}-footer`} x-semi-prop="footer">
+                {props.footer}
+            </div>
+        ) : null;
         const dialogElement = (
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             <div

package/notification/notice.tsx

@@ -106,7 +106,7 @@ class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
         }
         if (iconType) {
             return (
-                <div className={iconCls}>
+                <div className={iconCls} x-semi-prop="icon">
                     {isSemiIcon(iconType) ? React.cloneElement(iconType, { size: iconType.props.size || 'large' }) : iconType}
                 </div>
             );
@@ -170,14 +170,26 @@ class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
                 <div>{this.renderTypeIcon()}</div>
                 <div className={`${prefixCls}-inner`}>
                     <div className={`${prefixCls}-content-wrapper`}>
-                        {title ? <div id={titleID} className={`${prefixCls}-title`}>{title}</div> : ''}
-                        {content ? <div className={`${prefixCls}-content`}>{content}</div> : ''}
+                        {title ? (
+                            <div id={titleID} className={`${prefixCls}-title`} x-semi-prop="title">
+                                {title}
+                            </div>
+                        ) : (
+                            ''
+                        )}
+                        {content ? (
+                            <div className={`${prefixCls}-content`} x-semi-prop="content">
+                                {content}
+                            </div>
+                        ) : (
+                            ''
+                        )}
                     </div>
                     {showClose && (
                         <Button
                             className={`${prefixCls}-icon-close`}
                             type="tertiary"
-                            icon={<IconClose/>}
+                            icon={<IconClose />}
                             theme="borderless"
                             size="small"
                             onClick={this.close}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.13.0",
+    "version": "2.14.0-beta.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,11 +15,11 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.13.0",
-        "@douyinfe/semi-foundation": "2.13.0",
-        "@douyinfe/semi-icons": "2.13.0",
-        "@douyinfe/semi-illustrations": "2.13.0",
-        "@douyinfe/semi-theme-default": "2.13.0",
+        "@douyinfe/semi-animation-react": "2.14.0-beta.1",
+        "@douyinfe/semi-foundation": "2.14.0-beta.1",
+        "@douyinfe/semi-icons": "2.14.0-beta.1",
+        "@douyinfe/semi-illustrations": "2.14.0-beta.1",
+        "@douyinfe/semi-theme-default": "2.14.0-beta.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "27671f7d0a04e5569c6bf16c0c6ea6c547a77016",
+    "gitHead": "7c7bcfeba01bbe507ab38f4b0354e2e7d79868a0",
     "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.13.0",
+        "@douyinfe/semi-scss-compile": "2.14.0-beta.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/pagination/index.tsx

@@ -216,7 +216,14 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
             [`${prefixCls}-item-disabled`]: prevDisabled,
         });
         return (
-            <li role="button" aria-disabled={prevDisabled ? true : false} aria-label="Previous" onClick={e => !prevDisabled && this.foundation.goPrev(e)} className={preClassName}>
+            <li
+                role="button"
+                aria-disabled={prevDisabled ? true : false}
+                aria-label="Previous"
+                onClick={e => !prevDisabled && this.foundation.goPrev(e)}
+                className={preClassName}
+                x-semi-prop="prevText"
+            >
                 {prevText || <IconChevronLeft size="large" />}
             </li>
         );
@@ -231,7 +238,14 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
             [`${prefixCls}-next`]: true,
         });
         return (
-            <li role="button" aria-disabled={nextDisabled ? true : false} aria-label="Next" onClick={e => !nextDisabled && this.foundation.goNext(e)} className={nextClassName}>
+            <li
+                role="button"
+                aria-disabled={nextDisabled ? true : false}
+                aria-label="Next"
+                onClick={e => !nextDisabled && this.foundation.goNext(e)}
+                className={nextClassName}
+                x-semi-prop="prevText"
+            >
                 {nextText || <IconChevronRight size="large" />}
             </li>
         );

package/popconfirm/index.tsx

@@ -174,12 +174,20 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
             <div className={popCardCls} onClick={this.stopImmediatePropagation} style={style}>
                 <div className={`${prefixCls}-inner`}>
                     <div className={`${prefixCls}-header`}>
-                        <i className={`${prefixCls}-header-icon`}>
+                        <i className={`${prefixCls}-header-icon`} x-semi-prop="icon">
                             {React.isValidElement(icon) ? icon : null}
                         </i>
                         <div className={`${prefixCls}-header-body`}>
-                            {showTitle ? <div className={`${prefixCls}-header-title`}>{title}</div> : null}
-                            {showContent ? <div className={`${prefixCls}-header-content`}>{content}</div> : null}
+                            {showTitle ? (
+                                <div className={`${prefixCls}-header-title`} x-semi-prop="title">
+                                    {title}
+                                </div>
+                            ) : null}
+                            {showContent ? (
+                                <div className={`${prefixCls}-header-content`} x-semi-prop="content">
+                                    {content}
+                                </div>
+                            ) : null}
                         </div>
                         <Button
                             className={`${prefixCls}-btn-close`}

package/radio/_story/radio.stories.js

@@ -34,13 +34,14 @@ _Radio.story = {
 export const RadioWithExtra = () => {
   return (
     <>
-      <Radio value="1" extra="这是辅助的文本，同厂辅助文本会更长一些，甚至还可能换行">
+      <Radio value="1" extra="这是辅助的文本，同厂辅助文本会更长一些，甚至还可能换行" name="demo-radio-1">
         示例文本
       </Radio>
       <Radio
         style={{ width: 200 }}
         value="1"
         extra="这是辅助的文本，同厂辅助文本会更长一些，甚至还可能换行"
+        name="demo-radio-2"
       >
         示例文本
       </Radio>
@@ -227,13 +228,13 @@ export const _RadioGroup = () => {
   return (
     <div>
       value=1
-      <RadioGroup name="pie" value="1" onChange={onChange}>
+      <RadioGroup name="pie1" value="1" onChange={onChange}>
         <Radio value="1">111</Radio>
         <Radio value="2">222</Radio>
       </RadioGroup>
       <br />
       defaultValue=1
-      <RadioGroup name="pie" defaultValue="1" onChange={onChange}>
+      <RadioGroup name="pie2" defaultValue="1" onChange={onChange}>
         <Radio value="1">111</Radio>
         <Radio value="2">222</Radio>
       </RadioGroup>
@@ -316,6 +317,8 @@ const RadioWithAdvancedMode = () => {
         onChange={e => {
           console.log(e);
           setChecked(e.target.checked);
+          e.stopPropagation();
+          e.preventDefault();
         }}
       >
         111
@@ -434,19 +437,19 @@ export const RadioGroupButtonStyle = () => {
     };
     return (
       <Space vertical spacing="loose" align="start">
-        <RadioGroup type="button" buttonSize="small" onChange={onChange1} value={value1}>
+        <RadioGroup type="button" buttonSize="small" onChange={onChange1} value={value1} name="demo-radio-button-1">
           <Radio value={1}>semi</Radio>
           <Radio value={2}>pipixia</Radio>
           <Radio value={3}>hotsoon</Radio>
           <Radio value={4}>toutiao</Radio>
         </RadioGroup>
-        <RadioGroup type="button" buttonSize="middle" onChange={onChange2} value={value2}>
+        <RadioGroup type="button" buttonSize="middle" onChange={onChange2} value={value2} name="demo-radio-button-2">
           <Radio value={1}>semi</Radio>
           <Radio value={2}>pipixia</Radio>
           <Radio value={3}>hotsoon</Radio>
           <Radio value={4}>toutiao</Radio>
         </RadioGroup>
-        <RadioGroup type="button" buttonSize="large" onChange={onChange3} value={value3}>
+        <RadioGroup type="button" buttonSize="large" onChange={onChange3} value={value3} name="demo-radio-button-3">
           <Radio value={1}>semi</Radio>
           <Radio value={2}>pipixia</Radio>
           <Radio value={3}>hotsoon</Radio>

package/radio/radio.tsx

@@ -43,12 +43,14 @@ export 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 };
@@ -116,7 +118,10 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             },
             setExtraId: () => {
                 this.setState({ extraId: getUuidShort({ prefix: 'extra' }) });
-            }
+            },
+            setFocusVisible: (focusVisible: boolean): void => {
+                this.setState({ focusVisible });
+            },
         };
     }
 
@@ -152,6 +157,14 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         this.foundation.setHover(false);
     };
 
+    handleFocusVisible = (event: React.FocusEvent) => {
+        this.foundation.handleFocusVisible(event);
+    }
+
+    handleBlur = (event: React.FocusEvent) => {
+        this.foundation.handleBlur();
+    }
+
     render() {
         const {
             addonClassName,
@@ -166,7 +179,8 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             extra,
             mode,
             type,
-            value: propValue
+            value: propValue,
+            name
         } = this.props;
 
         let realChecked,
@@ -178,7 +192,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             isButtonRadioComponent,
             buttonSize,
             realPrefixCls;
-        const { hover: isHover, addonId, extraId } = this.state;
+        const { hover: isHover, addonId, extraId, focusVisible } = this.state;
         let props = {};
 
         if (this.isInGroup()) {
@@ -202,6 +216,8 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
 
         const prefix = realPrefixCls || css.PREFIX;
 
+        const focusOuter = isCardRadioGroup || isPureCardRadioGroup || isButtonRadio;
+
         const wrapper = cls(prefix, {
             [`${prefix}-disabled`]: isDisabled,
             [`${prefix}-checked`]: realChecked,
@@ -215,9 +231,10 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             [`${prefix}-cardRadioGroup_checked_disabled`]: isCardRadioGroup && realChecked && isDisabled,
             [`${prefix}-cardRadioGroup_hover`]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
             [className]: Boolean(className),
+            [`${prefix}-focus`]: focusVisible && (isCardRadioGroup || isPureCardRadioGroup),
         });
 
-        const name = this.isInGroup() && this.context.radioGroup.name;
+        const groupName = this.isInGroup() && this.context.radioGroup.name;
         const addonCls = cls({
             [`${prefix}-addon`]: !isButtonRadio,
             [`${prefix}-addon-buttonRadio`]: isButtonRadio,
@@ -225,13 +242,23 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             [`${prefix}-addon-buttonRadio-disabled`]: isButtonRadio && isDisabled,
             [`${prefix}-addon-buttonRadio-hover`]: isButtonRadio && !realChecked && !isDisabled && isHover,
             [`${prefix}-addon-buttonRadio-${buttonSize}`]: isButtonRadio && buttonSize,
+            [`${prefix}-focus`]: focusVisible && isButtonRadio,
         }, addonClassName);
         const renderContent = () => (
             <>
-                {children ? <span className={addonCls} style={addonStyle} id={addonId}>{children}</span> : null}
-                {extra && !isButtonRadio ? <div className={`${prefix}-extra`} id={extraId}>{extra}</div> : null}
+                {children ? (
+                    <span className={addonCls} style={addonStyle} id={addonId} x-semi-prop="children">
+                        {children}
+                    </span>
+                ) : null}
+                {extra && !isButtonRadio ? (
+                    <div className={`${prefix}-extra`} id={extraId} x-semi-prop="extra">
+                        {extra}
+                    </div>
+                ) : null}
             </>
         );
+
         return (
             <label
                 style={style}
@@ -243,7 +270,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
                     {...this.props}
                     {...props}
                     mode={realMode}
-                    name={name}
+                    name={name ?? groupName}
                     isButtonRadio={isButtonRadio}
                     isPureCardRadioGroup={isPureCardRadioGroup}
                     onChange={this.onChange}
@@ -252,6 +279,9 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
                     }}
                     addonId={children && addonId}
                     extraId={extra && extraId}
+                    focusInner={focusVisible && !focusOuter}
+                    onInputFocus={this.handleFocusVisible}
+                    onInputBlur={this.handleBlur}
                 />
                 {
                     isCardRadioGroup ?

package/radio/radioInner.tsx

@@ -23,6 +23,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 {
@@ -39,6 +42,9 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
         onChange: PropTypes.func,
         mode: PropTypes.oneOf(['advanced', '']),
         'aria-label': PropTypes.string,
+        focusInner: PropTypes.bool,
+        onInputFocus: PropTypes.func,
+        onInputBlur: PropTypes.func,
     };
 
     static defaultProps = {
@@ -97,7 +103,7 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
     }
 
     render() {
-        const { disabled, mode, autoFocus, name, isButtonRadio, isPureCardRadioGroup, addonId, extraId, 'aria-label': ariaLabel } = this.props;
+        const { disabled, mode, autoFocus, name, isButtonRadio, isPureCardRadioGroup, addonId, extraId, 'aria-label': ariaLabel, focusInner, onInputFocus, onInputBlur } = this.props;
         const { checked } = this.state;
 
         const prefix = this.props.prefixCls || css.PREFIX;
@@ -110,6 +116,8 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
         });
 
         const inner = classnames({
+            [`${prefix}-focus`]: focusInner,
+            [`${prefix}-focus-border`]:  focusInner && !checked,
             [`${prefix}-inner-display`]: !isButtonRadio,
         });
 
@@ -119,7 +127,6 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
                     ref={ref => {
                         this.inputEntity = ref;
                     }}
-                    // eslint-disable-next-line jsx-a11y/no-autofocus
                     autoFocus={autoFocus}
                     type={mode === 'advanced' ? 'checkbox' : 'radio'}
                     checked={Boolean(checked)}
@@ -129,6 +136,8 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
                     aria-label={ariaLabel}
                     aria-labelledby={addonId}
                     aria-describedby={extraId}
+                    onFocus={onInputFocus}
+                    onBlur={onInputBlur}
                 />
                 <span className={inner}>{checked ? <IconRadio /> : null}</span>
             </span>

package/rating/item.tsx

@@ -110,7 +110,7 @@ export default class Item extends PureComponent<RatingItemProps> {
                     className={`${prefixCls}-wrapper`}
                 >
                     <div className={`${prefixCls}-first`} style={{ width: `${firstWidth * 100}%` }}>{content}</div>
-                    <div className={`${prefixCls}-second`}>{content}</div>
+                    <div className={`${prefixCls}-second`} x-semi-prop="character">{content}</div>
                 </div>
             </li>
         );

package/scrollList/index.tsx

@@ -49,14 +49,30 @@ class ScrollList extends BaseComponent<ScrollListProps, {}> {
             <div className={clsWrapper} style={style}>
                 {header ? (
                     <div className={clsHeader}>
-                        <div className={`${clsHeader}-title`}>{header}</div>
+                        <div 
+                            className={`${clsHeader}-title`} 
+                            x-semi-prop={this.props['x-semi-header-alias'] || "header"}
+                        >
+                            {header}
+                        </div>
                         <div className={`${clsWrapper}-line`} />
                     </div>
                 ) : null}
-                <div className={`${clsWrapper}-body`} style={{ height: bodyHeight ? bodyHeight : '' }}>
+                <div
+                    className={`${clsWrapper}-body`}
+                    style={{ height: bodyHeight ? bodyHeight : '' }}
+                    x-semi-prop="children"
+                >
                     {children}
                 </div>
-                {footer ? <div className={`${clsWrapper}-footer`}>{footer}</div> : null}
+                {footer ? (
+                    <div
+                        className={`${clsWrapper}-footer`}
+                        x-semi-prop={this.props['x-semi-footer-alias'] || "footer"}
+                    >
+                        {footer}
+                    </div>
+                ) : null}
             </div>
         );
     }