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

package/lib/es/notification/notice.js

@@ -115,7 +115,8 @@ class Notice extends BaseComponent {
 
     if (iconType) {
       return /*#__PURE__*/React.createElement("div", {
-        className: iconCls
+        className: iconCls,
+        "x-semi-prop": "icon"
       }, isSemiIcon(iconType) ? /*#__PURE__*/React.cloneElement(iconType, {
         size: iconType.props.size || 'large'
       }) : iconType);
@@ -173,9 +174,11 @@ class Notice extends BaseComponent {
         className: "".concat(prefixCls, "-content-wrapper")
       }, title ? /*#__PURE__*/React.createElement("div", {
         id: titleID,
-        className: "".concat(prefixCls, "-title")
+        className: "".concat(prefixCls, "-title"),
+        "x-semi-prop": "title"
       }, title) : '', content ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-content")
+        className: "".concat(prefixCls, "-content"),
+        "x-semi-prop": "content"
       }, content) : ''), showClose && /*#__PURE__*/React.createElement(Button, {
         className: "".concat(prefixCls, "-icon-close"),
         type: "tertiary",

package/lib/es/pagination/index.js

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

package/lib/es/popconfirm/index.js

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

package/lib/es/radio/radio.d.ts

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

package/lib/es/radio/radio.js

@@ -43,6 +43,14 @@ class Radio extends BaseComponent {
       this.foundation.setHover(false);
     };
 
+    this.handleFocusVisible = event => {
+      this.foundation.handleFocusVisible(event);
+    };
+
+    this.handleBlur = event => {
+      this.foundation.handleBlur();
+    };
+
     this.state = {
       hover: false,
       addonId: props.addonId,
@@ -72,6 +80,11 @@ class Radio extends BaseComponent {
             prefix: 'extra'
           })
         });
+      },
+      setFocusVisible: focusVisible => {
+        this.setState({
+          focusVisible
+        });
       }
     });
   }
@@ -105,13 +118,15 @@ class Radio extends BaseComponent {
       extra,
       mode,
       type,
-      value: propValue
+      value: propValue,
+      name
     } = this.props;
     let realChecked, isDisabled, realMode, isButtonRadioGroup, isCardRadioGroup, isPureCardRadioGroup, isButtonRadioComponent, buttonSize, realPrefixCls;
     const {
       hover: isHover,
       addonId,
-      extraId
+      extraId,
+      focusVisible
     } = this.state;
     let props = {};
 
@@ -138,6 +153,7 @@ class Radio extends BaseComponent {
 
     const isButtonRadio = typeof isButtonRadioGroup === 'undefined' ? isButtonRadioComponent : isButtonRadioGroup;
     const prefix = realPrefixCls || css.PREFIX;
+    const focusOuter = isCardRadioGroup || isPureCardRadioGroup || isButtonRadio;
     const wrapper = cls(prefix, {
       ["".concat(prefix, "-disabled")]: isDisabled,
       ["".concat(prefix, "-checked")]: realChecked,
@@ -150,25 +166,29 @@ class Radio extends BaseComponent {
       ["".concat(prefix, "-cardRadioGroup_checked")]: isCardRadioGroup && realChecked && !isDisabled,
       ["".concat(prefix, "-cardRadioGroup_checked_disabled")]: isCardRadioGroup && realChecked && isDisabled,
       ["".concat(prefix, "-cardRadioGroup_hover")]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
-      [className]: Boolean(className)
+      [className]: Boolean(className),
+      ["".concat(prefix, "-focus")]: focusVisible && (isCardRadioGroup || isPureCardRadioGroup)
     });
-    const name = this.isInGroup() && this.context.radioGroup.name;
+    const groupName = this.isInGroup() && this.context.radioGroup.name;
     const addonCls = cls({
       ["".concat(prefix, "-addon")]: !isButtonRadio,
       ["".concat(prefix, "-addon-buttonRadio")]: isButtonRadio,
       ["".concat(prefix, "-addon-buttonRadio-checked")]: isButtonRadio && realChecked,
       ["".concat(prefix, "-addon-buttonRadio-disabled")]: isButtonRadio && isDisabled,
       ["".concat(prefix, "-addon-buttonRadio-hover")]: isButtonRadio && !realChecked && !isDisabled && isHover,
-      [_concatInstanceProperty(_context3 = "".concat(prefix, "-addon-buttonRadio-")).call(_context3, buttonSize)]: isButtonRadio && buttonSize
+      [_concatInstanceProperty(_context3 = "".concat(prefix, "-addon-buttonRadio-")).call(_context3, buttonSize)]: isButtonRadio && buttonSize,
+      ["".concat(prefix, "-focus")]: focusVisible && isButtonRadio
     }, addonClassName);
 
     const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
       className: addonCls,
       style: addonStyle,
-      id: addonId
+      id: addonId,
+      "x-semi-prop": "children"
     }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefix, "-extra"),
