[v4] Fix(types): external module type error (CompoundedComponent) (#39058)

* fix(types): external module type error (CompoundedComponent)

* feat(types): export CountdownProps

Author: wangcch

components/alert/index.tsx

@@ -99,11 +99,11 @@ const CloseIcon: React.FC<CloseIconProps> = props => {
   ) : null;
 };
 
-interface AlertInterface extends React.FC<AlertProps> {
+type CompoundedComponent = React.FC<AlertProps> & {
   ErrorBoundary: typeof ErrorBoundary;
-}
+};
 
-const Alert: AlertInterface = ({
+const Alert: CompoundedComponent = ({
   description,
   prefixCls: customizePrefixCls,
   message,

components/anchor/index.tsx

@@ -6,11 +6,11 @@ export { AnchorLinkProps } from './AnchorLink';
 
 type InternalAnchorType = typeof InternalAnchor;
 
-interface AnchorInterface extends InternalAnchorType {
+type CompoundedComponent = InternalAnchorType & {
   Link: typeof AnchorLink;
-}
+};
 
-const Anchor = InternalAnchor as AnchorInterface;
+const Anchor = InternalAnchor as CompoundedComponent;
 
 Anchor.Link = AnchorLink;
 export default Anchor;

components/badge/index.tsx

@@ -12,9 +12,9 @@ import { isPresetColor } from './utils';
 
 export { ScrollNumberProps } from './ScrollNumber';
 
-interface CompoundedComponent extends React.FC<BadgeProps> {
+type CompoundedComponent = React.FC<BadgeProps> & {
   Ribbon: typeof Ribbon;
-}
+};
 
 export interface BadgeProps {
   /** Number to show in badge */

components/breadcrumb/Breadcrumb.tsx

@@ -67,12 +67,12 @@ const addChildPath = (paths: string[], childPath: string, params: any) => {
   return originalPaths;
 };
 
-interface BreadcrumbInterface extends React.FC<BreadcrumbProps> {
+type CompoundedComponent = React.FC<BreadcrumbProps> & {
   Item: typeof BreadcrumbItem;
   Separator: typeof BreadcrumbSeparator;
-}
+};
 
-const Breadcrumb: BreadcrumbInterface = ({
+const Breadcrumb: CompoundedComponent = ({
   prefixCls: customizePrefixCls,
   separator = '/',
   style,

components/breadcrumb/BreadcrumbItem.tsx

@@ -19,10 +19,10 @@ export interface BreadcrumbItemProps {
   /** @deprecated Please use `menu` instead */
   overlay?: DropdownProps['overlay'];
 }
-interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
+type CompoundedComponent = React.FC<BreadcrumbItemProps> & {
   __ANT_BREADCRUMB_ITEM: boolean;
-}
-const BreadcrumbItem: BreadcrumbItemInterface = (props) => {
+};
+const BreadcrumbItem: CompoundedComponent = (props) => {
   const {
     prefixCls: customizePrefixCls,
     separator = '/',

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 
-interface BreadcrumbSeparatorInterface extends React.FC<{ children?: React.ReactNode }> {
+type CompoundedComponent = React.FC<{ children?: React.ReactNode }> & {
   /** @internal */
   __ANT_BREADCRUMB_SEPARATOR: boolean;
-}
+};
 
-const BreadcrumbSeparator: BreadcrumbSeparatorInterface = ({ children }) => {
+const BreadcrumbSeparator: CompoundedComponent = ({ children }) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('breadcrumb');
 

components/button/button.tsx

@@ -128,12 +128,13 @@ export type NativeButtonProps = {
 
 export type ButtonProps = Partial<AnchorButtonProps & NativeButtonProps>;
 
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>> {
+type CompoundedComponent = React.ForwardRefExoticComponent<
+  ButtonProps & React.RefAttributes<HTMLElement>
+> & {
   Group: typeof Group;
   /** @internal */
   __ANT_BUTTON: boolean;
-}
+};
 
 type Loading = number | boolean;
 

components/checkbox/index.tsx

@@ -6,12 +6,13 @@ import Group from './Group';
 export { CheckboxChangeEvent, CheckboxProps } from './Checkbox';
 export { CheckboxGroupProps, CheckboxOptionType } from './Group';
 
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> {
+type CompoundedComponent = React.ForwardRefExoticComponent<
+  CheckboxProps & React.RefAttributes<HTMLInputElement>
+> & {
   Group: typeof Group;
   /** @internal */
   __ANT_CHECKBOX: boolean;
-}
+};
 
 const Checkbox = InternalCheckbox as CompoundedComponent;
 

components/collapse/Collapse.tsx

@@ -48,11 +48,11 @@ interface PanelProps {
   collapsible?: CollapsibleType;
 }
 
-interface CollapseInterface extends React.FC<CollapseProps> {
+type CompoundedComponent = React.FC<CollapseProps> & {
   Panel: typeof CollapsePanel;
-}
+};
 
-const Collapse: CollapseInterface = props => {
+const Collapse: CompoundedComponent = (props) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const {
     prefixCls: customizePrefixCls,

components/dropdown/dropdown-button.tsx

@@ -27,12 +27,12 @@ export interface DropdownButtonProps extends ButtonGroupProps, DropdownProps {
   buttonsRender?: (buttons: React.ReactNode[]) => React.ReactNode[];
 }
 
-interface DropdownButtonInterface extends React.FC<DropdownButtonProps> {
+type CompoundedComponent = React.FC<DropdownButtonProps> & {
   /** @internal */
   __ANT_BUTTON: boolean;
-}
+};
 
-const DropdownButton: DropdownButtonInterface = props => {
+const DropdownButton: CompoundedComponent = (props) => {
   const {
     getPopupContainer: getContextPopupContainer,
     getPrefixCls,

components/dropdown/dropdown.tsx

@@ -82,11 +82,11 @@ export interface DropdownProps {
   onVisibleChange?: (open: boolean) => void;
 }
 
-interface DropdownInterface extends React.FC<DropdownProps> {
+type CompoundedComponent = React.FC<DropdownProps> & {
   Button: typeof DropdownButton;
-}
+};
 
-const Dropdown: DropdownInterface = (props) => {
+const Dropdown: CompoundedComponent = (props) => {
   const {
     getPopupContainer: getContextPopupContainer,
     getPrefixCls,

components/empty/index.tsx

@@ -23,12 +23,12 @@ export interface EmptyProps {
   children?: React.ReactNode;
 }
 
-interface EmptyType extends React.FC<EmptyProps> {
+type CompoundedComponent = React.FC<EmptyProps> & {
   PRESENTED_IMAGE_DEFAULT: React.ReactNode;
   PRESENTED_IMAGE_SIMPLE: React.ReactNode;
-}
+};
 
-const Empty: EmptyType = ({
+const Empty: CompoundedComponent = ({
   className,
   prefixCls: customizePrefixCls,
   image = defaultEmptyImg,

components/form/FormItem/index.tsx

@@ -385,11 +385,11 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
 
 type InternalFormItemType = typeof InternalFormItem;
 
-interface FormItemInterface extends InternalFormItemType {
+type CompoundedComponent = InternalFormItemType & {
   useStatus: typeof useFormItemStatus;
-}
+};
 
-const FormItem = InternalFormItem as FormItemInterface;
+const FormItem = InternalFormItem as CompoundedComponent;
 FormItem.useStatus = useFormItemStatus;
 
 export default FormItem;

components/form/index.tsx

@@ -9,7 +9,7 @@ import useFormInstance from './hooks/useFormInstance';
 
 type InternalFormType = typeof InternalForm;
 
-interface FormInterface extends InternalFormType {
+type CompoundedComponent = InternalFormType & {
   useForm: typeof useForm;
   useFormInstance: typeof useFormInstance;
   useWatch: typeof useWatch;
@@ -20,9 +20,9 @@ interface FormInterface extends InternalFormType {
 
   /** @deprecated Only for warning usage. Do not use. */
   create: () => void;
-}
+};
 
-const Form = InternalForm as FormInterface;
+const Form = InternalForm as CompoundedComponent;
 
 Form.Item = Item;
 Form.List = List;

components/input/index.tsx

@@ -12,13 +12,14 @@ export { PasswordProps } from './Password';
 export { SearchProps } from './Search';
 export { TextAreaProps } from './TextArea';
 
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> {
+type CompoundedComponent = React.ForwardRefExoticComponent<
+  InputProps & React.RefAttributes<InputRef>
+> & {
   Group: typeof Group;
   Search: typeof Search;
   TextArea: typeof TextArea;
   Password: typeof Password;
-}
+};
 
 const Input = InternalInput as CompoundedComponent;
 

components/layout/index.tsx

@@ -6,14 +6,14 @@ export { SiderProps } from './Sider';
 
 type InternalLayoutType = typeof InternalLayout;
 
-interface LayoutType extends InternalLayoutType {
+type CompoundedComponent = InternalLayoutType & {
   Header: typeof Header;
   Footer: typeof Footer;
   Content: typeof Content;
   Sider: typeof Sider;
-}
+};
 
-const Layout = InternalLayout as LayoutType;
+const Layout = InternalLayout as CompoundedComponent;
 
 Layout.Header = Header;
 Layout.Footer = Footer;

components/mentions/index.tsx

@@ -23,9 +23,7 @@ function loadingFilterOption() {
 
 export type MentionPlacement = 'top' | 'bottom';
 
-export type {
-  DataDrivenOptionProps as MentionsOptionProps,
-} from 'rc-mentions/lib/Mentions';
+export type { DataDrivenOptionProps as MentionsOptionProps } from 'rc-mentions/lib/Mentions';
 
 export interface OptionProps {
   value: string;
@@ -55,11 +53,12 @@ interface MentionsEntity {
   value: string;
 }
 
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<MentionProps & React.RefAttributes<MentionsRef>> {
+type CompoundedComponent = React.ForwardRefExoticComponent<
+  MentionProps & React.RefAttributes<MentionsRef>
+> & {
   Option: typeof Option;
   getMentions: (value: string, config?: MentionsConfig) => MentionsEntity[];
-}
+};
 
 const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps> = (
   {

components/pagination/Select.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import type { SelectProps } from '../select';
 import Select from '../select';
 
-interface MiniOrMiddleSelectInterface extends React.FC<SelectProps> {
+type CompoundedComponent = React.FC<SelectProps> & {
   Option: typeof Select.Option;
-}
+};
 
-const MiniSelect: MiniOrMiddleSelectInterface = props => <Select {...props} size="small" />;
-const MiddleSelect: MiniOrMiddleSelectInterface = props => <Select {...props} size="middle" />;
+const MiniSelect: CompoundedComponent = (props) => <Select {...props} size="small" />;
+const MiddleSelect: CompoundedComponent = (props) => <Select {...props} size="middle" />;
 
 MiniSelect.Option = Select.Option;
 MiddleSelect.Option = Select.Option;

components/radio/index.tsx

@@ -14,13 +14,15 @@ export {
   RadioProps,
 } from './interface';
 export { Button, Group };
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLElement>> {
+
+type CompoundedComponent = React.ForwardRefExoticComponent<
+  RadioProps & React.RefAttributes<HTMLElement>
+> & {
   Group: typeof Group;
   Button: typeof Button;
   /** @internal */
   __ANT_RADIO: boolean;
-}
+};
 
 const Radio = InternalRadio as CompoundedComponent;
 Radio.Button = Button;

components/skeleton/Skeleton.tsx

@@ -14,7 +14,7 @@ import type { SkeletonTitleProps } from './Title';
 import Title from './Title';
 
 /* This only for skeleton internal. */
-interface SkeletonAvatarProps extends Omit<AvatarProps, 'active'> {}
+type SkeletonAvatarProps = Omit<AvatarProps, 'active'>;
 
 export interface SkeletonProps {
   active?: boolean;
@@ -75,15 +75,15 @@ function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): Skeleton
   return basicProps;
 }
 
-interface CompoundedComponent {
+type CompoundedComponent = {
   Button: typeof SkeletonButton;
   Avatar: typeof SkeletonAvatar;
   Input: typeof SkeletonInput;
   Image: typeof SkeletonImage;
   Node: typeof SkeletonNode;
-}
+};
 
-const Skeleton: React.FC<SkeletonProps> & CompoundedComponent = props => {
+const Skeleton: React.FC<SkeletonProps> & CompoundedComponent = (props) => {
   const {
     prefixCls: customizePrefixCls,
     loading,

components/space/index.tsx

@@ -146,9 +146,9 @@ const Space: React.FC<SpaceProps> = props => {
   );
 };
 
-interface CompoundedComponent extends React.FC<SpaceProps> {
+type CompoundedComponent = React.FC<SpaceProps> & {
   Compact: typeof Compact;
-}
+};
 
 const CompoundedSpace = Space as CompoundedComponent;
 CompoundedSpace.Compact = Compact;

components/statistic/Countdown.tsx

@@ -8,7 +8,7 @@ import { formatCountdown } from './utils';
 
 const REFRESH_INTERVAL = 1000 / 30;
 
-interface CountdownProps extends StatisticProps {
+export interface CountdownProps extends StatisticProps {
   value?: countdownValueType;
   format?: string;
   onFinish?: () => void;

components/statistic/Statistic.tsx

@@ -8,9 +8,9 @@ import type Countdown from './Countdown';
 import StatisticNumber from './Number';
 import type { FormatConfig, valueType } from './utils';
 
-interface StatisticComponent {
+type CompoundedComponent = {
   Countdown: typeof Countdown;
-}
+};
 
 export interface StatisticProps extends FormatConfig {
   prefixCls?: string;
@@ -76,6 +76,6 @@ const Statistic: React.FC<StatisticProps & ConfigConsumerProps> = props => {
 
 const WrapperStatistic = withConfigConsumer<StatisticProps>({
   prefixCls: 'statistic',
-})<StatisticComponent>(Statistic);
+})<CompoundedComponent>(Statistic);
 
 export default WrapperStatistic;

components/steps/index.tsx

@@ -41,11 +41,11 @@ export interface StepsProps {
   items?: StepProps[];
 }
 
-interface StepsType extends React.FC<StepsProps> {
+type CompoundedComponent = React.FC<StepsProps> & {
   Step: typeof RcSteps.Step;
-}
+};
 
-const Steps: StepsType = props => {
+const Steps: CompoundedComponent = (props) => {
   const {
     percent,
     size,

components/switch/index.tsx

@@ -35,11 +35,12 @@ export interface SwitchProps {
   id?: string;
 }
 
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLElement>> {
+type CompoundedComponent = React.ForwardRefExoticComponent<
+  SwitchProps & React.RefAttributes<HTMLElement>
+> & {
   /** @internal */
   __ANT_SWITCH: boolean;
-}
+};
 
 const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
   (

components/table/Table.tsx

@@ -556,7 +556,7 @@ const ForwardTable = React.forwardRef(InternalTable) as <RecordType extends obje
 
 type InternalTableType = typeof ForwardTable;
 
-interface TableInterface extends InternalTableType {
+type CompoundedComponent = InternalTableType & {
   SELECTION_COLUMN: typeof SELECTION_COLUMN;
   EXPAND_COLUMN: typeof RcTable.EXPAND_COLUMN;
   SELECTION_ALL: 'SELECT_ALL';
@@ -565,9 +565,9 @@ interface TableInterface extends InternalTableType {
   Column: typeof Column;
   ColumnGroup: typeof ColumnGroup;
   Summary: typeof Summary;
-}
+};
 
-const Table = ForwardTable as TableInterface;
+const Table = ForwardTable as CompoundedComponent;
 
 Table.SELECTION_COLUMN = SELECTION_COLUMN;
 Table.EXPAND_COLUMN = RcTable.EXPAND_COLUMN;

components/timeline/Timeline.tsx

@@ -19,11 +19,11 @@ export interface TimelineProps {
   children?: React.ReactNode;
 }
 
-interface TimelineType extends React.FC<TimelineProps> {
+type CompoundedComponent = React.FC<TimelineProps> & {
   Item: React.FC<TimelineItemProps>;
-}
+};
 
-const Timeline: TimelineType = props => {
+const Timeline: CompoundedComponent = (props) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const {
     prefixCls: customizePrefixCls,

components/tree-select/index.tsx

@@ -246,14 +246,14 @@ const TreeSelectRef = React.forwardRef(InternalTreeSelect) as <
 
 type InternalTreeSelectType = typeof TreeSelectRef;
 
-interface TreeSelectInterface extends InternalTreeSelectType {
+type CompoundedComponent = InternalTreeSelectType & {
   TreeNode: typeof TreeNode;
   SHOW_ALL: typeof SHOW_ALL;
   SHOW_PARENT: typeof SHOW_PARENT;
   SHOW_CHILD: typeof SHOW_CHILD;
-}
+};
 
-const TreeSelect = TreeSelectRef as TreeSelectInterface;
+const TreeSelect = TreeSelectRef as CompoundedComponent;
 
 TreeSelect.TreeNode = TreeNode;
 TreeSelect.SHOW_ALL = SHOW_ALL;

components/upload/index.tsx

@@ -6,15 +6,15 @@ export { DraggerProps } from './Dragger';
 export { RcFile, UploadChangeParam, UploadFile, UploadListProps, UploadProps } from './interface';
 
 type InternalUploadType = typeof InternalUpload;
-interface UploadInterface<T = any> extends InternalUploadType {
+type CompoundedComponent<T = any> = InternalUploadType & {
   <U extends T>(
     props: React.PropsWithChildren<UploadProps<U>> & React.RefAttributes<any>,
   ): React.ReactElement;
   Dragger: typeof Dragger;
   LIST_IGNORE: string;
-}
+};
 
-const Upload = InternalUpload as UploadInterface;
+const Upload = InternalUpload as CompoundedComponent;
 Upload.Dragger = Dragger;
 Upload.LIST_IGNORE = LIST_IGNORE;