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

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>
         );
     }

package/select/index.tsx

@@ -662,6 +662,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         this.foundation.handleClearClick(e as any);
     }
 
+    /* istanbul ignore next */
     onClearBtnEnterPress(e: React.KeyboardEvent) {
         this.foundation.handleClearBtnEnterPress(e as any);
     }
@@ -878,7 +879,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         return (
             <>
                 <div className={contentWrapperCls}>
-                    {<span className={spanCls}>{renderText || renderText === 0 ? renderText : placeholder}</span>}
+                    {
+                        <span className={spanCls} x-semi-prop="placeholder">
+                            {renderText || renderText === 0 ? renderText : placeholder}
+                        </span>
+                    }
                     {filterable && showInput ? this.renderInput() : null}
                 </div>
             </>
@@ -1006,7 +1011,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             [`${prefixcls}-suffix-text`]: suffix && isString(suffix),
             [`${prefixcls}-suffix-icon`]: isSemiIcon(suffix),
         });
-        return <div className={suffixWrapperCls}>{suffix}</div>;
+        return <div className={suffixWrapperCls} x-semi-prop="suffix">{suffix}</div>;
     }
 
     renderPrefix() {
@@ -1020,7 +1025,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode),
         });
 
-        return <div className={prefixWrapperCls} id={insetLabelId}>{labelNode}</div>;
+        return (
+            <div className={prefixWrapperCls} id={insetLabelId} x-semi-prop="prefix,insetLabel">
+                {labelNode}
+            </div>
+        );
     }
 
     renderSelection() {
@@ -1067,7 +1076,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
       (selections.size || inputValue) && !disabled && (isHovering || isOpen);
 
         const arrowContent = showArrow ? (
-            <div className={`${prefixcls}-arrow`}>
+            <div className={`${prefixcls}-arrow`} x-semi-prop="arrowIcon">
                 {arrowIcon}
             </div>
         ) : (

package/select/option.tsx

@@ -105,7 +105,11 @@ class Option extends PureComponent<OptionProps> {
             }
             return (
                 <LocaleConsumer<Locale['Select']> componentName="Select">
-                    {(locale: Locale['Select']) => <div className={optionClassName}>{emptyContent || locale.emptyText}</div>}
+                    {(locale: Locale['Select']) => (
+                        <div className={optionClassName} x-semi-prop="emptyContent">
+                            {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`}>
+                <div className={`${prefixCls}-title`} x-semi-prop="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}>
+                    <div className={`${prefixCls}-body`} style={props.bodyStyle} x-semi-prop="children">
                         {props.children}
                     </div>
                     {props.footer ? (
-                        <div className={`${prefixCls}-footer`}>
+                        <div className={`${prefixCls}-footer`} x-semi-prop="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}>
+                <div className={skCls} style={style} {...others} x-semi-prop="placeholder">
                     {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}>
+            <div className={classNames} style={realStyle} x-semi-prop="children">
                 {childrenNodes}
             </div>
         );

package/spin/index.tsx

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

package/switch/index.tsx

@@ -146,23 +146,18 @@ 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}>
+                    <div className={cssClasses.CHECKED_TEXT} x-semi-prop="checkedText">
                         {checkedText}
                     </div>
                 ) : null}
                 {showUncheckedText ? (
-                    <div className={cssClasses.UNCHECKED_TEXT}>
+                    <div className={cssClasses.UNCHECKED_TEXT} x-semi-prop="uncheckedText">
                         {uncheckedText}
                     </div>
                 ) : null}
@@ -170,13 +165,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/ColumnFilter.tsx

@@ -10,7 +10,7 @@ import { cssClasses } from '@douyinfe/semi-foundation/table/constants';
 import Dropdown, { DropdownProps } from '../dropdown';
 import { Trigger, Position } from '../tooltip';
 import { Radio } from '../radio';
-import Checkbox from '../checkbox';
+import { Checkbox } from '../checkbox';
 import {
     FilterIcon,
     Filter,

package/table/ColumnSelection.tsx

@@ -8,7 +8,7 @@ import { noop } from 'lodash';
 import { cssClasses } from '@douyinfe/semi-foundation/table/constants';
 import TableSelectionCellFoundation, { TableSelectionCellAdapter, TableSelectionCellEvent } from '@douyinfe/semi-foundation/table/tableSelectionCellFoundation';
 
-import Checkbox, { CheckboxEvent, CheckboxProps } from '../checkbox';
+import { Checkbox, CheckboxEvent, CheckboxProps } from '../checkbox';
 
 export interface TableSelectionCellProps {
     columnTitle?: string; // TODO: future api

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

package/table/_story/v2/FixedOnHeaderRow/index.jsx

@@ -3,6 +3,9 @@ import { Table, Avatar, Toast } from '@douyinfe/semi-ui';
 import * as dateFns from 'date-fns';
 
 App.storyName = 'fix onHeaderRow';
+App.parameters = {
+    chromatic: { disableSnapshot: true },
+};
 
 /**
  * test with cypress

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}>
+                <div className={extraCls} style={tabBarStyle} x-semi-prop="tabBarExtraContent">
                     {tabBarExtraContent}
                 </div>
             );

package/tabs/TabPane.tsx

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

package/tabs/_story/tabs.stories.js

@@ -867,3 +867,39 @@ export const TabListChange = () => <TabListChangeDemo />;
 TabListChange.story = {
   name: 'tablist change',
 };
+
+
+class TabClosableDemo extends React.Component {
+  constructor(props){
+    super(props);
+      this.state = {
+          tabList: [
+              {tab: '文档', itemKey:'1', text:'文档', closable:true},
+              {tab: '快速起步', itemKey:'2', text:'快速起步', closable:true},
+              {tab: '帮助', itemKey:'3', text:'帮助'},
+          ]
+      }
+  }
+  close(key){
+    const newTabList = [...this.state.tabList];
+    const closeIndex = newTabList.findIndex(t=>t.itemKey===key);
+    newTabList.splice(closeIndex, 1);
+    this.setState({tabList:newTabList});
+  }
+
+  render() {
+    return (
+      <Tabs type="card" defaultActiveKey="1" onTabClose={this.close.bind(this)}>
+          {
+            this.state.tabList.map(t=><TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey} key={t.itemKey}>{t.text}</TabPane>)
+          }
+      </Tabs>
+    );
+  }
+}
+
+export const TabClosable = () => <TabClosableDemo />;
+
+TabClosable.story = {
+  name: 'tab closable',
+};

package/tag/_story/tag.stories.js

@@ -155,7 +155,7 @@ export const TagAvatar = () => {
     'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg';
   return (
     <div style={{ margin: 10 }}>
-      <Tag avatarSrc={avatarSrc} avatarShape={'square'}>
+      <Tag avatarSrc={avatarSrc} avatarShape={'square'} onClick={()=>{console.log('如果能重来，我要做李白')}}>
         李白
       </Tag>
       <br />