@douyinfe/semi-ui 2.12.0-alpha.0 → 2.12.0-beta.2

package/modal/ModalContent.tsx

@@ -13,9 +13,9 @@ import ModalContentFoundation, {
     ModalContentProps,
     ModalContentState
 } from '@douyinfe/semi-foundation/modal/modalContentFoundation';
-import { noop, isFunction, get } from 'lodash';
+import { get, isFunction, noop } from 'lodash';
 import { IconClose } from '@douyinfe/semi-icons';
-import { getActiveElement } from '../_utils';
+import FocusTrapHandle from "@douyinfe/semi-foundation/utils/FocusHandle";
 
 let uuid = 0;
 
@@ -23,6 +23,7 @@ let uuid = 0;
 export interface ModalContentReactProps extends ModalContentProps {
     children?: React.ReactNode;
 }
+
 export default class ModalContent extends BaseComponent<ModalContentReactProps, ModalContentState> {
     static contextType = ConfigContext;
     static propTypes = {
@@ -45,12 +46,13 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
     modalDialogRef: React.MutableRefObject<HTMLDivElement>;
     foundation: ModalContentFoundation;
     context: ContextValue;
+    focusTrapHandle: FocusTrapHandle;
 
     constructor(props: ModalContentProps) {
         super(props);
         this.state = {
             dialogMouseDown: false,
-            prevFocusElement: getActiveElement(),
+            prevFocusElement: FocusTrapHandle.getActiveElement(),
         };
         this.foundation = new ModalContentFoundation(this.adapter);
         this.dialogId = `dialog-${uuid++}`;
@@ -88,15 +90,18 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             modalDialogFocus: () => {
                 let activeElementInDialog;
                 if (this.modalDialogRef) {
-                    const activeElement = getActiveElement();
+                    const activeElement = FocusTrapHandle.getActiveElement();
                     activeElementInDialog = this.modalDialogRef.current.contains(activeElement);
+                    this.focusTrapHandle?.destroy();
+                    this.focusTrapHandle = new FocusTrapHandle(this.modalDialogRef.current);
                 }
                 if (!activeElementInDialog) {
-                    this.modalDialogRef && this.modalDialogRef.current.focus();
+                    this.modalDialogRef?.current?.focus();
                 }
             },
             modalDialogBlur: () => {
-                this.modalDialogRef && this.modalDialogRef.current.blur();
+                this.modalDialogRef?.current.blur();
+                this.focusTrapHandle?.destroy();
             },
             prevFocusElementReFocus: () => {
                 const { prevFocusElement } = this.state;
@@ -158,7 +163,7 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
         } = this.props;
         let closer;
         if (closable) {
-            const iconType = closeIcon || <IconClose x-semi-prop="closeIcon" />;
+            const iconType = closeIcon || <IconClose/>;
             closer = (
                 <Button
                     aria-label="close"
@@ -177,7 +182,7 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
 
     renderIcon = () => {
         const { icon } = this.props;
-        return icon ? <span className={`${cssClasses.DIALOG}-icon-wrapper`} x-semi-prop="icon">{icon}</span> : null;
+        return icon ? <span className={`${cssClasses.DIALOG}-icon-wrapper`}>{icon}</span> : null;
     };
 
     renderHeader = () => {
@@ -187,20 +192,16 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
         const { title } = this.props;
         const closer = this.renderCloseBtn();
         const icon = this.renderIcon();
-        return title === null || title === undefined ? null : (
-            <div className={`${cssClasses.DIALOG}-header`}>
-                {icon}
-                <Typography.Title
-                    heading={5}
-                    className={`${cssClasses.DIALOG}-title`}
-                    id={`${cssClasses.DIALOG}-title`}
-                    x-semi-prop="title"
-                >
-                    {title}
-                </Typography.Title>
-                {closer}
-            </div>
-        );
+        return (title === null || title === undefined) ?
+            null :
+            (
+                <div className={`${cssClasses.DIALOG}-header`}>
+                    {icon}
+                    <Typography.Title heading={5} className={`${cssClasses.DIALOG}-title`}
+                        id={`${cssClasses.DIALOG}-title`}>{title}</Typography.Title>
+                    {closer}
+                </div>
+            );
     };
 
     renderBody = () => {
@@ -215,19 +216,16 @@ 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} x-semi-prop="children">
-                {children}
-            </div>
-        ) : (
-            <div className={`${cssClasses.DIALOG}-body-wrapper`}>
-                {icon}
-                <div className={bodyCls} style={bodyStyle} x-semi-prop="children">
-                    {children}
+        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}
                 </div>
-                {closer}
-            </div>
-        );
+            );
+
     };
 
     getDialogElement = () => {
@@ -250,11 +248,7 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
         }
         const body = this.renderBody();
         const header = this.renderHeader();
-        const footer = props.footer ? (
-            <div className={`${cssClasses.DIALOG}-footer`} x-semi-prop="footer">
-                {props.footer}
-            </div>
-        ) : null;
+        const footer = props.footer ? <div className={`${cssClasses.DIALOG}-footer`}>{props.footer}</div> : null;
         const dialogElement = (
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             <div
@@ -267,6 +261,7 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
                 <div
                     role="dialog"
                     ref={this.modalDialogRef}
+                    tabIndex={-1}
                     aria-modal="true"
                     aria-labelledby={`${cssClasses.DIALOG}-title`}
                     aria-describedby={`${cssClasses.DIALOG}-body`}
@@ -316,7 +311,6 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             </div>
         );
 
-        // @ts-ignore Unreachable branch
         // eslint-disable-next-line max-len
         return containerContext && containerContext.Provider ?
             <containerContext.Provider value={containerContext.value}>{elem}</containerContext.Provider> : elem;

package/notification/notice.tsx

@@ -106,7 +106,7 @@ class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
         }
         if (iconType) {
             return (
-                <div className={iconCls} x-semi-prop="icon">
+                <div className={iconCls}>
                     {isSemiIcon(iconType) ? React.cloneElement(iconType, { size: iconType.props.size || 'large' }) : iconType}
                 </div>
             );
@@ -170,26 +170,14 @@ 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`} x-semi-prop="title">
-                                {title}
-                            </div>
-                        ) : (
-                            ''
-                        )}
-                        {content ? (
-                            <div className={`${prefixCls}-content`} x-semi-prop="content">
-                                {content}
-                            </div>
-                        ) : (
-                            ''
-                        )}
+                        {title ? <div id={titleID} className={`${prefixCls}-title`}>{title}</div> : ''}
+                        {content ? <div className={`${prefixCls}-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.12.0-alpha.0",
+    "version": "2.12.0-beta.2",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "^2.12.0-alpha.0",
-        "@douyinfe/semi-animation-react": "^2.12.0-alpha.0",
-        "@douyinfe/semi-foundation": "^2.12.0-alpha.0",
-        "@douyinfe/semi-icons": "^2.12.0-alpha.0",
-        "@douyinfe/semi-illustrations": "^2.12.0-alpha.0",
-        "@douyinfe/semi-theme-default": "^2.12.0-alpha.0",
+        "@douyinfe/semi-animation": "2.12.0-beta.2",
+        "@douyinfe/semi-animation-react": "2.12.0-beta.2",
+        "@douyinfe/semi-foundation": "2.12.0-beta.2",
+        "@douyinfe/semi-icons": "2.12.0-beta.2",
+        "@douyinfe/semi-illustrations": "2.12.0-beta.2",
+        "@douyinfe/semi-theme-default": "2.12.0-beta.2",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "2a4f34115b9dd03fc3c40b1edcc421bf64a3024b",
+    "gitHead": "d594b54331194b982f24ef179147622642073c3d",
     "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.12.0-alpha.0",
+        "@douyinfe/semi-scss-compile": "2.12.0-beta.2",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/pagination/index.tsx

@@ -216,14 +216,7 @@ 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}
-                x-semi-prop="prevText"
-            >
+            <li role="button" aria-disabled={prevDisabled ? true : false} aria-label="Previous" onClick={e => !prevDisabled && this.foundation.goPrev(e)} className={preClassName}>
                 {prevText || <IconChevronLeft size="large" />}
             </li>
         );
