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

package/divider/index.tsx

@@ -60,10 +60,14 @@ const Divider: React.FC<DividerProps> = props => {
 
     return (
         <div {...rest} className={dividerClassNames} style={{ ...overrideDefaultStyle, ...style }}>
-            {(children && layout === 'horizontal') ? (
-                typeof children === 'string' ? <span className={`${prefixCls}-divider_inner-text`}>
-                    {children}
-                </span> : children
+            {children && layout === 'horizontal' ? (
+                typeof children === 'string' ? (
+                    <span className={`${prefixCls}-divider_inner-text`} x-semi-prop="children">
+                        {children}
+                    </span>
+                ) : (
+                    children
+                )
             ) : null}
         </div>
     );

package/dropdown/index.tsx

@@ -144,7 +144,7 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         return (
             <DropdownContext.Provider value={contextValue}>
                 <div className={className} style={style}>
-                    <div className={`${prefixCls}-content`}>{content}</div>
+                    <div className={`${prefixCls}-content`} x-semi-prop="render">{content}</div>
                 </div>
             </DropdownContext.Provider>
         );

package/empty/index.tsx

@@ -109,17 +109,25 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
             };
         return (
             <div className={wrapperCls} style={style}>
-                <div className={`${prefixCls}-image`} style={imageStyle} >
+                <div className={`${prefixCls}-image`} style={imageStyle} x-semi-prop="image,darkModeImage">
                     {imageNode}
                 </div>
-                <div className={`${prefixCls}-content`} >
+                <div className={`${prefixCls}-content`}>
                     {title ? (
-                        <Typography.Title {...(titleProps as any)} className={`${prefixCls}-title`} >
+                        <Typography.Title {...(titleProps as any)} className={`${prefixCls}-title`} x-semi-prop="title">
                             {title}
                         </Typography.Title>
                     ) : null}
-                    {description ? <div className={`${prefixCls}-description`} >{description}</div> : null}
-                    {children ? <div className={`${prefixCls}-footer`}>{children}</div> : null}
+                    {description ? (
+                        <div className={`${prefixCls}-description`} x-semi-prop="description">
+                            {description}
+                        </div>
+                    ) : null}
+                    {children ? (
+                        <div className={`${prefixCls}-footer`} x-semi-prop="children">
+                            {children}
+                        </div>
+                    ) : null}
                 </div>
             </div>
         );

package/form/_story/FormSubmit/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Form, Tooltip, Button } from '@douyinfe/semi-ui';
+import { IconHelpCircle } from '@douyinfe/semi-icons';
+
+/**
+ * @description input, button may trigger submit of form
+ * 
+ * case 1: 当 form 中只有一个 input，在 input 上敲击 enter 会触发 form submit
+ * case 2: 当 form 中有 2 个 input，在任意一个 input 上敲击 enter 都不会触发 form submit
+ * case 3: 当 from 中有一个 input 和一个 button，在 input 上敲击 enter 会触发 form submit
+ * 
+ * @summary 如果不想触发 form submit，监听 input key down，如果 `e.key` 等于 `Enter` 则调用 e.preventDefault
+ * 
+ * @see https://github.com/DouyinFE/semi-design/issues/767#issuecomment-1098836675
+ */
+const App = () => {
+    const { Option } = Form.Select;
+
+    return (
+        <Form onSubmit={() => { console.log('submit');} }>
+            <Form.Select field="Role" label='角色' style={{ width:176 }}>
+                <Option value="admin">管理员</Option>
+                <Option value="user">普通用户</Option>
+                <Option value="guest">访客</Option>
+            </Form.Select>
+            <Form.Input field='UserName' label='用户名' style={{ width:80 }} onKeyDown={e => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                }
+            }} />
+            <Form.Input
+                field='Password'
+                label={{ 
+                    text: '密码',
+                    extra: <Tooltip content='详情'><IconHelpCircle style={{ color: '--semi-color-text-1' }}/></Tooltip> 
+                }}
+                style={{ width:176 }}
+            />
+            <Button>提交</Button>
+        </Form>
+    );
+};
+App.storyName = 'form submit';
+
+export default App;

package/form/_story/form.stories.js

