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

package/lib/cjs/typography/text.d.ts

@@ -32,7 +32,7 @@ export default class Text extends PureComponent<TextProps> {
         underline: PropTypes.Requireable<boolean>;
         link: PropTypes.Requireable<boolean | object>;
         strong: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "tertiary" | "danger" | "quaternary">;
+        type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
         size: PropTypes.Requireable<"small" | "normal">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;

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

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

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;
@@ -140,7 +140,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         style: PropTypes.Requireable<object>;
         timeout: PropTypes.Requireable<number>;
         transformFile: PropTypes.Requireable<(...args: any[]) => any>;
-        uploadTrigger: PropTypes.Requireable<"custom" | "auto">;
+        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         withCredentials: PropTypes.Requireable<boolean>;

package/lib/cjs/upload/index.js

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

package/lib/es/autoComplete/index.js

@@ -404,7 +404,7 @@ AutoComplete.defaultProps = {
   onChange: _noop,
   onSelectWithObject: false,
   onDropdownVisibleChange: _noop,
-  defaultActiveFirstOption: true,
+  defaultActiveFirstOption: false,
   dropdownMatchSelectWidth: true,
   loading: false,
   maxHeight: 300,

package/lib/es/avatar/index.js

@@ -156,8 +156,7 @@ export default class Avatar extends BaseComponent {
     }, className);
     let content = children;
     const hoverRender = hoverContent ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-hover"),
-      "x-semi-prop": "hoverContent"
+      className: "".concat(prefixCls, "-hover")
     }, hoverContent) : null;
 
     if (isImg) {
@@ -171,8 +170,7 @@ export default class Avatar extends BaseComponent {
       content = /*#__PURE__*/React.createElement("span", {
         className: "".concat(prefixCls, "-content")
       }, /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixCls, "-label"),
-        "x-semi-prop": "children"
+        className: "".concat(prefixCls, "-label")
       }, children));
     }
 

package/lib/es/backtop/index.js

@@ -98,8 +98,7 @@ 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),
-      "x-semi-prop": "children"
+      onClick: e => this.handleClick(e)
     }), backtopBtn) : null;
     return content;
   }

package/lib/es/badge/index.js

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

package/lib/es/banner/index.js

@@ -68,7 +68,6 @@ 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",
@@ -114,8 +113,7 @@ export default class Banner extends BaseComponent {
 
     if (iconType) {
       return /*#__PURE__*/React.createElement("div", {
-        className: iconCls,
-        "x-semi-prop": "icon"
+        className: iconCls
       }, iconType);
     }
 
@@ -157,15 +155,12 @@ export default class Banner extends BaseComponent {
     }, title ? /*#__PURE__*/React.createElement(Typography.Title, {
       heading: 5,
       className: "".concat(prefixCls, "-title"),
-      component: "div",
-      "x-semi-prop": "title"
+      component: "div"
     }, title) : null, description ? /*#__PURE__*/React.createElement(Typography.Paragraph, {
       className: "".concat(prefixCls, "-description"),
-      component: "div",
-      "x-semi-prop": "description"
+      component: "div"
     }, description) : null)), this.renderCloser()), children ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-extra"),
-      "x-semi-prop": "children"
+      className: "".concat(prefixCls, "-extra")
     }, children) : null) : null;
     return banner;
   }

package/lib/es/breadcrumb/index.js

@@ -47,15 +47,14 @@ 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"),
-        "x-semi-prop": "separator"
+        className: "".concat(clsPrefix, "-separator")
       }, this.props.separator)));
 
       _spliceInstanceProperty(template).call(template, 1, itemsLen - maxItemCount, spread);

package/lib/es/button/Button.d.ts

@@ -48,7 +48,7 @@ export default class Button extends PureComponent<ButtonProps> {
         prefixCls: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         size: PropTypes.Requireable<"default" | "small" | "large">;
-        type: PropTypes.Requireable<"warning" | "primary" | "secondary" | "tertiary" | "danger">;
+        type: PropTypes.Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/button/Button.js

@@ -1,9 +1,7 @@
-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 = {};
@@ -54,7 +52,7 @@ export default class Button extends PureComponent {
 
     const baseProps = _Object$assign(_Object$assign({
       disabled
-    }, _omit(attr, ['x-semi-children-alias'])), {
+    }, attr), {
       className: classNames(prefixCls, {
         [_concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, type)]: !disabled && type,
         ["".concat(prefixCls, "-disabled")]: disabled,
@@ -70,12 +68,6 @@ 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
@@ -83,10 +75,10 @@ export default class Button extends PureComponent {
         onClick: this.props.onClick,
         onMouseDown: this.props.onMouseDown,
         style: style
-      }), /*#__PURE__*/React.createElement("span", _Object$assign({
+      }), /*#__PURE__*/React.createElement("span", {
         className: "".concat(prefixCls, "-content"),
         onClick: e => disabled && e.stopPropagation()
-      }, xSemiProps), children))
+      }, children))
     );
   }
 

