🐛 Bug - React Key type is wrong

[denkristoffer]

Forma 36 bug report

Summary

The types returned for our components seem to override React's default key type, which allows null. Ours do not.

Details

I'm not sure how to share typescript examples that actually show type errors, so I will have to share a simple example the manual way:

import React from 'react';
import { Note } from '@contentful/f36-components';
import type { NoteProps } from '@contentful/f36-components';

export const MyNote = (props: NoteProps) => (
  <Note {...props}>
    {props.children}
  </Note>
);

Typescript will complain about this:

Types of property 'key' are incompatible.
Type 'Key | null | undefined' is not assignable to type 'Key | undefined'.
Type 'null' is not assignable to type 'Key | undefined'.

<Note {...props}>
~~~~

Digging into the NoteProps we can see that it takes key?: React.Key:

export const Note: React.ForwardRefExoticComponent<{
    color?: string;
    translate?: "no" | "yes";
    slot?: string;
    key?: React.Key;
...

React.Key is a type for string | number. If we dig into @types/react we find this:

    /**
     * @internal You shouldn't need to use this type since you never see these attributes
     * inside your component or have to validate them.
     */
    interface Attributes {
        key?: Key | null | undefined;
    }
...

So as you can see, our types are removing the ability to set key to null. I don't think we should be redefining this at all.

[github-actions]

Marking issue as stale since there was no acitivty for 30 days