@douyinfe/semi-ui 2.11.0 → 2.12.0-alpha.0

package/lib/es/tag/index.js

@@ -1,3 +1,4 @@
+import _isString from "lodash/isString";
 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";
@@ -14,6 +15,8 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 /* eslint-disable no-unused-vars */
 
 /* eslint-disable max-len */
@@ -25,6 +28,7 @@ import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/tag/constants';
 import Avatar from '../avatar/index';
 import { IconClose } from '@douyinfe/semi-icons';
+import { handlePrevent } from '@douyinfe/semi-foundation/lib/es/utils/a11y';
 import '@douyinfe/semi-foundation/lib/es/tag/tag.css';
 export * from './interface';
 const prefixCls = cssClasses.PREFIX;
@@ -34,13 +38,14 @@ const tagType = strings.TAG_TYPE;
 const avatarShapeSet = strings.AVATAR_SHAPE;
 export default class Tag extends Component {
   constructor(props) {
-    var _context;
+    var _context, _context2;
 
     super(props);
     this.state = {
       visible: true
     };
     this.close = _bindInstanceProperty(_context = this.close).call(_context, this);
+    this.handleKeyDown = _bindInstanceProperty(_context2 = this.handleKeyDown).call(_context2, this);
   } // any other way to achieve this?
 
 
@@ -77,6 +82,33 @@ export default class Tag extends Component {
     this.setVisible(false);
   }
 
+  handleKeyDown(event) {
+    const {
+      closable,
+      onClick
+    } = this.props;
+
+    switch (event.key) {
+      case "Backspace":
+      case "Delete":
+        closable && this.close(event, this.props.children);
+        handlePrevent(event);
+        break;
+
+      case "Enter":
+        onClick(event);
+        handlePrevent(event);
+        break;
+
+      case 'Escape':
+        event.target.blur();
+        break;
+
+      default:
+        break;
+    }
+  }
+
   renderAvatar() {
     const {
       avatarShape,
@@ -90,7 +122,7 @@ export default class Tag extends Component {
   }
 
   render() {
-    var _context2, _context3, _context4, _context5;
+    var _context3, _context4, _context5, _context6, _context7;
 
     const _a = this.props,
           {
@@ -100,37 +132,51 @@ export default class Tag extends Component {
       closable,
       visible,
       onClose,
+      onClick,
       className,
       type,
       avatarSrc,
       avatarShape
     } = _a,
-          attr = __rest(_a, ["children", "size", "color", "closable", "visible", "onClose", "className", "type", "avatarSrc", "avatarShape"]);
+          attr = __rest(_a, ["children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "avatarSrc", "avatarShape"]);
 
     const {
       visible: isVisible
     } = this.state;
+    const clickable = onClick !== Tag.defaultProps.onClick || closable;
+    const a11yProps = {
+      role: 'button',
+      tabIndex: 0,
+      onKeyDown: this.handleKeyDown
+    };
 
     const baseProps = _Object$assign(_Object$assign({}, attr), {
+      onClick,
       className: classNames(prefixCls, {
         ["".concat(prefixCls, "-default")]: size === 'default',
         ["".concat(prefixCls, "-small")]: size === 'small',
         ["".concat(prefixCls, "-large")]: size === 'large',
-        [_concatInstanceProperty(_context2 = "".concat(prefixCls, "-")).call(_context2, type)]: type,
-        [_concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "".concat(prefixCls, "-")).call(_context4, color, "-")).call(_context3, type)]: color && type,
+        [_concatInstanceProperty(_context3 = "".concat(prefixCls, "-")).call(_context3, type)]: type,
+        [_concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = "".concat(prefixCls, "-")).call(_context5, color, "-")).call(_context4, type)]: color && type,
         ["".concat(prefixCls, "-closable")]: closable,
         ["".concat(prefixCls, "-invisible")]: !isVisible,
-        [_concatInstanceProperty(_context5 = "".concat(prefixCls, "-avatar-")).call(_context5, avatarShape)]: avatarSrc
+        [_concatInstanceProperty(_context6 = "".concat(prefixCls, "-avatar-")).call(_context6, avatarShape)]: avatarSrc
       }, className)
     });
 
-    const closeIcon = closable ? /*#__PURE__*/React.createElement("div", {
+    const wrapProps = clickable ? _Object$assign(_Object$assign({}, baseProps), a11yProps) : baseProps;
+    const closeIcon = closable ?
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React.createElement("div", {
       className: "".concat(prefixCls, "-close"),
       onClick: e => this.close(e, children)
     }, /*#__PURE__*/React.createElement(IconClose, {
       size: "small"
     })) : null;
-    return /*#__PURE__*/React.createElement("div", _Object$assign({}, baseProps), /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", _Object$assign({
+      "aria-label": this.props['aria-label'] || _isString(children) ? _concatInstanceProperty(_context7 = "".concat(closable ? 'Closable ' : '', "Tag: ")).call(_context7, children) : ''
+    }, wrapProps), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-content")
     }, avatarSrc ? this.renderAvatar() : null, children, closeIcon));
   }
