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

components/alert/index.tsx

@@ -69,7 +69,7 @@ interface IconNodeProps {
   description: AlertProps['description'];
 }
 
-const IconNode: React.FC<IconNodeProps> = props => {
+const IconNode: React.FC<IconNodeProps> = (props) => {
   const { description, icon, prefixCls, type } = props;
   const iconType = (description ? iconMapOutlined : iconMapFilled)[type!] || null;
   if (icon) {
@@ -90,7 +90,7 @@ interface CloseIconProps {
   handleClose: AlertProps['onClose'];
 }
 
-const CloseIcon: React.FC<CloseIconProps> = props => {
+const CloseIcon: React.FC<CloseIconProps> = (props) => {
   const { isClosable, closeText, prefixCls, closeIcon, handleClose } = props;
   return isClosable ? (
     <button type="button" onClick={handleClose} className={`${prefixCls}-close-icon`} tabIndex={0}>
@@ -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,
@@ -168,7 +168,7 @@ const Alert: AlertInterface = ({
       motionName={`${prefixCls}-motion`}
       motionAppear={false}
       motionEnter={false}
-      onLeaveStart={node => ({
+      onLeaveStart={(node) => ({
         maxHeight: node.offsetHeight,
       })}
       onLeaveEnd={afterClose}

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 */
@@ -133,7 +133,7 @@ const Badge: CompoundedComponent = ({
   const displayNode =
     !livingCount || typeof livingCount !== 'object'
       ? undefined
-      : cloneElement(livingCount, oriProps => ({
+      : cloneElement(livingCount, (oriProps) => ({
           style: {
             ...mergedStyle,
             ...oriProps.style,

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/button/button.tsx

@@ -55,7 +55,7 @@ function insertSpace(child: React.ReactElement | string | number, needInserted:
 function spaceChildren(children: React.ReactNode, needInserted: boolean) {
   let isPrevChildPure: boolean = false;
   const childList: React.ReactNode[] = [];
-  React.Children.forEach(children, child => {
+  React.Children.forEach(children, (child) => {
     const type = typeof child;
     const isCurrentChildPure = type === 'string' || type === 'number';
     if (isPrevChildPure && isCurrentChildPure) {
@@ -70,7 +70,7 @@ function spaceChildren(children: React.ReactNode, needInserted: boolean) {
   });
 
   // Pass to React.Children.map to auto fill key
-  return React.Children.map(childList, child =>
+  return React.Children.map(childList, (child) =>
     insertSpace(child as React.ReactElement | string | number, needInserted),
   );
 }
@@ -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/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/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

@@ -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

@@ -38,7 +38,7 @@ function getNumberSize(size: SpaceSize) {
   return typeof size === 'string' ? spaceSize[size] : size || 0;
 }
 
-const Space: React.FC<SpaceProps> = props => {
+const Space: React.FC<SpaceProps> = (props) => {
   const { getPrefixCls, space, direction: directionConfig } = React.useContext(ConfigContext);
 
   const {
@@ -58,7 +58,7 @@ const Space: React.FC<SpaceProps> = props => {
 
   const [horizontalSize, verticalSize] = React.useMemo(
     () =>
-      ((Array.isArray(size) ? size : [size, size]) as [SpaceSize, SpaceSize]).map(item =>
+      ((Array.isArray(size) ? size : [size, size]) as [SpaceSize, SpaceSize]).map((item) =>
         getNumberSize(item),
       ),
     [size],
@@ -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/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

@@ -171,7 +171,7 @@ function InternalTable<RecordType extends object = any>(
     const matched = new Set(Object.keys(screens).filter((m: Breakpoint) => screens[m]));
 
     return baseColumns.filter(
-      c => !c.responsive || c.responsive.some((r: Breakpoint) => matched.has(r)),
+      (c) => !c.responsive || c.responsive.some((r: Breakpoint) => matched.has(r)),
     );
   }, [baseColumns, screens]);
 
@@ -199,7 +199,7 @@ function InternalTable<RecordType extends object = any>(
   const { childrenColumnName = 'children' } = mergedExpandable;
 
   const expandType = React.useMemo<ExpandType>(() => {
-    if (rawData.some(item => (item as any)?.[childrenColumnName])) {
+    if (rawData.some((item) => (item as any)?.[childrenColumnName])) {
       return 'nest';
     }
 
@@ -335,7 +335,7 @@ function InternalTable<RecordType extends object = any>(
   // ============================ Column ============================
   const columnTitleProps = React.useMemo<ColumnTitleProps<RecordType>>(() => {
     const mergedFilters: Record<string, FilterValue> = {};
-    Object.keys(filters).forEach(filterKey => {
+    Object.keys(filters).forEach((filterKey) => {
       if (filters[filterKey] !== null) {
         mergedFilters[filterKey] = filters[filterKey]!;
       }
@@ -482,9 +482,9 @@ function InternalTable<RecordType extends object = any>(
     const defaultPosition = direction === 'rtl' ? 'left' : 'right';
     const { position } = mergedPagination;
     if (position !== null && Array.isArray(position)) {
-      const topPos = position.find(p => p.includes('top'));
-      const bottomPos = position.find(p => p.includes('bottom'));
-      const isDisable = position.every(p => `${p}` === 'none');
+      const topPos = position.find((p) => p.includes('top'));
+      const bottomPos = position.find((p) => p.includes('bottom'));
+      const isDisable = position.every((p) => `${p}` === 'none');
       if (!topPos && !bottomPos && !isDisable) {
         bottomPaginationNode = renderPagination(defaultPosition);
       }
@@ -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,
@@ -63,7 +63,7 @@ const Timeline: TimelineType = props => {
   };
 
   // Remove falsy items
-  const truthyItems = timeLineItems.filter(item => !!item);
+  const truthyItems = timeLineItems.filter((item) => !!item);
   const itemsCount = React.Children.count(truthyItems);
   const lastCls = `${prefixCls}-item-last`;
   const items = React.Children.map(truthyItems, (ele: React.ReactElement<any>, idx) => {