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

package/lib/cjs/avatar/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context7;
+var _context9;
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
@@ -21,10 +21,10 @@ var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
 
-var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
-
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -43,9 +43,11 @@ var _function = require("@douyinfe/semi-foundation/lib/cjs/utils/function");
 
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
+var _a11y = require("@douyinfe/semi-foundation/lib/cjs/utils/a11y");
+
 var _interface = require("./interface");
 
-_forEachInstanceProperty(_context7 = _Object$keys(_interface)).call(_context7, function (key) {
+_forEachInstanceProperty(_context9 = _Object$keys(_interface)).call(_context9, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _interface[key]) return;
@@ -76,16 +78,86 @@ const prefixCls = _constants.cssClasses.PREFIX;
 
 class Avatar extends _baseComponent.default {
   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 !== _function.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 = (0, _assign.default)((0, _assign.default)({
+          src,
+          srcSet,
+          onError: this.handleError
+        }, imgAttr), {
+          className: (0, _classnames.default)({
+            ["".concat(prefixCls, "-no-focus-visible")]: clickable
+          })
+        });
+        const imgProps = clickable ? (0, _assign.default)((0, _assign.default)({}, imgBasicProps), a11yFocusProps) : imgBasicProps;
+        content = /*#__PURE__*/_react.default.createElement("img", (0, _assign.default)({
+          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: (0, _classnames.default)("".concat(prefixCls, "-label"), {
+            ["".concat(prefixCls, "-no-focus-visible")]: clickable
+          })
+        };
+        const finalProps = clickable ? (0, _assign.default)((0, _assign.default)({}, props), a11yFocusProps) : props;
+        content = /*#__PURE__*/_react.default.createElement("span", {
+          className: "".concat(prefixCls, "-content")
+        }, /*#__PURE__*/_react.default.createElement("span", (0, _assign.default)({}, finalProps, {
+          "x-semi-prop": "children"
+        }), children));
+      }
+
+      return content;
+    };
+
     this.state = {
       isImgExist: true,
-      hoverContent: ''
+      hoverContent: '',
+      focusVisible: false
     };
     this.onEnter = (0, _bind.default)(_context = this.onEnter).call(_context, this);
     this.onLeave = (0, _bind.default)(_context2 = this.onLeave).call(_context2, this);
     this.handleError = (0, _bind.default)(_context3 = this.handleError).call(_context3, this);
+    this.handleKeyDown = (0, _bind.default)(_context4 = this.handleKeyDown).call(_context4, this);
+    this.getContent = (0, _bind.default)(_context5 = this.getContent).call(_context5, this);
   }
 
   get adapter() {
@@ -118,6 +190,11 @@ class Avatar extends _baseComponent.default {
           } = this.props;
           onMouseLeave && onMouseLeave(e);
         });
+      },
+      setFocusVisible: focusVisible => {
+        this.setState({
+          focusVisible
+        });
       }
     });
   }
@@ -168,8 +245,28 @@ class Avatar extends _baseComponent.default {
     this.foundation.handleImgLoadError();
   }
 