@@ -238,14 +231,7 @@ 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}
-                x-semi-prop="prevText"
-            >
+            <li role="button" aria-disabled={nextDisabled ? true : false} aria-label="Next" onClick={e => !nextDisabled && this.foundation.goNext(e)} className={nextClassName}>
                 {nextText || <IconChevronRight size="large" />}
             </li>
         );

package/popconfirm/index.tsx

@@ -174,20 +174,12 @@ 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`} x-semi-prop="icon">
+                        <i className={`${prefixCls}-header-icon`}>
                             {React.isValidElement(icon) ? icon : null}
                         </i>
                         <div className={`${prefixCls}-header-body`}>
-                            {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}
+                            {showTitle ? <div className={`${prefixCls}-header-title`}>{title}</div> : null}
+                            {showContent ? <div className={`${prefixCls}-header-content`}>{content}</div> : null}
                         </div>
                         <Button
                             className={`${prefixCls}-btn-close`}

package/progress/index.tsx

@@ -239,7 +239,7 @@ class Progress extends Component<ProgressProps, ProgressState> {
         const percNumber = this.calcPercent(percentNumber);
 
         const innerStyle: Record<string, any> = {
-            backgroundColor: stroke
+            background: stroke
         };
         if (direction === strings.DEFAULT_DIRECTION) {
             innerStyle.width = `${perc}%`;

package/radio/radio.tsx

@@ -228,16 +228,8 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         }, addonClassName);
         const renderContent = () => (
             <>
-                {children ? (
-                    <span className={addonCls} style={addonStyle} id={this.addonId} x-semi-prop="children">
-                        {children}
-                    </span>
-                ) : null}
-                {extra && !isButtonRadio ? (
-                    <div className={`${prefix}-extra`} id={this.extraId} x-semi-prop="extra">
-                        {extra}
-                    </div>
-                ) : null}
+                {children ? <span className={addonCls} style={addonStyle} id={addonId}>{children}</span> : null}
+                {extra && !isButtonRadio ? <div className={`${prefix}-extra`} id={extraId}>{extra}</div> : null}
             </>
         );
         return (

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`} x-semi-prop="character">{content}</div>
+                    <div className={`${prefixCls}-second`}>{content}</div>
                 </div>
             </li>
         );