@@ -160,5 +206,6 @@ Tag.propTypes = {
   style: PropTypes.object,
   className: PropTypes.string,
   avatarSrc: PropTypes.string,
-  avatarShape: PropTypes.oneOf(avatarShapeSet)
+  avatarShape: PropTypes.oneOf(avatarShapeSet),
+  'aria-label': PropTypes.string
 };

package/lib/es/tag/interface.d.ts

@@ -16,6 +16,7 @@ export interface TagProps {
     className?: string;
     avatarSrc?: string;
     avatarShape?: AvatarShape;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export interface TagGroupProps {
     style?: React.CSSProperties;

package/lib/es/tagInput/index.js

@@ -195,7 +195,8 @@ class TagInput extends BaseComponent {
       ["".concat(prefixCls, "-prefix-icon")]: /*#__PURE__*/React.isValidElement(prefix) && !(prefix && _isString(prefix))
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: prefixWrapperCls
+      className: prefixWrapperCls,
+      "x-semi-prop": "prefix"
     }, prefix);
   }
 
@@ -214,7 +215,8 @@ class TagInput extends BaseComponent {
       ["".concat(prefixCls, "-suffix-icon")]: /*#__PURE__*/React.isValidElement(suffix) && !(suffix && _isString(suffix))
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: suffixWrapperCls
+      className: suffixWrapperCls,
+      "x-semi-prop": "suffix"
     }, suffix);
   }
 
@@ -251,7 +253,7 @@ class TagInput extends BaseComponent {
       if (_isFunction(renderTagItem)) {
         item = renderTagItem(value, index);
       } else {
-        var _context2;
+        var _context2, _context3;
 
         item = /*#__PURE__*/React.createElement(Tag, {
           className: tagCls,
@@ -263,7 +265,8 @@ class TagInput extends BaseComponent {
           },
           closable: !disabled,
           key: _concatInstanceProperty(_context2 = "".concat(index)).call(_context2, value),
-          visible: true
+          visible: true,
+          "aria-label": _concatInstanceProperty(_context3 = "".concat(!disabled ? 'Closable ' : '', "Tag: ")).call(_context3, value)
         }, /*#__PURE__*/React.createElement(Paragraph, {
           className: typoCls,
           ellipsis: {

package/lib/es/timePicker/Combobox.js

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

package/lib/es/toast/toast.js

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

package/lib/es/transfer/index.js

@@ -237,7 +237,8 @@ class Transfer extends BaseComponent {
       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/es/tree/treeNode.js

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

package/lib/es/treeSelect/index.js

@@ -5,13 +5,13 @@ import _isEmpty from "lodash/isEmpty";
 import _isString from "lodash/isString";
 import _isEqual from "lodash/isEqual";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
@@ -59,7 +59,8 @@ class TreeSelect extends BaseComponent {
         ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
       });
       return /*#__PURE__*/React.createElement("div", {
-        className: suffixWrapperCls
+        className: suffixWrapperCls,
+        "x-semi-prop": "suffix"
       }, suffix);
     };
 
@@ -79,7 +80,8 @@ class TreeSelect extends BaseComponent {
       });
       return /*#__PURE__*/React.createElement("div", {
         className: prefixWrapperCls,
-        id: insetLabelId
+        id: insetLabelId,
+        "x-semi-prop": "prefix,insetLabel"
       }, labelNode);
     };
 
@@ -179,7 +181,7 @@ class TreeSelect extends BaseComponent {
 
       if (checkRelation === 'related') {
         renderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly);
-      } else if (checkRelation === 'unRelated') {
+      } else if (checkRelation === 'unRelated' && _Object$keys(keyEntities).length > 0) {
         renderKeys = [...realCheckedKeys];
       }
 
@@ -336,7 +338,8 @@ class TreeSelect extends BaseComponent {
       }
 
       return arrowIcon ? /*#__PURE__*/React.createElement("div", {
-        className: cls("".concat(prefixcls, "-arrow"))
+        className: cls("".concat(prefixcls, "-arrow")),
+        "x-semi-prop": "arrowIcon"
       }, arrowIcon) : null;
     };
 

package/lib/es/typography/base.js

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

package/lib/es/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
+        heading: PropTypes.Requireable<4 | 1 | 2 | 3 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/lib/es/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/es/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/es/upload/index.js

@@ -230,7 +230,9 @@ class Upload extends BaseComponent {
         });
       }
 
