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

package/lib/es/avatar/avatarGroup.js

@@ -5,8 +5,9 @@ import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 
 var __rest = this && this.__rest || function (s, e) {
@@ -34,7 +35,12 @@ export default class AvatarGroup extends PureComponent {
     const {
       children
     } = this.props;
-    return _Array$isArray(children) ? children : [children];
+
+    if (children) {
+      return _Array$isArray(children) ? React.Children.toArray(children) : [children];
+    }
+
+    return [];
   }
 
   getMergeAvatars(avatars) {
@@ -58,13 +64,34 @@ export default class AvatarGroup extends PureComponent {
   }
 
   renderMoreAvatar(restNumber, restAvatars) {
+    var _context2;
+
     const {
       renderMore
     } = this.props;
     const moreCls = cls("".concat(prefixCls, "-item-more"));
+    const restAvatarAlt = restAvatars === null || restAvatars === void 0 ? void 0 : _reduceInstanceProperty(restAvatars).call(restAvatars, (pre, cur) => {
+      var _context;
+
+      const {
+        children,
+        alt
+      } = cur.props;
+      const avatarInfo = alt !== null && alt !== void 0 ? alt : typeof children === 'string' ? children : '';
+
+      if (avatarInfo.length === 0) {
+        return pre;
+      }
+
+      return pre.length > 0 ? _concatInstanceProperty(_context = "".concat(pre, ",")).call(_context, avatarInfo) : avatarInfo;
+    }, '');
+
+    const finalAlt = _concatInstanceProperty(_context2 = " Number of remaining Avatars\uFF1A".concat(restNumber, ",")).call(_context2, restAvatarAlt);
+
     let moreAvatar = /*#__PURE__*/React.createElement(Avatar, {
       className: moreCls,
-      key: "_+n"
+      key: "_+n",
+      alt: finalAlt
     }, "+".concat(restNumber));
 
     if (_isFunction(renderMore)) {
@@ -95,15 +122,15 @@ export default class AvatarGroup extends PureComponent {
     });
 
     if (children) {
-      var _context;
+      var _context3;
 
       const avatars = this.getAllAvatars();
-      inner = _mapInstanceProperty(_context = _isNumber(maxCount) ? this.getMergeAvatars(avatars) : avatars).call(_context, (itm, index) => {
-        var _context2, _context3;
+      inner = _mapInstanceProperty(_context3 = _isNumber(maxCount) ? this.getMergeAvatars(avatars) : avatars).call(_context3, (itm, index) => {
+        var _context4, _context5;
 
         const className = cls(_get(itm.props, 'className'), {
-          [_concatInstanceProperty(_context2 = "".concat(prefixCls, "-item-start-")).call(_context2, index)]: overlapFrom === 'start',
-          [_concatInstanceProperty(_context3 = "".concat(prefixCls, "-item-end-")).call(_context3, index)]: overlapFrom === 'end'
+          [_concatInstanceProperty(_context4 = "".concat(prefixCls, "-item-start-")).call(_context4, index)]: overlapFrom === 'start',
+          [_concatInstanceProperty(_context5 = "".concat(prefixCls, "-item-end-")).call(_context5, index)]: overlapFrom === 'end'
         });
         return /*#__PURE__*/React.cloneElement(itm, _Object$assign(_Object$assign({}, rest), {
           className,
@@ -115,7 +142,8 @@ export default class AvatarGroup extends PureComponent {
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: groupCls
+      className: groupCls,
+      role: 'list'
     }, inner);
   }
 

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

@@ -9,6 +9,7 @@ export * from './interface';
 export interface AvatarState {
     isImgExist: boolean;
     hoverContent: React.ReactNode;
+    focusVisible: boolean;
 }
 export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
     static defaultProps: {
@@ -45,5 +46,9 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
     onEnter(e: React.MouseEvent): void;
     onLeave(e: React.MouseEvent): void;
     handleError(): void;
+    handleKeyDown(event: any): void;
+    handleFocusVisible: (event: React.FocusEvent) => void;
+    handleBlur: (event: React.FocusEvent) => void;
+    getContent: () => React.ReactNode;
     render(): JSX.Element;
 }

package/lib/es/avatar/index.js

@@ -1,7 +1,7 @@
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 
 var __rest = this && this.__rest || function (s, e) {
@@ -23,6 +23,7 @@ import AvatarFoundation from '@douyinfe/semi-foundation/lib/es/avatar/foundation
 import '@douyinfe/semi-foundation/lib/es/avatar/avatar.css';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
 import BaseComponent from '../_base/baseComponent';
+import { handlePrevent } from '@douyinfe/semi-foundation/lib/es/utils/a11y';
 const sizeSet = strings.SIZE;
 const shapeSet = strings.SHAPE;
 const colorSet = strings.COLOR;
@@ -30,16 +31,88 @@ const prefixCls = cssClasses.PREFIX;
 export * from './interface';
 export default class Avatar extends BaseComponent {
   constructor(props) {
-    var _context, _context2, _context3;
+    var _context, _context2, _context3, _context4, _context5;
 
     super(props);
+
+    this.handleFocusVisible = event => {
+      this.foundation.handleFocusVisible(event);
+    };
+
+    this.handleBlur = event => {
+      this.foundation.handleBlur();
+    };
+
+    this.getContent = () => {
+      const {
+        children,
+        onClick,
+        imgAttr,
+        src,
+        srcSet,
+        alt
+      } = this.props;
+      const {
+        isImgExist
+      } = this.state;
+      let content = children;
+      const clickable = onClick !== noop;
+      const isImg = src && isImgExist;
+      const a11yFocusProps = {
+        tabIndex: 0,
+        onKeyDown: this.handleKeyDown,
+        onFocus: this.handleFocusVisible,
+        onBlur: this.handleBlur
+      };
+
+      if (isImg) {
+        const finalAlt = clickable ? "clickable Avatar: ".concat(alt) : alt;
+
+        const imgBasicProps = _Object$assign(_Object$assign({
+          src,
+          srcSet,
+          onError: this.handleError
+        }, imgAttr), {
+          className: cls({
+            ["".concat(prefixCls, "-no-focus-visible")]: clickable
+          })
+        });
+
+        const imgProps = clickable ? _Object$assign(_Object$assign({}, imgBasicProps), a11yFocusProps) : imgBasicProps;
+        content = /*#__PURE__*/React.createElement("img", _Object$assign({
+          alt: finalAlt
+        }, imgProps));
+      } else if (typeof children === 'string') {
+        const tempAlt = alt !== null && alt !== void 0 ? alt : children;
+        const finalAlt = clickable ? "clickable Avatar: ".concat(tempAlt) : tempAlt;
+        const props = {
+          role: 'img',
+          'aria-label': finalAlt,
+          className: cls("".concat(prefixCls, "-label"), {
+            ["".concat(prefixCls, "-no-focus-visible")]: clickable
+          })
+        };
+        const finalProps = clickable ? _Object$assign(_Object$assign({}, props), a11yFocusProps) : props;
+        content = /*#__PURE__*/React.createElement("span", {
+          className: "".concat(prefixCls, "-content")
+        }, /*#__PURE__*/React.createElement("span", _Object$assign({}, finalProps, {
+          "x-semi-prop": "children"
+        }), children));
+      }
+
+      return content;
+    };
+
     this.state = {
       isImgExist: true,
-      hoverContent: ''
+      hoverContent: '',
+      focusVisible: false
     };
     this.onEnter = _bindInstanceProperty(_context = this.onEnter).call(_context, this);
     this.onLeave = _bindInstanceProperty(_context2 = this.onLeave).call(_context2, this);
     this.handleError = _bindInstanceProperty(_context3 = this.handleError).call(_context3, this);
+    this.handleKeyDown = _bindInstanceProperty(_context4 = this.handleKeyDown).call(_context4, this);
+    this.getContent = _bindInstanceProperty(_context5 = this.getContent).call(_context5, this);
   }
 
   get adapter() {
@@ -72,6 +145,11 @@ export default class Avatar extends BaseComponent {
           } = this.props;
           onMouseLeave && onMouseLeave(e);
         });
+      },
+      setFocusVisible: focusVisible => {
+        this.setState({
+          focusVisible
+        });
       }
     });
   }
@@ -122,8 +200,28 @@ export default class Avatar extends BaseComponent {
     this.foundation.handleImgLoadError();
   }
 
+  handleKeyDown(event) {
+    const {
+      onClick
+    } = this.props;
+
+    switch (event.key) {
+      case "Enter":
+        onClick(event);
+        handlePrevent(event);
+        break;
+
+      case 'Escape':
+        event.target.blur();
+        break;
+
+      default:
+        break;
+    }
+  }
+
   render() {
-    var _context4, _context5, _context6;
+    var _context6, _context7, _context8;
 
     // eslint-disable-next-line max-len, no-unused-vars
     const _a = this.props,
@@ -145,46 +243,29 @@ export default class Avatar extends BaseComponent {
 
     const {
       isImgExist,
-      hoverContent
+      hoverContent,
+      focusVisible
     } = this.state;
     const isImg = src && isImgExist;
     const avatarCls = cls(prefixCls, {
-      [_concatInstanceProperty(_context4 = "".concat(prefixCls, "-")).call(_context4, shape)]: shape,
-      [_concatInstanceProperty(_context5 = "".concat(prefixCls, "-")).call(_context5, size)]: size,
-      [_concatInstanceProperty(_context6 = "".concat(prefixCls, "-")).call(_context6, color)]: color && !isImg,
-      ["".concat(prefixCls, "-img")]: isImg
+      [_concatInstanceProperty(_context6 = "".concat(prefixCls, "-")).call(_context6, shape)]: shape,
+      [_concatInstanceProperty(_context7 = "".concat(prefixCls, "-")).call(_context7, size)]: size,
+      [_concatInstanceProperty(_context8 = "".concat(prefixCls, "-")).call(_context8, color)]: color && !isImg,
+      ["".concat(prefixCls, "-img")]: isImg,
+      ["".concat(prefixCls, "-focus")]: focusVisible
     }, className);
-    let content = children;
     const hoverRender = hoverContent ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-hover")
+      className: "".concat(prefixCls, "-hover"),
+      "x-semi-prop": "hoverContent"
     }, hoverContent) : null;
-
-    if (isImg) {
-      content = /*#__PURE__*/React.createElement("img", _Object$assign({
-        src: src,
-        srcSet: srcSet,
-        onError: this.handleError,
-        alt: alt
-      }, imgAttr));
-    } else if (typeof children === 'string') {
-      content = /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixCls, "-content")
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixCls, "-label")
-      }, children));
-    }
-
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
-      React.createElement("span", _Object$assign({}, others, {
-        style: style,
-        className: avatarCls,
-        onClick: onClick,
-        onMouseEnter: this.onEnter,
-        onMouseLeave: this.onLeave
-      }), content, hoverRender)
-    );
+    return /*#__PURE__*/React.createElement("span", _Object$assign({}, others, {
+      style: style,
+      className: avatarCls,
+      onClick: onClick,
+      onMouseEnter: this.onEnter,
+      onMouseLeave: this.onLeave,
+      role: 'listitem'
+    }), this.getContent(), hoverRender);
   }
 
 }