package/lib/es/button/index.d.ts

@@ -23,7 +23,7 @@ declare class Button extends React.PureComponent<ButtonProps> {
         onMouseLeave: import("prop-types").Requireable<(...args: any[]) => any>;
         disabled: import("prop-types").Requireable<boolean>;
         size: import("prop-types").Requireable<"default" | "small" | "large">;
-        type: import("prop-types").Requireable<"warning" | "primary" | "secondary" | "tertiary" | "danger">;
+        type: import("prop-types").Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: import("prop-types").Requireable<boolean>;
         onClick: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseDown: import("prop-types").Requireable<(...args: any[]) => any>;

package/lib/es/card/index.js

@@ -59,8 +59,7 @@ class Card extends PureComponent {
         React.createElement("div", {
           className: headerWrapperCls
         }, headerExtraContent && /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixcls, "-header-wrapper-extra"),
-          "x-semi-prop": "headerExtraContent"
+          className: "".concat(prefixcls, "-header-wrapper-extra")
         }, headerExtraContent), title && /*#__PURE__*/React.createElement("div", {
           className: titleCls
         }, _isString(title) ? /*#__PURE__*/React.createElement(Typography.Title, {
@@ -68,8 +67,7 @@ class Card extends PureComponent {
           ellipsis: {
             showTooltip: true,
             rows: 1
-          },
-          "x-semi-prop": "title"
+          }
         }, title) : title)));
       }
 
@@ -82,8 +80,7 @@ class Card extends PureComponent {
       } = this.props;
       const coverCls = cls("".concat(prefixcls, "-cover"));
       return cover && /*#__PURE__*/React.createElement("div", {
-        className: coverCls,
-        "x-semi-prop": "cover"
+        className: coverCls
       }, cover);
     };
 
@@ -113,8 +110,7 @@ class Card extends PureComponent {
         spacing: 12
       }, _mapInstanceProperty(actions).call(actions, (item, idx) => /*#__PURE__*/React.createElement("div", {
         key: idx,
-        className: actionsItemCls,
-        "x-semi-prop": "actions.".concat(idx)
+        className: actionsItemCls
       }, item)))));
     };
 
@@ -129,8 +125,7 @@ class Card extends PureComponent {
       });
       return footer && /*#__PURE__*/React.createElement("div", {
         style: footerStyle,
-        className: footerCls,
-        "x-semi-prop": "footer"
+        className: footerCls
       }, footer);
     };
   }

package/lib/es/carousel/CarouselArrow.js

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

package/lib/es/carousel/CarouselIndicator.d.ts

@@ -8,7 +8,7 @@ declare class CarouselIndicator extends React.PureComponent<CarouselIndicatorPro
         position: PropTypes.Requireable<"left" | "right" | "center">;
         size: PropTypes.Requireable<"small" | "medium">;
         style: PropTypes.Requireable<object>;
-        theme: PropTypes.Requireable<"dark" | "light" | "primary">;
+        theme: PropTypes.Requireable<"primary" | "dark" | "light">;
         total: PropTypes.Requireable<number>;
         onIndicatorChange: PropTypes.Requireable<(...args: any[]) => any>;
         type: PropTypes.Requireable<"line" | "dot" | "columnar">;

package/lib/es/carousel/index.d.ts

@@ -22,7 +22,7 @@ declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
         indicatorPosition: PropTypes.Requireable<"left" | "right" | "center">;
         indicatorSize: PropTypes.Requireable<"small" | "medium">;
         indicatorType: PropTypes.Requireable<"line" | "dot" | "columnar">;
-        theme: PropTypes.Requireable<"dark" | "light" | "primary">;
+        theme: PropTypes.Requireable<"primary" | "dark" | "light">;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         arrowType: PropTypes.Requireable<"hover" | "always">;
         showArrow: PropTypes.Requireable<boolean>;

package/lib/es/carousel/index.js

@@ -263,8 +263,7 @@ 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());
   }
 

package/lib/es/cascader/index.js

