TypeScript Support for PassThrough components

[Pernick]

First of all, great library, I like the theming, the tooling, the docs, superb work.

I am trying to dig around a bit to get to know it well.

One thing that troubles me for now is the TypeScript support for "Pass Through" components (ActionIcon, Button, ...). Whenever the root node of the component is overridable, the component uses ComponentPassThrough generic interface but that seems to kill the typescript support for the props.

I think it has to do with React.ElementType which defaults to React.ElementType<any>.

Do you know of this? Do you have any proposed solutions in mind?

Thanks!

[rtivital]

Hi, thanks for feedback!

I guess this should help with these kind of components – https://mantine.dev/core/button/#typescript

Usually it's just enough to use first generic argument to get most of the types coverage:

<Button<"a">
  component="a"
  href="https://mantine.dev"
  onClick={(event) => event.preventDefault()}
>
  Mantine
</Button>

In case you need correct types in elementRef prop – provide additional generic type (by default it will be HTMLButtonElement in this example without second type):

<Button<"a", HTMLAnchorElement>
  component="a"
  href="https://mantine.dev"
  onClick={(event) => event.preventDefault()}
  elementRef={node => console.log(node)}
>
  Mantine
</Button>

[Pernick]

I am sorry I did not phrase it very well.

I am having issues with the types when going through the core not when utilizing the component. When you open up the Button.tsx for example, the prop types all default to any.

[Pernick]

To be honest I think the solution as is for using the component is good. TypeScript is not required and when you need to set the types you have the option to. I don't really have ideas how to improve that.

The issue I am having is with working on the library, since typescript cannot point out any issues in the component itself as the props are not typed.

I will try to look how material-ui handles this for example.

[rtivital]

The solution for internal types support will be to use something like this:
(It looks and feels nasty and I do not add this to save some time as in most cases it does not bring any value)

/* eslint-disable react/button-has-type */
// ^ this is fun – https://github.com/yannickcr/eslint-plugin-react/issues/1555

import React from 'react';
import cx from 'clsx';
import {
  useMantineTheme,
  DefaultProps,
  MantineSize,
  MantineNumberSize,
  mergeStyles,
} from '../../theme';
import { ComponentPassThrough } from '../../types';
import useStyles, { heights } from './Button.styles';

export const BUTTON_SIZES = heights;
export const BUTTON_VARIANTS = ['link', 'filled', 'outline', 'light'];
export type ButtonVariant = 'link' | 'filled' | 'outline' | 'light';

interface ButtonBaseProps extends DefaultProps<typeof useStyles> {
  /** Predefined button size */
  size?: MantineSize;

  /** Button type attribute */
  type?: 'submit' | 'button' | 'reset';

  /** Button color from theme */
  color?: string;

  /** Adds icon before button label  */
  leftIcon?: React.ReactNode;

  /** Adds icon after button label  */
  rightIcon?: React.ReactNode;

  /** Sets button width to 100% of parent element */
  fullWidth?: boolean;

  /** Button border-radius from theme or number to set border-radius in px */
  radius?: MantineNumberSize;

  /** Controls button appearance */
  variant?: 'link' | 'filled' | 'outline' | 'light';

  /** Set text-transform to uppercase */
  uppercase?: boolean;
}

export function Button<
  T extends React.ElementType = 'button',
  U extends HTMLElement = HTMLButtonElement
>(props: ComponentPassThrough<T, ButtonBaseProps> & {
  /** Get root element ref */
  elementRef?: React.ForwardedRef<U>;
}) {
  const {
    className,
    style,
    size = 'md',
    color,
    type = 'button',
    disabled = false,
    children,
    leftIcon,
    rightIcon,
    fullWidth = false,
    variant = 'filled',
    radius = 'sm',
    component: Element = 'button',
    elementRef,
    themeOverride,
    uppercase = false,
    classNames,
    styles,
    ...others
  } = props as ButtonBaseProps & React.ComponentProps<'button'>;
  const theme = useMantineTheme(themeOverride);
  const classes = useStyles({ radius, color, size, fullWidth, theme }, classNames, 'button');
  const _styles = mergeStyles(classes, styles);

  return (
    <Element
      {...others}
      className={cx(classes.root, classes[variant], className)}
      type={type}
      disabled={disabled}
      ref={elementRef}
      onTouchStart={() => {}}
      style={{ ...style, ..._styles.root }}
    >
      <div className={classes.inner} style={_styles.inner}>
        {leftIcon && (
          <span
            className={cx(classes.icon, classes.leftIcon)}
            style={{ ..._styles.icon, ..._styles.leftIcon }}
          >
            {leftIcon}
          </span>
        )}

        <span
          className={classes.label}
          style={{ textTransform: uppercase ? 'uppercase' : undefined, ..._styles.label }}
        >
          {children}
        </span>

        {rightIcon && (
          <span
            className={cx(classes.icon, classes.rightIcon)}
            style={{ ..._styles.icon, ..._styles.rightIcon }}
          >
            {rightIcon}
          </span>
        )}
      </div>
    </Element>
  );
}

Button.displayName = '@mantine/core/Button';

export type ButtonProps = React.ComponentProps<typeof Button>;

[Pernick]

So your plan is to use the generic for the "outside world" as is ComponentPassThrough<T, ActionIconProps> but for the internal work within the component you would basically assign the generic const { ... } = props as ComponentPassThrough<'button', ActionIconProps> if I understand correctly.

I see why that feels nasty but still, pretty nice solution given the circumstances.

[rtivital]

Well, I'm not planning to do this, but yes, that would be one of potential solutions if I wanted to solve the problem