package/lib/es/backtop/index.js

@@ -98,7 +98,8 @@ export default class BackTop extends BaseComponent {
     const content = visible ? /*#__PURE__*/React.createElement("div", _Object$assign({}, others, {
       className: preCls,
       style: style,
-      onClick: e => this.handleClick(e)
+      onClick: e => this.handleClick(e),
+      "x-semi-prop": "children"
     }), backtopBtn) : null;
     return content;
   }

package/lib/es/badge/index.js

@@ -71,7 +71,8 @@ export default class Badge extends PureComponent {
       className: prefixCls
     }, rest), children, /*#__PURE__*/React.createElement("span", {
       className: wrapper,
-      style: style
+      style: style,
+      "x-semi-prop": "count"
     }, dot ? null : content));
   }
 

package/lib/es/banner/index.js

@@ -68,6 +68,7 @@ export default class Banner extends BaseComponent {
       className: "".concat(prefixCls, "-close"),
       onClick: this.remove,
       icon: closeIcon || /*#__PURE__*/React.createElement(IconClose, {
+        "x-semi-prop": "closeIcon",
         "aria-hidden": true
       }),
       theme: "borderless",
@@ -113,7 +114,8 @@ export default class Banner extends BaseComponent {
 
     if (iconType) {
       return /*#__PURE__*/React.createElement("div", {
-        className: iconCls
+        className: iconCls,
+        "x-semi-prop": "icon"
       }, iconType);
     }
 
@@ -155,12 +157,15 @@ export default class Banner extends BaseComponent {
     }, title ? /*#__PURE__*/React.createElement(Typography.Title, {
       heading: 5,
       className: "".concat(prefixCls, "-title"),
-      component: "div"
+      component: "div",
+      "x-semi-prop": "title"
     }, title) : null, description ? /*#__PURE__*/React.createElement(Typography.Paragraph, {
       className: "".concat(prefixCls, "-description"),
-      component: "div"
+      component: "div",
+      "x-semi-prop": "description"
     }, description) : null)), this.renderCloser()), children ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-extra")