+  handleKeyDown(event) {
+    const {
+      onClick
+    } = this.props;
+
+    switch (event.key) {
+      case "Enter":
+        onClick(event);
+        (0, _a11y.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,
@@ -191,46 +288,29 @@ class Avatar extends _baseComponent.default {
 
     const {
       isImgExist,
-      hoverContent
+      hoverContent,
+      focusVisible
     } = this.state;
     const isImg = src && isImgExist;
     const avatarCls = (0, _classnames.default)(prefixCls, {
-      [(0, _concat.default)(_context4 = "".concat(prefixCls, "-")).call(_context4, shape)]: shape,
-      [(0, _concat.default)(_context5 = "".concat(prefixCls, "-")).call(_context5, size)]: size,
-      [(0, _concat.default)(_context6 = "".concat(prefixCls, "-")).call(_context6, color)]: color && !isImg,
-      ["".concat(prefixCls, "-img")]: isImg
+      [(0, _concat.default)(_context6 = "".concat(prefixCls, "-")).call(_context6, shape)]: shape,
+      [(0, _concat.default)(_context7 = "".concat(prefixCls, "-")).call(_context7, size)]: size,
+      [(0, _concat.default)(_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.default.createElement("div", {
-      className: "".concat(prefixCls, "-hover")
+      className: "".concat(prefixCls, "-hover"),
+      "x-semi-prop": "hoverContent"
     }, hoverContent) : null;
-
-    if (isImg) {
-      content = /*#__PURE__*/_react.default.createElement("img", (0, _assign.default)({
-        src: src,
-        srcSet: srcSet,
-        onError: this.handleError,
-        alt: alt
-      }, imgAttr));
-    } else if (typeof children === 'string') {
-      content = /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(prefixCls, "-content")
-      }, /*#__PURE__*/_react.default.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.default.createElement("span", (0, _assign.default)({}, others, {
-        style: style,
-        className: avatarCls,
-        onClick: onClick,
-        onMouseEnter: this.onEnter,
-        onMouseLeave: this.onLeave
-      }), content, hoverRender)
-    );
+    return /*#__PURE__*/_react.default.createElement("span", (0, _assign.default)({}, others, {
+      style: style,
+      className: avatarCls,
+      onClick: onClick,
+      onMouseEnter: this.onEnter,
+      onMouseLeave: this.onLeave,
+      role: 'listitem'
+    }), this.getContent(), hoverRender);
   }
 
 }

package/lib/cjs/backtop/index.js

@@ -121,7 +121,8 @@ class BackTop extends _baseComponent.default {
     const content = visible ? /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, 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/cjs/badge/index.js

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

package/lib/cjs/banner/index.js

@@ -93,6 +93,7 @@ class Banner extends _baseComponent.default {
       className: "".concat(prefixCls, "-close"),
       onClick: this.remove,
       icon: closeIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+        "x-semi-prop": "closeIcon",
         "aria-hidden": true
       }),
       theme: "borderless",
@@ -139,7 +140,8 @@ class Banner extends _baseComponent.default {
 
     if (iconType) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: iconCls
+        className: iconCls,
+        "x-semi-prop": "icon"
       }, iconType);
     }
 
@@ -181,12 +183,15 @@ class Banner extends _baseComponent.default {
     }, title ? /*#__PURE__*/_react.default.createElement(_typography.default.Title, {
       heading: 5,
       className: "".concat(prefixCls, "-title"),
-      component: "div"
+      component: "div",
+      "x-semi-prop": "title"
     }, title) : null, description ? /*#__PURE__*/_react.default.createElement(_typography.default.Paragraph, {
       className: "".concat(prefixCls, "-description"),
-      component: "div"
+      component: "div",
+      "x-semi-prop": "description"
     }, description) : null)), this.renderCloser()), children ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-extra")
+      className: "".concat(prefixCls, "-extra"),
+      "x-semi-prop": "children"
     }, children) : null) : null;
     return banner;
   }

package/lib/cjs/breadcrumb/index.js

@@ -76,14 +76,15 @@ class Breadcrumb extends _baseComponent.default {
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(clsPrefix, "-item-wrap")
       }, /*#__PURE__*/_react.default.createElement("span", {
-        role: 'button',
+        role: "button",
         tabIndex: 0,
-        "aria-label": 'Expand breadcrumb items',
+        "aria-label": "Expand breadcrumb items",
         className: (0, _concat.default)(_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.default.createElement(_semiIcons.IconMore, null), !hasRenderMore && moreType === 'popover' && this.renderPopoverMore(restItem)), /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(clsPrefix, "-separator")
+        className: "".concat(clsPrefix, "-separator"),
+        "x-semi-prop": "separator"
       }, this.props.separator)));
 
       (0, _splice.default)(template).call(template, 1, itemsLen - maxItemCount, spread);

package/lib/cjs/button/Button.js

@@ -22,6 +22,10 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _omit2 = _interopRequireDefault(require("lodash/omit"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -81,7 +85,7 @@ class Button extends _react.PureComponent {
 
     const baseProps = (0, _assign.default)((0, _assign.default)({
       disabled
-    }, attr), {
+    }, (0, _omit2.default)(attr, ['x-semi-children-alias'])), {
       className: (0, _classnames.default)(prefixCls, {
         [(0, _concat.default)(_context = "".concat(prefixCls, "-")).call(_context, type)]: !disabled && type,
         ["".concat(prefixCls, "-disabled")]: disabled,
@@ -96,6 +100,12 @@ class Button extends _react.PureComponent {
       type: htmlType,
       'aria-disabled': disabled
     });
+    const xSemiProps = {};
+
+    if (!(className && (0, _includes.default)(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
@@ -103,10 +113,10 @@ class Button extends _react.PureComponent {
         onClick: this.props.onClick,
         onMouseDown: this.props.onMouseDown,
         style: style
-      }), /*#__PURE__*/_react.default.createElement("span", {
+      }), /*#__PURE__*/_react.default.createElement("span", (0, _assign.default)({
         className: "".concat(prefixCls, "-content"),
         onClick: e => disabled && e.stopPropagation()
-      }, children))
+      }, xSemiProps), children))
     );
   }
 

package/lib/cjs/card/index.js

@@ -95,7 +95,8 @@ class Card extends _react.PureComponent {
         _react.default.createElement("div", {
           className: headerWrapperCls
         }, headerExtraContent && /*#__PURE__*/_react.default.createElement("div", {
-          className: "".concat(prefixcls, "-header-wrapper-extra")
+          className: "".concat(prefixcls, "-header-wrapper-extra"),
+          "x-semi-prop": "headerExtraContent"
         }, headerExtraContent), title && /*#__PURE__*/_react.default.createElement("div", {
           className: titleCls
         }, (0, _isString2.default)(title) ? /*#__PURE__*/_react.default.createElement(_typography.default.Title, {
@@ -103,7 +104,8 @@ class Card extends _react.PureComponent {
           ellipsis: {
             showTooltip: true,
             rows: 1
-          }
+          },
+          "x-semi-prop": "title"
         }, title) : title)));
       }
 
