Apply suggestion from @gemini-code-assist[bot]

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: 叶枫 <7971419+crazyair@users.noreply.github.com>

AGENTS.md

@@ -343,7 +343,7 @@ export const prepareComponentToken: GetDefaultToken<'ComponentName'> = (token) =
 });
 
 // 3. 样式生成函数
-const genComponentStyle: GenerateStyle<ComponentToken, CSSObject> = (token) => {
+const genComponentStyle: GenerateStyle<ComponentToken> = (token) => {
   const { componentCls } = token;
   return {
     [componentCls]: {
@@ -767,14 +767,9 @@ export const prepareComponentToken: GetDefaultToken<'ComponentName'> = (token) =
   componentPadding: token.paddingXS,
 });
 
-const genComponentStyle: GenerateStyle<ComponentToken, CSSObject> = (token) => {
+const genComponentStyle: GenerateStyle<ComponentToken> = (token) => {
   const { componentCls, fontSize, padding } = token;
-  return {
-    [componentCls]: {
-      fontSize,
-      padding,
-    },
-  };
+  return { [componentCls]: { fontSize, padding } };
 };
 
 export default genStyleHooks(
@@ -842,8 +837,10 @@ export default genStyleHooks(
    - **组件名不用反引号**：组件名（如 Modal、Drawer、Button、Upload.Dragger）不使用 `` ` `` 包裹；属性名、API、token 等仍用反引号
 
 3. **中英文条目句式**：
-   - **中文**：`Emoji 组件名 动词/描述 … [#PR](链接) [@贡献者]` 例：`🐞 Button 修复暗色主题下 \`color\` 的 \`hover\` 与 \`active\` 状态颜色相反的问题。`
-   - **英文**：`Emoji 动词 组件名 描述 … [#PR](链接) [@贡献者]`（动词在前，如 Fix / Add / Support / Remove / Disable / Refactor / Improve / Change）例：`🐞 Fix Button reversed \`hover\` and \`active\` colors for \`color\` in dark theme.`
+   - **中文**：`Emoji 组件名 动词/描述 … [#PR](链接) [@贡献者]`  
+     例：`🐞 Button 修复暗色主题下 \`color\` 的 \`hover\` 与 \`active\` 状态颜色相反的问题。`
+   - **英文**：`Emoji 动词 组件名 描述 … [#PR](链接) [@贡献者]`（动词在前，如 Fix / Add / Support / Remove / Disable / Refactor / Improve / Change）  
+     例：`🐞 Fix Button reversed \`hover\` and \`active\` colors for \`color\` in dark theme.`
 
 4. **分组逻辑**：
    - **多项改动**：同一组件有 2 条及以上改动时，使用 `- 组件名` 作为分类标题（不加粗），具体条目缩进排列，子条中仍须包含组件名

components/_util/__tests__/type.test.tsx

@@ -99,5 +99,12 @@ describe('type', () => {
       const bamboo: BambooType = 123;
       expect(bamboo).toBeTruthy();
     });
+    it('Type is return', () => {
+      interface Props {
+        classNames?: { root?: string } | ((props: any) => { root?: string });
+      }
+      const result: GetProp<Props, 'classNames', 'Return'> = { root: '123' };
+      expect(result).toBeTruthy();
+    });
   });
 });

components/_util/fallbackProp.ts

@@ -0,0 +1,12 @@
+/**
+ * Search for the first non-undefined value in the arguments and return it.
+ *
+ * ```js
+ * const mergedIcon = fallbackProp(propIcon, contextIcon, defaultIcon);
+ * ```
+ *
+ * Note: it is different from `??` operator which skips null
+ */
+export default function fallbackProp<T>(...args: T[]): T | undefined {
+  return args.find((arg) => arg !== undefined);
+}

components/_util/type.ts

@@ -55,7 +55,12 @@ export type GetProps<T extends React.ComponentType<any> | object> =
 export type GetProp<
   T extends React.ComponentType<any> | object,
   PropName extends keyof GetProps<T>,
-> = NonNullable<GetProps<T>[PropName]>;
+  Type extends 'Default' | 'Return' = 'Default',
+> = Type extends 'Default'
+  ? NonNullable<GetProps<T>[PropName]>
+  : Type extends 'Return'
+    ? ReturnType<Extract<NonNullable<GetProps<T>[PropName]>, (...args: any[]) => unknown>>
+    : never;
 
 type ReactRefComponent<Props extends { ref?: React.Ref<any> | string }> = (
   props: Props,

components/_util/wave/style.ts

@@ -1,5 +1,3 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import { genComponentStyleHook } from '../../theme/internal';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genCssVar } from '../../theme/util/genStyleUtils';
@@ -9,7 +7,7 @@ export interface ComponentToken {}
 
 export interface WaveToken extends FullToken<'Wave'> {}
 
-const genWaveStyle: GenerateStyle<WaveToken, CSSObject> = (token) => {
+const genWaveStyle: GenerateStyle<WaveToken> = (token) => {
   const {
     componentCls,
     colorPrimary,

components/affix/style/index.ts

@@ -1,3 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks } from '../../theme/internal';
 
@@ -14,7 +16,7 @@ interface AffixToken extends FullToken<'Affix'> {
 }
 
 // ============================== Shared ==============================
-const genSharedAffixStyle: GenerateStyle<AffixToken> = (token) => {
+const genSharedAffixStyle: GenerateStyle<AffixToken> = (token): CSSObject => {
   const { componentCls } = token;
   return {
     [componentCls]: {

components/alert/style/index.ts

@@ -43,7 +43,7 @@ const genAlertTypeStyle = (
   },
 });
 
-export const genBaseStyle: GenerateStyle<AlertToken, CSSObject> = (token) => {
+export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
   const {
     componentCls,
     motionDurationSlow: duration,
@@ -142,7 +142,7 @@ export const genBaseStyle: GenerateStyle<AlertToken, CSSObject> = (token) => {
   };
 };
 
-export const genTypeStyle: GenerateStyle<AlertToken, CSSObject> = (token) => {
+export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
   const {
     componentCls,
 
@@ -191,7 +191,7 @@ export const genTypeStyle: GenerateStyle<AlertToken, CSSObject> = (token) => {
   };
 };
 
-export const genActionStyle: GenerateStyle<AlertToken, CSSObject> = (token) => {
+export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
   const {
     componentCls,
     iconCls,

components/anchor/style/index.ts

@@ -1,4 +1,3 @@
-import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { resetComponent, textEllipsis } from '../../style';
@@ -46,7 +45,7 @@ interface AnchorToken extends FullToken<'Anchor'> {
 }
 
 // ============================== Shared ==============================
-const genSharedAnchorStyle: GenerateStyle<AnchorToken, CSSObject> = (token) => {
+const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token) => {
   const {
     componentCls,
     holderOffsetBlock,
@@ -132,7 +131,7 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken, CSSObject> = (token) => {
   };
 };
 
-const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken, CSSObject> = (token) => {
+const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken> = (token) => {
   const { componentCls, motionDurationSlow, lineWidthBold, colorPrimary } = token;
 
   return {

components/app/App.tsx

@@ -21,7 +21,7 @@ export interface AppProps<P = AnyObject> extends AppConfig {
   component?: CustomComponent<P> | false;
 }
 
-const App: React.FC<AppProps> = (props) => {
+const App = React.forwardRef<HTMLElement, AppProps>((props, ref) => {
   const {
     prefixCls: customizePrefixCls,
     children,
@@ -79,6 +79,12 @@ const App: React.FC<AppProps> = (props) => {
     'When using cssVar, ensure `component` is assigned a valid React component string.',
   );
 
+  devUseWarning('App')(
+    !ref || component !== false,
+    'usage',
+    '`ref` is not supported when `component` is `false`. Please provide a valid `component` instead.',
+  );
+
   // ============================ Render ============================
   const Component = component === false ? React.Fragment : component;
 
@@ -90,7 +96,7 @@ const App: React.FC<AppProps> = (props) => {
   return (
     <AppContext.Provider value={memoizedContextValue}>
       <AppConfigContext.Provider value={mergedAppConfig}>
-        <Component {...(component === false ? undefined : rootProps)}>
+        <Component {...(component === false ? undefined : { ...rootProps, ref })}>
           {ModalContextHolder}
           {messageContextHolder}
           {notificationContextHolder}
@@ -99,7 +105,7 @@ const App: React.FC<AppProps> = (props) => {
       </AppConfigContext.Provider>
     </AppContext.Provider>
   );
-};
+});
 
 if (process.env.NODE_ENV !== 'production') {
   App.displayName = 'App';

components/app/__tests__/index.test.tsx

@@ -247,5 +247,20 @@ describe('App', () => {
         'Warning: [antd: App] When using cssVar, ensure `component` is assigned a valid React component string.',
       );
     });
+
+    it('should warn if component is false and ref is not empty', () => {
+      const domRef = React.createRef<HTMLSpanElement>();
+      render(<App ref={domRef} component={false} />);
+
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: [antd: App] `ref` is not supported when `component` is `false`. Please provide a valid `component` instead.',
+      );
+    });
+
+    it('App should support Ref', () => {
+      const domRef = React.createRef<HTMLSpanElement>();
+      const { container } = render(<App ref={domRef} className="bamboo" component="span" />);
+      expect(domRef.current).toBe(container.querySelector('.bamboo'));
+    });
   });
 });

components/app/style/index.ts

@@ -1,5 +1,3 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks } from '../../theme/internal';
 
@@ -9,7 +7,7 @@ export interface ComponentToken {}
 interface AppToken extends FullToken<'App'> {}
 
 // =============================== Base ===============================
-const genBaseStyle: GenerateStyle<AppToken, CSSObject> = (token) => {
+const genBaseStyle: GenerateStyle<AppToken> = (token) => {
   const { componentCls, colorText, fontSize, lineHeight, fontFamily } = token;
   return {
     [componentCls]: {

components/avatar/style/index.ts

@@ -78,7 +78,7 @@ type AvatarToken = FullToken<'Avatar'> & {
   avatarColor: string;
 };
 
-const genBaseStyle: GenerateStyle<AvatarToken, CSSObject> = (token) => {
+const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
   const {
     antCls,
     componentCls,
@@ -168,7 +168,7 @@ const genBaseStyle: GenerateStyle<AvatarToken, CSSObject> = (token) => {
   };
 };
 
-const genGroupStyle: GenerateStyle<AvatarToken, CSSObject> = (token) => {
+const genGroupStyle: GenerateStyle<AvatarToken> = (token) => {
   const { componentCls, groupBorderColor, groupOverlapping, groupSpace } = token;
 
   return {

components/back-top/style/index.ts

@@ -65,7 +65,7 @@ type BackTopToken = FullToken<'BackTop'> & {
 };
 
 // ============================== Shared ==============================
-const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token) => {
+const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): CSSObject => {
   const { componentCls, backTopFontSize, backTopSize, zIndexPopup } = token;
 
   return {
@@ -109,7 +109,7 @@ const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token) =>
   };
 };
 
-const genMediaBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token) => {
+const genMediaBackTopStyle: GenerateStyle<BackTopToken> = (token): CSSObject => {
   const { componentCls, screenMD, screenXS, backTopInlineEndMD, backTopInlineEndXS } = token;
   return {
     [`@media (max-width: ${unit(screenMD)})`]: {

components/badge/style/index.ts

@@ -1,4 +1,3 @@
-import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes, unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
@@ -140,7 +139,7 @@ const antBadgeLoadingCircle = new Keyframes('antBadgeLoadingCircle', {
   },
 });
 
-const genSharedBadgeStyle: GenerateStyle<BadgeToken, CSSObject> = (token) => {
+const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token) => {
   const {
     componentCls,
     iconCls,
@@ -373,7 +372,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken, CSSObject> = (token) => {
 };
 
 // ============================== Export ==============================
-export const prepareToken = (token: Parameters<GenStyleFn<'Badge'>>[0]) => {
+export const prepareToken: (token: Parameters<GenStyleFn<'Badge'>>[0]) => BadgeToken = (token) => {
   const { fontHeight, lineWidth, marginXS, colorBorderBg } = token;
 
   const badgeFontHeight = fontHeight;

components/badge/style/ribbon.ts

@@ -1,4 +1,3 @@
-import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { prepareComponentToken, prepareToken } from '.';
@@ -8,7 +7,7 @@ import type { GenerateStyle } from '../../theme/internal';
 import { genPresetColor, genStyleHooks } from '../../theme/internal';
 
 // ============================== Ribbon ==============================
-const genRibbonStyle: GenerateStyle<BadgeToken, CSSObject> = (token) => {
+const genRibbonStyle: GenerateStyle<BadgeToken> = (token) => {
   const { antCls, badgeFontHeight, marginXS, badgeRibbonOffset, calc } = token;
   const ribbonPrefixCls = `${antCls}-ribbon`;
   const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;

components/button/style/index.ts

@@ -13,7 +13,7 @@ import genVariantStyle from './variant';
 export type { ComponentToken };
 
 // ============================== Shared ==============================
-const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => {
+const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
   const {
     componentCls,
     iconCls,
@@ -211,7 +211,7 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
   return genButtonStyle(largeToken, `${token.componentCls}-lg`);
 };
 
-const genBlockButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => {
+const genBlockButtonStyle: GenerateStyle<ButtonToken> = (token) => {
   const { componentCls } = token;
   return {
     [componentCls]: {

components/button/style/token.ts

@@ -283,7 +283,9 @@ export interface ButtonToken
   buttonIconOnlyFontSize: number | string;
 }
 
-export const prepareToken = (token: Parameters<GenStyleFn<'Button'>>[0]) => {
+export const prepareToken: (token: Parameters<GenStyleFn<'Button'>>[0]) => ButtonToken = (
+  token,
+) => {
   const { paddingInline, onlyIconSize, borderColorDisabled } = token;
 
   const buttonToken = mergeToken<ButtonToken>(token, {
@@ -308,7 +310,7 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
     : '#fff';
 
   const shadowColorTokens = PresetColors.reduce<CSSObject>(
-    (prev, colorKey) => ({
+    (prev: CSSObject, colorKey: PresetColorKey) => ({
       ...prev,
       [`${colorKey}ShadowColor`]: `0 ${unit(token.controlOutlineWidth)} 0 ${getAlphaColor(token[`${colorKey}1`], token.colorBgContainer)}`,
     }),

components/button/style/variant.ts

@@ -1,11 +1,9 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import { PresetColors } from '../../theme/interface';
 import type { GenerateStyle } from '../../theme/interface';
 import { genCssVar } from '../../theme/util/genStyleUtils';
 import type { ButtonToken } from './token';
 
-const genVariantStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => {
+const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
   const { componentCls, antCls, lineWidth } = token;
 
   const [varName, varRef] = genCssVar(antCls, 'btn');

components/calendar/style/index.ts

@@ -8,7 +8,7 @@ import {
   initPickerPanelToken,
 } from '../../date-picker/style';
 import { resetComponent } from '../../style';
-import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import type { FullToken, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
@@ -67,7 +67,7 @@ interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken, PanelCo
   dateContentHeight: number | string;
 }
 
-export const genCalendarStyles: GenerateStyle<CalendarToken, CSSObject> = (token) => {
+export const genCalendarStyles = (token: CalendarToken): CSSObject => {
   const { calendarCls, componentCls, fullBg, fullPanelBg, itemActiveBg } = token;
   return {
     [calendarCls]: {

components/carousel/style/index.ts

@@ -1,4 +1,3 @@
-import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes, unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
@@ -49,7 +48,7 @@ interface CarouselToken extends FullToken<'Carousel'> {}
 
 export const DotDuration = '--dot-duration';
 
-const genCarouselStyle: GenerateStyle<CarouselToken, CSSObject> = (token) => {
+const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
   const { componentCls, antCls } = token;
 
   return {

components/cascader/__tests__/index.test.tsx

@@ -907,4 +907,115 @@ describe('Cascader', () => {
       expect(screen.getAllByText('bamboo').length).toBe(1);
     });
   });
+
+  describe('clearIcon', () => {
+    it('should support custom clearIcon', () => {
+      render(
+        <Cascader
+          open
+          allowClear={{ clearIcon: <div>bamboo</div> }}
+          options={options}
+          defaultValue={['zhejiang', 'hangzhou']}
+        />,
+      );
+      expect(screen.getAllByText('bamboo').length).toBe(1);
+    });
+
+    it('should support ConfigProvider clearIcon', () => {
+      render(
+        <ConfigProvider cascader={{ clearIcon: <div>foobar</div> }}>
+          <Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} allowClear />
+        </ConfigProvider>,
+      );
+      expect(screen.getAllByText('foobar').length).toBe(1);
+    });
+
+    it('should prefer prop clearIcon over ConfigProvider clearIcon', () => {
+      render(
+        <ConfigProvider cascader={{ clearIcon: <div>foobar</div> }}>
+          <Cascader
+            allowClear={{ clearIcon: <div>bamboo</div> }}
+            options={options}
+            defaultValue={['zhejiang', 'hangzhou']}
+          />
+        </ConfigProvider>,
+      );
+      expect(screen.getAllByText('bamboo').length).toBe(1);
+    });
+  });
+
+  describe('removeIcon', () => {
+    it('should support custom removeIcon', () => {
+      render(
+        <Cascader
+          multiple
+          removeIcon={<div>bamboo</div>}
+          options={options}
+          defaultValue={[
+            ['zhejiang', 'hangzhou'],
+            ['jiangsu', 'nanjing'],
+          ]}
+        />,
+      );
+      expect(screen.getAllByText('bamboo').length).toBe(2);
+    });
+
+    it('should support ConfigProvider removeIcon', () => {
+      render(
+        <ConfigProvider cascader={{ removeIcon: <div>foobar</div> }}>
+          <Cascader
+            multiple
+            options={options}
+            defaultValue={[
+              ['zhejiang', 'hangzhou'],
+              ['jiangsu', 'nanjing'],
+            ]}
+          />
+        </ConfigProvider>,
+      );
+      expect(screen.getAllByText('foobar').length).toBe(2);
+    });
+
+    it('should prefer prop removeIcon over ConfigProvider removeIcon', () => {
+      render(
+        <ConfigProvider cascader={{ removeIcon: <div>foobar</div> }}>
+          <Cascader
+            multiple
+            options={options}
+            defaultValue={[
+              ['zhejiang', 'hangzhou'],
+              ['jiangsu', 'nanjing'],
+            ]}
+            removeIcon={<div>bamboo</div>}
+          />
+        </ConfigProvider>,
+      );
+      expect(screen.getAllByText('bamboo').length).toBe(2);
+    });
+  });
+
+  describe('searchIcon', () => {
+    it('should support custom searchIcon', () => {
+      render(<Cascader open showSearch={{ searchIcon: <div>bamboo</div> }} options={options} />);
+      expect(screen.getAllByText('bamboo').length).toBe(1);
+    });
+
+    it('should support ConfigProvider searchIcon', () => {
+      render(
+        <ConfigProvider cascader={{ searchIcon: <div>foobar</div> }}>
+          <Cascader open options={options} showSearch />
+        </ConfigProvider>,
+      );
+      expect(screen.getAllByText('foobar').length).toBe(1);
+    });
+
+    it('should prefer prop searchIcon over ConfigProvider searchIcon', () => {
+      render(
+        <ConfigProvider cascader={{ searchIcon: <div>foobar</div> }}>
+          <Cascader open showSearch={{ searchIcon: <div>bamboo</div> }} options={options} />
+        </ConfigProvider>,
+      );
+      expect(screen.getAllByText('bamboo').length).toBe(1);
+    });
+  });
 });

components/cascader/index.en-US.md

@@ -111,6 +111,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | sort | Used to sort filtered options | function(a, b, inputValue) | - |  |
 | searchValue | Set search value, Need work with `showSearch` | string | - | 4.17.0 |
 | onSearch | The callback function triggered when input changed | (search: string) => void | - | 4.17.0 |
+| searchIcon | Customize the search icon | ReactNode | - | 6.3.0 |
 
 ### Option
 

components/cascader/index.tsx

@@ -166,6 +166,9 @@ export interface CascaderProps<
   bordered?: boolean;
   placement?: SelectCommonPlacement;
   suffixIcon?: React.ReactNode;
+  showSearch?:
+    | boolean
+    | (SearchConfig<OptionType, keyof OptionType> & { searchIcon?: React.ReactNode });
   options?: OptionType[];
   status?: InputStatus;
 
@@ -244,11 +247,12 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
     styles,
     classNames,
     loadingIcon,
-    ...rest
+    clearIcon,
+    removeIcon,
+    suffixIcon,
+    ...restProps
   } = props;
 
-  const restProps = omit(rest, ['suffixIcon']);
-
   const {
     getPrefixCls,
     getPopupContainer: getContextPopupContainer,
@@ -258,6 +262,10 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
     styles: contextStyles,
     expandIcon: contextExpandIcon,
     loadingIcon: contextLoadingIcon,
+    clearIcon: contextClearIcon,
+    removeIcon: contextRemoveIcon,
+    suffixIcon: contextSuffixIcon,
+    searchIcon: contextSearchIcon,
   } = useComponentConfig('cascader');
 
   const { popupOverflow } = React.useContext(ConfigContext);
@@ -367,9 +375,21 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
 
   // ===================== Icons =====================
   const showSuffixIcon = useShowArrow(props.suffixIcon, showArrow);
-  const { suffixIcon, removeIcon, clearIcon } = useSelectIcons({
+  const {
+    suffixIcon: mergedSuffixIcon,
+    removeIcon: mergedRemoveIcon,
+    clearIcon: mergedClearIcon,
+  } = useSelectIcons({
     ...props,
+    clearIcon,
+    contextClearIcon,
+    removeIcon,
+    contextRemoveIcon,
     loadingIcon: mergedLoadingIcon,
+    suffixIcon,
+    contextSuffixIcon,
+    searchIcon: typeof showSearch === 'object' && showSearch ? showSearch.searchIcon : undefined,
+    contextSearchIcon,
     hasFeedback,
     feedbackIcon,
     showSuffixIcon,
@@ -386,7 +406,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
     return isRtl ? 'bottomRight' : 'bottomLeft';
   }, [placement, isRtl]);
 
-  const mergedAllowClear = allowClear === true ? { clearIcon } : allowClear;
+  const mergedAllowClear = allowClear === true ? { clearIcon: mergedClearIcon } : allowClear;
 
   // =========== Merged Props for Semantic ==========
   const mergedProps: CascaderProps<any> = {
@@ -468,8 +488,8 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
       allowClear={mergedAllowClear}
       showSearch={mergedShowSearch}
       expandIcon={mergedExpandIcon}
-      suffixIcon={suffixIcon}
-      removeIcon={removeIcon}
+      suffixIcon={mergedSuffixIcon}
+      removeIcon={mergedRemoveIcon}
       loadingIcon={mergedLoadingIcon}
       checkable={checkable}
       popupClassName={mergedPopupClassName}

components/cascader/index.zh-CN.md

@@ -114,6 +114,7 @@ demo:
 | sort | 用于排序 filter 后的选项 | function(a, b, inputValue) | - |  |
 | searchValue | 设置搜索的值，需要与 `showSearch` 配合使用 | string | - | 4.17.0 |
 | onSearch | 监听搜索，返回输入的值 | (search: string) => void | - | 4.17.0 |
+| searchIcon | 自定义的搜索图标 | ReactNode | - | 6.3.0 |
 
 ### Option
 

components/cascader/style/columns.ts

@@ -6,7 +6,7 @@ import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 import { textEllipsis } from '../../style';
 import type { GenerateStyle } from '../../theme/internal';
 
-const getColumnsStyle: GenerateStyle<CascaderToken, CSSInterpolation> = (token) => {
+const getColumnsStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CSSInterpolation => {
   const { prefixCls, componentCls } = token;
 
   const cascaderMenuItemCls = `${componentCls}-menu-item`;

components/cascader/style/index.ts

@@ -96,6 +96,7 @@ export const prepareComponentToken = (token: GlobalToken) => {
   const itemPaddingVertical = Math.round(
     (token.controlHeight - token.fontSize * token.lineHeight) / 2,
   );
+
   return {
     controlWidth: 184,
     controlItemWidth: 111,

components/cascader/style/panel.ts

@@ -8,7 +8,7 @@ import type { GenerateStyle } from '../../theme/internal';
 import getColumnsStyle from './columns';
 
 // ============================== Panel ===============================
-const genPanelStyle: GenerateStyle<CascaderToken, CSSObject> = (token) => {
+const genPanelStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CSSObject => {
   const { componentCls } = token;
 
   return {

components/collapse/style/index.ts

@@ -1,5 +1,4 @@
 import type { CSSProperties } from 'react';
-import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { genFocusStyle, resetComponent, resetIcon } from '../../style';
@@ -60,7 +59,7 @@ type CollapseToken = FullToken<'Collapse'> & {
   collapsePanelBorderRadius: number;
 };
 
-export const genBaseStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
+export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
   const {
     componentCls,
     contentBg,
@@ -270,7 +269,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken, CSSObject> = (token) =>
   };
 };
 
-const genArrowStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
+const genArrowStyle: GenerateStyle<CollapseToken> = (token) => {
   const { componentCls } = token;
 
   const fixedSelector = `> ${componentCls}-item > ${componentCls}-header ${componentCls}-arrow`;
@@ -284,7 +283,7 @@ const genArrowStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
   };
 };
 
-const genBorderlessStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
+const genBorderlessStyle: GenerateStyle<CollapseToken> = (token) => {
   const { componentCls, headerBg, borderlessContentPadding, borderlessContentBg, colorBorder } =
     token;
 
@@ -320,7 +319,7 @@ const genBorderlessStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
   };
 };
 
-const genGhostStyle: GenerateStyle<CollapseToken, CSSObject> = (token) => {
+const genGhostStyle: GenerateStyle<CollapseToken> = (token) => {
   const { componentCls, paddingSM } = token;
 
   return {

components/color-picker/style/index.ts

@@ -76,7 +76,7 @@ export const genActiveStyle = (
   outline: 0,
 });
 
-const genRtlStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
+const genRtlStyle = (token: ColorPickerToken): CSSObject => {
   const { componentCls } = token;
   return {
     '&-rtl': {
@@ -133,7 +133,7 @@ const genClearStyle = (
   };
 };
 
-const genStatusStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
+const genStatusStyle = (token: ColorPickerToken): CSSObject => {
   const {
     componentCls,
     colorError,
@@ -164,7 +164,7 @@ const genStatusStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
     },
   };
 };
-const genSizeStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
+const genSizeStyle = (token: ColorPickerToken): CSSObject => {
   const {
     componentCls,
     controlHeightLG,

components/config-provider/__tests__/form.test.tsx

@@ -229,6 +229,34 @@ describe('ConfigProvider.Form', () => {
     });
   });
 
+  describe('form labelAlign', () => {
+    it('set labelAlign left', () => {
+      const { container } = render(
+        <ConfigProvider form={{ labelAlign: 'left' }}>
+          <Form>
+            <Form.Item label="姓名">
+              <input />
+            </Form.Item>
+          </Form>
+        </ConfigProvider>,
+      );
+      expect(container.querySelector('.ant-form-item-label-left')).toBeTruthy();
+    });
+
+    it('form labelAlign should override ConfigProvider labelAlign', () => {
+      const { container } = render(
+        <ConfigProvider form={{ labelAlign: 'left' }}>
+          <Form labelAlign="right">
+            <Form.Item label="姓名">
+              <input />
+            </Form.Item>
+          </Form>
+        </ConfigProvider>,
+      );
+      expect(container.querySelector('.ant-form-item-label-left')).toBeFalsy();
+    });
+  });
+
   describe('form disabled', () => {
     it('set Input enabled', () => {
       const { container } = render(

components/config-provider/__tests__/theme.test.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { Modal } from 'antd';
 
 import ConfigProvider from '..';
-import { Button, InputNumber, Select } from '../..';
+import { Button, InputNumber, Select, Space } from '../..';
 import { render, waitFakeTimer } from '../../../tests/utils';
 import theme from '../../theme';
 import type { GlobalToken } from '../../theme/internal';
@@ -113,6 +113,21 @@ describe('ConfigProvider.Theme', () => {
     ).toBeTruthy();
   });
 
+  it('should support Addon component token', () => {
+    const { container } = render(
+      <ConfigProvider theme={{ components: { Addon: { colorText: '#0000FF', algorithm: true } } }}>
+        <Space.Compact>
+          <Space.Addon className="test-addon">Addon Content</Space.Addon>
+        </Space.Compact>
+      </ConfigProvider>,
+    );
+
+    const addon = container.querySelector('.test-addon')!;
+    expect(addon).toHaveStyle({
+      '--ant-color-text': '#0000FF',
+    });
+  });
+
   it('hashed should be true if not changed', () => {
     let hashId = 'hashId';
 

components/config-provider/context.ts

@@ -302,6 +302,7 @@ export type FormConfig = ComponentStyleConfig &
     | 'classNames'
     | 'styles'
     | 'tooltip'
+    | 'labelAlign'
   >;
 
 export type FloatButtonConfig = ComponentStyleConfig &
@@ -372,7 +373,10 @@ export type InputNumberConfig = ComponentStyleConfig &
   Pick<InputNumberProps, 'variant' | 'classNames' | 'styles'>;
 
 export type CascaderConfig = ComponentStyleConfig &
-  Pick<CascaderProps, 'variant' | 'styles' | 'classNames' | 'expandIcon' | 'loadingIcon'>;
+  Pick<
+    CascaderProps,
+    'variant' | 'styles' | 'classNames' | 'expandIcon' | 'loadingIcon' | 'removeIcon' | 'suffixIcon'
+  > & { clearIcon?: React.ReactNode; searchIcon?: React.ReactNode };
 
 export type TreeSelectConfig = ComponentStyleConfig &
   Pick<TreeSelectProps, 'variant' | 'classNames' | 'styles' | 'switcherIcon'>;

components/config-provider/index.en-US.md

@@ -119,7 +119,7 @@ const {
 | cardMeta | Set Card.Meta common props | { className?: string, style?: React.CSSProperties, classNames?: [CardMetaProps\["classNames"\]](/components/card#semantic-dom), styles?: [CardMetaProps\["styles"\]](/components/card#semantic-dom) } | - | 6.0.0 |
 | calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties, classNames?: [CalendarConfig\["classNames"\]](/components/calendar#semantic-dom), styles?: [CalendarConfig\["styles"\]](/components/calendar#semantic-dom) } | - | 5.7.0, `classNames` and `styles`: 6.0.0 |
 | carousel | Set Carousel common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| cascader | Set Cascader common props | { className?: string, style?: React.CSSProperties, classNames?: [CascaderConfig\["classNames"\]](/components/cascader#semantic-dom), styles?: [CascaderConfig\["styles"\]](/components/cascader#semantic-dom), expandIcon?: React.ReactNode, loadingIcon?: React.ReactNode } | - | 5.7.0, `classNames` and `styles`: 6.0.0, `expandIcon` and `loadingIcon`: 6.3.0 |
+| cascader | Set Cascader common props | { className?: string, style?: React.CSSProperties, classNames?: [CascaderConfig\["classNames"\]](/components/cascader#semantic-dom), styles?: [CascaderConfig\["styles"\]](/components/cascader#semantic-dom), expandIcon?: React.ReactNode, loadingIcon?: React.ReactNode, searchIcon?: React.ReactNode, clearIcon?: React.ReactNode, removeIcon?: React.ReactNode, suffixIcon?: React.ReactNode } | - | 5.7.0, `classNames` and `styles`: 6.0.0, `expandIcon`, `loadingIcon`, `searchIcon`, `clearIcon`, `removeIcon`, `suffixIcon`: 6.4.0 |
 | checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties, classNames?: [CheckboxConfig\["classNames"\]](/components/checkbox#semantic-dom), styles?: [CheckboxConfig\["styles"\]](/components/checkbox#semantic-dom) } | - | 5.7.0, `classNames` and `styles`: 6.0.0 |
 | collapse | Set Collapse common props | { className?: string, style?: React.CSSProperties, expandIcon?: (props) => ReactNode, classNames?: [CollapseProps\["classNames"\]](/components/collapse#semantic-dom), styles?: [CollapseProps\["styles"\]](/components/collapse#semantic-dom) } | - | 5.7.0, `expandIcon`: 5.15.0, `classNames` and `styles`: 6.0.0 |
 | colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties, classNames?: [ColorPickerConfig\["classNames"\]](/components/color-picker#semantic-dom), styles?: [ColorPickerConfig\["styles"\]](/components/color-picker#semantic-dom) } | - | 5.7.0 |
@@ -133,7 +133,7 @@ const {
 | flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | floatButton | Set FloatButton common props | { className?: string, style?: React.CSSProperties, classNames?: [FloatButtonProps\["classNames"\]](/components/float-button#semantic-dom), styles?: [FloatButtonProps\["styles"\]](/components/float-button#semantic-dom), backTopIcon?: React.ReactNode } | - |  |
 | floatButtonGroup | Set FloatButton.Group common props | { closeIcon?: React.ReactNode, className?: string, style?: React.CSSProperties, classNames?: [FloatButtonProps\["classNames"\]](/components/float-button#semantic-dom), styles?: [FloatButtonProps\["styles"\]](/components/float-button#semantic-dom) } | - |  |
-| form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options), classNames?:[FormConfig\["classNames"\]](/components/form#semantic-dom), styles?: [FormConfig\["styles"\]](/components/form#semantic-dom), tooltip?: [TooltipProps](/components/tooltip#api) & { icon?: ReactNode } } | - | `requiredMark`: 4.8.0; `colon`: 4.18.0; `scrollToFirstError`: 5.2.0; `className` and `style`: 5.7.0; `tooltip`: 6.3.0 |
+| form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options), classNames?:[FormConfig\["classNames"\]](/components/form#semantic-dom), styles?: [FormConfig\["styles"\]](/components/form#semantic-dom), tooltip?: [TooltipProps](/components/tooltip#api) & { icon?: ReactNode }, labelAlign?: `left` \| `right` } | - | `requiredMark`: 4.8.0; `colon`: 4.18.0; `scrollToFirstError`: 5.2.0; `className` and `style`: 5.7.0; `tooltip`: 6.3.0; `labelAlign`: 6.4.0 |
 | image | Set Image common props | { className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode, classNames?:[ImageConfig\["classNames"\]](/components/image#semantic-dom), styles?: [ImageConfig\["styles"\]](/components/image#semantic-dom) }, fallback?: string } | - | 5.7.0, `closeIcon`: 5.14.0, `classNames` and `styles`: 6.0.0 |
 | input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties, allowClear?: boolean \| { clearIcon?: ReactNode } } | - | 4.2.0, `allowClear`: 5.15.0 |
 | inputNumber | Set InputNumber common props | { className?: string, style?: React.CSSProperties, classNames?: [InputNumberConfig\["classNames"\]](/components/input-number#semantic-dom), styles?: [InputNumberConfig\["styles"\]](/components/input-number#semantic-dom) } | - |  |

components/config-provider/index.zh-CN.md

@@ -121,7 +121,7 @@ const {
 | card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [CardProps\["classNames"\]](/components/card-cn#semantic-dom), styles?: [CardProps\["styles"\]](/components/card-cn#semantic-dom) } | - | 5.7.0, `classNames` 和 `styles`: 5.14.0 |
 | cardMeta | 设置 Card.Meta 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [CardMetaProps\["classNames"\]](/components/card-cn#semantic-dom), styles?: [CardMetaProps\["styles"\]](/components/card-cn#semantic-dom) } | - | 6.0.0 |
 | carousel | 设置 Carousel 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [CascaderConfig\["classNames"\]](/components/cascader#semantic-dom), styles?: [CascaderConfig\["styles"\]](/components/cascader#semantic-dom), expandIcon?: React.ReactNode, loadingIcon?: React.ReactNode } | - | 5.7.0, `classNames` 和 `styles`: 6.0.0, `expandIcon` 和 `loadingIcon`: 6.3.0 |
+| cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [CascaderConfig\["classNames"\]](/components/cascader#semantic-dom), styles?: [CascaderConfig\["styles"\]](/components/cascader#semantic-dom), expandIcon?: React.ReactNode, loadingIcon?: React.ReactNode, searchIcon?: React.ReactNode, clearIcon?: React.ReactNode, removeIcon?: React.ReactNode, suffixIcon?: React.ReactNode } | - | 5.7.0, `classNames` 和 `styles`: 6.0.0, `expandIcon`, `loadingIcon`, `searchIcon`, `clearIcon`, `removeIcon`, `suffixIcon`: 6.4.0 |
 | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [CheckboxConfig\["classNames"\]](/components/checkbox-cn#semantic-dom), styles?: [CheckboxConfig\["styles"\]](/components/checkbox-cn#semantic-dom) } | - | 5.7.0, `classNames` 和 `styles`: 6.0.0 |
 | collapse | 设置 Collapse 组件的通用属性 | { className?: string, style?: React.CSSProperties, expandIcon?: (props) => ReactNode, classNames?: [CollapseProps\["classNames"\]](/components/collapse-cn#semantic-dom), styles?: [CollapseProps\["styles"\]](/components/collapse-cn#semantic-dom) } | - | 5.7.0, `expandIcon`: 5.15.0, `classNames` 和 `styles`: 6.0.0 |
 | colorPicker | 设置 ColorPicker 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ColorPickerConfig\["classNames"\]](/components/color-picker-cn#semantic-dom), styles?: [ColorPickerConfig\["styles"\]](/components/color-picker-cn#semantic-dom) } | - | 5.7.0 |
@@ -135,7 +135,7 @@ const {
 | flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | floatButton | 设置 FloatButton 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [FloatButtonProps\["classNames"\]](/components/float-button-cn#semantic-dom), styles?: [FloatButtonProps\["styles"\]](/components/float-button-cn#semantic-dom), backTopIcon?: React.ReactNode } | - |  |
 | floatButtonGroup | 设置 FloatButton.Group 组件的通用属性 | { closeIcon?: React.ReactNode, className?: string, style?: React.CSSProperties, classNames?: [FloatButtonProps\["classNames"\]](/components/float-button-cn#semantic-dom), styles?: [FloatButtonProps\["styles"\]](/components/float-button-cn#semantic-dom) } | - |  |
-| form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options), classNames?:[FormConfig\["classNames"\]](/components/form-cn#semantic-dom), styles?: [FormConfig\["styles"\]](/components/form-cn#semantic-dom), tooltip?: [TooltipProps](/components/tooltip-cn#api) & { icon?: ReactNode } } | - | `requiredMark`: 4.8.0; `colon`: 4.18.0; `scrollToFirstError`: 5.2.0; `className` 和 `style`: 5.7.0; `tooltip`: 6.3.0 |
+| form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options), classNames?:[FormConfig\["classNames"\]](/components/form-cn#semantic-dom), styles?: [FormConfig\["styles"\]](/components/form-cn#semantic-dom), tooltip?: [TooltipProps](/components/tooltip-cn#api) & { icon?: ReactNode }, labelAlign?: `left` \| `right` } | - | `requiredMark`: 4.8.0; `colon`: 4.18.0; `scrollToFirstError`: 5.2.0; `className` 和 `style`: 5.7.0; `tooltip`: 6.3.0; `labelAlign`: 6.4.0 |
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode, classNames?:[ImageConfig\["classNames"\]](/components/image-cn#semantic-dom), styles?: [ImageConfig\["styles"\]](/components/image-cn#semantic-dom) }, fallback?: string } | - | 5.7.0, `closeIcon`: 5.14.0, `classNames` 和 `styles`: 6.0.0 |
 | input | 设置 Input 组件的通用属性 | { autoComplete?: string, className?: string, style?: React.CSSProperties,classNames?:[InputConfig\["classNames"\]](/components/input-cn#semantic-input), styles?: [InputConfig\["styles"\]](/components/input-cn#semantic-input), allowClear?: boolean \| { clearIcon?: ReactNode } } | - | 5.7.0, `allowClear`: 5.15.0 |
 | inputNumber | 设置 Input 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [InputNumberConfig\["classNames"\]](/components/input-number-cn#semantic-dom), styles?: [InputNumberConfig\["styles"\]](/components/input-number-cn#semantic-dom) } | - |  |

components/date-picker/style/index.ts

@@ -30,7 +30,7 @@ const genPickerPadding = (paddingBlock: number, paddingInline: number): CSSObjec
   };
 };
 
-const genPickerStatusStyle: GenerateStyle<PickerToken, CSSObject> = (token) => {
+const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
   const { componentCls, colorError, colorWarning } = token;
 
   return {

components/date-picker/style/panel.ts

@@ -5,7 +5,7 @@ import { FastColor } from '@ant-design/fast-color';
 import type { GenerateStyle } from '../../theme/internal';
 import type { PickerToken, SharedPickerToken } from './token';
 
-const genPickerCellInnerStyle: GenerateStyle<SharedPickerToken, CSSObject> = (token) => {
+const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
   const {
     pickerCellCls,
     pickerCellInnerCls,
@@ -141,7 +141,7 @@ const genPickerCellInnerStyle: GenerateStyle<SharedPickerToken, CSSObject> = (to
   };
 };
 
-export const genPanelStyle: GenerateStyle<SharedPickerToken, CSSObject> = (token) => {
+export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
   const {
     componentCls,
     pickerCellCls,
@@ -625,7 +625,7 @@ export const genPanelStyle: GenerateStyle<SharedPickerToken, CSSObject> = (token
   };
 };
 
-const genPickerPanelStyle: GenerateStyle<PickerToken, CSSObject> = (token) => {
+const genPickerPanelStyle: GenerateStyle<PickerToken> = (token) => {
   const {
     componentCls,
     textHeight,

components/date-picker/style/variants.ts

@@ -7,10 +7,9 @@ import {
   genOutlinedStyle,
   genUnderlinedStyle,
 } from '../../input/style/variants';
-import type { GenerateStyle } from '../../theme/interface';
 import type { PickerToken } from './token';
 
-const genVariantsStyle: GenerateStyle<PickerToken, CSSObject> = (token) => {
+const genVariantsStyle = (token: PickerToken): CSSObject => {
   const { componentCls } = token;
 
   return {

components/descriptions/style/index.ts

@@ -62,7 +62,7 @@ export interface ComponentToken {
 
 interface DescriptionsToken extends FullToken<'Descriptions'> {}
 
-const genBorderedStyle: GenerateStyle<DescriptionsToken, CSSObject> = (token) => {
+const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
   const { componentCls, labelBg } = token;
   return {
     [`&${componentCls}-bordered`]: {
@@ -118,7 +118,7 @@ const genBorderedStyle: GenerateStyle<DescriptionsToken, CSSObject> = (token) =>
   };
 };
 
-const genDescriptionStyles: GenerateStyle<DescriptionsToken, CSSObject> = (token) => {
+const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
   const {
     componentCls,
     extraColor,

components/divider/style/index.ts

@@ -43,7 +43,7 @@ interface DividerToken extends FullToken<'Divider'> {
 }
 
 // ============================== Size ================================
-const genSizeDividerStyle: GenerateStyle<DividerToken, CSSObject> = (token) => {
+const genSizeDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
   const { componentCls } = token;
 
   return {
@@ -63,7 +63,7 @@ const genSizeDividerStyle: GenerateStyle<DividerToken, CSSObject> = (token) => {
 };
 
 // ============================== Shared ==============================
-const genSharedDividerStyle: GenerateStyle<DividerToken, CSSObject> = (token) => {
+const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
   const {
     componentCls,
     sizePaddingEdgeHorizontal,

components/dropdown/style/status.ts

@@ -1,9 +1,7 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import type { DropdownToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
-const genStatusStyle: GenerateStyle<DropdownToken, CSSObject> = (token) => {
+const genStatusStyle: GenerateStyle<DropdownToken> = (token) => {
   const { componentCls, menuCls, colorError, colorTextLightSolid } = token;
 
   const itemCls = `${menuCls}-item`;

components/form/Form.tsx

@@ -91,6 +91,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormRef, FormProps> = (props,
     styles: contextStyles,
     classNames: contextClassNames,
     tooltip: contextTooltip,
+    labelAlign: contextLabelAlign,
   } = useComponentConfig('form');
 
   const {
@@ -144,6 +145,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormRef, FormProps> = (props,
 
   const mergedColon = colon ?? contextColon;
 
+  const mergedLabelAlign = labelAlign ?? contextLabelAlign;
+
   const mergedTooltip = { ...contextTooltip, ...tooltip };
 
   const prefixCls = getPrefixCls('form', customizePrefixCls);
@@ -194,7 +197,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormRef, FormProps> = (props,
   const formContextValue = React.useMemo<FormContextProps>(
     () => ({
       name,
-      labelAlign,
+      labelAlign: mergedLabelAlign,
       labelCol,
       labelWrap,
       wrapperCol,
@@ -210,7 +213,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormRef, FormProps> = (props,
     }),
     [
       name,
-      labelAlign,
+      mergedLabelAlign,
       labelCol,
       wrapperCol,
       layout,

components/form/style/explain.ts

@@ -1,9 +1,7 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import type { FormToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
-const genFormValidateMotionStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
+const genFormValidateMotionStyle: GenerateStyle<FormToken> = (token) => {
   const { componentCls, motionDurationFast, motionEaseInOut } = token;
 
   const helpCls = `${componentCls}-show-help`;

components/form/style/fallbackCmp.ts

@@ -4,15 +4,13 @@
  */
 
 // Style as inline component
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import { prepareToken } from '.';
 import type { FormToken } from '.';
 import { genSubStyleComponent } from '../../theme/internal';
 import type { GenerateStyle } from '../../theme/internal';
 
 // ============================= Fallback =============================
-const genFallbackStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
+const genFallbackStyle: GenerateStyle<FormToken> = (token) => {
   const { formItemCls } = token;
 
   return {

components/form/style/index.ts

@@ -85,7 +85,7 @@ export interface FormToken extends FullToken<'Form'> {
   rootPrefixCls: string;
 }
 
-const resetForm: GenerateStyle<AliasToken, CSSObject> = (token) => ({
+const resetForm = (token: AliasToken): CSSObject => ({
   legend: {
     display: 'block',
     width: '100%',
@@ -156,10 +156,11 @@ const genFormSize = (token: FormToken, height: number): CSSObject => {
   };
 };
 
-const genFormStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
+const genFormStyle: GenerateStyle<FormToken> = (token) => {
   const { componentCls } = token;
+
   return {
-    [componentCls]: {
+    [token.componentCls]: {
       ...resetComponent(token),
       ...resetForm(token),
 
@@ -182,7 +183,7 @@ const genFormStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
   };
 };
 
-const genFormItemStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
+const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
   const {
     formItemCls,
     iconCls,
@@ -423,7 +424,7 @@ const genFormItemStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
   };
 };
 
-const makeVerticalLayoutLabel: GenerateStyle<FormToken, CSSObject> = (token) => ({
+const makeVerticalLayoutLabel = (token: FormToken): CSSObject => ({
   padding: token.verticalLabelPadding,
   margin: token.verticalLabelMargin,
   whiteSpace: 'initial',
@@ -439,7 +440,7 @@ const makeVerticalLayoutLabel: GenerateStyle<FormToken, CSSObject> = (token) =>
   },
 });
 
-const genHorizontalStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
+const genHorizontalStyle = (token: FormToken): CSSObject => {
   const { antCls, formItemCls } = token;
 
   return {
@@ -470,7 +471,7 @@ const genHorizontalStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
   };
 };
 
-const genInlineStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
+const genInlineStyle: GenerateStyle<FormToken> = (token) => {
   const { componentCls, formItemCls, inlineItemMarginBottom } = token;
 
   return {
@@ -509,7 +510,7 @@ const genInlineStyle: GenerateStyle<FormToken, CSSObject> = (token) => {
   };
 };
 
-const makeVerticalLayout: GenerateStyle<FormToken, CSSObject> = (token) => {
+const makeVerticalLayout = (token: FormToken): CSSObject => {
   const { componentCls, formItemCls, rootPrefixCls } = token;
 
   return {
@@ -605,7 +606,10 @@ export const prepareComponentToken: GetDefaultToken<'Form'> = (token) => ({
   inlineItemMarginBottom: 0,
 });
 
-export const prepareToken = (token: Parameters<GenStyleFn<'Form'>>[0], rootPrefixCls: string) => {
+export const prepareToken: (
+  token: Parameters<GenStyleFn<'Form'>>[0],
+  rootPrefixCls: string,
+) => FormToken = (token, rootPrefixCls) => {
   const formToken = mergeToken<FormToken>(token, {
     formItemCls: `${token.componentCls}-item`,
     rootPrefixCls,

components/grid/style/index.ts

@@ -21,7 +21,7 @@ interface GridColToken extends FullToken<'Grid'> {
 }
 
 // ============================== Row-Shared ==============================
-const genGridRowStyle: GenerateStyle<GridRowToken, CSSObject> = (token) => {
+const genGridRowStyle: GenerateStyle<GridRowToken> = (token): CSSObject => {
   const { componentCls } = token;
 
   return {
@@ -84,7 +84,7 @@ const genGridRowStyle: GenerateStyle<GridRowToken, CSSObject> = (token) => {
 };
 
 // ============================== Col-Shared ==============================
-const genGridColStyle: GenerateStyle<GridColToken, CSSObject> = (token) => {
+const genGridColStyle: GenerateStyle<GridColToken> = (token): CSSObject => {
   const { componentCls } = token;
 
   return {

components/image/style/index.ts

@@ -57,7 +57,7 @@ export const genBoxStyle = (position?: PositionType): CSSObject => ({
   inset: 0,
 });
 
-export const genImageCoverStyle: GenerateStyle<ImageToken, CSSObject> = (token) => {
+export const genImageCoverStyle = (token: ImageToken): CSSObject => {
   const { componentCls, motionDurationSlow, colorTextLightSolid } = token;
   return {
     [componentCls]: {
@@ -90,7 +90,7 @@ export const genImageCoverStyle: GenerateStyle<ImageToken, CSSObject> = (token)
   };
 };
 
-export const genImagePreviewStyle: GenerateStyle<ImageToken, CSSObject> = (token) => {
+export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
   const {
     motionEaseOut,
     previewCls,
@@ -255,7 +255,7 @@ export const genImagePreviewStyle: GenerateStyle<ImageToken, CSSObject> = (token
   };
 };
 
-const genImageStyle: GenerateStyle<ImageToken, CSSObject> = (token) => {
+const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
   const { componentCls } = token;
   return {
     // ============================== image ==============================
@@ -282,7 +282,7 @@ const genImageStyle: GenerateStyle<ImageToken, CSSObject> = (token) => {
   };
 };
 
-const genPreviewMotion: GenerateStyle<ImageToken, CSSObject> = (token) => {
+const genPreviewMotion: GenerateStyle<ImageToken> = (token) => {
   const { previewCls, motionDurationSlow } = token;
 
   return {

components/input-number/style/index.ts

@@ -1,4 +1,3 @@
-import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { genBasicInputStyle, genPlaceholderStyle, initInputToken } from '../../input/style';
@@ -325,7 +324,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token) => {
   ];
 };
 
-const genCompatibleStyles: GenerateStyle<InputNumberToken, CSSObject> = (token) => {
+const genCompatibleStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
   const { componentCls, antCls } = token;
 
   return {

components/input/style/index.ts

@@ -347,7 +347,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
   };
 };
 
-export const genInputStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
+export const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
   const { componentCls, controlHeightSM, lineWidth, calc } = token;
 
   const FIXED_CHROME_COLOR_HEIGHT = 16;
@@ -426,7 +426,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
   };
 };
 
-export const genAffixStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
+export const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
   const {
     componentCls,
     inputAffixPadding,
@@ -539,7 +539,7 @@ export const genAffixStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
   };
 };
 
-const genGroupStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
+const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
   const { componentCls, borderRadiusLG, borderRadiusSM } = token;
 
   return {
@@ -630,7 +630,7 @@ const genGroupStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
 };
 
 // ============================== Range ===============================
-const genRangeStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
+const genRangeStyle: GenerateStyle<InputToken> = (token) => {
   const { componentCls } = token;
 
   return {

components/input/style/otp.ts

@@ -1,12 +1,10 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import type { GenerateStyle } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import type { InputToken } from './token';
 import { initComponentToken, initInputToken } from './token';
 
 // =============================== OTP ================================
-const genOTPStyle: GenerateStyle<InputToken, CSSObject> = (token) => {
+const genOTPStyle: GenerateStyle<InputToken> = (token) => {
   const { componentCls, paddingXS } = token;
 
   return {

components/input/style/search.ts

@@ -1,9 +1,7 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genStyleHooks } from '../../theme/internal';
 
-const genSearchStyle: GenerateStyle<FullToken<'Input'>, CSSObject> = (token) => {
+const genSearchStyle: GenerateStyle<FullToken<'Input'>> = (token) => {
   const { componentCls } = token;
 
   const btnCls = `${componentCls}-btn`;

components/input/style/variants.ts

@@ -1,16 +1,15 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
-import type { GenerateStyle } from '../../theme/internal';
 import { mergeToken } from '../../theme/internal';
 import type { InputToken } from './token';
 
-export const genHoverStyle: GenerateStyle<InputToken, CSSObject> = (token) => ({
+export const genHoverStyle = (token: InputToken): CSSObject => ({
   borderColor: token.hoverBorderColor,
   backgroundColor: token.hoverBg,
 });
 
-export const genDisabledStyle: GenerateStyle<InputToken, CSSObject> = (token) => ({
+export const genDisabledStyle = (token: InputToken): CSSObject => ({
   color: token.colorTextDisabled,
   backgroundColor: token.colorBgContainerDisabled,
   borderColor: token.colorBorder,
@@ -134,7 +133,7 @@ const genOutlinedGroupStatusStyle = (
   },
 });
 
-export const genOutlinedGroupStyle: GenerateStyle<InputToken, CSSObject> = (token) => ({
+export const genOutlinedGroupStyle = (token: InputToken): CSSObject => ({
   '&-outlined': {
     [`${token.componentCls}-group`]: {
       '&-addon': {
@@ -309,7 +308,7 @@ const genFilledGroupStatusStyle = (
   },
 });
 
-export const genFilledGroupStyle: GenerateStyle<InputToken, CSSObject> = (token) => ({
+export const genFilledGroupStyle = (token: InputToken): CSSObject => ({
   '&-filled': {
     [`${token.componentCls}-group-addon`]: {
       background: token.colorFillTertiary,

components/list/style/index.ts

@@ -81,7 +81,7 @@ interface ListToken extends FullToken<'List'> {
   minHeight: number | string;
 }
 
-const genBorderedStyle: GenerateStyle<ListToken, CSSObject> = (token) => {
+const genBorderedStyle = (token: ListToken): CSSObject => {
   const {
     listBorderedCls,
     componentCls,
@@ -128,7 +128,7 @@ const genBorderedStyle: GenerateStyle<ListToken, CSSObject> = (token) => {
     },
   };
 };
-const genResponsiveStyle: GenerateStyle<ListToken, CSSObject> = (token) => {
+const genResponsiveStyle = (token: ListToken): CSSObject => {
   const { componentCls, screenSM, screenMD, marginLG, marginSM, margin } = token;
   return {
     [`@media screen and (max-width:${screenMD}px)`]: {
@@ -178,7 +178,7 @@ const genResponsiveStyle: GenerateStyle<ListToken, CSSObject> = (token) => {
 };
 
 // =============================== Base ===============================
-const genBaseStyle: GenerateStyle<ListToken, CSSObject> = (token) => {
+const genBaseStyle: GenerateStyle<ListToken> = (token) => {
   const {
     componentCls,
     antCls,

components/masonry/style/index.ts

@@ -8,7 +8,7 @@ export interface ComponentToken {}
 
 export interface MasonryToken extends FullToken<'Masonry'> {}
 
-export const genMasonryStyle: GenerateStyle<MasonryToken, CSSObject> = (token) => {
+export const genMasonryStyle: GenerateStyle<MasonryToken> = (token: MasonryToken): CSSObject => {
   const { componentCls } = token;
 
   const itemCls = `${componentCls}-item`;

components/menu/style/index.ts

@@ -406,7 +406,7 @@ export interface MenuToken extends FullToken<'Menu'> {
   darkPopupBg: string;
 }
 
-const genMenuItemStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
+const genMenuItemStyle = (token: MenuToken): CSSObject => {
   const {
     componentCls,
     motionDurationSlow,
@@ -486,7 +486,7 @@ const genMenuItemStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
   };
 };
 
-const genSubMenuArrowStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
+const genSubMenuArrowStyle = (token: MenuToken): CSSObject => {
   const {
     componentCls,
     motionDurationSlow,

components/modal/style/index.ts

@@ -1,5 +1,4 @@
 import type React from 'react';
-import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { getMediaSize } from '../../grid/style';
@@ -397,7 +396,7 @@ const genRTLStyle: GenerateStyle<ModalToken> = (token) => {
   };
 };
 
-const genResponsiveWidthStyle: GenerateStyle<ModalToken, CSSObject> = (token) => {
+const genResponsiveWidthStyle: GenerateStyle<ModalToken> = (token) => {
   const { componentCls } = token;
 
   const oriGridMediaSizesMap: Record<string, number> = getMediaSize(token);
@@ -435,7 +434,7 @@ const genResponsiveWidthStyle: GenerateStyle<ModalToken, CSSObject> = (token) =>
 };
 
 // ============================== Export ==============================
-export const prepareToken = (token: Parameters<GenStyleFn<'Modal'>>[0]) => {
+export const prepareToken: (token: Parameters<GenStyleFn<'Modal'>>[0]) => ModalToken = (token) => {
   const headerPaddingVertical = token.padding;
   const headerFontSize = token.fontSizeHeading5;
   const headerLineHeight = token.lineHeightHeading5;

components/notification/style/index.ts

@@ -109,7 +109,7 @@ export interface NotificationToken extends FullToken<'Notification'> {
   notificationProgressHeight: number;
 }
 
-export const genNoticeStyle: GenerateStyle<NotificationToken, CSSObject> = (token) => {
+export const genNoticeStyle = (token: NotificationToken): CSSObject => {
   const {
     iconCls,
     componentCls, // .ant-notification

components/notification/style/stack.ts

@@ -30,7 +30,7 @@ const genPlacementStackStyle = (
   };
 };
 
-const genStackChildrenStyle: GenerateStyle<NotificationToken, CSSObject> = (token) => {
+const genStackChildrenStyle = (token: NotificationToken): CSSObject => {
   const childrenStyle: CSSObject = {};
   for (let i = 1; i < token.notificationStackLayer; i++) {
     childrenStyle[`&:nth-last-child(${i + 1})`] = {

components/progress/style/index.ts

@@ -302,7 +302,7 @@ const genCircleStyle: GenerateStyle<ProgressToken> = (token) => {
 // ====================================================================
 // ==                              Step                              ==
 // ====================================================================
-const genStepStyle: GenerateStyle<ProgressToken, CSSObject> = (token) => {
+const genStepStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSObject => {
   const { componentCls: progressCls } = token;
 
   return {
@@ -337,7 +337,7 @@ const genStepStyle: GenerateStyle<ProgressToken, CSSObject> = (token) => {
 // ====================================================================
 // ==                           Small Line                           ==
 // ====================================================================
-const genSmallLine: GenerateStyle<ProgressToken, CSSObject> = (token) => {
+const genSmallLine: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSObject => {
   const { componentCls: progressCls, iconCls: iconPrefixCls } = token;
 
   return {

components/rate/style/index.ts

@@ -98,13 +98,13 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = (token) => {
   };
 };
 
-const genRateRtlStyle: GenerateStyle<RateToken, CSSObject> = (token) => ({
+const genRateRtlStyle = (token: RateToken): CSSObject => ({
   [`&-rtl${token.componentCls}`]: {
     direction: 'rtl',
   },
 });
 
-const genRateStyle: GenerateStyle<RateToken, CSSObject> = (token) => {
+const genRateStyle: GenerateStyle<RateToken> = (token) => {
   const { componentCls } = token;
 
   return {

components/result/style/index.ts

@@ -38,7 +38,7 @@ interface ResultToken extends FullToken<'Result'> {
 }
 
 // ============================== Styles ==============================
-const genBaseStyle: GenerateStyle<ResultToken, CSSObject> = (token) => {
+const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
   const {
     componentCls,
     lineHeightHeading3,

components/segmented/style/index.ts

@@ -63,12 +63,12 @@ function getItemDisabledStyle(cls: string, token: SegmentedToken): CSSObject {
   };
 }
 
-const getItemSelectedStyle: GenerateStyle<SegmentedToken, CSSObject> = (token) => {
+function getItemSelectedStyle(token: SegmentedToken): CSSObject {
   return {
     background: token.itemSelectedBg,
     boxShadow: token.boxShadowTertiary,
   };
-};
+}
 
 const segmentedTextEllipsisCss: CSSObject = {
   overflow: 'hidden',
@@ -77,7 +77,7 @@ const segmentedTextEllipsisCss: CSSObject = {
 };
 
 // ============================== Styles ==============================
-const genSegmentedStyle: GenerateStyle<SegmentedToken, CSSObject> = (token) => {
+const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken) => {
   const { componentCls, motionDurationSlow, motionEaseInOut, motionDurationMid } = token;
 
   const labelHeight = token

components/select/style/dropdown.ts

@@ -121,10 +121,6 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
               alignItems: 'center',
             },
 
-            [`&-active:not(${selectItemCls}-option-disabled)`]: {
-              backgroundColor: token.optionActiveBg,
-            },
-
             [`&-selected:not(${selectItemCls}-option-disabled)`]: {
               color: token.optionSelectedColor,
               fontWeight: token.optionSelectedFontWeight,
@@ -135,6 +131,10 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
               },
             },
 
+            [`&-active:not(${selectItemCls}-option-disabled)`]: {
+              backgroundColor: token.optionActiveBg,
+            },
+
             '&-disabled': {
               [`&${selectItemCls}-option-selected`]: {
                 backgroundColor: token.colorBgContainerDisabled,

components/select/style/index.ts

@@ -12,7 +12,7 @@ import { prepareComponentToken } from './token';
 export type { ComponentToken };
 
 // =============================== Base ===============================
-const genBaseStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
+const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
   const { antCls, componentCls, motionDurationMid, inputPaddingHorizontalBase } = token;
 
   const hoverShowClearStyle: CSSObject = {

components/select/style/select-input-customize.ts

@@ -1,9 +1,7 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import type { GenerateStyle } from '../../theme/interface';
 import type { SelectToken } from './token';
 
-const genSelectInputCustomizeStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
+const genSelectInputCustomizeStyle: GenerateStyle<SelectToken> = (token) => {
   const { componentCls } = token;
 
   return {

components/select/style/select-input.ts

@@ -89,7 +89,7 @@ const genSelectInputVariantStyle = (
   };
 };
 
-const genSelectInputStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
+const genSelectInputStyle: GenerateStyle<SelectToken> = (token) => {
   const { componentCls, fontHeight, controlHeight, iconCls, antCls, calc } = token;
   const [varName, varRef] = genCssVar(antCls, 'select');
   return {

components/select/useIcons.tsx

@@ -7,17 +7,23 @@ import DownOutlined from '@ant-design/icons/DownOutlined';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import SearchOutlined from '@ant-design/icons/SearchOutlined';
 
+import fallbackProp from '../_util/fallbackProp';
 import { devUseWarning } from '../_util/warning';
 
 type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
 
 export default function useIcons({
   suffixIcon,
+  contextSuffixIcon,
   clearIcon,
+  contextClearIcon,
   menuItemSelectedIcon,
   removeIcon,
+  contextRemoveIcon,
   loading,
   loadingIcon,
+  searchIcon,
+  contextSearchIcon,
   multiple,
   hasFeedback,
   showSuffixIcon,
@@ -26,11 +32,16 @@ export default function useIcons({
   componentName,
 }: {
   suffixIcon?: React.ReactNode;
-  clearIcon?: RenderNode;
+  contextSuffixIcon?: React.ReactNode;
+  clearIcon?: React.ReactNode;
+  contextClearIcon?: React.ReactNode;
   menuItemSelectedIcon?: RenderNode;
   removeIcon?: RenderNode;
+  contextRemoveIcon?: RenderNode;
   loading?: boolean;
   loadingIcon?: React.ReactNode;
+  searchIcon?: React.ReactNode;
+  contextSearchIcon?: React.ReactNode;
   multiple?: boolean;
   hasFeedback?: boolean;
   feedbackIcon?: ReactNode;
@@ -45,59 +56,72 @@ export default function useIcons({
     warning.deprecated(!clearIcon, 'clearIcon', 'allowClear={{ clearIcon: React.ReactNode }}');
   }
 
-  // Clear Icon
-  const mergedClearIcon = clearIcon ?? <CloseCircleFilled />;
+  return React.useMemo(() => {
+    // Clear Icon
+    const mergedClearIcon = fallbackProp(clearIcon, contextClearIcon, <CloseCircleFilled />);
 
-  // Validation Feedback Icon
-  const getSuffixIconNode = (arrowIcon?: ReactNode) => {
-    if (suffixIcon === null && !hasFeedback && !showArrow) {
-      return null;
-    }
-    return (
-      <>
-        {showSuffixIcon !== false && arrowIcon}
-        {hasFeedback && feedbackIcon}
-      </>
-    );
-  };
-
-  // Arrow item icon
-  let mergedSuffixIcon = null;
-  if (suffixIcon !== undefined) {
-    mergedSuffixIcon = getSuffixIconNode(suffixIcon);
-  } else if (loading) {
-    mergedSuffixIcon = getSuffixIconNode(loadingIcon ?? <LoadingOutlined spin />);
-  } else {
-    mergedSuffixIcon = ({ open, showSearch }: { open: boolean; showSearch: boolean }) => {
-      if (open && showSearch) {
-        return getSuffixIconNode(<SearchOutlined />);
+    // Validation Feedback Icon
+    const getSuffixIconNode = (arrowIcon?: ReactNode) => {
+      if (suffixIcon === null && !hasFeedback && !showArrow) {
+        return null;
       }
-      return getSuffixIconNode(<DownOutlined />);
+      return (
+        <>
+          {showSuffixIcon !== false && arrowIcon}
+          {hasFeedback && feedbackIcon}
+        </>
+      );
     };
-  }
 
-  // Checked item icon
-  let mergedItemIcon = null;
-  if (menuItemSelectedIcon !== undefined) {
-    mergedItemIcon = menuItemSelectedIcon;
-  } else if (multiple) {
-    mergedItemIcon = <CheckOutlined />;
-  } else {
-    mergedItemIcon = null;
-  }
+    // Arrow item icon
+    let mergedSuffixIcon = null;
+    if (suffixIcon !== undefined) {
+      mergedSuffixIcon = getSuffixIconNode(suffixIcon);
+    } else if (loading) {
+      mergedSuffixIcon = getSuffixIconNode(fallbackProp(loadingIcon, <LoadingOutlined spin />));
+    } else {
+      mergedSuffixIcon = ({ open, showSearch }: { open: boolean; showSearch: boolean }) => {
+        if (open && showSearch) {
+          return getSuffixIconNode(fallbackProp(searchIcon, contextSearchIcon, <SearchOutlined />));
+        }
+        return getSuffixIconNode(fallbackProp(contextSuffixIcon, <DownOutlined />));
+      };
+    }
 
-  let mergedRemoveIcon = null;
-  if (removeIcon !== undefined) {
-    mergedRemoveIcon = removeIcon;
-  } else {
-    mergedRemoveIcon = <CloseOutlined />;
-  }
+    // Checked item icon
+    let mergedItemIcon = null;
+    if (menuItemSelectedIcon !== undefined) {
+      mergedItemIcon = menuItemSelectedIcon;
+    } else if (multiple) {
+      mergedItemIcon = <CheckOutlined />;
+    } else {
+      mergedItemIcon = null;
+    }
 
-  return {
-    // TODO: remove as when all the deps bumped
-    clearIcon: mergedClearIcon as React.ReactNode,
-    suffixIcon: mergedSuffixIcon,
-    itemIcon: mergedItemIcon,
-    removeIcon: mergedRemoveIcon,
-  };
+    const mergedRemoveIcon = fallbackProp(removeIcon, contextRemoveIcon, <CloseOutlined />);
+
+    return {
+      clearIcon: mergedClearIcon,
+      suffixIcon: mergedSuffixIcon,
+      itemIcon: mergedItemIcon,
+      removeIcon: mergedRemoveIcon,
+    };
+  }, [
+    suffixIcon,
+    contextSuffixIcon,
+    clearIcon,
+    contextClearIcon,
+    menuItemSelectedIcon,
+    removeIcon,
+    contextRemoveIcon,
+    loading,
+    loadingIcon,
+    searchIcon,
+    contextSearchIcon,
+    multiple,
+    hasFeedback,
+    showSuffixIcon,
+    feedbackIcon,
+    showArrow,
+  ]);
 }

components/skeleton/style/index.ts

@@ -74,7 +74,7 @@ const genSkeletonElementSize = (size: number | string): CSSObject => ({
   ...genSkeletonElementCommonSize(size),
 });
 
-const genSkeletonColor: GenerateStyle<SkeletonToken, CSSObject> = (token) => ({
+const genSkeletonColor = (token: SkeletonToken): CSSObject => ({
   background: token.skeletonLoadingBackground,
   backgroundSize: '400% 100%',
   animationName: skeletonClsLoading,
@@ -82,14 +82,13 @@ const genSkeletonColor: GenerateStyle<SkeletonToken, CSSObject> = (token) => ({
   animationTimingFunction: 'ease',
   animationIterationCount: 'infinite',
 });
-
 const genSkeletonElementInputSize = (size: number, calc: CSSUtil['calc']): CSSObject => ({
   width: calc(size).mul(5).equal(),
   minWidth: calc(size).mul(5).equal(),
   ...genSkeletonElementCommonSize(size),
 });
 
-const genSkeletonElementAvatar: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
+const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => {
   const { skeletonAvatarCls, gradientFromColor, controlHeight, controlHeightLG, controlHeightSM } =
     token;
   return {
@@ -111,7 +110,7 @@ const genSkeletonElementAvatar: GenerateStyle<SkeletonToken, CSSObject> = (token
   };
 };
 
-const genSkeletonElementInput: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
+const genSkeletonElementInput = (token: SkeletonToken): CSSObject => {
   const {
     controlHeight,
     borderRadiusSM,
@@ -140,7 +139,7 @@ const genSkeletonElementInput: GenerateStyle<SkeletonToken, CSSObject> = (token)
   };
 };
 
-const genSkeletonElementShape: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
+const genSkeletonElementShape = (token: SkeletonToken): CSSObject => {
   const { gradientFromColor, borderRadiusSM, imageSizeBase, calc } = token;
   return {
     display: 'inline-flex',
@@ -153,7 +152,7 @@ const genSkeletonElementShape: GenerateStyle<SkeletonToken, CSSObject> = (token)
   };
 };
 
-const genSkeletonElementNode: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
+const genSkeletonElementNode = (token: SkeletonToken): CSSObject => {
   return {
     [token.skeletonNodeCls]: {
       ...genSkeletonElementShape(token),
@@ -161,7 +160,7 @@ const genSkeletonElementNode: GenerateStyle<SkeletonToken, CSSObject> = (token)
   };
 };
 
-const genSkeletonElementImage: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
+const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
   const { skeletonImageCls, imageSizeBase, calc } = token;
 
   return {
@@ -210,7 +209,7 @@ const genSkeletonElementButtonSize = (size: number, calc: CSSUtil['calc']): CSSO
   ...genSkeletonElementCommonSize(size),
 });
 
-const genSkeletonElementButton: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
+const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
   const {
     borderRadiusSM,
     skeletonButtonCls,
@@ -245,7 +244,7 @@ const genSkeletonElementButton: GenerateStyle<SkeletonToken, CSSObject> = (token
 };
 
 // =============================== Base ===============================
-const genBaseStyle: GenerateStyle<SkeletonToken, CSSObject> = (token) => {
+const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
   const {
     componentCls,
     skeletonAvatarCls,

components/space/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -16066,6 +16066,28 @@ exports[`renders components/space/demo/compact-nested.tsx extend context correct
 
 exports[`renders components/space/demo/compact-nested.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/space/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  class="ant-space-compact"
+>
+  <div
+    class="ant-space-addon ant-space-addon-compact-item ant-space-addon-compact-first-item css-var-test-id ant-space-addon-variant-outlined"
+  >
+    Addon
+  </div>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
+    type="button"
+  >
+    <span>
+      Button
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders components/space/demo/component-token.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/space/demo/debug.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"

components/space/__tests__/__snapshots__/demo.test.tsx.snap

@@ -4097,6 +4097,26 @@ exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/space/demo/component-token.tsx correctly 1`] = `
+<div
+  class="ant-space-compact"
+>
+  <div
+    class="ant-space-addon ant-space-addon-compact-item ant-space-addon-compact-first-item css-var-test-id ant-space-addon-variant-outlined"
+  >
+    Addon
+  </div>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
+    type="button"
+  >
+    <span>
+      Button
+    </span>
+  </button>
+</div>
+`;
+
 exports[`renders components/space/demo/debug.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"

components/space/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 `ConfigProvider` 自定义 `Space.Addon` 的主题样式。
+
+## en-US
+
+Use `ConfigProvider` to customize the theme of `Space.Addon`.

components/space/demo/component-token.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Button, ConfigProvider, Space } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Addon: { colorText: 'blue', algorithm: true },
+      },
+    }}
+  >
+    <Space.Compact>
+      <Space.Addon>Addon</Space.Addon>
+      <Button type="primary">Button</Button>
+    </Space.Compact>
+  </ConfigProvider>
+);
+
+export default App;

components/space/index.en-US.md

@@ -34,6 +34,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 <code src="./demo/debug.tsx" debug>Diverse Child</code>
 <code src="./demo/gap-in-line.tsx" debug>Flex gap style</code>
 <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>
+<code src="./demo/component-token.tsx" debug>Customize Addon with theme</code>
 
 ## API
 

components/space/index.zh-CN.md

@@ -38,6 +38,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 <code src="./demo/debug.tsx" debug>多样的 Child</code>
 <code src="./demo/gap-in-line.tsx" debug>Flex gap 样式</code>
 <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code>
+<code src="./demo/component-token.tsx" debug>自定义主题</code>
 
 ## API
 

components/space/style/addon.ts

@@ -1,3 +1,4 @@
+import { resetComponent } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import { genStyleHooks } from '../../theme/internal';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
@@ -7,11 +8,11 @@ import { genCssVar } from '../../theme/util/genStyleUtils';
 // biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default
 export interface ComponentToken {}
 
-interface SpaceToken extends FullToken<'Space'> {
+interface AddonToken extends FullToken<'Space'> {
   // Custom token here
 }
 
-const genSpaceAddonStyle: GenerateStyle<SpaceToken> = (token) => {
+const genSpaceAddonStyle: GenerateStyle<AddonToken> = (token) => {
   const {
     componentCls,
     borderRadius,
@@ -27,7 +28,7 @@ const genSpaceAddonStyle: GenerateStyle<SpaceToken> = (token) => {
     antCls,
   } = token;
 
-  const [varName, varRef] = genCssVar(antCls, 'space');
+  const [varName, varRef] = genCssVar(antCls, 'space-addon');
 
   return {
     [componentCls]: [
@@ -35,6 +36,7 @@ const genSpaceAddonStyle: GenerateStyle<SpaceToken> = (token) => {
       // ==                         Base                         ==
       // ==========================================================
       {
+        ...resetComponent(token),
         display: 'inline-flex',
         alignItems: 'center',
         gap: 0,
@@ -144,7 +146,7 @@ const genSpaceAddonStyle: GenerateStyle<SpaceToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genStyleHooks(['Space', 'Addon'], (token) => [
+export default genStyleHooks('Addon', (token) => [
   genSpaceAddonStyle(token),
   genCompactItemStyle(token, { focus: false }),
 ]);

components/splitter/Panel.tsx

@@ -7,11 +7,14 @@ export const InternalPanel = forwardRef<
   HTMLDivElement,
   React.PropsWithChildren<InternalPanelProps>
 >((props, ref) => {
-  const { prefixCls, className, children, size, style = {} } = props;
+  const { prefixCls, className, children, size, style = {}, supportMotion } = props;
 
   const panelClassName = clsx(
     `${prefixCls}-panel`,
-    { [`${prefixCls}-panel-hidden`]: size === 0 },
+    {
+      [`${prefixCls}-panel-hidden`]: size === 0,
+      [`${prefixCls}-panel-transition`]: supportMotion,
+    },
     className,
   );
 

components/splitter/Splitter.tsx

@@ -28,6 +28,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
     prefixCls: customizePrefixCls,
     className,
     classNames,
+    collapsible,
     style,
     styles,
     layout,
@@ -217,9 +218,13 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
             style: { ...mergedStyles.panel, ...item.style },
           };
 
-          // Panel
           const panel = (
-            <InternalPanel {...panelProps} prefixCls={prefixCls} size={panelSizes[idx]} />
+            <InternalPanel
+              {...panelProps}
+              prefixCls={prefixCls}
+              size={panelSizes[idx]}
+              supportMotion={collapsible?.motion && movingIndex === undefined}
+            />
           );
 
           // Split Bar

components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -4,12 +4,40 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
 <div
   class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
 >
+  <div
+    class="ant-flex css-var-test-id ant-flex-gap-middle"
+  >
+    <button
+      aria-checked="true"
+      class="ant-switch css-var-test-id ant-switch-checked"
+      role="switch"
+      type="button"
+    >
+      <div
+        class="ant-switch-handle"
+      />
+      <span
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        >
+          motion
+        </span>
+        <span
+          class="ant-switch-inner-unchecked"
+        >
+          motion
+        </span>
+      </span>
+    </button>
+  </div>
   <div
     class="ant-splitter ant-splitter-horizontal css-var-test-id ant-splitter-css-var"
     style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); height: 200px;"
   >
     <div
-      class="ant-splitter-panel"
+      class="ant-splitter-panel ant-splitter-panel-transition"
       style="flex-basis: auto; flex-grow: 1;"
     >
       <div
@@ -36,7 +64,7 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
       />
     </div>
     <div
-      class="ant-splitter-panel"
+      class="ant-splitter-panel ant-splitter-panel-transition"
       style="flex-basis: auto; flex-grow: 1;"
     >
       <div
@@ -57,7 +85,7 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
     style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); height: 300px;"
   >
     <div
-      class="ant-splitter-panel"
+      class="ant-splitter-panel ant-splitter-panel-transition"
       style="flex-basis: auto; flex-grow: 1;"
     >
       <div
@@ -84,7 +112,7 @@ exports[`renders components/splitter/demo/collapsible.tsx extend context correct
       />
     </div>
     <div
-      class="ant-splitter-panel"
+      class="ant-splitter-panel ant-splitter-panel-transition"
       style="flex-basis: auto; flex-grow: 1;"
     >
       <div

components/splitter/__tests__/__snapshots__/demo.test.ts.snap

@@ -4,12 +4,40 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
 <div
   class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
 >
+  <div
+    class="ant-flex css-var-test-id ant-flex-gap-middle"
+  >
+    <button
+      aria-checked="true"
+      class="ant-switch css-var-test-id ant-switch-checked"
+      role="switch"
+      type="button"
+    >
+      <div
+        class="ant-switch-handle"
+      />
+      <span
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        >
+          motion
+        </span>
+        <span
+          class="ant-switch-inner-unchecked"
+        >
+          motion
+        </span>
+      </span>
+    </button>
+  </div>
   <div
     class="ant-splitter ant-splitter-horizontal css-var-test-id ant-splitter-css-var"
     style="box-shadow:0 0 10px rgba(0, 0, 0, 0.1);height:200px"
   >
     <div
-      class="ant-splitter-panel"
+      class="ant-splitter-panel ant-splitter-panel-transition"
       style="flex-basis:auto;flex-grow:1"
     >
       <div
@@ -36,7 +64,7 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
       />
     </div>
     <div
-      class="ant-splitter-panel"
+      class="ant-splitter-panel ant-splitter-panel-transition"
       style="flex-basis:auto;flex-grow:1"
     >
       <div
@@ -57,7 +85,7 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
     style="box-shadow:0 0 10px rgba(0, 0, 0, 0.1);height:300px"
   >
     <div
-      class="ant-splitter-panel"
+      class="ant-splitter-panel ant-splitter-panel-transition"
       style="flex-basis:auto;flex-grow:1"
     >
       <div
@@ -84,7 +112,7 @@ exports[`renders components/splitter/demo/collapsible.tsx correctly 1`] = `
       />
     </div>
     <div
-      class="ant-splitter-panel"
+      class="ant-splitter-panel ant-splitter-panel-transition"
       style="flex-basis:auto;flex-grow:1"
     >
       <div

components/splitter/__tests__/index.test.tsx

@@ -997,6 +997,21 @@ describe('Splitter', () => {
       expect(onCollapse).toHaveBeenCalledTimes(2);
       expect(onCollapse).toHaveBeenCalledWith([false, false], [50, 50]);
     });
+
+    it('should apply transition when motion is true', async () => {
+      const { container } = render(
+        <SplitterDemo
+          items={[{ collapsible: true }, { collapsible: true }]}
+          collapsible={{
+            motion: true,
+          }}
+        />,
+      );
+
+      expect(container.querySelector('.ant-splitter-panel')).toHaveClass(
+        'ant-splitter-panel-transition',
+      );
+    });
   });
 
   it('auto resize', async () => {

components/splitter/demo/collapsible.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Flex, Splitter, Typography } from 'antd';
+import React, { useState } from 'react';
+import { Flex, Splitter, Switch, Typography } from 'antd';
 import type { SplitterProps } from 'antd';
 
 const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (
@@ -21,11 +21,23 @@ const CustomSplitter: React.FC<Readonly<SplitterProps>> = ({ style, ...restProps
   </Splitter>
 );
 
-const App: React.FC = () => (
-  <Flex gap="middle" vertical>
-    <CustomSplitter style={{ height: 200 }} />
-    <CustomSplitter style={{ height: 300 }} orientation="vertical" />
-  </Flex>
-);
+const App: React.FC = () => {
+  const [motion, setMotion] = useState(true);
+
+  return (
+    <Flex vertical gap="middle">
+      <Flex gap="middle">
+        <Switch
+          checked={motion}
+          onChange={setMotion}
+          checkedChildren="motion"
+          unCheckedChildren="motion"
+        />
+      </Flex>
+      <CustomSplitter style={{ height: 200 }} collapsible={{ motion }} />
+      <CustomSplitter style={{ height: 300 }} orientation="vertical" collapsible={{ motion }} />
+    </Flex>
+  );
+};
 
 export default App;

components/splitter/index.en-US.md

@@ -44,6 +44,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - |  |
+| collapsible | Collapse config. Set `motion: true` to enable collapse animation; duration is controlled by Component Token `panelMotionDuration` (inherits from `motionDurationSlow`) | `{ motion?: boolean }` | - | 6.4.0 |
 | collapsibleIcon | custom collapsible icon | `{start: ReactNode; end: ReactNode}` | - | 6.0.0 |
 | draggerIcon | custom dragger icon | `ReactNode` | - | 6.0.0 |
 | ~~layout~~ | Layout direction | `horizontal` \| `vertical` | `horizontal` | - |

components/splitter/index.zh-CN.md

@@ -45,6 +45,7 @@ demo:
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - |  |
+| collapsible | 折叠配置。`motion: true` 时启用折叠动画，时长由组件 Token `panelMotionDuration` 控制（继承自 `motionDurationSlow`） | `{ motion?: boolean }` | - | 6.4.0 |
 | collapsibleIcon | 折叠图标 | `{start?: ReactNode; end?: ReactNode}` | - | 6.0.0 |
 | draggerIcon | 拖拽图标 | `ReactNode` | - | 6.0.0 |
 | ~~layout~~ | 布局方向 | `horizontal` \| `vertical` | `horizontal` | - |

components/splitter/interface.ts

@@ -46,6 +46,10 @@ export interface SplitterProps {
   prefixCls?: string;
   className?: string;
   classNames?: SplitterClassNamesType;
+  /**
+   * Collapse configuration. Set `motion: true` to enable collapse animation (duration follows Component Token).
+   */
+  collapsible?: { motion?: boolean };
   style?: React.CSSProperties;
   styles?: SplitterStylesType;
   rootClassName?: string;
@@ -87,6 +91,7 @@ export interface PanelProps {
 export interface InternalPanelProps extends PanelProps {
   className?: string;
   prefixCls?: string;
+  supportMotion?: boolean;
 }
 
 export interface UseResizeProps extends Pick<SplitterProps, 'onResize'> {

components/splitter/style/index.ts

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
+import { genNoMotionStyle } from '../../style/motion';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks } from '../../theme/internal';
 import { genCssVar } from '../../theme/util/genStyleUtils';
@@ -41,7 +42,7 @@ const centerStyle: CSSObject = {
   transform: 'translate(-50%, -50%)',
 };
 
-const genSplitterStyle: GenerateStyle<SplitterToken, CSSObject> = (token) => {
+const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): CSSObject => {
   const {
     componentCls,
     colorFill,
@@ -374,6 +375,11 @@ const genSplitterStyle: GenerateStyle<SplitterToken, CSSObject> = (token) => {
         [`&:has(${componentCls}:only-child)`]: {
           overflow: 'hidden',
         },
+
+        '&-transition': {
+          transition: `flex-basis ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+          ...genNoMotionStyle(),
+        },
       },
     },
   };

components/statistic/style/index.ts

@@ -19,7 +19,7 @@ export interface ComponentToken {
 
 interface StatisticToken extends FullToken<'Statistic'> {}
 
-const genStatisticStyle: GenerateStyle<StatisticToken, CSSObject> = (token) => {
+const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken): CSSObject => {
   const {
     componentCls,
     marginXXS,

components/style/index.tsx

@@ -1,7 +1,7 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
 
-import type { AliasToken, GenerateStyle } from '../theme/internal';
+import type { AliasToken } from '../theme/internal';
 
 export const textEllipsis: CSSObject = {
   overflow: 'hidden',
@@ -60,7 +60,7 @@ export const clearFix = (): CSSObject => ({
   },
 });
 
-export const genLinkStyle: GenerateStyle<AliasToken, CSSObject> = (token) => ({
+export const genLinkStyle = (token: AliasToken): CSSObject => ({
   a: {
     color: token.colorLink,
     textDecoration: token.linkDecoration,
@@ -151,7 +151,7 @@ export const genIconStyle = (iconPrefixCls: string): CSSObject => ({
   },
 });
 
-export const operationUnit: GenerateStyle<AliasToken, CSSObject> = (token) => ({
+export const operationUnit = (token: AliasToken): CSSObject => ({
   // FIXME: This use link but is a operation unit. Seems should be a colorPrimary.
   // And Typography use this to generate link style which should not do this.
   color: token.colorLink,

components/style/motion/collapse.ts

@@ -1,8 +1,6 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import type { AliasToken, GenerateStyle, TokenWithCommonCls } from '../../theme/internal';
 
-const genCollapseMotion: GenerateStyle<TokenWithCommonCls<AliasToken>, CSSObject> = (token) => {
+const genCollapseMotion: GenerateStyle<TokenWithCommonCls<AliasToken>> = (token) => {
   const { componentCls, antCls, motionDurationMid, motionEaseInOut } = token;
   return {
     [componentCls]: {

components/switch/style/index.ts

@@ -331,7 +331,7 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
   };
 };
 
-const genSwitchStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
+const genSwitchStyle = (token: SwitchToken): CSSObject => {
   const { componentCls, trackHeight, trackMinWidth } = token;
 
   return {

components/tabs/style/index.ts

@@ -149,7 +149,7 @@ export interface TabsToken extends FullToken<'Tabs'> {
   tabsHorizontalItemMarginRTL: string;
 }
 
-const genCardStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
+const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
   const {
     componentCls,
     tabsCardPadding,
@@ -272,7 +272,7 @@ const genCardStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
   };
 };
 
-const genDropdownStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
+const genDropdownStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
   const { componentCls, itemHoverColor, dropdownEdgeChildVerticalPadding } = token;
   return {
     [`${componentCls}-dropdown`]: {
@@ -361,7 +361,7 @@ const genDropdownStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
   };
 };
 
-const genPositionStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
+const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
   const {
     componentCls,
     margin,
@@ -600,7 +600,7 @@ const genPositionStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
   };
 };
 
-const genSizeStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
+const genSizeStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
   const {
     componentCls,
     cardPaddingSM,
@@ -690,7 +690,7 @@ const genSizeStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
   };
 };
 
-const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
+const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
   const {
     componentCls,
     itemActiveColor,
@@ -800,7 +800,7 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
   };
 };
 
-const genRtlStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
+const genRtlStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
   const { componentCls, tabsHorizontalItemMarginRTL, iconCls, cardGutter, calc } = token;
   const rtlCls = `${componentCls}-rtl`;
   return {
@@ -898,7 +898,7 @@ const genRtlStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
   };
 };
 
-const genTabsStyle: GenerateStyle<TabsToken, CSSObject> = (token) => {
+const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
   const {
     componentCls,
     tabsCardPadding,

components/tag/style/index.ts

@@ -6,7 +6,7 @@ import { FastColor } from '@ant-design/fast-color';
 import { AggregationColor } from '../../color-picker/color';
 import { isBright } from '../../color-picker/components/ColorPresets';
 import { resetComponent } from '../../style';
-import type { FullToken, GenerateStyle, GenStyleFn, GetDefaultToken } from '../../theme/internal';
+import type { FullToken, GenStyleFn, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
@@ -38,7 +38,7 @@ export interface TagToken extends FullToken<'Tag'> {
 
 // ============================== Styles ==============================
 
-const genBaseStyle: GenerateStyle<TagToken, CSSInterpolation> = (token) => {
+const genBaseStyle = (token: TagToken): CSSInterpolation => {
   const { paddingXXS, lineWidth, tagPaddingHorizontal, componentCls, calc } = token;
   const paddingInline = calc(tagPaddingHorizontal).sub(lineWidth).equal();
   const iconMarginInline = calc(paddingXXS).sub(lineWidth).equal();
@@ -206,7 +206,7 @@ const genBaseStyle: GenerateStyle<TagToken, CSSInterpolation> = (token) => {
 };
 
 // ============================== Export ==============================
-export const prepareToken = (token: Parameters<GenStyleFn<'Tag'>>[0]) => {
+export const prepareToken: (token: Parameters<GenStyleFn<'Tag'>>[0]) => TagToken = (token) => {
   const { lineWidth, fontSizeIcon, calc } = token;
   const tagFontSize = token.fontSizeSM;
   const tagToken = mergeToken<TagToken>(token, {

components/theme/interface/components.ts

@@ -49,6 +49,7 @@ import type { ComponentToken as SelectComponentToken } from '../../select/style'
 import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/style';
 import type { ComponentToken as SliderComponentToken } from '../../slider/style';
 import type { ComponentToken as SpaceComponentToken } from '../../space/style';
+import type { ComponentToken as AddonComponentToken } from '../../space/style/addon';
 import type { ComponentToken as SpinComponentToken } from '../../spin/style';
 import type { ComponentToken as SplitterComponentToken } from '../../splitter/style';
 import type { ComponentToken as StatisticComponentToken } from '../../statistic/style';
@@ -68,6 +69,7 @@ import type { ComponentToken as UploadComponentToken } from '../../upload/style'
 
 export interface ComponentTokenMap {
   Affix?: AffixComponentToken;
+  Addon?: AddonComponentToken;
   Alert?: AlertComponentToken;
   Anchor?: AnchorComponentToken;
   Avatar?: AvatarComponentToken;

components/transfer/style/index.ts

@@ -42,7 +42,9 @@ interface TransferToken extends FullToken<'Transfer'> {
   transferHeaderVerticalPadding: number;
 }
 
-const genTransferCustomizeStyle: GenerateStyle<TransferToken, CSSObject> = (token) => {
+const genTransferCustomizeStyle: GenerateStyle<TransferToken> = (
+  token: TransferToken,
+): CSSObject => {
   const { antCls, componentCls, listHeight, controlHeightLG } = token;
 
   const tableCls = `${antCls}-table`;
@@ -96,7 +98,7 @@ const genTransferStatusColor = (token: TransferToken, color: string): CSSObject
   };
 };
 
-const genTransferStatusStyle: GenerateStyle<TransferToken, CSSObject> = (token) => {
+const genTransferStatusStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
   const { componentCls } = token;
   return {
     [`${componentCls}-status-error`]: {
@@ -108,7 +110,7 @@ const genTransferStatusStyle: GenerateStyle<TransferToken, CSSObject> = (token)
   };
 };
 
-const genTransferListStyle: GenerateStyle<TransferToken, CSSObject> = (token) => {
+const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
   const {
     componentCls,
     colorBorder,
@@ -312,7 +314,7 @@ const genTransferListStyle: GenerateStyle<TransferToken, CSSObject> = (token) =>
   };
 };
 
-const genTransferStyle: GenerateStyle<TransferToken, CSSObject> = (token) => {
+const genTransferStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
   const {
     antCls,
     iconCls,
@@ -356,7 +358,7 @@ const genTransferStyle: GenerateStyle<TransferToken, CSSObject> = (token) => {
   };
 };
 
-const genTransferRTLStyle: GenerateStyle<TransferToken, CSSObject> = (token) => {
+const genTransferRTLStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
   const { componentCls } = token;
   return {
     [`${componentCls}-rtl`]: {

components/typography/style/mixins.ts

@@ -34,7 +34,7 @@ const getTitleStyle = (
 export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = (token) => {
   const headings = [1, 2, 3, 4, 5] as const;
 
-  const styles: CSSObject = {};
+  const styles = {} as CSSObject;
   headings.forEach((headingLevel) => {
     styles[
       `
@@ -78,7 +78,7 @@ export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = (token)
   };
 };
 
-export const getResetStyles: GenerateStyle<TypographyToken, CSSObject> = (token) => ({
+export const getResetStyles: GenerateStyle<TypographyToken, CSSObject> = (token): CSSObject => ({
   code: {
     margin: '0 0.2em',
     paddingInline: '0.4em',

components/upload/style/dragger.ts

@@ -1,10 +1,9 @@
-import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import type { UploadToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
-const genDraggerStyle: GenerateStyle<UploadToken, CSSObject> = (token) => {
+const genDraggerStyle: GenerateStyle<UploadToken> = (token) => {
   const { componentCls, iconCls } = token;
 
   return {

components/upload/style/index.ts

@@ -1,5 +1,3 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import { resetComponent } from '../../style';
 import { genCollapseMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@@ -29,7 +27,7 @@ export interface UploadToken extends FullToken<'Upload'> {
   uploadPicCardSize: number | string;
 }
 
-const genBaseStyle: GenerateStyle<UploadToken, CSSObject> = (token) => {
+const genBaseStyle: GenerateStyle<UploadToken> = (token) => {
   const { componentCls, colorTextDisabled } = token;
 
   return {

components/upload/style/picture.ts

@@ -1,12 +1,11 @@
 import { blue } from '@ant-design/colors';
-import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import type { UploadToken } from '.';
 import { clearFix, textEllipsis } from '../../style';
 import type { GenerateStyle } from '../../theme/internal';
 
-const genPictureStyle: GenerateStyle<UploadToken, CSSObject> = (token) => {
+const genPictureStyle: GenerateStyle<UploadToken> = (token) => {
   const { componentCls, iconCls, uploadThumbnailSize, uploadProgressOffset, calc } = token;
   const listCls = `${componentCls}-list`;
   const itemCls = `${listCls}-item`;
@@ -98,7 +97,7 @@ const genPictureStyle: GenerateStyle<UploadToken, CSSObject> = (token) => {
   };
 };
 
-const genPictureCardStyle: GenerateStyle<UploadToken, CSSObject> = (token) => {
+const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
   const { componentCls, iconCls, fontSizeLG, colorTextLightSolid, calc } = token;
 
   const listCls = `${componentCls}-list`;

components/upload/style/rtl.ts

@@ -1,11 +1,10 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
 import type { UploadToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
 // =========================== Motion ===========================
-const genRtlStyle: GenerateStyle<UploadToken, CSSObject> = (token) => {
+const genRtlStyle: GenerateStyle<UploadToken> = (token) => {
   const { componentCls } = token;
+
   return {
     [`${componentCls}-rtl`]: {
       direction: 'rtl',

package.json

@@ -136,7 +136,7 @@
     "@rc-component/rate": "~1.0.1",
     "@rc-component/resize-observer": "^1.1.1",
     "@rc-component/segmented": "~1.3.0",
-    "@rc-component/select": "~1.6.10",
+    "@rc-component/select": "~1.6.9",
     "@rc-component/slider": "~1.0.1",
     "@rc-component/steps": "~1.2.2",
     "@rc-component/switch": "~1.0.3",
@@ -173,7 +173,7 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
-    "@eslint-react/eslint-plugin": "2.13.0",
+    "@eslint-react/eslint-plugin": "2.12.4",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@inquirer/prompts": "^8.0.2",
     "@madccc/duplicate-package-checker-webpack-plugin": "^1.0.0",