@@ -91,6 +91,7 @@ import { SetValuesDemo, SetValuesWithArrayField } from './FormApi/setValuesDemo'
 import { SetValueUsingParentPath } from './FormApi/formApiDemo';
 import { FieldPathWithArrayDemo } from './Debug/bugDemo';
 import ChildDidMount from './Debug/childDidMount';
+export { default as FormSubmit } from './FormSubmit';
 
 export default {
   title: 'Form'
@@ -429,4 +430,4 @@ export const _ChildDidMount = () => <ChildDidMount />;
 
 _ChildDidMount.story = {
   name: 'child did mount',
-};
+};

package/form/hoc/withField.tsx

@@ -439,7 +439,7 @@ function withField<
                 [`${prefix}-field-extra-botttom`]: mergeExtraPos === 'bottom',
             });
 
-            const extraContent = extraText ? <div className={extraCls} id={extraTextId}>{extraText}</div> : null;
+            const extraContent = extraText ? <div className={extraCls} id={extraTextId} x-semi-prop="extraText">{extraText}</div> : null;
 
             let newProps: Record<string, any> = {
                 id: a11yId,

package/form/label.tsx

@@ -61,7 +61,7 @@ export default class Label extends PureComponent<LabelProps> {
         width ? labelStyle.width = width : null;
 
         const textContent = (
-            <div className={`${prefixCls}-field-label-text`}>
+            <div className={`${prefixCls}-field-label-text`} x-semi-prop="label">
                 {typeof text !== 'undefined' ? text : children}
             </div>
         );

package/grid/col.tsx

@@ -125,7 +125,7 @@ class Col extends React.Component<ColProps> {
         };
 
         return (
-            <div {...others} style={style} className={classes}>
+            <div {...others} style={style} className={classes} x-semi-prop="children">
                 {children}
             </div>
         );

package/grid/row.tsx

@@ -167,7 +167,7 @@ class Row extends React.Component<RowProps, RowState> {
                     gutters,
                 }}
             >
-                <div {...otherProps} className={classes} style={rowStyle}>
+                <div {...otherProps} className={classes} style={rowStyle} x-semi-prop="children">
                     {children}
                 </div>
             </RowContext.Provider>

package/iconButton/index.tsx

@@ -97,7 +97,8 @@ class IconButton extends PureComponent<IconButtonProps> {
             [`${prefixCls}-content-right`]: iconPosition === 'left',
         });
 
-        const children = originChildren != null ? <span className={btnTextCls}>{originChildren}</span> : null;
+        const xSemiProp = this.props['x-semi-children-alias'] || 'children';
+        const children = originChildren != null ? <span className={btnTextCls} x-semi-prop={xSemiProp}>{originChildren}</span> : null;
 
         if (iconPosition === 'left') {
             finalChildren = (

package/input/index.tsx

@@ -141,7 +141,7 @@ class Input extends BaseComponent<InputProps, InputState> {
         onKeyUp: noop,
         onKeyPress: noop,
         onEnterPress: noop,
-        validateStatus: 'default'
+        validateStatus: 'default',
     };
 
     inputRef!: React.RefObject<HTMLInputElement>;
@@ -195,7 +195,7 @@ class Input extends BaseComponent<InputProps, InputState> {
             notifyClear: (e: React.MouseEvent<HTMLDivElement>) => this.props.onClear(e),
             setPaddingLeft: (paddingLeft: string) => this.setState({ paddingLeft }),
             setMinLength: (minLength: number) => this.setState({ minLength }),
-            isEventTarget: (e: React.MouseEvent) => e && e.target === e.currentTarget
+            isEventTarget: (e: React.MouseEvent) => e && e.target === e.currentTarget,
         };
     }
 
@@ -255,7 +255,7 @@ class Input extends BaseComponent<InputProps, InputState> {
 
     handleModeEnterPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
         this.foundation.handleModeEnterPress(e);
-    }
+    };
 
     handleClickPrefixOrSuffix = (e: React.MouseEvent<HTMLInputElement>) => {
         this.foundation.handleClickPrefixOrSuffix(e);
@@ -273,7 +273,11 @@ class Input extends BaseComponent<InputProps, InputState> {
                 [`${prefixCls}-prepend-text`]: addonBefore && isString(addonBefore),
                 [`${prefixCls}-prepend-icon`]: isSemiIcon(addonBefore),
             });