+      className: "".concat(prefixCls, "-extra"),
+      "x-semi-prop": "children"
     }, children) : null) : null;
     return banner;
   }

package/lib/es/breadcrumb/index.js

@@ -47,14 +47,15 @@ class Breadcrumb extends BaseComponent {
       }, /*#__PURE__*/React.createElement("span", {
         className: "".concat(clsPrefix, "-item-wrap")
       }, /*#__PURE__*/React.createElement("span", {
-        role: 'button',
+        role: "button",
         tabIndex: 0,
-        "aria-label": 'Expand breadcrumb items',
+        "aria-label": "Expand breadcrumb items",
         className: _concatInstanceProperty(_context = "".concat(clsPrefix, "-item ")).call(_context, clsPrefix, "-item-more"),
         onClick: item => this.foundation.handleExpand(item),
         onKeyPress: e => this.foundation.handleExpandEnterPress(e)
       }, hasRenderMore && renderMore(restItem), !hasRenderMore && moreType === 'default' && /*#__PURE__*/React.createElement(IconMore, null), !hasRenderMore && moreType === 'popover' && this.renderPopoverMore(restItem)), /*#__PURE__*/React.createElement("span", {
-        className: "".concat(clsPrefix, "-separator")
+        className: "".concat(clsPrefix, "-separator"),
+        "x-semi-prop": "separator"
       }, this.props.separator)));
 
       _spliceInstanceProperty(template).call(template, 1, itemsLen - maxItemCount, spread);

