@douyinfe/semi-ui 2.10.2 → 2.11.0

package/lib/es/modal/Modal.d.ts

@@ -10,7 +10,7 @@ export declare type ConfirmType = 'leftTop' | 'leftBottom' | 'rightTop' | 'right
 export declare type Directions = 'ltr' | 'rtl';
 export interface ModalReactProps extends ModalProps {
     cancelButtonProps?: ButtonProps;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     okButtonProps?: ButtonProps;
     bodyStyle?: CSSProperties;
     maskStyle?: CSSProperties;
@@ -102,19 +102,19 @@ declare class Modal extends BaseComponent<ModalReactProps, ModalState> {
     static getScrollbarWidth(): number;
     static info: (props: ModalReactProps) => {
         destroy: () => void;
-        update: (newConfig: import("./confirm").ConfirmProps) => void;
+        update: (newConfig: ModalReactProps) => void;
     };
     static success: (props: ModalReactProps) => {
         destroy: () => void;
-        update: (newConfig: import("./confirm").ConfirmProps) => void;
+        update: (newConfig: ModalReactProps) => void;
     };
     static error: (props: ModalReactProps) => {
         destroy: () => void;
-        update: (newConfig: import("./confirm").ConfirmProps) => void;
+        update: (newConfig: ModalReactProps) => void;
     };
     static warning: (props: ModalReactProps) => {
         destroy: () => void;
-        update: (newConfig: import("./confirm").ConfirmProps) => void;
+        update: (newConfig: ModalReactProps) => void;
     };
     static confirm: (props: ModalReactProps) => {
         destroy: () => void;

package/lib/es/modal/ModalContent.d.ts

@@ -4,7 +4,7 @@ import { ContextValue } from '../configProvider/context';
 import BaseComponent from '../_base/baseComponent';
 import ModalContentFoundation, { ModalContentAdapter, ModalContentProps, ModalContentState } from '@douyinfe/semi-foundation/lib/es/modal/modalContentFoundation';
 export interface ModalContentReactProps extends ModalContentProps {
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 export default class ModalContent extends BaseComponent<ModalContentReactProps, ModalContentState> {
     static contextType: React.Context<ContextValue>;

package/lib/es/modal/confirm.d.ts

@@ -4,9 +4,11 @@ import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
 export interface ConfirmProps extends ModalReactProps {
     type: 'success' | 'info' | 'warning' | 'error' | 'confirm';
 }
-export default function confirm(props: ConfirmProps): {
+export default function confirm<T>(props: ConfirmProps): {
     destroy: () => void;
-    update: (newConfig: ConfirmProps) => void;
+    update: (newConfig: T extends {
+        type: Exclude<ConfirmProps['type'], 'confirm'>;
+    } ? ModalReactProps : ConfirmProps) => void;
 };
 export declare function withInfo(props: ModalReactProps): {
     cancelButtonProps?: import("../button").BaseButtonProps;

package/lib/es/modal/confirm.js

@@ -6,7 +6,7 @@ import ReactDOM from 'react-dom';
 import { destroyFns } from './Modal';
 import ConfirmModal from './ConfirmModal';
 import '@douyinfe/semi-foundation/lib/es/modal/modal.css';
-import { IconAlertTriangle, IconInfoCircle, IconTickCircle, IconHelpCircle, IconAlertCircle } from '@douyinfe/semi-icons';
+import { IconAlertCircle, IconAlertTriangle, IconHelpCircle, IconInfoCircle, IconTickCircle } from '@douyinfe/semi-icons';
 export default function confirm(props) {
   // create a dom in adapter?
   const div = document.createElement('div');

package/lib/es/modal/useModal/index.d.ts

@@ -1,25 +1,18 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { ConfirmProps } from '../confirm';
 import { ModalReactProps } from '../Modal';
-export default function useModal(): (JSX.Element | {
-    info: (config: ModalReactProps) => {
-        destroy: () => void;
-        update: (newConfig: ConfirmProps) => void;
-    };
-    success: (config: ModalReactProps) => {
-        destroy: () => void;
-        update: (newConfig: ConfirmProps) => void;
-    };
-    error: (config: ModalReactProps) => {
-        destroy: () => void;
-        update: (newConfig: ConfirmProps) => void;
-    };
-    warning: (config: ModalReactProps) => {
-        destroy: () => void;
-        update: (newConfig: ConfirmProps) => void;
-    };
-    confirm: (config: ModalReactProps) => {
-        destroy: () => void;
-        update: (newConfig: ConfirmProps) => void;
-    };
-})[];
+declare type UseModalReturnHooksType = (config: ModalReactProps) => {
+    destroy: () => void;
+    update: (newConfig: ConfirmProps) => void;
+};
+export default function useModal(): [
+    {
+        info: UseModalReturnHooksType;
+        success: UseModalReturnHooksType;
+        error: UseModalReturnHooksType;
+        warning: UseModalReturnHooksType;
+        confirm: UseModalReturnHooksType;
+    },
+    ReactNode
+];
+export {};

package/lib/es/navigation/Footer.d.ts

@@ -4,7 +4,7 @@ import '@douyinfe/semi-foundation/lib/es/navigation/navigation.css';
 import { NavContextType } from './nav-context';
 import { BaseProps } from '../_base/baseComponent';
 export interface NavFooterProps extends BaseProps {
-    collapseButton?: React.ReactNode | boolean;
+    collapseButton?: React.ReactNode;
     collapseText?: (collapsed?: boolean) => React.ReactNode;
 }
 export default class NavFooter extends PureComponent<NavFooterProps> {

package/lib/es/radio/radio.d.ts

@@ -29,9 +29,13 @@ export declare type RadioProps = {
     addonClassName?: string;
     type?: RadioType;
     'aria-label'?: React.AriaAttributes['aria-label'];
+    addonId?: string;
+    extraId?: string;
 };
 export interface RadioState {
     hover?: boolean;
+    addonId?: string;
+    extraId?: string;
 }
 export { RadioChangeEvent };
 declare class Radio extends BaseComponent<RadioProps, RadioState> {

package/lib/es/radio/radio.js

@@ -44,16 +44,12 @@ class Radio extends BaseComponent {
     };
 
     this.state = {
-      hover: false
+      hover: false,
+      addonId: props.addonId,
+      extraId: props.extraId
     };
     this.foundation = new RadioFoundation(this.adapter);
     this.radioEntity = null;
-    this.addonId = getUuidShort({
-      prefix: 'addon'
-    });
-    this.extraId = getUuidShort({
-      prefix: 'extra'
-    });
   }
 
   get adapter() {
@@ -62,6 +58,20 @@ class Radio extends BaseComponent {
         this.setState({
           hover
         });
+      },
+      setAddonId: () => {
+        this.setState({
+          addonId: getUuidShort({
+            prefix: 'addon'
+          })
+        });
+      },
+      setExtraId: () => {
+        this.setState({
+          extraId: getUuidShort({
+            prefix: 'extra'
+          })
+        });
       }
     });
   }
@@ -98,7 +108,11 @@ class Radio extends BaseComponent {
       value: propValue
     } = this.props;
     let realChecked, isDisabled, realMode, isButtonRadioGroup, isCardRadioGroup, isPureCardRadioGroup, isButtonRadioComponent, buttonSize, realPrefixCls;
-    const isHover = this.state.hover;
+    const {
+      hover: isHover,
+      addonId,
+      extraId
+    } = this.state;
     let props = {};
 
     if (this.isInGroup()) {
@@ -151,10 +165,10 @@ class Radio extends BaseComponent {
     const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
       className: addonCls,
       style: addonStyle,
-      id: this.addonId
+      id: addonId
     }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefix, "-extra"),
-      id: this.extraId
+      id: extraId
     }, extra) : null);
 
     return /*#__PURE__*/React.createElement("label", {
@@ -171,8 +185,8 @@ class Radio extends BaseComponent {
       ref: ref => {
         this.radioEntity = ref;
       },
-      addonId: children && this.addonId,
-      extraId: extra && this.extraId
+      addonId: children && addonId,
+      extraId: extra && extraId
     })), isCardRadioGroup ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefix, "-isCardRadioGroup_content")
     }, renderContent()) : renderContent());