-            return <div className={prefixWrapperCls}>{addonBefore}</div>;
+            return (
+                <div className={prefixWrapperCls} x-semi-prop="addonBefore">
+                    {addonBefore}
+                </div>
+            );
         }
         return null;
     }
@@ -286,7 +290,11 @@ class Input extends BaseComponent<InputProps, InputState> {
                 [`${prefixCls}-append-text`]: addonAfter && isString(addonAfter),
                 [`${prefixCls}-append-icon`]: isSemiIcon(addonAfter),
             });
-            return <div className={prefixWrapperCls}>{addonAfter}</div>;
+            return (
+                <div className={prefixWrapperCls} x-semi-prop="addonAfter">
+                    {addonAfter}
+                </div>
+            );
         }
         return null;
     }
@@ -352,7 +360,17 @@ class Input extends BaseComponent<InputProps, InputState> {
         });
 
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-        return <div className={prefixWrapperCls} onMouseDown={this.handlePreventMouseDown} onClick={this.handleClickPrefixOrSuffix} id={insetLabelId}>{labelNode}</div>;
+        return (
+            <div
+                className={prefixWrapperCls}
+                onMouseDown={this.handlePreventMouseDown}
+                onClick={this.handleClickPrefixOrSuffix}
+                id={insetLabelId}
+                x-semi-prop="prefix,insetLabel"
+            >
+                {labelNode}
+            </div>
+        );
     }
 
     showClearBtn() {
@@ -367,13 +385,22 @@ class Input extends BaseComponent<InputProps, InputState> {
             return null;
         }
         const suffixWrapperCls = cls({
-            [`${prefixCls }-suffix`]: true,
-            [`${prefixCls }-suffix-text`]: suffix && isString(suffix),
-            [`${prefixCls }-suffix-icon`]: isSemiIcon(suffix),
+            [`${prefixCls}-suffix`]: true,
+            [`${prefixCls}-suffix-text`]: suffix && isString(suffix),
+            [`${prefixCls}-suffix-icon`]: isSemiIcon(suffix),
             [`${prefixCls}-suffix-hidden`]: suffixAllowClear && Boolean(hideSuffix),
         });
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-        return <div className={suffixWrapperCls} onMouseDown={this.handlePreventMouseDown} onClick={this.handleClickPrefixOrSuffix}>{suffix}</div>;
+        return (
+            <div
+                className={suffixWrapperCls}
+                onMouseDown={this.handlePreventMouseDown}
+                onClick={this.handleClickPrefixOrSuffix}
+                x-semi-prop="suffix"
+            >
+                {suffix}
+            </div>
+        );
     }
 
     render() {
@@ -460,7 +487,7 @@ class Input extends BaseComponent<InputProps, InputState> {
             inputProps.minLength = stateMinLength;
         }
         if (validateStatus === 'error') {
-            inputProps['aria-invalid'] = "true";
+            inputProps['aria-invalid'] = 'true';
         }
         return (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions

package/lib/cjs/avatar/index.js

@@ -202,7 +202,8 @@ class Avatar extends _baseComponent.default {
     }, 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) {
@@ -216,7 +217,8 @@ class Avatar extends _baseComponent.default {
       content = /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(prefixCls, "-content")
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(prefixCls, "-label")
+        className: "".concat(prefixCls, "-label"),
+        "x-semi-prop": "children"
       }, children));
     }
 

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);
     };
 
@@ -452,7 +454,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 +473,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 +549,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);
     };

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

@@ -181,13 +181,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")
+      id: this.addonId,
+      className: "".concat(prefix, "-addon"),
+      "x-semi-prop": xSemiPropChildren
     }, children) : null, extra ? /*#__PURE__*/_react.default.createElement("div", {
-      id: extraId,
-      className: extraCls
+      id: this.extraId,
+      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.d.ts

@@ -26,7 +26,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"date" | "dateTime" | "month" | "dateRange" | "year" | "dateTimeRange">;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;

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.d.ts

@@ -41,7 +41,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-invalid': PropTypes.Requireable<boolean>;
         'aria-labelledby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"date" | "dateTime" | "month" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         density: PropTypes.Requireable<"default" | "compact">;
         defaultValue: PropTypes.Requireable<string | number | object>;