[@mantine/core] Cleanup typescript error for polymorphic components (#…

…924) Co-authored-by: Jérémie van der Sande <jeremie.van-der-sande@ubisoft.com>
mantinedev · Mar 3, 2022 · 0d76555 · 0d76555
1 parent 20d5b43
commit 0d76555
Show file tree

Hide file tree

Showing 18 changed files with 20 additions and 55 deletions.
diff --git a/src/mantine-core/src/components/ActionIcon/ActionIcon.tsx b/src/mantine-core/src/components/ActionIcon/ActionIcon.tsx
@@ -38,9 +38,7 @@ interface _ActionIconProps extends DefaultProps<ActionIconStylesNames> {
   loading?: boolean;
 }
 
-export type ActionIconProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, _ActionIconProps>
-  : never;
+export type ActionIconProps<C> = PolymorphicComponentProps<C, _ActionIconProps>;
 
 type ActionIconComponent = (<C = 'button'>(props: ActionIconProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/Anchor/Anchor.tsx b/src/mantine-core/src/components/Anchor/Anchor.tsx
@@ -3,9 +3,7 @@ import { PolymorphicComponentProps, PolymorphicRef } from '@mantine/styles';
 import { Text, SharedTextProps } from '../Text/Text';
 import useStyles from './Anchor.styles';
 
-export type AnchorProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, SharedTextProps>
-  : never;
+export type AnchorProps<C> = PolymorphicComponentProps<C, SharedTextProps>;
 
 type AnchorComponent = (<C = 'a'>(props: AnchorProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/AppShell/Navbar/NavbarSection/NavbarSection.tsx b/src/mantine-core/src/components/AppShell/Navbar/NavbarSection/NavbarSection.tsx
@@ -10,9 +10,7 @@ interface _NavbarSectionProps extends DefaultProps {
   grow?: boolean;
 }
 
-export type NavbarSectionProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, _NavbarSectionProps>
-  : never;
+export type NavbarSectionProps<C> = PolymorphicComponentProps<C, _NavbarSectionProps>;
 
 type NavbarSectionComponent = <C = 'div'>(props: NavbarSectionProps<C>) => React.ReactElement;
 

diff --git a/src/mantine-core/src/components/Avatar/Avatar.tsx b/src/mantine-core/src/components/Avatar/Avatar.tsx
@@ -33,9 +33,7 @@ interface _AvatarProps extends DefaultProps<AvatarStylesNames> {
   imageProps?: React.ComponentPropsWithoutRef<'img'>;
 }
 
-export type AvatarProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, _AvatarProps>
-  : never;
+export type AvatarProps<C> = PolymorphicComponentProps<C, _AvatarProps>;
 
 type AvatarComponent = (<C = 'div'>(props: AvatarProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/Badge/Badge.tsx b/src/mantine-core/src/components/Badge/Badge.tsx
@@ -41,9 +41,7 @@ interface _BadgeProps extends DefaultProps<BadgeStylesNames> {
   rightSection?: React.ReactNode;
 }
 
-export type BadgeProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, _BadgeProps>
-  : never;
+export type BadgeProps<C> = PolymorphicComponentProps<C, _BadgeProps>;
 
 type BadgeComponent = (<C = 'div'>(props: BadgeProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/Box/Box.tsx b/src/mantine-core/src/components/Box/Box.tsx
@@ -11,9 +11,7 @@ interface _BoxProps extends Omit<DefaultProps, 'sx'> {
   sx?: BoxSx;
 }
 
-export type BoxProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, _BoxProps>
-  : never;
+export type BoxProps<C> = PolymorphicComponentProps<C, _BoxProps>;
 
 type BoxComponent = (<C = 'div'>(props: BoxProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/Button/Button.tsx b/src/mantine-core/src/components/Button/Button.tsx
@@ -60,9 +60,7 @@ export interface SharedButtonProps extends DefaultProps<ButtonStylesNames> {
   loaderPosition?: 'left' | 'right';
 }
 
-export type ButtonProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, SharedButtonProps>
-  : never;
+export type ButtonProps<C> = PolymorphicComponentProps<C, SharedButtonProps>;
 
 type ButtonComponent = (<C = 'button'>(props: ButtonProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/Card/Card.tsx b/src/mantine-core/src/components/Card/Card.tsx
@@ -9,9 +9,7 @@ interface _CardProps extends SharedPaperProps {
   children: React.ReactNode;
 }
 
-export type CardProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, _CardProps>
-  : never;
+export type CardProps<C> = PolymorphicComponentProps<C, _CardProps>;
 
 type CardComponent = (<C = 'div'>(props: CardProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/Card/CardSection/CardSection.tsx b/src/mantine-core/src/components/Card/CardSection/CardSection.tsx
@@ -14,9 +14,7 @@ export interface _CardSectionProps extends DefaultProps {
   last?: boolean;
 }
 
-export type CardSectionProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, _CardSectionProps>
-  : never;
+export type CardSectionProps<C> = PolymorphicComponentProps<C, _CardSectionProps>;
 
 type CardSectionComponent = (<C = 'div'>(props: CardSectionProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/Center/Center.tsx b/src/mantine-core/src/components/Center/Center.tsx
@@ -10,9 +10,7 @@ export interface _CenterProps extends DefaultProps {
   inline?: boolean;
 }
 
-export type CenterProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, _CenterProps>
-  : never;
+export type CenterProps<C> = PolymorphicComponentProps<C, _CenterProps>;
 
 type CenterComponent = (<C = 'div'>(props: CenterProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/ColorSwatch/ColorSwatch.tsx b/src/mantine-core/src/components/ColorSwatch/ColorSwatch.tsx
@@ -19,9 +19,7 @@ interface _ColorSwatchProps extends DefaultProps {
   radius?: MantineNumberSize;
 }
 
-export type ColorSwatchProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, _ColorSwatchProps>
-  : never;
+export type ColorSwatchProps<C> = PolymorphicComponentProps<C, _ColorSwatchProps>;
 
 type ColorSwatchComponent = (<C = 'div'>(props: ColorSwatchProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/Highlight/Highlight.tsx b/src/mantine-core/src/components/Highlight/Highlight.tsx
@@ -24,9 +24,7 @@ interface _HighlightProps extends SharedTextProps {
   children: string;
 }
 
-export type HighlightProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, _HighlightProps>
-  : never;
+export type HighlightProps<C> = PolymorphicComponentProps<C, _HighlightProps>;
 
 type HighlightComponent = (<C = 'div'>(props: HighlightProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/Input/Input.tsx b/src/mantine-core/src/components/Input/Input.tsx
@@ -60,9 +60,7 @@ interface _InputProps extends InputBaseProps, DefaultProps<InputStylesNames> {
   __staticSelector?: string;
 }
 
-export type InputProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, _InputProps>
-  : never;
+export type InputProps<C> = PolymorphicComponentProps<C, _InputProps>;
 
 type InputComponent = (<C = 'input'>(props: InputProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/Menu/MenuItem/MenuItem.tsx b/src/mantine-core/src/components/Menu/MenuItem/MenuItem.tsx
@@ -38,9 +38,7 @@ export interface SharedMenuItemProps extends DefaultProps<MenuItemStylesNames> {
   radius?: MantineNumberSize;
 }
 
-export type MenuItemProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, SharedMenuItemProps>
-  : never;
+export type MenuItemProps<C> = PolymorphicComponentProps<C, SharedMenuItemProps>;
 
 export type MenuItemComponent = <C = 'button'>(props: MenuItemProps<C>) => React.ReactElement;
 

diff --git a/src/mantine-core/src/components/Overlay/Overlay.tsx b/src/mantine-core/src/components/Overlay/Overlay.tsx
@@ -25,9 +25,7 @@ interface _OverlayProps extends DefaultProps {
   radius?: MantineNumberSize;
 }
 
-export type OverlayProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, _OverlayProps>
-  : never;
+export type OverlayProps<C> = PolymorphicComponentProps<C, _OverlayProps>;
 
 type OverlayComponent = (<C = 'div'>(props: OverlayProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/Paper/Paper.tsx b/src/mantine-core/src/components/Paper/Paper.tsx
@@ -23,9 +23,7 @@ export interface SharedPaperProps extends DefaultProps {
   withBorder?: boolean;
 }
 
-export type PaperProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, SharedPaperProps>
-  : never;
+export type PaperProps<C> = PolymorphicComponentProps<C, SharedPaperProps>;
 
 type PaperComponent = (<C = 'div'>(props: PaperProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-core/src/components/Text/Text.tsx b/src/mantine-core/src/components/Text/Text.tsx
@@ -45,9 +45,7 @@ export interface SharedTextProps extends DefaultProps {
   gradient?: MantineGradient;
 }
 
-export type TextProps<C> = C extends React.ElementType
-  ? PolymorphicComponentProps<C, SharedTextProps>
-  : never;
+export type TextProps<C> = PolymorphicComponentProps<C, SharedTextProps>;
 
 type TextComponent = (<C = 'div'>(props: TextProps<C>) => React.ReactElement) & {
   displayName?: string;

diff --git a/src/mantine-styles/src/theme/types/Polymorphic.ts b/src/mantine-styles/src/theme/types/Polymorphic.ts
@@ -15,7 +15,6 @@ type InheritedProps<C extends React.ElementType, Props = {}> = ExtendedProps<Pro
 
 export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
 
-export type PolymorphicComponentProps<C extends React.ElementType, Props = {}> = InheritedProps<
-  C,
-  Props & ComponentProp<C>
-> & { ref?: PolymorphicRef<C> };
+export type PolymorphicComponentProps<C, Props = {}> = C extends React.ElementType
+  ? InheritedProps<C, Props & ComponentProp<C>> & { ref?: PolymorphicRef<C> }
+  : Props & { component: React.ElementType };