[Box] TS error when assiging a typed ref to Box

Typed ref on Box component

Describe the bug

When using the box component and trying to pass a typed react ref according to as prop, it complains about type mismatch since Box component is not generic

To reproduce

pass a typed ref to Box component

  const boxRef = React.useRef<HTMLSpanElement>(null);
...
  <Box as="span" ref={boxRef}>

TS error: Type 'RefObject<HTMLSpanElement>' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'. Type 'RefObject<HTMLSpanElement>' is not assignable to type 'RefObject<HTMLDivElement>'. Property 'align' is missing in type 'HTMLSpanElement' but required in type 'HTMLDivElement'.

Minimal reproduction

https://codesandbox.io/s/box-typed-ref-27mkm

Expected behavior

Maybe make Box generic so we can type it, something like this: <Box<HTMLSpanElement> />, not sure if it can take the type from as prop 🤔

[chinanderm]

Keep this open please. This remains a shortcoming.

[santiagocezar]

I’ve just hit this issue. As a workaround I’ve modified some type declarations in @chakra-ui/system/dist/types/system.types.d.ts:

export declare type MergeWithAs<ComponentProps extends object, AsProps extends object, AdditionalProps extends object = {}, AsComponent extends As = As> = RightJoinProps<RightJoinProps<ComponentProps, AsProps>, AdditionalProps> & {
    as?: AsComponent;
};
export declare type ComponentWithAs<Component extends As, Props extends object = {}> = {
    <AsComponent extends As = 'div'>(props: MergeWithAs<React.ComponentProps<Component>, React.ComponentProps<AsComponent>, Props, AsComponent>): JSX.Element;
    displayName?: string;
    propTypes?: React.WeakValidationMap<any>;
    contextTypes?: React.ValidationMap<any>;
    defaultProps?: Partial<any>;
    id?: string;
};

It now infers the correct type declarations for ref and other props using Box, but I’m not sure if would cause any problems with the rest of the library. I’ll be making a pull request to test this changes

Also, I agree this issue should be reopened