@@ -116,7 +118,8 @@ class Card extends _react.PureComponent {
       } = this.props;
       const coverCls = (0, _classnames.default)("".concat(prefixcls, "-cover"));
       return cover && /*#__PURE__*/_react.default.createElement("div", {
-        className: coverCls
+        className: coverCls,
+        "x-semi-prop": "cover"
       }, cover);
     };
 
@@ -148,7 +151,8 @@ class Card extends _react.PureComponent {
         spacing: 12
       }, (0, _map.default)(actions).call(actions, (item, idx) => /*#__PURE__*/_react.default.createElement("div", {
         key: idx,
-        className: actionsItemCls
+        className: actionsItemCls,
+        "x-semi-prop": "actions.".concat(idx)
       }, item)))));
     };
 
@@ -163,7 +167,8 @@ class Card extends _react.PureComponent {
       });
       return footer && /*#__PURE__*/_react.default.createElement("div", {
         style: footerStyle,
-        className: footerCls
+        className: footerCls,
+        "x-semi-prop": "footer"
       }, footer);
     };
   }

package/lib/cjs/carousel/CarouselArrow.js

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

package/lib/cjs/carousel/index.js

@@ -296,7 +296,8 @@ class Carousel extends _baseComponent.default {
       className: (0, _classnames.default)([(0, _concat.default)(_context2 = "".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-")).call(_context2, animation)], {
         ["".concat(_constants.cssClasses.CAROUSEL_CONTENT)]: true,
         ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-reverse")]: slideDirection === 'left' ? isReverse : !isReverse
-      })
+      }),
+      "x-semi-prop": "children"
     }, this.renderChildren()), this.renderIndicator(), this.renderArrow());
   }
 

package/lib/cjs/cascader/index.js

@@ -342,7 +342,8 @@ class Cascader extends _baseComponent.default {
         ["".concat(prefixcls, "-suffix-icon")]: (0, _utils.isSemiIcon)(suffix)
       });
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: suffixWrapperCls
+        className: suffixWrapperCls,
+        "x-semi-prop": "suffix"
       }, suffix);
     };
 
@@ -362,7 +363,8 @@ class Cascader extends _baseComponent.default {
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: prefixWrapperCls,
-        id: insetLabelId
+        id: insetLabelId,
+        "x-semi-prop": "prefix,insetLabel"
       }, labelNode);
     };
 
@@ -420,6 +422,8 @@ class Cascader extends _baseComponent.default {
      * A11y: simulate clear button click
      */
 
+    /* istanbul ignore next */
+
 
     this.handleClearEnterPress = e => {
       e && e.stopPropagation();
@@ -452,7 +456,7 @@ class Cascader extends _baseComponent.default {
           className: clearCls,
           onClick: this.handleClear,
           onKeyPress: this.handleClearEnterPress,
-          role: 'button',
+          role: "button",
           tabIndex: 0
         }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
       }
@@ -471,7 +475,8 @@ class Cascader extends _baseComponent.default {
       }
 
       return arrowIcon ? /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)("".concat(prefixcls, "-arrow"))
+        className: (0, _classnames.default)("".concat(prefixcls, "-arrow")),
+        "x-semi-prop": "arrowIcon"
       }, arrowIcon) : null;
     };
 
@@ -546,12 +551,12 @@ class Cascader extends _baseComponent.default {
         "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);
     };
