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

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;

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