@douyinfe/semi-ui 2.19.1-alpha.1 → 2.19.2-alpha.0

package/lib/cjs/_base/base.css

@@ -14,6 +14,7 @@ body {
   --semi-transition_function-easeIn:ease-in;
   --semi-transition_function-easeOut:ease-out;
   --semi-transition_function-easeInIOut:ease-in-out;
+  --semi-transition_delay-none: 0ms;
   --semi-transition_delay-slowest:0ms;
   --semi-transition_delay-slower:0ms;
   --semi-transition_delay-slow:0ms;

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

@@ -6,6 +6,7 @@ import BaseComponent from '../_base/baseComponent';
 import Link from './link';
 import '@douyinfe/semi-foundation/lib/cjs/anchor/anchor.css';
 import { ArrayElement } from '../_base/base';
+import { ContextValue } from '../configProvider/context';
 export { LinkProps } from './link';
 export interface AnchorProps {
     autoCollapse?: boolean;
@@ -35,6 +36,7 @@ export interface AnchorState {
     slideBarTop: string;
 }
 declare class Anchor extends BaseComponent<AnchorProps, AnchorState> {
+    static contextType: React.Context<ContextValue>;
     static Link: typeof Link;
     static PropTypes: {
         size: PropTypes.Requireable<"default" | "small">;
@@ -77,6 +79,7 @@ declare class Anchor extends BaseComponent<AnchorProps, AnchorState> {
     childMap: Record<string, Set<string>>;
     handler: () => void;
     clickHandler: () => void;
+    context: ContextValue;
     constructor(props: AnchorProps);
     get adapter(): AnchorAdapter<AnchorProps, AnchorState>;
     addLink: (link: string) => void;
@@ -88,6 +91,7 @@ declare class Anchor extends BaseComponent<AnchorProps, AnchorState> {
     setScrollHeight: () => void;
     updateScrollHeight: (prevState: AnchorState, state: AnchorState) => void;
     updateChildMap: (prevState: AnchorState, state: AnchorState) => void;
+    renderChildren: () => any;
     componentDidMount(): void;
     componentDidUpdate(prevProps: AnchorProps, prevState: AnchorState): void;
     componentWillUnmount(): void;

package/lib/cjs/anchor/index.js

@@ -31,13 +31,18 @@ require("@douyinfe/semi-foundation/lib/cjs/anchor/anchor.css");
 
 var _uuid = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/uuid"));
 
+var _context = _interopRequireDefault(require("../configProvider/context"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const prefixCls = _constants.cssClasses.PREFIX;
 
 class Anchor extends _baseComponent.default {
   constructor(props) {
+    var _this;
+
     super(props);
+    _this = this;
 
     this.addLink = link => {
       this.foundation.addLink(link);
@@ -76,6 +81,35 @@ class Anchor extends _baseComponent.default {
       this.foundation.updateChildMap(prevState, state);
     };
 
+    this.renderChildren = () => {
+      const loop = function (children) {
+        let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+        return _react.default.Children.map(children, child => {
+          if ( /*#__PURE__*/_react.default.isValidElement(child)) {
+            const childProps = {
+              direction: _this.context.direction,
+              level,
+              children: []
+            };
+            const {
+              children
+            } = child.props;
+            const hasChildren = children && _react.default.Children.count(children) > 0;
+
+            if (hasChildren) {
+              childProps.children = loop(children, level + 1);
+            }
+
+            return /*#__PURE__*/_react.default.cloneElement(child, childProps);
+          }
+
+          return null;
+        });
+      };
+
+      return loop(this.props.children);
+    };
+
     this.state = {
       activeLink: '',
       links: [],
@@ -278,11 +312,12 @@ class Anchor extends _baseComponent.default {
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: anchorWrapper,
       role: "list"
-    }, children)));
+    }, this.renderChildren())));
   }
 
 }
 
+Anchor.contextType = _context.default;
 Anchor.Link = _link.default;
 Anchor.PropTypes = {
   size: _propTypes.default.oneOf(_constants.strings.SIZE),

package/lib/cjs/anchor/link.d.ts

@@ -10,6 +10,8 @@ export interface LinkProps {
     children?: ReactNode;
     style?: React.CSSProperties;
     disabled?: boolean;
+    level?: number;
+    direction?: 'ltr' | 'rtl';
 }
 export default class Link extends BaseComponent<LinkProps, {}> {
     static propTypes: {

package/lib/cjs/anchor/link.js

@@ -148,7 +148,9 @@ class Link extends _baseComponent.default {
       className,
       style,
       disabled = false,
-      title
+      title,
+      level,
+      direction
     } = this.props;
     const {
       activeLink,
@@ -160,8 +162,12 @@ class Link extends _baseComponent.default {
       ["".concat(prefixCls, "-link-title-active")]: active,
       ["".concat(prefixCls, "-link-title-disabled")]: disabled
     });
+    const paddingAttributeKey = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
     const ariaProps = {
-      'aria-disabled': disabled
+      'aria-disabled': disabled,
+      style: {
+        [paddingAttributeKey]: 8 * level
+      }
     };
 
     if (active) {

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

@@ -20,6 +20,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onMouseEnter: typeof noop;
         onMouseLeave: typeof noop;
     };
+    static elementType: string;
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         color: PropTypes.Requireable<string>;

package/lib/cjs/avatar/index.js

@@ -316,4 +316,5 @@ Avatar.propTypes = {
   onClick: _propTypes.default.func,
   onMouseEnter: _propTypes.default.func,
   onMouseLeave: _propTypes.default.func
-};
+};
+Avatar.elementType = 'Avatar';

package/lib/cjs/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" | "tertiary" | "secondary" | "danger">;
+        type: PropTypes.Requireable<"warning" | "primary" | "secondary" | "tertiary" | "danger">;
         block: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/button/buttonGroup.d.ts

@@ -25,5 +25,6 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
     static defaultProps: {
         size: string;
     };
+    getInnerWithLine(inner: any): any;
     render(): JSX.Element;
 }

package/lib/cjs/button/buttonGroup.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
@@ -17,12 +19,12 @@ var _constants = require("@douyinfe/semi-foundation/lib/cjs/button/constants");
 
 require("@douyinfe/semi-foundation/lib/cjs/button/button.css");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -38,6 +40,41 @@ const prefixCls = _constants.cssClasses.PREFIX;
 const btnSizes = _constants.strings.sizes;
 
 class ButtonGroup extends _baseComponent.default {
+  getInnerWithLine(inner) {
+    const innerWithLine = [];
+    let lineCls = "".concat(prefixCls, "-group-line");
+
+    if (inner.length > 1) {
+      inner.slice(0, -1).forEach(item => {
+        const isButtonType = (0, _get2.default)(item, 'type.elementType') === 'Button';
+        const buttonProps = (0, _get2.default)(item, 'props');
+
+        if (buttonProps) {
+          const {
+            type,
+            theme,
+            disabled
+          } = buttonProps;
+          lineCls = (0, _classnames.default)("".concat(prefixCls, "-group-line"), "".concat(prefixCls, "-group-line-").concat(theme !== null && theme !== void 0 ? theme : 'light'), "".concat(prefixCls, "-group-line-").concat(type !== null && type !== void 0 ? type : 'primary'), {
+            ["".concat(prefixCls, "-group-line-disabled")]: disabled
+          });
+        }
+
+        if (isButtonType) {
+          innerWithLine.push(item, /*#__PURE__*/_react.default.createElement("span", {
+            className: lineCls
+          }));
+        } else {
+          innerWithLine.push(item);
+        }
+      });
+      innerWithLine.push(inner.slice(-1));
+      return innerWithLine;
+    } else {
+      return inner;
+    }
+  }
+
   render() {
     const _a = this.props,
           {
@@ -51,6 +88,7 @@ class ButtonGroup extends _baseComponent.default {
           rest = __rest(_a, ["children", "disabled", "size", "type", "className", 'aria-label']);
 
     let inner;
+    let innerWithLine = [];
     const cls = (0, _classnames.default)("".concat(prefixCls, "-group"), className);
 
     if (children) {
@@ -61,13 +99,14 @@ class ButtonGroup extends _baseComponent.default {
       }, itm.props), rest), {
         key: index
       })) : itm);
+      innerWithLine = this.getInnerWithLine(inner);
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
       className: cls,
       role: "group",
       "aria-label": ariaLabel
-    }, inner);
+    }, innerWithLine);
   }
 
 }