@@ -285,8 +285,7 @@ class Cascader extends BaseComponent {
         ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
       });
       return /*#__PURE__*/React.createElement("div", {
-        className: suffixWrapperCls,
-        "x-semi-prop": "suffix"
+        className: suffixWrapperCls
       }, suffix);
     };
 
@@ -306,8 +305,7 @@ class Cascader extends BaseComponent {
       });
       return /*#__PURE__*/React.createElement("div", {
         className: prefixWrapperCls,
-        id: insetLabelId,
-        "x-semi-prop": "prefix,insetLabel"
+        id: insetLabelId
       }, labelNode);
     };
 
@@ -397,7 +395,7 @@ class Cascader extends BaseComponent {
           className: clearCls,
           onClick: this.handleClear,
           onKeyPress: this.handleClearEnterPress,
-          role: "button",
+          role: 'button',
           tabIndex: 0
         }, /*#__PURE__*/React.createElement(IconClear, null));
       }
@@ -416,8 +414,7 @@ class Cascader extends BaseComponent {
       }
 
       return arrowIcon ? /*#__PURE__*/React.createElement("div", {
-        className: cls("".concat(prefixcls, "-arrow")),
-        "x-semi-prop": "arrowIcon"
+        className: cls("".concat(prefixcls, "-arrow"))
       }, arrowIcon) : null;
     };
 
@@ -492,12 +489,12 @@ class Cascader extends BaseComponent {
         "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/es/cascader/item.js

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

package/lib/es/checkbox/checkbox.d.ts

@@ -29,6 +29,7 @@ interface CheckboxState {
     checked: boolean;
     addonId?: string;
     extraId?: string;
+    focusVisible?: boolean;
 }
 declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     static contextType: React.Context<CheckboxContextType>;
@@ -65,8 +66,6 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     context: CheckboxContextType;
     get adapter(): CheckboxAdapter<CheckboxProps, CheckboxState>;
     foundation: CheckboxFoundation;
-    addonId: string;
-    extraId: string;
     constructor(props: CheckboxProps);
     componentDidUpdate(prevProps: CheckboxProps): void;
     isInGroup(): boolean;
@@ -74,6 +73,8 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     blur(): void;
     handleChange: React.MouseEventHandler<HTMLSpanElement>;
     handleEnterPress: (e: React.KeyboardEvent<HTMLSpanElement>) => void;
+    handleFocusVisible: (event: React.FocusEvent) => void;
+    handleBlur: (event: React.FocusEvent) => void;
     render(): JSX.Element;
 }
 export default Checkbox;

package/lib/es/checkbox/checkbox.js

@@ -24,11 +24,20 @@ class Checkbox extends BaseComponent {
 
     this.handleEnterPress = e => this.foundation.handleEnterPress(e);
 
+    this.handleFocusVisible = event => {
+      this.foundation.handleFocusVisible(event);
+    };
+
+    this.handleBlur = event => {
+      this.foundation.handleBlur();
+    };
+
     const checked = false;
     this.state = {
       checked: props.checked || props.defaultChecked || checked,
       addonId: props.addonId,
-      extraId: props.extraId
+      extraId: props.extraId,
+      focusVisible: false
     };
     this.checkboxEntity = null;
     this.foundation = new CheckboxFoundation(this.adapter);
@@ -66,6 +75,14 @@ class Checkbox extends BaseComponent {
             prefix: 'extra'
           })
         });
+      },
+      setFocusVisible: focusVisible => {
+        this.setState({
+          focusVisible
+        });
+      },
+      focusCheckboxEntity: () => {
+        this.focus();
       }
     });
   }
