[EuiCallOut] TypeScript requiring unnecessary prop translate

[i-a-n]

It seems the use of Pick<> in the <EuiCallOut> type def is leading to unintentionally required props, specifically, it requires me to use "translate" in order to satisfy its requirements. Example—this code:

        <EuiCallOut
          title={
            <EuiI18n
              token="contacts.maxContactsTitle"
              default="Maximum number of contacts reached"
            />
          }
          color="danger"
          iconType="alert"
        >

...leads to this error:

Property 'translate' is missing in type '{ children: (string | Element)[]; title: Element; color: "danger"; 
iconType: string; }' but required in type 'Pick<HTMLAttributes<HTMLDivElement>, "children" | "dir" |
"slot" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 244 more ... | 
"translate">'.ts(2741)

And this "fixes" it:

        <EuiCallOut
          title={
            <EuiI18n
              token="contacts.maxContactsTitle"
              default="Maximum number of contacts reached"
            />
          }
          color="danger"
          iconType="alert"
          translate
        >

Asking about this in #eui led to Chandler noting:

the TS-provided Pick isn't distributive microsoft/TypeScript#28339
We have (and export) a DistributivePick to solve it, looks like we may need to apply it somewhere on EuiCallOut. Would you mind opening an issue?

So here we are. Thanks for taking a look.

[chandlerprall]

What are the versions of typescript and eui you are using? Tried replicating this within eui with the latest master but it works as expected.

[i-a-n]

@chandlerprall

I'm using EUI 31.9.1 and TypeScript 3.9.9

[i-a-n]

note: I've upgraded to TypeScript 4.0.5 and the problem remains

[i-a-n]

note!: this was due to my version of @types/react being outdated. upgrading from @types/[email protected] to @types/[email protected] fixed it. how about that.