chore: auto merge branches (#42343)

chore: merge master into feature

.dumi/theme/builtins/IconSearch/index.tsx

@@ -85,8 +85,11 @@ const IconSearch: React.FC = () => {
           iconList = iconList.filter((iconName) => iconName.toLowerCase().includes(matchKey));
         }
 
-        // CopyrightCircle is same as Copyright, don't show it
-        iconList = iconList.filter((icon) => icon !== 'CopyrightCircle');
+        const ignore = [
+          'CopyrightCircle', // same as Copyright
+          'DollarCircle', // same as Dollar
+        ];
+        iconList = iconList.filter((icon) => !ignore.includes(icon));
 
         return {
           category: key,
@@ -121,11 +124,11 @@ const IconSearch: React.FC = () => {
   };
 
   return (
-    <div className="markdown">
+    <div className='markdown'>
       <Affix offsetTop={24} onChange={setSearchBarAffixed}>
         <div css={iconSearchAffix} style={searchBarAffixed ? affixedStyle : {}}>
           <Segmented
-            size="large"
+            size='large'
             value={displayState.theme}
             options={options(intl)}
             onChange={handleChangeTheme}
@@ -135,7 +138,7 @@ const IconSearch: React.FC = () => {
             style={{ flex: 1, marginInlineStart: 16 }}
             allowClear
             autoFocus
-            size="large"
+            size='large'
             onChange={handleSearchIcon}
           />
         </div>

.husky/.gitignore

@@ -1 +0,0 @@
-_

components/color-picker/ColorPicker.tsx

@@ -28,7 +28,7 @@ export interface ColorPickerProps
   > {
   value?: Color | string;
   defaultValue?: Color | string;
-  children?: React.ReactElement;
+  children?: React.ReactNode;
   open?: boolean;
   disabled?: boolean;
   placement?: TriggerPlacement;

components/color-picker/ColorPickerPanel.tsx

@@ -17,7 +17,7 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
   const { prefixCls, allowClear, presets, onChange, onClear, color, ...injectProps } = props;
   const colorPickerPanelPrefixCls = `${prefixCls}-inner-panel`;
 
-  const extraPanelRender = (panel: React.ReactElement) => (
+  const extraPanelRender = (panel: React.ReactNode) => (
     <div className={colorPickerPanelPrefixCls}>
       {allowClear && (
         <ColorClear
@@ -31,22 +31,11 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
         />
       )}
       {panel}
-      <ColorInput
-        value={color}
-        onChange={(value) => onChange?.(value)}
-        prefixCls={prefixCls}
-        {...injectProps}
-      />
-
+      <ColorInput value={color} onChange={onChange} prefixCls={prefixCls} {...injectProps} />
       {Array.isArray(presets) && (
         <>
           <Divider className={`${colorPickerPanelPrefixCls}-divider`} />
-          <ColorPresets
-            value={color}
-            presets={presets}
-            onChange={(value) => onChange?.(value)}
-            prefixCls={prefixCls}
-          />
+          <ColorPresets value={color} presets={presets} prefixCls={prefixCls} onChange={onChange} />
         </>
       )}
     </div>
@@ -60,4 +49,9 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
     />
   );
 };
+
+if (process.env.NODE_ENV !== 'production') {
+  ColorPickerPanel.displayName = 'ColorPickerPanel';
+}
+
 export default ColorPickerPanel;

components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -2187,7 +2187,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
           >
             HSB:
             <span>
-              hsb(215,91%,100%)
+              hsb(215, 91%, 100%)
             </span>
           </div>
         </div>
@@ -2815,7 +2815,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
           >
             RGB:
             <span>
-              rgb(22,119,255)
+              rgb(22, 119, 255)
             </span>
           </div>
         </div>
@@ -3973,7 +3973,7 @@ Array [
       style="margin-right: 8px;"
     >
       <div
-        style="width: 20px; height: 20px; border-radius: 4px; background: rgb(22, 119, 255);"
+        style="width: 20px; height: 20px; border-radius: 4px; background-color: rgb(22, 119, 255);"
       />
     </div>
     <div

components/color-picker/__tests__/__snapshots__/demo.test.ts.snap

@@ -135,7 +135,7 @@ exports[`renders components/color-picker/demo/format.tsx correctly 1`] = `
           >
             HSB:
             <span>
-              hsb(215,91%,100%)
+              hsb(215, 91%, 100%)
             </span>
           </div>
         </div>
@@ -180,7 +180,7 @@ exports[`renders components/color-picker/demo/format.tsx correctly 1`] = `
           >
             RGB:
             <span>
-              rgb(22,119,255)
+              rgb(22, 119, 255)
             </span>
           </div>
         </div>
@@ -234,7 +234,7 @@ exports[`renders components/color-picker/demo/trigger.tsx correctly 1`] = `
     style="margin-right:8px"
   >
     <div
-      style="width:20px;height:20px;border-radius:4px;background:#1677ff"
+      style="width:20px;height:20px;border-radius:4px;background-color:#1677ff"
     />
   </div>
   <div

components/color-picker/components/ColorAlphaInput.tsx

@@ -12,7 +12,7 @@ interface ColorAlphaInputProps extends Pick<ColorPickerBaseProps, 'prefixCls'> {
 
 const ColorAlphaInput: FC<ColorAlphaInputProps> = ({ prefixCls, value, onChange }) => {
   const colorAlphaInputPrefixCls = `${prefixCls}-alpha-input`;
-  const [alphaValue, setAlphaValue] = useState(generateColor(value || '#000'));
+  const [alphaValue, setAlphaValue] = useState<Color>(generateColor(value || '#000'));
 
   // Update step value
   useEffect(() => {

components/color-picker/components/ColorClear.tsx

@@ -18,7 +18,7 @@ const ColorClear: FC<ColorClearProps> = ({ prefixCls, value, onChange }) => {
       onChange?.(genColor);
     }
   };
-
   return <div className={`${prefixCls}-clear`} onClick={handleClick} />;
 };
+
 export default ColorClear;

components/color-picker/components/ColorHsbInput.tsx

@@ -14,7 +14,7 @@ interface ColorHsbInputProps extends Pick<ColorPickerBaseProps, 'prefixCls'> {
 
 const ColorHsbInput: FC<ColorHsbInputProps> = ({ prefixCls, value, onChange }) => {
   const colorHsbInputPrefixCls = `${prefixCls}-hsb-input`;
-  const [hsbValue, setHsbValue] = useState(generateColor(value || '#000'));
+  const [hsbValue, setHsbValue] = useState<Color>(generateColor(value || '#000'));
 
   // Update step value
   useEffect(() => {

components/color-picker/components/ColorInput.tsx

@@ -1,10 +1,10 @@
-import type { FC } from 'react';
-import React from 'react';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import type { FC } from 'react';
+import React, { useMemo } from 'react';
 import Select from '../../select';
+import type { Color } from '../color';
 import type { ColorPickerBaseProps } from '../interface';
 import { ColorFormat } from '../interface';
-import type { Color } from '../color';
 import ColorAlphaInput from './ColorAlphaInput';
 import ColorHexInput from './ColorHexInput';
 import ColorHsbInput from './ColorHsbInput';
@@ -16,8 +16,13 @@ interface ColorInputProps
   onChange?: (value: Color) => void;
 }
 
+const selectOptions = [ColorFormat.hex, ColorFormat.hsb, ColorFormat.rgb].map((format) => ({
+  value: format,
+  label: format.toLocaleUpperCase(),
+}));
+
 const ColorInput: FC<ColorInputProps> = (props) => {
-  const { prefixCls, format, onFormatChange, value, onChange } = props;
+  const { prefixCls, format, value, onFormatChange, onChange } = props;
   const [colorFormat, setColorFormat] = useMergedState('hex', {
     value: format,
     onChange: onFormatChange,
@@ -29,17 +34,18 @@ const ColorInput: FC<ColorInputProps> = (props) => {
     setColorFormat(newFormat);
   };
 
-  const steppersRender = () => {
+  const steppersNode = useMemo<React.ReactNode>(() => {
+    const inputProps = { value, prefixCls, onChange };
     switch (colorFormat) {
       case ColorFormat.hsb:
-        return <ColorHsbInput value={value} onChange={onChange} prefixCls={prefixCls} />;
+        return <ColorHsbInput {...inputProps} />;
       case ColorFormat.rgb:
-        return <ColorRgbInput value={value} onChange={onChange} prefixCls={prefixCls} />;
+        return <ColorRgbInput {...inputProps} />;
       case ColorFormat.hex:
       default:
-        return <ColorHexInput value={value} onChange={onChange} prefixCls={prefixCls} />;
+        return <ColorHexInput {...inputProps} />;
     }
-  };
+  }, [colorFormat, prefixCls, value, onChange]);
 
   return (
     <div className={`${colorInputPrefixCls}-container`}>
@@ -52,24 +58,12 @@ const ColorInput: FC<ColorInputProps> = (props) => {
         onChange={handleFormatChange}
         className={`${prefixCls}-format-select`}
         size="small"
-        options={[
-          {
-            label: ColorFormat.hex.toLocaleUpperCase(),
-            value: ColorFormat.hex,
-          },
-          {
-            label: ColorFormat.hsb.toLocaleUpperCase(),
-            value: ColorFormat.hsb,
-          },
-          {
-            label: ColorFormat.rgb.toLocaleUpperCase(),
-            value: ColorFormat.rgb,
-          },
-        ]}
+        options={selectOptions}
       />
-      <div className={colorInputPrefixCls}>{steppersRender()}</div>
+      <div className={colorInputPrefixCls}>{steppersNode}</div>
       <ColorAlphaInput prefixCls={prefixCls} value={value} onChange={onChange} />
     </div>
   );
 };
+
 export default ColorInput;

components/color-picker/components/ColorPresets.tsx

@@ -1,8 +1,8 @@
+import { ColorBlock } from '@rc-component/color-picker';
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
-import { ColorBlock } from '@rc-component/color-picker';
 import Collapse from '../../collapse';
 import { useLocale } from '../../locale';
 import type { Color } from '../color';
@@ -19,7 +19,7 @@ interface ColorPresetsProps extends Pick<ColorPickerBaseProps, 'prefixCls'> {
 
 const genPresetColor = (list: PresetsItem[]) =>
   list.map((value) => {
-    value.colors = value.colors.map((color) => generateColor(color));
+    value.colors = value.colors.map(generateColor);
     return value;
   });
 
@@ -35,11 +35,11 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
   const [locale] = useLocale('ColorPicker');
   const [presetsValue] = useMergedState(genPresetColor(presets), {
     value: genPresetColor(presets),
-    postState: (item) => genPresetColor(item),
+    postState: genPresetColor,
   });
   const colorPresetsPrefixCls = `${prefixCls}-presets`;
 
-  const activeKey = useMemo(
+  const activeKeys = useMemo<string[]>(
     () => presetsValue.map((preset) => `panel-${preset.label}`),
     [presetsValue],
   );
@@ -50,14 +50,14 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
 
   return (
     <div className={colorPresetsPrefixCls}>
-      <Collapse defaultActiveKey={activeKey} ghost>
+      <Collapse defaultActiveKey={activeKeys} ghost>
         {presetsValue.map((preset) => (
           <Panel
             header={<div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>}
             key={`panel-${preset?.label}`}
           >
             <div className={`${colorPresetsPrefixCls}-items`}>
-              {Array.isArray(preset?.colors) && preset?.colors.length > 0 ? (
+              {Array.isArray(preset?.colors) && preset.colors?.length > 0 ? (
                 preset.colors.map((presetColor: Color) => (
                   <ColorBlock
                     key={`preset-${presetColor.toHexString()}`}
@@ -81,4 +81,5 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
     </div>
   );
 };
+
 export default ColorPresets;

components/color-picker/components/ColorRgbInput.tsx

@@ -13,7 +13,7 @@ interface ColorRgbInputProps extends Pick<ColorPickerBaseProps, 'prefixCls'> {
 
 const ColorRgbInput: FC<ColorRgbInputProps> = ({ prefixCls, value, onChange }) => {
   const colorRgbInputPrefixCls = `${prefixCls}-rgb-input`;
-  const [rgbValue, setRgbValue] = useState(generateColor(value || '#000'));
+  const [rgbValue, setRgbValue] = useState<Color>(generateColor(value || '#000'));
 
   // Update step value
   useEffect(() => {

components/color-picker/components/ColorTrigger.tsx

@@ -1,7 +1,7 @@
+import { ColorBlock } from '@rc-component/color-picker';
 import classNames from 'classnames';
 import type { CSSProperties, MouseEventHandler } from 'react';
 import React, { forwardRef, useMemo } from 'react';
-import { ColorBlock } from '@rc-component/color-picker';
 import type { ColorPickerBaseProps } from '../interface';
 import ColorClear from './ColorClear';
 
@@ -20,14 +20,14 @@ const ColorTrigger = forwardRef<HTMLDivElement, colorTriggerProps>((props, ref)
   const { color, prefixCls, open, clearColor, disabled, className, ...rest } = props;
   const colorTriggerPrefixCls = `${prefixCls}-trigger`;
 
-  const containerRender = useMemo(
+  const containerNode = useMemo<React.ReactNode>(
     () =>
       clearColor ? (
         <ColorClear prefixCls={prefixCls} />
       ) : (
-        <ColorBlock color={color.toRgbString()} prefixCls={prefixCls} />
+        <ColorBlock prefixCls={prefixCls} color={color.toRgbString()} />
       ),
-    [color, clearColor],
+    [color, clearColor, prefixCls],
   );
 
   return (
@@ -39,8 +39,9 @@ const ColorTrigger = forwardRef<HTMLDivElement, colorTriggerProps>((props, ref)
       })}
       {...rest}
     >
-      {containerRender}
+      {containerNode}
     </div>
   );
 });
+
 export default ColorTrigger;

components/color-picker/demo/base.tsx

@@ -1,5 +1,5 @@
 import { ColorPicker, theme } from 'antd';
-import type { Color } from 'antd/lib/color-picker';
+import type { Color } from 'antd/es/color-picker';
 import React, { useState } from 'react';
 
 export default () => {

components/color-picker/demo/format.tsx

@@ -1,20 +1,22 @@
 import { Col, ColorPicker, Row, Space } from 'antd';
-import type { Color } from 'antd/lib/color-picker';
+import type { Color } from 'antd/es/color-picker';
 import React, { useMemo, useState } from 'react';
 
 export default () => {
   const [colorHex, setColorHex] = useState<Color | string>('#1677ff');
-  const [colorHsb, setColorHsb] = useState<Color | string>('hsb(215,91%,100%)');
-  const [colorRgb, setColorRgb] = useState<Color | string>('rgb(22,119,255)');
+  const [colorHsb, setColorHsb] = useState<Color | string>('hsb(215, 91%, 100%)');
+  const [colorRgb, setColorRgb] = useState<Color | string>('rgb(22, 119, 255)');
 
   const hexString = useMemo(
     () => (typeof colorHex === 'string' ? colorHex : colorHex.toHexString()),
     [colorHex],
   );
+
   const hsbString = useMemo(
     () => (typeof colorHsb === 'string' ? colorHsb : colorHsb.toHsbString()),
     [colorHsb],
   );
+
   const rgbString = useMemo(
     () => (typeof colorRgb === 'string' ? colorRgb : colorRgb.toRgbString()),
     [colorRgb],

components/color-picker/demo/pure-panel.tsx

@@ -1,5 +1,5 @@
 import { ColorPicker, theme } from 'antd';
-import type { Color } from 'antd/lib/color-picker';
+import type { Color } from 'antd/es/color-picker';
 import React, { useState } from 'react';
 
 const PureRenderColorPicker = ColorPicker._InternalPanelDoNotUseOrYouWillBeFired;

components/color-picker/demo/trigger.tsx

@@ -1,11 +1,12 @@
 import { ColorPicker, Space, theme } from 'antd';
-import type { Color } from 'antd/lib/color-picker';
+import type { Color } from 'antd/es/color-picker';
 import React, { useMemo, useState } from 'react';
 
 export default () => {
   const { token } = theme.useToken();
   const [color, setColor] = useState<Color | string>(token.colorPrimary);
-  const genColor = useMemo(
+
+  const bgColor = useMemo<string>(
     () => (typeof color === 'string' ? color : color.toHexString()),
     [color],
   );
@@ -15,13 +16,13 @@ export default () => {
       <Space>
         <div
           style={{
-            width: 20,
-            height: 20,
-            borderRadius: 4,
-            background: genColor,
+            width: token.sizeMD,
+            height: token.sizeMD,
+            borderRadius: token.borderRadiusSM,
+            backgroundColor: bgColor,
           }}
         />
-        <span>{genColor}</span>
+        <span>{bgColor}</span>
       </Space>
     </ColorPicker>
   );

components/color-picker/hooks/useColorState.ts

@@ -2,20 +2,17 @@ import { useEffect, useState } from 'react';
 import type { Color } from '../color';
 import { generateColor } from '../util';
 
-function hasValue(value: Color | string | undefined) {
+function hasValue(value?: Color | string) {
   return value !== undefined;
 }
 
 const useColorState = (
   defaultStateValue: Color | string,
-  option: {
-    defaultValue?: Color | string;
-    value?: Color | string;
-  },
-): [Color, React.Dispatch<React.SetStateAction<Color>>] => {
+  option: { defaultValue?: Color | string; value?: Color | string },
+): readonly [Color, React.Dispatch<React.SetStateAction<Color>>] => {
   const { defaultValue, value } = option;
-  const [colorValue, setColorValue] = useState(() => {
-    let mergeState;
+  const [colorValue, setColorValue] = useState<Color>(() => {
+    let mergeState: string | Color | undefined;
     if (hasValue(value)) {
       mergeState = value;
     } else if (hasValue(defaultValue)) {
@@ -23,8 +20,7 @@ const useColorState = (
     } else {
       mergeState = defaultStateValue;
     }
-    const genColor = generateColor(mergeState || '');
-    return genColor;
+    return generateColor(mergeState || '');
   });
 
   useEffect(() => {
@@ -33,7 +29,7 @@ const useColorState = (
     }
   }, [value]);
 
-  return [colorValue, setColorValue];
+  return [colorValue, setColorValue] as const;
 };
 
 export default useColorState;

components/color-picker/index.en-US.md

@@ -10,11 +10,11 @@ group:
   title: Data Entry
 ---
 
-Components providing color selection
+Components providing color selection, Available since `5.5.0`.
 
 ## When To Use
 
-Used when the user needs to customize the color selection
+Used when the user needs to customize the color selection.
 
 ## Examples
 
@@ -29,7 +29,7 @@ Used when the user needs to customize the color selection
 
 ## API
 
-> This component is available since antd@5.5.0
+> This component is available since `antd@5.5.0`.
 
 <!-- prettier-ignore -->
 | Property | Description | Type | Default |
@@ -41,7 +41,7 @@ Used when the user needs to customize the color selection
 | onChange | Callback when `value` is changed | `(value: Color, hex: string) => void` | - |
 | allowClear | 	Allow clearing color selected | boolean | false |
 | presets | 	Preset colors | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - |
-| children | Trigger of ColorPicker | ReactElement | - |
+| children | Trigger of ColorPicker | React.ReactNode | - |
 | trigger | ColorPicker trigger mode | `hover` \| `click` | `click` |
 | open | Whether to show popup | boolean | - |
 | onOpenChange | Callback when `open` is changed | `(open: boolean) => void` | - |

components/color-picker/index.zh-CN.md

@@ -11,7 +11,7 @@ group:
   title: 数据录入
 ---
 
-提供颜色选取的组件
+提供颜色选取的组件，自 `5.5.0` 版本开始提供该组件。
 
 ## 何时使用
 
@@ -42,7 +42,7 @@ group:
 | onChange | 颜色变化的回调 | `(value: Color, hex: string) => void` | - |
 | allowClear | 允许清除选择的颜色 | boolean | false |
 | presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - |
-| children | 颜色选择器的触发器 | ReactElement | - |
+| children | 颜色选择器的触发器 | React.ReactNode | - |
 | trigger | 颜色选择器的触发模式 | `hover` \| `click` | `click` |
 | open | 是否显示弹出窗口 | boolean | - |
 | onOpenChange | 当 `open` 被改变时的回调 | `(open: boolean) => void` | - |

components/color-picker/interface.ts

@@ -8,7 +8,10 @@ export enum ColorFormat {
   hsb = 'hsb',
 }
 
-export type PresetsItem = { label: ReactNode; colors: Array<string | Color> };
+export interface PresetsItem {
+  label: ReactNode;
+  colors: (string | Color)[];
+}
 
 export interface ColorPickerBaseProps {
   color?: Color;

components/color-picker/style/index.ts

@@ -1,10 +1,10 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import genPickerStyle from './picker';
-import genInputStyle from './input';
-import genPresetsStyle from './presets';
 import genColorBlockStyle from './color-block';
+import genInputStyle from './input';
+import genPickerStyle from './picker';
+import genPresetsStyle from './presets';
 
 export interface ComponentToken {}
 
@@ -137,7 +137,7 @@ export default genComponentStyleHook('ColorPicker', (token) => {
 
   const colorPickerSliderHeight = 8;
 
-  const ColorPickerToken = mergeToken<ColorPickerToken>(token, {
+  const colorPickerToken = mergeToken<ColorPickerToken>(token, {
     colorPickerWidth: 234,
     colorPickerHandlerSize: 16,
     colorPickerHandlerSizeSM: 12,
@@ -149,5 +149,5 @@ export default genComponentStyleHook('ColorPicker', (token) => {
     colorPickerPreviewSize: colorPickerSliderHeight * 2 + marginSM,
   });
 
-  return [genColorPickerStyle(ColorPickerToken)];
+  return [genColorPickerStyle(colorPickerToken)];
 });

components/color-picker/style/picker.ts

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { GenerateStyle } from '../../theme/internal';
-import type { ColorPickerToken } from './index';
 import genColorBlockStyle from './color-block';
+import type { ColorPickerToken } from './index';
 
 const genPickerStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
   const {
@@ -41,6 +41,7 @@ const genPickerStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
       border: `${lineWidthBold}px solid ${colorBgElevated}`,
       position: 'relative',
       borderRadius: '50%',
+      cursor: 'pointer',
       boxShadow: `${colorPickerInsetShadow}, 0 0 0 1px ${colorFillSecondary}`,
       '&-sm': {
         width: colorPickerHandlerSizeSM,

components/divider/style/index.ts

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@@ -105,7 +105,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
       },
 
       [`&-vertical${componentCls}-dashed`]: {
-        borderInlineStart: lineWidth,
+        borderInlineStartWidth: lineWidth,
         borderInlineEnd: 0,
         borderBlockStart: 0,
         borderBlockEnd: 0,

components/progress/Circle.tsx

@@ -28,12 +28,10 @@ const Circle: React.FC<CircleProps> = (props) => {
     type,
     children,
     success,
-    size,
+    size = originWidth,
   } = props;
 
-  const mergedSize = size ?? [originWidth, originWidth];
-
-  const [width, height] = getSize(mergedSize, 'circle');
+  const [width, height] = getSize(size, 'circle');
 
   let { strokeWidth } = props;
   if (strokeWidth === undefined) {

components/progress/__tests__/index.test.tsx

@@ -264,6 +264,13 @@ describe('Progress', () => {
     );
   });
 
+  it('should not warning if not pass the `size` prop in type Circle', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    errorSpy.mockClear();
+    render(<Progress type="circle" />);
+    expect(errorSpy).not.toHaveBeenCalled();
+  });
+
   it('should warnning if pass number[] into `size` in type dashboard', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     render(<Progress size={[60, 20]} type="dashboard" />);