@@ -111,7 +128,8 @@ class Checkbox extends BaseComponent {
     const {
       checked,
       addonId,
-      extraId
+      extraId,
+      focusVisible
     } = this.state;
     const props = {
       checked,
@@ -142,6 +160,7 @@ class Checkbox extends BaseComponent {
     }
 
     const prefix = prefixCls || css.PREFIX;
+    const focusOuter = props.isCardType || props.isPureCardType;
     const wrapper = classnames(prefix, {
       ["".concat(prefix, "-disabled")]: props.disabled,
       ["".concat(prefix, "-indeterminate")]: indeterminate,
@@ -152,28 +171,24 @@ class Checkbox extends BaseComponent {
       ["".concat(prefix, "-cardType_unDisabled")]: !(props.disabled && props.isCardType),
       ["".concat(prefix, "-cardType_checked")]: props.isCardType && props.checked && !props.disabled,
       ["".concat(prefix, "-cardType_checked_disabled")]: props.isCardType && props.checked && props.disabled,
-      [className]: Boolean(className)
+      [className]: Boolean(className),
+      ["".concat(prefix, "-focus")]: focusVisible && focusOuter
     });
     const extraCls = classnames("".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.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
-      id: this.addonId,
-      className: "".concat(prefix, "-addon"),
-      "x-semi-prop": xSemiPropChildren
+      id: addonId,
+      className: "".concat(prefix, "-addon")
     }, children) : null, extra ? /*#__PURE__*/React.createElement("div", {
-      id: this.extraId,
-      className: extraCls,
-      "x-semi-prop": "extra"
+      id: extraId,
+      className: extraCls
     }, extra) : null);
 
     return (
       /*#__PURE__*/
       // label is better than span, however span is here which is to solve gitlab issue #364
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       React.createElement("span", {
         role: role,
         tabIndex: tabIndex,
@@ -186,12 +201,15 @@ class Checkbox extends BaseComponent {
         onKeyPress: this.handleEnterPress,
         "aria-labelledby": this.props['aria-labelledby']
       }, /*#__PURE__*/React.createElement(CheckboxInner, _Object$assign({}, this.props, props, {
-        addonId: children && this.addonId,
-        extraId: extra && this.extraId,
+        addonId: children && addonId,
+        extraId: extra && extraId,
         isPureCardType: props.isPureCardType,
         ref: ref => {
           this.checkboxEntity = ref;
-        }
+        },
+        focusInner: focusVisible && !focusOuter,
+        onInputFocus: this.handleFocusVisible,
+        onInputBlur: this.handleBlur
       })), props.isCardType ? /*#__PURE__*/React.createElement("div", null, renderContent()) : renderContent())
     );
   }

package/lib/es/checkbox/checkboxInner.d.ts

@@ -16,6 +16,9 @@ export interface CheckboxInnerProps {
     addonId?: string;
     extraId?: string;
     'aria-label'?: React.AriaAttributes['aria-label'];
+    focusInner?: boolean;
+    onInputFocus?: (e: any) => void;
+    onInputBlur?: (e: any) => void;
 }
 declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
     static contextType: React.Context<import("./context").CheckboxContextType>;
@@ -34,6 +37,9 @@ declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
         isPureCardType: PropTypes.Requireable<boolean>;
         addonId: PropTypes.Requireable<string>;
         extraId: PropTypes.Requireable<string>;
+        focusInner: PropTypes.Requireable<boolean>;
+        onInputFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onInputBlur: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         onChange: (...args: any[]) => void;

package/lib/es/checkbox/checkboxInner.js

@@ -27,7 +27,10 @@ class CheckboxInner extends PureComponent {
       name,
       isPureCardType,
       addonId,
-      extraId
+      extraId,
+      focusInner,
+      onInputFocus,
+      onInputBlur
     } = this.props;
     const prefix = prefixCls || css.PREFIX;
     const wrapper = classnames({
@@ -36,7 +39,9 @@ class CheckboxInner extends PureComponent {
       ["".concat(prefix, "-inner-pureCardType")]: isPureCardType
     }, css.WRAPPER);
     const inner = classnames({
-      ["".concat(prefix, "-inner-display")]: true
+      ["".concat(prefix, "-inner-display")]: true,
+      ["".concat(prefix, "-focus")]: focusInner,
+      ["".concat(prefix, "-focus-border")]: focusInner && !checked
     });
     const icon = checked ? /*#__PURE__*/React.createElement(IconCheckboxTick, null) : indeterminate ? /*#__PURE__*/React.createElement(IconCheckboxIndeterminate, null) : null;
     const inputProps = {
@@ -52,7 +57,9 @@ class CheckboxInner extends PureComponent {
       className: css.INPUT,
       onChange: _noop,
       checked: checked,
-      disabled: disabled
+      disabled: disabled,
+      onFocus: onInputFocus,
+      onBlur: onInputBlur
     };
     name && (inputProps['name'] = name);
     return /*#__PURE__*/React.createElement("span", {
@@ -83,7 +90,10 @@ CheckboxInner.propTypes = {
   value: PropTypes.any,
   isPureCardType: PropTypes.bool,
   addonId: PropTypes.string,
-  extraId: PropTypes.string
+  extraId: PropTypes.string,
+  focusInner: PropTypes.bool,
+  onInputFocus: PropTypes.func,
+  onInputBlur: PropTypes.func
 };
 CheckboxInner.defaultProps = {
   onChange: _noop

package/lib/es/collapsible/index.js

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