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

package/lib/cjs/rating/item.js

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

package/lib/cjs/scrollList/index.js

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

package/lib/cjs/select/index.js

@@ -483,6 +483,8 @@ class Select extends _baseComponent.default {
     e.nativeEvent.stopImmediatePropagation();
     this.foundation.handleClearClick(e);
   }
+  /* istanbul ignore next */
+
 
   onClearBtnEnterPress(e) {
     this.foundation.handleClearBtnEnterPress(e);
@@ -718,7 +720,8 @@ class Select extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: contentWrapperCls
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: spanCls
+      className: spanCls,
+      "x-semi-prop": "placeholder"
     }, renderText || renderText === 0 ? renderText : placeholder), filterable && showInput ? this.renderInput() : null));
   }
 
@@ -877,7 +880,8 @@ class Select extends _baseComponent.default {
       ["".concat(prefixcls, "-suffix-icon")]: (0, _utils2.isSemiIcon)(suffix)
     });
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: suffixWrapperCls
+      className: suffixWrapperCls,
+      "x-semi-prop": "suffix"
     }, suffix);
   }
 
@@ -896,7 +900,8 @@ class Select extends _baseComponent.default {
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixWrapperCls,
-      id: insetLabelId
+      id: insetLabelId,
+      "x-semi-prop": "prefix,insetLabel"
     }, labelNode);
   }
 
@@ -948,7 +953,8 @@ class Select extends _baseComponent.default {
     });
     const showClear = this.props.showClear && (selections.size || inputValue) && !disabled && (isHovering || isOpen);
     const arrowContent = showArrow ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixcls, "-arrow")
+      className: "".concat(prefixcls, "-arrow"),
+      "x-semi-prop": "arrowIcon"
     }, arrowIcon) : /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixcls, "-arrow-empty")
     });

package/lib/cjs/select/option.js

@@ -129,7 +129,8 @@ class Option extends _react.PureComponent {
       return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Select"
       }, locale => /*#__PURE__*/_react.default.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/cjs/sideSheet/SideSheetContent.js

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

package/lib/cjs/skeleton/index.js

@@ -71,7 +71,9 @@ class Skeleton extends _react.PureComponent {
       content = /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
         className: skCls,
         style: style
-      }, others), placeholder);
+      }, others, {
+        "x-semi-prop": "placeholder"
+      }), placeholder);
     } else {
       content = children;
     }

package/lib/cjs/space/index.js

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

package/lib/cjs/spin/index.js

@@ -89,8 +89,11 @@ class Spin extends _baseComponent.default {
     return loading ? /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-wrapper")
     }, indicator ? /*#__PURE__*/_react.default.createElement("div", {
-      className: spinIconCls
-    }, indicator) : /*#__PURE__*/_react.default.createElement(_icon.default, null), tip ? /*#__PURE__*/_react.default.createElement("div", null, tip) : null) : null;
+      className: spinIconCls,
+      "x-semi-prop": "indicator"
+    }, indicator) : /*#__PURE__*/_react.default.createElement(_icon.default, null), tip ? /*#__PURE__*/_react.default.createElement("div", {
+      "x-semi-prop": "tip"
+    }, tip) : null) : null;
   }
 
   render() {
@@ -117,7 +120,8 @@ class Spin extends _baseComponent.default {
       style: style
     }, this.renderSpin(), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-children"),
-      style: childStyle
+      style: childStyle,
+      "x-semi-prop": "children"
     }, children));
   }
 

package/lib/cjs/switch/index.js