package/lib/es/radio/radioGroup.d.ts

@@ -24,7 +24,7 @@ export declare type RadioGroupProps = {
     value?: string | number;
     onChange?: (event: RadioChangeEvent) => void;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     style?: React.CSSProperties;
     direction?: ArrayElement<typeof strings.DIRECTION_SET>;
     mode?: RadioMode;

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

@@ -19,7 +19,7 @@ declare type ExcludeInputType = {
 };
 export interface optionRenderProps {
     key?: any;
-    label?: string | React.ReactNode | number;
+    label?: React.ReactNode;
     value?: string | number;
     style?: React.CSSProperties;
     className?: string;

package/lib/es/sideSheet/SideSheetContent.d.ts

@@ -13,7 +13,7 @@ export interface SideSheetContentProps {
     style: CSSProperties;
     bodyStyle?: CSSProperties;
     className: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     footer?: React.ReactNode;
     'aria-label'?: string;
 }

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

@@ -211,7 +211,7 @@ export declare type GetCheckboxProps<RecordType> = (record: RecordType) => Check
 export declare type RowSelectionOnChange<RecordType> = (selectedRowKeys?: (string | number)[], selectedRows?: RecordType[]) => void;
 export declare type RowSelectionOnSelect<RecordType> = (record?: RecordType, selected?: boolean, selectedRows?: RecordType[], nativeEvent?: React.MouseEvent) => void;
 export declare type RowSelectionOnSelectAll<RecordType> = (selected?: boolean, selectedRows?: RecordType[], changedRows?: RecordType[]) => void;
-export declare type ExpandIcon = ((expanded?: boolean) => React.ReactNode) | React.ReactNode | boolean;
+export declare type ExpandIcon = ((expanded?: boolean) => React.ReactNode) | React.ReactNode;
 export declare type ExpandedRowRender<RecordType> = (record?: RecordType, index?: number, expanded?: boolean) => React.ReactNode;
 export declare type Footer<RecordType> = ReactNode | ((pageData?: RecordType[]) => React.ReactNode);
 export declare type FormatPageText = ((pageInfo?: {

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

@@ -3,19 +3,19 @@ import PropTypes from 'prop-types';
 import Tag from './index';
 import { PopoverProps } from '../popover/index';
 import { AvatarShape, TagProps } from './interface';
-export interface TagGroupProps {
+export interface TagGroupProps<T> {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
     restCount?: number;
-    tagList?: (TagProps | React.ReactNode)[];
+    tagList?: (T extends 'custom' ? React.ReactNode : TagProps)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
     popoverProps?: PopoverProps;
     avatarShape?: AvatarShape;
     mode?: string;
 }
-export default class TagGroup extends PureComponent<TagGroupProps> {
+export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
     static defaultProps: {
         style: {};
         className: string;

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

@@ -11,7 +11,7 @@ export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'>
     className?: string;
     style?: React.CSSProperties;
     dataSource?: Data[];
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 declare class Timeline extends PureComponent<TimelineProps> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;

package/lib/es/timeline/item.d.ts

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/timeline/timeline.css';
 export interface TimelineItemProps {
     color?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     time?: React.ReactNode;
     type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
     dot?: React.ReactNode;

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

@@ -53,6 +53,7 @@ export interface TooltipProps extends BaseProps {
     guardFocus?: boolean;
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
+    wrapperId?: string;
 }
 interface TooltipState {
     visible: boolean;

package/lib/es/tooltip/index.js

@@ -293,7 +293,7 @@ export default class Tooltip extends BaseComponent {
       placement: props.position || 'top',
       transitionStyle: {},
       isPositionUpdated: false,
-      id: getUuidShort() // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
+      id: props.wrapperId // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
 
     };
     this.foundation = new TooltipFoundation(this.adapter);
@@ -562,6 +562,11 @@ export default class Tooltip extends BaseComponent {
       },
       notifyEscKeydown: event => {
         this.props.onEscKeyDown(event);
+      },
+      setId: () => {
+        this.setState({
+          id: getUuidShort()
+        });
       }
     });
   }

package/list/index.tsx

@@ -17,7 +17,7 @@ export { ListItemProps } from './item';
 export interface ListProps<T> {
     style?: React.CSSProperties;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     bordered?: boolean;
     footer?: React.ReactNode;
     header?: React.ReactNode;

package/list/item.tsx

@@ -12,7 +12,7 @@ export interface ListItemProps {
     main?: React.ReactNode;
     align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLLIElement>;
     onRightClick?: React.MouseEventHandler<HTMLLIElement>;

package/modal/Modal.tsx

@@ -23,7 +23,7 @@ export type Directions = 'ltr' | 'rtl';
 
 export interface ModalReactProps extends ModalProps {
     cancelButtonProps?: ButtonProps;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     okButtonProps?: ButtonProps;
     bodyStyle?: CSSProperties;
     maskStyle?: CSSProperties;
@@ -50,7 +50,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         centered: PropTypes.bool,
         visible: PropTypes.bool,
         width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        height:  PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         confirmLoading: PropTypes.bool,
         cancelLoading: PropTypes.bool,
         okText: PropTypes.string,
@@ -193,23 +193,23 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
 
 
     static info = function (props: ModalReactProps) {
-        return confirm(withInfo(props));
+        return confirm<ReturnType<typeof withInfo>>(withInfo(props));
     };
 
     static success = function (props: ModalReactProps) {
-        return confirm(withSuccess(props));
+        return confirm<ReturnType<typeof withSuccess>>(withSuccess(props));
     };
 
     static error = function (props: ModalReactProps) {
-        return confirm(withError(props));
+        return confirm<ReturnType<typeof withError>>(withError(props));
     };
 
     static warning = function (props: ModalReactProps) {
-        return confirm(withWarning(props));
+        return confirm<ReturnType<typeof withWarning>>(withWarning(props));
     };
 
     static confirm = function (props: ModalReactProps) {
-        return confirm(withConfirm(props));
+        return confirm<ReturnType<typeof withConfirm>>(withConfirm(props));
     };
 
     static destroyAll = function destroyAllFn() {

package/modal/ModalContent.tsx

@@ -21,7 +21,7 @@ let uuid = 0;
 
 
 export interface ModalContentReactProps extends ModalContentProps {
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 export default class ModalContent extends BaseComponent<ModalContentReactProps, ModalContentState> {
     static contextType = ConfigContext;

package/modal/confirm.tsx

@@ -5,14 +5,14 @@ import ConfirmModal from './ConfirmModal';
 
 import '@douyinfe/semi-foundation/modal/modal.scss';
 import { get } from 'lodash';
-import { IconAlertTriangle, IconInfoCircle, IconTickCircle, IconHelpCircle, IconAlertCircle } from '@douyinfe/semi-icons';
+import { IconAlertCircle, IconAlertTriangle, IconHelpCircle, IconInfoCircle, IconTickCircle } from '@douyinfe/semi-icons';
 import { Motion } from '../_base/base';
 
-export interface ConfirmProps extends ModalReactProps{
+export interface ConfirmProps extends ModalReactProps {
     type: 'success' | 'info' | 'warning' | 'error' | 'confirm';
 }
 
-export default function confirm(props: ConfirmProps) {
+export default function confirm<T>(props: ConfirmProps) {
     // create a dom in adapter?
     const div = document.createElement('div');
     document.body.appendChild(div);
@@ -51,7 +51,7 @@ export default function confirm(props: ConfirmProps) {
     } : false;
 
     function render(renderProps: ConfirmProps) {
-        ReactDOM.render(<ConfirmModal {...renderProps} motion={mergedMotion} />, div);
+        ReactDOM.render(<ConfirmModal {...renderProps} motion={mergedMotion}/>, div);
     }
 
     function close() {
@@ -62,7 +62,7 @@ export default function confirm(props: ConfirmProps) {
         render(currentConfig);
     }
 
-    function update(newConfig: ConfirmProps) {
+    function update(newConfig: T extends { type: Exclude<ConfirmProps['type'], 'confirm'> } ? ModalReactProps : ConfirmProps) {
         currentConfig = {
             ...currentConfig,
             ...newConfig,
@@ -79,11 +79,10 @@ export default function confirm(props: ConfirmProps) {
 }
 
 
-
 export function withInfo(props: ModalReactProps) {
     return {
         type: 'info' as const,
-        icon: <IconInfoCircle />,
+        icon: <IconInfoCircle/>,
         ...props
     };
 }
@@ -91,7 +90,7 @@ export function withInfo(props: ModalReactProps) {
 export function withSuccess(props: ModalReactProps) {
     return {
         type: 'success' as const,
-        icon: <IconTickCircle />,
+        icon: <IconTickCircle/>,
         ...props
     };
 }
@@ -99,7 +98,7 @@ export function withSuccess(props: ModalReactProps) {
 export function withWarning(props: ModalReactProps) {
     return {
         type: 'warning' as const,
-        icon: <IconAlertTriangle />,
+        icon: <IconAlertTriangle/>,
         ...props
     };
 }
@@ -107,7 +106,7 @@ export function withWarning(props: ModalReactProps) {
 export function withError(props: ModalReactProps) {
     return {
         type: 'error' as const,
-        icon: <IconAlertCircle />,
+        icon: <IconAlertCircle/>,
         ...props
     };
 }
@@ -115,7 +114,7 @@ export function withError(props: ModalReactProps) {
 export function withConfirm(props: ModalReactProps) {
     return {
         type: 'confirm' as const,
-        icon: <IconHelpCircle />,
+        icon: <IconHelpCircle/>,
         ...props
     };
 }

package/modal/useModal/index.tsx

@@ -19,7 +19,15 @@ function usePatchElement(): ([ReactNode[], (element: ReactNode) => () => void])
     return [elements, patchElement];
 }
 
-export default function useModal() {
+type UseModalReturnHooksType = (config: ModalReactProps) => { destroy: () => void, update: (newConfig: ConfirmProps) => void };
+
+export default function useModal(): [{
+    info: UseModalReturnHooksType,
+    success: UseModalReturnHooksType,
+    error:UseModalReturnHooksType,
+    warning: UseModalReturnHooksType,
+    confirm: UseModalReturnHooksType
+}, ReactNode] {
     const [elements, patchElement] = usePatchElement();
 
     // eslint-disable-next-line max-len

package/navigation/Footer.tsx

@@ -10,7 +10,7 @@ import NavContext, { NavContextType } from './nav-context';
 import { BaseProps } from '../_base/baseComponent';
 
 export interface NavFooterProps extends BaseProps {
-    collapseButton?: React.ReactNode | boolean;
+    collapseButton?: React.ReactNode;
     collapseText?: (collapsed?: boolean) => React.ReactNode;
 }
 
@@ -28,7 +28,7 @@ export default class NavFooter extends PureComponent<NavFooterProps> {
     static defaultProps = {
         collapseButton: false,
     };
-    
+
     context: NavContextType;
 
     renderCollapseButton = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.10.2",
+    "version": "2.11.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.10.2",
-        "@douyinfe/semi-animation-react": "2.10.2",
-        "@douyinfe/semi-foundation": "2.10.2",
-        "@douyinfe/semi-icons": "2.10.2",
-        "@douyinfe/semi-illustrations": "2.10.2",
-        "@douyinfe/semi-theme-default": "2.10.2",
+        "@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",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "00b27ff43fe6ed5d775d5849bd0adc4c4c5ea231",
+    "gitHead": "f7a5cae3d9190faff4a08c5a4da23927a1ab86e5",
     "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.10.2",
+        "@douyinfe/semi-scss-compile": "2.11.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/radio/radio.tsx

@@ -41,10 +41,14 @@ export type RadioProps = {
     addonClassName?: string;
     type?: RadioType;
     'aria-label'?: React.AriaAttributes['aria-label'];
+    addonId?: string;
+    extraId?: string;
 };
 
 export interface RadioState {
     hover?: boolean;
+    addonId?: string;
+    extraId?: string;
 }
 
 export { RadioChangeEvent };
@@ -94,11 +98,11 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         super(props);
         this.state = {
             hover: false,
+            addonId: props.addonId,
+            extraId: props.extraId,
         };
         this.foundation = new RadioFoundation(this.adapter);
         this.radioEntity = null;
-        this.addonId = getUuidShort({ prefix: 'addon' });
-        this.extraId = getUuidShort({ prefix: 'extra' });
     }
 
     get adapter(): RadioAdapter {
@@ -106,6 +110,12 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             ...super.adapter,
             setHover: (hover: boolean) => {
                 this.setState({ hover });
+            },
+            setAddonId: () => {
+                this.setState({ addonId: getUuidShort({ prefix: 'addon' }) });
+            },
+            setExtraId: () => {
+                this.setState({ extraId: getUuidShort({ prefix: 'extra' }) });
             }
         };
     }
@@ -168,7 +178,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             isButtonRadioComponent,
             buttonSize,
             realPrefixCls;
-        const isHover = this.state.hover;
+        const { hover: isHover, addonId, extraId } = this.state;
         let props = {};
 
         if (this.isInGroup()) {
@@ -218,8 +228,8 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         }, addonClassName);
         const renderContent = () => (
             <>
-                {children ? <span className={addonCls} style={addonStyle} id={this.addonId}>{children}</span> : null}
-                {extra && !isButtonRadio ? <div className={`${prefix}-extra`} id={this.extraId}>{extra}</div> : null}
+                {children ? <span className={addonCls} style={addonStyle} id={addonId}>{children}</span> : null}
+                {extra && !isButtonRadio ? <div className={`${prefix}-extra`} id={extraId}>{extra}</div> : null}
             </>
         );
         return (
@@ -240,8 +250,8 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
                     ref={(ref: RadioInner) => {
                         this.radioEntity = ref;
                     }}
-                    addonId={children && this.addonId}
-                    extraId={extra && this.extraId}
+                    addonId={children && addonId}
+                    extraId={extra && extraId}
                 />
                 {
                     isCardRadioGroup ?

package/radio/radioGroup.tsx

@@ -30,7 +30,7 @@ export type RadioGroupProps = {
     value?: string | number;
     onChange?: (event: RadioChangeEvent) => void;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     style?: React.CSSProperties;
     direction?: ArrayElement<typeof strings.DIRECTION_SET>;
     mode?: RadioMode;