How to properly type Box when using polymorphism via as?

[rafaelrinaldi]

I have an input component that uses Box to render an input field by using the as prop. Here is the code:

import React, { forwardRef } from 'react'
import { Box } from "theme-ui";

import { Align, Autocomplete } from '@/components/Input/types';

type InputType = 'text' | 'password' | 'email' | 'tel' | 'number' | 'url';

export interface IInputProps {
    autoComplete?: Autocomplete;
    children?: never;
    id?: string;
    maxLength?: number;
    minLength?: number;
    name?: string;
    required?: boolean;
    textAlign?: Align;
    type?: InputType;
    value?: string;
    disabled?: boolean;
}

export const Input = forwardRef<HTMLInputElement, IInputProps>(
    (
        {
            autoComplete = 'off',
            disabled = false,
            maxLength,
            minLength,
            name,
            required = false,
            textAlign = 'left',
            type = 'text',
            value,
        },
        ref
    ) => {
        const intrinsicProps = { autoComplete, maxLength, minLength };

        return (
            <Box width='100%'>
                <Box
                    {...intrinsicProps}
                    as={"input"}
                    sx={{ textAlign }}
                    type={type}
                    autoCapitalize='off'
                    autoCorrect='off'
                    disabled={!required && disabled}
                    ref={ref}
                    value={value}
                    name={name}
                    required={!disabled && required}
                />
            </Box>
        );
    }
);

Everything seems to be correct but I got two errors with this.

First one is because I am using the width prop in the Box that wraps my component:

src/components/Input.tsx:37:18 - error TS2322: Type '{ children: Element; width: string; }' is not assignable to type 'IntrinsicAttributes & BoxOwnProps & BoxProps & { children?: ReactNode; }'.
  Property 'width' does not exist on type 'IntrinsicAttributes & BoxOwnProps & BoxProps & { children?: ReactNode; }'.

37             <Box width='100%'>
                    ~~~~~

Second one is because I am specifying a type prop for the Box rendering input:

src/components/Input2.tsx:42:21 - error TS2322: Type '{ as: "input"; sx: { textAlign: Align; }; type: InputType; autoCapitalize: string; autoCorrect: string; disabled: boolean; ref: ForwardedRef<HTMLInputElement>; ... 5 more ...; minLength: number | undefined; }' is not assignable to type 'IntrinsicAttributes & BoxOwnProps & BoxProps & { children?: ReactNode; }'.
  Property 'type' does not exist on type 'IntrinsicAttributes & BoxOwnProps & BoxProps & { children?: ReactNode; }'.

42                     type={type}
                       ~~~~

If I remove the type prop, then the same error happens for the disabled prop (which is a boolean).

Am I doing anything wrong? What's the best way to type this?

Thank you in advance.

[rafaelrinaldi]

Worth mentioning that I was able to get rid of the first error by specifying width via sx as opposed to inline and was also able to get rid of the issue with the type prop for the input by creating an arbitrary component with custom typing. Please, refer to the code below:

import React, { forwardRef, ComponentPropsWithRef, FunctionComponent } from 'react'
import { Assign, Box, BoxOwnProps } from "theme-ui";

import { Align, Autocomplete } from '@/components/Input/types';

// Custom interface for a `Box` that exports `input` via `as`
export interface BoxInputProps
    extends Assign<ComponentPropsWithRef<'input'>, BoxOwnProps> {}

export interface IInputProps extends BoxInputProps {
    autoComplete?: Autocomplete;
    children?: never;
    id?: string;
    maxLength?: number;
    minLength?: number;
    name?: string;
    required?: boolean;
    textAlign?: Align;
    type?: string;
    value?: string;
    disabled?: boolean;
}

// Arbitrary `Box` component that implements custom interface
const BoxInput: FunctionComponent<BoxInputProps> = ({ children, ...props }) => <Box as={"input"} {...props}>{children}</Box>

export const Input = forwardRef<HTMLInputElement, IInputProps>(
    (
        {
            disabled = false,
            name,
            required = false,
            textAlign = 'left',
            type = 'text',
            value,
        },
        ref
    ) => {
        return (
            <Box sx={{ width: '100%' }}>
                <BoxInput
                    as={"input"}
                    sx={{ textAlign }}
                    type={type}
                    autoCapitalize='off'
                    autoCorrect='off'
                    disabled={!required && disabled}
                    ref={ref}
                    value={value}
                    name={name}
                    required={!disabled && required}
                />
            </Box>
        );
    }
);

This works, however I strongly believe there is a better way to do it.

Any thoughts?

[hasparus]

Please don't. theme-ui and @theme-ui/components export Input component.

I'd discourage from using polymorphic as prop in TypeScript if you care about your build times. It's a footgun. I managed to crash TypeScript compiler with it a couple times.

Radix UI has a reusable library for proper as prop typings if you really need it.

https://www.radix-ui.com/docs/primitives/utilities/polymorphic

It's probably the best executed as prop implementation you can get, and they still deprecated it in favor of child cloning asChild prop.

If you want to read more about it: Andrew Branch from TypeScript team has a great blogpost about polymorphic components -- https://blog.andrewbran.ch/polymorphic-react-components/

[rafaelrinaldi]

I appreciate your thoughts @hasparus.

So what you are saying is that as is going to be deprecated then? I have used Theme UI like this for a while. If this is discouraged we should probably mention that in the official documentation.

[hasparus]

I'd say it's okayish in JavaScript, discouraged in TypeScript. It's not deprecated yet, but <Box as="input" /> isn't really needed when @theme-ui/components exports Input component already.

In general, I'd use as prop if it doesn't change the type of the component, so:

<Flex as="section" />; // definitely legit
<Box as="main" />; // sweet
<Text as="mark" />; // wow

<Box as="input" />; // not really