@@ -800,13 +805,15 @@ class Cascader extends _baseComponent.default {
           if ((0, _isArray.default)(realValue)) {
             normallizedValue = (0, _isArray.default)(realValue[0]) ? realValue : [realValue];
           } else {
-            normallizedValue = [[realValue]];
+            if (realValue !== undefined) {
+              normallizedValue = [[realValue]];
+            }
           } // formatValuePath is used to save value of valuePath
 
 
           const formatValuePath = [];
           (0, _forEach.default)(normallizedValue).call(normallizedValue, valueItem => {
-            const formatItem = onChangeWithObject ? (0, _map.default)(valueItem).call(valueItem, i => i.value) : valueItem;
+            const formatItem = onChangeWithObject ? (0, _map.default)(valueItem).call(valueItem, i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
             formatValuePath.push(formatItem);
           }); // formatKeys is used to save key of value
 

package/lib/cjs/cascader/item.js

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

package/lib/cjs/checkbox/checkbox.js

@@ -201,13 +201,17 @@ class Checkbox extends _baseComponent.default {
     const extraCls = (0, _classnames.default)("".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.default.createElement(_react.default.Fragment, null, children ? /*#__PURE__*/_react.default.createElement("span", {
       id: addonId,
-      className: "".concat(prefix, "-addon")
+      className: "".concat(prefix, "-addon"),
+      "x-semi-prop": xSemiPropChildren
     }, children) : null, extra ? /*#__PURE__*/_react.default.createElement("div", {
       id: extraId,
-      className: extraCls
+      className: extraCls,
+      "x-semi-prop": "extra"
     }, extra) : null);
 
     return (

package/lib/cjs/collapsible/index.js

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

package/lib/cjs/datePicker/dateInput.js

@@ -179,7 +179,8 @@ class DateInput extends _baseComponent.default {
     const labelNode = prefix || insetLabel;
     return labelNode ? /*#__PURE__*/_react.default.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/cjs/datePicker/datePicker.js

@@ -220,11 +220,13 @@ class DatePicker extends _baseComponent.default {
         className: wrapCls,
         style: dropdownStyle
       }, topSlot && /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(_constants.cssClasses.PREFIX, "-topSlot")
+        className: "".concat(_constants.cssClasses.PREFIX, "-topSlot"),
+        "x-semi-prop": "topSlot"
       }, topSlot), insetInput && /*#__PURE__*/_react.default.createElement(_dateInput.default, (0, _assign.default)({}, insetInputProps, {
         insetInput: true
       })), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(_constants.cssClasses.PREFIX, "-bottomSlot")
+        className: "".concat(_constants.cssClasses.PREFIX, "-bottomSlot"),
+        "x-semi-prop": "bottomSlot"
       }, bottomSlot), this.renderFooter(locale, localeCode));
     };
 

package/lib/cjs/divider/index.js

@@ -80,7 +80,8 @@ const Divider = props => {
     className: dividerClassNames,
     style: (0, _assign.default)((0, _assign.default)({}, overrideDefaultStyle), style)
   }), children && layout === 'horizontal' ? typeof children === 'string' ? /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(prefixCls, "-divider_inner-text")
+    className: "".concat(prefixCls, "-divider_inner-text"),
+    "x-semi-prop": "children"
   }, children) : children : null);
 };
 

package/lib/cjs/dropdown/index.js

@@ -118,7 +118,8 @@ class Dropdown extends _baseComponent.default {
       className: className,
       style: style
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-content")
+      className: "".concat(prefixCls, "-content"),
+      "x-semi-prop": "render"
     }, content)));
   }
 

package/lib/cjs/empty/index.js

@@ -122,15 +122,19 @@ class Empty extends _baseComponent.default {
       style: style
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-image"),
-      style: imageStyle
+      style: imageStyle,
+      "x-semi-prop": "image,darkModeImage"
     }, imageNode), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-content")
     }, title ? /*#__PURE__*/_react.default.createElement(_typography.default.Title, (0, _assign.default)({}, titleProps, {
-      className: "".concat(prefixCls, "-title")
+      className: "".concat(prefixCls, "-title"),
+      "x-semi-prop": "title"
     }), title) : null, description ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-description")
+      className: "".concat(prefixCls, "-description"),
+      "x-semi-prop": "description"
     }, description) : null, children ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-footer")
+      className: "".concat(prefixCls, "-footer"),
+      "x-semi-prop": "children"
     }, children) : null));
   }
 

package/lib/cjs/form/hoc/withField.js

@@ -459,7 +459,8 @@ function withField(Component, opts) {
       });
       const extraContent = extraText ? /*#__PURE__*/_react.default.createElement("div", {
         className: extraCls,
-        id: extraTextId
+        id: extraTextId,
+        "x-semi-prop": "extraText"
       }, extraText) : null;
       let newProps = (0, _assign.default)((0, _assign.default)({
         id: a11yId,

package/lib/cjs/form/label.js

@@ -55,7 +55,8 @@ class Label extends _react.PureComponent {
     width ? labelStyle.width = width : null;
 
     const textContent = /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-field-label-text")
+      className: "".concat(prefixCls, "-field-label-text"),
+      "x-semi-prop": "label"
     }, typeof text !== 'undefined' ? text : children);
 
     const contentWithExtra = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, textContent, /*#__PURE__*/_react.default.createElement("div", {