package/lib/cjs/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" | "tertiary" | "secondary" | "danger">;
+        type: import("prop-types").Requireable<"warning" | "primary" | "secondary" | "tertiary" | "danger">;
         block: import("prop-types").Requireable<boolean>;
         onClick: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseDown: import("prop-types").Requireable<(...args: any[]) => any>;
@@ -31,6 +31,7 @@ declare class Button extends React.PureComponent<ButtonProps> {
         htmlType: import("prop-types").Requireable<"button" | "reset" | "submit">;
         'aria-label': import("prop-types").Requireable<string>;
     };
+    static elementType: string;
     constructor(props?: {});
     render(): JSX.Element;
 }

package/lib/cjs/button/index.js

@@ -35,5 +35,6 @@ class Button extends _react.default.PureComponent {
 }
 
 Button.propTypes = Object.assign(Object.assign({}, _Button.default.propTypes), _iconButton.default.propTypes);
+Button.elementType = 'Button';
 var _default = Button;
 exports.default = _default;

package/lib/cjs/checkbox/checkbox.d.ts

@@ -67,6 +67,7 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onMouseLeave: (...args: any[]) => void;
         type: string;
     };
+    static elementType: string;
     checkboxEntity: CheckboxInner;
     context: CheckboxContextType;
     get adapter(): CheckboxAdapter<CheckboxProps, CheckboxState>;