@@ -139,19 +139,21 @@ class Switch extends _baseComponent.default {
       className: _constants.cssClasses.KNOB,
       "aria-hidden": true
     }), showCheckedText ? /*#__PURE__*/_react.default.createElement("div", {
-      className: _constants.cssClasses.CHECKED_TEXT
+      className: _constants.cssClasses.CHECKED_TEXT,
+      "x-semi-prop": "checkedText"
     }, checkedText) : null, showUncheckedText ? /*#__PURE__*/_react.default.createElement("div", {
-      className: _constants.cssClasses.UNCHECKED_TEXT
+      className: _constants.cssClasses.UNCHECKED_TEXT,
+      "x-semi-prop": "uncheckedText"
     }, uncheckedText) : null, /*#__PURE__*/_react.default.createElement("input", (0, _assign.default)({}, 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/cjs/table/Table.js

@@ -642,7 +642,8 @@ class Table extends _baseComponent.default {
       }
 
       return /*#__PURE__*/(0, _react.isValidElement)(title) || typeof title === 'string' ? /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-title")
+        className: "".concat(prefixCls, "-title"),
+        "x-semi-prop": "title"
       }, title) : null;
     };
 
@@ -667,7 +668,8 @@ class Table extends _baseComponent.default {
       }, (locale, localeCode) => /*#__PURE__*/_react.default.createElement("div", {
         className: wrapCls
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-empty")
+        className: "".concat(prefixCls, "-empty"),
+        "x-semi-prop": "empty"
       }, empty || locale.emptyText)));
     };
 
@@ -687,7 +689,8 @@ class Table extends _baseComponent.default {
 
       return /*#__PURE__*/(0, _react.isValidElement)(footer) || typeof footer === 'string' ? /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(prefixCls, "-footer"),
-        key: "footer"
+        key: "footer",
+        "x-semi-prop": "footer"
       }, footer) : null;
     };
 

package/lib/cjs/tabs/TabBar.js

@@ -271,7 +271,8 @@ class TabBar extends _react.default.Component {
       const tabBarStyle = (0, _assign.default)((0, _assign.default)({}, tabBarExtraContentDefaultStyle), tabBarExtraContentStyle);
       return /*#__PURE__*/_react.default.createElement("div", {
         className: extraCls,
-        style: tabBarStyle
+        style: tabBarStyle,
+        "x-semi-prop": "tabBarExtraContent"
       }, tabBarExtraContent);
     }
 

package/lib/cjs/tabs/TabPane.js

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

package/lib/cjs/tagInput/index.js

@@ -79,6 +79,8 @@ class TagInput extends _baseComponent.default {
     this.handleClearBtn = e => {
       this.foundation.handleClearBtn(e);
     };
+    /* istanbul ignore next */
+
 
     this.handleClearEnterPress = e => {
       this.foundation.handleClearEnterPress(e);
@@ -253,14 +255,18 @@ class TagInput extends _baseComponent.default {
       ["".concat(prefixCls, "-prefix-text")]: labelNode && (0, _isString2.default)(labelNode),
       // eslint-disable-next-line max-len
       ["".concat(prefixCls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
-    }); // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
-
-    return /*#__PURE__*/_react.default.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.default.createElement("div", {
+        className: prefixWrapperCls,
+        onMouseDown: this.handlePreventMouseDown,
+        onClick: this.handleClickPrefixOrSuffix,
+        id: insetLabelId,
+        "x-semi-prop": "prefix"
+      }, labelNode)
+    );
   }
 
   renderSuffix() {
@@ -276,13 +282,17 @@ class TagInput extends _baseComponent.default {
       ["".concat(prefixCls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
       // eslint-disable-next-line max-len
       ["".concat(prefixCls, "-suffix-icon")]: (0, _utils.isSemiIcon)(suffix)
-    }); // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-
-    return /*#__PURE__*/_react.default.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.default.createElement("div", {
+        className: suffixWrapperCls,
+        onMouseDown: this.handlePreventMouseDown,
+        onClick: this.handleClickPrefixOrSuffix,
+        "x-semi-prop": "suffix"
+      }, suffix)
+    );
   }
 
   renderTags() {
@@ -306,7 +316,7 @@ class TagInput extends _baseComponent.default {
     const typoCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-typo"), {
       ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
     });
-    const spanNotWithPopoverCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-n"), {
+    const restTagsCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-n"), {
       ["".concat(prefixCls, "-wrapper-n-disabled")]: disabled
     });
     const restTags = [];
