PolymorphicComponent Type Improvements

[ksmfou98]

The Mantine UI Library is my favorite library!

I apologize for my poor English. 😭

How about modifying the createPolymorphicComponent type as follows?

// @mantine/utils/src/create-polymorphic-component.ts

// ...
export function createPolymorphicComponent<
  ComponentDefaultType,
  Props,
  StaticComponents = Record<string, never>
>(component: any) {
  type ComponentProps<C> = PolymorphicComponentProps<C, Omit<Props, "component">>;

  type _PolymorphicComponent = <C = ComponentDefaultType>(
    props: ComponentProps<C>
  ) => React.ReactElement;

  type ComponentProperties = Omit<React.FunctionComponent<ComponentProps<any>>, never>;
  type PolymorphicComponent = _PolymorphicComponent & ComponentProperties & StaticComponents;
  return component as PolymorphicComponent;
}

// @mantine-styles/src/theme/types/DefaultProps.ts
export interface DefaultProps<
  StylesNames extends string = never,
  StylesParams extends Record<string, any> = Record<string, any>
> extends MantineStyleSystemProps {
  className?: string;
  style?: CSSProperties;
  sx?: Sx | (Sx | undefined)[];
  classNames?: ClassNames<StylesNames>;
  styles?: Styles<StylesNames, StylesParams>;
  unstyled?: boolean;
  component?: any
}

This will allow you to remove the { component: any } part from the component.

// @mantine-core/src/Box
// before
export const _Box = forwardRef<HTMLDivElement, BoxProps & { component: any }>(
  ({ className, component, style, sx, ...others }, ref) => {
    const { systemStyles, rest } = extractSystemStyles(others);
    const Element = component || 'div';
    return (
      <Element ref={ref} className={useSx(sx, systemStyles, className)} style={style} {...rest} />
    );
  }
);

// after
export const _Box = forwardRef<HTMLDivElement, BoxProps>(
  ({ className, component, style, sx, ...others }, ref) => {
    const { systemStyles, rest } = extractSystemStyles(others);
    const Element = component || 'div';
    return (
      <Element ref={ref} className={useSx(sx, systemStyles, className)} style={style} {...rest} />
    );
  }
);

Thanks!

[rtivital]

1. component: any used once in the Box component, it is not a big issue
2. polymorphic components types are changed in 7.0 – https://github.com/mantinedev/mantine-v7/blob/master/src/mantine-core/src/core/factory/polymorphic-factory.ts