package/lib/es/button/Button.js

@@ -1,7 +1,9 @@
+import _omit from "lodash/omit";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -52,7 +54,7 @@ export default class Button extends PureComponent {
 
     const baseProps = _Object$assign(_Object$assign({
       disabled
-    }, attr), {
+    }, _omit(attr, ['x-semi-children-alias'])), {
       className: classNames(prefixCls, {
         [_concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, type)]: !disabled && type,
         ["".concat(prefixCls, "-disabled")]: disabled,
@@ -68,6 +70,12 @@ export default class Button extends PureComponent {
       'aria-disabled': disabled
     });
 
+    const xSemiProps = {};
+
+    if (!(className && _includesInstanceProperty(className).call(className, '-with-icon'))) {
+      xSemiProps['x-semi-prop'] = this.props['x-semi-children-alias'] || 'children';
+    }
+
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/button-has-type
@@ -75,10 +83,10 @@ export default class Button extends PureComponent {
         onClick: this.props.onClick,
         onMouseDown: this.props.onMouseDown,
         style: style
-      }), /*#__PURE__*/React.createElement("span", {
+      }), /*#__PURE__*/React.createElement("span", _Object$assign({
         className: "".concat(prefixCls, "-content"),
         onClick: e => disabled && e.stopPropagation()
-      }, children))
+      }, xSemiProps), children))
     );
   }
 

