refactor(react): normalize forwardRef props to ComponentPropsWithoutRef

The codebase mixed `ComponentProps` (with ref) and `ComponentPropsWithoutRef`
across prop interfaces, all consumed by `React.forwardRef`. Normalize to
`ComponentPropsWithoutRef` throughout — the idiomatic pattern React docs
recommend for forwardRef, since forwardRef re-adds ref via `RefAttributes<T>`
to the external component type.

Side benefit: for the handful of non-forwardRef components (Link, Form,
FormItem, Descriptions), this removes `ref` from the prop type so consumers
can no longer pass a non-functional `ref` prop.

Zero external API change for forwardRef components — `<Button ref={...}/>`
still type-checks via `RefAttributes<HTMLButtonElement>`.

Author: wangdicoder

packages/react/src/anchor/types.ts

@@ -12,7 +12,7 @@ export interface AnchorProps extends BaseProps {
   children?: React.ReactNode;
 }
 
-export interface AnchorLinkProps extends BaseProps, React.ComponentProps<'a'> {
+export interface AnchorLinkProps extends BaseProps, React.ComponentPropsWithoutRef<'a'> {
   href: string;
   title: string;
   children?: React.ReactElement<AnchorLinkProps>[];

packages/react/src/button/types.ts

@@ -12,7 +12,7 @@ export type ButtonIconPosition = 'start' | 'end';
 export type ButtonGroupInheritMode = 'fill' | 'override' | 'none';
 
 export interface ButtonProps
-  extends BaseProps, React.ComponentProps<'button'> {
+  extends BaseProps, React.ComponentPropsWithoutRef<'button'> {
   variant?: ButtonVariant;
   color?: ButtonColor;
   loading?: boolean;
@@ -27,7 +27,7 @@ export interface ButtonProps
 }
 
 export interface ButtonGroupProps
-  extends BaseProps, React.ComponentProps<'div'> {
+  extends BaseProps, React.ComponentPropsWithoutRef<'div'> {
   variant?: ButtonVariant;
   color?: ButtonColor;
   size?: SizeType;

packages/react/src/checkbox/types.ts

@@ -3,7 +3,7 @@ import { BaseProps } from '../_utils/props';
 
 export interface CheckboxGroupProps
   extends BaseProps,
-    Omit<React.ComponentProps<'div'>, 'onChange'> {
+    Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
   defaultValue?: string[];
   value?: string[];
   onChange?: (checkedValues: string[]) => void;
@@ -13,7 +13,7 @@ export interface CheckboxGroupProps
 
 export interface CheckboxProps
   extends BaseProps,
-    Omit<React.ComponentProps<'label'>, 'onChange'> {
+    Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange'> {
   /** Only required when use checkbox group */
   value?: string;
   defaultChecked?: boolean;

packages/react/src/descriptions/types.ts

@@ -17,7 +17,7 @@ export interface DescriptionsItemType extends BaseProps {
 
 export interface DescriptionsProps
   extends BaseProps,
-    Omit<React.ComponentProps<'div'>, 'title'> {
+    Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
   title?: React.ReactNode;
   extra?: React.ReactNode;
   footer?: React.ReactNode;

packages/react/src/flex/types.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BaseProps, SizeType } from '../_utils/props';
 
-export interface FlexProps extends BaseProps, React.ComponentProps<'div'> {
+export interface FlexProps extends BaseProps, React.ComponentPropsWithoutRef<'div'> {
   vertical?: boolean;
   wrap?: React.CSSProperties['flexWrap'];
   justify?: React.CSSProperties['justifyContent'];

packages/react/src/form/types.ts

@@ -66,7 +66,7 @@ export interface FormOptionsProps {
 export interface FormProps
   extends BaseProps,
     Partial<FormOptionsProps>,
-    React.ComponentProps<'form'> {
+    React.ComponentPropsWithoutRef<'form'> {
   form?: FormInstance;
   initialValues?: FormValues;
   onFinish?: (values: FormValues) => void;

packages/react/src/grid/types.ts

@@ -11,7 +11,7 @@ export type RowJustify =
   | 'space-between'
   | 'space-evenly';
 
-export interface RowProps extends BaseProps, React.ComponentProps<'div'> {
+export interface RowProps extends BaseProps, React.ComponentPropsWithoutRef<'div'> {
   gutter?: number | [number, number];
   gutterSide?: boolean;
   align?: RowAlign;
@@ -29,7 +29,7 @@ export type GridTrackValue = number | React.CSSProperties['gridTemplateColumns']
 export type GridItemSize = number | 'auto' | 'grow' | 'full';
 export type GridItemOffset = number | 'auto';
 
-export interface GridProps extends BaseProps, React.ComponentProps<'div'> {
+export interface GridProps extends BaseProps, React.ComponentPropsWithoutRef<'div'> {
   columns?: ResponsiveValue<GridTrackValue>;
   rows?: ResponsiveValue<React.CSSProperties['gridTemplateRows']>;
   spacing?: ResponsiveValue<SizeType | React.CSSProperties['gap']>;
@@ -51,7 +51,7 @@ export interface GridProps extends BaseProps, React.ComponentProps<'div'> {
   component?: React.ElementType;
 }
 
-export interface GridItemProps extends BaseProps, React.ComponentProps<'div'> {
+export interface GridItemProps extends BaseProps, React.ComponentPropsWithoutRef<'div'> {
   size?: ResponsiveValue<GridItemSize>;
   offset?: ResponsiveValue<GridItemOffset>;
   column?: ResponsiveValue<React.CSSProperties['gridColumn']>;
@@ -64,7 +64,7 @@ export interface GridItemProps extends BaseProps, React.ComponentProps<'div'> {
   component?: React.ElementType;
 }
 
-export interface ColProps extends BaseProps, React.ComponentProps<'div'> {
+export interface ColProps extends BaseProps, React.ComponentPropsWithoutRef<'div'> {
   span?: number;
   offset?: number;
   order?: number;

packages/react/src/input/types.ts

@@ -3,7 +3,7 @@ import { BaseProps, SizeType } from '../_utils/props';
 
 export interface InputProps
   extends BaseProps,
-    Omit<React.ComponentProps<'input'>, 'size' | 'prefix'> {
+    Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'prefix'> {
   clearable?: boolean;
   prefix?: ReactNode;
   suffix?: ReactNode;

packages/react/src/keyboard/types.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BaseProps } from '../_utils/props';
 
-export interface KeyboardProps extends BaseProps, React.ComponentProps<'kbd'> {
+export interface KeyboardProps extends BaseProps, React.ComponentPropsWithoutRef<'kbd'> {
   children?: React.ReactNode;
 }

packages/react/src/layout/types.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { BaseProps } from '../_utils/props';
 
-export interface LayoutProps extends BaseProps, React.ComponentProps<'div'> {}
+export interface LayoutProps extends BaseProps, React.ComponentPropsWithoutRef<'div'> {}
 
 export type SidebarTheme = 'light' | 'dark';
 
-export interface SidebarProps extends BaseProps, React.ComponentProps<'div'> {
+export interface SidebarProps extends BaseProps, React.ComponentPropsWithoutRef<'div'> {
   collapsible?: boolean;
   collapsed?: boolean;
   defaultCollapsed?: boolean;