package/scrollList/index.tsx

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

package/select/index.tsx

@@ -878,11 +878,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         return (
             <>
                 <div className={contentWrapperCls}>
-                    {
-                        <span className={spanCls} x-semi-prop="placeholder">
-                            {renderText || renderText === 0 ? renderText : placeholder}
-                        </span>
-                    }
+                    {<span className={spanCls}>{renderText || renderText === 0 ? renderText : placeholder}</span>}
                     {filterable && showInput ? this.renderInput() : null}
                 </div>
             </>
@@ -1010,7 +1006,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             [`${prefixcls}-suffix-text`]: suffix && isString(suffix),
             [`${prefixcls}-suffix-icon`]: isSemiIcon(suffix),
         });
-        return <div className={suffixWrapperCls} x-semi-prop="suffix">{suffix}</div>;
+        return <div className={suffixWrapperCls}>{suffix}</div>;
     }
 
     renderPrefix() {
@@ -1024,11 +1020,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode),
         });
 
-        return (
-            <div className={prefixWrapperCls} id={insetLabelId} x-semi-prop="prefix,insetLabel">
-                {labelNode}
-            </div>
-        );
+        return <div className={prefixWrapperCls} id={insetLabelId}>{labelNode}</div>;
     }
 
     renderSelection() {
@@ -1075,7 +1067,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
       (selections.size || inputValue) && !disabled && (isHovering || isOpen);
 
         const arrowContent = showArrow ? (
-            <div className={`${prefixcls}-arrow`} x-semi-prop="arrowIcon">
+            <div className={`${prefixcls}-arrow`}>
                 {arrowIcon}
             </div>
         ) : (

package/select/option.tsx

@@ -105,11 +105,7 @@ class Option extends PureComponent<OptionProps> {
             }
             return (
                 <LocaleConsumer<Locale['Select']> componentName="Select">
-                    {(locale: Locale['Select']) => (
-                        <div className={optionClassName} x-semi-prop="emptyContent">
-                            {emptyContent || locale.emptyText}
-                        </div>
-                    )}
+                    {(locale: Locale['Select']) => <div className={optionClassName}>{emptyContent || locale.emptyText}</div>}
                 </LocaleConsumer>
             );
         }

package/sideSheet/SideSheetContent.tsx

@@ -88,7 +88,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
         let header, closer;
         if (title) {
             header = (
-                <div className={`${prefixCls}-title`} x-semi-prop="title">
+                <div className={`${prefixCls}-title`}>
                     {this.props.title}
                 </div>
             );
@@ -140,11 +140,11 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
             >
                 <div className={`${prefixCls}-content`}>
                     {header}
-                    <div className={`${prefixCls}-body`} style={props.bodyStyle} x-semi-prop="children">
+                    <div className={`${prefixCls}-body`} style={props.bodyStyle}>
                         {props.children}
                     </div>
                     {props.footer ? (
-                        <div className={`${prefixCls}-footer`} x-semi-prop="footer">
+                        <div className={`${prefixCls}-footer`}>
                             {props.footer}
                         </div>
                     ) : null}

package/skeleton/index.tsx

@@ -48,7 +48,7 @@ class Skeleton extends PureComponent<SkeletonProps> {
         let content;
         if (loading) {
             content = (
-                <div className={skCls} style={style} {...others} x-semi-prop="placeholder">
+                <div className={skCls} style={style} {...others}>
                     {placeholder}
                 </div>
             );

package/space/index.tsx

@@ -85,7 +85,7 @@ class Space extends PureComponent<SpaceProps> {
         });
         const childrenNodes = flatten(children);
         return (
-            <div className={classNames} style={realStyle} x-semi-prop="children">
+            <div className={classNames} style={realStyle}>
                 {childrenNodes}
             </div>
         );

package/spin/index.tsx

@@ -95,18 +95,14 @@ class Spin extends BaseComponent<SpinProps, SpinState> {
             [`${prefixCls}-animate`]: loading,
         });
 
-        return loading ? (
-            <div className={`${prefixCls}-wrapper`}>
-                {indicator ? (
-                    <div className={spinIconCls} x-semi-prop="indicator">
-                        {indicator}
-                    </div>
-                ) : (
-                    <SpinIcon />
-                )}
-                {tip ? <div x-semi-prop="tip">{tip}</div> : null}
-            </div>
-        ) : null;
+        return (
+            loading ? (
+                <div className={`${prefixCls}-wrapper`}>
+                    {indicator ? <div className={spinIconCls}>{indicator}</div> : <SpinIcon />}
+                    {tip ? <div>{tip}</div> : null}
+                </div>
+            ) : null
+        );
     }
 
     render() {
@@ -126,9 +122,7 @@ class Spin extends BaseComponent<SpinProps, SpinState> {
         return (
             <div className={spinCls} style={style}>
                 {this.renderSpin()}
-                <div className={`${prefixCls}-children`} style={childStyle} x-semi-prop="children">
-                    {children}
-                </div>
+                <div className={`${prefixCls}-children`} style={childStyle}>{children}</div>
             </div>
         );
     }

package/switch/index.tsx

@@ -146,18 +146,23 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
         const showUncheckedText = uncheckedText && !nativeControlChecked && size !== 'small';
         return (
             <div className={wrapperCls} style={style} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-                {loading ? (
-                    <Spin wrapperClassName={cssClasses.LOADING_SPIN} size={size === 'default' ? 'middle' : size} />
-                ) : (
-                    <div className={cssClasses.KNOB} aria-hidden={true} />
-                )}
+                {
+                    loading
+                        ? (
+                            <Spin
+                                wrapperClassName={cssClasses.LOADING_SPIN}
+                                size={size === 'default' ? 'middle' : size}
+                            />
+                        )
+                        : <div className={cssClasses.KNOB} aria-hidden={true} />
+                }
                 {showCheckedText ? (
-                    <div className={cssClasses.CHECKED_TEXT} x-semi-prop="checkedText">
+                    <div className={cssClasses.CHECKED_TEXT}>
                         {checkedText}
                     </div>
                 ) : null}
                 {showUncheckedText ? (
-                    <div className={cssClasses.UNCHECKED_TEXT} x-semi-prop="uncheckedText">
+                    <div className={cssClasses.UNCHECKED_TEXT}>
                         {uncheckedText}
                     </div>
                 ) : null}
@@ -165,13 +170,13 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
                     {...switchProps}
                     ref={this.switchRef}
                     id={id}
-                    role="switch"
+                    role='switch'
                     aria-checked={nativeControlChecked}
                     aria-invalid={this.props['aria-invalid']}
                     aria-errormessage={this.props['aria-errormessage']}
                     aria-label={this.props['aria-label']}
                     aria-labelledby={this.props['aria-labelledby']}
-                    aria-describedby={this.props['aria-describedby']}
+                    aria-describedby={this.props["aria-describedby"]}
                     aria-disabled={this.props['disabled']}
                     onChange={e => this.foundation.handleChange(e.target.checked, e)}
                     onFocus={e => this.handleFocusVisible(e)}

package/table/Table.tsx

@@ -1015,7 +1015,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
         }
 
         return isValidElement(title) || typeof title === 'string' ? (
-            <div className={`${prefixCls}-title`} x-semi-prop="title">{title}</div>
+            <div className={`${prefixCls}-title`}>{title}</div>
         ) : null;
     };
 
@@ -1032,9 +1032,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             <LocaleConsumer componentName="Table" key={'emptyText'}>
                 {(locale: TableLocale, localeCode: string) => (
                     <div className={wrapCls}>
-                        <div className={`${prefixCls}-empty`} x-semi-prop="empty">
-                            {empty || locale.emptyText}
-                        </div>
+                        <div className={`${prefixCls}-empty`}>{empty || locale.emptyText}</div>
                     </div>
                 )}
             </LocaleConsumer>
@@ -1050,7 +1048,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
         }
 
         return isValidElement(footer) || typeof footer === 'string' ? (
-            <div className={`${prefixCls}-footer`} key="footer" x-semi-prop="footer">
+            <div className={`${prefixCls}-footer`} key="footer">
                 {footer}
             </div>
         ) : null;