package/lib/es/card/index.js

@@ -59,7 +59,8 @@ class Card extends PureComponent {
         React.createElement("div", {
           className: headerWrapperCls
         }, headerExtraContent && /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixcls, "-header-wrapper-extra")
+          className: "".concat(prefixcls, "-header-wrapper-extra"),
+          "x-semi-prop": "headerExtraContent"
         }, headerExtraContent), title && /*#__PURE__*/React.createElement("div", {
           className: titleCls
         }, _isString(title) ? /*#__PURE__*/React.createElement(Typography.Title, {
@@ -67,7 +68,8 @@ class Card extends PureComponent {
           ellipsis: {
             showTooltip: true,
             rows: 1
-          }
+          },
+          "x-semi-prop": "title"
         }, title) : title)));
       }
 
@@ -80,7 +82,8 @@ class Card extends PureComponent {
       } = this.props;
       const coverCls = cls("".concat(prefixcls, "-cover"));
       return cover && /*#__PURE__*/React.createElement("div", {
-        className: coverCls
+        className: coverCls,
+        "x-semi-prop": "cover"
       }, cover);
     };
 
@@ -110,7 +113,8 @@ class Card extends PureComponent {
         spacing: 12
       }, _mapInstanceProperty(actions).call(actions, (item, idx) => /*#__PURE__*/React.createElement("div", {
         key: idx,
-        className: actionsItemCls
+        className: actionsItemCls,
+        "x-semi-prop": "actions.".concat(idx)
       }, item)))));
     };
 
@@ -125,7 +129,8 @@ class Card extends PureComponent {
       });
       return footer && /*#__PURE__*/React.createElement("div", {
         style: footerStyle,
-        className: footerCls
+        className: footerCls,
+        "x-semi-prop": "footer"
       }, footer);
     };
   }

package/lib/es/carousel/CarouselArrow.js

@@ -57,12 +57,16 @@ class CarouselArrow extends React.PureComponent {
       // role='button'
       className: leftClassNames,
       onClick: prev
-    }, _get(this.props, 'arrowProps.leftArrow.props')), this.renderLeftIcon()), /*#__PURE__*/React.createElement("div", _Object$assign({
+    }, _get(this.props, 'arrowProps.leftArrow.props'), {
+      "x-semi-prop": "arrowProps.leftArrow.children"
+    }), this.renderLeftIcon()), /*#__PURE__*/React.createElement("div", _Object$assign({
       // role='button'
       // tabIndex={0} 
       className: rightClassNames,
       onClick: next
-    }, _get(this.props, 'arrowProps.rightArrow.props')), this.renderRightIcon()));
+    }, _get(this.props, 'arrowProps.rightArrow.props'), {
+      "x-semi-prop": "arrowProps.rightArrow.children"
+    }), this.renderRightIcon()));
   }
 
 }

package/lib/es/carousel/index.js

@@ -263,7 +263,8 @@ class Carousel extends BaseComponent {
       className: cls([_concatInstanceProperty(_context2 = "".concat(cssClasses.CAROUSEL_CONTENT, "-")).call(_context2, animation)], {
         ["".concat(cssClasses.CAROUSEL_CONTENT)]: true,
         ["".concat(cssClasses.CAROUSEL_CONTENT, "-reverse")]: slideDirection === 'left' ? isReverse : !isReverse
-      })
+      }),
+      "x-semi-prop": "children"
     }, this.renderChildren()), this.renderIndicator(), this.renderArrow());
   }
 

package/lib/es/cascader/index.js

@@ -285,7 +285,8 @@ class Cascader extends BaseComponent {
         ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
       });
       return /*#__PURE__*/React.createElement("div", {
-        className: suffixWrapperCls
+        className: suffixWrapperCls,
+        "x-semi-prop": "suffix"
       }, suffix);
     };
 
@@ -305,7 +306,8 @@ class Cascader extends BaseComponent {
       });
       return /*#__PURE__*/React.createElement("div", {
         className: prefixWrapperCls,
-        id: insetLabelId
+        id: insetLabelId,
+        "x-semi-prop": "prefix,insetLabel"
       }, labelNode);
     };
 