-      const addContent = /*#__PURE__*/React.createElement("div", _Object$assign({}, addContentProps), children);
+      const addContent = /*#__PURE__*/React.createElement("div", _Object$assign({}, addContentProps, {
+        "x-semi-prop": "children"
+      }), children);
 
       if (!showUploadList || !fileList.length) {
         if (showAddTriggerInList) {
@@ -363,15 +365,18 @@ class Upload extends BaseComponent {
         onDragEnter: this.onDragEnter,
         onClick: this.onClick
       }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-icon")
+        className: "".concat(dragAreaBaseCls, "-icon"),
+        "x-semi-prop": "dragIcon"
       }, dragIcon || /*#__PURE__*/React.createElement(IconUpload, {
         size: "extra-large"
       })), /*#__PURE__*/React.createElement("div", {
         className: "".concat(dragAreaBaseCls, "-text")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-main-text")
+        className: "".concat(dragAreaBaseCls, "-main-text"),
+        "x-semi-prop": "dragMainText"
       }, dragMainText || locale.mainText), /*#__PURE__*/React.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-sub-text")
+        className: "".concat(dragAreaBaseCls, "-sub-text"),
+        "x-semi-prop": "dragSubText"
       }, dragSubText), /*#__PURE__*/React.createElement("div", {
         className: "".concat(dragAreaBaseCls, "-tips")
       }, dragAreaStatus === strings.DRAG_AREA_LEGAL && /*#__PURE__*/React.createElement("span", {
@@ -557,9 +562,11 @@ class Upload extends BaseComponent {
       className: inputReplaceCls,
       ref: this.replaceInputRef
     }), this.renderAddContent(), prompt ? /*#__PURE__*/React.createElement("div", {
-      className: promptCls
+      className: promptCls,
+      "x-semi-prop": "prompt"
     }, prompt) : null, validateMessage ? /*#__PURE__*/React.createElement("div", {
-      className: validateMsgCls
+      className: validateMsgCls,
+      "x-semi-prop": "validateMessage"
     }, validateMessage) : null, this.renderFileList());
   }
 

package/list/index.tsx