package/lib/cjs/checkbox/checkbox.js

@@ -202,15 +202,23 @@ class Checkbox extends _baseComponent.default {
     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"),
-      "x-semi-prop": xSemiPropChildren
-    }, children) : null, extra ? /*#__PURE__*/_react.default.createElement("div", {
-      id: extraId,
-      className: extraCls,
-      "x-semi-prop": "extra"
-    }, extra) : null);
+    const renderContent = () => {
+      if (!children && !extra) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefix, "-content")
+      }, children ? /*#__PURE__*/_react.default.createElement("span", {
+        id: addonId,
+        className: "".concat(prefix, "-addon"),
+        "x-semi-prop": xSemiPropChildren
+      }, children) : null, extra ? /*#__PURE__*/_react.default.createElement("div", {
+        id: extraId,
+        className: extraCls,
+        "x-semi-prop": "extra"
+      }, extra) : null);
+    };
 
     return (
       /*#__PURE__*/
@@ -236,7 +244,7 @@ class Checkbox extends _baseComponent.default {
         focusInner: focusVisible && !focusOuter,
         onInputFocus: this.handleFocusVisible,
         onInputBlur: this.handleBlur
-      })), props.isCardType ? /*#__PURE__*/_react.default.createElement("div", null, renderContent()) : renderContent())
+      })), renderContent())
     );
   }
 
@@ -280,5 +288,6 @@ Checkbox.defaultProps = {
   onMouseLeave: _noop2.default,
   type: 'default'
 };
+Checkbox.elementType = 'Checkbox';
 var _default = Checkbox;
 exports.default = _default;

package/lib/cjs/checkbox/checkboxGroup.js

@@ -86,7 +86,8 @@ class CheckboxGroup extends _baseComponent.default {
       [prefix]: true,
       ["".concat(prefix, "-wrapper")]: true,
       ["".concat(prefix, "-").concat(direction)]: direction,
-      ["".concat(prefix, "-").concat(direction, "-cardType")]: direction && isCardType
+      ["".concat(prefix, "-").concat(direction, "-cardType")]: direction && isCardType,
+      ["".concat(prefix, "-").concat(direction, "-pureCardType")]: direction && isPureCardType
     }, className);
     const realValue = this.state.value.slice();
     let inner;