@@ -346,17 +356,18 @@ class TagInput extends _baseComponent.default {
         tags.push(item);
       }
     });
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tags, restTags.length > 0 && (showRestTagsPopover && !disabled ? /*#__PURE__*/_react.default.createElement(_popover.default, (0, _assign.default)({
+
+    const restTagsContent = /*#__PURE__*/_react.default.createElement("span", {
+      className: restTagsCls
+    }, "+", tagsArray.length - maxTagCount);
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tags, restTags.length > 0 && (showRestTagsPopover ? /*#__PURE__*/_react.default.createElement(_popover.default, (0, _assign.default)({
       content: restTags,
       showArrow: true,
       trigger: "hover",
       position: "top",
       autoAdjustOverflow: true
-    }, restTagsPopoverProps), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)("".concat(prefixCls, "-wrapper-n"))
-    }, "+", tagsArray.length - maxTagCount)) : /*#__PURE__*/_react.default.createElement("span", {
-      className: spanNotWithPopoverCls
-    }, "+".concat(tagsArray.length - maxTagCount))));
+    }, restTagsPopoverProps), restTagsContent) : restTagsContent));
   }
 
   blur() {

package/lib/cjs/timePicker/Combobox.js

@@ -311,7 +311,9 @@ class Combobox extends _baseComponent.default {
       componentName: "TimePicker"
     }, (locale, localeCode) => /*#__PURE__*/_react.default.createElement(_index.default, {
       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)));
   }
 

package/lib/cjs/timePicker/TimePicker.js

@@ -110,6 +110,8 @@ class TimePicker extends _baseComponent.default {
 
       return panelProps;
     };
+    /* istanbul ignore next */
+
 
     this.handlePanelVisibleChange = visible => this.foundation.handleVisibleChange(visible);
 

package/lib/cjs/toast/toast.js

@@ -135,7 +135,7 @@ class Toast extends _baseComponent.default {
     const btnTheme = 'borderless';
     const btnSize = 'small';
     return /*#__PURE__*/_react.default.createElement("div", {
-      role: 'alert',
+      role: "alert",
       "aria-label": "".concat(type ? type : 'default', " type"),
       className: toastCls,
       style: style,
@@ -145,13 +145,16 @@ class Toast extends _baseComponent.default {
       className: "".concat(prefixCls, "-content")
     }, this.renderIcon(), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(prefixCls, "-content-text"),
-      style: textStyle
+      style: textStyle,
+      "x-semi-prop": "content"
     }, content), showClose && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-close-button")
     }, /*#__PURE__*/_react.default.createElement(_index.default, {
       onClick: e => this.close(e),
       type: "tertiary",
-      icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
+      icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+        "x-semi-prop": "icon"
+      }),
       theme: btnTheme,
       size: btnSize
     }))));

package/lib/cjs/tooltip/index.js

@@ -672,7 +672,12 @@ class Tooltip extends _baseComponent.default {
         children = /*#__PURE__*/(0, _react.cloneElement)(children, {
           style: childrenStyle
         });
-        children = this.wrapSpan(children);
+
+        if (trigger !== 'custom') {
+          // no need to wrap span when trigger is custom, cause it don't need bind event
+          children = this.wrapSpan(children);
+        }
+
         this.isWrapped = true;
       } else if (! /*#__PURE__*/(0, _react.isValidElement)(children)) {
         children = this.wrapSpan(children);

package/lib/cjs/transfer/index.js

@@ -279,7 +279,8 @@ class Transfer extends _baseComponent.default {
       className: leftItemCls,
       checked: checked,
       role: "listitem",
-      onChange: () => this.onSelectOrRemove(item)
+      onChange: () => this.onSelectOrRemove(item),
+      "x-semi-children-alias": "dataSource[".concat(index, "].label")
     }, item.label);
   }
 

package/lib/cjs/tree/treeNode.js

