@douyinfe/semi-ui 2.12.1-alpha.1 → 2.13.0

package/autoComplete/_story/autoComplete.stories.js

@@ -170,7 +170,6 @@ class CustomOptionDemo extends Component {
           style={{
             width: '250px',
           }}
-          optionLabelProp="value"
           onSearch={this.search}
         ></AutoComplete>
         <br />

package/autoComplete/index.tsx

@@ -179,7 +179,7 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
         onChange: noop,
         onSelectWithObject: false,
         onDropdownVisibleChange: noop,
-        defaultActiveFirstOption: true,
+        defaultActiveFirstOption: false,
         dropdownMatchSelectWidth: true,
         loading: false,
         maxHeight: 300,

package/avatar/index.tsx

@@ -135,7 +135,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
             className
         );
         let content = children;
-        const hoverRender = hoverContent ? (<div className={`${prefixCls}-hover`} x-semi-prop="hoverContent">{hoverContent}</div>) : null;
+        const hoverRender = hoverContent ? (<div className={`${prefixCls}-hover`}>{hoverContent}</div>) : null;
         if (isImg) {
             content = (
                 <img src={src} srcSet={srcSet} onError={this.handleError} alt={alt} {...imgAttr} />
@@ -143,7 +143,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         } else if (typeof children === 'string') {
             content = (
                 <span className={`${prefixCls}-content`}>
-                    <span className={`${prefixCls}-label`} x-semi-prop="children">{children}</span>
+                    <span className={`${prefixCls}-label`}>{children}</span>
                 </span>
             );
         }

package/backtop/index.tsx

@@ -101,17 +101,13 @@ export default class BackTop extends BaseComponent<BackTopProps, BackTopState> {
             className
         );
         const backtopBtn = children ? children : this.renderDefault();
-        const content = visible ? (
-            <div
-                {...others} 
-                className={preCls} 
-                style={style} 
-                onClick={e => this.handleClick(e)} 
-                x-semi-prop="children"
-            >
-                {backtopBtn}
-            </div>
-        ) : null;
+        const content = visible ?
+            (
+                <div {...others} className={preCls} style={style} onClick={e => this.handleClick(e)}>
+                    {backtopBtn}
+                </div>
+            ) :
+            null;
         return content;
     }
 }

package/badge/index.tsx

@@ -82,7 +82,7 @@ export default class Badge extends PureComponent<BadgeProps> {
         return (
             <span className={prefixCls} {...rest}>
                 {children}
-                <span className={wrapper} style={style} x-semi-prop="count">
+                <span className={wrapper} style={style}>
                     {dot ? null : content}
                 </span>
             </span>

package/banner/index.tsx

@@ -109,7 +109,7 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
             <Button
                 className={`${prefixCls}-close`}
                 onClick={this.remove}
-                icon={closeIcon || <IconClose x-semi-prop="closeIcon" aria-hidden={true}/>}
+                icon={closeIcon || <IconClose aria-hidden={true}/>}
                 theme="borderless"
                 size="small"
                 type="tertiary"
@@ -137,7 +137,7 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
         }
         if (iconType) {
             return (
-                <div className={iconCls} x-semi-prop="icon">
+                <div className={iconCls}>
                     {iconType}
                 </div>
             );
@@ -160,13 +160,13 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
                     <div className={`${prefixCls}-content`}>
                         {this.renderIcon()}
                         <div className={`${prefixCls}-content-body`}>
-                            {title ? <Typography.Title heading={5} className={`${prefixCls}-title`} component="div" x-semi-prop="title">{title}</Typography.Title> : null}
-                            {description ? <Typography.Paragraph className={`${prefixCls}-description`} component="div" x-semi-prop="description">{description}</Typography.Paragraph> : null}
+                            {title ? <Typography.Title heading={5} className={`${prefixCls}-title`} component="div">{title}</Typography.Title> : null}
+                            {description ? <Typography.Paragraph className={`${prefixCls}-description`} component="div">{description}</Typography.Paragraph> : null}
                         </div>
                     </div>
                     {this.renderCloser()}
                 </div>
-                {children ? <div className={`${prefixCls}-extra`} x-semi-prop="children">{children}</div> : null}
+                {children ? <div className={`${prefixCls}-extra`}>{children}</div> : null}
             </div>
         ) : null;
         return banner;

package/breadcrumb/index.tsx

@@ -167,9 +167,9 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
             <span className={`${clsPrefix}-collapse`} key={`more-${itemsLen}`}>
                 <span className={`${clsPrefix}-item-wrap`}>
                     <span
-                        role="button"
+                        role='button'
                         tabIndex={0}
-                        aria-label="Expand breadcrumb items"
+                        aria-label='Expand breadcrumb items'
                         className={`${clsPrefix}-item ${clsPrefix}-item-more`}
                         onClick={item => this.foundation.handleExpand(item)}
                         onKeyPress={e => this.foundation.handleExpandEnterPress(e)}
@@ -178,9 +178,7 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
                         {!hasRenderMore && moreType === 'default' && <IconMore />}
                         {!hasRenderMore && moreType === 'popover' && this.renderPopoverMore(restItem)}
                     </span>
-                    <span className={`${clsPrefix}-separator`} x-semi-prop="separator">
-                        {this.props.separator}
-                    </span>
+                    <span className={`${clsPrefix}-separator`}>{this.props.separator}</span>
                 </span>
             </span>
         );