-      id: extraId
+      id: extraId,
+      "x-semi-prop": "extra"
     }, extra) : null);
 
     return /*#__PURE__*/React.createElement("label", {
@@ -178,7 +198,7 @@ class Radio extends BaseComponent {
       onMouseLeave: this.handleMouseLeave
     }, /*#__PURE__*/React.createElement(RadioInner, _Object$assign({}, this.props, props, {
       mode: realMode,
-      name: name,
+      name: name !== null && name !== void 0 ? name : groupName,
       isButtonRadio: isButtonRadio,
       isPureCardRadioGroup: isPureCardRadioGroup,
       onChange: this.onChange,
@@ -186,7 +206,10 @@ class Radio extends BaseComponent {
         this.radioEntity = ref;
       },
       addonId: children && addonId,
-      extraId: extra && extraId
+      extraId: extra && extraId,
+      focusInner: focusVisible && !focusOuter,
+      onInputFocus: this.handleFocusVisible,
+      onInputBlur: this.handleBlur
     })), isCardRadioGroup ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefix, "-isCardRadioGroup_content")
     }, renderContent()) : renderContent());

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

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

package/lib/es/radio/radioInner.js

@@ -71,7 +71,10 @@ class RadioInner extends BaseComponent {
       isPureCardRadioGroup,
       addonId,
       extraId,
-      'aria-label': ariaLabel
+      'aria-label': ariaLabel,
+      focusInner,
+      onInputFocus,
+      onInputBlur
     } = this.props;
     const {
       checked
@@ -84,6 +87,8 @@ class RadioInner extends BaseComponent {
       ["".concat(prefix, "-inner-pureCardRadio")]: isPureCardRadioGroup
     });
     const inner = classnames({
+      ["".concat(prefix, "-focus")]: focusInner,
+      ["".concat(prefix, "-focus-border")]: focusInner && !checked,
       ["".concat(prefix, "-inner-display")]: !isButtonRadio
     });
     return /*#__PURE__*/React.createElement("span", {
@@ -92,7 +97,6 @@ class RadioInner extends BaseComponent {
       ref: ref => {
         this.inputEntity = ref;
       },
-      // eslint-disable-next-line jsx-a11y/no-autofocus
       autoFocus: autoFocus,
       type: mode === 'advanced' ? 'checkbox' : 'radio',
       checked: Boolean(checked),
@@ -101,7 +105,9 @@ class RadioInner extends BaseComponent {
       name: name,
       "aria-label": ariaLabel,
       "aria-labelledby": addonId,
-      "aria-describedby": extraId
+      "aria-describedby": extraId,
+      onFocus: onInputFocus,
+      onBlur: onInputBlur
     }), /*#__PURE__*/React.createElement("span", {
       className: inner
     }, checked ? /*#__PURE__*/React.createElement(IconRadio, null) : null));
@@ -116,7 +122,10 @@ RadioInner.propTypes = {
   isButtonRadio: PropTypes.bool,
   onChange: PropTypes.func,
   mode: PropTypes.oneOf(['advanced', '']),
-  'aria-label': PropTypes.string
+  'aria-label': PropTypes.string,
+  focusInner: PropTypes.bool,
+  onInputFocus: PropTypes.func,
+  onInputBlur: PropTypes.func
 };
 RadioInner.defaultProps = {
   onChange: _noop,

package/lib/es/rating/item.js

@@ -98,7 +98,8 @@ export default class Item extends PureComponent {
         width: "".concat(firstWidth * 100, "%")
       }
     }, content), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-second")
+      className: "".concat(prefixCls, "-second"),
+      "x-semi-prop": "character"
     }, content)));
   }
 

package/lib/es/scrollList/index.js

@@ -35,16 +35,19 @@ class ScrollList extends BaseComponent {
     }, header ? /*#__PURE__*/React.createElement("div", {
       className: clsHeader
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(clsHeader, "-title")
+      className: "".concat(clsHeader, "-title"),
+      "x-semi-prop": this.props['x-semi-header-alias'] || "header"
     }, header), /*#__PURE__*/React.createElement("div", {
       className: "".concat(clsWrapper, "-line")
     })) : null, /*#__PURE__*/React.createElement("div", {
       className: "".concat(clsWrapper, "-body"),
       style: {
         height: bodyHeight ? bodyHeight : ''
-      }
+      },
+      "x-semi-prop": "children"
     }, children), footer ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(clsWrapper, "-footer")