@@ -363,6 +365,8 @@ class Cascader extends BaseComponent {
      * A11y: simulate clear button click
      */
 
+    /* istanbul ignore next */
+
 
     this.handleClearEnterPress = e => {
       e && e.stopPropagation();
@@ -395,7 +399,7 @@ class Cascader extends BaseComponent {
           className: clearCls,
           onClick: this.handleClear,
           onKeyPress: this.handleClearEnterPress,
-          role: 'button',
+          role: "button",
           tabIndex: 0
         }, /*#__PURE__*/React.createElement(IconClear, null));
       }
@@ -414,7 +418,8 @@ class Cascader extends BaseComponent {
       }
 
       return arrowIcon ? /*#__PURE__*/React.createElement("div", {
-        className: cls("".concat(prefixcls, "-arrow"))
+        className: cls("".concat(prefixcls, "-arrow")),
+        "x-semi-prop": "arrowIcon"
       }, arrowIcon) : null;
     };
 
@@ -489,12 +494,12 @@ class Cascader extends BaseComponent {
         "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-required": this.props['aria-required'],
         id: id
       }, mouseEvent, {
         // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-        role: 'combobox',
+        role: "combobox",
         tabIndex: 0
       }), inner);
     };

package/lib/es/cascader/item.js

@@ -296,7 +296,8 @@ export default class Item extends PureComponent {
         className: _concatInstanceProperty(_context6 = "".concat(prefixcls, " ")).call(_context6, prefixcls, "-empty"),
         key: 'empty-list'
       }, /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixcls, "-label")
+        className: "".concat(prefixcls, "-label"),
+        "x-semi-prop": "emptyContent"
       }, emptyContent || locale.emptyText));
     });
   }

package/lib/es/checkbox/checkbox.js

@@ -177,13 +177,17 @@ class Checkbox extends BaseComponent {
     const extraCls = classnames("".concat(prefix, "-extra"), {
       ["".concat(prefix, "-cardType_extra_noChildren")]: props.isCardType && !children
     });
+    const name = inGroup && this.context.checkboxGroup.name;
+    const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
 
     const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
       id: addonId,
-      className: "".concat(prefix, "-addon")
+      className: "".concat(prefix, "-addon"),
+      "x-semi-prop": xSemiPropChildren
     }, children) : null, extra ? /*#__PURE__*/React.createElement("div", {
       id: extraId,
-      className: extraCls
+      className: extraCls,
+      "x-semi-prop": "extra"
     }, extra) : null);
 
     return (

package/lib/es/collapsible/index.js

@@ -89,7 +89,8 @@ const Collapsible = props => {
       style: {
         overflow: 'hidden'
       },
-      id: id
+      id: id,
+      "x-semi-prop": "children"
     }, children));
   };
 

package/lib/es/datePicker/dateInput.js

@@ -153,7 +153,8 @@ export default class DateInput extends BaseComponent {
     const labelNode = prefix || insetLabel;
     return labelNode ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-range-input-prefix"),
-      onClick: e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e)
+      onClick: e => !disabled && !rangeInputFocus && this.handleRangeStartFocus(e),
+      "x-semi-prop": "prefix,insetLabel"
     }, labelNode) : null;
   }
 

package/lib/es/datePicker/datePicker.js

@@ -182,11 +182,13 @@ export default class DatePicker extends BaseComponent {
         className: wrapCls,
         style: dropdownStyle
       }, topSlot && /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cssClasses.PREFIX, "-topSlot")
+        className: "".concat(cssClasses.PREFIX, "-topSlot"),
+        "x-semi-prop": "topSlot"
       }, topSlot), insetInput && /*#__PURE__*/React.createElement(DateInput, _Object$assign({}, insetInputProps, {
         insetInput: true
       })), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cssClasses.PREFIX, "-bottomSlot")
+        className: "".concat(cssClasses.PREFIX, "-bottomSlot"),
+        "x-semi-prop": "bottomSlot"
       }, bottomSlot), this.renderFooter(locale, localeCode));
     };