package/button/Button.tsx

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
 import '@douyinfe/semi-foundation/button/button.scss';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
-import { omit } from 'lodash';
 
 const btnSizes = strings.sizes;
 const { htmlTypes, btnTypes } = strings;
@@ -94,7 +93,7 @@ export default class Button extends PureComponent<ButtonProps> {
 
         const baseProps = {
             disabled,
-            ...omit(attr, ['x-semi-children-alias']),
+            ...attr,
             className: classNames(
                 prefixCls,
                 {
@@ -114,17 +113,16 @@ export default class Button extends PureComponent<ButtonProps> {
             'aria-disabled': disabled,
         };
 
-        const xSemiProps = {};
-
-        if (!(className && className.includes('-with-icon'))) {
-            xSemiProps['x-semi-prop'] = this.props['x-semi-children-alias'] || 'children';
-        }
-
         return (
             // eslint-disable-next-line react/button-has-type
-            <button {...baseProps} onClick={this.props.onClick} onMouseDown={this.props.onMouseDown} style={style}>
+            <button
+                {...baseProps}
+                onClick={this.props.onClick}
+                onMouseDown={this.props.onMouseDown}
+                style={style}
+            >
                 {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-                <span className={`${prefixCls}-content`} onClick={e => disabled && e.stopPropagation()} {...xSemiProps}>
+                <span className={`${prefixCls}-content`} onClick={e => disabled && e.stopPropagation()}>
                     {children}
                 </span>
             </button>

package/card/index.tsx

@@ -55,6 +55,7 @@ export interface CardProps {
     'aria-label'?: string;
 }
 
+
 class Card extends PureComponent<CardProps> {
     static Meta = Meta;
 
@@ -105,33 +106,37 @@ class Card extends PureComponent<CardProps> {
         if (header || headerExtraContent || title) {
             return (
                 <div style={headerStyle} className={headerCls}>
-                    {header || ( // Priority of header over title and headerExtraContent
-                        <div className={headerWrapperCls}>
-                            {headerExtraContent && (
-                                <div
-                                    className={`${prefixcls}-header-wrapper-extra`}
-                                    x-semi-prop="headerExtraContent"
-                                >
-                                    {headerExtraContent}
-                                </div>
-                            )}
-                            {title && (
-                                <div className={titleCls}>
-                                    {isString(title) ? (
-                                        <Typography.Title
-                                            heading={6}
-                                            ellipsis={{ showTooltip: true, rows: 1 }}
-                                            x-semi-prop="title"
-                                        >
-                                            {title}
-                                        </Typography.Title>
-                                    ) : (
-                                        title
-                                    )}
-                                </div>
-                            )}
-                        </div>
-                    )}
+                    {
+                        header || ( // Priority of header over title and headerExtraContent
+                            <div className={headerWrapperCls}>
+                                {headerExtraContent &&
+                                    (
+                                        <div className={`${prefixcls}-header-wrapper-extra`}>
+                                            {headerExtraContent}
+                                        </div>
+                                    )
+                                }
+                                {title &&
+                                    (
+                                        <div className={titleCls}>
+                                            {
+                                                isString(title) ?
+                                                    (
+                                                        <Typography.Title
+                                                            heading={6}
+                                                            ellipsis={{ showTooltip: true, rows: 1 }}
+                                                        >
+                                                            {title}
+                                                        </Typography.Title>
+                                                    ) :
+                                                    title
+                                            }
+                                        </div>
+                                    )
+                                }
+                            </div>
+                        )
+                    }
                 </div>
             );
         }
@@ -144,17 +149,16 @@ class Card extends PureComponent<CardProps> {
         } = this.props;
         const coverCls = cls(`${prefixcls}-cover`);
 
-        return (
-            cover && (
-                <div className={coverCls} x-semi-prop="cover">
-                    {cover}
-                </div>
-            )
-        );
+        return cover && <div className={coverCls}>{cover}</div>;
     };
 
     renderBody = (): ReactNode => {
-        const { bodyStyle, children, actions, loading } = this.props;
+        const {
+            bodyStyle,
+            children,
+            actions,
+            loading
+        } = this.props;
         const bodyCls = cls(`${prefixcls}-body`);
         const actionsCls = cls(`${prefixcls}-body-actions`);
         const actionsItemCls = cls(`${prefixcls}-body-actions-item`);
@@ -178,7 +182,7 @@ class Card extends PureComponent<CardProps> {
                         <div className={actionsCls}>
                             <Space spacing={12}>
                                 {actions.map((item, idx) => (
-                                    <div key={idx} className={actionsItemCls} x-semi-prop={`actions.${idx}`}>{item}</div>
+                                    <div key={idx} className={actionsItemCls}>{item}</div>
                                 ))}
                             </Space>
                         </div>
@@ -198,13 +202,7 @@ class Card extends PureComponent<CardProps> {
             [`${prefixcls}-footer-bordered`]: footerLine
         });
 
-        return (
-            footer && (
-                <div style={footerStyle} className={footerCls} x-semi-prop="footer">
-                    {footer}
-                </div>
-            )
-        );
+        return footer && <div style={footerStyle} className={footerCls}>{footer}</div>;
     };
 
     render(): ReactNode {

package/carousel/CarouselArrow.tsx

@@ -41,7 +41,6 @@ class CarouselArrow extends React.PureComponent<CarouselArrowProps> {
                     className={leftClassNames} 
                     onClick={prev}
                     {...get(this.props, 'arrowProps.leftArrow.props')}
-                    x-semi-prop="arrowProps.leftArrow.children"
                 >
                     {this.renderLeftIcon()}
                 </div>
@@ -51,7 +50,6 @@ class CarouselArrow extends React.PureComponent<CarouselArrowProps> {
                     className={rightClassNames} 
                     onClick={next}
                     {...get(this.props, 'arrowProps.rightArrow.props')}
-                    x-semi-prop="arrowProps.rightArrow.children"
                 >
                     {this.renderRightIcon()}
                 </div>

package/carousel/index.tsx

@@ -279,7 +279,6 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
                         [`${cssClasses.CAROUSEL_CONTENT}`]: true,
                         [`${cssClasses.CAROUSEL_CONTENT}-reverse`]: slideDirection === 'left' ? isReverse : !isReverse,
                     })}
-                    x-semi-prop="children"
                 >
                     {this.renderChildren()}
                 </div>