+      className: "".concat(clsWrapper, "-footer"),
+      "x-semi-prop": this.props['x-semi-footer-alias'] || "footer"
     }, footer) : null);
   }
 

package/lib/es/select/index.js

@@ -426,6 +426,8 @@ class Select extends BaseComponent {
     e.nativeEvent.stopImmediatePropagation();
     this.foundation.handleClearClick(e);
   }
+  /* istanbul ignore next */
+
 
   onClearBtnEnterPress(e) {
     this.foundation.handleClearBtnEnterPress(e);
@@ -663,7 +665,8 @@ class Select extends BaseComponent {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: contentWrapperCls
     }, /*#__PURE__*/React.createElement("span", {
-      className: spanCls
+      className: spanCls,
+      "x-semi-prop": "placeholder"
     }, renderText || renderText === 0 ? renderText : placeholder), filterable && showInput ? this.renderInput() : null));
   }
 
@@ -825,7 +828,8 @@ class Select extends BaseComponent {
       ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: suffixWrapperCls
+      className: suffixWrapperCls,
+      "x-semi-prop": "suffix"
     }, suffix);
   }
 
@@ -844,7 +848,8 @@ class Select extends BaseComponent {
     });
     return /*#__PURE__*/React.createElement("div", {
       className: prefixWrapperCls,
-      id: insetLabelId
+      id: insetLabelId,
+      "x-semi-prop": "prefix,insetLabel"
     }, labelNode);
   }
 
@@ -896,7 +901,8 @@ class Select extends BaseComponent {
     });
     const showClear = this.props.showClear && (selections.size || inputValue) && !disabled && (isHovering || isOpen);
     const arrowContent = showArrow ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixcls, "-arrow")
+      className: "".concat(prefixcls, "-arrow"),
+      "x-semi-prop": "arrowIcon"
     }, arrowIcon) : /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixcls, "-arrow-empty")
     });

package/lib/es/select/option.js

@@ -100,7 +100,8 @@ class Option extends PureComponent {
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Select"
       }, locale => /*#__PURE__*/React.createElement("div", {
-        className: optionClassName
+        className: optionClassName,
+        "x-semi-prop": "emptyContent"
       }, emptyContent || locale.emptyText));
     } // Since there are empty, locale and other logic, the custom renderOptionItem is directly converged to the internal option instead of being placed in Select/index
 

package/lib/es/sideSheet/SideSheetContent.js

@@ -79,7 +79,8 @@ export default class SideSheetContent extends React.PureComponent {
 
     if (title) {
       header = /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-title")
+        className: "".concat(prefixCls, "-title"),
+        "x-semi-prop": "title"
       }, this.props.title);
     }
 
@@ -134,9 +135,11 @@ export default class SideSheetContent extends React.PureComponent {
       className: "".concat(prefixCls, "-content")
     }, header, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-body"),
-      style: props.bodyStyle
+      style: props.bodyStyle,
+      "x-semi-prop": "children"
     }, props.children), props.footer ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-footer")
+      className: "".concat(prefixCls, "-footer"),
+      "x-semi-prop": "footer"
     }, props.footer) : null));
     return dialogElement;
   }

package/lib/es/skeleton/index.js

@@ -43,7 +43,9 @@ class Skeleton extends PureComponent {
       content = /*#__PURE__*/React.createElement("div", _Object$assign({
         className: skCls,
         style: style
-      }, others), placeholder);
+      }, others, {
+        "x-semi-prop": "placeholder"
+      }), placeholder);
     } else {
       content = children;
     }

package/lib/es/space/index.js

@@ -66,7 +66,8 @@ class Space extends PureComponent {
     const childrenNodes = flatten(children);
     return /*#__PURE__*/React.createElement("div", {
       className: classNames,
-      style: realStyle
+      style: realStyle,
+      "x-semi-prop": "children"
     }, childrenNodes);
   }
 

package/lib/es/spin/index.js