@@ -71,7 +71,11 @@ class List<T = any> extends BaseComponent<ListProps<T>> {
     renderEmpty = () => {
         const { emptyContent } = this.props;
         if (emptyContent) {
-            return (<div className={`${cssClasses.PREFIX}-empty`}>{emptyContent}</div>);
+            return (
+                <div className={`${cssClasses.PREFIX}-empty`} x-semi-prop="emptyContent">
+                    {emptyContent}
+                </div>
+            );
         } else {
             return (
                 <LocaleConsumer componentName="List">
@@ -152,19 +156,27 @@ class List<T = any> extends BaseComponent<ListProps<T>> {
         }
         return (
             <div className={wrapperCls} style={style}>
-                {header ? <div className={`${cssClasses.PREFIX}-header`}>{header}</div> : null}
+                {header ? (
+                    <div className={`${cssClasses.PREFIX}-header`} x-semi-prop="header">
+                        {header}
+                    </div>
+                ) : null}
                 <ListContext.Provider
                     value={{
                         grid,
                         onRightClick,
-                        onClick
+                        onClick,
                     }}
                 >
                     <Spin spinning={loading} size="large">
                         {this.wrapChildren(childrenList, children)}
                     </Spin>
                 </ListContext.Provider>
-                {footer ? <div className={`${cssClasses.PREFIX}-footer`}>{footer}</div> : null}
+                {footer ? (
+                    <div className={`${cssClasses.PREFIX}-footer`} x-semi-prop="footer">
+                        {footer}
+                    </div>
+                ) : null}
                 {loadMore ? loadMore : null}
             </div>
         );

package/modal/ConfirmModal.tsx

@@ -81,7 +81,7 @@ const ConfirmModal = (props: ConfirmProps) => {
             visible={visible}
             {...rest}
         >
-            <div className={contentCls}>{content}</div>
+            <div className={contentCls} x-semi-prop="content">{content}</div>
         </Modal>
     );
 };

package/modal/Modal.tsx

@@ -291,6 +291,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                         loading={cancelLoading}
                         type="tertiary"
                         {...this.props.cancelButtonProps}
+                        x-semi-children-alias="cancelText"
                     >
                         {cancelText || locale.cancel}
                     </Button>
@@ -310,6 +311,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                             loading={confirmLoading}
                             onClick={this.handleOk}
                             {...this.props.okButtonProps}
+                            x-semi-children-alias="okText"
                         >
                             {okText || locale.confirm}
                         </Button>

package/modal/ModalContent.tsx

@@ -158,7 +158,7 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
         } = this.props;
         let closer;
         if (closable) {
-            const iconType = closeIcon || <IconClose/>;
+            const iconType = closeIcon || <IconClose x-semi-prop="closeIcon" />;
             closer = (
                 <Button
                     aria-label="close"
@@ -177,7 +177,7 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
 
     renderIcon = () => {
         const { icon } = this.props;
-        return icon ? <span className={`${cssClasses.DIALOG}-icon-wrapper`}>{icon}</span> : null;
+        return icon ? <span className={`${cssClasses.DIALOG}-icon-wrapper`} x-semi-prop="icon">{icon}</span> : null;
     };
 
     renderHeader = () => {
@@ -187,15 +187,20 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
         const { title } = this.props;
         const closer = this.renderCloseBtn();
         const icon = this.renderIcon();
-        return (title === null || title === undefined) ?
-            null :
-            (
-                <div className={`${cssClasses.DIALOG}-header`}>
-                    {icon}
-                    <Typography.Title heading={5} className={`${cssClasses.DIALOG}-title`} id={`${cssClasses.DIALOG}-title`}>{title}</Typography.Title>
-                    {closer}
-                </div>
-            );
+        return title === null || title === undefined ? null : (
+            <div className={`${cssClasses.DIALOG}-header`}>
+                {icon}
+                <Typography.Title
+                    heading={5}
+                    className={`${cssClasses.DIALOG}-title`}
+                    id={`${cssClasses.DIALOG}-title`}
+                    x-semi-prop="title"
+                >
+                    {title}
+                </Typography.Title>
+                {closer}
+            </div>
+        );
     };
 
     renderBody = () => {
@@ -210,16 +215,19 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
         const closer = this.renderCloseBtn();
         const icon = this.renderIcon();
         const hasHeader = title !== null && title !== undefined || 'header' in this.props;
-        return hasHeader ?
-            <div className={bodyCls} id={`${cssClasses.DIALOG}-body`} style={bodyStyle}>{children}</div> :
-            (
-                <div className={`${cssClasses.DIALOG}-body-wrapper`}>
-                    {icon}
-                    <div className={bodyCls} style={bodyStyle}>{children}</div>
-                    {closer}
+        return hasHeader ? (
+            <div className={bodyCls} id={`${cssClasses.DIALOG}-body`} style={bodyStyle} x-semi-prop="children">
+                {children}
+            </div>
+        ) : (
+            <div className={`${cssClasses.DIALOG}-body-wrapper`}>
+                {icon}
+                <div className={bodyCls} style={bodyStyle} x-semi-prop="children">
+                    {children}
                 </div>
-            );
-
+                {closer}
+            </div>
+        );
     };
 
     getDialogElement = () => {
@@ -242,7 +250,11 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
         }
         const body = this.renderBody();
         const header = this.renderHeader();
-        const footer = props.footer ? <div className={`${cssClasses.DIALOG}-footer`}>{props.footer}</div> : null;
+        const footer = props.footer ? (
+            <div className={`${cssClasses.DIALOG}-footer`} x-semi-prop="footer">
+                {props.footer}
+            </div>
+        ) : null;
         const dialogElement = (
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             <div

package/navigation/Item.tsx

@@ -29,7 +29,7 @@ export interface NavItemProps extends ItemProps, BaseProps {
     itemKey?: React.ReactText;
     level?: number;
     link?: string;
-    linkOptions?: React.HTMLAttributes<HTMLLinkElement>;
+    linkOptions?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
     text?: React.ReactNode;
     tooltipHideDelay?: number;
     tooltipShowDelay?: number;

package/notification/notice.tsx

@@ -106,7 +106,7 @@ class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
         }
         if (iconType) {
             return (
-                <div className={iconCls}>
+                <div className={iconCls} x-semi-prop="icon">
                     {isSemiIcon(iconType) ? React.cloneElement(iconType, { size: iconType.props.size || 'large' }) : iconType}
                 </div>
             );
@@ -170,14 +170,26 @@ class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
                 <div>{this.renderTypeIcon()}</div>
                 <div className={`${prefixCls}-inner`}>
                     <div className={`${prefixCls}-content-wrapper`}>
-                        {title ? <div id={titleID} className={`${prefixCls}-title`}>{title}</div> : ''}
-                        {content ? <div className={`${prefixCls}-content`}>{content}</div> : ''}
+                        {title ? (
+                            <div id={titleID} className={`${prefixCls}-title`} x-semi-prop="title">
+                                {title}
+                            </div>
+                        ) : (
+                            ''
+                        )}
+                        {content ? (
+                            <div className={`${prefixCls}-content`} x-semi-prop="content">
+                                {content}
+                            </div>
+                        ) : (
+                            ''
+                        )}
                     </div>
                     {showClose && (
                         <Button
                             className={`${prefixCls}-icon-close`}
                             type="tertiary"
-                            icon={<IconClose/>}
+                            icon={<IconClose />}
                             theme="borderless"
                             size="small"
                             onClick={this.close}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.11.0",
+    "version": "2.12.0-alpha.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.11.0",
-        "@douyinfe/semi-animation-react": "2.11.0",
-        "@douyinfe/semi-foundation": "2.11.0",
-        "@douyinfe/semi-icons": "2.11.0",
-        "@douyinfe/semi-illustrations": "2.11.0",
-        "@douyinfe/semi-theme-default": "2.11.0",
+        "@douyinfe/semi-animation": "^2.12.0-alpha.0",
+        "@douyinfe/semi-animation-react": "^2.12.0-alpha.0",
+        "@douyinfe/semi-foundation": "^2.12.0-alpha.0",
+        "@douyinfe/semi-icons": "^2.12.0-alpha.0",
+        "@douyinfe/semi-illustrations": "^2.12.0-alpha.0",
+        "@douyinfe/semi-theme-default": "^2.12.0-alpha.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "f7a5cae3d9190faff4a08c5a4da23927a1ab86e5",
+    "gitHead": "2a4f34115b9dd03fc3c40b1edcc421bf64a3024b",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.11.0",
+        "@douyinfe/semi-scss-compile": "^2.12.0-alpha.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",