package/tabs/TabBar.tsx

@@ -70,7 +70,7 @@ class TabBar extends React.Component<TabBarProps, TabBarState> {
         if (tabBarExtraContent) {
             const tabBarStyle = { ...tabBarExtraContentDefaultStyle, ...tabBarExtraContentStyle };
             return (
-                <div className={extraCls} style={tabBarStyle} x-semi-prop="tabBarExtraContent">
+                <div className={extraCls} style={tabBarStyle}>
                     {tabBarExtraContent}
                 </div>
             );

package/tabs/TabPane.tsx

@@ -98,7 +98,6 @@ class TabPane extends PureComponent<TabPaneProps> {
                 aria-hidden={active ? 'false' : 'true'}
                 tabIndex={0}
                 {...getDataAttr(restProps)}
-                x-semi-prop="children"
             >
                 {motion ? (
                     <TabPaneTransition
@@ -108,18 +107,14 @@ class TabPane extends PureComponent<TabPaneProps> {
                         state={active ? 'enter' : 'leave'}
                     >
                         {(transitionStyle): ReactNode => (
-                            <div
-                                className={`${cssClasses.TABS_PANE_MOTION_OVERLAY}`}
-                                style={{ ...transitionStyle }}
-                                x-semi-prop="children"
-                            >
+                            <div className={`${cssClasses.TABS_PANE_MOTION_OVERLAY}`} style={{ ...transitionStyle }}>
                                 {shouldRender ? children : null}
                             </div>
                         )}
                     </TabPaneTransition>
-                ) : shouldRender ? (
-                    children
-                ) : null}
+                ) : (
+                    shouldRender ? children : null
+                )}
             </div>
         );
     }