@@ -410,7 +410,8 @@ class TreeNode extends _react.PureComponent {
     return /*#__PURE__*/_react.default.createElement("ul", {
       className: wrapperCls
     }, /*#__PURE__*/_react.default.createElement("li", {
-      className: (0, _concat.default)(_context2 = "".concat(prefixcls, "-label ")).call(_context2, prefixcls, "-label-empty")
+      className: (0, _concat.default)(_context2 = "".concat(prefixcls, "-label ")).call(_context2, prefixcls, "-label-empty"),
+      "x-semi-prop": "emptyContent"
     }, emptyContent));
   } // eslint-disable-next-line max-lines-per-function
 

package/lib/cjs/treeSelect/index.js

@@ -120,7 +120,8 @@ class TreeSelect 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);
     };
 
@@ -140,7 +141,8 @@ class TreeSelect extends _baseComponent.default {
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: prefixWrapperCls,
-        id: insetLabelId
+        id: insetLabelId,
+        "x-semi-prop": "prefix,insetLabel"
       }, labelNode);
     };
 
@@ -169,6 +171,8 @@ class TreeSelect extends _baseComponent.default {
     this.handleClick = e => {
       this.foundation.handleClick(e);
     };
+    /* istanbul ignore next */
+
 
     this.handleSelectionEnterPress = e => {
       this.foundation.handleSelectionEnterPress(e);
@@ -361,6 +365,8 @@ class TreeSelect extends _baseComponent.default {
       e && e.stopPropagation();
       this.foundation.handleClear(e);
     };
+    /* istanbul ignore next */
+
 
     this.handleClearEnterPress = e => {
       e && e.stopPropagation();
@@ -394,7 +400,8 @@ class TreeSelect 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;
     };
 

package/lib/cjs/typography/base.js

@@ -571,7 +571,8 @@ class Base extends _react.Component {
 
     const iconSize = size === 'small' ? 'small' : 'default';
     return /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixCls, "-icon")
+      className: "".concat(prefixCls, "-icon"),
+      "x-semi-prop": "icon"
     }, (0, _utils.isSemiIcon)(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, {
       size: iconSize
     }) : icon);

package/lib/cjs/upload/index.d.ts

@@ -6,7 +6,7 @@ import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError } from './interface';
 import { Locale } from '../locale/interface';
 import '@douyinfe/semi-foundation/lib/cjs/upload/upload.css';
-export { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, BeforeUploadObjectResult, AfterUploadResult };
+export { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, BeforeUploadObjectResult, AfterUploadResult, };
 export interface UploadProps {
     accept?: string;
     action: string;

package/lib/cjs/upload/index.js

@@ -256,7 +256,9 @@ class Upload extends _baseComponent.default {
         });
       }
 
-      const addContent = /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, addContentProps), children);
+      const addContent = /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, addContentProps, {
+        "x-semi-prop": "children"
+      }), children);
 
       if (!showUploadList || !fileList.length) {
         if (showAddTriggerInList) {
@@ -389,15 +391,18 @@ class Upload extends _baseComponent.default {
         onDragEnter: this.onDragEnter,
         onClick: this.onClick
       }, children ? children : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-icon")
+        className: "".concat(dragAreaBaseCls, "-icon"),
+        "x-semi-prop": "dragIcon"
       }, dragIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconUpload, {
         size: "extra-large"
       })), /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(dragAreaBaseCls, "-text")
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-main-text")
+        className: "".concat(dragAreaBaseCls, "-main-text"),
+        "x-semi-prop": "dragMainText"
       }, dragMainText || locale.mainText), /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-sub-text")
+        className: "".concat(dragAreaBaseCls, "-sub-text"),
+        "x-semi-prop": "dragSubText"
       }, dragSubText), /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(dragAreaBaseCls, "-tips")
       }, dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL && /*#__PURE__*/_react.default.createElement("span", {
@@ -583,9 +588,11 @@ class Upload extends _baseComponent.default {
       className: inputReplaceCls,
       ref: this.replaceInputRef
     }), this.renderAddContent(), prompt ? /*#__PURE__*/_react.default.createElement("div", {
-      className: promptCls
+      className: promptCls,
+      "x-semi-prop": "prompt"
     }, prompt) : null, validateMessage ? /*#__PURE__*/_react.default.createElement("div", {
-      className: validateMsgCls
+      className: validateMsgCls,
+      "x-semi-prop": "validateMessage"
     }, validateMessage) : null, this.renderFileList());
   }
 