package/lib/cjs/dropdown/index.js

@@ -234,7 +234,11 @@ class Dropdown extends _baseComponent.default {
       }),
       'aria-haspopup': true,
       'aria-expanded': popVisible,
-      onKeyDown: e => this.foundation.handleKeyDown(e)
+      onKeyDown: e => {
+        this.foundation.handleKeyDown(e);
+        const childrenKeyDown = (0, _get2.default)(children, 'props.onKeyDown');
+        childrenKeyDown && childrenKeyDown();
+      }
     }) : children);
   }
 

package/lib/cjs/form/baseForm.d.ts

@@ -126,7 +126,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         onListScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
         children?: React.ReactNode;
         preventScroll?: boolean;
-    } & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
     static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
     static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
     static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;

package/lib/cjs/form/field.d.ts

@@ -74,7 +74,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onListScroll?: (e: import("react").UIEvent<HTMLDivElement, UIEvent>) => void;
     children?: import("react").ReactNode;
     preventScroll?: boolean;
-} & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;

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

@@ -27,13 +27,15 @@ export interface PopconfirmProps extends PopoverProps {
     zIndex?: number;
     trigger?: Trigger;
     position?: Position;
-    onCancel?: (e: React.MouseEvent) => void;
-    onConfirm?: (e: React.MouseEvent) => void;
+    onCancel?: (e: React.MouseEvent) => Promise<any> | void;
+    onConfirm?: (e: React.MouseEvent) => Promise<any> | void;
     onVisibleChange?: (visible: boolean) => void;
     onClickOutSide?: (e: React.MouseEvent) => void;
 }
 export interface PopconfirmState {
     visible: boolean;
+    cancelLoading: boolean;
+    confirmLoading: boolean;
 }
 export default class Popconfirm extends BaseComponent<PopconfirmProps, PopconfirmState> {
     static contextType: React.Context<ContextValue>;

package/lib/cjs/popconfirm/index.js

@@ -63,6 +63,8 @@ class Popconfirm extends _baseComponent.default {
     this.stopImmediatePropagation = e => e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation();
 
     this.state = {
+      cancelLoading: false,
+      confirmLoading: false,
       visible: props.defaultVisible || false
     };
     this.foundation = new _popconfirmFoundation.default(this.adapter);
@@ -86,6 +88,12 @@ class Popconfirm extends _baseComponent.default {
       setVisible: visible => this.setState({
         visible
       }),
+      updateConfirmLoading: loading => this.setState({
+        confirmLoading: loading
+      }),
+      updateCancelLoading: loading => this.setState({
+        cancelLoading: loading
+      }),
       notifyConfirm: e => this.props.onConfirm(e),
       notifyCancel: e => this.props.onCancel(e),
       notifyVisibleChange: visible => this.props.onVisibleChange(visible),
@@ -102,15 +110,21 @@ class Popconfirm extends _baseComponent.default {
       cancelButtonProps,
       okButtonProps
     } = this.props;
+    const {
+      cancelLoading,
+      confirmLoading
+    } = this.state;
     return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Popconfirm"
     }, (locale, localeCode) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({
       type: cancelType,
-      onClick: this.handleCancel
+      onClick: this.handleCancel,
+      loading: cancelLoading
     }, cancelButtonProps), cancelText || (0, _get2.default)(locale, 'cancel')), /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({
       type: okType,
       theme: "solid",
-      onClick: this.handleConfirm
+      onClick: this.handleConfirm,
+      loading: confirmLoading
     }, okButtonProps), okText || (0, _get2.default)(locale, 'confirm'))));
   }
 