@@ -67,8 +67,11 @@ class Spin extends BaseComponent {
     return loading ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-wrapper")
     }, indicator ? /*#__PURE__*/React.createElement("div", {
-      className: spinIconCls
-    }, indicator) : /*#__PURE__*/React.createElement(SpinIcon, null), tip ? /*#__PURE__*/React.createElement("div", null, tip) : null) : null;
+      className: spinIconCls,
+      "x-semi-prop": "indicator"
+    }, indicator) : /*#__PURE__*/React.createElement(SpinIcon, null), tip ? /*#__PURE__*/React.createElement("div", {
+      "x-semi-prop": "tip"
+    }, tip) : null) : null;
   }
 
   render() {
@@ -95,7 +98,8 @@ class Spin extends BaseComponent {
       style: style
     }, this.renderSpin(), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-children"),
-      style: childStyle
+      style: childStyle,
+      "x-semi-prop": "children"
     }, children));
   }
 

package/lib/es/switch/index.js

@@ -119,19 +119,21 @@ class Switch extends BaseComponent {
       className: cssClasses.KNOB,
       "aria-hidden": true
     }), showCheckedText ? /*#__PURE__*/React.createElement("div", {
-      className: cssClasses.CHECKED_TEXT
+      className: cssClasses.CHECKED_TEXT,
+      "x-semi-prop": "checkedText"
     }, checkedText) : null, showUncheckedText ? /*#__PURE__*/React.createElement("div", {
-      className: cssClasses.UNCHECKED_TEXT
+      className: cssClasses.UNCHECKED_TEXT,
+      "x-semi-prop": "uncheckedText"
     }, uncheckedText) : null, /*#__PURE__*/React.createElement("input", _Object$assign({}, 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/lib/es/table/ColumnFilter.js

@@ -16,7 +16,7 @@ import { IconFilter } from '@douyinfe/semi-icons';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import Dropdown from '../dropdown';
 import { Radio } from '../radio';
-import Checkbox from '../checkbox';
+import { Checkbox } from '../checkbox';
 
 function renderDropdown() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/lib/es/table/ColumnSelection.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import TableSelectionCellFoundation from '@douyinfe/semi-foundation/lib/es/table/tableSelectionCellFoundation';
-import Checkbox from '../checkbox';
+import { Checkbox } from '../checkbox';
 /**
  * render selection cell
  */

package/lib/es/table/Table.js

@@ -582,7 +582,8 @@ class Table extends BaseComponent {
       }
 
       return /*#__PURE__*/isValidElement(title) || typeof title === 'string' ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-title")
+        className: "".concat(prefixCls, "-title"),
+        "x-semi-prop": "title"
       }, title) : null;
     };
 
@@ -607,7 +608,8 @@ class Table extends BaseComponent {
       }, (locale, localeCode) => /*#__PURE__*/React.createElement("div", {
         className: wrapCls
       }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-empty")
+        className: "".concat(prefixCls, "-empty"),
+        "x-semi-prop": "empty"
       }, empty || locale.emptyText)));
     };
 
@@ -627,7 +629,8 @@ class Table extends BaseComponent {
 
       return /*#__PURE__*/isValidElement(footer) || typeof footer === 'string' ? /*#__PURE__*/React.createElement("div", {
         className: "".concat(prefixCls, "-footer"),
-        key: "footer"
+        key: "footer",
+        "x-semi-prop": "footer"
       }, footer) : null;
     };
 

package/lib/es/tabs/TabBar.js

@@ -246,7 +246,8 @@ class TabBar extends React.Component {
 
       return /*#__PURE__*/React.createElement("div", {
         className: extraCls,
-        style: tabBarStyle
+        style: tabBarStyle,
+        "x-semi-prop": "tabBarExtraContent"
       }, tabBarExtraContent);
     }
 

package/lib/es/tabs/TabPane.js

@@ -116,14 +116,17 @@ class TabPane extends PureComponent {
       style: style,
       "aria-hidden": active ? 'false' : 'true',
       tabIndex: 0
-    }, getDataAttr(restProps)), motion ? /*#__PURE__*/React.createElement(TabPaneTransition, {
+    }, getDataAttr(restProps), {
+      "x-semi-prop": "children"
+    }), motion ? /*#__PURE__*/React.createElement(TabPaneTransition, {
       direction: this.getDirection(this.context.activeKey, itemKey, this.context.panes),
       motion: motion,
       mode: tabPosition === 'top' ? 'horizontal' : 'vertical',
       state: active ? 'enter' : 'leave'
     }, transitionStyle => /*#__PURE__*/React.createElement("div", {
       className: "".concat(cssClasses.TABS_PANE_MOTION_OVERLAY),
-      style: _Object$assign({}, transitionStyle)
+      style: _Object$assign({}, transitionStyle),
+      "x-semi-prop": "children"
     }, shouldRender ? children : null)) : shouldRender ? children : null);
   }
 