package/lib/es/_base/base.css

@@ -345,13 +345,13 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-primary-light-default: rgba(var(--semi-blue-0), 1);
   --semi-color-primary-light-hover: rgba(var(--semi-blue-1), 1);
   --semi-color-primary-light-active: rgba(var(--semi-blue-2), 1);
-  --semi-color-secondary: rgba(var(--semi-blue-5), 1);
-  --semi-color-secondary-hover: rgba(var(--semi-blue-6), 1);
-  --semi-color-secondary-active: rgba(var(--semi-blue-7), 1);
-  --semi-color-secondary-disabled: rgba(var(--semi-blue-2), 1);
-  --semi-color-secondary-light-default: rgba(var(--semi-blue-0), 1);
-  --semi-color-secondary-light-hover: rgba(var(--semi-blue-1), 1);
-  --semi-color-secondary-light-active: rgba(var(--semi-blue-2), 1);
+  --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
+  --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
+  --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
+  --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
+  --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0), 1);
+  --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1), 1);
+  --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2), 1);
   --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
   --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
   --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
@@ -433,13 +433,13 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-color-primary-light-default: rgba(var(--semi-blue-5), .2);
   --semi-color-primary-light-hover: rgba(var(--semi-blue-5), .3);
   --semi-color-primary-light-active: rgba(var(--semi-blue-5), .4);
-  --semi-color-secondary: rgba(var(--semi-blue-5), 1);
-  --semi-color-secondary-hover: rgba(var(--semi-blue-6), 1);
-  --semi-color-secondary-active: rgba(var(--semi-blue-7), 1);
-  --semi-color-secondary-disabled: rgba(var(--semi-blue-2), 1);
-  --semi-color-secondary-light-default: rgba(var(--semi-blue-5), .2);
-  --semi-color-secondary-light-hover: rgba(var(--semi-blue-5), .3);
-  --semi-color-secondary-light-active: rgba(var(--semi-blue-5), .4);
+  --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
+  --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
+  --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
+  --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
+  --semi-color-secondary-light-default: rgba(var(--semi-light-blue-5), .2);
+  --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-5), .3);
+  --semi-color-secondary-light-active: rgba(var(--semi-light-blue-5), .4);
   --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
   --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
   --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
@@ -507,4 +507,26 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-border-radius-large: 12px;
   --semi-border-radius-circle: 50%;
   --semi-border-radius-full: 9999px;
+}
+
+.semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.semi-light-scrollbar::-webkit-scrollbar-track, .semi-light-scrollbar *::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0);
+}
+.semi-light-scrollbar::-webkit-scrollbar-corner, .semi-light-scrollbar *::-webkit-scrollbar-corner {
+  background-color: rgba(0, 0, 0, 0);
+}
+.semi-light-scrollbar::-webkit-scrollbar-thumb, .semi-light-scrollbar *::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  background: transparent;
+  transition: all 1s;
+}
+.semi-light-scrollbar:hover::-webkit-scrollbar-thumb, .semi-light-scrollbar *:hover::-webkit-scrollbar-thumb {
+  background: var(--semi-color-fill-2);
+}
+.semi-light-scrollbar::-webkit-scrollbar-thumb:hover, .semi-light-scrollbar *::-webkit-scrollbar-thumb:hover {
+  background: var(--semi-color-fill-1);
 }

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

@@ -15,7 +15,7 @@ export default class AvatarGroup extends PureComponent<AvatarGroupProps> {
         renderMore: PropTypes.Requireable<(...args: any[]) => any>;
         overlapFrom: PropTypes.Requireable<string>;
     };
-    getAllAvatars(): any[];
+    getAllAvatars(): (string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];
     getMergeAvatars(avatars: React.ReactNode[]): React.ReactNode[];
     renderMoreAvatar(restNumber: number, restAvatars: React.ReactNode[]): JSX.Element;
     render(): JSX.Element;