@@ -132,35 +146,39 @@ class Popconfirm extends _baseComponent.default {
     });
     const showTitle = title !== null && typeof title !== 'undefined';
     const showContent = !(content === null || typeof content === 'undefined');
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: popCardCls,
-      onClick: this.stopImmediatePropagation,
-      style: style
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-inner")
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-header")
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "".concat(prefixCls, "-header-icon"),
-      "x-semi-prop": "icon"
-    }, /*#__PURE__*/_react.default.isValidElement(icon) ? icon : null), /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-header-body")
-    }, showTitle ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-header-title"),
-      "x-semi-prop": "title"
-    }, title) : null), /*#__PURE__*/_react.default.createElement(_button.default, {
-      className: "".concat(prefixCls, "-btn-close"),
-      icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
-      size: "small",
-      theme: 'borderless',
-      type: cancelType,
-      onClick: this.handleCancel
-    })), showContent ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-body"),
-      "x-semi-prop": "content"
-    }, content) : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-footer")
-    }, this.renderControls())));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      _react.default.createElement("div", {
+        className: popCardCls,
+        onClick: this.stopImmediatePropagation,
+        style: style
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-inner")
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-header")
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        className: "".concat(prefixCls, "-header-icon"),
+        "x-semi-prop": "icon"
+      }, /*#__PURE__*/_react.default.isValidElement(icon) ? icon : null), /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-header-body")
+      }, showTitle ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-header-title"),
+        "x-semi-prop": "title"
+      }, title) : null), /*#__PURE__*/_react.default.createElement(_button.default, {
+        className: "".concat(prefixCls, "-btn-close"),
+        icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
+        size: "small",
+        theme: 'borderless',
+        type: cancelType,
+        onClick: this.handleCancel
+      })), showContent ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-body"),
+        "x-semi-prop": "content"
+      }, content) : null, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-footer")
+      }, this.renderControls())))
+    );
   }
 
   render() {

package/lib/cjs/radio/radio.d.ts

@@ -66,6 +66,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: Partial<RadioProps>;
+    static elementType: string;
     radioEntity: RadioInner;
     context: RadioContextValue;
     foundation: RadioFoundation;

package/lib/cjs/radio/radio.js

@@ -219,16 +219,26 @@ class Radio extends _baseComponent.default {
       ["".concat(prefix, "-focus")]: focusVisible && isButtonRadio
     }, addonClassName);
 
-    const renderContent = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children ? /*#__PURE__*/_react.default.createElement("span", {
-      className: addonCls,
-      style: addonStyle,
-      id: addonId,
-      "x-semi-prop": "children"
-    }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefix, "-extra"),
-      id: extraId,
-      "x-semi-prop": "extra"
-    }, extra) : null);
+    const renderContent = () => {
+      if (!children && !extra) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(["".concat(prefix, "-content"), {
+          ["".concat(prefix, "-isCardRadioGroup_content")]: isCardRadioGroup
+        }])
+      }, children ? /*#__PURE__*/_react.default.createElement("span", {
+        className: addonCls,
+        style: addonStyle,
+        id: addonId,
+        "x-semi-prop": "children"
+      }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefix, "-extra"),
+        id: extraId,
+        "x-semi-prop": "extra"
+      }, extra) : null);
+    };
 
     return /*#__PURE__*/_react.default.createElement("label", {
       style: style,
@@ -249,9 +259,7 @@ class Radio extends _baseComponent.default {
       focusInner: focusVisible && !focusOuter,
       onInputFocus: this.handleFocusVisible,
       onInputBlur: this.handleBlur
-    })), isCardRadioGroup ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefix, "-isCardRadioGroup_content")
-    }, renderContent()) : renderContent());
+    })), renderContent());
   }
 
 }
@@ -288,5 +296,6 @@ Radio.defaultProps = {
   mode: '',
   type: 'default'
 };
+Radio.elementType = 'Radio';
 var _default = Radio;
 exports.default = _default;

package/lib/cjs/radio/radioGroup.js

@@ -36,7 +36,7 @@ class RadioGroup extends _baseComponent.default {
     this.getFormatName = () => this.props.name || 'default';
 
     this.state = {
-      value: undefined
+      value: props.value || props.defaultValue
     };
     this.foundation = new _radioGroupFoundation.default(this.adapter);
   }