package/lib/es/tagInput/index.js

@@ -45,6 +45,8 @@ class TagInput extends BaseComponent {
     this.handleClearBtn = e => {
       this.foundation.handleClearBtn(e);
     };
+    /* istanbul ignore next */
+
 
     this.handleClearEnterPress = e => {
       this.foundation.handleClearEnterPress(e);
@@ -219,14 +221,18 @@ class TagInput extends BaseComponent {
       ["".concat(prefixCls, "-prefix-text")]: labelNode && _isString(labelNode),
       // eslint-disable-next-line max-len
       ["".concat(prefixCls, "-prefix-icon")]: isSemiIcon(labelNode)
-    }); // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: prefixWrapperCls,
-      onMouseDown: this.handlePreventMouseDown,
-      onClick: this.handleClickPrefixOrSuffix,
-      id: insetLabelId
-    }, labelNode);
+    });
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
+      React.createElement("div", {
+        className: prefixWrapperCls,
+        onMouseDown: this.handlePreventMouseDown,
+        onClick: this.handleClickPrefixOrSuffix,
+        id: insetLabelId,
+        "x-semi-prop": "prefix"
+      }, labelNode)
+    );
   }
 
   renderSuffix() {
@@ -242,13 +248,17 @@ class TagInput extends BaseComponent {
       ["".concat(prefixCls, "-suffix-text")]: suffix && _isString(suffix),
       // eslint-disable-next-line max-len
       ["".concat(prefixCls, "-suffix-icon")]: isSemiIcon(suffix)
-    }); // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: suffixWrapperCls,
-      onMouseDown: this.handlePreventMouseDown,
-      onClick: this.handleClickPrefixOrSuffix
-    }, suffix);
+    });
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+      React.createElement("div", {
+        className: suffixWrapperCls,
+        onMouseDown: this.handlePreventMouseDown,
+        onClick: this.handleClickPrefixOrSuffix,
+        "x-semi-prop": "suffix"
+      }, suffix)
+    );
   }
 
   renderTags() {
@@ -272,7 +282,7 @@ class TagInput extends BaseComponent {
     const typoCls = cls("".concat(prefixCls, "-wrapper-typo"), {
       ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
     });
-    const spanNotWithPopoverCls = cls("".concat(prefixCls, "-wrapper-n"), {
+    const restTagsCls = cls("".concat(prefixCls, "-wrapper-n"), {
       ["".concat(prefixCls, "-wrapper-n-disabled")]: disabled
     });
     const restTags = [];
@@ -314,17 +324,16 @@ class TagInput extends BaseComponent {
       }
     });
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, tags, restTags.length > 0 && (showRestTagsPopover && !disabled ? /*#__PURE__*/React.createElement(Popover, _Object$assign({
+    const restTagsContent = /*#__PURE__*/React.createElement("span", {
+      className: restTagsCls
+    }, "+", tagsArray.length - maxTagCount);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, tags, restTags.length > 0 && (showRestTagsPopover ? /*#__PURE__*/React.createElement(Popover, _Object$assign({
       content: restTags,
       showArrow: true,
       trigger: "hover",
       position: "top",
       autoAdjustOverflow: true
-    }, restTagsPopoverProps), /*#__PURE__*/React.createElement("span", {
-      className: cls("".concat(prefixCls, "-wrapper-n"))
-    }, "+", tagsArray.length - maxTagCount)) : /*#__PURE__*/React.createElement("span", {
-      className: spanNotWithPopoverCls
-    }, "+".concat(tagsArray.length - maxTagCount))));
+    }, restTagsPopoverProps), restTagsContent) : restTagsContent));
   }
 
   blur() {

package/lib/es/timePicker/Combobox.js

@@ -278,7 +278,9 @@ class Combobox extends BaseComponent {
       componentName: "TimePicker"
     }, (locale, localeCode) => /*#__PURE__*/React.createElement(ScrollList, {
       header: panelHeader,
-      footer: panelFooter
+      footer: panelFooter,
+      "x-semi-header-alias": "panelHeader",
+      "x-semi-footer-alias": "panelFooter"
     }, this.renderAMPMSelect(locale, localeCode), this.renderHourSelect(value.getHours(), locale), this.renderMinuteSelect(value.getMinutes(), locale), this.renderSecondSelect(value.getSeconds(), locale)));
   }